Refactor root admin dashboards and settings

components/root/portfolio-projects-overview.tsx

@@ -1,6 +1,7 @@
 import { ExternalLink, Filter, FolderKanban, Plus, Tags } from "lucide-react";
 import Link from "next/link";
 
+import { StatsCard } from "@/components/dashboard/stats-card";
 import { MotionFade } from "@/components/motion-fade";
 import { AppCard } from "@/components/ui/app-card";
 import { Badge } from "@/components/ui/badge";
@@ -51,20 +52,12 @@ export function PortfolioProjectsOverview({
         <AppCard level={3}>
           <CardContent className="flex flex-col gap-6 p-6 lg:flex-row lg:items-end lg:justify-between lg:p-8">
             <div className="grid gap-4 sm:grid-cols-3">
-              <AppCard level={2} padding="sm">
-                <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Projects</p>
-                <p className="mt-2 text-3xl font-semibold text-foreground">{projects.length}</p>
-              </AppCard>
-              <AppCard level={2} padding="sm">
-                <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Categories</p>
-                <p className="mt-2 text-3xl font-semibold text-foreground">{categories.length}</p>
-              </AppCard>
-              <AppCard level={2} padding="sm">
-                <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Published</p>
-                <p className="mt-2 text-3xl font-semibold text-foreground">
-                  {projects.filter((project) => project.isPublished).length}
-                </p>
-              </AppCard>
+              <StatsCard title="Projects" value={String(projects.length)} />
+              <StatsCard title="Categories" value={String(categories.length)} />
+              <StatsCard
+                title="Published"
+                value={String(projects.filter((project) => project.isPublished).length)}
+              />
             </div>
 
             <div className="flex flex-wrap gap-3">