Skal vise tag for om tidligere barnetilsynsperioder overlapper

src/frontend/App/typer/vedtak.ts

@@ -1,4 +1,5 @@
 import { Sanksjonsårsak } from './Sanksjonsårsak';
+import { OverlappMedOvergangsstønad } from '../../Komponenter/Behandling/TidligereVedtaksperioder/typer';
 
 export enum IVedtakType {
     InnvilgelseOvergangsstønad = 'InnvilgelseOvergangsstønad',
@@ -398,6 +399,13 @@ export const periodetypeTilTekst: Record<EPeriodetype | '', string> = {
     '': '',
 };
 
+export const overlappMedOvergangsstønadTilTekst: Record<OverlappMedOvergangsstønad | '', string> = {
+    JA: 'Ja, hele perioden',
+    DELVIS: 'Ja, deler av perioden',
+    NEI: 'Nei',
+    '': '',
+};
+
 export const behandlingResultatTilTekst: Record<EBehandlingResultat, string> = {
     INNVILGE: 'Innvilge',
     INNVILGE_UTEN_UTBETALING: 'Avslag/opphør pga kontantstøtte',

src/frontend/Komponenter/Behandling/TidligereVedtaksperioder/barnetilsyn/HistorikkRadIBarnetilsyn.tsx

@@ -3,6 +3,9 @@ import { BodyShort } from '@navikt/ds-react';
 import { formaterIsoDato } from '../../../../App/utils/formatter';
 import styled from 'styled-components';
 import { IGrunnlagsdataPeriodeHistorikkBarnetilsyn } from '../typer';
+import { Tag } from '@navikt/ds-react';
+import { etikettTypeOverlappBarnetilsyn } from '../../../Personoversikt/HistorikkVedtaksperioder/vedtakshistorikkUtil';
+import { overlappMedOvergangsstønadTilTekst } from '../../../../App/typer/vedtak';
 
 interface HistorikkRadProps {
     rad: IGrunnlagsdataPeriodeHistorikkBarnetilsyn;
@@ -21,6 +24,14 @@ const HistorikkRadIBarnetilsyn: React.FC<HistorikkRadProps> = ({ rad, indeks })
             - 
             ${formaterIsoDato(rad.tom)}`}
             </BodyShort>
+            <BodyShort size="small">
+                <Tag
+                    variant={etikettTypeOverlappBarnetilsyn(rad.overlapperMedOvergangsstønad)}
+                    size={'small'}
+                >
+                    {overlappMedOvergangsstønadTilTekst[rad.overlapperMedOvergangsstønad || '']}
+                </Tag>
+            </BodyShort>
         </Row>
     );
 };

src/frontend/Komponenter/Behandling/TidligereVedtaksperioder/barnetilsyn/KortInnholdBarnetilsyn.tsx

@@ -6,8 +6,9 @@ import HistorikkRadIBarnetilsyn from './HistorikkRadIBarnetilsyn';
 
 const Grid = styled.div`
     display: grid;
-    grid-template-columns: auto;
+    grid-template-columns: repeat(2, max-content);
     row-gap: 0.2rem;
+    column-gap: 1rem;
 `;
 const Row = styled.div`
     display: contents;
@@ -19,6 +20,7 @@ const KortInnholdBarnetilsyn: React.FC<{
         <Grid>
             <Row>
                 <Label>Periode</Label>
+                <Label>Overlapper med overgangsstønad</Label>
             </Row>
             {periodeHistorikkData?.map((rad, i) => (
                 <HistorikkRadIBarnetilsyn key={i} rad={rad} indeks={i} />

src/frontend/Komponenter/Behandling/TidligereVedtaksperioder/typer.ts

@@ -21,9 +21,15 @@ export interface IGrunnlagsdataPeriodeHistorikkOvergangsstønad {
     fom: string;
     tom: string;
 }
+export enum OverlappMedOvergangsstønad {
+    JA = 'JA',
+    NEI = 'NEI',
+    DELVIS = 'DELVIS',
+}
 export interface IGrunnlagsdataPeriodeHistorikkBarnetilsyn {
     fom: string;
     tom: string;
+    overlapperMedOvergangsstønad: OverlappMedOvergangsstønad;
 }
 export interface IHistorikkForStønad {
     stønadstype: string;

src/frontend/Komponenter/Personoversikt/HistorikkVedtaksperioder/vedtakshistorikkUtil.tsx

@@ -10,6 +10,7 @@ import { EPeriodetype, EUtgiftsperiodetype } from '../../../App/typer/vedtak';
 import React from 'react';
 import styled from 'styled-components';
 import { TagProps } from '@navikt/ds-react';
+import { OverlappMedOvergangsstønad } from '../../Behandling/TidligereVedtaksperioder/typer';
 
 export const HistorikkTabell = styled.table`
     margin-top: 2rem;
@@ -64,6 +65,15 @@ export const etikettTypeBarnetilsyn = (periodeType?: EUtgiftsperiodetype): TagPr
     }
 };
 
+export const etikettTypeOverlappBarnetilsyn = (
+    overlapperMedOvergangsstønad: OverlappMedOvergangsstønad
+): TagProps['variant'] => {
+    if (overlapperMedOvergangsstønad === OverlappMedOvergangsstønad.JA) {
+        return 'success';
+    }
+    return 'warning';
+};
+
 export const datoAndelHistorikk = (andel: AndelHistorikk) => {
     const fra = formaterNullableIsoDato(andel.andel.stønadFra);
     if (andel.erOpphør) {