Imported Data Rework

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

@@ -65,7 +65,7 @@
         <div class="flex items-center justify-end">
           <img
             src="../assets/client-logo.png"
-            alt="Client logo placeholder"
+            alt="Company logo"
             class="h-10 w-auto object-contain"
             loading="eager"
           />
@@ -73,45 +73,6 @@
       </div>
     </header>
 
-    <!-- Inspection Details -->
-    <section class="mb-4" aria-labelledby="inspection-details-title">
-      <h2 id="inspection-details-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
-        Inspection Details
-      </h2>
-
-      <dl class="grid grid-cols-2 md:grid-cols-4 gap-2 bg-gray-50 border border-gray-200 rounded-lg p-3">
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Inspection Date</dt>
-          <dd class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="YYYY-MM-DD"></dd>
-        </div>
-
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Inspector</dt>
-          <dd class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Inspector name"></dd>
-        </div>
-
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Accompanied By</dt>
-          <dd class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Accompanied by"></dd>
-        </div>
-
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Document No</dt>
-          <dd class="template-field text-sm font-mono font-semibold text-gray-900" contenteditable="true" data-placeholder="Document no"></dd>
-        </div>
-
-        <div class="space-y-0.5 md:col-span-2">
-          <dt class="text-xs font-medium text-gray-500">Project</dt>
-          <dd class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Project name"></dd>
-        </div>
-
-        <div class="space-y-0.5 md:col-span-2">
-          <dt class="text-xs font-medium text-gray-500">Client / Site</dt>
-          <dd class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Client or site"></dd>
-        </div>
-      </dl>
-    </section>
-
     <!-- Observations and Findings -->
     <section class="mb-4" aria-labelledby="observations-title">
       <h2 id="observations-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
@@ -119,34 +80,25 @@
       </h2>
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-        <!-- Left column -->
-        <div class="space-y-2">
-          <div class="grid grid-cols-2 gap-2">
+        <div class="md:col-span-2">
+          <div class="grid grid-cols-3 gap-3">
             <div class="space-y-0.5">
-              <div class="text-xs font-medium text-gray-500">Reference</div>
-              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Reference"></div>
+              <div class="text-xs font-medium text-gray-500">Ref</div>
+              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Ref"></div>
             </div>
 
             <div class="space-y-0.5">
-              <div class="text-xs font-medium text-gray-500">Action Type</div>
-              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Action type"></div>
+              <div class="text-xs font-medium text-gray-500">Area</div>
+              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Area"></div>
             </div>
 
-            <div class="space-y-0.5 col-span-2">
-              <div class="text-xs font-medium text-gray-500">Item Description</div>
-              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Item description"></div>
+            <div class="space-y-0.5">
+              <div class="text-xs font-medium text-gray-500">Location</div>
+              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Location"></div>
             </div>
           </div>
         </div>
 
-        <!-- Right column -->
-        <div class="space-y-2">
-          <div class="space-y-0.5">
-            <div class="text-xs font-medium text-gray-500">Functional Location</div>
-            <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Functional location"></div>
-          </div>
-        </div>
-
         <!-- Centered Category + Priority (must be direct child of the grid) -->
         <div class="md:col-span-2 flex justify-center">
           <div class="inline-flex items-center gap-10">
@@ -174,14 +126,16 @@
         <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">
+            <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>
 
-        <!-- Full-width: Required Action -->
+        <!-- Full-width: Action Required -->
         <div class="md:col-span-2 space-y-1">
-          <div class="text-xs font-medium text-gray-500">Required Action</div>
+          <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>
@@ -194,8 +148,8 @@
         Photo Documentation
       </h2>
 
-      <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="columns-2" style="column-gap:0.75rem;">
+        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
           <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>
@@ -204,7 +158,7 @@
           </figcaption>
         </figure>
 
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
+        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
           <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>
@@ -213,7 +167,7 @@
           </figcaption>
         </figure>
 
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
+        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
           <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>
@@ -222,7 +176,7 @@
           </figcaption>
         </figure>
 
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
+        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
           <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>
@@ -231,7 +185,7 @@
           </figcaption>
         </figure>
 
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
+        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
           <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>
@@ -240,7 +194,7 @@
           </figcaption>
         </figure>
 
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
+        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
           <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>
@@ -252,9 +206,11 @@
     </section>
 
     <!-- Footer -->
-    <footer class="mt-4 text-center text-[11px] text-gray-500">
-      <p>RepEx - (c) 2026 All Rights Reserved</p>
-      <p class="mt-0.5">Generated by RepEx</p>
+    <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>
   </main>
 </body>

frontend/src/components/JobSheetTemplate.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useMemo, useState } from "react";
+
 import type { FileMeta, Session, TemplateFields } from "../types/session";
 import { formatDocNumber, getPhotosForPage } from "../lib/report";
 
@@ -7,28 +9,137 @@ type JobSheetTemplateProps = {
   pageCount: number;
   template?: TemplateFields;
   photos?: FileMeta[];
+  orderLocked?: boolean;
   variant?: "full" | "photos";
 };
 
 type PhotoSlotProps = {
   url?: string;
   label: string;
+  className?: string;
+  imageClassName?: string;
+};
+
+type LayoutEntry = {
+  photo: FileMeta;
+  span: boolean;
 };
 
-function PhotoSlot({ url, label }: PhotoSlotProps) {
+function normalizeKey(value: string) {
+  return value.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+
+function photoKey(photo: FileMeta) {
+  return photo.id || photo.url || photo.name || "";
+}
+
+function photoUrl(photo: FileMeta) {
+  return photo.url || "";
+}
+
+function resolveLogoUrl(session: Session | null, rawValue?: string) {
+  const value = (rawValue || "").trim();
+  if (!value) return "/assets/client-logo.png";
+  if (/^(https?:|data:|\/)/i.test(value)) return value;
+
+  const uploads = session?.uploads?.photos ?? [];
+  const key = normalizeKey(value);
+  for (const photo of uploads) {
+    const name = photo.name || "";
+    if (!name) continue;
+    const nameKey = normalizeKey(name);
+    const stemKey = normalizeKey(name.replace(/\.[^/.]+$/, ""));
+    if (key == nameKey || key == stemKey) {
+      return photo.url || "/assets/client-logo.png";
+    }
+  }
+  return value;
+}
+
+function computeLayout(photos: FileMeta[], ratios: Record<string, number>): LayoutEntry[] {
+  const entries = photos.map((photo) => {
+    const key = photoKey(photo);
+    return {
+      photo,
+      ratio: key ? ratios[key] ?? 1 : 1,
+    };
+  });
+
+  const memo = new Map<string, { cost: number; rows: number[][] }>();
+
+  function solve(remaining: number[]): { cost: number; rows: number[][] } {
+    if (remaining.length == 0) {
+      return { cost: 0, rows: [] };
+    }
+    const cacheKey = remaining.join(",");
+    const cached = memo.get(cacheKey);
+    if (cached) return cached;
+
+    const [first, ...rest] = remaining;
+    let bestCost = Number.POSITIVE_INFINITY;
+    let bestRows: number[][] = [];
+
+    const single = solve(rest);
+    const singleCost = 2 * entries[first].ratio + single.cost;
+    if (singleCost < bestCost) {
+      bestCost = singleCost;
+      bestRows = [[first], ...single.rows];
+    }
+
+    for (let i = 0; i < rest.length; i += 1) {
+      const pair = rest[i];
+      const next = rest.filter((_, idx) => idx != i);
+      const result = solve(next);
+      const pairCost = Math.max(entries[first].ratio, entries[pair].ratio) + result.cost;
+      if (pairCost < bestCost) {
+        bestCost = pairCost;
+        bestRows = [[first, pair], ...result.rows];
+      }
+    }
+
+    const value = { cost: bestCost, rows: bestRows };
+    memo.set(cacheKey, value);
+    return value;
+  }
+
+  const indices = entries.map((_, index) => index);
+  const solution = solve(indices);
+  const layout: LayoutEntry[] = [];
+  solution.rows.forEach((row) => {
+    if (row.length == 1) {
+      layout.push({ photo: entries[row[0]].photo, span: true });
+    } else {
+      layout.push({ photo: entries[row[0]].photo, span: false });
+      layout.push({ photo: entries[row[1]].photo, span: false });
+    }
+  });
+  return layout;
+}
+
+function PhotoSlot({ url, label, className = "", imageClassName = "" }: PhotoSlotProps) {
   if (!url) {
     return (
-      <div className="h-36 w-full rounded-lg border border-dashed border-gray-300 bg-gray-50 flex items-center justify-center text-xs text-gray-500">
+      <div
+        className={[
+          "min-h-[120px] w-full rounded-lg border border-dashed border-gray-300 bg-gray-50 flex items-center justify-center text-xs text-gray-500 break-inside-avoid mb-3",
+          className,
+        ].join(" ")}
+      >
         No photo selected
       </div>
     );
   }
   return (
-    <figure className="rounded-lg border border-gray-200 bg-gray-50 p-2">
+    <figure
+      className={[
+        "rounded-lg border border-gray-200 bg-gray-50 p-2 break-inside-avoid mb-3",
+        className,
+      ].join(" ")}
+    >
       <img
         src={url}
         alt={label}
-        className="h-36 w-full object-contain"
+        className={["w-full h-auto object-contain", imageClassName].join(" ")}
         loading="eager"
       />
       <figcaption className="mt-1 text-[10px] text-gray-600 text-center">
@@ -44,18 +155,19 @@ export function JobSheetTemplate({
   pageCount,
   template,
   photos,
+  orderLocked = false,
   variant = "full",
 }: JobSheetTemplateProps) {
   const inspectionDate =
     template?.inspection_date ?? session?.inspection_date ?? "";
   const inspector = template?.inspector ?? "";
-  const accompaniedBy = template?.accompanied_by ?? "";
   const docNumber =
     template?.document_no ?? (session?.id ? formatDocNumber(session) : "");
-  const projectName = template?.project ?? session?.project_name ?? "";
   const clientSite = template?.client_site ?? "";
+  const companyLogo = template?.company_logo ?? "";
 
   const reference = template?.reference ?? "";
+  const area = template?.area ?? "";
   const actionType = template?.action_type ?? "";
   const itemDescription = template?.item_description ?? "";
   const functionalLocation = template?.functional_location ?? "";
@@ -64,13 +176,58 @@ export function JobSheetTemplate({
   const conditionDescription =
     template?.condition_description ?? session?.notes ?? "";
   const requiredAction = template?.required_action ?? "";
-  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 conditionText = [itemDescription, conditionDescription]
+    .filter((value) => value && value.trim())
+    .join(" - ");
+  const actionText = [actionType, requiredAction]
+    .filter((value) => value && value.trim())
+    .join(" - ");
+
+  const resolvedPhotos =
+    photos && photos.length ? photos : getPhotosForPage(session, pageIndex, 1);
   const limitedPhotos = resolvedPhotos.slice(0, 6);
+  const logoUrl = resolveLogoUrl(session, companyLogo);
+  const [ratios, setRatios] = useState<Record<string, number>>({});
+
+  useEffect(() => {
+    let active = true;
+    const pending = limitedPhotos.filter((photo) => {
+      const key = photoKey(photo);
+      return key && !ratios[key] && photoUrl(photo);
+    });
+    if (!pending.length) return undefined;
+
+    pending.forEach((photo) => {
+      const key = photoKey(photo);
+      const url = photoUrl(photo);
+      if (!key || !url) return;
+      const img = new Image();
+      img.onload = () => {
+        if (!active) return;
+        const ratio = img.naturalWidth ? img.naturalHeight / img.naturalWidth : 1;
+        setRatios((prev) => ({ ...prev, [key]: ratio || 1 }));
+      };
+      img.src = url;
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [limitedPhotos, ratios]);
+
+  const orderedPhotos = useMemo(() => {
+    if (!limitedPhotos.length) return [];
+    if (orderLocked) return limitedPhotos;
+    const layout = computeLayout(limitedPhotos, ratios);
+    return layout.map((entry) => entry.photo);
+  }, [limitedPhotos, ratios, orderLocked]);
+
+  const photoColumnsClass = orderedPhotos.length <= 1 ? "columns-1" : "columns-2";
 
   return (
     <div className="w-full h-full p-5 text-[11px] text-gray-700">
-      <header className="mb-4 border-b border-gray-200 pb-2">
+      <header className="mb-3 border-b border-gray-200 pb-2">
         <div className="grid grid-cols-[auto,1fr,auto] items-center gap-3">
           <img
             src="/assets/prosento-logo.png"
@@ -86,198 +243,123 @@ export function JobSheetTemplate({
             </div>
           </div>
           <img
-            src="/assets/client-logo.png"
-            alt="Client logo"
+            src={logoUrl}
+            alt="Company logo"
             className="h-9 w-auto object-contain"
           />
         </div>
       </header>
 
       {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>
-
-              <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>
+        <section className="mb-3" 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="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 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>
-
-          <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="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 className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div className="md:col-span-2">
+              <div className="grid grid-cols-3 gap-3">
+                <div className="space-y-0.5">
+                  <div className="text-[10px] font-medium text-gray-500">Ref</div>
+                  <div className="template-field text-[11px] font-semibold text-gray-900">
+                    {reference}
                   </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 className="text-[10px] font-medium text-gray-500">Area</div>
+                  <div className="template-field text-[11px] font-semibold text-gray-900">
+                    {area}
                   </div>
+                </div>
+                <div className="space-y-0.5">
+                  <div className="text-[10px] font-medium text-gray-500">Location</div>
                   <div className="template-field text-[11px] font-semibold text-gray-900">
                     {functionalLocation}
                   </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="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 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 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 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 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">
+                  {conditionText}
+                </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 className="md:col-span-2 space-y-1">
+              <div className="text-[10px] font-medium text-gray-500">
+                Action Required
+              </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">
+                  {actionText}
+                </p>
               </div>
             </div>
-          </section>
-        </>
+          </div>
+        </section>
       ) : null}
 
-      <section className="mb-4 avoid-break">
+      <section className="mb-3 avoid-break">
         <div className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
           {variant === "photos" ? "Photo Documentation (continued)" : "Photo Documentation"}
         </div>
-        <div className={photoGridClass}>
-          {limitedPhotos.length === 0 ? (
-            <PhotoSlot url={undefined} label="No photo selected" />
+        <div
+          className={`${photoColumnsClass}`}
+          style={{ columnGap: "0.75rem" }}
+        >
+          {orderedPhotos.length === 0 ? (
+            <PhotoSlot url={undefined} label="No photo selected" className="break-inside-avoid mb-3" />
           ) : (
-            limitedPhotos.map((photo, index) => (
+            orderedPhotos.map((photo, index) => (
               <PhotoSlot
                 key={photo?.id || `${index}`}
                 url={photo?.url}
                 label={photo?.name || `Figure ${index + 1}`}
+                className="break-inside-avoid mb-3"
+                imageClassName=""
               />
             ))
           )}
         </div>
       </section>
 
-      {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}
+      <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>
+      </footer>
     </div>
   );
 }

frontend/src/components/ReportPageCanvas.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { CSSProperties } from "react";
 
 import type { FileMeta, Page, Session, TemplateFields } from "../types/session";
@@ -28,11 +29,60 @@ export function ReportPageCanvas({
   const items = page?.items ?? [];
   const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
   const photos = resolvePagePhotos(session, page, pageIndex);
-  const photosPerSheet = 3;
+  const photosPerSheet = 6;
   const photoSheets = chunkPhotos(photos, photosPerSheet);
   const sheets = adaptive && photoSheets.length > 1 ? photoSheets : [photos];
-  const sheetHeight = BASE_H * safeScale;
-  const containerHeight = sheetHeight * sheets.length;
+  const sheetRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const [sheetHeights, setSheetHeights] = useState<number[]>([]);
+
+  const defaultHeight = BASE_H * safeScale;
+  const resolvedHeights = useMemo(() => {
+    if (sheetHeights.length !== sheets.length) {
+      return sheets.map(() => defaultHeight);
+    }
+    return sheetHeights.map((height) => (height > 0 ? height : defaultHeight));
+  }, [defaultHeight, sheetHeights, sheets.length]);
+
+  const offsets = useMemo(() => {
+    const values: number[] = [];
+    let running = 0;
+    resolvedHeights.forEach((height) => {
+      values.push(running);
+      running += height;
+    });
+    return values;
+  }, [resolvedHeights]);
+
+  const containerHeight = resolvedHeights.reduce((sum, height) => sum + height, 0);
+
+  const measureHeights = () => {
+    const next = sheets.map((_, index) => {
+      const node = sheetRefs.current[index];
+      if (!node) return defaultHeight;
+      const rect = node.getBoundingClientRect();
+      return rect.height || defaultHeight;
+    });
+    setSheetHeights((prev) => {
+      if (prev.length === next.length && prev.every((val, idx) => Math.abs(val - next[idx]) < 1)) {
+        return prev;
+      }
+      return next;
+    });
+  };
+
+  useLayoutEffect(() => {
+    measureHeights();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sheets.length, safeScale]);
+
+  useEffect(() => {
+    const observer = new ResizeObserver(() => measureHeights());
+    sheetRefs.current.forEach((node) => {
+      if (node) observer.observe(node);
+    });
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sheets.length]);
 
   return (
     <div
@@ -45,16 +95,19 @@ export function ReportPageCanvas({
             key={`sheet-${sheetIndex}`}
             style={{
               position: "absolute",
-              top: `${sheetIndex * sheetHeight}px`,
+              top: `${offsets[sheetIndex] ?? 0}px`,
               left: 0,
               width: `${BASE_W * safeScale}px`,
-              height: `${sheetHeight}px`,
+              height: `${resolvedHeights[sheetIndex] ?? defaultHeight}px`,
             }}
           >
             <div
+              ref={(node) => {
+                sheetRefs.current[sheetIndex] = node;
+              }}
               style={{
                 width: `${BASE_W}px`,
-                height: `${BASE_H}px`,
+                minHeight: `${BASE_H}px`,
                 transform: `scale(${safeScale})`,
                 transformOrigin: "top left",
               }}
@@ -65,6 +118,7 @@ export function ReportPageCanvas({
                 pageCount={pageCount}
                 template={template}
                 photos={sheetPhotos}
+                orderLocked={page?.photo_order_locked ?? false}
                 variant={sheetIndex === 0 ? "full" : "photos"}
               />
             </div>

frontend/src/components/report-editor.js

@@ -26,6 +26,7 @@ class ReportEditor extends HTMLElement {
     this.sessionId = null;
     this.apiBase = null;
     this._saveTimer = null;
+    this._photoRatios = new Map();
   }
 
   connectedCallback() {
@@ -588,6 +589,124 @@ class ReportEditor extends HTMLElement {
     return selected.length ? selected : uploads;
   }
 
+  _normalizeKey(value) {
+    return String(value || "").toLowerCase().replace(/[^a-z0-9]/g, "");
+  }
+
+  _resolveLogoUrl(session, rawValue) {
+    const value = String(rawValue || "").trim();
+    if (!value) return "/assets/client-logo.png";
+    if (/^(https?:|data:|\/)/i.test(value)) return value;
+    const uploads = (session && session.uploads && session.uploads.photos) || [];
+    const key = this._normalizeKey(value);
+    for (const photo of uploads) {
+      const name = photo && photo.name ? photo.name : "";
+      if (!name) continue;
+      const nameKey = this._normalizeKey(name);
+      const stemKey = this._normalizeKey(name.replace(/\.[^/.]+$/, ""));
+      if (key === nameKey || key === stemKey) {
+        return photo.url || (this.sessionId ? `${this._apiRoot()}/sessions/${this.sessionId}/uploads/${photo.id}` : value);
+      }
+    }
+    return value;
+  }
+
+  _photoKey(photo) {
+    if (!photo) return "";
+    return photo.id || photo.url || photo.name || "";
+  }
+
+  _photoUrl(photo) {
+    if (!photo) return "";
+    if (photo.url) return photo.url;
+    if (this.sessionId && photo.id) {
+      return `${this._apiRoot()}/sessions/${this.sessionId}/uploads/${photo.id}`;
+    }
+    return "";
+  }
+
+  _photoRatio(photo) {
+    const key = this._photoKey(photo);
+    if (!key) return 1;
+    const ratio = this._photoRatios.get(key);
+    return Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+  }
+
+  _ensurePhotoRatios(photos) {
+    photos.forEach((photo) => {
+      const key = this._photoKey(photo);
+      const url = this._photoUrl(photo);
+      if (!key || !url || this._photoRatios.has(key)) return;
+
+      const img = new Image();
+      img.onload = () => {
+        const ratio = img.naturalWidth ? img.naturalHeight / img.naturalWidth : 1;
+        this._photoRatios.set(key, ratio || 1);
+        if (this.state.isOpen) {
+          this.renderCanvas();
+        }
+      };
+      img.onerror = () => {
+        this._photoRatios.set(key, 1);
+      };
+      img.src = url;
+    });
+  }
+
+  _computePhotoLayout(photos) {
+    const entries = photos.map((photo) => ({
+      photo,
+      ratio: this._photoRatio(photo),
+    }));
+
+    const memo = new Map();
+    const solve = (remaining) => {
+      if (remaining.length === 0) return { cost: 0, rows: [] };
+      const cacheKey = remaining.join(",");
+      const cached = memo.get(cacheKey);
+      if (cached) return cached;
+
+      const [first, ...rest] = remaining;
+      let bestCost = Number.POSITIVE_INFINITY;
+      let bestRows = [];
+
+      const single = solve(rest);
+      const singleCost = 2 * entries[first].ratio + single.cost;
+      if (singleCost < bestCost) {
+        bestCost = singleCost;
+        bestRows = [[first], ...single.rows];
+      }
+
+      for (let i = 0; i < rest.length; i += 1) {
+        const pair = rest[i];
+        const next = rest.filter((_, idx) => idx !== i);
+        const result = solve(next);
+        const pairCost = Math.max(entries[first].ratio, entries[pair].ratio) + result.cost;
+        if (pairCost < bestCost) {
+          bestCost = pairCost;
+          bestRows = [[first, pair], ...result.rows];
+        }
+      }
+
+      const value = { cost: bestCost, rows: bestRows };
+      memo.set(cacheKey, value);
+      return value;
+    };
+
+    const indices = entries.map((_, index) => index);
+    const solution = solve(indices);
+    const layout = [];
+    solution.rows.forEach((row) => {
+      if (row.length === 1) {
+        layout.push({ photo: entries[row[0]].photo, span: true });
+      } else {
+        layout.push({ photo: entries[row[0]].photo, span: false });
+        layout.push({ photo: entries[row[1]].photo, span: false });
+      }
+    });
+    return layout;
+  }
+
   _photosForActivePage(session) {
     const uploads = (session && session.uploads && session.uploads.photos) || [];
     const byId = new Map(uploads.map((photo) => [photo.id, photo]));
@@ -603,11 +722,10 @@ class ReportEditor extends HTMLElement {
   }
 
   _photoSlot(photo, fallbackLabel) {
-    const url =
-      photo && (photo.url || (this.sessionId ? `${this._apiRoot()}/sessions/${this.sessionId}/uploads/${photo.id}` : ""));
+    const url = this._photoUrl(photo);
     if (!photo || !url) {
       return `
-        <div class="h-36 w-full rounded-lg border border-dashed border-gray-300 bg-gray-50 flex items-center justify-center text-xs text-gray-500">
+        <div class="min-h-[120px] w-full rounded-lg border border-dashed border-gray-300 bg-gray-50 flex items-center justify-center text-xs text-gray-500 break-inside-avoid mb-3">
           No photo selected
         </div>
       `;
@@ -615,8 +733,8 @@ class ReportEditor extends HTMLElement {
     const label = this._escape(photo.name || fallbackLabel);
     const safeUrl = this._escape(url);
     return `
-      <figure class="rounded-lg border border-gray-200 bg-gray-50 p-2">
-        <img src="${safeUrl}" alt="${label}" class="h-36 w-full object-contain" />
+      <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>
       </figure>
     `;
@@ -636,14 +754,14 @@ class ReportEditor extends HTMLElement {
     const inspectionDate =
       template.inspection_date || session.inspection_date || "";
     const inspector = template.inspector || "";
-    const accompaniedBy = template.accompanied_by || "";
     const docNumber =
       template.document_no ||
       (session.id ? `REP-${String(session.id).slice(0, 8).toUpperCase()}` : "");
-    const projectName = template.project || session.project_name || "";
     const clientSite = template.client_site || "";
+    const companyLogo = template.company_logo || "";
 
     const reference = template.reference || "";
+    const area = template.area || "";
     const actionType = template.action_type || "";
     const itemDescription = template.item_description || "";
     const functionalLocation = template.functional_location || "";
@@ -654,16 +772,23 @@ class ReportEditor extends HTMLElement {
     const requiredAction = template.required_action || "";
 
     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._ensurePhotoRatios(photos);
+    const orderLocked = !!(this.activePage && this.activePage.photo_order_locked);
+    const orderedPhotos = orderLocked
+      ? photos
+      : this._computePhotoLayout(photos).map((entry) => entry.photo);
+    const photoColumnsClass = orderedPhotos.length <= 1 ? "columns-1" : "columns-2";
+    const photoSlots = orderedPhotos.length
+      ? orderedPhotos
+          .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" style="color:#374151; font-size:11px;">
-        <header class="mb-4 border-b border-gray-200 pb-3">
+        <header class="mb-3 border-b border-gray-200 pb-2">
           <div class="grid grid-cols-[auto,1fr,auto] items-center gap-3">
             <div class="flex items-center">
               <img src="/assets/prosento-logo.png" alt="Prosento logo" class="h-10 w-auto object-contain" />
@@ -675,81 +800,34 @@ class ReportEditor extends HTMLElement {
             </div>
 
             <div class="flex items-center justify-end">
-              <img src="/assets/client-logo.png" alt="Client logo" class="h-10 w-auto object-contain" />
+              <img src="${this._escape(this._resolveLogoUrl(session, companyLogo))}" alt="Company logo" class="h-10 w-auto object-contain" />
             </div>
           </div>
         </header>
 
-        <section class="mb-4" aria-labelledby="inspection-details-title">
-          <h2 id="inspection-details-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
-            Inspection Details
-          </h2>
-
-          <dl class="grid grid-cols-2 md:grid-cols-4 gap-2 bg-gray-50 border border-gray-200 rounded-lg p-3">
-            <div class="space-y-0.5">
-              <dt class="text-xs font-medium text-gray-500">Inspection Date</dt>
-              ${this._tplField("inspection_date", inspectionDate, "YYYY-MM-DD", "text-sm font-semibold text-gray-900")}
-            </div>
-
-            <div class="space-y-0.5">
-              <dt class="text-xs font-medium text-gray-500">Inspector</dt>
-              ${this._tplField("inspector", inspector, "Inspector name", "text-sm font-semibold text-gray-900")}
-            </div>
-
-            <div class="space-y-0.5">
-              <dt class="text-xs font-medium text-gray-500">Accompanied By</dt>
-              ${this._tplField("accompanied_by", accompaniedBy, "Accompanied by", "text-sm font-semibold text-gray-900")}
-            </div>
-
-            <div class="space-y-0.5">
-              <dt class="text-xs font-medium text-gray-500">Document No</dt>
-              ${this._tplField("document_no", docNumber, "Document no", "text-sm font-mono font-semibold text-gray-900")}
-            </div>
-
-            <div class="space-y-0.5 md:col-span-2">
-              <dt class="text-xs font-medium text-gray-500">Project</dt>
-              ${this._tplField("project", projectName, "Project name", "text-sm font-semibold text-gray-900")}
-            </div>
-
-            <div class="space-y-0.5 md:col-span-2">
-              <dt class="text-xs font-medium text-gray-500">Client / Site</dt>
-              ${this._tplField("client_site", clientSite, "Client or site", "text-sm font-semibold text-gray-900")}
-            </div>
-          </dl>
-        </section>
-
         <section class="mb-4" aria-labelledby="observations-title">
           <h2 id="observations-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
             Observations and Findings
           </h2>
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div class="space-y-2">
-              <div class="grid grid-cols-2 gap-2">
+            <div class="md:col-span-2">
+              <div class="grid grid-cols-3 gap-3">
                 <div class="space-y-0.5">
-                  <div class="text-xs font-medium text-gray-500">Reference</div>
-                  ${this._tplField("reference", reference, "Reference", "text-sm font-semibold text-gray-900")}
+                  <div class="text-xs font-medium text-gray-500">Ref</div>
+                  ${this._tplField("reference", reference, "Ref", "text-sm font-semibold text-gray-900")}
                 </div>
-
                 <div class="space-y-0.5">
-                  <div class="text-xs font-medium text-gray-500">Action Type</div>
-                  ${this._tplField("action_type", actionType, "Action type", "text-sm font-semibold text-gray-900")}
+                  <div class="text-xs font-medium text-gray-500">Area</div>
+                  ${this._tplField("area", area, "Area", "text-sm font-semibold text-gray-900")}
                 </div>
-
-                <div class="space-y-0.5 col-span-2">
-                  <div class="text-xs font-medium text-gray-500">Item Description</div>
-                  ${this._tplField("item_description", itemDescription, "Item description", "text-sm font-semibold text-gray-900")}
+                <div class="space-y-0.5">
+                  <div class="text-xs font-medium text-gray-500">Location</div>
+                  ${this._tplField("functional_location", functionalLocation, "Location", "text-sm font-semibold text-gray-900")}
                 </div>
               </div>
             </div>
 
-            <div class="space-y-2">
-              <div class="space-y-0.5">
-                <div class="text-xs font-medium text-gray-500">Functional Location</div>
-                ${this._tplField("functional_location", functionalLocation, "Functional location", "text-sm font-semibold text-gray-900")}
-              </div>
-            </div>
-
             <div class="md:col-span-2 flex justify-center">
               <div class="inline-flex items-center gap-10">
                 <div class="text-center space-y-1">
@@ -767,14 +845,20 @@ 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">
-                ${this._tplField("condition_description", conditionDescription, "Condition description", "template-field-multiline text-amber-800 text-sm font-semibold leading-snug", true)}
+                <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>
               </div>
             </div>
 
             <div class="md:col-span-2 space-y-1">
-              <div class="text-xs font-medium text-gray-500">Required Action</div>
+              <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">
-                ${this._tplField("required_action", requiredAction, "Required action", "template-field-multiline text-blue-800 text-sm font-semibold leading-snug", true)}
+                <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>
             </div>
           </div>
@@ -785,14 +869,16 @@ class ReportEditor extends HTMLElement {
             Photo Documentation
           </h2>
 
-          <div class="${photoGridClass}">
+          <div class="${photoColumnsClass}" style="column-gap:0.75rem;">
             ${photoSlots}
           </div>
         </section>
 
-        <footer class="mt-4 text-center text-[11px] text-gray-500">
-          <p>RepEx - (c) 2026 All Rights Reserved</p>
-          <p class="mt-0.5">Generated by RepEx</p>
+        <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>
         </footer>
       </div>
     `;

frontend/src/pages/InputDataPage.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useState } from "react";
+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 { putJson, request } from "../lib/api";
+import { API_BASE, postForm, 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";
@@ -16,13 +16,18 @@ type FieldDef = {
   multiline?: boolean;
 };
 
-const FIELD_DEFS: FieldDef[] = [
+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: "item_description", label: "Item Description", multiline: true },
@@ -42,7 +47,19 @@ export default function InputDataPage() {
   const [pages, setPages] = useState<Page[]>([]);
   const [status, setStatus] = useState("");
   const [isSaving, setIsSaving] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [copySourceIndex, setCopySourceIndex] = useState(0);
+  const [copyTargets, setCopyTargets] = useState("");
+  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 excelInputRef = useRef<HTMLInputElement | null>(null);
+  const jsonInputRef = useRef<HTMLInputElement | null>(null);
+  const uploadInputRefs = useRef<Record<number, HTMLInputElement | null>>({});
 
   useEffect(() => {
     if (!sessionId) {
@@ -68,6 +85,17 @@ export default function InputDataPage() {
     load();
   }, [sessionId]);
 
+  async function refreshSession() {
+    if (!sessionId) return;
+    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: [] }]);
+  }
+
   const totalPages = useMemo(() => {
     if (pages.length > 0) return pages.length;
     return Math.max(1, session?.page_count ?? 0);
@@ -85,6 +113,25 @@ export default function InputDataPage() {
     });
   }, [pages.length, sessionId, totalPages]);
 
+  useEffect(() => {
+    if (copySourceIndex >= pages.length) {
+      setCopySourceIndex(Math.max(0, pages.length - 1));
+    }
+  }, [copySourceIndex, pages.length]);
+
+  useEffect(() => {
+    if (generalDirty) return;
+    const source = pages[0]?.template ?? {};
+    const next: TemplateFields = {};
+    GENERAL_FIELDS.forEach((field) => {
+      const value = source[field.key] ?? getFallbackValue(field.key);
+      if (value !== undefined) {
+        next[field.key] = value;
+      }
+    });
+    setGeneralTemplate(next);
+  }, [generalDirty, pages, session]);
+
   function updateField(pageIndex: number, key: keyof TemplateFields, value: string) {
     setPages((prev) =>
       prev.map((page, idx) => {
@@ -96,6 +143,11 @@ export default function InputDataPage() {
     );
   }
 
+  function updateGeneralField(key: keyof TemplateFields, value: string) {
+    setGeneralTemplate((prev) => ({ ...prev, [key]: value }));
+    setGeneralDirty(true);
+  }
+
   function applyRowToAll(pageIndex: number) {
     const source = pages[pageIndex]?.template ?? {};
     setPages((prev) =>
@@ -106,6 +158,152 @@ export default function InputDataPage() {
     );
   }
 
+  function applyGeneralToAll() {
+    if (!pages.length) return;
+    setPages((prev) =>
+      prev.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 };
+      }),
+    );
+    setGeneralDirty(false);
+    setStatus("Applied general info to all pages.");
+  }
+
+  function insertPageAt(index: number, templateSource?: TemplateFields) {
+    setPages((prev) => {
+      const next = [...prev];
+      const fallbackTemplate =
+        templateSource ??
+        next[Math.max(0, Math.min(index - 1, next.length - 1))]?.template ??
+        {};
+      next.splice(index, 0, { items: [], template: { ...fallbackTemplate } });
+      return next;
+    });
+  }
+
+  function removePageAt(index: number) {
+    setPages((prev) => {
+      if (prev.length <= 1) return prev;
+      const next = [...prev];
+      next.splice(index, 1);
+      return next.length ? next : [{ items: [] }];
+    });
+  }
+
+  function updatePhotoSelection(pageIndex: number, value: string) {
+    setPhotoSelections((prev) => ({ ...prev, [pageIndex]: value }));
+  }
+
+  function updatePagePhotos(pageIndex: number, nextIds: string[]) {
+    setPages((prev) =>
+      prev.map((page, idx) =>
+        idx === pageIndex ? { ...page, photo_ids: nextIds } : page,
+      ),
+    );
+  }
+
+  function setPhotoOrderLocked(pageIndex: number, locked: boolean) {
+    setPages((prev) =>
+      prev.map((page, idx) =>
+        idx === pageIndex ? { ...page, photo_order_locked: locked } : page,
+      ),
+    );
+  }
+
+  function movePhoto(pageIndex: number, from: number, to: number) {
+    setPages((prev) =>
+      prev.map((page, idx) => {
+        if (idx !== pageIndex) return page;
+        const ids = [...(page.photo_ids ?? [])];
+        if (from < 0 || from >= ids.length || to < 0 || to >= ids.length) {
+          return page;
+        }
+        const [moved] = ids.splice(from, 1);
+        ids.splice(to, 0, moved);
+        return { ...page, photo_ids: ids };
+      }),
+    );
+  }
+
+  function removePhoto(pageIndex: number, index: number) {
+    setPages((prev) =>
+      prev.map((page, idx) => {
+        if (idx !== pageIndex) return page;
+        const ids = [...(page.photo_ids ?? [])];
+        ids.splice(index, 1);
+        return { ...page, photo_ids: ids };
+      }),
+    );
+  }
+
+  function addPhotoToPage(pageIndex: number, photoId: string) {
+    if (!photoId) return;
+    setPages((prev) =>
+      prev.map((page, idx) => {
+        if (idx !== pageIndex) return page;
+        const ids = [...(page.photo_ids ?? [])];
+        if (!ids.includes(photoId)) ids.push(photoId);
+        return { ...page, photo_ids: ids };
+      }),
+    );
+  }
+
+  function parseTargetPages(value: string, max: number): number[] {
+    const results = new Set<number>();
+    const parts = value
+      .split(",")
+      .map((part) => part.trim())
+      .filter(Boolean);
+    parts.forEach((part) => {
+      if (part.includes("-")) {
+        const [startRaw, endRaw] = part.split("-").map((chunk) => chunk.trim());
+        const start = Number.parseInt(startRaw, 10);
+        const end = Number.parseInt(endRaw, 10);
+        if (Number.isNaN(start) || Number.isNaN(end)) return;
+        const min = Math.min(start, end);
+        const maxRange = Math.max(start, end);
+        for (let idx = min; idx <= maxRange; idx += 1) {
+          if (idx >= 1 && idx <= max) results.add(idx - 1);
+        }
+      } else {
+        const pageNum = Number.parseInt(part, 10);
+        if (!Number.isNaN(pageNum) && pageNum >= 1 && pageNum <= max) {
+          results.add(pageNum - 1);
+        }
+      }
+    });
+    return Array.from(results).sort((a, b) => a - b);
+  }
+
+  function copyPageToTargets() {
+    if (!pages.length) return;
+    const targets = parseTargetPages(copyTargets, pages.length).filter(
+      (idx) => idx !== copySourceIndex,
+    );
+    if (!targets.length) {
+      setStatus("No valid target pages selected for copy.");
+      return;
+    }
+    const sourceTemplate = pages[copySourceIndex]?.template ?? {};
+    setPages((prev) =>
+      prev.map((page, idx) =>
+        targets.includes(idx) ? { ...page, template: { ...sourceTemplate } } : page,
+      ),
+    );
+    setStatus(
+      `Copied page ${copySourceIndex + 1} to ${targets
+        .map((idx) => idx + 1)
+        .join(", ")}.`,
+    );
+  }
+
   function getFallbackValue(field: keyof TemplateFields): string {
     if (!session) return "";
     switch (field) {
@@ -143,6 +341,79 @@ export default function InputDataPage() {
     }
   }
 
+  async function uploadDataFile(file: File) {
+    if (!sessionId) return;
+    setIsUploading(true);
+    setStatus("Uploading data file...");
+    try {
+      const form = new FormData();
+      form.append("file", file);
+      await postForm<Session>(`/sessions/${sessionId}/data-files`, form);
+      await refreshSession();
+      setStatus("Data file imported.");
+      setGeneralDirty(false);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to import data file.";
+      setStatus(message);
+    } finally {
+      setIsUploading(false);
+    }
+  }
+
+  async function uploadJsonFile(file: File) {
+    if (!sessionId) return;
+    setIsUploading(true);
+    setStatus("Uploading JSON package...");
+    try {
+      const form = new FormData();
+      form.append("file", file);
+      await postForm<Session>(`/sessions/${sessionId}/import-json`, form);
+      await refreshSession();
+      setStatus("JSON package imported.");
+      setGeneralDirty(false);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to import JSON package.";
+      setStatus(message);
+    } finally {
+      setIsUploading(false);
+    }
+  }
+
+  async function uploadPhotoForPage(pageIndex: number, file: File) {
+    if (!sessionId) return;
+    setIsUploading(true);
+    setStatus(`Uploading image ${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(pageIndex, newPhoto.id);
+        setStatus(`Uploaded ${newPhoto.name}.`);
+      } else {
+        setStatus("Uploaded image. Refresh to see new file.");
+      }
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to upload image.";
+      setStatus(message);
+    } finally {
+      setIsUploading(false);
+    }
+  }
+
   return (
     <PageShell className="max-w-6xl">
       <PageHeader
@@ -209,49 +480,354 @@ export default function InputDataPage() {
               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 className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => insertPageAt(pages.length, {})}
+              disabled={!sessionId}
+              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"
+            >
+              Add blank page
+            </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}
       </section>
 
+      <section className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
+        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+          <div>
+            <h3 className="text-base font-semibold text-gray-900">Copy page to targets</h3>
+            <p className="text-sm text-gray-600">
+              Choose a source page and the pages to overwrite (e.g. 2,4-6).
+            </p>
+          </div>
+          <div className="flex flex-wrap items-end gap-2">
+            <label className="text-xs text-gray-600">
+              Source page
+              <select
+                className="mt-1 w-36 rounded-md border border-gray-200 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+                value={copySourceIndex}
+                onChange={(event) => setCopySourceIndex(Number(event.target.value))}
+              >
+                {pages.map((_, idx) => (
+                  <option key={`copy-source-${idx}`} value={idx}>
+                    Page {idx + 1}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="text-xs text-gray-600">
+              Target pages
+              <input
+                type="text"
+                placeholder="e.g. 2,4-6"
+                className="mt-1 w-44 rounded-md border border-gray-200 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+                value={copyTargets}
+                onChange={(event) => setCopyTargets(event.target.value)}
+              />
+            </label>
+            <button
+              type="button"
+              onClick={copyPageToTargets}
+              disabled={!pages.length}
+              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 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Copy page data
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <section className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
+        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
+          <div>
+            <h3 className="text-base font-semibold text-gray-900">
+              Import / Export data files
+            </h3>
+            <p className="text-sm text-gray-600">
+              Upload an Excel/CSV data file or a JSON package to populate job sheets.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => excelInputRef.current?.click()}
+              disabled={!sessionId || isUploading}
+              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"
+            >
+              Upload Excel/CSV
+            </button>
+            <button
+              type="button"
+              onClick={() => jsonInputRef.current?.click()}
+              disabled={!sessionId || isUploading}
+              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"
+            >
+              Upload JSON
+            </button>
+            <a
+              href={
+                sessionId
+                  ? `${API_BASE}/sessions/${sessionId}/export.xlsx`
+                  : "#"
+              }
+              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 Excel
+            </a>
+            <a
+              href={
+                sessionId
+                  ? `${API_BASE}/sessions/${sessionId}/export`
+                  : "#"
+              }
+              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 JSON
+            </a>
+          </div>
+        </div>
+        <input
+          ref={excelInputRef}
+          type="file"
+          accept=".xlsx,.xls,.csv"
+          className="hidden"
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            if (file) uploadDataFile(file);
+            event.target.value = "";
+          }}
+        />
+        <input
+          ref={jsonInputRef}
+          type="file"
+          accept=".json,application/json"
+          className="hidden"
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            if (file) uploadJsonFile(file);
+            event.target.value = "";
+          }}
+        />
+      </section>
+
+      <section className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
+        <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr),320px] gap-4 items-start">
+          <div className="min-w-0">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <div>
+                <h3 className="text-base font-semibold text-gray-900">
+                  General Information
+                </h3>
+                <p className="text-sm text-gray-600">
+                  Update the global inspection details once, then apply to all pages.
+                </p>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {generalDirty ? (
+                  <button
+                    type="button"
+                    onClick={applyGeneralToAll}
+                    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"
+                  >
+                    Apply general info to all pages
+                  </button>
+                ) : null}
+              </div>
+            </div>
+
+            <div className="mt-4 rounded-lg border border-gray-200 bg-white overflow-x-auto w-full max-w-full">
+              <table className="min-w-[560px] 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 min-w-[180px]">
+                      Field
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-semibold text-gray-600">
+                      Value
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {GENERAL_FIELDS.map((field) => (
+                    <tr key={`general-${field.key}`} className="border-b border-gray-100">
+                      <td className="px-3 py-2 text-xs font-semibold text-gray-700">
+                        {field.label}
+                      </td>
+                      <td className="px-3 py-2">
+                        <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={generalTemplate[field.key] ?? getFallbackValue(field.key)}
+                          onChange={(event) =>
+                            updateGeneralField(field.key, event.target.value)
+                          }
+                        />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </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="mt-3 rounded-lg border border-gray-200 bg-white overflow-x-auto">
+              <table className="min-w-[280px] 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">
+                      Number
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-semibold text-gray-600">
+                      Heading
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {session?.headings?.length ? (
+                    session.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}
+                        </td>
+                        <td className="px-3 py-2 text-sm text-gray-700">
+                          {heading.name}
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td
+                        colSpan={2}
+                        className="px-3 py-4 text-sm text-gray-500 text-center"
+                      >
+                        No headings found.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <div className="rounded-lg border border-gray-200 bg-white overflow-x-auto">
-        <table className="min-w-[1200px] w-full text-sm">
+        <div className="px-3 py-2 text-xs text-gray-500 bg-gray-50 border-b border-gray-200">
+          General Info (double-click the header below to expand/collapse columns)
+        </div>
+        <table className="min-w-[2400px] 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">
+              <th
+                rowSpan={2}
+                className="px-3 py-2 text-left text-xs font-semibold text-gray-600"
+              >
                 Page
               </th>
-              {FIELD_DEFS.map((field) => (
+              <th
+                colSpan={showGeneralColumns ? GENERAL_FIELDS.length : 1}
+                onDoubleClick={() => setShowGeneralColumns((prev) => !prev)}
+                className="px-3 py-2 text-left text-xs font-semibold text-gray-600 cursor-pointer select-none"
+                title="Double-click to toggle general columns"
+              >
+                General Info
+              </th>
+              <th
+                colSpan={ITEM_FIELDS.length + 1}
+                className="px-3 py-2 text-left text-xs font-semibold text-gray-600"
+              >
+                Item Details
+              </th>
+              <th
+                rowSpan={2}
+                className="px-3 py-2 text-left text-xs font-semibold text-gray-600 min-w-[520px]"
+              >
+                Actions
+              </th>
+            </tr>
+            <tr>
+              {showGeneralColumns ? (
+                GENERAL_FIELDS.map((field) => (
+                  <th
+                    key={`general-col-${field.key}`}
+                    className="px-3 py-2 text-left text-xs font-semibold text-gray-600 min-w-[180px]"
+                  >
+                    {field.label}
+                  </th>
+                ))
+              ) : (
+                <th className="px-3 py-2 text-left text-xs font-semibold text-gray-500 min-w-[180px]">
+                  General info hidden
+                </th>
+              )}
+              {ITEM_FIELDS.map((field) => (
                 <th
-                  key={field.key}
-                  className="px-3 py-2 text-left text-xs font-semibold text-gray-600"
+                  key={`item-col-${field.key}`}
+                  className="px-3 py-2 text-left text-xs font-semibold text-gray-600 min-w-[180px]"
                 >
                   {field.label}
                 </th>
               ))}
-              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-600">
-                Actions
+              <th className="px-3 py-2 text-left text-xs font-semibold text-gray-600 min-w-[320px]">
+                Images
               </th>
             </tr>
           </thead>
           <tbody>
             {pages.map((page, pageIndex) => {
               const template = page.template ?? {};
+              const photoIds = page.photo_ids ?? [];
+              const orderLocked = page.photo_order_locked ?? false;
+              const photoLookup = new Map(
+                (session?.uploads?.photos ?? []).map((photo) => [photo.id, photo]),
+              );
+              const availablePhotos = (session?.uploads?.photos ?? []).filter(
+                (photo) => !photoIds.includes(photo.id),
+              );
               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">
+                  {showGeneralColumns ? (
+                    GENERAL_FIELDS.map((field) => (
+                      <td
+                        key={`${pageIndex}-general-${field.key}`}
+                        className="px-3 py-2 min-w-[180px]"
+                      >
+                        <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 min-w-[180px] text-xs text-gray-500">
+                      (hidden)
+                    </td>
+                  )}
+                  {ITEM_FIELDS.map((field) => (
+                    <td key={`${pageIndex}-${field.key}`} className="px-3 py-2 min-w-[180px]">
                       {field.multiline ? (
                         <textarea
                           rows={2}
@@ -273,14 +849,137 @@ export default function InputDataPage() {
                       )}
                     </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 className="px-3 py-2 min-w-[320px]">
+                    <div className="space-y-2">
+                      {photoIds.length ? (
+                        photoIds.map((photoId, idx) => {
+                          const photo = photoLookup.get(photoId);
+                          return (
+                            <div key={`${pageIndex}-photo-${photoId}`} className="flex flex-wrap items-center gap-2 text-xs">
+                              <span className="font-semibold text-gray-700">
+                                {photo?.name || photoId}
+                              </span>
+                              <button
+                                type="button"
+                                onClick={() => movePhoto(pageIndex, idx, idx - 1)}
+                                disabled={idx === 0}
+                                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(pageIndex, idx, idx + 1)}
+                                disabled={idx === photoIds.length - 1}
+                                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={() => removePhoto(pageIndex, idx)}
+                                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"
+                              >
+                                Remove
+                              </button>
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <div className="text-xs text-gray-500">No images linked.</div>
+                      )}
+                      <div className="flex flex-wrap items-center gap-2">
+                        <select
+                          className="rounded-md border border-gray-200 px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-blue-200"
+                          value={photoSelections[pageIndex] ?? ""}
+                          onChange={(event) =>
+                            updatePhotoSelection(pageIndex, event.target.value)
+                          }
+                        >
+                          <option value="">Select image</option>
+                          {availablePhotos.map((photo) => (
+                            <option key={`photo-option-${photo.id}`} value={photo.id}>
+                              {photo.name}
+                            </option>
+                          ))}
+                        </select>
+                        <button
+                          type="button"
+                          onClick={() =>
+                            addPhotoToPage(pageIndex, photoSelections[pageIndex] ?? "")
+                          }
+                          disabled={!photoSelections[pageIndex]}
+                          className="rounded border border-gray-200 px-2 py-1 text-xs font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          Add
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => uploadInputRefs.current[pageIndex]?.click()}
+                          disabled={isUploading}
+                          className="rounded border border-gray-200 px-2 py-1 text-xs font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          Upload
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => setPhotoOrderLocked(pageIndex, !orderLocked)}
+                          disabled={photoIds.length === 0}
+                          className="rounded border border-gray-200 px-2 py-1 text-xs font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          {orderLocked ? "Auto order" : "Apply order"}
+                        </button>
+                        <span className="text-[11px] text-gray-500">
+                          {orderLocked ? "Manual order" : "Auto order"}
+                        </span>
+                        <input
+                          ref={(node) => {
+                            uploadInputRefs.current[pageIndex] = node;
+                          }}
+                          type="file"
+                          accept="image/*"
+                          className="hidden"
+                          onChange={(event) => {
+                            const file = event.target.files?.[0];
+                            if (file) uploadPhotoForPage(pageIndex, file);
+                            event.target.value = "";
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-3 py-2 min-w-[520px]">
+                    <div className="flex flex-wrap items-center gap-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>
+                      <button
+                        type="button"
+                        onClick={() => insertPageAt(pageIndex, template)}
+                        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"
+                      >
+                        Insert above
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => insertPageAt(pageIndex + 1, template)}
+                        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"
+                      >
+                        Insert below
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => removePageAt(pageIndex)}
+                        disabled={pages.length <= 1}
+                        className="inline-flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-100 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        Delete page
+                      </button>
+                    </div>
                   </td>
                 </tr>
               );
@@ -289,6 +988,17 @@ export default function InputDataPage() {
         </table>
       </div>
 
+      <div className="mt-3 flex justify-end">
+        <button
+          type="button"
+          onClick={() => insertPageAt(pages.length, pages[pages.length - 1]?.template)}
+          disabled={!sessionId}
+          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"
+        >
+          Add page at end
+        </button>
+      </div>
+
       <PageFooter note="Tip: edit fields per page and save once. Use apply row to keep pages consistent." />
     </PageShell>
   );

frontend/src/types/session.ts

@@ -13,6 +13,11 @@ export type SessionUploads = {
   data_files?: FileMeta[];
 };
 
+export type Heading = {
+  number: string;
+  name: string;
+};
+
 export type Session = {
   id: string;
   status: string;
@@ -24,6 +29,7 @@ export type Session = {
   uploads: SessionUploads;
   selected_photo_ids: string[];
   page_count: number;
+  headings?: Heading[];
   layout?: Record<string, unknown> | null;
 };
 
@@ -66,6 +72,8 @@ export type TemplateFields = {
   document_no?: string;
   project?: string;
   client_site?: string;
+  company_logo?: string;
+  area?: string;
   reference?: string;
   action_type?: string;
   item_description?: string;
@@ -80,6 +88,7 @@ export type Page = {
   items: PageItem[];
   template?: TemplateFields;
   photo_ids?: string[];
+  photo_order_locked?: boolean;
 };
 
 export type PagesResponse = {

server/app/api/routes/sessions.py

@@ -6,6 +6,7 @@ from typing import List
 
 from fastapi import APIRouter, Depends, File, Form, HTTPException, UploadFile, status
 from fastapi.responses import FileResponse
+from openpyxl import Workbook
 
 from ..deps import get_session_store
 from ..schemas import (
@@ -16,6 +17,7 @@ from ..schemas import (
     SessionStatusResponse,
 )
 from ...services import SessionStore
+from ...services.session_store import DATA_EXTS, IMAGE_EXTS
 from ...services.data_import import populate_session_from_data_files
 
 
@@ -162,6 +164,109 @@ def get_upload(
     return FileResponse(path)
 
 
+@router.post("/{session_id}/data-files", response_model=SessionResponse)
+def upload_data_file(
+    session_id: str,
+    file: UploadFile = File(...),
+    store: SessionStore = Depends(get_session_store),
+) -> SessionResponse:
+    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.")
+    filename = (file.filename or "").lower()
+    if filename and Path(filename).suffix.lower() not in DATA_EXTS:
+        raise HTTPException(status_code=400, detail="Unsupported data file type.")
+
+    try:
+        saved_file = store.save_upload(session_id, file)
+    except ValueError as exc:
+        raise HTTPException(status_code=413, detail=str(exc)) from exc
+    finally:
+        try:
+            file.file.close()
+        except Exception:
+            pass
+
+    session = store.add_uploads(session, [saved_file])
+    try:
+        session = populate_session_from_data_files(store, session)
+    except Exception:
+        pass
+    return _attach_urls(session)
+
+
+@router.post("/{session_id}/uploads", response_model=SessionResponse)
+def upload_photo(
+    session_id: str,
+    file: UploadFile = File(...),
+    store: SessionStore = Depends(get_session_store),
+) -> SessionResponse:
+    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.")
+    filename = file.filename or ""
+    if Path(filename).suffix.lower() not in IMAGE_EXTS:
+        raise HTTPException(status_code=400, detail="Unsupported image file type.")
+
+    try:
+        saved_file = store.save_upload(session_id, file)
+    except ValueError as exc:
+        raise HTTPException(status_code=413, detail=str(exc)) from exc
+    finally:
+        try:
+            file.file.close()
+        except Exception:
+            pass
+
+    session = store.add_uploads(session, [saved_file])
+    return _attach_urls(session)
+
+
+@router.post("/{session_id}/import-json", response_model=SessionResponse)
+def import_json(
+    session_id: str,
+    file: UploadFile = File(...),
+    store: SessionStore = Depends(get_session_store),
+) -> SessionResponse:
+    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.")
+    try:
+        payload = json.loads(file.file.read())
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail="Invalid JSON file.") from exc
+    finally:
+        try:
+            file.file.close()
+        except Exception:
+            pass
+
+    imported_session = payload.get("session") if isinstance(payload, dict) else None
+    pages = payload.get("pages") if isinstance(payload, dict) else None
+    if not pages and isinstance(imported_session, dict):
+        pages = imported_session.get("pages")
+    if pages:
+        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]
+        store.update_session(session)
+
+    return _attach_urls(session)
+
+
 @router.get("/{session_id}/export")
 def export_package(
     session_id: str, store: SessionStore = Depends(get_session_store)
@@ -184,3 +289,105 @@ def export_package(
         media_type="application/json",
         filename=f"repex_report_{session_id}.json",
     )
+
+
+@router.get("/{session_id}/export.xlsx")
+def export_excel(
+    session_id: str, store: SessionStore = Depends(get_session_store)
+) -> FileResponse:
+    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.")
+
+    pages = store.ensure_pages(session)
+    first_template = (pages[0].get("template") or {}) if pages else {}
+
+    wb = Workbook()
+    ws_general = wb.active
+    ws_general.title = "General Information"
+    ws_general.append(["Project Name", session.get("project_name", "")])
+    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_headings = wb.create_sheet("Headings")
+    ws_headings.append(["Heading Number", "Heading Name"])
+    headings = session.get("headings") or []
+    if isinstance(headings, dict):
+        headings = [{"number": key, "name": value} for key, value in headings.items()]
+    for heading in headings:
+        if not isinstance(heading, dict):
+            continue
+        ws_headings.append(
+            [heading.get("number", ""), heading.get("name", "")]
+        )
+
+    ws_items = wb.create_sheet("Item Spesific")
+    ws_items.append(
+        [
+            "REF",
+            "Area",
+            "Functional 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",
+            "Image Name 4",
+            "Image Name 5",
+            "Image Name 6",
+        ]
+    )
+
+    upload_lookup = {
+        item.get("id"): item.get("name")
+        for item in (session.get("uploads") or {}).get("photos", [])
+    }
+
+    for page in pages:
+        template = page.get("template") or {}
+        photo_names = [
+            upload_lookup.get(photo_id, "")
+            for photo_id in (page.get("photo_ids") or [])
+        ]
+        while len(photo_names) < 6:
+            photo_names.append("")
+
+        ws_items.append(
+            [
+                template.get("reference", ""),
+                template.get("area", ""),
+                template.get("functional_location", ""),
+                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", ""),
+                "",
+                "",
+                *photo_names[:6],
+            ]
+        )
+
+    export_path = Path(store.session_dir(session_id)) / "export.xlsx"
+    wb.save(export_path)
+    return FileResponse(
+        export_path,
+        media_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        filename=f"repex_report_{session_id}.xlsx",
+    )

server/app/api/schemas.py

@@ -14,6 +14,11 @@ class FileMeta(BaseModel):
     url: Optional[str] = None
 
 
+class Heading(BaseModel):
+    number: str = ""
+    name: str = ""
+
+
 class SessionResponse(BaseModel):
     id: str
     status: str
@@ -25,6 +30,7 @@ class SessionResponse(BaseModel):
     uploads: Dict[str, List[FileMeta]] = Field(default_factory=dict)
     selected_photo_ids: List[str] = Field(default_factory=list)
     page_count: int = 0
+    headings: List[Heading] = Field(default_factory=list)
 
 
 class SessionStatusResponse(BaseModel):

server/app/services/data_import.py

@@ -60,18 +60,46 @@ def _find_sheet(sheets: Dict[str, object], target: str) -> Optional[object]:
     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:
+def _parse_headings(rows: Iterable[Iterable[object]]) -> List[Dict[str, str]]:
+    headings: List[Dict[str, str]] = []
+    rows = [list(row) for row in rows]
+    if not rows:
+        return headings
+
+    header_row_index: Optional[int] = None
+    number_idx: Optional[int] = None
+    name_idx: Optional[int] = None
+
+    for idx, row in enumerate(rows[:5]):
+        headers = [_normalize_text(cell) for cell in row]
+        for col_idx, header in enumerate(headers):
+            if "heading number" in header or header == "number":
+                number_idx = col_idx
+            if "heading name" in header or header == "name":
+                name_idx = col_idx
+        if number_idx is not None or name_idx is not None:
+            header_row_index = idx
+            break
+
+    start_index = (header_row_index + 1) if header_row_index is not None else 1
+
+    for row in rows[start_index:]:
+        if not any(_cell_to_str(cell) for cell in row):
             continue
-        key = _cell_to_str(cells[0])
-        value = _cell_to_str(cells[1] if len(cells) > 1 else "")
-        if key:
-            headings[key] = value
+
+        number = _cell_to_str(row[number_idx]) if number_idx is not None and number_idx < len(row) else ""
+        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:
+            combined = _cell_to_str(row[0] if row else "")
+            match = re.match(r"^(\\d+)\\s*[-–.]?\\s*(.+)$", combined)
+            if match:
+                number = match.group(1)
+                name = match.group(2)
+
+        if number or name:
+            headings.append({"number": number, "name": name})
+
     return headings
 
 
@@ -96,6 +124,20 @@ def _extract_image_names(value: str) -> List[str]:
     return [match.strip() for match in matches if match.strip()]
 
 
+def _find_reference_value(cells: List[object]) -> str:
+    dotted_ref = re.compile(r"^\d+(?:\.\d+)+[a-z]?$", re.IGNORECASE)
+    numeric_ref = re.compile(r"^\d+$")
+    for cell in cells:
+        value = _cell_to_str(cell)
+        if value and dotted_ref.match(value):
+            return value
+    if cells:
+        first_value = _cell_to_str(cells[0])
+        if numeric_ref.match(first_value):
+            return first_value
+    return ""
+
+
 def _image_column_indices(headers: List[str]) -> Dict[int, int]:
     indices: Dict[int, int] = {}
     for idx, raw in enumerate(headers):
@@ -144,6 +186,12 @@ def _parse_items(rows: Iterable[Iterable[object]]) -> List[Dict[str, str | List[
         )
 
     items: List[Dict[str, str | List[str]]] = []
+    ref_index = first_index("ref") or first_index("reference")
+    area_index = (
+        first_index("area")
+        or first_index("heading name")
+        or first_index("heading")
+    )
     for row in rows[1:]:
         cells = list(row)
         if not any(_cell_to_str(cell) for cell in cells):
@@ -151,6 +199,9 @@ def _parse_items(rows: Iterable[Iterable[object]]) -> List[Dict[str, str | List[
         item_desc = _row_value(cells, second_index("item description")) or _row_value(
             cells, first_index("item description")
         )
+        reference = _row_value(cells, ref_index)
+        if not reference:
+            reference = _find_reference_value(cells)
         image_names = [
             _row_value(cells, image_index(1)),
             _row_value(cells, image_index(2)),
@@ -176,7 +227,8 @@ def _parse_items(rows: Iterable[Iterable[object]]) -> List[Dict[str, str | List[
                     break
         items.append(
             {
-                "reference": _row_value(cells, first_index("ref")),
+                "reference": reference,
+                "area": _row_value(cells, area_index),
                 "functional_location": _row_value(
                     cells, first_index("functional location")
                 ),
@@ -322,6 +374,7 @@ def populate_session_from_data_files(
         return session
 
     general = parsed.get("general") or {}
+    headings = parsed.get("headings") or []
     items = parsed.get("items") or []
 
     # Update session-wide fields if provided
@@ -336,9 +389,22 @@ def populate_session_from_data_files(
         session.get("uploads", {}).get("photos", []) or []
     )
 
+    if isinstance(headings, dict):
+        headings = [
+            {"number": key, "name": value} for key, value in headings.items()
+        ]
+    if headings:
+        session["headings"] = headings
+
     pages: List[dict] = []
     selected_photo_ids: List[str] = []
     for item in items:
+        company_logo = (
+            general.get("client logo image name")
+            or general.get("client logo")
+            or general.get("company logo")
+            or ""
+        )
         template = {
             "inspection_date": inspection_date or session.get("inspection_date", ""),
             "inspector": general.get("inspector", ""),
@@ -346,7 +412,9 @@ def populate_session_from_data_files(
             "document_no": general.get("document no", ""),
             "project": general.get("project name", session.get("project_name", "")),
             "client_site": general.get("client / site", ""),
+            "company_logo": company_logo,
             "reference": item.get("reference", ""),
+            "area": item.get("area", ""),
             "functional_location": item.get("functional_location", ""),
             "item_description": item.get("item_description", ""),
             "category": item.get("category", ""),