admin ui enhacement

2026-03-18 02:36:12 +01:00
1 parent 02c9681aca
commit 0abb41f573
@@ -1,51 +1,139 @@
 import { LucideIcon } from "lucide-react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { TrendingUp, TrendingDown, Minus } from "lucide-react";

 interface StatsCardProps {
-    title: string;
-    value: string | number;
-    change?: string;
-    trend?: "up" | "down" | "neutral";
-    icon: LucideIcon;
-    color?: "blue" | "green" | "purple" | "orange";
+  title: string;
+  value: string | number;
+  change?: string;
+  trend?: "up" | "down" | "neutral";
+  icon: LucideIcon;
+  color?: "blue" | "green" | "purple" | "orange" | "red";
+  className?: string;
 }

-export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
-    const colorStyles = {
-        blue: "bg-blue-50 text-blue-600",
-        green: "bg-green-50 text-green-600",
-        purple: "bg-purple-50 text-purple-600",
-        orange: "bg-orange-50 text-orange-600",
-    };
+export function StatsCard({
+  title,
+  value,
+  change,
+  trend,
+  icon: Icon,
+  color = "blue",
+  className,
+}: StatsCardProps) {
+  const colorStyles = {
+    blue: {
+      gradient: "from-blue-500/10 to-blue-600/5",
+      iconBg: "bg-gradient-to-br from-blue-500 to-blue-600",
+      iconShadow: "shadow-blue-500/25",
+      text: "text-blue-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    green: {
+      gradient: "from-emerald-500/10 to-emerald-600/5",
+      iconBg: "bg-gradient-to-br from-emerald-500 to-emerald-600",
+      iconShadow: "shadow-emerald-500/25",
+      text: "text-emerald-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    purple: {
+      gradient: "from-violet-500/10 to-violet-600/5",
+      iconBg: "bg-gradient-to-br from-violet-500 to-violet-600",
+      iconShadow: "shadow-violet-500/25",
+      text: "text-violet-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    orange: {
+      gradient: "from-amber-500/10 to-amber-600/5",
+      iconBg: "bg-gradient-to-br from-amber-500 to-orange-600",
+      iconShadow: "shadow-amber-500/25",
+      text: "text-amber-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    red: {
+      gradient: "from-rose-500/10 to-rose-600/5",
+      iconBg: "bg-gradient-to-br from-rose-500 to-rose-600",
+      iconShadow: "shadow-rose-500/25",
+      text: "text-rose-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+  };

-    return (
-        <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                    {title}
-                </CardTitle>
-                <div className={`p-2 rounded-lg ${colorStyles[color]}`}>
-                    <Icon size={16} />
-                </div>
-            </CardHeader>
-            <CardContent>
-                <div className="text-2xl font-bold">{value}</div>
-                {change && (
-                    <p className="text-xs text-muted-foreground mt-1">
-                        <span
-                            className={`font-medium ${trend === "up"
-                                    ? "text-green-600"
-                                    : trend === "down"
-                                        ? "text-red-600"
-                                        : "text-slate-600"
-                                }`}
-                        >
-                            {change}
-                        </span>{" "}
-                        vs last month
-                    </p>
+  const styles = colorStyles[color];
+  const TrendIcon =
+    trend === "up" ? TrendingUp : trend === "down" ? TrendingDown : Minus;
+
+  return (
+    <div
+      className={cn(
+        "group relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-br p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1",
+        styles.gradient,
+        className,
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <div className="space-y-2">
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <div className="flex items-baseline gap-2">
+            <span className="text-3xl font-bold tracking-tight">{value}</span>
+          </div>
+          {change && (
+            <div className="flex items-center gap-1 text-sm">
+              <TrendIcon
+                className={cn(
+                  "h-4 w-4",
+                  trend === "up" && styles.trendUp,
+                  trend === "down" && styles.trendDown,
+                  trend === "neutral" && "text-muted-foreground",
                )}
-            </CardContent>
-        </Card>
-    );
+              />
+              <span
+                className={cn(
+                  "font-medium",
+                  trend === "up" && styles.trendUp,
+                  trend === "down" && styles.trendDown,
+                  trend === "neutral" && "text-muted-foreground",
+                )}
+              >
+                {change}
+              </span>
+              <span className="text-muted-foreground">vs last month</span>
+            </div>
+          )}
+        </div>
+        <div
+          className={cn(
+            "flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br shadow-lg transition-transform duration-300 group-hover:scale-110",
+            styles.iconBg,
+            styles.iconShadow,
+          )}
+        >
+          <Icon className="h-6 w-6 text-white" />
+        </div>
+      </div>
+
+      {/* Decorative corner gradient */}
+      <div className="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-gradient-to-br from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+    </div>
+  );
+}
+
+export function StatsCardSkeleton() {
+  return (
+    <div className="animate-pulse rounded-2xl border border-border/50 bg-gradient-to-br from-muted/30 to-muted/20 p-6">
+      <div className="flex items-start justify-between">
+        <div className="space-y-3">
+          <div className="h-4 w-24 rounded bg-muted" />
+          <div className="h-9 w-32 rounded bg-muted" />
+          <div className="h-4 w-20 rounded bg-muted" />
+        </div>
+        <div className="h-12 w-12 rounded-xl bg-muted" />
+      </div>
+    </div>
+  );
 }