Refactor root admin dashboards and settings

components/dashboard/dashboard-card.tsx

@@ -1,6 +1,6 @@
 import type { LucideIcon } from "lucide-react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatsCard } from "@/components/dashboard/stats-card";
 
 type DashboardCardProps = {
   title: string;
@@ -16,19 +16,6 @@ export function DashboardCard({
   icon: Icon,
 }: DashboardCardProps) {
   return (
-    <Card className="border-border/70 bg-card/95 shadow-sm">
-      <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3">
-        <div className="space-y-1">
-          <CardDescription>{title}</CardDescription>
-          <CardTitle className="text-3xl font-semibold tracking-tight">{value}</CardTitle>
-        </div>
-        <div className="rounded-nested border border-border bg-muted/60 p-2 text-muted-foreground">
-          <Icon className="h-4 w-4" />
-        </div>
-      </CardHeader>
-      <CardContent>
-        <p className="text-sm text-muted-foreground">{description}</p>
-      </CardContent>
-    </Card>
+    <StatsCard title={title} value={value} description={description} icon={Icon} />
   );
 }