Update statcard variants

dashboard/src/components/dashboard/MiniStatCards.jsx

@@ -401,13 +401,15 @@ 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-600 dark:text-green-400"
+          colorClass="text-green-200"
           icon={DollarSign}
-          iconColor="text-green-500"
+          iconColor="text-green-200"
+          titleColor="text-green-200"
+          descriptionColor="text-green-200"
           onDetailsClick={() => setSelectedMetric("revenue")}
           isLoading={loading || !stats}
           variant="mini"
-          background="bg-gradient-to-br from-emerald-700/90 to-green-700/90 backdrop-blur-md hover:from-emerald-900 hover:to-green-800"
+          background="bg-gradient-to-br from-green-950 to-green-900 backdrop-blur-md"
         />
 
         <StatCard
@@ -416,13 +418,15 @@ const MiniStatCards = ({
           description={`${stats?.itemCount} total items`}
           trend={orderTrend?.trend}
           trendValue={orderTrend?.value ? formatPercentage(orderTrend.value) : null}
-          colorClass="text-blue-600 dark:text-blue-400"
+          colorClass="text-blue-200"
           icon={ShoppingCart}
-          iconColor="text-blue-500"
+          iconColor="text-blue-200"
+          titleColor="text-blue-200"
+          descriptionColor="text-blue-200"
           onDetailsClick={() => setSelectedMetric("orders")}
           isLoading={loading || !stats}
           variant="mini"
-          background="bg-gradient-to-br from-blue-700/90 to-indigo-700/90 backdrop-blur-md hover:from-blue-900 hover:to-indigo-800"
+          background="bg-gradient-to-br from-blue-950 to-blue-900 backdrop-blur-md"
         />
 
         <StatCard
@@ -432,26 +436,30 @@ const MiniStatCards = ({
           description={`${stats?.averageItemsPerOrder?.toFixed(1)} items per order`}
           trend={aovTrend?.trend}
           trendValue={aovTrend?.value ? formatPercentage(aovTrend.value) : null}
-          colorClass="text-purple-600 dark:text-purple-400"
+          colorClass="text-violet-200"
           icon={CircleDollarSign}
-          iconColor="text-purple-500"
+          iconColor="text-violet-200"
+          titleColor="text-violet-200"
+          descriptionColor="text-violet-200"
           onDetailsClick={() => setSelectedMetric("average_order")}
           isLoading={loading || !stats}
           variant="mini"
-          background="bg-gradient-to-br from-purple-700/90 to-violet-700/90 backdrop-blur-md hover:from-purple-900 hover:to-violet-800"
+          background="bg-gradient-to-br from-violet-950 to-violet-900 backdrop-blur-md"
         />
 
         <StatCard
           title="Shipped"
           value={stats?.shipping?.shippedCount || 0}
           description={`${stats?.shipping?.locations?.total || 0} locations`}
-          colorClass="text-teal-600 dark:text-teal-400"
+          colorClass="text-orange-200"
           icon={Package}
-          iconColor="text-teal-500"
+          iconColor="text-orange-200"
+          titleColor="text-orange-200"
+          descriptionColor="text-orange-200"
           onDetailsClick={() => setSelectedMetric("shipping")}
           isLoading={loading || !stats}
           variant="mini"
-          background="bg-gradient-to-br from-teal-700/90 to-cyan-700/90 backdrop-blur-md hover:from-teal-900 hover:to-cyan-800"
+          background="bg-gradient-to-br from-orange-950 to-orange-900 backdrop-blur-md"
         />
       </div>
 

dashboard/src/components/dashboard/StatCards.jsx

@@ -233,7 +233,8 @@ const OrdersDetails = ({ data }) => {
             dataKey="orders"
             name="Orders"
             type="bar"
-            color="hsl(221.2 83.2% 53.3%)"
+            color="
+            "
           />
         </div>
       )}
@@ -974,6 +975,12 @@ const StatCard = ({
   colorClass = "text-gray-900 dark:text-gray-100",
   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"
+  },
   onClick,
   info,
   onDetailsClick,
@@ -984,22 +991,38 @@ const StatCard = ({
 }) => {
   const variants = {
     default: "bg-white dark:bg-gray-900/60",
-    mini: background || "bg-gradient-to-br from-gray-900/90 to-gray-800/90 backdrop-blur-md hover:from-gray-900 hover:to-gray-800"
+    mini: background || "bg-gradient-to-br from-gray-800 to-gray-900 backdrop-blur-md"
   };
 
   const titleVariants = {
     default: "text-sm font-medium text-gray-600 dark:text-gray-300",
-    mini: "text-sm font-bold text-gray-100"
+    mini: `text-sm font-bold ${titleColor || "text-gray-100"}`
   };
 
   const valueVariants = {
     default: "text-2xl font-bold",
-    mini: "text-2xl font-extrabold text-white"
+    mini: `text-2xl font-extrabold ${colorClass || "text-white"}`
   };
 
   const descriptionVariants = {
     default: "text-sm text-muted-foreground", 
-    mini: "text-sm font-semibold text-gray-200"
+    mini: `text-sm font-semibold ${descriptionColor || "text-gray-200"}`
+  };
+
+  const trendColorVariants = {
+    default: {
+      up: "text-emerald-600 dark:text-emerald-400",
+      down: "text-rose-600 dark:text-rose-400"
+    },
+    mini: {
+      up: trendColor?.up || "text-emerald-300",
+      down: trendColor?.down || "text-rose-300"
+    }
+  };
+
+  const iconVariants = {
+    default: iconColor,
+    mini: iconColor || "text-white"
   };
 
   return (
@@ -1018,12 +1041,12 @@ const StatCard = ({
           </CardTitle>
           {info && (
             <Info
-              className={`w-4 h-4 ${variant === 'mini' ? 'text-gray-300' : 'text-muted-foreground'} cursor-help`}
+              className={`w-4 h-4 ${variant === 'mini' ? 'text-gray-200' : 'text-muted-foreground'} cursor-help`}
               title={info}
             />
           )}
         </div>
-        {Icon && <Icon className={`h-4 w-4 ${variant === 'mini' ? 'text-gray-100' : iconColor}`} />}
+        {Icon && <Icon className={`h-4 w-4 ${iconVariants[variant]}`} />}
       </CardHeader>
       <CardContent className="p-4 pt-0">
         {isLoading ? (
@@ -1034,7 +1057,7 @@ const StatCard = ({
         ) : (
           <div className="space-y-2">
             <div>
-              <div className={`${valueVariants[variant]} ${colorClass}`}>
+              <div className={valueVariants[variant]}>
                 {valuePrefix}
                 {value}
                 {valueSuffix}
@@ -1044,11 +1067,7 @@ const StatCard = ({
                   {description}
                   {trend && (
                     <span
-                      className={`flex items-center gap-0 ${
-                        trend === "up"
-                          ? "text-emerald-600 dark:text-emerald-400"
-                          : "text-rose-600 dark:text-rose-400"
-                      }`}
+                      className={`flex items-center gap-0 ${trendColorVariants[variant][trend]}`}
                     >
                       {trend === "up" ? (
                         <ArrowUp className="w-4 h-4" />