Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance employee stats view with completed bookings

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

52
PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md
View file

@ -131,8 +131,10 @@ Reference for alle genbrugelige komponenter. **LAV ALDRIG EN NY KOMPONENT HVIS D
|-------|-------|------|
| `approved` | Grøn | Godkendt status |
| `active` | Grøn | Aktiv status |
| `paid` | Grøn | Betalt status |
| `draft` | Amber | Kladde status |
| `invited` | Amber | Invitation sendt |
| `pending` | Amber | Afventer status |
| `owner` | Teal | Ejer rolle |
| `admin` | Purple | Admin rolle |
| `leader` | Blue | Leder rolle |
@ -191,7 +193,8 @@ swp-[feature]-row {
| Cash | `swp-cash-table` | `swp-cash-table-row` | cash.css |
| Employees | `swp-employee-table` | `swp-employee-row` | employees.css |
| Salary | `swp-salary-table` | `swp-salary-table-row` | employees.css |
| Bookings | `swp-booking-list` | `swp-booking-item` | bookings.css |
| **Data (generisk)** | `swp-data-table` | `swp-data-table-row` | components.css |
| Bookings (dashboard) | `swp-booking-list` | `swp-booking-item` | bookings.css |
| Notifications | `swp-notification-list` | `swp-notification-item` | notifications.css |
| Attentions | `swp-attention-list` | `swp-attention-item` | attentions.css |
@ -383,6 +386,51 @@ Rækker har hover-effekt og chevron bliver teal ved hover.
---
## Data Table - Generisk (components.css)
Generisk tabel med Grid + Subgrid.
**Struktur:**
- `swp-data-table` = grid (kolonner i feature CSS)
- `swp-data-table-header` = subgrid (celler direkte i)
- `swp-data-table-row` = subgrid
- `swp-data-table-cell` = celler
**Brug:** Wrap i container med klasse der definerer kolonner.
```css
/* I feature CSS (f.eks. employees.css) */
.stats-bookings swp-data-table {
grid-template-columns: 90px 60px 1fr 1fr 80px 100px 100px;
}
/* Kolonne-specifik styling med nth-child */
.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(1),
.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(2) {
font-family: var(--font-mono);
color: var(--color-text-secondary);
}
```
```html
<swp-card class="stats-bookings">
<swp-data-table>
<swp-data-table-header>
<swp-data-table-cell>Kolonne 1</swp-data-table-cell>
<swp-data-table-cell>Kolonne 2</swp-data-table-cell>
</swp-data-table-header>
<swp-data-table-row>
<swp-data-table-cell>Data 1</swp-data-table-cell>
<swp-data-table-cell>Data 2</swp-data-table-cell>
</swp-data-table-row>
</swp-data-table>
</swp-card>
```
**Kolonne-styling:** Brug `nth-child()` i feature CSS frem for klasser på celler.
---
## Add Button (components.css)
Dashed border knap til tilføjelse af elementer.
@ -465,7 +513,7 @@ Dashed border knap til tilføjelse af elementer.
| `design-tokens.css` | Farver, spacing, fonts, shadows |
| `design-system.css` | Base resets, typography |
| `page.css` | Page structure |
| `components.css` | Buttons, badges, cards, section-label, add-button, avatars, icon-btn |
| `components.css` | Buttons, badges, cards, section-label, add-button, avatars, icon-btn, data-table |
| `stats.css` | Stat cards, stat rows |
| `tabs.css` | Tab bar, tab content |
| `employees.css` | Employee table, user info, edit forms, document lists, salary table |