From 65ad9aacdf94c5cb8baefd51ae7c5d030b29dab9 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Mon, 19 Jan 2026 14:43:48 +0100 Subject: [PATCH] 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 --- .../Features/Customers/Pages/Index.cshtml | 255 ++++++++++++++++++ .../Features/Customers/Pages/Index.cshtml.cs | 10 + .../Features/Menu/Services/MockMenuService.cs | 2 +- .../Features/_Shared/Pages/_Layout.cshtml | 1 + .../wwwroot/css/components.css | 26 ++ .../wwwroot/css/customers.css | 68 +++++ 6 files changed, 361 insertions(+), 1 deletion(-) create mode 100644 PlanTempus.Application/Features/Customers/Pages/Index.cshtml create mode 100644 PlanTempus.Application/Features/Customers/Pages/Index.cshtml.cs create mode 100644 PlanTempus.Application/wwwroot/css/customers.css diff --git a/PlanTempus.Application/Features/Customers/Pages/Index.cshtml b/PlanTempus.Application/Features/Customers/Pages/Index.cshtml new file mode 100644 index 0000000..51b92ac --- /dev/null +++ b/PlanTempus.Application/Features/Customers/Pages/Index.cshtml @@ -0,0 +1,255 @@ +@page "/kunder" +@model PlanTempus.Application.Features.Customers.Pages.IndexModel +@{ + ViewData["Title"] = "Kunder"; +} + + + + + +

Kunder

+

Administrer kunder og kundekort

+ + + + + + 12 + Total kunder + + + 3 + Nye denne måned + + + 12,4 + Gns. besøg + + + + + + + + + + + + + + + Eksporter + + + + Ny kunde + + + + + + + + Navn + Telefon + Email + Besøg + Sidste + Frisør + Oprettet + Tags + + + + + AJ + Anna Jensen + + +45 22 33 44 55 + anna.j@hotmail.dk + 6 + 15. nov + Nina K. + Sep 2024 + + + + + + CH + Camilla Holm + + +45 66 77 88 99 + camilla.h@outlook.dk + 25 + 28. okt + Emma L. + Dec 2022 + + VIP + + + + + + EL + Emma Larsen + + +45 12 34 56 78 + emma.l@gmail.com + 8 + 5. dec + Nina K. + Jun 2024 + + + + + + FC + Freja Christensen + + +45 55 66 77 88 + freja.c@outlook.dk + 31 + 20. nov + Emma L. + Aug 2022 + + VIP + Allergi + + + + + + IA + Ida Andersen + + +45 11 22 33 44 + ida@firma.dk + 3 + 28. nov + Sofie M. + Okt 2025 + + Ny + + + + + + KB + Katrine Berg + + +45 55 66 77 88 + katrine.b@firma.dk + 12 + 1. nov + Nina K. + Apr 2024 + + + + + + LF + Line Frost + + +45 88 99 00 11 + line.f@mail.dk + 9 + 15. okt + Nina K. + Maj 2024 + + Sensitiv + + + + + + LH + Louise Hansen + + +45 33 44 55 66 + louise.h@gmail.com + 18 + 10. nov + Emma L. + Feb 2023 + + Stamkunde + + + + + + MP + Maja Petersen + + +45 98 76 54 32 + maja.p@mail.dk + 22 + 1. dec + Emma L. + Jan 2023 + + Stamkunde + + + + + + MO + Maria Olsen + + +45 44 55 66 77 + maria.o@mail.dk + 2 + 5. nov + Sofie M. + Nov 2025 + + Ny + + + + + + RS + Rikke Skov + + +45 77 88 99 00 + rikke.s@gmail.com + 4 + 20. okt + Sofie M. + Aug 2025 + + + + + + SN + Sofie Nielsen + + +45 23 45 67 89 + sofie@email.dk + 14 + 9. dec + Emma L. + Mar 2024 + + VIP + + + + + + + diff --git a/PlanTempus.Application/Features/Customers/Pages/Index.cshtml.cs b/PlanTempus.Application/Features/Customers/Pages/Index.cshtml.cs new file mode 100644 index 0000000..f4c0d28 --- /dev/null +++ b/PlanTempus.Application/Features/Customers/Pages/Index.cshtml.cs @@ -0,0 +1,10 @@ +using Microsoft.AspNetCore.Mvc.RazorPages; + +namespace PlanTempus.Application.Features.Customers.Pages; + +public class IndexModel : PageModel +{ + public void OnGet() + { + } +} diff --git a/PlanTempus.Application/Features/Menu/Services/MockMenuService.cs b/PlanTempus.Application/Features/Menu/Services/MockMenuService.cs index 4c52443..d40a310 100644 --- a/PlanTempus.Application/Features/Menu/Services/MockMenuService.cs +++ b/PlanTempus.Application/Features/Menu/Services/MockMenuService.cs @@ -118,7 +118,7 @@ public class MockMenuService : IMenuService Id = "customers", Label = "Kunder", Icon = "ph-users", - Url = "/customers", + Url = "/kunder", MinimumRole = UserRole.Staff, SortOrder = 3 }, diff --git a/PlanTempus.Application/Features/_Shared/Pages/_Layout.cshtml b/PlanTempus.Application/Features/_Shared/Pages/_Layout.cshtml index ce9974f..955ff6a 100644 --- a/PlanTempus.Application/Features/_Shared/Pages/_Layout.cshtml +++ b/PlanTempus.Application/Features/_Shared/Pages/_Layout.cshtml @@ -33,6 +33,7 @@ + @await RenderSectionAsync("Styles", required: false) diff --git a/PlanTempus.Application/wwwroot/css/components.css b/PlanTempus.Application/wwwroot/css/components.css index 3d1b08e..3eebf4b 100644 --- a/PlanTempus.Application/wwwroot/css/components.css +++ b/PlanTempus.Application/wwwroot/css/components.css @@ -1127,6 +1127,32 @@ swp-tag { background: var(--bg-purple-strong); 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); + } } /* =========================================== diff --git a/PlanTempus.Application/wwwroot/css/customers.css b/PlanTempus.Application/wwwroot/css/customers.css new file mode 100644 index 0000000..084e1df --- /dev/null +++ b/PlanTempus.Application/wwwroot/css/customers.css @@ -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; +}