NextBento logoNextBento
Get NextBento

Documentation

Guides and references

Dashboard

Dashboard

Dashboard layout, sidebar, and app pages.

Overview

The dashboard is the authenticated area of NextBento. It includes a sidebar, header, and multiple app pages.

Authenticated dashboard — sidebar, header, and main content

Layout

app/(dashboard)/layout.tsx:

  • Wraps all dashboard routes
  • Renders AppSidebar and SiteHeader
  • Checks auth — redirects to /login if not logged in
  • Calls ensureSubscription for plan badge
  • Uses SidebarProvider for responsive sidebar

Sidebar

components/app-sidebar.tsx — Main navigation:

  • Dashboards: Dashboard 1, Dashboard 2
  • Apps: Mail, Tasks, Chat, Calendar
  • Users: User management
  • FAQs: In-app FAQs
  • Admin: Team, API Keys, Activity
  • Settings: Account, Billing, etc.

Dashboard Variants

RouteDescription
/dashboardDefault dashboard (redirects or main view)
/dashboard-1Dashboard with section cards, chart
/dashboard-2Dashboard with metrics, sales chart, transactions

App Pages

RouteDescription
/mailMail app (inbox-style)
/tasksTasks with data table, filters
/chatChat interface
/calendarCalendar with events
/usersUser management table
/faqsFAQ list with categories
Dashboard 1
Mail
Tasks
Chat
Calendar

Subscription Checks

The layout fetches subscription status for:

  • Plan badge in sidebar
  • Trial/active/canceled state
  • Usage limit alerts (usage-limit-alert.tsx, trial-expiration-alert.tsx)

Key Components

ComponentDescription
components/app-sidebar.tsxSidebar navigation
components/site-header.tsxTop header with search
components/site-footer.tsxDashboard footer
components/command-search.tsx⌘K command palette
components/nav-user.tsxUser menu in header
components/feedback-modal.tsxFeedback form

Next Steps

  • Admin — Team, API Keys, Activity
  • Settings — User settings pages
PreviousOverviewNextOverview