Adds customers page and related styling
Introduces new customers management interface with data table Adds customers-specific CSS and updates layout to include new stylesheet Configures menu service to point to new customers page route
This commit is contained in:
Janus C. H. Knudsen
parent
c1d2df9327
commit
65ad9aacdf
6 changed files with 361 additions and 1 deletions
255
PlanTempus.Application/Features/Customers/Pages/Index.cshtml
Normal file
255
PlanTempus.Application/Features/Customers/Pages/Index.cshtml
Normal file
|
|
@ -0,0 +1,255 @@
|
||||||
|
@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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
using Microsoft.AspNetCore.Mvc.RazorPages;
|
||||||
|
|
||||||
|
namespace PlanTempus.Application.Features.Customers.Pages;
|
||||||
|
|
||||||
|
public class IndexModel : PageModel
|
||||||
|
{
|
||||||
|
public void OnGet()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -118,7 +118,7 @@ public class MockMenuService : IMenuService
|
||||||
Id = "customers",
|
Id = "customers",
|
||||||
Label = "Kunder",
|
Label = "Kunder",
|
||||||
Icon = "ph-users",
|
Icon = "ph-users",
|
||||||
Url = "/customers",
|
Url = "/kunder",
|
||||||
MinimumRole = UserRole.Staff,
|
MinimumRole = UserRole.Staff,
|
||||||
SortOrder = 3
|
SortOrder = 3
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,7 @@
|
||||||
<link rel="stylesheet" href="~/css/account.css">
|
<link rel="stylesheet" href="~/css/account.css">
|
||||||
<link rel="stylesheet" href="~/css/employees.css">
|
<link rel="stylesheet" href="~/css/employees.css">
|
||||||
<link rel="stylesheet" href="~/css/services.css">
|
<link rel="stylesheet" href="~/css/services.css">
|
||||||
|
<link rel="stylesheet" href="~/css/customers.css">
|
||||||
<link rel="stylesheet" href="~/css/settings.css">
|
<link rel="stylesheet" href="~/css/settings.css">
|
||||||
@await RenderSectionAsync("Styles", required: false)
|
@await RenderSectionAsync("Styles", required: false)
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -1127,6 +1127,32 @@ swp-tag {
|
||||||
background: var(--bg-purple-strong);
|
background: var(--bg-purple-strong);
|
||||||
color: var(--color-purple);
|
color: var(--color-purple);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Customer tags */
|
||||||
|
&.vip {
|
||||||
|
background: var(--bg-amber-strong);
|
||||||
|
color: #b8860b;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.stamkunde {
|
||||||
|
background: var(--bg-teal-strong);
|
||||||
|
color: var(--color-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ny {
|
||||||
|
background: var(--bg-blue-strong);
|
||||||
|
color: var(--color-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.allergi {
|
||||||
|
background: var(--bg-red-strong);
|
||||||
|
color: var(--color-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.sensitiv {
|
||||||
|
background: var(--bg-purple-strong);
|
||||||
|
color: var(--color-purple);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===========================================
|
/* ===========================================
|
||||||
|
|
|
||||||
68
PlanTempus.Application/wwwroot/css/customers.css
Normal file
68
PlanTempus.Application/wwwroot/css/customers.css
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
/**
|
||||||
|
* Customers - Page Styling
|
||||||
|
*
|
||||||
|
* 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-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)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ===========================================
|
||||||
|
CUSTOMER TABLE (uses swp-data-table from components.css)
|
||||||
|
=========================================== */
|
||||||
|
swp-card.customers-list {
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table columns: Navn(1fr) | Tlf(120px) | Email(180px) | Besøg(70px) | Sidste(90px) | Frisør(100px) | Oprettet(90px) | Tags(140px) */
|
||||||
|
swp-card.customers-list swp-data-table {
|
||||||
|
grid-template-columns: minmax(200px, 1fr) 120px 180px 70px 90px 100px 90px 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
swp-card.customers-list swp-data-table-header,
|
||||||
|
swp-card.customers-list swp-data-table-row {
|
||||||
|
padding: 0 var(--spacing-10);
|
||||||
|
}
|
||||||
|
|
||||||
|
swp-card.customers-list swp-data-table-header swp-data-table-cell {
|
||||||
|
padding-top: var(--spacing-5);
|
||||||
|
padding-bottom: var(--spacing-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
swp-card.customers-list swp-data-table-row {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
swp-card.customers-list swp-data-table-cell {
|
||||||
|
padding: var(--spacing-5) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Name cell with avatar */
|
||||||
|
swp-card.customers-list swp-data-table-cell:first-child {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mono font for visits column */
|
||||||
|
swp-card.customers-list swp-data-table-row swp-data-table-cell:nth-child(4) {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Muted text for email and created columns */
|
||||||
|
swp-card.customers-list swp-data-table-row swp-data-table-cell:nth-child(3),
|
||||||
|
swp-card.customers-list swp-data-table-row swp-data-table-cell:nth-child(7) {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tags cell */
|
||||||
|
swp-card.customers-list swp-data-table-cell:last-child {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue