Mergekonflikt in KennzahlenTable.tsx bereinigt

project/frontend/src/components/KennzahlenTable.tsx

@@ -2,45 +2,38 @@ import {
   Table, TableBody, TableCell, TableContainer,
   TableHead, TableRow, Paper, Box,
   Dialog, DialogActions, DialogContent, DialogTitle,
-    TextField, Button
+  TextField, Button, Link
-  } from '@mui/material';
+} from '@mui/material';
-  import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-  import SearchIcon from '@mui/icons-material/Search';
+import SearchIcon from '@mui/icons-material/Search';
-  import EditIcon from '@mui/icons-material/Edit';
+import EditIcon from '@mui/icons-material/Edit';
-  import { useState } from 'react';
+import { useState } from 'react';
 
-  
+const exampleData = [
-  //  Beispiel-Daten
-  const exampleData = [
   { 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' }
+];
 
-  // React-Komponente
+interface KennzahlenTableProps {
-  import { Dispatch, SetStateAction } from 'react';
+  onPageClick?: (page: number) => void;
-  type Props = {
+  setSelectedLabel?: (label: string) => void;
-    setSelectedLabel: Dispatch<SetStateAction<string | null>>;
+}
-  };
-  export default function KennzahlenTable({ setSelectedLabel }: Props) {
 
-    // Zustand für bearbeitbare Daten
+export default function KennzahlenTable({ onPageClick, setSelectedLabel }: KennzahlenTableProps) {
   const [rows, setRows] = useState(exampleData);
+  const [open, setOpen] = useState(false);
+  const [currentValue, setCurrentValue] = useState('');
+  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
 
-    // Zustände für Dialog-Funktion
-    const [open, setOpen] = useState(false); // Dialog anzeigen?
-    const [currentValue, setCurrentValue] = useState(''); // Eingabewert
-    const [currentIndex, setCurrentIndex] = useState<number | null>(null); // Zeilenindex
-  
-    // Beim Klick auf das Stift-Icon: Dialog öffnen
   const handleEditClick = (value: string, index: number) => {
     setCurrentValue(value);
     setCurrentIndex(index);
     setOpen(true);
   };
 
-    // Wert speichern und Dialog schließen
   const handleSave = () => {
     if (currentIndex !== null) {
       const updated = [...rows];
@@ -54,7 +47,6 @@ import {
     <>
       <TableContainer component={Paper}>
         <Table>
-            {/* Tabellenkopf */}
           <TableHead>
             <TableRow>
               <TableCell><strong>Kennzahl</strong></TableCell>
@@ -62,11 +54,8 @@ import {
               <TableCell><strong>Seite</strong></TableCell>
             </TableRow>
           </TableHead>
-  
-            {/* Tabelleninhalt */}
           <TableBody>
             {rows.map((row, index) => {
-                // Rahmenfarbe anhand Status
               let borderColor = 'transparent';
               if (row.status === 'error') borderColor = 'red';
               else if (row.status === 'warning') borderColor = '#f6ed48';
@@ -74,15 +63,11 @@ import {
               return (
                 <TableRow
                   key={index}
-                    onClick={() => setSelectedLabel(row.label)}
+                  onClick={() => setSelectedLabel?.(row.label)}
                   hover
                   sx={{ cursor: 'pointer' }}
                 >
-
-                    {/* Kennzahl */}
                   <TableCell>{row.label}</TableCell>
-  
-                    {/* Wert mit Status-Icons + Stift rechts */}
                   <TableCell>
                     <Box
                       sx={{
@@ -100,8 +85,6 @@ import {
                         {row.status === 'warning' && <SearchIcon fontSize="small" sx={{ color: '#f6ed48' }} />}
                         <span>{row.value || '—'}</span>
                       </Box>
-  
-                        {/* Stift-Icon */}
                       <EditIcon
                         fontSize="small"
                         sx={{ color: '#555', cursor: 'pointer' }}
@@ -109,9 +92,15 @@ import {
                       />
                     </Box>
                   </TableCell>
-  
+                  <TableCell>
-                    {/* Seitenzahl */}
+                    <Link
-                    <TableCell>{row.page}</TableCell>
+                      component="button"
+                      onClick={() => onPageClick?.(row.page)}
+                      sx={{ cursor: 'pointer' }}
+                    >
+                      {row.page}
+                    </Link>
+                  </TableCell>
                 </TableRow>
               );
             })}
@@ -119,7 +108,6 @@ import {
         </Table>
       </TableContainer>
 
-        {/* Dialog zum Bearbeiten */}
       <Dialog open={open} onClose={() => setOpen(false)}>
         <DialogTitle>Kennzahl bearbeiten</DialogTitle>
         <DialogContent>
@@ -139,5 +127,4 @@ import {
       </Dialog>
     </>
   );
-  }
+}
-  

project/frontend/src/components/pdfViewer.tsx

@@ -28,7 +28,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
     setNumPages(numPages);
   };
 
-  // Update PDF width on resize
+  // Container-Größe berechnen
   useEffect(() => {
     const updateWidth = () => {
       if (containerRef.current) {
@@ -41,7 +41,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
     return () => window.removeEventListener("resize", updateWidth);
   }, []);
 
-  // Highlight search logic
+  // Highlight-Logik
   useEffect(() => {
     setHighlightLabels(["LTV", "Fondsmanager", "Risikoprofil"]);
   }, []);
@@ -59,7 +59,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
     [highlightLabels]
   );
 
-  // Update page if prop changes
+  // Seite ändern, wenn Prop sich ändert
   useEffect(() => {
     if (currentPage && currentPage !== pageNumber) {
       setPageNumber(currentPage);
@@ -67,15 +67,7 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
   }, [currentPage]);
 
   return (
-    <Box
+    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" width="100%" height="100%" p={2}>
-      display="flex"
-      flexDirection="column"
-      justifyContent="center"
-      alignItems="center"
-      width="100%"
-      height="100%"
-      p={2}
-    >
       <Box
         ref={containerRef}
         sx={{
@@ -102,23 +94,14 @@ export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps)
           )}
         </Document>
       </Box>
-      <Box
+      <Box mt={2} display="flex" alignItems="center" justifyContent="center" gap={1}>
-        mt={2}
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-        gap={1}
-      >
         <IconButton disabled={pageNumber <= 1} onClick={() => setPageNumber((p) => p - 1)}>
           <ArrowCircleLeftIcon fontSize="large" />
         </IconButton>
         <span>
           {pageNumber} / {numPages}
         </span>
-        <IconButton
+        <IconButton disabled={pageNumber >= (numPages || 1)} onClick={() => setPageNumber((p) => p + 1)}>
-          disabled={pageNumber >= (numPages || 1)}
-          onClick={() => setPageNumber((p) => p + 1)}
-        >
           <ArrowCircleRightIcon fontSize="large" />
         </IconButton>
       </Box>

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" }}>