feat(app): unify KPI tiles with AppKpiCard

Introduce AppKpiCard for consistent metric layout (icon + value, title,
subtitle row) and default VCard chrome without mixed border-shadow accents.
Use on organisation overview (all primary icons, equal stretch row) and
home dashboard. Regenerate component type declarations.

Made-with: Cursor

apps/app/components.d.ts

@@ -20,6 +20,7 @@ declare module 'vue' {
     AppCombobox: typeof import('./src/@core/components/app-form-elements/AppCombobox.vue')['default']
     AppDateTimePicker: typeof import('./src/@core/components/app-form-elements/AppDateTimePicker.vue')['default']
     AppDrawerHeaderSection: typeof import('./src/@core/components/AppDrawerHeaderSection.vue')['default']
+    AppKpiCard: typeof import('./src/components/AppKpiCard.vue')['default']
     AppLoadingIndicator: typeof import('./src/components/AppLoadingIndicator.vue')['default']
     AppPricing: typeof import('./src/components/AppPricing.vue')['default']
     AppSearchHeader: typeof import('./src/components/AppSearchHeader.vue')['default']
@@ -54,6 +55,7 @@ declare module 'vue' {
     DangerZoneTab: typeof import('./src/components/organisation/settings/DangerZoneTab.vue')['default']
     DeleteSubEventDialog: typeof import('./src/components/events/DeleteSubEventDialog.vue')['default']
     DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
+    DismissFailureDialog: typeof import('./src/components/form-failures/DismissFailureDialog.vue')['default']
     DropZone: typeof import('./src/@core/components/DropZone.vue')['default']
     EditEventDialog: typeof import('./src/components/events/EditEventDialog.vue')['default']
     EditOrganisationDialog: typeof import('./src/components/organisations/EditOrganisationDialog.vue')['default']
@@ -66,6 +68,8 @@ declare module 'vue' {
     ErrorHeader: typeof import('./src/components/ErrorHeader.vue')['default']
     EventMetricCards: typeof import('./src/components/events/EventMetricCards.vue')['default']
     EventTabsNav: typeof import('./src/components/events/EventTabsNav.vue')['default']
+    FormFailureDetail: typeof import('./src/components/form-failures/FormFailureDetail.vue')['default']
+    FormFailuresTable: typeof import('./src/components/form-failures/FormFailuresTable.vue')['default']
     I18n: typeof import('./src/@core/components/I18n.vue')['default']
     ImageUploadField: typeof import('./src/components/common/ImageUploadField.vue')['default']
     ImpersonateDialog: typeof import('./src/components/platform/ImpersonateDialog.vue')['default']
@@ -89,6 +93,8 @@ declare module 'vue' {
     RegistrationFieldCard: typeof import('./src/components/event/RegistrationFieldCard.vue')['default']
     RegistrationFieldFormDialog: typeof import('./src/components/event/RegistrationFieldFormDialog.vue')['default']
     RegistrationFieldTemplatesTab: typeof import('./src/components/organisation/RegistrationFieldTemplatesTab.vue')['default']
+    ResolveFailureDialog: typeof import('./src/components/form-failures/ResolveFailureDialog.vue')['default']
+    RetryFailureDialog: typeof import('./src/components/form-failures/RetryFailureDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollToTop: typeof import('./src/@core/components/ScrollToTop.vue')['default']

apps/app/src/components/AppKpiCard.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+/**
+ * Standaard KPI-tegel: icon + waarde, titel, optionele ondertitel.
+ * Zelfde structuur als event-statistieken; kaart-chrome is altijd gelijk (geen gekleurde rand tenzij borderAccent).
+ */
+type BorderAccent = 'primary' | 'warning' | 'info' | 'success' | 'error'
+
+const props = withDefaults(
+  defineProps<{
+    icon: string
+    iconColor?: string
+    value: string | number
+    title: string
+    /** Ondertitel; ontbreekt er een, dan blijft één regelhoogte gereserveerd voor gelijke tegelhoogtes. */
+    subtitle?: string
+    clickable?: boolean
+    borderAccent?: BorderAccent
+  }>(),
+  {
+    iconColor: 'primary',
+    clickable: false,
+  },
+)
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+function onClick() {
+  if (props.clickable)
+    emit('click')
+}
+</script>
+
+<template>
+  <VCard
+    :class="[
+      'flex-grow-1 w-100 d-flex flex-column',
+      clickable ? 'cursor-pointer' : '',
+      borderAccent ? `card-border-shadow-${borderAccent}` : '',
+    ]"
+    @click="onClick"
+  >
+    <VCardText class="flex-grow-1 d-flex flex-column">
+      <div class="d-flex align-center mb-1">
+        <VAvatar
+          :color="iconColor"
+          variant="tonal"
+          size="44"
+          rounded
+          class="me-4"
+        >
+          <VIcon
+            :icon="icon"
+            size="28"
+          />
+        </VAvatar>
+        <h4 class="text-h4 mb-0">
+          {{ value }}
+        </h4>
+      </div>
+      <p class="mb-1">
+        {{ title }}
+      </p>
+      <p class="mb-0 text-body-secondary text-sm">
+        {{ subtitle ?? '\u00a0' }}
+      </p>
+    </VCardText>
+  </VCard>
+</template>

apps/app/src/pages/dashboard/index.vue

@@ -5,9 +5,9 @@ const authStore = useAuthStore()
 
 const stats = [
   { title: 'Evenementen', value: 0, icon: 'tabler-calendar-event', color: 'primary' },
-  { title: 'Personen', value: 0, icon: 'tabler-users', color: 'success' },
+  { title: 'Personen', value: 0, icon: 'tabler-users', color: 'primary' },
-  { title: 'Shifts', value: 0, icon: 'tabler-clock', color: 'warning' },
+  { title: 'Shifts', value: 0, icon: 'tabler-clock', color: 'primary' },
-  { title: 'Briefings', value: 0, icon: 'tabler-mail', color: 'info' },
+  { title: 'Briefings', value: 0, icon: 'tabler-mail', color: 'primary' },
 ]
 </script>
 
@@ -33,29 +33,12 @@ const stats = [
         md="3"
         class="d-flex"
       >
-        <VCard class="flex-grow-1 w-100 d-flex flex-column">
+        <AppKpiCard
-          <VCardText class="d-flex align-center gap-x-4 flex-grow-1">
+          :icon="stat.icon"
-            <VAvatar
+          :icon-color="stat.color"
-              :color="stat.color"
+          :value="stat.value"
-              variant="tonal"
+          :title="stat.title"
-              size="44"
+        />
-              rounded
-            >
-              <VIcon
-                :icon="stat.icon"
-                size="28"
-              />
-            </VAvatar>
-            <div>
-              <p class="text-body-1 mb-0">
-                {{ stat.title }}
-              </p>
-              <h4 class="text-h4">
-                {{ stat.value }}
-              </h4>
-            </div>
-          </VCardText>
-        </VCard>
       </VCol>
     </VRow>
   </div>

apps/app/src/pages/organisation/index.vue

@@ -150,6 +150,7 @@ function describeActivity(entry: ActivityLogEntry): string {
       <!-- Stat cards -->
       <VRow
         v-if="statsLoading"
+        align="stretch"
         class="mb-6"
       >
         <VCol
@@ -157,8 +158,9 @@ function describeActivity(entry: ActivityLogEntry): string {
           :key="n"
           cols="12"
           md="4"
+          class="d-flex"
         >
-          <VCard>
+          <VCard class="flex-grow-1 w-100">
             <VCardText>
               <VSkeletonLoader type="heading" />
             </VCardText>
@@ -186,111 +188,53 @@ function describeActivity(entry: ActivityLogEntry): string {
 
       <VRow
         v-else-if="stats"
+        align="stretch"
         class="mb-2"
       >
         <VCol
           cols="12"
           md="4"
+          class="d-flex"
         >
-          <VCard
+          <AppKpiCard
-            class="cursor-pointer h-100 card-border-shadow-primary"
+            icon="tabler-users"
+            icon-color="primary"
+            :value="stats.members_count"
+            title="Leden"
+            subtitle="Actieve leden in je organisatie"
+            clickable
             @click="goToMembers"
-          >
+          />
-            <VCardText>
-              <div class="d-flex align-center mb-1">
-                <VAvatar
-                  color="primary"
-                  variant="tonal"
-                  size="44"
-                  rounded
-                  class="me-4"
-                >
-                  <VIcon
-                    icon="tabler-users"
-                    size="28"
-                  />
-                </VAvatar>
-                <h4 class="text-h4 mb-0">
-                  {{ stats.members_count }}
-                </h4>
-              </div>
-              <p class="mb-1">
-                Leden
-              </p>
-              <p class="mb-0 text-body-secondary text-sm">
-                Actieve leden in je organisatie
-              </p>
-            </VCardText>
-          </VCard>
         </VCol>
 
         <VCol
           cols="12"
           md="4"
+          class="d-flex"
         >
-          <VCard
+          <AppKpiCard
-            class="cursor-pointer h-100 card-border-shadow-info"
+            icon="tabler-calendar-event"
+            icon-color="primary"
+            :value="stats.events_count"
+            title="Evenementen"
+            :subtitle="activeSubtitle"
+            clickable
             @click="goToEvents"
-          >
+          />
-            <VCardText>
-              <div class="d-flex align-center mb-1">
-                <VAvatar
-                  color="info"
-                  variant="tonal"
-                  size="44"
-                  rounded
-                  class="me-4"
-                >
-                  <VIcon
-                    icon="tabler-calendar-event"
-                    size="28"
-                  />
-                </VAvatar>
-                <h4 class="text-h4 mb-0">
-                  {{ stats.events_count }}
-                </h4>
-              </div>
-              <p class="mb-1">
-                Evenementen
-              </p>
-              <p class="mb-0 text-body-secondary text-sm">
-                {{ activeSubtitle }}
-              </p>
-            </VCardText>
-          </VCard>
         </VCol>
 
         <VCol
           cols="12"
           md="4"
+          class="d-flex"
         >
-          <VCard class="h-100 card-border-shadow-success">
+          <AppKpiCard
-            <VCardText>
+            icon="tabler-user-circle"
-              <div class="d-flex align-center mb-1">
+            icon-color="primary"
-                <VAvatar
+            :value="stats.persons_count"
-                  color="success"
+            title="Personen"
-                  variant="tonal"
+            subtitle="Over alle evenementen heen"
-                  size="44"
+          />
-                  rounded
-                  class="me-4"
-                >
-                  <VIcon
-                    icon="tabler-user-circle"
-                    size="28"
-                  />
-                </VAvatar>
-                <h4 class="text-h4 mb-0">
-                  {{ stats.persons_count }}
-                </h4>
-              </div>
-              <p class="mb-1">
-                Personen
-              </p>
-              <p class="mb-0 text-body-secondary text-sm">
-                Over alle evenementen heen
-              </p>
-            </VCardText>
-          </VCard>
         </VCol>
       </VRow>