Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
PlanTempusApp/PlanTempus.Application/Features/Customers/Pages/Index.cshtml
Janus C. H. Knudsen 0a431c8db4 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
2026-01-19 18:27:59 +01:00

412 lines
22 KiB
Text
Raw Blame History

@page "/kunder"
@model PlanTempus.Application.Features.Customers.Pages.IndexModel
@{
ViewData["Title"] = "Kunder";
}
<swp-sticky-header>
<swp-header-content>
<swp-page-header>
<swp-page-title>
<h1 localize="customers.title">Kunder</h1>
<p localize="customers.subtitle">Administrer kunder og kundekort</p>
</swp-page-title>
</swp-page-header>
<swp-stats-row>
<swp-stat-card class="highlight">
<swp-stat-value>12</swp-stat-value>
<swp-stat-label localize="customers.stats.total">Total kunder</swp-stat-label>
</swp-stat-card>
<swp-stat-card>
<swp-stat-value>3</swp-stat-value>
<swp-stat-label localize="customers.stats.newThisMonth">Nye denne måned</swp-stat-label>
</swp-stat-card>
<swp-stat-card>
<swp-stat-value>12,4</swp-stat-value>
<swp-stat-label localize="customers.stats.avgVisits">Gns. besøg</swp-stat-label>
</swp-stat-card>
</swp-stats-row>
</swp-header-content>
</swp-sticky-header>
<swp-page-container>
<swp-action-bar>
<swp-search-input>
<i class="ph ph-magnifying-glass"></i>
<input type="text" id="searchInput" placeholder="Søg kunde (navn, telefon, email...)" />
</swp-search-input>
<swp-btn-group>
<swp-btn class="secondary">
<i class="ph ph-export"></i>
<span localize="customers.export">Eksporter</span>
</swp-btn>
<swp-btn class="primary">
<i class="ph ph-plus"></i>
<span localize="customers.create">Ny kunde</span>
</swp-btn>
</swp-btn-group>
</swp-action-bar>
<swp-card class="customers-list">
<swp-data-table>
<swp-data-table-header>
<swp-data-table-cell localize="customers.column.name">Navn</swp-data-table-cell>
<swp-data-table-cell localize="customers.column.phone">Telefon</swp-data-table-cell>
<swp-data-table-cell localize="customers.column.email">Email</swp-data-table-cell>
<swp-data-table-cell localize="customers.column.visits">Besøg</swp-data-table-cell>
<swp-data-table-cell localize="customers.column.lastVisit">Sidste</swp-data-table-cell>
<swp-data-table-cell localize="customers.column.hairdresser">Frisør</swp-data-table-cell>
<swp-data-table-cell localize="customers.column.created">Oprettet</swp-data-table-cell>
<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" 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>
</swp-data-table-cell>
<swp-data-table-cell>+45 22 33 44 55</swp-data-table-cell>
<swp-data-table-cell>anna.j@hotmail.dk</swp-data-table-cell>
<swp-data-table-cell>6</swp-data-table-cell>
<swp-data-table-cell>15. nov</swp-data-table-cell>
<swp-data-table-cell>Nina K.</swp-data-table-cell>
<swp-data-table-cell>Sep 2024</swp-data-table-cell>
<swp-data-table-cell></swp-data-table-cell>
</swp-data-table-row>
<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>
</swp-data-table-cell>
<swp-data-table-cell>+45 66 77 88 99</swp-data-table-cell>
<swp-data-table-cell>camilla.h@outlook.dk</swp-data-table-cell>
<swp-data-table-cell>25</swp-data-table-cell>
<swp-data-table-cell>28. okt</swp-data-table-cell>
<swp-data-table-cell>Emma L.</swp-data-table-cell>
<swp-data-table-cell>Dec 2022</swp-data-table-cell>
<swp-data-table-cell>
<swp-tag class="vip">VIP</swp-tag>
</swp-data-table-cell>
</swp-data-table-row>
<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>
</swp-data-table-cell>
<swp-data-table-cell>+45 12 34 56 78</swp-data-table-cell>
<swp-data-table-cell>emma.l@gmail.com</swp-data-table-cell>
<swp-data-table-cell>8</swp-data-table-cell>
<swp-data-table-cell>5. dec</swp-data-table-cell>
<swp-data-table-cell>Nina K.</swp-data-table-cell>
<swp-data-table-cell>Jun 2024</swp-data-table-cell>
<swp-data-table-cell></swp-data-table-cell>
</swp-data-table-row>
<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>
</swp-data-table-cell>
<swp-data-table-cell>+45 55 66 77 88</swp-data-table-cell>
<swp-data-table-cell>freja.c@outlook.dk</swp-data-table-cell>
<swp-data-table-cell>31</swp-data-table-cell>
<swp-data-table-cell>20. nov</swp-data-table-cell>
<swp-data-table-cell>Emma L.</swp-data-table-cell>
<swp-data-table-cell>Aug 2022</swp-data-table-cell>
<swp-data-table-cell>
<swp-tag class="vip">VIP</swp-tag>
<swp-tag class="allergi">Allergi</swp-tag>
</swp-data-table-cell>
</swp-data-table-row>
<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>
</swp-data-table-cell>
<swp-data-table-cell>+45 11 22 33 44</swp-data-table-cell>
<swp-data-table-cell>ida@firma.dk</swp-data-table-cell>
<swp-data-table-cell>3</swp-data-table-cell>
<swp-data-table-cell>28. nov</swp-data-table-cell>
<swp-data-table-cell>Sofie M.</swp-data-table-cell>
<swp-data-table-cell>Okt 2025</swp-data-table-cell>
<swp-data-table-cell>
<swp-tag class="ny">Ny</swp-tag>
</swp-data-table-cell>
</swp-data-table-row>
<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>
</swp-data-table-cell>
<swp-data-table-cell>+45 55 66 77 88</swp-data-table-cell>
<swp-data-table-cell>katrine.b@firma.dk</swp-data-table-cell>
<swp-data-table-cell>12</swp-data-table-cell>
<swp-data-table-cell>1. nov</swp-data-table-cell>
<swp-data-table-cell>Nina K.</swp-data-table-cell>
<swp-data-table-cell>Apr 2024</swp-data-table-cell>
<swp-data-table-cell></swp-data-table-cell>
</swp-data-table-row>
<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>
</swp-data-table-cell>
<swp-data-table-cell>+45 88 99 00 11</swp-data-table-cell>
<swp-data-table-cell>line.f@mail.dk</swp-data-table-cell>
<swp-data-table-cell>9</swp-data-table-cell>
<swp-data-table-cell>15. okt</swp-data-table-cell>
<swp-data-table-cell>Nina K.</swp-data-table-cell>
<swp-data-table-cell>Maj 2024</swp-data-table-cell>
<swp-data-table-cell>
<swp-tag class="sensitiv">Sensitiv</swp-tag>
</swp-data-table-cell>
</swp-data-table-row>
<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>
</swp-data-table-cell>
<swp-data-table-cell>+45 33 44 55 66</swp-data-table-cell>
<swp-data-table-cell>louise.h@gmail.com</swp-data-table-cell>
<swp-data-table-cell>18</swp-data-table-cell>
<swp-data-table-cell>10. nov</swp-data-table-cell>
<swp-data-table-cell>Emma L.</swp-data-table-cell>
<swp-data-table-cell>Feb 2023</swp-data-table-cell>
<swp-data-table-cell>
<swp-tag class="stamkunde">Stamkunde</swp-tag>
</swp-data-table-cell>
</swp-data-table-row>
<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>
</swp-data-table-cell>
<swp-data-table-cell>+45 98 76 54 32</swp-data-table-cell>
<swp-data-table-cell>maja.p@mail.dk</swp-data-table-cell>
<swp-data-table-cell>22</swp-data-table-cell>
<swp-data-table-cell>1. dec</swp-data-table-cell>
<swp-data-table-cell>Emma L.</swp-data-table-cell>
<swp-data-table-cell>Jan 2023</swp-data-table-cell>
<swp-data-table-cell>
<swp-tag class="stamkunde">Stamkunde</swp-tag>
</swp-data-table-cell>
</swp-data-table-row>
<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>
</swp-data-table-cell>
<swp-data-table-cell>+45 44 55 66 77</swp-data-table-cell>
<swp-data-table-cell>maria.o@mail.dk</swp-data-table-cell>
<swp-data-table-cell>2</swp-data-table-cell>
<swp-data-table-cell>5. nov</swp-data-table-cell>
<swp-data-table-cell>Sofie M.</swp-data-table-cell>
<swp-data-table-cell>Nov 2025</swp-data-table-cell>
<swp-data-table-cell>
<swp-tag class="ny">Ny</swp-tag>
</swp-data-table-cell>
</swp-data-table-row>
<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>
</swp-data-table-cell>
<swp-data-table-cell>+45 77 88 99 00</swp-data-table-cell>
<swp-data-table-cell>rikke.s@gmail.com</swp-data-table-cell>
<swp-data-table-cell>4</swp-data-table-cell>
<swp-data-table-cell>20. okt</swp-data-table-cell>
<swp-data-table-cell>Sofie M.</swp-data-table-cell>
<swp-data-table-cell>Aug 2025</swp-data-table-cell>
<swp-data-table-cell></swp-data-table-cell>
</swp-data-table-row>
<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>
</swp-data-table-cell>
<swp-data-table-cell>+45 23 45 67 89</swp-data-table-cell>
<swp-data-table-cell>sofie@email.dk</swp-data-table-cell>
<swp-data-table-cell>14</swp-data-table-cell>
<swp-data-table-cell>9. dec</swp-data-table-cell>
<swp-data-table-cell>Emma L.</swp-data-table-cell>
<swp-data-table-cell>Mar 2024</swp-data-table-cell>
<swp-data-table-cell>
<swp-tag class="vip">VIP</swp-tag>
</swp-data-table-cell>
</swp-data-table-row>
</swp-data-table>
<swp-empty-state id="emptyState" style="display: none;">
<i class="ph ph-users"></i>
<span localize="customers.emptySearch">Ingen kunder matcher din søgning</span>
</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>
Reference in a new issue View git blame Copy permalink