Pdf Seite ist anspringbar durch Kennzahlen-Tabelle

project/frontend/src/components/KennzahlenTable.tsx

@@ -2,7 +2,7 @@ import {
     Table, TableBody, TableCell, TableContainer,
     TableHead, TableRow, Paper, Box,
     Dialog, DialogActions, DialogContent, DialogTitle,
-    TextField, Button
+    TextField, Button, Link
   } from '@mui/material';
   import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
   import SearchIcon from '@mui/icons-material/Search';
@@ -15,11 +15,16 @@ import {
     { label: 'Fondsname', value: 'Fund Real Estate Prime Europe', page: 1, status: 'ok' },
     { label: 'Fondsmanager', value: '', page: 1, status: 'error' },
     { label: 'Risikoprofil', value: 'Core/Core+', page: 10, status: 'warning' },
-    { label: 'LTV', value: '30-35 %', page: 8, status: 'ok' }
+    { label: 'LTV', value: '30-35 %', page: 8, status: 'ok' },
+    { label: 'Ausschüttungsrendite', value: '4%', page: 34, status: 'ok' }
   ];
   
+  interface KennzahlenTableProps {
+    onPageClick?: (page: number) => void;
+  }
+  
   // React-Komponente
-  export default function KennzahlenTable() {
+  export default function KennzahlenTable({ onPageClick }: KennzahlenTableProps) {
     // Zustand für bearbeitbare Daten
     const [rows, setRows] = useState(exampleData);
   
@@ -100,7 +105,15 @@ import {
                     </TableCell>
   
                     {/* Seitenzahl */}
-                    <TableCell>{row.page}</TableCell>
+                    <TableCell>
+                      <Link
+                        component="button"
+                        onClick={() => onPageClick?.(row.page)}
+                        sx={{ cursor: 'pointer' }}
+                      >
+                        {row.page}
+                      </Link>
+                    </TableCell>
                   </TableRow>
                 );
               })}

project/frontend/src/components/pdfViewer.tsx

@@ -8,10 +8,11 @@ import { Box, IconButton } from "@mui/material";
 
 interface PDFViewerProps {
 	pitchBookId: string;
+	currentPage?: number;
 }
-export default function PDFViewer({ pitchBookId }: PDFViewerProps) {
+export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps) {
 	const [numPages, setNumPages] = useState<number | null>(null);
-	const [pageNumber, setPageNumber] = useState(1);
+	const [pageNumber, setPageNumber] = useState(currentPage || 1);
 	const [containerWidth, setContainerWidth] = useState<number | null>(null);
 	const containerRef = useRef<HTMLDivElement>(null);
 
@@ -31,6 +32,12 @@ export default function PDFViewer({ pitchBookId }: PDFViewerProps) {
 		return () => window.removeEventListener("resize", updateWidth);
 	}, []);
 
+	useEffect(() => {
+		if (currentPage && currentPage !== pageNumber) {
+			setPageNumber(currentPage);
+		}
+	}, [currentPage]);
+
 	return (
 		<Box
 			display="flex"

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

@@ -1,6 +1,7 @@
 import ContentPasteIcon from "@mui/icons-material/ContentPaste";
 import { Box, Button, Paper, Typography } from "@mui/material";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
 import KennzahlenTable from "../components/KennzahlenTable";
 import PDFViewer from "../components/pdfViewer";
 
@@ -12,6 +13,7 @@ function ExtractedResultsPage() {
 	const { pitchBook } = Route.useParams();
 	const navigate = useNavigate();
 	const status: "green" | "yellow" | "red" = "red";
+	const [currentPage, setCurrentPage] = useState(1);
 
 	const statusColor = {
 		red: "#f43131",
@@ -58,7 +60,7 @@ function ExtractedResultsPage() {
 						overflow: "auto",
 					}}
 				>
-					<KennzahlenTable />
+					<KennzahlenTable onPageClick={setCurrentPage} />
 				</Paper>
 				<Box
 					display="flex"
@@ -78,7 +80,7 @@ function ExtractedResultsPage() {
 							justifyContent: "center",
 						}}
 					>
-						<PDFViewer pitchBookId={pitchBook} />
+						<PDFViewer pitchBookId={pitchBook} currentPage={currentPage} />
 					</Paper>
 					<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
 						<Button variant="contained" sx={{ backgroundColor: "#383838" }}>