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

PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md

@@ -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 |

PlanTempus.Application/wwwroot/css/cash.css

@@ -354,10 +354,6 @@ swp-cash-column {
 /* ===========================================
    DATA TABLE (Dagens Tal)
    =========================================== */
-swp-data-table {
-  display: block;
-  width: 100%;
-}
 
 swp-data-header {
   display: grid;

PlanTempus.Application/wwwroot/css/components.css

@@ -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);
+}

PlanTempus.Application/wwwroot/css/employees.css

@@ -953,3 +953,36 @@ swp-simple-item-text {
     justify-content: center;
   }
 }
+
+/* ===========================================
+   STATS BOOKINGS TABLE (columns for swp-data-table)
+   =========================================== */
+.stats-bookings swp-data-table {
+  grid-template-columns: 90px 60px minmax(120px, 1fr) minmax(150px, 1fr) 80px 100px 100px;
+}
+
+/* Dato, Tid, Varighed: mono + muted */
+.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),
+.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(5) {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+/* Kunde: medium */
+.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(3) {
+  font-weight: var(--font-weight-medium);
+}
+
+/* Beløb: mono + bold + right */
+.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(6),
+.stats-bookings swp-data-table-header swp-data-table-cell:nth-child(6) {
+  text-align: right;
+}
+
+.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(6) {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: var(--font-weight-semibold);
+}