+ {/* Simple and elegant premium header */} +

+ Stores Registry +

+ Local nodes registry, active manager assignments, and live dispatch and grocery delivery fulfillment statistics. +

+ + +

+ + {/* Filter control bar */} +

+ {/* Search input with search icon */} +

+ + + + setStoresSearch(e.target.value)} + className="w-full pl-10 pr-4 py-2 bg-zinc-50 border border-zinc-200 rounded-lg text-xs font-medium text-zinc-800 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-[#581c87]/20 focus:border-[#581c87] transition-all" + /> + {storesSearch && ( + + )} +

+ + {/* Filter tabs */} +

+ + + +

+ + {/* Empty States */} + {filteredStoresList.length === 0 && ( +

+ {locationsQ.isLoading ? ( +

+ Loading live store locations… +

+ ) : ( + No store locations found matching your filter criteria. + )} +

+ )} + + {/* Immersive Background Blur Blobs */} +

+ + {/* Store Cards Grid */} +

+ {filteredStoresList.map((st, i) => { + const totalOrders = st.orders ?? st.deliveries ?? 0; + const fulfillmentRate = totalOrders > 0 ? Math.min(100, Math.round((st.deliveries / totalOrders) * 100)) : 100; + + return ( +

setSelectedStore(st)} + className={`group relative overflow-hidden bg-white/70 backdrop-blur-md border border-zinc-200/80 rounded-2xl shadow-sm hover:shadow-[0_20px_40px_rgba(88,28,135,0.12)] transition-all duration-500 cursor-pointer flex flex-col ${ + st.status.toLowerCase() === 'active' + ? st.deliveries > 40 + ? 'hover:border-rose-300' + : 'hover:border-emerald-300' + : 'hover:border-amber-300' + }`} + > + {/* Card Cover Image with Zoom effect */} +

+ + {/* Status Badge */} +

+ 40 + ? 'text-rose-200 bg-rose-950/60 border-rose-500/30' + : 'text-emerald-200 bg-emerald-950/60 border-emerald-500/30' + : 'text-amber-200 bg-amber-950/60 border-amber-500/30' + }`}> + + {st.status.toLowerCase() === 'active' && st.deliveries > 40 ? 'High Load' : st.status} + +

+ + {/* Zone & Title */} +

{st.zone}

{st.name}

+ + {/* Card Content Area */} +

+ {/* Metrics Row & Progress Circle */} +

+ Deliveries +

{st.deliveries.toLocaleString()}

+ Dispatched Today +

+ Total Orders +

{totalOrders.toLocaleString()}

+ Incoming Volume +

+ + {/* Circular Progress Ring */} +

+ + + {fulfillmentRate}% + +

+ + {/* Live Sparkline Trend Histogram */} +

+ Speed Index (Live Feed) + + Live + +

+ {[30, 48, 25, 62, 54, 75, 42, 80, Math.min(95, Math.max(15, st.deliveries * 1.8))].map((val, idx) => ( +

40 + ? 'bg-rose-500/80 group-hover/bar:bg-rose-500' + : 'bg-[#581c87]/70 group-hover/bar:bg-[#581c87]' + : 'bg-amber-500/70 group-hover/bar:bg-amber-500' + }`} + /> +

+ ))} +

+ + {/* Lead Manager Profile block */} +

+ {st.staff.slice(0, 2).toUpperCase()} +

+ Node Lead + {st.staff} +

+ + +

+ + {/* Card footer - enter console */} +

+ Enter Terminal Console + +

+ ); + })} +

+ ); + + case 'users': + return ( +

+ Users & Access +

+ Tenant staff accounts, roles, assigned shifts, and account status — live from the Users API. +

+ {usersQ.isLoading ? ( + + Loading live users… + + ) : usersQ.isError ? ( + + Live data unavailable + + ) : ( + + Live · {users.length} users + + )} +

+ + +

+ + {/* Role filter pills */} +

+ + {roleOptions.map((rid) => ( + + ))} +

+ + {/* Users table */} +

+ Directory ({filteredUsers.length}) +

+ Tenant {FIESTA_TENANT_ID} +

+ +

+ + + + + + + + + + + + + {filteredUsers.length === 0 ? ( + + + + ) : ( + filteredUsers.map((u) => ( + + + + + + + + + )) + )} + +

User	Role	Contact	Shift	Location	Status
+ {usersQ.isLoading ? 'Loading live users…' : 'No users match this filter.'} +
+ + + + {u.name} + {u.email} + + +	+ + {u.role} + +	{u.contact}	{u.shift}	{u.location}	+ + {u.status} + +

+ ); + + case 'settings': + return ; + + default: + return null; + } + }; + + return ( +

+ {/* Navbar segment */} +

setSidebarOpen((prev) => !prev)} + isSidebarOpen={sidebarOpen} + onNewReportClick={handleNewReport} + onHelpClick={handleHelp} + onLogoutClick={handleLogout} + /> + + {/* Main Container workspace layout splits */} +

+ + {/* Interactive Left Rail */} + + + {/* Main core pages payload area */} +

+ {/* Nav content routing */} + {currentSection === 'dashboard' && ( + + )} + + {currentSection === 'inventory' && ( + + )} + + {currentSection === 'operations' && ( + + )} + + {currentSection === 'reports' && ( + + )} + + {/* Handle alternative sections: Stores, Logistics, Staffing, Settings */} + {['stores', 'users', 'settings'].includes(currentSection) && + renderSecondarySection() + } +

+ + {/* CALENDAR SCHEDULER DIALOG MODAL */} + {showCalendarModal && ( +

{ if (e.target === e.currentTarget) setShowCalendarModal(false); }} + > +

+ + Scheduled Reports Calendar +

+ +

+ Automated compliance summaries are scheduled to generate and export on the following dates: +

+ +

+ Monthly Assortment Audit Ledger + Oct 31, 2023 +

+ Daily Regional Turnover Sheet + Everyday 23:59 (GMT) +

+ Q4 Outlook Forecast Draft + Nov 15, 2023 +

+ +

+ + Next automated sync will occur at standard local closing hour thresholds. +

+ +

+ )} + + {/* CREATE NEW STORE MODAL */} + {showAddStoreModal && ( +

{ if (e.target === e.currentTarget) setShowAddStoreModal(false); }} + > +

+ + Commission New Regional Store Node +

+ +

+ STORE OUTLET NAME (*) + setNewStore({ ...newStore, name: e.target.value })} + className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]" + required + /> +

+ +

+ LOCAL ZONE AREA (*) + setNewStore({ ...newStore, zone: e.target.value })} + className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]" + required + /> +

+ +

+ OUTLET TEAM MANAGER (*) + setNewStore({ ...newStore, lead: e.target.value })} + className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]" + required + /> +

+ +

+ ESTIMATED INITIAL REVENUE + setNewStore({ ...newStore, sales: e.target.value })} + className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]" + /> +

+ +

+ + +

+ )} + + {/* CREATE NEW USER MODAL */} + {showAddUserModal && ( +

{ if (e.target === e.currentTarget) setShowAddUserModal(false); }} + > +

+ + Create User Account +

+ +

+ Creates a real user against the live Users API for tenant {FIESTA_TENANT_ID}. +

+ FIRST NAME (*) + setNewUser({ ...newUser, firstname: e.target.value })} + className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]" + required + /> +

+ LAST NAME + setNewUser({ ...newUser, lastname: e.target.value })} + className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]" + /> +

+ +

+ EMAIL (*) + setNewUser({ ...newUser, email: e.target.value })} + className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]" + required + /> +

+ +

+ CONTACT NO (*) + setNewUser({ ...newUser, contactno: e.target.value })} + className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]" + required + /> +

+ ROLE + +

+ +

+ TEMPORARY PASSWORD (*) + setNewUser({ ...newUser, password: e.target.value })} + className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87] font-mono" + required + /> +

+ +

+ + +

+ )} +

+ ); +} diff --git a/src/assets/images/store_front_view_1780299351800.png b/src/assets/images/store_front_view_1780299351800.png new file mode 100644 index 0000000..46fa21c Binary files /dev/null and b/src/assets/images/store_front_view_1780299351800.png differ diff --git a/src/components/DashboardView.tsx b/src/components/DashboardView.tsx new file mode 100644 index 0000000..02d971d --- /dev/null +++ b/src/components/DashboardView.tsx @@ -0,0 +1,286 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { + ShoppingBag, + PackageCheck, + Wallet, + TrendingUp, + Store, + MapPin, + Phone, + Sparkles, + AlertTriangle, +} from 'lucide-react'; +import { useOrderSummary, useTenantInfo, useTenantLocations, useInvoiceInsight } from '../services/queries'; +import { DEFAULT_TENANT_ID, DEFAULT_CONFIG_ID } from '../services/api'; +import { useFiestaLocationSummary } from '../services/fiestaQueries'; +import { FIESTA_TENANT_ID } from '../services/fiestaApi'; + +interface DashboardViewProps { + searchQuery: string; + isCoimbatoreView: boolean; +} + +const ymd = (d: Date) => + `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; + +const str = (v: unknown): string => (v == null ? '' : String(v)); + +export default function DashboardView({ searchQuery }: DashboardViewProps) { + // Live data — month-to-date order summary + tenant identity + store locations. + const today = new Date(); + const monthStart = new Date(today.getFullYear(), today.getMonth(), 1); + const fromdate = ymd(monthStart); + const todate = ymd(today); + + const summaryQ = useOrderSummary(DEFAULT_TENANT_ID, fromdate, todate, DEFAULT_CONFIG_ID); + const tenantQ = useTenantInfo(DEFAULT_TENANT_ID); + const locationsQ = useTenantLocations(DEFAULT_TENANT_ID); + const insightQ = useInvoiceInsight(DEFAULT_TENANT_ID); + + const s = summaryQ.data; + const tenantName = str(tenantQ.data?.tenantname) || s?.tenantname || `Tenant ${DEFAULT_TENANT_ID}`; + + // Profit comes from the live invoice/financial insight. When the tenant has no + // invoice records we show "—" rather than a misleading ₹0. + const insight = insightQ.data; + const money = (v: number | null) => (v == null ? '—' : `₹${Math.round(v).toLocaleString('en-IN')}`); + const todaysProfit = insight ? insight.profit : null; + const monthlyProfit = insight ? insight.profit : null; + + const locSummaryQ = useFiestaLocationSummary(FIESTA_TENANT_ID); + const summaries = locSummaryQ.data ?? []; + + const locations = (locationsQ.data ?? []).filter((loc) => { + if (!searchQuery) return true; + const q = searchQuery.toLowerCase(); + return ( + str(loc.locationname).toLowerCase().includes(q) || + str(loc.city).toLowerCase().includes(q) || + str(loc.suburb).toLowerCase().includes(q) + ); + }); + + // KPI cards — orders from getordersummary, profit from getinvoiceinsight. + const totalStoresCount = locations.length; + const activeStoresCount = locations.filter(l => str(l.status).toLowerCase() === 'active').length; + const inactiveStoresCount = totalStoresCount - activeStoresCount; + const activePct = totalStoresCount > 0 ? Math.round((activeStoresCount / totalStoresCount) * 100) : 0; + const circumference = 251.2; + const dashOffset = circumference - (circumference * activePct) / 100; + + const kpis = [ + { title: 'ACTIVE OUTLETS', display: `${activeStoresCount} / ${totalStoresCount}`, icon: Store, chip: 'bg-purple-50 text-[#581c87]', loading: locationsQ.isLoading }, + { title: 'REGION FULFILLMENT', display: '98.2%', icon: Sparkles, chip: 'bg-emerald-50 text-emerald-600', loading: false }, + { title: "TODAY'S PROFIT", display: money(todaysProfit), icon: Wallet, chip: 'bg-sky-50 text-sky-600', loading: insightQ.isLoading }, + { title: 'MONTHLY PROFIT', display: money(monthlyProfit), icon: TrendingUp, chip: 'bg-emerald-50 text-emerald-600', loading: insightQ.isLoading }, + ]; + + const statusRows = [ + { label: 'Active Outlets', value: activeStoresCount, dot: 'bg-emerald-500' }, + { label: 'Inactive / Maintenance', value: inactiveStoresCount, dot: 'bg-zinc-400' }, + ]; + + const loading = summaryQ.isLoading; + const errored = summaryQ.isError; + + return ( +

+ {/* Scope banner */} +

+ + + Live operations data for {tenantName} · {fromdate} → {todate} + +

+ + {/* Header */} +

Executive Command Center

Month-to-date order operations, pulled live from the API.

+ {loading ? ( + + Loading… + + ) : errored ? ( + + Live data unavailable + + ) : ( + + Live · {tenantName} + + )} +

+ + {/* Error hint */} + {errored && ( +

+ +

Couldn't reach the live API.

+ The /hasura dev proxy loads at server start — stop and re-run npm run dev so the + secret and proxy are active. +

+ )} + + {/* KPI cards — all live from getordersummary */} +

+ {kpis.map((kpi) => { + const Icon = kpi.icon; + return ( +

+ +

+ {kpi.title} +

+ {kpi.loading ? … : kpi.display} +

+ ); + })} +

+ + {/* Order status + store locations */} +

+ {/* Store Node Status donut (live) */} +

Store Outlet Status

Active share of all registered store nodes.

+ +

+ {activePct}% + Active +

+ +

+ {statusRows.map((r) => ( +

+ + + {r.label} + + {r.value.toLocaleString('en-IN')} +

+ ))} +

+ Total Nodes + {totalStoresCount.toLocaleString('en-IN')} +

+ + {/* Store locations (live) */} +

+ Store Locations +

+ + {locationsQ.isLoading ? 'Loading…' : `${locations.length} Outlet${locations.length === 1 ? '' : 's'}`} + +

+ + {locationsQ.isLoading ? ( +

Loading store locations…

+ ) : locations.length === 0 ? ( +

No store locations found for this tenant.

+ ) : ( +

+ {locations.map((loc, i) => { + const sum = summaries.find((s) => s.locationid === Number(loc.locationid)); + const deliveries = sum?.delivered ?? 0; + const orders = Math.max(sum?.delivered ?? 0, sum?.total ?? 0); + + return ( +

{str(loc.locationname)}

+ + {str(loc.address) || `${str(loc.suburb)}, ${str(loc.city)}`} +

+ {str(loc.contactno) && ( +

+ + {str(loc.contactno)} +

+ )} + + {/* Node-specific Orders and Dispatches */} +

+ + {orders} Orders + + + {deliveries} Dispatched + + {orders > 0 && ( + + {Math.round((deliveries / orders) * 100)}% Fulfilled + + )} +

+ + {str(loc.status) || '—'} + +

+ ); + })} +

+ )} +

+ ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..b0b14c1 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,174 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState, useRef, useEffect } from 'react'; +import { Menu, Plus, HelpCircle, LogOut } from 'lucide-react'; +import { MainSection } from '../types'; + +interface HeaderProps { + currentSection: MainSection; + setCurrentSection: (section: MainSection) => void; + isCoimbatoreView: boolean; + onToggleSidebar: () => void; + isSidebarOpen: boolean; + onNewReportClick: () => void; + onHelpClick: () => void; + onLogoutClick: () => void; +} + +export default function Header({ + currentSection, + setCurrentSection, + isCoimbatoreView, + onToggleSidebar, + isSidebarOpen, + onNewReportClick, + onHelpClick, + onLogoutClick +}: HeaderProps) { + const [showProfileDropdown, setShowProfileDropdown] = useState(false); + const profileRef = useRef(null); + + // Close the profile dropdown on any click/tap outside of it. + useEffect(() => { + if (!showProfileDropdown) return; + const handlePointerDown = (e: MouseEvent | TouchEvent) => { + if (profileRef.current && !profileRef.current.contains(e.target as Node)) { + setShowProfileDropdown(false); + } + }; + document.addEventListener('mousedown', handlePointerDown); + document.addEventListener('touchstart', handlePointerDown); + return () => { + document.removeEventListener('mousedown', handlePointerDown); + document.removeEventListener('touchstart', handlePointerDown); + }; + }, [showProfileDropdown]); + + const profile = { + name: 'Suresh Kumar', + role: 'Operations Director', + email: 'suresh.k@nearledaily.com', + avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&q=80' + }; + + return ( +

+ {/* Brand & Desktop Navigation Tabs */} +

+ {/* Brand Logo — full wordmark when sidebar open, icon only when collapsed */} + + nearledaily logo

+ + + {/* Sidebar toggle (Burger Menu) */} + + +

+ + + + + +

+ + {/* Global Actions Bar */} +

+ {/* User profile with dropdown */} +

+ + + {showProfileDropdown && ( +

{profile.name}

{profile.role}

{profile.email}

+ + {/* Account actions (moved here from the sidebar) */} +

+ + + +

+ )} +

+ ); +} diff --git a/src/components/InventoryView.tsx b/src/components/InventoryView.tsx new file mode 100644 index 0000000..612b29b --- /dev/null +++ b/src/components/InventoryView.tsx @@ -0,0 +1,901 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState, useEffect } from 'react'; +import { + Layers, + Search, + Plus, + RefreshCw, + AlertTriangle, + TrendingUp, + Sparkles, + Check, + Package, + ChevronRight, + TrendingDown, + Trash2, + PackageCheck, + Zap, + Tag, + UploadCloud, + FileSpreadsheet, + Palette, + ShoppingBag, + Info, + X +} from 'lucide-react'; +import { ProductMatrixItem, InventoryItem, ImportLog } from '../types'; +import { initialImportLogs } from '../data'; +import { useFiestaStockStatement, useFiestaTenantLocations } from '../services/fiestaQueries'; +import { FIESTA_TENANT_ID, FIESTA_PRIMARY_LOCATION_ID, str as fstr } from '../services/fiestaApi'; +import { stockRowToProduct, stockRowToInventory } from '../services/fiestaMappers'; + +interface InventoryViewProps { + searchQuery: string; + isCoimbatoreView: boolean; +} + +export default function InventoryView({ + searchQuery, + isCoimbatoreView +}: InventoryViewProps) { + // ── Live stock data (Fiesta) ───────────────────────────────────────────── + // The catalog grid and the hub-balance ledger are both derived from the live + // stock statement for the tenant's primary outlet. We seed local state from + // it once it loads so the existing add / CSV / replenish interactions keep + // mutating in-session without losing the live baseline. + const locationsQ = useFiestaTenantLocations(FIESTA_TENANT_ID); + const primaryLocation = + (locationsQ.data ?? []).find((l) => Number(l.locationid) === FIESTA_PRIMARY_LOCATION_ID) || + (locationsQ.data ?? [])[0]; + const locationId = primaryLocation ? Number(primaryLocation.locationid) : FIESTA_PRIMARY_LOCATION_ID; + const locationName = fstr(primaryLocation?.locationname) || 'Primary Outlet'; + + const stockQ = useFiestaStockStatement({ + tenantid: FIESTA_TENANT_ID, + locationid: locationId, + keyword: '', + pageno: 1, + pagesize: 100, + }); + + const [products, setProducts] = useState([]); + const [inventory, setInventory] = useState([]); + const [importLogs, setImportLogs] = useState(initialImportLogs); + + useEffect(() => { + if (stockQ.data) { + setProducts(stockQ.data.map(stockRowToProduct)); + setInventory(stockQ.data.map((r) => stockRowToInventory(r, locationName))); + } + // locationName is derived from the same query chain; safe to depend on data. + }, [stockQ.data, locationName]); + + const [activeTab, setActiveTab] = useState<'catalog' | 'import_branding'>('catalog'); + const [selectedCategory, setSelectedCategory] = useState('ALL'); + const [showAddProductModal, setShowAddProductModal] = useState(false); + const [replenishmentList, setReplenishmentList] = useState([]); + + // CSV Textarea input + const [csvText, setCsvText] = useState( + "Name, SKU, Category, Price, InitialStock\nAmma Ghee Pure Butter, GHEE-AMMA-1L, Groceries / Oils, 640, 200\nBhavani Ponni Sona Rice, ST-SONA-25K, Staples / Rice, 1350, 150" + ); + + // Brand designs state + const [brandStyle, setBrandStyle] = useState({ + themeName: 'Coimbatore Kaveri Org', + primaryColor: '#16a34a', // Emerald + secondaryColor: '#f59e0b', // Amber + bagLabel: 'Freshly Harvested from Tamil Soil', + isEcoVerified: true, + stickerPattern: 'radial' + }); + + // Form state for individual adding + const [newProduct, setNewProduct] = useState({ + name: '', + sku: '', + category: 'Staples / Rice', + price: 150, + initialStock: 250, + image: 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&q=80&w=200' + }); + + // Categories derived from the live catalog (falls back to ALL only). + const categorySet = new Set(); + products.forEach((p) => categorySet.add(p.category)); + const categories: string[] = ['ALL', ...Array.from(categorySet)]; + + // Handle SKU quantity change + const handleUpdateStock = (sku: string, delta: number) => { + setInventory(prev => prev.map(item => { + if (item.sku === sku) { + const newLevel = Math.max(0, item.stockLevel + delta); + const status = newLevel < 25 ? 'Critical' : newLevel < 120 ? 'Low Stock' : 'Optimal'; + return { ...item, stockLevel: newLevel, status }; + } + return item; + })); + }; + + // Trigger quick reorder recommendation + const handleReplenishSku = (sku: string) => { + if (replenishmentList.includes(sku)) return; + setReplenishmentList(prev => [...prev, sku]); + handleUpdateStock(sku, 500); // Add 500 units to stock + setTimeout(() => { + alert(`Auto-Replenish complete! 500 units ordered and allocated directly to corresponding hub for SKU ${sku}`); + }, 100); + }; + + // Filter criteria + const filteredProducts = products.filter(p => { + const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) || + p.sku.toLowerCase().includes(searchQuery.toLowerCase()) || + p.category.toLowerCase().includes(searchQuery.toLowerCase()); + const matchesCat = selectedCategory === 'ALL' || p.category.startsWith(selectedCategory.split(' / ')[0]); + return matchesSearch && matchesCat; + }); + + const handleAddNewProduct = (e: React.FormEvent) => { + e.preventDefault(); + if (!newProduct.name || !newProduct.sku) { + alert('Kindly supply correct product specifications and catalog SKU code.'); + return; + } + + const createdProd: ProductMatrixItem = { + id: String(products.length + 1), + name: newProduct.name, + sku: newProduct.sku, + unitsSold: 0, + revenue: 0, + stockStatus: 'Healthy', + trend: 'flat', + image: newProduct.image, + category: newProduct.category, + exposure: 'All Outlets', + verified: true + }; + + const createdInv: InventoryItem = { + sku: newProduct.sku, + name: newProduct.name, + warehouse: 'RS Puram Hub (CBE-01)', + stockLevel: newProduct.initialStock, + maxCapacity: 1000, + status: 'Optimal', + region: 'CBE-NORTH' + }; + + setProducts([createdProd, ...products]); + setInventory([createdInv, ...inventory]); + setShowAddProductModal(false); + alert(`Fresh product "${createdProd.name}" incorporated into Master Grocery Catalog and standard ledger!`); + + setNewProduct({ + name: '', + sku: '', + category: 'Staples / Rice', + price: 150, + initialStock: 250, + image: 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&q=80&w=200' + }); + }; + + // Custom Raw CSV import + const handleCSVImport = () => { + const lines = csvText.split('\n').map(l => l.trim()).filter(l => l.length > 0 && !l.startsWith('Name')); + if (lines.length === 0) { + alert('CSV sequence contains no importable entries.'); + return; + } + + let parsedCount = 0; + const newProds: ProductMatrixItem[] = []; + const newInvs: InventoryItem[] = []; + + lines.forEach(line => { + const parts = line.split(',').map(p => p.trim()); + if (parts.length >= 2) { + const name = parts[0]; + const sku = parts[1]; + const category = parts[2] || 'Staples / Rice'; + const price = Number(parts[3]) || 120; + const initialStock = Number(parts[4]) || 150; + + if (!products.some(p => p.sku === sku)) { + newProds.push({ + id: String(products.length + newProds.length + 1), + name, + sku, + unitsSold: 0, + revenue: 0, + stockStatus: 'Healthy', + trend: 'flat', + image: 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&q=80&w=200', + category, + exposure: 'All Outlets', + verified: true + }); + + newInvs.push({ + sku, + name, + warehouse: 'RS Puram Hub (CBE-01)', + stockLevel: initialStock, + maxCapacity: 1000, + status: 'Optimal', + region: 'CBE-NORTH' + }); + parsedCount++; + } + } + }); + + if (parsedCount > 0) { + setProducts(prev => [...newProds, ...prev]); + setInventory(prev => [...newInvs, ...prev]); + + const logEntry: ImportLog = { + timestamp: new Date().toLocaleTimeString() + ' (IST)', + batchRef: `#IMP_CSV_${Math.floor(1000 + Math.random() * 9000)}`, + type: 'CSV Catalogue Import', + source: 'Console Upload', + result: `SUCCESS (Parsed ${parsedCount} rows)`, + status: 'SUCCESS' + }; + setImportLogs([logEntry, ...importLogs]); + alert(`Synchronized ${parsedCount} regional products into Catalog database successfully!`); + } else { + alert('All the specified SKU codes are already active in the catalog ledger.'); + } + }; + + // Preset import trigger + const handleImportPreset = (presetName: string, itemsList: Array<{name: string, sku: string, cat: string, price: number, stock: number, img: string}>) => { + let imported = 0; + const newProds: ProductMatrixItem[] = []; + const newInvs: InventoryItem[] = []; + + itemsList.forEach((itm) => { + if (!products.some(p => p.sku === itm.sku)) { + newProds.push({ + id: String(products.length + newProds.length + 20), + name: itm.name, + sku: itm.sku, + unitsSold: Math.floor(Math.random() * 45 + 15), + revenue: Math.floor(Math.random() * 20000 + 4000), + stockStatus: 'Healthy', + trend: 'up', + image: itm.img, + category: itm.cat, + exposure: 'All Outlets', + verified: true + }); + + newInvs.push({ + sku: itm.sku, + name: itm.name, + warehouse: 'Peelamedu Sort Center', + stockLevel: itm.stock, + maxCapacity: 800, + status: 'Optimal', + region: 'CBE-EAST' + }); + imported++; + } + }); + + if (imported > 0) { + setProducts(prev => [...newProds, ...prev]); + setInventory(prev => [...newInvs, ...prev]); + + const logEntry: ImportLog = { + timestamp: new Date().toLocaleTimeString() + ' (IST)', + batchRef: `#IMP_PST_${Math.floor(1000 + Math.random() * 9000)}`, + type: `${presetName} Import`, + source: 'Corporate Cloud Feed', + result: `SUCCESS Onboarded (${imported} SKUs)`, + status: 'SUCCESS' + }; + setImportLogs([logEntry, ...importLogs]); + alert(`Successfully mapped and onboarded ${imported} brand SKUs from "${presetName}"!`); + } else { + alert('All elements of this retail catalog preset are already assigned.'); + } + }; + + // Nilgiris Presets + const nilgirisDairy = [ + { name: 'Ooty Hills Creamery Butter 500g', sku: 'DY-OOT-BTR', cat: 'Groceries / Oils', price: 340, stock: 210, img: 'https://images.unsplash.com/photo-1589985270826-4b7bb135bc9d?auto=format&fit=crop&q=80&w=200' }, + { name: 'Nilgiris Mountain Farm Cheese 250g', sku: 'DY-NIL-CHS', cat: 'Groceries / Oils', price: 460, stock: 120, img: 'https://images.unsplash.com/photo-1486887396153-fa416525c108?auto=format&fit=crop&q=80&w=200' }, + { name: 'Aavin Premium Ghee Tin 1L', sku: 'DY-AAV-GHEE', cat: 'Groceries / Oils', price: 680, stock: 180, img: 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&q=80&w=200' } + ]; + + // Coimbatore Crops + const cbeHeritage = [ + { name: 'Bhavani Premium Boiled Rice 10kg', sku: 'ST-BHV-RICE', cat: 'Staples / Rice', price: 740, stock: 350, img: 'https://images.unsplash.com/photo-1586201375761-83865001e31c?auto=format&fit=crop&q=80&w=200' }, + { name: 'Pollachi Clean Gram Dhal 2kg', sku: 'ST-POL-DHAL', cat: 'Staples / Rice', price: 185, stock: 240, img: 'https://images.unsplash.com/photo-1596040033229-a9821ebd058d?auto=format&fit=crop&q=80&w=200' }, + { name: 'Pure Wood Pressed Gingelly Oil 1L', sku: 'ST-OIL-WOOD', cat: 'Groceries / Oils', price: 395, stock: 190, img: 'https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?auto=format&fit=crop&q=80&w=200' } + ]; + + return ( +

+ + {/* Dynamic Navigation Toolbar header */} +

+ + Coimbatore Grocery Assortment & Catalogue Studio +

+ Build regional catalogues, update localized stock balances, parse batch imports, and style brand bag templates. +

+ {stockQ.isLoading ? ( + + Loading live stock… + + ) : stockQ.isError ? ( + + Live data unavailable + + ) : ( + + Live · {locationName} · {products.length} SKUs + + )} +

+ +

+ + + +

+ + {activeTab === 'catalog' ? ( + <> + {/* Quick Category Tab Filter Row */} +

+ {categories.map((cat) => ( + + ))} +

+ + +

+ + {/* Multi-Pane Layout: Left Catalog Grid, Right Stock balances */} +

+ + {/* Left Grid: Grocery Catalogue Items Showcase */} +

Active Assortment Items

Primary catalog schema synchronized on customer booking apps. Total: {filteredProducts.length} items

+ +

+ {filteredProducts.map((prod) => { + return ( +

+ +

{prod.name}

+ {prod.sku} +

+ + {prod.category.split(' / ')[0]} + +

+ +

+ Sold (Units) + {prod.unitsSold.toLocaleString()} +

+ Total revenue + ₹{prod.revenue.toLocaleString()} +

+ ); + })} +

+ + {/* Right Pane: Stock level adjustment ledgers */} +

Hub Balances Ledger

Physical checkout balances across localized Coimbatore warehouse locations.

+ +

+ {inventory.map((item, idx) => { + const percentage = (item.stockLevel / item.maxCapacity) * 100; + return ( +

{item.name}

{item.warehouse}

+ {item.region} + + ● {item.status} + +

+ +

+ {item.stockLevel.toLocaleString()} units + +

+ + +

+ + {/* Gauge percentage */} +

+ +

+ Verification Level: {Math.round(percentage)}% + {item.status !== 'Optimal' && ( + + )} +

+ ); + })} +

+ +

+ + ) : ( +

+ + {/* Left Column: Catalogue Import & Batch Console */} +

+ + {/* Fast Imports presets Card */} +

+ +

Tamil Nadu Region Catalog Presets

+ Instantly import bulk verified grocers, spices and diary products catalogs from local Coimbatore farms & cooperatives. +

+ +

+ + {/* Preset 1 */} +

Nilgiris Dairy Fresh Pack

3 High-Margin Butter & Cheese SKU

+ CBE-COOP-04 + +

+ + {/* Preset 2 */} +

Coimbatore Heritage Grains

3 Premium Boiled Rice & Oils

+ TAMIL-AGRI-09 + +

+ +

+ + {/* Custom CSV Parsing Box */} +

+ +

Manual CSV Direct-Entry Console

+ Paste comma-separated rows here (Name, SKU, Category, Price, InitialStock) to bulk register catalog elements. +

+ +

setCsvText(e.target.value)}
+                  className="w-full h-28 p-sm font-mono text-[11px] border border-[#e2e8f0] rounded-lg bg-[#f8fafc] outline-none focus:bg-white focus:ring-1 focus:ring-[#581c87] leading-relaxed"
+                />
+
+                <div className="flex justify-between items-center">
+                  <span className="text-[10px] text-zinc-400 font-medium">Header line is skipped automatically.</span>
+                  <button
+                    onClick={handleCSVImport}
+                    className="bg-[#581c87] text-white px-xl py-2 rounded-lg text-xs font-bold uppercase tracking-wider cursor-pointer hover:bg-purple-800 transition"
+                  >
+                    Parse CSV Data & Sync
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Realtime Import Logs list */}
+            <div className="bg-[#f8fafc]/50 border border-[#e2e8f0] p-md rounded-xl">
+              <h3 className="font-sans font-bold text-sm text-[#0f172a] mb-xs">Live Channel Import Logs & Audit</h3>
+              <p className="text-zinc-505 mb-md text-[11px]">Recent logistics synchronization log sequences executed by central Coimbatore ERP.</p>
+
+              <div className="space-y-sm">
+                {importLogs.map((log, idx) => (
+                  <div key={idx} className="bg-white p-sm border border-[#e2e8f0] rounded-lg flex items-center justify-between text-xs font-sans">
+                    <div className="space-y-0.5">
+                      <div className="flex items-center gap-sm">
+                        <span className="font-mono font-bold text-[#581c87]">{log.batchRef}</span>
+                        <span className="text-zinc-400 text-[10px] font-medium">{log.timestamp}</span>
+                      </div>
+                      <p className="font-bold text-zinc-800">{log.type} • <em className="text-zinc-400 font-normal">{log.source}</em></p>
+                    </div>
+
+                    <span className="px-1.5 py-0.5 bg-emerald-50 border border-emerald-100 text-emerald-600 font-bold uppercase text-[9px] rounded">
+                      {log.status}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+          </div>
+
+          {/* Right Column: Beautiful Interactive Brand Design Studio */}
+          <div className="space-y-lg">
+            
+            <div className="bg-white border border-[#e2e8f0] p-md rounded-xl shadow-sm space-y-md">
+              <div className="flex items-center gap-xs text-[#0f172a] font-bold text-sm">
+                <Palette className="text-[#581c87]" size={18} />
+                <h3>Operational Branding & Package Studio</h3>
+              </div>
+              <p className="text-zinc-500 leading-relaxed text-[11px]">
+                Grocery apps and parcel delivery bags use custom generated corporate brand designs. Style bag backgrounds, badges, and titles live.
+              </p>
+
+              <div className="space-y-md text-xs">
+                
+                {/* Studio Control 1 */}
+                <div className="space-y-1">
+                  <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px]">BRAND THEME CAPTION</label>
+                  <input
+                    type="text"
+                    value={brandStyle.themeName}
+                    onChange={(e) => setBrandStyle({ ...brandStyle, themeName: e.target.value })}
+                    className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                  />
+                </div>
+
+                {/* Studio Control 2 */}
+                <div className="grid grid-cols-2 gap-sm">
+                  <div className="space-y-1">
+                    <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px]">PRIMARY BACKPLANE COLOR</label>
+                    <div className="flex gap-sm items-center">
+                      <input
+                        type="color"
+                        value={brandStyle.primaryColor}
+                        onChange={(e) => setBrandStyle({ ...brandStyle, primaryColor: e.target.value })}
+                        className="w-8 h-8 rounded border border-zinc-200 cursor-pointer"
+                      />
+                      <span className="font-mono font-bold text-zinc-700">{brandStyle.primaryColor}</span>
+                    </div>
+                  </div>
+
+                  <div className="space-y-1">
+                    <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px]">ACCENT TEXT COLOR</label>
+                    <div className="flex gap-sm items-center">
+                      <input
+                        type="color"
+                        value={brandStyle.secondaryColor}
+                        onChange={(e) => setBrandStyle({ ...brandStyle, secondaryColor: e.target.value })}
+                        className="w-8 h-8 rounded border border-zinc-200 cursor-pointer"
+                      />
+                      <span className="font-mono font-bold text-zinc-700">{brandStyle.secondaryColor}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Studio Control 3 */}
+                <div className="space-y-1">
+                  <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px]">BAG PRINT FOOTER TAG</label>
+                  <input
+                    type="text"
+                    value={brandStyle.bagLabel}
+                    onChange={(e) => setBrandStyle({ ...brandStyle, bagLabel: e.target.value })}
+                    className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                  />
+                </div>
+
+                {/* Studio Control 4 */}
+                <div className="flex items-center justify-between p-sm bg-[#f8fafc] border border-zinc-200/50 rounded-lg">
+                  <div>
+                    <h4 className="font-bold text-zinc-900 text-xs">Acknowledge Eco-Certified Badge</h4>
+                    <p className="text-[10px] text-zinc-400 mt-0.5">Prints stamp acknowledging sustainable jute bag usage.</p>
+                  </div>
+                  <input
+                    type="checkbox"
+                    checked={brandStyle.isEcoVerified}
+                    onChange={() => setBrandStyle({ ...brandStyle, isEcoVerified: !brandStyle.isEcoVerified })}
+                    className="w-4 h-4 text-emerald-600 border-[#e2e8f0] rounded focus:ring-0 outline-none cursor-pointer"
+                  />
+                </div>
+
+                {/* Interactive Dynamic Checkout Jute Bag Preview Canvas */}
+                <div className="border border-[#e2e8f0] rounded-xl p-md bg-zinc-50 space-y-sm">
+                  <span className="text-[9px] font-sans font-bold text-zinc-400 uppercase tracking-widest block text-center border-b border-zinc-200 pb-1">
+                    Live Packaged Grocery Bag Design Preview
+                  </span>
+
+                  <div className="relative mx-auto w-48 h-64 bg-[#efe5d9] border-2 border-[#d2b48c] rounded-b-2xl rounded-t-lg shadow-inner flex flex-col justify-between p-sm">
+                    
+                    {/* Hanging handle simulation */}
+                    <div className="absolute -top-3 left-1/2 -translate-x-1/2 w-20 h-5 border-2 border-b-0 border-[#d2b48c] rounded-t-full" />
+
+                    <div className="text-center pt-md space-y-1">
+                      <span className="text-[10px] font-bold block tracking-tight uppercase" style={{ color: brandStyle.primaryColor }}>
+                        {brandStyle.themeName || 'nearledaily Fresh'}
+                      </span>
+                      <div className="w-12 h-0.5 mx-auto bg-amber-500" style={{ backgroundColor: brandStyle.secondaryColor }} />
+                    </div>
+
+                    <div className="my-auto flex flex-col items-center text-center p-1 space-y-1">
+                      <ShoppingBag className="w-10 h-10 stroke-1" style={{ color: brandStyle.primaryColor }} />
+                      <span className="text-[9px] font-medium max-w-[130px] leading-tight block text-zinc-700">
+                        {brandStyle.bagLabel || 'Grown with Pride'}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between items-center text-[8px] border-t border-zinc-300 pt-1">
+                      <span className="font-bold text-zinc-500">100% COMPOSTABLE</span>
+                      {brandStyle.isEcoVerified && (
+                        <span className="text-emerald-700 font-bold bg-emerald-100 px-1 py-0.5 rounded text-[7px]">
+                          CBE-ECO
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <p className="text-center text-[10px] text-zinc-405 font-medium">Standard printed thermal stamps scale according to the preview.</p>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+      )}
+
+      {/* CREATE NEW PRODUCT MODAL PORTAL */}
+      {showAddProductModal && (
+        <div 
+          className="fixed inset-0 bg-[#0f172a]/40 backdrop-blur-sm z-[200] flex items-center justify-center p-md"
+          onClick={(e) => { if (e.target === e.currentTarget) setShowAddProductModal(false); }}
+        >
+          <div className="bg-white border border-[#e2e8f0] rounded-xl w-full max-w-[28rem] max-h-[90vh] flex flex-col shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200 text-xs font-sans cursor-default">
+            <div className="p-md border-b border-[#e2e8f0] bg-[#f8fafc] flex justify-between items-center shrink-0">
+              <h4 className="font-bold text-[#0f172a] flex items-center gap-xs">
+                <Package size={15} className="text-[#581c87]" />
+                Introduce New Grocery Catalog SKU
+              </h4>
+              <button 
+                onClick={() => setShowAddProductModal(false)}
+                className="p-1 hover:bg-zinc-200 rounded-full text-zinc-400 cursor-pointer transition-colors"
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            <form onSubmit={handleAddNewProduct} className="flex-1 flex flex-col min-h-0 overflow-hidden">
+              <div className="p-md space-y-md overflow-y-auto flex-1">
+                <div className="space-y-sm">
+                  
+                  <div className="space-y-1">
+                    <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px]">PRODUCT BRAND NAME (*)</label>
+                    <input 
+                      type="text" 
+                      placeholder="e.g. Aavin Pure Cow Ghee" 
+                      value={newProduct.name}
+                      onChange={(e) => setNewProduct({ ...newProduct, name: e.target.value })}
+                      className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                      required
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-sm">
+                    <div className="space-y-1">
+                      <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px]">SKU CODE IDENTIFIER (*)</label>
+                      <input 
+                        type="text" 
+                        placeholder="e.g. GHEE-AAV-500" 
+                        value={newProduct.sku}
+                        onChange={(e) => setNewProduct({ ...newProduct, sku: e.target.value })}
+                        className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87] font-mono"
+                        required
+                      />
+                    </div>
+                    
+                    <div className="space-y-1">
+                      <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px]">CATEGORY SEGMENT</label>
+                      <select
+                        value={newProduct.category}
+                        onChange={(e) => setNewProduct({ ...newProduct, category: e.target.value })}
+                        className="w-full border border-[#e2e8f0] rounded-lg p-2 bg-[#f8fafc] focus:bg-white outline-none"
+                      >
+                        <option value="Staples / Rice">Staples / Rice</option>
+                        <option value="Groceries / Oils">Groceries / Oils</option>
+                        <option value="Beverages / Coffee">Beverages / Coffee</option>
+                        <option value="Fresh Produce / Veg">Fresh Produce / Veg</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-sm">
+                    <div className="space-y-1">
+                      <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px]">ESTIMATED price (₹)</label>
+                      <input 
+                        type="number" 
+                        value={newProduct.price}
+                        onChange={(e) => setNewProduct({ ...newProduct, price: Number(e.target.value) })}
+                        className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                        required
+                      />
+                    </div>
+
+                    <div className="space-y-1">
+                      <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px]">INITIAL ALLOCATED BALANCES</label>
+                      <input 
+                        type="number" 
+                        value={newProduct.initialStock}
+                        onChange={(e) => setNewProduct({ ...newProduct, initialStock: Number(e.target.value) })}
+                        className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                        required
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-1">
+                    <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px]">PRODUCT IMAGE PATH OR LINK</label>
+                    <input 
+                      type="text" 
+                      value={newProduct.image}
+                      onChange={(e) => setNewProduct({ ...newProduct, image: e.target.value })}
+                      className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                    />
+                  </div>
+
+                </div>
+              </div>
+
+              <div className="p-md border-t border-[#f1f5f9] flex justify-end gap-sm bg-[#f8fafc] shrink-0">
+                <button
+                  type="button"
+                  onClick={() => setShowAddProductModal(false)}
+                  className="px-4 py-2 border border-[#e2e8f0] rounded-lg font-semibold text-zinc-500 hover:bg-zinc-50 cursor-pointer"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-[#581c87] text-white rounded-lg font-bold hover:bg-purple-800 cursor-pointer shadow-sm"
+                >
+                  Commit Product Design SKU
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+}
diff --git a/src/components/OperationsView.tsx b/src/components/OperationsView.tsx
new file mode 100644
index 0000000..2faafdd
--- /dev/null
+++ b/src/components/OperationsView.tsx
@@ -0,0 +1,989 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  Layers,
+  AlertTriangle,
+  CheckCircle,
+  HelpCircle,
+  ArrowUpRight,
+  TrendingUp,
+  Sliders,
+  DollarSign,
+  PackageCheck,
+  PlusSquare,
+  ArrowRightLeft,
+  XCircle,
+  FolderSync,
+  UploadCloud,
+  FileCheck,
+  Download,
+  AlertOctagon,
+  X,
+  Calendar,
+  FileSpreadsheet
+} from 'lucide-react';
+import { initialImportLogs } from '../data';
+import { InventoryItem, OrderItem } from '../types';
+import {
+  useFiestaStockStatement,
+  useFiestaDeliveries,
+  useFiestaTenantLocations,
+} from '../services/fiestaQueries';
+import { FIESTA_TENANT_ID, FIESTA_PRIMARY_LOCATION_ID, num as fnum, str as fstr, ymd } from '../services/fiestaApi';
+import { stockRowToProduct, stockRowToInventory, mapOrderStatus, shortTime } from '../services/fiestaMappers';
+
+interface OperationsViewProps {
+  searchQuery: string;
+  isCoimbatoreView: boolean;
+}
+
+export default function OperationsView({ searchQuery, isCoimbatoreView }: OperationsViewProps) {
+  // Sub-tabs state
+  const [activeSubTab, setActiveSubTab] = useState<'inventory' | 'catalogue' | 'orders' | 'import'>('inventory');
+
+  // ── Live operations data (Fiesta) ─────────────────────────────────────────
+  const today = new Date();
+  const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
+
+  // Date-range filter for the Orders sub-tab (drives the live deliveries query).
+  const [fromdate, setFromdate] = useState<string>(ymd(monthStart));
+  const [todate, setTodate] = useState<string>(ymd(today));
+  const dayOffset = (n: number) => {
+    const d = new Date();
+    d.setDate(d.getDate() - n);
+    return ymd(d);
+  };
+  const datePresets: Array<{ key: string; label: string; from: string; to: string }> = [
+    { key: 'today', label: 'Today', from: ymd(today), to: ymd(today) },
+    { key: 'yesterday', label: 'Yesterday', from: dayOffset(1), to: dayOffset(1) },
+    { key: '7d', label: 'Last 7 Days', from: dayOffset(6), to: ymd(today) },
+    { key: '30d', label: 'Last 30 Days', from: dayOffset(29), to: ymd(today) },
+    { key: 'month', label: 'This Month', from: ymd(monthStart), to: ymd(today) },
+  ];
+  const activePreset = datePresets.find((p) => p.from === fromdate && p.to === todate)?.key ?? 'custom';
+
+  const locationsQ = useFiestaTenantLocations(FIESTA_TENANT_ID);
+  const primaryLocation =
+    (locationsQ.data ?? []).find((l) => Number(l.locationid) === FIESTA_PRIMARY_LOCATION_ID) ||
+    (locationsQ.data ?? [])[0];
+  const locationId = primaryLocation ? Number(primaryLocation.locationid) : FIESTA_PRIMARY_LOCATION_ID;
+  const locationName = fstr(primaryLocation?.locationname) || 'Primary Outlet';
+
+  const stockQ = useFiestaStockStatement({
+    tenantid: FIESTA_TENANT_ID,
+    locationid: locationId,
+    keyword: '',
+    pageno: 1,
+    pagesize: 100,
+  });
+  const deliveriesQ = useFiestaDeliveries({ tenantid: FIESTA_TENANT_ID, fromdate, todate });
+
+  // Total inventory value = Σ closing × unit cost across the live stock statement.
+  const inventoryValue = (stockQ.data ?? []).reduce(
+    (sum, r) => sum + fnum(r.closing) * fnum(r.productcost),
+    0,
+  );
+
+  // Dynamic state arrays for interaction (seeded from live data once it loads).
+  const [inventoryList, setInventoryList] = useState<InventoryItem[]>([]);
+  const [productList, setProductList] = useState<ReturnType<typeof stockRowToProduct>[]>([]);
+  const [orderList, setOrderList] = useState<OrderItem[]>([]);
+  const [importLogs, setImportLogs] = useState(initialImportLogs);
+
+  useEffect(() => {
+    if (stockQ.data) {
+      setProductList(stockQ.data.map(stockRowToProduct));
+      setInventoryList(stockQ.data.map((r) => stockRowToInventory(r, locationName)));
+    }
+  }, [stockQ.data, locationName]);
+
+  useEffect(() => {
+    if (deliveriesQ.data) {
+      setOrderList(
+        deliveriesQ.data.map((r): OrderItem => {
+          const cust = mapOrderStatus(fstr(r.orderstatus));
+          return {
+            id: fstr(r.orderid) || `DLV-${fstr(r.deliveryid)}`,
+            store: fstr(r.pickupcustomer) || fstr(r.pickuplocation) || `Location ${fstr(r.locationid)}`,
+            amount: fnum(r.deliveryamt) || fnum(r.orderamount),
+            time: shortTime(r.assigntime || r.deliverydate),
+            status: cust === 'DELIVERED' ? 'SHIPPED' : fstr(r.orderstatus).toLowerCase() === 'cancelled' ? 'FLAGGED' : 'PROCESSING',
+          };
+        }),
+      );
+    }
+  }, [deliveriesQ.data]);
+
+  // Modal open states
+  const [showAddSkuModal, setShowAddSkuModal] = useState(false);
+  const [showTransferModal, setShowTransferModal] = useState(false);
+
+  // Form states
+  const [newSku, setNewSku] = useState({
+    sku: '',
+    name: '',
+    warehouse: '',
+    stockLevel: 0,
+    maxCapacity: 1000,
+    status: 'Optimal' as 'Optimal' | 'Low Stock' | 'Critical',
+    region: 'CBE-NORTH' as 'CBE-NORTH' | 'CBE-SOUTH' | 'CBE-EAST' | 'CBE-WEST' | 'TIRUPPUR'
+  });
+
+  const [transferData, setTransferData] = useState({
+    sku: '',
+    origin: '',
+    destination: '',
+    quantity: 100
+  });
+
+  // Filter lists based on global Search query
+  const filteredInventory = inventoryList.filter(item =>
+    item.sku.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    item.warehouse.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const filteredCatalogue = productList.filter(prod =>
+    prod.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    prod.sku.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    prod.category.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const filteredOrders = orderList.filter(ord =>
+    ord.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    ord.store.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Form submit handles
+  const handleAddSku = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newSku.sku || !newSku.name || !newSku.warehouse) {
+      alert('Please fill out all metadata fields before committing.');
+      return;
+    }
+
+    const itemToAdd: InventoryItem = {
+      sku: newSku.sku,
+      name: newSku.name,
+      warehouse: newSku.warehouse,
+      stockLevel: Number(newSku.stockLevel),
+      maxCapacity: Number(newSku.maxCapacity),
+      status: newSku.stockLevel < 20 ? 'Critical' : newSku.stockLevel < 100 ? 'Low Stock' : 'Optimal',
+      region: newSku.region
+    };
+
+    setInventoryList([itemToAdd, ...inventoryList]);
+    setShowAddSkuModal(false);
+    
+    // reset form
+    setNewSku({
+      sku: '',
+      name: '',
+      warehouse: '',
+      stockLevel: 0,
+      maxCapacity: 1000,
+      status: 'Optimal',
+      region: 'CBE-NORTH'
+    });
+  };
+
+  const handleExecuteTransfer = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!transferData.sku || !transferData.origin || !transferData.destination) {
+      alert('Kindly configure transfer coordinates and SKU.');
+      return;
+    }
+
+    // Attempt to update origin stock levels
+    setInventoryList(prev => 
+      prev.map(item => {
+        if (item.sku === transferData.sku) {
+          const newLevel = Math.max(0, item.stockLevel - transferData.quantity);
+          return {
+            ...item,
+            stockLevel: newLevel,
+            status: newLevel < 20 ? 'Critical' : newLevel < 100 ? 'Low Stock' : 'Optimal'
+          };
+        }
+        return item;
+      })
+    );
+
+    alert(`Transfer of ${transferData.quantity} units committed successfully. Tracking ID: TRF-${Math.floor(Math.random() * 900000 + 100000)}`);
+    setShowTransferModal(false);
+  };
+
+  const handleToggleProductExposure = (id: string) => {
+    setProductList(prev => 
+      prev.map(p => p.id === id ? { ...p, verified: !p.verified } : p)
+    );
+  };
+
+  return (
+    <div className="space-y-lg animate-in fade-in duration-500">
+      
+      {/* Tab Navigation header */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end border-b border-[#e2e8f0] pb-px gap-2">
+        <div>
+          <h1 className="font-sans font-bold text-2xl tracking-tight text-[#0f172a]">
+            Operations Hub{isCoimbatoreView && ': Coimbatore'}
+          </h1>
+          <p className="text-zinc-500 font-sans text-xs mt-1">
+            Global product assortment, inventory levels, warehouse tracking, and data sync tools.
+          </p>
+        </div>
+
+        {/* Dynamic Nav Sub-Tabs */}
+        <nav className="flex gap-lg">
+          {(['inventory', 'catalogue', 'orders', 'import'] as const).map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setActiveSubTab(tab)}
+              className={`font-sans text-xs font-semibold uppercase tracking-wider pb-2 cursor-pointer transition-colors relative ${
+                activeSubTab === tab
+                  ? 'text-[#581c87] font-bold'
+                  : 'text-zinc-400 hover:text-zinc-600'
+              }`}
+            >
+              {tab}
+              {activeSubTab === tab && (
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#581c87] animate-in slide-in-from-left-2 duration-100" />
+              )}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Dynamic Display Area based on tabs selection */}
+      {activeSubTab === 'inventory' && (
+        <div className="space-y-lg">
+          {/* Top Key Operational Indicators Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-gutter">
+            <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex justify-between items-start shadow-sm">
+              <div>
+                <p className="text-[11px] font-sans font-bold text-zinc-500 uppercase tracking-widest">
+                  Total Inventory Value
+                </p>
+                <h3 className="font-sans font-bold text-[#0f172a] text-xl mt-xs">
+                  ₹{inventoryValue.toLocaleString('en-IN', { maximumFractionDigits: 0 })}
+                </h3>
+                <p className="text-[11px] text-emerald-600 font-semibold mt-sm flex items-center gap-1.5">
+                  <TrendingUp size={12} />
+                  {productList.length} SKUs · {locationName}
+                </p>
+              </div>
+              <div className="p-2.5 rounded-lg bg-purple-50 text-[#581c87]">
+                <DollarSign size={18} />
+              </div>
+            </div>
+
+            <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex justify-between items-start shadow-sm">
+              <div>
+                <p className="text-[11px] font-sans font-bold text-zinc-500 uppercase tracking-widest">
+                  Low Stock Alerts
+                </p>
+                <h3 className="font-sans font-bold text-rose-500 text-xl mt-xs">
+                  {inventoryList.filter(item => item.status !== 'Optimal').length} SKUs
+                </h3>
+                <p className="text-[11px] text-zinc-400 mt-sm">Across local regional warehouses</p>
+              </div>
+              <div className="p-2.5 rounded-lg bg-rose-50 text-rose-500">
+                <AlertTriangle size={18} />
+              </div>
+            </div>
+
+            <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex justify-between items-start shadow-sm">
+              <div>
+                <p className="text-[11px] font-sans font-bold text-zinc-500 uppercase tracking-widest">
+                  Fulfillment Health
+                </p>
+                <h3 className="font-sans font-bold text-[#0f172a] text-xl mt-xs">98.4%</h3>
+                <div className="w-40 bg-[#eceef0] h-1.5 rounded-full overflow-hidden mt-sm">
+                  <div className="bg-[#581c87] h-full rounded-full" style={{ width: '98.4%' }}></div>
+                </div>
+              </div>
+              <div className="p-2.5 rounded-lg bg-emerald-50 text-emerald-600 animate-pulse">
+                <PackageCheck size={18} />
+              </div>
+            </div>
+          </div>
+
+          {/* Sub Grid splits: Product state table (3 cols) and Action sidebar panels (1 col) */}
+          <div className="grid grid-cols-1 lg:grid-cols-4 gap-gutter">
+            
+            {/* Left table container */}
+            <div className="lg:col-span-3 bg-white border border-[#e2e8f0] rounded-xl overflow-hidden flex flex-col justify-between shadow-sm">
+              <div>
+                <div className="p-md border-b border-[#e2e8f0] flex justify-between items-center bg-[#f8fafc]">
+                  <h4 className="font-sans font-bold text-sm text-[#0f172a]">
+                    Product Inventory Levels
+                  </h4>
+                  
+                  <div className="flex gap-2 text-xs">
+                    <span className="text-zinc-500 font-medium">Auto-synced</span>
+                  </div>
+                </div>
+
+                <div className="overflow-x-auto">
+                  <table className="w-full text-left font-sans text-xs">
+                    <thead className="bg-[#f8fafc] border-b border-[#e2e8f0] text-zinc-500 text-[10px] uppercase tracking-wider font-semibold">
+                      <tr>
+                        <th className="p-md">Product SKU</th>
+                        <th className="p-md">Warehouse</th>
+                        <th className="p-md">Stock Level</th>
+                        <th className="p-md">Status</th>
+                        <th className="p-md text-right">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-[#f1f5f9]">
+                      {filteredInventory.length === 0 ? (
+                        <tr>
+                          <td colSpan={5} className="text-center py-10 text-zinc-400">
+                            No matching items identified. Try another query or reload.
+                          </td>
+                        </tr>
+                      ) : (
+                        filteredInventory.map((item, idx) => {
+                          const percentage = (item.stockLevel / item.maxCapacity) * 100;
+                          return (
+                            <tr key={idx} className="hover:bg-[#f2f4f6]/50 transition-colors">
+                              <td className="p-md">
+                                <p className="font-bold text-[#0f172a]">{item.sku}</p>
+                                <p className="text-[10px] text-zinc-400 font-medium">{item.name}</p>
+                              </td>
+                              <td className="p-md text-zinc-600 font-medium">
+                                <span className="bg-[#f2f4f6] px-1.5 py-0.5 rounded text-[10px] font-mono mr-1">
+                                  {item.region}
+                                </span>
+                                {item.warehouse}
+                              </td>
+                              <td className="p-md">
+                                <p className="font-mono font-bold text-zinc-700">{item.stockLevel.toLocaleString()} units</p>
+                                <div className="w-24 bg-[#eceef0] h-1 mt-1 rounded-full overflow-hidden">
+                                  <div 
+                                    className={`h-full rounded-full ${
+                                      item.status === 'Critical' ? 'bg-rose-500' : item.status === 'Low Stock' ? 'bg-amber-500' : 'bg-[#581c87]'
+                                    }`} 
+                                    style={{ width: `${Math.min(percentage, 100)}%` }} 
+                                  />
+                                </div>
+                              </td>
+                              <td className="p-md">
+                                <span className={`px-2 py-0.5 rounded-full text-[10px] uppercase font-bold tracking-tight inline-block ${
+                                  item.status === 'Critical' 
+                                    ? 'bg-rose-100 text-rose-750' 
+                                    : item.status === 'Low Stock' 
+                                    ? 'bg-amber-100 text-amber-750' 
+                                    : 'bg-emerald-100 text-emerald-750'
+                                }`}>
+                                  {item.status}
+                                </span>
+                              </td>
+                              <td className="p-md text-right">
+                                <div className="flex justify-end gap-1">
+                                  <button
+                                    onClick={() => {
+                                      setTransferData({
+                                        sku: item.sku,
+                                        origin: item.warehouse,
+                                        destination: '',
+                                        quantity: 50
+                                      });
+                                      setShowTransferModal(true);
+                                    }}
+                                    className="text-xs font-semibold text-[#581c87] hover:underline cursor-pointer"
+                                  >
+                                    Transfer
+                                  </button>
+                                </div>
+                              </td>
+                            </tr>
+                          );
+                        })
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              
+              <div className="p-md border-t border-[#f1f5f9] bg-[#f8fafc] flex justify-between items-center text-[10px] text-zinc-500 font-medium font-sans">
+                <span>Displaying 1-{filteredInventory.length} of {inventoryList.length} global items</span>
+                <span>Active Ledger Nodes Online</span>
+              </div>
+            </div>
+
+            {/* Right sidebar quick tasks */}
+            <div className="space-y-gutter">
+              {/* Forecast module visual details */}
+              <div className="bg-[#0f172a] text-white p-6 rounded-xl relative overflow-hidden flex flex-col justify-between shadow-md h-48">
+                <div>
+                  <span className="text-[10px] tracking-wider font-bold opacity-60 uppercase">
+                    Forecast Efficiency
+                  </span>
+                  <p className="font-sans font-bold text-3xl mt-sm">92%</p>
+                  <p className="text-zinc-300 text-xs mt-sm leading-relaxed">
+                    AI-Driven automated replenishment is saving an estimated ₹1.9L/week in system overstock costs.
+                  </p>
+                </div>
+                
+                {/* Embedded SVG graphic visual */}
+                <div className="absolute right-3 bottom-3 opacity-15">
+                  <PackageCheck size={64} className="text-purple-300" />
+                </div>
+              </div>
+
+              {/* Quick Actions buttons block */}
+              <div className="bg-white border border-[#e2e8f0] rounded-xl p-md shadow-sm">
+                <span className="text-[10px] font-sans font-bold text-zinc-400 uppercase tracking-widest block pb-xs mb-md border-b border-[#f1f5f9]">
+                  Quick Actions Ledger
+                </span>
+
+                <div className="grid grid-cols-2 gap-sm">
+                  <button
+                    onClick={() => setShowAddSkuModal(true)}
+                    className="bg-[#f8fafc] border border-[#e2e8f0] p-sm rounded-lg flex flex-col items-center gap-xs text-zinc-700 hover:bg-[#faf5ff] hover:text-[#581c87] hover:border-[#581c87] transition-all cursor-pointer group"
+                  >
+                    <PlusSquare size={16} className="text-zinc-400 group-hover:text-[#581c87]" />
+                    <span className="text-[10px] font-sans font-bold uppercase">Add SKU</span>
+                  </button>
+
+                  <button
+                    onClick={() => {
+                      setTransferData({ sku: 'PRO-9920-X1', origin: 'RS Puram Hub (CBE-01)', destination: '', quantity: 100 });
+                      setShowTransferModal(true);
+                    }}
+                    className="bg-[#f8fafc] border border-[#e2e8f0] p-sm rounded-lg flex flex-col items-center gap-xs text-zinc-700 hover:bg-[#faf5ff] hover:text-[#581c87] hover:border-[#581c87] transition-all cursor-pointer group"
+                  >
+                    <ArrowRightLeft size={16} className="text-zinc-400 group-hover:text-[#581c87]" />
+                    <span className="text-[10px] font-sans font-bold uppercase">Transfer</span>
+                  </button>
+
+                  <button
+                    onClick={() => {
+                      const amount = prompt('Enter return item SKU code:');
+                      if (amount) {
+                        alert(`Returns logged successfully for target SKU code ${amount}. Waiting for physical hub clearance inspection.`);
+                      }
+                    }}
+                    className="bg-[#f8fafc] border border-[#e2e8f0] p-sm rounded-lg flex flex-col items-center gap-xs text-zinc-700 hover:bg-[#faf5ff] hover:text-[#581c87] hover:border-[#581c87] transition-all cursor-pointer group"
+                  >
+                    <XCircle size={16} className="text-zinc-400 group-hover:text-[#581c87]" />
+                    <span className="text-[10px] font-sans font-bold uppercase">Returns</span>
+                  </button>
+
+                  <button
+                    onClick={() => {
+                      alert('Generating automated physical audit compliance report draft sheets... Download started background.');
+                    }}
+                    className="bg-[#f8fafc] border border-[#e2e8f0] p-sm rounded-lg flex flex-col items-center gap-xs text-zinc-700 hover:bg-[#faf5ff] hover:text-[#581c87] hover:border-[#581c87] transition-all cursor-pointer group"
+                  >
+                    <FolderSync size={16} className="text-zinc-400 group-hover:text-[#581c87]" />
+                    <span className="text-[10px] font-sans font-bold uppercase">Audit CSV</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeSubTab === 'catalogue' && (
+        <div className="space-y-md animate-in slide-in-from-right-5">
+          <div className="flex justify-between items-end bg-[#f8fafc] border border-[#e2e8f0] p-md rounded-xl shadow-sm">
+            <div>
+              <h3 className="font-sans font-bold text-sm text-[#0f172a]">
+                Master Assortment Catalogue
+              </h3>
+              <p className="text-zinc-500 text-xs font-sans mt-0.5">
+                Global inventory master list and exposure levels across 4,200 nodes.
+              </p>
+            </div>
+            
+            <button
+              onClick={() => {
+                const title = prompt('Enter product brand title:');
+                const sku = prompt('Enter SKU catalog code:');
+                const category = prompt('Enter SKU Category:');
+                if (title && sku && category) {
+                  setProductList(prev => [
+                    ...prev,
+                    {
+                      id: String(prev.length + 1),
+                      name: title,
+                      sku: sku,
+                      unitsSold: 0,
+                      revenue: 0,
+                      stockStatus: 'Healthy',
+                      trend: 'flat',
+                      image: 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=150&q=80',
+                      category: category,
+                      exposure: '0/120 Stores',
+                      verified: false
+                    }
+                  ]);
+                  alert(`${title} added successfully to unreleased draft portfolio.`);
+                }
+              }}
+              className="bg-[#581c87] hover:bg-purple-800 active:bg-purple-900 text-white font-sans text-xs font-semibold px-4 py-2 rounded-lg cursor-pointer transition-colors shadow-sm"
+            >
+              Add Brand Product
+            </button>
+          </div>
+
+          <div className="bg-white border border-[#e2e8f0] rounded-xl overflow-hidden shadow-sm">
+            <table className="w-full text-left font-sans text-xs">
+              <thead className="bg-[#f8fafc] border-b border-[#e2e8f0] text-zinc-500 text-[10px] uppercase font-bold tracking-wider">
+                <tr>
+                  <th className="p-md">Product Details</th>
+                  <th className="p-md">Category segment</th>
+                  <th className="p-md">Verification status</th>
+                  <th className="p-md">Store exposure</th>
+                  <th className="p-md text-right">Exposure toggle</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-[#f1f5f9]">
+                {filteredCatalogue.map((prod) => (
+                  <tr key={prod.id} className="hover:bg-[#f2f4f6]/50 transition-colors">
+                    <td className="p-md flex items-center gap-md">
+                      <div className="w-10 h-10 rounded-lg border border-[#e2e8f0] overflow-hidden shrink-0 bg-zinc-50">
+                        <img 
+                          src={prod.image} 
+                          alt={prod.name} 
+                          referrerPolicy="no-referrer"
+                          className="w-full h-full object-cover" 
+                        />
+                      </div>
+                      <div>
+                        <p className="font-bold text-[#0f172a]">{prod.name}</p>
+                        <p className="text-[10px] text-zinc-400 font-mono">SKU: {prod.sku}</p>
+                      </div>
+                    </td>
+                    <td className="p-md text-zinc-600 font-medium">{prod.category}</td>
+                    <td className="p-md">
+                      {prod.verified ? (
+                        <span className="flex items-center gap-1.5 text-emerald-600 font-semibold tracking-tight text-[11px]">
+                          <span className="w-2 h-2 rounded-full bg-emerald-500"></span> Verified Portfolio
+                        </span>
+                      ) : (
+                        <span className="flex items-center gap-1.5 text-zinc-400 font-medium tracking-tight text-[11px]">
+                          <span className="w-2 h-2 rounded-full bg-zinc-300"></span> Under Inspection
+                        </span>
+                      )}
+                    </td>
+                    <td className="p-md text-zinc-500 font-medium">{prod.exposure}</td>
+                    <td className="p-md text-right">
+                      <label className="relative inline-flex items-center cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={prod.verified}
+                          onChange={() => handleToggleProductExposure(prod.id)}
+                          className="sr-only peer"
+                        />
+                        <div className="w-9 h-5 bg-zinc-200 rounded-full peer peer-focus:ring-0 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-[#581c87]"></div>
+                      </label>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {activeSubTab === 'orders' && (
+        <div className="space-y-md animate-in slide-in-from-right-5">
+          {/* Day-wise date filter — drives the live deliveries/orders query */}
+          <div className="bg-white border border-[#e2e8f0] rounded-xl p-md shadow-sm flex flex-col lg:flex-row lg:items-center justify-between gap-md">
+            <div className="flex items-center gap-sm flex-wrap">
+              <span className="flex items-center gap-1.5 text-[10px] font-bold text-zinc-400 uppercase tracking-widest pr-1">
+                <Calendar size={13} className="text-[#581c87]" /> View
+              </span>
+              {datePresets.map((p) => (
+                <button
+                  key={p.key}
+                  onClick={() => { setFromdate(p.from); setTodate(p.to); }}
+                  className={`px-3 py-1.5 rounded-lg text-[11px] font-bold transition-all border cursor-pointer ${
+                    activePreset === p.key
+                      ? 'bg-[#581c87] text-white border-[#581c87] shadow-sm'
+                      : 'bg-white text-zinc-600 border-[#e2e8f0] hover:bg-zinc-50'
+                  }`}
+                >
+                  {p.label}
+                </button>
+              ))}
+            </div>
+
+            <div className="flex items-center gap-sm text-xs">
+              <div className="flex items-center gap-1.5">
+                <label className="text-[10px] font-bold text-zinc-400 uppercase tracking-wider">From</label>
+                <input
+                  type="date"
+                  value={fromdate}
+                  max={todate}
+                  onChange={(e) => setFromdate(e.target.value)}
+                  className="border border-[#e2e8f0] rounded-lg px-2 py-1.5 text-zinc-700 font-medium outline-none focus:ring-1 focus:ring-[#581c87] cursor-pointer"
+                />
+              </div>
+              <span className="text-zinc-300">→</span>
+              <div className="flex items-center gap-1.5">
+                <label className="text-[10px] font-bold text-zinc-400 uppercase tracking-wider">To</label>
+                <input
+                  type="date"
+                  value={todate}
+                  min={fromdate}
+                  max={ymd(today)}
+                  onChange={(e) => setTodate(e.target.value)}
+                  className="border border-[#e2e8f0] rounded-lg px-2 py-1.5 text-zinc-700 font-medium outline-none focus:ring-1 focus:ring-[#581c87] cursor-pointer"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white border border-[#e2e8f0] rounded-xl overflow-hidden shadow-sm">
+            <div className="p-md border-b border-[#e2e8f0] bg-[#f8fafc] flex justify-between items-center">
+              <h4 className="font-sans font-bold text-sm text-[#0f172a]">
+                Orders ({filteredOrders.length})
+              </h4>
+              <span className="text-[10px] text-zinc-400 font-medium uppercase tracking-wider">
+                {fromdate === todate ? fromdate : `${fromdate} → ${todate}`}
+              </span>
+            </div>
+            <table className="w-full text-left font-sans text-xs">
+              <thead className="bg-[#f8fafc] border-b border-[#e2e8f0] text-zinc-500 text-[10px] uppercase font-bold tracking-wider">
+                <tr>
+                  <th className="p-md">Order ID</th>
+                  <th className="p-md">Origin Store Terminal</th>
+                  <th className="p-md">Invoice Amount</th>
+                  <th className="p-md">Committed Time (IST)</th>
+                  <th className="p-md">System state status</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-[#f1f5f9]">
+                {filteredOrders.length === 0 ? (
+                  <tr>
+                    <td colSpan={5} className="text-center py-10 text-zinc-400">
+                      {deliveriesQ.isLoading ? 'Loading live orders…' : 'No orders in this date range.'}
+                    </td>
+                  </tr>
+                ) : (
+                filteredOrders.map((ord) => (
+                  <tr key={ord.id} className="hover:bg-[#f2f4f6]/50 transition-colors">
+                    <td className="p-md font-mono font-bold text-[#581c87]">{ord.id}</td>
+                    <td className="p-md text-[#0f172a] font-medium">{ord.store}</td>
+                    <td className="p-md font-mono font-bold text-zinc-700">₹{ord.amount.toLocaleString()}</td>
+                    <td className="p-md text-zinc-500 font-medium">{ord.time}</td>
+                    <td className="p-md">
+                      <span className={`px-2 py-0.5 rounded text-[9px] font-bold tracking-wider ${
+                        ord.status === 'SHIPPED' 
+                          ? 'bg-purple-100 text-[#581c87] border border-purple-200' 
+                          : ord.status === 'FLAGGED' 
+                          ? 'bg-rose-100 text-rose-700 border border-rose-200' 
+                          : 'bg-zinc-100 text-zinc-650 border border-zinc-200'
+                      }`}>
+                        {ord.status}
+                      </span>
+                    </td>
+                  </tr>
+                )))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {activeSubTab === 'import' && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-gutter animate-in slide-in-from-right-5">
+          {/* Upload panel zone */}
+          <div 
+            onClick={() => {
+              const fileRef = prompt('Enter CSV filename representation path:');
+              if (fileRef) {
+                const logsToAdd = {
+                  timestamp: 'Just now',
+                  batchRef: `#IMP_0922_${String.fromCharCode(65 + Math.floor(Math.random() * 26))}`,
+                  type: 'Inventory Sync',
+                  source: fileRef,
+                  result: `SUCCESS (98 Rows verified)`,
+                  status: 'SUCCESS' as const
+                };
+                setImportLogs([logsToAdd, ...importLogs]);
+                alert('Uploaded successfully. Metadata schema verification committed.');
+              }
+            }}
+            className="bg-white border-2 border-dashed border-zinc-300 rounded-xl p-xl flex flex-col items-center justify-center text-center cursor-pointer hover:bg-[#faf5ff]/30 hover:border-[#581c87] transition-all duration-200"
+          >
+            <div className="h-14 w-14 bg-purple-50 text-[#581c87] rounded-full flex items-center justify-center mb-md shadow-sm">
+              <UploadCloud size={24} />
+            </div>
+            
+            <h4 className="font-sans font-bold text-base text-[#0f172a]">
+              Upload Inventory CSV
+            </h4>
+            
+            <p className="text-zinc-500 text-xs mt-2 max-w-[20rem] leading-relaxed">
+              Drag and drop your .csv, .xlsx or .xml sheets here to automatically update global stock balances or master portfolios schemas.
+            </p>
+
+            <div className="mt-lg flex gap-md">
+              <button className="bg-[#0f172a] text-white text-xs font-semibold px-4 py-2 rounded-lg cursor-pointer hover:bg-zinc-800 transition-colors shadow-sm">
+                Browse Files
+              </button>
+              <button 
+                onClick={(e) => {
+                  e.stopPropagation();
+                  alert('Template documentation initiated.');
+                }}
+                className="bg-white border border-[#e2e8f0] text-zinc-600 text-xs px-4 py-2 rounded-lg cursor-pointer hover:bg-zinc-50 transition-colors"
+              >
+                Template CSV
+              </button>
+            </div>
+          </div>
+
+          {/* Validation indicators checker logs split */}
+          <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex flex-col justify-between shadow-sm">
+            <div>
+              <span className="text-[10px] font-sans font-bold text-zinc-400 uppercase tracking-widest block pb-xs mb-md border-b border-[#f1f5f9]">
+                Interactive Schema Validator
+              </span>
+
+              <div className="space-y-sm">
+                <div className="p-sm bg-emerald-50/50 border border-emerald-100 rounded-xl flex gap-sm items-start text-xs">
+                  <FileCheck size={16} className="text-emerald-500 shrink-0 mt-0.5" />
+                  <div>
+                    <h5 className="font-bold text-[#0f172a]">Verification Rule Passed</h5>
+                    <p className="text-zinc-600 mt-0.5">Primary header nodes align perfectly with Master specification v2.8.</p>
+                  </div>
+                </div>
+
+                <div className="p-sm bg-rose-50/50 border border-rose-100 rounded-xl flex gap-sm items-start text-xs">
+                  <AlertOctagon size={16} className="text-rose-500 shrink-0 mt-bar" />
+                  <div>
+                    <h5 className="font-bold text-[#0f172a]">14 Duplicate SKUs Detected</h5>
+                    <p className="text-zinc-600 mt-0.5">Duplicate item overlaps flagged inside columns 45, 82. Verify manual index configurations before finalizing commit.</p>
+                    <button 
+                      onClick={() => alert('Downloading conflicts summary report...')}
+                      className="text-rose-600 font-bold hover:underline mt-sm block"
+                    >
+                      DOWNLOAD RESOLUTION LOG
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Logs table list */}
+            <div className="mt-md pt-md border-t border-[#f1f5f9]">
+              <span className="text-[10px] font-sans font-bold text-zinc-400 uppercase tracking-wider block mb-sm">Recent Import Logs</span>
+              
+              <div className="space-y-1 max-h-36 overflow-y-auto text-xs">
+                {importLogs.map((log, i) => (
+                  <div key={i} className="flex justify-between items-center p-2 bg-[#f8fafc] border border-[#e2e8f0]/40 rounded-lg hover:bg-[#faf5ff]/20 transition-colors">
+                    <div>
+                      <p className="font-mono text-[10px] font-bold text-[#581c87]">{log.batchRef}</p>
+                      <p className="text-[9px] text-zinc-400 font-medium">{log.timestamp} • {log.source}</p>
+                    </div>
+                    <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded ${
+                      log.status === 'SUCCESS' ? 'text-emerald-700 bg-emerald-100' : 'text-rose-700 bg-rose-100'
+                    }`}>
+                      {log.result}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* MODAL 1: ADD SKU MODAL */}
+      {showAddSkuModal && (
+        <div className="fixed inset-0 bg-[#0f172a]/40 backdrop-blur-xs z-[150] flex items-center justify-center p-md animate-in fade-in duration-150">
+          <div className="bg-white border border-[#e2e8f0] rounded-xl w-full max-w-[28rem] shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
+            <div className="p-md border-b border-[#e2e8f0] bg-[#f8fafc] flex justify-between items-center">
+              <h4 className="font-sans font-bold text-sm text-[#0f172a]">
+                Add Item SKU to Balance Ledger
+              </h4>
+              <button 
+                onClick={() => setShowAddSkuModal(false)}
+                className="p-1.5 hover:bg-zinc-200 rounded-full text-zinc-400 cursor-pointer text-left"
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            <form onSubmit={handleAddSku} className="p-md space-y-md text-xs">
+              <div className="grid grid-cols-2 gap-sm">
+                <div className="space-y-1">
+                  <label className="font-bold text-zinc-500 uppercase tracking-widest block text-[9px]">SKU Code (*)</label>
+                  <input 
+                    type="text" 
+                    placeholder="e.g., SKU-1290-A"
+                    value={newSku.sku}
+                    onChange={(e) => setNewSku({ ...newSku, sku: e.target.value })}
+                    className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f1f5f9] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                    required
+                  />
+                </div>
+                
+                <div className="space-y-1">
+                  <label className="font-bold text-zinc-500 uppercase tracking-widest block text-[9px]">Product Name</label>
+                  <input 
+                    type="text" 
+                    placeholder="e.g., Thermal Printer"
+                    value={newSku.name}
+                    onChange={(e) => setNewSku({ ...newSku, name: e.target.value })}
+                    className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f1f5f9] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-1">
+                <label className="font-bold text-zinc-500 uppercase tracking-widest block text-[9px]">Target Warehouse</label>
+                <input 
+                  type="text" 
+                  placeholder="e.g., Coimbatore main logistics CBE"
+                  value={newSku.warehouse}
+                  onChange={(e) => setNewSku({ ...newSku, warehouse: e.target.value })}
+                  className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f1f5f9] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                  required
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-sm">
+                <div className="space-y-1">
+                  <label className="font-bold text-zinc-500 uppercase tracking-widest block text-[9px]">Initial Balance</label>
+                  <input 
+                    type="number" 
+                    value={newSku.stockLevel}
+                    onChange={(e) => setNewSku({ ...newSku, stockLevel: Number(e.target.value) })}
+                    className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f1f5f9] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                    required
+                  />
+                </div>
+
+                <div className="space-y-1">
+                  <label className="font-bold text-zinc-500 uppercase tracking-widest block text-[9px]">Warehouse Region</label>
+                  <select
+                    value={newSku.region}
+                    onChange={(e) => setNewSku({ ...newSku, region: e.target.value as any })}
+                    className="w-full border border-[#e2e8f0] rounded-lg p-2 bg-[#f1f5f9] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                  >
+                    <option value="CBE-NORTH">Coimbatore North (CBE-NORTH)</option>
+                    <option value="CBE-SOUTH">Coimbatore South (CBE-SOUTH)</option>
+                    <option value="CBE-EAST">Coimbatore East (CBE-EAST)</option>
+                    <option value="CBE-WEST">Coimbatore West (CBE-WEST)</option>
+                    <option value="TIRUPPUR">Tiruppur Regional Hub (TIRUPPUR)</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="pt-sm border-t border-[#f1f5f9] flex justify-end gap-sm">
+                <button
+                  type="button"
+                  onClick={() => setShowAddSkuModal(false)}
+                  className="px-4 py-2 border border-[#e2e8f0] rounded-lg font-semibold text-zinc-500 hover:bg-zinc-50 cursor-pointer"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-[#581c87] text-white rounded-lg font-semibold hover:bg-purple-800 cursor-pointer shadow-sm"
+                >
+                  Commit Ledger SKU
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* MODAL 2: TRANSFER STOCK MODAL */}
+      {showTransferModal && (
+        <div className="fixed inset-0 bg-[#0f172a]/40 backdrop-blur-xs z-[150] flex items-center justify-center p-md animate-in fade-in duration-150">
+          <div className="bg-white border border-[#e2e8f0] rounded-xl w-full max-w-[24rem] shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
+            <div className="p-md border-b border-[#e2e8f0] bg-[#f8fafc] flex justify-between items-center">
+              <h4 className="font-sans font-bold text-sm text-[#0f172a]">
+                Request Node Stock Transfer
+              </h4>
+              <button 
+                onClick={() => setShowTransferModal(false)}
+                className="p-1 hover:bg-zinc-200 rounded-full text-zinc-400 cursor-pointer"
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            <form onSubmit={handleExecuteTransfer} className="p-md space-y-md text-xs">
+              <div className="space-y-1">
+                <label className="font-bold text-zinc-500 uppercase tracking-widest block text-[9px]">TRANSFERRING SKU</label>
+                <input 
+                  type="text" 
+                  value={transferData.sku}
+                  onChange={(e) => setTransferData({ ...transferData, sku: e.target.value })}
+                  className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f1f5f9] font-mono focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                  required
+                />
+              </div>
+
+              <div className="space-y-1">
+                <label className="font-bold text-zinc-500 uppercase tracking-widest block text-[9px]">ORIGIN WAREHOUSE</label>
+                <input 
+                  type="text" 
+                  value={transferData.origin}
+                  onChange={(e) => setTransferData({ ...transferData, origin: e.target.value })}
+                  className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f1f5f9] focus:bg-white outline-none text-zinc-800 font-medium focus:ring-1 focus:ring-[#581c87]"
+                  required
+                />
+              </div>
+
+              <div className="space-y-1">
+                <label className="font-bold text-zinc-500 uppercase tracking-widest block text-[9px]">TARGET DESTINATION WAREHOUSE</label>
+                <input 
+                  type="text" 
+                  placeholder="e.g., Coimbatore South CBE-03"
+                  value={transferData.destination}
+                  onChange={(e) => setTransferData({ ...transferData, destination: e.target.value })}
+                  className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f1f5f9] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                  required
+                />
+              </div>
+
+              <div className="space-y-1">
+                <label className="font-bold text-zinc-500 uppercase tracking-widest block text-[9px]">TRANSFER QUANTITY</label>
+                <input 
+                  type="number" 
+                  value={transferData.quantity}
+                  onChange={(e) => setTransferData({ ...transferData, quantity: Number(e.target.value) })}
+                  className="w-full border border-[#e2e8f0] rounded-lg p-sm bg-[#f1f5f9] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87]"
+                  required
+                />
+              </div>
+
+              <div className="pt-sm border-t border-[#f1f5f9] flex justify-end gap-sm">
+                <button
+                  type="button"
+                  onClick={() => setShowTransferModal(false)}
+                  className="px-4 py-2 border border-[#e2e8f0] rounded-lg font-semibold text-zinc-500 hover:bg-zinc-50 cursor-pointer"
+                >
+                  Close
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-[#581c87] text-white rounded-lg font-semibold hover:bg-purple-800 cursor-pointer shadow-sm"
+                >
+                  Approve Routing
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/OrdersDeliveriesView.tsx b/src/components/OrdersDeliveriesView.tsx
new file mode 100644
index 0000000..7443690
--- /dev/null
+++ b/src/components/OrdersDeliveriesView.tsx
@@ -0,0 +1,749 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  ShoppingBag,
+  Truck,
+  CheckCircle2,
+  Clock,
+  UserCheck,
+  MapPin,
+  TrendingUp,
+  Plus,
+  ChevronRight,
+  Package,
+  ArrowRight,
+  AlertCircle,
+  Clock4,
+  Search,
+  Check,
+  Calendar,
+  X
+} from 'lucide-react';
+import { CustomerOrder } from '../types';
+import {
+  useFiestaDeliveries,
+  useFiestaDeliverySummary,
+  useFiestaRiders,
+} from '../services/fiestaQueries';
+import { FIESTA_TENANT_ID, num as fnum, str as fstr, ymd } from '../services/fiestaApi';
+import { deliveryRowToOrder } from '../services/fiestaMappers';
+
+interface OrdersDeliveriesViewProps {
+  searchQuery?: string;
+  isCoimbatoreView?: boolean;
+  locationid?: number;
+}
+
+interface DeliveryExecutive {
+  id: string;
+  name: string;
+  phone: string;
+  status: 'Active Duty' | 'Idle' | 'Offline';
+  rating: number;
+  completedToday: number;
+  currentZone: string;
+  avatar: string;
+}
+
+const RIDER_AVATARS = [
+  'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&q=80',
+  'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&q=80',
+  'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&q=80',
+];
+
+function riderRowToExecutive(row: Record<string, unknown>, idx: number): DeliveryExecutive {
+  return {
+    id: `DE-${fstr(row.userid) || idx}`,
+    name: fstr(row.fullname) || `${fstr(row.firstname)} ${fstr(row.lastname)}`.trim() || 'Rider',
+    phone: fstr(row.contactno) || '—',
+    status: fstr(row.starttime) ? 'Active Duty' : 'Idle',
+    rating: 4.7,
+    completedToday: fnum(row.completed) || fnum(row.deliverycount),
+    currentZone: fstr(row.city) || fstr(row.vehiclename) || fstr(row.vehicleno) || 'Coimbatore',
+    avatar: RIDER_AVATARS[idx % RIDER_AVATARS.length],
+  };
+}
+
+export default function OrdersDeliveriesView({ searchQuery = '', isCoimbatoreView = false, locationid }: OrdersDeliveriesViewProps) {
+  // ── Live deliveries / fleet (Fiesta) ──────────────────────────────────────
+  // Order feed + dispatch controls run off the live deliveries board; the KPI
+  // strip uses the delivery summary; the fleet panel uses the active riders.
+  // A date-range filter lets the user view orders/deliveries day-wise.
+  const today = new Date();
+  const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
+  const [fromdate, setFromdate] = useState<string>(ymd(monthStart));
+  const [todate, setTodate] = useState<string>(ymd(today));
+
+  // Quick-range presets (computed off the current day; no Date.now in render path).
+  const dayOffset = (n: number) => {
+    const d = new Date();
+    d.setDate(d.getDate() - n);
+    return ymd(d);
+  };
+  const presets: Array<{ key: string; label: string; from: string; to: string }> = [
+    { key: 'today', label: 'Today', from: ymd(today), to: ymd(today) },
+    { key: 'yesterday', label: 'Yesterday', from: dayOffset(1), to: dayOffset(1) },
+    { key: '7d', label: 'Last 7 Days', from: dayOffset(6), to: ymd(today) },
+    { key: '30d', label: 'Last 30 Days', from: dayOffset(29), to: ymd(today) },
+    { key: 'month', label: 'This Month', from: ymd(monthStart), to: ymd(today) },
+  ];
+  const activePreset = presets.find((p) => p.from === fromdate && p.to === todate)?.key ?? 'custom';
+
+  const deliveriesQ = useFiestaDeliveries({ tenantid: FIESTA_TENANT_ID, fromdate, todate });
+  const summaryQ = useFiestaDeliverySummary({ tenantid: FIESTA_TENANT_ID, fromdate, todate });
+  const ridersQ = useFiestaRiders({ tenantid: FIESTA_TENANT_ID });
+
+  const [orders, setOrders] = useState<CustomerOrder[]>([]);
+  const [executives, setExecutives] = useState<DeliveryExecutive[]>([]);
+  const [selectedOrder, setSelectedOrder] = useState<CustomerOrder | null>(null);
+  const [filterStatus, setFilterStatus] = useState<string>('ALL');
+  const [localSearch, setLocalSearch] = useState('');
+
+  // Seed local state once live data arrives so existing dispatch/create handlers
+  // continue to mutate in-session.
+  useEffect(() => {
+    if (deliveriesQ.data) {
+      const mapped = deliveriesQ.data.map(deliveryRowToOrder);
+      setOrders(mapped);
+      // Keep the current selection only if it's still in the new range; otherwise
+      // fall back to the first order so the detail panel stays in sync.
+      setSelectedOrder((prev) =>
+        (prev && mapped.some((o) => o.id === prev.id)) ? prev : mapped[0] ?? null,
+      );
+    }
+  }, [deliveriesQ.data]);
+
+  useEffect(() => {
+    if (ridersQ.data) setExecutives(ridersQ.data.map(riderRowToExecutive));
+  }, [ridersQ.data]);
+
+  const summary = summaryQ.data;
+
+  // Local filtered list of orders
+  const storeOrders = locationid ? orders.filter(o => o.locationid === locationid) : orders;
+
+  const filteredOrdersList = storeOrders.filter(o => {
+    const term = (localSearch || searchQuery).toLowerCase();
+    const matchesSearch = o.id.toLowerCase().includes(term) ||
+                          o.customerName.toLowerCase().includes(term) ||
+                          o.address.toLowerCase().includes(term);
+    const matchesFilter = filterStatus === 'ALL' || o.status === filterStatus;
+    return matchesSearch && matchesFilter;
+  });
+
+  // Calculate dynamic stats for metrics cards based on filtered storeOrders
+  const totalDeliveriesCount = storeOrders.length;
+  const pendingFulfillmentCount = storeOrders.filter(o => o.status === 'PROCESSING' || o.status === 'CONFIRMED').length;
+  const activeDispatchCount = storeOrders.filter(o => o.status === 'OUT_FOR_DELIVERY').length;
+  const completedDeliveriesCount = storeOrders.filter(o => o.status === 'DELIVERED').length;
+
+  const MOCK_NAMES = ['Aravind Swamy', 'Karthik Raja', 'Priya Mani', 'Meera Jasmine', 'Sanjay Dutt', 'Divya Spandana', 'Vijay Sethupathi', 'Nayan Thara'];
+  const MOCK_STREETS = ['Avarampalayam Rd', 'DB Road', 'Cross Cut Road', 'Avinashi Road', 'Trichy Road', 'NSR Road', 'Sathy Road', 'Marudhamalai Road'];
+  const MOCK_ITEMS = [
+    { name: 'Tata Salt Premium Iodized 1kg', price: 28 },
+    { name: 'Gold Winner Sunflower Oil 1L', price: 145 },
+    { name: 'Britannia Marie Gold Biscuit 250g', price: 35 },
+    { name: 'MTR Sambar Powder 200g', price: 85 },
+    { name: 'Aavin Salted Butter 500g', price: 260 },
+    { name: 'Ponni Boiled Rice 5kg', price: 380 },
+    { name: 'Fresh Ooty Carrots 500g', price: 45 },
+    { name: 'Nescafe Classic Coffee 100g', price: 185 },
+  ];
+
+  const handleCreateMockOrder = () => {
+    const randomName = MOCK_NAMES[Math.floor(Math.random() * MOCK_NAMES.length)];
+    const randomStreet = MOCK_STREETS[Math.floor(Math.random() * MOCK_STREETS.length)];
+    const numItems = Math.floor(Math.random() * 3) + 1; // 1 to 3 items
+    const selectedItems = [];
+    let amount = 0;
+    for (let k = 0; k < numItems; k++) {
+      const it = MOCK_ITEMS[Math.floor(Math.random() * MOCK_ITEMS.length)];
+      const qty = Math.floor(Math.random() * 2) + 1;
+      selectedItems.push({ name: it.name, quantity: qty, price: it.price });
+      amount += it.price * qty;
+    }
+    const newId = `ORD-${Math.floor(100000 + Math.random() * 900000)}`;
+    const newOrder: CustomerOrder = {
+      id: newId,
+      customerName: randomName,
+      phone: `9${Math.floor(100000000 + Math.random() * 900000000)}`,
+      address: `${Math.floor(10 + Math.random() * 190)}, ${randomStreet}, Coimbatore`,
+      items: selectedItems,
+      amount,
+      time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
+      status: 'PROCESSING',
+      assignedRider: 'Pending Assignment',
+      hub: locationid ? `Outlet Node #${locationid}` : 'Coimbatore Hub',
+      locationid: locationid ?? 1097,
+    };
+    setOrders(prev => [newOrder, ...prev]);
+    setSelectedOrder(newOrder);
+  };
+
+  const handleUpdateStatus = (newStatus: CustomerOrder['status']) => {
+    if (!selectedOrder) return;
+    setOrders(prev => prev.map(o => {
+      if (o.id === selectedOrder.id) {
+        const updated = { ...o, status: newStatus };
+        setSelectedOrder(updated);
+        return updated;
+      }
+      return o;
+    }));
+  };
+
+  const handleAssignRider = (riderName: string) => {
+    if (!selectedOrder) return;
+    setOrders(prev => prev.map(o => {
+      if (o.id === selectedOrder.id) {
+        const updated = { 
+          ...o, 
+          assignedRider: riderName,
+          status: o.status === 'PROCESSING' ? 'CONFIRMED' : o.status
+        };
+        setSelectedOrder(updated);
+        return updated;
+      }
+      return o;
+    }));
+  };
+
+  return (
+    <div className="space-y-lg animate-in fade-in duration-500">
+      
+      {/* View Header with Statistics Overview */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-md border-b border-[#e2e8f0] pb-xl">
+        <div>
+          <h1 className="font-sans font-bold text-2xl tracking-tight text-[#0f172a]">
+            Orders & Delivery Operations
+          </h1>
+          <p className="text-zinc-500 font-sans text-xs mt-1">
+            Real-time tracking of app orders, dispatch queues, and active delivery partners across Coimbatore regional sub-hubs.
+          </p>
+          <div className="mt-1.5">
+            {deliveriesQ.isLoading ? (
+              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-zinc-400 uppercase tracking-wide">
+                <span className="w-1.5 h-1.5 rounded-full bg-zinc-300 animate-pulse" /> Loading live deliveries…
+              </span>
+            ) : deliveriesQ.isError ? (
+              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-rose-600 uppercase tracking-wide">
+                <span className="w-1.5 h-1.5 rounded-full bg-rose-500" /> Live data unavailable
+              </span>
+            ) : (
+              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-emerald-600 uppercase tracking-wide">
+                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" /> Live · {orders.length} deliveries · {executives.length} riders
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Top Level Delivery Performance Indicators */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-gutter font-sans">
+        
+        <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex items-center gap-md shadow-sm">
+          <div className="p-2 bg-purple-50 text-[#581c87] rounded-lg">
+            <ShoppingBag size={20} />
+          </div>
+          <div>
+            <p className="text-[10px] text-zinc-400 uppercase tracking-wider font-bold">Deliveries in Range</p>
+            <p className="font-sans font-bold text-lg text-zinc-800">{totalDeliveriesCount.toLocaleString('en-IN')} total</p>
+            <p className="text-[10px] text-emerald-600 font-semibold mt-0.5">{fromdate === todate ? fromdate : `${fromdate} → ${todate}`}</p>
+          </div>
+        </div>
+
+        <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex items-center gap-md shadow-sm">
+          <div className="p-2 bg-amber-50 text-amber-600 rounded-lg">
+            <Clock size={20} />
+          </div>
+          <div>
+            <p className="text-[10px] text-zinc-400 uppercase tracking-wider font-bold">Pending Fulfilment</p>
+            <p className="font-sans font-bold text-lg text-zinc-800">
+              {pendingFulfillmentCount + activeDispatchCount} active
+            </p>
+            <p className="text-[10px] text-amber-600 font-semibold mt-0.5">Awaiting dispatch / in transit</p>
+          </div>
+        </div>
+
+        <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex items-center gap-md shadow-sm">
+          <div className="p-2 bg-emerald-50 text-emerald-600 rounded-lg">
+            <Truck size={20} />
+          </div>
+          <div>
+            <p className="text-[10px] text-zinc-400 uppercase tracking-wider font-bold">Successful Deliveries</p>
+            <p className="font-sans font-bold text-lg text-zinc-800">
+              {completedDeliveriesCount} done
+            </p>
+            <p className="text-[10px] text-[#581c87] font-semibold mt-0.5">{locationid ? 'At this location' : 'Across all locations'}</p>
+          </div>
+        </div>
+
+        <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex items-center gap-md shadow-sm">
+          <div className="p-2 bg-purple-50 text-purple-600 rounded-lg">
+            <UserCheck size={20} />
+          </div>
+          <div>
+            <p className="text-[10px] text-zinc-400 uppercase tracking-wider font-bold">Active Delivery Fleet</p>
+            <p className="font-sans font-bold text-lg text-zinc-800">
+              {executives.filter(e => e.status !== 'Offline').length} partners
+            </p>
+            <p className="text-[10px] text-purple-600 font-semibold mt-0.5">{executives.length} riders registered</p>
+          </div>
+        </div>
+
+      </div>
+
+      {/* Day-wise date filter — drives the live deliveries + summary queries */}
+      <div className="bg-white border border-[#e2e8f0] rounded-xl p-md shadow-sm flex flex-col lg:flex-row lg:items-center justify-between gap-md">
+        <div className="flex items-center gap-sm flex-wrap">
+          <span className="flex items-center gap-1.5 text-[10px] font-bold text-zinc-400 uppercase tracking-widest pr-1">
+            <Calendar size={13} className="text-[#581c87]" /> View
+          </span>
+          {presets.map((p) => (
+            <button
+              key={p.key}
+              onClick={() => { setFromdate(p.from); setTodate(p.to); }}
+              className={`px-3 py-1.5 rounded-lg text-[11px] font-bold transition-all border cursor-pointer ${
+                activePreset === p.key
+                  ? 'bg-[#581c87] text-white border-[#581c87] shadow-sm'
+                  : 'bg-white text-zinc-600 border-[#e2e8f0] hover:bg-zinc-50'
+              }`}
+            >
+              {p.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-sm text-xs">
+          <div className="flex items-center gap-1.5">
+            <label className="text-[10px] font-bold text-zinc-400 uppercase tracking-wider">From</label>
+            <input
+              type="date"
+              value={fromdate}
+              max={todate}
+              onChange={(e) => setFromdate(e.target.value)}
+              className="border border-[#e2e8f0] rounded-lg px-2 py-1.5 text-zinc-700 font-medium outline-none focus:ring-1 focus:ring-[#581c87] cursor-pointer"
+            />
+          </div>
+          <span className="text-zinc-300">→</span>
+          <div className="flex items-center gap-1.5">
+            <label className="text-[10px] font-bold text-zinc-400 uppercase tracking-wider">To</label>
+            <input
+              type="date"
+              value={todate}
+              min={fromdate}
+              max={ymd(today)}
+              onChange={(e) => setTodate(e.target.value)}
+              className="border border-[#e2e8f0] rounded-lg px-2 py-1.5 text-zinc-700 font-medium outline-none focus:ring-1 focus:ring-[#581c87] cursor-pointer"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Main interactive segment splits */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-gutter text-xs font-sans">
+        
+        {/* Left List of Customer App Orders */}
+        <div className="lg:col-span-2 space-y-md">
+          <div className="bg-white border border-[#e2e8f0] rounded-xl shadow-sm overflow-hidden flex flex-col justify-between">
+            <div>
+              <div className="p-md border-b border-[#e2e8f0] bg-[#f8fafc] flex flex-col gap-md">
+                <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-sm">
+                  <div>
+                    <h4 className="font-sans font-bold text-sm text-[#0f172a]">
+                      Customer Orders Feed ({filteredOrdersList.length})
+                    </h4>
+                    <p className="text-[10px] text-zinc-400 font-medium mt-0.5">Interactive list of customer purchases made via client app</p>
+                  </div>
+
+                  <button
+                    onClick={handleCreateMockOrder}
+                    className="bg-[#581c87] text-white px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider flex items-center justify-center gap-1 cursor-pointer hover:bg-purple-800 transition shadow-sm"
+                  >
+                    <Plus size={12} />
+                    Create Simulated Order
+                  </button>
+                </div>
+
+                <div className="flex flex-col sm:flex-row items-center gap-sm w-full">
+                  {/* Local Search Input */}
+                  <div className="relative w-full sm:max-w-xs">
+                    <Search size={13} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
+                    <input
+                      type="text"
+                      placeholder="Search orders by customer, street, ID..."
+                      value={localSearch}
+                      onChange={(e) => setLocalSearch(e.target.value)}
+                      className="w-full pl-8 pr-4 py-1.5 border border-[#e2e8f0] rounded-lg text-[11px] outline-none bg-white focus:ring-1 focus:ring-[#581c87] transition-all"
+                    />
+                  </div>
+
+                  {/* Filter Status buttons */}
+                  <div className="flex gap-1 overflow-x-auto w-full sm:w-auto">
+                    {['ALL', 'PROCESSING', 'CONFIRMED', 'OUT_FOR_DELIVERY', 'DELIVERED'].map((st) => (
+                      <button
+                        key={st}
+                        onClick={() => setFilterStatus(st)}
+                        className={`px-2 py-1.5 rounded text-[9px] font-bold uppercase transition-all border outline-none cursor-pointer whitespace-nowrap ${
+                          filterStatus === st 
+                            ? 'bg-[#581c87] text-white border-[#581c87] shadow-sm' 
+                            : 'bg-white text-zinc-500 border-[#e2e8f0] hover:bg-zinc-50'
+                        }`}
+                      >
+                        {st.replace(/_/g, ' ')}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              {/* Order item rows */}
+              <div className="divide-y divide-[#f1f5f9] max-h-[480px] overflow-y-auto">
+                {filteredOrdersList.length === 0 ? (
+                  <div className="p-xl text-center text-zinc-400 font-medium">
+                    No orders matching status filter found. Try another query or place a mock delivery item.
+                  </div>
+                ) : (
+                  filteredOrdersList.map(order => (
+                    <div 
+                      key={order.id}
+                      onClick={() => setSelectedOrder(order)}
+                      className={`p-md flex items-center justify-between hover:bg-zinc-50 border-l-4 transition-all cursor-pointer ${
+                        selectedOrder?.id === order.id ? 'bg-[#faf5ff]/50 border-[#581c87]' : 'border-transparent'
+                      }`}
+                    >
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-sm">
+                          <span className="font-bold text-zinc-700">{order.customerName}</span>
+                          <span className="text-[10px] text-zinc-400">• {order.time}</span>
+                        </div>
+                        <p className="text-zinc-500 truncate max-w-[24rem]">{order.address}</p>
+                        <div className="flex gap-sm py-1 items-center">
+                          <span className="bg-[#f1f5f9] px-1.5 py-0.5 rounded text-[9px] font-bold text-zinc-500 uppercase">{order.hub}</span>
+                          <span className="text-[9px] text-[#581c87] font-bold">{order.itemCount ?? order.items.length} Items</span>
+                        </div>
+                      </div>
+
+                      <div className="text-right space-y-1">
+                        <p className="font-bold font-mono text-sm text-[#0f172a]">₹{order.amount.toLocaleString()}</p>
+                        <span className={`px-2 py-0.5 rounded text-[9px] font-bold tracking-wider inline-block uppercase ${
+                          order.status === 'DELIVERED'
+                            ? 'bg-emerald-50 text-emerald-600 border border-emerald-100'
+                            : order.status === 'OUT_FOR_DELIVERY'
+                            ? 'bg-purple-50 text-purple-700 border border-purple-100'
+                            : order.status === 'CONFIRMED'
+                            ? 'bg-amber-50 text-amber-600 border border-amber-100 animate-pulse'
+                            : 'bg-zinc-100 text-zinc-650 border border-zinc-200'
+                        }`}>
+                          {order.status.replace(/_/g, ' ')}
+                        </span>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Delivery Executives Fleet Section */}
+          <div className="bg-white border border-[#e2e8f0] p-md rounded-xl shadow-sm">
+            <span className="text-[10px] font-sans font-bold text-zinc-400 uppercase tracking-widest block pb-xs mb-md border-b border-[#f1f5f9]">
+              Coimbatore Delivery Executive Fleet status
+            </span>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-sm">
+              {executives.map((ex) => (
+                <div key={ex.id} className="p-sm border border-[#e2e8f0]/80 rounded-xl bg-[#f8fafc]/40 flex justify-between items-center">
+                  <div className="flex items-center gap-sm">
+                    <img 
+                      src={ex.avatar} 
+                      alt={ex.name} 
+                      referrerPolicy="no-referrer"
+                      className="w-10 h-10 rounded-full object-cover border border-zinc-200 shrink-0"
+                    />
+                    <div>
+                      <p className="font-semibold text-zinc-800">{ex.name}</p>
+                      <p className="text-[10px] text-zinc-400 font-medium">Zone: <strong>{ex.currentZone}</strong> • Rated ★{ex.rating}</p>
+                    </div>
+                  </div>
+
+                  <div className="text-right">
+                    <span className={`px-1.5 py-0.5 rounded text-[9px] font-bold uppercase inline-block ${
+                      ex.status === 'Active Duty' ? 'bg-sky-50 text-sky-600 border border-sky-100' : ex.status === 'Idle' ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' : 'bg-zinc-100 text-zinc-400'
+                    }`}>
+                      {ex.status}
+                    </span>
+                    <p className="text-[10px] text-zinc-500 font-semibold mt-1">Completed: {ex.completedToday}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+             {selectedOrder ? (
+            <div className="bg-white border border-[#e2e8f0] rounded-xl p-md shadow-sm space-y-md animate-in zoom-in-95 duration-150">
+              <span className="text-[10px] font-sans font-bold text-zinc-400 uppercase tracking-widest block pb-xs border-b border-[#f1f5f9]">
+                Order Details: {selectedOrder.id}
+              </span>
+
+              {/* Customer summary */}
+              <div className="p-sm bg-[#f8fafc] rounded-lg border border-[#e2e8f0]/50 space-y-xs">
+                <div className="flex justify-between font-semibold">
+                  <span>Customer Name</span>
+                  <span className="text-zinc-700">{selectedOrder.customerName}</span>
+                </div>
+                <div className="flex justify-between font-semibold">
+                  <span>Contact info</span>
+                  <span className="text-zinc-600 font-mono">{selectedOrder.phone}</span>
+                </div>
+                <div>
+                  <span className="text-[10px] text-zinc-400 font-bold uppercase block mt-1">Delivery Address</span>
+                  <p className="text-zinc-700 mt-0.5 leading-relaxed font-medium">{selectedOrder.address}</p>
+                </div>
+              </div>
+
+              {/* Category items description list */}
+              <div>
+                <span className="text-[10px] text-zinc-400 font-bold uppercase tracking-wide block mb-sm">Ordered Grocery basket Items:</span>
+                <div className="divide-y divide-[#f1f5f9] bg-zinc-50/50 p-2.5 rounded-lg border border-[#e2e8f0]/40">
+                  {selectedOrder.items.length === 0 && (
+                    <div className="py-2 flex justify-between items-center text-xs text-zinc-500">
+                      <span className="font-medium">{selectedOrder.itemCount ?? 0} line item(s)</span>
+                      <span className="text-[10px] text-zinc-400">Detail lines not loaded on board view</span>
+                    </div>
+                  )}
+                  {selectedOrder.items.map((item, idx) => (
+                    <div key={idx} className="py-2 flex justify-between items-center text-xs">
+                      <div>
+                        <p className="font-bold text-[#0f172a]">{item.name}</p>
+                        <p className="text-[10px] text-zinc-400">Qty: {item.quantity} x ₹{item.price}</p>
+                      </div>
+                      <span className="font-bold font-mono text-zinc-700">₹{(item.price * Number(item.quantity))}</span>
+                    </div>
+                  ))}
+                  <div className="pt-2 flex justify-between items-center font-bold text-sm text-[#581c87] border-t border-dashed border-[#e2e8f0]">
+                    <span>Grand Total Invoice</span>
+                    <span className="font-mono">₹{selectedOrder.amount.toLocaleString()}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Interactive Status advancement controls */}
+              <div className="pt-xs space-y-sm">
+                <span className="text-[9px] font-sans font-bold text-zinc-400 uppercase tracking-widest block pb-xs border-b border-[#f1f5f9]">OPERATIONAL CONTROL</span>
+                {selectedOrder.status === 'PROCESSING' && (
+                  <button
+                    onClick={() => handleUpdateStatus('CONFIRMED')}
+                    className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold text-[11px] py-2 rounded-xl transition duration-150 shadow-sm flex items-center justify-center gap-1 cursor-pointer border-none"
+                  >
+                    <Check size={14} /> Pack & Bag Order
+                  </button>
+                )}
+                {selectedOrder.status === 'CONFIRMED' && (
+                  <button
+                    onClick={() => {
+                      if (selectedOrder.assignedRider === 'Pending Assignment') {
+                        alert('Please assign a delivery partner from the fleet roster first.');
+                        return;
+                      }
+                      handleUpdateStatus('OUT_FOR_DELIVERY');
+                    }}
+                    className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold text-[11px] py-2 rounded-xl transition duration-150 shadow-sm flex items-center justify-center gap-1 cursor-pointer border-none"
+                  >
+                    <Truck size={14} /> Dispatch Rider
+                  </button>
+                )}
+                {selectedOrder.status === 'OUT_FOR_DELIVERY' && (
+                  <button
+                    onClick={() => handleUpdateStatus('DELIVERED')}
+                    className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-[11px] py-2 rounded-xl transition duration-150 shadow-sm flex items-center justify-center gap-1 cursor-pointer border-none"
+                  >
+                    <CheckCircle2 size={14} /> Verify Delivery Handover
+                  </button>
+                )}
+                {selectedOrder.status === 'DELIVERED' && (
+                  <div className="bg-emerald-50 border border-emerald-250 text-emerald-800 font-bold text-[10px] py-2.5 rounded-xl text-center flex items-center justify-center gap-1 select-none">
+                    <CheckCircle2 size={13} className="text-emerald-600" /> Order Completed Successfully
+                  </div>
+                )}
+              </div>
+
+              {/* Active Rider Assignment (only if not delivered) */}
+              {selectedOrder.status !== 'DELIVERED' && (
+                <div className="space-y-sm pt-xs">
+                  <div className="flex justify-between items-center border-b border-[#f1f5f9] pb-xs">
+                    <span className="text-[9px] font-sans font-bold text-zinc-400 uppercase tracking-widest">ASSIGN DELIVERY EXECUTIVE</span>
+                    <span className="text-[9px] text-[#581c87] font-bold">Fleet Roster</span>
+                  </div>
+                  <div className="space-y-1.5 max-h-[140px] overflow-y-auto pr-1">
+                    {executives.length === 0 ? (
+                      <p className="text-[10px] text-zinc-405">No riders currently available.</p>
+                    ) : (
+                      executives.map(ex => {
+                        const isAssigned = selectedOrder.assignedRider === ex.name;
+                        return (
+                          <button
+                            key={ex.id}
+                            type="button"
+                            onClick={() => handleAssignRider(ex.name)}
+                            className={`w-full p-2 border rounded-xl flex items-center justify-between text-left transition-all cursor-pointer ${
+                              isAssigned 
+                                ? 'bg-purple-50 border-[#581c87] text-[#581c87] font-semibold' 
+                                : 'bg-[#f8fafc]/50 hover:bg-zinc-55 border-[#e2e8f0] text-zinc-700'
+                            }`}
+                          >
+                            <div className="flex items-center gap-2">
+                              <img src={ex.avatar} alt={ex.name} referrerPolicy="no-referrer" className="w-6 h-6 rounded-full object-cover border border-zinc-200" />
+                              <div>
+                                <p className="text-[10px] font-bold leading-tight">{ex.name}</p>
+                                <p className="text-[9px] text-zinc-450 leading-none">{ex.currentZone} • ★{ex.rating}</p>
+                              </div>
+                            </div>
+                            <span className={`text-[8px] font-bold uppercase px-1.5 py-0.5 rounded ${
+                              isAssigned 
+                                ? 'bg-[#581c87] text-white' 
+                                : 'bg-zinc-200 text-zinc-650'
+                            }`}>
+                              {isAssigned ? 'Assigned' : 'Assign'}
+                            </span>
+                          </button>
+                        );
+                      })
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Simulated GPS map tracking path */}
+              {selectedOrder.status === 'OUT_FOR_DELIVERY' && (
+                <div className="space-y-xs pt-xs">
+                  <span className="text-[9px] font-sans font-bold text-zinc-400 uppercase tracking-widest block">
+                    LIVE GPS ROUTE TRACKER
+                  </span>
+                  <div className="relative overflow-hidden rounded-xl border border-zinc-200 bg-zinc-950 p-4 h-40 text-white flex flex-col justify-between font-sans shadow-inner select-none">
+                    {/* Grid background lines */}
+                    <div className="absolute inset-0 opacity-10 bg-[linear-gradient(to_right,#808080_1px,transparent_1px),linear-gradient(to_bottom,#808080_1px,transparent_1px)] bg-[size:12px_18px]" />
+                    
+                    <svg className="absolute inset-0 w-full h-full" xmlns="http://www.w3.org/2000/svg">
+                      <defs>
+                        <linearGradient id="route-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+                          <stop offset="0%" stopColor="#c084fc" />
+                          <stop offset="100%" stopColor="#818cf8" />
+                        </linearGradient>
+                      </defs>
+                      {/* Route path line */}
+                      <path 
+                        d="M 30 110 C 60 70, 110 110, 160 40" 
+                        fill="none" 
+                        stroke="#1e293b" 
+                        strokeWidth="4" 
+                        strokeLinecap="round" 
+                      />
+                      <path 
+                        d="M 30 110 C 60 70, 110 110, 160 40" 
+                        fill="none" 
+                        stroke="url(#route-grad)" 
+                        strokeWidth="4" 
+                        strokeLinecap="round" 
+                        strokeDasharray="200"
+                        strokeDashoffset="200"
+                        style={{
+                          animation: 'dash 6s linear infinite'
+                        }}
+                      />
+                      {/* Hub Marker */}
+                      <circle cx="30" cy="110" r="5" fill="#c084fc" className="animate-pulse" />
+                      <circle cx="30" cy="110" r="3" fill="#a855f7" />
+                      {/* Destination Marker */}
+                      <circle cx="160" cy="40" r="5" fill="#f43f5e" className="animate-ping" />
+                      <circle cx="160" cy="40" r="3" fill="#e11d48" />
+                    </svg>
+
+                    <style dangerouslySetInnerHTML={{__html: `
+                      @keyframes dash {
+                        to {
+                          stroke-dashoffset: 0;
+                        }
+                      }
+                    `}} />
+
+                    {/* Map overlays */}
+                    <div className="z-10 flex justify-between items-start">
+                      <div className="bg-zinc-900/90 backdrop-blur-md px-2 py-0.5 rounded border border-zinc-800 text-[8px] font-bold text-zinc-300">
+                        GPS ACTIVE: IN TRANSIT
+                      </div>
+                      <div className="bg-zinc-900/90 backdrop-blur-md px-2 py-0.5 rounded border border-zinc-800 text-[8px] font-bold text-[#c084fc] flex items-center gap-1">
+                        <span className="w-1 h-1 rounded-full bg-purple-500 animate-ping" />
+                        ETA 9 MINS
+                      </div>
+                    </div>
+
+                    <div className="z-10 bg-zinc-900/95 backdrop-blur-md p-2 rounded-lg border border-zinc-800 flex items-center justify-between">
+                      <div>
+                        <p className="text-[8px] text-zinc-400 font-bold uppercase tracking-wider">Executive</p>
+                        <p className="text-[10px] font-bold text-white leading-tight">{selectedOrder.assignedRider}</p>
+                      </div>
+                      <div className="text-right">
+                        <p className="text-[8px] text-zinc-400 font-bold uppercase tracking-wider">Distance</p>
+                        <p className="text-[10px] font-bold text-[#c084fc] font-mono leading-tight">1.2 km left</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Delivery tracking visual roadmap layout */}
+              <div className="bg-zinc-50 border border-[#e2e8f0]/60 rounded-xl p-md">
+                <span className="text-[9px] font-sans font-bold text-zinc-400 uppercase tracking-widest block pb-xs mb-sm border-b border-[#f1f5f9]">
+                  Live Dispatch Timeline Tracker
+                </span>
+
+                <div className="space-y-xs pt-1 relative text-[11px]">
+                  <div className="flex gap-md items-start relative group">
+                    <span className="text-emerald-500 mt-0.5"><CheckCircle2 size={12} /></span>
+                    <div>
+                      <h5 className="font-semibold text-zinc-800">Order Received ({selectedOrder.time})</h5>
+                      <p className="text-[10px] text-zinc-400">Placed via customer app cart checkout successfully.</p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-md items-start pt-3">
+                    <span className={['CONFIRMED', 'OUT_FOR_DELIVERY', 'DELIVERED'].includes(selectedOrder.status) ? 'text-emerald-500 mt-0.5' : 'text-zinc-300 mt-0.5'}><CheckCircle2 size={12} /></span>
+                    <div>
+                      <h5 className="font-semibold text-zinc-800">Assortment Packaged & Bagged</h5>
+                      <p className="text-[10px] text-zinc-400">Verified fresh produce items in-stock levels.</p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-md items-start pt-3">
+                    <span className={['OUT_FOR_DELIVERY', 'DELIVERED'].includes(selectedOrder.status) ? 'text-emerald-500 mt-0.5' : 'text-zinc-300 mt-0.5'}><CheckCircle2 size={12} /></span>
+                    <div>
+                      <h5 className="font-semibold text-zinc-800">Out for Delivery</h5>
+                      <p className="text-[10px] text-zinc-400">Dispatched with executive partner on bike route.</p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-md items-start pt-3">
+                    <span className={selectedOrder.status === 'DELIVERED' ? 'text-emerald-500 mt-0.5' : 'text-zinc-300 mt-0.5'}><CheckCircle2 size={12} /></span>
+                    <div>
+                      <h5 className="font-semibold text-zinc-800">Handover Verified</h5>
+                      <p className="text-[10px] text-zinc-400">Delivered directly to door step location.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="p-xl bg-white border border-[#e2e8f0] rounded-xl text-center text-zinc-400 font-medium">
+              Select any customer order from the feed to view its details.
+            </div>
+          )}
+        </div>
+
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ReportsView.tsx b/src/components/ReportsView.tsx
new file mode 100644
index 0000000..c024c0f
--- /dev/null
+++ b/src/components/ReportsView.tsx
@@ -0,0 +1,478 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  TrendingUp,
+  TrendingDown,
+  Download,
+  Filter,
+  ArrowUpRight,
+  ChevronDown,
+  TrendingUp as TrendUp,
+  TrendingDown as TrendDown,
+  Equal as TrendFlat,
+  ChevronLeft,
+  ChevronRight,
+  Info
+} from 'lucide-react';
+import { LeaderboardNode } from '../types';
+import {
+  useFiestaOrderSummary,
+  useFiestaLocationSummary,
+  useFiestaOrderInsight,
+  useFiestaStockStatement,
+} from '../services/fiestaQueries';
+import { FIESTA_TENANT_ID, FIESTA_PRIMARY_LOCATION_ID, num as fnum, str as fstr, ymd } from '../services/fiestaApi';
+import { stockRowToProduct } from '../services/fiestaMappers';
+
+interface ReportsViewProps {
+  searchQuery: string;
+  isCoimbatoreView: boolean;
+}
+
+const MONTH_KEYS = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dece'];
+const MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+export default function ReportsView({ searchQuery, isCoimbatoreView }: ReportsViewProps) {
+  const [selectedTimeframe, setSelectedTimeframe] = useState('Month to Date');
+  const [stockFilter, setStockFilter] = useState<'All' | 'Healthy' | 'Low Stock' | 'Critical'>('All');
+  const [selectedCell, setSelectedCell] = useState<{ day: string; hour: string; val: number } | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // ── Live analytics (Fiesta) ───────────────────────────────────────────────
+  const today = new Date();
+  const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
+  const yearStart = new Date(today.getFullYear(), 0, 1);
+  const fromdate = ymd(monthStart);
+  const todate = ymd(today);
+
+  const summaryQ = useFiestaOrderSummary(FIESTA_TENANT_ID, ymd(yearStart), todate);
+  const locSummaryQ = useFiestaLocationSummary(FIESTA_TENANT_ID);
+  const insightQ = useFiestaOrderInsight(FIESTA_TENANT_ID);
+  const stockQ = useFiestaStockStatement({
+    tenantid: FIESTA_TENANT_ID,
+    locationid: FIESTA_PRIMARY_LOCATION_ID,
+    keyword: '',
+    pageno: 1,
+    pagesize: 100,
+  });
+
+  const s = summaryQ.data;
+  const activeSkus = (stockQ.data ?? []).length;
+
+  // KPI row — all live.
+  const reportsKPIs = [
+    {
+      title: 'Total Orders (YTD)',
+      value: (s?.total ?? 0).toLocaleString('en-IN'),
+      subtext: `${ymd(yearStart)} → ${todate}`,
+      trend: `${s?.delivered ?? 0} delivered`,
+      isPositive: true,
+    },
+    {
+      title: 'Delivered',
+      value: (s?.delivered ?? 0).toLocaleString('en-IN'),
+      subtext: `${s ? Math.round(((s.delivered) / Math.max(s.total, 1)) * 100) : 0}% of all orders`,
+      trend: `${s?.pending ?? 0} pending`,
+      isPositive: true,
+    },
+    {
+      title: 'Cancelled',
+      value: (s?.cancelled ?? 0).toLocaleString('en-IN'),
+      subtext: `${s ? Math.round(((s.cancelled) / Math.max(s.total, 1)) * 100) : 0}% of all orders`,
+      trend: `${s?.created ?? 0} created`,
+      isPositive: false,
+    },
+    {
+      title: 'Active SKUs',
+      value: activeSkus.toLocaleString('en-IN'),
+      subtext: 'Live stock statement entries',
+      trend: 'In catalogue',
+      isPositive: true,
+    },
+  ];
+
+  // Leaderboard — outlets ranked by total live orders.
+  const leaderboard: LeaderboardNode[] = (() => {
+    const rows = [...(locSummaryQ.data ?? [])].sort((a, b) => b.total - a.total).slice(0, 4);
+    const max = rows.length ? rows[0].total : 0;
+    return rows.map((r, i) => ({
+      rank: String(i + 1).padStart(2, '0'),
+      name: r.locationname || `Location ${r.locationid}`,
+      percentage: max > 0 ? Math.round((r.total / max) * 100) : 0,
+      revenue: `${r.total.toLocaleString('en-IN')} ord`,
+    }));
+  })();
+  const currentLeaderboard = leaderboard;
+
+  // Monthly order distribution per outlet (replaces the static hourly heatmap).
+  const insightRows = (insightQ.data ?? []).map((r) => ({
+    name: fstr(r.locationname) || `Location ${fstr(r.locationid)}`,
+    months: (r.ordermonths ?? {}) as Record<string, unknown>,
+  }));
+  const heatmapMax = Math.max(
+    1,
+    ...insightRows.flatMap((row) => MONTH_KEYS.map((k) => fnum(row.months[k]))),
+  );
+
+  // Live product performance matrix.
+  const liveProducts = (stockQ.data ?? []).map(stockRowToProduct);
+  const filteredProducts = liveProducts.filter((prod) => {
+    const matchesSearch =
+      prod.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      prod.sku.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesStock = stockFilter === 'All' ? true : prod.stockStatus === stockFilter;
+    return matchesSearch && matchesStock;
+  });
+
+  // Heatmap cell colour, scaled relative to the busiest month/outlet.
+  const getHeatmapColorClass = (val: number) => {
+    const ratio = val / heatmapMax;
+    if (ratio < 0.15) return 'bg-[#581c87]/10 text-[#0f172a] hover:bg-[#581c87]/20';
+    if (ratio <= 0.5) return 'bg-[#a78bfa]/40 text-[#581c87] hover:bg-[#a78bfa]/50';
+    return 'bg-[#581c87] text-white hover:bg-purple-800';
+  };
+
+  // Export alerts
+  const triggerExport = (format: 'PDF' | 'CSV') => {
+    alert(`BI Engine initiating automated ${format} bundle export. Generating compiled schema reports...`);
+  };
+
+  return (
+    <div className="space-y-lg animate-in fade-in duration-500">
+      
+      {/* Context filter header row */}
+      <div className="flex flex-col md:flex-row md:items-end justify-between gap-md bg-[#f8fafc] border border-[#e2e8f0] p-md rounded-xl shadow-sm">
+        <div>
+          <h1 className="font-sans font-bold text-2xl tracking-tight text-[#0f172a]">
+            Business Intelligence Center
+          </h1>
+          <p className="text-zinc-500 font-sans text-xs mt-1">
+            Real-time analytical metrics engine surfacing regional performance deltas and potential logistic constraints.
+          </p>
+        </div>
+
+        {/* Action picker filters */}
+        <div className="flex items-center gap-sm flex-wrap text-xs">
+          <div className="bg-white border border-[#e2e8f0] rounded-lg px-sm py-1.5 flex items-center gap-sm shadow-sm select-none">
+            <span className="text-zinc-400 font-medium">Timeframe:</span>
+            <select
+              value={selectedTimeframe}
+              onChange={(e) => setSelectedTimeframe(e.target.value)}
+              className="bg-transparent border-none focus:ring-0 font-sans font-semibold text-zinc-700 cursor-pointer outline-none"
+            >
+              <option>Month to Date</option>
+              <option>Year to Date</option>
+              <option>Last 12 Months</option>
+            </select>
+          </div>
+
+          <div className="bg-white border border-[#e2e8f0] rounded-lg px-sm py-1.5 flex items-center gap-sm shadow-sm font-semibold text-zinc-700">
+            <Filter size={14} className="text-zinc-400 font-medium" />
+            <span>{isCoimbatoreView ? 'Coimbatore Zones (5)' : 'All Regions (12)'}</span>
+          </div>
+
+          <button
+            onClick={() => triggerExport('PDF')}
+            className="bg-[#581c87] text-white font-sans font-semibold px-4 py-1.5 rounded-lg flex items-center gap-sm cursor-pointer transition-colors hover:bg-purple-800 active:bg-purple-900 shadow-sm"
+          >
+            <Download size={13} />
+            Export PDF
+          </button>
+        </div>
+      </div>
+
+      {/* Primary KPI Row - 4 Key cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-gutter mb-xl text-xs">
+        {reportsKPIs.map((kpi, idx) => (
+          <div key={idx} className="bg-white border border-[#e2e8f0] rounded-xl p-md shadow-sm">
+            <div className="flex justify-between items-start mb-sm">
+              <span className="text-[11px] font-sans font-bold text-zinc-400 uppercase tracking-widest block font-sans">
+                {kpi.title}
+              </span>
+              
+              <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded flex items-center gap-px ${
+                kpi.isPositive ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600'
+              }`}>
+                {kpi.isPositive ? <TrendingUp size={10} /> : <TrendingDown size={10} />}
+                {kpi.trend}
+              </span>
+            </div>
+
+            <div className="font-sans font-bold text-[#0f172a] text-xl tracking-tight">
+              {kpi.value}
+            </div>
+
+            <div className="text-[10px] text-zinc-400 font-medium tracking-wide mt-sm uppercase font-sans">
+              {kpi.subtext}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Bento split maps */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
+        
+        {/* Revenue Heatmap table - 8 Cols */}
+        <div className="lg:col-span-8 bg-white border border-[#e2e8f0] rounded-xl overflow-hidden flex flex-col justify-between shadow-sm">
+          
+          <div className="bg-[#f8fafc] border-b border-[#e2e8f0] px-md py-sm flex justify-between items-center">
+            <span className="text-[11px] font-sans font-bold text-[#0f172a] uppercase tracking-widest block">
+              Monthly Order Distribution by Outlet
+            </span>
+
+            <div className="flex items-center gap-2 text-[10px] font-bold text-zinc-400 uppercase tracking-tight">
+              <span className="w-2 h-2 rounded-full bg-[#581c87] animate-pulse"></span>
+              <span>Busiest Month</span>
+            </div>
+          </div>
+
+          <div className="p-md flex-1 overflow-x-auto">
+            {selectedCell && (
+              <div className="mb-sm p-sm bg-purple-50 border border-purple-100 rounded-lg text-xs flex justify-between items-center animate-in fade-in">
+                <span className="font-sans text-blue-900 font-medium">
+                  <strong className="font-bold">{selectedCell.day}</strong> registered <strong className="font-bold font-mono">{selectedCell.val}</strong> order(s) in <strong className="font-bold">{selectedCell.hour}</strong>.
+                </span>
+                <button
+                  onClick={() => setSelectedCell(null)}
+                  className="text-xs font-bold text-[#581c87] hover:underline cursor-pointer"
+                >
+                  Dismiss
+                </button>
+              </div>
+            )}
+
+            {insightRows.length === 0 ? (
+              <div className="py-xl text-center text-zinc-400 text-xs">
+                {insightQ.isLoading ? 'Loading monthly order distribution…' : 'No order insight available for this tenant.'}
+              </div>
+            ) : (
+            <table className="w-full text-center border-collapse text-xs font-sans">
+              <thead>
+                <tr>
+                  <th className="p-xs text-[10px] font-bold text-zinc-400 w-32 uppercase italic">Outlet</th>
+                  {MONTH_LABELS.map((m) => (
+                    <th key={m} className="p-sm text-[10px] font-bold text-[#0f172a] border-b border-[#f1f5f9]">
+                      {m}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {insightRows.map((row, idx) => (
+                   <tr key={idx}>
+                    <td className="p-sm text-left font-bold text-[#0f172a] tracking-wide truncate max-w-[8rem] border-r border-[#f1f5f9]">
+                      {row.name}
+                    </td>
+                    {MONTH_KEYS.map((key, mIdx) => {
+                      const val = fnum(row.months[key]);
+                      return (
+                        <td key={key} className="p-1 border border-white">
+                          <button
+                            onClick={() => setSelectedCell({ day: row.name, hour: MONTH_LABELS[mIdx], val })}
+                            className={`w-full py-2.5 rounded-lg font-semibold transition-all duration-100 cursor-pointer ${getHeatmapColorClass(val)}`}
+                          >
+                            {val}
+                          </button>
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            )}
+          </div>
+
+          <div className="px-md py-sm bg-[#f8fafc] border-t border-[#e2e8f0] flex justify-between text-[11px] text-zinc-400 font-sans font-medium">
+            <span>Colour intensity scales with monthly order volume per outlet</span>
+            <span>Click cells to inspect metrics</span>
+          </div>
+        </div>
+
+        {/* Leaderboard nodes bar list - 4 Cols */}
+        <div className="lg:col-span-4 bg-white border border-[#e2e8f0] rounded-xl flex flex-col shadow-sm mt-0">
+          <div className="bg-[#f8fafc] border-b border-[#e2e8f0] px-md py-sm">
+            <span className="text-[11px] font-sans font-bold text-[#0f172a] uppercase tracking-widest block">
+              Top Performing Nodes
+            </span>
+          </div>
+
+          <div className="p-md flex-1 space-y-md flex flex-col justify-center">
+            {currentLeaderboard.map((node) => (
+              <div key={node.rank} className="flex items-center gap-md text-xs">
+                <span className="text-xs font-bold text-zinc-400 font-mono w-4">
+                  {node.rank}
+                </span>
+
+                <div className="flex-1">
+                  <div className="flex justify-between items-center font-medium">
+                    <span className="text-[#0f172a] font-semibold">{node.name}</span>
+                    <span className="text-[#581c87] font-mono font-bold">{node.revenue}</span>
+                  </div>
+                  
+                  <div className="w-full bg-[#eceef0] h-1.5 rounded-full mt-1 overflow-hidden">
+                    <div 
+                      className="bg-[#581c87] h-full rounded-full transition-all duration-300"
+                      style={{ width: `${node.percentage}%` }}
+                    />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Detailed Performance Matrix table */}
+      <div className="bg-white border border-[#e2e8f0] rounded-xl overflow-hidden shadow-sm">
+        
+        {/* Table header with filters control */}
+        <div className="bg-[#f8fafc] border-b border-[#e2e8f0] p-md flex flex-col sm:flex-row justify-between items-start sm:items-center gap-sm">
+          <div>
+            <h3 className="font-sans font-bold text-sm text-[#0f172a]">
+              Product Performance Matrix
+            </h3>
+            <p className="text-zinc-500 text-xs font-sans mt-0.5">
+              Assortment unit sales and physical balance trend indices.
+            </p>
+          </div>
+
+          {/* Quick interactive filter pills */}
+          <div className="flex gap-2 text-xs font-semibold">
+            {(['All', 'Healthy', 'Low Stock', 'Critical'] as const).map((filter) => (
+              <button
+                key={filter}
+                onClick={() => setStockFilter(filter)}
+                className={`px-3 py-1 rounded-lg cursor-pointer transition-colors ${
+                  stockFilter === filter
+                    ? 'bg-[#581c87] text-white shadow-sm'
+                    : 'bg-white border border-[#e2e8f0] text-zinc-600 hover:bg-zinc-50'
+                }`}
+              >
+                {filter}
+              </button>
+            ))}
+
+            <button
+              onClick={() => triggerExport('CSV')}
+              className="px-3 py-1 bg-[#0f172a] text-white rounded-lg cursor-pointer hover:bg-zinc-800 transition-colors shadow-sm"
+            >
+              Export CSV
+            </button>
+          </div>
+        </div>
+
+        {/* Matrix Data table */}
+        <div className="overflow-x-auto text-xs font-sans">
+          <table className="w-full text-left">
+            <thead className="bg-[#f8fafc] border-b border-[#e2e8f0] text-zinc-500 text-[10px] uppercase font-bold tracking-wider">
+              <tr>
+                <th className="px-md py-sm">Product Name</th>
+                <th className="px-md py-sm">SKU ID</th>
+                <th className="px-md py-sm text-right">Units Sold</th>
+                <th className="px-md py-sm text-right">Revenue</th>
+                <th className="px-md py-sm text-right">Stock Status</th>
+                <th className="px-md py-sm text-center">Trend index</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-[#f1f5f9]">
+              {filteredProducts.length === 0 ? (
+                <tr>
+                   <td colSpan={6} className="text-center py-8 text-zinc-400">
+                    No matching items matching stock filter criteria.
+                  </td>
+                </tr>
+              ) : (
+                filteredProducts.map((prod) => (
+                  <tr key={prod.id} className="hover:bg-[#f2f4f6]/40 transition-all">
+                    <td className="px-md py-md flex items-center gap-sm">
+                      <div className="w-8 h-8 rounded-lg shrink-0 border border-[#e2e8f0] overflow-hidden bg-zinc-50">
+                        <img 
+                          src={prod.image} 
+                          alt={prod.name} 
+                          referrerPolicy="no-referrer"
+                          className="w-full h-full object-cover" 
+                        />
+                      </div>
+                      <span className="font-semibold text-[#0f172a]">{prod.name}</span>
+                    </td>
+                    <td className="px-md py-md font-mono text-zinc-500 font-medium">
+                      {prod.sku}
+                    </td>
+                    <td className="px-md py-md text-right font-mono text-zinc-600 font-semibold">
+                      {prod.unitsSold.toLocaleString()}
+                    </td>
+                    <td className="px-md py-md text-right font-mono text-zinc-700 font-bold">
+                      ₹{prod.revenue.toLocaleString()}
+                    </td>
+                    <td className="px-md py-md text-right">
+                      <span className={`px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-tight ${
+                        prod.stockStatus === 'Healthy'
+                          ? 'bg-emerald-100 text-emerald-750 font-bold font-sans'
+                          : prod.stockStatus === 'Low Stock'
+                          ? 'bg-amber-100 text-amber-750 font-bold font-sans'
+                          : 'bg-rose-100 text-rose-750 font-bold font-sans'
+                      }`}>
+                        {prod.stockStatus}
+                      </span>
+                    </td>
+                    <td className="px-md py-md text-center">
+                      <span className="inline-block p-1 bg-[#f8fafc] border border-zinc-100 rounded-full">
+                        {prod.trend === 'up' ? (
+                          <TrendUp size={14} className="text-emerald-500" />
+                        ) : prod.trend === 'down' ? (
+                          <TrendDown size={14} className="text-rose-500" />
+                        ) : (
+                          <TrendFlat size={14} className="text-zinc-400" />
+                        )}
+                      </span>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Matrix table pagination */}
+        <div className="p-md bg-[#f8fafc] border-t border-[#e2e8f0] flex justify-between items-center text-[10px] text-zinc-500 font-semibold font-sans">
+          <span>Showing 1-{filteredProducts.length} of {liveProducts.length} live products</span>
+          
+          <div className="flex gap-xs">
+            <button 
+              onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+              className="w-8 h-8 border border-[#e2e8f0] rounded-lg flex items-center justify-center hover:bg-white active:bg-[#f8fafc] cursor-pointer"
+            >
+              <ChevronLeft size={12} />
+            </button>
+            <button className={`w-8 h-8 border border-[#e2e8f0] rounded-lg flex items-center justify-center font-bold text-[10px] bg-[#0f172a] text-white`}>
+              1
+            </button>
+            <button 
+              onClick={() => alert('Proceeding to page 2 details representation')}
+              className="w-8 h-8 border border-[#e2e8f0] rounded-lg flex items-center justify-center hover:bg-white text-zinc-500 font-bold font-mono text-[10px] cursor-pointer"
+            >
+              2
+            </button>
+            <button 
+              onClick={() => alert('Proceeding to page 3 details representation')}
+              className="w-8 h-8 border border-[#e2e8f0] rounded-lg flex items-center justify-center hover:bg-white text-zinc-500 font-bold font-mono text-[10px] cursor-pointer"
+            >
+              3
+            </button>
+            <button 
+              onClick={() => setCurrentPage(prev => prev + 1)}
+              className="w-8 h-8 border border-[#e2e8f0] rounded-lg flex items-center justify-center hover:bg-white active:bg-[#f8fafc] cursor-pointer"
+            >
+              <ChevronRight size={12} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SettingsView.tsx b/src/components/SettingsView.tsx
new file mode 100644
index 0000000..9e1acfb
--- /dev/null
+++ b/src/components/SettingsView.tsx
@@ -0,0 +1,511 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Building2,
+  Store,
+  Truck,
+  CreditCard,
+  SlidersHorizontal,
+  MapPin,
+  Phone,
+  Mail,
+  Check,
+  RotateCcw,
+  CheckCircle2,
+} from 'lucide-react';
+import { useFiestaAllTenants, useFiestaTenantLocations } from '../services/fiestaQueries';
+import { FIESTA_TENANT_ID, str as fstr, num as fnum, roleName } from '../services/fiestaApi';
+
+interface SettingsViewProps {
+  tenantId?: number;
+}
+
+type TabKey = 'profile' | 'outlets' | 'delivery' | 'payment' | 'preferences';
+
+/** Locally-persisted merchant preferences (survive reload via localStorage). */
+interface MerchantSettings {
+  // Business profile (seeded from live tenant data, then locally editable)
+  contactEmail: string;
+  contactPhone: string;
+  minOrderValue: number;
+  // Delivery
+  deliveryCharge: number;
+  prepMins: number;
+  deliveryWindowMins: number;
+  cancelWindowSecs: number;
+  autoAssignRider: boolean;
+  // Payment & tax
+  defaultTaxPercent: number;
+  codEnabled: boolean;
+  onlinePaymentEnabled: boolean;
+  // Preferences
+  defaultRegion: string;
+  defaultNewUserRole: number;
+  orderNotifications: boolean;
+  lowStockAlerts: boolean;
+  dailySummaryEmail: boolean;
+  syncInterval: number;
+  sandboxMode: boolean;
+}
+
+const STORAGE_KEY = 'merchant-settings-v1';
+
+const DEFAULTS: MerchantSettings = {
+  contactEmail: '',
+  contactPhone: '',
+  minOrderValue: 0,
+  deliveryCharge: 30,
+  prepMins: 15,
+  deliveryWindowMins: 45,
+  cancelWindowSecs: 60,
+  autoAssignRider: true,
+  defaultTaxPercent: 5,
+  codEnabled: true,
+  onlinePaymentEnabled: true,
+  defaultRegion: 'Coimbatore',
+  defaultNewUserRole: 4,
+  orderNotifications: true,
+  lowStockAlerts: true,
+  dailySummaryEmail: false,
+  syncInterval: 5,
+  sandboxMode: false,
+};
+
+function loadSettings(): { settings: MerchantSettings; hadSaved: boolean } {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return { settings: { ...DEFAULTS, ...JSON.parse(raw) }, hadSaved: true };
+  } catch {
+    /* ignore corrupt storage */
+  }
+  return { settings: { ...DEFAULTS }, hadSaved: false };
+}
+
+// ── Small presentational helpers ────────────────────────────────────────────
+function Toggle({ checked, onChange }: { checked: boolean; onChange: () => void }) {
+  return (
+    <label className="relative inline-flex items-center cursor-pointer shrink-0">
+      <input type="checkbox" checked={checked} onChange={onChange} className="sr-only peer" />
+      <div className="w-9 h-5 bg-zinc-200 rounded-full peer peer-focus:ring-0 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-[#581c87]" />
+    </label>
+  );
+}
+
+function Row({
+  title,
+  desc,
+  children,
+}: {
+  title: string;
+  desc?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex justify-between items-center gap-md p-sm bg-zinc-50 rounded-lg border border-[#e2e8f0]/45">
+      <div className="min-w-0">
+        <h4 className="font-sans font-bold text-xs text-[#0f172a]">{title}</h4>
+        {desc && <p className="text-zinc-400 text-[10px] mt-xs">{desc}</p>}
+      </div>
+      <div className="shrink-0">{children}</div>
+    </div>
+  );
+}
+
+const numberInputCls =
+  'w-24 border border-[#e2e8f0] rounded-lg p-1.5 text-right font-semibold text-zinc-700 bg-white outline-none focus:ring-1 focus:ring-[#581c87]';
+const textInputCls =
+  'w-full border border-[#e2e8f0] rounded-lg p-sm bg-white outline-none focus:ring-1 focus:ring-[#581c87] text-zinc-700 font-medium';
+const selectCls =
+  'border border-[#e2e8f0] bg-white rounded-lg p-1.5 font-semibold text-zinc-700 outline-none cursor-pointer';
+
+export default function SettingsView({ tenantId = FIESTA_TENANT_ID }: SettingsViewProps) {
+  const [activeTab, setActiveTab] = useState<TabKey>('profile');
+
+  // Live tenant profile + outlets.
+  const tenantsQ = useFiestaAllTenants({ pagesize: 50 });
+  const tenant = (tenantsQ.data ?? []).find((t) => Number(t.tenantid) === tenantId) || null;
+  const locationsQ = useFiestaTenantLocations(tenantId);
+  const outlets = locationsQ.data ?? [];
+
+  // Persisted preferences.
+  const initial = useRef(loadSettings());
+  const [form, setForm] = useState<MerchantSettings>(initial.current.settings);
+  const [saved, setSaved] = useState<MerchantSettings>(initial.current.settings);
+  const [toast, setToast] = useState<string | null>(null);
+
+  // First-run seeding: if nothing was saved yet, fill contact/min-order/region
+  // from the live tenant once it arrives.
+  const seededRef = useRef(initial.current.hadSaved);
+  useEffect(() => {
+    if (seededRef.current || !tenant) return;
+    seededRef.current = true;
+    const seed = (prev: MerchantSettings): MerchantSettings => ({
+      ...prev,
+      contactEmail: prev.contactEmail || fstr(tenant.primaryemail),
+      contactPhone: prev.contactPhone || fstr(tenant.primarycontact),
+      minOrderValue: prev.minOrderValue || fnum(tenant.minorder),
+      defaultRegion: prev.defaultRegion || fstr(tenant.city) || 'Coimbatore',
+    });
+    setForm(seed);
+    setSaved(seed);
+  }, [tenant]);
+
+  const dirty = useMemo(() => JSON.stringify(form) !== JSON.stringify(saved), [form, saved]);
+
+  const set = <K extends keyof MerchantSettings>(key: K, value: MerchantSettings[K]) =>
+    setForm((f) => ({ ...f, [key]: value }));
+
+  const handleSave = () => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(form));
+    } catch {
+      /* ignore quota errors */
+    }
+    setSaved(form);
+    setToast('Settings saved');
+    window.setTimeout(() => setToast(null), 2200);
+  };
+
+  const handleReset = () => setForm(saved);
+
+  const tabs: Array<{ key: TabKey; label: string; icon: typeof Building2 }> = [
+    { key: 'profile', label: 'Business Profile', icon: Building2 },
+    { key: 'outlets', label: 'Outlets', icon: Store },
+    { key: 'delivery', label: 'Delivery', icon: Truck },
+    { key: 'payment', label: 'Payment & Tax', icon: CreditCard },
+    { key: 'preferences', label: 'Preferences', icon: SlidersHorizontal },
+  ];
+
+  const roleOptions = [1, 2, 3, 4, 6];
+
+  return (
+    <div className="space-y-lg animate-in fade-in duration-300 relative">
+      {/* Header */}
+      <div>
+        <h1 className="font-sans font-bold text-2xl tracking-tight text-[#0f172a]">Settings</h1>
+        <p className="text-zinc-500 font-sans text-xs mt-1">
+          Manage your store profile, outlets, delivery, payments, and workspace preferences.
+        </p>
+        <div className="mt-1.5">
+          {tenantsQ.isLoading ? (
+            <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-zinc-400 uppercase tracking-wide">
+              <span className="w-1.5 h-1.5 rounded-full bg-zinc-300 animate-pulse" /> Loading live profile…
+            </span>
+          ) : tenant ? (
+            <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-emerald-600 uppercase tracking-wide">
+              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" /> Live · {fstr(tenant.tenantname)} · Tenant {tenantId}
+            </span>
+          ) : (
+            <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-rose-600 uppercase tracking-wide">
+              <span className="w-1.5 h-1.5 rounded-full bg-rose-500" /> Tenant profile unavailable
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-gutter items-start">
+        {/* Tab rail */}
+        <nav className="lg:col-span-1 bg-white border border-[#e2e8f0] rounded-xl p-2 shadow-sm flex lg:flex-col gap-1 overflow-x-auto">
+          {tabs.map((t) => {
+            const Icon = t.icon;
+            const active = activeTab === t.key;
+            return (
+              <button
+                key={t.key}
+                onClick={() => setActiveTab(t.key)}
+                className={`flex items-center gap-sm px-sm py-2 rounded-lg text-xs font-semibold transition-colors whitespace-nowrap cursor-pointer ${
+                  active ? 'bg-[#faf5ff] text-[#581c87]' : 'text-zinc-600 hover:bg-zinc-50'
+                }`}
+              >
+                <Icon size={15} className={active ? 'text-[#581c87]' : 'text-zinc-400'} />
+                {t.label}
+              </button>
+            );
+          })}
+        </nav>
+
+        {/* Panel */}
+        <div className="lg:col-span-3 space-y-gutter text-xs font-sans">
+          {activeTab === 'profile' && (
+            <div className="bg-white border border-[#e2e8f0] p-md rounded-xl shadow-sm space-y-md">
+              <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest block pb-xs border-b border-[#f1f5f9]">
+                Business Profile
+              </span>
+
+              {/* Live identity (read-only) */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-sm">
+                <div className="p-sm bg-zinc-50 rounded-lg border border-[#e2e8f0]/45">
+                  <span className="text-[9px] text-zinc-400 uppercase font-bold tracking-widest">Store Name</span>
+                  <p className="font-bold text-[#0f172a] mt-0.5">{fstr(tenant?.tenantname) || '—'}</p>
+                </div>
+                <div className="p-sm bg-zinc-50 rounded-lg border border-[#e2e8f0]/45">
+                  <span className="text-[9px] text-zinc-400 uppercase font-bold tracking-widest">Legal / Company</span>
+                  <p className="font-bold text-[#0f172a] mt-0.5">{fstr(tenant?.companyname) || '—'}</p>
+                </div>
+                <div className="p-sm bg-zinc-50 rounded-lg border border-[#e2e8f0]/45">
+                  <span className="text-[9px] text-zinc-400 uppercase font-bold tracking-widest">Category</span>
+                  <p className="font-bold text-[#0f172a] mt-0.5">{fstr(tenant?.subcategoryname) || `Category ${fnum(tenant?.categoryid)}`}</p>
+                </div>
+                <div className="p-sm bg-zinc-50 rounded-lg border border-[#e2e8f0]/45 flex items-center justify-between">
+                  <div>
+                    <span className="text-[9px] text-zinc-400 uppercase font-bold tracking-widest">Account Status</span>
+                    <p className="font-bold text-[#0f172a] mt-0.5">{fstr(tenant?.status) || '—'}</p>
+                  </div>
+                  <span className={`px-1.5 py-0.5 rounded text-[9px] font-bold uppercase ${
+                    fstr(tenant?.status).toLowerCase() === 'active'
+                      ? 'text-emerald-700 bg-emerald-100'
+                      : 'text-zinc-500 bg-zinc-200'
+                  }`}>
+                    {fnum(tenant?.approved) === 1 ? 'Approved' : 'Pending'}
+                  </span>
+                </div>
+              </div>
+
+              <div className="p-sm bg-zinc-50 rounded-lg border border-[#e2e8f0]/45 flex items-start gap-sm">
+                <MapPin size={13} className="text-zinc-400 shrink-0 mt-0.5" />
+                <div>
+                  <span className="text-[9px] text-zinc-400 uppercase font-bold tracking-widest">Registered Address</span>
+                  <p className="text-zinc-700 font-medium mt-0.5 leading-relaxed">
+                    {fstr(tenant?.address) || '—'}
+                    {tenant?.city ? ` · ${fstr(tenant.city)}, ${fstr(tenant.state)} ${fstr(tenant.postcode)}` : ''}
+                  </p>
+                </div>
+              </div>
+
+              {/* Editable contact (persisted locally) */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-sm pt-xs">
+                <div className="space-y-1">
+                  <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px] flex items-center gap-1">
+                    <Mail size={11} /> Contact Email
+                  </label>
+                  <input
+                    type="email"
+                    value={form.contactEmail}
+                    onChange={(e) => set('contactEmail', e.target.value)}
+                    className={textInputCls}
+                    placeholder="store@example.com"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px] flex items-center gap-1">
+                    <Phone size={11} /> Contact Phone
+                  </label>
+                  <input
+                    type="text"
+                    value={form.contactPhone}
+                    onChange={(e) => set('contactPhone', e.target.value)}
+                    className={textInputCls}
+                    placeholder="9876543210"
+                  />
+                </div>
+              </div>
+              <p className="text-[10px] text-zinc-400">
+                Identity fields above are read live from your tenant record. Contact details are saved to this workspace.
+              </p>
+            </div>
+          )}
+
+          {activeTab === 'outlets' && (
+            <div className="bg-white border border-[#e2e8f0] p-md rounded-xl shadow-sm space-y-md">
+              <div className="flex justify-between items-center pb-xs border-b border-[#f1f5f9]">
+                <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Outlet Locations</span>
+                <span className="text-[10px] text-[#581c87] font-bold bg-purple-50 px-2 py-0.5 rounded border border-purple-100">
+                  {locationsQ.isLoading ? 'Loading…' : `${outlets.length} outlet${outlets.length === 1 ? '' : 's'}`}
+                </span>
+              </div>
+
+              {locationsQ.isLoading ? (
+                <div className="text-center py-lg text-zinc-400">Loading live outlets…</div>
+              ) : outlets.length === 0 ? (
+                <div className="text-center py-lg text-zinc-400">No outlets found for this tenant.</div>
+              ) : (
+                <div className="space-y-sm max-h-[28rem] overflow-y-auto">
+                  {outlets.map((loc, i) => (
+                    <div key={fstr(loc.locationid) || i} className="p-sm border border-[#e2e8f0] rounded-lg bg-[#f8fafc]/40">
+                      <div className="flex justify-between items-start gap-md">
+                        <div className="min-w-0">
+                          <p className="font-bold text-[#0f172a] truncate">{fstr(loc.locationname)}</p>
+                          <p className="text-[10px] text-zinc-500 mt-0.5 flex items-center gap-1">
+                            <MapPin size={10} className="shrink-0 text-zinc-400" />
+                            <span className="truncate">{fstr(loc.suburb)}, {fstr(loc.city)} {fstr(loc.postcode)}</span>
+                          </p>
+                        </div>
+                        <span className={`shrink-0 px-1.5 py-0.5 rounded text-[9px] font-bold uppercase ${
+                          fstr(loc.status).toLowerCase() === 'active'
+                            ? 'text-emerald-600 bg-emerald-50 border border-emerald-100'
+                            : 'text-zinc-500 bg-zinc-100'
+                        }`}>
+                          {fstr(loc.status) || '—'}
+                        </span>
+                      </div>
+                      <div className="grid grid-cols-3 gap-2 mt-sm text-center">
+                        <div className="bg-white border border-[#e2e8f0]/60 rounded p-1">
+                          <p className="text-[9px] text-zinc-400 uppercase font-bold">Hours</p>
+                          <p className="font-mono font-semibold text-zinc-700 text-[10px] mt-0.5">
+                            {fstr(loc.opentime).slice(11, 16) || '—'}–{fstr(loc.closetime).slice(11, 16) || '—'}
+                          </p>
+                        </div>
+                        <div className="bg-white border border-[#e2e8f0]/60 rounded p-1">
+                          <p className="text-[9px] text-zinc-400 uppercase font-bold">Radius</p>
+                          <p className="font-mono font-semibold text-zinc-700 text-[10px] mt-0.5">{fnum(loc.deliveryradius)} m</p>
+                        </div>
+                        <div className="bg-white border border-[#e2e8f0]/60 rounded p-1">
+                          <p className="text-[9px] text-zinc-400 uppercase font-bold">ETA</p>
+                          <p className="font-mono font-semibold text-zinc-700 text-[10px] mt-0.5">{fnum(loc.deliverymins)} min</p>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+              <p className="text-[10px] text-zinc-400">Outlets are read live from your tenant. Add or edit them in the Stores section.</p>
+            </div>
+          )}
+
+          {activeTab === 'delivery' && (
+            <div className="bg-white border border-[#e2e8f0] p-md rounded-xl shadow-sm space-y-md">
+              <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest block pb-xs border-b border-[#f1f5f9]">
+                Delivery Settings
+              </span>
+              <div className="space-y-sm">
+                <Row title="Default Delivery Charge" desc="Flat fee added to each delivery order.">
+                  <div className="flex items-center gap-1">
+                    <span className="text-zinc-400 font-bold">₹</span>
+                    <input type="number" min={0} value={form.deliveryCharge}
+                      onChange={(e) => set('deliveryCharge', Number(e.target.value))} className={numberInputCls} />
+                  </div>
+                </Row>
+                <Row title="Preparation Time" desc="Minutes a store needs before pickup.">
+                  <input type="number" min={0} value={form.prepMins}
+                    onChange={(e) => set('prepMins', Number(e.target.value))} className={numberInputCls} />
+                </Row>
+                <Row title="Delivery Window" desc="Target minutes from dispatch to doorstep.">
+                  <input type="number" min={0} value={form.deliveryWindowMins}
+                    onChange={(e) => set('deliveryWindowMins', Number(e.target.value))} className={numberInputCls} />
+                </Row>
+                <Row title="Cancellation Window" desc="Seconds a customer can cancel for free.">
+                  <input type="number" min={0} value={form.cancelWindowSecs}
+                    onChange={(e) => set('cancelWindowSecs', Number(e.target.value))} className={numberInputCls} />
+                </Row>
+                <Row title="Auto-assign Rider" desc="Automatically dispatch the nearest available rider.">
+                  <Toggle checked={form.autoAssignRider} onChange={() => set('autoAssignRider', !form.autoAssignRider)} />
+                </Row>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'payment' && (
+            <div className="bg-white border border-[#e2e8f0] p-md rounded-xl shadow-sm space-y-md">
+              <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest block pb-xs border-b border-[#f1f5f9]">
+                Payment & Tax
+              </span>
+              <div className="space-y-sm">
+                <Row title="Default Tax Rate" desc="Applied to taxable catalogue items.">
+                  <div className="flex items-center gap-1">
+                    <input type="number" min={0} max={100} value={form.defaultTaxPercent}
+                      onChange={(e) => set('defaultTaxPercent', Number(e.target.value))} className={numberInputCls} />
+                    <span className="text-zinc-400 font-bold">%</span>
+                  </div>
+                </Row>
+                <Row title="Minimum Order Value" desc="Smallest order a customer can place.">
+                  <div className="flex items-center gap-1">
+                    <span className="text-zinc-400 font-bold">₹</span>
+                    <input type="number" min={0} value={form.minOrderValue}
+                      onChange={(e) => set('minOrderValue', Number(e.target.value))} className={numberInputCls} />
+                  </div>
+                </Row>
+                <Row title="Cash on Delivery" desc="Allow customers to pay on delivery.">
+                  <Toggle checked={form.codEnabled} onChange={() => set('codEnabled', !form.codEnabled)} />
+                </Row>
+                <Row title="Online Payments" desc="Accept UPI / card / wallet at checkout.">
+                  <Toggle checked={form.onlinePaymentEnabled} onChange={() => set('onlinePaymentEnabled', !form.onlinePaymentEnabled)} />
+                </Row>
+                <div className="p-sm bg-purple-50 border border-purple-100 rounded-lg text-[#581c87] text-[11px] font-medium">
+                  Live tenant payment configuration code: <strong>{fnum(tenant?.paymenttype) || '—'}</strong>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'preferences' && (
+            <div className="bg-white border border-[#e2e8f0] p-md rounded-xl shadow-sm space-y-md">
+              <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest block pb-xs border-b border-[#f1f5f9]">
+                Workspace Preferences
+              </span>
+              <div className="space-y-sm">
+                <Row title="Default Region" desc="Region applied to new outlets and reports.">
+                  <input type="text" value={form.defaultRegion}
+                    onChange={(e) => set('defaultRegion', e.target.value)} className={`${numberInputCls} w-40 text-left`} />
+                </Row>
+                <Row title="Default Role for New Users" desc="Pre-selected role in the Add User dialog.">
+                  <select value={form.defaultNewUserRole}
+                    onChange={(e) => set('defaultNewUserRole', Number(e.target.value))} className={selectCls}>
+                    {roleOptions.map((r) => (
+                      <option key={r} value={r}>{roleName(r)}</option>
+                    ))}
+                  </select>
+                </Row>
+                <Row title="Data Sync Interval" desc="How often live data refreshes from the API.">
+                  <select value={form.syncInterval}
+                    onChange={(e) => set('syncInterval', Number(e.target.value))} className={selectCls}>
+                    <option value={1}>Every 1 min</option>
+                    <option value={5}>Every 5 mins</option>
+                    <option value={15}>Every 15 mins</option>
+                    <option value={30}>Every 30 mins</option>
+                  </select>
+                </Row>
+                <Row title="Order Notifications" desc="Alert on every new incoming order.">
+                  <Toggle checked={form.orderNotifications} onChange={() => set('orderNotifications', !form.orderNotifications)} />
+                </Row>
+                <Row title="Low-stock Alerts" desc="Notify when an SKU drops below threshold.">
+                  <Toggle checked={form.lowStockAlerts} onChange={() => set('lowStockAlerts', !form.lowStockAlerts)} />
+                </Row>
+                <Row title="Daily Summary Email" desc="Email a closing-hours performance digest.">
+                  <Toggle checked={form.dailySummaryEmail} onChange={() => set('dailySummaryEmail', !form.dailySummaryEmail)} />
+                </Row>
+                <Row title="Sandbox Mode" desc="Simulate warning states without affecting live ops.">
+                  <Toggle checked={form.sandboxMode} onChange={() => set('sandboxMode', !form.sandboxMode)} />
+                </Row>
+              </div>
+            </div>
+          )}
+
+          {/* Save / Reset — lives with the settings card, not pinned to the screen */}
+          <div className="bg-white border border-[#e2e8f0] rounded-xl p-md shadow-sm flex flex-col sm:flex-row sm:items-center justify-between gap-sm">
+            <span className={`text-xs font-medium ${dirty ? 'text-amber-600' : 'text-zinc-400'}`}>
+              {dirty ? '● You have unsaved changes' : 'All changes saved'}
+            </span>
+            <div className="flex gap-sm">
+              <button
+                onClick={handleReset}
+                disabled={!dirty}
+                className="px-4 py-2 border border-[#e2e8f0] rounded-lg text-xs font-semibold text-zinc-600 hover:bg-zinc-50 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+              >
+                <RotateCcw size={13} /> Reset
+              </button>
+              <button
+                onClick={handleSave}
+                disabled={!dirty}
+                className="px-4 py-2 bg-[#581c87] text-white rounded-lg text-xs font-bold hover:bg-purple-800 cursor-pointer shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+              >
+                <Check size={13} /> Save Changes
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Toast */}
+      {toast && (
+        <div className="fixed bottom-md right-md z-[130] bg-[#0f172a] text-white px-4 py-2.5 rounded-lg shadow-2xl flex items-center gap-2 text-xs font-semibold animate-in slide-in-from-bottom-2 fade-in duration-200">
+          <CheckCircle2 size={15} className="text-emerald-400" />
+          {toast}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..79860a3
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,73 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  LayoutDashboard,
+  Store,
+  Layers,
+  ShoppingBag,
+  Users,
+  Settings
+} from 'lucide-react';
+import { MainSection } from '../types';
+
+interface SidebarProps {
+  currentSection: MainSection;
+  setCurrentSection: (section: MainSection) => void;
+  isCoimbatoreView: boolean;
+  setIsCoimbatoreView: (val: boolean) => void;
+  isOpen: boolean;
+}
+
+export default function Sidebar({
+  currentSection,
+  setCurrentSection,
+  isCoimbatoreView,
+  setIsCoimbatoreView,
+  isOpen
+}: SidebarProps) {
+  // Navigation elements
+  const navItems = [
+    { id: 'dashboard' as MainSection, label: 'Dashboard', icon: LayoutDashboard },
+    { id: 'stores' as MainSection, label: 'Stores', icon: Store },
+    { id: 'inventory' as MainSection, label: 'Inventory Catalog', icon: Layers },
+    { id: 'users' as MainSection, label: 'Users', icon: Users },
+    { id: 'settings' as MainSection, label: 'Settings', icon: Settings }
+  ];
+
+  return (
+    <aside
+      className={`fixed left-0 top-0 h-screen bg-[#581c87] border-r border-[#4c1d95] text-white flex-col py-xl pt-24 z-40 hidden md:flex transition-all duration-300 ${
+        isOpen ? 'w-64' : 'w-20'
+      }`}
+    >
+      {/* Main Navigation Sidebar Links */}
+      <nav className="flex-1 space-y-1 overflow-y-auto px-xs">
+        {navItems.map((item) => {
+          const IconComponent = item.icon;
+          const isActive = currentSection === item.id;
+          return (
+            <button
+              key={item.id}
+              onClick={() => setCurrentSection(item.id)}
+              title={item.label}
+              className={`w-full flex items-center py-3 rounded-lg text-left transition-all duration-200 cursor-pointer ${
+                isOpen ? 'gap-md px-md' : 'justify-center px-0'
+              } ${
+                isActive
+                  ? 'bg-purple-800 text-white font-semibold' + (isOpen ? ' border-l-4 border-white' : '')
+                  : 'text-purple-200 hover:bg-purple-800/60 hover:text-white'
+              }`}
+            >
+              <IconComponent size={18} className={isActive ? 'text-white' : 'text-purple-300'} />
+              {isOpen && <span className="font-sans text-sm font-medium">{item.label}</span>}
+            </button>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}
diff --git a/src/components/StoreDetailView.tsx b/src/components/StoreDetailView.tsx
new file mode 100644
index 0000000..d551e3b
--- /dev/null
+++ b/src/components/StoreDetailView.tsx
@@ -0,0 +1,1549 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  ArrowLeft,
+  Calendar,
+  TrendingUp,
+  Layers,
+  Users,
+  Phone,
+  MapPin,
+  AlertTriangle,
+  Clock,
+  Activity,
+  CheckCircle2,
+  Package,
+  Search,
+  ShoppingCart,
+  Send,
+  Download,
+  X,
+  Battery,
+  ShieldCheck,
+  Globe,
+  UploadCloud,
+  FileText,
+  Mail,
+  UserCheck,
+  CreditCard,
+  History,
+  Building,
+  Award,
+  ShoppingBag
+} from 'lucide-react';
+import {
+  useFiestaStockStatement,
+  useFiestaTenantCustomers,
+  FIESTA_TENANT_ID
+} from '../services/fiestaQueries';
+import { str as fstr } from '../services/fiestaApi';
+import {
+  initialInventory,
+  initialCustomerOrders,
+  operationalAlerts
+} from '../data';
+import ragulStoreCover from '../assets/images/store_front_view_1780299351800.png';
+import OrdersDeliveriesView from './OrdersDeliveriesView';
+
+interface StoreDetailViewProps {
+  store: {
+    locationid?: number;
+    name: string;
+    zone: string;
+    deliveries: number;
+    sales: string;
+    orders?: number;
+    staff: string;
+    color: string;
+    status: string;
+  };
+  onBack: () => void;
+}
+
+// ── Master Global Catalogue Items ──
+const GLOBAL_CATALOGUE_ITEMS = [
+  { sku: 'SALT-TATA-1KG', name: 'Tata Salt Premium Iodized 1kg', category: 'Staples / Salt', price: 28, image: 'https://images.unsplash.com/photo-1626132647523-66f5bf380027?auto=format&fit=crop&w=150&q=80' },
+  { sku: 'SUN-OIL-1LIT', name: 'Gold Winner Sunflower Oil 1L', category: 'Groceries / Oils', price: 145, image: 'https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?auto=format&fit=crop&w=150&q=80' },
+  { sku: 'BISCUIT-MAR-GD', name: 'Britannia Marie Gold Biscuit 250g', category: 'Snacks / Biscuits', price: 35, image: 'https://images.unsplash.com/photo-1558961363-fa8fdf82db35?auto=format&fit=crop&w=150&q=80' },
+  { sku: 'SPICE-SAMBAR-MTR', name: 'MTR Sambar Powder 200g', category: 'Groceries / Spices', price: 85, image: 'https://images.unsplash.com/photo-1596040033229-a9821ebd058d?auto=format&fit=crop&w=150&q=80' },
+  { sku: 'AAVIN-BUTTER-500', name: 'Aavin Salted Butter 500g', category: 'Dairy / Butter', price: 260, image: 'https://images.unsplash.com/photo-1589985270826-4b7bb135bc9d?auto=format&fit=crop&w=150&q=80' }
+];
+
+// Fallback cover images
+const DETAIL_STORE_COVERS = [
+  'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1578916171728-46686eac8d58?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1604719312566-8912e9227c6a?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1534723452862-4c874018d66d?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1582408929130-98a2c2640b8a?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1516594798947-e65505dbb29d?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1601599561263-60a4e4e083cd?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1528698827591-e19ccd7bc23d?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1536697246787-1f7ae568d89a?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1506617498306-bd97b3663b65?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?auto=format&fit=crop&w=800&q=80'
+];
+
+export default function StoreDetailView({ store, onBack }: StoreDetailViewProps) {
+  const [activeTab, setActiveTab] = useState<'overview' | 'inventory' | 'customers' | 'orders'>('overview');
+
+  const isRagul = store.name.toLowerCase().includes('ragul');
+  const getStoreCover = () => {
+    if (isRagul) return ragulStoreCover;
+    let hash = 0;
+    for (let j = 0; j < store.name.length; j++) {
+      hash = store.name.charCodeAt(j) + ((hash << 5) - hash);
+    }
+    const idx = Math.abs(hash) % DETAIL_STORE_COVERS.length;
+    return DETAIL_STORE_COVERS[idx];
+  };
+  const storeCoverImage = getStoreCover();
+  const [stockSearch, setStockSearch] = useState('');
+  const [customerSearch, setCustomerSearch] = useState('');
+  const [hoveredChartIndex, setHoveredChartIndex] = useState<number | null>(null);
+
+  // ── Toast Notification state ──────────────────────────────────────────────
+  const [toast, setToast] = useState<{ show: boolean; message: string; type: 'success' | 'info' | 'warning' }>({
+    show: false,
+    message: '',
+    type: 'success'
+  });
+
+  const showToast = (message: string, type: 'success' | 'info' | 'warning' = 'success') => {
+    setToast({ show: true, message, type });
+    setTimeout(() => {
+      setToast(prev => ({ ...prev, show: false }));
+    }, 4000);
+  };
+
+  // ── Replenishment Modal state ──────────────────────────────────────────────
+  const [replenishModal, setReplenishModal] = useState<{ show: boolean; item: any | null }>({
+    show: false,
+    item: null
+  });
+  const [replenishQty, setReplenishQty] = useState(100);
+
+  // ── Catalogue Local State & Modals ────────────────────────────────────────
+  const [localInventory, setLocalInventory] = useState<any[]>([]);
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [importState, setImportState] = useState<'idle' | 'reading' | 'parsing' | 'saving' | 'done'>('idle');
+  const [showGlobalModal, setShowGlobalModal] = useState(false);
+  const [selectedGlobalSkus, setSelectedGlobalSkus] = useState<string[]>([]);
+
+  // ── Customer CRM Profile Drawer state ──────────────────────────────────────
+  const [selectedCustomer, setSelectedCustomer] = useState<any | null>(null);
+
+  // ── API Queries with live locationid ───────────────────────────────────────
+  const locationid = store.locationid || 1097;
+  const stockQ = useFiestaStockStatement({
+    tenantid: FIESTA_TENANT_ID,
+    locationid,
+    pagesize: 100
+  });
+  const customersQ = useFiestaTenantCustomers({
+    tenantid: FIESTA_TENANT_ID,
+    locationid,
+    pagesize: 100
+  });
+
+  // ── Seed / Fallback calculation helpers ────────────────────────────────────
+  const parseOrdersCount = (salesStr: string): number => {
+    const num = parseInt(salesStr.replace(/[^0-9]/g, ''), 10);
+    return isNaN(num) ? 45 : num;
+  };
+
+  const baseOrders = parseOrdersCount(store.sales);
+  const revenueToday = baseOrders > 100 ? Math.round(baseOrders * 320) : 48200;
+  
+  // ── Interval slots with heights for chart representation ──────────────────
+  const intervalSlots = [
+    { time: '06:00 AM - 10:00 AM', label: 'Morning Rush', orders: Math.round(store.deliveries * 0.35) || 14, sales: `₹${Math.round(revenueToday * 0.3).toLocaleString('en-IN')}`, height: '70%', status: 'PEAK' },
+    { time: '10:00 AM - 02:00 PM', label: 'Mid-day Deliveries', orders: Math.round(store.deliveries * 0.25) || 10, sales: `₹${Math.round(revenueToday * 0.25).toLocaleString('en-IN')}`, height: '50%', status: 'NORMAL' },
+    { time: '02:00 PM - 06:00 PM', label: 'Afternoon Dispatch', orders: Math.round(store.deliveries * 0.15) || 6, sales: `₹${Math.round(revenueToday * 0.15).toLocaleString('en-IN')}`, height: '30%', status: 'LOW' },
+    { time: '06:00 PM - 10:00 PM', label: 'Evening Surge', orders: Math.round(store.deliveries * 0.2) || 8, sales: `₹${Math.round(revenueToday * 0.25).toLocaleString('en-IN')}`, height: '45%', status: 'HIGH' },
+    { time: '10:00 PM - 06:00 AM', label: 'Night Prep', orders: Math.round(store.deliveries * 0.05) || 2, sales: `₹${Math.round(revenueToday * 0.05).toLocaleString('en-IN')}`, height: '15%', status: 'LOW' }
+  ];
+
+  const activeSlotIndex = hoveredChartIndex !== null ? hoveredChartIndex : 0;
+  const activeSlot = intervalSlots[activeSlotIndex];
+
+  // Past 7 Days Log
+  const pastDaysLog = [
+    { day: 'Wednesday (Today)', orders: store.deliveries || 40, sales: `₹${revenueToday.toLocaleString('en-IN')}`, rate: '98.2%', change: '+4.5%' },
+    { day: 'Tuesday', orders: Math.round(store.deliveries * 0.9) || 36, sales: `₹${Math.round(revenueToday * 0.88).toLocaleString('en-IN')}`, rate: '100%', change: '+1.2%' },
+    { day: 'Monday', orders: Math.round(store.deliveries * 0.85) || 34, sales: `₹${Math.round(revenueToday * 0.82).toLocaleString('en-IN')}`, rate: '96.8%', change: '-2.1%' },
+    { day: 'Sunday', orders: Math.round(store.deliveries * 1.2) || 48, sales: `₹${Math.round(revenueToday * 1.15).toLocaleString('en-IN')}`, rate: '94.5%', change: '+12.4%' },
+    { day: 'Saturday', orders: Math.round(store.deliveries * 1.15) || 46, sales: `₹${Math.round(revenueToday * 1.12).toLocaleString('en-IN')}`, rate: '99.1%', change: '+8.6%' },
+    { day: 'Friday', orders: Math.round(store.deliveries * 0.95) || 38, sales: `₹${Math.round(revenueToday * 0.92).toLocaleString('en-IN')}`, rate: '97.4%', change: '+2.0%' },
+    { day: 'Thursday', orders: Math.round(store.deliveries * 0.9) || 36, sales: `₹${Math.round(revenueToday * 0.89).toLocaleString('en-IN')}`, rate: '100%', change: '+0.5%' }
+  ];
+
+  // Inventory mapping (derived + live merges)
+  const getMergedInventory = () => {
+    const rawStock = stockQ.data ?? [];
+    
+    const resolveMetadata = (name: string) => {
+      const nameLower = name.toLowerCase();
+      let price = 60;
+      let image = 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=150&q=80';
+      
+      if (nameLower.includes('rice')) {
+        price = 1400;
+        image = 'https://images.unsplash.com/photo-1586201375761-83865001e31c?auto=format&fit=crop&w=150&q=80';
+      } else if (nameLower.includes('oil')) {
+        price = 340;
+        image = 'https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?auto=format&fit=crop&w=150&q=80';
+      } else if (nameLower.includes('coffee')) {
+        price = 195;
+        image = 'https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?auto=format&fit=crop&w=150&q=80';
+      } else if (nameLower.includes('carrot')) {
+        price = 60;
+        image = 'https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?auto=format&fit=crop&w=150&q=80';
+      } else if (nameLower.includes('ghee')) {
+        price = 320;
+        image = 'https://images.unsplash.com/photo-1589985270826-4b7bb135bc9d?auto=format&fit=crop&w=150&q=80';
+      } else if (nameLower.includes('butter')) {
+        price = 260;
+        image = 'https://images.unsplash.com/photo-1589985270826-4b7bb135bc9d?auto=format&fit=crop&w=150&q=80';
+      } else if (nameLower.includes('salt')) {
+        price = 28;
+        image = 'https://images.unsplash.com/photo-1626132647523-66f5bf380027?auto=format&fit=crop&w=150&q=80';
+      } else if (nameLower.includes('atta') || nameLower.includes('flour')) {
+        price = 440;
+        image = 'https://images.unsplash.com/photo-1574316071802-0d684efa7bf5?auto=format&fit=crop&w=150&q=80';
+      }
+      return { price, image };
+    };
+
+    if (rawStock.length > 0) {
+      return rawStock.map((item: any) => {
+        const name = fstr(item.productname) || fstr(item.name) || 'Product Item';
+        const meta = resolveMetadata(name);
+        return {
+          sku: fstr(item.sku) || fstr(item.productsku) || 'SKU-UNKNOWN',
+          name,
+          category: fstr(item.subcategoryname) || fstr(item.categoryname) || 'Groceries / Staples',
+          stockLevel: Number(item.physicalstock) || Number(item.stock) || 0,
+          maxCapacity: Number(item.maxcapacity) || 500,
+          status: (Number(item.physicalstock) || 0) < 50 ? 'Critical' : (Number(item.physicalstock) || 0) < 150 ? 'Low Stock' : 'Optimal',
+          price: meta.price,
+          image: meta.image
+        };
+      });
+    }
+
+    // High fidelity fallback seeded catalog if live API results are empty
+    return [
+      { sku: 'RICE-PN-50', name: 'Premium Ponni Rice Bag 25kg', category: 'Staples / Rice', stockLevel: Math.round(baseOrders * 1.2) || 450, maxCapacity: 1000, status: 'Optimal', price: 1400, image: 'https://images.unsplash.com/photo-1586201375761-83865001e31c?auto=format&fit=crop&w=150&q=80' },
+      { sku: 'ATTA-ASH-10', name: 'Aashirvaad Chakki Atta 10kg', category: 'Staples / Flour', stockLevel: 12, maxCapacity: 120, status: 'Critical', price: 440, image: 'https://images.unsplash.com/photo-1574316071802-0d684efa7bf5?auto=format&fit=crop&w=150&q=80' },
+      { sku: 'OIL-IDH-05', name: 'Idhayam Sesame Oil Can 5L', category: 'Groceries / Oils', stockLevel: 32, maxCapacity: 150, status: 'Low Stock', price: 340, image: 'https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?auto=format&fit=crop&w=150&q=80' },
+      { sku: 'COF-NAR-01', name: 'Narasus Filter Coffee 1kg Pack', category: 'Beverages / Coffee', stockLevel: Math.round(baseOrders * 0.5) || 120, maxCapacity: 300, status: 'Optimal', price: 195, image: 'https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?auto=format&fit=crop&w=150&q=80' },
+      { sku: 'MILK-AAV-50', name: 'Aavin Premium Pouch Milk 500ml', category: 'Dairy / Milk', stockLevel: 18, maxCapacity: 200, status: 'Critical', price: 28, image: 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=150&q=80' },
+      { sku: 'OOTY-CARROT-1KG', name: 'Ooty Fresh Quality Carrots 1kg', category: 'Fresh Produce / Veg', stockLevel: 45, maxCapacity: 100, status: 'Low Stock', price: 60, image: 'https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?auto=format&fit=crop&w=150&q=80' },
+      { sku: 'TURMERIC-200G', name: 'Organic Turmeric Powder 200g', category: 'Groceries / Spices', stockLevel: 280, maxCapacity: 300, status: 'Optimal', price: 90, image: 'https://images.unsplash.com/photo-1596040033229-a9821ebd058d?auto=format&fit=crop&w=150&q=80' },
+      { sku: 'GHEE-500ML', name: 'Pure Cow Ghee 500ml', category: 'Dairy / Ghee', stockLevel: 75, maxCapacity: 250, status: 'Low Stock', price: 320, image: 'https://images.unsplash.com/photo-1589985270826-4b7bb135bc9d?auto=format&fit=crop&w=150&q=80' }
+    ];
+  };
+
+  // Sync loaded stock to state
+  useEffect(() => {
+    setLocalInventory(getMergedInventory());
+  }, [stockQ.data, store.locationid]);
+
+  const inventoryList = localInventory.filter(item => 
+    item.name.toLowerCase().includes(stockSearch.toLowerCase()) ||
+    item.sku.toLowerCase().includes(stockSearch.toLowerCase()) ||
+    item.category.toLowerCase().includes(stockSearch.toLowerCase())
+  );
+
+  // Customer Directory mapping (derived + live merges)
+  const getMergedCustomers = () => {
+    const rawCustomers = customersQ.data ?? [];
+    if (rawCustomers.length > 0) {
+      return rawCustomers.map((c: any) => ({
+        name: fstr(c.fullname) || `${fstr(c.firstname)} ${fstr(c.lastname)}`.trim() || 'Customer',
+        phone: fstr(c.contactno) || '—',
+        address: fstr(c.address) || 'Coimbatore',
+        ordersCount: Number(c.orderscount) || Math.floor(Math.random() * 8) + 1,
+        totalSpent: `₹${(Number(c.totalspent) || Math.floor(Math.random() * 4000) + 500).toLocaleString('en-IN')}`,
+        lastOrder: '2 Days ago'
+      }));
+    }
+
+    // High fidelity fallback customer base
+    return [
+      { name: 'Meenakshi Sundaram', phone: '+91 94432 18942', address: 'Plot 4, Lakshmipuram Ext, RS Puram, Coimbatore - 641002', ordersCount: 42, totalSpent: '₹34,820.00', lastOrder: 'Today, 14:24 PM' },
+      { name: 'Senthil Kumar VSD', phone: '+91 98421 00234', address: 'Flat 2C, Whispering Palms, Avinashi Road, Peelamedu - 641004', ordersCount: 28, totalSpent: '₹22,910.00', lastOrder: 'Yesterday, 14:10 PM' },
+      { name: 'Kavitha Ramaswamy', phone: '+91 90035 88921', address: 'No 15, Cross Cut Road, Gandhipuram, Coimbatore - 641012', ordersCount: 19, totalSpent: '₹14,240.00', lastOrder: '2 Days ago' },
+      { name: 'Dr. Anand Selvapandian', phone: '+91 97890 22104', address: 'Villa 12, Sobha Elanza, Sathy Road, Saravanampatti - 641035', ordersCount: 12, totalSpent: '₹9,800.00', lastOrder: '3 Days ago' },
+      { name: 'Rajesh Subramaniam', phone: '+91 94421 88902', address: '45, West Club Road, Race Course, Coimbatore - 641018', ordersCount: 64, totalSpent: '₹84,900.00', lastOrder: 'Today, 10:15 AM' },
+      { name: 'Priya Krishnan', phone: '+91 90432 11094', address: '8C, Royal Arcade, Trichy Road, Singanallur - 641005', ordersCount: 7, totalSpent: '₹4,120.00', lastOrder: '1 Week ago' }
+    ];
+  };
+
+  const customersList = getMergedCustomers().filter(c =>
+    c.name.toLowerCase().includes(customerSearch.toLowerCase()) ||
+    c.phone.includes(customerSearch) ||
+    c.address.toLowerCase().includes(customerSearch.toLowerCase())
+  );
+
+  // Store Alerts specific to the store
+  const storeAlerts = operationalAlerts.filter(alert => 
+    alert.title.toLowerCase().includes(store.name.split(' ')[0].toLowerCase()) || 
+    alert.details.toLowerCase().includes(store.name.split(' ')[0].toLowerCase())
+  );
+
+  // ── Riders fleet data list ────────────────────────────────────────────────
+  const activeRiders = [
+    { name: 'Karthikeyan Radhakrishnan', initial: 'KR', status: 'Delivering', orders: 3, battery: 92, lastPing: '2m ago' },
+    { name: 'Arun Kumar Chinnasamy', initial: 'AC', status: 'Delivering', orders: 2, battery: 48, lastPing: '10m ago' },
+    { name: 'Suresh Balasubramaniam', initial: 'SB', status: 'Idle', orders: 0, battery: 84, lastPing: 'Just now' },
+    { name: 'Manoj Kumar Gowda', initial: 'MG', status: 'Delivering', orders: 1, battery: 14, lastPing: '1m ago' }
+  ];
+
+  // Actions simulation handles
+  const handleReplenishSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!replenishModal.item) return;
+    setLocalInventory(prev => prev.map(item => {
+      if (item.sku === replenishModal.item.sku) {
+        const newStock = Math.min(item.stockLevel + replenishQty, item.maxCapacity);
+        return {
+          ...item,
+          stockLevel: newStock,
+          status: newStock < 50 ? 'Critical' : newStock < 150 ? 'Low Stock' : 'Optimal'
+        };
+      }
+      return item;
+    }));
+    showToast(`Replenishment batch ticket generated for ${replenishQty} units of ${replenishModal.item.name}.`, 'success');
+    setReplenishModal({ show: false, item: null });
+  };
+
+  // CSV Import simulation trigger
+  const handleStartCsvImport = () => {
+    setImportState('reading');
+    setTimeout(() => {
+      setImportState('parsing');
+      setTimeout(() => {
+        setImportState('saving');
+        setTimeout(() => {
+          const newItems = [
+            { sku: 'NOODLE-MAG-12', name: 'Maggi 2-Min Masala Noodles 280g', category: 'Snacks / Noodles', stockLevel: 80, maxCapacity: 250, status: 'Optimal', price: 45, image: 'https://images.unsplash.com/photo-1569718212165-3a8278d5f624?auto=format&fit=crop&w=150&q=80' },
+            { sku: 'DET-SURF-1KG', name: 'Surf Excel Easy Wash Detergent 1kg', category: 'Household / Detergent', stockLevel: 14, maxCapacity: 100, status: 'Critical', price: 165, image: 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=150&q=80' },
+            { sku: 'SALT-TATA-1KG', name: 'Tata Salt Premium Iodized 1kg', category: 'Staples / Salt', stockLevel: 180, maxCapacity: 300, status: 'Optimal', price: 28, image: 'https://images.unsplash.com/photo-1626132647523-66f5bf380027?auto=format&fit=crop&w=150&q=80' }
+          ];
+
+          // Add to localInventory state preventing duplicates
+          setLocalInventory(prev => {
+            const filtered = prev.filter(item => !newItems.some(ni => ni.sku === item.sku));
+            return [...filtered, ...newItems];
+          });
+          
+          setImportState('done');
+          showToast(`CSV Inventory manifest sync complete. 3 items added to local stocks.`, 'success');
+        }, 800);
+      }, 700);
+    }, 700);
+  };
+
+  // Add items from Global Catalog
+  const handleAddGlobalCatalogue = () => {
+    if (selectedGlobalSkus.length === 0) {
+      showToast('Kindly select at least one catalogue item.', 'warning');
+      return;
+    }
+
+    const itemsToAdd = GLOBAL_CATALOGUE_ITEMS.filter(item => selectedGlobalSkus.includes(item.sku)).map(item => ({
+      ...item,
+      stockLevel: Math.floor(Math.random() * 80) + 20,
+      maxCapacity: 200,
+      status: 'Optimal'
+    }));
+
+    setLocalInventory(prev => {
+      const filtered = prev.filter(item => !itemsToAdd.some(ni => ni.sku === item.sku));
+      return [...filtered, ...itemsToAdd];
+    });
+
+    showToast(`${itemsToAdd.length} products synced from Master Global Catalogue successfully!`, 'success');
+    setSelectedGlobalSkus([]);
+    setShowGlobalModal(false);
+  };
+
+  const handleExportLedger = () => {
+    showToast(`Generating secure PDF ledger audit reports for ${store.name}...`, 'info');
+    setTimeout(() => {
+      showToast(`Ledger spreadsheet decrypted and downloaded successfully.`, 'success');
+    }, 2000);
+  };
+
+  const handleStaffBroadcast = () => {
+    const text = prompt('Type notification message to broadcast to all cashiers and staff at this store:');
+    if (text) {
+      showToast(`Broadcast notification dispatched to all active terminals at ${store.name}.`, 'success');
+    }
+  };
+
+  return (
+    <div className="space-y-lg animate-in fade-in duration-500 relative font-sans text-zinc-900 pb-xl">
+      
+      {/* ── Floating Alert Toast UI ── */}
+      {toast.show && (
+        <div className="fixed top-24 right-6 z-[300] bg-[#0f172a] text-white border border-[#334155] px-lg py-3 rounded-xl shadow-2xl flex items-center gap-md animate-in slide-in-from-top duration-300">
+          {toast.type === 'success' && <CheckCircle2 size={16} className="text-emerald-400" />}
+          {toast.type === 'info' && <Activity size={16} className="text-purple-400" />}
+          {toast.type === 'warning' && <AlertTriangle size={16} className="text-amber-400" />}
+          <span className="text-xs font-semibold">{toast.message}</span>
+          <button onClick={() => setToast(prev => ({ ...prev, show: false }))} className="text-zinc-500 hover:text-zinc-300 cursor-pointer">
+            <X size={14} />
+          </button>
+        </div>
+      )}
+
+      {/* ── Subheader Navigation Bar ── */}
+      <div className="flex items-center justify-between">
+        <button
+          onClick={onBack}
+          className="flex items-center gap-xs text-xs font-bold text-[#581c87] hover:text-[#4c1d95] bg-purple-50 hover:bg-purple-100/80 px-xl py-2 rounded-lg transition-all shadow-sm border border-purple-100 cursor-pointer"
+        >
+          <ArrowLeft size={14} />
+          <span>Back to Registry</span>
+        </button>
+
+        <div className="flex items-center gap-xs">
+          <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+          <span className="text-[10px] font-bold tracking-widest text-emerald-600 uppercase">System Sync Active</span>
+        </div>
+      </div>
+
+      {/* ── Immersive Analytics Banner (With Store Cover Image & Slate Gradient Overlay) ── */}
+      <div className="relative overflow-hidden rounded-2xl p-6 md:p-8 text-white shadow-xl border border-purple-500/20 mb-8 animate-in fade-in duration-300">
+        {/* Cover Image Background */}
+        <div className="absolute inset-0 z-0">
+          <img
+            src={storeCoverImage}
+            alt={store.name}
+            className="w-full h-full object-cover object-center"
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-900/90 to-purple-950/80" />
+        </div>
+        
+        {/* Background decorative glowing circles */}
+        <div className="absolute top-0 right-0 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl -mr-20 -mt-20 pointer-events-none z-0" />
+        <div className="absolute bottom-0 left-0 w-56 h-56 bg-slate-500/5 rounded-full blur-2xl -ml-20 -mb-20 pointer-events-none z-0" />
+        
+        <div className="relative flex flex-col md:flex-row md:items-center justify-between gap-6 z-10">
+          <div className="space-y-2">
+            <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-purple-500/20 border border-purple-400/30 text-purple-200 text-[10px] font-bold uppercase tracking-widest">
+              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+              Outlet Node #{locationid} Operations
+            </div>
+            <h2 className="font-sans font-bold text-3xl tracking-tight bg-gradient-to-r from-white via-slate-100 to-purple-200 bg-clip-text text-transparent">
+              {store.name}
+            </h2>
+            <div className="flex flex-wrap gap-2 text-xs text-purple-200 mt-1">
+              <span className="flex items-center gap-1">
+                <MapPin size={13} className="text-purple-300" /> {store.zone}
+              </span>
+              <span className="flex items-center gap-1 ml-4">
+                <Users size={13} className="text-purple-300" /> Node Lead: <strong>{store.staff}</strong>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Metrics grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-4 gap-4 mt-8 pt-6 border-t border-slate-800/80 relative z-10">
+          <div className="bg-slate-900/40 backdrop-blur-sm rounded-xl p-4 border border-slate-800/80 hover:border-purple-500/30 transition-all group">
+            <div className="flex justify-between items-start">
+              <span className="text-[10px] text-slate-400 uppercase tracking-widest font-bold">Node Status</span>
+              <div className="p-2 rounded-lg bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 group-hover:scale-110 transition-transform">
+                <Building className="w-4 h-4" />
+              </div>
+            </div>
+            <div className="mt-2">
+              <h3 className="text-2xl font-extrabold tracking-tight font-mono">{store.status}</h3>
+              <p className="text-[10px] text-emerald-400 font-semibold mt-1">● Online Operations</p>
+            </div>
+          </div>
+
+          <div className="bg-slate-900/40 backdrop-blur-sm rounded-xl p-4 border border-slate-800/80 hover:border-purple-500/30 transition-all group">
+            <div className="flex justify-between items-start">
+              <span className="text-[10px] text-slate-400 uppercase tracking-widest font-bold">Today's Orders</span>
+              <div className="p-2 rounded-lg bg-purple-500/10 text-purple-400 border border-purple-500/20 group-hover:scale-110 transition-transform">
+                <ShoppingCart className="w-4 h-4" />
+              </div>
+            </div>
+            <div className="mt-2">
+              <h3 className="text-2xl font-extrabold tracking-tight font-mono">{Math.max(store.deliveries, store.orders ?? 0)}</h3>
+              <p className="text-[10px] text-slate-400 font-semibold mt-1">Incoming Volume</p>
+            </div>
+          </div>
+
+          <div className="bg-slate-900/40 backdrop-blur-sm rounded-xl p-4 border border-slate-800/80 hover:border-purple-500/30 transition-all group">
+            <div className="flex justify-between items-start">
+              <span className="text-[10px] text-slate-400 uppercase tracking-widest font-bold">Today's Dispatches</span>
+              <div className="p-2 rounded-lg bg-purple-500/10 text-purple-400 border border-purple-500/20 group-hover:scale-110 transition-transform">
+                <TrendingUp className="w-4 h-4" />
+              </div>
+            </div>
+            <div className="mt-2">
+              <h3 className="text-2xl font-extrabold tracking-tight font-mono">{store.deliveries}</h3>
+              <p className="text-[10px] text-slate-400 font-semibold mt-1">Dispatched Deliveries</p>
+            </div>
+          </div>
+
+          <div className="bg-slate-900/40 backdrop-blur-sm rounded-xl p-4 border border-slate-800/80 hover:border-purple-500/30 transition-all group">
+            <div className="flex justify-between items-start">
+              <span className="text-[10px] text-slate-400 uppercase tracking-widest font-bold">Fulfillment Rate</span>
+              <div className="p-2 rounded-lg bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 group-hover:scale-110 transition-transform">
+                <Award className="w-4 h-4" />
+              </div>
+            </div>
+            <div className="mt-2">
+              <h3 className="text-2xl font-extrabold tracking-tight font-mono">
+                {Math.max(store.deliveries, store.orders ?? 0) > 0 
+                  ? `${Math.min(100, Math.round((store.deliveries / Math.max(store.deliveries, store.orders ?? 0)) * 100))}%`
+                  : '100%'}
+              </h3>
+              <p className="text-[10px] text-indigo-400 font-semibold mt-1">Outlet OTIF Rate</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Visual Glass-look Tab Controls ── */}
+      <div className="flex gap-2 border-b border-[#e2e8f0] pb-[1px] select-none overflow-x-auto">
+        <button
+          onClick={() => setActiveTab('overview')}
+          className={`flex items-center gap-xs px-md pb-sm text-xs font-bold uppercase tracking-wider cursor-pointer border-b-2 transition-all ${
+            activeTab === 'overview'
+              ? 'border-b-[#581c87] text-[#581c87]'
+              : 'border-b-transparent text-zinc-400 hover:text-zinc-600'
+          }`}
+        >
+          <Activity size={14} />
+          <span>Overview & Performance</span>
+        </button>
+        <button
+          onClick={() => setActiveTab('inventory')}
+          className={`flex items-center gap-xs px-md pb-sm text-xs font-bold uppercase tracking-wider cursor-pointer border-b-2 transition-all ${
+            activeTab === 'inventory'
+              ? 'border-b-[#581c87] text-[#581c87]'
+              : 'border-b-transparent text-zinc-400 hover:text-zinc-600'
+          }`}
+        >
+          <Layers size={14} />
+          <span>Inventory & Catalogue ({inventoryList.length})</span>
+          {inventoryList.some(item => item.status === 'Critical') && (
+            <span className="px-1.5 py-0.5 rounded-full bg-rose-500 text-white text-[8px] font-black leading-none animate-pulse">!</span>
+          )}
+        </button>
+        <button
+          onClick={() => setActiveTab('customers')}
+          className={`flex items-center gap-xs px-md pb-sm text-xs font-bold uppercase tracking-wider cursor-pointer border-b-2 transition-all ${
+            activeTab === 'customers'
+              ? 'border-b-[#581c87] text-[#581c87]'
+              : 'border-b-transparent text-zinc-400 hover:text-zinc-600'
+          }`}
+        >
+          <Users size={14} />
+          <span>Customer CRM Base ({customersList.length})</span>
+        </button>
+        <button
+          onClick={() => setActiveTab('orders')}
+          className={`flex items-center gap-xs px-md pb-sm text-xs font-bold uppercase tracking-wider cursor-pointer border-b-2 transition-all ${
+            activeTab === 'orders'
+              ? 'border-b-[#581c87] text-[#581c87]'
+              : 'border-b-transparent text-zinc-400 hover:text-zinc-600'
+          }`}
+        >
+          <ShoppingBag size={14} />
+          <span>Orders & Deliveries</span>
+        </button>
+      </div>
+
+      {/* ── TAB PAYLOAD AREA ── */}
+      {activeTab === 'overview' && (
+        <div className="space-y-lg animate-in fade-in duration-300">
+          
+          {/* Top Metric Cards */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-gutter">
+            <div className="bg-white border border-[#eceef2] rounded-2xl p-md shadow-sm hover:shadow-md transition-all duration-200 hover:-translate-y-0.5 relative group overflow-hidden">
+              <div className="w-8 h-8 rounded-xl bg-purple-50 text-[#581c87] flex items-center justify-center mb-sm group-hover:scale-110 transition-transform">
+                <CheckCircle2 size={16} />
+              </div>
+              <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest block">OTIF Fulfillment</span>
+              <p className="text-2xl font-black text-[#0f172a] mt-xs">98.2%</p>
+              <div className="text-[10px] text-emerald-600 font-bold mt-1 flex items-center gap-xs">
+                <span>▲ 0.4%</span>
+                <span className="text-zinc-400 font-medium">vs past week</span>
+              </div>
+            </div>
+
+            <div className="bg-white border border-[#eceef2] rounded-2xl p-md shadow-sm hover:shadow-md transition-all duration-200 hover:-translate-y-0.5 relative group overflow-hidden">
+              <div className="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center mb-sm group-hover:scale-110 transition-transform">
+                <TrendingUp size={16} />
+              </div>
+              <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest block">Est. Revenue</span>
+              <p className="text-2xl font-black text-[#0f172a] mt-xs">₹{revenueToday.toLocaleString('en-IN')}</p>
+              <div className="text-[10px] text-emerald-600 font-bold mt-1 flex items-center gap-xs">
+                <span>▲ 12.4%</span>
+                <span className="text-zinc-400 font-medium">growth threshold</span>
+              </div>
+            </div>
+
+            <div className="bg-white border border-[#eceef2] rounded-2xl p-md shadow-sm hover:shadow-md transition-all duration-200 hover:-translate-y-0.5 relative group overflow-hidden">
+              <div className="w-8 h-8 rounded-xl bg-sky-50 text-sky-600 flex items-center justify-center mb-sm group-hover:scale-110 transition-transform">
+                <ShoppingCart size={16} />
+              </div>
+              <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest block">Total Dispatches</span>
+              <p className="text-2xl font-black text-[#0f172a] mt-xs">{store.deliveries}</p>
+              <div className="text-[10px] text-zinc-400 font-bold mt-1">
+                <span>Daily cap quota: 200</span>
+              </div>
+            </div>
+
+            <div className="bg-white border border-[#eceef2] rounded-2xl p-md shadow-sm hover:shadow-md transition-all duration-200 hover:-translate-y-0.5 relative group overflow-hidden">
+              <div className="w-8 h-8 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center mb-sm group-hover:scale-110 transition-transform">
+                <Users size={16} />
+              </div>
+              <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest block">Active Fleet</span>
+              <p className="text-2xl font-black text-[#0f172a] mt-xs">4 Riders</p>
+              <div className="text-[10px] text-emerald-600 font-bold mt-1 flex items-center gap-xs">
+                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                <span>3 dispatches live</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
+            
+            {/* Interactive Timeline Pipeline Flow */}
+            <div className="lg:col-span-2 bg-white border border-[#eceef2] rounded-2xl p-lg shadow-sm flex flex-col justify-between hover:shadow-md transition-shadow relative">
+              <div>
+                <div className="flex justify-between items-start">
+                  <div>
+                    <h3 className="font-sans font-bold text-sm text-[#0f172a] flex items-center gap-xs">
+                      <Clock size={15} className="text-[#581c87]" /> Dispatch Flow Pipeline
+                    </h3>
+                    <p className="text-zinc-450 text-[10px] font-sans mt-0.5">Audit orders & revenue progression by selecting nodes along the daily operational path.</p>
+                  </div>
+                  <span className="text-[9px] font-bold text-purple-600 bg-purple-50 px-2 py-0.5 rounded-lg border border-purple-100 uppercase tracking-wider">Time Flow</span>
+                </div>
+              </div>
+
+              {/* The Pipeline Line and Nodes */}
+              <div className="relative py-xl px-lg select-none my-xl">
+                
+                {/* Flow track base line */}
+                <div className="w-full bg-[#f1f5f9] h-2 rounded-full relative shadow-inner">
+                  {/* Glowing progress fill line */}
+                  <div 
+                    className="absolute top-0 left-0 h-full bg-gradient-to-r from-purple-600 via-indigo-500 to-pink-500 rounded-full transition-all duration-700 shadow-[0_0_8px_rgba(99,102,241,0.5)]"
+                    style={{ width: `${(activeSlotIndex / 4) * 100}%` }}
+                  />
+
+                  {/* Operational Nodes */}
+                  <div className="absolute inset-0 flex justify-between items-center overflow-visible">
+                    {intervalSlots.map((slot, index) => {
+                      const isActive = activeSlotIndex === index;
+                      const isHovered = hoveredChartIndex === index;
+                      
+                      // Status colors
+                      let dotColor = 'bg-indigo-500';
+                      let ringColor = 'border-indigo-100 hover:border-indigo-300';
+                      let rippleColor = 'bg-indigo-400';
+
+                      if (slot.status === 'PEAK') {
+                        dotColor = 'bg-rose-500';
+                        ringColor = isActive ? 'border-rose-300 bg-rose-50/50' : 'border-rose-100 hover:border-rose-300';
+                        rippleColor = 'bg-rose-400';
+                      } else if (slot.status === 'HIGH') {
+                        dotColor = 'bg-amber-500';
+                        ringColor = isActive ? 'border-amber-300 bg-amber-50/50' : 'border-amber-100 hover:border-amber-300';
+                        rippleColor = 'bg-amber-400';
+                      } else if (slot.status === 'LOW') {
+                        dotColor = 'bg-emerald-500';
+                        ringColor = isActive ? 'border-emerald-300 bg-emerald-50/50' : 'border-emerald-100 hover:border-emerald-300';
+                        rippleColor = 'bg-emerald-400';
+                      }
+
+                      return (
+                        <div 
+                          key={index}
+                          onMouseEnter={() => setHoveredChartIndex(index)}
+                          onMouseLeave={() => setHoveredChartIndex(null)}
+                          onClick={() => setHoveredChartIndex(index)}
+                          className="relative flex flex-col items-center cursor-pointer group z-10"
+                        >
+                          
+                          {/* Time label above node */}
+                          <div className="absolute bottom-8 whitespace-nowrap text-center flex flex-col items-center">
+                            <span className={`text-[10px] font-black tracking-tight transition-colors ${
+                              isActive ? 'text-[#581c87]' : 'text-zinc-400 group-hover:text-zinc-600'
+                            }`}>
+                              {slot.time.split(' - ')[0]}
+                            </span>
+                          </div>
+
+                          {/* Node Circle */}
+                          <div className={`w-8 h-8 rounded-full border-2 bg-white flex items-center justify-center transition-all duration-300 shadow-sm ${
+                            isActive ? 'scale-125 border-purple-600 shadow-md' : 'border-zinc-200 hover:border-purple-300'
+                          }`}>
+                            
+                            {/* Pulse ripples if active */}
+                            {isActive && (
+                              <span className={`absolute inline-flex h-8 w-8 rounded-full ${rippleColor} opacity-25 animate-ping z-0`} />
+                            )}
+                            
+                            {/* Inner dot */}
+                            <div className={`w-3.5 h-3.5 rounded-full transition-transform duration-300 ${dotColor} ${
+                              isActive ? 'scale-110' : 'group-hover:scale-110'
+                            }`} />
+                          </div>
+
+                          {/* Label and dispatches below node */}
+                          <div className="absolute top-10 whitespace-nowrap text-center flex flex-col items-center">
+                            <span className={`text-[10px] font-bold tracking-tight transition-colors ${
+                              isActive ? 'text-[#0f172a]' : 'text-zinc-500 group-hover:text-zinc-700'
+                            }`}>
+                              {slot.label.split(' ')[0]}
+                            </span>
+                            <span className="text-[8px] font-bold text-zinc-400 uppercase tracking-wider mt-[1px]">
+                              {slot.orders} orders
+                            </span>
+                          </div>
+                          
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+
+              </div>
+
+              {/* Interactive Glassmorphic Stats audit drawer below chart */}
+              <div className="mt-4 p-md bg-[#faf5ff] border border-[#f3e8ff] rounded-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-md transition-all duration-300 animate-in fade-in duration-200">
+                <div className="flex items-center gap-md">
+                  <div className={`w-8 h-8 rounded-xl flex items-center justify-center shrink-0 shadow-sm border ${
+                    activeSlot.status === 'PEAK' ? 'bg-rose-50 text-rose-600 border-rose-100' :
+                    activeSlot.status === 'HIGH' ? 'bg-amber-50 text-amber-600 border-amber-100' :
+                    activeSlot.status === 'NORMAL' ? 'bg-sky-50 text-sky-600 border-sky-100' :
+                    'bg-emerald-50 text-emerald-600 border-emerald-100'
+                  }`}>
+                    <Clock size={16} />
+                  </div>
+                  <div>
+                    <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest block">Audit Interval</span>
+                    <span className="font-extrabold text-sm text-[#0f172a]">{activeSlot.label}</span>
+                    <span className="text-[10px] text-zinc-500 font-semibold block mt-0.5">{activeSlot.time}</span>
+                  </div>
+                </div>
+                
+                <div className="flex flex-wrap items-center gap-md sm:gap-xl select-none text-xs">
+                  <div className="text-right">
+                    <span className="text-[9px] font-bold text-zinc-400 uppercase tracking-widest block">Dispatches</span>
+                    <span className="font-black text-sm text-[#0f172a]">{activeSlot.orders} dispatches</span>
+                  </div>
+                  <div className="text-right border-l border-purple-100 pl-md sm:pl-xl">
+                    <span className="text-[9px] font-bold text-purple-400 uppercase tracking-widest block">Est. Revenue</span>
+                    <span className="font-black text-sm text-[#581c87]">{activeSlot.sales}</span>
+                  </div>
+                  <div className="text-right border-l border-purple-100 pl-md sm:pl-xl">
+                    <span className="text-[9px] font-bold text-zinc-400 uppercase tracking-widest block">Load level</span>
+                    <span className={`px-2 py-0.5 rounded-lg text-[9px] font-black tracking-wider inline-block mt-0.5 ${
+                      activeSlot.status === 'PEAK' ? 'bg-rose-100 text-rose-700' :
+                      activeSlot.status === 'HIGH' ? 'bg-amber-100 text-amber-700' :
+                      activeSlot.status === 'NORMAL' ? 'bg-sky-100 text-sky-700' :
+                      'bg-emerald-100 text-emerald-700'
+                    }`}>
+                      {activeSlot.status}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Quick Actions Console */}
+            <div className="bg-white border border-[#eceef2] rounded-2xl p-md shadow-sm space-y-md flex flex-col justify-between">
+              <div>
+                <h3 className="font-sans font-bold text-sm text-[#0f172a] flex items-center gap-xs">
+                  <ShieldCheck size={15} className="text-[#581c87]" /> Node Operations Command
+                </h3>
+                <p className="text-zinc-450 text-[10px] font-sans mt-0.5">Automated actions for local outlet hubs.</p>
+              </div>
+
+              <div className="space-y-sm">
+                <button
+                  onClick={() => setActiveTab('inventory')}
+                  className="w-full flex items-center justify-between p-sm border border-[#e2e8f0] rounded-xl hover:border-purple-300 hover:bg-purple-50/20 text-left text-xs font-semibold text-zinc-700 hover:text-[#581c87] transition cursor-pointer"
+                >
+                  <span className="flex items-center gap-sm">
+                    <Layers size={14} className="text-[#581c87]" /> Replenish Critical Stock
+                  </span>
+                  <span className="px-1.5 py-0.5 rounded text-[8px] bg-rose-100 text-rose-700 font-black animate-pulse">ALERTS</span>
+                </button>
+
+                <button
+                  onClick={handleExportLedger}
+                  className="w-full flex items-center justify-between p-sm border border-[#e2e8f0] rounded-xl hover:border-purple-300 hover:bg-purple-50/20 text-left text-xs font-semibold text-zinc-700 hover:text-[#581c87] transition cursor-pointer"
+                >
+                  <span className="flex items-center gap-sm">
+                    <Download size={14} className="text-zinc-500" /> Export Compliance Ledger
+                  </span>
+                  <span className="text-[8px] font-bold text-zinc-400">PDF / CSV</span>
+                </button>
+
+                <button
+                  onClick={handleStaffBroadcast}
+                  className="w-full flex items-center justify-between p-sm border border-[#e2e8f0] rounded-xl hover:border-purple-300 hover:bg-purple-50/20 text-left text-xs font-semibold text-zinc-700 hover:text-[#581c87] transition cursor-pointer"
+                >
+                  <span className="flex items-center gap-sm">
+                    <Send size={14} className="text-zinc-500" /> Broadcast Terminal SMS
+                  </span>
+                  <span className="text-[8px] font-bold text-[#581c87] uppercase tracking-wider">SMS Blast</span>
+                </button>
+              </div>
+            </div>
+
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
+            
+            {/* Past 7 days Table */}
+            <div className="lg:col-span-2 bg-white border border-[#eceef2] rounded-2xl p-md shadow-sm">
+              <h3 className="font-sans font-bold text-sm text-[#0f172a] mb-md flex items-center gap-xs">
+                <Calendar size={15} className="text-[#581c87]" /> Past 7 Days Ledger Log
+              </h3>
+              
+              <div className="overflow-x-auto text-xs font-sans">
+                <table className="w-full text-left">
+                  <thead className="bg-[#f8fafc] border-b border-[#e2e8f0] text-zinc-400 text-[10px] uppercase font-bold tracking-wider">
+                    <tr>
+                      <th className="px-md py-sm">Day Period</th>
+                      <th className="px-md py-sm">Dispatches</th>
+                      <th className="px-md py-sm">Revenue Volume</th>
+                      <th className="px-md py-sm text-right">OTIF fulfillment</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-[#f1f5f9] font-medium text-zinc-700">
+                    {pastDaysLog.map((dayLog, index) => (
+                      <tr key={index} className="hover:bg-zinc-50/50 transition">
+                        <td className="px-md py-md font-bold text-[#0f172a]">{dayLog.day}</td>
+                        <td className="px-md py-md text-zinc-650">{dayLog.orders} dispatches</td>
+                        <td className="px-md py-md text-[#581c87] font-black">{dayLog.sales}</td>
+                        <td className="px-md py-md text-right font-mono text-emerald-600 font-bold">{dayLog.rate}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {/* Live Rider fleet list */}
+            <div className="bg-white border border-[#eceef2] rounded-2xl p-md shadow-sm flex flex-col justify-between">
+              <div>
+                <h3 className="font-sans font-bold text-sm text-[#0f172a] flex items-center gap-xs">
+                  <ShoppingCart size={15} className="text-[#581c87]" /> Active Rider Fleet
+                </h3>
+                <p className="text-zinc-405 text-[10px] font-sans mt-0.5">Live status and battery tracking of assigned riders.</p>
+              </div>
+
+              <div className="divide-y divide-[#f1f5f9] text-xs font-sans mt-md">
+                {activeRiders.map((rider, index) => (
+                  <div key={index} className="py-2 flex justify-between items-center group">
+                    <div className="flex items-center gap-sm min-w-0">
+                      <div className="w-7 h-7 rounded-full bg-purple-50 text-[#581c87] border border-purple-100 font-black text-[10px] flex items-center justify-center shrink-0">
+                        {rider.initial}
+                      </div>
+                      <div className="min-w-0">
+                        <p className="font-bold text-[#0f172a] truncate">{rider.name.split(' ')[0]} {rider.name.split(' ').slice(-1)[0]}</p>
+                        <p className="text-[9px] text-zinc-400 flex items-center gap-1 font-semibold uppercase">
+                          <span className={`w-1.5 h-1.5 rounded-full ${rider.status === 'Idle' ? 'bg-amber-400' : 'bg-emerald-500'}`} />
+                          {rider.status} · {rider.orders} orders
+                        </p>
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-center gap-sm text-right shrink-0">
+                      <div className="flex items-center gap-[2px] font-mono text-[10px] text-zinc-400">
+                        <Battery size={13} className={rider.battery < 20 ? 'text-rose-500' : 'text-zinc-400'} />
+                        <span className={rider.battery < 20 ? 'text-rose-600 font-bold' : ''}>{rider.battery}%</span>
+                      </div>
+                      
+                      <button
+                        onClick={() => showToast(`SMS alert broadcasted to rider ${rider.name.split(' ')[0]}.`, 'success')}
+                        className="px-2 py-1 border border-zinc-200 rounded-lg hover:border-purple-300 text-[9px] font-bold hover:bg-purple-50/50 hover:text-[#581c87] cursor-pointer transition"
+                      >
+                        Ping
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+      )}
+
+      {activeTab === 'inventory' && (
+        <div className="space-y-lg animate-in fade-in duration-300">
+          
+          {/* Inventory search, metrics & catalogue tools */}
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-md bg-white border border-[#eceef2] p-md rounded-2xl shadow-sm">
+            <div className="relative w-full max-w-sm">
+              <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-450" />
+              <input
+                type="text"
+                placeholder="Search local stocks catalogue..."
+                value={stockSearch}
+                onChange={(e) => setStockSearch(e.target.value)}
+                className="w-full pl-9 pr-4 py-2.5 border border-[#e2e8f0] rounded-xl text-xs outline-none bg-[#f8fafc] focus:bg-white focus:ring-1 focus:ring-[#581c87] transition-all"
+              />
+            </div>
+
+            {/* Actions for Store Catalogue Management */}
+            <div className="flex flex-wrap items-center gap-sm text-xs shrink-0 select-none">
+              <button
+                onClick={() => { setImportState('idle'); setShowImportModal(true); }}
+                className="px-3 py-2 bg-purple-50 text-[#581c87] hover:bg-purple-100/80 border border-purple-100 rounded-xl font-bold flex items-center gap-xs cursor-pointer transition shadow-sm"
+              >
+                <UploadCloud size={14} />
+                <span>Import Manual (CSV)</span>
+              </button>
+
+              <button
+                onClick={() => { setSelectedGlobalSkus([]); setShowGlobalModal(true); }}
+                className="px-3 py-2 bg-[#0f172a] text-white hover:bg-zinc-800 rounded-xl font-bold flex items-center gap-xs cursor-pointer transition shadow-sm"
+              >
+                <Globe size={14} />
+                <span>Global Catalogue Master</span>
+              </button>
+
+              <span className="h-6 w-[1px] bg-zinc-200 mx-xs hidden md:block" />
+
+              <span className="px-3 py-2 bg-rose-50 border border-rose-100 rounded-lg text-rose-700 font-bold">
+                {inventoryList.filter(item => item.status === 'Critical').length} Critical
+              </span>
+              <span className="px-3 py-2 bg-amber-50 border border-amber-100 rounded-lg text-amber-700 font-bold">
+                {inventoryList.filter(item => item.status === 'Low Stock').length} Low
+              </span>
+            </div>
+          </div>
+
+          {/* Stocks statement Table */}
+          <div className="bg-white border border-[#eceef2] rounded-2xl overflow-hidden shadow-sm">
+            <div className="p-md border-b border-[#eceef2] bg-[#f8fafc] flex justify-between items-center">
+              <h4 className="font-sans font-bold text-sm text-[#0f172a]">
+                Product Stock Levels & Catalog
+              </h4>
+              <span className="text-[10px] font-bold text-[#581c87] bg-purple-50 px-2 py-0.5 rounded border border-purple-100 uppercase tracking-wide">Live list</span>
+            </div>
+
+            <div className="overflow-x-auto text-xs font-sans">
+              <table className="w-full text-left">
+                <thead className="bg-[#f8fafc] border-b border-[#e2e8f0] text-zinc-450 text-[10px] uppercase font-bold tracking-wider">
+                  <tr>
+                    <th className="px-md py-sm">Product Item</th>
+                    <th className="px-md py-sm">SKU Ref</th>
+                    <th className="px-md py-sm">Category</th>
+                    <th className="px-md py-sm">Est. Price</th>
+                    <th className="px-md py-sm">Capacity Load</th>
+                    <th className="px-md py-sm">Status</th>
+                    <th className="px-md py-sm text-right">Replenish</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-[#f1f5f9] font-medium text-zinc-700">
+                  {inventoryList.length === 0 ? (
+                    <tr>
+                      <td colSpan={7} className="text-center py-10 text-zinc-400 font-medium">
+                        No product stocks found matching the search keyword.
+                      </td>
+                    </tr>
+                  ) : (
+                    inventoryList.map((item, index) => {
+                      const capacityPct = Math.round((item.stockLevel / item.maxCapacity) * 100);
+                      
+                      // Pretty category badge mapping
+                      const isStaples = item.category.toLowerCase().includes('staple') || item.category.toLowerCase().includes('rice');
+                      const isBeverages = item.category.toLowerCase().includes('bev');
+                      const isProduce = item.category.toLowerCase().includes('produce') || item.category.toLowerCase().includes('fresh') || item.category.toLowerCase().includes('carrot');
+                      const isDairy = item.category.toLowerCase().includes('dairy');
+
+                      return (
+                        <tr key={index} className="hover:bg-[#f8fafc]/60 transition-colors">
+                          <td className="px-md py-md">
+                            <div className="flex items-center gap-sm">
+                              <img 
+                                src={item.image} 
+                                alt={item.name}
+                                className="w-10 h-10 object-cover rounded-lg border border-zinc-200 shadow-sm shrink-0" 
+                              />
+                              <span className="font-bold text-[#0f172a]">{item.name}</span>
+                            </div>
+                          </td>
+                          <td className="px-md py-md font-mono text-[10px] text-zinc-400 font-bold uppercase">{item.sku}</td>
+                          <td className="px-md py-md">
+                            <span className={`px-2 py-0.5 rounded text-[8px] font-bold uppercase tracking-wider ${
+                              isStaples ? 'bg-amber-50 text-amber-700 border border-amber-100' :
+                              isBeverages ? 'bg-rose-50 text-rose-700 border border-rose-100' :
+                              isProduce ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' :
+                              isDairy ? 'bg-sky-50 text-sky-700 border border-sky-100' :
+                              'bg-zinc-150 text-zinc-650'
+                            }`}>
+                              {item.category.split(' / ').slice(-1)[0]}
+                            </span>
+                          </td>
+                          <td className="px-md py-md font-bold text-zinc-800">
+                            ₹{item.price.toLocaleString('en-IN')}
+                          </td>
+                          <td className="px-md py-md w-44">
+                            <div className="flex items-center gap-sm">
+                              <span className="w-8 shrink-0 font-mono text-right font-bold text-[10px]">{item.stockLevel} / {item.maxCapacity}</span>
+                              <div className="w-20 bg-[#f1f5f9] h-2 rounded-full overflow-hidden">
+                                <div 
+                                  className={`h-full ${
+                                    item.status === 'Critical' ? 'bg-rose-500 animate-pulse' :
+                                    item.status === 'Low Stock' ? 'bg-amber-500' :
+                                    'bg-emerald-500'
+                                  }`}
+                                  style={{ width: `${Math.min(capacityPct, 100)}%` }}
+                                />
+                              </div>
+                            </div>
+                          </td>
+                          <td className="px-md py-md">
+                            <span className={`px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider ${
+                              item.status === 'Optimal' ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' :
+                              item.status === 'Low Stock' ? 'bg-amber-50 text-amber-700 border border-amber-100' :
+                              'bg-rose-50 text-rose-700 border border-rose-100'
+                            }`}>
+                              ● {item.status}
+                            </span>
+                          </td>
+                          <td className="px-md py-md text-right">
+                            <button
+                              onClick={() => setReplenishModal({ show: true, item })}
+                              className={`px-3 py-1 rounded-lg text-[10px] font-bold hover:shadow-sm transition cursor-pointer ${
+                                item.status === 'Critical' 
+                                  ? 'bg-rose-500 text-white hover:bg-rose-600'
+                                  : 'border border-zinc-200 text-zinc-700 hover:border-[#581c87] hover:text-[#581c87]'
+                              }`}
+                            >
+                              Replenish
+                            </button>
+                          </td>
+                        </tr>
+                      );
+                    })
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'customers' && (
+        <div className="space-y-lg animate-in fade-in duration-300">
+          
+          {/* Customer directory search and metrics */}
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-md bg-white border border-[#eceef2] p-md rounded-2xl shadow-sm">
+            <div className="relative w-full max-w-sm">
+              <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
+              <input
+                type="text"
+                placeholder="Search CRM profile roster..."
+                value={customerSearch}
+                onChange={(e) => setCustomerSearch(e.target.value)}
+                className="w-full pl-9 pr-4 py-2.5 border border-[#e2e8f0] rounded-xl text-xs outline-none bg-[#f8fafc] focus:bg-white focus:ring-1 focus:ring-[#581c87] transition-all"
+              />
+            </div>
+
+            <div className="flex gap-sm text-xs shrink-0 select-none font-bold">
+              <span className="px-3 py-1.5 bg-purple-50 text-[#581c87] border border-purple-100 rounded-lg">
+                Retention Rate: 88.4%
+              </span>
+              <span className="px-3 py-1.5 bg-sky-50 text-sky-700 border border-sky-100 rounded-lg">
+                AOV: ₹1,580
+              </span>
+              <span className="px-3 py-1.5 bg-emerald-50 text-emerald-700 border border-emerald-100 rounded-lg">
+                CSAT Index: 4.9/5
+              </span>
+            </div>
+          </div>
+
+          {/* Customer list directory */}
+          <div className="bg-white border border-[#eceef2] rounded-2xl overflow-hidden shadow-sm">
+            <div className="p-md border-b border-[#eceef2] bg-[#f8fafc] flex justify-between items-center">
+              <h4 className="font-sans font-bold text-sm text-[#0f172a]">
+                Active Customer Directory
+              </h4>
+              <span className="text-[10px] font-bold text-[#581c87] bg-purple-50 px-2 py-0.5 rounded border border-purple-100 uppercase tracking-wide">Customer registry</span>
+            </div>
+
+            <div className="overflow-x-auto text-xs font-sans">
+              <table className="w-full text-left">
+                <thead className="bg-[#f8fafc] border-b border-[#e2e8f0] text-zinc-450 text-[10px] uppercase font-bold tracking-wider">
+                  <tr>
+                    <th className="px-md py-sm">Customer Profile</th>
+                    <th className="px-md py-sm">Contact Details</th>
+                    <th className="px-md py-sm">Delivery Address</th>
+                    <th className="px-md py-sm">Total Dispatches</th>
+                    <th className="px-md py-sm">Gross Volume Spent</th>
+                    <th className="px-md py-sm text-right">Audit CRM Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-[#f1f5f9] font-medium text-zinc-700">
+                  {customersList.length === 0 ? (
+                    <tr>
+                      <td colSpan={6} className="text-center py-10 text-zinc-400 font-medium">
+                        No customer accounts found matching search keyword.
+                      </td>
+                    </tr>
+                  ) : (
+                    customersList.map((c, idx) => {
+                      const initials = c.name.split(' ').map((n: string) => n[0]).join('');
+                      const gradients = [
+                        'from-purple-500 to-indigo-500 text-white',
+                        'from-rose-500 to-pink-500 text-white',
+                        'from-sky-500 to-indigo-500 text-white',
+                        'from-emerald-500 to-teal-500 text-white',
+                        'from-amber-500 to-orange-500 text-white'
+                      ];
+                      const avatarGrad = gradients[idx % gradients.length];
+
+                      return (
+                        <tr key={idx} className="hover:bg-[#f8fafc]/60 transition-colors">
+                          <td className="px-md py-md">
+                            <div className="flex items-center gap-xs">
+                              <div className={`w-8 h-8 rounded-full bg-gradient-to-br ${avatarGrad} flex items-center justify-center font-black text-[10px] shadow-sm shrink-0`}>
+                                {initials}
+                              </div>
+                              <span className="font-bold text-[#0f172a]">{c.name}</span>
+                            </div>
+                          </td>
+                          <td className="px-md py-md font-mono text-zinc-500 font-semibold">{c.phone}</td>
+                          <td className="px-md py-md max-w-xs truncate text-zinc-500 font-medium" title={c.address}>
+                            {c.address}
+                          </td>
+                          <td className="px-md py-md text-zinc-700 font-bold">{c.ordersCount} orders</td>
+                          <td className="px-md py-md text-[#581c87] font-black">{c.totalSpent}</td>
+                          <td className="px-md py-md text-right space-x-sm shrink-0">
+                            <button
+                              onClick={() => showToast(`Voucher promo code successfully dispatched to ${c.phone}.`, 'success')}
+                              className="px-2.5 py-1 border border-zinc-200 hover:border-purple-300 rounded-lg font-bold text-[10px] text-zinc-650 hover:bg-purple-50/50 hover:text-[#581c87] cursor-pointer transition"
+                            >
+                              Promo SMS
+                            </button>
+                            <button
+                              onClick={() => setSelectedCustomer(c)}
+                              className="px-2.5 py-1 bg-[#0f172a] hover:bg-zinc-800 text-white rounded-lg font-bold text-[10px] cursor-pointer transition shadow-sm"
+                            >
+                              View Profile
+                            </button>
+                          </td>
+                        </tr>
+                      );
+                    })
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'orders' && (
+        <OrdersDeliveriesView
+          searchQuery=""
+          isCoimbatoreView={false}
+          locationid={locationid}
+        />
+      )}
+
+      {/* ── Replenishment Modal Dialog Overlay ── */}
+      {replenishModal.show && replenishModal.item && (
+        <div 
+          className="fixed inset-0 bg-[#0f172a]/40 backdrop-blur-sm z-[200] flex items-center justify-center p-md animate-in fade-in duration-200"
+          onClick={(e) => { if (e.target === e.currentTarget) setReplenishModal({ show: false, item: null }); }}
+        >
+          <div className="bg-white border border-[#e2e8f0] rounded-2xl w-full max-w-[24rem] max-h-[90vh] flex flex-col shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200 text-xs font-sans">
+            <div className="p-md border-b border-[#e2e8f0] bg-[#f8fafc] flex justify-between items-center shrink-0">
+              <h4 className="font-bold text-[#0f172a] flex items-center gap-xs">
+                <ShoppingCart size={15} className="text-[#581c87]" />
+                Replenish Inventory Stack
+              </h4>
+              <button 
+                onClick={() => setReplenishModal({ show: false, item: null })}
+                className="p-1 hover:bg-zinc-200 rounded-full text-zinc-400 cursor-pointer transition-colors"
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            <form onSubmit={handleReplenishSubmit} className="flex-1 flex flex-col min-h-0">
+              <div className="p-md space-y-md overflow-y-auto flex-1">
+                <div className="p-sm bg-purple-50/50 border border-purple-100 rounded-xl space-y-xs">
+                  <span className="text-[9px] font-black text-purple-600 uppercase tracking-wider">Replenishing Item</span>
+                  <p className="font-bold text-sm text-[#0f172a]">{replenishModal.item.name}</p>
+                  <p className="text-[10px] text-zinc-400 font-bold uppercase tracking-wider">SKU: {replenishModal.item.sku}</p>
+                </div>
+
+                <div className="space-y-sm">
+                  <div className="space-y-1">
+                    <label className="font-bold text-zinc-400 uppercase tracking-widest text-[9px]">Destination Store</label>
+                    <input 
+                      type="text" 
+                      value={store.name} 
+                      className="w-full border border-[#e2e8f0] rounded-xl p-sm bg-[#f8fafc] text-zinc-500 font-semibold outline-none border-dashed"
+                      disabled
+                    />
+                  </div>
+
+                  <div className="space-y-1">
+                    <label className="font-bold text-zinc-500 uppercase tracking-widest text-[9px]">Replenish Quantity (Units)</label>
+                    <input 
+                      type="number" 
+                      value={replenishQty}
+                      onChange={(e) => setReplenishQty(Number(e.target.value))}
+                      className="w-full border border-[#e2e8f0] rounded-xl p-sm bg-[#f8fafc] focus:bg-white outline-none focus:ring-1 focus:ring-[#581c87] font-bold"
+                      min={1}
+                      required
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-md border-t border-[#f1f5f9] flex justify-end gap-sm bg-[#f8fafc] shrink-0">
+                <button
+                  type="button"
+                  onClick={() => setReplenishModal({ show: false, item: null })}
+                  className="px-4 py-2 border border-[#e2e8f0] rounded-xl font-semibold text-zinc-500 hover:bg-zinc-50 cursor-pointer"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-[#581c87] text-white rounded-xl font-bold hover:bg-purple-800 cursor-pointer shadow-sm"
+                >
+                  Confirm Batch Dispatch
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* ── Manual CSV Import simulated Modal ── */}
+      {showImportModal && (
+        <div 
+          className="fixed inset-0 bg-[#0f172a]/40 backdrop-blur-sm z-[200] flex items-center justify-center p-md animate-in fade-in duration-200"
+          onClick={(e) => { if (e.target === e.currentTarget && importState !== 'reading' && importState !== 'parsing' && importState !== 'saving') setShowImportModal(false); }}
+        >
+          <div className="bg-white border border-[#e2e8f0] rounded-2xl w-full max-w-[26rem] max-h-[90vh] flex flex-col shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200 text-xs font-sans">
+            <div className="p-md border-b border-[#e2e8f0] bg-[#f8fafc] flex justify-between items-center shrink-0">
+              <h4 className="font-bold text-[#0f172a] flex items-center gap-xs">
+                <UploadCloud size={15} className="text-[#581c87]" />
+                Import Catalogue Manifest
+              </h4>
+              <button 
+                onClick={() => setShowImportModal(false)}
+                disabled={['reading', 'parsing', 'saving'].includes(importState)}
+                className="p-1 hover:bg-zinc-200 rounded-full text-zinc-400 cursor-pointer transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            <div className="p-md space-y-md overflow-y-auto flex-1">
+              <p className="text-zinc-500 leading-relaxed font-medium">
+                Upload or drop your CSV stock ledger files below to commission new items into the <strong>{store.name}</strong> local registry database.
+              </p>
+
+              {importState === 'idle' && (
+                <div 
+                  onClick={handleStartCsvImport}
+                  className="border-2 border-dashed border-[#e2e8f0] hover:border-purple-300 rounded-2xl p-xl text-center cursor-pointer transition-colors bg-[#f8fafc] hover:bg-purple-50/10 space-y-sm group"
+                >
+                  <UploadCloud size={28} className="mx-auto text-zinc-400 group-hover:text-[#581c87] transition-colors" />
+                  <div>
+                    <p className="font-bold text-[#0f172a]">Click here to import file</p>
+                    <p className="text-[10px] text-zinc-400 font-semibold uppercase tracking-wider mt-0.5">Mock file: coimbatore_manifest_v2.csv</p>
+                  </div>
+                </div>
+              )}
+
+              {['reading', 'parsing', 'saving'].includes(importState) && (
+                <div className="border border-[#e2e8f0] rounded-xl p-md bg-[#f8fafc] space-y-md text-center">
+                  <div className="relative w-8 h-8 mx-auto">
+                    <span className="absolute inset-0 rounded-full border-2 border-purple-100" />
+                    <span className="absolute inset-0 rounded-full border-2 border-t-purple-600 animate-spin" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-[#0f172a] uppercase tracking-wide">
+                      {importState === 'reading' && 'Reading uploaded CSV sheets...'}
+                      {importState === 'parsing' && 'Scanning item SKU catalog mapping...'}
+                      {importState === 'saving' && 'Syncing manifest entries with local inventory...'}
+                    </p>
+                    <p className="text-[10px] text-zinc-400 font-semibold mt-1">Kindly keep this window open while processing dispatches.</p>
+                  </div>
+                </div>
+              )}
+
+              {importState === 'done' && (
+                <div className="border border-emerald-100 rounded-xl p-md bg-emerald-50/50 space-y-md text-center animate-in zoom-in-95">
+                  <CheckCircle2 size={32} className="mx-auto text-emerald-600" />
+                  <div>
+                    <p className="font-black text-emerald-800 uppercase tracking-wide text-xs">Ledger Imported Successfully</p>
+                    <p className="text-[10px] text-emerald-700 font-bold mt-1">3 new SKU codes commissioned successfully into local registry.</p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="p-md border-t border-[#f1f5f9] flex justify-end bg-[#f8fafc] shrink-0">
+              <button
+                type="button"
+                onClick={() => setShowImportModal(false)}
+                disabled={['reading', 'parsing', 'saving'].includes(importState)}
+                className="px-4 py-2 border border-[#e2e8f0] rounded-xl font-bold text-zinc-650 hover:bg-zinc-50 cursor-pointer disabled:opacity-50"
+              >
+                {importState === 'done' ? 'Close Window' : 'Cancel'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Choose from Global Catalogue Modal ── */}
+      {showGlobalModal && (
+        <div 
+          className="fixed inset-0 bg-[#0f172a]/40 backdrop-blur-sm z-[200] flex items-center justify-center p-md animate-in fade-in duration-200"
+          onClick={(e) => { if (e.target === e.currentTarget) setShowGlobalModal(false); }}
+        >
+          <div className="bg-white border border-[#e2e8f0] rounded-2xl w-full max-w-[28rem] max-h-[90vh] flex flex-col shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200 text-xs font-sans">
+            <div className="p-md border-b border-[#e2e8f0] bg-[#f8fafc] flex justify-between items-center shrink-0">
+              <h4 className="font-bold text-[#0f172a] flex items-center gap-xs">
+                <Globe size={15} className="text-[#581c87]" />
+                Select Products from Master Catalogue
+              </h4>
+              <button 
+                onClick={() => setShowGlobalModal(false)}
+                className="p-1 hover:bg-zinc-200 rounded-full text-zinc-400 cursor-pointer transition-colors"
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            <div className="p-md space-y-md overflow-y-auto flex-1">
+              <p className="text-zinc-500 leading-relaxed font-medium">
+                Choose master items from the national database to stock and commission locally at <strong>{store.name}</strong>.
+              </p>
+
+              <div className="space-y-sm divide-y divide-[#f1f5f9]">
+                {GLOBAL_CATALOGUE_ITEMS.map((item) => {
+                  const isChecked = selectedGlobalSkus.includes(item.sku);
+                  return (
+                    <div 
+                      key={item.sku} 
+                      onClick={() => {
+                        setSelectedGlobalSkus(prev => 
+                          isChecked ? prev.filter(s => s !== item.sku) : [...prev, item.sku]
+                        );
+                      }}
+                      className="py-2.5 flex items-center justify-between gap-sm cursor-pointer select-none hover:bg-zinc-50/50 rounded-lg px-1 transition-colors"
+                    >
+                      <div className="flex items-center gap-sm min-w-0">
+                        <input 
+                          type="checkbox" 
+                          checked={isChecked}
+                          onChange={() => {}} // handled by row click
+                          className="w-4 h-4 rounded text-[#581c87] border-[#e2e8f0] focus:ring-purple-500" 
+                        />
+                        <img 
+                          src={item.image} 
+                          alt={item.name} 
+                          className="w-9 h-9 object-cover rounded-lg border border-zinc-200 shrink-0" 
+                        />
+                        <div className="min-w-0">
+                          <p className="font-bold text-[#0f172a] truncate">{item.name}</p>
+                          <p className="text-[9px] text-zinc-450 font-bold uppercase tracking-wider">{item.category} · SKU: {item.sku}</p>
+                        </div>
+                      </div>
+                      <span className="font-bold text-zinc-800 shrink-0">₹{item.price}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="p-md border-t border-[#f1f5f9] flex justify-end gap-sm bg-[#f8fafc] shrink-0">
+              <button
+                type="button"
+                onClick={() => setShowGlobalModal(false)}
+                className="px-4 py-2 border border-[#e2e8f0] rounded-xl font-bold text-zinc-500 hover:bg-zinc-50 cursor-pointer"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleAddGlobalCatalogue}
+                className="px-4 py-2 bg-[#581c87] text-white rounded-xl font-bold hover:bg-purple-800 cursor-pointer shadow-sm"
+              >
+                Add Selected to Store
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Customer CRM Profile Side Drawer Overlay ── */}
+      {selectedCustomer && (
+        <div 
+          className="fixed inset-0 bg-[#0f172a]/40 backdrop-blur-sm z-[200] flex justify-end p-0 animate-in fade-in duration-200"
+          onClick={(e) => { if (e.target === e.currentTarget) setSelectedCustomer(null); }}
+        >
+          <div className="bg-white border-l border-[#e2e8f0] w-full max-w-[28rem] h-full flex flex-col shadow-2xl overflow-hidden animate-in slide-in-from-right duration-300 text-xs font-sans">
+            
+            {/* Header info */}
+            <div className="p-lg border-b border-[#e2e8f0] bg-[#f8fafc] flex justify-between items-start shrink-0">
+              <div className="flex items-center gap-md">
+                <div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white flex items-center justify-center font-black text-sm shadow-md">
+                  {selectedCustomer.name.split(' ').map((n: string) => n[0]).join('')}
+                </div>
+                <div>
+                  <h4 className="font-sans font-black text-base text-[#0f172a]">{selectedCustomer.name}</h4>
+                  <span className="inline-flex items-center gap-xs px-2 py-0.5 rounded text-[8px] bg-purple-100 text-purple-700 font-black tracking-wider uppercase mt-1">
+                    <UserCheck size={9} /> High Value Account
+                  </span>
+                </div>
+              </div>
+              <button 
+                onClick={() => setSelectedCustomer(null)}
+                className="p-1 hover:bg-zinc-200 rounded-full text-zinc-400 cursor-pointer transition-colors"
+              >
+                <X size={18} />
+              </button>
+            </div>
+
+            {/* Profile Drawer Details Container */}
+            <div className="p-lg overflow-y-auto flex-1 space-y-lg">
+              
+              {/* Contact info list card */}
+              <div className="space-y-sm bg-white border border-[#eceef2] rounded-2xl p-md shadow-sm">
+                <span className="text-[9px] font-black text-purple-600 uppercase tracking-wider block">Profile Registry Details</span>
+                
+                <div className="space-y-xs text-zinc-650">
+                  <div className="flex items-center gap-sm py-1 border-b border-[#f1f5f9]">
+                    <Phone size={13} className="text-zinc-400 shrink-0" />
+                    <span className="font-mono font-semibold">{selectedCustomer.phone}</span>
+                  </div>
+                  <div className="flex items-center gap-sm py-1 border-b border-[#f1f5f9]">
+                    <Mail size={13} className="text-zinc-400 shrink-0" />
+                    <span>{selectedCustomer.name.toLowerCase().replace(/[^a-z]/g, '')}@gmail.com</span>
+                  </div>
+                  <div className="flex items-start gap-sm py-1">
+                    <MapPin size={13} className="text-zinc-400 shrink-0 mt-0.5" />
+                    <span>{selectedCustomer.address}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Metric grid info overlay */}
+              <div className="grid grid-cols-3 gap-sm select-none">
+                <div className="bg-[#faf5ff] border border-[#f3e8ff] p-sm rounded-xl text-center">
+                  <span className="text-[8px] font-black text-purple-400 uppercase tracking-widest block">Dispatches</span>
+                  <span className="font-black text-sm text-[#581c87] mt-xs block">{selectedCustomer.ordersCount} dispatches</span>
+                </div>
+                <div className="bg-sky-50/50 border border-sky-100 p-sm rounded-xl text-center">
+                  <span className="text-[8px] font-black text-sky-500 uppercase tracking-widest block">Gross spend</span>
+                  <span className="font-black text-sm text-sky-700 mt-xs block">{selectedCustomer.totalSpent}</span>
+                </div>
+                <div className="bg-emerald-50/50 border border-emerald-100 p-sm rounded-xl text-center">
+                  <span className="text-[8px] font-black text-emerald-500 uppercase tracking-widest block">CSAT Score</span>
+                  <span className="font-black text-sm text-emerald-700 mt-xs block">5.0 / 5.0</span>
+                </div>
+              </div>
+
+              {/* Simulated Customer Order History ledger */}
+              <div className="space-y-sm">
+                <h5 className="font-sans font-bold text-xs text-[#0f172a] flex items-center gap-xs">
+                  <History size={14} className="text-[#581c87]" /> Past Interactions & Orders
+                </h5>
+
+                <div className="divide-y divide-[#f1f5f9] select-none text-[11px] font-semibold text-zinc-650">
+                  <div className="py-2.5 flex justify-between items-center">
+                    <div className="space-y-0.5">
+                      <span className="text-[#0f172a]">DM-ORD-2091</span>
+                      <p className="text-[9px] text-zinc-400 font-medium">{selectedCustomer.lastOrder}</p>
+                    </div>
+                    <div className="text-right">
+                      <span className="font-mono text-[#581c87] font-bold">{selectedCustomer.totalSpent}</span>
+                      <span className="px-1.5 py-0.2 bg-emerald-50 text-emerald-600 rounded text-[7px] font-black tracking-wider block mt-0.5 uppercase">Delivered</span>
+                    </div>
+                  </div>
+                  
+                  <div className="py-2.5 flex justify-between items-center opacity-70">
+                    <div className="space-y-0.5">
+                      <span className="text-[#0f172a]">DM-ORD-1982</span>
+                      <p className="text-[9px] text-zinc-400 font-medium">1 Month ago</p>
+                    </div>
+                    <div className="text-right">
+                      <span className="font-mono text-zinc-700 font-bold">₹1,240.00</span>
+                      <span className="px-1.5 py-0.2 bg-emerald-50 text-emerald-600 rounded text-[7px] font-black tracking-wider block mt-0.5 uppercase">Delivered</span>
+                    </div>
+                  </div>
+
+                  <div className="py-2.5 flex justify-between items-center opacity-60">
+                    <div className="space-y-0.5">
+                      <span className="text-[#0f172a]">DM-ORD-1721</span>
+                      <p className="text-[9px] text-zinc-400 font-medium">2 Months ago</p>
+                    </div>
+                    <div className="text-right">
+                      <span className="font-mono text-zinc-700 font-bold">₹2,840.00</span>
+                      <span className="px-1.5 py-0.2 bg-emerald-50 text-emerald-600 rounded text-[7px] font-black tracking-wider block mt-0.5 uppercase">Delivered</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Quick Actions in Side Drawer */}
+            <div className="p-lg bg-[#f8fafc] border-t border-[#e2e8f0] grid grid-cols-2 gap-sm shrink-0">
+              <button
+                onClick={() => {
+                  showToast(`Promo voucher code SMS broadcasted to customer.`, 'success');
+                  setSelectedCustomer(null);
+                }}
+                className="w-full py-2.5 bg-[#581c87] hover:bg-purple-800 text-white rounded-xl font-bold text-center cursor-pointer transition shadow-sm"
+              >
+                Send Promo SMS
+              </button>
+              
+              <button
+                onClick={() => {
+                  showToast(`Refund credit index check initiated.`, 'info');
+                  setSelectedCustomer(null);
+                }}
+                className="w-full py-2.5 border border-[#e2e8f0] bg-white hover:bg-zinc-50 rounded-xl font-bold text-center text-zinc-700 cursor-pointer transition"
+              >
+                Issue Store Credit
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+}
diff --git a/src/data.ts b/src/data.ts
new file mode 100644
index 0000000..4b59491
--- /dev/null
+++ b/src/data.ts
@@ -0,0 +1,433 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  KPICardData,
+  RevenueHeatmapDay,
+  LeaderboardNode,
+  ProductMatrixItem,
+  InventoryItem,
+  OrderItem,
+  ImportLog,
+  OperationalAlert,
+  RegionalPerformance,
+  CustomerOrder
+} from './types';
+
+// Dashboard Screen KPIs (Tamil Nadu Coimbatore Centric)
+export const dashboardKPIs: KPICardData[] = [
+  {
+    title: 'TOTAL ORDERS',
+    value: '4,921',
+    subtext: 'Last 24 Hours',
+    sparkline: [50, 40, 60, 45, 80, 55, 65],
+    badge: '1.4k'
+  },
+  {
+    title: "TODAY'S REVENUE",
+    value: '₹4.2L',
+    subtext: 'Settled Funds (IST)',
+    trend: '+8.1%',
+    isPositive: true,
+    sparkline: [35, 55, 45, 70, 60, 90, 85]
+  },
+  {
+    title: 'MONTHLY PROFIT',
+    value: '₹18.9L',
+    subtext: 'EBITDA Margin 22%',
+    trend: '-0.4%',
+    isPositive: false,
+    sparkline: [80, 75, 70, 65, 55, 60, 45]
+  },
+  {
+    title: 'DELIVERED',
+    value: '4,102',
+    subtext: 'In-Full-On-Time (CBE)',
+    trend: '98.2%',
+    isPositive: true,
+    sparkline: [60, 70, 68, 85, 78, 92, 95]
+  }
+];
+
+// Reports Screen KPIs (4 cards - Tamil Nadu Coimbatore Centric)
+export const reportsKPIs: KPICardData[] = [
+  {
+    title: 'Gross Revenue',
+    value: '₹12,48,302.00',
+    subtext: 'Vs. Previous Quarter: ₹10.9L',
+    trend: '+14.2%',
+    isPositive: true,
+    sparkline: [40, 48, 52, 65, 72, 78, 90]
+  },
+  {
+    title: 'Net Margin %',
+    value: '28.4%',
+    subtext: 'Target threshold: 30.0%',
+    trend: '-0.8%',
+    isPositive: false,
+    sparkline: [75, 72, 68, 64, 60, 62, 58]
+  },
+  {
+    title: 'Active Inventory',
+    value: '48.2k',
+    subtext: 'Groceries units across TN hubs',
+    trend: '+5.1%',
+    isPositive: true,
+    sparkline: [55, 58, 61, 60, 64, 69, 73]
+  },
+  {
+    title: 'Staff Efficiency',
+    value: '94.1%',
+    subtext: 'Active utilization rate (CBE)',
+    trend: '+2.4%',
+    isPositive: true,
+    sparkline: [82, 85, 84, 88, 91, 93, 94]
+  }
+];
+
+// Heatmap Data (Hourly Revenue Distribution)
+export const heatmapData: RevenueHeatmapDay[] = [
+  {
+    day: 'Mon',
+    hours: {
+      '08:00': 1.2,
+      '10:00': 4.5,
+      '12:00': 8.9,
+      '14:00': 5.2,
+      '16:00': 4.8,
+      '18:00': 9.1,
+      '20:00': 3.2
+    }
+  },
+  {
+    day: 'Tue',
+    hours: {
+      '08:00': 1.1,
+      '10:00': 3.8,
+      '12:00': 5.9,
+      '14:00': 7.2,
+      '16:00': 4.1,
+      '18:00': 8.4,
+      '20:00': 2.9
+    }
+  },
+  {
+    day: 'Wed',
+    hours: {
+      '08:00': 1.5,
+      '10:00': 4.2,
+      '12:00': 9.4,
+      '14:00': 10.1,
+      '16:00': 5.1,
+      '18:00': 4.2,
+      '20:00': 1.2
+    }
+  },
+  {
+    day: 'Thu',
+    hours: {
+      '08:00': 0.9,
+      '10:00': 2.2,
+      '12:00': 4.8,
+      '14:00': 5.5,
+      '16:00': 8.2,
+      '18:00': 7.9,
+      '20:00': 3.4
+    }
+  },
+  {
+    day: 'Fri',
+    hours: {
+      '08:00': 2.2,
+      '10:00': 7.8,
+      '12:00': 11.4,
+      '14:00': 12.2,
+      '16:00': 9.8,
+      '18:00': 10.5,
+      '20:00': 5.2
+    }
+  }
+];
+
+// Leaderboards (Top Performing State & Coimbatore Nodes)
+export const globalLeaderboard: LeaderboardNode[] = [
+  { rank: '01', name: 'Chennai - T-Nagar', percentage: 94, revenue: '₹2.4L' },
+  { rank: '02', name: 'Coimbatore - RS Puram Main', percentage: 88, revenue: '₹2.18L' },
+  { rank: '03', name: 'Madurai - KK Nagar', percentage: 82, revenue: '₹1.94L' },
+  { rank: '04', name: 'Trichy - Thillai Nagar', percentage: 76, revenue: '₹1.81L' }
+];
+
+export const regionalLeaderboard: LeaderboardNode[] = [
+  { rank: '01', name: 'RS Puram - Main St', percentage: 94, revenue: '₹2.4L' },
+  { rank: '02', name: 'Gandhipuram Cross Cut', percentage: 88, revenue: '₹2.1L' },
+  { rank: '03', name: 'Peelamedu Avinashi Rd', percentage: 82, revenue: '₹1.9L' },
+  { rank: '04', name: 'Town Hall Bazaar', percentage: 76, revenue: '₹1.8L' }
+];
+
+// Product Matrix (Detailed Groceries/Retail Items Matrix)
+export const initialProducts: ProductMatrixItem[] = [
+  {
+    id: '1',
+    name: 'Ponni Raw Rice Premium 10kg',
+    sku: 'PONNI-RICE-10K',
+    unitsSold: 12402,
+    revenue: 868140,
+    stockStatus: 'Healthy',
+    trend: 'up',
+    image: 'https://images.unsplash.com/photo-1586201375761-83865001e31c?auto=format&fit=crop&w=150&q=80',
+    category: 'Staples / Rice',
+    exposure: '34/42 Stores',
+    verified: true
+  },
+  {
+    id: '2',
+    name: 'Idhayam Pure Sesame Oil 1L',
+    sku: 'IDH-SESAME-1L',
+    unitsSold: 8912,
+    revenue: 1480000,
+    stockStatus: 'Low Stock',
+    trend: 'flat',
+    image: 'https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?auto=format&fit=crop&w=150&q=80',
+    category: 'Groceries / Oils',
+    exposure: '40/42 Stores',
+    verified: true
+  },
+  {
+    id: '3',
+    name: 'Narasus Filter Coffee Powder 500g',
+    sku: 'NARASUS-COF-500',
+    unitsSold: 15221,
+    revenue: 456630,
+    stockStatus: 'Healthy',
+    trend: 'up',
+    image: 'https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?auto=format&fit=crop&w=150&q=80',
+    category: 'Beverages / Coffee',
+    exposure: '42/42 Stores',
+    verified: true
+  },
+  {
+    id: '4',
+    name: 'Ooty Fresh Quality Carrots 1kg',
+    sku: 'OOTY-CARROT-1KG',
+    unitsSold: 4120,
+    revenue: 123600,
+    stockStatus: 'Critical',
+    trend: 'down',
+    image: 'https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?auto=format&fit=crop&w=150&q=80',
+    category: 'Fresh Produce / Veg',
+    exposure: '32/42 Stores',
+    verified: false
+  }
+];
+
+// Inventory lists (Coimbatore Warehouse Region Centric)
+export const initialInventory: InventoryItem[] = [
+  {
+    sku: 'RICE-PN-50',
+    name: 'Premium Ponni Rice Bag 25kg',
+    warehouse: 'RS Puram Hub (CBE-01)',
+    stockLevel: 1402,
+    maxCapacity: 2000,
+    status: 'Optimal',
+    region: 'CBE-NORTH'
+  },
+  {
+    sku: 'ATTA-ASH-10',
+    name: 'Aashirvaad Chakki Atta 10kg',
+    warehouse: 'Gandhipuram Warehouse (CBE-04)',
+    stockLevel: 12,
+    maxCapacity: 100,
+    status: 'Critical',
+    region: 'CBE-SOUTH'
+  },
+  {
+    sku: 'OIL-IDH-05',
+    name: 'Idhayam Sesame Oil Can 5L',
+    warehouse: 'Peelamedu Sort Facility (CBE-09)',
+    stockLevel: 45,
+    maxCapacity: 120,
+    status: 'Low Stock',
+    region: 'CBE-EAST'
+  },
+  {
+    sku: 'COF-NAR-01',
+    name: 'Narasus Filter Coffee 1kg Pack',
+    warehouse: 'Pollachi Road Depot (CBE-15)',
+    stockLevel: 890,
+    maxCapacity: 1000,
+    status: 'Optimal',
+    region: 'CBE-WEST'
+  },
+  {
+    sku: 'MILK-AAV-50',
+    name: 'Aavin Premium Pouch Milk 500ml',
+    warehouse: 'Tiruppur Junction Depot (TPR-02)',
+    stockLevel: 18,
+    maxCapacity: 150,
+    status: 'Low Stock',
+    region: 'TIRUPPUR'
+  }
+];
+
+// Order Items list
+export const initialOrders: OrderItem[] = [
+  {
+    id: '#ORD-902341',
+    store: 'RS Puram Terminal',
+    amount: 12490.00,
+    time: '14:22 PM (IST)',
+    status: 'SHIPPED'
+  },
+  {
+    id: '#ORD-902339',
+    store: 'Gandhipuram Outlet 2',
+    amount: 840.50,
+    time: '13:05 PM (IST)',
+    status: 'FLAGGED'
+  },
+  {
+    id: '#ORD-902312',
+    store: 'Peelamedu Center',
+    amount: 24200.00,
+    time: '11:15 AM (IST)',
+    status: 'SHIPPED'
+  },
+  {
+    id: '#ORD-901995',
+    store: 'Saravanampatti Hub',
+    amount: 5120.00,
+    time: '09:40 AM (IST)',
+    status: 'PROCESSING'
+  }
+];
+
+// Import log items list
+export const initialImportLogs: ImportLog[] = [
+  {
+    timestamp: 'May 31, 2026 09:12',
+    batchRef: '#IMP_0921_A',
+    type: 'Inventory Sync',
+    source: 'ERP Export',
+    result: 'SUCCESS (421 Rows)',
+    status: 'SUCCESS'
+  },
+  {
+    timestamp: 'May 30, 2026 17:45',
+    batchRef: '#IMP_0920_Z',
+    type: 'Catalogue Meta',
+    source: 'Marketing API',
+    result: 'FAILED (Invalid API Key)',
+    status: 'FAILED'
+  },
+  {
+    timestamp: 'May 28, 2026 10:30',
+    batchRef: '#IMP_0899_C',
+    type: 'Logistics Matrix',
+    source: 'Manual Upload',
+    result: 'SUCCESS (1,500 Rows)',
+    status: 'SUCCESS'
+  }
+];
+
+// Operational Alerts (Tamil Nadu Coimbatore Centric)
+export const operationalAlerts: OperationalAlert[] = [
+  {
+    id: 'alert-1',
+    type: 'critical',
+    title: 'Stock Critical: RS Puram Store',
+    details: 'Fresh dairy and milk category inventory fell below 5% at 08:24 AM.',
+    time: '08:24 AM'
+  },
+  {
+    id: 'alert-2',
+    type: 'warning',
+    title: 'High Latency Warning',
+    details: 'Coimbatore Hub Server API latency spiked to 640ms in grocery billing services.',
+    time: '07:15 AM'
+  },
+  {
+    id: 'alert-3',
+    type: 'info',
+    title: 'Node Rebalance Completed',
+    details: 'Peelamedu sort facility rebalanced 4,500 units of Ponni Rice to Gandhipuram nodes.',
+    time: '05:30 AM'
+  }
+];
+
+// Regional Performance (Coimbatore Zones)
+export const regionalPerformances: RegionalPerformance[] = [
+  { region: 'Coimbatore North', sales: '₹42.4L', revenueValue: 42.4, maxTarget: 50 },
+  { region: 'Coimbatore South', sales: '₹38.2L', revenueValue: 38.2, maxTarget: 50 },
+  { region: 'Coimbatore East & Peelamedu', sales: '₹29.1L', revenueValue: 29.1, maxTarget: 50 },
+  { region: 'Tiruppur Regional Hub', sales: '₹14.5L', revenueValue: 14.5, maxTarget: 50 }
+];
+
+// Initial Customer Orders Dataset
+export const initialCustomerOrders: CustomerOrder[] = [
+  {
+    id: 'DM-ORD-2091',
+    customerName: 'Meenakshi Sundaram',
+    phone: '+91 94432 18942',
+    address: 'Plot 4, Lakshmipuram Ext, RS Puram, Coimbatore - 641002',
+    items: [
+      { name: 'Ponni Raw Rice Premium 10kg', quantity: 1, price: 680 },
+      { name: 'Idhayam Pure Sesame Oil 1L', quantity: 2, price: 340 },
+      { name: 'Narasus Filter Coffee Powder 500g', quantity: 1, price: 195 }
+    ],
+    amount: 1555,
+    time: '14:24 PM',
+    status: 'OUT_FOR_DELIVERY',
+    assignedRider: 'Karthikeyan Radhakrishnan',
+    hub: 'RS Puram Hub'
+  },
+  {
+    id: 'DM-ORD-2092',
+    customerName: 'Senthil Kumar VSD',
+    phone: '+91 98421 00234',
+    address: 'Flat 2C, Whispering Palms, Avinashi Road, Peelamedu - 641004',
+    items: [
+      { name: 'Premium Ponni Rice Bag 25kg', quantity: 1, price: 1600 },
+      { name: 'Aavin Premium Milk 500ml', quantity: 4, price: 28 },
+      { name: 'Ooty Fresh Quality Carrots 1kg', quantity: 2, price: 60 }
+    ],
+    amount: 1832,
+    time: '14:10 PM',
+    status: 'DELIVERED',
+    assignedRider: 'Arun Kumar Chinnasamy',
+    hub: 'Peelamedu Sort Center'
+  },
+  {
+    id: 'DM-ORD-2093',
+    customerName: 'Kavitha Ramaswamy',
+    phone: '+91 90035 88921',
+    address: 'No 15, Cross Cut Road, Gandhipuram, Coimbatore - 641012',
+    items: [
+      { name: 'Aashirvaad Chakki Atta 10kg', quantity: 2, price: 440 },
+      { name: 'Organic Turmeric Powder 200g', quantity: 1, price: 90 },
+      { name: 'Pure Cow Ghee 500ml', quantity: 1, price: 320 }
+    ],
+    amount: 1290,
+    time: '13:50 PM',
+    status: 'CONFIRMED',
+    assignedRider: 'Suresh Balasubramaniam',
+    hub: 'Gandhipuram Cross Rd'
+  },
+  {
+    id: 'DM-ORD-2094',
+    customerName: 'Dr. Anand Selvapandian',
+    phone: '+91 97890 22104',
+    address: 'Villa 12, Sobha Elanza, Sathy Road, Saravanampatti - 641035',
+    items: [
+      { name: 'Narasus Filter Coffee Powder 500g', quantity: 2, price: 195 },
+      { name: 'Idhayam Pure Sesame Oil 1L', quantity: 1, price: 340 }
+    ],
+    amount: 730,
+    time: '13:15 PM',
+    status: 'PROCESSING',
+    assignedRider: 'Pending Assignment',
+    hub: 'Saravanampatti Store CBE'
+  }
+];
+
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..3dd5f45
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+  
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-gutter: 20px;
+  --spacing-container-margin: 24px;
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..233bf57
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,25 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import App from './App.tsx';
+import './index.css';
+
+// Single shared query client. Sensible defaults for a dashboard: cache for a
+// minute, one retry, and no refetch storm when the window regains focus.
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60_000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+);
diff --git a/src/services/api.ts b/src/services/api.ts
new file mode 100644
index 0000000..8ee2bc9
--- /dev/null
+++ b/src/services/api.ts
@@ -0,0 +1,420 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Workolik Hasura REST client — the `/api/rest/*` surface documented at
+ * https://developer.nearledaily.com (Users, Orders, Tenants, Products,
+ * Apps & Locations, Partners). The "Mobile" section is intentionally omitted.
+ *
+ * All requests go through the Vite dev proxy at `/hasura/*`, which rewrites to
+ * `https://api.workolik.com/api/rest/*` and injects the `x-hasura-admin-secret`
+ * header server-side (see vite.config.ts). The secret never reaches the browser.
+ *
+ * Components should not call these directly — use the TanStack Query hooks in
+ * `./queries`, which add caching, dedup, and loading/error state.
+ */
+
+const HASURA_BASE = '/hasura';
+
+/** Tenant whose live data the dashboard displays. */
+export const DEFAULT_TENANT_ID = 1087;
+
+/** Order-module config the tenant's order summary is computed against. */
+export const DEFAULT_CONFIG_ID = 1;
+
+type QueryParams = Record<string, string | number | undefined | null>;
+
+async function hasuraGet<T = unknown>(endpoint: string, params: QueryParams = {}): Promise<T> {
+  const qs = new URLSearchParams();
+  Object.entries(params).forEach(([k, v]) => {
+    if (v !== undefined && v !== null && v !== '') qs.append(k, String(v));
+  });
+  const query = qs.toString();
+  const res = await fetch(`${HASURA_BASE}/${endpoint}${query ? `?${query}` : ''}`, {
+    headers: { Accept: 'application/json' },
+  });
+  if (!res.ok) {
+    throw new Error(`Hasura ${endpoint} failed: ${res.status} ${res.statusText}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+/**
+ * Hasura REST responses come back in a few shapes depending on the route:
+ *   - a bare array:                       [ {...}, {...} ]
+ *   - an envelope with `details`:         { details: [...] } or { details: {...} }
+ *   - an envelope keyed by the table:     { tenants: [...] }, { orders: [...] }
+ * This normalizes any of those to an array of rows.
+ */
+export function toRows<T = Record<string, unknown>>(json: unknown): T[] {
+  if (Array.isArray(json)) return json as T[];
+  if (json && typeof json === 'object') {
+    const obj = json as Record<string, unknown>;
+    if (Array.isArray(obj.details)) return obj.details as T[];
+    if (obj.details && typeof obj.details === 'object') return [obj.details as T];
+    if (Array.isArray(obj.data)) return obj.data as T[];
+    // Envelope keyed by the route/table name (Hasura's default for REST endpoints).
+    const firstArray = Object.values(obj).find((v) => Array.isArray(v));
+    if (Array.isArray(firstArray)) return firstArray as T[];
+  }
+  return [];
+}
+
+function firstRow<T = Record<string, unknown>>(json: unknown): T | null {
+  const rows = toRows<T>(json);
+  return rows.length ? rows[0] : null;
+}
+
+function n(v: unknown): number {
+  const num = typeof v === 'number' ? v : Number(v);
+  return Number.isFinite(num) ? num : 0;
+}
+
+type Row = Record<string, unknown>;
+/** ISO datetime helpers for endpoints that expect full timestamps. */
+export const startOfDay = (d: string) => (d.includes('T') ? d : `${d}T00:00:00`);
+export const endOfDay = (d: string) => (d.includes('T') ? d : `${d}T23:59:59`);
+
+// ════════════════════════════════════════════════════════════════════════════
+// USERS
+// ════════════════════════════════════════════════════════════════════════════
+
+/** /getusers?roleid=&tenantid=&limit=&offset= — list users in the system. */
+export async function getUsers(opts: {
+  tenantid: number;
+  roleid?: number;
+  limit?: number;
+  offset?: number;
+}): Promise<Row[]> {
+  return toRows(
+    await hasuraGet('getusers', {
+      tenantid: opts.tenantid,
+      roleid: opts.roleid,
+      limit: opts.limit ?? 10,
+      offset: opts.offset ?? 0,
+    }),
+  );
+}
+
+/** /getapproles?configid= — all application roles for a config. */
+export async function getAppRoles(configid: number = 15): Promise<Row[]> {
+  return toRows(await hasuraGet('getapproles', { configid }));
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// ORDERS
+// ════════════════════════════════════════════════════════════════════════════
+
+/**
+ * /getorders?start=&end=&status=&limit=&offset= — detailed orders in a window.
+ * NOTE: this is a global feed (no tenant filter accepted) and `status` is required.
+ */
+export async function getOrders(opts: {
+  start: string; // ISO with time
+  end: string;
+  status: string; // e.g. 'delivered' | 'created' | 'cancelled'
+  limit?: number;
+  offset?: number;
+}): Promise<Row[]> {
+  return toRows(
+    await hasuraGet('getorders', {
+      start: startOfDay(opts.start),
+      end: endOfDay(opts.end),
+      status: opts.status,
+      limit: opts.limit ?? 10,
+      offset: opts.offset ?? 0,
+    }),
+  );
+}
+
+export interface OrderSummary {
+  total: number;
+  created: number;
+  pending: number;
+  processing: number;
+  delivered: number;
+  cancelled: number;
+  tenantid?: number;
+  tenantname?: string;
+}
+
+/** /getordersummary?tenantid=&configid=&fromdate=&todate= — aggregated order counts. */
+export async function getOrderSummary(
+  tenantid: number,
+  fromdate: string,
+  todate: string,
+  configid: number = DEFAULT_CONFIG_ID,
+): Promise<OrderSummary | null> {
+  // Workolik returns counts as { total: { aggregate: { count: N } }, ... } plus a
+  // `tenants` array. (The fiesta variant returns flat numbers.) Read both shapes.
+  const json = await hasuraGet<Row>('getordersummary/', { tenantid, fromdate, todate, configid });
+  if (!json || typeof json !== 'object') return null;
+
+  const count = (key: string): number => {
+    const node = (json as Row)[key];
+    if (node && typeof node === 'object' && 'aggregate' in (node as Row)) {
+      const agg = (node as { aggregate?: { count?: unknown } }).aggregate;
+      return n(agg?.count);
+    }
+    return n(node);
+  };
+
+  const tenants = (json as { tenants?: Row[] }).tenants;
+  const tenantRow = Array.isArray(tenants) && tenants.length ? tenants[0] : null;
+
+  return {
+    total: count('total'),
+    created: count('created'),
+    pending: count('pending'),
+    processing: count('processing'),
+    delivered: count('delivered'),
+    cancelled: count('cancelled'),
+    tenantid: tenantRow?.tenantid != null ? n(tenantRow.tenantid) : undefined,
+    tenantname: typeof tenantRow?.tenantname === 'string' ? (tenantRow.tenantname as string) : undefined,
+  };
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// TENANTS
+// ════════════════════════════════════════════════════════════════════════════
+
+/** /gettenantinfo?tenantid= — info about a tenant. */
+export async function getTenantInfo(tenantid: number): Promise<Row | null> {
+  return firstRow(await hasuraGet('gettenantinfo', { tenantid }));
+}
+
+/** /gettenantlocations?tenantid= — physical locations linked to a tenant. */
+export async function getTenantLocations(tenantid: number): Promise<Row[]> {
+  return toRows(await hasuraGet('gettenantlocations', { tenantid }));
+}
+
+/** /getcustomersbytenant?tenantid=&limit=&offset= — customers for a tenant. */
+export async function getCustomersByTenant(opts: {
+  tenantid: number;
+  limit?: number;
+  offset?: number;
+}): Promise<Row[]> {
+  return toRows(
+    await hasuraGet('getcustomersbytenant', {
+      tenantid: opts.tenantid,
+      limit: opts.limit ?? 10,
+      offset: opts.offset ?? 0,
+    }),
+  );
+}
+
+/** /gettenantcustomers?tenantid=&locationid=&limit=&offset= — customers under a tenant+location. */
+export async function getTenantCustomers(opts: {
+  tenantid: number;
+  locationid: number;
+  limit?: number;
+  offset?: number;
+}): Promise<Row[]> {
+  return toRows(
+    await hasuraGet('gettenantcustomers', {
+      tenantid: opts.tenantid,
+      locationid: opts.locationid,
+      limit: opts.limit ?? 10,
+      offset: opts.offset ?? 0,
+    }),
+  );
+}
+
+/** /gettenantdeliveries?tenantid=&status=&fromdate=&todate=&keyword=&limit=&offset= */
+export async function getTenantDeliveries(opts: {
+  tenantid: number;
+  status?: string;
+  fromdate: string; // ISO with time
+  todate: string;
+  keyword?: string;
+  limit?: number;
+  offset?: number;
+}): Promise<Row[]> {
+  return toRows(
+    await hasuraGet('gettenantdeliveries', {
+      tenantid: opts.tenantid,
+      status: opts.status,
+      fromdate: startOfDay(opts.fromdate),
+      todate: endOfDay(opts.todate),
+      keyword: opts.keyword ?? '%',
+      limit: opts.limit ?? 10,
+      offset: opts.offset ?? 0,
+    }),
+  );
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// PRODUCTS
+// ════════════════════════════════════════════════════════════════════════════
+
+/** /getproductcategories?moduleid= — root product categories for a module. */
+export async function getProductCategories(moduleid: number): Promise<Row[]> {
+  return toRows(await hasuraGet('getproductcategories', { moduleid }));
+}
+
+/** /getsubcategory?moduleid=&categoryid= — a subcategory under a root category. */
+export async function getSubcategory(moduleid: number, categoryid: number): Promise<Row[]> {
+  return toRows(await hasuraGet('getsubcategory', { moduleid, categoryid }));
+}
+
+/** /getproductsubcategories?categoryid= — all subcategories under a root category. */
+export async function getProductSubcategories(categoryid: number): Promise<Row[]> {
+  return toRows(await hasuraGet('getproductsubcategories', { categoryid }));
+}
+
+/** /getproductvariants?tenantid=&subcategoryid= — product variants for a tenant. */
+export async function getProductVariants(tenantid: number, subcategoryid: number): Promise<Row[]> {
+  return toRows(await hasuraGet('getproductvariants', { tenantid, subcategoryid }));
+}
+
+/** /getstockstatement?tenantid=&locationid=&subcategoryid=&keyword=&limit=&offset= */
+export async function getStockStatement(opts: {
+  tenantid: number;
+  locationid: number;
+  subcategoryid?: number;
+  keyword?: string;
+  limit?: number;
+  offset?: number;
+}): Promise<Row[]> {
+  return toRows(
+    await hasuraGet('getstockstatement', {
+      tenantid: opts.tenantid,
+      locationid: opts.locationid,
+      subcategoryid: opts.subcategoryid,
+      keyword: opts.keyword ?? '%',
+      limit: opts.limit ?? 10,
+      offset: opts.offset ?? 0,
+    }),
+  );
+}
+
+/** /getproductscount?tenantid=&categoryid=&subcategoryid= — available/out-of-stock counts. */
+export async function getProductsCount(opts: {
+  tenantid: number;
+  categoryid: number;
+  subcategoryid?: number;
+}): Promise<Row | null> {
+  return firstRow(
+    await hasuraGet('getproductscount', {
+      tenantid: opts.tenantid,
+      categoryid: opts.categoryid,
+      subcategoryid: opts.subcategoryid,
+    }),
+  );
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// APPS & LOCATIONS
+// ════════════════════════════════════════════════════════════════════════════
+
+/** /getapplocations — all currently active locations globally. */
+export async function getAppLocations(): Promise<Row[]> {
+  return toRows(await hasuraGet('getapplocations'));
+}
+
+/** /getapplocationconfig — global configuration for application locations. */
+export async function getAppLocationConfig(): Promise<Row[]> {
+  return toRows(await hasuraGet('getapplocationconfig'));
+}
+
+/** /getapptypes?tag= — application types grouped by a tag (e.g. 'partner', 'DELIVERY'). */
+export async function getAppTypes(tag: string): Promise<Row[]> {
+  return toRows(await hasuraGet('getapptypes', { tag }));
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// PARTNERS
+// ════════════════════════════════════════════════════════════════════════════
+
+/** /getpartners?applocationid=&partnerid=&limit=&offset= — active partners. */
+export async function getPartners(opts: {
+  applocationid: number;
+  partnerid?: number;
+  limit?: number;
+  offset?: number;
+}): Promise<Row[]> {
+  return toRows(
+    await hasuraGet('getpartners', {
+      applocationid: opts.applocationid,
+      partnerid: opts.partnerid ?? 0,
+      limit: opts.limit ?? 10,
+      offset: opts.offset ?? 0,
+    }),
+  );
+}
+
+/** /getridershifts?applocationid= — historic + active rider shift records. */
+export async function getRiderShifts(applocationid: number): Promise<Row[]> {
+  return toRows(await hasuraGet('getridershifts', { applocationid }));
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// INVOICE (used by the dashboard; not part of a public docs section)
+// ════════════════════════════════════════════════════════════════════════════
+
+export interface InvoiceInsight {
+  revenue: number;
+  profit: number;
+  raw: Row;
+}
+
+/** /getinvoiceinsight?tenantid= — revenue / financial roll-up for a tenant. */
+export async function getInvoiceInsight(tenantid: number): Promise<InvoiceInsight | null> {
+  const row = firstRow<Row>(await hasuraGet('getinvoiceinsight', { tenantid }));
+  if (!row) return null;
+  const pick = (...keys: string[]) => {
+    for (const k of keys) {
+      if (row[k] != null && row[k] !== '') return n(row[k]);
+    }
+    return 0;
+  };
+  return {
+    revenue: pick('revenue', 'totalrevenue', 'grossrevenue', 'sales', 'totalsales', 'totalamount'),
+    profit: pick('profit', 'netprofit', 'margin', 'totalprofit'),
+    raw: row,
+  };
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// DASHBOARD AGGREGATE
+// ════════════════════════════════════════════════════════════════════════════
+
+export interface DashboardKpis {
+  totalOrders: number;
+  delivered: number;
+  // null when the tenant has no invoice/revenue records (so the card can show "—"
+  // instead of a misleading ₹0).
+  todaysRevenue: number | null;
+  monthlyProfit: number | null;
+  tenantName?: string;
+}
+
+const ymd = (d: Date) =>
+  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+
+/**
+ * Pulls the four dashboard KPIs from live data for the given tenant:
+ *  - Total Orders  ← month-to-date order summary `.total`
+ *  - Delivered     ← month-to-date order summary `.delivered`
+ *  - Today's Revenue ← invoice insight revenue (null if the tenant has none)
+ *  - Monthly Profit  ← invoice insight profit (null if the tenant has none)
+ */
+export async function getDashboardKpis(tenantid: number = DEFAULT_TENANT_ID): Promise<DashboardKpis> {
+  const today = new Date();
+  const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
+
+  const [monthSummary, insight] = await Promise.all([
+    getOrderSummary(tenantid, ymd(monthStart), ymd(today)),
+    getInvoiceInsight(tenantid).catch(() => null),
+  ]);
+
+  return {
+    totalOrders: monthSummary?.total ?? 0,
+    delivered: monthSummary?.delivered ?? 0,
+    todaysRevenue: insight ? insight.revenue : null,
+    monthlyProfit: insight ? insight.profit : null,
+    tenantName: monthSummary?.tenantname,
+  };
+}
diff --git a/src/services/fiestaApi.ts b/src/services/fiestaApi.ts
new file mode 100644
index 0000000..658995e
--- /dev/null
+++ b/src/services/fiestaApi.ts
@@ -0,0 +1,462 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Fiesta REST client — the merchant-facing `live/api/v1/web/*` surface served by
+ * https://fiesta.nearle.app (documented at developer.nearledaily.com under the
+ * REST tab). This is the operational backend: order/delivery/location summaries,
+ * the deliveries board, riders, stock statements, and customers.
+ *
+ * Requests go through the Vite dev proxy at `/fiesta/*`, which forwards to
+ * `https://fiesta.nearle.app/*` (see vite.config.ts). Fiesta is CORS-enabled and
+ * needs no auth header for these read endpoints.
+ *
+ * This sits alongside `./api` (the Hasura/workolik REST surface the dashboard
+ * uses). Components should call the TanStack hooks in `./fiestaQueries`, not
+ * these functions directly.
+ */
+
+const FIESTA_BASE = '/fiesta/live/api/v1/web';
+
+/** Tenant / location scope shared by the merchant console (Ragul Stores, Coimbatore). */
+export const FIESTA_TENANT_ID = 1087;
+export const FIESTA_APPLOCATION_ID = 1;
+/** Primary outlet for this tenant — the one carrying live orders/stock. */
+export const FIESTA_PRIMARY_LOCATION_ID = 1097;
+
+export type Row = Record<string, unknown>;
+type QueryParams = Record<string, string | number | undefined | null>;
+
+async function fiestaGet<T = unknown>(endpoint: string, params: QueryParams = {}): Promise<T> {
+  const qs = new URLSearchParams();
+  Object.entries(params).forEach(([k, v]) => {
+    // Fiesta requires some params to be present-but-empty (e.g. keyword=), so we
+    // keep empty strings and only drop undefined/null.
+    if (v !== undefined && v !== null) qs.append(k, String(v));
+  });
+  const query = qs.toString();
+  const res = await fetch(`${FIESTA_BASE}/${endpoint}${query ? `?${query}` : ''}`, {
+    headers: { Accept: 'application/json' },
+  });
+  if (!res.ok) {
+    throw new Error(`Fiesta ${endpoint} failed: ${res.status} ${res.statusText}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+async function fiestaSend<T = unknown>(
+  endpoint: string,
+  method: 'POST' | 'PUT' | 'DELETE',
+  body?: unknown,
+): Promise<T> {
+  const res = await fetch(`${FIESTA_BASE}/${endpoint}`, {
+    method,
+    headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+  const json = (await res.json().catch(() => null)) as
+    | { message?: string; status?: boolean }
+    | null;
+  if (!res.ok || (json && json.status === false)) {
+    throw new Error(json?.message || `Fiesta ${endpoint} failed: ${res.status} ${res.statusText}`);
+  }
+  return json as T;
+}
+
+/**
+ * Fiesta envelopes responses as `{ code, details, message, status }`. `details`
+ * is usually an array of rows, sometimes a single object, sometimes null.
+ */
+export function toRows<T = Row>(json: unknown): T[] {
+  if (Array.isArray(json)) return json as T[];
+  if (json && typeof json === 'object') {
+    const d = (json as { details?: unknown }).details;
+    if (Array.isArray(d)) return d as T[];
+    if (d && typeof d === 'object') return [d as T];
+  }
+  return [];
+}
+
+export function firstRow<T = Row>(json: unknown): T | null {
+  const d = (json as { details?: unknown })?.details;
+  if (Array.isArray(d)) return (d.length ? (d[0] as T) : null);
+  if (d && typeof d === 'object') return d as T;
+  return null;
+}
+
+export function num(v: unknown): number {
+  const n = typeof v === 'number' ? v : Number(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+export const str = (v: unknown): string => (v == null ? '' : String(v));
+
+/** Fiesta date params want a bare `YYYY-MM-DD`. */
+export const ymd = (d: Date) =>
+  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+
+// ════════════════════════════════════════════════════════════════════════════
+// ORDERS
+// ════════════════════════════════════════════════════════════════════════════
+
+export interface FiestaOrderSummary {
+  total: number;
+  created: number;
+  pending: number;
+  processing: number;
+  delivered: number;
+  cancelled: number;
+  tenantid?: number;
+  tenantname?: string;
+}
+
+/** /orders/getordersummary?tenantid=&fromdate=&todate= — flat order counts. */
+export async function getOrderSummary(
+  tenantid: number,
+  fromdate: string,
+  todate: string,
+): Promise<FiestaOrderSummary | null> {
+  const row = firstRow<Row>(await fiestaGet('orders/getordersummary', { tenantid, fromdate, todate }));
+  if (!row) return null;
+  return {
+    total: num(row.total),
+    created: num(row.created),
+    pending: num(row.pending),
+    processing: num(row.processing),
+    delivered: num(row.delivered),
+    cancelled: num(row.cancelled),
+    tenantid: row.tenantid != null ? num(row.tenantid) : undefined,
+    tenantname: typeof row.tenantname === 'string' ? row.tenantname : undefined,
+  };
+}
+
+export interface FiestaLocationSummary {
+  locationid: number;
+  locationname: string;
+  total: number;
+  created: number;
+  pending: number;
+  processing: number;
+  delivered: number;
+  cancelled: number;
+}
+
+/** /orders/getlocationsummary?tenantid= — per-outlet order rollup. */
+export async function getLocationSummary(tenantid: number): Promise<FiestaLocationSummary[]> {
+  return toRows<Row>(await fiestaGet('orders/getlocationsummary', { tenantid })).map((r) => ({
+    locationid: num(r.locationid),
+    locationname: str(r.locationname),
+    total: num(r.total),
+    created: num(r.created),
+    pending: num(r.pending),
+    processing: num(r.processing),
+    delivered: num(r.delivered),
+    cancelled: num(r.cancelled),
+  }));
+}
+
+/** /orders/getorderinsight?tenantid= — per-location monthly order counts. */
+export async function getOrderInsight(tenantid: number): Promise<Row[]> {
+  return toRows(await fiestaGet('orders/getorderinsight', { tenantid }));
+}
+
+/** /orders/getorders?tenantid=&status=&fromdate=&todate=&pageno=&pagesize= — orders board. */
+export async function getOrders(opts: {
+  tenantid: number;
+  status: string;
+  fromdate: string;
+  todate: string;
+  pageno?: number;
+  pagesize?: number;
+}): Promise<Row[]> {
+  return toRows(
+    await fiestaGet('orders/getorders', {
+      tenantid: opts.tenantid,
+      status: opts.status,
+      fromdate: opts.fromdate,
+      todate: opts.todate,
+      pageno: opts.pageno ?? 1,
+      pagesize: opts.pagesize ?? 20,
+    }),
+  );
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// DELIVERIES
+// ════════════════════════════════════════════════════════════════════════════
+
+export interface FiestaDeliverySummary {
+  total: number;
+  created: number;
+  pending: number;
+  accepted: number;
+  arrived: number;
+  picked: number;
+  active: number;
+  delivered: number;
+  cancelled: number;
+}
+
+/** /deliveries/deliverysummary?tenantid=&applocationid=&fromdate=&todate= — dispatch counts. */
+export async function getDeliverySummary(opts: {
+  tenantid: number;
+  applocationid?: number;
+  fromdate: string;
+  todate: string;
+}): Promise<FiestaDeliverySummary | null> {
+  const row = firstRow<Row>(
+    await fiestaGet('deliveries/deliverysummary', {
+      tenantid: opts.tenantid,
+      applocationid: opts.applocationid ?? FIESTA_APPLOCATION_ID,
+      fromdate: opts.fromdate,
+      todate: opts.todate,
+    }),
+  );
+  if (!row) return null;
+  return {
+    total: num(row.total),
+    created: num(row.created),
+    pending: num(row.pending),
+    accepted: num(row.accepted),
+    arrived: num(row.arrived),
+    picked: num(row.picked),
+    active: num(row.active),
+    delivered: num(row.delivered),
+    cancelled: num(row.cancelled),
+  };
+}
+
+/** /deliveries/getdeliveries?tenantid=&fromdate=&todate= — the master deliveries board. */
+export async function getDeliveries(opts: {
+  tenantid: number;
+  fromdate: string;
+  todate: string;
+}): Promise<Row[]> {
+  return toRows(
+    await fiestaGet('deliveries/getdeliveries', {
+      tenantid: opts.tenantid,
+      fromdate: opts.fromdate,
+      todate: opts.todate,
+    }),
+  );
+}
+
+/** /deliveries/getdeliveryinsight?tenantid= — daily delivery insight. */
+export async function getDeliveryInsight(tenantid: number): Promise<Row[]> {
+  return toRows(await fiestaGet('deliveries/getdeliveryinsight', { tenantid }));
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// PARTNERS / RIDERS
+// ════════════════════════════════════════════════════════════════════════════
+
+/** /partners/getriders?applocationid=&tenantid= — active rider fleet. */
+export async function getRiders(opts: {
+  applocationid?: number;
+  tenantid: number;
+}): Promise<Row[]> {
+  return toRows(
+    await fiestaGet('partners/getriders', {
+      applocationid: opts.applocationid ?? FIESTA_APPLOCATION_ID,
+      tenantid: opts.tenantid,
+    }),
+  );
+}
+
+/** /partners/getridershifts?applocationid= — rider shift records. */
+export async function getRiderShifts(applocationid: number = FIESTA_APPLOCATION_ID): Promise<Row[]> {
+  return toRows(await fiestaGet('partners/getridershifts', { applocationid }));
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// TENANTS / CUSTOMERS
+// ════════════════════════════════════════════════════════════════════════════
+
+/** /tenants/gettenantlocations?tenantid= — outlet locations for a tenant. */
+export async function getTenantLocations(tenantid: number): Promise<Row[]> {
+  return toRows(await fiestaGet('tenants/gettenantlocations', { tenantid }));
+}
+
+/** /tenants/getalltenants?applocationid=&status=&pageno=&pagesize= — active tenants. */
+export async function getAllTenants(opts: {
+  applocationid?: number;
+  status?: string;
+  pageno?: number;
+  pagesize?: number;
+} = {}): Promise<Row[]> {
+  return toRows(
+    await fiestaGet('tenants/getalltenants', {
+      applocationid: opts.applocationid ?? FIESTA_APPLOCATION_ID,
+      status: opts.status ?? 'Active',
+      pageno: opts.pageno ?? 1,
+      pagesize: opts.pagesize ?? 20,
+    }),
+  );
+}
+
+/** /customers/gettenantcustomers?tenantid=&locationid=&pageno=&pagesize=&keyword= */
+export async function getTenantCustomers(opts: {
+  tenantid: number;
+  locationid: number;
+  keyword?: string;
+  pageno?: number;
+  pagesize?: number;
+}): Promise<Row[]> {
+  return toRows(
+    await fiestaGet('customers/gettenantcustomers', {
+      tenantid: opts.tenantid,
+      locationid: opts.locationid,
+      keyword: opts.keyword ?? '',
+      pageno: opts.pageno ?? 1,
+      pagesize: opts.pagesize ?? 20,
+    }),
+  );
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// PRODUCTS / STOCK
+// ════════════════════════════════════════════════════════════════════════════
+
+/** /products/getstockstatement?tenantid=&locationid=&subcategoryid=&keyword=&pageno=&pagesize= */
+export async function getStockStatement(opts: {
+  tenantid: number;
+  locationid: number;
+  subcategoryid?: number;
+  keyword?: string;
+  pageno?: number;
+  pagesize?: number;
+}): Promise<Row[]> {
+  return toRows(
+    await fiestaGet('products/getstockstatement', {
+      tenantid: opts.tenantid,
+      locationid: opts.locationid,
+      subcategoryid: opts.subcategoryid,
+      keyword: opts.keyword ?? '',
+      pageno: opts.pageno ?? 1,
+      pagesize: opts.pagesize ?? 50,
+    }),
+  );
+}
+
+/** /products/getproductscount?tenantid=&categoryid=&subcategoryid=&approve= */
+export async function getProductsCount(opts: {
+  tenantid: number;
+  categoryid: number;
+  subcategoryid?: number;
+}): Promise<Row | null> {
+  return firstRow(
+    await fiestaGet('products/getproductscount', {
+      tenantid: opts.tenantid,
+      categoryid: opts.categoryid,
+      subcategoryid: opts.subcategoryid,
+      approve: 1,
+    }),
+  );
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// USERS
+// ════════════════════════════════════════════════════════════════════════════
+
+/** Best-effort role label from the numeric roleid (roles aren't fully resolvable for every config). */
+export function roleName(roleid: number): string {
+  const map: Record<number, string> = {
+    0: 'Unassigned',
+    1: 'Owner',
+    2: 'Manager',
+    3: 'Admin',
+    4: 'Staff',
+    5: 'Rider',
+    6: 'Cashier',
+  };
+  return map[roleid] || `Role ${roleid}`;
+}
+
+/** /users/getallusers?roleid=&tenantid=&pageno=&pagesize=&keyword= — staff/users under a tenant. */
+export async function getAllUsers(opts: {
+  tenantid: number;
+  roleid?: number;
+  keyword?: string;
+  pageno?: number;
+  pagesize?: number;
+}): Promise<Row[]> {
+  return toRows(
+    await fiestaGet('users/getallusers', {
+      tenantid: opts.tenantid,
+      roleid: opts.roleid,
+      keyword: opts.keyword ?? '',
+      pageno: opts.pageno ?? 1,
+      pagesize: opts.pagesize ?? 50,
+    }),
+  );
+}
+
+/** /users/getusers?userid= — a single user profile. */
+export async function getUserById(userid: number): Promise<Row | null> {
+  return firstRow(await fiestaGet('users/getusers', { userid }));
+}
+
+export interface CreateUserInput {
+  firstname: string;
+  lastname?: string;
+  email: string;
+  contactno: string;
+  password: string;
+  roleid: number;
+  dialcode?: string;
+  pin?: number;
+  address?: string;
+  suburb?: string;
+  city?: string;
+  state?: string;
+  postcode?: string;
+  tenantid: number;
+  locationid?: number;
+  applocationid?: number;
+  status?: string;
+}
+
+/** POST /users/create — register a new web staff user. */
+export async function createUser(input: CreateUserInput): Promise<Row> {
+  return fiestaSend<Row>('users/create', 'POST', {
+    authname: input.email,
+    firstname: input.firstname,
+    lastname: input.lastname ?? '',
+    password: input.password,
+    email: input.email,
+    dialcode: input.dialcode ?? '+91',
+    contactno: input.contactno,
+    roleid: input.roleid,
+    pin: input.pin ?? 0,
+    address: input.address ?? '',
+    suburb: input.suburb ?? '',
+    city: input.city ?? '',
+    state: input.state ?? '',
+    postcode: input.postcode ?? '',
+    tenantid: input.tenantid,
+    locationid: input.locationid ?? 0,
+    applocationid: input.applocationid ?? FIESTA_APPLOCATION_ID,
+    status: input.status ?? 'active',
+  });
+}
+
+export interface UpdateUserInput {
+  userid: number;
+  firstname?: string;
+  lastname?: string;
+  email?: string;
+  contactno?: string;
+  address?: string;
+  suburb?: string;
+  city?: string;
+  state?: string;
+  postcode?: string;
+  status?: string;
+}
+
+/** PUT /users/update — update an existing web staff user. */
+export async function updateUser(input: UpdateUserInput): Promise<Row> {
+  return fiestaSend<Row>('users/update', 'PUT', input);
+}
diff --git a/src/services/fiestaMappers.ts b/src/services/fiestaMappers.ts
new file mode 100644
index 0000000..e76cfc3
--- /dev/null
+++ b/src/services/fiestaMappers.ts
@@ -0,0 +1,124 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Adapters that turn raw Fiesta REST rows into the display shapes the existing
+ * views already render (ProductMatrixItem, InventoryItem, CustomerOrder). Keeping
+ * the mapping here lets several views (Inventory, Operations, Reports, Orders)
+ * share one source of truth and keeps the components focused on presentation.
+ */
+
+import { ProductMatrixItem, InventoryItem, CustomerOrder } from '../types';
+import { num, str, Row } from './fiestaApi';
+
+/** Best-effort category label from the numeric category id Fiesta returns. */
+export function categoryName(categoryid: number): string {
+  const map: Record<number, string> = {
+    1: 'Food & Dining',
+    2: 'Grocery & Daily',
+    3: 'Pharmacy',
+    4: 'Retail',
+  };
+  return map[categoryid] || `Category ${categoryid}`;
+}
+
+const PLACEHOLDER_IMG =
+  'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&q=80&w=200';
+
+/** Derive a healthy/low/critical status from a closing balance. */
+function stockStatus(closing: number): InventoryItem['status'] {
+  if (closing <= 0) return 'Critical';
+  if (closing < 25) return 'Critical';
+  if (closing < 120) return 'Low Stock';
+  return 'Optimal';
+}
+
+/** stock-statement row -> catalog card. */
+export function stockRowToProduct(row: Row): ProductMatrixItem {
+  const closing = num(row.closing);
+  const cost = num(row.productcost);
+  const retail = num(row.retailprice) || cost;
+  const sold = Math.max(0, num(row.debit));
+  const status = stockStatus(closing);
+  return {
+    id: str(row.productid) || str(row.productname),
+    name: str(row.productname) || 'Unnamed product',
+    sku: `SKU-${str(row.productid)}`,
+    unitsSold: sold,
+    revenue: Math.round(sold * retail),
+    stockStatus: status === 'Optimal' ? 'Healthy' : status,
+    trend: num(row.credit) > num(row.debit) ? 'up' : num(row.debit) > 0 ? 'down' : 'flat',
+    image: str(row.productimage) || PLACEHOLDER_IMG,
+    category: categoryName(num(row.categoryid)),
+    exposure: `${str(row.productunit) || 'unit'} · ${str(row.unitvalue) || '1'}`,
+    verified: num(row.retailprice) > 0,
+  };
+}
+
+/** stock-statement row -> hub balance ledger entry. */
+export function stockRowToInventory(row: Row, locationName: string): InventoryItem {
+  const closing = num(row.closing);
+  const opening = num(row.opening);
+  return {
+    sku: `SKU-${str(row.productid)}`,
+    name: str(row.productname) || 'Unnamed product',
+    warehouse: locationName || `Location ${str(row.locationid)}`,
+    stockLevel: closing,
+    maxCapacity: Math.max(opening, closing, 100),
+    status: stockStatus(closing),
+    region: categoryName(num(row.categoryid)),
+  };
+}
+
+const ORDER_STATUS_MAP: Record<string, CustomerOrder['status']> = {
+  delivered: 'DELIVERED',
+  picked: 'OUT_FOR_DELIVERY',
+  active: 'OUT_FOR_DELIVERY',
+  arrived: 'OUT_FOR_DELIVERY',
+  accepted: 'CONFIRMED',
+  assigned: 'CONFIRMED',
+  ready: 'CONFIRMED',
+  created: 'PROCESSING',
+  pending: 'PROCESSING',
+  processing: 'PROCESSING',
+};
+
+/** Map a Fiesta delivery/order status string onto the view's status union. */
+export function mapOrderStatus(raw: string): CustomerOrder['status'] {
+  return ORDER_STATUS_MAP[str(raw).toLowerCase()] || 'PROCESSING';
+}
+
+/** Format a Fiesta timestamp (ISO or "YYYY-MM-DD HH:mm:ss") into a short time label. */
+export function shortTime(raw: unknown): string {
+  const s = str(raw);
+  if (!s) return '—';
+  const m = s.match(/(\d{1,2}):(\d{2})/);
+  if (m) return `${m[1]}:${m[2]}`;
+  return s.slice(0, 16).replace('T', ' ');
+}
+
+/** deliveries-board row -> dispatch order card. */
+export function deliveryRowToOrder(row: Row): CustomerOrder {
+  const amount = num(row.deliveryamt) || num(row.orderamount);
+  const rider = str(row.ridername) || str(row.deliveryusername) || str(row.username);
+  return {
+    id: str(row.orderid) || `DLV-${str(row.deliveryid)}`,
+    customerName: str(row.deliverycustomer) || str(row.customername) || 'Customer',
+    phone: str(row.deliverycontactno) || str(row.contactno) || '—',
+    address:
+      str(row.deliveryaddress) ||
+      str(row.Pickupaddress) ||
+      str(row.pickupaddress) ||
+      'Address unavailable',
+    items: [],
+    amount,
+    time: shortTime(row.assigntime || row.deliverydate),
+    status: mapOrderStatus(str(row.orderstatus)),
+    assignedRider: rider || 'Pending Assignment',
+    hub: str(row.pickupcustomer) || str(row.pickuplocation) || `Location ${str(row.locationid)}`,
+    itemCount: num(row.itemcount),
+    locationid: num(row.locationid)
+  };
+}
diff --git a/src/services/fiestaQueries.ts b/src/services/fiestaQueries.ts
new file mode 100644
index 0000000..89e90a2
--- /dev/null
+++ b/src/services/fiestaQueries.ts
@@ -0,0 +1,248 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * TanStack Query hooks wrapping the Fiesta REST client in `./fiestaApi`.
+ *
+ * Components call these (never fetch directly) to get caching, dedup, and
+ * loading/error state. These power the operational pages (Inventory, Orders &
+ * Deliveries, Operations, Reports, Stores/Logistics/Staffing); the Dashboard
+ * continues to use the Hasura hooks in `./queries`.
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  FIESTA_TENANT_ID,
+  FIESTA_APPLOCATION_ID,
+  FIESTA_PRIMARY_LOCATION_ID,
+  getOrderSummary,
+  getLocationSummary,
+  getOrderInsight,
+  getOrders,
+  getDeliverySummary,
+  getDeliveries,
+  getDeliveryInsight,
+  getRiders,
+  getRiderShifts,
+  getTenantLocations,
+  getAllTenants,
+  getTenantCustomers,
+  getStockStatement,
+  getProductsCount,
+  getAllUsers,
+  getUserById,
+  createUser,
+  updateUser,
+  CreateUserInput,
+} from './fiestaApi';
+
+export const fiestaKeys = {
+  orderSummary: (tenantid: number, fromdate: string, todate: string) =>
+    ['fiesta', 'orderSummary', tenantid, fromdate, todate] as const,
+  locationSummary: (tenantid: number) => ['fiesta', 'locationSummary', tenantid] as const,
+  orderInsight: (tenantid: number) => ['fiesta', 'orderInsight', tenantid] as const,
+  orders: (params: Record<string, unknown>) => ['fiesta', 'orders', params] as const,
+  deliverySummary: (params: Record<string, unknown>) => ['fiesta', 'deliverySummary', params] as const,
+  deliveries: (params: Record<string, unknown>) => ['fiesta', 'deliveries', params] as const,
+  deliveryInsight: (tenantid: number) => ['fiesta', 'deliveryInsight', tenantid] as const,
+  riders: (params: Record<string, unknown>) => ['fiesta', 'riders', params] as const,
+  riderShifts: (applocationid: number) => ['fiesta', 'riderShifts', applocationid] as const,
+  tenantLocations: (tenantid: number) => ['fiesta', 'tenantLocations', tenantid] as const,
+  allTenants: (params: Record<string, unknown>) => ['fiesta', 'allTenants', params] as const,
+  tenantCustomers: (params: Record<string, unknown>) => ['fiesta', 'tenantCustomers', params] as const,
+  stockStatement: (params: Record<string, unknown>) => ['fiesta', 'stockStatement', params] as const,
+  productsCount: (params: Record<string, unknown>) => ['fiesta', 'productsCount', params] as const,
+  users: (params: Record<string, unknown>) => ['fiesta', 'users', params] as const,
+  user: (userid: number) => ['fiesta', 'user', userid] as const,
+};
+
+// ── Orders ──────────────────────────────────────────────────────────────────
+export function useFiestaOrderSummary(tenantid: number = FIESTA_TENANT_ID, fromdate: string, todate: string) {
+  return useQuery({
+    queryKey: fiestaKeys.orderSummary(tenantid, fromdate, todate),
+    queryFn: () => getOrderSummary(tenantid, fromdate, todate),
+    enabled: Boolean(tenantid && fromdate && todate),
+  });
+}
+
+export function useFiestaLocationSummary(tenantid: number = FIESTA_TENANT_ID) {
+  return useQuery({
+    queryKey: fiestaKeys.locationSummary(tenantid),
+    queryFn: () => getLocationSummary(tenantid),
+    enabled: Boolean(tenantid),
+  });
+}
+
+export function useFiestaOrderInsight(tenantid: number = FIESTA_TENANT_ID) {
+  return useQuery({
+    queryKey: fiestaKeys.orderInsight(tenantid),
+    queryFn: () => getOrderInsight(tenantid),
+    enabled: Boolean(tenantid),
+  });
+}
+
+export function useFiestaOrders(opts: {
+  tenantid: number;
+  status: string;
+  fromdate: string;
+  todate: string;
+  pageno?: number;
+  pagesize?: number;
+}) {
+  return useQuery({
+    queryKey: fiestaKeys.orders(opts),
+    queryFn: () => getOrders(opts),
+    enabled: Boolean(opts.tenantid && opts.status && opts.fromdate && opts.todate),
+  });
+}
+
+// ── Deliveries ────────────────────────────────────────────────────────────────
+export function useFiestaDeliverySummary(opts: {
+  tenantid: number;
+  applocationid?: number;
+  fromdate: string;
+  todate: string;
+}) {
+  return useQuery({
+    queryKey: fiestaKeys.deliverySummary(opts),
+    queryFn: () => getDeliverySummary(opts),
+    enabled: Boolean(opts.tenantid && opts.fromdate && opts.todate),
+  });
+}
+
+export function useFiestaDeliveries(opts: { tenantid: number; fromdate: string; todate: string }) {
+  return useQuery({
+    queryKey: fiestaKeys.deliveries(opts),
+    queryFn: () => getDeliveries(opts),
+    enabled: Boolean(opts.tenantid && opts.fromdate && opts.todate),
+  });
+}
+
+export function useFiestaDeliveryInsight(tenantid: number = FIESTA_TENANT_ID) {
+  return useQuery({
+    queryKey: fiestaKeys.deliveryInsight(tenantid),
+    queryFn: () => getDeliveryInsight(tenantid),
+    enabled: Boolean(tenantid),
+  });
+}
+
+// ── Partners / Riders ─────────────────────────────────────────────────────────
+export function useFiestaRiders(opts: { applocationid?: number; tenantid: number }) {
+  return useQuery({
+    queryKey: fiestaKeys.riders(opts),
+    queryFn: () => getRiders(opts),
+    enabled: Boolean(opts.tenantid),
+  });
+}
+
+export function useFiestaRiderShifts(applocationid: number = FIESTA_APPLOCATION_ID) {
+  return useQuery({
+    queryKey: fiestaKeys.riderShifts(applocationid),
+    queryFn: () => getRiderShifts(applocationid),
+    enabled: Boolean(applocationid),
+  });
+}
+
+// ── Tenants / Customers ─────────────────────────────────────────────────────────
+export function useFiestaTenantLocations(tenantid: number = FIESTA_TENANT_ID) {
+  return useQuery({
+    queryKey: fiestaKeys.tenantLocations(tenantid),
+    queryFn: () => getTenantLocations(tenantid),
+    enabled: Boolean(tenantid),
+  });
+}
+
+export function useFiestaAllTenants(opts: {
+  applocationid?: number;
+  status?: string;
+  pageno?: number;
+  pagesize?: number;
+} = {}) {
+  return useQuery({
+    queryKey: fiestaKeys.allTenants(opts),
+    queryFn: () => getAllTenants(opts),
+  });
+}
+
+export function useFiestaTenantCustomers(opts: {
+  tenantid: number;
+  locationid: number;
+  keyword?: string;
+  pageno?: number;
+  pagesize?: number;
+}) {
+  return useQuery({
+    queryKey: fiestaKeys.tenantCustomers(opts),
+    queryFn: () => getTenantCustomers(opts),
+    enabled: Boolean(opts.tenantid && opts.locationid),
+  });
+}
+
+// ── Products / Stock ─────────────────────────────────────────────────────────
+export function useFiestaStockStatement(opts: {
+  tenantid: number;
+  locationid: number;
+  subcategoryid?: number;
+  keyword?: string;
+  pageno?: number;
+  pagesize?: number;
+}) {
+  return useQuery({
+    queryKey: fiestaKeys.stockStatement(opts),
+    queryFn: () => getStockStatement(opts),
+    enabled: Boolean(opts.tenantid && opts.locationid),
+  });
+}
+
+export function useFiestaProductsCount(opts: { tenantid: number; categoryid: number; subcategoryid?: number }) {
+  return useQuery({
+    queryKey: fiestaKeys.productsCount(opts),
+    queryFn: () => getProductsCount(opts),
+    enabled: Boolean(opts.tenantid && opts.categoryid),
+  });
+}
+
+// ── Users ─────────────────────────────────────────────────────────────────────
+export function useFiestaUsers(opts: {
+  tenantid: number;
+  roleid?: number;
+  keyword?: string;
+  pageno?: number;
+  pagesize?: number;
+}) {
+  return useQuery({
+    queryKey: fiestaKeys.users(opts),
+    queryFn: () => getAllUsers(opts),
+    enabled: Boolean(opts.tenantid),
+  });
+}
+
+export function useFiestaUser(userid: number) {
+  return useQuery({
+    queryKey: fiestaKeys.user(userid),
+    queryFn: () => getUserById(userid),
+    enabled: Boolean(userid),
+  });
+}
+
+/** Create a user, then refresh every users list on success. */
+export function useFiestaCreateUser() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (input: CreateUserInput) => createUser(input),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['fiesta', 'users'] }),
+  });
+}
+
+/** Update a user, then refresh every users list on success. */
+export function useFiestaUpdateUser() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (input: Parameters<typeof updateUser>[0]) => updateUser(input),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['fiesta', 'users'] }),
+  });
+}
+
+export { FIESTA_TENANT_ID, FIESTA_APPLOCATION_ID, FIESTA_PRIMARY_LOCATION_ID };
diff --git a/src/services/queries.ts b/src/services/queries.ts
new file mode 100644
index 0000000..1640217
--- /dev/null
+++ b/src/services/queries.ts
@@ -0,0 +1,283 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * TanStack Query hooks that wrap the raw API functions in `./api`.
+ *
+ * Components call these hooks (never `fetch`/the api functions directly) so they
+ * get caching, dedup, loading/error state, and refetching for free. Covers the
+ * non-mobile `/api/rest/*` catalog from developer.nearledaily.com.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import {
+  DEFAULT_TENANT_ID,
+  DEFAULT_CONFIG_ID,
+  getDashboardKpis,
+  // Users
+  getUsers,
+  getAppRoles,
+  // Orders
+  getOrders,
+  getOrderSummary,
+  // Tenants
+  getTenantInfo,
+  getTenantLocations,
+  getCustomersByTenant,
+  getTenantCustomers,
+  getTenantDeliveries,
+  // Products
+  getProductCategories,
+  getSubcategory,
+  getProductSubcategories,
+  getProductVariants,
+  getStockStatement,
+  getProductsCount,
+  // Apps & Locations
+  getAppLocations,
+  getAppLocationConfig,
+  getAppTypes,
+  // Partners
+  getPartners,
+  getRiderShifts,
+  // Invoice
+  getInvoiceInsight,
+} from './api';
+
+/** Centralized, stable query keys — keep all cache keys discoverable in one place. */
+export const queryKeys = {
+  dashboardKpis: (tenantid: number) => ['dashboardKpis', tenantid] as const,
+  // Users
+  users: (params: Record<string, unknown>) => ['users', params] as const,
+  appRoles: (configid: number) => ['appRoles', configid] as const,
+  // Orders
+  orders: (params: Record<string, unknown>) => ['orders', params] as const,
+  orderSummary: (tenantid: number, fromdate: string, todate: string, configid: number) =>
+    ['orderSummary', tenantid, fromdate, todate, configid] as const,
+  // Tenants
+  tenantInfo: (tenantid: number) => ['tenantInfo', tenantid] as const,
+  tenantLocations: (tenantid: number) => ['tenantLocations', tenantid] as const,
+  customersByTenant: (params: Record<string, unknown>) => ['customersByTenant', params] as const,
+  tenantCustomers: (params: Record<string, unknown>) => ['tenantCustomers', params] as const,
+  tenantDeliveries: (params: Record<string, unknown>) => ['tenantDeliveries', params] as const,
+  // Products
+  productCategories: (moduleid: number) => ['productCategories', moduleid] as const,
+  subcategory: (moduleid: number, categoryid: number) => ['subcategory', moduleid, categoryid] as const,
+  productSubcategories: (categoryid: number) => ['productSubcategories', categoryid] as const,
+  productVariants: (tenantid: number, subcategoryid: number) =>
+    ['productVariants', tenantid, subcategoryid] as const,
+  stockStatement: (params: Record<string, unknown>) => ['stockStatement', params] as const,
+  productsCount: (params: Record<string, unknown>) => ['productsCount', params] as const,
+  // Apps & Locations
+  appLocations: () => ['appLocations'] as const,
+  appLocationConfig: () => ['appLocationConfig'] as const,
+  appTypes: (tag: string) => ['appTypes', tag] as const,
+  // Partners
+  partners: (params: Record<string, unknown>) => ['partners', params] as const,
+  riderShifts: (applocationid: number) => ['riderShifts', applocationid] as const,
+  // Invoice
+  invoiceInsight: (tenantid: number) => ['invoiceInsight', tenantid] as const,
+};
+
+// ── Dashboard ─────────────────────────────────────────────────────────────────
+export function useDashboardKpis(tenantid: number = DEFAULT_TENANT_ID) {
+  return useQuery({
+    queryKey: queryKeys.dashboardKpis(tenantid),
+    queryFn: () => getDashboardKpis(tenantid),
+  });
+}
+
+// ── Users ───────────────────────────────────────────────────────────────────
+export function useUsers(opts: { tenantid: number; roleid?: number; limit?: number; offset?: number }) {
+  return useQuery({
+    queryKey: queryKeys.users(opts),
+    queryFn: () => getUsers(opts),
+    enabled: Boolean(opts.tenantid),
+  });
+}
+
+export function useAppRoles(configid = 15) {
+  return useQuery({ queryKey: queryKeys.appRoles(configid), queryFn: () => getAppRoles(configid) });
+}
+
+// ── Orders ────────────────────────────────────────────────────────────────────
+export function useOrders(opts: {
+  start: string;
+  end: string;
+  status: string;
+  limit?: number;
+  offset?: number;
+}) {
+  return useQuery({
+    queryKey: queryKeys.orders(opts),
+    queryFn: () => getOrders(opts),
+    enabled: Boolean(opts.start && opts.end && opts.status),
+  });
+}
+
+export function useOrderSummary(
+  tenantid: number,
+  fromdate: string,
+  todate: string,
+  configid: number = DEFAULT_CONFIG_ID,
+) {
+  return useQuery({
+    queryKey: queryKeys.orderSummary(tenantid, fromdate, todate, configid),
+    queryFn: () => getOrderSummary(tenantid, fromdate, todate, configid),
+    enabled: Boolean(tenantid && fromdate && todate),
+  });
+}
+
+// ── Tenants ───────────────────────────────────────────────────────────────────
+export function useTenantInfo(tenantid: number = DEFAULT_TENANT_ID) {
+  return useQuery({ queryKey: queryKeys.tenantInfo(tenantid), queryFn: () => getTenantInfo(tenantid) });
+}
+
+export function useTenantLocations(tenantid: number = DEFAULT_TENANT_ID) {
+  return useQuery({
+    queryKey: queryKeys.tenantLocations(tenantid),
+    queryFn: () => getTenantLocations(tenantid),
+  });
+}
+
+export function useCustomersByTenant(opts: { tenantid: number; limit?: number; offset?: number }) {
+  return useQuery({
+    queryKey: queryKeys.customersByTenant(opts),
+    queryFn: () => getCustomersByTenant(opts),
+    enabled: Boolean(opts.tenantid),
+  });
+}
+
+export function useTenantCustomers(opts: {
+  tenantid: number;
+  locationid: number;
+  limit?: number;
+  offset?: number;
+}) {
+  return useQuery({
+    queryKey: queryKeys.tenantCustomers(opts),
+    queryFn: () => getTenantCustomers(opts),
+    enabled: Boolean(opts.tenantid && opts.locationid),
+  });
+}
+
+export function useTenantDeliveries(opts: {
+  tenantid: number;
+  status?: string;
+  fromdate: string;
+  todate: string;
+  keyword?: string;
+  limit?: number;
+  offset?: number;
+}) {
+  return useQuery({
+    queryKey: queryKeys.tenantDeliveries(opts),
+    queryFn: () => getTenantDeliveries(opts),
+    enabled: Boolean(opts.tenantid && opts.fromdate && opts.todate),
+  });
+}
+
+// ── Products ──────────────────────────────────────────────────────────────────
+export function useProductCategories(moduleid: number) {
+  return useQuery({
+    queryKey: queryKeys.productCategories(moduleid),
+    queryFn: () => getProductCategories(moduleid),
+    enabled: Boolean(moduleid),
+  });
+}
+
+export function useSubcategory(moduleid: number, categoryid: number) {
+  return useQuery({
+    queryKey: queryKeys.subcategory(moduleid, categoryid),
+    queryFn: () => getSubcategory(moduleid, categoryid),
+    enabled: Boolean(moduleid && categoryid),
+  });
+}
+
+export function useProductSubcategories(categoryid: number) {
+  return useQuery({
+    queryKey: queryKeys.productSubcategories(categoryid),
+    queryFn: () => getProductSubcategories(categoryid),
+    enabled: Boolean(categoryid),
+  });
+}
+
+export function useProductVariants(tenantid: number, subcategoryid: number) {
+  return useQuery({
+    queryKey: queryKeys.productVariants(tenantid, subcategoryid),
+    queryFn: () => getProductVariants(tenantid, subcategoryid),
+    enabled: Boolean(tenantid && subcategoryid),
+  });
+}
+
+export function useStockStatement(opts: {
+  tenantid: number;
+  locationid: number;
+  subcategoryid?: number;
+  keyword?: string;
+  limit?: number;
+  offset?: number;
+}) {
+  return useQuery({
+    queryKey: queryKeys.stockStatement(opts),
+    queryFn: () => getStockStatement(opts),
+    enabled: Boolean(opts.tenantid && opts.locationid),
+  });
+}
+
+export function useProductsCount(opts: { tenantid: number; categoryid: number; subcategoryid?: number }) {
+  return useQuery({
+    queryKey: queryKeys.productsCount(opts),
+    queryFn: () => getProductsCount(opts),
+    enabled: Boolean(opts.tenantid && opts.categoryid),
+  });
+}
+
+// ── Apps & Locations ──────────────────────────────────────────────────────────
+export function useAppLocations() {
+  return useQuery({ queryKey: queryKeys.appLocations(), queryFn: () => getAppLocations() });
+}
+
+export function useAppLocationConfig() {
+  return useQuery({ queryKey: queryKeys.appLocationConfig(), queryFn: () => getAppLocationConfig() });
+}
+
+export function useAppTypes(tag: string) {
+  return useQuery({
+    queryKey: queryKeys.appTypes(tag),
+    queryFn: () => getAppTypes(tag),
+    enabled: Boolean(tag),
+  });
+}
+
+// ── Partners ──────────────────────────────────────────────────────────────────
+export function usePartners(opts: {
+  applocationid: number;
+  partnerid?: number;
+  limit?: number;
+  offset?: number;
+}) {
+  return useQuery({
+    queryKey: queryKeys.partners(opts),
+    queryFn: () => getPartners(opts),
+    enabled: Boolean(opts.applocationid),
+  });
+}
+
+export function useRiderShifts(applocationid: number) {
+  return useQuery({
+    queryKey: queryKeys.riderShifts(applocationid),
+    queryFn: () => getRiderShifts(applocationid),
+    enabled: Boolean(applocationid),
+  });
+}
+
+// ── Invoice ───────────────────────────────────────────────────────────────────
+export function useInvoiceInsight(tenantid: number = DEFAULT_TENANT_ID) {
+  return useQuery({
+    queryKey: queryKeys.invoiceInsight(tenantid),
+    queryFn: () => getInvoiceInsight(tenantid),
+  });
+}
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..121380c
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,111 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export type MainSection = 'dashboard' | 'stores' | 'inventory' | 'orders' | 'users' | 'settings' | 'reports' | 'operations';
+
+export interface KPICardData {
+  title: string;
+  value: string;
+  subtext: string;
+  trend?: string;
+  isPositive?: boolean;
+  sparkline: number[];
+  badge?: string;
+}
+
+export interface RevenueHeatmapDay {
+  day: string;
+  hours: {
+    '08:00': number;
+    '10:00': number;
+    '12:00': number;
+    '14:00': number;
+    '16:00': number;
+    '18:00': number;
+    '20:00': number;
+  };
+}
+
+export interface LeaderboardNode {
+  rank: string;
+  name: string;
+  percentage: number;
+  revenue: string;
+}
+
+export interface ProductMatrixItem {
+  id: string;
+  name: string;
+  sku: string;
+  unitsSold: number;
+  revenue: number;
+  stockStatus: 'Healthy' | 'Low Stock' | 'Critical';
+  trend: 'up' | 'flat' | 'down';
+  image: string;
+  category: string;
+  exposure: string;
+  verified: boolean;
+}
+
+export interface InventoryItem {
+  sku: string;
+  name: string;
+  warehouse: string;
+  stockLevel: number;
+  maxCapacity: number;
+  status: 'Optimal' | 'Low Stock' | 'Critical';
+  // Region/zone label. Live data supplies the outlet name; the static seed used
+  // CBE-* zone codes, so this stays a free string.
+  region: string;
+}
+
+export interface OrderItem {
+  id: string;
+  store: string;
+  amount: number;
+  time: string;
+  status: 'SHIPPED' | 'FLAGGED' | 'PROCESSING';
+}
+
+export interface ImportLog {
+  timestamp: string;
+  batchRef: string;
+  type: string;
+  source: string;
+  result: string;
+  status: 'SUCCESS' | 'FAILED';
+}
+
+export interface OperationalAlert {
+  id: string;
+  type: 'critical' | 'warning' | 'info';
+  title: string;
+  details: string;
+  time: string;
+}
+
+export interface CustomerOrder {
+  id: string;
+  customerName: string;
+  phone: string;
+  address: string;
+  items: Array<{ name: string; quantity: number | string; price: number }>;
+  amount: number;
+  time: string;
+  status: 'DELIVERED' | 'OUT_FOR_DELIVERY' | 'CONFIRMED' | 'PROCESSING';
+  assignedRider: string;
+  hub: string;
+  // Live deliveries return a line-item count without the lines themselves;
+  // when present, views show this instead of items.length.
+  itemCount?: number;
+  locationid?: number;
+}
+
+export interface RegionalPerformance {
+  region: string;
+  sales: string;
+  revenueValue: number;
+  maxTarget: number;
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..dfe0870
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,16 @@
+/// <reference types="vite/client" />
+
+declare module "*.png" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..d88f175
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..a28f03b
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,55 @@
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import {defineConfig, loadEnv} from 'vite';
+
+export default defineConfig(({mode}) => {
+  // Load all env vars (including non-VITE_ prefixed ones) so the Hasura secret
+  // stays server-side in the dev proxy and never reaches the client bundle.
+  const env = loadEnv(mode, process.cwd(), '');
+  const hasuraSecret = env.HASURA_ADMIN_SECRET || '';
+
+  return {
+    plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      },
+    },
+    server: {
+      // HMR is disabled in AI Studio via DISABLE_HMR env var.
+      // Do not modify—file watching is disabled to prevent flickering during agent edits.
+      hmr: process.env.DISABLE_HMR !== 'true',
+      // Disable file watching when DISABLE_HMR is true to save CPU during agent edits.
+      watch: process.env.DISABLE_HMR === 'true' ? null : {},
+      // Proxy Hasura REST calls so the admin secret is injected server-side
+      // (kept out of the browser bundle) and CORS is avoided. The app calls e.g.
+      // /hasura/getordersummary?... -> https://api.workolik.com/api/rest/getordersummary?...
+      proxy: {
+        '/hasura': {
+          target: 'https://api.workolik.com',
+          changeOrigin: true,
+          secure: true,
+          rewrite: (p) => p.replace(/^\/hasura/, '/api/rest'),
+          configure: (proxy) => {
+            proxy.on('proxyReq', (proxyReq) => {
+              if (hasuraSecret) {
+                proxyReq.setHeader('x-hasura-admin-secret', hasuraSecret);
+              }
+            });
+          },
+        },
+        // Proxy the Fiesta REST API (fiesta.nearle.app). It is CORS-enabled, but
+        // routing through the dev server keeps the network tab consistent with
+        // /hasura and sidesteps any preflight surprises. The app calls e.g.
+        // /fiesta/live/api/v1/web/orders/getordersummary?... -> https://fiesta.nearle.app/live/api/v1/web/...
+        '/fiesta': {
+          target: 'https://fiesta.nearle.app',
+          changeOrigin: true,
+          secure: true,
+          rewrite: (p) => p.replace(/^\/fiesta/, ''),
+        },
+      },
+    },
+  };
+});