PlanTempusApp/PlanTempus.Application/Features/Customers/Pages/Detail.cshtml

899 lines
44 KiB
Text
Raw Normal View History

@page "/kunder/{id}"
@model PlanTempus.Application.Features.Customers.Pages.DetailModel
@{
ViewData["Title"] = "Kundedetaljer - Sofie Nielsen";
}
<swp-sticky-header>
<swp-header-content>
<swp-page-header>
<swp-back-link href="/kunder">
<i class="ph ph-arrow-left"></i>
<span>Tilbage til kunder</span>
</swp-back-link>
<swp-page-actions>
<swp-btn class="secondary">
<i class="ph ph-trash"></i>
<span localize="customers.detail.delete">Slet kunde</span>
</swp-btn>
<swp-btn class="primary">
<i class="ph ph-floppy-disk"></i>
<span localize="customers.detail.save">Gem</span>
</swp-btn>
</swp-page-actions>
</swp-page-header>
<swp-customer-detail-header>
<swp-customer-avatar-large>SN</swp-customer-avatar-large>
<swp-customer-detail-info>
<swp-customer-name-row>
<swp-customer-detail-name>Sofie Nielsen</swp-customer-detail-name>
<swp-customer-detail-tags>
<swp-tag class="vip">VIP</swp-tag>
</swp-customer-detail-tags>
<swp-booking-exclusion data-excluded="false">
<i class="ph ph-check icon"></i>
<span>Booking tilladt</span>
</swp-booking-exclusion>
</swp-customer-name-row>
<swp-contact-line>
<a href="tel:+4523456789">+45 23 45 67 89</a>
<span class="separator">|</span>
<a href="mailto:sofie@email.dk">sofie@email.dk</a>
<span class="separator">|</span>
<span>Kunde siden marts 2024</span>
</swp-contact-line>
<swp-fact-boxes-inline>
<swp-fact-inline>
<swp-fact-inline-value>14</swp-fact-inline-value>
<swp-fact-inline-label>besog</swp-fact-inline-label>
</swp-fact-inline>
<swp-fact-inline>
<swp-fact-inline-value>32</swp-fact-inline-value>
<swp-fact-inline-label>dage interval</swp-fact-inline-label>
</swp-fact-inline>
<swp-fact-inline>
<swp-fact-inline-value>Emma L.</swp-fact-inline-value>
<swp-fact-inline-label>foretrukken frisør</swp-fact-inline-label>
</swp-fact-inline>
<swp-fact-inline>
<swp-fact-inline-value>12.450 kr</swp-fact-inline-value>
<swp-fact-inline-label>total omsætning</swp-fact-inline-label>
</swp-fact-inline>
</swp-fact-boxes-inline>
</swp-customer-detail-info>
</swp-customer-detail-header>
</swp-header-content>
<swp-tab-bar>
<swp-tab class="active" data-tab="overview">Oversigt</swp-tab>
<swp-tab data-tab="economy">Økonomi</swp-tab>
<swp-tab data-tab="statistics">Statistik</swp-tab>
<swp-tab data-tab="journal">Journal</swp-tab>
<swp-tab data-tab="appointments">Aftaler</swp-tab>
<swp-tab data-tab="giftcards">Gavekort</swp-tab>
<swp-tab data-tab="activity">Aktivitet</swp-tab>
</swp-tab-bar>
</swp-sticky-header>
<!-- OVERSIGT TAB -->
<swp-tab-content class="active" data-tab="overview">
<swp-page-container>
<swp-detail-grid>
<!-- Left Column -->
<swp-card-column>
<!-- Kontaktoplysninger -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-address-book"></i>
<span localize="customers.detail.contactInfo">Kontaktoplysninger</span>
</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label localize="customers.detail.phone">Telefon</swp-edit-label>
<swp-edit-value contenteditable="true">+45 23 45 67 89</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label localize="customers.detail.email">Email</swp-edit-label>
<swp-edit-value contenteditable="true">sofie@email.dk</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label localize="customers.detail.address">Adresse</swp-edit-label>
<swp-edit-value contenteditable="true">Hovedgaden 12</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label localize="customers.detail.zipCity">Postnr + By</swp-edit-label>
<swp-edit-value contenteditable="true">2100 København Ø</swp-edit-value>
</swp-edit-row>
</swp-edit-section>
</swp-card>
<!-- Profil -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-user-circle"></i>
<span localize="customers.detail.profile">Profil</span>
</swp-card-title>
</swp-card-header>
<swp-profile-boxes>
<swp-profile-box>
<swp-profile-box-label localize="customers.detail.hairType">Hårtype</swp-profile-box-label>
<swp-profile-box-value>Medium - Bolget</swp-profile-box-value>
</swp-profile-box>
<swp-profile-box>
<swp-profile-box-label localize="customers.detail.porosity">Porøsitet</swp-profile-box-label>
<swp-profile-box-value>Medium</swp-profile-box-value>
</swp-profile-box>
<swp-profile-box>
<swp-profile-box-label localize="customers.detail.scalp">Hovedbund</swp-profile-box-label>
<swp-profile-box-value>Normal</swp-profile-box-value>
</swp-profile-box>
<swp-profile-box>
<swp-profile-box-label localize="customers.detail.naturalColor">Naturlig farve</swp-profile-box-label>
<swp-profile-box-value>Mørkblond (6)</swp-profile-box-value>
</swp-profile-box>
</swp-profile-boxes>
</swp-card>
</swp-card-column>
<!-- Right Column -->
<swp-card-column>
<!-- Marketing -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-megaphone"></i>
<span localize="customers.detail.marketing">Marketing</span>
</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<swp-toggle-label localize="customers.detail.emailMarketing">Email marketing</swp-toggle-label>
<swp-toggle-slider data-value="yes">
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-label localize="customers.detail.smsMarketing">SMS marketing</swp-toggle-label>
<swp-toggle-slider data-value="no">
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
</swp-card>
<!-- Betalingsindstillinger -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-credit-card"></i>
<span localize="customers.detail.paymentSettings">Betalingsindstillinger</span>
</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label localize="customers.detail.requirePrepayment">Kræv forudbetaling</swp-toggle-label>
<swp-toggle-desc>Kunden skal betale fuldt belob ved booking</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="no">
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label localize="customers.detail.allowPartialPayment">Tillad delvis betaling</swp-toggle-label>
<swp-toggle-desc>Kunden kan vaelge at betale et depositum</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="no">
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
</swp-card>
<!-- Praeferencer -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-sliders-horizontal"></i>
<span localize="customers.detail.preferences">Præferencer</span>
</swp-card-title>
</swp-card-header>
<swp-profile-boxes>
<swp-profile-box>
<swp-profile-box-label localize="customers.detail.preferredHairdresser">Foretrukken frisør</swp-profile-box-label>
<swp-profile-box-value>Emma L.</swp-profile-box-value>
</swp-profile-box>
<swp-profile-box>
<swp-profile-box-label localize="customers.detail.preferredDay">Foretrukken dag</swp-profile-box-label>
<swp-profile-box-value>Tirsdag/Torsdag</swp-profile-box-value>
</swp-profile-box>
<swp-profile-box class="full-width">
<swp-profile-box-label localize="customers.detail.specialRequests">Specielle ønsker</swp-profile-box-label>
<swp-profile-box-value>Foretraekker kold tone, ikke for mørk</swp-profile-box-value>
</swp-profile-box>
</swp-profile-boxes>
</swp-card>
<!-- Advarsler -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-warning"></i>
<span localize="customers.detail.warnings">Advarsler</span>
</swp-card-title>
</swp-card-header>
<swp-profile-boxes>
<swp-profile-box class="warning full-width">
<swp-profile-box-label localize="customers.detail.allergies">Allergier / Følsomhed</swp-profile-box-label>
<swp-profile-box-value>Parfumeallergi - brug uparfumerede produkter</swp-profile-box-value>
</swp-profile-box>
</swp-profile-boxes>
</swp-card>
<!-- Kundegruppe & Relationer -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-users-three"></i>
<span localize="customers.detail.groupAndRelations">Kundegruppe & Relationer</span>
</swp-card-title>
</swp-card-header>
<swp-customer-group-row>
<swp-customer-group-label>Kundegruppe:</swp-customer-group-label>
<swp-select>
<button type="button">
<swp-select-value>Standard</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
<swp-select-dropdown>
<swp-select-option class="selected" data-value="standard">Standard</swp-select-option>
<swp-select-option data-value="premium">Premium</swp-select-option>
<swp-select-option data-value="erhverv">Erhverv</swp-select-option>
<swp-select-option data-value="medarbejder">Medarbejder</swp-select-option>
<swp-select-option data-value="familie">Familie & Venner</swp-select-option>
</swp-select-dropdown>
</swp-select>
</swp-customer-group-row>
<swp-relations-list>
<swp-relation-item>
<swp-relation-avatar>EN</swp-relation-avatar>
<swp-relation-info>
<swp-relation-name>Emil Nielsen</swp-relation-name>
<swp-relation-type>Barn</swp-relation-type>
</swp-relation-info>
<swp-relation-actions>
<swp-relation-link>Åbn</swp-relation-link>
<swp-relation-remove>&times;</swp-relation-remove>
</swp-relation-actions>
</swp-relation-item>
<swp-relation-item>
<swp-relation-avatar>LN</swp-relation-avatar>
<swp-relation-info>
<swp-relation-name>Luna Nielsen</swp-relation-name>
<swp-relation-type>Barn</swp-relation-type>
</swp-relation-info>
<swp-relation-actions>
<swp-relation-link>Åbn</swp-relation-link>
<swp-relation-remove>&times;</swp-relation-remove>
</swp-relation-actions>
</swp-relation-item>
<swp-add-relation>
<i class="ph ph-plus"></i>
<span>Tilføj relation</span>
</swp-add-relation>
</swp-relations-list>
</swp-card>
</swp-card-column>
</swp-detail-grid>
</swp-page-container>
</swp-tab-content>
<!-- Placeholder for other tabs -->
<swp-tab-content data-tab="economy">
<swp-page-container>
<swp-empty-state>
<i class="ph ph-currency-circle-dollar"></i>
<span>Økonomi tab - kommer snart</span>
</swp-empty-state>
</swp-page-container>
</swp-tab-content>
<swp-tab-content data-tab="statistics">
<swp-page-container>
<swp-detail-grid>
<!-- Fremmøde & Pålidelighed - spans both columns -->
<swp-card class="full-width">
<swp-card-header>
<swp-card-title>Fremmøde & Pålidelighed</swp-card-title>
</swp-card-header>
<div class="grid-4">
<swp-stat-card class="highlight">
<swp-stat-value>47</swp-stat-value>
<swp-stat-label>Fremmøder</swp-stat-label>
</swp-stat-card>
<swp-stat-card class="warning">
<swp-stat-value>3</swp-stat-value>
<swp-stat-label>Aflysninger</swp-stat-label>
</swp-stat-card>
<swp-stat-card class="danger">
<swp-stat-value>1</swp-stat-value>
<swp-stat-label>No-shows</swp-stat-label>
</swp-stat-card>
<swp-stat-card class="success">
<swp-stat-value>92%</swp-stat-value>
<swp-stat-label>Pålidelighed</swp-stat-label>
</swp-stat-card>
</div>
<swp-attendance-bar>
<swp-attendance-segment class="attended" style="width: 92%;">47</swp-attendance-segment>
<swp-attendance-segment class="cancelled" style="width: 6%;">3</swp-attendance-segment>
<swp-attendance-segment class="noshow" style="width: 2%;">1</swp-attendance-segment>
</swp-attendance-bar>
</swp-card>
<!-- Left Column -->
<swp-card-column>
<!-- Service-mønstre -->
<swp-card>
<swp-card-header>
<swp-card-title>Service-mønstre</swp-card-title>
</swp-card-header>
<div class="grid-2">
<div>
<swp-section-label class="small">Top 3 Services</swp-section-label>
<swp-top-list>
<swp-top-item>
<swp-top-rank>1</swp-top-rank>
<swp-top-name>Klip + Farve</swp-top-name>
<swp-top-count>12×</swp-top-count>
</swp-top-item>
<swp-top-item>
<swp-top-rank>2</swp-top-rank>
<swp-top-name>Farve</swp-top-name>
<swp-top-count>8×</swp-top-count>
</swp-top-item>
<swp-top-item>
<swp-top-rank>3</swp-top-rank>
<swp-top-name>Klip</swp-top-name>
<swp-top-count>6×</swp-top-count>
</swp-top-item>
</swp-top-list>
</div>
<div>
<swp-section-label class="small">Top 3 Produkter</swp-section-label>
<swp-top-list>
<swp-top-item>
<swp-top-rank>1</swp-top-rank>
<swp-top-name>Olaplex No. 3</swp-top-name>
<swp-top-count>5×</swp-top-count>
</swp-top-item>
<swp-top-item>
<swp-top-rank>2</swp-top-rank>
<swp-top-name>Shampoo</swp-top-name>
<swp-top-count>3×</swp-top-count>
</swp-top-item>
<swp-top-item>
<swp-top-rank>3</swp-top-rank>
<swp-top-name>Hårkur</swp-top-name>
<swp-top-count>2×</swp-top-count>
</swp-top-item>
</swp-top-list>
</div>
</div>
</swp-card>
</swp-card-column>
<!-- Right Column -->
<swp-card-column>
<!-- Booking-adfærd -->
<swp-card>
<swp-card-header>
<swp-card-title>Booking-adfærd</swp-card-title>
</swp-card-header>
<swp-kv-list>
<swp-kv-row>
<swp-kv-label>Gns. bookingvarsel</swp-kv-label>
<swp-kv-value>5 dage</swp-kv-value>
</swp-kv-row>
<swp-kv-row>
<swp-kv-label>Foretrukken dag</swp-kv-label>
<swp-kv-value>Tirsdag</swp-kv-value>
</swp-kv-row>
<swp-kv-row>
<swp-kv-label>Foretrukken tid</swp-kv-label>
<swp-kv-value>10:00 - 12:00</swp-kv-value>
</swp-kv-row>
<swp-kv-row>
<swp-kv-label>Online booking rate</swp-kv-label>
<swp-kv-value>78%</swp-kv-value>
</swp-kv-row>
<swp-kv-row>
<swp-kv-label>Gns. aflysningsvarsel</swp-kv-label>
<swp-kv-value>2 dage</swp-kv-value>
</swp-kv-row>
</swp-kv-list>
</swp-card>
<!-- Loyalitet -->
<swp-card>
<swp-card-header>
<swp-card-title>Loyalitet</swp-card-title>
</swp-card-header>
<div class="grid-2 compact">
<swp-stat-card>
<swp-stat-value class="small">1,8 år</swp-stat-value>
<swp-stat-label>Kunde siden</swp-stat-label>
</swp-stat-card>
<swp-stat-card class="success">
<swp-stat-value class="small">13</swp-stat-value>
<swp-stat-label>Dage siden sidst</swp-stat-label>
</swp-stat-card>
<swp-stat-card>
<swp-stat-value class="small">
<swp-risk-indicator class="low">
<swp-risk-dot></swp-risk-dot>
<span>Lav</span>
</swp-risk-indicator>
</swp-stat-value>
<swp-stat-label>Churn-risiko</swp-stat-label>
</swp-stat-card>
<swp-stat-card>
<swp-stat-value class="small">32 dage</swp-stat-value>
<swp-stat-label>Gns. interval</swp-stat-label>
</swp-stat-card>
</div>
</swp-card>
</swp-card-column>
</swp-detail-grid>
</swp-page-container>
</swp-tab-content>
<swp-tab-content data-tab="journal">
<swp-page-container>
<!-- Mini Tabs for quick filter -->
<swp-journal-mini-tabs>
<swp-journal-mini-tab class="active">
<span class="tab-dot blue"></span>
Alle
<span class="tab-count">5</span>
</swp-journal-mini-tab>
<swp-journal-mini-tab>
<span class="tab-dot blue"></span>
Noter
<span class="tab-count">2</span>
</swp-journal-mini-tab>
<swp-journal-mini-tab>
<span class="tab-dot amber"></span>
Farveformler
<span class="tab-count">2</span>
</swp-journal-mini-tab>
<swp-journal-mini-tab>
<span class="tab-dot purple"></span>
Analyser
<span class="tab-count">1</span>
</swp-journal-mini-tab>
</swp-journal-mini-tabs>
<swp-detail-grid>
<!-- Left Column -->
<swp-card-column>
<!-- Noter header card -->
<swp-card>
<swp-card-header>
<swp-card-title>
<span class="col-dot blue"></span>
<span>Noter</span>
</swp-card-title>
<swp-section-action>+ Tilføj note</swp-section-action>
</swp-card-header>
<swp-journal-entry>
<swp-journal-entry-header>
<swp-journal-entry-type class="note">Note</swp-journal-entry-type>
<swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
</swp-journal-entry-header>
<swp-journal-entry-body>
Kunden foretrækker naturlige farver og ønsker lidt ekstra tid til konsultation. Husk at tjekke allergistatus inden farvebehandling.
</swp-journal-entry-body>
<swp-journal-entry-footer>
<swp-journal-entry-date>9. dec 2025 · Af: Emma</swp-journal-entry-date>
<swp-journal-entry-visibility>
<i class="ph ph-eye"></i>
<span>Alle</span>
</swp-journal-entry-visibility>
</swp-journal-entry-footer>
</swp-journal-entry>
</swp-card>
<!-- Advarsel note card -->
<swp-card>
<swp-journal-entry>
<swp-journal-entry-header>
<swp-journal-entry-type class="advarsel">Advarsel</swp-journal-entry-type>
<swp-journal-entry-tags>
<swp-journal-tag class="allergi">Allergi</swp-journal-tag>
</swp-journal-entry-tags>
<swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
</swp-journal-entry-header>
<swp-journal-entry-body>
<strong>PARFUMEALLERGI</strong> — Brug kun uparfumerede produkter. Havde reaktion på standard shampoo ved første besøg.
</swp-journal-entry-body>
<swp-journal-entry-footer>
<swp-journal-entry-date>15. mar 2024 · Af: Nina</swp-journal-entry-date>
<swp-journal-entry-visibility class="warning">
<i class="ph ph-warning"></i>
<span>Advarsel</span>
</swp-journal-entry-visibility>
</swp-journal-entry-footer>
</swp-journal-entry>
</swp-card>
<!-- Farveformler card -->
<swp-card>
<swp-card-header>
<swp-card-title>
<span class="col-dot amber"></span>
<span>Farveformler</span>
</swp-card-title>
<swp-section-action>+ Tilføj</swp-section-action>
</swp-card-header>
<swp-journal-entry>
<swp-journal-entry-header>
<swp-journal-entry-type class="farveformel">Farveformel</swp-journal-entry-type>
<swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
</swp-journal-entry-header>
<swp-journal-entry-body>
<span class="label">Måltone:</span> Kold<br>
<span class="label">Oxidant:</span> <span class="mono">6%</span><br>
<span class="label">Formel:</span> <span class="mono">7/1 + 7/0 (1:1)</span><br>
<span class="label">Virketid:</span> <span class="mono">35 min</span><br>
<span class="label">Placering:</span> Hele håret<br><br>
Resultat: Flot ensartet farve, kunden meget tilfreds
</swp-journal-entry-body>
<swp-journal-entry-footer>
<swp-journal-entry-date>12. nov 2025 · Af: Emma</swp-journal-entry-date>
</swp-journal-entry-footer>
</swp-journal-entry>
</swp-card>
</swp-card-column>
<!-- Right Column -->
<swp-card-column>
<!-- Analyser card -->
<swp-card>
<swp-card-header>
<swp-card-title>
<span class="col-dot purple"></span>
<span>Analyser</span>
</swp-card-title>
<swp-section-action>+ Tilføj</swp-section-action>
</swp-card-header>
<swp-journal-entry>
<swp-journal-entry-header>
<swp-journal-entry-type class="analyse">Håranalyse</swp-journal-entry-type>
<swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
</swp-journal-entry-header>
<swp-journal-entry-body>
<span class="label">Tilstand:</span> God, let tørt i spidserne<br>
<span class="label">Porøsitet:</span> Medium<br>
<span class="label">Elasticitet:</span> Normal<br><br>
Anbefaling: Olaplex behandling hver 6. uge
</swp-journal-entry-body>
<swp-journal-entry-footer>
<swp-journal-entry-date>1. okt 2025 · Af: Maria</swp-journal-entry-date>
</swp-journal-entry-footer>
</swp-journal-entry>
</swp-card>
</swp-card-column>
</swp-detail-grid>
</swp-page-container>
</swp-tab-content>
<swp-tab-content data-tab="appointments">
<swp-page-container>
<swp-detail-grid>
<!-- Left Column -->
<swp-card-column>
<!-- Kommende aftaler -->
<swp-card>
<swp-card-header>
<swp-card-title>Kommende aftaler</swp-card-title>
</swp-card-header>
<swp-appointment-card>
<swp-appointment-date>
Tirsdag 14. januar 2026 kl. 10:00
</swp-appointment-date>
<swp-appointment-details>
Klip + Farve · Emma L. · 2 timer
</swp-appointment-details>
<swp-appointment-actions>
<swp-btn class="secondary">Flyt</swp-btn>
<swp-btn class="secondary">Aflys</swp-btn>
</swp-appointment-actions>
</swp-appointment-card>
</swp-card>
</swp-card-column>
<!-- Right Column -->
<swp-card-column>
<!-- Tidligere aftaler -->
<swp-card>
<swp-card-header>
<swp-card-title>Tidligere aftaler</swp-card-title>
</swp-card-header>
<swp-table>
<swp-table-header>
<span>Dato</span>
<span>Service</span>
<span>Frisør</span>
<span>Varighed</span>
<span>Pris</span>
</swp-table-header>
<swp-table-row>
<span>9. dec 2025</span>
<span>Klip + Farve</span>
<span>Emma L.</span>
<span>2 timer</span>
<span class="mono">1.450 kr</span>
</swp-table-row>
<swp-table-row>
<span>12. nov 2025</span>
<span>Farve</span>
<span>Emma L.</span>
<span>1t 30m</span>
<span class="mono">1.200 kr</span>
</swp-table-row>
<swp-table-row>
<span>15. okt 2025</span>
<span>Klip</span>
<span>Emma L.</span>
<span>45 min</span>
<span class="mono">550 kr</span>
</swp-table-row>
<swp-table-row>
<span>20. sep 2025</span>
<span>Klip + Behandling</span>
<span>Nina K.</span>
<span>1t 15m</span>
<span class="mono">750 kr</span>
</swp-table-row>
<swp-table-row>
<span>15. aug 2025</span>
<span>Farve + Klip</span>
<span>Emma L.</span>
<span>2t 15m</span>
<span class="mono">1.600 kr</span>
</swp-table-row>
</swp-table>
<swp-see-all>Se alle aftaler →</swp-see-all>
</swp-card>
</swp-card-column>
</swp-detail-grid>
</swp-page-container>
</swp-tab-content>
<swp-tab-content data-tab="giftcards">
<swp-page-container>
<swp-detail-grid>
<!-- Left Column -->
<swp-card-column>
<!-- Aktive gavekort -->
<swp-card>
<swp-card-header>
<swp-card-title>Aktive gavekort</swp-card-title>
</swp-card-header>
<swp-giftcard>
<swp-giftcard-header>
Gavekort #GK-2024-0892
</swp-giftcard-header>
<swp-giftcard-balance>
Saldo: <strong>350 kr</strong> (af 500 kr)
</swp-giftcard-balance>
<swp-progress-bar>
<swp-progress-fill style="width: 70%;"></swp-progress-fill>
</swp-progress-bar>
<swp-giftcard-expires>Udløber: 15. marts 2026</swp-giftcard-expires>
</swp-giftcard>
</swp-card>
<!-- Klippekort -->
<swp-card>
<swp-card-header>
<swp-card-title>Klippekort</swp-card-title>
</swp-card-header>
<swp-giftcard>
<swp-giftcard-header>
10-klip kort
</swp-giftcard-header>
<swp-giftcard-balance>
Brugt: <strong>7 af 10</strong> klip
</swp-giftcard-balance>
<swp-progress-bar>
<swp-progress-fill style="width: 70%;"></swp-progress-fill>
</swp-progress-bar>
<swp-giftcard-expires>Udløber aldrig</swp-giftcard-expires>
</swp-giftcard>
</swp-card>
</swp-card-column>
<!-- Right Column -->
<swp-card-column>
<!-- Udløbne / Brugte -->
<swp-card>
<swp-card-header>
<swp-card-title>Udløbne / Brugte</swp-card-title>
</swp-card-header>
<swp-empty-state>
<p>Ingen udløbne eller brugte kort</p>
</swp-empty-state>
</swp-card>
</swp-card-column>
</swp-detail-grid>
</swp-page-container>
</swp-tab-content>
<swp-tab-content data-tab="activity">
<swp-page-container>
<!-- Filters -->
<swp-activity-filters>
<swp-activity-filter class="active">Alle</swp-activity-filter>
<swp-activity-filter><i class="ph ph-calendar"></i> Bookinger</swp-activity-filter>
<swp-activity-filter><i class="ph ph-envelope"></i> Kommunikation</swp-activity-filter>
<swp-activity-filter><i class="ph ph-pencil-simple"></i> Ændringer</swp-activity-filter>
<swp-activity-filter><i class="ph ph-credit-card"></i> Betalinger</swp-activity-filter>
<swp-activity-filter><i class="ph ph-key"></i> Login</swp-activity-filter>
</swp-activity-filters>
<swp-card>
<swp-activity-timeline>
<!-- I dag -->
<swp-activity-date-group>
<swp-activity-date-header>I dag</swp-activity-date-header>
<swp-activity-item>
<swp-activity-icon class="communication"><i class="ph ph-chat-text"></i></swp-activity-icon>
<swp-activity-content>
<swp-activity-title>
<strong>SMS påmindelse</strong> sendt om aftale i morgen
<swp-activity-badge class="auto">Auto</swp-activity-badge>
</swp-activity-title>
<swp-activity-meta>
<swp-activity-time>14:00</swp-activity-time>
<swp-activity-actor>System</swp-activity-actor>
</swp-activity-meta>
</swp-activity-content>
</swp-activity-item>
<swp-activity-item>
<swp-activity-icon class="customer"><i class="ph ph-key"></i></swp-activity-icon>
<swp-activity-content>
<swp-activity-title>
Kunde <strong>loggede ind</strong> via online booking
<swp-activity-badge class="online">Online</swp-activity-badge>
</swp-activity-title>
<swp-activity-meta>
<swp-activity-time>09:15</swp-activity-time>
</swp-activity-meta>
</swp-activity-content>
</swp-activity-item>
</swp-activity-date-group>
<!-- 9. december 2025 -->
<swp-activity-date-group>
<swp-activity-date-header>9. december 2025</swp-activity-date-header>
<swp-activity-item>
<swp-activity-icon class="booking"><i class="ph ph-check-circle"></i></swp-activity-icon>
<swp-activity-content>
<swp-activity-title>
<strong>Booking gennemført</strong>
</swp-activity-title>
<swp-activity-meta>
<swp-activity-time>12:30</swp-activity-time>
<swp-activity-actor>Farve + Behandling · Emma L.</swp-activity-actor>
</swp-activity-meta>
</swp-activity-content>
</swp-activity-item>
<swp-activity-item>
<swp-activity-icon class="edit"><i class="ph ph-note-pencil"></i></swp-activity-icon>
<swp-activity-content>
<swp-activity-title>
<strong>Note tilføjet</strong> — Farveformel opdateret
</swp-activity-title>
<swp-activity-meta>
<swp-activity-time>12:45</swp-activity-time>
<swp-activity-actor>Emma L.</swp-activity-actor>
</swp-activity-meta>
</swp-activity-content>
</swp-activity-item>
</swp-activity-date-group>
<!-- 15. november 2025 -->
<swp-activity-date-group>
<swp-activity-date-header>15. november 2025</swp-activity-date-header>
<swp-activity-item>
<swp-activity-icon class="warning"><i class="ph ph-warning"></i></swp-activity-icon>
<swp-activity-content>
<swp-activity-title>
<strong>Allergi registreret</strong> — Parfumeallergi tilføjet til profil
</swp-activity-title>
<swp-activity-meta>
<swp-activity-time>10:00</swp-activity-time>
<swp-activity-actor>Nina K.</swp-activity-actor>
</swp-activity-meta>
</swp-activity-content>
</swp-activity-item>
</swp-activity-date-group>
<!-- 1. marts 2024 -->
<swp-activity-date-group>
<swp-activity-date-header>1. marts 2024</swp-activity-date-header>
<swp-activity-item>
<swp-activity-icon class="customer"><i class="ph ph-user-plus"></i></swp-activity-icon>
<swp-activity-content>
<swp-activity-title>
<strong>Kunde oprettet</strong> via online booking
</swp-activity-title>
<swp-activity-meta>
<swp-activity-time>14:22</swp-activity-time>
<swp-activity-actor>System</swp-activity-actor>
</swp-activity-meta>
</swp-activity-content>
</swp-activity-item>
</swp-activity-date-group>
</swp-activity-timeline>
</swp-card>
</swp-page-container>
</swp-tab-content>
@section Scripts {
<script>
// Tab switching
document.querySelectorAll('swp-tab').forEach(tab => {
tab.addEventListener('click', () => {
const tabName = tab.dataset.tab;
// Update tab active state
document.querySelectorAll('swp-tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
// Update content visibility
document.querySelectorAll('swp-tab-content').forEach(content => {
content.classList.remove('active');
if (content.dataset.tab === tabName) {
content.classList.add('active');
}
});
});
});
// Booking exclusion toggle (feature-specific)
const bookingExclusion = document.querySelector('swp-booking-exclusion');
if (bookingExclusion) {
bookingExclusion.addEventListener('click', () => {
const isExcluded = bookingExclusion.dataset.excluded === 'true';
bookingExclusion.dataset.excluded = isExcluded ? 'false' : 'true';
const icon = bookingExclusion.querySelector('.icon');
const text = bookingExclusion.querySelector('span:not(.icon)');
if (isExcluded) {
icon.className = 'ph ph-check icon';
text.textContent = 'Booking tilladt';
} else {
icon.className = 'ph ph-x icon';
text.textContent = 'Booking blokeret';
}
});
}
</script>
}