Hinzufügen der Ampelsystem Logik

project/frontend/src/routes/extractedResult.$pitchBook.tsx

@@ -2,7 +2,7 @@ import ContentPasteIcon from "@mui/icons-material/ContentPaste";
 import { Box, Button, Paper, Typography } from "@mui/material";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useCallback, useState } from "react";
+import { useCallback, useState, useMemo } from "react";
 import KennzahlenTable from "../components/KennzahlenTable";
 import PDFViewer from "../components/pdfViewer";
 import { kpiQueryOptions, settingsQueryOptions } from "../util/query";
@@ -19,7 +19,6 @@ export const Route = createFileRoute("/extractedResult/$pitchBook")({
 function ExtractedResultsPage() {
 	const { pitchBook } = Route.useParams();
 	const navigate = useNavigate();
-	const status: "green" | "yellow" | "red" = "red";
 	const [currentPage, setCurrentPage] = useState(1);
 	const [focusHighlight, setFocusHighlight] = useState({
 		page: 5,
@@ -31,15 +30,38 @@ function ExtractedResultsPage() {
 		setFocusHighlight({ page, text: entity });
 	}, []);
 
+	const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook));
+	const { data: settings } = useSuspenseQuery(settingsQueryOptions());
+
+	const status = useMemo(() => {
+		let hasRedBorders = false;
+		let hasYellowBorders = false;
+
+		settings
+			.filter((setting) => setting.active)
+			.forEach((setting) => {
+				const values = kpi[setting.name.toUpperCase()] || [];
+				const hasNoValue = setting.mandatory && (values.length === 0 || values[0]?.entity === "");
+				const hasMultipleValues = values.length > 1;
+
+				if (hasNoValue) {
+					hasRedBorders = true;
+				} else if (hasMultipleValues) {
+					hasYellowBorders = true;
+				}
+			});
+
+		if (hasRedBorders) return "red";
+		if (hasYellowBorders) return "yellow";
+		return "green";
+	}, [kpi, settings]);
+
 	const statusColor = {
 		red: "#f43131",
 		yellow: "#f6ed48",
 		green: "#3fd942",
 	}[status];
 
-	const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook));
-	const { data: settings } = useSuspenseQuery(settingsQueryOptions());
-
 	return (
 		<Box p={4}>
 			<Box display="flex" alignItems="center" gap={3}>