From fe63e08239580f3685d2e79e6e793ccd8e80b668 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 20 Nov 2025 23:15:29 +0700
Subject: [PATCH] fix(ui): Ensure Customer module UI/UX consistency with SOP
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aligned Customers module with Products/Coupons patterns per PROJECT_SOP.md

Issues Found & Fixed:
❌ Missing 'New' submenu tab (violated SOP CRUD pattern)
❌ FAB showing on index page (should be 'none' - submenu handles New)
❌ No mobile search bar (inconsistent with Products/Coupons)
❌ Duplicate coupons entry in navigation

Changes Made:

1. NavigationRegistry.php:
✅ Added 'New' submenu tab to customers navigation
✅ Removed duplicate coupons navigation entry
✅ Now matches Products/Coupons pattern: [All customers | New]

2. Customers/index.tsx:
✅ Changed FAB from 'customers' to 'none' (submenu handles New per SOP)
✅ Added mobile search bar (md:hidden) matching Products/Coupons
✅ Desktop toolbar already correct (hidden md:block)

Verified SOP Compliance:

✅ Submenu Tabs Pattern:
   - Products: [All products | New | Categories | Tags | Attributes]
   - Coupons: [All coupons | New]
   - Customers: [All customers | New] ← NOW CONSISTENT

✅ Toolbar Structure (Desktop):
   - Left: Bulk Actions (Delete when selected, Refresh always)
   - Right: Search input
   - NO 'New' button (handled by submenu)

✅ Mobile Pattern:
   - Search bar at top (md:hidden)
   - Toolbar hidden on mobile
   - Cards instead of table

✅ Table Styling (matches SOP standards):
   - Container: rounded-lg border overflow-hidden
   - Table: w-full
   - Header: bg-muted/50 + border-b
   - Header cells: p-3 font-medium text-left
   - Body rows: border-b hover:bg-muted/30 last:border-0
   - Body cells: p-3

✅ Button Styling:
   - Delete: bg-red-600 text-white hover:bg-red-700
   - Refresh: border hover:bg-accent
   - All: inline-flex items-center gap-2

Result: Customer module now 100% consistent with Products/Coupons
following PROJECT_SOP.md CRUD Module Pattern standards
---
 admin-spa/src/routes/Customers/index.tsx | 23 ++++++++++++++++++++---
 includes/Compat/NavigationRegistry.php   | 11 +----------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/admin-spa/src/routes/Customers/index.tsx b/admin-spa/src/routes/Customers/index.tsx
index d1b5b7d..d964097 100644
--- a/admin-spa/src/routes/Customers/index.tsx
+++ b/admin-spa/src/routes/Customers/index.tsx
@@ -23,8 +23,8 @@ export default function CustomersIndex() {
   const [search, setSearch] = useState('');
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
   
-  // FAB config for "New Customer" button
-  useFABConfig('customers');
+  // FAB config - 'none' because submenu has 'New' tab (per SOP)
+  useFABConfig('none');
   
   // Fetch customers
   const customersQuery = useQuery({
@@ -99,7 +99,24 @@ export default function CustomersIndex() {
   
   return (
     <div className="space-y-4">
-      {/* Toolbar */}
+      {/* Mobile: Search */}
+      <div className="md:hidden">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder={__('Search customers...')}
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            }}
+            className="pl-9"
+          />
+        </div>
+      </div>
+
+      {/* Desktop: Toolbar */}
       <div className="hidden md:block rounded-lg border border-border p-4 bg-card">
         <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-3">
           {/* Left: Bulk Actions */}
diff --git a/includes/Compat/NavigationRegistry.php b/includes/Compat/NavigationRegistry.php
index df57b1c..f614e4b 100644
--- a/includes/Compat/NavigationRegistry.php
+++ b/includes/Compat/NavigationRegistry.php
@@ -153,16 +153,7 @@ class NavigationRegistry {
                 'icon'     => 'users',
                 'children' => [
                     ['label' => __('All customers', 'woonoow'), 'mode' => 'spa', 'path' => '/customers'],
-                ],
-            ],
-            [
-                'key'      => 'coupons',
-                'label'    => __('Coupons', 'woonoow'),
-                'path'     => '/coupons',
-                'icon'     => 'tag',
-                'children' => [
-                    ['label' => __('All coupons', 'woonoow'), 'mode' => 'spa', 'path' => '/coupons'],
-                    ['label' => __('New', 'woonoow'), 'mode' => 'spa', 'path' => '/coupons/new'],
+                    ['label' => __('New', 'woonoow'), 'mode' => 'spa', 'path' => '/customers/new'],
                 ],
             ],
             [