Refresh sections UI and templates

Normalize sections/headings storage and guard autosave to prevent headings flicker.
Improve Edit Layouts UX (collapsible sections, page counts, clearer controls).
Align job sheet templates in viewer/editor/PDF and remove the redundant 'Document No' label.
Add ImagePlacementPage scaffold.

frontend/public/templates/job-sheet-template.html

@@ -58,8 +58,15 @@
         </div>
 
         <div class="text-center leading-tight">
-          <h1 class="text-2xl font-bold text-gray-900 whitespace-nowrap">RepEx Inspection Job Sheet</h1>
-          <p class="text-sm text-gray-600 whitespace-nowrap">Report Express - Inspection Management</p>
+          <div class="text-base font-semibold text-gray-900 whitespace-nowrap">
+            <span
+              class="template-field"
+              contenteditable="true"
+              data-placeholder="Document No"
+              style="display:inline-block; min-width: 180px;"
+            ></span>
+          </div>
+          <div class="text-[10px] text-gray-500 whitespace-nowrap">Document No</div>
         </div>
 
         <div class="flex items-center justify-end">
@@ -128,7 +135,6 @@
           <div class="text-xs font-medium text-gray-500">Condition Description</div>
           <div class="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
             <p class="template-field template-field-multiline text-amber-800 text-sm font-semibold leading-snug" contenteditable="true" data-placeholder="Item description"></p>
-            <p class="template-field template-field-multiline text-amber-800 text-sm font-semibold leading-snug" contenteditable="true" data-placeholder="Condition description"></p>
           </div>
         </div>
 
@@ -136,7 +142,6 @@
         <div class="md:col-span-2 space-y-1">
           <div class="text-xs font-medium text-gray-500">Action Required</div>
           <div class="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
-            <p class="template-field template-field-multiline text-blue-800 text-sm font-semibold leading-snug" contenteditable="true" data-placeholder="Action type"></p>
             <p class="template-field template-field-multiline text-blue-800 text-sm font-semibold leading-snug" contenteditable="true" data-placeholder="Required action"></p>
           </div>
         </div>
@@ -207,11 +212,28 @@
     </section>
 
     <!-- Footer -->
-    <footer class="mt-2 text-[10px] text-gray-500 flex flex-wrap items-center justify-center gap-3">
-      <span>Date: <span class="template-field" contenteditable="true" data-placeholder="YYYY-MM-DD"></span></span>
-      <span>Inspector: <span class="template-field" contenteditable="true" data-placeholder="Inspector name"></span></span>
-      <span>Doc: <span class="template-field" contenteditable="true" data-placeholder="Document no"></span></span>
-      <span>Site: <span class="template-field" contenteditable="true" data-placeholder="Client or site"></span></span>
+    <footer class="mt-2 text-[10px] text-gray-500 flex flex-col items-center gap-1">
+      <div class="flex flex-wrap items-center justify-center gap-3">
+        <span>Date: <span class="template-field" contenteditable="true" data-placeholder="YYYY-MM-DD"></span></span>
+        <span>Inspector: <span class="template-field" contenteditable="true" data-placeholder="Inspector name"></span></span>
+        <span>Doc: <span class="template-field" contenteditable="true" data-placeholder="Document no"></span></span>
+      </div>
+      <div class="text-[10px] font-semibold text-gray-600">RepEx Inspection Job Sheet</div>
+      <div class="text-[10px] text-gray-500">
+        <span
+          class="template-field"
+          contenteditable="true"
+          data-placeholder="Section 1"
+          style="display:inline-block; min-width: 90px;"
+        ></span>
+        <span class="mx-1">-</span>
+        <span
+          class="template-field"
+          contenteditable="true"
+          data-placeholder="Page 1 of 1"
+          style="display:inline-block; min-width: 90px;"
+        ></span>
+      </div>
     </footer>
   </main>
 </body>

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import UploadPage from "./pages/UploadPage";
 import ProcessingPage from "./pages/ProcessingPage";
 import ReviewSetupPage from "./pages/ReviewSetupPage";
 import ReportViewerPage from "./pages/ReportViewerPage";
+import ImagePlacementPage from "./pages/ImagePlacementPage";
 import InputDataPage from "./pages/InputDataPage";
 import EditReportPage from "./pages/EditReportPage";
 import EditLayoutsPage from "./pages/EditLayoutsPage";
@@ -18,6 +19,7 @@ export default function App() {
         <Route path="/processing" element={<ProcessingPage />} />
         <Route path="/review-setup" element={<ReviewSetupPage />} />
         <Route path="/report-viewer" element={<ReportViewerPage />} />
+        <Route path="/image-placement" element={<ImagePlacementPage />} />
         <Route path="/input-data" element={<InputDataPage />} />
         <Route path="/edit-report" element={<EditReportPage />} />
         <Route path="/edit-layouts" element={<EditLayoutsPage />} />

frontend/src/components/JobSheetTemplate.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 
 import type { FileMeta, Session, TemplateFields } from "../types/session";
-import { formatDocNumber, getPhotosForPage } from "../lib/report";
+import { formatDocNumber } from "../lib/report";
 
 type JobSheetTemplateProps = {
   session: Session | null;
@@ -12,6 +12,7 @@ type JobSheetTemplateProps = {
   orderLocked?: boolean;
   variant?: "full" | "photos";
   sectionLabel?: string;
+  photoLayout?: "auto" | "two-column" | "stacked";
 };
 
 type PhotoSlotProps = {
@@ -264,37 +265,32 @@ export function JobSheetTemplate({
   orderLocked = false,
   variant = "full",
   sectionLabel,
+  photoLayout = "auto",
 }: JobSheetTemplateProps) {
   const inspectionDate =
     template?.inspection_date ?? session?.inspection_date ?? "";
   const inspector = template?.inspector ?? "";
   const docNumber =
-    template?.document_no ?? (session?.id ? formatDocNumber(session) : "");
-  const clientSite = template?.client_site ?? "";
+    template?.document_no ??
+    session?.document_no ??
+    (session?.id ? formatDocNumber(session) : "");
   const companyLogo = template?.company_logo ?? "";
+  const figureCaption = template?.figure_caption ?? "";
 
   const reference = template?.reference ?? "";
   const area = template?.area ?? "";
-  const actionType = template?.action_type ?? "";
   const itemDescription = template?.item_description ?? "";
   const functionalLocation = template?.functional_location ?? "";
   const category = template?.category ?? "";
   const priority = template?.priority ?? "";
-  const conditionDescription =
-    template?.condition_description ?? session?.notes ?? "";
   const requiredAction = template?.required_action ?? "";
 
-  const conditionText = [itemDescription, conditionDescription]
-    .filter((value) => value && value.trim())
-    .join(" - ");
-  const actionText = [actionType, requiredAction]
-    .filter((value) => value && value.trim())
-    .join(" - ");
+  const conditionText = itemDescription;
+  const actionText = requiredAction;
   const categoryBadge = formatRating(category, CATEGORY_SCALE);
   const priorityBadge = formatRating(priority, PRIORITY_SCALE);
 
-  const resolvedPhotos =
-    photos && photos.length ? photos : getPhotosForPage(session, pageIndex, 1);
+  const resolvedPhotos = photos && photos.length ? photos : [];
   const limitedPhotos = resolvedPhotos.slice(0, 6);
   const logoUrl = resolveLogoUrl(session, companyLogo);
   const [ratios, setRatios] = useState<Record<string, number>>({});
@@ -335,10 +331,19 @@ export function JobSheetTemplate({
   const displayedPhotos =
     variant === "full" ? orderedPhotos.slice(0, 2) : orderedPhotos;
 
+  const normalizedLayout = (photoLayout || "auto").toLowerCase();
+  const layoutMode =
+    normalizedLayout === "stacked" || normalizedLayout === "two-column"
+      ? normalizedLayout
+      : "auto";
   const photoGridClass =
-    displayedPhotos.length <= 1
+    layoutMode === "stacked"
       ? "grid grid-cols-1 gap-3"
-      : "grid grid-cols-2 gap-3";
+      : layoutMode === "two-column"
+        ? "grid grid-cols-2 gap-3"
+        : displayedPhotos.length <= 1
+          ? "grid grid-cols-1 gap-3"
+          : "grid grid-cols-2 gap-3";
 
   return (
     <div className="w-full h-full p-5 text-[11px] text-gray-700 flex flex-col">
@@ -351,10 +356,7 @@ export function JobSheetTemplate({
           />
           <div className="text-center leading-tight">
             <div className="text-base font-semibold text-gray-900">
-              RepEx Inspection Job Sheet
-            </div>
-            <div className="text-[11px] text-gray-500">
-              Page {pageIndex + 1} of {pageCount}
+              {docNumber || "-"}
             </div>
           </div>
           <img
@@ -468,7 +470,7 @@ export function JobSheetTemplate({
               <PhotoSlot
                 key={photo?.id || `${index}`}
                 url={photo?.url}
-                label={photo?.name || `Figure ${index + 1}`}
+                label={figureCaption || photo?.name || `Figure ${index + 1}`}
                 className="h-full"
                 imageClassName="h-full"
               />
@@ -477,12 +479,19 @@ export function JobSheetTemplate({
         </div>
       </section>
 
-      <footer className="mt-2 text-[10px] text-gray-500 flex flex-wrap items-center justify-center gap-3">
-        <span>Date: {inspectionDate || "-"}</span>
-        <span>Inspector: {inspector || "-"}</span>
-        <span>Doc: {docNumber || "-"}</span>
-        <span>Site: {clientSite || "-"}</span>
-        {sectionLabel ? <span>{sectionLabel}</span> : null}
+      <footer className="mt-2 text-[10px] text-gray-500 flex flex-col items-center gap-1">
+        <div className="flex flex-wrap items-center justify-center gap-3">
+          <span>Date: {inspectionDate || "-"}</span>
+          <span>Inspector: {inspector || "-"}</span>
+          <span>Doc: {docNumber || "-"}</span>
+        </div>
+        <div className="text-[10px] font-semibold text-gray-600">
+          RepEx Inspection Job Sheet
+        </div>
+        <div className="text-[10px] text-gray-500">
+          {sectionLabel ? `${sectionLabel} - ` : ""}
+          Page {pageIndex + 1} of {pageCount}
+        </div>
       </footer>
     </div>
   );

frontend/src/components/ReportPageCanvas.tsx

@@ -2,7 +2,7 @@ import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { CSSProperties } from "react";
 
 import type { FileMeta, Page, Session, TemplateFields } from "../types/session";
-import { BASE_H, BASE_W, getPhotosForPage } from "../lib/report";
+import { BASE_H, BASE_W } from "../lib/report";
 import { JobSheetTemplate } from "./JobSheetTemplate";
 
 type ReportPageCanvasProps = {
@@ -116,16 +116,17 @@ export function ReportPageCanvas({
               {page?.blank ? (
                 <div className="w-full h-full bg-white" />
               ) : (
-                <JobSheetTemplate
-                  session={session}
-                  pageIndex={pageIndex}
-                  pageCount={pageCount}
-                  template={template}
-                  photos={sheetPhotos}
-                  orderLocked={page?.photo_order_locked ?? false}
-                  variant={pageVariant}
-                  sectionLabel={sectionLabel}
-                />
+                  <JobSheetTemplate
+                    session={session}
+                    pageIndex={pageIndex}
+                    pageCount={pageCount}
+                    template={template}
+                    photos={sheetPhotos}
+                    orderLocked={page?.photo_order_locked ?? false}
+                    variant={pageVariant}
+                    sectionLabel={sectionLabel}
+                    photoLayout={page?.photo_layout}
+                  />
               )}
             </div>
           </div>
@@ -209,5 +210,5 @@ function resolvePagePhotos(
   if (explicit.length) {
     return explicit.map((id) => byId.get(id)).filter(Boolean) as FileMeta[];
   }
-  return getPhotosForPage(session, pageIndex, 1);
+  return [];
 }

frontend/src/components/report-editor.js

@@ -62,6 +62,7 @@ class ReportEditor extends HTMLElement {
     this.sessionId = null;
     this.apiBase = null;
     this._saveTimer = null;
+    this._savingPromise = null;
     this._photoRatios = new Map();
     this._indexMap = [];
   }
@@ -164,6 +165,14 @@ class ReportEditor extends HTMLElement {
     this.dispatchEvent(new CustomEvent("editor-closed", { bubbles: true }));
   }
 
+  async flushSave() {
+    if (this._saveTimer) {
+      clearTimeout(this._saveTimer);
+      this._saveTimer = null;
+    }
+    return this._savePagesToServer();
+  }
+
   // ---------- Rendering ----------
   render() {
     this.innerHTML = `
@@ -194,10 +203,9 @@ class ReportEditor extends HTMLElement {
                   <i data-feather="rotate-cw" class="h-4 w-4"></i> Redo
                 </button>
 
-                <button data-btn="save"
-                  class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-3 py-2 text-sm font-semibold text-white hover:bg-emerald-700 transition">
-                  <i data-feather="save" class="h-4 w-4"></i> Save
-                </button>
+                <div class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm font-semibold text-gray-600">
+                  <i data-feather="check-circle" class="h-4 w-4"></i> Auto-saved
+                </div>
 
                 <button data-btn="close"
                   class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition">
@@ -445,7 +453,6 @@ class ReportEditor extends HTMLElement {
 
     // header buttons
     this.querySelector('[data-btn="close"]').addEventListener("click", () => this.close());
-    this.querySelector('[data-btn="save"]').addEventListener("click", () => this._savePages(true));
     this.querySelector('[data-btn="undo"]').addEventListener("click", () => this.undo());
     this.querySelector('[data-btn="redo"]').addEventListener("click", () => this.redo());
 
@@ -605,14 +612,61 @@ class ReportEditor extends HTMLElement {
     this.$canvas.querySelectorAll("[data-template-field]").forEach((el) => {
       const key = el.dataset.templateField;
       if (!key) return;
-      const value = template[key] || "";
-      if (document.activeElement !== el && el.textContent !== value) {
-        el.textContent = value;
+      const isScale = key === "category" || key === "priority";
+      const rawValue = template[key] || "";
+      const displayValue = isScale
+        ? buildScaleBadge(
+            rawValue,
+            key === "category" ? CATEGORY_SCALE : PRIORITY_SCALE,
+          ).text
+        : rawValue;
+
+      if (document.activeElement !== el) {
+        if (displayValue) {
+          if (el.textContent !== displayValue) {
+            el.textContent = displayValue;
+          }
+        }
       }
-      el.oninput = () => {
-        template[key] = el.textContent || "";
+
+      const commitValue = () => {
+        const nextText = el.textContent || "";
+        if (isScale) {
+          const code = parseScaleCode(nextText);
+          template[key] = code || nextText;
+        } else {
+          template[key] = nextText;
+        }
+        if (this.$canvas) {
+          const nextDisplay = isScale
+            ? buildScaleBadge(
+                template[key],
+                key === "category" ? CATEGORY_SCALE : PRIORITY_SCALE,
+              ).text
+            : template[key] || "";
+          if (nextDisplay) {
+            this.$canvas
+              .querySelectorAll(`[data-template-field="${key}"]`)
+              .forEach((node) => {
+                if (node === el || document.activeElement === node) return;
+                if (node.textContent !== nextDisplay) {
+                  node.textContent = nextDisplay;
+                }
+              });
+          }
+        }
         this._savePages();
       };
+
+      el.oninput = () => {
+        commitValue();
+      };
+      el.onblur = () => {
+        commitValue();
+        if (isScale) {
+          this.renderCanvas();
+        }
+      };
       el.onpointerdown = (e) => {
         e.stopPropagation();
       };
@@ -622,6 +676,28 @@ class ReportEditor extends HTMLElement {
         }
       };
     });
+    this._bindTemplateSelects();
+  }
+
+  _bindTemplateSelects() {
+    if (!this.$canvas) return;
+    const template = this._getTemplate();
+    this.$canvas.querySelectorAll("[data-template-select]").forEach((el) => {
+      const key = el.dataset.templateSelect;
+      if (!key) return;
+      const current = template[key] || "";
+      if (el.value !== String(current)) {
+        el.value = String(current);
+      }
+      el.onchange = () => {
+        template[key] = el.value;
+        this._savePages();
+        this.renderCanvas();
+      };
+      el.onpointerdown = (e) => {
+        e.stopPropagation();
+      };
+    });
   }
 
   _escape(value) {
@@ -767,10 +843,7 @@ class ReportEditor extends HTMLElement {
     if (explicit.length) {
       return explicit.map((id) => byId.get(id)).filter(Boolean);
     }
-    const selected = this._selectedPhotos(session);
-    const perPage = 1;
-    const start = this.state.activePage * perPage;
-    return selected.slice(start, start + perPage);
+    return [];
   }
 
   _photoSlot(photo, fallbackLabel) {
@@ -782,21 +855,43 @@ class ReportEditor extends HTMLElement {
         </div>
       `;
     }
-    const label = this._escape(photo.name || fallbackLabel);
+    const label = this._escape(fallbackLabel || photo.name || "");
     const safeUrl = this._escape(url);
+    const caption = this._tplField(
+      "figure_caption",
+      fallbackLabel || photo.name || "",
+      "Figure caption",
+      "text-[10px] text-gray-600 text-center w-full",
+      false,
+      true,
+    );
     return `
       <figure class="rounded-lg border border-gray-200 bg-gray-50 p-2 break-inside-avoid mb-3">
         <img src="${safeUrl}" alt="${label}" class="w-full h-auto object-contain" />
-        <figcaption class="mt-1 text-[10px] text-gray-600 text-center">${label}</figcaption>
+        <figcaption class="mt-1 text-[10px] text-gray-600 text-center">${caption}</figcaption>
       </figure>
     `;
   }
 
-  _tplField(key, value, placeholder, className = "", multiline = false) {
+  _tplField(key, value, placeholder, className = "", multiline = false, inline = false) {
     const safeValue = this._escape(value || "");
     const safePlaceholder = this._escape(placeholder || "");
     const multiAttr = multiline ? ' data-multiline="true"' : "";
-    return `<div class="template-field ${className}" data-template-field="${key}" contenteditable="true" data-placeholder="${safePlaceholder}"${multiAttr}>${safeValue}</div>`;
+    const inlineAttr = inline ? ' style="display:inline-block;"' : "";
+    return `<div class="template-field ${className}" data-template-field="${key}" contenteditable="true" data-placeholder="${safePlaceholder}"${multiAttr}${inlineAttr}>${safeValue}</div>`;
+  }
+
+  _tplSelectField(key, value, options, className = "") {
+    const safeValue = this._escape(value || "");
+    const optionHtml = options
+      .map((option) => {
+        const optValue = this._escape(option.value);
+        const optLabel = this._escape(option.label);
+        const selected = optValue === safeValue ? " selected" : "";
+        return `<option value="${optValue}"${selected}>${optLabel}</option>`;
+      })
+      .join("");
+    return `<select class="template-select ${className}" data-template-select="${key}"><option value="">Select</option>${optionHtml}</select>`;
   }
 
   _templateMarkup() {
@@ -809,19 +904,19 @@ class ReportEditor extends HTMLElement {
     const inspector = template.inspector || "";
     const docNumber =
       template.document_no ||
+      session.document_no ||
       (session.id ? `REP-${String(session.id).slice(0, 8).toUpperCase()}` : "");
-    const clientSite = template.client_site || "";
     const companyLogo = template.company_logo || "";
+    const figureCaption = template.figure_caption || "";
 
     const reference = template.reference || "";
     const area = template.area || "";
-    const actionType = template.action_type || "";
     const itemDescription = template.item_description || "";
     const functionalLocation = template.functional_location || "";
-    const category = template.category || "";
-    const priority = template.priority || "";
-    const conditionDescription =
-      template.condition_description || session.notes || "";
+    const categoryRaw = template.category || "";
+    const priorityRaw = template.priority || "";
+    const category = parseScaleCode(categoryRaw) || categoryRaw;
+    const priority = parseScaleCode(priorityRaw) || priorityRaw;
     const requiredAction = template.required_action || "";
 
     const categoryScale = {
@@ -841,6 +936,14 @@ class ReportEditor extends HTMLElement {
     };
     const categoryBadge = this._ratingBadge(category, categoryScale);
     const priorityBadge = this._ratingBadge(priority, priorityScale);
+    const categoryOptions = ["0", "1", "2", "3", "4", "5"].map((key) => ({
+      value: key,
+      label: `${key} - ${categoryScale[key].label}`,
+    }));
+    const priorityOptions = ["1", "2", "3", "X", "M"].map((key) => ({
+      value: key,
+      label: `${key} - ${priorityScale[key].label}`,
+    }));
 
     const variant =
       (this.activePage && this.activePage.variant) || "full";
@@ -852,10 +955,26 @@ class ReportEditor extends HTMLElement {
       : this._computePhotoLayout(photos).map((entry) => entry.photo);
     const displayedPhotos =
       variant === "full" ? orderedPhotos.slice(0, 2) : orderedPhotos;
-    const photoColumnsClass = displayedPhotos.length <= 1 ? "columns-1" : "columns-2";
+    const photoLayout =
+      (this.activePage && this.activePage.photo_layout) || "auto";
+    const normalizedLayout = String(photoLayout).toLowerCase();
+    const layoutMode =
+      normalizedLayout === "stacked" || normalizedLayout === "two-column"
+        ? normalizedLayout
+        : "auto";
+    const photoColumnsClass =
+      layoutMode === "stacked"
+        ? "columns-1"
+        : layoutMode === "two-column"
+          ? "columns-2"
+          : displayedPhotos.length <= 1
+            ? "columns-1"
+            : "columns-2";
     const photoSlots = displayedPhotos.length
       ? displayedPhotos
-          .map((photo, idx) => this._photoSlot(photo, `Figure ${idx + 1}`))
+          .map((photo, idx) =>
+            this._photoSlot(photo, figureCaption || `Figure ${idx + 1}`),
+          )
           .join("")
       : this._photoSlot(null, "No photo selected");
     const pageNum = this.state.activePage + 1;
@@ -891,21 +1010,21 @@ class ReportEditor extends HTMLElement {
               <div class="inline-flex items-center gap-6">
                 <div class="text-center space-y-1">
                   <div class="text-xs font-medium text-gray-500">Category</div>
-                  ${this._tplField(
+                  ${this._tplSelectField(
                     "category",
-                    categoryBadge.text,
-                    "Category",
-                    `inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold min-w-[120px] ${categoryBadge.className}`,
+                    category,
+                    categoryOptions,
+                    `min-w-[140px] rounded-md border px-3 py-1 text-sm font-semibold text-center ${categoryBadge.className}`,
                   )}
                 </div>
 
                 <div class="text-center space-y-1">
                   <div class="text-xs font-medium text-gray-500">Priority</div>
-                  ${this._tplField(
+                  ${this._tplSelectField(
                     "priority",
-                    priorityBadge.text,
-                    "Priority",
-                    `inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold min-w-[120px] ${priorityBadge.className}`,
+                    priority,
+                    priorityOptions,
+                    `min-w-[140px] rounded-md border px-3 py-1 text-sm font-semibold text-center ${priorityBadge.className}`,
                   )}
                 </div>
 
@@ -914,19 +1033,17 @@ class ReportEditor extends HTMLElement {
 
             <div class="md:col-span-2 space-y-1">
               <div class="text-xs font-medium text-gray-500">Condition Description</div>
-              <div class="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
-                <div class="text-amber-800 text-sm font-semibold leading-snug">
-                  ${this._tplField("item_description", itemDescription, "Item description", "template-field-multiline text-amber-800 text-sm font-semibold leading-snug", true)}
-                  ${this._tplField("condition_description", conditionDescription, "Condition description", "template-field-multiline text-amber-800 text-sm font-semibold leading-snug", true)}
+                <div class="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
+                  <div class="text-amber-800 text-sm font-semibold leading-snug">
+                    ${this._tplField("item_description", itemDescription, "Item description", "template-field-multiline text-amber-800 text-sm font-semibold leading-snug", true)}
+                  </div>
                 </div>
-              </div>
             </div>
 
             <div class="md:col-span-2 space-y-1">
               <div class="text-xs font-medium text-gray-500">Action Required</div>
               <div class="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
                 <div class="text-blue-800 text-sm font-semibold leading-snug">
-                  ${this._tplField("action_type", actionType, "Action type", "template-field-multiline text-blue-800 text-sm font-semibold leading-snug", true)}
                   ${this._tplField("required_action", requiredAction, "Required action", "template-field-multiline text-blue-800 text-sm font-semibold leading-snug", true)}
                 </div>
               </div>
@@ -947,8 +1064,12 @@ class ReportEditor extends HTMLElement {
             </div>
 
             <div class="text-center leading-tight">
-              <h1 class="text-2xl font-bold text-gray-900 whitespace-nowrap">RepEx Inspection Job Sheet</h1>
-              <p class="text-sm text-gray-600 whitespace-nowrap">Report Express - Inspection Management</p>
+              ${this._tplField(
+                "document_no",
+                docNumber,
+                "Document No",
+                "text-base font-semibold text-gray-900 whitespace-nowrap",
+              )}
             </div>
 
             <div class="flex items-center justify-end">
@@ -969,12 +1090,48 @@ class ReportEditor extends HTMLElement {
           </div>
         </section>
 
-        <footer class="mt-2 text-[10px] text-gray-500 flex flex-wrap items-center justify-center gap-3">
-          <span>Date: ${this._escape(inspectionDate || "-")}</span>
-          <span>Inspector: ${this._escape(inspector || "-")}</span>
-          <span>Doc: ${this._escape(docNumber || "-")}</span>
-          <span>Site: ${this._escape(clientSite || "-")}</span>
-          ${sectionLabel ? `<span>${this._escape(sectionLabel)}</span>` : ""}
+        <footer class="mt-2 text-[10px] text-gray-500 flex flex-col items-center gap-1">
+          <div class="flex flex-wrap items-center justify-center gap-3">
+            <div class="flex items-center gap-1">
+              <span>Date:</span>
+              ${this._tplField(
+                "inspection_date",
+                inspectionDate,
+                "Date",
+                "text-[10px] text-gray-500",
+                false,
+                true,
+              )}
+            </div>
+            <div class="flex items-center gap-1">
+              <span>Inspector:</span>
+              ${this._tplField(
+                "inspector",
+                inspector,
+                "Inspector",
+                "text-[10px] text-gray-500",
+                false,
+                true,
+              )}
+            </div>
+            <div class="flex items-center gap-1">
+              <span>Doc:</span>
+              ${this._tplField(
+                "document_no",
+                docNumber,
+                "Document No",
+                "text-[10px] text-gray-500",
+                false,
+                true,
+              )}
+            </div>
+          </div>
+          <div class="text-[10px] font-semibold text-gray-600">
+            RepEx Inspection Job Sheet
+          </div>
+          <div class="text-[10px] text-gray-500">
+            ${sectionLabel ? `${this._escape(sectionLabel)} - ` : ""}Page ${pageNum} of ${pageCount}
+          </div>
         </footer>
       </div>
     `;
@@ -1037,23 +1194,46 @@ class ReportEditor extends HTMLElement {
     this._saveTimer = setTimeout(() => {
       this._savePagesToServer();
     }, 800);
+    this.dispatchEvent(new CustomEvent("editor-save-queued", { bubbles: true }));
   }
 
   async _savePagesToServer() {
     const base = this._apiRoot();
     if (!base || !this.sessionId) return;
-    try {
-      this._syncSectionsFromPages();
-      const res = await fetch(`${base}/sessions/${this.sessionId}/sections`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ sections: this.state.sections }),
-      });
-      if (!res.ok) {
-        throw new Error("Failed");
+    if (this._savingPromise) {
+      return this._savingPromise;
+    }
+    const promise = (async () => {
+      this.dispatchEvent(new CustomEvent("editor-save-start", { bubbles: true }));
+      let ok = false;
+      try {
+        this._syncSectionsFromPages();
+        const res = await fetch(`${base}/sessions/${this.sessionId}/sections`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ sections: this.state.sections }),
+        });
+        if (!res.ok) {
+          throw new Error("Failed");
+        }
+        ok = true;
+      } catch {
+        this._toast("Sync failed");
+      } finally {
+        this.dispatchEvent(
+          new CustomEvent("editor-save-end", {
+            bubbles: true,
+            detail: { ok },
+          }),
+        );
       }
-    } catch {
-      this._toast("Sync failed");
+      return ok;
+    })();
+    this._savingPromise = promise;
+    try {
+      return await promise;
+    } finally {
+      this._savingPromise = null;
     }
   }
 
@@ -1091,6 +1271,7 @@ class ReportEditor extends HTMLElement {
       items: [],
       template: source.template ? { ...source.template } : undefined,
       photo_ids: photoIds,
+      photo_layout: source.photo_layout,
       photo_order_locked: source.photo_order_locked,
       variant: "photos",
     };

frontend/src/lib/sections.ts

@@ -26,6 +26,7 @@ function buildPhotoContinuation(source: Page, photoIds: string[]): Page {
     items: [],
     template: cloneTemplate(source.template),
     photo_ids: photoIds,
+    photo_layout: source.photo_layout,
     photo_order_locked: source.photo_order_locked,
     variant: "photos",
   };

frontend/src/pages/EditLayoutsPage.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useState } from "react";
-import { Link, useSearchParams } from "react-router-dom";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import {
   ArrowLeft,
   ChevronDown,
@@ -8,6 +8,7 @@ import {
   Edit3,
   Grid,
   Layout,
+  Image,
   Plus,
   Table,
   Trash2,
@@ -15,7 +16,7 @@ import {
 
 import { putJson, request } from "../lib/api";
 import { BASE_W } from "../lib/report";
-import { ensureSections, flattenSections } from "../lib/sections";
+import { ensureSections, flattenSections, replacePage } from "../lib/sections";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
 import type { JobsheetSection, Session } from "../types/session";
 import { PageFooter } from "../components/PageFooter";
@@ -28,12 +29,23 @@ export default function EditLayoutsPage() {
   const [searchParams] = useSearchParams();
   const sessionId = getSessionId(searchParams.toString());
   const sessionQuery = buildSessionQuery(sessionId);
+  const navigate = useNavigate();
 
   const [session, setSession] = useState<Session | null>(null);
   const [sections, setSections] = useState<JobsheetSection[]>([]);
   const [status, setStatus] = useState("");
   const [isSaving, setIsSaving] = useState(false);
+  const [saveState, setSaveState] = useState<
+    "saved" | "saving" | "pending" | "error"
+  >("saved");
+  const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>(
+    {},
+  );
   const canModify = Boolean(sessionId) && !isSaving;
+  const saveTimerRef = useRef<number | null>(null);
+  const savePromiseRef = useRef<Promise<void> | null>(null);
+  const lastSavedRef = useRef<string>("");
+  const pendingSaveRef = useRef<string>("");
 
   useEffect(() => {
     if (!sessionId) {
@@ -48,7 +60,11 @@ export default function EditLayoutsPage() {
         const sectionResp = await request<{ sections: JobsheetSection[] }>(
           `/sessions/${sessionId}/sections`,
         );
-        setSections(ensureSections(sectionResp.sections));
+        const normalized = ensureSections(sectionResp.sections);
+        setSections(normalized);
+        lastSavedRef.current = JSON.stringify(normalized);
+        pendingSaveRef.current = lastSavedRef.current;
+        setSaveState("saved");
       } catch (err) {
         const message =
           err instanceof Error ? err.message : "Failed to load session.";
@@ -66,9 +82,31 @@ export default function EditLayoutsPage() {
     () => Math.max(1, flatPages.length),
     [flatPages.length],
   );
+  const totalSections = sections.length;
   const previewWidth = 220;
   const previewScale = previewWidth / BASE_W;
 
+  const PHOTO_LAYOUT_PRESETS = [
+    {
+      id: "auto",
+      label: "Auto fit",
+      description: "Let the system choose 1 or 2 columns per page.",
+      preview: "auto",
+    },
+    {
+      id: "two-column",
+      label: "Two column",
+      description: "Force a two-column photo grid.",
+      preview: "two-column",
+    },
+    {
+      id: "stacked",
+      label: "Stacked",
+      description: "Stack images vertically for tall photos.",
+      preview: "stacked",
+    },
+  ] as const;
+
   function hasExplicitPhotos(source: JobsheetSection[]) {
     return source.some((section) =>
       (section.pages ?? []).some((page) => (page.photo_ids ?? []).length > 0),
@@ -91,40 +129,100 @@ export default function EditLayoutsPage() {
     return result;
   }
 
-  async function saveLayout(next: JobsheetSection[], nextSelectedIds?: string[]) {
+  async function triggerAutoSave() {
+    if (!sessionId || savePromiseRef.current) return;
+    const snapshot = pendingSaveRef.current;
+    if (!snapshot || snapshot === lastSavedRef.current) return;
+    await saveLayout(sections, undefined, true);
+  }
+
+  useEffect(() => {
     if (!sessionId) return;
-    setIsSaving(true);
-    setStatus("Saving layout changes...");
-    try {
-      const requests: Promise<unknown>[] = [
-        putJson<{ sections: JobsheetSection[] }>(
-          `/sessions/${sessionId}/sections`,
-          { sections: next },
-        ),
-      ];
-      if (nextSelectedIds !== undefined) {
-        requests.push(
-          putJson<Session>(`/sessions/${sessionId}/selection`, {
-            selected_photo_ids: nextSelectedIds,
-          }),
-        );
+    const snapshot = JSON.stringify(sections);
+    if (snapshot === lastSavedRef.current) {
+      if (!isSaving) setSaveState("saved");
+      return;
+    }
+    pendingSaveRef.current = snapshot;
+    if (!isSaving) setSaveState("pending");
+    if (saveTimerRef.current) window.clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = window.setTimeout(() => {
+      void triggerAutoSave();
+    }, 800);
+  }, [sections, sessionId, isSaving]);
+
+  async function saveLayout(
+    next: JobsheetSection[],
+    nextSelectedIds?: string[],
+    silent = false,
+  ) {
+    if (!sessionId) return;
+    if (savePromiseRef.current) {
+      await savePromiseRef.current;
+    }
+    const snapshot = JSON.stringify(next);
+    if (snapshot === lastSavedRef.current && nextSelectedIds === undefined) {
+      if (!isSaving) setSaveState("saved");
+      return;
+    }
+    const promise = (async () => {
+      setIsSaving(true);
+      setSaveState("saving");
+      if (!silent) {
+        setStatus("Saving layout changes...");
       }
-      const [pagesResp, sessionResp] = await Promise.all(requests);
-      const updatedSections =
-        (pagesResp as { sections?: JobsheetSection[] }).sections ?? next;
-      const updatedSession = sessionResp as Session | undefined;
-      const updated = ensureSections(updatedSections);
-      setSections(updated);
-      if (updatedSession) {
-        setSession(updatedSession);
+      try {
+        const requests: Promise<unknown>[] = [
+          putJson<{ sections: JobsheetSection[] }>(
+            `/sessions/${sessionId}/sections`,
+            { sections: next },
+          ),
+        ];
+        if (nextSelectedIds !== undefined) {
+          requests.push(
+            putJson<Session>(`/sessions/${sessionId}/selection`, {
+              selected_photo_ids: nextSelectedIds,
+            }),
+          );
+        }
+        const [pagesResp, sessionResp] = await Promise.all(requests);
+        const updatedSections =
+          (pagesResp as { sections?: JobsheetSection[] }).sections ?? next;
+        const updatedSession = sessionResp as Session | undefined;
+        const updated = ensureSections(updatedSections);
+        setSections(updated);
+        lastSavedRef.current = JSON.stringify(updated);
+        pendingSaveRef.current = lastSavedRef.current;
+        setSaveState("saved");
+        if (updatedSession) {
+          setSession(updatedSession);
+        }
+        if (!silent) {
+          setStatus("Layout saved.");
+        }
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : "Failed to save layout.";
+        setStatus(message);
+        setSaveState("error");
+      } finally {
+        setIsSaving(false);
+        if (
+          pendingSaveRef.current &&
+          pendingSaveRef.current !== lastSavedRef.current
+        ) {
+          if (saveTimerRef.current) window.clearTimeout(saveTimerRef.current);
+          saveTimerRef.current = window.setTimeout(() => {
+            void triggerAutoSave();
+          }, 200);
+        }
       }
-      setStatus("Layout saved.");
-    } catch (err) {
-      const message =
-        err instanceof Error ? err.message : "Failed to save layout.";
-      setStatus(message);
+    })();
+    savePromiseRef.current = promise;
+    try {
+      await promise;
     } finally {
-      setIsSaving(false);
+      savePromiseRef.current = null;
     }
   }
 
@@ -140,6 +238,21 @@ export default function EditLayoutsPage() {
     await saveLayout(next);
   }
 
+  function toggleSection(sectionId: string) {
+    setCollapsedSections((prev) => ({
+      ...prev,
+      [sectionId]: !prev[sectionId],
+    }));
+  }
+
+  function setAllSectionsCollapsed(value: boolean) {
+    const next: Record<string, boolean> = {};
+    sections.forEach((section) => {
+      next[section.id] = value;
+    });
+    setCollapsedSections(next);
+  }
+
   async function handleAddPage(sectionIndex: number) {
     const next = sections.map((section, idx) => {
       if (idx !== sectionIndex) return section;
@@ -195,15 +308,88 @@ export default function EditLayoutsPage() {
     await saveLayout(next);
   }
 
+  function applyPhotoLayout(
+    sectionIndex: number,
+    pageIndex: number,
+    layout: "auto" | "two-column" | "stacked",
+  ) {
+    if (!canModify) return;
+    setSections((prev) => {
+      const section = prev[sectionIndex];
+      const page = section?.pages?.[pageIndex];
+      if (!section || !page) return prev;
+      const nextPage = { ...page, photo_layout: layout };
+      return replacePage(prev, sectionIndex, pageIndex, nextPage);
+    });
+    setStatus(`Applied ${layout.replace("-", " ")} layout to page ${pageIndex + 1}.`);
+  }
+
+  async function saveAndNavigate(target: string) {
+    if (!sessionId) {
+      navigate(target);
+      return;
+    }
+    if (saveTimerRef.current) {
+      window.clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+    const snapshot = JSON.stringify(sections);
+    pendingSaveRef.current = snapshot;
+    if (snapshot !== lastSavedRef.current || savePromiseRef.current) {
+      await saveLayout(sections, undefined, true);
+    }
+    navigate(target);
+  }
+
+  const saveIndicator = useMemo(() => {
+    const base =
+      "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold";
+    if (saveState === "saving") {
+      return (
+        <div className={`${base} border-amber-200 bg-amber-50 text-amber-700`}>
+          <span className="h-2 w-2 rounded-full bg-amber-500 animate-pulse" />
+          Saving...
+        </div>
+      );
+    }
+    if (saveState === "pending") {
+      return (
+        <div className={`${base} border-amber-200 bg-amber-50 text-amber-700`}>
+          <span className="h-2 w-2 rounded-full bg-amber-500" />
+          Unsaved changes
+        </div>
+      );
+    }
+    if (saveState === "error") {
+      return (
+        <div className={`${base} border-red-200 bg-red-50 text-red-700`}>
+          <span className="h-2 w-2 rounded-full bg-red-500" />
+          Save failed
+        </div>
+      );
+    }
+    return (
+      <div className={`${base} border-emerald-200 bg-emerald-50 text-emerald-700`}>
+        <span className="h-2 w-2 rounded-full bg-emerald-500" />
+        All changes saved
+      </div>
+    );
+  }, [saveState]);
+
   return (
     <PageShell>
       <PageHeader
         title="RepEx - Report Express"
         subtitle="Edit Page Layouts"
         right={
-          <div className="flex items-center gap-2">
+          <div className="flex flex-col items-end gap-2 sm:flex-row sm:items-center">
+            {saveIndicator}
             <Link
               to={`/report-viewer${sessionQuery}`}
+              onClick={(event) => {
+                event.preventDefault();
+                void saveAndNavigate(`/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"
             >
               <ArrowLeft className="h-4 w-4" />
@@ -218,6 +404,10 @@ export default function EditLayoutsPage() {
         <div className="flex flex-wrap gap-2">
           <Link
             to={`/input-data${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Table className="h-4 w-4" />
@@ -226,14 +416,34 @@ export default function EditLayoutsPage() {
 
           <Link
             to={`/report-viewer${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Layout className="h-4 w-4" />
             Report Viewer
           </Link>
 
+          <Link
+            to={`/image-placement${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
+          >
+            <Image className="h-4 w-4" />
+            Image Placement
+          </Link>
+
           <Link
             to={`/edit-report${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Edit3 className="h-4 w-4" />
@@ -247,6 +457,10 @@ export default function EditLayoutsPage() {
 
           <Link
             to={`/export${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Download className="h-4 w-4" />
@@ -262,8 +476,26 @@ export default function EditLayoutsPage() {
             <p className="text-sm text-gray-600">
               Add, remove, or reorder pages, then return to the report viewer to edit content.
             </p>
+            <div className="mt-2 text-xs text-gray-500">
+              {totalSections} section{totalSections === 1 ? "" : "s"} -{" "}
+              {totalPages} page{totalPages === 1 ? "" : "s"}
+            </div>
           </div>
           <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => setAllSectionsCollapsed(true)}
+              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-700 hover:bg-gray-50 transition"
+            >
+              Collapse all
+            </button>
+            <button
+              type="button"
+              onClick={() => setAllSectionsCollapsed(false)}
+              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-700 hover:bg-gray-50 transition"
+            >
+              Expand all
+            </button>
             <button
               type="button"
               onClick={handleAddSection}
@@ -280,110 +512,217 @@ export default function EditLayoutsPage() {
         ) : null}
       </section>
 
-      <section className="space-y-6">
-        {sections.map((section, sectionIndex) => (
-          <div key={section.id} className="rounded-lg border border-gray-200 bg-white p-4">
-          <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
-            <div>
-              <div className="text-xs font-semibold text-gray-500">Section {sectionIndex + 1}</div>
-              <input
-                type="text"
-                value={section.title ?? ""}
-                onChange={(event) =>
-                  setSections((prev) =>
-                    prev.map((item, idx) =>
-                      idx === sectionIndex ? { ...item, title: event.target.value } : item,
-                    ),
-                  )
-                }
-                placeholder={`Section ${sectionIndex + 1}`}
-                className="mt-1 w-60 rounded-md border border-gray-200 px-2 py-1 text-sm font-semibold text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200"
-              />
-              <div className="text-xs text-gray-500">
-                {section.pages?.length ?? 0} pages
+      <section className="mb-6 rounded-lg border border-gray-200 bg-white p-4">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900">
+              Image Layout Presets
+            </h2>
+            <p className="text-sm text-gray-600">
+              Drag a preset onto a page to set how photos are arranged.
+            </p>
+          </div>
+        </div>
+        <div className="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3">
+          {PHOTO_LAYOUT_PRESETS.map((preset) => (
+            <div
+              key={preset.id}
+              draggable
+              onDragStart={(event) => {
+                event.dataTransfer.setData("text/plain", preset.id);
+                event.dataTransfer.effectAllowed = "copy";
+              }}
+              className="rounded-lg border border-gray-200 bg-gray-50 p-3 cursor-grab active:cursor-grabbing"
+            >
+              <div className="text-sm font-semibold text-gray-900">
+                {preset.label}
+              </div>
+              <div className="text-xs text-gray-600">{preset.description}</div>
+              <div className="mt-2">
+                {preset.preview === "stacked" ? (
+                  <div className="grid grid-cols-1 gap-1">
+                    <div className="h-6 rounded bg-gray-200" />
+                    <div className="h-6 rounded bg-gray-200" />
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-2 gap-1">
+                    <div className="h-6 rounded bg-gray-200" />
+                    <div className="h-6 rounded bg-gray-200" />
+                  </div>
+                )}
+              </div>
+              <div className="mt-2 text-[11px] text-gray-500">
+                Drag to apply
               </div>
             </div>
-              <button
-                type="button"
-                onClick={() => handleAddPage(sectionIndex)}
-                disabled={!canModify}
-                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 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                <Plus className="h-4 w-4" />
-                Add page
-              </button>
-            </div>
+          ))}
+        </div>
+      </section>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {(section.pages ?? []).map((page, pageIndex) => (
-                <div
-                  key={`${section.id}-page-${pageIndex}`}
-                  className="rounded-lg border border-gray-200 bg-white p-3"
-                >
-                  <div className="flex items-center justify-between mb-2">
-                    <div>
-                      <div className="text-sm font-semibold text-gray-900">
-                        Page {pageIndex + 1}
-                      </div>
-                      <div className="text-xs text-gray-500">
-                        {page.items?.length ?? 0} items
+      <section className="space-y-6">
+        {sections.map((section, sectionIndex) => {
+          const isCollapsed = collapsedSections[section.id] ?? false;
+          const pageCount = section.pages?.length ?? 0;
+          const start =
+            sections
+              .slice(0, sectionIndex)
+              .reduce((sum, item) => sum + (item.pages?.length ?? 0), 0) + 1;
+          const end = Math.max(start, start + pageCount - 1);
+          return (
+            <div key={section.id} className="rounded-lg border border-gray-200 bg-white p-4">
+              <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
+                <div>
+                  <div className="text-xs font-semibold text-gray-500">
+                    Section {sectionIndex + 1}
+                  </div>
+                  <input
+                    type="text"
+                    value={section.title ?? ""}
+                    onChange={(event) =>
+                      setSections((prev) =>
+                        prev.map((item, idx) =>
+                          idx === sectionIndex
+                            ? { ...item, title: event.target.value }
+                            : item,
+                        ),
+                      )
+                    }
+                    placeholder={`Section ${sectionIndex + 1}`}
+                    className="mt-1 w-60 rounded-md border border-gray-200 px-2 py-1 text-sm font-semibold text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200"
+                  />
+                  <div className="text-xs text-gray-500">
+                    {pageCount} page{pageCount === 1 ? "" : "s"} - Pages {start}
+                    {pageCount > 1 ? `-${end}` : ""}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => toggleSection(section.id)}
+                    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"
+                  >
+                    {isCollapsed ? (
+                      <>
+                        <ChevronDown className="h-4 w-4" />
+                        Expand
+                      </>
+                    ) : (
+                      <>
+                        <ChevronUp className="h-4 w-4" />
+                        Collapse
+                      </>
+                    )}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleAddPage(sectionIndex)}
+                    disabled={!canModify}
+                    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 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <Plus className="h-4 w-4" />
+                    Add page
+                  </button>
+                </div>
+              </div>
+
+              {!isCollapsed ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {(section.pages ?? []).map((page, pageIndex) => (
+                    <div
+                      key={`${section.id}-page-${pageIndex}`}
+                      className="rounded-lg border border-gray-200 bg-white p-3"
+                    >
+                      <div className="flex items-center justify-between mb-2">
+                        <div>
+                          <div className="text-sm font-semibold text-gray-900">
+                            Page {pageIndex + 1}
+                          </div>
+                          <div className="text-xs text-gray-500">
+                            {page.items?.length ?? 0} items - Global page {start + pageIndex} of {totalPages}
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <button
+                            type="button"
+                            onClick={() => handleMovePage(sectionIndex, pageIndex, -1)}
+                            disabled={pageIndex === 0 || !canModify}
+                            className="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-1.5 text-gray-600 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                            aria-label="Move page up"
+                          >
+                            <ChevronUp className="h-3.5 w-3.5" />
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => handleMovePage(sectionIndex, pageIndex, 1)}
+                            disabled={pageIndex === (section.pages?.length ?? 1) - 1 || !canModify}
+                            className="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-1.5 text-gray-600 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                            aria-label="Move page down"
+                          >
+                            <ChevronDown className="h-3.5 w-3.5" />
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => handleRemovePage(sectionIndex, pageIndex)}
+                            disabled={(section.pages?.length ?? 1) <= 1 || !canModify}
+                            className="inline-flex items-center gap-1 rounded-lg border border-red-200 bg-red-50 px-2.5 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-100 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                          >
+                            <Trash2 className="h-3.5 w-3.5" />
+                            Remove
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        onClick={() => handleMovePage(sectionIndex, pageIndex, -1)}
-                        disabled={pageIndex === 0 || !canModify}
-                        className="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-1.5 text-gray-600 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
-                        aria-label="Move page up"
-                      >
-                        <ChevronUp className="h-3.5 w-3.5" />
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => handleMovePage(sectionIndex, pageIndex, 1)}
-                        disabled={pageIndex === (section.pages?.length ?? 1) - 1 || !canModify}
-                        className="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-1.5 text-gray-600 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
-                        aria-label="Move page down"
+
+                      <div
+                        className="mx-auto rounded-lg border border-gray-200 bg-white"
+                        style={{ width: previewWidth }}
                       >
-                        <ChevronDown className="h-3.5 w-3.5" />
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => handleRemovePage(sectionIndex, pageIndex)}
-                        disabled={(section.pages?.length ?? 1) <= 1 || !canModify}
-                        className="inline-flex items-center gap-1 rounded-lg border border-red-200 bg-red-50 px-2.5 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-100 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                        <ReportPageCanvas
+                          session={session}
+                          page={page}
+                          pageIndex={pageIndex}
+                          pageCount={totalPages}
+                          scale={previewScale}
+                          template={page?.template}
+                          sectionLabel={
+                            section.title
+                              ? `Section ${sectionIndex + 1} - ${section.title}`
+                              : `Section ${sectionIndex + 1}`
+                          }
+                          adaptive
+                        />
+                      </div>
+
+                      <div
+                        className="mt-2 rounded-md border border-dashed border-gray-200 bg-gray-50 px-2 py-2 text-[11px] text-gray-600"
+                        onDragOver={(event) => {
+                          event.preventDefault();
+                          event.dataTransfer.dropEffect = "copy";
+                        }}
+                        onDrop={(event) => {
+                          event.preventDefault();
+                          const layout = event.dataTransfer.getData("text/plain");
+                          if (
+                            layout === "auto" ||
+                            layout === "two-column" ||
+                            layout === "stacked"
+                          ) {
+                            applyPhotoLayout(sectionIndex, pageIndex, layout);
+                          }
+                        }}
                       >
-                        <Trash2 className="h-3.5 w-3.5" />
-                        Remove
-                      </button>
+                        Drop image layout here - Current: {page.photo_layout ?? "auto"}
+                      </div>
                     </div>
-                  </div>
-
-                  <div
-                    className="mx-auto rounded-lg border border-gray-200 bg-white"
-                    style={{ width: previewWidth }}
-                  >
-                    <ReportPageCanvas
-                      session={session}
-                      page={page}
-                      pageIndex={pageIndex}
-                      pageCount={totalPages}
-                      scale={previewScale}
-                      template={page?.template}
-                      sectionLabel={
-                        section.title
-                          ? `Section ${sectionIndex + 1} - ${section.title}`
-                          : `Section ${sectionIndex + 1}`
-                      }
-                      adaptive
-                    />
-                  </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="rounded-md border border-dashed border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-500">
+                  Section collapsed. Expand to edit pages and apply layout presets.
                 </div>
-              ))}
+              )}
             </div>
-          </div>
-        ))}
+          );
+        })}
       </section>
 
       <PageFooter note="Tip: reorder pages here and remove empty pages before export." />

frontend/src/pages/EditReportPage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
-import { ArrowLeft, Download, Edit3, Grid, Layout, Table } from "react-feather";
+import { ArrowLeft, Download, Edit3, Grid, Layout, Table, Image } from "react-feather";
 
 import { API_BASE, request } from "../lib/api";
 import { ensureSections, flattenSections } from "../lib/sections";
@@ -20,6 +20,9 @@ export default function EditReportPage() {
   const [session, setSession] = useState<Session | null>(null);
   const [pageCount, setPageCount] = useState<number | null>(null);
   const [error, setError] = useState("");
+  const [saveState, setSaveState] = useState<
+    "saved" | "saving" | "pending" | "error"
+  >("saved");
 
   const [editorEl, setEditorEl] = useState<ReportEditorElement | null>(null);
   const editorRef = useCallback((node: ReportEditorElement | null) => {
@@ -32,6 +35,16 @@ export default function EditReportPage() {
     return Math.max(0, Math.floor(raw) - 1);
   }, [searchParams]);
 
+  const saveAndNavigate = useCallback(
+    async (target: string) => {
+      if (editorEl?.flushSave) {
+        await editorEl.flushSave();
+      }
+      navigate(target);
+    },
+    [editorEl, navigate],
+  );
+
   useEffect(() => {
     if (!sessionId) {
       setError("No active session found. Return to upload to continue.");
@@ -80,11 +93,70 @@ export default function EditReportPage() {
   useEffect(() => {
     if (!editorEl) return;
     const handleClose = () => {
-      navigate(`/report-viewer${sessionQuery}`);
+      void saveAndNavigate(`/report-viewer${sessionQuery}`);
     };
     editorEl.addEventListener("editor-closed", handleClose);
     return () => editorEl.removeEventListener("editor-closed", handleClose);
-  }, [editorEl, navigate, sessionQuery]);
+  }, [editorEl, saveAndNavigate, sessionQuery]);
+
+  useEffect(() => {
+    if (!editorEl) return;
+    const handleQueued = () => {
+      setSaveState((prev) => (prev === "saving" ? prev : "pending"));
+    };
+    const handleStart = () => setSaveState("saving");
+    const handleEnd = (event: Event) => {
+      const custom = event as CustomEvent<{ ok?: boolean }>;
+      if (custom.detail && custom.detail.ok === false) {
+        setSaveState("error");
+      } else {
+        setSaveState("saved");
+      }
+    };
+    editorEl.addEventListener("editor-save-queued", handleQueued);
+    editorEl.addEventListener("editor-save-start", handleStart);
+    editorEl.addEventListener("editor-save-end", handleEnd);
+    return () => {
+      editorEl.removeEventListener("editor-save-queued", handleQueued);
+      editorEl.removeEventListener("editor-save-start", handleStart);
+      editorEl.removeEventListener("editor-save-end", handleEnd);
+    };
+  }, [editorEl]);
+
+  const saveIndicator = useMemo(() => {
+    const base =
+      "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold";
+    if (saveState === "saving") {
+      return (
+        <div className={`${base} border-amber-200 bg-amber-50 text-amber-700`}>
+          <span className="h-2 w-2 rounded-full bg-amber-500 animate-pulse" />
+          Saving...
+        </div>
+      );
+    }
+    if (saveState === "pending") {
+      return (
+        <div className={`${base} border-amber-200 bg-amber-50 text-amber-700`}>
+          <span className="h-2 w-2 rounded-full bg-amber-500" />
+          Unsaved changes
+        </div>
+      );
+    }
+    if (saveState === "error") {
+      return (
+        <div className={`${base} border-red-200 bg-red-50 text-red-700`}>
+          <span className="h-2 w-2 rounded-full bg-red-500" />
+          Save failed
+        </div>
+      );
+    }
+    return (
+      <div className={`${base} border-emerald-200 bg-emerald-50 text-emerald-700`}>
+        <span className="h-2 w-2 rounded-full bg-emerald-500" />
+        All changes saved
+      </div>
+    );
+  }, [saveState]);
 
   return (
     <PageShell className="max-w-6xl">
@@ -92,9 +164,14 @@ export default function EditReportPage() {
         title="RepEx - Report Express"
         subtitle="Edit Report"
         right={
-          <div className="flex items-center gap-2">
+          <div className="flex flex-col items-end gap-2 sm:flex-row sm:items-center">
+            {saveIndicator}
             <Link
               to={`/report-viewer${sessionQuery}`}
+              onClick={(event) => {
+                event.preventDefault();
+                void saveAndNavigate(`/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"
             >
               <ArrowLeft className="h-4 w-4" />
@@ -109,6 +186,10 @@ export default function EditReportPage() {
         <div className="flex flex-wrap gap-2">
           <Link
             to={`/input-data${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Table className="h-4 w-4" />
@@ -117,12 +198,28 @@ export default function EditReportPage() {
 
           <Link
             to={`/report-viewer${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Layout className="h-4 w-4" />
             Report Viewer
           </Link>
 
+          <Link
+            to={`/image-placement${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
+          >
+            <Image className="h-4 w-4" />
+            Image Placement
+          </Link>
+
           <span className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white">
             <Edit3 className="h-4 w-4" />
             Edit Report
@@ -130,6 +227,10 @@ export default function EditReportPage() {
 
           <Link
             to={`/edit-layouts${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Grid className="h-4 w-4" />
@@ -138,6 +239,10 @@ export default function EditReportPage() {
 
           <Link
             to={`/export${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Download className="h-4 w-4" />

frontend/src/pages/ExportPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
-import { ArrowLeft, Download, Edit3, Grid, Layout, Table } from "react-feather";
+import { ArrowLeft, Download, Edit3, Grid, Layout, Table, Image } from "react-feather";
 
 import { API_BASE, request } from "../lib/api";
 import { BASE_W } from "../lib/report";
@@ -159,6 +159,14 @@ export default function ExportPage() {
             Report Viewer
           </Link>
 
+          <Link
+            to={`/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"
+          >
+            <Image className="h-4 w-4" />
+            Image Placement
+          </Link>
+
           <Link
             to={`/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"

frontend/src/pages/ImagePlacementPage.tsx

@@ -0,0 +1,605 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Link, useSearchParams } from "react-router-dom";
+import {
+  ArrowLeft,
+  ChevronLeft,
+  ChevronRight,
+  Layout,
+  Edit3,
+  Grid,
+  Download,
+  Table,
+  Info,
+  Image,
+} from "react-feather";
+
+import { postForm, putJson, request } from "../lib/api";
+import { BASE_W } from "../lib/report";
+import { ensureSections, flattenSections, replacePage } from "../lib/sections";
+import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
+import { APP_VERSION } from "../lib/version";
+import type { JobsheetSection, Session } from "../types/session";
+import { ReportPageCanvas } from "../components/ReportPageCanvas";
+import { InfoMenu } from "../components/InfoMenu";
+
+export default function ImagePlacementPage() {
+  const [searchParams] = useSearchParams();
+  const sessionId = getSessionId(searchParams.toString());
+
+  const [session, setSession] = useState<Session | null>(null);
+  const [sections, setSections] = useState<JobsheetSection[]>([]);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [scale, setScale] = useState(1);
+  const [error, setError] = useState("");
+  const [photoSelection, setPhotoSelection] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveState, setSaveState] = useState<"saved" | "saving" | "error">(
+    "saved",
+  );
+  const [status, setStatus] = useState("");
+  const [isUploading, setIsUploading] = useState(false);
+
+  const stageRef = useRef<HTMLDivElement | null>(null);
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (!sessionId) {
+      setError("No active session found. Return to upload to continue.");
+      return;
+    }
+    setStoredSessionId(sessionId);
+  }, [sessionId]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (!stageRef.current) return;
+      const width = stageRef.current.clientWidth;
+      if (width > 0) setScale(width / BASE_W);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (!sessionId) return;
+    async function load() {
+      try {
+        const data = await request<Session>(`/sessions/${sessionId}`);
+        setSession(data);
+        const sectionResp = await request<{ sections: JobsheetSection[] }>(
+          `/sessions/${sessionId}/sections`,
+        );
+        const loaded = ensureSections(sectionResp.sections);
+        setSections(loaded);
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : "Failed to load session.";
+        setError(message);
+      }
+    }
+    load();
+  }, [sessionId]);
+
+  const flatPages = useMemo(
+    () => flattenSections(ensureSections(sections)),
+    [sections],
+  );
+  const totalPages = useMemo(() => {
+    if (flatPages.length > 0) return flatPages.length;
+    return Math.max(1, session?.page_count ?? 0);
+  }, [flatPages.length, session?.page_count]);
+
+  useEffect(() => {
+    setPageIndex((idx) => Math.min(Math.max(0, idx), totalPages - 1));
+  }, [totalPages]);
+
+  useEffect(() => {
+    setPhotoSelection("");
+  }, [pageIndex]);
+
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === "ArrowRight") {
+        setPageIndex((idx) => Math.min(totalPages - 1, idx + 1));
+      }
+      if (event.key === "ArrowLeft") {
+        setPageIndex((idx) => Math.max(0, idx - 1));
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [totalPages]);
+
+  const page = flatPages[pageIndex]?.page ?? null;
+  const pageEntry = flatPages[pageIndex] ?? null;
+  const sectionLabel = flatPages[pageIndex]?.sectionTitle
+    ? `Section ${flatPages[pageIndex].sectionIndex + 1} - ${flatPages[pageIndex].sectionTitle}`
+    : flatPages[pageIndex]
+      ? `Section ${flatPages[pageIndex].sectionIndex + 1}`
+      : "";
+  const template = page?.template;
+  const orderLocked = page?.photo_order_locked ?? false;
+  const sessionQuery = buildSessionQuery(sessionId || "");
+  const editReportQuery = useMemo(() => {
+    if (!sessionId) return "";
+    const params = new URLSearchParams();
+    params.set("session", sessionId);
+    params.set("page", String(pageIndex + 1));
+    return `?${params.toString()}`;
+  }, [sessionId, pageIndex]);
+
+  const viewerMeta = useMemo(() => {
+    if (!session) return "Loading...";
+    const selected = session.selected_photo_ids?.length ?? 0;
+    const docs = session.uploads?.documents?.length ?? 0;
+    const dataFiles = session.uploads?.data_files?.length ?? 0;
+    const hasEdits = flatPages.length > 0;
+    return (
+      `Selected example photos: ${selected} - Documents: ${docs} - Data files: ${dataFiles}` +
+      (hasEdits ? " - Edited pages loaded" : " - No saved edits yet")
+    );
+  }, [flatPages.length, session]);
+
+  const linkedPhotoIds = useMemo(() => {
+    const ids = new Set<string>();
+    sections.forEach((section) => {
+      (section.pages ?? []).forEach((sectionPage) => {
+        (sectionPage.photo_ids ?? []).forEach((photoId) => ids.add(photoId));
+      });
+    });
+    return ids;
+  }, [sections]);
+
+  const pagePhotoIds = page?.photo_ids ?? [];
+  const photoLookup = useMemo(
+    () => new Map((session?.uploads?.photos ?? []).map((photo) => [photo.id, photo])),
+    [session?.uploads?.photos],
+  );
+  const availablePhotos = useMemo(() => {
+    const all = session?.uploads?.photos ?? [];
+    if (!all.length) return [];
+    return all.filter((photo) => !linkedPhotoIds.has(photo.id));
+  }, [linkedPhotoIds, session?.uploads?.photos]);
+
+  const saveIndicator = useMemo(() => {
+    const base =
+      "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold";
+    if (saveState === "saving") {
+      return (
+        <div className={`${base} border-amber-200 bg-amber-50 text-amber-700`}>
+          <span className="h-2 w-2 rounded-full bg-amber-500 animate-pulse" />
+          Saving...
+        </div>
+      );
+    }
+    if (saveState === "error") {
+      return (
+        <div className={`${base} border-red-200 bg-red-50 text-red-700`}>
+          <span className="h-2 w-2 rounded-full bg-red-500" />
+          Save failed
+        </div>
+      );
+    }
+    return (
+      <div className={`${base} border-emerald-200 bg-emerald-50 text-emerald-700`}>
+        <span className="h-2 w-2 rounded-full bg-emerald-500" />
+        All changes saved
+      </div>
+    );
+  }, [saveState]);
+
+  async function persistSections(next: JobsheetSection[]) {
+    if (!sessionId) return;
+    setIsSaving(true);
+    setSaveState("saving");
+    setStatus("Saving image changes...");
+    try {
+      const resp = await putJson<{ sections: JobsheetSection[] }>(
+        `/sessions/${sessionId}/sections`,
+        { sections: next },
+      );
+      const normalized = ensureSections(resp.sections ?? next);
+      setSections(normalized);
+      setSaveState("saved");
+      setStatus("Image changes saved.");
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to save image changes.";
+      setStatus(message);
+      setSaveState("error");
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  function updatePagePhotos(nextIds: string[]) {
+    if (!pageEntry) return;
+    const nextPage = { ...pageEntry.page, photo_ids: nextIds };
+    const nextSections = replacePage(
+      sections,
+      pageEntry.sectionIndex,
+      pageEntry.pageIndex,
+      nextPage,
+    );
+    setSections(nextSections);
+    void persistSections(nextSections);
+  }
+
+  function addPhotoToPage(photoId: string) {
+    if (!photoId || !pageEntry) return;
+    const ids = [...pagePhotoIds];
+    if (!ids.includes(photoId)) ids.push(photoId);
+    updatePagePhotos(ids);
+  }
+
+  function removePhotoAt(index: number) {
+    const ids = [...pagePhotoIds];
+    ids.splice(index, 1);
+    updatePagePhotos(ids);
+  }
+
+  function movePhoto(from: number, to: number) {
+    const ids = [...pagePhotoIds];
+    if (from < 0 || from >= ids.length || to < 0 || to >= ids.length) return;
+    const [moved] = ids.splice(from, 1);
+    ids.splice(to, 0, moved);
+    updatePagePhotos(ids);
+  }
+
+  function toggleManualOrder() {
+    if (!pageEntry) return;
+    const nextPage = {
+      ...pageEntry.page,
+      photo_order_locked: !pageEntry.page.photo_order_locked,
+    };
+    const nextSections = replacePage(
+      sections,
+      pageEntry.sectionIndex,
+      pageEntry.pageIndex,
+      nextPage,
+    );
+    setSections(nextSections);
+    void persistSections(nextSections);
+  }
+
+  async function uploadPhoto(file: File) {
+    if (!sessionId) return;
+    setIsUploading(true);
+    setStatus(`Uploading ${file.name}...`);
+    const existing = new Set(
+      (session?.uploads?.photos ?? []).map((photo) => photo.id),
+    );
+    try {
+      const form = new FormData();
+      form.append("file", file);
+      const updated = await postForm<Session>(
+        `/sessions/${sessionId}/uploads`,
+        form,
+      );
+      setSession(updated);
+      const newPhoto =
+        (updated.uploads?.photos ?? []).find((photo) => !existing.has(photo.id)) ??
+        (updated.uploads?.photos ?? []).find((photo) => photo.name === file.name);
+      if (newPhoto) {
+        addPhotoToPage(newPhoto.id);
+        setStatus(`Added ${newPhoto.name} to this page.`);
+      } else {
+        setStatus("Uploaded image. Select it from the list to add.");
+      }
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to upload image.";
+      setStatus(message);
+    } finally {
+      setIsUploading(false);
+    }
+  }
+
+  return (
+    <main className="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8 print:ring-0 print:shadow-none print:rounded-none">
+      <header className="mb-8 border-b border-gray-200 pb-4">
+        <div className="grid grid-cols-[auto,1fr,auto] items-center gap-4">
+          <div className="flex items-center">
+            <img
+              src="/assets/prosento-logo.png"
+              alt="Company logo"
+              className="h-12 w-auto object-contain"
+              loading="eager"
+            />
+          </div>
+
+          <div className="text-center">
+            <h1 className="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
+              RepEx - Report Express
+            </h1>
+            <p className="text-gray-600 whitespace-nowrap">Image Placement</p>
+          </div>
+
+          <div className="flex justify-end gap-2 no-print">
+            <Link
+              to={`/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"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back
+            </Link>
+            <InfoMenu sessionQuery={sessionQuery} />
+          </div>
+        </div>
+      </header>
+
+      <nav className="mb-6 no-print" aria-label="Report workflow navigation">
+        <div className="flex flex-wrap gap-2">
+          <Link
+            to={`/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"
+          >
+            <Table className="h-4 w-4" />
+            Input Data
+          </Link>
+
+          <Link
+            to={`/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"
+          >
+            <Layout className="h-4 w-4" />
+            Report Viewer
+          </Link>
+
+          <span className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white">
+            <Image className="h-4 w-4" />
+            Image Placement
+          </span>
+
+          <Link
+            to={`/edit-report${editReportQuery}`}
+            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"
+          >
+            <Edit3 className="h-4 w-4" />
+            Edit Report
+          </Link>
+
+          <Link
+            to={`/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"
+          >
+            <Grid className="h-4 w-4" />
+            Edit Page Layouts
+          </Link>
+
+          <Link
+            to={`/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"
+          >
+            <Download className="h-4 w-4" />
+            Export
+          </Link>
+
+          <Link
+            to="/info/ratings"
+            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"
+          >
+            <Info className="h-4 w-4" />
+            Rating Scales
+          </Link>
+        </div>
+      </nav>
+
+      <section
+        id="viewerSection"
+        aria-label="Image placement preview"
+      >
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
+          <div>
+            <h2 className="text-xl font-semibold text-gray-800">Page Preview</h2>
+            <p className="text-sm text-gray-600">{viewerMeta}</p>
+          </div>
+
+          <div className="flex items-center gap-2 no-print">
+            <button
+              type="button"
+              onClick={() => setPageIndex((idx) => Math.max(0, idx - 1))}
+              disabled={pageIndex === 0}
+              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 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <ChevronLeft className="h-4 w-4" />
+              Prev
+            </button>
+
+            <div className="text-sm font-semibold text-gray-700">
+              Page <span>{pageIndex + 1}</span> / <span>{totalPages}</span>
+            </div>
+
+            <button
+              type="button"
+              onClick={() =>
+                setPageIndex((idx) => Math.min(totalPages - 1, idx + 1))
+              }
+              disabled={pageIndex >= totalPages - 1}
+              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 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Next
+              <ChevronRight className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+
+        <div className="flex justify-center">
+          <div
+            ref={stageRef}
+            className="relative shadow-sm rounded-xl bg-white border border-gray-200"
+            style={{
+              width: "min(100%, 560px)",
+            }}
+          >
+            <ReportPageCanvas
+              session={session}
+              page={page}
+              pageIndex={pageIndex}
+              pageCount={totalPages}
+              scale={scale}
+              template={template}
+              sectionLabel={sectionLabel}
+              adaptive
+            />
+          </div>
+        </div>
+
+        <p className="mt-4 text-xs text-gray-500 no-print">
+          Tip: Use keyboard arrows (left / right) to change pages.
+        </p>
+        {error ? <p className="text-sm text-red-600 mt-2">{error}</p> : null}
+      </section>
+
+      {pageEntry ? (
+        <section className="mt-6 no-print" aria-label="Page images">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900">Page Images</h3>
+              <p className="text-sm text-gray-600">
+                Images only appear once they are linked to a page. Unlinked uploads
+                stay hidden until you place them.
+              </p>
+            </div>
+            {saveIndicator}
+          </div>
+
+          <div className="mt-3 grid gap-4 lg:grid-cols-[1.6fr,1fr]">
+            <div className="rounded-lg border border-gray-200 bg-white p-3">
+              <div className="text-xs font-semibold text-gray-600 uppercase">
+                Linked images
+              </div>
+              <div className="mt-2 space-y-2">
+                {pagePhotoIds.length ? (
+                  pagePhotoIds.map((photoId, idx) => {
+                    const photo = photoLookup.get(photoId);
+                    return (
+                      <div
+                        key={`${photoId}-${idx}`}
+                        className="flex flex-wrap items-center gap-2 text-xs"
+                      >
+                        <span className="font-semibold text-gray-800">
+                          {photo?.name || photoId}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={() => movePhoto(idx, idx - 1)}
+                          disabled={idx === 0 || isSaving}
+                          className="rounded border border-gray-200 px-2 py-0.5 text-[11px] text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          Up
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => movePhoto(idx, idx + 1)}
+                          disabled={idx === pagePhotoIds.length - 1 || isSaving}
+                          className="rounded border border-gray-200 px-2 py-0.5 text-[11px] text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          Down
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => removePhotoAt(idx)}
+                          disabled={isSaving}
+                          className="rounded border border-red-200 bg-red-50 px-2 py-0.5 text-[11px] font-semibold text-red-700 hover:bg-red-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    );
+                  })
+                ) : (
+                  <div className="text-xs text-gray-500">No images linked.</div>
+                )}
+              </div>
+              <div className="mt-3 flex flex-wrap items-center gap-2">
+                <button
+                  type="button"
+                  onClick={toggleManualOrder}
+                  disabled={!pagePhotoIds.length || isSaving}
+                  className="rounded border border-gray-200 px-2.5 py-1 text-xs font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {orderLocked ? "Use auto order" : "Apply order"}
+                </button>
+                <span className="text-[11px] text-gray-500">
+                  {orderLocked ? "Manual order locked" : "Auto ordering enabled"}
+                </span>
+              </div>
+              <p className="mt-2 text-[11px] text-gray-500">
+                Adding more than 2 images will automatically create a continuation
+                page for the overflow.
+              </p>
+            </div>
+
+            <div className="rounded-lg border border-gray-200 bg-white p-3">
+              <div className="text-xs font-semibold text-gray-600 uppercase">
+                Add image
+              </div>
+              <div className="mt-2 flex flex-col gap-2">
+                <select
+                  value={photoSelection}
+                  onChange={(event) => setPhotoSelection(event.target.value)}
+                  className="w-full rounded-md border border-gray-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+                >
+                  <option value="">Select an unlinked image</option>
+                  {availablePhotos.map((photo) => (
+                    <option key={`viewer-photo-${photo.id}`} value={photo.id}>
+                      {photo.name}
+                    </option>
+                  ))}
+                </select>
+                <button
+                  type="button"
+                  onClick={() => {
+                    addPhotoToPage(photoSelection);
+                    setPhotoSelection("");
+                  }}
+                  disabled={!photoSelection || isSaving}
+                  className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Add selected image
+                </button>
+                <button
+                  type="button"
+                  onClick={() => uploadInputRef.current?.click()}
+                  disabled={isUploading || isSaving}
+                  className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Upload new image
+                </button>
+                <input
+                  ref={uploadInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={(event) => {
+                    const file = event.target.files?.[0];
+                    if (file) void uploadPhoto(file);
+                    event.target.value = "";
+                  }}
+                />
+                {availablePhotos.length === 0 ? (
+                  <p className="text-[11px] text-gray-500">
+                    All uploaded images are already linked.
+                  </p>
+                ) : null}
+              </div>
+            </div>
+          </div>
+
+          {status ? (
+            <p className="mt-2 text-xs text-gray-500">{status}</p>
+          ) : null}
+        </section>
+      ) : null}
+
+      <footer className="mt-12 text-center text-xs text-gray-500 no-print">
+        <p>Prosento - (c) 2026 All Rights Reserved</p>
+        <p className="mt-1">Images linked here appear in the report output.</p>
+        <p className="mt-1">Version {APP_VERSION}</p>
+      </footer>
+
+    </main>
+  );
+}

frontend/src/pages/InputDataPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Link, useSearchParams } from "react-router-dom";
-import { ArrowLeft, Download, Edit3, Grid, Layout, Save, Table } from "react-feather";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { ArrowLeft, Download, Edit3, Grid, Layout, Table, Image } from "react-feather";
 
 import { API_BASE, postForm, putJson, request } from "../lib/api";
 import { formatDocNumber } from "../lib/report";
@@ -12,7 +12,7 @@ import {
   replacePage,
 } from "../lib/sections";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
-import type { JobsheetSection, Session, TemplateFields } from "../types/session";
+import type { Heading, JobsheetSection, Session, TemplateFields } from "../types/session";
 import { PageFooter } from "../components/PageFooter";
 import { PageHeader } from "../components/PageHeader";
 import { PageShell } from "../components/PageShell";
@@ -24,49 +24,75 @@ type FieldDef = {
   multiline?: boolean;
 };
 
+const normalizeHeadings = (raw?: Heading[] | Record<string, string>): Heading[] => {
+  if (Array.isArray(raw)) {
+    return raw
+      .filter(Boolean)
+      .map((heading) => ({
+        number: String(heading.number ?? "").trim(),
+        name: String(heading.name ?? "").trim(),
+      }));
+  }
+  if (raw && typeof raw === "object") {
+    return Object.entries(raw).map(([number, name]) => ({
+      number: String(number).trim(),
+      name: String(name ?? "").trim(),
+    }));
+  }
+  return [];
+};
+
 const GENERAL_FIELDS: FieldDef[] = [
   { key: "inspection_date", label: "Inspection Date" },
   { key: "inspector", label: "Inspector" },
-  { key: "accompanied_by", label: "Accompanied By" },
   { key: "document_no", label: "Document No" },
-  { key: "project", label: "Project" },
-  { key: "client_site", label: "Client / Site" },
   { key: "company_logo", label: "Company Logo" },
 ];
 
 const ITEM_FIELDS: FieldDef[] = [
   { key: "area", label: "Area" },
   { key: "reference", label: "Reference" },
-  { key: "action_type", label: "Action Type" },
+  { key: "functional_location", label: "Location" },
   { key: "item_description", label: "Item Description", multiline: true },
-  { key: "functional_location", label: "Functional Location" },
   { key: "category", label: "Category" },
   { key: "priority", label: "Priority" },
-  { key: "condition_description", label: "Condition Description", multiline: true },
   { key: "required_action", label: "Required Action", multiline: true },
+  { key: "figure_caption", label: "Figure Caption" },
 ];
 
 export default function InputDataPage() {
   const [searchParams] = useSearchParams();
   const sessionId = getSessionId(searchParams.toString());
   const sessionQuery = buildSessionQuery(sessionId);
+  const navigate = useNavigate();
 
   const [session, setSession] = useState<Session | null>(null);
   const [sections, setSections] = useState<JobsheetSection[]>([]);
   const [status, setStatus] = useState("");
   const [isSaving, setIsSaving] = useState(false);
+  const [saveState, setSaveState] = useState<
+    "saved" | "saving" | "pending" | "error"
+  >("saved");
   const [isUploading, setIsUploading] = useState(false);
   const [copySourceIndex, setCopySourceIndex] = useState(0);
   const [copyTargets, setCopyTargets] = useState("");
   const [addSectionId, setAddSectionId] = useState<string>("");
   const [sectionsCollapsed, setSectionsCollapsed] = useState(true);
+  const [headings, setHeadings] = useState<Heading[]>([]);
   const [showGeneralColumns, setShowGeneralColumns] = useState(false);
   const [generalDirty, setGeneralDirty] = useState(false);
   const [generalTemplate, setGeneralTemplate] = useState<TemplateFields>({});
   const [photoSelections, setPhotoSelections] = useState<Record<number, string>>(
     {},
   );
-  const canSave = Boolean(sessionId) && !isSaving;
+  const saveTimerRef = useRef<number | null>(null);
+  const generalApplyTimerRef = useRef<number | null>(null);
+  const headingsSaveTimerRef = useRef<number | null>(null);
+  const lastSavedHeadingsRef = useRef<string>(JSON.stringify([]));
+  const headingsLoadedRef = useRef(false);
+  const lastSavedRef = useRef<string>("");
+  const pendingSaveRef = useRef<string>("");
+  const savePromiseRef = useRef<Promise<void> | null>(null);
   const excelInputRef = useRef<HTMLInputElement | null>(null);
   const jsonInputRef = useRef<HTMLInputElement | null>(null);
   const uploadInputRefs = useRef<Record<number, HTMLInputElement | null>>({});
@@ -84,7 +110,15 @@ export default function InputDataPage() {
         const sectionResp = await request<{ sections: JobsheetSection[] }>(
           `/sessions/${sessionId}/sections`,
         );
-        setSections(ensureSections(sectionResp.sections));
+        const normalized = ensureSections(sectionResp.sections);
+        setSections(normalized);
+        const initialHeadings = normalizeHeadings(data.headings);
+        setHeadings(initialHeadings);
+        headingsLoadedRef.current = true;
+        lastSavedHeadingsRef.current = JSON.stringify(initialHeadings);
+        lastSavedRef.current = JSON.stringify(normalized);
+        pendingSaveRef.current = lastSavedRef.current;
+        setSaveState("saved");
       } catch (err) {
         const message =
           err instanceof Error ? err.message : "Failed to load session.";
@@ -101,7 +135,15 @@ export default function InputDataPage() {
     const sectionResp = await request<{ sections: JobsheetSection[] }>(
       `/sessions/${sessionId}/sections`,
     );
-    setSections(ensureSections(sectionResp.sections));
+    const normalized = ensureSections(sectionResp.sections);
+    setSections(normalized);
+    const nextHeadings = normalizeHeadings(data.headings);
+    setHeadings(nextHeadings);
+    headingsLoadedRef.current = true;
+    lastSavedHeadingsRef.current = JSON.stringify(nextHeadings);
+    lastSavedRef.current = JSON.stringify(normalized);
+    pendingSaveRef.current = lastSavedRef.current;
+    setSaveState("saved");
   }
 
   const flatPages = useMemo(
@@ -158,6 +200,41 @@ export default function InputDataPage() {
     setGeneralDirty(true);
   }
 
+  function updateHeadingField(index: number, key: keyof Heading, value: string) {
+    setHeadings((prev) =>
+      prev.map((heading, idx) =>
+        idx === index ? { ...heading, [key]: value } : heading,
+      ),
+    );
+  }
+
+  function addHeadingRow() {
+    setHeadings((prev) => [...prev, { number: "", name: "" }]);
+  }
+
+  function removeHeadingRow(index: number) {
+    setHeadings((prev) => prev.filter((_, idx) => idx !== index));
+  }
+
+  function applyGeneralToSections(
+    source: JobsheetSection[],
+    template: TemplateFields,
+  ): JobsheetSection[] {
+    return source.map((section) => ({
+      ...section,
+      pages: (section.pages ?? []).map((page) => {
+        const nextTemplate = { ...(page.template ?? {}) };
+        GENERAL_FIELDS.forEach((field) => {
+          const value = template[field.key];
+          if (value !== undefined) {
+            nextTemplate[field.key] = value;
+          }
+        });
+        return { ...page, template: nextTemplate };
+      }),
+    }));
+  }
+
   function applyRowToAll(pageIndex: number) {
     const entry = flatPages[pageIndex];
     if (!entry) return;
@@ -173,25 +250,13 @@ export default function InputDataPage() {
     );
   }
 
-  function applyGeneralToAll() {
+  function applyGeneralToAll(silent = false) {
     if (!flatPages.length) return;
-    setSections((prev) =>
-      prev.map((section) => ({
-        ...section,
-        pages: (section.pages ?? []).map((page) => {
-          const template = { ...(page.template ?? {}) };
-          GENERAL_FIELDS.forEach((field) => {
-            const value = generalTemplate[field.key];
-            if (value !== undefined) {
-              template[field.key] = value;
-            }
-          });
-          return { ...page, template };
-        }),
-      })),
-    );
+    setSections((prev) => applyGeneralToSections(prev, generalTemplate));
     setGeneralDirty(false);
-    setStatus("Applied general info to all pages.");
+    if (!silent) {
+      setStatus("Applied general info to all pages.");
+    }
   }
 
   function insertPageAt(index: number, templateSource?: TemplateFields) {
@@ -380,34 +445,147 @@ export default function InputDataPage() {
       case "inspection_date":
         return session.inspection_date || "";
       case "document_no":
-        return formatDocNumber(session);
-      case "project":
-        return session.project_name || "";
-      case "condition_description":
-        return session.notes || "";
+        return session.document_no || formatDocNumber(session);
       default:
         return "";
     }
   }
 
-  async function saveAll() {
+  async function saveAll(
+    silent = false,
+    overrideSections?: JobsheetSection[],
+  ) {
     if (!sessionId) return;
-    setIsSaving(true);
-    setStatus("Saving input data...");
+    if (savePromiseRef.current) {
+      await savePromiseRef.current;
+    }
+    const toSave = overrideSections ?? sections;
+    const snapshot = JSON.stringify(toSave);
+    if (!overrideSections && snapshot === lastSavedRef.current) {
+      if (!isSaving) setSaveState("saved");
+      return;
+    }
+    const promise = (async () => {
+      setIsSaving(true);
+      setSaveState("saving");
+      if (!silent) {
+        setStatus("Saving input data...");
+      }
+      try {
+        const resp = await putJson<{ sections: JobsheetSection[] }>(
+          `/sessions/${sessionId}/sections`,
+          { sections: toSave },
+        );
+        const updated = ensureSections(resp.sections ?? toSave);
+        setSections(updated);
+        lastSavedRef.current = JSON.stringify(updated);
+        pendingSaveRef.current = lastSavedRef.current;
+        setSaveState("saved");
+        if (!silent) {
+          setStatus("Input data saved.");
+        } else {
+          setStatus("All changes saved.");
+        }
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : "Failed to save input data.";
+        setStatus(message);
+        setSaveState("error");
+      } finally {
+        setIsSaving(false);
+        if (
+          pendingSaveRef.current &&
+          pendingSaveRef.current !== lastSavedRef.current
+        ) {
+          if (saveTimerRef.current) window.clearTimeout(saveTimerRef.current);
+          saveTimerRef.current = window.setTimeout(() => {
+            void triggerAutoSave();
+          }, 200);
+        }
+      }
+    })();
+    savePromiseRef.current = promise;
     try {
-      const resp = await putJson<{ sections: JobsheetSection[] }>(
-        `/sessions/${sessionId}/sections`,
-        { sections },
+      await promise;
+    } finally {
+      savePromiseRef.current = null;
+    }
+  }
+
+  async function triggerAutoSave() {
+    if (!sessionId || savePromiseRef.current) return;
+    const snapshot = pendingSaveRef.current;
+    if (!snapshot || snapshot === lastSavedRef.current) return;
+    await saveAll(true);
+  }
+
+  useEffect(() => {
+    if (!sessionId) return;
+    const snapshot = JSON.stringify(sections);
+    if (snapshot === lastSavedRef.current) {
+      if (!generalDirty && !isSaving) {
+        setSaveState("saved");
+      }
+      return;
+    }
+    pendingSaveRef.current = snapshot;
+    if (!isSaving) {
+      setSaveState("pending");
+    }
+    if (saveTimerRef.current) window.clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = window.setTimeout(() => {
+      void triggerAutoSave();
+    }, 800);
+  }, [sections, sessionId, generalDirty, isSaving]);
+
+  useEffect(() => {
+    if (!generalDirty) return;
+    if (!isSaving) {
+      setSaveState("pending");
+    }
+    if (generalApplyTimerRef.current) {
+      window.clearTimeout(generalApplyTimerRef.current);
+    }
+    generalApplyTimerRef.current = window.setTimeout(() => {
+      applyGeneralToAll(true);
+    }, 800);
+  }, [generalDirty, generalTemplate, isSaving]);
+
+  useEffect(() => {
+    if (!sessionId) return;
+    if (!headingsLoadedRef.current) return;
+    const snapshot = JSON.stringify(headings);
+    if (snapshot === lastSavedHeadingsRef.current) return;
+    if (headingsSaveTimerRef.current) {
+      window.clearTimeout(headingsSaveTimerRef.current);
+    }
+    headingsSaveTimerRef.current = window.setTimeout(() => {
+      void saveHeadings(true);
+    }, 800);
+  }, [headings, sessionId]);
+
+  async function saveHeadings(silent = false) {
+    if (!sessionId) return;
+    const snapshot = JSON.stringify(headings);
+    if (snapshot === lastSavedHeadingsRef.current) return;
+    try {
+      if (!silent) {
+        setStatus("Saving headings...");
+      }
+      const resp = await putJson<{ headings: Heading[] }>(
+        `/sessions/${sessionId}/headings`,
+        { headings },
       );
-      const updated = ensureSections(resp.sections ?? sections);
-      setSections(updated);
-      setStatus("Input data saved.");
+      const normalized = resp.headings ?? headings;
+      setHeadings(normalized);
+      lastSavedHeadingsRef.current = JSON.stringify(normalized);
+      if (!silent) {
+        setStatus("Headings saved.");
+      }
     } catch (err) {
       const message =
-        err instanceof Error ? err.message : "Failed to save input data.";
+        err instanceof Error ? err.message : "Failed to save headings.";
       setStatus(message);
-    } finally {
-      setIsSaving(false);
     }
   }
 
@@ -484,15 +662,82 @@ export default function InputDataPage() {
     }
   }
 
+  async function saveAndNavigate(target: string) {
+    if (!sessionId) {
+      navigate(target);
+      return;
+    }
+    if (generalApplyTimerRef.current) {
+      window.clearTimeout(generalApplyTimerRef.current);
+      generalApplyTimerRef.current = null;
+    }
+    let overrideSections: JobsheetSection[] | undefined;
+    if (generalDirty) {
+      overrideSections = applyGeneralToSections(sections, generalTemplate);
+      setSections(overrideSections);
+      setGeneralDirty(false);
+    }
+    if (saveTimerRef.current) {
+      window.clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+    const snapshot = JSON.stringify(overrideSections ?? sections);
+    pendingSaveRef.current = snapshot;
+    if (snapshot !== lastSavedRef.current || savePromiseRef.current) {
+      await saveAll(true, overrideSections);
+    }
+    navigate(target);
+  }
+
+  const saveIndicator = useMemo(() => {
+    const base =
+      "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold";
+    if (saveState === "saving") {
+      return (
+        <div className={`${base} border-amber-200 bg-amber-50 text-amber-700`}>
+          <span className="h-2 w-2 rounded-full bg-amber-500 animate-pulse" />
+          Saving...
+        </div>
+      );
+    }
+    if (saveState === "pending") {
+      return (
+        <div className={`${base} border-amber-200 bg-amber-50 text-amber-700`}>
+          <span className="h-2 w-2 rounded-full bg-amber-500" />
+          Unsaved changes
+        </div>
+      );
+    }
+    if (saveState === "error") {
+      return (
+        <div className={`${base} border-red-200 bg-red-50 text-red-700`}>
+          <span className="h-2 w-2 rounded-full bg-red-500" />
+          Save failed
+        </div>
+      );
+    }
+    return (
+      <div className={`${base} border-emerald-200 bg-emerald-50 text-emerald-700`}>
+        <span className="h-2 w-2 rounded-full bg-emerald-500" />
+        All changes saved
+      </div>
+    );
+  }, [saveState]);
+
   return (
     <PageShell className="max-w-6xl">
       <PageHeader
         title="RepEx - Report Express"
         subtitle="Input Data"
         right={
-          <div className="flex items-center gap-2">
+          <div className="flex flex-col items-end gap-2 sm:flex-row sm:items-center">
+            {saveIndicator}
             <Link
               to={`/report-viewer${sessionQuery}`}
+              onClick={(event) => {
+                event.preventDefault();
+                void saveAndNavigate(`/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"
             >
               <ArrowLeft className="h-4 w-4" />
@@ -512,14 +757,34 @@ export default function InputDataPage() {
 
           <Link
             to={`/report-viewer${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Layout className="h-4 w-4" />
             Report Viewer
           </Link>
 
+          <Link
+            to={`/image-placement${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
+          >
+            <Image className="h-4 w-4" />
+            Image Placement
+          </Link>
+
           <Link
             to={`/edit-report${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Edit3 className="h-4 w-4" />
@@ -528,6 +793,10 @@ export default function InputDataPage() {
 
           <Link
             to={`/edit-layouts${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Grid className="h-4 w-4" />
@@ -536,6 +805,10 @@ export default function InputDataPage() {
 
           <Link
             to={`/export${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/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"
           >
             <Download className="h-4 w-4" />
@@ -584,15 +857,6 @@ export default function InputDataPage() {
             >
               Add section
             </button>
-            <button
-              type="button"
-              onClick={saveAll}
-              disabled={!canSave}
-              className="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              <Save className="h-4 w-4" />
-              Save changes
-            </button>
           </div>
         </div>
         {status ? <p className="text-sm text-gray-600 mt-3">{status}</p> : null}
@@ -777,12 +1041,23 @@ export default function InputDataPage() {
           </div>
 
           <div className="w-full lg:w-[320px] shrink-0">
-            <h3 className="text-base font-semibold text-gray-900">Headings</h3>
-            <p className="text-sm text-gray-600">
-              Imported heading numbers from the Excel sheet.
-            </p>
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <div>
+                <h3 className="text-base font-semibold text-gray-900">Headings</h3>
+                <p className="text-sm text-gray-600">
+                  Edit heading numbers or add new rows.
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={addHeadingRow}
+                className="inline-flex items-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1 text-xs font-semibold text-gray-700 hover:bg-gray-50 transition"
+              >
+                Add
+              </button>
+            </div>
             <div className="mt-3 rounded-lg border border-gray-200 bg-white overflow-x-auto">
-              <table className="min-w-[280px] w-full text-sm">
+              <table className="min-w-[360px] w-full text-sm">
                 <thead className="bg-gray-50 border-b border-gray-200">
                   <tr>
                     <th className="px-3 py-2 text-left text-xs font-semibold text-gray-600">
@@ -791,24 +1066,50 @@ export default function InputDataPage() {
                     <th className="px-3 py-2 text-left text-xs font-semibold text-gray-600">
                       Heading
                     </th>
+                    <th className="px-3 py-2 text-left text-xs font-semibold text-gray-600 w-20">
+                      Actions
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
-                  {session?.headings?.length ? (
-                    session.headings.map((heading, idx) => (
+                  {headings.length ? (
+                    headings.map((heading, idx) => (
                       <tr key={`heading-${idx}`} className="border-b border-gray-100">
                         <td className="px-3 py-2 text-xs font-semibold text-gray-700">
-                          {heading.number}
+                          <input
+                            type="text"
+                            className="w-full rounded-md border border-gray-200 px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-blue-200"
+                            value={heading.number}
+                            onChange={(event) =>
+                              updateHeadingField(idx, "number", event.target.value)
+                            }
+                          />
                         </td>
                         <td className="px-3 py-2 text-sm text-gray-700">
-                          {heading.name}
+                          <input
+                            type="text"
+                            className="w-full rounded-md border border-gray-200 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+                            value={heading.name}
+                            onChange={(event) =>
+                              updateHeadingField(idx, "name", event.target.value)
+                            }
+                          />
+                        </td>
+                        <td className="px-3 py-2 text-xs">
+                          <button
+                            type="button"
+                            onClick={() => removeHeadingRow(idx)}
+                            className="inline-flex items-center gap-1 rounded-md border border-red-200 bg-red-50 px-2 py-1 text-[11px] font-semibold text-red-700 hover:bg-red-100"
+                          >
+                            Remove
+                          </button>
                         </td>
                       </tr>
                     ))
                   ) : (
                     <tr>
                       <td
-                        colSpan={2}
+                        colSpan={3}
                         className="px-3 py-4 text-sm text-gray-500 text-center"
                       >
                         No headings found.
@@ -1180,7 +1481,7 @@ export default function InputDataPage() {
         </button>
       </div>
 
-      <PageFooter note="Tip: edit fields per page and save once. Use apply row to keep pages consistent." />
+      <PageFooter note="Tip: changes save automatically. Use apply row to keep pages consistent." />
     </PageShell>
   );
 }

frontend/src/pages/PrintReportPage.tsx

@@ -3,7 +3,7 @@ import type { CSSProperties } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { request } from "../lib/api";
-import { BASE_W, getPhotosForPage, getSelectedPhotos } from "../lib/report";
+import { BASE_W } from "../lib/report";
 import { getSessionId } from "../lib/session";
 import type { FileMeta, Page, PageItem, Session, TemplateFields } from "../types/session";
 import { JobSheetTemplate } from "../components/JobSheetTemplate";
@@ -38,7 +38,7 @@ function resolvePagePhotos(
   if (explicit.length) {
     return explicit.map((id) => byId.get(id)).filter(Boolean) as FileMeta[];
   }
-  return getPhotosForPage(session, pageIndex, 1);
+  return [];
 }
 
 function chunkPhotos(photos: FileMeta[], perSheet: number) {
@@ -207,11 +207,8 @@ export default function PrintReportPage() {
 
   const basePages = useMemo(() => {
     if (pages.length) return pages;
-    if (!session) return [];
-    const selected = getSelectedPhotos(session);
-    const count = Math.max(1, selected.length || session.page_count || 1);
-    return Array.from({ length: count }, () => ({ items: [] as PageItem[] }));
-  }, [pages, session]);
+    return [];
+  }, [pages]);
 
   const totalPages = basePages.length || 1;
 
@@ -259,6 +256,7 @@ export default function PrintReportPage() {
                   photos={sheet.photos}
                   orderLocked={sheet.page.photo_order_locked ?? false}
                   variant={sheet.variant}
+                  photoLayout={sheet.page.photo_layout}
                 />
                 {sheet.sheetIndex === 0
                   ? renderItems(sheet.page.items ?? [], scale)

frontend/src/pages/ReportViewerPage.tsx

@@ -10,6 +10,7 @@ import {
   Download,
   Table,
   Info,
+  Image,
 } from "react-feather";
 
 import { request } from "../lib/api";
@@ -174,6 +175,14 @@ export default function ReportViewerPage() {
             Report Viewer
           </span>
 
+          <Link
+            to={`/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"
+          >
+            <Image className="h-4 w-4" />
+            Image Placement
+          </Link>
+
           <Link
             to={`/edit-report${editReportQuery}`}
             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"

frontend/src/pages/ReviewSetupPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import {
   CheckCircle,
@@ -8,9 +8,10 @@ import {
   CheckSquare,
   Square,
   ArrowRight,
+  UploadCloud,
 } from "react-feather";
 
-import { putJson, request } from "../lib/api";
+import { postForm, putJson, request } from "../lib/api";
 import { getSessionId, setStoredSessionId } from "../lib/session";
 import type { Session } from "../types/session";
 import { PageFooter } from "../components/PageFooter";
@@ -22,12 +23,16 @@ export default function ReviewSetupPage() {
   const [searchParams] = useSearchParams();
   const sessionId = getSessionId(searchParams.toString());
 
+  const photoUploadRef = useRef<HTMLInputElement | null>(null);
+  const dataUploadRef = useRef<HTMLInputElement | null>(null);
   const [session, setSession] = useState<Session | null>(null);
   const [selectedPhotoIds, setSelectedPhotoIds] = useState<Set<string>>(
     new Set(),
   );
   const [showAllPhotos, setShowAllPhotos] = useState(false);
   const [statusMessage, setStatusMessage] = useState("");
+  const [isUploadingPhotos, setIsUploadingPhotos] = useState(false);
+  const [isUploadingData, setIsUploadingData] = useState(false);
 
   useEffect(() => {
     if (!sessionId) {
@@ -40,6 +45,11 @@ export default function ReviewSetupPage() {
         const data = await request<Session>(`/sessions/${sessionId}`);
         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) {
+          photoIds.forEach((photoId) => initial.add(photoId));
+        }
         setSelectedPhotoIds(initial);
       } catch (err) {
         const message =
@@ -68,6 +78,69 @@ export default function ReviewSetupPage() {
     return "Ready. Continue to report viewer.";
   }, [canContinue, selectedPhotoIds.size, session?.uploads?.data_files?.length, sessionId]);
 
+  async function handleUploadPhotos(files: FileList | null) {
+    if (!sessionId || !files || files.length === 0) return;
+    setIsUploadingPhotos(true);
+    setStatusMessage("");
+    const priorPhotoIds = new Set(
+      (session?.uploads?.photos ?? []).map((photo) => photo.id),
+    );
+    try {
+      let updatedSession: Session | null = session;
+      for (const file of Array.from(files)) {
+        const formData = new FormData();
+        formData.append("file", file);
+        updatedSession = await postForm<Session>(
+          `/sessions/${sessionId}/uploads`,
+          formData,
+        );
+      }
+      if (updatedSession) {
+        setSession(updatedSession);
+        const next = new Set(selectedPhotoIds);
+        for (const photo of updatedSession.uploads?.photos ?? []) {
+          if (!priorPhotoIds.has(photo.id)) {
+            next.add(photo.id);
+          }
+        }
+        setSelectedPhotoIds(next);
+      }
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to upload photos.";
+      setStatusMessage(message);
+    } finally {
+      setIsUploadingPhotos(false);
+      if (photoUploadRef.current) photoUploadRef.current.value = "";
+    }
+  }
+
+  async function handleUploadDataFile(files: FileList | null) {
+    if (!sessionId || !files || files.length === 0) return;
+    setIsUploadingData(true);
+    setStatusMessage("");
+    try {
+      const file = files[0];
+      const formData = new FormData();
+      formData.append("file", file);
+      const updated = await postForm<Session>(
+        `/sessions/${sessionId}/data-files`,
+        formData,
+      );
+      setSession(updated);
+      if (updated.selected_photo_ids) {
+        setSelectedPhotoIds(new Set(updated.selected_photo_ids));
+      }
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to upload data file.";
+      setStatusMessage(message);
+    } finally {
+      setIsUploadingData(false);
+      if (dataUploadRef.current) dataUploadRef.current.value = "";
+    }
+  }
+
   async function handleContinue() {
     if (!sessionId) return;
     if (selectedPhotoIds.size === 0 && dataFiles.length === 0) return;
@@ -151,11 +224,30 @@ export default function ReviewSetupPage() {
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
           <div className="lg:col-span-2">
-            <div className="flex items-center justify-between mb-3">
+            <div className="flex flex-wrap items-center justify-between gap-3 mb-3">
               <h3 className="text-lg font-semibold text-gray-900">Photos</h3>
-              <span className="text-sm font-semibold text-gray-600">
-                {photos.length} file{photos.length === 1 ? "" : "s"}
-              </span>
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="text-sm font-semibold text-gray-600">
+                  {photos.length} file{photos.length === 1 ? "" : "s"}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => photoUploadRef.current?.click()}
+                  disabled={!sessionId || isUploadingPhotos}
+                  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 disabled:opacity-50"
+                >
+                  <UploadCloud className="h-4 w-4" />
+                  {isUploadingPhotos ? "Uploading..." : "Add photos"}
+                </button>
+                <input
+                  ref={photoUploadRef}
+                  type="file"
+                  className="hidden"
+                  multiple
+                  accept=".jpg,.jpeg,.png,.webp"
+                  onChange={(event) => handleUploadPhotos(event.target.files)}
+                />
+              </div>
             </div>
 
             <div className="rounded-lg border border-gray-200 bg-white p-4">
@@ -317,11 +409,29 @@ export default function ReviewSetupPage() {
             </div>
 
             <div>
-              <div className="flex items-center justify-between mb-3">
+              <div className="flex flex-wrap items-center justify-between gap-3 mb-3">
                 <h3 className="text-lg font-semibold text-gray-900">Data files</h3>
-                <span className="text-sm font-semibold text-gray-600">
-                  {dataFiles.length} file{dataFiles.length === 1 ? "" : "s"}
-                </span>
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="text-sm font-semibold text-gray-600">
+                    {dataFiles.length} file{dataFiles.length === 1 ? "" : "s"}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => dataUploadRef.current?.click()}
+                    disabled={!sessionId || isUploadingData}
+                    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 disabled:opacity-50"
+                  >
+                    <UploadCloud className="h-4 w-4" />
+                    {isUploadingData ? "Uploading..." : "Upload data file"}
+                  </button>
+                  <input
+                    ref={dataUploadRef}
+                    type="file"
+                    className="hidden"
+                    accept=".csv,.xls,.xlsx"
+                    onChange={(event) => handleUploadDataFile(event.target.files)}
+                  />
+                </div>
               </div>
 
               <div className="rounded-lg border border-gray-200 bg-white p-4">

frontend/src/pages/UploadPage.tsx

@@ -13,6 +13,7 @@ import {
 
 import { postForm, request } from "../lib/api";
 import { formatBytes } from "../lib/format";
+import { formatDocNumber } from "../lib/report";
 import { setStoredSessionId } from "../lib/session";
 import { APP_VERSION } from "../lib/version";
 import type { Session } from "../types/session";
@@ -23,9 +24,8 @@ export default function UploadPage() {
   const navigate = useNavigate();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-  const [projectName, setProjectName] = useState("");
+  const [documentNo, setDocumentNo] = useState("");
   const [inspectionDate, setInspectionDate] = useState("");
-  const [notes, setNotes] = useState("");
   const [uploadStatus, setUploadStatus] = useState("");
   const [statusTone, setStatusTone] = useState<StatusTone>("idle");
   const [recentSessions, setRecentSessions] = useState<Session[]>([]);
@@ -86,9 +86,8 @@ export default function UploadPage() {
     setStatusTone("idle");
 
     const formData = new FormData();
-    formData.append("project_name", projectName.trim());
+    formData.append("document_no", documentNo.trim());
     formData.append("inspection_date", inspectionDate);
-    formData.append("notes", notes.trim());
     selectedFiles.forEach((file) => formData.append("files", file));
 
     try {
@@ -187,7 +186,7 @@ export default function UploadPage() {
             </div>
             <h3 className="text-base font-semibold text-gray-900 mb-1">Upload documents</h3>
             <p className="text-sm text-gray-600">
-              Add notes, measurements, and supporting PDFs/DOCX to complete the context.
+              Add supporting PDFs/DOCX to complete the context.
             </p>
           </article>
 
@@ -259,15 +258,15 @@ export default function UploadPage() {
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
             <div className="space-y-1">
-              <label className="block text-sm font-medium text-gray-700" htmlFor="projectName">
-                Project Name
+              <label className="block text-sm font-medium text-gray-700" htmlFor="documentNo">
+                Document No
               </label>
               <input
-                id="projectName"
+                id="documentNo"
                 type="text"
-                value={projectName}
-                onChange={(event) => setProjectName(event.target.value)}
-                placeholder="e.g., North Pit Conveyor Support"
+                value={documentNo}
+                onChange={(event) => setDocumentNo(event.target.value)}
+                placeholder="e.g., SIMM-JS-2025-001"
                 className="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500"
               />
             </div>
@@ -286,20 +285,6 @@ export default function UploadPage() {
             </div>
           </div>
 
-          <div className="space-y-1 mb-6">
-            <label className="block text-sm font-medium text-gray-700" htmlFor="notes">
-              Additional Notes
-            </label>
-            <textarea
-              id="notes"
-              rows={4}
-              value={notes}
-              onChange={(event) => setNotes(event.target.value)}
-              placeholder="Add any context you'd like included in the report..."
-              className="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500"
-            />
-          </div>
-
           <button
             type="button"
             onClick={handleSubmit}
@@ -340,7 +325,7 @@ export default function UploadPage() {
                     Report ID
                   </th>
                   <th className="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                    Project
+                    Document No
                   </th>
                   <th className="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                     Date
@@ -368,7 +353,7 @@ export default function UploadPage() {
                         #{session.id.slice(0, 8)}
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
-                        {session.project_name || "Untitled project"}
+                        {session.document_no || formatDocNumber(session)}
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                         {session.created_at

frontend/src/types/custom-elements.d.ts

@@ -13,6 +13,7 @@ declare global {
 
   interface ReportEditorElement extends HTMLElement {
     open: (options?: ReportEditorOpenOptions) => void;
+    flushSave?: () => Promise<void>;
   }
 
   namespace JSX {

frontend/src/types/session.ts

@@ -23,9 +23,8 @@ export type Session = {
   status: string;
   created_at: string;
   updated_at: string;
-  project_name: string;
+  document_no: string;
   inspection_date: string;
-  notes: string;
   uploads: SessionUploads;
   selected_photo_ids: string[];
   page_count: number;
@@ -69,26 +68,23 @@ export type PageItem = {
 export type TemplateFields = {
   inspection_date?: string;
   inspector?: string;
-  accompanied_by?: string;
   document_no?: string;
-  project?: string;
-  client_site?: string;
   company_logo?: string;
   area?: string;
   reference?: string;
-  action_type?: string;
   item_description?: string;
   functional_location?: string;
   category?: string;
   priority?: string;
-  condition_description?: string;
   required_action?: string;
+  figure_caption?: string;
 };
 
 export type Page = {
   items: PageItem[];
   template?: TemplateFields;
   photo_ids?: string[];
+  photo_layout?: "auto" | "two-column" | "stacked";
   photo_order_locked?: boolean;
   blank?: boolean;
   variant?: "full" | "photos";

server/app/api/routes/sessions.py

@@ -10,6 +10,8 @@ from openpyxl import Workbook
 
 from ..deps import get_session_store
 from ..schemas import (
+    HeadingsRequest,
+    HeadingsResponse,
     PagesRequest,
     PagesResponse,
     SectionsRequest,
@@ -52,6 +54,18 @@ def _attach_urls(session: dict) -> dict:
     return session
 
 
+def _merge_text(primary: str, secondary: str) -> str:
+    primary = (primary or "").strip()
+    secondary = (secondary or "").strip()
+    if not secondary:
+        return primary
+    if not primary:
+        return secondary
+    if secondary in primary:
+        return primary
+    return f"{primary} - {secondary}"
+
+
 @router.get("", response_model=List[SessionResponse])
 def list_sessions(store: SessionStore = Depends(get_session_store)) -> List[SessionResponse]:
     sessions = store.list_sessions()
@@ -61,16 +75,15 @@ def list_sessions(store: SessionStore = Depends(get_session_store)) -> List[Sess
 
 @router.post("", response_model=SessionResponse, status_code=status.HTTP_201_CREATED)
 def create_session(
-    project_name: str = Form(""),
+    document_no: str = Form(""),
     inspection_date: str = Form(""),
-    notes: str = Form(""),
     files: List[UploadFile] = File(...),
     store: SessionStore = Depends(get_session_store),
 ) -> SessionResponse:
     if not files:
         raise HTTPException(status_code=400, detail="At least one file is required.")
 
-    session = store.create_session(project_name, inspection_date, notes)
+    session = store.create_session(document_no, inspection_date)
     saved_files = []
     for upload in files:
         try:
@@ -179,6 +192,20 @@ def save_sections(
     return SectionsResponse(sections=session.get("jobsheet_sections") or [])
 
 
+@router.put("/{session_id}/headings", response_model=HeadingsResponse)
+def save_headings(
+    session_id: str,
+    payload: HeadingsRequest,
+    store: SessionStore = Depends(get_session_store),
+) -> HeadingsResponse:
+    session_id = _normalize_session_id(session_id, store)
+    session = store.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found.")
+    session = store.set_headings(session, payload.headings)
+    return HeadingsResponse(headings=session.get("headings") or [])
+
+
 @router.get("/{session_id}/uploads/{file_id}")
 def get_upload(
     session_id: str,
@@ -288,16 +315,20 @@ def import_json(
         session = store.set_pages(session, pages)
 
     if isinstance(imported_session, dict):
-        for key in (
-            "project_name",
-            "inspection_date",
-            "notes",
-            "selected_photo_ids",
-            "page_count",
-            "headings",
-        ):
-            if key in imported_session and imported_session[key] is not None:
-                session[key] = imported_session[key]
+        document_no = _merge_text(
+            imported_session.get("document_no", ""),
+            imported_session.get("project_name", ""),
+        )
+        if document_no:
+            session["document_no"] = document_no
+        if imported_session.get("inspection_date") is not None:
+            session["inspection_date"] = imported_session["inspection_date"]
+        if imported_session.get("selected_photo_ids") is not None:
+            session["selected_photo_ids"] = imported_session["selected_photo_ids"]
+        if imported_session.get("page_count") is not None:
+            session["page_count"] = imported_session["page_count"]
+        if imported_session.get("headings") is not None:
+            session["headings"] = imported_session["headings"]
         store.update_session(session)
 
     return _attach_urls(session)
@@ -362,15 +393,10 @@ def export_excel(
     wb = Workbook()
     ws_general = wb.active
     ws_general.title = "General Information"
-    ws_general.append(["Project Name", session.get("project_name", "")])
+    ws_general.append(["Document No", session.get("document_no", "")])
     ws_general.append(["Inspection Date", session.get("inspection_date", "")])
     ws_general.append(["Inspector", first_template.get("inspector", "")])
-    ws_general.append(["Accompanied by", first_template.get("accompanied_by", "")])
-    ws_general.append(["Document No", first_template.get("document_no", "")])
-    ws_general.append(["Client / Site", first_template.get("client_site", "")])
-    ws_general.append(
-        ["Client Logo Image Name", first_template.get("company_logo", "")]
-    )
+    ws_general.append(["Company Logo Image Name", first_template.get("company_logo", "")])
 
     ws_headings = wb.create_sheet("Headings")
     ws_headings.append(["Heading Number", "Heading Name"])
@@ -389,16 +415,12 @@ def export_excel(
         [
             "REF",
             "Area",
-            "Functional Location",
+            "Location",
             "Item Description",
             "Category",
             "Priority",
-            "Item Description",
-            "Condition Description",
-            "Action Type",
             "Required Action",
             "Figure Caption",
-            "Figure Description",
             "Image Name 1",
             "Image Name 2",
             "Image Name 3",
@@ -430,12 +452,8 @@ def export_excel(
                 template.get("item_description", ""),
                 template.get("category", ""),
                 template.get("priority", ""),
-                template.get("item_description", ""),
-                template.get("condition_description", ""),
-                template.get("action_type", ""),
                 template.get("required_action", ""),
-                "",
-                "",
+                template.get("figure_caption", ""),
                 *photo_names[:6],
             ]
         )

server/app/api/schemas.py

@@ -24,9 +24,8 @@ class SessionResponse(BaseModel):
     status: str
     created_at: str
     updated_at: str
-    project_name: str
+    document_no: str
     inspection_date: str
-    notes: str
     uploads: Dict[str, List[FileMeta]] = Field(default_factory=dict)
     selected_photo_ids: List[str] = Field(default_factory=list)
     page_count: int = 0
@@ -64,3 +63,11 @@ class SectionsResponse(BaseModel):
 
 class SectionsRequest(BaseModel):
     sections: List[JobsheetSection] = Field(default_factory=list)
+
+
+class HeadingsRequest(BaseModel):
+    headings: List[Heading] = Field(default_factory=list)
+
+
+class HeadingsResponse(BaseModel):
+    headings: List[Heading] = Field(default_factory=list)

server/app/services/data_import.py

@@ -34,6 +34,18 @@ def _cell_to_str(value: object) -> str:
     return str(value).strip()
 
 
+def _merge_text(primary: str, secondary: str) -> str:
+    primary = (primary or "").strip()
+    secondary = (secondary or "").strip()
+    if not secondary:
+        return primary
+    if not primary:
+        return secondary
+    if secondary in primary:
+        return primary
+    return f"{primary} - {secondary}"
+
+
 def _parse_general_info(rows: Iterable[Iterable[object]]) -> Dict[str, str]:
     info: Dict[str, str] = {}
     for row in rows:
@@ -91,6 +103,9 @@ def _parse_headings(rows: Iterable[Iterable[object]]) -> List[Dict[str, str]]:
         name = _cell_to_str(row[name_idx]) if name_idx is not None and name_idx < len(row) else ""
 
         if not number and not name:
+            if len(row) >= 2:
+                number = _cell_to_str(row[0])
+                name = _cell_to_str(row[1])
             combined = _cell_to_str(row[0] if row else "")
             match = re.match(r"^(\\d+)\\s*[-–.]?\\s*(.+)$", combined)
             if match:
@@ -110,6 +125,9 @@ def _header_map(headers: List[str]) -> Dict[str, List[int]]:
         if not name:
             continue
         mapping.setdefault(name, []).append(idx)
+        compact = re.sub(r"[^a-z0-9]", "", name)
+        if compact and compact != name:
+            mapping.setdefault(compact, []).append(idx)
     return mapping
 
 
@@ -172,14 +190,13 @@ def _parse_items(rows: Iterable[Iterable[object]]) -> List[Dict[str, str | List[
     mapping = _header_map(headers)
     image_indices = _image_column_indices(headers)
 
+    def indices_for(name: str) -> List[int]:
+        return mapping.get(_normalize_text(name)) or []
+
     def first_index(name: str) -> Optional[int]:
-        values = mapping.get(_normalize_text(name)) or []
+        values = indices_for(name)
         return values[0] if values else None
 
-    def second_index(name: str) -> Optional[int]:
-        values = mapping.get(_normalize_text(name)) or []
-        return values[1] if len(values) > 1 else None
-
     def image_index(n: int) -> Optional[int]:
         return image_indices.get(n) or first_index(f"image name {n}") or first_index(
             f"image {n}"
@@ -196,12 +213,44 @@ def _parse_items(rows: Iterable[Iterable[object]]) -> List[Dict[str, str | List[
         cells = list(row)
         if not any(_cell_to_str(cell) for cell in cells):
             continue
-        item_desc = _row_value(cells, second_index("item description")) or _row_value(
-            cells, first_index("item description")
-        )
+        item_desc_candidates = [
+            _row_value(cells, idx) for idx in indices_for("item description")
+        ]
+        item_desc = max(item_desc_candidates, key=len) if item_desc_candidates else ""
+        condition_desc = _row_value(cells, first_index("condition description"))
+        if condition_desc and condition_desc not in item_desc:
+            item_desc = " - ".join(
+                [value for value in [item_desc, condition_desc] if value]
+            )
         reference = _row_value(cells, ref_index)
         if not reference:
             reference = _find_reference_value(cells)
+        action_type = _row_value(cells, first_index("action type"))
+        required_action_candidates = [
+            _row_value(cells, idx) for idx in indices_for("required action")
+        ]
+        required_action = (
+            max(required_action_candidates, key=len)
+            if required_action_candidates
+            else ""
+        )
+        if action_type and action_type not in required_action:
+            required_action = " - ".join(
+                [value for value in [action_type, required_action] if value]
+            )
+        figure_caption_candidates = [
+            _row_value(cells, idx) for idx in indices_for("figure caption")
+        ]
+        figure_caption = (
+            max(figure_caption_candidates, key=len)
+            if figure_caption_candidates
+            else ""
+        )
+        figure_description = _row_value(cells, first_index("figure description"))
+        if figure_description and figure_description not in figure_caption:
+            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)),
@@ -230,16 +279,13 @@ def _parse_items(rows: Iterable[Iterable[object]]) -> List[Dict[str, str | List[
                 "reference": reference,
                 "area": _row_value(cells, area_index),
                 "functional_location": _row_value(
-                    cells, first_index("functional location")
+                    cells, first_index("functional location") or first_index("location")
                 ),
                 "item_description": item_desc,
                 "category": _row_value(cells, first_index("category")),
                 "priority": _row_value(cells, first_index("priority")),
-                "condition_description": _row_value(
-                    cells, first_index("condition description")
-                ),
-                "action_type": _row_value(cells, first_index("action type")),
-                "required_action": _row_value(cells, first_index("required action")),
+                "required_action": required_action,
+                "figure_caption": figure_caption,
                 "image_names": [name for name in image_names if name],
             }
         )
@@ -378,9 +424,9 @@ def populate_session_from_data_files(
     items = parsed.get("items") or []
 
     # Update session-wide fields if provided
-    project_name = general.get("project name")
-    if project_name:
-        session["project_name"] = project_name
+    document_no = general.get("document no") or general.get("document number") or ""
+    if document_no:
+        session["document_no"] = document_no
     inspection_date = general.get("inspection date")
     if inspection_date:
         session["inspection_date"] = inspection_date
@@ -390,11 +436,8 @@ def populate_session_from_data_files(
     )
 
     if isinstance(headings, dict):
-        headings = [
-            {"number": key, "name": value} for key, value in headings.items()
-        ]
-    if headings:
-        session["headings"] = headings
+        headings = [{"number": key, "name": value} for key, value in headings.items()]
+    session["headings"] = headings if isinstance(headings, list) else []
 
     sections: List[dict] = []
     selected_photo_ids: List[str] = []
@@ -408,10 +451,7 @@ def populate_session_from_data_files(
         template = {
             "inspection_date": inspection_date or session.get("inspection_date", ""),
             "inspector": general.get("inspector", ""),
-            "accompanied_by": general.get("accompanied by", ""),
-            "document_no": general.get("document no", ""),
-            "project": general.get("project name", session.get("project_name", "")),
-            "client_site": general.get("client / site", ""),
+            "document_no": document_no or session.get("document_no", ""),
             "company_logo": company_logo,
             "reference": item.get("reference", ""),
             "area": item.get("area", ""),
@@ -419,9 +459,8 @@ def populate_session_from_data_files(
             "item_description": item.get("item_description", ""),
             "category": item.get("category", ""),
             "priority": item.get("priority", ""),
-            "condition_description": item.get("condition_description", ""),
-            "action_type": item.get("action_type", ""),
             "required_action": item.get("required_action", ""),
+            "figure_caption": item.get("figure_caption", ""),
         }
         image_names = item.get("image_names", []) or []
         photo_ids = _photo_ids_for_names(image_names, photo_lookup)

server/app/services/pdf_reportlab.py

@@ -221,7 +221,7 @@ def render_report_pdf(
     width, height = A4
     margin = 10 * mm
     header_h = 20 * mm
-    footer_h = 8 * mm
+    footer_h = 12 * mm
     gap = 4 * mm
     photo_col_gap = 6 * mm
     photo_row_gap = 6 * mm
@@ -280,9 +280,11 @@ def render_report_pdf(
 
     print_pages: List[dict] = []
     for section_index, section in enumerate(sections):
+        section_title = _safe_text(section.get("title")) or f"Section {section_index + 1}"
         section_pages = section.get("pages") or []
         for page_index, page in enumerate(section_pages):
             template = page.get("template") or {}
+            figure_caption = _safe_text(template.get("figure_caption"))
             base_variant = (
                 (page.get("variant") or "").strip().lower() if isinstance(page, dict) else ""
             )
@@ -296,7 +298,7 @@ def render_report_pdf(
                     continue
                 path = store.resolve_upload_path(session, pid)
                 if path and path.exists():
-                    label = _safe_text(item.get("name") or path.name)
+                    label = figure_caption or _safe_text(item.get("name") or path.name)
                     photo_entries.append({"path": path, "label": label})
             if base_variant == "photos":
                 chunks = _chunk(photo_entries, max_photos_photos) or [[]]
@@ -308,6 +310,7 @@ def render_report_pdf(
                             "photos": chunk,
                             "variant": "photos",
                             "section_index": section_index,
+                            "section_title": section_title,
                         }
                     )
             else:
@@ -325,6 +328,7 @@ def render_report_pdf(
                             "photos": chunk,
                             "variant": variant,
                             "section_index": section_index,
+                            "section_title": section_title,
                         }
                     )
 
@@ -335,6 +339,8 @@ def render_report_pdf(
                 "template": {},
                 "photos": [],
                 "variant": "full",
+                "section_index": 0,
+                "section_title": "Section 1",
             }
         ]
 
@@ -351,6 +357,20 @@ def render_report_pdf(
         template = payload["template"]
         photos = payload["photos"]
         variant = payload["variant"]
+        doc_number = _safe_text(template.get("document_no")) or _safe_text(
+            session.get("document_no")
+        )
+        if not doc_number and session.get("id"):
+            doc_number = f"REP-{session['id'][:8].upper()}"
+        section_index = payload.get("section_index")
+        section_title = _safe_text(payload.get("section_title"))
+        section_label = ""
+        if isinstance(section_index, int):
+            base_label = f"Section {section_index + 1}"
+            if section_title and section_title != base_label:
+                section_label = f"{base_label} - {section_title}"
+            else:
+                section_label = base_label
 
         header_y = height - margin
         content_top = header_y - header_h - gap
@@ -388,10 +408,11 @@ def render_report_pdf(
             )
         pdf.setFillColor(gray_900)
         pdf.setFont("Helvetica-Bold", 13)
-        pdf.drawCentredString(width / 2, header_y - 7 * mm, "RepEx Inspection Job Sheet")
-        pdf.setFillColor(gray_600)
-        pdf.setFont("Helvetica", 11)
-        pdf.drawCentredString(width / 2, header_y - 13 * mm, f"Page {output_index + 1} of {total_pages}")
+        pdf.drawCentredString(
+            width / 2,
+            header_y - 7 * mm,
+            doc_number or "Document No",
+        )
         pdf.setStrokeColor(gray_200)
         pdf.line(margin, header_y - 17 * mm, width - margin, header_y - 17 * mm)
 
@@ -410,8 +431,6 @@ def render_report_pdf(
             area = _safe_text(template.get("area"))
             location = _safe_text(template.get("functional_location"))
             item_desc = _safe_text(template.get("item_description"))
-            condition_desc = _safe_text(template.get("condition_description"))
-            action_type = _safe_text(template.get("action_type"))
             required_action = _safe_text(template.get("required_action"))
 
             left_w = (width - 2 * margin) * 0.6
@@ -522,8 +541,8 @@ def render_report_pdf(
             pdf.drawCentredString(pr_label_x, y - 2 + badge_h / 2 - 4, pr_text)
             y -= 10 * mm
 
-            condition = " - ".join([v for v in [item_desc, condition_desc] if v])
-            action = " - ".join([v for v in [action_type, required_action] if v])
+            condition = item_desc
+            action = required_action
 
             pdf.setFillColor(gray_500)
             pdf.setFont("Helvetica", 11)
@@ -650,9 +669,18 @@ def render_report_pdf(
         # Footer
         footer_y = margin
         pdf.setFillColor(gray_500)
-        pdf.setFont("Helvetica", 11)
-        pdf.drawCentredString(width / 2, footer_y + 5 * mm, "Prosento - (c) 2026 All Rights Reserved")
-        pdf.drawCentredString(width / 2, footer_y + 1 * mm, "Automatically generated job sheet")
+        pdf.setFont("Helvetica-Bold", 10)
+        pdf.drawCentredString(width / 2, footer_y + 8 * mm, "RepEx Inspection Job Sheet")
+        pdf.setFont("Helvetica", 9)
+        pdf.drawCentredString(
+            width / 2,
+            footer_y + 4 * mm,
+            "Prosento - (c) 2026 All Rights Reserved - Automatically generated job sheet",
+        )
+        page_line = f"Page {output_index + 1} of {total_pages}"
+        if section_label:
+            page_line = f"{section_label} - {page_line}"
+        pdf.drawCentredString(width / 2, footer_y + 1 * mm, page_line)
 
         pdf.showPage()
 

server/app/services/session_store.py

@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+import copy
 import json
 import re
 from dataclasses import dataclass
@@ -60,6 +61,54 @@ def _validate_session_id(session_id: str) -> str:
     return normalized
 
 
+def _merge_text(primary: str, secondary: str) -> str:
+    primary = (primary or "").strip()
+    secondary = (secondary or "").strip()
+    if not secondary:
+        return primary
+    if not primary:
+        return secondary
+    if secondary in primary:
+        return primary
+    return f"{primary} - {secondary}"
+
+
+def _normalize_template_fields(template: Optional[dict]) -> dict:
+    if not isinstance(template, dict):
+        return {}
+    normalized = dict(template)
+
+    item_description = _merge_text(
+        normalized.get("item_description", ""),
+        normalized.pop("condition_description", ""),
+    )
+    if item_description:
+        normalized["item_description"] = item_description
+    else:
+        normalized.pop("item_description", None)
+
+    action_type = normalized.pop("action_type", "")
+    required_action = _merge_text(action_type, normalized.get("required_action", ""))
+    if required_action:
+        normalized["required_action"] = required_action
+    else:
+        normalized.pop("required_action", None)
+
+    figure_caption = _merge_text(
+        normalized.get("figure_caption", ""),
+        normalized.pop("figure_description", ""),
+    )
+    if figure_caption:
+        normalized["figure_caption"] = figure_caption
+    else:
+        normalized.pop("figure_caption", None)
+
+    for legacy_key in ("accompanied_by", "project", "client_site"):
+        normalized.pop(legacy_key, None)
+
+    return normalized
+
+
 class SessionStore:
     def __init__(self, base_dir: Optional[Path] = None) -> None:
         settings = get_settings()
@@ -68,17 +117,35 @@ class SessionStore:
         self.sessions_dir.mkdir(parents=True, exist_ok=True)
         self.max_upload_bytes = settings.max_upload_mb * 1024 * 1024
         self._lock = Lock()
+        self._migrate_storage()
+
+    def _migrate_storage(self) -> None:
+        for session_file in self.sessions_dir.glob("*/session.json"):
+            try:
+                raw = json.loads(session_file.read_text(encoding="utf-8"))
+            except Exception:
+                continue
+            normalized = self._normalize_session(copy.deepcopy(raw))
+            if normalized != raw:
+                try:
+                    session_file.write_text(
+                        json.dumps(normalized, indent=2), encoding="utf-8"
+                    )
+                except Exception:
+                    continue
 
     def list_sessions(self) -> List[dict]:
         sessions: List[dict] = []
         for session_file in sorted(self.sessions_dir.glob("*/session.json"), reverse=True):
             try:
-                sessions.append(json.loads(session_file.read_text(encoding="utf-8")))
+                session = json.loads(session_file.read_text(encoding="utf-8"))
+                session = self._normalize_session(session)
+                sessions.append(session)
             except Exception:
                 continue
         return sessions
 
-    def create_session(self, project_name: str, inspection_date: str, notes: str) -> dict:
+    def create_session(self, document_no: str, inspection_date: str) -> dict:
         session_id = uuid4().hex
         now = _now_iso()
         session = {
@@ -86,14 +153,14 @@ class SessionStore:
             "status": "ready",
             "created_at": now,
             "updated_at": now,
-            "project_name": project_name,
+            "document_no": document_no,
             "inspection_date": inspection_date,
-            "notes": notes,
             "uploads": {"photos": [], "documents": [], "data_files": []},
             "selected_photo_ids": [],
             "page_count": 0,
             "pages": [],
             "jobsheet_sections": [],
+            "headings": [],
         }
         self._save_session(session)
         return session
@@ -106,11 +173,13 @@ class SessionStore:
         if not session_path.exists():
             return None
         try:
-            return json.loads(session_path.read_text(encoding="utf-8"))
+            session = json.loads(session_path.read_text(encoding="utf-8"))
+            return self._normalize_session(session)
         except Exception:
             return None
 
     def update_session(self, session: dict) -> None:
+        session = self._normalize_session(session)
         session["updated_at"] = _now_iso()
         self._save_session(session)
 
@@ -143,12 +212,19 @@ class SessionStore:
     def set_pages(self, session: dict, pages: List[dict]) -> dict:
         if not pages:
             pages = [{"items": []}]
+        normalized_pages = []
+        for page in pages:
+            if not isinstance(page, dict):
+                normalized_pages.append({"items": []})
+                continue
+            template = _normalize_template_fields(page.get("template"))
+            normalized_pages.append({**page, "template": template})
         # Legacy compatibility: store as a single section.
         session["jobsheet_sections"] = [
-            {"id": uuid4().hex, "title": "Section 1", "pages": pages}
+            {"id": uuid4().hex, "title": "Section 1", "pages": normalized_pages}
         ]
         session["pages"] = []
-        session["page_count"] = len(pages)
+        session["page_count"] = len(normalized_pages)
         self.update_session(session)
         return session
 
@@ -179,11 +255,18 @@ class SessionStore:
                     else:
                         normalized_pages.append(page)
                 pages = normalized_pages
+            normalized_pages = []
+            for page in pages:
+                if not isinstance(page, dict):
+                    normalized_pages.append({"items": []})
+                    continue
+                template = _normalize_template_fields(page.get("template"))
+                normalized_pages.append({**page, "template": template})
             normalized.append(
                 {
                     "id": section.get("id") or uuid4().hex,
                     "title": section.get("title") or "Section",
-                    "pages": pages if pages else [{"items": []}],
+                    "pages": normalized_pages if normalized_pages else [{"items": []}],
                 }
             )
         if not normalized:
@@ -194,14 +277,50 @@ class SessionStore:
         self.update_session(session)
         return session
 
+    def set_headings(self, session: dict, headings: List[dict]) -> dict:
+        normalized: List[dict] = []
+        for heading in headings or []:
+            if hasattr(heading, "model_dump"):
+                heading = heading.model_dump()
+            elif hasattr(heading, "dict"):
+                heading = heading.dict()
+            if not isinstance(heading, dict):
+                continue
+            number = str(heading.get("number") or "").strip()
+            name = str(heading.get("name") or "").strip()
+            normalized.append({"number": number, "name": name})
+        session["headings"] = normalized
+        self.update_session(session)
+        return session
+
     def ensure_sections(self, session: dict) -> List[dict]:
         sections = session.get("jobsheet_sections") or []
         if sections:
+            normalized_sections: List[dict] = []
+            for section in sections:
+                if not isinstance(section, dict):
+                    continue
+                pages = section.get("pages") or []
+                normalized_pages = []
+                for page in pages:
+                    if not isinstance(page, dict):
+                        normalized_pages.append({"items": []})
+                        continue
+                    template = _normalize_template_fields(page.get("template"))
+                    normalized_pages.append({**page, "template": template})
+                normalized_sections.append(
+                    {
+                        "id": section.get("id") or uuid4().hex,
+                        "title": section.get("title") or "Section",
+                        "pages": normalized_pages if normalized_pages else [{"items": []}],
+                    }
+                )
+            session["jobsheet_sections"] = normalized_sections
             session["page_count"] = sum(
-                len(section.get("pages") or []) for section in sections
+                len(section.get("pages") or []) for section in normalized_sections
             )
             self.update_session(session)
-            return sections
+            return normalized_sections
 
         pages = session.get("pages") or []
         if not pages:
@@ -217,6 +336,76 @@ class SessionStore:
         self.update_session(session)
         return sections
 
+    def _normalize_session(self, session: dict) -> dict:
+        if not isinstance(session, dict):
+            return session
+        document_no = _merge_text(
+            session.get("document_no", ""),
+            session.get("project_name", ""),
+        )
+        if document_no:
+            session["document_no"] = document_no
+        session.pop("project_name", None)
+        session.pop("notes", None)
+
+        headings = session.get("headings")
+        if isinstance(headings, dict):
+            session["headings"] = [
+                {"number": str(key).strip(), "name": str(value).strip()}
+                for key, value in headings.items()
+            ]
+        elif isinstance(headings, list):
+            normalized_headings = []
+            for heading in headings:
+                if hasattr(heading, "model_dump"):
+                    heading = heading.model_dump()
+                elif hasattr(heading, "dict"):
+                    heading = heading.dict()
+                if not isinstance(heading, dict):
+                    continue
+                number = str(heading.get("number") or "").strip()
+                name = str(heading.get("name") or "").strip()
+                normalized_headings.append({"number": number, "name": name})
+            session["headings"] = normalized_headings
+        else:
+            session["headings"] = []
+
+        pages = session.get("pages") or []
+        if pages:
+            normalized_pages = []
+            for page in pages:
+                if not isinstance(page, dict):
+                    normalized_pages.append({"items": []})
+                    continue
+                template = _normalize_template_fields(page.get("template"))
+                normalized_pages.append({**page, "template": template})
+            session["pages"] = normalized_pages
+
+        sections = session.get("jobsheet_sections") or []
+        if sections:
+            normalized_sections = []
+            for section in sections:
+                if not isinstance(section, dict):
+                    continue
+                pages = section.get("pages") or []
+                normalized_pages = []
+                for page in pages:
+                    if not isinstance(page, dict):
+                        normalized_pages.append({"items": []})
+                        continue
+                    template = _normalize_template_fields(page.get("template"))
+                    normalized_pages.append({**page, "template": template})
+                normalized_sections.append(
+                    {
+                        "id": section.get("id") or uuid4().hex,
+                        "title": section.get("title") or "Section",
+                        "pages": normalized_pages if normalized_pages else [{"items": []}],
+                    }
+                )
+            session["jobsheet_sections"] = normalized_sections
+
+        return session
+
     def save_upload(self, session_id: str, upload: UploadFile) -> StoredFile:
         filename = _safe_name(upload.filename or "upload")
         ext = Path(filename).suffix