Fix/clean up peak hour dialog

dashboard/src/components/dashboard/StatCards.jsx

@@ -87,11 +87,9 @@ const formatPercentage = (value) => {
 };
 
 const formatHour = (hour) => {
-  const hourNum = parseInt(hour);
+  const date = new Date();
-  if (hourNum === 0) return "12am";
+  date.setHours(hour, 0, 0);
-  if (hourNum === 12) return "12pm";
+  return date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
-  if (hourNum > 12) return `${hourNum - 12}pm`;
-  return `${hourNum}am`;
 };
 
 // Reusable chart components
@@ -596,38 +594,50 @@ const OrderTypeDetails = ({ data, type }) => {
 };
 
 const PeakHourDetails = ({ data }) => {
+  if (!data?.length) return <div className="text-muted-foreground">No data available for the selected time range.</div>;
+
   const hourlyData = data[0]?.hourlyOrders?.map((count, hour) => ({
-    hour: formatHour(hour),
+    timestamp: hour,  // Use raw hour number for x-axis
-    orders: count,
+    orders: count
-    percentage: (count / data[0]?.orderCount * 100) || 0
   })) || [];
 
   return (
-    <>
+    <div className="h-[400px] w-full">
-      <TimeSeriesChart
+      <ResponsiveContainer width="100%" height={400}>
-        data={hourlyData}
+        <BarChart data={hourlyData} margin={{ top: 10, right: 30, left: 20, bottom: 5 }}>
-        dataKey="orders"
+          <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-        name="Orders"
+          <XAxis
-        type="bar"
+            dataKey="timestamp"
-        color="hsl(322.7 73.9% 64.7%)"
+            tickFormatter={(hour) => {
-      />
+              const date = new Date();
-      <div className="mt-8">
+              date.setHours(hour, 0, 0);
-        <StatGrid
+              return date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
-          stats={[
+            }}
-            {
+            className="text-xs"
-              label: "Peak Hour",
+          />
-              value: formatHour(data[0]?.peakOrderHour?.hour || 0),
+          <YAxis className="text-xs" />
-              description: `${data[0]?.peakOrderHour?.count || 0} orders`
+          <Tooltip
-            },
+            content={({ active, payload, label }) => {
-            {
+              if (!active || !payload?.length) return null;
-              label: "Average Orders per Hour",
+              const date = new Date();
-              value: (data[0]?.orderCount / 24).toFixed(1),
+              date.setHours(label, 0, 0);
-              description: "orders"
+              const time = date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
-            }
+              return (
-          ]}
+                <div className="bg-background border rounded-lg shadow-lg p-3">
-        />
+                  <p className="font-medium">{time}</p>
-      </div>
+                  <p className="text-sm">Orders: {payload[0].value}</p>
-    </>
+                </div>
+              );
+            }}
+          />
+          <Bar
+            dataKey="orders"
+            name="Orders"
+            fill="hsl(322.7 73.9% 52.4%)"
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
   );
 };