Merge remote-tracking branch 'origin/main' into neue-Kennzahl-spacy

project/backend/coordinator/controller/kennzahlen.py

@@ -1,61 +0,0 @@
-from flask import Blueprint, jsonify, request
-from model.kennzahl import Kennzahl
-from model.database import db
-
-kennzahlen_bp = Blueprint('kennzahlen', __name__)
-
-# Beispieldaten 
-EXAMPLE_DATA = [
-    {"pdf_id": "example", "label": "Fondsname", "value": "Fund Real Estate Prime Europe", "page": 1, "status": "ok"},
-    {"pdf_id": "example", "label": "Fondsmanager", "value": "", "page": 1, "status": "error"},
-    {"pdf_id": "example", "label": "Risikoprofil", "value": "Core/Core+", "page": 10, "status": "warning"},
-    {"pdf_id": "example", "label": "LTV", "value": "30-35 %", "page": 8, "status": "ok"},
-    {"pdf_id": "example", "label": "Ausschüttungsrendite", "value": "4%", "page": 34, "status": "ok"}
-]
-
-
-@kennzahlen_bp.route('/api/kennzahlen/init', methods=['POST'])
-def init_kennzahlen():
-    try:
-        # Lösche existierende Beispieldaten
-        Kennzahl.query.filter_by(pdf_id='example').delete()
-
-        # Füge Beispieldaten ein
-        for data in EXAMPLE_DATA:
-            kennzahl = Kennzahl(
-                pdf_id=data['pdf_id'],
-                label=data['label'],
-                value=data['value'],
-                page=data['page'],
-                status=data['status']
-            )
-            db.session.add(kennzahl)
-
-        db.session.commit()
-        return jsonify({"message": "Kennzahlen erfolgreich initialisiert"})
-
-    except Exception as e:
-        db.session.rollback()
-        return jsonify({"error": str(e)}), 500
-
-
-@kennzahlen_bp.route('/api/kennzahlen', methods=['GET'])
-def get_kennzahlen():
-    pdf_id = request.args.get('pdf_id', 'example')  # Default zu 'example' für Beispieldaten
-    kennzahlen = Kennzahl.query.filter_by(pdf_id=pdf_id).all()
-    return jsonify([k.to_dict() for k in kennzahlen])
-
-
-@kennzahlen_bp.route('/api/kennzahlen/<label>', methods=['PUT'])
-def update_kennzahl(label):
-    data = request.get_json()
-    pdf_id = request.args.get('pdf_id', 'example')  # Default zu 'example' für Beispieldaten
-
-    kennzahl = Kennzahl.query.filter_by(pdf_id=pdf_id, label=label).first()
-    if not kennzahl:
-        return jsonify({'error': 'Kennzahl nicht gefunden'}), 404
-
-    kennzahl.value = data.get('value', kennzahl.value)
-    db.session.commit()
-
-    return jsonify(kennzahl.to_dict())

project/backend/coordinator/controller/kpi_setting_controller.py

@@ -35,7 +35,7 @@ def create_kpi_setting():
         "translation",
         "example",
         "position",
-        "active"
+        "active",
     ]
     for field in required_fields:
         if field not in data:
@@ -61,7 +61,7 @@ def create_kpi_setting():
         translation=data["translation"],
         example=data["example"],
         position=data["position"],
-        active=data["active"]
+        active=data["active"],
     )
 
     db.session.add(new_kpi_setting)
@@ -136,7 +136,12 @@ def update_kpi_positions():
     try:
         for update_item in data:
             if "id" not in update_item or "position" not in update_item:
-                return jsonify({"error": "Each item must have 'id' and 'position' fields"}), 400
+                return (
+                    jsonify(
+                        {"error": "Each item must have 'id' and 'position' fields"}
+                    ),
+                    400,
+                )
 
             kpi_setting = KPISettingModel.query.get_or_404(update_item["id"])
             kpi_setting.position = update_item["position"]

project/backend/coordinator/controller/progress_controller.py

@@ -19,6 +19,6 @@ def progress():
     ):
         return jsonify({"error": "Invalid progress value"}), 400
 
-    socketio.emit("progress", {"id": data["id"], "progress": data["progress"]})
+    socketio.emit("progress", {"id": int(data["id"]), "progress": data["progress"]})
     # Process the data and return a response
     return jsonify({"message": "Progress updated"})

project/backend/coordinator/model/database.py

@@ -14,4 +14,5 @@ def init_db(app):
     with app.app_context():
         db.create_all()
         from model.seed_data import seed_default_kpi_settings
+
         seed_default_kpi_settings()

project/backend/coordinator/model/kennzahl.py

@@ -1,26 +0,0 @@
-from .database import db
-
-
-class Kennzahl(db.Model):
-    __tablename__ = 'kennzahlen'
-    
-    id = db.Column(db.Integer, primary_key=True)
-    pdf_id = db.Column(db.String(100), nullable=False)  # ID des PDFs
-    label = db.Column(db.String(100), nullable=False)
-    value = db.Column(db.String(100))
-    page = db.Column(db.Integer)
-    status = db.Column(db.String(20))  
-
-    # Zusammengesetzter Unique-Constraint für pdf_id und label
-    __table_args__ = (
-        db.UniqueConstraint('pdf_id', 'label', name='unique_pdf_kennzahl'),
-    )
-
-    def to_dict(self):
-        return {
-            'pdf_id': self.pdf_id,
-            'label': self.label,
-            'value': self.value,
-            'page': self.page,
-            'status': self.status
-        } 

project/backend/coordinator/model/kpi_setting_model.py

@@ -38,10 +38,12 @@ class KPISettingModel(db.Model):
             "translation": self.translation,
             "example": self.example,
             "position": self.position,
-            "active": self.active
+            "active": self.active,
         }
 
-    def __init__(self, name, description, mandatory, type, translation, example, position, active):
+    def __init__(
+        self, name, description, mandatory, type, translation, example, position, active
+    ):
         self.name = name
         self.description = description
         self.mandatory = mandatory

project/backend/coordinator/model/pitch_book_model.py

@@ -1,6 +1,7 @@
 from model.database import db
 from sqlalchemy.orm import Mapped, mapped_column
 from sqlalchemy import LargeBinary
+from datetime import datetime
 
 
 class PitchBookModel(db.Model):
@@ -8,9 +9,15 @@ class PitchBookModel(db.Model):
     filename: Mapped[str] = mapped_column()
     file: Mapped[bytes] = mapped_column(LargeBinary)
     kpi: Mapped[str | None]
+    created_at: Mapped[datetime] = mapped_column(default=datetime.utcnow)
 
     def to_dict(self):
-        return {"id": self.id, "filename": self.filename, "kpi": self.kpi}
+        return {
+            "id": self.id,
+            "filename": self.filename,
+            "kpi": self.kpi,
+            "created_at": self.created_at.isoformat() if self.created_at else None,
+        }
 
     def __init__(self, filename, file):
         self.filename = filename

project/backend/coordinator/model/seed_data.py

@@ -1,6 +1,7 @@
 from model.database import db
 from model.kpi_setting_model import KPISettingModel, KPISettingType
 
+
 def seed_default_kpi_settings():
     if KPISettingModel.query.first() is not None:
         print("KPI Settings bereits vorhanden, Seeding übersprungen")
@@ -15,7 +16,7 @@ def seed_default_kpi_settings():
             "translation": "Fund Name",
             "example": "Alpha Real Estate Fund I",
             "position": 1,
-            "active": True
+            "active": True,
         },
         {
             "name": "Fondsmanager",
@@ -25,7 +26,7 @@ def seed_default_kpi_settings():
             "translation": "Fund Manager",
             "example": "Max Mustermann",
             "position": 2,
-            "active": True
+            "active": True,
         },
         {
             "name": "AIFM",
@@ -35,7 +36,7 @@ def seed_default_kpi_settings():
             "translation": "AIFM",
             "example": "Alpha Investment Management GmbH",
             "position": 3,
-            "active": True
+            "active": True,
         },
         {
             "name": "Datum",
@@ -45,7 +46,7 @@ def seed_default_kpi_settings():
             "translation": "Date",
             "example": "05.05.2025",
             "position": 4,
-            "active": True
+            "active": True,
         },
         {
             "name": "Risikoprofil",
@@ -55,7 +56,7 @@ def seed_default_kpi_settings():
             "translation": "Risk Profile",
             "example": "Core/Core++",
             "position": 5,
-            "active": True
+            "active": True,
         },
         {
             "name": "Artikel",
@@ -65,7 +66,7 @@ def seed_default_kpi_settings():
             "translation": "Article",
             "example": "Artikel 8",
             "position": 6,
-            "active": True
+            "active": True,
         },
         {
             "name": "Zielrendite",
@@ -75,7 +76,7 @@ def seed_default_kpi_settings():
             "translation": "Target Return",
             "example": "6.5",
             "position": 7,
-            "active": True
+            "active": True,
         },
         {
             "name": "Rendite",
@@ -85,7 +86,7 @@ def seed_default_kpi_settings():
             "translation": "Return",
             "example": "5.8",
             "position": 8,
-            "active": True
+            "active": True,
         },
         {
             "name": "Zielausschüttung",
@@ -95,7 +96,7 @@ def seed_default_kpi_settings():
             "translation": "Target Distribution",
             "example": "4.0",
             "position": 9,
-            "active": True
+            "active": True,
         },
         {
             "name": "Ausschüttung",
@@ -105,7 +106,7 @@ def seed_default_kpi_settings():
             "translation": "Distribution",
             "example": "3.8",
             "position": 10,
-            "active": True
+            "active": True,
         },
         {
             "name": "Laufzeit",
@@ -115,7 +116,7 @@ def seed_default_kpi_settings():
             "translation": "Duration",
             "example": "7 Jahre, 10, Evergreen",
             "position": 11,
-            "active": True
+            "active": True,
         },
         {
             "name": "LTV",
@@ -125,7 +126,7 @@ def seed_default_kpi_settings():
             "translation": "LTV",
             "example": "65.0",
             "position": 12,
-            "active": True
+            "active": True,
         },
         {
             "name": "Managementgebühren",
@@ -135,7 +136,7 @@ def seed_default_kpi_settings():
             "translation": "Management Fees",
             "example": "1.5",
             "position": 13,
-            "active": True
+            "active": True,
         },
         {
             "name": "Sektorenallokation",
@@ -145,7 +146,7 @@ def seed_default_kpi_settings():
             "translation": "Sector Allocation",
             "example": "Büro, Wohnen, Logistik, Studentenwohnen",
             "position": 14,
-            "active": True
+            "active": True,
         },
         {
             "name": "Länderallokation",
@@ -155,8 +156,8 @@ def seed_default_kpi_settings():
             "translation": "Country Allocation",
             "example": "Deutschland,Frankreich, Österreich, Schweiz",
             "position": 15,
-            "active": True
+            "active": True,
-        }
+        },
     ]
 
     print("Füge Standard KPI Settings hinzu...")
@@ -170,14 +171,16 @@ def seed_default_kpi_settings():
             translation=kpi_data["translation"],
             example=kpi_data["example"],
             position=kpi_data["position"],
-            active=kpi_data["active"]
+            active=kpi_data["active"],
         )
 
         db.session.add(kpi_setting)
 
     try:
         db.session.commit()
-        print(f"Erfolgreich {len(default_kpi_settings)} Standard KPI Settings hinzugefügt")
+        print(
+            f"Erfolgreich {len(default_kpi_settings)} Standard KPI Settings hinzugefügt"
+        )
     except Exception as e:
         db.session.rollback()
         print(f"Fehler beim Hinzufügen der Standard KPI Settings: {e}")

project/frontend/index.html

@@ -3,15 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/favicon.ico?v=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-tsrouter-app"
     />
-    <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
-    <title>Create TanStack App - frontend</title>
+    <title>Pitchbook Extractor</title>
   </head>
   <body>
     <div id="app"></div>

project/frontend/src/components/KennzahlenTable.tsx

@@ -42,25 +42,43 @@ export default function KennzahlenTable({
 	data,
 	pdfId,
 	settings,
-	from
+	from,
 }: KennzahlenTableProps) {
 	const [editingIndex, setEditingIndex] = useState<string>("");
 	const [editValue, setEditValue] = useState("");
+	const [editingPageIndex, setEditingPageIndex] = useState<string>("");
+	const [editPageValue, setEditPageValue] = useState("");
+	const [hoveredPageIndex, setHoveredPageIndex] = useState<string>("");
 	const navigate = useNavigate();
 
 	const queryClient = useQueryClient();
 
 	const { mutate } = useMutation({
-		mutationFn: (id: string) => {
+		mutationFn: (params: { id: string; newValue?: string; newPage?: number }) => {
+			const { id, newValue, newPage } = params;
 			const key = id.toUpperCase();
 			const updatedData = { ...data };
-			updatedData[key] = data[key]?.map((item) => ({
+
+			if (data[key] && data[key].length > 0) {
+				updatedData[key] = data[key].map((item) => ({
 					...item,
-				entity: editValue,
+					...(newValue !== undefined && { entity: newValue }),
-			})) || [{ label: key, entity: editValue }];
+					...(newPage !== undefined && { page: newPage }),
+				}));
+			} else {
+				updatedData[key] = [{
+					label: key,
+					entity: newValue || "",
+					page: newPage || 0,
+					status: "single-source",
+					source: "manual"
+				}];
+			}
+
 			return fetchPutKPI(Number(pdfId), updatedData);
 		},
-		onMutate: async (id: string) => {
+		onMutate: async (params: { id: string; newValue?: string; newPage?: number }) => {
+			const { id, newValue, newPage } = params;
 			await queryClient.cancelQueries({
 				queryKey: ["pitchBookKPI", pdfId],
 			});
@@ -71,10 +89,23 @@ export default function KennzahlenTable({
 
 			queryClient.setQueryData(["pitchBookKPI", pdfId], () => {
 				const updatedData = { ...data };
-				updatedData[key] = data[key]?.map((item) => ({
+
+				if (data[key] && data[key].length > 0) {
+					updatedData[key] = data[key].map((item) => ({
 						...item,
-					entity: editValue,
+						...(newValue !== undefined && { entity: newValue }),
-				})) || [{ label: key, entity: editValue }];
+						...(newPage !== undefined && { page: newPage }),
+					}));
+				} else {
+					updatedData[key] = [{
+						label: key,
+						entity: newValue || "",
+						page: newPage || 0,
+						status: "single-source",
+						source: "manual"
+					}];
+				}
+
 				return updatedData;
 			});
 
@@ -99,19 +130,41 @@ export default function KennzahlenTable({
 		setEditValue(value);
 	};
 
+	const startPageEditing = (value: number, index: string) => {
+		setEditingPageIndex(index);
+		setEditPageValue(value.toString());
+	};
+
 	// Bearbeitung beenden und Wert speichern
 	const handleSave = async (index: string) => {
-		// await updateKennzahl(rows[index].label, editValue);
+		mutate({ id: index, newValue: editValue });
-		mutate(index);
 		setEditingIndex("");
 	};
 
+	const handlePageSave = async (index: string) => {
+		const pageNumber = parseInt(editPageValue);
+		if (editPageValue === "" || pageNumber === 0) {
+			mutate({ id: index, newPage: 0 });
+		} else if (!isNaN(pageNumber) && pageNumber > 0) {
+			mutate({ id: index, newPage: pageNumber });
+		}
+		setEditingPageIndex("");
+	};
+
 	// Tastatureingaben verarbeiten
 	const handleKeyPress = (e: KeyboardEvent<HTMLDivElement>, index: string) => {
 		if (e.key === "Enter") {
 			handleSave(index);
 		} else if (e.key === "Escape") {
-			setEditingIndex("null");
+			setEditingIndex("");
+		}
+	};
+
+	const handlePageKeyPress = (e: KeyboardEvent<HTMLDivElement>, index: string) => {
+		if (e.key === "Enter") {
+			handlePageSave(index);
+		} else if (e.key === "Escape") {
+			setEditingPageIndex("");
 		}
 	};
 
@@ -131,14 +184,16 @@ export default function KennzahlenTable({
 			<Table>
 				<TableHead>
 					<TableRow>
-						<TableCell>
+						<TableCell width="30%">
 							<strong>Kennzahl</strong>
 						</TableCell>
-						<TableCell>
+						<TableCell width="55%">
 							<strong>Wert</strong>
 						</TableCell>
-						<TableCell align="center">
+						<TableCell align="center" width="15%">
+							<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }}>
 								<strong>Seite</strong>
+							</Box>
 						</TableCell>
 					</TableRow>
 				</TableHead>
@@ -165,9 +220,17 @@ export default function KennzahlenTable({
 								borderColor = "#f6ed48";
 							}
 
+							const currentPage = row.extractedValues.at(0)?.page ?? 0;
+							const isPageHovered = hoveredPageIndex === row.setting.name;
+							const canEditPage = !hasMultipleValues;
+
 							return (
 								<TableRow key={row.setting.name}>
-									<TableCell>{row.setting.name}</TableCell>
+									<TableCell>{row.setting.name}
+										{row.setting.mandatory && (
+											<span> *</span>
+										)}
+									</TableCell>
 									<TableCell
 										onClick={() => {
 											// Only allow inline editing for non-multiple value cells
@@ -229,12 +292,17 @@ export default function KennzahlenTable({
 											</Tooltip>
 										) : (
 											<Tooltip
-												title={hasNoValue ?
+												title={
+													hasNoValue ? (
 														<>
 															<b>Problem</b>
 															<br />
-														Es wurden keine Kennzahlen gefunden. Bitte ergänzen!
+															Es wurden keine Kennzahlen gefunden. Bitte
-													</> : ""
+															ergänzen!
+														</>
+													) : (
+														""
+													)
 												}
 												placement="bottom"
 												arrow
@@ -261,7 +329,10 @@ export default function KennzahlenTable({
 															}}
 														>
 															{hasNoValue && (
-																<ErrorOutlineIcon fontSize="small" color="error" />
+																<ErrorOutlineIcon
+																	fontSize="small"
+																	color="error"
+																/>
 															)}
 															{editingIndex === row.setting.name ? (
 																<TextField
@@ -300,10 +371,55 @@ export default function KennzahlenTable({
 										)}
 									</TableCell>
 									<TableCell align="center">
-										{(row.extractedValues.at(0)?.page ?? 0) > 0 ? (
+										{editingPageIndex === row.setting.name ? (
+											<TextField
+												value={editPageValue}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === '' || /^\d+$/.test(value)) {
+														setEditPageValue(value);
+													}
+												}}
+												onKeyDown={(e) => handlePageKeyPress(e, row.setting.name)}
+												onBlur={() => handlePageSave(row.setting.name)}
+												autoFocus
+												size="small"
+												variant="standard"
+												sx={{
+													width: "60px",
+													"& .MuiInput-input": {
+														textAlign: "center"
+													}
+												}}
+												inputProps={{
+													min: 0,
+													style: { textAlign: 'center' }
+												}}
+											/>
+										) : (
+											<>
+												{currentPage > 0 ? (
+													<Box
+														sx={{
+															display: "flex",
+															alignItems: "center",
+															justifyContent: "center",
+															position: "relative",
+															cursor: "pointer",
+															borderRadius: "4px",
+															minHeight: "32px",
+															minWidth: "100px",
+														}}
+														onClick={() => {
+															if (canEditPage) {
+																startPageEditing(currentPage, row.setting.name);
+															}
+														}}
+													>
 														<Link
 															component="button"
-												onClick={() => {
+															onClick={(e) => {
+																e.stopPropagation();
 																const extractedValue = row.extractedValues.at(0);
 																if (extractedValue?.page && extractedValue.page > 0) {
 																	onPageClick?.(Number(extractedValue.page), extractedValue.entity || "");
@@ -311,11 +427,44 @@ export default function KennzahlenTable({
 															}}
 															sx={{ cursor: "pointer" }}
 														>
-												{row.extractedValues.at(0)?.page}
+															{currentPage}
 														</Link>
+													</Box>
+												) : canEditPage ? (
+													<Box
+														sx={{
+															display: "flex",
+															alignItems: "center",
+															justifyContent: "center",
+															position: "relative",
+															cursor: "pointer",
+															minHeight: "32px",
+															minWidth: "100px",
+															borderRadius: "4px",
+															backgroundColor: isPageHovered ? "#f8f9fa" : "transparent",
+														}}
+														onMouseEnter={() => setHoveredPageIndex(row.setting.name)}
+														onMouseLeave={() => setHoveredPageIndex("")}
+														onClick={() => startPageEditing(0, row.setting.name)}
+													>
+														<span style={{ color: "#999" }}>...</span>
+														<EditIcon
+															fontSize="small"
+															sx={{
+																position: "absolute",
+																left: "70px",
+																color: "black",
+																cursor: "pointer",
+																opacity: 0.7,
+																transition: "opacity 0.2s ease",
+															}}
+														/>
+													</Box>
 												) : (
 													""
 												)}
+											</>
+										)}
 									</TableCell>
 								</TableRow>
 							);

project/frontend/src/components/PitchBooksTable.tsx

@@ -1,16 +1,35 @@
-import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, CircularProgress, Chip } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import {
+	Box,
+	Chip,
+	CircularProgress,
+	LinearProgress,
+	Paper,
+	Table,
+	TableBody,
+	TableCell,
+	TableContainer,
+	TableHead,
+	TableRow,
+	Typography,
+} from "@mui/material";
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
+import { useCallback, useEffect, useState } from "react";
+import { socket } from "../socket";
+import { fetchPitchBooksById } from "../util/api";
 import { pitchBooksQueryOptions } from "../util/query";
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import { formatDate } from "../util/date"
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
 
 interface PitchBook {
 	id: number;
 	filename: string;
 	created_at: string;
-    kpi?: string | {
+	kpi?:
+		| string
+		| {
 				[key: string]: {
 					label: string;
 					entity: string;
@@ -19,54 +38,163 @@ interface PitchBook {
 					source: string;
 				}[];
 		  };
-    status?: 'processing' | 'completed';
+	status?: "processing" | "completed";
 }
 
 export function PitchBooksTable() {
+	const [loadingPitchBooks, setLoadingPitchBooks] = useState<
+		{
+			id: number;
+			progress: number;
+			filename?: string;
+			created_at?: string;
+			buffer: number;
+			intervalId?: number;
+		}[]
+	>([]);
 	const navigate = useNavigate();
-    const { data: pitchBooks, isLoading } = useSuspenseQuery(pitchBooksQueryOptions());
+	const { data: pitchBooks, isLoading } = useSuspenseQuery(
+		pitchBooksQueryOptions(),
+	);
 
 	const handleRowClick = (pitchBookId: number) => {
 		navigate({
 			to: "/extractedResult/$pitchBook",
 			params: { pitchBook: pitchBookId.toString() },
-            search: { from: "overview" }
+			search: { from: "overview" },
 		});
 	};
 
+	const onConnection = useCallback(() => {
+		console.log("connected");
+	}, []);
+
+	const queryClient = useQueryClient();
+
+	const onProgress = useCallback(
+		(progress: { id: number; progress: number }) => {
+			if (progress.progress === 100) {
+				setLoadingPitchBooks((prev) => {
+					const intervalId = prev.find(
+						(item) => item.id === progress.id,
+					)?.intervalId;
+					intervalId && clearInterval(intervalId);
+
+					return [...prev.filter((item) => item.id !== progress.id)];
+				});
+				queryClient.invalidateQueries({
+					queryKey: pitchBooksQueryOptions().queryKey,
+				});
+			} else {
+				setLoadingPitchBooks((prev) => {
+					const oldItem = prev.find((item) => item.id === progress.id);
+					let intervalId = oldItem?.intervalId;
+					if (!oldItem) {
+						intervalId = setInterval(() => {
+							setLoadingPitchBooks((prev) => {
+								const oldItem = prev.find((item) => item.id === progress.id);
+								if (!oldItem) return prev;
+
+								return [
+									...prev.filter((e) => e.id !== progress.id),
+									{
+										id: progress.id,
+										progress: oldItem?.progress ?? progress.progress,
+										filename: oldItem?.filename,
+										buffer: oldItem ? oldItem.buffer + 0.5 : 0,
+										intervalId: oldItem.intervalId,
+										created_at: oldItem?.created_at,
+									},
+								];
+							});
+						}, 400);
+
+						fetchPitchBooksById(progress.id)
+							.then((res) => {
+								setLoadingPitchBooks((prev) => [
+									...prev.filter((item) => item.id !== progress.id),
+									{
+										id: progress.id,
+										progress: progress.progress,
+										filename: res.filename,
+										buffer: 0,
+										intervalId,
+										created_at: res.created_at,
+									},
+								]);
+							})
+							.catch((err) => {
+								console.error(err);
+							});
+					}
+					return [
+						...prev.filter((item) => item.id !== progress.id),
+						{
+							id: progress.id,
+							progress: progress.progress,
+							filename: oldItem?.filename,
+							created_at: oldItem?.created_at,
+							buffer: 0,
+							intervalId,
+						},
+					];
+				});
+			}
+		},
+		[queryClient],
+	);
+
+	useEffect(() => {
+		socket.on("connect", onConnection);
+		socket.on("progress", onProgress);
+		return () => {
+			socket.off("connect", onConnection);
+			socket.off("progress", onProgress);
+		};
+	}, [onConnection, onProgress]);
+
 	const getKPIValue = (pitchBook: PitchBook, fieldName: string): string => {
-        if (!pitchBook.kpi || typeof pitchBook.kpi === 'string') {
+		if (!pitchBook.kpi || typeof pitchBook.kpi === "string") {
 			try {
 				const parsedKPI = JSON.parse(pitchBook.kpi as string);
 				// Convert array to object format if needed
-                const kpiObj = Array.isArray(parsedKPI) ?
+				const kpiObj = Array.isArray(parsedKPI)
-                    parsedKPI.reduce((acc: any, item: any) => {
+					? parsedKPI.reduce((acc, item) => {
 							if (!acc[item.label]) acc[item.label] = [];
 							acc[item.label].push(item);
 							return acc;
-                    }, {}) : parsedKPI;
+						}, {})
+					: parsedKPI;
 
-                return kpiObj[fieldName]?.[0]?.entity || 'N/A';
+				return kpiObj[fieldName]?.[0]?.entity || "N/A";
 			} catch {
-                return 'N/A';
+				return "N/A";
 			}
 		}
 
-        return (pitchBook.kpi as any)[fieldName]?.[0]?.entity || 'N/A';
+		return pitchBook.kpi[fieldName]?.[0]?.entity || "N/A";
 	};
 
 	const getStatus = (pitchBook: PitchBook) => {
-        if (pitchBook.kpi &&
+		if (
-            ((typeof pitchBook.kpi === 'string' && pitchBook.kpi !== '{}') ||
+			pitchBook.kpi &&
-                (typeof pitchBook.kpi === 'object' && Object.keys(pitchBook.kpi).length > 0))) {
+			((typeof pitchBook.kpi === "string" && pitchBook.kpi !== "{}") ||
-            return 'completed';
+				(typeof pitchBook.kpi === "object" &&
+					Object.keys(pitchBook.kpi).length > 0))
+		) {
+			return "completed";
 		}
-        return 'processing';
+		return "processing";
 	};
 
 	if (isLoading) {
 		return (
-            <Box display="flex" justifyContent="center" alignItems="center" height="400px">
+			<Box
+				display="flex"
+				justifyContent="center"
+				alignItems="center"
+				height="400px"
+			>
 				<CircularProgress sx={{ color: "#383838" }} />
 			</Box>
 		);
@@ -84,23 +212,103 @@ export function PitchBooksTable() {
 			<Table>
 				<TableHead>
 					<TableRow sx={{ backgroundColor: "#f5f5f5" }}>
-                        <TableCell sx={{ width: "60px" }}></TableCell>
+						<TableCell sx={{ width: "60px" }} />
 						<TableCell sx={{ fontWeight: "bold" }}>Fondsname</TableCell>
 						<TableCell sx={{ fontWeight: "bold" }}>Fondsmanager</TableCell>
+						<TableCell sx={{ fontWeight: "bold" }}>Hochgeladen am</TableCell>
 						<TableCell sx={{ fontWeight: "bold" }}>Dateiname</TableCell>
-                        <TableCell sx={{ fontWeight: "bold", width: "120px" }}>Status</TableCell>
+						<TableCell sx={{ fontWeight: "bold", width: "120px" }}>
+							Status
+						</TableCell>
 					</TableRow>
 				</TableHead>
 				<TableBody>
-                    {pitchBooks.map((pitchBook: PitchBook) => {
+				{loadingPitchBooks
+					.sort((a, b) => a.id - b.id)
+					.map((pitchBook) => (
+						<TableRow key={pitchBook.id}>
+							<TableCell>
+								<Box
+									sx={{
+										width: 40,
+										height: 50,
+										backgroundColor: "#f0f0f0",
+										borderRadius: 1,
+										display: "flex",
+										alignItems: "center",
+										justifyContent: "center",
+										border: "1px solid #e0e0e0",
+									}}
+								>
+									<PictureAsPdfIcon fontSize="small" sx={{ color: "#666" }} />
+								</Box>
+							</TableCell>
+							<TableCell colSpan={2}>
+								<LinearProgress
+									variant="buffer"
+									value={pitchBook.progress}
+									valueBuffer={
+										pitchBook.buffer
+											? pitchBook.progress + pitchBook.buffer
+											: pitchBook.progress
+									}
+								/>
+							</TableCell>
+							<TableCell>
+								<Typography
+									variant="body2"
+									color="text.secondary"
+									fontSize="0.875rem"
+								>
+									{pitchBook.created_at && formatDate(pitchBook.created_at)}
+								</Typography>
+							</TableCell>
+							<TableCell>
+								<Typography
+									variant="body2"
+									color="text.secondary"
+									fontSize="0.875rem"
+								>
+									{pitchBook.filename}
+								</Typography>
+							</TableCell>
+							<TableCell>
+								<Chip
+									icon={<HourglassEmptyIcon />}
+									label="In Bearbeitung"
+									size="small"
+									sx={{
+										backgroundColor: "#fff3e0",
+										color: "#e65100",
+										"& .MuiChip-icon": {
+											color: "#e65100",
+										},
+									}}
+								/>
+							</TableCell>
+						</TableRow>
+					))}
+					{pitchBooks
+						.filter(
+							(pitchbook: PitchBook) =>
+								!loadingPitchBooks.some((e) => e.id === pitchbook.id),
+						)
+						.sort(
+							(a: PitchBook, b: PitchBook) =>
+								new Date(b.created_at).getTime() -
+								new Date(a.created_at).getTime(),
+						)
+						.map((pitchBook: PitchBook) => {
 							const status = getStatus(pitchBook);
-                        const fundName = getKPIValue(pitchBook, 'FONDSNAME') ||
+							const fundName =
-                            getKPIValue(pitchBook, 'FUND_NAME') ||
+								getKPIValue(pitchBook, "FONDSNAME") ||
-                            getKPIValue(pitchBook, 'NAME');
+								getKPIValue(pitchBook, "FUND_NAME") ||
+								getKPIValue(pitchBook, "NAME");
 
-                        const manager = getKPIValue(pitchBook, 'FONDSMANAGER') ||
+							const manager =
-                            getKPIValue(pitchBook, 'MANAGER') ||
+								getKPIValue(pitchBook, "FONDSMANAGER") ||
-                            getKPIValue(pitchBook, 'PORTFOLIO_MANAGER');
+								getKPIValue(pitchBook, "MANAGER") ||
+								getKPIValue(pitchBook, "PORTFOLIO_MANAGER");
 
 							return (
 								<TableRow
@@ -126,7 +334,10 @@ export function PitchBooksTable() {
 												border: "1px solid #e0e0e0",
 											}}
 										>
-                                        <PictureAsPdfIcon fontSize="small" sx={{ color: "#666" }} />
+											<PictureAsPdfIcon
+												fontSize="small"
+												sx={{ color: "#666" }}
+											/>
 										</Box>
 									</TableCell>
 									<TableCell>
@@ -135,13 +346,18 @@ export function PitchBooksTable() {
 										</Typography>
 									</TableCell>
 									<TableCell>{manager}</TableCell>
+                  <TableCell>{formatDate(pitchBook.created_at)}</TableCell>
 									<TableCell>
-                                    <Typography variant="body2" color="text.secondary" fontSize="0.875rem">
+										<Typography
+											variant="body2"
+											color="text.secondary"
+											fontSize="0.875rem"
+										>
 											{pitchBook.filename}
 										</Typography>
 									</TableCell>
 									<TableCell>
-                                    {status === 'completed' ? (
+										{status === "completed" ? (
 											<Chip
 												icon={<CheckCircleIcon />}
 												label="Abgeschlossen"

project/frontend/src/components/UploadPage.tsx

@@ -1,11 +1,12 @@
 import SettingsIcon from "@mui/icons-material/Settings";
-import { Backdrop, Box, Button, IconButton, Paper } from "@mui/material";
+import { Backdrop, Box, Button, IconButton, Paper, Typography } from "@mui/material";
-import { useNavigate } from "@tanstack/react-router";
+import { useNavigate, useRouter } from "@tanstack/react-router";
 import { useCallback, useEffect, useState } from "react";
 import FileUpload from "react-material-file-upload";
 import { socket } from "../socket";
-import { CircularProgressWithLabel } from "./CircularProgressWithLabel";
 import { API_HOST } from "../util/api";
+import { CircularProgressWithLabel } from "./CircularProgressWithLabel";
+import DekaLogo from "../assets/Deka_logo.png";
 
 export default function UploadPage() {
 	const [files, setFiles] = useState<File[]>([]);
@@ -13,6 +14,7 @@ export default function UploadPage() {
 	const [loadingState, setLoadingState] = useState<number | null>(null);
 	const fileTypes = ["pdf"];
 	const navigate = useNavigate();
+	const router = useRouter();
 
 	const uploadFile = useCallback(async () => {
 		const formData = new FormData();
@@ -86,26 +88,50 @@ export default function UploadPage() {
 				display="flex"
 				flexDirection="column"
 				alignItems="center"
-				justifyContent="center"
+				justifyContent="flex-start"
 				height="100vh"
 				bgcolor="white"
+				pt={3}
 			>
 				<Box
 					width="100%"
-					maxWidth="1300px"
 					display="flex"
-					justifyContent="flex-end"
+					justifyContent="space-between"
-					px={2}
+					alignItems="center"
+					px={8}
+					py={5}
 				>
+					<Box sx={{ display: "flex", alignItems: "center" }}>
+						<img
+							src={DekaLogo}
+							alt="Company Logo"
+							style={{ height: "40px", width: "auto" }}
+						/>
+					</Box>
+
 					<IconButton onClick={() => navigate({ to: "/config" })}>
 						<SettingsIcon fontSize="large" />
 					</IconButton>
 				</Box>
+
+				<Typography
+					variant="h4"
+					component="h1"
+					sx={{
+						fontWeight: "bold",
+						color: "#383838",
+						marginBottom: 12,
+						marginTop: 6,
+					}}
+				>
+					Pitchbook Extractor
+				</Typography>
+
 				<Paper
 					elevation={3}
 					sx={{
-						width: 900,
+						width: 800,
-						height: 500,
+						height: 400,
 						backgroundColor: "#eeeeee",
 						borderRadius: 4,
 						display: "flex",
@@ -178,6 +204,7 @@ export default function UploadPage() {
 						backgroundColor: "#383838",
 						"&:hover": { backgroundColor: "#2e2e2e" },
 					}}
+					onMouseEnter={() => router.preloadRoute({ to: "/pitchbooks" })}
 					onClick={() => navigate({ to: "/pitchbooks" })}
 				>
 					Alle Pitch Books anzeigen

project/frontend/src/components/pdfViewer.tsx

@@ -95,53 +95,78 @@ export default function PDFViewer({
 	useEffect(() => {
 		const tmpPos: string[] = [];
 		const tmpPosHighlight: string[] = [];
-		const textItems = textContent.filter(
-			(e) => e.text !== "" && e.text !== " ",
-		);
 
-		textItems.forEach((e, i) => {
+		if (textContent.length === 0) {
-			for (const s of highlight
+			setPosHighlight([]);
-				.filter((h) => h.page === pageNumber)
+			setPosHighlightFocus([]);
-				.map((h) => h.text)) {
+			return;
-				if (s.split(" ")[0] === e.text) {
-					if (
-						s.split(" ").reduce((prev, curr, j) => {
-							return prev && curr === textItems[i + j].text;
-						}, true)
-					) {
-						for (
-							let k = textItems[i].i;
-							k < textItems[i + s.split(" ").length]?.i ||
-							k < textItems[i + s.split(" ").length - 1]?.i;
-							k++
-						) {
-							tmpPos.push(textContent[k].posKey);
-						}
-					}
-				}
 		}
+		const findTextPositions = (searchText: string): number[] => {
+			const positions: number[] = [];
+			const normalizedSearch = searchText.toLowerCase().trim();
 
-			if (focusHighlight?.page === pageNumber) {
+			textContent.forEach((item, index) => {
-				if (focusHighlight.text.split(" ")[0] === e.text) {
+				if (item.text.toLowerCase().trim() === normalizedSearch) {
+					positions.push(index);
+				}
+			});
+
+			if (positions.length === 0) {
+				let cumulativeText = '';
+				const textBoundaries: { start: number; end: number; index: number }[] = [];
+
+				textContent.forEach((item, index) => {
+					const start = cumulativeText.length;
+					cumulativeText += item.text;
+					const end = cumulativeText.length;
+					textBoundaries.push({ start, end, index });
+				});
+
+				const lowerCumulative = cumulativeText.toLowerCase();
+				let searchIndex = lowerCumulative.indexOf(normalizedSearch);
+
+				while (searchIndex !== -1) {
+					const endIndex = searchIndex + normalizedSearch.length;
+
+					textBoundaries.forEach(boundary => {
 						if (
-						focusHighlight.text.split(" ").reduce((prev, curr, j) => {
+							(boundary.start <= searchIndex && searchIndex < boundary.end) || // Search starts in this item
-							return prev && curr === textItems[i + j].text;
+							(boundary.start < endIndex && endIndex <= boundary.end) || // Search ends in this item
-						}, true)
+							(searchIndex <= boundary.start && boundary.end <= endIndex) // This item is completely within search
 						) {
-						for (
+							if (!positions.includes(boundary.index)) {
-							let k = textItems[i].i;
+								positions.push(boundary.index);
-							k < textItems[i + focusHighlight.text.split(" ").length]?.i ||
-							k < textItems[i + focusHighlight.text.split(" ").length - 1]?.i;
-							k++
-						) {
-							tmpPosHighlight.push(textContent[k].posKey);
-						}
-					}
 							}
 						}
 					});
-		setPosHighlight(tmpPos);
+					searchIndex = lowerCumulative.indexOf(normalizedSearch, searchIndex + 1);
-		setPosHighlightFocus(tmpPosHighlight);
+				}
+			}
+			return positions.sort((a, b) => a - b);
+		};
+		highlight
+			.filter(h => h.page === pageNumber)
+			.forEach(highlightItem => {
+				const positions = findTextPositions(highlightItem.text);
+				positions.forEach(pos => {
+					if (pos >= 0 && pos < textContent.length) {
+						tmpPos.push(textContent[pos].posKey);
+					}
+				});
+			});
+
+		if (focusHighlight?.page === pageNumber && focusHighlight.text) {
+			const positions = findTextPositions(focusHighlight.text);
+
+			positions.forEach(pos => {
+				if (pos >= 0 && pos < textContent.length) {
+					tmpPosHighlight.push(textContent[pos].posKey);
+				}
+			});
+		}
+
+		setPosHighlight([...new Set(tmpPos)]);
+		setPosHighlightFocus([...new Set(tmpPosHighlight)]);
 	}, [highlight, focusHighlight, pageNumber, textContent]);
 
 	const onGetTextSuccess: OnGetTextSuccess = useCallback((fullText) => {

project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx

@@ -1,4 +1,5 @@
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import EditIcon from "@mui/icons-material/Edit";
 import {
 	Box,
 	Button,
@@ -26,7 +27,7 @@ import {
 	useSuspenseQuery,
 } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
+import { useEffect, useState, type KeyboardEvent } from "react";
 import PDFViewer from "../components/pdfViewer";
 import { fetchPutKPI } from "../util/api";
 import { kpiQueryOptions } from "../util/query";
@@ -65,25 +66,73 @@ function ExtractedResultsPage() {
 	const [showConfirmDialog, setShowConfirmDialog] = useState(false);
 	const [hasChanges, setHasChanges] = useState(false);
 	const [customValue, setCustomValue] = useState("");
+	const [customPage, setCustomPage] = useState("");
+	const [editingCustomPage, setEditingCustomPage] = useState(false);
+	const [focusHighlightOverride, setFocusHighlightOverride] = useState<{ page: number; text: string } | null>(null);
+
 	const originalValue = kpiValues[0]?.entity || "";
-	const selectedValue =
+	const originalPage = kpiValues[0]?.page || 0;
-		selectedIndex === -1 ? customValue : kpiValues[selectedIndex]?.entity || "";
+
+	// Funktion, um gleiche Werte zusammenzufassen und die Seiten zu sammeln
+	function groupKpiValues(values: Array<{ entity: string; page: number; [key: string]: any }>): Array<{ entity: string; pages: number[]; [key: string]: any }> {
+		const map = new Map<string, { entity: string; pages: number[]; [key: string]: any }>();
+		values.forEach((item: { entity: string; page: number; [key: string]: any }) => {
+			const key = item.entity.toLowerCase();
+			if (!map.has(key)) {
+				map.set(key, { ...item, pages: [item.page] });
+			} else {
+				const existingEntry = map.get(key)!;
+				if (!existingEntry.pages.includes(item.page)) {
+					existingEntry.pages.push(item.page);
+				}
+			}
+		});
+		return Array.from(map.values());
+	}
+
+	const groupedKpiValues: Array<{ entity: string; pages: number[]; [key: string]: any }> = groupKpiValues(kpiValues);
+
+	const selectedValue: string =
+		selectedIndex === -1 ? customValue : groupedKpiValues[selectedIndex]?.entity || "";
+	
+	const selectedPage =
+		selectedIndex === -1
+			? (parseInt(customPage) > 0 ? parseInt(customPage) : 1)
+			: groupedKpiValues[selectedIndex]?.pages[0] || 1;
+
+	// Um zu prüfen, ob der Wert nur aus Leerzeichen besteht
+	const isSelectedValueEmpty = selectedIndex === -1 ? customValue.trim() === "" : !selectedValue;
+
+	const focusHighlight = focusHighlightOverride || {
+		page: groupedKpiValues.at(selectedIndex)?.pages[0] || -1,
+		text: groupedKpiValues.at(selectedIndex)?.entity || "",
+	};
 
 	useEffect(() => {
-		setHasChanges(selectedValue !== originalValue);
+		const valueChanged = selectedValue !== originalValue;
-	}, [selectedValue, originalValue]);
+		const pageChanged = selectedPage !== originalPage;
+		setHasChanges(valueChanged || pageChanged);
+	}, [selectedValue, selectedPage, originalValue, originalPage]);
 
 	const { mutate: updateKPI } = useMutation({
 		mutationFn: () => {
 			const updatedData = { ...kpiData };
 			let baseObject;
 			if (selectedIndex >= 0) {
-				baseObject = kpiValues[selectedIndex];
+				// Das Originalobjekt mit allen Feldern für diesen Wert suchen
+				const original = kpiValues.find(v => v.entity.toLowerCase() === groupedKpiValues[selectedIndex].entity.toLowerCase()) as { status?: string; source?: string } | undefined;
+				baseObject = {
+					label: kpi.toUpperCase(),
+					entity: groupedKpiValues[selectedIndex].entity,
+					page: groupedKpiValues[selectedIndex].pages[0],
+					status: original?.status || "single-source",
+					source: original?.source || "auto",
+				};
 			} else {
 				baseObject = {
 					label: kpi.toUpperCase(),
 					entity: selectedValue,
-					page: 0,
+					page: selectedPage,
 					status: "single-source",
 					source: "manual",
 				};
@@ -92,6 +141,7 @@ function ExtractedResultsPage() {
 				{
 					...baseObject,
 					entity: selectedValue,
+					page: selectedPage,
 				},
 			];
 			return fetchPutKPI(Number(pitchBook), updatedData);
@@ -115,11 +165,14 @@ function ExtractedResultsPage() {
 		const value = event.target.value;
 		if (value === "custom") {
 			setSelectedIndex(-1);
+			setFocusHighlightOverride(null);
 		} else {
 			const index = Number.parseInt(value);
 			setSelectedIndex(index);
-			setCurrentPage(kpiValues[index].page);
+			setCurrentPage(groupedKpiValues[index].pages[0]);
 			setCustomValue("");
+			setCustomPage("");
+			setFocusHighlightOverride(null);
 		}
 	};
 
@@ -129,12 +182,33 @@ function ExtractedResultsPage() {
 		const value = event.target.value;
 		setCustomValue(value);
 		setSelectedIndex(-1);
+		setFocusHighlightOverride(null);
+	}
+
+	const handleCustomPageChange = (
+		event: React.ChangeEvent<HTMLInputElement>,
+	) => {
+		const value = event.target.value;
+		// Allow empty string or positive numbers only (no 0)
+		if (value === '' || (/^\d+$/.test(value) && parseInt(value) > 0)) {
+			setCustomPage(value);
+		}
 	};
 
 	const handleRowClick = (index: number) => {
-		setCurrentPage(kpiValues[index].page);
+		setCurrentPage(groupedKpiValues[index].pages[0]);
 		setSelectedIndex(index);
 		setCustomValue("");
+		setCustomPage("");
+		setFocusHighlightOverride(null);
+	};
+
+	const handlePageClick = (page: number, entity: string) => {
+		setCurrentPage(page);
+		setFocusHighlightOverride({
+			page: page,
+			text: entity,
+		});
 	};
 
 	const handleBackClick = () => {
@@ -166,6 +240,16 @@ function ExtractedResultsPage() {
 		updateKPI();
 	};
 
+	const startCustomPageEditing = () => {
+		setEditingCustomPage(true);
+	};
+
+	const handleCustomPageKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter" || e.key === "Escape") {
+			setEditingCustomPage(false);
+		}
+	};
+
 	return (
 		<Box p={4}>
 			<Box sx={{ display: "flex", alignItems: "center", mb: 3 }}>
@@ -203,18 +287,18 @@ function ExtractedResultsPage() {
 						<Table>
 							<TableHead>
 								<TableRow>
-									<TableCell>
+									<TableCell width="85%">
 										<strong>Gefundene Werte</strong>
 									</TableCell>
-									<TableCell align="center">
+									<TableCell align="center" width="15%">
-										<strong>Seite</strong>
+										<strong>Seiten</strong>
 									</TableCell>
 								</TableRow>
 							</TableHead>
 							<TableBody>
-								{kpiValues.map((item, index) => (
+								{groupedKpiValues.map((item, index) => (
 									<TableRow
-										key={`${item.entity}_${item.page}_${index}`}
+										key={`${item.entity}_${item.pages.join('_')}_${index}`}
 										sx={{
 											"&:hover": { backgroundColor: "#f9f9f9" },
 											cursor: "pointer",
@@ -253,16 +337,19 @@ function ExtractedResultsPage() {
 											</Box>
 										</TableCell>
 										<TableCell align="center">
+											{item.pages.map((page: number, i: number) => (
 												<Link
+													key={page}
 													component="button"
 													onClick={(e: React.MouseEvent) => {
 														e.stopPropagation();
-													setCurrentPage(item.page);
+														handlePageClick(page, item.entity);
 													}}
-												sx={{ cursor: "pointer" }}
+													sx={{ cursor: "pointer", ml: i > 0 ? 1 : 0 }}
 												>
-												{item.page}
+													{page}
 												</Link>
+											))}
 										</TableCell>
 									</TableRow>
 								))}
@@ -282,6 +369,7 @@ function ExtractedResultsPage() {
 											}}
 											onClick={() => {
 												setSelectedIndex(-1);
+												setFocusHighlightOverride(null);
 											}}
 										>
 											<Radio
@@ -298,6 +386,7 @@ function ExtractedResultsPage() {
 													},
 												}}
 											/>
+											<Box sx={{ width: '100%' }}>
 												<TextField
 													placeholder="Einen abweichenden Wert eingeben..."
 													value={customValue}
@@ -315,8 +404,66 @@ function ExtractedResultsPage() {
 													onClick={(e: React.MouseEvent) => {
 														e.stopPropagation();
 													}}
+													error={selectedIndex === -1 && customValue !== "" && customValue.trim() === ""}
+													helperText={selectedIndex === -1 && customValue !== "" && customValue.trim() === "" ? "Der Wert, der angegeben wurde, ist leer." : ""}
 												/>
 											</Box>
+										</Box>
+									</TableCell>
+									<TableCell align="center">
+										{editingCustomPage ? (
+											<TextField
+												value={customPage}
+												onChange={handleCustomPageChange}
+												onKeyDown={handleCustomPageKeyPress}
+												onBlur={() => setEditingCustomPage(false)}
+												autoFocus
+												size="small"
+												variant="standard"
+												sx={{
+													width: "60px",
+													"& .MuiInput-input": {
+														textAlign: "center"
+													}
+												}}
+												inputProps={{
+													min: 0,
+													style: { textAlign: 'center' }
+												}}
+											/>
+										) : (
+											<Box
+												sx={{
+													display: "flex",
+													alignItems: "center",
+													justifyContent: "center",
+													gap: 1,
+													cursor: "pointer",
+													minHeight: "24px",
+													minWidth: "100px",
+													margin: "0 auto",
+												}}
+												onClick={(e: React.MouseEvent) => {
+													e.stopPropagation();
+													startCustomPageEditing();
+												}}
+											>
+												<span>{customPage || "..."}</span>
+												<EditIcon
+													fontSize="small"
+													sx={{
+														color: "black",
+														opacity: 0.7,
+														transition: "opacity 0.2s ease",
+														ml: 1
+													}}
+													onClick={(e) => {
+														e.stopPropagation();
+														startCustomPageEditing();
+													}}
+												/>
+											</Box>
+										)}
 									</TableCell>
 								</TableRow>
 							</TableBody>
@@ -348,20 +495,17 @@ function ExtractedResultsPage() {
 							pitchBookId={pitchBook}
 							currentPage={currentPage}
 							onPageChange={setCurrentPage}
-							highlight={Object.values(kpiValues)
+							highlight={groupedKpiValues
-								.flat()
+								.map((k) => k.pages.map((page: number) => ({ page, text: k.entity })))
-								.map((k) => ({ page: k.page, text: k.entity }))}
+								.reduce((acc, val) => acc.concat(val), [])}
-							focusHighlight={{
+							focusHighlight={focusHighlight}
-								page: kpiValues.at(selectedIndex)?.page || -1,
-								text: kpiValues.at(selectedIndex)?.entity || "",
-							}}
 						/>
 					</Paper>
 					<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
 						<Button
 							variant="contained"
 							onClick={handleAcceptReview}
-							disabled={!selectedValue}
+							disabled={isSelectedValueEmpty}
 							sx={{
 								backgroundColor: "#383838",
 								"&:hover": { backgroundColor: "#2e2e2e" },

project/frontend/src/util/api.ts

@@ -1,6 +1,6 @@
 import type { Kennzahl } from "@/types/kpi";
 
-const API_HOST = import.meta.env.VITE_API_HOST || 'http://localhost:5050';
+const API_HOST = import.meta.env.VITE_API_HOST || "http://localhost:5050";
 
 export { API_HOST };
 
@@ -15,9 +15,7 @@ export const fetchKPI = async (
 		source: string;
 	}[];
 }> => {
-	const response = await fetch(
+	const response = await fetch(`${API_HOST}/api/pitch_book/${pitchBookId}`);
-		`${API_HOST}/api/pitch_book/${pitchBookId}`,
-	);
 	const data = await response.json();
 
 	return data.kpi ? getKPI(data.kpi) : {};
@@ -46,13 +44,10 @@ export const fetchPutKPI = async (
 	const formData = new FormData();
 	formData.append("kpi", JSON.stringify(flattenKPIArray(kpi)));
 
-	const response = await fetch(
+	const response = await fetch(`${API_HOST}/api/pitch_book/${pitchBookId}`, {
-		`${API_HOST}/api/pitch_book/${pitchBookId}`,
-		{
 		method: "PUT",
 		body: formData,
-		},
+	});
-	);
 	if (!response.ok) {
 		throw new Error(`HTTP error! status: ${response.status}`);
 	}
@@ -119,3 +114,11 @@ export async function fetchPitchBooks() {
 	}
 	return response.json();
 }
+
+export async function fetchPitchBooksById(id: number) {
+	const response = await fetch(`${API_HOST}/api/pitch_book/${id}`);
+	if (!response.ok) {
+		throw new Error("Failed to fetch pitch books");
+	}
+	return response.json();
+}

project/frontend/src/util/date.ts

@@ -0,0 +1,11 @@
+export const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+  const day = String(date.getDate()).padStart(2, '0');
+  const year = date.getFullYear();
+
+  return `${hours}:${minutes} ${day}.${month}.${year}`;
+};