Forside: Lagt inn Forstå krav og Status i organisasjonen

Forside: Satt tilbake det som ville legges tilbake for nå Forside: Satt tilbake det som var der før# Forside: Tatt bort TemaPanels Forside: Fikset styling til de to knappene Forside: Elementene fungerer og har nå lenker på seg
navikt · Dec 15, 2023 · e5ec8ad · e5ec8ad
1 parent 3116a75
commit e5ec8ad
Showing 1 changed file with 59 additions and 36 deletions.
diff --git a/apps/frontend/src/pages/MainPage.tsx b/apps/frontend/src/pages/MainPage.tsx
@@ -1,33 +1,33 @@
+import { useQuery } from '@apollo/client'
+import { Button, Heading, Link, LinkPanel } from '@navikt/ds-react'
+import moment from 'moment'
 import { useEffect, useState } from 'react'
+import { getMeldingByType } from '../api/MeldingApi'
 import { Markdown } from '../components/common/Markdown'
+import EditEtterlevelseDokumentasjonModal from '../components/etterlevelseDokumentasjon/edit/EditEtterlevelseDokumentasjonModal'
+import { PageLayout } from '../components/scaffold/Page'
 import { AlertType, EtterlevelseDokumentasjonQL, Melding, MeldingStatus, MeldingType, PageResponse } from '../constants'
-import { getMeldingByType } from '../api/MeldingApi'
 import { ampli, userRoleEventProp } from '../services/Amplitude'
-import { Button, Heading, Link, LinkPanel } from '@navikt/ds-react'
-import EditEtterlevelseDokumentasjonModal from '../components/etterlevelseDokumentasjon/edit/EditEtterlevelseDokumentasjonModal'
-import { TemaPanels } from './TemaoversiktPage'
 import { user } from '../services/User'
-import { PageLayout } from '../components/scaffold/Page'
-import { useQuery } from '@apollo/client'
 import { Variables, query } from './MyEtterlevelseDokumentasjonerPage'
-import moment from 'moment'
 
 export const MainPage = () => {
   const [forsideVarsel, setForsideVarsle] = useState<Melding>()
+
   const { data, loading: etterlevelseDokumentasjonLoading } = useQuery<{ etterlevelseDokumentasjoner: PageResponse<EtterlevelseDokumentasjonQL> }, Variables>(query, {
     variables: { sistRedigert: 4 },
     skip: !user.isLoggedIn(),
   })
 
   useEffect(() => {
     ampli.logEvent('sidevisning', { side: 'Hovedside', ...userRoleEventProp })
-      ; (async () => {
-        await getMeldingByType(MeldingType.FORSIDE).then((r) => {
-          if (r.numberOfElements > 0) {
-            setForsideVarsle(r.content[0])
-          }
-        })
-      })()
+    ;(async () => {
+      await getMeldingByType(MeldingType.FORSIDE).then((r) => {
+        if (r.numberOfElements > 0) {
+          setForsideVarsle(r.content[0])
+        }
+      })
+    })()
   }, [])
 
   return (
@@ -53,9 +53,7 @@ export const MainPage = () => {
                   </span>
                 </div>
               )}
-              {data?.etterlevelseDokumentasjoner.content.length && (
-                <EtterlevelseDokumentasjonList etterlevelseDokumentasjoner={data?.etterlevelseDokumentasjoner.content} />
-              )}
+              {data?.etterlevelseDokumentasjoner.content.length && <EtterlevelseDokumentasjonList etterlevelseDokumentasjoner={data?.etterlevelseDokumentasjoner.content} />}
               <div className="mt-8 flex justify-end">
                 <div className="mr-4">
                   <EditEtterlevelseDokumentasjonModal variant={data?.etterlevelseDokumentasjoner.content.length ? 'secondary' : 'primary'} />
@@ -73,10 +71,10 @@ export const MainPage = () => {
 
       <div className="flex flex-col items-center w-full bg-no-repeat bg-contain xl:bg-cover bg-[left_4.5rem] bg-[url('/src/resources/icons/main-page-background-icon.svg')]">
         <div className="max-w-7xl w-full px-2 pb-6">
-          <div className="mt-8 w-full px-8">
-            <TemaPanels subContent />
+          <div className="flex mt-10">
+            <ForstaKravene />
+            <StatusIOrganisasjonen />
           </div>
-
           {forsideVarsel?.meldingStatus === MeldingStatus.ACTIVE && (
             <div className="mt-16 mb-32" id="forsideVarselMelding">
               {forsideVarsel.alertType === AlertType.INFO ? (
@@ -96,9 +94,7 @@ export const MainPage = () => {
   )
 }
 
-
 const EtterlevelseDokumentasjonList = ({ etterlevelseDokumentasjoner }: { etterlevelseDokumentasjoner: EtterlevelseDokumentasjonQL[] }) => {
-
   const sortedEtterlevelseDokumentasjoner = [...etterlevelseDokumentasjoner].sort((a, b) => moment(b.sistEndretEtterlevelse).valueOf() - moment(a.sistEndretEtterlevelse).valueOf())
 
   return (
@@ -107,20 +103,47 @@ const EtterlevelseDokumentasjonList = ({ etterlevelseDokumentasjoner }: { etterl
         Mine sist dokumenterte
       </Heading>
       <div className="mt-6 flex flex-col gap-2">
-        {
-          sortedEtterlevelseDokumentasjoner.map((etterlevelseDokumentasjon, index) => {
-            return (
-              <LinkPanel href={'/dokumentasjon/' + etterlevelseDokumentasjon.id} key={etterlevelseDokumentasjon.title + '_' + index}>
-                <LinkPanel.Title className="text-xl">
-                  E{etterlevelseDokumentasjon.etterlevelseNummer} {etterlevelseDokumentasjon.title}
-                </LinkPanel.Title>
-                <LinkPanel.Description>
-                  {!!etterlevelseDokumentasjon.sistEndretEtterlevelse ? `Sist endret: ${moment(etterlevelseDokumentasjon.sistEndretEtterlevelse).format('ll')}` : ''}
-                </LinkPanel.Description>
-              </LinkPanel>
-            )
-          })}
+        {sortedEtterlevelseDokumentasjoner.map((etterlevelseDokumentasjon, index) => {
+          return (
+            <LinkPanel href={'/dokumentasjon/' + etterlevelseDokumentasjon.id} key={etterlevelseDokumentasjon.title + '_' + index}>
+              <LinkPanel.Title className="text-xl">
+                E{etterlevelseDokumentasjon.etterlevelseNummer} {etterlevelseDokumentasjon.title}
+              </LinkPanel.Title>
+              <LinkPanel.Description>
+                {!!etterlevelseDokumentasjon.sistEndretEtterlevelse ? `Sist endret: ${moment(etterlevelseDokumentasjon.sistEndretEtterlevelse).format('ll')}` : ''}
+              </LinkPanel.Description>
+            </LinkPanel>
+          )
+        })}
       </div>
     </div>
   )
-}
+}
+
+const ForstaKravene = () => (
+  <div className="w-full mr-2.5">
+    <LinkPanel
+      href="/tema"
+      onClick={() => {
+        ampli.logEvent('navigere', { kilde: 'forside-panel', app: 'etterlevelse', til: '/tema', fra: '/' })
+      }}
+    >
+      <LinkPanel.Title>Forstå kravene</LinkPanel.Title>
+      <LinkPanel.Description>Få oversikt over krav til etterlevelse, og bli trygg på at du kjenner til alle relevante krav for det du lager</LinkPanel.Description>
+    </LinkPanel>
+  </div>
+)
+
+const StatusIOrganisasjonen = () => (
+  <div className="w-full ml-2.5">
+    <LinkPanel
+      href="/dokumentasjoner"
+      onClick={() => {
+        ampli.logEvent('navigere', { kilde: 'forside-panel', app: 'etterlevelse', til: '/dokumentasjoner', fra: '/' })
+      }}
+    >
+      <LinkPanel.Title>Status i organisasjonen</LinkPanel.Title>
+      <LinkPanel.Description>Følg med på status og se hvor godt NAV sine områder dokumenterer på kravene</LinkPanel.Description>
+    </LinkPanel>
+  </div>
+)