Repository: navikt/foreldrepengesoknad
Pull request #4852: Vise SVP tilrettelegginger i innsyn
Author: login: johannbm
Created: 2025-03-07T12:05:56Z | Merged: 2025-03-11T08:08:06Z



Diff:
diff --git a/apps/foreldrepengeoversikt/.storybook/storybook-data/saker/saker.ts b/apps/foreldrepengeoversikt/.storybook/storybook-data/saker/saker.ts
index a11eae30a1..c699023d13 100644
--- a/apps/foreldrepengeoversikt/.storybook/storybook-data/saker/saker.ts
+++ b/apps/foreldrepengeoversikt/.storybook/storybook-data/saker/saker.ts
@@ -192,6 +192,7 @@ export const saker = {
                         behovFrom: '2024-10-24',
                         tilrettelegginger: [
                             {
+                                arbeidstidprosent: 0,
                                 fom: '2024-10-24',
                                 tom: '2024-10-30',
                                 type: 'INGEN',
@@ -215,6 +216,7 @@ export const saker = {
                         behovFrom: '2024-10-17',
                         tilrettelegginger: [
                             {
+                                arbeidstidprosent: 0,
                                 fom: '2024-10-17',
                                 tom: '2024-10-30',
                                 type: 'INGEN',
diff --git a/apps/foreldrepengeoversikt/.storybook/storybook-data/saker/svpsaker.ts b/apps/foreldrepengeoversikt/.storybook/storybook-data/saker/svpsaker.ts
new file mode 100644
index 0000000000..21c0e714a9
--- /dev/null
+++ b/apps/foreldrepengeoversikt/.storybook/storybook-data/saker/svpsaker.ts
@@ -0,0 +1,398 @@
+import { SvangerskapspengeSak } from '../../../src/types/SvangerskapspengeSak';
+import { Ytelse } from '../../../src/types/Ytelse';
+
+export const SAK_1 = {
+    saksnummer: '202',
+    familiehendelse: {
+        termindato: '2025-06-05',
+        antallBarn: 0,
+    },
+    sakAvsluttet: false,
+    gjeldendeVedtak: {
+        arbeidsforhold: [
+            {
+                aktivitet: {
+                    type: 'ORDINÆRT_ARBEID',
+                    arbeidsgiver: {
+                        id: '991078045',
+                        type: 'ORGANISASJON',
+                    },
+                    arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+                },
+                behovFrom: '2025-04-05',
+                tilrettelegginger: [
+                    {
+                        fom: '2025-04-05',
+                        tom: '2025-04-12',
+                        type: 'DELVIS',
+                        arbeidstidprosent: 40,
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 60,
+                        },
+                    },
+                    {
+                        fom: '2025-05-01',
+                        tom: '2025-05-14',
+                        type: 'DELVIS',
+                        arbeidstidprosent: 40,
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 60,
+                        },
+                    },
+                ],
+                oppholdsperioder: [
+                    {
+                        fom: '2025-04-13',
+                        tom: '2025-04-30',
+                        årsak: 'SYKEPENGER',
+                        oppholdKilde: 'SAKSBEHANDLER',
+                    },
+                ],
+                avslutningÅrsak: 'NORMAL',
+            },
+            {
+                aktivitet: {
+                    type: 'ORDINÆRT_ARBEID',
+                    arbeidsgiver: {
+                        id: '992260432',
+                        type: 'ORGANISASJON',
+                    },
+                    arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER BERGEN',
+                },
+                behovFrom: '2025-03-05',
+                tilrettelegginger: [],
+                oppholdsperioder: [],
+                avslutningÅrsak: 'TILBAKE_I_HEL_STILLING',
+            },
+            {
+                aktivitet: {
+                    type: 'ORDINÆRT_ARBEID',
+                    arbeidsgiver: {
+                        id: '992260475',
+                        type: 'ORGANISASJON',
+                    },
+                    arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER STORD',
+                },
+                behovFrom: '2025-04-05',
+                tilrettelegginger: [
+                    {
+                        fom: '2025-04-05',
+                        tom: '2025-04-09',
+                        type: 'INGEN',
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 100,
+                        },
+                    },
+                    {
+                        fom: '2025-04-15',
+                        tom: '2025-05-14',
+                        type: 'INGEN',
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 100,
+                        },
+                    },
+                ],
+                oppholdsperioder: [
+                    {
+                        fom: '2025-04-10',
+                        tom: '2025-04-14',
+                        årsak: 'FERIE',
+                        oppholdKilde: 'SAKSBEHANDLER',
+                    },
+                ],
+                avslutningÅrsak: 'NORMAL',
+            },
+        ],
+    },
+    oppdatertTidspunkt: '2025-03-05T19:59:55.57',
+    ytelse: Ytelse.SVANGERSKAPSPENGER,
+} satisfies SvangerskapspengeSak;
+
+export const SAK_2 = {
+    saksnummer: '1',
+    familiehendelse: {
+        termindato: '2025-04-03',
+        antallBarn: 0,
+    },
+    sakAvsluttet: false,
+    gjeldendeVedtak: {
+        arbeidsforhold: [
+            {
+                aktivitet: {
+                    type: 'ORDINÆRT_ARBEID',
+                    arbeidsgiver: {
+                        id: '889640782',
+                        type: 'ORGANISASJON',
+                    },
+                    arbeidsgiverNavn: 'ARBEIDS- OG VELFERDSETATEN',
+                },
+                behovFrom: '2025-03-06',
+                tilrettelegginger: [
+                    {
+                        fom: '2025-03-06',
+                        tom: '2025-03-12',
+                        type: 'INGEN',
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 100,
+                        },
+                    },
+                ],
+                oppholdsperioder: [],
+                avslutningÅrsak: 'NORMAL',
+            },
+            {
+                aktivitet: {
+                    type: 'ORDINÆRT_ARBEID',
+                    arbeidsgiver: {
+                        id: '992260475',
+                        type: 'ORGANISASJON',
+                    },
+                    arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER STORD',
+                },
+                behovFrom: '2025-02-27',
+                tilrettelegginger: [
+                    {
+                        fom: '2025-02-27',
+                        tom: '2025-03-12',
+                        type: 'INGEN',
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 100,
+                        },
+                    },
+                ],
+                oppholdsperioder: [],
+                avslutningÅrsak: 'NORMAL',
+            },
+        ],
+    },
+    oppdatertTidspunkt: '2025-03-06T09:24:34.799',
+    ytelse: Ytelse.SVANGERSKAPSPENGER,
+} satisfies SvangerskapspengeSak;
+
+export const SAK_3 = {
+    saksnummer: '101',
+    familiehendelse: {
+        termindato: '2025-06-06',
+        antallBarn: 0,
+    },
+    sakAvsluttet: false,
+    gjeldendeVedtak: {
+        arbeidsforhold: [
+            {
+                aktivitet: {
+                    type: 'ORDINÆRT_ARBEID',
+                    arbeidsgiver: {
+                        id: '991078045',
+                        type: 'ORGANISASJON',
+                    },
+                    arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+                },
+                behovFrom: '2025-04-06',
+                tilrettelegginger: [
+                    {
+                        fom: '2025-04-06',
+                        tom: '2025-05-15',
+                        type: 'DELVIS',
+                        arbeidstidprosent: 40,
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 60,
+                        },
+                    },
+                ],
+                oppholdsperioder: [],
+                avslutningÅrsak: 'NORMAL',
+            },
+            {
+                aktivitet: {
+                    type: 'ORDINÆRT_ARBEID',
+                    arbeidsgiver: {
+                        id: '992257822',
+                        type: 'ORGANISASJON',
+                    },
+                    arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+                },
+                behovFrom: '2025-04-06',
+                tilrettelegginger: [
+                    {
+                        fom: '2025-04-06',
+                        tom: '2025-05-15',
+                        type: 'INGEN',
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 100,
+                        },
+                    },
+                ],
+                oppholdsperioder: [],
+                avslutningÅrsak: 'NORMAL',
+            },
+            {
+                aktivitet: {
+                    type: 'ORDINÆRT_ARBEID',
+                    arbeidsgiver: {
+                        id: '992260475',
+                        type: 'ORGANISASJON',
+                    },
+                    arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER STORD',
+                },
+                behovFrom: '2025-03-06',
+                tilrettelegginger: [],
+                oppholdsperioder: [],
+                avslutningÅrsak: 'TILBAKE_I_HEL_STILLING',
+            },
+        ],
+    },
+    oppdatertTidspunkt: '2025-03-06T10:02:20.368',
+    ytelse: Ytelse.SVANGERSKAPSPENGER,
+} satisfies SvangerskapspengeSak;
+
+export const SAK_4 = {
+    saksnummer: '101',
+    familiehendelse: {
+        termindato: '2025-06-06',
+        antallBarn: 0,
+    },
+    sakAvsluttet: false,
+    gjeldendeVedtak: {
+        arbeidsforhold: [
+            {
+                aktivitet: {
+                    type: 'ORDINÆRT_ARBEID',
+                    arbeidsgiver: {
+                        id: '991078045',
+                        type: 'ORGANISASJON',
+                    },
+                    arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+                },
+                behovFrom: '2025-04-06',
+                tilrettelegginger: [
+                    {
+                        fom: '2025-04-23',
+                        tom: '2025-05-12',
+                        type: 'DELVIS',
+                        arbeidstidprosent: 40,
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 60,
+                        },
+                    },
+                    {
+                        fom: '2025-04-06',
+                        tom: '2025-04-07',
+                        type: 'DELVIS',
+                        arbeidstidprosent: 40,
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 60,
+                        },
+                    },
+                ],
+                oppholdsperioder: [
+                    {
+                        fom: '2025-04-14',
+                        tom: '2025-04-22',
+                        årsak: 'FERIE',
+                        oppholdKilde: 'SAKSBEHANDLER',
+                    },
+                    {
+                        fom: '2025-05-13',
+                        tom: '2025-05-15',
+                        årsak: 'FERIE',
+                        oppholdKilde: 'SAKSBEHANDLER',
+                    },
+                    {
+                        fom: '2025-04-08',
+                        tom: '2025-04-12',
+                        årsak: 'SYKEPENGER',
+                        oppholdKilde: 'SAKSBEHANDLER',
+                    },
+                ],
+                avslutningÅrsak: 'NORMAL',
+            },
+            {
+                aktivitet: {
+                    type: 'ORDINÆRT_ARBEID',
+                    arbeidsgiver: {
+                        id: '992257822',
+                        type: 'ORGANISASJON',
+                    },
+                    arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+                },
+                behovFrom: '2025-04-06',
+                tilrettelegginger: [
+                    {
+                        fom: '2025-04-11',
+                        tom: '2025-04-15',
+                        type: 'INGEN',
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 100,
+                        },
+                    },
+                    {
+                        fom: '2025-04-23',
+                        tom: '2025-05-15',
+                        type: 'INGEN',
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 100,
+                        },
+                    },
+                    {
+                        fom: '2025-04-06',
+                        tom: '2025-04-07',
+                        type: 'INGEN',
+                        resultat: {
+                            resultatType: 'INNVILGET',
+                            utbetalingsgrad: 100,
+                        },
+                    },
+                ],
+                oppholdsperioder: [
+                    {
+                        fom: '2025-04-16',
+                        tom: '2025-04-17',
+                        årsak: 'SYKEPENGER',
+                        oppholdKilde: 'SAKSBEHANDLER',
+                    },
+                    {
+                        fom: '2025-04-18',
+                        tom: '2025-04-22',
+                        årsak: 'FERIE',
+                        oppholdKilde: 'SAKSBEHANDLER',
+                    },
+                    {
+                        fom: '2025-04-08',
+                        tom: '2025-04-10',
+                        årsak: 'SYKEPENGER',
+                        oppholdKilde: 'SAKSBEHANDLER',
+                    },
+                ],
+                avslutningÅrsak: 'NORMAL',
+            },
+            {
+                aktivitet: {
+                    type: 'ORDINÆRT_ARBEID',
+                    arbeidsgiver: {
+                        id: '992260475',
+                        type: 'ORGANISASJON',
+                    },
+                    arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER STORD',
+                },
+                behovFrom: '2025-03-06',
+                tilrettelegginger: [],
+                oppholdsperioder: [],
+                avslutningÅrsak: 'TILBAKE_I_HEL_STILLING',
+            },
+        ],
+    },
+    oppdatertTidspunkt: '2025-03-06T10:27:19.01',
+    ytelse: Ytelse.SVANGERSKAPSPENGER,
+} satisfies SvangerskapspengeSak;
diff --git a/apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.stories.tsx b/apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.stories.tsx
new file mode 100644
index 0000000000..c07e6b4c37
--- /dev/null
+++ b/apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.stories.tsx
@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { MemoryRouter } from 'react-router-dom';
+import { SAK_1, SAK_2, SAK_3, SAK_4 } from 'storybookData/saker/svpsaker';
+
+import { LayoutWrapper } from '../../sections/LayoutWrapper';
+import { Svangerskapspenger } from './Svangerskapspenger';
+
+const meta = {
+    title: 'SVP oversikt',
+    component: Svangerskapspenger,
+    render: (props) => {
+        return (
+            <MemoryRouter>
+                <LayoutWrapper className="pt-1 pb-1 pl-4 pr-4 bg-deepblue-50">
+                    <Svangerskapspenger {...props} />
+                </LayoutWrapper>
+            </MemoryRouter>
+        );
+    },
+} satisfies Meta<typeof Svangerskapspenger>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Case1: Story = {
+    args: {
+        svpSak: SAK_1,
+    },
+};
+export const Case2: Story = {
+    args: {
+        svpSak: SAK_2,
+    },
+};
+
+export const Case3: Story = {
+    args: {
+        svpSak: SAK_3,
+    },
+};
+
+export const Case4: Story = {
+    args: {
+        svpSak: SAK_4,
+    },
+};
diff --git a/apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.test.ts b/apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.test.ts
new file mode 100644
index 0000000000..5036bbe713
--- /dev/null
+++ b/apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.test.ts
@@ -0,0 +1,606 @@
+import { SAK_1, SAK_2, SAK_3, SAK_4 } from 'storybookData/saker/svpsaker';
+
+import { lagKronologiskeSvpPerioder } from './Svangerskapspenger';
+
+describe('lagKronologiskeSvpPerioder', () => {
+    it('Case 1', () => {
+        const perioder = lagKronologiskeSvpPerioder(SAK_1);
+        expect(perioder).toEqual(PERIODER_1);
+    });
+    it('Case 2', () => {
+        const perioder = lagKronologiskeSvpPerioder(SAK_2);
+        expect(perioder).toEqual(PERIODER_2);
+    });
+    it('Case 3', () => {
+        const perioder = lagKronologiskeSvpPerioder(SAK_3);
+        expect(perioder).toEqual(PERIODER_3);
+    });
+    it('Case 4', () => {
+        const perioder = lagKronologiskeSvpPerioder(SAK_4);
+        expect(perioder).toEqual(PERIODER_4);
+    });
+});
+
+const PERIODER_1 = [
+    {
+        fom: '2025-04-05',
+        tom: '2025-04-09',
+        type: 'DELVIS',
+        arbeidstidprosent: 40,
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 60,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-05',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-05',
+        tom: '2025-04-09',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992260475',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER STORD',
+        },
+        behovFrom: '2025-04-05',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-10',
+        tom: '2025-04-12',
+        type: 'DELVIS',
+        arbeidstidprosent: 40,
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 60,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-05',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-10',
+        tom: '2025-04-12',
+        årsak: 'FERIE',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992260475',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER STORD',
+        },
+        behovFrom: '2025-04-05',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-13',
+        tom: '2025-04-14',
+        årsak: 'FERIE',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992260475',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER STORD',
+        },
+        behovFrom: '2025-04-05',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-13',
+        tom: '2025-04-14',
+        årsak: 'SYKEPENGER',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-05',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-15',
+        tom: '2025-04-30',
+        årsak: 'SYKEPENGER',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-05',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-15',
+        tom: '2025-04-30',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992260475',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER STORD',
+        },
+        behovFrom: '2025-04-05',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-05-01',
+        tom: '2025-05-14',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992260475',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER STORD',
+        },
+        behovFrom: '2025-04-05',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-05-01',
+        tom: '2025-05-14',
+        type: 'DELVIS',
+        arbeidstidprosent: 40,
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 60,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-05',
+        avslutningÅrsak: 'NORMAL',
+    },
+];
+const PERIODER_2 = [
+    {
+        fom: '2025-02-27',
+        tom: '2025-03-05',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992260475',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER STORD',
+        },
+        behovFrom: '2025-02-27',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-03-06',
+        tom: '2025-03-12',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992260475',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER STORD',
+        },
+        behovFrom: '2025-02-27',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-03-06',
+        tom: '2025-03-12',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '889640782',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'ARBEIDS- OG VELFERDSETATEN',
+        },
+        behovFrom: '2025-03-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+];
+const PERIODER_3 = [
+    {
+        fom: '2025-04-06',
+        tom: '2025-05-15',
+        type: 'DELVIS',
+        arbeidstidprosent: 40,
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 60,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-06',
+        tom: '2025-05-15',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992257822',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+];
+const PERIODER_4 = [
+    {
+        fom: '2025-04-06',
+        tom: '2025-04-07',
+        type: 'DELVIS',
+        arbeidstidprosent: 40,
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 60,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-06',
+        tom: '2025-04-07',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992257822',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-08',
+        tom: '2025-04-10',
+        årsak: 'SYKEPENGER',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-08',
+        tom: '2025-04-10',
+        årsak: 'SYKEPENGER',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992257822',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-11',
+        tom: '2025-04-12',
+        årsak: 'SYKEPENGER',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-11',
+        tom: '2025-04-12',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992257822',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-13',
+        tom: '2025-04-13',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992257822',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-14',
+        tom: '2025-04-15',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992257822',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-14',
+        tom: '2025-04-15',
+        årsak: 'FERIE',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-16',
+        tom: '2025-04-17',
+        årsak: 'FERIE',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-16',
+        tom: '2025-04-17',
+        årsak: 'SYKEPENGER',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992257822',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-18',
+        tom: '2025-04-22',
+        årsak: 'FERIE',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-18',
+        tom: '2025-04-22',
+        årsak: 'FERIE',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992257822',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-23',
+        tom: '2025-05-12',
+        type: 'DELVIS',
+        arbeidstidprosent: 40,
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 60,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-04-23',
+        tom: '2025-05-12',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992257822',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-05-13',
+        tom: '2025-05-15',
+        type: 'INGEN',
+        resultat: {
+            resultatType: 'INNVILGET',
+            utbetalingsgrad: 100,
+        },
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '992257822',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV FAMILIE- OG PENSJONSYTELSER OSLO',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+    {
+        fom: '2025-05-13',
+        tom: '2025-05-15',
+        årsak: 'FERIE',
+        oppholdKilde: 'SAKSBEHANDLER',
+        aktivitet: {
+            type: 'ORDINÆRT_ARBEID',
+            arbeidsgiver: {
+                id: '991078045',
+                type: 'ORGANISASJON',
+            },
+            arbeidsgiverNavn: 'NAV KLAGEINSTANS MIDT-NORGE',
+        },
+        behovFrom: '2025-04-06',
+        avslutningÅrsak: 'NORMAL',
+    },
+];
diff --git a/apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.tsx b/apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.tsx
new file mode 100644
index 0000000000..fb99ed9f68
--- /dev/null
+++ b/apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.tsx
@@ -0,0 +1,293 @@
+import {
+    BandageFillIcon,
+    HeartFillIcon,
+    ParasolBeachFillIcon,
+    PersonPregnantFillIcon,
+    StrollerFillIcon,
+} from '@navikt/aksel-icons';
+import dayjs from 'dayjs';
+import { groupBy } from 'lodash';
+import React from 'react';
+
+import { BodyShort, HGrid, HStack, Heading, Show, VStack } from '@navikt/ds-react';
+
+import {
+    TidsperiodenString,
+    capitalizeFirstLetter,
+    capitalizeFirstLetterInEveryWordOnly,
+    formatDateMedUkedag,
+    formatDateShortMonth,
+    treUkerSiden,
+} from '@navikt/fp-utils';
+
+import { SvangerskapspengeSak } from '../../types/SvangerskapspengeSak';
+
+type SvangerskapspengerProps = {
+    svpSak: SvangerskapspengeSak;
+};
+export const Svangerskapspenger = ({ svpSak }: SvangerskapspengerProps) => {
+    const erVedtatt = !svpSak.gjeldendeVedtak?.avslagÅrsak;
+    const arbeidsforhold = svpSak.åpenBehandling?.søknad.arbeidsforhold ?? svpSak.gjeldendeVedtak?.arbeidsforhold;
+    const terminDato = svpSak.familiehendelse.termindato;
+
+    if (!arbeidsforhold || !terminDato) {
+        return null;
+    }
+    const perioder = lagKronologiskeSvpPerioder(svpSak);
+    return (
+        <VStack>
+            <Heading level="2" size="medium" spacing>
+                {erVedtatt ? 'Dette har du fått vedtatt' : 'Dette har du søkt om'}
+            </Heading>
+            <VStack gap="4" className="bg-white p-4">
+                {Object.values(groupBy(perioder, 'fom')).map((gruppertePerioder) => (
+                    <React.Fragment key={gruppertePerioder[0].fom}>
+                        <GruppertePerioder perioder={gruppertePerioder} />
+                        <div className="h-px bg-border-divider" />
+                    </React.Fragment>
+                ))}
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>
+                        {formatDateShortMonth(treUkerSiden(terminDato))} - {formatDateShortMonth(terminDato)}
+                    </BodyShort>
+                    <BodyShort> </BodyShort>
+                    <TreUkerFørTermin />
+                </HGrid>
+                <div className="h-[1] bg-border-divider" />
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>{capitalizeFirstLetter(formatDateMedUkedag(terminDato))}</BodyShort>
+                    <BodyShort> </BodyShort>
+                    <Termin />
+                </HGrid>
+            </VStack>
+        </VStack>
+    );
+};
+
+const GruppertePerioder = ({ perioder }: { perioder: ReturnType<typeof lagKronologiskeSvpPerioder> }) => {
+    return (
+        <HGrid gap="2" columns={{ xs: '1fr 40px', md: '1fr 1fr 300px' }} align="center">
+            {perioder.map((p, index) => {
+                const arbeidsgiverNavn =
+                    capitalizeFirstLetterInEveryWordOnly(p.aktivitet.arbeidsgiverNavn) ?? p.aktivitet.arbeidsgiver.id;
+                const dato = index === 0 ? `${formatDateShortMonth(p.fom)} - ${formatDateShortMonth(p.tom)}` : '';
+                const prosentSvangerskapspenger =
+                    p.type === 'HEL' ? 0 : p.type === 'INGEN' ? 100 : 100 - (p.arbeidstidprosent ?? 0);
+
+                return (
+                    <React.Fragment key={p.aktivitet.arbeidsgiverNavn}>
+                        <Show above="md" asChild>
+                            <div className="contents">
+                                <BodyShort className="whitespace-nowrap">{dato}</BodyShort>
+                                <BodyShort>{arbeidsgiverNavn}</BodyShort>
+                                {p.type && (
+                                    <HStack
+                                        wrap={false}
+                                        gap="4"
+                                        align="center"
+                                        justify="space-between"
+                                        className="pt-2 pb-2 pl-4 pr-4 bg-green-100 rounded-3xl"
+                                    >
+                                        <BodyShort>{prosentSvangerskapspenger}% svangerskapspenger</BodyShort>
+                                        <GravidIkon />
+                                    </HStack>
+                                )}
+                                {p.årsak === 'FERIE' && <DuHarFerie />}
+                                {p.årsak === 'SYKEPENGER' && <DuErSykemeldt />}
+                            </div>
+                        </Show>
+                        <Show below="md" asChild>
+                            <div className="contents">
+                                <BodyShort className="col-span-2">{dato}</BodyShort>
+                                <VStack>
+                                    <strong>{arbeidsgiverNavn}</strong>
+                                    <BodyShort>
+                                        {p.type && `${prosentSvangerskapspenger}% svangerskapspenger`}
+                                        {p.årsak === 'FERIE' && 'Ferie'}
+                                        {p.årsak === 'SYKEPENGER' && 'Sykepenger'}
+                                    </BodyShort>
+                                </VStack>
+                                {p.type && <GravidIkon />}
+                                {p.årsak === 'FERIE' && <ParasollIkon />}
+                                {p.årsak === 'SYKEPENGER' && <BandasjeIkon />}
+                            </div>
+                        </Show>
+                    </React.Fragment>
+                );
+            })}
+        </HGrid>
+    );
+};
+
+const DuHarFerie = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-orange-100 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du har ferie</BodyShort>
+            <ParasollIkon />
+        </HStack>
+    );
+};
+
+const DuErSykemeldt = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-orange-100 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du er sykemeldt</BodyShort>
+            <BandasjeIkon />
+        </HStack>
+    );
+};
+
+const TreUkerFørTermin = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-purple-50 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du kan søke om foreldrepenger</BodyShort>
+            <BarnevognIkon />
+        </HStack>
+    );
+};
+
+const Termin = () => {
+    return (
+        <HStack gap="4" align="center" justify="space-between" className="pt-2 pb-2 pl-4 pr-4 bg-red-50 rounded-3xl">
+            <BodyShort>Termin</BodyShort>
+            <HeartFillIcon fontSize="2.5rem" className="text-icon-danger p-05" aria-hidden />
+        </HStack>
+    );
+};
+
+const BandasjeIkon = () => (
+    <div className="rounded-3xl bg-orange-200 justify-self-end">
+        <BandageFillIcon fontSize={'2.5rem'} className=" text-orange-500 p-05" aria-hidden />
+    </div>
+);
+
+const ParasollIkon = () => (
+    <div className="rounded-3xl bg-orange-200 justify-self-end">
+        <ParasolBeachFillIcon fontSize={'2.5rem'} className=" text-orange-500 p-05" aria-hidden />
+    </div>
+);
+
+const GravidIkon = () => (
+    <div className="rounded-3xl bg-green-200 justify-self-end">
+        <PersonPregnantFillIcon fontSize={'2.5rem'} className=" text-surface-success p-05" aria-hidden />
+    </div>
+);
+
+const BarnevognIkon = () => (
+    <div className="rounded-3xl bg-purple-100 justify-self-end">
+        <StrollerFillIcon fontSize={'2.5rem'} className=" text-purple-500 p-05" aria-hidden />
+    </div>
+);
+
+export const lagKronologiskeSvpPerioder = (svpSak: SvangerskapspengeSak) => {
+    const arbeidsforhold = svpSak.åpenBehandling?.søknad.arbeidsforhold ?? svpSak.gjeldendeVedtak?.arbeidsforhold;
+    const perioder = (arbeidsforhold ?? [])
+        .map((af) =>
+            [...af.tilrettelegginger, ...af.oppholdsperioder].map((p) => ({
+                ...p,
+                arbeidstidprosent: 'arbeidstidprosent' in p ? p.arbeidstidprosent : undefined,
+                type: 'type' in p ? p.type : undefined,
+                årsak: 'årsak' in p ? p.årsak : undefined,
+                fom: p.fom,
+                tom: p.tom,
+                aktivitet: af.aktivitet,
+                behovFrom: af.behovFrom,
+                avslutningÅrsak: af.avslutningÅrsak,
+            })),
+        )
+        .flat()
+        .sort((a, b) => a.fom.localeCompare(b.fom));
+
+    const endeligePerioder = [];
+    const perioderÅBruke = [...perioder];
+    let i = 0;
+
+    while (perioderÅBruke.length > 0) {
+        const periode = perioderÅBruke.shift();
+        if (!periode) {
+            break;
+        }
+
+        const index = perioderÅBruke.findIndex((p) => {
+            if (p.fom === periode.fom && p.tom === periode.tom) return false;
+            return TidsperiodenString(p).inneholderDato(periode.tom);
+        });
+        const overlappendePeriode = index !== -1 ? perioderÅBruke.splice(index, 1)[0] : undefined;
+
+        if (overlappendePeriode) {
+            let overlappendePeriode1;
+            let overlappendePeriode2;
+
+            // Hvis periode ikke overlapper med annen periode
+            const overlapperIkke =
+                dayjs(periode.fom).isSameOrAfter(overlappendePeriode.fom) &&
+                dayjs(periode.tom).isSameOrBefore(overlappendePeriode.tom);
+
+            // Del "periode" på "overlappendePeriode" sin fom
+            const periode1 = {
+                ...periode,
+                tom: dayjs(overlappendePeriode.fom).subtract(1, 'day').format('YYYY-MM-DD'),
+            };
+            const periode2 = {
+                ...periode,
+                fom: overlappendePeriode.fom,
+            };
+
+            // Hvis tom er lik trenger vi ikke splitte annen periode
+            if (periode.tom !== overlappendePeriode.tom) {
+                overlappendePeriode1 = {
+                    ...overlappendePeriode,
+                    tom: periode.tom,
+                };
+                overlappendePeriode2 = {
+                    ...overlappendePeriode,
+                    fom: dayjs(periode.tom).add(1, 'day').format('YYYY-MM-DD'),
+                };
+            } else {
+                overlappendePeriode1 = overlappendePeriode;
+            }
+
+            if (overlapperIkke) {
+                const nyePerioder = [periode, overlappendePeriode1, overlappendePeriode2].filter(
+                    (x) => x !== undefined,
+                );
+                perioderÅBruke.unshift(...nyePerioder);
+            } else {
+                const nyePerioder = [periode1, periode2, overlappendePeriode1, overlappendePeriode2].filter(
+                    (x) => x !== undefined,
+                );
+                perioderÅBruke.unshift(...nyePerioder);
+            }
+        }
+
+        // Hvis det ikke finnes overlappende perioder så er perioden "ferdig"
+        if (!overlappendePeriode) {
+            endeligePerioder.push(periode);
+        }
+
+        // failsafe under utvikling
+        if (++i > 500) {
+            console.error('lagKronologiskeSvpPerioder er tilsynelatende stuck i en evig loop');
+            break;
+        }
+    }
+    return endeligePerioder.sort((a, b) => a.fom.localeCompare(b.fom));
+};
diff --git a/apps/foreldrepengeoversikt/src/pages/saksoversikt/Saksoversikt.tsx b/apps/foreldrepengeoversikt/src/pages/saksoversikt/Saksoversikt.tsx
index 86d2bb29be..65abd08080 100644
--- a/apps/foreldrepengeoversikt/src/pages/saksoversikt/Saksoversikt.tsx
+++ b/apps/foreldrepengeoversikt/src/pages/saksoversikt/Saksoversikt.tsx
@@ -219,6 +219,7 @@ const SaksoversiktInner = ({ søkerinfo, isFirstRender }: Props) => {
                         </ContentSection>
                     </div>
                 )}
+                {/*{gjeldendeSak.ytelse === Ytelse.SVANGERSKAPSPENGER && <Svangerskapspenger svpSak={gjeldendeSak} />}*/}
                 {gjeldendeSak.ytelse === Ytelse.ENGANGSSTØNAD && !gjeldendeSak.sakAvsluttet && (
                     <VStack gap="2">
                         <ContentSection
diff --git a/apps/foreldrepengeoversikt/src/types/ArbeidsforholdSVP.ts b/apps/foreldrepengeoversikt/src/types/ArbeidsforholdSVP.ts
index 8ad62d9008..c306cf753f 100644
--- a/apps/foreldrepengeoversikt/src/types/ArbeidsforholdSVP.ts
+++ b/apps/foreldrepengeoversikt/src/types/ArbeidsforholdSVP.ts
@@ -1,10 +1,8 @@
-import { TilretteleggingPeriodeSVP } from './TilretteleggingsperiodeSVP';
-
 export interface ArbeidsforholdSVP {
-    aktivitet: any;
+    aktivitet: Aktivitet;
     behovFrom: string;
     tilrettelegginger: TilretteleggingPeriodeSVP[];
-    oppholdsperioder: any[];
+    oppholdsperioder: Oppholdsperiode[];
     avslutningÅrsak:
         | 'NORMAL'
         | 'TILBAKE_I_HEL_STILLING'
@@ -14,3 +12,36 @@ export interface ArbeidsforholdSVP {
         | 'AVSLAG_ANNET'
         | 'AVSLAG_INNGANGSVILKÅR';
 }
+
+export type Oppholdsperiode = {
+    fom: string;
+    tom: string;
+    årsak: 'FERIE' | 'SYKEPENGER';
+    oppholdKilde: 'SØKNAD' | 'SAKSBEHANDLER' | 'INNTEKTSMELDING';
+};
+
+type Aktivitet = {
+    type: 'FRILANS' | 'ORDINÆRT_ARBEID' | 'SELVSTENDIG_NÆRINGSDRIVENDE' | 'ANNET';
+    arbeidsgiver: Arbeidsgiver;
+    arbeidsgiverNavn?: string;
+};
+
+type Arbeidsgiver = {
+    id: string;
+    type: 'PRIVAT' | 'ORGANISASJON';
+};
+
+export type Tilretteleggingstype = 'INGEN' | 'DELVIS' | 'HEL';
+
+export interface TilretteleggingPeriodeSVP {
+    type: Tilretteleggingstype;
+    fom: string;
+    tom: string;
+    arbeidstidprosent?: number;
+    resultat?: Resultat;
+}
+
+type Resultat = {
+    resultatType: 'INNVILGET' | 'AVSLAG_SØKNADSFRIST' | 'AVSLAG_ANNET';
+    utbetalingsgrad: number;
+};
diff --git a/apps/foreldrepengeoversikt/src/types/SvangerskapspengeSak.ts b/apps/foreldrepengeoversikt/src/types/SvangerskapspengeSak.ts
index ca53e08ff7..934f62a7e5 100644
--- a/apps/foreldrepengeoversikt/src/types/SvangerskapspengeSak.ts
+++ b/apps/foreldrepengeoversikt/src/types/SvangerskapspengeSak.ts
@@ -12,7 +12,7 @@ export interface SvangerskapspengeSakDTO {
     saksnummer: string;
     sakAvsluttet: boolean;
     gjelderAdopsjon?: boolean;
-    familiehendelse?: Familiehendelse;
+    familiehendelse: Familiehendelse;
     åpenBehandling?: ÅpenBehandlingSVP;
     gjeldendeVedtak?: VedtakDto;
     oppdatertTidspunkt: string;
diff --git a/apps/foreldrepengeoversikt/src/types/TilretteleggingsperiodeSVP.ts b/apps/foreldrepengeoversikt/src/types/TilretteleggingsperiodeSVP.ts
deleted file mode 100644
index 2b0500fe03..0000000000
--- a/apps/foreldrepengeoversikt/src/types/TilretteleggingsperiodeSVP.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export type Tilretteleggingstype = 'INGEN' | 'DELVIS' | 'HEL';
-
-export interface TilretteleggingPeriodeSVP {
-    type: Tilretteleggingstype;
-    fom: string;
-    tom: string;
-    resultat: Resultat;
-}
-
-type Resultat = {
-    resultatType: 'INNVILGET' | 'AVSLAG_SØKNADSFRIST' | 'AVSLAG_ANNET';
-    utbetalingsgrad: number;
-};


Reviews:
user: login: johannbm
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T12:11:49Z
user: login: tor-nav
body: Tok ein rask kikk, og fann berre småting. Men eg orkar ikkje å sjå på den store grupperingsfunksjonen no... Men det ser iallfall ut som den er testa bra
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T13:09:29Z
user: login: johannbm
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T09:09:36Z
user: login: johannbm
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T09:13:39Z
user: login: johannbm
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T09:20:18Z

Review comments:
diff_hunk: @@ -0,0 +1,293 @@
+import {
+    BandageFillIcon,
+    HeartFillIcon,
+    ParasolBeachFillIcon,
+    PersonPregnantFillIcon,
+    StrollerFillIcon,
+} from '@navikt/aksel-icons';
+import dayjs from 'dayjs';
+import { groupBy } from 'lodash';
+import React from 'react';
+
+import { BodyShort, HGrid, HStack, Heading, Show, VStack } from '@navikt/ds-react';
+
+import {
+    TidsperiodenString,
+    capitalizeFirstLetter,
+    capitalizeFirstLetterInEveryWordOnly,
+    formatDateMedUkedag,
+    formatDateShortMonth,
+    treUkerSiden,
+} from '@navikt/fp-utils';
+
+import { SvangerskapspengeSak } from '../../types/SvangerskapspengeSak';
+
+type SvangerskapspengerProps = {
+    svpSak: SvangerskapspengeSak;
+};
+export const Svangerskapspenger = ({ svpSak }: SvangerskapspengerProps) => {
+    const erVedtatt = !svpSak.gjeldendeVedtak?.avslagÅrsak;
+    const arbeidsforhold = svpSak.åpenBehandling?.søknad.arbeidsforhold ?? svpSak.gjeldendeVedtak?.arbeidsforhold;
+    const terminDato = svpSak.familiehendelse.termindato;
+
+    if (!arbeidsforhold || !terminDato) {
+        return null;
+    }
+    const perioder = lagKronologiskeSvpPerioder(svpSak);
+    return (
+        <VStack>
+            <Heading level="2" size="medium" spacing>
+                {erVedtatt ? 'Dette har du fått vedtatt' : 'Dette har du søkt om'}
+            </Heading>
+            <VStack gap="4" className="bg-white p-4">
+                {Object.values(groupBy(perioder, 'fom')).map((gruppertePerioder) => (
+                    <React.Fragment key={gruppertePerioder[0].fom}>
+                        <GruppertePerioder perioder={gruppertePerioder} />
+                        <div className="h-px bg-border-divider" />
+                    </React.Fragment>
+                ))}
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>
+                        {formatDateShortMonth(treUkerSiden(terminDato))} - {formatDateShortMonth(terminDato)}
+                    </BodyShort>
+                    <BodyShort> </BodyShort>
+                    <TreUkerFørTermin />
+                </HGrid>
+                <div className="h-[1] bg-border-divider" />
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>{capitalizeFirstLetter(formatDateMedUkedag(terminDato))}</BodyShort>
+                    <BodyShort> </BodyShort>
+                    <Termin />
+                </HGrid>
+            </VStack>
+        </VStack>
+    );
+};
+
+const GruppertePerioder = ({ perioder }: { perioder: ReturnType<typeof lagKronologiskeSvpPerioder> }) => {
+    return (
+        <HGrid gap="2" columns={{ xs: '1fr 40px', md: '1fr 1fr 300px' }} align="center">
+            {perioder.map((p, index) => {
+                const arbeidsgiverNavn =
+                    capitalizeFirstLetterInEveryWordOnly(p.aktivitet.arbeidsgiverNavn) ?? p.aktivitet.arbeidsgiver.id;
+                const dato = index === 0 ? `${formatDateShortMonth(p.fom)} - ${formatDateShortMonth(p.tom)}` : '';
+                const prosentSvangerskapspenger =
+                    p.type === 'HEL' ? 0 : p.type === 'INGEN' ? 100 : 100 - (p.arbeidstidprosent ?? 0);
+
+                return (
+                    <React.Fragment key={p.aktivitet.arbeidsgiverNavn}>
+                        <Show above="md" asChild>
+                            <div className="contents">
+                                <BodyShort className="whitespace-nowrap">{dato}</BodyShort>
+                                <BodyShort>{arbeidsgiverNavn}</BodyShort>
+                                {p.type && (
+                                    <HStack
+                                        wrap={false}
+                                        gap="4"
+                                        align="center"
+                                        justify="space-between"
+                                        className="pt-2 pb-2 pl-4 pr-4 bg-green-100 rounded-3xl"
+                                    >
+                                        <BodyShort>{prosentSvangerskapspenger}% svangerskapspenger</BodyShort>
+                                        <GravidIkon />
+                                    </HStack>
+                                )}
+                                {p.årsak === 'FERIE' && <DuHarFerie />}
+                                {p.årsak === 'SYKEPENGER' && <DuErSykemeldt />}
+                            </div>
+                        </Show>
+                        <Show below="md" asChild>
+                            <div className="contents">
+                                <BodyShort className="col-span-2">{dato}</BodyShort>
+                                <VStack>
+                                    <strong>{arbeidsgiverNavn}</strong>
+                                    <BodyShort>
+                                        {p.type && `${prosentSvangerskapspenger}% svangerskapspenger`}
+                                        {p.årsak === 'FERIE' && 'Ferie'}
+                                        {p.årsak === 'SYKEPENGER' && 'Sykepenger'}
+                                    </BodyShort>
+                                </VStack>
+                                {p.type && <GravidIkon />}
+                                {p.årsak === 'FERIE' && <ParasollIkon />}
+                                {p.årsak === 'SYKEPENGER' && <BandasjeIkon />}
+                            </div>
+                        </Show>
+                    </React.Fragment>
+                );
+            })}
+        </HGrid>
+    );
+};
+
+const DuHarFerie = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-orange-100 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du har ferie</BodyShort>
+            <ParasollIkon />
+        </HStack>
+    );
+};
+
+const DuErSykemeldt = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-orange-100 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du er sykemeldt</BodyShort>
+            <BandasjeIkon />
+        </HStack>
+    );
+};
+
+const TreUkerFørTermin = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-purple-50 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du kan søke om foreldrepenger</BodyShort>
+            <BarnevognIkon />
+        </HStack>
+    );
+};
+
+const Termin = () => {
+    return (
+        <HStack gap="4" align="center" justify="space-between" className="pt-2 pb-2 pl-4 pr-4 bg-red-50 rounded-3xl">
+            <BodyShort>Termin</BodyShort>
+            <HeartFillIcon fontSize={'2.5rem'} className="text-icon-danger p-05" aria-hidden />
+        </HStack>
+    );
+};
+
+const BandasjeIkon = () => (
+    <div className="rounded-3xl bg-orange-200 justify-self-end">
+        <BandageFillIcon fontSize={'2.5rem'} className=" text-orange-500 p-05" aria-hidden />
+    </div>
+);
+
+const ParasollIkon = () => (
+    <div className="rounded-3xl bg-orange-200 justify-self-end">
+        <ParasolBeachFillIcon fontSize={'2.5rem'} className=" text-orange-500 p-05" aria-hidden />
+    </div>
+);
+
+const GravidIkon = () => (
+    <div className="rounded-3xl bg-green-200 justify-self-end">
+        <PersonPregnantFillIcon fontSize={'2.5rem'} className=" text-surface-success p-05" aria-hidden />
+    </div>
+);
+
+const BarnevognIkon = () => (
+    <div className="rounded-3xl bg-purple-100 justify-self-end">
+        <StrollerFillIcon fontSize={'2.5rem'} className=" text-purple-500 p-05" aria-hidden />
+    </div>
+);
+
+export const lagKronologiskeSvpPerioder = (svpSak: SvangerskapspengeSak) => {
path: apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.tsx
user: login: johannbm
body: Denne funksjonen for å splitte alle tilretteleggingsperiodene for å få en kronologisk tidslinje er en håndfull...

Den er ikke pen, hadde fokus på å få noe som fungerte og skrive tester for alle casene jeg kom på. Tar gjerne innspill om noen ser forenklinger
created_at: 2025-03-07T12:11:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,606 @@
+import { SAK_1, SAK_2, SAK_3, SAK_4 } from 'storybookData/saker/svpsaker';
+
+import { lagKronologiskeSvpPerioder } from './Svangerskapspenger';
+
+describe('lagKronologiskeSvpPerioder', () => {
+    it('Case 1', async () => {
path: apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.test.ts
user: login: tor-nav
body: desse treng vel ikkje vera markert med async?
created_at: 2025-03-07T12:56:39Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,293 @@
+import {
+    BandageFillIcon,
+    HeartFillIcon,
+    ParasolBeachFillIcon,
+    PersonPregnantFillIcon,
+    StrollerFillIcon,
+} from '@navikt/aksel-icons';
+import dayjs from 'dayjs';
+import { groupBy } from 'lodash';
+import React from 'react';
+
+import { BodyShort, HGrid, HStack, Heading, Show, VStack } from '@navikt/ds-react';
+
+import {
+    TidsperiodenString,
+    capitalizeFirstLetter,
+    capitalizeFirstLetterInEveryWordOnly,
+    formatDateMedUkedag,
+    formatDateShortMonth,
+    treUkerSiden,
+} from '@navikt/fp-utils';
+
+import { SvangerskapspengeSak } from '../../types/SvangerskapspengeSak';
+
+type SvangerskapspengerProps = {
+    svpSak: SvangerskapspengeSak;
+};
+export const Svangerskapspenger = ({ svpSak }: SvangerskapspengerProps) => {
+    const erVedtatt = !svpSak.gjeldendeVedtak?.avslagÅrsak;
+    const arbeidsforhold = svpSak.åpenBehandling?.søknad.arbeidsforhold ?? svpSak.gjeldendeVedtak?.arbeidsforhold;
+    const terminDato = svpSak.familiehendelse.termindato;
+
+    if (!arbeidsforhold || !terminDato) {
+        return null;
+    }
+    const perioder = lagKronologiskeSvpPerioder(svpSak);
+    return (
+        <VStack>
+            <Heading level="2" size="medium" spacing>
+                {erVedtatt ? 'Dette har du fått vedtatt' : 'Dette har du søkt om'}
+            </Heading>
+            <VStack gap="4" className="bg-white p-4">
+                {Object.values(groupBy(perioder, 'fom')).map((gruppertePerioder) => (
+                    <React.Fragment key={gruppertePerioder[0].fom}>
+                        <GruppertePerioder perioder={gruppertePerioder} />
+                        <div className="h-px bg-border-divider" />
path: apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.tsx
user: login: tor-nav
body: Me har ein komponent HorizontalLine som kanskje kan brukast? Evt skriva om den komponenten om dette er ein bedre måte å gjera det på.

Det blir jo litt smak og behag. Men for min del er det iallfall lettare å finna ein felleskomponent enn denne div'en når eg skal laga noko sånt. (Eg tvilar på at eg huksar bg-border-divider)
created_at: 2025-03-07T13:01:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,293 @@
+import {
+    BandageFillIcon,
+    HeartFillIcon,
+    ParasolBeachFillIcon,
+    PersonPregnantFillIcon,
+    StrollerFillIcon,
+} from '@navikt/aksel-icons';
+import dayjs from 'dayjs';
+import { groupBy } from 'lodash';
+import React from 'react';
+
+import { BodyShort, HGrid, HStack, Heading, Show, VStack } from '@navikt/ds-react';
+
+import {
+    TidsperiodenString,
+    capitalizeFirstLetter,
+    capitalizeFirstLetterInEveryWordOnly,
+    formatDateMedUkedag,
+    formatDateShortMonth,
+    treUkerSiden,
+} from '@navikt/fp-utils';
+
+import { SvangerskapspengeSak } from '../../types/SvangerskapspengeSak';
+
+type SvangerskapspengerProps = {
+    svpSak: SvangerskapspengeSak;
+};
+export const Svangerskapspenger = ({ svpSak }: SvangerskapspengerProps) => {
+    const erVedtatt = !svpSak.gjeldendeVedtak?.avslagÅrsak;
+    const arbeidsforhold = svpSak.åpenBehandling?.søknad.arbeidsforhold ?? svpSak.gjeldendeVedtak?.arbeidsforhold;
+    const terminDato = svpSak.familiehendelse.termindato;
+
+    if (!arbeidsforhold || !terminDato) {
+        return null;
+    }
+    const perioder = lagKronologiskeSvpPerioder(svpSak);
+    return (
+        <VStack>
+            <Heading level="2" size="medium" spacing>
+                {erVedtatt ? 'Dette har du fått vedtatt' : 'Dette har du søkt om'}
+            </Heading>
+            <VStack gap="4" className="bg-white p-4">
+                {Object.values(groupBy(perioder, 'fom')).map((gruppertePerioder) => (
+                    <React.Fragment key={gruppertePerioder[0].fom}>
+                        <GruppertePerioder perioder={gruppertePerioder} />
+                        <div className="h-px bg-border-divider" />
+                    </React.Fragment>
+                ))}
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>
+                        {formatDateShortMonth(treUkerSiden(terminDato))} - {formatDateShortMonth(terminDato)}
+                    </BodyShort>
+                    <BodyShort> </BodyShort>
path: apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.tsx
user: login: tor-nav
body: Er dette med vilje?
created_at: 2025-03-07T13:02:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,293 @@
+import {
+    BandageFillIcon,
+    HeartFillIcon,
+    ParasolBeachFillIcon,
+    PersonPregnantFillIcon,
+    StrollerFillIcon,
+} from '@navikt/aksel-icons';
+import dayjs from 'dayjs';
+import { groupBy } from 'lodash';
+import React from 'react';
+
+import { BodyShort, HGrid, HStack, Heading, Show, VStack } from '@navikt/ds-react';
+
+import {
+    TidsperiodenString,
+    capitalizeFirstLetter,
+    capitalizeFirstLetterInEveryWordOnly,
+    formatDateMedUkedag,
+    formatDateShortMonth,
+    treUkerSiden,
+} from '@navikt/fp-utils';
+
+import { SvangerskapspengeSak } from '../../types/SvangerskapspengeSak';
+
+type SvangerskapspengerProps = {
+    svpSak: SvangerskapspengeSak;
+};
+export const Svangerskapspenger = ({ svpSak }: SvangerskapspengerProps) => {
+    const erVedtatt = !svpSak.gjeldendeVedtak?.avslagÅrsak;
+    const arbeidsforhold = svpSak.åpenBehandling?.søknad.arbeidsforhold ?? svpSak.gjeldendeVedtak?.arbeidsforhold;
+    const terminDato = svpSak.familiehendelse.termindato;
+
+    if (!arbeidsforhold || !terminDato) {
+        return null;
+    }
+    const perioder = lagKronologiskeSvpPerioder(svpSak);
+    return (
+        <VStack>
+            <Heading level="2" size="medium" spacing>
+                {erVedtatt ? 'Dette har du fått vedtatt' : 'Dette har du søkt om'}
+            </Heading>
+            <VStack gap="4" className="bg-white p-4">
+                {Object.values(groupBy(perioder, 'fom')).map((gruppertePerioder) => (
+                    <React.Fragment key={gruppertePerioder[0].fom}>
+                        <GruppertePerioder perioder={gruppertePerioder} />
+                        <div className="h-px bg-border-divider" />
+                    </React.Fragment>
+                ))}
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>
+                        {formatDateShortMonth(treUkerSiden(terminDato))} - {formatDateShortMonth(terminDato)}
+                    </BodyShort>
+                    <BodyShort> </BodyShort>
+                    <TreUkerFørTermin />
+                </HGrid>
+                <div className="h-[1] bg-border-divider" />
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>{capitalizeFirstLetter(formatDateMedUkedag(terminDato))}</BodyShort>
+                    <BodyShort> </BodyShort>
path: apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.tsx
user: login: tor-nav
body: Ser sånn ut :) Såg litt pussig ut, er det for å få vertikal spacing? Kva med å heller brukar VStack?
created_at: 2025-03-07T13:02:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,293 @@
+import {
+    BandageFillIcon,
+    HeartFillIcon,
+    ParasolBeachFillIcon,
+    PersonPregnantFillIcon,
+    StrollerFillIcon,
+} from '@navikt/aksel-icons';
+import dayjs from 'dayjs';
+import { groupBy } from 'lodash';
+import React from 'react';
+
+import { BodyShort, HGrid, HStack, Heading, Show, VStack } from '@navikt/ds-react';
+
+import {
+    TidsperiodenString,
+    capitalizeFirstLetter,
+    capitalizeFirstLetterInEveryWordOnly,
+    formatDateMedUkedag,
+    formatDateShortMonth,
+    treUkerSiden,
+} from '@navikt/fp-utils';
+
+import { SvangerskapspengeSak } from '../../types/SvangerskapspengeSak';
+
+type SvangerskapspengerProps = {
+    svpSak: SvangerskapspengeSak;
+};
+export const Svangerskapspenger = ({ svpSak }: SvangerskapspengerProps) => {
+    const erVedtatt = !svpSak.gjeldendeVedtak?.avslagÅrsak;
+    const arbeidsforhold = svpSak.åpenBehandling?.søknad.arbeidsforhold ?? svpSak.gjeldendeVedtak?.arbeidsforhold;
+    const terminDato = svpSak.familiehendelse.termindato;
+
+    if (!arbeidsforhold || !terminDato) {
+        return null;
+    }
+    const perioder = lagKronologiskeSvpPerioder(svpSak);
+    return (
+        <VStack>
+            <Heading level="2" size="medium" spacing>
+                {erVedtatt ? 'Dette har du fått vedtatt' : 'Dette har du søkt om'}
+            </Heading>
+            <VStack gap="4" className="bg-white p-4">
+                {Object.values(groupBy(perioder, 'fom')).map((gruppertePerioder) => (
+                    <React.Fragment key={gruppertePerioder[0].fom}>
+                        <GruppertePerioder perioder={gruppertePerioder} />
+                        <div className="h-px bg-border-divider" />
+                    </React.Fragment>
+                ))}
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>
+                        {formatDateShortMonth(treUkerSiden(terminDato))} - {formatDateShortMonth(terminDato)}
+                    </BodyShort>
+                    <BodyShort> </BodyShort>
+                    <TreUkerFørTermin />
+                </HGrid>
+                <div className="h-[1] bg-border-divider" />
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>{capitalizeFirstLetter(formatDateMedUkedag(terminDato))}</BodyShort>
+                    <BodyShort> </BodyShort>
+                    <Termin />
+                </HGrid>
+            </VStack>
+        </VStack>
+    );
+};
+
+const GruppertePerioder = ({ perioder }: { perioder: ReturnType<typeof lagKronologiskeSvpPerioder> }) => {
+    return (
+        <HGrid gap="2" columns={{ xs: '1fr 40px', md: '1fr 1fr 300px' }} align="center">
+            {perioder.map((p, index) => {
+                const arbeidsgiverNavn =
+                    capitalizeFirstLetterInEveryWordOnly(p.aktivitet.arbeidsgiverNavn) ?? p.aktivitet.arbeidsgiver.id;
+                const dato = index === 0 ? `${formatDateShortMonth(p.fom)} - ${formatDateShortMonth(p.tom)}` : '';
+                const prosentSvangerskapspenger =
+                    p.type === 'HEL' ? 0 : p.type === 'INGEN' ? 100 : 100 - (p.arbeidstidprosent ?? 0);
+
+                return (
+                    <React.Fragment key={p.aktivitet.arbeidsgiverNavn}>
+                        <Show above="md" asChild>
+                            <div className="contents">
+                                <BodyShort className="whitespace-nowrap">{dato}</BodyShort>
+                                <BodyShort>{arbeidsgiverNavn}</BodyShort>
+                                {p.type && (
+                                    <HStack
+                                        wrap={false}
+                                        gap="4"
+                                        align="center"
+                                        justify="space-between"
+                                        className="pt-2 pb-2 pl-4 pr-4 bg-green-100 rounded-3xl"
+                                    >
+                                        <BodyShort>{prosentSvangerskapspenger}% svangerskapspenger</BodyShort>
+                                        <GravidIkon />
+                                    </HStack>
+                                )}
+                                {p.årsak === 'FERIE' && <DuHarFerie />}
+                                {p.årsak === 'SYKEPENGER' && <DuErSykemeldt />}
+                            </div>
+                        </Show>
+                        <Show below="md" asChild>
+                            <div className="contents">
+                                <BodyShort className="col-span-2">{dato}</BodyShort>
+                                <VStack>
+                                    <strong>{arbeidsgiverNavn}</strong>
+                                    <BodyShort>
+                                        {p.type && `${prosentSvangerskapspenger}% svangerskapspenger`}
+                                        {p.årsak === 'FERIE' && 'Ferie'}
+                                        {p.årsak === 'SYKEPENGER' && 'Sykepenger'}
+                                    </BodyShort>
+                                </VStack>
+                                {p.type && <GravidIkon />}
+                                {p.årsak === 'FERIE' && <ParasollIkon />}
+                                {p.årsak === 'SYKEPENGER' && <BandasjeIkon />}
+                            </div>
+                        </Show>
+                    </React.Fragment>
+                );
+            })}
+        </HGrid>
+    );
+};
+
+const DuHarFerie = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-orange-100 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du har ferie</BodyShort>
+            <ParasollIkon />
+        </HStack>
+    );
+};
+
+const DuErSykemeldt = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-orange-100 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du er sykemeldt</BodyShort>
+            <BandasjeIkon />
+        </HStack>
+    );
+};
+
+const TreUkerFørTermin = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-purple-50 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du kan søke om foreldrepenger</BodyShort>
+            <BarnevognIkon />
+        </HStack>
+    );
+};
+
+const Termin = () => {
+    return (
+        <HStack gap="4" align="center" justify="space-between" className="pt-2 pb-2 pl-4 pr-4 bg-red-50 rounded-3xl">
+            <BodyShort>Termin</BodyShort>
+            <HeartFillIcon fontSize={'2.5rem'} className="text-icon-danger p-05" aria-hidden />
path: apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.tsx
user: login: tor-nav
body: ta vekk {}?
created_at: 2025-03-07T13:04:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,293 @@
+import {
+    BandageFillIcon,
+    HeartFillIcon,
+    ParasolBeachFillIcon,
+    PersonPregnantFillIcon,
+    StrollerFillIcon,
+} from '@navikt/aksel-icons';
+import dayjs from 'dayjs';
+import { groupBy } from 'lodash';
+import React from 'react';
+
+import { BodyShort, HGrid, HStack, Heading, Show, VStack } from '@navikt/ds-react';
+
+import {
+    TidsperiodenString,
+    capitalizeFirstLetter,
+    capitalizeFirstLetterInEveryWordOnly,
+    formatDateMedUkedag,
+    formatDateShortMonth,
+    treUkerSiden,
+} from '@navikt/fp-utils';
+
+import { SvangerskapspengeSak } from '../../types/SvangerskapspengeSak';
+
+type SvangerskapspengerProps = {
+    svpSak: SvangerskapspengeSak;
+};
+export const Svangerskapspenger = ({ svpSak }: SvangerskapspengerProps) => {
+    const erVedtatt = !svpSak.gjeldendeVedtak?.avslagÅrsak;
+    const arbeidsforhold = svpSak.åpenBehandling?.søknad.arbeidsforhold ?? svpSak.gjeldendeVedtak?.arbeidsforhold;
+    const terminDato = svpSak.familiehendelse.termindato;
+
+    if (!arbeidsforhold || !terminDato) {
+        return null;
+    }
+    const perioder = lagKronologiskeSvpPerioder(svpSak);
+    return (
+        <VStack>
+            <Heading level="2" size="medium" spacing>
+                {erVedtatt ? 'Dette har du fått vedtatt' : 'Dette har du søkt om'}
+            </Heading>
+            <VStack gap="4" className="bg-white p-4">
+                {Object.values(groupBy(perioder, 'fom')).map((gruppertePerioder) => (
+                    <React.Fragment key={gruppertePerioder[0].fom}>
+                        <GruppertePerioder perioder={gruppertePerioder} />
+                        <div className="h-px bg-border-divider" />
+                    </React.Fragment>
+                ))}
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>
+                        {formatDateShortMonth(treUkerSiden(terminDato))} - {formatDateShortMonth(terminDato)}
+                    </BodyShort>
+                    <BodyShort> </BodyShort>
+                    <TreUkerFørTermin />
+                </HGrid>
+                <div className="h-[1] bg-border-divider" />
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>{capitalizeFirstLetter(formatDateMedUkedag(terminDato))}</BodyShort>
+                    <BodyShort> </BodyShort>
+                    <Termin />
+                </HGrid>
+            </VStack>
+        </VStack>
+    );
+};
+
+const GruppertePerioder = ({ perioder }: { perioder: ReturnType<typeof lagKronologiskeSvpPerioder> }) => {
+    return (
+        <HGrid gap="2" columns={{ xs: '1fr 40px', md: '1fr 1fr 300px' }} align="center">
+            {perioder.map((p, index) => {
+                const arbeidsgiverNavn =
+                    capitalizeFirstLetterInEveryWordOnly(p.aktivitet.arbeidsgiverNavn) ?? p.aktivitet.arbeidsgiver.id;
+                const dato = index === 0 ? `${formatDateShortMonth(p.fom)} - ${formatDateShortMonth(p.tom)}` : '';
+                const prosentSvangerskapspenger =
+                    p.type === 'HEL' ? 0 : p.type === 'INGEN' ? 100 : 100 - (p.arbeidstidprosent ?? 0);
+
+                return (
+                    <React.Fragment key={p.aktivitet.arbeidsgiverNavn}>
+                        <Show above="md" asChild>
+                            <div className="contents">
+                                <BodyShort className="whitespace-nowrap">{dato}</BodyShort>
+                                <BodyShort>{arbeidsgiverNavn}</BodyShort>
+                                {p.type && (
+                                    <HStack
+                                        wrap={false}
+                                        gap="4"
+                                        align="center"
+                                        justify="space-between"
+                                        className="pt-2 pb-2 pl-4 pr-4 bg-green-100 rounded-3xl"
+                                    >
+                                        <BodyShort>{prosentSvangerskapspenger}% svangerskapspenger</BodyShort>
+                                        <GravidIkon />
+                                    </HStack>
+                                )}
+                                {p.årsak === 'FERIE' && <DuHarFerie />}
+                                {p.årsak === 'SYKEPENGER' && <DuErSykemeldt />}
+                            </div>
+                        </Show>
+                        <Show below="md" asChild>
+                            <div className="contents">
+                                <BodyShort className="col-span-2">{dato}</BodyShort>
+                                <VStack>
+                                    <strong>{arbeidsgiverNavn}</strong>
+                                    <BodyShort>
+                                        {p.type && `${prosentSvangerskapspenger}% svangerskapspenger`}
+                                        {p.årsak === 'FERIE' && 'Ferie'}
+                                        {p.årsak === 'SYKEPENGER' && 'Sykepenger'}
+                                    </BodyShort>
+                                </VStack>
+                                {p.type && <GravidIkon />}
+                                {p.årsak === 'FERIE' && <ParasollIkon />}
+                                {p.årsak === 'SYKEPENGER' && <BandasjeIkon />}
+                            </div>
+                        </Show>
+                    </React.Fragment>
+                );
+            })}
+        </HGrid>
+    );
+};
+
+const DuHarFerie = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-orange-100 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du har ferie</BodyShort>
+            <ParasollIkon />
+        </HStack>
+    );
+};
+
+const DuErSykemeldt = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-orange-100 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du er sykemeldt</BodyShort>
+            <BandasjeIkon />
+        </HStack>
+    );
+};
+
+const TreUkerFørTermin = () => {
+    return (
+        <HStack
+            gap="4"
+            align="center"
+            justify="space-between"
+            className="pt-2 pb-2 pl-4 pr-4 bg-purple-50 rounded-3xl"
+            wrap={false}
+        >
+            <BodyShort>Du kan søke om foreldrepenger</BodyShort>
+            <BarnevognIkon />
+        </HStack>
+    );
+};
+
+const Termin = () => {
+    return (
+        <HStack gap="4" align="center" justify="space-between" className="pt-2 pb-2 pl-4 pr-4 bg-red-50 rounded-3xl">
+            <BodyShort>Termin</BodyShort>
+            <HeartFillIcon fontSize={'2.5rem'} className="text-icon-danger p-05" aria-hidden />
+        </HStack>
+    );
+};
+
+const BandasjeIkon = () => (
+    <div className="rounded-3xl bg-orange-200 justify-self-end">
+        <BandageFillIcon fontSize={'2.5rem'} className=" text-orange-500 p-05" aria-hidden />
+    </div>
+);
+
+const ParasollIkon = () => (
+    <div className="rounded-3xl bg-orange-200 justify-self-end">
+        <ParasolBeachFillIcon fontSize={'2.5rem'} className=" text-orange-500 p-05" aria-hidden />
+    </div>
+);
+
+const GravidIkon = () => (
+    <div className="rounded-3xl bg-green-200 justify-self-end">
+        <PersonPregnantFillIcon fontSize={'2.5rem'} className=" text-surface-success p-05" aria-hidden />
+    </div>
+);
+
+const BarnevognIkon = () => (
+    <div className="rounded-3xl bg-purple-100 justify-self-end">
+        <StrollerFillIcon fontSize={'2.5rem'} className=" text-purple-500 p-05" aria-hidden />
+    </div>
+);
+
+export const lagKronologiskeSvpPerioder = (svpSak: SvangerskapspengeSak) => {
path: apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.tsx
user: login: tor-nav
body: Det er fredag etter lunsj no, kan heller sjå på det over helga om naudsynt
created_at: 2025-03-07T13:07:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,606 @@
+import { SAK_1, SAK_2, SAK_3, SAK_4 } from 'storybookData/saker/svpsaker';
+
+import { lagKronologiskeSvpPerioder } from './Svangerskapspenger';
+
+describe('lagKronologiskeSvpPerioder', () => {
+    it('Case 1', async () => {
path: apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.test.ts
user: login: johannbm
body: Godt poeng, kjørte bare copy-paste
created_at: 2025-03-10T09:09:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,293 @@
+import {
+    BandageFillIcon,
+    HeartFillIcon,
+    ParasolBeachFillIcon,
+    PersonPregnantFillIcon,
+    StrollerFillIcon,
+} from '@navikt/aksel-icons';
+import dayjs from 'dayjs';
+import { groupBy } from 'lodash';
+import React from 'react';
+
+import { BodyShort, HGrid, HStack, Heading, Show, VStack } from '@navikt/ds-react';
+
+import {
+    TidsperiodenString,
+    capitalizeFirstLetter,
+    capitalizeFirstLetterInEveryWordOnly,
+    formatDateMedUkedag,
+    formatDateShortMonth,
+    treUkerSiden,
+} from '@navikt/fp-utils';
+
+import { SvangerskapspengeSak } from '../../types/SvangerskapspengeSak';
+
+type SvangerskapspengerProps = {
+    svpSak: SvangerskapspengeSak;
+};
+export const Svangerskapspenger = ({ svpSak }: SvangerskapspengerProps) => {
+    const erVedtatt = !svpSak.gjeldendeVedtak?.avslagÅrsak;
+    const arbeidsforhold = svpSak.åpenBehandling?.søknad.arbeidsforhold ?? svpSak.gjeldendeVedtak?.arbeidsforhold;
+    const terminDato = svpSak.familiehendelse.termindato;
+
+    if (!arbeidsforhold || !terminDato) {
+        return null;
+    }
+    const perioder = lagKronologiskeSvpPerioder(svpSak);
+    return (
+        <VStack>
+            <Heading level="2" size="medium" spacing>
+                {erVedtatt ? 'Dette har du fått vedtatt' : 'Dette har du søkt om'}
+            </Heading>
+            <VStack gap="4" className="bg-white p-4">
+                {Object.values(groupBy(perioder, 'fom')).map((gruppertePerioder) => (
+                    <React.Fragment key={gruppertePerioder[0].fom}>
+                        <GruppertePerioder perioder={gruppertePerioder} />
+                        <div className="h-px bg-border-divider" />
+                    </React.Fragment>
+                ))}
+                <HGrid gap="2" columns={{ md: '1fr 1fr 300px' }} align="center">
+                    <BodyShort>
+                        {formatDateShortMonth(treUkerSiden(terminDato))} - {formatDateShortMonth(terminDato)}
+                    </BodyShort>
+                    <BodyShort> </BodyShort>
path: apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.tsx
user: login: johannbm
body: Jepp. Er for å fylle tomrom i gridden
created_at: 2025-03-10T09:13:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,293 @@
+import {
+    BandageFillIcon,
+    HeartFillIcon,
+    ParasolBeachFillIcon,
+    PersonPregnantFillIcon,
+    StrollerFillIcon,
+} from '@navikt/aksel-icons';
+import dayjs from 'dayjs';
+import { groupBy } from 'lodash';
+import React from 'react';
+
+import { BodyShort, HGrid, HStack, Heading, Show, VStack } from '@navikt/ds-react';
+
+import {
+    TidsperiodenString,
+    capitalizeFirstLetter,
+    capitalizeFirstLetterInEveryWordOnly,
+    formatDateMedUkedag,
+    formatDateShortMonth,
+    treUkerSiden,
+} from '@navikt/fp-utils';
+
+import { SvangerskapspengeSak } from '../../types/SvangerskapspengeSak';
+
+type SvangerskapspengerProps = {
+    svpSak: SvangerskapspengeSak;
+};
+export const Svangerskapspenger = ({ svpSak }: SvangerskapspengerProps) => {
+    const erVedtatt = !svpSak.gjeldendeVedtak?.avslagÅrsak;
+    const arbeidsforhold = svpSak.åpenBehandling?.søknad.arbeidsforhold ?? svpSak.gjeldendeVedtak?.arbeidsforhold;
+    const terminDato = svpSak.familiehendelse.termindato;
+
+    if (!arbeidsforhold || !terminDato) {
+        return null;
+    }
+    const perioder = lagKronologiskeSvpPerioder(svpSak);
+    return (
+        <VStack>
+            <Heading level="2" size="medium" spacing>
+                {erVedtatt ? 'Dette har du fått vedtatt' : 'Dette har du søkt om'}
+            </Heading>
+            <VStack gap="4" className="bg-white p-4">
+                {Object.values(groupBy(perioder, 'fom')).map((gruppertePerioder) => (
+                    <React.Fragment key={gruppertePerioder[0].fom}>
+                        <GruppertePerioder perioder={gruppertePerioder} />
+                        <div className="h-px bg-border-divider" />
path: apps/foreldrepengeoversikt/src/components/svangerskapspenger/Svangerskapspenger.tsx
user: login: johannbm
body: Var ikke klar over at den komponenten fantes. Kan bruke den
created_at: 2025-03-10T09:20:18Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-03-11T07:54:16Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=navikt_foreldrepengesoknad&pullRequest=4852) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [3 New issues](https://sonarcloud.io/project/issues?id=navikt_foreldrepengesoknad&pullRequest=4852&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=navikt_foreldrepengesoknad&pullRequest=4852&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=navikt_foreldrepengesoknad&pullRequest=4852&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=navikt_foreldrepengesoknad&pullRequest=4852&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=navikt_foreldrepengesoknad&pullRequest=4852&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=navikt_foreldrepengesoknad&pullRequest=4852)


author_association: NONE