KpiCardWidget
Component Detail
User Interface
medium complexity
frontend
0
Dependencies
0
Dependents
0
Entities
0
Integrations
Description
A reusable card component that displays a single KPI metric with its label, current value, and optional trend indicator. It receives data as props and delegates no fetching logic, making it purely presentational. Used multiple times on the dashboard to surface individual metrics such as activity count, active mentor count, pending approvals, and expense totals.
kpi-card-widget
Sources & reasoning
Line 195 explicitly names dashboards and KPIs as a core Admin Web Portal capability. Line 158 classifies the admin panel as MUST HAVE in Fase 1 (MVP). Line 326 confirms activity overview and basic statistics are in the MVP admin scope, directly motivating a KPI-centric landing screen for immediate operational visibility without manual navigation.
-
docs/source/likeperson.md · line 158Admingrensesnitt for org (Admin Panel - Next.js) | ✓ | ✓ | ✓ | ✓ | ✓ | MUST HAVE | 1
-
docs/source/likeperson.md · line 195Coordinator and organization-level dashboards and KPIs
-
docs/source/likeperson.md · line 326Aktivitetsoversikt og grunnleggende statistikk
Responsibilities
- Display a KPI label, numeric value, and unit
- Render a trend indicator (up/down/neutral) when trend data is provided
- Apply accent color theming based on metric category
- Emit a click event when the card is selected for drill-down navigation
Interfaces
render(props: KpiCardProps): JSX.Element
onClick(metricKey: string): void