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:
70
apps/app/src/components/AppKpiCard.vue
Normal file
70
apps/app/src/components/AppKpiCard.vue
Normal 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>
|
||||
Reference in New Issue
Block a user