thatcher 1.0.4

package/src/ui/perf-helpers.js

@@ -0,0 +1,96 @@
+import { memoize } from '@/lib/render-cache.js'
+
+export const renderLargeList = memoize(function renderLargeList(items, renderFn, options = {}) {
+  const { chunkSize = 100, useVirtual = false } = options
+  if (!items || items.length === 0) return ''
+  if (items.length <= chunkSize || !useVirtual) {
+    return items.map(renderFn).join('')
+  }
+  const visible = items.slice(0, chunkSize)
+  const deferred = items.slice(chunkSize)
+  return visible.map(renderFn).join('') +
+    `<tr class="defer-load" data-count="${deferred.length}"><td colspan="99" class="text-center text-gray-500 py-4">Loading ${deferred.length} more...</td></tr>`
+})
+
+export const batchRender = memoize(function batchRender(items, renderFn, batchSize = 50) {
+  if (!items || items.length === 0) return ''
+  const batches = []
+  for (let i = 0; i < items.length; i += batchSize) {
+    batches.push(items.slice(i, i + batchSize))
+  }
+  return batches.map((batch, idx) => {
+    const html = batch.map(renderFn).join('')
+    if (idx === 0) return html
+    return `<div class="defer-load" data-content="${escapeAttr(html)}"></div>`
+  }).join('')
+})
+
+function escapeAttr(str) {
+  return String(str).replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+}
+
+export function eventDelegation(containerId, selector, eventType, handlerCode) {
+  return `
+(function(){
+const c=document.getElementById('${containerId}');
+if(!c)return;
+c.addEventListener('${eventType}',function(e){
+  const t=e.target.closest('${selector}');
+  if(t){${handlerCode}}
+});
+})();
+`.trim()
+}
+
+export function optimizeTableScroll(tableId) {
+  return `
+(function(){
+const t=document.getElementById('${tableId}');
+if(!t)return;
+let ticking=false;
+t.addEventListener('scroll',()=>{
+  if(!ticking){
+    requestAnimationFrame(()=>{
+      ticking=false;
+    });
+    ticking=true;
+  }
+});
+})();
+`.trim()
+}
+
+export const styleFragment = memoize(function styleFragment(styles) {
+  return `<style>${Object.entries(styles).map(([k, v]) => `${k}{${v}}`).join('')}</style>`
+})
+
+export function minifyHtml(html) {
+  return html
+    .replace(/\s+/g, ' ')
+    .replace(/>\s+</g, '><')
+    .replace(/\s+>/g, '>')
+    .replace(/<\s+/g, '<')
+    .trim()
+}
+
+export const progressiveEnhance = memoize(function progressiveEnhance(baseHtml, enhancedHtml) {
+  return baseHtml + `<noscript>${enhancedHtml}</noscript>`
+})
+
+export function createSkeleton(type = 'list', count = 3) {
+  if (type === 'list') {
+    return Array(count).fill(0).map(() =>
+      `<div class="skeleton-row" style="height:48px;background:#f3f4f6;margin:8px 0;border-radius:4px;animation:pulse 1.5s ease-in-out infinite"></div>`
+    ).join('')
+  }
+  if (type === 'card') {
+    return Array(count).fill(0).map(() =>
+      `<div class="skeleton-card" style="width:100%;height:200px;background:#f3f4f6;border-radius:8px;animation:pulse 1.5s ease-in-out infinite"></div>`
+    ).join('')
+  }
+  return ''
+}
+
+export function perfBudget(key, maxMs) {
+  return `performance.mark('${key}-start');(window.requestIdleCallback||function(cb){setTimeout(cb,1)})(()=>{performance.mark('${key}-end');const m=performance.measure('${key}','${key}-start','${key}-end');if(m.duration>${maxMs})console.warn('[PERF] ${key} exceeded budget: '+m.duration.toFixed(2)+'ms > ${maxMs}ms')});`
+}

package/src/ui/perf-renderer.js

@@ -0,0 +1,71 @@
+import { memoize } from '@/lib/render-cache.js'
+import { measure } from '@/lib/perf-monitor.js'
+import { virtualScrollScript, lazyLoadImages, deferOffscreen } from '@/ui/virtual-scroll.js'
+import { eventDelegation, perfBudget, createSkeleton } from '@/ui/perf-helpers.js'
+
+export function optimizedListRender(items, renderFn, options = {}) {
+  const { chunkSize = 100, containerId = 'list-container', enableVirtual = true } = options
+  return measure('list-render', () => {
+    if (!items || items.length === 0) return createSkeleton('list', 3)
+    if (items.length <= chunkSize) return items.map(renderFn).join('')
+    const visible = items.slice(0, chunkSize)
+    const deferred = items.slice(chunkSize)
+    return visible.map(renderFn).join('') +
+      (enableVirtual && deferred.length > 0
+        ? `<div class="defer-load" data-deferred="${deferred.length}"></div>`
+        : deferred.map(renderFn).join(''))
+  })
+}
+
+export function withPerformanceMonitoring(renderFn, name) {
+  return function(...args) {
+    return measure(name, () => renderFn(...args))
+  }
+}
+
+export function withMemoization(renderFn) {
+  return memoize(renderFn)
+}
+
+export function optimizedTableScripts(tableId, options = {}) {
+  const { enableVirtual = false, enableDefer = true, rowHeight = 48, perfBudgetMs = 200 } = options
+  const scripts = []
+  if (enableVirtual) scripts.push(virtualScrollScript(tableId, rowHeight))
+  if (enableDefer) scripts.push(deferOffscreen('.defer-load'))
+  scripts.push(perfBudget(`${tableId}-render`, perfBudgetMs))
+  scripts.push(lazyLoadImages())
+  return scripts.filter(Boolean)
+}
+
+export function batchOperations(operations, batchSize = 10) {
+  const batches = []
+  for (let i = 0; i < operations.length; i += batchSize) {
+    batches.push(operations.slice(i, i + batchSize))
+  }
+  return batches.map((batch, idx) => {
+    if (idx === 0) return batch
+    return { deferred: true, operations: batch }
+  })
+}
+
+export function progressiveLoad(content, priority = 'high') {
+  if (priority === 'high') return content
+  return `<div class="defer-load" data-content="${escapeAttr(content)}"></div>`
+}
+
+function escapeAttr(str) {
+  return String(str).replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+}
+
+export const perfConfig = {
+  tableChunkSize: 100,
+  cardChunkSize: 50,
+  virtualScrollThreshold: 200,
+  deferLoadThreshold: 100,
+  perfBudgets: {
+    'list-render': 100,
+    'table-render': 150,
+    'card-render': 80,
+    'page-render': 500
+  }
+}

package/src/ui/permissions-ui.js

@@ -0,0 +1,163 @@
+import { getConfigEngineSync } from '@/lib/config-generator-engine.js';
+
+function getRoleHierarchy() {
+  const config = getConfigEngineSync();
+  const roles = config.getRoles();
+  const hierarchy = {};
+  let level = 0;
+  for (const [roleName] of Object.entries(roles)) {
+    hierarchy[roleName] = level++;
+  }
+  return hierarchy;
+}
+
+function getEntityPermissions() {
+  const config = getConfigEngineSync();
+  const entityNames = config.getAllEntities();
+  const permissions = {};
+
+  for (const name of entityNames) {
+    if (!name) continue;
+    try {
+      const spec = config.generateEntitySpec(name);
+
+      const access = spec.access || {};
+
+      permissions[name] = {
+        list: access.list || [],
+        view: access.view || [],
+        create: access.create || [],
+        edit: access.edit || [],
+        delete: access.delete || [],
+      };
+    } catch (e) {
+      console.error(`[Permissions] Error loading permissions for ${name}:`, e.message);
+      permissions[name] = { list: [], view: [], create: [], edit: [], delete: [] };
+    }
+  }
+  return permissions;
+}
+
+export function canAccess(user, entity, action) {
+  if (!user?.role) return false;
+  const config = getConfigEngineSync();
+  const allPermissions = getEntityPermissions();
+  const permissions = allPermissions[entity];
+
+  if (!permissions) return isPartner(user);
+  const allowed = permissions[action] || [];
+  if (allowed.includes(user.role)) return true;
+  if (!allowed.length) return false;
+  if (action === 'list' || action === 'view') return isClerk(user);
+  return false;
+}
+
+export function canList(user, entity) {
+  return canAccess(user, entity, 'list');
+}
+
+export function canView(user, entity) {
+  return canAccess(user, entity, 'view');
+}
+
+export function canCreate(user, entity) {
+  return canAccess(user, entity, 'create');
+}
+
+export function canEdit(user, entity) {
+  return canAccess(user, entity, 'edit');
+}
+
+export function canDelete(user, entity) {
+  return canAccess(user, entity, 'delete');
+}
+
+export function isPartner(user) {
+  return ['partner', 'admin'].includes(user?.role);
+}
+
+export function isManager(user) {
+  return ['manager'].includes(user?.role);
+}
+
+export function isClerk(user) {
+  return ['clerk', 'user'].includes(user?.role);
+}
+
+export function isClientUser(user) {
+  const config = getConfigEngineSync();
+  const roles = config.getRoles();
+  const clientRoles = Object.keys(roles).filter(r => r.includes('client'));
+  return clientRoles.includes(user?.role);
+}
+
+export function isClientAdmin(user) {
+  const config = getConfigEngineSync();
+  const roles = config.getRoles();
+  const clientAdminRole = Object.keys(roles).find(r => r === 'client_admin');
+  return user?.role === clientAdminRole;
+}
+
+export function isAuditor(user) {
+  const config = getConfigEngineSync();
+  const roles = config.getRoles();
+  const auditRoles = Object.keys(roles).filter(r => !r.includes('client'));
+  return auditRoles.includes(user?.role);
+}
+
+const CLIENT_VISIBLE_ENTITIES = ['engagement', 'rfi', 'review', 'file', 'message', 'rfi_response'];
+
+export function canClientAccessEntity(user, entityName) {
+  if (!isClientUser(user)) return true;
+  return CLIENT_VISIBLE_ENTITIES.includes(entityName);
+}
+
+export function getNavItems(user, domain) {
+  const items = [];
+  if (domain === 'mwr') return getMwrNavItems(user);
+  if (canList(user, 'engagement')) items.push({ href: '/engagements', label: 'Engagements' });
+  if (canList(user, 'client')) items.push({ href: '/client', label: 'Clients' });
+  if (canList(user, 'rfi')) items.push({ href: '/rfi', label: 'RFIs' });
+  if (canList(user, 'review')) items.push({ href: '/review', label: 'Reviews' });
+  if (canList(user, 'user')) items.push({ href: '/user', label: 'Users' });
+  if (canList(user, 'team')) items.push({ href: '/team', label: 'Teams' });
+  if (canList(user, 'tender')) items.push({ href: '/tender', label: 'Tenders' });
+  if (canList(user, 'checklist')) items.push({ href: '/checklist', label: 'Checklists' });
+  if (canList(user, 'file')) items.push({ href: '/file', label: 'Files' });
+  if (canList(user, 'letter')) items.push({ href: '/letter', label: 'Letters' });
+  return items;
+}
+
+export function getMwrNavItems(user) {
+  const items = [];
+  if (canCreate(user, 'review')) items.push({ href: '/review/new', label: 'Start Review' });
+  if (canList(user, 'review')) items.push({ href: '/reviews/active', label: 'Active Reviews' });
+  if (canList(user, 'review')) items.push({ href: '/reviews/priority', label: 'Priority Reviews' });
+  if (canList(user, 'review')) items.push({ href: '/reviews/history', label: 'History' });
+  if (canList(user, 'review')) items.push({ href: '/reviews/archive', label: 'Archive' });
+  return items;
+}
+
+export function getAdminItems(user) {
+  const items = [];
+  if (canList(user, 'permission_audit')) items.push({ href: '/admin/audit', label: 'Audit' });
+  if (isPartner(user)) items.push({ href: '/admin/health', label: 'Health' });
+  if (isPartner(user)) items.push({ href: '/admin/settings', label: 'Settings' });
+  return items;
+}
+
+export function getQuickActions(user) {
+  const actions = [];
+  if (isClerk(user)) {
+    actions.push({ href: '/rfi', label: 'View My RFIs', primary: true });
+    actions.push({ href: '/engagements', label: 'View Engagements', outline: true });
+  } else if (isClientUser(user)) {
+    actions.push({ href: '/rfi', label: 'View My RFIs', primary: true });
+    actions.push({ href: '/engagements', label: 'My Engagements', outline: true });
+  } else {
+    if (canCreate(user, 'engagement')) actions.push({ href: '/engagements/new', label: 'New Engagement', primary: true });
+    if (canCreate(user, 'client')) actions.push({ href: '/client/new', label: 'New Client', outline: true });
+    if (canCreate(user, 'review')) actions.push({ href: '/review/new', label: 'New Review', outline: true });
+  }
+  return actions;
+}

package/src/ui/picker-dialogs.js

@@ -0,0 +1,100 @@
+import { h } from '@/ui/webjsx.js'
+import { STAGE_COLORS, TOAST_SCRIPT } from '@/ui/render-helpers.js'
+
+const DIALOG_COLORS = ['#B0B0B0','#44BBA4','#FF4141','#7F7EFF','#3b82f6','#f59e0b','#ec4899','#8b5cf6','#ef4444','#22c55e','#06b6d4','#f97316','#84cc16','#e11d48','#14b8a6','#6366f1']
+
+export function colorPickerDialog(id = 'cpd', selected = '#B0B0B0', onSelect = '') {
+  const swatches = DIALOG_COLORS.map(c =>
+    `<div class="cpd-swatch${c === selected ? ' cpd-selected' : ''}" style="background:${c}" data-color="${c}" role="option" tabindex="0" aria-label="Color ${c}" aria-selected="${c === selected}" data-action="cpdSelect" data-args='["${id}","${c}",${onSelect ? "true" : "false"}]' onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();cpdSelect('${id}','${c}',${onSelect ? 'true' : 'false'})}"></div>`
+  ).join('')
+  return `<div id="${id}-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="${id}-dialog-title" aria-hidden="true">
+    <div class="dialog-panel" style="max-width:360px">
+      <div class="dialog-header"><span class="dialog-title" id="${id}-dialog-title">Choose Color</span><button class="dialog-close" data-dialog-close="${id}-dialog" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body"><div class="color-picker-grid" role="listbox" aria-label="Color options">${swatches}</div>
+        <div style="margin-top:0.75rem;display:flex;align-items:center;gap:0.75rem"><label class="text-sm text-gray-500" for="${id}-custom">Custom:</label><input type="color" id="${id}-custom" value="${selected}" onchange="cpdSelect('${id}',this.value,true)" aria-label="Custom color picker" style="width:40px;height:32px;border:none;cursor:pointer"/><span id="${id}-val" class="text-sm font-medium" aria-live="polite">${selected}</span></div>
+      </div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="${id}-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="cpdConfirm" data-args='["${id}"]'>Select</button></div>
+    </div></div>
+  <script>window._cpd=window._cpd||{};window._cpd['${id}']='${selected}';
+  window.cpdSelect=function(id,c){window._cpd[id]=c;document.getElementById(id+'-val').textContent=c;document.getElementById(id+'-custom').value=c;document.querySelectorAll('#'+id+'-dialog .cpd-swatch').forEach(function(el){el.classList.toggle('cpd-selected',el.dataset.color===c)})};
+  window.cpdConfirm=function(id){var c=window._cpd[id];document.getElementById(id+'-dialog').style.display='none';if(window._cpdCallback)window._cpdCallback(c)};
+  window.showColorPicker=function(id,current,cb){window._cpdCallback=cb;if(current)cpdSelect(id,current);document.getElementById(id+'-dialog').style.display='flex'};</script>`
+}
+
+export function dateChoiceDialog(id = 'dcd') {
+  const presets = [
+    { label: 'Today', days: 0 }, { label: 'Tomorrow', days: 1 }, { label: '+3 Days', days: 3 },
+    { label: '+1 Week', days: 7 }, { label: '+2 Weeks', days: 14 }, { label: '+1 Month', days: 30 },
+    { label: '+3 Months', days: 90 }, { label: 'End of Month', days: 'eom' }, { label: 'End of Quarter', days: 'eoq' },
+  ]
+  const presetBtns = presets.map(p => `<button class="date-preset-btn" data-action="dcdPreset" data-args='["${id}",${typeof p.days === 'number' ? p.days : '"' + p.days + '"'}]'>${p.label}</button>`).join('')
+  return `<div id="${id}-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="${id}-dialog-title" aria-hidden="true">
+    <div class="dialog-panel" style="max-width:380px">
+      <div class="dialog-header"><span class="dialog-title" id="${id}-dialog-title">Choose Date</span><button class="dialog-close" data-dialog-close="${id}-dialog" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body">
+        <div class="modal-form-group"><label for="${id}-input">Date</label><input type="date"  id="${id}-input" class="input input-bordered w-full"/></div>
+        <div class="date-presets">${presetBtns}</div>
+      </div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="${id}-dialog">Cancel</button><button class="btn btn-error btn-outline btn-sm" data-action="dcdClear" data-args='["${id}"]'>Clear</button><button class="btn btn-primary btn-sm" data-action="dcdConfirm" data-args='["${id}"]'>Select</button></div>
+    </div></div>
+  <script>window.dcdPreset=function(id,days){var d=new Date();if(days==='eom'){d=new Date(d.getFullYear(),d.getMonth()+1,0)}else if(days==='eoq'){var q=Math.floor(d.getMonth()/3);d=new Date(d.getFullYear(),(q+1)*3,0)}else{d.setDate(d.getDate()+days)}document.getElementById(id+'-input').value=d.toISOString().split('T')[0]};
+  window.dcdConfirm=function(id){var v=document.getElementById(id+'-input').value;document.getElementById(id+'-dialog').style.display='none';if(window._dcdCallback)window._dcdCallback(v||null)};
+  window.dcdClear=function(id){document.getElementById(id+'-input').value='';document.getElementById(id+'-dialog').style.display='none';if(window._dcdCallback)window._dcdCallback(null)};
+  window.showDateChoice=function(id,current,cb){window._dcdCallback=cb;if(current)document.getElementById(id+'-input').value=current;document.getElementById(id+'-dialog').style.display='flex'};</script>`
+}
+
+export function stageTransitionDialog(stages = null) {
+  const stageKeys = stages || Object.keys(STAGE_COLORS)
+  return `<div id="stage-trans-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="stage-trans-dialog-title" aria-hidden="true">
+    <div class="dialog-panel">
+      <div class="dialog-header"><span class="dialog-title" id="stage-trans-dialog-title">Transition Stage</span><button class="dialog-close" data-dialog-close="stage-trans-dialog" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body">
+        <div id="std-from" class="stage-trans-block stage-trans-current"></div>
+        <div class="stage-trans-arrow"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></div>
+        <div id="std-to" class="stage-trans-block stage-trans-next"></div>
+        <div class="modal-form-group" style="margin-top:1rem"><label class="form-label" for="std-reason">Reason (optional)</label><textarea id="std-reason" class="textarea textarea-bordered w-full" rows="2" placeholder="Why is this stage being changed?"></textarea></div>
+      </div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="stage-trans-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="stdConfirm">Confirm Transition</button></div>
+    </div></div>
+  <script>${TOAST_SCRIPT}
+  window._stdData={};
+  window.showStageTransition=function(entityId,entityType,fromStage,toStage,cb){window._stdData={entityId:entityId,entityType:entityType,from:fromStage,to:toStage,cb:cb};document.getElementById('stage-trans-dialog').style.display='flex';var sc=${JSON.stringify(Object.fromEntries(stageKeys.map(k => [k, STAGE_COLORS[k] || { bg: '#f3f4f6', text: '#4b5563', label: k }])))};var from=sc[fromStage]||{bg:'#f3f4f6',text:'#4b5563',label:fromStage};var to=sc[toStage]||{bg:'#f3f4f6',text:'#4b5563',label:toStage};document.getElementById('std-from').innerHTML='<div class="stage-trans-dot" style="background:'+from.text+'"></div><div><div class="text-xs text-gray-500">Current</div><div class="font-medium" style="color:'+from.text+'">'+from.label+'</div></div>';document.getElementById('std-to').innerHTML='<div class="stage-trans-dot" style="background:'+to.text+'"></div><div><div class="text-xs text-gray-500">Next</div><div class="font-medium" style="color:'+to.text+'">'+to.label+'</div></div>'};
+  window.stdConfirm=async function(){var d=window._stdData;var reason=document.getElementById('std-reason').value;try{var res=await fetch('/api/'+d.entityType+'/'+d.entityId,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({stage:d.to,stage_reason:reason})});if(res.ok){showToast('Stage updated','success');document.getElementById('stage-trans-dialog').style.display='none';if(d.cb)d.cb();else setTimeout(function(){location.reload()},500)}else{showToast('Transition failed','error')}}catch(e){showToast('Error: '+e.message,'error')}};</script>`
+}
+
+export function teamAssignmentDialog(id = 'tad') {
+  return `<div id="${id}-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="${id}-dialog-title" aria-hidden="true">
+    <div class="dialog-panel">
+      <div class="dialog-header"><span class="dialog-title" id="${id}-dialog-title">Assign Team Members</span><button class="dialog-close" data-dialog-close="${id}-dialog" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body">
+        <input type="text" id="${id}-search" class="tad-search" placeholder="Search by name or email..." aria-label="Search team members" oninput="tadFilter('${id}')"/>
+        <div id="${id}-list" class="tad-list"></div>
+      </div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="${id}-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="tadConfirm" data-args='["${id}"]'>Assign</button></div>
+    </div></div>
+  <script>${TOAST_SCRIPT}
+  window._tad=window._tad||{};
+  window.showTeamAssignment=function(id,users,selected,cb){window._tad[id]={users:users,selected:new Set(selected||[]),cb:cb};document.getElementById(id+'-dialog').style.display='flex';tadRender(id)};
+  function tadRender(id){var d=window._tad[id];var c=document.getElementById(id+'-list');c.innerHTML='';d.users.forEach(function(u){var row=document.createElement('div');row.className='tad-row';row.dataset.name=(u.name||'').toLowerCase();row.dataset.email=(u.email||'').toLowerCase();var checked=d.selected.has(u.id)?'checked':'';row.innerHTML='<input type="checkbox" '+checked+' onchange="tadToggle(\\''+id+'\\',\\''+u.id+'\\') " aria-label="Select '+(u.name||'Unknown').replace(/"/g,'&quot;')+'">'+'<div><div class="tad-name">'+(u.name||'Unknown')+'</div><div class="tad-email">'+(u.email||'')+'</div></div>';c.appendChild(row)})}
+  window.tadFilter=function(id){var q=document.getElementById(id+'-search').value.toLowerCase();document.querySelectorAll('#'+id+'-list .tad-row').forEach(function(r){r.style.display=(r.dataset.name.includes(q)||r.dataset.email.includes(q))?'':'none'})};
+  window.tadToggle=function(id,uid){var d=window._tad[id];if(d.selected.has(uid))d.selected.delete(uid);else d.selected.add(uid)};
+  window.tadConfirm=function(id){var d=window._tad[id];document.getElementById(id+'-dialog').style.display='none';if(d.cb)d.cb(Array.from(d.selected))};</script>`
+}
+
+export function teamSelector(id = 'ts', teams = []) {
+  const items = teams.map(t =>
+    `<div class="tad-row" data-name="${(t.name || '').toLowerCase()}" data-action="tsSelect" data-args='["${id}","${t.id}","${(t.name || '').replace(/"/g, '&quot;')}"]'><div class="tad-name">${t.name || 'Unknown'}</div><div class="tad-email">${t.member_count || 0} members</div></div>`
+  ).join('')
+  return `<div class="ts-wrap" id="${id}-wrap">
+    <div id="${id}-badges" class="ts-badges"></div>
+    <input type="text" id="${id}-search" class="tad-search" placeholder="Search teams..." aria-label="Search teams" oninput="tsFilter('${id}')" onfocus="document.getElementById('${id}-dropdown').classList.add('ts-open')" />
+    <div id="${id}-dropdown" class="ts-dropdown">${items}</div>
+    <input type="hidden" id="${id}-value" name="team_id" value=""/>
+  </div>
+  <script>window._ts=window._ts||{};window._ts['${id}']=[];
+  window.tsFilter=function(id){var q=document.getElementById(id+'-search').value.toLowerCase();document.querySelectorAll('#'+id+'-dropdown .tad-row').forEach(function(r){r.style.display=r.dataset.name.includes(q)?'':'none'})};
+  window.tsSelect=function(id,tid,name){window._ts[id].push({id:tid,name:name});tsRender(id);document.getElementById(id+'-dropdown').classList.remove('ts-open');document.getElementById(id+'-search').value=''};
+  function tsRender(id){var b=document.getElementById(id+'-badges');b.innerHTML='';window._ts[id].forEach(function(t,i){b.innerHTML+='<span class="ts-badge">'+t.name+' <span class="ts-badge-x" data-action="tsRemove" data-args=\\'["'+id+'",'+i+']\\' >&times;</span></span>'});document.getElementById(id+'-value').value=window._ts[id].map(function(t){return t.id}).join(',')}
+  window.tsRemove=function(id,idx){window._ts[id].splice(idx,1);tsRender(id)};
+  document.addEventListener('click',function(e){if(!document.getElementById('${id}-wrap').contains(e.target))document.getElementById('${id}-dropdown').classList.remove('ts-open')});</script>`
+}

package/src/ui/render-helpers.js

@@ -0,0 +1,124 @@
+import { h } from '@/ui/webjsx.js'
+
+export const STAGE_COLORS = {
+  info_gathering: { bg: '#dbeafe', text: '#1e40af', label: 'Info Gathering', bgDark: '#1e3a8a', textDark: '#60a5fa' },
+  commencement: { bg: '#dbeafe', text: '#1e40af', label: 'Commencement', bgDark: '#1e3a8a', textDark: '#60a5fa' },
+  team_execution: { bg: '#fef3c7', text: '#92400e', label: 'Team Execution', bgDark: '#78350f', textDark: '#fbbf24' },
+  partner_review: { bg: '#fef3c7', text: '#92400e', label: 'Partner Review', bgDark: '#78350f', textDark: '#fbbf24' },
+  finalization: { bg: '#d1fae5', text: '#065f46', label: 'Finalization', bgDark: '#064e3b', textDark: '#34d399' },
+  closeout: { bg: '#d1fae5', text: '#065f46', label: 'Close Out', bgDark: '#064e3b', textDark: '#34d399' },
+}
+
+export const STATUS_COLORS = {
+  pending: { bg: '#fef3c7', text: '#92400e' },
+  active: { bg: '#dbeafe', text: '#1e40af' },
+  completed: { bg: '#d1fae5', text: '#065f46' },
+  archived: { bg: '#f3f4f6', text: '#4b5563' },
+  open: { bg: '#fef3c7', text: '#92400e' },
+  closed: { bg: '#d1fae5', text: '#065f46' },
+  draft: { bg: '#f3f4f6', text: '#6b7280' },
+  in_progress: { bg: '#dbeafe', text: '#1e40af' },
+  review: { bg: '#ede9fe', text: '#5b21b6' },
+  approved: { bg: '#d1fae5', text: '#065f46' },
+  rejected: { bg: '#fee2e2', text: '#991b1b' },
+  overdue: { bg: '#fee2e2', text: '#991b1b' },
+  cancelled: { bg: '#f3f4f6', text: '#6b7280' },
+  on_hold: { bg: '#fef3c7', text: '#92400e' },
+  resolved: { bg: '#d1fae5', text: '#065f46' },
+  unresolved: { bg: '#fee2e2', text: '#991b1b' },
+  flagged: { bg: '#fce7f3', text: '#9d174d' },
+  responded: { bg: '#dbeafe', text: '#1e40af' },
+  expired: { bg: '#f3f4f6', text: '#6b7280' },
+  private: { bg: '#ede9fe', text: '#5b21b6' },
+  public: { bg: '#dbeafe', text: '#1e40af' },
+}
+
+export const STAGE_CONFIG = [
+  { key: 'info_gathering', label: 'Info Gathering', badge: 'stage-pill stage-info_gathering', color: '#e53935' },
+  { key: 'commencement',   label: 'Commencement',   badge: 'stage-pill stage-commencement',  color: '#e65100' },
+  { key: 'team_execution', label: 'Team Execution', badge: 'stage-pill stage-team_execution', color: '#1565c0' },
+  { key: 'partner_review', label: 'Partner Review', badge: 'stage-pill stage-partner_review', color: '#283593' },
+  { key: 'finalization',   label: 'Finalization',   badge: 'stage-pill stage-finalization',   color: '#2e7d32' },
+  { key: 'closeout',       label: 'Close Out',      badge: 'stage-pill stage-closeout',       color: '#33691e' },
+]
+
+export const AVATAR_COLORS = ['#3b82f6','#ef4444','#10b981','#f59e0b','#8b5cf6','#ec4899','#06b6d4','#84cc16','#f97316','#6366f1','#14b8a6','#e11d48']
+export const AVATAR_SIZES = { sm: 24, md: 32, lg: 40, xl: 48 }
+
+export 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)};`
+
+export const TABLE_SCRIPT = `(function(){let sortCol=null,sortDir=1;function filterTable(){const search=(document.getElementById('search-input')?.value||'').toLowerCase();const filters={};document.querySelectorAll('[data-filter]').forEach(el=>{if(el.value)filters[el.dataset.filter]=el.value.toLowerCase()});let shown=0,total=0;document.querySelectorAll('tbody tr[data-row]').forEach(row=>{total++;const text=row.textContent.toLowerCase();const matchSearch=!search||text.includes(search);const matchFilters=Object.entries(filters).every(([key,val])=>{const cell=row.querySelector('[data-col="'+key+'"]');return !cell||cell.textContent.toLowerCase().includes(val)});const visible=matchSearch&&matchFilters;row.style.display=visible?'':'none';if(visible)shown++});const counter=document.getElementById('row-count');if(counter)counter.textContent=shown===total?total+' items':shown+' of '+total+' items'}function sortTable(col){if(sortCol===col)sortDir*=-1;else{sortCol=col;sortDir=1;}document.querySelectorAll('th[data-sort]').forEach(th=>{th.classList.remove('sort-asc','sort-desc');if(th.dataset.sort===col)th.classList.add(sortDir===1?'sort-asc':'sort-desc')});const tbody=document.querySelector('tbody');if(!tbody)return;const rows=Array.from(tbody.querySelectorAll('tr[data-row]'));rows.sort((a,b)=>{const av=a.querySelector('[data-col="'+col+'"]')?.textContent?.trim()||'';const bv=b.querySelector('[data-col="'+col+'"]')?.textContent?.trim()||'';return av.localeCompare(bv,undefined,{numeric:true})*sortDir});rows.forEach(r=>tbody.appendChild(r))}window.filterTable=filterTable;window.sortTable=sortTable;document.addEventListener('DOMContentLoaded',()=>{document.getElementById('search-input')?.addEventListener('input',filterTable);document.querySelectorAll('[data-filter]').forEach(el=>el.addEventListener('change',filterTable));document.querySelectorAll('th[data-sort]').forEach(th=>th.addEventListener('click',()=>sortTable(th.dataset.sort)))})})();`
+
+export function esc(s) {
+  return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')
+}
+
+export function stagePill(stage) {
+  const cfg = STAGE_CONFIG.find(s => s.key === stage)
+  const lbl = cfg ? cfg.label : (stage || '-')
+  const stageColor = STAGE_COLORS[stage]
+  if (stageColor) {
+    return `<span class="stage-pill stage-${esc(stage||'')}" data-stage="${stage}" style="background:${stageColor.bg};color:${stageColor.text}">${lbl}</span>`
+  }
+  return `<span class="stage-pill stage-${esc(stage||'')}">${lbl}</span>`
+}
+
+export function statusPill(status) {
+  const map = { active:'pill pill-success', pending:'pill pill-warning', inactive:'pill pill-neutral', draft:'pill pill-neutral', closed:'pill pill-neutral', responded:'pill pill-success', overdue:'pill pill-danger', sent:'pill pill-warning' }
+  const cls = map[(status||'').toLowerCase()] || 'pill pill-neutral'
+  return `<span class="${cls}">${status ? status.charAt(0).toUpperCase()+status.slice(1) : '-'}</span>`
+}
+
+export function statusBadge(status) {
+  const map = { active:'pill pill-success', inactive:'pill pill-danger', pending:'pill pill-warning', open:'pill pill-info', in_progress:'pill pill-info', completed:'pill pill-success', closed:'pill pill-neutral', archived:'pill pill-neutral', responded:'pill pill-info' }
+  const cls = map[(status||'').toLowerCase()] || 'pill pill-neutral'
+  return `<span class="${cls}">${status ? status.charAt(0).toUpperCase()+status.slice(1) : '-'}</span>`
+}
+
+export function progressBar(pct) {
+  if (typeof pct !== 'number') return '-'
+  const p = Math.min(100, Math.max(0, Math.round(pct)))
+  return `<div style="display:flex;align-items:center;gap:8px;min-width:100px"><div style="flex:1;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden"><div style="height:100%;width:${p}%;background:var(--color-primary);border-radius:3px"></div></div><span style="font-size:12px;color:var(--color-text-muted);min-width:28px">${p}%</span></div>`
+}
+
+export function fmtVal(value, fieldKey, item = {}) {
+  if (value === null || value === undefined) return '-'
+  if (fieldKey?.includes('_at') || fieldKey === 'created_at' || fieldKey === 'updated_at') {
+    const num = Number(value)
+    if (!isNaN(num) && num > 1000000000 && num < 3000000000) return new Date(num * 1000).toLocaleString()
+  }
+  if (fieldKey === 'year') { const n = Number(value); if (!isNaN(n)) return String(Math.floor(n)) }
+  if (fieldKey === 'stage' && STAGE_COLORS[value]) {
+    const s = STAGE_COLORS[value]
+    return h('span', { className: 'badge-stage', style: `background:${s.bg};color:${s.text}` }, s.label)
+  }
+  if (fieldKey === 'status' && STATUS_COLORS[value]) {
+    const s = STATUS_COLORS[value]
+    return h('span', { className: 'badge-status', style: `background:${s.bg};color:${s.text}` }, value.charAt(0).toUpperCase() + value.slice(1))
+  }
+  if (item[`${fieldKey}_display`]) return item[`${fieldKey}_display`]
+  return String(value)
+}
+
+export function statusLabel(status) {
+  if (!status) return ''
+  const key = status.toLowerCase().replace(/\s+/g, '_')
+  const s = STATUS_COLORS[key] || { bg: '#f3f4f6', text: '#6b7280' }
+  const label = status.charAt(0).toUpperCase() + status.slice(1).replace(/_/g, ' ')
+  return h('span', { className: 'status-label', style: `background:${s.bg};color:${s.text}` }, label)
+}
+
+export function nameHash(name) {
+  let hash = 0
+  for (let i = 0; i < (name || '').length; i++) hash = ((hash << 5) - hash + name.charCodeAt(i)) | 0
+  return Math.abs(hash)
+}
+
+export { getInitials } from '@/lib/utils.js'
+
+export 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);
+}

package/src/ui/renderer.js

@@ -0,0 +1,35 @@
+import { renderDialog } from '@/ui/dialog-engine.js'
+import { renderComponent, getComponentConfig, validateComponentProps } from '@/ui/component-engine.js'
+
+export const REDIRECT = Symbol('REDIRECT')
+export { renderDialog, renderComponent, getComponentConfig, validateComponentProps }
+
+export { STAGE_COLORS, STATUS_COLORS, TOAST_SCRIPT, fmtVal, statusLabel } from '@/ui/render-helpers.js'
+export { generateHtml, breadcrumb, nav, page, fullPage, statCards, confirmDialog, dataTable } from '@/ui/layout.js'
+export { renderLogin, renderPasswordReset, renderPasswordResetConfirm, renderAccessDenied } from '@/ui/auth-pages.js'
+export { renderDashboard, renderAuditDashboard, renderSystemHealth } from '@/ui/dashboard-renderer.js'
+export { renderEntityList, renderEntityDetail, renderEntityForm, renderSettings } from '@/ui/entity-renderer.js'
+
+export {
+  linearProgress, circularProgress, engagementProgress, emptyState,
+  getUserAvatarUrl, userAvatar, teamAvatarGroup, infoBubble,
+  sortableList, responseChoiceBox, responseAttachment,
+  accordion, divider, responsiveClass, reviewCalcFields
+} from '@/ui/widgets.js'
+
+export { dataGridAdvanced, collapsibleSidebar } from '@/ui/advanced-widgets.js'
+
+export {
+  engagementCard, mobileEngagementCard, stagePipeline,
+  activityTimeline, splashScreen, swUpdateBanner
+} from '@/ui/engagement-cards.js'
+
+export {
+  mobileReviewCard, sidebarReviewDetails, archiveReviewDialog,
+  reviewOpenCloseToggle, reviewPrivateToggle, markAllHighlightsResolved
+} from '@/ui/review-widgets.js'
+
+export {
+  colorPickerDialog, dateChoiceDialog, stageTransitionDialog,
+  teamAssignmentDialog, teamSelector
+} from '@/ui/picker-dialogs.js'