cd7acaf490
Improves customer page UI with interactive elements: - Adds quick view sidebar button for each customer row - Implements row-level navigation to customer details - Corrects Danish spelling and typography - Refactors data table layout for better usability Modernizes customer interaction by enabling direct page navigation and quick information access
898 lines
44 KiB
Text
898 lines
44 KiB
Text
@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>×</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>×</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>
|
||
}
|