@mohammad-irfan/create-dashboard-kit 1.0.0

package/templates/source/components/icons/IconSet.tsx

@@ -0,0 +1,235 @@
+import type { SVGProps } from 'react'
+
+export type IconProps = SVGProps<SVGSVGElement>
+
+export function Icon({ children, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      {children}
+    </svg>
+  )
+}
+
+export function DashboardIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
+    </Icon>
+  )
+}
+
+export function MenuIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+    </Icon>
+  )
+}
+
+export function CloseIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M6 18 18 6M6 6l12 12" />
+    </Icon>
+  )
+}
+
+export function CollapseIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M18.75 19.5 11.25 12l7.5-7.5m-6 15L5.25 12l7.5-7.5" />
+    </Icon>
+  )
+}
+
+export function PlusIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M12 4.5v15m7.5-7.5h-15" />
+    </Icon>
+  )
+}
+
+export function ExternalLinkIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+    </Icon>
+  )
+}
+
+export function SignOutIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25" />
+    </Icon>
+  )
+}
+
+export function BellIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
+    </Icon>
+  )
+}
+
+export function CheckIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="m4.5 12.75 6 6 9-13.5" />
+    </Icon>
+  )
+}
+
+export function SunIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+    </Icon>
+  )
+}
+
+export function MoonIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+    </Icon>
+  )
+}
+
+export function SparklesIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
+    </Icon>
+  )
+}
+
+export function ArrowRightIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+    </Icon>
+  )
+}
+
+export function SearchIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+    </Icon>
+  )
+}
+
+export function FilterIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
+    </Icon>
+  )
+}
+
+export function FolderIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
+    </Icon>
+  )
+}
+
+export function UsersIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+    </Icon>
+  )
+}
+
+export function CoffeeIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M18 8h1a4 4 0 0 1 0 8h-1M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8ZM6 1v3M10 1v3M14 1v3" />
+    </Icon>
+  )
+}
+
+export function DollarIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+    </Icon>
+  )
+}
+
+export function ClipboardIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375-3-3m0 0 3-3m-3 3h10.5" />
+    </Icon>
+  )
+}
+
+export function ClockIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+    </Icon>
+  )
+}
+
+export function SettingsIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.6 6.6 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+      <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+    </Icon>
+  )
+}
+
+export function renderNamedIcon(name: string, props?: IconProps) {
+  switch (name) {
+    case 'dashboard':
+      return <DashboardIcon {...props} />
+    case 'folder':
+      return <FolderIcon {...props} />
+    case 'check':
+      return <CheckIcon {...props} />
+    case 'users':
+      return <UsersIcon {...props} />
+    case 'coffee':
+      return <CoffeeIcon {...props} />
+    case 'dollar':
+      return <DollarIcon {...props} />
+    case 'clipboard':
+      return <ClipboardIcon {...props} />
+    case 'clock':
+      return <ClockIcon {...props} />
+    case 'settings':
+      return <SettingsIcon {...props} />
+    case 'sparkles':
+      return <SparklesIcon {...props} />
+    case 'bell':
+      return <BellIcon {...props} />
+    case 'search':
+      return <SearchIcon {...props} />
+    case 'filter':
+      return <FilterIcon {...props} />
+    default:
+      return (
+        <span className="h-5 w-5 shrink-0 flex items-center justify-center font-bold text-xs">
+          {name}
+        </span>
+      )
+  }
+}

package/templates/source/components/layout/AppShell.tsx

@@ -0,0 +1,70 @@
+import { useState, type ReactNode } from 'react'
+import { Header } from './Header.tsx'
+import { Sidebar } from './Sidebar.tsx'
+import type { DashboardConfig } from '../../config/dashboard.config.ts'
+import { getCanvasRadiusClass } from '../../config/dashboard.config.ts'
+
+export interface AppShellProps {
+  config: DashboardConfig
+  currentPath?: string
+  pageTitle?: string
+  onNavigate?: (to: string) => void
+  headerActions?: ReactNode
+  footer?: ReactNode
+  children: ReactNode
+  className?: string
+}
+
+export function AppShell({
+  config,
+  currentPath = '/dashboard',
+  pageTitle,
+  onNavigate,
+  headerActions,
+  footer,
+  children,
+  className = '',
+}: AppShellProps) {
+  const [collapsed, setCollapsed] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  const canvasRadiusClass = getCanvasRadiusClass(config.shapes.canvasRadius)
+
+  return (
+    <div className={`flex h-dvh flex-col overflow-hidden bg-white dark:bg-[#111315] text-foreground ${className}`}>
+      {/* PERSISTENT HEADER */}
+      <Header
+        config={config}
+        pageTitle={pageTitle}
+        onOpenSidebar={() => setMobileOpen(true)}
+        trailingActions={headerActions}
+      />
+
+      {/* BODY SHELL */}
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+        {/* SIDEBAR RAIL & DRAWER */}
+        <Sidebar
+          config={config}
+          collapsed={collapsed}
+          mobileOpen={mobileOpen}
+          currentPath={currentPath}
+          onToggleCollapse={() => setCollapsed((prev) => !prev)}
+          onCloseMobile={() => setMobileOpen(false)}
+          onNavigate={onNavigate}
+        />
+
+        {/* SCROLLABLE MAIN CONTENT CANVAS WITH SIGNATURE SCOOPED CORNER */}
+        <main
+          className={`flex-1 overflow-y-auto bg-[var(--canvas-background,#eef3fb)] ${canvasRadiusClass} transition-all duration-200`}
+        >
+          <div className="min-h-full py-6 sm:py-8 lg:py-10">
+            <div className="mx-auto max-w-[1360px] px-4 sm:px-6 lg:px-8">
+              {children}
+            </div>
+          </div>
+          {footer}
+        </main>
+      </div>
+    </div>
+  )
+}

package/templates/source/components/layout/Header.tsx

@@ -0,0 +1,90 @@
+import type { ReactNode } from 'react'
+import { MenuIcon } from '../icons/IconSet.tsx'
+import { ThemeToggle } from '../controls/ThemeToggle.tsx'
+import type { DashboardConfig } from '../../config/dashboard.config.ts'
+
+export interface HeaderProps {
+  config: DashboardConfig
+  pageTitle?: string
+  onOpenSidebar?: () => void
+  trailingActions?: ReactNode
+  className?: string
+}
+
+export function Header({
+  config,
+  pageTitle,
+  onOpenSidebar,
+  trailingActions,
+  className = '',
+}: HeaderProps) {
+  const { branding, userMenu } = config
+  const LogoIcon = branding.logoIcon
+
+  return (
+    <header className={`shrink-0 bg-white dark:bg-[#111315] border-b border-border/20 ${className}`}>
+      <div className="flex h-16 items-center gap-3 px-4 sm:px-6 lg:px-8">
+        {onOpenSidebar ? (
+          <button
+            type="button"
+            onClick={onOpenSidebar}
+            aria-label="Open navigation drawer"
+            className="inline-flex items-center justify-center rounded-xl p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring lg:hidden"
+          >
+            <MenuIcon className="h-5 w-5" />
+          </button>
+        ) : null}
+
+        <a
+          href={branding.homeRoute}
+          aria-label={`${branding.name} home`}
+          className="flex items-center gap-2.5 text-base font-bold tracking-tight text-foreground transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-xl"
+        >
+          {branding.logoUrl ? (
+            <img
+              src={branding.logoUrl}
+              alt=""
+              className="h-8 w-8 shrink-0 rounded-xl object-cover shadow-xs"
+            />
+          ) : LogoIcon ? (
+            <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary shadow-xs">
+              <LogoIcon className="h-5 w-5" />
+            </span>
+          ) : (
+            <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-primary text-white font-bold text-sm shadow-xs">
+              {branding.name.charAt(0)}
+            </span>
+          )}
+          <span className="text-base font-bold tracking-tight text-foreground">
+            {branding.name}
+          </span>
+        </a>
+
+        {pageTitle && pageTitle !== branding.name ? (
+          <>
+            <span className="hidden h-4 w-px bg-border/60 lg:block ml-1" aria-hidden="true" />
+            <h1 className="hidden text-sm font-medium tracking-normal text-muted-foreground lg:block">
+              {pageTitle}
+            </h1>
+          </>
+        ) : null}
+
+        <div className="ml-auto flex items-center gap-2">
+          {trailingActions}
+          <ThemeToggle />
+
+          {userMenu ? (
+            <a
+              href={userMenu.profileRoute || '/settings'}
+              title={userMenu.name}
+              aria-label={`User profile: ${userMenu.name}`}
+              className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary ring-1 ring-inset ring-primary/20 transition-transform hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {userMenu.initials || userMenu.name.slice(0, 2).toUpperCase()}
+            </a>
+          ) : null}
+        </div>
+      </div>
+    </header>
+  )
+}

package/templates/source/components/layout/PageHeader.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react'
+
+export interface PageHeaderProps {
+  title: string
+  description?: string
+  actions?: ReactNode
+  className?: string
+}
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+  className = '',
+}: PageHeaderProps) {
+  return (
+    <header className={`mb-6 flex flex-wrap items-start justify-between gap-4 ${className}`}>
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight text-foreground">{title}</h1>
+        {description ? (
+          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+      {actions ? <div className="flex items-center gap-3">{actions}</div> : null}
+    </header>
+  )
+}

package/templates/source/components/layout/Sidebar.tsx

@@ -0,0 +1,202 @@
+import type { ReactNode } from 'react'
+import { CloseIcon, CollapseIcon, SignOutIcon } from '../icons/IconSet.tsx'
+import { NavItem } from '../navigation/NavItem.tsx'
+import type { DashboardConfig } from '../../config/dashboard.config.ts'
+
+export interface SidebarProps {
+  config: DashboardConfig
+  collapsed: boolean
+  mobileOpen: boolean
+  currentPath?: string
+  onToggleCollapse: () => void
+  onCloseMobile: () => void
+  onNavigate?: (to: string) => void
+  footerSlot?: ReactNode
+  className?: string
+}
+
+export function Sidebar({
+  config,
+  collapsed,
+  mobileOpen,
+  currentPath = '/dashboard',
+  onToggleCollapse,
+  onCloseMobile,
+  onNavigate,
+  footerSlot,
+  className = '',
+}: SidebarProps) {
+  const { branding, navigation, userMenu } = config
+  const LogoIcon = branding.logoIcon
+
+  const renderNavList = (isMobile = false) => (
+    <div className="flex h-full flex-col bg-white dark:bg-[#111315] text-foreground select-none">
+      {/* MOBILE DRAWER HEADER */}
+      {isMobile ? (
+        <div className="flex h-16 shrink-0 items-center justify-between px-4 border-b border-border/30">
+          <a
+            href={branding.homeRoute}
+            onClick={() => onCloseMobile()}
+            className="flex items-center gap-2.5 text-base font-bold tracking-tight text-foreground"
+          >
+            {branding.logoUrl ? (
+              <img src={branding.logoUrl} alt="" className="h-8 w-8 rounded-xl object-cover" />
+            ) : LogoIcon ? (
+              <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-primary/10 text-primary">
+                <LogoIcon className="h-5 w-5" />
+              </span>
+            ) : (
+              <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-primary text-white font-bold text-sm">
+                {branding.name.charAt(0)}
+              </span>
+            )}
+            <span>{branding.name}</span>
+          </a>
+          <button
+            type="button"
+            onClick={onCloseMobile}
+            aria-label="Close navigation"
+            className="inline-flex items-center justify-center rounded-xl p-2 text-muted-foreground hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <CloseIcon className="h-5 w-5" />
+          </button>
+        </div>
+      ) : (
+        /* DESKTOP COLLAPSE BUTTON */
+        <div
+          className={`shrink-0 pt-3 pb-2 px-3.5 ${
+            collapsed ? 'flex justify-center' : 'flex justify-start'
+          }`}
+        >
+          <button
+            type="button"
+            onClick={onToggleCollapse}
+            aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            className="inline-flex h-9 w-9 items-center justify-center rounded-xl text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <CollapseIcon
+              className={`h-4 w-4 shrink-0 transition-transform duration-200 ${
+                collapsed ? 'rotate-180' : ''
+              }`}
+            />
+          </button>
+        </div>
+      )}
+
+      {/* NAVIGATION ITEMS */}
+      <nav aria-label="Primary" className="flex-1 space-y-1.5 overflow-y-auto px-2 py-4">
+        {!collapsed && !isMobile ? (
+          <p className="px-4 pb-2 text-[11px] font-bold uppercase tracking-wider text-muted-foreground/70">
+            Navigation
+          </p>
+        ) : null}
+
+        {navigation.map((item) => {
+          const active = currentPath === item.to || (item.end && currentPath.startsWith(item.to))
+          return (
+            <NavItem
+              key={item.id}
+              label={item.label}
+              to={item.to}
+              icon={item.icon}
+              badge={item.badge}
+              active={active}
+              collapsed={!isMobile && collapsed}
+              onClick={() => {
+                onNavigate?.(item.to)
+                if (isMobile) onCloseMobile()
+              }}
+            />
+          )
+        })}
+      </nav>
+
+      {/* USER PROFILE FOOTER */}
+      {footerSlot || (
+        <div className="border-t border-border/30 p-3">
+          {collapsed && !isMobile ? (
+            <div className="flex flex-col items-center gap-2">
+              <a
+                href={userMenu.profileRoute || '/settings'}
+                title={userMenu.name}
+                aria-label={userMenu.name}
+                className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-[13px] font-semibold text-primary ring-1 ring-inset ring-primary/20"
+              >
+                {userMenu.initials || userMenu.name.slice(0, 2).toUpperCase()}
+              </a>
+              {userMenu.onLogout ? (
+                <button
+                  type="button"
+                  onClick={userMenu.onLogout}
+                  aria-label="Log out"
+                  title="Log out"
+                  className="inline-flex items-center justify-center rounded-lg p-2 text-muted-foreground hover:bg-muted hover:text-foreground focus:outline-none"
+                >
+                  <SignOutIcon className="h-5 w-5" />
+                </button>
+              ) : null}
+            </div>
+          ) : (
+            <div className="flex items-center justify-between gap-3 px-2 py-1">
+              <div className="flex items-center gap-3 min-w-0">
+                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[13px] font-semibold text-primary ring-1 ring-inset ring-primary/20">
+                  {userMenu.initials || userMenu.name.slice(0, 2).toUpperCase()}
+                </span>
+                <div className="min-w-0">
+                  <p className="truncate text-xs font-semibold text-foreground">{userMenu.name}</p>
+                  {userMenu.email ? (
+                    <p className="truncate text-[11px] text-muted-foreground">{userMenu.email}</p>
+                  ) : null}
+                </div>
+              </div>
+              {userMenu.onLogout ? (
+                <button
+                  type="button"
+                  onClick={userMenu.onLogout}
+                  aria-label="Log out"
+                  className="inline-flex items-center justify-center rounded-lg p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+                >
+                  <SignOutIcon className="h-4 w-4" />
+                </button>
+              ) : null}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <>
+      {/* DESKTOP IN-FLOW RAIL */}
+      <aside
+        className={`hidden shrink-0 transition-[width] duration-200 ease-in-out lg:block ${
+          collapsed ? 'w-16' : 'w-64'
+        } ${className}`}
+      >
+        {renderNavList(false)}
+      </aside>
+
+      {/* MOBILE BACKDROP */}
+      <div
+        aria-hidden="true"
+        onClick={onCloseMobile}
+        className={`fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity duration-200 lg:hidden ${
+          mobileOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
+        }`}
+      />
+
+      {/* MOBILE OFF-CANVAS DRAWER */}
+      <aside
+        aria-label="Navigation drawer"
+        aria-hidden={!mobileOpen}
+        className={`fixed inset-y-0 left-0 z-50 w-64 shadow-2xl transition-transform duration-200 ease-in-out lg:hidden ${
+          mobileOpen ? 'translate-x-0' : '-translate-x-full pointer-events-none'
+        }`}
+      >
+        {renderNavList(true)}
+      </aside>
+    </>
+  )
+}

package/templates/source/components/metrics/MetricRow.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react'
+
+export interface MetricItem {
+  id: string
+  label: string
+  value: ReactNode
+  to?: string
+  onClick?: () => void
+}
+
+export interface MetricRowProps {
+  metrics: MetricItem[]
+  className?: string
+}
+
+export function MetricRow({ metrics, className = '' }: MetricRowProps) {
+  return (
+    <section aria-label="Summary Metrics" className={`pt-2 ${className}`}>
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {metrics.map((item) => {
+          const content = (
+            <div className="rounded-2xl border border-border/40 bg-surface dark:bg-surface-elevated/40 px-4 py-3 shadow-2xs hover:border-primary/40 transition-colors group">
+              <p className="text-xl font-bold tabular-nums text-foreground group-hover:text-primary transition-colors">
+                {item.value}
+              </p>
+              <p className="text-xs text-muted-foreground truncate">{item.label}</p>
+            </div>
+          )
+
+          if (item.to) {
+            return (
+              <a
+                key={item.id}
+                href={item.to}
+                onClick={(e) => {
+                  if (item.onClick) {
+                    e.preventDefault()
+                    item.onClick()
+                  }
+                }}
+                className="block focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-2xl"
+              >
+                {content}
+              </a>
+            )
+          }
+
+          return (
+            <div
+              key={item.id}
+              onClick={item.onClick}
+              className={item.onClick ? 'cursor-pointer' : undefined}
+            >
+              {content}
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}