Merge dev into main

README.md

@@ -82,14 +82,16 @@ Environment variables for the API:
 Frontend environment variables:
 - `VITE_API_BASE` (optional, default: `/api`)
 
-## Headless PDF Export (Playwright)
+## PDF Export (ReportLab)
 
-The server can generate PDFs using headless Chrome:
+The server generates PDFs using ReportLab at:
+
+```
+GET /api/sessions/{session_id}/export.pdf
+```
+
+Install dependencies:
 
 ```powershell
 pip install -r server/requirements.txt
-python -m playwright install
 ```
-
-Make sure `FRONTEND_BASE_URL` points to the running frontend that serves
-`/print/report?session=...` (Vite dev server or the built frontend served by FastAPI).

frontend/src/App.tsx

@@ -9,7 +9,6 @@ import EditReportPage from "./pages/EditReportPage";
 import EditLayoutsPage from "./pages/EditLayoutsPage";
 import ExportPage from "./pages/ExportPage";
 import RatingsInfoPage from "./pages/RatingsInfoPage";
-import PrintReportPage from "./pages/PrintReportPage";
 
 export default function App() {
   return (
@@ -24,7 +23,6 @@ export default function App() {
         <Route path="/edit-layouts" element={<EditLayoutsPage />} />
         <Route path="/export" element={<ExportPage />} />
         <Route path="/info/ratings" element={<RatingsInfoPage />} />
-        <Route path="/print/report" element={<PrintReportPage />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </BrowserRouter>

frontend/src/components/InfoMenu.tsx

@@ -0,0 +1,46 @@
+import { Info } from "react-feather";
+import { Link } from "react-router-dom";
+
+type InfoMenuProps = {
+  sessionQuery?: string;
+};
+
+export function InfoMenu({ sessionQuery = "" }: InfoMenuProps) {
+  const ratingsLink = `/info/ratings${sessionQuery}`;
+  return (
+    <details className="relative no-print">
+      <summary className="list-none">
+        <span className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition cursor-pointer">
+          <Info className="h-4 w-4" />
+          Info
+        </span>
+      </summary>
+      <div className="absolute right-0 mt-2 w-80 rounded-lg border border-gray-200 bg-white shadow-lg p-3 z-20">
+        <div className="text-xs font-semibold text-gray-900 mb-2">
+          RepEx quick guidance
+        </div>
+        <ul className="space-y-2 text-xs text-gray-600">
+          <li>
+            Workflow: Upload → Review → Input Data → Report Viewer → Edit →
+            Export.
+          </li>
+          <li>
+            Edit Report is for free‑form layout changes; Input Data updates the
+            structured fields.
+          </li>
+          <li>
+            Category and Priority values use the defined rating scales.
+          </li>
+          <li>
+            <Link
+              to={ratingsLink}
+              className="text-blue-600 hover:text-blue-700 underline"
+            >
+              View rating scale tables
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </details>
+  );
+}

frontend/src/components/JobSheetTemplate.tsx

@@ -11,6 +11,7 @@ type JobSheetTemplateProps = {
   photos?: FileMeta[];
   orderLocked?: boolean;
   variant?: "full" | "photos";
+  sectionLabel?: string;
 };
 
 type PhotoSlotProps = {
@@ -25,44 +26,107 @@ type LayoutEntry = {
   span: boolean;
 };
 
-type ScaleTone = {
+type RatingTone = {
   label: string;
-  className: string;
+  bg: string;
+  text: string;
+  border: string;
 };
 
-const CATEGORY_SCALE: Record<string, ScaleTone> = {
-  "0": { label: "Excellent", className: "bg-green-100 text-green-800 border-green-200" },
-  "1": { label: "Good", className: "bg-green-200 text-green-800 border-green-200" },
-  "2": { label: "Fair", className: "bg-yellow-100 text-yellow-800 border-yellow-200" },
-  "3": { label: "Poor", className: "bg-yellow-200 text-yellow-800 border-yellow-200" },
-  "4": { label: "Worse", className: "bg-orange-200 text-orange-800 border-orange-200" },
-  "5": { label: "Severe", className: "bg-red-200 text-red-800 border-red-200" },
+const CATEGORY_SCALE: Record<string, RatingTone> = {
+  "0": {
+    label: "Excellent",
+    bg: "bg-green-100",
+    text: "text-green-800",
+    border: "border-green-200",
+  },
+  "1": {
+    label: "Good",
+    bg: "bg-green-200",
+    text: "text-green-800",
+    border: "border-green-200",
+  },
+  "2": {
+    label: "Fair",
+    bg: "bg-yellow-100",
+    text: "text-yellow-800",
+    border: "border-yellow-200",
+  },
+  "3": {
+    label: "Poor",
+    bg: "bg-yellow-200",
+    text: "text-yellow-800",
+    border: "border-yellow-200",
+  },
+  "4": {
+    label: "Worse",
+    bg: "bg-orange-200",
+    text: "text-orange-800",
+    border: "border-orange-200",
+  },
+  "5": {
+    label: "Severe",
+    bg: "bg-red-200",
+    text: "text-red-800",
+    border: "border-red-200",
+  },
 };
 
-const PRIORITY_SCALE: Record<string, ScaleTone> = {
-  "1": { label: "Immediate", className: "bg-red-200 text-red-800 border-red-200" },
-  "2": { label: "1 Year", className: "bg-orange-200 text-orange-800 border-orange-200" },
-  "3": { label: "3 Years", className: "bg-green-200 text-green-800 border-green-200" },
-  X: { label: "At Use", className: "bg-purple-200 text-purple-800 border-purple-200" },
-  M: { label: "Monitor", className: "bg-blue-200 text-blue-800 border-blue-200" },
+const PRIORITY_SCALE: Record<string, RatingTone> = {
+  "1": {
+    label: "Immediate",
+    bg: "bg-red-200",
+    text: "text-red-800",
+    border: "border-red-200",
+  },
+  "2": {
+    label: "1 Year",
+    bg: "bg-orange-200",
+    text: "text-orange-800",
+    border: "border-orange-200",
+  },
+  "3": {
+    label: "3 Years",
+    bg: "bg-green-200",
+    text: "text-green-800",
+    border: "border-green-200",
+  },
+  X: {
+    label: "At Use",
+    bg: "bg-purple-200",
+    text: "text-purple-800",
+    border: "border-purple-200",
+  },
+  M: {
+    label: "Monitor",
+    bg: "bg-blue-200",
+    text: "text-blue-800",
+    border: "border-blue-200",
+  },
 };
 
-function parseScaleCode(value: string) {
-  const match = value.trim().match(/^[A-Za-z0-9]+/);
-  return match ? match[0].toUpperCase() : value.trim().toUpperCase();
+function ratingKey(value: string) {
+  const raw = (value || "").trim();
+  if (!raw) return "";
+  const match = raw.match(/^([0-9]|[xXmM])/);
+  if (match) return match[1].toUpperCase();
+  return raw.split("-")[0].trim().toUpperCase();
 }
 
-function buildScaleBadge(value: string, scale: Record<string, ScaleTone>) {
-  const raw = value.trim();
-  if (!raw) {
-    return { text: "-", className: "bg-gray-50 text-gray-700 border-gray-200" };
-  }
-  const code = parseScaleCode(raw);
-  const tone = scale[code];
+function formatRating(value: string, scale: Record<string, RatingTone>) {
+  const raw = (value || "").trim();
+  const key = ratingKey(raw);
+  const tone = key ? scale[key] : undefined;
   if (!tone) {
-    return { text: raw, className: "bg-gray-50 text-gray-700 border-gray-200" };
+    return {
+      text: raw || "-",
+      className: "bg-gray-50 text-gray-700 border-gray-200",
+    };
   }
-  return { text: `${code} - ${tone.label}`, className: tone.className };
+  return {
+    text: `${key} - ${tone.label}`,
+    className: `${tone.bg} ${tone.text} ${tone.border}`,
+  };
 }
 
 function normalizeKey(value: string) {
@@ -173,7 +237,7 @@ function PhotoSlot({ url, label, className = "", imageClassName = "" }: PhotoSlo
   return (
     <figure
       className={[
-        "rounded-lg border border-gray-200 bg-gray-50 p-2 break-inside-avoid mb-3",
+        "rounded-lg border border-gray-200 bg-gray-50 p-2 break-inside-avoid",
         className,
       ].join(" ")}
       style={{ breakInside: "avoid", pageBreakInside: "avoid" }}
@@ -181,7 +245,7 @@ function PhotoSlot({ url, label, className = "", imageClassName = "" }: PhotoSlo
       <img
         src={url}
         alt={label}
-        className={["w-full h-auto object-contain", imageClassName].join(" ")}
+        className={["w-full h-full object-contain", imageClassName].join(" ")}
         loading="eager"
       />
       <figcaption className="mt-1 text-[10px] text-gray-600 text-center">
@@ -199,6 +263,7 @@ export function JobSheetTemplate({
   photos,
   orderLocked = false,
   variant = "full",
+  sectionLabel,
 }: JobSheetTemplateProps) {
   const inspectionDate =
     template?.inspection_date ?? session?.inspection_date ?? "";
@@ -225,9 +290,8 @@ export function JobSheetTemplate({
   const actionText = [actionType, requiredAction]
     .filter((value) => value && value.trim())
     .join(" - ");
-
-  const categoryBadge = buildScaleBadge(String(category || ""), CATEGORY_SCALE);
-  const priorityBadge = buildScaleBadge(String(priority || ""), PRIORITY_SCALE);
+  const categoryBadge = formatRating(category, CATEGORY_SCALE);
+  const priorityBadge = formatRating(priority, PRIORITY_SCALE);
 
   const resolvedPhotos =
     photos && photos.length ? photos : getPhotosForPage(session, pageIndex, 1);
@@ -268,10 +332,16 @@ export function JobSheetTemplate({
     return layout.map((entry) => entry.photo);
   }, [limitedPhotos, ratios, orderLocked]);
 
-  const photoColumnsClass = orderedPhotos.length <= 1 ? "columns-1" : "columns-2";
+  const displayedPhotos =
+    variant === "full" ? orderedPhotos.slice(0, 2) : orderedPhotos;
+
+  const photoGridClass =
+    displayedPhotos.length <= 1
+      ? "grid grid-cols-1 gap-3"
+      : "grid grid-cols-2 gap-3";
 
   return (
-    <div className="w-full h-full p-5 text-[11px] text-gray-700">
+    <div className="w-full h-full p-5 text-[11px] text-gray-700 flex flex-col">
       <header className="mb-3 border-b border-gray-200 pb-2">
         <div className="grid grid-cols-[auto,1fr,auto] items-center gap-3">
           <img
@@ -335,7 +405,10 @@ export function JobSheetTemplate({
                     Category
                   </div>
                   <span
-                    className={`template-field inline-flex items-center justify-center rounded-md border px-3 py-1 text-[11px] font-semibold min-w-[120px] ${categoryBadge.className}`}
+                    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(" ")}
                   >
                     {categoryBadge.text}
                   </span>
@@ -346,7 +419,10 @@ export function JobSheetTemplate({
                     Priority
                   </div>
                   <span
-                    className={`template-field inline-flex items-center justify-center rounded-md border px-3 py-1 text-[11px] font-semibold min-w-[120px] ${priorityBadge.className}`}
+                    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(" ")}
                   >
                     {priorityBadge.text}
                   </span>
@@ -380,24 +456,21 @@ export function JobSheetTemplate({
         </section>
       ) : null}
 
-      <section className="mb-3 avoid-break">
+      <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={`${photoColumnsClass}`}
-          style={{ columnGap: "0.75rem" }}
-        >
-          {orderedPhotos.length === 0 ? (
-            <PhotoSlot url={undefined} label="No photo selected" className="break-inside-avoid mb-3" />
+        <div className={`${photoGridClass} flex-1 items-stretch`}>
+          {displayedPhotos.length === 0 ? (
+            <PhotoSlot url={undefined} label="No photo selected" className="h-full" />
           ) : (
-            orderedPhotos.map((photo, index) => (
+            displayedPhotos.map((photo, index) => (
               <PhotoSlot
                 key={photo?.id || `${index}`}
                 url={photo?.url}
                 label={photo?.name || `Figure ${index + 1}`}
-                className="break-inside-avoid mb-3"
-                imageClassName=""
+                className="h-full"
+                imageClassName="h-full"
               />
             ))
           )}
@@ -409,6 +482,7 @@ export function JobSheetTemplate({
         <span>Inspector: {inspector || "-"}</span>
         <span>Doc: {docNumber || "-"}</span>
         <span>Site: {clientSite || "-"}</span>
+        {sectionLabel ? <span>{sectionLabel}</span> : null}
       </footer>
     </div>
   );

frontend/src/components/ReportPageCanvas.tsx

@@ -12,6 +12,7 @@ type ReportPageCanvasProps = {
   pageCount: number;
   scale: number;
   template?: TemplateFields;
+  sectionLabel?: string;
   className?: string;
   adaptive?: boolean;
 };
@@ -23,15 +24,15 @@ export function ReportPageCanvas({
   pageCount,
   scale,
   template,
+  sectionLabel,
   className = "",
   adaptive = false,
 }: ReportPageCanvasProps) {
   const items = page?.items ?? [];
   const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
+  const pageVariant = page?.variant ?? "full";
   const photos = resolvePagePhotos(session, page, pageIndex);
-  const photosPerSheet = 6;
-  const photoSheets = chunkPhotos(photos, photosPerSheet);
-  const sheets = adaptive && photoSheets.length > 1 ? photoSheets : [photos];
+  const sheets = adaptive ? [photos] : [photos];
   const sheetRefs = useRef<Array<HTMLDivElement | null>>([]);
   const [sheetHeights, setSheetHeights] = useState<number[]>([]);
 
@@ -112,15 +113,20 @@ export function ReportPageCanvas({
                 transformOrigin: "top left",
               }}
             >
-              <JobSheetTemplate
-                session={session}
-                pageIndex={pageIndex}
-                pageCount={pageCount}
-                template={template}
-                photos={sheetPhotos}
-                orderLocked={page?.photo_order_locked ?? false}
-                variant={sheetIndex === 0 ? "full" : "photos"}
-              />
+              {page?.blank ? (
+                <div className="w-full h-full bg-white" />
+              ) : (
+                <JobSheetTemplate
+                  session={session}
+                  pageIndex={pageIndex}
+                  pageCount={pageCount}
+                  template={template}
+                  photos={sheetPhotos}
+                  orderLocked={page?.photo_order_locked ?? false}
+                  variant={pageVariant}
+                  sectionLabel={sectionLabel}
+                />
+              )}
             </div>
           </div>
         ))}
@@ -191,15 +197,6 @@ export function ReportPageCanvas({
   );
 }
 
-function chunkPhotos(photos: FileMeta[], perSheet: number) {
-  if (!photos.length) return [[]];
-  const slices: FileMeta[][] = [];
-  for (let i = 0; i < photos.length; i += perSheet) {
-    slices.push(photos.slice(i, i + perSheet));
-  }
-  return slices;
-}
-
 function resolvePagePhotos(
   session: Session | null,
   page: Page | null | undefined,

frontend/src/components/report-editor.js

@@ -48,7 +48,8 @@ class ReportEditor extends HTMLElement {
       isOpen: false,
       zoom: 1,
       activePage: 0,
-      pages: [],              // [{ items: [...] }]
+      pages: [],              // flattened pages
+      sections: [],           // [{ id, title?, pages: [...] }]
       selectedId: null,
       tool: "select",         // select | text | rect
       dragging: null,         // { id, startX, startY, origX, origY }
@@ -62,6 +63,7 @@ class ReportEditor extends HTMLElement {
     this.apiBase = null;
     this._saveTimer = null;
     this._photoRatios = new Map();
+    this._indexMap = [];
   }
 
   connectedCallback() {
@@ -105,12 +107,22 @@ class ReportEditor extends HTMLElement {
 
     const initialCount = Math.max(Number(totalPages) || 1, 1);
 
-    // Load existing editor pages from storage, else initialize
+    // Load existing editor sections from storage, else initialize
     const stored = this._loadPages();
-    if (stored && Array.isArray(stored.pages) && stored.pages.length) {
-      this.state.pages = stored.pages;
+    if (stored && Array.isArray(stored.sections) && stored.sections.length) {
+      this._setSections(stored.sections);
+    } else if (stored && Array.isArray(stored.pages) && stored.pages.length) {
+      this._setSections([
+        { id: this._sectionId(), title: "Section 1", pages: stored.pages },
+      ]);
     } else {
-      this.state.pages = Array.from({ length: initialCount }, () => ({ items: [] }));
+      this._setSections([
+        {
+          id: this._sectionId(),
+          title: "Section 1",
+          pages: Array.from({ length: initialCount }, () => ({ items: [] })),
+        },
+      ]);
       this._savePages();
     }
     this._ensurePageCount(initialCount);
@@ -132,10 +144,10 @@ class ReportEditor extends HTMLElement {
     setTimeout(() => this.updateAll(), 0);
 
     if (this.sessionId) {
-      this._loadPagesFromServer().then((pages) => {
-        if (pages && pages.length) {
-          this.state.pages = pages;
-          this._ensurePageCount(Math.max(initialCount, pages.length));
+      this._loadPagesFromServer().then((sections) => {
+        if (sections && sections.length) {
+          this._setSections(sections);
+          this._ensurePageCount(Math.max(initialCount, this.state.pages.length));
           this.state.activePage = Math.min(
             Math.max(0, pageIndex),
             this.state.pages.length - 1
@@ -790,6 +802,7 @@ class ReportEditor extends HTMLElement {
   _templateMarkup() {
     const session = this.state.payload || {};
     const template = this._getTemplate();
+    const sectionLabel = this._getActiveSectionLabel();
 
     const inspectionDate =
       template.inspection_date || session.inspection_date || "";
@@ -811,43 +824,46 @@ class ReportEditor extends HTMLElement {
       template.condition_description || session.notes || "";
     const requiredAction = template.required_action || "";
 
-    const categoryBadge = buildScaleBadge(category, CATEGORY_SCALE);
-    const priorityBadge = buildScaleBadge(priority, PRIORITY_SCALE);
+    const categoryScale = {
+      "0": { label: "Excellent", bg: "bg-green-100", text: "text-green-800", border: "border-green-200" },
+      "1": { label: "Good", bg: "bg-green-200", text: "text-green-800", border: "border-green-200" },
+      "2": { label: "Fair", bg: "bg-yellow-100", text: "text-yellow-800", border: "border-yellow-200" },
+      "3": { label: "Poor", bg: "bg-yellow-200", text: "text-yellow-800", border: "border-yellow-200" },
+      "4": { label: "Worse", bg: "bg-orange-200", text: "text-orange-800", border: "border-orange-200" },
+      "5": { label: "Severe", bg: "bg-red-200", text: "text-red-800", border: "border-red-200" },
+    };
+    const priorityScale = {
+      "1": { label: "Immediate", bg: "bg-red-200", text: "text-red-800", border: "border-red-200" },
+      "2": { label: "1 Year", bg: "bg-orange-200", text: "text-orange-800", border: "border-orange-200" },
+      "3": { label: "3 Years", bg: "bg-green-200", text: "text-green-800", border: "border-green-200" },
+      X: { label: "At Use", bg: "bg-purple-200", text: "text-purple-800", border: "border-purple-200" },
+      M: { label: "Monitor", bg: "bg-blue-200", text: "text-blue-800", border: "border-blue-200" },
+    };
+    const categoryBadge = this._ratingBadge(category, categoryScale);
+    const priorityBadge = this._ratingBadge(priority, priorityScale);
 
+    const variant =
+      (this.activePage && this.activePage.variant) || "full";
     const photos = this._photosForActivePage(session).slice(0, 6);
     this._ensurePhotoRatios(photos);
     const orderLocked = !!(this.activePage && this.activePage.photo_order_locked);
     const orderedPhotos = orderLocked
       ? photos
       : this._computePhotoLayout(photos).map((entry) => entry.photo);
-    const photoColumnsClass = orderedPhotos.length <= 1 ? "columns-1" : "columns-2";
-    const photoSlots = orderedPhotos.length
-      ? orderedPhotos
+    const displayedPhotos =
+      variant === "full" ? orderedPhotos.slice(0, 2) : orderedPhotos;
+    const photoColumnsClass = displayedPhotos.length <= 1 ? "columns-1" : "columns-2";
+    const photoSlots = displayedPhotos.length
+      ? displayedPhotos
           .map((photo, idx) => this._photoSlot(photo, `Figure ${idx + 1}`))
           .join("")
       : this._photoSlot(null, "No photo selected");
     const pageNum = this.state.activePage + 1;
     const pageCount = this.state.pages.length || 1;
 
-    return `
-      <div class="w-full h-full p-5 text-[11px] text-gray-700" style="color:#374151; font-size:11px;">
-        <header class="mb-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">
-              <h1 class="text-2xl font-bold text-gray-900 whitespace-nowrap">RepEx Inspection Job Sheet</h1>
-              <p class="text-sm text-gray-600 whitespace-nowrap">Report Express - Inspection Management</p>
-            </div>
-
-            <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>
-
+    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
@@ -879,7 +895,7 @@ class ReportEditor extends HTMLElement {
                     "category",
                     categoryBadge.text,
                     "Category",
-                    `inline-flex items-center justify-center rounded-md border px-3 py-1 text-sm font-semibold min-w-[120px] ${categoryBadge.className}`
+                    `inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold min-w-[120px] ${categoryBadge.className}`,
                   )}
                 </div>
 
@@ -889,7 +905,7 @@ class ReportEditor extends HTMLElement {
                     "priority",
                     priorityBadge.text,
                     "Priority",
-                    `inline-flex items-center justify-center rounded-md border px-3 py-1 text-sm font-semibold min-w-[120px] ${priorityBadge.className}`
+                    `inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold min-w-[120px] ${priorityBadge.className}`,
                   )}
                 </div>
 
@@ -917,10 +933,35 @@ class ReportEditor extends HTMLElement {
             </div>
           </div>
         </section>
+      `
+        : "";
+    const photoTitle =
+      variant === "photos" ? "Photo Documentation (continued)" : "Photo Documentation";
+
+    return `
+      <div class="w-full h-full p-5 text-[11px] text-gray-700" style="color:#374151; font-size:11px;">
+        <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">
+              <h1 class="text-2xl font-bold text-gray-900 whitespace-nowrap">RepEx Inspection Job Sheet</h1>
+              <p class="text-sm text-gray-600 whitespace-nowrap">Report Express - Inspection Management</p>
+            </div>
+
+            <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>
+
+        ${observationsHtml}
 
         <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
+            ${photoTitle}
           </h2>
 
           <div class="${photoColumnsClass}" style="column-gap:0.75rem;">
@@ -933,6 +974,7 @@ class ReportEditor extends HTMLElement {
           <span>Inspector: ${this._escape(inspector || "-")}</span>
           <span>Doc: ${this._escape(docNumber || "-")}</span>
           <span>Site: ${this._escape(clientSite || "-")}</span>
+          ${sectionLabel ? `<span>${this._escape(sectionLabel)}</span>` : ""}
         </footer>
       </div>
     `;
@@ -941,9 +983,9 @@ class ReportEditor extends HTMLElement {
   // ---------- Storage ----------
   _storageKey() {
     if (this.sessionId) {
-      return `repex_report_pages_v1_${this.sessionId}`;
+      return `repex_report_sections_v1_${this.sessionId}`;
     }
-    return "repex_report_pages_v1";
+    return "repex_report_sections_v1";
   }
 
   _loadPages() {
@@ -957,7 +999,11 @@ class ReportEditor extends HTMLElement {
 
   _savePages(showToast = false) {
     try {
-      localStorage.setItem(this._storageKey(), JSON.stringify({ pages: this.state.pages }));
+      this._syncSectionsFromPages();
+      localStorage.setItem(
+        this._storageKey(),
+        JSON.stringify({ sections: this.state.sections }),
+      );
       this._scheduleServerSave();
       if (showToast) this._toast("Saved");
     } catch {
@@ -975,11 +1021,11 @@ class ReportEditor extends HTMLElement {
     const base = this._apiRoot();
     if (!base || !this.sessionId) return null;
     try {
-      const res = await fetch(`${base}/sessions/${this.sessionId}/pages`);
+      const res = await fetch(`${base}/sessions/${this.sessionId}/sections`);
       if (!res.ok) return null;
       const data = await res.json();
-      if (data && Array.isArray(data.pages)) {
-        return data.pages;
+      if (data && Array.isArray(data.sections)) {
+        return data.sections;
       }
     } catch {}
     return null;
@@ -997,10 +1043,11 @@ class ReportEditor extends HTMLElement {
     const base = this._apiRoot();
     if (!base || !this.sessionId) return;
     try {
-      const res = await fetch(`${base}/sessions/${this.sessionId}/pages`, {
+      this._syncSectionsFromPages();
+      const res = await fetch(`${base}/sessions/${this.sessionId}/sections`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ pages: this.state.pages }),
+        body: JSON.stringify({ sections: this.state.sections }),
       });
       if (!res.ok) {
         throw new Error("Failed");
@@ -1018,11 +1065,160 @@ class ReportEditor extends HTMLElement {
     setTimeout(() => el.remove(), 1200);
   }
 
+  _sectionId() {
+    return `sec_${Math.random().toString(16).slice(2)}_${Date.now().toString(16)}`;
+  }
+
+  _ratingBadge(value, scale) {
+    const raw = String(value || "").trim();
+    if (!raw) {
+      return { text: "-", className: "bg-gray-50 text-gray-700 border-gray-200" };
+    }
+    const match = raw.match(/^([0-9]|[xXmM])/);
+    const key = match ? match[1].toUpperCase() : raw.split("-")[0].trim().toUpperCase();
+    const tone = scale[key];
+    if (!tone) {
+      return { text: raw, className: "bg-gray-50 text-gray-700 border-gray-200" };
+    }
+    return {
+      text: `${key} - ${tone.label}`,
+      className: `${tone.bg} ${tone.text} ${tone.border}`,
+    };
+  }
+
+  _buildPhotoContinuation(source, photoIds) {
+    return {
+      items: [],
+      template: source.template ? { ...source.template } : undefined,
+      photo_ids: photoIds,
+      photo_order_locked: source.photo_order_locked,
+      variant: "photos",
+    };
+  }
+
+  _splitPagePhotos(page) {
+    const normalized = {
+      ...page,
+      items: Array.isArray(page.items) ? page.items : [],
+    };
+    if (normalized.blank) return [normalized];
+
+    const photoIds = Array.isArray(normalized.photo_ids)
+      ? normalized.photo_ids.filter(Boolean)
+      : [];
+    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" };
+        }
+        return this._buildPhotoContinuation(normalized, chunk);
+      });
+    }
+
+    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];
+  }
+
+  _normalizeSections(sections) {
+    const source = Array.isArray(sections) ? sections : [];
+    if (!source.length) {
+      return [{ id: this._sectionId(), title: "Section 1", pages: [{ items: [] }] }];
+    }
+    return source.map((section) => {
+      const basePages =
+        Array.isArray(section.pages) && section.pages.length
+          ? section.pages
+          : [{ items: [] }];
+      const normalizedPages = basePages.flatMap((page) => this._splitPagePhotos(page));
+      return {
+        id: section.id || this._sectionId(),
+        title: section.title ?? "Section",
+        pages: normalizedPages.length ? normalizedPages : [{ items: [] }],
+      };
+    });
+  }
+
+  _rebuildFlatPages() {
+    this._indexMap = [];
+    this.state.pages = [];
+    const sections = Array.isArray(this.state.sections) ? this.state.sections : [];
+    sections.forEach((section, sectionIndex) => {
+      const pages = Array.isArray(section.pages) && section.pages.length
+        ? section.pages
+        : [{ items: [] }];
+      section.pages = pages;
+      pages.forEach((page, pageIndex) => {
+        this.state.pages.push(page);
+        this._indexMap.push({ sectionIndex, pageIndex });
+      });
+    });
+    if (!this.state.pages.length) {
+      this.state.sections = [
+        { id: this._sectionId(), title: "Section 1", pages: [{ items: [] }] },
+      ];
+      this._rebuildFlatPages();
+    }
+  }
+
+  _setSections(sections) {
+    this.state.sections = this._normalizeSections(sections);
+    this._rebuildFlatPages();
+  }
+
+  _syncSectionsFromPages() {
+    if (!this._indexMap || this._indexMap.length !== this.state.pages.length) {
+      this._rebuildFlatPages();
+    }
+    const sections = this.state.sections.map((section) => ({
+      ...section,
+      pages: Array.isArray(section.pages) ? [...section.pages] : [{ items: [] }],
+    }));
+    this.state.pages.forEach((page, idx) => {
+      const map = this._indexMap[idx];
+      if (!map) return;
+      if (!sections[map.sectionIndex]) return;
+      sections[map.sectionIndex].pages[map.pageIndex] = page;
+    });
+    this.state.sections = sections;
+  }
+
+  _getActiveSectionLabel() {
+    const map = this._indexMap?.[this.state.activePage];
+    if (!map || !this.state.sections?.[map.sectionIndex]) return "";
+    const section = this.state.sections[map.sectionIndex] || {};
+    const title = section.title || "";
+    if (title) return `Section ${map.sectionIndex + 1} - ${title}`;
+    return `Section ${map.sectionIndex + 1}`;
+  }
+
   // ---------- Page list ----------
   renderPageList() {
     this.$pageList.innerHTML = "";
 
     this.state.pages.forEach((_, idx) => {
+      const map = this._indexMap?.[idx] || { sectionIndex: 0, pageIndex: idx };
+      const section =
+        (this.state.sections && this.state.sections[map.sectionIndex]) || {};
+      const sectionLabel =
+        section.title || `Section ${map.sectionIndex + 1}`;
       const active = idx === this.state.activePage;
 
       const row = document.createElement("div");
@@ -1037,7 +1233,10 @@ class ReportEditor extends HTMLElement {
           : "border-gray-200 bg-white text-gray-800 hover:bg-gray-50");
       btn.innerHTML = `
         <div class="flex items-center justify-between">
-          <div class="text-sm font-semibold">Page ${idx + 1}</div>
+          <div>
+            <div class="text-[11px] ${active ? "text-white/80" : "text-gray-500"}">${sectionLabel}</div>
+            <div class="text-sm font-semibold">Page ${map.pageIndex + 1}</div>
+          </div>
           <div class="text-xs ${active ? "text-white/80" : "text-gray-500"}">${this.state.pages[idx].items.length} items</div>
         </div>
       `;
@@ -1069,8 +1268,26 @@ class ReportEditor extends HTMLElement {
 
   addPage() {
     this._pushUndoSnapshot();
-    this.state.pages.push({ items: [] });
-    this.state.activePage = this.state.pages.length - 1;
+    const map = this._indexMap?.[this.state.activePage] || {
+      sectionIndex: 0,
+      pageIndex: this.state.activePage,
+    };
+    if (!this.state.sections[map.sectionIndex]) {
+      this.state.sections = [
+        { id: this._sectionId(), title: "Section 1", pages: [{ items: [] }] },
+      ];
+    }
+    const section = this.state.sections[map.sectionIndex];
+    section.pages = section.pages || [];
+    section.pages.splice(map.pageIndex + 1, 0, { items: [] });
+    this._setSections(this.state.sections);
+    const newIndex = this._indexMap.findIndex(
+      (entry) =>
+        entry.sectionIndex === map.sectionIndex &&
+        entry.pageIndex === map.pageIndex + 1
+    );
+    this.state.activePage =
+      newIndex >= 0 ? newIndex : this.state.pages.length - 1;
     this.state.selectedId = null;
     this._savePages();
     this.updateAll();
@@ -1081,7 +1298,14 @@ class ReportEditor extends HTMLElement {
     const idx = typeof index === "number" ? index : this.state.activePage;
     if (idx < 0 || idx >= this.state.pages.length) return;
 
-    this.state.pages.splice(idx, 1);
+    const map = this._indexMap?.[idx];
+    if (!map || !this.state.sections[map.sectionIndex]) return;
+    const section = this.state.sections[map.sectionIndex];
+    const pages = section.pages || [];
+    if (pages.length <= 1) return;
+    pages.splice(map.pageIndex, 1);
+    section.pages = pages.length ? pages : [{ items: [] }];
+    this._setSections(this.state.sections);
     if (this.state.activePage >= this.state.pages.length) {
       this.state.activePage = this.state.pages.length - 1;
     } else if (this.state.activePage > idx) {
@@ -1096,8 +1320,16 @@ class ReportEditor extends HTMLElement {
 
   _ensurePageCount(count) {
     const target = Math.max(Number(count) || 1, 1);
+    if (!this.state.sections || !this.state.sections.length) {
+      this.state.sections = [
+        { id: this._sectionId(), title: "Section 1", pages: [{ items: [] }] },
+      ];
+    }
     while (this.state.pages.length < target) {
-      this.state.pages.push({ items: [] });
+      const lastSection = this.state.sections[this.state.sections.length - 1];
+      lastSection.pages = lastSection.pages || [];
+      lastSection.pages.push({ items: [] });
+      this._setSections(this.state.sections);
     }
   }
 
@@ -1124,18 +1356,21 @@ class ReportEditor extends HTMLElement {
 
     const template = document.createElement("div");
     template.className = "absolute inset-0";
-    template.style.position = "absolute";
-    template.style.inset = "0";
+    const active = this.activePage || {};
     let templateHtml = "";
-    try {
-      templateHtml = this._templateMarkup();
-    } catch (err) {
-      console.error("Template render failed", err);
-      templateHtml = `
-        <div class="p-4 text-sm text-red-600">
-          Template failed to render. Check console for details.
-        </div>
-      `;
+    if (active.blank) {
+      templateHtml = `<div class="w-full h-full bg-white"></div>`;
+    } else {
+      try {
+        templateHtml = this._templateMarkup();
+      } catch (err) {
+        console.error("Template render failed", err);
+        templateHtml = `
+          <div class="p-4 text-sm text-red-600">
+            Template failed to render. Check console for details.
+          </div>
+        `;
+      }
     }
     template.innerHTML = `
       <div style="width:${this.BASE_W}px; height:${this.BASE_H}px; transform: scale(${scale}); transform-origin: top left;">
@@ -1143,7 +1378,9 @@ class ReportEditor extends HTMLElement {
       </div>
     `;
     this.$canvas.appendChild(template);
-    this._bindTemplateFields();
+    if (!active.blank) {
+      this._bindTemplateFields();
+    }
 
     const page = this.activePage || { items: [] };
     if (!Array.isArray(page.items)) page.items = [];

frontend/src/index.css

@@ -67,6 +67,10 @@ report-editor[data-mode="page"] [data-shell] {
   box-shadow: none;
 }
 
+summary::-webkit-details-marker {
+  display: none;
+}
+
 @media print {
   @page {
     size: A4;

frontend/src/lib/sections.ts

@@ -0,0 +1,165 @@
+import type { JobsheetSection, Page } from "../types/session";
+
+export type FlatPage = {
+  sectionId: string;
+  sectionIndex: number;
+  sectionTitle?: string;
+  pageIndex: number;
+  page: Page;
+  flatIndex: number;
+};
+
+const MAX_PHOTOS_PER_PAGE = 2;
+
+function cloneTemplate(template?: Page["template"]): Page["template"] {
+  if (!template) return undefined;
+  return { ...template };
+}
+
+function normalizePhotoIds(photoIds?: string[]): string[] {
+  if (!Array.isArray(photoIds)) return [];
+  return photoIds.filter((value) => Boolean(value));
+}
+
+function buildPhotoContinuation(source: Page, photoIds: string[]): Page {
+  return {
+    items: [],
+    template: cloneTemplate(source.template),
+    photo_ids: photoIds,
+    photo_order_locked: source.photo_order_locked,
+    variant: "photos",
+  };
+}
+
+function splitPagePhotos(page: Page): Page[] {
+  const items = Array.isArray(page.items) ? page.items : [];
+  const normalized: Page = { ...page, items };
+
+  if (normalized.blank) {
+    return [normalized];
+  }
+
+  const photoIds = normalizePhotoIds(normalized.photo_ids);
+  if (!photoIds.length) {
+    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];
+}
+
+export function ensureSections(sections?: JobsheetSection[]): JobsheetSection[] {
+  if (sections && sections.length) {
+    return sections.map((section, index) => {
+      const basePages = section.pages?.length ? section.pages : [{ items: [] }];
+      const normalizedPages = basePages.flatMap((page) => splitPagePhotos(page));
+      return {
+        id: section.id,
+        title: section.title ?? "Section",
+        pages: normalizedPages.length ? normalizedPages : [{ items: [] }],
+      };
+    });
+  }
+  return [
+    {
+      id: crypto.randomUUID(),
+      title: "Section 1",
+      pages: [{ items: [] }],
+    },
+  ];
+}
+
+export function flattenSections(sections: JobsheetSection[]): FlatPage[] {
+  const result: FlatPage[] = [];
+  sections.forEach((section, sectionIndex) => {
+    const pages = section.pages ?? [];
+    pages.forEach((page, pageIndex) => {
+      result.push({
+        sectionId: section.id,
+        sectionIndex,
+        sectionTitle: section.title ?? `Section ${sectionIndex + 1}`,
+        pageIndex,
+        page,
+        flatIndex: result.length,
+      });
+    });
+  });
+  return result;
+}
+
+export function replacePage(
+  sections: JobsheetSection[],
+  sectionIndex: number,
+  pageIndex: number,
+  nextPage: Page,
+): JobsheetSection[] {
+  const next = sections.map((section, sIdx) => {
+    if (sIdx !== sectionIndex) return section;
+    const nextPages = [...(section.pages ?? [])];
+    nextPages[pageIndex] = nextPage;
+    return { ...section, pages: nextPages };
+  });
+  return ensureSections(next);
+}
+
+export function insertPage(
+  sections: JobsheetSection[],
+  sectionIndex: number,
+  pageIndex: number,
+  page: Page,
+): JobsheetSection[] {
+  const next = sections.map((section, sIdx) => {
+    if (sIdx !== sectionIndex) return section;
+    const nextPages = [...(section.pages ?? [])];
+    const safeIndex = Math.max(0, Math.min(pageIndex, nextPages.length));
+    nextPages.splice(safeIndex, 0, page);
+    return { ...section, pages: nextPages };
+  });
+  return ensureSections(next);
+}
+
+export function removePage(
+  sections: JobsheetSection[],
+  sectionIndex: number,
+  pageIndex: number,
+): JobsheetSection[] {
+  const next = sections.map((section, sIdx) => {
+    if (sIdx !== sectionIndex) return section;
+    const nextPages = [...(section.pages ?? [])];
+    if (nextPages.length <= 1) return section;
+    nextPages.splice(pageIndex, 1);
+    return { ...section, pages: nextPages.length ? nextPages : [{ items: [] }] };
+  });
+  return ensureSections(next);
+}

frontend/src/pages/EditLayoutsPage.tsx

@@ -15,11 +15,13 @@ import {
 
 import { putJson, request } from "../lib/api";
 import { BASE_W } from "../lib/report";
+import { ensureSections, flattenSections } from "../lib/sections";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
-import type { Page, Session } from "../types/session";
+import type { JobsheetSection, Session } from "../types/session";
 import { PageFooter } from "../components/PageFooter";
 import { PageHeader } from "../components/PageHeader";
 import { PageShell } from "../components/PageShell";
+import { InfoMenu } from "../components/InfoMenu";
 import { ReportPageCanvas } from "../components/ReportPageCanvas";
 
 export default function EditLayoutsPage() {
@@ -28,7 +30,7 @@ export default function EditLayoutsPage() {
   const sessionQuery = buildSessionQuery(sessionId);
 
   const [session, setSession] = useState<Session | null>(null);
-  const [pages, setPages] = useState<Page[]>([]);
+  const [sections, setSections] = useState<JobsheetSection[]>([]);
   const [status, setStatus] = useState("");
   const [isSaving, setIsSaving] = useState(false);
   const canModify = Boolean(sessionId) && !isSaving;
@@ -43,11 +45,10 @@ export default function EditLayoutsPage() {
       try {
         const data = await request<Session>(`/sessions/${sessionId}`);
         setSession(data);
-        const pageResp = await request<{ pages: Page[] }>(
-          `/sessions/${sessionId}/pages`,
+        const sectionResp = await request<{ sections: JobsheetSection[] }>(
+          `/sessions/${sessionId}/sections`,
         );
-        const loaded = Array.isArray(pageResp.pages) ? pageResp.pages : [];
-        setPages(loaded.length ? loaded : [{ items: [] }]);
+        setSections(ensureSections(sectionResp.sections));
       } catch (err) {
         const message =
           err instanceof Error ? err.message : "Failed to load session.";
@@ -57,35 +58,49 @@ export default function EditLayoutsPage() {
     load();
   }, [sessionId]);
 
-  const totalPages = useMemo(() => Math.max(1, pages.length), [pages.length]);
+  const flatPages = useMemo(
+    () => flattenSections(ensureSections(sections)),
+    [sections],
+  );
+  const totalPages = useMemo(
+    () => Math.max(1, flatPages.length),
+    [flatPages.length],
+  );
   const previewWidth = 220;
   const previewScale = previewWidth / BASE_W;
 
-  function hasExplicitPhotos(source: Page[]) {
-    return source.some((page) => (page.photo_ids ?? []).length > 0);
+  function hasExplicitPhotos(source: JobsheetSection[]) {
+    return source.some((section) =>
+      (section.pages ?? []).some((page) => (page.photo_ids ?? []).length > 0),
+    );
   }
 
-  function flattenPhotoIds(source: Page[]) {
+  function flattenPhotoIds(source: JobsheetSection[]) {
     const seen = new Set<string>();
     const result: string[] = [];
-    source.forEach((page) => {
-      (page.photo_ids ?? []).forEach((photoId) => {
-        if (!seen.has(photoId)) {
-          seen.add(photoId);
-          result.push(photoId);
-        }
+    source.forEach((section) => {
+      (section.pages ?? []).forEach((page) => {
+        (page.photo_ids ?? []).forEach((photoId) => {
+          if (!seen.has(photoId)) {
+            seen.add(photoId);
+            result.push(photoId);
+          }
+        });
       });
     });
     return result;
   }
 
-  async function saveLayout(next: Page[], nextSelectedIds?: string[]) {
+  async function saveLayout(next: JobsheetSection[], nextSelectedIds?: string[]) {
     if (!sessionId) return;
     setIsSaving(true);
     setStatus("Saving layout changes...");
     try {
       const requests: Promise<unknown>[] = [
-        putJson<{ pages: Page[] }>(`/sessions/${sessionId}/pages`, { pages: next }),
+        putJson<{ sections: JobsheetSection[] }>(
+          `/sessions/${sessionId}/sections`,
+          { sections: next },
+        ),
       ];
       if (nextSelectedIds !== undefined) {
         requests.push(
@@ -95,10 +110,11 @@ export default function EditLayoutsPage() {
         );
       }
       const [pagesResp, sessionResp] = await Promise.all(requests);
-      const updatedPages = (pagesResp as { pages?: Page[] }).pages ?? next;
+      const updatedSections =
+        (pagesResp as { sections?: JobsheetSection[] }).sections ?? next;
       const updatedSession = sessionResp as Session | undefined;
-      const updated = Array.isArray(updatedPages) ? updatedPages : next;
-      setPages(updated.length ? updated : [{ items: [] }]);
+      const updated = ensureSections(updatedSections);
+      setSections(updated);
       if (updatedSession) {
         setSession(updatedSession);
       }
@@ -112,14 +128,44 @@ export default function EditLayoutsPage() {
     }
   }
 
-  async function handleAddPage() {
-    const next = [...pages, { items: [] }];
+  async function handleAddSection() {
+    const next = [
+      ...sections,
+      {
+        id: crypto.randomUUID(),
+        title: `Section ${sections.length + 1}`,
+        pages: [{ items: [] }],
+      },
+    ];
+    await saveLayout(next);
+  }
+
+  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) {
+      const nextSelected = hasExplicitPhotos(next)
+        ? flattenPhotoIds(next)
+        : session.selected_photo_ids ?? [];
+      await saveLayout(next, nextSelected);
+      return;
+    }
     await saveLayout(next);
   }
 
-  async function handleRemovePage(index: number) {
-    if (pages.length <= 1) return;
-    const next = pages.filter((_, idx) => idx !== index);
+  async function handleRemovePage(sectionIndex: number, pageIndex: number) {
+    const next = sections.map((section, idx) => {
+      if (idx !== sectionIndex) return section;
+      const pages = [...(section.pages ?? [])];
+      if (pages.length <= 1) return section;
+      pages.splice(pageIndex, 1);
+      return { ...section, pages: pages.length ? pages : [{ items: [] }] };
+    });
     if (session) {
       const nextSelected = hasExplicitPhotos(next)
         ? flattenPhotoIds(next)
@@ -130,11 +176,15 @@ export default function EditLayoutsPage() {
     await saveLayout(next);
   }
 
-  async function handleMovePage(index: number, direction: number) {
-    const target = index + direction;
-    if (target < 0 || target >= pages.length) return;
-    const next = [...pages];
-    [next[index], next[target]] = [next[target], next[index]];
+  async function handleMovePage(sectionIndex: number, pageIndex: number, direction: number) {
+    const next = sections.map((section, idx) => {
+      if (idx !== sectionIndex) return section;
+      const pages = [...(section.pages ?? [])];
+      const target = pageIndex + direction;
+      if (target < 0 || target >= pages.length) return section;
+      [pages[pageIndex], pages[target]] = [pages[target], pages[pageIndex]];
+      return { ...section, pages };
+    });
     if (session) {
       const nextSelected = hasExplicitPhotos(next)
         ? flattenPhotoIds(next)
@@ -151,13 +201,16 @@ export default function EditLayoutsPage() {
         title="RepEx - Report Express"
         subtitle="Edit Page Layouts"
         right={
-          <Link
-            to={`/report-viewer${sessionQuery}`}
-            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
-          >
-            <ArrowLeft className="h-4 w-4" />
-            Back
-          </Link>
+          <div className="flex items-center gap-2">
+            <Link
+              to={`/report-viewer${sessionQuery}`}
+              className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back
+            </Link>
+            <InfoMenu sessionQuery={sessionQuery} />
+          </div>
         }
       />
 
@@ -210,79 +263,124 @@ export default function EditLayoutsPage() {
               Add, remove, or reorder pages, then return to the report viewer to edit content.
             </p>
           </div>
-          <button
-            type="button"
-            onClick={handleAddPage}
-            disabled={!canModify}
-            className="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            <Plus className="h-4 w-4" />
-            Add page
-          </button>
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={handleAddSection}
+              disabled={!canModify}
+              className="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <Plus className="h-4 w-4" />
+              Add section
+            </button>
+          </div>
         </div>
         {status ? (
           <p className="text-sm text-gray-600 mt-3">{status}</p>
         ) : null}
       </section>
 
-      <section className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {pages.map((page, index) => (
-          <div
-            key={`page-${index + 1}`}
-            className="rounded-lg border border-gray-200 bg-white p-3"
-          >
-            <div className="flex items-center justify-between mb-2">
-              <div>
-                <div className="text-sm font-semibold text-gray-900">
-                  Page {index + 1}
-                </div>
-                <div className="text-xs text-gray-500">
-                  {page.items?.length ?? 0} items
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  onClick={() => handleMovePage(index, -1)}
-                  disabled={index === 0 || !canModify}
-                  className="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-1.5 text-gray-600 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
-                  aria-label="Move page up"
-                >
-                  <ChevronUp className="h-3.5 w-3.5" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handleMovePage(index, 1)}
-                  disabled={index === pages.length - 1 || !canModify}
-                  className="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-1.5 text-gray-600 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
-                  aria-label="Move page down"
-                >
-                  <ChevronDown className="h-3.5 w-3.5" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handleRemovePage(index)}
-                  disabled={pages.length <= 1 || !canModify}
-                  className="inline-flex items-center gap-1 rounded-lg border border-red-200 bg-red-50 px-2.5 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-100 transition disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                  Remove
-                </button>
+      <section className="space-y-6">
+        {sections.map((section, sectionIndex) => (
+          <div key={section.id} className="rounded-lg border border-gray-200 bg-white p-4">
+          <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
+            <div>
+              <div className="text-xs font-semibold text-gray-500">Section {sectionIndex + 1}</div>
+              <input
+                type="text"
+                value={section.title ?? ""}
+                onChange={(event) =>
+                  setSections((prev) =>
+                    prev.map((item, idx) =>
+                      idx === sectionIndex ? { ...item, title: event.target.value } : item,
+                    ),
+                  )
+                }
+                placeholder={`Section ${sectionIndex + 1}`}
+                className="mt-1 w-60 rounded-md border border-gray-200 px-2 py-1 text-sm font-semibold text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200"
+              />
+              <div className="text-xs text-gray-500">
+                {section.pages?.length ?? 0} pages
               </div>
             </div>
+              <button
+                type="button"
+                onClick={() => handleAddPage(sectionIndex)}
+                disabled={!canModify}
+                className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <Plus className="h-4 w-4" />
+                Add page
+              </button>
+            </div>
 
-            <div
-              className="mx-auto overflow-hidden rounded-lg border border-gray-200 bg-white"
-              style={{ width: previewWidth, aspectRatio: "210 / 297" }}
-            >
-              <ReportPageCanvas
-                session={session}
-                page={page}
-                pageIndex={index}
-                pageCount={totalPages}
-                scale={previewScale}
-                template={page?.template}
-              />
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {(section.pages ?? []).map((page, pageIndex) => (
+                <div
+                  key={`${section.id}-page-${pageIndex}`}
+                  className="rounded-lg border border-gray-200 bg-white p-3"
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <div>
+                      <div className="text-sm font-semibold text-gray-900">
+                        Page {pageIndex + 1}
+                      </div>
+                      <div className="text-xs text-gray-500">
+                        {page.items?.length ?? 0} items
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={() => handleMovePage(sectionIndex, pageIndex, -1)}
+                        disabled={pageIndex === 0 || !canModify}
+                        className="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-1.5 text-gray-600 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                        aria-label="Move page up"
+                      >
+                        <ChevronUp className="h-3.5 w-3.5" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleMovePage(sectionIndex, pageIndex, 1)}
+                        disabled={pageIndex === (section.pages?.length ?? 1) - 1 || !canModify}
+                        className="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-1.5 text-gray-600 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                        aria-label="Move page down"
+                      >
+                        <ChevronDown className="h-3.5 w-3.5" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleRemovePage(sectionIndex, pageIndex)}
+                        disabled={(section.pages?.length ?? 1) <= 1 || !canModify}
+                        className="inline-flex items-center gap-1 rounded-lg border border-red-200 bg-red-50 px-2.5 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-100 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                        Remove
+                      </button>
+                    </div>
+                  </div>
+
+                  <div
+                    className="mx-auto rounded-lg border border-gray-200 bg-white"
+                    style={{ width: previewWidth }}
+                  >
+                    <ReportPageCanvas
+                      session={session}
+                      page={page}
+                      pageIndex={pageIndex}
+                      pageCount={totalPages}
+                      scale={previewScale}
+                      template={page?.template}
+                      sectionLabel={
+                        section.title
+                          ? `Section ${sectionIndex + 1} - ${section.title}`
+                          : `Section ${sectionIndex + 1}`
+                      }
+                      adaptive
+                    />
+                  </div>
+                </div>
+              ))}
             </div>
           </div>
         ))}

frontend/src/pages/EditReportPage.tsx

@@ -3,11 +3,13 @@ import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { ArrowLeft, Download, Edit3, Grid, Layout, Table } from "react-feather";
 
 import { API_BASE, request } from "../lib/api";
+import { ensureSections, flattenSections } from "../lib/sections";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
-import type { Session } from "../types/session";
+import type { JobsheetSection, Session } from "../types/session";
 import { PageFooter } from "../components/PageFooter";
 import { PageHeader } from "../components/PageHeader";
 import { PageShell } from "../components/PageShell";
+import { InfoMenu } from "../components/InfoMenu";
 
 export default function EditReportPage() {
   const [searchParams] = useSearchParams();
@@ -38,13 +40,16 @@ export default function EditReportPage() {
     setStoredSessionId(sessionId);
     async function load() {
       try {
-        const [data, pageResp] = await Promise.all([
+        const [data, sectionResp] = await Promise.all([
           request<Session>(`/sessions/${sessionId}`),
-          request<{ pages: { items: unknown[] }[] }>(`/sessions/${sessionId}/pages`),
+          request<{ sections: JobsheetSection[] }>(
+            `/sessions/${sessionId}/sections`,
+          ),
         ]);
         setSession(data);
-        const loaded = Array.isArray(pageResp.pages) ? pageResp.pages.length : 0;
-        setPageCount(loaded || null);
+        const loadedSections = ensureSections(sectionResp.sections);
+        const flatPages = flattenSections(loadedSections);
+        setPageCount(flatPages.length || null);
       } catch (err) {
         const message =
           err instanceof Error ? err.message : "Failed to load session.";
@@ -87,13 +92,16 @@ export default function EditReportPage() {
         title="RepEx - Report Express"
         subtitle="Edit Report"
         right={
-          <Link
-            to={`/report-viewer${sessionQuery}`}
-            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
-          >
-            <ArrowLeft className="h-4 w-4" />
-            Back
-          </Link>
+          <div className="flex items-center gap-2">
+            <Link
+              to={`/report-viewer${sessionQuery}`}
+              className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back
+            </Link>
+            <InfoMenu sessionQuery={sessionQuery} />
+          </div>
         }
       />
 

frontend/src/pages/ExportPage.tsx

@@ -4,11 +4,13 @@ import { ArrowLeft, Download, Edit3, Grid, Layout, Table } from "react-feather";
 
 import { API_BASE, request } from "../lib/api";
 import { BASE_W } from "../lib/report";
+import { ensureSections, flattenSections } from "../lib/sections";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
-import type { Page, Session } from "../types/session";
+import type { JobsheetSection, Session } from "../types/session";
 import { PageFooter } from "../components/PageFooter";
 import { PageHeader } from "../components/PageHeader";
 import { PageShell } from "../components/PageShell";
+import { InfoMenu } from "../components/InfoMenu";
 import { ReportPageCanvas } from "../components/ReportPageCanvas";
 
 export default function ExportPage() {
@@ -17,7 +19,7 @@ export default function ExportPage() {
   const sessionQuery = buildSessionQuery(sessionId);
 
   const [session, setSession] = useState<Session | null>(null);
-  const [pages, setPages] = useState<Page[]>([]);
+  const [sections, setSections] = useState<JobsheetSection[]>([]);
   const [error, setError] = useState("");
 
   const [incPages, setIncPages] = useState(true);
@@ -37,10 +39,10 @@ export default function ExportPage() {
       try {
         const data = await request<Session>(`/sessions/${sessionId}`);
         setSession(data);
-        const pageResp = await request<{ pages: Page[] }>(
-          `/sessions/${sessionId}/pages`,
+        const sectionResp = await request<{ sections: JobsheetSection[] }>(
+          `/sessions/${sessionId}/sections`,
         );
-        setPages(Array.isArray(pageResp.pages) ? pageResp.pages : []);
+        setSections(ensureSections(sectionResp.sections));
       } catch (err) {
         const message =
           err instanceof Error ? err.message : "Failed to load session.";
@@ -65,22 +67,26 @@ export default function ExportPage() {
     };
   }, []);
 
+  const flatPages = useMemo(
+    () => flattenSections(ensureSections(sections)),
+    [sections],
+  );
   const totals = useMemo(() => {
-    const totalItems = pages.reduce(
-      (acc, page) => acc + (page?.items?.length ?? 0),
+    const totalItems = flatPages.reduce(
+      (acc, entry) => acc + (entry.page?.items?.length ?? 0),
       0,
     );
     return {
-      pages: pages.length,
+      pages: flatPages.length,
       items: totalItems,
       photos: session?.selected_photo_ids?.length ?? 0,
       docs: session?.uploads?.documents?.length ?? 0,
       data: session?.uploads?.data_files?.length ?? 0,
     };
-  }, [pages, session]);
+  }, [flatPages, session]);
 
   const totalPages =
-    pages.length > 0 ? pages.length : Math.max(1, session?.page_count ?? 0);
+    flatPages.length > 0 ? flatPages.length : Math.max(1, session?.page_count ?? 0);
   const serverExportUrl = sessionId
     ? `${API_BASE}/sessions/${sessionId}/export`
     : "";
@@ -90,7 +96,7 @@ export default function ExportPage() {
 
   function downloadJson() {
     const pack: Record<string, unknown> = {};
-    if (incPages) pack.pages = pages;
+    if (incPages) pack.sections = sections;
     if (incLayout) pack.layout = (session as Session | null)?.["layout"] ?? null;
     if (incPayload) pack.payload = session;
     if (incTimestamp) pack.exportedAt = new Date().toISOString();
@@ -117,10 +123,11 @@ export default function ExportPage() {
   return (
     <PageShell className="print:ring-0 print:shadow-none print:rounded-none print:p-0 print:my-0 print:max-w-none">
       <div className="no-print">
-        <PageHeader
-          title="RepEx - Report Express"
-          subtitle="Export"
-          right={
+      <PageHeader
+        title="RepEx - Report Express"
+        subtitle="Export"
+        right={
+          <div className="flex items-center gap-2">
             <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"
@@ -128,8 +135,10 @@ export default function ExportPage() {
               <ArrowLeft className="h-4 w-4" />
               Back
             </Link>
-          }
-        />
+            <InfoMenu sessionQuery={sessionQuery} />
+          </div>
+        }
+      />
       </div>
 
       <nav className="mb-6 no-print" aria-label="Report workflow navigation">
@@ -204,7 +213,7 @@ export default function ExportPage() {
                     checked={incPages}
                     onChange={(event) => setIncPages(event.target.checked)}
                   />
-                  Include pages
+                  Include job sheet sections
                 </label>
                 <label className="inline-flex items-center gap-2 text-sm text-gray-700">
                   <input
@@ -264,9 +273,7 @@ export default function ExportPage() {
                 <div>
                   <div className="text-sm font-semibold text-gray-900">PDF export</div>
                   <div className="text-xs text-gray-500">
-                    Use the browser print dialog to save as PDF
-                    <br />
-                    Generate a PDF using headless Chrome for full-page output
+                    Generate a PDF on the server (ReportLab) or use the browser print dialog.
                   </div>
                 </div>
               </div>
@@ -292,6 +299,7 @@ export default function ExportPage() {
                 </button>
               </div>
             </div>
+
           </div>
         </div>
 
@@ -305,7 +313,7 @@ export default function ExportPage() {
             <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
               <div className="text-xs font-semibold text-gray-600">Pages</div>
               <div className="text-sm font-semibold text-gray-900">
-                {pages.length
+                {flatPages.length
                   ? `${totalPages} pages - ${totals.items} total items`
                   : "No saved pages yet"}
               </div>
@@ -357,16 +365,23 @@ export default function ExportPage() {
             >
               <div
                 ref={index === 0 ? previewRef : undefined}
-                className="relative overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm print:border-0 print:rounded-none print:shadow-none"
-                style={{ aspectRatio: "210 / 297" }}
+                className="relative rounded-xl border border-gray-200 bg-white shadow-sm print:border-0 print:rounded-none print:shadow-none"
               >
                 <ReportPageCanvas
                   session={session}
-                  page={pages[index] ?? { items: [] }}
+                  page={flatPages[index]?.page ?? { items: [] }}
                   pageIndex={index}
                   pageCount={totalPages}
                   scale={previewScale}
-                  template={pages[index]?.template}
+                  template={flatPages[index]?.page?.template}
+                  sectionLabel={
+                    flatPages[index]
+                      ? flatPages[index].sectionTitle
+                        ? `Section ${flatPages[index].sectionIndex + 1} - ${flatPages[index].sectionTitle}`
+                        : `Section ${flatPages[index].sectionIndex + 1}`
+                      : ""
+                  }
+                  adaptive
                 />
               </div>
             </div>

frontend/src/pages/InputDataPage.tsx

@@ -4,11 +4,19 @@ import { ArrowLeft, Download, Edit3, Grid, Layout, Save, Table } from "react-fea
 
 import { API_BASE, postForm, putJson, request } from "../lib/api";
 import { formatDocNumber } from "../lib/report";
+import {
+  ensureSections,
+  flattenSections,
+  insertPage,
+  removePage,
+  replacePage,
+} from "../lib/sections";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
-import type { Page, Session, TemplateFields } from "../types/session";
+import type { JobsheetSection, Session, TemplateFields } from "../types/session";
 import { PageFooter } from "../components/PageFooter";
 import { PageHeader } from "../components/PageHeader";
 import { PageShell } from "../components/PageShell";
+import { InfoMenu } from "../components/InfoMenu";
 
 type FieldDef = {
   key: keyof TemplateFields;
@@ -44,12 +52,14 @@ export default function InputDataPage() {
   const sessionQuery = buildSessionQuery(sessionId);
 
   const [session, setSession] = useState<Session | null>(null);
-  const [pages, setPages] = useState<Page[]>([]);
+  const [sections, setSections] = useState<JobsheetSection[]>([]);
   const [status, setStatus] = useState("");
   const [isSaving, setIsSaving] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
   const [copySourceIndex, setCopySourceIndex] = useState(0);
   const [copyTargets, setCopyTargets] = useState("");
+  const [addSectionId, setAddSectionId] = useState<string>("");
+  const [sectionsCollapsed, setSectionsCollapsed] = useState(true);
   const [showGeneralColumns, setShowGeneralColumns] = useState(false);
   const [generalDirty, setGeneralDirty] = useState(false);
   const [generalTemplate, setGeneralTemplate] = useState<TemplateFields>({});
@@ -71,11 +81,10 @@ export default function InputDataPage() {
       try {
         const data = await request<Session>(`/sessions/${sessionId}`);
         setSession(data);
-        const pageResp = await request<{ pages: Page[] }>(
-          `/sessions/${sessionId}/pages`,
+        const sectionResp = await request<{ sections: JobsheetSection[] }>(
+          `/sessions/${sessionId}/sections`,
         );
-        const loaded = Array.isArray(pageResp.pages) ? pageResp.pages : [];
-        setPages(loaded.length ? loaded : [{ items: [] }]);
+        setSections(ensureSections(sectionResp.sections));
       } catch (err) {
         const message =
           err instanceof Error ? err.message : "Failed to load session.";
@@ -89,39 +98,36 @@ export default function InputDataPage() {
     if (!sessionId) return;
     const data = await request<Session>(`/sessions/${sessionId}`);
     setSession(data);
-    const pageResp = await request<{ pages: Page[] }>(
-      `/sessions/${sessionId}/pages`,
+    const sectionResp = await request<{ sections: JobsheetSection[] }>(
+      `/sessions/${sessionId}/sections`,
     );
-    const loaded = Array.isArray(pageResp.pages) ? pageResp.pages : [];
-    setPages(loaded.length ? loaded : [{ items: [] }]);
+    setSections(ensureSections(sectionResp.sections));
   }
 
+  const flatPages = useMemo(
+    () => flattenSections(ensureSections(sections)),
+    [sections],
+  );
   const totalPages = useMemo(() => {
-    if (pages.length > 0) return pages.length;
+    if (flatPages.length > 0) return flatPages.length;
     return Math.max(1, session?.page_count ?? 0);
-  }, [pages.length, session?.page_count]);
+  }, [flatPages.length, session?.page_count]);
 
   useEffect(() => {
-    if (!sessionId) return;
-    if (pages.length >= totalPages) return;
-    setPages((prev) => {
-      const next = [...prev];
-      while (next.length < totalPages) {
-        next.push({ items: [] });
-      }
-      return next;
-    });
-  }, [pages.length, sessionId, totalPages]);
+    if (copySourceIndex >= flatPages.length) {
+      setCopySourceIndex(Math.max(0, flatPages.length - 1));
+    }
+  }, [copySourceIndex, flatPages.length]);
 
   useEffect(() => {
-    if (copySourceIndex >= pages.length) {
-      setCopySourceIndex(Math.max(0, pages.length - 1));
+    if (!addSectionId && sections.length > 0) {
+      setAddSectionId(sections[0].id);
     }
-  }, [copySourceIndex, pages.length]);
+  }, [addSectionId, sections]);
 
   useEffect(() => {
     if (generalDirty) return;
-    const source = pages[0]?.template ?? {};
+    const source = flatPages[0]?.page?.template ?? {};
     const next: TemplateFields = {};
     GENERAL_FIELDS.forEach((field) => {
       const value = source[field.key] ?? getFallbackValue(field.key);
@@ -130,17 +136,21 @@ export default function InputDataPage() {
       }
     });
     setGeneralTemplate(next);
-  }, [generalDirty, pages, session]);
-
-  function updateField(pageIndex: number, key: keyof TemplateFields, value: string) {
-    setPages((prev) =>
-      prev.map((page, idx) => {
-        if (idx !== pageIndex) return page;
-        const template = { ...(page.template ?? {}) };
-        template[key] = value;
-        return { ...page, template };
-      }),
-    );
+  }, [generalDirty, flatPages, session]);
+
+  function updateField(
+    entryIndex: number,
+    key: keyof TemplateFields,
+    value: string,
+  ) {
+    const entry = flatPages[entryIndex];
+    if (!entry) return;
+    setSections((prev) => {
+      const template = { ...(entry.page.template ?? {}) };
+      template[key] = value;
+      const nextPage = { ...entry.page, template };
+      return replacePage(prev, entry.sectionIndex, entry.pageIndex, nextPage);
+    });
   }
 
   function updateGeneralField(key: keyof TemplateFields, value: string) {
@@ -149,52 +159,101 @@ export default function InputDataPage() {
   }
 
   function applyRowToAll(pageIndex: number) {
-    const source = pages[pageIndex]?.template ?? {};
-    setPages((prev) =>
-      prev.map((page) => ({
-        ...page,
-        template: { ...source },
+    const entry = flatPages[pageIndex];
+    if (!entry) return;
+    const source = entry.page.template ?? {};
+    setSections((prev) =>
+      prev.map((section) => ({
+        ...section,
+        pages: (section.pages ?? []).map((page) => ({
+          ...page,
+          template: { ...source },
+        })),
       })),
     );
   }
 
   function applyGeneralToAll() {
-    if (!pages.length) return;
-    setPages((prev) =>
-      prev.map((page) => {
-        const template = { ...(page.template ?? {}) };
-        GENERAL_FIELDS.forEach((field) => {
-          const value = generalTemplate[field.key];
-          if (value !== undefined) {
-            template[field.key] = value;
-          }
-        });
-        return { ...page, template };
-      }),
+    if (!flatPages.length) return;
+    setSections((prev) =>
+      prev.map((section) => ({
+        ...section,
+        pages: (section.pages ?? []).map((page) => {
+          const template = { ...(page.template ?? {}) };
+          GENERAL_FIELDS.forEach((field) => {
+            const value = generalTemplate[field.key];
+            if (value !== undefined) {
+              template[field.key] = value;
+            }
+          });
+          return { ...page, template };
+        }),
+      })),
     );
     setGeneralDirty(false);
     setStatus("Applied general info to all pages.");
   }
 
   function insertPageAt(index: number, templateSource?: TemplateFields) {
-    setPages((prev) => {
-      const next = [...prev];
+    const atEnd = index >= flatPages.length;
+    const entry = flatPages[index] ?? flatPages[flatPages.length - 1];
+    if (!entry) return;
+    setSections((prev) => {
       const fallbackTemplate =
         templateSource ??
-        next[Math.max(0, Math.min(index - 1, next.length - 1))]?.template ??
+        entry.page.template ??
         {};
-      next.splice(index, 0, { items: [], template: { ...fallbackTemplate } });
-      return next;
+      const pageIndex = atEnd ? entry.pageIndex + 1 : entry.pageIndex;
+      return insertPage(prev, entry.sectionIndex, pageIndex, {
+        items: [],
+        template: { ...fallbackTemplate },
+      });
     });
   }
 
+  function addSection() {
+    const baseTemplate = { ...generalTemplate };
+    setSections((prev) => [
+      ...prev,
+      {
+        id: crypto.randomUUID(),
+        title: `Section ${prev.length + 1}`,
+        pages: [{ items: [], template: baseTemplate }],
+      },
+    ]);
+  }
+
+  function updateSectionTitle(sectionId: string, value: string) {
+    setSections((prev) =>
+      prev.map((section) =>
+        section.id === sectionId ? { ...section, title: value } : section,
+      ),
+    );
+  }
+
+  function insertPageIntoSection(sectionId: string, templateSource?: TemplateFields) {
+    const sectionIndex = sections.findIndex((section) => section.id === sectionId);
+    if (sectionIndex === -1) return;
+    const section = sections[sectionIndex];
+    const fallbackTemplate =
+      templateSource ??
+      section.pages?.[section.pages.length - 1]?.template ??
+      generalTemplate ??
+      {};
+    setSections((prev) =>
+      insertPage(prev, sectionIndex, section.pages?.length ?? 0, {
+        items: [],
+        template: { ...fallbackTemplate },
+      }),
+    );
+  }
+
   function removePageAt(index: number) {
-    setPages((prev) => {
-      if (prev.length <= 1) return prev;
-      const next = [...prev];
-      next.splice(index, 1);
-      return next.length ? next : [{ items: [] }];
-    });
+    const entry = flatPages[index];
+    if (!entry) return;
+    setSections((prev) =>
+      removePage(prev, entry.sectionIndex, entry.pageIndex),
+    );
   }
 
   function updatePhotoSelection(pageIndex: number, value: string) {
@@ -202,57 +261,59 @@ export default function InputDataPage() {
   }
 
   function updatePagePhotos(pageIndex: number, nextIds: string[]) {
-    setPages((prev) =>
-      prev.map((page, idx) =>
-        idx === pageIndex ? { ...page, photo_ids: nextIds } : page,
-      ),
-    );
+    const entry = flatPages[pageIndex];
+    if (!entry) return;
+    setSections((prev) => {
+      const nextPage = { ...entry.page, photo_ids: nextIds };
+      return replacePage(prev, entry.sectionIndex, entry.pageIndex, nextPage);
+    });
   }
 
   function setPhotoOrderLocked(pageIndex: number, locked: boolean) {
-    setPages((prev) =>
-      prev.map((page, idx) =>
-        idx === pageIndex ? { ...page, photo_order_locked: locked } : page,
-      ),
-    );
+    const entry = flatPages[pageIndex];
+    if (!entry) return;
+    setSections((prev) => {
+      const nextPage = { ...entry.page, photo_order_locked: locked };
+      return replacePage(prev, entry.sectionIndex, entry.pageIndex, nextPage);
+    });
   }
 
   function movePhoto(pageIndex: number, from: number, to: number) {
-    setPages((prev) =>
-      prev.map((page, idx) => {
-        if (idx !== pageIndex) return page;
-        const ids = [...(page.photo_ids ?? [])];
-        if (from < 0 || from >= ids.length || to < 0 || to >= ids.length) {
-          return page;
-        }
-        const [moved] = ids.splice(from, 1);
-        ids.splice(to, 0, moved);
-        return { ...page, photo_ids: ids };
-      }),
-    );
+    const entry = flatPages[pageIndex];
+    if (!entry) return;
+    setSections((prev) => {
+      const ids = [...(entry.page.photo_ids ?? [])];
+      if (from < 0 || from >= ids.length || to < 0 || to >= ids.length) {
+        return prev;
+      }
+      const [moved] = ids.splice(from, 1);
+      ids.splice(to, 0, moved);
+      const nextPage = { ...entry.page, photo_ids: ids };
+      return replacePage(prev, entry.sectionIndex, entry.pageIndex, nextPage);
+    });
   }
 
   function removePhoto(pageIndex: number, index: number) {
-    setPages((prev) =>
-      prev.map((page, idx) => {
-        if (idx !== pageIndex) return page;
-        const ids = [...(page.photo_ids ?? [])];
-        ids.splice(index, 1);
-        return { ...page, photo_ids: ids };
-      }),
-    );
+    const entry = flatPages[pageIndex];
+    if (!entry) return;
+    setSections((prev) => {
+      const ids = [...(entry.page.photo_ids ?? [])];
+      ids.splice(index, 1);
+      const nextPage = { ...entry.page, photo_ids: ids };
+      return replacePage(prev, entry.sectionIndex, entry.pageIndex, nextPage);
+    });
   }
 
   function addPhotoToPage(pageIndex: number, photoId: string) {
     if (!photoId) return;
-    setPages((prev) =>
-      prev.map((page, idx) => {
-        if (idx !== pageIndex) return page;
-        const ids = [...(page.photo_ids ?? [])];
-        if (!ids.includes(photoId)) ids.push(photoId);
-        return { ...page, photo_ids: ids };
-      }),
-    );
+    const entry = flatPages[pageIndex];
+    if (!entry) return;
+    setSections((prev) => {
+      const ids = [...(entry.page.photo_ids ?? [])];
+      if (!ids.includes(photoId)) ids.push(photoId);
+      const nextPage = { ...entry.page, photo_ids: ids };
+      return replacePage(prev, entry.sectionIndex, entry.pageIndex, nextPage);
+    });
   }
 
   function parseTargetPages(value: string, max: number): number[] {
@@ -283,19 +344,28 @@ export default function InputDataPage() {
   }
 
   function copyPageToTargets() {
-    if (!pages.length) return;
-    const targets = parseTargetPages(copyTargets, pages.length).filter(
+    if (!flatPages.length) return;
+    const targets = parseTargetPages(copyTargets, flatPages.length).filter(
       (idx) => idx !== copySourceIndex,
     );
     if (!targets.length) {
       setStatus("No valid target pages selected for copy.");
       return;
     }
-    const sourceTemplate = pages[copySourceIndex]?.template ?? {};
-    setPages((prev) =>
-      prev.map((page, idx) =>
-        targets.includes(idx) ? { ...page, template: { ...sourceTemplate } } : page,
-      ),
+    const sourceTemplate = flatPages[copySourceIndex]?.page?.template ?? {};
+    setSections((prev) =>
+      prev.map((section, sIdx) => ({
+        ...section,
+        pages: (section.pages ?? []).map((page, pIdx) => {
+          const flatIndex =
+            flattenSections(prev).find(
+              (entry) =>
+                entry.sectionIndex === sIdx && entry.pageIndex === pIdx,
+            )?.flatIndex ?? -1;
+          if (!targets.includes(flatIndex)) return page;
+          return { ...page, template: { ...sourceTemplate } };
+        }),
+      })),
     );
     setStatus(
       `Copied page ${copySourceIndex + 1} to ${targets
@@ -325,12 +395,12 @@ export default function InputDataPage() {
     setIsSaving(true);
     setStatus("Saving input data...");
     try {
-      const resp = await putJson<{ pages: Page[] }>(
-        `/sessions/${sessionId}/pages`,
-        { pages },
+      const resp = await putJson<{ sections: JobsheetSection[] }>(
+        `/sessions/${sessionId}/sections`,
+        { sections },
       );
-      const updated = Array.isArray(resp.pages) ? resp.pages : pages;
-      setPages(updated.length ? updated : [{ items: [] }]);
+      const updated = ensureSections(resp.sections ?? sections);
+      setSections(updated);
       setStatus("Input data saved.");
     } catch (err) {
       const message =
@@ -420,13 +490,16 @@ export default function InputDataPage() {
         title="RepEx - Report Express"
         subtitle="Input Data"
         right={
-          <Link
-            to={`/report-viewer${sessionQuery}`}
-            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
-          >
-            <ArrowLeft className="h-4 w-4" />
-            Back
-          </Link>
+          <div className="flex items-center gap-2">
+            <Link
+              to={`/report-viewer${sessionQuery}`}
+              className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back
+            </Link>
+            <InfoMenu sessionQuery={sessionQuery} />
+          </div>
         }
       />
 
@@ -481,13 +554,35 @@ export default function InputDataPage() {
             </p>
           </div>
           <div className="flex flex-wrap gap-2">
+            <div className="flex items-center gap-2">
+              <select
+                className="rounded-md border border-gray-200 px-2 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+                value={addSectionId}
+                onChange={(event) => setAddSectionId(event.target.value)}
+                disabled={!sections.length}
+              >
+                {sections.map((section, idx) => (
+                  <option key={section.id} value={section.id}>
+                    {section.title || `Section ${idx + 1}`}
+                  </option>
+                ))}
+              </select>
+              <button
+                type="button"
+                onClick={() => insertPageIntoSection(addSectionId, generalTemplate)}
+                disabled={!sessionId || !addSectionId}
+                className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Add blank page
+              </button>
+            </div>
             <button
               type="button"
-              onClick={() => insertPageAt(pages.length, {})}
+              onClick={addSection}
               disabled={!sessionId}
-              className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
+              className="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              Add blank page
+              Add section
             </button>
             <button
               type="button"
@@ -519,7 +614,7 @@ export default function InputDataPage() {
                 value={copySourceIndex}
                 onChange={(event) => setCopySourceIndex(Number(event.target.value))}
               >
-                {pages.map((_, idx) => (
+                {flatPages.map((_, idx) => (
                   <option key={`copy-source-${idx}`} value={idx}>
                     Page {idx + 1}
                   </option>
@@ -539,7 +634,7 @@ export default function InputDataPage() {
             <button
               type="button"
               onClick={copyPageToTargets}
-              disabled={!pages.length}
+              disabled={!flatPages.length}
               className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
             >
               Copy page data
@@ -727,6 +822,91 @@ export default function InputDataPage() {
         </div>
       </section>
 
+      <section className="mb-4 rounded-lg border border-gray-200 bg-white p-3">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <div>
+            <h3 className="text-sm font-semibold text-gray-900">Job Sheet Sections</h3>
+            <p className="text-xs text-gray-600">
+              Rename sections and add pages directly inside a section.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setSectionsCollapsed((prev) => !prev)}
+              className="inline-flex items-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1 text-xs font-semibold text-gray-700 hover:bg-gray-50 transition"
+            >
+              {sectionsCollapsed ? "Expand" : "Collapse"}
+            </button>
+            <button
+              type="button"
+              onClick={addSection}
+              className="inline-flex items-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1 text-xs font-semibold text-gray-700 hover:bg-gray-50 transition"
+            >
+              Add section
+            </button>
+          </div>
+        </div>
+        {sectionsCollapsed ? (
+          <div className="mt-2 text-[11px] text-gray-500">
+            {sections.length} section{sections.length === 1 ? "" : "s"} ·{" "}
+            {sections.reduce((sum, section) => sum + (section.pages?.length ?? 0), 0)}{" "}
+            page{sections.length === 1 ? "" : "s"} total
+          </div>
+        ) : (
+          <div className="mt-2 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+            {sections.map((section, idx) => (
+              <div
+                key={section.id}
+                className="rounded-md border border-gray-200 bg-gray-50 p-2"
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <div className="text-[11px] font-semibold text-gray-700">
+                    Section {idx + 1}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => insertPageIntoSection(section.id)}
+                    className="inline-flex items-center gap-1 rounded-md border border-gray-200 bg-white px-2 py-0.5 text-[11px] font-semibold text-gray-700 hover:bg-gray-50 transition"
+                  >
+                    Add page
+                  </button>
+                </div>
+                <div className="mt-1 text-[11px] text-gray-500">
+                  Pages: {section.pages?.length ?? 0}
+                </div>
+                <div className="text-[11px] text-gray-500">
+                  Page numbers:{" "}
+                  {(() => {
+                    const start =
+                      sections
+                        .slice(0, idx)
+                        .reduce((sum, item) => sum + (item.pages?.length ?? 0), 0) +
+                      1;
+                    const count = section.pages?.length ?? 0;
+                    if (count <= 0) return "-";
+                    const end = start + count - 1;
+                    return start === end ? `${start}` : `${start}-${end}`;
+                  })()}
+                </div>
+                <label className="mt-1 block text-[11px] text-gray-600">
+                  Title
+                  <input
+                    type="text"
+                    className="mt-1 w-full rounded-md border border-gray-200 px-2 py-0.5 text-xs focus:outline-none focus:ring-2 focus:ring-blue-200"
+                    value={section.title ?? ""}
+                    onChange={(event) =>
+                      updateSectionTitle(section.id, event.target.value)
+                    }
+                    placeholder={`Section ${idx + 1}`}
+                  />
+                </label>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
       <div className="rounded-lg border border-gray-200 bg-white overflow-x-auto">
         <div className="px-3 py-2 text-xs text-gray-500 bg-gray-50 border-b border-gray-200">
           General Info (double-click the header below to expand/collapse columns)
@@ -790,10 +970,11 @@ export default function InputDataPage() {
             </tr>
           </thead>
           <tbody>
-            {pages.map((page, pageIndex) => {
-              const template = page.template ?? {};
-              const photoIds = page.photo_ids ?? [];
-              const orderLocked = page.photo_order_locked ?? false;
+            {flatPages.map((entry) => {
+              const pageIndex = entry.flatIndex;
+              const template = entry.page.template ?? {};
+              const photoIds = entry.page.photo_ids ?? [];
+              const orderLocked = entry.page.photo_order_locked ?? false;
               const photoLookup = new Map(
                 (session?.uploads?.photos ?? []).map((photo) => [photo.id, photo]),
               );
@@ -801,9 +982,9 @@ export default function InputDataPage() {
                 (photo) => !photoIds.includes(photo.id),
               );
               return (
-                <tr key={`row-${pageIndex}`} className="border-b border-gray-100">
+                <tr key={`row-${entry.sectionId}-${entry.pageIndex}`} className="border-b border-gray-100">
                   <td className="px-3 py-2 text-xs font-semibold text-gray-700">
-                    Page {pageIndex + 1}
+                    Page {entry.flatIndex + 1}
                   </td>
                   {showGeneralColumns ? (
                     GENERAL_FIELDS.map((field) => (
@@ -974,7 +1155,7 @@ export default function InputDataPage() {
                       <button
                         type="button"
                         onClick={() => removePageAt(pageIndex)}
-                        disabled={pages.length <= 1}
+                        disabled={flatPages.length <= 1}
                         className="inline-flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-100 transition disabled:opacity-50 disabled:cursor-not-allowed"
                       >
                         Delete page
@@ -991,7 +1172,7 @@ export default function InputDataPage() {
       <div className="mt-3 flex justify-end">
         <button
           type="button"
-          onClick={() => insertPageAt(pages.length, pages[pages.length - 1]?.template)}
+          onClick={() => insertPageAt(flatPages.length, flatPages[flatPages.length - 1]?.page?.template)}
           disabled={!sessionId}
           className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
         >

frontend/src/pages/RatingsInfoPage.tsx

@@ -1,36 +1,44 @@
 import { BarChart2, ArrowLeft } from "react-feather";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
+
+import { PageHeader } from "../components/PageHeader";
+import { PageShell } from "../components/PageShell";
+import { buildSessionQuery, getSessionId } from "../lib/session";
 
 export default function RatingsInfoPage() {
+  const [searchParams] = useSearchParams();
+  const sessionId = getSessionId(searchParams.toString());
+  const sessionQuery = buildSessionQuery(sessionId);
+
   return (
-    <main className="max-w-6xl mx-auto p-4 md:p-6">
-      <header className="mb-8 flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <h1 className="text-3xl font-bold text-gray-800">Assessment Rating Scales</h1>
-          <p className="text-gray-600 mt-2">
-            Interactive rating system for condition evaluation.
-          </p>
-        </div>
-        <Link
-          to="/report-viewer"
-          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 to report
-        </Link>
-      </header>
+    <PageShell className="max-w-6xl">
+      <PageHeader
+        title="Assessment Rating Scales"
+        subtitle="Interactive rating system for condition evaluation"
+        right={
+          <Link
+            to={`/report-viewer${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back
+          </Link>
+        }
+      />
 
       <section className="mt-4 bg-white rounded-xl shadow-sm p-6">
-        <h2 className="text-xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-4 flex items-center">
-          <BarChart2 className="mr-2 h-5 w-5" />
+        <h2 className="text-xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-4 flex items-center gap-2">
+          <BarChart2 className="h-5 w-5" />
           Rating Scales
         </h2>
 
         <div className="rounded-lg border border-gray-200 bg-gray-50 p-4 mb-6">
           <p className="text-sm text-gray-700">
-            Use the tables below to interpret <span className="font-semibold">Category</span>{" "}
-            and <span className="font-semibold">Priority</span> ratings used throughout this
-            report. Ratings determine severity and recommended response time.
+            Use the tables below to interpret{" "}
+            <span className="font-semibold">Category</span> and{" "}
+            <span className="font-semibold">Priority</span> ratings used
+            throughout this report. Ratings determine severity and recommended
+            response time.
           </p>
         </div>
 
@@ -40,21 +48,63 @@ export default function RatingsInfoPage() {
           </label>
 
           <div className="grid grid-cols-6 gap-1 text-center mb-2">
-            <div className="text-xs font-bold bg-green-100 text-green-800 p-1 rounded">0</div>
-            <div className="text-xs font-bold bg-green-200 text-green-800 p-1 rounded">1</div>
-            <div className="text-xs font-bold bg-yellow-100 text-yellow-800 p-1 rounded">2</div>
-            <div className="text-xs font-bold bg-yellow-200 text-yellow-800 p-1 rounded">3</div>
-            <div className="text-xs font-bold bg-orange-200 text-orange-800 p-1 rounded">4</div>
-            <div className="text-xs font-bold bg-red-200 text-red-800 p-1 rounded">5</div>
+            <div className="text-xs font-bold bg-green-100 text-green-800 p-1 rounded">
+              0
+            </div>
+            <div className="text-xs font-bold bg-green-200 text-green-800 p-1 rounded">
+              1
+            </div>
+            <div className="text-xs font-bold bg-yellow-100 text-yellow-800 p-1 rounded">
+              2
+            </div>
+            <div className="text-xs font-bold bg-yellow-200 text-yellow-800 p-1 rounded">
+              3
+            </div>
+            <div className="text-xs font-bold bg-orange-200 text-orange-800 p-1 rounded">
+              4
+            </div>
+            <div className="text-xs font-bold bg-red-200 text-red-800 p-1 rounded">
+              5
+            </div>
           </div>
 
           <div className="grid grid-cols-6 gap-1 text-center">
-            <div className="text-xs font-bold bg-green-100 text-green-800 p-1 rounded">Excellent</div>
-            <div className="text-xs font-bold bg-green-200 text-green-800 p-1 rounded">Good</div>
-            <div className="text-xs font-bold bg-yellow-100 text-yellow-800 p-1 rounded">Fair</div>
-            <div className="text-xs font-bold bg-yellow-200 text-yellow-800 p-1 rounded">Poor</div>
-            <div className="text-xs font-bold bg-orange-200 text-orange-800 p-1 rounded">Worse</div>
-            <div className="text-xs font-bold bg-red-200 text-red-800 p-1 rounded">Severe</div>
+            <div
+              className="text-xs font-bold bg-green-100 text-green-800 p-1 rounded"
+              title="Excellent Condition: No Deterioration. Structure is Safe for use. 100% Original Strength of Structure. Remedial Action: None"
+            >
+              Excellent
+            </div>
+            <div
+              className="text-xs font-bold bg-green-200 text-green-800 p-1 rounded"
+              title="Good Condition: Slight Surface Deterioration. Structure is safe for use. 100% Original Strength of Structure. Remedial Action: None"
+            >
+              Good
+            </div>
+            <div
+              className="text-xs font-bold bg-yellow-100 text-yellow-800 p-1 rounded"
+              title="Fair Condition: Some Deterioration deeper than surface level. Structure is safe for use. 95-100% Original Strength of Structure. Remedial Action: Minor Works"
+            >
+              Fair
+            </div>
+            <div
+              className="text-xs font-bold bg-yellow-200 text-yellow-800 p-1 rounded"
+              title="Poor Condition: Discernible Deterioration. Some compromise in safety. 75-95% Original Strength of Structure. Remedial Action: Minor Works"
+            >
+              Poor
+            </div>
+            <div
+              className="text-xs font-bold bg-orange-200 text-orange-800 p-1 rounded"
+              title="Worse Condition: Severe Deterioration. Severe compromise in safety. 50-75% Original Strength of Structure. Remedial Action: Major Works"
+            >
+              Worse
+            </div>
+            <div
+              className="text-xs font-bold bg-red-200 text-red-800 p-1 rounded"
+              title="Severe Condition: Severe Deterioration. Total and complete compromise in safety. <50% Original Strength of Structure. Remedial Action: Major Works Urgently"
+            >
+              Severe
+            </div>
           </div>
 
           <div className="mt-3 overflow-x-auto rounded-lg border border-gray-200">
@@ -82,42 +132,56 @@ export default function RatingsInfoPage() {
                 <tr>
                   <td className="px-3 py-2 font-semibold text-gray-900">0</td>
                   <td className="px-3 py-2">Excellent</td>
-                  <td className="px-3 py-2">No deterioration. Structure is safe for use.</td>
+                  <td className="px-3 py-2">
+                    No deterioration. Structure is safe for use.
+                  </td>
                   <td className="px-3 py-2">100% Original Strength</td>
                   <td className="px-3 py-2">None</td>
                 </tr>
                 <tr>
                   <td className="px-3 py-2 font-semibold text-gray-900">1</td>
                   <td className="px-3 py-2">Good</td>
-                  <td className="px-3 py-2">Slight surface deterioration. Structure is safe for use.</td>
+                  <td className="px-3 py-2">
+                    Slight surface deterioration. Structure is safe for use.
+                  </td>
                   <td className="px-3 py-2">100% Original Strength</td>
                   <td className="px-3 py-2">None</td>
                 </tr>
                 <tr>
                   <td className="px-3 py-2 font-semibold text-gray-900">2</td>
                   <td className="px-3 py-2">Fair</td>
-                  <td className="px-3 py-2">Some deterioration deeper than surface level.</td>
-                  <td className="px-3 py-2">95–100% Original Strength</td>
+                  <td className="px-3 py-2">
+                    Some deterioration deeper than surface level. Structure is
+                    safe for use.
+                  </td>
+                  <td className="px-3 py-2">95-100% Original Strength</td>
                   <td className="px-3 py-2">Minor Works</td>
                 </tr>
                 <tr>
                   <td className="px-3 py-2 font-semibold text-gray-900">3</td>
                   <td className="px-3 py-2">Poor</td>
-                  <td className="px-3 py-2">Discernible deterioration. Some compromise in safety.</td>
-                  <td className="px-3 py-2">75–95% Original Strength</td>
+                  <td className="px-3 py-2">
+                    Discernible deterioration. Some compromise in safety.
+                  </td>
+                  <td className="px-3 py-2">75-95% Original Strength</td>
                   <td className="px-3 py-2">Minor Works</td>
                 </tr>
                 <tr>
                   <td className="px-3 py-2 font-semibold text-gray-900">4</td>
                   <td className="px-3 py-2">Worse</td>
-                  <td className="px-3 py-2">Severe deterioration. Severe compromise in safety.</td>
-                  <td className="px-3 py-2">50–75% Original Strength</td>
+                  <td className="px-3 py-2">
+                    Severe deterioration. Severe compromise in safety.
+                  </td>
+                  <td className="px-3 py-2">50-75% Original Strength</td>
                   <td className="px-3 py-2">Major Works</td>
                 </tr>
                 <tr>
                   <td className="px-3 py-2 font-semibold text-gray-900">5</td>
                   <td className="px-3 py-2">Severe</td>
-                  <td className="px-3 py-2">Severe deterioration. Total compromise in safety.</td>
+                  <td className="px-3 py-2">
+                    Severe deterioration. Total and complete compromise in
+                    safety.
+                  </td>
                   <td className="px-3 py-2">&lt;50% Original Strength</td>
                   <td className="px-3 py-2">Major Works (Urgently)</td>
                 </tr>
@@ -132,19 +196,39 @@ export default function RatingsInfoPage() {
           </label>
 
           <div className="grid grid-cols-5 gap-1 text-center mb-2">
-            <div className="text-xs font-bold bg-red-200 text-red-800 p-1 rounded">1</div>
-            <div className="text-xs font-bold bg-orange-200 text-orange-800 p-1 rounded">2</div>
-            <div className="text-xs font-bold bg-green-200 text-green-800 p-1 rounded">3</div>
-            <div className="text-xs font-bold bg-purple-200 text-purple-800 p-1 rounded">X</div>
-            <div className="text-xs font-bold bg-blue-200 text-blue-800 p-1 rounded">M</div>
+            <div className="text-xs font-bold bg-red-200 text-red-800 p-1 rounded">
+              1
+            </div>
+            <div className="text-xs font-bold bg-orange-200 text-orange-800 p-1 rounded">
+              2
+            </div>
+            <div className="text-xs font-bold bg-green-200 text-green-800 p-1 rounded">
+              3
+            </div>
+            <div className="text-xs font-bold bg-purple-200 text-purple-800 p-1 rounded">
+              X
+            </div>
+            <div className="text-xs font-bold bg-blue-200 text-blue-800 p-1 rounded">
+              M
+            </div>
           </div>
 
           <div className="grid grid-cols-5 gap-1 text-center">
-            <div className="text-xs font-bold bg-red-200 text-red-800 p-1 rounded">Immediate</div>
-            <div className="text-xs font-bold bg-orange-200 text-orange-800 p-1 rounded">1 Year</div>
-            <div className="text-xs font-bold bg-green-200 text-green-800 p-1 rounded">3 Years</div>
-            <div className="text-xs font-bold bg-purple-200 text-purple-800 p-1 rounded">At Use</div>
-            <div className="text-xs font-bold bg-blue-200 text-blue-800 p-1 rounded">Monitor</div>
+            <div className="text-xs font-bold bg-red-200 text-red-800 p-1 rounded">
+              Immediate
+            </div>
+            <div className="text-xs font-bold bg-orange-200 text-orange-800 p-1 rounded">
+              1 Year
+            </div>
+            <div className="text-xs font-bold bg-green-200 text-green-800 p-1 rounded">
+              3 Years
+            </div>
+            <div className="text-xs font-bold bg-purple-200 text-purple-800 p-1 rounded">
+              At Use
+            </div>
+            <div className="text-xs font-bold bg-blue-200 text-blue-800 p-1 rounded">
+              Monitor
+            </div>
           </div>
 
           <div className="mt-3 overflow-x-auto rounded-lg border border-gray-200">
@@ -166,41 +250,46 @@ export default function RatingsInfoPage() {
                 <tr>
                   <td className="px-3 py-2 font-semibold text-gray-900">1</td>
                   <td className="px-3 py-2">Immediate</td>
-                  <td className="px-3 py-2">Action requires urgent, immediate attention.</td>
+                  <td className="px-3 py-2">
+                    Action requires urgent, immediate attention.
+                  </td>
                 </tr>
                 <tr>
                   <td className="px-3 py-2 font-semibold text-gray-900">2</td>
                   <td className="px-3 py-2">1 Year</td>
-                  <td className="px-3 py-2">Action to be done ASAP, no later than 1 year.</td>
+                  <td className="px-3 py-2">
+                    Action to be done ASAP, and no later than 1 year from report
+                    date.
+                  </td>
                 </tr>
                 <tr>
                   <td className="px-3 py-2 font-semibold text-gray-900">3</td>
                   <td className="px-3 py-2">3 Years</td>
-                  <td className="px-3 py-2">Action required within the next 3 years.</td>
+                  <td className="px-3 py-2">
+                    Action required within the next 3 years from report date.
+                  </td>
                 </tr>
                 <tr>
                   <td className="px-3 py-2 font-semibold text-gray-900">X</td>
                   <td className="px-3 py-2">At Use</td>
                   <td className="px-3 py-2">
-                    Action must be completed before use of the structure.
+                    Action must be completed before use of the non-critical
+                    service structure.
                   </td>
                 </tr>
                 <tr>
                   <td className="px-3 py-2 font-semibold text-gray-900">M</td>
                   <td className="px-3 py-2">Monitor</td>
                   <td className="px-3 py-2">
-                    Monitoring required to evaluate extent of damage.
+                    Monitoring required to evaluate the extent of
+                    damage/deterioration with record keeping.
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
         </div>
-
-        <p className="mt-4 text-xs text-gray-500">
-          Note: Scales can be customized per client/site standards.
-        </p>
       </section>
-    </main>
+    </PageShell>
   );
 }

frontend/src/pages/ReportViewerPage.tsx

@@ -14,16 +14,18 @@ import {
 
 import { request } from "../lib/api";
 import { BASE_W } from "../lib/report";
+import { ensureSections, flattenSections } from "../lib/sections";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
-import type { Page, Session } from "../types/session";
+import type { JobsheetSection, Session } from "../types/session";
 import { ReportPageCanvas } from "../components/ReportPageCanvas";
+import { InfoMenu } from "../components/InfoMenu";
 
 export default function ReportViewerPage() {
   const [searchParams] = useSearchParams();
   const sessionId = getSessionId(searchParams.toString());
 
   const [session, setSession] = useState<Session | null>(null);
-  const [pages, setPages] = useState<Page[]>([]);
+  const [sections, setSections] = useState<JobsheetSection[]>([]);
   const [pageIndex, setPageIndex] = useState(0);
   const [scale, setScale] = useState(1);
   const [error, setError] = useState("");
@@ -55,11 +57,11 @@ export default function ReportViewerPage() {
       try {
         const data = await request<Session>(`/sessions/${sessionId}`);
         setSession(data);
-        const pageResp = await request<{ pages: Page[] }>(
-          `/sessions/${sessionId}/pages`,
+        const sectionResp = await request<{ sections: JobsheetSection[] }>(
+          `/sessions/${sessionId}/sections`,
         );
-        const loaded = Array.isArray(pageResp.pages) ? pageResp.pages : [];
-        setPages(loaded);
+        const loaded = ensureSections(sectionResp.sections);
+        setSections(loaded);
       } catch (err) {
         const message =
           err instanceof Error ? err.message : "Failed to load session.";
@@ -69,10 +71,14 @@ export default function ReportViewerPage() {
     load();
   }, [sessionId]);
 
+  const flatPages = useMemo(
+    () => flattenSections(ensureSections(sections)),
+    [sections],
+  );
   const totalPages = useMemo(() => {
-    if (pages.length > 0) return pages.length;
+    if (flatPages.length > 0) return flatPages.length;
     return Math.max(1, session?.page_count ?? 0);
-  }, [pages.length, session?.page_count]);
+  }, [flatPages.length, session?.page_count]);
 
   useEffect(() => {
     setPageIndex((idx) => Math.min(Math.max(0, idx), totalPages - 1));
@@ -91,7 +97,12 @@ export default function ReportViewerPage() {
     return () => window.removeEventListener("keydown", handler);
   }, [totalPages]);
 
-  const page = pages[pageIndex] ?? null;
+  const page = flatPages[pageIndex]?.page ?? null;
+  const sectionLabel = flatPages[pageIndex]?.sectionTitle
+    ? `Section ${flatPages[pageIndex].sectionIndex + 1} - ${flatPages[pageIndex].sectionTitle}`
+    : flatPages[pageIndex]
+      ? `Section ${flatPages[pageIndex].sectionIndex + 1}`
+      : "";
   const template = page?.template;
   const sessionQuery = buildSessionQuery(sessionId || "");
   const editReportQuery = useMemo(() => {
@@ -107,12 +118,12 @@ export default function ReportViewerPage() {
     const selected = session.selected_photo_ids?.length ?? 0;
     const docs = session.uploads?.documents?.length ?? 0;
     const dataFiles = session.uploads?.data_files?.length ?? 0;
-    const hasEdits = pages.length > 0;
+    const hasEdits = flatPages.length > 0;
     return (
       `Selected example photos: ${selected} - Documents: ${docs} - Data files: ${dataFiles}` +
       (hasEdits ? " - Edited pages loaded" : " - No saved edits yet")
     );
-  }, [pages.length, session]);
+  }, [flatPages.length, session]);
 
   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">
@@ -142,6 +153,7 @@ export default function ReportViewerPage() {
               <ArrowLeft className="h-4 w-4" />
               Back
             </Link>
+            <InfoMenu sessionQuery={sessionQuery} />
           </div>
         </div>
       </header>
@@ -249,6 +261,7 @@ export default function ReportViewerPage() {
               pageCount={totalPages}
               scale={scale}
               template={template}
+              sectionLabel={sectionLabel}
               adaptive
             />
           </div>

frontend/src/types/session.ts

@@ -29,6 +29,7 @@ export type Session = {
   uploads: SessionUploads;
   selected_photo_ids: string[];
   page_count: number;
+  jobsheet_sections?: JobsheetSection[];
   headings?: Heading[];
   layout?: Record<string, unknown> | null;
 };
@@ -89,8 +90,20 @@ export type Page = {
   template?: TemplateFields;
   photo_ids?: string[];
   photo_order_locked?: boolean;
+  blank?: boolean;
+  variant?: "full" | "photos";
+};
+
+export type JobsheetSection = {
+  id: string;
+  title?: string;
+  pages: Page[];
 };
 
 export type PagesResponse = {
   pages: Page[];
 };
+
+export type SectionsResponse = {
+  sections: JobsheetSection[];
+};

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "RepEx",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

server/app/api/routes/sessions.py

@@ -1,6 +1,5 @@
 from __future__ import annotations
 
-import asyncio
 import json
 from pathlib import Path
 from typing import List
@@ -13,6 +12,8 @@ from ..deps import get_session_store
 from ..schemas import (
     PagesRequest,
     PagesResponse,
+    SectionsRequest,
+    SectionsResponse,
     SelectionRequest,
     SessionResponse,
     SessionStatusResponse,
@@ -21,7 +22,7 @@ from ...services import SessionStore
 from ...services.session_store import DATA_EXTS, IMAGE_EXTS
 
 from ...services.data_import import populate_session_from_data_files
-from ...services.pdf_export import render_pdf_sync
+from ...services.pdf_reportlab import render_report_pdf
 
 
 router = APIRouter()
@@ -97,6 +98,7 @@ def get_session(session_id: str, store: SessionStore = Depends(get_session_store
     session = store.get_session(session_id)
     if not session:
         raise HTTPException(status_code=404, detail="Session not found.")
+    store.ensure_sections(session)
     return _attach_urls(session)
 
 
@@ -151,6 +153,32 @@ def save_pages(
     return PagesResponse(pages=session.get("pages") or [])
 
 
+@router.get("/{session_id}/sections", response_model=SectionsResponse)
+def get_sections(
+    session_id: str, store: SessionStore = Depends(get_session_store)
+) -> SectionsResponse:
+    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.")
+    sections = store.ensure_sections(session)
+    return SectionsResponse(sections=sections)
+
+
+@router.put("/{session_id}/sections", response_model=SectionsResponse)
+def save_sections(
+    session_id: str,
+    payload: SectionsRequest,
+    store: SessionStore = Depends(get_session_store),
+) -> SectionsResponse:
+    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_sections(session, payload.sections)
+    return SectionsResponse(sections=session.get("jobsheet_sections") or [])
+
+
 @router.get("/{session_id}/uploads/{file_id}")
 def get_upload(
     session_id: str,
@@ -249,8 +277,13 @@ def import_json(
 
     imported_session = payload.get("session") if isinstance(payload, dict) else None
     pages = payload.get("pages") if isinstance(payload, dict) else None
+    sections = payload.get("sections") if isinstance(payload, dict) else None
+    if not sections and isinstance(imported_session, dict):
+        sections = imported_session.get("jobsheet_sections")
     if not pages and isinstance(imported_session, dict):
         pages = imported_session.get("pages")
+    if sections:
+        session = store.set_sections(session, sections)
     if pages:
         session = store.set_pages(session, pages)
 
@@ -278,10 +311,13 @@ def export_package(
     session = store.get_session(session_id)
     if not session:
         raise HTTPException(status_code=404, detail="Session not found.")
+    sections = store.ensure_sections(session)
+    pages = store.ensure_pages(session)
     export_path = Path(store.session_dir(session_id)) / "export.json"
     payload = {
         "session": session,
-        "pages": session.get("pages") or [],
+        "pages": pages,
+        "sections": sections,
         "exported_at": session.get("updated_at"),
     }
     export_path.write_text(
@@ -295,23 +331,22 @@ def export_package(
 
 
 @router.get("/{session_id}/export.pdf")
-async def export_pdf(
+def export_pdf(
     session_id: str, store: SessionStore = Depends(get_session_store)
 ) -> FileResponse:
     session_id = _normalize_session_id(session_id, store)
     session = store.get_session(session_id)
     if not session:
         raise HTTPException(status_code=404, detail="Session not found.")
-
+    sections = store.ensure_sections(session)
     export_path = Path(store.session_dir(session_id)) / "export.pdf"
-    await asyncio.to_thread(render_pdf_sync, session_id, export_path)
+    render_report_pdf(store, session, sections, export_path)
     return FileResponse(
         export_path,
         media_type="application/pdf",
         filename=f"repex_report_{session_id}.pdf",
     )
 
-
 @router.get("/{session_id}/export.xlsx")
 def export_excel(
     session_id: str, store: SessionStore = Depends(get_session_store)

server/app/api/schemas.py

@@ -31,6 +31,7 @@ class SessionResponse(BaseModel):
     selected_photo_ids: List[str] = Field(default_factory=list)
     page_count: int = 0
     headings: List[Heading] = Field(default_factory=list)
+    jobsheet_sections: List["JobsheetSection"] = Field(default_factory=list)
 
 
 class SessionStatusResponse(BaseModel):
@@ -49,3 +50,17 @@ class PagesResponse(BaseModel):
 
 class PagesRequest(BaseModel):
     pages: List[dict] = Field(default_factory=list)
+
+
+class JobsheetSection(BaseModel):
+    id: str
+    title: Optional[str] = None
+    pages: List[dict] = Field(default_factory=list)
+
+
+class SectionsResponse(BaseModel):
+    sections: List[JobsheetSection] = Field(default_factory=list)
+
+
+class SectionsRequest(BaseModel):
+    sections: List[JobsheetSection] = Field(default_factory=list)

server/app/services/data_import.py

@@ -396,9 +396,9 @@ def populate_session_from_data_files(
     if headings:
         session["headings"] = headings
 
-    pages: List[dict] = []
+    sections: List[dict] = []
     selected_photo_ids: List[str] = []
-    for item in items:
+    for idx, item in enumerate(items):
         company_logo = (
             general.get("client logo image name")
             or general.get("client logo")
@@ -428,13 +428,13 @@ 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)
-        pages.append({"items": [], "template": template, "photo_ids": photo_ids})
+        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]})
 
-    if pages:
-        session["pages"] = pages
-        session["page_count"] = len(pages)
+    if sections:
         if selected_photo_ids:
             session["selected_photo_ids"] = selected_photo_ids
-        store.update_session(session)
+        store.set_sections(session, sections)
 
     return session

server/app/services/pdf_reportlab.py

@@ -0,0 +1,660 @@
+from __future__ import annotations
+
+import math
+from pathlib import Path
+import re
+from typing import Iterable, List, Optional
+
+from reportlab.lib import colors
+from reportlab.lib.pagesizes import A4
+from reportlab.lib.units import mm
+from reportlab.lib.utils import ImageReader
+from PIL import Image
+from reportlab.pdfgen import canvas
+
+from .session_store import SessionStore
+
+
+def _has_template_content(template: dict | None) -> bool:
+    if not template:
+        return False
+    for value in template.values():
+        if isinstance(value, str) and value.strip():
+            return True
+        if value not in (None, ""):
+            return True
+    return False
+
+
+def _chunk(items: List[str], size: int) -> List[List[str]]:
+    if not items:
+        return []
+    return [items[i : i + size] for i in range(0, len(items), size)]
+
+
+def _safe_text(value: Optional[str]) -> str:
+    return (value or "").strip()
+
+
+def _wrap_lines(
+    pdf: canvas.Canvas,
+    text: str,
+    width: float,
+    max_lines: int,
+    font: str,
+    size: int,
+) -> List[str]:
+    if not text:
+        return []
+    pdf.setFont(font, size)
+    words = text.split()
+    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)
+        else:
+            lines.append(" ".join(current))
+            current = [word]
+        if len(lines) >= max_lines:
+            current = []
+            break
+    if current and len(lines) < max_lines:
+        lines.append(" ".join(current))
+    return lines
+
+
+def _draw_wrapped(
+    pdf: canvas.Canvas,
+    text: str,
+    x: float,
+    y: float,
+    width: float,
+    leading: float,
+    max_lines: int,
+    font: str,
+    size: int,
+) -> float:
+    lines = _wrap_lines(pdf, text, width, max_lines, font, size)
+    if not lines:
+        return y
+    pdf.setFont(font, size)
+    for line in lines:
+        pdf.drawString(x, y, line)
+        y -= leading
+    return y
+
+
+def _draw_centered_block(
+    pdf: canvas.Canvas,
+    lines: List[str],
+    x_center: float,
+    box_bottom: float,
+    box_height: float,
+    leading: float,
+    font: str,
+    size: int,
+) -> None:
+    if not lines:
+        return
+    pdf.setFont(font, size)
+    block_h = len(lines) * leading
+    start_y = box_bottom + (box_height + block_h) / 2 - leading
+    y = start_y
+    for line in lines:
+        pdf.drawCentredString(x_center, y, line)
+        y -= leading
+
+
+def _draw_label_value(
+    pdf: canvas.Canvas,
+    label: str,
+    value: str,
+    x: float,
+    y: float,
+    label_font: str,
+    value_font: str,
+    label_size: int,
+    value_size: int,
+    label_color: colors.Color,
+    value_color: colors.Color,
+) -> float:
+    pdf.setFillColor(label_color)
+    pdf.setFont(label_font, label_size)
+    pdf.drawString(x, y, label)
+    y -= label_size + 1
+    pdf.setFillColor(value_color)
+    pdf.setFont(value_font, value_size)
+    pdf.drawString(x, y, value or "-")
+    return y
+
+
+def _badge_style(value: str, scale: dict) -> tuple[str, colors.Color, colors.Color]:
+    raw = (value or "").strip()
+    key = raw.upper()
+    match = re.match(r"^([0-9]|[XM])", key)
+    if match:
+        key = match.group(1)
+    tone = scale.get(key)
+    if not tone:
+        return (raw or "-"), colors.HexColor("#f9fafb"), colors.HexColor("#374151")
+    return f"{key} - {tone['label']}", tone["bg"], tone["text"]
+
+
+def _resolve_logo_path(store: SessionStore, session: dict, raw: str) -> Optional[Path]:
+    value = _safe_text(raw)
+    if not value:
+        return None
+    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
+        stem = name.rsplit(".", 1)[0]
+        if lower == name or lower == stem:
+            path = store.resolve_upload_path(session, item.get("id"))
+            if path and path.exists():
+                return path
+    return None
+
+
+def _draw_image_fit(
+    pdf: canvas.Canvas,
+    image_path: Path,
+    x: float,
+    y: float,
+    width: float,
+    height: float,
+) -> bool:
+    try:
+        reader = ImageReader(str(image_path))
+        iw, ih = reader.getSize()
+    except Exception:
+        try:
+            img = Image.open(image_path)
+            img.load()
+            if img.mode not in ("RGB", "L"):
+                img = img.convert("RGB")
+            reader = ImageReader(img)
+            iw, ih = reader.getSize()
+        except Exception:
+            try:
+                pdf.drawImage(
+                    str(image_path),
+                    x,
+                    y,
+                    width,
+                    height,
+                    preserveAspectRatio=True,
+                    mask="auto",
+                )
+                return True
+            except Exception:
+                return False
+    if iw <= 0 or ih <= 0:
+        return False
+    scale = min(width / iw, height / ih)
+    draw_w = iw * scale
+    draw_h = ih * scale
+    draw_x = x + (width - draw_w) / 2
+    draw_y = y + (height - draw_h) / 2
+    pdf.drawImage(
+        reader,
+        draw_x,
+        draw_y,
+        draw_w,
+        draw_h,
+        preserveAspectRatio=True,
+        mask="auto",
+    )
+    return True
+
+
+def render_report_pdf(
+    store: SessionStore,
+    session: dict,
+    sections_or_pages: List[dict],
+    output_path: Path,
+) -> Path:
+    width, height = A4
+    margin = 10 * mm
+    header_h = 20 * mm
+    footer_h = 8 * mm
+    gap = 4 * mm
+    photo_col_gap = 6 * mm
+    photo_row_gap = 6 * mm
+    photos_header_gap = 8 * mm
+    min_photo_cell_w = 80 * mm
+    min_photo_cell_h = 60 * mm
+    two_col_cell_w = (width - 2 * margin - photo_col_gap) / 2
+    columns_for_photos = 2 if two_col_cell_w >= min_photo_cell_w else 1
+
+    gray_50 = colors.HexColor("#f9fafb")
+    gray_200 = colors.HexColor("#e5e7eb")
+    gray_500 = colors.HexColor("#6b7280")
+    gray_700 = colors.HexColor("#374151")
+    gray_800 = colors.HexColor("#1f2937")
+    gray_900 = colors.HexColor("#111827")
+    gray_600 = colors.HexColor("#4b5563")
+    amber_50 = colors.HexColor("#fffbeb")
+    amber_300 = colors.HexColor("#fcd34d")
+    amber_800 = colors.HexColor("#92400e")
+    emerald_50 = colors.HexColor("#ecfdf5")
+    emerald_800 = colors.HexColor("#065f46")
+    blue_50 = colors.HexColor("#eff6ff")
+    blue_300 = colors.HexColor("#93c5fd")
+    blue_800 = colors.HexColor("#1e40af")
+    blue_200 = colors.HexColor("#bfdbfe")
+    blue_900 = colors.HexColor("#1e3a8a")
+    purple_200 = colors.HexColor("#e9d5ff")
+    purple_800 = colors.HexColor("#6b21a8")
+    green_100 = colors.HexColor("#dcfce7")
+    green_200 = colors.HexColor("#bbf7d0")
+    yellow_100 = colors.HexColor("#fef9c3")
+    yellow_200 = colors.HexColor("#fef08a")
+    orange_200 = colors.HexColor("#fed7aa")
+    red_200 = colors.HexColor("#fecaca")
+
+    output_path.parent.mkdir(parents=True, exist_ok=True)
+    pdf = canvas.Canvas(str(output_path), pagesize=A4)
+
+    uploads = (session.get("uploads") or {}).get("photos") or []
+    by_id = {item.get("id"): item for item in uploads if item.get("id")}
+
+    content_top = height - margin - header_h - gap
+    content_bottom = margin + footer_h + gap
+    photo_area_height_photos = max(0, content_top - photos_header_gap - content_bottom)
+    max_rows_photos = max(
+        1,
+        int((photo_area_height_photos + photo_row_gap) // (min_photo_cell_h + photo_row_gap)),
+    )
+    max_photos_photos = max(1, max_rows_photos * columns_for_photos)
+
+    sections: List[dict]
+    if sections_or_pages and isinstance(sections_or_pages[0], dict) and "pages" in sections_or_pages[0]:
+        sections = sections_or_pages
+    else:
+        sections = [{"id": "section-1", "title": "Section 1", "pages": sections_or_pages or []}]
+
+    print_pages: List[dict] = []
+    for section_index, section in enumerate(sections):
+        section_pages = section.get("pages") or []
+        for page_index, page in enumerate(section_pages):
+            template = page.get("template") or {}
+            base_variant = (
+                (page.get("variant") or "").strip().lower() if isinstance(page, dict) else ""
+            )
+            if base_variant not in ("full", "photos"):
+                base_variant = "full" if page_index == 0 else "photos"
+            photo_ids = page.get("photo_ids") or []
+            photo_entries = []
+            for pid in photo_ids:
+                item = by_id.get(pid)
+                if not item:
+                    continue
+                path = store.resolve_upload_path(session, pid)
+                if path and path.exists():
+                    label = _safe_text(item.get("name") or path.name)
+                    photo_entries.append({"path": path, "label": label})
+            if base_variant == "photos":
+                chunks = _chunk(photo_entries, max_photos_photos) or [[]]
+                for chunk in chunks:
+                    print_pages.append(
+                        {
+                            "page_index": page_index,
+                            "template": template,
+                            "photos": chunk,
+                            "variant": "photos",
+                            "section_index": section_index,
+                        }
+                    )
+            else:
+                first_chunk = photo_entries[:2]
+                remainder = photo_entries[2:]
+                chunks = [first_chunk]
+                if remainder:
+                    chunks.extend(_chunk(remainder, max_photos_photos))
+                for chunk_index, chunk in enumerate(chunks):
+                    variant = "full" if chunk_index == 0 else "photos"
+                    print_pages.append(
+                        {
+                            "page_index": page_index,
+                            "template": template,
+                            "photos": chunk,
+                            "variant": variant,
+                            "section_index": section_index,
+                        }
+                    )
+
+    if not print_pages:
+        print_pages = [
+            {
+                "page_index": 0,
+                "template": {},
+                "photos": [],
+                "variant": "full",
+            }
+        ]
+
+    total_pages = len(print_pages)
+    repo_root = Path(__file__).resolve().parents[3]
+    logo_candidates = [
+        repo_root / "frontend" / "public" / "assets" / "prosento-logo.png",
+        repo_root / "frontend" / "dist" / "assets" / "prosento-logo.png",
+        repo_root / "server" / "assets" / "prosento-logo.png",
+    ]
+    default_logo = next((path for path in logo_candidates if path.exists()), None)
+
+    for output_index, payload in enumerate(print_pages):
+        template = payload["template"]
+        photos = payload["photos"]
+        variant = payload["variant"]
+
+        header_y = height - margin
+        content_top = header_y - header_h - gap
+        content_bottom = margin + footer_h + gap
+        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)
+        if not logo_drawn:
+            pdf.setStrokeColor(colors.red)
+            pdf.setLineWidth(1)
+            pdf.rect(logo_x, logo_y, logo_w, logo_h, stroke=1, fill=0)
+            pdf.setFillColor(colors.red)
+            pdf.setFont("Helvetica-Bold", 9)
+            pdf.drawString(logo_x + 2, logo_y + logo_h / 2 - 3, "LOGO MISSING")
+        else:
+            pdf.setStrokeColor(gray_200)
+            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, "RepEx Inspection Job Sheet")
+        pdf.setFillColor(gray_600)
+        pdf.setFont("Helvetica", 11)
+        pdf.drawCentredString(width / 2, header_y - 13 * mm, f"Page {output_index + 1} of {total_pages}")
+        pdf.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)
+            y -= photos_header_gap
+
+            ref = _safe_text(template.get("reference"))
+            area = _safe_text(template.get("area"))
+            location = _safe_text(template.get("functional_location"))
+            item_desc = _safe_text(template.get("item_description"))
+            condition_desc = _safe_text(template.get("condition_description"))
+            action_type = _safe_text(template.get("action_type"))
+            required_action = _safe_text(template.get("required_action"))
+
+            left_w = (width - 2 * margin) * 0.6
+            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"))
+            cat_scale = {
+                "0": {"label": "Excellent", "bg": green_100, "text": colors.HexColor("#166534")},
+                "1": {"label": "Good", "bg": green_200, "text": colors.HexColor("#166534")},
+                "2": {"label": "Fair", "bg": yellow_100, "text": colors.HexColor("#854d0e")},
+                "3": {"label": "Poor", "bg": yellow_200, "text": colors.HexColor("#854d0e")},
+                "4": {"label": "Worse", "bg": orange_200, "text": colors.HexColor("#9a3412")},
+                "5": {"label": "Severe", "bg": red_200, "text": colors.HexColor("#991b1b")},
+            }
+            pr_scale = {
+                "1": {"label": "Immediate", "bg": red_200, "text": colors.HexColor("#991b1b")},
+                "2": {"label": "1 Year", "bg": orange_200, "text": colors.HexColor("#9a3412")},
+                "3": {"label": "3 Years", "bg": green_200, "text": colors.HexColor("#166534")},
+                "X": {"label": "At Use", "bg": purple_200, "text": purple_800},
+                "M": {"label": "Monitor", "bg": blue_200, "text": blue_900},
+            }
+            cat_text, cat_bg, cat_text_color = _badge_style(category, cat_scale)
+            pr_text, pr_bg, pr_text_color = _badge_style(priority, pr_scale)
+
+            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 = " - ".join([v for v in [item_desc, condition_desc] if v])
+            action = " - ".join([v for v in [action_type, required_action] if v])
+
+            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,
+                cond_lines,
+                text_center_x,
+                cond_bottom,
+                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,
+                action_lines,
+                text_center_x,
+                action_bottom,
+                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)
+            y -= photos_header_gap
+
+        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)
+            y -= 8 * mm
+
+        photo_area_top = y
+        photo_area_height = max(0, photo_area_top - content_bottom)
+
+        if photos:
+            columns = 1 if len(photos) == 1 else 2
+            rows = math.ceil(len(photos) / columns)
+            cell_w = (width - 2 * margin - (columns - 1) * photo_col_gap) / columns
+            cell_h = (photo_area_height - (rows - 1) * photo_row_gap) / rows
+
+            for idx, photo in enumerate(photos):
+                photo_path = photo["path"]
+                label = photo.get("label") or photo_path.name
+                row = idx // columns
+                col = idx % columns
+                x = margin + col * (cell_w + photo_col_gap)
+                y = photo_area_top - (row + 1) * cell_h - row * photo_row_gap
+                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)
+            pdf.drawString(margin, photo_area_top - 10 * mm, "No photos selected.")
+
+        # Footer
+        footer_y = margin
+        pdf.setFillColor(gray_500)
+        pdf.setFont("Helvetica", 11)
+        pdf.drawCentredString(width / 2, footer_y + 5 * mm, "Prosento - (c) 2026 All Rights Reserved")
+        pdf.drawCentredString(width / 2, footer_y + 1 * mm, "Automatically generated job sheet")
+
+        pdf.showPage()
+
+    pdf.save()
+    return output_path

server/app/services/session_store.py

@@ -91,8 +91,9 @@ class SessionStore:
             "notes": notes,
             "uploads": {"photos": [], "documents": [], "data_files": []},
             "selected_photo_ids": [],
-            "page_count": 6,
+            "page_count": 0,
             "pages": [],
+            "jobsheet_sections": [],
         }
         self._save_session(session)
         return session
@@ -142,25 +143,79 @@ class SessionStore:
     def set_pages(self, session: dict, pages: List[dict]) -> dict:
         if not pages:
             pages = [{"items": []}]
-        session["pages"] = pages
+        # Legacy compatibility: store as a single section.
+        session["jobsheet_sections"] = [
+            {"id": uuid4().hex, "title": "Section 1", "pages": pages}
+        ]
+        session["pages"] = []
         session["page_count"] = len(pages)
         self.update_session(session)
         return session
 
     def ensure_pages(self, session: dict) -> List[dict]:
+        # Legacy compatibility: flatten sections to pages.
+        sections = self.ensure_sections(session)
+        pages: List[dict] = []
+        for section in sections:
+            pages.extend(section.get("pages") or [])
+        session["page_count"] = len(pages)
+        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"):
+                section = section.model_dump()
+            elif hasattr(section, "dict"):
+                section = section.dict()
+            pages = section.get("pages") or []
+            if pages:
+                normalized_pages = []
+                for page in pages:
+                    if hasattr(page, "model_dump"):
+                        normalized_pages.append(page.model_dump())
+                    elif hasattr(page, "dict"):
+                        normalized_pages.append(page.dict())
+                    else:
+                        normalized_pages.append(page)
+                pages = normalized_pages
+            normalized.append(
+                {
+                    "id": section.get("id") or uuid4().hex,
+                    "title": section.get("title") or "Section",
+                    "pages": pages if pages else [{"items": []}],
+                }
+            )
+        if not normalized:
+            normalized = [{"id": uuid4().hex, "title": "Section 1", "pages": [{"items": []}]}]
+        session["jobsheet_sections"] = normalized
+        session["pages"] = []
+        session["page_count"] = sum(len(section.get("pages") or []) for section in normalized)
+        self.update_session(session)
+        return session
+
+    def ensure_sections(self, session: dict) -> List[dict]:
+        sections = session.get("jobsheet_sections") or []
+        if sections:
+            session["page_count"] = sum(
+                len(section.get("pages") or []) for section in sections
+            )
+            self.update_session(session)
+            return sections
+
         pages = session.get("pages") or []
-        if pages:
-            if session.get("page_count") != len(pages):
-                session["page_count"] = len(pages)
-                self.update_session(session)
-            return pages
-        selected_count = len(session.get("selected_photo_ids") or [])
-        photo_count = len(session.get("uploads", {}).get("photos", []) or [])
-        count = selected_count or photo_count or session.get("page_count", 1) or 1
-        pages = [{"items": []} for _ in range(count)]
-        session["pages"] = pages
+        if not pages:
+            selected_count = len(session.get("selected_photo_ids") or [])
+            photo_count = len(session.get("uploads", {}).get("photos", []) or [])
+            count = selected_count or photo_count or session.get("page_count", 1) or 1
+            pages = [{"items": []} for _ in range(count)]
+
+        sections = [{"id": uuid4().hex, "title": "Section 1", "pages": pages}]
+        session["jobsheet_sections"] = sections
+        session["pages"] = []
+        session["page_count"] = len(pages)
         self.update_session(session)
-        return pages
+        return sections
 
     def save_upload(self, session_id: str, upload: UploadFile) -> StoredFile:
         filename = _safe_name(upload.filename or "upload")

server/requirements.txt

@@ -3,4 +3,5 @@ uvicorn[standard]>=0.30.0,<0.32.0
 python-multipart>=0.0.9,<0.1.0
 openpyxl>=3.1.2,<4.0.0
 xlrd>=2.0.1,<3.0.0
-playwright>=1.41.0,<2.0.0
+reportlab>=4.2.5,<5.0.0
+pillow>=10.4.0,<11.0.0