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} />
   );
 }

components/dashboard/stats-card.tsx

@@ -0,0 +1,47 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { AppCard } from "@/components/ui/app-card";
+import { CardContent } from "@/components/ui/card";
+
+type StatsCardProps = {
+  title: string;
+  value: string;
+  icon?: LucideIcon;
+  description?: string;
+  footer?: ReactNode;
+  className?: string;
+};
+
+export function StatsCard({
+  title,
+  value,
+  icon: Icon,
+  description,
+  footer,
+  className,
+}: StatsCardProps) {
+  return (
+    <AppCard level={3} className={className}>
+      <CardContent className="space-y-2.5 p-3">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <p className="text-sm font-semibold text-foreground">{title}</p>
+            <p className="mt-1 text-3xl font-semibold text-foreground">{value}</p>
+          </div>
+          {Icon ? (
+            <div className="rounded-nested border border-border bg-muted/50 p-2 text-muted-foreground">
+              <Icon className="h-4 w-4" />
+            </div>
+          ) : null}
+        </div>
+
+        {description ? (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        ) : null}
+
+        {footer ? footer : null}
+      </CardContent>
+    </AppCard>
+  );
+}