import { StrictMode, useMemo, useState } from 'react';
import { createRoot } from 'react-dom/client';
import {
  AlertTriangle, ArrowUpRight, Bell, Boxes, Check, ChevronDown, ChevronLeft, ChevronRight,
  CircleUserRound, Clock3, CreditCard, FileText, LayoutDashboard, Menu, Package, Plus,
  Search, Settings, ShoppingCart, Truck, UserRound, Users, X, Zap
} from 'lucide-react';
import './styles.css';

const initialCustomers = [
  { id: 1, name: 'Rajesh Kumar', phone: '9876543210', email: 'rajesh@gmail.com', address: 'Vijayawada, Andhra Pradesh', company: 'ABC Constructions' },
  { id: 2, name: 'Suresh Reddy', phone: '9988776655', email: 'suresh@gmail.com', address: 'Guntur, Andhra Pradesh', company: 'BuildTech Pvt Ltd' },
  { id: 3, name: 'Priya Sharma', phone: '9866123456', email: 'priya@orbitinfra.com', address: 'Hyderabad, Telangana', company: 'Orbit Infra' },
  { id: 4, name: 'Arjun Mehta', phone: '9812345678', email: '-', address: 'Visakhapatnam, Andhra Pradesh', company: 'Mehta Builders' }
];
const initialProducts = [
  { id: 1, name: 'Gypsum Board', code: 'GB-001', category: 'Gypsum Board', stock: 450, minimum: 100, unit: 'PCS', price: 520 },
  { id: 2, name: 'Ceiling Board', code: 'CB-002', category: 'Ceiling', stock: 65, minimum: 100, unit: 'PCS', price: 780 },
  { id: 3, name: 'Gypsum Sheet', code: 'GS-003', category: 'Gypsum Sheet', stock: 20, minimum: 100, unit: 'PCS', price: 410 },
  { id: 4, name: 'Metal Furring Channel', code: 'MF-004', category: 'Accessories', stock: 230, minimum: 80, unit: 'PCS', price: 145 }
];
const initialOrders = [
  { id: 'ORD-1001', customer: 'ABC Industries', product: 'Gypsum Board', quantity: 500, date: '04 Sep 2026', delivery: '10 Sep 2026', amount: 250000, status: 'Processing' },
  { id: 'ORD-1002', customer: 'XYZ Constructions', product: 'Ceiling Board', quantity: 300, date: '04 Sep 2026', delivery: '08 Sep 2026', amount: 234000, status: 'Ready for Dispatch' },
  { id: 'ORD-1003', customer: 'BuildTech Pvt Ltd', product: 'Gypsum Sheet', quantity: 190, date: '03 Sep 2026', delivery: '09 Sep 2026', amount: 78000, status: 'Delivered' },
  { id: 'ORD-1004', customer: 'Orbit Infra', product: 'Metal Furring Channel', quantity: 120, date: '02 Sep 2026', delivery: '07 Sep 2026', amount: 17400, status: 'Confirmed' }
];
const initialDispatches = [
  { id: 'DSP-001', order: 'ORD-1002', customer: 'XYZ Constructions', products: 'Ceiling Board - 300 PCS', date: '04 Sep 2026', delivery: '08 Sep 2026', status: 'Dispatched' },
  { id: 'DSP-002', order: 'ORD-1003', customer: 'BuildTech Pvt Ltd', products: 'Gypsum Sheet - 190 PCS', date: '03 Sep 2026', delivery: '09 Sep 2026', status: 'Delivered' },
  { id: 'DSP-003', order: 'ORD-1001', customer: 'ABC Industries', products: 'Gypsum Board - 500 PCS', date: '05 Sep 2026', delivery: '10 Sep 2026', status: 'Ready for Dispatch' }
];
const money = (value) => `₹${value.toLocaleString('en-IN')}`;
const statusClass = (status) => status.toLowerCase().replaceAll(' ', '-');

function App() {
  const [page, setPage] = useState('Dashboard');
  const [customers, setCustomers] = useState(initialCustomers);
  const [products, setProducts] = useState(initialProducts);
  const [orders, setOrders] = useState(initialOrders);
  const [dispatches, setDispatches] = useState(initialDispatches);
  const [query, setQuery] = useState('');
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [modal, setModal] = useState(null);
  const [notice, setNotice] = useState('');

  const notify = (message) => { setNotice(message); window.setTimeout(() => setNotice(''), 2600); };
  const navigate = (nextPage) => { setPage(nextPage); setSidebarOpen(false); setQuery(''); };
  const lowStock = products.filter((product) => product.stock <= product.minimum);
  const searchResults = query.length > 1 ? [
    ...customers.filter((item) => `${item.name} ${item.company}`.toLowerCase().includes(query.toLowerCase())).map((item) => ({ type: 'Customer', label: item.name, sub: item.company })),
    ...orders.filter((item) => `${item.id} ${item.customer} ${item.product}`.toLowerCase().includes(query.toLowerCase())).map((item) => ({ type: 'Order', label: item.id, sub: item.customer })),
    ...products.filter((item) => `${item.name} ${item.code}`.toLowerCase().includes(query.toLowerCase())).map((item) => ({ type: 'Product', label: item.name, sub: item.code }))
  ].slice(0, 6) : [];

  const saveCustomer = (form) => { setCustomers((items) => [...items, { ...form, id: Date.now() }]); setModal(null); notify('Customer added successfully'); };
  const saveProduct = (form) => { setProducts((items) => [...items, { ...form, id: Date.now(), stock: Number(form.stock), minimum: Number(form.minimum), price: Number(form.price) }]); setModal(null); notify('Product added successfully'); };
  const advanceOrder = (order) => {
    const statuses = ['Pending', 'Confirmed', 'Processing', 'Ready for Dispatch', 'Dispatched', 'Delivered'];
    const next = statuses[Math.min(statuses.indexOf(order.status) + 1, statuses.length - 1)];
    setOrders((items) => items.map((item) => item.id === order.id ? { ...item, status: next } : item));
    notify(`${order.id} moved to ${next}`);
  };

  return <div className="app-shell">
    <Sidebar page={page} navigate={navigate} open={sidebarOpen} close={() => setSidebarOpen(false)} />
    <main className="main-shell">
      <header className="topbar">
        <button className="icon-button mobile-menu" onClick={() => setSidebarOpen(true)} aria-label="Open navigation"><Menu size={20} /></button>
        <div className="crumb"><span>Workspace</span><ChevronRight size={14} /><strong>{page}</strong></div>
        <div className="top-actions">
          <div className="global-search"><Search size={17} /><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search anything..." />
            {searchResults.length > 0 && <div className="search-results">{searchResults.map((result) => <button key={`${result.type}-${result.label}`} onClick={() => { setQuery(''); navigate(result.type === 'Customer' ? 'Customers' : result.type === 'Order' ? 'Orders' : 'Inventory'); }}><span className="result-icon">{result.type[0]}</span><span><b>{result.label}</b><small>{result.type} · {result.sub}</small></span></button>)}</div>}
          </div>
          <button className="icon-button notification-button" onClick={() => setModal('notifications')} aria-label="Notifications"><Bell size={18} /><i /></button>
          <button className="profile-trigger" onClick={() => navigate('Profile')}><span className="avatar">AU</span><span className="profile-copy"><b>Admin User</b><small>Manager</small></span><ChevronDown size={15} /></button>
        </div>
      </header>
      <div className="content-area"><PageHeader page={page} setModal={setModal} /><PageContent page={page} products={products} lowStock={lowStock} orders={orders} customers={customers} dispatches={dispatches} setModal={setModal} advanceOrder={advanceOrder} setProducts={setProducts} setDispatches={setDispatches} notify={notify} />{notice && <div className="toast"><Check size={17} />{notice}</div>}</div>
    </main>
    {modal === 'customer' && <CustomerModal close={() => setModal(null)} save={saveCustomer} />}
    {modal === 'product' && <ProductModal close={() => setModal(null)} save={saveProduct} />}
    {modal === 'notifications' && <NotificationPanel close={() => setModal(null)} />}
    {modal?.type === 'order' && <OrderModal order={modal.order} close={() => setModal(null)} />}
    {modal?.type === 'dispatch' && <DispatchModal dispatch={modal.dispatch} close={() => setModal(null)} />}
  </div>;
}

function Sidebar({ page, navigate, open, close }) { const links = [['Dashboard', LayoutDashboard], ['Customers', Users], ['Orders', FileText], ['Inventory', Boxes], ['Dispatch', Truck]]; return <><aside className={`sidebar ${open ? 'open' : ''}`}><div className="brand"><div className="brand-mark"><Zap size={19} fill="currentColor" /></div><div><b>BuildStock</b><span>Inventory & Sales</span></div><button className="close-sidebar" onClick={close}><X size={18} /></button></div><div className="workspace-label">WORKSPACE</div><nav>{links.map(([label, Icon]) => <button className={page === label ? 'active' : ''} key={label} onClick={() => navigate(label)}><Icon size={18} /><span>{label}</span>{label === 'Inventory' && <em>18</em>}</button>)}</nav><div className="sidebar-footer"><button className="settings-link"><Settings size={18} />Settings</button><div className="sidebar-profile"><span className="avatar">AU</span><div><b>Admin User</b><small>Manager</small></div><ChevronDown size={15} /></div></div></aside>{open && <div className="sidebar-scrim" onClick={close} />}</>; }
function PageHeader({ page, setModal }) { const titles = { Dashboard: ['Dashboard', 'Overview of your sales, products, customers and orders.'], Customers: ['Customers', 'Manage your customers and their contact information.'], Orders: ['Orders', 'Track and manage active customer orders.'], Inventory: ['Inventory', 'Monitor current product stock levels.'], Dispatch: ['Dispatch', 'Track dispatched and delivered customer orders.'], Profile: ['My Profile', 'Manage your personal and company information.'] }; const [title, subtitle] = titles[page]; return <div className="page-header"><div><p className="eyebrow">MONDAY, 07 SEPTEMBER 2026</p><h1>{title}</h1><p>{subtitle}</p></div>{page === 'Dashboard' && <div className="date-filter"><Clock3 size={16} /><span>This Month</span><ChevronDown size={15} /></div>}{page === 'Customers' && <button className="primary-button" onClick={() => setModal('customer')}><Plus size={17} /> Add Customer</button>}{page === 'Inventory' && <button className="primary-button" onClick={() => setModal('product')}><Plus size={17} /> Add Product</button>}</div>; }

function PageContent({ page, ...props }) { if (page === 'Dashboard') return <Dashboard {...props} />; if (page === 'Customers') return <Customers {...props} />; if (page === 'Orders') return <Orders {...props} />; if (page === 'Inventory') return <Inventory {...props} />; if (page === 'Dispatch') return <Dispatch {...props} />; return <Profile />; }
function Dashboard({ products, lowStock, orders, customers, setModal, navigate }) { const sales = [25, 32, 28, 41, 35, 48, 39]; const max = 50; return <>
  <section className="stats-grid"><StatCard icon={ShoppingCart} label="Total Sales" value="1,248" note="transactions this month" change="12.5%" tone="blue" /><StatCard icon={CreditCard} label="Total Sales Value" value="₹18,45,750" note="sales amount this month" change="8.2%" tone="green" /><StatCard icon={Package} label="Total Products" value={products.length * 89} note="products currently listed" change="4.8%" tone="amber" /><StatCard icon={AlertTriangle} label="Products Short" value={lowStock.length} note="below minimum stock" change="Needs attention" tone="red" /></section>
  <section className="dashboard-grid"><div className="panel chart-panel"><PanelHeading title="Sales overview" meta="Last 7 days" /><div className="chart-area"><div className="y-labels"><span>₹50k</span><span>₹35k</span><span>₹20k</span><span>₹0</span></div><div className="chart"><div className="grid-lines"><i /><i /><i /><i /></div><svg viewBox="0 0 700 240" preserveAspectRatio="none" aria-label="Sales chart"><defs><linearGradient id="salesFill" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stopColor="#2bb3a3" stopOpacity=".24" /><stop offset="1" stopColor="#2bb3a3" stopOpacity="0" /></linearGradient></defs><path d="M0,150 L116,104 L233,128 L350,54 L466,94 L583,20 L700,70 L700,240 L0,240 Z" fill="url(#salesFill)" /><polyline points="0,150 116,104 233,128 350,54 466,94 583,20 700,70" fill="none" stroke="#1a9b91" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />{sales.map((value, index) => <circle key={value} cx={index * 116.6} cy={240 - value * 4.5} r="5" fill="#fff" stroke="#1a9b91" strokeWidth="3" />)}</svg><div className="x-labels">{['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day) => <span key={day}>{day}</span>)}</div></div></div></div>
  <div className="panel activity-panel"><PanelHeading title="Quick activity" meta="Today" /><div className="activity-list"><Activity icon={Users} title="New customer added" detail="ABC Industries" time="09:42 AM" /><Activity icon={Truck} title="Ready for dispatch" detail="ORD-1001 · 500 PCS" time="08:20 AM" /><Activity icon={AlertTriangle} title="Stock needs attention" detail={`${lowStock.length} products below minimum`} time="Yesterday" /></div><button className="text-button" onClick={() => navigate('Orders')}>View all activity <ArrowUpRight size={15} /></button></div></section>
  <section className="lower-grid"><div className="panel table-panel"><PanelHeading title="Recent orders" action="View all" onAction={() => navigate('Orders')} /><div className="table-scroll"><table><thead><tr><th>Order</th><th>Customer</th><th>Amount</th><th>Status</th></tr></thead><tbody>{orders.slice(0, 4).map((order) => <tr key={order.id} onClick={() => setModal({ type: 'order', order })}><td><b>{order.id}</b><small>{order.date}</small></td><td>{order.customer}</td><td><b>{money(order.amount)}</b></td><td><StatusBadge status={order.status} /></td></tr>)}</tbody></table></div></div><div className="panel stock-panel"><PanelHeading title="Low stock products" action="View inventory" onAction={() => navigate('Inventory')} />{lowStock.slice(0, 3).map((product) => <div className="stock-row" key={product.id}><div className="stock-title"><span>{product.name}</span><b>{product.stock}/{product.minimum}</b></div><div className="progress"><i className={product.stock <= product.minimum * .25 ? 'critical' : ''} style={{ width: `${Math.min(product.stock / product.minimum * 100, 100)}%` }} /></div><small>{product.stock <= product.minimum * .25 ? 'Critical' : 'Low stock'} · {product.unit}</small></div>)}</div></section>
 </>; }
function StatCard({ icon: Icon, label, value, note, change, tone }) { return <div className={`stat-card ${tone}`}><div className="stat-top"><span className="stat-icon"><Icon size={19} /></span><span className="stat-change">{change === 'Needs attention' ? <AlertTriangle size={13} /> : <ArrowUpRight size={13} />} {change}</span></div><p>{label}</p><strong>{value}</strong><small>{note}</small></div>; }
function PanelHeading({ title, meta, action, onAction }) { return <div className="panel-heading"><div><h2>{title}</h2>{meta && <span>{meta}</span>}</div>{action && <button className="text-button" onClick={onAction}>{action}<ArrowUpRight size={15} /></button>}</div>; }
function Activity({ icon: Icon, title, detail, time }) { return <div className="activity-row"><span className="activity-icon"><Icon size={16} /></span><div><b>{title}</b><small>{detail}</small></div><time>{time}</time></div>; }
function StatusBadge({ status }) { return <span className={`status-badge ${statusClass(status)}`}><i />{status}</span>; }

function Customers({ customers, setModal, notify }) { const [search, setSearch] = useState(''); const filtered = customers.filter((item) => `${item.name} ${item.company} ${item.email}`.toLowerCase().includes(search.toLowerCase())); return <section className="panel full-panel"><div className="toolbar"><div className="local-search"><Search size={17} /><input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search customers..." /></div><span className="result-count">{filtered.length} customers</span></div><div className="table-scroll"><table className="rich-table"><thead><tr><th>Customer</th><th>Contact</th><th>Address</th><th>Company</th><th>Actions</th></tr></thead><tbody>{filtered.map((customer) => <tr key={customer.id}><td><div className="person-cell"><span className="mini-avatar">{customer.name.split(' ').map((x) => x[0]).join('')}</span><b>{customer.name}</b></div></td><td><b>{customer.phone}</b><small>{customer.email}</small></td><td>{customer.address}</td><td>{customer.company}</td><td><button className="more-button" onClick={() => notify(`Viewing ${customer.name}`)}>View</button></td></tr>)}</tbody></table></div>{filtered.length === 0 && <EmptyState label="No customers found" />}</section>; }
function Orders({ orders, setModal, advanceOrder }) { const [filter, setFilter] = useState('All'); const visible = filter === 'All' ? orders : orders.filter((order) => order.status === filter); return <section className="panel full-panel"><div className="toolbar"><div className="filter-tabs">{['All', 'Processing', 'Ready for Dispatch', 'Delivered'].map((tab) => <button className={filter === tab ? 'selected' : ''} onClick={() => setFilter(tab)} key={tab}>{tab}</button>)}</div><button className="primary-button" onClick={() => setModal({ type: 'order', order: orders[0] })}><Plus size={17} /> New Order</button></div><div className="table-scroll"><table className="rich-table"><thead><tr><th>Order</th><th>Customer / Product</th><th>Quantity</th><th>Delivery</th><th>Amount</th><th>Status</th><th /></tr></thead><tbody>{visible.map((order) => <tr key={order.id} onClick={() => setModal({ type: 'order', order })}><td><b>{order.id}</b><small>{order.date}</small></td><td><b>{order.customer}</b><small>{order.product}</small></td><td>{order.quantity} PCS</td><td>{order.delivery}</td><td><b>{money(order.amount)}</b></td><td><StatusBadge status={order.status} /></td><td><button className="tiny-action" onClick={(e) => { e.stopPropagation(); advanceOrder(order); }}>Advance <ArrowUpRight size={14} /></button></td></tr>)}</tbody></table></div></section>; }
function Inventory({ products, setModal, setProducts, notify }) { const [search, setSearch] = useState(''); const visible = products.filter((item) => `${item.name} ${item.code}`.toLowerCase().includes(search.toLowerCase())); return <section className="panel full-panel"><div className="toolbar"><div className="local-search"><Search size={17} /><input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search product or code..." /></div><button className="filter-button"><ChevronDown size={15} /> All categories</button><button className="primary-button" onClick={() => setModal('product')}><Plus size={17} /> Add Product</button></div><div className="table-scroll"><table className="rich-table"><thead><tr><th>Product</th><th>Category</th><th>Stock level</th><th>Unit</th><th>Status</th><th>Price</th></tr></thead><tbody>{visible.map((product) => { const status = product.stock <= product.minimum * .25 ? 'Critical' : product.stock <= product.minimum ? 'Low Stock' : 'In Stock'; return <tr key={product.id}><td><b>{product.name}</b><small>{product.code}</small></td><td>{product.category}</td><td><div className="inventory-level"><span>{product.stock} / {product.minimum}</span><div className="progress"><i className={status === 'Critical' ? 'critical' : ''} style={{ width: `${Math.min(product.stock / product.minimum * 100, 100)}%` }} /></div></div></td><td>{product.unit}</td><td><StatusBadge status={status} /></td><td><b>{money(product.price)}</b></td></tr>; })}</tbody></table></div></section>; }
function Dispatch({ dispatches, setModal }) { return <><div className="dispatch-stats"><MiniStat icon={Boxes} label="Total dispatches" value={dispatches.length + 24} /><MiniStat icon={Clock3} label="Ready to ship" value={dispatches.filter((x) => x.status === 'Ready for Dispatch').length} /><MiniStat icon={Truck} label="Dispatched" value={dispatches.filter((x) => x.status === 'Dispatched').length} /><MiniStat icon={Check} label="Delivered" value={dispatches.filter((x) => x.status === 'Delivered').length + 18} /></div><section className="panel full-panel"><div className="toolbar"><div><h2 className="toolbar-title">Dispatch tracking</h2><span className="muted">Live view of active deliveries</span></div><button className="filter-button"><ChevronDown size={15} /> All statuses</button></div><div className="table-scroll"><table className="rich-table"><thead><tr><th>Dispatch</th><th>Customer</th><th>Products</th><th>Dispatch date</th><th>Expected</th><th>Status</th></tr></thead><tbody>{dispatches.map((dispatch) => <tr key={dispatch.id} onClick={() => setModal({ type: 'dispatch', dispatch })}><td><b>{dispatch.id}</b><small>{dispatch.order}</small></td><td>{dispatch.customer}</td><td>{dispatch.products}</td><td>{dispatch.date}</td><td>{dispatch.delivery}</td><td><StatusBadge status={dispatch.status} /></td></tr>)}</tbody></table></div></section></>; }
function MiniStat({ icon: Icon, label, value }) { return <div className="mini-stat"><span><Icon size={18} /></span><div><small>{label}</small><strong>{value}</strong></div></div>; }
function Profile() { return <section className="profile-layout"><div className="profile-card panel"><div className="profile-hero"><span className="large-avatar">AU</span><div><h2>Admin User</h2><p>Manager · BuildStock</p></div><button className="secondary-button">Edit Profile</button></div><div className="profile-section"><h3>Personal information</h3><div className="details-grid"><Detail label="Full name" value="Admin User" /><Detail label="Role" value="Manager" /><Detail label="Email address" value="admin@example.com" /><Detail label="Phone number" value="+91 9876543210" /></div></div><div className="profile-section"><h3>Company information</h3><div className="details-grid"><Detail label="Company" value="BuildStock" /><Detail label="Address" value="Vijayawada, Andhra Pradesh" /></div></div></div><div className="panel profile-side"><span className="stat-icon blue"><Zap size={18} /></span><h3>Workspace settings</h3><p>Your team workspace is running smoothly. Manage preferences and notification rules from settings.</p><button className="secondary-button">Open settings <ArrowUpRight size={15} /></button></div></section>; }
function Detail({ label, value }) { return <div className="detail"><span>{label}</span><b>{value}</b></div>; }
function EmptyState({ label }) { return <div className="empty-state"><Search size={22} /><b>{label}</b></div>; }
function ModalShell({ title, close, children, width = '460px' }) { return <div className="modal-backdrop"><div className="modal" style={{ maxWidth: width }}><div className="modal-header"><h2>{title}</h2><button className="icon-button" onClick={close}><X size={18} /></button></div>{children}</div></div>; }
function CustomerModal({ close, save }) { const [form, setForm] = useState({ name: '', phone: '', email: '', address: '', company: '' }); const change = (e) => setForm({ ...form, [e.target.name]: e.target.value }); return <ModalShell title="Add customer" close={close}><form onSubmit={(e) => { e.preventDefault(); save(form); }}><div className="form-grid"><Field label="Customer name" name="name" value={form.name} change={change} required /><Field label="Contact number" name="phone" value={form.phone} change={change} required /><Field label="Email address" name="email" value={form.email} change={change} /><Field label="Company name" name="company" value={form.company} change={change} /><Field label="Address" name="address" value={form.address} change={change} wide /></div><ModalActions close={close} label="Save customer" /></form></ModalShell>; }
function ProductModal({ close, save }) { const [form, setForm] = useState({ name: '', code: '', category: 'Gypsum Board', stock: '', minimum: '', unit: 'PCS', price: '' }); const change = (e) => setForm({ ...form, [e.target.name]: e.target.value }); return <ModalShell title="Add product" close={close}><form onSubmit={(e) => { e.preventDefault(); save(form); }}><div className="form-grid"><Field label="Product name" name="name" value={form.name} change={change} required /><Field label="Product code" name="code" value={form.code} change={change} required /><Field label="Category" name="category" value={form.category} change={change} /><Field label="Unit" name="unit" value={form.unit} change={change} /><Field label="Available stock" name="stock" type="number" value={form.stock} change={change} required /><Field label="Minimum stock" name="minimum" type="number" value={form.minimum} change={change} required /><Field label="Price" name="price" type="number" value={form.price} change={change} required /></div><ModalActions close={close} label="Save product" /></form></ModalShell>; }
function Field({ label, name, value, change, type = 'text', required, wide }) { return <label className={wide ? 'wide' : ''}>{label}<input name={name} type={type} value={value} onChange={change} required={required} /></label>; }
function ModalActions({ close, label }) { return <div className="modal-actions"><button type="button" className="secondary-button" onClick={close}>Cancel</button><button type="submit" className="primary-button"><Check size={16} />{label}</button></div>; }
function NotificationPanel({ close }) { return <ModalShell title="Notifications" close={close}><div className="notification-list"><Activity icon={AlertTriangle} title="Stock needs attention" detail="18 products are below minimum stock." time="Now" /><Activity icon={Truck} title="Order ready for dispatch" detail="ORD-1001 is ready to move." time="2h" /><Activity icon={Check} title="Delivery completed" detail="ORD-1002 has been delivered." time="Yesterday" /></div></ModalShell>; }
function OrderModal({ order, close }) { return <ModalShell title={`Order ${order.id}`} close={close} width="540px"><div className="order-summary"><div><span>Customer</span><b>{order.customer}</b></div><div><span>Total amount</span><b>{money(order.amount)}</b></div><div><span>Expected delivery</span><b>{order.delivery}</b></div></div><div className="modal-product"><Package size={18} /><div><b>{order.product}</b><span>{order.quantity} PCS</span></div></div><h3 className="timeline-title">Order progress</h3><div className="timeline">{['Order Placed', 'Confirmed', 'Processing', 'Ready for Dispatch', 'Dispatched', 'Delivered'].map((stage, index) => <div className={index <= ['Pending', 'Confirmed', 'Processing', 'Ready for Dispatch', 'Dispatched', 'Delivered'].indexOf(order.status) ? 'done' : ''} key={stage}><span>{index <= ['Pending', 'Confirmed', 'Processing', 'Ready for Dispatch', 'Dispatched', 'Delivered'].indexOf(order.status) ? <Check size={13} /> : index + 1}</span><b>{stage}</b></div>)}</div></ModalShell>; }
function DispatchModal({ dispatch, close }) { const stages = ['Order Confirmed', 'Packed', 'Dispatched', 'Out for Delivery', 'Delivered']; const current = stages.indexOf(dispatch.status === 'Ready for Dispatch' ? 'Packed' : dispatch.status); return <ModalShell title={`Dispatch ${dispatch.id}`} close={close}><div className="order-summary"><div><span>Order</span><b>{dispatch.order}</b></div><div><span>Customer</span><b>{dispatch.customer}</b></div></div><div className="modal-product"><Truck size={18} /><div><b>{dispatch.products}</b><span>Expected {dispatch.delivery}</span></div></div><h3 className="timeline-title">Tracking timeline</h3><div className="timeline">{stages.map((stage, index) => <div className={index <= current ? 'done' : ''} key={stage}><span>{index <= current ? <Check size={13} /> : index + 1}</span><b>{stage}</b></div>)}</div></ModalShell>; }

createRoot(document.getElementById('root')).render(<StrictMode><App /></StrictMode>);