Forbedret story

Diverse styling

Author: hallvardastark

packages/v2/gui/src/prosess/ung-beregning/ArbeidOgInntekt.tsx

@@ -5,7 +5,7 @@ import {
   type RapportertInntektDto,
 } from '@k9-sak-web/backend/ungsak/generated';
 import { CheckmarkCircleFillIcon, ExclamationmarkTriangleFillIcon, PersonIcon } from '@navikt/aksel-icons';
-import { Bleed, BodyLong, Box, Button, Heading, HStack, Table, VStack } from '@navikt/ds-react';
+import { Bleed, BodyLong, BodyShort, Box, Button, Heading, HStack, Label, Table, VStack } from '@navikt/ds-react';
 import { Form, InputField, RadioGroupPanel, TextAreaField } from '@navikt/ft-form-hooks';
 import { minLength, required } from '@navikt/ft-form-validators';
 import { useForm } from 'react-hook-form';
@@ -17,6 +17,13 @@ const formaterInntekt = (inntekt: RapportertInntektDto) => {
   return formatCurrencyWithKr((inntekt.arbeidsinntekt ?? 0) + (inntekt.ytelse ?? 0));
 };
 
+const formaterStatus = (status?: KontrollerInntektPeriodeDtoStatus) => {
+  if (status === KontrollerInntektPeriodeDtoStatus.AVVIK) {
+    return 'Avvik';
+  }
+  return 'Ingen avvik';
+};
+
 type Formvalues = {
   fastsattArbeidsinntekt: string;
   fastsattYtelse: string;
@@ -145,14 +152,16 @@ export const ArbeidOgInntekt = ({ submitCallback, inntektKontrollperioder }: Arb
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell scope="col" className={styles.firstHeaderCell}>
-                Status
+                <Label size="small">Status</Label>
+              </Table.HeaderCell>
+              <Table.HeaderCell scope="col">
+                <Label size="small">Periode</Label>
               </Table.HeaderCell>
-              <Table.HeaderCell scope="col">Periode</Table.HeaderCell>
               <Table.HeaderCell scope="col" align="right">
-                Rapportert av deltager
+                <Label size="small">Rapportert av deltager</Label>
               </Table.HeaderCell>
               <Table.HeaderCell scope="col" align="right">
-                Rapportert i A-inntekt
+                <Label size="small">Rapportert i A-inntekt</Label>
               </Table.HeaderCell>
               <Table.HeaderCell />
             </Table.Row>
@@ -162,6 +171,7 @@ export const ArbeidOgInntekt = ({ submitCallback, inntektKontrollperioder }: Arb
               const isLastRow = index === inntektKontrollperioder.length - 1;
               const harAksjonspunkt = inntekt.erTilVurdering;
               const harAvvik = inntekt.status === KontrollerInntektPeriodeDtoStatus.AVVIK;
+
               return (
                 <Table.ExpandableRow
                   key={`${inntekt.periode?.fom}_${inntekt.periode?.tom}`}
@@ -172,25 +182,32 @@ export const ArbeidOgInntekt = ({ submitCallback, inntektKontrollperioder }: Arb
                   expansionDisabled={!harAksjonspunkt}
                 >
                   <Table.DataCell className={styles.firstDataCell}>
-                    <HStack gap="2">
+                    <HStack gap="2" align="center">
                       {harAvvik ? (
                         <ExclamationmarkTriangleFillIcon fontSize="1.5rem" className={styles.exclamationmarkIcon} />
                       ) : (
                         <CheckmarkCircleFillIcon fontSize={24} className={styles.checkmarkIcon} />
                       )}
-                      {inntekt.status}
+                      <BodyShort size="small">{formaterStatus(inntekt.status)}</BodyShort>
                     </HStack>
                   </Table.DataCell>
                   <Table.DataCell>
                     {inntekt.periode && (
-                      <PeriodLabel dateStringFom={inntekt.periode?.fom} dateStringTom={inntekt.periode?.tom} />
+                      <BodyShort size="small">
+                        <PeriodLabel dateStringFom={inntekt.periode?.fom} dateStringTom={inntekt.periode?.tom} />
+                      </BodyShort>
                     )}
                   </Table.DataCell>
                   <Table.DataCell align="right">
-                    {inntekt.rapporterteInntekter?.bruker && formaterInntekt(inntekt.rapporterteInntekter?.bruker)}
+                    <BodyShort size="small">
+                      {inntekt.rapporterteInntekter?.bruker && formaterInntekt(inntekt.rapporterteInntekter?.bruker)}
+                    </BodyShort>
                   </Table.DataCell>
                   <Table.DataCell align="right">
-                    {inntekt.rapporterteInntekter?.register && formaterInntekt(inntekt.rapporterteInntekter?.register)}
+                    <BodyShort size="small">
+                      {inntekt.rapporterteInntekter?.register &&
+                        formaterInntekt(inntekt.rapporterteInntekter?.register)}
+                    </BodyShort>
                   </Table.DataCell>
                 </Table.ExpandableRow>
               );

packages/v2/gui/src/prosess/ung-beregning/UngBeregning.tsx

@@ -1,4 +1,4 @@
-import { type UngdomsytelseSatsPeriodeDto } from '@k9-sak-web/backend/ungsak/generated';
+import { type KontrollerInntektDto, type UngdomsytelseSatsPeriodeDto } from '@k9-sak-web/backend/ungsak/generated';
 import { Alert, Box, Heading, Loader, Tabs } from '@navikt/ds-react';
 import { useQuery } from '@tanstack/react-query';
 import { ArbeidOgInntekt } from './ArbeidOgInntekt';
@@ -17,6 +17,20 @@ interface Props {
 const sortSatser = (data: UngdomsytelseSatsPeriodeDto[]) =>
   data?.toSorted((a, b) => new Date(a.fom).getTime() - new Date(b.fom).getTime()).toReversed();
 
+const sortInntekt = (data: KontrollerInntektDto): KontrollerInntektDto => {
+  const { kontrollperioder } = data;
+  return {
+    kontrollperioder: kontrollperioder
+      ?.toSorted((a, b) => {
+        if (!a.periode || !b.periode) {
+          return 0;
+        }
+        return new Date(a.periode.fom).getTime() - new Date(b.periode.fom).getTime();
+      })
+      .toReversed(),
+  };
+};
+
 const UngBeregning = ({ api, behandling, barn, submitCallback }: Props) => {
   const {
     data: satser,
@@ -29,16 +43,21 @@ const UngBeregning = ({ api, behandling, barn, submitCallback }: Props) => {
     select: sortSatser,
   });
 
-  const { data: inntekt, isLoading: kontrollInntektIsLoading } = useQuery({
+  const {
+    data: inntekt,
+    isLoading: kontrollInntektIsLoading,
+    isError: kontrollInntektIsError,
+  } = useQuery({
     queryKey: ['kontrollInntekt', behandling.uuid],
     queryFn: () => api.getKontrollerInntekt(behandling.uuid),
+    select: sortInntekt,
   });
 
   if (satserIsLoading || kontrollInntektIsLoading) {
     return <Loader size="large" />;
   }
 
-  if (satserIsError) {
+  if (satserIsError || kontrollInntektIsError) {
     return <Alert variant="error">Noe gikk galt, vennligst prøv igjen senere</Alert>;
   }
 

packages/v2/gui/src/storybook/mocks/FakeUngBeregningBackendApi.ts

@@ -1,4 +1,8 @@
-import type { UngdomsytelseSatsPeriodeDto } from '@k9-sak-web/backend/ungsak/generated';
+import {
+  KontrollerInntektPeriodeDtoStatus,
+  type KontrollerInntektDto,
+  type UngdomsytelseSatsPeriodeDto,
+} from '@k9-sak-web/backend/ungsak/generated';
 
 export class FakeUngBeregningBackendApi {
   async getSatser(): Promise<UngdomsytelseSatsPeriodeDto[]> {
@@ -15,4 +19,45 @@ export class FakeUngBeregningBackendApi {
       },
     ];
   }
+
+  async getKontrollerInntekt(): Promise<KontrollerInntektDto> {
+    return {
+      kontrollperioder: [
+        {
+          erTilVurdering: false,
+          fastsattArbeidsinntekt: 123,
+          fastsattYtelse: 456,
+          periode: { fom: '2025-01-01', tom: '2025-01-31' },
+          rapporterteInntekter: {
+            bruker: {
+              arbeidsinntekt: 123,
+              ytelse: 456,
+            },
+            register: {
+              arbeidsinntekt: 123,
+              ytelse: 456,
+            },
+          },
+          status: KontrollerInntektPeriodeDtoStatus.INGEN_AVVIK,
+        },
+        {
+          erTilVurdering: true,
+          fastsattArbeidsinntekt: 5000,
+          fastsattYtelse: 2500,
+          periode: { fom: '2025-02-01', tom: '2025-02-28' },
+          rapporterteInntekter: {
+            bruker: {
+              arbeidsinntekt: 4800,
+              ytelse: 2600,
+            },
+            register: {
+              arbeidsinntekt: 5200,
+              ytelse: 2400,
+            },
+          },
+          status: KontrollerInntektPeriodeDtoStatus.AVVIK,
+        },
+      ],
+    };
+  }
 }