project/frontend/src/components/KennzahlenTable.tsx

@@ -1,130 +1,143 @@
 import {
-  Table, TableBody, TableCell, TableContainer,
+    Table, TableBody, TableCell, TableContainer,
-  TableHead, TableRow, Paper, Box,
+    TableHead, TableRow, Paper, Box,
-  Dialog, DialogActions, DialogContent, DialogTitle,
+    Dialog, DialogActions, DialogContent, DialogTitle,
-  TextField, Button, Link
+    TextField, Button
-} 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 = [
-  { 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: 'Ausschüttungsrendite', value: '4%', page: 34, status: 'ok' }
-];
   
-interface KennzahlenTableProps {
+  //  Beispiel-Daten
-  onPageClick?: (page: number) => void;
+  const exampleData = [
-  setSelectedLabel?: (label: string) => void;
+    { 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' }
+  ];
   
-export default function KennzahlenTable({ onPageClick, setSelectedLabel }: KennzahlenTableProps) {
+  // React-Komponente
-  const [rows, setRows] = useState(exampleData);
+  import { Dispatch, SetStateAction } from 'react';
-  const [open, setOpen] = useState(false);
+  type Props = {
-  const [currentValue, setCurrentValue] = useState('');
+    setSelectedLabel: Dispatch<SetStateAction<string | null>>;
-  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
-
-  const handleEditClick = (value: string, index: number) => {
-    setCurrentValue(value);
-    setCurrentIndex(index);
-    setOpen(true);
   };
+  export default function KennzahlenTable({ setSelectedLabel }: Props) {
 
-  const handleSave = () => {
+    // Zustand für bearbeitbare Daten
-    if (currentIndex !== null) {
+    const [rows, setRows] = useState(exampleData);
-      const updated = [...rows];
-      updated[currentIndex].value = currentValue;
-      setRows(updated);
-    }
-    setOpen(false);
-  };
   
-  return (
+    // Zustände für Dialog-Funktion
-    <>
+    const [open, setOpen] = useState(false); // Dialog anzeigen?
-      <TableContainer component={Paper}>
+    const [currentValue, setCurrentValue] = useState(''); // Eingabewert
-        <Table>
+    const [currentIndex, setCurrentIndex] = useState<number | null>(null); // Zeilenindex
-          <TableHead>
-            <TableRow>
-              <TableCell><strong>Kennzahl</strong></TableCell>
-              <TableCell><strong>Wert</strong></TableCell>
-              <TableCell><strong>Seite</strong></TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row, index) => {
-              let borderColor = 'transparent';
-              if (row.status === 'error') borderColor = 'red';
-              else if (row.status === 'warning') borderColor = '#f6ed48';
   
-              return (
+    // Beim Klick auf das Stift-Icon: Dialog öffnen
-                <TableRow
+    const handleEditClick = (value: string, index: number) => {
-                  key={index}
+      setCurrentValue(value);
-                  onClick={() => setSelectedLabel?.(row.label)}
+      setCurrentIndex(index);
-                  hover
+      setOpen(true);
-                  sx={{ cursor: 'pointer' }}
+    };
-                >
+  
-                  <TableCell>{row.label}</TableCell>
+    // Wert speichern und Dialog schließen
-                  <TableCell>
+    const handleSave = () => {
-                    <Box
+      if (currentIndex !== null) {
-                      sx={{
+        const updated = [...rows];
-                        border: `2px solid ${borderColor}`,
+        updated[currentIndex].value = currentValue;
-                        borderRadius: 1,
+        setRows(updated);
-                        padding: '4px 8px',
+      }
-                        display: 'flex',
+      setOpen(false);
-                        alignItems: 'center',
+    };
-                        justifyContent: 'space-between',
+  
-                        width: '100%',
+    return (
-                      }}
+      <>
-                    >
+        <TableContainer component={Paper}>
-                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Table>
-                        {row.status === 'error' && <ErrorOutlineIcon fontSize="small" color="error" />}
+            {/* Tabellenkopf */}
-                        {row.status === 'warning' && <SearchIcon fontSize="small" sx={{ color: '#f6ed48' }} />}
+            <TableHead>
-                        <span>{row.value || '—'}</span>
+              <TableRow>
+                <TableCell><strong>Kennzahl</strong></TableCell>
+                <TableCell><strong>Wert</strong></TableCell>
+                <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';
+  
+                return (
+                  <TableRow
+                    key={index}
+                    onClick={() => setSelectedLabel(row.label)}
+                    hover
+                    sx={{ cursor: 'pointer' }}
+                  >
+
+                    {/* Kennzahl */}
+                    <TableCell>{row.label}</TableCell>
+  
+                    {/* Wert mit Status-Icons + Stift rechts */}
+                    <TableCell>
+                      <Box
+                        sx={{
+                          border: `2px solid ${borderColor}`,
+                          borderRadius: 1,
+                          padding: '4px 8px',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          width: '100%',
+                        }}
+                      >
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                          {row.status === 'error' && <ErrorOutlineIcon fontSize="small" color="error" />}
+                          {row.status === 'warning' && <SearchIcon fontSize="small" sx={{ color: '#f6ed48' }} />}
+                          <span>{row.value || '—'}</span>
+                        </Box>
+  
+                        {/* Stift-Icon */}
+                        <EditIcon
+                          fontSize="small"
+                          sx={{ color: '#555', cursor: 'pointer' }}
+                          onClick={() => handleEditClick(row.value, index)}
+                        />
                       </Box>
-                      <EditIcon
+                    </TableCell>
-                        fontSize="small"
+  
-                        sx={{ color: '#555', cursor: 'pointer' }}
+                    {/* Seitenzahl */}
-                        onClick={() => handleEditClick(row.value, index)}
+                    <TableCell>{row.page}</TableCell>
-                      />
+                  </TableRow>
-                    </Box>
+                );
-                  </TableCell>
+              })}
-                  <TableCell>
+            </TableBody>
-                    <Link
+          </Table>
-                      component="button"
+        </TableContainer>
-                      onClick={() => onPageClick?.(row.page)}
+  
-                      sx={{ cursor: 'pointer' }}
+        {/* Dialog zum Bearbeiten */}
-                    >
+        <Dialog open={open} onClose={() => setOpen(false)}>
-                      {row.page}
+          <DialogTitle>Kennzahl bearbeiten</DialogTitle>
-                    </Link>
+          <DialogContent>
-                  </TableCell>
+            <TextField
-                </TableRow>
+              fullWidth
-              );
+              value={currentValue}
-            })}
+              onChange={(e) => setCurrentValue(e.target.value)}
-          </TableBody>
+              label="Neuer Wert"
-        </Table>
+              variant="outlined"
-      </TableContainer>
+              margin="dense"
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setOpen(false)}>Abbrechen</Button>
+            <Button onClick={handleSave} variant="contained">Speichern</Button>
+          </DialogActions>
+        </Dialog>
+      </>
+    );
+  }
   
-      <Dialog open={open} onClose={() => setOpen(false)}>
-        <DialogTitle>Kennzahl bearbeiten</DialogTitle>
-        <DialogContent>
-          <TextField
-            fullWidth
-            value={currentValue}
-            onChange={(e) => setCurrentValue(e.target.value)}
-            label="Neuer Wert"
-            variant="outlined"
-            margin="dense"
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setOpen(false)}>Abbrechen</Button>
-          <Button onClick={handleSave} variant="contained">Speichern</Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  );
-}

project/frontend/src/components/pdfViewer.tsx

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

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

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