From 42f5033173b2dfe5081363c2279315396c516ba5 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Wed, 1 Jan 2025 14:08:50 -0500
Subject: [PATCH] Remove scrollbars and last updated

---
 dashboard/src/App.jsx                         |   4 +-
 .../components/dashboard/MiniStatCards.jsx    | 355 +++++++++---------
 2 files changed, 185 insertions(+), 174 deletions(-)

diff --git a/dashboard/src/App.jsx b/dashboard/src/App.jsx
index d983ed4..a5ef211 100644
--- a/dashboard/src/App.jsx
+++ b/dashboard/src/App.jsx
@@ -63,7 +63,7 @@ const PinProtectedLayout = ({ children }) => {
 // Small Layout
 const SmallLayout = () => {
   const DATETIME_SCALE = 2;
-  const STATS_SCALE = 1.6;
+  const STATS_SCALE = 1.65;
   
   return (
     <div className="min-h-screen w-screen">
@@ -80,7 +80,7 @@ const SmallLayout = () => {
               width: `${100/DATETIME_SCALE}%`,
             }}
           >
-            <DateTimeWeatherDisplay />
+            <DateTimeWeatherDisplay scaleFactor={DATETIME_SCALE} />
           </div>
         </div>
 
diff --git a/dashboard/src/components/dashboard/MiniStatCards.jsx b/dashboard/src/components/dashboard/MiniStatCards.jsx
index 5ce5354..8f02268 100644
--- a/dashboard/src/components/dashboard/MiniStatCards.jsx
+++ b/dashboard/src/components/dashboard/MiniStatCards.jsx
@@ -32,7 +32,12 @@ import {
   Loader2,
 } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from "@/components/ui/tooltip";
 import {
   Table,
   TableBody,
@@ -147,7 +152,7 @@ const MiniStatCards = ({
   endDate,
   title = "Quick Stats",
   description = "",
-  compact = false
+  compact = false,
 }) => {
   const [stats, setStats] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -176,8 +181,10 @@ const MiniStatCards = ({
   }, []);
 
   const calculateRevenueTrend = useCallback(() => {
-    if (!stats?.prevPeriodRevenue && stats?.prevPeriodRevenue !== 0) return null;
-    const currentRevenue = stats.periodProgress < 100 ? stats.projectedRevenue : stats.revenue;
+    if (!stats?.prevPeriodRevenue && stats?.prevPeriodRevenue !== 0)
+      return null;
+    const currentRevenue =
+      stats.periodProgress < 100 ? stats.projectedRevenue : stats.revenue;
     const prevRevenue = stats.prevPeriodRevenue;
 
     if (!currentRevenue || !prevRevenue) return null;
@@ -213,8 +220,11 @@ const MiniStatCards = ({
         setLoading(true);
         setStats(null);
 
-        const params = timeRange === "custom" ? { startDate, endDate } : { timeRange };
-        const response = await axios.get("/api/klaviyo/events/stats", { params });
+        const params =
+          timeRange === "custom" ? { startDate, endDate } : { timeRange };
+        const response = await axios.get("/api/klaviyo/events/stats", {
+          params,
+        });
 
         if (!isMounted) return;
 
@@ -248,8 +258,11 @@ const MiniStatCards = ({
 
       try {
         setProjectionLoading(true);
-        const params = timeRange === "custom" ? { startDate, endDate } : { timeRange };
-        const response = await axios.get("/api/klaviyo/events/projection", { params });
+        const params =
+          timeRange === "custom" ? { startDate, endDate } : { timeRange };
+        const response = await axios.get("/api/klaviyo/events/projection", {
+          params,
+        });
 
         if (!isMounted) return;
         setProjection(response.data);
@@ -275,8 +288,12 @@ const MiniStatCards = ({
     const interval = setInterval(async () => {
       try {
         const [statsResponse, projectionResponse] = await Promise.all([
-          axios.get("/api/klaviyo/events/stats", { params: { timeRange: "today" } }),
-          axios.get("/api/klaviyo/events/projection", { params: { timeRange: "today" } }),
+          axios.get("/api/klaviyo/events/stats", {
+            params: { timeRange: "today" },
+          }),
+          axios.get("/api/klaviyo/events/projection", {
+            params: { timeRange: "today" },
+          }),
         ]);
 
         setStats(statsResponse.data.stats);
@@ -291,26 +308,29 @@ const MiniStatCards = ({
   }, [timeRange]);
 
   // Add function to fetch detail data
-  const fetchDetailData = useCallback(async (metric) => {
-    if (detailData[metric]) return;
+  const fetchDetailData = useCallback(
+    async (metric) => {
+      if (detailData[metric]) return;
 
-    setDetailDataLoading((prev) => ({ ...prev, [metric]: true }));
-    try {
-      const response = await axios.get("/api/klaviyo/events/stats/details", {
-        params: {
-          timeRange: "last30days",
-          metric,
-          daily: true,
-        },
-      });
+      setDetailDataLoading((prev) => ({ ...prev, [metric]: true }));
+      try {
+        const response = await axios.get("/api/klaviyo/events/stats/details", {
+          params: {
+            timeRange: "last30days",
+            metric,
+            daily: true,
+          },
+        });
 
-      setDetailData((prev) => ({ ...prev, [metric]: response.data.stats }));
-    } catch (error) {
-      console.error(`Error fetching detail data for ${metric}:`, error);
-    } finally {
-      setDetailDataLoading((prev) => ({ ...prev, [metric]: false }));
-    }
-  }, [detailData]);
+        setDetailData((prev) => ({ ...prev, [metric]: response.data.stats }));
+      } catch (error) {
+        console.error(`Error fetching detail data for ${metric}:`, error);
+      } finally {
+        setDetailDataLoading((prev) => ({ ...prev, [metric]: false }));
+      }
+    },
+    [detailData]
+  );
 
   // Add effect to load detail data when metric is selected
   useEffect(() => {
@@ -323,7 +343,7 @@ const MiniStatCards = ({
   useEffect(() => {
     // Preload all detail data when component mounts
     const metrics = ["revenue", "orders", "average_order", "shipping"];
-    metrics.forEach(metric => {
+    metrics.forEach((metric) => {
       fetchDetailData(metric);
     });
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -331,7 +351,6 @@ const MiniStatCards = ({
   if (loading && !stats) {
     return (
       <Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
-        
         <CardContent className="p-4 pt-0">
           <div className="grid grid-cols-2 gap-2">
             {[...Array(4)].map((_, i) => (
@@ -360,156 +379,148 @@ const MiniStatCards = ({
   const aovTrend = calculateAOVTrend();
 
   return (
-   <>
-        <div className="flex justify-between items-center">
-          <div>
-           
-            {lastUpdate && !loading && (
-              <CardDescription className="text-xs">
-                Last updated {lastUpdate.toFormat("h:mm a")}
-                {projection?.confidence > 0 && !projectionLoading && (
-                  <TooltipProvider>
-                    <Tooltip delayDuration={300}>
-                      <TooltipTrigger asChild>
-                        <span className="ml-1 text-muted-foreground">
-                          ({Math.round(projection.confidence * 100)}%)
-                        </span>
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>Confidence level of revenue projection</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+    <>
+      <div className="grid grid-cols-4 gap-2">
+        <StatCard
+          title="Total Revenue"
+          value={formatCurrency(stats?.revenue || 0)}
+          description={
+            stats?.periodProgress < 100 ? (
+              <div className="flex items-center gap-1 text-sm">
+                <span>Proj: </span>
+                {projectionLoading ? (
+                  <Skeleton className="h-4 w-15" />
+                ) : (
+                  formatCurrency(
+                    projection?.projectedRevenue || stats.projectedRevenue
+                  )
                 )}
-              </CardDescription>
-            )}
-          </div>
-          
-         
-        </div>
-     
-        <div className="grid grid-cols-4 gap-2">
-          <StatCard
-            title="Total Revenue"
-            value={formatCurrency(stats?.revenue || 0)}
-            description={
-              stats?.periodProgress < 100 ? (
-                <div className="flex items-center gap-1 text-sm">
-                  <span>Proj: </span>
-                  {projectionLoading ? (
-                    <Skeleton className="h-4 w-15" />
-                  ) : (
-                    formatCurrency(projection?.projectedRevenue || stats.projectedRevenue)
-                  )}
-                </div>
-              ) : null
-            }
-            progress={stats?.periodProgress < 100 ? stats.periodProgress : undefined}
-            trend={projectionLoading && stats?.periodProgress < 100 ? undefined : revenueTrend?.trend}
-            trendValue={revenueTrend?.value ? formatPercentage(revenueTrend.value) : null}
-            colorClass="text-green-600 dark:text-green-400"
-            icon={DollarSign}
-            iconColor="text-green-500"
-            onDetailsClick={() => setSelectedMetric("revenue")}
-            isLoading={loading || !stats}
-          />
+              </div>
+            ) : null
+          }
+          progress={
+            stats?.periodProgress < 100 ? stats.periodProgress : undefined
+          }
+          trend={
+            projectionLoading && stats?.periodProgress < 100
+              ? undefined
+              : revenueTrend?.trend
+          }
+          trendValue={
+            revenueTrend?.value ? formatPercentage(revenueTrend.value) : null
+          }
+          colorClass="text-green-600 dark:text-green-400"
+          icon={DollarSign}
+          iconColor="text-green-500"
+          onDetailsClick={() => setSelectedMetric("revenue")}
+          isLoading={loading || !stats}
+        />
 
-          <StatCard
-            title="Orders"
-            value={stats?.orderCount}
-            description={`${stats?.itemCount} items`}
-            trend={orderTrend?.trend}
-            trendValue={orderTrend?.value ? formatPercentage(orderTrend.value) : null}
-            colorClass="text-blue-600 dark:text-blue-400"
-            icon={ShoppingCart}
-            iconColor="text-blue-500"
-            onDetailsClick={() => setSelectedMetric("orders")}
-            isLoading={loading || !stats}
-          />
+        <StatCard
+          title="Orders"
+          value={stats?.orderCount}
+          description={`${stats?.itemCount} items`}
+          trend={orderTrend?.trend}
+          trendValue={
+            orderTrend?.value ? formatPercentage(orderTrend.value) : null
+          }
+          colorClass="text-blue-600 dark:text-blue-400"
+          icon={ShoppingCart}
+          iconColor="text-blue-500"
+          onDetailsClick={() => setSelectedMetric("orders")}
+          isLoading={loading || !stats}
+        />
 
-          <StatCard
-            title="AOV"
-            value={stats?.averageOrderValue?.toFixed(2)}
-            valuePrefix="$"
-            description={`${stats?.averageItemsPerOrder?.toFixed(1)}/order`}
-            trend={aovTrend?.trend}
-            trendValue={aovTrend?.value ? formatPercentage(aovTrend.value) : null}
-            colorClass="text-purple-600 dark:text-purple-400"
-            icon={CircleDollarSign}
-            iconColor="text-purple-500"
-            onDetailsClick={() => setSelectedMetric("average_order")}
-            isLoading={loading || !stats}
-          />
+        <StatCard
+          title="AOV"
+          value={stats?.averageOrderValue?.toFixed(2)}
+          valuePrefix="$"
+          description={`${stats?.averageItemsPerOrder?.toFixed(1)}/order`}
+          trend={aovTrend?.trend}
+          trendValue={aovTrend?.value ? formatPercentage(aovTrend.value) : null}
+          colorClass="text-purple-600 dark:text-purple-400"
+          icon={CircleDollarSign}
+          iconColor="text-purple-500"
+          onDetailsClick={() => setSelectedMetric("average_order")}
+          isLoading={loading || !stats}
+        />
 
-          <StatCard
-            title="Shipped"
-            value={stats?.shipping?.shippedCount || 0}
-            description={`${stats?.shipping?.locations?.total || 0} locations`}
-            colorClass="text-teal-600 dark:text-teal-400"
-            icon={Package}
-            iconColor="text-teal-500"
-            onDetailsClick={() => setSelectedMetric("shipping")}
-            isLoading={loading || !stats}
-          />
-        </div>
+        <StatCard
+          title="Shipped"
+          value={stats?.shipping?.shippedCount || 0}
+          description={`${stats?.shipping?.locations?.total || 0} locations`}
+          colorClass="text-teal-600 dark:text-teal-400"
+          icon={Package}
+          iconColor="text-teal-500"
+          onDetailsClick={() => setSelectedMetric("shipping")}
+          isLoading={loading || !stats}
+        />
+      </div>
 
-        <Dialog open={!!selectedMetric} onOpenChange={() => setSelectedMetric(null)}>
-          <DialogContent className="w-[80vw] h-[80vh] max-w-none p-0">
-            <div className="transform scale-[2] origin-top-left h-[40vh] w-[40vw]">
-              <div className="h-full w-full p-6">
-                <DialogHeader>
-                  <DialogTitle>
-                    {selectedMetric
-                      ? `${selectedMetric
-                          .split("_")
-                          .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-                          .join(" ")} Details`
-                      : ""}
-                  </DialogTitle>
-                </DialogHeader>
-                <div className="mt-4 h-[calc(40vh-4rem)] overflow-auto">
-                  {detailDataLoading[selectedMetric] ? (
-                    <div className="space-y-4 h-full">
-                      {selectedMetric === "shipping" ? (
-                        <MiniSkeletonTable rows={8} />
-                      ) : (
-                        <>
-                          <MiniSkeletonChart type={selectedMetric === "orders" ? "bar" : "line"} />
-                          {selectedMetric === "orders" && (
-                            <div className="mt-8">
-                              <h3 className="text-lg font-medium mb-4">Hourly Distribution</h3>
-                              <MiniSkeletonChart type="bar" />
-                            </div>
-                          )}
-                        </>
-                      )}
-                    </div>
-                  ) : (
-                    <div className="h-full">
-                      {selectedMetric === "revenue" && (
-                        <RevenueDetails data={detailData.revenue || []} />
-                      )}
-                      {selectedMetric === "orders" && (
-                        <OrdersDetails data={detailData.orders || []} />
-                      )}
-                      {selectedMetric === "average_order" && (
-                        <AverageOrderDetails
-                          data={detailData.average_order || []}
-                          orderCount={stats.orderCount}
+      <Dialog
+        open={!!selectedMetric}
+        onOpenChange={() => setSelectedMetric(null)}
+      >
+        <DialogContent className="w-[80vw] h-[80vh] max-w-none p-0">
+          <div className="transform scale-[2] origin-top-left h-[40vh] w-[40vw]">
+            <div className="h-full w-full p-6">
+              <DialogHeader>
+                <DialogTitle>
+                  {selectedMetric
+                    ? `${selectedMetric
+                        .split("_")
+                        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+                        .join(" ")} Details`
+                    : ""}
+                </DialogTitle>
+              </DialogHeader>
+              <div className="mt-4 h-[calc(40vh-4rem)] overflow-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']">
+                {detailDataLoading[selectedMetric] ? (
+                  <div className="space-y-4 h-full">
+                    {selectedMetric === "shipping" ? (
+                      <MiniSkeletonTable rows={8} />
+                    ) : (
+                      <>
+                        <MiniSkeletonChart
+                          type={selectedMetric === "orders" ? "bar" : "line"}
                         />
-                      )}
-                      {selectedMetric === "shipping" && (
-                        <ShippingDetails data={[stats]} timeRange={timeRange} />
-                      )}
-                    </div>
-                  )}
-                </div>
+                        {selectedMetric === "orders" && (
+                          <div className="mt-8">
+                            <h3 className="text-lg font-medium mb-4">
+                              Hourly Distribution
+                            </h3>
+                            <MiniSkeletonChart type="bar" />
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </div>
+                ) : (
+                  <div className="h-full">
+                    {selectedMetric === "revenue" && (
+                      <RevenueDetails data={detailData.revenue || []} />
+                    )}
+                    {selectedMetric === "orders" && (
+                      <OrdersDetails data={detailData.orders || []} />
+                    )}
+                    {selectedMetric === "average_order" && (
+                      <AverageOrderDetails
+                        data={detailData.average_order || []}
+                        orderCount={stats.orderCount}
+                      />
+                    )}
+                    {selectedMetric === "shipping" && (
+                      <ShippingDetails data={[stats]} timeRange={timeRange} />
+                    )}
+                  </div>
+                )}
               </div>
             </div>
-          </DialogContent>
-        </Dialog>
-     </>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };
 
-export default MiniStatCards; 
\ No newline at end of file
+export default MiniStatCards;