thatcher 1.0.4

package/src/ui/dashboard-renderer.js

@@ -0,0 +1,150 @@
+import { page } from '@/ui/layout.js'
+import { getQuickActions } from '@/ui/permissions-ui.js'
+import { esc, stagePill, statusPill, TABLE_SCRIPT } from '@/ui/render-helpers.js'
+import { SPACING, renderCard } from '@/ui/spacing-system.js'
+
+export function renderDashboard(user, stats = {}) {
+  const isClerk = user?.role === 'clerk';
+  const statDefs = isClerk
+    ? [
+        { label: 'My RFIs',   value: stats.myRfis?.length || 0,     sub: 'Assigned to you',  href: '/rfi' },
+        { label: 'Overdue',   value: stats.overdueRfis?.length || 0, sub: 'Need attention',   href: '/rfi', warn: true },
+        { label: 'Reviews',   value: stats.reviews || 0,             sub: 'Total reviews',    href: '/review' },
+        { label: 'Clients',   value: stats.clients || 0,             sub: 'Active clients',   href: '/client' },
+      ]
+    : [
+        { label: 'Engagements', value: stats.engagements || 0, sub: 'Total engagements',  href: '/engagements' },
+        { label: 'Clients',     value: stats.clients || 0,     sub: 'Active clients',     href: '/client' },
+        { label: 'Open RFIs',   value: stats.rfis || 0,        sub: stats.overdueRfis?.length > 0 ? `${stats.overdueRfis.length} overdue` : 'All on track', href: '/rfi', warn: stats.overdueRfis?.length > 0 },
+        { label: 'Reviews',     value: stats.reviews || 0,     sub: 'Active reviews',     href: '/review' },
+      ];
+
+  const statsHtml = `<div class="stats-row">${statDefs.map(s => `<a href="${s.href}" class="stat-card stat-card-clickable" style="text-decoration:none">
+    <div class="stat-card-value${s.warn ? ' stat-card-warn' : ''}">${s.value}</div>
+    <div class="stat-card-label">${s.label}</div>
+    <div class="stat-card-sub">${esc(s.sub)}</div>
+  </a>`).join('')}</div>`;
+
+  const overdueAlert = stats.overdueRfis?.length > 0
+    ? `<div class="alert alert-error" style="margin-bottom:1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem">
+        <div style="display:flex;align-items:center;gap:0.5rem">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+          <span><strong>${stats.overdueRfis.length} overdue RFI${stats.overdueRfis.length !== 1 ? 's' : ''}</strong> require attention</span>
+        </div>
+        <a href="/rfi" class="btn-danger-clean" style="font-size:0.8125rem;padding:6px 14px;min-height:32px">View RFIs →</a>
+      </div>` : '';
+
+  const quickActions = getQuickActions(user);
+  const actionsHtml = quickActions.length > 0
+    ? `<div class="card-clean" style="margin-bottom:${SPACING.lg}"><div class="card-clean-body" style="padding:${SPACING.md}">
+        <div class="card-header">Quick Actions</div>
+        <div style="display:flex;flex-wrap:wrap;gap:${SPACING.sm}">${quickActions.map(a => `<a href="${a.href}" class="${a.primary ? 'btn-primary-clean' : 'btn-ghost-clean'}">${a.label}</a>`).join('')}</div>
+      </div></div>` : '';
+
+  const recentRows = (stats.recentEngagements || []).map(e => {
+    const updated = e.updated_at ? new Date(typeof e.updated_at === 'number' ? e.updated_at * 1000 : e.updated_at).toLocaleDateString() : '-';
+    return `<tr data-row data-navigate="/engagement/${esc(e.id)}" style="cursor:pointer">
+      <td data-col="name"><strong>${esc(e.name || e.client_name || 'Untitled')}</strong></td>
+      <td data-col="client">${esc(e.client_id_display || e.client_name || '-')}</td>
+      <td data-col="stage">${stagePill(e.stage)}</td>
+      <td data-col="status">${statusPill(e.status)}</td>
+      <td data-col="updated">${updated}</td>
+    </tr>`;
+  }).join('');
+
+  const emptyEngHtml = !isClerk && (stats.recentEngagements || []).length === 0
+    ? `<div class="card-clean" style="margin-bottom:${SPACING.lg}">
+        <div class="empty-state">
+          <svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 3H8L4 7h16l-4-4z"/></svg>
+          <div class="empty-state-title">No engagements yet</div>
+          <div class="empty-state-desc">Create your first engagement to get started tracking work.</div>
+          <a href="/engagements" class="btn-primary-clean">View Engagements</a>
+        </div>
+      </div>` : '';
+
+  const recentHtml = !isClerk && (stats.recentEngagements || []).length > 0
+    ? `<div class="table-wrap">
+        <div class="table-toolbar">
+          <div class="table-search"><input id="search-input" type="text" placeholder="Search engagements..."></div>
+          <span class="table-count" id="row-count">${(stats.recentEngagements||[]).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="stage">Stage</th><th data-sort="status">Status</th><th data-sort="updated">Updated</th></tr></thead>
+          <tbody>${recentRows}</tbody>
+        </table>
+      </div>` : '';
+
+  const content = `<div class="page-header">
+      <div>
+        <h1 class="page-title">Welcome back, ${esc(user?.name?.split(' ')[0] || 'there')}</h1>
+        <p class="page-subtitle">${new Date().toLocaleDateString('en-ZA', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</p>
+      </div>
+    </div>
+    ${statsHtml}${overdueAlert}${actionsHtml}${emptyEngHtml}${recentHtml}`;
+
+  return page(user, 'Dashboard | Moonlanding', [], content, [TABLE_SCRIPT]);
+}
+
+export function renderAuditDashboard(user, auditData = {}) {
+  const { summary = {}, recentActivity = [] } = auditData;
+  const actRows = recentActivity.slice(0, 20).map(a =>
+    `<tr data-row>
+      <td data-col="time">${new Date((a.timestamp||a.created_at)*1000).toLocaleString()}</td>
+      <td data-col="action"><span class="pill pill-info">${a.action||'-'}</span></td>
+      <td data-col="entity">${a.entity_type||'-'}</td>
+      <td data-col="id" style="font-size:12px">${a.entity_id||'-'}</td>
+      <td data-col="user">${a.user_name||a.user_id||'-'}</td>
+      <td data-col="reason" style="font-size:12px;color:var(--color-text-muted)">${a.reason||'-'}</td>
+    </tr>`
+   ).join('') || `<tr><td colspan="6" style="text-align:center;padding:${SPACING.xl};color:var(--color-text-muted)">No audit records found</td></tr>`;
+
+  const statsHtml = `<div class="stats-row">${[
+    { label: 'Total Actions (30d)', value: summary.total_actions || 0 },
+    { label: 'Permission Grants',   value: summary.grants || 0 },
+    { label: 'Permission Revokes',  value: summary.revokes || 0 },
+    { label: 'Role Changes',        value: summary.role_changes || 0 },
+  ].map(s => `<div class="stat-card"><div class="stat-card-value">${s.value}</div><div class="stat-card-label">${s.label}</div></div>`).join('')}</div>`;
+
+  const content = `<div class="page-header"><h1 class="page-title">Audit Dashboard</h1><a href="/permission_audit" class="btn-ghost-clean">View All Records</a></div>
+    ${statsHtml}
+    <div class="table-wrap">
+      <div class="table-toolbar">
+        <div class="table-search"><input id="search-input" type="text" placeholder="Search audit log..."></div>
+        <span class="table-count" id="row-count">${recentActivity.length} items</span>
+      </div>
+      <table class="data-table">
+        <thead><tr><th data-sort="time">Time</th><th data-sort="action">Action</th><th data-sort="entity">Entity Type</th><th data-sort="id">Entity ID</th><th data-sort="user">User</th><th data-sort="reason">Reason</th></tr></thead>
+        <tbody>${actRows}</tbody>
+      </table>
+    </div>`;
+
+  return page(user, 'Audit Dashboard | MOONLANDING', [{ href: '/', label: 'Dashboard' }, { href: '/admin/audit', label: 'Audit' }], content, [TABLE_SCRIPT]);
+}
+
+export function renderSystemHealth(user, healthData = {}) {
+  const { database = {}, server: srv = {}, entities = {} } = healthData;
+  const entRows = Object.entries(entities).map(([n, c]) =>
+    `<tr data-row><td data-col="entity">${n}</td><td data-col="count" style="text-align:right">${c}</td></tr>`
+   ).join('') || `<tr><td colspan="2" style="text-align:center;padding:${SPACING.xl};color:var(--color-text-muted)">No data</td></tr>`;
+
+  const statsHtml = `<div class="stats-row">${[
+    { label: 'Server Status', value: 'Online',                    sub: 'Port: '+(srv.port||3000) },
+    { label: 'Database',      value: database.status||'Connected', sub: 'Size: '+(database.size||'N/A') },
+    { label: 'Uptime',        value: srv.uptime||'N/A',            sub: 'Started: '+(srv.startTime||'N/A') },
+  ].map(s => `<div class="stat-card"><div class="stat-card-value" style="font-size:20px">${s.value}</div><div class="stat-card-label">${s.label}</div><div class="stat-card-sub">${s.sub}</div></div>`).join('')}</div>`;
+
+  const content = `<div class="page-header"><h1 class="page-title">System Health</h1></div>
+    ${statsHtml}
+    <div class="table-wrap">
+      <div class="table-toolbar">
+        <div class="table-search"><input id="search-input" type="text" placeholder="Search entities..."></div>
+        <span class="table-count" id="row-count">${Object.keys(entities).length} items</span>
+      </div>
+      <table class="data-table">
+        <thead><tr><th data-sort="entity">Entity</th><th data-sort="count" style="text-align:right">Count</th></tr></thead>
+        <tbody>${entRows}</tbody>
+      </table>
+    </div>`;
+
+  return page(user, 'System Health | MOONLANDING', [{ href: '/', label: 'Dashboard' }, { href: '/admin/health', label: 'Health' }], content, [TABLE_SCRIPT]);
+}

package/src/ui/dialog-engine.js

@@ -0,0 +1,147 @@
+import { getConfigEngineSync } from '@/lib/config-generator-engine';
+import { aria, role, focusTrap, keyboard } from '@/lib/accessibility';
+
+export function renderDialog(dialogId, context = {}) {
+  const config = getConfigEngineSync().getConfig();
+  const dialogConfig = config.dialogs?.[dialogId];
+
+  if (!dialogConfig) {
+    console.warn(`Dialog config not found: ${dialogId}`);
+    return '';
+  }
+
+  const { title, fields = [], actions = [], width = '640px', onSubmit } = dialogConfig;
+  const dialogHtml = generateDialogHtml(dialogId, title, fields, actions, width, context, onSubmit);
+
+  return dialogHtml;
+}
+
+function generateDialogHtml(dialogId, title, fields, actions, width, context, onSubmit) {
+  const titleId = `${dialogId}-title`;
+  const fieldHtml = fields.map(f => generateFieldHtml(f, dialogId, context)).join('');
+  const actionButtons = (actions || []).map(a => {
+    if (a.type === 'cancel') {
+      return `<button type="button" class="btn btn-ghost btn-sm" ${aria.label('Cancel dialog')} data-action="closeDialog" data-args='["${dialogId}"]'>${a.label || 'Cancel'}</button>`;
+    } else if (a.type === 'submit') {
+      return `<button type="button" class="btn btn-primary btn-sm" ${aria.label('Submit dialog')} data-action="submitDialog" data-args='["${dialogId}"]'>${a.label || 'Submit'}</button>`;
+    }
+    return '';
+  }).join('');
+
+  return `
+    <div id="${dialogId}" class="dialog-overlay" style="display:none" ${role.dialog} aria-modal="true" ${aria.labelledBy(titleId)} ${aria.hidden(true)} data-overlay-close="true" data-action="closeDialog" data-args='["${dialogId}"]' onkeydown="${keyboard.escape(`closeDialog('${dialogId}')`)}">
+      <div id="${dialogId}-panel" class="dialog-panel" style="max-width:${width}">
+        <div class="dialog-header">
+          <h2 id="${titleId}" class="dialog-title">${escapeHtml(title)}</h2>
+          <button type="button" class="dialog-close" ${aria.label('Close dialog')} data-action="closeDialog" data-args='["${dialogId}"]'>&times;</button>
+        </div>
+        <div class="dialog-body">
+          ${fieldHtml}
+        </div>
+        <div class="dialog-footer">
+          ${actionButtons}
+        </div>
+      </div>
+    </div>
+    <script>
+      window.closeDialog = window.closeDialog || function(id) {
+        const dlg = document.getElementById(id);
+        dlg.style.display = 'none';
+        dlg.setAttribute('aria-hidden', 'true');
+        ${focusTrap.deactivate('${dialogId}-panel')}
+        if (dlg._previousFocus) {
+          dlg._previousFocus.focus();
+          delete dlg._previousFocus;
+        }
+      };
+      window.submitDialog = window.submitDialog || function(id) {
+        const form = document.getElementById(id + '-form');
+        if (form) form.dispatchEvent(new Event('submit'));
+      };
+      window.openDialog = window.openDialog || function(id) {
+        const dlg = document.getElementById(id);
+        dlg._previousFocus = document.activeElement;
+        dlg.style.display = 'flex';
+        dlg.setAttribute('aria-hidden', 'false');
+        ${focusTrap.activate('${dialogId}-panel')}
+      };
+    </script>
+  `;
+}
+
+function generateFieldHtml(field, dialogId, context) {
+  const { name, label, type, required, placeholder, options, value } = field;
+  const fieldId = `${dialogId}-${name}`;
+  const requiredAttr = required ? 'required' : '';
+  const ariaRequired = required ? aria.required() : '';
+  const descId = field.description ? `${fieldId}-desc` : '';
+  const ariaDesc = descId ? aria.describedBy(descId) : '';
+
+  let inputHtml = '';
+
+  switch (type) {
+    case 'text':
+      inputHtml = `<input type="text" id="${fieldId}" name="${name}" class="input input-bordered w-full" placeholder="${placeholder || ''}" ${requiredAttr} ${ariaRequired} ${ariaDesc}/>`;
+      break;
+    case 'textarea':
+      inputHtml = `<textarea id="${fieldId}" name="${name}" class="textarea textarea-bordered w-full" rows="5" placeholder="${placeholder || ''}" ${requiredAttr} ${ariaRequired} ${ariaDesc}></textarea>`;
+      break;
+    case 'email':
+      inputHtml = `<input type="email" id="${fieldId}" name="${name}" class="input input-bordered w-full" placeholder="${placeholder || ''}" ${requiredAttr} ${ariaRequired} ${ariaDesc}/>`;
+      break;
+    case 'number':
+      inputHtml = `<input type="number" id="${fieldId}" name="${name}" class="input input-bordered w-full" placeholder="${placeholder || ''}" ${requiredAttr} ${ariaRequired} ${ariaDesc}/>`;
+      break;
+    case 'date':
+      inputHtml = `<input type="date" id="${fieldId}" name="${name}" class="input input-bordered w-full" ${requiredAttr} ${ariaRequired} ${ariaDesc}/>`;
+      break;
+    case 'select':
+      const optionsHtml = (options || []).map(opt =>
+        `<option value="${opt.value}">${escapeHtml(opt.label || opt.value)}</option>`
+      ).join('');
+      inputHtml = `<select id="${fieldId}" name="${name}" class="select select-bordered w-full" ${requiredAttr} ${ariaRequired} ${ariaDesc}><option value="">Select...</option>${optionsHtml}</select>`;
+      break;
+    case 'checkbox':
+      inputHtml = `<label class="flex items-center gap-2"><input type="checkbox" id="${fieldId}" name="${name}" class="checkbox" ${requiredAttr} ${ariaRequired} ${ariaDesc}/><span class="text-sm">${label}</span></label>`;
+      break;
+    case 'multi-select':
+      const multiOptHtml = (options || []).map(opt =>
+        `<label class="flex items-center gap-2"><input type="checkbox" name="${name}" value="${opt.value}" class="checkbox"/><span class="text-sm">${escapeHtml(opt.label || opt.value)}</span></label>`
+      ).join('');
+      inputHtml = `<div class="flex flex-col gap-2" ${role.list}>${multiOptHtml}</div>`;
+      break;
+    case 'file':
+      inputHtml = `<input type="file" id="${fieldId}" name="${name}" class="file-input file-input-bordered w-full" ${requiredAttr} ${ariaRequired} ${ariaDesc}/>`;
+      break;
+    case 'color':
+      inputHtml = `<input type="color" id="${fieldId}" name="${name}" class="input input-bordered w-full" ${requiredAttr} ${ariaRequired} ${ariaDesc}/>`;
+      break;
+    default:
+      inputHtml = `<input type="text" id="${fieldId}" name="${name}" class="input input-bordered w-full" placeholder="${placeholder || ''}" ${requiredAttr} ${ariaRequired} ${ariaDesc}/>`;
+  }
+
+  const descEl = field.description ? `<p id="${descId}" class="text-xs text-gray-500 mt-1">${escapeHtml(field.description)}</p>` : '';
+
+  return `
+    <div class="modal-form-group">
+      ${type !== 'checkbox' ? `<label for="${fieldId}">${escapeHtml(label || name)}${required ? ' <span aria-hidden="true">*</span>' : ''}</label>` : ''}
+      ${inputHtml}
+      ${descEl}
+    </div>
+  `;
+}
+
+function escapeHtml(text) {
+  if (text == null) return '';
+  return String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+}
+
+export function getDialogConfig(dialogId) {
+  const config = getConfigEngineSync().getConfig();
+  return config.dialogs?.[dialogId];
+}
+
+export function listDialogs() {
+  const config = getConfigEngineSync().getConfig();
+  return Object.keys(config.dialogs || {});
+}

package/src/ui/dialog-factory.js

@@ -0,0 +1,38 @@
+import { esc } from '@/ui/render-helpers.js';
+
+export function createDialog(id, title, body, footer, opts = {}) {
+  const maxWidth = opts.maxWidth || '640px';
+  const extraClass = opts.class || '';
+  return `<div id="${esc(id)}" class="dialog-overlay ${extraClass}" style="display:none" data-dialog-close-overlay="true" onkeydown="if(event.key==='Escape')this.style.display='none'" role="dialog" aria-modal="true" aria-labelledby="${esc(id)}-title" aria-hidden="true">
+  <div class="dialog-panel" style="max-width:${maxWidth}">
+    <div class="dialog-header">
+      <span class="dialog-title" id="${esc(id)}-title">${title}</span>
+      <button class="dialog-close" data-dialog-close="${esc(id)}" aria-label="Close dialog">&times;</button>
+    </div>
+    <div class="dialog-body">${body}</div>
+    ${footer ? `<div class="dialog-footer">${footer}</div>` : ''}
+  </div>
+</div>`;
+}
+
+export function modalDialog(id, title, body, footer, opts = {}) {
+  const maxWidth = opts.maxWidth || 'md';
+  const sizeMap = { sm: '28rem', md: '36rem', lg: '48rem', xl: '64rem' };
+  const width = sizeMap[maxWidth] || maxWidth;
+  return `<div id="${esc(id)}" class="modal" style="display:none" data-dialog-close-overlay="true">
+  <div class="modal-overlay" data-dialog-close="${esc(id)}"></div>
+  <div class="modal-content rounded-box" style="max-width:${width};padding:1.5rem">
+    <h3 class="text-lg font-semibold mb-4">${title}</h3>
+    ${body}
+    ${footer ? `<div class="modal-action mt-4">${footer}</div>` : ''}
+  </div>
+</div>`;
+}
+
+export function openDialog(id) {
+  return `document.getElementById('${esc(id)}').style.display='flex';document.getElementById('${esc(id)}').setAttribute('aria-hidden','false')`;
+}
+
+export function closeDialog(id) {
+  return `document.getElementById('${esc(id)}').style.display='none';document.getElementById('${esc(id)}').setAttribute('aria-hidden','true')`;
+}

package/src/ui/engagement-cards.js

@@ -0,0 +1,76 @@
+import { h } from '@/ui/webjsx.js'
+import { STAGE_COLORS, statusLabel } from '@/ui/render-helpers.js'
+import { teamAvatarGroup } from '@/ui/widgets.js'
+import { canEdit } from '@/ui/permissions-ui.js'
+
+export function engagementCard(engagement, user) {
+  const e = engagement || {}
+  const stage = e.stage ? (STAGE_COLORS[e.stage] || { bg: '#f3f4f6', text: '#6b7280', label: e.stage }) : null
+  const stageBadge = stage ? `<span class="badge-stage" data-stage="${e.stage}" style="background:${stage.bg};color:${stage.text}">${stage.label || e.stage}</span>` : ''
+  const sts = e.status ? statusLabel(e.status) : ''
+  const progress = typeof e.progress === 'number' ? `<div class="engagement-card-progress"><div class="engagement-card-progress-bar" style="width:${Math.min(100, Math.max(0, e.progress))}%"></div></div>` : ''
+  const team = e.team?.length ? `<div class="engagement-card-team">${teamAvatarGroup(e.team, 3)}</div>` : ''
+  const dueDate = e.due_date ? `<span class="text-xs text-gray-500">${typeof e.due_date === 'number' ? new Date(e.due_date * 1000).toLocaleDateString() : e.due_date}</span>` : ''
+  const clientName = e.client_name || e.client?.name || ''
+  return `<div class="engagement-card card-clean" data-navigate="/engagement/${e.id}" style="cursor:pointer">
+    <div class="card-clean-body">
+      <div class="flex justify-between items-center mb-2">${clientName ? `<span class="text-xs text-gray-500">${clientName}</span>` : '<span></span>'}${sts}</div>
+      <h3 class="font-medium mb-2">${e.name || e.title || 'Untitled'}</h3>
+      <div class="flex items-center gap-2 mb-2">${stageBadge}${dueDate}</div>
+      ${progress}
+      <div class="flex justify-between items-center mt-2">${team}<div class="flex gap-1"><a href="/engagement/${e.id}" class="btn btn-xs btn-ghost" data-stop-propagation="true">View</a>${canEdit(user, 'engagement') ? `<a href="/engagement/${e.id}/edit" class="btn btn-xs btn-outline" data-stop-propagation="true">Edit</a>` : ''}</div></div>
+    </div></div>`
+}
+
+export function mobileEngagementCard(engagement) {
+  const e = engagement || {}
+  const stage = e.stage ? (STAGE_COLORS[e.stage] || { bg: '#f3f4f6', text: '#6b7280', label: e.stage }) : null
+  const stageBadge = stage ? `<span class="badge-stage" data-stage="${e.stage}" style="background:${stage.bg};color:${stage.text};font-size:0.65rem;padding:0.15rem 0.5rem">${stage.label || e.stage}</span>` : ''
+  const sts = e.status ? statusLabel(e.status) : ''
+  return `<div class="mobile-card mobile-engagement-card card-clean">
+    <div class="card-clean-body">
+      <div class="flex justify-between items-center mb-2"><h3 class="font-medium text-sm">${e.name || e.title || 'Untitled'}</h3>${sts}</div>
+      ${e.client_name ? `<div class="text-xs text-gray-500 mb-1">${e.client_name}</div>` : ''}
+      <div class="flex items-center gap-2 mb-2">${stageBadge}${e.due_date ? `<span class="text-xs text-gray-500">${typeof e.due_date === 'number' ? new Date(e.due_date * 1000).toLocaleDateString() : e.due_date}</span>` : ''}</div>
+      <div class="flex gap-1 mt-2"><a href="/engagement/${e.id}" class="btn btn-xs btn-primary">View</a><a href="/engagement/${e.id}/edit" class="btn btn-xs btn-outline">Edit</a></div>
+    </div></div>`
+}
+
+export function stagePipeline(currentStage, stages = null, clickable = false, onClickFn = '') {
+  const stageKeys = stages || Object.keys(STAGE_COLORS)
+  const activeIdx = stageKeys.indexOf(currentStage)
+  const pills = stageKeys.map((key, i) => {
+    const s = STAGE_COLORS[key] || { bg: '#f3f4f6', text: '#4b5563', label: key }
+    const cls = i === activeIdx ? 'spl-current' : i < activeIdx ? 'spl-past' : 'spl-future'
+    const click = clickable ? ` spl-clickable" data-action="${onClickFn}" data-args='["${key}"]'` : '"'
+    return `<div class="spl-pill ${cls}" data-stage="${key}"${click} style="background:${s.bg};color:${s.text}">${s.label}</div>`
+  }).join('')
+  return `<div class="stage-pipeline">${pills}</div>`
+}
+
+export function activityTimeline(activities = [], showAll = false) {
+  const maxItems = showAll ? activities.length : 10
+  const items = activities.slice(0, maxItems)
+  const iconMap = { created: '&#43;', updated: '&#9998;', status_changed: '&#9679;', commented: '&#128172;', assigned: '&#128100;', uploaded: '&#128206;' }
+  const timelineItems = items.map(a => {
+    const action = a.action || 'updated'
+    const icon = iconMap[action] || '&#9679;'
+    const ts = a.timestamp || a.created_at
+    const timeStr = ts ? (typeof ts === 'number' && ts > 1e9 ? new Date(ts * 1000).toLocaleString() : new Date(ts).toLocaleString()) : ''
+    return `<div class="act-tl-item"><div class="act-tl-icon act-tl-${action}">${icon}</div><div class="act-tl-content"><div class="act-tl-header"><span class="act-tl-desc">${a.description || a.action || ''}</span></div><div class="act-tl-time">${timeStr}${a.user_name ? ' by ' + a.user_name : ''}</div></div></div>`
+  }).join('')
+  const moreBtn = !showAll && activities.length > maxItems ? `<div class="act-tl-more"><button class="btn btn-ghost btn-sm" data-action="showAllActivity" aria-label="Show ${activities.length - maxItems} more activities">Show ${activities.length - maxItems} more</button></div>` : ''
+  return `<div class="act-timeline">${timelineItems}</div>${moreBtn}`
+}
+
+export function splashScreen(domain) {
+  const isFriday = domain === 'friday'
+  const name = isFriday ? 'Friday' : 'MyWorkReview'
+  const color = isFriday ? '#3b82f6' : '#8b5cf6'
+  const initial = isFriday ? 'F' : 'M'
+  return `<div id="splash-screen" class="splash-screen" style="--splash-color:${color}"><div class="splash-content"><div class="splash-logo" style="background:${color}">${initial}</div><div class="splash-name">${name}</div><div class="splash-spinner"><div class="splash-spinner-ring"></div></div></div></div><script>(function(){window.addEventListener('load',function(){var s=document.getElementById('splash-screen');if(s){setTimeout(function(){s.classList.add('splash-hide');setTimeout(function(){s.remove()},400)},600)}})})()</script>`
+}
+
+export function swUpdateBanner() {
+  return `<div id="sw-update-banner" class="sw-banner" style="display:none"><span class="sw-banner-text">A new version is available.</span><button class="btn btn-sm btn-primary sw-banner-btn" data-action="swDoUpdate" aria-label="Update to new version">Update</button><button class="btn btn-sm btn-ghost sw-banner-btn" data-action="swDismiss" aria-label="Dismiss update notification">Dismiss</button></div><script>(function(){function show(){document.getElementById('sw-update-banner').style.display='flex'}window.swDoUpdate=function(){window.location.reload()};window.swDismiss=function(){document.getElementById('sw-update-banner').style.display='none'};if('serviceWorker' in navigator){navigator.serviceWorker.addEventListener('controllerchange',show);navigator.serviceWorker.getRegistration().then(function(reg){if(reg)reg.addEventListener('updatefound',function(){var nw=reg.installing;if(nw)nw.addEventListener('statechange',function(){if(nw.state==='installed'&&navigator.serviceWorker.controller)show()})})})}})()</script>`
+}

package/src/ui/engagement-dialogs.js

@@ -0,0 +1,100 @@
+import { statusLabel } from '@/ui/renderer.js';
+import { createDialog } from '@/ui/dialog-factory.js';
+import { esc } from '@/ui/render-helpers.js';
+
+export function engagementFileSearchDialog(engagementId) {
+  const body = `<div class="modal-form-group"><label for="efs-query" class="sr-only">Search files</label><input type="text" id="efs-query" class="input input-bordered w-full" placeholder="Search files..." aria-label="Search engagement files" oninput="efsSearch()"/></div><div id="efs-results" class="flex flex-col gap-2" style="max-height:400px;overflow:auto"></div>`;
+  const footer = `<button class="btn btn-ghost btn-sm" data-dialog-close="file-search-dialog">Close</button>`;
+  return createDialog('file-search-dialog', 'Search Engagement Files', body, footer) + `
+  <script>
+  var efsTimer=null;
+  window.efsSearch=function(){clearTimeout(efsTimer);efsTimer=setTimeout(function(){var q=document.getElementById('efs-query').value.trim();if(!q){document.getElementById('efs-results').innerHTML='';return}fetch('/api/file?engagement_id=${engagementId}&search='+encodeURIComponent(q)).then(function(r){return r.json()}).then(function(d){var files=d.data||d||[];var el=document.getElementById('efs-results');if(!files.length){el.innerHTML='<div class="text-gray-500 text-sm text-center py-4">No files found</div>';return}el.innerHTML=files.map(function(f){return'<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer" data-action="previewAttachment" data-args=\\'["/api/file/'+f.id+'/download","'+((f.name||'').replace(/"/g,'&quot;'))+'","'+((f.mime_type||'').replace(/"/g,'&quot;'))+'"]\\'>
+<div><div class="text-sm font-medium">'+(f.name||'Unknown')+'</div><div class="text-xs text-gray-500">'+(f.size?Math.round(f.size/1024)+'KB':'')+'</div></div><span class="badge-status text-xs">'+(f.type||'file')+'</span></div>'}).join('')}).catch(function(){document.getElementById('efs-results').innerHTML='<div class="text-red-500 text-sm">Search error</div>'})},300)};
+  </script>`;
+}
+
+export function postRfiJournalDialog(engagementId) {
+  const body = `<div class="modal-form-group"><label for="prj-type">Entry Type</label><select id="prj-type" class="select select-bordered w-full"><option value="note">Note</option><option value="finding">Finding</option><option value="follow_up">Follow Up</option><option value="resolution">Resolution</option></select></div>
+    <div class="modal-form-group"><label for="prj-title">Title</label><input id="prj-title" class="input input-bordered w-full" placeholder="Journal entry title"/></div>
+    <div class="modal-form-group"><label for="prj-content">Content</label><textarea id="prj-content" class="textarea textarea-bordered w-full" rows="5" placeholder="Describe the entry..."></textarea></div>
+    <div class="modal-form-group"><label for="prj-file">File Attachment</label><input type="file" id="prj-file" class="file-input file-input-bordered w-full file-input-sm"/></div>`;
+  const footer = `<button class="btn btn-ghost btn-sm" data-dialog-close="post-rfi-journal">Cancel</button><button class="btn btn-primary btn-sm" data-action="prjSave">Save Entry</button>`;
+  return createDialog('post-rfi-journal', 'Post-RFI Journal Entry', body, footer) + `
+  <script>
+  window.openPostRfiJournal=function(){document.getElementById('post-rfi-journal').style.display='flex'};
+  window.prjSave=async function(){var title=document.getElementById('prj-title').value.trim();var content=document.getElementById('prj-content').value.trim();if(!title||!content){showToast('Title and content required','error');return}var fd=new FormData();fd.append('engagement_id','${engagementId}');fd.append('type',document.getElementById('prj-type').value);fd.append('title',title);fd.append('content',content);var file=document.getElementById('prj-file').files[0];if(file)fd.append('file',file);try{var r=await fetch('/api/journal',{method:'POST',body:fd});if(r.ok){showToast('Journal entry saved','success');document.getElementById('post-rfi-journal').style.display='none';location.reload()}else showToast('Failed','error')}catch(e){showToast('Error','error')}};
+  </script>`;
+}
+
+export function postRfiFileUpload(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 Post-RFI Files</h3><div class="mt-3"><input type="file" id="prfi-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="prfiUpload">Upload</button></div><div id="prfi-progress" class="mt-2"></div></div></div></div>
+  <script>
+  window.prfiUpload=async function(){var files=document.getElementById('prfi-files').files;if(!files.length){showToast('Select files','error');return}var prog=document.getElementById('prfi-progress');prog.innerHTML='Uploading '+files.length+' file(s)...';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('type','post_rfi');try{var r=await fetch('/api/file/upload',{method:'POST',body:fd});if(r.ok)ok++;prog.innerHTML='Uploaded '+(i+1)+' of '+files.length}catch(e){}}prog.innerHTML=ok+' of '+files.length+' uploaded successfully';if(ok>0)showToast(ok+' files uploaded','success')};
+  </script>`;
+}
+
+export function importReviewQueriesDialog(engagementId) {
+  const body = `<div class="modal-form-group"><label for="irq-source">Source</label><select id="irq-source" class="select select-bordered w-full"><option value="csv">CSV File</option><option value="review">From Another Review</option><option value="template">From Template</option></select></div>
+    <div id="irq-csv-upload"><div class="modal-form-group"><label for="irq-file">CSV File</label><input type="file" id="irq-file" class="file-input file-input-bordered w-full" accept=".csv,.xlsx"/></div></div>
+    <div id="irq-review-select" style="display:none"><div class="modal-form-group"><label for="irq-review">Select Review</label><select id="irq-review" class="select select-bordered w-full"></select></div></div>
+    <div id="irq-preview" class="text-sm text-gray-500 mt-2"></div>`;
+  const footer = `<button class="btn btn-ghost btn-sm" data-dialog-close="import-queries-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="irqImport">Import</button>`;
+  return createDialog('import-queries-dialog', 'Import Review Queries', body, footer) + `
+  <script>
+  document.getElementById('irq-source').addEventListener('change',function(){var v=this.value;document.getElementById('irq-csv-upload').style.display=v==='csv'?'':'none';document.getElementById('irq-review-select').style.display=v==='review'?'':'none';if(v==='review'){fetch('/api/review?engagement_id=${engagementId}').then(function(r){return r.json()}).then(function(d){var sel=document.getElementById('irq-review');while(sel.options.length>0)sel.remove(0);(d.data||d||[]).forEach(function(r){var o=document.createElement('option');o.value=r.id;o.textContent=r.name||r.title||r.id;sel.appendChild(o)})}).catch(function(){})}});
+  window.irqImport=async function(){var source=document.getElementById('irq-source').value;if(source==='csv'){var file=document.getElementById('irq-file').files[0];if(!file){showToast('Select a file','error');return}var fd=new FormData();fd.append('file',file);fd.append('engagement_id','${engagementId}');try{var r=await fetch('/api/rfi_question/import',{method:'POST',body:fd});if(r.ok){var d=await r.json();showToast((d.count||'')+'queries imported','success');document.getElementById('import-queries-dialog').style.display='none';location.reload()}else showToast('Import failed','error')}catch(e){showToast('Error','error')}}else if(source==='review'){var rid=document.getElementById('irq-review').value;if(!rid){showToast('Select a review','error');return}try{var r=await fetch('/api/rfi_question/import-from-review',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_id:rid,engagement_id:'${engagementId}'})});if(r.ok){showToast('Queries imported','success');document.getElementById('import-queries-dialog').style.display='none';location.reload()}else showToast('Failed','error')}catch(e){showToast('Error','error')}}};
+  </script>`;
+}
+
+export function engagementNotificationSettings(engagementId) {
+  const body = `<div class="flex flex-col gap-3">
+    <label class="flex items-center gap-2"><input type="checkbox" class="checkbox eng-notif-cb" value="rfi_response" checked/><span class="text-sm">RFI Responses</span></label>
+    <label class="flex items-center gap-2"><input type="checkbox" class="checkbox eng-notif-cb" value="rfi_overdue" checked/><span class="text-sm">Overdue RFI Items</span></label>
+    <label class="flex items-center gap-2"><input type="checkbox" class="checkbox eng-notif-cb" value="review_comment" checked/><span class="text-sm">Review Comments</span></label>
+    <label class="flex items-center gap-2"><input type="checkbox" class="checkbox eng-notif-cb" value="file_upload"/><span class="text-sm">File Uploads</span></label>
+    <label class="flex items-center gap-2"><input type="checkbox" class="checkbox eng-notif-cb" value="stage_change" checked/><span class="text-sm">Stage Changes</span></label>
+    <label class="flex items-center gap-2"><input type="checkbox" class="checkbox eng-notif-cb" value="team_message"/><span class="text-sm">Team Messages</span></label>
+  </div>`;
+  const footer = `<button class="btn btn-ghost btn-sm" data-dialog-close="eng-notif-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="ensNotifSave">Save</button>`;
+  return createDialog('eng-notif-dialog', 'Notification Settings', body, footer) + `
+  <script>
+  window.openEngNotifSettings=function(){document.getElementById('eng-notif-dialog').style.display='flex';fetch('/api/engagement/${engagementId}').then(function(r){return r.json()}).then(function(d){var settings;try{settings=JSON.parse((d.data||d).notification_settings||'[]')}catch(e){settings=[]}document.querySelectorAll('.eng-notif-cb').forEach(function(cb){cb.checked=!settings.length||settings.includes(cb.value)})}).catch(function(){})};
+  window.ensNotifSave=async function(){var vals=[].slice.call(document.querySelectorAll('.eng-notif-cb:checked')).map(function(c){return c.value});try{var r=await fetch('/api/engagement/${engagementId}',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({notification_settings:JSON.stringify(vals)})});if(r.ok){showToast('Notification settings saved','success');document.getElementById('eng-notif-dialog').style.display='none'}else showToast('Failed','error')}catch(e){showToast('Error','error')}};
+  </script>`;
+}
+
+export function notificationTriggerDialog() {
+  const body = `<div class="modal-form-group"><label for="ntr-event">Event</label><select id="ntr-event" class="select select-bordered w-full"><option value="rfi_overdue">RFI Overdue</option><option value="deadline_approaching">Deadline Approaching</option><option value="stage_change">Stage Change</option><option value="assignment">New Assignment</option><option value="response_received">Response Received</option></select></div>
+    <div class="modal-form-group"><label for="ntr-channel">Channel</label><select id="ntr-channel" class="select select-bordered w-full"><option value="email">Email</option><option value="in_app">In-App</option><option value="both">Both</option></select></div>
+    <div class="modal-form-group"><label for="ntr-recipients">Recipients</label><select id="ntr-recipients" class="select select-bordered w-full"><option value="team">Engagement Team</option><option value="assigned">Assigned User Only</option><option value="managers">Managers Only</option><option value="all">All Stakeholders</option></select></div>`;
+  const footer = `<button class="btn btn-ghost btn-sm" data-dialog-close="notif-trigger-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="ntrSave">Create Trigger</button>`;
+  return createDialog('notif-trigger-dialog', 'Create Notification Trigger', body, footer) + `
+  <script>
+  window.openNotifTrigger=function(){document.getElementById('notif-trigger-dialog').style.display='flex'};
+  window.ntrSave=async function(){try{var r=await fetch('/api/notification_trigger',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({event:document.getElementById('ntr-event').value,channel:document.getElementById('ntr-channel').value,recipients:document.getElementById('ntr-recipients').value})});if(r.ok){showToast('Trigger created','success');document.getElementById('notif-trigger-dialog').style.display='none';location.reload()}else showToast('Failed','error')}catch(e){showToast('Error','error')}};
+  </script>`;
+}
+
+export function retryHighlightDialog(reviewId) {
+  const body = `<div class="modal-form-group"><label for="rhd-hid">Highlight ID</label><input id="rhd-hid" class="input input-bordered w-full" placeholder="highlight identifier"/></div><div class="modal-form-group"><label for="rhd-prompt">Override prompt (optional)</label><textarea id="rhd-prompt" class="textarea textarea-bordered w-full" rows="3" placeholder="Custom ML prompt"></textarea></div><div class="text-xs" style="color:var(--ds-muted)">Reruns ML extraction for the chosen highlight.</div>`;
+  const footer = `<button class="btn btn-ghost btn-sm" data-dialog-close="retry-highlight-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="rhdSubmit">Retry</button>`;
+  return createDialog('retry-highlight-dialog', 'Retry Highlight', body, footer) + `
+  <script>
+  window.openRetryHighlight=function(hid){document.getElementById('retry-highlight-dialog').style.display='flex';if(hid)document.getElementById('rhd-hid').value=hid};
+  window.rhdSubmit=async function(){var hid=document.getElementById('rhd-hid').value.trim();if(!hid){showToast('Highlight id required','error');return}try{var r=await fetch('/api/mwr/review/${reviewId}/highlights/'+encodeURIComponent(hid),{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({retry:true,prompt:document.getElementById('rhd-prompt').value.trim()||undefined})});if(r.ok){showToast('Highlight rerun queued','success');document.getElementById('retry-highlight-dialog').style.display='none'}else{showToast('Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}};
+  </script>`;
+}
+
+export function switchTemplateButton(reviewId) {
+  return `<button class="btn btn-outline btn-sm" type="button" data-action="openSwitchTemplate" aria-label="Switch template">Switch template</button>
+  <script>
+  window.openSwitchTemplate=function(){if(typeof window.showTemplateChoice==='function'){window.showTemplateChoice(async function(t){try{var r=await fetch('/api/review/${reviewId}',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_template_id:t.id})});if(r.ok){showToast('Template switched','success');setTimeout(function(){location.reload()},400)}else{showToast('Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}})}else{showToast('Template chooser unavailable','error')}};
+  </script>`;
+}
+
+export function teamChatChannelToggle(engagementId, chatEnabled) {
+  return `<div class="flex items-center gap-3"><span class="text-sm" id="team-chat-label">Team Chat</span><div class="rvw-toggle ${chatEnabled ? 'rvw-toggle-on' : ''}" role="switch" tabindex="0" aria-checked="${chatEnabled}" aria-labelledby="team-chat-label" data-action="toggleTeamChat" data-self onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleTeamChat(this)}"><div class="rvw-toggle-track"><div class="rvw-toggle-knob"></div></div></div></div>
+  <script>
+  window.toggleTeamChat=async function(el){var on=el.classList.toggle('rvw-toggle-on');el.setAttribute('aria-checked',on);try{await fetch('/api/engagement/${engagementId}',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({chat_enabled:on})});showToast('Chat '+(on?'enabled':'disabled'),'success')}catch(e){el.classList.toggle('rvw-toggle-on');el.setAttribute('aria-checked',!on);showToast('Error','error')}};
+  </script>`;
+}