Spaces:

ChristopherJKoen
/

Prosento_RepEx

Sleeping

App Files Files Community

ChristopherJKoen commited on Feb 7

Commit

08113a7

2 Parent(s): 0bc4be2 310edf0

Merge dev into main for Space update

Browse files

Files changed (22) hide show

DataInputTemplate-populated-sr.xlsx +0 -0
README.md +0 -1
examples/DataInputTemplate-populated-sr.xlsx +0 -0
frontend/public/templates/job-sheet-template.html +0 -240
frontend/public/templates/repex-data-input-template.xlsx +0 -0
frontend/src/App.tsx +2 -0
frontend/src/components/JobSheetTemplate.tsx +52 -40
frontend/src/components/report-editor.js +170 -44
frontend/src/index.css +1 -1
frontend/src/lib/pageTemplates.ts +80 -0
frontend/src/lib/sections.ts +28 -21
frontend/src/lib/version.ts +1 -1
frontend/src/pages/EditLayoutsPage.tsx +162 -113
frontend/src/pages/ImagePlacementPage.tsx +283 -71
frontend/src/pages/LayoutTemplatesPage.tsx +458 -0
frontend/src/pages/UploadPage.tsx +27 -0
frontend/src/types/session.ts +12 -0
server/app/api/routes/sessions.py +18 -0
server/app/api/schemas.py +19 -0
server/app/services/data_import.py +8 -1
server/app/services/pdf_reportlab.py +222 -112
server/app/services/session_store.py +170 -15

DataInputTemplate-populated-sr.xlsx DELETED Viewed

Binary file (15.5 kB)

README.md CHANGED Viewed

@@ -28,7 +28,6 @@ React (Vite) frontend + FastAPI backend with local session storage.
   frontend/
     public/
       assets/
-      templates/
     src/
       components/
       pages/

   frontend/
     public/
       assets/
     src/
       components/
       pages/

examples/DataInputTemplate-populated-sr.xlsx DELETED Viewed

Binary file (15.5 kB)

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

@@ -1,240 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>RepEx Inspection Job Sheet</title>
-  <!-- Tailwind (CDN OK for prototypes; compile for production) -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <!-- Feather icons -->
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-  <style>
-    @page { size: A4; margin: 10mm; }
-    @media print {
-      html, body { background: #fff !important; }
-      .no-print { display: none !important; }
-      main { box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
-    }
-    .avoid-break { break-inside: avoid; page-break-inside: avoid; }
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-    .template-field {
-      display: block;
-      min-height: 1.1em;
-      border-bottom: 1px dotted #d1d5db;
-      padding-bottom: 1px;
-    }
-    .template-field-multiline {
-      min-height: 2.4em;
-      white-space: pre-wrap;
-    }
-    .template-field[contenteditable="true"]:empty:before {
-      content: attr(data-placeholder);
-      color: #9ca3af;
-    }
-  </style>
-</head>
-<body class="bg-gray-50 print:bg-white">
-  <!-- A4-focused container -->
-  <main class="mx-auto max-w-[210mm] bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-5 print:ring-0 print:shadow-none print:rounded-none">
-    <!-- Header -->
-    <header class="mb-4 border-b border-gray-200 pb-3">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-3">
-        <div class="flex items-center">
-          <img
-            src="../assets/prosento-logo.png"
-            alt="Prosento logo"
-            class="h-10 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-        <div class="text-center leading-tight">
-          <div class="text-base font-semibold text-gray-900 whitespace-nowrap">
-            <span
-              class="template-field"
-              contenteditable="true"
-              data-placeholder="Document No"
-              style="display:inline-block; min-width: 180px;"
-            ></span>
-          </div>
-          <div class="text-[10px] text-gray-500 whitespace-nowrap">Document No</div>
-        </div>
-        <div class="flex items-center justify-end">
-          <img
-            src="../assets/client-logo.png"
-            alt="Company logo"
-            class="h-10 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-      </div>
-    </header>
-    <!-- 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">
-        Observations and Findings
-      </h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-        <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">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">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">
-              <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>
-        <!-- 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-6">
-            <div class="text-center space-y-1">
-              <div class="text-xs font-medium text-gray-500">Category</div>
-              <span
-                class="template-field inline-flex items-center justify-center rounded-md border px-3 py-1 text-sm font-semibold min-w-[120px] bg-yellow-200 text-yellow-800 border-yellow-200"
-                contenteditable="true"
-                data-placeholder="3 - Poor"
-              >3 - Poor</span>
-            </div>
-            <div class="text-center space-y-1">
-              <div class="text-xs font-medium text-gray-500">Priority</div>
-              <span
-                class="template-field inline-flex items-center justify-center rounded-md border px-3 py-1 text-sm font-semibold min-w-[120px] bg-green-200 text-green-800 border-green-200"
-                contenteditable="true"
-                data-placeholder="3 - 3 Years"
-              >3 - 3 Years</span>
-            </div>
-          </div>
-        </div>
-        <!-- Full-width: Condition Description -->
-        <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>
-          </div>
-        </div>
-        <!-- Full-width: Action Required -->
-        <div class="md:col-span-2 space-y-1">
-          <div class="text-xs font-medium text-gray-500">Action Required</div>
-          <div class="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
-            <p class="template-field template-field-multiline text-blue-800 text-sm font-semibold leading-snug" contenteditable="true" data-placeholder="Required action"></p>
-          </div>
-        </div>
-      </div>
-    </section>
-    <!-- Photo Documentation -->
-    <section class="mb-4 avoid-break" aria-labelledby="photo-doc-title">
-      <h2 id="photo-doc-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
-        Photo Documentation
-      </h2>
-        <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>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Figure 1
-          </figcaption>
-        </figure>
-        <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>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Figure 2
-          </figcaption>
-        </figure>
-        <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>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Figure 3
-          </figcaption>
-        </figure>
-        <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>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Figure 4
-          </figcaption>
-        </figure>
-        <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>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Figure 5
-          </figcaption>
-        </figure>
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 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>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Figure 6
-          </figcaption>
-        </figure>
-      </div>
-    </section>
-    <!-- Footer -->
-    <footer class="mt-2 text-[10px] text-gray-500 flex flex-col items-center gap-1">
-      <div class="flex flex-wrap items-center justify-center gap-3">
-        <span>Date: <span class="template-field" contenteditable="true" data-placeholder="YYYY-MM-DD"></span></span>
-        <span>Inspector: <span class="template-field" contenteditable="true" data-placeholder="Inspector name"></span></span>
-        <span>Doc: <span class="template-field" contenteditable="true" data-placeholder="Document no"></span></span>
-      </div>
-      <div class="text-[10px] font-semibold text-gray-600">RepEx Inspection Job Sheet</div>
-      <div class="text-[10px] text-gray-500">
-        <span
-          class="template-field"
-          contenteditable="true"
-          data-placeholder="Section 1"
-          style="display:inline-block; min-width: 90px;"
-        ></span>
-        <span class="mx-1">-</span>
-        <span
-          class="template-field"
-          contenteditable="true"
-          data-placeholder="Page 1 of 1"
-          style="display:inline-block; min-width: 90px;"
-        ></span>
-      </div>
-    </footer>
-  </main>
-</body>
-</html>

frontend/public/templates/repex-data-input-template.xlsx ADDED Viewed

Binary file (6.09 kB). View file

frontend/src/App.tsx CHANGED Viewed

@@ -8,6 +8,7 @@ import ImagePlacementPage from "./pages/ImagePlacementPage";
 import InputDataPage from "./pages/InputDataPage";
 import EditReportPage from "./pages/EditReportPage";
 import EditLayoutsPage from "./pages/EditLayoutsPage";
 import ExportPage from "./pages/ExportPage";
 import RatingsInfoPage from "./pages/RatingsInfoPage";
@@ -23,6 +24,7 @@ export default function App() {
         <Route path="/input-data" element={<InputDataPage />} />
         <Route path="/edit-report" element={<EditReportPage />} />
         <Route path="/edit-layouts" element={<EditLayoutsPage />} />
         <Route path="/export" element={<ExportPage />} />
         <Route path="/info/ratings" element={<RatingsInfoPage />} />
         <Route path="*" element={<Navigate to="/" replace />} />

 import InputDataPage from "./pages/InputDataPage";
 import EditReportPage from "./pages/EditReportPage";
 import EditLayoutsPage from "./pages/EditLayoutsPage";
+import LayoutTemplatesPage from "./pages/LayoutTemplatesPage";
 import ExportPage from "./pages/ExportPage";
 import RatingsInfoPage from "./pages/RatingsInfoPage";
         <Route path="/input-data" element={<InputDataPage />} />
         <Route path="/edit-report" element={<EditReportPage />} />
         <Route path="/edit-layouts" element={<EditLayoutsPage />} />
+        <Route path="/edit-layouts/templates" element={<LayoutTemplatesPage />} />
         <Route path="/export" element={<ExportPage />} />
         <Route path="/info/ratings" element={<RatingsInfoPage />} />
         <Route path="*" element={<Navigate to="/" replace />} />

frontend/src/components/JobSheetTemplate.tsx CHANGED Viewed

@@ -144,21 +144,24 @@ function photoUrl(photo: FileMeta) {
 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[] {
@@ -238,18 +241,22 @@ function PhotoSlot({ url, label, className = "", imageClassName = "" }: PhotoSlo
   return (
     <figure
       className={[
-        "rounded-lg border border-gray-200 bg-gray-50 p-2 break-inside-avoid",
         className,
       ].join(" ")}
       style={{ breakInside: "avoid", pageBreakInside: "avoid" }}
     >
-      <img
-        src={url}
-        alt={label}
-        className={["w-full h-full object-contain", imageClassName].join(" ")}
-        loading="eager"
-      />
-      <figcaption className="mt-1 text-[10px] text-gray-600 text-center">
         {label}
       </figcaption>
     </figure>
@@ -352,48 +359,54 @@ export function JobSheetTemplate({
           <img
             src="/assets/prosento-logo.png"
             alt="Prosento logo"
-            className="h-9 w-auto object-contain"
           />
           <div className="text-center leading-tight">
             <div className="text-base font-semibold text-gray-900">
               {docNumber || "-"}
             </div>
           </div>
-          <img
-            src={logoUrl}
-            alt="Company logo"
-            className="h-9 w-auto object-contain"
-          />
         </div>
       </header>
       {variant === "full" ? (
-        <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="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 className="space-y-0.5">
-                  <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>
@@ -401,14 +414,14 @@ export function JobSheetTemplate({
             </div>
             <div className="md:col-span-2 flex justify-center">
-              <div className="inline-flex items-center gap-6">
                 <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 px-4 py-1 text-[11px] font-semibold min-w-[120px]",
                       categoryBadge.className,
                     ].join(" ")}
                   >
@@ -417,12 +430,12 @@ export function JobSheetTemplate({
                 </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 px-4 py-1 text-[11px] font-semibold min-w-[120px]",
                       priorityBadge.className,
                     ].join(" ")}
                   >
@@ -434,22 +447,22 @@ export function JobSheetTemplate({
             </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">
                 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>
@@ -459,7 +472,7 @@ export function JobSheetTemplate({
       ) : null}
       <section className="mb-3 avoid-break flex-1 min-h-0 flex flex-col">
-        <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} flex-1 items-stretch`}>
@@ -472,7 +485,6 @@ export function JobSheetTemplate({
                 url={photo?.url}
                 label={figureCaption || photo?.name || `Figure ${index + 1}`}
                 className="h-full"
-                imageClassName="h-full"
               />
             ))
           )}

 function resolveLogoUrl(session: Session | null, rawValue?: string) {
   const value = (rawValue || "").trim();
+  if (!value) return "";
   if (/^(https?:|data:|\/)/i.test(value)) return value;
   const uploads = session?.uploads?.photos ?? [];
   const key = normalizeKey(value);
   for (const photo of uploads) {
+    if (photo.id && value === photo.id) {
+      return photo.url || "";
+    }
     const name = photo.name || "";
     if (!name) continue;
     const nameKey = normalizeKey(name);
     const stemKey = normalizeKey(name.replace(/\.[^/.]+$/, ""));
     if (key == nameKey || key == stemKey) {
+      return photo.url || "";
     }
   }
+  return "";
 }
 function computeLayout(photos: FileMeta[], ratios: Record<string, number>): LayoutEntry[] {
   return (
     <figure
       className={[
+        "rounded-lg border border-gray-200 bg-gray-50 p-2 pb-3 break-inside-avoid flex flex-col gap-1 overflow-hidden",
         className,
       ].join(" ")}
       style={{ breakInside: "avoid", pageBreakInside: "avoid" }}
     >
+      <div className="w-full flex-1 flex items-center justify-center">
+        <img
+          src={url}
+          alt={label}
+          className={["w-full object-contain max-h-[240px]", imageClassName].join(
+            " ",
+          )}
+          loading="eager"
+        />
+      </div>
+      <figcaption className="text-[10px] text-gray-600 text-center break-all leading-tight">
         {label}
       </figcaption>
     </figure>
           <img
             src="/assets/prosento-logo.png"
             alt="Prosento logo"
+            className="h-14 w-auto object-contain"
           />
           <div className="text-center leading-tight">
             <div className="text-base font-semibold text-gray-900">
               {docNumber || "-"}
             </div>
           </div>
+          {logoUrl ? (
+            <img
+              src={logoUrl}
+              alt="Company logo"
+              className="h-14 w-auto object-contain"
+            />
+          ) : (
+            <div className="h-14 min-w-[140px] rounded-md border border-dashed border-gray-300 px-2 text-[9px] font-semibold text-gray-400 flex items-center justify-center text-center">
+              Company Logo not found
+            </div>
+          )}
         </div>
       </header>
       {variant === "full" ? (
+        <section className="mb-2" aria-labelledby="observations-title">
           <h2
             id="observations-title"
+            className="text-[10px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-1"
           >
             Observations and Findings
           </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
             <div className="md:col-span-2">
+              <div className="grid grid-cols-3 gap-2">
                 <div className="space-y-0.5">
+                  <div className="text-[9px] font-medium text-gray-500">Ref</div>
+                  <div className="template-field text-[10px] font-semibold text-gray-900">
                     {reference}
                   </div>
                 </div>
                 <div className="space-y-0.5">
+                  <div className="text-[9px] font-medium text-gray-500">Area</div>
+                  <div className="template-field text-[10px] font-semibold text-gray-900">
                     {area}
                   </div>
                 </div>
                 <div className="space-y-0.5">
+                  <div className="text-[9px] font-medium text-gray-500">Location</div>
+                  <div className="template-field text-[10px] font-semibold text-gray-900">
                     {functionalLocation}
                   </div>
                 </div>
             </div>
             <div className="md:col-span-2 flex justify-center">
+              <div className="inline-flex items-center gap-4">
                 <div className="text-center space-y-1">
+                  <div className="text-[9px] font-medium text-gray-500">
                     Category
                   </div>
                   <span
                     className={[
+                      "template-field inline-flex items-center justify-center rounded-md border px-4 py-1 text-[10px] font-semibold min-w-[120px]",
                       categoryBadge.className,
                     ].join(" ")}
                   >
                 </div>
                 <div className="text-center space-y-1">
+                  <div className="text-[9px] font-medium text-gray-500">
                     Priority
                   </div>
                   <span
                     className={[
+                      "template-field inline-flex items-center justify-center rounded-md border px-4 py-1 text-[10px] font-semibold min-w-[120px]",
                       priorityBadge.className,
                     ].join(" ")}
                   >
             </div>
             <div className="md:col-span-2 space-y-1">
+              <div className="text-[9px] font-medium text-gray-500">
                 Condition Description
               </div>
+              <div className="bg-gray-50 border-l-4 border-gray-300 p-1.5 rounded-sm">
+                <p className="template-field template-field-multiline text-gray-700 text-[9px] font-medium leading-snug">
                   {conditionText}
                 </p>
               </div>
             </div>
             <div className="md:col-span-2 space-y-1">
+              <div className="text-[9px] font-medium text-gray-500">
                 Action Required
               </div>
+              <div className="bg-gray-50 border-l-4 border-gray-300 p-1.5 rounded-sm">
+                <p className="template-field template-field-multiline text-gray-700 text-[9px] font-medium leading-snug">
                   {actionText}
                 </p>
               </div>
       ) : null}
       <section className="mb-3 avoid-break flex-1 min-h-0 flex flex-col">
+        <div className="text-[10px] 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} flex-1 items-stretch`}>
                 url={photo?.url}
                 label={figureCaption || photo?.name || `Figure ${index + 1}`}
                 className="h-full"
               />
             ))
           )}

frontend/src/components/report-editor.js CHANGED Viewed

@@ -18,6 +18,9 @@ const PRIORITY_SCALE = {
   M: { label: "Monitor", className: "bg-blue-200 text-blue-800 border-blue-200" },
 };
 function parseScaleCode(value) {
   const match = String(value || "").trim().match(/^[A-Za-z0-9]+/);
   return match ? match[0].toUpperCase() : String(value || "").trim().toUpperCase();
@@ -409,6 +412,22 @@ class ReportEditor extends HTMLElement {
                   </div>
                 </div>
                 <div class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
                   <div class="font-semibold text-gray-800 mb-1">Keyboard shortcuts</div>
                   <ul class="list-disc pl-4 space-y-1">
@@ -437,9 +456,11 @@ class ReportEditor extends HTMLElement {
     this.$propsText = this.querySelector("[data-props-text]");
     this.$propsRect = this.querySelector("[data-props-rect]");
     this.$propsImage = this.querySelector("[data-props-image]");
     this.$imgFile = this.querySelector('[data-file="image"]');
     this.$replaceFile = this.querySelector('[data-file="replace"]');
     if (this.$canvas && "ResizeObserver" in window) {
       this._resizeObserver = new ResizeObserver(() => {
@@ -500,6 +521,24 @@ class ReportEditor extends HTMLElement {
     this.querySelector('[data-btn="replace-image"]').addEventListener("click", () => this.$replaceFile.click());
     this.$replaceFile.addEventListener("change", (e) => this._handleImageUpload(e, "replace"));
     // canvas interactions
     this.$canvas.addEventListener("pointerdown", (e) => this.onCanvasPointerDown(e));
     window.addEventListener("pointermove", (e) => this.onPointerMove(e));
@@ -561,6 +600,7 @@ class ReportEditor extends HTMLElement {
     this.renderCanvas();
     this.updateCanvasScale();
     this.updatePropsPanel();
     this.updateUndoRedoButtons();
     this._refreshIcons();
   }
@@ -723,20 +763,92 @@ class ReportEditor extends HTMLElement {
   _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) {
@@ -861,14 +973,16 @@ class ReportEditor extends HTMLElement {
       "figure_caption",
       fallbackLabel || photo.name || "",
       "Figure caption",
-      "text-[10px] text-gray-600 text-center w-full",
       false,
-      true,
     );
     return `
-      <figure class="rounded-lg border border-gray-200 bg-gray-50 p-2 break-inside-avoid mb-3">
-        <img src="${safeUrl}" alt="${label}" class="w-full h-auto object-contain" />
-        <figcaption class="mt-1 text-[10px] text-gray-600 text-center">${caption}</figcaption>
       </figure>
     `;
   }
@@ -983,48 +1097,48 @@ class ReportEditor extends HTMLElement {
     const observationsHtml =
       variant === "full"
         ? `
-        <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="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">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">Area</div>
-                  ${this._tplField("area", area, "Area", "text-sm font-semibold text-gray-900")}
                 </div>
                 <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="md:col-span-2 flex justify-center">
-              <div class="inline-flex items-center gap-6">
                 <div class="text-center space-y-1">
-                  <div class="text-xs font-medium text-gray-500">Category</div>
                   ${this._tplSelectField(
                     "category",
                     category,
                     categoryOptions,
-                    `min-w-[140px] rounded-md border px-3 py-1 text-sm font-semibold text-center ${categoryBadge.className}`,
                   )}
                 </div>
                 <div class="text-center space-y-1">
-                  <div class="text-xs font-medium text-gray-500">Priority</div>
                   ${this._tplSelectField(
                     "priority",
                     priority,
                     priorityOptions,
-                    `min-w-[140px] rounded-md border px-3 py-1 text-sm font-semibold text-center ${priorityBadge.className}`,
                   )}
                 </div>
@@ -1032,19 +1146,19 @@ class ReportEditor extends HTMLElement {
             </div>
             <div class="md:col-span-2 space-y-1">
-              <div class="text-xs font-medium text-gray-500">Condition Description</div>
-                <div class="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
-                  <div class="text-amber-800 text-sm font-semibold leading-snug">
-                    ${this._tplField("item_description", itemDescription, "Item description", "template-field-multiline text-amber-800 text-sm font-semibold leading-snug", true)}
                   </div>
                 </div>
             </div>
             <div class="md:col-span-2 space-y-1">
-              <div class="text-xs font-medium text-gray-500">Action Required</div>
-              <div class="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
-                <div class="text-blue-800 text-sm font-semibold leading-snug">
-                  ${this._tplField("required_action", requiredAction, "Required action", "template-field-multiline text-blue-800 text-sm font-semibold leading-snug", true)}
                 </div>
               </div>
             </div>
@@ -1060,7 +1174,7 @@ class ReportEditor extends HTMLElement {
         <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" />
             </div>
             <div class="text-center leading-tight">
@@ -1073,7 +1187,13 @@ class ReportEditor extends HTMLElement {
             </div>
             <div class="flex items-center justify-end">
-              <img src="${this._escape(this._resolveLogoUrl(session, companyLogo))}" alt="Company logo" class="h-10 w-auto object-contain" />
             </div>
           </div>
         </header>
@@ -1289,16 +1409,14 @@ class ReportEditor extends HTMLElement {
       : [];
     if (!photoIds.length) return [normalized];
-    const chunks = [];
-    for (let i = 0; i < photoIds.length; i += 2) {
-      chunks.push(photoIds.slice(i, i + 2));
-    }
-    if (chunks.length <= 1) {
-      return [{ ...normalized, photo_ids: chunks[0] || [], variant: normalized.variant }];
-    }
     if (normalized.variant === "photos") {
       return chunks.map((chunk, idx) => {
         if (idx === 0) {
           return { ...normalized, photo_ids: chunk, variant: "photos" };
@@ -1307,12 +1425,20 @@ class ReportEditor extends HTMLElement {
       });
     }
     const basePage = {
       ...normalized,
-      photo_ids: chunks[0],
       variant: normalized.variant || "full",
     };
-    const extraPages = chunks.slice(1).map((chunk) =>
       this._buildPhotoContinuation(normalized, chunk),
     );
     return [basePage, ...extraPages];

   M: { label: "Monitor", className: "bg-blue-200 text-blue-800 border-blue-200" },
 };
+const MAX_PHOTOS_PRIMARY_PAGE = 2;
+const MAX_PHOTOS_CONTINUATION_PAGE = 6;
 function parseScaleCode(value) {
   const match = String(value || "").trim().match(/^[A-Za-z0-9]+/);
   return match ? match[0].toUpperCase() : String(value || "").trim().toUpperCase();
                   </div>
                 </div>
+                <div class="mt-4 rounded-lg border border-gray-200 p-3">
+                  <div class="text-xs font-semibold text-gray-600 mb-2">Company Logo (Top Right)</div>
+                  <p class="text-[11px] text-gray-500 mb-2">
+                    Select an uploaded image or upload a new one for this page.
+                  </p>
+                  <select data-prop-template-logo
+                    class="w-full rounded-lg border border-gray-200 bg-white px-2 py-2 text-xs font-semibold text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-200">
+                    <option value="">No logo (show placeholder)</option>
+                  </select>
+                  <button data-btn="upload-template-logo"
+                    class="mt-2 inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
+                    <i data-feather="upload" class="h-4 w-4"></i> Upload logo
+                  </button>
+                  <input data-file="template-logo" type="file" accept="image/*" class="hidden" />
+                </div>
                 <div class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
                   <div class="font-semibold text-gray-800 mb-1">Keyboard shortcuts</div>
                   <ul class="list-disc pl-4 space-y-1">
     this.$propsText = this.querySelector("[data-props-text]");
     this.$propsRect = this.querySelector("[data-props-rect]");
     this.$propsImage = this.querySelector("[data-props-image]");
+    this.$templateLogoSelect = this.querySelector("[data-prop-template-logo]");
     this.$imgFile = this.querySelector('[data-file="image"]');
     this.$replaceFile = this.querySelector('[data-file="replace"]');
+    this.$templateLogoFile = this.querySelector('[data-file="template-logo"]');
     if (this.$canvas && "ResizeObserver" in window) {
       this._resizeObserver = new ResizeObserver(() => {
     this.querySelector('[data-btn="replace-image"]').addEventListener("click", () => this.$replaceFile.click());
     this.$replaceFile.addEventListener("change", (e) => this._handleImageUpload(e, "replace"));
+    // company logo controls
+    this.querySelector('[data-btn="upload-template-logo"]').addEventListener("click", () => {
+      this.$templateLogoFile.click();
+    });
+    this.$templateLogoFile.addEventListener("change", (e) => {
+      const file = e.target.files && e.target.files[0];
+      if (file) {
+        this._uploadTemplateLogo(file);
+      }
+      e.target.value = "";
+    });
+    this.$templateLogoSelect.addEventListener("change", () => {
+      const template = this._getTemplate();
+      template.company_logo = this.$templateLogoSelect.value;
+      this._savePages();
+      this.renderCanvas();
+    });
     // canvas interactions
     this.$canvas.addEventListener("pointerdown", (e) => this.onCanvasPointerDown(e));
     window.addEventListener("pointermove", (e) => this.onPointerMove(e));
     this.renderCanvas();
     this.updateCanvasScale();
     this.updatePropsPanel();
+    this._syncTemplateLogoOptions();
     this.updateUndoRedoButtons();
     this._refreshIcons();
   }
   _resolveLogoUrl(session, rawValue) {
     const value = String(rawValue || "").trim();
+    if (!value) return "";
     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) {
+      if (photo && photo.id && value === photo.id) {
+        return photo.url || (this.sessionId ? `${this._apiRoot()}/sessions/${this.sessionId}/uploads/${photo.id}` : "");
+      }
       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}` : "");
       }
     }
+    return "";
+  }
+  _syncTemplateLogoOptions() {
+    if (!this.$templateLogoSelect) return;
+    const session = this.state.payload || {};
+    const template = this._getTemplate();
+    const current = String(template.company_logo || "");
+    const uploads = (session && session.uploads && session.uploads.photos) || [];
+    const previousValue = this.$templateLogoSelect.value;
+    this.$templateLogoSelect.innerHTML = "";
+    const noneOption = document.createElement("option");
+    noneOption.value = "";
+    noneOption.textContent = "No logo (show placeholder)";
+    this.$templateLogoSelect.appendChild(noneOption);
+    uploads.forEach((photo) => {
+      const option = document.createElement("option");
+      option.value = String(photo.name || photo.id || "");
+      option.textContent = String(photo.name || photo.id || "Unnamed image");
+      if (option.value) {
+        this.$templateLogoSelect.appendChild(option);
+      }
+    });
+    const nextValue = current || previousValue || "";
+    this.$templateLogoSelect.value = nextValue;
+  }
+  async _uploadTemplateLogo(file) {
+    const base = this._apiRoot();
+    if (!base || !this.sessionId) {
+      this._toast("Missing session");
+      return;
+    }
+    const payload = this.state.payload || {};
+    const existing = new Set(
+      ((payload.uploads && payload.uploads.photos) || []).map((photo) => photo.id),
+    );
+    try {
+      this._toast("Uploading logo...");
+      const form = new FormData();
+      form.append("file", file);
+      const res = await fetch(`${base}/sessions/${this.sessionId}/uploads`, {
+        method: "POST",
+        body: form,
+      });
+      if (!res.ok) {
+        throw new Error("Upload failed");
+      }
+      const updated = await res.json();
+      this.state.payload = updated;
+      const photos = (updated.uploads && updated.uploads.photos) || [];
+      const uploaded =
+        photos.find((photo) => !existing.has(photo.id)) ||
+        photos.find((photo) => photo.name === file.name);
+      const template = this._getTemplate();
+      template.company_logo = uploaded
+        ? String(uploaded.name || uploaded.id || "")
+        : template.company_logo || "";
+      this._savePages();
+      this.renderCanvas();
+      this._syncTemplateLogoOptions();
+      this._toast("Logo uploaded");
+    } catch {
+      this._toast("Logo upload failed");
+    }
   }
   _photoKey(photo) {
       "figure_caption",
       fallbackLabel || photo.name || "",
       "Figure caption",
+      "text-[10px] text-gray-600 text-center w-full break-all leading-tight",
+      false,
       false,
     );
     return `
+      <figure class="rounded-lg border border-gray-200 bg-gray-50 p-2 pb-3 break-inside-avoid mb-3 flex flex-col gap-1 overflow-hidden">
+        <div class="w-full flex-1 flex items-center justify-center">
+          <img src="${safeUrl}" alt="${label}" class="w-full object-contain max-h-[240px]" />
+        </div>
+        <figcaption class="text-[10px] text-gray-600 text-center break-all leading-tight">${caption}</figcaption>
       </figure>
     `;
   }
     const observationsHtml =
       variant === "full"
         ? `
+        <section class="mb-2" aria-labelledby="observations-title">
+          <h2 id="observations-title" class="text-[10px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-1">
             Observations and Findings
           </h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
             <div class="md:col-span-2">
+              <div class="grid grid-cols-3 gap-2">
                 <div class="space-y-0.5">
+                  <div class="text-[9px] font-medium text-gray-500">Ref</div>
+                  ${this._tplField("reference", reference, "Ref", "text-[10px] font-semibold text-gray-900")}
                 </div>
                 <div class="space-y-0.5">
+                  <div class="text-[9px] font-medium text-gray-500">Area</div>
+                  ${this._tplField("area", area, "Area", "text-[10px] font-semibold text-gray-900")}
                 </div>
                 <div class="space-y-0.5">
+                  <div class="text-[9px] font-medium text-gray-500">Location</div>
+                  ${this._tplField("functional_location", functionalLocation, "Location", "text-[10px] font-semibold text-gray-900")}
                 </div>
               </div>
             </div>
             <div class="md:col-span-2 flex justify-center">
+              <div class="inline-flex items-center gap-4">
                 <div class="text-center space-y-1">
+                  <div class="text-[9px] font-medium text-gray-500">Category</div>
                   ${this._tplSelectField(
                     "category",
                     category,
                     categoryOptions,
+                    `min-w-[140px] rounded-md border px-3 py-1 text-[10px] font-semibold text-center ${categoryBadge.className}`,
                   )}
                 </div>
                 <div class="text-center space-y-1">
+                  <div class="text-[9px] font-medium text-gray-500">Priority</div>
                   ${this._tplSelectField(
                     "priority",
                     priority,
                     priorityOptions,
+                    `min-w-[140px] rounded-md border px-3 py-1 text-[10px] font-semibold text-center ${priorityBadge.className}`,
                   )}
                 </div>
             </div>
             <div class="md:col-span-2 space-y-1">
+              <div class="text-[9px] font-medium text-gray-500">Condition Description</div>
+                <div class="bg-gray-50 border-l-4 border-gray-300 p-1.5 rounded-sm">
+                  <div class="text-gray-700 text-[9px] font-medium leading-snug">
+                    ${this._tplField("item_description", itemDescription, "Item description", "template-field-multiline text-gray-700 text-[9px] font-medium leading-snug", true)}
                   </div>
                 </div>
             </div>
             <div class="md:col-span-2 space-y-1">
+              <div class="text-[9px] font-medium text-gray-500">Action Required</div>
+              <div class="bg-gray-50 border-l-4 border-gray-300 p-1.5 rounded-sm">
+                <div class="text-gray-700 text-[9px] font-medium leading-snug">
+                  ${this._tplField("required_action", requiredAction, "Required action", "template-field-multiline text-gray-700 text-[9px] font-medium leading-snug", true)}
                 </div>
               </div>
             </div>
         <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-14 w-auto object-contain" />
             </div>
             <div class="text-center leading-tight">
             </div>
             <div class="flex items-center justify-end">
+              ${(() => {
+                const logoUrl = this._resolveLogoUrl(session, companyLogo);
+                if (logoUrl) {
+                  return `<img src="${this._escape(logoUrl)}" alt="Company logo" class="h-14 w-auto object-contain" />`;
+                }
+                return `<div class="h-14 min-w-[140px] rounded-md border border-dashed border-gray-300 px-2 text-[9px] font-semibold text-gray-400 flex items-center justify-center text-center">Company Logo not found</div>`;
+              })()}
             </div>
           </div>
         </header>
       : [];
     if (!photoIds.length) return [normalized];
     if (normalized.variant === "photos") {
+      const chunks = [];
+      for (let i = 0; i < photoIds.length; i += MAX_PHOTOS_CONTINUATION_PAGE) {
+        chunks.push(photoIds.slice(i, i + MAX_PHOTOS_CONTINUATION_PAGE));
+      }
+      if (chunks.length <= 1) {
+        return [{ ...normalized, photo_ids: chunks[0] || [], variant: "photos" }];
+      }
       return chunks.map((chunk, idx) => {
         if (idx === 0) {
           return { ...normalized, photo_ids: chunk, variant: "photos" };
       });
     }
+    const baseChunk = photoIds.slice(0, MAX_PHOTOS_PRIMARY_PAGE);
+    const extraIds = photoIds.slice(MAX_PHOTOS_PRIMARY_PAGE);
+    const continuationChunks = [];
+    for (let i = 0; i < extraIds.length; i += MAX_PHOTOS_CONTINUATION_PAGE) {
+      continuationChunks.push(extraIds.slice(i, i + MAX_PHOTOS_CONTINUATION_PAGE));
+    }
     const basePage = {
       ...normalized,
+      photo_ids: baseChunk,
       variant: normalized.variant || "full",
     };
+    if (!continuationChunks.length) return [basePage];
+    const extraPages = continuationChunks.map((chunk) =>
       this._buildPhotoContinuation(normalized, chunk),
     );
     return [basePage, ...extraPages];

frontend/src/index.css CHANGED Viewed

@@ -23,7 +23,7 @@ body {
 }
 .template-field-multiline {
-  min-height: 2.4em;
   white-space: pre-wrap;
 }

 }
 .template-field-multiline {
+  min-height: 1.8em;
   white-space: pre-wrap;
 }

frontend/src/lib/pageTemplates.ts ADDED Viewed

	@@ -0,0 +1,80 @@

+import type { Page, PageTemplateDefinition } from "../types/session";
+export const BUILTIN_PAGE_TEMPLATES: PageTemplateDefinition[] = [
+  {
+    id: "repex:standard",
+    name: "Standard Job Sheet",
+    description: "Observations + up to two photos.",
+    blank: false,
+    variant: "full",
+    source: "builtin",
+  },
+  {
+    id: "repex:photos",
+    name: "Photo Continuation",
+    description: "Photo-only continuation page.",
+    blank: false,
+    variant: "photos",
+    source: "builtin",
+  },
+  {
+    id: "repex:blank",
+    name: "Blank Canvas",
+    description: "Blank white page.",
+    blank: true,
+    variant: "full",
+    source: "builtin",
+  },
+];
+export function mergePageTemplates(
+  customTemplates?: PageTemplateDefinition[],
+): PageTemplateDefinition[] {
+  const byId = new Map<string, PageTemplateDefinition>();
+  BUILTIN_PAGE_TEMPLATES.forEach((template) => {
+    byId.set(template.id, template);
+  });
+  (customTemplates ?? []).forEach((template) => {
+    if (!template?.id) return;
+    byId.set(template.id, { ...template, source: "custom" });
+  });
+  return Array.from(byId.values());
+}
+export function inferPageTemplateId(page?: Page | null): string {
+  if (page?.page_template) return page.page_template;
+  if (page?.blank) return "repex:blank";
+  if (page?.variant === "photos") return "repex:photos";
+  return "repex:standard";
+}
+export function resolvePageTemplate(
+  page: Page | null | undefined,
+  templates: PageTemplateDefinition[],
+): PageTemplateDefinition {
+  const id = inferPageTemplateId(page);
+  return (
+    templates.find((template) => template.id === id) ??
+    BUILTIN_PAGE_TEMPLATES[0]
+  );
+}
+export function applyPageTemplateToPage(
+  page: Page,
+  template: PageTemplateDefinition,
+): Page {
+  const next: Page = {
+    ...page,
+    page_template: template.id,
+    blank: Boolean(template.blank),
+    variant: template.variant ?? "full",
+  };
+  if (template.photo_layout) {
+    next.photo_layout = template.photo_layout;
+  }
+  return next;
+}
+export function createCustomTemplateId() {
+  return `tpl_${crypto.randomUUID().replace(/-/g, "")}`;
+}

frontend/src/lib/sections.ts CHANGED Viewed

@@ -9,7 +9,8 @@ export type FlatPage = {
   flatIndex: number;
 };
-const MAX_PHOTOS_PER_PAGE = 2;
 function cloneTemplate(template?: Page["template"]): Page["template"] {
   if (!template) return undefined;
@@ -45,36 +46,42 @@ function splitPagePhotos(page: Page): Page[] {
     return [normalized];
   }
-  const chunks: string[][] = [];
-  for (let i = 0; i < photoIds.length; i += MAX_PHOTOS_PER_PAGE) {
-    chunks.push(photoIds.slice(i, i + MAX_PHOTOS_PER_PAGE));
-  }
-  if (chunks.length <= 1) {
-    return [
-      {
-        ...normalized,
-        photo_ids: chunks[0] ?? [],
-        variant: normalized.variant,
-      },
-    ];
-  }
   if (normalized.variant === "photos") {
     return chunks.map((chunk, idx) => {
-      if (idx === 0) {
-        return { ...normalized, photo_ids: chunk, variant: "photos" };
-      }
       return buildPhotoContinuation(normalized, chunk);
     });
   }
   const basePage: Page = {
     ...normalized,
-    photo_ids: chunks[0],
     variant: normalized.variant ?? "full",
   };
-  const extraPages = chunks.slice(1).map((chunk) =>
     buildPhotoContinuation(normalized, chunk),
   );
   return [basePage, ...extraPages];

   flatIndex: number;
 };
+const MAX_PHOTOS_PRIMARY_PAGE = 2;
+const MAX_PHOTOS_CONTINUATION_PAGE = 6;
 function cloneTemplate(template?: Page["template"]): Page["template"] {
   if (!template) return undefined;
     return [normalized];
   }
   if (normalized.variant === "photos") {
+    const chunks: string[][] = [];
+    for (let i = 0; i < photoIds.length; i += MAX_PHOTOS_CONTINUATION_PAGE) {
+      chunks.push(photoIds.slice(i, i + MAX_PHOTOS_CONTINUATION_PAGE));
+    }
+    if (chunks.length <= 1) {
+      return [
+        {
+          ...normalized,
+          photo_ids: chunks[0] ?? [],
+          variant: "photos",
+        },
+      ];
+    }
     return chunks.map((chunk, idx) => {
+      if (idx === 0) return { ...normalized, photo_ids: chunk, variant: "photos" };
       return buildPhotoContinuation(normalized, chunk);
     });
   }
+  const baseChunk = photoIds.slice(0, MAX_PHOTOS_PRIMARY_PAGE);
+  const extraIds = photoIds.slice(MAX_PHOTOS_PRIMARY_PAGE);
+  const continuationChunks: string[][] = [];
+  for (let i = 0; i < extraIds.length; i += MAX_PHOTOS_CONTINUATION_PAGE) {
+    continuationChunks.push(extraIds.slice(i, i + MAX_PHOTOS_CONTINUATION_PAGE));
+  }
   const basePage: Page = {
     ...normalized,
+    photo_ids: baseChunk,
     variant: normalized.variant ?? "full",
   };
+  if (!continuationChunks.length) {
+    return [basePage];
+  }
+  const extraPages = continuationChunks.map((chunk) =>
     buildPhotoContinuation(normalized, chunk),
   );
   return [basePage, ...extraPages];

frontend/src/lib/version.ts CHANGED Viewed

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


1	+ export const APP_VERSION = "V0.1.4";

frontend/src/pages/EditLayoutsPage.tsx CHANGED Viewed

@@ -15,10 +15,19 @@ import {
 } from "react-feather";
 import { putJson, request } from "../lib/api";
 import { BASE_W } from "../lib/report";
 import { ensureSections, flattenSections, replacePage } from "../lib/sections";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
-import type { JobsheetSection, Session } from "../types/session";
 import { PageFooter } from "../components/PageFooter";
 import { PageHeader } from "../components/PageHeader";
 import { PageShell } from "../components/PageShell";
@@ -38,6 +47,12 @@ export default function EditLayoutsPage() {
   const [saveState, setSaveState] = useState<
     "saved" | "saving" | "pending" | "error"
   >("saved");
   const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>(
     {},
   );
@@ -57,11 +72,21 @@ export default function EditLayoutsPage() {
       try {
         const data = await request<Session>(`/sessions/${sessionId}`);
         setSession(data);
         const sectionResp = await request<{ sections: JobsheetSection[] }>(
           `/sessions/${sessionId}/sections`,
         );
         const normalized = ensureSections(sectionResp.sections);
         setSections(normalized);
         lastSavedRef.current = JSON.stringify(normalized);
         pendingSaveRef.current = lastSavedRef.current;
         setSaveState("saved");
@@ -86,26 +111,19 @@ export default function EditLayoutsPage() {
   const previewWidth = 220;
   const previewScale = previewWidth / BASE_W;
-  const PHOTO_LAYOUT_PRESETS = [
-    {
-      id: "auto",
-      label: "Auto fit",
-      description: "Let the system choose 1 or 2 columns per page.",
-      preview: "auto",
-    },
-    {
-      id: "two-column",
-      label: "Two column",
-      description: "Force a two-column photo grid.",
-      preview: "two-column",
-    },
-    {
-      id: "stacked",
-      label: "Stacked",
-      description: "Stack images vertically for tall photos.",
-      preview: "stacked",
-    },
-  ] as const;
   function hasExplicitPhotos(source: JobsheetSection[]) {
     return source.some((section) =>
@@ -151,6 +169,17 @@ export default function EditLayoutsPage() {
     }, 800);
   }, [sections, sessionId, isSaving]);
   async function saveLayout(
     next: JobsheetSection[],
     nextSelectedIds?: string[],
@@ -196,6 +225,7 @@ export default function EditLayoutsPage() {
         setSaveState("saved");
         if (updatedSession) {
           setSession(updatedSession);
         }
         if (!silent) {
           setStatus("Layout saved.");
@@ -227,12 +257,13 @@ export default function EditLayoutsPage() {
   }
   async function handleAddSection() {
     const next = [
       ...sections,
       {
         id: crypto.randomUUID(),
         title: `Section ${sections.length + 1}`,
-        pages: [{ items: [] }],
       },
     ];
     await saveLayout(next);
@@ -254,11 +285,21 @@ export default function EditLayoutsPage() {
   }
   async function handleAddPage(sectionIndex: number) {
     const next = sections.map((section, idx) => {
       if (idx !== sectionIndex) return section;
       return {
         ...section,
-        pages: [...(section.pages ?? []), { items: [], blank: true }],
       };
     });
     if (session) {
@@ -271,6 +312,27 @@ export default function EditLayoutsPage() {
     await saveLayout(next);
   }
   async function handleRemovePage(sectionIndex: number, pageIndex: number) {
     const next = sections.map((section, idx) => {
       if (idx !== sectionIndex) return section;
@@ -308,22 +370,6 @@ export default function EditLayoutsPage() {
     await saveLayout(next);
   }
-  function applyPhotoLayout(
-    sectionIndex: number,
-    pageIndex: number,
-    layout: "auto" | "two-column" | "stacked",
-  ) {
-    if (!canModify) return;
-    setSections((prev) => {
-      const section = prev[sectionIndex];
-      const page = section?.pages?.[pageIndex];
-      if (!section || !page) return prev;
-      const nextPage = { ...page, photo_layout: layout };
-      return replacePage(prev, sectionIndex, pageIndex, nextPage);
-    });
-    setStatus(`Applied ${layout.replace("-", " ")} layout to page ${pageIndex + 1}.`);
-  }
   async function saveAndNavigate(target: string) {
     if (!sessionId) {
       navigate(target);
@@ -455,6 +501,17 @@ export default function EditLayoutsPage() {
             Edit Page Layouts
           </span>
           <Link
             to={`/export${sessionQuery}`}
             onClick={(event) => {
@@ -512,53 +569,6 @@ export default function EditLayoutsPage() {
         ) : null}
       </section>
-      <section className="mb-6 rounded-lg border border-gray-200 bg-white p-4">
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-          <div>
-            <h2 className="text-lg font-semibold text-gray-900">
-              Image Layout Presets
-            </h2>
-            <p className="text-sm text-gray-600">
-              Drag a preset onto a page to set how photos are arranged.
-            </p>
-          </div>
-        </div>
-        <div className="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3">
-          {PHOTO_LAYOUT_PRESETS.map((preset) => (
-            <div
-              key={preset.id}
-              draggable
-              onDragStart={(event) => {
-                event.dataTransfer.setData("text/plain", preset.id);
-                event.dataTransfer.effectAllowed = "copy";
-              }}
-              className="rounded-lg border border-gray-200 bg-gray-50 p-3 cursor-grab active:cursor-grabbing"
-            >
-              <div className="text-sm font-semibold text-gray-900">
-                {preset.label}
-              </div>
-              <div className="text-xs text-gray-600">{preset.description}</div>
-              <div className="mt-2">
-                {preset.preview === "stacked" ? (
-                  <div className="grid grid-cols-1 gap-1">
-                    <div className="h-6 rounded bg-gray-200" />
-                    <div className="h-6 rounded bg-gray-200" />
-                  </div>
-                ) : (
-                  <div className="grid grid-cols-2 gap-1">
-                    <div className="h-6 rounded bg-gray-200" />
-                    <div className="h-6 rounded bg-gray-200" />
-                  </div>
-                )}
-              </div>
-              <div className="mt-2 text-[11px] text-gray-500">
-                Drag to apply
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
       <section className="space-y-6">
         {sections.map((section, sectionIndex) => {
           const isCollapsed = collapsedSections[section.id] ?? false;
@@ -613,6 +623,23 @@ export default function EditLayoutsPage() {
                       </>
                     )}
                   </button>
                   <button
                     type="button"
                     onClick={() => handleAddPage(sectionIndex)}
@@ -622,16 +649,29 @@ export default function EditLayoutsPage() {
                     <Plus className="h-4 w-4" />
                     Add page
                   </button>
                 </div>
               </div>
               {!isCollapsed ? (
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  {(section.pages ?? []).map((page, pageIndex) => (
-                    <div
-                      key={`${section.id}-page-${pageIndex}`}
-                      className="rounded-lg border border-gray-200 bg-white p-3"
-                    >
                       <div className="flex items-center justify-between mb-2">
                         <div>
                           <div className="text-sm font-semibold text-gray-900">
@@ -672,6 +712,35 @@ export default function EditLayoutsPage() {
                         </div>
                       </div>
                       <div
                         className="mx-auto rounded-lg border border-gray-200 bg-white"
                         style={{ width: previewWidth }}
@@ -691,29 +760,9 @@ export default function EditLayoutsPage() {
                           adaptive
                         />
                       </div>
-                      <div
-                        className="mt-2 rounded-md border border-dashed border-gray-200 bg-gray-50 px-2 py-2 text-[11px] text-gray-600"
-                        onDragOver={(event) => {
-                          event.preventDefault();
-                          event.dataTransfer.dropEffect = "copy";
-                        }}
-                        onDrop={(event) => {
-                          event.preventDefault();
-                          const layout = event.dataTransfer.getData("text/plain");
-                          if (
-                            layout === "auto" ||
-                            layout === "two-column" ||
-                            layout === "stacked"
-                          ) {
-                            applyPhotoLayout(sectionIndex, pageIndex, layout);
-                          }
-                        }}
-                      >
-                        Drop image layout here - Current: {page.photo_layout ?? "auto"}
-                      </div>
                     </div>
-                  ))}
                 </div>
               ) : (
                 <div className="rounded-md border border-dashed border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-500">

 } from "react-feather";
 import { putJson, request } from "../lib/api";
+import {
+  applyPageTemplateToPage,
+  inferPageTemplateId,
+  mergePageTemplates,
+} from "../lib/pageTemplates";
 import { BASE_W } from "../lib/report";
 import { ensureSections, flattenSections, replacePage } from "../lib/sections";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
+import type {
+  JobsheetSection,
+  PageTemplateDefinition,
+  Session,
+} from "../types/session";
 import { PageFooter } from "../components/PageFooter";
 import { PageHeader } from "../components/PageHeader";
 import { PageShell } from "../components/PageShell";
   const [saveState, setSaveState] = useState<
     "saved" | "saving" | "pending" | "error"
   >("saved");
+  const [pageTemplates, setPageTemplates] = useState<PageTemplateDefinition[]>(
+    mergePageTemplates(undefined),
+  );
+  const [newPageTemplateBySection, setNewPageTemplateBySection] = useState<
+    Record<string, string>
+  >({});
   const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>(
     {},
   );
       try {
         const data = await request<Session>(`/sessions/${sessionId}`);
         setSession(data);
+        setPageTemplates(mergePageTemplates(data.page_templates));
         const sectionResp = await request<{ sections: JobsheetSection[] }>(
           `/sessions/${sessionId}/sections`,
         );
         const normalized = ensureSections(sectionResp.sections);
         setSections(normalized);
+        setNewPageTemplateBySection((prev) => {
+          const next = { ...prev };
+          normalized.forEach((section) => {
+            if (!next[section.id]) {
+              next[section.id] = "repex:blank";
+            }
+          });
+          return next;
+        });
         lastSavedRef.current = JSON.stringify(normalized);
         pendingSaveRef.current = lastSavedRef.current;
         setSaveState("saved");
   const previewWidth = 220;
   const previewScale = previewWidth / BASE_W;
+  function findTemplate(templateId?: string) {
+    const fallback = mergePageTemplates(undefined)[0];
+    const selectedId = (templateId || "").trim();
+    if (selectedId) {
+      const match = pageTemplates.find((template) => template.id === selectedId);
+      if (match) return match;
+    }
+    return (
+      pageTemplates.find((template) => template.id === "repex:standard") ??
+      pageTemplates[0] ??
+      fallback
+    );
+  }
   function hasExplicitPhotos(source: JobsheetSection[]) {
     return source.some((section) =>
     }, 800);
   }, [sections, sessionId, isSaving]);
+  useEffect(() => {
+    if (!sections.length) return;
+    setNewPageTemplateBySection((prev) => {
+      const next: Record<string, string> = {};
+      sections.forEach((section) => {
+        next[section.id] = prev[section.id] ?? "repex:blank";
+      });
+      return next;
+    });
+  }, [sections]);
   async function saveLayout(
     next: JobsheetSection[],
     nextSelectedIds?: string[],
         setSaveState("saved");
         if (updatedSession) {
           setSession(updatedSession);
+          setPageTemplates(mergePageTemplates(updatedSession.page_templates));
         }
         if (!silent) {
           setStatus("Layout saved.");
   }
   async function handleAddSection() {
+    const baseTemplate = findTemplate("repex:standard");
     const next = [
       ...sections,
       {
         id: crypto.randomUUID(),
         title: `Section ${sections.length + 1}`,
+        pages: [applyPageTemplateToPage({ items: [] }, baseTemplate)],
       },
     ];
     await saveLayout(next);
   }
   async function handleAddPage(sectionIndex: number) {
+    const section = sections[sectionIndex];
+    const templateId = section ? newPageTemplateBySection[section.id] : undefined;
+    const selectedTemplate = findTemplate(templateId);
     const next = sections.map((section, idx) => {
       if (idx !== sectionIndex) return section;
+      const baseTemplate = {
+        ...(section.pages?.[section.pages.length - 1]?.template ?? {}),
+      };
+      const nextPage = applyPageTemplateToPage(
+        { items: [], template: baseTemplate },
+        selectedTemplate,
+      );
       return {
         ...section,
+        pages: [...(section.pages ?? []), nextPage],
       };
     });
     if (session) {
     await saveLayout(next);
   }
+  function handleChangePageTemplate(
+    sectionIndex: number,
+    pageIndex: number,
+    templateId: string,
+  ) {
+    const selectedTemplate = findTemplate(templateId);
+    if (!selectedTemplate) return;
+    setSections((prev) => {
+      const section = prev[sectionIndex];
+      const page = section?.pages?.[pageIndex];
+      if (!section || !page) return prev;
+      const nextPage = applyPageTemplateToPage(
+        { ...page, template: { ...(page.template ?? {}) } },
+        selectedTemplate,
+      );
+      return replacePage(prev, sectionIndex, pageIndex, nextPage);
+    });
+    const label = selectedTemplate.name || selectedTemplate.id;
+    setStatus(`Applied "${label}" template to page ${pageIndex + 1}.`);
+  }
   async function handleRemovePage(sectionIndex: number, pageIndex: number) {
     const next = sections.map((section, idx) => {
       if (idx !== sectionIndex) return section;
     await saveLayout(next);
   }
   async function saveAndNavigate(target: string) {
     if (!sessionId) {
       navigate(target);
             Edit Page Layouts
           </span>
+          <Link
+            to={`/edit-layouts/templates${sessionQuery}`}
+            onClick={(event) => {
+              event.preventDefault();
+              void saveAndNavigate(`/edit-layouts/templates${sessionQuery}`);
+            }}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            Templates
+          </Link>
           <Link
             to={`/export${sessionQuery}`}
             onClick={(event) => {
         ) : null}
       </section>
       <section className="space-y-6">
         {sections.map((section, sectionIndex) => {
           const isCollapsed = collapsedSections[section.id] ?? false;
                       </>
                     )}
                   </button>
+                  <select
+                    value={newPageTemplateBySection[section.id] ?? "repex:blank"}
+                    onChange={(event) =>
+                      setNewPageTemplateBySection((prev) => ({
+                        ...prev,
+                        [section.id]: event.target.value,
+                      }))
+                    }
+                    className="rounded-lg border border-gray-200 bg-white px-2 py-2 text-xs font-semibold text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-200"
+                    title="Template used when adding a page to this section"
+                  >
+                    {pageTemplates.map((template) => (
+                      <option key={`section-${section.id}-template-${template.id}`} value={template.id}>
+                        {template.name}
+                      </option>
+                    ))}
+                  </select>
                   <button
                     type="button"
                     onClick={() => handleAddPage(sectionIndex)}
                     <Plus className="h-4 w-4" />
                     Add page
                   </button>
+                  <Link
+                    to={`/edit-layouts/templates${sessionQuery}`}
+                    onClick={(event) => {
+                      event.preventDefault();
+                      void saveAndNavigate(`/edit-layouts/templates${sessionQuery}`);
+                    }}
+                    className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition"
+                  >
+                    Manage templates
+                  </Link>
                 </div>
               </div>
               {!isCollapsed ? (
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {(section.pages ?? []).map((page, pageIndex) => {
+                    const currentTemplateId = inferPageTemplateId(page);
+                    const currentTemplate = findTemplate(currentTemplateId);
+                    return (
+                      <div
+                        key={`${section.id}-page-${pageIndex}`}
+                        className="rounded-lg border border-gray-200 bg-white p-3"
+                      >
                       <div className="flex items-center justify-between mb-2">
                         <div>
                           <div className="text-sm font-semibold text-gray-900">
                         </div>
                       </div>
+                      <div className="mb-2 rounded-md border border-gray-200 bg-gray-50 p-2">
+                        <label className="block text-[11px] font-semibold uppercase tracking-wide text-gray-500">
+                          Page Template
+                        </label>
+                        <select
+                          value={currentTemplateId}
+                          onChange={(event) =>
+                            handleChangePageTemplate(
+                              sectionIndex,
+                              pageIndex,
+                              event.target.value,
+                            )
+                          }
+                          className="mt-1 w-full rounded-md border border-gray-200 bg-white px-2 py-1 text-xs font-semibold text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-200"
+                        >
+                          {pageTemplates.map((template) => (
+                            <option
+                              key={`page-${section.id}-${pageIndex}-${template.id}`}
+                              value={template.id}
+                            >
+                              {template.name}
+                            </option>
+                          ))}
+                        </select>
+                        <div className="mt-1 text-[11px] text-gray-500">
+                          {currentTemplate.description || "No description."}
+                        </div>
+                      </div>
                       <div
                         className="mx-auto rounded-lg border border-gray-200 bg-white"
                         style={{ width: previewWidth }}
                           adaptive
                         />
                       </div>
                     </div>
+                  );
+                })}
                 </div>
               ) : (
                 <div className="rounded-md border border-dashed border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-500">

frontend/src/pages/ImagePlacementPage.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ import { BASE_W } from "../lib/report";
 import { ensureSections, flattenSections, replacePage } from "../lib/sections";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
 import { APP_VERSION } from "../lib/version";
-import type { JobsheetSection, Session } from "../types/session";
 import { ReportPageCanvas } from "../components/ReportPageCanvas";
 import { InfoMenu } from "../components/InfoMenu";
@@ -32,15 +32,39 @@ export default function ImagePlacementPage() {
   const [scale, setScale] = useState(1);
   const [error, setError] = useState("");
   const [photoSelection, setPhotoSelection] = useState("");
   const [isSaving, setIsSaving] = useState(false);
   const [saveState, setSaveState] = useState<"saved" | "saving" | "error">(
     "saved",
   );
   const [status, setStatus] = useState("");
   const [isUploading, setIsUploading] = useState(false);
   const stageRef = useRef<HTMLDivElement | null>(null);
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
   useEffect(() => {
     if (!sessionId) {
@@ -94,23 +118,6 @@ export default function ImagePlacementPage() {
     setPageIndex((idx) => Math.min(Math.max(0, idx), totalPages - 1));
   }, [totalPages]);
-  useEffect(() => {
-    setPhotoSelection("");
-  }, [pageIndex]);
-  useEffect(() => {
-    const handler = (event: KeyboardEvent) => {
-      if (event.key === "ArrowRight") {
-        setPageIndex((idx) => Math.min(totalPages - 1, idx + 1));
-      }
-      if (event.key === "ArrowLeft") {
-        setPageIndex((idx) => Math.max(0, idx - 1));
-      }
-    };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [totalPages]);
   const page = flatPages[pageIndex]?.page ?? null;
   const pageEntry = flatPages[pageIndex] ?? null;
   const sectionLabel = flatPages[pageIndex]?.sectionTitle
@@ -161,6 +168,25 @@ export default function ImagePlacementPage() {
     if (!all.length) return [];
     return all.filter((photo) => !linkedPhotoIds.has(photo.id));
   }, [linkedPhotoIds, session?.uploads?.photos]);
   const saveIndicator = useMemo(() => {
     const base =
@@ -226,6 +252,34 @@ export default function ImagePlacementPage() {
     void persistSections(nextSections);
   }
   function addPhotoToPage(photoId: string) {
     if (!photoId || !pageEntry) return;
     const ids = [...pagePhotoIds];
@@ -296,6 +350,40 @@ export default function ImagePlacementPage() {
     }
   }
   return (
     <main className="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8 print:ring-0 print:shadow-none print:rounded-none">
       <header className="mb-8 border-b border-gray-200 pb-4">
@@ -454,6 +542,72 @@ export default function ImagePlacementPage() {
       {pageEntry ? (
         <section className="mt-6 no-print" aria-label="Page images">
           <div className="flex flex-wrap items-center justify-between gap-3">
             <div>
               <h3 className="text-lg font-semibold text-gray-900">Page Images</h3>
@@ -527,63 +681,121 @@ export default function ImagePlacementPage() {
                 </span>
               </div>
               <p className="mt-2 text-[11px] text-gray-500">
-                Adding more than 2 images will automatically create a continuation
-                page for the overflow.
               </p>
             </div>
-            <div className="rounded-lg border border-gray-200 bg-white p-3">
-              <div className="text-xs font-semibold text-gray-600 uppercase">
-                Add image
               </div>
-              <div className="mt-2 flex flex-col gap-2">
-                <select
-                  value={photoSelection}
-                  onChange={(event) => setPhotoSelection(event.target.value)}
-                  className="w-full rounded-md border border-gray-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
-                >
-                  <option value="">Select an unlinked image</option>
-                  {availablePhotos.map((photo) => (
-                    <option key={`viewer-photo-${photo.id}`} value={photo.id}>
-                      {photo.name}
-                    </option>
-                  ))}
-                </select>
-                <button
-                  type="button"
-                  onClick={() => {
-                    addPhotoToPage(photoSelection);
-                    setPhotoSelection("");
-                  }}
-                  disabled={!photoSelection || isSaving}
-                  className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  Add selected image
-                </button>
-                <button
-                  type="button"
-                  onClick={() => uploadInputRef.current?.click()}
-                  disabled={isUploading || isSaving}
-                  className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  Upload new image
-                </button>
-                <input
-                  ref={uploadInputRef}
-                  type="file"
-                  accept="image/*"
-                  className="hidden"
-                  onChange={(event) => {
-                    const file = event.target.files?.[0];
-                    if (file) void uploadPhoto(file);
-                    event.target.value = "";
-                  }}
-                />
-                {availablePhotos.length === 0 ? (
-                  <p className="text-[11px] text-gray-500">
-                    All uploaded images are already linked.
-                  </p>
-                ) : null}
               </div>
             </div>
           </div>

 import { ensureSections, flattenSections, replacePage } from "../lib/sections";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
 import { APP_VERSION } from "../lib/version";
+import type { JobsheetSection, Session, TemplateFields } from "../types/session";
 import { ReportPageCanvas } from "../components/ReportPageCanvas";
 import { InfoMenu } from "../components/InfoMenu";
   const [scale, setScale] = useState(1);
   const [error, setError] = useState("");
   const [photoSelection, setPhotoSelection] = useState("");
+  const [logoSelection, setLogoSelection] = useState("");
   const [isSaving, setIsSaving] = useState(false);
   const [saveState, setSaveState] = useState<"saved" | "saving" | "error">(
     "saved",
   );
   const [status, setStatus] = useState("");
   const [isUploading, setIsUploading] = useState(false);
+  const [isLogoUploading, setIsLogoUploading] = useState(false);
   const stageRef = useRef<HTMLDivElement | null>(null);
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
+  const logoInputRef = useRef<HTMLInputElement | null>(null);
+  const PHOTO_LAYOUT_PRESETS = [
+    {
+      id: "auto" as const,
+      label: "Auto fit",
+      description: "Automatically balance photos across rows.",
+      preview: "auto" as const,
+    },
+    {
+      id: "two-column" as const,
+      label: "Two column",
+      description: "Force two columns for photo placement.",
+      preview: "two-column" as const,
+    },
+    {
+      id: "stacked" as const,
+      label: "Stacked",
+      description: "Stack photos in one column.",
+      preview: "stacked" as const,
+    },
+  ];
   useEffect(() => {
     if (!sessionId) {
     setPageIndex((idx) => Math.min(Math.max(0, idx), totalPages - 1));
   }, [totalPages]);
   const page = flatPages[pageIndex]?.page ?? null;
   const pageEntry = flatPages[pageIndex] ?? null;
   const sectionLabel = flatPages[pageIndex]?.sectionTitle
     if (!all.length) return [];
     return all.filter((photo) => !linkedPhotoIds.has(photo.id));
   }, [linkedPhotoIds, session?.uploads?.photos]);
+  const logoOptions = session?.uploads?.photos ?? [];
+  useEffect(() => {
+    setPhotoSelection("");
+    setLogoSelection(template?.company_logo ?? "");
+  }, [pageIndex, template?.company_logo]);
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === "ArrowRight") {
+        setPageIndex((idx) => Math.min(totalPages - 1, idx + 1));
+      }
+      if (event.key === "ArrowLeft") {
+        setPageIndex((idx) => Math.max(0, idx - 1));
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [totalPages]);
   const saveIndicator = useMemo(() => {
     const base =
     void persistSections(nextSections);
   }
+  function updatePageTemplate(nextTemplate: Partial<TemplateFields>) {
+    if (!pageEntry) return;
+    const mergedTemplate = { ...(pageEntry.page.template ?? {}), ...nextTemplate };
+    const nextPage = { ...pageEntry.page, template: mergedTemplate };
+    const nextSections = replacePage(
+      sections,
+      pageEntry.sectionIndex,
+      pageEntry.pageIndex,
+      nextPage,
+    );
+    setSections(nextSections);
+    void persistSections(nextSections);
+  }
+  function updatePageLayout(layout: "auto" | "two-column" | "stacked") {
+    if (!pageEntry) return;
+    const nextPage = { ...pageEntry.page, photo_layout: layout };
+    const nextSections = replacePage(
+      sections,
+      pageEntry.sectionIndex,
+      pageEntry.pageIndex,
+      nextPage,
+    );
+    setSections(nextSections);
+    setStatus(`Applied ${layout.replace("-", " ")} layout.`);
+    void persistSections(nextSections);
+  }
   function addPhotoToPage(photoId: string) {
     if (!photoId || !pageEntry) return;
     const ids = [...pagePhotoIds];
     }
   }
+  async function uploadLogo(file: File) {
+    if (!sessionId) return;
+    setIsLogoUploading(true);
+    setStatus(`Uploading logo ${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?.name) {
+        setLogoSelection(newPhoto.name);
+        updatePageTemplate({ company_logo: newPhoto.name });
+        setStatus(`Company logo set to ${newPhoto.name}.`);
+      } else {
+        setStatus("Uploaded logo. Select it from the list to apply.");
+      }
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to upload logo.";
+      setStatus(message);
+    } finally {
+      setIsLogoUploading(false);
+    }
+  }
   return (
     <main className="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8 print:ring-0 print:shadow-none print:rounded-none">
       <header className="mb-8 border-b border-gray-200 pb-4">
       {pageEntry ? (
         <section className="mt-6 no-print" aria-label="Page images">
+          <div className="mb-4 rounded-lg border border-gray-200 bg-white p-3">
+            <div className="text-xs font-semibold text-gray-600 uppercase">
+              Photo layout presets
+            </div>
+            <p className="mt-1 text-[11px] text-gray-500">
+              This controls how images are arranged for the current page.
+            </p>
+            <div className="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3">
+              {PHOTO_LAYOUT_PRESETS.map((preset) => (
+                <button
+                  key={`photo-layout-${preset.id}`}
+                  type="button"
+                  onClick={() => updatePageLayout(preset.id)}
+                  draggable
+                  onDragStart={(event) => {
+                    event.dataTransfer.setData("text/plain", preset.id);
+                    event.dataTransfer.effectAllowed = "copy";
+                  }}
+                  className={[
+                    "rounded-lg border p-3 text-left transition",
+                    (page?.photo_layout ?? "auto") === preset.id
+                      ? "border-blue-300 bg-blue-50"
+                      : "border-gray-200 bg-gray-50 hover:bg-gray-100",
+                  ].join(" ")}
+                >
+                  <div className="text-sm font-semibold text-gray-900">
+                    {preset.label}
+                  </div>
+                  <div className="text-xs text-gray-600">{preset.description}</div>
+                  <div className="mt-2">
+                    {preset.preview === "stacked" ? (
+                      <div className="grid grid-cols-1 gap-1">
+                        <div className="h-6 rounded bg-gray-200" />
+                        <div className="h-6 rounded bg-gray-200" />
+                      </div>
+                    ) : (
+                      <div className="grid grid-cols-2 gap-1">
+                        <div className="h-6 rounded bg-gray-200" />
+                        <div className="h-6 rounded bg-gray-200" />
+                      </div>
+                    )}
+                  </div>
+                  <div className="mt-2 text-[11px] text-gray-500">
+                    Click or drag
+                  </div>
+                </button>
+              ))}
+            </div>
+            <div
+              className="mt-3 rounded-md border border-dashed border-gray-200 bg-gray-50 px-3 py-2 text-[11px] text-gray-600"
+              onDragOver={(event) => {
+                event.preventDefault();
+                event.dataTransfer.dropEffect = "copy";
+              }}
+              onDrop={(event) => {
+                event.preventDefault();
+                const layout = event.dataTransfer.getData("text/plain");
+                if (layout === "auto" || layout === "two-column" || layout === "stacked") {
+                  updatePageLayout(layout);
+                }
+              }}
+            >
+              Drop preset here to apply to current page - Current: {page?.photo_layout ?? "auto"}
+            </div>
+          </div>
           <div className="flex flex-wrap items-center justify-between gap-3">
             <div>
               <h3 className="text-lg font-semibold text-gray-900">Page Images</h3>
                 </span>
               </div>
               <p className="mt-2 text-[11px] text-gray-500">
+                First template pages show up to 2 images. Continuation pages can
+                include more images automatically.
               </p>
             </div>
+            <div className="space-y-4">
+              <div className="rounded-lg border border-gray-200 bg-white p-3">
+                <div className="text-xs font-semibold text-gray-600 uppercase">
+                  Add image
+                </div>
+                <div className="mt-2 flex flex-col gap-2">
+                  <select
+                    value={photoSelection}
+                    onChange={(event) => setPhotoSelection(event.target.value)}
+                    className="w-full rounded-md border border-gray-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+                  >
+                    <option value="">Select an unlinked image</option>
+                    {availablePhotos.map((photo) => (
+                      <option key={`viewer-photo-${photo.id}`} value={photo.id}>
+                        {photo.name}
+                      </option>
+                    ))}
+                  </select>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      addPhotoToPage(photoSelection);
+                      setPhotoSelection("");
+                    }}
+                    disabled={!photoSelection || isSaving}
+                    className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    Add selected image
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => uploadInputRef.current?.click()}
+                    disabled={isUploading || isSaving}
+                    className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    Upload new image
+                  </button>
+                  <input
+                    ref={uploadInputRef}
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (file) void uploadPhoto(file);
+                      event.target.value = "";
+                    }}
+                  />
+                  {availablePhotos.length === 0 ? (
+                    <p className="text-[11px] text-gray-500">
+                      All uploaded images are already linked.
+                    </p>
+                  ) : null}
+                </div>
               </div>
+              <div className="rounded-lg border border-gray-200 bg-white p-3">
+                <div className="text-xs font-semibold text-gray-600 uppercase">
+                  Company logo (top right)
+                </div>
+                <p className="mt-1 text-[11px] text-gray-500">
+                  Choose an uploaded image or upload a new logo for this page.
+                </p>
+                <div className="mt-2 flex flex-col gap-2">
+                  <select
+                    value={logoSelection}
+                    onChange={(event) => {
+                      const nextValue = event.target.value;
+                      setLogoSelection(nextValue);
+                      setStatus("Updating company logo...");
+                      updatePageTemplate({ company_logo: nextValue });
+                    }}
+                    className="w-full rounded-md border border-gray-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+                  >
+                    <option value="">No logo (show placeholder)</option>
+                    {logoOptions.map((photo) => {
+                      const value = photo.name || photo.id || "";
+                      if (!value) return null;
+                      return (
+                        <option key={`logo-photo-${photo.id}`} value={value}>
+                          {photo.name || photo.id}
+                        </option>
+                      );
+                    })}
+                  </select>
+                  <button
+                    type="button"
+                    onClick={() => logoInputRef.current?.click()}
+                    disabled={isLogoUploading || isSaving}
+                    className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    Upload new logo
+                  </button>
+                  <input
+                    ref={logoInputRef}
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (file) void uploadLogo(file);
+                      event.target.value = "";
+                    }}
+                  />
+                  {!logoOptions.length ? (
+                    <p className="text-[11px] text-gray-500">
+                      Upload a logo to see it here.
+                    </p>
+                  ) : null}
+                </div>
               </div>
             </div>
           </div>

frontend/src/pages/LayoutTemplatesPage.tsx ADDED Viewed

	@@ -0,0 +1,458 @@

+import { useMemo, useState, useEffect } from "react";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import {
+  ArrowLeft,
+  Download,
+  Edit3,
+  Grid,
+  Image,
+  Layout,
+  Plus,
+  Settings,
+  Table,
+  Trash2,
+} from "react-feather";
+import { putJson, request } from "../lib/api";
+import {
+  BUILTIN_PAGE_TEMPLATES,
+  createCustomTemplateId,
+  mergePageTemplates,
+} from "../lib/pageTemplates";
+import { ensureSections, flattenSections } from "../lib/sections";
+import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
+import type { JobsheetSection, PageTemplateDefinition, Session } from "../types/session";
+import { InfoMenu } from "../components/InfoMenu";
+import { PageFooter } from "../components/PageFooter";
+import { PageHeader } from "../components/PageHeader";
+import { PageShell } from "../components/PageShell";
+type Variant = "full" | "photos";
+type PhotoLayout = "auto" | "two-column" | "stacked";
+const DEFAULT_VARIANT: Variant = "full";
+const DEFAULT_PHOTO_LAYOUT: PhotoLayout = "auto";
+export default function LayoutTemplatesPage() {
+  const [searchParams] = useSearchParams();
+  const sessionId = getSessionId(searchParams.toString());
+  const sessionQuery = buildSessionQuery(sessionId);
+  const navigate = useNavigate();
+  const [session, setSession] = useState<Session | null>(null);
+  const [sections, setSections] = useState<JobsheetSection[]>([]);
+  const [templates, setTemplates] = useState<PageTemplateDefinition[]>(
+    BUILTIN_PAGE_TEMPLATES,
+  );
+  const [customTemplates, setCustomTemplates] = useState<PageTemplateDefinition[]>(
+    [],
+  );
+  const [newName, setNewName] = useState("");
+  const [newDescription, setNewDescription] = useState("");
+  const [newVariant, setNewVariant] = useState<Variant>(DEFAULT_VARIANT);
+  const [newPhotoLayout, setNewPhotoLayout] =
+    useState<PhotoLayout>(DEFAULT_PHOTO_LAYOUT);
+  const [newBlank, setNewBlank] = useState(false);
+  const [status, setStatus] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  useEffect(() => {
+    if (!sessionId) {
+      setStatus("No active session found.");
+      return;
+    }
+    setStoredSessionId(sessionId);
+    async function load() {
+      try {
+        const [data, sectionResp] = await Promise.all([
+          request<Session>(`/sessions/${sessionId}`),
+          request<{ sections: JobsheetSection[] }>(`/sessions/${sessionId}/sections`),
+        ]);
+        setSession(data);
+        setSections(ensureSections(sectionResp.sections));
+        const merged = mergePageTemplates(data.page_templates);
+        setTemplates(merged);
+        setCustomTemplates(merged.filter((template) => template.source === "custom"));
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Failed to load templates.";
+        setStatus(message);
+      }
+    }
+    load();
+  }, [sessionId]);
+  const flatPages = useMemo(
+    () => flattenSections(ensureSections(sections)),
+    [sections],
+  );
+  const saveTemplates = async (nextTemplates: PageTemplateDefinition[]) => {
+    if (!sessionId) return;
+    setIsSaving(true);
+    setStatus("Saving templates...");
+    try {
+      const payload = nextTemplates.map((template) => ({
+        id: template.id,
+        name: template.name,
+        description: template.description ?? "",
+        blank: Boolean(template.blank),
+        variant: (template.variant ?? DEFAULT_VARIANT) as Variant,
+        photo_layout: (template.photo_layout ?? DEFAULT_PHOTO_LAYOUT) as PhotoLayout,
+      }));
+      const response = await putJson<{ page_templates: PageTemplateDefinition[] }>(
+        `/sessions/${sessionId}/page-templates`,
+        { page_templates: payload },
+      );
+      const merged = mergePageTemplates(response.page_templates);
+      setTemplates(merged);
+      setCustomTemplates(merged.filter((template) => template.source === "custom"));
+      setSession((prev) =>
+        prev
+          ? { ...prev, page_templates: response.page_templates ?? payload }
+          : prev,
+      );
+      setStatus("Templates saved.");
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to save templates.";
+      setStatus(message);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const addTemplate = async () => {
+    const name = newName.trim();
+    if (!name) {
+      setStatus("Template name is required.");
+      return;
+    }
+    const nextTemplate: PageTemplateDefinition = {
+      id: createCustomTemplateId(),
+      name,
+      description: newDescription.trim(),
+      blank: newBlank,
+      variant: newVariant,
+      photo_layout: newPhotoLayout,
+      source: "custom",
+    };
+    await saveTemplates([...customTemplates, nextTemplate]);
+    setNewName("");
+    setNewDescription("");
+    setNewVariant(DEFAULT_VARIANT);
+    setNewPhotoLayout(DEFAULT_PHOTO_LAYOUT);
+    setNewBlank(false);
+  };
+  const updateCustomTemplate = (
+    templateId: string,
+    patch: Partial<PageTemplateDefinition>,
+  ) => {
+    setCustomTemplates((prev) =>
+      prev.map((template) =>
+        template.id === templateId ? { ...template, ...patch } : template,
+      ),
+    );
+  };
+  const removeCustomTemplate = async (templateId: string) => {
+    const next = customTemplates.filter((template) => template.id !== templateId);
+    await saveTemplates(next);
+  };
+  const persistCustomTemplateEdits = async () => {
+    await saveTemplates(customTemplates);
+  };
+  return (
+    <PageShell>
+      <PageHeader
+        title="RepEx - Report Express"
+        subtitle="Template Library"
+        right={
+          <div className="flex items-center gap-2">
+            <Link
+              to={`/edit-layouts${sessionQuery}`}
+              className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back
+            </Link>
+            <InfoMenu sessionQuery={sessionQuery} />
+          </div>
+        }
+      />
+      <nav className="mb-6" aria-label="Report workflow navigation">
+        <div className="flex flex-wrap gap-2">
+          <Link
+            to={`/input-data${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <Table className="h-4 w-4" />
+            Input Data
+          </Link>
+          <Link
+            to={`/report-viewer${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <Layout className="h-4 w-4" />
+            Report Viewer
+          </Link>
+          <Link
+            to={`/image-placement${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <Image className="h-4 w-4" />
+            Image Placement
+          </Link>
+          <Link
+            to={`/edit-report${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <Edit3 className="h-4 w-4" />
+            Edit Report
+          </Link>
+          <Link
+            to={`/edit-layouts${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <Grid className="h-4 w-4" />
+            Edit Page Layouts
+          </Link>
+          <span className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white">
+            <Settings className="h-4 w-4" />
+            Template Library
+          </span>
+          <Link
+            to={`/export${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <Download className="h-4 w-4" />
+            Export
+          </Link>
+        </div>
+      </nav>
+      <section className="mb-6 rounded-lg border border-gray-200 bg-white p-4">
+        <h2 className="text-lg font-semibold text-gray-900">Current Usage</h2>
+        <p className="text-sm text-gray-600">
+          {sections.length} sections and {flatPages.length} pages currently use page templates.
+        </p>
+      </section>
+      <section className="mb-6 rounded-lg border border-gray-200 bg-white p-4">
+        <h2 className="text-lg font-semibold text-gray-900">Create Custom Template</h2>
+        <p className="text-sm text-gray-600 mb-3">
+          Define a reusable page template, name it, and apply it when adding pages in
+          Edit Page Layouts.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          <label className="text-sm text-gray-700">
+            Template Name
+            <input
+              type="text"
+              value={newName}
+              onChange={(event) => setNewName(event.target.value)}
+              className="mt-1 w-full rounded-md border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+              placeholder="My Custom Template"
+            />
+          </label>
+          <label className="text-sm text-gray-700">
+            Variant
+            <select
+              value={newVariant}
+              onChange={(event) => setNewVariant(event.target.value as Variant)}
+              className="mt-1 w-full rounded-md border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+            >
+              <option value="full">Full</option>
+              <option value="photos">Photos only</option>
+            </select>
+          </label>
+          <label className="text-sm text-gray-700">
+            Photo Layout
+            <select
+              value={newPhotoLayout}
+              onChange={(event) =>
+                setNewPhotoLayout(event.target.value as PhotoLayout)
+              }
+              className="mt-1 w-full rounded-md border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+            >
+              <option value="auto">Auto</option>
+              <option value="two-column">Two column</option>
+              <option value="stacked">Stacked</option>
+            </select>
+          </label>
+          <label className="text-sm text-gray-700 md:col-span-2 lg:col-span-2">
+            Description
+            <input
+              type="text"
+              value={newDescription}
+              onChange={(event) => setNewDescription(event.target.value)}
+              className="mt-1 w-full rounded-md border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+              placeholder="Optional notes for the template"
+            />
+          </label>
+          <label className="inline-flex items-center gap-2 self-end text-sm text-gray-700">
+            <input
+              type="checkbox"
+              checked={newBlank}
+              onChange={(event) => setNewBlank(event.target.checked)}
+            />
+            Blank page
+          </label>
+        </div>
+        <button
+          type="button"
+          onClick={() => {
+            void addTemplate();
+          }}
+          disabled={isSaving}
+          className="mt-4 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"
+        >
+          <Plus className="h-4 w-4" />
+          Create template
+        </button>
+      </section>
+      <section className="rounded-lg border border-gray-200 bg-white p-4">
+        <div className="flex items-center justify-between gap-3 mb-3">
+          <h2 className="text-lg font-semibold text-gray-900">Saved Templates</h2>
+          <button
+            type="button"
+            onClick={() => {
+              void persistCustomTemplateEdits();
+            }}
+            disabled={isSaving}
+            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"
+          >
+            Save edits
+          </button>
+        </div>
+        <div className="space-y-3">
+          {templates.map((template) => {
+            const isCustom = template.source === "custom";
+            return (
+              <div
+                key={template.id}
+                className="rounded-lg border border-gray-200 bg-gray-50 p-3"
+              >
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <div className="text-xs font-semibold text-gray-500">{template.id}</div>
+                  <span
+                    className={[
+                      "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold",
+                      isCustom
+                        ? "bg-emerald-50 text-emerald-700 border border-emerald-200"
+                        : "bg-gray-100 text-gray-600 border border-gray-200",
+                    ].join(" ")}
+                  >
+                    {isCustom ? "Custom" : "Built-in"}
+                  </span>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-2 mt-2">
+                  <label className="text-xs text-gray-600 lg:col-span-2">
+                    Name
+                    <input
+                      type="text"
+                      value={template.name}
+                      disabled={!isCustom}
+                      onChange={(event) =>
+                        updateCustomTemplate(template.id, { name: event.target.value })
+                      }
+                      className="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-sm disabled:bg-gray-100 disabled:text-gray-500"
+                    />
+                  </label>
+                  <label className="text-xs text-gray-600">
+                    Variant
+                    <select
+                      value={template.variant ?? DEFAULT_VARIANT}
+                      disabled={!isCustom}
+                      onChange={(event) =>
+                        updateCustomTemplate(template.id, {
+                          variant: event.target.value as Variant,
+                        })
+                      }
+                      className="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-sm disabled:bg-gray-100 disabled:text-gray-500"
+                    >
+                      <option value="full">Full</option>
+                      <option value="photos">Photos only</option>
+                    </select>
+                  </label>
+                  <label className="text-xs text-gray-600">
+                    Photo Layout
+                    <select
+                      value={template.photo_layout ?? DEFAULT_PHOTO_LAYOUT}
+                      disabled={!isCustom}
+                      onChange={(event) =>
+                        updateCustomTemplate(template.id, {
+                          photo_layout: event.target.value as PhotoLayout,
+                        })
+                      }
+                      className="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-sm disabled:bg-gray-100 disabled:text-gray-500"
+                    >
+                      <option value="auto">Auto</option>
+                      <option value="two-column">Two column</option>
+                      <option value="stacked">Stacked</option>
+                    </select>
+                  </label>
+                  <label className="inline-flex items-center gap-2 text-xs text-gray-600 self-end">
+                    <input
+                      type="checkbox"
+                      checked={Boolean(template.blank)}
+                      disabled={!isCustom}
+                      onChange={(event) =>
+                        updateCustomTemplate(template.id, { blank: event.target.checked })
+                      }
+                    />
+                    Blank page
+                  </label>
+                </div>
+                <label className="text-xs text-gray-600 block mt-2">
+                  Description
+                  <input
+                    type="text"
+                    value={template.description ?? ""}
+                    disabled={!isCustom}
+                    onChange={(event) =>
+                      updateCustomTemplate(template.id, {
+                        description: event.target.value,
+                      })
+                    }
+                    className="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-sm disabled:bg-gray-100 disabled:text-gray-500"
+                  />
+                </label>
+                {isCustom ? (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      void removeCustomTemplate(template.id);
+                    }}
+                    disabled={isSaving}
+                    className="mt-2 inline-flex items-center gap-1 rounded-md border border-red-200 bg-red-50 px-2 py-1 text-xs font-semibold text-red-700 hover:bg-red-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                    Delete template
+                  </button>
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      </section>
+      {status ? <p className="mt-4 text-sm text-gray-600">{status}</p> : null}
+      <PageFooter note="Templates are stored per session and available when adding new pages." />
+    </PageShell>
+  );
+}

frontend/src/pages/UploadPage.tsx CHANGED Viewed

@@ -256,6 +256,33 @@ export default function UploadPage() {
             <p className="text-xs text-gray-500 mt-4">{fileSummary}</p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
             <div className="space-y-1">
               <label className="block text-sm font-medium text-gray-700" htmlFor="documentNo">

             <p className="text-xs text-gray-500 mt-4">{fileSummary}</p>
           </div>
+          <div className="mb-6 rounded-lg border border-blue-100 bg-blue-50 p-4">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h3 className="text-sm font-semibold text-blue-900">
+                  Need a data template?
+                </h3>
+                <p className="mt-1 text-xs text-blue-800">
+                  Download the Excel template, fill the three sheets, then upload it
+                  together with your images.
+                </p>
+              </div>
+              <a
+                href="/templates/repex-data-input-template.xlsx"
+                download
+                className="inline-flex items-center justify-center rounded-lg border border-blue-200 bg-white px-4 py-2 text-xs font-semibold text-blue-800 hover:bg-blue-100 transition"
+              >
+                Download Excel Template
+              </a>
+            </div>
+            <ol className="mt-3 list-decimal pl-5 text-xs text-blue-900 space-y-1">
+              <li>Fill <span className="font-semibold">General Information</span>.</li>
+              <li>Fill <span className="font-semibold">Headings</span>.</li>
+              <li>Fill <span className="font-semibold">Item Spesific</span> and image names.</li>
+              <li>Upload the Excel file and matching image files in one upload batch.</li>
+            </ol>
+          </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
             <div className="space-y-1">
               <label className="block text-sm font-medium text-gray-700" htmlFor="documentNo">

frontend/src/types/session.ts CHANGED Viewed

@@ -30,6 +30,7 @@ export type Session = {
   page_count: number;
   jobsheet_sections?: JobsheetSection[];
   headings?: Heading[];
   layout?: Record<string, unknown> | null;
 };
@@ -88,6 +89,7 @@ export type Page = {
   photo_order_locked?: boolean;
   blank?: boolean;
   variant?: "full" | "photos";
 };
 export type JobsheetSection = {
@@ -96,6 +98,16 @@ export type JobsheetSection = {
   pages: Page[];
 };
 export type PagesResponse = {
   pages: Page[];
 };

   page_count: number;
   jobsheet_sections?: JobsheetSection[];
   headings?: Heading[];
+  page_templates?: PageTemplateDefinition[];
   layout?: Record<string, unknown> | null;
 };
   photo_order_locked?: boolean;
   blank?: boolean;
   variant?: "full" | "photos";
+  page_template?: string;
 };
 export type JobsheetSection = {
   pages: Page[];
 };
+export type PageTemplateDefinition = {
+  id: string;
+  name: string;
+  description?: string;
+  blank?: boolean;
+  variant?: "full" | "photos";
+  photo_layout?: "auto" | "two-column" | "stacked";
+  source?: "builtin" | "custom";
+};
 export type PagesResponse = {
   pages: Page[];
 };

server/app/api/routes/sessions.py CHANGED Viewed

@@ -12,6 +12,8 @@ from ..deps import get_session_store
 from ..schemas import (
     HeadingsRequest,
     HeadingsResponse,
     PagesRequest,
     PagesResponse,
     SectionsRequest,
@@ -206,6 +208,20 @@ def save_headings(
     return HeadingsResponse(headings=session.get("headings") or [])
 @router.get("/{session_id}/uploads/{file_id}")
 def get_upload(
     session_id: str,
@@ -329,6 +345,8 @@ def import_json(
             session["page_count"] = imported_session["page_count"]
         if imported_session.get("headings") is not None:
             session["headings"] = imported_session["headings"]
         store.update_session(session)
     return _attach_urls(session)

 from ..schemas import (
     HeadingsRequest,
     HeadingsResponse,
+    PageTemplatesRequest,
+    PageTemplatesResponse,
     PagesRequest,
     PagesResponse,
     SectionsRequest,
     return HeadingsResponse(headings=session.get("headings") or [])
+@router.put("/{session_id}/page-templates", response_model=PageTemplatesResponse)
+def save_page_templates(
+    session_id: str,
+    payload: PageTemplatesRequest,
+    store: SessionStore = Depends(get_session_store),
+) -> PageTemplatesResponse:
+    session_id = _normalize_session_id(session_id, store)
+    session = store.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found.")
+    session = store.set_page_templates(session, payload.page_templates)
+    return PageTemplatesResponse(page_templates=session.get("page_templates") or [])
 @router.get("/{session_id}/uploads/{file_id}")
 def get_upload(
     session_id: str,
             session["page_count"] = imported_session["page_count"]
         if imported_session.get("headings") is not None:
             session["headings"] = imported_session["headings"]
+        if imported_session.get("page_templates") is not None:
+            session["page_templates"] = imported_session["page_templates"]
         store.update_session(session)
     return _attach_urls(session)

server/app/api/schemas.py CHANGED Viewed

@@ -19,6 +19,16 @@ class Heading(BaseModel):
     name: str = ""
 class SessionResponse(BaseModel):
     id: str
     status: str
@@ -31,6 +41,7 @@ class SessionResponse(BaseModel):
     page_count: int = 0
     headings: List[Heading] = Field(default_factory=list)
     jobsheet_sections: List["JobsheetSection"] = Field(default_factory=list)
 class SessionStatusResponse(BaseModel):
@@ -71,3 +82,11 @@ class HeadingsRequest(BaseModel):
 class HeadingsResponse(BaseModel):
     headings: List[Heading] = Field(default_factory=list)

     name: str = ""
+class PageTemplateDefinition(BaseModel):
+    id: str
+    name: str
+    description: str = ""
+    blank: bool = False
+    variant: str = "full"
+    photo_layout: str = "auto"
+    source: str = "custom"
 class SessionResponse(BaseModel):
     id: str
     status: str
     page_count: int = 0
     headings: List[Heading] = Field(default_factory=list)
     jobsheet_sections: List["JobsheetSection"] = Field(default_factory=list)
+    page_templates: List[PageTemplateDefinition] = Field(default_factory=list)
 class SessionStatusResponse(BaseModel):
 class HeadingsResponse(BaseModel):
     headings: List[Heading] = Field(default_factory=list)
+class PageTemplatesRequest(BaseModel):
+    page_templates: List[PageTemplateDefinition] = Field(default_factory=list)
+class PageTemplatesResponse(BaseModel):
+    page_templates: List[PageTemplateDefinition] = Field(default_factory=list)

server/app/services/data_import.py CHANGED Viewed

@@ -467,7 +467,14 @@ def populate_session_from_data_files(
         for photo_id in photo_ids:
             if photo_id not in selected_photo_ids:
                 selected_photo_ids.append(photo_id)
-        page = {"items": [], "template": template, "photo_ids": photo_ids}
         title = item.get("reference") or item.get("area") or f"Section {idx + 1}"
         sections.append({"id": None, "title": title, "pages": [page]})

         for photo_id in photo_ids:
             if photo_id not in selected_photo_ids:
                 selected_photo_ids.append(photo_id)
+        page = {
+            "items": [],
+            "template": template,
+            "photo_ids": photo_ids,
+            "page_template": "repex:standard",
+            "blank": False,
+            "variant": "full",
+        }
         title = item.get("reference") or item.get("area") or f"Section {idx + 1}"
         sections.append({"id": None, "title": title, "pages": [page]})

server/app/services/pdf_reportlab.py CHANGED Viewed

@@ -51,6 +51,22 @@ def _wrap_lines(
     lines: List[str] = []
     current: List[str] = []
     for word in words:
         test = " ".join(current + [word])
         if pdf.stringWidth(test, font, size) <= width or not current:
             current.append(word)
@@ -130,6 +146,37 @@ def _draw_label_value(
     return y
 def _badge_style(value: str, scale: dict) -> tuple[str, colors.Color, colors.Color]:
     raw = (value or "").strip()
     key = raw.upper()
@@ -149,6 +196,10 @@ def _resolve_logo_path(store: SessionStore, session: dict, raw: str) -> Optional
     uploads = (session.get("uploads") or {}).get("photos") or []
     lower = value.lower()
     for item in uploads:
         name = (item.get("name") or "").lower()
         if not name:
             continue
@@ -220,7 +271,7 @@ def render_report_pdf(
 ) -> Path:
     width, height = A4
     margin = 10 * mm
-    header_h = 20 * mm
     footer_h = 12 * mm
     gap = 4 * mm
     photo_col_gap = 6 * mm
@@ -378,10 +429,10 @@ def render_report_pdf(
         content_height = content_top - content_bottom
         # Header
         logo_x = margin
-        logo_y = header_y - 15 * mm
-        logo_w = 28 * mm
-        logo_h = 15 * mm
         logo_drawn = False
         if default_logo:
             logo_drawn = _draw_image_fit(pdf, default_logo, logo_x, logo_y, logo_w, logo_h)
@@ -397,31 +448,50 @@ def render_report_pdf(
             pdf.setLineWidth(0.5)
             pdf.rect(logo_x, logo_y, logo_w, logo_h, stroke=1, fill=0)
         client_logo = _resolve_logo_path(store, session, template.get("company_logo", ""))
         if client_logo:
             _draw_image_fit(
                 pdf,
                 client_logo,
-                width - margin - 32 * mm,
-                header_y - 15 * mm,
-                32 * mm,
-                15 * mm,
             )
         pdf.setFillColor(gray_900)
         pdf.setFont("Helvetica-Bold", 13)
         pdf.drawCentredString(
             width / 2,
-            header_y - 7 * mm,
             doc_number or "Document No",
         )
         pdf.setStrokeColor(gray_200)
-        pdf.line(margin, header_y - 17 * mm, width - margin, header_y - 17 * mm)
         y = content_top
         if variant == "full":
             # Observations and Findings
             pdf.setFillColor(gray_800)
-            pdf.setFont("Helvetica-Bold", 14)
             pdf.drawString(margin, y, "Observations and Findings")
             pdf.setStrokeColor(gray_200)
             pdf.line(margin, y - 2, width - margin, y - 2)
@@ -433,70 +503,78 @@ def render_report_pdf(
             item_desc = _safe_text(template.get("item_description"))
             required_action = _safe_text(template.get("required_action"))
-            left_w = (width - 2 * margin) * 0.6
-            right_w = (width - 2 * margin) * 0.4
-            left_x = margin
-            right_x = margin + left_w + 4 * mm
-            label_size = 11
-            value_size = 12
-            value_gap = 2 * mm
-            row_gap = 4 * mm
-            leading = 14
             row_y = y
-            _draw_label_value(
-                pdf,
-                "Ref",
-                ref,
-                left_x,
-                row_y,
-                "Helvetica",
-                "Helvetica-Bold",
-                label_size,
-                value_size,
-                gray_500,
-                gray_900,
-            )
-            _draw_label_value(
-                pdf,
-                "Area",
-                area,
-                left_x + left_w / 2,
-                row_y,
-                "Helvetica",
-                "Helvetica-Bold",
-                label_size,
-                value_size,
-                gray_500,
-                gray_900,
             )
-            pdf.setFillColor(gray_500)
-            pdf.setFont("Helvetica", label_size)
-            pdf.drawString(right_x, row_y, "Location")
-            pdf.setFillColor(gray_900)
-            loc_lines = _wrap_lines(
-                pdf,
-                location or "-",
-                right_w - 2 * mm,
-                2,
-                "Helvetica-Bold",
-                value_size,
             )
-            _draw_wrapped(
-                pdf,
-                location or "-",
-                right_x,
-                row_y - label_size - value_gap,
-                right_w - 2 * mm,
-                leading,
-                2,
-                "Helvetica-Bold",
-                value_size,
             )
-            y = row_y - (label_size + value_gap + leading * max(1, len(loc_lines))) - row_gap
             category = _safe_text(template.get("category"))
             priority = _safe_text(template.get("priority"))
@@ -520,54 +598,58 @@ def render_report_pdf(
             badge_w = 40 * mm
             badge_h = 10 * mm
-            y -= 2 * mm
             pdf.setFillColor(gray_500)
-            pdf.setFont("Helvetica", 11)
-            cat_label_x = margin + 20 * mm + badge_w / 2
-            pr_label_x = margin + 100 * mm + badge_w / 2
             label_y = y
             pdf.drawCentredString(cat_label_x, label_y, "Category")
             pdf.drawCentredString(pr_label_x, label_y, "Priority")
-            y -= 12 * mm
             pdf.setFillColor(cat_bg)
             pdf.setStrokeColor(gray_200)
-            pdf.roundRect(margin + 20 * mm, y - 2, badge_w, badge_h, 2 * mm, stroke=1, fill=1)
             pdf.setFillColor(cat_text_color)
-            pdf.setFont("Helvetica-Bold", 11)
-            pdf.drawCentredString(cat_label_x, y - 2 + badge_h / 2 - 4, cat_text)
             pdf.setFillColor(pr_bg)
-            pdf.roundRect(margin + 100 * mm, y - 2, badge_w, badge_h, 2 * mm, stroke=1, fill=1)
             pdf.setFillColor(pr_text_color)
-            pdf.drawCentredString(pr_label_x, y - 2 + badge_h / 2 - 4, pr_text)
-            y -= 10 * mm
             condition = item_desc
             action = required_action
             pdf.setFillColor(gray_500)
-            pdf.setFont("Helvetica", 11)
             pdf.drawCentredString(
                 margin + (width - 2 * margin) / 2, y, "Condition Description"
             )
-            y -= 4 * mm
-            pdf.setFillColor(amber_50)
-            pdf.setStrokeColor(amber_300)
             cond_lines = _wrap_lines(
                 pdf,
                 condition or "-",
                 width - 2 * margin - 4 * mm,
                 4,
-                "Helvetica-Bold",
-                11,
             )
-            cond_h = max(18 * mm, (len(cond_lines) or 1) * leading + 6 * mm)
             cond_bottom = y - cond_h
             pdf.rect(margin, cond_bottom, width - 2 * margin, cond_h, stroke=1, fill=1)
-            pdf.setLineWidth(3)
             pdf.line(margin, cond_bottom, margin, y)
             pdf.setLineWidth(1)
-            pdf.setFillColor(amber_800)
-            pdf.setFont("Helvetica-Bold", 11)
             text_center_x = margin + (width - 2 * margin) / 2
             _draw_centered_block(
                 pdf,
@@ -577,34 +659,33 @@ def render_report_pdf(
                 cond_h,
                 leading,
                 "Helvetica-Bold",
-                11,
             )
-            y = cond_bottom - 6 * mm
             pdf.setFillColor(gray_500)
-            pdf.setFont("Helvetica", 11)
             pdf.drawCentredString(
                 margin + (width - 2 * margin) / 2, y, "Required Action"
             )
-            y -= 4 * mm
-            pdf.setFillColor(blue_50)
-            pdf.setStrokeColor(blue_300)
             action_lines = _wrap_lines(
                 pdf,
                 action or "-",
                 width - 2 * margin - 4 * mm,
                 4,
-                "Helvetica-Bold",
-                11,
             )
-            action_h = max(18 * mm, (len(action_lines) or 1) * leading + 6 * mm)
             action_bottom = y - action_h
             pdf.rect(margin, action_bottom, width - 2 * margin, action_h, stroke=1, fill=1)
-            pdf.setLineWidth(3)
             pdf.line(margin, action_bottom, margin, y)
             pdf.setLineWidth(1)
-            pdf.setFillColor(blue_800)
-            pdf.setFont("Helvetica-Bold", 11)
             text_center_x = margin + (width - 2 * margin) / 2
             _draw_centered_block(
                 pdf,
@@ -614,12 +695,12 @@ def render_report_pdf(
                 action_h,
                 leading,
                 "Helvetica-Bold",
-                11,
             )
-            y = action_bottom - 6 * mm
         else:
             pdf.setFillColor(gray_800)
-            pdf.setFont("Helvetica-Bold", 11)
             pdf.drawString(margin, y, "Photo Documentation (continued)")
             pdf.setStrokeColor(gray_200)
             pdf.line(margin, y - 2, width - margin, y - 2)
@@ -628,7 +709,7 @@ def render_report_pdf(
         if variant == "full":
             y -= 2 * mm
             pdf.setFillColor(gray_800)
-            pdf.setFont("Helvetica-Bold", 14)
             pdf.drawString(margin, y, "Photo Documentation")
             pdf.setStrokeColor(gray_200)
             pdf.line(margin, y - 2, width - margin, y - 2)
@@ -653,14 +734,43 @@ def render_report_pdf(
                 pdf.setStrokeColor(gray_200)
                 pdf.setFillColor(gray_50)
                 pdf.roundRect(x, y, cell_w, cell_h, 3 * mm, stroke=1, fill=1)
                 _draw_image_fit(
-                    pdf, photo_path, x + 2 * mm, y + 8 * mm, cell_w - 4 * mm, cell_h - 14 * mm
                 )
-                pdf.setFillColor(gray_500)
-                pdf.setFont("Helvetica", 11)
-                if label:
-                    pdf.drawCentredString(
-                        x + cell_w / 2, y + 3 * mm, f"Fig {idx + 1}: {label}"
                     )
         else:
             pdf.setFont("Helvetica", 11)
@@ -675,7 +785,7 @@ def render_report_pdf(
         pdf.drawCentredString(
             width / 2,
             footer_y + 4 * mm,
-            "Prosento - (c) 2026 All Rights Reserved - Automatically generated job sheet",
         )
         page_line = f"Page {output_index + 1} of {total_pages}"
         if section_label:

     lines: List[str] = []
     current: List[str] = []
     for word in words:
+        if pdf.stringWidth(word, font, size) > width:
+            if current:
+                lines.append(" ".join(current))
+                current = []
+                if len(lines) >= max_lines:
+                    break
+            remaining = word
+            while remaining and len(lines) < max_lines:
+                cut = len(remaining)
+                while cut > 1 and pdf.stringWidth(remaining[:cut], font, size) > width:
+                    cut -= 1
+                if cut <= 1:
+                    cut = 1
+                lines.append(remaining[:cut])
+                remaining = remaining[cut:]
+            continue
         test = " ".join(current + [word])
         if pdf.stringWidth(test, font, size) <= width or not current:
             current.append(word)
     return y
+def _draw_label_value_centered(
+    pdf: canvas.Canvas,
+    label: str,
+    value: str,
+    x_center: float,
+    y: float,
+    label_font: str,
+    value_font: str,
+    label_size: int,
+    value_size: int,
+    label_color: colors.Color,
+    value_color: colors.Color,
+    max_width: float,
+    max_lines: int,
+    leading: float,
+) -> int:
+    pdf.setFillColor(label_color)
+    pdf.setFont(label_font, label_size)
+    pdf.drawCentredString(x_center, y, label)
+    y -= label_size + 1
+    pdf.setFillColor(value_color)
+    pdf.setFont(value_font, value_size)
+    lines = _wrap_lines(pdf, value or "-", max_width, max_lines, value_font, value_size)
+    if not lines:
+        lines = ["-"]
+    for line in lines:
+        pdf.drawCentredString(x_center, y, line)
+        y -= leading
+    return len(lines)
 def _badge_style(value: str, scale: dict) -> tuple[str, colors.Color, colors.Color]:
     raw = (value or "").strip()
     key = raw.upper()
     uploads = (session.get("uploads") or {}).get("photos") or []
     lower = value.lower()
     for item in uploads:
+        if value == (item.get("id") or ""):
+            path = store.resolve_upload_path(session, item.get("id"))
+            if path and path.exists():
+                return path
         name = (item.get("name") or "").lower()
         if not name:
             continue
 ) -> Path:
     width, height = A4
     margin = 10 * mm
+    header_h = 26 * mm
     footer_h = 12 * mm
     gap = 4 * mm
     photo_col_gap = 6 * mm
         content_height = content_top - content_bottom
         # Header
+        logo_w = 40 * mm
+        logo_h = 20 * mm
         logo_x = margin
+        logo_y = header_y - (header_h + logo_h) / 2
         logo_drawn = False
         if default_logo:
             logo_drawn = _draw_image_fit(pdf, default_logo, logo_x, logo_y, logo_w, logo_h)
             pdf.setLineWidth(0.5)
             pdf.rect(logo_x, logo_y, logo_w, logo_h, stroke=1, fill=0)
         client_logo = _resolve_logo_path(store, session, template.get("company_logo", ""))
+        client_logo_w = 40 * mm
+        client_logo_h = 20 * mm
+        client_logo_x = width - margin - client_logo_w
+        client_logo_y = header_y - (header_h + client_logo_h) / 2
         if client_logo:
             _draw_image_fit(
                 pdf,
                 client_logo,
+                client_logo_x,
+                client_logo_y,
+                client_logo_w,
+                client_logo_h,
+            )
+        else:
+            pdf.setStrokeColor(gray_200)
+            pdf.rect(client_logo_x, client_logo_y, client_logo_w, client_logo_h, stroke=1, fill=0)
+            pdf.setFillColor(gray_500)
+            pdf.setFont("Helvetica", 8)
+            pdf.drawCentredString(
+                client_logo_x + client_logo_w / 2,
+                client_logo_y + client_logo_h / 2 + 2,
+                "Company Logo",
+            )
+            pdf.drawCentredString(
+                client_logo_x + client_logo_w / 2,
+                client_logo_y + client_logo_h / 2 - 6,
+                "not found",
             )
         pdf.setFillColor(gray_900)
         pdf.setFont("Helvetica-Bold", 13)
         pdf.drawCentredString(
             width / 2,
+            header_y - header_h / 2 + 2 * mm,
             doc_number or "Document No",
         )
         pdf.setStrokeColor(gray_200)
+        pdf.line(margin, header_y - header_h + 3 * mm, width - margin, header_y - header_h + 3 * mm)
         y = content_top
         if variant == "full":
             # Observations and Findings
             pdf.setFillColor(gray_800)
+            pdf.setFont("Helvetica-Bold", 12)
             pdf.drawString(margin, y, "Observations and Findings")
             pdf.setStrokeColor(gray_200)
             pdf.line(margin, y - 2, width - margin, y - 2)
             item_desc = _safe_text(template.get("item_description"))
             required_action = _safe_text(template.get("required_action"))
+            total_w = width - 2 * margin
+            col_w = total_w / 3
+            col_centers = [
+                margin + col_w / 2,
+                margin + col_w * 1.5,
+                margin + col_w * 2.5,
+            ]
+            label_size = 9
+            value_size = 10
+            value_gap = 1.5 * mm
+            row_gap = 3 * mm
+            leading = 11
             row_y = y
+            line_counts = []
+            line_counts.append(
+                _draw_label_value_centered(
+                    pdf,
+                    "Ref",
+                    ref,
+                    col_centers[0],
+                    row_y,
+                    "Helvetica",
+                    "Helvetica-Bold",
+                    label_size,
+                    value_size,
+                    gray_500,
+                    gray_900,
+                    col_w - 4 * mm,
+                    2,
+                    leading,
+                )
             )
+            line_counts.append(
+                _draw_label_value_centered(
+                    pdf,
+                    "Area",
+                    area,
+                    col_centers[1],
+                    row_y,
+                    "Helvetica",
+                    "Helvetica-Bold",
+                    label_size,
+                    value_size,
+                    gray_500,
+                    gray_900,
+                    col_w - 4 * mm,
+                    2,
+                    leading,
+                )
             )
+            line_counts.append(
+                _draw_label_value_centered(
+                    pdf,
+                    "Location",
+                    location,
+                    col_centers[2],
+                    row_y,
+                    "Helvetica",
+                    "Helvetica-Bold",
+                    label_size,
+                    value_size,
+                    gray_500,
+                    gray_900,
+                    col_w - 4 * mm,
+                    2,
+                    leading,
+                )
             )
+            y = row_y - (label_size + value_gap + leading * max(1, max(line_counts))) - row_gap
             category = _safe_text(template.get("category"))
             priority = _safe_text(template.get("priority"))
             badge_w = 40 * mm
             badge_h = 10 * mm
+            y -= 1 * mm
             pdf.setFillColor(gray_500)
+            pdf.setFont("Helvetica", 9)
+            badge_gap = 20 * mm
+            total_badge_w = badge_w * 2 + badge_gap
+            start_x = (width - total_badge_w) / 2
+            cat_x = start_x
+            pr_x = start_x + badge_w + badge_gap
+            cat_label_x = cat_x + badge_w / 2
+            pr_label_x = pr_x + badge_w / 2
             label_y = y
             pdf.drawCentredString(cat_label_x, label_y, "Category")
             pdf.drawCentredString(pr_label_x, label_y, "Priority")
+            y -= 10 * mm
             pdf.setFillColor(cat_bg)
             pdf.setStrokeColor(gray_200)
+            pdf.roundRect(cat_x, y - 2, badge_w, badge_h, 2 * mm, stroke=1, fill=1)
             pdf.setFillColor(cat_text_color)
+            pdf.setFont("Helvetica-Bold", 10)
+            pdf.drawCentredString(cat_label_x, y - 2 + badge_h / 2 - 3, cat_text)
             pdf.setFillColor(pr_bg)
+            pdf.roundRect(pr_x, y - 2, badge_w, badge_h, 2 * mm, stroke=1, fill=1)
             pdf.setFillColor(pr_text_color)
+            pdf.drawCentredString(pr_label_x, y - 2 + badge_h / 2 - 3, pr_text)
+            y -= 8 * mm
             condition = item_desc
             action = required_action
             pdf.setFillColor(gray_500)
+            pdf.setFont("Helvetica", 9)
             pdf.drawCentredString(
                 margin + (width - 2 * margin) / 2, y, "Condition Description"
             )
+            y -= 3 * mm
+            pdf.setFillColor(gray_50)
+            pdf.setStrokeColor(gray_200)
             cond_lines = _wrap_lines(
                 pdf,
                 condition or "-",
                 width - 2 * margin - 4 * mm,
                 4,
+                "Helvetica",
+                9,
             )
+            cond_h = max(10 * mm, (len(cond_lines) or 1) * leading + 4 * mm)
             cond_bottom = y - cond_h
             pdf.rect(margin, cond_bottom, width - 2 * margin, cond_h, stroke=1, fill=1)
+            pdf.setLineWidth(2)
             pdf.line(margin, cond_bottom, margin, y)
             pdf.setLineWidth(1)
+            pdf.setFillColor(gray_700)
             text_center_x = margin + (width - 2 * margin) / 2
             _draw_centered_block(
                 pdf,
                 cond_h,
                 leading,
                 "Helvetica-Bold",
+                10,
             )
+            y = cond_bottom - 4 * mm
             pdf.setFillColor(gray_500)
+            pdf.setFont("Helvetica", 9)
             pdf.drawCentredString(
                 margin + (width - 2 * margin) / 2, y, "Required Action"
             )
+            y -= 3 * mm
+            pdf.setFillColor(gray_50)
+            pdf.setStrokeColor(gray_200)
             action_lines = _wrap_lines(
                 pdf,
                 action or "-",
                 width - 2 * margin - 4 * mm,
                 4,
+                "Helvetica",
+                9,
             )
+            action_h = max(10 * mm, (len(action_lines) or 1) * leading + 4 * mm)
             action_bottom = y - action_h
             pdf.rect(margin, action_bottom, width - 2 * margin, action_h, stroke=1, fill=1)
+            pdf.setLineWidth(2)
             pdf.line(margin, action_bottom, margin, y)
             pdf.setLineWidth(1)
+            pdf.setFillColor(gray_700)
             text_center_x = margin + (width - 2 * margin) / 2
             _draw_centered_block(
                 pdf,
                 action_h,
                 leading,
                 "Helvetica-Bold",
+                10,
             )
+            y = action_bottom - 4 * mm
         else:
             pdf.setFillColor(gray_800)
+            pdf.setFont("Helvetica-Bold", 12)
             pdf.drawString(margin, y, "Photo Documentation (continued)")
             pdf.setStrokeColor(gray_200)
             pdf.line(margin, y - 2, width - margin, y - 2)
         if variant == "full":
             y -= 2 * mm
             pdf.setFillColor(gray_800)
+            pdf.setFont("Helvetica-Bold", 12)
             pdf.drawString(margin, y, "Photo Documentation")
             pdf.setStrokeColor(gray_200)
             pdf.line(margin, y - 2, width - margin, y - 2)
                 pdf.setStrokeColor(gray_200)
                 pdf.setFillColor(gray_50)
                 pdf.roundRect(x, y, cell_w, cell_h, 3 * mm, stroke=1, fill=1)
+                caption_text = f"Fig {idx + 1}: {label}" if label else ""
+                caption_font = "Helvetica"
+                caption_size = 9
+                caption_leading = 10
+                caption_lines = _wrap_lines(
+                    pdf,
+                    caption_text,
+                    cell_w - 6 * mm,
+                    2,
+                    caption_font,
+                    caption_size,
+                )
+                caption_h = max(6 * mm, max(1, len(caption_lines)) * caption_leading)
+                image_y = y + caption_h + 2 * mm
+                image_h = cell_h - caption_h - 6 * mm
+                if image_h < 10 * mm:
+                    image_h = 10 * mm
                 _draw_image_fit(
+                    pdf,
+                    photo_path,
+                    x + 2 * mm,
+                    image_y,
+                    cell_w - 4 * mm,
+                    image_h,
                 )
+                if caption_lines:
+                    pdf.setFillColor(gray_500)
+                    _draw_centered_block(
+                        pdf,
+                        caption_lines,
+                        x + cell_w / 2,
+                        y + 2 * mm,
+                        caption_h,
+                        caption_leading,
+                        caption_font,
+                        caption_size,
                     )
         else:
             pdf.setFont("Helvetica", 11)
         pdf.drawCentredString(
             width / 2,
             footer_y + 4 * mm,
+            "Prosento - (c) 2026 All Rights Reserved",
         )
         page_line = f"Page {output_index + 1} of {total_pages}"
         if section_label:

server/app/services/session_store.py CHANGED Viewed

@@ -19,6 +19,36 @@ IMAGE_EXTS = {".jpg", ".jpeg", ".png", ".gif", ".webp"}
 DOC_EXTS = {".pdf", ".doc", ".docx"}
 DATA_EXTS = {".csv", ".xls", ".xlsx"}
 SESSION_ID_RE = re.compile(r"^[0-9a-f]{32}$")
 @dataclass
@@ -109,6 +139,54 @@ def _normalize_template_fields(template: Optional[dict]) -> dict:
     return normalized
 class SessionStore:
     def __init__(self, base_dir: Optional[Path] = None) -> None:
         settings = get_settings()
@@ -134,6 +212,32 @@ class SessionStore:
                 except Exception:
                     continue
     def list_sessions(self) -> List[dict]:
         sessions: List[dict] = []
         for session_file in sorted(self.sessions_dir.glob("*/session.json"), reverse=True):
@@ -161,6 +265,7 @@ class SessionStore:
             "pages": [],
             "jobsheet_sections": [],
             "headings": [],
         }
         self._save_session(session)
         return session
@@ -212,13 +317,15 @@ class SessionStore:
     def set_pages(self, session: dict, pages: List[dict]) -> dict:
         if not pages:
             pages = [{"items": []}]
         normalized_pages = []
         for page in pages:
             if not isinstance(page, dict):
-                normalized_pages.append({"items": []})
                 continue
-            template = _normalize_template_fields(page.get("template"))
-            normalized_pages.append({**page, "template": template})
         # Legacy compatibility: store as a single section.
         session["jobsheet_sections"] = [
             {"id": uuid4().hex, "title": "Section 1", "pages": normalized_pages}
@@ -238,6 +345,7 @@ class SessionStore:
         return pages
     def set_sections(self, session: dict, sections: List[dict]) -> dict:
         normalized: List[dict] = []
         for section in sections or []:
             if hasattr(section, "model_dump"):
@@ -258,10 +366,11 @@ class SessionStore:
             normalized_pages = []
             for page in pages:
                 if not isinstance(page, dict):
-                    normalized_pages.append({"items": []})
                     continue
-                template = _normalize_template_fields(page.get("template"))
-                normalized_pages.append({**page, "template": template})
             normalized.append(
                 {
                     "id": section.get("id") or uuid4().hex,
@@ -293,7 +402,40 @@ class SessionStore:
         self.update_session(session)
         return session
     def ensure_sections(self, session: dict) -> List[dict]:
         sections = session.get("jobsheet_sections") or []
         if sections:
             normalized_sections: List[dict] = []
@@ -304,10 +446,11 @@ class SessionStore:
                 normalized_pages = []
                 for page in pages:
                     if not isinstance(page, dict):
-                        normalized_pages.append({"items": []})
                         continue
-                    template = _normalize_template_fields(page.get("template"))
-                    normalized_pages.append({**page, "template": template})
                 normalized_sections.append(
                     {
                         "id": section.get("id") or uuid4().hex,
@@ -329,6 +472,11 @@ class SessionStore:
             count = selected_count or photo_count or session.get("page_count", 1) or 1
             pages = [{"items": []} for _ in range(count)]
         sections = [{"id": uuid4().hex, "title": "Section 1", "pages": pages}]
         session["jobsheet_sections"] = sections
         session["pages"] = []
@@ -370,15 +518,21 @@ class SessionStore:
         else:
             session["headings"] = []
         pages = session.get("pages") or []
         if pages:
             normalized_pages = []
             for page in pages:
                 if not isinstance(page, dict):
-                    normalized_pages.append({"items": []})
                     continue
-                template = _normalize_template_fields(page.get("template"))
-                normalized_pages.append({**page, "template": template})
             session["pages"] = normalized_pages
         sections = session.get("jobsheet_sections") or []
@@ -391,10 +545,11 @@ class SessionStore:
                 normalized_pages = []
                 for page in pages:
                     if not isinstance(page, dict):
-                        normalized_pages.append({"items": []})
                         continue
-                    template = _normalize_template_fields(page.get("template"))
-                    normalized_pages.append({**page, "template": template})
                 normalized_sections.append(
                     {
                         "id": section.get("id") or uuid4().hex,

 DOC_EXTS = {".pdf", ".doc", ".docx"}
 DATA_EXTS = {".csv", ".xls", ".xlsx"}
 SESSION_ID_RE = re.compile(r"^[0-9a-f]{32}$")
+BUILTIN_PAGE_TEMPLATES = [
+    {
+        "id": "repex:standard",
+        "name": "Standard Job Sheet",
+        "description": "Observations + up to two photos.",
+        "blank": False,
+        "variant": "full",
+        "photo_layout": "auto",
+        "source": "builtin",
+    },
+    {
+        "id": "repex:photos",
+        "name": "Photo Continuation",
+        "description": "Photo-only continuation page.",
+        "blank": False,
+        "variant": "photos",
+        "photo_layout": "auto",
+        "source": "builtin",
+    },
+    {
+        "id": "repex:blank",
+        "name": "Blank Canvas",
+        "description": "Blank white page.",
+        "blank": True,
+        "variant": "full",
+        "photo_layout": "auto",
+        "source": "builtin",
+    },
+]
+BUILTIN_PAGE_TEMPLATE_MAP = {item["id"]: item for item in BUILTIN_PAGE_TEMPLATES}
 @dataclass
     return normalized
+def _infer_template_id(page: dict) -> str:
+    template_id = str(page.get("page_template") or "").strip()
+    if template_id:
+        return template_id
+    if page.get("blank"):
+        return "repex:blank"
+    if str(page.get("variant") or "").strip().lower() == "photos":
+        return "repex:photos"
+    return "repex:standard"
+def _normalize_page_templates(templates: Optional[List[dict]]) -> List[dict]:
+    normalized: List[dict] = []
+    seen: set[str] = set()
+    for template in templates or []:
+        if hasattr(template, "model_dump"):
+            template = template.model_dump()
+        elif hasattr(template, "dict"):
+            template = template.dict()
+        if not isinstance(template, dict):
+            continue
+        template_id = str(template.get("id") or "").strip()
+        if not template_id or template_id in BUILTIN_PAGE_TEMPLATE_MAP:
+            continue
+        if template_id in seen:
+            continue
+        seen.add(template_id)
+        name = str(template.get("name") or template_id).strip() or template_id
+        variant = str(template.get("variant") or "full").strip().lower()
+        if variant not in {"full", "photos"}:
+            variant = "full"
+        photo_layout = str(template.get("photo_layout") or "auto").strip().lower()
+        if photo_layout not in {"auto", "two-column", "stacked"}:
+            photo_layout = "auto"
+        normalized.append(
+            {
+                "id": template_id,
+                "name": name,
+                "description": str(template.get("description") or "").strip(),
+                "blank": bool(template.get("blank")),
+                "variant": variant,
+                "photo_layout": photo_layout,
+                "source": "custom",
+            }
+        )
+    return normalized
 class SessionStore:
     def __init__(self, base_dir: Optional[Path] = None) -> None:
         settings = get_settings()
                 except Exception:
                     continue
+    def _template_index(self, session: dict) -> dict:
+        custom_templates = _normalize_page_templates(session.get("page_templates") or [])
+        session["page_templates"] = custom_templates
+        merged = {key: dict(value) for key, value in BUILTIN_PAGE_TEMPLATE_MAP.items()}
+        for template in custom_templates:
+            merged[template["id"]] = template
+        return merged
+    def _normalize_page(self, page: dict, template_index: dict) -> dict:
+        template = _normalize_template_fields(page.get("template"))
+        normalized = {**page, "template": template}
+        template_id = _infer_template_id(normalized)
+        definition = template_index.get(template_id) or BUILTIN_PAGE_TEMPLATE_MAP["repex:standard"]
+        normalized["page_template"] = definition["id"]
+        normalized["blank"] = bool(definition.get("blank"))
+        normalized["variant"] = (
+            str(definition.get("variant") or normalized.get("variant") or "full")
+            .strip()
+            .lower()
+        )
+        if normalized["variant"] not in {"full", "photos"}:
+            normalized["variant"] = "full"
+        if normalized.get("photo_layout") is None and definition.get("photo_layout"):
+            normalized["photo_layout"] = definition["photo_layout"]
+        return normalized
     def list_sessions(self) -> List[dict]:
         sessions: List[dict] = []
         for session_file in sorted(self.sessions_dir.glob("*/session.json"), reverse=True):
             "pages": [],
             "jobsheet_sections": [],
             "headings": [],
+            "page_templates": [],
         }
         self._save_session(session)
         return session
     def set_pages(self, session: dict, pages: List[dict]) -> dict:
         if not pages:
             pages = [{"items": []}]
+        template_index = self._template_index(session)
         normalized_pages = []
         for page in pages:
             if not isinstance(page, dict):
+                normalized_pages.append(
+                    self._normalize_page({"items": []}, template_index)
+                )
                 continue
+            normalized_pages.append(self._normalize_page(page, template_index))
         # Legacy compatibility: store as a single section.
         session["jobsheet_sections"] = [
             {"id": uuid4().hex, "title": "Section 1", "pages": normalized_pages}
         return pages
     def set_sections(self, session: dict, sections: List[dict]) -> dict:
+        template_index = self._template_index(session)
         normalized: List[dict] = []
         for section in sections or []:
             if hasattr(section, "model_dump"):
             normalized_pages = []
             for page in pages:
                 if not isinstance(page, dict):
+                    normalized_pages.append(
+                        self._normalize_page({"items": []}, template_index)
+                    )
                     continue
+                normalized_pages.append(self._normalize_page(page, template_index))
             normalized.append(
                 {
                     "id": section.get("id") or uuid4().hex,
         self.update_session(session)
         return session
+    def set_page_templates(self, session: dict, templates: List[dict]) -> dict:
+        session["page_templates"] = _normalize_page_templates(templates)
+        template_index = self._template_index(session)
+        sections = session.get("jobsheet_sections") or []
+        normalized_sections = []
+        for section in sections:
+            if not isinstance(section, dict):
+                continue
+            pages = section.get("pages") or []
+            normalized_pages = []
+            for page in pages:
+                if not isinstance(page, dict):
+                    normalized_pages.append(
+                        self._normalize_page({"items": []}, template_index)
+                    )
+                    continue
+                normalized_pages.append(self._normalize_page(page, template_index))
+            normalized_sections.append(
+                {
+                    "id": section.get("id") or uuid4().hex,
+                    "title": section.get("title") or "Section",
+                    "pages": normalized_pages if normalized_pages else [{"items": []}],
+                }
+            )
+        if normalized_sections:
+            session["jobsheet_sections"] = normalized_sections
+            session["page_count"] = sum(
+                len(section.get("pages") or []) for section in normalized_sections
+            )
+        self.update_session(session)
+        return session
     def ensure_sections(self, session: dict) -> List[dict]:
+        template_index = self._template_index(session)
         sections = session.get("jobsheet_sections") or []
         if sections:
             normalized_sections: List[dict] = []
                 normalized_pages = []
                 for page in pages:
                     if not isinstance(page, dict):
+                        normalized_pages.append(
+                            self._normalize_page({"items": []}, template_index)
+                        )
                         continue
+                    normalized_pages.append(self._normalize_page(page, template_index))
                 normalized_sections.append(
                     {
                         "id": section.get("id") or uuid4().hex,
             count = selected_count or photo_count or session.get("page_count", 1) or 1
             pages = [{"items": []} for _ in range(count)]
+        pages = [
+            self._normalize_page(page if isinstance(page, dict) else {"items": []}, template_index)
+            for page in pages
+        ]
         sections = [{"id": uuid4().hex, "title": "Section 1", "pages": pages}]
         session["jobsheet_sections"] = sections
         session["pages"] = []
         else:
             session["headings"] = []
+        session["page_templates"] = _normalize_page_templates(
+            session.get("page_templates") or []
+        )
+        template_index = self._template_index(session)
         pages = session.get("pages") or []
         if pages:
             normalized_pages = []
             for page in pages:
                 if not isinstance(page, dict):
+                    normalized_pages.append(
+                        self._normalize_page({"items": []}, template_index)
+                    )
                     continue
+                normalized_pages.append(self._normalize_page(page, template_index))
             session["pages"] = normalized_pages
         sections = session.get("jobsheet_sections") or []
                 normalized_pages = []
                 for page in pages:
                     if not isinstance(page, dict):
+                        normalized_pages.append(
+                            self._normalize_page({"items": []}, template_index)
+                        )
                         continue
+                    normalized_pages.append(self._normalize_page(page, template_index))
                 normalized_sections.append(
                     {
                         "id": section.get("id") or uuid4().hex,