Data Input Rework

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

@@ -194,7 +194,7 @@
         Photo Documentation
       </h2>
 
-      <div class="grid grid-cols-2 gap-3">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
         <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
           <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
             Photo slot
@@ -212,29 +212,42 @@
             Figure 2
           </figcaption>
         </figure>
-      </div>
-    </section>
 
-    <!-- Signatures -->
-    <section class="mt-6" aria-label="Signatures">
-      <div class="grid grid-cols-3 gap-4">
-        <div class="border-t pt-2">
-          <div class="text-xs font-medium text-gray-500">Inspected By</div>
-          <div class="h-10 mt-1 border-b border-gray-300"></div>
-          <p class="text-[11px] text-gray-500 mt-1">Name / Signature / Date</p>
-        </div>
+        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
+          <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
+            Photo slot
+          </div>
+          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
+            Figure 3
+          </figcaption>
+        </figure>
 
-        <div class="border-t pt-2">
-          <div class="text-xs font-medium text-gray-500">Approved By</div>
-          <div class="h-10 mt-1 border-b border-gray-300"></div>
-          <p class="text-[11px] text-gray-500 mt-1">Name / Signature / Date</p>
-        </div>
+        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
+          <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
+            Photo slot
+          </div>
+          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
+            Figure 4
+          </figcaption>
+        </figure>
 
-        <div class="border-t pt-2">
-          <div class="text-xs font-medium text-gray-500">Completed By</div>
-          <div class="h-10 mt-1 border-b border-gray-300"></div>
-          <p class="text-[11px] text-gray-500 mt-1">Name / Signature / Date</p>
-        </div>
+        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
+          <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
+            Photo slot
+          </div>
+          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
+            Figure 5
+          </figcaption>
+        </figure>
+
+        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
+          <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
+            Photo slot
+          </div>
+          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
+            Figure 6
+          </figcaption>
+        </figure>
       </div>
     </section>
 

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 InputDataPage from "./pages/InputDataPage";
 import EditReportPage from "./pages/EditReportPage";
 import EditLayoutsPage from "./pages/EditLayoutsPage";
 import ExportPage from "./pages/ExportPage";
@@ -16,6 +17,7 @@ export default function App() {
         <Route path="/processing" element={<ProcessingPage />} />
         <Route path="/review-setup" element={<ReviewSetupPage />} />
         <Route path="/report-viewer" element={<ReportViewerPage />} />
+        <Route path="/input-data" element={<InputDataPage />} />
         <Route path="/edit-report" element={<EditReportPage />} />
         <Route path="/edit-layouts" element={<EditLayoutsPage />} />
         <Route path="/export" element={<ExportPage />} />

frontend/src/components/JobSheetTemplate.tsx

@@ -1,4 +1,4 @@
-import type { Session, TemplateFields } from "../types/session";
+import type { FileMeta, Session, TemplateFields } from "../types/session";
 import { formatDocNumber, getPhotosForPage } from "../lib/report";
 
 type JobSheetTemplateProps = {
@@ -6,6 +6,8 @@ type JobSheetTemplateProps = {
   pageIndex: number;
   pageCount: number;
   template?: TemplateFields;
+  photos?: FileMeta[];
+  variant?: "full" | "photos";
 };
 
 type PhotoSlotProps = {
@@ -41,6 +43,8 @@ export function JobSheetTemplate({
   pageIndex,
   pageCount,
   template,
+  photos,
+  variant = "full",
 }: JobSheetTemplateProps) {
   const inspectionDate =
     template?.inspection_date ?? session?.inspection_date ?? "";
@@ -60,7 +64,9 @@ export function JobSheetTemplate({
   const conditionDescription =
     template?.condition_description ?? session?.notes ?? "";
   const requiredAction = template?.required_action ?? "";
-  const photos = getPhotosForPage(session, pageIndex, 2);
+  const resolvedPhotos = photos && photos.length ? photos : getPhotosForPage(session, pageIndex, 1);
+  const photoGridClass = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3";
+  const limitedPhotos = resolvedPhotos.slice(0, 6);
 
   return (
     <div className="w-full h-full p-5 text-[11px] text-gray-700">
@@ -87,199 +93,191 @@ export function JobSheetTemplate({
         </div>
       </header>
 
-      <section className="mb-4" aria-labelledby="inspection-details-title">
-        <h2
-          id="inspection-details-title"
-          className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2"
-        >
-          Inspection Details
-        </h2>
+      {variant === "full" ? (
+        <>
+          <section className="mb-4" aria-labelledby="inspection-details-title">
+            <h2
+              id="inspection-details-title"
+              className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2"
+            >
+              Inspection Details
+            </h2>
 
-        <dl className="grid grid-cols-2 md:grid-cols-4 gap-2 bg-gray-50 border border-gray-200 rounded-lg p-3">
-          <div className="space-y-0.5">
-            <dt className="text-[10px] font-medium text-gray-500">
-              Inspection Date
-            </dt>
-            <dd className="template-field text-[11px] font-semibold text-gray-900">
-              {inspectionDate}
-            </dd>
-          </div>
+            <dl className="grid grid-cols-2 md:grid-cols-4 gap-2 bg-gray-50 border border-gray-200 rounded-lg p-3">
+              <div className="space-y-0.5">
+                <dt className="text-[10px] font-medium text-gray-500">
+                  Inspection Date
+                </dt>
+                <dd className="template-field text-[11px] font-semibold text-gray-900">
+                  {inspectionDate}
+                </dd>
+              </div>
 
-          <div className="space-y-0.5">
-            <dt className="text-[10px] font-medium text-gray-500">Inspector</dt>
-            <dd className="template-field text-[11px] font-semibold text-gray-900">
-              {inspector}
-            </dd>
-          </div>
+              <div className="space-y-0.5">
+                <dt className="text-[10px] font-medium text-gray-500">Inspector</dt>
+                <dd className="template-field text-[11px] font-semibold text-gray-900">
+                  {inspector}
+                </dd>
+              </div>
 
-          <div className="space-y-0.5">
-            <dt className="text-[10px] font-medium text-gray-500">
-              Accompanied By
-            </dt>
-            <dd className="template-field text-[11px] font-semibold text-gray-900">
-              {accompaniedBy}
-            </dd>
-          </div>
+              <div className="space-y-0.5">
+                <dt className="text-[10px] font-medium text-gray-500">
+                  Accompanied By
+                </dt>
+                <dd className="template-field text-[11px] font-semibold text-gray-900">
+                  {accompaniedBy}
+                </dd>
+              </div>
 
-          <div className="space-y-0.5">
-            <dt className="text-[10px] font-medium text-gray-500">Document No</dt>
-            <dd className="template-field text-[11px] font-mono font-semibold text-gray-900">
-              {docNumber}
-            </dd>
-          </div>
+              <div className="space-y-0.5">
+                <dt className="text-[10px] font-medium text-gray-500">Document No</dt>
+                <dd className="template-field text-[11px] font-mono font-semibold text-gray-900">
+                  {docNumber}
+                </dd>
+              </div>
 
-          <div className="space-y-0.5 md:col-span-2">
-            <dt className="text-[10px] font-medium text-gray-500">Project</dt>
-            <dd className="template-field text-[11px] font-semibold text-gray-900">
-              {projectName}
-            </dd>
-          </div>
+              <div className="space-y-0.5 md:col-span-2">
+                <dt className="text-[10px] font-medium text-gray-500">Project</dt>
+                <dd className="template-field text-[11px] font-semibold text-gray-900">
+                  {projectName}
+                </dd>
+              </div>
 
-          <div className="space-y-0.5 md:col-span-2">
-            <dt className="text-[10px] font-medium text-gray-500">
-              Client / Site
-            </dt>
-            <dd className="template-field text-[11px] font-semibold text-gray-900">
-              {clientSite}
-            </dd>
-          </div>
-        </dl>
-      </section>
+              <div className="space-y-0.5 md:col-span-2">
+                <dt className="text-[10px] font-medium text-gray-500">
+                  Client / Site
+                </dt>
+                <dd className="template-field text-[11px] font-semibold text-gray-900">
+                  {clientSite}
+                </dd>
+              </div>
+            </dl>
+          </section>
 
-      <section className="mb-4" aria-labelledby="observations-title">
-        <h2
-          id="observations-title"
-          className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2"
-        >
-          Observations and Findings
-        </h2>
+          <section className="mb-4" aria-labelledby="observations-title">
+            <h2
+              id="observations-title"
+              className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2"
+            >
+              Observations and Findings
+            </h2>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-          <div className="space-y-2">
-            <div className="grid grid-cols-2 gap-2">
-              <div className="space-y-0.5">
-                <div className="text-[10px] font-medium text-gray-500">
-                  Reference
-                </div>
-                <div className="template-field text-[11px] font-semibold text-gray-900">
-                  {reference}
-                </div>
-              </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="space-y-0.5">
+                    <div className="text-[10px] font-medium text-gray-500">
+                      Reference
+                    </div>
+                    <div className="template-field text-[11px] font-semibold text-gray-900">
+                      {reference}
+                    </div>
+                  </div>
 
-              <div className="space-y-0.5">
-                <div className="text-[10px] font-medium text-gray-500">
-                  Action Type
-                </div>
-                <div className="template-field text-[11px] font-semibold text-gray-900">
-                  {actionType}
+                  <div className="space-y-0.5">
+                    <div className="text-[10px] font-medium text-gray-500">
+                      Action Type
+                    </div>
+                    <div className="template-field text-[11px] font-semibold text-gray-900">
+                      {actionType}
+                    </div>
+                  </div>
+
+                  <div className="space-y-0.5 col-span-2">
+                    <div className="text-[10px] font-medium text-gray-500">
+                      Item Description
+                    </div>
+                    <div className="template-field text-[11px] font-semibold text-gray-900">
+                      {itemDescription}
+                    </div>
+                  </div>
                 </div>
               </div>
 
-              <div className="space-y-0.5 col-span-2">
-                <div className="text-[10px] font-medium text-gray-500">
-                  Item Description
-                </div>
-                <div className="template-field text-[11px] font-semibold text-gray-900">
-                  {itemDescription}
+              <div className="space-y-2">
+                <div className="space-y-0.5">
+                  <div className="text-[10px] font-medium text-gray-500">
+                    Functional Location
+                  </div>
+                  <div className="template-field text-[11px] font-semibold text-gray-900">
+                    {functionalLocation}
+                  </div>
                 </div>
               </div>
-            </div>
-          </div>
 
-          <div className="space-y-2">
-            <div className="space-y-0.5">
-              <div className="text-[10px] font-medium text-gray-500">
-                Functional Location
-              </div>
-              <div className="template-field text-[11px] font-semibold text-gray-900">
-                {functionalLocation}
+              <div className="md:col-span-2 flex justify-center">
+                <div className="inline-flex items-center gap-10">
+                  <div className="text-center space-y-1">
+                    <div className="text-[10px] font-medium text-gray-500">
+                      Category
+                    </div>
+                    <span className="template-field inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-[11px] font-semibold text-gray-900 min-w-[96px]">
+                      {category}
+                    </span>
+                  </div>
+
+                  <div className="text-center space-y-1">
+                    <div className="text-[10px] font-medium text-gray-500">
+                      Priority
+                    </div>
+                    <span className="template-field inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-[11px] font-semibold text-gray-900 min-w-[96px]">
+                      {priority}
+                    </span>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
 
-          <div className="md:col-span-2 flex justify-center">
-            <div className="inline-flex items-center gap-10">
-              <div className="text-center space-y-1">
+              <div className="md:col-span-2 space-y-1">
                 <div className="text-[10px] font-medium text-gray-500">
-                  Category
+                  Condition Description
+                </div>
+                <div className="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
+                  <p className="template-field template-field-multiline text-amber-800 text-[11px] font-semibold leading-snug">
+                    {conditionDescription}
+                  </p>
                 </div>
-                <span className="template-field inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-[11px] font-semibold text-gray-900 min-w-[96px]">
-                  {category}
-                </span>
               </div>
 
-              <div className="text-center space-y-1">
+              <div className="md:col-span-2 space-y-1">
                 <div className="text-[10px] font-medium text-gray-500">
-                  Priority
+                  Required Action
+                </div>
+                <div className="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
+                  <p className="template-field template-field-multiline text-blue-800 text-[11px] font-semibold leading-snug">
+                    {requiredAction}
+                  </p>
                 </div>
-                <span className="template-field inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-[11px] font-semibold text-gray-900 min-w-[96px]">
-                  {priority}
-                </span>
               </div>
             </div>
-          </div>
-
-          <div className="md:col-span-2 space-y-1">
-            <div className="text-[10px] font-medium text-gray-500">
-              Condition Description
-            </div>
-            <div className="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
-              <p className="template-field template-field-multiline text-amber-800 text-[11px] font-semibold leading-snug">
-                {conditionDescription}
-              </p>
-            </div>
-          </div>
-
-          <div className="md:col-span-2 space-y-1">
-            <div className="text-[10px] font-medium text-gray-500">
-              Required Action
-            </div>
-            <div className="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
-              <p className="template-field template-field-multiline text-blue-800 text-[11px] font-semibold leading-snug">
-                {requiredAction}
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
+          </section>
+        </>
+      ) : null}
 
       <section className="mb-4 avoid-break">
         <div className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
-          Photo Documentation
-        </div>
-        <div className="grid grid-cols-2 gap-3">
-          <PhotoSlot
-            url={photos[0]?.url}
-            label={photos[0]?.name || "Figure 1"}
-          />
-          <PhotoSlot
-            url={photos[1]?.url}
-            label={photos[1]?.name || "Figure 2"}
-          />
+          {variant === "photos" ? "Photo Documentation (continued)" : "Photo Documentation"}
         </div>
-      </section>
-
-      <section className="mt-4">
-        <div className="grid grid-cols-3 gap-3 text-[10px] text-gray-600">
-          <div>
-            <div className="border-t border-gray-300 pt-1">Inspected by</div>
-            <div className="h-5 border-b border-gray-200" />
-          </div>
-          <div>
-            <div className="border-t border-gray-300 pt-1">Approved by</div>
-            <div className="h-5 border-b border-gray-200" />
-          </div>
-          <div>
-            <div className="border-t border-gray-300 pt-1">Completed by</div>
-            <div className="h-5 border-b border-gray-200" />
-          </div>
+        <div className={photoGridClass}>
+          {limitedPhotos.length === 0 ? (
+            <PhotoSlot url={undefined} label="No photo selected" />
+          ) : (
+            limitedPhotos.map((photo, index) => (
+              <PhotoSlot
+                key={photo?.id || `${index}`}
+                url={photo?.url}
+                label={photo?.name || `Figure ${index + 1}`}
+              />
+            ))
+          )}
         </div>
       </section>
 
-      <footer className="mt-4 text-center text-[10px] text-gray-500">
-        <p>RepEx - (c) 2026 All Rights Reserved</p>
-        <p className="mt-0.5">Generated by RepEx</p>
-      </footer>
+      {variant === "full" ? (
+        <footer className="mt-4 text-center text-[10px] text-gray-500">
+          <p>RepEx - (c) 2026 All Rights Reserved</p>
+          <p className="mt-0.5">Generated by RepEx</p>
+        </footer>
+      ) : null}
     </div>
   );
 }

frontend/src/components/ReportPageCanvas.tsx

@@ -1,7 +1,7 @@
 import type { CSSProperties } from "react";
 
-import type { Page, Session, TemplateFields } from "../types/session";
-import { BASE_H, BASE_W } from "../lib/report";
+import type { FileMeta, Page, Session, TemplateFields } from "../types/session";
+import { BASE_H, BASE_W, getPhotosForPage } from "../lib/report";
 import { JobSheetTemplate } from "./JobSheetTemplate";
 
 type ReportPageCanvasProps = {
@@ -12,6 +12,7 @@ type ReportPageCanvasProps = {
   scale: number;
   template?: TemplateFields;
   className?: string;
+  adaptive?: boolean;
 };
 
 export function ReportPageCanvas({
@@ -22,28 +23,53 @@ export function ReportPageCanvas({
   scale,
   template,
   className = "",
+  adaptive = false,
 }: ReportPageCanvasProps) {
   const items = page?.items ?? [];
   const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
+  const photos = resolvePagePhotos(session, page, pageIndex);
+  const photosPerSheet = 3;
+  const photoSheets = chunkPhotos(photos, photosPerSheet);
+  const sheets = adaptive && photoSheets.length > 1 ? photoSheets : [photos];
+  const sheetHeight = BASE_H * safeScale;
+  const containerHeight = sheetHeight * sheets.length;
 
   return (
-    <div className={["relative w-full h-full overflow-hidden", className].join(" ")}>
+    <div
+      className={["relative w-full", className].join(" ")}
+      style={{ height: `${containerHeight}px` }}
+    >
       <div className="absolute inset-0 pointer-events-none">
-        <div
-          style={{
-            width: `${BASE_W}px`,
-            height: `${BASE_H}px`,
-            transform: `scale(${safeScale})`,
-            transformOrigin: "top left",
-          }}
-        >
-          <JobSheetTemplate
-            session={session}
-            pageIndex={pageIndex}
-            pageCount={pageCount}
-            template={template}
-          />
-        </div>
+        {sheets.map((sheetPhotos, sheetIndex) => (
+          <div
+            key={`sheet-${sheetIndex}`}
+            style={{
+              position: "absolute",
+              top: `${sheetIndex * sheetHeight}px`,
+              left: 0,
+              width: `${BASE_W * safeScale}px`,
+              height: `${sheetHeight}px`,
+            }}
+          >
+            <div
+              style={{
+                width: `${BASE_W}px`,
+                height: `${BASE_H}px`,
+                transform: `scale(${safeScale})`,
+                transformOrigin: "top left",
+              }}
+            >
+              <JobSheetTemplate
+                session={session}
+                pageIndex={pageIndex}
+                pageCount={pageCount}
+                template={template}
+                photos={sheetPhotos}
+                variant={sheetIndex === 0 ? "full" : "photos"}
+              />
+            </div>
+          </div>
+        ))}
       </div>
 
       {items
@@ -110,3 +136,27 @@ export function ReportPageCanvas({
     </div>
   );
 }
+
+function chunkPhotos(photos: FileMeta[], perSheet: number) {
+  if (!photos.length) return [[]];
+  const slices: FileMeta[][] = [];
+  for (let i = 0; i < photos.length; i += perSheet) {
+    slices.push(photos.slice(i, i + perSheet));
+  }
+  return slices;
+}
+
+function resolvePagePhotos(
+  session: Session | null,
+  page: Page | null | undefined,
+  pageIndex: number,
+): FileMeta[] {
+  if (!session) return [];
+  const uploads = session.uploads?.photos ?? [];
+  const byId = new Map(uploads.map((photo) => [photo.id, photo]));
+  const explicit = page?.photo_ids ?? [];
+  if (explicit.length) {
+    return explicit.map((id) => byId.get(id)).filter(Boolean) as FileMeta[];
+  }
+  return getPhotosForPage(session, pageIndex, 1);
+}

frontend/src/components/report-editor.js

@@ -37,6 +37,13 @@ class ReportEditor extends HTMLElement {
     this.hide();
   }
 
+  disconnectedCallback() {
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+  }
+
   // Public API
   open({
     payload,
@@ -78,8 +85,15 @@ class ReportEditor extends HTMLElement {
     this.state.undo = [];
     this.state.redo = [];
 
+    if (!this.$overlay) {
+      this.render();
+      this.bind();
+    }
+
     this.show();
     this.updateAll();
+    requestAnimationFrame(() => this.updateAll());
+    setTimeout(() => this.updateAll(), 0);
 
     if (this.sessionId) {
       this._loadPagesFromServer().then((pages) => {
@@ -207,11 +221,11 @@ class ReportEditor extends HTMLElement {
 
                 <!-- Canvas area -->
                 <div class="flex justify-center">
-                  <div class="relative" data-canvas-wrap>
+                  <div class="relative w-full max-w-[700px]" data-canvas-wrap>
                     <div
                       data-canvas
-                      class="relative bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden select-none"
-                      style="width: min(100%, 700px); aspect-ratio: 210/297;"
+                      class="relative bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden select-none w-full"
+                      style="aspect-ratio: 210/297;"
                       aria-label="Editable A4 canvas"
                     >
                       <!-- items injected here -->
@@ -371,6 +385,16 @@ class ReportEditor extends HTMLElement {
     this.$imgFile = this.querySelector('[data-file="image"]');
     this.$replaceFile = this.querySelector('[data-file="replace"]');
 
+    if (this.$canvas && "ResizeObserver" in window) {
+      this._resizeObserver = new ResizeObserver(() => {
+        if (this.state.isOpen) {
+          this.renderCanvas();
+          this.updateCanvasScale();
+        }
+      });
+      this._resizeObserver.observe(this.$canvas);
+    }
+
     // header buttons
     this.querySelector('[data-btn="close"]').addEventListener("click", () => this.close());
     this.querySelector('[data-btn="save"]').addEventListener("click", () => this._savePages(true));
@@ -517,9 +541,9 @@ class ReportEditor extends HTMLElement {
 
   _getTemplate() {
     if (!this.state.pages.length) return {};
-    const first = this.state.pages[0];
-    if (!first.template) first.template = {};
-    return first.template;
+    const page = this.state.pages[this.state.activePage] || this.state.pages[0];
+    if (!page.template) page.template = {};
+    return page.template;
   }
 
   _bindTemplateFields() {
@@ -564,6 +588,20 @@ class ReportEditor extends HTMLElement {
     return selected.length ? selected : uploads;
   }
 
+  _photosForActivePage(session) {
+    const uploads = (session && session.uploads && session.uploads.photos) || [];
+    const byId = new Map(uploads.map((photo) => [photo.id, photo]));
+    const page = this.activePage || {};
+    const explicit = page.photo_ids || [];
+    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);
+  }
+
   _photoSlot(photo, fallbackLabel) {
     const url =
       photo && (photo.url || (this.sessionId ? `${this._apiRoot()}/sessions/${this.sessionId}/uploads/${photo.id}` : ""));
@@ -615,15 +653,16 @@ class ReportEditor extends HTMLElement {
       template.condition_description || session.notes || "";
     const requiredAction = template.required_action || "";
 
-    const photos = this._selectedPhotos(session);
-    const start = this.state.activePage * 2;
-    const photoA = photos[start];
-    const photoB = photos[start + 1];
+    const photos = this._photosForActivePage(session).slice(0, 6);
+    const photoGridClass = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3";
+    const photoSlots = photos.length
+      ? photos.map((photo, idx) => this._photoSlot(photo, `Figure ${idx + 1}`)).join("")
+      : this._photoSlot(null, "No photo selected");
     const pageNum = this.state.activePage + 1;
     const pageCount = this.state.pages.length || 1;
 
     return `
-      <div class="w-full h-full p-5 text-[11px] text-gray-700">
+      <div class="w-full h-full p-5 text-[11px] text-gray-700" style="color:#374151; font-size:11px;">
         <header class="mb-4 border-b border-gray-200 pb-3">
           <div class="grid grid-cols-[auto,1fr,auto] items-center gap-3">
             <div class="flex items-center">
@@ -746,26 +785,8 @@ class ReportEditor extends HTMLElement {
             Photo Documentation
           </h2>
 
-          <div class="grid grid-cols-2 gap-3">
-            ${this._photoSlot(photoA, "Figure 1")}
-            ${this._photoSlot(photoB, "Figure 2")}
-          </div>
-        </section>
-
-        <section class="mt-4">
-          <div class="grid grid-cols-3 gap-3 text-[10px] text-gray-600">
-            <div>
-              <div class="border-t border-gray-300 pt-1">Inspected by</div>
-              <div class="h-5 border-b border-gray-200"></div>
-            </div>
-            <div>
-              <div class="border-t border-gray-300 pt-1">Approved by</div>
-              <div class="h-5 border-b border-gray-200"></div>
-            </div>
-            <div>
-              <div class="border-t border-gray-300 pt-1">Completed by</div>
-              <div class="h-5 border-b border-gray-200"></div>
-            </div>
+          <div class="${photoGridClass}">
+            ${photoSlots}
           </div>
         </section>
 
@@ -961,9 +982,20 @@ class ReportEditor extends HTMLElement {
 
     const template = document.createElement("div");
     template.className = "absolute inset-0";
+    let templateHtml = "";
+    try {
+      templateHtml = this._templateMarkup();
+    } catch (err) {
+      console.error("Template render failed", err);
+      templateHtml = `
+        <div class="p-4 text-sm text-red-600">
+          Template failed to render. Check console for details.
+        </div>
+      `;
+    }
     template.innerHTML = `
       <div style="width:${this.BASE_W}px; height:${this.BASE_H}px; transform: scale(${scale}); transform-origin: top left;">
-        ${this._templateMarkup()}
+        ${templateHtml}
       </div>
     `;
     this.$canvas.appendChild(template);

frontend/src/index.css

@@ -37,6 +37,11 @@ body {
   page-break-inside: avoid;
 }
 
+report-editor {
+  display: block;
+  width: 100%;
+}
+
 report-editor[data-mode="page"] [data-overlay] {
   position: static;
   inset: auto;

frontend/src/lib/report.ts

@@ -17,7 +17,7 @@ export function getSelectedPhotos(session: Session | null | undefined): FileMeta
 export function getPhotosForPage(
   session: Session | null | undefined,
   pageIndex: number,
-  perPage = 2,
+  perPage = 1,
 ): FileMeta[] {
   const selected = getSelectedPhotos(session);
   const start = pageIndex * perPage;

frontend/src/pages/EditLayoutsPage.tsx

@@ -9,6 +9,7 @@ import {
   Grid,
   Layout,
   Plus,
+  Table,
   Trash2,
 } from "react-feather";
 
@@ -59,19 +60,48 @@ export default function EditLayoutsPage() {
   const totalPages = useMemo(() => Math.max(1, pages.length), [pages.length]);
   const previewWidth = 220;
   const previewScale = previewWidth / BASE_W;
-  const template = pages[0]?.template;
 
-  async function savePages(next: Page[]) {
+  function hasExplicitPhotos(source: Page[]) {
+    return source.some((page) => (page.photo_ids ?? []).length > 0);
+  }
+
+  function flattenPhotoIds(source: Page[]) {
+    const seen = new Set<string>();
+    const result: string[] = [];
+    source.forEach((page) => {
+      (page.photo_ids ?? []).forEach((photoId) => {
+        if (!seen.has(photoId)) {
+          seen.add(photoId);
+          result.push(photoId);
+        }
+      });
+    });
+    return result;
+  }
+
+  async function saveLayout(next: Page[], nextSelectedIds?: string[]) {
     if (!sessionId) return;
     setIsSaving(true);
     setStatus("Saving layout changes...");
     try {
-      const resp = await putJson<{ pages: Page[] }>(
-        `/sessions/${sessionId}/pages`,
-        { pages: next },
-      );
-      const updated = Array.isArray(resp.pages) ? resp.pages : next;
+      const requests: Promise<unknown>[] = [
+        putJson<{ pages: Page[] }>(`/sessions/${sessionId}/pages`, { pages: next }),
+      ];
+      if (nextSelectedIds !== undefined) {
+        requests.push(
+          putJson<Session>(`/sessions/${sessionId}/selection`, {
+            selected_photo_ids: nextSelectedIds,
+          }),
+        );
+      }
+      const [pagesResp, sessionResp] = await Promise.all(requests);
+      const updatedPages = (pagesResp as { pages?: Page[] }).pages ?? next;
+      const updatedSession = sessionResp as Session | undefined;
+      const updated = Array.isArray(updatedPages) ? updatedPages : next;
       setPages(updated.length ? updated : [{ items: [] }]);
+      if (updatedSession) {
+        setSession(updatedSession);
+      }
       setStatus("Layout saved.");
     } catch (err) {
       const message =
@@ -82,23 +112,37 @@ export default function EditLayoutsPage() {
     }
   }
 
-  function handleAddPage() {
+  async function handleAddPage() {
     const next = [...pages, { items: [] }];
-    savePages(next);
+    await saveLayout(next);
   }
 
-  function handleRemovePage(index: number) {
+  async function handleRemovePage(index: number) {
     if (pages.length <= 1) return;
     const next = pages.filter((_, idx) => idx !== index);
-    savePages(next);
+    if (session) {
+      const nextSelected = hasExplicitPhotos(next)
+        ? flattenPhotoIds(next)
+        : session.selected_photo_ids ?? [];
+      await saveLayout(next, nextSelected);
+      return;
+    }
+    await saveLayout(next);
   }
 
-  function handleMovePage(index: number, direction: number) {
+  async function handleMovePage(index: number, direction: number) {
     const target = index + direction;
     if (target < 0 || target >= pages.length) return;
     const next = [...pages];
     [next[index], next[target]] = [next[target], next[index]];
-    savePages(next);
+    if (session) {
+      const nextSelected = hasExplicitPhotos(next)
+        ? flattenPhotoIds(next)
+        : session.selected_photo_ids ?? [];
+      await saveLayout(next, nextSelected);
+      return;
+    }
+    await saveLayout(next);
   }
 
   return (
@@ -119,6 +163,14 @@ export default function EditLayoutsPage() {
 
       <nav className="mb-6" 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"
@@ -229,7 +281,7 @@ export default function EditLayoutsPage() {
                 pageIndex={index}
                 pageCount={totalPages}
                 scale={previewScale}
-                template={template}
+                template={page?.template}
               />
             </div>
           </div>

frontend/src/pages/EditReportPage.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
-import { ArrowLeft, Download, Edit3, Grid, Layout } from "react-feather";
+import { ArrowLeft, Download, Edit3, Grid, Layout, Table } from "react-feather";
 
 import { API_BASE, request } from "../lib/api";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
@@ -16,9 +16,13 @@ export default function EditReportPage() {
   const navigate = useNavigate();
 
   const [session, setSession] = useState<Session | null>(null);
+  const [pageCount, setPageCount] = useState<number | null>(null);
   const [error, setError] = useState("");
 
-  const editorRef = useRef<ReportEditorElement | null>(null);
+  const [editorEl, setEditorEl] = useState<ReportEditorElement | null>(null);
+  const editorRef = useCallback((node: ReportEditorElement | null) => {
+    setEditorEl(node);
+  }, []);
 
   const pageIndex = useMemo(() => {
     const raw = Number(searchParams.get("page") || "1");
@@ -34,8 +38,13 @@ export default function EditReportPage() {
     setStoredSessionId(sessionId);
     async function load() {
       try {
-        const data = await request<Session>(`/sessions/${sessionId}`);
+        const [data, pageResp] = await Promise.all([
+          request<Session>(`/sessions/${sessionId}`),
+          request<{ pages: { items: unknown[] }[] }>(`/sessions/${sessionId}/pages`),
+        ]);
         setSession(data);
+        const loaded = Array.isArray(pageResp.pages) ? pageResp.pages.length : 0;
+        setPageCount(loaded || null);
       } catch (err) {
         const message =
           err instanceof Error ? err.message : "Failed to load session.";
@@ -46,9 +55,14 @@ export default function EditReportPage() {
   }, [sessionId]);
 
   useEffect(() => {
-    if (!sessionId || !session || !editorRef.current) return;
-    const totalPages = Math.max(1, session.page_count ?? 1);
-    editorRef.current.open({
+    if (!sessionId || !session || !editorEl) return;
+    const totalPages = pageCount && pageCount > 0
+      ? pageCount
+      : Math.max(
+          1,
+          session.page_count ?? 1,
+        );
+    editorEl.open({
       payload: session,
       pageIndex,
       totalPages,
@@ -56,17 +70,16 @@ export default function EditReportPage() {
       apiBase: API_BASE,
       mode: "page",
     });
-  }, [sessionId, session, pageIndex]);
+  }, [editorEl, sessionId, session, pageIndex, pageCount]);
 
   useEffect(() => {
-    const editor = editorRef.current;
-    if (!editor) return;
+    if (!editorEl) return;
     const handleClose = () => {
       navigate(`/report-viewer${sessionQuery}`);
     };
-    editor.addEventListener("editor-closed", handleClose);
-    return () => editor.removeEventListener("editor-closed", handleClose);
-  }, [navigate, sessionQuery]);
+    editorEl.addEventListener("editor-closed", handleClose);
+    return () => editorEl.removeEventListener("editor-closed", handleClose);
+  }, [editorEl, navigate, sessionQuery]);
 
   return (
     <PageShell className="max-w-6xl">
@@ -86,6 +99,14 @@ export default function EditReportPage() {
 
       <nav className="mb-6" 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"

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 } from "react-feather";
+import { ArrowLeft, Download, Edit3, Grid, Layout, Table } from "react-feather";
 
 import { API_BASE, request } from "../lib/api";
 import { BASE_W } from "../lib/report";
@@ -79,8 +79,8 @@ export default function ExportPage() {
     };
   }, [pages, session]);
 
-  const totalPages = Math.max(1, pages.length, session?.page_count ?? 0);
-  const template = pages[0]?.template;
+  const totalPages =
+    pages.length > 0 ? pages.length : Math.max(1, session?.page_count ?? 0);
   const serverExportUrl = sessionId
     ? `${API_BASE}/sessions/${sessionId}/export`
     : "";
@@ -131,6 +131,14 @@ export default function ExportPage() {
 
       <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"
@@ -340,7 +348,7 @@ export default function ExportPage() {
                   pageIndex={index}
                   pageCount={totalPages}
                   scale={previewScale}
-                  template={template}
+                  template={pages[index]?.template}
                 />
               </div>
             </div>

frontend/src/pages/InputDataPage.tsx

@@ -0,0 +1,295 @@
+import { useEffect, useMemo, useState } from "react";
+import { Link, useSearchParams } from "react-router-dom";
+import { ArrowLeft, Download, Edit3, Grid, Layout, Save, Table } from "react-feather";
+
+import { putJson, request } from "../lib/api";
+import { formatDocNumber } from "../lib/report";
+import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
+import type { Page, Session, TemplateFields } from "../types/session";
+import { PageFooter } from "../components/PageFooter";
+import { PageHeader } from "../components/PageHeader";
+import { PageShell } from "../components/PageShell";
+
+type FieldDef = {
+  key: keyof TemplateFields;
+  label: string;
+  multiline?: boolean;
+};
+
+const FIELD_DEFS: 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: "reference", label: "Reference" },
+  { key: "action_type", label: "Action Type" },
+  { 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 },
+];
+
+export default function InputDataPage() {
+  const [searchParams] = useSearchParams();
+  const sessionId = getSessionId(searchParams.toString());
+  const sessionQuery = buildSessionQuery(sessionId);
+
+  const [session, setSession] = useState<Session | null>(null);
+  const [pages, setPages] = useState<Page[]>([]);
+  const [status, setStatus] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const canSave = Boolean(sessionId) && !isSaving;
+
+  useEffect(() => {
+    if (!sessionId) {
+      setStatus("No active session found. Return to upload to continue.");
+      return;
+    }
+    setStoredSessionId(sessionId);
+    async function load() {
+      try {
+        const data = await request<Session>(`/sessions/${sessionId}`);
+        setSession(data);
+        const pageResp = await request<{ pages: Page[] }>(
+          `/sessions/${sessionId}/pages`,
+        );
+        const loaded = Array.isArray(pageResp.pages) ? pageResp.pages : [];
+        setPages(loaded.length ? loaded : [{ items: [] }]);
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : "Failed to load session.";
+        setStatus(message);
+      }
+    }
+    load();
+  }, [sessionId]);
+
+  const totalPages = useMemo(() => {
+    if (pages.length > 0) return pages.length;
+    return Math.max(1, session?.page_count ?? 0);
+  }, [pages.length, session?.page_count]);
+
+  useEffect(() => {
+    if (!sessionId) return;
+    if (pages.length >= totalPages) return;
+    setPages((prev) => {
+      const next = [...prev];
+      while (next.length < totalPages) {
+        next.push({ items: [] });
+      }
+      return next;
+    });
+  }, [pages.length, sessionId, totalPages]);
+
+  function updateField(pageIndex: number, key: keyof TemplateFields, value: string) {
+    setPages((prev) =>
+      prev.map((page, idx) => {
+        if (idx !== pageIndex) return page;
+        const template = { ...(page.template ?? {}) };
+        template[key] = value;
+        return { ...page, template };
+      }),
+    );
+  }
+
+  function applyRowToAll(pageIndex: number) {
+    const source = pages[pageIndex]?.template ?? {};
+    setPages((prev) =>
+      prev.map((page) => ({
+        ...page,
+        template: { ...source },
+      })),
+    );
+  }
+
+  function getFallbackValue(field: keyof TemplateFields): string {
+    if (!session) return "";
+    switch (field) {
+      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 || "";
+      default:
+        return "";
+    }
+  }
+
+  async function saveAll() {
+    if (!sessionId) return;
+    setIsSaving(true);
+    setStatus("Saving input data...");
+    try {
+      const resp = await putJson<{ pages: Page[] }>(
+        `/sessions/${sessionId}/pages`,
+        { pages },
+      );
+      const updated = Array.isArray(resp.pages) ? resp.pages : pages;
+      setPages(updated.length ? updated : [{ items: [] }]);
+      setStatus("Input data saved.");
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to save input data.";
+      setStatus(message);
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  return (
+    <PageShell className="max-w-6xl">
+      <PageHeader
+        title="RepEx - Report Express"
+        subtitle="Input Data"
+        right={
+          <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>
+        }
+      />
+
+      <nav className="mb-6" aria-label="Report workflow navigation">
+        <div className="flex flex-wrap gap-2">
+          <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">
+            <Table className="h-4 w-4" />
+            Input Data
+          </span>
+
+          <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>
+
+          <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"
+          >
+            <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>
+        </div>
+      </nav>
+
+      <section className="mb-4 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">Job Sheet Data</h2>
+            <p className="text-sm text-gray-600">
+              Update job sheet fields per page. Use "Apply row to all" to copy a
+              page's fields across every job sheet.
+            </p>
+          </div>
+          <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>
+        {status ? <p className="text-sm text-gray-600 mt-3">{status}</p> : null}
+      </section>
+
+      <div className="rounded-lg border border-gray-200 bg-white overflow-x-auto">
+        <table className="min-w-[1200px] 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">
+                Page
+              </th>
+              {FIELD_DEFS.map((field) => (
+                <th
+                  key={field.key}
+                  className="px-3 py-2 text-left text-xs font-semibold text-gray-600"
+                >
+                  {field.label}
+                </th>
+              ))}
+              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-600">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {pages.map((page, pageIndex) => {
+              const template = page.template ?? {};
+              return (
+                <tr key={`row-${pageIndex}`} className="border-b border-gray-100">
+                  <td className="px-3 py-2 text-xs font-semibold text-gray-700">
+                    Page {pageIndex + 1}
+                  </td>
+                  {FIELD_DEFS.map((field) => (
+                    <td key={`${pageIndex}-${field.key}`} className="px-3 py-2">
+                      {field.multiline ? (
+                        <textarea
+                          rows={2}
+                          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={template[field.key] ?? getFallbackValue(field.key)}
+                          onChange={(event) =>
+                            updateField(pageIndex, field.key, event.target.value)
+                          }
+                        />
+                      ) : (
+                        <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={template[field.key] ?? getFallbackValue(field.key)}
+                          onChange={(event) =>
+                            updateField(pageIndex, field.key, event.target.value)
+                          }
+                        />
+                      )}
+                    </td>
+                  ))}
+                  <td className="px-3 py-2">
+                    <button
+                      type="button"
+                      onClick={() => applyRowToAll(pageIndex)}
+                      className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50 transition"
+                    >
+                      Apply row to all
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <PageFooter note="Tip: edit fields per page and save once. Use apply row to keep pages consistent." />
+    </PageShell>
+  );
+}

frontend/src/pages/ReportViewerPage.tsx

@@ -8,6 +8,7 @@ import {
   Edit3,
   Grid,
   Download,
+  Table,
 } from "react-feather";
 
 import { request } from "../lib/api";
@@ -68,7 +69,8 @@ export default function ReportViewerPage() {
   }, [sessionId]);
 
   const totalPages = useMemo(() => {
-    return Math.max(1, pages.length, session?.page_count ?? 0);
+    if (pages.length > 0) return pages.length;
+    return Math.max(1, session?.page_count ?? 0);
   }, [pages.length, session?.page_count]);
 
   useEffect(() => {
@@ -89,7 +91,7 @@ export default function ReportViewerPage() {
   }, [totalPages]);
 
   const page = pages[pageIndex] ?? null;
-  const template = pages[0]?.template;
+  const template = page?.template;
   const sessionQuery = buildSessionQuery(sessionId || "");
   const editReportQuery = useMemo(() => {
     if (!sessionId) return "";
@@ -145,6 +147,14 @@ export default function ReportViewerPage() {
 
       <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>
+
           <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">
             <Layout className="h-4 w-4" />
             Report Viewer
@@ -218,9 +228,8 @@ export default function ReportViewerPage() {
         <div className="flex justify-center">
           <div
             ref={stageRef}
-            className="relative overflow-hidden shadow-sm rounded-xl bg-white border border-gray-200"
+            className="relative shadow-sm rounded-xl bg-white border border-gray-200"
             style={{
-              aspectRatio: "210 / 297",
               width: "min(100%, 560px)",
             }}
           >
@@ -231,6 +240,7 @@ export default function ReportViewerPage() {
               pageCount={totalPages}
               scale={scale}
               template={template}
+              adaptive
             />
           </div>
         </div>

frontend/src/pages/ReviewSetupPage.tsx

@@ -26,6 +26,7 @@ export default function ReviewSetupPage() {
   const [selectedPhotoIds, setSelectedPhotoIds] = useState<Set<string>>(
     new Set(),
   );
+  const [showAllPhotos, setShowAllPhotos] = useState(false);
   const [statusMessage, setStatusMessage] = useState("");
 
   useEffect(() => {
@@ -53,20 +54,29 @@ export default function ReviewSetupPage() {
   const documents = session?.uploads?.documents ?? [];
   const dataFiles = session?.uploads?.data_files ?? [];
 
-  const canContinue = selectedPhotoIds.size > 0;
+  const canContinue =
+    selectedPhotoIds.size > 0 || (session?.uploads?.data_files?.length ?? 0) > 0;
+  const previewCount = 9;
+  const visiblePhotos = showAllPhotos ? photos : photos.slice(0, previewCount);
 
   const readyStatus = useMemo(() => {
     if (!sessionId) return "No active session found. Return to upload to continue.";
     if (!canContinue) return "Choose report example images to continue...";
+    if (selectedPhotoIds.size === 0 && (session?.uploads?.data_files?.length ?? 0) > 0) {
+      return "Data file detected. Continue to build the report.";
+    }
     return "Ready. Continue to report viewer.";
-  }, [canContinue, sessionId]);
+  }, [canContinue, selectedPhotoIds.size, session?.uploads?.data_files?.length, sessionId]);
 
   async function handleContinue() {
-    if (!sessionId || selectedPhotoIds.size === 0) return;
+    if (!sessionId) return;
+    if (selectedPhotoIds.size === 0 && dataFiles.length === 0) return;
     try {
-      await putJson(`/sessions/${sessionId}/selection`, {
-        selected_photo_ids: Array.from(selectedPhotoIds),
-      });
+      if (selectedPhotoIds.size > 0) {
+        await putJson(`/sessions/${sessionId}/selection`, {
+          selected_photo_ids: Array.from(selectedPhotoIds),
+        });
+      }
       navigate(`/report-viewer?session=${encodeURIComponent(sessionId)}`);
     } catch (err) {
       const message =
@@ -161,7 +171,7 @@ export default function ReviewSetupPage() {
                     No photos were uploaded.
                   </div>
                 ) : (
-                  photos.map((photo) => {
+                  visiblePhotos.map((photo) => {
                     const isChecked = selectedPhotoIds.has(photo.id);
                     return (
                       <label key={photo.id} className="cursor-pointer">
@@ -220,6 +230,21 @@ export default function ReviewSetupPage() {
                 )}
               </div>
 
+              {photos.length > previewCount ? (
+                <div className="mt-3 flex items-center justify-between gap-3 text-sm text-gray-600">
+                  <span>
+                    Showing {visiblePhotos.length} of {photos.length} photos
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => setShowAllPhotos((prev) => !prev)}
+                    className="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"
+                  >
+                    {showAllPhotos ? "Show fewer" : `Show all (${photos.length})`}
+                  </button>
+                </div>
+              ) : null}
+
               <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
                 <div className="text-sm text-gray-600">
                   Selected for report:{" "}

frontend/src/types/session.ts

@@ -79,6 +79,7 @@ export type TemplateFields = {
 export type Page = {
   items: PageItem[];
   template?: TemplateFields;
+  photo_ids?: string[];
 };
 
 export type PagesResponse = {

server/app/api/routes/sessions.py

@@ -16,6 +16,7 @@ from ..schemas import (
     SessionStatusResponse,
 )
 from ...services import SessionStore
+from ...services.data_import import populate_session_from_data_files
 
 
 router = APIRouter()
@@ -77,6 +78,11 @@ def create_session(
                 pass
 
     session = store.add_uploads(session, saved_files)
+    try:
+        session = populate_session_from_data_files(store, session)
+    except Exception:
+        # Do not block upload if data parsing fails.
+        pass
     return _attach_urls(session)
 
 

server/app/services/data_import.py

@@ -0,0 +1,372 @@
+from __future__ import annotations
+
+import csv
+import re
+from datetime import date, datetime
+from pathlib import Path
+from typing import Dict, Iterable, List, Optional
+
+from openpyxl import load_workbook
+import xlrd
+
+from .session_store import SessionStore
+
+
+GENERAL_SHEET = "general information"
+HEADINGS_SHEET = "headings"
+ITEMS_SHEET = "item spesific"
+ITEMS_SHEET_ALT = "item specific"
+
+
+def _normalize_text(value: str) -> str:
+    return " ".join(str(value or "").strip().lower().split())
+
+
+def _cell_to_str(value: object) -> str:
+    if value is None:
+        return ""
+    if isinstance(value, (datetime, date)):
+        return value.strftime("%Y-%m-%d")
+    if isinstance(value, float):
+        if value.is_integer():
+            return str(int(value))
+        return str(value)
+    return str(value).strip()
+
+
+def _parse_general_info(rows: Iterable[Iterable[object]]) -> Dict[str, str]:
+    info: Dict[str, str] = {}
+    for row in rows:
+        cells = list(row)
+        if not cells:
+            continue
+        key = _normalize_text(cells[0])
+        if not key:
+            continue
+        value = _cell_to_str(cells[1] if len(cells) > 1 else "")
+        if value:
+            info[key] = value
+    return info
+
+
+def _find_sheet(sheets: Dict[str, object], target: str) -> Optional[object]:
+    if target in sheets:
+        return sheets[target]
+    target_key = _normalize_text(target).replace(" ", "")
+    for name, sheet in sheets.items():
+        key = _normalize_text(name).replace(" ", "")
+        if target_key and target_key in key:
+            return sheet
+    return None
+
+
+def _parse_headings(rows: Iterable[Iterable[object]]) -> Dict[str, str]:
+    headings: Dict[str, str] = {}
+    for idx, row in enumerate(rows):
+        cells = list(row)
+        if idx == 0:
+            continue
+        if not cells:
+            continue
+        key = _cell_to_str(cells[0])
+        value = _cell_to_str(cells[1] if len(cells) > 1 else "")
+        if key:
+            headings[key] = value
+    return headings
+
+
+def _header_map(headers: List[str]) -> Dict[str, List[int]]:
+    mapping: Dict[str, List[int]] = {}
+    for idx, raw in enumerate(headers):
+        name = _normalize_text(raw)
+        if not name:
+            continue
+        mapping.setdefault(name, []).append(idx)
+    return mapping
+
+
+def _looks_like_image_name(value: str) -> bool:
+    return bool(re.search(r"\.(jpg|jpeg|png|gif|webp)$", value.strip(), re.IGNORECASE))
+
+
+def _extract_image_names(value: str) -> List[str]:
+    if not value:
+        return []
+    matches = re.findall(r"[^\s,;]+\\.(?:jpg|jpeg|png|gif|webp)", value, re.IGNORECASE)
+    return [match.strip() for match in matches if match.strip()]
+
+
+def _image_column_indices(headers: List[str]) -> Dict[int, int]:
+    indices: Dict[int, int] = {}
+    for idx, raw in enumerate(headers):
+        name = _normalize_text(raw).replace(" ", "")
+        if not name:
+            continue
+        match = re.search(r"(image|img)(name)?(\\d+)", name)
+        if not match:
+            continue
+        try:
+            number = int(match.group(3))
+        except ValueError:
+            continue
+        if 1 <= number <= 6 and number not in indices:
+            indices[number] = idx
+    return indices
+
+
+def _row_value(row: List[object], index: Optional[int]) -> str:
+    if index is None:
+        return ""
+    if index >= len(row):
+        return ""
+    return _cell_to_str(row[index])
+
+
+def _parse_items(rows: Iterable[Iterable[object]]) -> List[Dict[str, str | List[str]]]:
+    rows = list(rows)
+    if not rows:
+        return []
+    headers = [_cell_to_str(cell) for cell in list(rows[0])]
+    mapping = _header_map(headers)
+    image_indices = _image_column_indices(headers)
+
+    def first_index(name: str) -> Optional[int]:
+        values = mapping.get(_normalize_text(name)) or []
+        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}"
+        )
+
+    items: List[Dict[str, str | List[str]]] = []
+    for row in rows[1:]:
+        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")
+        )
+        image_names = [
+            _row_value(cells, image_index(1)),
+            _row_value(cells, image_index(2)),
+            _row_value(cells, image_index(3)),
+            _row_value(cells, image_index(4)),
+            _row_value(cells, image_index(5)),
+            _row_value(cells, image_index(6)),
+        ]
+        image_names = [name for name in image_names if name]
+        if len(image_names) < 2:
+            for cell in cells:
+                value = _cell_to_str(cell)
+                if not value:
+                    continue
+                candidates = _extract_image_names(value) if not _looks_like_image_name(value) else [value]
+                for candidate in candidates:
+                    if candidate in image_names:
+                        continue
+                    image_names.append(candidate)
+                    if len(image_names) >= 6:
+                        break
+                if len(image_names) >= 6:
+                    break
+        items.append(
+            {
+                "reference": _row_value(cells, first_index("ref")),
+                "functional_location": _row_value(
+                    cells, first_index("functional 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")),
+                "image_names": [name for name in image_names if name],
+            }
+        )
+    return items
+
+
+def _parse_csv(path: Path) -> Dict[str, object]:
+    with path.open("r", encoding="utf-8-sig", newline="") as handle:
+        reader = csv.reader(handle)
+        rows = list(reader)
+    return {
+        "general": {},
+        "headings": {},
+        "items": _parse_items(rows),
+    }
+
+
+def _parse_excel(path: Path) -> Dict[str, object]:
+    workbook = load_workbook(path, data_only=True)
+    sheets = {sheet.title.strip().lower(): sheet for sheet in workbook.worksheets}
+
+    general_sheet = _find_sheet(sheets, GENERAL_SHEET)
+    headings_sheet = _find_sheet(sheets, HEADINGS_SHEET)
+    items_sheet = _find_sheet(sheets, ITEMS_SHEET) or _find_sheet(sheets, ITEMS_SHEET_ALT)
+
+    general = (
+        _parse_general_info(general_sheet.values) if general_sheet else {}
+    )
+    headings = _parse_headings(headings_sheet.values) if headings_sheet else {}
+    items = _parse_items(items_sheet.values) if items_sheet else []
+
+    return {
+        "general": general,
+        "headings": headings,
+        "items": items,
+    }
+
+
+def _parse_xls(path: Path) -> Dict[str, object]:
+    workbook = xlrd.open_workbook(path)
+    sheets = {sheet.name.strip().lower(): sheet for sheet in workbook.sheets()}
+
+    def sheet_rows(sheet: xlrd.sheet.Sheet) -> Iterable[List[object]]:
+        for row_idx in range(sheet.nrows):
+            yield sheet.row_values(row_idx)
+
+    general_sheet = _find_sheet(sheets, GENERAL_SHEET)
+    headings_sheet = _find_sheet(sheets, HEADINGS_SHEET)
+    items_sheet = _find_sheet(sheets, ITEMS_SHEET) or _find_sheet(sheets, ITEMS_SHEET_ALT)
+
+    general = _parse_general_info(sheet_rows(general_sheet)) if general_sheet else {}
+    headings = _parse_headings(sheet_rows(headings_sheet)) if headings_sheet else {}
+    items = _parse_items(sheet_rows(items_sheet)) if items_sheet else []
+
+    return {
+        "general": general,
+        "headings": headings,
+        "items": items,
+    }
+
+
+def _normalize_key(value: str) -> str:
+    cleaned = _normalize_text(value)
+    cleaned = re.sub(r"[^a-z0-9]", "", cleaned)
+    return cleaned
+
+
+def _normalize_name(name: str) -> str:
+    return _normalize_key(Path(name).name)
+
+
+def _normalize_stem(name: str) -> str:
+    return _normalize_key(Path(name).stem)
+
+
+def _build_photo_lookup(uploads: List[dict]) -> Dict[str, str]:
+    lookup: Dict[str, str] = {}
+    for item in uploads:
+        name = item.get("name") or ""
+        file_id = item.get("id")
+        if not name or not file_id:
+            continue
+        lookup.setdefault(_normalize_name(name), file_id)
+        lookup.setdefault(_normalize_stem(name), file_id)
+    return lookup
+
+
+def _photo_ids_for_names(names: List[str], lookup: Dict[str, str]) -> List[str]:
+    ids: List[str] = []
+    for raw in names:
+        if not raw:
+            continue
+        for part in re.split(r"[;,]", str(raw)):
+            part = part.strip()
+            if not part:
+                continue
+            key = _normalize_name(part)
+            match = lookup.get(key) or lookup.get(_normalize_stem(part))
+            if match and match not in ids:
+                ids.append(match)
+    return ids
+
+
+def populate_session_from_data_files(
+    store: SessionStore, session: dict
+) -> dict:
+    data_files = session.get("uploads", {}).get("data_files", []) or []
+    if not data_files:
+        return session
+
+    def score(file_meta: dict) -> int:
+        name = (file_meta.get("name") or "").lower()
+        if name.endswith((".xlsx", ".xlsm", ".xls")):
+            return 2
+        if name.endswith(".csv"):
+            return 1
+        return 0
+
+    target = sorted(data_files, key=score, reverse=True)[0]
+    path = store.resolve_upload_path(session, target.get("id", ""))
+    if not path or not path.exists():
+        return session
+
+    ext = path.suffix.lower()
+    if ext in {".xlsx", ".xlsm"}:
+        parsed = _parse_excel(path)
+    elif ext == ".xls":
+        parsed = _parse_xls(path)
+    elif ext == ".csv":
+        parsed = _parse_csv(path)
+    else:
+        return session
+
+    general = parsed.get("general") or {}
+    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
+    inspection_date = general.get("inspection date")
+    if inspection_date:
+        session["inspection_date"] = inspection_date
+
+    photo_lookup = _build_photo_lookup(
+        session.get("uploads", {}).get("photos", []) or []
+    )
+
+    pages: List[dict] = []
+    selected_photo_ids: List[str] = []
+    for item in items:
+        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", ""),
+            "reference": item.get("reference", ""),
+            "functional_location": item.get("functional_location", ""),
+            "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", ""),
+        }
+        image_names = item.get("image_names", []) or []
+        photo_ids = _photo_ids_for_names(image_names, photo_lookup)
+        for photo_id in photo_ids:
+            if photo_id not in selected_photo_ids:
+                selected_photo_ids.append(photo_id)
+        pages.append({"items": [], "template": template, "photo_ids": photo_ids})
+
+    if pages:
+        session["pages"] = pages
+        session["page_count"] = len(pages)
+        if selected_photo_ids:
+            session["selected_photo_ids"] = selected_photo_ids
+        store.update_session(session)
+
+    return session

server/app/services/session_store.py

@@ -126,11 +126,16 @@ class SessionStore:
                     "path": item.path,
                 }
             )
+        if not session.get("pages"):
+            photo_count = len(session.get("uploads", {}).get("photos", []) or [])
+            session["page_count"] = max(1, photo_count)
         self.update_session(session)
         return session
 
     def set_selected_photos(self, session: dict, selected_ids: List[str]) -> dict:
         session["selected_photo_ids"] = selected_ids
+        if not session.get("pages"):
+            session["page_count"] = max(1, len(selected_ids))
         self.update_session(session)
         return session
 
@@ -145,8 +150,13 @@ class SessionStore:
     def ensure_pages(self, session: dict) -> List[dict]:
         pages = session.get("pages") or []
         if pages:
+            if session.get("page_count") != len(pages):
+                session["page_count"] = len(pages)
+                self.update_session(session)
             return pages
-        count = session.get("page_count", 6) or 6
+        selected_count = len(session.get("selected_photo_ids") or [])
+        photo_count = len(session.get("uploads", {}).get("photos", []) or [])
+        count = selected_count or photo_count or session.get("page_count", 1) or 1
         pages = [{"items": []} for _ in range(count)]
         session["pages"] = pages
         self.update_session(session)

server/requirements.txt

@@ -1,3 +1,5 @@
 fastapi>=0.115.0,<1.0.0
 uvicorn[standard]>=0.30.0,<0.32.0
 python-multipart>=0.0.9,<0.1.0
+openpyxl>=3.1.2,<4.0.0
+xlrd>=2.0.1,<3.0.0