bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): unify KPI tiles with AppKpiCard

Browse Source 
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:
bert.hausmans
2026-04-29 00:46:48 +02:00
parent c344efa511
commit 2ae90ed57f
4 changed files with 115 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
apps/app/src/pages/dashboard/index.vue
View File

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

116
apps/app/src/pages/organisation/index.vue
View File

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