Junior Developer — Frontend Polish TODO

Owner: Junior developer Status: Ready to implement Goal: Clean up the rough edges left after the MVP happy path — surface the data we already fetch, fix placeholder math, kill the duplicate heading, drop the any casts, and backfill tests for the new code. Do this first, then move on to frontend_mvp_complete.md.

Keep npx tsc --noEmit, npm run lint, and npm test green after every task. Don't redesign anything — this is tidy-up, not new features. CSS is still out of scope (MVP can look plain).

P1 — Show the richer FK breakdown on the overview

Problem: The scraper fetches and persists a lot more than we display. The overview only shows three combined analytics numbers (Days Used / Days Left / Expiring at Age 4). The persisted ParentalLeaveFetch also has reserved vs. transferable days, dubbeldagar left, and the sjukpenning/lägstanivå tier split — all currently invisible.

Do:

In Dashboard.tsx, use the existing useParentalLeave(personalDataUuid, selectedChildId) hook (both IDs come from useWorkspace() context) to load the latest snapshot for the selected child.
Render a section showing: reserved_days_left / reserved_days_total, transferable_days_left, dubbeldagar_left, and the tier breakdown (sjukpenning_left, lagsta_niva_left). Reuse DaysBreakdown or a simple list — no new styling needed.
Show data provenance + freshness per ARCHITECTURE §2.3: "Hämtad från Försäkringskassan {fetched_at}" vs "Manuellt angiven {fetched_at}" based on source.
Handle the empty case gracefully: if there's no snapshot yet (new child, never fetched), show "Ingen data hämtad ännu — tryck på Hämta från Försäkringskassan." rather than blanks.
After a successful FK fetch, refresh this too (the modal's onDone currently calls refreshAnalytics() — also call the parental-leave hook's refresh()).

Acceptance: After a fetch, the overview shows reserved/transferable/dubbeldagar/tier numbers and a "fetched on" line; before any fetch it shows a clear empty message.

P2 — Remove the duplicate "Overview" heading

Problem: The dashboard renders <h2>Overview</h2> and then OverviewMetrics renders its own <h2>Overview</h2> (visible as two stacked "Overview" headings in the capture).

Do: Remove the redundant wrapper <h2> in Dashboard.tsx (keep the one inside OverviewMetrics, or pass a meaningful title). While you're there, make the section headings Swedish to match the rest of the app ("Översikt", "Planerade dagar", "Återstående till 4 års ålder") — small consistency win, the header already says "Översikt".

Acceptance: Exactly one "Översikt" heading for that section; headings are consistently Swedish.

P3 — Fix the ProgressChart math (currently placeholder)

Problem: Dashboard.tsx feeds ProgressChart placeholder values: currentWeeks={Math.floor(totalPlanned / 5)} against a hardcoded targetWeeks={50}. That's not a real progress metric.

Do: Drive it from real data. The intent (per ARCHITECTURE) is progress toward the age-4 deadline. Use the analytics projection — e.g. days used (or planned) vs. total entitlement (combinedDaysUsed / combinedDaysUsed + combinedDaysLeft), or days elapsed vs. days until the child turns 4. Pick the interpretation that matches what OverviewMetrics already shows and label it honestly. Remove the hardcoded 50.

Acceptance: The progress bar reflects a real ratio from analytics data; no hardcoded target weeks.

P4 — Drop the `any` casts

Problem: Dashboard.tsx (and Settings.tsx) use (d: any) / (period: any) casts and an ESLint exception was added for pages. These hide type errors.

Do: Replace the casts with the real types from @/types (PlannedLeaveDay, BreakPeriod, etc.). Fix the field-name access to match the typed shape. Once the casts are gone, remove the temporary @typescript-eslint/no-explicit-any exception for pages/ from eslint.config.js (keep the test-file exception if still needed).

Acceptance: No any in pages/; the pages-level ESLint exception is removed; tsc/lint green.

P5 — Backfill tests for the new code

Problem: The happy-path round added real code with no new tests — the count stayed at 167 (useScraperFetch, QRCodeModal, the Dashboard empty-state add-child form, and the FK-fetch button are untested).

Do: Add focused tests following the existing patterns:

useScraperFetch — start → poll transitions → done/error/cancel; timers mocked.
QRCodeModal — renders QR when awaiting_scan, spinner on authenticating/fetching, result on done, message on error; close disabled while running.
Dashboard — empty state (no children) shows the add-child form; populated state shows metrics + the FK button (disabled when no child selected).

Acceptance: New tests cover the above; full suite green and the test count goes up.

Definition of done

Overview shows the full FK breakdown with a freshness line; one clean Swedish heading; a real progress metric; zero any in pages; new tests for the scraper hook/modal/dashboard. tsc + lint + tests all green.

5.2 KiB Raw Blame History