beta #7
5 changed files with 433 additions and 280 deletions
|
|
@ -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 />} />
|
||||
|
|
|
|||
|
|
@ -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 & 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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
207
src/pages/dashboard/ReturnsTrackerPage.tsx
Normal file
207
src/pages/dashboard/ReturnsTrackerPage.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in a new issue