Fix merge commit 2

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,39 @@ 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 (!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 +182,16 @@ export default function KennzahlenTable({
 			<Table>
 				<TableHead>
 					<TableRow>
-						<TableCell>
+						<TableCell width="25%">
 							<strong>Kennzahl</strong>
 						</TableCell>
-						<TableCell>
+						<TableCell width="60%">
 							<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,6 +218,10 @@ 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>
@@ -229,12 +286,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 +323,10 @@ export default function KennzahlenTable({
 															}}
 														>
 															{hasNoValue && (
-																<ErrorOutlineIcon fontSize="small" color="error" />
+																<ErrorOutlineIcon
+																	fontSize="small"
+																	color="error"
+																/>
 															)}
 															{editingIndex === row.setting.name ? (
 																<TextField
@@ -300,10 +365,58 @@ 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) && parseInt(value) > 0) {
+														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: canEditPage ? "pointer" : "default",
+															borderRadius: "4px",
+															minHeight: "32px",
+															minWidth: "100px",
+															transition: "all 0.2s ease",
+														}}
+														onMouseEnter={() => canEditPage && setHoveredPageIndex(row.setting.name)}
+														onMouseLeave={() => setHoveredPageIndex("")}
+														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 +424,57 @@ export default function KennzahlenTable({
 															}}
 															sx={{ cursor: "pointer" }}
 														>
-												{row.extractedValues.at(0)?.page}
+															{currentPage}
 														</Link>
+
+														{isPageHovered && canEditPage && (
+															<EditIcon
+																fontSize="small"
+																sx={{
+																	position: "absolute",
+																	left: "70px",
+																	color: "#666",
+																	opacity: 0.7,
+																	transition: "opacity 0.2s ease",
+																}}
+															/>
+														)}
+													</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: "#555",
+																cursor: "pointer",
+																opacity: 0.7,
+																transition: "opacity 0.2s ease",
+															}}
+														/>
+													</Box>
 												) : (
 													""
 												)}
+											</>
+										)}
 									</TableCell>
 								</TableRow>
 							);

project/frontend/src/components/PitchBooksTable.tsx

@@ -1,16 +1,34 @@
-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 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 +37,160 @@ interface PitchBook {
 					source: string;
 				}[];
 		  };
-    status?: 'processing' | 'completed';
+	status?: "processing" | "completed";
 }
 
 export function PitchBooksTable() {
+	const [loadingPitchBooks, setLoadingPitchBooks] = useState<
+		{
+			id: number;
+			progress: number;
+			filename?: 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;
+					console.log(intervalId, prev);
+					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,
+									},
+								];
+							});
+						}, 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,
+									},
+								]);
+							})
+							.catch((err) => {
+								console.error(err);
+							});
+					}
+					return [
+						...prev.filter((item) => item.id !== progress.id),
+						{
+							id: progress.id,
+							progress: progress.progress,
+							filename: oldItem?.filename,
+							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 +208,37 @@ 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" }}>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) => {
+					{pitchBooks
+						.filter(
+							(pitchbook: PitchBook) =>
+								!loadingPitchBooks.some((e) => e.id === pitchbook.id),
+						)
+						.sort(
+							(a: PitchBook, b: PitchBook) =>
+								new Date(a.created_at).getTime() -
+								new Date(b.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 +264,10 @@ export function PitchBooksTable() {
 												border: "1px solid #e0e0e0",
 											}}
 										>
-                                        <PictureAsPdfIcon fontSize="small" sx={{ color: "#666" }} />
+											<PictureAsPdfIcon
+												fontSize="small"
+												sx={{ color: "#666" }}
+											/>
 										</Box>
 									</TableCell>
 									<TableCell>
@@ -136,12 +277,16 @@ export function PitchBooksTable() {
 									</TableCell>
 									<TableCell>{manager}</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"
@@ -172,6 +317,63 @@ export function PitchBooksTable() {
 								</TableRow>
 							);
 						})}
+					{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.filename}
+									</Typography>
+								</TableCell>
+								<TableCell>
+									<Chip
+										icon={<HourglassEmptyIcon />}
+										label="In Bearbeitung"
+										size="small"
+										sx={{
+											backgroundColor: "#fff3e0",
+											color: "#e65100",
+											"& .MuiChip-icon": {
+												color: "#e65100",
+											},
+										}}
+									/>
+								</TableCell>
+							</TableRow>
+						))}
 				</TableBody>
 			</Table>
 			{pitchBooks.length === 0 && (

project/frontend/src/components/UploadPage.tsx

@@ -1,11 +1,11 @@
 import SettingsIcon from "@mui/icons-material/Settings";
 import { Backdrop, Box, Button, IconButton, Paper } 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";
 
 export default function UploadPage() {
 	const [files, setFiles] = useState<File[]>([]);
@@ -13,6 +13,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();
@@ -178,6 +179,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/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();
+}