From 60b303d92e007439d8b89b16bea538b159ab75ca Mon Sep 17 00:00:00 2001
From: Zainab2604 <zainabmb3@icloud.com>
Date: Thu, 19 Jun 2025 22:27:52 +0200
Subject: [PATCH] Fixed Bug Ticket #63 and #71

---
 .../extractedResult_.$pitchBook.$kpi.tsx      | 125 +++++++++++-------
 1 file changed, 80 insertions(+), 45 deletions(-)

diff --git a/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx b/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx
index 22ec938..e76992c 100644
--- a/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx
+++ b/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx
@@ -26,7 +26,7 @@ import {
 	useSuspenseQuery,
 } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import PDFViewer from "../components/pdfViewer";
 import { fetchPutKPI } from "../util/api";
 import { kpiQueryOptions } from "../util/query";
@@ -66,19 +66,47 @@ function ExtractedResultsPage() {
 	const [hasChanges, setHasChanges] = useState(false);
 	const [customValue, setCustomValue] = useState("");
 	const originalValue = kpiValues[0]?.entity || "";
-	const selectedValue =
-		selectedIndex === -1 ? customValue : kpiValues[selectedIndex]?.entity || "";
+
+	// Funktion, um gleiche Werte zusammenzufassen und die Seiten zu sammeln
+	function groupKpiValues(values: Array<{ entity: string; page: number; [key: string]: any }>): Array<{ entity: string; pages: number[]; [key: string]: any }> {
+		const map = new Map<string, { entity: string; pages: number[]; [key: string]: any }>();
+		values.forEach((item: { entity: string; page: number; [key: string]: any }) => {
+			const key = item.entity.toLowerCase();
+			if (!map.has(key)) {
+				map.set(key, { ...item, pages: [item.page] });
+			} else {
+				map.get(key)!.pages.push(item.page);
+			}
+		});
+		return Array.from(map.values());
+	}
+
+	const groupedKpiValues: Array<{ entity: string; pages: number[]; [key: string]: any }> = groupKpiValues(kpiValues);
+
+	const selectedValue: string =
+		selectedIndex === -1 ? customValue : groupedKpiValues[selectedIndex]?.entity || "";
+
+	// Um zu prüfen, ob der Wert nur aus Leerzeichen besteht
+	const isSelectedValueEmpty = selectedIndex === -1 ? customValue.trim() === "" : !groupedKpiValues[selectedIndex]?.entity;
 
 	useEffect(() => {
-		setHasChanges(selectedValue !== originalValue);
-	}, [selectedValue, originalValue]);
+		setHasChanges(groupedKpiValues[selectedIndex]?.entity !== originalValue);
+	}, [groupedKpiValues, selectedIndex, originalValue]);
 
 	const { mutate: updateKPI } = useMutation({
 		mutationFn: () => {
 			const updatedData = { ...kpiData };
 			let baseObject;
 			if (selectedIndex >= 0) {
-				baseObject = kpiValues[selectedIndex];
+				// Das Originalobjekt mit allen Feldern für diesen Wert suchen
+				const original = kpiValues.find(v => v.entity.toLowerCase() === groupedKpiValues[selectedIndex].entity.toLowerCase()) as { status?: string; source?: string } | undefined;
+				baseObject = {
+					label: kpi.toUpperCase(),
+					entity: groupedKpiValues[selectedIndex].entity,
+					page: groupedKpiValues[selectedIndex].pages[0],
+					status: original?.status || "single-source",
+					source: original?.source || "auto",
+				};
 			} else {
 				baseObject = {
 					label: kpi.toUpperCase(),
@@ -118,7 +146,7 @@ function ExtractedResultsPage() {
 		} else {
 			const index = Number.parseInt(value);
 			setSelectedIndex(index);
-			setCurrentPage(kpiValues[index].page);
+			setCurrentPage(groupedKpiValues[index].pages[0]);
 			setCustomValue("");
 		}
 	};
@@ -132,7 +160,7 @@ function ExtractedResultsPage() {
 	};
 
 	const handleRowClick = (index: number) => {
-		setCurrentPage(kpiValues[index].page);
+		setCurrentPage(groupedKpiValues[index].pages[0]);
 		setSelectedIndex(index);
 		setCustomValue("");
 	};
@@ -207,14 +235,14 @@ function ExtractedResultsPage() {
 										<strong>Gefundene Werte</strong>
 									</TableCell>
 									<TableCell align="center">
-										<strong>Seite</strong>
+										<strong>Seiten</strong>
 									</TableCell>
 								</TableRow>
 							</TableHead>
 							<TableBody>
-								{kpiValues.map((item, index) => (
+								{groupedKpiValues.map((item, index) => (
 									<TableRow
-										key={`${item.entity}_${item.page}_${index}`}
+										key={`${item.entity}_${item.pages.join('_')}_${index}`}
 										sx={{
 											"&:hover": { backgroundColor: "#f9f9f9" },
 											cursor: "pointer",
@@ -253,16 +281,19 @@ function ExtractedResultsPage() {
 											</Box>
 										</TableCell>
 										<TableCell align="center">
-											<Link
-												component="button"
-												onClick={(e: React.MouseEvent) => {
-													e.stopPropagation();
-													setCurrentPage(item.page);
-												}}
-												sx={{ cursor: "pointer" }}
-											>
-												{item.page}
-											</Link>
+											{item.pages.map((page: number, i: number) => (
+												<Link
+													key={page}
+													component="button"
+													onClick={(e: React.MouseEvent) => {
+														e.stopPropagation();
+														setCurrentPage(page);
+													}}
+													sx={{ cursor: "pointer", ml: i > 0 ? 1 : 0 }}
+												>
+													{page}
+												</Link>
+											))}
 										</TableCell>
 									</TableRow>
 								))}
@@ -298,24 +329,28 @@ function ExtractedResultsPage() {
 													},
 												}}
 											/>
-											<TextField
-												placeholder="Einen abweichenden Wert eingeben..."
-												value={customValue}
-												onChange={handleCustomValueChange}
-												variant="standard"
-												fullWidth
-												InputProps={{
-													disableUnderline: true,
-												}}
-												sx={{
-													"& .MuiInput-input": {
-														padding: 0,
-													},
-												}}
-												onClick={(e: React.MouseEvent) => {
-													e.stopPropagation();
-												}}
-											/>
+											<Box sx={{ width: '100%' }}>
+												<TextField
+													placeholder="Einen abweichenden Wert eingeben..."
+													value={customValue}
+													onChange={handleCustomValueChange}
+													variant="standard"
+													fullWidth
+													InputProps={{
+														disableUnderline: true,
+													}}
+													sx={{
+														"& .MuiInput-input": {
+															padding: 0,
+														},
+													}}
+													onClick={(e: React.MouseEvent) => {
+														e.stopPropagation();
+													}}
+													error={selectedIndex === -1 && customValue !== "" && customValue.trim() === ""}
+													helperText={selectedIndex === -1 && customValue !== "" && customValue.trim() === "" ? "Der Wert, der angegeben wurde, ist leer." : ""}
+												/>
+											</Box>
 										</Box>
 									</TableCell>
 								</TableRow>
@@ -348,12 +383,12 @@ function ExtractedResultsPage() {
 							pitchBookId={pitchBook}
 							currentPage={currentPage}
 							onPageChange={setCurrentPage}
-							highlight={Object.values(kpiValues)
-								.flat()
-								.map((k) => ({ page: k.page, text: k.entity }))}
+							highlight={groupedKpiValues
+								.map((k) => k.pages.map((page: number) => ({ page, text: k.entity })))
+								.reduce((acc, val) => acc.concat(val), [])}
 							focusHighlight={{
-								page: kpiValues.at(selectedIndex)?.page || -1,
-								text: kpiValues.at(selectedIndex)?.entity || "",
+								page: groupedKpiValues.at(selectedIndex)?.pages[0] || -1,
+								text: groupedKpiValues.at(selectedIndex)?.entity || "",
 							}}
 						/>
 					</Paper>
@@ -361,7 +396,7 @@ function ExtractedResultsPage() {
 						<Button
 							variant="contained"
 							onClick={handleAcceptReview}
-							disabled={!selectedValue}
+							disabled={isSelectedValueEmpty}
 							sx={{
 								backgroundColor: "#383838",
 								"&:hover": { backgroundColor: "#2e2e2e" },