From a874303023530186c112b6a0e203dc88bf35f933 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Wed, 1 Jan 2025 21:50:44 -0500
Subject: [PATCH] Finish styling ministatcards

---
 .../components/dashboard/MiniStatCards.jsx    | 38 ++++++------
 .../src/components/dashboard/StatCards.jsx    | 61 +++++++++++++------
 2 files changed, 65 insertions(+), 34 deletions(-)

diff --git a/dashboard/src/components/dashboard/MiniStatCards.jsx b/dashboard/src/components/dashboard/MiniStatCards.jsx
index 510ff6d..91a3484 100644
--- a/dashboard/src/components/dashboard/MiniStatCards.jsx
+++ b/dashboard/src/components/dashboard/MiniStatCards.jsx
@@ -401,15 +401,16 @@ const MiniStatCards = ({
           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-200"
+          colorClass="text-emerald-200"
+          titleClass="text-emerald-100 font-bold text-md"
+          descriptionClass="text-emerald-200 text-md font-semibold"
           icon={DollarSign}
-          iconColor="text-green-200"
-          titleColor="text-green-200"
-          descriptionColor="text-green-200"
+          iconColor="text-emerald-900"
+          iconBackground="bg-emerald-300"
           onDetailsClick={() => setSelectedMetric("revenue")}
           isLoading={loading || !stats}
           variant="mini"
-          background="bg-gradient-to-br from-green-950 to-green-900 backdrop-blur-md"
+          background="bg-gradient-to-br from-emerald-900 to-emerald-800"
         />
 
         <StatCard
@@ -419,14 +420,15 @@ const MiniStatCards = ({
           trend={orderTrend?.trend}
           trendValue={orderTrend?.value ? formatPercentage(orderTrend.value) : null}
           colorClass="text-blue-200"
+          titleClass="text-blue-100 font-bold text-md"
+          descriptionClass="text-blue-200 text-md font-semibold"
           icon={ShoppingCart}
-          iconColor="text-blue-200"
-          titleColor="text-blue-200"
-          descriptionColor="text-blue-200"
+          iconColor="text-blue-900"
+          iconBackground="bg-blue-300"
           onDetailsClick={() => setSelectedMetric("orders")}
           isLoading={loading || !stats}
           variant="mini"
-          background="bg-gradient-to-br from-blue-950 to-blue-900 backdrop-blur-md"
+          background="bg-gradient-to-br from-blue-900 to-blue-800"
         />
 
         <StatCard
@@ -437,14 +439,15 @@ const MiniStatCards = ({
           trend={aovTrend?.trend}
           trendValue={aovTrend?.value ? formatPercentage(aovTrend.value) : null}
           colorClass="text-violet-200"
+          titleClass="text-violet-100 font-bold text-md"
+          descriptionClass="text-violet-200 text-md font-semibold"
           icon={CircleDollarSign}
-          iconColor="text-violet-200"
-          titleColor="text-violet-200"
-          descriptionColor="text-violet-200"
+          iconColor="text-violet-900"
+          iconBackground="bg-violet-300"
           onDetailsClick={() => setSelectedMetric("average_order")}
           isLoading={loading || !stats}
           variant="mini"
-          background="bg-gradient-to-br from-violet-950 to-violet-900 backdrop-blur-md"
+          background="bg-gradient-to-br from-violet-900 to-violet-800"
         />
 
         <StatCard
@@ -452,14 +455,15 @@ const MiniStatCards = ({
           value={stats?.shipping?.shippedCount || 0}
           description={`${stats?.shipping?.locations?.total || 0} locations`}
           colorClass="text-orange-200"
+          titleClass="text-orange-100 font-bold text-sm"
+          descriptionClass="text-orange-200 text-md font-semibold"
           icon={Package}
-          iconColor="text-orange-200"
-          titleColor="text-orange-200"
-          descriptionColor="text-orange-200"
+          iconColor="text-orange-900"
+          iconBackground="bg-orange-300"
           onDetailsClick={() => setSelectedMetric("shipping")}
           isLoading={loading || !stats}
           variant="mini"
-          background="bg-gradient-to-br from-orange-950 to-orange-900 backdrop-blur-md"
+          background="bg-gradient-to-br from-orange-900 to-orange-800"
         />
       </div>
 
diff --git a/dashboard/src/components/dashboard/StatCards.jsx b/dashboard/src/components/dashboard/StatCards.jsx
index 3f8506e..39fe9f9 100644
--- a/dashboard/src/components/dashboard/StatCards.jsx
+++ b/dashboard/src/components/dashboard/StatCards.jsx
@@ -973,14 +973,11 @@ const StatCard = ({
   trendSuffix = "",
   className = "",
   colorClass = "text-gray-900 dark:text-gray-100",
+  titleClass,
+  descriptionClass,
   icon: Icon,
   iconColor = "text-gray-500",
-  titleColor = "text-gray-600 dark:text-gray-300",
-  descriptionColor = "text-gray-200",
-  trendColor = {
-    up: "text-emerald-300",
-    down: "text-rose-300"
-  },
+  iconBackground,
   onClick,
   info,
   onDetailsClick,
@@ -996,17 +993,17 @@ const StatCard = ({
 
   const titleVariants = {
     default: "text-sm font-medium text-gray-600 dark:text-gray-300",
-    mini: `text-sm font-bold ${titleColor || "text-gray-100"}`
+    mini: titleClass || "text-sm font-bold text-gray-100"
   };
 
   const valueVariants = {
     default: "text-2xl font-bold",
-    mini: `text-2xl font-extrabold ${colorClass || "text-white"}`
+    mini: "text-3xl font-extrabold"
   };
 
   const descriptionVariants = {
-    default: "text-sm text-muted-foreground", 
-    mini: `text-sm font-semibold ${descriptionColor || "text-gray-200"}`
+    default: "text-sm text-muted-foreground",
+    mini: descriptionClass || "text-sm font-semibold text-gray-200"
   };
 
   const trendColorVariants = {
@@ -1015,14 +1012,14 @@ const StatCard = ({
       down: "text-rose-600 dark:text-rose-400"
     },
     mini: {
-      up: trendColor?.up || "text-emerald-300",
-      down: trendColor?.down || "text-rose-300"
+      up: "text-emerald-900",
+      down: "text-rose-900"
     }
   };
 
   const iconVariants = {
     default: iconColor,
-    mini: iconColor || "text-white"
+    mini: iconColor || colorClass
   };
 
   return (
@@ -1046,7 +1043,16 @@ const StatCard = ({
             />
           )}
         </div>
-        {Icon && <Icon className={`h-4 w-4 ${iconVariants[variant]}`} />}
+        {Icon && (
+          <div className={`${variant === 'mini' ? 'relative p-3' : ''}`}>
+            {variant === 'mini' && iconBackground && (
+              <div 
+                className={`absolute inset-0 rounded-full ${iconBackground}`}
+              />
+            )}
+            <Icon className={`h-4 w-4 ${iconVariants[variant]} relative`} />
+          </div>
+        )}
       </CardHeader>
       <CardContent className="p-4 pt-0">
         {isLoading ? (
@@ -1057,17 +1063,25 @@ const StatCard = ({
         ) : (
           <div className="space-y-2">
             <div>
-              <div className={valueVariants[variant]}>
+              <div className={`${valueVariants[variant]} ${colorClass}`}>
                 {valuePrefix}
                 {value}
                 {valueSuffix}
               </div>
               {description && (
-                <div className={`mt-2 items-center gap-2 flex ${descriptionVariants[variant]}`}>
+                <div className={`mt-2 items-center justify-between flex ${descriptionVariants[variant]}`}>
                   {description}
                   {trend && (
                     <span
-                      className={`flex items-center gap-0 ${trendColorVariants[variant][trend]}`}
+                      className={`flex items-center gap-0 px-1 py-0.5 ${
+                        variant === 'mini' ? 'rounded-full' : ''
+                      } ${
+                        variant === 'mini' ? (
+                          trend === 'up'
+                            ? 'text-sm bg-emerald-300 text-emerald-900'
+                            : 'text-sm bg-rose-300 text-rose-900'
+                        ) : ''
+                      } ${trendColorVariants[variant][trend]}`}
                     >
                       {trend === "up" ? (
                         <ArrowUp className="w-4 h-4" />
@@ -1976,6 +1990,7 @@ const StatCards = ({
             colorClass="text-green-600 dark:text-green-400"
             icon={DollarSign}
             iconColor="text-green-500"
+            iconBackground="bg-green-500"
             onDetailsClick={() => setSelectedMetric("revenue")}
             isLoading={loading || !stats}
           />
@@ -1991,6 +2006,7 @@ const StatCards = ({
             colorClass="text-blue-600 dark:text-blue-400"
             icon={ShoppingCart}
             iconColor="text-blue-500"
+            iconBackground="bg-blue-500"
             onDetailsClick={() => setSelectedMetric("orders")}
             isLoading={loading || !stats}
           />
@@ -2009,6 +2025,7 @@ const StatCards = ({
             colorClass="text-purple-600 dark:text-purple-400"
             icon={CircleDollarSign}
             iconColor="text-purple-500"
+            iconBackground="bg-purple-500"
             onDetailsClick={() => setSelectedMetric("average_order")}
             isLoading={loading || !stats}
           />
@@ -2020,6 +2037,7 @@ const StatCards = ({
             colorClass="text-indigo-600 dark:text-indigo-400"
             icon={Tags}
             iconColor="text-indigo-500"
+            iconBackground="bg-indigo-500"
             onDetailsClick={() => setSelectedMetric("brands_categories")}
             isLoading={loading || !stats}
           />
@@ -2031,6 +2049,7 @@ const StatCards = ({
             colorClass="text-teal-600 dark:text-teal-400"
             icon={Package}
             iconColor="text-teal-500"
+            iconBackground="bg-teal-500"
             onDetailsClick={() => setSelectedMetric("shipping")}
             isLoading={loading || !stats}
           />
@@ -2048,6 +2067,7 @@ const StatCards = ({
             colorClass="text-yellow-600 dark:text-yellow-400"
             icon={Clock}
             iconColor="text-yellow-500"
+            iconBackground="bg-yellow-500"
             onDetailsClick={() => setSelectedMetric("pre_orders")}
             isLoading={loading || !stats}
           />
@@ -2065,6 +2085,7 @@ const StatCards = ({
             colorClass="text-cyan-600 dark:text-cyan-400"
             icon={Map}
             iconColor="text-cyan-500"
+            iconBackground="bg-cyan-500"
             onDetailsClick={() => setSelectedMetric("local_pickup")}
             isLoading={loading || !stats}
           />
@@ -2082,6 +2103,7 @@ const StatCards = ({
             colorClass="text-red-600 dark:text-red-400"
             icon={AlertCircle}
             iconColor="text-red-500"
+            iconBackground="bg-red-500"
             onDetailsClick={() => setSelectedMetric("on_hold")}
             isLoading={loading || !stats}
           />
@@ -2098,6 +2120,7 @@ const StatCards = ({
               colorClass="text-pink-600 dark:text-pink-400"
               icon={Clock}
               iconColor="text-pink-500"
+              iconBackground="bg-pink-500"
               onDetailsClick={() => setSelectedMetric("peak_hour")}
               isLoading={loading || !stats}
             />
@@ -2119,6 +2142,7 @@ const StatCards = ({
               colorClass="text-emerald-600 dark:text-emerald-400"
               icon={TrendingUp}
               iconColor="text-emerald-500"
+              iconBackground="bg-emerald-500"
               isLoading={loading || !stats}
             />
           )}
@@ -2131,6 +2155,7 @@ const StatCards = ({
             colorClass="text-orange-600 dark:text-orange-400"
             icon={RefreshCcw}
             iconColor="text-orange-500"
+            iconBackground="bg-orange-500"
             onDetailsClick={() => setSelectedMetric("refunds")}
             isLoading={loading || !stats}
           />
@@ -2143,6 +2168,7 @@ const StatCards = ({
             colorClass="text-rose-600 dark:text-rose-400"
             icon={XCircle}
             iconColor="text-rose-500"
+            iconBackground="bg-rose-500"
             onDetailsClick={() => setSelectedMetric("cancellations")}
             isLoading={loading || !stats}
           />
@@ -2157,6 +2183,7 @@ const StatCards = ({
             colorClass="text-violet-600 dark:text-violet-400"
             icon={TrendingUp}
             iconColor="text-violet-500"
+            iconBackground="bg-violet-500"
             onDetailsClick={() => setSelectedMetric("order_range")}
             isLoading={loading || !stats}
           />