Dashboard Layout

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex h-screen bg-(--surface-sunken)">
      {/* Sidebar */}
      <aside className="hidden md:flex w-60 flex-col border-r
        border-(--border) bg-(--surface-elevated)">
        <div className="p-4 border-b border-(--border)">
          <Logo />
        </div>
        <nav className="flex-1 p-3 space-y-1">
          <NavItem href="/dashboard" active>Dashboard</NavItem>
          <NavItem href="/analytics">Analytics</NavItem>
          <NavItem href="/customers">Customers</NavItem>
          <NavItem href="/orders">Orders</NavItem>
          <NavItem href="/settings">Settings</NavItem>
        </nav>
        <UserMenu />
      </aside>

      {/* Main content */}
      <div className="flex-1 flex flex-col min-w-0">
        <header className="h-14 border-b border-(--border)
          bg-(--surface-elevated) flex items-center px-6
          justify-between">
          <SearchBar />
          <div className="flex items-center gap-3">
            <NotificationBell />
            <UserAvatar />
          </div>
        </header>

        <main className="flex-1 overflow-auto p-6">
          {children}
        </main>
      </div>
    </div>
  );
}

export default function DashboardPage() {
  return (
    <div className="space-y-6">
      {/* Stat Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2
        lg:grid-cols-4 gap-4">
        <StatCard
          label="Total Users"
          value="24,521"
          change="+12.5%"
          icon={<UserGroupIcon />}
        />
        <StatCard
          label="Revenue"
          value="$84,230"
          change="+8.2%"
          icon={<DollarCircleIcon />}
        />
        {/* ... more cards */}
      </div>

      {/* Charts */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <RevenueChart />
        <UserGrowthChart />
      </div>

      {/* Activity + Table */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2">
          <RecentOrdersTable />
        </div>
        <ActivityFeed />
      </div>
    </div>
  );
}