Root HTML files added

README.md

@@ -1,26 +1,36 @@
-# Starter: FastAPI + Vite (Minimal)
+# RepEx Web Starter
 
-A minimal, industry-standard starter with:
-- `server/` - FastAPI API (`/api/health`).
-- `frontend/` - Vite + React app that renders a full-screen black page.
+Static HTML pages at the project root plus a minimal FastAPI backend.
 
 ## Project Layout
 
 ```
-server/
-  app/
-    api/
-      routes/
-        health.py
-      router.py
-    core/
-      config.py
-    main.py
-frontend/
-  src/
-    App.tsx
-    main.tsx
-    index.css
+/
+  index.html
+  processing.html
+  review-setup.html
+  report-viewer.html
+  edit-layouts.html
+  export.html
+  style.css
+  script.js
+  components/
+    report-editor.js
+  templates/
+    job-sheet-template.html
+  assets/
+    prosento-logo.png
+    client-logo.png
+  server/
+    app/
+      api/
+        routes/
+          health.py
+        router.py
+      core/
+        config.py
+      main.py
+  frontend/ (optional Vite starter)
 ```
 
 ## Quick Start
@@ -34,13 +44,11 @@ uvicorn server.app.main:app --reload --port 8000
 ```
 
 ### Web
+Open `index.html` directly in your browser, or serve the root with a static server:
 ```powershell
-cd frontend
-npm install
-npm run dev
+python -m http.server 5173
 ```
-
-Open `http://localhost:5173`.
+Then open `http://localhost:5173`.
 
 ## Configuration
 

components/report-editor.js

@@ -0,0 +1,1113 @@
+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,
+    };
+  }
+
+  connectedCallback() {
+    if (this._mounted) return;
+    this._mounted = true;
+    this.render();
+    this.bind();
+    this.hide();
+  }
+
+  // Public API
+  open({ payload, pageIndex = 0, totalPages = 6 } = {}) {
+    this.state.payload = payload ?? null;
+    this.state.isOpen = true;
+
+    // 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();
+  }
+
+  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 your browser storage.
+                </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() {
+    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 }));
+      if (showToast) this._toast("Saved");
+    } catch {
+      if (showToast) this._toast("Save 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

@@ -0,0 +1,265 @@
+<!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">
+            Uses storage keys:
+            <div class="mt-1 font-mono text-[11px] text-gray-700">
+              repex_report_pages_v1<br>
+              repex_layout_settings_v1<br>
+              repex_report_payload
+            </div>
+          </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 PAGES_KEY = 'repex_report_pages_v1';
+      const LAYOUT_KEY = 'repex_layout_settings_v1';
+      const PAYLOAD_KEY = 'repex_report_payload';
+
+      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');
+
+      function loadJson(key) {
+        try {
+          const raw = localStorage.getItem(key);
+          return raw ? JSON.parse(raw) : null;
+        } catch {
+          return null;
+        }
+      }
+
+      const pagesObj = loadJson(PAGES_KEY);
+      const pages = pagesObj?.pages ?? [];
+      const layout = loadJson(LAYOUT_KEY);
+      const payload = loadJson(PAYLOAD_KEY);
+
+      const selectedPhotos = payload?.selectedPhotoIndices?.length ?? 0;
+      const docs = payload?.uploads?.documents?.length ?? 0;
+      const dataFiles = payload?.uploads?.dataFiles?.length ?? 0;
+
+      // Count total items
+      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 = `${selectedPhotos}`;
+      sumDocs.textContent = `${docs}`;
+      sumData.textContent = `${dataFiles}`;
+
+      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);
+      }
+
+      downloadJson.addEventListener('click', () => {
+        const pack = {};
+        if (incPages.checked) pack.pages = pagesObj ?? null;
+        if (incLayout.checked) pack.layout = layout ?? null;
+        if (incPayload.checked) pack.payload = payload ?? null;
+        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));
+      });
+    });
+  </script>
+</body>
+</html>

export.html

@@ -0,0 +1,266 @@
+<!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">
+            Uses storage keys:
+            <div class="mt-1 font-mono text-[11px] text-gray-700">
+              repex_report_pages_v1<br>
+              repex_layout_settings_v1<br>
+              repex_report_payload
+            </div>
+          </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 PAGES_KEY = 'repex_report_pages_v1';
+      const LAYOUT_KEY = 'repex_layout_settings_v1';
+      const PAYLOAD_KEY = 'repex_report_payload';
+
+      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');
+
+      function loadJson(key) {
+        try {
+          const raw = localStorage.getItem(key);
+          return raw ? JSON.parse(raw) : null;
+        } catch {
+          return null;
+        }
+      }
+
+      const pagesObj = loadJson(PAGES_KEY);
+      const pages = pagesObj?.pages ?? [];
+      const layout = loadJson(LAYOUT_KEY);
+      const payload = loadJson(PAYLOAD_KEY);
+
+      const selectedPhotos = payload?.selectedPhotoIndices?.length ?? 0;
+      const docs = payload?.uploads?.documents?.length ?? 0;
+      const dataFiles = payload?.uploads?.dataFiles?.length ?? 0;
+
+      // Count total items
+      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 = `${selectedPhotos}`;
+      sumDocs.textContent = `${docs}`;
+      sumData.textContent = `${dataFiles}`;
+
+      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);
+      }
+
+      downloadJson.addEventListener('click', () => {
+        const pack = {};
+        if (incPages.checked) pack.pages = pagesObj ?? null;
+        if (incLayout.checked) pack.layout = layout ?? null;
+        if (incPayload.checked) pack.payload = payload ?? null;
+        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));
+      });
+    });
+  </script>
+  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

index.html

@@ -0,0 +1,297 @@
+<!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
+          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
+            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>
+
+          <p class="text-xs text-gray-500 mt-4">
+            Supports JPG, PNG, PDF, DOCX (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
+          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>
+      </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 class="bg-white divide-y divide-gray-200">
+              <tr>
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">#RPT-2023-001</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Bridge Inspection - Main Span</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">2023-10-15</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">
+                    Completed
+                  </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm">
+                  <a href="#" class="inline-flex items-center text-blue-700 hover:text-blue-800 mr-3" aria-label="Download report">
+                    <i data-feather="download" class="h-4 w-4"></i>
+                  </a>
+                  <a href="#" class="inline-flex items-center text-blue-700 hover:text-blue-800" aria-label="Edit report">
+                    <i data-feather="edit" class="h-4 w-4"></i>
+                  </a>
+                </td>
+              </tr>
+
+              <tr>
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">#RPT-2023-002</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Building Facade Assessment</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">2023-10-18</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-amber-50 text-amber-700 border-amber-200">
+                    Processing
+                  </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm">
+                  <a href="#" class="inline-flex items-center text-gray-400 cursor-not-allowed mr-3" aria-label="Download report (disabled)">
+                    <i data-feather="download" class="h-4 w-4"></i>
+                  </a>
+                  <a href="#" class="inline-flex items-center text-blue-700 hover:text-blue-800" aria-label="Edit report">
+                    <i data-feather="edit" class="h-4 w-4"></i>
+                  </a>
+                </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();
+      }
+    });
+  </script>
+</body>
+</html>

package-lock.json

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

processing.html

@@ -0,0 +1,56 @@
+<!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();
+      }
+    });
+  </script>
+</body>
+</html>

report-viewer.html

@@ -0,0 +1,420 @@
+<!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">
+        <button
+          type="button"
+          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
+        </button>
+
+        <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>
+
+        <button
+          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"
+        >
+          <i data-feather="grid" class="h-4 w-4"></i>
+          Edit Page Layouts
+        </button>
+
+        <button
+          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"
+        >
+          <i data-feather="download" class="h-4 w-4"></i>
+          Export
+        </button>
+      </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', () => {
+      // Feather icons
+      if (window.feather && typeof window.feather.replace === 'function') {
+        window.feather.replace();
+      }
+
+      // Mount editor (hidden until opened)
+      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');
+
+      // A4 model dimensions (must match editor)
+      const BASE_W = 595;
+      const BASE_H = 842;
+
+      // ---- Load payload from Review page (optional meta) ----
+      const payloadRaw = localStorage.getItem('repex_report_payload');
+      let payload = null;
+      try { payload = payloadRaw ? JSON.parse(payloadRaw) : null; } catch { payload = null; }
+
+      // ---- Pages storage used by editor ----
+      const PAGES_STORAGE_KEY = 'repex_report_pages_v1';
+
+      function loadEditorPages() {
+        try {
+          const raw = localStorage.getItem(PAGES_STORAGE_KEY);
+          const parsed = raw ? JSON.parse(raw) : null;
+          if (parsed && Array.isArray(parsed.pages)) return parsed.pages;
+          return null;
+        } catch {
+          return null;
+        }
+      }
+
+      // ---- State ----
+      const state = {
+        pageIndex: 0,
+        totalPages: 6,
+        editMode: false,
+        pages: null
+      };
+
+      function setMeta() {
+        const selected = payload?.selectedPhotoIndices?.length ?? 0;
+        const docs = payload?.uploads?.documents?.length ?? 0;
+        const dataFiles = payload?.uploads?.dataFiles?.length ?? 0;
+
+        const hasEdits = !!state.pages;
+        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);
+        pageNumber.textContent = String(state.pageIndex + 1);
+        prevPageBtn.disabled = state.pageIndex === 0;
+        nextPageBtn.disabled = state.pageIndex === state.totalPages - 1;
+      }
+
+      function stageScale() {
+        // stage width is in CSS pixels; map model coords to it
+        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;
+
+        // page background style
+        pageStage.classList.toggle('page-empty', !hasItems);
+        pageStage.classList.toggle('page-white', hasItems);
+
+        // If empty, leave blank red page
+        if (!hasItems) return;
+
+        const scale = stageScale();
+
+        // Render items sorted by z
+        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);
+          });
+      }
+
+      function renderPage() {
+        // Reload pages each time to reflect saved edits immediately
+        state.pages = loadEditorPages();
+        state.totalPages = state.pages?.length ?? state.totalPages;
+
+        renderControls();
+
+        const pageObj = state.pages ? 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');
+
+        // Ensure the editor has the latest page count
+        const pages = loadEditorPages();
+        const totalPages = pages?.length ?? state.totalPages;
+
+        editor.open({
+          payload,
+          pageIndex: state.pageIndex,
+          totalPages
+        });
+
+        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();
+        }
+      }
+
+      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');
+
+        // Re-render to reflect latest saved edits
+        renderPage();
+      }
+
+      // Events
+      prevPageBtn.addEventListener('click', prevPage);
+      nextPageBtn.addEventListener('click', nextPage);
+
+      document.getElementById('edit-report').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();
+      });
+
+      // Re-render on resize so scaling stays correct
+      window.addEventListener('resize', () => {
+        if (!state.editMode) renderPage();
+      });
+
+      window.addEventListener('beforeprint', () => {
+        document.querySelectorAll('img').forEach(img => (img.loading = 'eager'));
+      });
+
+      // Initial render
+      renderPage();
+    });
+  </script>
+</body>
+</html>

review-setup.html

@@ -0,0 +1,385 @@
+<!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', () => {
+      // Feather icons
+      if (window.feather && typeof window.feather.replace === 'function') {
+        window.feather.replace();
+      }
+
+      // ---- Simulated "uploads processed" payload ----
+      // Replace this with the real payload passed from the progress page (e.g., localStorage, URL params, backend session).
+      const processedUploads = {
+        photos: [
+          { name: 'photo_01.jpg', url: 'https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Picture2.png' },
+          { name: 'photo_02.jpg', url: 'https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Screenshot%202026-02-02%20100102.png' },
+          { name: 'photo_03.jpg', url: 'https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Picture2.png' }
+        ],
+        documents: [
+          { name: 'inspection_notes.pdf', type: 'PDF' },
+          { name: 'supporting_docs.docx', type: 'DOCX' }
+        ],
+        dataFiles: [
+          { name: 'report_data.xlsx', type: 'XLSX' }
+        ]
+      };
+
+      // ---- State ----
+      const state = {
+        selectedPhotoIds: new Set(),
+      };
+
+      // ---- Elements ----
+      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');
+
+      function renderUploads() {
+        // Photos
+        const photos = processedUploads.photos || [];
+        photoCount.textContent = `${photos.length} file${photos.length === 1 ? '' : 's'}`;
+
+        photoGrid.innerHTML = photos.map((p, idx) => {
+          const id = `photo-${idx}`;
+          return `
+            <label class="group cursor-pointer">
+              <input type="checkbox" class="sr-only photoCheck" data-photo-id="${id}">
+              <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('');
+
+        // Documents
+        const docs = processedUploads.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.type}</span>
+              </li>
+            `).join('')
+          : `<li class="text-sm text-gray-500">No supporting documents detected.</li>`;
+        docHint.style.display = docs.length ? 'none' : 'block';
+
+        // Data files
+        const dataFiles = processedUploads.dataFiles || [];
+        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.type}</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>
+          `;
+
+        // Icons for dynamic content
+        if (window.feather && typeof window.feather.replace === 'function') {
+          window.feather.replace();
+        }
+      }
+
+      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';
+        }
+      }
+
+      // Init render
+      renderUploads();
+      updateSelectionState();
+
+      // Photo selection tracking
+      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();
+      });
+
+      // Continue → go to report-viewer.html and pass selections
+      continueBtn.addEventListener('click', () => {
+        if (state.selectedPhotoIds.size === 0) return;
+
+        const selectedIndices = Array.from(state.selectedPhotoIds)
+          .map(id => Number(id.replace('photo-', '')))
+          .filter(n => Number.isFinite(n));
+
+        const payload = {
+          // what the viewer might need later
+          selectedPhotoIndices: selectedIndices,
+          uploads: processedUploads,
+          createdAt: new Date().toISOString(),
+        };
+
+        localStorage.setItem('repex_report_payload', JSON.stringify(payload));
+        window.location.href = 'report-viewer.html';
+      });
+    });
+  </script>
+</body>
+</html>

script.js

@@ -0,0 +1 @@
+"use strict";

style.css

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

templates/job-sheet-template.html

@@ -0,0 +1,286 @@
+<!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>