diff --git a/client/components/admin/AdminStatCard.tsx b/client/components/admin/AdminStatCard.tsx new file mode 100644 index 00000000..994037f8 --- /dev/null +++ b/client/components/admin/AdminStatCard.tsx @@ -0,0 +1,63 @@ +import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import type { LucideIcon } from "lucide-react"; + +interface AdminStatCardProps { + title: string; + value: string; + description?: string; + trend?: string; + icon: LucideIcon; + tone?: "blue" | "green" | "purple" | "orange" | "red"; + actions?: React.ReactNode; +} + +const toneConfig: Record, string> = { + blue: "text-sky-300", + green: "text-emerald-300", + purple: "text-purple-300", + orange: "text-orange-300", + red: "text-rose-300", +}; + +export const AdminStatCard = ({ + title, + value, + description, + trend, + icon: Icon, + tone = "blue", + actions, +}: AdminStatCardProps) => { + return ( + + +
+ {title} + + Admin metric + +
+
+
+ {value} +
+ +
+ {trend ? ( +

{trend}

+ ) : null} +
+ {(description || actions) && ( + + {description ? ( +

{description}

+ ) : null} + {actions} +
+ )} +
+ ); +}; + +export default AdminStatCard;