Report Edit

README.md

@@ -2,13 +2,6 @@
 
 React (Vite) frontend + FastAPI backend with local session storage.
 
-## Canonical Structure
-
-The active app is in `frontend/` and `server/`. Any static HTML files at the
-repo root are legacy prototypes and are not used by the running app.
-
-Legacy copies are stored under `legacy/static-site/` for reference only.
-
 ## Project Layout
 
 ```
@@ -35,8 +28,6 @@ Legacy copies are stored under `legacy/static-site/` for reference only.
       lib/
     index.html
     vite.config.ts
-  legacy/
-    static-site/   # archived static HTML prototype (not used)
 ```
 
 ## Quick Start (Dev)
@@ -81,21 +72,3 @@ Environment variables for the API:
 
 Frontend environment variables:
 - `VITE_API_BASE` (optional, default: `/api`)
-
-## Optional Cleanup
-
-If you want a cleaner repo, you can remove the legacy static files from the root:
-
-- `assets/`
-- `components/`
-- `templates/`
-- `index.html`
-- `processing.html`
-- `review-setup.html`
-- `report-viewer.html`
-- `edit-layouts.html`
-- `export.html`
-- `style.css`
-- `script.js`
-
-They are already copied to `legacy/static-site/` for reference.

_move_test.txt

@@ -1 +0,0 @@
-Temporary file created during automated cleanup. Safe to delete.

components/report-editor.js

@@ -1,1185 +0,0 @@
-class ReportEditor extends HTMLElement {
-  constructor() {
-    super();
-    this._mounted = false;
-
-    this.BASE_W = 595;  // A4 points-ish (screen independent model)
-    this.BASE_H = 842;
-
-    this.state = {
-      isOpen: false,
-      zoom: 1,
-      activePage: 0,
-      pages: [],              // [{ items: [...] }]
-      selectedId: null,
-      tool: "select",         // select | text | rect
-      dragging: null,         // { id, startX, startY, origX, origY }
-      resizing: null,         // { id, handle, startX, startY, orig }
-      undo: [],               // stack of serialized states (current page)
-      redo: [],
-      payload: null,
-    };
-
-    this.sessionId = null;
-    this.apiBase = null;
-    this._saveTimer = null;
-  }
-
-  connectedCallback() {
-    if (this._mounted) return;
-    this._mounted = true;
-    this.render();
-    this.bind();
-    this.hide();
-  }
-
-  // Public API
-  open({ payload, pageIndex = 0, totalPages = 6, sessionId = null } = {}) {
-    this.state.payload = payload ?? null;
-    this.state.isOpen = true;
-    this.sessionId =
-      sessionId ||
-      (window.REPEX && typeof window.REPEX.getSessionId === "function"
-        ? window.REPEX.getSessionId()
-        : null);
-    this.apiBase = window.REPEX && window.REPEX.apiBase ? window.REPEX.apiBase : null;
-
-    // Load existing editor pages from storage, else initialize
-    const stored = this._loadPages();
-    if (stored && Array.isArray(stored.pages) && stored.pages.length) {
-      this.state.pages = stored.pages;
-    } else {
-      this.state.pages = Array.from({ length: totalPages }, () => ({ items: [] }));
-      this._savePages();
-    }
-
-    this.state.activePage = Math.min(Math.max(0, pageIndex), this.state.pages.length - 1);
-    this.state.selectedId = null;
-    this.state.tool = "select";
-    this.state.undo = [];
-    this.state.redo = [];
-
-    this.show();
-    this.updateAll();
-
-    if (this.sessionId) {
-      this._loadPagesFromServer().then((pages) => {
-        if (pages && pages.length) {
-          this.state.pages = pages;
-          this.state.activePage = Math.min(
-            Math.max(0, pageIndex),
-            this.state.pages.length - 1
-          );
-          this.updateAll();
-        }
-      });
-    }
-  }
-
-  close() {
-    this.state.isOpen = false;
-    this.hide();
-    this.dispatchEvent(new CustomEvent("editor-closed", { bubbles: true }));
-  }
-
-  // ---------- Rendering ----------
-  render() {
-    this.innerHTML = `
-      <div class="fixed inset-0 z-50 hidden" data-overlay>
-        <div class="absolute inset-0 bg-black/30"></div>
-
-        <div class="relative h-full w-full flex items-center justify-center p-4">
-          <div class="w-full max-w-6xl bg-white rounded-xl shadow-sm ring-1 ring-gray-200 overflow-hidden">
-            <!-- Header -->
-            <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
-              <div class="flex items-center gap-2">
-                <div class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-gray-50 border border-gray-200">
-                  <span class="text-xs font-bold text-gray-700">A4</span>
-                </div>
-                <div>
-                  <div class="text-sm font-semibold text-gray-900">Edit Report</div>
-                  <div class="text-xs text-gray-500">Drag, resize, format and arrange elements</div>
-                </div>
-              </div>
-
-              <div class="flex items-center gap-2">
-                <button data-btn="undo"
-                  class="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">
-                  <i data-feather="rotate-ccw" class="h-4 w-4"></i> Undo
-                </button>
-                <button data-btn="redo"
-                  class="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">
-                  <i data-feather="rotate-cw" class="h-4 w-4"></i> Redo
-                </button>
-
-                <button data-btn="save"
-                  class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-3 py-2 text-sm font-semibold text-white hover:bg-emerald-700 transition">
-                  <i data-feather="save" class="h-4 w-4"></i> Save
-                </button>
-
-                <button data-btn="close"
-                  class="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">
-                  <i data-feather="x" class="h-4 w-4"></i> Done
-                </button>
-              </div>
-            </div>
-
-            <!-- Body -->
-            <div class="grid grid-cols-1 lg:grid-cols-[240px,1fr,280px] gap-0 min-h-[70vh]">
-              <!-- Pages sidebar -->
-              <aside class="border-r border-gray-200 bg-white p-3">
-                <div class="flex items-center justify-between mb-3">
-                  <div class="text-sm font-semibold text-gray-900">Pages</div>
-                  <button data-btn="add-page"
-                    class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                    <i data-feather="plus" class="h-4 w-4"></i> Add
-                  </button>
-                </div>
-
-                <div class="space-y-2 max-h-[60vh] overflow-auto pr-1" data-page-list></div>
-
-                <div class="mt-3 text-xs text-gray-500">
-                  Tip: Click a page to edit. Your edits are saved to the server.
-                </div>
-              </aside>
-
-              <!-- Canvas + toolbar -->
-              <section class="bg-gray-50 p-3">
-                <!-- Toolbar -->
-                <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 mb-3">
-                  <div class="flex flex-wrap items-center gap-2">
-                    <button data-tool="select"
-                      class="toolBtn 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">
-                      <i data-feather="mouse-pointer" class="h-4 w-4"></i> Select
-                    </button>
-
-                    <button data-tool="text"
-                      class="toolBtn 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">
-                      <i data-feather="type" class="h-4 w-4"></i> Text
-                    </button>
-
-                    <button data-tool="rect"
-                      class="toolBtn 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">
-                      <i data-feather="square" class="h-4 w-4"></i> Shape
-                    </button>
-
-                    <button data-btn="add-image"
-                      class="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">
-                      <i data-feather="image" class="h-4 w-4"></i> Image
-                    </button>
-
-                    <input data-file="image" type="file" accept="image/*" class="hidden" />
-                  </div>
-
-                  <div class="flex items-center gap-2">
-                    <div class="text-xs font-semibold text-gray-600">Zoom</div>
-                    <button data-btn="zoom-out"
-                      class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-2 hover:bg-gray-50 transition">
-                      <i data-feather="minus" class="h-4 w-4"></i>
-                    </button>
-                    <div class="text-xs font-semibold text-gray-700 w-14 text-center" data-zoom-label>100%</div>
-                    <button data-btn="zoom-in"
-                      class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-2 hover:bg-gray-50 transition">
-                      <i data-feather="plus" class="h-4 w-4"></i>
-                    </button>
-                  </div>
-                </div>
-
-                <!-- Canvas area -->
-                <div class="flex justify-center">
-                  <div class="relative" data-canvas-wrap>
-                    <div
-                      data-canvas
-                      class="relative bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden select-none"
-                      style="width: min(100%, 700px); aspect-ratio: 210/297;"
-                      aria-label="Editable A4 canvas"
-                    >
-                      <!-- items injected here -->
-                    </div>
-                  </div>
-                </div>
-
-                <div class="mt-3 text-xs text-gray-500">
-                  Drag elements to move. Drag corner handles to resize. Double-click text to edit.
-                </div>
-              </section>
-
-              <!-- Properties panel -->
-              <aside class="border-l border-gray-200 bg-white p-3">
-                <div class="text-sm font-semibold text-gray-900 mb-2">Properties</div>
-
-                <div data-empty-props class="text-sm text-gray-600 rounded-lg border border-gray-200 bg-gray-50 p-3">
-                  Select an element to edit formatting and layout options.
-                </div>
-
-                <div data-props class="hidden space-y-4">
-                  <!-- Arrange -->
-                  <div class="rounded-lg border border-gray-200 p-3">
-                    <div class="text-xs font-semibold text-gray-600 mb-2">Arrange</div>
-                    <div class="flex flex-wrap gap-2">
-                      <button data-btn="bring-front"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="chevrons-up" class="h-4 w-4"></i> Front
-                      </button>
-                      <button data-btn="send-back"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="chevrons-down" class="h-4 w-4"></i> Back
-                      </button>
-                      <button data-btn="duplicate"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="copy" class="h-4 w-4"></i> Duplicate
-                      </button>
-                      <button data-btn="delete"
-                        class="inline-flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs font-semibold text-red-700 hover:bg-red-100 transition">
-                        <i data-feather="trash-2" class="h-4 w-4"></i> Delete
-                      </button>
-                    </div>
-                  </div>
-
-                  <!-- Text controls -->
-                  <div data-props-text class="rounded-lg border border-gray-200 p-3 hidden">
-                    <div class="text-xs font-semibold text-gray-600 mb-2">Text</div>
-
-                    <div class="grid grid-cols-2 gap-2">
-                      <label class="text-xs text-gray-600">
-                        Font size
-                        <input data-prop="fontSize" type="number" min="8" max="72"
-                          class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500" />
-                      </label>
-
-                      <label class="text-xs text-gray-600">
-                        Color
-                        <input data-prop="color" type="color"
-                          class="mt-1 w-full h-[40px] rounded-lg border border-gray-300 px-2 py-1" />
-                      </label>
-                    </div>
-
-                    <div class="flex flex-wrap gap-2 mt-2">
-                      <button data-btn="bold"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="bold" class="h-4 w-4"></i>
-                      </button>
-                      <button data-btn="italic"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="italic" class="h-4 w-4"></i>
-                      </button>
-                      <button data-btn="underline"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="underline" class="h-4 w-4"></i>
-                      </button>
-
-                      <button data-btn="align-left"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="align-left" class="h-4 w-4"></i>
-                      </button>
-                      <button data-btn="align-center"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="align-center" class="h-4 w-4"></i>
-                      </button>
-                      <button data-btn="align-right"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="align-right" class="h-4 w-4"></i>
-                      </button>
-                    </div>
-                  </div>
-
-                  <!-- Shape controls -->
-                  <div data-props-rect class="rounded-lg border border-gray-200 p-3 hidden">
-                    <div class="text-xs font-semibold text-gray-600 mb-2">Shape</div>
-
-                    <div class="grid grid-cols-2 gap-2">
-                      <label class="text-xs text-gray-600">
-                        Fill
-                        <input data-prop="fill" type="color"
-                          class="mt-1 w-full h-[40px] rounded-lg border border-gray-300 px-2 py-1" />
-                      </label>
-
-                      <label class="text-xs text-gray-600">
-                        Border
-                        <input data-prop="stroke" type="color"
-                          class="mt-1 w-full h-[40px] rounded-lg border border-gray-300 px-2 py-1" />
-                      </label>
-                    </div>
-
-                    <label class="text-xs text-gray-600 block mt-2">
-                      Border width
-                      <input data-prop="strokeWidth" type="number" min="0" max="12"
-                        class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500" />
-                    </label>
-                  </div>
-
-                  <!-- Image controls -->
-                  <div data-props-image class="rounded-lg border border-gray-200 p-3 hidden">
-                    <div class="text-xs font-semibold text-gray-600 mb-2">Image</div>
-                    <button data-btn="replace-image"
-                      class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                      <i data-feather="refresh-cw" class="h-4 w-4"></i> Replace image
-                    </button>
-                    <input data-file="replace" type="file" accept="image/*" class="hidden" />
-                  </div>
-                </div>
-
-                <div class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
-                  <div class="font-semibold text-gray-800 mb-1">Keyboard shortcuts</div>
-                  <ul class="list-disc pl-4 space-y-1">
-                    <li><span class="font-semibold">Delete</span>: remove selected</li>
-                    <li><span class="font-semibold">Ctrl/Cmd+Z</span>: undo</li>
-                    <li><span class="font-semibold">Ctrl/Cmd+Y</span>: redo</li>
-                    <li><span class="font-semibold">Esc</span>: close editor</li>
-                  </ul>
-                </div>
-              </aside>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  bind() {
-    this.$overlay = this.querySelector("[data-overlay]");
-    this.$pageList = this.querySelector("[data-page-list]");
-    this.$canvas = this.querySelector("[data-canvas]");
-    this.$zoomLabel = this.querySelector("[data-zoom-label]");
-
-    this.$emptyProps = this.querySelector("[data-empty-props]");
-    this.$props = this.querySelector("[data-props]");
-    this.$propsText = this.querySelector("[data-props-text]");
-    this.$propsRect = this.querySelector("[data-props-rect]");
-    this.$propsImage = this.querySelector("[data-props-image]");
-
-    this.$imgFile = this.querySelector('[data-file="image"]');
-    this.$replaceFile = this.querySelector('[data-file="replace"]');
-
-    // header buttons
-    this.querySelector('[data-btn="close"]').addEventListener("click", () => this.close());
-    this.querySelector('[data-btn="save"]').addEventListener("click", () => this._savePages(true));
-    this.querySelector('[data-btn="undo"]').addEventListener("click", () => this.undo());
-    this.querySelector('[data-btn="redo"]').addEventListener("click", () => this.redo());
-
-    // tools
-    this.querySelectorAll(".toolBtn").forEach(btn => {
-      btn.addEventListener("click", () => {
-        this.state.tool = btn.dataset.tool;
-        this.updateToolbar();
-      });
-    });
-
-    // toolbar buttons
-    this.querySelector('[data-btn="add-image"]').addEventListener("click", () => this.$imgFile.click());
-    this.$imgFile.addEventListener("change", (e) => this._handleImageUpload(e, "add"));
-
-    this.querySelector('[data-btn="zoom-in"]').addEventListener("click", () => this.setZoom(this.state.zoom + 0.1));
-    this.querySelector('[data-btn="zoom-out"]').addEventListener("click", () => this.setZoom(this.state.zoom - 0.1));
-
-    // pages
-    this.querySelector('[data-btn="add-page"]').addEventListener("click", () => this.addPage());
-
-    // properties buttons
-    this.querySelector('[data-btn="delete"]').addEventListener("click", () => this.deleteSelected());
-    this.querySelector('[data-btn="duplicate"]').addEventListener("click", () => this.duplicateSelected());
-    this.querySelector('[data-btn="bring-front"]').addEventListener("click", () => this.bringFront());
-    this.querySelector('[data-btn="send-back"]').addEventListener("click", () => this.sendBack());
-
-    // text props
-    this.querySelector('[data-btn="bold"]').addEventListener("click", () => this.toggleTextStyle("bold"));
-    this.querySelector('[data-btn="italic"]').addEventListener("click", () => this.toggleTextStyle("italic"));
-    this.querySelector('[data-btn="underline"]').addEventListener("click", () => this.toggleTextStyle("underline"));
-    this.querySelector('[data-btn="align-left"]').addEventListener("click", () => this.setTextAlign("left"));
-    this.querySelector('[data-btn="align-center"]').addEventListener("click", () => this.setTextAlign("center"));
-    this.querySelector('[data-btn="align-right"]').addEventListener("click", () => this.setTextAlign("right"));
-
-    this.querySelector('[data-prop="fontSize"]').addEventListener("input", (e) => this.setProp("fontSize", Number(e.target.value || 12)));
-    this.querySelector('[data-prop="color"]').addEventListener("input", (e) => this.setProp("color", e.target.value));
-
-    // rect props
-    this.querySelector('[data-prop="fill"]').addEventListener("input", (e) => this.setProp("fill", e.target.value));
-    this.querySelector('[data-prop="stroke"]').addEventListener("input", (e) => this.setProp("stroke", e.target.value));
-    this.querySelector('[data-prop="strokeWidth"]').addEventListener("input", (e) => this.setProp("strokeWidth", Number(e.target.value || 0)));
-
-    // image replace
-    this.querySelector('[data-btn="replace-image"]').addEventListener("click", () => this.$replaceFile.click());
-    this.$replaceFile.addEventListener("change", (e) => this._handleImageUpload(e, "replace"));
-
-    // canvas interactions
-    this.$canvas.addEventListener("pointerdown", (e) => this.onCanvasPointerDown(e));
-    window.addEventListener("pointermove", (e) => this.onPointerMove(e));
-    window.addEventListener("pointerup", () => this.onPointerUp());
-
-    // keyboard shortcuts
-    window.addEventListener("keydown", (e) => {
-      if (!this.state.isOpen) return;
-
-      if (e.key === "Escape") {
-        e.preventDefault();
-        this.close();
-      }
-
-      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
-        e.preventDefault();
-        this.undo();
-      }
-      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "y") {
-        e.preventDefault();
-        this.redo();
-      }
-
-      if (e.key === "Delete" || e.key === "Backspace") {
-        // avoid deleting while typing in contenteditable
-        const active = document.activeElement;
-        const isEditingText = active && active.getAttribute && active.getAttribute("contenteditable") === "true";
-        if (!isEditingText) this.deleteSelected();
-      }
-    });
-  }
-
-  // ---------- Core helpers ----------
-  show() {
-    this.$overlay.classList.remove("hidden");
-    this.state.isOpen = true;
-    this.updateAll();
-  }
-
-  hide() {
-    this.$overlay.classList.add("hidden");
-    this.state.isOpen = false;
-  }
-
-  setZoom(z) {
-    const clamped = Math.max(0.6, Math.min(1.4, Number(z.toFixed(2))));
-    this.state.zoom = clamped;
-    this.updateCanvasScale();
-  }
-
-  get activePage() {
-    return this.state.pages[this.state.activePage];
-  }
-
-  updateAll() {
-    this.updateToolbar();
-    this.renderPageList();
-    this.renderCanvas();
-    this.updateCanvasScale();
-    this.updatePropsPanel();
-    this.updateUndoRedoButtons();
-    this._refreshIcons();
-  }
-
-  updateToolbar() {
-    this.querySelectorAll(".toolBtn").forEach(btn => {
-      const active = btn.dataset.tool === this.state.tool;
-      btn.classList.toggle("bg-gray-900", active);
-      btn.classList.toggle("text-white", active);
-      btn.classList.toggle("border-gray-900", active);
-
-      if (!active) {
-        btn.classList.add("bg-white", "text-gray-800", "border-gray-200");
-        btn.classList.remove("bg-gray-900", "text-white", "border-gray-900");
-      } else {
-        btn.classList.remove("bg-white", "text-gray-800", "border-gray-200");
-      }
-    });
-  }
-
-  updateCanvasScale() {
-    if (!this.$canvas) return;
-    this.$canvas.style.transformOrigin = "top center";
-    this.$canvas.style.transform = `scale(${this.state.zoom})`;
-    this.$zoomLabel.textContent = `${Math.round(this.state.zoom * 100)}%`;
-  }
-
-  _refreshIcons() {
-    if (window.feather && typeof window.feather.replace === "function") {
-      window.feather.replace();
-    }
-  }
-
-  // ---------- Storage ----------
-  _storageKey() {
-    if (this.sessionId) {
-      return `repex_report_pages_v1_${this.sessionId}`;
-    }
-    return "repex_report_pages_v1";
-  }
-
-  _loadPages() {
-    try {
-      const raw = localStorage.getItem(this._storageKey());
-      return raw ? JSON.parse(raw) : null;
-    } catch {
-      return null;
-    }
-  }
-
-  _savePages(showToast = false) {
-    try {
-      localStorage.setItem(this._storageKey(), JSON.stringify({ pages: this.state.pages }));
-      this._scheduleServerSave();
-      if (showToast) this._toast("Saved");
-    } catch {
-      if (showToast) this._toast("Save failed");
-    }
-  }
-
-  _apiRoot() {
-    if (this.apiBase) return this.apiBase.replace(/\/$/, "");
-    if (window.REPEX && window.REPEX.apiBase) return window.REPEX.apiBase.replace(/\/$/, "");
-    return "";
-  }
-
-  async _loadPagesFromServer() {
-    const base = this._apiRoot();
-    if (!base || !this.sessionId) return null;
-    try {
-      const res = await fetch(`${base}/sessions/${this.sessionId}/pages`);
-      if (!res.ok) return null;
-      const data = await res.json();
-      if (data && Array.isArray(data.pages)) {
-        return data.pages;
-      }
-    } catch {}
-    return null;
-  }
-
-  _scheduleServerSave() {
-    if (!this.sessionId) return;
-    if (this._saveTimer) clearTimeout(this._saveTimer);
-    this._saveTimer = setTimeout(() => {
-      this._savePagesToServer();
-    }, 800);
-  }
-
-  async _savePagesToServer() {
-    const base = this._apiRoot();
-    if (!base || !this.sessionId) return;
-    try {
-      const res = await fetch(`${base}/sessions/${this.sessionId}/pages`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ pages: this.state.pages }),
-      });
-      if (!res.ok) {
-        throw new Error("Failed");
-      }
-    } catch {
-      this._toast("Sync failed");
-    }
-  }
-
-  _toast(text) {
-    const el = document.createElement("div");
-    el.className = "fixed z-[60] bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-gray-900 text-white text-sm font-semibold px-4 py-2 shadow";
-    el.textContent = text;
-    document.body.appendChild(el);
-    setTimeout(() => el.remove(), 1200);
-  }
-
-  // ---------- Page list ----------
-  renderPageList() {
-    this.$pageList.innerHTML = "";
-
-    this.state.pages.forEach((_, idx) => {
-      const active = idx === this.state.activePage;
-
-      const btn = document.createElement("button");
-      btn.type = "button";
-      btn.className =
-        "w-full text-left rounded-lg border px-3 py-2 transition " +
-        (active
-          ? "border-gray-900 bg-gray-900 text-white"
-          : "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 class="text-xs ${active ? "text-white/80" : "text-gray-500"}">${this.state.pages[idx].items.length} items</div>
-        </div>
-      `;
-      btn.addEventListener("click", () => {
-        this.state.activePage = idx;
-        this.state.selectedId = null;
-        this.state.undo = [];
-        this.state.redo = [];
-        this.updateAll();
-      });
-
-      this.$pageList.appendChild(btn);
-    });
-  }
-
-  addPage() {
-    this._pushUndoSnapshot();
-    this.state.pages.push({ items: [] });
-    this.state.activePage = this.state.pages.length - 1;
-    this.state.selectedId = null;
-    this._savePages();
-    this.updateAll();
-  }
-
-  // ---------- Canvas rendering ----------
-  renderCanvas() {
-    this.$canvas.innerHTML = "";
-
-    // Click-away surface
-    const surface = document.createElement("div");
-    surface.className = "absolute inset-0";
-    surface.addEventListener("pointerdown", (e) => {
-      // only clear selection if clicking empty space
-      if (e.target === surface) {
-        this.state.selectedId = null;
-        this.updatePropsPanel();
-        this.renderCanvas();
-      }
-    });
-    this.$canvas.appendChild(surface);
-
-    const items = this.activePage.items;
-    const selectedId = this.state.selectedId;
-
-    items
-      .slice()
-      .sort((a, b) => (a.z ?? 0) - (b.z ?? 0))
-      .forEach(item => {
-        const wrapper = document.createElement("div");
-        wrapper.dataset.itemId = item.id;
-        wrapper.className = "absolute";
-
-        // scaled px placement based on model units
-        const scale = this._canvasScale();
-        wrapper.style.left = `${item.x * scale}px`;
-        wrapper.style.top = `${item.y * scale}px`;
-        wrapper.style.width = `${item.w * scale}px`;
-        wrapper.style.height = `${item.h * scale}px`;
-        wrapper.style.zIndex = String(item.z ?? 0);
-
-        const isSelected = selectedId === item.id;
-        if (isSelected) wrapper.classList.add("ring-2", "ring-blue-300");
-
-        // content
-        if (item.type === "text") {
-          const content = document.createElement("div");
-          content.className = "w-full h-full p-2 overflow-hidden";
-          content.setAttribute("contenteditable", "true");
-          content.style.fontSize = `${(item.style?.fontSize ?? 14) * scale}px`;
-          content.style.fontWeight = item.style?.bold ? "700" : "400";
-          content.style.fontStyle = item.style?.italic ? "italic" : "normal";
-          content.style.textDecoration = item.style?.underline ? "underline" : "none";
-          content.style.color = item.style?.color ?? "#111827";
-          content.style.textAlign = item.style?.align ?? "left";
-          content.style.whiteSpace = "pre-wrap";
-          content.style.outline = "none";
-          content.innerText = item.content ?? "Double-click to edit";
-
-          // update model when typing (debounced)
-          let t = null;
-          content.addEventListener("input", () => {
-            clearTimeout(t);
-            t = setTimeout(() => {
-              const it = this._findItem(item.id);
-              if (!it) return;
-              it.content = content.innerText;
-              this._savePages();
-            }, 250);
-          });
-
-          // selecting the item (click wrapper)
-          content.addEventListener("pointerdown", (e) => {
-            e.stopPropagation();
-            this.selectItem(item.id);
-          });
-
-          wrapper.appendChild(content);
-        }
-
-        if (item.type === "image") {
-          const img = document.createElement("img");
-          img.className = "w-full h-full object-contain bg-white";
-          img.src = item.src;
-          img.alt = item.name ?? "Image";
-          img.draggable = false;
-          img.addEventListener("pointerdown", (e) => {
-            e.stopPropagation();
-            this.selectItem(item.id);
-          });
-          wrapper.appendChild(img);
-        }
-
-        if (item.type === "rect") {
-          const box = document.createElement("div");
-          box.className = "w-full h-full";
-          box.style.background = item.style?.fill ?? "#ffffff";
-          box.style.borderColor = item.style?.stroke ?? "#111827";
-          box.style.borderWidth = `${(item.style?.strokeWidth ?? 1) * scale}px`;
-          box.style.borderStyle = "solid";
-          box.addEventListener("pointerdown", (e) => {
-            e.stopPropagation();
-            this.selectItem(item.id);
-          });
-          wrapper.appendChild(box);
-        }
-
-        // wrapper drag handler
-        wrapper.addEventListener("pointerdown", (e) => this.onItemPointerDown(e, item.id));
-
-        // resize handles (selected only)
-        if (isSelected) {
-          ["nw", "ne", "sw", "se"].forEach(handle => {
-            const h = document.createElement("div");
-            h.dataset.handle = handle;
-            h.className =
-              "absolute w-3 h-3 bg-white border border-blue-300 rounded-sm";
-            if (handle === "nw") { h.style.left = "-6px"; h.style.top = "-6px"; }
-            if (handle === "ne") { h.style.right = "-6px"; h.style.top = "-6px"; }
-            if (handle === "sw") { h.style.left = "-6px"; h.style.bottom = "-6px"; }
-            if (handle === "se") { h.style.right = "-6px"; h.style.bottom = "-6px"; }
-
-            h.style.cursor = `${handle}-resize`;
-            h.addEventListener("pointerdown", (e) => {
-              e.stopPropagation();
-              this.startResize(e, item.id, handle);
-            });
-            wrapper.appendChild(h);
-          });
-        }
-
-        this.$canvas.appendChild(wrapper);
-      });
-  }
-
-  _canvasScale() {
-    // actual displayed width divided by model width
-    const rect = this.$canvas.getBoundingClientRect();
-    const w = rect.width; // already pre-zoom; we apply zoom with CSS transform
-    return w / this.BASE_W;
-  }
-
-  // ---------- Item creation ----------
-  onCanvasPointerDown(e) {
-    // prevent adding when clicking existing item
-    const hit = e.target.closest("[data-item-id]");
-    if (hit) return;
-
-    const { x, y } = this._eventToModelPoint(e);
-
-    if (this.state.tool === "text") {
-      this._pushUndoSnapshot();
-      const id = this._id();
-      this.activePage.items.push({
-        id,
-        type: "text",
-        x: this._clamp(x, 0, this.BASE_W - 200),
-        y: this._clamp(y, 0, this.BASE_H - 80),
-        w: 220,
-        h: 80,
-        z: this._maxZ() + 1,
-        content: "New text",
-        style: { fontSize: 14, bold: false, italic: false, underline: false, color: "#111827", align: "left" }
-      });
-      this.selectItem(id);
-      this._savePages();
-      this.renderCanvas();
-      this.updatePropsPanel();
-      return;
-    }
-
-    if (this.state.tool === "rect") {
-      this._pushUndoSnapshot();
-      const id = this._id();
-      this.activePage.items.push({
-        id,
-        type: "rect",
-        x: this._clamp(x, 0, this.BASE_W - 200),
-        y: this._clamp(y, 0, this.BASE_H - 120),
-        w: 220,
-        h: 120,
-        z: this._maxZ() + 1,
-        style: { fill: "#ffffff", stroke: "#111827", strokeWidth: 1 }
-      });
-      this.selectItem(id);
-      this._savePages();
-      this.renderCanvas();
-      this.updatePropsPanel();
-      return;
-    }
-
-    // select tool clicking empty space clears selection
-    if (this.state.tool === "select") {
-      this.state.selectedId = null;
-      this.updatePropsPanel();
-      this.renderCanvas();
-    }
-  }
-
-  _eventToModelPoint(e) {
-    const canvasRect = this.$canvas.getBoundingClientRect();
-    // account for zoom (transform), use client coords mapping
-    const zoom = this.state.zoom;
-    const xPx = (e.clientX - canvasRect.left) / zoom;
-    const yPx = (e.clientY - canvasRect.top) / zoom;
-
-    const scale = canvasRect.width / this.BASE_W; // pre-zoom scale
-    return { x: xPx / scale, y: yPx / scale };
-  }
-
-  // ---------- Selection / Drag / Resize ----------
-  selectItem(id) {
-    this.state.selectedId = id;
-    this.updatePropsPanel();
-    this.renderCanvas();
-  }
-
-  onItemPointerDown(e, id) {
-    // ignore if resizing handle
-    if (e.target && e.target.dataset && e.target.dataset.handle) return;
-
-    // select
-    this.selectItem(id);
-
-    // start drag only when using select tool
-    if (this.state.tool !== "select") return;
-
-    this._pushUndoSnapshot();
-
-    const it = this._findItem(id);
-    if (!it) return;
-
-    const { x, y } = this._eventToModelPoint(e);
-    this.state.dragging = {
-      id,
-      startX: x,
-      startY: y,
-      origX: it.x,
-      origY: it.y
-    };
-
-    e.preventDefault();
-  }
-
-  startResize(e, id, handle) {
-    this._pushUndoSnapshot();
-
-    const it = this._findItem(id);
-    if (!it) return;
-
-    const { x, y } = this._eventToModelPoint(e);
-    this.state.resizing = {
-      id,
-      handle,
-      startX: x,
-      startY: y,
-      orig: { x: it.x, y: it.y, w: it.w, h: it.h }
-    };
-    e.preventDefault();
-  }
-
-  onPointerMove(e) {
-    if (!this.state.isOpen) return;
-
-    if (this.state.dragging) {
-      const d = this.state.dragging;
-      const it = this._findItem(d.id);
-      if (!it) return;
-
-      const { x, y } = this._eventToModelPoint(e);
-      const dx = x - d.startX;
-      const dy = y - d.startY;
-
-      it.x = this._clamp(d.origX + dx, 0, this.BASE_W - it.w);
-      it.y = this._clamp(d.origY + dy, 0, this.BASE_H - it.h);
-
-      this._savePages();
-      this.renderCanvas();
-      return;
-    }
-
-    if (this.state.resizing) {
-      const r = this.state.resizing;
-      const it = this._findItem(r.id);
-      if (!it) return;
-
-      const { x, y } = this._eventToModelPoint(e);
-      const dx = x - r.startX;
-      const dy = y - r.startY;
-
-      const o = r.orig;
-      const minW = 40, minH = 30;
-
-      let nx = o.x, ny = o.y, nw = o.w, nh = o.h;
-
-      if (r.handle.includes("e")) nw = this._clamp(o.w + dx, minW, this.BASE_W - o.x);
-      if (r.handle.includes("s")) nh = this._clamp(o.h + dy, minH, this.BASE_H - o.y);
-      if (r.handle.includes("w")) {
-        nw = this._clamp(o.w - dx, minW, o.w + o.x);
-        nx = this._clamp(o.x + dx, 0, o.x + o.w - minW);
-      }
-      if (r.handle.includes("n")) {
-        nh = this._clamp(o.h - dy, minH, o.h + o.y);
-        ny = this._clamp(o.y + dy, 0, o.y + o.h - minH);
-      }
-
-      it.x = nx; it.y = ny; it.w = nw; it.h = nh;
-
-      this._savePages();
-      this.renderCanvas();
-    }
-  }
-
-  onPointerUp() {
-    if (!this.state.isOpen) return;
-
-    if (this.state.dragging) {
-      this.state.dragging = null;
-      this.updateUndoRedoButtons();
-    }
-    if (this.state.resizing) {
-      this.state.resizing = null;
-      this.updateUndoRedoButtons();
-    }
-  }
-
-  // ---------- Properties panel ----------
-  updatePropsPanel() {
-    const it = this._findItem(this.state.selectedId);
-    const has = !!it;
-
-    this.$emptyProps.classList.toggle("hidden", has);
-    this.$props.classList.toggle("hidden", !has);
-
-    // hide all groups first
-    this.$propsText.classList.add("hidden");
-    this.$propsRect.classList.add("hidden");
-    this.$propsImage.classList.add("hidden");
-
-    if (!it) return;
-
-    if (it.type === "text") {
-      this.$propsText.classList.remove("hidden");
-      this.querySelector('[data-prop="fontSize"]').value = it.style?.fontSize ?? 14;
-      this.querySelector('[data-prop="color"]').value = it.style?.color ?? "#111827";
-    }
-
-    if (it.type === "rect") {
-      this.$propsRect.classList.remove("hidden");
-      this.querySelector('[data-prop="fill"]').value = it.style?.fill ?? "#ffffff";
-      this.querySelector('[data-prop="stroke"]').value = it.style?.stroke ?? "#111827";
-      this.querySelector('[data-prop="strokeWidth"]').value = it.style?.strokeWidth ?? 1;
-    }
-
-    if (it.type === "image") {
-      this.$propsImage.classList.remove("hidden");
-    }
-
-    this._refreshIcons();
-  }
-
-  setProp(key, value) {
-    const it = this._findItem(this.state.selectedId);
-    if (!it) return;
-
-    this._pushUndoSnapshot();
-
-    it.style = it.style || {};
-    it.style[key] = value;
-
-    this._savePages();
-    this.renderCanvas();
-    this.updatePropsPanel();
-    this.updateUndoRedoButtons();
-  }
-
-  toggleTextStyle(which) {
-    const it = this._findItem(this.state.selectedId);
-    if (!it || it.type !== "text") return;
-
-    this._pushUndoSnapshot();
-
-    it.style = it.style || {};
-    if (which === "bold") it.style.bold = !it.style.bold;
-    if (which === "italic") it.style.italic = !it.style.italic;
-    if (which === "underline") it.style.underline = !it.style.underline;
-
-    this._savePages();
-    this.renderCanvas();
-    this.updateUndoRedoButtons();
-  }
-
-  setTextAlign(align) {
-    const it = this._findItem(this.state.selectedId);
-    if (!it || it.type !== "text") return;
-    this.setProp("align", align);
-  }
-
-  // ---------- Arrange ----------
-  bringFront() {
-    const it = this._findItem(this.state.selectedId);
-    if (!it) return;
-    this._pushUndoSnapshot();
-    it.z = this._maxZ() + 1;
-    this._savePages();
-    this.renderCanvas();
-    this.updateUndoRedoButtons();
-  }
-
-  sendBack() {
-    const it = this._findItem(this.state.selectedId);
-    if (!it) return;
-    this._pushUndoSnapshot();
-    it.z = this._minZ() - 1;
-    this._savePages();
-    this.renderCanvas();
-    this.updateUndoRedoButtons();
-  }
-
-  duplicateSelected() {
-    const it = this._findItem(this.state.selectedId);
-    if (!it) return;
-    this._pushUndoSnapshot();
-
-    const copy = JSON.parse(JSON.stringify(it));
-    copy.id = this._id();
-    copy.x = this._clamp(copy.x + 12, 0, this.BASE_W - copy.w);
-    copy.y = this._clamp(copy.y + 12, 0, this.BASE_H - copy.h);
-    copy.z = this._maxZ() + 1;
-
-    this.activePage.items.push(copy);
-    this.state.selectedId = copy.id;
-
-    this._savePages();
-    this.updateAll();
-    this.updateUndoRedoButtons();
-  }
-
-  deleteSelected() {
-    const id = this.state.selectedId;
-    if (!id) return;
-
-    this._pushUndoSnapshot();
-
-    this.activePage.items = this.activePage.items.filter(x => x.id !== id);
-    this.state.selectedId = null;
-
-    this._savePages();
-    this.updateAll();
-    this.updateUndoRedoButtons();
-  }
-
-  // ---------- Images ----------
-  _handleImageUpload(e, mode) {
-    const file = e.target.files && e.target.files[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = () => {
-      if (mode === "add") {
-        this._pushUndoSnapshot();
-        const id = this._id();
-        const w = 260, h = 180;
-        this.activePage.items.push({
-          id,
-          type: "image",
-          x: (this.BASE_W - w) / 2,
-          y: (this.BASE_H - h) / 2,
-          w, h,
-          z: this._maxZ() + 1,
-          src: reader.result,
-          name: file.name
-        });
-        this.selectItem(id);
-        this._savePages();
-        this.updateAll();
-        this.updateUndoRedoButtons();
-      }
-
-      if (mode === "replace") {
-        const it = this._findItem(this.state.selectedId);
-        if (!it || it.type !== "image") return;
-        this._pushUndoSnapshot();
-        it.src = reader.result;
-        it.name = file.name;
-        this._savePages();
-        this.updateAll();
-        this.updateUndoRedoButtons();
-      }
-    };
-    reader.readAsDataURL(file);
-
-    // reset input
-    e.target.value = "";
-  }
-
-  // ---------- Undo / redo ----------
-  _pushUndoSnapshot() {
-    // store snapshot of active page items
-    const snap = JSON.stringify(this.activePage.items);
-    const last = this.state.undo[this.state.undo.length - 1];
-    if (last !== snap) this.state.undo.push(snap);
-    // clear redo on new change
-    this.state.redo = [];
-    this.updateUndoRedoButtons();
-  }
-
-  undo() {
-    if (!this.state.undo.length) return;
-
-    const current = JSON.stringify(this.activePage.items);
-    const prev = this.state.undo.pop();
-    this.state.redo.push(current);
-
-    // restore prev
-    try {
-      this.activePage.items = JSON.parse(prev);
-    } catch {}
-    this.state.selectedId = null;
-
-    this._savePages();
-    this.updateAll();
-  }
-
-  redo() {
-    if (!this.state.redo.length) return;
-
-    const current = JSON.stringify(this.activePage.items);
-    const next = this.state.redo.pop();
-    this.state.undo.push(current);
-
-    try {
-      this.activePage.items = JSON.parse(next);
-    } catch {}
-    this.state.selectedId = null;
-
-    this._savePages();
-    this.updateAll();
-  }
-
-  updateUndoRedoButtons() {
-    const undoBtn = this.querySelector('[data-btn="undo"]');
-    const redoBtn = this.querySelector('[data-btn="redo"]');
-    if (undoBtn) undoBtn.disabled = this.state.undo.length === 0;
-    if (redoBtn) redoBtn.disabled = this.state.redo.length === 0;
-  }
-
-  // ---------- Utils ----------
-  _findItem(id) {
-    if (!id) return null;
-    return this.activePage.items.find(x => x.id === id) || null;
-  }
-
-  _maxZ() {
-    const items = this.activePage.items;
-    return items.length ? Math.max(...items.map(i => i.z ?? 0)) : 0;
-  }
-
-  _minZ() {
-    const items = this.activePage.items;
-    return items.length ? Math.min(...items.map(i => i.z ?? 0)) : 0;
-  }
-
-  _id() {
-    return "it_" + Math.random().toString(16).slice(2) + "_" + Date.now().toString(16);
-  }
-
-  _clamp(n, a, b) {
-    return Math.max(a, Math.min(b, n));
-  }
-}
-
-customElements.define("report-editor", ReportEditor);

edit-layouts.html

@@ -1,265 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>RepEx - Report Express | Export</title>
-
-  <link rel="stylesheet" href="style.css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-    @media print {
-      body { background: #fff !important; }
-      .no-print { display: none !important; }
-      main { box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
-    }
-  </style>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <main class="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8">
-    <!-- Header -->
-    <header class="mb-8 border-b border-gray-200 pb-4">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-4">
-        <div class="flex items-center">
-          <img
-src="assets/prosento-logo.png"
-            alt="Company logo"
-            class="h-12 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <div class="text-center">
-          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
-            RepEx - Report Express
-          </h1>
-          <p class="text-gray-600 whitespace-nowrap">Export</p>
-        </div>
-
-        <div class="flex justify-end gap-2 no-print">
-          <a
-            href="report-viewer.html"
-            class="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"
-          >
-            <i data-feather="arrow-left" class="h-4 w-4"></i>
-            Back
-          </a>
-        </div>
-      </div>
-    </header>
-
-    <!-- Workflow navigation -->
-    <nav class="mb-6 no-print" aria-label="Report workflow navigation">
-      <div class="flex flex-wrap gap-2">
-        <a
-          href="report-viewer.html"
-          class="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"
-        >
-          <i data-feather="layout" class="h-4 w-4"></i>
-          Report Viewer
-        </a>
-
-        <a
-          href="edit-layouts.html"
-          class="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"
-        >
-          <i data-feather="grid" class="h-4 w-4"></i>
-          Edit Page Layouts
-        </a>
-
-        <a
-          href="export.html"
-          class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white"
-        >
-          <i data-feather="download" class="h-4 w-4"></i>
-          Export
-        </a>
-      </div>
-    </nav>
-
-    <section class="grid grid-cols-1 lg:grid-cols-[1fr,360px] gap-6">
-      <!-- Export options -->
-      <div class="rounded-lg border border-gray-200 bg-white p-4">
-        <h2 class="text-lg font-semibold text-gray-900 mb-2">Export Options</h2>
-        <p class="text-sm text-gray-600 mb-4">
-          PDF export comes next. For now, you can export a report “package” as JSON (pages + layout settings + payload).
-        </p>
-
-        <div class="space-y-4">
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-            <div class="flex items-start justify-between gap-3">
-              <div>
-                <div class="text-sm font-semibold text-gray-900">Report package (.json)</div>
-                <div class="text-xs text-gray-500">Includes edited pages, layout settings and upload metadata</div>
-              </div>
-              <span class="text-xs font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-md px-2 py-1">
-                Available
-              </span>
-            </div>
-
-            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incPages" type="checkbox" class="rounded border-gray-300" checked />
-                Include pages
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incLayout" type="checkbox" class="rounded border-gray-300" checked />
-                Include layout settings
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incPayload" type="checkbox" class="rounded border-gray-300" checked />
-                Include upload payload
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incTimestamp" type="checkbox" class="rounded border-gray-300" checked />
-                Include timestamp
-              </label>
-            </div>
-
-            <button id="downloadJson" type="button"
-              class="mt-4 inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-4 py-2.5 text-white font-semibold hover:bg-emerald-700 transition">
-              <i data-feather="download" class="h-4 w-4"></i>
-              Download JSON package
-            </button>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-            <div class="flex items-start justify-between gap-3">
-              <div>
-                <div class="text-sm font-semibold text-gray-900">PDF export</div>
-                <div class="text-xs text-gray-500">Will export as print-ready A4 PDF</div>
-              </div>
-              <span class="text-xs font-semibold text-gray-600 bg-white border border-gray-200 rounded-md px-2 py-1">
-                Coming soon
-              </span>
-            </div>
-
-            <button type="button" disabled
-              class="mt-4 inline-flex items-center justify-center gap-2 rounded-lg bg-gray-200 px-4 py-2.5 text-gray-500 font-semibold cursor-not-allowed">
-              <i data-feather="file-text" class="h-4 w-4"></i>
-              Export PDF (disabled)
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Summary -->
-      <aside class="rounded-lg border border-gray-200 bg-white p-4">
-        <h2 class="text-lg font-semibold text-gray-900 mb-2">Export Summary</h2>
-        <p class="text-sm text-gray-600 mb-4">This is what will be included based on your current session.</p>
-
-        <div class="space-y-3">
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Pages</div>
-            <div id="sumPages" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Selected example photos</div>
-            <div id="sumPhotos" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Documents</div>
-            <div id="sumDocs" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Data files</div>
-            <div id="sumData" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="text-xs text-gray-500">
-            Stored in the active server session.
-          </div>
-        </div>
-      </aside>
-    </section>
-
-    <footer class="mt-12 text-center text-xs text-gray-500 no-print">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-1">Export: JSON package now; PDF export will be added next.</p>
-    </footer>
-  </main>
-
-  <script src="script.js"></script>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') feather.replace();
-
-      const sessionId = window.REPEX.getSessionId();
-      window.REPEX.setSessionId(sessionId);
-      const sumPages = document.getElementById('sumPages');
-      const sumPhotos = document.getElementById('sumPhotos');
-      const sumDocs = document.getElementById('sumDocs');
-      const sumData = document.getElementById('sumData');
-
-      const incPages = document.getElementById('incPages');
-      const incLayout = document.getElementById('incLayout');
-      const incPayload = document.getElementById('incPayload');
-      const incTimestamp = document.getElementById('incTimestamp');
-      const downloadJson = document.getElementById('downloadJson');
-
-      if (!sessionId) {
-        sumPages.textContent = 'No active session.';
-        sumPhotos.textContent = '-';
-        sumDocs.textContent = '-';
-        sumData.textContent = '-';
-        downloadJson.disabled = true;
-        return;
-      }
-
-      let session = null;
-      let pages = [];
-
-      function downloadBlob(filename, text) {
-        const blob = new Blob([text], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        URL.revokeObjectURL(url);
-      }
-
-      function updateSummary() {
-        const totalItems = pages.reduce((acc, p) => acc + ((p?.items?.length) || 0), 0);
-        sumPages.textContent = pages.length ? `${pages.length} pages ? ${totalItems} total items` : 'No saved pages yet';
-        sumPhotos.textContent = `${session?.selected_photo_ids?.length ?? 0}`;
-        sumDocs.textContent = `${session?.uploads?.documents?.length ?? 0}`;
-        sumData.textContent = `${session?.uploads?.data_files?.length ?? 0}`;
-      }
-
-      async function loadData() {
-        try {
-          session = await window.REPEX.request(`/sessions/${sessionId}`);
-          const pageResp = await window.REPEX.request(`/sessions/${sessionId}/pages`);
-          pages = Array.isArray(pageResp?.pages) ? pageResp.pages : [];
-          updateSummary();
-        } catch (err) {
-          sumPages.textContent = err.message || 'Failed to load session.';
-        }
-      }
-
-      downloadJson.addEventListener('click', () => {
-        const pack = {};
-        if (incPages.checked) pack.pages = pages;
-        if (incLayout.checked) pack.layout = session?.layout ?? null;
-        if (incPayload.checked) pack.payload = session;
-        if (incTimestamp.checked) pack.exportedAt = new Date().toISOString();
-
-        const filename = `repex_report_package_${new Date().toISOString().replace(/[:.]/g,'-')}.json`;
-        downloadBlob(filename, JSON.stringify(pack, null, 2));
-      });
-
-      loadData();
-    });
-  </script>
-</body>
-</html>

export.html

@@ -1,265 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>RepEx - Report Express | Export</title>
-
-  <link rel="stylesheet" href="style.css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-    @media print {
-      body { background: #fff !important; }
-      .no-print { display: none !important; }
-      main { box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
-    }
-  </style>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <main class="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8">
-    <!-- Header -->
-    <header class="mb-8 border-b border-gray-200 pb-4">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-4">
-        <div class="flex items-center">
-          <img
-src="assets/prosento-logo.png"
-            alt="Company logo"
-            class="h-12 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <div class="text-center">
-          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
-            RepEx - Report Express
-          </h1>
-          <p class="text-gray-600 whitespace-nowrap">Export</p>
-        </div>
-
-        <div class="flex justify-end gap-2 no-print">
-          <a
-            href="report-viewer.html"
-            class="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"
-          >
-            <i data-feather="arrow-left" class="h-4 w-4"></i>
-            Back
-          </a>
-        </div>
-      </div>
-    </header>
-
-    <!-- Workflow navigation -->
-    <nav class="mb-6 no-print" aria-label="Report workflow navigation">
-      <div class="flex flex-wrap gap-2">
-        <a
-          href="report-viewer.html"
-          class="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"
-        >
-          <i data-feather="layout" class="h-4 w-4"></i>
-          Report Viewer
-        </a>
-
-        <a
-          href="edit-layouts.html"
-          class="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"
-        >
-          <i data-feather="grid" class="h-4 w-4"></i>
-          Edit Page Layouts
-        </a>
-
-        <a
-          href="export.html"
-          class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white"
-        >
-          <i data-feather="download" class="h-4 w-4"></i>
-          Export
-        </a>
-      </div>
-    </nav>
-
-    <section class="grid grid-cols-1 lg:grid-cols-[1fr,360px] gap-6">
-      <!-- Export options -->
-      <div class="rounded-lg border border-gray-200 bg-white p-4">
-        <h2 class="text-lg font-semibold text-gray-900 mb-2">Export Options</h2>
-        <p class="text-sm text-gray-600 mb-4">
-          PDF export comes next. For now, you can export a report “package” as JSON (pages + layout settings + payload).
-        </p>
-
-        <div class="space-y-4">
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-            <div class="flex items-start justify-between gap-3">
-              <div>
-                <div class="text-sm font-semibold text-gray-900">Report package (.json)</div>
-                <div class="text-xs text-gray-500">Includes edited pages, layout settings and upload metadata</div>
-              </div>
-              <span class="text-xs font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-md px-2 py-1">
-                Available
-              </span>
-            </div>
-
-            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incPages" type="checkbox" class="rounded border-gray-300" checked />
-                Include pages
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incLayout" type="checkbox" class="rounded border-gray-300" checked />
-                Include layout settings
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incPayload" type="checkbox" class="rounded border-gray-300" checked />
-                Include upload payload
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incTimestamp" type="checkbox" class="rounded border-gray-300" checked />
-                Include timestamp
-              </label>
-            </div>
-
-            <button id="downloadJson" type="button"
-              class="mt-4 inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-4 py-2.5 text-white font-semibold hover:bg-emerald-700 transition">
-              <i data-feather="download" class="h-4 w-4"></i>
-              Download JSON package
-            </button>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-            <div class="flex items-start justify-between gap-3">
-              <div>
-                <div class="text-sm font-semibold text-gray-900">PDF export</div>
-                <div class="text-xs text-gray-500">Will export as print-ready A4 PDF</div>
-              </div>
-              <span class="text-xs font-semibold text-gray-600 bg-white border border-gray-200 rounded-md px-2 py-1">
-                Coming soon
-              </span>
-            </div>
-
-            <button type="button" disabled
-              class="mt-4 inline-flex items-center justify-center gap-2 rounded-lg bg-gray-200 px-4 py-2.5 text-gray-500 font-semibold cursor-not-allowed">
-              <i data-feather="file-text" class="h-4 w-4"></i>
-              Export PDF (disabled)
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Summary -->
-      <aside class="rounded-lg border border-gray-200 bg-white p-4">
-        <h2 class="text-lg font-semibold text-gray-900 mb-2">Export Summary</h2>
-        <p class="text-sm text-gray-600 mb-4">This is what will be included based on your current session.</p>
-
-        <div class="space-y-3">
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Pages</div>
-            <div id="sumPages" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Selected example photos</div>
-            <div id="sumPhotos" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Documents</div>
-            <div id="sumDocs" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Data files</div>
-            <div id="sumData" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="text-xs text-gray-500">
-            Stored in the active server session.
-          </div>
-        </div>
-      </aside>
-    </section>
-
-    <footer class="mt-12 text-center text-xs text-gray-500 no-print">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-1">Export: JSON package now; PDF export will be added next.</p>
-    </footer>
-  </main>
-
-  <script src="script.js"></script>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') feather.replace();
-
-      const sessionId = window.REPEX.getSessionId();
-      window.REPEX.setSessionId(sessionId);
-      const sumPages = document.getElementById('sumPages');
-      const sumPhotos = document.getElementById('sumPhotos');
-      const sumDocs = document.getElementById('sumDocs');
-      const sumData = document.getElementById('sumData');
-
-      const incPages = document.getElementById('incPages');
-      const incLayout = document.getElementById('incLayout');
-      const incPayload = document.getElementById('incPayload');
-      const incTimestamp = document.getElementById('incTimestamp');
-      const downloadJson = document.getElementById('downloadJson');
-
-      if (!sessionId) {
-        sumPages.textContent = 'No active session.';
-        sumPhotos.textContent = '-';
-        sumDocs.textContent = '-';
-        sumData.textContent = '-';
-        downloadJson.disabled = true;
-        return;
-      }
-
-      let session = null;
-      let pages = [];
-
-      function downloadBlob(filename, text) {
-        const blob = new Blob([text], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        URL.revokeObjectURL(url);
-      }
-
-      function updateSummary() {
-        const totalItems = pages.reduce((acc, p) => acc + ((p?.items?.length) || 0), 0);
-        sumPages.textContent = pages.length ? `${pages.length} pages ? ${totalItems} total items` : 'No saved pages yet';
-        sumPhotos.textContent = `${session?.selected_photo_ids?.length ?? 0}`;
-        sumDocs.textContent = `${session?.uploads?.documents?.length ?? 0}`;
-        sumData.textContent = `${session?.uploads?.data_files?.length ?? 0}`;
-      }
-
-      async function loadData() {
-        try {
-          session = await window.REPEX.request(`/sessions/${sessionId}`);
-          const pageResp = await window.REPEX.request(`/sessions/${sessionId}/pages`);
-          pages = Array.isArray(pageResp?.pages) ? pageResp.pages : [];
-          updateSummary();
-        } catch (err) {
-          sumPages.textContent = err.message || 'Failed to load session.';
-        }
-      }
-
-      downloadJson.addEventListener('click', () => {
-        const pack = {};
-        if (incPages.checked) pack.pages = pages;
-        if (incLayout.checked) pack.layout = session?.layout ?? null;
-        if (incPayload.checked) pack.payload = session;
-        if (incTimestamp.checked) pack.exportedAt = new Date().toISOString();
-
-        const filename = `repex_report_package_${new Date().toISOString().replace(/[:.]/g,'-')}.json`;
-        downloadBlob(filename, JSON.stringify(pack, null, 2));
-      });
-
-      loadData();
-    });
-  </script>
-</body>
-</html>

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

@@ -3,10 +3,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>SIMM Inspection Job Sheet</title>
-
-  <!-- Optional project stylesheet -->
-  <link rel="stylesheet" href="../style.css" />
+  <title>RepEx Inspection Job Sheet</title>
 
   <!-- Tailwind (CDN OK for prototypes; compile for production) -->
   <script src="https://cdn.tailwindcss.com"></script>
@@ -25,6 +22,23 @@
 
     .avoid-break { break-inside: avoid; page-break-inside: avoid; }
     img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+    .template-field {
+      display: block;
+      min-height: 1.1em;
+      border-bottom: 1px dotted #d1d5db;
+      padding-bottom: 1px;
+    }
+
+    .template-field-multiline {
+      min-height: 2.4em;
+      white-space: pre-wrap;
+    }
+
+    .template-field[contenteditable="true"]:empty:before {
+      content: attr(data-placeholder);
+      color: #9ca3af;
+    }
   </style>
 </head>
 
@@ -44,8 +58,8 @@
         </div>
 
         <div class="text-center leading-tight">
-          <h1 class="text-2xl font-bold text-gray-900 whitespace-nowrap">SIMM Inspection Job Sheet</h1>
-          <p class="text-sm text-gray-600 whitespace-nowrap">Structural Inspection and Maintenance Management</p>
+          <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">
@@ -68,32 +82,32 @@
       <dl class="grid grid-cols-2 md:grid-cols-4 gap-2 bg-gray-50 border border-gray-200 rounded-lg p-3">
         <div class="space-y-0.5">
           <dt class="text-xs font-medium text-gray-500">Inspection Date</dt>
-          <dd class="text-sm font-semibold text-gray-900">2023-11-15</dd>
+          <dd class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="YYYY-MM-DD"></dd>
         </div>
 
         <div class="space-y-0.5">
           <dt class="text-xs font-medium text-gray-500">Inspector</dt>
-          <dd class="text-sm font-semibold text-gray-900">John Doe</dd>
+          <dd class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Inspector name"></dd>
         </div>
 
         <div class="space-y-0.5">
           <dt class="text-xs font-medium text-gray-500">Accompanied By</dt>
-          <dd class="text-sm font-semibold text-gray-900">John Doe</dd>
+          <dd class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Accompanied by"></dd>
         </div>
 
         <div class="space-y-0.5">
           <dt class="text-xs font-medium text-gray-500">Document No</dt>
-          <dd class="text-sm font-mono font-semibold text-gray-900">SIMM-JS-2023-001</dd>
+          <dd class="template-field text-sm font-mono font-semibold text-gray-900" contenteditable="true" data-placeholder="Document no"></dd>
         </div>
 
         <div class="space-y-0.5 md:col-span-2">
           <dt class="text-xs font-medium text-gray-500">Project</dt>
-          <dd class="text-sm font-semibold text-gray-900">North Pit - Sector 4 Conveyor Upgrade</dd>
+          <dd class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Project name"></dd>
         </div>
 
         <div class="space-y-0.5 md:col-span-2">
           <dt class="text-xs font-medium text-gray-500">Client / Site</dt>
-          <dd class="text-sm font-semibold text-gray-900">Tronox</dd>
+          <dd class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Client or site"></dd>
         </div>
       </dl>
     </section>
@@ -110,17 +124,17 @@
           <div class="grid grid-cols-2 gap-2">
             <div class="space-y-0.5">
               <div class="text-xs font-medium text-gray-500">Reference</div>
-              <div class="text-sm font-semibold text-gray-900">REF-7821</div>
+              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Reference"></div>
             </div>
 
             <div class="space-y-0.5">
               <div class="text-xs font-medium text-gray-500">Action Type</div>
-              <div class="text-sm font-semibold text-gray-900">Structural Repair</div>
+              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Action type"></div>
             </div>
 
             <div class="space-y-0.5 col-span-2">
               <div class="text-xs font-medium text-gray-500">Item Description</div>
-              <div class="text-sm font-semibold text-gray-900">Main support beam for conveyor CV-04</div>
+              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Item description"></div>
             </div>
           </div>
         </div>
@@ -129,7 +143,7 @@
         <div class="space-y-2">
           <div class="space-y-0.5">
             <div class="text-xs font-medium text-gray-500">Functional Location</div>
-            <div class="text-sm font-semibold text-gray-900">Conveyor Support - CV-04-SUP-02</div>
+            <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Functional location"></div>
           </div>
         </div>
 
@@ -139,23 +153,19 @@
             <div class="text-center space-y-1">
               <div class="text-xs font-medium text-gray-500">Category</div>
               <span
-                id="condition-rating"
-                class="badge inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold"
-                aria-label="Category rating"
-              >
-                <!-- populated by JS -->
-              </span>
+                class="template-field inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-sm font-semibold min-w-[96px]"
+                contenteditable="true"
+                data-placeholder="Category"
+              ></span>
             </div>
 
             <div class="text-center space-y-1">
               <div class="text-xs font-medium text-gray-500">Priority</div>
               <span
-                id="priority-rating"
-                class="badge inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold"
-                aria-label="Priority rating"
-              >
-                <!-- populated by JS -->
-              </span>
+                class="template-field inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-sm font-semibold min-w-[96px]"
+                contenteditable="true"
+                data-placeholder="Priority"
+              ></span>
             </div>
           </div>
         </div>
@@ -164,9 +174,7 @@
         <div class="md:col-span-2 space-y-1">
           <div class="text-xs font-medium text-gray-500">Condition Description</div>
           <div class="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
-            <p class="text-amber-800 text-sm font-semibold leading-snug">
-              Visible corrosion on lower flange with ~15% material loss. Surface pitting along entire length.
-            </p>
+            <p class="template-field template-field-multiline text-amber-800 text-sm font-semibold leading-snug" contenteditable="true" data-placeholder="Condition description"></p>
           </div>
         </div>
 
@@ -174,10 +182,7 @@
         <div class="md:col-span-2 space-y-1">
           <div class="text-xs font-medium text-gray-500">Required Action</div>
           <div class="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
-            <p class="text-blue-800 text-sm font-semibold leading-snug">
-              Clean exposed rebar; apply corrosion protection; use wet-to-dry epoxy; reinstate with concrete repair.
-              Complete within next 12 months to limit further degradation.
-            </p>
+            <p class="template-field template-field-multiline text-blue-800 text-sm font-semibold leading-snug" contenteditable="true" data-placeholder="Required action"></p>
           </div>
         </div>
       </div>
@@ -191,29 +196,20 @@
 
       <div class="grid grid-cols-2 gap-3">
         <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
-          <img
-            src="https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Screenshot%202026-02-02%20100102.png"
-            alt="Photo 1"
-            class="w-full h-40 object-contain mx-auto"
-            loading="eager"
-          />
+          <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
+            Photo slot
+          </div>
           <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Fig 1: Ref 1.1 - Concrete spalling (example)
+            Figure 1
           </figcaption>
         </figure>
 
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 relative">
-          <img
-            src="https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Picture2.png"
-            alt="Photo 2"
-            class="w-full h-40 object-contain mx-auto"
-            loading="eager"
-          />
-          <div class="absolute top-2 left-2 bg-white/95 text-black text-[11px] font-bold px-2 py-1 rounded border border-gray-300">
-            #1.2 [C3, P3] Moderate Corrosion
+        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
+          <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
+            Photo slot
           </div>
           <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Fig 2: Ref 1.2 - Walkway corrosion (example)
+            Figure 2
           </figcaption>
         </figure>
       </div>
@@ -244,43 +240,9 @@
 
     <!-- Footer -->
     <footer class="mt-4 text-center text-[11px] text-gray-500">
-      <p>Prosento - (c) 2026 All Rights Reserved</p>
-      <p class="mt-0.5">Automatically generated job sheet</p>
+      <p>RepEx - (c) 2026 All Rights Reserved</p>
+      <p class="mt-0.5">Generated by RepEx</p>
     </footer>
   </main>
-
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      // Badge tone system
-      const TONES = {
-        amber:   ['bg-amber-50',   'text-amber-800',   'border-amber-200'],
-        emerald: ['bg-emerald-50', 'text-emerald-800', 'border-emerald-200'],
-        gray:    ['bg-gray-50',    'text-gray-700',    'border-gray-200'],
-      };
-
-      const BASE_BADGE = 'inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold';
-
-      function setBadge(id, text, toneKey) {
-        const el = document.getElementById(id);
-        if (!el) return;
-        const tone = TONES[toneKey] || TONES.gray;
-        el.className = `${BASE_BADGE} ${tone.join(' ')}`;
-        el.textContent = text;
-      }
-
-      setBadge('condition-rating', '3 - Poor', 'amber');
-      setBadge('priority-rating', '3 - 3 Years', 'emerald');
-
-      // Icons
-      if (window.feather && typeof window.feather.replace === 'function') {
-        window.feather.replace();
-      }
-
-      // Ensure images are loaded before printing
-      window.addEventListener('beforeprint', () => {
-        document.querySelectorAll('img').forEach(img => (img.loading = 'eager'));
-      });
-    });
-  </script>
 </body>
 </html>

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import UploadPage from "./pages/UploadPage";
 import ProcessingPage from "./pages/ProcessingPage";
 import ReviewSetupPage from "./pages/ReviewSetupPage";
 import ReportViewerPage from "./pages/ReportViewerPage";
+import EditReportPage from "./pages/EditReportPage";
 import EditLayoutsPage from "./pages/EditLayoutsPage";
 import ExportPage from "./pages/ExportPage";
 
@@ -15,6 +16,7 @@ export default function App() {
         <Route path="/processing" element={<ProcessingPage />} />
         <Route path="/review-setup" element={<ReviewSetupPage />} />
         <Route path="/report-viewer" element={<ReportViewerPage />} />
+        <Route path="/edit-report" element={<EditReportPage />} />
         <Route path="/edit-layouts" element={<EditLayoutsPage />} />
         <Route path="/export" element={<ExportPage />} />
         <Route path="*" element={<Navigate to="/" replace />} />

frontend/src/components/JobSheetTemplate.tsx

@@ -1,10 +1,11 @@
-import type { Session } from "../types/session";
+import type { Session, TemplateFields } from "../types/session";
 import { formatDocNumber, getPhotosForPage } from "../lib/report";
 
 type JobSheetTemplateProps = {
   session: Session | null;
   pageIndex: number;
   pageCount: number;
+  template?: TemplateFields;
 };
 
 type PhotoSlotProps = {
@@ -35,12 +36,30 @@ function PhotoSlot({ url, label }: PhotoSlotProps) {
   );
 }
 
-export function JobSheetTemplate({ session, pageIndex, pageCount }: JobSheetTemplateProps) {
-  const inspectionDate = session?.inspection_date || "YYYY-MM-DD";
-  const projectName = session?.project_name || "Project name";
-  const notes =
-    session?.notes || "Condition notes will appear here once supplied.";
-  const docNumber = formatDocNumber(session);
+export function JobSheetTemplate({
+  session,
+  pageIndex,
+  pageCount,
+  template,
+}: JobSheetTemplateProps) {
+  const inspectionDate =
+    template?.inspection_date ?? session?.inspection_date ?? "";
+  const inspector = template?.inspector ?? "";
+  const accompaniedBy = template?.accompanied_by ?? "";
+  const docNumber =
+    template?.document_no ?? (session?.id ? formatDocNumber(session) : "");
+  const projectName = template?.project ?? session?.project_name ?? "";
+  const clientSite = template?.client_site ?? "";
+
+  const reference = template?.reference ?? "";
+  const actionType = template?.action_type ?? "";
+  const itemDescription = template?.item_description ?? "";
+  const functionalLocation = template?.functional_location ?? "";
+  const category = template?.category ?? "";
+  const priority = template?.priority ?? "";
+  const conditionDescription =
+    template?.condition_description ?? session?.notes ?? "";
+  const requiredAction = template?.required_action ?? "";
   const photos = getPhotosForPage(session, pageIndex, 2);
 
   return (
@@ -54,7 +73,7 @@ export function JobSheetTemplate({ session, pageIndex, pageCount }: JobSheetTemp
           />
           <div className="text-center leading-tight">
             <div className="text-base font-semibold text-gray-900">
-              Inspection Job Sheet
+              RepEx Inspection Job Sheet
             </div>
             <div className="text-[11px] text-gray-500">
               Page {pageIndex + 1} of {pageCount}
@@ -68,61 +87,163 @@ export function JobSheetTemplate({ session, pageIndex, pageCount }: JobSheetTemp
         </div>
       </header>
 
-      <section className="mb-4">
-        <div className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
+      <section className="mb-4" aria-labelledby="inspection-details-title">
+        <h2
+          id="inspection-details-title"
+          className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2"
+        >
           Inspection Details
-        </div>
-        <dl className="grid grid-cols-2 gap-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
-          <div>
-            <dt className="text-[10px] text-gray-500">Inspection date</dt>
-            <dd className="text-[11px] font-semibold text-gray-900">
+        </h2>
+
+        <dl className="grid grid-cols-2 md:grid-cols-4 gap-2 bg-gray-50 border border-gray-200 rounded-lg p-3">
+          <div className="space-y-0.5">
+            <dt className="text-[10px] font-medium text-gray-500">
+              Inspection Date
+            </dt>
+            <dd className="template-field text-[11px] font-semibold text-gray-900">
               {inspectionDate}
             </dd>
           </div>
-          <div>
-            <dt className="text-[10px] text-gray-500">Document no</dt>
-            <dd className="text-[11px] font-semibold text-gray-900">
+
+          <div className="space-y-0.5">
+            <dt className="text-[10px] font-medium text-gray-500">Inspector</dt>
+            <dd className="template-field text-[11px] font-semibold text-gray-900">
+              {inspector}
+            </dd>
+          </div>
+
+          <div className="space-y-0.5">
+            <dt className="text-[10px] font-medium text-gray-500">
+              Accompanied By
+            </dt>
+            <dd className="template-field text-[11px] font-semibold text-gray-900">
+              {accompaniedBy}
+            </dd>
+          </div>
+
+          <div className="space-y-0.5">
+            <dt className="text-[10px] font-medium text-gray-500">Document No</dt>
+            <dd className="template-field text-[11px] font-mono font-semibold text-gray-900">
               {docNumber}
             </dd>
           </div>
-          <div className="col-span-2">
-            <dt className="text-[10px] text-gray-500">Project</dt>
-            <dd className="text-[11px] font-semibold text-gray-900">
+
+          <div className="space-y-0.5 md:col-span-2">
+            <dt className="text-[10px] font-medium text-gray-500">Project</dt>
+            <dd className="template-field text-[11px] font-semibold text-gray-900">
               {projectName}
             </dd>
           </div>
+
+          <div className="space-y-0.5 md:col-span-2">
+            <dt className="text-[10px] font-medium text-gray-500">
+              Client / Site
+            </dt>
+            <dd className="template-field text-[11px] font-semibold text-gray-900">
+              {clientSite}
+            </dd>
+          </div>
         </dl>
       </section>
 
-      <section className="mb-4">
-        <div className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
+      <section className="mb-4" aria-labelledby="observations-title">
+        <h2
+          id="observations-title"
+          className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2"
+        >
           Observations and Findings
-        </div>
-        <div className="rounded-lg border border-gray-200 bg-gray-50 p-3 space-y-2">
-          <div className="grid grid-cols-2 gap-2">
-            <div>
-              <div className="text-[10px] text-gray-500">Category</div>
-              <div className="text-[11px] font-semibold text-gray-900">
-                Structural condition
+        </h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div className="space-y-2">
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-0.5">
+                <div className="text-[10px] font-medium text-gray-500">
+                  Reference
+                </div>
+                <div className="template-field text-[11px] font-semibold text-gray-900">
+                  {reference}
+                </div>
+              </div>
+
+              <div className="space-y-0.5">
+                <div className="text-[10px] font-medium text-gray-500">
+                  Action Type
+                </div>
+                <div className="template-field text-[11px] font-semibold text-gray-900">
+                  {actionType}
+                </div>
+              </div>
+
+              <div className="space-y-0.5 col-span-2">
+                <div className="text-[10px] font-medium text-gray-500">
+                  Item Description
+                </div>
+                <div className="template-field text-[11px] font-semibold text-gray-900">
+                  {itemDescription}
+                </div>
               </div>
             </div>
-            <div>
-              <div className="text-[10px] text-gray-500">Priority</div>
-              <div className="text-[11px] font-semibold text-gray-900">
-                3 - 3 years
+          </div>
+
+          <div className="space-y-2">
+            <div className="space-y-0.5">
+              <div className="text-[10px] font-medium text-gray-500">
+                Functional Location
+              </div>
+              <div className="template-field text-[11px] font-semibold text-gray-900">
+                {functionalLocation}
               </div>
             </div>
           </div>
-          <div>
-            <div className="text-[10px] text-gray-500">Condition notes</div>
-            <p className="text-[11px] text-gray-700 leading-snug">
-              {notes}
-            </p>
+
+          <div className="md:col-span-2 flex justify-center">
+            <div className="inline-flex items-center gap-10">
+              <div className="text-center space-y-1">
+                <div className="text-[10px] font-medium text-gray-500">
+                  Category
+                </div>
+                <span className="template-field inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-[11px] font-semibold text-gray-900 min-w-[96px]">
+                  {category}
+                </span>
+              </div>
+
+              <div className="text-center space-y-1">
+                <div className="text-[10px] font-medium text-gray-500">
+                  Priority
+                </div>
+                <span className="template-field inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-1 text-[11px] font-semibold text-gray-900 min-w-[96px]">
+                  {priority}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="md:col-span-2 space-y-1">
+            <div className="text-[10px] font-medium text-gray-500">
+              Condition Description
+            </div>
+            <div className="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
+              <p className="template-field template-field-multiline text-amber-800 text-[11px] font-semibold leading-snug">
+                {conditionDescription}
+              </p>
+            </div>
+          </div>
+
+          <div className="md:col-span-2 space-y-1">
+            <div className="text-[10px] font-medium text-gray-500">
+              Required Action
+            </div>
+            <div className="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
+              <p className="template-field template-field-multiline text-blue-800 text-[11px] font-semibold leading-snug">
+                {requiredAction}
+              </p>
+            </div>
           </div>
         </div>
       </section>
 
-      <section className="mb-4">
+      <section className="mb-4 avoid-break">
         <div className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
           Photo Documentation
         </div>
@@ -156,7 +277,8 @@ export function JobSheetTemplate({ session, pageIndex, pageCount }: JobSheetTemp
       </section>
 
       <footer className="mt-4 text-center text-[10px] text-gray-500">
-        <p>Prosento - (c) 2026 All Rights Reserved</p>
+        <p>RepEx - (c) 2026 All Rights Reserved</p>
+        <p className="mt-0.5">Generated by RepEx</p>
       </footer>
     </div>
   );

frontend/src/components/ReportPageCanvas.tsx

@@ -1,7 +1,7 @@
 import type { CSSProperties } from "react";
 
-import type { Page, Session } from "../types/session";
-import { BASE_W } from "../lib/report";
+import type { Page, Session, TemplateFields } from "../types/session";
+import { BASE_H, BASE_W } from "../lib/report";
 import { JobSheetTemplate } from "./JobSheetTemplate";
 
 type ReportPageCanvasProps = {
@@ -10,6 +10,7 @@ type ReportPageCanvasProps = {
   pageIndex: number;
   pageCount: number;
   scale: number;
+  template?: TemplateFields;
   className?: string;
 };
 
@@ -19,6 +20,7 @@ export function ReportPageCanvas({
   pageIndex,
   pageCount,
   scale,
+  template,
   className = "",
 }: ReportPageCanvasProps) {
   const items = page?.items ?? [];
@@ -39,6 +41,7 @@ export function ReportPageCanvas({
             session={session}
             pageIndex={pageIndex}
             pageCount={pageCount}
+            template={template}
           />
         </div>
       </div>

frontend/src/components/report-editor.js

@@ -4,6 +4,7 @@ class ReportEditor extends HTMLElement {
   constructor() {
     super();
     this._mounted = false;
+    this.mode = "overlay";
 
     this.BASE_W = 595;  // A4 points-ish (screen independent model)
     this.BASE_H = 842;
@@ -32,11 +33,21 @@ class ReportEditor extends HTMLElement {
     this._mounted = true;
     this.render();
     this.bind();
+    this.setAttribute("data-mode", this.mode);
     this.hide();
   }
 
   // Public API
-  open({ payload, pageIndex = 0, totalPages = 6, sessionId = null, apiBase = null } = {}) {
+  open({
+    payload,
+    pageIndex = 0,
+    totalPages = 6,
+    sessionId = null,
+    apiBase = null,
+    mode = "overlay",
+  } = {}) {
+    this.mode = mode === "page" ? "page" : "overlay";
+    this.setAttribute("data-mode", this.mode);
     this.state.payload = payload ?? null;
     this.state.isOpen = true;
     this.sessionId =
@@ -95,10 +106,10 @@ class ReportEditor extends HTMLElement {
   render() {
     this.innerHTML = `
       <div class="fixed inset-0 z-50 hidden" data-overlay>
-        <div class="absolute inset-0 bg-black/30"></div>
+        <div class="absolute inset-0 bg-black/30" data-backdrop></div>
 
-        <div class="relative h-full w-full flex items-center justify-center p-4">
-          <div class="w-full max-w-6xl bg-white rounded-xl shadow-sm ring-1 ring-gray-200 overflow-hidden">
+        <div class="relative h-full w-full flex items-center justify-center p-4" data-shell-wrap>
+          <div class="w-full max-w-6xl bg-white rounded-xl shadow-sm ring-1 ring-gray-200 overflow-hidden" data-shell>
             <!-- Header -->
             <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
               <div class="flex items-center gap-2">
@@ -446,6 +457,7 @@ class ReportEditor extends HTMLElement {
   show() {
     this.$overlay.classList.remove("hidden");
     this.state.isOpen = true;
+    this.setAttribute("data-mode", this.mode);
     this.updateAll();
   }
 
@@ -503,6 +515,38 @@ class ReportEditor extends HTMLElement {
     }
   }
 
+  _getTemplate() {
+    if (!this.state.pages.length) return {};
+    const first = this.state.pages[0];
+    if (!first.template) first.template = {};
+    return first.template;
+  }
+
+  _bindTemplateFields() {
+    if (!this.$canvas) return;
+    const template = this._getTemplate();
+    this.$canvas.querySelectorAll("[data-template-field]").forEach((el) => {
+      const key = el.dataset.templateField;
+      if (!key) return;
+      const value = template[key] || "";
+      if (document.activeElement !== el && el.textContent !== value) {
+        el.textContent = value;
+      }
+      el.oninput = () => {
+        template[key] = el.textContent || "";
+        this._savePages();
+      };
+      el.onpointerdown = (e) => {
+        e.stopPropagation();
+      };
+      el.onkeydown = (e) => {
+        if (e.key === "Enter" && el.dataset.multiline !== "true") {
+          e.preventDefault();
+        }
+      };
+    });
+  }
+
   _escape(value) {
     return String(value || "")
       .replace(/&/g, "&amp;")
@@ -540,18 +584,36 @@ class ReportEditor extends HTMLElement {
     `;
   }
 
+  _tplField(key, value, placeholder, className = "", multiline = false) {
+    const safeValue = this._escape(value || "");
+    const safePlaceholder = this._escape(placeholder || "");
+    const multiAttr = multiline ? ' data-multiline="true"' : "";
+    return `<div class="template-field ${className}" data-template-field="${key}" contenteditable="true" data-placeholder="${safePlaceholder}"${multiAttr}>${safeValue}</div>`;
+  }
+
   _templateMarkup() {
     const session = this.state.payload || {};
-    const inspectionDate = this._escape(session.inspection_date || "YYYY-MM-DD");
-    const projectName = this._escape(session.project_name || "Project name");
-    const notes = this._escape(
-      session.notes || "Condition notes will appear here once supplied."
-    );
-    const docNumber = this._escape(
-      session.id
-        ? `REP-${String(session.id).slice(0, 8).toUpperCase()}`
-        : "REP-00000000"
-    );
+    const template = this._getTemplate();
+
+    const inspectionDate =
+      template.inspection_date || session.inspection_date || "";
+    const inspector = template.inspector || "";
+    const accompaniedBy = template.accompanied_by || "";
+    const docNumber =
+      template.document_no ||
+      (session.id ? `REP-${String(session.id).slice(0, 8).toUpperCase()}` : "");
+    const projectName = template.project || session.project_name || "";
+    const clientSite = template.client_site || "";
+
+    const reference = template.reference || "";
+    const actionType = template.action_type || "";
+    const itemDescription = template.item_description || "";
+    const functionalLocation = template.functional_location || "";
+    const category = template.category || "";
+    const priority = template.priority || "";
+    const conditionDescription =
+      template.condition_description || session.notes || "";
+    const requiredAction = template.required_action || "";
 
     const photos = this._selectedPhotos(session);
     const start = this.state.activePage * 2;
@@ -562,63 +624,128 @@ class ReportEditor extends HTMLElement {
 
     return `
       <div class="w-full h-full p-5 text-[11px] text-gray-700">
-        <header class="mb-4 border-b border-gray-200 pb-2">
+        <header class="mb-4 border-b border-gray-200 pb-3">
           <div class="grid grid-cols-[auto,1fr,auto] items-center gap-3">
-            <img src="/assets/prosento-logo.png" alt="Prosento logo" class="h-9 w-auto object-contain" />
+            <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">
-              <div class="text-base font-semibold text-gray-900">Inspection Job Sheet</div>
-              <div class="text-[11px] text-gray-500">Page ${pageNum} of ${pageCount}</div>
+              <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="/assets/client-logo.png" alt="Client logo" class="h-10 w-auto object-contain" />
             </div>
-            <img src="/assets/client-logo.png" alt="Client logo" class="h-9 w-auto object-contain" />
           </div>
         </header>
 
-        <section class="mb-4">
-          <div class="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
+        <section class="mb-4" aria-labelledby="inspection-details-title">
+          <h2 id="inspection-details-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
             Inspection Details
-          </div>
-          <dl class="grid grid-cols-2 gap-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div>
-              <dt class="text-[10px] text-gray-500">Inspection date</dt>
-              <dd class="text-[11px] font-semibold text-gray-900">${inspectionDate}</dd>
+          </h2>
+
+          <dl class="grid grid-cols-2 md:grid-cols-4 gap-2 bg-gray-50 border border-gray-200 rounded-lg p-3">
+            <div class="space-y-0.5">
+              <dt class="text-xs font-medium text-gray-500">Inspection Date</dt>
+              ${this._tplField("inspection_date", inspectionDate, "YYYY-MM-DD", "text-sm font-semibold text-gray-900")}
             </div>
-            <div>
-              <dt class="text-[10px] text-gray-500">Document no</dt>
-              <dd class="text-[11px] font-semibold text-gray-900">${docNumber}</dd>
+
+            <div class="space-y-0.5">
+              <dt class="text-xs font-medium text-gray-500">Inspector</dt>
+              ${this._tplField("inspector", inspector, "Inspector name", "text-sm font-semibold text-gray-900")}
+            </div>
+
+            <div class="space-y-0.5">
+              <dt class="text-xs font-medium text-gray-500">Accompanied By</dt>
+              ${this._tplField("accompanied_by", accompaniedBy, "Accompanied by", "text-sm font-semibold text-gray-900")}
+            </div>
+
+            <div class="space-y-0.5">
+              <dt class="text-xs font-medium text-gray-500">Document No</dt>
+              ${this._tplField("document_no", docNumber, "Document no", "text-sm font-mono font-semibold text-gray-900")}
             </div>
-            <div class="col-span-2">
-              <dt class="text-[10px] text-gray-500">Project</dt>
-              <dd class="text-[11px] font-semibold text-gray-900">${projectName}</dd>
+
+            <div class="space-y-0.5 md:col-span-2">
+              <dt class="text-xs font-medium text-gray-500">Project</dt>
+              ${this._tplField("project", projectName, "Project name", "text-sm font-semibold text-gray-900")}
+            </div>
+
+            <div class="space-y-0.5 md:col-span-2">
+              <dt class="text-xs font-medium text-gray-500">Client / Site</dt>
+              ${this._tplField("client_site", clientSite, "Client or site", "text-sm font-semibold text-gray-900")}
             </div>
           </dl>
         </section>
 
-        <section class="mb-4">
-          <div class="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
+        <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
-          </div>
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 space-y-2">
-            <div class="grid grid-cols-2 gap-2">
-              <div>
-                <div class="text-[10px] text-gray-500">Category</div>
-                <div class="text-[11px] font-semibold text-gray-900">Structural condition</div>
+          </h2>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div class="space-y-2">
+              <div class="grid grid-cols-2 gap-2">
+                <div class="space-y-0.5">
+                  <div class="text-xs font-medium text-gray-500">Reference</div>
+                  ${this._tplField("reference", reference, "Reference", "text-sm font-semibold text-gray-900")}
+                </div>
+
+                <div class="space-y-0.5">
+                  <div class="text-xs font-medium text-gray-500">Action Type</div>
+                  ${this._tplField("action_type", actionType, "Action type", "text-sm font-semibold text-gray-900")}
+                </div>
+
+                <div class="space-y-0.5 col-span-2">
+                  <div class="text-xs font-medium text-gray-500">Item Description</div>
+                  ${this._tplField("item_description", itemDescription, "Item description", "text-sm font-semibold text-gray-900")}
+                </div>
               </div>
-              <div>
-                <div class="text-[10px] text-gray-500">Priority</div>
-                <div class="text-[11px] font-semibold text-gray-900">3 - 3 years</div>
+            </div>
+
+            <div class="space-y-2">
+              <div class="space-y-0.5">
+                <div class="text-xs font-medium text-gray-500">Functional Location</div>
+                ${this._tplField("functional_location", functionalLocation, "Functional location", "text-sm font-semibold text-gray-900")}
               </div>
             </div>
-            <div>
-              <div class="text-[10px] text-gray-500">Condition notes</div>
-              <p class="text-[11px] text-gray-700 leading-snug">${notes}</p>
+
+            <div class="md:col-span-2 flex justify-center">
+              <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]")}
+                </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]")}
+                </div>
+              </div>
+            </div>
+
+            <div class="md:col-span-2 space-y-1">
+              <div class="text-xs font-medium text-gray-500">Condition Description</div>
+              <div class="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
+                ${this._tplField("condition_description", conditionDescription, "Condition description", "template-field-multiline text-amber-800 text-sm font-semibold leading-snug", true)}
+              </div>
+            </div>
+
+            <div class="md:col-span-2 space-y-1">
+              <div class="text-xs font-medium text-gray-500">Required Action</div>
+              <div class="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
+                ${this._tplField("required_action", requiredAction, "Required action", "template-field-multiline text-blue-800 text-sm font-semibold leading-snug", true)}
+              </div>
             </div>
           </div>
         </section>
 
-        <section class="mb-4">
-          <div class="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
+        <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
-          </div>
+          </h2>
+
           <div class="grid grid-cols-2 gap-3">
             ${this._photoSlot(photoA, "Figure 1")}
             ${this._photoSlot(photoB, "Figure 2")}
@@ -642,8 +769,9 @@ class ReportEditor extends HTMLElement {
           </div>
         </section>
 
-        <footer class="mt-4 text-center text-[10px] text-gray-500">
-          <p>Prosento - (c) 2026 All Rights Reserved</p>
+        <footer class="mt-4 text-center text-[11px] text-gray-500">
+          <p>RepEx - (c) 2026 All Rights Reserved</p>
+          <p class="mt-0.5">Generated by RepEx</p>
         </footer>
       </div>
     `;
@@ -832,13 +960,14 @@ class ReportEditor extends HTMLElement {
     const scale = this._canvasScale() || 1;
 
     const template = document.createElement("div");
-    template.className = "absolute inset-0 pointer-events-none";
+    template.className = "absolute inset-0";
     template.innerHTML = `
       <div style="width:${this.BASE_W}px; height:${this.BASE_H}px; transform: scale(${scale}); transform-origin: top left;">
         ${this._templateMarkup()}
       </div>
     `;
     this.$canvas.appendChild(template);
+    this._bindTemplateFields();
 
     const items = this.activePage.items;
     const selectedId = this.state.selectedId;

frontend/src/index.css

@@ -15,6 +15,53 @@ body {
   @apply bg-gray-50 text-gray-900;
 }
 
+.template-field {
+  display: block;
+  min-height: 1.1em;
+  border-bottom: 1px dotted #d1d5db;
+  padding-bottom: 1px;
+}
+
+.template-field-multiline {
+  min-height: 2.4em;
+  white-space: pre-wrap;
+}
+
+.template-field[contenteditable="true"]:empty:before {
+  content: attr(data-placeholder);
+  color: #9ca3af;
+}
+
+.avoid-break {
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+report-editor[data-mode="page"] [data-overlay] {
+  position: static;
+  inset: auto;
+  width: 100%;
+  height: auto;
+  z-index: auto;
+}
+
+report-editor[data-mode="page"] [data-backdrop] {
+  display: none;
+}
+
+report-editor[data-mode="page"] [data-shell-wrap] {
+  position: static;
+  height: auto;
+  width: 100%;
+  padding: 0;
+}
+
+report-editor[data-mode="page"] [data-shell] {
+  max-width: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
 @media print {
   @page {
     size: A4;

frontend/src/pages/EditLayoutsPage.tsx

@@ -1,6 +1,16 @@
 import { useEffect, useMemo, useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
-import { ArrowLeft, ChevronDown, ChevronUp, Plus, Trash2 } from "react-feather";
+import {
+  ArrowLeft,
+  ChevronDown,
+  ChevronUp,
+  Download,
+  Edit3,
+  Grid,
+  Layout,
+  Plus,
+  Trash2,
+} from "react-feather";
 
 import { putJson, request } from "../lib/api";
 import { BASE_W } from "../lib/report";
@@ -49,6 +59,7 @@ export default function EditLayoutsPage() {
   const totalPages = useMemo(() => Math.max(1, pages.length), [pages.length]);
   const previewWidth = 220;
   const previewScale = previewWidth / BASE_W;
+  const template = pages[0]?.template;
 
   async function savePages(next: Page[]) {
     if (!sessionId) return;
@@ -106,6 +117,39 @@ export default function EditLayoutsPage() {
         }
       />
 
+      <nav className="mb-6" aria-label="Report workflow navigation">
+        <div className="flex flex-wrap 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"
+          >
+            <Layout className="h-4 w-4" />
+            Report Viewer
+          </Link>
+
+          <Link
+            to={`/edit-report${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <Edit3 className="h-4 w-4" />
+            Edit Report
+          </Link>
+
+          <span className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white">
+            <Grid className="h-4 w-4" />
+            Edit Page Layouts
+          </span>
+
+          <Link
+            to={`/export${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <Download className="h-4 w-4" />
+            Export
+          </Link>
+        </div>
+      </nav>
+
       <section className="mb-6 rounded-lg border border-gray-200 bg-white p-4">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
           <div>
@@ -185,6 +229,7 @@ export default function EditLayoutsPage() {
                 pageIndex={index}
                 pageCount={totalPages}
                 scale={previewScale}
+                template={template}
               />
             </div>
           </div>

frontend/src/pages/EditReportPage.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { ArrowLeft, Download, Edit3, Grid, Layout } from "react-feather";
+
+import { API_BASE, request } from "../lib/api";
+import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
+import type { Session } from "../types/session";
+import { PageFooter } from "../components/PageFooter";
+import { PageHeader } from "../components/PageHeader";
+import { PageShell } from "../components/PageShell";
+
+export default function EditReportPage() {
+  const [searchParams] = useSearchParams();
+  const sessionId = getSessionId(searchParams.toString());
+  const sessionQuery = buildSessionQuery(sessionId);
+  const navigate = useNavigate();
+
+  const [session, setSession] = useState<Session | null>(null);
+  const [error, setError] = useState("");
+
+  const editorRef = useRef<ReportEditorElement | null>(null);
+
+  const pageIndex = useMemo(() => {
+    const raw = Number(searchParams.get("page") || "1");
+    if (!Number.isFinite(raw) || raw <= 0) return 0;
+    return Math.max(0, Math.floor(raw) - 1);
+  }, [searchParams]);
+
+  useEffect(() => {
+    if (!sessionId) {
+      setError("No active session found. Return to upload to continue.");
+      return;
+    }
+    setStoredSessionId(sessionId);
+    async function load() {
+      try {
+        const data = await request<Session>(`/sessions/${sessionId}`);
+        setSession(data);
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : "Failed to load session.";
+        setError(message);
+      }
+    }
+    load();
+  }, [sessionId]);
+
+  useEffect(() => {
+    if (!sessionId || !session || !editorRef.current) return;
+    const totalPages = Math.max(1, session.page_count ?? 1);
+    editorRef.current.open({
+      payload: session,
+      pageIndex,
+      totalPages,
+      sessionId,
+      apiBase: API_BASE,
+      mode: "page",
+    });
+  }, [sessionId, session, pageIndex]);
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const handleClose = () => {
+      navigate(`/report-viewer${sessionQuery}`);
+    };
+    editor.addEventListener("editor-closed", handleClose);
+    return () => editor.removeEventListener("editor-closed", handleClose);
+  }, [navigate, sessionQuery]);
+
+  return (
+    <PageShell className="max-w-6xl">
+      <PageHeader
+        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>
+        }
+      />
+
+      <nav className="mb-6" aria-label="Report workflow navigation">
+        <div className="flex flex-wrap 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"
+          >
+            <Layout className="h-4 w-4" />
+            Report Viewer
+          </Link>
+
+          <span className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white">
+            <Edit3 className="h-4 w-4" />
+            Edit Report
+          </span>
+
+          <Link
+            to={`/edit-layouts${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <Grid className="h-4 w-4" />
+            Edit Page Layouts
+          </Link>
+
+          <Link
+            to={`/export${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <Download className="h-4 w-4" />
+            Export
+          </Link>
+        </div>
+      </nav>
+
+      {error ? (
+        <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 mb-4">
+          {error}
+        </div>
+      ) : null}
+
+      {!session && !error ? (
+        <div className="rounded-lg border border-gray-200 bg-white p-4 text-sm text-gray-600 mb-4">
+          Loading editor...
+        </div>
+      ) : null}
+
+      <report-editor ref={editorRef} data-mode="page" />
+
+      <PageFooter note={`Editing page ${pageIndex + 1}. Changes save automatically.`} />
+    </PageShell>
+  );
+}

frontend/src/pages/ExportPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
-import { ArrowLeft, Download, Grid, Layout } from "react-feather";
+import { ArrowLeft, Download, Edit3, Grid, Layout } from "react-feather";
 
 import { API_BASE, request } from "../lib/api";
 import { BASE_W } from "../lib/report";
@@ -80,6 +80,7 @@ export default function ExportPage() {
   }, [pages, session]);
 
   const totalPages = Math.max(1, pages.length, session?.page_count ?? 0);
+  const template = pages[0]?.template;
   const serverExportUrl = sessionId
     ? `${API_BASE}/sessions/${sessionId}/export`
     : "";
@@ -138,6 +139,14 @@ export default function ExportPage() {
             Report Viewer
           </Link>
 
+          <Link
+            to={`/edit-report${sessionQuery}`}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
+          >
+            <Edit3 className="h-4 w-4" />
+            Edit Report
+          </Link>
+
           <Link
             to={`/edit-layouts${sessionQuery}`}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
@@ -331,6 +340,7 @@ export default function ExportPage() {
                   pageIndex={index}
                   pageCount={totalPages}
                   scale={previewScale}
+                  template={template}
                 />
               </div>
             </div>

frontend/src/pages/ReportViewerPage.tsx

@@ -10,7 +10,7 @@ import {
   Download,
 } from "react-feather";
 
-import { API_BASE, request } from "../lib/api";
+import { request } from "../lib/api";
 import { BASE_W } from "../lib/report";
 import { buildSessionQuery, getSessionId, setStoredSessionId } from "../lib/session";
 import type { Page, Session } from "../types/session";
@@ -24,11 +24,9 @@ export default function ReportViewerPage() {
   const [pages, setPages] = useState<Page[]>([]);
   const [pageIndex, setPageIndex] = useState(0);
   const [scale, setScale] = useState(1);
-  const [editMode, setEditMode] = useState(false);
   const [error, setError] = useState("");
 
   const stageRef = useRef<HTMLDivElement | null>(null);
-  const editorRef = useRef<ReportEditorElement | null>(null);
 
   useEffect(() => {
     if (!sessionId) {
@@ -79,7 +77,6 @@ export default function ReportViewerPage() {
 
   useEffect(() => {
     const handler = (event: KeyboardEvent) => {
-      if (editMode) return;
       if (event.key === "ArrowRight") {
         setPageIndex((idx) => Math.min(totalPages - 1, idx + 1));
       }
@@ -89,28 +86,18 @@ export default function ReportViewerPage() {
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [editMode, totalPages]);
-
-  useEffect(() => {
-    const editor = editorRef.current;
-    if (!editor) return;
-    const closeHandler = () => {
-      setEditMode(false);
-      if (sessionId) {
-        request<{ pages: Page[] }>(`/sessions/${sessionId}/pages`)
-          .then((resp) => {
-            const loaded = Array.isArray(resp.pages) ? resp.pages : [];
-            setPages(loaded);
-          })
-          .catch(() => {});
-      }
-    };
-    editor.addEventListener("editor-closed", closeHandler);
-    return () => editor.removeEventListener("editor-closed", closeHandler);
-  }, [sessionId]);
+  }, [totalPages]);
 
   const page = pages[pageIndex] ?? null;
+  const template = pages[0]?.template;
   const sessionQuery = buildSessionQuery(sessionId || "");
+  const editReportQuery = useMemo(() => {
+    if (!sessionId) return "";
+    const params = new URLSearchParams();
+    params.set("session", sessionId);
+    params.set("page", String(pageIndex + 1));
+    return `?${params.toString()}`;
+  }, [sessionId, pageIndex]);
 
   const viewerMeta = useMemo(() => {
     if (!session) return "Loading...";
@@ -124,18 +111,6 @@ export default function ReportViewerPage() {
     );
   }, [pages.length, session]);
 
-  function openEditor() {
-    if (!editorRef.current || !sessionId || !session) return;
-    setEditMode(true);
-    editorRef.current.open({
-      payload: session,
-      pageIndex,
-      totalPages,
-      sessionId,
-      apiBase: API_BASE,
-    });
-  }
-
   return (
     <main className="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8 print:ring-0 print:shadow-none print:rounded-none">
       <header className="mb-8 border-b border-gray-200 pb-4">
@@ -175,14 +150,13 @@ export default function ReportViewerPage() {
             Report Viewer
           </span>
 
-          <button
-            type="button"
-            onClick={openEditor}
+          <Link
+            to={`/edit-report${editReportQuery}`}
             className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
           >
             <Edit3 className="h-4 w-4" />
             Edit Report
-          </button>
+          </Link>
 
           <Link
             to={`/edit-layouts${sessionQuery}`}
@@ -205,7 +179,6 @@ export default function ReportViewerPage() {
       <section
         id="viewerSection"
         aria-label="Report viewer"
-        className={editMode ? "hidden" : ""}
       >
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
           <div>
@@ -257,6 +230,7 @@ export default function ReportViewerPage() {
               pageIndex={pageIndex}
               pageCount={totalPages}
               scale={scale}
+              template={template}
             />
           </div>
         </div>
@@ -272,7 +246,6 @@ export default function ReportViewerPage() {
         <p className="mt-1">Viewer now renders saved edits from the editor.</p>
       </footer>
 
-      <report-editor ref={editorRef} />
     </main>
   );
 }

frontend/src/types/custom-elements.d.ts

@@ -8,6 +8,7 @@ declare global {
     totalPages?: number;
     sessionId?: string | null;
     apiBase?: string | null;
+    mode?: "overlay" | "page";
   }
 
   interface ReportEditorElement extends HTMLElement {

frontend/src/types/session.ts

@@ -59,8 +59,26 @@ export type PageItem = {
   style?: PageItemStyle;
 };
 
+export type TemplateFields = {
+  inspection_date?: string;
+  inspector?: string;
+  accompanied_by?: string;
+  document_no?: string;
+  project?: string;
+  client_site?: string;
+  reference?: string;
+  action_type?: string;
+  item_description?: string;
+  functional_location?: string;
+  category?: string;
+  priority?: string;
+  condition_description?: string;
+  required_action?: string;
+};
+
 export type Page = {
   items: PageItem[];
+  template?: TemplateFields;
 };
 
 export type PagesResponse = {

index.html

@@ -1,398 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>RepEx - Report Express</title>
-
-  <!-- Project styles (optional) -->
-  <link rel="stylesheet" href="style.css" />
-
-  <!-- Tailwind (CDN is fine for prototypes; for production, compile Tailwind) -->
-  <script src="https://cdn.tailwindcss.com"></script>
-
-  <!-- Feather Icons (include once) -->
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-  </style>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <!-- Page container (matches the previous site's “white card + subtle ring” style) -->
-  <main class="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8">
-    <!-- Top Header (logo + app name) -->
-    <header class="mb-10 border-b border-gray-200 pb-4">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-4">
-        <!-- Logo -->
-        <div class="flex items-center">
-          <img
-            src="assets/prosento-logo.png"
-            alt="Company logo"
-            class="h-12 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <!-- Title -->
-        <div class="text-center">
-          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
-            Prosento RepEx
-          </h1>
-          <p class="text-gray-600 whitespace-nowrap">
-            Upload photos and documents to generate professional job reports instantly
-          </p>
-        </div>
-
-        <!-- Right action -->
-        <div class="flex justify-end">
-          <a
-            href="#upload"
-            class="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"
-          >
-            <i data-feather="arrow-down-circle" class="h-4 w-4"></i>
-            Upload
-          </a>
-        </div>
-      </div>
-    </header>
-
-    <!-- Hero CTA -->
-    <section class="text-center mb-12">
-      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
-        Generate inspection-ready reports in minutes
-      </h2>
-      <p class="text-base md:text-lg text-gray-600 mb-8">
-        Drag-and-drop files, add quick context, and produce a clean, consistent report format every time.
-      </p>
-
-      <div class="flex flex-col sm:flex-row justify-center gap-3">
-        <a
-          href="#upload"
-          class="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-white font-semibold hover:bg-blue-700 transition"
-        >
-          <i data-feather="upload" class="h-5 w-5"></i>
-          Start Uploading
-        </a>
-
-        <a
-          href="#how-it-works"
-          class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-6 py-3 text-gray-800 font-semibold hover:bg-gray-50 transition"
-        >
-          <i data-feather="info" class="h-5 w-5"></i>
-          Learn More
-        </a>
-      </div>
-    </section>
-
-    <!-- How it works -->
-    <section id="how-it-works" class="mb-12">
-      <h2 class="text-xl md:text-2xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-6">
-        How It Works
-      </h2>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <article class="rounded-lg border border-gray-200 bg-gray-50 p-5">
-          <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 border border-blue-100">
-            <i data-feather="camera" class="h-5 w-5 text-blue-700"></i>
-          </div>
-          <h3 class="text-base font-semibold text-gray-900 mb-1">Capture site photos</h3>
-          <p class="text-sm text-gray-600">
-            Take clear photos of structural elements and issues during your inspection.
-          </p>
-        </article>
-
-        <article class="rounded-lg border border-gray-200 bg-gray-50 p-5">
-          <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50 border border-emerald-100">
-            <i data-feather="upload-cloud" class="h-5 w-5 text-emerald-700"></i>
-          </div>
-          <h3 class="text-base font-semibold text-gray-900 mb-1">Upload documents</h3>
-          <p class="text-sm text-gray-600">
-            Add notes, measurements, and supporting PDFs/DOCX to complete the context.
-          </p>
-        </article>
-
-        <article class="rounded-lg border border-gray-200 bg-gray-50 p-5">
-          <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 border border-blue-100">
-            <i data-feather="file-text" class="h-5 w-5 text-blue-700"></i>
-          </div>
-          <h3 class="text-base font-semibold text-gray-900 mb-1">Generate report</h3>
-          <p class="text-sm text-gray-600">
-            Produce a consistent, professional report that’s ready for submission.
-          </p>
-        </article>
-      </div>
-    </section>
-
-    <!-- Upload -->
-    <section id="upload" class="mb-12">
-      <h2 class="text-xl md:text-2xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-6">
-        Upload Your Files
-      </h2>
-
-      <div class="rounded-lg border border-gray-200 bg-white p-6">
-        <!-- Drop zone -->
-        <div
-          id="dropZone"
-          class="rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center hover:border-blue-400 transition mb-6"
-          role="button"
-          tabindex="0"
-          aria-label="Drag and drop files here"
-        >
-          <div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 border border-blue-100">
-            <i data-feather="upload" class="h-5 w-5 text-blue-700"></i>
-          </div>
-
-          <h3 class="text-base font-semibold text-gray-900">Drag &amp; drop files here</h3>
-          <p class="text-sm text-gray-600 mt-1 mb-4">or browse to upload</p>
-
-          <button
-            id="browseFiles"
-            type="button"
-            class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-white font-semibold hover:bg-blue-700 transition"
-          >
-            Browse Files
-          </button>
-
-          <input
-            id="uploadInput"
-            type="file"
-            class="hidden"
-            multiple
-            accept=".jpg,.jpeg,.png,.webp,.pdf,.doc,.docx,.csv,.xls,.xlsx"
-          />
-
-          <p id="fileList" class="text-xs text-gray-500 mt-4">
-            Supports JPG, PNG, PDF, DOCX, CSV, XLSX (Max 50MB each)
-          </p>
-        </div>
-
-        <!-- Metadata -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-          <div class="space-y-1">
-            <label for="projectName" class="block text-sm font-medium text-gray-700">Project Name</label>
-            <input
-              id="projectName"
-              name="projectName"
-              type="text"
-              placeholder="e.g., North Pit Conveyor Support"
-              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500"
-            />
-          </div>
-
-          <div class="space-y-1">
-            <label for="inspectionDate" class="block text-sm font-medium text-gray-700">Inspection Date</label>
-            <input
-              id="inspectionDate"
-              name="inspectionDate"
-              type="date"
-              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500"
-            />
-          </div>
-        </div>
-
-        <div class="space-y-1 mb-6">
-          <label for="notes" class="block text-sm font-medium text-gray-700">Additional Notes</label>
-          <textarea
-            id="notes"
-            name="notes"
-            rows="4"
-            placeholder="Add any context you'd like included in the report..."
-            class="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500"
-          ></textarea>
-        </div>
-
-        <button
-          id="generateReport"
-          type="button"
-          class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-6 py-3 text-white font-semibold hover:bg-emerald-700 transition"
-        >
-          <i data-feather="file-plus" class="h-5 w-5"></i>
-          Generate Report
-        </button>
-        <p id="uploadStatus" class="text-sm text-gray-600 mt-3"></p>
-      </div>
-    </section>
-
-    <!-- Recent Reports -->
-    <section class="mb-6">
-      <h2 class="text-xl md:text-2xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-6">
-        Recent Reports
-      </h2>
-
-      <div class="rounded-lg border border-gray-200 bg-white overflow-hidden">
-        <div class="overflow-x-auto">
-          <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
-              <tr>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  Report ID
-                </th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  Project
-                </th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  Date
-                </th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  Status
-                </th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-
-            <tbody id="recentReports" class="bg-white divide-y divide-gray-200">
-              <tr>
-                <td colspan="5" class="px-6 py-6 text-sm text-gray-500 text-center">
-                  No recent reports yet.
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </section>
-
-    <!-- Footer -->
-    <footer class="mt-12 text-center text-xs text-gray-500">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-1">RepEx is a report automation interface. All uploads should comply with site data policies.</p>
-    </footer>
-  </main>
-
-  <!-- Your app script (optional) -->
-  <script src="script.js"></script>
-
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') {
-        window.feather.replace();
-      }
-
-      const dropZone = document.getElementById('dropZone');
-      const browseFiles = document.getElementById('browseFiles');
-      const uploadInput = document.getElementById('uploadInput');
-      const fileList = document.getElementById('fileList');
-      const generateReport = document.getElementById('generateReport');
-      const uploadStatus = document.getElementById('uploadStatus');
-
-      const projectName = document.getElementById('projectName');
-      const inspectionDate = document.getElementById('inspectionDate');
-      const notes = document.getElementById('notes');
-
-      let selectedFiles = [];
-
-      const updateFileList = () => {
-        if (!selectedFiles.length) {
-          fileList.textContent = 'Supports JPG, PNG, PDF, DOCX, CSV, XLSX (Max 50MB each)';
-          return;
-        }
-        const summary = selectedFiles
-          .map((file) => `${file.name} (${window.REPEX.formatBytes(file.size)})`)
-          .join(' • ');
-        fileList.textContent = summary;
-      };
-
-      browseFiles.addEventListener('click', () => uploadInput.click());
-      uploadInput.addEventListener('change', (event) => {
-        selectedFiles = Array.from(event.target.files || []);
-        updateFileList();
-      });
-
-      const setDragState = (active) => {
-        dropZone.classList.toggle('border-blue-500', active);
-        dropZone.classList.toggle('bg-blue-50', active);
-      };
-
-      ['dragenter', 'dragover'].forEach((evt) => {
-        dropZone.addEventListener(evt, (event) => {
-          event.preventDefault();
-          setDragState(true);
-        });
-      });
-      ['dragleave', 'drop'].forEach((evt) => {
-        dropZone.addEventListener(evt, (event) => {
-          event.preventDefault();
-          setDragState(false);
-        });
-      });
-      dropZone.addEventListener('drop', (event) => {
-        const files = Array.from(event.dataTransfer.files || []);
-        if (files.length) {
-          selectedFiles = files;
-          uploadInput.value = '';
-          updateFileList();
-        }
-      });
-
-      generateReport.addEventListener('click', async () => {
-        if (!selectedFiles.length) {
-          uploadStatus.textContent = 'Please add at least one file to continue.';
-          uploadStatus.classList.add('text-amber-700');
-          return;
-        }
-        generateReport.disabled = true;
-        uploadStatus.textContent = 'Uploading files...';
-        uploadStatus.classList.remove('text-amber-700');
-
-        const formData = new FormData();
-        formData.append('project_name', projectName.value.trim());
-        formData.append('inspection_date', inspectionDate.value);
-        formData.append('notes', notes.value.trim());
-        selectedFiles.forEach((file) => formData.append('files', file));
-
-        try {
-          const session = await window.REPEX.postForm('/sessions', formData);
-          window.REPEX.setSessionId(session.id);
-          window.location.href = `processing.html?session=${encodeURIComponent(session.id)}`;
-        } catch (err) {
-          uploadStatus.textContent = err.message || 'Upload failed.';
-          uploadStatus.classList.add('text-red-600');
-          generateReport.disabled = false;
-        }
-      });
-
-      async function loadRecentReports() {
-        const table = document.getElementById('recentReports');
-        if (!table) return;
-        try {
-          const sessions = await window.REPEX.request('/sessions');
-          if (!Array.isArray(sessions) || sessions.length === 0) {
-            return;
-          }
-          table.innerHTML = '';
-          sessions.slice(0, 5).forEach((session) => {
-            const row = document.createElement('tr');
-            row.innerHTML = `
-              <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">#${session.id.slice(0, 8)}</td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">${session.project_name || 'Untitled project'}</td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">${session.created_at ? new Date(session.created_at).toLocaleDateString() : '-'}</td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold bg-emerald-50 text-emerald-700 border-emerald-200">
-                  ${session.status || 'ready'}
-                </span>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm">
-                <a href="report-viewer.html?session=${session.id}" class="inline-flex items-center text-blue-700 hover:text-blue-800" aria-label="View report">
-                  <i data-feather="edit" class="h-4 w-4"></i>
-                </a>
-              </td>
-            `;
-            table.appendChild(row);
-          });
-          if (window.feather && typeof window.feather.replace === 'function') {
-            window.feather.replace();
-          }
-        } catch {
-          // ignore for now
-        }
-      }
-
-      loadRecentReports();
-    });
-  </script>
-</body>
-</html>

legacy/static-site/README.md

@@ -1,19 +0,0 @@
-# Legacy static site (archived)
-
-This folder is a copy of the original static HTML prototype.
-It is no longer used by the React/Vite frontend or the FastAPI server.
-
-If you do not need the static version, you can safely delete the following
-from the repo root:
-
-- assets/
-- components/
-- templates/
-- index.html
-- processing.html
-- review-setup.html
-- report-viewer.html
-- edit-layouts.html
-- export.html
-- style.css
-- script.js

legacy/static-site/components/components/report-editor.js

@@ -1,1185 +0,0 @@
-class ReportEditor extends HTMLElement {
-  constructor() {
-    super();
-    this._mounted = false;
-
-    this.BASE_W = 595;  // A4 points-ish (screen independent model)
-    this.BASE_H = 842;
-
-    this.state = {
-      isOpen: false,
-      zoom: 1,
-      activePage: 0,
-      pages: [],              // [{ items: [...] }]
-      selectedId: null,
-      tool: "select",         // select | text | rect
-      dragging: null,         // { id, startX, startY, origX, origY }
-      resizing: null,         // { id, handle, startX, startY, orig }
-      undo: [],               // stack of serialized states (current page)
-      redo: [],
-      payload: null,
-    };
-
-    this.sessionId = null;
-    this.apiBase = null;
-    this._saveTimer = null;
-  }
-
-  connectedCallback() {
-    if (this._mounted) return;
-    this._mounted = true;
-    this.render();
-    this.bind();
-    this.hide();
-  }
-
-  // Public API
-  open({ payload, pageIndex = 0, totalPages = 6, sessionId = null } = {}) {
-    this.state.payload = payload ?? null;
-    this.state.isOpen = true;
-    this.sessionId =
-      sessionId ||
-      (window.REPEX && typeof window.REPEX.getSessionId === "function"
-        ? window.REPEX.getSessionId()
-        : null);
-    this.apiBase = window.REPEX && window.REPEX.apiBase ? window.REPEX.apiBase : null;
-
-    // Load existing editor pages from storage, else initialize
-    const stored = this._loadPages();
-    if (stored && Array.isArray(stored.pages) && stored.pages.length) {
-      this.state.pages = stored.pages;
-    } else {
-      this.state.pages = Array.from({ length: totalPages }, () => ({ items: [] }));
-      this._savePages();
-    }
-
-    this.state.activePage = Math.min(Math.max(0, pageIndex), this.state.pages.length - 1);
-    this.state.selectedId = null;
-    this.state.tool = "select";
-    this.state.undo = [];
-    this.state.redo = [];
-
-    this.show();
-    this.updateAll();
-
-    if (this.sessionId) {
-      this._loadPagesFromServer().then((pages) => {
-        if (pages && pages.length) {
-          this.state.pages = pages;
-          this.state.activePage = Math.min(
-            Math.max(0, pageIndex),
-            this.state.pages.length - 1
-          );
-          this.updateAll();
-        }
-      });
-    }
-  }
-
-  close() {
-    this.state.isOpen = false;
-    this.hide();
-    this.dispatchEvent(new CustomEvent("editor-closed", { bubbles: true }));
-  }
-
-  // ---------- Rendering ----------
-  render() {
-    this.innerHTML = `
-      <div class="fixed inset-0 z-50 hidden" data-overlay>
-        <div class="absolute inset-0 bg-black/30"></div>
-
-        <div class="relative h-full w-full flex items-center justify-center p-4">
-          <div class="w-full max-w-6xl bg-white rounded-xl shadow-sm ring-1 ring-gray-200 overflow-hidden">
-            <!-- Header -->
-            <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
-              <div class="flex items-center gap-2">
-                <div class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-gray-50 border border-gray-200">
-                  <span class="text-xs font-bold text-gray-700">A4</span>
-                </div>
-                <div>
-                  <div class="text-sm font-semibold text-gray-900">Edit Report</div>
-                  <div class="text-xs text-gray-500">Drag, resize, format and arrange elements</div>
-                </div>
-              </div>
-
-              <div class="flex items-center gap-2">
-                <button data-btn="undo"
-                  class="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">
-                  <i data-feather="rotate-ccw" class="h-4 w-4"></i> Undo
-                </button>
-                <button data-btn="redo"
-                  class="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">
-                  <i data-feather="rotate-cw" class="h-4 w-4"></i> Redo
-                </button>
-
-                <button data-btn="save"
-                  class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-3 py-2 text-sm font-semibold text-white hover:bg-emerald-700 transition">
-                  <i data-feather="save" class="h-4 w-4"></i> Save
-                </button>
-
-                <button data-btn="close"
-                  class="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">
-                  <i data-feather="x" class="h-4 w-4"></i> Done
-                </button>
-              </div>
-            </div>
-
-            <!-- Body -->
-            <div class="grid grid-cols-1 lg:grid-cols-[240px,1fr,280px] gap-0 min-h-[70vh]">
-              <!-- Pages sidebar -->
-              <aside class="border-r border-gray-200 bg-white p-3">
-                <div class="flex items-center justify-between mb-3">
-                  <div class="text-sm font-semibold text-gray-900">Pages</div>
-                  <button data-btn="add-page"
-                    class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                    <i data-feather="plus" class="h-4 w-4"></i> Add
-                  </button>
-                </div>
-
-                <div class="space-y-2 max-h-[60vh] overflow-auto pr-1" data-page-list></div>
-
-                <div class="mt-3 text-xs text-gray-500">
-                  Tip: Click a page to edit. Your edits are saved to the server.
-                </div>
-              </aside>
-
-              <!-- Canvas + toolbar -->
-              <section class="bg-gray-50 p-3">
-                <!-- Toolbar -->
-                <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 mb-3">
-                  <div class="flex flex-wrap items-center gap-2">
-                    <button data-tool="select"
-                      class="toolBtn 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">
-                      <i data-feather="mouse-pointer" class="h-4 w-4"></i> Select
-                    </button>
-
-                    <button data-tool="text"
-                      class="toolBtn 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">
-                      <i data-feather="type" class="h-4 w-4"></i> Text
-                    </button>
-
-                    <button data-tool="rect"
-                      class="toolBtn 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">
-                      <i data-feather="square" class="h-4 w-4"></i> Shape
-                    </button>
-
-                    <button data-btn="add-image"
-                      class="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">
-                      <i data-feather="image" class="h-4 w-4"></i> Image
-                    </button>
-
-                    <input data-file="image" type="file" accept="image/*" class="hidden" />
-                  </div>
-
-                  <div class="flex items-center gap-2">
-                    <div class="text-xs font-semibold text-gray-600">Zoom</div>
-                    <button data-btn="zoom-out"
-                      class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-2 hover:bg-gray-50 transition">
-                      <i data-feather="minus" class="h-4 w-4"></i>
-                    </button>
-                    <div class="text-xs font-semibold text-gray-700 w-14 text-center" data-zoom-label>100%</div>
-                    <button data-btn="zoom-in"
-                      class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-2 hover:bg-gray-50 transition">
-                      <i data-feather="plus" class="h-4 w-4"></i>
-                    </button>
-                  </div>
-                </div>
-
-                <!-- Canvas area -->
-                <div class="flex justify-center">
-                  <div class="relative" data-canvas-wrap>
-                    <div
-                      data-canvas
-                      class="relative bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden select-none"
-                      style="width: min(100%, 700px); aspect-ratio: 210/297;"
-                      aria-label="Editable A4 canvas"
-                    >
-                      <!-- items injected here -->
-                    </div>
-                  </div>
-                </div>
-
-                <div class="mt-3 text-xs text-gray-500">
-                  Drag elements to move. Drag corner handles to resize. Double-click text to edit.
-                </div>
-              </section>
-
-              <!-- Properties panel -->
-              <aside class="border-l border-gray-200 bg-white p-3">
-                <div class="text-sm font-semibold text-gray-900 mb-2">Properties</div>
-
-                <div data-empty-props class="text-sm text-gray-600 rounded-lg border border-gray-200 bg-gray-50 p-3">
-                  Select an element to edit formatting and layout options.
-                </div>
-
-                <div data-props class="hidden space-y-4">
-                  <!-- Arrange -->
-                  <div class="rounded-lg border border-gray-200 p-3">
-                    <div class="text-xs font-semibold text-gray-600 mb-2">Arrange</div>
-                    <div class="flex flex-wrap gap-2">
-                      <button data-btn="bring-front"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="chevrons-up" class="h-4 w-4"></i> Front
-                      </button>
-                      <button data-btn="send-back"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="chevrons-down" class="h-4 w-4"></i> Back
-                      </button>
-                      <button data-btn="duplicate"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="copy" class="h-4 w-4"></i> Duplicate
-                      </button>
-                      <button data-btn="delete"
-                        class="inline-flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs font-semibold text-red-700 hover:bg-red-100 transition">
-                        <i data-feather="trash-2" class="h-4 w-4"></i> Delete
-                      </button>
-                    </div>
-                  </div>
-
-                  <!-- Text controls -->
-                  <div data-props-text class="rounded-lg border border-gray-200 p-3 hidden">
-                    <div class="text-xs font-semibold text-gray-600 mb-2">Text</div>
-
-                    <div class="grid grid-cols-2 gap-2">
-                      <label class="text-xs text-gray-600">
-                        Font size
-                        <input data-prop="fontSize" type="number" min="8" max="72"
-                          class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500" />
-                      </label>
-
-                      <label class="text-xs text-gray-600">
-                        Color
-                        <input data-prop="color" type="color"
-                          class="mt-1 w-full h-[40px] rounded-lg border border-gray-300 px-2 py-1" />
-                      </label>
-                    </div>
-
-                    <div class="flex flex-wrap gap-2 mt-2">
-                      <button data-btn="bold"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="bold" class="h-4 w-4"></i>
-                      </button>
-                      <button data-btn="italic"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="italic" class="h-4 w-4"></i>
-                      </button>
-                      <button data-btn="underline"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="underline" class="h-4 w-4"></i>
-                      </button>
-
-                      <button data-btn="align-left"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="align-left" class="h-4 w-4"></i>
-                      </button>
-                      <button data-btn="align-center"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="align-center" class="h-4 w-4"></i>
-                      </button>
-                      <button data-btn="align-right"
-                        class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                        <i data-feather="align-right" class="h-4 w-4"></i>
-                      </button>
-                    </div>
-                  </div>
-
-                  <!-- Shape controls -->
-                  <div data-props-rect class="rounded-lg border border-gray-200 p-3 hidden">
-                    <div class="text-xs font-semibold text-gray-600 mb-2">Shape</div>
-
-                    <div class="grid grid-cols-2 gap-2">
-                      <label class="text-xs text-gray-600">
-                        Fill
-                        <input data-prop="fill" type="color"
-                          class="mt-1 w-full h-[40px] rounded-lg border border-gray-300 px-2 py-1" />
-                      </label>
-
-                      <label class="text-xs text-gray-600">
-                        Border
-                        <input data-prop="stroke" type="color"
-                          class="mt-1 w-full h-[40px] rounded-lg border border-gray-300 px-2 py-1" />
-                      </label>
-                    </div>
-
-                    <label class="text-xs text-gray-600 block mt-2">
-                      Border width
-                      <input data-prop="strokeWidth" type="number" min="0" max="12"
-                        class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500" />
-                    </label>
-                  </div>
-
-                  <!-- Image controls -->
-                  <div data-props-image class="rounded-lg border border-gray-200 p-3 hidden">
-                    <div class="text-xs font-semibold text-gray-600 mb-2">Image</div>
-                    <button data-btn="replace-image"
-                      class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 transition">
-                      <i data-feather="refresh-cw" class="h-4 w-4"></i> Replace image
-                    </button>
-                    <input data-file="replace" type="file" accept="image/*" class="hidden" />
-                  </div>
-                </div>
-
-                <div class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
-                  <div class="font-semibold text-gray-800 mb-1">Keyboard shortcuts</div>
-                  <ul class="list-disc pl-4 space-y-1">
-                    <li><span class="font-semibold">Delete</span>: remove selected</li>
-                    <li><span class="font-semibold">Ctrl/Cmd+Z</span>: undo</li>
-                    <li><span class="font-semibold">Ctrl/Cmd+Y</span>: redo</li>
-                    <li><span class="font-semibold">Esc</span>: close editor</li>
-                  </ul>
-                </div>
-              </aside>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  bind() {
-    this.$overlay = this.querySelector("[data-overlay]");
-    this.$pageList = this.querySelector("[data-page-list]");
-    this.$canvas = this.querySelector("[data-canvas]");
-    this.$zoomLabel = this.querySelector("[data-zoom-label]");
-
-    this.$emptyProps = this.querySelector("[data-empty-props]");
-    this.$props = this.querySelector("[data-props]");
-    this.$propsText = this.querySelector("[data-props-text]");
-    this.$propsRect = this.querySelector("[data-props-rect]");
-    this.$propsImage = this.querySelector("[data-props-image]");
-
-    this.$imgFile = this.querySelector('[data-file="image"]');
-    this.$replaceFile = this.querySelector('[data-file="replace"]');
-
-    // header buttons
-    this.querySelector('[data-btn="close"]').addEventListener("click", () => this.close());
-    this.querySelector('[data-btn="save"]').addEventListener("click", () => this._savePages(true));
-    this.querySelector('[data-btn="undo"]').addEventListener("click", () => this.undo());
-    this.querySelector('[data-btn="redo"]').addEventListener("click", () => this.redo());
-
-    // tools
-    this.querySelectorAll(".toolBtn").forEach(btn => {
-      btn.addEventListener("click", () => {
-        this.state.tool = btn.dataset.tool;
-        this.updateToolbar();
-      });
-    });
-
-    // toolbar buttons
-    this.querySelector('[data-btn="add-image"]').addEventListener("click", () => this.$imgFile.click());
-    this.$imgFile.addEventListener("change", (e) => this._handleImageUpload(e, "add"));
-
-    this.querySelector('[data-btn="zoom-in"]').addEventListener("click", () => this.setZoom(this.state.zoom + 0.1));
-    this.querySelector('[data-btn="zoom-out"]').addEventListener("click", () => this.setZoom(this.state.zoom - 0.1));
-
-    // pages
-    this.querySelector('[data-btn="add-page"]').addEventListener("click", () => this.addPage());
-
-    // properties buttons
-    this.querySelector('[data-btn="delete"]').addEventListener("click", () => this.deleteSelected());
-    this.querySelector('[data-btn="duplicate"]').addEventListener("click", () => this.duplicateSelected());
-    this.querySelector('[data-btn="bring-front"]').addEventListener("click", () => this.bringFront());
-    this.querySelector('[data-btn="send-back"]').addEventListener("click", () => this.sendBack());
-
-    // text props
-    this.querySelector('[data-btn="bold"]').addEventListener("click", () => this.toggleTextStyle("bold"));
-    this.querySelector('[data-btn="italic"]').addEventListener("click", () => this.toggleTextStyle("italic"));
-    this.querySelector('[data-btn="underline"]').addEventListener("click", () => this.toggleTextStyle("underline"));
-    this.querySelector('[data-btn="align-left"]').addEventListener("click", () => this.setTextAlign("left"));
-    this.querySelector('[data-btn="align-center"]').addEventListener("click", () => this.setTextAlign("center"));
-    this.querySelector('[data-btn="align-right"]').addEventListener("click", () => this.setTextAlign("right"));
-
-    this.querySelector('[data-prop="fontSize"]').addEventListener("input", (e) => this.setProp("fontSize", Number(e.target.value || 12)));
-    this.querySelector('[data-prop="color"]').addEventListener("input", (e) => this.setProp("color", e.target.value));
-
-    // rect props
-    this.querySelector('[data-prop="fill"]').addEventListener("input", (e) => this.setProp("fill", e.target.value));
-    this.querySelector('[data-prop="stroke"]').addEventListener("input", (e) => this.setProp("stroke", e.target.value));
-    this.querySelector('[data-prop="strokeWidth"]').addEventListener("input", (e) => this.setProp("strokeWidth", Number(e.target.value || 0)));
-
-    // image replace
-    this.querySelector('[data-btn="replace-image"]').addEventListener("click", () => this.$replaceFile.click());
-    this.$replaceFile.addEventListener("change", (e) => this._handleImageUpload(e, "replace"));
-
-    // canvas interactions
-    this.$canvas.addEventListener("pointerdown", (e) => this.onCanvasPointerDown(e));
-    window.addEventListener("pointermove", (e) => this.onPointerMove(e));
-    window.addEventListener("pointerup", () => this.onPointerUp());
-
-    // keyboard shortcuts
-    window.addEventListener("keydown", (e) => {
-      if (!this.state.isOpen) return;
-
-      if (e.key === "Escape") {
-        e.preventDefault();
-        this.close();
-      }
-
-      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
-        e.preventDefault();
-        this.undo();
-      }
-      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "y") {
-        e.preventDefault();
-        this.redo();
-      }
-
-      if (e.key === "Delete" || e.key === "Backspace") {
-        // avoid deleting while typing in contenteditable
-        const active = document.activeElement;
-        const isEditingText = active && active.getAttribute && active.getAttribute("contenteditable") === "true";
-        if (!isEditingText) this.deleteSelected();
-      }
-    });
-  }
-
-  // ---------- Core helpers ----------
-  show() {
-    this.$overlay.classList.remove("hidden");
-    this.state.isOpen = true;
-    this.updateAll();
-  }
-
-  hide() {
-    this.$overlay.classList.add("hidden");
-    this.state.isOpen = false;
-  }
-
-  setZoom(z) {
-    const clamped = Math.max(0.6, Math.min(1.4, Number(z.toFixed(2))));
-    this.state.zoom = clamped;
-    this.updateCanvasScale();
-  }
-
-  get activePage() {
-    return this.state.pages[this.state.activePage];
-  }
-
-  updateAll() {
-    this.updateToolbar();
-    this.renderPageList();
-    this.renderCanvas();
-    this.updateCanvasScale();
-    this.updatePropsPanel();
-    this.updateUndoRedoButtons();
-    this._refreshIcons();
-  }
-
-  updateToolbar() {
-    this.querySelectorAll(".toolBtn").forEach(btn => {
-      const active = btn.dataset.tool === this.state.tool;
-      btn.classList.toggle("bg-gray-900", active);
-      btn.classList.toggle("text-white", active);
-      btn.classList.toggle("border-gray-900", active);
-
-      if (!active) {
-        btn.classList.add("bg-white", "text-gray-800", "border-gray-200");
-        btn.classList.remove("bg-gray-900", "text-white", "border-gray-900");
-      } else {
-        btn.classList.remove("bg-white", "text-gray-800", "border-gray-200");
-      }
-    });
-  }
-
-  updateCanvasScale() {
-    if (!this.$canvas) return;
-    this.$canvas.style.transformOrigin = "top center";
-    this.$canvas.style.transform = `scale(${this.state.zoom})`;
-    this.$zoomLabel.textContent = `${Math.round(this.state.zoom * 100)}%`;
-  }
-
-  _refreshIcons() {
-    if (window.feather && typeof window.feather.replace === "function") {
-      window.feather.replace();
-    }
-  }
-
-  // ---------- Storage ----------
-  _storageKey() {
-    if (this.sessionId) {
-      return `repex_report_pages_v1_${this.sessionId}`;
-    }
-    return "repex_report_pages_v1";
-  }
-
-  _loadPages() {
-    try {
-      const raw = localStorage.getItem(this._storageKey());
-      return raw ? JSON.parse(raw) : null;
-    } catch {
-      return null;
-    }
-  }
-
-  _savePages(showToast = false) {
-    try {
-      localStorage.setItem(this._storageKey(), JSON.stringify({ pages: this.state.pages }));
-      this._scheduleServerSave();
-      if (showToast) this._toast("Saved");
-    } catch {
-      if (showToast) this._toast("Save failed");
-    }
-  }
-
-  _apiRoot() {
-    if (this.apiBase) return this.apiBase.replace(/\/$/, "");
-    if (window.REPEX && window.REPEX.apiBase) return window.REPEX.apiBase.replace(/\/$/, "");
-    return "";
-  }
-
-  async _loadPagesFromServer() {
-    const base = this._apiRoot();
-    if (!base || !this.sessionId) return null;
-    try {
-      const res = await fetch(`${base}/sessions/${this.sessionId}/pages`);
-      if (!res.ok) return null;
-      const data = await res.json();
-      if (data && Array.isArray(data.pages)) {
-        return data.pages;
-      }
-    } catch {}
-    return null;
-  }
-
-  _scheduleServerSave() {
-    if (!this.sessionId) return;
-    if (this._saveTimer) clearTimeout(this._saveTimer);
-    this._saveTimer = setTimeout(() => {
-      this._savePagesToServer();
-    }, 800);
-  }
-
-  async _savePagesToServer() {
-    const base = this._apiRoot();
-    if (!base || !this.sessionId) return;
-    try {
-      const res = await fetch(`${base}/sessions/${this.sessionId}/pages`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ pages: this.state.pages }),
-      });
-      if (!res.ok) {
-        throw new Error("Failed");
-      }
-    } catch {
-      this._toast("Sync failed");
-    }
-  }
-
-  _toast(text) {
-    const el = document.createElement("div");
-    el.className = "fixed z-[60] bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-gray-900 text-white text-sm font-semibold px-4 py-2 shadow";
-    el.textContent = text;
-    document.body.appendChild(el);
-    setTimeout(() => el.remove(), 1200);
-  }
-
-  // ---------- Page list ----------
-  renderPageList() {
-    this.$pageList.innerHTML = "";
-
-    this.state.pages.forEach((_, idx) => {
-      const active = idx === this.state.activePage;
-
-      const btn = document.createElement("button");
-      btn.type = "button";
-      btn.className =
-        "w-full text-left rounded-lg border px-3 py-2 transition " +
-        (active
-          ? "border-gray-900 bg-gray-900 text-white"
-          : "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 class="text-xs ${active ? "text-white/80" : "text-gray-500"}">${this.state.pages[idx].items.length} items</div>
-        </div>
-      `;
-      btn.addEventListener("click", () => {
-        this.state.activePage = idx;
-        this.state.selectedId = null;
-        this.state.undo = [];
-        this.state.redo = [];
-        this.updateAll();
-      });
-
-      this.$pageList.appendChild(btn);
-    });
-  }
-
-  addPage() {
-    this._pushUndoSnapshot();
-    this.state.pages.push({ items: [] });
-    this.state.activePage = this.state.pages.length - 1;
-    this.state.selectedId = null;
-    this._savePages();
-    this.updateAll();
-  }
-
-  // ---------- Canvas rendering ----------
-  renderCanvas() {
-    this.$canvas.innerHTML = "";
-
-    // Click-away surface
-    const surface = document.createElement("div");
-    surface.className = "absolute inset-0";
-    surface.addEventListener("pointerdown", (e) => {
-      // only clear selection if clicking empty space
-      if (e.target === surface) {
-        this.state.selectedId = null;
-        this.updatePropsPanel();
-        this.renderCanvas();
-      }
-    });
-    this.$canvas.appendChild(surface);
-
-    const items = this.activePage.items;
-    const selectedId = this.state.selectedId;
-
-    items
-      .slice()
-      .sort((a, b) => (a.z ?? 0) - (b.z ?? 0))
-      .forEach(item => {
-        const wrapper = document.createElement("div");
-        wrapper.dataset.itemId = item.id;
-        wrapper.className = "absolute";
-
-        // scaled px placement based on model units
-        const scale = this._canvasScale();
-        wrapper.style.left = `${item.x * scale}px`;
-        wrapper.style.top = `${item.y * scale}px`;
-        wrapper.style.width = `${item.w * scale}px`;
-        wrapper.style.height = `${item.h * scale}px`;
-        wrapper.style.zIndex = String(item.z ?? 0);
-
-        const isSelected = selectedId === item.id;
-        if (isSelected) wrapper.classList.add("ring-2", "ring-blue-300");
-
-        // content
-        if (item.type === "text") {
-          const content = document.createElement("div");
-          content.className = "w-full h-full p-2 overflow-hidden";
-          content.setAttribute("contenteditable", "true");
-          content.style.fontSize = `${(item.style?.fontSize ?? 14) * scale}px`;
-          content.style.fontWeight = item.style?.bold ? "700" : "400";
-          content.style.fontStyle = item.style?.italic ? "italic" : "normal";
-          content.style.textDecoration = item.style?.underline ? "underline" : "none";
-          content.style.color = item.style?.color ?? "#111827";
-          content.style.textAlign = item.style?.align ?? "left";
-          content.style.whiteSpace = "pre-wrap";
-          content.style.outline = "none";
-          content.innerText = item.content ?? "Double-click to edit";
-
-          // update model when typing (debounced)
-          let t = null;
-          content.addEventListener("input", () => {
-            clearTimeout(t);
-            t = setTimeout(() => {
-              const it = this._findItem(item.id);
-              if (!it) return;
-              it.content = content.innerText;
-              this._savePages();
-            }, 250);
-          });
-
-          // selecting the item (click wrapper)
-          content.addEventListener("pointerdown", (e) => {
-            e.stopPropagation();
-            this.selectItem(item.id);
-          });
-
-          wrapper.appendChild(content);
-        }
-
-        if (item.type === "image") {
-          const img = document.createElement("img");
-          img.className = "w-full h-full object-contain bg-white";
-          img.src = item.src;
-          img.alt = item.name ?? "Image";
-          img.draggable = false;
-          img.addEventListener("pointerdown", (e) => {
-            e.stopPropagation();
-            this.selectItem(item.id);
-          });
-          wrapper.appendChild(img);
-        }
-
-        if (item.type === "rect") {
-          const box = document.createElement("div");
-          box.className = "w-full h-full";
-          box.style.background = item.style?.fill ?? "#ffffff";
-          box.style.borderColor = item.style?.stroke ?? "#111827";
-          box.style.borderWidth = `${(item.style?.strokeWidth ?? 1) * scale}px`;
-          box.style.borderStyle = "solid";
-          box.addEventListener("pointerdown", (e) => {
-            e.stopPropagation();
-            this.selectItem(item.id);
-          });
-          wrapper.appendChild(box);
-        }
-
-        // wrapper drag handler
-        wrapper.addEventListener("pointerdown", (e) => this.onItemPointerDown(e, item.id));
-
-        // resize handles (selected only)
-        if (isSelected) {
-          ["nw", "ne", "sw", "se"].forEach(handle => {
-            const h = document.createElement("div");
-            h.dataset.handle = handle;
-            h.className =
-              "absolute w-3 h-3 bg-white border border-blue-300 rounded-sm";
-            if (handle === "nw") { h.style.left = "-6px"; h.style.top = "-6px"; }
-            if (handle === "ne") { h.style.right = "-6px"; h.style.top = "-6px"; }
-            if (handle === "sw") { h.style.left = "-6px"; h.style.bottom = "-6px"; }
-            if (handle === "se") { h.style.right = "-6px"; h.style.bottom = "-6px"; }
-
-            h.style.cursor = `${handle}-resize`;
-            h.addEventListener("pointerdown", (e) => {
-              e.stopPropagation();
-              this.startResize(e, item.id, handle);
-            });
-            wrapper.appendChild(h);
-          });
-        }
-
-        this.$canvas.appendChild(wrapper);
-      });
-  }
-
-  _canvasScale() {
-    // actual displayed width divided by model width
-    const rect = this.$canvas.getBoundingClientRect();
-    const w = rect.width; // already pre-zoom; we apply zoom with CSS transform
-    return w / this.BASE_W;
-  }
-
-  // ---------- Item creation ----------
-  onCanvasPointerDown(e) {
-    // prevent adding when clicking existing item
-    const hit = e.target.closest("[data-item-id]");
-    if (hit) return;
-
-    const { x, y } = this._eventToModelPoint(e);
-
-    if (this.state.tool === "text") {
-      this._pushUndoSnapshot();
-      const id = this._id();
-      this.activePage.items.push({
-        id,
-        type: "text",
-        x: this._clamp(x, 0, this.BASE_W - 200),
-        y: this._clamp(y, 0, this.BASE_H - 80),
-        w: 220,
-        h: 80,
-        z: this._maxZ() + 1,
-        content: "New text",
-        style: { fontSize: 14, bold: false, italic: false, underline: false, color: "#111827", align: "left" }
-      });
-      this.selectItem(id);
-      this._savePages();
-      this.renderCanvas();
-      this.updatePropsPanel();
-      return;
-    }
-
-    if (this.state.tool === "rect") {
-      this._pushUndoSnapshot();
-      const id = this._id();
-      this.activePage.items.push({
-        id,
-        type: "rect",
-        x: this._clamp(x, 0, this.BASE_W - 200),
-        y: this._clamp(y, 0, this.BASE_H - 120),
-        w: 220,
-        h: 120,
-        z: this._maxZ() + 1,
-        style: { fill: "#ffffff", stroke: "#111827", strokeWidth: 1 }
-      });
-      this.selectItem(id);
-      this._savePages();
-      this.renderCanvas();
-      this.updatePropsPanel();
-      return;
-    }
-
-    // select tool clicking empty space clears selection
-    if (this.state.tool === "select") {
-      this.state.selectedId = null;
-      this.updatePropsPanel();
-      this.renderCanvas();
-    }
-  }
-
-  _eventToModelPoint(e) {
-    const canvasRect = this.$canvas.getBoundingClientRect();
-    // account for zoom (transform), use client coords mapping
-    const zoom = this.state.zoom;
-    const xPx = (e.clientX - canvasRect.left) / zoom;
-    const yPx = (e.clientY - canvasRect.top) / zoom;
-
-    const scale = canvasRect.width / this.BASE_W; // pre-zoom scale
-    return { x: xPx / scale, y: yPx / scale };
-  }
-
-  // ---------- Selection / Drag / Resize ----------
-  selectItem(id) {
-    this.state.selectedId = id;
-    this.updatePropsPanel();
-    this.renderCanvas();
-  }
-
-  onItemPointerDown(e, id) {
-    // ignore if resizing handle
-    if (e.target && e.target.dataset && e.target.dataset.handle) return;
-
-    // select
-    this.selectItem(id);
-
-    // start drag only when using select tool
-    if (this.state.tool !== "select") return;
-
-    this._pushUndoSnapshot();
-
-    const it = this._findItem(id);
-    if (!it) return;
-
-    const { x, y } = this._eventToModelPoint(e);
-    this.state.dragging = {
-      id,
-      startX: x,
-      startY: y,
-      origX: it.x,
-      origY: it.y
-    };
-
-    e.preventDefault();
-  }
-
-  startResize(e, id, handle) {
-    this._pushUndoSnapshot();
-
-    const it = this._findItem(id);
-    if (!it) return;
-
-    const { x, y } = this._eventToModelPoint(e);
-    this.state.resizing = {
-      id,
-      handle,
-      startX: x,
-      startY: y,
-      orig: { x: it.x, y: it.y, w: it.w, h: it.h }
-    };
-    e.preventDefault();
-  }
-
-  onPointerMove(e) {
-    if (!this.state.isOpen) return;
-
-    if (this.state.dragging) {
-      const d = this.state.dragging;
-      const it = this._findItem(d.id);
-      if (!it) return;
-
-      const { x, y } = this._eventToModelPoint(e);
-      const dx = x - d.startX;
-      const dy = y - d.startY;
-
-      it.x = this._clamp(d.origX + dx, 0, this.BASE_W - it.w);
-      it.y = this._clamp(d.origY + dy, 0, this.BASE_H - it.h);
-
-      this._savePages();
-      this.renderCanvas();
-      return;
-    }
-
-    if (this.state.resizing) {
-      const r = this.state.resizing;
-      const it = this._findItem(r.id);
-      if (!it) return;
-
-      const { x, y } = this._eventToModelPoint(e);
-      const dx = x - r.startX;
-      const dy = y - r.startY;
-
-      const o = r.orig;
-      const minW = 40, minH = 30;
-
-      let nx = o.x, ny = o.y, nw = o.w, nh = o.h;
-
-      if (r.handle.includes("e")) nw = this._clamp(o.w + dx, minW, this.BASE_W - o.x);
-      if (r.handle.includes("s")) nh = this._clamp(o.h + dy, minH, this.BASE_H - o.y);
-      if (r.handle.includes("w")) {
-        nw = this._clamp(o.w - dx, minW, o.w + o.x);
-        nx = this._clamp(o.x + dx, 0, o.x + o.w - minW);
-      }
-      if (r.handle.includes("n")) {
-        nh = this._clamp(o.h - dy, minH, o.h + o.y);
-        ny = this._clamp(o.y + dy, 0, o.y + o.h - minH);
-      }
-
-      it.x = nx; it.y = ny; it.w = nw; it.h = nh;
-
-      this._savePages();
-      this.renderCanvas();
-    }
-  }
-
-  onPointerUp() {
-    if (!this.state.isOpen) return;
-
-    if (this.state.dragging) {
-      this.state.dragging = null;
-      this.updateUndoRedoButtons();
-    }
-    if (this.state.resizing) {
-      this.state.resizing = null;
-      this.updateUndoRedoButtons();
-    }
-  }
-
-  // ---------- Properties panel ----------
-  updatePropsPanel() {
-    const it = this._findItem(this.state.selectedId);
-    const has = !!it;
-
-    this.$emptyProps.classList.toggle("hidden", has);
-    this.$props.classList.toggle("hidden", !has);
-
-    // hide all groups first
-    this.$propsText.classList.add("hidden");
-    this.$propsRect.classList.add("hidden");
-    this.$propsImage.classList.add("hidden");
-
-    if (!it) return;
-
-    if (it.type === "text") {
-      this.$propsText.classList.remove("hidden");
-      this.querySelector('[data-prop="fontSize"]').value = it.style?.fontSize ?? 14;
-      this.querySelector('[data-prop="color"]').value = it.style?.color ?? "#111827";
-    }
-
-    if (it.type === "rect") {
-      this.$propsRect.classList.remove("hidden");
-      this.querySelector('[data-prop="fill"]').value = it.style?.fill ?? "#ffffff";
-      this.querySelector('[data-prop="stroke"]').value = it.style?.stroke ?? "#111827";
-      this.querySelector('[data-prop="strokeWidth"]').value = it.style?.strokeWidth ?? 1;
-    }
-
-    if (it.type === "image") {
-      this.$propsImage.classList.remove("hidden");
-    }
-
-    this._refreshIcons();
-  }
-
-  setProp(key, value) {
-    const it = this._findItem(this.state.selectedId);
-    if (!it) return;
-
-    this._pushUndoSnapshot();
-
-    it.style = it.style || {};
-    it.style[key] = value;
-
-    this._savePages();
-    this.renderCanvas();
-    this.updatePropsPanel();
-    this.updateUndoRedoButtons();
-  }
-
-  toggleTextStyle(which) {
-    const it = this._findItem(this.state.selectedId);
-    if (!it || it.type !== "text") return;
-
-    this._pushUndoSnapshot();
-
-    it.style = it.style || {};
-    if (which === "bold") it.style.bold = !it.style.bold;
-    if (which === "italic") it.style.italic = !it.style.italic;
-    if (which === "underline") it.style.underline = !it.style.underline;
-
-    this._savePages();
-    this.renderCanvas();
-    this.updateUndoRedoButtons();
-  }
-
-  setTextAlign(align) {
-    const it = this._findItem(this.state.selectedId);
-    if (!it || it.type !== "text") return;
-    this.setProp("align", align);
-  }
-
-  // ---------- Arrange ----------
-  bringFront() {
-    const it = this._findItem(this.state.selectedId);
-    if (!it) return;
-    this._pushUndoSnapshot();
-    it.z = this._maxZ() + 1;
-    this._savePages();
-    this.renderCanvas();
-    this.updateUndoRedoButtons();
-  }
-
-  sendBack() {
-    const it = this._findItem(this.state.selectedId);
-    if (!it) return;
-    this._pushUndoSnapshot();
-    it.z = this._minZ() - 1;
-    this._savePages();
-    this.renderCanvas();
-    this.updateUndoRedoButtons();
-  }
-
-  duplicateSelected() {
-    const it = this._findItem(this.state.selectedId);
-    if (!it) return;
-    this._pushUndoSnapshot();
-
-    const copy = JSON.parse(JSON.stringify(it));
-    copy.id = this._id();
-    copy.x = this._clamp(copy.x + 12, 0, this.BASE_W - copy.w);
-    copy.y = this._clamp(copy.y + 12, 0, this.BASE_H - copy.h);
-    copy.z = this._maxZ() + 1;
-
-    this.activePage.items.push(copy);
-    this.state.selectedId = copy.id;
-
-    this._savePages();
-    this.updateAll();
-    this.updateUndoRedoButtons();
-  }
-
-  deleteSelected() {
-    const id = this.state.selectedId;
-    if (!id) return;
-
-    this._pushUndoSnapshot();
-
-    this.activePage.items = this.activePage.items.filter(x => x.id !== id);
-    this.state.selectedId = null;
-
-    this._savePages();
-    this.updateAll();
-    this.updateUndoRedoButtons();
-  }
-
-  // ---------- Images ----------
-  _handleImageUpload(e, mode) {
-    const file = e.target.files && e.target.files[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = () => {
-      if (mode === "add") {
-        this._pushUndoSnapshot();
-        const id = this._id();
-        const w = 260, h = 180;
-        this.activePage.items.push({
-          id,
-          type: "image",
-          x: (this.BASE_W - w) / 2,
-          y: (this.BASE_H - h) / 2,
-          w, h,
-          z: this._maxZ() + 1,
-          src: reader.result,
-          name: file.name
-        });
-        this.selectItem(id);
-        this._savePages();
-        this.updateAll();
-        this.updateUndoRedoButtons();
-      }
-
-      if (mode === "replace") {
-        const it = this._findItem(this.state.selectedId);
-        if (!it || it.type !== "image") return;
-        this._pushUndoSnapshot();
-        it.src = reader.result;
-        it.name = file.name;
-        this._savePages();
-        this.updateAll();
-        this.updateUndoRedoButtons();
-      }
-    };
-    reader.readAsDataURL(file);
-
-    // reset input
-    e.target.value = "";
-  }
-
-  // ---------- Undo / redo ----------
-  _pushUndoSnapshot() {
-    // store snapshot of active page items
-    const snap = JSON.stringify(this.activePage.items);
-    const last = this.state.undo[this.state.undo.length - 1];
-    if (last !== snap) this.state.undo.push(snap);
-    // clear redo on new change
-    this.state.redo = [];
-    this.updateUndoRedoButtons();
-  }
-
-  undo() {
-    if (!this.state.undo.length) return;
-
-    const current = JSON.stringify(this.activePage.items);
-    const prev = this.state.undo.pop();
-    this.state.redo.push(current);
-
-    // restore prev
-    try {
-      this.activePage.items = JSON.parse(prev);
-    } catch {}
-    this.state.selectedId = null;
-
-    this._savePages();
-    this.updateAll();
-  }
-
-  redo() {
-    if (!this.state.redo.length) return;
-
-    const current = JSON.stringify(this.activePage.items);
-    const next = this.state.redo.pop();
-    this.state.undo.push(current);
-
-    try {
-      this.activePage.items = JSON.parse(next);
-    } catch {}
-    this.state.selectedId = null;
-
-    this._savePages();
-    this.updateAll();
-  }
-
-  updateUndoRedoButtons() {
-    const undoBtn = this.querySelector('[data-btn="undo"]');
-    const redoBtn = this.querySelector('[data-btn="redo"]');
-    if (undoBtn) undoBtn.disabled = this.state.undo.length === 0;
-    if (redoBtn) redoBtn.disabled = this.state.redo.length === 0;
-  }
-
-  // ---------- Utils ----------
-  _findItem(id) {
-    if (!id) return null;
-    return this.activePage.items.find(x => x.id === id) || null;
-  }
-
-  _maxZ() {
-    const items = this.activePage.items;
-    return items.length ? Math.max(...items.map(i => i.z ?? 0)) : 0;
-  }
-
-  _minZ() {
-    const items = this.activePage.items;
-    return items.length ? Math.min(...items.map(i => i.z ?? 0)) : 0;
-  }
-
-  _id() {
-    return "it_" + Math.random().toString(16).slice(2) + "_" + Date.now().toString(16);
-  }
-
-  _clamp(n, a, b) {
-    return Math.max(a, Math.min(b, n));
-  }
-}
-
-customElements.define("report-editor", ReportEditor);

legacy/static-site/edit-layouts.html

@@ -1,265 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>RepEx - Report Express | Export</title>
-
-  <link rel="stylesheet" href="style.css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-    @media print {
-      body { background: #fff !important; }
-      .no-print { display: none !important; }
-      main { box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
-    }
-  </style>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <main class="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8">
-    <!-- Header -->
-    <header class="mb-8 border-b border-gray-200 pb-4">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-4">
-        <div class="flex items-center">
-          <img
-src="assets/prosento-logo.png"
-            alt="Company logo"
-            class="h-12 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <div class="text-center">
-          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
-            RepEx - Report Express
-          </h1>
-          <p class="text-gray-600 whitespace-nowrap">Export</p>
-        </div>
-
-        <div class="flex justify-end gap-2 no-print">
-          <a
-            href="report-viewer.html"
-            class="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"
-          >
-            <i data-feather="arrow-left" class="h-4 w-4"></i>
-            Back
-          </a>
-        </div>
-      </div>
-    </header>
-
-    <!-- Workflow navigation -->
-    <nav class="mb-6 no-print" aria-label="Report workflow navigation">
-      <div class="flex flex-wrap gap-2">
-        <a
-          href="report-viewer.html"
-          class="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"
-        >
-          <i data-feather="layout" class="h-4 w-4"></i>
-          Report Viewer
-        </a>
-
-        <a
-          href="edit-layouts.html"
-          class="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"
-        >
-          <i data-feather="grid" class="h-4 w-4"></i>
-          Edit Page Layouts
-        </a>
-
-        <a
-          href="export.html"
-          class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white"
-        >
-          <i data-feather="download" class="h-4 w-4"></i>
-          Export
-        </a>
-      </div>
-    </nav>
-
-    <section class="grid grid-cols-1 lg:grid-cols-[1fr,360px] gap-6">
-      <!-- Export options -->
-      <div class="rounded-lg border border-gray-200 bg-white p-4">
-        <h2 class="text-lg font-semibold text-gray-900 mb-2">Export Options</h2>
-        <p class="text-sm text-gray-600 mb-4">
-          PDF export comes next. For now, you can export a report “package” as JSON (pages + layout settings + payload).
-        </p>
-
-        <div class="space-y-4">
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-            <div class="flex items-start justify-between gap-3">
-              <div>
-                <div class="text-sm font-semibold text-gray-900">Report package (.json)</div>
-                <div class="text-xs text-gray-500">Includes edited pages, layout settings and upload metadata</div>
-              </div>
-              <span class="text-xs font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-md px-2 py-1">
-                Available
-              </span>
-            </div>
-
-            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incPages" type="checkbox" class="rounded border-gray-300" checked />
-                Include pages
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incLayout" type="checkbox" class="rounded border-gray-300" checked />
-                Include layout settings
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incPayload" type="checkbox" class="rounded border-gray-300" checked />
-                Include upload payload
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incTimestamp" type="checkbox" class="rounded border-gray-300" checked />
-                Include timestamp
-              </label>
-            </div>
-
-            <button id="downloadJson" type="button"
-              class="mt-4 inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-4 py-2.5 text-white font-semibold hover:bg-emerald-700 transition">
-              <i data-feather="download" class="h-4 w-4"></i>
-              Download JSON package
-            </button>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-            <div class="flex items-start justify-between gap-3">
-              <div>
-                <div class="text-sm font-semibold text-gray-900">PDF export</div>
-                <div class="text-xs text-gray-500">Will export as print-ready A4 PDF</div>
-              </div>
-              <span class="text-xs font-semibold text-gray-600 bg-white border border-gray-200 rounded-md px-2 py-1">
-                Coming soon
-              </span>
-            </div>
-
-            <button type="button" disabled
-              class="mt-4 inline-flex items-center justify-center gap-2 rounded-lg bg-gray-200 px-4 py-2.5 text-gray-500 font-semibold cursor-not-allowed">
-              <i data-feather="file-text" class="h-4 w-4"></i>
-              Export PDF (disabled)
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Summary -->
-      <aside class="rounded-lg border border-gray-200 bg-white p-4">
-        <h2 class="text-lg font-semibold text-gray-900 mb-2">Export Summary</h2>
-        <p class="text-sm text-gray-600 mb-4">This is what will be included based on your current session.</p>
-
-        <div class="space-y-3">
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Pages</div>
-            <div id="sumPages" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Selected example photos</div>
-            <div id="sumPhotos" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Documents</div>
-            <div id="sumDocs" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Data files</div>
-            <div id="sumData" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="text-xs text-gray-500">
-            Stored in the active server session.
-          </div>
-        </div>
-      </aside>
-    </section>
-
-    <footer class="mt-12 text-center text-xs text-gray-500 no-print">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-1">Export: JSON package now; PDF export will be added next.</p>
-    </footer>
-  </main>
-
-  <script src="script.js"></script>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') feather.replace();
-
-      const sessionId = window.REPEX.getSessionId();
-      window.REPEX.setSessionId(sessionId);
-      const sumPages = document.getElementById('sumPages');
-      const sumPhotos = document.getElementById('sumPhotos');
-      const sumDocs = document.getElementById('sumDocs');
-      const sumData = document.getElementById('sumData');
-
-      const incPages = document.getElementById('incPages');
-      const incLayout = document.getElementById('incLayout');
-      const incPayload = document.getElementById('incPayload');
-      const incTimestamp = document.getElementById('incTimestamp');
-      const downloadJson = document.getElementById('downloadJson');
-
-      if (!sessionId) {
-        sumPages.textContent = 'No active session.';
-        sumPhotos.textContent = '-';
-        sumDocs.textContent = '-';
-        sumData.textContent = '-';
-        downloadJson.disabled = true;
-        return;
-      }
-
-      let session = null;
-      let pages = [];
-
-      function downloadBlob(filename, text) {
-        const blob = new Blob([text], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        URL.revokeObjectURL(url);
-      }
-
-      function updateSummary() {
-        const totalItems = pages.reduce((acc, p) => acc + ((p?.items?.length) || 0), 0);
-        sumPages.textContent = pages.length ? `${pages.length} pages ? ${totalItems} total items` : 'No saved pages yet';
-        sumPhotos.textContent = `${session?.selected_photo_ids?.length ?? 0}`;
-        sumDocs.textContent = `${session?.uploads?.documents?.length ?? 0}`;
-        sumData.textContent = `${session?.uploads?.data_files?.length ?? 0}`;
-      }
-
-      async function loadData() {
-        try {
-          session = await window.REPEX.request(`/sessions/${sessionId}`);
-          const pageResp = await window.REPEX.request(`/sessions/${sessionId}/pages`);
-          pages = Array.isArray(pageResp?.pages) ? pageResp.pages : [];
-          updateSummary();
-        } catch (err) {
-          sumPages.textContent = err.message || 'Failed to load session.';
-        }
-      }
-
-      downloadJson.addEventListener('click', () => {
-        const pack = {};
-        if (incPages.checked) pack.pages = pages;
-        if (incLayout.checked) pack.layout = session?.layout ?? null;
-        if (incPayload.checked) pack.payload = session;
-        if (incTimestamp.checked) pack.exportedAt = new Date().toISOString();
-
-        const filename = `repex_report_package_${new Date().toISOString().replace(/[:.]/g,'-')}.json`;
-        downloadBlob(filename, JSON.stringify(pack, null, 2));
-      });
-
-      loadData();
-    });
-  </script>
-</body>
-</html>

legacy/static-site/export.html

@@ -1,265 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>RepEx - Report Express | Export</title>
-
-  <link rel="stylesheet" href="style.css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-    @media print {
-      body { background: #fff !important; }
-      .no-print { display: none !important; }
-      main { box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
-    }
-  </style>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <main class="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8">
-    <!-- Header -->
-    <header class="mb-8 border-b border-gray-200 pb-4">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-4">
-        <div class="flex items-center">
-          <img
-src="assets/prosento-logo.png"
-            alt="Company logo"
-            class="h-12 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <div class="text-center">
-          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
-            RepEx - Report Express
-          </h1>
-          <p class="text-gray-600 whitespace-nowrap">Export</p>
-        </div>
-
-        <div class="flex justify-end gap-2 no-print">
-          <a
-            href="report-viewer.html"
-            class="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"
-          >
-            <i data-feather="arrow-left" class="h-4 w-4"></i>
-            Back
-          </a>
-        </div>
-      </div>
-    </header>
-
-    <!-- Workflow navigation -->
-    <nav class="mb-6 no-print" aria-label="Report workflow navigation">
-      <div class="flex flex-wrap gap-2">
-        <a
-          href="report-viewer.html"
-          class="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"
-        >
-          <i data-feather="layout" class="h-4 w-4"></i>
-          Report Viewer
-        </a>
-
-        <a
-          href="edit-layouts.html"
-          class="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"
-        >
-          <i data-feather="grid" class="h-4 w-4"></i>
-          Edit Page Layouts
-        </a>
-
-        <a
-          href="export.html"
-          class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white"
-        >
-          <i data-feather="download" class="h-4 w-4"></i>
-          Export
-        </a>
-      </div>
-    </nav>
-
-    <section class="grid grid-cols-1 lg:grid-cols-[1fr,360px] gap-6">
-      <!-- Export options -->
-      <div class="rounded-lg border border-gray-200 bg-white p-4">
-        <h2 class="text-lg font-semibold text-gray-900 mb-2">Export Options</h2>
-        <p class="text-sm text-gray-600 mb-4">
-          PDF export comes next. For now, you can export a report “package” as JSON (pages + layout settings + payload).
-        </p>
-
-        <div class="space-y-4">
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-            <div class="flex items-start justify-between gap-3">
-              <div>
-                <div class="text-sm font-semibold text-gray-900">Report package (.json)</div>
-                <div class="text-xs text-gray-500">Includes edited pages, layout settings and upload metadata</div>
-              </div>
-              <span class="text-xs font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-md px-2 py-1">
-                Available
-              </span>
-            </div>
-
-            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incPages" type="checkbox" class="rounded border-gray-300" checked />
-                Include pages
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incLayout" type="checkbox" class="rounded border-gray-300" checked />
-                Include layout settings
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incPayload" type="checkbox" class="rounded border-gray-300" checked />
-                Include upload payload
-              </label>
-              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
-                <input id="incTimestamp" type="checkbox" class="rounded border-gray-300" checked />
-                Include timestamp
-              </label>
-            </div>
-
-            <button id="downloadJson" type="button"
-              class="mt-4 inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-4 py-2.5 text-white font-semibold hover:bg-emerald-700 transition">
-              <i data-feather="download" class="h-4 w-4"></i>
-              Download JSON package
-            </button>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-            <div class="flex items-start justify-between gap-3">
-              <div>
-                <div class="text-sm font-semibold text-gray-900">PDF export</div>
-                <div class="text-xs text-gray-500">Will export as print-ready A4 PDF</div>
-              </div>
-              <span class="text-xs font-semibold text-gray-600 bg-white border border-gray-200 rounded-md px-2 py-1">
-                Coming soon
-              </span>
-            </div>
-
-            <button type="button" disabled
-              class="mt-4 inline-flex items-center justify-center gap-2 rounded-lg bg-gray-200 px-4 py-2.5 text-gray-500 font-semibold cursor-not-allowed">
-              <i data-feather="file-text" class="h-4 w-4"></i>
-              Export PDF (disabled)
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Summary -->
-      <aside class="rounded-lg border border-gray-200 bg-white p-4">
-        <h2 class="text-lg font-semibold text-gray-900 mb-2">Export Summary</h2>
-        <p class="text-sm text-gray-600 mb-4">This is what will be included based on your current session.</p>
-
-        <div class="space-y-3">
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Pages</div>
-            <div id="sumPages" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Selected example photos</div>
-            <div id="sumPhotos" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Documents</div>
-            <div id="sumDocs" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <div class="text-xs font-semibold text-gray-600">Data files</div>
-            <div id="sumData" class="text-sm font-semibold text-gray-900">—</div>
-          </div>
-
-          <div class="text-xs text-gray-500">
-            Stored in the active server session.
-          </div>
-        </div>
-      </aside>
-    </section>
-
-    <footer class="mt-12 text-center text-xs text-gray-500 no-print">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-1">Export: JSON package now; PDF export will be added next.</p>
-    </footer>
-  </main>
-
-  <script src="script.js"></script>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') feather.replace();
-
-      const sessionId = window.REPEX.getSessionId();
-      window.REPEX.setSessionId(sessionId);
-      const sumPages = document.getElementById('sumPages');
-      const sumPhotos = document.getElementById('sumPhotos');
-      const sumDocs = document.getElementById('sumDocs');
-      const sumData = document.getElementById('sumData');
-
-      const incPages = document.getElementById('incPages');
-      const incLayout = document.getElementById('incLayout');
-      const incPayload = document.getElementById('incPayload');
-      const incTimestamp = document.getElementById('incTimestamp');
-      const downloadJson = document.getElementById('downloadJson');
-
-      if (!sessionId) {
-        sumPages.textContent = 'No active session.';
-        sumPhotos.textContent = '-';
-        sumDocs.textContent = '-';
-        sumData.textContent = '-';
-        downloadJson.disabled = true;
-        return;
-      }
-
-      let session = null;
-      let pages = [];
-
-      function downloadBlob(filename, text) {
-        const blob = new Blob([text], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        URL.revokeObjectURL(url);
-      }
-
-      function updateSummary() {
-        const totalItems = pages.reduce((acc, p) => acc + ((p?.items?.length) || 0), 0);
-        sumPages.textContent = pages.length ? `${pages.length} pages ? ${totalItems} total items` : 'No saved pages yet';
-        sumPhotos.textContent = `${session?.selected_photo_ids?.length ?? 0}`;
-        sumDocs.textContent = `${session?.uploads?.documents?.length ?? 0}`;
-        sumData.textContent = `${session?.uploads?.data_files?.length ?? 0}`;
-      }
-
-      async function loadData() {
-        try {
-          session = await window.REPEX.request(`/sessions/${sessionId}`);
-          const pageResp = await window.REPEX.request(`/sessions/${sessionId}/pages`);
-          pages = Array.isArray(pageResp?.pages) ? pageResp.pages : [];
-          updateSummary();
-        } catch (err) {
-          sumPages.textContent = err.message || 'Failed to load session.';
-        }
-      }
-
-      downloadJson.addEventListener('click', () => {
-        const pack = {};
-        if (incPages.checked) pack.pages = pages;
-        if (incLayout.checked) pack.layout = session?.layout ?? null;
-        if (incPayload.checked) pack.payload = session;
-        if (incTimestamp.checked) pack.exportedAt = new Date().toISOString();
-
-        const filename = `repex_report_package_${new Date().toISOString().replace(/[:.]/g,'-')}.json`;
-        downloadBlob(filename, JSON.stringify(pack, null, 2));
-      });
-
-      loadData();
-    });
-  </script>
-</body>
-</html>

legacy/static-site/index.html

@@ -1,398 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>RepEx - Report Express</title>
-
-  <!-- Project styles (optional) -->
-  <link rel="stylesheet" href="style.css" />
-
-  <!-- Tailwind (CDN is fine for prototypes; for production, compile Tailwind) -->
-  <script src="https://cdn.tailwindcss.com"></script>
-
-  <!-- Feather Icons (include once) -->
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-  </style>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <!-- Page container (matches the previous site's “white card + subtle ring” style) -->
-  <main class="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8">
-    <!-- Top Header (logo + app name) -->
-    <header class="mb-10 border-b border-gray-200 pb-4">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-4">
-        <!-- Logo -->
-        <div class="flex items-center">
-          <img
-            src="assets/prosento-logo.png"
-            alt="Company logo"
-            class="h-12 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <!-- Title -->
-        <div class="text-center">
-          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
-            Prosento RepEx
-          </h1>
-          <p class="text-gray-600 whitespace-nowrap">
-            Upload photos and documents to generate professional job reports instantly
-          </p>
-        </div>
-
-        <!-- Right action -->
-        <div class="flex justify-end">
-          <a
-            href="#upload"
-            class="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"
-          >
-            <i data-feather="arrow-down-circle" class="h-4 w-4"></i>
-            Upload
-          </a>
-        </div>
-      </div>
-    </header>
-
-    <!-- Hero CTA -->
-    <section class="text-center mb-12">
-      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
-        Generate inspection-ready reports in minutes
-      </h2>
-      <p class="text-base md:text-lg text-gray-600 mb-8">
-        Drag-and-drop files, add quick context, and produce a clean, consistent report format every time.
-      </p>
-
-      <div class="flex flex-col sm:flex-row justify-center gap-3">
-        <a
-          href="#upload"
-          class="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-white font-semibold hover:bg-blue-700 transition"
-        >
-          <i data-feather="upload" class="h-5 w-5"></i>
-          Start Uploading
-        </a>
-
-        <a
-          href="#how-it-works"
-          class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-6 py-3 text-gray-800 font-semibold hover:bg-gray-50 transition"
-        >
-          <i data-feather="info" class="h-5 w-5"></i>
-          Learn More
-        </a>
-      </div>
-    </section>
-
-    <!-- How it works -->
-    <section id="how-it-works" class="mb-12">
-      <h2 class="text-xl md:text-2xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-6">
-        How It Works
-      </h2>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <article class="rounded-lg border border-gray-200 bg-gray-50 p-5">
-          <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 border border-blue-100">
-            <i data-feather="camera" class="h-5 w-5 text-blue-700"></i>
-          </div>
-          <h3 class="text-base font-semibold text-gray-900 mb-1">Capture site photos</h3>
-          <p class="text-sm text-gray-600">
-            Take clear photos of structural elements and issues during your inspection.
-          </p>
-        </article>
-
-        <article class="rounded-lg border border-gray-200 bg-gray-50 p-5">
-          <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50 border border-emerald-100">
-            <i data-feather="upload-cloud" class="h-5 w-5 text-emerald-700"></i>
-          </div>
-          <h3 class="text-base font-semibold text-gray-900 mb-1">Upload documents</h3>
-          <p class="text-sm text-gray-600">
-            Add notes, measurements, and supporting PDFs/DOCX to complete the context.
-          </p>
-        </article>
-
-        <article class="rounded-lg border border-gray-200 bg-gray-50 p-5">
-          <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 border border-blue-100">
-            <i data-feather="file-text" class="h-5 w-5 text-blue-700"></i>
-          </div>
-          <h3 class="text-base font-semibold text-gray-900 mb-1">Generate report</h3>
-          <p class="text-sm text-gray-600">
-            Produce a consistent, professional report that’s ready for submission.
-          </p>
-        </article>
-      </div>
-    </section>
-
-    <!-- Upload -->
-    <section id="upload" class="mb-12">
-      <h2 class="text-xl md:text-2xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-6">
-        Upload Your Files
-      </h2>
-
-      <div class="rounded-lg border border-gray-200 bg-white p-6">
-        <!-- Drop zone -->
-        <div
-          id="dropZone"
-          class="rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center hover:border-blue-400 transition mb-6"
-          role="button"
-          tabindex="0"
-          aria-label="Drag and drop files here"
-        >
-          <div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 border border-blue-100">
-            <i data-feather="upload" class="h-5 w-5 text-blue-700"></i>
-          </div>
-
-          <h3 class="text-base font-semibold text-gray-900">Drag &amp; drop files here</h3>
-          <p class="text-sm text-gray-600 mt-1 mb-4">or browse to upload</p>
-
-          <button
-            id="browseFiles"
-            type="button"
-            class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-white font-semibold hover:bg-blue-700 transition"
-          >
-            Browse Files
-          </button>
-
-          <input
-            id="uploadInput"
-            type="file"
-            class="hidden"
-            multiple
-            accept=".jpg,.jpeg,.png,.webp,.pdf,.doc,.docx,.csv,.xls,.xlsx"
-          />
-
-          <p id="fileList" class="text-xs text-gray-500 mt-4">
-            Supports JPG, PNG, PDF, DOCX, CSV, XLSX (Max 50MB each)
-          </p>
-        </div>
-
-        <!-- Metadata -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-          <div class="space-y-1">
-            <label for="projectName" class="block text-sm font-medium text-gray-700">Project Name</label>
-            <input
-              id="projectName"
-              name="projectName"
-              type="text"
-              placeholder="e.g., North Pit Conveyor Support"
-              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500"
-            />
-          </div>
-
-          <div class="space-y-1">
-            <label for="inspectionDate" class="block text-sm font-medium text-gray-700">Inspection Date</label>
-            <input
-              id="inspectionDate"
-              name="inspectionDate"
-              type="date"
-              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500"
-            />
-          </div>
-        </div>
-
-        <div class="space-y-1 mb-6">
-          <label for="notes" class="block text-sm font-medium text-gray-700">Additional Notes</label>
-          <textarea
-            id="notes"
-            name="notes"
-            rows="4"
-            placeholder="Add any context you'd like included in the report..."
-            class="w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500"
-          ></textarea>
-        </div>
-
-        <button
-          id="generateReport"
-          type="button"
-          class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-6 py-3 text-white font-semibold hover:bg-emerald-700 transition"
-        >
-          <i data-feather="file-plus" class="h-5 w-5"></i>
-          Generate Report
-        </button>
-        <p id="uploadStatus" class="text-sm text-gray-600 mt-3"></p>
-      </div>
-    </section>
-
-    <!-- Recent Reports -->
-    <section class="mb-6">
-      <h2 class="text-xl md:text-2xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-6">
-        Recent Reports
-      </h2>
-
-      <div class="rounded-lg border border-gray-200 bg-white overflow-hidden">
-        <div class="overflow-x-auto">
-          <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
-              <tr>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  Report ID
-                </th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  Project
-                </th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  Date
-                </th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  Status
-                </th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-
-            <tbody id="recentReports" class="bg-white divide-y divide-gray-200">
-              <tr>
-                <td colspan="5" class="px-6 py-6 text-sm text-gray-500 text-center">
-                  No recent reports yet.
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </section>
-
-    <!-- Footer -->
-    <footer class="mt-12 text-center text-xs text-gray-500">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-1">RepEx is a report automation interface. All uploads should comply with site data policies.</p>
-    </footer>
-  </main>
-
-  <!-- Your app script (optional) -->
-  <script src="script.js"></script>
-
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') {
-        window.feather.replace();
-      }
-
-      const dropZone = document.getElementById('dropZone');
-      const browseFiles = document.getElementById('browseFiles');
-      const uploadInput = document.getElementById('uploadInput');
-      const fileList = document.getElementById('fileList');
-      const generateReport = document.getElementById('generateReport');
-      const uploadStatus = document.getElementById('uploadStatus');
-
-      const projectName = document.getElementById('projectName');
-      const inspectionDate = document.getElementById('inspectionDate');
-      const notes = document.getElementById('notes');
-
-      let selectedFiles = [];
-
-      const updateFileList = () => {
-        if (!selectedFiles.length) {
-          fileList.textContent = 'Supports JPG, PNG, PDF, DOCX, CSV, XLSX (Max 50MB each)';
-          return;
-        }
-        const summary = selectedFiles
-          .map((file) => `${file.name} (${window.REPEX.formatBytes(file.size)})`)
-          .join(' • ');
-        fileList.textContent = summary;
-      };
-
-      browseFiles.addEventListener('click', () => uploadInput.click());
-      uploadInput.addEventListener('change', (event) => {
-        selectedFiles = Array.from(event.target.files || []);
-        updateFileList();
-      });
-
-      const setDragState = (active) => {
-        dropZone.classList.toggle('border-blue-500', active);
-        dropZone.classList.toggle('bg-blue-50', active);
-      };
-
-      ['dragenter', 'dragover'].forEach((evt) => {
-        dropZone.addEventListener(evt, (event) => {
-          event.preventDefault();
-          setDragState(true);
-        });
-      });
-      ['dragleave', 'drop'].forEach((evt) => {
-        dropZone.addEventListener(evt, (event) => {
-          event.preventDefault();
-          setDragState(false);
-        });
-      });
-      dropZone.addEventListener('drop', (event) => {
-        const files = Array.from(event.dataTransfer.files || []);
-        if (files.length) {
-          selectedFiles = files;
-          uploadInput.value = '';
-          updateFileList();
-        }
-      });
-
-      generateReport.addEventListener('click', async () => {
-        if (!selectedFiles.length) {
-          uploadStatus.textContent = 'Please add at least one file to continue.';
-          uploadStatus.classList.add('text-amber-700');
-          return;
-        }
-        generateReport.disabled = true;
-        uploadStatus.textContent = 'Uploading files...';
-        uploadStatus.classList.remove('text-amber-700');
-
-        const formData = new FormData();
-        formData.append('project_name', projectName.value.trim());
-        formData.append('inspection_date', inspectionDate.value);
-        formData.append('notes', notes.value.trim());
-        selectedFiles.forEach((file) => formData.append('files', file));
-
-        try {
-          const session = await window.REPEX.postForm('/sessions', formData);
-          window.REPEX.setSessionId(session.id);
-          window.location.href = `processing.html?session=${encodeURIComponent(session.id)}`;
-        } catch (err) {
-          uploadStatus.textContent = err.message || 'Upload failed.';
-          uploadStatus.classList.add('text-red-600');
-          generateReport.disabled = false;
-        }
-      });
-
-      async function loadRecentReports() {
-        const table = document.getElementById('recentReports');
-        if (!table) return;
-        try {
-          const sessions = await window.REPEX.request('/sessions');
-          if (!Array.isArray(sessions) || sessions.length === 0) {
-            return;
-          }
-          table.innerHTML = '';
-          sessions.slice(0, 5).forEach((session) => {
-            const row = document.createElement('tr');
-            row.innerHTML = `
-              <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">#${session.id.slice(0, 8)}</td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">${session.project_name || 'Untitled project'}</td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">${session.created_at ? new Date(session.created_at).toLocaleDateString() : '-'}</td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold bg-emerald-50 text-emerald-700 border-emerald-200">
-                  ${session.status || 'ready'}
-                </span>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm">
-                <a href="report-viewer.html?session=${session.id}" class="inline-flex items-center text-blue-700 hover:text-blue-800" aria-label="View report">
-                  <i data-feather="edit" class="h-4 w-4"></i>
-                </a>
-              </td>
-            `;
-            table.appendChild(row);
-          });
-          if (window.feather && typeof window.feather.replace === 'function') {
-            window.feather.replace();
-          }
-        } catch {
-          // ignore for now
-        }
-      }
-
-      loadRecentReports();
-    });
-  </script>
-</body>
-</html>

legacy/static-site/processing.html

@@ -1,80 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>Processing - RepEx</title>
-
-  <link rel="stylesheet" href="style.css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <main class="max-w-2xl mx-auto my-10 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8">
-    <header class="flex items-center gap-4 border-b border-gray-200 pb-4 mb-6">
-      <img
-        src="assets/prosento-logo.png"
-        alt="Prosento logo"
-        class="h-10 w-auto object-contain"
-        loading="eager"
-      />
-      <div>
-        <h1 class="text-xl font-semibold text-gray-900">Prosento RepEx</h1>
-        <p class="text-sm text-gray-600">Report processing</p>
-      </div>
-    </header>
-
-    <section class="text-center">
-      <div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 border border-blue-100">
-        <i data-feather="loader" class="h-5 w-5 text-blue-700"></i>
-      </div>
-      <h2 class="text-2xl font-semibold text-gray-900 mb-2">Generating your report</h2>
-      <p class="text-gray-600 mb-6">
-        We are preparing your files and building the final report. This may take a few minutes.
-      </p>
-
-      <div class="w-full rounded-full bg-gray-200 h-3 overflow-hidden">
-        <div class="h-full bg-blue-600 w-1/2 animate-pulse"></div>
-      </div>
-
-      <p class="text-xs text-gray-500 mt-4">
-        You can leave this tab open while we process your submission.
-      </p>
-    </section>
-  </main>
-
-  <script src="script.js"></script>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') {
-        window.feather.replace();
-      }
-
-      const sessionId = window.REPEX.getSessionId();
-      window.REPEX.setSessionId(sessionId);
-      if (!sessionId) {
-        const message = document.createElement('p');
-        message.className = 'text-sm text-red-600 mt-6 text-center';
-        message.textContent = 'No active session found. Return to the upload page.';
-        document.querySelector('main').appendChild(message);
-        return;
-      }
-
-      const poll = async () => {
-        try {
-          const status = await window.REPEX.request(`/sessions/${sessionId}/status`);
-          if (status?.status === 'ready') {
-            window.location.href = `review-setup.html?session=${encodeURIComponent(sessionId)}`;
-          }
-        } catch {
-          // keep polling on transient errors
-        }
-      };
-
-      poll();
-      setInterval(poll, 2000);
-    });
-  </script>
-</body>
-</html>

legacy/static-site/report-viewer.html

@@ -1,412 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>RepEx - Report Express | Report Viewer</title>
-
-  <link rel="stylesheet" href="style.css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="components/report-editor.js"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    @page { size: A4; margin: 0; }
-
-    /* A4 canvas container */
-    .a4-page {
-      aspect-ratio: 210 / 297;
-      width: min(100%, 560px);
-      border-radius: 12px;
-    }
-
-    /* Viewer uses white page unless empty */
-    .page-white {
-      background: #ffffff;
-      border: 1px solid #e5e7eb; /* gray-200 */
-    }
-
-    /* If a page has no items, show placeholder red */
-    .page-empty {
-      background: #fee2e2;       /* red-200-ish */
-      border: 1px solid #fca5a5; /* red-300-ish */
-    }
-
-    @media print {
-      body { background: #fff !important; }
-      .print-a4 {
-        width: 210mm !important;
-        height: 297mm !important;
-        aspect-ratio: auto !important;
-        border-radius: 0 !important;
-        box-shadow: none !important;
-      }
-      .no-print { display: none !important; }
-      main { box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
-    }
-
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-  </style>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <main class="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8 print:ring-0 print:shadow-none print:rounded-none">
-    <!-- Header -->
-    <header class="mb-8 border-b border-gray-200 pb-4">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-4">
-        <div class="flex items-center">
-          <img
-src="assets/prosento-logo.png"
-            alt="Company logo"
-            class="h-12 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <div class="text-center">
-          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
-            RepEx - Report Express
-          </h1>
-          <p class="text-gray-600 whitespace-nowrap">Report Viewer</p>
-        </div>
-
-        <div class="flex justify-end gap-2 no-print">
-          <a
-            href="review-setup.html"
-            class="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"
-          >
-            <i data-feather="arrow-left" class="h-4 w-4"></i>
-            Back
-          </a>
-        </div>
-      </div>
-    </header>
-
-    <!-- Workflow buttons -->
-    <nav class="mb-6 no-print" aria-label="Report workflow navigation">
-      <div class="flex flex-wrap gap-2">
-        <span
-          class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white"
-        >
-          <i data-feather="layout" class="h-4 w-4"></i>
-          Report Viewer
-        </span>
-
-        <button
-          type="button"
-          id="edit-report"
-          class="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"
-        >
-          <i data-feather="edit-3" class="h-4 w-4"></i>
-          Edit Report
-        </button>
-
-        <a
-          href="edit-layouts.html"
-          class="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"
-        >
-          <i data-feather="grid" class="h-4 w-4"></i>
-          Edit Page Layouts
-        </a>
-
-        <a
-          href="export.html"
-          class="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"
-        >
-          <i data-feather="download" class="h-4 w-4"></i>
-          Export
-        </a>
-      </div>
-    </nav>
-
-    <!-- Viewer -->
-    <section id="viewerSection" aria-label="Report viewer">
-      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
-        <div>
-          <h2 class="text-xl font-semibold text-gray-800">Report Pages</h2>
-          <p id="viewerMeta" class="text-sm text-gray-600">Loading…</p>
-        </div>
-
-        <div class="flex items-center gap-2 no-print">
-          <button
-            id="prevPage"
-            type="button"
-            class="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"
-          >
-            <i data-feather="chevron-left" class="h-4 w-4"></i>
-            Prev
-          </button>
-
-          <div class="text-sm font-semibold text-gray-700">
-            Page <span id="pageNumber">1</span> / <span id="pageTotal">1</span>
-          </div>
-
-          <button
-            id="nextPage"
-            type="button"
-            class="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"
-          >
-            Next
-            <i data-feather="chevron-right" class="h-4 w-4"></i>
-          </button>
-        </div>
-      </div>
-
-      <!-- Page stage -->
-      <div class="flex justify-center">
-        <div
-          id="pageStage"
-          class="a4-page print-a4 relative overflow-hidden shadow-sm page-empty"
-          aria-label="Rendered A4 page"
-        ></div>
-      </div>
-
-      <p class="mt-4 text-xs text-gray-500 no-print">
-        Tip: Use keyboard arrows (← / →) to change pages.
-      </p>
-    </section>
-
-    <!-- Footer -->
-    <footer class="mt-12 text-center text-xs text-gray-500 no-print">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-1">Viewer now renders saved edits from the editor.</p>
-    </footer>
-  </main>
-
-  <script src="script.js"></script>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') {
-        window.feather.replace();
-      }
-
-      const sessionId = window.REPEX.getSessionId();
-      window.REPEX.setSessionId(sessionId);
-      if (!sessionId) {
-        const meta = document.getElementById('viewerMeta');
-        if (meta) meta.textContent = 'No active session found. Return to upload to continue.';
-        return;
-      }
-
-      const editor = document.createElement('report-editor');
-      document.body.appendChild(editor);
-      editor.style.display = 'none';
-
-      const viewerSection = document.getElementById('viewerSection');
-      const pageStage = document.getElementById('pageStage');
-      const viewerMeta = document.getElementById('viewerMeta');
-
-      const prevPageBtn = document.getElementById('prevPage');
-      const nextPageBtn = document.getElementById('nextPage');
-      const pageNumber = document.getElementById('pageNumber');
-      const pageTotal = document.getElementById('pageTotal');
-      const editBtn = document.getElementById('edit-report');
-
-      const BASE_W = 595;
-      const BASE_H = 842;
-
-      const state = {
-        pageIndex: 0,
-        totalPages: 6,
-        editMode: false,
-        pages: [],
-        session: null,
-      };
-
-      function setMeta() {
-        const selected = state.session?.selected_photo_ids?.length ?? 0;
-        const docs = state.session?.uploads?.documents?.length ?? 0;
-        const dataFiles = state.session?.uploads?.data_files?.length ?? 0;
-        const hasEdits = state.pages.length > 0;
-        viewerMeta.textContent =
-          `Selected example photos: ${selected} ? Documents: ${docs} ? Data files: ${dataFiles}` +
-          (hasEdits ? ' ? Edited pages loaded' : ' ? No saved edits yet');
-      }
-
-      function renderControls() {
-        pageTotal.textContent = String(state.totalPages || 1);
-        pageNumber.textContent = String(state.pageIndex + 1);
-        prevPageBtn.disabled = state.pageIndex === 0;
-        nextPageBtn.disabled = state.pageIndex >= state.totalPages - 1;
-      }
-
-      function stageScale() {
-        const rect = pageStage.getBoundingClientRect();
-        return rect.width / BASE_W;
-      }
-
-      function clearStage() {
-        pageStage.innerHTML = '';
-      }
-
-      function renderStageFromPage(pageObj) {
-        clearStage();
-
-        const items = pageObj?.items ?? [];
-        const hasItems = items.length > 0;
-
-        pageStage.classList.toggle('page-empty', !hasItems);
-        pageStage.classList.toggle('page-white', hasItems);
-
-        if (!hasItems) return;
-
-        const scale = stageScale();
-
-        items
-          .slice()
-          .sort((a, b) => (a.z ?? 0) - (b.z ?? 0))
-          .forEach(item => {
-            const wrap = document.createElement('div');
-            wrap.className = 'absolute';
-            wrap.style.left = `${item.x * scale}px`;
-            wrap.style.top = `${item.y * scale}px`;
-            wrap.style.width = `${item.w * scale}px`;
-            wrap.style.height = `${item.h * scale}px`;
-            wrap.style.zIndex = String(item.z ?? 0);
-
-            if (item.type === 'text') {
-              const d = document.createElement('div');
-              d.className = 'w-full h-full p-2 overflow-hidden';
-              d.style.whiteSpace = 'pre-wrap';
-              d.style.outline = 'none';
-
-              const fontSize = (item.style?.fontSize ?? 14) * scale;
-              d.style.fontSize = `${fontSize}px`;
-              d.style.fontWeight = item.style?.bold ? '700' : '400';
-              d.style.fontStyle = item.style?.italic ? 'italic' : 'normal';
-              d.style.textDecoration = item.style?.underline ? 'underline' : 'none';
-              d.style.color = item.style?.color ?? '#111827';
-              d.style.textAlign = item.style?.align ?? 'left';
-              d.textContent = item.content ?? '';
-
-              wrap.appendChild(d);
-            }
-
-            if (item.type === 'image') {
-              const img = document.createElement('img');
-              img.className = 'w-full h-full object-contain bg-white';
-              img.src = item.src;
-              img.alt = item.name ?? 'Image';
-              img.loading = 'eager';
-              wrap.appendChild(img);
-            }
-
-            if (item.type === 'rect') {
-              const box = document.createElement('div');
-              box.className = 'w-full h-full';
-              box.style.background = item.style?.fill ?? '#ffffff';
-              box.style.borderStyle = 'solid';
-              box.style.borderColor = item.style?.stroke ?? '#111827';
-              box.style.borderWidth = `${(item.style?.strokeWidth ?? 1) * scale}px`;
-              wrap.appendChild(box);
-            }
-
-            pageStage.appendChild(wrap);
-          });
-      }
-
-      async function fetchSession() {
-        const session = await window.REPEX.request(`/sessions/${sessionId}`);
-        state.session = session;
-        state.totalPages = session.page_count || state.totalPages;
-      }
-
-      async function fetchPages() {
-        try {
-          const result = await window.REPEX.request(`/sessions/${sessionId}/pages`);
-          state.pages = Array.isArray(result?.pages) ? result.pages : [];
-          if (state.pages.length) {
-            state.totalPages = Math.max(state.totalPages, state.pages.length);
-          }
-        } catch {
-          state.pages = [];
-        }
-      }
-
-      function renderPage() {
-        renderControls();
-        const pageObj = state.pages?.[state.pageIndex] ?? null;
-        renderStageFromPage(pageObj);
-        setMeta();
-      }
-
-      function nextPage() {
-        if (state.pageIndex < state.totalPages - 1) {
-          state.pageIndex += 1;
-          renderPage();
-        }
-      }
-
-      function prevPage() {
-        if (state.pageIndex > 0) {
-          state.pageIndex -= 1;
-          renderPage();
-        }
-      }
-
-      function openEditor() {
-        state.editMode = true;
-        editor.style.display = 'block';
-        viewerSection.classList.add('hidden');
-
-        editor.open({
-          payload: state.session,
-          pageIndex: state.pageIndex,
-          totalPages: state.totalPages,
-          sessionId,
-        });
-
-        editBtn.classList.add('bg-gray-900', 'text-white', 'border-gray-900');
-        editBtn.classList.remove('bg-white', 'text-gray-800', 'border-gray-200');
-
-        if (window.feather && typeof window.feather.replace === 'function') {
-          window.feather.replace();
-        }
-      }
-
-      async function closeEditor() {
-        state.editMode = false;
-        editor.style.display = 'none';
-        viewerSection.classList.remove('hidden');
-
-        editBtn.classList.remove('bg-gray-900', 'text-white', 'border-gray-900');
-        editBtn.classList.add('bg-white', 'text-gray-800', 'border-gray-200');
-
-        await fetchPages();
-        renderPage();
-      }
-
-      prevPageBtn.addEventListener('click', prevPage);
-      nextPageBtn.addEventListener('click', nextPage);
-
-      editBtn.addEventListener('click', () => {
-        if (!state.editMode) openEditor();
-      });
-
-      editor.addEventListener('editor-closed', () => {
-        closeEditor();
-      });
-
-      window.addEventListener('keydown', (e) => {
-        if (state.editMode) return;
-        if (e.key === 'ArrowRight') nextPage();
-        if (e.key === 'ArrowLeft') prevPage();
-      });
-
-      window.addEventListener('resize', () => {
-        if (!state.editMode) renderPage();
-      });
-
-      window.addEventListener('beforeprint', () => {
-        document.querySelectorAll('img').forEach(img => (img.loading = 'eager'));
-      });
-
-      (async () => {
-        await fetchSession();
-        await fetchPages();
-        renderPage();
-      })();
-    });
-  </script>
-</body>
-</html>

legacy/static-site/review-setup.html

@@ -1,376 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>RepEx - Report Express | Review & Setup</title>
-
-  <link rel="stylesheet" href="style.css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-  </style>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <main class="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8">
-    <!-- Header -->
-    <header class="mb-8 border-b border-gray-200 pb-4">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-4">
-        <div class="flex items-center">
-          <img
-src="assets/prosento-logo.png"
-            alt="Company logo"
-            class="h-12 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <div class="text-center">
-          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
-            RepEx - Report Express
-          </h1>
-          <p class="text-gray-600 whitespace-nowrap">
-            Review uploads → pick examples → continue to report viewer
-          </p>
-        </div>
-
-        <div class="flex justify-end">
-          <span class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-xs font-semibold text-gray-700">
-            <i data-feather="check-circle" class="h-4 w-4"></i>
-            Uploads processed
-          </span>
-        </div>
-      </div>
-    </header>
-
-    <!-- Orientation -->
-    <section class="mb-8" aria-labelledby="what-next">
-      <h2 id="what-next" class="text-xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-4">
-        What happens on this page
-      </h2>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-          <div class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 border border-blue-100 mb-3">
-            <i data-feather="image" class="h-5 w-5 text-blue-700"></i>
-          </div>
-          <h3 class="font-semibold text-gray-900 mb-1">Select example photos</h3>
-          <p class="text-sm text-gray-600">
-            Choose which uploaded images should appear as example figures in the report.
-          </p>
-        </div>
-
-        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-          <div class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50 border border-emerald-100 mb-3">
-            <i data-feather="file-text" class="h-5 w-5 text-emerald-700"></i>
-          </div>
-          <h3 class="font-semibold text-gray-900 mb-1">Confirm documents</h3>
-          <p class="text-sm text-gray-600">
-            Ensure supporting PDFs/DOCX are correct (and later attach to export if needed).
-          </p>
-        </div>
-
-        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-          <div class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-amber-50 border border-amber-100 mb-3">
-            <i data-feather="table" class="h-5 w-5 text-amber-700"></i>
-          </div>
-          <h3 class="font-semibold text-gray-900 mb-1">Use Excel/CSV data</h3>
-          <p class="text-sm text-gray-600">
-            If Excel/CSV exists, it will populate report data areas automatically in later steps.
-          </p>
-        </div>
-      </div>
-    </section>
-
-    <!-- Review uploads -->
-    <section class="mb-8" aria-labelledby="review-uploads">
-      <h2 id="review-uploads" class="text-xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-6">
-        Review uploaded files
-      </h2>
-
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <!-- Photos -->
-        <div class="lg:col-span-2">
-          <div class="flex items-center justify-between mb-3">
-            <h3 class="text-lg font-semibold text-gray-900">Photos</h3>
-            <span id="photoCount" class="text-sm font-semibold text-gray-600">0 files</span>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-white p-4">
-            <p class="text-sm text-gray-600 mb-3">
-              Select images to use as example figures in the report.
-              <span class="font-semibold text-gray-800">Recommended:</span> 2–6 images.
-            </p>
-
-            <div id="photoGrid" class="grid grid-cols-2 md:grid-cols-3 gap-3">
-              <!-- populated by JS -->
-            </div>
-
-            <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
-              <div class="text-sm text-gray-600">
-                Selected for report: <span id="photoSelected" class="font-semibold text-gray-900">0</span>
-              </div>
-              <div class="flex gap-2">
-                <button id="selectAllPhotos" type="button"
-                  class="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">
-                  <i data-feather="check-square" class="h-4 w-4"></i>
-                  Select all
-                </button>
-                <button id="clearPhotos" type="button"
-                  class="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">
-                  <i data-feather="square" class="h-4 w-4"></i>
-                  Clear
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Documents + Data files -->
-        <div class="space-y-6">
-          <!-- Documents -->
-          <div>
-            <div class="flex items-center justify-between mb-3">
-              <h3 class="text-lg font-semibold text-gray-900">Documents</h3>
-              <span id="docCount" class="text-sm font-semibold text-gray-600">0 files</span>
-            </div>
-
-            <div class="rounded-lg border border-gray-200 bg-white p-4">
-              <ul id="docList" class="space-y-2 text-sm text-gray-700">
-                <!-- populated by JS -->
-              </ul>
-              <p id="docHint" class="text-xs text-gray-500 mt-3">
-                PDFs/DOCX appear here after processing.
-              </p>
-            </div>
-          </div>
-
-          <!-- Data files -->
-          <div>
-            <div class="flex items-center justify-between mb-3">
-              <h3 class="text-lg font-semibold text-gray-900">Data files</h3>
-              <span id="dataCount" class="text-sm font-semibold text-gray-600">0 files</span>
-            </div>
-
-            <div class="rounded-lg border border-gray-200 bg-white p-4">
-              <div id="dataBox" class="text-sm text-gray-700">
-                <!-- populated by JS -->
-              </div>
-              <p class="text-xs text-gray-500 mt-3">
-                If present, these files will populate report tables/fields automatically.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Continue -->
-    <section class="mb-4" aria-label="Continue to report viewer">
-      <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between">
-        <div class="text-sm text-gray-600">
-          Next step:
-          <span id="readyStatus" class="font-semibold text-amber-700">Choose report example images to continue…</span>
-        </div>
-
-        <button
-          id="continueBtn"
-          type="button"
-          class="inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-5 py-2.5 text-white font-semibold hover:bg-emerald-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
-          disabled
-        >
-          <i data-feather="arrow-right" class="h-5 w-5"></i>
-          Continue to Report Viewer
-        </button>
-      </div>
-
-      <p class="text-xs text-gray-500 mt-3">
-        Note: This page assumes uploads were completed on a previous “Processing” page.
-      </p>
-    </section>
-
-    <!-- Footer -->
-    <footer class="mt-12 text-center text-xs text-gray-500">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-1">Workflow: Processing → Review uploads → Report viewer → Edit → Export</p>
-    </footer>
-  </main>
-
-  <script src="script.js"></script>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') {
-        window.feather.replace();
-      }
-
-      const photoGrid = document.getElementById('photoGrid');
-      const photoCount = document.getElementById('photoCount');
-      const photoSelected = document.getElementById('photoSelected');
-      const selectAllPhotosBtn = document.getElementById('selectAllPhotos');
-      const clearPhotosBtn = document.getElementById('clearPhotos');
-
-      const docList = document.getElementById('docList');
-      const docCount = document.getElementById('docCount');
-      const docHint = document.getElementById('docHint');
-
-      const dataBox = document.getElementById('dataBox');
-      const dataCount = document.getElementById('dataCount');
-
-      const readyStatus = document.getElementById('readyStatus');
-      const continueBtn = document.getElementById('continueBtn');
-
-      const sessionId = window.REPEX.getSessionId();
-      window.REPEX.setSessionId(sessionId);
-      if (!sessionId) {
-        readyStatus.textContent = 'No active session found. Return to upload to continue.';
-        readyStatus.className = 'font-semibold text-red-600';
-        continueBtn.disabled = true;
-        return;
-      }
-
-      const state = {
-        selectedPhotoIds: new Set(),
-      };
-
-      function updateSelectionState() {
-        photoSelected.textContent = String(state.selectedPhotoIds.size);
-        const canContinue = state.selectedPhotoIds.size > 0;
-        continueBtn.disabled = !canContinue;
-
-        if (!canContinue) {
-          readyStatus.textContent = 'Choose report example images to continue...';
-          readyStatus.className = 'font-semibold text-amber-700';
-        } else {
-          readyStatus.textContent = 'Ready. Continue to report viewer.';
-          readyStatus.className = 'font-semibold text-emerald-700';
-        }
-      }
-
-      function renderUploads(uploads, selectedIds) {
-        const photos = uploads.photos || [];
-        photoCount.textContent = `${photos.length} file${photos.length === 1 ? '' : 's'}`;
-
-        photoGrid.innerHTML = photos.length
-          ? photos.map((p) => {
-              const checked = selectedIds.includes(p.id) ? 'checked' : '';
-              if (checked) state.selectedPhotoIds.add(p.id);
-              return `
-                <label class="group cursor-pointer">
-                  <input type="checkbox" class="sr-only photoCheck" data-photo-id="${p.id}" ${checked}>
-                  <div class="rounded-lg border border-gray-200 bg-gray-50 overflow-hidden group-has-[:checked]:ring-2 group-has-[:checked]:ring-emerald-200 group-has-[:checked]:border-emerald-300 transition">
-                    <div class="relative">
-                      <img src="${p.url}" alt="${p.name}" class="h-28 w-full object-cover" loading="eager">
-                      <div class="absolute top-2 right-2 inline-flex items-center justify-center rounded-full bg-white/90 border border-gray-200 p-1.5 text-gray-700 group-has-[:checked]:bg-emerald-50 group-has-[:checked]:border-emerald-200 group-has-[:checked]:text-emerald-700">
-                        <i data-feather="check" class="h-4 w-4"></i>
-                      </div>
-                    </div>
-                    <div class="p-2">
-                      <div class="text-xs font-semibold text-gray-900 truncate">${p.name}</div>
-                      <div class="text-xs text-gray-500">Click to select for report</div>
-                    </div>
-                  </div>
-                </label>
-              `;
-            }).join('')
-          : `<div class="col-span-full text-sm text-gray-500">No photos were uploaded.</div>`;
-
-        const docs = uploads.documents || [];
-        docCount.textContent = `${docs.length} file${docs.length === 1 ? '' : 's'}`;
-        docList.innerHTML = docs.length
-          ? docs.map(d => `
-              <li class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
-                <div class="flex items-center gap-2 min-w-0">
-                  <i data-feather="file-text" class="h-4 w-4 text-gray-600"></i>
-                  <span class="truncate text-gray-800">${d.name}</span>
-                </div>
-                <span class="text-xs font-semibold text-gray-600">${d.content_type || 'File'}</span>
-              </li>
-            `).join('')
-          : `<li class="text-sm text-gray-500">No supporting documents detected.</li>`;
-        docHint.style.display = docs.length ? 'none' : 'block';
-
-        const dataFiles = uploads.data_files || [];
-        dataCount.textContent = `${dataFiles.length} file${dataFiles.length === 1 ? '' : 's'}`;
-        dataBox.innerHTML = dataFiles.length
-          ? dataFiles.map(f => `
-              <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 text-sm text-gray-700 mb-2 last:mb-0">
-                <div class="flex items-center justify-between gap-3">
-                  <div class="flex items-center gap-2 min-w-0">
-                    <i data-feather="table" class="h-4 w-4 text-amber-700"></i>
-                    <span class="truncate font-semibold text-gray-900">${f.name}</span>
-                  </div>
-                  <span class="text-xs font-semibold text-gray-600">${f.content_type || 'Data'}</span>
-                </div>
-                <div class="text-xs text-gray-600 mt-1">
-                  Will populate report data areas (tables/fields).
-                </div>
-              </div>
-            `).join('')
-          : `
-            <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 text-sm text-gray-600">
-              <div class="font-semibold text-gray-800 mb-1">No Excel/CSV detected</div>
-              If you upload a CSV or Excel file, RepEx can auto-populate report data fields.
-            </div>
-          `;
-
-        if (window.feather && typeof window.feather.replace === 'function') {
-          window.feather.replace();
-        }
-      }
-
-      async function loadSession() {
-        try {
-          const session = await window.REPEX.request(`/sessions/${sessionId}`);
-          renderUploads(session.uploads || {}, session.selected_photo_ids || []);
-          updateSelectionState();
-        } catch (err) {
-          readyStatus.textContent = err.message || 'Failed to load session.';
-          readyStatus.className = 'font-semibold text-red-600';
-        }
-      }
-
-      photoGrid.addEventListener('change', (e) => {
-        const cb = e.target.closest('.photoCheck');
-        if (!cb) return;
-        const id = cb.dataset.photoId;
-        if (cb.checked) state.selectedPhotoIds.add(id);
-        else state.selectedPhotoIds.delete(id);
-        updateSelectionState();
-      });
-
-      selectAllPhotosBtn.addEventListener('click', () => {
-        photoGrid.querySelectorAll('.photoCheck').forEach(cb => {
-          cb.checked = true;
-          state.selectedPhotoIds.add(cb.dataset.photoId);
-        });
-        updateSelectionState();
-      });
-
-      clearPhotosBtn.addEventListener('click', () => {
-        photoGrid.querySelectorAll('.photoCheck').forEach(cb => (cb.checked = false));
-        state.selectedPhotoIds.clear();
-        updateSelectionState();
-      });
-
-      continueBtn.addEventListener('click', async () => {
-        if (state.selectedPhotoIds.size === 0) return;
-        const selectedIds = Array.from(state.selectedPhotoIds);
-        try {
-          await window.REPEX.putJson(`/sessions/${sessionId}/selection`, {
-            selected_photo_ids: selectedIds,
-          });
-          window.location.href = `report-viewer.html?session=${encodeURIComponent(sessionId)}`;
-        } catch (err) {
-          readyStatus.textContent = err.message || 'Failed to save selection.';
-          readyStatus.className = 'font-semibold text-red-600';
-        }
-      });
-
-      loadSession();
-    });
-  </script>
-</body>
-</html>

legacy/static-site/script.js

@@ -1,107 +0,0 @@
-"use strict";
-
-(function () {
-  const SESSION_KEY = "repex_session_id";
-  const apiBase =
-    window.REPEX_API_BASE ||
-    new URL("/api", window.location.origin).toString().replace(/\/$/, "");
-
-  function getSessionId() {
-    const params = new URLSearchParams(window.location.search);
-    return params.get("session") || localStorage.getItem(SESSION_KEY) || "";
-  }
-
-  function setSessionId(id) {
-    if (!id) return;
-    localStorage.setItem(SESSION_KEY, id);
-  }
-
-  function clearSessionId() {
-    localStorage.removeItem(SESSION_KEY);
-  }
-
-  function formatBytes(bytes) {
-    if (!Number.isFinite(bytes)) return "0 B";
-    const units = ["B", "KB", "MB", "GB"];
-    let value = bytes;
-    let idx = 0;
-    while (value >= 1024 && idx < units.length - 1) {
-      value /= 1024;
-      idx += 1;
-    }
-    return `${value.toFixed(value >= 10 || idx === 0 ? 0 : 1)} ${units[idx]}`;
-  }
-
-  async function request(path, options = {}) {
-    const url = `${apiBase}${path}`;
-    const res = await fetch(url, {
-      credentials: "same-origin",
-      ...options,
-    });
-    if (!res.ok) {
-      let detail = res.statusText;
-      try {
-        const data = await res.json();
-        detail = data?.detail || detail;
-      } catch {}
-      throw new Error(detail);
-    }
-    if (res.status === 204) return null;
-    const contentType = res.headers.get("content-type") || "";
-    if (contentType.includes("application/json")) {
-      return res.json();
-    }
-    return res.text();
-  }
-
-  async function postForm(path, formData) {
-    return request(path, { method: "POST", body: formData });
-  }
-
-  async function postJson(path, body) {
-    return request(path, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
-    });
-  }
-
-  async function putJson(path, body) {
-    return request(path, {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
-    });
-  }
-
-  function applySessionToLinks() {
-    const sessionId = getSessionId();
-    if (!sessionId) return;
-    document.querySelectorAll('a[href$=".html"]').forEach((link) => {
-      const href = link.getAttribute("href");
-      if (!href || href.startsWith("http")) return;
-      const url = new URL(href, window.location.origin);
-      if (!url.searchParams.get("session")) {
-        url.searchParams.set("session", sessionId);
-        link.setAttribute("href", `${url.pathname}${url.search}`);
-      }
-    });
-  }
-
-  window.REPEX = {
-    apiBase,
-    getSessionId,
-    setSessionId,
-    clearSessionId,
-    request,
-    postForm,
-    postJson,
-    putJson,
-    formatBytes,
-    applySessionToLinks,
-  };
-
-  document.addEventListener("DOMContentLoaded", () => {
-    applySessionToLinks();
-  });
-})();

legacy/static-site/style.css

@@ -1 +0,0 @@
-/* Global overrides for RepEx pages. */

legacy/static-site/templates/job-sheet-template.html

@@ -1,286 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>SIMM Inspection Job Sheet</title>
-
-  <!-- Optional project stylesheet -->
-  <link rel="stylesheet" href="../style.css" />
-
-  <!-- Tailwind (CDN OK for prototypes; compile for production) -->
-  <script src="https://cdn.tailwindcss.com"></script>
-
-  <!-- Feather icons -->
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    @page { size: A4; margin: 10mm; }
-
-    @media print {
-      html, body { background: #fff !important; }
-      .no-print { display: none !important; }
-      main { box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
-    }
-
-    .avoid-break { break-inside: avoid; page-break-inside: avoid; }
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-  </style>
-</head>
-
-<body class="bg-gray-50 print:bg-white">
-  <!-- A4-focused container -->
-  <main class="mx-auto max-w-[210mm] bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-5 print:ring-0 print:shadow-none print:rounded-none">
-    <!-- Header -->
-    <header class="mb-4 border-b border-gray-200 pb-3">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-3">
-        <div class="flex items-center">
-          <img
-            src="../assets/prosento-logo.png"
-            alt="Prosento logo"
-            class="h-10 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <div class="text-center leading-tight">
-          <h1 class="text-2xl font-bold text-gray-900 whitespace-nowrap">SIMM Inspection Job Sheet</h1>
-          <p class="text-sm text-gray-600 whitespace-nowrap">Structural Inspection and Maintenance Management</p>
-        </div>
-
-        <div class="flex items-center justify-end">
-          <img
-            src="../assets/client-logo.png"
-            alt="Client logo placeholder"
-            class="h-10 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-      </div>
-    </header>
-
-    <!-- Inspection Details -->
-    <section class="mb-4" aria-labelledby="inspection-details-title">
-      <h2 id="inspection-details-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
-        Inspection Details
-      </h2>
-
-      <dl class="grid grid-cols-2 md:grid-cols-4 gap-2 bg-gray-50 border border-gray-200 rounded-lg p-3">
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Inspection Date</dt>
-          <dd class="text-sm font-semibold text-gray-900">2023-11-15</dd>
-        </div>
-
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Inspector</dt>
-          <dd class="text-sm font-semibold text-gray-900">John Doe</dd>
-        </div>
-
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Accompanied By</dt>
-          <dd class="text-sm font-semibold text-gray-900">John Doe</dd>
-        </div>
-
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Document No</dt>
-          <dd class="text-sm font-mono font-semibold text-gray-900">SIMM-JS-2023-001</dd>
-        </div>
-
-        <div class="space-y-0.5 md:col-span-2">
-          <dt class="text-xs font-medium text-gray-500">Project</dt>
-          <dd class="text-sm font-semibold text-gray-900">North Pit – Sector 4 Conveyor Upgrade</dd>
-        </div>
-
-        <div class="space-y-0.5 md:col-span-2">
-          <dt class="text-xs font-medium text-gray-500">Client / Site</dt>
-          <dd class="text-sm font-semibold text-gray-900">Tronox</dd>
-        </div>
-      </dl>
-    </section>
-
-    <!-- Observations and Findings -->
-    <section class="mb-4" aria-labelledby="observations-title">
-      <h2 id="observations-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
-        Observations and Findings
-      </h2>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-        <!-- Left column -->
-        <div class="space-y-2">
-          <div class="grid grid-cols-2 gap-2">
-            <div class="space-y-0.5">
-              <div class="text-xs font-medium text-gray-500">Reference</div>
-              <div class="text-sm font-semibold text-gray-900">REF-7821</div>
-            </div>
-
-            <div class="space-y-0.5">
-              <div class="text-xs font-medium text-gray-500">Action Type</div>
-              <div class="text-sm font-semibold text-gray-900">Structural Repair</div>
-            </div>
-
-            <div class="space-y-0.5 col-span-2">
-              <div class="text-xs font-medium text-gray-500">Item Description</div>
-              <div class="text-sm font-semibold text-gray-900">Main support beam for conveyor CV-04</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Right column -->
-        <div class="space-y-2">
-          <div class="space-y-0.5">
-            <div class="text-xs font-medium text-gray-500">Functional Location</div>
-            <div class="text-sm font-semibold text-gray-900">Conveyor Support - CV-04-SUP-02</div>
-          </div>
-        </div>
-
-        <!-- Centered Category + Priority (must be direct child of the grid) -->
-        <div class="md:col-span-2 flex justify-center">
-          <div class="inline-flex items-center gap-10">
-            <div class="text-center space-y-1">
-              <div class="text-xs font-medium text-gray-500">Category</div>
-              <span
-                id="condition-rating"
-                class="badge inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold"
-                aria-label="Category rating"
-              >
-                <!-- populated by JS -->
-              </span>
-            </div>
-
-            <div class="text-center space-y-1">
-              <div class="text-xs font-medium text-gray-500">Priority</div>
-              <span
-                id="priority-rating"
-                class="badge inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold"
-                aria-label="Priority rating"
-              >
-                <!-- populated by JS -->
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Full-width: Condition Description -->
-        <div class="md:col-span-2 space-y-1">
-          <div class="text-xs font-medium text-gray-500">Condition Description</div>
-          <div class="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
-            <p class="text-amber-800 text-sm font-semibold leading-snug">
-              Visible corrosion on lower flange with ~15% material loss. Surface pitting along entire length.
-            </p>
-          </div>
-        </div>
-
-        <!-- Full-width: Required Action -->
-        <div class="md:col-span-2 space-y-1">
-          <div class="text-xs font-medium text-gray-500">Required Action</div>
-          <div class="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
-            <p class="text-blue-800 text-sm font-semibold leading-snug">
-              Clean exposed rebar; apply corrosion protection; use wet-to-dry epoxy; reinstate with concrete repair.
-              Complete within next 12 months to limit further degradation.
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Photo Documentation -->
-    <section class="mb-4 avoid-break" aria-labelledby="photo-doc-title">
-      <h2 id="photo-doc-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
-        Photo Documentation
-      </h2>
-
-      <div class="grid grid-cols-2 gap-3">
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
-          <img
-            src="https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Screenshot%202026-02-02%20100102.png"
-            alt="Photo 1"
-            class="w-full h-40 object-contain mx-auto"
-            loading="eager"
-          />
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Fig 1: Ref 1.1 – Concrete spalling (example)
-          </figcaption>
-        </figure>
-
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 relative">
-          <img
-            src="https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Picture2.png"
-            alt="Photo 2"
-            class="w-full h-40 object-contain mx-auto"
-            loading="eager"
-          />
-          <div class="absolute top-2 left-2 bg-white/95 text-black text-[11px] font-bold px-2 py-1 rounded border border-gray-300">
-            #1.2 [C3, P3] Moderate Corrosion
-          </div>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Fig 2: Ref 1.2 – Walkway corrosion (example)
-          </figcaption>
-        </figure>
-      </div>
-    </section>
-
-    <!-- Signatures -->
-    <section class="mt-6" aria-label="Signatures">
-      <div class="grid grid-cols-3 gap-4">
-        <div class="border-t pt-2">
-          <div class="text-xs font-medium text-gray-500">Inspected By</div>
-          <div class="h-10 mt-1 border-b border-gray-300"></div>
-          <p class="text-[11px] text-gray-500 mt-1">Name / Signature / Date</p>
-        </div>
-
-        <div class="border-t pt-2">
-          <div class="text-xs font-medium text-gray-500">Approved By</div>
-          <div class="h-10 mt-1 border-b border-gray-300"></div>
-          <p class="text-[11px] text-gray-500 mt-1">Name / Signature / Date</p>
-        </div>
-
-        <div class="border-t pt-2">
-          <div class="text-xs font-medium text-gray-500">Completed By</div>
-          <div class="h-10 mt-1 border-b border-gray-300"></div>
-          <p class="text-[11px] text-gray-500 mt-1">Name / Signature / Date</p>
-        </div>
-      </div>
-    </section>
-
-    <!-- Footer -->
-    <footer class="mt-4 text-center text-[11px] text-gray-500">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-0.5">Automatically generated job sheet</p>
-    </footer>
-  </main>
-
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      // Badge tone system
-      const TONES = {
-        amber:   ['bg-amber-50',   'text-amber-800',   'border-amber-200'],
-        emerald: ['bg-emerald-50', 'text-emerald-800', 'border-emerald-200'],
-        gray:    ['bg-gray-50',    'text-gray-700',    'border-gray-200'],
-      };
-
-      const BASE_BADGE = 'inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold';
-
-      function setBadge(id, text, toneKey) {
-        const el = document.getElementById(id);
-        if (!el) return;
-        const tone = TONES[toneKey] || TONES.gray;
-        el.className = `${BASE_BADGE} ${tone.join(' ')}`;
-        el.textContent = text;
-      }
-
-      setBadge('condition-rating', '3 - Poor', 'amber');
-      setBadge('priority-rating', '3 - 3 Years', 'emerald');
-
-      // Icons
-      if (window.feather && typeof window.feather.replace === 'function') {
-        window.feather.replace();
-      }
-
-      // Ensure images are loaded before printing
-      window.addEventListener('beforeprint', () => {
-        document.querySelectorAll('img').forEach(img => (img.loading = 'eager'));
-      });
-    });
-  </script>
-</body>
-</html>

processing.html

@@ -1,80 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>Processing - RepEx</title>
-
-  <link rel="stylesheet" href="style.css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <main class="max-w-2xl mx-auto my-10 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8">
-    <header class="flex items-center gap-4 border-b border-gray-200 pb-4 mb-6">
-      <img
-        src="assets/prosento-logo.png"
-        alt="Prosento logo"
-        class="h-10 w-auto object-contain"
-        loading="eager"
-      />
-      <div>
-        <h1 class="text-xl font-semibold text-gray-900">Prosento RepEx</h1>
-        <p class="text-sm text-gray-600">Report processing</p>
-      </div>
-    </header>
-
-    <section class="text-center">
-      <div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 border border-blue-100">
-        <i data-feather="loader" class="h-5 w-5 text-blue-700"></i>
-      </div>
-      <h2 class="text-2xl font-semibold text-gray-900 mb-2">Generating your report</h2>
-      <p class="text-gray-600 mb-6">
-        We are preparing your files and building the final report. This may take a few minutes.
-      </p>
-
-      <div class="w-full rounded-full bg-gray-200 h-3 overflow-hidden">
-        <div class="h-full bg-blue-600 w-1/2 animate-pulse"></div>
-      </div>
-
-      <p class="text-xs text-gray-500 mt-4">
-        You can leave this tab open while we process your submission.
-      </p>
-    </section>
-  </main>
-
-  <script src="script.js"></script>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') {
-        window.feather.replace();
-      }
-
-      const sessionId = window.REPEX.getSessionId();
-      window.REPEX.setSessionId(sessionId);
-      if (!sessionId) {
-        const message = document.createElement('p');
-        message.className = 'text-sm text-red-600 mt-6 text-center';
-        message.textContent = 'No active session found. Return to the upload page.';
-        document.querySelector('main').appendChild(message);
-        return;
-      }
-
-      const poll = async () => {
-        try {
-          const status = await window.REPEX.request(`/sessions/${sessionId}/status`);
-          if (status?.status === 'ready') {
-            window.location.href = `review-setup.html?session=${encodeURIComponent(sessionId)}`;
-          }
-        } catch {
-          // keep polling on transient errors
-        }
-      };
-
-      poll();
-      setInterval(poll, 2000);
-    });
-  </script>
-</body>
-</html>

report-viewer.html

@@ -1,412 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>RepEx - Report Express | Report Viewer</title>
-
-  <link rel="stylesheet" href="style.css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="components/report-editor.js"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    @page { size: A4; margin: 0; }
-
-    /* A4 canvas container */
-    .a4-page {
-      aspect-ratio: 210 / 297;
-      width: min(100%, 560px);
-      border-radius: 12px;
-    }
-
-    /* Viewer uses white page unless empty */
-    .page-white {
-      background: #ffffff;
-      border: 1px solid #e5e7eb; /* gray-200 */
-    }
-
-    /* If a page has no items, show placeholder red */
-    .page-empty {
-      background: #fee2e2;       /* red-200-ish */
-      border: 1px solid #fca5a5; /* red-300-ish */
-    }
-
-    @media print {
-      body { background: #fff !important; }
-      .print-a4 {
-        width: 210mm !important;
-        height: 297mm !important;
-        aspect-ratio: auto !important;
-        border-radius: 0 !important;
-        box-shadow: none !important;
-      }
-      .no-print { display: none !important; }
-      main { box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
-    }
-
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-  </style>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <main class="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8 print:ring-0 print:shadow-none print:rounded-none">
-    <!-- Header -->
-    <header class="mb-8 border-b border-gray-200 pb-4">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-4">
-        <div class="flex items-center">
-          <img
-src="assets/prosento-logo.png"
-            alt="Company logo"
-            class="h-12 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <div class="text-center">
-          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
-            RepEx - Report Express
-          </h1>
-          <p class="text-gray-600 whitespace-nowrap">Report Viewer</p>
-        </div>
-
-        <div class="flex justify-end gap-2 no-print">
-          <a
-            href="review-setup.html"
-            class="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"
-          >
-            <i data-feather="arrow-left" class="h-4 w-4"></i>
-            Back
-          </a>
-        </div>
-      </div>
-    </header>
-
-    <!-- Workflow buttons -->
-    <nav class="mb-6 no-print" aria-label="Report workflow navigation">
-      <div class="flex flex-wrap gap-2">
-        <span
-          class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white"
-        >
-          <i data-feather="layout" class="h-4 w-4"></i>
-          Report Viewer
-        </span>
-
-        <button
-          type="button"
-          id="edit-report"
-          class="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"
-        >
-          <i data-feather="edit-3" class="h-4 w-4"></i>
-          Edit Report
-        </button>
-
-        <a
-          href="edit-layouts.html"
-          class="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"
-        >
-          <i data-feather="grid" class="h-4 w-4"></i>
-          Edit Page Layouts
-        </a>
-
-        <a
-          href="export.html"
-          class="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"
-        >
-          <i data-feather="download" class="h-4 w-4"></i>
-          Export
-        </a>
-      </div>
-    </nav>
-
-    <!-- Viewer -->
-    <section id="viewerSection" aria-label="Report viewer">
-      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
-        <div>
-          <h2 class="text-xl font-semibold text-gray-800">Report Pages</h2>
-          <p id="viewerMeta" class="text-sm text-gray-600">Loading…</p>
-        </div>
-
-        <div class="flex items-center gap-2 no-print">
-          <button
-            id="prevPage"
-            type="button"
-            class="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"
-          >
-            <i data-feather="chevron-left" class="h-4 w-4"></i>
-            Prev
-          </button>
-
-          <div class="text-sm font-semibold text-gray-700">
-            Page <span id="pageNumber">1</span> / <span id="pageTotal">1</span>
-          </div>
-
-          <button
-            id="nextPage"
-            type="button"
-            class="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"
-          >
-            Next
-            <i data-feather="chevron-right" class="h-4 w-4"></i>
-          </button>
-        </div>
-      </div>
-
-      <!-- Page stage -->
-      <div class="flex justify-center">
-        <div
-          id="pageStage"
-          class="a4-page print-a4 relative overflow-hidden shadow-sm page-empty"
-          aria-label="Rendered A4 page"
-        ></div>
-      </div>
-
-      <p class="mt-4 text-xs text-gray-500 no-print">
-        Tip: Use keyboard arrows (← / →) to change pages.
-      </p>
-    </section>
-
-    <!-- Footer -->
-    <footer class="mt-12 text-center text-xs text-gray-500 no-print">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-1">Viewer now renders saved edits from the editor.</p>
-    </footer>
-  </main>
-
-  <script src="script.js"></script>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') {
-        window.feather.replace();
-      }
-
-      const sessionId = window.REPEX.getSessionId();
-      window.REPEX.setSessionId(sessionId);
-      if (!sessionId) {
-        const meta = document.getElementById('viewerMeta');
-        if (meta) meta.textContent = 'No active session found. Return to upload to continue.';
-        return;
-      }
-
-      const editor = document.createElement('report-editor');
-      document.body.appendChild(editor);
-      editor.style.display = 'none';
-
-      const viewerSection = document.getElementById('viewerSection');
-      const pageStage = document.getElementById('pageStage');
-      const viewerMeta = document.getElementById('viewerMeta');
-
-      const prevPageBtn = document.getElementById('prevPage');
-      const nextPageBtn = document.getElementById('nextPage');
-      const pageNumber = document.getElementById('pageNumber');
-      const pageTotal = document.getElementById('pageTotal');
-      const editBtn = document.getElementById('edit-report');
-
-      const BASE_W = 595;
-      const BASE_H = 842;
-
-      const state = {
-        pageIndex: 0,
-        totalPages: 6,
-        editMode: false,
-        pages: [],
-        session: null,
-      };
-
-      function setMeta() {
-        const selected = state.session?.selected_photo_ids?.length ?? 0;
-        const docs = state.session?.uploads?.documents?.length ?? 0;
-        const dataFiles = state.session?.uploads?.data_files?.length ?? 0;
-        const hasEdits = state.pages.length > 0;
-        viewerMeta.textContent =
-          `Selected example photos: ${selected} ? Documents: ${docs} ? Data files: ${dataFiles}` +
-          (hasEdits ? ' ? Edited pages loaded' : ' ? No saved edits yet');
-      }
-
-      function renderControls() {
-        pageTotal.textContent = String(state.totalPages || 1);
-        pageNumber.textContent = String(state.pageIndex + 1);
-        prevPageBtn.disabled = state.pageIndex === 0;
-        nextPageBtn.disabled = state.pageIndex >= state.totalPages - 1;
-      }
-
-      function stageScale() {
-        const rect = pageStage.getBoundingClientRect();
-        return rect.width / BASE_W;
-      }
-
-      function clearStage() {
-        pageStage.innerHTML = '';
-      }
-
-      function renderStageFromPage(pageObj) {
-        clearStage();
-
-        const items = pageObj?.items ?? [];
-        const hasItems = items.length > 0;
-
-        pageStage.classList.toggle('page-empty', !hasItems);
-        pageStage.classList.toggle('page-white', hasItems);
-
-        if (!hasItems) return;
-
-        const scale = stageScale();
-
-        items
-          .slice()
-          .sort((a, b) => (a.z ?? 0) - (b.z ?? 0))
-          .forEach(item => {
-            const wrap = document.createElement('div');
-            wrap.className = 'absolute';
-            wrap.style.left = `${item.x * scale}px`;
-            wrap.style.top = `${item.y * scale}px`;
-            wrap.style.width = `${item.w * scale}px`;
-            wrap.style.height = `${item.h * scale}px`;
-            wrap.style.zIndex = String(item.z ?? 0);
-
-            if (item.type === 'text') {
-              const d = document.createElement('div');
-              d.className = 'w-full h-full p-2 overflow-hidden';
-              d.style.whiteSpace = 'pre-wrap';
-              d.style.outline = 'none';
-
-              const fontSize = (item.style?.fontSize ?? 14) * scale;
-              d.style.fontSize = `${fontSize}px`;
-              d.style.fontWeight = item.style?.bold ? '700' : '400';
-              d.style.fontStyle = item.style?.italic ? 'italic' : 'normal';
-              d.style.textDecoration = item.style?.underline ? 'underline' : 'none';
-              d.style.color = item.style?.color ?? '#111827';
-              d.style.textAlign = item.style?.align ?? 'left';
-              d.textContent = item.content ?? '';
-
-              wrap.appendChild(d);
-            }
-
-            if (item.type === 'image') {
-              const img = document.createElement('img');
-              img.className = 'w-full h-full object-contain bg-white';
-              img.src = item.src;
-              img.alt = item.name ?? 'Image';
-              img.loading = 'eager';
-              wrap.appendChild(img);
-            }
-
-            if (item.type === 'rect') {
-              const box = document.createElement('div');
-              box.className = 'w-full h-full';
-              box.style.background = item.style?.fill ?? '#ffffff';
-              box.style.borderStyle = 'solid';
-              box.style.borderColor = item.style?.stroke ?? '#111827';
-              box.style.borderWidth = `${(item.style?.strokeWidth ?? 1) * scale}px`;
-              wrap.appendChild(box);
-            }
-
-            pageStage.appendChild(wrap);
-          });
-      }
-
-      async function fetchSession() {
-        const session = await window.REPEX.request(`/sessions/${sessionId}`);
-        state.session = session;
-        state.totalPages = session.page_count || state.totalPages;
-      }
-
-      async function fetchPages() {
-        try {
-          const result = await window.REPEX.request(`/sessions/${sessionId}/pages`);
-          state.pages = Array.isArray(result?.pages) ? result.pages : [];
-          if (state.pages.length) {
-            state.totalPages = Math.max(state.totalPages, state.pages.length);
-          }
-        } catch {
-          state.pages = [];
-        }
-      }
-
-      function renderPage() {
-        renderControls();
-        const pageObj = state.pages?.[state.pageIndex] ?? null;
-        renderStageFromPage(pageObj);
-        setMeta();
-      }
-
-      function nextPage() {
-        if (state.pageIndex < state.totalPages - 1) {
-          state.pageIndex += 1;
-          renderPage();
-        }
-      }
-
-      function prevPage() {
-        if (state.pageIndex > 0) {
-          state.pageIndex -= 1;
-          renderPage();
-        }
-      }
-
-      function openEditor() {
-        state.editMode = true;
-        editor.style.display = 'block';
-        viewerSection.classList.add('hidden');
-
-        editor.open({
-          payload: state.session,
-          pageIndex: state.pageIndex,
-          totalPages: state.totalPages,
-          sessionId,
-        });
-
-        editBtn.classList.add('bg-gray-900', 'text-white', 'border-gray-900');
-        editBtn.classList.remove('bg-white', 'text-gray-800', 'border-gray-200');
-
-        if (window.feather && typeof window.feather.replace === 'function') {
-          window.feather.replace();
-        }
-      }
-
-      async function closeEditor() {
-        state.editMode = false;
-        editor.style.display = 'none';
-        viewerSection.classList.remove('hidden');
-
-        editBtn.classList.remove('bg-gray-900', 'text-white', 'border-gray-900');
-        editBtn.classList.add('bg-white', 'text-gray-800', 'border-gray-200');
-
-        await fetchPages();
-        renderPage();
-      }
-
-      prevPageBtn.addEventListener('click', prevPage);
-      nextPageBtn.addEventListener('click', nextPage);
-
-      editBtn.addEventListener('click', () => {
-        if (!state.editMode) openEditor();
-      });
-
-      editor.addEventListener('editor-closed', () => {
-        closeEditor();
-      });
-
-      window.addEventListener('keydown', (e) => {
-        if (state.editMode) return;
-        if (e.key === 'ArrowRight') nextPage();
-        if (e.key === 'ArrowLeft') prevPage();
-      });
-
-      window.addEventListener('resize', () => {
-        if (!state.editMode) renderPage();
-      });
-
-      window.addEventListener('beforeprint', () => {
-        document.querySelectorAll('img').forEach(img => (img.loading = 'eager'));
-      });
-
-      (async () => {
-        await fetchSession();
-        await fetchPages();
-        renderPage();
-      })();
-    });
-  </script>
-</body>
-</html>

review-setup.html

@@ -1,376 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>RepEx - Report Express | Review & Setup</title>
-
-  <link rel="stylesheet" href="style.css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-  </style>
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-  <main class="max-w-4xl mx-auto my-8 bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-6 md:p-8">
-    <!-- Header -->
-    <header class="mb-8 border-b border-gray-200 pb-4">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-4">
-        <div class="flex items-center">
-          <img
-src="assets/prosento-logo.png"
-            alt="Company logo"
-            class="h-12 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <div class="text-center">
-          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
-            RepEx - Report Express
-          </h1>
-          <p class="text-gray-600 whitespace-nowrap">
-            Review uploads → pick examples → continue to report viewer
-          </p>
-        </div>
-
-        <div class="flex justify-end">
-          <span class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-xs font-semibold text-gray-700">
-            <i data-feather="check-circle" class="h-4 w-4"></i>
-            Uploads processed
-          </span>
-        </div>
-      </div>
-    </header>
-
-    <!-- Orientation -->
-    <section class="mb-8" aria-labelledby="what-next">
-      <h2 id="what-next" class="text-xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-4">
-        What happens on this page
-      </h2>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-          <div class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 border border-blue-100 mb-3">
-            <i data-feather="image" class="h-5 w-5 text-blue-700"></i>
-          </div>
-          <h3 class="font-semibold text-gray-900 mb-1">Select example photos</h3>
-          <p class="text-sm text-gray-600">
-            Choose which uploaded images should appear as example figures in the report.
-          </p>
-        </div>
-
-        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-          <div class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50 border border-emerald-100 mb-3">
-            <i data-feather="file-text" class="h-5 w-5 text-emerald-700"></i>
-          </div>
-          <h3 class="font-semibold text-gray-900 mb-1">Confirm documents</h3>
-          <p class="text-sm text-gray-600">
-            Ensure supporting PDFs/DOCX are correct (and later attach to export if needed).
-          </p>
-        </div>
-
-        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-          <div class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-amber-50 border border-amber-100 mb-3">
-            <i data-feather="table" class="h-5 w-5 text-amber-700"></i>
-          </div>
-          <h3 class="font-semibold text-gray-900 mb-1">Use Excel/CSV data</h3>
-          <p class="text-sm text-gray-600">
-            If Excel/CSV exists, it will populate report data areas automatically in later steps.
-          </p>
-        </div>
-      </div>
-    </section>
-
-    <!-- Review uploads -->
-    <section class="mb-8" aria-labelledby="review-uploads">
-      <h2 id="review-uploads" class="text-xl font-semibold text-gray-800 border-b border-gray-200 pb-2 mb-6">
-        Review uploaded files
-      </h2>
-
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <!-- Photos -->
-        <div class="lg:col-span-2">
-          <div class="flex items-center justify-between mb-3">
-            <h3 class="text-lg font-semibold text-gray-900">Photos</h3>
-            <span id="photoCount" class="text-sm font-semibold text-gray-600">0 files</span>
-          </div>
-
-          <div class="rounded-lg border border-gray-200 bg-white p-4">
-            <p class="text-sm text-gray-600 mb-3">
-              Select images to use as example figures in the report.
-              <span class="font-semibold text-gray-800">Recommended:</span> 2–6 images.
-            </p>
-
-            <div id="photoGrid" class="grid grid-cols-2 md:grid-cols-3 gap-3">
-              <!-- populated by JS -->
-            </div>
-
-            <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
-              <div class="text-sm text-gray-600">
-                Selected for report: <span id="photoSelected" class="font-semibold text-gray-900">0</span>
-              </div>
-              <div class="flex gap-2">
-                <button id="selectAllPhotos" type="button"
-                  class="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">
-                  <i data-feather="check-square" class="h-4 w-4"></i>
-                  Select all
-                </button>
-                <button id="clearPhotos" type="button"
-                  class="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">
-                  <i data-feather="square" class="h-4 w-4"></i>
-                  Clear
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Documents + Data files -->
-        <div class="space-y-6">
-          <!-- Documents -->
-          <div>
-            <div class="flex items-center justify-between mb-3">
-              <h3 class="text-lg font-semibold text-gray-900">Documents</h3>
-              <span id="docCount" class="text-sm font-semibold text-gray-600">0 files</span>
-            </div>
-
-            <div class="rounded-lg border border-gray-200 bg-white p-4">
-              <ul id="docList" class="space-y-2 text-sm text-gray-700">
-                <!-- populated by JS -->
-              </ul>
-              <p id="docHint" class="text-xs text-gray-500 mt-3">
-                PDFs/DOCX appear here after processing.
-              </p>
-            </div>
-          </div>
-
-          <!-- Data files -->
-          <div>
-            <div class="flex items-center justify-between mb-3">
-              <h3 class="text-lg font-semibold text-gray-900">Data files</h3>
-              <span id="dataCount" class="text-sm font-semibold text-gray-600">0 files</span>
-            </div>
-
-            <div class="rounded-lg border border-gray-200 bg-white p-4">
-              <div id="dataBox" class="text-sm text-gray-700">
-                <!-- populated by JS -->
-              </div>
-              <p class="text-xs text-gray-500 mt-3">
-                If present, these files will populate report tables/fields automatically.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Continue -->
-    <section class="mb-4" aria-label="Continue to report viewer">
-      <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between">
-        <div class="text-sm text-gray-600">
-          Next step:
-          <span id="readyStatus" class="font-semibold text-amber-700">Choose report example images to continue…</span>
-        </div>
-
-        <button
-          id="continueBtn"
-          type="button"
-          class="inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-5 py-2.5 text-white font-semibold hover:bg-emerald-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
-          disabled
-        >
-          <i data-feather="arrow-right" class="h-5 w-5"></i>
-          Continue to Report Viewer
-        </button>
-      </div>
-
-      <p class="text-xs text-gray-500 mt-3">
-        Note: This page assumes uploads were completed on a previous “Processing” page.
-      </p>
-    </section>
-
-    <!-- Footer -->
-    <footer class="mt-12 text-center text-xs text-gray-500">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-1">Workflow: Processing → Review uploads → Report viewer → Edit → Export</p>
-    </footer>
-  </main>
-
-  <script src="script.js"></script>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.feather && typeof window.feather.replace === 'function') {
-        window.feather.replace();
-      }
-
-      const photoGrid = document.getElementById('photoGrid');
-      const photoCount = document.getElementById('photoCount');
-      const photoSelected = document.getElementById('photoSelected');
-      const selectAllPhotosBtn = document.getElementById('selectAllPhotos');
-      const clearPhotosBtn = document.getElementById('clearPhotos');
-
-      const docList = document.getElementById('docList');
-      const docCount = document.getElementById('docCount');
-      const docHint = document.getElementById('docHint');
-
-      const dataBox = document.getElementById('dataBox');
-      const dataCount = document.getElementById('dataCount');
-
-      const readyStatus = document.getElementById('readyStatus');
-      const continueBtn = document.getElementById('continueBtn');
-
-      const sessionId = window.REPEX.getSessionId();
-      window.REPEX.setSessionId(sessionId);
-      if (!sessionId) {
-        readyStatus.textContent = 'No active session found. Return to upload to continue.';
-        readyStatus.className = 'font-semibold text-red-600';
-        continueBtn.disabled = true;
-        return;
-      }
-
-      const state = {
-        selectedPhotoIds: new Set(),
-      };
-
-      function updateSelectionState() {
-        photoSelected.textContent = String(state.selectedPhotoIds.size);
-        const canContinue = state.selectedPhotoIds.size > 0;
-        continueBtn.disabled = !canContinue;
-
-        if (!canContinue) {
-          readyStatus.textContent = 'Choose report example images to continue...';
-          readyStatus.className = 'font-semibold text-amber-700';
-        } else {
-          readyStatus.textContent = 'Ready. Continue to report viewer.';
-          readyStatus.className = 'font-semibold text-emerald-700';
-        }
-      }
-
-      function renderUploads(uploads, selectedIds) {
-        const photos = uploads.photos || [];
-        photoCount.textContent = `${photos.length} file${photos.length === 1 ? '' : 's'}`;
-
-        photoGrid.innerHTML = photos.length
-          ? photos.map((p) => {
-              const checked = selectedIds.includes(p.id) ? 'checked' : '';
-              if (checked) state.selectedPhotoIds.add(p.id);
-              return `
-                <label class="group cursor-pointer">
-                  <input type="checkbox" class="sr-only photoCheck" data-photo-id="${p.id}" ${checked}>
-                  <div class="rounded-lg border border-gray-200 bg-gray-50 overflow-hidden group-has-[:checked]:ring-2 group-has-[:checked]:ring-emerald-200 group-has-[:checked]:border-emerald-300 transition">
-                    <div class="relative">
-                      <img src="${p.url}" alt="${p.name}" class="h-28 w-full object-cover" loading="eager">
-                      <div class="absolute top-2 right-2 inline-flex items-center justify-center rounded-full bg-white/90 border border-gray-200 p-1.5 text-gray-700 group-has-[:checked]:bg-emerald-50 group-has-[:checked]:border-emerald-200 group-has-[:checked]:text-emerald-700">
-                        <i data-feather="check" class="h-4 w-4"></i>
-                      </div>
-                    </div>
-                    <div class="p-2">
-                      <div class="text-xs font-semibold text-gray-900 truncate">${p.name}</div>
-                      <div class="text-xs text-gray-500">Click to select for report</div>
-                    </div>
-                  </div>
-                </label>
-              `;
-            }).join('')
-          : `<div class="col-span-full text-sm text-gray-500">No photos were uploaded.</div>`;
-
-        const docs = uploads.documents || [];
-        docCount.textContent = `${docs.length} file${docs.length === 1 ? '' : 's'}`;
-        docList.innerHTML = docs.length
-          ? docs.map(d => `
-              <li class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
-                <div class="flex items-center gap-2 min-w-0">
-                  <i data-feather="file-text" class="h-4 w-4 text-gray-600"></i>
-                  <span class="truncate text-gray-800">${d.name}</span>
-                </div>
-                <span class="text-xs font-semibold text-gray-600">${d.content_type || 'File'}</span>
-              </li>
-            `).join('')
-          : `<li class="text-sm text-gray-500">No supporting documents detected.</li>`;
-        docHint.style.display = docs.length ? 'none' : 'block';
-
-        const dataFiles = uploads.data_files || [];
-        dataCount.textContent = `${dataFiles.length} file${dataFiles.length === 1 ? '' : 's'}`;
-        dataBox.innerHTML = dataFiles.length
-          ? dataFiles.map(f => `
-              <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 text-sm text-gray-700 mb-2 last:mb-0">
-                <div class="flex items-center justify-between gap-3">
-                  <div class="flex items-center gap-2 min-w-0">
-                    <i data-feather="table" class="h-4 w-4 text-amber-700"></i>
-                    <span class="truncate font-semibold text-gray-900">${f.name}</span>
-                  </div>
-                  <span class="text-xs font-semibold text-gray-600">${f.content_type || 'Data'}</span>
-                </div>
-                <div class="text-xs text-gray-600 mt-1">
-                  Will populate report data areas (tables/fields).
-                </div>
-              </div>
-            `).join('')
-          : `
-            <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 text-sm text-gray-600">
-              <div class="font-semibold text-gray-800 mb-1">No Excel/CSV detected</div>
-              If you upload a CSV or Excel file, RepEx can auto-populate report data fields.
-            </div>
-          `;
-
-        if (window.feather && typeof window.feather.replace === 'function') {
-          window.feather.replace();
-        }
-      }
-
-      async function loadSession() {
-        try {
-          const session = await window.REPEX.request(`/sessions/${sessionId}`);
-          renderUploads(session.uploads || {}, session.selected_photo_ids || []);
-          updateSelectionState();
-        } catch (err) {
-          readyStatus.textContent = err.message || 'Failed to load session.';
-          readyStatus.className = 'font-semibold text-red-600';
-        }
-      }
-
-      photoGrid.addEventListener('change', (e) => {
-        const cb = e.target.closest('.photoCheck');
-        if (!cb) return;
-        const id = cb.dataset.photoId;
-        if (cb.checked) state.selectedPhotoIds.add(id);
-        else state.selectedPhotoIds.delete(id);
-        updateSelectionState();
-      });
-
-      selectAllPhotosBtn.addEventListener('click', () => {
-        photoGrid.querySelectorAll('.photoCheck').forEach(cb => {
-          cb.checked = true;
-          state.selectedPhotoIds.add(cb.dataset.photoId);
-        });
-        updateSelectionState();
-      });
-
-      clearPhotosBtn.addEventListener('click', () => {
-        photoGrid.querySelectorAll('.photoCheck').forEach(cb => (cb.checked = false));
-        state.selectedPhotoIds.clear();
-        updateSelectionState();
-      });
-
-      continueBtn.addEventListener('click', async () => {
-        if (state.selectedPhotoIds.size === 0) return;
-        const selectedIds = Array.from(state.selectedPhotoIds);
-        try {
-          await window.REPEX.putJson(`/sessions/${sessionId}/selection`, {
-            selected_photo_ids: selectedIds,
-          });
-          window.location.href = `report-viewer.html?session=${encodeURIComponent(sessionId)}`;
-        } catch (err) {
-          readyStatus.textContent = err.message || 'Failed to save selection.';
-          readyStatus.className = 'font-semibold text-red-600';
-        }
-      });
-
-      loadSession();
-    });
-  </script>
-</body>
-</html>

script.js

@@ -1,107 +0,0 @@
-"use strict";
-
-(function () {
-  const SESSION_KEY = "repex_session_id";
-  const apiBase =
-    window.REPEX_API_BASE ||
-    new URL("/api", window.location.origin).toString().replace(/\/$/, "");
-
-  function getSessionId() {
-    const params = new URLSearchParams(window.location.search);
-    return params.get("session") || localStorage.getItem(SESSION_KEY) || "";
-  }
-
-  function setSessionId(id) {
-    if (!id) return;
-    localStorage.setItem(SESSION_KEY, id);
-  }
-
-  function clearSessionId() {
-    localStorage.removeItem(SESSION_KEY);
-  }
-
-  function formatBytes(bytes) {
-    if (!Number.isFinite(bytes)) return "0 B";
-    const units = ["B", "KB", "MB", "GB"];
-    let value = bytes;
-    let idx = 0;
-    while (value >= 1024 && idx < units.length - 1) {
-      value /= 1024;
-      idx += 1;
-    }
-    return `${value.toFixed(value >= 10 || idx === 0 ? 0 : 1)} ${units[idx]}`;
-  }
-
-  async function request(path, options = {}) {
-    const url = `${apiBase}${path}`;
-    const res = await fetch(url, {
-      credentials: "same-origin",
-      ...options,
-    });
-    if (!res.ok) {
-      let detail = res.statusText;
-      try {
-        const data = await res.json();
-        detail = data?.detail || detail;
-      } catch {}
-      throw new Error(detail);
-    }
-    if (res.status === 204) return null;
-    const contentType = res.headers.get("content-type") || "";
-    if (contentType.includes("application/json")) {
-      return res.json();
-    }
-    return res.text();
-  }
-
-  async function postForm(path, formData) {
-    return request(path, { method: "POST", body: formData });
-  }
-
-  async function postJson(path, body) {
-    return request(path, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
-    });
-  }
-
-  async function putJson(path, body) {
-    return request(path, {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
-    });
-  }
-
-  function applySessionToLinks() {
-    const sessionId = getSessionId();
-    if (!sessionId) return;
-    document.querySelectorAll('a[href$=".html"]').forEach((link) => {
-      const href = link.getAttribute("href");
-      if (!href || href.startsWith("http")) return;
-      const url = new URL(href, window.location.origin);
-      if (!url.searchParams.get("session")) {
-        url.searchParams.set("session", sessionId);
-        link.setAttribute("href", `${url.pathname}${url.search}`);
-      }
-    });
-  }
-
-  window.REPEX = {
-    apiBase,
-    getSessionId,
-    setSessionId,
-    clearSessionId,
-    request,
-    postForm,
-    postJson,
-    putJson,
-    formatBytes,
-    applySessionToLinks,
-  };
-
-  document.addEventListener("DOMContentLoaded", () => {
-    applySessionToLinks();
-  });
-})();

style.css

@@ -1 +0,0 @@
-/* Global overrides for RepEx pages. */

templates/job-sheet-template.html

@@ -1,286 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>SIMM Inspection Job Sheet</title>
-
-  <!-- Optional project stylesheet -->
-  <link rel="stylesheet" href="../style.css" />
-
-  <!-- Tailwind (CDN OK for prototypes; compile for production) -->
-  <script src="https://cdn.tailwindcss.com"></script>
-
-  <!-- Feather icons -->
-  <script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-
-  <style>
-    @page { size: A4; margin: 10mm; }
-
-    @media print {
-      html, body { background: #fff !important; }
-      .no-print { display: none !important; }
-      main { box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
-    }
-
-    .avoid-break { break-inside: avoid; page-break-inside: avoid; }
-    img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-  </style>
-</head>
-
-<body class="bg-gray-50 print:bg-white">
-  <!-- A4-focused container -->
-  <main class="mx-auto max-w-[210mm] bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-5 print:ring-0 print:shadow-none print:rounded-none">
-    <!-- Header -->
-    <header class="mb-4 border-b border-gray-200 pb-3">
-      <div class="grid grid-cols-[auto,1fr,auto] items-center gap-3">
-        <div class="flex items-center">
-          <img
-            src="../assets/prosento-logo.png"
-            alt="Prosento logo"
-            class="h-10 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-
-        <div class="text-center leading-tight">
-          <h1 class="text-2xl font-bold text-gray-900 whitespace-nowrap">SIMM Inspection Job Sheet</h1>
-          <p class="text-sm text-gray-600 whitespace-nowrap">Structural Inspection and Maintenance Management</p>
-        </div>
-
-        <div class="flex items-center justify-end">
-          <img
-            src="../assets/client-logo.png"
-            alt="Client logo placeholder"
-            class="h-10 w-auto object-contain"
-            loading="eager"
-          />
-        </div>
-      </div>
-    </header>
-
-    <!-- Inspection Details -->
-    <section class="mb-4" aria-labelledby="inspection-details-title">
-      <h2 id="inspection-details-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
-        Inspection Details
-      </h2>
-
-      <dl class="grid grid-cols-2 md:grid-cols-4 gap-2 bg-gray-50 border border-gray-200 rounded-lg p-3">
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Inspection Date</dt>
-          <dd class="text-sm font-semibold text-gray-900">2023-11-15</dd>
-        </div>
-
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Inspector</dt>
-          <dd class="text-sm font-semibold text-gray-900">John Doe</dd>
-        </div>
-
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Accompanied By</dt>
-          <dd class="text-sm font-semibold text-gray-900">John Doe</dd>
-        </div>
-
-        <div class="space-y-0.5">
-          <dt class="text-xs font-medium text-gray-500">Document No</dt>
-          <dd class="text-sm font-mono font-semibold text-gray-900">SIMM-JS-2023-001</dd>
-        </div>
-
-        <div class="space-y-0.5 md:col-span-2">
-          <dt class="text-xs font-medium text-gray-500">Project</dt>
-          <dd class="text-sm font-semibold text-gray-900">North Pit – Sector 4 Conveyor Upgrade</dd>
-        </div>
-
-        <div class="space-y-0.5 md:col-span-2">
-          <dt class="text-xs font-medium text-gray-500">Client / Site</dt>
-          <dd class="text-sm font-semibold text-gray-900">Tronox</dd>
-        </div>
-      </dl>
-    </section>
-
-    <!-- Observations and Findings -->
-    <section class="mb-4" aria-labelledby="observations-title">
-      <h2 id="observations-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
-        Observations and Findings
-      </h2>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-        <!-- Left column -->
-        <div class="space-y-2">
-          <div class="grid grid-cols-2 gap-2">
-            <div class="space-y-0.5">
-              <div class="text-xs font-medium text-gray-500">Reference</div>
-              <div class="text-sm font-semibold text-gray-900">REF-7821</div>
-            </div>
-
-            <div class="space-y-0.5">
-              <div class="text-xs font-medium text-gray-500">Action Type</div>
-              <div class="text-sm font-semibold text-gray-900">Structural Repair</div>
-            </div>
-
-            <div class="space-y-0.5 col-span-2">
-              <div class="text-xs font-medium text-gray-500">Item Description</div>
-              <div class="text-sm font-semibold text-gray-900">Main support beam for conveyor CV-04</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Right column -->
-        <div class="space-y-2">
-          <div class="space-y-0.5">
-            <div class="text-xs font-medium text-gray-500">Functional Location</div>
-            <div class="text-sm font-semibold text-gray-900">Conveyor Support - CV-04-SUP-02</div>
-          </div>
-        </div>
-
-        <!-- Centered Category + Priority (must be direct child of the grid) -->
-        <div class="md:col-span-2 flex justify-center">
-          <div class="inline-flex items-center gap-10">
-            <div class="text-center space-y-1">
-              <div class="text-xs font-medium text-gray-500">Category</div>
-              <span
-                id="condition-rating"
-                class="badge inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold"
-                aria-label="Category rating"
-              >
-                <!-- populated by JS -->
-              </span>
-            </div>
-
-            <div class="text-center space-y-1">
-              <div class="text-xs font-medium text-gray-500">Priority</div>
-              <span
-                id="priority-rating"
-                class="badge inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold"
-                aria-label="Priority rating"
-              >
-                <!-- populated by JS -->
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Full-width: Condition Description -->
-        <div class="md:col-span-2 space-y-1">
-          <div class="text-xs font-medium text-gray-500">Condition Description</div>
-          <div class="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
-            <p class="text-amber-800 text-sm font-semibold leading-snug">
-              Visible corrosion on lower flange with ~15% material loss. Surface pitting along entire length.
-            </p>
-          </div>
-        </div>
-
-        <!-- Full-width: Required Action -->
-        <div class="md:col-span-2 space-y-1">
-          <div class="text-xs font-medium text-gray-500">Required Action</div>
-          <div class="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
-            <p class="text-blue-800 text-sm font-semibold leading-snug">
-              Clean exposed rebar; apply corrosion protection; use wet-to-dry epoxy; reinstate with concrete repair.
-              Complete within next 12 months to limit further degradation.
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Photo Documentation -->
-    <section class="mb-4 avoid-break" aria-labelledby="photo-doc-title">
-      <h2 id="photo-doc-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
-        Photo Documentation
-      </h2>
-
-      <div class="grid grid-cols-2 gap-3">
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50">
-          <img
-            src="https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Screenshot%202026-02-02%20100102.png"
-            alt="Photo 1"
-            class="w-full h-40 object-contain mx-auto"
-            loading="eager"
-          />
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Fig 1: Ref 1.1 – Concrete spalling (example)
-          </figcaption>
-        </figure>
-
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 relative">
-          <img
-            src="https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Picture2.png"
-            alt="Photo 2"
-            class="w-full h-40 object-contain mx-auto"
-            loading="eager"
-          />
-          <div class="absolute top-2 left-2 bg-white/95 text-black text-[11px] font-bold px-2 py-1 rounded border border-gray-300">
-            #1.2 [C3, P3] Moderate Corrosion
-          </div>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
-            Fig 2: Ref 1.2 – Walkway corrosion (example)
-          </figcaption>
-        </figure>
-      </div>
-    </section>
-
-    <!-- Signatures -->
-    <section class="mt-6" aria-label="Signatures">
-      <div class="grid grid-cols-3 gap-4">
-        <div class="border-t pt-2">
-          <div class="text-xs font-medium text-gray-500">Inspected By</div>
-          <div class="h-10 mt-1 border-b border-gray-300"></div>
-          <p class="text-[11px] text-gray-500 mt-1">Name / Signature / Date</p>
-        </div>
-
-        <div class="border-t pt-2">
-          <div class="text-xs font-medium text-gray-500">Approved By</div>
-          <div class="h-10 mt-1 border-b border-gray-300"></div>
-          <p class="text-[11px] text-gray-500 mt-1">Name / Signature / Date</p>
-        </div>
-
-        <div class="border-t pt-2">
-          <div class="text-xs font-medium text-gray-500">Completed By</div>
-          <div class="h-10 mt-1 border-b border-gray-300"></div>
-          <p class="text-[11px] text-gray-500 mt-1">Name / Signature / Date</p>
-        </div>
-      </div>
-    </section>
-
-    <!-- Footer -->
-    <footer class="mt-4 text-center text-[11px] text-gray-500">
-      <p>Prosento - © 2026 All Rights Reserved</p>
-      <p class="mt-0.5">Automatically generated job sheet</p>
-    </footer>
-  </main>
-
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      // Badge tone system
-      const TONES = {
-        amber:   ['bg-amber-50',   'text-amber-800',   'border-amber-200'],
-        emerald: ['bg-emerald-50', 'text-emerald-800', 'border-emerald-200'],
-        gray:    ['bg-gray-50',    'text-gray-700',    'border-gray-200'],
-      };
-
-      const BASE_BADGE = 'inline-flex items-center justify-center rounded-md border px-4 py-1 text-sm font-semibold';
-
-      function setBadge(id, text, toneKey) {
-        const el = document.getElementById(id);
-        if (!el) return;
-        const tone = TONES[toneKey] || TONES.gray;
-        el.className = `${BASE_BADGE} ${tone.join(' ')}`;
-        el.textContent = text;
-      }
-
-      setBadge('condition-rating', '3 - Poor', 'amber');
-      setBadge('priority-rating', '3 - 3 Years', 'emerald');
-
-      // Icons
-      if (window.feather && typeof window.feather.replace === 'function') {
-        window.feather.replace();
-      }
-
-      // Ensure images are loaded before printing
-      window.addEventListener('beforeprint', () => {
-        document.querySelectorAll('img').forEach(img => (img.loading = 'eager'));
-      });
-    });
-  </script>
-</body>
-</html>