Dashboard Features

​

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} />