Update statcard variants

2025-01-01 15:16:31 -05:00
parent 9b5c59c61d
commit f5d20f92b8
2 changed files with 53 additions and 26 deletions
--- a/dashboard/src/components/dashboard/MiniStatCards.jsx
+++ b/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>

--- a/dashboard/src/components/dashboard/StatCards.jsx
+++ b/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"
+    default: "text-sm text-muted-foreground", 
+    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" />