prøver å lage felleskomponent for navigasjon i vurderingsperioder

packages/behandling-opplaeringspenger/src/panelDefinisjoner/faktaPaneler/SykdomOgOpplæringPanelDef.tsx

@@ -3,7 +3,6 @@ import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import { FaktaPanelDef } from '@k9-sak-web/behandling-felles';
 import { Fagsak, Behandling } from '@k9-sak-web/types';
 import SykdomOgOpplæringIndex from '@k9-sak-web/gui/fakta/sykdom-og-opplæring/SykdomOgOpplæringIndex.js';
-import { OpplaeringspengerBehandlingApiKeys } from '../../data/opplaeringspengerBehandlingApi';
 
 class SykdomOgOpplæringPanelDef extends FaktaPanelDef {
   getUrlKode = () => faktaPanelCodes.SYKDOM_OG_OPPLAERING;
@@ -12,7 +11,7 @@ class SykdomOgOpplæringPanelDef extends FaktaPanelDef {
 
   getAksjonspunktKoder = () => [aksjonspunktCodes.MEDISINSK_VILKAAR, aksjonspunktCodes.VURDER_INSTITUSJON];
 
-  getEndepunkter = () => [OpplaeringspengerBehandlingApiKeys.INSTITUSJON, OpplaeringspengerBehandlingApiKeys.SYKDOM];
+  getEndepunkter = () => [];
 
   getKomponent = ({ readOnly, submitCallback, behandling }) => {
     return (

packages/v2/gui/src/fakta/sykdom-og-opplæring/SykdomOgOpplæringIndex.tsx

@@ -54,13 +54,21 @@ const SykdomOgOpplæring = () => {
         <Tabs.Tab value="reisetid" label="Reisetid" />
       </Tabs.List>
       <Tabs.Panel value="institusjon">
-        <FaktaInstitusjonIndex />
+        <div className="mt-4">
+          <FaktaInstitusjonIndex />
+        </div>
       </Tabs.Panel>
       <Tabs.Panel value="sykdom">
-        <VurderSykdomUperiodisert />
+        <div className="mt-4">
+          <VurderSykdomUperiodisert />
+        </div>
+      </Tabs.Panel>
+      <Tabs.Panel value="opplæring">
+        <div className="mt-4">opplæring</div>
+      </Tabs.Panel>
+      <Tabs.Panel value="reisetid">
+        <div className="mt-4">reisetid</div>
       </Tabs.Panel>
-      <Tabs.Panel value="opplæring">opplæring</Tabs.Panel>
-      <Tabs.Panel value="reisetid">reisetid</Tabs.Panel>
     </Tabs>
   );
 };

packages/v2/gui/src/fakta/sykdom-og-opplæring/institusjon/FaktaInstitusjonIndex.tsx

@@ -1,5 +1,4 @@
 import { useState, useMemo, useContext } from 'react';
-import { Heading } from '@navikt/ds-react';
 import { NavigationWithDetailView } from '@navikt/ft-plattform-komponenter';
 import { Period } from '@navikt/ft-utils';
 import {
@@ -8,12 +7,12 @@ import {
   type InstitusjonVurderingDto,
 } from '@k9-sak-web/backend/k9sak/generated';
 
-import InstitusjonNavigation from './components/institusjonNavigation/InstitusjonNavigation.js';
 import InstitusjonDetails from './components/institusjonDetails/InstitusjonDetails.js';
 import type { InstitusjonPerioderDtoMedResultat } from './types/InstitusjonPerioderDtoMedResultat.js';
 import type { InstitusjonVurderingDtoMedPerioder } from './types/InstitusjonVurderingDtoMedPerioder.js';
 import { useInstitusjonInfo } from '../SykdomOgOpplæringQueries.js';
 import { SykdomOgOpplæringContext } from '../SykdomOgOpplæringIndex.js';
+import VurderingsperiodeNavigasjon from '../../../shared/vurderingsperiode-navigasjon/VurderingsperiodeNavigasjon.js';
 
 export interface FaktaInstitusjonProps {
   perioder: InstitusjonPeriodeDto[];
@@ -67,19 +66,29 @@ const FaktaInstitusjonIndex = () => {
       perioder: vurdering.perioder.map(p => new Period(p.fom ?? '', p.tom ?? '')),
     };
   })();
+  const perioderTilVurdering = useMemo(
+    () => perioderMappet.filter(periode => periode.resultat === InstitusjonVurderingDtoResultat.MÅ_VURDERES),
+    [perioderMappet],
+  );
+  const vurdertePerioder = useMemo(
+    () => perioderMappet.filter(periode => periode.resultat !== InstitusjonVurderingDtoResultat.MÅ_VURDERES),
+    [perioderMappet],
+  );
 
   if (isLoading) {
     return <div>Laster institusjon...</div>;
   }
 
   return (
-    <div style={{ fontSize: '16px' }}>
-      <div className="my-7">
-        <Heading size="small">Institusjon</Heading>
-      </div>
-
+    <div>
       <NavigationWithDetailView
-        navigationSection={() => <InstitusjonNavigation perioder={perioderMappet} setValgtPeriode={setValgtPeriode} />}
+        navigationSection={() => (
+          <VurderingsperiodeNavigasjon
+            perioderTilVurdering={perioderTilVurdering}
+            vurdertePerioder={vurdertePerioder}
+            onPeriodeClick={setValgtPeriode}
+          />
+        )}
         showDetailSection
         detailSection={() =>
           valgtVurdering ? <InstitusjonDetails vurdering={valgtVurdering} readOnly={readOnly} /> : null

packages/v2/gui/src/fakta/sykdom-og-opplæring/sykdom/VurderSykdomUperiodisert.tsx

@@ -1,14 +1,50 @@
-import Vurderingsliste from './Vurderingsliste';
+import { NavigationWithDetailView } from '@navikt/ft-plattform-komponenter';
+import Vurderingsnavigasjon, {
+  Resultat,
+  type Vurderingselement,
+} from '../../../shared/vurderingsperiode-navigasjon/VurderingsperiodeNavigasjon';
 import { Heading } from '@navikt/ds-react';
+import { Period } from '@fpsak-frontend/utils';
+import { useState } from 'react';
 
 const VurderSykdomUperiodisert = () => {
+  const mockElementer = [
+    {
+      periode: { fom: '2024-01-01', tom: '2024-01-31' },
+      resultat: Resultat.OPPFYLT,
+    },
+    {
+      periode: { fom: '2024-02-01', tom: '2024-02-29' },
+      resultat: Resultat.IKKE_GODKJENT_AUTOMATISK,
+    },
+  ];
+  const vurderingsliste = mockElementer.map(element => ({
+    ...element,
+    perioder: element.periode ? [new Period(element.periode.fom, element.periode.tom)] : [],
+  }));
+
+  const [valgtPeriode, setValgtPeriode] = useState<Vurderingselement | null>(null);
+
   return (
-    <div>
-      <Vurderingsliste />
-      <div>
-        <Heading size="small">Valgt vurdering</Heading>
-      </div>
-    </div>
+    <NavigationWithDetailView
+      navigationSection={() => (
+        <Vurderingsnavigasjon
+          perioderTilVurdering={vurderingsliste || []}
+          vurdertePerioder={[]}
+          onPeriodeClick={setValgtPeriode}
+        />
+      )}
+      showDetailSection={!!valgtPeriode}
+      detailSection={() => (
+        <div>
+          <Heading size="small">Valgt vurdering</Heading>
+          <div>
+            <p>Periode:</p>
+            <p>Resultat: {valgtPeriode?.resultat}</p>
+          </div>
+        </div>
+      )}
+    />
   );
 };
 

packages/v2/gui/src/fakta/sykdom-og-opplæring/institusjon/components/periodeRad/PeriodeRad.tsx → packages/v2/gui/src/shared/vurderingsperiode-navigasjon/PeriodeRad.tsx

@@ -1,4 +1,3 @@
-import { InstitusjonVurderingDtoResultat } from '@k9-sak-web/backend/k9sak/generated';
 import {
   ContentWithTooltip,
   GreenCheckIconFilled,
@@ -10,22 +9,23 @@ import {
 import { Period } from '@navikt/ft-utils';
 
 import styles from './periodeRad.module.css';
-
+import type { ResultatType } from './VurderingsperiodeNavigasjon';
+import { Resultat } from './VurderingsperiodeNavigasjon';
 interface OwnProps {
   perioder: Period[];
-  resultat: string;
+  resultat?: ResultatType;
 }
 
-const renderStatusIcon = (resultat: string) => {
-  if (resultat === InstitusjonVurderingDtoResultat.MÅ_VURDERES) {
+const renderStatusIcon = (resultat?: ResultatType) => {
+  if (!resultat || resultat === Resultat.MÅ_VURDERES) {
     return (
       <ContentWithTooltip tooltipText="Perioden må vurderes">
         <WarningIcon />
       </ContentWithTooltip>
     );
   }
 
-  if (resultat === InstitusjonVurderingDtoResultat.GODKJENT_AUTOMATISK) {
+  if (resultat === Resultat.GODKJENT_AUTOMATISK) {
     return (
       <ContentWithTooltip tooltipText="Vilkåret er automatisk oppfylt">
         <IndicatorWithOverlay
@@ -36,7 +36,7 @@ const renderStatusIcon = (resultat: string) => {
     );
   }
 
-  if (resultat === InstitusjonVurderingDtoResultat.IKKE_GODKJENT_AUTOMATISK) {
+  if (resultat === Resultat.IKKE_GODKJENT_AUTOMATISK) {
     return (
       <ContentWithTooltip tooltipText="Vilkåret er automatisk ikke oppfylt">
         <IndicatorWithOverlay
@@ -46,14 +46,14 @@ const renderStatusIcon = (resultat: string) => {
       </ContentWithTooltip>
     );
   }
-  if (resultat === InstitusjonVurderingDtoResultat.GODKJENT_MANUELT) {
+  if (resultat === Resultat.GODKJENT_MANUELT || resultat === Resultat.OPPFYLT) {
     return (
       <ContentWithTooltip tooltipText="Vilkåret er oppfylt">
         <GreenCheckIconFilled />
       </ContentWithTooltip>
     );
   }
-  if (resultat === InstitusjonVurderingDtoResultat.IKKE_GODKJENT_MANUELT) {
+  if (resultat === Resultat.IKKE_GODKJENT_MANUELT || resultat === Resultat.IKKE_OPPFYLT) {
     return (
       <ContentWithTooltip tooltipText="Vilkåret er ikke oppfylt">
         <RedCrossIconFilled />
@@ -65,7 +65,7 @@ const renderStatusIcon = (resultat: string) => {
 
 const PeriodeRad = ({ perioder, resultat }: OwnProps) => (
   <div className={styles.vurderingsperiodeElement}>
-    <div>
+    <div className="min-w-[50px]">
       <span className={styles['visuallyHidden']}>Type</span>
       {renderStatusIcon(resultat)}
     </div>

packages/v2/gui/src/shared/vurderingsperiode-navigasjon/VurderingsperiodeNavigasjon.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect } from 'react';
+import { Box, Heading } from '@navikt/ds-react';
+import { InteractiveList } from '@navikt/ft-plattform-komponenter';
+import PeriodeRad from './PeriodeRad';
+import type { Period } from '@navikt/ft-utils';
+import {
+  type InstitusjonVurderingDtoResultat,
+  type SykdomVurderingOversiktElementResultat,
+  InstitusjonVurderingDtoResultat as instEnumObject,
+  SykdomVurderingOversiktElementResultat as sykdomEnumObject,
+} from '@k9-sak-web/backend/k9sak/generated';
+
+export type ResultatType = InstitusjonVurderingDtoResultat | SykdomVurderingOversiktElementResultat;
+type ResultatKeys = keyof typeof instEnumObject | keyof typeof sykdomEnumObject;
+
+export const Resultat = {
+  ...instEnumObject,
+  ...sykdomEnumObject,
+} satisfies Record<ResultatKeys, ResultatType>;
+
+export interface Vurderingselement {
+  perioder: Period[];
+  resultat?: ResultatType;
+}
+
+export interface VurderingslisteProps<T extends Vurderingselement = Vurderingselement> {
+  perioderTilVurdering: T[];
+  vurdertePerioder: T[];
+  onPeriodeClick: (periode: T) => void;
+}
+
+const Vurderingsnavigasjon = <T extends Vurderingselement = Vurderingselement>({
+  perioderTilVurdering,
+  vurdertePerioder,
+  onPeriodeClick,
+}: VurderingslisteProps<T>) => {
+  const harPerioderSomSkalVurderes = perioderTilVurdering?.length > 0;
+  const [activeIndex, setActiveIndex] = React.useState(harPerioderSomSkalVurderes ? 0 : -1);
+
+  useEffect(() => {
+    if (harPerioderSomSkalVurderes && perioderTilVurdering[0]) {
+      setActiveIndex(0);
+      onPeriodeClick(perioderTilVurdering[0]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const vurdertePerioderElements = vurdertePerioder.map(({ perioder, resultat }) => (
+    <PeriodeRad perioder={perioder} resultat={resultat} />
+  ));
+
+  const periodeTilVurderingElements = perioderTilVurdering.map(({ perioder, resultat }) => (
+    <PeriodeRad perioder={perioder} resultat={resultat} />
+  ));
+
+  const allePerioder = [...perioderTilVurdering, ...vurdertePerioder];
+  const elements = [...periodeTilVurderingElements, ...vurdertePerioderElements];
+
+  const handlePeriodeClick = (index: number) => {
+    if (allePerioder[index]) {
+      setActiveIndex(index);
+      onPeriodeClick(allePerioder[index]);
+    }
+  };
+
+  return (
+    <Box className="min-w-[400px]">
+      <Heading size="xsmall" className="ml-[15px] mt-[21px] mb-[24px]">
+        Alle perioder
+      </Heading>
+
+      <div className="flex gap w-[120px]">
+        <div className="mx-4 min-w-[50px]">Status</div>
+        <div>Periode</div>
+      </div>
+
+      {allePerioder.length === 0 && <div className="ml-[15px] mt-[15px]">Ingen vurderinger å vise</div>}
+
+      {allePerioder.length > 0 && (
+        <div>
+          <InteractiveList
+            elements={elements.map((element, currentIndex) => ({
+              content: element,
+              active: activeIndex === currentIndex,
+              key: `${element.key}`,
+              onClick: () => handlePeriodeClick(currentIndex),
+            }))}
+          />
+        </div>
+      )}
+    </Box>
+  );
+};
+
+export default Vurderingsnavigasjon;

packages/v2/gui/src/fakta/sykdom-og-opplæring/institusjon/components/periodeRad/periodeRad.module.css → packages/v2/gui/src/shared/vurderingsperiode-navigasjon/periodeRad.module.css

@@ -10,7 +10,7 @@
 .vurderingsperiodeElementTexts {
   display: flex;
   align-items: center;
-  margin-left: 1.625rem;
+  margin-left: 0.9rem;
 }
 
 .vurderingsperiodeElementTextsPeriod {