Complete NextSteps roadmap: planning engine UI, calendar cluster, flexible wishes

Works through every numbered item in NextSteps260913.md section 3, plus the
three known verification issues in section 4.1.

Surface what the backend already computed:
- 3.1 render surplus_advice in PlanResults, mirroring the shortfall remedies
- 3.2 surface VacationBalance.is_assumed so assumed statutory years are visible
- 3.3 age-4 expiry given the proposed plan, via a new Age4Projection reusing
  the existing _age4_projections arithmetic (Dashboard stat verified, not rebuilt)

Calendar cluster (one pass over the holiday data):
- new GET /api/calendar/days exposing roda dagar, klamdagar and day overrides,
  paginated four years at a time
- 3.4 shade roda dagar/klamdagar, with R/K badges so colour is not the only signal
- 3.6 click-to-override behind an explicit mode toggle, leaving drag multi-select intact
- 3.7 click month/year to advance
- 3.8 per-year red-days list in Settings, statutory days plus overrides

i18n:
- 3.5 five backend-generated Swedish surfaces converted to message_key + data,
  following the tips_service pattern; old string fields replaced, not kept

Flexible wishes (3.9):
- PLANNING_ENGINE_SPEC section 10: window_mode, candidate search, cost function,
  deterministic tie-break, two-pass ordering, test matrix rows 15-24
- backend: entity, migration 006, _FULL_SCHEMA sync, repository, allocator
- frontend: season-preset toggle in WishEditor, unplaced outcome rendering

Fixes (4.1):
- pin typecheck to the local tsc rather than npx resolving a newer TypeScript
- ignore generated coverage/ and dist/ in the ESLint flat config
- fix the flaky usePlanApply test properly, with waitFor rather than a retry

Tests: backend 361 -> 404, frontend 540 -> 704. Coverage 89.47% -> 96.52% lines.

Not yet verified in a browser.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RXMhc9nT6sNz1SL4j8dznL

frontend/src/components/dashboard/DaysBreakdown.test.tsx

@@ -5,7 +5,7 @@ import { DaysBreakdown } from './DaysBreakdown'
 describe('DaysBreakdown', () => {
   it('renders empty state when no breakdown provided', () => {
     const { getByTestId } = render(<DaysBreakdown breakdown={[]} />)
-    expect(getByTestId('days-breakdown').textContent).toContain('No days recorded yet')
+    expect(getByTestId('days-breakdown').textContent).toContain('Inga dagar registrerade än')
   })
 
   it('renders table with breakdown data', () => {

frontend/src/components/dashboard/DaysBreakdown.tsx

@@ -1,14 +1,17 @@
 import { ReactNode } from 'react'
+import { useTranslation } from '@/i18n'
 
 export interface DaysBreakdownProps {
   breakdown: Array<{ type: string; count: number }>
 }
 
 export function DaysBreakdown({ breakdown }: DaysBreakdownProps): ReactNode {
+  const { t } = useTranslation()
+
   if (!breakdown || breakdown.length === 0) {
     return (
       <div data-testid="days-breakdown" className="days-breakdown">
-        <p className="days-breakdown__empty">No days recorded yet</p>
+        <p className="days-breakdown__empty">{t('daysBreakdown.empty')}</p>
       </div>
     )
   }
@@ -18,8 +21,8 @@ export function DaysBreakdown({ breakdown }: DaysBreakdownProps): ReactNode {
       <table className="days-breakdown__table">
         <thead>
           <tr>
-            <th>Leave Type</th>
-            <th>Days</th>
+            <th>{t('daysBreakdown.typeHeader')}</th>
+            <th>{t('daysBreakdown.daysHeader')}</th>
           </tr>
         </thead>
         <tbody>

frontend/src/components/dashboard/OverviewMetrics.test.tsx

@@ -10,7 +10,7 @@ describe('OverviewMetrics', () => {
 
   it('renders default title', () => {
     render(<OverviewMetrics metrics={[]} />)
-    expect(screen.getByTestId('metrics-title')).toHaveTextContent('Overview')
+    expect(screen.getByTestId('metrics-title')).toHaveTextContent('Översikt')
   })
 
   it('renders custom title', () => {
@@ -20,14 +20,14 @@ describe('OverviewMetrics', () => {
 
   it('renders metrics list with items', () => {
     const metrics = [
-      { label: 'Days Used', value: '10', testId: 'days-used' },
-      { label: 'Days Left', value: '15', testId: 'days-left' },
+      { label: 'Använda dagar', value: '10', testId: 'days-used' },
+      { label: 'Kvarvarande dagar', value: '15', testId: 'days-left' },
     ]
     render(<OverviewMetrics metrics={metrics} />)
 
-    expect(screen.getByTestId('metric-label-0')).toHaveTextContent('Days Used:')
+    expect(screen.getByTestId('metric-label-0')).toHaveTextContent('Använda dagar:')
     expect(screen.getByTestId('metric-value-0')).toHaveTextContent('10')
-    expect(screen.getByTestId('metric-label-1')).toHaveTextContent('Days Left:')
+    expect(screen.getByTestId('metric-label-1')).toHaveTextContent('Kvarvarande dagar:')
     expect(screen.getByTestId('metric-value-1')).toHaveTextContent('15')
   })
 

frontend/src/components/dashboard/OverviewMetrics.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { useTranslation } from '@/i18n'
 
 interface Metric {
   label: string
@@ -11,10 +12,12 @@ interface OverviewMetricsProps {
   title?: string
 }
 
-export function OverviewMetrics({ metrics, title = 'Overview' }: OverviewMetricsProps): ReactNode {
+export function OverviewMetrics({ metrics, title }: OverviewMetricsProps): ReactNode {
+  const { t } = useTranslation()
+  const resolvedTitle = title ?? t('overviewMetrics.defaultTitle')
   return (
-    <section role="region" aria-label={title} data-testid="overview-metrics" className="overview-metrics">
-      <h2 data-testid="metrics-title" className="overview-metrics__title">{title}</h2>
+    <section role="region" aria-label={resolvedTitle} data-testid="overview-metrics" className="overview-metrics">
+      <h2 data-testid="metrics-title" className="overview-metrics__title">{resolvedTitle}</h2>
       <div role="list" data-testid="metrics-list" className="overview-metrics__list">
         {metrics.map((metric, index) => (
           <div

frontend/src/components/dashboard/ParentalLeaveBreakdown.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { ParentalLeaveBreakdown } from './ParentalLeaveBreakdown'
+import { LEAVE_RULES } from '@/utils/constants'
 import type { ParentalLeaveFetch } from '@/types'
 
 describe('ParentalLeaveBreakdown', () => {
@@ -38,14 +39,19 @@ describe('ParentalLeaveBreakdown', () => {
   it('renders breakdown table with data', () => {
     render(<ParentalLeaveBreakdown data={mockData} />)
     expect(screen.getByTestId('parental-leave-breakdown')).toBeInTheDocument()
-    expect(screen.getByText(/Reserverade dagar/)).toBeInTheDocument()
+    expect(screen.getByTestId('breakdown-transferable')).toBeInTheDocument()
   })
 
-  it('displays reserved days', () => {
+  it('does not render a reserved-days countdown row', () => {
     render(<ParentalLeaveBreakdown data={mockData} />)
-    const row = screen.getByTestId('breakdown-reserved')
-    expect(row).toHaveTextContent('80')
-    expect(row).toHaveTextContent('90')
+    expect(screen.queryByTestId('breakdown-reserved')).not.toBeInTheDocument()
+  })
+
+  it('displays a reserved-days explanatory note instead of a countdown', () => {
+    render(<ParentalLeaveBreakdown data={mockData} />)
+    const note = screen.getByTestId('reserved-days-note')
+    expect(note).toHaveTextContent(`${LEAVE_RULES.reservedDaysPerParent} av dina dagar är reserverade`)
+    expect(note).toHaveTextContent(`max ${LEAVE_RULES.transferableDaysPerParent} dagar kan överlåtas`)
   })
 
   it('displays transferable days', () => {

frontend/src/components/dashboard/ParentalLeaveBreakdown.tsx

@@ -1,26 +1,31 @@
 import { ReactNode } from 'react'
 import type { ParentalLeaveFetch } from '@/types'
+import { LEAVE_RULES } from '@/utils/constants'
+import { useTranslation } from '@/i18n'
 
 export interface ParentalLeaveBreakdownProps {
   data: ParentalLeaveFetch | null
 }
 
 export function ParentalLeaveBreakdown({ data }: ParentalLeaveBreakdownProps): ReactNode {
+  const { t, locale } = useTranslation()
+
   if (!data) {
     return (
       <div data-testid="parental-leave-breakdown" className="parental-leave-breakdown">
-        <p className="parental-leave-breakdown__empty">
-          Ingen data hämtad ännu — tryck på Hämta från Försäkringskassan.
-        </p>
+        <p className="parental-leave-breakdown__empty">{t('parentalLeaveBreakdown.empty')}</p>
       </div>
     )
   }
 
   const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString('sv-SE')
+    return new Date(dateString).toLocaleDateString(locale === 'sv' ? 'sv-SE' : 'en-US')
   }
 
-  const sourceLabel = data.source === 'scraped' ? 'Hämtad från Försäkringskassan' : 'Manuellt angiven'
+  const sourceLabel =
+    data.source === 'scraped'
+      ? t('parentalLeaveBreakdown.sourceScraped')
+      : t('parentalLeaveBreakdown.sourceManual')
 
   return (
     <div data-testid="parental-leave-breakdown" className="parental-leave-breakdown">
@@ -28,36 +33,31 @@ export function ParentalLeaveBreakdown({ data }: ParentalLeaveBreakdownProps): R
         <table className="parental-leave-breakdown__table">
           <thead>
             <tr>
-              <th>Typ</th>
-              <th>Återstående</th>
-              <th>Totalt</th>
+              <th>{t('parentalLeaveBreakdown.typeHeader')}</th>
+              <th>{t('parentalLeaveBreakdown.remainingHeader')}</th>
+              <th>{t('parentalLeaveBreakdown.totalHeader')}</th>
             </tr>
           </thead>
           <tbody>
-            <tr data-testid="breakdown-reserved">
-              <td>Reserverade dagar</td>
-              <td>{data.reservedDaysLeft}</td>
-              <td>{data.reservedDaysTotal}</td>
-            </tr>
             <tr data-testid="breakdown-transferable">
-              <td>Övergripbara dagar</td>
+              <td>{t('parentalLeaveBreakdown.transferableDays')}</td>
               <td>{data.transferableDaysLeft}</td>
               <td>—</td>
             </tr>
             <tr data-testid="breakdown-dubbeldagar">
-              <td>Dubbeldagar kvar</td>
+              <td>{t('parentalLeaveBreakdown.dubbeldagarLeft')}</td>
               <td>{data.dubbeldagarLeft}</td>
               <td>—</td>
             </tr>
             {data.tierData && (
               <>
                 <tr data-testid="breakdown-sjukpenning">
-                  <td>Sjukpenning</td>
+                  <td>{t('parentalLeaveBreakdown.sjukpenning')}</td>
                   <td>{data.tierData.sjukpenningLeft}</td>
                   <td>{data.tierData.sjukpenningTotal}</td>
                 </tr>
                 <tr data-testid="breakdown-lagsta-niva">
-                  <td>Lägsta nivå</td>
+                  <td>{t('parentalLeaveBreakdown.lagstaNiva')}</td>
                   <td>{data.tierData.lagstaNivaLeft}</td>
                   <td>{data.tierData.lagstaNivaTotal}</td>
                 </tr>
@@ -67,6 +67,13 @@ export function ParentalLeaveBreakdown({ data }: ParentalLeaveBreakdownProps): R
         </table>
       </div>
 
+      <p className="parental-leave-breakdown__reserved-note" data-testid="reserved-days-note">
+        {t('parentalLeaveBreakdown.reservedNote', {
+          reserved: LEAVE_RULES.reservedDaysPerParent,
+          transferable: LEAVE_RULES.transferableDaysPerParent,
+        })}
+      </p>
+
       <div className="parental-leave-breakdown__provenance">
         <small>
           {sourceLabel} {formatDate(data.fetchedAt)}

frontend/src/components/dashboard/ProgressChart.test.tsx

@@ -21,7 +21,7 @@ describe('ProgressChart', () => {
     const { getByTestId } = render(
       <ProgressChart currentWeeks={10} targetWeeks={50} />
     )
-    expect(getByTestId('current-weeks').textContent).toBe('10 / 50 weeks')
+    expect(getByTestId('current-weeks').textContent).toBe('10 / 50 veckor')
   })
 
   it('sets fill width based on percentage', () => {
@@ -51,7 +51,7 @@ describe('ProgressChart', () => {
     const { getByTestId } = render(
       <ProgressChart currentWeeks={10} targetWeeks={50} childAge={2} />
     )
-    expect(getByTestId('progress-chart').textContent).toContain('Age: 2')
+    expect(getByTestId('progress-chart').textContent).toContain('Ålder: 2')
   })
 
   it('handles zero target weeks', () => {

frontend/src/components/dashboard/ProgressChart.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { useTranslation } from '@/i18n'
 
 export interface ProgressChartProps {
   currentWeeks: number
@@ -11,13 +12,16 @@ export function ProgressChart({
   targetWeeks,
   childAge,
 }: ProgressChartProps): ReactNode {
+  const { t } = useTranslation()
   const percentage = targetWeeks > 0 ? Math.min((currentWeeks / targetWeeks) * 100, 100) : 0
 
   return (
     <div data-testid="progress-chart" className="progress-chart">
       <div className="progress-chart__header">
-        <h3>Parental Leave Progress</h3>
-        {childAge !== undefined && <span className="progress-chart__age">Age: {childAge}</span>}
+        <h3>{t('progressChart.title')}</h3>
+        {childAge !== undefined && (
+          <span className="progress-chart__age">{t('progressChart.age', { age: childAge })}</span>
+        )}
       </div>
       <div className="progress-chart__bar">
         <div
@@ -28,7 +32,7 @@ export function ProgressChart({
       </div>
       <div className="progress-chart__stats">
         <span data-testid="current-weeks">
-          {currentWeeks} / {targetWeeks} weeks
+          {t('progressChart.weeksStat', { current: currentWeeks, target: targetWeeks })}
         </span>
         <span data-testid="percentage" className="progress-chart__percentage">
           {Math.round(percentage)}%