Enhance employee stats view with completed bookings

Adds a new data table to employee detail stats showing completed bookings

Includes:
- Expanded EmployeeDetailStatsViewComponent with booking data
- Updated localization translations for new table labels
- Created mock booking data for demonstration
- Updated .gitignore to simplify temporary file handling
This commit is contained in:
Janus C. H. Knudsen 2026-01-13 23:46:38 +01:00
parent f71f00099a
commit e739ce2ac7
11 changed files with 895 additions and 62 deletions

View file

@ -163,13 +163,15 @@ swp-status-badge::before {
/* Status variants */
swp-status-badge.approved,
swp-status-badge.active {
swp-status-badge.active,
swp-status-badge.paid {
background: color-mix(in srgb, var(--color-green) 15%, transparent);
color: var(--color-green);
}
swp-status-badge.draft,
swp-status-badge.invited {
swp-status-badge.invited,
swp-status-badge.pending {
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
color: #b45309;
}
@ -487,3 +489,49 @@ swp-add-button:hover {
color: var(--color-teal);
background: color-mix(in srgb, var(--color-teal) 5%, transparent);
}
/* ===========================================
DATA TABLE (Grid + Subgrid)
Follows same pattern as swp-invoice-table
Columns defined per-usage in feature CSS
=========================================== */
swp-data-table {
display: grid;
font-size: var(--font-size-base);
}
swp-data-table-header {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
background: var(--color-background-alt);
}
swp-data-table-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
border-bottom: 1px solid var(--color-border);
}
swp-data-table-row:hover {
background: var(--color-background-hover);
}
swp-data-table-row:last-child {
border-bottom: none;
}
swp-data-table-header swp-data-table-cell {
font-size: 11px;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--color-text-secondary);
}
swp-data-table-cell {
padding: 12px 16px;
color: var(--color-text);
}