thatcher 1.0.4

package/src/ui/engagement-grid-renderer.js

@@ -0,0 +1,109 @@
+import { page } from '@/ui/layout.js';
+import { canCreate } from '@/ui/permissions-ui.js';
+import { esc, stagePill, statusPill, progressBar, STAGE_CONFIG, TABLE_SCRIPT } from '@/ui/render-helpers.js';
+
+function engRow(e) {
+  const name = esc(e.name || e.client_name || 'Untitled');
+  const client = esc(e.client_name || e.client_id_display || e.client_id || '-');
+  const type = esc(e.type || e.engagement_type || e.repeat_interval || '-');
+  const year = esc(e.year || '-');
+  const team = esc(e.team_name || e.team_id_display || e.team_id || '-');
+  const deadline = e.deadline ? new Date(e.deadline).toLocaleDateString() : '-';
+  const stageLbl = STAGE_CONFIG.find(s => s.key === e.stage)?.label || (e.stage || '-');
+  return `<tr data-row data-navigate="/engagement/${esc(e.id)}" style="cursor:pointer">
+    <td data-col="name"><strong>${name}</strong></td>
+    <td data-col="client">${client}</td>
+    <td data-col="type" class="eng-col-type">${type}</td>
+    <td data-col="year" class="eng-col-year">${year}</td>
+    <td data-col="team" class="eng-col-team">${team}</td>
+    <td data-col="stage">${stagePill(e.stage)}</td>
+    <td data-col="stage-raw" style="display:none">${stageLbl}</td>
+    <td data-col="status">${statusPill(e.status)}</td>
+    <td data-col="deadline">${deadline}</td>
+    <td data-col="rfi" class="eng-col-rfi" style="text-align:center">${e.rfi_count != null ? e.rfi_count : '-'}</td>
+    <td class="eng-col-progress">${progressBar(e.progress)}</td>
+  </tr>`;
+}
+
+export function renderEngagementGrid(user, engagements, options = {}) {
+  const { filter = 'all', teams = [], years = [] } = options;
+  const myEng = engagements.filter(e => e.assigned_to === user?.id || (Array.isArray(e.users) && e.users.includes(user?.id)));
+  const teamEng = engagements.filter(e => e.team_id === user?.team_id);
+
+  const stageCounts = {};
+  STAGE_CONFIG.forEach(s => { stageCounts[s.key] = 0; });
+  engagements.forEach(e => { if (stageCounts[e.stage] !== undefined) stageCounts[e.stage]++; });
+
+  const stageStats = `<div class="stats-row">${STAGE_CONFIG.map(s =>
+    `<div class="stat-card stat-card-clickable" data-action="filterByStage" data-args='["${s.key}"]' id="stage-card-${s.key}">
+      <div class="stat-card-value">${stageCounts[s.key]||0}</div>
+      <div class="stat-card-label">${s.label}</div>
+    </div>`
+  ).join('')}</div>`;
+
+  const tabs = [
+    { key: 'all',  label: 'All Engagements', count: engagements.length },
+    { key: 'my',   label: 'My Engagements',  count: myEng.length },
+    { key: 'team', label: 'Team',            count: teamEng.length },
+  ];
+
+  const tabBar = `<div class="tab-bar">${tabs.map(t =>
+    `<button class="tab-btn${t.key === filter ? ' active' : ''}" data-action="switchTab" data-args='["${t.key}"]' id="tab-${t.key}">${t.label}<span class="tab-count">${t.count}</span></button>`
+  ).join('')}</div>`;
+
+  const addBtn = canCreate(user, 'engagement')
+    ? `<a href="/engagement/new" class="btn-primary-clean"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> New Engagement</a>`
+    : '';
+
+  const stageOpts = STAGE_CONFIG.map(s => `<option value="${s.key}">${s.label}</option>`).join('');
+  const teamOpts = teams.map(t => `<option value="${esc(t.id)}">${esc(t.name)}</option>`).join('');
+  const yearOpts = years.map(y => `<option value="${esc(y)}">${esc(y)}</option>`).join('');
+
+  const rows = engagements.map(e => engRow(e)).join('') ||
+    `<tr><td colspan="11" style="text-align:center;padding:48px;color:var(--color-text-muted)">No engagements found</td></tr>`;
+
+  const emailReceiveDialog = `<div id="email-receive-dialog" class="dialog-overlay" style="display:none" role="dialog" aria-modal="true">
+    <div class="dialog-panel" style="max-width:540px">
+      <div class="dialog-header"><span class="dialog-title">Receive Email</span><button class="dialog-close" onclick="document.getElementById('email-receive-dialog').style.display='none'">&times;</button></div>
+      <div class="dialog-body">
+        <div class="modal-form-group"><label>Email Content</label><textarea id="email-receive-content" class="form-input" rows="8" placeholder="Paste raw email content here..."></textarea></div>
+        <div id="email-receive-result" style="display:none;margin-top:8px"></div>
+      </div>
+      <div class="dialog-footer">
+        <button class="btn btn-ghost btn-sm" onclick="document.getElementById('email-receive-dialog').style.display='none'">Cancel</button>
+        <button class="btn btn-primary btn-sm" onclick="submitEmailReceive()">Process Email</button>
+      </div>
+    </div>
+  </div>`;
+
+  const emailReceiveScript = `async function submitEmailReceive(){var content=document.getElementById('email-receive-content').value.trim();var res=document.getElementById('email-receive-result');if(!content){res.style.display='block';res.innerHTML='<div style="color:var(--color-danger);font-size:13px">Email content required.</div>';return}res.style.display='block';res.innerHTML='<div style="font-size:13px">Processing...</div>';try{var r=await fetch('/api/email/receive',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({content:content})});var d=await r.json();if(r.ok&&d.success){res.innerHTML='<div style="color:var(--color-success);font-size:13px">Email processed successfully.'+(d.engagement_id?' Matched engagement: '+d.engagement_id:'')+(d.message?' '+d.message:'')+'</div>'}else{res.innerHTML='<div style="color:var(--color-danger);font-size:13px">'+(d.error||d.message||'Failed to process email')+'</div>'}}catch(e){res.innerHTML='<div style="color:var(--color-danger);font-size:13px">Error: '+e.message+'</div>'}}`;
+
+  const content = `<div class="page-header">
+        <div><h1 class="page-title">Engagements</h1><p class="page-subtitle">${engagements.length} total engagements</p></div>
+        ${addBtn}
+      </div>
+      ${stageStats}${tabBar}
+      <div class="table-wrap eng-table-mobile-scroll">
+        <div class="table-toolbar">
+          <div class="table-search"><input id="search-input" type="text" placeholder="Search engagements..."></div>
+          ${stageOpts ? `<div class="table-filter"><select data-filter="stage-raw" id="filter-stage"><option value="">All Stages</option>${stageOpts}</select></div>` : ''}
+          ${teamOpts ? `<div class="table-filter"><select data-filter="team" id="filter-team"><option value="">All Teams</option>${teamOpts}</select></div>` : ''}
+          ${yearOpts ? `<div class="table-filter"><select data-filter="year" id="filter-year"><option value="">All Years</option>${yearOpts}</select></div>` : ''}
+          <button class="btn btn-ghost btn-sm" onclick="document.getElementById('email-receive-dialog').style.display='flex'">Receive Email</button>
+          <span class="table-count" id="row-count">${engagements.length} items</span>
+        </div>
+        <table class="data-table">
+          <thead><tr>
+            <th data-sort="name">Name</th><th data-sort="client">Client</th><th data-sort="type" class="eng-col-type">Type</th>
+            <th data-sort="year" class="eng-col-year">Year</th><th data-sort="team" class="eng-col-team">Team</th><th data-sort="stage-raw">Stage</th>
+            <th style="display:none"></th><th data-sort="status">Status</th><th data-sort="deadline">Deadline</th>
+            <th data-sort="rfi" class="eng-col-rfi" style="text-align:center">RFI</th><th class="eng-col-progress">Progress</th>
+          </tr></thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>${emailReceiveDialog}`;
+
+  const stageFilterScript = `var _activeStage='';function filterByStage(stage){_activeStage=_activeStage===stage?'':stage;document.querySelectorAll('[id^="stage-card-"]').forEach(c=>{const s=c.id.replace('stage-card-','');c.style.outline=_activeStage===s?'2px solid var(--color-primary)':'none'});window.filterTable();}var _origFilter=window.filterTable||function(){};window.filterTable=function(){_origFilter();if(!_activeStage)return;const stageLabels=${JSON.stringify(Object.fromEntries(STAGE_CONFIG.map(s=>[s.key,s.label])))};document.querySelectorAll('tbody tr[data-row]').forEach(row=>{const stageCell=row.querySelector('[data-col="stage"]');if(stageCell&&!stageCell.textContent.toLowerCase().includes((stageLabels[_activeStage]||_activeStage||'').toLowerCase())){row.style.display='none';}})};function switchTab(tab){document.querySelectorAll('[id^="tab-"]').forEach(b=>b.classList.toggle('active',b.id==='tab-'+tab))}`;
+
+  return page(user, 'Engagements | Moonlanding', null, content, [TABLE_SCRIPT, stageFilterScript, emailReceiveScript]);
+}

package/src/ui/entity-renderer.js

@@ -0,0 +1,176 @@
+import { h } from '@/ui/webjsx.js'
+import { page, confirmDialog, dataTable } from '@/ui/layout.js'
+import { fmtVal, TOAST_SCRIPT } from '@/ui/render-helpers.js'
+import { canCreate, canEdit, canDelete } from '@/ui/permissions-ui.js'
+
+export function renderEntityList(entityName, items, spec, user, options = {}) {
+  const label = spec?.labelPlural || spec?.label || entityName
+  const fields = spec?.fields || {}
+  const { groupBy = null } = options
+  let listFields = Object.entries(fields).filter(([k, f]) => f.list).slice(0, 5)
+  if (!listFields.length) listFields = Object.entries(fields).filter(([k]) => !['created_by', 'updated_by'].includes(k)).slice(0, 6)
+  if (!listFields.length && items.length > 0) listFields = Object.keys(items[0]).filter(k => !['created_by', 'updated_by'].includes(k)).slice(0, 5).map(k => [k, { label: k }])
+  const headers = listFields.map(([k, f]) => `<th>${f?.label || k}</th>`).join('') + '<th>Actions</th>'
+  const userCanEdit = canEdit(user, entityName)
+  const userCanDelete = canDelete(user, entityName)
+  const userCanCreate = canCreate(user, entityName)
+
+  const buildRow = item => {
+    const cells = listFields.map(([k]) => `<td>${fmtVal(item[k], k, item)}</td>`).join('')
+    const editBtn = userCanEdit ? `<a href="/${entityName}/${item.id}/edit" class="btn btn-xs btn-outline">Edit</a>` : `<span class="btn btn-xs btn-outline btn-disabled tooltip" data-tip="No permission">Edit</span>`
+    const delBtn = userCanDelete ? `<button data-stop-propagation="true" data-action="confirmDelete" data-args='["${item.id}"]' class="btn btn-xs btn-error btn-outline">Delete</button>` : `<span class="btn btn-xs btn-error btn-outline btn-disabled tooltip" data-tip="No permission">Delete</span>`
+    return `<tr class="hover cursor-pointer" data-searchable tabindex="0" role="link" data-navigate="/${entityName}/${item.id}" onkeydown="if(event.key==='Enter'){window.location='/${entityName}/${item.id}'}">${cells}<td class="flex gap-1"><a href="/${entityName}/${item.id}" class="btn btn-xs btn-ghost">View</a>${editBtn}${delBtn}</td></tr>`
+  }
+
+  let tableContent
+  if (groupBy && items.length > 0) {
+    const groups = {}
+    items.forEach(item => { const key = String(item[groupBy] || '(No ' + groupBy + ')'); if (!groups[key]) groups[key] = []; groups[key].push(item) })
+    const sortedKeys = Object.keys(groups).sort()
+    const groupRows = sortedKeys.map(gkey => {
+      const groupItems = groups[gkey]
+      const groupId = `group-${gkey.replace(/\s+/g, '-').toLowerCase()}`
+      const togglerId = `toggle-${gkey.replace(/\s+/g, '-').toLowerCase()}`
+      const itemRows = groupItems.map(buildRow).join('')
+      return `<tbody class="group-section" data-group="${gkey}"><tr class="group-header hover cursor-pointer" tabindex="0" data-toggle="${togglerId}"><td colspan="100" style="padding:12px"><div class="flex items-center gap-2"><input type="checkbox" id="${togglerId}" class="group-toggle" style="cursor:pointer" checked/><span class="font-semibold text-base">${gkey}</span><span class="badge badge-sm">${groupItems.length}</span></div></td></tr><tr class="group-content" id="${groupId}" style="display:contents"><td colspan="100"><table class="data-table" style="background:transparent"><tbody>${itemRows}</tbody></table></td></tr></tbody>`
+    }).join('')
+    tableContent = `<div class="card-clean"><div class="table-wrap"><table class="data-table"><thead><tr>${headers}</tr></thead>${groupRows}</table></div></div>`
+  } else {
+    const rows = items.map(buildRow).join('')
+    tableContent = dataTable(headers, rows, items.length === 0 ? (userCanCreate ? `No items found. <a href="/${entityName}/new" class="text-primary hover:underline">Create your first ${label.toLowerCase()}</a>` : 'No items found.') : '')
+  }
+
+  const createBtn = userCanCreate ? `<a href="/${entityName}/new" class="btn btn-primary btn-sm">Create New</a>` : ''
+  const content = `<div class="flex justify-between items-center mb-6"><h1 class="text-2xl font-bold">${label}</h1><div class="flex gap-2"><label for="search-input" class="sr-only">Search</label><input type="text" id="search-input" placeholder="Search..." class="input input-solid input-sm" style="width:200px" aria-label="Search items"/>${createBtn}</div></div>${tableContent}${userCanDelete ? confirmDialog(entityName) : ''}`
+
+  const deleteScript = `let pendingDeleteId=null;window.confirmDelete=(id)=>{pendingDeleteId=id;document.getElementById('confirm-dialog').style.display='flex'};window.cancelDelete=()=>{pendingDeleteId=null;document.getElementById('confirm-dialog').style.display='none'};window.executeDelete=async()=>{if(!pendingDeleteId)return;const btn=document.getElementById('confirm-delete-btn');btn.classList.add('btn-loading');btn.textContent='Deleting...';try{const res=await fetch('/api/${entityName}/'+pendingDeleteId,{method:'DELETE'});if(res.ok){showToast('Deleted successfully','success');setTimeout(()=>window.location.reload(),500)}else{const d=await res.json().catch(()=>({}));showToast(d.message||d.error||'Delete failed','error');cancelDelete();btn.classList.remove('btn-loading');btn.textContent='Delete'}}catch(err){showToast('Error: '+err.message,'error');cancelDelete();btn.classList.remove('btn-loading');btn.textContent='Delete'}}`
+  const searchScript = `function initSearch(){const si=document.getElementById('search-input');const tb=document.querySelectorAll('[data-searchable]');const groups=document.querySelectorAll('[data-group]');let visibleGroupCount=0;si.addEventListener('input',(e)=>{const query=e.target.value.toLowerCase().trim();const terms=query.length>0?query.split(/\\s+/):[],hasResults=terms.length>0;visibleGroupCount=0;groups.forEach(g=>{const rows=g.querySelectorAll('[data-searchable]');let visibleRows=0;rows.forEach(r=>{const text=r.textContent.toLowerCase();const matches=terms.every(t=>text.includes(t));r.style.display=matches?'':'none';if(matches)visibleRows++});const groupVisible=visibleRows>0;g.style.display=groupVisible?'':'none';if(groupVisible)visibleGroupCount++;const badge=g.querySelector('.badge');if(badge)badge.textContent=visibleRows});tb.forEach(r=>{if(!r.closest('[data-group]')){const text=r.textContent.toLowerCase();const matches=query.length===0||terms.every(t=>text.includes(t));r.style.display=matches?'':'none'}});const totalVisible=document.querySelectorAll('[data-searchable]:not([style*="display: none"])').length,noResults=hasResults&&totalVisible===0;let msg=document.getElementById('search-no-results');if(noResults&&!msg){msg=document.createElement('tr');msg.id='search-no-results';msg.innerHTML='<td colspan="100" class="text-center py-8 text-base-content/50">No results found for "'+query+'"</td>';const tbody=document.getElementById('table-body')||document.querySelector('tbody');if(tbody)tbody.appendChild(msg)}else if(!noResults&&msg)msg.remove()});const toggles=document.querySelectorAll('.group-toggle');toggles.forEach(tog=>{tog.addEventListener('change',(e)=>{e.stopPropagation();const row=tog.closest('tr');const tbody=row.parentElement;const content=tbody.querySelector('.group-content');content.style.display=tog.checked?'contents':'none'})});if(si.value)si.dispatchEvent(new Event('input'))}document.addEventListener('DOMContentLoaded',initSearch)`
+  return page(user, `${label} | Moonlanding`, [{ href: '/', label: 'Dashboard' }, { href: `/${entityName}`, label }], content, [TOAST_SCRIPT, deleteScript, searchScript])
+}
+
+const HIDDEN_FIELDS = new Set(['password_hash', 'password', 'session_token', 'photo_url'])
+const KNOWN_ROLE_LABELS = { admin:'Admin', partner:'Partner', manager:'Manager', clerk:'Clerk', user:'User', auditor:'Auditor', client_admin:'Client Admin', client_user:'Client User' }
+
+function roleLabel(r) {
+  const key = (r || '').toLowerCase()
+  return KNOWN_ROLE_LABELS[key] || (key.length > 8 ? 'Staff' : (key.charAt(0).toUpperCase() + key.slice(1)))
+}
+
+function formatFieldValue(k, v, entityName) {
+  if (entityName === 'user' && k === 'role') return `<span class="pill pill-neutral">${roleLabel(v)}</span>`
+  if (entityName === 'user' && k === 'status') {
+    const cls = v === 'active' ? 'pill-success' : v === 'deleted' ? 'pill-danger' : 'pill-neutral'
+    return `<span class="pill ${cls}">${v ? v.charAt(0).toUpperCase() + v.slice(1) : '-'}</span>`
+  }
+  if (entityName === 'user' && k === 'email' && v) return `<a href="mailto:${v}" class="text-primary hover:underline">${v}</a>`
+  if (k === 'photo_url' && v && v.startsWith('http')) return `<img src="${v}" style="width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover" alt="avatar" onerror="this.style.display='none'/>`
+  return fmtVal(v, k)
+}
+
+export function renderEntityDetail(entityName, item, spec, user) {
+  const label = spec?.label || entityName
+  const fields = spec?.fields || {}
+  const userCanEdit = canEdit(user, entityName)
+  const userCanDelete = canDelete(user, entityName)
+
+  const visibleFields = Object.entries(fields).filter(([k]) => k !== 'id' && !HIDDEN_FIELDS.has(k) && item[k] !== undefined)
+
+  const fieldRows = visibleFields.map(([k, f]) =>
+    `<div class="detail-row">
+      <span class="detail-row-label">${f.label || k}</span>
+      <span class="detail-row-value">${formatFieldValue(k, item[k], entityName)}</span>
+    </div>`
+  ).join('')
+
+  const displayName = item.name || item.title || label
+  const initials = (displayName || '?').charAt(0).toUpperCase()
+  const statusCls = item.status === 'active' ? 'pill-success' : item.status === 'deleted' ? 'pill-danger' : 'pill-neutral'
+  const statusLabel2 = item.status ? item.status.charAt(0).toUpperCase() + item.status.slice(1) : '-'
+
+  const headerExtra = entityName === 'user' ? `
+    <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem">
+      <div style="width:3.5rem;height:3.5rem;border-radius:50%;background:#e0f2fe;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:#0369a1;flex-shrink:0">
+        ${item.photo_url ? `<img src="${item.photo_url}" style="width:3.5rem;height:3.5rem;border-radius:50%;object-fit:cover" alt="${displayName}" onerror="this.style.display='none'"/>` : initials}
+      </div>
+      <div>
+        <h1 style="font-size:1.5rem;font-weight:700;margin:0">${displayName}</h1>
+        <div style="display:flex;align-items:center;gap:0.5rem;margin-top:0.375rem">
+          <span class="pill pill-neutral">${roleLabel(item.role)}</span>
+          <span class="pill ${statusCls}">${statusLabel2}</span>
+          ${item.user_type ? `<span style="font-size:0.75rem;color:var(--color-text-muted)">${item.user_type}</span>` : ''}
+        </div>
+      </div>
+    </div>` : `<div style="margin-bottom:1.5rem"><h1 style="font-size:1.5rem;font-weight:700">${displayName}</h1></div>`
+
+  const editBtn = userCanEdit ? `<a href="/${entityName}/${item.id}/edit" class="btn btn-outline btn-sm">Edit</a>` : ''
+  const delBtn = userCanDelete ? `<button data-action="showDeleteConfirm" class="btn btn-error btn-outline btn-sm">Delete</button>` : ''
+
+  const content = `
+    <div style="display:flex;justify-content:space-between;align-items:flex-start">
+      <div style="flex:1">${headerExtra}</div>
+      <div style="display:flex;gap:0.5rem;margin-left:1rem">${editBtn}${delBtn}</div>
+    </div>
+    <div class="card-clean">
+      <div class="card-clean-body"><div class="detail-grid">${fieldRows || '<p style="color:var(--color-text-muted);font-size:0.875rem;grid-column:1/-1">No details available</p>'}</div></div>
+    </div>
+    ${userCanDelete ? confirmDialog(entityName) : ''}`
+
+  const script = `${TOAST_SCRIPT}window.showDeleteConfirm=()=>{document.getElementById('confirm-dialog').style.display='flex'};window.hideDeleteConfirm=()=>{document.getElementById('confirm-dialog').style.display='none'};window.executeDelete=async()=>{const btn=document.getElementById('confirm-delete-btn');btn.classList.add('btn-loading');btn.textContent='Deleting...';try{const res=await fetch('/api/${entityName}/${item.id}',{method:'DELETE'});if(res.ok){showToast('Deleted successfully','success');setTimeout(()=>{window.location='/${entityName}'},500)}else{const d=await res.json().catch(()=>({}));showToast(d.message||d.error||'Delete failed','error');hideDeleteConfirm();btn.classList.remove('btn-loading');btn.textContent='Delete'}}catch(err){showToast('Error: '+err.message,'error');hideDeleteConfirm();btn.classList.remove('btn-loading');btn.textContent='Delete'}}`
+  const bc = [{ href: '/', label: 'Dashboard' }, { href: `/${entityName}`, label: spec?.labelPlural || label }, { label: item.name || item.title || `#${item.id}` }]
+  return page(user, `${label} Detail`, bc, content, [script])
+}
+
+export function renderEntityForm(entityName, item, spec, user, isNew = false, refOptions = {}) {
+  const label = spec?.label || entityName
+  const fields = spec?.fields || {}
+  const lbl = (k, f, req) => `<label class="form-label" for="field-${k}">${f.label||k}${req ? '<span class="req">*</span>' : ''}</label>`
+  const formFields = Object.entries(fields).filter(([k, f]) => k !== 'id' && !f.auto && !f.readOnly && !f.auto_generate && k !== 'password_hash').map(([k, f]) => {
+    const val = item?.[k] ?? f.default ?? ''
+    const req = f.required ? 'required' : ''
+    const type = f.type === 'number' || f.type === 'int' || f.type === 'decimal' ? 'number' : f.type === 'email' ? 'email' : f.type === 'timestamp' || f.type === 'date' ? 'date' : f.type === 'bool' ? 'checkbox' : 'text'
+    const placeholder = `placeholder="Enter ${(f.label||k).toLowerCase()}"`
+    if (entityName === 'user' && k === 'role') {
+      const opts = ['partner','manager','clerk','client_admin','client_user'].map(o => `<option value="${o}" ${val===o?'selected':''}>${o.charAt(0).toUpperCase()+o.slice(1).replace('_',' ')}</option>`).join('')
+      return `<div class="form-field">${lbl(k,{label:'Role'},true)}<select id="field-role" name="role" class="form-input" required>${opts}</select></div>`
+    }
+    if (entityName === 'user' && k === 'status') {
+      const opts = ['active','inactive','pending'].map(o => `<option value="${o}" ${val===o?'selected':''}>${o.charAt(0).toUpperCase()+o.slice(1)}</option>`).join('')
+      return `<div class="form-field">${lbl(k,{label:'Status'},false)}<select id="field-status" name="status" class="form-input">${opts}</select></div>`
+    }
+    if (f.type === 'ref' && refOptions[k]) {
+      const opts = refOptions[k].map(o => `<option value="${o.value}" ${val===o.value?'selected':''}>${o.label}</option>`).join('')
+      return `<div class="form-field">${lbl(k,f,f.required)}<select id="field-${k}" name="${k}" class="form-input" ${req}><option value="">Select ${f.label||k}...</option>${opts}</select></div>`
+    }
+    if (f.type === 'textarea') return `<div class="form-field full">${lbl(k,f,f.required)}<textarea id="field-${k}" name="${k}" class="form-input" style="min-height:100px;resize:vertical" ${req} placeholder="Enter ${(f.label||k).toLowerCase()}">${val}</textarea></div>`
+    if (f.type === 'bool') return `<div class="form-field"><label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="checkbox" id="field-${k}" name="${k}" class="checkbox checkbox-primary" ${val?'checked':''}/><span class="form-label" style="margin:0">${f.label||k}</span></label></div>`
+    if (f.type === 'enum' && f.options) {
+      const opts = (Array.isArray(f.options) ? f.options : []).map(o => { const ov = typeof o === 'string' ? o : o.value; const ol = typeof o === 'string' ? o : o.label; return `<option value="${ov}" ${val===ov?'selected':''}>${ol}</option>` }).join('')
+      return `<div class="form-field">${lbl(k,f,f.required)}<select id="field-${k}" name="${k}" class="form-input" ${req}><option value="">Select ${f.label||k}...</option>${opts}</select></div>`
+    }
+    return `<div class="form-field">${lbl(k,f,f.required)}<input type="${type}" id="field-${k}" name="${k}" value="${val}" class="form-input" ${req} ${placeholder}/></div>`
+  }).join('\n')
+
+  const pwField = entityName === 'user' ? `<div class="form-field"><label class="form-label" for="field-new-password">New Password <small style="font-weight:400;color:var(--color-text-muted)">(leave blank to keep unchanged)</small></label><input type="password" id="field-new-password" name="new_password" class="form-input" placeholder="Enter new password" autocomplete="new-password"/></div>` : ''
+  const bc = isNew
+    ? [{ href: '/', label: 'Dashboard' }, { href: `/${entityName}`, label: spec?.labelPlural || label }, { label: 'Create' }]
+    : [{ href: '/', label: 'Dashboard' }, { href: `/${entityName}`, label: spec?.labelPlural || label }, { href: `/${entityName}/${item?.id}`, label: item?.name || item?.title || `#${item?.id}` }, { label: 'Edit' }]
+  const content = `<div class="form-shell"><div style="margin-bottom:24px"><h1 style="font-size:24px;font-weight:700">${isNew ? 'Create' : 'Edit'} ${label}</h1></div>
+    <div class="form-section"><form id="entity-form" class="form-grid" aria-label="${isNew ? 'Create' : 'Edit'} ${label}">${formFields}${pwField}
+    <div class="form-actions" style="grid-column:1/-1"><button type="submit" id="submit-btn" class="btn-primary-clean"><span class="btn-text">Save</span><span class="btn-loading-text" style="display:none">Saving...</span></button>
+    <a href="/${entityName}${isNew ? '' : '/' + item?.id}" class="btn-ghost-clean">Cancel</a></div></form></div></div>`
+  const script = `${TOAST_SCRIPT}const form=document.getElementById('entity-form');const sb=document.getElementById('submit-btn');form.addEventListener('submit',async(e)=>{e.preventDefault();sb.classList.add('btn-loading');sb.querySelector('.btn-text').style.display='none';sb.querySelector('.btn-loading-text').style.display='inline';sb.disabled=true;const fd=new FormData(form);const data={};for(const[k,v]of fd.entries())data[k]=v;form.querySelectorAll('input[type=checkbox]').forEach(cb=>{data[cb.name]=cb.checked});form.querySelectorAll('input[type=number]').forEach(inp=>{if(inp.name&&data[inp.name]!==undefined&&data[inp.name]!=='')data[inp.name]=Number(data[inp.name])});const url=${isNew}?'/api/${entityName}':'/api/${entityName}/${item?.id}';const method=${isNew}?'POST':'PUT';try{const res=await fetch(url,{method,headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});const result=await res.json();if(res.ok){showToast('${isNew?'Created':'Updated'} successfully!','success');const ed=result.data||result;setTimeout(()=>{window.location='/${entityName}/'+(ed.id||'${item?.id}')},500)}else{showToast(result.message||result.error||'Save failed','error');sb.classList.remove('btn-loading');sb.querySelector('.btn-text').style.display='inline';sb.querySelector('.btn-loading-text').style.display='none';sb.disabled=false}}catch(err){showToast('Error: '+err.message,'error');sb.classList.remove('btn-loading');sb.querySelector('.btn-text').style.display='inline';sb.querySelector('.btn-loading-text').style.display='none';sb.disabled=false}})`
+  return page(user, `${isNew ? 'Create' : 'Edit'} ${label}`, bc, content, [script])
+}
+
+export function renderSettings(user, config = {}) {
+  const t = config.thresholds || {}
+  const sections = [
+    { title: 'System Information', items: [['Database Type', config.database?.type || 'SQLite'], ['Server Port', config.server?.port || 3004], ['Session TTL', (t.cache?.session_ttl_seconds || 3600) + 's'], ['Page Size (Default)', t.system?.default_page_size || 50], ['Page Size (Max)', t.system?.max_page_size || 500]] },
+    { title: 'RFI Configuration', items: [['Max Days Outstanding', (t.rfi?.max_days_outstanding || 90) + ' days'], ['Escalation Delay', (t.rfi?.escalation_delay_hours || 24) + ' hours'], ['Notification Days', (t.rfi?.notification_days || [7,3,1,0]).join(', ')]] },
+    { title: 'Email Configuration', items: [['Batch Size', t.email?.send_batch_size || 10], ['Max Retries', t.email?.send_max_retries || 3], ['Rate Limit Delay', (t.email?.rate_limit_delay_ms || 6000) + 'ms']] },
+    { title: 'Workflow Configuration', items: [['Stage Transition Lockout', (t.workflow?.stage_transition_lockout_minutes || 5) + ' minutes'], ['Collaborator Default Expiry', (t.collaborator?.default_expiry_days || 7) + ' days'], ['Collaborator Max Expiry', (t.collaborator?.max_expiry_days || 30) + ' days']] },
+  ]
+  const cards = sections.map(s => `<div class="card-clean"><div class="card-clean-body"><h2 style="font-size:1rem;font-weight:600">${s.title}</h2><div class="space-y-4 mt-4">${s.items.map(([l, v]) => `<div class="flex justify-between py-2 border-b border-base-200"><span class="text-base-content/50 text-sm">${l}</span><span class="font-medium text-sm">${v}</span></div>`).join('')}</div></div></div>`).join('')
+  return page(user, 'System Settings | Moonlanding', [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }],
+    `<h1 class="text-2xl font-bold mb-6">System Settings</h1><div class="grid grid-cols-1 lg:grid-cols-2 gap-6">${cards}</div>`)
+}

package/src/ui/event-delegation.js

@@ -0,0 +1,108 @@
+window.__events = window.__events || {
+  handlers: new Map(),
+  register(name, fn) { this.handlers.set(name, fn); },
+  dispatch(name, event, target, params) {
+    const fn = this.handlers.get(name);
+    if (fn) return fn(event, target, params);
+    if (typeof window[name] === 'function') {
+      const args = target?.dataset?.args ? JSON.parse(target.dataset.args) : [];
+      if ('passEvent' in (target?.dataset || {})) args.unshift(event);
+      if ('self' in (target?.dataset || {})) args.push(target);
+      return window[name](...args);
+    }
+    console.warn(`Unknown action: ${name}`);
+  }
+};
+
+const eventDelegation = {
+  closeDialog(dialogId) {
+    const el = document.getElementById(dialogId);
+    if (el) el.style.display = 'none';
+  },
+
+  openDialog(e, target, params) {
+    const id = params?.dialogId || (target?.dataset?.args ? JSON.parse(target.dataset.args)[0] : null);
+    const el = id ? document.getElementById(id) : null;
+    if (el) el.style.display = 'flex';
+  },
+
+  printPage() { window.print(); },
+
+  navigate(path) { window.location = path; },
+
+  toggle(elementId, attr = 'checked') {
+    const el = document.getElementById(elementId);
+    if (el?.type === 'checkbox') el.checked = !el.checked;
+    else el.classList.toggle('active');
+  },
+
+  toggleDisplay(elementId) {
+    const el = document.getElementById(elementId);
+    if (el) el.style.display = el.style.display === 'none' ? '' : 'none';
+  },
+
+  setValue(elementId, value) {
+    const el = document.getElementById(elementId);
+    if (el) el.value = value;
+  },
+
+  setDisplay(elementId, show) {
+    const el = document.getElementById(elementId);
+    if (el) el.style.display = show ? '' : 'none';
+  },
+
+  remove(elementId) {
+    const el = document.getElementById(elementId);
+    if (el) el.remove();
+  },
+
+  focus(elementId) {
+    const el = document.getElementById(elementId);
+    if (el) el.focus();
+  }
+};
+
+Object.entries(eventDelegation).forEach(([name, fn]) => {
+  window.__events.register(name, fn);
+});
+
+document.addEventListener('click', (e) => {
+  const stopEl = e.target.closest('[data-stop-propagation]');
+  if (stopEl) { e.stopPropagation(); if (!stopEl.dataset.action) return; }
+
+  const overlay = e.target.closest('[data-overlay-close]');
+  if (overlay && e.target === overlay) { overlay.style.display = 'none'; return; }
+
+  let target = e.target.closest('[data-action], [data-dialog-close], [data-navigate], [data-toggle]');
+  if (!target) return;
+
+  if (target.classList.contains('dialog-overlay') && e.target === target) {
+    target.style.display = 'none';
+    return;
+  }
+
+  if (target.dataset.dialogClose) {
+    eventDelegation.closeDialog(target.dataset.dialogClose);
+    if (target.dataset.action) {
+      const params = target.dataset.params ? JSON.parse(target.dataset.params) : {};
+      window.__events.dispatch(target.dataset.action, e, target, params);
+    }
+  } else if (target.dataset.navigate) {
+    eventDelegation.navigate(target.dataset.navigate);
+  } else if (target.dataset.toggle) {
+    eventDelegation.toggle(target.dataset.toggle);
+  } else if (target.dataset.action) {
+    const params = target.dataset.params ? JSON.parse(target.dataset.params) : {};
+    window.__events.dispatch(target.dataset.action, e, target, params);
+  }
+}, true);
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    const dialog = document.querySelector('[role="dialog"]:not([style*="display:none"])');
+    if (dialog) {
+      dialog.style.display = 'none';
+      e.preventDefault();
+    }
+  }
+});

package/src/ui/fetch-json.js

@@ -0,0 +1,24 @@
+// Defensive JSON fetcher for client-side scripts. Loud-fail when an endpoint
+// returns non-JSON (almost always: a 302 -> /login HTML redirect, a 404 HTML
+// page, or an unrouted path falling through to the catch-all). Throws an Error
+// whose message identifies the URL, status, and observed content-type so the
+// failure can be triaged from the console rather than the cryptic
+// "Unexpected token '<', '<!DOCTYPE '... is not valid JSON" SyntaxError.
+//
+// This module is server-rendered as an inline string so client scripts can
+// reference window.fetchJson without an import statement.
+
+export const FETCH_JSON_SCRIPT = `window.fetchJson=async function(url,opts){
+var o=Object.assign({credentials:'include',headers:{}},opts||{});
+o.headers=Object.assign({'accept':'application/json'},o.headers||{});
+var r=await fetch(url,o);
+var ct=(r.headers.get('content-type')||'').split(';')[0].trim();
+if(!ct.includes('json')){
+  var body=await r.text();
+  var snippet=body.slice(0,80).replace(/\\s+/g,' ');
+  throw new Error('fetchJson('+url+') expected JSON, got '+(ct||'(none)')+' status='+r.status+' body~='+snippet);
+}
+var data=await r.json();
+if(!r.ok){var err=new Error((data&&(data.error||data.message))||('fetchJson('+url+') status='+r.status));err.status=r.status;err.data=data;throw err;}
+return data;
+};`;

package/src/ui/file-dialogs.js

@@ -0,0 +1,81 @@
+import { statusLabel } from '@/ui/renderer.js';
+
+export function zipFileCreationDialog(engagementId) {
+  return `<div id="zip-create-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="zip-create-dialog-title" aria-hidden="true">
+    <div class="dialog-panel"><div class="dialog-header"><span class="dialog-title" id="zip-create-dialog-title">Create Zip Archive</span><button class="dialog-close" data-dialog-close="zip-create-dialog" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body"><div id="zcd-files" class="flex flex-col gap-2" style="max-height:300px;overflow:auto"></div><div class="flex items-center gap-2 mt-3"><label class="flex items-center gap-2 text-sm"><input type="checkbox" id="zcd-all" class="checkbox checkbox-sm" checked/><span>Select All</span></label></div></div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="zip-create-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="zcdCreate">Create Zip</button></div>
+    </div></div>
+  <script>
+  window.openZipCreation=function(){document.getElementById('zip-create-dialog').style.display='flex';fetch('/api/file?engagement_id=${engagementId}').then(function(r){return r.json()}).then(function(d){var files=d.data||d||[];var el=document.getElementById('zcd-files');el.innerHTML=files.map(function(f){return'<label class="flex items-center gap-2"><input type="checkbox" class="checkbox checkbox-sm zcd-cb" value="'+f.id+'" checked/><span class="text-sm">'+(f.name||f.id)+'</span><span class="text-xs text-gray-400">'+(f.size?Math.round(f.size/1024)+'KB':'')+'</span></label>'}).join('')||'<div class="text-gray-500 text-sm">No files available</div>'}).catch(function(){})};
+  document.getElementById('zcd-all').addEventListener('change',function(){document.querySelectorAll('.zcd-cb').forEach(function(c){c.checked=this.checked}.bind(this))});
+  window.zcdCreate=async function(){var ids=[].slice.call(document.querySelectorAll('.zcd-cb:checked')).map(function(c){return c.value});if(!ids.length){showToast('Select files','error');return}showToast('Creating zip...','info');try{var r=await fetch('/api/file/zip',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({file_ids:ids,engagement_id:'${engagementId}'})});if(r.ok){var blob=await r.blob();var a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='files.zip';a.click();showToast('Zip downloaded','success')}else showToast('Failed','error')}catch(e){showToast('Error','error')}document.getElementById('zip-create-dialog').style.display='none'};
+  </script>`;
+}
+export function crossEngagementFilePicker(currentEngId) {
+  return `<div id="cross-file-picker" 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="cross-file-picker-title" aria-hidden="true">
+    <div class="dialog-panel" style="max-width:640px"><div class="dialog-header"><span class="dialog-title" id="cross-file-picker-title">Pick File from Another Engagement</span><button class="dialog-close" data-dialog-close="cross-file-picker" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body"><div class="modal-form-group"><label for="cfp-eng">Engagement</label><select id="cfp-eng" class="select select-bordered w-full" onchange="cfpLoadFiles()"></select></div><div id="cfp-files" class="flex flex-col gap-2 mt-3" style="max-height:300px;overflow:auto"></div></div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="cross-file-picker">Close</button></div>
+    </div></div>
+  <script>
+  window.openCrossFilePicker=function(){document.getElementById('cross-file-picker').style.display='flex';fetch('/api/engagement').then(function(r){return r.json()}).then(function(d){var engs=d.data||d||[];var sel=document.getElementById('cfp-eng');while(sel.options.length>0)sel.remove(0);engs.filter(function(e){return e.id!=='${currentEngId}'}).forEach(function(e){var o=document.createElement('option');o.value=e.id;o.textContent=e.name||e.id;sel.appendChild(o)});if(sel.options.length)cfpLoadFiles()}).catch(function(){})};
+  window.cfpLoadFiles=function(){var eid=document.getElementById('cfp-eng').value;if(!eid)return;fetch('/api/file?engagement_id='+eid).then(function(r){return r.json()}).then(function(d){var files=d.data||d||[];document.getElementById('cfp-files').innerHTML=files.map(function(f){return'<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded"><span class="text-sm">'+(f.name||f.id)+'</span><button class="btn btn-xs btn-primary" data-action="cfpLink" data-args='["'+f.id+'"]'>Link</button></div>'}).join('')||'<div class="text-gray-500 text-sm">No files</div>'}).catch(function(){})};
+  window.cfpLink=async function(fid){try{var r=await fetch('/api/file/link',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({file_id:fid,engagement_id:'${currentEngId}'})});if(r.ok){showToast('File linked','success');document.getElementById('cross-file-picker').style.display='none'}else showToast('Failed','error')}catch(e){showToast('Error','error')}};
+  </script>`;
+}
+export function fileUploadPanel(entityType, entityId) {
+  return `<div class="card-clean" style="margin-bottom:1rem"><div class="card-clean-body"><h3 style="font-size:0.875rem;font-weight:600">Upload Files</h3><div class="mt-3"><input type="file" id="fup-files" class="file-input file-input-bordered w-full" multiple/><div class="flex justify-end mt-2"><button class="btn btn-primary btn-sm" data-action="fupUpload">Upload</button></div><div id="fup-progress" class="text-sm text-gray-500 mt-2"></div></div></div></div>
+  <script>
+  window.fupUpload=async function(){var files=document.getElementById('fup-files').files;if(!files.length){showToast('Select files','error');return}var prog=document.getElementById('fup-progress');var ok=0;for(var i=0;i<files.length;i++){prog.textContent='Uploading '+(i+1)+'/'+files.length;var fd=new FormData();fd.append('file',files[i]);fd.append('entity_type','${entityType}');fd.append('entity_id','${entityId}');try{var r=await fetch('/api/file/upload',{method:'POST',body:fd});if(r.ok)ok++}catch(e){}}prog.textContent=ok+'/'+files.length+' uploaded';if(ok>0)showToast(ok+' files uploaded','success')};
+  </script>`;
+}
+export function userCvUpload(userId) {
+  return `<div class="card-clean" style="margin-bottom:1rem"><div class="card-clean-body"><h3 style="font-size:0.875rem;font-weight:600">Upload CV</h3><div class="mt-3"><input type="file" id="cv-file" class="file-input file-input-bordered w-full" accept=".pdf,.doc,.docx"/><div class="flex justify-end mt-2"><button class="btn btn-primary btn-sm" data-action="cvUpload">Upload CV</button></div></div></div></div>
+  <script>
+  window.cvUpload=async function(){var file=document.getElementById('cv-file').files[0];if(!file){showToast('Select a file','error');return}var fd=new FormData();fd.append('file',file);fd.append('entity_type','user_cv');fd.append('entity_id','${userId}');try{var r=await fetch('/api/file/upload',{method:'POST',body:fd});if(r.ok)showToast('CV uploaded','success');else showToast('Upload failed','error')}catch(e){showToast('Error','error')}};
+  </script>`;
+}
+export function quickViewAttachment() {
+  return `<div id="quick-view" 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="quick-view-title" aria-hidden="true">
+    <div class="dialog-panel" style="max-width:900px;max-height:90vh"><div class="dialog-header"><span class="dialog-title" id="quick-view-title">Preview</span><button class="dialog-close" data-dialog-close="quick-view" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body" style="overflow:auto;max-height:75vh"><div id="qv-content" class="text-center"><div class="text-gray-500">Loading...</div></div></div>
+      <div class="dialog-footer"><a id="qv-download" href="#" download class="btn btn-primary btn-sm">Download</a><button class="btn btn-ghost btn-sm" data-dialog-close="quick-view">Close</button></div>
+    </div></div>
+  <script>
+  window.quickView=function(url,name,type){document.getElementById('quick-view').style.display='flex';document.getElementById('quick-view-title').textContent=name||'Preview';document.getElementById('qv-download').href=url;var c=document.getElementById('qv-content');if(type&&type.startsWith('image/')){c.innerHTML='<img src="'+url+'" alt="'+(name||'File preview')+'" style="max-width:100%;max-height:70vh"/>'}else if(type==='application/pdf'){c.innerHTML='<iframe src="'+url+'" style="width:100%;height:70vh;border:none"></iframe>'}else{c.innerHTML='<div class="py-8 text-gray-500"><div style="font-size:3rem">&#128196;</div><div class="mt-2">'+name+'</div><div class="text-xs mt-1">Preview not available</div></div>'}};
+  </script>`;
+}
+export function fetchCachedPdf(fileId) {
+  return `<script>
+  window.fetchCachedPdf=function(id){var cacheKey='pdf_cache_'+id;var cached=sessionStorage.getItem(cacheKey);if(cached){return Promise.resolve(cached)}return fetch('/api/file/'+(id||'${fileId}')+'/download').then(function(r){return r.blob()}).then(function(b){var url=URL.createObjectURL(b);sessionStorage.setItem(cacheKey,url);return url})};
+  </script>`;
+}
+export function fileAttachmentBar(files = []) {
+  if (!files.length) return '';
+  const items = files.map(f => `<div class="flex items-center gap-2 p-1 rounded hover:bg-gray-100 cursor-pointer" data-action="quickView" data-args='["/api/file/${f.id}/download","${(f.name || '').replace(/"/g, '&quot;')}","${f.mime_type || ''}"]'><span style="font-size:1.2rem">&#128206;</span><span class="text-xs truncate" style="max-width:120px">${f.name || 'file'}</span></div>`).join('');
+  return `<div class="flex flex-wrap gap-1 mt-2">${items}</div>`;
+}
+export function fileLinksBar(links = []) {
+  if (!links.length) return '';
+  const items = links.map(l => `<a href="${l.url || '#'}" target="_blank" class="flex items-center gap-1 p-1 rounded hover:bg-gray-100 text-xs text-blue-600"><span>&#128279;</span><span class="truncate" style="max-width:150px">${l.name || l.url || 'Link'}</span></a>`).join('');
+  return `<div class="flex flex-wrap gap-1 mt-2">${items}</div>`;
+}
+export function reviewAttachmentChoiceDialog(reviewId) {
+  return `<div id="rev-attach-choice" 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="rev-attach-choice-title" aria-hidden="true">
+    <div class="dialog-panel"><div class="dialog-header"><span class="dialog-title" id="rev-attach-choice-title">Add Attachment</span><button class="dialog-close" data-dialog-close="rev-attach-choice" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body"><div class="flex flex-col gap-3"><button class="btn btn-outline w-full text-left" data-dialog-close="rev-attach-choice" data-action="triggerUpload">&#128206; Upload New File</button><button class="btn btn-outline w-full text-left" data-dialog-close="rev-attach-choice" data-action="openCrossFilePicker">&#128279; Link Existing File</button><button class="btn btn-outline w-full text-left" data-dialog-close="rev-attach-choice" data-action="racUrl">&#127760; Add URL</button></div><input type="file" id="rac-upload" style="display:none" onchange="racUploadFile()"/></div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="rev-attach-choice">Cancel</button></div>
+    </div></div>
+  <script>
+  window.openRevAttachChoice=function(){document.getElementById('rev-attach-choice').style.display='flex'};
+  window.racUploadFile=async function(){var file=document.getElementById('rac-upload').files[0];if(!file)return;var fd=new FormData();fd.append('file',file);fd.append('review_id','${reviewId}');try{var r=await fetch('/api/file/upload',{method:'POST',body:fd});if(r.ok)showToast('Attached','success');else showToast('Failed','error')}catch(e){showToast('Error','error')}};
+  window.racUrl=function(){var url=prompt('Enter URL:');if(!url)return;fetch('/api/file',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_id:'${reviewId}',url:url,name:url,type:'link'})}).then(function(r){if(r.ok)showToast('Link added','success');else showToast('Failed','error')}).catch(function(){showToast('Error','error')})};
+  </script>`;
+}
+export function uploadFridayFilesCrossApp(engagementId) {
+  return `<div class="card-clean" style="margin-bottom:1rem"><div class="card-clean-body"><h3 style="font-size:0.875rem;font-weight:600">Upload Friday Files</h3><p class="text-xs text-gray-500 mb-2">Upload files accessible from both Friday and MWR</p><input type="file" id="fxf-files" class="file-input file-input-bordered w-full" multiple/><div class="flex justify-end mt-2"><button class="btn btn-primary btn-sm" data-action="fxfUpload">Upload</button></div></div></div>
+  <script>
+  window.fxfUpload=async function(){var files=document.getElementById('fxf-files').files;if(!files.length){showToast('Select files','error');return}var ok=0;for(var i=0;i<files.length;i++){var fd=new FormData();fd.append('file',files[i]);fd.append('engagement_id','${engagementId}');fd.append('cross_app',true);try{var r=await fetch('/api/file/upload',{method:'POST',body:fd});if(r.ok)ok++}catch(e){}}if(ok)showToast(ok+' files uploaded','success')};
+  </script>`;
+}