Tsff 1164 overlappende justeringer (#7208)

* Visuelle justeringer

* Justeringer i overlappende saker

- Redaksjonelle endringer
- Bytte til dayjs
- Fiks bug i datovelger, hvor man bare kunne velge enkelte dager og ikke perioder

* Update package.json

* fjern utkommentert kode

* yarn install

* typo

Author: thomashwi

packages/v2/gui/package.json

@@ -25,7 +25,7 @@
     "@tanstack/react-query": "^5.67.3",
     "@types/object-hash": "^3.0.6",
     "axios": "1.8.3",
-    "date-fns": "4.1.0",
+    "dayjs": "^1.11.13",
     "object-hash": "^3.0.0",
     "react": "19.0.0",
     "react-hook-form": "7.54.2",

packages/v2/gui/src/prosess/uttak/vurder-overlappende-sak/VurderOverlappendePeriodeForm.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useState, type FC } from 'react';
 import { useFormContext, type FieldArrayWithId, type UseFieldArrayReplace } from 'react-hook-form';
-import { isSameDay } from 'date-fns';
+import dayjs from 'dayjs';
 import { formatPeriod } from '@k9-sak-web/lib/dateUtils/dateUtils.js';
 import { ScissorsIcon, TrashIcon } from '@navikt/aksel-icons';
 import {
-  Label,
   Button,
   RadioGroup,
   Radio,
@@ -15,6 +14,8 @@ import {
   Modal,
   DatePicker,
   VStack,
+  ReadMore,
+  List,
 } from '@navikt/ds-react';
 import { PeriodeMedOverlappValg } from '@k9-sak-web/backend/k9sak/generated';
 import { type VurderOverlappendeSakFormData } from './VurderOverlappendeSak';
@@ -50,14 +51,13 @@ const VurderOverlappendePeriodeForm: FC<Props> = ({
   const [skalViseSkjema, setSkalViseSkjema] = useState<boolean>(false);
 
   const harSplittedePerioder = !originaleOverlappendePerioder.some(originalPeriode => {
-    return (
-      isSameDay(new Date(originalPeriode.fom), new Date(fom)) && isSameDay(new Date(originalPeriode.tom), new Date(tom))
-    );
+    return dayjs(originalPeriode.fom).isSame(fom) && dayjs(originalPeriode.tom).isSame(tom);
   });
   const kanSlettes = harSplittedePerioder && !readOnly;
-  const kanSplittes = !isSameDay(new Date(fom), new Date(tom)) && !readOnly;
+  const kanSplittes = !dayjs(fom).isSame(tom) && !readOnly;
   const watchValg = watch(`perioder.${index}.valg`);
   const erEndretAutomatisk = getValues(`perioder.${index}.endretAutomatisk`);
+  const [velgDato, setVelgDato] = useState<number>(0);
 
   useEffect(() => {}, []);
 
@@ -68,47 +68,45 @@ const VurderOverlappendePeriodeForm: FC<Props> = ({
 
   return (
     <div>
-      <HStack gap={'space-8'} align="center">
-        <Label size="small">
-          Vurder uttak for perioden{' '}
-          <BodyShort
-            size="small"
-            as="span"
-            weight="semibold"
-            className={erEndretAutomatisk ? styles['uttaksPeriodeEndret'] : ''}
-          >{`${formatPeriod(fom || '', tom || '')}`}</BodyShort>
-        </Label>
-        {kanSplittes && (
-          <Button
-            onClick={() => setVisDatovelger(true)}
-            variant="tertiary"
-            size="small"
-            type="button"
-            icon={<ScissorsIcon title="Splitt periode" />}
-          />
-        )}
-
-        {kanSlettes && (
-          <Button
-            type="button"
-            onClick={() => slettPeriode(index)}
-            variant="tertiary"
-            size="small"
-            icon={<TrashIcon title="Slett periode" />}
-          />
-        )}
-
-        {erEndretAutomatisk && (
-          <HelpText title="Hvor kommer dette fra?">
-            Denne perioden ble justert automatisk for å fylle den overlappende perioden.
-          </HelpText>
-        )}
-      </HStack>
       <VStack gap={'space-16'}>
         <RadioGroup
           size="small"
-          legend={`Sett uttaksgrad i prosent for perioden ${formatPeriod(fom || '', tom || '')}`}
-          hideLegend={true}
+          legend={
+            <HStack as={'span'} align={'center'} gap={'space-8'}>
+              <BodyShort size="small" as="span" weight="semibold">
+                Vurder uttak for perioden{' '}
+                <BodyShort
+                  size="small"
+                  as="span"
+                  weight="semibold"
+                  className={erEndretAutomatisk ? styles['uttaksPeriodeEndret'] : ''}
+                >{`${formatPeriod(fom || '', tom || '')}`}</BodyShort>
+              </BodyShort>
+              {kanSplittes && (
+                <Button
+                  onClick={() => setVisDatovelger(true)}
+                  variant="tertiary"
+                  size="small"
+                  type="button"
+                  icon={<ScissorsIcon title="Splitt periode" />}
+                />
+              )}
+              {kanSlettes && (
+                <Button
+                  type="button"
+                  onClick={() => slettPeriode(index)}
+                  variant="tertiary"
+                  size="small"
+                  icon={<TrashIcon title="Slett periode" />}
+                />
+              )}
+              {erEndretAutomatisk && (
+                <HelpText title="Hvor kommer dette fra?">
+                  Denne perioden ble justert automatisk for å fylle den overlappende perioden.
+                </HelpText>
+              )}
+            </HStack>
+          }
           onChange={value => {
             setValue(`perioder.${index}.valg`, value);
           }}
@@ -134,25 +132,55 @@ const VurderOverlappendePeriodeForm: FC<Props> = ({
             />
           </div>
         )}
+
+        <ReadMore header="Hva betyr de ulike valgene?" size="small">
+          Her tar du valg for hvordan uttaket skal være i denne saken.
+          <List size="small">
+            <List.Item>
+              Ingen uttak i perioden: Dette valget medfører at du nuller ut uttaket i den overlappende perioden. Velg
+              dette hvis du ønsker at bruker skal få alt uttak/utbetaling i den andre saken.
+            </List.Item>
+            <List.Item>
+              Vanlig uttak i perioden: Ved å velge dette, bestemmer du at denne saken skal graderes som vanlig ut fra
+              informasjon om arbeidstid, inntekt, tilsyn osv. Du velger altså å la den gå sin gang, uten å bli påvirket
+              av den overlappende saken.
+            </List.Item>
+            <List.Item>
+              Tilpass uttaksgrad: Her kan du manuelt bestemme hvor mange prosent pleiepenger bruker skal få i saken.
+              Dette valget brukes unntaksvis, da det vil medføre at man må overstyre hver gang det kommer en endring.
+              Man må også være mer obs på hvilken uttaksgrad den andre saken har, spesielt hvis ikke den også settes
+              manuelt.
+            </List.Item>
+          </List>
+        </ReadMore>
       </VStack>
 
       {kanSplittes && (
         <div>
           <Modal
             title="Spesifiser periode"
-            onClose={() => setVisDatovelger(false)}
+            onClose={() => {
+              setVelgDato(0);
+              setVisDatovelger(false);
+            }}
             open={visDatoVelger}
             aria-label="Spesifiser periode"
           >
             <Modal.Header closeButton>Spesifiser periode</Modal.Header>
             <Modal.Body>
               <DatePicker.Standalone
+                dropdownCaption
+                defaultMonth={new Date(fom)}
                 mode="range"
                 disabled={[{ before: new Date(fom) }, { after: new Date(tom) }]}
                 onSelect={(val: undefined | { from: Date | undefined; to?: Date | undefined }) => {
-                  if (val?.from && val.to) {
-                    setVisDatovelger(false);
-                    splittPeriode(val.from, val.to, index);
+                  if (velgDato === 0) setVelgDato(1);
+                  if (velgDato === 1) {
+                    if (val?.from && val.to) {
+                      setVisDatovelger(false);
+                      splittPeriode(val.from, val.to, index);
+                      setVelgDato(0);
+                    }
                   }
                 }}
               />

packages/v2/gui/src/prosess/uttak/vurder-overlappende-sak/VurderOverlappendeSak.module.css

@@ -47,3 +47,11 @@
 .uttaksPeriodeEndret {
   color: var(--a-orange-600);
 }
+
+.vurderOverlappendeSakAPListe :where(ul, li) {
+  margin-block: 0;
+}
+
+.noOverlappendeMargin ul {
+  margin-block: 0 !important;
+}

packages/v2/gui/src/prosess/uttak/vurder-overlappende-sak/VurderOverlappendeSak.module.d.css.ts

@@ -2,10 +2,12 @@ declare const styles: {
   readonly "apActive": string;
   readonly "apContainer": string;
   readonly "apReadOnly": string;
+  readonly "noOverlappendeMargin": string;
   readonly "uttaksPeriodeEndret": string;
   readonly "uttaksgradField": string;
   readonly "uttaksgradPeriode": string;
   readonly "vurderOverlappendeSak": string;
+  readonly "vurderOverlappendeSakApListe": string;
 };
 export = styles;
 

packages/v2/gui/src/prosess/uttak/vurder-overlappende-sak/VurderOverlappendeSak.tsx

@@ -192,12 +192,26 @@ const VurderOverlappendeSak: FC<Props> = ({ behandling, aksjonspunkt, api, oppda
       {!readOnly && (
         <Alert variant={'warning'}>
           <Heading spacing size="xsmall" level="3">
-            Vurder overlappende perioder med annen sak
+            Søker har overlappende perioder med en annen sak
           </Heading>
-          <BodyShort>
-            Søker har overlappende perioder i uttak med annen sak. Fordel uttaksgrad i begge saker, så den totale
-            uttaksgraden ikke overstiger 100 %.
-          </BodyShort>
+          <List size="small" className={styles['vurderOverlappendeSakApListe']}>
+            <List.Item>Reserver den tilhørende saken</List.Item>
+            <List.Item>
+              Vurder om du må justere uttaket i en eller begge saker, for å unngå dobbelutbetaling. Vurder ut fra:
+              <List size="small" className={`asdf ${styles['noOverlappendeMargin']}`}>
+                <List.Item>Opplysninger fra bruker, vet vi hva han eller hun vil?</List.Item>
+                <List.Item>
+                  Skal det være tilgjengelig uttak til andre på ett av barna? Det vil ofte lønne seg å innvilge på den
+                </List.Item>
+                <List.Item>nyeste saken, mtp beregning og feriepenger.</List.Item>
+              </List>
+            </List.Item>
+            <List.Item>Er du usikker, må du kontakte bruker for avklaring.</List.Item>
+            <List.Item>
+              Når du har vurdert uttak i denne saken, går du inn i den andre saken og vurderer uttaket for samme
+              periode.
+            </List.Item>
+          </List>
         </Alert>
       )}
 

packages/v2/gui/src/utils/formatters.ts

@@ -1 +1,7 @@
+import dayjs from 'dayjs';
+
 export const tilNOK = Intl.NumberFormat('no-NO', { style: 'currency', currency: 'NOK', maximumFractionDigits: 0 });
+
+export const stdDato = (input: dayjs.Dayjs | string | Date) => dayjs(input).format('YYYY-MM-DD');
+
+export const visnDato = (input: dayjs.Dayjs | string | Date) => dayjs(input).format('DD.MM.YYYY');

yarn.lock

@@ -4462,7 +4462,7 @@ __metadata:
     "@tanstack/react-query": "npm:^5.67.3"
     "@types/object-hash": "npm:^3.0.6"
     axios: "npm:1.8.3"
-    date-fns: "npm:4.1.0"
+    dayjs: "npm:^1.11.13"
     object-hash: "npm:^3.0.0"
     react: "npm:19.0.0"
     react-hook-form: "npm:7.54.2"
@@ -9410,7 +9410,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dayjs@npm:1.11.13":
+"dayjs@npm:1.11.13, dayjs@npm:^1.11.13":
   version: 1.11.13
   resolution: "dayjs@npm:1.11.13"
   checksum: 10/7374d63ab179b8d909a95e74790def25c8986e329ae989840bacb8b1888be116d20e1c4eee75a69ea0dfbae13172efc50ef85619d304ee7ca3c01d5878b704f5