feat: assignments pagina toont een text als er geen assignments zijn

frontend/src/i18n/locale/de.json

@@ -121,5 +121,6 @@
     "invite": "einladen",
     "assignmentIndicator": "AUFGABE",
     "searchAllLearningPathsTitle": "Alle Lernpfade durchsuchen",
-    "searchAllLearningPathsDescription": "Nicht gefunden, was Sie gesucht haben? Klicken Sie hier, um unsere gesamte Lernpfad-Datenbank zu durchsuchen."
+    "searchAllLearningPathsDescription": "Nicht gefunden, was Sie gesucht haben? Klicken Sie hier, um unsere gesamte Lernpfad-Datenbank zu durchsuchen.",
+    "no-assignments": "Derzeit gibt es keine Zuweisungen."
 }

frontend/src/i18n/locale/en.json

@@ -121,5 +121,6 @@
     "invite": "invite",
     "assignmentIndicator": "ASSIGNMENT",
     "searchAllLearningPathsTitle": "Search all learning paths",
-    "searchAllLearningPathsDescription": "You didn't find what you were looking for? Click here to search our whole database of available learning paths."
+    "searchAllLearningPathsDescription": "You didn't find what you were looking for? Click here to search our whole database of available learning paths.",
+    "no-assignments": "There are currently no assignments."
 }

frontend/src/i18n/locale/fr.json

@@ -121,5 +121,6 @@
     "invite": "inviter",
     "assignmentIndicator": "DEVOIR",
     "searchAllLearningPathsTitle": "Rechercher tous les parcours d'apprentissage",
-    "searchAllLearningPathsDescription": "Vous n'avez pas trouvé ce que vous cherchiez ? Cliquez ici pour rechercher dans toute notre base de données de parcours d'apprentissage disponibles."
+    "searchAllLearningPathsDescription": "Vous n'avez pas trouvé ce que vous cherchiez ? Cliquez ici pour rechercher dans toute notre base de données de parcours d'apprentissage disponibles.",
+    "no-assignments": "Il n'y a actuellement aucun travail."
 }

frontend/src/i18n/locale/nl.json

@@ -121,5 +121,6 @@
     "invite": "uitnodigen",
     "assignmentIndicator": "OPDRACHT",
     "searchAllLearningPathsTitle": "Alle leerpaden doorzoeken",
-    "searchAllLearningPathsDescription": "Niet gevonden waar je naar op zoek was? Klik hier om onze volledige databank van beschikbare leerpaden te doorzoeken."
+    "searchAllLearningPathsDescription": "Niet gevonden waar je naar op zoek was? Klik hier om onze volledige databank van beschikbare leerpaden te doorzoeken.",
+    "no-assignments": "Er zijn momenteel geen opdrachten."
 }

frontend/src/views/assignments/UserAssignments.vue

@@ -65,7 +65,7 @@
 
                 return aTime - bTime;
             });
-    }, []);
+    }, [], {evaluating: true});
 
 
     async function goToCreateAssignment(): Promise<void> {
@@ -179,6 +179,14 @@
                     </v-card>
                 </v-col>
             </v-row>
+            <v-row v-if="assignments.length === 0">
+                <v-col cols="12">
+                    <div class="no-assignments">
+                        {{ t("no-assignments") }}
+                    </div>
+                </v-col>
+            </v-row>
+
         </v-container>
     </div>
 </template>
@@ -200,12 +208,26 @@
 
     .center-btn {
         display: block;
-        margin-left: auto;
+        margin: 0 auto 2rem auto;
-        margin-right: auto;
+        font-weight: 600;
+        background-color: #10ad61;
+        color: white;
+        transition: background-color 0.2s;
+    }
+    .center-btn:hover {
+        background-color: #0e6942;
     }
 
     .assignment-card {
-        padding: 1rem;
+        padding: 1.25rem;
+        border-radius: 16px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        background-color: white;
+        transition: transform 0.2s, box-shadow 0.2s;
+    }
+    .assignment-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
     }
 
     .top-content {
@@ -213,6 +235,30 @@
         word-break: break-word;
     }
 
+    .assignment-title {
+        font-weight: 700;
+        font-size: 1.4rem;
+        color: #0e6942;
+        margin-bottom: 0.3rem;
+    }
+
+    .assignment-class,
+    .assignment-deadline {
+        font-size: 0.95rem;
+        color: #444;
+        margin-bottom: 0.2rem;
+    }
+
+    .class-name {
+        font-weight: 600;
+        color: #097180;
+    }
+
+    .assignment-deadline.deadline-passed {
+        color: #d32f2f;
+        font-weight: bold;
+    }
+
     .spacer {
         flex: 1;
     }
@@ -220,36 +266,33 @@
     .button-row {
         display: flex;
         justify-content: flex-end;
-        gap: 0.5rem;
+        gap: 0.75rem;
         flex-wrap: wrap;
     }
 
-    .assignment-title {
+    .button-row .v-btn {
-        font-weight: bold;
+        font-weight: 600;
-        font-size: 1.5rem;
+        text-transform: none;
-        margin-bottom: 0.1rem;
-        word-break: break-word;
     }
 
-    .assignment-class {
+    .button-row .v-btn[color="primary"] {
-        color: #666;
+        color: #097180;
-        font-size: 0.95rem;
     }
 
-    .class-name {
+    .button-row .v-btn[color="primary"]:hover {
-        font-weight: 500;
+        color: #0e6942;
-        color: #333;
     }
 
-    .assignment-deadline {
+    .button-row .v-btn[color="red"] {
-        font-size: 0.95rem;
+        color: #d32f2f;
-        color: #444;
-        margin-top: 0.4rem;
     }
 
-    .assignment-deadline.deadline-passed {
+    .no-assignments {
-        color: #d32f2f; /* red */
+        text-align: center;
-        font-weight: bold;
+        font-size: 1.2rem;
+        color: #777;
+        padding: 3rem 0;
     }
 
+
 </style>