fix(app): align Form failures KPI row with AppKpiCard

Reuse AppKpiCard for the four tiles; selection uses borderAccent primary
(bottom stripe) instead of full border-primary outline. Update tests to
register AppKpiCard and stub VAvatar.

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/components/form-failures/FormFailuresTable.vue

@@ -140,28 +140,15 @@ function setStateFilter(s: FormFailureState | 'all') {
         lg="3"
         class="d-flex"
       >
-        <VCard
-          density="compact"
-          variant="outlined"
-          class="flex-grow-1 w-100 cursor-pointer d-flex flex-column"
-          :class="stateFilter === 'open' ? 'border-opacity-100 border-primary' : ''"
+        <AppKpiCard
+          icon="tabler-alert-triangle"
+          icon-color="error"
+          :value="kpis?.open ?? 0"
+          title="Open failures"
+          clickable
+          :border-accent="stateFilter === 'open' ? 'primary' : undefined"
           @click="setStateFilter('open')"
-        >
-          <VCardText class="flex-grow-1 d-flex flex-column justify-center">
-            <p class="text-caption text-disabled mb-1 text-no-wrap">
-              Open failures
-            </p>
-            <h5 class="text-h5 mb-0 d-flex align-center">
-              <VIcon
-                icon="tabler-alert-triangle"
-                color="error"
-                size="20"
-                class="me-1"
-              />
-              {{ kpis?.open ?? 0 }}
-            </h5>
-          </VCardText>
-        </VCard>
+        />
       </VCol>
       <VCol
         cols="12"
@@ -169,28 +156,15 @@ function setStateFilter(s: FormFailureState | 'all') {
         lg="3"
         class="d-flex"
       >
-        <VCard
-          density="compact"
-          variant="outlined"
-          class="flex-grow-1 w-100 cursor-pointer d-flex flex-column"
-          :class="stateFilter === 'resolved' ? 'border-opacity-100 border-primary' : ''"
+        <AppKpiCard
+          icon="tabler-check"
+          icon-color="success"
+          :value="kpis?.resolved_30d ?? 0"
+          title="Opgelost (30d)"
+          clickable
+          :border-accent="stateFilter === 'resolved' ? 'primary' : undefined"
           @click="setStateFilter('resolved')"
-        >
-          <VCardText class="flex-grow-1 d-flex flex-column justify-center">
-            <p class="text-caption text-disabled mb-1 text-no-wrap">
-              Opgelost (30d)
-            </p>
-            <h5 class="text-h5 mb-0 d-flex align-center">
-              <VIcon
-                icon="tabler-check"
-                color="success"
-                size="20"
-                class="me-1"
-              />
-              {{ kpis?.resolved_30d ?? 0 }}
-            </h5>
-          </VCardText>
-        </VCard>
+        />
       </VCol>
       <VCol
         cols="12"
@@ -198,28 +172,15 @@ function setStateFilter(s: FormFailureState | 'all') {
         lg="3"
         class="d-flex"
       >
-        <VCard
-          density="compact"
-          variant="outlined"
-          class="flex-grow-1 w-100 cursor-pointer d-flex flex-column"
-          :class="stateFilter === 'dismissed' ? 'border-opacity-100 border-primary' : ''"
+        <AppKpiCard
+          icon="tabler-x"
+          icon-color="warning"
+          :value="kpis?.dismissed_30d ?? 0"
+          title="Dismissed (30d)"
+          clickable
+          :border-accent="stateFilter === 'dismissed' ? 'primary' : undefined"
           @click="setStateFilter('dismissed')"
-        >
-          <VCardText class="flex-grow-1 d-flex flex-column justify-center">
-            <p class="text-caption text-disabled mb-1 text-no-wrap">
-              Dismissed (30d)
-            </p>
-            <h5 class="text-h5 mb-0 d-flex align-center">
-              <VIcon
-                icon="tabler-x"
-                color="warning"
-                size="20"
-                class="me-1"
-              />
-              {{ kpis?.dismissed_30d ?? 0 }}
-            </h5>
-          </VCardText>
-        </VCard>
+        />
       </VCol>
       <VCol
         cols="12"
@@ -227,26 +188,12 @@ function setStateFilter(s: FormFailureState | 'all') {
         lg="3"
         class="d-flex"
       >
-        <VCard
-          density="compact"
-          variant="outlined"
-          class="flex-grow-1 w-100 d-flex flex-column"
-        >
-          <VCardText class="flex-grow-1 d-flex flex-column justify-center">
-            <p class="text-caption text-disabled mb-1 text-no-wrap">
-              Submissions
-            </p>
-            <h5 class="text-h5 mb-0 d-flex align-center">
-              <VIcon
-                icon="tabler-chart-bar"
-                color="info"
-                size="20"
-                class="me-1"
-              />
-              {{ kpis?.total_submissions ?? 0 }}
-            </h5>
-          </VCardText>
-        </VCard>
+        <AppKpiCard
+          icon="tabler-chart-bar"
+          icon-color="info"
+          :value="kpis?.total_submissions ?? 0"
+          title="Submissions"
+        />
       </VCol>
     </VRow>
 

apps/app/src/components/form-failures/__tests__/FormFailuresTable.spec.ts

@@ -3,6 +3,7 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import FormFailuresTable from '../FormFailuresTable.vue'
+import AppKpiCard from '@/components/AppKpiCard.vue'
 import type { FormFailure, FormFailuresKpis } from '@/types/form-failures'
 
 const mockGet = vi.fn()
@@ -66,6 +67,7 @@ const stubs = {
     props: ['modelValue'],
   },
   VIcon: { template: '<i :class="icon"></i>', props: ['icon', 'size', 'color'] },
+  VAvatar: { template: '<span class="v-avatar-stub"><slot /></span>', props: ['color', 'size', 'rounded', 'variant'] },
   VChip: { template: '<span class="v-chip-stub" :data-color="color"><slot/></span>', props: ['color', 'size', 'variant'] },
   AppTextField: {
     template: '<input :value="modelValue" :placeholder="placeholder" :data-label="label" :type="type" @input="$emit(\'update:modelValue\', $event.target.value)"/>',
@@ -116,6 +118,7 @@ function mountTable(items: FormFailure[], kpis: FormFailuresKpis = { open: 0, re
   return mount(FormFailuresTable, {
     props: { scope: 'platform' },
     global: {
+      components: { AppKpiCard },
       stubs,
       plugins: [[VueQueryPlugin, { queryClient: client }]],
     },

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: 'Shifts', value: 0, icon: 'tabler-clock', color: 'warning' },
-  { title: 'Briefings', value: 0, icon: 'tabler-mail', color: 'info' },
+  { title: 'Personen', value: 0, icon: 'tabler-users', color: 'primary' },
+  { title: 'Shifts', value: 0, icon: 'tabler-clock', color: 'primary' },
+  { 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">
-          <VCardText class="d-flex align-center gap-x-4 flex-grow-1">
-            <VAvatar
-              :color="stat.color"
-              variant="tonal"
-              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>
+        <AppKpiCard
+          :icon="stat.icon"
+          :icon-color="stat.color"
+          :value="stat.value"
+          :title="stat.title"
+        />
       </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
-            class="cursor-pointer h-100 card-border-shadow-primary"
+          <AppKpiCard
+            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
-            class="cursor-pointer h-100 card-border-shadow-info"
+          <AppKpiCard
+            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">
-            <VCardText>
-              <div class="d-flex align-center mb-1">
-                <VAvatar
-                  color="success"
-                  variant="tonal"
-                  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>
+          <AppKpiCard
+            icon="tabler-user-circle"
+            icon-color="primary"
+            :value="stats.persons_count"
+            title="Personen"
+            subtitle="Over alle evenementen heen"
+          />
         </VCol>
       </VRow>