thatcher 1.0.4

package/src/ui/review-renderer.js

@@ -0,0 +1,202 @@
+import { canCreate } from '@/ui/permissions-ui.js';
+import { page } from '@/ui/layout.js';
+import { reviewCreateDialog, reviewTemplateChoiceDialog, reviewContextMenu, reviewFlagsDialog, reviewTagsDialog, reviewValueDialog, reviewDeadlineDialog, reviewNotificationDialog } from '@/ui/review-dialogs.js';
+import { SPACING, renderButton, renderEmptyState, renderStatsRow, renderPageHeader } from '@/ui/spacing-system.js';
+
+export { reviewCreateDialog, reviewTemplateChoiceDialog, reviewContextMenu, reviewFlagsDialog, reviewTagsDialog, reviewValueDialog, reviewDeadlineDialog, reviewNotificationDialog };
+export { renderMwrHome, renderSectionReport } from '@/ui/review-mwr-renderer.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)};`;
+
+const TAB_DEFS = [
+  { key: 'all', label: 'All', filter: () => true },
+  { key: 'active', label: 'Active', filter: r => r.status === 'active' || r.status === 'open' || r.status === 'in_progress' },
+  { key: 'priority', label: 'Priority', filter: r => r.is_priority || r.flagged || r.flags_count > 0 },
+  { key: 'history', label: 'History', filter: r => r.status === 'completed' || r.status === 'closed' },
+  { key: 'archive', label: 'Archive', filter: r => r.status === 'archived' || r.archived === 1 },
+];
+
+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>`;
+}
+
+function reviewRow(r) {
+  const isPri = (r.is_priority || r.flagged || (r.flags_count > 0)) ? 1 : 0;
+  return `<tr class="review-row" data-status="${r.status || ''}" data-flags="${r.flags_count || 0}" data-highlights="${r.highlights_count || 0}" data-archived="${r.archived || 0}" data-priority="${isPri}" data-stage="${r.stage || r.status || ''}" data-navigate="/review/${r.id}" oncontextmenu="showCtxMenu(event,'${r.id}')" style="cursor:pointer">
+    <td style="width:32px"><button class="review-priority-star${isPri?' is-priority':''}" data-action="togglePriority" data-args='["${r.id}"]' aria-label="Toggle priority" onclick="event.stopPropagation()">${isPri?'★':'☆'}</button></td>
+    <td class="review-row-name">${r.name || r.title || 'Untitled'}</td>
+    <td style="font-size:13px;color:var(--color-text-muted)">${r.engagement_name || r.engagement_id_display || '-'}</td>
+    <td>${statusBadge(r.status)}</td>
+    <td style="text-align:center;font-size:13px">${r.highlights_count !== undefined ? r.highlights_count : '-'}</td>
+    <td style="font-size:13px">${fmtDate(r.deadline)}</td>
+    <td style="font-size:13px;color:var(--color-text-light)">${fmtDate(r.created_at)}</td>
+  </tr>`;
+}
+
+export function renderReviewListTabbed(user, reviews) {
+  const counts = {};
+  TAB_DEFS.forEach(t => { counts[t.key] = reviews.filter(t.filter).length; });
+
+  const tabBar = `<nav class="tab-bar" style="margin-bottom:${SPACING.lg}">
+    ${TAB_DEFS.map(t => `<button class="tab-btn${t.key === 'all' ? ' active' : ''}" data-tab="${t.key}" data-action="switchTab" data-args='["${t.key}"]'>${t.label}<span class="tab-count">${counts[t.key]}</span></button>`).join('')}
+  </nav>`;
+
+  const createBtn = canCreate(user, 'review')
+    ? renderButton('New Review', { variant: 'primary', size: 'sm', action: 'openDialog', args: ['review-create-dialog'] })
+    : '';
+
+  const pageHeader = renderPageHeader(
+    'Reviews',
+    `${reviews.length} total`,
+    `<label for="review-search" class="sr-only">Search reviews</label>
+     <input type="text" id="review-search" placeholder="Search reviews..." class="form-input review-search-input" aria-label="Search reviews"/>
+     ${createBtn}`
+  );
+
+  const reviewRows = reviews.length ? reviews.map(reviewRow).join('') : '';
+  const emptyState = reviews.length === 0 ? renderEmptyState(
+    `<div style="font-size:32px;margin-bottom:12px;opacity:0.3">&#128196;</div>
+     <svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+     <div class="empty-state-title">No reviews yet</div>
+     <div class="empty-state-desc">Create a new review to start tracking work.</div>`
+  ) : '';
+
+  const tableWrap = `<div class="table-wrap">
+    <div class="table-toolbar">
+      <div class="table-search"></div>
+      <span class="table-count" id="row-count">${reviews.length} items</span>
+    </div>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th style="width:32px" aria-label="Priority"></th>
+          <th>Name</th>
+          <th>Engagement</th>
+          <th>Status</th>
+          <th style="text-align:center">Highlights</th>
+          <th>Deadline</th>
+          <th>Created</th>
+        </tr>
+      </thead>
+      <tbody id="review-tbody">${reviewRows || `<tr><td colspan="7">${emptyState}</td></tr>`}</tbody>
+    </table>
+  </div>`;
+
+  const content = `${pageHeader}${tabBar}${tableWrap}${reviewContextMenu()}`;
+  const bc = [{ href: '/', label: 'Dashboard' }, { href: '/review', label: 'Reviews' }];
+
+  const tabScript = `window.switchTab=function(key){
+    document.querySelectorAll('.tab-btn[data-tab]').forEach(function(b){b.classList.toggle('active',b.dataset.tab===key)});
+    var rows=document.querySelectorAll('#review-tbody tr.review-row');var count=0;
+    rows.forEach(function(r){var show=true;
+      if(key==='active')show=r.dataset.status==='active'||r.dataset.status==='open'||r.dataset.status==='in_progress';
+      else if(key==='priority')show=r.dataset.priority==='1';
+      else if(key==='history')show=r.dataset.status==='completed'||r.dataset.status==='closed';
+      else if(key==='archive')show=r.dataset.status==='archived'||r.dataset.archived==='1';
+      r.style.display=show?'':'none';if(show)count++;
+    });
+    var el=document.getElementById('row-count');if(el)el.textContent=count+' items';
+  }`;
+
+  const ctxScript = `var ctxEl=document.getElementById('review-ctx-menu');
+  window.showCtxMenu=function(e,id){e.preventDefault();if(!ctxEl)return;ctxEl.dataset.reviewId=id;ctxEl.style.display='block';ctxEl.style.left=e.pageX+'px';ctxEl.style.top=e.pageY+'px'};
+  document.addEventListener('click',function(){if(ctxEl)ctxEl.style.display='none'});
+  window.ctxAction=function(action){var id=ctxEl&&ctxEl.dataset.reviewId;if(!id)return;
+    if(action==='open')window.location='/review/'+id;
+    else if(action==='pdf')window.location='/review/'+id+'/pdf';
+    else if(action==='edit')window.location='/review/'+id+'/edit';
+    else if(action==='highlights')window.location='/review/'+id+'/highlights';
+  }`;
+
+  const priorityScript = `window.togglePriority=async function(id){try{var btn=document.querySelector('button[data-args=\\'["'+id+'"]\\']');var on=btn&&btn.classList.contains('is-priority');var res=await fetch('/api/review/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({is_priority:on?0:1})});if(res.ok){btn.classList.toggle('is-priority');btn.textContent=btn.classList.contains('is-priority')?'★':'☆';showToast('Priority updated','success')}else{showToast('Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}};`;
+  const searchScript = `(function(){var input=document.getElementById('review-search');if(!input)return;
+    input.addEventListener('input',function(){var q=input.value.toLowerCase();
+      document.querySelectorAll('#review-tbody tr.review-row').forEach(function(r){
+        var text=r.textContent.toLowerCase();r.style.display=text.indexOf(q)>=0?'':'none';
+      });
+    });
+  })()`;
+
+  return page(user, 'Reviews | Moonlanding', bc, content, [TOAST_SCRIPT, tabScript, ctxScript, searchScript, priorityScript]);
+}
+
+export function reviewSearchField() {
+  return `<label for="review-search" class="sr-only">Search reviews</label><input type="text" id="review-search" placeholder="Search reviews..." class="form-input review-search-input" aria-label="Search reviews"/>`;
+}
+
+export function hideEmptyReviewsToggle() {
+  return `<label style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--color-text-muted);cursor:pointer" title="Hide reviews with 0 highlights"><input type="checkbox" id="hide-empty-toggle"/>Hide empty</label>`;
+}
+
+export function reviewGroupedList(reviews, groupBy) {
+  const groups = {};
+  reviews.forEach(r => {
+    const key = r[groupBy] || r[`${groupBy}_name`] || r[`${groupBy}_id`] || 'Ungrouped';
+    if (!groups[key]) groups[key] = [];
+    groups[key].push(r);
+  });
+  return Object.entries(groups).map(([name, items]) =>
+    `<div class="card-clean" style="margin-bottom:${SPACING.md}">
+      <div class="card-clean-body" style="padding:${SPACING.md}">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:${SPACING.sm};cursor:pointer" data-action="toggleReviewGroup" data-self>
+          <span style="font-weight:600;font-size:14px">${name}</span>
+          <span class="pill pill-neutral">${items.length}</span>
+        </div>
+        <div class="review-group-items">
+          ${items.map(r => `<div class="list-item-row" style="padding:8px 0" data-navigate="/review/${r.id}">
+            <span class="list-item-name">${r.name || r.title || 'Untitled'}</span>
+            ${r.status ? statusBadge(r.status) : ''}
+          </div>`).join('')}
+        </div>
+      </div>
+    </div>`
+  ).join('');
+}
+
+export function renderReviewSections(user, review, sections) {
+  const totalHighlights = sections.reduce((s, sec) => s + (sec.highlights_count || 0), 0);
+  const resolvedHighlights = sections.reduce((s, sec) => s + (sec.resolved_count || 0), 0);
+  const pct = totalHighlights > 0 ? Math.round(resolvedHighlights / totalHighlights * 100) : 0;
+
+  const statsHtml = renderStatsRow([
+    { value: sections.length, label: 'Sections' },
+    { value: totalHighlights, label: 'Total Highlights' },
+    { value: resolvedHighlights, label: 'Resolved', color: 'var(--color-success)' },
+    { value: `${pct}%`, label: 'Progress' },
+  ]);
+
+  const sectionRows = sections.map((sec, i) => {
+    const secPct = sec.highlights_count > 0 ? Math.round((sec.resolved_count || 0) / sec.highlights_count * 100) : 0;
+    return `<div class="card-clean" style="margin-bottom:${SPACING.sm}">
+      <div class="card-clean-body" style="padding:${SPACING.md}">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:${SPACING.sm}">
+          <span style="font-weight:600;font-size:14px">${sec.name || `Section ${i + 1}`}</span>
+          <span style="font-size:13px;color:var(--color-text-muted)">${sec.highlights_count || 0} highlights</span>
+        </div>
+        <div class="resolution-bar" style="margin-bottom:${SPACING.xs}">
+          <div class="resolution-bar-segment resolution-bar-resolved" style="width:${secPct}%"></div>
+        </div>
+        <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--color-text-muted)">
+          <span>Resolved: ${sec.resolved_count || 0}</span>
+          <span>Flagged: ${sec.flagged_count || 0}</span>
+          <span>${secPct}%</span>
+        </div>
+      </div>
+    </div>`;
+  }).join('');
+
+  const content = `${renderPageHeader(`Sections: ${review.name || 'Review'}`, '')}${statsHtml}${sectionRows || renderEmptyState('No sections found')}`;
+  const bc = [{ href: '/', label: 'Dashboard' }, { href: '/review', label: 'Reviews' }, { href: `/review/${review.id}`, label: review.name || 'Review' }, { label: 'Sections' }];
+  return page(user, `Sections - ${review.name || 'Review'}`, bc, content);
+}
+

package/src/ui/review-widgets.js

@@ -0,0 +1,88 @@
+import { h } from '@/ui/webjsx.js'
+import { statusLabel, TOAST_SCRIPT } from '@/ui/render-helpers.js'
+import { teamAvatarGroup } from '@/ui/widgets.js'
+
+export function mobileReviewCard(review) {
+  const r = review || {}
+  const sts = r.status ? statusLabel(r.status) : ''
+  const date = r.created_at ? `<span class="text-xs text-gray-500">${typeof r.created_at === 'number' ? new Date(r.created_at * 1000).toLocaleDateString() : r.created_at}</span>` : ''
+  return `<div class="mobile-card mobile-review-card card-clean">
+    <div class="card-clean-body">
+      <div class="flex justify-between items-center mb-2"><h3 class="font-medium text-sm">${r.name || r.title || 'Untitled Review'}</h3>${sts}</div>
+      <div class="flex items-center gap-2 text-xs text-gray-500 mb-2">${r.engagement_name ? `<span>${r.engagement_name}</span>` : ''}${date}</div>
+      ${r.highlights_count !== undefined ? `<div class="text-xs text-gray-500">${r.highlights_count} highlight${r.highlights_count !== 1 ? 's' : ''}</div>` : ''}
+      <div class="flex gap-1 mt-2"><a href="/review/${r.id}" class="btn btn-xs btn-primary">View</a><a href="/review/${r.id}/edit" class="btn btn-xs btn-outline">Edit</a></div>
+    </div></div>`
+}
+
+export function sidebarReviewDetails(review) {
+  const r = review || {}
+  const sts = r.status ? statusLabel(r.status) : ''
+  const meta = [
+    r.created_at ? ['Created', typeof r.created_at === 'number' ? new Date(r.created_at * 1000).toLocaleDateString() : r.created_at] : null,
+    r.updated_at ? ['Updated', typeof r.updated_at === 'number' ? new Date(r.updated_at * 1000).toLocaleDateString() : r.updated_at] : null,
+    r.creator_name ? ['Creator', r.creator_name] : null,
+    r.manager_name ? ['Manager', r.manager_name] : null,
+  ].filter(Boolean).map(([l, v]) => `<div class="sidebar-meta-row"><span class="text-gray-500 text-xs">${l}</span><span class="text-sm font-medium">${v}</span></div>`).join('')
+  const highlights = r.highlights_count !== undefined ? `<div class="sidebar-section"><span class="text-xs text-gray-500">Highlights</span><span class="font-medium">${r.highlights_count}</span></div>` : ''
+  const collaborators = r.collaborators?.length ? `<div class="sidebar-section"><span class="text-xs text-gray-500 mb-1">Collaborators</span>${teamAvatarGroup(r.collaborators, 5)}</div>` : ''
+  const checklists = r.checklists_total !== undefined ? `<div class="sidebar-section"><span class="text-xs text-gray-500">Checklists</span><span class="font-medium">${r.checklists_completed || 0}/${r.checklists_total}</span></div>` : ''
+  return `<aside class="sidebar-review-panel" id="sidebar-review-panel">
+    <div class="sidebar-header"><h3 class="font-medium">Review Details</h3><button class="btn btn-ghost btn-xs sidebar-toggle" data-action="toggleSidebar" aria-label="Toggle sidebar">&times;</button></div>
+    <div class="sidebar-body">
+      <div class="sidebar-section"><h4 class="font-medium text-sm mb-1">${r.name || r.title || 'Untitled Review'}</h4>${sts}</div>
+      ${meta ? `<div class="sidebar-section">${meta}</div>` : ''}
+      ${highlights}${collaborators}${checklists}
+    </div></aside>`
+}
+
+export function archiveReviewDialog() {
+  return `<div id="archive-review-dialog" class="dialog-overlay" style="display:none" data-dialog-close-overlay="true" onkeydown="if(event.key==='Escape')this.style.display='none'" role="dialog" aria-modal="true" aria-labelledby="archive-review-dialog-title" aria-hidden="true">
+    <div class="dialog-panel">
+      <div class="dialog-header"><span class="dialog-title" id="archive-review-dialog-title">Archive Review</span><button class="dialog-close" data-dialog-close="archive-review-dialog" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body">
+        <div class="archive-ctx">This action will archive the review. Archived reviews are hidden from active lists but can be restored.</div>
+        <div class="modal-form-group"><label class="form-label" for="ard-confirm">Type ARCHIVE to confirm</label><input type="text"  id="ard-confirm" class="archive-type-input" placeholder="Type ARCHIVE"/></div>
+      </div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="archive-review-dialog">Cancel</button><button class="btn btn-error btn-sm" id="ard-btn" data-action="ardConfirm">Archive</button></div>
+    </div></div>
+  <script>${TOAST_SCRIPT}
+  window._ardId=null;
+  window.showArchiveDialog=function(reviewId){window._ardId=reviewId;document.getElementById('archive-review-dialog').style.display='flex';document.getElementById('ard-confirm').value=''};
+  window.ardConfirm=async function(){if(document.getElementById('ard-confirm').value!=='ARCHIVE'){showToast('Type ARCHIVE to confirm','error');return}try{var res=await fetch('/api/review/'+window._ardId,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({status:'archived'})});if(res.ok){showToast('Review archived','success');document.getElementById('archive-review-dialog').style.display='none';setTimeout(function(){location.reload()},500)}else{showToast('Archive failed','error')}}catch(e){showToast('Error','error')}};</script>`
+}
+
+export function reviewOpenCloseToggle(reviewId, isOpen) {
+  const on = isOpen ? 'rvw-on rvw-green' : ''
+  return `<div class="rvw-toggle">
+    <div class="rvw-toggle-track ${on}" id="rvw-oc-track" role="switch" tabindex="0" aria-checked="${isOpen}" aria-label="Review open/closed status" data-action="rvwToggleOC" data-args='["${reviewId}"]' onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();rvwToggleOC('${reviewId}')}"><div class="rvw-toggle-knob"></div></div>
+    <span class="rvw-toggle-label">${isOpen ? 'Open' : 'Closed'}</span>
+  </div>
+  <script>${TOAST_SCRIPT}
+  window.rvwToggleOC=async function(id){var t=document.getElementById('rvw-oc-track');var isOn=t.classList.contains('rvw-on');var newStatus=isOn?'closed':'open';try{var res=await fetch('/api/review/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({status:newStatus})});if(res.ok){t.classList.toggle('rvw-on');t.classList.toggle('rvw-green');t.setAttribute('aria-checked',!isOn);t.nextElementSibling.textContent=isOn?'Closed':'Open';showToast('Review '+(isOn?'closed':'opened'),'success')}else{showToast('Failed','error')}}catch(e){showToast('Error','error')}};</script>`
+}
+
+export function reviewPrivateToggle(reviewId, isPrivate) {
+  const on = isPrivate ? 'rvw-on rvw-purple' : ''
+  return `<div class="rvw-toggle">
+    <div class="rvw-toggle-track ${on}" id="rvw-priv-track" role="switch" tabindex="0" aria-checked="${isPrivate}" aria-label="Review private/public toggle" data-action="rvwTogglePriv" data-args='["${reviewId}"]' onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();rvwTogglePriv('${reviewId}')}"><div class="rvw-toggle-knob"></div></div>
+    <span class="rvw-toggle-label"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" style="vertical-align:middle;margin-right:4px"><path d="${isPrivate ? 'M8 1a4 4 0 014 4v2h1a1 1 0 011 1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V8a1 1 0 011-1h1V5a4 4 0 014-4zm2 6V5a2 2 0 10-4 0v2h4z' : 'M12 7h1a1 1 0 011 1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V8a1 1 0 011-1h7V5a2 2 0 10-4 0v1H4V5a4 4 0 018 0v2z'}"/></svg>${isPrivate ? 'Private' : 'Public'}</span>
+  </div>
+  <script>${TOAST_SCRIPT}
+  window.rvwTogglePriv=async function(id){var t=document.getElementById('rvw-priv-track');var isOn=t.classList.contains('rvw-on');try{var res=await fetch('/api/review/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({is_private:isOn?0:1})});if(res.ok){t.classList.toggle('rvw-on');t.classList.toggle('rvw-purple');showToast(isOn?'Made public':'Made private','success');setTimeout(function(){location.reload()},500)}else{showToast('Failed','error')}}catch(e){showToast('Error','error')}};</script>`
+}
+
+export function markAllHighlightsResolved(reviewId, unresolvedCount = 0) {
+  return `<div id="bulk-resolve-dialog" class="dialog-overlay" style="display:none" data-dialog-close-overlay="true" onkeydown="if(event.key==='Escape')this.style.display='none'" role="dialog" aria-modal="true" aria-labelledby="bulk-resolve-dialog-title" aria-hidden="true">
+    <div class="dialog-panel" style="max-width:380px">
+      <div class="dialog-header"><span class="dialog-title" id="bulk-resolve-dialog-title">Resolve All Highlights</span><button class="dialog-close" data-dialog-close="bulk-resolve-dialog" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body">
+        <div class="bulk-resolve-count" id="brc-count">${unresolvedCount}</div>
+        <div class="bulk-resolve-label">unresolved highlights will be marked as resolved</div>
+      </div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="bulk-resolve-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="bulkResolve" data-args='["${reviewId}"]'>Resolve All</button></div>
+    </div></div>
+  <script>${TOAST_SCRIPT}
+  window.showBulkResolve=function(reviewId,count){document.getElementById('brc-count').textContent=count;document.getElementById('bulk-resolve-dialog').style.display='flex'};
+  window.bulkResolve=async function(id){try{var res=await fetch('/api/review/'+id+'/resolve-all',{method:'POST',headers:{'Content-Type':'application/json'}});if(res.ok){showToast('All highlights resolved','success');document.getElementById('bulk-resolve-dialog').style.display='none';setTimeout(function(){location.reload()},500)}else{var alt=await fetch('/api/highlight?review_id='+id);var hl=await alt.json();var highlights=(hl.data||hl||[]).filter(function(h){return !h.resolved&&h.status!=='resolved'});var resolved=0;for(var h of highlights){var r2=await fetch('/api/highlight/'+h.id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({resolved:1,status:'resolved'})});if(r2.ok)resolved++}showToast(resolved+' highlights resolved','success');document.getElementById('bulk-resolve-dialog').style.display='none';setTimeout(function(){location.reload()},500)}}catch(e){showToast('Error: '+e.message,'error')}};</script>`
+}

package/src/ui/review-zone-nav.js

@@ -0,0 +1,12 @@
+export function reviewZoneNav(reviewId, active) {
+  const links = [
+    { href: `/review/${reviewId}`, label: 'Overview', key: 'overview' },
+    { href: `/review/${reviewId}/pdf`, label: 'PDF', key: 'pdf' },
+    { href: `/review/${reviewId}/highlights`, label: 'Highlights', key: 'highlights' },
+    { href: `/review/${reviewId}/sections`, label: 'Sections', key: 'sections' },
+    { href: `/review/${reviewId}/resolution`, label: 'Resolution', key: 'resolution' },
+  ];
+  return `<nav class="tab-bar" style="margin-bottom:1.25rem;overflow-x:auto;scrollbar-width:none">
+    ${links.map(l => `<a href="${l.href}" class="tab-btn${l.key===active?' active':''}">${l.label}</a>`).join('')}
+  </nav>`;
+}

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

@@ -0,0 +1,191 @@
+import { page } from '@/ui/layout.js';
+import { canEdit, isPartner, isManager, isClientUser } from '@/ui/permissions-ui.js';
+import { esc, statusBadge, TOAST_SCRIPT } from '@/ui/render-helpers.js';
+import { SPACING } from '@/ui/spacing-system.js';
+
+const TOAST = TOAST_SCRIPT;
+
+function questionRow(q, i, sections = [], clientId = '', showRespond = false, showView = false) {
+  const section = sections.find(s => s.id === q.section_id || s.id === q.rfi_section_id);
+  const sLabel = section ? `<span class="badge badge-flat-primary text-xs">${esc(section.name)}</span>` : '';
+  const hasResp = q.responses > 0 || q.response_count > 0;
+  const respBadge = hasResp ? `<span class="badge badge-success badge-flat-success text-xs">Responded</span>` : '';
+  const assignedLabel = q.assigned_to ? `<span class="badge badge-flat-secondary text-xs">Assigned</span>` : '';
+  const assignBtn = clientId ? `<button data-action="openAssignQuestion" data-args='["${esc(q.id)}"]' class="btn btn-ghost btn-xs">Assign</button>` : '';
+  const respondBtn = showRespond ? `<button data-action="openRespondQuestion" data-args='["${esc(q.id)}","${esc(q.question_text||q.question||q.title||'')}"]' class="btn btn-primary btn-xs">Respond</button>` : '';
+  const viewBtn = showView && hasResp ? `<button data-action="viewResponses" data-args='["${esc(q.id)}","${esc(q.question_text||q.question||q.title||'')}"]' class="btn btn-ghost btn-xs">Responses</button>` : '';
+  const editDelBtns = !showRespond ? `<button data-action="openEditQuestion" data-args='["${esc(q.id)}"]' class="btn btn-ghost btn-xs">Edit</button>${assignBtn}<button data-action="deleteQuestion" data-args='["${esc(q.id)}"]' class="btn btn-error btn-xs">Del</button>` : '';
+  return `<tr class="hover">
+    <td class="text-center text-sm text-base-content/40 w-8">${i+1}</td>
+    <td class="text-sm max-w-sm">${esc(q.question_text||q.question||q.title||'Question')}</td>
+    <td>${sLabel}</td>
+    <td class="text-sm text-base-content/50">${q.deadline?new Date(typeof q.deadline==='number'?q.deadline*1000:q.deadline).toLocaleDateString():'-'}</td>
+    <td>${respBadge}${assignedLabel}</td>
+    <td><div class="flex gap-2">${respondBtn}${viewBtn}${editDelBtns}</div></td>
+  </tr>`;
+}
+
+function editQuestionDialog(rfiId, sections) {
+  const sectionOpts = sections.map(s => `<option value="${esc(s.id)}">${esc(s.name)}</option>`).join('');
+  return `<div id="q-dialog" data-rfi-id="${esc(rfiId)}" class="modal" style="display:none" data-dialog-close-overlay="true"><div class="modal-overlay" data-dialog-close="q-dialog"></div><div class="modal-content rounded-box max-w-lg p-6"><h3 class="text-lg font-semibold mb-4" id="q-dialog-title">Edit Question</h3><div class="form-group mb-3"><label class="label"><span class="label-text font-medium">Question Text</span></label><textarea id="q-text" rows="4" class="textarea textarea-solid max-w-full"></textarea></div><div class="form-group mb-3"><label class="label"><span class="label-text font-medium">Section</span></label><select id="q-section" class="select select-solid max-w-full"><option value="">No section</option>${sectionOpts}</select></div><div class="grid grid-cols-2 gap-3 mb-4"><div class="form-group"><label class="label"><span class="label-text font-medium">Deadline</span></label><input type="date" id="q-deadline" class="input input-solid max-w-full"/></div><div class="form-group"><label class="label"><span class="label-text font-medium">Category</span></label><input type="text" id="q-category" placeholder="Category" class="input input-solid max-w-full"/></div></div><input type="hidden" id="q-edit-id"/><div class="modal-action"><button data-action="saveQuestion" data-args='["${esc(rfiId)}"]' class="btn btn-primary">Save</button><button data-dialog-close="q-dialog" class="btn btn-ghost">Cancel</button></div></div></div>`;
+}
+
+function assignQuestionDialog(rfiId) {
+  return `<div id="assign-q-dialog" data-rfi-id="${esc(rfiId)}" class="modal" style="display:none" data-dialog-close-overlay="true"><div class="modal-overlay" data-dialog-close="assign-q-dialog"></div><div class="modal-content rounded-box max-w-sm p-6"><h3 class="text-lg font-semibold mb-4">Assign to Client User</h3><div class="form-group mb-4"><label class="label"><span class="label-text font-medium">Client User</span></label><select id="assign-q-user" class="select select-solid max-w-full"><option value="">Loading...</option></select></div><input type="hidden" id="assign-q-id"/><div class="modal-action"><button onclick="saveAssignQuestion()" class="btn btn-primary">Assign</button><button data-dialog-close="assign-q-dialog" class="btn btn-ghost">Cancel</button></div></div></div>`;
+}
+
+function addSectionDialog(rfiId) {
+  return `<div id="sec-dialog" class="modal" style="display:none" data-dialog-close-overlay="true"><div class="modal-overlay" data-dialog-close="sec-dialog"></div><div class="modal-content rounded-box max-w-sm p-6"><h3 class="text-lg font-semibold mb-4">Add Section</h3><div class="form-group mb-4"><label class="label"><span class="label-text font-medium">Section Name</span></label><input type="text" id="sec-name" class="input input-solid max-w-full"/></div><div class="modal-action"><button data-action="saveSection" data-args='["${esc(rfiId)}"]' class="btn btn-primary">Add</button><button data-dialog-close="sec-dialog" class="btn btn-ghost">Cancel</button></div></div></div>`;
+}
+
+export function renderRfiDetail(user, rfi = {}, questions = [], sections = [], engagement = null) {
+  const canEditRfi = canEdit(user, 'rfi');
+  const isClient = isClientUser(user);
+  const canViewResponses = isPartner(user) || isManager(user);
+  const clientId = engagement?.client_id || '';
+  const qRows = questions.map((q, i) => questionRow(q, i, sections, canEditRfi ? clientId : '', isClient, canViewResponses)).join('') ||
+    `<tr><td colspan="6" class="text-center py-8 text-base-content/40 text-sm">No questions yet. Add one using the button above.</td></tr>`;
+
+  const sectionTabs = sections.length ? `<div class="tabs tabs-boxed bg-base-200 flex-wrap gap-1">
+    <button data-action="filterBySection" data-args='[""]' id="stab-all" class="tab-btn active">All</button>
+    ${sections.map(s => `<button data-action="filterBySection" data-args='["${esc(s.id)}"]' id="stab-${esc(s.id)}" class="tab-btn">${esc(s.name)}</button>`).join('')}
+  </div>` : '';
+
+  const engLink = engagement
+    ? `<a href="/engagement/${esc(engagement.id)}" class="text-primary text-sm">&#8592; ${esc(engagement.name||'Engagement')}</a>`
+    : `<a href="/rfi" class="text-primary text-sm">&#8592; RFI List</a>`;
+
+  const reportBtn = `<a href="/rfi/${esc(rfi.id)}/report" target="_blank" class="btn btn-ghost btn-sm">Report</a>`;
+  const headerBtns = `<div class="flex gap-2 flex-wrap">${reportBtn}${canEditRfi ? `
+      <button data-action="openAddQuestion" class="btn btn-primary btn-sm">+ Question</button>
+      <button data-action="openDialog" data-params='{"dialogId":"sec-dialog"}' class="btn btn-ghost btn-sm">+ Section</button>
+      <button data-action="sendReminder" data-args='["${esc(rfi.id)}"]' class="btn btn-ghost btn-sm">Send Reminder</button>
+      <a href="/rfi/${esc(rfi.id)}/edit" class="btn btn-outline-primary btn-sm">Edit RFI</a>
+    ` : ''}</div>`;
+
+  const infoItems = [
+    ['Engagement', engagement?.name ? esc(engagement.name) : '<span class="text-base-content/30">—</span>'],
+    ['Status', statusBadge(rfi.status)],
+    ['Deadline', rfi.deadline?new Date(typeof rfi.deadline==='number'?rfi.deadline*1000:rfi.deadline).toLocaleDateString():'-'],
+    ['Questions', questions.length],
+    ['Sections', sections.length],
+    ['Mandatory', rfi.mandatory!==false?'Yes':'No'],
+  ];
+
+  const infoGrid = `<div class="rfi-info-grid">` +
+    infoItems.map(([l,v]) => `<div><div style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--color-text-muted);margin-bottom:${SPACING.xs}">${l}</div><div style="font-size:0.875rem;color:var(--color-text)">${v}</div></div>`).join('') +
+    `</div>`;
+
+  const content = `
+    <nav class="breadcrumb-clean">${engLink}</nav>
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">${esc(rfi.display_name||rfi.name||rfi.title||(engagement?'RFI \u2013 '+(engagement.name||''):'RFI'))}</h1>
+         ${rfi.description ? `<p style="margin-top:${SPACING.xs};font-size:0.875rem;color:var(--color-text-muted)">${esc(rfi.description)}</p>` : ''}
+      </div>
+      ${headerBtns}
+    </div>
+    <div class="card-clean mb-4">
+      <div class="card-clean-body">${infoGrid}</div>
+    </div>
+    <div class="card-clean">
+      <div class="card-clean-body">
+         <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:${SPACING.md};flex-wrap:wrap;gap:${SPACING.sm}">
+           <h2 style="font-size:0.875rem;font-weight:600;color:var(--color-text)">Questions (${questions.length})</h2>
+           <div style="display:flex;gap:${SPACING.sm};align-items:center;flex-wrap:wrap">
+            ${sectionTabs}
+            <input type="text" placeholder="Search..." oninput="filterQuestions(this.value)" class="input input-solid" style="max-width:160px;font-size:0.875rem"/>
+          </div>
+        </div>
+        <div class="table-wrap">
+          <table class="data-table" id="q-table">
+            <thead><tr><th>#</th><th>Question</th><th>Section</th><th>Deadline</th><th>Status</th><th>Actions</th></tr></thead>
+            <tbody id="q-tbody">${qRows}</tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    ${editQuestionDialog(rfi.id, sections)}
+    ${addSectionDialog(rfi.id)}
+    ${clientId ? assignQuestionDialog(rfi.id) : ''}
+    ${canViewResponses ? `<div id="view-resp-dialog" class="modal" style="display:none" data-dialog-close-overlay="true"><div class="modal-overlay" data-dialog-close="view-resp-dialog"></div><div class="modal-content rounded-box max-w-lg p-6"><h3 class="text-lg font-semibold mb-1">Responses</h3><p id="view-resp-qtext" class="text-sm text-base-content/60 mb-3"></p><div id="view-resp-list" style="max-height:240px;overflow-y:auto"></div><div class="modal-action"><button data-dialog-close="view-resp-dialog" class="btn btn-ghost">Close</button></div></div></div>` : ''}
+    ${isClient ? `<div id="respond-q-dialog" class="modal" style="display:none" data-dialog-close-overlay="true"><div class="modal-overlay" data-dialog-close="respond-q-dialog"></div><div class="modal-content rounded-box max-w-lg p-6"><h3 class="text-lg font-semibold mb-1">Respond to Question</h3><p id="respond-q-text" class="text-sm text-base-content/60 mb-4"></p><div class="form-group mb-3"><label class="label"><span class="label-text font-medium">Your Response</span></label><textarea id="respond-q-answer" rows="5" class="textarea textarea-solid max-w-full" placeholder="Enter your response..."></textarea></div><div class="form-group mb-4"><label class="label"><span class="label-text font-medium">Attach File (optional)</span></label><input type="file" id="respond-q-file" class="input input-solid max-w-full"/></div><input type="hidden" id="respond-q-id"/><div class="modal-action"><button onclick="submitResponse()" class="btn btn-primary">Submit</button><button data-dialog-close="respond-q-dialog" class="btn btn-ghost">Cancel</button></div></div></div>` : ''}
+  `;
+
+  const script = `${TOAST}
+var activeSection='';
+function filterBySection(sid){
+  activeSection=sid;
+  document.querySelectorAll('[id^="stab-"]').forEach(b=>b.classList.toggle('active',b.id==='stab-'+(sid||'all')));
+  filterRows()
+}
+function filterRows(){var q=(document.querySelector('#q-table input')?.value||'').toLowerCase();document.querySelectorAll('#q-tbody tr').forEach(function(r){var text=(r.textContent||'').toLowerCase();var secSpan=r.querySelector('td:nth-child(3) span');var rowSec=secSpan?secSpan.textContent:'';var showSec=!activeSection||rowSec===document.getElementById('stab-'+activeSection)?.textContent;r.style.display=(!q||text.includes(q))&&showSec?'':'none'})}
+function filterQuestions(q){filterRows()}
+function openAddQuestion(){document.getElementById('q-dialog').style.display='flex';document.getElementById('q-dialog-title').textContent='Add Question';document.getElementById('q-edit-id').value='';document.getElementById('q-text').value='';document.getElementById('q-section').value='';document.getElementById('q-deadline').value='';document.getElementById('q-category').value=''}
+async function openEditQuestion(id){document.getElementById('q-dialog').style.display='flex';document.getElementById('q-dialog-title').textContent='Edit Question';document.getElementById('q-edit-id').value=id;try{var rfiId=document.getElementById('q-dialog').dataset.rfiId;var r=await fetch('/api/rfi/'+rfiId+'/questions/'+id);var d=await r.json();var q=d.data||d;document.getElementById('q-text').value=q.question_text||q.question||q.title||'';document.getElementById('q-section').value=q.section_id||q.rfi_section_id||'';document.getElementById('q-deadline').value=q.deadline?(new Date(typeof q.deadline==='number'?q.deadline*1000:q.deadline)).toISOString().split('T')[0]:'';document.getElementById('q-category').value=q.category||''}catch(e){showToast('Error loading','error')}}
+async function saveQuestion(rfiId){var id=document.getElementById('q-edit-id').value;var questionText=document.getElementById('q-text').value.trim();if(!questionText){showToast('Question text required','error');return}var data={question:questionText,category:document.getElementById('q-category').value.trim()||null,section_id:document.getElementById('q-section').value||null};var dl=document.getElementById('q-deadline').value;if(dl)data.due_date=Math.floor(new Date(dl).getTime()/1000);var btn=event?.target;if(btn){btn.disabled=true;btn.textContent='Saving...'}try{var url=id?'/api/rfi/'+rfiId+'/questions/'+id:'/api/rfi/'+rfiId+'/questions';var r=await fetch(url,{method:id?'PUT':'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});var result=await r.json();if(r.ok){showToast(id?'Question updated':'Question added','success');document.getElementById('q-dialog').style.display='none';setTimeout(function(){location.reload()},500)}else{showToast(result.message||result.error||'Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}finally{if(btn){btn.disabled=false;btn.textContent='Save'}}}
+async function deleteQuestion(id){if(!confirm('Delete this question?'))return;var rfiId=document.getElementById('q-dialog').dataset.rfiId;try{var r=await fetch('/api/rfi/'+rfiId+'/questions/'+id,{method:'DELETE'});if(r.ok){showToast('Question deleted','success');setTimeout(function(){location.reload()},500)}else showToast('Delete failed','error')}catch(e){showToast('Error','error')}}
+async function saveSection(rfiId){var name=document.getElementById('sec-name').value.trim();if(!name){showToast('Name required','error');return}try{var r=await fetch('/api/rfi_section',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:name,rfi_id:rfiId})});if(r.ok){showToast('Section added','success');setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}document.getElementById('sec-dialog').style.display='none'}
+async function sendReminder(rfiId){try{var r=await fetch('/api/friday/rfi/reminder',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({rfi_id:rfiId})});if(r.ok)showToast('Reminder sent','success');else showToast('Failed','error')}catch(e){showToast('Error','error')}}`;
+
+  const assignScript = clientId ? `
+var _assignClientId=${JSON.stringify(clientId)};
+window.openAssignQuestion=async function(qId){
+  var dlg=document.getElementById('assign-q-dialog');
+  dlg.style.display='flex';
+  document.getElementById('assign-q-id').value=qId;
+  var sel=document.getElementById('assign-q-user');
+  sel.innerHTML='<option value="">Loading...</option>';
+  try{
+    var r=await fetch('/api/users?client_id='+_assignClientId+'&pageSize=100',{credentials:'include'});
+    var d=await r.json();
+    var users=(d.data||d||[]).filter(function(u){return !u.deleted_at});
+    sel.innerHTML='<option value="">Select client user...</option>'+users.map(function(u){return'<option value="'+u.id+'">'+(u.name||u.email)+'</option>'}).join('');
+  }catch(e){sel.innerHTML='<option value="">Error loading users</option>'}
+};
+window.saveAssignQuestion=async function(){
+  var qId=document.getElementById('assign-q-id').value;
+  var userId=document.getElementById('assign-q-user').value;
+  if(!userId){showToast('Select a user','error');return}
+  var rfiId=document.getElementById('assign-q-dialog').dataset.rfiId;
+  try{
+    var r=await fetch('/api/rfi/'+rfiId+'/questions/'+qId,{method:'PUT',headers:{'Content-Type':'application/json'},credentials:'include',body:JSON.stringify({assigned_to:userId})});
+    if(r.ok){showToast('Question assigned','success');document.getElementById('assign-q-dialog').style.display='none';setTimeout(function(){location.reload()},500)}
+    else showToast('Failed to assign','error')
+  }catch(e){showToast('Error: '+e.message,'error')}
+};` : '';
+
+  const viewRespScript = canViewResponses ? `
+var _rfiIdForView=${JSON.stringify(rfi.id)};
+window.viewResponses=async function(qId,qText){document.getElementById('view-resp-qtext').textContent=qText||'';document.getElementById('view-resp-list').innerHTML='<div class="text-sm text-base-content/40">Loading...</div>';document.getElementById('view-resp-dialog').style.display='flex';try{var r=await fetch('/api/rfi/'+_rfiIdForView+'/questions/'+qId+'/responses',{credentials:'include'});var d=await r.json();var items=d.data||d||[];document.getElementById('view-resp-list').innerHTML=items.length?items.map(function(resp){return'<div style="border:1px solid var(--color-border);border-radius:6px;padding:8px;margin-bottom:6px"><div class="text-sm">'+resp.response+'</div><div class="text-xs text-base-content/40 mt-1">'+new Date(typeof resp.created_at==="number"?resp.created_at*1000:resp.created_at).toLocaleString()+'</div></div>'}).join(''):'<div class="text-sm text-base-content/40">No responses yet</div>'}catch(e){document.getElementById('view-resp-list').innerHTML='<div class="text-sm text-error">Error loading</div>'}};` : '';
+
+  const respondScript = isClient ? `
+var _respondRfiId=${JSON.stringify(rfi.id)};
+window.openRespondQuestion=function(qId,qText){
+  document.getElementById('respond-q-id').value=qId;
+  document.getElementById('respond-q-text').textContent=qText||'';
+  document.getElementById('respond-q-answer').value='';
+  document.getElementById('respond-q-file').value='';
+  document.getElementById('respond-q-dialog').style.display='flex';
+};
+window.submitResponse=async function(){
+  var qId=document.getElementById('respond-q-id').value;
+  var answer=document.getElementById('respond-q-answer').value.trim();
+  if(!answer){showToast('Response required','error');return}
+  var fileInput=document.getElementById('respond-q-file');
+  var file=fileInput.files&&fileInput.files[0];
+  var btn=event&&event.target;
+  if(btn){btn.disabled=true;btn.textContent='Submitting...'}
+  try{
+    var body;var headers={};
+    if(file){body=new FormData();body.append('response_text',answer);body.append('file',file)}
+    else{body=JSON.stringify({response_text:answer});headers['Content-Type']='application/json'}
+    var r=await fetch('/api/rfi/'+_respondRfiId+'/questions/'+qId+'/responses',{method:'POST',headers,body,credentials:'include'});
+    if(r.ok){showToast('Response submitted','success');document.getElementById('respond-q-dialog').style.display='none';setTimeout(function(){location.reload()},500)}
+    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='Submit'}}
+};` : '';
+
+  return page(user, `${esc(rfi.name||'RFI')} | Moonlanding`, null, content, [script, assignScript, viewRespScript, respondScript]);
+}