V0.1.5

frontend/src/components/LoadingBar.tsx

@@ -0,0 +1,50 @@
+type LoadingBarProps = {
+  active: boolean;
+  progress?: number | null;
+  label?: string;
+  className?: string;
+};
+
+function clampProgress(value: number): number {
+  if (Number.isNaN(value)) return 0;
+  if (value < 0) return 0;
+  if (value > 100) return 100;
+  return value;
+}
+
+export function LoadingBar({
+  active,
+  progress = null,
+  label,
+  className = "",
+}: LoadingBarProps) {
+  if (!active) return null;
+
+  const numericProgress = typeof progress === "number" ? clampProgress(progress) : null;
+
+  return (
+    <div className={className}>
+      {label ? (
+        <div className="mb-1 text-xs font-medium text-gray-600">
+          {label}
+          {numericProgress !== null ? ` (${Math.round(numericProgress)}%)` : ""}
+        </div>
+      ) : null}
+      <div
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={numericProgress ?? undefined}
+        className="h-2 w-full overflow-hidden rounded-full bg-gray-200"
+      >
+        <div
+          className={[
+            "h-full rounded-full bg-blue-600",
+            numericProgress === null ? "w-2/5 animate-pulse" : "transition-all duration-200",
+          ].join(" ")}
+          style={numericProgress === null ? undefined : { width: `${numericProgress}%` }}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/components/SaveBeforeLeaveDialog.tsx

@@ -0,0 +1,54 @@
+type SaveBeforeLeaveDialogProps = {
+  open: boolean;
+  onWait: () => void | Promise<void>;
+  onProceed: () => void;
+  onCancel: () => void;
+};
+
+export function SaveBeforeLeaveDialog({
+  open,
+  onWait,
+  onProceed,
+  onCancel,
+}: SaveBeforeLeaveDialogProps) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/35 px-4">
+      <div className="w-full max-w-md rounded-xl border border-gray-200 bg-white p-5 shadow-lg">
+        <h3 className="text-base font-semibold text-gray-900">
+          Changes are still saving
+        </h3>
+        <p className="mt-2 text-sm text-gray-600">
+          Your latest edits may not be saved yet. You can wait for save to
+          finish and continue automatically, or leave this page now.
+        </p>
+        <div className="mt-4 flex flex-wrap justify-end gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onProceed}
+            className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-semibold text-red-700 hover:bg-red-100 transition"
+          >
+            Leave without waiting
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              void onWait();
+            }}
+            className="rounded-lg bg-emerald-600 px-3 py-2 text-sm font-semibold text-white hover:bg-emerald-700 transition"
+          >
+            Wait and continue
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/lib/version.ts

@@ -1 +1 @@
-export const APP_VERSION = "V0.1.4";
+export const APP_VERSION = "V0.1.5";

frontend/src/pages/EditLayoutsPage.tsx

@@ -33,6 +33,7 @@ import { PageHeader } from "../components/PageHeader";
 import { PageShell } from "../components/PageShell";
 import { InfoMenu } from "../components/InfoMenu";
 import { ReportPageCanvas } from "../components/ReportPageCanvas";
+import { SaveBeforeLeaveDialog } from "../components/SaveBeforeLeaveDialog";
 
 export default function EditLayoutsPage() {
   const [searchParams] = useSearchParams();
@@ -56,6 +57,9 @@ export default function EditLayoutsPage() {
   const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>(
     {},
   );
+  const [pendingNavigationTarget, setPendingNavigationTarget] = useState<
+    string | null
+  >(null);
   const canModify = Boolean(sessionId) && !isSaving;
   const saveTimerRef = useRef<number | null>(null);
   const savePromiseRef = useRef<Promise<void> | null>(null);
@@ -387,6 +391,28 @@ export default function EditLayoutsPage() {
     navigate(target);
   }
 
+  function requestNavigation(target: string) {
+    if (saveState === "saving" || saveState === "pending" || isSaving) {
+      setPendingNavigationTarget(target);
+      return;
+    }
+    void saveAndNavigate(target);
+  }
+
+  async function waitForSaveAndContinue() {
+    if (!pendingNavigationTarget) return;
+    const target = pendingNavigationTarget;
+    setPendingNavigationTarget(null);
+    await saveAndNavigate(target);
+  }
+
+  function leaveWithoutWaiting() {
+    if (!pendingNavigationTarget) return;
+    const target = pendingNavigationTarget;
+    setPendingNavigationTarget(null);
+    navigate(target);
+  }
+
   const saveIndicator = useMemo(() => {
     const base =
       "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold";
@@ -434,7 +460,7 @@ export default function EditLayoutsPage() {
               to={`/report-viewer${sessionQuery}`}
               onClick={(event) => {
                 event.preventDefault();
-                void saveAndNavigate(`/report-viewer${sessionQuery}`);
+                requestNavigation(`/report-viewer${sessionQuery}`);
               }}
               className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
             >
@@ -452,7 +478,7 @@ export default function EditLayoutsPage() {
             to={`/input-data${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/input-data${sessionQuery}`);
+              requestNavigation(`/input-data${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -464,7 +490,7 @@ export default function EditLayoutsPage() {
             to={`/report-viewer${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/report-viewer${sessionQuery}`);
+              requestNavigation(`/report-viewer${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -476,7 +502,7 @@ export default function EditLayoutsPage() {
             to={`/image-placement${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/image-placement${sessionQuery}`);
+              requestNavigation(`/image-placement${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -488,7 +514,7 @@ export default function EditLayoutsPage() {
             to={`/edit-report${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/edit-report${sessionQuery}`);
+              requestNavigation(`/edit-report${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -505,7 +531,7 @@ export default function EditLayoutsPage() {
             to={`/edit-layouts/templates${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/edit-layouts/templates${sessionQuery}`);
+              requestNavigation(`/edit-layouts/templates${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -516,7 +542,7 @@ export default function EditLayoutsPage() {
             to={`/export${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/export${sessionQuery}`);
+              requestNavigation(`/export${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -653,7 +679,7 @@ export default function EditLayoutsPage() {
                     to={`/edit-layouts/templates${sessionQuery}`}
                     onClick={(event) => {
                       event.preventDefault();
-                      void saveAndNavigate(`/edit-layouts/templates${sessionQuery}`);
+                      requestNavigation(`/edit-layouts/templates${sessionQuery}`);
                     }}
                     className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition"
                   >
@@ -775,6 +801,12 @@ export default function EditLayoutsPage() {
       </section>
 
       <PageFooter note="Tip: reorder pages here and remove empty pages before export." />
+      <SaveBeforeLeaveDialog
+        open={Boolean(pendingNavigationTarget)}
+        onCancel={() => setPendingNavigationTarget(null)}
+        onProceed={leaveWithoutWaiting}
+        onWait={waitForSaveAndContinue}
+      />
     </PageShell>
   );
 }

frontend/src/pages/EditReportPage.tsx

@@ -10,6 +10,7 @@ import { PageFooter } from "../components/PageFooter";
 import { PageHeader } from "../components/PageHeader";
 import { PageShell } from "../components/PageShell";
 import { InfoMenu } from "../components/InfoMenu";
+import { SaveBeforeLeaveDialog } from "../components/SaveBeforeLeaveDialog";
 
 export default function EditReportPage() {
   const [searchParams] = useSearchParams();
@@ -23,6 +24,9 @@ export default function EditReportPage() {
   const [saveState, setSaveState] = useState<
     "saved" | "saving" | "pending" | "error"
   >("saved");
+  const [pendingNavigationTarget, setPendingNavigationTarget] = useState<
+    string | null
+  >(null);
 
   const [editorEl, setEditorEl] = useState<ReportEditorElement | null>(null);
   const editorRef = useCallback((node: ReportEditorElement | null) => {
@@ -45,6 +49,31 @@ export default function EditReportPage() {
     [editorEl, navigate],
   );
 
+  const requestNavigation = useCallback(
+    (target: string) => {
+      if (saveState === "saving" || saveState === "pending") {
+        setPendingNavigationTarget(target);
+        return;
+      }
+      void saveAndNavigate(target);
+    },
+    [saveAndNavigate, saveState],
+  );
+
+  const waitForSaveAndContinue = useCallback(async () => {
+    if (!pendingNavigationTarget) return;
+    const target = pendingNavigationTarget;
+    setPendingNavigationTarget(null);
+    await saveAndNavigate(target);
+  }, [pendingNavigationTarget, saveAndNavigate]);
+
+  const leaveWithoutWaiting = useCallback(() => {
+    if (!pendingNavigationTarget) return;
+    const target = pendingNavigationTarget;
+    setPendingNavigationTarget(null);
+    navigate(target);
+  }, [navigate, pendingNavigationTarget]);
+
   useEffect(() => {
     if (!sessionId) {
       setError("No active session found. Return to upload to continue.");
@@ -93,13 +122,13 @@ export default function EditReportPage() {
   useEffect(() => {
     if (!editorEl) return;
     const handleClose = () => {
-      void saveAndNavigate(`/report-viewer${sessionQuery}`);
+      requestNavigation(`/report-viewer${sessionQuery}`);
     };
     editorEl.addEventListener("editor-closed", handleClose);
     return () => {
       editorEl.removeEventListener("editor-closed", handleClose);
     };
-  }, [editorEl, saveAndNavigate, sessionQuery]);
+  }, [editorEl, requestNavigation, sessionQuery]);
 
   useEffect(() => {
     if (!editorEl) return;
@@ -172,7 +201,7 @@ export default function EditReportPage() {
               to={`/report-viewer${sessionQuery}`}
               onClick={(event) => {
                 event.preventDefault();
-                void saveAndNavigate(`/report-viewer${sessionQuery}`);
+                requestNavigation(`/report-viewer${sessionQuery}`);
               }}
               className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
             >
@@ -190,7 +219,7 @@ export default function EditReportPage() {
             to={`/input-data${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/input-data${sessionQuery}`);
+              requestNavigation(`/input-data${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -202,7 +231,7 @@ export default function EditReportPage() {
             to={`/report-viewer${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/report-viewer${sessionQuery}`);
+              requestNavigation(`/report-viewer${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -214,7 +243,7 @@ export default function EditReportPage() {
             to={`/image-placement${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/image-placement${sessionQuery}`);
+              requestNavigation(`/image-placement${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -231,7 +260,7 @@ export default function EditReportPage() {
             to={`/edit-layouts${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/edit-layouts${sessionQuery}`);
+              requestNavigation(`/edit-layouts${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -243,7 +272,7 @@ export default function EditReportPage() {
             to={`/export${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/export${sessionQuery}`);
+              requestNavigation(`/export${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -268,6 +297,12 @@ export default function EditReportPage() {
       <report-editor ref={editorRef} data-mode="page" />
 
       <PageFooter note={`Editing page ${pageIndex + 1}. Changes save automatically.`} />
+      <SaveBeforeLeaveDialog
+        open={Boolean(pendingNavigationTarget)}
+        onCancel={() => setPendingNavigationTarget(null)}
+        onProceed={leaveWithoutWaiting}
+        onWait={waitForSaveAndContinue}
+      />
     </PageShell>
   );
 }

frontend/src/pages/ExportPage.tsx

@@ -11,8 +11,22 @@ import { PageFooter } from "../components/PageFooter";
 import { PageHeader } from "../components/PageHeader";
 import { PageShell } from "../components/PageShell";
 import { InfoMenu } from "../components/InfoMenu";
+import { LoadingBar } from "../components/LoadingBar";
 import { ReportPageCanvas } from "../components/ReportPageCanvas";
 
+type DownloadKind = "serverJson" | "serverPdf";
+
+type DownloadState = {
+  active: boolean;
+  progress: number | null;
+  error: string;
+};
+
+const INITIAL_DOWNLOAD_STATE: Record<DownloadKind, DownloadState> = {
+  serverJson: { active: false, progress: null, error: "" },
+  serverPdf: { active: false, progress: null, error: "" },
+};
+
 export default function ExportPage() {
   const [searchParams] = useSearchParams();
   const sessionId = getSessionId(searchParams.toString());
@@ -28,6 +42,88 @@ export default function ExportPage() {
   const [incTimestamp, setIncTimestamp] = useState(true);
   const [previewScale, setPreviewScale] = useState(1);
   const previewRef = useRef<HTMLDivElement | null>(null);
+  const [downloadState, setDownloadState] = useState(INITIAL_DOWNLOAD_STATE);
+
+  function setDownloadPartial(kind: DownloadKind, patch: Partial<DownloadState>) {
+    setDownloadState((prev) => ({
+      ...prev,
+      [kind]: { ...prev[kind], ...patch },
+    }));
+  }
+
+  async function fetchAndDownload(
+    url: string,
+    fallbackFilename: string,
+    kind: DownloadKind,
+  ) {
+    if (!sessionId) return;
+    setDownloadPartial(kind, { active: true, progress: null, error: "" });
+
+    try {
+      const response = await fetch(url, { credentials: "same-origin" });
+      if (!response.ok) {
+        let detail = response.statusText || `Request failed (${response.status})`;
+        try {
+          const data = (await response.json()) as { detail?: string };
+          if (data?.detail) detail = data.detail;
+        } catch {
+          // keep default
+        }
+        throw new Error(detail);
+      }
+
+      const contentLengthRaw = response.headers.get("content-length");
+      const totalBytes = contentLengthRaw ? Number(contentLengthRaw) : 0;
+      let receivedBytes = 0;
+
+      let blob: Blob;
+      if (response.body) {
+        const reader = response.body.getReader();
+        const chunks: Uint8Array[] = [];
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          if (!value) continue;
+          chunks.push(value);
+          receivedBytes += value.length;
+          if (totalBytes > 0) {
+            setDownloadPartial(kind, {
+              progress: Math.min(100, (receivedBytes / totalBytes) * 100),
+            });
+          }
+        }
+
+        blob = new Blob(chunks, {
+          type: response.headers.get("content-type") || "application/octet-stream",
+        });
+      } else {
+        blob = await response.blob();
+      }
+
+      const disposition = response.headers.get("content-disposition") || "";
+      const match = disposition.match(/filename="?([^"]+)"?/i);
+      const filename = match?.[1]?.trim() || fallbackFilename;
+
+      const objectUrl = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = objectUrl;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      URL.revokeObjectURL(objectUrl);
+
+      setDownloadPartial(kind, { active: false, progress: 100 });
+      window.setTimeout(() => {
+        setDownloadPartial(kind, { progress: null });
+      }, 500);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Download failed. Please try again.";
+      setDownloadPartial(kind, { active: false, progress: null, error: message });
+    }
+  }
 
   useEffect(() => {
     if (!sessionId) {
@@ -262,18 +358,33 @@ export default function ExportPage() {
                 Download JSON package
               </button>
 
-              <a
-                href={serverExportUrl}
-                target="_blank"
-                rel="noreferrer"
+              <button
+                type="button"
+                onClick={() => {
+                  void fetchAndDownload(
+                    serverExportUrl,
+                    `repex_report_package_${sessionId}.json`,
+                    "serverJson",
+                  );
+                }}
                 className={[
                   "mt-3 inline-flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition",
-                  !sessionId ? "pointer-events-none opacity-50" : "",
+                  !sessionId || downloadState.serverJson.active ? "opacity-50" : "",
                 ].join(" ")}
+                disabled={!sessionId || downloadState.serverJson.active}
               >
                 <Download className="h-4 w-4" />
                 Download from server
-              </a>
+              </button>
+              <LoadingBar
+                active={downloadState.serverJson.active}
+                progress={downloadState.serverJson.progress}
+                label="Downloading JSON package"
+                className="mt-3"
+              />
+              {downloadState.serverJson.error ? (
+                <p className="mt-2 text-xs text-red-600">{downloadState.serverJson.error}</p>
+              ) : null}
             </div>
 
             <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
@@ -287,17 +398,23 @@ export default function ExportPage() {
               </div>
 
               <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
-                <a
-                  href={serverPdfUrl}
-                  target="_blank"
-                  rel="noreferrer"
+                <button
+                  type="button"
+                  onClick={() => {
+                    void fetchAndDownload(
+                      serverPdfUrl,
+                      `repex_report_${sessionId}.pdf`,
+                      "serverPdf",
+                    );
+                  }}
                   className={[
                     "inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-white font-semibold hover:bg-blue-700 transition",
-                    !sessionId ? "pointer-events-none opacity-50" : "",
+                    !sessionId || downloadState.serverPdf.active ? "opacity-50" : "",
                   ].join(" ")}
+                  disabled={!sessionId || downloadState.serverPdf.active}
                 >
                   Download PDF (server)
-                </a>
+                </button>
                 <button
                   type="button"
                   onClick={handlePrint}
@@ -306,6 +423,15 @@ export default function ExportPage() {
                   Print / Save PDF (browser)
                 </button>
               </div>
+              <LoadingBar
+                active={downloadState.serverPdf.active}
+                progress={downloadState.serverPdf.progress}
+                label="Generating and downloading PDF"
+                className="mt-3"
+              />
+              {downloadState.serverPdf.error ? (
+                <p className="mt-2 text-xs text-red-600">{downloadState.serverPdf.error}</p>
+              ) : null}
             </div>
 
           </div>

frontend/src/pages/InputDataPage.tsx

@@ -17,6 +17,8 @@ import { PageFooter } from "../components/PageFooter";
 import { PageHeader } from "../components/PageHeader";
 import { PageShell } from "../components/PageShell";
 import { InfoMenu } from "../components/InfoMenu";
+import { LoadingBar } from "../components/LoadingBar";
+import { SaveBeforeLeaveDialog } from "../components/SaveBeforeLeaveDialog";
 
 type FieldDef = {
   key: keyof TemplateFields;
@@ -82,6 +84,10 @@ export default function InputDataPage() {
   const [showGeneralColumns, setShowGeneralColumns] = useState(false);
   const [generalDirty, setGeneralDirty] = useState(false);
   const [generalTemplate, setGeneralTemplate] = useState<TemplateFields>({});
+  const [uploadProgress, setUploadProgress] = useState<number | null>(null);
+  const [pendingNavigationTarget, setPendingNavigationTarget] = useState<
+    string | null
+  >(null);
   const [photoSelections, setPhotoSelections] = useState<Record<number, string>>(
     {},
   );
@@ -96,6 +102,26 @@ export default function InputDataPage() {
   const excelInputRef = useRef<HTMLInputElement | null>(null);
   const jsonInputRef = useRef<HTMLInputElement | null>(null);
   const uploadInputRefs = useRef<Record<number, HTMLInputElement | null>>({});
+  const uploadTimerRef = useRef<number | null>(null);
+
+  function clearUploadTimer() {
+    if (uploadTimerRef.current !== null) {
+      window.clearInterval(uploadTimerRef.current);
+      uploadTimerRef.current = null;
+    }
+  }
+
+  function startUploadProgress() {
+    clearUploadTimer();
+    setUploadProgress(6);
+    uploadTimerRef.current = window.setInterval(() => {
+      setUploadProgress((prev) => {
+        const value = typeof prev === "number" ? prev : 0;
+        if (value >= 92) return value;
+        return Math.min(92, value + Math.max(1, (92 - value) * 0.08));
+      });
+    }, 350);
+  }
 
   useEffect(() => {
     if (!sessionId) {
@@ -128,6 +154,13 @@ export default function InputDataPage() {
     load();
   }, [sessionId]);
 
+  useEffect(
+    () => () => {
+      clearUploadTimer();
+    },
+    [],
+  );
+
   async function refreshSession() {
     if (!sessionId) return;
     const data = await request<Session>(`/sessions/${sessionId}`);
@@ -593,6 +626,7 @@ export default function InputDataPage() {
     if (!sessionId) return;
     setIsUploading(true);
     setStatus("Uploading data file...");
+    startUploadProgress();
     try {
       const form = new FormData();
       form.append("file", file);
@@ -600,12 +634,19 @@ export default function InputDataPage() {
       await refreshSession();
       setStatus("Data file imported.");
       setGeneralDirty(false);
+      clearUploadTimer();
+      setUploadProgress(100);
     } catch (err) {
       const message =
         err instanceof Error ? err.message : "Failed to import data file.";
       setStatus(message);
+      clearUploadTimer();
+      setUploadProgress(null);
     } finally {
       setIsUploading(false);
+      window.setTimeout(() => {
+        setUploadProgress(null);
+      }, 500);
     }
   }
 
@@ -613,6 +654,7 @@ export default function InputDataPage() {
     if (!sessionId) return;
     setIsUploading(true);
     setStatus("Uploading JSON package...");
+    startUploadProgress();
     try {
       const form = new FormData();
       form.append("file", file);
@@ -620,12 +662,19 @@ export default function InputDataPage() {
       await refreshSession();
       setStatus("JSON package imported.");
       setGeneralDirty(false);
+      clearUploadTimer();
+      setUploadProgress(100);
     } catch (err) {
       const message =
         err instanceof Error ? err.message : "Failed to import JSON package.";
       setStatus(message);
+      clearUploadTimer();
+      setUploadProgress(null);
     } finally {
       setIsUploading(false);
+      window.setTimeout(() => {
+        setUploadProgress(null);
+      }, 500);
     }
   }
 
@@ -633,6 +682,7 @@ export default function InputDataPage() {
     if (!sessionId) return;
     setIsUploading(true);
     setStatus(`Uploading image ${file.name}...`);
+    startUploadProgress();
     const existing = new Set(
       (session?.uploads?.photos ?? []).map((photo) => photo.id),
     );
@@ -653,12 +703,19 @@ export default function InputDataPage() {
       } else {
         setStatus("Uploaded image. Refresh to see new file.");
       }
+      clearUploadTimer();
+      setUploadProgress(100);
     } catch (err) {
       const message =
         err instanceof Error ? err.message : "Failed to upload image.";
       setStatus(message);
+      clearUploadTimer();
+      setUploadProgress(null);
     } finally {
       setIsUploading(false);
+      window.setTimeout(() => {
+        setUploadProgress(null);
+      }, 500);
     }
   }
 
@@ -689,6 +746,28 @@ export default function InputDataPage() {
     navigate(target);
   }
 
+  function requestNavigation(target: string) {
+    if (saveState === "saving" || saveState === "pending" || isSaving) {
+      setPendingNavigationTarget(target);
+      return;
+    }
+    void saveAndNavigate(target);
+  }
+
+  async function waitForSaveAndContinue() {
+    if (!pendingNavigationTarget) return;
+    const target = pendingNavigationTarget;
+    setPendingNavigationTarget(null);
+    await saveAndNavigate(target);
+  }
+
+  function leaveWithoutWaiting() {
+    if (!pendingNavigationTarget) return;
+    const target = pendingNavigationTarget;
+    setPendingNavigationTarget(null);
+    navigate(target);
+  }
+
   const saveIndicator = useMemo(() => {
     const base =
       "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold";
@@ -736,7 +815,7 @@ export default function InputDataPage() {
               to={`/report-viewer${sessionQuery}`}
               onClick={(event) => {
                 event.preventDefault();
-                void saveAndNavigate(`/report-viewer${sessionQuery}`);
+                requestNavigation(`/report-viewer${sessionQuery}`);
               }}
               className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
             >
@@ -759,7 +838,7 @@ export default function InputDataPage() {
             to={`/report-viewer${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/report-viewer${sessionQuery}`);
+              requestNavigation(`/report-viewer${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -771,7 +850,7 @@ export default function InputDataPage() {
             to={`/image-placement${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/image-placement${sessionQuery}`);
+              requestNavigation(`/image-placement${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -783,7 +862,7 @@ export default function InputDataPage() {
             to={`/edit-report${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/edit-report${sessionQuery}`);
+              requestNavigation(`/edit-report${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -795,7 +874,7 @@ export default function InputDataPage() {
             to={`/edit-layouts${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/edit-layouts${sessionQuery}`);
+              requestNavigation(`/edit-layouts${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -807,7 +886,7 @@ export default function InputDataPage() {
             to={`/export${sessionQuery}`}
             onClick={(event) => {
               event.preventDefault();
-              void saveAndNavigate(`/export${sessionQuery}`);
+              requestNavigation(`/export${sessionQuery}`);
             }}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
@@ -860,6 +939,18 @@ export default function InputDataPage() {
           </div>
         </div>
         {status ? <p className="text-sm text-gray-600 mt-3">{status}</p> : null}
+        <LoadingBar
+          active={isSaving}
+          progress={null}
+          label="Saving changes"
+          className="mt-3"
+        />
+        <LoadingBar
+          active={isUploading}
+          progress={uploadProgress}
+          label={status || "Uploading files"}
+          className="mt-3"
+        />
       </section>
 
       <section className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
@@ -1482,6 +1573,12 @@ export default function InputDataPage() {
       </div>
 
       <PageFooter note="Tip: changes save automatically. Use apply row to keep pages consistent." />
+      <SaveBeforeLeaveDialog
+        open={Boolean(pendingNavigationTarget)}
+        onCancel={() => setPendingNavigationTarget(null)}
+        onProceed={leaveWithoutWaiting}
+        onWait={waitForSaveAndContinue}
+      />
     </PageShell>
   );
 }

frontend/src/pages/ReviewSetupPage.tsx

@@ -46,8 +46,7 @@ export default function ReviewSetupPage() {
         setSession(data);
         const initial = new Set(data.selected_photo_ids || []);
         const photoIds = (data.uploads?.photos ?? []).map((photo) => photo.id);
-        const hasDataFiles = (data.uploads?.data_files ?? []).length > 0;
-        if (!hasDataFiles && photoIds.length > 0 && initial.size < photoIds.length) {
+        if (photoIds.length > 0 && initial.size < photoIds.length) {
           photoIds.forEach((photoId) => initial.add(photoId));
         }
         setSelectedPhotoIds(initial);
@@ -128,9 +127,12 @@ export default function ReviewSetupPage() {
         formData,
       );
       setSession(updated);
-      if (updated.selected_photo_ids) {
-        setSelectedPhotoIds(new Set(updated.selected_photo_ids));
+      const nextSelected = new Set(updated.selected_photo_ids || []);
+      const allPhotoIds = (updated.uploads?.photos ?? []).map((photo) => photo.id);
+      if (nextSelected.size < allPhotoIds.length) {
+        allPhotoIds.forEach((photoId) => nextSelected.add(photoId));
       }
+      setSelectedPhotoIds(nextSelected);
     } catch (err) {
       const message =
         err instanceof Error ? err.message : "Failed to upload data file.";

frontend/src/pages/UploadPage.tsx

@@ -16,6 +16,7 @@ import { formatBytes } from "../lib/format";
 import { formatDocNumber } from "../lib/report";
 import { setStoredSessionId } from "../lib/session";
 import { APP_VERSION } from "../lib/version";
+import { LoadingBar } from "../components/LoadingBar";
 import type { Session } from "../types/session";
 
 type StatusTone = "idle" | "info" | "error";
@@ -31,6 +32,27 @@ export default function UploadPage() {
   const [recentSessions, setRecentSessions] = useState<Session[]>([]);
   const [dragActive, setDragActive] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<number | null>(null);
+  const uploadTimerRef = useRef<number | null>(null);
+
+  function clearUploadTimer() {
+    if (uploadTimerRef.current !== null) {
+      window.clearInterval(uploadTimerRef.current);
+      uploadTimerRef.current = null;
+    }
+  }
+
+  function startUploadProgress() {
+    clearUploadTimer();
+    setUploadProgress(6);
+    uploadTimerRef.current = window.setInterval(() => {
+      setUploadProgress((prev) => {
+        const value = typeof prev === "number" ? prev : 0;
+        if (value >= 92) return value;
+        return Math.min(92, value + Math.max(1, (92 - value) * 0.08));
+      });
+    }, 350);
+  }
 
   const fileSummary = useMemo(() => {
     if (!selectedFiles.length) {
@@ -55,6 +77,13 @@ export default function UploadPage() {
     loadSessions();
   }, []);
 
+  useEffect(
+    () => () => {
+      clearUploadTimer();
+    },
+    [],
+  );
+
   function handleBrowseClick() {
     inputRef.current?.click();
   }
@@ -84,6 +113,7 @@ export default function UploadPage() {
     setIsSubmitting(true);
     setUploadStatus("Uploading files...");
     setStatusTone("idle");
+    startUploadProgress();
 
     const formData = new FormData();
     formData.append("document_no", documentNo.trim());
@@ -92,9 +122,15 @@ export default function UploadPage() {
 
     try {
       const session = await postForm<Session>("/sessions", formData);
+      clearUploadTimer();
+      setUploadProgress(100);
       setStoredSessionId(session.id);
-      navigate(`/processing?session=${encodeURIComponent(session.id)}`);
+      window.setTimeout(() => {
+        navigate(`/processing?session=${encodeURIComponent(session.id)}`);
+      }, 120);
     } catch (err) {
+      clearUploadTimer();
+      setUploadProgress(null);
       const message =
         err instanceof Error ? err.message : "Upload failed. Please try again.";
       setUploadStatus(message);
@@ -335,6 +371,12 @@ export default function UploadPage() {
               {uploadStatus}
             </p>
           ) : null}
+          <LoadingBar
+            active={isSubmitting}
+            progress={uploadProgress}
+            label={uploadStatus || "Uploading files"}
+            className="mt-3"
+          />
         </div>
       </section>
 

server/app/api/routes/sessions.py

@@ -25,7 +25,10 @@ from ..schemas import (
 from ...services import SessionStore
 from ...services.session_store import DATA_EXTS, IMAGE_EXTS
 
-from ...services.data_import import populate_session_from_data_files
+from ...services.data_import import (
+    populate_session_from_data_files,
+    reconcile_session_image_links,
+)
 from ...services.pdf_reportlab import render_report_pdf
 
 
@@ -101,6 +104,7 @@ def create_session(
     session = store.add_uploads(session, saved_files)
     try:
         session = populate_session_from_data_files(store, session)
+        session = reconcile_session_image_links(store, session)
     except Exception:
         # Do not block upload if data parsing fails.
         pass
@@ -114,6 +118,10 @@ def get_session(session_id: str, store: SessionStore = Depends(get_session_store
     if not session:
         raise HTTPException(status_code=404, detail="Session not found.")
     store.ensure_sections(session)
+    try:
+        session = reconcile_session_image_links(store, session)
+    except Exception:
+        pass
     return _attach_urls(session)
 
 
@@ -150,6 +158,10 @@ def get_pages(session_id: str, store: SessionStore = Depends(get_session_store))
     session = store.get_session(session_id)
     if not session:
         raise HTTPException(status_code=404, detail="Session not found.")
+    try:
+        session = reconcile_session_image_links(store, session)
+    except Exception:
+        pass
     pages = store.ensure_pages(session)
     return PagesResponse(pages=pages)
 
@@ -176,6 +188,10 @@ def get_sections(
     session = store.get_session(session_id)
     if not session:
         raise HTTPException(status_code=404, detail="Session not found.")
+    try:
+        session = reconcile_session_image_links(store, session)
+    except Exception:
+        pass
     sections = store.ensure_sections(session)
     return SectionsResponse(sections=sections)
 
@@ -265,6 +281,7 @@ def upload_data_file(
     session = store.add_uploads(session, [saved_file])
     try:
         session = populate_session_from_data_files(store, session)
+        session = reconcile_session_image_links(store, session)
     except Exception:
         pass
     return _attach_urls(session)
@@ -295,6 +312,10 @@ def upload_photo(
             pass
 
     session = store.add_uploads(session, [saved_file])
+    try:
+        session = reconcile_session_image_links(store, session)
+    except Exception:
+        pass
     return _attach_urls(session)
 
 
@@ -387,6 +408,10 @@ def export_pdf(
     session = store.get_session(session_id)
     if not session:
         raise HTTPException(status_code=404, detail="Session not found.")
+    try:
+        session = reconcile_session_image_links(store, session)
+    except Exception:
+        pass
     sections = store.ensure_sections(session)
     export_path = Path(store.session_dir(session_id)) / "export.pdf"
     render_report_pdf(store, session, sections, export_path)

server/app/services/data_import.py

@@ -2,9 +2,11 @@ from __future__ import annotations
 
 import csv
 import re
+import unicodedata
+from dataclasses import dataclass
 from datetime import date, datetime
 from pathlib import Path
-from typing import Dict, Iterable, List, Optional
+from typing import Dict, Iterable, List, Optional, Set, Tuple
 
 from openpyxl import load_workbook
 import xlrd
@@ -16,6 +18,18 @@ GENERAL_SHEET = "general information"
 HEADINGS_SHEET = "headings"
 ITEMS_SHEET = "item spesific"
 ITEMS_SHEET_ALT = "item specific"
+IMAGE_EXTENSIONS = {".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp", ".tif", ".tiff"}
+IMAGE_NAME_RE = re.compile(
+    r"(?i)([^,;\n\r]+?\.(?:jpe?g|png|gif|webp|bmp|tiff?))"
+)
+IMAGE_REF_SPLIT_RE = re.compile(r"[;\n\r]+")
+IMAGE_REF_PREFIX_RE = re.compile(r"^(?:fig(?:ure)?|image)\s*\d*\s*[:\-]\s*", re.IGNORECASE)
+
+
+@dataclass
+class PhotoLookup:
+    by_exact: Dict[str, Set[str]]
+    by_stem: Dict[str, Set[str]]
 
 
 def _normalize_text(value: str) -> str:
@@ -131,15 +145,43 @@ def _header_map(headers: List[str]) -> Dict[str, List[int]]:
     return mapping
 
 
-def _looks_like_image_name(value: str) -> bool:
-    return bool(re.search(r"\.(jpg|jpeg|png|gif|webp)$", value.strip(), re.IGNORECASE))
+def _clean_image_ref(value: str) -> str:
+    text = str(value or "").strip().strip(" \t\r\n'\"[](){}")
+    if not text:
+        return ""
+    text = text.replace("\\", "/").split("/")[-1]
+    text = IMAGE_REF_PREFIX_RE.sub("", text).strip()
+    return text
 
 
-def _extract_image_names(value: str) -> List[str]:
+def _extract_image_names(value: str, *, allow_stem_without_ext: bool) -> List[str]:
     if not value:
         return []
-    matches = re.findall(r"[^\s,;]+\\.(?:jpg|jpeg|png|gif|webp)", value, re.IGNORECASE)
-    return [match.strip() for match in matches if match.strip()]
+
+    found: List[str] = []
+    for section in IMAGE_REF_SPLIT_RE.split(str(value)):
+        chunks = [section]
+        if "," in section:
+            chunks = section.split(",")
+
+        for chunk in chunks:
+            cleaned = _clean_image_ref(chunk)
+            if not cleaned:
+                continue
+
+            explicit = IMAGE_NAME_RE.findall(cleaned)
+            if explicit:
+                for match in explicit:
+                    candidate = _clean_image_ref(match)
+                    if candidate and candidate not in found:
+                        found.append(candidate)
+                continue
+
+            if allow_stem_without_ext and re.search(r"[A-Za-z0-9]", cleaned):
+                if cleaned not in found:
+                    found.append(cleaned)
+
+    return found
 
 
 def _find_reference_value(cells: List[object]) -> str:
@@ -251,21 +293,30 @@ def _parse_items(rows: Iterable[Iterable[object]]) -> List[Dict[str, str | List[
             figure_caption = " - ".join(
                 [value for value in [figure_caption, figure_description] if value]
             )
-        image_names = [
-            _row_value(cells, image_index(1)),
-            _row_value(cells, image_index(2)),
-            _row_value(cells, image_index(3)),
-            _row_value(cells, image_index(4)),
-            _row_value(cells, image_index(5)),
-            _row_value(cells, image_index(6)),
-        ]
-        image_names = [name for name in image_names if name]
+        image_names: List[str] = []
+        for number in range(1, 7):
+            raw_value = _row_value(cells, image_index(number))
+            if not raw_value:
+                continue
+            for candidate in _extract_image_names(
+                raw_value, allow_stem_without_ext=True
+            ):
+                if candidate in image_names:
+                    continue
+                image_names.append(candidate)
+                if len(image_names) >= 6:
+                    break
+            if len(image_names) >= 6:
+                break
+
         if len(image_names) < 2:
             for cell in cells:
                 value = _cell_to_str(cell)
                 if not value:
                     continue
-                candidates = _extract_image_names(value) if not _looks_like_image_name(value) else [value]
+                candidates = _extract_image_names(
+                    value, allow_stem_without_ext=False
+                )
                 for candidate in candidates:
                     if candidate in image_names:
                         continue
@@ -348,9 +399,13 @@ def _parse_xls(path: Path) -> Dict[str, object]:
 
 
 def _normalize_key(value: str) -> str:
-    cleaned = _normalize_text(value)
-    cleaned = re.sub(r"[^a-z0-9]", "", cleaned)
-    return cleaned
+    text = str(value or "").strip().replace("\\", "/").split("/")[-1]
+    if not text:
+        return ""
+    text = unicodedata.normalize("NFKD", text)
+    text = "".join(ch for ch in text if not unicodedata.combining(ch))
+    text = re.sub(r"\s+", " ", text).strip().lower()
+    return re.sub(r"[^a-z0-9]", "", text)
 
 
 def _normalize_name(name: str) -> str:
@@ -358,35 +413,79 @@ def _normalize_name(name: str) -> str:
 
 
 def _normalize_stem(name: str) -> str:
-    return _normalize_key(Path(name).stem)
+    normalized = str(name or "").replace("\\", "/").split("/")[-1].strip()
+    if not normalized:
+        return ""
+    suffix = Path(normalized).suffix.lower()
+    if suffix in IMAGE_EXTENSIONS:
+        normalized = normalized[: -len(suffix)]
+    return _normalize_key(normalized)
 
 
-def _build_photo_lookup(uploads: List[dict]) -> Dict[str, str]:
-    lookup: Dict[str, str] = {}
+def _add_lookup_value(mapping: Dict[str, Set[str]], key: str, file_id: str) -> None:
+    if not key:
+        return
+    values = mapping.setdefault(key, set())
+    values.add(file_id)
+
+
+def _build_photo_lookup(uploads: List[dict]) -> PhotoLookup:
+    exact: Dict[str, Set[str]] = {}
+    stem: Dict[str, Set[str]] = {}
     for item in uploads:
         name = item.get("name") or ""
         file_id = item.get("id")
         if not name or not file_id:
             continue
-        lookup.setdefault(_normalize_name(name), file_id)
-        lookup.setdefault(_normalize_stem(name), file_id)
-    return lookup
+        _add_lookup_value(exact, _normalize_name(name), file_id)
+        _add_lookup_value(stem, _normalize_stem(name), file_id)
+    return PhotoLookup(by_exact=exact, by_stem=stem)
 
 
-def _photo_ids_for_names(names: List[str], lookup: Dict[str, str]) -> List[str]:
-    ids: List[str] = []
+def _resolve_photo_id(name: str, lookup: PhotoLookup) -> Optional[str]:
+    name = str(name or "").strip()
+    if not name:
+        return None
+
+    exact_key = _normalize_name(name)
+    stem_key = _normalize_stem(name)
+    has_suffix = Path(str(name).replace("\\", "/").split("/")[-1]).suffix.lower() in IMAGE_EXTENSIONS
+
+    exact_matches = lookup.by_exact.get(exact_key, set())
+    stem_matches = lookup.by_stem.get(stem_key, set())
+
+    if has_suffix and len(exact_matches) == 1:
+        return next(iter(exact_matches))
+    if len(stem_matches) == 1:
+        return next(iter(stem_matches))
+    if not has_suffix and len(exact_matches) == 1:
+        return next(iter(exact_matches))
+    return None
+
+
+def _collect_image_refs(names: List[str]) -> List[str]:
+    refs: List[str] = []
     for raw in names:
-        if not raw:
-            continue
-        for part in re.split(r"[;,]", str(raw)):
-            part = part.strip()
-            if not part:
-                continue
-            key = _normalize_name(part)
-            match = lookup.get(key) or lookup.get(_normalize_stem(part))
-            if match and match not in ids:
-                ids.append(match)
-    return ids
+        for candidate in _extract_image_names(
+            str(raw), allow_stem_without_ext=True
+        ):
+            if candidate and candidate not in refs:
+                refs.append(candidate)
+    return refs
+
+
+def _photo_ids_for_names(names: List[str], lookup: PhotoLookup) -> Tuple[List[str], List[str], List[str]]:
+    refs = _collect_image_refs(names)
+    ids: List[str] = []
+    unresolved: List[str] = []
+    for ref in refs:
+        resolved = _resolve_photo_id(ref, lookup)
+        if resolved:
+            if resolved not in ids:
+                ids.append(resolved)
+        elif ref not in unresolved:
+            unresolved.append(ref)
+    return ids, unresolved, refs
 
 
 def populate_session_from_data_files(
@@ -463,7 +562,12 @@ def populate_session_from_data_files(
             "figure_caption": item.get("figure_caption", ""),
         }
         image_names = item.get("image_names", []) or []
-        photo_ids = _photo_ids_for_names(image_names, photo_lookup)
+        photo_ids, unresolved_refs, normalized_refs = _photo_ids_for_names(
+            image_names, photo_lookup
+        )
+        template["image_name_refs"] = normalized_refs
+        if unresolved_refs:
+            template["unresolved_image_refs"] = unresolved_refs
         for photo_id in photo_ids:
             if photo_id not in selected_photo_ids:
                 selected_photo_ids.append(photo_id)
@@ -484,3 +588,64 @@ def populate_session_from_data_files(
         store.set_sections(session, sections)
 
     return session
+
+
+def reconcile_session_image_links(store: SessionStore, session: dict) -> dict:
+    uploads = session.get("uploads", {}).get("photos", []) or []
+    if not uploads:
+        return session
+
+    lookup = _build_photo_lookup(uploads)
+    sections = store.ensure_sections(session)
+    changed = False
+    selected_photo_ids = list(session.get("selected_photo_ids") or [])
+
+    for section in sections:
+        pages = section.get("pages") or []
+        for page in pages:
+            template = page.get("template")
+            if not isinstance(template, dict):
+                continue
+
+            refs_raw = template.get("image_name_refs") or []
+            refs: List[str]
+            if isinstance(refs_raw, str):
+                refs = _collect_image_refs([refs_raw])
+            elif isinstance(refs_raw, list):
+                refs = _collect_image_refs([str(value) for value in refs_raw if value])
+            else:
+                refs = []
+
+            if not refs:
+                continue
+
+            resolved_ids, unresolved_refs, normalized_refs = _photo_ids_for_names(
+                refs, lookup
+            )
+            existing = [value for value in (page.get("photo_ids") or []) if isinstance(value, str) and value]
+            merged = existing + [photo_id for photo_id in resolved_ids if photo_id not in existing]
+
+            if merged != existing:
+                page["photo_ids"] = merged
+                changed = True
+            for photo_id in merged:
+                if photo_id not in selected_photo_ids:
+                    selected_photo_ids.append(photo_id)
+            if template.get("image_name_refs") != normalized_refs:
+                template["image_name_refs"] = normalized_refs
+                changed = True
+            if unresolved_refs:
+                if template.get("unresolved_image_refs") != unresolved_refs:
+                    template["unresolved_image_refs"] = unresolved_refs
+                    changed = True
+            elif "unresolved_image_refs" in template:
+                template.pop("unresolved_image_refs", None)
+                changed = True
+
+    if selected_photo_ids != list(session.get("selected_photo_ids") or []):
+        session["selected_photo_ids"] = selected_photo_ids
+        changed = True
+
+    if changed:
+        store.update_session(session)
+    return session

server/app/services/pdf_reportlab.py

@@ -1,9 +1,10 @@
 from __future__ import annotations
 
+from io import BytesIO
 import math
 from pathlib import Path
 import re
-from typing import Iterable, List, Optional
+from typing import Dict, Iterable, List, Optional, Tuple
 
 from reportlab.lib import colors
 from reportlab.lib.pagesizes import A4
@@ -15,6 +16,12 @@ from reportlab.pdfgen import canvas
 from .session_store import SessionStore
 
 
+PDF_IMAGE_TARGET_DPI = 120
+PDF_IMAGE_JPEG_QUALITY = 70
+PDF_IMAGE_MAX_LONG_EDGE_PX = 1800
+PDF_IMAGE_PNG_PRESERVE_MAX_PX = 640
+
+
 def _has_template_content(template: dict | None) -> bool:
     if not template:
         return False
@@ -40,7 +47,7 @@ def _wrap_lines(
     pdf: canvas.Canvas,
     text: str,
     width: float,
-    max_lines: int,
+    max_lines: Optional[int],
     font: str,
     size: int,
 ) -> List[str]:
@@ -55,10 +62,10 @@ def _wrap_lines(
             if current:
                 lines.append(" ".join(current))
                 current = []
-                if len(lines) >= max_lines:
+                if max_lines is not None and len(lines) >= max_lines:
                     break
             remaining = word
-            while remaining and len(lines) < max_lines:
+            while remaining and (max_lines is None or len(lines) < max_lines):
                 cut = len(remaining)
                 while cut > 1 and pdf.stringWidth(remaining[:cut], font, size) > width:
                     cut -= 1
@@ -73,10 +80,10 @@ def _wrap_lines(
         else:
             lines.append(" ".join(current))
             current = [word]
-        if len(lines) >= max_lines:
+        if max_lines is not None and len(lines) >= max_lines:
             current = []
             break
-    if current and len(lines) < max_lines:
+    if current and (max_lines is None or len(lines) < max_lines):
         lines.append(" ".join(current))
     return lines
 
@@ -88,7 +95,7 @@ def _draw_wrapped(
     y: float,
     width: float,
     leading: float,
-    max_lines: int,
+    max_lines: Optional[int],
     font: str,
     size: int,
 ) -> float:
@@ -102,6 +109,53 @@ def _draw_wrapped(
     return y
 
 
+def _truncate_to_width(
+    pdf: canvas.Canvas,
+    text: str,
+    width: float,
+    font: str,
+    size: float,
+) -> str:
+    if pdf.stringWidth(text, font, size) <= width:
+        return text
+    ellipsis = "..."
+    if pdf.stringWidth(ellipsis, font, size) >= width:
+        return ""
+    cut = len(text)
+    while cut > 0:
+        candidate = f"{text[:cut].rstrip()}{ellipsis}"
+        if pdf.stringWidth(candidate, font, size) <= width:
+            return candidate
+        cut -= 1
+    return ""
+
+
+def _fit_wrapped_text(
+    pdf: canvas.Canvas,
+    text: str,
+    width: float,
+    font: str,
+    preferred_size: float,
+    min_size: float = 7.0,
+) -> Tuple[List[str], float, float]:
+    size = float(preferred_size)
+    while size >= min_size:
+        lines = _wrap_lines(pdf, text, width, None, font, size)
+        if not lines:
+            return [], size, max(9.0, size + 1.0)
+        if max(pdf.stringWidth(line, font, size) for line in lines) <= width + 0.1:
+            leading = max(9.0, size + 1.0)
+            return lines, size, leading
+        size -= 0.5
+
+    lines = _wrap_lines(pdf, text, width, None, font, min_size)
+    safe_lines = [
+        _truncate_to_width(pdf, line, width, font, min_size) for line in lines
+    ]
+    leading = max(9.0, min_size + 1.0)
+    return safe_lines, min_size, leading
+
+
 def _draw_centered_block(
     pdf: canvas.Canvas,
     lines: List[str],
@@ -193,18 +247,22 @@ def _resolve_logo_path(store: SessionStore, session: dict, raw: str) -> Optional
     value = _safe_text(raw)
     if not value:
         return None
+
+    def normalize_lookup(value_raw: str) -> str:
+        return re.sub(r"[^a-z0-9]", "", str(value_raw or "").strip().lower())
+
     uploads = (session.get("uploads") or {}).get("photos") or []
-    lower = value.lower()
+    lookup_key = normalize_lookup(value)
     for item in uploads:
         if value == (item.get("id") or ""):
             path = store.resolve_upload_path(session, item.get("id"))
             if path and path.exists():
                 return path
-        name = (item.get("name") or "").lower()
+        name = item.get("name") or ""
         if not name:
             continue
         stem = name.rsplit(".", 1)[0]
-        if lower == name or lower == stem:
+        if lookup_key in {normalize_lookup(name), normalize_lookup(stem)}:
             path = store.resolve_upload_path(session, item.get("id"))
             if path and path.exists():
                 return path
@@ -218,32 +276,116 @@ def _draw_image_fit(
     y: float,
     width: float,
     height: float,
+    image_cache: Optional[Dict[Tuple[str, int, int], Tuple[ImageReader, int, int, BytesIO]]] = None,
 ) -> bool:
-    try:
-        reader = ImageReader(str(image_path))
-        iw, ih = reader.getSize()
-    except Exception:
+    def _resample_filter() -> int:
+        resampling = getattr(Image, "Resampling", None)
+        if resampling is not None:
+            return int(resampling.LANCZOS)
+        return int(Image.LANCZOS)
+
+    def _prepare_reader() -> Optional[Tuple[ImageReader, int, int]]:
+        if image_cache is None:
+            return None
+
+        key = (
+            str(image_path.resolve()),
+            max(1, int(round(width))),
+            max(1, int(round(height))),
+        )
+        cached = image_cache.get(key)
+        if cached:
+            return cached[0], cached[1], cached[2]
+
         try:
-            img = Image.open(image_path)
-            img.load()
-            if img.mode not in ("RGB", "L"):
-                img = img.convert("RGB")
-            reader = ImageReader(img)
+            with Image.open(image_path) as source:
+                source.load()
+                image = source.copy()
+        except Exception:
+            return None
+
+        if image.width <= 0 or image.height <= 0:
+            return None
+
+        resample = _resample_filter()
+        target_w_px = max(1, int(round(width * PDF_IMAGE_TARGET_DPI / 72.0)))
+        target_h_px = max(1, int(round(height * PDF_IMAGE_TARGET_DPI / 72.0)))
+        image.thumbnail((target_w_px, target_h_px), resample)
+
+        long_edge = max(image.width, image.height)
+        if long_edge > PDF_IMAGE_MAX_LONG_EDGE_PX:
+            ratio = PDF_IMAGE_MAX_LONG_EDGE_PX / float(long_edge)
+            image = image.resize(
+                (
+                    max(1, int(round(image.width * ratio))),
+                    max(1, int(round(image.height * ratio))),
+                ),
+                resample,
+            )
+
+        suffix = image_path.suffix.lower()
+        buffer = BytesIO()
+        try:
+            if suffix == ".png" and max(image.width, image.height) <= PDF_IMAGE_PNG_PRESERVE_MAX_PX:
+                image.save(buffer, format="PNG", optimize=True)
+            else:
+                if image.mode in ("RGBA", "LA", "P"):
+                    alpha_source = image.convert("RGBA")
+                    flattened = Image.new("RGB", alpha_source.size, (255, 255, 255))
+                    flattened.paste(alpha_source, mask=alpha_source.split()[-1])
+                    image = flattened
+                elif image.mode not in ("RGB", "L"):
+                    image = image.convert("RGB")
+                image.save(
+                    buffer,
+                    format="JPEG",
+                    quality=PDF_IMAGE_JPEG_QUALITY,
+                    optimize=True,
+                    progressive=True,
+                )
+            buffer.seek(0)
+            reader = ImageReader(buffer)
+            iw, ih = reader.getSize()
+            image_cache[key] = (reader, iw, ih, buffer)
+            return reader, iw, ih
+        except Exception:
+            buffer.close()
+            return None
+
+    prepared = _prepare_reader()
+    if prepared:
+        reader, iw, ih = prepared
+    else:
+        reader = None
+        iw = 0
+        ih = 0
+
+    if reader is None:
+        try:
+            reader = ImageReader(str(image_path))
             iw, ih = reader.getSize()
         except Exception:
             try:
-                pdf.drawImage(
-                    str(image_path),
-                    x,
-                    y,
-                    width,
-                    height,
-                    preserveAspectRatio=True,
-                    mask="auto",
-                )
-                return True
+                img = Image.open(image_path)
+                img.load()
+                if img.mode not in ("RGB", "L"):
+                    img = img.convert("RGB")
+                reader = ImageReader(img)
+                iw, ih = reader.getSize()
             except Exception:
-                return False
+                try:
+                    pdf.drawImage(
+                        str(image_path),
+                        x,
+                        y,
+                        width,
+                        height,
+                        preserveAspectRatio=True,
+                        mask="auto",
+                    )
+                    return True
+                except Exception:
+                    return False
     if iw <= 0 or ih <= 0:
         return False
     scale = min(width / iw, height / ih)
@@ -309,7 +451,8 @@ def render_report_pdf(
     red_200 = colors.HexColor("#fecaca")
 
     output_path.parent.mkdir(parents=True, exist_ok=True)
-    pdf = canvas.Canvas(str(output_path), pagesize=A4)
+    pdf = canvas.Canvas(str(output_path), pagesize=A4, pageCompression=1)
+    image_cache: Dict[Tuple[str, int, int], Tuple[ImageReader, int, int, BytesIO]] = {}
 
     uploads = (session.get("uploads") or {}).get("photos") or []
     by_id = {item.get("id"): item for item in uploads if item.get("id")}
@@ -435,7 +578,15 @@ def render_report_pdf(
         logo_y = header_y - (header_h + logo_h) / 2
         logo_drawn = False
         if default_logo:
-            logo_drawn = _draw_image_fit(pdf, default_logo, logo_x, logo_y, logo_w, logo_h)
+            logo_drawn = _draw_image_fit(
+                pdf,
+                default_logo,
+                logo_x,
+                logo_y,
+                logo_w,
+                logo_h,
+                image_cache=image_cache,
+            )
         if not logo_drawn:
             pdf.setStrokeColor(colors.red)
             pdf.setLineWidth(1)
@@ -460,6 +611,7 @@ def render_report_pdf(
                 client_logo_y,
                 client_logo_w,
                 client_logo_h,
+                image_cache=image_cache,
             )
         else:
             pdf.setStrokeColor(gray_200)
@@ -660,15 +812,14 @@ def render_report_pdf(
             y -= 3 * mm
             pdf.setFillColor(gray_50)
             pdf.setStrokeColor(gray_200)
-            cond_lines = _wrap_lines(
+            cond_lines, cond_font_size, cond_leading = _fit_wrapped_text(
                 pdf,
                 condition or "",
-                width - 2 * margin - 4 * mm,
-                4,
-                "Helvetica",
-                9,
+                width - 2 * margin - 8 * mm,
+                "Helvetica-Bold",
+                10.0,
             )
-            cond_h = max(10 * mm, (len(cond_lines) or 1) * leading + 4 * mm)
+            cond_h = max(10 * mm, (len(cond_lines) or 1) * cond_leading + 4 * mm)
             cond_bottom = y - cond_h
             pdf.rect(margin, cond_bottom, width - 2 * margin, cond_h, stroke=1, fill=1)
             pdf.setLineWidth(2)
@@ -682,9 +833,9 @@ def render_report_pdf(
                 text_center_x,
                 cond_bottom,
                 cond_h,
-                leading,
+                cond_leading,
                 "Helvetica-Bold",
-                10,
+                cond_font_size,
             )
             y = cond_bottom - 4 * mm
 
@@ -696,15 +847,14 @@ def render_report_pdf(
             y -= 3 * mm
             pdf.setFillColor(gray_50)
             pdf.setStrokeColor(gray_200)
-            action_lines = _wrap_lines(
+            action_lines, action_font_size, action_leading = _fit_wrapped_text(
                 pdf,
                 action or "",
-                width - 2 * margin - 4 * mm,
-                4,
-                "Helvetica",
-                9,
+                width - 2 * margin - 8 * mm,
+                "Helvetica-Bold",
+                10.0,
             )
-            action_h = max(10 * mm, (len(action_lines) or 1) * leading + 4 * mm)
+            action_h = max(10 * mm, (len(action_lines) or 1) * action_leading + 4 * mm)
             action_bottom = y - action_h
             pdf.rect(margin, action_bottom, width - 2 * margin, action_h, stroke=1, fill=1)
             pdf.setLineWidth(2)
@@ -718,9 +868,9 @@ def render_report_pdf(
                 text_center_x,
                 action_bottom,
                 action_h,
-                leading,
+                action_leading,
                 "Helvetica-Bold",
-                10,
+                action_font_size,
             )
             y = action_bottom - 4 * mm
         else:
@@ -784,6 +934,7 @@ def render_report_pdf(
                     image_y,
                     cell_w - 4 * mm,
                     image_h,
+                    image_cache=image_cache,
                 )
                 if caption_lines:
                     pdf.setFillColor(gray_500)

server/app/services/session_store.py

@@ -20,6 +20,9 @@ IMAGE_EXTS = {".jpg", ".jpeg", ".png", ".gif", ".webp"}
 DOC_EXTS = {".pdf", ".doc", ".docx"}
 DATA_EXTS = {".csv", ".xls", ".xlsx"}
 EXIF_NORMALIZE_EXTS = {".jpg", ".jpeg", ".png", ".webp"}
+UPLOAD_IMAGE_MAX_LONG_EDGE_PX = 2400
+UPLOAD_JPEG_QUALITY = 82
+UPLOAD_WEBP_QUALITY = 80
 SESSION_ID_RE = re.compile(r"^[0-9a-f]{32}$")
 BUILTIN_PAGE_TEMPLATES = [
     {
@@ -92,14 +95,42 @@ def _normalize_uploaded_photo(path: Path) -> None:
     try:
         with Image.open(path) as image:
             normalized = ImageOps.exif_transpose(image)
-            format_name = image.format
-            if normalized.mode in ("RGBA", "LA", "P") and format_name in {"JPEG", "JPG"}:
-                normalized = normalized.convert("RGB")
-            save_kwargs = {"exif": b""}
-            if format_name in {"JPEG", "JPG"}:
-                save_kwargs["quality"] = 95
-                save_kwargs["optimize"] = True
-            normalized.save(path, format=format_name, **save_kwargs)
+
+            resampling = getattr(Image, "Resampling", None)
+            lanczos = resampling.LANCZOS if resampling is not None else Image.LANCZOS
+            long_edge = max(normalized.width, normalized.height)
+            if long_edge > UPLOAD_IMAGE_MAX_LONG_EDGE_PX:
+                ratio = UPLOAD_IMAGE_MAX_LONG_EDGE_PX / float(long_edge)
+                normalized = normalized.resize(
+                    (
+                        max(1, int(round(normalized.width * ratio))),
+                        max(1, int(round(normalized.height * ratio))),
+                    ),
+                    lanczos,
+                )
+
+            if ext in {".jpg", ".jpeg"}:
+                if normalized.mode in ("RGBA", "LA", "P"):
+                    normalized = normalized.convert("RGB")
+                normalized.save(
+                    path,
+                    format="JPEG",
+                    quality=UPLOAD_JPEG_QUALITY,
+                    optimize=True,
+                    progressive=True,
+                    exif=b"",
+                )
+            elif ext == ".webp":
+                if normalized.mode not in ("RGB", "RGBA"):
+                    normalized = normalized.convert("RGB")
+                normalized.save(
+                    path,
+                    format="WEBP",
+                    quality=UPLOAD_WEBP_QUALITY,
+                    method=6,
+                )
+            else:  # png
+                normalized.save(path, format="PNG", optimize=True)
     except (UnidentifiedImageError, OSError, ValueError, TypeError):
         # Keep original bytes if the file cannot be decoded by Pillow.
         return