From c9df4b5fe1362eab0818798264aa2f0303ad9d0d Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Thu, 2 Jan 2025 16:58:28 -0500
Subject: [PATCH] Fix time formatting bug and update skeletons to match

---
 .../dashboard/MiniRealtimeAnalytics.jsx       |  95 +++++--
 .../components/dashboard/MiniSalesChart.jsx   | 268 +++++++++++-------
 .../components/dashboard/MiniStatCards.jsx    |  94 +++++-
 3 files changed, 321 insertions(+), 136 deletions(-)

diff --git a/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx b/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
index 0b0b9b4..98cbad3 100644
--- a/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
+++ b/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
@@ -78,24 +78,81 @@ const MiniRealtimeAnalytics = () => {
 
   if (loading && !basicData) {
     return (
-      <Card className="w-full bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm h-full">
-        <CardHeader className="p-4 pb-2">
-          <div className="flex justify-between items-center">
-            <CardTitle className="text-lg font-bold text-sky-100">
-              Real-Time Analytics
-            </CardTitle>
-            <Skeleton className="h-4 w-32 bg-sky-700" />
-          </div>
-        </CardHeader>
+      <div>
+        <div className="grid grid-cols-2 gap-2 mt-1 mb-2">
+          <Card className="h-[150px] bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+              <CardTitle className="text-sky-100 font-bold text-md">
+                <Skeleton className="h-4 w-24 bg-sky-700" />
+              </CardTitle>
+              <div className="relative p-2">
+                <div className="absolute inset-0 rounded-full bg-sky-300" />
+                <Skeleton className="h-5 w-5 bg-sky-700 relative rounded-full" />
+              </div>
+            </CardHeader>
+            <CardContent className="p-4 pt-0">
+              <div className="space-y-2">
+                <Skeleton className="h-8 w-20 bg-sky-700" />
+                <Skeleton className="h-4 w-32 bg-sky-700" />
+              </div>
+            </CardContent>
+          </Card>
+          <Card className="h-[150px] bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+              <CardTitle className="text-sky-100 font-bold text-md">
+                <Skeleton className="h-4 w-24 bg-sky-700" />
+              </CardTitle>
+              <div className="relative p-2">
+                <div className="absolute inset-0 rounded-full bg-sky-300" />
+                <Skeleton className="h-5 w-5 bg-sky-700 relative rounded-full" />
+              </div>
+            </CardHeader>
+            <CardContent className="p-4 pt-0">
+              <div className="space-y-2">
+                <Skeleton className="h-8 w-20 bg-sky-700" />
+                <Skeleton className="h-4 w-32 bg-sky-700" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
 
-        <CardContent className="p-4 pt-0">
-          <div className="grid grid-cols-2 gap-2 mt-1 mb-3">
-            <SkeletonSummaryCard />
-            <SkeletonSummaryCard />
-          </div>
-          <SkeletonBarChart />
-        </CardContent>
-      </Card>
+        <Card className="bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
+          <CardContent className="p-4">
+            <div className="h-[230px] relative">
+              {/* Grid lines */}
+              {[...Array(5)].map((_, i) => (
+                <div
+                  key={i}
+                  className="absolute w-full h-px bg-sky-700"
+                  style={{ top: `${(i + 1) * 20}%` }}
+                />
+              ))}
+              {/* Y-axis labels */}
+              <div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between py-4">
+                {[...Array(5)].map((_, i) => (
+                  <Skeleton key={i} className="h-3 w-6 bg-sky-700 rounded-sm" />
+                ))}
+              </div>
+              {/* X-axis labels */}
+              <div className="absolute left-8 right-4 bottom-0 flex justify-between">
+                {[...Array(6)].map((_, i) => (
+                  <Skeleton key={i} className="h-3 w-8 bg-sky-700 rounded-sm" />
+                ))}
+              </div>
+              {/* Bars */}
+              <div className="absolute inset-x-8 bottom-6 top-4 flex items-end justify-between gap-1">
+                {[...Array(24)].map((_, i) => (
+                  <div
+                    key={i}
+                    className="w-2 bg-sky-700 rounded-sm"
+                    style={{ height: `${Math.random() * 80 + 10}%` }}
+                  />
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
     );
   }
 
@@ -160,13 +217,11 @@ const MiniRealtimeAnalytics = () => {
                   <Tooltip
                     content={({ active, payload }) => {
                       if (active && payload && payload.length) {
-                        const timestamp = payload[0].payload.timestamp;
-                        const formattedTime = timestamp ? format(new Date(timestamp), "h:mm a") : "N/A";
                         return (
                           <Card className="p-2 shadow-lg bg-sky-800 border-none">
                             <CardContent className="p-0 space-y-1">
                               <p className="font-medium text-sm text-sky-100 border-b border-sky-700 pb-1 mb-1">
-                                {formattedTime}
+                                {payload[0].payload.timestamp}
                               </p>
                               <div className="flex justify-between items-center text-sm">
                                 <span className="text-sky-200">
diff --git a/dashboard/src/components/dashboard/MiniSalesChart.jsx b/dashboard/src/components/dashboard/MiniSalesChart.jsx
index acccd8c..3aa51b3 100644
--- a/dashboard/src/components/dashboard/MiniSalesChart.jsx
+++ b/dashboard/src/components/dashboard/MiniSalesChart.jsx
@@ -23,34 +23,45 @@ import { AlertCircle, TrendingUp, DollarSign, ShoppingCart, Truck, PiggyBank, Ar
 import { formatCurrency, CustomTooltip, processData, StatCard } from "./SalesChart.jsx";
 
 const SkeletonChart = () => (
-  <div className="h-[200px] w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm rounded-lg p-4">
+  <div className="h-[230px] w-full bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm rounded-lg p-4">
     <div className="h-full relative">
+      {/* Grid lines */}
       {[...Array(5)].map((_, i) => (
         <div
           key={i}
-          className="absolute w-full h-px bg-muted"
+          className="absolute w-full h-px bg-slate-500"
           style={{ top: `${(i + 1) * 20}%` }}
         />
       ))}
+      {/* Y-axis labels */}
       <div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between py-4">
         {[...Array(5)].map((_, i) => (
-          <Skeleton key={i} className="h-3 w-6 bg-muted rounded-sm" />
+          <Skeleton key={i} className="h-3 w-6 bg-slate-500 rounded-sm" />
         ))}
       </div>
+      {/* X-axis labels */}
       <div className="absolute left-8 right-4 bottom-0 flex justify-between">
         {[...Array(6)].map((_, i) => (
-          <Skeleton key={i} className="h-3 w-8 bg-muted rounded-sm" />
+          <Skeleton key={i} className="h-3 w-8 bg-slate-500 rounded-sm" />
         ))}
       </div>
+      {/* Chart lines */}
       <div className="absolute inset-x-8 bottom-6 top-4">
         <div className="h-full w-full relative">
           <div
-            className="absolute inset-0 bg-muted rounded-sm"
+            className="absolute inset-0 bg-slate-500 rounded-sm"
             style={{
               opacity: 0.5,
               clipPath: "polygon(0 50%, 100% 20%, 100% 100%, 0 100%)",
             }}
           />
+          <div
+            className="absolute inset-0 bg-slate-500 rounded-sm"
+            style={{
+              opacity: 0.3,
+              clipPath: "polygon(0 70%, 100% 40%, 100% 100%, 0 100%)",
+            }}
+          />
         </div>
       </div>
     </div>
@@ -231,6 +242,64 @@ const MiniSalesChart = ({ className = "" }) => {
     );
   }
 
+  if (loading && !data) {
+    return (
+      <div className="space-y-2">
+        {/* Stat Cards */}
+        <div className="grid grid-cols-2 gap-2">
+          <Card className="h-[150px] bg-gradient-to-br from-rose-900 to-rose-800 backdrop-blur-sm">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+              <CardTitle className="text-rose-100 font-bold text-md">
+                <Skeleton className="h-4 w-24 bg-rose-700" />
+              </CardTitle>
+              <div className="relative p-2">
+                <div className="absolute inset-0 rounded-full bg-rose-300" />
+                <Skeleton className="h-5 w-5 bg-rose-700 relative rounded-full" />
+              </div>
+            </CardHeader>
+            <CardContent className="p-4 pt-0">
+              <div className="space-y-2">
+                <Skeleton className="h-8 w-20 bg-rose-700" />
+                <div className="flex justify-between items-center">
+                  <Skeleton className="h-4 w-24 bg-rose-700" />
+                  <Skeleton className="h-4 w-12 bg-rose-700 rounded-full" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="h-[150px] bg-gradient-to-br from-indigo-900 to-indigo-800 backdrop-blur-sm">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+              <CardTitle className="text-indigo-100 font-bold text-md">
+                <Skeleton className="h-4 w-24 bg-indigo-700" />
+              </CardTitle>
+              <div className="relative p-2">
+                <div className="absolute inset-0 rounded-full bg-indigo-300" />
+                <Skeleton className="h-5 w-5 bg-indigo-700 relative rounded-full" />
+              </div>
+            </CardHeader>
+            <CardContent className="p-4 pt-0">
+              <div className="space-y-2">
+                <Skeleton className="h-8 w-20 bg-indigo-700" />
+                <div className="flex justify-between items-center">
+                  <Skeleton className="h-4 w-24 bg-indigo-700" />
+                  <Skeleton className="h-4 w-12 bg-indigo-700 rounded-full" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Chart Card */}
+        <Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm">
+          <CardContent className="p-4">
+            <SkeletonChart />
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-2">
       {/* Stat Cards */}
@@ -271,112 +340,97 @@ const MiniSalesChart = ({ className = "" }) => {
 
       {/* Chart Card */}
       <Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm">
-        {loading ? (
-          <CardContent className="p-4">
-            <SkeletonChart />
-          </CardContent>
-        ) : !data.length ? (
-          <CardContent className="p-4">
-            <div className="flex items-center justify-center h-[200px] text-stone-200">
-              <div className="text-center">
-                <TrendingUp className="h-8 w-8 mx-auto mb-2" />
-                <div className="text-sm">No sales data available</div>
-              </div>
-            </div>
-          </CardContent>
-        ) : (
-          <CardContent className="p-4">
-            <div className="h-[230px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <LineChart
-                  data={data}
-                  margin={{ top: 0, right: -30, left: -5, bottom: -10 }}
-                >
-                  <CartesianGrid strokeDasharray="3 3" className="stroke-stone-700" />
-                  <XAxis
-                    dataKey="timestamp"
-                    tickFormatter={formatXAxis}
+        <CardContent className="p-4">
+          <div className="h-[230px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart
+                data={data}
+                margin={{ top: 0, right: -30, left: -5, bottom: -10 }}
+              >
+                <CartesianGrid strokeDasharray="3 3" className="stroke-stone-700" />
+                <XAxis
+                  dataKey="timestamp"
+                  tickFormatter={formatXAxis}
+                  className="text-xs"
+                  tick={{ fill: "#f5f5f4" }}
+                />
+                {visibleMetrics.revenue && (
+                  <YAxis
+                    yAxisId="revenue"
+                    tickFormatter={(value) => formatCurrency(value, false)}
                     className="text-xs"
                     tick={{ fill: "#f5f5f4" }}
                   />
-                  {visibleMetrics.revenue && (
-                    <YAxis
-                      yAxisId="revenue"
-                      tickFormatter={(value) => formatCurrency(value, false)}
-                      className="text-xs"
-                      tick={{ fill: "#f5f5f4" }}
-                    />
-                  )}
-                  {visibleMetrics.orders && (
-                    <YAxis
-                      yAxisId="orders"
-                      orientation="right"
-                      className="text-xs"
-                      tick={{ fill: "#f5f5f4" }}
-                    />
-                  )}
-                  <Tooltip
-                    content={({ active, payload }) => {
-                      if (active && payload && payload.length) {
-                        const timestamp = new Date(payload[0].payload.timestamp);
-                        return (
-                          <Card className="p-2 shadow-lg bg-stone-800 border-none">
-                            <CardContent className="p-0 space-y-1">
-                              <p className="font-medium text-sm text-stone-100 border-b border-stone-700 pb-1 mb-1">
-                                {timestamp.toLocaleDateString([], {
-                                  weekday: "short",
-                                  month: "short",
-                                  day: "numeric"
-                                })}
-                              </p>
-                              {payload
-                                .filter(entry => visibleMetrics[entry.dataKey])
-                                .map((entry, index) => (
-                                  <div key={index} className="flex justify-between items-center text-sm">
-                                    <span className="text-stone-200">
-                                      {entry.name}:
-                                    </span>
-                                    <span className="font-medium ml-4 text-stone-100">
-                                      {entry.dataKey === 'revenue' 
-                                        ? formatCurrency(entry.value)
-                                        : entry.value.toLocaleString()}
-                                    </span>
-                                  </div>
-                                ))}
-                            </CardContent>
-                          </Card>
-                        );
-                      }
-                      return null;
-                    }}
+                )}
+                {visibleMetrics.orders && (
+                  <YAxis
+                    yAxisId="orders"
+                    orientation="right"
+                    className="text-xs"
+                    tick={{ fill: "#f5f5f4" }}
                   />
-                  {visibleMetrics.revenue && (
-                    <Line
-                      yAxisId="revenue"
-                      type="monotone"
-                      dataKey="revenue"re
-                      name="Revenue"
-                      stroke="#f43f5e"
-                      strokeWidth={2}
-                      dot={false}
-                    />
-                  )}
-                  {visibleMetrics.orders && (
-                    <Line
-                      yAxisId="orders"
-                      type="monotone"
-                      dataKey="orders"
-                      name="Orders"
-                      stroke="#6366f1"
-                      strokeWidth={2}
-                      dot={false}
-                    />
-                  )}
-                </LineChart>
-              </ResponsiveContainer>
-            </div>
-          </CardContent>
-        )}
+                )}
+                <Tooltip
+                  content={({ active, payload }) => {
+                    if (active && payload && payload.length) {
+                      const timestamp = new Date(payload[0].payload.timestamp);
+                      return (
+                        <Card className="p-2 shadow-lg bg-stone-800 border-none">
+                          <CardContent className="p-0 space-y-1">
+                            <p className="font-medium text-sm text-stone-100 border-b border-stone-700 pb-1 mb-1">
+                              {timestamp.toLocaleDateString([], {
+                                weekday: "short",
+                                month: "short",
+                                day: "numeric"
+                              })}
+                            </p>
+                            {payload
+                              .filter(entry => visibleMetrics[entry.dataKey])
+                              .map((entry, index) => (
+                                <div key={index} className="flex justify-between items-center text-sm">
+                                  <span className="text-stone-200">
+                                    {entry.name}:
+                                  </span>
+                                  <span className="font-medium ml-4 text-stone-100">
+                                    {entry.dataKey === 'revenue' 
+                                      ? formatCurrency(entry.value)
+                                      : entry.value.toLocaleString()}
+                                  </span>
+                                </div>
+                              ))}
+                          </CardContent>
+                        </Card>
+                      );
+                    }
+                    return null;
+                  }}
+                />
+                {visibleMetrics.revenue && (
+                  <Line
+                    yAxisId="revenue"
+                    type="monotone"
+                    dataKey="revenue"re
+                    name="Revenue"
+                    stroke="#f43f5e"
+                    strokeWidth={2}
+                    dot={false}
+                  />
+                )}
+                {visibleMetrics.orders && (
+                  <Line
+                    yAxisId="orders"
+                    type="monotone"
+                    dataKey="orders"
+                    name="Orders"
+                    stroke="#6366f1"
+                    strokeWidth={2}
+                    dot={false}
+                  />
+                )}
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </CardContent>
       </Card>
     </div>
   );
diff --git a/dashboard/src/components/dashboard/MiniStatCards.jsx b/dashboard/src/components/dashboard/MiniStatCards.jsx
index aaac8e4..3bbc7f2 100644
--- a/dashboard/src/components/dashboard/MiniStatCards.jsx
+++ b/dashboard/src/components/dashboard/MiniStatCards.jsx
@@ -350,15 +350,91 @@ const MiniStatCards = ({
 
   if (loading && !stats) {
     return (
-      <Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
-        <CardContent className="pb-2">
-          <div className="grid grid-cols-4 gap-2">
-            {[...Array(4)].map((_, i) => (
-              <SkeletonCard key={i} />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
+      <div className="grid grid-cols-4 gap-2">
+        <Card className="h-[150px] bg-gradient-to-br from-emerald-900 to-emerald-800 backdrop-blur-sm">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+            <CardTitle className="text-emerald-100 font-bold text-md">
+              <Skeleton className="h-4 w-24 bg-emerald-700" />
+            </CardTitle>
+            <div className="relative p-2">
+              <div className="absolute inset-0 rounded-full bg-emerald-300" />
+              <Skeleton className="h-5 w-5 bg-emerald-700 relative rounded-full" />
+            </div>
+          </CardHeader>
+          <CardContent className="p-4 pt-0">
+            <div className="space-y-2">
+              <Skeleton className="h-8 w-20 bg-emerald-700" />
+              <div className="flex justify-between items-center">
+                <Skeleton className="h-4 w-24 bg-emerald-700" />
+                <Skeleton className="h-4 w-12 bg-emerald-700 rounded-full" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="h-[150px] bg-gradient-to-br from-blue-900 to-blue-800 backdrop-blur-sm">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+            <CardTitle className="text-blue-100 font-bold text-md">
+              <Skeleton className="h-4 w-24 bg-blue-700" />
+            </CardTitle>
+            <div className="relative p-2">
+              <div className="absolute inset-0 rounded-full bg-blue-300" />
+              <Skeleton className="h-5 w-5 bg-blue-700 relative rounded-full" />
+            </div>
+          </CardHeader>
+          <CardContent className="p-4 pt-0">
+            <div className="space-y-2">
+              <Skeleton className="h-8 w-20 bg-blue-700" />
+              <div className="flex justify-between items-center">
+                <Skeleton className="h-4 w-24 bg-blue-700" />
+                <Skeleton className="h-4 w-12 bg-blue-700 rounded-full" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="h-[150px] bg-gradient-to-br from-violet-900 to-violet-800 backdrop-blur-sm">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+            <CardTitle className="text-violet-100 font-bold text-md">
+              <Skeleton className="h-4 w-24 bg-violet-700" />
+            </CardTitle>
+            <div className="relative p-2">
+              <div className="absolute inset-0 rounded-full bg-violet-300" />
+              <Skeleton className="h-5 w-5 bg-violet-700 relative rounded-full" />
+            </div>
+          </CardHeader>
+          <CardContent className="p-4 pt-0">
+            <div className="space-y-2">
+              <Skeleton className="h-8 w-20 bg-violet-700" />
+              <div className="flex justify-between items-center">
+                <Skeleton className="h-4 w-24 bg-violet-700" />
+                <Skeleton className="h-4 w-12 bg-violet-700 rounded-full" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="h-[150px] bg-gradient-to-br from-orange-900 to-orange-800 backdrop-blur-sm">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+            <CardTitle className="text-orange-100 font-bold text-md">
+              <Skeleton className="h-4 w-24 bg-orange-700" />
+            </CardTitle>
+            <div className="relative p-2">
+              <div className="absolute inset-0 rounded-full bg-orange-300" />
+              <Skeleton className="h-5 w-5 bg-orange-700 relative rounded-full" />
+            </div>
+          </CardHeader>
+          <CardContent className="p-4 pt-0">
+            <div className="space-y-2">
+              <Skeleton className="h-8 w-20 bg-orange-700" />
+              <div className="flex justify-between items-center">
+                <Skeleton className="h-4 w-24 bg-orange-700" />
+                <Skeleton className="h-4 w-12 bg-orange-700 rounded-full" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
     );
   }