Updated extractedResult_.$pitchBook.$kpi.tsx for page number editing

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,
@@ -27,6 +28,7 @@ import {
 } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
+import type { KeyboardEvent } from "react";
 import PDFViewer from "../components/pdfViewer";
 import { fetchPutKPI } from "../util/api";
 import { kpiQueryOptions } from "../util/query";
@@ -65,13 +67,23 @@ 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 originalValue = kpiValues[0]?.entity || "";
+	const originalPage = kpiValues[0]?.page || 0;
 	const selectedValue =
 		selectedIndex === -1 ? customValue : kpiValues[selectedIndex]?.entity || "";
+	const selectedPage =
+		selectedIndex === -1
+			? (parseInt(customPage) > 0 ? parseInt(customPage) : 1)
+			: kpiValues[selectedIndex]?.page || 1;
 
 	useEffect(() => {
-		setHasChanges(selectedValue !== originalValue);
-	}, [selectedValue, originalValue]);
+		const valueChanged = selectedValue !== originalValue;
+		const pageChanged = selectedPage !== originalPage;
+		setHasChanges(valueChanged || pageChanged);
+	}, [selectedValue, selectedPage, originalValue, originalPage]);
 
 	const { mutate: updateKPI } = useMutation({
 		mutationFn: () => {
@@ -83,7 +95,7 @@ function ExtractedResultsPage() {
 				baseObject = {
 					label: kpi.toUpperCase(),
 					entity: selectedValue,
-					page: 0,
+					page: selectedPage,
 					status: "single-source",
 					source: "manual",
 				};
@@ -92,6 +104,7 @@ function ExtractedResultsPage() {
 				{
 					...baseObject,
 					entity: selectedValue,
+					page: selectedPage,
 				},
 			];
 			return fetchPutKPI(Number(pitchBook), updatedData);
@@ -120,6 +133,7 @@ function ExtractedResultsPage() {
 			setSelectedIndex(index);
 			setCurrentPage(kpiValues[index].page);
 			setCustomValue("");
+			setCustomPage("");
 		}
 	};
 
@@ -131,10 +145,21 @@ function ExtractedResultsPage() {
 		setSelectedIndex(-1);
 	};
 
+	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);
 		setSelectedIndex(index);
 		setCustomValue("");
+		setCustomPage("");
 	};
 
 	const handleBackClick = () => {
@@ -166,6 +191,18 @@ function ExtractedResultsPage() {
 		updateKPI();
 	};
 
+	const startCustomPageEditing = () => {
+		setEditingCustomPage(true);
+	};
+
+	const handleCustomPageKeyPress = (e: KeyboardEvent<HTMLDivElement>) => {
+		if (e.key === "Enter") {
+			setEditingCustomPage(false);
+		} else if (e.key === "Escape") {
+			setEditingCustomPage(false);
+		}
+	};
+
 	return (
 		<Box p={4}>
 			<Box sx={{ display: "flex", alignItems: "center", mb: 3 }}>
@@ -318,6 +355,59 @@ function ExtractedResultsPage() {
 											/>
 										</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"
+												}}
+												onClick={(e: React.MouseEvent) => {
+													e.stopPropagation();
+													startCustomPageEditing();
+												}}
+											>
+												<span>{customPage || "..."}</span>
+												<EditIcon
+													fontSize="small"
+													sx={{
+														color: "#666",
+														opacity: 0.7,
+														transition: "opacity 0.2s ease",
+														ml: 1  // margin-left instead of absolute positioning
+													}}
+													onClick={(e) => {
+														e.stopPropagation();
+														startCustomPageEditing();
+													}}
+												/>
+											</Box>
+										)}
+									</TableCell>
 								</TableRow>
 							</TableBody>
 						</Table>