Gjort en del refaktorering. Tatt ut kode til komponenter. Komponenten…

… HistorikkIEfKort er tenkt at skal være generell og utvides i fremtiden med f.eks. skolepenger og barnetilsyn.

src/frontend/Komponenter/Behandling/Tabell/TabellVisningMedTag.tsx

@@ -1,24 +1,8 @@
 import * as React from 'react';
-import styled from 'styled-components';
-import { ITidligereVedtaksperioder } from '../TidligereVedtaksperioder/typer';
-import { Heading, Tag } from '@navikt/ds-react';
+import { IStonader } from '../TidligereVedtaksperioder/typer';
+import { Tag } from '@navikt/ds-react';
 import { formatterBooleanEllerUkjent } from '../../../App/utils/formatter';
 
-export interface IStonader {
-    overskrift: string;
-    historikk?: undefined | ITidligereVedtaksperioder;
-    verdier?: IVerdier;
-}
-
-interface IVerdier {
-    stønad: string;
-    verdi: [{ sak: boolean | undefined }, { infotrygd: boolean | undefined }];
-}
-
-const Tittel = styled(Heading)`
-    text-decoration: underline;
-`;
-
 const TabellVisningMedTag: React.FC<{ stonad: IStonader }> = ({ stonad }) => {
     const renderTag = (verdi: boolean | undefined) => {
         const tagVariant = verdi ? 'success-filled' : 'neutral';
@@ -33,18 +17,15 @@ const TabellVisningMedTag: React.FC<{ stonad: IStonader }> = ({ stonad }) => {
 
     return (
         <>
-            <Tittel level="3" size="small">
-                {stonad.overskrift}
-            </Tittel>
             <table>
                 <tbody>
                     <tr>
                         <th>{'Historikk i EF Sak'}</th>
                         <th>{'Historikk i Infotrygd'}</th>
                     </tr>
                     <tr>
-                        {renderTag(stonad.verdier?.verdi[0].sak)}
-                        {renderTag(stonad.verdier?.verdi[1].infotrygd)}
+                        {renderTag(stonad.verdier?.sak)}
+                        {renderTag(stonad.verdier?.infotrygd)}
                     </tr>
                 </tbody>
             </table>

src/frontend/Komponenter/Behandling/TidligereVedtaksperioder/HistorikkIEfKort.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { IGrunnlagsdataPeriodeHistorikk } from './typer';
+import styled from 'styled-components';
+import { BodyShort, Heading, Label } from '@navikt/ds-react';
+import HistorikkRad from './HistorikkRad';
+import { Stønadstype } from '../../../App/typer/behandlingstema';
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    background: #f3fcf5;
+    padding: 1rem;
+    border: 1px solid rgba(0, 0, 0, 0.19);
+    border-radius: 6px;
+    text-align: left;
+`;
+
+const Tittel = styled(Heading)`
+    text-decoration: underline;
+`;
+
+const Grid = styled.div`
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    gap: 0.2rem;
+`;
+
+const Row = styled.div`
+    display: contents;
+`;
+
+const HistorikkIEfKort: React.FC<{
+    historikkISak: IGrunnlagsdataPeriodeHistorikk[] | undefined;
+    stønadstype: string;
+}> = ({ historikkISak, stønadstype }) => {
+    const erOvergansstønad = stønadstype === Stønadstype.OVERGANGSSTØNAD;
+
+    return (
+        <>
+            {historikkISak && (
+                <Container>
+                    <Tittel level="3" size="small">
+                        Historikk i EF Sak
+                    </Tittel>
+                    {erOvergansstønad && historikkISak?.length > 0 ? (
+                        <Grid>
+                            <Row>
+                                <Label>Periode</Label>
+                                <Label>Periodetype</Label>
+                                <Label>Måneder innvilget</Label>
+                                <Label>Har 0 beløp</Label>
+                            </Row>
+                            {historikkISak?.map((rad, i) => (
+                                <HistorikkRad key={i} rad={rad} index={i} />
+                            ))}
+                        </Grid>
+                    ) : (
+                        <BodyShort size="small">Kan ikke vise tidligere historikk.</BodyShort>
+                    )}
+                </Container>
+            )}
+        </>
+    );
+};
+
+export default HistorikkIEfKort;

src/frontend/Komponenter/Behandling/TidligereVedtaksperioder/HistorikkIInfotrygdKort.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { BodyShort, Heading } from '@navikt/ds-react';
+import styled from 'styled-components';
+
+const Tittel = styled(Heading)`
+    text-decoration: underline;
+`;
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    background: #f3fcf5;
+    padding: 1rem;
+    border: 1px solid rgba(0, 0, 0, 0.19);
+    border-radius: 6px;
+    text-align: left;
+`;
+
+const HistorikkIInfotrygdKort: React.FC = () => {
+    return (
+        <Container>
+            <Tittel level="3" size="small">
+                Historikk i Infotrygd
+            </Tittel>
+            <BodyShort size="small">
+                Bruker har historikk i Infotrygd som må sjekkes manuelt.
+            </BodyShort>
+        </Container>
+    );
+};
+
+export default HistorikkIInfotrygdKort;

src/frontend/Komponenter/Behandling/TidligereVedtaksperioder/HistorikkRad.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { BodyShort, Tag } from '@navikt/ds-react';
+import { periodetypeTilTekst, EPeriodetype } from '../../../App/typer/vedtak';
+import { formaterIsoDato } from '../../../App/utils/formatter';
+import { etikettTypeOvergangsstønad } from '../../Personoversikt/HistorikkVedtaksperioder/vedtakshistorikkUtil';
+import { IGrunnlagsdataPeriodeHistorikk } from './typer';
+import styled from 'styled-components';
+
+interface HistorikkRadProps {
+    rad: IGrunnlagsdataPeriodeHistorikk;
+    index: number;
+}
+
+const Row = styled.div`
+    display: contents;
+`;
+
+const HistorikkRad: React.FC<HistorikkRadProps> = ({ rad, index }) => {
+    return (
+        <Row key={index}>
+            <BodyShort size="small">
+                {`${formaterIsoDato(rad.fom)} 
+            - 
+            ${formaterIsoDato(rad.tom)}`}
+            </BodyShort>
+            <div>
+                <Tag variant={etikettTypeOvergangsstønad(rad.vedtaksperiodeType)} size={'small'}>
+                    {periodetypeTilTekst[rad.vedtaksperiodeType || '']}
+                </Tag>
+            </div>
+            <BodyShort size="small">{rad.antallMåneder}</BodyShort>
+            <BodyShort size="small">
+                {rad.antallMånederUtenBeløp >= 1 && rad.vedtaksperiodeType !== EPeriodetype.SANKSJON
+                    ? `ja (${rad.antallMånederUtenBeløp})`
+                    : '-'}
+            </BodyShort>
+        </Row>
+    );
+};
+
+export default HistorikkRad;