Lead the overview with the days about to be lost

The page opened with generic tiles and a bar reading forty-eight of ninety-six
weeks, which was neither weeks nor connected to the age-four ceiling it appeared
to describe. It is replaced by one headline and a bar per parent, in days,
against each parent's own savable limit as the server reports it.

The headline has two framings on the same arithmetic. Before anything is
planned it says what there is to plan and what will be lost without a plan,
because on the first day almost the whole entitlement is technically at risk
and saying so bluntly reads as an accusation. Once a plan exists it warns about
the days genuinely at stake.

A timeline of the years to the fourth birthday answers what the next four years
look like, which a month-at-a-time calendar cannot. Shortfalls, surplus advice
and balances sit below the fold, read-only: applying is automatic now, so a
second apply button would be a way to get two different answers.

Rejection messages move to one shared place that resolves a parent's name, so
an identifier can no longer surface in their place.

frontend/tests/fixtures/analytics.ts

@@ -14,6 +14,7 @@ export function makeAge4Projection(overrides: Partial<Age4Projection> = {}): Age
     projectedLeftAtB4: 200,
     savableAfterB4: 96,
     expiringAtB4: 60,
+    savableCapAtB4: 96,
     ...overrides,
   }
 }

frontend/tests/fixtures/hooks.ts

@@ -22,6 +22,7 @@ import type { useDayOverrides } from '@/hooks/useDayOverrides'
 import type { useLeaveWishes } from '@/hooks/useLeaveWishes'
 import type { usePlanProposal } from '@/hooks/usePlanProposal'
 import type { usePlanApply } from '@/hooks/usePlanApply'
+import type { usePlanSync } from '@/hooks/usePlanSync'
 import type { useVacationDays } from '@/hooks/useVacationDays'
 import type { useChildSettings } from '@/hooks/useChildSettings'
 import type { useCalendarDays } from '@/hooks/useCalendarDays'
@@ -209,6 +210,18 @@ export function makePlanApplyResult(
   }
 }
 
+export function makePlanSyncResult(
+  overrides: Partial<ReturnType<typeof usePlanSync>> = {},
+): ReturnType<typeof usePlanSync> {
+  return {
+    isSyncing: false,
+    error: null,
+    lastChanges: null,
+    sync: vi.fn(),
+    ...overrides,
+  }
+}
+
 export function makeVacationDaysResult(
   overrides: Partial<ReturnType<typeof useVacationDays>> = {},
 ): ReturnType<typeof useVacationDays> {

frontend/tests/fixtures/mockData.ts

@@ -140,6 +140,7 @@ export function makeLeaveWish(overrides: Partial<LeaveWish> = {}): LeaveWish {
     windowEndMonth: 7,
     windowEndDay: 26,
     targetWeeks: 6,
+    targetDays: null,
     recurrence: 'yearly',
     firstYear: 2026,
     lastYear: null,

frontend/tests/fixtures/plan.ts

@@ -8,7 +8,9 @@ import type {
   DayCollision,
   PlanAge4Projection,
   PlanApplyResponse,
+  PlanChange,
   PlanProposal,
+  PlanSyncResponse,
   PlanWarning,
   PoolBalance,
   ProposedDay,
@@ -180,3 +182,30 @@ export function makePlanApplyResponse(overrides: Partial<PlanApplyResponse> = {}
     ...overrides,
   }
 }
+
+/** `POST /api/plan/sync` — one (child, parent, date) slot's delta. See
+ * `PlanChange`'s docstring (src/types/entities.ts) for the `kind` vocabulary. */
+export function makePlanChange(overrides: Partial<PlanChange> = {}): PlanChange {
+  return {
+    kind: 'added',
+    date: '2028-06-20',
+    parentPersonalDataUuid: 'pd-a',
+    childId: 'child-1',
+    oldDayType: null,
+    newDayType: 'vacation',
+    oldIsDubbeldag: null,
+    newIsDubbeldag: false,
+    oldWishId: null,
+    newWishId: 'lw-1',
+    ...overrides,
+  }
+}
+
+export function makePlanSyncResponse(overrides: Partial<PlanSyncResponse> = {}): PlanSyncResponse {
+  return {
+    proposal: makePlanProposal(),
+    applyResult: makePlanApplyResponse(),
+    changes: [],
+    ...overrides,
+  }
+}