Dashboard KPIs

Coordinators and org admins currently rely on manual Excel aggregation to understand participation levels, leading to delayed decisions and missed follow-ups. A live KPI dashboard eliminates this lag and gives administrators the situational awareness needed to manage their organizations effectively. From a business perspective, the dashboard is the primary value proof point during pilot evaluation - decision-makers judge adoption success by numbers on a screen. Surfacing accurate, real-time activity counts and participation rates directly demonstrates ROI and accelerates organizational buy-in across all four partner organizations. The feature also reduces coordinator administrative burden: instead of querying team members individually, a single dashboard view answers daily operational questions about activity volumes, pending approvals, and engagement trends.

Implemented as a Next.js server-side rendered page within the Admin Web Portal, calling dedicated aggregation endpoints on the shared REST API. Each KPI card maps to a SQL COUNT or SUM query scoped by tenant ID, ensuring strict multi-tenant isolation. Queries must be indexed to keep dashboard load under 500ms even at scale. The KPI service layer on the backend aggregates from the activities, expenses, users, and contacts tables. Role-based scoping is enforced server-side: Org Admin queries filter by organization_id, Global Admin queries require an active support-access grant. No client-side filtering is used as a security boundary. The frontend uses Next.js dynamic data fetching with SWR or React Query for background revalidation. KpiCardWidget components receive typed props and render count + label + optional trend indicator. WCAG 2.2 AA compliance requires sufficient contrast ratios on all stat values and accessible labels on each card.