KPI Dashboard Page
Component Detail
User Interface
medium complexity
frontend
1
Dependencies
0
Dependents
0
Entities
0
Integrations
Description
Server-side rendered Next.js page that presents organization-level key performance indicators in a responsive card grid layout. Displays real-time metrics including active peer mentors, total activities logged, pending approvals, reimbursement totals, and Bufdir reporting progress with role-scoped visibility for coordinators versus organization administrators.
kpi-dashboard-page
Responsibilities
- Render KPI metric cards in a responsive Tailwind CSS grid layout
- Display role-appropriate metrics based on coordinator or org admin scope
- Show loading and empty states for each KPI card
- Provide drill-down navigation links from KPI cards to detailed report pages
Interfaces
renderKpiDashboard(organizationId, userRole)
KpiCard(metric, value, trend, link)
KpiGrid(metrics[])
LoadingState()
EmptyState(message)
getServerSideProps(context)