From 0fa5b60a6b54a0ea712c46eb083dc287832df6ab Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Tue, 30 Dec 2025 20:20:57 +0100 Subject: [PATCH] Enhance POC dashboard with dynamic UI components Adds comprehensive dashboard HTML with responsive design and interactive elements Implements: - Dark/light mode color variables - Responsive grid layout - Interactive booking and notification sections - Dynamic time and status tracking - Custom web components for dashboard functionality --- wwwroot/poc-dashboard.html | 1385 ++++++++++++++++++++++++++++++ wwwroot/poc-gavekort-detail.html | 346 +++++++- 2 files changed, 1714 insertions(+), 17 deletions(-) create mode 100644 wwwroot/poc-dashboard.html diff --git a/wwwroot/poc-dashboard.html b/wwwroot/poc-dashboard.html new file mode 100644 index 0000000..e0132bd --- /dev/null +++ b/wwwroot/poc-dashboard.html @@ -0,0 +1,1385 @@ + + + + + + Dashboard - Salon OS + + + + + + + + + Dashboard + + + + + Mandag, 30. december 2024 + + + + Ny booking + + + + + + + + + 4 / 12 + Bookinger gennemført + + + 8 tilbage i dag + + + + 8.450 kr + Forventet omsætning + + + +12% vs. gennemsnit + + + + 78% + Belægningsgrad + + + God kapacitet + + + + 3 + Kræver opmærksomhed + + + + + + + + + + + + AI Analyse + + + Godt i gang! 4 af 12 bookinger er gennemført. 2 er i gang nu, og 6 venter. + Forventet omsætning: 8.450 kr – allerede realiseret 2.150 kr. + Tip: Ida Rasmussen (11:30) har ikke bekræftet – overvej at sende en påmindelse. + + + + + + + + + + Dagens bookinger + + Se alle + + + + + Nu: 10:45 + + + + + + + 08:00 + 08:30 + + + + Herreklip + Thomas Berg + + + MH + Maria + + Gennemført + + + + + 08:30 + 09:00 + + + + Dameklip + Katrine Holm + + + AS + Anna + + Gennemført + + + + + 09:00 + 09:30 + + + + Skægtrimning + Mikkel Skov + + + PK + Peter + + Gennemført + + + + + 09:00 + 10:30 + + + + Dameklip + Farve + Sofie Nielsen + + + AS + Anna + + Gennemført + + + + + + 10:30 + 11:00 + + + + Herreklip + Jonas Petersen + + + MH + Maria + + I gang + + + + + 10:00 + 11:00 + + + + Føn + Styling + Rikke Dam + + + LJ + Louise + + I gang + + + + + + 11:00 + 12:00 + + + + Balayage + Emma Christensen + + + AS + Anna + + Bekræftet + + + + + 11:30 + 12:00 + + + + Dameklip + Ida Rasmussen + + + MH + Maria + + Afventer + + + + + 13:00 + 14:00 + + + + Farve + Føn + Louise Andersen + + + AS + Anna + + Bekræftet + + + + + 14:00 + 14:30 + + + + Herreklip + Anders Møller + + + PK + Peter + + Bekræftet + + + + + 15:30 + 16:30 + + + + Extensions + Julie Lund + + + LJ + Louise + + Bekræftet + + + + + + + + + + Opmærksomheder + + + + + + + + + + Aflyst booking + Mette Hansen aflyste kl. 15:00 – tid nu ledig + + Fyld tid + + + + + + + + Ubekræftet booking + Ida Rasmussen har ikke bekræftet kl. 11:30 + + Send påmindelse + + + + + + + + Gavekort udløber snart + GC-D2R4-6TY9 udløber om 3 uger (200 DKK) + + Se gavekort + + + + + + + + + + + + + Notifikationer + + Marker alle som læst + + + + + + + + + + Ny booking fra Emma Christensen til Balayage + + For 15 min. siden + + + + + + + + + + Ny anmeldelse – 5 stjerner fra Sofie Nielsen + + For 1 time siden + + + + + + + + + + Aflysning – Mette Hansen aflyste kl. 15:00 + + For 2 timer siden + + + + + + + + + + Bekræftet – Louise Andersen bekræftede kl. 13:00 + + I går kl. 18:30 + + + + + + + + + + + Denne uge + + + + + + 47 + Bookinger + + + 38.200 kr + Omsætning + + + 8 + Nye kunder + + + 72% + Gns. belægning + + + + + + + + + + Medarbejdere + + + + + + AS + + Anna Sørensen + Ledig til kl. 11:00 (Balayage) + + Ledig + + + + MH + + Maria Hansen + Herreklip med Jonas + + Optaget + + + + LJ + + Louise Jensen + Føn + Styling med Rikke + + Optaget + + + + PK + + Peter Kristensen + Ledig til kl. 14:00 + + Ledig + + + + + + + + + + diff --git a/wwwroot/poc-gavekort-detail.html b/wwwroot/poc-gavekort-detail.html index 013d74c..970c620 100644 --- a/wwwroot/poc-gavekort-detail.html +++ b/wwwroot/poc-gavekort-detail.html @@ -898,6 +898,172 @@ min-height: 100px; } + /* ========================================== + ADD VALUE DRAWER + ========================================== */ + swp-balance-info-box { + display: block; + padding: 16px; + background: var(--color-background-alt); + border-radius: 6px; + } + + swp-balance-info-box swp-current-amount { + display: block; + font-size: 24px; + font-weight: 700; + font-family: var(--font-mono); + color: var(--color-text); + } + + swp-balance-info-box swp-original-amount { + display: block; + font-size: 13px; + color: var(--color-text-secondary); + margin-top: 4px; + } + + swp-new-balance-box { + display: block; + padding: 16px; + background: color-mix(in srgb, var(--color-green) 10%, transparent); + border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent); + border-radius: 6px; + } + + swp-new-balance-box swp-new-amount { + display: block; + font-size: 24px; + font-weight: 700; + font-family: var(--font-mono); + color: var(--color-green); + } + + swp-new-balance-box swp-new-label { + display: block; + font-size: 13px; + color: var(--color-text-secondary); + margin-top: 4px; + } + + swp-quick-amounts { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 8px; + } + + swp-quick-amount { + padding: 8px 16px; + border: 1px solid var(--color-border); + border-radius: 6px; + font-size: 13px; + font-family: var(--font-mono); + background: var(--color-surface); + color: var(--color-text); + cursor: pointer; + transition: all 150ms ease; + } + + swp-quick-amount:hover { + background: var(--color-background-hover); + border-color: var(--color-teal); + } + + swp-quick-amount.selected { + background: color-mix(in srgb, var(--color-teal) 10%, transparent); + border-color: var(--color-teal); + color: var(--color-teal); + } + + /* Toggle Slider (Ja/Nej) */ + swp-toggle-slider { + display: inline-flex; + width: fit-content; + background: var(--color-background); + border-radius: 6px; + border: 1px solid var(--color-border); + overflow: hidden; + position: relative; + } + + swp-toggle-slider::before { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: calc(50% - 4px); + height: calc(100% - 4px); + background: color-mix(in srgb, var(--color-green) 18%, white); + border-radius: 4px; + transition: transform 200ms ease, background 200ms ease; + } + + swp-toggle-slider[data-value="no"]::before { + transform: translateX(100%); + background: color-mix(in srgb, var(--color-red) 18%, white); + } + + swp-toggle-option { + position: relative; + z-index: 1; + padding: 5px 16px; + font-size: 12px; + font-weight: 500; + color: var(--color-text-secondary); + cursor: pointer; + transition: color 150ms ease; + user-select: none; + } + + swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child { + color: var(--color-green); + font-weight: 600; + } + + swp-toggle-slider[data-value="no"] swp-toggle-option:last-child { + color: var(--color-red); + font-weight: 600; + } + + swp-date-extend { + display: flex; + flex-direction: column; + gap: 10px; + } + + swp-current-expiry { + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; + color: var(--color-text-secondary); + } + + swp-current-expiry i { + font-size: 16px; + } + + swp-current-expiry strong { + color: var(--color-text); + } + + swp-date-extend input[type="date"] { + padding: 10px 12px; + border: 1px solid var(--color-border); + border-radius: 6px; + font-size: 14px; + font-family: var(--font-family); + background: var(--color-surface); + color: var(--color-text); + transition: border-color 150ms ease; + } + + swp-date-extend input[type="date"]:focus { + outline: none; + border-color: var(--color-teal); + } + /* ========================================== RESPONSIVE ========================================== */ @@ -948,20 +1114,12 @@ Udløbsdato 31. december 2025 - - - Forlæng - - - - Deaktiver - - - - Tilføj værdi + + + Juster @@ -997,6 +1155,15 @@ Original værdi 500 DKK + + Aktiv + + + Ja + Nej + + + @@ -1141,6 +1308,69 @@ + + + + Juster gavekort + + + + + + + + Nuværende saldo + + 350 DKK + af 500 DKK original værdi + + + + + Beløb at tilføje + + + 50 DKK + 100 DKK + 200 DKK + 500 DKK + + + + + Ny saldo + + 450 DKK + Efter tilføjelse + + + + + Forlæng udløbsdato (valgfri) + + + + Nuværende: 31. december 2025 + + + + + + + Intern note + + + + + + Annuller + + + Gem ændringer + + + +