"use client"; import { Check, ClipboardCheck, Clock3, MapPin, Navigation, Package, PackageCheck, RefreshCw, Search, Truck, } from "lucide-react"; import { FormEvent, useCallback, useEffect, useMemo, useState } from "react"; import { useTenant } from "@/components/tenant-provider"; type DeliveryOrder = { id: number; orderNumber: string; trackingId: string; customerName: string; phone: string; address: string; city: string; pincode: string; status: string; estimatedDelivery: string; items: Array<{ id: number; quantity: number }>; }; const deliveryStatuses = [ ["packed", "Parcel picked up"], ["shipped", "In transit"], ["out_for_delivery", "Out for delivery"], ["delivered", "Delivered"], ]; export default function DeliveryDashboard() { const { tenant } = useTenant(); const [orders, setOrders] = useState([]); const [query, setQuery] = useState(""); const [selected, setSelected] = useState(null); const [status, setStatus] = useState("shipped"); const [location, setLocation] = useState(`${tenant.city || tenant.brandName} Delivery Hub`); const [note, setNote] = useState(""); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [toast, setToast] = useState(""); const load = useCallback(async () => { setLoading(true); try { const response = await fetch("/api/orders"); const data = (await response.json()) as { orders?: DeliveryOrder[] }; setOrders((data.orders ?? []).filter((order) => order.status !== "cancelled")); } finally { setLoading(false); } }, []); useEffect(() => { void load(); }, [load]); useEffect(() => { if (!toast) return; const timer = window.setTimeout(() => setToast(""), 2300); return () => window.clearTimeout(timer); }, [toast]); const visible = useMemo(() => { const term = query.toLowerCase(); return orders.filter((order) => !term || order.trackingId.toLowerCase().includes(term) || order.orderNumber.toLowerCase().includes(term) || order.customerName.toLowerCase().includes(term) || order.city.toLowerCase().includes(term)); }, [orders, query]); async function postUpdate(event: FormEvent) { event.preventDefault(); if (!selected) return; setSaving(true); try { const response = await fetch(`/api/orders/${selected.trackingId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ status, location, note }), }); if (!response.ok) throw new Error(); setOrders((current) => current.map((order) => order.id === selected.id ? { ...order, status } : order)); setSelected((current) => current ? { ...current, status } : current); setNote(""); setToast(`Scan posted for ${selected.trackingId}`); } catch { setToast("Update failed. Please try again."); } finally { setSaving(false); } } const activeCount = orders.filter((order) => !["delivered", "confirmed"].includes(order.status)).length; const outCount = orders.filter((order) => order.status === "out_for_delivery").length; const deliveredCount = orders.filter((order) => order.status === "delivered").length; return (
{tenant.brandName} Express

Delivery control tower

Scan, route and complete customer deliveries.

{[[Package, "Ready for pickup", orders.filter((o) => ["confirmed", "packed"].includes(o.status)).length, "bg-blue-50 text-blue-600"], [Truck, "In transit", activeCount, "bg-violet-50 text-violet-600"], [Navigation, "Out for delivery", outCount, "bg-orange-50 text-orange-600"], [PackageCheck, "Delivered", deliveredCount, "bg-green-50 text-green-600"]].map(([Icon, label, value, style]) => { const CardIcon = Icon as React.ElementType; return

{String(value)}

{String(label)}

; })}

Shipment queue

Select a parcel to post a scan

setQuery(event.target.value)} className="h-9 w-56 rounded-lg border border-slate-200 pl-9 pr-3 text-xs outline-none focus:border-blue-500" placeholder="Tracking ID or customer" />
{loading ?
Loading delivery jobs…
: visible.length === 0 ?

No shipments found

Orders ready for dispatch will appear here.

: visible.map((order) => )}