diff --git a/project/frontend/src/components/KennzahlenTable.tsx b/project/frontend/src/components/KennzahlenTable.tsx index 54ea51f..722df56 100644 --- a/project/frontend/src/components/KennzahlenTable.tsx +++ b/project/frontend/src/components/KennzahlenTable.tsx @@ -1,143 +1,130 @@ import { - Table, TableBody, TableCell, TableContainer, - TableHead, TableRow, Paper, Box, - Dialog, DialogActions, DialogContent, DialogTitle, - TextField, Button - } from '@mui/material'; - import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; - import SearchIcon from '@mui/icons-material/Search'; - import EditIcon from '@mui/icons-material/Edit'; - import { useState } from 'react'; - - - // 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' } - ]; - - // React-Komponente - import { Dispatch, SetStateAction } from 'react'; - type Props = { - setSelectedLabel: Dispatch>; + Table, TableBody, TableCell, TableContainer, + TableHead, TableRow, Paper, Box, + Dialog, DialogActions, DialogContent, DialogTitle, + TextField, Button, Link +} from '@mui/material'; +import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; +import SearchIcon from '@mui/icons-material/Search'; +import EditIcon from '@mui/icons-material/Edit'; +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 { + onPageClick?: (page: number) => void; + setSelectedLabel?: (label: string) => void; +} + +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(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 [rows, setRows] = useState(exampleData); - - // Zustände für Dialog-Funktion - const [open, setOpen] = useState(false); // Dialog anzeigen? - const [currentValue, setCurrentValue] = useState(''); // Eingabewert - const [currentIndex, setCurrentIndex] = useState(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]; - updated[currentIndex].value = currentValue; - setRows(updated); - } - setOpen(false); - }; - - return ( - <> - - - {/* Tabellenkopf */} - - - Kennzahl - Wert - Seite - - - - {/* Tabelleninhalt */} - - {rows.map((row, index) => { - // Rahmenfarbe anhand Status - let borderColor = 'transparent'; - if (row.status === 'error') borderColor = 'red'; - else if (row.status === 'warning') borderColor = '#f6ed48'; - - return ( - setSelectedLabel(row.label)} - hover - sx={{ cursor: 'pointer' }} - > + const handleSave = () => { + if (currentIndex !== null) { + const updated = [...rows]; + updated[currentIndex].value = currentValue; + setRows(updated); + } + setOpen(false); + }; - {/* Kennzahl */} - {row.label} - - {/* Wert mit Status-Icons + Stift rechts */} - - - - {row.status === 'error' && } - {row.status === 'warning' && } - {row.value || '—'} - - - {/* Stift-Icon */} - handleEditClick(row.value, index)} - /> + return ( + <> + +
+ + + Kennzahl + Wert + Seite + + + + {rows.map((row, index) => { + let borderColor = 'transparent'; + if (row.status === 'error') borderColor = 'red'; + else if (row.status === 'warning') borderColor = '#f6ed48'; + + return ( + setSelectedLabel?.(row.label)} + hover + sx={{ cursor: 'pointer' }} + > + {row.label} + + + + {row.status === 'error' && } + {row.status === 'warning' && } + {row.value || '—'} - - - {/* Seitenzahl */} - {row.page} - - ); - })} - -
-
- - {/* Dialog zum Bearbeiten */} - setOpen(false)}> - Kennzahl bearbeiten - - setCurrentValue(e.target.value)} - label="Neuer Wert" - variant="outlined" - margin="dense" - /> - - - - - - - - ); - } - \ No newline at end of file + handleEditClick(row.value, index)} + /> + + + + onPageClick?.(row.page)} + sx={{ cursor: 'pointer' }} + > + {row.page} + + + + ); + })} + + + + + setOpen(false)}> + Kennzahl bearbeiten + + setCurrentValue(e.target.value)} + label="Neuer Wert" + variant="outlined" + margin="dense" + /> + + + + + + + + ); +} diff --git a/project/frontend/src/components/pdfViewer.tsx b/project/frontend/src/components/pdfViewer.tsx index d872aa4..58ed6d9 100644 --- a/project/frontend/src/components/pdfViewer.tsx +++ b/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 ( - + - + setPageNumber((p) => p - 1)}> {pageNumber} / {numPages} - = (numPages || 1)} - onClick={() => setPageNumber((p) => p + 1)} - > + = (numPages || 1)} onClick={() => setPageNumber((p) => p + 1)}> diff --git a/project/frontend/src/routes/extractedResult.$pitchBook.tsx b/project/frontend/src/routes/extractedResult.$pitchBook.tsx index 01cbebb..70d83df 100644 --- a/project/frontend/src/routes/extractedResult.$pitchBook.tsx +++ b/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", }} > - + - +