+
+ {businessHours.map(d => {
+ const heightPct = (d.orderCount / maxCount) * 100;
+ const isPeak = d.orderCount === maxCount && maxCount > 0;
+ return (
+
+
0 ? 5 : 0)}%` }}
+ />
+ {/* Tooltip */}
+
+
+ {d.orderCount} orders
+ {d.averageWaitMinutes > 0 && (
+ · {d.averageWaitMinutes}m avg
+ )}
+
+
+
+
+ {formatHour(d.hour)}
+
+
+ );
+ })}
+
+
+ );
+}
+
+function ActiveOrderRow({
+ order,
+ onStatusChange,
+}: {
+ order: ActiveOrderInfo;
+ onStatusChange: (id: number, status: OrderStatus) => void;
+}) {
+ const statusClass = STATUS_COLORS[order.status] ?? '';
+
+ return (
+
+ | #{order.orderId} |
+ {order.customerName || '—'} |
+
+
+ {STATUS_EMOJI[order.status]} {order.status}
+
+ |
+ {order.orderType} |
+ {order.elapsedMinutes} min |
+ {order.iceCreamCount} item(s) |
+
+
+ {order.status === 'Pending' && (
+
+ )}
+ {order.status === 'InProgress' && (
+
+ )}
+ {(order.status === 'Pending' || order.status === 'InProgress') && (
+
+ )}
+
+ |
+
+ );
+}
+
+const ManagementDashboard: React.FC = () => {
+ const [queueStats, setQueueStats] = useState
(null);
+ const [peakHours, setPeakHours] = useState([]);
+ const [history, setHistory] = useState([]);
+ const [historyDays, setHistoryDays] = useState(30);
+ const [peakDays, setPeakDays] = useState(7);
+ const [exportDays, setExportDays] = useState(30);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [exporting, setExporting] = useState(false);
+ const [lastRefresh, setLastRefresh] = useState(new Date());
+
+ const loadData = useCallback(async () => {
+ try {
+ setError(null);
+ const [stats, peaks, hist] = await Promise.all([
+ getQueueStats(),
+ getPeakHours(peakDays),
+ getHistoricalMetrics(historyDays),
+ ]);
+ setQueueStats(stats);
+ setPeakHours(peaks);
+ setHistory(hist);
+ setLastRefresh(new Date());
+ } catch {
+ setError('Unable to load dashboard data. Is the backend running?');
+ } finally {
+ setLoading(false);
+ }
+ }, [peakDays, historyDays]);
+
+ useEffect(() => {
+ loadData();
+ const interval = setInterval(loadData, AUTO_REFRESH_INTERVAL_MS);
+ return () => clearInterval(interval);
+ }, [loadData]);
+
+ const handleStatusChange = async (orderId: number, status: OrderStatus) => {
+ try {
+ await updateOrderStatus(orderId, status);
+ await loadData();
+ } catch {
+ setError('Failed to update order status.');
+ }
+ };
+
+ const todayRevenue = useMemo(() => {
+ const todayPrefix = new Date().toISOString().slice(0, 10);
+ return history.find(d => d.date.startsWith(todayPrefix))?.totalRevenue ?? 0;
+ }, [history]);
+
+ const handleExport = async () => {
+ setExporting(true);
+ try {
+ await exportOrdersCsv(exportDays);
+ } catch {
+ setError('CSV export failed.');
+ } finally {
+ setExporting(false);
+ }
+ };
+
+ if (loading) {
+ return (
+
+
+
🍦
+
Loading dashboard…
+
+
+ {/* Header */}
+
+
+
+ 📊 Management Dashboard
+
+
+ Last updated: {lastRefresh.toLocaleTimeString()} · Auto-refreshes every 30s
+
+
+
+
+
+
+
+ {error && (
+
+ ⚠️ {error}
+
+ )}
+
+ {/* KPI Cards */}
+ {queueStats && (
+
+
+
In Queue
+
{queueStats.totalInQueue}
+
+ {queueStats.pendingCount} pending · {queueStats.inProgressCount} in progress
+
+
+
+
Avg Prep Time
+
+ {queueStats.averagePrepTimeMinutes}
+ min
+
+
Last 24 hours
+
+
+
Est. Wait (new)
+
+ {queueStats.estimatedWaitMinutes}
+ min
+
+
Based on current queue
+
+
+
Today's Revenue
+
+ ${todayRevenue.toFixed(2)}
+
+
Completed orders
+
+
+ )}
+
+ {/* Active Orders */}
+
+
+
🍦 Active Order Queue
+ {queueStats && (
+
+ {queueStats.totalInQueue} order(s)
+
+ )}
+
+ {queueStats && queueStats.activeOrders.length > 0 ? (
+
+
+
+
+ | Order |
+ Customer |
+ Status |
+ Type |
+ Elapsed |
+ Items |
+ Actions |
+
+
+
+ {queueStats.activeOrders.map(order => (
+
+ ))}
+
+
+
+ ) : (
+
+
🎉
+
No active orders right now!
+
+ )}
+
+
+ {/* Peak Hours Chart */}
+
+
+
📈 Peak Hours
+
+
+ {peakHours.length > 0 ? (
+
+ ) : (
+
No data available yet.
+ )}
+
+ 🟠 Peak hour highlighted in orange
+
+
+
+ {/* Historical Metrics Table */}
+
+
+
📅 Historical Performance
+
+
+ {history.length > 0 ? (
+
+
+
+
+ | Date |
+ Total Orders |
+ Completed |
+ Avg Prep (min) |
+ Revenue |
+
+
+
+ {history.map(day => (
+
+ |
+ {new Date(day.date).toLocaleDateString(undefined, {
+ weekday: 'short',
+ month: 'short',
+ day: 'numeric',
+ })}
+ |
+ {day.totalOrders} |
+ {day.completedOrders} |
+
+ {day.averagePrepTimeMinutes > 0 ? `${day.averagePrepTimeMinutes}` : '—'}
+ |
+
+ ${day.totalRevenue.toFixed(2)}
+ |
+
+ ))}
+
+
+
+ ) : (
+
No historical data available.
+ )}
+
+
+ {/* CSV Export */}
+
+
📤 Export Report
+
+
+
+
+ Includes order ID, customer, status, prep time and revenue data.
+
+
+
+