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/Members/MembersChanges.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <v-data-table
+      :headers="headers"
+      :items-per-page="10"
+      :items="items"
+      sort-by="updated_at"
+      :sort-desc="true"
+      class="pa-4 secondary"
+    >
+      <template v-slot:item.informal_name="{ item }">
+        <v-img
+          :alt="item.informal_name"
+          lazy-src="/images/product-placeholder.jpg"
+          :src="computeImage(item)"
+          contain
+          height="60px"
+          width="110px"
+        />
+
+        {{ item.informal_name }}
+      </template>
+
+      <template v-slot:item.updated_at="{ item }">
+        {{ formatDate(item.updated_at) }}
+      </template>
+
+      <template v-slot:item.delegated="{ item }">
+        {{ findUserById(item.user_id) }}
+      </template>
+
+      <template v-slot:item.actions="{ item }">
+        <div class="view-container">
+          <v-btn
+            class="mx-4 white--text"
+            style="height: 100%"
+            :color="$vuetify.theme.dark ? 'info' : 'txt'"
+            rounded
+            depressed
+            nuxt
+            small
+            :to="localePath(`/manager/members/${item.slug}`)"
+            >{{ $t('general.view') }}</v-btn
+          >
+        </div>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true,
+      default: [],
+    },
+    users: {
+      type: Array,
+      required: true,
+      default: [],
+    },
+  },
+
+  data() {
+    return {
+      headers: [
+        {
+          text: 'lid',
+          value: 'informal_name',
+        },
+        {
+          text: 'bijgewerkt op',
+          value: 'updated_at',
+        },
+        {
+          text: 'door',
+          value: 'delegated',
+        },
+        {
+          text: 'aangepast',
+          value: 'changes',
+        },
+        {
+          text: '',
+          value: 'actions',
+        },
+      ],
+    }
+  },
+
+  methods: {
+    formatDate(date) {
+      return dayjs(date).format('D MMM YYYY, HH:mm').toLowerCase()
+    },
+
+    computeImage(item) {
+      if (item.logo.thumb) return item.logo.thumb
+      return '/images/product-placeholder.jpg'
+    },
+
+    findUserById(id) {
+      const unassigned = 'unassigned'
+      if (!id) return unassigned
+      const user = this.users.find((u) => u.id === id)
+      if (user) return user.fullName
+      return unassigned
+    },
+  },
+}
+</script>