Added style and function to the details kpi page. Fixed paging bug that when clicking on page, page no longer changes with arrows. Fixed styling of the table.

2025-06-13 12:31:44 +02:00 · 2025-06-13 12:31:44 +02:00 · d8342304c1
parent 211bb9a9d1
commit d8342304c1
4 changed files with 507 additions and 110 deletions
--- a/project/frontend/src/components/KennzahlenTable.tsx
+++ b/project/frontend/src/components/KennzahlenTable.tsx
@ -3,7 +3,6 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import SearchIcon from "@mui/icons-material/Search";
 import {
 	Box,
-	IconButton,
 	Link,
 	Paper,
 	Table,
@ -13,6 +12,7 @@ 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; // Neue Prop für die PDF-ID
+	pdfId: string;
 	data: {
 		[key: string]: {
 			label: string;
@ -44,7 +44,6 @@ interface KennzahlenTableProps {
 	};
 }

-// React-Komponente
 export default function KennzahlenTable({
 	onPageClick,
 	data,
@ -121,6 +120,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,7 +141,7 @@ export default function KennzahlenTable({
 						<TableCell>
 							<strong>Wert</strong>
 						</TableCell>
-						<TableCell>
+						<TableCell align="center">
 							<strong>Seite</strong>
 						</TableCell>
 					</TableRow>
@ -147,89 +156,122 @@ export default function KennzahlenTable({
 						}))
 						.map((row) => {
 							let borderColor = "transparent";
-							if (
-								row.setting.mandatory &&
+							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",
-											}}
-										>
+										{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}`,
+													borderRadius: 1,
+													padding: "4px 8px",
 													display: "flex",
 													alignItems: "center",
-													gap: 1,
+													justifyContent: "space-between",
 													width: "100%",
+													cursor: "text",
 												}}
 											>
-												{row.setting.mandatory &&
-													row.extractedValues.length === 0 && (
+												<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>
-											{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 && (
+													{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 +283,10 @@ export default function KennzahlenTable({
 														);
 													}}
 												/>
-											)}
-										</Box>
+											</Box>
+										)}
 									</TableCell>
-									<TableCell>
+									<TableCell align="center">
 										<Link
 											component="button"
 											onClick={() =>
@ -262,4 +304,4 @@ export default function KennzahlenTable({
 			</Table>
 		</TableContainer>
 	);
-}
+}
--- a/project/frontend/src/components/pdfViewer.tsx
+++ b/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>
 	);
-}
+}
--- a/project/frontend/src/routes/extractedResult.$pitchBook.tsx
+++ b/project/frontend/src/routes/extractedResult.$pitchBook.tsx
@ -41,8 +41,7 @@ function ExtractedResultsPage() {
 					}}
 				/>
 				<Typography variant="h5" gutterBottom>
-					Kennzahlen extrahiert aus: <br />
-					<strong>FONDSNAME: TODO</strong>
+					<strong>Extrahierte Kennzahlen</strong>
 				</Typography>
 			</Box>
 			<Box
@ -59,7 +58,8 @@ function ExtractedResultsPage() {
 					elevation={2}
 					sx={{
 						width: "45%",
-						height: "100%",
+						maxHeight: "100%",
+						height: "fit-content",
 						borderRadius: 2,
 						backgroundColor: "#eeeeee",
 						padding: 2,
@ -77,22 +77,33 @@ function ExtractedResultsPage() {
 					flexDirection="column"
 					justifyContent="space-between"
 					gap={5}
-					sx={{ width: "55%", height: "95%" }}
+					sx={{
+						width: "55%",
+						height: "100%",
+						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" }}>
 							<ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} />
 							Kennzahlenzeile kopieren
@ -109,4 +120,4 @@ function ExtractedResultsPage() {
 			</Box>
 		</Box>
 	);
-}
+}
--- a/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx
+++ b/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx
@ -1,27 +1,365 @@
-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 [selectedValue, setSelectedValue] = useState(kpiValues[0]?.entity || '');
+	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 || '';
+
+	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;
+		setSelectedValue(value);
+		if (value !== 'custom') {
+			setCustomValue('');
+		}
+	};
+
+	const handleCustomValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const value = event.target.value;
+		setCustomValue(value);
+		setSelectedValue(value);
+	};
+
+	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: "80vh",
+					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={() => setSelectedValue(item.entity)}
+									>
+										<TableCell>
+											<Box
+												sx={{
+													borderRadius: 1,
+													padding: '4px 8px',
+													display: 'flex',
+													alignItems: 'center',
+													width: '100%',
+													cursor: 'pointer',
+													'&:hover': {
+														borderColor: '#ccc'
+													}
+												}}
+											>
+												<Radio
+													value={item.entity}
+													checked={selectedValue === item.entity}
+													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={() => {
+												if (customValue) {
+													setSelectedValue(customValue);
+												}
+											}}
+										>
+											<Radio
+												value={customValue}
+												checked={selectedValue === customValue && 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={5}
+					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' },
+								px: 4,
+								py: 1.5
+							}}
+						>
+							Ü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>
 	);
-}
+}