From 38e9243bcd4961b50147ce4ab27c9311877c6a7e Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Sat, 24 Jan 2026 10:59:21 +0100
Subject: [PATCH] Adds create customer drawer to customers page

Implements new drawer for creating customers with form inputs for contact details and notes

Enhances customer management by providing a streamlined way to add new customer records directly from the customers index page
---
 .../Components/CustomerTable/Default.cshtml   |  2 +-
 .../Features/Customers/Pages/Index.cshtml     | 74 +++++++++++++++++++
 .../Localization/Translations/da.json         |  7 ++
 .../Localization/Translations/en.json         | 54 ++++++++++++++
 .../wwwroot/css/customers.css                 | 57 ++++++++++++++
 5 files changed, 193 insertions(+), 1 deletion(-)

diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerTable/Default.cshtml b/PlanTempus.Application/Features/Customers/Components/CustomerTable/Default.cshtml
index 8b25c9f..5aa369a 100644
--- a/PlanTempus.Application/Features/Customers/Components/CustomerTable/Default.cshtml
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerTable/Default.cshtml
@@ -10,7 +10,7 @@
             <i class="ph ph-export"></i>
             <span>@Model.ExportButtonText</span>
         </swp-btn>
-        <swp-btn class="primary">
+        <swp-btn class="primary" data-drawer-trigger="create-customer-drawer">
             <i class="ph ph-plus"></i>
             <span>@Model.CreateButtonText</span>
         </swp-btn>
diff --git a/PlanTempus.Application/Features/Customers/Pages/Index.cshtml b/PlanTempus.Application/Features/Customers/Pages/Index.cshtml
index 2122810..a6c827b 100644
--- a/PlanTempus.Application/Features/Customers/Pages/Index.cshtml
+++ b/PlanTempus.Application/Features/Customers/Pages/Index.cshtml
@@ -197,6 +197,80 @@
     </swp-drawer-body>
 </div>
 
+<!-- Create Customer Drawer -->
+<div id="create-customer-drawer" data-drawer="lg">
+    <swp-drawer-header>
+        <swp-drawer-title>
+            <i class="ph ph-user-plus"></i>
+            <span localize="customers.createDrawer.title">Opret ny kunde</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>
+        <!-- Navn (påkrævet) -->
+        <swp-form-row>
+            <swp-form-label localize="customers.createDrawer.name">Navn *</swp-form-label>
+            <input type="text" id="createCustomerName" required>
+        </swp-form-row>
+
+        <!-- Kontaktoplysninger Card -->
+        <swp-card>
+            <swp-card-header>
+                <swp-card-title>
+                    <i class="ph ph-address-book"></i>
+                    <span localize="customers.drawer.contactInfo">Kontaktoplysninger</span>
+                </swp-card-title>
+            </swp-card-header>
+
+            <swp-edit-section>
+                <swp-edit-row>
+                    <swp-edit-label localize="customers.drawer.phone">Telefon</swp-edit-label>
+                    <swp-edit-input>
+                        <input type="tel" id="createCustomerPhone">
+                    </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="createCustomerEmail">
+                    </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="createCustomerAddress">
+                    </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="createCustomerZip" class="short">
+                        <input type="text" id="createCustomerCity">
+                    </swp-edit-input>
+                </swp-edit-row>
+            </swp-edit-section>
+        </swp-card>
+
+        <!-- Note -->
+        <swp-form-row class="note-field">
+            <swp-form-label localize="customers.createDrawer.note">Note</swp-form-label>
+            <textarea id="createCustomerNote" rows="3" localize-placeholder="customers.createDrawer.notePlaceholder" placeholder="Skriv en note om kunden..."></textarea>
+        </swp-form-row>
+    </swp-drawer-body>
+
+    <swp-drawer-footer>
+        <swp-btn class="secondary" data-drawer-close>
+            <span localize="common.cancel">Annuller</span>
+        </swp-btn>
+        <swp-btn class="primary" id="saveNewCustomer">
+            <span localize="customers.createDrawer.save">Opret kunde</span>
+        </swp-btn>
+    </swp-drawer-footer>
+</div>
+
 @section Scripts {
     <script>
         // Row click - navigate to detail page
diff --git a/PlanTempus.Application/Features/Localization/Translations/da.json b/PlanTempus.Application/Features/Localization/Translations/da.json
index a1cebce..f1b0232 100644
--- a/PlanTempus.Application/Features/Localization/Translations/da.json
+++ b/PlanTempus.Application/Features/Localization/Translations/da.json
@@ -606,6 +606,13 @@
     "searchPlaceholder": "Søg kunde (navn, telefon, email...)",
     "export": "Eksporter",
     "create": "Ny kunde",
+    "createDrawer": {
+      "title": "Opret ny kunde",
+      "name": "Navn *",
+      "note": "Note",
+      "notePlaceholder": "Skriv en note om kunden...",
+      "save": "Opret kunde"
+    },
     "emptySearch": "Ingen kunder matcher din søgning",
     "column": {
       "name": "Navn",
diff --git a/PlanTempus.Application/Features/Localization/Translations/en.json b/PlanTempus.Application/Features/Localization/Translations/en.json
index 9c55c3e..e9ef387 100644
--- a/PlanTempus.Application/Features/Localization/Translations/en.json
+++ b/PlanTempus.Application/Features/Localization/Translations/en.json
@@ -601,6 +601,60 @@
     }
   },
   "customers": {
+    "title": "Customers",
+    "subtitle": "Manage customers and customer cards",
+    "searchPlaceholder": "Search customer (name, phone, email...)",
+    "export": "Export",
+    "create": "New customer",
+    "createDrawer": {
+      "title": "Create new customer",
+      "name": "Name *",
+      "note": "Note",
+      "notePlaceholder": "Write a note about the customer...",
+      "save": "Create customer"
+    },
+    "emptySearch": "No customers match your search",
+    "column": {
+      "name": "Name",
+      "phone": "Phone",
+      "email": "Email",
+      "visits": "Visits",
+      "lastVisit": "Last",
+      "hairdresser": "Hairdresser",
+      "created": "Created",
+      "tags": "Tags"
+    },
+    "stats": {
+      "total": "Total customers",
+      "newThisMonth": "New this month",
+      "avgVisits": "Avg. visits"
+    },
+    "drawer": {
+      "title": "Customer card",
+      "visits": "Visits",
+      "avgInterval": "Avg. interval",
+      "preferredHairdresser": "Preferred hairdresser",
+      "contactInfo": "Contact information",
+      "phone": "Phone",
+      "email": "Email",
+      "address": "Address",
+      "zipCity": "Zip + City",
+      "marketing": "Marketing",
+      "emailMarketing": "Email marketing",
+      "smsMarketing": "SMS marketing",
+      "profile": "Profile",
+      "hairType": "Hair type",
+      "porosity": "Porosity",
+      "preference": "Preference",
+      "warnings": "Warnings",
+      "revenueChart": "Revenue (last 6 months)",
+      "services": "Services",
+      "products": "Products",
+      "recentNotes": "Recent notes",
+      "noteType": "Note",
+      "colorFormula": "Color formula",
+      "seeAllNotes": "See all notes →"
+    },
     "detail": {
       "tabs": {
         "activitylog": "Activity log"
diff --git a/PlanTempus.Application/wwwroot/css/customers.css b/PlanTempus.Application/wwwroot/css/customers.css
index a1d7b70..1cacbb5 100644
--- a/PlanTempus.Application/wwwroot/css/customers.css
+++ b/PlanTempus.Application/wwwroot/css/customers.css
@@ -1411,3 +1411,60 @@ swp-activity-time {
 swp-activity-actor {
   color: var(--color-text-secondary);
 }
+
+/* ===========================================
+   CREATE CUSTOMER DRAWER
+   =========================================== */
+
+/* Name field above card */
+#create-customer-drawer swp-form-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin-bottom: var(--spacing-6);
+}
+
+#create-customer-drawer swp-form-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+}
+
+#create-customer-drawer swp-form-row input {
+  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);
+}
+
+#create-customer-drawer swp-form-row input:focus,
+#create-customer-drawer swp-form-row textarea:focus {
+  outline: none;
+  border-color: var(--color-teal);
+}
+
+/* Textarea for note */
+#create-customer-drawer swp-form-row textarea {
+  padding: var(--spacing-3) var(--spacing-4);
+  font-size: var(--font-size-base);
+  font-family: inherit;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+  resize: vertical;
+  min-height: 80px;
+}
+
+/* Card inside drawer */
+#create-customer-drawer swp-card {
+  margin: 0;
+}
+
+/* Note field after card */
+#create-customer-drawer swp-form-row.note-field {
+  margin-top: var(--spacing-6);
+  margin-bottom: 0;
+}