diff --git a/frontend/app/main.tsx b/frontend/app/main.tsx index 8e1bc68ec..9cd082df0 100644 --- a/frontend/app/main.tsx +++ b/frontend/app/main.tsx @@ -2,7 +2,7 @@ import { StrictMode } from "react"; import ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; -import { ApiProvider, ElectionListProvider, ElectionProvider } from "@kiesraad/api"; +import { ApiProvider, ElectionListProvider } from "@kiesraad/api"; // ignore in prod import { startMockAPI } from "./msw-mock-api.ts"; @@ -24,9 +24,7 @@ function render() { - - - + , diff --git a/frontend/app/module/ElectionLayout.tsx b/frontend/app/module/ElectionLayout.tsx new file mode 100644 index 000000000..08762dd18 --- /dev/null +++ b/frontend/app/module/ElectionLayout.tsx @@ -0,0 +1,12 @@ +import { Outlet, useParams } from "react-router-dom"; + +import { ElectionProvider } from "@kiesraad/api"; + +export function ElectionLayout() { + const { electionId } = useParams(); + return ( + + + + ); +} diff --git a/frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx b/frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx index 6b2fe2a79..fc205101c 100644 --- a/frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx +++ b/frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx @@ -10,7 +10,7 @@ describe("PollingStationLayout", () => { test("Enter form field values", () => { render( - + , diff --git a/frontend/app/module/overview/page/OverviewPage.tsx b/frontend/app/module/overview/page/OverviewPage.tsx index 039f8f03a..6672d0e10 100644 --- a/frontend/app/module/overview/page/OverviewPage.tsx +++ b/frontend/app/module/overview/page/OverviewPage.tsx @@ -1,19 +1,17 @@ import { useNavigate } from "react-router-dom"; -import { - IconCheckHeart, - IconCheckVerified, - IconChevronRight, - IconClock, - IconHourglass, -} from "@kiesraad/icon"; +import { Election, useElectionList } from "@kiesraad/api"; +import { IconCheckHeart, IconChevronRight } from "@kiesraad/icon"; import { WorkStationNumber } from "@kiesraad/ui"; export function OverviewPage() { const navigate = useNavigate(); - const handleRowClick = () => { - navigate(`/1/input`); + const handleRowClick = (election: Election) => { + return () => { + navigate(`/${election.id}/input`); + }; }; + const { electionList } = useElectionList(); return ( <> @@ -37,66 +35,29 @@ export function OverviewPage() { - - Provinciale Statenverkiezingen 2026 - GSB - Juinen (045) - -
- - Invoer opgeschort -
- - -
- -
- - - - Waterschap Zeegraslanden 2026 - - -
- - Wachten op coördinator -
- - -
- -
- - - - Waterschap De Watervenen 2026 - - -
- - Invoerders bezig -
- - -
- -
- - - - Gemeenteraadsverkiezing 2026 - - -
- - Steminvoer voltooid -
- - -
- -
- - + {electionList.map((election) => ( + + {election.name} + + +
+ + Invoerders bezig + {/* TODO + Invoer opgeschort + + Wachten op coördinator + + Steminvoer voltooid */} +
+ + +
+ +
+ + + ))} diff --git a/frontend/app/routes.tsx b/frontend/app/routes.tsx index 6e6f50671..a98d6e270 100644 --- a/frontend/app/routes.tsx +++ b/frontend/app/routes.tsx @@ -1,5 +1,6 @@ import { createRoutesFromElements, Route } from "react-router-dom"; +import { ElectionLayout } from "./module/ElectionLayout"; import { HomePage } from "./module/HomePage"; import { CandidatesVotesPage, @@ -26,14 +27,16 @@ export const routes = createRoutesFromElements( }> } /> - }> - } /> - }> - } /> - } /> - } /> - } /> - Placeholder Check and Save Page} /> + }> + }> + } /> + }> + } /> + } /> + } /> + } /> + Placeholder Check and Save Page} /> + , diff --git a/frontend/lib/api/election/ElectionProvider.tsx b/frontend/lib/api/election/ElectionProvider.tsx index c840e6e08..8be17660b 100644 --- a/frontend/lib/api/election/ElectionProvider.tsx +++ b/frontend/lib/api/election/ElectionProvider.tsx @@ -2,7 +2,6 @@ import * as React from "react"; import { Election } from "../gen/openapi"; import { useElectionDataRequest } from "../useElectionDataRequest"; -import { useElectionList } from "./useElectionList"; export interface iElectionProviderContext { election: Required; @@ -14,13 +13,12 @@ export const ElectionProviderContext = React.createContext