Dashboard

The dashboard renders one of eight role-specific views — Admin, Developer, Principal, Teacher, Student, Guardian, Accountant, Staff — each composed from the same six unified sections. Routing happens via a switch in content.tsx; section components read the role and adapt content.

Server wrapper + client view

Admin, Student and Teacher follow a two-file split. The <role>.tsx file is a Server Component that does nothing but fetch — the role's dashboard data, quick look and weather in one Promise.all, plus the tenant's subdomain — and hand the result to a <role>-client.tsx view. Every widget the dashboard composes (MetricCard, ActivityRings, ScheduleItem, the charts) is already a client component, so keeping the view server-side only fragmented it into dozens of separate client boundaries.

The client view reads its copy from useDictionary() rather than a dictionary prop, which keeps section components independently composable. The server file still needs the dictionary for one thing: the two error fallbacks it can render before the client view ever mounts.

Parent, Principal, Accountant and Staff have not been split yet.

Section order

Every role renders these six sections in order. Section 2 is title-less.

Role routing

Copy// content.tsx
switch (userRole) {
  case "STUDENT":
    return <StudentDashboard {...props} />
  case "TEACHER":
    return <TeacherDashboard {...props} />
  case "GUARDIAN":
    return <ParentDashboard {...props} />
  case "STAFF":
    return <StaffDashboard {...props} />
  case "ADMIN":
  case "DEVELOPER":
    return <AdminDashboard {...props} />
  case "PRINCIPAL":
    return <PrincipalDashboard {...props} />
  case "ACCOUNTANT":
    return <AccountantDashboard {...props} />
  default:
    return <DefaultDashboard {...props} />
}

Directory layout

src/components/school-dashboard/dashboard/
├── content.tsx, client.tsx, actions.ts, config.ts, validation.ts, types.ts
├── admin.tsx, student.tsx, teacher.tsx, parent.tsx,
│   principal.tsx, accountant.tsx, staff.tsx
├── admin-client.tsx, student-client.tsx, teacher-client.tsx
├── upcoming.tsx, weather.tsx, quick-look-section.tsx,
│   quick-actions.tsx, quick-actions-config.ts,
│   resource-usage-section.tsx, invoice-history-section.tsx,
│   financial-overview-section.tsx, section-heading.tsx
├── metric-card.tsx, activity-rings.tsx, schedule-item.tsx,
│   announcement-card.tsx, progress-card.tsx, chart-card.tsx,
│   empty-state.tsx
├── attendance-chart.tsx, grade-chart.tsx, revenue-chart.tsx,
│   performance-gauge.tsx, weekly-chart.tsx, comparison-chart.tsx
├── header.tsx, loading.tsx, error-boundary.tsx,
│   search-command.tsx, notification-service.tsx,
│   project-switcher.tsx, transactions-list.tsx,
│   upgrade-card.tsx, info-card.tsx, delete-account.tsx
└── settings/  (content.tsx, user-name-form.tsx)

Showcase components (card-*.tsx, chart-*.tsx, stat-*.tsx, dashboard-showcase.tsx) document the widget library.

Upcoming flip card

Role-specific 3D flip card. Front shows primary content; back shows secondary.

Weather

Current temp, humidity, wind, rain chance + 6-day forecast. Refresh button. Falls back to mock data.

Resource usage metrics (4 per role)

Invoice history visibility

Financial overview

Quick actions (4 per role)

Server actions

Render pattern

Each role dashboard reduces to the same shell.

Copyexport async function RoleDashboard({ user, dictionary, locale }: Props) {
  const { schoolId } = await getTenantContext()
  const school = await db.school.findUnique({ where: { id: schoolId } })
  const subdomain = school?.domain ?? ""
 
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <Upcoming role="ROLE" locale={locale} subdomain={subdomain} />
        <Weather />
      </div>
      <QuickLookSection />
      <SectionHeading title="Quick Actions" icon={Zap} />
      <QuickActionsSection role="ROLE" locale={locale} subdomain={subdomain} />
      <ResourceUsageSection role="ROLE" />
      <InvoiceHistorySection role="ROLE" />
      <FinancialOverviewSection role="ROLE" />
    </div>
  )
}

Shared widgets

See also

• Pattern
• Multi-Tenancy
• Layout