From f7eab27cdc74cb08b2864d9c381b8e4e2fb2c7b8 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Mon, 23 Dec 2024 15:58:01 -0500
Subject: [PATCH] Fix/clean up peak hour dialog

---
 .../src/components/dashboard/StatCards.jsx    | 76 +++++++++++--------
 1 file changed, 43 insertions(+), 33 deletions(-)

diff --git a/dashboard/src/components/dashboard/StatCards.jsx b/dashboard/src/components/dashboard/StatCards.jsx
index d682f7a..7cd8367 100644
--- a/dashboard/src/components/dashboard/StatCards.jsx
+++ b/dashboard/src/components/dashboard/StatCards.jsx
@@ -87,11 +87,9 @@ const formatPercentage = (value) => {
 };
 
 const formatHour = (hour) => {
-  const hourNum = parseInt(hour);
-  if (hourNum === 0) return "12am";
-  if (hourNum === 12) return "12pm";
-  if (hourNum > 12) return `${hourNum - 12}pm`;
-  return `${hourNum}am`;
+  const date = new Date();
+  date.setHours(hour, 0, 0);
+  return date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
 };
 
 // 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),
-    orders: count,
-    percentage: (count / data[0]?.orderCount * 100) || 0
+    timestamp: hour,  // Use raw hour number for x-axis
+    orders: count
   })) || [];
 
   return (
-    <>
-      <TimeSeriesChart
-        data={hourlyData}
-        dataKey="orders"
-        name="Orders"
-        type="bar"
-        color="hsl(322.7 73.9% 64.7%)"
-      />
-      <div className="mt-8">
-        <StatGrid
-          stats={[
-            {
-              label: "Peak Hour",
-              value: formatHour(data[0]?.peakOrderHour?.hour || 0),
-              description: `${data[0]?.peakOrderHour?.count || 0} orders`
-            },
-            {
-              label: "Average Orders per Hour",
-              value: (data[0]?.orderCount / 24).toFixed(1),
-              description: "orders"
-            }
-          ]}
-        />
-      </div>
-    </>
+    <div className="h-[400px] w-full">
+      <ResponsiveContainer width="100%" height={400}>
+        <BarChart data={hourlyData} margin={{ top: 10, right: 30, left: 20, bottom: 5 }}>
+          <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+          <XAxis
+            dataKey="timestamp"
+            tickFormatter={(hour) => {
+              const date = new Date();
+              date.setHours(hour, 0, 0);
+              return date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
+            }}
+            className="text-xs"
+          />
+          <YAxis className="text-xs" />
+          <Tooltip
+            content={({ active, payload, label }) => {
+              if (!active || !payload?.length) return null;
+              const date = new Date();
+              date.setHours(label, 0, 0);
+              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>
+                  <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>
   );
 };