-
@@ -218,78 +490,88 @@ export default function OrdersDashboard() {
- {orders.map((order) => (
-
Orders Dashboard
+ {/* Header Section */} +
+
+
+ {/* Orders Chart */}
+
+
+
+
+
+ {/* Metrics Grid */}
+ Localmart Dashboard
+
+ {/* Pending Orders */}
+
+
+
+
+ {/* Total Orders */}
+
+
+
+
+ Pending Orders
+{metrics.pendingOrders}
+
+
+
+ {/* Average Order Value */}
+
+
+
+
+ Total Orders
+{metrics.totalOrders}
+
+
+
+ {/* Total Revenue */}
+
+
+
+
+ Avg. Order Value
+${metrics.avgOrderValue.toFixed(2)}
+
+
+
+
+
+
+ Total Revenue
+${metrics.totalRevenue.toFixed(2)}
+
+
+
+ {/* Filters Section */}
+
+
+ Daily Orders by Store (Last 30 Days)
+
+
+
+
+
+
+
+
+ {/* Results Summary */}
+
+
+
+ {/* Status Filter */}
+
+
+
+
+ {/* Search */}
+
+
+ Filter by Status
+
+
+
+
+
+ {Object.entries(statusLabels).map(([value, label]) => (
+
+ ))}
+
+
+
+ Search Orders
+ setSearchTerm(e.target.value)} + className="w-full px-4 py-2 rounded-lg border border-[#2A9D8F]/20 bg-white focus:ring-2 focus:ring-[#2A9D8F] focus:border-transparent" + /> +
+ Showing {filteredOrders.length} {filteredOrders.length === 1 ? 'order' : 'orders'}
+ {selectedStatuses.size < Object.keys(statusLabels).length &&
+ ` with status${selectedStatuses.size === 1 ? '' : 'es'}: ${Array.from(selectedStatuses).map(s => statusLabels[s as keyof typeof statusLabels]).join(', ')}`}
+ {searchTerm && ` matching "${searchTerm}"`}
+
+
+ {/* Orders Table */}
| - #{order.id.slice(-6)} - | -- {formatDateTime(order.created)} - | -- {order.customer_name} - | -- {order.customer_phone || '-'} - | -
- {order.delivery_address ? (
- <>
-
- {order.delivery_address.street_address.filter(Boolean).join(', ')}
-
-
- {order.delivery_address.city}, {order.delivery_address.state} {order.delivery_address.zip_code}
-
-
- ) : (
- No address available
- )}
- |
-
-
-
- {statusLabels[order.status as keyof typeof statusLabels]}
+ {filteredOrders.map((order) => {
+ // Get the first store's index for coloring
+ const storeIndex = calculateDailyOrderCounts(orders).stores
+ .findIndex(s => s.id === order.stores[0]?.store.id);
+
+ return (
+
+
+ #{order.id.slice(-6)}
+ |
+
+ {formatDateTime(order.created)}
+ |
+
+ {order.delivery_address?.customer_name || '-'}
+ |
+
+ {order.delivery_address?.customer_phone || '-'}
+ |
+
+ {order.delivery_address ? (
+ <>
+ |
+
+ {order.delivery_address.street_address.filter(Boolean).join(', ')}
+
+
+ {order.delivery_address.city}, {order.delivery_address.state} {order.delivery_address.zip_code}
+
+
+ ) : (
+ No address available
+ )}
+
+ |
+
+
+ {statusLabels[order.status as keyof typeof statusLabels]}
+
+
+
+
+
+ {paymentStatusLabels[order.payment_status as keyof typeof paymentStatusLabels]}
- |
+
+ |
-
+ {order.stores.map((store) => (
+
-
+
))}
-
- {store.store.name}
+ {store.items.map((item) => (
+
+ {item.quantity}x {item.name} (${item.price.toFixed(2)})
+
+ ))}
+
-
- {paymentStatusLabels[order.payment_status as keyof typeof paymentStatusLabels]}
-
- |
-
- |
-
- {order.stores.map((store) => (
-
-
-
- ))}
- {store.store.name}
- {store.items.map((item) => (
-
- {item.quantity}x {item.name} (${item.price.toFixed(2)})
-
- ))}
-
- ${order.total_amount.toFixed(2)}
- |
- |
+ + ${order.total_amount.toFixed(2)} + | +