Refactor root admin dashboard UI

components/dashboard/dashboard-card.tsx

@@ -0,0 +1,34 @@
+import type { LucideIcon } from "lucide-react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+type DashboardCardProps = {
+  title: string;
+  value: string;
+  description: string;
+  icon: LucideIcon;
+};
+
+export function DashboardCard({
+  title,
+  value,
+  description,
+  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-md 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>
+  );
+}

components/dashboard/dashboard-layout.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react";
+import { Menu, type LucideIcon } from "lucide-react";
+
+import { DashboardSidebar } from "@/components/dashboard/sidebar";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import type { RootNavItem } from "@/lib/root-navigation";
+
+type DashboardLayoutProps = {
+  title: string;
+  description: string;
+  icon?: LucideIcon;
+  items: RootNavItem[];
+  sidebarFooter?: ReactNode;
+  headerActions?: ReactNode;
+  children: ReactNode;
+};
+
+export function DashboardLayout({
+  title,
+  description,
+  icon: Icon,
+  items,
+  sidebarFooter,
+  headerActions,
+  children,
+}: DashboardLayoutProps) {
+  return (
+    <div className="min-h-screen bg-muted/30">
+      <div className="grid min-h-screen lg:grid-cols-[280px_minmax(0,1fr)]">
+        <aside className="hidden border-r border-border/70 bg-sidebar/60 lg:block">
+          <DashboardSidebar items={items} footer={sidebarFooter} />
+        </aside>
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <header className="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-border/70 bg-background/95 px-4 backdrop-blur lg:px-6">
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button variant="outline" size="icon" className="lg:hidden">
+                  <Menu className="h-4 w-4" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="p-0">
+                <SheetHeader className="sr-only">
+                  <SheetTitle>{title}</SheetTitle>
+                  <SheetDescription>{description}</SheetDescription>
+                </SheetHeader>
+                <DashboardSidebar items={items} footer={sidebarFooter} />
+              </SheetContent>
+            </Sheet>
+
+            <div className="flex min-w-0 flex-1 items-center gap-3">
+              {Icon ? (
+                <div className="hidden rounded-lg border border-border/70 bg-muted/50 p-2 text-muted-foreground sm:flex">
+                  <Icon className="h-4 w-4" />
+                </div>
+              ) : null}
+              <div className="min-w-0">
+                <p className="truncate text-lg font-semibold text-foreground">{title}</p>
+                <p className="truncate text-sm text-muted-foreground">{description}</p>
+              </div>
+            </div>
+
+            {headerActions ? (
+              <div className="flex items-center gap-2">{headerActions}</div>
+            ) : null}
+          </header>
+
+          <main className="flex-1 p-4 lg:p-6">{children}</main>
+        </div>
+      </div>
+    </div>
+  );
+}

components/dashboard/sidebar.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+import type { LucideIcon } from "lucide-react";
+import { ShieldCheck } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type DashboardSidebarItem = {
+  label: string;
+  href: string;
+  icon: LucideIcon;
+  active?: boolean;
+  children?: DashboardSidebarItem[];
+};
+
+type DashboardSidebarProps = {
+  items: DashboardSidebarItem[];
+  footer?: ReactNode;
+};
+
+export function DashboardSidebar({ items, footer }: DashboardSidebarProps) {
+  function renderItem(item: DashboardSidebarItem, nested = false) {
+    const Icon = item.icon;
+
+    return (
+      <div key={item.href} className="space-y-1">
+        <Link
+          href={item.href}
+          className={cn(
+            "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+            item.active
+              ? "bg-primary text-primary-foreground"
+              : "text-muted-foreground hover:bg-muted hover:text-foreground",
+            nested ? "ml-4" : undefined,
+          )}
+        >
+          <Icon className="h-4 w-4" />
+          <span>{item.label}</span>
+        </Link>
+        {item.children?.length ? item.children.map((child) => renderItem(child, true)) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col bg-sidebar/40">
+      <div className="flex items-center gap-3 px-4 py-5">
+        <div className="rounded-xl bg-primary/10 p-2 text-primary">
+          <ShieldCheck className="h-5 w-5" />
+        </div>
+        <div className="min-w-0">
+          <p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>
+          <p className="truncate text-xs text-muted-foreground">Website owner workspace</p>
+        </div>
+      </div>
+
+      <div className="px-4">
+        <div className="rounded-xl border border-border/70 bg-background/80 p-4">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <p className="text-sm font-medium text-foreground">Private panel</p>
+              <p className="mt-1 text-xs text-muted-foreground">Single owner access</p>
+            </div>
+            <Badge variant="outline">Private</Badge>
+          </div>
+        </div>
+      </div>
+
+      <Separator className="my-4" />
+
+      <div className="flex-1 space-y-6 overflow-y-auto px-4 pb-4">
+        <nav className="space-y-1">{items.map((item) => renderItem(item))}</nav>
+      </div>
+
+      {footer ? (
+        <>
+          <Separator />
+          <div className="space-y-2 p-4">{footer}</div>
+        </>
+      ) : null}
+    </div>
+  );
+}