Build Admin Dashboard Screen with KPI Grid
epic-admin-portal-dashboard-ui-task-004 — Implement the AdminDashboardScreen that renders the KPI stat widget grid using AdminKpiStatWidget tiles. The screen must consume the AdminPortalBloc for stat data, support drill-down navigation from each widget, adapt responsively for Flutter Web wide-screen layouts and mobile embedding, and integrate the OrgHierarchyNavigator for scope selection at the top.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 2 - 518 tasks
Can start after Tier 1 completes
Implementation Notes
Implement AdminDashboardScreen as a StatelessWidget consuming AdminPortalBloc via BlocSelector for efficient rebuilds. Map DashboardStats fields to a List
The OrgHierarchyNavigator should be placed in a collapsible top panel (e.g., ExpansionTile or AnimatedContainer) on mobile to avoid consuming too much vertical space. The page header 'All Organisations' / '{Org Name}' text should be a dedicated ScopeBadge widget that reads scope from BLoC state — keep it decoupled from the grid. For the NHF use case, the dashboard is the first screen admins see after login — ensure time-to-first-meaningful-paint is fast by showing skeleton tiles immediately while data loads asynchronously. Avoid placing BLoC event dispatch calls inside build() — use initState (in StatefulWidget) or a post-frame callback for initial data load.
Testing Requirements
Widget tests using flutter_test with ProviderScope and BlocProvider overrides. Cover: (1) initial render shows shimmer tiles in loading state, (2) loaded state renders correct number of KPI tiles with correct values, (3) error state shows retry button, (4) tapping retry dispatches LoadDashboardStats event, (5) scope selection updates page header text, (6) tapping a KPI tile triggers correct navigation route, (7) grid shows 2 columns at 375px width, (8) grid shows 4 columns at 1440px width, (9) WCAG semantics check (all tiles have readable semantic labels). Integration test: mount full screen, simulate scope change, assert all tiles update with new values. Golden tests for: loaded state (desktop), loaded state (mobile), error state.
If org node selection in AdminStateBLoC does not correctly propagate to all dependent data streams (statistics, activity log, user list, certification panel), some panels may show data from the previously selected org scope, creating a confusing and potentially dangerous mixed-scope view.
Mitigation & Contingency
Mitigation: Model org node selection as a single source of truth in AdminStateBLoC. All downstream providers derive their query parameters from this single stream via Riverpod's watch pattern. Write integration tests that verify every data stream emits a reload event when the selected node changes.
Contingency: If scope propagation bugs are detected in QA, add an explicit full-state reset on org node change (clear all cached data and refetch from scratch) as a safe but less efficient fallback until the targeted propagation is fixed.
The Admin Dashboard Screen must adapt its layout for Flutter Web (wider viewports, mouse interaction, larger grid) and mobile embedding. Flutter Web responsive layout support has historically required non-trivial workarounds, and the adaptive grid may introduce significant additional development time.
Mitigation & Contingency
Mitigation: Define breakpoints and grid behaviour in the design system before implementation. Use LayoutBuilder with explicit breakpoint constants rather than MediaQuery scattered across widgets. Prototype the web layout with a skeleton screen before implementing live data binding.
Contingency: If web layout proves intractable within sprint, deliver a mobile-first layout for all platforms initially and track a dedicated web-optimisation task for the next sprint.
A bug in the Role Assignment Panel's permission scope validation could allow an org_admin to assign roles beyond their authority (e.g., assigning super_admin to a user), representing a serious privilege escalation vulnerability.
Mitigation & Contingency
Mitigation: Enforce role assignment scope on both the client (disable unavailable roles in the panel UI) and the server (UserManagementService validates the target role is within the admin's permitted scope before persisting). Write security-focused tests that attempt out-of-scope role assignments and assert rejection.
Contingency: If an escalation vulnerability is discovered, immediately disable the role assignment panel via feature flag, revoke any incorrectly assigned roles, and deploy a server-side fix before re-enabling.