MVP frontend+backend

2026-06-14 09:58:30 +02:00
parent d9539f23cc
commit 772d853e37
56 changed files with 5099 additions and 207 deletions
@@ -0,0 +1,77 @@
+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>
+  )
+}