thatcher 1.0.4

package/src/ui/review-comparison-renderer.js

@@ -0,0 +1,58 @@
+import { statusLabel } from '@/ui/renderer.js';
+import { page } from '@/ui/layout.js';
+
+function reviewSummaryPanel(review, highlights, side) {
+  const total = highlights.length;
+  const resolved = highlights.filter(h => h.status === 'resolved').length;
+  const sts = review.status ? statusLabel(review.status) : '';
+  return `<div class="p-4 bg-gray-50 border-b border-gray-200"><div class="flex items-center justify-between mb-2"><span class="font-medium text-sm">${review.name || 'Untitled'}</span>${sts}</div><div class="grid grid-cols-3 gap-2 text-xs"><div class="text-center"><div class="font-bold text-lg">${total}</div><div class="text-gray-500">Highlights</div></div><div class="text-center"><div class="font-bold text-lg text-green-600">${resolved}</div><div class="text-gray-500">Resolved</div></div><div class="text-center"><div class="font-bold text-lg text-red-600">${total - resolved}</div><div class="text-gray-500">Open</div></div></div></div>`;
+}
+
+function highlightDiffRow(leftH, rightH, idx) {
+  const renderSide = (h) => {
+    if (!h) return '<td class="p-2 bg-gray-50 text-center text-xs text-gray-400">-</td>';
+    const colors = { resolved: '#22c55e', partial_resolved: '#f59e0b' };
+    const color = colors[h.status] || '#ef4444';
+    return `<td class="p-2 border-b border-gray-50"><div class="flex items-center gap-1"><span style="width:6px;height:6px;border-radius:50%;background:${color};display:inline-block"></span><span class="text-xs">${h.text || h.content || 'Area'}</span></div><div class="text-xs text-gray-400">p.${h.page_number || '?'}</div></td>`;
+  };
+  const match = leftH && rightH && leftH.text === rightH?.text ? 'bg-green-50' : leftH && rightH ? 'bg-yellow-50' : 'bg-red-50';
+  return `<tr class="${match}"><td class="p-2 text-xs text-gray-400 text-center border-b border-gray-100">${idx + 1}</td>${renderSide(leftH)}${renderSide(rightH)}<td class="p-2 text-xs text-center border-b border-gray-100">${leftH && rightH ? (leftH.status === rightH.status ? '<span class="text-green-600">Same</span>' : '<span class="text-yellow-600">Changed</span>') : '<span class="text-red-600">Missing</span>'}</td></tr>`;
+}
+
+function diffStats(leftHighlights, rightHighlights) {
+  const leftTexts = new Set(leftHighlights.map(h => h.text || ''));
+  const rightTexts = new Set(rightHighlights.map(h => h.text || ''));
+  const common = [...leftTexts].filter(t => rightTexts.has(t)).length;
+  const onlyLeft = leftHighlights.length - common;
+  const onlyRight = rightHighlights.length - common;
+  return { common, onlyLeft, onlyRight };
+}
+
+export function renderReviewComparison(user, leftReview, rightReview, leftHighlights, rightHighlights) {
+  const stats = diffStats(leftHighlights, rightHighlights);
+  const maxLen = Math.max(leftHighlights.length, rightHighlights.length);
+  const rows = Array.from({ length: maxLen }, (_, i) =>
+    highlightDiffRow(leftHighlights[i], rightHighlights[i], i)
+  ).join('');
+
+  const diffSummary = `<div class="grid grid-cols-3 gap-4 mb-6"><div class="card-clean"><div class="card-clean-body" style=""><div class="text-lg font-bold text-green-600">${stats.common}</div><div class="text-xs text-gray-500">Matching</div></div></div><div class="card-clean"><div class="card-clean-body" style=""><div class="text-lg font-bold text-blue-600">${stats.onlyLeft}</div><div class="text-xs text-gray-500">Only in Left</div></div></div><div class="card-clean"><div class="card-clean-body" style=""><div class="text-lg font-bold text-purple-600">${stats.onlyRight}</div><div class="text-xs text-gray-500">Only in Right</div></div></div></div>`;
+
+  const comparisonTable = `<div class="card-clean" style="overflow-x:auto"><div class="card-clean-body" style="padding:0rem"><div class="grid grid-cols-2 gap-0"><div class="border-r border-gray-200">${reviewSummaryPanel(leftReview, leftHighlights, 'left')}</div><div>${reviewSummaryPanel(rightReview, rightHighlights, 'right')}</div></div><table class="data-table"><thead class="bg-gray-50"><tr><th class="text-center w-12">#</th><th>${leftReview.name || 'Left Review'}</th><th>${rightReview.name || 'Right Review'}</th><th class="text-center w-20">Status</th></tr></thead><tbody>${rows || '<tr><td colspan="4" class="text-center py-8 text-gray-400">No highlights to compare</td></tr>'}</tbody></table></div></div>`;
+
+  const content = `<div class="flex justify-between items-center mb-6"><h1 class="text-2xl font-bold">Review Comparison</h1><a href="/reviews" class="btn btn-ghost btn-sm">Back to Reviews</a></div>${diffSummary}${comparisonTable}`;
+
+  return page(user, 'Review Comparison | Moonlanding', [
+    { href: '/', label: 'Dashboard' },
+    { href: '/reviews', label: 'Reviews' },
+    { label: 'Comparison' }
+  ], content);
+}
+
+export function renderComparisonPicker(user, reviews) {
+  const reviewOptions = reviews.map(r => `<option value="${r.id}">${r.name || r.title || 'Untitled'} ${r.status ? '(' + r.status + ')' : ''}</option>`).join('');
+  const content = `<div class="flex justify-between items-center mb-6"><h1 class="text-2xl font-bold">Compare Reviews</h1><a href="/reviews" class="btn btn-ghost btn-sm">Back to Reviews</a></div><div class="card-clean" style="margin:autorem"><div class="card-clean-body"><p class="text-sm text-gray-500 mb-4">Select two reviews to compare their highlights side by side.</p><div class="form-group mb-4"><label class="text-sm font-medium block mb-1" for="left-review">Left Review</label><select id="left-review" class="select select-bordered w-full">${reviewOptions}</select></div><div class="form-group mb-4"><label class="text-sm font-medium block mb-1" for="right-review">Right Review</label><select id="right-review" class="select select-bordered w-full">${reviewOptions}</select></div><button class="btn btn-primary w-full" data-action="startComparison">Compare</button></div></div>`;
+
+  const script = `window.startComparison=function(){const l=document.getElementById('left-review')?.value;const r=document.getElementById('right-review')?.value;if(!l||!r)return alert('Select both reviews');if(l===r)return alert('Select different reviews');window.location='/reviews/compare?left='+l+'&right='+r}`;
+
+  return page(user, 'Compare Reviews | Moonlanding', [{ href: '/', label: 'Dashboard' }, { href: '/reviews', label: 'Reviews' }, { label: 'Compare' }], content, [script]);
+}

package/src/ui/review-detail-panels.js

@@ -0,0 +1,71 @@
+import { esc } from '@/ui/render-helpers.js';
+
+export function highlightRow(h) {
+  const resolved = h.resolved || h.status === 'resolved';
+  const badge = resolved
+    ? '<span class="pill pill-success">Resolved</span>'
+    : '<span class="pill pill-warning">Open</span>';
+  const rowStyle = resolved ? 'opacity:0.6' : '';
+  const textStyle = resolved ? 'text-decoration:line-through;color:var(--color-text-muted)' : 'font-weight:500';
+
+  let flags = [];
+  let tags = [];
+  try { flags = JSON.parse(h.flags || '[]') || []; } catch {}
+  try { tags = JSON.parse(h.tags || '[]') || []; } catch {}
+  const isFlagged = flags.includes('flagged');
+
+  const flagBtn = `<button data-action="toggleFlag" data-args='["${esc(h.id)}","${isFlagged}"]' title="${isFlagged ? 'Unflag' : 'Flag'}" style="background:none;border:none;cursor:pointer;padding:2px 4px;font-size:15px;line-height:1;color:${isFlagged ? '#f59e0b' : 'var(--color-text-muted)'}">${isFlagged ? '⚑' : '⚐'}</button>`;
+  const tagPills = tags.map(t => `<span style="display:inline-flex;align-items:center;gap:3px;background:#eff6ff;color:#1d4ed8;font-size:11px;padding:1px 6px;border-radius:9999px;font-weight:500">${esc(t)}<button data-action="removeTag" data-args='["${esc(h.id)}","${esc(t)}"]' style="background:none;border:none;cursor:pointer;padding:0;margin-left:2px;font-size:11px;color:#6b7280;line-height:1">&times;</button></span>`).join(' ');
+  const addTagBtn = `<button data-action="openAddTag" data-args='["${esc(h.id)}"]' style="background:none;border:none;cursor:pointer;font-size:11px;color:var(--color-text-muted);padding:1px 5px;border:1px dashed var(--color-border,#e5e7eb);border-radius:9999px">+tag</button>`;
+  const tagsCell = `<div style="display:flex;flex-wrap:wrap;gap:3px;align-items:center;min-width:80px">${tagPills}${addTagBtn}</div>`;
+
+  return `<tr style="${rowStyle}" data-highlight-id="${esc(h.id)}" data-flagged="${isFlagged}" data-section-id="${esc(h.section_id||'')}">
+    <td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;${textStyle}">${flagBtn}${esc(h.text||h.content||h.comment||'Highlight')}</td>
+    <td style="font-size:13px;color:var(--color-text-muted);white-space:nowrap">p.${h.page||h.page_number||'-'}</td>
+    <td>${badge}</td>
+    <td>${tagsCell}</td>
+    <td style="font-size:13px;color:var(--color-text-muted)">${esc(h.created_by_name||h.user_id||'-')}</td>
+    <td style="text-align:right">${!resolved ? `<button data-action="resolveHighlight" data-args='["${esc(h.id)}"]' class="btn-primary-clean" style="font-size:12px;padding:4px 12px;min-height:28px">Resolve</button>` : '<span style="font-size:12px;color:var(--color-text-muted)">Done</span>'}</td>
+  </tr>`;
+}
+
+export function collaboratorRow(c) {
+  const initials = (c.user_name || c.email || '?').charAt(0).toUpperCase();
+  const colors = ['#1565c0','#2e7d32','#6a1b9a','#c62828','#e65100','#00695c'];
+  const bg = colors[(c.user_name || c.email || '').charCodeAt(0) % colors.length] || colors[0];
+  return `<tr>
+    <td>
+      <div style="display:flex;align-items:center;gap:8px">
+        <div style="width:28px;height:28px;border-radius:50%;background:${bg};color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0">${initials}</div>
+        <span style="font-size:14px">${esc(c.user_name||c.email||c.user_id||'-')}</span>
+      </div>
+    </td>
+    <td><span class="pill pill-info" style="text-transform:capitalize">${esc(c.role||'viewer')}</span></td>
+    <td style="font-size:13px;color:var(--color-text-muted)">${c.expires_at?new Date(typeof c.expires_at==='number'?c.expires_at*1000:c.expires_at).toLocaleDateString():'-'}</td>
+    <td style="text-align:right"><button data-action="removeCollaborator" data-args='["${esc(c.id)}"]' class="btn-danger-clean" style="font-size:12px;padding:4px 10px;min-height:28px">Remove</button></td>
+  </tr>`;
+}
+
+export function addCollaboratorDialog(reviewId) {
+  return `<div id="collab-dialog" class="dialog-overlay" style="display:none" data-dialog-close-overlay="true">
+    <div class="dialog-panel" style="max-width:400px;width:100%">
+      <h3 style="font-size:16px;font-weight:600;color:var(--color-text);margin:0 0 16px">Add Collaborator</h3>
+      <div class="form-field" style="margin-bottom:12px">
+        <label class="form-label">Email</label>
+        <input type="email" id="collab-email" class="form-input" placeholder="collaborator@example.com"/>
+      </div>
+      <div class="form-field" style="margin-bottom:16px">
+        <label class="form-label">Role</label>
+        <select id="collab-role" class="form-input">
+          <option value="viewer">Viewer</option>
+          <option value="commenter">Commenter</option>
+          <option value="editor">Editor</option>
+        </select>
+      </div>
+      <div class="form-actions" style="padding-top:0;margin-top:0">
+        <button data-dialog-close="collab-dialog" class="btn-ghost-clean" style="font-size:13px;padding:8px 16px">Cancel</button>
+        <button data-action="addCollaborator" data-args='["${esc(reviewId)}"]' class="btn-primary-clean" style="font-size:13px;padding:8px 16px">Add</button>
+      </div>
+    </div>
+  </div>`;
+}

package/src/ui/review-detail-renderer.js

@@ -0,0 +1,170 @@
+import { page } from '@/ui/layout.js';
+import { reviewZoneNav } from '@/ui/review-zone-nav.js';
+export { reviewZoneNav };
+import { canEdit } from '@/ui/permissions-ui.js';
+import { esc, statusBadge, TOAST_SCRIPT } from '@/ui/render-helpers.js';
+import { reviewDetailScript } from '@/ui/review-detail-script.js';
+import { highlightRow, collaboratorRow, addCollaboratorDialog } from '@/ui/review-detail-panels.js';
+import { tenderPanelHtml, tenderDialog, linksPanelHtml, linkDialog, sectionsPanelHtml, compareDialogHtml } from '@/ui/review-detail-panels-extra.js';
+import { retryHighlightDialog, switchTemplateButton } from '@/ui/engagement-dialogs.js';
+import { reviewTemplateChoiceDialog } from '@/ui/review-dialogs.js';
+import { SPACING, renderCard, renderTable, renderButton, renderInfoGrid } from '@/ui/spacing-system.js';
+
+function fmtDate(ts) {
+  if (!ts) return '-';
+  const n = Number(ts);
+  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleDateString();
+  try { return new Date(ts).toLocaleDateString(); } catch { return String(ts); }
+}
+
+export function renderReviewDetail(user, review, highlights = [], collaborators = [], checklists = [], sections = [], tenders = []) {
+  const r = review || {};
+  const canEditReview = canEdit(user, 'review');
+  const totalH = highlights.length;
+  const resolvedH = highlights.filter(h => h.resolved || h.status === 'resolved').length;
+  const openH = totalH - resolvedH;
+  const pct = totalH > 0 ? Math.round((resolvedH / totalH) * 100) : 0;
+
+  let parsedLinks = [];
+  try { parsedLinks = JSON.parse(r.links || '[]') || []; } catch {}
+
+  const TABS = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'highlights', label: 'Highlights', count: totalH },
+    { id: 'collaborators', label: 'Collaborators', count: collaborators.length },
+    { id: 'checklists', label: 'Checklists', count: checklists.length },
+    { id: 'sections', label: 'Sections', count: sections.length },
+    { id: 'tender', label: 'Tender', count: tenders.length > 0 ? tenders.length : undefined },
+    { id: 'links', label: 'Links', count: parsedLinks.length > 0 ? parsedLinks.length : undefined },
+    { id: 'history', label: 'History' },
+  ];
+
+  const tabBar = `<nav class="tab-bar" style="margin-bottom:${SPACING.lg}">
+    ${TABS.map((t, i) => `<button data-action="switchTab" data-args='["${t.id}"]' id="rvtab-${t.id}" class="tab-btn${i === 0 ? ' active' : ''}" aria-selected="${i === 0}">${t.label}${t.count !== undefined ? `<span class="tab-count">${t.count}</span>` : ''}</button>`).join('')}
+  </nav>`;
+
+  const progressSection = totalH > 0
+    ? `<div style="margin-top:${SPACING.md}">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:${SPACING.sm}">
+          <span style="font-size:13px;font-weight:600;color:var(--color-text-muted)">Resolution</span>
+          <span style="font-size:13px;color:var(--color-text-light)">${resolvedH}/${totalH} resolved</span>
+        </div>
+        <div class="resolution-bar"><div class="resolution-bar-segment resolution-bar-resolved" style="width:${pct}%"></div></div>
+      </div>`
+    : `<div style="margin-top:${SPACING.md};font-size:13px;color:var(--color-text-light)">No highlights yet</div>`;
+
+  const detailsCard = renderCard(`<div class="card-header">Review Details</div>${renderInfoGrid([
+    ['Name', esc(r.name || r.title || '-')],
+    ['Status', statusBadge(r.status)],
+    ['Type', esc(r.review_type || r.type || '-')],
+    ['Financial Year', esc(r.financial_year || '-')],
+    ['Deadline', fmtDate(r.deadline)],
+    ['Created', fmtDate(r.created_at)],
+  ])}${progressSection}`, { padding: SPACING.md });
+
+  const actions = [
+    renderButton('Open PDF', { variant: 'primary', size: 'sm', href: `/review/${esc(r.id)}/pdf` }),
+    renderButton('Compare', { variant: 'ghost', size: 'sm', action: 'openDialog', args: ['pdf-compare-dialog'] }),
+    renderButton('Discussions', { variant: 'ghost', size: 'sm', href: `/review/${esc(r.id)}/highlights` }),
+    renderButton('Sections', { variant: 'ghost', size: 'sm', href: `/review/${esc(r.id)}/sections` }),
+    renderButton('Resolution', { variant: 'ghost', size: 'sm', href: `/review/${esc(r.id)}/resolution` }),
+    ...(canEditReview ? [
+      renderButton('Edit', { variant: 'outline', size: 'sm', href: `/review/${esc(r.id)}/edit` }),
+      renderButton('Export PDF', { variant: 'ghost', size: 'sm', action: 'exportPdf', args: [`${esc(r.id)}`] }),
+      renderButton('Notify', { variant: 'ghost', size: 'sm', action: 'openDialog', args: ['notify-collab-dialog'] }),
+    ] : []),
+    ...(resolvedH < totalH && canEditReview ? [renderButton('Bulk Resolve', { variant: 'success', size: 'sm', action: 'bulkResolve', args: [`${esc(r.id)}`] })] : []),
+    ...(canEditReview ? [renderButton('Retry Highlight', { variant: 'ghost', size: 'sm', action: 'openRetryHighlight' })] : []),
+    ...(canEditReview ? [switchTemplateButton(esc(r.id))] : []),
+  ];
+
+  function tablePanel(id, heading, countBadge, extraBtn, cols, bodyRows, emptyMsg) {
+    const header = `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:${SPACING.md}">
+      <div><span style="font-size:15px;font-weight:600;color:var(--color-text)">${heading}</span>${countBadge ? `<span style="font-size:13px;color:var(--color-text-muted);margin-left:8px">(${countBadge})</span>` : ''}</div>
+      <div style="display:flex;align-items:center;gap:8px">${extraBtn || ''}</div>
+    </div>`;
+    return `<div id="rvpanel-${id}" class="rv-panel" style="display:none">${header}${renderTable(cols,
+      bodyRows || `<tr><td colspan="${cols.length}" style="text-align:center;padding:${SPACING.xl} 0;color:var(--color-text-muted)">${emptyMsg}</td></tr>`,
+      SPACING.md)}</div>`;
+  }
+
+  const flaggedCount = highlights.filter(h => { try { return (JSON.parse(h.flags||'[]')||[]).includes('flagged'); } catch { return false; } }).length;
+  const hRows = highlights.map(h => highlightRow(h)).join('');
+  const highlightsPanel = tablePanel('highlights', 'Highlights', totalH,
+    `<span style="font-size:13px;color:var(--color-text-muted)">${resolvedH} resolved, ${openH} open</span><button id="btn-filter-flagged" data-action="filterByFlag" style="font-size:12px;padding:4px 10px;border:1px solid ${flaggedCount > 0 ? '#f59e0b' : 'var(--color-border,#e5e7eb)'};background:${flaggedCount > 0 ? '#fffbeb' : 'transparent'};color:${flaggedCount > 0 ? '#92400e' : 'var(--color-text-muted)'};border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:4px">⚑ Flagged${flaggedCount > 0 ? ` (${flaggedCount})` : ''}</button>${renderButton('Open PDF', { variant: 'primary', size: 'sm', href: `/review/${esc(r.id)}/pdf` })}`,
+    ['Highlight', 'Page', 'Status', 'Tags', 'By', 'Actions'], hRows,
+    `<a href="/review/${esc(r.id)}/pdf" style="color:var(--color-primary);font-weight:500;text-decoration:none">Open the PDF</a> to start adding highlights`);
+
+  const collabRows = collaborators.map(c => collaboratorRow(c)).join('');
+  const collabPanel = tablePanel('collaborators', 'Collaborators', collaborators.length,
+    canEditReview ? renderButton('+ Add Collaborator', { variant: 'primary', size: 'sm', action: 'openDialog', args: ['collab-dialog'] }) : '',
+    ['User', 'Role', 'Expires', 'Actions'], collabRows, 'No collaborators added yet');
+
+  const clRows = checklists.map(cl => {
+    const clPct = cl.total_items > 0 ? Math.round((cl.completed_items || 0) / cl.total_items * 100) : 0;
+    return `<tr><td style="font-weight:500">${esc(cl.name || '-')}</td><td style="font-size:13px;color:var(--color-text-muted)">${cl.total_items || 0} items</td><td><div style="display:flex;align-items:center;gap:8px"><div class="resolution-bar" style="width:80px"><div class="resolution-bar-segment resolution-bar-resolved" style="width:${clPct}%"></div></div><span style="font-size:12px;color:var(--color-text-muted)">${cl.completed_items || 0}/${cl.total_items || 0}</span></div></td><td><a href="/checklist/${esc(cl.id)}" class="btn-ghost-clean" style="font-size:13px;padding:4px 10px">View</a></td></tr>`;
+  }).join('');
+  const checklistPanel = tablePanel('checklists', 'Checklists', checklists.length,
+    canEditReview ? renderButton('+ Add from Template', { variant: 'primary', size: 'sm', action: 'openChecklistPicker', args: [`${esc(r.id)}`] }) : '',
+    ['Name', 'Items', 'Progress', ''], clRows, 'No checklists attached');
+
+  const checklistPickerDialog = `<div id="checklist-picker-dialog" class="dialog-backdrop" style="display:none" data-dialog-close="checklist-picker-dialog">
+    <div class="dialog" style="max-width:520px" onclick="event.stopPropagation()">
+      <div class="dialog-header"><h2 style="font-size:17px;font-weight:600;margin:0">Attach Checklist</h2><button class="dialog-close" data-dialog-close="checklist-picker-dialog" aria-label="Close">&times;</button></div>
+      <div class="dialog-body" style="padding:16px 20px">
+        <label style="font-size:13px;font-weight:500;color:var(--color-text-muted);display:block;margin-bottom:6px">Choose a template</label>
+        <select id="checklist-picker-template" class="input" style="width:100%;margin-bottom:12px"><option value="">Loading templates...</option></select>
+        <label style="font-size:13px;font-weight:500;color:var(--color-text-muted);display:block;margin-bottom:6px">Checklist name</label>
+        <input id="checklist-picker-name" type="text" class="input" style="width:100%" placeholder="Leave blank to use template name"/>
+      </div>
+      <div class="dialog-footer" style="display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--color-border,#e5e7eb)">
+        <button class="btn-ghost-clean" data-dialog-close="checklist-picker-dialog">Cancel</button>
+        <button class="btn-primary-clean" id="checklist-picker-save" data-action="saveChecklistFromTemplate" data-args='["${esc(r.id)}"]'>Attach</button>
+      </div>
+    </div>
+  </div>`;
+
+  const historyPanel = `<div id="rvpanel-history" class="rv-panel" style="display:none">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:${SPACING.md}">
+      <span style="font-size:15px;font-weight:600;color:var(--color-text)">History</span>
+      <button class="btn-ghost-clean" style="font-size:13px" data-action="loadHistory" data-args='["${esc(r.id)}"]'>Refresh</button>
+    </div>
+    <div id="history-list" style="display:flex;flex-direction:column;gap:8px"><div style="font-size:13px;color:var(--color-text-muted);padding:24px 0;text-align:center">Loading history...</div></div>
+  </div>`;
+
+  const metaTags = [statusBadge(r.status),
+    r.review_type ? `<span class="pill pill-neutral" style="text-transform:uppercase;font-size:11px;letter-spacing:0.5px">${esc(r.review_type)}</span>` : '',
+    r.financial_year ? `<span style="font-size:13px;color:var(--color-text-muted)">FY ${esc(r.financial_year)}</span>` : '',
+    pct === 100 ? `<span class="pill pill-success">Complete</span>` : '',
+  ].filter(Boolean).join(' ');
+
+  const bc = [{ href: '/', label: 'Home' }, { href: '/review', label: 'Reviews' }, { href: `/review/${r.id}`, label: r.name || 'Review' }, { label: 'Overview' }];
+  const pageHeader = `<div class="page-header" style="align-items:flex-start"><div><h1 class="page-title">${esc(r.name || r.title || 'Review')}</h1><div class="review-meta-row">${metaTags}</div></div><div style="display:flex;flex-wrap:wrap;gap:8px">${actions.join('')}</div></div>`;
+
+  const overviewPanel = `<div id="rvpanel-overview" class="rv-panel">${detailsCard}</div>`;
+  const sectionsPanel = sectionsPanelHtml(r.id, sections, SPACING, renderTable, renderButton);
+  const notifyDialog = `<div id="notify-collab-dialog" class="dialog-backdrop" style="display:none" data-dialog-close="notify-collab-dialog">
+    <div class="dialog" style="max-width:480px" onclick="event.stopPropagation()">
+      <div class="dialog-header"><h2 style="font-size:17px;font-weight:600;margin:0">Notify Collaborators</h2><button class="dialog-close" data-dialog-close="notify-collab-dialog">&times;</button></div>
+      <div class="dialog-body" style="padding:16px 20px">
+        <label style="font-size:13px;font-weight:500;color:var(--color-text-muted);display:block;margin-bottom:6px">Recipients</label>
+        <div id="notify-recipients" style="display:flex;flex-direction:column;gap:6px;margin-bottom:12px;max-height:160px;overflow-y:auto">${collaborators.map(c => `<label style="display:flex;align-items:center;gap:8px;font-size:13px"><input type="checkbox" name="notify_user" value="${esc(c.user_id||c.id)}" checked/> ${esc(c.user_name||c.name||c.email||c.user_id||'-')}</label>`).join('') || '<span style="font-size:13px;color:var(--color-text-muted)">No collaborators added yet</span>'}</div>
+        <label style="font-size:13px;font-weight:500;color:var(--color-text-muted);display:block;margin-bottom:6px">Message</label>
+        <textarea id="notify-message" rows="4" class="input" style="width:100%;resize:vertical" placeholder="Enter your message..."></textarea>
+      </div>
+      <div class="dialog-footer" style="display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--color-border,#e5e7eb)">
+        <button class="btn-ghost-clean" data-dialog-close="notify-collab-dialog">Cancel</button>
+        <button class="btn-primary-clean" id="notify-send-btn" onclick="sendCollabNotify('${esc(r.id)}')">Send Notification</button>
+      </div>
+    </div>
+  </div>`;
+
+  const notifyScript = `<script>
+async function sendCollabNotify(reviewId){var msg=document.getElementById('notify-message').value.trim();if(!msg){showToast('Enter a message','error');return;}var checked=Array.from(document.querySelectorAll('#notify-recipients input[name="notify_user"]:checked')).map(function(i){return i.value;});if(!checked.length){showToast('Select at least one recipient','error');return;}var btn=document.getElementById('notify-send-btn');if(btn){btn.disabled=true;btn.textContent='Sending...';}try{var r=await fetch('/api/mwr/review/'+reviewId+'/notify',{method:'POST',headers:{'Content-Type':'application/json'},credentials:'include',body:JSON.stringify({user_ids:checked,message:msg})});if(r.ok){showToast('Notification sent','success');document.getElementById('notify-collab-dialog').style.display='none';document.getElementById('notify-message').value='';}else{var d=await r.json();showToast(d.error||'Failed','error');}}catch(e){showToast('Error: '+e.message,'error');}finally{if(btn){btn.disabled=false;btn.textContent='Send Notification';}}}
+</script>`;
+
+  const content = `${pageHeader}${reviewZoneNav(r.id, 'overview')}${tabBar}
+    <div>${overviewPanel}${highlightsPanel}${collabPanel}${checklistPanel}${sectionsPanel}${tenderPanelHtml(r.id, tenders, canEditReview, tablePanel)}${linksPanelHtml(r.id, parsedLinks, canEditReview, tablePanel)}${historyPanel}${addCollaboratorDialog(r.id)}${checklistPickerDialog}${tenderDialog(r.id)}${linkDialog(r.id)}${compareDialogHtml(r.id)}${notifyDialog}${notifyScript}${retryHighlightDialog(esc(r.id))}${reviewTemplateChoiceDialog()}</div>`;
+
+  return page(user, `${esc(r.name || 'Review')} | Moonlanding`, bc, content, [reviewDetailScript(r.id)]);
+}

package/src/ui/review-detail-script.js

@@ -0,0 +1,95 @@
+import { esc } from '@/ui/render-helpers.js';
+import { TOAST_SCRIPT } from '@/ui/render-helpers.js';
+import { reviewHighlightActionsScript } from '@/ui/review-highlight-actions-script.js';
+
+export function reviewDetailScript(reviewId) {
+  const id = esc(reviewId || '');
+  return `${TOAST_SCRIPT}
+function switchTab(tab){
+  document.querySelectorAll('.rv-panel').forEach(function(p){p.style.display='none'});
+  var panel=document.getElementById('rvpanel-'+tab);if(panel)panel.style.display='';
+  document.querySelectorAll('[id^="rvtab-"]').forEach(function(b){b.classList.remove('active')});
+  var btn=document.getElementById('rvtab-'+tab);if(btn)btn.classList.add('active');
+  if(tab==='history')loadHistory('${id}');
+}
+async function resolveHighlight(id){if(!confirm('Mark this highlight as resolved?'))return;try{var r=await fetch('/api/mwr/review/${id}/highlights/'+id,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({resolved:true,status:'resolved'})});if(r.ok){showToast('Resolved','success');setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
+async function bulkResolve(reviewId){if(!confirm('Resolve all highlights?'))return;try{var r=await fetch('/api/mwr/review/'+reviewId+'/highlights/bulk-resolve',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({resolve_all:true})});if(r.ok){showToast('All resolved','success');setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
+async function exportPdf(reviewId){showToast('Generating PDF...','info');try{var r=await fetch('/api/mwr/review/'+reviewId+'/export-pdf',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({})});if(r.ok){var b=await r.blob();var a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='review-'+reviewId+'.pdf';a.click();showToast('PDF downloaded','success')}else showToast('Export failed','error')}catch(e){showToast('Error','error')}}
+async function addCollaborator(reviewId){var email=document.getElementById('collab-email').value.trim();var role=document.getElementById('collab-role').value;if(!email){showToast('Email required','error');return}try{var r=await fetch('/api/mwr/review/'+reviewId+'/collaborators',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:email,role:role})});if(r.ok){showToast('Collaborator added','success');document.getElementById('collab-dialog').style.display='none';setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
+async function removeCollaborator(collabId){if(!confirm('Remove this collaborator?'))return;try{var r=await fetch('/api/mwr/review/${id}/collaborators/'+collabId,{method:'DELETE'});if(r.ok){showToast('Removed','success');setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
+async function openChecklistPicker(reviewId){
+  var dlg=document.getElementById('checklist-picker-dialog');if(!dlg)return;
+  dlg.style.display='flex';
+  var sel=document.getElementById('checklist-picker-template');sel.innerHTML='<option>Loading...</option>';
+  try{
+    var r=await fetch('/api/mwr/checklist-template',{credentials:'include'});var data=await r.json();
+    if(!data.success||!data.templates||!data.templates.length){sel.innerHTML='<option value="">No templates available</option>';return}
+    sel.innerHTML=data.templates.map(function(t){return '<option value="'+t.id+'">'+t.name.replace(/</g,'&lt;')+' ('+t.item_count+' items)</option>'}).join('');
+  }catch(e){sel.innerHTML='<option value="">Failed to load templates</option>'}
+}
+async function saveChecklistFromTemplate(reviewId){
+  var sel=document.getElementById('checklist-picker-template');var nameInput=document.getElementById('checklist-picker-name');
+  var tplId=sel&&sel.value;if(!tplId){showToast('Pick a template','error');return}
+  var body={template_id:tplId};var name=(nameInput&&nameInput.value||'').trim();if(name)body.name=name;
+  var btn=document.getElementById('checklist-picker-save');if(btn)btn.disabled=true;
+  try{
+    var r=await fetch('/api/mwr/review/'+reviewId+'/checklists',{method:'POST',headers:{'Content-Type':'application/json'},credentials:'include',body:JSON.stringify(body)});
+    var data=await r.json();
+    if(r.ok&&data.success){showToast('Checklist attached','success');document.getElementById('checklist-picker-dialog').style.display='none';setTimeout(function(){location.reload()},500)}
+    else showToast('Failed: '+(data.error||'unknown'),'error');
+  }catch(e){showToast('Network error','error')}
+  finally{if(btn)btn.disabled=false}
+}
+function openAddTender(){
+  var dlg=document.getElementById('tender-dialog');if(!dlg)return;
+  ['tender-id','tender-deadline','tender-announcement','tender-contact-person','tender-contact-number','tender-contact-email','tender-price','tender-winning-price'].forEach(function(f){document.getElementById(f).value='';});
+  document.getElementById('tender-dialog-title').textContent='Add Tender';
+  document.getElementById('tender-status').value='open';
+  dlg.style.display='flex';
+}
+function openEditTender(tenderId,status,deadline,announcement,contactPerson,contactNumber,contactEmail,price){
+  var dlg=document.getElementById('tender-dialog');if(!dlg)return;
+  document.getElementById('tender-id').value=tenderId;
+  document.getElementById('tender-dialog-title').textContent='Edit Tender';
+  document.getElementById('tender-status').value=status||'open';
+  document.getElementById('tender-deadline').value=deadline||'';
+  document.getElementById('tender-announcement').value=announcement||'';
+  document.getElementById('tender-contact-person').value=contactPerson||'';
+  document.getElementById('tender-contact-number').value=contactNumber||'';
+  document.getElementById('tender-contact-email').value=contactEmail||'';
+  document.getElementById('tender-price').value=price||'';
+  dlg.style.display='flex';
+}
+async function saveTender(reviewId){
+  var tenderId=document.getElementById('tender-id').value.trim();
+  var deadline=document.getElementById('tender-deadline').value;
+  if(!deadline){showToast('Deadline required','error');return}
+  var body={status:document.getElementById('tender-status').value,deadline:deadline,announcement_date:document.getElementById('tender-announcement').value||null,contact_person:document.getElementById('tender-contact-person').value||null,contact_number:document.getElementById('tender-contact-number').value||null,contact_email:document.getElementById('tender-contact-email').value||null,price:document.getElementById('tender-price').value?Number(document.getElementById('tender-price').value):null,winning_price:document.getElementById('tender-winning-price').value?Number(document.getElementById('tender-winning-price').value):null};
+  var btn=document.getElementById('tender-save-btn');if(btn)btn.disabled=true;
+  try{
+    var url=tenderId?'/api/mwr/review/'+reviewId+'/tender/'+tenderId:'/api/mwr/review/'+reviewId+'/tender';
+    var r=await fetch(url,{method:tenderId?'PATCH':'POST',headers:{'Content-Type':'application/json'},credentials:'include',body:JSON.stringify(body)});
+    var data=await r.json();
+    if(r.ok&&data.success){showToast(tenderId?'Tender updated':'Tender added','success');document.getElementById('tender-dialog').style.display='none';setTimeout(function(){location.reload()},500)}
+    else showToast('Failed: '+(data.error||'unknown'),'error');
+  }catch(e){showToast('Network error','error')}
+  finally{if(btn)btn.disabled=false}
+}
+async function deleteTender(tenderId){if(!confirm('Delete this tender?'))return;try{var r=await fetch('/api/mwr/review/${id}/tender/'+tenderId,{method:'DELETE',credentials:'include'});var data=await r.json();if(r.ok&&data.success){showToast('Tender deleted','success');setTimeout(function(){location.reload()},500)}else showToast('Failed: '+(data.error||'unknown'),'error');}catch(e){showToast('Error','error')}}
+function openAddLink(){document.getElementById('link-dialog').style.display='flex';document.getElementById('link-label').value='';document.getElementById('link-url').value='';}
+async function saveLink(reviewId){var url=document.getElementById('link-url').value.trim();var label=document.getElementById('link-label').value.trim();if(!url){showToast('URL required','error');return}try{var r=await fetch('/api/mwr/review/'+reviewId+'/links',{method:'POST',headers:{'Content-Type':'application/json'},credentials:'include',body:JSON.stringify({url:url,label:label||url,type:'url'})});var data=await r.json();if(r.ok&&data.success){showToast('Link added','success');document.getElementById('link-dialog').style.display='none';setTimeout(function(){location.reload()},500)}else showToast('Failed: '+(data.error||'unknown'),'error');}catch(e){showToast('Network error','error')}}
+async function removeLink(reviewId,idx){if(!confirm('Remove this link?'))return;try{var r=await fetch('/api/mwr/review/'+reviewId+'/links/'+idx,{method:'DELETE',credentials:'include'});var data=await r.json();if(r.ok&&data.success){showToast('Link removed','success');setTimeout(function(){location.reload()},500)}else showToast('Failed: '+(data.error||'unknown'),'error');}catch(e){showToast('Error','error')}}
+async function loadHistory(reviewId){
+  var list=document.getElementById('history-list');
+  if(!list)return;
+  list.innerHTML='<div style="font-size:13px;color:var(--color-text-muted);padding:24px 0;text-align:center">Loading...</div>';
+  try{
+    var r=await fetch('/api/audit/logs?entity_type=review&entity_id='+reviewId,{credentials:'include'});
+    var data=await r.json();
+    var logs=(data.logs||data.data||[]);
+    if(!logs.length){list.innerHTML='<div style="font-size:13px;color:var(--color-text-muted);padding:24px 0;text-align:center">No history found</div>';return}
+    list.innerHTML=logs.map(function(log){var ts=log.timestamp?new Date(log.timestamp).toLocaleString():'-';var op=log.operation||log.action||'-';var uid=log.user_id?'User '+log.user_id:'System';var details='';if(log.details&&typeof log.details==='object'){var keys=Object.keys(log.details).slice(0,3);details=keys.map(function(k){return k+': '+String(log.details[k]).slice(0,40)}).join(', ');}return '<div style="display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--color-border,#e5e7eb)"><div style="width:8px;height:8px;border-radius:50%;background:var(--color-primary,#2563eb);margin-top:5px;flex-shrink:0"></div><div style="flex:1;min-width:0"><div style="display:flex;justify-content:space-between;gap:8px"><span style="font-size:13px;font-weight:500;color:var(--color-text)">'+op.replace(/_/g,' ')+'</span><span style="font-size:12px;color:var(--color-text-muted);white-space:nowrap">'+ts+'</span></div><div style="font-size:12px;color:var(--color-text-muted);margin-top:2px">'+uid+(details?' &mdash; '+details:'')+'</div></div></div>';}).join('');
+  }catch(e){list.innerHTML='<div style="font-size:13px;color:var(--color-danger,#dc2626);padding:24px 0;text-align:center">Failed to load history</div>'}
+}
+${reviewHighlightActionsScript(reviewId)}`;
+}

package/src/ui/review-mwr-renderer.js

@@ -0,0 +1,113 @@
+import { page } from '@/ui/layout.js';
+import { reviewZoneNav } from '@/ui/review-zone-nav.js';
+import { SPACING, renderCard, renderButton, renderProgress, renderEmptyState, renderStatsRow, renderPageHeader } from '@/ui/spacing-system.js';
+
+const TOAST_SCRIPT = `window.showToast=(m,t='info')=>{let c=document.getElementById('toast-container');if(!c){c=document.createElement('div');c.id='toast-container';c.className='toast-container';c.setAttribute('role','status');c.setAttribute('aria-live','polite');c.setAttribute('aria-atomic','true');document.body.appendChild(c)}const d=document.createElement('div');d.className='toast toast-'+t;d.textContent=m;c.appendChild(d);setTimeout(()=>{d.style.opacity='0';setTimeout(()=>d.remove(),300)},3000)};`;
+
+function fmtDate(ts) {
+  if (!ts) return '-';
+  const n = Number(ts);
+  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleDateString();
+  return String(ts);
+}
+
+function statusBadge(status) {
+  const s = status || 'open';
+  const map = { active: 'pill pill-info', open: 'pill pill-info', in_progress: 'pill pill-info', completed: 'pill pill-success', closed: 'pill pill-success', archived: 'pill pill-neutral' };
+  const cls = map[s] || 'pill pill-warning';
+  return `<span class="${cls}">${s.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}</span>`;
+}
+
+export function renderMwrHome(user, stats) {
+  const { myReviews = [], sharedReviews = [], recentActivity = [], totalReviews = 0, activeReviews = 0, flaggedReviews = 0, overdueReviews = 0 } = stats;
+  const all = [...myReviews, ...sharedReviews];
+  const active = all.filter(r => (r.status || 'open') !== 'archived');
+  const priority = all.filter(r => r.priority || r.starred || r.flagged);
+  const archive = all.filter(r => r.status === 'archived');
+  const history = recentActivity;
+
+  const statsHtml = renderStatsRow([
+    { value: totalReviews, label: 'Total Reviews' },
+    { value: activeReviews, label: 'Active', color: 'var(--color-primary)' },
+    { value: flaggedReviews, label: 'Flagged', color: 'var(--color-warning)' },
+    { value: overdueReviews, label: 'Overdue', color: overdueReviews > 0 ? 'var(--color-danger)' : undefined },
+  ]);
+
+  const tabBar = `<nav class="tab-bar" style="margin-bottom:${SPACING.md}">
+    <button class="tab-btn active" data-tab="active" data-action="switchHomeTab" data-args='["active"]'>Active<span class="tab-count">${active.length}</span></button>
+    <button class="tab-btn" data-tab="priority" data-action="switchHomeTab" data-args='["priority"]'>Priority<span class="tab-count">${priority.length}</span></button>
+    <button class="tab-btn" data-tab="history" data-action="switchHomeTab" data-args='["history"]'>History<span class="tab-count">${history.length}</span></button>
+    <button class="tab-btn" data-tab="archive" data-action="switchHomeTab" data-args='["archive"]'>Archive<span class="tab-count">${archive.length}</span></button>
+  </nav>`;
+
+  function listItem(r) {
+    const star = r.priority || r.starred ? '★' : '☆';
+    const archiveLabel = r.status === 'archived' ? 'Unarchive' : 'Archive';
+    const archiveAct = r.status === 'archived' ? 'unarchive' : 'archive';
+    return `<div class="list-item-row" data-review-id="${r.id}">
+      <button class="row-action row-action-star" data-action="toggleReviewStar" data-args='["${r.id}"]' aria-label="Toggle priority" title="Star/Priority">${star}</button>
+      <span class="list-item-name" data-action="openReview" data-args='["${r.id}"]' style="cursor:pointer;flex:1">${r.name || 'Untitled'}</span>
+      <div class="list-item-meta">${statusBadge(r.status)}<span style="font-size:12px;color:var(--color-text-light)">${fmtDate(r.updated_at || r.created_at)}</span></div>
+      <button class="row-action row-action-flag" data-action="toggleReviewFlag" data-args='["${r.id}"]' aria-label="Flag" title="Flag">⚑</button>
+      <button class="row-action row-action-tag" data-action="openReviewTag" data-args='["${r.id}"]' aria-label="Tag" title="Tag">#</button>
+      <button class="row-action row-action-archive" data-action="toggleReviewArchive" data-args='["${r.id}","${archiveAct}"]' aria-label="${archiveLabel}" title="${archiveLabel}">${r.status === 'archived' ? '↶' : '🗄'}</button>
+      <button class="row-action row-action-open" data-action="openReview" data-args='["${r.id}"]' aria-label="Open" title="Open">↗</button>
+    </div>`;
+  }
+
+  const activeList = active.length ? active.map(listItem).join('') : renderEmptyState('No active reviews');
+  const priorityList = priority.length ? priority.map(listItem).join('') : renderEmptyState('No priority reviews');
+  const archiveList = archive.length ? archive.map(listItem).join('') : renderEmptyState('No archived reviews');
+  const historyList = history.length ? history.slice(0, 50).map(a => `<div class="activity-item-row"><span class="activity-item-date">${fmtDate(a.created_at)}</span><span class="activity-item-desc">${a.description || a.action || '-'}</span></div>`).join('') : renderEmptyState('No recent activity');
+
+  const panels = `<div id="home-panel-active">${activeList}</div><div id="home-panel-priority" style="display:none">${priorityList}</div><div id="home-panel-history" style="display:none">${historyList}</div><div id="home-panel-archive" style="display:none">${archiveList}</div>`;
+
+  const content = `${renderPageHeader('MWR Home', `Welcome back, ${user?.name || 'User'}`)}${statsHtml}${tabBar}${renderCard(panels, { padding: 0 })}`;
+  const script = `${TOAST_SCRIPT}window.switchHomeTab=(key)=>{document.querySelectorAll('.tab-btn[data-tab]').forEach(t=>t.classList.toggle('active',t.dataset.tab===key));document.querySelectorAll('[id^="home-panel-"]').forEach(p=>p.style.display='none');const el=document.getElementById('home-panel-'+key);if(el)el.style.display='block'};window.openReview=(id)=>{location.href='/review/'+id};window.toggleReviewStar=async(id)=>{try{const r=await fetch('/api/mwr/review/star',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_id:id})});if(r.ok)location.reload();else window.showToast('Star failed','error')}catch(e){window.showToast('Star failed','error')}};window.toggleReviewFlag=async(id)=>{try{const r=await fetch('/api/mwr/review/flag',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_id:id})});if(r.ok)location.reload();else window.showToast('Flag failed','error')}catch(e){window.showToast('Flag failed','error')}};window.openReviewTag=(id)=>{const t=prompt('Tag:');if(t)fetch('/api/mwr/review/tag',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_id:id,tag:t})}).then(r=>{if(r.ok)window.showToast('Tagged');else window.showToast('Tag failed','error')})};window.toggleReviewArchive=async(id,act)=>{try{const r=await fetch('/api/mwr/review/archive',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_ids:[id],action:act})});if(r.ok)location.reload();else window.showToast('Archive failed','error')}catch(e){window.showToast('Archive failed','error')}};`;
+  const bc = [{ href: '/', label: 'Dashboard' }, { label: 'MWR Home' }];
+  return page(user, 'MWR Home | Moonlanding', bc, content, [script]);
+}
+
+export function renderSectionReport(user, review, sections) {
+  const total = sections.reduce((s, sec) => s + (sec.highlights_count || 0), 0);
+  const resolved = sections.reduce((s, sec) => s + (sec.resolved_count || 0), 0);
+  const flagged = sections.reduce((s, sec) => s + (sec.flagged_count || 0), 0);
+
+  const tableRows = sections.map((sec, i) => {
+    const pct = sec.highlights_count > 0 ? Math.round((sec.resolved_count || 0) / sec.highlights_count * 100) : 0;
+    return `<tr>
+      <td>${sec.name || `Section ${i + 1}`}</td>
+      <td style="text-align:center">${sec.highlights_count || 0}</td>
+      <td style="text-align:center">${sec.resolved_count || 0}</td>
+      <td style="text-align:center">${sec.flagged_count || 0}</td>
+      <td style="text-align:center"><div class="resolution-bar" style="width:80px;display:inline-block"><div class="resolution-bar-segment resolution-bar-resolved" style="width:${pct}%"></div></div> <span style="font-size:12px;color:var(--color-text-muted)">${pct}%</span></td>
+    </tr>`;
+  }).join('');
+
+  const summaryRow = `<tr style="font-weight:700;background:var(--color-bg)">
+    <td>Total</td>
+    <td style="text-align:center">${total}</td>
+    <td style="text-align:center">${resolved}</td>
+    <td style="text-align:center">${flagged}</td>
+    <td style="text-align:center">${total > 0 ? Math.round(resolved / total * 100) : 0}%</td>
+  </tr>`;
+
+  const pageHeader = renderPageHeader(
+    `Section Report: ${review.name || 'Review'}`,
+    '',
+    `${renderButton('Print', { variant: 'ghost', size: 'sm', action: 'printPage' })}
+     ${renderButton('Export CSV', { variant: 'primary', size: 'sm', action: 'exportSectionReport' })}`
+  );
+
+  const content = `${pageHeader}
+    <div class="table-wrap">
+      <table class="data-table">
+        <thead><tr><th>Section</th><th style="text-align:center">Highlights</th><th style="text-align:center">Resolved</th><th style="text-align:center">Flagged</th><th style="text-align:center">Progress</th></tr></thead>
+        <tbody>${tableRows}${summaryRow}</tbody>
+      </table>
+    </div>`;
+
+  const bc = [{ href: '/', label: 'Home' }, { href: '/review', label: 'Reviews' }, { href: `/review/${review.id}`, label: review.name || 'Review' }, { label: 'Sections' }];
+  const exportScript = `window.exportSectionReport=function(){var rows=[['Section','Highlights','Resolved','Flagged','Progress']];document.querySelectorAll('tbody tr').forEach(function(r){var cells=[];r.querySelectorAll('td').forEach(function(c){cells.push(c.textContent.trim())});if(cells.length)rows.push(cells)});var csv=rows.map(function(r){return r.join(',')}).join('\\n');var b=new Blob([csv],{type:'text/csv'});var a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='section-report.csv';a.click()}`;
+  return page(user, `${review.name || 'Review'} | Sections`, bc, reviewZoneNav(review.id, 'sections') + content, [exportScript]);
+}