Historisk visning av brukerhendelser (#2)

* Add historic view and slight redesign

package.json

@@ -40,7 +40,7 @@
     "next-router-mock": "^0.9.10",
     "postcss": "^8",
     "prettier": "3.0.3",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^3.3.5",
     "typescript": "^5"
   }
 }

src/breadcrumbs/breadcrumbs.ts

@@ -3,7 +3,7 @@ interface Breadcrumb {
   title: string;
 }
 
-export const AktivitetspliktCrumbs: Breadcrumb[] = [
+export const AktivitetspliktBaseCrumbs: Breadcrumb[] = [
   {
     url: process.env.NEXT_PUBLIC_MIN_SIDE_URL!,
     title: "Min side",
@@ -13,8 +13,26 @@ export const AktivitetspliktCrumbs: Breadcrumb[] = [
     title: "Ditt sykefravær",
   },
   {
-    url: "/aktivitetsplikt",
-    title: "Informasjon om aktivitetsplikt",
+    url: "/syk/aktivitetskrav",
+    title: "Din aktivitetsplikt",
   },
 ];
 
+export const AktivitetspliktHistorikkCrumbs: Breadcrumb[] = [
+  ...AktivitetspliktBaseCrumbs,
+  {
+    url: "/syk/aktivitetskrav",
+    title: "Historikk",
+  },
+];
+
+export function createBreadcrumbs(pathname: string) {
+  switch (pathname) {
+    case "/":
+      return AktivitetspliktBaseCrumbs;
+    case "/[uuid]":
+      return AktivitetspliktHistorikkCrumbs;
+    default:
+      return [];
+  }
+}

src/components/Aktivitetskrav.cy.tsx

@@ -1,37 +1,45 @@
 import React from "react";
 import { Aktivitetskrav } from "./Aktivitetskrav";
 import fixtures from "@/mocks/fixtures";
-import { infoSideHeaderText } from "@/components/view/AktivitetskravInfoComponent";
-import { forhandsVarselHeaderText } from "@/components/view/ForhandsvarselComponent";
 
 describe("<Aktivitetskrav />", () => {
-  it("Displays infoside for Ny kandidat", () => {
-    cy.mount(<Aktivitetskrav aktivitetskrav={fixtures.nyKandidatVurdering} />);
+  it("Displays infoside for vurdering ny kandidat", () => {
+    cy.mount(<Aktivitetskrav aktivitetskrav={fixtures.nyKandidatFixture} />);
 
-    cy.contains(infoSideHeaderText);
+    cy.contains("Det er på tide å informere deg om aktivitetsplikten");
   });
 
-  it("Displays infoside for forhandsvarsel with missing document", () => {
+  it("Displays infoside for vurdering forhandsvarsel with missing document", () => {
     cy.mount(
       <Aktivitetskrav
-        aktivitetskrav={fixtures.forhaandsvarselVurderingWithoutDocument}
+        aktivitetskrav={fixtures.forhaandsvarselFixtureWithoutDocument}
       />,
     );
 
-    cy.contains(infoSideHeaderText);
+    cy.contains("Det er på tide å informere deg om aktivitetsplikten");
   });
 
-  it("Displays forhaandsvarsel for forhandsvarsel with document", () => {
+  it("Displays forhaandsvarsel for vurdering forhandsvarsel with document", () => {
     cy.mount(
-      <Aktivitetskrav aktivitetskrav={fixtures.forhaandsvarselVurdering} />,
+      <Aktivitetskrav aktivitetskrav={fixtures.forhaandsvarselFixture} />,
     );
 
-    cy.contains(forhandsVarselHeaderText);
+    cy.contains("Varsel om stans av sykepenger");
   });
 
-  it("Defaults to infoside for other states", () => {
-    cy.mount(<Aktivitetskrav aktivitetskrav={fixtures.unntakVurdering} />);
+  it("Displays unntaksinfo with årsak for vurdering unntak", () => {
+    cy.mount(<Aktivitetskrav aktivitetskrav={fixtures.unntakFixture} />);
 
-    cy.contains(infoSideHeaderText);
+    cy.contains("NAV har vurdert aktivitetsplikten din");
+    cy.contains(
+      "NAV har vurdert aktivitetsplikten din og besluttet at du er unntatt fra aktivitetsplikten på grunn av medisinske opplysninger.",
+    );
+  });
+
+  it("Displays oppfyltinfo with årsak for vurdering oppfylt", () => {
+    cy.mount(<Aktivitetskrav aktivitetskrav={fixtures.oppfyltFixture} />);
+
+    cy.contains("NAV har vurdert aktivitetsplikten din");
+    cy.contains("NAV vurderer at du oppfyller aktivitetsplikten siden du er");
   });
 });

src/components/Aktivitetskrav.tsx

@@ -1,20 +1,25 @@
 import { AktivitetskravVurdering } from "@/schema/aktivitetskravVurderingSchema";
-import { AktivitetskravInfoComponent } from "@/components/view/AktivitetskravInfoComponent";
-import { ForhandsvarselComponent } from "@/components/view/ForhandsvarselComponent";
+import { Page } from "@/components/page/Page";
+import { AktivitetskravBox } from "@/components/box/AktivitetskravBox";
+import React from "react";
+import { HistoricEventsSummary } from "@/components/history/HistoricEventsSummary";
+import { getViewItems } from "@/components/view/viewUtils";
+import { Vurdering } from "@/components/view/Vurdering";
 
 interface Props {
-  aktivitetskrav: AktivitetskravVurdering;
+  aktivitetskrav: AktivitetskravVurdering[];
 }
+
 export const Aktivitetskrav = ({ aktivitetskrav }: Props) => {
-  switch (aktivitetskrav.status) {
-    case "FORHANDSVARSEL": {
-      if (!aktivitetskrav.document) {
-        return <AktivitetskravInfoComponent />;
-      }
-      return <ForhandsvarselComponent document={aktivitetskrav.document} />;
-    }
-    default: {
-      return <AktivitetskravInfoComponent />;
-    }
-  }
+  const { activeVurdering, historicVurderinger } = getViewItems(aktivitetskrav);
+
+  return (
+    <Page>
+      <AktivitetskravBox>
+        <Vurdering viewItem={activeVurdering} />
+      </AktivitetskravBox>
+
+      <HistoricEventsSummary historicVurderinger={historicVurderinger} />
+    </Page>
+  );
 };

src/components/box/AktivitetskravBox.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from "react";
+import { Box } from "@navikt/ds-react";
+
+interface Props {
+  children: ReactNode;
+}
+
+export const AktivitetskravBox = ({ children }: Props) => {
+  return (
+    <div className="max-w-3xl w-full">
+      <Box
+        background="bg-default"
+        padding="6"
+        borderRadius="medium"
+        shadow="small"
+        className="mx-4 mt-4 flex flex-col gap-4"
+      >
+        {children}
+      </Box>
+    </div>
+  );
+};

src/components/header/ComponentHeader.tsx

@@ -0,0 +1,50 @@
+import { BodyLong, Heading } from "@navikt/ds-react";
+import React from "react";
+import { getShortDateFormat } from "@/utils/dateUtils";
+import {
+  CheckmarkCircleFillIcon,
+  ExclamationmarkTriangleFillIcon,
+  InformationSquareFillIcon,
+  XMarkOctagonFillIcon,
+} from "@navikt/aksel-icons";
+import styles from "./componentheader.module.css";
+
+interface Props {
+  headerText: string;
+  alertStyle: "info" | "success" | "warning" | "error";
+  createdAt: string;
+}
+
+export const ComponentHeader = ({
+  headerText,
+  alertStyle,
+  createdAt,
+}: Props) => {
+  return (
+    <div className="mb-4">
+      <div className="flex flex-row mb-4 space-between">
+        <Heading size="large" level="1">
+          {headerText}
+        </Heading>
+        <>
+          {alertStyle === "info" && (
+            <InformationSquareFillIcon className={styles.infoIcon} />
+          )}
+          {alertStyle === "warning" && (
+            <ExclamationmarkTriangleFillIcon className={styles.warningIcon} />
+          )}
+          {alertStyle === "success" && (
+            <CheckmarkCircleFillIcon className={styles.successIcon} />
+          )}
+          {alertStyle === "error" && (
+            <XMarkOctagonFillIcon className={styles.errorIcon} />
+          )}
+        </>
+      </div>
+
+      <BodyLong textColor="subtle">
+        Utsendt {getShortDateFormat(createdAt)}
+      </BodyLong>
+    </div>
+  );
+};

src/components/header/componentheader.module.css

@@ -0,0 +1,27 @@
+.roundedIcon {
+  flex-shrink: 0;
+  font-size: 2rem;
+  height: 30px;
+  margin-top: 0.2rem;
+  margin-left: auto;
+}
+
+.infoIcon {
+  composes: roundedIcon;
+  color: var(--a-icon-info);
+}
+
+.warningIcon {
+  composes: roundedIcon;
+  color: var(--a-icon-warning);
+}
+
+.successIcon {
+  composes: roundedIcon;
+  color: var(--a-icon-success);
+}
+
+.errorIcon {
+  composes: roundedIcon;
+  color: var(--a-icon-danger);
+}

src/components/history/HistoricEventsSummary.tsx

@@ -0,0 +1,52 @@
+import { AktivitetskravBox } from "@/components/box/AktivitetskravBox";
+import { Heading, LinkPanel } from "@navikt/ds-react";
+import NextLink from "next/link";
+import React from "react";
+import { getShortDateFormat } from "@/utils/dateUtils";
+import { AktivitetskravViewItem } from "@/components/view/viewUtils";
+
+const getHeaderText = (viewItem: AktivitetskravViewItem) => {
+  switch (viewItem.type) {
+    case "UNDER_BEHANDLING":
+      return "NAV vurderer aktivitetsplikten din";
+    case "IKKE_OPPFYLT":
+      return "Svarfristen har gått ut";
+    case "FORHANDSVARSEL":
+      return "Forhåndsvarsel om stans av sykepenger";
+    case "MOTTATT_VURDERING":
+      return "Du har mottatt en vurdering av din aktivitetsplikt";
+  }
+};
+
+interface Props {
+  historicVurderinger: AktivitetskravViewItem[] | null;
+}
+
+export const HistoricEventsSummary = ({ historicVurderinger }: Props) => {
+  if (historicVurderinger && historicVurderinger.length > 0) {
+    return (
+      <AktivitetskravBox>
+        <Heading size="medium" level="2" spacing>
+          Tidligere hendelser vedrørende din aktivitetsplikt
+        </Heading>
+
+        {historicVurderinger.map((item, index) => {
+          return (
+            <LinkPanel
+              href={`/${item.vurdering.internUuid}`}
+              border
+              as={NextLink}
+              key={index}
+            >
+              <LinkPanel.Title>
+                {getShortDateFormat(item.vurdering.createdAt)}:{" "}
+                {getHeaderText(item)}
+              </LinkPanel.Title>
+            </LinkPanel>
+          );
+        })}
+      </AktivitetskravBox>
+    );
+  }
+  return null;
+};

src/components/icons/IconRow.tsx

@@ -11,7 +11,7 @@ export const IconRow = ({ icon, displaySkeleton = false, children }: Props) => {
   return (
     <div className="flex flex-row gap-4">
       {displaySkeleton ? (
-        <div>
+        <div className="hidden sm:flex">
           <Skeleton variant="circle" width={60} height={60} />
         </div>
       ) : (

src/components/page/Page.tsx

@@ -1,36 +1,22 @@
 import React, { ReactNode } from "react";
-import { PageHeadingWithImage } from "./PageHeadingWithImage";
-import { PageHeading } from "./PageHeading";
 import { Link } from "@navikt/ds-react";
-import { MedUtenAGVisning } from "@/components/view/AktivitetskravInfoComponent";
 
 interface Props {
-  headerText: ReactNode;
-  image?: MedUtenAGVisning;
   children: ReactNode;
 }
 
-export const Page = ({ headerText, image, children }: Props) => {
+export const Page = ({ children }: Props) => {
   return (
     <>
-      <div className="mb-4 px-8">
-        {image ? (
-          <PageHeadingWithImage headerText={headerText} image={image} />
-        ) : (
-          <PageHeading headerText={headerText} />
-        )}
-      </div>
+      <div className="flex flex-col items-center bg-ds-gray-50">
+        {children}
 
-      <div className="flex flex-col items-center md:bg-ds-gray-50">
-        <div className="flex flex-col max-w-3xl gap-8 p-8 md:mt-8 mb-8 bg-white">
-          {children}
-          <Link
-            className="flex self-center"
-            href={process.env.NEXT_PUBLIC_MIN_SIDE_URL}
-          >
-            Naviger til Min side
-          </Link>
-        </div>
+        <Link
+          className="flex self-center my-8"
+          href={process.env.NEXT_PUBLIC_MIN_SIDE_URL}
+        >
+          Naviger til Min side
+        </Link>
       </div>
     </>
   );

src/components/page/PageHeadingWithImage.tsx

@@ -3,7 +3,7 @@ import { Heading } from "@navikt/ds-react";
 import React, { ReactNode } from "react";
 import medarbeidsgiver from "../../../public/med_arbeidsgiver.svg";
 import utenarbeidsgiver from "../../../public/uten_arbeidsgiver.svg";
-import { MedUtenAGVisning } from "@/components/view/AktivitetskravInfoComponent";
+import { MedUtenAGVisning } from "@/components/view/UnderBehandlingComponent";
 
 interface Props {
   headerText: ReactNode;