Reimbursement Dashboard
Component Detail
User Interface
medium complexity
frontend
2
Dependencies
0
Dependents
3
Entities
0
Integrations
Description
Next.js SSR page providing organization administrators with a consolidated view of all expense reimbursements. Displays summary statistics (total reimbursed, pending payout, average per peer mentor), a tabular breakdown with sortable columns, date-range and period filters (month/quarter/year), and expense-type grouping. Restricted to Coordinator and Org Admin roles.
reimbursement-dashboard
Responsibilities
- Render summary statistics cards for total reimbursed, pending payout, and per-mentor averages
- Display sortable, filterable reimbursement table grouped by period, expense type, and user
- Provide date-range picker and period selector (month/quarter/year) for filtering
- Trigger CSV/Excel export downloads via the export API route
- Enforce role-based visibility for Coordinator and Org Admin only
Interfaces
renderDashboard(filters: DateRangeFilter): Page
handlePeriodChange(period: 'month' | 'quarter' | 'year'): void
handleDateRangeChange(start: Date, end: Date): void
handleSortChange(column: string, direction: 'asc' | 'desc'): void
handleExportClick(format: 'csv' | 'xlsx'): void
renderSummaryCards(stats: ReimbursementStats): JSX
renderReimbursementTable(data: ReimbursementRow[]): JSX
renderExpenseTypeBreakdown(breakdown: ExpenseTypeGroup[]): JSX
Relationships
Dependencies (2)
Components this component depends on
Related Data Entities (3)
Data entities managed by this component