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/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>