diff --git a/.workbench/image.png b/.workbench/image.png
index cbecbe4..196aaeb 100644
Binary files a/.workbench/image.png and b/.workbench/image.png differ
diff --git a/.workbench/spec-salary.html b/.workbench/spec-salary.html
new file mode 100644
index 0000000..41ee387
--- /dev/null
+++ b/.workbench/spec-salary.html
@@ -0,0 +1,564 @@
+
+
+
+
+
+ Lønspecifikation – Januar 2026 (2 sider)
+
+
+
+
+
+
+
+
+
+
Lønspecifikation
+
Periode: Januar 2026
+
+
+
+
+
+
+
+
Bruttoløn (Januar 2026)
+
34.063,50 kr
+
+
+
Side 1: Overblik
+
+ Kort opsummering til udlevering.
+ Detaljer findes på side 2.
+
+
+
+
+
+
+
+
Samlet lønopgørelse
+ Alle beløb i DKK
+
+
+
+
+
+ | Løndel |
+ Beløb |
+
+
+
+
+ | Grundløn inkl. overarbejde |
+ 29.322,50 kr |
+
+
+ | Provision i alt |
+ 3.685,00 kr |
+
+
+ | Tillæg i alt |
+ 1.056,00 kr |
+
+
+ | Bruttoløn |
+ 34.063,50 kr |
+
+
+
+
+ (Hvis du senere vil have skat/AM-bidrag/nettoløn med, kan det tilføjes som ekstra blok her.)
+
+
+
+
+
+
+
Saldi
+ Ved periodens slut
+
+
+
+
+
+ | Type |
+ Optjent |
+ Afholdt |
+ Rest |
+
+
+
+
+ | Ferie (dage) |
+ 18,5 |
+ 6,0 |
+ 12,5 |
+
+
+ | Afspadsering (timer) |
+ 12,0 |
+ 4,0 |
+ 8,0 |
+
+
+
+
Saldi er opgjort som angivet på lønspecifikationen.
+
+
+
+
+
+
+
Hurtigt resumé
+ Det vigtigste
+
+
+
+
+
+ | Nøglepunkt |
+ Værdi |
+
+
+
+
+ | Normaltimer |
+ 148,0 t |
+
+
+ | Overarbejde |
+ 7,0 t |
+
+
+ | Provision (services + produkter) |
+ 3.685,00 kr |
+
+
+ | Tillæg (aften + lørdag + søndag) |
+ 1.056,00 kr |
+
+
+
+
+
+
+
+
Side 1/2 · Overblik
+
Lønspecifikation · Januar 2026
+
+
+
+
+
+
+
+
Lønspecifikation – Detaljer
+
Periode: Januar 2026 · Medarbejder: Emma Larsen
+
+
+
+
+
+
+
+
Arbejdstid pr. uge
+ Normal + overtid
+
+
+
+
+
+ | Uge |
+ Normaltimer |
+ Overtid |
+ Beløb |
+
+
+
+
+ | Uge 1 (30. dec – 5. jan) |
+ 37,0 t |
+ 2,0 t |
+ 7.400,00 kr |
+
+
+ | Uge 2 (6. – 12. jan) |
+ 37,0 t |
+ 3,5 t |
+ 7.816,25 kr |
+
+
+ | Uge 3 (13. – 19. jan) |
+ 37,0 t |
+ 0,0 t |
+ 6.845,00 kr |
+
+
+ | Uge 4 (20. – 26. jan) |
+ 37,0 t |
+ 1,5 t |
+ 7.261,25 kr |
+
+
+ | I alt |
+ 148,0 t |
+ 7,0 t |
+ 29.322,50 kr |
+
+
+
+
+ Satser: Normal 185,00 kr/time. Overtid (50%) 277,50 kr/time.
+
+
+
+
+
+
+
Provision
+ Services & produkter
+
+
+
+ Services: 15% af omsætning over minimum (220 kr/time).
+ Produkter: 10% af salg.
+
+
+
+
+ | Uge |
+ Service prov. |
+ Produkt prov. |
+ I alt |
+
+
+
+
+ | Uge 1 |
+ 573,00 kr |
+ 210,00 kr |
+ 783,00 kr |
+
+
+ | Uge 2 |
+ 883,50 kr |
+ 320,00 kr |
+ 1.203,50 kr |
+
+
+ | Uge 3 |
+ 459,00 kr |
+ 180,00 kr |
+ 639,00 kr |
+
+
+ | Uge 4 |
+ 769,50 kr |
+ 290,00 kr |
+ 1.059,50 kr |
+
+
+ | I alt |
+ 2.685,00 kr |
+ 1.000,00 kr |
+ 3.685,00 kr |
+
+
+
+
+
+
+
+
+
Tillæg & fravær
+ Opsummering
+
+
+
+
+
+
+
+ | Tillæg |
+ Timer |
+ Beløb |
+
+
+
+
+ | Aftentillæg (hverdage 18–21) |
+ 12,0 |
+ 336,00 kr |
+
+
+ | Lørdagstillæg (før kl. 14) |
+ 16,0 |
+ 720,00 kr |
+
+
+ | Søndagstillæg |
+ 0,0 |
+ 0,00 kr |
+
+
+ | Tillæg i alt |
+ |
+ 1.056,00 kr |
+
+
+
+
+
+
+
+
+
+ | Fravær |
+ Dage |
+ Beløb |
+
+
+
+
+ | Ferie med løn |
+ 0 |
+ 0,00 kr |
+
+
+ | Sygdom |
+ 0 |
+ 0,00 kr |
+
+
+ | Barns sygedag |
+ 0 |
+ 0,00 kr |
+
+
+
+
Ingen fravær registreret i perioden.
+
+
+
+
+
+
+
Side 2/2 · Detaljer
+
Lønspecifikation · Januar 2026
+
+
+
+ Tip: I Chrome/Edge: Ctrl/Cmd + P → Destination: Gem som PDF → slå “Headers and footers” fra.
+
+
+
+
diff --git a/docs/design-system.md b/docs/design-system.md
new file mode 100644
index 0000000..6acead2
--- /dev/null
+++ b/docs/design-system.md
@@ -0,0 +1,221 @@
+# 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
+
+
+ 1
+ 2
+ ...
+
+
+```
+
+---
+
+## Ikoner
+
+Bruger **Phosphor Icons** via CDN:
+```html
+
+
+
+
+```
+
+---
+
+## 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
diff --git a/package-lock.json b/package-lock.json
index d0ad451..6bc1f15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
"dependencies": {
"@novadi/core": "^0.6.0",
"@rollup/rollup-win32-x64-msvc": "^4.52.2",
- "@sevenweirdpeople/swp-charting": "^0.2.1",
+ "@sevenweirdpeople/swp-charting": "^0.2.2",
"dayjs": "^1.11.19",
"fuse.js": "^7.1.0",
"json-diff-ts": "^4.8.2",
@@ -1177,9 +1177,9 @@
]
},
"node_modules/@sevenweirdpeople/swp-charting": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.2.1.tgz",
- "integrity": "sha512-QtY77Dyv4Vs/rWfBVSDTmuxgD4L8tGu4pmTF0l3i8HDwK6qtT2wEtH35UHD1RDFE1VtOGcnU0/dTdqjNWCqzxA==",
+ "version": "0.2.2",
+ "resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.2.2.tgz",
+ "integrity": "sha512-q9p7TOSMAq6I0t6jGEWpmjR7l2H8q8G0TnXbIpDutCz5a2JEqMDFe0NGBGcCwze2rvvRnRvCz8P2zGMQlHmphw==",
"license": "MIT"
},
"node_modules/@types/chai": {
diff --git a/package.json b/package.json
index 36c19f2..8e2f69f 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
"dependencies": {
"@novadi/core": "^0.6.0",
"@rollup/rollup-win32-x64-msvc": "^4.52.2",
- "@sevenweirdpeople/swp-charting": "^0.2.1",
+ "@sevenweirdpeople/swp-charting": "^0.2.2",
"dayjs": "^1.11.19",
"fuse.js": "^7.1.0",
"json-diff-ts": "^4.8.2",
diff --git a/wwwroot/poc-employee.html b/wwwroot/poc-employee.html
index a829540..36b7cbf 100644
--- a/wwwroot/poc-employee.html
+++ b/wwwroot/poc-employee.html
@@ -2266,6 +2266,152 @@
background: color-mix(in srgb, var(--color-teal) 15%, white);
color: var(--color-teal);
}
+
+ /* ==========================================
+ RATES DRAWER
+ ========================================== */
+ swp-drawer-overlay {
+ display: none;
+ position: fixed;
+ inset: 0;
+ background: rgba(0,0,0,0.3);
+ z-index: 999;
+ }
+
+ swp-drawer-overlay.open {
+ display: block;
+ }
+
+ swp-rates-drawer {
+ display: none;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ width: 420px;
+ background: var(--color-surface);
+ box-shadow: -4px 0 20px rgba(0,0,0,0.15);
+ z-index: 1000;
+ flex-direction: column;
+ }
+
+ swp-rates-drawer.open {
+ display: flex;
+ }
+
+ swp-drawer-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 20px;
+ border-bottom: 1px solid var(--color-border);
+ }
+
+ swp-drawer-title {
+ font-size: 16px;
+ font-weight: 600;
+ }
+
+ swp-drawer-close {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px;
+ cursor: pointer;
+ color: var(--color-text-secondary);
+ transition: all 150ms ease;
+ }
+
+ swp-drawer-close:hover {
+ background: var(--color-background);
+ color: var(--color-text);
+ }
+
+ swp-drawer-body {
+ flex: 1;
+ overflow-y: auto;
+ padding: 16px 20px;
+ }
+
+ swp-rate-row {
+ display: grid;
+ grid-template-columns: 28px 1fr 100px;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 0;
+ border-bottom: 1px solid var(--color-border);
+ }
+
+ swp-rate-row:last-child {
+ border-bottom: none;
+ }
+
+ swp-rate-row input[type="checkbox"] {
+ width: 18px;
+ height: 18px;
+ accent-color: var(--color-teal);
+ }
+
+ swp-rate-label {
+ font-size: 14px;
+ }
+
+ swp-rate-label.disabled {
+ opacity: 0.4;
+ }
+
+ swp-rate-input {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 13px;
+ color: var(--color-text-secondary);
+ }
+
+ swp-rate-input input {
+ width: 70px;
+ padding: 6px 8px;
+ border: 1px solid var(--color-border);
+ border-radius: 4px;
+ font-size: 13px;
+ font-family: var(--font-mono);
+ text-align: right;
+ }
+
+ swp-rate-input.disabled input {
+ opacity: 0.4;
+ background: var(--color-background);
+ }
+
+ .btn-link {
+ background: none;
+ border: none;
+ color: var(--color-teal);
+ font-size: 13px;
+ cursor: pointer;
+ padding: 0;
+ }
+
+ .btn-link:hover {
+ text-decoration: underline;
+ }
+
+ swp-card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 12px;
+ }
+
+ swp-card-header swp-section-label {
+ margin-bottom: 0;
+ }
+
+ .mono {
+ font-family: var(--font-mono);
+ }
@@ -2650,35 +2796,24 @@
- Grundløn
+
+ Satser
+
+
- Timeløn
- 185 kr/time
+ Normal (timeløn)
+ 131,49 kr
- Overarbejde
- 150%
+ Overarbejde (100%)
+ 280,50 kr
- Weekendtillæg
- 25%
+ Ferie m. løn
+ 140,25 kr
-
- ATP-bidrag
-
- Ja
- Nej
-
-
-
- Pension (arbejdsgiver)
-
- Ja
- Nej
-
-
@@ -2686,56 +2821,74 @@
Minimum pr. time
- 220 kr
+ 220 kr
På services
- 15%
+ 15%
På produktsalg
- 15%
+ 15%
+
+
+
+
+
+ Tillæg
+
+
+ 8-21 Hverdage
+ 28,03 kr
+
+
+ 8-21 Lørdage
+ 56,02 kr
+
+
+ Søndag
+ 112,07 kr
- Lønhistorik
+ Lønspecifikationer
- | Dato |
- Ændring |
- Ny værdi |
+ Periode |
+ Bruttoløn |
+ |
- | 01.01.2025 |
- Lønforhøjelse |
- 185 kr/time |
+ Januar 2026 |
+ 34.063,50 kr |
+ Vis |
- | 01.01.2024 |
- Lønforhøjelse |
- 175 kr/time |
+ December 2025 |
+ 31.845,00 kr |
+ Vis |
- | 01.07.2023 |
- Provision ændret |
- 12% |
+ November 2025 |
+ 33.290,25 kr |
+ Vis |
- | 01.01.2023 |
- Lønforhøjelse |
- 165 kr/time |
+ Oktober 2025 |
+ 32.156,75 kr |
+ Vis |
- | 01.08.2019 |
- Ansættelse |
- 145 kr/time |
+ September 2025 |
+ 34.520,00 kr |
+ Vis |
@@ -3884,5 +4037,114 @@
});
+
+
+
+
+ Lønsatser
+
+
+
+
+
+ Grundsatser
+
+
+ Normal (timeløn)
+ kr
+
+
+
+ Overarbejde (100%)
+ kr
+
+
+
+ Kursus/skole
+ kr
+
+
+
+ Afspadsering
+ kr
+
+
+
+ Fri m. løn
+ kr
+
+
+
+ Ferie m. løn
+ kr
+
+
+
+ Kontor
+ kr
+
+
+
+ Barns 1. sygedag
+ kr
+
+
+
+ Barns hospitalsindlæggelse
+ kr
+
+
+
+ Barsel
+ kr
+
+
+
+ Tillæg
+
+
+ 8-21 Hverdage (udenfor arbejdstid)
+ kr
+
+
+
+ 8-21 Lørdage (udenfor arbejdstid)
+ kr
+
+
+
+ Søndag
+ kr
+
+
+
+
+ Provisionsberegning
+
+
+ Provision på produktsalg
+ %
+
+
+
+ Provision på servicesalg
+ %
+
+
+
+
+
+
+