legg til mockdata og alder steg

app/components/oppgave-steg-alder/OppgaveStegAlder.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-4);
+}

app/components/oppgave-steg-alder/OppgaveStegAlder.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import styles from "./OppgaveStegAlder.module.css";
+import { Alert, BodyShort, Heading, Label } from "@navikt/ds-react";
+
+interface IAldersteg {
+  alderskravDagpenger: number;
+  fodselsdato: string;
+  sisteDagKravOppfylt: string;
+  virkningsdato: string;
+  vilkaarOppfylt: boolean;
+}
+
+export function OppgaveStegAlder() {
+  const props = mock;
+
+  return (
+    <div className={styles.container}>
+      <Heading size="medium">Alder</Heading>
+      <BodyShort>
+        For å ha rett til dagpenger må søker være under {props.alderskravDagpenger} år.
+      </BodyShort>
+
+      <div>
+        <Label size="small" as="p">
+          Fødselsdato
+        </Label>
+        <BodyShort size="small">{props.fodselsdato}</BodyShort>
+      </div>
+
+      <div>
+        <Label size="small" as="p">
+          Siste mulige dag alderskravet er oppfylt
+        </Label>
+        <BodyShort size="small">{props.sisteDagKravOppfylt}</BodyShort>
+      </div>
+
+      <div>
+        <Label size="small" as="p">
+          Virkningsdato
+        </Label>
+        <BodyShort size="small">{props.virkningsdato}</BodyShort>
+      </div>
+
+      {props.vilkaarOppfylt && (
+        <Alert variant="success" size="small">
+          Aldersvilkåret er oppfyllt
+        </Alert>
+      )}
+      {!props.vilkaarOppfylt && (
+        <Alert variant="error" size="small">
+          Aldersvilkåret er ikke oppfyllt
+        </Alert>
+      )}
+    </div>
+  );
+}
+
+const mock: IAldersteg = {
+  alderskravDagpenger: 67,
+  fodselsdato: "1975-02-20",
+  sisteDagKravOppfylt: "2045-02-20",
+  virkningsdato: "2024-02-05",
+  vilkaarOppfylt: true,
+};

app/views/oppgave-steg-tapt-arbeidstid/OppgaveStegTaptArbeidstid.tsx → app/components/oppgave-steg-tapt-arbeidstid/OppgaveStegTaptArbeidstid.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import type { IOppgaveStegProps } from "../oppgave-steg/OppgaveSteg";
 import { Alert, BodyShort, DatePicker, Heading, Select, useDatepicker } from "@navikt/ds-react";
 import { InfoCard } from "~/components/info-card/InfoCard";
 import { TextFieldWithSuffix } from "~/components/text-field-with-suffix/TextFieldWithSuffix";
@@ -19,7 +18,7 @@ export interface ITaptArberidstidData {
   oppfylt: boolean;
 }
 
-export function OppgaveStegTaptArbeidstid(props: IOppgaveStegProps) {
+export function OppgaveStegTaptArbeidstid() {
   const { datepickerProps, inputProps } = useDatepicker({
     onDateChange: console.log,
   });

app/views/oppgave-steg/OppgaveSteg.tsx → app/components/oppgave-steg/OppgaveSteg.tsx

@@ -1,7 +1,8 @@
 import { type IOppgaveSteg } from "~/models/oppgave.server";
 import { OppgaveStegGenerell } from "./OppgaveStegGenerell";
 
-import { OppgaveStegTaptArbeidstid } from "~/views/oppgave-steg-tapt-arbeidstid/OppgaveStegTaptArbeidstid";
+import { OppgaveStegTaptArbeidstid } from "~/components/oppgave-steg-tapt-arbeidstid/OppgaveStegTaptArbeidstid";
+import { OppgaveStegAlder } from "~/components/oppgave-steg-alder/OppgaveStegAlder";
 
 export interface IOppgaveStegProps {
   steg: IOppgaveSteg;
@@ -13,7 +14,10 @@ export function OppgaveSteg(props: IOppgaveStegProps) {
 
   switch (steg.stegNavn) {
     case "Tapt arbeidstid":
-      return <OppgaveStegTaptArbeidstid {...props} />;
+      return <OppgaveStegTaptArbeidstid />;
+
+    case "Ikke over 67 år":
+      return <OppgaveStegAlder />;
 
     default:
       return <OppgaveStegGenerell {...props} />;

app/routes/saksbehandling.oppgave.$oppgaveId.steg.$stegNavn.tsx

@@ -3,7 +3,7 @@ import { useActionData, useParams } from "@remix-run/react";
 import invariant from "tiny-invariant";
 import type { IOpplysning } from "~/models/oppgave.server";
 import { svarOppgaveOpplysning } from "~/models/oppgave.server";
-import { OppgaveSteg } from "~/views/oppgave-steg/OppgaveSteg";
+import { OppgaveSteg } from "~/components/oppgave-steg/OppgaveSteg";
 import { getSession } from "~/models/auth.server";
 import { useTypedRouteLoaderData } from "~/hooks/useTypedRouteLoaderData";
 import { Alert, Tabs } from "@navikt/ds-react";

mocks/data/mock-tapt-arbeidstid.ts

@@ -1,4 +1,4 @@
-import type { ITaptArberidstidData } from "~/views/oppgave-steg-tapt-arbeidstid/OppgaveStegTaptArbeidstid";
+import type { ITaptArberidstidData } from "~/components/oppgave-steg-tapt-arbeidstid/OppgaveStegTaptArbeidstid";
 import type { IArbeidsforhold } from "~/components/arbeidsforhold/Arbeidsforhold";
 
 export const mockTaptArberidstid: ITaptArberidstidData = {