merge conflicts

# Conflicts:
#	project/frontend/src/routes/extractedResult.$pitchBook.tsx

project/frontend/src/components/ConfigTable.tsx

@@ -1,9 +1,10 @@
-import { Box, Tooltip, CircularProgress, Typography } from "@mui/material";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
-import { useEffect, useState } from "react";
+import { Box, CircularProgress, Tooltip, Typography } from "@mui/material";
 import { useNavigate } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
 import type { Kennzahl } from "../types/kpi";
 import { getDisplayType } from "../types/kpi";
+import { fetchKennzahlen as fetchK } from "../util/api";
 
 export function ConfigTable() {
 	const navigate = useNavigate();
@@ -16,21 +17,18 @@ export function ConfigTable() {
 		const fetchKennzahlen = async () => {
 			while (true) {
 				try {
-                    console.log('Fetching kennzahlen from API...');
+					console.log("Fetching kennzahlen from API...");
-                    const response = await fetch(`http://localhost:5050/api/kpi_setting/`);
+					const data = await fetchK();
-                    if (!response.ok) {
+					console.log("Fetched kennzahlen:", data);
-                        throw new Error(`HTTP error! status: ${response.status}`);
+					const sortedData = data.sort(
-                    }
+						(a: Kennzahl, b: Kennzahl) => a.position - b.position,
-
+					);
-                    const data = await response.json();
-                    console.log('Fetched kennzahlen:', data);
-                    const sortedData = data.sort((a: Kennzahl, b: Kennzahl) => a.position - b.position);
 					setKennzahlen(sortedData);
 					setLoading(false);
 					break;
 				} catch (err) {
-                    console.error('Error fetching kennzahlen:', err);
+					console.error("Error fetching kennzahlen:", err);
-                    await new Promise(resolve => setTimeout(resolve, 2000));
+					await new Promise((resolve) => setTimeout(resolve, 2000));
 				}
 			}
 		};
@@ -39,36 +37,35 @@ export function ConfigTable() {
 	}, []);
 
 	const handleToggleActive = async (id: number) => {
-        const kennzahl = kennzahlen.find(k => k.id === id);
+		const kennzahl = kennzahlen.find((k) => k.id === id);
 		if (!kennzahl) return;
 
 		try {
-            const response = await fetch(`http://localhost:5050/api/kpi_setting/${id}`, {
+			const response = await fetch(
-                method: 'PUT',
+				`http://localhost:5050/api/kpi_setting/${id}`,
+				{
+					method: "PUT",
 					headers: {
-                    'Content-Type': 'application/json',
+						"Content-Type": "application/json",
 					},
 					body: JSON.stringify({
-                    active: !kennzahl.active
+						active: !kennzahl.active,
 					}),
-            });
+				},
+			);
 
 			if (!response.ok) {
 				throw new Error(`HTTP error! status: ${response.status}`);
 			}
 
 			const updatedKennzahl = await response.json();
-            setKennzahlen(prev =>
+			setKennzahlen((prev) =>
-                prev.map(item =>
+				prev.map((item) => (item.id === id ? updatedKennzahl : item)),
-                    item.id === id ? updatedKennzahl : item
-                )
 			);
 		} catch (err) {
-            console.error('Error toggling active status:', err);
+			console.error("Error toggling active status:", err);
-            setKennzahlen(prev =>
+			setKennzahlen((prev) =>
-                prev.map(item =>
+				prev.map((item) => (item.id === id ? kennzahl : item)),
-                    item.id === id ? kennzahl : item
-                )
 			);
 		}
 	};
@@ -78,16 +75,19 @@ export function ConfigTable() {
 		try {
 			const positionUpdates = reorderedKennzahlen.map((kennzahl, index) => ({
 				id: kennzahl.id,
-                position: index + 1
+				position: index + 1,
 			}));
 
-            const response = await fetch(`http://localhost:5050/api/kpi_setting/update-kpi-positions`, {
+			const response = await fetch(
-                method: 'PUT',
+				`http://localhost:5050/api/kpi_setting/update-kpi-positions`,
+				{
+					method: "PUT",
 					headers: {
-                    'Content-Type': 'application/json',
+						"Content-Type": "application/json",
 					},
 					body: JSON.stringify(positionUpdates),
-            });
+				},
+			);
 
 			if (!response.ok) {
 				throw new Error(`HTTP error! status: ${response.status}`);
@@ -96,14 +96,17 @@ export function ConfigTable() {
 			const updatedKennzahlen = await response.json();
 			setKennzahlen(updatedKennzahlen);
 		} catch (err) {
-            console.error('Error updating positions:', err);
+			console.error("Error updating positions:", err);
 			window.location.reload();
 		} finally {
 			setIsUpdatingPositions(false);
 		}
 	};
 
-    const handleDragStart = (e: React.DragEvent<HTMLTableRowElement>, item: Kennzahl) => {
+	const handleDragStart = (
+		e: React.DragEvent<HTMLTableRowElement>,
+		item: Kennzahl,
+	) => {
 		setDraggedItem(item);
 		e.dataTransfer.effectAllowed = "move";
 	};
@@ -113,12 +116,19 @@ export function ConfigTable() {
 		e.dataTransfer.dropEffect = "move";
 	};
 
-    const handleDrop = async (e: React.DragEvent<HTMLTableRowElement>, targetItem: Kennzahl) => {
+	const handleDrop = async (
+		e: React.DragEvent<HTMLTableRowElement>,
+		targetItem: Kennzahl,
+	) => {
 		e.preventDefault();
 		if (!draggedItem || draggedItem.id === targetItem.id) return;
 
-        const draggedIndex = kennzahlen.findIndex(item => item.id === draggedItem.id);
+		const draggedIndex = kennzahlen.findIndex(
-        const targetIndex = kennzahlen.findIndex(item => item.id === targetItem.id);
+			(item) => item.id === draggedItem.id,
+		);
+		const targetIndex = kennzahlen.findIndex(
+			(item) => item.id === targetItem.id,
+		);
 
 		const newKennzahlen = [...kennzahlen];
 		const [removed] = newKennzahlen.splice(draggedIndex, 1);
@@ -139,20 +149,23 @@ export function ConfigTable() {
 		}
 
 		const target = e.target as HTMLElement;
-        if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'checkbox') {
+		if (
+			target.tagName === "INPUT" &&
+			(target as HTMLInputElement).type === "checkbox"
+		) {
 			return;
 		}
 
-        if (target.closest('.drag-handle')) {
+		if (target.closest(".drag-handle")) {
 			return;
 		}
 
-        console.log('Navigating to detail page for KPI:', kennzahl);
+		console.log("Navigating to detail page for KPI:", kennzahl);
-        console.log('KPI ID:', kennzahl.id);
+		console.log("KPI ID:", kennzahl.id);
 
 		navigate({
 			to: `/config-detail/$kpiId`,
-            params: { kpiId: kennzahl.id.toString() }
+			params: { kpiId: kennzahl.id.toString() },
 		});
 	};
 
@@ -166,7 +179,7 @@ export function ConfigTable() {
 				flexDirection="column"
 				mt={8}
 			>
-                <CircularProgress sx={{ color: '#383838', mb: 2 }} />
+				<CircularProgress sx={{ color: "#383838", mb: 2 }} />
 				<Typography>Lade Kennzahlen-Konfiguration...</Typography>
 			</Box>
 		);
@@ -182,47 +195,56 @@ export function ConfigTable() {
 				backgroundColor: "white",
 				overflow: "hidden",
 				opacity: isUpdatingPositions ? 0.7 : 1,
-                pointerEvents: isUpdatingPositions ? 'none' : 'auto'
+				pointerEvents: isUpdatingPositions ? "none" : "auto",
 			}}
 		>
-            <table style={{
+			<table
+				style={{
 					width: "100%",
-                borderCollapse: "collapse"
+					borderCollapse: "collapse",
-            }}>
+				}}
+			>
 				<thead>
 					<tr style={{ backgroundColor: "#f5f5f5" }}>
-                    <th style={{
+						<th
+							style={{
 								padding: "16px 12px",
 								textAlign: "left",
 								fontWeight: "bold",
 								width: "60px",
-                        borderBottom: "1px solid #e0e0e0"
+								borderBottom: "1px solid #e0e0e0",
-                    }}>
+							}}
-                    </th>
+						/>
-                    <th style={{
+						<th
+							style={{
 								padding: "16px 12px",
 								textAlign: "left",
 								fontWeight: "bold",
 								width: "80px",
-                        borderBottom: "1px solid #e0e0e0"
+								borderBottom: "1px solid #e0e0e0",
-                    }}>
+							}}
+						>
 							Aktiv
 						</th>
-                    <th style={{
+						<th
+							style={{
 								padding: "16px 12px",
 								textAlign: "left",
 								fontWeight: "bold",
-                        borderBottom: "1px solid #e0e0e0"
+								borderBottom: "1px solid #e0e0e0",
-                    }}>
+							}}
+						>
 							Name
 						</th>
-                    <th style={{
+						<th
+							style={{
 								padding: "16px 12px",
 								textAlign: "left",
 								fontWeight: "bold",
 								width: "160px",
-                        borderBottom: "1px solid #e0e0e0"
+								borderBottom: "1px solid #e0e0e0",
-                    }}>
+							}}
+						>
 							Format
 						</th>
 					</tr>
@@ -240,8 +262,9 @@ export function ConfigTable() {
 							style={{
 								borderBottom: "1px solid #e0e0e0",
 								cursor: isUpdatingPositions ? "default" : "pointer",
-                            backgroundColor: draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
+								backgroundColor:
-                            opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1
+									draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
+								opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1,
 							}}
 							onMouseEnter={(e) => {
 								if (!draggedItem && !isUpdatingPositions) {
@@ -259,8 +282,10 @@ export function ConfigTable() {
 									<Tooltip
 										title={
 											<>
-                                            <b>Neuanordnung der Kennzahlen</b><br />
+												<b>Neuanordnung der Kennzahlen</b>
-                                            Hier können Sie die Kennzahlen nach Belieben per Drag and Drop neu anordnen.
+												<br />
+												Hier können Sie die Kennzahlen nach Belieben per Drag
+												and Drop neu anordnen.
 											</>
 										}
 										placement="left"
@@ -270,7 +295,9 @@ export function ConfigTable() {
 											sx={{
 												color: isUpdatingPositions ? "#ccc" : "#999",
 												cursor: isUpdatingPositions ? "default" : "grab",
-                                            "&:active": { cursor: isUpdatingPositions ? "default" : "grabbing" }
+												"&:active": {
+													cursor: isUpdatingPositions ? "default" : "grabbing",
+												},
 											}}
 										/>
 									</Tooltip>
@@ -286,30 +313,34 @@ export function ConfigTable() {
 										width: "18px",
 										height: "18px",
 										cursor: isUpdatingPositions ? "default" : "pointer",
-                                    accentColor: "#383838"
+										accentColor: "#383838",
 									}}
 									onClick={(e) => e.stopPropagation()}
 								/>
 							</td>
-                        <td style={{
+							<td
+								style={{
 									padding: "12px",
 									fontSize: "14px",
-                            color: "#333"
+									color: "#333",
-                        }}>
+								}}
+							>
 								<span title={`Click to view details (ID: ${kennzahl.id})`}>
 									{kennzahl.name}
 								</span>
 							</td>
 							<td style={{ padding: "12px" }}>
-                                <span style={{
+								<span
+									style={{
 										color: "#333",
 										padding: "4px 12px",
 										borderRadius: "16px",
 										fontSize: "12px",
 										fontWeight: "500",
 										border: "1px solid #ddd",
-                                    backgroundColor: "#f8f9fa"
+										backgroundColor: "#f8f9fa",
-                                }}>
+									}}
+								>
 									{getDisplayType(kennzahl.type)}
 								</span>
 							</td>

project/frontend/src/components/KennzahlenTable.tsx

@@ -1,9 +1,9 @@
+import type { Kennzahl } from "@/types/kpi";
 import EditIcon from "@mui/icons-material/Edit";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import SearchIcon from "@mui/icons-material/Search";
 import {
 	Box,
-	IconButton,
 	Link,
 	Paper,
 	Table,
@@ -13,6 +13,7 @@ import {
 	TableHead,
 	TableRow,
 	TextField,
+	Tooltip,
 } from "@mui/material";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
@@ -20,19 +21,10 @@ import { useState } from "react";
 import type { KeyboardEvent } from "react";
 import { fetchPutKPI } from "../util/api";
 
-const SETTINGS = [
-	{ name: "Rendite", position: 1, active: true, mandatory: true },
-	{ name: "Ausschüttungsrendite", position: 2, active: true, mandatory: true },
-	{ name: "Laufzeit", position: 3, active: true, mandatory: true },
-	{ name: "Länderallokation", position: 4, active: true, mandatory: true },
-	{ name: "Managmentgebühren", position: 5, active: true, mandatory: true },
-	{ name: "Risikoprofil", position: 6, active: false, mandatory: true },
-	{ name: "Irgendwas", position: 7, active: true, mandatory: true },
-];
-
 interface KennzahlenTableProps {
 	onPageClick?: (page: number) => void;
-	pdfId: string; // Neue Prop für die PDF-ID
+	pdfId: string;
+	settings: Kennzahl[];
 	data: {
 		[key: string]: {
 			label: string;
@@ -44,11 +36,11 @@ interface KennzahlenTableProps {
 	};
 }
 
-// React-Komponente
 export default function KennzahlenTable({
 	onPageClick,
 	data,
 	pdfId,
+	settings,
 }: KennzahlenTableProps) {
 	const [editingIndex, setEditingIndex] = useState<string>("");
 	const [editValue, setEditValue] = useState("");
@@ -121,6 +113,16 @@ export default function KennzahlenTable({
 		}
 	};
 
+	const handleNavigateToDetail = (settingName: string) => {
+		navigate({
+			to: "/extractedResult/$pitchBook/$kpi",
+			params: {
+				pitchBook: pdfId,
+				kpi: settingName,
+			},
+		});
+	};
+
 	return (
 		<TableContainer component={Paper}>
 			<Table>
@@ -132,14 +134,15 @@ export default function KennzahlenTable({
 						<TableCell>
 							<strong>Wert</strong>
 						</TableCell>
-						<TableCell>
+						<TableCell align="center">
 							<strong>Seite</strong>
 						</TableCell>
 					</TableRow>
 				</TableHead>
 
 				<TableBody>
-					{SETTINGS.filter((setting) => setting.active)
+					{settings
+						.filter((setting) => setting.active)
 						.sort((a, b) => a.position - b.position)
 						.map((setting) => ({
 							setting: setting,
@@ -147,25 +150,81 @@ export default function KennzahlenTable({
 						}))
 						.map((row) => {
 							let borderColor = "transparent";
-							if (
+							const hasMultipleValues = row.extractedValues.length > 1;
+							const hasNoValue =
 								row.setting.mandatory &&
 								(row.extractedValues.length === 0 ||
-									row.extractedValues.at(0)?.entity === "")
+									row.extractedValues.at(0)?.entity === "");
-							)
+
+							if (hasNoValue) {
 								borderColor = "red";
-							else if (row.extractedValues.length > 1) borderColor = "#f6ed48";
+							} else if (hasMultipleValues) {
+								borderColor = "#f6ed48";
+							}
 
 							return (
 								<TableRow key={row.setting.name}>
 									<TableCell>{row.setting.name}</TableCell>
 									<TableCell
-										onClick={() =>
+										onClick={() => {
+											// Only allow inline editing for non-multiple value cells
+											if (!hasMultipleValues) {
 												startEditing(
 													row.extractedValues.at(0)?.entity || "",
 													row.setting.name,
-											)
+												);
+											} else {
+												// Navigate to detail page for multiple values
+												handleNavigateToDetail(row.setting.name);
 											}
+										}}
 									>
+										{hasMultipleValues ? (
+											<Tooltip
+												title={
+													<>
+														<b>Problem</b>
+														<br />
+														Mehrere Werte für die Kennzahl gefunden.
+													</>
+												}
+												placement="bottom"
+												arrow
+											>
+												<Box
+													sx={{
+														border: `2px solid ${borderColor}`,
+														borderRadius: 1,
+														padding: "4px 8px",
+														display: "flex",
+														alignItems: "center",
+														justifyContent: "space-between",
+														width: "100%",
+														cursor: "pointer",
+														"&:hover": {
+															backgroundColor: "#f5f5f5",
+														},
+													}}
+												>
+													<Box
+														sx={{
+															display: "flex",
+															alignItems: "center",
+															gap: 1,
+															width: "100%",
+														}}
+													>
+														<span>
+															{row.extractedValues.at(0)?.entity || "—"}
+														</span>
+													</Box>
+													<SearchIcon
+														fontSize="small"
+														sx={{ color: "#f6ed48" }}
+													/>
+												</Box>
+											</Tooltip>
+										) : (
 											<Box
 												sx={{
 													border: `2px solid ${borderColor}`,
@@ -186,8 +245,7 @@ export default function KennzahlenTable({
 														width: "100%",
 													}}
 												>
-												{row.setting.mandatory &&
+													{hasNoValue && (
-													row.extractedValues.length === 0 && (
 														<ErrorOutlineIcon fontSize="small" color="error" />
 													)}
 													{editingIndex === row.setting.name ? (
@@ -210,26 +268,6 @@ export default function KennzahlenTable({
 														</span>
 													)}
 												</Box>
-											{row.extractedValues.length > 1 && (
-												<IconButton
-													aria-label="select"
-													onClick={() =>
-														navigate({
-															to: "/extractedResult/$pitchBook/$kpi",
-															params: {
-																pitchBook: pdfId,
-																kpi: row.setting.name,
-															},
-														})
-													}
-												>
-													<SearchIcon
-														fontSize="small"
-														sx={{ color: "#f6ed48" }}
-													/>
-												</IconButton>
-											)}
-											{row.extractedValues.length <= 1 && (
 												<EditIcon
 													fontSize="small"
 													sx={{ color: "#555", cursor: "pointer" }}
@@ -241,10 +279,10 @@ export default function KennzahlenTable({
 														);
 													}}
 												/>
-											)}
 											</Box>
+										)}
 									</TableCell>
-									<TableCell>
+									<TableCell align="center">
 										<Link
 											component="button"
 											onClick={() =>

project/frontend/src/components/pdfViewer.tsx

@@ -10,11 +10,13 @@ import { socket } from "../socket";
 interface PDFViewerProps {
 	pitchBookId: string;
 	currentPage?: number;
+	onPageChange?: (page: number) => void;
 }
 
 export default function PDFViewer({
 	pitchBookId,
 	currentPage,
+	onPageChange,
 }: PDFViewerProps) {
 	const [numPages, setNumPages] = useState<number | null>(null);
 	const [pageNumber, setPageNumber] = useState(currentPage || 1);
@@ -42,7 +44,7 @@ export default function PDFViewer({
 		if (currentPage && currentPage !== pageNumber) {
 			setPageNumber(currentPage);
 		}
-	}, [currentPage, pageNumber]);
+	}, [currentPage]);
 
 	useEffect(() => {
 		const handleProgress = (data: { id: number; progress: number }) => {
@@ -58,6 +60,11 @@ export default function PDFViewer({
 		};
 	}, [pitchBookId]);
 
+	const handlePageChange = (newPage: number) => {
+		setPageNumber(newPage);
+		onPageChange?.(newPage);
+	};
+
 	return (
 		<Box
 			display="flex"
@@ -65,15 +72,13 @@ export default function PDFViewer({
 			justifyContent="center"
 			alignItems="center"
 			width="100%"
-			height="100%"
+			height="auto"
-			p={2}
 		>
 			<Box
 				ref={containerRef}
 				sx={{
 					width: "100%",
-					maxHeight: "90vh",
+					height: "auto",
-					overflow: "auto",
 					display: "flex",
 					justifyContent: "center",
 					alignItems: "center",
@@ -89,20 +94,21 @@ export default function PDFViewer({
 					onSourceError={(error) => console.error("Ungültige PDF:", error)}
 				>
 					{containerWidth && (
-						<Page pageNumber={pageNumber} width={containerWidth * 0.8} />
+						<Page pageNumber={pageNumber} width={containerWidth * 0.98} />
 					)}
 				</Document>
 			</Box>
 			<Box
-				mt={2}
+				mt={1}
 				display="flex"
 				alignItems="center"
 				justifyContent="center"
 				gap={1}
+				p={1}
 			>
 				<IconButton
 					disabled={pageNumber <= 1}
-					onClick={() => setPageNumber((p) => p - 1)}
+					onClick={() => handlePageChange(pageNumber - 1)}
 				>
 					<ArrowCircleLeftIcon fontSize="large" />
 				</IconButton>
@@ -111,7 +117,7 @@ export default function PDFViewer({
              </span>
 				<IconButton
 					disabled={pageNumber >= (numPages || 1)}
-					onClick={() => setPageNumber((p) => p + 1)}
+					onClick={() => handlePageChange(pageNumber + 1)}
 				>
 					<ArrowCircleRightIcon fontSize="large" />
 				</IconButton>

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

@@ -5,23 +5,15 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import KennzahlenTable from "../components/KennzahlenTable";
 import PDFViewer from "../components/pdfViewer";
-import { kpiQueryOptions } from "../util/query";
+import { kpiQueryOptions, settingsQueryOptions } from "../util/query";
-
-// SETTINGS von KennzahlenTable component (mock)
-const SETTINGS = [
-	{ name: "Rendite", position: 1, active: true, mandatory: true },
-	{ name: "Ausschüttungsrendite", position: 2, active: true, mandatory: true },
-	{ name: "Laufzeit", position: 3, active: true, mandatory: true },
-	{ name: "Länderallokation", position: 4, active: true, mandatory: true },
-	{ name: "Managmentgebühren", position: 5, active: true, mandatory: true },
-	{ name: "Risikoprofil", position: 6, active: false, mandatory: true },
-	{ name: "Irgendwas", position: 7, active: true, mandatory: true },
-];
 
 export const Route = createFileRoute("/extractedResult/$pitchBook")({
 	component: ExtractedResultsPage,
 	loader: ({ context: { queryClient }, params: { pitchBook } }) =>
+		Promise.allSettled([
 			queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
+			queryClient.ensureQueryData(settingsQueryOptions()),
+		]),
 });
 
 function ExtractedResultsPage() {
@@ -39,9 +31,10 @@ function ExtractedResultsPage() {
 	}[status];
 
 	const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook));
+	const { data: settings } = useSuspenseQuery(settingsQueryOptions());
 
 	const prepareClipboardData = () => {
-		const activeSettings = SETTINGS
+		const activeSettings = settings
 			.filter(setting => setting.active)
 			.sort((a, b) => a.position - b.position);
 
@@ -111,8 +104,7 @@ function ExtractedResultsPage() {
 					}}
 				/>
 				<Typography variant="h5" gutterBottom>
-					Kennzahlen extrahiert aus: <br />
+					<strong>Extrahierte Kennzahlen</strong>
-					<strong>FONDSNAME: TODO</strong>
 				</Typography>
 			</Box>
 			<Box
@@ -121,7 +113,7 @@ function ExtractedResultsPage() {
 				sx={{
 					width: "100vw",
 					maxWidth: "100%",
-					height: "80vh",
+					height: "85vh",
 					mt: 4,
 				}}
 			>
@@ -129,7 +121,8 @@ function ExtractedResultsPage() {
 					elevation={2}
 					sx={{
 						width: "45%",
-						height: "100%",
+						maxHeight: "100%",
+						height: "fit-content",
 						borderRadius: 2,
 						backgroundColor: "#eeeeee",
 						padding: 2,
@@ -137,6 +130,7 @@ function ExtractedResultsPage() {
 					}}
 				>
 					<KennzahlenTable
+						settings={settings}
 						onPageClick={setCurrentPage}
 						data={kpi}
 						pdfId={pitchBook}
@@ -146,23 +140,39 @@ function ExtractedResultsPage() {
 					display="flex"
 					flexDirection="column"
 					justifyContent="space-between"
-					gap={5}
+					gap={3}
-					sx={{ width: "55%", height: "95%" }}
+					sx={{
+						width: "55%",
+						maxHeight: "95%",
+					}}
 				>
 					<Paper
 						elevation={2}
 						sx={{
-							height: "100%",
+							width: "100%",
+							height: "fit-content",
+							maxHeight: "100%",
 							borderRadius: 2,
 							backgroundColor: "#eeeeee",
 							display: "flex",
-							alignItems: "center",
+							flexDirection: "column",
-							justifyContent: "center",
+							overflow: "auto",
+							padding: 2,
 						}}
 					>
-						<PDFViewer pitchBookId={pitchBook} currentPage={currentPage} />
+						<PDFViewer
+							pitchBookId={pitchBook}
+							currentPage={currentPage}
+							onPageChange={setCurrentPage}
+						/>
 					</Paper>
-					<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
+					<Box
+						mt={2}
+						display="flex"
+						justifyContent="flex-end"
+						gap={2}
+						sx={{ flexShrink: 0 }}
+					>
 						<Button variant="contained" sx={{ backgroundColor: "#383838" }}
 								onClick={handleCopyToClipboard}>
 							<ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} />

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

@@ -1,27 +1,369 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
+import {
-import { createFileRoute } from "@tanstack/react-router";
+	Box,
+	Button, Dialog, DialogActions, DialogContent,
+	DialogContentText,
+	DialogTitle,
+	IconButton,
+	Link,
+	Paper,
+	Radio,
+	Table,
+	TableBody,
+	TableCell,
+	TableContainer,
+	TableHead,
+	TableRow,
+	TextField,
+	Typography
+} from "@mui/material";
+import {useMutation, useQueryClient, useSuspenseQuery} from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import {useEffect, useState} from "react";
+import PDFViewer from "../components/pdfViewer";
 import { kpiQueryOptions } from "../util/query";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import {fetchPutKPI} from "../util/api";
 
 export const Route = createFileRoute("/extractedResult_/$pitchBook/$kpi")({
-	component: RouteComponent,
+	component: ExtractedResultsPage,
 	loader: ({ context: { queryClient }, params: { pitchBook } }) =>
 		queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
 });
 
-function RouteComponent() {
+function ExtractedResultsPage() {
-	const { pitchBook, kpi } = Route.useParams();
+	const params = Route.useParams() as { pitchBook: string; kpi: string };
+	const { pitchBook, kpi } = params;
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
 
 	const {
-		data: { [kpi.toUpperCase()]: kpiValues },
+		data: kpiData
 	} = useSuspenseQuery(kpiQueryOptions(pitchBook));
 
+	const kpiValues = kpiData[kpi.toUpperCase()] || [];
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [currentPage, setCurrentPage] = useState(kpiValues[0]?.page || 1);
+	const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+	const [hasChanges, setHasChanges] = useState(false);
+	const [customValue, setCustomValue] = useState('');
+	const originalValue = kpiValues[0]?.entity || '';
+	const selectedValue = selectedIndex === -1 ? customValue : (kpiValues[selectedIndex]?.entity || '');
+
+	useEffect(() => {
+		setHasChanges(selectedValue !== originalValue);
+	}, [selectedValue, originalValue]);
+
+	const { mutate: updateKPI } = useMutation({
+		mutationFn: () => {
+			const updatedData = { ...kpiData };
+			updatedData[kpi.toUpperCase()] = [{
+				...kpiValues[0],
+				entity: selectedValue
+			}];
+			return fetchPutKPI(Number(pitchBook), updatedData);
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: ["pitchBookKPI", pitchBook],
+			});
+			navigate({
+				to: "/extractedResult/$pitchBook",
+				params: { pitchBook }
+			});
+		},
+		onError: (error) => {
+			console.error('Error updating KPI:', error);
+		}
+	});
+
+	const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const value = event.target.value;
+		if (value === 'custom') {
+			setSelectedIndex(-1);
+		} else {
+			const index = parseInt(value);
+			setSelectedIndex(index);
+			setCustomValue('');
+		}
+	};
+
+	const handleCustomValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const value = event.target.value;
+		setCustomValue(value);
+		setSelectedIndex(-1);
+	};
+
+	const handleRowClick = (index: number) => {
+		setSelectedIndex(index);
+		setCustomValue('');
+	};
+
+	const handleBackClick = () => {
+		if (hasChanges) {
+			setShowConfirmDialog(true);
+		} else {
+			navigate({
+				to: "/extractedResult/$pitchBook",
+				params: { pitchBook }
+			});
+		}
+	};
+
+	const handleConfirmDiscard = () => {
+		setShowConfirmDialog(false);
+		navigate({
+			to: "/extractedResult/$pitchBook",
+			params: { pitchBook }
+		});
+	};
+
+	const handleCancelDiscard = () => {
+		setShowConfirmDialog(false);
+	};
+
+	const handleAcceptReview = () => {
+		updateKPI();
+	};
+
 	return (
-		<div>
+		<Box p={4}>
-			{kpiValues.map((e) => (
+			<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
-				<div key={`${e.entity}_${e.page}`}>
+				<IconButton onClick={handleBackClick} sx={{ mr: 2 }}>
-					{e.label}: {e.entity}
+					<ArrowBackIcon fontSize="large" sx={{ color: '#383838' }} />
-				</div>
+				</IconButton>
+				<Typography variant="h5" fontWeight="bold">
+					Überprüfung der Kennzahl: {kpi}
+				</Typography>
+			</Box>
+
+			<Box
+				display="flex"
+				gap={4}
+				sx={{
+					width: "100vw",
+					maxWidth: "100%",
+					height: "85vh",
+					mt: 4,
+				}}
+			>
+				<Paper
+					elevation={2}
+					sx={{
+						width: "45%",
+						maxHeight: "100%",
+						height: "fit-content",
+						borderRadius: 2,
+						backgroundColor: "#eeeeee",
+						padding: 2,
+						overflow: "auto",
+					}}
+				>
+					<TableContainer component={Paper}>
+						<Table>
+							<TableHead>
+								<TableRow>
+									<TableCell>
+										<strong>Gefundene Werte</strong>
+									</TableCell>
+									<TableCell align="center">
+										<strong>Seite</strong>
+									</TableCell>
+								</TableRow>
+							</TableHead>
+							<TableBody>
+								{kpiValues.map((item, index) => (
+									<TableRow
+										key={`${item.entity}_${item.page}_${index}`}
+										sx={{
+											'&:hover': { backgroundColor: '#f9f9f9' },
+											cursor: 'pointer'
+										}}
+										onClick={() => handleRowClick(index)}
+									>
+										<TableCell>
+											<Box
+												sx={{
+													borderRadius: 1,
+													padding: '4px 8px',
+													display: 'flex',
+													alignItems: 'center',
+													width: '100%',
+													cursor: 'pointer',
+													'&:hover': {
+														borderColor: '#ccc'
+													}
+												}}
+											>
+												<Radio
+													value={index.toString()}
+													checked={selectedIndex === index}
+													onChange={handleRadioChange}
+													sx={{
+														color: '#383838',
+														'&.Mui-checked': { color: '#383838' },
+														padding: '4px',
+														marginRight: 1,
+														'&:focus': {
+															outline: 'none'
+														}
+													}}
+												/>
+												<span>{item.entity}</span>
+											</Box>
+										</TableCell>
+										<TableCell align="center">
+											<Link
+												component="button"
+												onClick={(e: React.MouseEvent) => {
+													e.stopPropagation();
+													setCurrentPage(item.page);
+												}}
+												sx={{ cursor: 'pointer' }}
+											>
+												{item.page}
+											</Link>
+										</TableCell>
+									</TableRow>
 								))}
-		</div>
+
+								<TableRow>
+									<TableCell>
+										<Box
+											sx={{
+												padding: '4px 8px',
+												display: 'flex',
+												alignItems: 'center',
+												width: '100%',
+												cursor: 'pointer',
+												'&:hover': {
+													borderColor: '#ccc'
+												}
+											}}
+											onClick={() => {
+												setSelectedIndex(-1);
+											}}
+										>
+											<Radio
+												value="custom"
+												checked={selectedIndex === -1 && customValue !== ''}
+												onChange={handleRadioChange}
+												sx={{
+													color: '#383838',
+													'&.Mui-checked': { color: '#383838' },
+													padding: '4px',
+													marginRight: 1,
+													'&:focus': {
+														outline: 'none'
+													}
+												}}
+											/>
+											<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>
+									</TableCell>
+								</TableRow>
+							</TableBody>
+						</Table>
+					</TableContainer>
+				</Paper>
+				<Box
+					display="flex"
+					flexDirection="column"
+					justifyContent="space-between"
+					gap={3}
+					sx={{ width: "55%", height: "95%" }}
+				>
+					<Paper
+						elevation={2}
+						sx={{
+							width: "100%",
+							height: "fit-content",
+							maxHeight: "100%",
+							borderRadius: 2,
+							backgroundColor: "#eeeeee",
+							display: "flex",
+							flexDirection: "column",
+							overflow: "auto",
+							padding: 2
+						}}
+					>
+						<PDFViewer
+							pitchBookId={pitchBook}
+							currentPage={currentPage}
+							onPageChange={setCurrentPage}
+						/>
+					</Paper>
+					<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
+						<Button
+							variant="contained"
+							onClick={handleAcceptReview}
+							disabled={!selectedValue}
+							sx={{
+								backgroundColor: '#383838',
+								'&:hover': { backgroundColor: '#2e2e2e' },
+								'&.Mui-disabled': { backgroundColor: '#ccc' }
+							}}
+						>
+							Überprüfung Annehmen
+						</Button>
+					</Box>
+				</Box>
+			</Box>
+
+			<Dialog
+				open={showConfirmDialog}
+				onClose={handleCancelDiscard}
+				maxWidth="sm"
+				fullWidth
+			>
+				<DialogTitle sx={{ fontSize: '1.25rem', fontWeight: 'bold' }}>
+					Achtung
+				</DialogTitle>
+				<DialogContent>
+					<DialogContentText sx={{ fontSize: '1rem' }}>
+						Alle vorgenommenen Änderungen werden verworfen.
+					</DialogContentText>
+				</DialogContent>
+				<DialogActions sx={{ p: 3, gap: 2 }}>
+					<Button
+						onClick={handleCancelDiscard}
+						variant="outlined"
+						sx={{
+							color: '#666',
+							borderColor: '#ddd',
+							'&:hover': { backgroundColor: '#f5f5f5' }
+						}}
+					>
+						Abbrechen
+					</Button>
+					<Button
+						onClick={handleConfirmDiscard}
+						variant="contained"
+						sx={{
+							backgroundColor: '#383838',
+							'&:hover': { backgroundColor: '#2e2e2e' }
+						}}
+					>
+						Bestätigen
+					</Button>
+				</DialogActions>
+			</Dialog>
+		</Box>
 	);
 }

project/frontend/src/util/api.ts

@@ -1,3 +1,5 @@
+import type { Kennzahl } from "@/types/kpi";
+
 export const fetchKPI = async (
 	pitchBookId: string,
 ): Promise<{
@@ -14,7 +16,7 @@ export const fetchKPI = async (
 	);
 	const data = await response.json();
 
-	return getKPI(data.kpi);
+	return data.kpi ? getKPI(data.kpi) : {};
 };
 
 export const fetchPutKPI = async (
@@ -95,3 +97,13 @@ export const flattenKPIArray = (kpi: {
 }) => {
 	return Object.values(kpi).flat();
 };
+
+export const fetchKennzahlen = async (): Promise<Kennzahl[]> => {
+	const response = await fetch("http://localhost:5050/api/kpi_setting/");
+	if (!response.ok) {
+		throw new Error(`HTTP error! status: ${response.status}`);
+	}
+
+	const data = await response.json();
+	return data;
+};

project/frontend/src/util/query.ts

@@ -1,8 +1,14 @@
 import { queryOptions } from "@tanstack/react-query";
-import { fetchKPI } from "./api";
+import { fetchKPI, fetchKennzahlen } from "./api";
 
 export const kpiQueryOptions = (pitchBookId: string) =>
 	queryOptions({
 		queryKey: ["pitchBookKPI", pitchBookId],
 		queryFn: () => fetchKPI(pitchBookId),
 	});
+
+export const settingsQueryOptions = () =>
+	queryOptions({
+		queryKey: ["pitchBookSettings"],
+		queryFn: () => fetchKennzahlen(),
+	});