project/frontend/src/components/KennzahlenTable.tsx

@@ -0,0 +1,132 @@
+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
+  export default function KennzahlenTable() {
+    // 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<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];
+        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}>
+                    {/* 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>
+                    </TableCell>
+  
+                    {/* Seitenzahl */}
+                    <TableCell>{row.page}</TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+  
+        {/* Dialog zum Bearbeiten */}
+        <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/routes/extractedResult.tsx

@@ -2,6 +2,8 @@ import { Box, Paper, Typography, Button } from '@mui/material';
 import {createFileRoute, useNavigate} from '@tanstack/react-router';
 import PDFViewer from '../components/pdfViewer';
 import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import KennzahlenTable from "../components/KennzahlenTable";
+
 
 export const Route = createFileRoute('/extractedResult')({
     component: ExtractedResultsPage,
@@ -51,13 +53,13 @@ function ExtractedResultsPage() {
                         height: '100%',
                         borderRadius: 2,
                         backgroundColor: '#eeeeee',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
+                        padding: 2, // Etwas Abstand innen
+                        overflow: 'auto', // Scrollen falls Tabelle zu lang
                     }}
                 >
-                    <Typography color="textSecondary">To-do: Table hierhin</Typography>
+                    <KennzahlenTable />
                 </Paper>
+
                 <Box
                     display="flex"
                     flexDirection="column"