thatcher 1.0.4

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

@@ -0,0 +1,195 @@
+import { TOAST_SCRIPT, settingsPage, settingsBack, inlineTable } from '@/ui/settings-renderer.js';
+import { esc } from '@/ui/render-helpers.js';
+
+const hdr = (title, addHref, addLabel) => `${settingsBack()}<div class="flex justify-between items-center mb-6">
+  <h1 class="text-2xl font-bold">${title}</h1>
+  <a href="${addHref}" class="btn btn-primary btn-sm">${addLabel}</a>
+</div>`;
+const bc = (label) => [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { label }];
+const editBtn = (href) => `<a href="${href}" data-stop-propagation="true" class="btn btn-ghost btn-xs">Edit</a>`;
+const trClick = (url) => `class="hover cursor-pointer" data-navigate="${url}"`;
+
+export function renderSettingsTemplates(user, templates = []) {
+  const rows = templates.map(t => `<tr ${trClick('/review_template/'+t.id)}>
+    <td class="text-sm font-medium">${esc(t.name||'-')}</td>
+    <td><span class="badge badge-flat-primary text-xs">${esc(t.type||'standard')}</span></td>
+    <td>${t.is_active ? '<span class="badge badge-success badge-flat-success text-xs">Active</span>' : '<span class="badge badge-flat-secondary text-xs">Inactive</span>'}</td>
+    <td>${editBtn('/review_template/'+t.id+'/edit')}</td>
+  </tr>`).join('');
+  return settingsPage(user, 'Templates - Settings', bc('Templates'), hdr('Templates', '/review_template/new', '+ Add Template') + inlineTable(['Name', 'Type', 'Status', 'Actions'], rows, 'No templates found'));
+}
+
+export function renderSettingsChecklists(user, checklists = []) {
+  const rows = checklists.map(c => `<tr ${trClick('/checklist/'+c.id)}>
+    <td class="text-sm font-medium">${esc(c.name||'-')}</td>
+    <td class="text-sm">${esc(c.type||'-')}</td>
+    <td class="text-sm text-base-content/50">${esc(c.review_id||'-')}</td>
+    <td>${editBtn('/checklist/'+c.id+'/edit')}</td>
+  </tr>`).join('');
+  return settingsPage(user, 'Checklists - Settings', bc('Checklists'), hdr('Checklists', '/checklist/new', '+ Add Checklist') + inlineTable(['Name', 'Type', 'Review', 'Actions'], rows, 'No checklists found'));
+}
+
+export function renderSettingsRecreation(user, _logs = [], _users = []) {
+  const filters = `<div class="card-clean" style="margin-bottom:1rem"><div class="card-clean-body">
+    <div class="flex flex-wrap gap-4 items-end">
+      <div class="form-group"><label class="label"><span class="label-text font-semibold">Level</span></label><select id="filter-level" class="select select-solid"><option value="">All Levels</option><option value="info">Info</option><option value="warn">Warning</option><option value="error">Error</option></select></div>
+      <div class="form-group"><label class="label"><span class="label-text font-semibold">Entity Type</span></label><select id="filter-entity" class="select select-solid"><option value="">All Entities</option><option value="engagement">Engagement</option><option value="review">Review</option><option value="rfi">RFI</option><option value="user">User</option><option value="client">Client</option></select></div>
+      <div class="form-group"><label class="label"><span class="label-text font-semibold">Start Date</span></label><input type="date" id="filter-start" class="input input-solid"/></div>
+      <div class="form-group"><label class="label"><span class="label-text font-semibold">End Date</span></label><input type="date" id="filter-end" class="input input-solid"/></div>
+      <button data-action="applyAuditFilters" class="btn btn-primary btn-sm">Filter</button>
+    </div>
+  </div></div>`;
+  const content = `${settingsBack()}<h1 class="text-2xl font-bold mb-6">Audit Logs</h1>${filters}
+    <div class="card-clean"><div class="card-clean-body" style="padding:0">
+      <div class="table-wrap"><table class="data-table">
+        <thead><tr><th>Timestamp</th><th>Operation</th><th>Entity</th><th>Entity ID</th><th>User</th><th>Action</th><th>Details</th></tr></thead>
+        <tbody id="audit-tbody"><tr><td colspan="7" class="text-center py-8 text-base-content/40 text-sm">Loading...</td></tr></tbody>
+      </table></div>
+    </div></div>`;
+  const script = `${TOAST_SCRIPT}
+async function loadAuditLogs(params){const tbody=document.getElementById('audit-tbody');try{const q=params?'?'+new URLSearchParams(params):'';const r=await fetch('/api/audit/logs'+q);const d=await r.json();const rows=d.data||[];tbody.innerHTML=rows.length?rows.map(function(l){const ts=l.timestamp;const date=ts?new Date(ts).toLocaleString():'-';const details=l.details?JSON.stringify(l.details).substring(0,60)+'...':'-';return'<tr><td class="text-xs text-base-content/50">'+date+'</td><td><span class="badge badge-flat-primary text-xs">'+(l.operation||'-')+'</span></td><td class="text-sm">'+(l.entity_type||'-')+'</td><td class="text-xs text-base-content/50">'+(l.entity_id||'-')+'</td><td class="text-sm">'+(l.user_id||'-')+'</td><td class="text-sm">'+(l.action||'-')+'</td><td class="text-xs text-base-content/40">'+details+'</td></tr>'}).join(''):'<tr><td colspan="7" class="text-center py-8 text-base-content/40 text-sm">No audit logs found</td></tr>'}catch(e){tbody.innerHTML='<tr><td colspan="7" class="text-center py-4 text-error text-sm">Failed to load: '+e.message+'</td></tr>'}}
+function applyAuditFilters(){const level=document.getElementById('filter-level').value;const entity=document.getElementById('filter-entity').value;const start=document.getElementById('filter-start').value;const end=document.getElementById('filter-end').value;const p={};if(level)p.level=level;if(entity)p.entityType=entity;if(start)p.from=new Date(start).toISOString();if(end)p.to=new Date(end+'T23:59:59').toISOString();loadAuditLogs(p)}
+loadAuditLogs();`;
+  return settingsPage(user, 'Audit Logs - Settings', bc('Audit Logs'), content, [script]);
+}
+
+const INTEGRATIONS = [
+  { id: 'google_drive', icon: '&#128194;', name: 'Google Drive', desc: 'Document storage and collaboration' },
+  { id: 'gmail', icon: '&#9993;', name: 'Gmail', desc: 'Email integration for notifications' },
+  { id: 'firebase', icon: '&#128293;', name: 'Firebase (Legacy)', desc: 'Legacy data source for migration' },
+];
+
+export function renderSettingsIntegrations(user, integrations = {}) {
+  const { private_key = '', mwr_api_key = '' } = integrations;
+  const cards = INTEGRATIONS.map(integ => {
+    const state = integrations[integ.id] || {};
+    const connected = state.connected || false;
+    return `<div class="card-clean" style="margin-bottom:1rem"><div class="card-clean-body">
+      <div class="flex items-center gap-4">
+        <div class="text-2xl">${integ.icon}</div>
+        <div class="flex-1"><div class="font-semibold">${integ.name}</div><div class="text-xs text-base-content/50">${integ.desc}</div></div>
+        <div class="flex flex-col items-end gap-2">
+          <span class="badge ${connected ? 'badge-success badge-flat-success' : 'badge-flat-secondary'} text-xs">${connected ? 'Connected' : 'Disconnected'}</span>
+          <button data-action="toggleConfig" data-args='["${integ.id}"]' class="btn btn-ghost btn-xs">Configure</button>
+        </div>
+      </div>
+      <div id="config-${integ.id}" class="hidden mt-4 pt-4 border-t border-base-200">
+        <div class="flex gap-3 items-end flex-wrap">
+          <div class="form-group flex-1 min-w-48"><label class="label"><span class="label-text font-semibold">API Key / Credentials</span></label><input type="password" id="key-${integ.id}" class="input input-solid max-w-full" placeholder="Enter credentials"/></div>
+          <div class="flex gap-2"><button data-action="saveIntegration" data-args='["${integ.id}"]' class="btn btn-primary btn-sm">Save</button><button data-action="testIntegration" data-args='["${integ.id}"]' class="btn btn-ghost btn-sm">Test</button></div>
+        </div>
+      </div>
+    </div></div>`;
+  }).join('');
+  const apiKeysCard = `<div class="card-clean" style="margin-bottom:1rem"><div class="card-clean-body">
+    <h2 class="card-title text-base mb-4">Cross-App API Keys</h2>
+    <div class="mb-5">
+      <label class="label"><span class="label-text font-semibold">My Review Private Key</span></label>
+      <div class="flex gap-2 items-center">
+        <input type="text" id="mwr-private-key" class="input input-solid flex-1" readonly value="${esc(private_key)}" placeholder="No key generated"/>
+        <button class="btn btn-ghost btn-sm" onclick="copyPrivateKey()">Copy</button>
+        <button class="btn btn-primary btn-sm" onclick="generatePrivateKey()">Generate New Key</button>
+      </div>
+      <div class="text-xs text-base-content/50 mt-1">This key links Friday and My Review. Keep it confidential — anyone with access can import data.</div>
+    </div>
+    <div class="mb-4">
+      <label class="label"><span class="label-text font-semibold">My Review API Key (from MWR app)</span></label>
+      <input type="text" id="mwr-api-key" class="input input-solid w-full" value="${esc(mwr_api_key)}" placeholder="Paste the key from My Review Integrations settings"/>
+      <div class="text-xs text-base-content/50 mt-1">Enter the private key generated in the My Review settings to enable cross-app access.</div>
+    </div>
+    <button class="btn btn-primary btn-sm" onclick="saveApiKeys()">Save API Keys</button>
+  </div></div>`;
+  const content = `${settingsBack()}<h1 class="text-2xl font-bold mb-6">Integrations</h1>${apiKeysCard}${cards}`;
+  const script = `${TOAST_SCRIPT}
+function toggleConfig(id){const el=document.getElementById('config-'+id);el.classList.toggle('hidden')}
+function saveIntegration(id){const key=document.getElementById('key-'+id).value;if(!key){showToast('Enter credentials','error');return}showToast('Integration saved','success');toggleConfig(id)}
+function testIntegration(id){showToast('Testing connection...','info');setTimeout(()=>showToast('Test complete','success'),1000)}
+function generatePrivateKey(){const arr=new Uint8Array(32);crypto.getRandomValues(arr);const key=Array.from(arr,b=>b.toString(16).padStart(2,'0')).join('');document.getElementById('mwr-private-key').value=key}
+function copyPrivateKey(){const v=document.getElementById('mwr-private-key').value;if(!v){showToast('No key to copy','error');return}navigator.clipboard.writeText(v).then(()=>showToast('Copied to clipboard','success')).catch(()=>showToast('Copy failed','error'))}
+async function saveApiKeys(){const private_key=document.getElementById('mwr-private-key').value;const mwr_api_key=document.getElementById('mwr-api-key').value;try{const r=await fetch('/api/admin/settings/integrations',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({private_key,mwr_api_key})});if(r.ok){showToast('API keys saved','success')}else{showToast('Save failed','error')}}catch(e){showToast('Error: '+e.message,'error')}}`;
+  return settingsPage(user, 'Integrations - Settings', bc('Integrations'), content, [script]);
+}
+
+export function renderSettingsNotifications(user, config = {}) {
+  const t = config.thresholds || {};
+  const rfi = t.rfi || {};
+  const notif = t.notification || {};
+  const togRow = tg => `<div class="flex justify-between items-center py-3 border-b border-base-200"><div><div class="text-sm font-semibold">${tg.label}</div><div class="text-xs text-base-content/50">${tg.desc}</div></div><input type="checkbox" name="${tg.id}" ${tg.checked ? 'checked' : ''} class="checkbox checkbox-primary"/></div>`;
+  const toggles = [
+    { id: 'rfi_reminders', label: 'RFI Reminders', desc: 'Send reminders for outstanding RFIs', checked: true },
+    { id: 'deadline_alerts', label: 'Deadline Alerts', desc: 'Alert when deadlines are approaching', checked: true },
+    { id: 'stage_transitions', label: 'Stage Transitions', desc: 'Notify on engagement stage changes', checked: true },
+    { id: 'new_messages', label: 'New Messages', desc: 'Notify when new messages are received', checked: true },
+    { id: 'weekly_reports', label: 'Weekly Reports', desc: 'Send weekly summary reports', checked: true },
+  ];
+  const triggerDialog = `<div id="notif-trigger-dialog" class="modal" style="display:none" data-dialog-close-overlay="true">
+    <div class="modal-overlay" data-dialog-close="notif-trigger-dialog"></div>
+    <div class="modal-content rounded-box max-w-md p-6">
+      <h3 class="text-lg font-semibold mb-4">Add Notification Trigger</h3>
+      <div class="form-group mb-3"><label class="form-label">Trigger Type</label><select id="ntd-type" class="form-input"><option value="before">Before</option><option value="after">After</option></select></div>
+      <div class="form-group mb-3"><label class="form-label">Days</label><input id="ntd-days" type="number" min="0" max="365" value="7" class="form-input"/></div>
+      <div class="form-group mb-3"><label class="form-label">Reference Date</label><select id="ntd-ref" class="form-input"><option value="commencement_date">Commencement Date</option><option value="deadline_date">Deadline Date</option></select></div>
+      <div class="form-group mb-3"><label class="form-label">Recipient</label><select id="ntd-recipient" class="form-input"><option value="client_admin">Client Admin</option><option value="client_user">Client User</option><option value="team_manager">Team Manager</option><option value="team_clerk">Team Clerk</option><option value="partner">Partner</option></select></div>
+      <div class="form-group mb-4"><label class="flex items-center gap-2"><input id="ntd-active" type="checkbox" class="checkbox" checked/><span class="text-sm">Active</span></label></div>
+      <div class="modal-action"><button data-action="saveNotifTrigger" class="btn btn-primary btn-sm">Save Trigger</button><button data-dialog-close="notif-trigger-dialog" class="btn btn-ghost btn-sm">Cancel</button></div>
+    </div>
+  </div>`;
+  const content = `${settingsBack()}<h1 class="text-2xl font-bold mb-6">Notifications</h1>
+    <form id="notif-form"><div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+      <div class="card-clean"><div class="card-clean-body"><h2 class="card-title text-base mb-2">Notification Toggles</h2>${toggles.map(togRow).join('')}</div></div>
+      <div class="card-clean"><div class="card-clean-body"><h2 class="card-title text-base mb-4">Configuration</h2>
+        <div class="form-group mb-3"><label class="label"><span class="label-text font-semibold">RFI Notification Days</span></label><input type="text" name="notification_days" class="input input-solid max-w-full" value="${(rfi.notification_days || [7,3,1,0]).join(', ')}"/></div>
+        <div class="form-group mb-3"><label class="label"><span class="label-text font-semibold">Escalation Delay (hours)</span></label><input type="number" name="escalation_delay_hours" class="input input-solid max-w-full" value="${rfi.escalation_delay_hours || 24}"/></div>
+        <div class="form-group"><label class="label"><span class="label-text font-semibold">Batch Size</span></label><input type="number" name="batch_size" class="input input-solid max-w-full" value="${notif.batch_size || 50}"/></div>
+      </div></div>
+    </div><button type="submit" class="btn btn-primary">Save Settings</button></form>
+    <div class="flex justify-between items-center mt-8 mb-4">
+      <h2 class="text-lg font-semibold">Engagement Notification Triggers</h2>
+      <button data-action="openNotifTriggerDialog" class="btn btn-primary btn-sm">+ Add Trigger</button>
+    </div>
+    <div class="card-clean"><div class="card-clean-body" style="padding:0">
+      <div class="table-wrap"><table class="data-table" id="triggers-table">
+        <thead><tr><th>Type</th><th>Days</th><th>Reference</th><th>Recipient</th><th>Status</th><th></th></tr></thead>
+        <tbody id="triggers-tbody"><tr><td colspan="6" class="text-center py-8 text-base-content/40 text-sm">Loading...</td></tr></tbody>
+      </table></div>
+    </div></div>
+    ${triggerDialog}`;
+  const script = `${TOAST_SCRIPT}
+document.getElementById('notif-form').addEventListener('submit',async(e)=>{e.preventDefault();const fd=new FormData(e.target);const data={};for(const[k,v]of fd.entries())data[k]=v;document.querySelectorAll('#notif-form input[type=checkbox]').forEach(cb=>{data[cb.name]=cb.checked});try{const res=await fetch('/api/admin/settings/notifications',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});if(res.ok){showToast('Settings saved','success')}else{showToast('Save failed','error')}}catch(err){showToast('Error: '+err.message,'error')}});
+async function loadTriggers(){const tbody=document.getElementById('triggers-tbody');try{const r=await fetch('/api/friday/engagement/notifications');const d=await r.json();const rows=d.data||[];tbody.innerHTML=rows.length?rows.map(function(t){return'<tr><td class="text-sm">'+t.trigger_type+'</td><td class="text-sm">'+t.trigger_days+' days</td><td class="text-sm">'+t.trigger_reference+'</td><td class="text-sm">'+t.recipient_type+'</td><td>'+(t.active?'<span class="badge badge-flat-success text-xs">Active</span>':'<span class="badge badge-flat-secondary text-xs">Inactive</span>')+'</td><td><button class="btn btn-ghost btn-xs" data-action="deleteNotifTrigger" data-args=\\'["\\'+t.id+\\'"]\\'>Delete</button></td></tr>'}).join(''):'<tr><td colspan="6" class="text-center py-8 text-base-content/40 text-sm">No triggers configured</td></tr>'}catch(e){tbody.innerHTML='<tr><td colspan="6" class="text-center py-4 text-error text-sm">Failed to load</td></tr>'}}
+function openNotifTriggerDialog(){document.getElementById('notif-trigger-dialog').style.display='flex'}
+async function saveNotifTrigger(){const type=document.getElementById('ntd-type').value;const days=Number(document.getElementById('ntd-days').value);const ref=document.getElementById('ntd-ref').value;const recipient=document.getElementById('ntd-recipient').value;const active=document.getElementById('ntd-active').checked;if(!days&&days!==0){showToast('Enter number of days','error');return}try{const r=await fetch('/api/friday/engagement/notifications',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({trigger_type:type,trigger_days:days,trigger_reference:ref,recipient_type:recipient,active})});if(r.ok){showToast('Trigger added','success');document.getElementById('notif-trigger-dialog').style.display='none';loadTriggers()}else{const d=await r.json();showToast(d.message||'Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}}
+async function deleteNotifTrigger(id){if(!confirm('Delete this trigger?'))return;try{const r=await fetch('/api/friday/engagement/notifications',{method:'DELETE',headers:{'Content-Type':'application/json'},body:JSON.stringify({id})});if(r.ok){showToast('Deleted','success');loadTriggers()}else showToast('Delete failed','error')}catch(e){showToast('Error','error')}}
+loadTriggers();`;
+  return settingsPage(user, 'Notifications - Settings', bc('Notifications'), content, [script]);
+}
+
+function renderTypeList(user, items, entityKey, title) {
+  const rows = items.map(t => `<tr class="hover">
+    <td class="font-medium text-sm">${t.name || '-'}</td>
+    <td class="text-xs text-base-content/50">${t.created_at ? new Date(t.created_at).toLocaleDateString() : '-'}</td>
+    <td><div class="flex gap-2">
+      <button class="btn btn-ghost btn-xs type-edit-btn" data-id="${t.id}" data-name="${(t.name||'').replace(/"/g,'&quot;')}">Edit</button>
+      <button class="btn btn-error btn-xs type-del-btn" data-id="${t.id}">Delete</button>
+    </div></td>
+  </tr>`).join('');
+  const script = `${TOAST_SCRIPT}
+var _eid='';
+function openAdd(){_eid='';document.getElementById('type-name').value='';document.getElementById('type-form').style.display='block'}
+function openEdit(id,name){_eid=id;document.getElementById('type-name').value=name;document.getElementById('type-form').style.display='block'}
+function cancelForm(){document.getElementById('type-form').style.display='none'}
+async function saveType(){const name=document.getElementById('type-name').value.trim();if(!name){showToast('Name required','error');return}const url=_eid?'/api/${entityKey}/'+_eid:'/api/${entityKey}';const method=_eid?'PUT':'POST';try{const r=await fetch(url,{method,headers:{'Content-Type':'application/json'},body:JSON.stringify({name})});if(r.ok){showToast(_eid?'Updated':'Created','success');setTimeout(()=>location.reload(),400)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
+async function delType(id){if(!confirm('Delete?'))return;try{const r=await fetch('/api/${entityKey}/'+id,{method:'DELETE'});if(r.ok){showToast('Deleted','success');setTimeout(()=>location.reload(),400)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
+document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.type-edit-btn').forEach(b=>b.addEventListener('click',function(){openEdit(this.dataset.id,this.dataset.name)}));document.querySelectorAll('.type-del-btn').forEach(b=>b.addEventListener('click',function(){delType(this.dataset.id)}));document.querySelectorAll('.type-add-btn').forEach(b=>b.addEventListener('click',openAdd))});`;
+  const formHtml = `<div id="type-form" class="card-clean mb-4" style="display:none"><div class="card-clean-body"><div class="flex gap-2 items-end"><div class="form-group"><label class="label"><span class="label-text font-medium">Name</span></label><input id="type-name" type="text" class="input input-solid" style="max-width:240px" placeholder="Name"/></div><button data-action="saveType" class="btn btn-primary btn-sm" onclick="saveType()">Save</button><button class="btn btn-ghost btn-sm" onclick="cancelForm()">Cancel</button></div></div></div>`;
+  const content = `${settingsBack()}<div class="flex justify-between items-center mb-4"><h1 class="text-2xl font-bold">${title}</h1><button class="btn btn-primary btn-sm type-add-btn">Add</button></div>${formHtml}<div class="card-clean"><div class="card-clean-body" style="padding:0">${inlineTable(['Name','Created','Actions'],rows,'No items found.')}</div></div>`;
+  return settingsPage(user, `${title} - Settings`, bc(title), content, [script]);
+}
+
+export function renderSettingsEntityTypes(user, items = []) {
+  return renderTypeList(user, items, 'entity_type', 'Entity Types');
+}
+
+export function renderSettingsEngagementTypes(user, items = []) {
+  return renderTypeList(user, items, 'engagement_type', 'Engagement Types');
+}

package/src/ui/settings-renderer-advanced2.js

@@ -0,0 +1,158 @@
+import { TOAST_SCRIPT, settingsPage, settingsBack, inlineTable } from '@/ui/settings-renderer.js';
+import { esc } from '@/ui/render-helpers.js';
+
+const bc = (label) => [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { label }];
+const togRow = tg => `<div class="flex justify-between items-center py-3 border-b border-base-200"><div><div class="text-sm font-semibold">${tg.label}</div><div class="text-xs text-base-content/50">${tg.desc}</div></div><input type="checkbox" name="${tg.id}" ${tg.checked ? 'checked' : ''} class="checkbox checkbox-primary"/></div>`;
+
+export function renderSettingsReviewSettings(user, config = {}) {
+  const review = config.review || {};
+  const toggles = [
+    { id: 'auto_save', label: 'Auto-save', desc: 'Automatically save review changes', checked: review.auto_save !== false },
+    { id: 'highlight_notifications', label: 'Highlight Notifications', desc: 'Notify on new highlights', checked: review.highlight_notifications !== false },
+    { id: 'require_resolution', label: 'Require Resolution', desc: 'All highlights resolved before closing', checked: !!review.require_resolution },
+    { id: 'allow_private', label: 'Allow Private Reviews', desc: 'Enable private review visibility', checked: review.allow_private !== false },
+    { id: 'enable_sections', label: 'Enable Sections', desc: 'Allow reviews organized into sections', checked: review.enable_sections !== false },
+    { id: 'enable_wip_value', label: 'Enable WIP Value', desc: 'Track work-in-progress value', checked: !!review.enable_wip_value },
+  ];
+  const content = `${settingsBack()}<h1 class="text-2xl font-bold mb-6">Review Settings</h1>
+    <form id="review-settings-form"><div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+      <div class="card-clean"><div class="card-clean-body"><h2 class="card-title text-base mb-2">Review Options</h2>${toggles.map(togRow).join('')}</div></div>
+      <div class="card-clean"><div class="card-clean-body"><h2 class="card-title text-base mb-4">Defaults</h2>
+        <div class="form-group mb-3"><label class="label"><span class="label-text font-semibold">Default Status</span></label><select name="default_status" class="select select-solid max-w-full"><option value="active" ${review.default_status==='active'?'selected':''}>Active</option><option value="draft" ${review.default_status==='draft'?'selected':''}>Draft</option></select></div>
+        <div class="form-group mb-3"><label class="label"><span class="label-text font-semibold">Max Highlights Per Review</span></label><input type="number" name="max_highlights" class="input input-solid max-w-full" value="${review.max_highlights || 500}" min="1"/></div>
+        <div class="form-group"><label class="label"><span class="label-text font-semibold">Default Currency</span></label><select name="default_currency" class="select select-solid max-w-full"><option value="ZAR" ${!review.default_currency||review.default_currency==='ZAR'?'selected':''}>ZAR</option><option value="USD" ${review.default_currency==='USD'?'selected':''}>USD</option><option value="EUR" ${review.default_currency==='EUR'?'selected':''}>EUR</option><option value="GBP" ${review.default_currency==='GBP'?'selected':''}>GBP</option></select></div>
+      </div></div>
+    </div><button type="submit" class="btn btn-primary">Save Review Settings</button></form>`;
+  const script = `${TOAST_SCRIPT}document.getElementById('review-settings-form').addEventListener('submit',async(e)=>{e.preventDefault();const fd=new FormData(e.target);const data={};for(const[k,v]of fd.entries())data[k]=v;document.querySelectorAll('#review-settings-form input[type=checkbox]').forEach(cb=>{data[cb.name]=cb.checked});document.querySelectorAll('#review-settings-form input[type=number]').forEach(n=>{if(data[n.name])data[n.name]=Number(data[n.name])});try{const res=await fetch('/api/admin/settings/review',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});if(res.ok){showToast('Settings saved','success')}else{showToast('Save failed','error')}}catch(e){showToast('Error: '+e.message,'error')}})`;
+  return settingsPage(user, 'Review Settings', bc('Review Settings'), content, [script]);
+}
+
+export function renderSettingsFileReview(user, config = {}, frSettings = {}) {
+  const fr = config.fileReview || {};
+  const reviewFlags = frSettings.review_flags || [];
+  const tenderFlags = frSettings.tender_flags || [];
+  const flagManagers = frSettings.flags_managers || [];
+  const tempAccess = frSettings.temp_review_access_period || 0;
+  const toggles = [
+    { id: 'auto_pdf_cache', label: 'Auto-cache PDFs', desc: 'Cache PDF files for faster loading', checked: fr.auto_pdf_cache !== false },
+    { id: 'allow_annotations', label: 'Allow Annotations', desc: 'Enable PDF annotation tools', checked: fr.allow_annotations !== false },
+    { id: 'mobile_resize', label: 'Mobile Resize', desc: 'Enable mobile-friendly resizable highlights', checked: fr.mobile_resize !== false },
+    { id: 'coordinate_snap', label: 'Coordinate Snap', desc: 'Snap highlight coordinates to text boundaries', checked: !!fr.coordinate_snap },
+  ];
+  const flagChips = (flags, type) => flags.map(f => `<span class="pill pill-neutral" style="display:inline-flex;align-items:center;gap:4px">${esc(f)}<button type="button" onclick="removeFlag('${type}','${esc(f.replace(/'/g,"\\'"))}')" style="background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit">&times;</button></span>`).join('');
+  const content = `${settingsBack()}<h1 class="text-2xl font-bold mb-6">File Review Settings</h1>
+  <div id="fr-review-flags" data-flags='${JSON.stringify(reviewFlags)}'></div>
+  <div id="fr-tender-flags" data-flags='${JSON.stringify(tenderFlags)}'></div>
+  <form id="file-review-settings-form">
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+    <div class="card-clean"><div class="card-clean-body"><h2 class="card-title text-base mb-2">File Review Options</h2>${toggles.map(togRow).join('')}</div></div>
+    <div class="card-clean"><div class="card-clean-body"><h2 class="card-title text-base mb-4">Access &amp; Limits</h2>
+      <div class="form-group mb-3"><label class="label"><span class="label-text font-semibold">Temp Access Period (days)</span></label><input type="number" name="temp_review_access_period" class="input input-solid max-w-full" value="${tempAccess}" min="0"/></div>
+      <div class="form-group mb-3"><label class="label"><span class="label-text font-semibold">Max File Size (MB)</span></label><input type="number" name="max_file_size_mb" class="input input-solid max-w-full" value="${fr.max_file_size_mb || 50}" min="1"/></div>
+      <div class="form-group"><label class="label"><span class="label-text font-semibold">Allowed File Types</span></label><input type="text" name="allowed_types" class="input input-solid max-w-full" value="${fr.allowed_types || 'pdf,doc,docx,xls,xlsx,png,jpg'}"/></div>
+    </div></div>
+  </div>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+    <div class="card-clean"><div class="card-clean-body"><h2 class="card-title text-base mb-3">Review Flags</h2>
+      <div id="review-flags-list" class="flex flex-wrap gap-2 mb-3">${flagChips(reviewFlags, 'review')}</div>
+      <div class="flex gap-2"><input type="text" id="new-review-flag" class="input input-solid" placeholder="New flag label..." style="flex:1"/><button type="button" onclick="addFlag('review')" class="btn btn-primary btn-sm">Add</button></div>
+    </div></div>
+    <div class="card-clean"><div class="card-clean-body"><h2 class="card-title text-base mb-3">Tender Flags</h2>
+      <div id="tender-flags-list" class="flex flex-wrap gap-2 mb-3">${flagChips(tenderFlags, 'tender')}</div>
+      <div class="flex gap-2"><input type="text" id="new-tender-flag" class="input input-solid" placeholder="New flag label..." style="flex:1"/><button type="button" onclick="addFlag('tender')" class="btn btn-primary btn-sm">Add</button></div>
+    </div></div>
+  </div>
+  <button type="submit" class="btn btn-primary">Save File Review Settings</button></form>`;
+  const script = `${TOAST_SCRIPT}
+var _rvFlags=${JSON.stringify(reviewFlags)};
+var _tdFlags=${JSON.stringify(tenderFlags)};
+function renderFlags(type){const list=type==='review'?_rvFlags:_tdFlags;const el=document.getElementById(type+'-flags-list');if(!el)return;el.innerHTML=list.map(f=>'<span class="pill pill-neutral" style="display:inline-flex;align-items:center;gap:4px">'+f+'<button type="button" onclick="removeFlag(\\''+type+'\\',\\''+f.replace(/'/g,"\\'")+'\\')" style="background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit">&times;</button></span>').join('')}
+window.addFlag=function(type){const inp=document.getElementById('new-'+type+'-flag');const val=(inp?.value||'').trim();if(!val)return;if(type==='review'){_rvFlags=[..._rvFlags,val]}else{_tdFlags=[..._tdFlags,val]};inp.value='';renderFlags(type)};
+window.removeFlag=function(type,flag){if(type==='review'){_rvFlags=_rvFlags.filter(f=>f!==flag)}else{_tdFlags=_tdFlags.filter(f=>f!==flag)};renderFlags(type)};
+document.getElementById('file-review-settings-form').addEventListener('submit',async(e)=>{e.preventDefault();const fd=new FormData(e.target);const data={};for(const[k,v]of fd.entries())data[k]=v;document.querySelectorAll('#file-review-settings-form input[type=checkbox]').forEach(cb=>{data[cb.name]=cb.checked});document.querySelectorAll('#file-review-settings-form input[type=number]').forEach(n=>{if(data[n.name])data[n.name]=Number(data[n.name])});data.review_flags=_rvFlags;data.tender_flags=_tdFlags;try{const res=await fetch('/api/admin/settings/file-review',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});if(res.ok){showToast('Settings saved','success')}else{showToast('Save failed','error')}}catch(err){showToast('Error: '+err.message,'error')}})`;
+  return settingsPage(user, 'File Review Settings', bc('File Review Settings'), content, [script]);
+}
+
+export function renderSettingsMwrPermissions(user, permissions = []) {
+  const rows = permissions.map(p => `<tr>
+    <td class="text-sm">${esc(p.entity_type||'-')}</td>
+    <td class="text-sm">${esc(p.entity_id||'-')}</td>
+    <td class="text-sm">${esc(p.user_id||'-')}</td>
+    <td class="text-sm">${esc(p.permission_type||'-')}</td>
+    <td class="text-sm">${p.granted_at ? new Date(p.granted_at * 1000).toLocaleDateString() : '-'}</td>
+    <td><button class="btn btn-error btn-xs btn-outline" onclick="revokePermission('${esc(p.id)}')">Revoke</button></td>
+  </tr>`).join('');
+  const content = `${settingsBack()}<div class="flex justify-between items-center mb-6">
+    <h1 class="text-2xl font-bold">MWR Permissions</h1>
+    <button class="btn btn-primary btn-sm" onclick="document.getElementById('grant-perm-dialog').style.display='flex'">+ Grant Permission</button>
+  </div>
+  ${inlineTable(['Entity Type','Entity ID','User ID','Permission','Granted','Actions'], rows, 'No permissions configured')}
+  <div id="grant-perm-dialog" class="dialog-overlay" style="display:none" role="dialog" aria-modal="true">
+    <div class="dialog-panel" style="max-width:460px">
+      <div class="dialog-header"><span class="dialog-title">Grant Permission</span><button class="dialog-close" onclick="document.getElementById('grant-perm-dialog').style.display='none'">&times;</button></div>
+      <div class="dialog-body">
+        <div class="modal-form-group"><label>Entity Type</label><input id="gp-entity-type" class="form-input" placeholder="review"/></div>
+        <div class="modal-form-group"><label>Entity ID</label><input id="gp-entity-id" class="form-input" placeholder="entity id"/></div>
+        <div class="modal-form-group"><label>User ID</label><input id="gp-user-id" class="form-input" placeholder="user id"/></div>
+        <div class="modal-form-group"><label>Permission Type</label><select id="gp-perm-type" class="form-input"><option value="view">view</option><option value="edit">edit</option><option value="admin">admin</option></select></div>
+        <div id="gp-result" style="display:none;margin-top:8px"></div>
+      </div>
+      <div class="dialog-footer">
+        <button class="btn btn-ghost btn-sm" onclick="document.getElementById('grant-perm-dialog').style.display='none'">Cancel</button>
+        <button class="btn btn-primary btn-sm" onclick="grantPermission()">Grant</button>
+      </div>
+    </div>
+  </div>`;
+  const script = `${TOAST_SCRIPT}async function grantPermission(){var body={entity_type:document.getElementById('gp-entity-type').value.trim(),entity_id:document.getElementById('gp-entity-id').value.trim(),user_id:document.getElementById('gp-user-id').value.trim(),permission_type:document.getElementById('gp-perm-type').value};var res=document.getElementById('gp-result');if(!body.entity_type||!body.entity_id||!body.user_id){res.style.display='block';res.innerHTML='<div style="color:var(--color-danger);font-size:13px">All fields required.</div>';return}try{var r=await fetch('/api/mwr/permissions',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});var d=await r.json();if(r.ok&&d.success){showToast('Permission granted','success');document.getElementById('grant-perm-dialog').style.display='none';setTimeout(function(){location.reload()},500)}else{res.style.display='block';res.innerHTML='<div style="color:var(--color-danger);font-size:13px">'+(d.error||'Failed')+'</div>'}}catch(e){showToast('Error: '+e.message,'error')}}async function revokePermission(id){if(!confirm('Revoke this permission?'))return;try{var r=await fetch('/api/permission/'+id,{method:'DELETE'});if(r.ok){showToast('Revoked','success');setTimeout(function(){location.reload()},500)}else{showToast('Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}}`;
+  return settingsPage(user, 'MWR Permissions', bc('MWR Permissions'), content, [script]);
+}
+
+export function renderSettingsTemplateManage(user, template = {}, sections = []) {
+  const sectionRows = sections.map((s, i) => `<tr data-id="${esc(s.id)}">
+    <td><span class="inline-block w-5 h-5 rounded" style="background:${s.color || '#B0B0B0'}"></span></td>
+    <td class="text-sm font-medium">${esc(s.name || '-')}</td>
+    <td class="text-sm text-base-content/50">${s.order ?? i}</td>
+    <td><div class="flex gap-1">
+      <button data-action="editTplSection" data-args='["${esc(s.id)}","${esc((s.name||'').replace(/"/g,'&quot;'))}","${esc(s.color||'#B0B0B0')}"]' class="btn btn-ghost btn-xs">Edit</button>
+      <button data-action="deleteTplSection" data-args='["${esc(s.id)}"]' class="btn btn-error btn-xs btn-outline">Delete</button>
+    </div></td>
+  </tr>`).join('');
+  const tplBc = [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { href: '/admin/settings/templates', label: 'Templates' }, { label: template.name || 'Template' }];
+  const content = `${settingsBack()}<div class="mb-6">
+    <h1 class="text-2xl font-bold">${esc(template.name || 'Template')}</h1>
+    <p class="text-sm text-base-content/50 mt-1">Manage template sections and configuration</p>
+  </div>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+    <div class="card-clean"><div class="card-clean-body">
+      <h2 class="card-title text-base mb-4">Template Info</h2>
+      <div class="form-group mb-3"><label class="label"><span class="label-text font-semibold">Name</span></label><input type="text" id="tpl-name" class="input input-solid max-w-full" value="${esc(template.name || '')}"/></div>
+      <div class="form-group mb-3"><label class="label"><span class="label-text font-semibold">Type</span></label><select id="tpl-type" class="select select-solid max-w-full"><option value="standard" ${template.type==='standard'?'selected':''}>Standard</option><option value="checklist" ${template.type==='checklist'?'selected':''}>Checklist</option><option value="audit" ${template.type==='audit'?'selected':''}>Audit</option></select></div>
+      <div class="form-group mb-4"><label class="label cursor-pointer justify-start gap-3"><input type="checkbox" id="tpl-active" class="checkbox checkbox-primary" ${template.is_active?'checked':''}/><span class="label-text">Active</span></label></div>
+      <button data-action="saveTplInfo" class="btn btn-primary btn-sm">Save Template Info</button>
+    </div></div>
+    <div class="card-clean"><div class="card-clean-body">
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="card-title text-base">Sections</h2>
+        <button data-action="addTplSection" class="btn btn-primary btn-sm">+ Add Section</button>
+      </div>
+      ${inlineTable(['Color', 'Name', 'Order', 'Actions'], sectionRows, 'No sections defined')}
+    </div></div>
+  </div>
+  <div id="tpl-section-form" class="hidden card-clean" style="margin-top:1rem"><div class="card-clean-body">
+    <div class="flex flex-wrap gap-4 items-end">
+      <div class="form-group flex-1 min-w-40"><label class="label"><span class="label-text font-semibold">Name</span></label><input type="text" id="tpl-sec-name" class="input input-solid max-w-full" placeholder="Section name"/></div>
+      <div class="form-group"><label class="label"><span class="label-text font-semibold">Color</span></label><input type="color" id="tpl-sec-color" value="#B0B0B0" class="input input-solid" style="height:42px;width:60px;padding:4px"/></div>
+      <div class="flex gap-2"><button data-action="saveTplSection" class="btn btn-primary btn-sm">Save</button><button data-action="cancelTplSection" class="btn btn-ghost btn-sm">Cancel</button></div>
+    </div>
+    <input type="hidden" id="tpl-sec-id" value=""/>
+  </div></div>`;
+  const script = `${TOAST_SCRIPT}
+  var tplId='${esc(template.id || '')}';
+  window.saveTplInfo=async function(){var body={name:document.getElementById('tpl-name').value,type:document.getElementById('tpl-type').value,is_active:document.getElementById('tpl-active').checked?1:0};try{var res=await fetch('/api/review_template/'+tplId,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});if(res.ok){showToast('Template updated','success')}else{showToast('Update failed','error')}}catch(e){showToast('Error','error')}};
+  window.addTplSection=function(){document.getElementById('tpl-section-form').classList.remove('hidden');document.getElementById('tpl-sec-id').value='';document.getElementById('tpl-sec-name').value=''};
+  window.editTplSection=function(id,name,color){document.getElementById('tpl-section-form').classList.remove('hidden');document.getElementById('tpl-sec-id').value=id;document.getElementById('tpl-sec-name').value=name;document.getElementById('tpl-sec-color').value=color};
+  window.cancelTplSection=function(){document.getElementById('tpl-section-form').classList.add('hidden')};
+  window.saveTplSection=async function(){var id=document.getElementById('tpl-sec-id').value;var body={name:document.getElementById('tpl-sec-name').value,color:document.getElementById('tpl-sec-color').value,review_template_id:tplId};if(!body.name){showToast('Name required','error');return}var url=id?'/api/review_template_section/'+id:'/api/review_template_section';var method=id?'PUT':'POST';try{var res=await fetch(url,{method:method,headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});if(res.ok){showToast(id?'Updated':'Created','success');setTimeout(function(){location.reload()},500)}else{showToast('Failed','error')}}catch(e){showToast('Error','error')}};
+  window.deleteTplSection=async function(id){if(!confirm('Delete this section?'))return;try{var res=await fetch('/api/review_template_section/'+id,{method:'DELETE'});if(res.ok){showToast('Deleted','success');setTimeout(function(){location.reload()},500)}else{showToast('Delete failed','error')}}catch(e){showToast('Error','error')}};`;
+  return settingsPage(user, `Manage Template - ${esc(template.name || 'Template')}`, tplBc, content, [script]);
+}

package/src/ui/settings-renderer-teams.js

@@ -0,0 +1,112 @@
+import { TOAST_SCRIPT, settingsPage, settingsBack, inlineTable } from '@/ui/settings-renderer.js';
+
+const RFI_PALETTE = ['#B0B0B0', '#44BBA4', '#FF4141', '#7F7EFF', '#3b82f6', '#f59e0b', '#ec4899', '#8b5cf6'];
+
+function parseMembers(t) {
+  try {
+    const u = t.users;
+    if (!u) return [];
+    const arr = Array.isArray(u) ? u : JSON.parse(u);
+    if (!Array.isArray(arr)) return [];
+    return arr.map(m => typeof m === 'object' ? (m.email || m.name || m.cloud_id || '') : String(m));
+  } catch { return []; }
+}
+
+export function renderSettingsTeams(user, teams = [], allUsers = []) {
+  const editDialog = `<div id="team-dialog" class="modal" style="display:none" data-overlay-close="true" data-action="closeTeamDialog">
+    <div class="modal-overlay" data-action="closeTeamDialog"></div>
+    <div class="modal-content rounded-box max-w-md p-6">
+      <h3 id="team-dialog-title" class="text-lg font-semibold mb-4">Edit Team</h3>
+      <input type="hidden" id="team-edit-id"/>
+      <div class="form-group mb-4">
+        <label class="label"><span class="label-text font-medium">Team Name</span></label>
+        <input id="team-name-input" type="text" class="input input-solid max-w-full" placeholder="Team name"/>
+      </div>
+      <div class="modal-action">
+        <button data-action="saveTeam" class="btn btn-primary">Save</button>
+        <button data-action="closeTeamDialog" class="btn btn-ghost">Cancel</button>
+      </div>
+    </div>
+  </div>`;
+
+  const rows = teams.map(t => {
+    const members = parseMembers(t);
+    const memberCount = members.length;
+    const memberNames = members.slice(0, 3).map(m => String(m).split('@')[0]).join(', ');
+    const moreCount = memberCount > 3 ? ` +${memberCount - 3} more` : '';
+    const membersDisplay = memberCount > 0
+      ? `<span class="text-sm text-base-content/60">${memberNames}${moreCount}</span>`
+      : '<span class="text-base-content/30 text-sm">No members</span>';
+    return `<tr class="hover">
+      <td class="font-medium text-sm">${t.name || '-'}</td>
+      <td><span class="badge badge-flat-primary text-xs mr-2">${memberCount} member${memberCount !== 1 ? 's' : ''}</span>${membersDisplay}</td>
+      <td><div class="flex gap-2">
+        <button class="btn btn-ghost btn-xs team-edit-btn" data-id="${t.id}" data-name="${(t.name||'').replace(/"/g,'&quot;')}">Edit</button>
+        <button class="btn btn-error btn-xs team-delete-btn" data-id="${t.id}">Delete</button>
+      </div></td>
+    </tr>`;
+  }).join('');
+
+  const script = `${TOAST_SCRIPT}
+function openEditTeam(id,name){document.getElementById('team-edit-id').value=id;document.getElementById('team-name-input').value=name;document.getElementById('team-dialog-title').textContent='Edit Team';document.getElementById('team-dialog').style.display='flex'}
+function openAddTeam(){document.getElementById('team-edit-id').value='';document.getElementById('team-name-input').value='';document.getElementById('team-dialog-title').textContent='Add Team';document.getElementById('team-dialog').style.display='flex'}
+function closeTeamDialog(){document.getElementById('team-dialog').style.display='none'}
+async function saveTeam(){const id=document.getElementById('team-edit-id').value;const name=document.getElementById('team-name-input').value.trim();if(!name){showToast('Name is required','error');return}const url=id?'/api/team/'+id:'/api/team';const method=id?'PUT':'POST';try{const r=await fetch(url,{method,headers:{'Content-Type':'application/json'},body:JSON.stringify({name})});if(r.ok){showToast(id?'Team updated':'Team created','success');setTimeout(()=>location.reload(),500)}else{const d=await r.json();showToast(d.error||'Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}}
+async function deleteTeam(id){if(!confirm('Delete this team?'))return;try{const r=await fetch('/api/team/'+id,{method:'DELETE'});if(r.ok){showToast('Team deleted','success');setTimeout(()=>location.reload(),500)}else showToast('Delete failed','error')}catch(e){showToast('Error','error')}}
+document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.team-edit-btn').forEach(b=>b.addEventListener('click',function(){const id=this.dataset.id;const name=this.dataset.name;openEditTeam(id,name)}));document.querySelectorAll('.team-delete-btn').forEach(b=>b.addEventListener('click',function(){const id=this.dataset.id;deleteTeam(id)}));document.querySelectorAll('.team-add-btn').forEach(b=>b.addEventListener('click',openAddTeam))});`;
+
+  const content = `${settingsBack()}${editDialog}
+    <div class="flex justify-between items-center mb-4">
+      <h1 class="text-2xl font-bold">Teams</h1>
+      <button class="btn btn-primary btn-sm gap-1 team-add-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add Team</button>
+    </div>
+    <div class="card-clean"><div class="card-clean-body" style="padding:0rem">${inlineTable(['Name', 'Members', 'Actions'], rows, 'No teams found')}</div></div>`;
+  return settingsPage(user, 'Teams - Settings', [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { label: 'Teams' }], content, [script]);
+}
+
+export function renderSettingsRfiSections(user, sections = []) {
+  const rows = sections.map((s, i) => `<tr class="hover rfi-section-row" data-id="${s.id}">
+    <td><span class="inline-block w-5 h-5 rounded" style="background:${s.color || '#B0B0B0'}"></span></td>
+    <td class="text-sm">${s.name || '-'}</td>
+    <td class="text-sm text-base-content/50">${s.order ?? i}</td>
+    <td><div class="flex gap-1">
+      <button class="btn btn-ghost btn-xs rfi-move-btn" data-id="${s.id}" data-direction="up" ${i === 0 ? 'disabled' : ''}>&#9650;</button>
+      <button class="btn btn-ghost btn-xs rfi-move-btn" data-id="${s.id}" data-direction="down" ${i === sections.length - 1 ? 'disabled' : ''}>&#9660;</button>
+      <button class="btn btn-ghost btn-xs rfi-edit-btn" data-id="${s.id}" data-name="${(s.name || '').replace(/"/g,'&quot;')}" data-color="${s.color || '#B0B0B0'}">Edit</button>
+      <button class="btn btn-error btn-xs rfi-delete-btn" data-id="${s.id}">Delete</button>
+    </div></td>
+  </tr>`).join('');
+
+  const palette = RFI_PALETTE.map(c => `<div data-color="${c}" class="rounded cursor-pointer" style="background:${c};width:24px;height:24px;border:2px solid transparent;border-radius:4px" data-action="selectColor" data-args='["${c}"]' title="${c}"></div>`).join('');
+  const formHtml = `<div id="section-form" class="card-clean" style="margin-bottom:1rem;display:none">
+    <div class="card-clean-body">
+      <div style="display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end">
+        <div class="form-group"><label class="label"><span class="label-text font-medium">Name</span></label><input type="text" id="section-name" class="input input-solid" style="max-width:200px" placeholder="Section name"/></div>
+        <div><label class="label"><span class="label-text font-medium">Color</span></label><div id="color-palette" style="display:flex;gap:8px;flex-wrap:wrap">${palette}</div><input type="hidden" id="section-color" value="#B0B0B0"/></div>
+        <div class="flex gap-2"><button data-action="saveSection" class="btn btn-primary btn-sm">Save</button><button data-action="cancelForm" class="btn btn-ghost btn-sm">Cancel</button></div>
+      </div>
+      <input type="hidden" id="edit-id" value=""/>
+    </div>
+  </div>`;
+
+  const content = `${settingsBack()}
+    <div class="flex justify-between items-center mb-4">
+      <h1 class="text-2xl font-bold">RFI Sections</h1>
+      <button class="btn btn-primary btn-sm rfi-add-btn">Add Section</button>
+    </div>
+    ${formHtml}
+    <div class="card-clean"><div class="card-clean-body" style="padding:0rem">${inlineTable(['Color', 'Name', 'Order', 'Actions'], rows, 'No RFI sections. Add one below.')}</div></div>`;
+
+  const script = `${TOAST_SCRIPT}
+function toggleAddForm(){document.getElementById('section-form').style.display='block';document.getElementById('edit-id').value='';document.getElementById('section-name').value='';selectColor('#B0B0B0')}
+function cancelForm(){document.getElementById('section-form').style.display='none'}
+function selectColor(c){document.getElementById('section-color').value=c;document.querySelectorAll('#color-palette div').forEach(el=>{el.style.borderColor=el.dataset.color===c?'#1a1a1a':'transparent'})}
+function editSection(id,name,color){document.getElementById('section-form').style.display='block';document.getElementById('edit-id').value=id;document.getElementById('section-name').value=name;selectColor(color)}
+async function saveSection(){const name=document.getElementById('section-name').value.trim();const color=document.getElementById('section-color').value;const id=document.getElementById('edit-id').value;if(!name){showToast('Name is required','error');return}const url=id?'/api/rfi_section/'+id:'/api/rfi_section';const method=id?'PUT':'POST';try{const res=await fetch(url,{method,headers:{'Content-Type':'application/json'},body:JSON.stringify({name,color})});if(res.ok){showToast(id?'Updated':'Created','success');setTimeout(()=>location.reload(),500)}else{showToast('Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}}
+async function deleteSection(id){if(!confirm('Delete this section?'))return;try{const res=await fetch('/api/rfi_section/'+id,{method:'DELETE'});if(res.ok){showToast('Deleted','success');setTimeout(()=>location.reload(),500)}else{showToast('Delete failed','error')}}catch(e){showToast('Error','error')}}
+async function moveSection(id,dir){try{const res=await fetch('/api/rfi_section/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({reorder:dir})});if(res.ok){location.reload()}else{showToast('Reorder failed','error')}}catch(e){showToast('Error','error')}}
+selectColor('#B0B0B0');
+document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.rfi-add-btn').forEach(b=>b.addEventListener('click',function(e){e.preventDefault();toggleAddForm()}));document.querySelectorAll('.rfi-edit-btn').forEach(b=>b.addEventListener('click',function(e){e.preventDefault();editSection(this.dataset.id,this.dataset.name,this.dataset.color)}));document.querySelectorAll('.rfi-delete-btn').forEach(b=>b.addEventListener('click',function(e){e.preventDefault();deleteSection(this.dataset.id)}));document.querySelectorAll('.rfi-move-btn').forEach(b=>b.addEventListener('click',function(e){e.preventDefault();moveSection(this.dataset.id,this.dataset.direction)}))});`;
+
+  return settingsPage(user, 'RFI Sections - Settings', [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { label: 'RFI Sections' }], content, [script]);
+}