Merge remote-tracking branch 'origin/main' into #2-Kennzahlen-kopieren

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

project/frontend/src/components/ConfigTable.tsx

@@ -1,322 +1,353 @@
-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();
-    const [kennzahlen, setKennzahlen] = useState<Kennzahl[]>([]);
-    const [draggedItem, setDraggedItem] = useState<Kennzahl | null>(null);
-    const [isUpdatingPositions, setIsUpdatingPositions] = useState(false);
-    const [loading, setLoading] = useState(true);
+	const navigate = useNavigate();
+	const [kennzahlen, setKennzahlen] = useState<Kennzahl[]>([]);
+	const [draggedItem, setDraggedItem] = useState<Kennzahl | null>(null);
+	const [isUpdatingPositions, setIsUpdatingPositions] = useState(false);
+	const [loading, setLoading] = useState(true);
 
-    useEffect(() => {
-        const fetchKennzahlen = async () => {
-            while (true) {
-                try {
-                    console.log('Fetching kennzahlen from API...');
-                    const response = await fetch(`http://localhost:5050/api/kpi_setting/`);
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
-                    }
+	useEffect(() => {
+		const fetchKennzahlen = async () => {
+			while (true) {
+				try {
+					console.log("Fetching kennzahlen from API...");
+					const data = await fetchK();
+					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);
+					await new Promise((resolve) => setTimeout(resolve, 2000));
+				}
+			}
+		};
 
-                    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);
-                    await new Promise(resolve => setTimeout(resolve, 2000));
-                }
-            }
-        };
+		fetchKennzahlen();
+	}, []);
 
-        fetchKennzahlen();
-    }, []);
+	const handleToggleActive = async (id: number) => {
+		const kennzahl = kennzahlen.find((k) => k.id === id);
+		if (!kennzahl) return;
 
-    const handleToggleActive = async (id: number) => {
-        const kennzahl = kennzahlen.find(k => k.id === id);
-        if (!kennzahl) return;
+		try {
+			const response = await fetch(
+				`http://localhost:5050/api/kpi_setting/${id}`,
+				{
+					method: "PUT",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({
+						active: !kennzahl.active,
+					}),
+				},
+			);
 
-        try {
-            const response = await fetch(`http://localhost:5050/api/kpi_setting/${id}`, {
-                method: 'PUT',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    active: !kennzahl.active
-                }),
-            });
+			if (!response.ok) {
+				throw new Error(`HTTP error! status: ${response.status}`);
+			}
 
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
+			const updatedKennzahl = await response.json();
+			setKennzahlen((prev) =>
+				prev.map((item) => (item.id === id ? updatedKennzahl : item)),
+			);
+		} catch (err) {
+			console.error("Error toggling active status:", err);
+			setKennzahlen((prev) =>
+				prev.map((item) => (item.id === id ? kennzahl : item)),
+			);
+		}
+	};
 
-            const updatedKennzahl = await response.json();
-            setKennzahlen(prev =>
-                prev.map(item =>
-                    item.id === id ? updatedKennzahl : item
-                )
-            );
-        } catch (err) {
-            console.error('Error toggling active status:', err);
-            setKennzahlen(prev =>
-                prev.map(item =>
-                    item.id === id ? kennzahl : item
-                )
-            );
-        }
-    };
+	const updatePositionsInBackend = async (reorderedKennzahlen: Kennzahl[]) => {
+		setIsUpdatingPositions(true);
+		try {
+			const positionUpdates = reorderedKennzahlen.map((kennzahl, index) => ({
+				id: kennzahl.id,
+				position: index + 1,
+			}));
 
-    const updatePositionsInBackend = async (reorderedKennzahlen: Kennzahl[]) => {
-        setIsUpdatingPositions(true);
-        try {
-            const positionUpdates = reorderedKennzahlen.map((kennzahl, index) => ({
-                id: kennzahl.id,
-                position: index + 1
-            }));
+			const response = await fetch(
+				`http://localhost:5050/api/kpi_setting/update-kpi-positions`,
+				{
+					method: "PUT",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify(positionUpdates),
+				},
+			);
 
-            const response = await fetch(`http://localhost:5050/api/kpi_setting/update-kpi-positions`, {
-                method: 'PUT',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(positionUpdates),
-            });
+			if (!response.ok) {
+				throw new Error(`HTTP error! status: ${response.status}`);
+			}
 
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
+			const updatedKennzahlen = await response.json();
+			setKennzahlen(updatedKennzahlen);
+		} catch (err) {
+			console.error("Error updating positions:", err);
+			window.location.reload();
+		} finally {
+			setIsUpdatingPositions(false);
+		}
+	};
 
-            const updatedKennzahlen = await response.json();
-            setKennzahlen(updatedKennzahlen);
-        } catch (err) {
-            console.error('Error updating positions:', err);
-            window.location.reload();
-        } finally {
-            setIsUpdatingPositions(false);
-        }
-    };
+	const handleDragStart = (
+		e: React.DragEvent<HTMLTableRowElement>,
+		item: Kennzahl,
+	) => {
+		setDraggedItem(item);
+		e.dataTransfer.effectAllowed = "move";
+	};
 
-    const handleDragStart = (e: React.DragEvent<HTMLTableRowElement>, item: Kennzahl) => {
-        setDraggedItem(item);
-        e.dataTransfer.effectAllowed = "move";
-    };
+	const handleDragOver = (e: React.DragEvent<HTMLTableRowElement>) => {
+		e.preventDefault();
+		e.dataTransfer.dropEffect = "move";
+	};
 
-    const handleDragOver = (e: React.DragEvent<HTMLTableRowElement>) => {
-        e.preventDefault();
-        e.dataTransfer.dropEffect = "move";
-    };
+	const handleDrop = async (
+		e: React.DragEvent<HTMLTableRowElement>,
+		targetItem: Kennzahl,
+	) => {
+		e.preventDefault();
+		if (!draggedItem || draggedItem.id === targetItem.id) return;
 
-    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 targetIndex = kennzahlen.findIndex(
+			(item) => item.id === targetItem.id,
+		);
 
-        const draggedIndex = kennzahlen.findIndex(item => item.id === draggedItem.id);
-        const targetIndex = kennzahlen.findIndex(item => item.id === targetItem.id);
+		const newKennzahlen = [...kennzahlen];
+		const [removed] = newKennzahlen.splice(draggedIndex, 1);
+		newKennzahlen.splice(targetIndex, 0, removed);
 
-        const newKennzahlen = [...kennzahlen];
-        const [removed] = newKennzahlen.splice(draggedIndex, 1);
-        newKennzahlen.splice(targetIndex, 0, removed);
+		setKennzahlen(newKennzahlen);
+		setDraggedItem(null);
+		await updatePositionsInBackend(newKennzahlen);
+	};
 
-        setKennzahlen(newKennzahlen);
-        setDraggedItem(null);
-        await updatePositionsInBackend(newKennzahlen);
-    };
+	const handleDragEnd = () => {
+		setDraggedItem(null);
+	};
 
-    const handleDragEnd = () => {
-        setDraggedItem(null);
-    };
+	const handleRowClick = (kennzahl: Kennzahl, e: React.MouseEvent) => {
+		if (draggedItem || isUpdatingPositions) {
+			return;
+		}
 
-    const handleRowClick = (kennzahl: Kennzahl, e: React.MouseEvent) => {
-        if (draggedItem || isUpdatingPositions) {
-            return;
-        }
+		const target = e.target as HTMLElement;
+		if (
+			target.tagName === "INPUT" &&
+			(target as HTMLInputElement).type === "checkbox"
+		) {
+			return;
+		}
 
-        const target = e.target as HTMLElement;
-        if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'checkbox') {
-            return;
-        }
+		if (target.closest(".drag-handle")) {
+			return;
+		}
 
-        if (target.closest('.drag-handle')) {
-            return;
-        }
+		console.log("Navigating to detail page for KPI:", kennzahl);
+		console.log("KPI ID:", kennzahl.id);
 
-        console.log('Navigating to detail page for KPI:', kennzahl);
-        console.log('KPI ID:', kennzahl.id);
+		navigate({
+			to: `/config-detail/$kpiId`,
+			params: { kpiId: kennzahl.id.toString() },
+		});
+	};
 
-        navigate({
-            to: `/config-detail/$kpiId`,
-            params: { kpiId: kennzahl.id.toString() }
-        });
-    };
+	if (loading) {
+		return (
+			<Box
+				height="100vh"
+				display="flex"
+				justifyContent="center"
+				alignItems="center"
+				flexDirection="column"
+				mt={8}
+			>
+				<CircularProgress sx={{ color: "#383838", mb: 2 }} />
+				<Typography>Lade Kennzahlen-Konfiguration...</Typography>
+			</Box>
+		);
+	}
 
-    if (loading) {
-        return (
-            <Box
-                height="100vh"
-                display="flex"
-                justifyContent="center"
-                alignItems="center"
-                flexDirection="column"
-                mt={8}
-            >
-                <CircularProgress sx={{ color: '#383838', mb: 2 }} />
-                <Typography>Lade Kennzahlen-Konfiguration...</Typography>
-            </Box>
-        );
-    }
-
-    return (
-        <Box
-            sx={{
-                width: "70%",
-                maxWidth: 800,
-                borderRadius: 2,
-                boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
-                backgroundColor: "white",
-                overflow: "hidden",
-                opacity: isUpdatingPositions ? 0.7 : 1,
-                pointerEvents: isUpdatingPositions ? 'none' : 'auto'
-            }}
-        >
-            <table style={{
-                width: "100%",
-                borderCollapse: "collapse"
-            }}>
-                <thead>
-                <tr style={{ backgroundColor: "#f5f5f5" }}>
-                    <th style={{
-                        padding: "16px 12px",
-                        textAlign: "left",
-                        fontWeight: "bold",
-                        width: "60px",
-                        borderBottom: "1px solid #e0e0e0"
-                    }}>
-                    </th>
-                    <th style={{
-                        padding: "16px 12px",
-                        textAlign: "left",
-                        fontWeight: "bold",
-                        width: "80px",
-                        borderBottom: "1px solid #e0e0e0"
-                    }}>
-                        Aktiv
-                    </th>
-                    <th style={{
-                        padding: "16px 12px",
-                        textAlign: "left",
-                        fontWeight: "bold",
-                        borderBottom: "1px solid #e0e0e0"
-                    }}>
-                        Name
-                    </th>
-                    <th style={{
-                        padding: "16px 12px",
-                        textAlign: "left",
-                        fontWeight: "bold",
-                        width: "160px",
-                        borderBottom: "1px solid #e0e0e0"
-                    }}>
-                        Format
-                    </th>
-                </tr>
-                </thead>
-                <tbody>
-                {kennzahlen.map((kennzahl) => (
-                    <tr
-                        key={kennzahl.id}
-                        draggable={!isUpdatingPositions}
-                        onDragStart={(e) => handleDragStart(e, kennzahl)}
-                        onDragOver={handleDragOver}
-                        onDrop={(e) => handleDrop(e, kennzahl)}
-                        onDragEnd={handleDragEnd}
-                        onClick={(e) => handleRowClick(kennzahl, e)}
-                        style={{
-                            borderBottom: "1px solid #e0e0e0",
-                            cursor: isUpdatingPositions ? "default" : "pointer",
-                            backgroundColor: draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
-                            opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1
-                        }}
-                        onMouseEnter={(e) => {
-                            if (!draggedItem && !isUpdatingPositions) {
-                                e.currentTarget.style.backgroundColor = "#f9f9f9";
-                            }
-                        }}
-                        onMouseLeave={(e) => {
-                            if (!draggedItem && !isUpdatingPositions) {
-                                e.currentTarget.style.backgroundColor = "white";
-                            }
-                        }}
-                    >
-                        <td style={{ padding: "12px", textAlign: "center" }}>
-                            <div className="drag-handle">
-                                <Tooltip
-                                    title={
-                                        <>
-                                            <b>Neuanordnung der Kennzahlen</b><br />
-                                            Hier können Sie die Kennzahlen nach Belieben per Drag and Drop neu anordnen.
-                                        </>
-                                    }
-                                    placement="left"
-                                    arrow
-                                >
-                                    <DragIndicatorIcon
-                                        sx={{
-                                            color: isUpdatingPositions ? "#ccc" : "#999",
-                                            cursor: isUpdatingPositions ? "default" : "grab",
-                                            "&:active": { cursor: isUpdatingPositions ? "default" : "grabbing" }
-                                        }}
-                                    />
-                                </Tooltip>
-                            </div>
-                        </td>
-                        <td style={{ padding: "12px" }}>
-                            <input
-                                type="checkbox"
-                                checked={kennzahl.active}
-                                onChange={() => handleToggleActive(kennzahl.id)}
-                                disabled={isUpdatingPositions}
-                                style={{
-                                    width: "18px",
-                                    height: "18px",
-                                    cursor: isUpdatingPositions ? "default" : "pointer",
-                                    accentColor: "#383838"
-                                }}
-                                onClick={(e) => e.stopPropagation()}
-                            />
-                        </td>
-                        <td style={{
-                            padding: "12px",
-                            fontSize: "14px",
-                            color: "#333"
-                        }}>
-                            <span title={`Click to view details (ID: ${kennzahl.id})`}>
-                                {kennzahl.name}
-                            </span>
-                        </td>
-                        <td style={{ padding: "12px" }}>
-                                <span style={{
-                                    color: "#333",
-                                    padding: "4px 12px",
-                                    borderRadius: "16px",
-                                    fontSize: "12px",
-                                    fontWeight: "500",
-                                    border: "1px solid #ddd",
-                                    backgroundColor: "#f8f9fa"
-                                }}>
-                                    {getDisplayType(kennzahl.type)}
-                                </span>
-                        </td>
-                    </tr>
-                ))}
-                </tbody>
-            </table>
-        </Box>
-    );
-}
+	return (
+		<Box
+			sx={{
+				width: "70%",
+				maxWidth: 800,
+				borderRadius: 2,
+				boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+				backgroundColor: "white",
+				overflow: "hidden",
+				opacity: isUpdatingPositions ? 0.7 : 1,
+				pointerEvents: isUpdatingPositions ? "none" : "auto",
+			}}
+		>
+			<table
+				style={{
+					width: "100%",
+					borderCollapse: "collapse",
+				}}
+			>
+				<thead>
+					<tr style={{ backgroundColor: "#f5f5f5" }}>
+						<th
+							style={{
+								padding: "16px 12px",
+								textAlign: "left",
+								fontWeight: "bold",
+								width: "60px",
+								borderBottom: "1px solid #e0e0e0",
+							}}
+						/>
+						<th
+							style={{
+								padding: "16px 12px",
+								textAlign: "left",
+								fontWeight: "bold",
+								width: "80px",
+								borderBottom: "1px solid #e0e0e0",
+							}}
+						>
+							Aktiv
+						</th>
+						<th
+							style={{
+								padding: "16px 12px",
+								textAlign: "left",
+								fontWeight: "bold",
+								borderBottom: "1px solid #e0e0e0",
+							}}
+						>
+							Name
+						</th>
+						<th
+							style={{
+								padding: "16px 12px",
+								textAlign: "left",
+								fontWeight: "bold",
+								width: "160px",
+								borderBottom: "1px solid #e0e0e0",
+							}}
+						>
+							Format
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{kennzahlen.map((kennzahl) => (
+						<tr
+							key={kennzahl.id}
+							draggable={!isUpdatingPositions}
+							onDragStart={(e) => handleDragStart(e, kennzahl)}
+							onDragOver={handleDragOver}
+							onDrop={(e) => handleDrop(e, kennzahl)}
+							onDragEnd={handleDragEnd}
+							onClick={(e) => handleRowClick(kennzahl, e)}
+							style={{
+								borderBottom: "1px solid #e0e0e0",
+								cursor: isUpdatingPositions ? "default" : "pointer",
+								backgroundColor:
+									draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
+								opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1,
+							}}
+							onMouseEnter={(e) => {
+								if (!draggedItem && !isUpdatingPositions) {
+									e.currentTarget.style.backgroundColor = "#f9f9f9";
+								}
+							}}
+							onMouseLeave={(e) => {
+								if (!draggedItem && !isUpdatingPositions) {
+									e.currentTarget.style.backgroundColor = "white";
+								}
+							}}
+						>
+							<td style={{ padding: "12px", textAlign: "center" }}>
+								<div className="drag-handle">
+									<Tooltip
+										title={
+											<>
+												<b>Neuanordnung der Kennzahlen</b>
+												<br />
+												Hier können Sie die Kennzahlen nach Belieben per Drag
+												and Drop neu anordnen.
+											</>
+										}
+										placement="left"
+										arrow
+									>
+										<DragIndicatorIcon
+											sx={{
+												color: isUpdatingPositions ? "#ccc" : "#999",
+												cursor: isUpdatingPositions ? "default" : "grab",
+												"&:active": {
+													cursor: isUpdatingPositions ? "default" : "grabbing",
+												},
+											}}
+										/>
+									</Tooltip>
+								</div>
+							</td>
+							<td style={{ padding: "12px" }}>
+								<input
+									type="checkbox"
+									checked={kennzahl.active}
+									onChange={() => handleToggleActive(kennzahl.id)}
+									disabled={isUpdatingPositions}
+									style={{
+										width: "18px",
+										height: "18px",
+										cursor: isUpdatingPositions ? "default" : "pointer",
+										accentColor: "#383838",
+									}}
+									onClick={(e) => e.stopPropagation()}
+								/>
+							</td>
+							<td
+								style={{
+									padding: "12px",
+									fontSize: "14px",
+									color: "#333",
+								}}
+							>
+								<span title={`Click to view details (ID: ${kennzahl.id})`}>
+									{kennzahl.name}
+								</span>
+							</td>
+							<td style={{ padding: "12px" }}>
+								<span
+									style={{
+										color: "#333",
+										padding: "4px 12px",
+										borderRadius: "16px",
+										fontSize: "12px",
+										fontWeight: "500",
+										border: "1px solid #ddd",
+										backgroundColor: "#f8f9fa",
+									}}
+								>
+									{getDisplayType(kennzahl.type)}
+								</span>
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</Box>
+	);
+}

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,89 +150,124 @@ 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={() =>
-											startEditing(
-												row.extractedValues.at(0)?.entity || "",
-												row.setting.name,
-											)
-										}
+										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);
+											}
+										}}
 									>
-										<Box
-											sx={{
-												border: `2px solid ${borderColor}`,
-												borderRadius: 1,
-												padding: "4px 8px",
-												display: "flex",
-												alignItems: "center",
-												justifyContent: "space-between",
-												width: "100%",
-												cursor: "text",
-											}}
-										>
-											<Box
-												sx={{
-													display: "flex",
-													alignItems: "center",
-													gap: 1,
-													width: "100%",
-												}}
+										{hasMultipleValues ? (
+											<Tooltip
+												title={
+													<>
+														<b>Problem</b>
+														<br />
+														Mehrere Werte für die Kennzahl gefunden.
+													</>
+												}
+												placement="bottom"
+												arrow
 											>
-												{row.setting.mandatory &&
-													row.extractedValues.length === 0 && (
-														<ErrorOutlineIcon fontSize="small" color="error" />
-													)}
-												{editingIndex === row.setting.name ? (
-													<TextField
-														value={editValue}
-														onChange={(e) => setEditValue(e.target.value)}
-														onKeyDown={(e) =>
-															handleKeyPress(e, row.setting.name)
-														}
-														onBlur={() => handleSave(row.setting.name)}
-														autoFocus
-														size="small"
-														fullWidth
-														variant="standard"
-														sx={{ margin: "-8px 0" }}
-													/>
-												) : (
-													<span>
-														{row.extractedValues.at(0)?.entity || "—"}
-													</span>
-												)}
-											</Box>
-											{row.extractedValues.length > 1 && (
-												<IconButton
-													aria-label="select"
-													onClick={() =>
-														navigate({
-															to: "/extractedResult/$pitchBook/$kpi",
-															params: {
-																pitchBook: pdfId,
-																kpi: row.setting.name,
-															},
-														})
-													}
+												<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" }}
 													/>
-												</IconButton>
-											)}
-											{row.extractedValues.length <= 1 && (
+												</Box>
+											</Tooltip>
+										) : (
+											<Box
+												sx={{
+													border: `2px solid ${borderColor}`,
+													borderRadius: 1,
+													padding: "4px 8px",
+													display: "flex",
+													alignItems: "center",
+													justifyContent: "space-between",
+													width: "100%",
+													cursor: "text",
+												}}
+											>
+												<Box
+													sx={{
+														display: "flex",
+														alignItems: "center",
+														gap: 1,
+														width: "100%",
+													}}
+												>
+													{hasNoValue && (
+														<ErrorOutlineIcon fontSize="small" color="error" />
+													)}
+													{editingIndex === row.setting.name ? (
+														<TextField
+															value={editValue}
+															onChange={(e) => setEditValue(e.target.value)}
+															onKeyDown={(e) =>
+																handleKeyPress(e, row.setting.name)
+															}
+															onBlur={() => handleSave(row.setting.name)}
+															autoFocus
+															size="small"
+															fullWidth
+															variant="standard"
+															sx={{ margin: "-8px 0" }}
+														/>
+													) : (
+														<span>
+															{row.extractedValues.at(0)?.entity || "—"}
+														</span>
+													)}
+												</Box>
 												<EditIcon
 													fontSize="small"
 													sx={{ color: "#555", cursor: "pointer" }}
@@ -241,10 +279,10 @@ export default function KennzahlenTable({
 														);
 													}}
 												/>
-											)}
-										</Box>
+											</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%"
-			p={2}
+			height="auto"
 		>
 			<Box
 				ref={containerRef}
 				sx={{
 					width: "100%",
-					maxHeight: "90vh",
-					overflow: "auto",
+					height: "auto",
 					display: "flex",
 					justifyContent: "center",
 					alignItems: "center",
@@ -89,33 +94,34 @@ 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>
 				<span>
-					{pageNumber} / {numPages}
-				</span>
+                {pageNumber} / {numPages}
+             </span>
 				<IconButton
 					disabled={pageNumber >= (numPages || 1)}
-					onClick={() => setPageNumber((p) => p + 1)}
+					onClick={() => handlePageChange(pageNumber + 1)}
 				>
 					<ArrowCircleRightIcon fontSize="large" />
 				</IconButton>
 			</Box>
 		</Box>
 	);
-}
+}

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

@@ -5,7 +5,7 @@ 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 = [
@@ -21,7 +21,10 @@ const SETTINGS = [
 export const Route = createFileRoute("/extractedResult/$pitchBook")({
 	component: ExtractedResultsPage,
 	loader: ({ context: { queryClient }, params: { pitchBook } }) =>
-		queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
+		Promise.allSettled([
+			queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
+			queryClient.ensureQueryData(settingsQueryOptions()),
+		]),
 });
 
 function ExtractedResultsPage() {
@@ -39,6 +42,7 @@ function ExtractedResultsPage() {
 	}[status];
 
 	const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook));
+	const { data: settings } = useSuspenseQuery(settingsQueryOptions());
 
 	const prepareClipboardData = () => {
 		const activeSettings = SETTINGS
@@ -111,8 +115,7 @@ function ExtractedResultsPage() {
 					}}
 				/>
 				<Typography variant="h5" gutterBottom>
-					Kennzahlen extrahiert aus: <br />
-					<strong>FONDSNAME: TODO</strong>
+					<strong>Extrahierte Kennzahlen</strong>
 				</Typography>
 			</Box>
 			<Box
@@ -121,7 +124,7 @@ function ExtractedResultsPage() {
 				sx={{
 					width: "100vw",
 					maxWidth: "100%",
-					height: "80vh",
+					height: "85vh",
 					mt: 4,
 				}}
 			>
@@ -129,7 +132,8 @@ function ExtractedResultsPage() {
 					elevation={2}
 					sx={{
 						width: "45%",
-						height: "100%",
+						maxHeight: "100%",
+						height: "fit-content",
 						borderRadius: 2,
 						backgroundColor: "#eeeeee",
 						padding: 2,
@@ -137,6 +141,7 @@ function ExtractedResultsPage() {
 					}}
 				>
 					<KennzahlenTable
+						settings={settings}
 						onPageClick={setCurrentPage}
 						data={kpi}
 						pdfId={pitchBook}
@@ -146,23 +151,39 @@ function ExtractedResultsPage() {
 					display="flex"
 					flexDirection="column"
 					justifyContent="space-between"
-					gap={5}
-					sx={{ width: "55%", height: "95%" }}
+					gap={3}
+					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",
-							justifyContent: "center",
+							flexDirection: "column",
+							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 { createFileRoute } from "@tanstack/react-router";
+import {
+	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() {
-	const { pitchBook, kpi } = Route.useParams();
+function ExtractedResultsPage() {
+	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>
-			{kpiValues.map((e) => (
-				<div key={`${e.entity}_${e.page}`}>
-					{e.label}: {e.entity}
-				</div>
-			))}
-		</div>
+		<Box p={4}>
+			<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
+				<IconButton onClick={handleBackClick} sx={{ mr: 2 }}>
+					<ArrowBackIcon fontSize="large" sx={{ color: '#383838' }} />
+				</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>
+								))}
+
+								<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(),
+	});