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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue