Adds customer details drawer to customers list page
Enhances customer management with interactive drawer Introduces detailed customer profile view with metadata Implements search functionality and dynamic drawer population Improves user experience for customer information exploration
This commit is contained in:
Janus C. H. Knudsen
parent
65ad9aacdf
commit
0a431c8db4
8 changed files with 694 additions and 15 deletions
|
|
@ -61,7 +61,7 @@
|
|||
<swp-data-table-cell localize="customers.column.tags">Tags</swp-data-table-cell>
|
||||
</swp-data-table-header>
|
||||
|
||||
<swp-data-table-row data-name="Anna Jensen">
|
||||
<swp-data-table-row data-name="Anna Jensen" data-visits="6" data-created="2024-09" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar>AJ</swp-avatar>
|
||||
<span>Anna Jensen</span>
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
<swp-data-table-cell></swp-data-table-cell>
|
||||
</swp-data-table-row>
|
||||
|
||||
<swp-data-table-row data-name="Camilla Holm">
|
||||
<swp-data-table-row data-name="Camilla Holm" data-visits="25" data-created="2022-12" data-tags="vip" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar>CH</swp-avatar>
|
||||
<span>Camilla Holm</span>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
</swp-data-table-cell>
|
||||
</swp-data-table-row>
|
||||
|
||||
<swp-data-table-row data-name="Emma Larsen">
|
||||
<swp-data-table-row data-name="Emma Larsen" data-visits="8" data-created="2024-06" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar>EL</swp-avatar>
|
||||
<span>Emma Larsen</span>
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
<swp-data-table-cell></swp-data-table-cell>
|
||||
</swp-data-table-row>
|
||||
|
||||
<swp-data-table-row data-name="Freja Christensen">
|
||||
<swp-data-table-row data-name="Freja Christensen" data-visits="31" data-created="2022-08" data-tags="vip,allergi" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar>FC</swp-avatar>
|
||||
<span>Freja Christensen</span>
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
</swp-data-table-cell>
|
||||
</swp-data-table-row>
|
||||
|
||||
<swp-data-table-row data-name="Ida Andersen">
|
||||
<swp-data-table-row data-name="Ida Andersen" data-visits="3" data-created="2025-10" data-tags="ny" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar>IA</swp-avatar>
|
||||
<span>Ida Andersen</span>
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
</swp-data-table-cell>
|
||||
</swp-data-table-row>
|
||||
|
||||
<swp-data-table-row data-name="Katrine Berg">
|
||||
<swp-data-table-row data-name="Katrine Berg" data-visits="12" data-created="2024-04" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar>KB</swp-avatar>
|
||||
<span>Katrine Berg</span>
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
<swp-data-table-cell></swp-data-table-cell>
|
||||
</swp-data-table-row>
|
||||
|
||||
<swp-data-table-row data-name="Line Frost">
|
||||
<swp-data-table-row data-name="Line Frost" data-visits="9" data-created="2024-05" data-tags="sensitiv" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar>LF</swp-avatar>
|
||||
<span>Line Frost</span>
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
</swp-data-table-cell>
|
||||
</swp-data-table-row>
|
||||
|
||||
<swp-data-table-row data-name="Louise Hansen">
|
||||
<swp-data-table-row data-name="Louise Hansen" data-visits="18" data-created="2023-02" data-tags="stamkunde" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar class="purple">LH</swp-avatar>
|
||||
<span>Louise Hansen</span>
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
</swp-data-table-cell>
|
||||
</swp-data-table-row>
|
||||
|
||||
<swp-data-table-row data-name="Maja Petersen">
|
||||
<swp-data-table-row data-name="Maja Petersen" data-visits="22" data-created="2023-01" data-tags="stamkunde" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar class="blue">MP</swp-avatar>
|
||||
<span>Maja Petersen</span>
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
</swp-data-table-cell>
|
||||
</swp-data-table-row>
|
||||
|
||||
<swp-data-table-row data-name="Maria Olsen">
|
||||
<swp-data-table-row data-name="Maria Olsen" data-visits="2" data-created="2025-11" data-tags="ny" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar class="amber">MO</swp-avatar>
|
||||
<span>Maria Olsen</span>
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
</swp-data-table-cell>
|
||||
</swp-data-table-row>
|
||||
|
||||
<swp-data-table-row data-name="Rikke Skov">
|
||||
<swp-data-table-row data-name="Rikke Skov" data-visits="4" data-created="2025-08" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar>RS</swp-avatar>
|
||||
<span>Rikke Skov</span>
|
||||
|
|
@ -230,7 +230,7 @@
|
|||
<swp-data-table-cell></swp-data-table-cell>
|
||||
</swp-data-table-row>
|
||||
|
||||
<swp-data-table-row data-name="Sofie Nielsen">
|
||||
<swp-data-table-row data-name="Sofie Nielsen" data-visits="14" data-created="2024-03" data-tags="vip" data-drawer-trigger="customer-drawer">
|
||||
<swp-data-table-cell>
|
||||
<swp-avatar>SN</swp-avatar>
|
||||
<span>Sofie Nielsen</span>
|
||||
|
|
@ -253,3 +253,160 @@
|
|||
</swp-empty-state>
|
||||
</swp-card>
|
||||
</swp-page-container>
|
||||
|
||||
<!-- Customer Drawer -->
|
||||
<div id="customer-drawer" data-drawer="xxl">
|
||||
<swp-drawer-header>
|
||||
<swp-drawer-title>
|
||||
<i class="ph ph-user"></i>
|
||||
<span localize="customers.drawer.title">Kundekort</span>
|
||||
</swp-drawer-title>
|
||||
<swp-drawer-close data-drawer-close>
|
||||
<i class="ph ph-x"></i>
|
||||
</swp-drawer-close>
|
||||
</swp-drawer-header>
|
||||
|
||||
<swp-drawer-body>
|
||||
<!-- Customer Header -->
|
||||
<swp-customer-header>
|
||||
<swp-customer-avatar-large id="drawerAvatar">SN</swp-customer-avatar-large>
|
||||
<swp-customer-header-info>
|
||||
<swp-customer-header-top>
|
||||
<swp-customer-header-left>
|
||||
<swp-customer-header-name id="drawerName">Sofie Nielsen</swp-customer-header-name>
|
||||
<swp-customer-since id="drawerSince">Kunde siden marts 2024</swp-customer-since>
|
||||
</swp-customer-header-left>
|
||||
<swp-customer-header-contact>
|
||||
<a href="tel:+4523456789" id="drawerPhoneLink">+45 23 45 67 89</a>
|
||||
<a href="mailto:sofie@email.dk" id="drawerEmailLink">sofie@email.dk</a>
|
||||
<swp-customer-tags id="drawerTags"></swp-customer-tags>
|
||||
</swp-customer-header-contact>
|
||||
</swp-customer-header-top>
|
||||
</swp-customer-header-info>
|
||||
</swp-customer-header>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<swp-quick-stats class="cols-3">
|
||||
<swp-quick-stat>
|
||||
<swp-stat-value id="drawerVisits">14</swp-stat-value>
|
||||
<swp-stat-label localize="customers.drawer.visits">Besøg</swp-stat-label>
|
||||
</swp-quick-stat>
|
||||
<swp-quick-stat>
|
||||
<swp-stat-value id="drawerInterval">32 dage</swp-stat-value>
|
||||
<swp-stat-label localize="customers.drawer.avgInterval">Gns. interval</swp-stat-label>
|
||||
</swp-quick-stat>
|
||||
<swp-quick-stat>
|
||||
<swp-stat-value id="drawerHairdresser">Emma L.</swp-stat-value>
|
||||
<swp-stat-label localize="customers.drawer.preferredHairdresser">Foretrukken frisør</swp-stat-label>
|
||||
</swp-quick-stat>
|
||||
</swp-quick-stats>
|
||||
|
||||
<!-- Contact Info (Editable) -->
|
||||
<div>
|
||||
<swp-section-label localize="customers.drawer.contactInfo">Kontaktoplysninger</swp-section-label>
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label localize="customers.drawer.phone">Telefon</swp-edit-label>
|
||||
<swp-edit-input><input type="tel" id="editPhone" value="+45 23 45 67 89"></swp-edit-input>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label localize="customers.drawer.email">Email</swp-edit-label>
|
||||
<swp-edit-input><input type="email" id="editEmail" value="sofie@email.dk"></swp-edit-input>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label localize="customers.drawer.address">Adresse</swp-edit-label>
|
||||
<swp-edit-input><input type="text" id="editAddress" value="Hovedgaden 12"></swp-edit-input>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label localize="customers.drawer.zipCity">Postnr + By</swp-edit-label>
|
||||
<swp-edit-input>
|
||||
<input type="text" id="editZip" value="2100" class="short">
|
||||
<input type="text" id="editCity" value="København Ø">
|
||||
</swp-edit-input>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
</div>
|
||||
|
||||
<!-- Marketing Opt-in -->
|
||||
<div>
|
||||
<swp-section-label localize="customers.drawer.marketing">Marketing</swp-section-label>
|
||||
<swp-marketing-section>
|
||||
<swp-toggle-row>
|
||||
<swp-toggle-label localize="customers.drawer.emailMarketing">Email marketing</swp-toggle-label>
|
||||
<swp-toggle-slider id="toggleEmail" 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.drawer.smsMarketing">SMS marketing</swp-toggle-label>
|
||||
<swp-toggle-slider id="toggleSms" 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-marketing-section>
|
||||
</div>
|
||||
|
||||
<!-- Profile Boxes -->
|
||||
<div>
|
||||
<swp-section-label localize="customers.drawer.profile">Profil</swp-section-label>
|
||||
<swp-profile-boxes>
|
||||
<swp-profile-box>
|
||||
<swp-profile-box-label localize="customers.drawer.hairType">Hårtype</swp-profile-box-label>
|
||||
<swp-profile-box-value>Medium · Bølget</swp-profile-box-value>
|
||||
</swp-profile-box>
|
||||
<swp-profile-box>
|
||||
<swp-profile-box-label localize="customers.drawer.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.drawer.preference">Præference</swp-profile-box-label>
|
||||
<swp-profile-box-value>Kold tone, ikke for mørk</swp-profile-box-value>
|
||||
</swp-profile-box>
|
||||
<swp-profile-box class="warning">
|
||||
<swp-profile-box-label localize="customers.drawer.warnings">Advarsler</swp-profile-box-label>
|
||||
<swp-profile-box-value>Parfume-allergi</swp-profile-box-value>
|
||||
</swp-profile-box>
|
||||
</swp-profile-boxes>
|
||||
</div>
|
||||
|
||||
<!-- Chart -->
|
||||
<swp-chart-section>
|
||||
<swp-chart-header>
|
||||
<swp-section-label style="margin-bottom: 0;" localize="customers.drawer.revenueChart">Omsætning (sidste 6 mdr)</swp-section-label>
|
||||
<swp-chart-legend>
|
||||
<swp-chart-legend-item>
|
||||
<swp-chart-legend-dot class="services"></swp-chart-legend-dot>
|
||||
<span localize="customers.drawer.services">Services</span>
|
||||
</swp-chart-legend-item>
|
||||
<swp-chart-legend-item>
|
||||
<swp-chart-legend-dot class="products"></swp-chart-legend-dot>
|
||||
<span localize="customers.drawer.products">Produkter</span>
|
||||
</swp-chart-legend-item>
|
||||
</swp-chart-legend>
|
||||
</swp-chart-header>
|
||||
<swp-chart-container id="customerChart"></swp-chart-container>
|
||||
</swp-chart-section>
|
||||
|
||||
<!-- Notes -->
|
||||
<swp-notes-section>
|
||||
<swp-section-label localize="customers.drawer.recentNotes">Seneste noter</swp-section-label>
|
||||
<swp-note-item>
|
||||
<swp-note-meta>
|
||||
<swp-note-type localize="customers.drawer.noteType">Note</swp-note-type>
|
||||
<swp-note-date>9. dec 2025</swp-note-date>
|
||||
</swp-note-meta>
|
||||
<swp-note-text>Kunden foretrækker naturlige farver og ønsker lidt ekstra tid til konsultation.</swp-note-text>
|
||||
</swp-note-item>
|
||||
<swp-note-item>
|
||||
<swp-note-meta>
|
||||
<swp-note-type localize="customers.drawer.colorFormula">Farveformel</swp-note-type>
|
||||
<swp-note-date>12. nov 2025</swp-note-date>
|
||||
</swp-note-meta>
|
||||
<swp-note-text>7/1 + 7/0 (1:1) · Oxidant 6% · Virketid 35 min</swp-note-text>
|
||||
</swp-note-item>
|
||||
<swp-see-all-link localize="customers.drawer.seeAllNotes">Se alle noter →</swp-see-all-link>
|
||||
</swp-notes-section>
|
||||
</swp-drawer-body>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1039,6 +1039,8 @@ swp-form-input {
|
|||
|
||||
[data-drawer] swp-section-label {
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
[data-drawer] swp-data-section {
|
||||
|
|
@ -1179,7 +1181,7 @@ swp-status-indicator {
|
|||
&[data-active="false"] {
|
||||
background: var(--bg-red-medium);
|
||||
color: var(--color-red);
|
||||
border: 1px solid var(--bg-red-border);
|
||||
border: 1px solid var(--border-red);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
* Feature-specific styling only.
|
||||
* Reuses:
|
||||
* - swp-sticky-header, swp-header-content, swp-page-container (page.css)
|
||||
* - swp-stats-row, swp-stat-card (stats.css)
|
||||
* - swp-stats-row, swp-stat-card, swp-quick-stats (stats.css)
|
||||
* - swp-action-bar, swp-search-input (components.css, services.css)
|
||||
* - swp-data-table, swp-avatar, swp-tag, swp-empty-state (components.css)
|
||||
* - swp-btn (components.css)
|
||||
|
|
@ -66,3 +66,274 @@ swp-card.customers-list swp-data-table-cell:last-child {
|
|||
gap: var(--spacing-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
CUSTOMER DRAWER
|
||||
Reuses: swp-drawer-* (drawers.css), swp-section-label (components.css),
|
||||
swp-edit-section/row (components.css), swp-toggle-row/slider (controls.css)
|
||||
=========================================== */
|
||||
|
||||
/* Customer Header */
|
||||
swp-customer-header {
|
||||
display: flex;
|
||||
gap: var(--spacing-6);
|
||||
padding-bottom: var(--spacing-6);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-customer-avatar-large {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-teal);
|
||||
color: white;
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-customer-header-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
swp-customer-header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
swp-customer-header-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-1);
|
||||
}
|
||||
|
||||
swp-customer-header-name {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-customer-since {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-customer-header-contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: var(--spacing-2);
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
a {
|
||||
color: var(--color-teal);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-customer-tags {
|
||||
display: flex;
|
||||
gap: var(--spacing-2);
|
||||
margin-top: var(--spacing-1);
|
||||
}
|
||||
|
||||
/* Marketing Section */
|
||||
swp-marketing-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-3);
|
||||
|
||||
swp-toggle-row,
|
||||
swp-toggle-row:last-child {
|
||||
padding: var(--spacing-4);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
/* Profile Boxes (2x2 grid) */
|
||||
swp-profile-boxes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
swp-profile-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-4);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
|
||||
&.warning {
|
||||
background: var(--bg-red-subtle);
|
||||
border: 1px solid var(--border-red);
|
||||
|
||||
swp-profile-box-label {
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-profile-box-label {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
swp-profile-box-value {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Chart Section */
|
||||
swp-chart-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-4);
|
||||
margin-top: var(--spacing-6);
|
||||
padding-top: var(--spacing-6);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-chart-legend {
|
||||
display: flex;
|
||||
gap: var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-chart-legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-chart-legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: var(--radius-full);
|
||||
|
||||
&.services {
|
||||
background: var(--color-teal);
|
||||
}
|
||||
|
||||
&.products {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
swp-chart-container {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* Notes Section */
|
||||
swp-notes-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-4);
|
||||
margin-top: var(--spacing-6);
|
||||
padding-top: var(--spacing-6);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-note-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-4);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-note-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
swp-note-type {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-teal);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
swp-note-date {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
swp-note-text {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
swp-see-all-link {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-teal);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding-top: var(--spacing-2);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Edit input variant for drawer */
|
||||
swp-edit-input {
|
||||
display: flex;
|
||||
gap: var(--spacing-2);
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
font-size: var(--font-size-base);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
&.short {
|
||||
width: 80px;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
[data-drawer="md"] { --drawer-width: 360px; }
|
||||
[data-drawer="lg"] { --drawer-width: 420px; }
|
||||
[data-drawer="xl"] { --drawer-width: 480px; }
|
||||
[data-drawer="xxl"] { --drawer-width: 680px; }
|
||||
|
||||
/* Legacy support for existing drawers */
|
||||
swp-profile-drawer,
|
||||
|
|
|
|||
|
|
@ -286,7 +286,7 @@ swp-employee-status {
|
|||
&[data-active="false"] {
|
||||
background: var(--bg-red-medium);
|
||||
color: var(--color-red);
|
||||
border: 1px solid var(--bg-red-border);
|
||||
border: 1px solid var(--border-red);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -226,6 +226,10 @@ swp-quick-stats {
|
|||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--card-gap);
|
||||
|
||||
&.cols-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
swp-quick-stat {
|
||||
|
|
@ -235,6 +239,7 @@ swp-quick-stat {
|
|||
padding: var(--card-padding);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-quick-stat swp-stat-value {
|
||||
|
|
@ -249,6 +254,11 @@ swp-quick-stat swp-stat-label {
|
|||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-quick-stat.highlight {
|
||||
background: var(--bg-teal-subtle);
|
||||
border: 1px solid var(--bg-teal-border);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
RESPONSIVE
|
||||
=========================================== */
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { CashController } from './modules/cash';
|
|||
import { EmployeesController } from './modules/employees';
|
||||
import { ControlsController } from './modules/controls';
|
||||
import { ServicesController } from './modules/services';
|
||||
import { CustomersController } from './modules/customers';
|
||||
import { TrackingController } from './modules/tracking';
|
||||
|
||||
/**
|
||||
|
|
@ -28,6 +29,7 @@ export class App {
|
|||
readonly employees: EmployeesController;
|
||||
readonly controls: ControlsController;
|
||||
readonly services: ServicesController;
|
||||
readonly customers: CustomersController;
|
||||
readonly tracking: TrackingController;
|
||||
|
||||
constructor() {
|
||||
|
|
@ -41,6 +43,7 @@ export class App {
|
|||
this.employees = new EmployeesController();
|
||||
this.controls = new ControlsController();
|
||||
this.services = new ServicesController();
|
||||
this.customers = new CustomersController();
|
||||
this.tracking = new TrackingController();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
235
PlanTempus.Application/wwwroot/ts/modules/customers.ts
Normal file
235
PlanTempus.Application/wwwroot/ts/modules/customers.ts
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
/**
|
||||
* Customers Controller
|
||||
*
|
||||
* Handles:
|
||||
* - Fuzzy search with Fuse.js
|
||||
* - Customer drawer population
|
||||
*/
|
||||
|
||||
import Fuse from 'fuse.js';
|
||||
|
||||
interface CustomerItem {
|
||||
name: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
visits: string;
|
||||
created: string;
|
||||
tags: string;
|
||||
hairdresser: string;
|
||||
element: HTMLElement;
|
||||
}
|
||||
|
||||
export class CustomersController {
|
||||
private fuse: Fuse<CustomerItem> | null = null;
|
||||
private customers: CustomerItem[] = [];
|
||||
private searchInput: HTMLInputElement | null = null;
|
||||
private emptyState: HTMLElement | null = null;
|
||||
private dataTable: HTMLElement | null = null;
|
||||
|
||||
constructor() {
|
||||
// Only initialize if we're on the customers page
|
||||
const customersTable = document.querySelector('swp-card.customers-list');
|
||||
if (!customersTable) return;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
private init(): void {
|
||||
this.searchInput = document.getElementById('searchInput') as HTMLInputElement;
|
||||
this.emptyState = document.getElementById('emptyState');
|
||||
this.dataTable = document.querySelector('swp-card.customers-list swp-data-table');
|
||||
|
||||
this.buildCustomerIndex();
|
||||
this.setupSearch();
|
||||
this.setupDrawerPopulation();
|
||||
}
|
||||
|
||||
private buildCustomerIndex(): void {
|
||||
const customerRows = document.querySelectorAll('swp-card.customers-list swp-data-table-row');
|
||||
|
||||
customerRows.forEach((row) => {
|
||||
const element = row as HTMLElement;
|
||||
const cells = element.querySelectorAll('swp-data-table-cell');
|
||||
|
||||
const name = element.dataset.name || '';
|
||||
const phone = cells[1]?.textContent?.trim() || '';
|
||||
const email = cells[2]?.textContent?.trim() || '';
|
||||
const visits = element.dataset.visits || '';
|
||||
const created = element.dataset.created || '';
|
||||
const tags = element.dataset.tags || '';
|
||||
const hairdresser = cells[5]?.textContent?.trim() || '';
|
||||
|
||||
this.customers.push({
|
||||
name,
|
||||
phone,
|
||||
email,
|
||||
visits,
|
||||
created,
|
||||
tags,
|
||||
hairdresser,
|
||||
element
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private setupSearch(): void {
|
||||
if (!this.searchInput) return;
|
||||
|
||||
// Initialize Fuse.js with multiple search keys
|
||||
this.fuse = new Fuse(this.customers, {
|
||||
keys: ['name', 'phone', 'email'],
|
||||
threshold: 0.3,
|
||||
minMatchCharLength: 2
|
||||
});
|
||||
|
||||
// Listen for input with debounce
|
||||
let debounceTimer: number;
|
||||
this.searchInput.addEventListener('input', (e) => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = window.setTimeout(() => {
|
||||
const query = (e.target as HTMLInputElement).value.trim();
|
||||
this.filterCustomers(query);
|
||||
}, 150);
|
||||
});
|
||||
}
|
||||
|
||||
private filterCustomers(query: string): void {
|
||||
if (!query || query.length < 2) {
|
||||
this.showAll();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.fuse) return;
|
||||
|
||||
// Get matching customers
|
||||
const results = this.fuse.search(query);
|
||||
const matchingCustomers = new Set(results.map(r => r.item.element));
|
||||
|
||||
let visibleCount = 0;
|
||||
|
||||
// Show/hide customers
|
||||
this.customers.forEach(customer => {
|
||||
if (matchingCustomers.has(customer.element)) {
|
||||
customer.element.style.display = 'grid';
|
||||
visibleCount++;
|
||||
} else {
|
||||
customer.element.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Show/hide empty state
|
||||
this.updateEmptyState(visibleCount);
|
||||
}
|
||||
|
||||
private showAll(): void {
|
||||
this.customers.forEach(customer => {
|
||||
customer.element.style.display = 'grid';
|
||||
});
|
||||
this.updateEmptyState(this.customers.length);
|
||||
}
|
||||
|
||||
private updateEmptyState(visibleCount: number): void {
|
||||
if (!this.emptyState || !this.dataTable) return;
|
||||
|
||||
if (visibleCount === 0) {
|
||||
this.emptyState.style.display = 'flex';
|
||||
// Hide header when no results
|
||||
const header = this.dataTable.querySelector('swp-data-table-header') as HTMLElement;
|
||||
if (header) header.style.display = 'none';
|
||||
} else {
|
||||
this.emptyState.style.display = 'none';
|
||||
// Show header when results exist
|
||||
const header = this.dataTable.querySelector('swp-data-table-header') as HTMLElement;
|
||||
if (header) header.style.display = 'grid';
|
||||
}
|
||||
}
|
||||
|
||||
private setupDrawerPopulation(): void {
|
||||
// Listen for clicks on customer rows to populate drawer
|
||||
document.addEventListener('click', (e) => {
|
||||
const row = (e.target as HTMLElement).closest<HTMLElement>('swp-data-table-row[data-drawer-trigger="customer-drawer"]');
|
||||
if (!row) return;
|
||||
|
||||
this.populateDrawer(row);
|
||||
});
|
||||
}
|
||||
|
||||
private populateDrawer(row: HTMLElement): void {
|
||||
const cells = row.querySelectorAll('swp-data-table-cell');
|
||||
|
||||
const name = row.dataset.name || '';
|
||||
const phone = cells[1]?.textContent?.trim() || '';
|
||||
const email = cells[2]?.textContent?.trim() || '';
|
||||
const visits = row.dataset.visits || '';
|
||||
const created = row.dataset.created || '';
|
||||
const tags = row.dataset.tags || '';
|
||||
const hairdresser = cells[5]?.textContent?.trim() || '';
|
||||
|
||||
// Generate initials
|
||||
const initials = name.split(' ').map(n => n[0]).join('').toUpperCase();
|
||||
|
||||
// Format "Kunde siden"
|
||||
const createdDate = created ? this.formatCreatedDate(created) : 'Ukendt';
|
||||
|
||||
// Update drawer elements
|
||||
const drawerAvatar = document.getElementById('drawerAvatar');
|
||||
const drawerName = document.getElementById('drawerName');
|
||||
const drawerSince = document.getElementById('drawerSince');
|
||||
const drawerPhoneLink = document.getElementById('drawerPhoneLink') as HTMLAnchorElement;
|
||||
const drawerEmailLink = document.getElementById('drawerEmailLink') as HTMLAnchorElement;
|
||||
const drawerVisits = document.getElementById('drawerVisits');
|
||||
const drawerHairdresser = document.getElementById('drawerHairdresser');
|
||||
const drawerTags = document.getElementById('drawerTags');
|
||||
const editPhone = document.getElementById('editPhone') as HTMLInputElement;
|
||||
const editEmail = document.getElementById('editEmail') as HTMLInputElement;
|
||||
|
||||
if (drawerAvatar) drawerAvatar.textContent = initials;
|
||||
if (drawerName) drawerName.textContent = name;
|
||||
if (drawerSince) drawerSince.textContent = `Kunde siden ${createdDate}`;
|
||||
|
||||
if (drawerPhoneLink) {
|
||||
drawerPhoneLink.textContent = phone;
|
||||
drawerPhoneLink.href = `tel:${phone.replace(/\s/g, '')}`;
|
||||
}
|
||||
|
||||
if (drawerEmailLink) {
|
||||
drawerEmailLink.textContent = email;
|
||||
drawerEmailLink.href = `mailto:${email}`;
|
||||
}
|
||||
|
||||
if (drawerVisits) drawerVisits.textContent = visits;
|
||||
if (drawerHairdresser) drawerHairdresser.textContent = hairdresser;
|
||||
|
||||
// Update editable fields
|
||||
if (editPhone) editPhone.value = phone;
|
||||
if (editEmail) editEmail.value = email;
|
||||
|
||||
// Update tags
|
||||
if (drawerTags) {
|
||||
drawerTags.innerHTML = '';
|
||||
if (tags) {
|
||||
tags.split(',').forEach(tag => {
|
||||
const tagEl = document.createElement('swp-tag');
|
||||
tagEl.className = tag.trim();
|
||||
tagEl.textContent = this.formatTagLabel(tag.trim());
|
||||
drawerTags.appendChild(tagEl);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private formatCreatedDate(dateStr: string): string {
|
||||
const months = [
|
||||
'januar', 'februar', 'marts', 'april', 'maj', 'juni',
|
||||
'juli', 'august', 'september', 'oktober', 'november', 'december'
|
||||
];
|
||||
const [year, month] = dateStr.split('-');
|
||||
const monthIndex = parseInt(month, 10) - 1;
|
||||
return `${months[monthIndex]} ${year}`;
|
||||
}
|
||||
|
||||
private formatTagLabel(tag: string): string {
|
||||
// Capitalize first letter
|
||||
return tag.charAt(0).toUpperCase() + tag.slice(1);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue