notification support seen date and send date

src/components/molecules/NotificationList.vue

@@ -1,6 +1,6 @@
 <template>
   <v-list two-line>
-    <template v-for="(notification, index) in formattedNotifications">
+    <template v-for="(notification, index) in notifications">
       <v-list-item
         :key="notification.id"
         @click="$emit('go-to-redirect', notification)"
@@ -26,9 +26,19 @@
           <v-list-item-subtitle
             >Sent by {{ notification.author }}</v-list-item-subtitle
           >
-          <v-list-item-subtitle>{{
-            notification.createdDate
-          }}</v-list-item-subtitle>
+          <v-list-item-subtitle
+            class="text-caption grey--text text--darken-1 mt-1"
+          >
+            At: {{ formatFrontendDate(notification.createdDate) }}
+          </v-list-item-subtitle>
+
+          <!-- Notification read date (conditional) -->
+          <v-list-item-subtitle
+            v-if="notification.readAt"
+            class="text-caption success--text mt-1"
+          >
+            Seen: {{ formatFrontendDate(notification.readAt) }}
+          </v-list-item-subtitle>
         </v-list-item-content>
         <v-list-item-action>
           <v-btn icon @click.stop="$emit('mark-as-read', notification)">
@@ -40,7 +50,7 @@
       </v-list-item>
       <v-divider
         v-if="index < notifications.length - 1"
-        :key="`divider-${notification.id}`"
+        :key="`divider-${index}`"
       ></v-divider>
     </template>
   </v-list>
@@ -55,18 +65,10 @@ export default {
       required: true,
     },
   },
-  computed: {
-    formattedNotifications() {
-      return this.notifications.map((notification) => ({
-        ...notification,
-        createdDate: this.formatDate(notification.createdDate), // Convert date
-      }))
-    },
-  },
   methods: {
-    formatDate(timestamp) {
+    formatFrontendDate(timestamp) {
       const date = new Date(timestamp)
-      return date.toLocaleString()
+      return date.toLocaleString() // Format the date in a human-readable way
     },
   },
 }

src/controllers/UserController.js

@@ -64,6 +64,7 @@ export default class UserController extends Controller {
     // Update inbox array
     if (inboxIndex !== -1) {
         userToUpdate.inbox[inboxIndex].read = true;
+        userToUpdate.inbox[inboxIndex].readAt = Date.now();
     }
 
     if (notificationIndex !== -1 || inboxIndex !== -1) {

src/models/Notification.js

@@ -4,6 +4,8 @@
  * @param {string} description - The description value.
  */
 
+import { read } from "fs"
+
 export default class Notification {
   constructor({
     title,
@@ -13,6 +15,7 @@ export default class Notification {
     read,
     testId,
     accessLevel,
+    readAt,
   } = {}) {
     this.title = title
     this.description = description
@@ -22,6 +25,7 @@ export default class Notification {
     this.read = read
     this.testId = testId
     this.accessLevel = accessLevel ?? null
+    this.readAt = readAt ?? null
   }
   static toNotification(data) {
     return new Notification(data)
@@ -37,6 +41,7 @@ export default class Notification {
       read: this.read,
       testId: this.testId,
       accessLevel: this.accessLevel,
+      read  : this.read,
     }
   }
 }

src/views/admin/NotificationPage.vue

@@ -96,6 +96,7 @@ export default {
       window.open(`/${notification.redirectsTo}`)
     },
     async markAsRead(notification) {
+      console.log(notification);
       await this.$store.dispatch('markNotificationAsRead', {
         notification: notification,
         user: this.user,