Adds comprehensive customer detail view components
Implements full customer detail page with multiple feature-rich components including overview, economy, statistics, journal, appointments, giftcards, and activity sections Creates reusable ViewComponents for different customer detail aspects with robust data modeling and presentation logic
This commit is contained in:
Janus C. H. Knudsen
parent
38e9243bcd
commit
1b25978d9b
26 changed files with 3792 additions and 956 deletions
|
|
@ -1,898 +1,7 @@
|
|||
@page "/kunder/{id}"
|
||||
@model PlanTempus.Application.Features.Customers.Pages.DetailModel
|
||||
@{
|
||||
ViewData["Title"] = "Kundedetaljer - Sofie Nielsen";
|
||||
ViewData["Title"] = "Kundedetaljer";
|
||||
}
|
||||
|
||||
<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" localize="customers.detail.tabs.activitylog">Aktivitetslog</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>
|
||||
}
|
||||
@await Component.InvokeAsync("CustomerDetailView", Model.Id)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue