project/frontend/src/components/ConfigTable.tsx

@@ -1,10 +1,9 @@
+import { Box, Tooltip, CircularProgress, Typography } from "@mui/material";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
-import { Box, CircularProgress, Tooltip, Typography } from "@mui/material";
-import { useNavigate } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
 import type { Kennzahl } from "../types/kpi";
 import { getDisplayType } from "../types/kpi";
-import { fetchKennzahlen as fetchK } from "../util/api";
 
 export function ConfigTable() {
     const navigate = useNavigate();
@@ -17,18 +16,21 @@ export function ConfigTable() {
         const fetchKennzahlen = async () => {
             while (true) {
                 try {
-					console.log("Fetching kennzahlen from API...");
+                    console.log('Fetching kennzahlen from API...');
-					const data = await fetchK();
+                    const response = await fetch(`http://localhost:5050/api/kpi_setting/`);
-					console.log("Fetched kennzahlen:", data);
+                    if (!response.ok) {
-					const sortedData = data.sort(
+                        throw new Error(`HTTP error! status: ${response.status}`);
-						(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));
                 }
             }
         };
@@ -37,35 +39,36 @@ 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(
+            const response = await fetch(`http://localhost:5050/api/kpi_setting/${id}`, {
-				`http://localhost:5050/api/kpi_setting/${id}`,
+                method: 'PUT',
-				{
-					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) => (item.id === id ? updatedKennzahl : item)),
+                prev.map(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) => (item.id === id ? kennzahl : item)),
+                prev.map(item =>
+                    item.id === id ? kennzahl : item
+                )
             );
         }
     };
@@ -75,19 +78,16 @@ export function ConfigTable() {
         try {
             const positionUpdates = reorderedKennzahlen.map((kennzahl, index) => ({
                 id: kennzahl.id,
-				position: index + 1,
+                position: index + 1
             }));
 
-			const response = await fetch(
+            const response = await fetch(`http://localhost:5050/api/kpi_setting/update-kpi-positions`, {
-				`http://localhost:5050/api/kpi_setting/update-kpi-positions`,
+                method: 'PUT',
-				{
-					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,17 +96,14 @@ 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 = (
+    const handleDragStart = (e: React.DragEvent<HTMLTableRowElement>, item: Kennzahl) => {
-		e: React.DragEvent<HTMLTableRowElement>,
-		item: Kennzahl,
-	) => {
         setDraggedItem(item);
         e.dataTransfer.effectAllowed = "move";
     };
@@ -116,19 +113,12 @@ export function ConfigTable() {
         e.dataTransfer.dropEffect = "move";
     };
 
-	const handleDrop = async (
+    const handleDrop = async (e: React.DragEvent<HTMLTableRowElement>, targetItem: Kennzahl) => {
-		e: React.DragEvent<HTMLTableRowElement>,
-		targetItem: Kennzahl,
-	) => {
         e.preventDefault();
         if (!draggedItem || draggedItem.id === targetItem.id) return;
 
-		const draggedIndex = kennzahlen.findIndex(
+        const draggedIndex = kennzahlen.findIndex(item => item.id === draggedItem.id);
-			(item) => item.id === draggedItem.id,
+        const targetIndex = kennzahlen.findIndex(item => item.id === targetItem.id);
-		);
-		const targetIndex = kennzahlen.findIndex(
-			(item) => item.id === targetItem.id,
-		);
 
         const newKennzahlen = [...kennzahlen];
         const [removed] = newKennzahlen.splice(draggedIndex, 1);
@@ -149,23 +139,20 @@ export function ConfigTable() {
         }
 
         const target = e.target as HTMLElement;
-		if (
+        if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'checkbox') {
-			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() }
         });
     };
 
@@ -179,7 +166,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>
         );
@@ -195,56 +182,47 @@ export function ConfigTable() {
                 backgroundColor: "white",
                 overflow: "hidden",
                 opacity: isUpdatingPositions ? 0.7 : 1,
-				pointerEvents: isUpdatingPositions ? "none" : "auto",
+                pointerEvents: isUpdatingPositions ? 'none' : 'auto'
             }}
         >
-			<table
+            <table style={{
-				style={{
                 width: "100%",
-					borderCollapse: "collapse",
+                borderCollapse: "collapse"
-				}}
+            }}>
-			>
                 <thead>
                 <tr style={{ backgroundColor: "#f5f5f5" }}>
-						<th
+                    <th style={{
-							style={{
                         padding: "16px 12px",
                         textAlign: "left",
                         fontWeight: "bold",
                         width: "60px",
-								borderBottom: "1px solid #e0e0e0",
+                        borderBottom: "1px solid #e0e0e0"
-							}}
+                    }}>
-						/>
+                    </th>
-						<th
+                    <th style={{
-							style={{
                         padding: "16px 12px",
                         textAlign: "left",
                         fontWeight: "bold",
                         width: "80px",
-								borderBottom: "1px solid #e0e0e0",
+                        borderBottom: "1px solid #e0e0e0"
-							}}
+                    }}>
-						>
                         Aktiv
                     </th>
-						<th
+                    <th style={{
-							style={{
                         padding: "16px 12px",
                         textAlign: "left",
                         fontWeight: "bold",
-								borderBottom: "1px solid #e0e0e0",
+                        borderBottom: "1px solid #e0e0e0"
-							}}
+                    }}>
-						>
                         Name
                     </th>
-						<th
+                    <th style={{
-							style={{
                         padding: "16px 12px",
                         textAlign: "left",
                         fontWeight: "bold",
                         width: "160px",
-								borderBottom: "1px solid #e0e0e0",
+                        borderBottom: "1px solid #e0e0e0"
-							}}
+                    }}>
-						>
                         Format
                     </th>
                 </tr>
@@ -262,9 +240,8 @@ export function ConfigTable() {
                         style={{
                             borderBottom: "1px solid #e0e0e0",
                             cursor: isUpdatingPositions ? "default" : "pointer",
-								backgroundColor:
+                            backgroundColor: draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
-									draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
+                            opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1
-								opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1,
                         }}
                         onMouseEnter={(e) => {
                             if (!draggedItem && !isUpdatingPositions) {
@@ -282,10 +259,8 @@ export function ConfigTable() {
                                 <Tooltip
                                     title={
                                         <>
-												<b>Neuanordnung der Kennzahlen</b>
+                                            <b>Neuanordnung der Kennzahlen</b><br />
-												<br />
+                                            Hier können Sie die Kennzahlen nach Belieben per Drag and Drop neu anordnen.
-												Hier können Sie die Kennzahlen nach Belieben per Drag
-												and Drop neu anordnen.
                                         </>
                                     }
                                     placement="left"
@@ -295,9 +270,7 @@ export function ConfigTable() {
                                         sx={{
                                             color: isUpdatingPositions ? "#ccc" : "#999",
                                             cursor: isUpdatingPositions ? "default" : "grab",
-												"&:active": {
+                                            "&:active": { cursor: isUpdatingPositions ? "default" : "grabbing" }
-													cursor: isUpdatingPositions ? "default" : "grabbing",
-												},
                                         }}
                                     />
                                 </Tooltip>
@@ -313,34 +286,30 @@ export function ConfigTable() {
                                     width: "18px",
                                     height: "18px",
                                     cursor: isUpdatingPositions ? "default" : "pointer",
-										accentColor: "#383838",
+                                    accentColor: "#383838"
                                 }}
                                 onClick={(e) => e.stopPropagation()}
                             />
                         </td>
-							<td
+                        <td style={{
-								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
+                                <span style={{
-									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,7 +13,6 @@ import {
 	TableHead,
 	TableRow,
 	TextField,
-	Tooltip,
 } from "@mui/material";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
@@ -21,10 +20,19 @@ 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;
+	pdfId: string; // Neue Prop für die PDF-ID
-	settings: Kennzahl[];
 	data: {
 		[key: string]: {
 			label: string;
@@ -36,11 +44,11 @@ interface KennzahlenTableProps {
 	};
 }
 
+// React-Komponente
 export default function KennzahlenTable({
 	onPageClick,
 	data,
 	pdfId,
-	settings,
 }: KennzahlenTableProps) {
 	const [editingIndex, setEditingIndex] = useState<string>("");
 	const [editValue, setEditValue] = useState("");
@@ -113,16 +121,6 @@ export default function KennzahlenTable({
 		}
 	};
 
-	const handleNavigateToDetail = (settingName: string) => {
-		navigate({
-			to: "/extractedResult/$pitchBook/$kpi",
-			params: {
-				pitchBook: pdfId,
-				kpi: settingName,
-			},
-		});
-	};
-
 	return (
 		<TableContainer component={Paper}>
 			<Table>
@@ -134,15 +132,14 @@ export default function KennzahlenTable({
 						<TableCell>
 							<strong>Wert</strong>
 						</TableCell>
-						<TableCell align="center">
+						<TableCell>
 							<strong>Seite</strong>
 						</TableCell>
 					</TableRow>
 				</TableHead>
 
 				<TableBody>
-					{settings
+					{SETTINGS.filter((setting) => setting.active)
-						.filter((setting) => setting.active)
 						.sort((a, b) => a.position - b.position)
 						.map((setting) => ({
 							setting: setting,
@@ -150,81 +147,25 @@ export default function KennzahlenTable({
 						}))
 						.map((row) => {
 							let borderColor = "transparent";
-							const hasMultipleValues = row.extractedValues.length > 1;
+							if (
-							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 (hasMultipleValues) {
+							else if (row.extractedValues.length > 1) borderColor = "#f6ed48";
-								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}`,
@@ -245,7 +186,8 @@ export default function KennzahlenTable({
 													width: "100%",
 												}}
 											>
-													{hasNoValue && (
+												{row.setting.mandatory &&
+													row.extractedValues.length === 0 && (
 														<ErrorOutlineIcon fontSize="small" color="error" />
 													)}
 												{editingIndex === row.setting.name ? (
@@ -268,6 +210,26 @@ 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" }}
@@ -279,10 +241,10 @@ export default function KennzahlenTable({
 														);
 													}}
 												/>
-											</Box>
 											)}
+										</Box>
 									</TableCell>
-									<TableCell align="center">
+									<TableCell>
 										<Link
 											component="button"
 											onClick={() =>

project/frontend/src/components/pdfViewer.tsx

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

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

@@ -5,15 +5,23 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import KennzahlenTable from "../components/KennzahlenTable";
 import PDFViewer from "../components/pdfViewer";
-import { kpiQueryOptions, settingsQueryOptions } from "../util/query";
+import { kpiQueryOptions } 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() {
@@ -31,10 +39,9 @@ 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);
 
@@ -104,7 +111,8 @@ function ExtractedResultsPage() {
 					}}
 				/>
 				<Typography variant="h5" gutterBottom>
-					<strong>Extrahierte Kennzahlen</strong>
+					Kennzahlen extrahiert aus: <br />
+					<strong>FONDSNAME: TODO</strong>
 				</Typography>
 			</Box>
 			<Box
@@ -113,7 +121,7 @@ function ExtractedResultsPage() {
 				sx={{
 					width: "100vw",
 					maxWidth: "100%",
-					height: "85vh",
+					height: "80vh",
 					mt: 4,
 				}}
 			>
@@ -121,8 +129,7 @@ function ExtractedResultsPage() {
 					elevation={2}
 					sx={{
 						width: "45%",
-						maxHeight: "100%",
+						height: "100%",
-						height: "fit-content",
 						borderRadius: 2,
 						backgroundColor: "#eeeeee",
 						padding: 2,
@@ -130,7 +137,6 @@ function ExtractedResultsPage() {
 					}}
 				>
 					<KennzahlenTable
-						settings={settings}
 						onPageClick={setCurrentPage}
 						data={kpi}
 						pdfId={pitchBook}
@@ -140,39 +146,23 @@ function ExtractedResultsPage() {
 					display="flex"
 					flexDirection="column"
 					justifyContent="space-between"
-					gap={3}
+					gap={5}
-					sx={{
+					sx={{ width: "55%", height: "95%" }}
-						width: "55%",
-						maxHeight: "95%",
-					}}
 				>
 					<Paper
 						elevation={2}
 						sx={{
-							width: "100%",
+							height: "100%",
-							height: "fit-content",
-							maxHeight: "100%",
 							borderRadius: 2,
 							backgroundColor: "#eeeeee",
 							display: "flex",
-							flexDirection: "column",
+							alignItems: "center",
-							overflow: "auto",
+							justifyContent: "center",
-							padding: 2,
 						}}
 					>
-						<PDFViewer
+						<PDFViewer pitchBookId={pitchBook} currentPage={currentPage} />
-							pitchBookId={pitchBook}
-							currentPage={currentPage}
-							onPageChange={setCurrentPage}
-						/>
 					</Paper>
-					<Box
+					<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
-						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,369 +1,27 @@
-import {
+import { useSuspenseQuery } from "@tanstack/react-query";
-	Box,
+import { createFileRoute } from "@tanstack/react-router";
-	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: ExtractedResultsPage,
+	component: RouteComponent,
 	loader: ({ context: { queryClient }, params: { pitchBook } }) =>
 		queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
 });
 
-function ExtractedResultsPage() {
+function RouteComponent() {
-	const params = Route.useParams() as { pitchBook: string; kpi: string };
+	const { pitchBook, kpi } = Route.useParams();
-	const { pitchBook, kpi } = params;
-	const navigate = useNavigate();
-	const queryClient = useQueryClient();
 
 	const {
-		data: kpiData
+		data: { [kpi.toUpperCase()]: kpiValues },
 	} = 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 (
-		<Box p={4}>
+		<div>
-			<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
+			{kpiValues.map((e) => (
-				<IconButton onClick={handleBackClick} sx={{ mr: 2 }}>
+				<div key={`${e.entity}_${e.page}`}>
-					<ArrowBackIcon fontSize="large" sx={{ color: '#383838' }} />
+					{e.label}: {e.entity}
-				</IconButton>
+				</div>
-				<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,5 +1,3 @@
-import type { Kennzahl } from "@/types/kpi";
-
 export const fetchKPI = async (
 	pitchBookId: string,
 ): Promise<{
@@ -16,7 +14,7 @@ export const fetchKPI = async (
 	);
 	const data = await response.json();
 
-	return data.kpi ? getKPI(data.kpi) : {};
+	return getKPI(data.kpi);
 };
 
 export const fetchPutKPI = async (
@@ -97,13 +95,3 @@ 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,14 +1,8 @@
 import { queryOptions } from "@tanstack/react-query";
-import { fetchKPI, fetchKennzahlen } from "./api";
+import { fetchKPI } from "./api";
 
 export const kpiQueryOptions = (pitchBookId: string) =>
 	queryOptions({
 		queryKey: ["pitchBookKPI", pitchBookId],
 		queryFn: () => fetchKPI(pitchBookId),
 	});
-
-export const settingsQueryOptions = () =>
-	queryOptions({
-		queryKey: ["pitchBookSettings"],
-		queryFn: () => fetchKennzahlen(),
-	});