Mergekonflikt in KennzahlenTable.tsx bereinigt

Reviewed-on: #50

project/frontend/src/components/KennzahlenTable.tsx

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