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
This commit is contained in:
2026-04-29 00:46:48 +02:00
parent c344efa511
commit 2ae90ed57f
4 changed files with 115 additions and 112 deletions

View File

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