project/frontend/src/components/KennzahlenTable.tsx

@@ -3,6 +3,7 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import SearchIcon from "@mui/icons-material/Search";
 import {
 	Box,
+	IconButton,
 	Link,
 	Paper,
 	Table,
@@ -12,7 +13,6 @@ import {
 	TableHead,
 	TableRow,
 	TextField,
-	Tooltip,
 } from "@mui/material";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
@@ -32,7 +32,7 @@ const SETTINGS = [
 
 interface KennzahlenTableProps {
 	onPageClick?: (page: number) => void;
-	pdfId: string;
+	pdfId: string; // Neue Prop für die PDF-ID
 	data: {
 		[key: string]: {
 			label: string;
@@ -44,6 +44,7 @@ interface KennzahlenTableProps {
 	};
 }
 
+// React-Komponente
 export default function KennzahlenTable({
 	onPageClick,
 	data,
@@ -120,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>
@@ -141,7 +132,7 @@ export default function KennzahlenTable({
 						<TableCell>
 							<strong>Wert</strong>
 						</TableCell>
-						<TableCell align="center">
+						<TableCell>
 							<strong>Seite</strong>
 						</TableCell>
 					</TableRow>
@@ -156,79 +147,25 @@ export default function KennzahlenTable({
 						}))
 						.map((row) => {
 							let borderColor = "transparent";
-							const hasMultipleValues = row.extractedValues.length > 1;
+							if (
-							const hasNoValue = row.setting.mandatory &&
+								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}`,
@@ -249,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 ? (
@@ -272,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" }}
@@ -283,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

@@ -41,7 +41,8 @@ function ExtractedResultsPage() {
 					}}
 				/>
 				<Typography variant="h5" gutterBottom>
-					<strong>Extrahierte Kennzahlen</strong>
+					Kennzahlen extrahiert aus: <br />
+					<strong>FONDSNAME: TODO</strong>
 				</Typography>
 			</Box>
 			<Box
@@ -50,7 +51,7 @@ function ExtractedResultsPage() {
 				sx={{
 					width: "100vw",
 					maxWidth: "100%",
-					height: "85vh",
+					height: "80vh",
 					mt: 4,
 				}}
 			>
@@ -58,8 +59,7 @@ function ExtractedResultsPage() {
 					elevation={2}
 					sx={{
 						width: "45%",
-						maxHeight: "100%",
+						height: "100%",
-						height: "fit-content",
 						borderRadius: 2,
 						backgroundColor: "#eeeeee",
 						padding: 2,
@@ -76,33 +76,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 mt={2} display="flex" justifyContent="flex-end" gap={2} sx={{ flexShrink: 0 }}>
+					<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
 						<Button variant="contained" sx={{ backgroundColor: "#383838" }}>
 							<ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} />
 							Kennzahlenzeile kopieren

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>
 	);
 }