From 80793e99eaaf2575d5ce9464467f38097c9b6c8b Mon Sep 17 00:00:00 2001
From: vickytechkey <vichunice@gmail.com>
Date: Sat, 19 Sep 2026 17:19:59 +0530
Subject: [PATCH 1/2] refactor: remove Courier Scheduled tab from dashboard
 overview page

---
 src/pages/dashboard/OverviewPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/dashboard/OverviewPage.tsx b/src/pages/dashboard/OverviewPage.tsx
index a266555..c469dd5 100644
--- a/src/pages/dashboard/OverviewPage.tsx
+++ b/src/pages/dashboard/OverviewPage.tsx
@@ -512,7 +512,6 @@ export const OverviewPage: React.FC = () => {
               { key: 'all', label: 'All Pending (14)' },
               { key: 'new', label: 'New Orders' },
               { key: 'ready', label: 'Ready for Dispatch' },
-              { key: 'scheduled', label: 'Courier Scheduled' },
               { key: 'transit', label: 'In Transit' },
             ] as const).map(tab => (
               <button
-- 
2.45.2


From 1a0648c9b58f2d6d333bfd627a62cb892a3aad3d Mon Sep 17 00:00:00 2001
From: vickytechkey <vichunice@gmail.com>
Date: Sat, 19 Sep 2026 18:10:59 +0530
Subject: [PATCH 2/2] feat: add ReturnsTrackerPage and refactor
 ReportDamageView component

---
 src/App.tsx                                |   2 +
 src/components/orders/ReportDamageView.tsx | 496 +++++++++------------
 src/pages/dashboard/OrdersPage.tsx         |   7 +-
 src/pages/dashboard/ReturnsTrackerPage.tsx | 207 +++++++++
 4 files changed, 433 insertions(+), 279 deletions(-)
 create mode 100644 src/pages/dashboard/ReturnsTrackerPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 2b401d2..2aacb47 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,6 +21,7 @@ import { InventoryPage } from './pages/dashboard/InventoryPage';
 import { BulkUploadPage } from './pages/dashboard/BulkUploadPage';
 import { AddProductPage } from './pages/dashboard/AddProductPage';
 import { OrdersPage } from './pages/dashboard/OrdersPage';
+import { ReturnsTrackerPage } from './pages/dashboard/ReturnsTrackerPage';
 import { PayoutsPage } from './pages/dashboard/PayoutsPage';
 import { StorefrontPage } from './pages/dashboard/StorefrontPage';
 import { SettingsPage } from './pages/dashboard/SettingsPage';
@@ -51,6 +52,7 @@ export const App: React.FC = () => {
             <Route path="inventory/bulk" element={<BulkUploadPage />} />
             <Route path="products/add" element={<AddProductPage />} />
             <Route path="orders" element={<OrdersPage />} />
+            <Route path="orders/returns" element={<ReturnsTrackerPage />} />
             <Route path="orders/labels" element={<ShippingLabelsPage />} />
             <Route path="orders/labels/:id" element={<LabelPreviewPage />} />
             <Route path="payouts" element={<PayoutsPage />} />
diff --git a/src/components/orders/ReportDamageView.tsx b/src/components/orders/ReportDamageView.tsx
index 9c77b27..3ab83a5 100644
--- a/src/components/orders/ReportDamageView.tsx
+++ b/src/components/orders/ReportDamageView.tsx
@@ -1,24 +1,4 @@
 import React, { useState } from 'react';
-import { 
-  ChevronRight,
-  Clock,
-  ShieldCheck,
-  Grid,
-  Package,
-  RefreshCw,
-  Calendar,
-  AlertTriangle,
-  Archive,
-  HeartCrack,
-  Unlock,
-  ImagePlus,
-  Landmark,
-  Zap,
-  ArrowLeft,
-  Send,
-  Loader2,
-  CheckCircle2
-} from 'lucide-react';
 import { OrderItem } from '../../types/seller';
 
 interface ReportDamageViewProps {
@@ -31,6 +11,7 @@ export const ReportDamageView: React.FC<ReportDamageViewProps> = ({ onBack, onTa
   const [damageType, setDamageType] = useState('outer_crushed');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
+  const [attachedPhotos, setAttachedPhotos] = useState(0);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -41,294 +22,253 @@ export const ReportDamageView: React.FC<ReportDamageViewProps> = ({ onBack, onTa
     }, 1200);
   };
 
+  const triggerFileInput = () => {
+    document.getElementById('evidenceFileInput')?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      setAttachedPhotos(prev => prev + e.target.files!.length);
+    }
+  };
+
   return (
-    <div className="report-damage-view" style={{ maxWidth: '1400px', margin: '0 auto', animation: 'fadeIn 0.2s ease-in-out' }}>
-      
-      {/* Breadcrumb & Top Indicator Bar */}
-      <div className="is-flex is-flex-wrap-wrap is-align-items-center justify-content-between gap-4 pt-4 mb-5">
-        <nav className="is-flex is-align-items-center gap-2 has-text-weight-medium is-size-7" style={{ color: '#564243' }}>
-          <a onClick={onBack} className="hover-text-primary transition-colors cursor-pointer" style={{ color: '#564243' }}>Returns & Claims</a>
-          <ChevronRight size={16} style={{ color: '#897172' }} />
-          <span className="has-text-weight-semibold" style={{ color: '#5a0118' }}>File Transit Damage Claim</span>
-        </nav>
-        <div className="is-inline-flex is-align-items-center gap-2 px-3 py-2" style={{ borderRadius: '9999px', backgroundColor: 'rgba(253, 140, 104, 0.2)', color: '#742508', fontSize: '11px', fontWeight: 600 }}>
-          <Clock size={16} />
-          <span>Claim Window: <strong className="has-text-weight-bold">31h remaining</strong> (Delivered 24 Oct, 11:30 AM)</span>
-        </div>
-      </div>
-
-      {/* Editorial Header Block */}
-      <div className="is-flex is-flex-direction-column gap-2 pb-4">
-        <div className="is-flex is-align-items-center gap-2" style={{ color: '#5a0118' }}>
-          <ShieldCheck size={20} />
-          <span className="has-text-weight-bold is-uppercase" style={{ fontSize: '11px', letterSpacing: '0.04em' }}>24-Hour Damage Protection</span>
-        </div>
-        <h1 className="title is-size-2 mb-1" style={{ letterSpacing: '-0.02em', color: '#1c1b1b', fontWeight: 700 }}>Report Transit Damage</h1>
-        <p className="is-size-6" style={{ color: '#564243', maxWidth: '42rem' }}>We take care of transit issues so you don't have to. Tell us what happened below and receive reimbursement directly to your account within 24 hours.</p>
-      </div>
-
-      {/* Bento Grid Context & Main Claim Form */}
-      <div className="is-flex is-align-items-center gap-2 pb-4 mb-6 overflow-x-auto" style={{ borderBottom: '1px solid rgba(234, 231, 231, 0.6)' }}>
-        <button onClick={() => onTabChange?.('overall')} className="button is-rounded is-small px-4 transition-all is-flex is-align-items-center" style={{ backgroundColor: 'transparent', color: '#564243', fontWeight: 500, border: 'none' }}>
-          <Grid size={18} className="mr-2" /> Overall
-        </button>
-        <button onClick={() => onTabChange?.('ready_for_pickup')} className="button is-rounded is-small px-4 transition-all is-flex is-align-items-center" style={{ backgroundColor: 'transparent', color: '#564243', fontWeight: 500, border: 'none' }}>
-          <Package size={18} className="mr-2" /> Ready for pickup
-        </button>
-        <button onClick={() => onTabChange?.('handover')} className="button is-rounded is-small px-4 transition-all is-flex is-align-items-center" style={{ backgroundColor: 'transparent', color: '#564243', fontWeight: 500, border: 'none' }}>
-          <RefreshCw size={18} className="mr-2" /> Handover
-        </button>
-        <button onClick={() => onTabChange?.('reschedule')} className="button is-rounded is-small px-4 transition-all is-flex is-align-items-center" style={{ backgroundColor: 'transparent', color: '#564243', fontWeight: 500, border: 'none' }}>
-          <Calendar size={18} className="mr-2" /> Reschedule
-        </button>
-        <button className="button is-rounded is-small px-4 transition-all is-flex is-align-items-center shadow-sm" style={{ backgroundColor: '#791b2c', color: '#ffffff', fontWeight: 600, border: 'none' }}>
-          <AlertTriangle size={18} className="mr-2" /> Report transit damage
-        </button>
-      </div>
-
-      <div style={{ maxWidth: '48rem', display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '3rem' }}>
-        
-        {/* Top Product Summary Card */}
-        <div className="card p-5 is-flex is-align-items-center justify-content-between gap-4 shadow-sm" style={{ borderRadius: '16px', backgroundColor: '#ffffff', border: '1px solid rgba(234, 231, 231, 0.6)' }}>
-          <div className="is-flex is-align-items-center gap-4">
-            <div className="flex-shrink-0" style={{ width: '64px', height: '64px', borderRadius: '12px', overflow: 'hidden', backgroundColor: '#f0eded' }}>
-              <img 
-                src={order?.imageUrl || "https://images.unsplash.com/photo-1578309139682-990522c00cc7?q=80&w=200&auto=format&fit=crop"} 
-                alt="Product" 
-                style={{ width: '100%', height: '100%', objectFit: 'cover' }} 
-              />
-            </div>
-            <div>
-              <div className="is-size-5 has-text-weight-semibold" style={{ color: '#1c1b1b' }}>{order?.productTitle || 'Bidriware Silver Inlay Floral Vase'}</div>
-              <div className="is-size-7 mt-1" style={{ color: '#564243' }}>
-                Order <span className="is-family-monospace has-text-weight-medium" style={{ color: '#1c1b1b' }}>#{order?.orderNumber || 'TDX-90650'}</span> · Blue Dart AWB {order?.awbNumber || 'BD-98214820'}
-              </div>
-            </div>
-          </div>
-          <div className="has-text-right flex-shrink-0">
-            <div className="is-size-7 has-text-weight-bold is-uppercase" style={{ color: '#564243', letterSpacing: '0.04em' }}>Declared Value</div>
-            <div className="is-size-4 has-text-weight-bold" style={{ color: '#5a0118' }}>₹{order?.amount?.toLocaleString() || '6,400'}</div>
+    <div className="flex flex-col w-full animate-[fadeIn_0.2s_ease-in-out]">
+      <div className="flex flex-col gap-8 max-w-7xl mx-auto w-full pt-4">
+        {/* Breadcrumb & Top Indicator Bar */}
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <nav className="flex items-center gap-2 font-label-md text-label-md text-on-surface-variant">
+            <button onClick={onBack} className="hover:text-primary transition-colors cursor-pointer bg-transparent border-none p-0">Returns &amp; Claims</button>
+            <span className="material-symbols-outlined text-[16px] text-outline">chevron_right</span>
+            <span className="text-primary font-semibold">File Transit Damage Claim</span>
+          </nav>
+          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-secondary-container/30 text-on-secondary-container font-label-sm text-label-sm">
+            <span className="material-symbols-outlined text-[16px]">schedule</span>
+            <span>Claim Window: <strong>31h remaining</strong> (Delivered 24 Oct, 11:30 AM)</span>
           </div>
         </div>
 
-        {/* Simple Form */}
-        <form onSubmit={handleSubmit} className="card p-6 shadow-sm" style={{ borderRadius: '16px', backgroundColor: '#ffffff', border: '1px solid rgba(234, 231, 231, 0.6)', display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-          
-          {/* Step 1: Damage Type */}
-          <div className="is-flex is-flex-direction-column gap-3">
-            <div className="is-flex is-align-items-center justify-content-between">
-              <label className="is-size-5 has-text-weight-semibold" style={{ color: '#1c1b1b' }}>Step 1 · What kind of damage occurred?</label>
-              <span className="is-size-7 has-text-weight-semibold" style={{ color: '#5a0118' }}>Select one</span>
+        {/* Editorial Header Block */}
+        <div className="flex flex-col gap-2 pb-2">
+          <div className="flex items-center gap-2">
+            <span className="material-symbols-outlined text-primary text-[20px]">verified_user</span>
+            <span className="font-label-sm text-label-sm text-primary font-bold uppercase tracking-wider">24-Hour Damage Protection</span>
+          </div>
+          <h1 className="font-headline-xl text-headline-xl text-on-surface tracking-tight">Report Transit Damage</h1>
+          <p className="font-body-md text-body-md text-on-surface-variant max-w-2xl">
+            We take care of transit issues so you don't have to. Tell us what happened below and receive reimbursement directly to your account within 24 hours.
+          </p>
+        </div>
+
+        {/* Bento Grid Context & Main Claim Form */}
+        <div className="flex items-center gap-2 border-b border-surface-container-high pb-4 overflow-x-auto">
+          <button onClick={() => onTabChange?.('overall')} className="px-4 py-2 rounded-full font-label-md text-label-md text-on-surface-variant hover:text-on-surface hover:bg-surface-container transition-all flex items-center gap-2 bg-transparent border-none">
+            <span className="material-symbols-outlined text-[18px]">grid_view</span>
+            <span>Overall</span>
+          </button>
+          <button onClick={() => onTabChange?.('ready_for_pickup')} className="px-4 py-2 rounded-full font-label-md text-label-md text-on-surface-variant hover:text-on-surface hover:bg-surface-container transition-all flex items-center gap-2 bg-transparent border-none">
+            <span className="material-symbols-outlined text-[18px]">package_2</span>
+            <span>Ready for pickup</span>
+          </button>
+          <button onClick={() => onTabChange?.('handover')} className="px-4 py-2 rounded-full font-label-md text-label-md text-on-surface-variant hover:text-on-surface hover:bg-surface-container transition-all flex items-center gap-2 bg-transparent border-none">
+            <span className="material-symbols-outlined text-[18px]">local_shipping</span>
+            <span>Handover</span>
+          </button>
+          <button onClick={() => onTabChange?.('reschedule')} className="px-4 py-2 rounded-full font-label-md text-label-md text-on-surface-variant hover:text-on-surface hover:bg-surface-container transition-all flex items-center gap-2 bg-transparent border-none">
+            <span className="material-symbols-outlined text-[18px]">event_repeat</span>
+            <span>Reschedule</span>
+          </button>
+          <button className="px-4 py-2 rounded-full font-label-md text-label-md bg-primary-container text-on-primary font-semibold shadow-sm flex items-center gap-2 border-none">
+            <span className="material-symbols-outlined text-[18px]">report_problem</span>
+            <span>Report transit damage</span>
+          </button>
+        </div>
+
+        <div className="max-w-3xl flex flex-col gap-6">
+          {/* Top Product Summary Card */}
+          <div className="bg-surface-container-lowest rounded-lg p-5 shadow-sm flex items-center justify-between gap-4">
+            <div className="flex items-center gap-4">
+              <div className="w-16 h-16 rounded-DEFAULT overflow-hidden flex-shrink-0 bg-surface-container">
+                <img 
+                  className="w-full h-full object-cover" 
+                  alt="Product" 
+                  src={order?.imageUrl || "https://lh3.googleusercontent.com/aida-public/AB6AXuD6wyh-aO1n1QVvfwlSWq7OicAFkyEoY3JW_BJc1aPPcsZEodgJhu9V_rvkLORrym6oDMd7u3KtvLu2lP5Ul1RgflZU6s-zX69km02E9II0KVrOukRG4z61WjY1VOkJtSOKIf1iRe4n178w07duSwMCdOgE4aJDLPxAL78AcsP7zrTx0rdutAfLZpIXw3GRnUxcazUV61kjwK3J7z6O2zDnZazxbg-oPNennbjHs0FBHsh6gSXU7x7oQw"} 
+                />
+              </div>
+              <div>
+                <div className="font-headline-sm text-headline-sm text-on-surface font-semibold">{order?.productTitle || 'Bidriware Silver Inlay Floral Vase'}</div>
+                <div className="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
+                  Order <span className="font-mono font-medium text-on-surface">#{order?.orderNumber || 'TDX-90650'}</span> · Blue Dart AWB {order?.awbNumber || 'BD-98214820'}
+                </div>
+              </div>
             </div>
-            <div className="columns is-mobile is-multiline is-variable is-3 mt-1">
-              
-              <div className="column is-4-tablet is-12-mobile">
-                <label 
-                  className="is-flex is-flex-direction-column gap-2 p-4 cursor-pointer transition-all h-100"
-                  style={{ 
-                    borderRadius: '12px', 
-                    backgroundColor: damageType === 'outer_crushed' ? 'rgba(255, 218, 219, 0.2)' : '#f6f3f2',
-                    border: damageType === 'outer_crushed' ? '2px solid #791b2c' : '1px solid transparent'
-                  }}
-                  onClick={() => setDamageType('outer_crushed')}
-                >
-                  <div className="is-flex is-align-items-center justify-content-between">
-                    <Archive size={22} style={{ color: '#5a0118' }} />
-                    <div style={{ color: '#791b2c' }}>
-                      {damageType === 'outer_crushed' ? <CheckCircle2 size={16} style={{ fill: '#791b2c', color: '#fff' }} /> : <div style={{ width: '16px', height: '16px', borderRadius: '50%', border: '1px solid #897172' }}></div>}
-                    </div>
+            <div className="text-right flex-shrink-0">
+              <div className="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">Declared Value</div>
+              <div className="font-headline-md text-headline-md text-primary font-bold">₹{order?.amount?.toLocaleString() || '6,400'}</div>
+            </div>
+          </div>
+
+          {/* Simple Form */}
+          <form className="bg-surface-container-lowest rounded-lg p-8 shadow-sm flex flex-col gap-8" onSubmit={handleSubmit}>
+            {/* Step 1: Damage Type */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <label className="font-headline-sm text-headline-sm text-on-surface font-semibold">Step 1 · What kind of damage occurred?</label>
+                <span className="font-label-sm text-label-sm text-primary font-semibold">Select one</span>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 pt-1">
+                <label className="flex flex-col gap-2 p-4 rounded-DEFAULT bg-surface-container-low cursor-pointer hover:bg-surface-container transition-all">
+                  <div className="flex items-center justify-between">
+                    <span className="material-symbols-outlined text-primary text-[22px]">inventory_2</span>
+                    <input 
+                      className="accent-primary w-4 h-4 cursor-pointer" 
+                      name="damage_category" 
+                      type="radio" 
+                      value="outer_crushed" 
+                      checked={damageType === 'outer_crushed'}
+                      onChange={() => setDamageType('outer_crushed')}
+                    />
                   </div>
                   <div>
-                    <span className="is-block has-text-weight-semibold mb-1" style={{ color: '#1c1b1b', fontSize: '13px' }}>Crushed outer box</span>
-                    <span className="is-block is-size-7" style={{ color: '#564243' }}>Carton impact or crushed packaging</span>
+                    <span className="font-label-md text-label-md text-on-surface font-semibold block">Crushed outer box</span>
+                    <span className="font-body-sm text-body-sm text-on-surface-variant">Carton impact or crushed packaging</span>
                   </div>
                 </label>
-              </div>
 
-              <div className="column is-4-tablet is-12-mobile">
-                <label 
-                  className="is-flex is-flex-direction-column gap-2 p-4 cursor-pointer transition-all h-100"
-                  style={{ 
-                    borderRadius: '12px', 
-                    backgroundColor: damageType === 'item_broken' ? 'rgba(255, 218, 219, 0.2)' : '#f6f3f2',
-                    border: damageType === 'item_broken' ? '2px solid #791b2c' : '1px solid transparent'
-                  }}
-                  onClick={() => setDamageType('item_broken')}
-                >
-                  <div className="is-flex is-align-items-center justify-content-between">
-                    <HeartCrack size={22} style={{ color: '#5a0118' }} />
-                    <div style={{ color: '#791b2c' }}>
-                      {damageType === 'item_broken' ? <CheckCircle2 size={16} style={{ fill: '#791b2c', color: '#fff' }} /> : <div style={{ width: '16px', height: '16px', borderRadius: '50%', border: '1px solid #897172' }}></div>}
-                    </div>
+                <label className="flex flex-col gap-2 p-4 rounded-DEFAULT bg-surface-container-low cursor-pointer hover:bg-surface-container transition-all">
+                  <div className="flex items-center justify-between">
+                    <span className="material-symbols-outlined text-primary text-[22px]">heart_broken</span>
+                    <input 
+                      className="accent-primary w-4 h-4 cursor-pointer" 
+                      name="damage_category" 
+                      type="radio" 
+                      value="item_broken" 
+                      checked={damageType === 'item_broken'}
+                      onChange={() => setDamageType('item_broken')}
+                    />
                   </div>
                   <div>
-                    <span className="is-block has-text-weight-semibold mb-1" style={{ color: '#1c1b1b', fontSize: '13px' }}>Broken handcrafted item</span>
-                    <span className="is-block is-size-7" style={{ color: '#564243' }}>Fractured craft body, silver work loose</span>
+                    <span className="font-label-md text-label-md text-on-surface font-semibold block">Broken handcrafted item</span>
+                    <span className="font-body-sm text-body-sm text-on-surface-variant">Fractured craft body, silver work loose</span>
                   </div>
                 </label>
-              </div>
 
-              <div className="column is-4-tablet is-12-mobile">
-                <label 
-                  className="is-flex is-flex-direction-column gap-2 p-4 cursor-pointer transition-all h-100"
-                  style={{ 
-                    borderRadius: '12px', 
-                    backgroundColor: damageType === 'seal_opened' ? 'rgba(255, 218, 219, 0.2)' : '#f6f3f2',
-                    border: damageType === 'seal_opened' ? '2px solid #791b2c' : '1px solid transparent'
-                  }}
-                  onClick={() => setDamageType('seal_opened')}
-                >
-                  <div className="is-flex is-align-items-center justify-content-between">
-                    <Unlock size={22} style={{ color: '#5a0118' }} />
-                    <div style={{ color: '#791b2c' }}>
-                      {damageType === 'seal_opened' ? <CheckCircle2 size={16} style={{ fill: '#791b2c', color: '#fff' }} /> : <div style={{ width: '16px', height: '16px', borderRadius: '50%', border: '1px solid #897172' }}></div>}
-                    </div>
+                <label className="flex flex-col gap-2 p-4 rounded-DEFAULT bg-surface-container-low cursor-pointer hover:bg-surface-container transition-all">
+                  <div className="flex items-center justify-between">
+                    <span className="material-symbols-outlined text-primary text-[22px]">lock_open</span>
+                    <input 
+                      className="accent-primary w-4 h-4 cursor-pointer" 
+                      name="damage_category" 
+                      type="radio" 
+                      value="seal_opened"
+                      checked={damageType === 'seal_opened'}
+                      onChange={() => setDamageType('seal_opened')}
+                    />
                   </div>
                   <div>
-                    <span className="is-block has-text-weight-semibold mb-1" style={{ color: '#1c1b1b', fontSize: '13px' }}>Seal opened / missing</span>
-                    <span className="is-block is-size-7" style={{ color: '#564243' }}>Tampered tape or missing contents</span>
+                    <span className="font-label-md text-label-md text-on-surface font-semibold block">Seal opened / missing</span>
+                    <span className="font-body-sm text-body-sm text-on-surface-variant">Tampered tape or missing contents</span>
                   </div>
                 </label>
               </div>
-              
             </div>
-          </div>
 
-          {/* Step 2: Clean Photo Upload Zone */}
-          <div className="is-flex is-flex-direction-column gap-3">
-            <div className="is-flex is-align-items-center justify-content-between">
-              <label className="is-size-5 has-text-weight-semibold" style={{ color: '#1c1b1b' }}>Step 2 · Unboxing photos</label>
-              <span className="is-size-7" style={{ color: '#564243' }}>Clear photos speed up 24h approval</span>
+            {/* Step 2: Clean Photo Upload Zone */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <label className="font-headline-sm text-headline-sm text-on-surface font-semibold">Step 2 · Unboxing photos</label>
+                <span className="font-body-sm text-body-sm text-on-surface-variant">Clear photos speed up 24h approval</span>
+              </div>
+              <div className="grid grid-cols-3 gap-4 pt-1">
+                <div className="relative rounded-DEFAULT overflow-hidden aspect-square bg-surface-container-high group">
+                  <img className="w-full h-full object-cover" alt="Outer Box Damage" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA6u7pqWempLE1qFvrT_M1flDG2BmiU6J_yB6QV2vWW01of7LKaPV_93zZzFrwMMeZrfm-2sPg2QushrrshW1BKCWBC8qUB5gMdog2VqrdYwEukv7VrnDfwr9w2x75sniZhU3_n7QVuQCTjDIpAw3AcXnokgvIHC-GdFTGhJmoMR6rP1kr1pqW3Kvz2K4cvLUyVVnrLCZCACMgKQ3IQVIbKPYYasJvLsGwDSoEUAPYbcgi8cR_TcmR78g" />
+                  <div className="absolute bottom-1.5 left-1.5 right-1.5 px-2 py-1 rounded bg-surface-container-lowest/90 backdrop-blur-sm text-on-surface font-label-sm text-label-sm truncate text-center">Box Condition</div>
+                </div>
+                <div className="relative rounded-DEFAULT overflow-hidden aspect-square bg-surface-container-high group">
+                  <img className="w-full h-full object-cover" alt="Damaged Craft Item" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC-iCtBJsTreHaI9lUkCWMHe1Qv0j0BqDTJdnyX7scqrqRQhzWTVotRacNmXbJhNUF4nhU10yHjjO_OGXBkEYeM8c0RaRO3XW7rpT7hBVZ1Uss4r8rJ1H7wCIJXuMo4kJfDxCguDtSM7agaMVx7U4loG8aoZ3oeDFBz1WrjYjT44iu4IOUoc1MPzH1XKfksErQTjyZYKCMVaLYBohjOJq_5zojOcrw4Ei_pG87BA3Lm8Nal42aFcIk3Wg" />
+                  <div className="absolute bottom-1.5 left-1.5 right-1.5 px-2 py-1 rounded bg-surface-container-lowest/90 backdrop-blur-sm text-on-surface font-label-sm text-label-sm truncate text-center">Broken Area</div>
+                </div>
+                <div 
+                  className="rounded-DEFAULT bg-surface-container-low hover:bg-surface-container transition-colors flex flex-col items-center justify-center p-4 text-center cursor-pointer aspect-square" 
+                  onClick={triggerFileInput}
+                >
+                  <div className="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center text-primary mb-1">
+                    <span className="material-symbols-outlined text-[20px]">add_photo_alternate</span>
+                  </div>
+                  <span className="font-label-md text-label-md font-semibold text-on-surface">Add Photo</span>
+                  <span id="uploadCounter" className="font-label-sm text-label-sm text-on-surface-variant">
+                    {attachedPhotos > 0 ? `${2 + attachedPhotos} attached` : 'e.g. Shipping label'}
+                  </span>
+                  <input 
+                    accept="image/*" 
+                    className="hidden" 
+                    id="evidenceFileInput" 
+                    type="file" 
+                    multiple
+                    onChange={handleFileChange}
+                  />
+                </div>
+              </div>
             </div>
-            <div className="columns is-mobile is-variable is-3 mt-1" style={{ overflowX: 'auto', flexWrap: 'nowrap' }}>
-              
-              <div className="column is-4-tablet is-5-mobile" style={{ minWidth: '160px' }}>
-                <div className="position-relative" style={{ borderRadius: '12px', overflow: 'hidden', aspectRatio: '1', backgroundColor: '#eae7e7' }}>
-                  <img src="https://images.unsplash.com/photo-1580674285054-bed31e145f59?q=80&w=300&auto=format&fit=crop" alt="Outer Box Damage" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                  <div className="position-absolute px-2 py-1 has-text-centered" style={{ bottom: '6px', left: '6px', right: '6px', borderRadius: '4px', backgroundColor: 'rgba(255, 255, 255, 0.9)', backdropFilter: 'blur(4px)', color: '#1c1b1b', fontSize: '11px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                    Box Condition
+
+            {/* Step 3: Payout Settlement Confirmation */}
+            <div className="space-y-3">
+              <label className="font-headline-sm text-headline-sm text-on-surface font-semibold">Step 3 · Settlement destination</label>
+              <div className="p-4 rounded-DEFAULT bg-surface-container-low flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-primary/10 text-primary flex items-center justify-center">
+                    <span className="material-symbols-outlined text-[20px]">account_balance</span>
+                  </div>
+                  <div>
+                    <div className="font-label-md text-label-md font-semibold text-on-surface">State Bank of India · ending in 4019</div>
+                    <div className="font-body-sm text-body-sm text-on-surface-variant">Full ₹{order?.amount?.toLocaleString() || '6,400'} payout credited directly via instant NEFT</div>
                   </div>
                 </div>
-              </div>
-
-              <div className="column is-4-tablet is-5-mobile" style={{ minWidth: '160px' }}>
-                <div className="position-relative" style={{ borderRadius: '12px', overflow: 'hidden', aspectRatio: '1', backgroundColor: '#eae7e7' }}>
-                  <img src="https://images.unsplash.com/photo-1596547611090-e22a46c306d1?q=80&w=300&auto=format&fit=crop" alt="Damaged Craft Item" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                  <div className="position-absolute px-2 py-1 has-text-centered" style={{ bottom: '6px', left: '6px', right: '6px', borderRadius: '4px', backgroundColor: 'rgba(255, 255, 255, 0.9)', backdropFilter: 'blur(4px)', color: '#1c1b1b', fontSize: '11px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                    Broken Area
-                  </div>
+                <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-tertiary-container/30 text-tertiary font-label-sm text-label-sm font-semibold">
+                  <span className="material-symbols-outlined text-[16px]">bolt</span>
+                  <span>24h Guarantee</span>
                 </div>
               </div>
-
-              <div className="column is-4-tablet is-5-mobile" style={{ minWidth: '160px' }}>
-                <label className="is-flex is-flex-direction-column is-align-items-center justify-content-center p-4 cursor-pointer transition-all" style={{ borderRadius: '12px', backgroundColor: '#f6f3f2', aspectRatio: '1', textAlign: 'center' }}>
-                  <div className="is-flex is-align-items-center justify-content-center mb-2" style={{ width: '40px', height: '40px', borderRadius: '50%', backgroundColor: '#eae7e7', color: '#5a0118' }}>
-                    <ImagePlus size={20} />
-                  </div>
-                  <span className="has-text-weight-semibold" style={{ color: '#1c1b1b', fontSize: '13px' }}>Add Photo</span>
-                  <span className="is-size-7 mt-1" style={{ color: '#564243' }}>e.g. Shipping label</span>
-                  <input type="file" className="is-hidden" accept="image/*" />
-                </label>
-              </div>
-
-            </div>
-          </div>
-
-          {/* Step 3: Payout Settlement Confirmation */}
-          <div className="is-flex is-flex-direction-column gap-3">
-            <label className="is-size-5 has-text-weight-semibold" style={{ color: '#1c1b1b' }}>Step 3 · Settlement destination</label>
-            <div className="p-4 is-flex is-align-items-center justify-content-between" style={{ borderRadius: '12px', backgroundColor: '#f6f3f2' }}>
-              <div className="is-flex is-align-items-center gap-3">
-                <div className="is-flex is-align-items-center justify-content-center flex-shrink-0" style={{ width: '40px', height: '40px', borderRadius: '50%', backgroundColor: 'rgba(90, 1, 24, 0.1)', color: '#5a0118' }}>
-                  <Landmark size={20} />
-                </div>
-                <div>
-                  <div className="has-text-weight-semibold" style={{ color: '#1c1b1b', fontSize: '13px' }}>State Bank of India · ending in 4019</div>
-                  <div className="is-size-7 mt-1" style={{ color: '#564243' }}>Full ₹{order?.amount?.toLocaleString() || '6,400'} payout credited directly via instant NEFT</div>
-                </div>
-              </div>
-              <div className="is-flex is-align-items-center gap-2 px-3 py-1 has-text-weight-semibold" style={{ borderRadius: '9999px', backgroundColor: 'rgba(0, 74, 30, 0.1)', color: '#003112', fontSize: '11px' }}>
-                <Zap size={14} /> 24h Guarantee
-              </div>
             </div>
-          </div>
 
-          {/* Bottom Actions */}
-          <div className="pt-2 is-flex is-align-items-center justify-content-between gap-4">
-            <button onClick={onBack} type="button" className="button is-rounded is-light" style={{ height: '44px', padding: '0 1.5rem', fontWeight: 600, color: '#1c1b1b', backgroundColor: '#f6f3f2', border: 'none' }}>
-              <ArrowLeft size={18} className="mr-2" /> Back
-            </button>
-            <button 
-              type="submit" 
-              className="button is-rounded shadow-sm" 
-              style={{ 
-                height: '44px', 
-                padding: '0 2rem', 
-                fontWeight: 600, 
-                backgroundColor: isSubmitted ? '#004a1e' : '#5a0118', 
-                color: '#ffffff', 
-                border: 'none',
-                transition: 'all 0.2s'
-              }}
-              disabled={isSubmitting || isSubmitted}
-            >
-              {isSubmitting ? (
-                <>
-                  <Loader2 size={18} className="mr-2 spin" /> Securing Claim Dossier...
-                </>
-              ) : isSubmitted ? (
-                <>
-                  <CheckCircle2 size={18} className="mr-2" /> Claim #CLM-8921 Dispatched
-                </>
-              ) : (
-                <>
-                  <Send size={18} className="mr-2" /> Submit Claim
-                </>
-              )}
-            </button>
-          </div>
-
-        </form>
+            {/* Bottom Actions */}
+            <div className="pt-4 flex items-center justify-between gap-4">
+              <button 
+                className="h-11 px-6 bg-surface-container-low hover:bg-surface-container-high text-on-surface font-label-md text-label-md transition-all flex items-center gap-2 rounded-full border-none cursor-pointer" 
+                onClick={onBack} 
+                type="button"
+              >
+                <span className="material-symbols-outlined text-[18px]">arrow_back</span>
+                <span>Back</span>
+              </button>
+              <button 
+                className={`h-11 px-8 ${isSubmitted ? 'bg-tertiary-container text-on-tertiary-container' : 'bg-primary hover:bg-primary-container text-on-primary'} font-label-md text-label-md transition-all shadow-sm flex items-center gap-2 rounded-full border-none cursor-pointer`} 
+                id="submitBtn" 
+                type="submit"
+                disabled={isSubmitting || isSubmitted}
+              >
+                {isSubmitting ? (
+                  <>
+                    <span className="material-symbols-outlined animate-spin text-[20px]">progress_activity</span>
+                    <span>Securing Claim Dossier...</span>
+                  </>
+                ) : isSubmitted ? (
+                  <>
+                    <span className="material-symbols-outlined text-[20px]">check_circle</span>
+                    <span>Claim #CLM-8921 Dispatched</span>
+                  </>
+                ) : (
+                  <>
+                    <span className="material-symbols-outlined text-[18px]">send</span>
+                    <span>Submit Claim</span>
+                  </>
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
-
-      <style>{`
-        .justify-content-between {
-          justify-content: space-between;
-        }
-        .justify-content-center {
-          justify-content: center;
-        }
-        .flex-direction-column {
-          flex-direction: column;
-        }
-        .position-relative {
-          position: relative;
-        }
-        .position-absolute {
-          position: absolute;
-        }
-        .h-100 {
-          height: 100%;
-        }
-        .spin {
-          animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-          100% { transform: rotate(360deg); }
-        }
-        @media (min-width: 769px) {
-          .sm-flex-row {
-            flex-direction: row;
-          }
-          .sm-items-center {
-            align-items: center;
-          }
-        }
-        @keyframes fadeIn {
-          from { opacity: 0; transform: translateY(10px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-      `}</style>
     </div>
   );
 };
+
diff --git a/src/pages/dashboard/OrdersPage.tsx b/src/pages/dashboard/OrdersPage.tsx
index 8e7a24c..20ddb9b 100644
--- a/src/pages/dashboard/OrdersPage.tsx
+++ b/src/pages/dashboard/OrdersPage.tsx
@@ -16,7 +16,8 @@ import {
   CheckCircle2,
   Inbox,
   PhoneCall,
-  ArrowRight
+  ArrowRight,
+  RefreshCw
 } from 'lucide-react';
 
 export const OrdersPage: React.FC = () => {
@@ -204,6 +205,10 @@ export const OrdersPage: React.FC = () => {
           <Truck size={16} className="mr-2" />
           Report transit damage
         </button>
+        <button onClick={() => navigate('/dashboard/orders/returns')} className="button is-rounded is-light is-small px-4" style={{ backgroundColor: '#F6F3F2', color: '#564243', fontWeight: 600 }}>
+          <RefreshCw size={16} className="mr-2" />
+          Returns Tracker
+        </button>
       </div>
 
 
diff --git a/src/pages/dashboard/ReturnsTrackerPage.tsx b/src/pages/dashboard/ReturnsTrackerPage.tsx
new file mode 100644
index 0000000..37979d1
--- /dev/null
+++ b/src/pages/dashboard/ReturnsTrackerPage.tsx
@@ -0,0 +1,207 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  Search,
+  Printer,
+  ChevronLeft,
+  ChevronRight,
+  ShieldAlert,
+  Send
+} from 'lucide-react';
+
+export const ReturnsTrackerPage: React.FC = () => {
+  const navigate = useNavigate();
+
+  const reverseShipments = [
+    {
+      id: 'RTN-201',
+      date: 'Oct, 11:14 AM',
+      title: 'Bidriware Silver Inlay Vase',
+      sku: '#TDX-90650',
+      quantity: 1,
+      amount: 6400,
+      customerName: 'Rajiv Malhotra',
+      customerCity: 'Mumbai',
+      customerPin: '400050',
+      returnReason: 'Outer carton damage',
+      reasonSub: 'Claim filed (₹6,400)',
+      status: 'Request Raised',
+      statusColor: 'is-danger is-light', // matches red background
+      carrier: 'Blue Dart Express',
+      awb: 'RTN-BLD-91024',
+      isDamage: true,
+      imageUrl: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD6wyh-aO1n1QVvfwlSWq7OicAFkyEoY3JW_BJc1aPPcsZEodgJhu9V_rvkLORrym6oDMd7u3KtvLu2lP5Ul1RgflZU6s-zX69km02E9II0KVrOukRG4z61WjY1VOkJtSOKIf1iRe4n178w07duSwMCdOgE4aJDLPxAL78AcsP7zrTx0rdutAfLZpIXw3GRnUxcazUV61kjwK3J7z6O2zDnZazxbg-oPNennbjHs0FBHsh6gSXU7x7oQw'
+    },
+    {
+      id: 'RTN-194',
+      date: 'Oct, 09:30 AM',
+      title: 'Maheshwari Silk Dupatta',
+      sku: '#TDX-90412',
+      quantity: 2,
+      amount: 3800,
+      customerName: 'Sneha Deshmukh',
+      customerCity: 'Pune',
+      customerPin: '411038',
+      returnReason: 'Color border exchange',
+      reasonSub: 'Pristine box intact',
+      reasonColor: 'has-text-success-dark',
+      status: 'Return Transit',
+      statusColor: 'is-warning is-light',
+      carrier: 'Delhivery Surface',
+      awb: 'DEL-RTN-44912',
+      isDamage: false,
+      imageUrl: 'https://images.unsplash.com/photo-1605518216938-7c31b7b14ad0?auto=format&fit=crop&w=100&q=80'
+    },
+    {
+      id: 'RTN-188',
+      date: 'Oct, 02:20 PM',
+      title: 'Terracotta Chai Set',
+      sku: '#TDX-90119',
+      quantity: 1, // Set of 6
+      amount: 2450,
+      customerName: 'Dr. Arvind Swaminathan',
+      customerCity: 'Chennai',
+      customerPin: '600020',
+      returnReason: 'Hairline defect in 1 cup',
+      reasonSub: '₹800 claim settled',
+      status: 'Return received',
+      statusColor: 'is-success is-light',
+      carrier: 'DTDC Priority',
+      awb: 'DTC-RTN-22109',
+      isDamage: false,
+      imageUrl: 'https://images.unsplash.com/photo-1610701596007-11502861dcfa?auto=format&fit=crop&w=100&q=80'
+    }
+  ];
+
+  return (
+    <div className="returns-tracker-page" style={{ maxWidth: '1400px', margin: '0 auto' }}>
+      {/* Top Header Section */}
+      <div className="is-flex is-justify-content-space-between is-align-items-flex-start mb-5 pb-4" style={{ borderBottom: '1px solid var(--trad-border)' }}>
+        <div>
+          <nav className="is-flex is-align-items-center mb-2 is-size-7 has-text-weight-semibold">
+            <span style={{ color: '#564243', cursor: 'pointer' }} onClick={() => navigate('/dashboard/orders')}>Orders & Dispatch</span>
+            <span className="mx-2" style={{ color: '#897172' }}>›</span>
+            <span style={{ color: 'var(--trad-maroon)' }}>Return Order Tracker</span>
+          </nav>
+          <h1 className="title is-size-2 mb-2" style={{ letterSpacing: '-0.02em', fontWeight: 700, color: '#1c1b1b' }}>Return Order Tracker</h1>
+          <p className="is-size-6 has-text-grey" style={{ maxWidth: '800px', color: '#564243' }}>
+            Track reverse logistics sweeps, in-transit customer returns, unboxing quality checks, and 24-hour transit damage claims across artisan craft hubs.
+          </p>
+        </div>
+        <div className="is-flex is-align-items-center gap-3">
+          <button 
+            onClick={() => navigate('/dashboard/orders')} // Ideally goes to report damage view
+            className="button is-rounded is-trad-primary shadow-sm" 
+            style={{ height: '44px', fontWeight: 600, fontSize: '0.9rem', padding: '0 1.5rem', backgroundColor: '#791b2c', color: '#fff' }}
+          >
+            <ShieldAlert size={18} className="mr-2" />
+            File Damage Claim
+          </button>
+        </div>
+      </div>
+
+      {/* Orders Table Container */}
+      <div className="card" style={{ borderRadius: '16px', border: '1px solid var(--trad-border)', boxShadow: '0 2px 8px rgba(0,0,0,0.02)', overflow: 'hidden', backgroundColor: '#ffffff' }}>
+        {/* Table Filters Header */}
+        <div className="p-4 is-flex is-flex-wrap-wrap is-align-items-center is-justify-content-space-between" style={{ borderBottom: '1px solid var(--trad-border)', gap: '1rem' }}>
+          <div className="is-flex is-align-items-center" style={{ gap: '0.5rem' }}>
+            <span className="has-text-weight-bold" style={{ color: '#1c1b1b' }}>Reverse Shipments</span>
+            <span className="tag is-rounded" style={{ backgroundColor: '#f0eded', color: '#564243', fontWeight: 600 }}>3 Active</span>
+          </div>
+          <div className="is-flex is-align-items-center gap-3">
+            <span className="is-size-7 has-text-grey">Scroll table</span>
+            <div className="is-flex gap-1">
+              <button className="button is-small is-rounded is-white" style={{ width: '32px', height: '32px', padding: 0, border: '1px solid #e5e2e1' }}>
+                <ChevronLeft size={16} />
+              </button>
+              <button className="button is-small is-rounded is-white" style={{ width: '32px', height: '32px', padding: 0, border: '1px solid #e5e2e1' }}>
+                <ChevronRight size={16} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Table */}
+        <div className="table-container mb-0">
+          <table className="table is-fullwidth is-hoverable" style={{ borderCollapse: 'collapse' }}>
+            <thead>
+              <tr style={{ backgroundColor: '#ffffff' }}>
+                <th className="has-text-grey is-size-7 pb-4" style={{ textTransform: 'uppercase', letterSpacing: '0.04em', borderBottom: '1px solid #e5e2e1' }}>Return<br/>& Date</th>
+                <th className="has-text-grey is-size-7 pb-4" style={{ textTransform: 'uppercase', letterSpacing: '0.04em', borderBottom: '1px solid #e5e2e1' }}>Order & Craft Item</th>
+                <th className="has-text-grey is-size-7 pb-4" style={{ textTransform: 'uppercase', letterSpacing: '0.04em', borderBottom: '1px solid #e5e2e1' }}>Customer &<br/>City</th>
+                <th className="has-text-grey is-size-7 pb-4" style={{ textTransform: 'uppercase', letterSpacing: '0.04em', borderBottom: '1px solid #e5e2e1' }}>Return<br/>Reason</th>
+                <th className="has-text-grey is-size-7 pb-4" style={{ textTransform: 'uppercase', letterSpacing: '0.04em', borderBottom: '1px solid #e5e2e1' }}>Status</th>
+                <th className="has-text-grey is-size-7 pb-4" style={{ textTransform: 'uppercase', letterSpacing: '0.04em', borderBottom: '1px solid #e5e2e1' }}>Carrier /<br/>AWB</th>
+                <th className="has-text-grey is-size-7 pb-4 has-text-right" style={{ textTransform: 'uppercase', letterSpacing: '0.04em', borderBottom: '1px solid #e5e2e1' }}>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {reverseShipments.map((rtn) => (
+                <tr key={rtn.id} style={{ borderBottom: '1px solid #e5e2e1' }}>
+                  <td className="is-vcentered py-4">
+                    <div className="has-text-weight-bold is-size-7" style={{ color: '#5a0118' }}>{rtn.id}</div>
+                    <div className="is-size-7 mt-1" style={{ color: '#564243' }}>{rtn.date}</div>
+                  </td>
+                  <td className="is-vcentered py-4">
+                    <div className="is-flex is-align-items-center gap-3">
+                      <div style={{ width: '40px', height: '40px', borderRadius: '50%', backgroundColor: '#F6F3F2', flexShrink: 0, overflow: 'hidden' }}>
+                        <img src={rtn.imageUrl} alt={rtn.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                      </div>
+                      <div>
+                        <div className="has-text-weight-semibold is-size-7" style={{ color: '#1c1b1b' }}>{rtn.title}</div>
+                        <div className="is-size-7 mt-1" style={{ color: '#564243' }}>{rtn.sku} · {rtn.quantity} {rtn.quantity === 1 ? 'Unit' : 'Units'} (₹{rtn.amount.toLocaleString()})</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="is-vcentered py-4">
+                    <div className="is-size-7" style={{ color: '#1c1b1b' }}>{rtn.customerName}</div>
+                    <div className="is-size-7 mt-1 is-flex is-align-items-center" style={{ color: '#564243' }}>
+                      <span className="material-symbols-outlined mr-1" style={{ fontSize: '14px' }}>location_on</span>
+                      {rtn.customerCity} ({rtn.customerPin})
+                    </div>
+                  </td>
+                  <td className="is-vcentered py-4">
+                    <div className="is-size-7 is-flex is-align-items-center" style={{ color: rtn.isDamage ? '#ba1a1a' : '#1c1b1b' }}>
+                      {rtn.isDamage && <span className="material-symbols-outlined mr-1" style={{ fontSize: '14px' }}>warning</span>}
+                      {rtn.returnReason}
+                    </div>
+                    <div className="is-size-7 mt-1" style={{ color: rtn.reasonColor || '#564243' }}>{rtn.reasonSub}</div>
+                  </td>
+                  <td className="is-vcentered py-4">
+                    <span className={`tag is-rounded has-text-weight-semibold ${rtn.statusColor}`} style={{ padding: '0 12px', height: '32px', fontSize: '12px' }}>
+                      <span style={{ width: '6px', height: '6px', borderRadius: '50%', backgroundColor: 'currentColor', marginRight: '6px' }}></span>
+                      {rtn.status}
+                    </span>
+                  </td>
+                  <td className="is-vcentered py-4">
+                    <div className="is-size-7" style={{ color: '#1c1b1b' }}>{rtn.carrier}</div>
+                    <div className="is-size-7 mt-1" style={{ color: '#564243' }}>{rtn.awb}</div>
+                  </td>
+                  <td className="is-vcentered py-4 has-text-right">
+                    <button className="button is-small is-rounded is-light px-4" style={{ height: '36px', fontWeight: 600, backgroundColor: '#f6f3f2', border: 'none', color: '#1c1b1b' }}>
+                      <Send size={14} className="mr-2" />
+                      Track
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination Footer */}
+        <div className="p-4 is-flex is-align-items-center is-justify-content-space-between" style={{ backgroundColor: '#fcf9f8', borderTop: '1px solid #e5e2e1' }}>
+          <span className="is-size-7" style={{ color: '#564243' }}>
+            Showing 3 of 7 active reverse shipments
+          </span>
+          <div className="is-flex is-align-items-center gap-1">
+            <button className="button is-small is-rounded is-white" style={{ border: 'none', color: '#564243', fontWeight: 500, backgroundColor: 'transparent' }}>Previous</button>
+            <button className="button is-small is-rounded is-trad-primary has-text-weight-bold" style={{ width: '32px', height: '32px', padding: 0, backgroundColor: '#791b2c', color: '#fff', border: 'none' }}>1</button>
+            <button className="button is-small is-rounded is-white" style={{ width: '32px', height: '32px', padding: 0, border: 'none', color: '#564243', backgroundColor: 'transparent' }}>2</button>
+            <button className="button is-small is-rounded is-white" style={{ border: 'none', color: '#564243', fontWeight: 500, backgroundColor: 'transparent' }}>Next</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
-- 
2.45.2