Multi-Image Web Fixed

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import InputDataPage from "./pages/InputDataPage";
 import EditReportPage from "./pages/EditReportPage";
 import EditLayoutsPage from "./pages/EditLayoutsPage";
 import ExportPage from "./pages/ExportPage";
+import RatingsInfoPage from "./pages/RatingsInfoPage";
 
 export default function App() {
   return (
@@ -21,6 +22,7 @@ export default function App() {
         <Route path="/edit-report" element={<EditReportPage />} />
         <Route path="/edit-layouts" element={<EditLayoutsPage />} />
         <Route path="/export" element={<ExportPage />} />
+        <Route path="/info/ratings" element={<RatingsInfoPage />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </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,6 +26,109 @@ type LayoutEntry = {
   span: boolean;
 };
 
+type RatingTone = {
+  label: string;
+  bg: string;
+  text: string;
+  border: string;
+};
+
+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, 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 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 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: `${key} - ${tone.label}`,
+    className: `${tone.bg} ${tone.text} ${tone.border}`,
+  };
+}
+
 function normalizeKey(value: string) {
   return value.toLowerCase().replace(/[^a-z0-9]/g, "");
 }
@@ -132,14 +236,14 @@ 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(" ")}
     >
       <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">
@@ -157,6 +261,7 @@ export function JobSheetTemplate({
   photos,
   orderLocked = false,
   variant = "full",
+  sectionLabel,
 }: JobSheetTemplateProps) {
   const inspectionDate =
     template?.inspection_date ?? session?.inspection_date ?? "";
@@ -183,6 +288,8 @@ export function JobSheetTemplate({
   const actionText = [actionType, requiredAction]
     .filter((value) => value && value.trim())
     .join(" - ");
+  const categoryBadge = formatRating(category, CATEGORY_SCALE);
+  const priorityBadge = formatRating(priority, PRIORITY_SCALE);
 
   const resolvedPhotos =
     photos && photos.length ? photos : getPhotosForPage(session, pageIndex, 1);
@@ -223,10 +330,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
@@ -289,8 +402,13 @@ export function JobSheetTemplate({
                   <div className="text-[10px] font-medium text-gray-500">
                     Category
                   </div>
-                  <span className="template-field inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-[11px] font-semibold text-gray-900 min-w-[96px]">
-                    {category}
+                  <span
+                    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>
                 </div>
 
@@ -298,8 +416,13 @@ export function JobSheetTemplate({
                   <div className="text-[10px] font-medium text-gray-500">
                     Priority
                   </div>
-                  <span className="template-field inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-[11px] font-semibold text-gray-900 min-w-[96px]">
-                    {priority}
+                  <span
+                    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>
                 </div>
               </div>
@@ -330,24 +453,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"
               />
             ))
           )}
@@ -359,6 +479,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

@@ -13,7 +13,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 }
@@ -27,6 +28,7 @@ class ReportEditor extends HTMLElement {
     this.apiBase = null;
     this._saveTimer = null;
     this._photoRatios = new Map();
+    this._indexMap = [];
   }
 
   connectedCallback() {
@@ -70,12 +72,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);
@@ -97,10 +109,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
@@ -750,6 +762,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 || "";
@@ -771,40 +784,46 @@ class ReportEditor extends HTMLElement {
       template.condition_description || session.notes || "";
     const requiredAction = template.required_action || "";
 
+    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
@@ -832,12 +851,22 @@ class ReportEditor extends HTMLElement {
               <div class="inline-flex items-center gap-10">
                 <div class="text-center space-y-1">
                   <div class="text-xs font-medium text-gray-500">Category</div>
-                  ${this._tplField("category", category, "Category", "inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-sm font-semibold text-gray-900 min-w-[96px]")}
+                  ${this._tplField(
+                    "category",
+                    categoryBadge.text,
+                    "Category",
+                    `inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold min-w-[120px] ${categoryBadge.className}`,
+                  )}
                 </div>
 
                 <div class="text-center space-y-1">
                   <div class="text-xs font-medium text-gray-500">Priority</div>
-                  ${this._tplField("priority", priority, "Priority", "inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-sm font-semibold text-gray-900 min-w-[96px]")}
+                  ${this._tplField(
+                    "priority",
+                    priorityBadge.text,
+                    "Priority",
+                    `inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold min-w-[120px] ${priorityBadge.className}`,
+                  )}
                 </div>
               </div>
             </div>
@@ -863,10 +892,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;">
@@ -879,6 +933,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>
     `;
@@ -887,9 +942,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() {
@@ -903,7 +958,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 {
@@ -921,11 +980,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;
@@ -943,10 +1002,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");
@@ -964,11 +1024,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");
@@ -983,7 +1192,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>
       `;
@@ -1015,8 +1227,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();
@@ -1027,7 +1257,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) {
@@ -1042,8 +1279,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);
     }
   }
 
@@ -1068,16 +1313,21 @@ class ReportEditor extends HTMLElement {
 
     const template = document.createElement("div");
     template.className = "absolute 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;">
@@ -1085,7 +1335,9 @@ class ReportEditor extends HTMLElement {
       </div>
     `;
     this.$canvas.appendChild(template);
-    this._bindTemplateFields();
+    if (!active.blank) {
+      this._bindTemplateFields();
+    }
 
     const items = this.activePage.items;
     const selectedId = this.state.selectedId;

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
@@ -304,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>
@@ -356,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

@@ -0,0 +1,294 @@
+import { BarChart2, ArrowLeft } from "react-feather";
+import { Link, useSearchParams } from "react-router-dom";
+
+import { PageShell } from "../components/PageShell";
+import { PageHeader } from "../components/PageHeader";
+import { buildSessionQuery, getSessionId } from "../lib/session";
+
+export default function RatingsInfoPage() {
+  const [searchParams] = useSearchParams();
+  const sessionId = getSessionId(searchParams.toString());
+  const sessionQuery = buildSessionQuery(sessionId);
+  return (
+    <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 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.
+          </p>
+        </div>
+
+        <div className="mt-4">
+          <label className="block text-sm font-medium text-gray-500 mb-2">
+            Condition Scale
+          </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>
+
+          <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"
+              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">
+            <table className="min-w-full divide-y divide-gray-200 text-sm">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                    Category
+                  </th>
+                  <th className="px-3 py-2 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                    Label
+                  </th>
+                  <th className="px-3 py-2 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                    Definition
+                  </th>
+                  <th className="px-3 py-2 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                    Strength
+                  </th>
+                  <th className="px-3 py-2 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                    Remedial Action
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                <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">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">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. 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">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">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 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>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <label className="block text-sm font-medium text-gray-500 mb-2">
+            Priority Scale
+          </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>
+
+          <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>
+
+          <div className="mt-3 overflow-x-auto rounded-lg border border-gray-200">
+            <table className="min-w-full divide-y divide-gray-200 text-sm">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                    Priority
+                  </th>
+                  <th className="px-3 py-2 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                    Label
+                  </th>
+                  <th className="px-3 py-2 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                    Definition
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                <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>
+                </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, 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 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 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 the extent of
+                    damage/deterioration with record keeping.
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+    </PageShell>
+  );
+}

frontend/src/pages/ReportViewerPage.tsx

@@ -13,16 +13,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("");
@@ -54,11 +56,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.";
@@ -68,10 +70,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));
@@ -90,7 +96,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(() => {
@@ -106,12 +117,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">
@@ -141,6 +152,7 @@ export default function ReportViewerPage() {
               <ArrowLeft className="h-4 w-4" />
               Back
             </Link>
+            <InfoMenu sessionQuery={sessionQuery} />
           </div>
         </div>
       </header>
@@ -240,6 +252,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[];
+};

server/app/api/routes/sessions.py

@@ -12,6 +12,8 @@ from ..deps import get_session_store
 from ..schemas import (
     PagesRequest,
     PagesResponse,
+    SectionsRequest,
+    SectionsResponse,
     SelectionRequest,
     SessionResponse,
     SessionStatusResponse,
@@ -95,6 +97,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)
 
 
@@ -149,6 +152,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,
@@ -247,8 +276,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)
 
@@ -276,10 +310,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(

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

@@ -2,6 +2,7 @@ from __future__ import annotations
 
 import math
 from pathlib import Path
+import re
 from typing import Iterable, List, Optional
 
 from reportlab.lib import colors
@@ -130,10 +131,14 @@ def _draw_label_value(
 
 
 def _badge_style(value: str, scale: dict) -> tuple[str, colors.Color, colors.Color]:
-    key = (value or "").strip().upper()
+    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 (value or "-"), colors.HexColor("#f9fafb"), colors.HexColor("#374151")
+        return (raw or "-"), colors.HexColor("#f9fafb"), colors.HexColor("#374151")
     return f"{key} - {tone['label']}", tone["bg"], tone["text"]
 
 

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")