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

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>