thatcher 1.0.7 → 1.0.34

package/src/services/notification-engine.js

@@ -1,24 +1,17 @@
-/**
- * Notification Engine - In-app notifications, email triggers
- */
-
 import { getTransporter, sendEmail } from './email-sender.js';
 import { getConfigEngineSync } from '../lib/config-generator-engine.js';
 import { executeHook } from '../lib/hook-engine.js';
+import { createLogger } from '../lib/logger.js';
+
+const log = createLogger('[Notification]');
 
-/**
- * Get notification template from config
- */
 export function getNotificationTemplate(name) {
   const engine = getConfigEngineSync();
   return engine.generateNotificationHandler(name);
 }
 
-/**
- * Create notification record
- */
 export async function createNotification(notification) {
-  const { create } = await import('../lib/query-engine-write.js');
+  const { create } = await import('../lib/busybase-store.js');
   return create('notification', {
     ...notification,
     created_at: Math.floor(Date.now() / 1000),
@@ -26,20 +19,16 @@ export async function createNotification(notification) {
   }, { id: notification.created_by || 'system', role: 'system' });
 }
 
-/**
- * Send notification to user (in-app + optional email)
- */
 export async function sendNotification(type, userId, context = {}, options = {}) {
   const template = getNotificationTemplate(type);
   if (!template) {
-    console.warn(`[Notification] Template not found: ${type}`);
+    log.warn(`template not found: ${type}`);
     return null;
   }
 
   const title = interpolate(template.title, context);
   const message = interpolate(template.message, context);
 
-  // Create notification record
   const notification = await createNotification({
     type,
     user_id: userId,
@@ -51,7 +40,6 @@ export async function sendNotification(type, userId, context = {}, options = {})
     created_by: context.userId || 'system',
   });
 
-  // Send email if enabled
   if (options.sendEmail !== false) {
     try {
       const { getUser } = await import('../engine.server.js');
@@ -64,7 +52,7 @@ export async function sendNotification(type, userId, context = {}, options = {})
         });
       }
     } catch (err) {
-      console.error('[Notification] Email failed:', err.message);
+      log.error('email failed:', { message: err.message });
     }
   }
 
@@ -72,35 +60,26 @@ export async function sendNotification(type, userId, context = {}, options = {})
     notification,
     user: { id: userId },
     context,
-  }).catch(console.error);
+  }).catch(err => log.error('hook error:', { message: err?.message || String(err) }));
 
   return notification;
 }
 
-/**
- * Mark notification as read
- */
 export async function markNotificationRead(notificationId, userId) {
-  const { update } = await import('../lib/query-engine-write.js');
+  const { update } = await import('../lib/busybase-store.js');
   return update('notification', notificationId, {
     read_at: Math.floor(Date.now() / 1000),
-  }, { id: userId, role: 'user' });
+  });
 }
 
-/**
- * Get unread count for user
- */
 export async function getUnreadCount(userId) {
-  const { list } = await import('../lib/query-engine.js');
-  return list('notification', {
+  const { list } = await import('../lib/busybase-store.js');
+  return (await list('notification', {
     user_id: userId,
     read_at: null,
-  }).length;
+  })).length;
 }
 
-/**
- * Interpolate {{key}} in template strings
- */
 function interpolate(template, context) {
   if (!template) return '';
   return template.replace(/\{\{(\w+)\}\}/g, (_, key) => {

package/src/services/permission.service.js

@@ -1,46 +1,22 @@
-/**
- * Permission Service - Authorization logic
- * Adapted from moonlanding/src/services/permission.service.js
- */
+// Adapted from moonlanding/src/services/permission.service.js
 
 import { getCollaboratorRole, checkCollaboratorAccess } from '../services/collaborator-role.service.js';
 import { PermissionError } from '../lib/error-handler.js';
 import { getConfigEngineSync } from '../lib/config-generator-engine.js';
 
 class PermissionService {
-  /**
-   * Check if user can perform action on entity spec
-   * @param {object} user
-   * @param {object} spec
-   * @param {string} action
-   * @returns {boolean}
-   */
   can(user, spec, action) {
     if (!user) return false;
     if (!spec?.access?.[action]) return true; // No restriction defined = allow
     return spec.access[action].includes(user.role);
   }
 
-  /**
-   * Require permission (throw if denied)
-   * @param {object} user
-   * @param {object} spec
-   * @param {string} action
-   */
   require(user, spec, action) {
     if (!this.can(user, spec, action)) {
       throw new PermissionError(`Cannot ${action} ${spec?.name || 'unknown'}`);
     }
   }
 
-  /**
-   * Check field-level access
-   * @param {object} user
-   * @param {object} spec
-   * @param {string} fieldName
-   * @param {string} action - 'view' or 'edit'
-   * @returns {boolean}
-   */
   checkFieldAccess(user, spec, fieldName, action) {
     if (!user) return false;
     const perm = spec.fieldPermissions?.[fieldName];
@@ -50,13 +26,6 @@ class PermissionService {
     return Array.isArray(allowed) && allowed.includes(user.role);
   }
 
-  /**
-   * Check row-level access
-   * @param {object} user
-   * @param {object} spec
-   * @param {object} record
-   * @returns {boolean}
-   */
   checkRowAccess(user, spec, record) {
     if (!user) return false;
     const rowAccess = spec.rowAccess || spec.row_access;
@@ -68,17 +37,22 @@ class PermissionService {
     const clientUserRole = Object.keys(roles).find(r => r === 'client_user');
 
     const scope = rowAccess.scope || rowAccess;
+    // The owner field defaults to 'assigned_to' but is configurable, so an app
+    // whose ownership column is named differently (e.g. casey's case.assignee) can
+    // use scope=assigned without renaming its schema: row_access: { scope: assigned,
+    // field: assignee }.
+    const ownerField = (typeof rowAccess === 'object' && rowAccess.field) || 'assigned_to';
 
     if (scope === 'team' && record.team_id && user.team_id && record.team_id !== user.team_id) {
       return false;
     }
 
-    if (scope === 'assigned' && record.assigned_to && record.assigned_to !== user.id && user.role !== partnerRole) {
+    if (scope === 'assigned' && record[ownerField] && record[ownerField] !== user.id && user.role !== partnerRole) {
       return false;
     }
 
     if (scope === 'assigned_or_team' && user.role !== partnerRole) {
-      const assignedMatch = record.assigned_to && record.assigned_to === user.id;
+      const assignedMatch = record[ownerField] && record[ownerField] === user.id;
       const teamMatch = record.team_id && user.team_id && record.team_id === user.team_id;
       if (!assignedMatch && !teamMatch) return false;
     }
@@ -97,25 +71,11 @@ class PermissionService {
     return true;
   }
 
-  /**
-   * Filter records by row access
-   * @param {object} user
-   * @param {object} spec
-   * @param {Array} records
-   * @returns {Array}
-   */
   filterRecords(user, spec, records) {
     if (!user || !Array.isArray(records)) return records;
     return records.filter(r => this.checkRowAccess(user, spec, r));
   }
 
-  /**
-   * Filter fields by field-level permissions
-   * @param {object} user
-   * @param {object} spec
-   * @param {object} record
-   * @returns {object}
-   */
   filterFields(user, spec, record) {
     if (!user) return record;
     const filtered = {};
@@ -128,12 +88,6 @@ class PermissionService {
     return filtered;
   }
 
-  /**
-   * Enforce edit permissions on data
-   * @param {object} user
-   * @param {object} spec
-   * @param {object} data
-   */
   enforceEditPermissions(user, spec, data) {
     if (!user) throw new PermissionError(`Cannot edit ${spec.name}`);
     if (!this.can(user, spec, 'edit')) throw new PermissionError(`Cannot edit ${spec.name}`);
@@ -145,35 +99,18 @@ class PermissionService {
     }
   }
 
-  /**
-   * Check if user owns record
-   * @param {object} user
-   * @param {object} spec
-   * @param {object} record
-   * @returns {boolean}
-   */
   checkOwnership(user, spec, record) {
     if (!record) return false;
     return record.created_by === user.id || record.user_id === user.id;
   }
 
-  /**
-   * Check assignment for client access
-   * @param {object} user
-   * @param {object} spec
-   * @param {object} record
-   * @returns {boolean}
-   */
   checkAssignment(user, spec, record) {
     // Simplified - check if user is assigned to record
     return record.assigned_to === user.id || record.team_id === user.team_id;
   }
 
-  /**
-   * Check collaborator-style permission
-   */
-  hasCollaboratorPermission(collaboratorId, permission) {
-    return getCollaboratorRole(collaboratorId)?.permissions?.includes(permission);
+  async hasCollaboratorPermission(collaboratorId, permission) {
+    return (await getCollaboratorRole(collaboratorId))?.permissions?.includes(permission);
   }
 }
 

package/src/ui/advanced-search-renderer.js

@@ -1,6 +1,7 @@
 import { statusLabel } from '@/ui/renderer.js';
 import { page } from '@/ui/layout.js';
 import { fmtDate, esc } from '@/ui/render-helpers.js';
+import { emptyState } from '@/ui/format-helpers.js';
 
 function resultCard(item, entityType) {
   const sts = item.status ? statusLabel(item.status) : '';
@@ -32,11 +33,11 @@ export function renderAdvancedSearch(user, results = {}, options = {}) {
 
   const resultCards = allResults.length > 0
     ? allResults.map(r => resultCard(r, r._type)).join('')
-    : '<div class="text-center py-12 text-gray-400">Enter a search query to find engagements, clients, RFIs, and reviews</div>';
+    : emptyState('Enter a search query to find engagements, clients, RFIs, and reviews', 'search');
 
   const content = `<div class="flex justify-between items-center mb-6"><h1 class="text-2xl font-bold">Advanced Search</h1></div>${filterPanel(teams, stages)}<div class="flex items-center gap-2 mb-4"><span class="text-sm text-gray-500">${totalCount} result${totalCount !== 1 ? 's' : ''}</span>${countBadges}</div><div id="search-results">${resultCards}</div>`;
 
   const searchScript = `window.doSearch=async function(){const q=document.getElementById('search-query')?.value||'';const entity=document.getElementById('filter-entity')?.value||'';const status=document.getElementById('filter-status')?.value||'';const stage=document.getElementById('filter-stage')?.value||'';const team=document.getElementById('filter-team')?.value||'';const from=document.getElementById('filter-from')?.value||'';const to=document.getElementById('filter-to')?.value||'';const params=new URLSearchParams();if(q)params.set('q',q);if(entity)params.set('entity',entity);if(status)params.set('status',status);if(stage)params.set('stage',stage);if(team)params.set('team',team);if(from)params.set('from',from);if(to)params.set('to',to);window.location='/search?'+params.toString()};document.getElementById('search-query')?.addEventListener('keydown',function(e){if(e.key==='Enter')doSearch()})`;
 
-  return page(user, 'Search | Moonlanding', [{ href: '/', label: 'Dashboard' }, { label: 'Search' }], content, [searchScript]);
+  return page(user, 'Search | Thatcher', [{ href: '/', label: 'Dashboard' }, { label: 'Search' }], content, [searchScript]);
 }

package/src/ui/advanced-widgets.js

@@ -43,5 +43,5 @@ export function collapsibleSidebar(sections, currentPath) {
     return `<div class="sidebar-section"><div class="sidebar-section-header" data-action="sidebarToggleSection" data-self>${section.title}<span class="sidebar-section-arrow"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></span></div><div class="sidebar-section-body">${links}</div></div>`
   }).join('')
   const script = `(function(){var sb=document.getElementById('${sidebarId}');var saved=localStorage.getItem('sidebar-width');if(saved)sb.style.width=saved+'px';var collapsed=localStorage.getItem('sidebar-collapsed')==='true';if(collapsed)sb.classList.add('sidebar-collapsed');window.sidebarToggleSection=function(el){el.parentElement.classList.toggle('sidebar-section-closed')};window.sidebarToggleCollapse=function(){sb.classList.toggle('sidebar-collapsed');localStorage.setItem('sidebar-collapsed',sb.classList.contains('sidebar-collapsed'))};var handle=sb.querySelector('.sidebar-resize-handle');var startX,startW;handle.addEventListener('mousedown',function(e){startX=e.clientX;startW=sb.offsetWidth;function onMove(ev){var w=startW+(ev.clientX-startX);if(w>48&&w<400){sb.style.width=w+'px';localStorage.setItem('sidebar-width',w)}}function onUp(){document.removeEventListener('mousemove',onMove);document.removeEventListener('mouseup',onUp)}document.addEventListener('mousemove',onMove);document.addEventListener('mouseup',onUp)})})();`
-  return `<aside id="${sidebarId}" class="sidebar-collapsible"><div class="sidebar-inner"><button class="sidebar-collapse-btn" data-action="sidebarToggleCollapse" title="Toggle sidebar"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/></svg></button>${sectionHtml}</div><div class="sidebar-resize-handle"></div></aside><script>${script}</script>`
+  return `<aside id="${sidebarId}" class="sidebar-collapsible"><div class="sidebar-inner"><button class="sidebar-collapse-btn" data-action="sidebarToggleCollapse" title="Toggle sidebar" aria-label="Toggle sidebar"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/></svg></button>${sectionHtml}</div><div class="sidebar-resize-handle"></div></aside><script>${script}</script>`
 }

package/src/ui/auth-pages.js

@@ -1,10 +1,11 @@
 import { generateHtml } from '@/ui/layout.js'
 import { nav as navFn } from '@/ui/layout.js'
 import { AUTH_CSS, GOOGLE_SVG, WARN_SVG, LOGO_SVG, authLogoHtml } from '@/ui/auth-styles.js'
+import { esc } from '@/ui/render-helpers.js'
 
 export function renderLogin(error = null, hasGoogleAuth = false) {
   const errHtml = error
-    ? `<div class="auth-err" role="alert">${WARN_SVG}${String(error).replace(/</g, '&lt;')}</div>`
+    ? `<div class="auth-err" role="alert">${WARN_SVG}${esc(error)}</div>`
     : ''
   const googleBtn = hasGoogleAuth
     ? `<a href="/api/auth/google" class="auth-google-btn" aria-label="Continue with Google">${GOOGLE_SVG}Continue with Google</a>
@@ -37,7 +38,7 @@ form.addEventListener('submit',async function(e){
     else{var el=document.createElement('div');el.className='auth-err';el.setAttribute('role','alert');el.textContent=data.error||'Login failed. Please check your credentials.';errArea.innerHTML='';errArea.appendChild(el);btn.textContent='Sign In';btn.disabled=false;}
   }catch(err){errArea.innerHTML='<div class="auth-err" role="alert">Network error. Please try again.</div>';btn.textContent='Sign In';btn.disabled=false;}
 });`
-  return generateHtml('Sign In | Moonlanding', body, [script])
+  return generateHtml('Sign In | Thatcher', body, [script])
 }
 
 export function renderPasswordReset() {
@@ -65,7 +66,7 @@ form.addEventListener('submit',async function(e){
     else{var d=await res.json().catch(function(){return{};});var el=document.createElement('div');el.className='auth-err';el.setAttribute('role','alert');el.textContent=d.error||'Request failed. Please try again.';errArea.innerHTML='';errArea.appendChild(el);btn.textContent='Send Reset Link';btn.disabled=false;}
   }catch(err){errArea.innerHTML='<div class="auth-err" role="alert">Network error. Please try again.</div>';btn.textContent='Send Reset Link';btn.disabled=false;}
 });`
-  return generateHtml('Reset Password | Moonlanding', body, [script])
+  return generateHtml('Reset Password | Thatcher', body, [script])
 }
 
 export function renderPasswordResetConfirm(token) {
@@ -73,9 +74,9 @@ export function renderPasswordResetConfirm(token) {
   <div class="auth-shell"><div class="auth-wrap">
     ${authLogoHtml('Set a new password')}
     <div class="auth-card">
-      <div id="confirm-success" class="auth-success" style="display:none" role="alert">Password updated. <a href="/login" style="color:#15803d;text-decoration:underline;font-weight:600">Sign in now</a></div>
+      <div id="confirm-success" class="auth-success" style="display:none" role="alert">Password updated. <a href="/login" style="color:var(--color-success,#15803d);text-decoration:underline;font-weight:600">Sign in now</a></div>
       <form id="confirm-form" aria-label="Set new password" novalidate>
-        <input type="hidden" name="token" value="${token}">
+        <input type="hidden" name="token" value="${esc(token)}">
         <div class="auth-field"><label class="auth-label" for="password">New password</label>
           <input type="password" name="password" id="password" class="auth-input" placeholder="At least 8 characters" minlength="8" required autocomplete="new-password" autofocus></div>
         <div class="auth-field"><label class="auth-label" for="confirm_password">Confirm new password</label>
@@ -99,16 +100,16 @@ form.addEventListener('submit',async function(e){
     else{var el=document.createElement('div');el.className='auth-err';el.setAttribute('role','alert');el.textContent=data.error||'Reset failed. Please try again.';errArea.innerHTML='';errArea.appendChild(el);btn.textContent='Update Password';btn.disabled=false;}
   }catch(err){errArea.innerHTML='<div class="auth-err" role="alert">Network error. Please try again.</div>';btn.textContent='Update Password';btn.disabled=false;}
 });`
-  return generateHtml('Set New Password | Moonlanding', body, [script])
+  return generateHtml('Set New Password | Thatcher', body, [script])
 }
 
 export function renderAccessDenied(user, entityName, action) {
   const txt = { list: 'view this list', view: 'view this item', create: 'create items here', edit: 'edit this item', delete: 'delete this item' }
   const body = `<div class="min-h-screen">${navFn(user)}<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:40px 20px">
-    <div style="font-size:48px;margin-bottom:16px" aria-hidden="true">&#128274;</div>
+    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-muted,#64748b)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:16px" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
     <h1 style="font-size:24px;font-weight:700;color:var(--color-text,#0f172a);margin:0 0 8px">Access Denied</h1>
-    <p style="color:var(--color-text-muted,#64748b);margin:0 0 24px;max-width:400px">You do not have permission to ${txt[action] || action} in ${entityName}.</p>
+    <p style="color:var(--color-text-muted,#64748b);margin:0 0 24px;max-width:400px">You do not have permission to ${esc(txt[action] || action)} in ${esc(entityName)}.</p>
     <a href="/" class="btn-primary-clean">Return to Dashboard</a>
   </div></div>`
-  return generateHtml('Access Denied | Moonlanding', body)
+  return generateHtml('Access Denied | Thatcher', body)
 }

package/src/ui/auth-styles.js

@@ -48,6 +48,6 @@ export const LOGO_SVG = `<svg width="26" height="26" viewBox="0 0 24 24" fill="n
 export const authLogoHtml = (subtitle) => `
   <div class="auth-logo">
     <div class="auth-logo-mark">${LOGO_SVG}</div>
-    <span class="auth-logo-name">MOONLANDING</span>
+    <span class="auth-logo-name">Thatcher</span>
     <div class="auth-logo-sub">${subtitle}</div>
   </div>`;

package/src/ui/client.js

@@ -68,7 +68,7 @@ export async function submitForm(formId, url, method = 'POST') {
 }
 
 export async function confirmDelete(url, redirectUrl) {
-  if (!confirm('Are you sure you want to delete this?')) return false;
+  if (!(await window.gmConfirm({ title: 'Please confirm', message: 'Are you sure you want to delete this?', confirmLabel: 'Delete', danger: true }))) return false;
   try {
     const res = await fetch(url, { method: 'DELETE' });
     if (res.ok) {

package/src/ui/component-engine.js

@@ -34,7 +34,7 @@ export function renderComponent(componentId, props = {}) {
       if (Array.isArray(value)) {
         html = html.replace(regex, value.map(v => renderItem(v, key)).join(''));
       } else {
-        html = html.replace(regex, JSON.stringify(value));
+        html = html.replace(regex, esc(JSON.stringify(value)));
       }
     } else {
       html = html.replace(regex, esc(value));

package/src/ui/dashboard-renderer.js

@@ -42,7 +42,7 @@ export function renderDashboard(user, stats = {}) {
       </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() : '-';
+    const updated = e.updated_at ? new Date(typeof e.updated_at === 'number' ? e.updated_at * 1000 : e.updated_at).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}) : '-';
     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>
@@ -82,14 +82,14 @@ export function renderDashboard(user, stats = {}) {
     </div>
     ${statsHtml}${overdueAlert}${actionsHtml}${emptyEngHtml}${recentHtml}`;
 
-  return page(user, 'Dashboard | Moonlanding', [], content, [TABLE_SCRIPT]);
+  return page(user, 'Dashboard | Thatcher', [], 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="time">${new Date((a.timestamp||a.created_at)*1000).toLocaleString('en-ZA')}</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>
@@ -118,7 +118,7 @@ export function renderAuditDashboard(user, auditData = {}) {
       </table>
     </div>`;
 
-  return page(user, 'Audit Dashboard | MOONLANDING', [{ href: '/', label: 'Dashboard' }, { href: '/admin/audit', label: 'Audit' }], content, [TABLE_SCRIPT]);
+  return page(user, 'Audit Dashboard | Thatcher', [{ href: '/', label: 'Dashboard' }, { href: '/admin/audit', label: 'Audit' }], content, [TABLE_SCRIPT]);
 }
 
 export function renderSystemHealth(user, healthData = {}) {
@@ -146,5 +146,5 @@ export function renderSystemHealth(user, healthData = {}) {
       </table>
     </div>`;
 
-  return page(user, 'System Health | MOONLANDING', [{ href: '/', label: 'Dashboard' }, { href: '/admin/health', label: 'Health' }], content, [TABLE_SCRIPT]);
+  return page(user, 'System Health | Thatcher', [{ href: '/', label: 'Dashboard' }, { href: '/admin/health', label: 'Health' }], content, [TABLE_SCRIPT]);
 }

package/src/ui/dialog-engine.js

@@ -1,5 +1,5 @@
 import { getConfigEngineSync } from '@/lib/config-generator-engine';
-import { aria, role, focusTrap, keyboard } from '@/lib/accessibility';
+import { aria, role } from '@/lib/accessibility';
 
 export function renderDialog(dialogId, context = {}) {
   const config = getConfigEngineSync().getConfig();
@@ -29,7 +29,7 @@ function generateDialogHtml(dialogId, title, fields, actions, width, context, on
   }).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}" class="dialog-overlay" style="display:none" ${role.dialog} aria-modal="true" ${aria.labelledBy(titleId)} ${aria.hidden(true)} data-dialog-close="${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>
@@ -48,11 +48,8 @@ function generateDialogHtml(dialogId, title, fields, actions, width, context, on
         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;
-        }
+        // Escape + focus-restore + tab-trap are owned centrally by dialogFocus
+        // (event-delegation.js, session-12) — no local focusTrap/_previousFocus here.
       };
       window.submitDialog = window.submitDialog || function(id) {
         const form = document.getElementById(id + '-form');
@@ -60,10 +57,10 @@ function generateDialogHtml(dialogId, title, fields, actions, width, context, on
       };
       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')}
+        // focus-move into the panel + Tab-trap are owned by dialogFocus
+        // (event-delegation.js MutationObserver watches the display flip).
       };
     </script>
   `;

package/src/ui/dialog-factory.js

@@ -3,7 +3,7 @@ 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">
+  return `<div id="${esc(id)}" class="dialog-overlay ${extraClass}" style="display:none" data-dialog-close="${esc(id)}" 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>
@@ -19,7 +19,7 @@ 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">
+  return `<div id="${esc(id)}" class="modal" style="display:none">
   <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>

package/src/ui/engagement-cards.js

@@ -1,5 +1,5 @@
 import { h } from '@/ui/webjsx.js'
-import { STAGE_COLORS, statusLabel, esc } from '@/ui/render-helpers.js'
+import { STAGE_COLORS, statusLabel, esc, icon } from '@/ui/render-helpers.js'
 import { teamAvatarGroup } from '@/ui/widgets.js'
 import { canEdit } from '@/ui/permissions-ui.js'
 
@@ -10,7 +10,7 @@ export function engagementCard(engagement, user) {
   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 dueDate = e.due_date ? `<span class="text-xs text-gray-500">${typeof e.due_date === 'number' ? new Date(e.due_date * 1000).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}) : e.due_date}</span>` : ''
   const clientName = e.client_name || e.client?.name || ''
   return `<div class="engagement-card card-clean" data-navigate="/engagement/${esc(e.id)}" style="cursor:pointer">
     <div class="card-clean-body">
@@ -31,7 +31,7 @@ export function mobileEngagementCard(engagement) {
     <div class="card-clean-body">
       <div class="flex justify-between items-center mb-2"><h3 class="font-medium text-sm">${esc(e.name || e.title || 'Untitled')}</h3>${sts}</div>
       ${e.client_name ? `<div class="text-xs text-gray-500 mb-1">${esc(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 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('en-ZA',{day:'2-digit',month:'short',year:'numeric'}) : 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>`
 }
@@ -51,13 +51,13 @@ export function stagePipeline(currentStage, stages = null, clickable = false, on
 export function activityTimeline(activities = [], showAll = false) {
   const maxItems = showAll ? activities.length : 10
   const items = activities.slice(0, maxItems)
-  const iconMap = { created: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>`, updated: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>`, status_changed: `<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="6"/></svg>`, commented: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`, assigned: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`, uploaded: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>` }
+  const iconMap = { created: 'document', updated: 'clipboard', status_changed: 'flag', commented: 'chat', assigned: 'user', uploaded: 'inbox' }
   const timelineItems = items.map(a => {
     const action = a.action || 'updated'
-    const icon = iconMap[action] || `<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><circle cx="12" cy="12" r="6"/></svg>`
+    const actIcon = icon(iconMap[action] || 'list', 13)
     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">${esc(a.description || a.action || '')}</span></div><div class="act-tl-time">${timeStr}${a.user_name ? ' by ' + esc(a.user_name) : ''}</div></div></div>`
+    const timeStr = ts ? (typeof ts === 'number' && ts > 1e9 ? new Date(ts * 1000).toLocaleString('en-ZA') : new Date(ts).toLocaleString('en-ZA')) : ''
+    return `<div class="act-tl-item"><div class="act-tl-icon act-tl-${action}">${actIcon}</div><div class="act-tl-content"><div class="act-tl-header"><span class="act-tl-desc">${esc(a.description || a.action || '')}</span></div><div class="act-tl-time">${timeStr}${a.user_name ? ' by ' + esc(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}`

package/src/ui/engagement-dialogs.js

@@ -8,8 +8,7 @@ export function engagementFileSearchDialog(engagementId) {
   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)};
+  window.efsSearch=function(){clearTimeout(efsTimer);efsTimer=setTimeout(function(){var q=document.getElementById('efs-query').value.trim();var el=document.getElementById('efs-results');if(!q){el.textContent='';return}fetch('/api/file?engagement_id=${engagementId}&search='+encodeURIComponent(q)).then(function(r){return r.json()}).then(function(d){var files=d.data||d||[];el.textContent='';if(!files.length){var none=document.createElement('div');none.className='text-gray-500 text-sm text-center py-4';none.textContent='No files found';el.appendChild(none);return}files.forEach(function(f){var row=document.createElement('div');row.className='flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer';row.setAttribute('data-action','previewAttachment');row.setAttribute('data-args',JSON.stringify(['/api/file/'+f.id+'/download',f.name||'',f.mime_type||'']));var left=document.createElement('div');var nm=document.createElement('div');nm.className='text-sm font-medium';nm.textContent=f.name||'Unknown';var sz=document.createElement('div');sz.className='text-xs text-gray-500';sz.textContent=f.size?Math.round(f.size/1024)+'KB':'';left.appendChild(nm);left.appendChild(sz);var badge=document.createElement('span');badge.className='badge-status text-xs';badge.textContent=f.type||'file';row.appendChild(left);row.appendChild(badge);el.appendChild(row)})}).catch(function(){el.textContent='';var err=document.createElement('div');err.className='text-red-500 text-sm';err.textContent='Search error';el.appendChild(err)})},300)};
   </script>`;
 }
 
@@ -29,7 +28,7 @@ export function postRfiJournalDialog(engagementId) {
 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')};
+  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.textContent='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.textContent='Uploaded '+(i+1)+' of '+files.length}catch(e){}}prog.textContent=ok+' of '+files.length+' uploaded successfully';if(ok>0)showToast(ok+' files uploaded','success')};
   </script>`;
 }