Initial Nuxt frontend import

- Complete GGZ Ecademy Nuxt.js user portal
- Learning products browser and management
- Member management interface
- User authentication and roles
- Multi-language support (NL/EN)
- Vuex store for state management
- Component-based architecture

components/RightMenu/Notifications.vue

@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <div class="mx-10 my-4">
+      <div class="d-flex">
+        <chip-user-logged v-if="$auth.loggedIn" displayName />
+        <v-spacer />
+        <v-btn
+          fab
+          text
+          @click="$store.commit('navigation/SWITCH_RIGHT_DRAWER', false)"
+        >
+          <v-icon x-small>icon-close</v-icon>
+        </v-btn>
+      </div>
+      <v-divider class="lines" />
+
+      <h3 v-if="hasNotifications" class="my-6">
+        {{ $t('rightMenu.notes') }}
+        <span class="font-weight-light">({{ notifications.length }})</span>
+      </h3>
+    </div>
+
+    <v-list two-line v-if="hasNotifications">
+      <v-list-item-group v-model="selected" multiple active-class="secondary">
+        <template v-for="(notification, index) in notifications">
+          <v-divider
+            v-if="!index && hasNotifications"
+            :key="index + notification.title"
+            class="lines"
+          />
+          <v-list-item
+            :key="`user-notification-${notification.id}`"
+            @click="markAsRead(notification.id)"
+          >
+            <template v-slot:default="{ active, toggle }">
+              <v-list-item-avatar>
+                <!-- <v-icon x-small v-if="active" color="accent">mdi-circle</v-icon>
+                <v-icon x-small v-else>mdi-circle-outline</v-icon> -->
+                <v-icon x-small v-if="!notification.read_at" color="accent"
+                  >mdi-circle</v-icon
+                >
+                <v-icon x-small v-else>mdi-circle-outline</v-icon>
+              </v-list-item-avatar>
+
+              <v-list-item-content class="font-weight-bold">
+                <v-list-item-subtitle
+                  v-text="notification.data.subject"
+                ></v-list-item-subtitle>
+                <v-list-item-subtitle
+                  class="terziary--text"
+                  v-text="notification.data.message"
+                ></v-list-item-subtitle>
+              </v-list-item-content>
+
+              <v-list-item-action>
+                <v-list-item-action-text>{{
+                  formatDate(notification.created_at)
+                }}</v-list-item-action-text>
+              </v-list-item-action>
+            </template>
+          </v-list-item>
+
+          <v-divider
+            v-if="index + 1 < notifications.length"
+            :key="index"
+            class="lines"
+          />
+        </template>
+      </v-list-item-group>
+    </v-list>
+    <v-card v-else flat>
+      <v-card-text> No notifications </v-card-text>
+    </v-card>
+
+    <!-- <v-container class="text-center d-flex flex-column">
+      <v-btn
+        color="success"
+        @click="testNotification"
+        class="my-2"
+        v-if="$store.getters.isAdmin || $store.getters.isOperator"
+        >Test Notification</v-btn
+      >
+      <v-btn
+        color="red"
+        @click="testMailNotifications"
+        class="my-2"
+        v-if="$store.getters.isAdmin || $store.getters.isOperator"
+        >Test Email Notifications
+      </v-btn>
+    </v-container> -->
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import PageHeader from '~/components/UI/PageHeader/PageHeader'
+import chipUserLogged from '~/components/UI/ChipUserLogged/ChipUserLogged'
+
+export default {
+  components: {
+    PageHeader,
+    chipUserLogged,
+  },
+  data() {
+    return {
+      selected: [2],
+    }
+  },
+  computed: {
+    notifications() {
+      return this.$store.getters.notifications
+    },
+    hasNotifications() {
+      return this.$store.getters.hasNotifications
+    },
+  },
+  methods: {
+    formatDate(date) {
+      return dayjs(date).format('D MMM').toLowerCase()
+    },
+    async markAsRead(notificationId) {
+      if (!this.$store.getters.isReadNotification(notificationId)) return
+
+      try {
+        const response = await this.$axios.post('notifications/mark-as-read', {
+          id: notificationId,
+        })
+        await this.$auth.setUser(response.data)
+      } catch (error) {
+        console.log('markAsRead -> error', error)
+      }
+    },
+    async delete(notificationId) {
+      if (!this.$store.getters.isReadNotification(notificationId)) return
+
+      try {
+        const response = await this.$axios.post('notifications/delete', {
+          id: notificationId,
+        })
+        await this.$auth.setUser(response.data)
+      } catch (error) {
+        console.log('markAsRead -> error', error)
+      }
+    },
+
+    async testNotification() {
+      if (!this.$auth.loggedIn) return
+      try {
+        await this.$axios.post('notifications/test')
+      } catch (error) {
+        console.log('testNotification -> error', error)
+      }
+    },
+
+    async testMailNotifications() {
+      if (!this.$auth.loggedIn) return
+      try {
+        await this.$axios.get('notifications/test-mail-notifications')
+      } catch (error) {
+        console.log('testNotification -> error', error)
+      }
+    },
+  },
+}
+</script>