From 5eb0945a60c93ee71194a7e18d028adcef46c28b Mon Sep 17 00:00:00 2001
From: vickytechkey <vichunice@gmail.com>
Date: Sun, 9 Aug 2026 07:23:57 +0530
Subject: [PATCH] test the job upgrade

---
 src/App.tsx | 417 ++++++++++++++++++++++++++--------------------------
 1 file changed, 208 insertions(+), 209 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0693478..a61877f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,7 +22,7 @@ interface Order {
   quantity: number
   customer: string
   total: number
-  status: 'Ready to Ship' | 'Shipped' | 'Delivered' | 'Cancelled'
+  status: 'Ready to Ship test' | 'Shipped' | 'Delivered' | 'Cancelled'
   carrier: string
   tracking: string
   eta: string
@@ -42,7 +42,7 @@ interface ReturnRequest {
 export default function App() {
   const [currentPage, setCurrentPage] = useState<Page>('home')
   const [activeTab, setActiveTab] = useState<'login' | 'register'>('login')
-  
+
   // Registration / Onboarding Form States
   const [email, setEmail] = useState('')
   const [phone, setPhone] = useState('')
@@ -50,7 +50,7 @@ export default function App() {
   const [gstin, setGstin] = useState('29AAAAA1111A1Z1')
   const [isGstinVerified, setIsGstinVerified] = useState(true)
   const [isVerifyingGstin, setIsVerifyingGstin] = useState(false)
-  
+
   // Profile Completion States
   const [storeName, setStoreName] = useState('My Artisan Handloom')
   const [storeLogo, setStoreLogo] = useState<string | null>(null)
@@ -66,12 +66,12 @@ export default function App() {
   const [dashTab, setDashTab] = useState<DashboardTab>('overview')
   const [dateFilter, setDateFilter] = useState<DateFilter>('year')
   const [customDates, setCustomDates] = useState({ start: '2026-06-01', end: '2026-06-15' })
-  
+
   // Lists
   const [products, setProducts] = useState<Product[]>(CONFIG.dashboardData.initialProducts)
   const [orders] = useState<Order[]>(CONFIG.dashboardData.initialOrders as Order[])
   const [returns, setReturns] = useState<ReturnRequest[]>(CONFIG.dashboardData.initialReturns as ReturnRequest[])
-  
+
   // Forms & Editing
   const [productForm, setProductForm] = useState({
     id: '',
@@ -83,7 +83,7 @@ export default function App() {
     image: 'https://images.unsplash.com/photo-1544022613-e87ca75a784a?auto=format&fit=crop&q=80&w=100'
   })
   const [isEditingProduct, setIsEditingProduct] = useState(false)
-  
+
   // Payout outstanding states
   const [wallet, setWallet] = useState({
     outstanding: 850.00,
@@ -142,7 +142,7 @@ export default function App() {
   }
 
   // --- Dashboard Logic Actions ---
-  
+
   // Product creation/modification
   const handleSaveProduct = (e: React.FormEvent) => {
     e.preventDefault()
@@ -181,7 +181,7 @@ export default function App() {
     if (!e.target.files?.length) return
     setIsParsingBulk(true)
     setBulkLog(['Parsing CSV file template...', 'Validating rows against inventory Schema...'])
-    
+
     setTimeout(() => {
       const parsedProducts: Product[] = [
         { id: String(products.length + 1), title: 'Hand-Carved Walnut Bowl', category: 'Kitchenware', price: 65.00, stock: 15, sku: 'BOWL-WAL-12', image: 'https://images.unsplash.com/photo-1610701596007-11502861dcfa?auto=format&fit=crop&q=80&w=100' },
@@ -253,25 +253,25 @@ export default function App() {
           <span className="logo-text">{CONFIG.companyName}</span>
         </div>
         <nav className="nav-links">
-          <button 
+          <button
             className={`nav-link ${currentPage === 'home' ? 'active' : ''}`}
             onClick={() => navigateTo('home')}
           >
             Platform
           </button>
-          <button 
+          <button
             className="nav-link"
             onClick={() => navigateTo('home')}
           >
             Pricing
           </button>
-          <button 
+          <button
             className={`nav-link ${currentPage === 'about' ? 'active' : ''}`}
             onClick={() => navigateTo('about')}
           >
             Success Stories
           </button>
-          <button 
+          <button
             className={`nav-link ${currentPage === 'contact' ? 'active' : ''}`}
             onClick={() => navigateTo('contact')}
           >
@@ -299,7 +299,7 @@ export default function App() {
       {/* Main Content Area */}
       {currentPage !== 'dashboard' ? (
         <main className={`main-content ${currentPage === 'home' ? 'full-width' : ''}`}>
-          
+
           {/* HOMEPAGE VIEW */}
           {currentPage === 'home' && (
             <div>
@@ -322,10 +322,10 @@ export default function App() {
                   </div>
                 </div>
                 <div className="hero-image-wrapper">
-                  <img 
-                    src={CONFIG.hero.image} 
-                    alt="Artisans Crafting" 
-                    className="hero-img" 
+                  <img
+                    src={CONFIG.hero.image}
+                    alt="Artisans Crafting"
+                    className="hero-img"
                   />
                 </div>
               </section>
@@ -344,10 +344,10 @@ export default function App() {
 
               <section className="featured-artisan-section">
                 <div className="artisan-card">
-                  <img 
-                    src={CONFIG.featuredArtisan.avatar} 
-                    alt="Featured Artisan" 
-                    className="artisan-avatar" 
+                  <img
+                    src={CONFIG.featuredArtisan.avatar}
+                    alt="Featured Artisan"
+                    className="artisan-avatar"
                   />
                   <div className="artisan-info">
                     <h4>Featured Artisan</h4>
@@ -370,7 +370,7 @@ export default function App() {
                   {CONFIG.about.missionDescription}
                 </p>
               </div>
-              
+
               <div className="team-section">
                 <h3>Meet Our Leaders</h3>
                 <div className="team-grid">
@@ -413,7 +413,7 @@ export default function App() {
                   </button>
                 </form>
               </div>
-              
+
               <div className="contact-info-panel">
                 <div className="info-item">
                   <h4>Address</h4>
@@ -427,7 +427,7 @@ export default function App() {
                   <h4>Partner Hotline</h4>
                   <p>{CONFIG.supportPhone}</p>
                 </div>
-                
+
                 <div className="map-placeholder">
                   📍 Interactive Map Preview
                 </div>
@@ -439,13 +439,13 @@ export default function App() {
           {(currentPage === 'login' || currentPage === 'signup') && (
             <div className="form-card">
               <div className="tab-container">
-                <button 
+                <button
                   className={`tab-btn ${activeTab === 'login' ? 'active' : ''}`}
                   onClick={() => { setActiveTab('login'); navigateTo('login'); }}
                 >
                   Login
                 </button>
-                <button 
+                <button
                   className={`tab-btn ${activeTab === 'register' ? 'active' : ''}`}
                   onClick={() => { setActiveTab('register'); navigateTo('signup'); }}
                 >
@@ -458,26 +458,26 @@ export default function App() {
                   <h2 className="form-card-title">Supplier Portal Access</h2>
                   <div className="form-group">
                     <label htmlFor="login-email">Business Email</label>
-                    <input 
+                    <input
                       id="login-email"
-                      type="email" 
-                      className="form-control" 
-                      placeholder="Enter your email" 
+                      type="email"
+                      className="form-control"
+                      placeholder="Enter your email"
                       value={email}
                       onChange={(e) => setEmail(e.target.value)}
-                      required 
+                      required
                     />
                   </div>
                   <div className="form-group">
                     <label htmlFor="login-password">Password</label>
-                    <input 
+                    <input
                       id="login-password"
-                      type="password" 
-                      className="form-control" 
-                      placeholder="Enter your password" 
+                      type="password"
+                      className="form-control"
+                      placeholder="Enter your password"
                       value={password}
                       onChange={(e) => setPassword(e.target.value)}
-                      required 
+                      required
                     />
                   </div>
                   <div style={{ textAlign: 'right', marginBottom: '1.5rem' }}>
@@ -495,50 +495,50 @@ export default function App() {
                   <h2 className="form-card-title">Create Your Supplier Account</h2>
                   <div className="form-group">
                     <label htmlFor="reg-email">Business Email *</label>
-                    <input 
+                    <input
                       id="reg-email"
-                      type="email" 
-                      className="form-control" 
-                      placeholder="Enter email address" 
+                      type="email"
+                      className="form-control"
+                      placeholder="Enter email address"
                       value={email}
                       onChange={(e) => setEmail(e.target.value)}
-                      required 
+                      required
                     />
                   </div>
                   <div className="form-group">
                     <label htmlFor="reg-phone">Mobile Number *</label>
-                    <input 
+                    <input
                       id="reg-phone"
-                      type="tel" 
-                      className="form-control" 
-                      placeholder="Enter 10-digit number" 
+                      type="tel"
+                      className="form-control"
+                      placeholder="Enter 10-digit number"
                       value={phone}
                       onChange={(e) => setPhone(e.target.value)}
-                      required 
+                      required
                     />
                   </div>
                   <div className="form-group">
                     <label htmlFor="reg-pass">Create Password *</label>
-                    <input 
+                    <input
                       id="reg-pass"
-                      type="password" 
-                      className="form-control" 
-                      placeholder="Minimum 8 characters" 
+                      type="password"
+                      className="form-control"
+                      placeholder="Minimum 8 characters"
                       value={password}
                       onChange={(e) => setPassword(e.target.value)}
-                      required 
+                      required
                     />
                   </div>
                   <div className="form-group">
                     <label htmlFor="reg-gst">GSTIN / Tax ID *</label>
-                    <input 
+                    <input
                       id="reg-gst"
-                      type="text" 
-                      className="form-control" 
-                      placeholder="Enter GSTIN format" 
+                      type="text"
+                      className="form-control"
+                      placeholder="Enter GSTIN format"
                       value={gstin}
                       onChange={(e) => setGstin(e.target.value)}
-                      required 
+                      required
                     />
                   </div>
                   <button type="submit" className="btn btn-primary" style={{ width: '100%', padding: '0.75rem', marginTop: '1rem' }}>
@@ -560,18 +560,18 @@ export default function App() {
               </div>
 
               <h2 className="form-card-title">Complete Your Supplier Profile</h2>
-              
+
               <form onSubmit={handleProfileSubmit}>
                 <div className="form-group">
                   <label htmlFor="store-name">Store Display Name *</label>
-                  <input 
+                  <input
                     id="store-name"
-                    type="text" 
-                    className="form-control" 
-                    placeholder="Enter store name" 
+                    type="text"
+                    className="form-control"
+                    placeholder="Enter store name"
                     value={storeName}
                     onChange={(e) => setStoreName(e.target.value)}
-                    required 
+                    required
                   />
                 </div>
 
@@ -585,10 +585,10 @@ export default function App() {
                         <span style={{ fontSize: '1.5rem', color: 'var(--text-muted)' }}>🖼️</span>
                       )}
                     </div>
-                    <input 
+                    <input
                       id="store-logo"
-                      type="file" 
-                      accept="image/*" 
+                      type="file"
+                      accept="image/*"
                       onChange={handleLogoChange}
                       style={{ fontSize: '0.9rem' }}
                     />
@@ -597,11 +597,11 @@ export default function App() {
 
                 <div className="form-group">
                   <label htmlFor="store-bio">About Your Craft / Business *</label>
-                  <textarea 
+                  <textarea
                     id="store-bio"
-                    className="form-control" 
-                    rows={3} 
-                    placeholder="Describe your craft, materials, and artisan history..." 
+                    className="form-control"
+                    rows={3}
+                    placeholder="Describe your craft, materials, and artisan history..."
                     value={businessBio}
                     onChange={(e) => setBusinessBio(e.target.value)}
                     required
@@ -611,39 +611,39 @@ export default function App() {
                 <div className="form-group">
                   <label>Business Address for Pickup *</label>
                   <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '0.75rem', marginBottom: '0.75rem' }}>
-                    <input 
-                      type="text" 
-                      className="form-control" 
-                      placeholder="Street Address" 
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Street Address"
                       value={address.street}
-                      onChange={(e) => setAddress({...address, street: e.target.value})}
-                      required 
+                      onChange={(e) => setAddress({ ...address, street: e.target.value })}
+                      required
                     />
-                    <input 
-                      type="text" 
-                      className="form-control" 
-                      placeholder="City" 
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="City"
                       value={address.city}
-                      onChange={(e) => setAddress({...address, city: e.target.value})}
-                      required 
+                      onChange={(e) => setAddress({ ...address, city: e.target.value })}
+                      required
                     />
                   </div>
                   <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
-                    <input 
-                      type="text" 
-                      className="form-control" 
-                      placeholder="State" 
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="State"
                       value={address.state}
-                      onChange={(e) => setAddress({...address, state: e.target.value})}
-                      required 
+                      onChange={(e) => setAddress({ ...address, state: e.target.value })}
+                      required
                     />
-                    <input 
-                      type="text" 
-                      className="form-control" 
-                      placeholder="Pincode" 
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Pincode"
                       value={address.pincode}
-                      onChange={(e) => setAddress({...address, pincode: e.target.value})}
-                      required 
+                      onChange={(e) => setAddress({ ...address, pincode: e.target.value })}
+                      required
                     />
                   </div>
                 </div>
@@ -651,17 +651,17 @@ export default function App() {
                 <div className="form-group">
                   <label htmlFor="verify-gst">GSTIN *</label>
                   <div style={{ display: 'flex', gap: '0.75rem' }}>
-                    <input 
+                    <input
                       id="verify-gst"
-                      type="text" 
-                      className="form-control" 
-                      placeholder="Verify GSTIN" 
+                      type="text"
+                      className="form-control"
+                      placeholder="Verify GSTIN"
                       value={gstin}
                       onChange={(e) => setGstin(e.target.value)}
-                      required 
+                      required
                     />
-                    <button 
-                      type="button" 
+                    <button
+                      type="button"
                       className={`btn ${isGstinVerified ? 'btn-secondary' : 'btn-primary'}`}
                       onClick={handleVerifyGstin}
                       disabled={isVerifyingGstin || isGstinVerified}
@@ -681,8 +681,8 @@ export default function App() {
                   <button type="button" className="btn btn-outline-dark" onClick={() => navigateTo('signup')}>
                     Back
                   </button>
-                  <button 
-                    type="submit" 
+                  <button
+                    type="submit"
                     className="btn btn-primary"
                     style={{ backgroundColor: 'var(--accent)', color: 'var(--primary)' }}
                   >
@@ -705,7 +705,7 @@ export default function App() {
 
               <div style={{ fontSize: '4rem', marginBottom: '1.5rem' }}>🎉</div>
               <h2 className="form-card-title">Welcome to {CONFIG.companyName}!</h2>
-              
+
               <p style={{ color: 'var(--text-muted)', marginBottom: '2rem', fontSize: '1.05rem' }}>
                 Your registration is under review. We will verify your GSTIN credentials and activate your dashboard access within 24-48 hours.
               </p>
@@ -739,8 +739,8 @@ export default function App() {
                 </div>
               </div>
 
-              <button 
-                className="btn btn-dark" 
+              <button
+                className="btn btn-dark"
                 style={{ marginTop: '2.5rem', width: '100%', padding: '0.8rem' }}
                 onClick={() => navigateTo('dashboard')}
               >
@@ -753,7 +753,7 @@ export default function App() {
       ) : (
         /* --- FULL SERVICE SUPPLIER ACTIVE DASHBOARD PAGE --- */
         <div className="dashboard-container">
-          
+
           {/* Sidebar */}
           <aside className="dashboard-sidebar">
             <div style={{ marginBottom: '2rem', paddingLeft: '1rem' }}>
@@ -762,7 +762,7 @@ export default function App() {
             </div>
             <ul className="sidebar-menu">
               <li>
-                <button 
+                <button
                   className={`sidebar-item-btn ${dashTab === 'overview' ? 'active' : ''}`}
                   onClick={() => setDashTab('overview')}
                 >
@@ -770,7 +770,7 @@ export default function App() {
                 </button>
               </li>
               <li>
-                <button 
+                <button
                   className={`sidebar-item-btn ${dashTab === 'products' ? 'active' : ''}`}
                   onClick={() => setDashTab('products')}
                 >
@@ -778,7 +778,7 @@ export default function App() {
                 </button>
               </li>
               <li>
-                <button 
+                <button
                   className={`sidebar-item-btn ${dashTab === 'orders' ? 'active' : ''}`}
                   onClick={() => setDashTab('orders')}
                 >
@@ -786,7 +786,7 @@ export default function App() {
                 </button>
               </li>
               <li>
-                <button 
+                <button
                   className={`sidebar-item-btn ${dashTab === 'returns' ? 'active' : ''}`}
                   onClick={() => setDashTab('returns')}
                 >
@@ -794,7 +794,7 @@ export default function App() {
                 </button>
               </li>
               <li>
-                <button 
+                <button
                   className={`sidebar-item-btn ${dashTab === 'wallet' ? 'active' : ''}`}
                   onClick={() => setDashTab('wallet')}
                 >
@@ -802,7 +802,7 @@ export default function App() {
                 </button>
               </li>
               <li>
-                <button 
+                <button
                   className={`sidebar-item-btn ${dashTab === 'settings' ? 'active' : ''}`}
                   onClick={() => setDashTab('settings')}
                 >
@@ -814,7 +814,7 @@ export default function App() {
 
           {/* Main Dashboard Space */}
           <section className="dashboard-main">
-            
+
             {/* OVERVIEW PANEL */}
             {dashTab === 'overview' && (
               <div>
@@ -832,11 +832,11 @@ export default function App() {
                   <div className="custom-date-panel">
                     <div className="form-group" style={{ margin: 0 }}>
                       <label style={{ fontSize: '0.75rem' }}>Start Date</label>
-                      <input type="date" className="form-control" value={customDates.start} onChange={e => setCustomDates({...customDates, start: e.target.value})} />
+                      <input type="date" className="form-control" value={customDates.start} onChange={e => setCustomDates({ ...customDates, start: e.target.value })} />
                     </div>
                     <div className="form-group" style={{ margin: 0 }}>
                       <label style={{ fontSize: '0.75rem' }}>End Date</label>
-                      <input type="date" className="form-control" value={customDates.end} onChange={e => setCustomDates({...customDates, end: e.target.value})} />
+                      <input type="date" className="form-control" value={customDates.end} onChange={e => setCustomDates({ ...customDates, end: e.target.value })} />
                     </div>
                   </div>
                 )}
@@ -867,9 +867,9 @@ export default function App() {
                   </div>
                   <div className="main-bar-chart">
                     {selectedMetrics.chartValues.map((val, idx) => (
-                      <div 
-                        key={idx} 
-                        className={`chart-bar-col ${idx === selectedMetrics.chartValues.length - 1 ? 'highlighted' : ''}`} 
+                      <div
+                        key={idx}
+                        className={`chart-bar-col ${idx === selectedMetrics.chartValues.length - 1 ? 'highlighted' : ''}`}
                         style={{ height: `${val}%` }}
                         title={`Point ${idx + 1}: ${val}%`}
                       ></div>
@@ -883,9 +883,9 @@ export default function App() {
             {dashTab === 'products' && (
               <div>
                 <h2 className="dashboard-title" style={{ marginBottom: '2rem' }}>Product Listings & Upload</h2>
-                
+
                 <div className="tool-split-layout">
-                  
+
                   {/* Products Grid list */}
                   <div>
                     <h3 style={{ marginBottom: '1rem', color: 'var(--primary)' }}>Active Inventory ({products.length})</h3>
@@ -931,7 +931,7 @@ export default function App() {
                         <span>{isParsingBulk ? 'Processing bulk data...' : '📥 Click to select CSV Template file for bulk upload'}</span>
                         <input id="bulk-file-pick" type="file" accept=".csv" onChange={handleBulkUploadSimulate} style={{ display: 'none' }} />
                       </div>
-                      
+
                       {bulkLog.length > 0 && (
                         <div style={{ backgroundColor: '#f1f5f9', padding: '1rem', borderRadius: '8px', fontFamily: 'monospace', fontSize: '0.85rem' }}>
                           <h4 style={{ marginBottom: '0.5rem' }}>Import log:</h4>
@@ -949,57 +949,57 @@ export default function App() {
                     <form onSubmit={handleSaveProduct}>
                       <div className="form-group">
                         <label htmlFor="prod-title">Product Title *</label>
-                        <input 
+                        <input
                           id="prod-title"
-                          type="text" 
-                          className="form-control" 
-                          value={productForm.title} 
-                          onChange={e => setProductForm({...productForm, title: e.target.value})} 
-                          required 
+                          type="text"
+                          className="form-control"
+                          value={productForm.title}
+                          onChange={e => setProductForm({ ...productForm, title: e.target.value })}
+                          required
                         />
                       </div>
                       <div className="form-group">
                         <label htmlFor="prod-sku">SKU Code (Auto-generates if empty)</label>
-                        <input 
+                        <input
                           id="prod-sku"
-                          type="text" 
-                          className="form-control" 
-                          placeholder="e.g. SHAWL-IND-01" 
-                          value={productForm.sku} 
-                          onChange={e => setProductForm({...productForm, sku: e.target.value})} 
+                          type="text"
+                          className="form-control"
+                          placeholder="e.g. SHAWL-IND-01"
+                          value={productForm.sku}
+                          onChange={e => setProductForm({ ...productForm, sku: e.target.value })}
                         />
                       </div>
                       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }} className="form-group">
                         <div>
                           <label htmlFor="prod-price">Price ($) *</label>
-                          <input 
+                          <input
                             id="prod-price"
-                            type="number" 
-                            className="form-control" 
-                            value={productForm.price || ''} 
-                            onChange={e => setProductForm({...productForm, price: Number(e.target.value)})} 
-                            required 
+                            type="number"
+                            className="form-control"
+                            value={productForm.price || ''}
+                            onChange={e => setProductForm({ ...productForm, price: Number(e.target.value) })}
+                            required
                           />
                         </div>
                         <div>
                           <label htmlFor="prod-stock">Initial Stock *</label>
-                          <input 
+                          <input
                             id="prod-stock"
-                            type="number" 
-                            className="form-control" 
-                            value={productForm.stock || ''} 
-                            onChange={e => setProductForm({...productForm, stock: Number(e.target.value)})} 
-                            required 
+                            type="number"
+                            className="form-control"
+                            value={productForm.stock || ''}
+                            onChange={e => setProductForm({ ...productForm, stock: Number(e.target.value) })}
+                            required
                           />
                         </div>
                       </div>
                       <div className="form-group">
                         <label htmlFor="prod-category">Category</label>
-                        <select 
+                        <select
                           id="prod-category"
-                          className="form-control" 
-                          value={productForm.category} 
-                          onChange={e => setProductForm({...productForm, category: e.target.value})}
+                          className="form-control"
+                          value={productForm.category}
+                          onChange={e => setProductForm({ ...productForm, category: e.target.value })}
                         >
                           <option value="Apparel">Apparel</option>
                           <option value="Home Decor">Home Decor</option>
@@ -1008,7 +1008,7 @@ export default function App() {
                           <option value="Linens">Linens</option>
                         </select>
                       </div>
-                      
+
                       <div style={{ display: 'flex', gap: '1rem', marginTop: '2rem' }}>
                         {isEditingProduct && (
                           <button type="button" className="btn btn-outline-dark" style={{ flex: 1 }} onClick={() => {
@@ -1030,7 +1030,7 @@ export default function App() {
             {dashTab === 'orders' && (
               <div>
                 <h2 className="dashboard-title" style={{ marginBottom: '2rem' }}>Active Orders & Payout status</h2>
-                
+
                 <div className="dashboard-table-wrapper">
                   <table className="dashboard-table">
                     <thead>
@@ -1055,10 +1055,9 @@ export default function App() {
                           <td>{o.customer}</td>
                           <td style={{ fontWeight: 600 }}>${o.total.toFixed(2)}</td>
                           <td>
-                            <span className={`badge ${
-                              o.status === 'Delivered' ? 'badge-success' : 
-                              o.status === 'Shipped' ? 'badge-info' : 'badge-warning'
-                            }`}>
+                            <span className={`badge ${o.status === 'Delivered' ? 'badge-success' :
+                                o.status === 'Shipped' ? 'badge-info' : 'badge-warning'
+                              }`}>
                               {o.status}
                             </span>
                           </td>
@@ -1081,7 +1080,7 @@ export default function App() {
             {dashTab === 'returns' && (
               <div>
                 <h2 className="dashboard-title" style={{ marginBottom: '2rem' }}>Returns & Quality Assurance Center</h2>
-                
+
                 <h3 style={{ marginBottom: '1rem', color: 'var(--primary)' }}>Items Requested for Return</h3>
                 <div className="dashboard-table-wrapper" style={{ marginBottom: '3rem' }}>
                   <table className="dashboard-table">
@@ -1156,7 +1155,7 @@ export default function App() {
             {dashTab === 'wallet' && (
               <div>
                 <h2 className="dashboard-title" style={{ marginBottom: '2rem' }}>Wallet & Payout Portal</h2>
-                
+
                 <div className="metrics-row">
                   <div className="metric-data-card">
                     <div className="metric-title">Outstanding Ready Balance</div>
@@ -1175,14 +1174,14 @@ export default function App() {
                     <form onSubmit={handleWithdrawRequest}>
                       <div className="form-group">
                         <label htmlFor="payout-val">Withdrawal Amount ($) *</label>
-                        <input 
+                        <input
                           id="payout-val"
-                          type="number" 
-                          className="form-control" 
+                          type="number"
+                          className="form-control"
                           placeholder="e.g. 200"
                           value={withdrawAmount}
                           onChange={e => setWithdrawAmount(e.target.value)}
-                          required 
+                          required
                         />
                       </div>
                       <button type="submit" className="btn btn-dark" style={{ width: '100%', marginTop: '1.5rem' }}>
@@ -1225,17 +1224,17 @@ export default function App() {
             {dashTab === 'settings' && (
               <div className="form-card" style={{ margin: 0, maxWidth: '640px' }}>
                 <h2 className="form-card-title" style={{ textAlign: 'left', marginBottom: '2rem' }}>Store Configurations</h2>
-                
+
                 <form onSubmit={e => { e.preventDefault(); alert('Store configurations updated successfully!'); }}>
                   <div className="form-group">
                     <label htmlFor="set-store">Store Display Name *</label>
-                    <input 
+                    <input
                       id="set-store"
-                      type="text" 
-                      className="form-control" 
-                      value={storeName} 
-                      onChange={e => setStoreName(e.target.value)} 
-                      required 
+                      type="text"
+                      className="form-control"
+                      value={storeName}
+                      onChange={e => setStoreName(e.target.value)}
+                      required
                     />
                   </div>
 
@@ -1249,10 +1248,10 @@ export default function App() {
                           <span style={{ fontSize: '1.5rem', color: 'var(--text-muted)' }}>🖼️</span>
                         )}
                       </div>
-                      <input 
+                      <input
                         id="set-logo"
-                        type="file" 
-                        accept="image/*" 
+                        type="file"
+                        accept="image/*"
                         onChange={handleLogoChange}
                       />
                     </div>
@@ -1260,11 +1259,11 @@ export default function App() {
 
                   <div className="form-group">
                     <label htmlFor="set-bio">About Your Craft / Business</label>
-                    <textarea 
+                    <textarea
                       id="set-bio"
-                      className="form-control" 
-                      rows={3} 
-                      value={businessBio} 
+                      className="form-control"
+                      rows={3}
+                      value={businessBio}
                       onChange={e => setBusinessBio(e.target.value)}
                     ></textarea>
                   </div>
@@ -1272,52 +1271,52 @@ export default function App() {
                   <div className="form-group">
                     <label>Pickup Location Address *</label>
                     <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '0.75rem', marginBottom: '0.75rem' }}>
-                      <input 
-                        type="text" 
-                        className="form-control" 
-                        placeholder="Street Address" 
-                        value={address.street} 
-                        onChange={e => setAddress({...address, street: e.target.value})} 
-                        required 
+                      <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Street Address"
+                        value={address.street}
+                        onChange={e => setAddress({ ...address, street: e.target.value })}
+                        required
                       />
-                      <input 
-                        type="text" 
-                        className="form-control" 
-                        placeholder="City" 
-                        value={address.city} 
-                        onChange={e => setAddress({...address, city: e.target.value})} 
-                        required 
+                      <input
+                        type="text"
+                        className="form-control"
+                        placeholder="City"
+                        value={address.city}
+                        onChange={e => setAddress({ ...address, city: e.target.value })}
+                        required
                       />
                     </div>
                     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
-                      <input 
-                        type="text" 
-                        className="form-control" 
-                        placeholder="State" 
-                        value={address.state} 
-                        onChange={e => setAddress({...address, state: e.target.value})} 
-                        required 
+                      <input
+                        type="text"
+                        className="form-control"
+                        placeholder="State"
+                        value={address.state}
+                        onChange={e => setAddress({ ...address, state: e.target.value })}
+                        required
                       />
-                      <input 
-                        type="text" 
-                        className="form-control" 
-                        placeholder="Pincode" 
-                        value={address.pincode} 
-                        onChange={e => setAddress({...address, pincode: e.target.value})} 
-                        required 
+                      <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Pincode"
+                        value={address.pincode}
+                        onChange={e => setAddress({ ...address, pincode: e.target.value })}
+                        required
                       />
                     </div>
                   </div>
 
                   <div className="form-group">
                     <label htmlFor="set-gstin">GSTIN Number</label>
-                    <input 
+                    <input
                       id="set-gstin"
-                      type="text" 
-                      className="form-control" 
-                      value={gstin} 
-                      onChange={e => setGstin(e.target.value)} 
-                      disabled 
+                      type="text"
+                      className="form-control"
+                      value={gstin}
+                      onChange={e => setGstin(e.target.value)}
+                      disabled
                     />
                     <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '0.25rem' }}>GSTIN cannot be modified after verification.</p>
                   </div>