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

fix(app): equal-height KPI cards on dashboard and form failures

Browse Source 
- Stretch row + flex column cards so tiles share height
- Form failures: uniform outlined cards; primary border for selection
  (replacing elevated vs outlined mismatch)
- Full-width state toggle with flex-grow buttons and wrap to fix overlap
- Responsive KPI columns sm6/lg3 for Form failures

Made-with: Cursor
This commit is contained in:
bert.hausmans
2026-04-29 00:44:27 +02:00
parent 7926634c76
commit c344efa511
2 changed files with 48 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
apps/app/src/components/form-failures/FormFailuresTable.vue
View File

@@ -130,22 +130,28 @@ function setStateFilter(s: FormFailureState | 'all') {
<template>
<div>
<!-- KPI tiles — server-side aggregate (sessie 3c). -->
<VRow class="mb-4">
<VRow
class="mb-4"
align="stretch"
>
<VCol
cols="12"
md="3"
sm="6"
lg="3"
class="d-flex"
>
<VCard
density="compact"
class="cursor-pointer"
:variant="stateFilter === 'open' ? 'elevated' : 'outlined'"
variant="outlined"
class="flex-grow-1 w-100 cursor-pointer d-flex flex-column"
:class="stateFilter === 'open' ? 'border-opacity-100 border-primary' : ''"
@click="setStateFilter('open')"
>
<VCardText>
<p class="text-caption text-disabled mb-1">
<VCardText class="flex-grow-1 d-flex flex-column justify-center">
<p class="text-caption text-disabled mb-1 text-no-wrap">
Open failures
</p>
<h5 class="text-h5">
<h5 class="text-h5 mb-0 d-flex align-center">
<VIcon
icon="tabler-alert-triangle"
color="error"
@@ -159,19 +165,22 @@ function setStateFilter(s: FormFailureState | 'all') {
</VCol>
<VCol
cols="12"
md="3"
sm="6"
lg="3"
class="d-flex"
>
<VCard
density="compact"
class="cursor-pointer"
:variant="stateFilter === 'resolved' ? 'elevated' : 'outlined'"
variant="outlined"
class="flex-grow-1 w-100 cursor-pointer d-flex flex-column"
:class="stateFilter === 'resolved' ? 'border-opacity-100 border-primary' : ''"
@click="setStateFilter('resolved')"
>
<VCardText>
<p class="text-caption text-disabled mb-1">
<VCardText class="flex-grow-1 d-flex flex-column justify-center">
<p class="text-caption text-disabled mb-1 text-no-wrap">
Opgelost (30d)
</p>
<h5 class="text-h5">
<h5 class="text-h5 mb-0 d-flex align-center">
<VIcon
icon="tabler-check"
color="success"
@@ -185,19 +194,22 @@ function setStateFilter(s: FormFailureState | 'all') {
</VCol>
<VCol
cols="12"
md="3"
sm="6"
lg="3"
class="d-flex"
>
<VCard
density="compact"
class="cursor-pointer"
:variant="stateFilter === 'dismissed' ? 'elevated' : 'outlined'"
variant="outlined"
class="flex-grow-1 w-100 cursor-pointer d-flex flex-column"
:class="stateFilter === 'dismissed' ? 'border-opacity-100 border-primary' : ''"
@click="setStateFilter('dismissed')"
>
<VCardText>
<p class="text-caption text-disabled mb-1">
<VCardText class="flex-grow-1 d-flex flex-column justify-center">
<p class="text-caption text-disabled mb-1 text-no-wrap">
Dismissed (30d)
</p>
<h5 class="text-h5">
<h5 class="text-h5 mb-0 d-flex align-center">
<VIcon
icon="tabler-x"
color="warning"
@@ -211,17 +223,20 @@ function setStateFilter(s: FormFailureState | 'all') {
</VCol>
<VCol
cols="12"
md="3"
sm="6"
lg="3"
class="d-flex"
>
<VCard
density="compact"
variant="outlined"
class="flex-grow-1 w-100 d-flex flex-column"
>
<VCardText>
<p class="text-caption text-disabled mb-1">
<VCardText class="flex-grow-1 d-flex flex-column justify-center">
<p class="text-caption text-disabled mb-1 text-no-wrap">
Submissions
</p>
<h5 class="text-h5">
<h5 class="text-h5 mb-0 d-flex align-center">
<VIcon
icon="tabler-chart-bar"
color="info"
@@ -254,12 +269,10 @@ function setStateFilter(s: FormFailureState | 'all') {
<VCard>
<VCardText>
<VRow>
<VCol
cols="12"
md="6"
>
<VCol cols="12">
<VBtnToggle
:model-value="stateFilter"
class="w-100 flex-wrap"
divided
density="comfortable"
mandatory
@@ -269,14 +282,16 @@ function setStateFilter(s: FormFailureState | 'all') {
v-for="opt in stateOptions"
:key="opt.value"
:value="opt.value"
class="flex-grow-1"
style="min-inline-size: 0"
>
{{ opt.title }}
<span class="text-truncate">{{ opt.title }}</span>
</VBtn>
</VBtnToggle>
</VCol>
<VCol
cols="12"
md="6"
md="12"
>
<AppTextField
v-model="search"

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

@@ -24,16 +24,17 @@ const stats = [
</VCardText>
</VCard>
<VRow>
<VRow align="stretch">
<VCol
v-for="stat in stats"
:key="stat.title"
cols="12"
sm="6"
md="3"
class="d-flex"
>
<VCard>
<VCardText class="d-flex align-center gap-x-4">
<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"