Fix merge conflict

project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx

@@ -1,4 +1,5 @@
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import EditIcon from "@mui/icons-material/Edit";
 import {
 	Box,
 	Button,
@@ -26,7 +27,7 @@ import {
 	useSuspenseQuery,
 } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState, type KeyboardEvent } from "react";
 import PDFViewer from "../components/pdfViewer";
 import { fetchPutKPI } from "../util/api";
 import { kpiQueryOptions } from "../util/query";
@@ -65,9 +66,12 @@ function ExtractedResultsPage() {
 	const [showConfirmDialog, setShowConfirmDialog] = useState(false);
 	const [hasChanges, setHasChanges] = useState(false);
 	const [customValue, setCustomValue] = useState("");
-	const originalValue = kpiValues[0]?.entity || "";
+	const [customPage, setCustomPage] = useState("");
+	const [editingCustomPage, setEditingCustomPage] = useState(false);
+
+	const originalValue = kpiValues[0]?.entity || "";
+	const originalPage = kpiValues[0]?.page || 0;
 
-	// 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 }) => {
@@ -88,20 +92,25 @@ function ExtractedResultsPage() {
 
 	const selectedValue: string =
 		selectedIndex === -1 ? customValue : groupedKpiValues[selectedIndex]?.entity || "";
+	
+	const selectedPage =
+		selectedIndex === -1
+			? (parseInt(customPage) > 0 ? parseInt(customPage) : 1)
+			: groupedKpiValues[selectedIndex]?.pages[0] || 1;
 
-	// Um zu prüfen, ob der Wert nur aus Leerzeichen besteht
+	const isSelectedValueEmpty = selectedIndex === -1 ? customValue.trim() === "" : !selectedValue;
-	const isSelectedValueEmpty = selectedIndex === -1 ? customValue.trim() === "" : !groupedKpiValues[selectedIndex]?.entity;
 
 	useEffect(() => {
-		setHasChanges(groupedKpiValues[selectedIndex]?.entity !== originalValue);
+		const valueChanged = selectedValue !== originalValue;
-	}, [groupedKpiValues, selectedIndex, originalValue]);
+		const pageChanged = selectedPage !== originalPage;
+		setHasChanges(valueChanged || pageChanged);
+	}, [selectedValue, selectedPage, originalValue, originalPage]);
 
 	const { mutate: updateKPI } = useMutation({
 		mutationFn: () => {
 			const updatedData = { ...kpiData };
 			let baseObject;
 			if (selectedIndex >= 0) {
-				// 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(),
@@ -114,7 +123,7 @@ function ExtractedResultsPage() {
 				baseObject = {
 					label: kpi.toUpperCase(),
 					entity: selectedValue,
-					page: 0,
+					page: selectedPage,
 					status: "single-source",
 					source: "manual",
 				};
@@ -123,6 +132,7 @@ function ExtractedResultsPage() {
 				{
 					...baseObject,
 					entity: selectedValue,
+					page: selectedPage,
 				},
 			];
 			return fetchPutKPI(Number(pitchBook), updatedData);
@@ -151,6 +161,7 @@ function ExtractedResultsPage() {
 			setSelectedIndex(index);
 			setCurrentPage(groupedKpiValues[index].pages[0]);
 			setCustomValue("");
+			setCustomPage("");
 		}
 	};
 
@@ -162,10 +173,20 @@ function ExtractedResultsPage() {
 		setSelectedIndex(-1);
 	};
 
+	const handleCustomPageChange = (
+		event: React.ChangeEvent<HTMLInputElement>,
+	) => {
+		const value = event.target.value;
+		if (value === '' || (/^\d+$/.test(value) && parseInt(value) > 0)) {
+			setCustomPage(value);
+		}
+	};
+
 	const handleRowClick = (index: number) => {
 		setCurrentPage(groupedKpiValues[index].pages[0]);
 		setSelectedIndex(index);
 		setCustomValue("");
+		setCustomPage("");
 	};
 
 	const handleBackClick = () => {
@@ -197,6 +218,16 @@ function ExtractedResultsPage() {
 		updateKPI();
 	};
 
+	const startCustomPageEditing = () => {
+		setEditingCustomPage(true);
+	};
+
+	const handleCustomPageKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter" || e.key === "Escape") {
+			setEditingCustomPage(false);
+		}
+	};
+
 	return (
 		<Box p={4}>
 			<Box sx={{ display: "flex", alignItems: "center", mb: 3 }}>
@@ -234,10 +265,10 @@ function ExtractedResultsPage() {
 						<Table>
 							<TableHead>
 								<TableRow>
-									<TableCell>
+									<TableCell width="85%">
 										<strong>Gefundene Werte</strong>
 									</TableCell>
-									<TableCell align="center">
+									<TableCell align="center" width="15%">
 										<strong>Seiten</strong>
 									</TableCell>
 								</TableRow>
@@ -356,6 +387,61 @@ function ExtractedResultsPage() {
 											</Box>
 										</Box>
 									</TableCell>
+									<TableCell align="center">
+										{editingCustomPage ? (
+											<TextField
+												value={customPage}
+												onChange={handleCustomPageChange}
+												onKeyDown={handleCustomPageKeyPress}
+												onBlur={() => setEditingCustomPage(false)}
+												autoFocus
+												size="small"
+												variant="standard"
+												sx={{
+													width: "60px",
+													"& .MuiInput-input": {
+														textAlign: "center"
+													}
+												}}
+												inputProps={{
+													min: 0,
+													style: { textAlign: 'center' }
+												}}
+											/>
+										) : (
+											<Box
+												sx={{
+													display: "flex",
+													alignItems: "center",
+													justifyContent: "center",
+													gap: 1,
+													cursor: "pointer",
+													minHeight: "24px",
+													minWidth: "100px",
+													margin: "0 auto",
+												}}
+												onClick={(e: React.MouseEvent) => {
+													e.stopPropagation();
+													startCustomPageEditing();
+												}}
+											>
+												<span>{customPage || "..."}</span>
+												<EditIcon
+													fontSize="small"
+													sx={{
+														color: "#666",
+														opacity: 0.7,
+														transition: "opacity 0.2s ease",
+														ml: 1
+													}}
+													onClick={(e) => {
+														e.stopPropagation();
+														startCustomPageEditing();
+													}}
+												/>
+											</Box>
+										)}
+									</TableCell>
 								</TableRow>
 							</TableBody>
 						</Table>