Add page template system and UI

Introduce a reusable page template feature and related UX. Adds a new LayoutTemplatesPage for creating, editing and persisting custom page templates and a built-in template list (frontend/src/lib/pageTemplates.ts). Integrates templates into EditLayoutsPage (select defaults per-section, pick template per-page, apply templates when adding pages) and exposes a Templates navigation link. Adds page_template field and PageTemplateDefinition types to session types. Enhance report editor to support selecting/uploading a company logo for page templates and update photo-splitting logic to use primary (2) and continuation (6) photo limits. ImagePlacementPage now offers photo-layout presets and drag/drop application. UploadPage includes an Excel data template download (public/templates/repex-data-input-template.xlsx) and guidance. Server API/schemas/services updated to handle page_templates and related import/upload flows. Misc: various UI and state wiring to merge, persist and apply templates across the app.

frontend/src/App.tsx

@@ -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 LayoutTemplatesPage from "./pages/LayoutTemplatesPage";
 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="/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/report-editor.js

@@ -18,6 +18,9 @@ const PRIORITY_SCALE = {
   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();
@@ -409,6 +412,22 @@ class ReportEditor extends HTMLElement {
                   </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">
@@ -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.$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(() => {
@@ -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"));
 
+    // 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));
@@ -561,6 +600,7 @@ class ReportEditor extends HTMLElement {
     this.renderCanvas();
     this.updateCanvasScale();
     this.updatePropsPanel();
+    this._syncTemplateLogoOptions();
     this.updateUndoRedoButtons();
     this._refreshIcons();
   }
@@ -742,6 +782,75 @@ class ReportEditor extends HTMLElement {
     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) {
     if (!photo) return "";
     return photo.id || photo.url || photo.name || "";
@@ -1300,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") {
+      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" };
@@ -1318,12 +1425,20 @@ class ReportEditor extends HTMLElement {
       });
     }
 
+    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: chunks[0],
+      photo_ids: baseChunk,
       variant: normalized.variant || "full",
     };
-    const extraPages = chunks.slice(1).map((chunk) =>
+    if (!continuationChunks.length) return [basePage];
+    const extraPages = continuationChunks.map((chunk) =>
       this._buildPhotoContinuation(normalized, chunk),
     );
     return [basePage, ...extraPages];

frontend/src/lib/pageTemplates.ts

@@ -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

@@ -9,7 +9,8 @@ export type FlatPage = {
   flatIndex: number;
 };
 
-const MAX_PHOTOS_PER_PAGE = 2;
+const MAX_PHOTOS_PRIMARY_PAGE = 2;
+const MAX_PHOTOS_CONTINUATION_PAGE = 6;
 
 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") {
+    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" };
-      }
+      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: chunks[0],
+    photo_ids: baseChunk,
     variant: normalized.variant ?? "full",
   };
-  const extraPages = chunks.slice(1).map((chunk) =>
+  if (!continuationChunks.length) {
+    return [basePage];
+  }
+  const extraPages = continuationChunks.map((chunk) =>
     buildPhotoContinuation(normalized, chunk),
   );
   return [basePage, ...extraPages];

frontend/src/pages/EditLayoutsPage.tsx

@@ -15,10 +15,19 @@ import {
 } 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, Session } from "../types/session";
+import type {
+  JobsheetSection,
+  PageTemplateDefinition,
+  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 [pageTemplates, setPageTemplates] = useState<PageTemplateDefinition[]>(
+    mergePageTemplates(undefined),
+  );
+  const [newPageTemplateBySection, setNewPageTemplateBySection] = useState<
+    Record<string, string>
+  >({});
   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);
+        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");
@@ -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 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) =>
@@ -151,6 +169,17 @@ export default function EditLayoutsPage() {
     }, 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[],
@@ -196,6 +225,7 @@ export default function EditLayoutsPage() {
         setSaveState("saved");
         if (updatedSession) {
           setSession(updatedSession);
+          setPageTemplates(mergePageTemplates(updatedSession.page_templates));
         }
         if (!silent) {
           setStatus("Layout saved.");
@@ -227,12 +257,13 @@ export default function EditLayoutsPage() {
   }
 
   async function handleAddSection() {
+    const baseTemplate = findTemplate("repex:standard");
     const next = [
       ...sections,
       {
         id: crypto.randomUUID(),
         title: `Section ${sections.length + 1}`,
-        pages: [{ items: [] }],
+        pages: [applyPageTemplateToPage({ items: [] }, baseTemplate)],
       },
     ];
     await saveLayout(next);
@@ -254,11 +285,21 @@ export default function EditLayoutsPage() {
   }
 
   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 ?? []), { items: [], blank: true }],
+        pages: [...(section.pages ?? []), nextPage],
       };
     });
     if (session) {
@@ -271,6 +312,27 @@ export default function EditLayoutsPage() {
     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;
@@ -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={`/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) => {
@@ -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>
+                  <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)}
@@ -622,16 +649,29 @@ export default function EditLayoutsPage() {
                     <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) => (
-                    <div
-                      key={`${section.id}-page-${pageIndex}`}
-                      className="rounded-lg border border-gray-200 bg-white p-3"
-                    >
+                  {(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">
@@ -672,6 +712,35 @@ export default function EditLayoutsPage() {
                         </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 }}
@@ -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">

frontend/src/pages/ImagePlacementPage.tsx

@@ -45,6 +45,27 @@ export default function ImagePlacementPage() {
   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) {
       setError("No active session found. Return to upload to continue.");
@@ -97,24 +118,6 @@ export default function ImagePlacementPage() {
     setPageIndex((idx) => Math.min(Math.max(0, idx), totalPages - 1));
   }, [totalPages]);
 
-  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 page = flatPages[pageIndex]?.page ?? null;
   const pageEntry = flatPages[pageIndex] ?? null;
   const sectionLabel = flatPages[pageIndex]?.sectionTitle
@@ -167,6 +170,24 @@ export default function ImagePlacementPage() {
   }, [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 =
       "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold";
@@ -245,6 +266,20 @@ export default function ImagePlacementPage() {
     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];
@@ -507,6 +542,72 @@ export default function ImagePlacementPage() {
 
       {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>
@@ -580,8 +681,8 @@ 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.
+                First template pages show up to 2 images. Continuation pages can
+                include more images automatically.
               </p>
             </div>
 

frontend/src/pages/LayoutTemplatesPage.tsx

@@ -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

@@ -256,6 +256,33 @@ export default function UploadPage() {
             <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

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

@@ -12,6 +12,8 @@ from ..deps import get_session_store
 from ..schemas import (
     HeadingsRequest,
     HeadingsResponse,
+    PageTemplatesRequest,
+    PageTemplatesResponse,
     PagesRequest,
     PagesResponse,
     SectionsRequest,
@@ -206,6 +208,20 @@ def save_headings(
     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,
@@ -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"]
+        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

@@ -19,6 +19,16 @@ class Heading(BaseModel):
     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
@@ -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)
+    page_templates: List[PageTemplateDefinition] = Field(default_factory=list)
 
 
 class SessionStatusResponse(BaseModel):
@@ -71,3 +82,11 @@ class HeadingsRequest(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

@@ -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}
+        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/session_store.py

@@ -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}$")
+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
@@ -109,6 +139,54 @@ def _normalize_template_fields(template: Optional[dict]) -> dict:
     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()
@@ -134,6 +212,32 @@ class SessionStore:
                 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):
@@ -161,6 +265,7 @@ class SessionStore:
             "pages": [],
             "jobsheet_sections": [],
             "headings": [],
+            "page_templates": [],
         }
         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": []}]
+        template_index = self._template_index(session)
         normalized_pages = []
         for page in pages:
             if not isinstance(page, dict):
-                normalized_pages.append({"items": []})
+                normalized_pages.append(
+                    self._normalize_page({"items": []}, template_index)
+                )
                 continue
-            template = _normalize_template_fields(page.get("template"))
-            normalized_pages.append({**page, "template": template})
+            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}
@@ -238,6 +345,7 @@ class SessionStore:
         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"):
@@ -258,10 +366,11 @@ class SessionStore:
             normalized_pages = []
             for page in pages:
                 if not isinstance(page, dict):
-                    normalized_pages.append({"items": []})
+                    normalized_pages.append(
+                        self._normalize_page({"items": []}, template_index)
+                    )
                     continue
-                template = _normalize_template_fields(page.get("template"))
-                normalized_pages.append({**page, "template": template})
+                normalized_pages.append(self._normalize_page(page, template_index))
             normalized.append(
                 {
                     "id": section.get("id") or uuid4().hex,
@@ -293,7 +402,40 @@ class SessionStore:
         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] = []
@@ -304,10 +446,11 @@ class SessionStore:
                 normalized_pages = []
                 for page in pages:
                     if not isinstance(page, dict):
-                        normalized_pages.append({"items": []})
+                        normalized_pages.append(
+                            self._normalize_page({"items": []}, template_index)
+                        )
                         continue
-                    template = _normalize_template_fields(page.get("template"))
-                    normalized_pages.append({**page, "template": template})
+                    normalized_pages.append(self._normalize_page(page, template_index))
                 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)]
 
+        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"] = []
@@ -370,15 +518,21 @@ class SessionStore:
         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({"items": []})
+                    normalized_pages.append(
+                        self._normalize_page({"items": []}, template_index)
+                    )
                     continue
-                template = _normalize_template_fields(page.get("template"))
-                normalized_pages.append({**page, "template": template})
+                normalized_pages.append(self._normalize_page(page, template_index))
             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": []})
+                        normalized_pages.append(
+                            self._normalize_page({"items": []}, template_index)
+                        )
                         continue
-                    template = _normalize_template_fields(page.get("template"))
-                    normalized_pages.append({**page, "template": template})
+                    normalized_pages.append(self._normalize_page(page, template_index))
                 normalized_sections.append(
                     {
                         "id": section.get("id") or uuid4().hex,