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

feat(mail): center-align action button in email template

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
bert.hausmans
2026-04-14 00:49:41 +02:00
parent 172a6a12d3
commit ef195a6777
14 changed files with 336 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
apps/app/src/components/events/EventMetricCards.vue
View File

@@ -80,33 +80,37 @@ const shiftFillPercent = computed(() => {
md="3"
>
<VCard
class="cursor-pointer"
hover
:class="[
'cursor-pointer h-100',
stats.persons_approved_without_shift > 0 ? 'card-border-shadow-warning' : 'card-border-shadow-success',
]"
@click="navigateTo('events-id-persons')"
>
<VCardText class="d-flex align-center gap-x-3">
<VAvatar
:color="stats.persons_approved_without_shift > 0 ? 'warning' : 'success'"
variant="tonal"
size="44"
rounded
>
<VIcon
icon="tabler-user-exclamation"
size="28"
/>
</VAvatar>
<div>
<h4 class="text-h4">
<VCardText>
<div class="d-flex align-center mb-1">
<VAvatar
:color="stats.persons_approved_without_shift > 0 ? 'warning' : 'success'"
variant="tonal"
size="44"
rounded
class="me-4"
>
<VIcon
icon="tabler-user-exclamation"
size="28"
/>
</VAvatar>
<h4 class="text-h4 mb-0">
{{ stats.persons_approved_without_shift }}
</h4>
<p class="text-body-2 text-medium-emphasis mb-0">
goedgekeurd zonder shift
</p>
<p class="text-caption text-disabled mb-0">
van {{ stats.persons_approved }} goedgekeurde personen
</p>
</div>
<p class="mb-1">
Goedgekeurd zonder shift
</p>
<p class="mb-0">
<span class="text-heading fw-medium me-2">{{ stats.persons_approved }}</span>
<span class="text-body-secondary text-sm">goedgekeurde personen</span>
</p>
</VCardText>
</VCard>
</VCol>
@@ -118,30 +122,36 @@ const shiftFillPercent = computed(() => {
md="3"
>
<VCard
class="cursor-pointer"
hover
:class="[
'cursor-pointer h-100',
stats.persons_pending > 0 ? 'card-border-shadow-warning' : 'card-border-shadow-success',
]"
@click="navigateTo('events-id-persons')"
>
<VCardText class="d-flex align-center gap-x-3">
<VAvatar
:color="stats.persons_pending > 0 ? 'warning' : 'success'"
variant="tonal"
size="44"
rounded
>
<VIcon
icon="tabler-clock"
size="28"
/>
</VAvatar>
<div>
<h4 class="text-h4">
<VCardText>
<div class="d-flex align-center mb-1">
<VAvatar
:color="stats.persons_pending > 0 ? 'warning' : 'success'"
variant="tonal"
size="44"
rounded
class="me-4"
>
<VIcon
icon="tabler-clock"
size="28"
/>
</VAvatar>
<h4 class="text-h4 mb-0">
{{ stats.persons_pending }}
</h4>
<p class="text-body-2 text-medium-emphasis mb-0">
wachtende goedkeuringen
</p>
</div>
<p class="mb-1">
Wachtende goedkeuringen
</p>
<p class="mb-0">
<span class="text-body-secondary text-sm">te beoordelen aanmeldingen</span>
</p>
</VCardText>
</VCard>
</VCol>
@@ -153,30 +163,36 @@ const shiftFillPercent = computed(() => {
md="3"
>
<VCard
class="cursor-pointer"
hover
:class="[
'cursor-pointer h-100',
stats.pending_identity_matches > 0 ? 'card-border-shadow-info' : 'card-border-shadow-success',
]"
@click="navigateTo('events-id-persons')"
>
<VCardText class="d-flex align-center gap-x-3">
<VAvatar
:color="stats.pending_identity_matches > 0 ? 'info' : 'success'"
variant="tonal"
size="44"
rounded
>
<VIcon
icon="tabler-user-search"
size="28"
/>
</VAvatar>
<div>
<h4 class="text-h4">
<VCardText>
<div class="d-flex align-center mb-1">
<VAvatar
:color="stats.pending_identity_matches > 0 ? 'info' : 'success'"
variant="tonal"
size="44"
rounded
class="me-4"
>
<VIcon
icon="tabler-user-search"
size="28"
/>
</VAvatar>
<h4 class="text-h4 mb-0">
{{ stats.pending_identity_matches }}
</h4>
<p class="text-body-2 text-medium-emphasis mb-0">
onopgeloste matches
</p>
</div>
<p class="mb-1">
Onopgeloste matches
</p>
<p class="mb-0">
<span class="text-body-secondary text-sm">identiteitscontrole nodig</span>
</p>
</VCardText>
</VCard>
</VCol>
@@ -188,36 +204,37 @@ const shiftFillPercent = computed(() => {
md="3"
>
<VCard
class="cursor-pointer"
hover
:class="[
'cursor-pointer h-100',
`card-border-shadow-${shiftFillColor}`,
]"
@click="navigateTo('events-id-sections')"
>
<VCardText class="d-flex align-center gap-x-3">
<VAvatar
:color="shiftFillColor"
variant="tonal"
size="44"
rounded
>
<VIcon
icon="tabler-calendar-check"
size="28"
/>
</VAvatar>
<div class="flex-grow-1">
<h4 class="text-h4">
<VCardText>
<div class="d-flex align-center mb-1">
<VAvatar
:color="shiftFillColor"
variant="tonal"
size="44"
rounded
class="me-4"
>
<VIcon
icon="tabler-calendar-check"
size="28"
/>
</VAvatar>
<h4 class="text-h4 mb-0">
{{ stats.shifts_filled }}/{{ stats.shifts_total }}
</h4>
<p class="text-body-2 text-medium-emphasis mb-1">
shifts gevuld
</p>
<VProgressLinear
:model-value="shiftFillPercent"
:color="shiftFillColor"
height="6"
rounded
/>
</div>
<p class="mb-1">
Shifts gevuld
</p>
<p class="mb-0">
<span class="text-heading fw-medium me-2">{{ shiftFillPercent }}%</span>
<span class="text-body-secondary text-sm">bezetting</span>
</p>
</VCardText>
</VCard>
</VCol>