"use client" import { useState, useMemo, useEffect, useCallback } from 'react'; import { useNewOrderFMS } from '@/hooks/use-new-order-fms'; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { BackButton } from "@/components/back-button" import Loader from "@/components/Loader" import { Package, Clock, TrendingUp, CheckCircle, AlertCircle, XCircle, PauseCircle, Filter, RefreshCw, Search, Building, Calendar, DollarSign, BarChart3, Box, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react" /* ───────────────────────────────────────────── TYPES ───────────────────────────────────────────── */ interface Order { id: number; timestamp: string; buyerId: string; orderId: string; name: string; mobile: string; email: string; billingType: string; orderType: string; billingAddress: string; shippingAddress: string; invoiceAmount: string; totalAmtBeforeDiscount: string; uploadedImageLink: string; paymentTerms: string; paymentCollectionDate: string; orderTakenBy: string; whatsappSMS: string; piLink: string; piUrl: string; planned: string; actualDelay: string; fmsUserName: string; activeStage: number; // 0–6 status?: 'Cancelled' | 'Hold' | 'Normal'; editOrderLink?: string; } interface StageModalState { order: Order; stageIndex: number; } /* ───────────────────────────────────────────── CONSTANTS ───────────────────────────────────────────── */ const STAGE_NAMES = [ 'Order Verify Status', 'Inventory Verify Status', 'Payment Verify Status', 'Order Packing Status', 'QC Verify Status', 'Address ReVerify Status', 'Dispatch Status', 'Tracking Update Status', 'Stock Deduction Status', ]; const STAGE_SHORT = [ 'Order Verify', 'Inventory Verify', 'Payment Verify', 'Order Packing', 'QC Verify', 'Address ReVerify', 'Dispatch', 'Tracking Update', 'Stock Deduction', ]; /* ───────────────────────────────────────────── MOCK DATA (10 orders) ───────────────────────────────────────────── */ // Mock data removed. Using useNewOrderFMS hook. /* ───────────────────────────────────────────── HELPERS ───────────────────────────────────────────── */ function getInitials(name: string): string { return name .replace(/^(Ms\.|Mr\.|Dr\.)\s*/i, '') .split(' ') .slice(0, 2) .map((w) => w[0]) .join(''); } function parseCurrency(val: string): number { if (!val) return 0; return Number(val.replace(/[₹,]/g, '')) || 0; } function formatCurrency(val: number): string { return new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR', maximumFractionDigits: 0 }).format(val); } function StageBadge({ order, stageIndex, onClick, }: { order: Order; stageIndex: number; onClick: () => void; }) { const isDone = stageIndex < order.activeStage; const isActive = stageIndex === order.activeStage; let bg = ''; let text = ''; let border = ''; let label = ''; if (isDone) { bg = '#EAF3DE'; text = '#27500A'; border = 'transparent'; label = '✓ Done'; } else if (isActive) { bg = '#E6F1FB'; text = '#0C447C'; border = '#185FA5'; label = '● Active'; } else { bg = '#FCEBEB'; text = '#791F1F'; border = '#F09595'; label = 'Pending'; } return ( ); } /* ───────────────────────────────────────────── STAGE POPUP CONTENT — DARK THEME ───────────────────────────────────────────── */ const VALUE_COLORS: Record = { green: '#3B6D11', red: '#A32D2D', amber: '#854F0B', blue: '#185FA5', gray: '#888', }; /** Single label : value row inside an InfoCard */ function Row({ label, value, color, isLast = false, }: { label: string; value: string; color?: string; isLast?: boolean; }) { return (
{label} {value}
); } /** Label : link row */ function RowLink({ label, href, text = 'View Document', isLast = false }: { label: string; href: string; text?: string; isLast?: boolean }) { return (
{label} {text}
); } /** Card with icon + colored title — light theme */ function InfoCard({ title, titleColor = '#185FA5', icon, badge, children, fullWidth = false, highlight = false, }: { title: string; titleColor?: string; icon?: React.ReactNode; badge?: React.ReactNode; children: React.ReactNode; fullWidth?: boolean; highlight?: boolean; }) { return (
{icon && ( {icon} )} {title}
{badge}
{children}
); } /** Status badge pill — light pastel */ function StatusBadge({ label, type }: { label: string; type: 'done' | 'active' | 'pending' | 'warn' | 'fail' }) { const styles: Record = { done: { bg: '#EAF3DE', border: '#b6d98a', color: '#27500A' }, active: { bg: '#E6F1FB', border: '#93c5fd', color: '#0C447C' }, pending: { bg: '#FFFBF0', border: '#fde68a', color: '#854F0B' }, warn: { bg: '#FFF3CD', border: '#fde68a', color: '#7A5200' }, fail: { bg: '#FCEBEB', border: '#fca5a5', color: '#791F1F' }, }; const s = styles[type] ?? styles.pending; return ( {label} ); } /** Delay badge — shows raw HH:MM:SS delay value */ function DelayBadge({ delay }: { delay: string }) { if (!delay || delay === '—') return null; return ( {delay} ); } /** 2-column responsive card grid */ const cardGrid: React.CSSProperties = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14, }; function StageContent({ stageIndex, order }: { stageIndex: number; order: Order }) { if (stageIndex === 0) { const orderStatusType = order.activeStage > 0 ? 'done' : order.activeStage === 0 ? 'active' : 'pending'; const orderStatusLabel = order.activeStage > 0 ? 'Completed' : order.activeStage === 0 ? 'In Progress' : 'Pending'; const [plannedDate, plannedTime] = (order.planned || '').split(' '); const [actualDate, actualTime] = (order.timestamp || '').split(' '); return (
{/* Order Details Card */} } badge={} highlight > {/* Timing Card */} } badge={} > {/* 3-column timing grid */}
{/* PLANNED */}
PLANNED
{[plannedDate, plannedTime].filter(Boolean).join(' ') || '—'}
{/* ACTUAL */}
ACTUAL
{[actualDate, actualTime].filter(Boolean).join(' ') || '—'}
{/* ORDER TAKEN BY */}
ORDER TAKEN BY
{order.orderTakenBy}
); } if (stageIndex === 1) return (
} >
); if (stageIndex === 2) return (
} >
); if (stageIndex === 3) return (
); if (stageIndex === 4) return (
); if (stageIndex === 5) return (
); if (stageIndex === 6) return (
} >
); if (stageIndex === 7) return (
); if (stageIndex === 8) return (
} fullWidth >
); return null; } /* ───────────────────────────────────────────── STAGE MODAL — DARK THEME (matches screenshot) ───────────────────────────────────────────── */ function StageModal({ state, onClose, }: { state: StageModalState; onClose: () => void; }) { const { order, stageIndex } = state; const stageStatusType = stageIndex < order.activeStage ? 'done' : stageIndex === order.activeStage ? 'active' : 'pending'; const stageStatusLabel = stageStatusType === 'done' ? 'COMPLETED' : stageStatusType === 'active' ? 'ACTIVE' : 'PENDING'; // PI number derived from order (mock — real data would come from order fields) const piNo = 'PI-20240420'; const headerChip: React.CSSProperties = { display: 'inline-flex', alignItems: 'center', gap: 5, background: 'rgba(255,255,255,0.12)', padding: '5px 10px', borderRadius: 6, border: '1px solid rgba(255,255,255,0.18)', }; return (
e.target === e.currentTarget && onClose()} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', zIndex: 1000, padding: '24px 16px', overflowY: 'auto', }} >
{/* ── GRADIENT HEADER ── */}

{STAGE_NAMES[stageIndex]} —{' '} {order.orderId}

{/* chips row inside header */}
{order.name}
+91 {order.mobile.replace(/^91/, '').replace(/(\d{5})(\d{5})/, '$1 $2')}
{piNo}
View PI
{/* ── STAGE-SPECIFIC CONTENT ── */}
); } /* ───────────────────────────────────────────── MAIN PAGE ───────────────────────────────────────────── */ export default function NewOrderFMS() { const { orders, loading: apiLoading, error: apiError, refresh } = useNewOrderFMS(); const [search, setSearch] = useState(''); const [filterOrderType, setFilterOrderType] = useState('All'); const [filterBillingType, setFilterBillingType] = useState('All'); const [filterStage, setFilterStage] = useState('All'); const [filterTakenBy, setFilterTakenBy] = useState('All'); const [datePreset, setDatePreset] = useState('this_week'); const [customDateRange, setCustomDateRange] = useState({ start: '', end: '' }); const [stageModal, setStageModal] = useState(null); const [currentPage, setCurrentPage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(5); const [goPage, setGoPage] = useState(''); const [sortConfig, setSortConfig] = useState<{ key: string; direction: 'asc' | 'desc' } | null>({ key: 'timestamp', direction: 'desc' }); const uniqueOrderTypes = useMemo(() => { const types = new Set(orders.map(o => o.orderType).filter(Boolean)); return Array.from(types).sort(); }, [orders]); const uniqueBillingTypes = useMemo(() => { const types = new Set(orders.map(o => o.billingType).filter(Boolean)); return Array.from(types).sort(); }, [orders]); const uniqueAgents = useMemo(() => { const agents = new Set(orders.map(o => o.orderTakenBy).filter(Boolean)); return Array.from(agents).sort(); }, [orders]); const handleSort = (key: string) => { let direction: 'asc' | 'desc' = 'asc'; if (sortConfig && sortConfig.key === key && sortConfig.direction === 'asc') { direction = 'desc'; } setSortConfig({ key, direction }); }; // Loading state is now handled by the hook const parseDateStr = (str: string) => { if (!str || str === '—') return new Date(NaN); const parts = str.split(' ')[0].split('/'); if (parts.length !== 3) return new Date(NaN); const [d, m, y] = parts; return new Date(parseInt(y), parseInt(m) - 1, parseInt(d)); }; const isInDateRange = (timestamp: string) => { if (datePreset === 'all') return true; const d = parseDateStr(timestamp); if (isNaN(d.getTime())) return false; const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); switch (datePreset) { case 'today': return d.getTime() === today.getTime(); case 'yesterday': { const yesterday = new Date(today); yesterday.setDate(today.getDate() - 1); return d.getTime() === yesterday.getTime(); } case 'this_week': { const startOfWeek = new Date(today); const day = today.getDay() || 7; startOfWeek.setDate(today.getDate() - (day - 1)); return d >= startOfWeek && d <= today; } case 'last_week': { const day = today.getDay() || 7; const startOfLastWeek = new Date(today); startOfLastWeek.setDate(today.getDate() - day - 6); const endOfLastWeek = new Date(today); endOfLastWeek.setDate(today.getDate() - day); return d >= startOfLastWeek && d <= endOfLastWeek; } case 'this_month': return d.getMonth() === today.getMonth() && d.getFullYear() === today.getFullYear(); case 'last_month': { const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1); return d.getMonth() === lastMonth.getMonth() && d.getFullYear() === lastMonth.getFullYear(); } case 'this_year': return d.getFullYear() === today.getFullYear(); case 'last_year': return d.getFullYear() === today.getFullYear() - 1; case 'custom': { if (!customDateRange.start || !customDateRange.end) return true; const [sY, sM, sD] = customDateRange.start.split('-').map(Number); const [eY, eM, eD] = customDateRange.end.split('-').map(Number); const cS = new Date(sY, sM - 1, sD); const cE = new Date(eY, eM - 1, eD); return d >= cS && d <= cE; } default: return true; } }; const parseFullDateStr = (str: string) => { if (!str || str === '—') return new Date(0); const parts = str.split(' '); const dateParts = parts[0].split('/'); if (dateParts.length !== 3) return new Date(0); const d = parseInt(dateParts[0]); const m = parseInt(dateParts[1]) - 1; const y = parseInt(dateParts[2]); const date = new Date(y, m, d); if (parts[1]) { const timeParts = parts[1].split(':'); if (timeParts.length >= 2) { date.setHours(parseInt(timeParts[0]), parseInt(timeParts[1])); } } return date; }; const filtered = useMemo(() => { return orders.filter((o) => { const q = search.toLowerCase(); if ( q && !o.name.toLowerCase().includes(q) && !o.orderId.toLowerCase().includes(q) && !o.buyerId.toLowerCase().includes(q) && !o.mobile.includes(q) && !o.email.toLowerCase().includes(q) ) return false; if (filterOrderType !== 'All' && o.orderType !== filterOrderType) return false; if (filterBillingType !== 'All' && o.billingType !== filterBillingType) return false; if (filterTakenBy !== 'All' && o.orderTakenBy !== filterTakenBy) return false; if (filterStage !== 'All') { const si = parseInt(filterStage); if (o.activeStage !== si) return false; } if (!isInDateRange(o.timestamp)) return false; return true; }); }, [orders, search, filterOrderType, filterBillingType, filterStage, filterTakenBy, datePreset, customDateRange]); /* KPI */ const kpi = useMemo(() => { const total = filtered.length; const totalValue = filtered.reduce((acc, o) => acc + parseCurrency(o.invoiceAmount), 0); // Filter out Cancelled and Hold for the main stage-based KPIs const activeOrders = filtered.filter(o => !o.status || o.status === 'Normal'); const completed = activeOrders.filter((o) => o.activeStage === 6).length; const completedValue = activeOrders.filter((o) => o.activeStage === 6).reduce((acc, o) => acc + parseCurrency(o.invoiceAmount), 0); const pending = activeOrders.filter((o) => o.activeStage === 0).length; const pendingValue = activeOrders.filter((o) => o.activeStage === 0).reduce((acc, o) => acc + parseCurrency(o.invoiceAmount), 0); const inProgress = activeOrders.filter((o) => o.activeStage > 0 && o.activeStage < 6).length; const inProgressValue = activeOrders.filter((o) => o.activeStage > 0 && o.activeStage < 6).reduce((acc, o) => acc + parseCurrency(o.invoiceAmount), 0); const delayed = filtered.filter((o) => o.actualDelay !== '—').length; const cancelled = filtered.filter((o) => o.status === 'Cancelled').length; const cancelledValue = filtered.filter((o) => o.status === 'Cancelled').reduce((acc, o) => acc + parseCurrency(o.invoiceAmount), 0); const hold = filtered.filter((o) => o.status === 'Hold').length; const holdValue = filtered.filter((o) => o.status === 'Hold').reduce((acc, o) => acc + parseCurrency(o.invoiceAmount), 0); return { total, totalValue, inProgress, inProgressValue, completed, completedValue, pending, pendingValue, delayed, cancelled, cancelledValue, hold, holdValue }; }, [filtered]); /* SORTING */ const sortedData = useMemo(() => { if (!sortConfig) return filtered; return [...filtered].sort((a, b) => { const key = sortConfig.key as keyof Order; const aVal = a[key] ?? ''; const bVal = b[key] ?? ''; if (key === 'timestamp' || key === 'paymentCollectionDate') { const dateA = parseFullDateStr(aVal as string).getTime(); const dateB = parseFullDateStr(bVal as string).getTime(); return sortConfig.direction === 'asc' ? dateA - dateB : dateB - dateA; } if (aVal < bVal) return sortConfig.direction === 'asc' ? -1 : 1; if (aVal > bVal) return sortConfig.direction === 'asc' ? 1 : -1; return 0; }); }, [filtered, sortConfig]); /* PAGINATION */ const totalPages = Math.max(1, Math.ceil(sortedData.length / rowsPerPage)); const paginated = sortedData.slice((currentPage - 1) * rowsPerPage, currentPage * rowsPerPage); const clearFilters = () => { setSearch(''); setFilterOrderType('All'); setFilterBillingType('All'); setFilterStage('All'); setFilterTakenBy('All'); setDatePreset('all'); setCustomDateRange({ start: '', end: '' }); setSortConfig({ key: 'timestamp', direction: 'desc' }); setCurrentPage(1); }; /* STYLES */ const thBase: React.CSSProperties = { padding: '8px 12px', fontWeight: 500, whiteSpace: 'nowrap', textAlign: 'left', fontSize: 13, borderRight: '1px solid rgba(255,255,255,0.08)', }; const thDetail: React.CSSProperties = { ...thBase, background: '#2b3235', color: '#ffffff', }; const thStage: React.CSSProperties = { ...thBase, background: '#0581a0', color: '#ffffff', textAlign: 'center', fontSize: 12, }; const SortableHeader = ({ label, sortKey, style }: { label: string, sortKey: string, style: React.CSSProperties }) => { const isActive = sortConfig?.key === sortKey; return ( handleSort(sortKey)} className="hover:bg-[#3d4548] transition-colors" >
{label} {isActive ? ( sortConfig.direction === 'asc' ? : ) : ( )}
); }; const tdBase: React.CSSProperties = { padding: '8px 12px', fontSize: 13, color: '#1a1a2e', borderRight: '1px solid #e5e7eb', verticalAlign: 'middle', whiteSpace: 'nowrap', }; const [isMobile, setIsMobile] = useState(typeof window !== "undefined" && window.innerWidth < 768); useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth < 768); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); const stickyBase: React.CSSProperties = { position: 'sticky', zIndex: 1, }; const now = new Date(); const lastUpdated = now.toLocaleDateString('en-GB').replace(/\//g, '/') + ', ' + now.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); const selectStyle: React.CSSProperties = { padding: '7px 10px', borderRadius: 6, border: '1px solid #e0d8cc', background: '#fff', fontSize: 13, color: '#1a1a2e', cursor: 'pointer', }; const inputStyle: React.CSSProperties = { padding: '7px 12px', borderRadius: 6, border: '1px solid #e0d8cc', background: '#fff', fontSize: 13, color: '#1a1a2e', outline: 'none', }; return (
{/* ── PAGE HEADER (Premium Villa Raag Style - Full Width Breakout) ── */}
{/* Ambient depth layers */}
{/* ICON CONTAINER */}

New Order FMS

Order Management  ·  Stage Tracking  ·  Real-time Monitoring

{/* LAST UPDATED */}

Last Updated

{lastUpdated}

{/* ── CONTENT ── */}
{/* ── FILTERS (Professional Upgrade) ── */}
{/* HEADER */}

Filters & Search

Refine your order feed using smart parameters

{/* CONTENT */}
{/* SEARCH */}
{ setSearch(e.target.value) setCurrentPage(1) }} className=" h-10 w-full pl-9 text-sm border-[#bfdbfe] focus:border-[#1d4ed8] focus:ring-1 focus:ring-[#1d4ed8]/20 rounded-md transition-all duration-200 " />
{/* DATE RANGE */}
{/* ORDER TYPE */}
{/* BILLING TYPE */}
{/* STAGE */}
{/* TAKEN BY */}
{/* CUSTOM DATE */} {datePreset === "custom" && (
{ setCustomDateRange(prev => ({ ...prev, start: e.target.value })); setCurrentPage(1); }} /> { setCustomDateRange(prev => ({ ...prev, end: e.target.value })); setCurrentPage(1); }} />
)}
{/* ── KPI CARDS (Premium Grid) ── */}
{/* ================= KPI WRAPPER ================= */}
{/* ================= UPDATED HEADER ================= */}
{/* ICON */}
{/* TEXT */}

Key Performance Indicators

Overview of order metrics & performance

{/* ================= KPI GRID ================= */}
{/* TOTAL ORDERS */}

Total Orders

{kpi.total}

{formatCurrency(kpi.totalValue)}

All Records
{/* COMPLETED */}

Completed

{kpi.completed}

{formatCurrency(kpi.completedValue)}

Stage 6
{/* IN PROGRESS (PROGRESS) */}

Progress

{kpi.inProgress}

{formatCurrency(kpi.inProgressValue)}

Processing
{/* PENDING */}

Pending

{kpi.pending}

{formatCurrency(kpi.pendingValue)}

Stage 0
{/* HOLD */}

Hold

{kpi.hold}

{formatCurrency(kpi.holdValue)}

On Hold
{/* CANCELLED */}

Cancelled

{kpi.cancelled}

{formatCurrency(kpi.cancelledValue)}

Terminated
{/* ── TABLE SECTION ── */}
{/* Table header bar */}

Order FMS Records

{filtered.length} of {orders.length} total orders

{filtered.length} Records
{/* Scrollable table */}
{/* */} {/* */} {STAGE_NAMES.map((s) => ( ))} {apiLoading && orders.length === 0 ? ( Array.from({ length: 5 }).map((_, i) => ( )) ) : apiError ? ( ) : paginated.length === 0 ? ( ) : ( paginated.map((o, idx) => { const rowBg = idx % 2 === 1 ? '#f9fafb' : '#fff'; const sn = (currentPage - 1) * rowsPerPage + idx + 1; return ( {/* */} {/* */} {/* */} {STAGE_NAMES.map((_, si) => ( ))} ); }) )}
S.NO Client Details Billing Address Shipping Address Invoice AmountTotal Amt ImageWhatsApp SMS PI URLPlanned Actual Delay FMS User Name {s}
Loading your order data...

{apiError}

No orders found

Try adjusting your filters or search terms.
{sn} {o.timestamp} {o.buyerId} {o.orderId}
{o.name}
{o.mobile} {o.email}
{o.billingType} {o.orderType} {o.billingAddress} {o.shippingAddress} {o.invoiceAmount}{o.totalAmtBeforeDiscount} View Image {o.paymentTerms} {o.paymentCollectionDate}
{getInitials(o.orderTakenBy)}
{o.orderTakenBy}
{o.whatsappSMS} {o.piLink} {o.piUrl ? ( View ) : '—'} {o.planned} {o.actualDelay} {o.fmsUserName} setStageModal({ order: o, stageIndex: si })} />
{/* Pagination */}
Rows Showing {filtered.length === 0 ? 0 : (currentPage - 1) * rowsPerPage + 1}– {Math.min(currentPage * rowsPerPage, filtered.length)} of {filtered.length}
Page {currentPage} of {totalPages} setGoPage(e.target.value)} placeholder="Go" style={{ ...inputStyle, width: 60, padding: '4px 8px' }} min={1} max={totalPages} />
{stageModal && ( setStageModal(null)} /> )}
) }