From 40cac8e2e34bdbcbe8f235a1335b3f56e107862e Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Fri, 21 Nov 2025 00:43:15 +0700
Subject: [PATCH] refactor(customers): Use VerticalTabForm for better
 desktop/mobile layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed from horizontal Tabs to VerticalTabForm component:

Layout Changes:

Desktop (≥768px):
✅ Vertical tabs on left side
✅ Content on right side
✅ Better use of wide screens
✅ Reduces horizontal scrolling
✅ More compact, professional look

Mobile (<768px):
✅ Horizontal tabs at top
✅ Scrollable tabs if needed
✅ Full-width content below
✅ Touch-friendly navigation

Structure:
[Customer Info Card]
[Tabs] [Content Area]
  │
  ├─ Overview (Stats + Contact)
  ├─ Orders (Full history)
  └─ Address (Billing + Shipping)

Benefits:
✅ Consistent with form pages (Products, Coupons, Customers edit)
✅ Better desktop experience (vertical tabs)
✅ Better mobile experience (horizontal tabs)
✅ Responsive by default
✅ Clean, organized layout
✅ No wasted space on wide screens

Technical:
- Uses VerticalTabForm component
- FormSection for each tab content
- Automatic scroll spy
- Mobile horizontal tabs (lg:hidden)
- Desktop vertical tabs (hidden lg:block)

Result: Customer detail page now has proper responsive tab layout matching form pages!
---
 admin-spa/src/routes/Customers/Detail.tsx | 41 +++++++++++------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/admin-spa/src/routes/Customers/Detail.tsx b/admin-spa/src/routes/Customers/Detail.tsx
index 177ea1e..c361bec 100644
--- a/admin-spa/src/routes/Customers/Detail.tsx
+++ b/admin-spa/src/routes/Customers/Detail.tsx
@@ -10,7 +10,7 @@ import { ErrorCard } from '@/components/ErrorCard';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { VerticalTabForm, FormSection } from '@/components/VerticalTabForm';
 import { ArrowLeft, Edit, Mail, Calendar, ShoppingBag, DollarSign, User, MapPin } from 'lucide-react';
 import { formatMoney } from '@/lib/currency';
 
@@ -18,7 +18,6 @@ export default function CustomerDetail() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const customerId = parseInt(id || '0', 10);
-  const [activeTab, setActiveTab] = React.useState('overview');
 
   // Fetch customer data
   const customerQuery = useQuery({
@@ -113,18 +112,18 @@ export default function CustomerDetail() {
         </div>
       </Card>
 
-      {/* Tabs */}
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <TabsList className="grid w-full grid-cols-3">
-          <TabsTrigger value="overview">{__('Overview')}</TabsTrigger>
-          <TabsTrigger value="orders">{__('Orders')}</TabsTrigger>
-          <TabsTrigger value="address">{__('Address')}</TabsTrigger>
-        </TabsList>
-
-        {/* Overview Tab */}
-        <TabsContent value="overview" className="space-y-6">
+      {/* Vertical Tabs */}
+      <VerticalTabForm
+        tabs={[
+          { id: 'overview', label: __('Overview') },
+          { id: 'orders', label: __('Orders') },
+          { id: 'address', label: __('Address') },
+        ]}
+      >
+        {/* Overview Section */}
+        <FormSection id="overview">
           {/* Stats Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
             <Card className="p-6">
               <div className="flex items-center gap-2 text-muted-foreground mb-2">
                 <ShoppingBag className="w-5 h-5" />
@@ -177,10 +176,10 @@ export default function CustomerDetail() {
               )}
             </div>
           </Card>
-        </TabsContent>
+        </FormSection>
 
-        {/* Orders Tab */}
-        <TabsContent value="orders" className="space-y-4">
+        {/* Orders Section */}
+        <FormSection id="orders">
           <Card className="p-6">
             <div className="flex items-center justify-between mb-4">
               <h3 className="text-lg font-semibold">{__('Order History')}</h3>
@@ -238,10 +237,10 @@ export default function CustomerDetail() {
               </div>
             )}
           </Card>
-        </TabsContent>
+        </FormSection>
 
-        {/* Address Tab */}
-        <TabsContent value="address" className="space-y-6">
+        {/* Address Section */}
+        <FormSection id="address">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             {/* Billing Address */}
             <Card className="p-6">
@@ -309,8 +308,8 @@ export default function CustomerDetail() {
               )}
             </Card>
           </div>
-        </TabsContent>
-      </Tabs>
+        </FormSection>
+      </VerticalTabForm>
     </div>
   );
 }