jacobh2
76b1e712b9
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
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
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">{t('daysBreakdown.empty')}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div data-testid="days-breakdown" className="days-breakdown">
|
|
<table className="days-breakdown__table">
|
|
<thead>
|
|
<tr>
|
|
<th>{t('daysBreakdown.typeHeader')}</th>
|
|
<th>{t('daysBreakdown.daysHeader')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{breakdown.map((item, idx) => (
|
|
<tr key={idx} data-testid={`breakdown-row-${item.type}`}>
|
|
<td>{item.type}</td>
|
|
<td>{item.count}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|