07 — Component Library (Reports Module)
- C1 —
ReportTypeTile(S1 catalog row) - C2 —
ReportStatusBadge(S3/S4) - C3 —
JobProgressCard(S4 status card) - C4 —
JobParamChips(S4 params card) - C5 —
MetricCard(S5 result metrics) - C6 —
ReportCardResult(S5 report card) - C7 —
JobListRow(S3) - C8 —
PollingRetryButton(S4) - Shared components consumed
- Rules
Module-specific widgets on top of the shared library (00-shared/03). Reused shared components are referenced, not redefined. All widgets: Material 3, tokens 00-shared/02 (proposed),
m-*motion 00-shared/08.
C1 — ReportTypeTile (S1 catalog row)
- Extends
AppListTile. Props:label,description,badgeText?,requiredParams: String[],onTap. - Semantics: "Generate
- Data mapping: static table 04 §2; enum source
report-job.schema.ts:7-11.
C2 — ReportStatusBadge (S3/S4)
- Wraps
AppBadge; mapsReportJobStatus(report-job.schema.ts:13-18) → label/color/icon:
| Status | Label | Color | Icon |
|---|---|---|---|
queued | Queued | neutral | schedule |
processing | Processing | amber | hourglass |
completed | Completed | green | check_circle |
failed | Failed | red | error |
- Semantics:
<status> <type>live-region on change (S4).
C3 — JobProgressCard (S4 status card)
- Indeterminate
LinearProgressIndicator+ status copy + optional elapsed timer (client-side fromcreatedAt). - Props:
status,createdAt,error?. - No % bar — server exposes no progress; do NOT fake one.
- Failed variant: error icon +
errortext (report-job.schema.ts:39) + RetryAppButton.
C4 — JobParamChips (S4 params card)
- Renders
params(report-job.schema.ts:33) asAppChips; empty → muted "No parameters". Keys: type, studentId, classId, examId, startDate, endDate (generate-report.dto.ts:6-33).
C5 — MetricCard (S5 result metrics)
- Number + label card. Used by fee summary (
totalInvoices,totalCollected,totalPending,totalOverdue—reports.service.ts:154-158) and attendance (total+ per-status counts —reports.service.ts:131-136). - Currency variant for money values; integer variant otherwise.
MetricCardGridwrapper (2 cols mobile, 4 tablet).
C6 — ReportCardResult (S5 report card)
- Header (studentName — note admission number today,
reports.service.ts:98, examId, generatedAt), subject table (subjects[]fromresult.service.ts:68-91), footer metrics +gradebadge (bandsresult.service.ts:130-136). - Long subject lists → scrollable table (landscape hint).
C7 — JobListRow (S3)
- Extends
AppListTile: status leading icon, type label, relative createdAt,ReportStatusBadgetrailing, optional "Scheduled" chip. - Pull-to-refresh via
RefreshIndicator(re-poll visible rows).
C8 — PollingRetryButton (S4)
- Manual "Retry check" shown when a poll attempt fails (network); resumes the auto-poll cycle (10).
Shared components consumed
AppListTile, AppBadge, AppButton, AppChips, AppSkeleton,
AppEmptyState, AppSnackbar, AppOfflineBanner, AppBottomSheet,
AppTextField, AppDatePicker (00-shared/03; pickers for S2).
Rules
- No widget may hardcode a status/type string — always map from the server enums
so future types (
IMPLEMENTATION_PLAN.md:646) degrade to a generic row. - Fallback: unknown type label → raw enum string.