78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import { ReactNode } from 'react'
|
|
import type { ParentalLeaveFetch } from '@/types'
|
|
|
|
export interface ParentalLeaveBreakdownProps {
|
|
data: ParentalLeaveFetch | null
|
|
}
|
|
|
|
export function ParentalLeaveBreakdown({ data }: ParentalLeaveBreakdownProps): ReactNode {
|
|
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>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const formatDate = (dateString: string) => {
|
|
return new Date(dateString).toLocaleDateString('sv-SE')
|
|
}
|
|
|
|
const sourceLabel = data.source === 'scraped' ? 'Hämtad från Försäkringskassan' : 'Manuellt angiven'
|
|
|
|
return (
|
|
<div data-testid="parental-leave-breakdown" className="parental-leave-breakdown">
|
|
<div className="parental-leave-breakdown__section">
|
|
<table className="parental-leave-breakdown__table">
|
|
<thead>
|
|
<tr>
|
|
<th>Typ</th>
|
|
<th>Återstående</th>
|
|
<th>Totalt</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>{data.transferableDaysLeft}</td>
|
|
<td>—</td>
|
|
</tr>
|
|
<tr data-testid="breakdown-dubbeldagar">
|
|
<td>Dubbeldagar kvar</td>
|
|
<td>{data.dubbeldagarLeft}</td>
|
|
<td>—</td>
|
|
</tr>
|
|
{data.tierData && (
|
|
<>
|
|
<tr data-testid="breakdown-sjukpenning">
|
|
<td>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>{data.tierData.lagstaNivaLeft}</td>
|
|
<td>{data.tierData.lagstaNivaTotal}</td>
|
|
</tr>
|
|
</>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div className="parental-leave-breakdown__provenance">
|
|
<small>
|
|
{sourceLabel} {formatDate(data.fetchedAt)}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|