Skip to main content

​
Structure & Relationship

  • App Pages: Thin wrappers in apps/web/src/app/dashboard/* that route to features.
  • Feature Components: Main logic/UI in features/dashboard/*.
  • Pattern: Clean separation for maintainability and reusability.

​
Dashboard Landing Page

  • Purpose: Entry point after login; links to all major features.
  • Highlights: Features grid, tech stack, quick start, and welcome hero.
  • Example: 
    // apps/web/src/app/dashboard/page.tsx
export default function Dashboard() { /* ... */ }

​
Shared Layout & Navigation

  • Dashboard Layout: Auth check, navbar, and main content area. 
    // apps/web/src/app/dashboard/layout.tsx
export default function Layout({ children }) { return <>{children}</>; }
  • DashboardNavbar: Sticky header with logo, main nav, and user menu. 
    import { DashboardNavbar } from '@/layout/navbar/dashboard-navbar';
<DashboardNavbar />
  • MainNav: Links to Profile, Todos, AI, Payments, Subscription. 
    import { MainNav } from '@/layout/navbar/main-nav';
<MainNav />
  • UserNav: User dropdown for profile, settings, and logout. 
    import { UserNav } from '@/layout/navbar/user-nav';
<UserNav />

​
Settings Subpages

  • Account: Manage user account details. 
    // apps/web/src/app/dashboard/settings/account/page.tsx
export default function AccountSettings() { /* ... */ }
  • Payment: Manage payment methods and billing. 
    // apps/web/src/app/dashboard/settings/payment/page.tsx
export default function PaymentSettings() { /* ... */ }
  • Subscription: Manage SaaS plans (Polar/Stripe). 
    // apps/web/src/app/dashboard/settings/subscription/stripe/page.tsx
export default function StripeSubscription() { /* ... */ }
// .../polar/page.tsx
export default function PolarSubscription() { /* ... */ }
  • Success: Confirmation after payment/subscription changes. 
    // apps/web/src/app/dashboard/settings/success/page.tsx
export default function SuccessPage() { /* ... */ }

​
Dashboard Features

  • AIPage: AI chat interface for user queries. 
    import AIPage from '@/features/dashboard/ai/ai-page';
export default function Page() { return <AIPage />; }
  • TodosPage: CRUD todo list for personal tasks. 
    import { TodosPage } from '@/features/dashboard/todos/todos-page';
export default function Page() { return <TodosPage />; }
  • ProfilePage: User profile and subscription info. 
    import { ProfilePage } from '@/features/dashboard/profile/profile-page';
export default function Page() { return <ProfilePage />; }
  • UserAccountsCard: Linked auth accounts and tokens. 
    import { UserAccountsCard } from '@/features/dashboard/settings/user-account-card';
<UserAccountsCard accounts={accounts} />
  • UserSessionsCard: List of active user sessions/devices. 
    import { UserSessionsCard } from '@/features/dashboard/settings/user-session-card';
<UserSessionsCard sessions={sessions} />
  • UserProfileCard: Editable user profile card. 
    import { UserProfileCard } from '@/features/dashboard/settings/user-profile-card';
<UserProfileCard user={user} />
⌘I