jacobh2
80b4f1cb52
The dashboard now leads with a typographic headline, three key figures, per-parent age-4 bars and one row per year until the fourth birthday. Each year row shows the timeline bands beside each parent's parental-leave days left at year end and vacation days left, carried over or expiring, and opens into a per-parent table with that year's wish outcomes. Tips become a plain list and absorb the planner's surplus advice; "Detaljer" keeps the metrics and a balance snapshot for every parent. The separate plan-proposal fold and the type-count table are gone. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XBRLomdLK9jF7wU7a8AA6H
38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import { ReactNode } from 'react'
|
|
import { useTranslation } from '@/i18n'
|
|
|
|
export interface KeyFiguresProps {
|
|
/** `combinedDaysLeft` — days still available to plan, all parents. */
|
|
daysLeft: number
|
|
/** `combinedDaysUsed`. */
|
|
daysUsed: number
|
|
/** `combinedExpiringAtB4` — projected to be lost at the 4th birthday. */
|
|
expiringAtB4: number
|
|
}
|
|
|
|
/**
|
|
* The three headline figures under the hero — large tabular numerals with
|
|
* a 14px label each, no tiles. The expiring figure wears danger ink only
|
|
* when it is non-zero: a zero is good news and should read as quiet.
|
|
*/
|
|
export function KeyFigures({ daysLeft, daysUsed, expiringAtB4 }: KeyFiguresProps): ReactNode {
|
|
const { t } = useTranslation()
|
|
const figures = [
|
|
{ key: 'left', label: t('dashboard.figureLeft'), value: daysLeft, danger: false },
|
|
{ key: 'used', label: t('dashboard.figureUsed'), value: daysUsed, danger: false },
|
|
{ key: 'expiring', label: t('dashboard.figureExpiring'), value: expiringAtB4, danger: expiringAtB4 > 0 },
|
|
]
|
|
return (
|
|
<dl className="key-figures" data-testid="key-figures">
|
|
{figures.map((figure) => (
|
|
<div key={figure.key} className="key-figures__item" data-testid={`dashboard-figure-${figure.key}`}>
|
|
<dt className="key-figures__label">{figure.label}</dt>
|
|
<dd className={figure.danger ? 'key-figures__value key-figures__value--danger' : 'key-figures__value'}>
|
|
{figure.value}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
)
|
|
}
|