From 5805294f4c45cf2035838a063dcbff681f682e5e Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Thu, 15 May 2025 22:09:13 +0200
Subject: [PATCH] feat: create assignment process minimaliseren maar in aparte
 pagina houden

---
 .../views/assignments/CreateAssignment.vue    | 393 ++++++++---------
 .../src/views/assignments/UserAssignments.vue | 415 +++++++++---------
 2 files changed, 386 insertions(+), 422 deletions(-)

diff --git a/frontend/src/views/assignments/CreateAssignment.vue b/frontend/src/views/assignments/CreateAssignment.vue
index 32cda330..ffdab02e 100644
--- a/frontend/src/views/assignments/CreateAssignment.vue
+++ b/frontend/src/views/assignments/CreateAssignment.vue
@@ -1,207 +1,159 @@
 <script setup lang="ts">
-    import { useI18n } from "vue-i18n";
-    import { computed, onMounted, ref, watch } from "vue";
-    import GroupSelector from "@/components/assignments/GroupSelector.vue";
-    import { assignmentTitleRules, classRules, descriptionRules, learningPathRules } from "@/utils/assignment-rules.ts";
-    import DeadlineSelector from "@/components/assignments/DeadlineSelector.vue";
-    import auth from "@/services/auth/auth-service.ts";
-    import { useTeacherClassesQuery } from "@/queries/teachers.ts";
-    import { useRouter } from "vue-router";
-    import { useGetAllLearningPaths } from "@/queries/learning-paths.ts";
-    import UsingQueryResult from "@/components/UsingQueryResult.vue";
-    import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
-    import type { ClassesResponse } from "@/controllers/classes.ts";
-    import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
-    import { useCreateAssignmentMutation } from "@/queries/assignments.ts";
-    import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { computed, onMounted, ref, watch } from "vue";
+import { assignmentTitleRules, classRules, learningPathRules } from "@/utils/assignment-rules.ts";
+import auth from "@/services/auth/auth-service.ts";
+import { useTeacherClassesQuery } from "@/queries/teachers.ts";
+import { useRouter, useRoute } from "vue-router";
+import { useGetAllLearningPaths } from "@/queries/learning-paths.ts";
+import UsingQueryResult from "@/components/UsingQueryResult.vue";
+import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
+import type { ClassesResponse } from "@/controllers/classes.ts";
+import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
+import { useCreateAssignmentMutation } from "@/queries/assignments.ts";
 
-    const route = useRoute();
-    const router = useRouter();
-    const { t, locale } = useI18n();
-    const role = ref(auth.authState.activeRole);
-    const username = ref<string>("");
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+const role = ref(auth.authState.activeRole);
+const username = ref<string>("");
 
-    onMounted(async () => {
-        // Redirect student
-        if (role.value === "student") {
-            await router.push("/user");
-        }
+onMounted(async () => {
+    if (role.value === "student") {
+        await router.push("/user");
+    }
+    const user = await auth.loadUser();
+    username.value = user?.profile?.preferred_username ?? "";
+});
 
-        // Get the user's username
-        const user = await auth.loadUser();
-        username.value = user?.profile?.preferred_username ?? "";
-    });
+const language = computed(() => locale.value);
+const form = ref();
 
-    const language = computed(() => locale.value);
-    const form = ref();
+const learningPathsQueryResults = useGetAllLearningPaths(language);
+const classesQueryResults = useTeacherClassesQuery(username, true);
 
-    //Fetch all learning paths
-    const learningPathsQueryResults = useGetAllLearningPaths(language);
+const selectedClass = ref(undefined);
+const assignmentTitle = ref("");
+const selectedLearningPath = ref(route.query.hruid || undefined);
+const lpIsSelected = route.query.hruid !== undefined;
 
-    // Fetch and store all the teacher's classes
-    const classesQueryResults = useTeacherClassesQuery(username, true);
+const { mutate, data, isSuccess } = useCreateAssignmentMutation();
 
-    const selectedClass = ref(undefined);
+watch([isSuccess, data], async ([success, newData]) => {
+    if (success && newData?.assignment) {
+        await router.push(`/assignment/${newData.assignment.within}/${newData.assignment.id}`);
+    }
+});
 
-    const assignmentTitle = ref("");
-    const selectedLearningPath = ref(route.query.hruid || undefined);
+async function submitFormHandler(): Promise<void> {
+    const { valid } = await form.value.validate();
+    if (!valid) return;
 
-    // Disable combobox when learningPath prop is passed
-    const lpIsSelected = route.query.hruid !== undefined;
-    const deadline = ref(null);
-    const description = ref("");
-    const groups = ref<string[][]>([]);
-
-    // New group is added to the list
-    function addGroupToList(students: string[]): void {
-        if (students.length) {
-            groups.value = [...groups.value, students];
-        }
+    let lp = selectedLearningPath.value;
+    if (!lpIsSelected) {
+        lp = selectedLearningPath.value?.hruid;
     }
 
-    watch(selectedClass, () => {
-        groups.value = [];
-    });
+    const assignmentDTO: AssignmentDTO = {
+        id: 0,
+        within: selectedClass.value?.id || "",
+        title: assignmentTitle.value,
+        description: "",
+        learningPath: lp || "",
+        deadline: new Date(),
+        language: language.value,
+        groups: [],
+    };
 
-    const { mutate, data, isSuccess } = useCreateAssignmentMutation();
-
-    watch([isSuccess, data], async ([success, newData]) => {
-        if (success && newData?.assignment) {
-            await router.push(`/assignment/${newData.assignment.within}/${newData.assignment.id}`);
-        }
-    });
-
-    async function submitFormHandler(): Promise<void> {
-        const { valid } = await form.value.validate();
-        if (!valid) return;
-
-        let lp = selectedLearningPath.value;
-        if (!lpIsSelected) {
-            lp = selectedLearningPath.value?.hruid;
-        }
-
-        const assignmentDTO: AssignmentDTO = {
-            id: 0,
-            within: selectedClass.value?.id || "",
-            title: assignmentTitle.value,
-            description: description.value,
-            learningPath: lp || "",
-            language: language.value,
-            groups: groups.value,
-        };
-
-        mutate({ cid: assignmentDTO.within, data: assignmentDTO });
-    }
+    mutate({ cid: assignmentDTO.within, data: assignmentDTO });
+}
 </script>
 
 <template>
     <div class="main-container">
-        <h1 class="title">{{ t("new-assignment") }}</h1>
-        <v-card class="form-card">
-            <v-form
-                ref="form"
-                class="form-container"
-                validate-on="submit lazy"
-                @submit.prevent="submitFormHandler"
-            >
-                <v-container class="step-container">
-                    <v-card-text>
-                        <v-text-field
-                            v-model="assignmentTitle"
-                            :label="t('title')"
-                            :rules="assignmentTitleRules"
-                            density="compact"
-                            variant="outlined"
-                            clearable
-                            required
-                        ></v-text-field>
-                    </v-card-text>
+        <h1 class="h1">{{ t("new-assignment") }}</h1>
 
-                    <using-query-result
-                        :query-result="learningPathsQueryResults"
-                        v-slot="{ data }: { data: LearningPath[] }"
-                    >
-                        <v-card-text>
-                            <v-combobox
-                                v-model="selectedLearningPath"
-                                :items="data"
-                                :label="t('choose-lp')"
-                                :rules="learningPathRules"
-                                variant="outlined"
-                                clearable
-                                hide-details
-                                density="compact"
-                                append-inner-icon="mdi-magnify"
-                                item-title="title"
-                                item-value="hruid"
-                                required
-                                :disabled="lpIsSelected"
-                                :filter="
-                                    (item, query: string) => item.title.toLowerCase().includes(query.toLowerCase())
-                                "
-                            ></v-combobox>
-                        </v-card-text>
-                    </using-query-result>
+        <v-card class="form-card elevation-2 pa-6">
+            <v-form ref="form" class="form-container" validate-on="submit lazy" @submit.prevent="submitFormHandler">
+                <v-container class="step-container pa-0">
 
-                    <using-query-result
-                        :query-result="classesQueryResults"
-                        v-slot="{ data }: { data: ClassesResponse }"
-                    >
-                        <v-card-text>
-                            <v-combobox
-                                v-model="selectedClass"
-                                :items="data?.classes ?? []"
-                                :label="t('pick-class')"
-                                :rules="classRules"
-                                variant="outlined"
-                                clearable
-                                hide-details
-                                density="compact"
-                                append-inner-icon="mdi-magnify"
-                                item-title="displayName"
-                                item-value="id"
-                                required
-                            ></v-combobox>
-                        </v-card-text>
-                    </using-query-result>
-
-                    <GroupSelector
-                        :classId="selectedClass?.id"
-                        :groups="groups"
-                        @groupCreated="addGroupToList"
+                    <!-- Titel veld -->
+                    <v-text-field
+                        v-model="assignmentTitle"
+                        :label="t('title')"
+                        :rules="assignmentTitleRules"
+                        density="comfortable"
+                        variant="solo-filled"
+                        prepend-inner-icon="mdi-format-title"
+                        clearable
+                        required
                     />
 
-                    <!-- Counter for created groups -->
-                    <v-card-text v-if="groups.length">
-                        <strong>Created Groups: {{ groups.length }}</strong>
-                    </v-card-text>
-                    <DeadlineSelector v-model:deadline="deadline" />
-                    <v-card-text>
-                        <v-textarea
-                            v-model="description"
-                            :label="t('description')"
-                            variant="outlined"
-                            density="compact"
-                            auto-grow
-                            rows="3"
-                            :rules="descriptionRules"
-                        ></v-textarea>
-                    </v-card-text>
-                    <v-card-text>
+                    <!-- Learning Path keuze -->
+                    <using-query-result :query-result="learningPathsQueryResults" v-slot="{ data }: { data: LearningPath[] }">
+                        <v-combobox
+                            v-model="selectedLearningPath"
+                            :items="data"
+                            :label="t('choose-lp')"
+                            :rules="learningPathRules"
+                            variant="solo-filled"
+                            clearable
+                            density="comfortable"
+                            chips
+                            hide-no-data
+                            hide-selected
+                            item-title="title"
+                            item-value="hruid"
+                            :disabled="lpIsSelected"
+                            :filter="(item, query: string) => item.title.toLowerCase().includes(query.toLowerCase())"
+                            prepend-inner-icon="mdi-school"
+                        />
+                    </using-query-result>
+
+                    <!-- Klas keuze -->
+                    <using-query-result :query-result="classesQueryResults" v-slot="{ data }: { data: ClassesResponse }">
+                        <v-combobox
+                            v-model="selectedClass"
+                            :items="data?.classes ?? []"
+                            :label="t('pick-class')"
+                            :rules="classRules"
+                            variant="solo-filled"
+                            clearable
+                            density="comfortable"
+                            chips
+                            hide-no-data
+                            hide-selected
+                            item-title="displayName"
+                            item-value="id"
+                            prepend-inner-icon="mdi-account-multiple"
+                        />
+                    </using-query-result>
+
+                    <!-- Submit & Cancel -->
+                    <v-divider class="my-6" />
+
+                    <div class="d-flex justify-end ga-2">
                         <v-btn
-                            class="mt-2"
-                            color="secondary"
+                            color="primary"
                             type="submit"
-                            block
-                            >{{ t("submit") }}
+                            size="small"
+                            prepend-icon="mdi-check-circle"
+                            elevation="1"
+                        >
+                            {{ t("submit") }}
                         </v-btn>
+
                         <v-btn
                             to="/user/assignment"
                             color="grey"
-                            block
-                            >{{ t("cancel") }}
+                            size="small"
+                            variant="text"
+                            prepend-icon="mdi-close-circle"
+                        >
+                            {{ t("cancel") }}
                         </v-btn>
-                    </v-card-text>
+                    </div>
+
                 </v-container>
             </v-form>
         </v-card>
@@ -209,50 +161,65 @@
 </template>
 
 <style scoped>
-    .main-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-    }
+.main-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+    padding-top: 32px;
+    text-align: center;
+}
 
+.form-card {
+    width: 100%;
+    max-width: 720px;
+    border-radius: 16px;
+}
+
+.form-container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+}
+
+.step-container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+@media (max-width: 1000px) {
     .form-card {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        width: 55%;
-        /*padding: 1%;*/
+        width: 85%;
+        padding: 1%;
     }
 
-    .form-container {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-    }
+}
 
-    .step-container {
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        min-height: 200px;
-    }
+@media (max-width: 600px) {
 
-    @media (max-width: 1000px) {
-        .form-card {
-            width: 70%;
-            padding: 1%;
-        }
-
-        .step-container {
-            min-height: 300px;
-        }
+    h1 {
+        font-size: 32px;
+        text-align: center;
+        margin-left: 0;
     }
+}
 
-    @media (max-width: 650px) {
-        .form-card {
-            width: 95%;
-        }
+@media (max-width: 400px) {
+
+    h1 {
+        font-size: 24px;
+        text-align: center;
+        margin-left: 0;
     }
+}
+
+.v-card {
+    border: 2px solid #0e6942;
+    border-radius: 12px;
+}
+
+
 </style>
+
diff --git a/frontend/src/views/assignments/UserAssignments.vue b/frontend/src/views/assignments/UserAssignments.vue
index e8bdf6df..f524f3b2 100644
--- a/frontend/src/views/assignments/UserAssignments.vue
+++ b/frontend/src/views/assignments/UserAssignments.vue
@@ -1,20 +1,16 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
+import {ref, computed, onMounted, watch} from "vue";
+import {useI18n} from "vue-i18n";
+import {useRouter} from "vue-router";
 import authState from "@/services/auth/auth-service.ts";
 import auth from "@/services/auth/auth-service.ts";
-import { useTeacherAssignmentsQuery, useTeacherClassesQuery } from "@/queries/teachers.ts";
-import { useStudentAssignmentsQuery, useStudentClassesQuery } from "@/queries/students.ts";
-import { ClassController, type ClassesResponse } from "@/controllers/classes.ts";
-import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
-import { asyncComputed } from "@vueuse/core";
-import { useCreateAssignmentMutation, useDeleteAssignmentMutation } from "@/queries/assignments.ts";
-import type { AssignmentsResponse } from "@/controllers/assignments";
-import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
+import {useTeacherAssignmentsQuery, useTeacherClassesQuery} from "@/queries/teachers.ts";
+import {useStudentAssignmentsQuery, useStudentClassesQuery} from "@/queries/students.ts";
+import {useDeleteAssignmentMutation} from "@/queries/assignments.ts";
 import UsingQueryResult from "@/components/UsingQueryResult.vue";
+import {asyncComputed} from "@vueuse/core";
 
-const { t } = useI18n();
+const {t, locale} = useI18n();
 const router = useRouter();
 
 const role = ref(auth.authState.activeRole);
@@ -38,14 +34,47 @@ onMounted(async () => {
 });
 
 const isTeacher = computed(() => role.value === "teacher");
-const assignmentsQuery = isTeacher ? useTeacherAssignmentsQuery(username, true) : useStudentAssignmentsQuery(username, true);
-const { mutate: assignmentMutation, isSuccess: assignmentIsSuccess } = useCreateAssignmentMutation();
+const classesQueryResult = isTeacher.value ? useTeacherClassesQuery(username, true) : useStudentClassesQuery(username, true);
 
-const classesQuery = isTeacher ? useTeacherClassesQuery(username, true) : useStudentClassesQuery(username, true);
-const selectedClass = ref<ClassDTO | undefined>(undefined);
-const isClassSelected = ref(false);
+const assignmentsQueryResult = isTeacher.value ? useTeacherAssignmentsQuery(username, true) : useStudentAssignmentsQuery(username, true);
 
-const assignmentTitle = ref<string>("");
+const allAssignments = asyncComputed(
+    async () => {
+        const assignments = assignmentsQueryResult.data.value?.assignments;
+        if (!assignments) return [];
+
+        const classes = classesQueryResult.data.value?.classes;
+        if (!classes) return [];
+
+        const result = assignments.map((a) => ({
+            id: a.id,
+            class: classes.find((cls) => cls?.id === a.within) ?? undefined,
+            title: a.title,
+            description: a.description,
+            learningPath: a.learningPath,
+            language: a.language,
+            deadline: a.deadline,
+            groups: a.groups,
+        }));
+
+        // Order the assignments by deadline
+        return result.flat().sort((a, b) => {
+            const now = Date.now();
+            const aTime = new Date(a.deadline).getTime();
+            const bTime = new Date(b.deadline).getTime();
+
+            const aIsPast = aTime < now;
+            const bIsPast = bTime < now;
+
+            if (aIsPast && !bIsPast) return 1;
+            if (!aIsPast && bIsPast) return -1;
+
+            return aTime - bTime;
+        });
+    },
+    [],
+    {evaluating: true},
+);
 
 async function goToCreateAssignment(): Promise<void> {
     await router.push("/assignment/create");
@@ -55,7 +84,7 @@ async function goToAssignmentDetails(id: number, clsId: string): Promise<void> {
     await router.push(`/assignment/${clsId}/${id}`);
 }
 
-const { mutate, data, isSuccess } = useDeleteAssignmentMutation();
+const {mutate, data, isSuccess} = useDeleteAssignmentMutation();
 
 watch([isSuccess, data], async ([success, oldData]) => {
     if (success && oldData?.assignment) {
@@ -64,7 +93,36 @@ watch([isSuccess, data], async ([success, oldData]) => {
 });
 
 async function goToDeleteAssignment(num: number, clsId: string): Promise<void> {
-    mutate({ cid: clsId, an: num });
+    mutate({cid: clsId, an: num});
+}
+
+function formatDate(date?: string | Date): string {
+    if (!date) return "–";
+    const d = new Date(date);
+
+    // Choose locale based on selected language
+    const currentLocale = locale.value;
+
+    return d.toLocaleDateString(currentLocale, {
+        weekday: "short",
+        day: "2-digit",
+        month: "long",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+    });
+}
+
+function getDeadlineClass(deadline?: string | Date): string {
+    if (!deadline) return "";
+
+    const date = new Date(deadline);
+    const now = new Date();
+    const in24Hours = new Date(now.getTime() + 24 * 60 * 60 * 1000);
+
+    if (date.getTime() < now.getTime()) return "deadline-passed";
+    if (date.getTime() <= in24Hours.getTime()) return "deadline-in24hours";
+    return "deadline-upcoming";
 }
 
 onMounted(async () => {
@@ -72,136 +130,120 @@ onMounted(async () => {
     username.value = user?.profile?.preferred_username ?? "";
 });
 
-async function createAssignment(): Promise<void> {
-    const cid = selectedClass.value!.id;
-    const assignmentData: Partial<AssignmentDTO> = {
-        within: cid,
-        title: assignmentTitle.value!,
-    };
+onMounted(async () => {
+    const user = await auth.loadUser();
+    username.value = user?.profile?.preferred_username ?? "";
+});
+
 
-    assignmentMutation({ cid: cid, data: assignmentData}, {
-        onSuccess: async (classResponse) => {
-            // showSnackbar(t("classCreated"), "success");
-            // const createdClass: ClassDTO = classResponse.class;
-            // code.value = createdClass.id;
-            await assignmentsQuery.refetch();
-        },
-        onError: (err) => {
-            console.log(err);
-            // showSnackbar(t("creationFailed") + ": " + err.message, "error");
-        },
-    });
-}
 </script>
 
 <template>
-    <main>
-        <h1>{{ t("assignments") }}</h1>
-        <div class="loading-div" v-if="isLoading">
-            <v-progress-circular indeterminate></v-progress-circular>
-        </div>
-        <div v-if="isError">
-            <v-empty-state icon="mdi-alert-circle-outline" :text="errorMessage"
-                :title="t('error_title')"></v-empty-state>
-        </div>
-        <div v-else>
-            <using-query-result :query-result="assignmentsQuery"
-                v-slot="assignmentsResponse: { data: AssignmentsResponse }">
-                <v-container fluid class="ma-4">
-                    <v-row no-gutters class="custom-breakpoint">
-                        <v-col cols="12" sm="6" md="6" class="responsive-col">
-                            <v-table class="table">
-                                <thead>
-                                    <tr>
-                                        <th class="header">{{ t("assignment") }}</th>
-                                        <th class="header">
-                                            {{ t("progress") }}
-                                        </th>
-                                        <th class="header">{{ t("deadline") }}</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr v-for="a in assignmentsResponse.data.assignments as AssignmentDTO[]"
-                                        :key="a.id + a.within">
-                                        <td>
-                                            <v-btn :to="`/assignment/${a.within}/${a.id}`" variant="text">
-                                                {{ a.title }}
-                                                <v-icon end> mdi-menu-right </v-icon>
-                                            </v-btn>
-                                        </td>
-                                        <td>
-                                            <v-progress-linear :model-value="0" color="blue-grey" height="25">
-                                                <template v-slot:default="{ value }">
-                                                    <strong>{{ Math.ceil(value) }}%</strong>
-                                                </template>
-                                            </v-progress-linear>
-                                        </td>
-                                        <td>Nov 9, 2025, 06:00 PM EST+1</td>
-                                    </tr>
-                                </tbody>
-                            </v-table>
-                        </v-col>
-                        <v-col cols="12" sm="6" md="6" class="responsive-col">
-                            <div>
-                                <h2>{{ t("createAssignment") }}</h2>
+    <div class="assignments-container">
+        <h1 class="h1">{{ t("assignments") }}</h1>
 
-                                <v-sheet class="pa-4 sheet" max-width="600px">
-                                    <p>{{ t("createClassInstructions") }}</p>
-                                    <v-form @submit.prevent>
-                                        <v-text-field class="mt-4" :label="`${t('title')}`" v-model="assignmentTitle"
-                                            :placeholder="`${t('EnterAssignmentTitle')}`"
-                                            variant="outlined"></v-text-field>
-                                        <using-query-result :query-result="classesQuery"
-                                            v-slot="{ data }: { data: ClassesResponse }">
-                                            <v-card-text class="mt-4">
-                                                <v-combobox class="mt-4" v-model="selectedClass" 
-                                                    :items="data.classes"
-                                                    :label="t('choose-class')"
-                                                    variant="outlined" 
-                                                    clearable 
-                                                    hide-details 
-                                                    density="compact"
-                                                    append-inner-icon="mdi-magnify" 
-                                                    item-title="displayName"
-                                                    item-value="id" 
-                                                    required 
-                                                    :disabled="isClassSelected" 
-                                                    :filter="(item: ClassDTO, query: string) => item.displayName.toLowerCase().includes(query.toLowerCase())"
-                                                >
-                                                </v-combobox>
-                                            </v-card-text>
-                                        </using-query-result>
-                                        <v-btn class="mt-4" color="#f6faf2" type="submit" @click="createAssignment" block>
-                                            {{ t("create")}}
-                                        </v-btn>
-                                    </v-form>
-                                </v-sheet>
+        <v-btn
+            v-if="isTeacher"
+            color="primary"
+            class="mb-4 center-btn"
+            @click="goToCreateAssignment"
+        >
+            {{ t("new-assignment") }}
+        </v-btn>
+
+        <using-query-result
+            :query-result="assignmentsQueryResult"
+        >
+            <v-container>
+                <v-row>
+                    <v-col
+                        v-for="assignment in allAssignments"
+                        :key="assignment.id"
+                        cols="12"
+                    >
+                        <v-card class="assignment-card">
+                            <div class="top-content">
+                                <div class="assignment-title">{{ assignment.title }}</div>
+                                <div class="assignment-class">
+                                    {{ t("class") }}:
+                                    <span class="class-name">
+                                    {{ assignment?.class?.displayName }}
+                                </span>
+                                </div>
+                                <div
+                                    class="assignment-deadline"
+                                    :class="getDeadlineClass(assignment.deadline)"
+                                >
+                                    {{ t("deadline") }}:
+                                    <span>{{ formatDate(assignment.deadline) }}</span>
+                                </div>
                             </div>
-                        </v-col>
-                    </v-row>
-                </v-container>
-            </using-query-result>
-        </div>
-    </main>
 
+                            <div class="spacer"></div>
+
+                            <div class="button-row">
+                                <v-btn
+                                    color="primary"
+                                    variant="text"
+                                    @click="goToAssignmentDetails(assignment.id, assignment?.class?.id)"
+                                >
+                                    {{ t("view-assignment") }}
+                                </v-btn>
+                                <v-btn
+                                    v-if="isTeacher"
+                                    color="red"
+                                    variant="text"
+                                    @click="goToDeleteAssignment(assignment.id, assignment?.class?.id)"
+                                >
+                                    {{ t("delete") }}
+                                </v-btn>
+                            </div>
+                        </v-card>
+                    </v-col>
+                </v-row>
+                <v-row v-if="allAssignments.length === 0">
+                    <v-col cols="12">
+                        <div class="no-assignments">
+                            {{ t("no-assignments") }}
+                        </div>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </using-query-result>
+    </div>
 </template>
 
 <style scoped>
 .assignments-container {
     width: 100%;
     margin: 0 auto;
-    padding: 2% 4%;
     box-sizing: border-box;
 }
 
 .center-btn {
     display: block;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0 auto 2rem 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 {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
 }
 
 .top-content {
@@ -209,6 +251,35 @@ async function createAssignment(): Promise<void> {
     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;
+}
+
+.assignment-deadline.deadline-in24hours {
+    color: #f57c00;
+    font-weight: bold;
+}
+
 .spacer {
     flex: 1;
 }
@@ -216,88 +287,14 @@ async function createAssignment(): Promise<void> {
 .button-row {
     display: flex;
     justify-content: flex-end;
-    gap: 0.5rem;
+    gap: 0.75rem;
     flex-wrap: wrap;
 }
 
-.assignment-title {
-    font-weight: bold;
-    font-size: 1.5rem;
-    margin-bottom: 0.1rem;
-    word-break: break-word;
-}
-
-.assignment-class {
-    color: #666;
-    font-size: 0.95rem;
-}
-
-.class-name {
-    font-weight: 500;
-    color: #333;
-}
-
-.header {
-    font-weight: bold !important;
-    background-color: #0e6942;
-    color: white;
-    padding: 10px;
-}
-
-h1 {
-    color: #0e6942;
-    text-transform: uppercase;
-    font-weight: bolder;
-    padding-top: 2%;
-    font-size: 50px;
-}
-
-h2 {
-    color: #0e6942;
-    font-size: 30px;
-}
-
-.join {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    margin-top: 50px;
-}
-
-.link {
-    color: #0b75bb;
-    text-decoration: underline;
-}
-
-main {
-    margin-left: 30px;
-}
-
-td,
-th {
-    border-bottom: 1px solid #0e6942;
-    border-top: 1px solid #0e6942;
-}
-
-.table {
-    width: 90%;
-    padding-top: 10px;
-    border-collapse: collapse;
-}
-
-table thead th:first-child {
-    border-top-left-radius: 10px;
-}
-
-.table thead th:last-child {
-    border-top-right-radius: 10px;
-}
-
-.table tbody tr:nth-child(odd) {
-    background-color: white;
-}
-
-.table tbody tr:nth-child(even) {
-    background-color: #f6faf2;
+.no-assignments {
+    text-align: center;
+    font-size: 1.2rem;
+    color: #777;
+    padding: 3rem 0;
 }
 </style>