diff --git a/wwwroot/poc-customer-detail.html b/wwwroot/poc-customer-detail.html new file mode 100644 index 0000000..20e1bf9 --- /dev/null +++ b/wwwroot/poc-customer-detail.html @@ -0,0 +1,2093 @@ + + + + + + Kundedetaljer - Sofie Nielsen + + + + + + + + + + + Tilbage til kunder + + + + Slet kunde + Gem + + + + + + SN + + + Sofie Nielsen + + VIP × + + Tilføj tag + + + ✓ + Booking tilladt + + + + +45 23 45 67 89 + | + sofie@email.dk + | + Kunde siden marts 2024 + + + + 14 + besøg + + + 32 + dage interval + + + Emma L. + foretrukken frisør + + + 12.450 kr + total omsætning + + + + + + + + Oversigt + Økonomi + Statistik + Journal + Aftaler + Gavekort + + + + + + +
+ +
+ + Kontaktoplysninger + + + Telefon + +45 23 45 67 89 + + + Email + sofie@email.dk + + + Adresse + Hovedgaden 12 + + + Postnr + By + 2100 København Ø + + + + + + Profil + + + Hårtype + Medium · Bølget + + + Porøsitet + Medium + + + Hovedbund + Normal + + + Naturlig farve + Mørkblond (6) + + + +
+ + +
+ + Marketing + + Email marketing + + Ja + Nej + + + + SMS marketing + + Ja + Nej + + + + + + Præferencer + + + Foretrukken frisør + Emma L. + + + Foretrukken dag + Tirsdag/Torsdag + + + Specielle ønsker + Foretrækker kold tone, ikke for mørk + + + + + + Advarsler + + + Allergier / Følsomhed + Parfumeallergi - brug uparfumerede produkter + + + + + + Kundegruppe & Relationer + + + Kundegruppe: + + + Standard + ▼ + + + Standard + Premium + Erhverv + Medarbejder + Familie & Venner + + + + + + + EN + + Emil Nielsen + Barn + + + Åbn + × + + + + + LN + + Luna Nielsen + Barn + + + Åbn + × + + + + + + Tilføj relation + + + +
+
+ + + + +
+ + 12.450 kr + I år (2025) + + + 9.800 kr + Sidste år + + + 889 kr + Gns. pr. besøg + + + 1.038 kr + Gns. pr. måned + +
+ + + + Omsætning over tid + + + + Services + + + + Produkter + + + + + + + + Købshistorik + + + Dato + Type + Beskrivelse + Beløb + + + 9. dec 2025 + Service + Klip + Farve + 1.450 kr + + + 9. dec 2025 + Produkt + Olaplex No. 3 + 349 kr + + + 12. nov 2025 + Service + Farve + 1.200 kr + + + 15. okt 2025 + Service + Klip + 550 kr + + + Se alle transaktioner → + + + + + + + + Fremmøde & Pålidelighed +
+ + 47 + Fremmøder + + + 3 + Aflysninger + + + 1 + No-shows + + + 92% + Pålidelighed + +
+ + 47 + 3 + 1 + + + +
+ + + Booking-adfærd + + + Gns. bookingvarsel + 5 dage + + + Foretrukken dag + Tirsdag + + + Foretrukken tid + 10:00 - 12:00 + + + Online booking rate + 78% + + + Gns. aflysningsvarsel + 2 dage + + + + + + + Loyalitet +
+ + 1,8 år + Kunde siden + + + 13 + Dage siden sidst + + + + + + Lav + + + Churn-risiko + + + 32 dage + Gns. interval + +
+ +
+ + + + Service-mønstre +
+
+ Top 3 Services + + + 1 + Klip + Farve + 12× + + + 2 + Farve + 8× + + + 3 + Klip + 6× + + +
+
+ Top 3 Produkter + + + 1 + Olaplex No. 3 + 5× + + + 2 + Shampoo + 3× + + + 3 + Hårkur + 2× + + +
+
+ + + Services (85%) + Produkter (15%) + + + + + + + + + + + + + Tilføj note + + + + Farveformler + + + + Farveformel + 12. nov 2025 + + + Formel: 7/1 + 7/0 (1:1) · Oxidant 6% · Virketid 35 min
+ Resultat: Flot ensartet farve, kunden meget tilfreds + + — Emma L. + + + + + Farveformel + 15. sep 2025 + + + Formel: 8/0 + 7/1 (2:1) · Oxidant 6% · Virketid 30 min
+ Resultat: Lidt for varm, juster næste gang + + — Emma L. + + + + + + Analyser + + + + Håranalyse + 10. aug 2025 + + + Porøsitet: Medium
+ Elasticitet: Normal
+ Tilstand: Let tørt i spidserne
+ Anbefaling: Fugtgivende behandling hver 6. uge + + — Nina K. + + + + + + Noter + + + + Note + 9. dec 2025 + + + Kunden foretrækker naturlige farver og ønsker lidt ekstra tid til konsultation. Husk at tjekke allergistatus inden farvebehandling. + + — Emma L. + + + + + Advarsel + 15. mar 2024 + + + PARFUMEALLERGI - Brug kun uparfumerede produkter. Havde reaktion på standard shampoo ved første besøg. + + — Nina K. + + + + + + + + Kommende aftaler + + + + Tirsdag 14. januar 2026 kl. 10:00 + + + Klip + Farve · Emma L. · 2 timer + + + Flyt + Aflys + + + + + + Tidligere aftaler + + + Dato + Service + Frisør + Varighed + Pris + + + 9. dec 2025 + Klip + Farve + Emma L. + 2 timer + 1.450 kr + + + 12. nov 2025 + Farve + Emma L. + 1t 30m + 1.200 kr + + + 15. okt 2025 + Klip + Emma L. + 45 min + 550 kr + + + 20. sep 2025 + Klip + Behandling + Nina K. + 1t 15m + 750 kr + + + 15. aug 2025 + Farve + Klip + Emma L. + 2t 15m + 1.600 kr + + + Se alle aftaler → + + + + + + + Aktive gavekort + + + + Gavekort #GK-2024-0892 + + + Saldo: 350 kr (af 500 kr) + + + + + Udløber: 15. marts 2026 + + + + + Klippekort + + + + 10-klip kort + + + Brugt: 7 af 10 klip + + + + + Udløber aldrig + + + + + Udløbne / Brugte + +

Ingen udløbne eller brugte kort

+ + + + + + + + diff --git a/wwwroot/poc-customer-list.html b/wwwroot/poc-customer-list.html index c0cf7a9..4d8ffbd 100644 --- a/wwwroot/poc-customer-list.html +++ b/wwwroot/poc-customer-list.html @@ -603,6 +603,11 @@ text-decoration: underline; } + swp-customer-header-contact swp-customer-tags { + margin-top: 4px; + justify-content: flex-end; + } + /* Fact Boxes */ swp-fact-boxes { display: grid; @@ -721,35 +726,53 @@ color: var(--color-text); } - swp-toggle { - width: 44px; - height: 24px; - background: var(--color-border); - border-radius: 12px; + swp-toggle-slider { + display: flex; position: relative; - cursor: pointer; - transition: background 200ms ease; + background: var(--color-background); + border-radius: 6px; + padding: 3px; + gap: 0; } - swp-toggle::after { + swp-toggle-slider::before { content: ''; position: absolute; - top: 2px; - left: 2px; - width: 20px; - height: 20px; - background: white; - border-radius: 50%; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); - transition: transform 200ms ease; + top: 3px; + left: 3px; + width: calc(50% - 3px); + height: calc(100% - 6px); + background: color-mix(in srgb, var(--color-green) 18%, white); + border-radius: 4px; + transition: transform 200ms ease, background 200ms ease; + z-index: 0; } - swp-toggle.active { - background: var(--color-teal); + swp-toggle-slider[data-value="no"]::before { + transform: translateX(100%); + background: color-mix(in srgb, var(--color-red) 18%, white); } - swp-toggle.active::after { - transform: translateX(20px); + 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 200ms 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; } /* Profile Boxes */ @@ -1154,6 +1177,7 @@ +45 23 45 67 89 sofie@email.dk + @@ -1207,11 +1231,17 @@ Email marketing - + + Ja + Nej + SMS marketing - + + Ja + Nej + @@ -1482,6 +1512,19 @@ document.getElementById('editPhone').value = phone; document.getElementById('editEmail').value = email; + // Update tags + const tags = row.dataset.tags || ''; + const cardTags = document.getElementById('cardTags'); + cardTags.innerHTML = ''; + if (tags) { + tags.split(',').forEach(tag => { + const tagEl = document.createElement('swp-tag'); + tagEl.className = tag.trim(); + tagEl.textContent = tag.trim().charAt(0).toUpperCase() + tag.trim().slice(1); + cardTags.appendChild(tagEl); + }); + } + // Open panel cardOverlay.classList.add('open'); customerCard.classList.add('open'); @@ -1508,6 +1551,18 @@ if (e.key === 'Escape') closeCustomerCard(); }); + // ========================================== + // TOGGLE SLIDER (Ja/Nej) + // ========================================== + document.querySelectorAll('swp-toggle-slider').forEach(slider => { + const options = slider.querySelectorAll('swp-toggle-option'); + options.forEach((option, index) => { + option.addEventListener('click', () => { + slider.dataset.value = index === 0 ? 'yes' : 'no'; + }); + }); + }); + // Chart initialization let chartInitialized = false; function initCustomerChart() {