Dashboard Overview

export default function DashboardLayout({ children }: { children: ReactNode }) {
  return (
    <AuthProvider>              {/* 1. Provides user authentication context */}
      <SidebarProvider>         {/* 2. Controls sidebar open/close state */}
        <AppSidebar />          {/* 3. The left sidebar with navigation */}
        <SidebarInset>          {/* 4. Container for main content area */}
          <div className="flex flex-1 flex-col">
            {children}          {/* 5. Your actual page content goes here */}
          </div>
        </SidebarInset>
      </SidebarProvider>
    </AuthProvider>
  );
}

export default function DashboardPage() {
  return (
    <>
      <DashboardHeader breadcrumb={...} actions={...} />  {/* Top bar */}
      <div className="flex flex-col gap-4 py-4">
        <SectionCards />           {/* Metric cards (Revenue, Users, etc.) */}
        <ChartAreaInteractive />   {/* Charts and graphs */}
        <DataTable data={data} />  {/* Data tables */}
      </div>
    </>
  );
}

export default function GeneralSettingsPage() {
  return (
    <>
      <DashboardHeader breadcrumb="Settings > General" />
      <div className="p-4">
        {/* Settings form */}
      </div>
    </>
  );
}

const navMain = [
  {
    title: "Settings",
    url: "/dashboard/settings",
    icon: Settings2,
    isActive: pathname.startsWith("/dashboard/settings"),
    items: [
      { title: "General", url: "/dashboard/settings/general" },
      { title: "Account", url: "/dashboard/settings/account" },
    ],
  },
];

import { DashboardHeader } from "./layout";

<DashboardHeader 
  breadcrumb={<Breadcrumb>...</Breadcrumb>}
  actions={<Button>Custom Action</Button>}  // Optional extra buttons
/>

sabo/src/app/(dashboard)/dashboard/
├── layout.tsx              ← Wrapper for all dashboard pages
├── page.tsx                ← Main dashboard page (/dashboard)
└── settings/
    ├── general/page.tsx    ← Profile settings
    ├── account/page.tsx    ← Email/password
    ├── billing/page.tsx    ← Subscription
    └── notifications/      ← Email toggles
        └── page.tsx

sabo/src/components/dashboard/
├── app-sidebar.tsx         ← Left navigation sidebar
├── nav-main.tsx            ← Main navigation items
├── nav-secondary.tsx       ← Secondary links (Support, etc.)
├── nav-user.tsx            ← User dropdown in sidebar footer
├── nav-projects.tsx        ← Projects list
├── team-switcher.tsx       ← Team/workspace switcher
├── header-user-menu.tsx    ← Top-right user avatar menu
├── notifications-dropdown.tsx  ← Bell icon notifications
├── section-cards.tsx       ← Metric cards (Revenue, Users)
├── data-table.tsx          ← Data tables with sorting/filtering
└── chart-area-interactive.tsx  ← Charts and graphs

const protectedRoutes = ['/dashboard'];  // Requires sign-in
const authRoutes = ['/sign-in', '/sign-up'];  // Redirects if already signed in

import { DashboardHeader } from "../layout";

export default function AnalyticsPage() {
  return (
    <>
      <DashboardHeader breadcrumb="Analytics" />
      <div className="p-4">
        <h1>Analytics Dashboard</h1>
        {/* Your analytics content */}
      </div>
    </>
  );
}

const navMain = [
  {
    title: "Analytics",      // ← Add this item
    url: "/dashboard/analytics",
    icon: BarChart,
    isActive: pathname === "/dashboard/analytics",
  },
  // ... other items
];