Calendar/docs/design-system.md

# SWP Design System - UI/UX Dokumentation

## Oversigt

Dette dokument beskriver det komponent-baserede design system udviklet til Salon OS SaaS platformen gennem POC-udvikling. Systemet består af **150+ custom HTML elementer** med `swp-` prefix.

---

## Design Principper

- **Custom Elements**: Alle komponenter bruger semantiske `swp-*` tags
- **CSS Variables**: Theming via `--color-*` variabler (light/dark mode)
- **Responsive**: Mobile-first med grid breakpoints
- **Konsistent spacing**: 4px base unit (4, 8, 12, 16, 20, 24px)

---

## Farvepalette (CSS Variables)

```css
--color-surface: #fff / #1e1e1e
--color-background: #f5f5f5 / #121212
--color-border: #e0e0e0 / #333
--color-text: #333 / #e0e0e0
--color-text-secondary: #666 / #999
--color-teal: #00897b (primary)
--color-blue: #1976d2
--color-green: #43a047 (success)
--color-amber: #f59e0b (warning)
--color-red: #e53935 (error)
--color-purple: #8b5cf6
```

---

## Typografi

```css
--font-family: 'Poppins', sans-serif
--font-mono: 'JetBrains Mono', monospace
```

| Størrelse | Brug |
|-----------|------|
| 22px | Stat values |
| 16px | Page titles |
| 14px | Body text |
| 13px | Table cells, inputs |
| 12px | Labels, hints |
| 11px | Table headers (uppercase) |

---

## Komponent-katalog

### 1. Layout & Container

| Element | Beskrivelse |
|---------|-------------|
| `swp-page` | Hovedpage wrapper |
| `swp-page-container` | Max-width container (1400px) |
| `swp-card` | Kortkomponent med border og shadow |
| `swp-card-header` | Kortheader med titel |
| `swp-drawer` | Slide-in panel fra højre |
| `swp-drawer-overlay` | Mørk overlay bag drawer |
| `swp-two-columns` | To-kolonne layout |

### 2. Navigation

| Element | Beskrivelse |
|---------|-------------|
| `swp-topbar` | Sticky header bar |
| `swp-topbar-left/right` | Flex containers i topbar |
| `swp-page-title` | Sidetitel i topbar |
| `swp-back-link` | Tilbage-navigation med ikon |
| `swp-tabs` | Tab navigation |
| `swp-tab` | Enkelt tab |

### 3. Formularer

| Element | Beskrivelse |
|---------|-------------|
| `swp-form-field` | Wrapper for label + input |
| `swp-form-label` | Form label |
| `swp-form-input` | Input wrapper |
| `swp-form-row` | Horisontal gruppe af felter |
| `swp-form-hint` | Hjælpetekst under felt |
| `swp-toggle-slider` | On/off toggle |
| `swp-edit-section` | Redigerbar sektion |
| `swp-edit-row` | Label + værdi row |

### 4. Tabeller

| Element | Beskrivelse |
|---------|-------------|
| `swp-table` | Hovedtabel container |
| `swp-table-header` | Header row (grid) |
| `swp-table-body` | Body container |
| `swp-table-row` | Data row (grid) |
| `swp-th` | Header cell |
| `swp-td` | Data cell |
| `swp-table-footer` | Footer med pagination |
| `swp-row-arrow` | Klik-indikator pil |

### 5. Statistik

| Element | Beskrivelse |
|---------|-------------|
| `swp-stats-bar` | Grid af stat cards |
| `swp-stat-card` | Enkelt statistik kort |
| `swp-stat-value` | Stor tal (mono font) |
| `swp-stat-label` | Beskrivelse under tal |
| `swp-stat-change` | Ændring indikator (+/-) |

### 6. Søgning & Filtrering

| Element | Beskrivelse |
|---------|-------------|
| `swp-filter-bar` | Filterpanel |
| `swp-search-input` | Søgefelt med ikon |
| `swp-filter-group` | Label + select/input |
| `swp-filter-label` | Filter label |

### 7. Badges & Status

| Element | Beskrivelse | Klasser |
|---------|-------------|---------|
| `swp-status-badge` | Status indikator | `.paid`, `.pending`, `.credited` |
| `swp-payment-badge` | Betalingsmetode | `.card`, `.cash`, `.mobilepay` |
| `swp-tag` | Inline tag | `.vip`, `.new` |

### 8. Buttons

| Element | Beskrivelse | Klasser |
|---------|-------------|---------|
| `swp-btn` | Standard button | `.primary`, `.secondary`, `.danger` |

### 9. Charts (swp-charting)

| Element | Beskrivelse |
|---------|-------------|
| `swp-chart-card` | Chart wrapper kort |
| `swp-chart-header` | Titel + hint |
| `swp-chart-container` | Canvas container |

### 10. Specialiserede Komponenter

#### Kunde
- `swp-customer-avatar` - Rund avatar
- `swp-customer-cell` - Navn + telefon
- `swp-customer-header` - Profil header

#### Medarbejder
- `swp-employee-avatar` - Medarbejder billede
- `swp-employee-name` - Navn display

#### Faktura
- `swp-invoice-cell` - Fakturanummer
- `swp-datetime-cell` - Dato + tid
- `swp-amount-cell` - Beløb (højre-justeret)

#### Produkt
- `swp-variants-table` - Variant liste
- `swp-stock-display` - Lagerstatus
- `swp-margin-display` - Avance visning

#### Booking/AI
- `swp-gap-card` - Ledigt hul kort
- `swp-suggestion-item` - AI forslag
- `swp-optimization-score` - Score cirkel

---

## Pagination

```html
<swp-pagination>
  <swp-page-btn><i class="ph ph-caret-left"></i></swp-page-btn>
  <swp-page-btn class="active">1</swp-page-btn>
  <swp-page-btn>2</swp-page-btn>
  <swp-page-btn>...</swp-page-btn>
  <swp-page-btn><i class="ph ph-caret-right"></i></swp-page-btn>
</swp-pagination>
```

---

## Ikoner

Bruger **Phosphor Icons** via CDN:
```html
<script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
<i class="ph ph-magnifying-glass"></i>
<i class="ph ph-caret-right"></i>
<i class="ph ph-credit-card"></i>
```

---

## POC Filer (Reference)

| Fil | Domæne |
|-----|--------|
| `poc-salg.html` | Salgsoversigt, fakturaer |
| `poc-customer-list.html` | Kundeliste |
| `poc-customer-detail.html` | Kundeprofil |
| `poc-employee.html` | Medarbejderprofil |
| `poc-produkt.html` | Produktdetaljer |
| `poc-gavekort.html` | Fordelskort |
| `poc-kasseafstemninger.html` | Kasseafstemning |
| `poc-rapport.html` | Rapporter |
| `poc-indstillinger.html` | Indstillinger |

---

## Næste Skridt: .NET Core Implementation

Når design systemet er dokumenteret, er næste fase at implementere:
1. Backend API endpoints
2. Database modeller
3. Razor/Blazor komponenter baseret på swp-* elementer