/* ============================================================ BUSINESS REQUESTS MODULE List, board, table, timeline and calendar views over the same data. ============================================================ */ const CLOSED_STATUSES = ['Done', 'Rejected']; const isClosedRequest = (r) => CLOSED_STATUSES.includes(r.status); /** Compact table, also used on a component's Requests tab (where Th/bulk selection * are omitted — sorting and bulk actions only make sense on the module's own list). */ function RequestTable({requests, idx, go, onOpen, onContextMenu, Th, selected, onToggle, onToggleAll}){ const Head = Th || ((props) => { const rest = Object.assign({}, props); delete rest.label; return {props.label}; }); const bulk = !!selected; return (
{bulk && } {requests.map(r => { const assignee = resolveParty(r.assignee, idx); const overdue = isOverdue(r.targetDate) && !isClosedRequest(r); return ( onOpen && onOpen(r)} onContextMenu={(e)=>onContextMenu && onContextMenu(e, r)}> {bulk && } ); })}
0 && requests.every(r=>selected.has(r.id))} onChange={()=>onToggleAll(requests.map(r=>r.id))}/>
e.stopPropagation()}> onToggle(r.id)}/>{r.reference}
{r.title}
{(r.componentIds||[]).map(cid => (idx.comp[cid]||{}).identifier).filter(Boolean).join(', ') || 'No components linked'}
{r.requestType} {r.status} {assignee ? {assignee.name} : Unassigned} {r.targetDate ? {fmtDate(r.targetDate)} : —}
); } const NEW_REQUEST = (personId) => ({ id:'', title:'', description:'', requestType:'Service request', priority:'P3', status:'New', requesterPersonId: personId || '', assignee:null, businessArea:'', targetDate:'', startDate:'', effortEstimate:0, resolution:'', componentIds:[] }); function RequestsModule({state, idx, go, act, toast, user, route}){ const [view, setView] = useState(()=>urlParam('view','board')); const [q, setQ] = useState(()=>urlParam('q')); const [fType, setFType] = useState(()=>urlParam('type')); const [fPriority, setFPriority] = useState(()=>urlParam('priority')); const [fStatus, setFStatus] = useState(()=>urlParam('status')); const [fArea, setFArea] = useState(()=>urlParam('area')); const [fAssignee, setFAssignee] = useState(()=>urlParam('assignee')); const [mine, setMine] = useState(()=>urlParam('mine')==='1'); const [showClosed, setShowClosed] = useState(()=>urlParam('closed')==='1'); const [editing, setEditing] = useState(null); const onOpen = (r) => go({view:'request', id:r.id}); const {menu, openMenu, closeMenu} = useRecordMenu(); const onContextMenu = (e, r) => openMenu(e, recordMenuItem('request', r)); const bulk = useBulkSelect(); const [bulkStatusVal, setBulkStatusVal] = useState(''); const [bulkAssigneeVal, setBulkAssigneeVal] = useState(''); useEffect(()=>{ bulk.clear(); }, [view]); const canEdit = (id) => { const ids = state.permissions.editableRequestIds; return ids === '*' || (Array.isArray(ids) && ids.includes(id)); }; const isMine = useCallback((r) => r.raisedByUserId === user.id || (user.personId && r.requesterPersonId === user.personId) || (user.personId && r.assignee && r.assignee.kind === 'person' && r.assignee.id === user.personId) || (user.personId && r.assignee && r.assignee.kind === 'role' && (idx.role[r.assignee.id] || {}).primaryPersonId === user.personId), [user, idx]); useEffect(()=>{ if (!route) return; if (route.action === 'new') setEditing(NEW_REQUEST(user.personId)); if (route.filter === 'mine') setMine(true); }, [route]); useFilterUrlSync({ view:[view,'board'], q:[q,''], type:[fType,''], priority:[fPriority,''], status:[fStatus,''], area:[fArea,''], assignee:[fAssignee,''], mine:[mine?'1':'',''], closed:[showClosed?'1':'',''] }); const {sort, sorted, Th} = useSort('target', { reference: r => r.reference, title: r => r.title, type: r => r.requestType, priority: r => r.priority, status: r => r.status, assignee: r => partyName(r.assignee, idx) || 'zzz', target: r => r.targetDate || '9999' }); const clearFilters = () => { setQ('');setFType('');setFPriority('');setFStatus('');setFArea('');setFAssignee('');setMine(false); }; const rows = useMemo(()=>{ const term = q.trim().toLowerCase(); const list = state.requests.filter(r => { if (!showClosed && isClosedRequest(r)) return false; if (fType && r.requestType !== fType) return false; if (fPriority && r.priority !== fPriority) return false; if (fStatus && r.status !== fStatus) return false; if (fArea && r.businessArea !== fArea) return false; if (fAssignee && partyKey(r.assignee) !== fAssignee) return false; if (mine && !isMine(r)) return false; if (!term) return true; return [r.reference, r.title, r.description, r.requestType, r.businessArea, partyName(r.assignee, idx), (r.componentIds||[]).map(cid => (idx.comp[cid]||{}).name).join(' ') ].join(' ').toLowerCase().includes(term); }); return view === 'table' ? sorted(list) : list; }, [state.requests, q, fType, fPriority, fStatus, fArea, fAssignee, mine, showClosed, idx, isMine, view, sort]); const bulkApplyStatus = async () => { if (!bulkStatusVal) return; const ids = [...bulk.selected]; try { for (const id of ids) await API.put(`/api/requests/${id}/status`, {status: bulkStatusVal}); await act(Promise.resolve(), `Moved ${ids.length} request${ids.length===1?'':'s'} to ${bulkStatusVal}`); } catch (err) { toast(err.message, true); } finally { bulk.clear(); setBulkStatusVal(''); } }; const bulkApplyAssignee = async () => { if (!bulkAssigneeVal) return; const party = parsePartyKey(bulkAssigneeVal); const ids = [...bulk.selected]; try { for (const id of ids) { const r = state.requests.find(x => x.id === id); if (r) await API.put(`/api/requests/${id}`, {...r, assignee: party}); } await act(Promise.resolve(), `Assigned ${ids.length} request${ids.length===1?'':'s'}`); } catch (err) { toast(err.message, true); } finally { bulk.clear(); setBulkAssigneeVal(''); } }; const statuses = state.requestStatuses || []; const openCount = state.requests.filter(r => !isClosedRequest(r)).length; const overdueCount = state.requests.filter(r => isOverdue(r.targetDate) && !isClosedRequest(r)).length; const p1 = state.requests.filter(r => r.priority === 'P1' && !isClosedRequest(r)).length; const unassigned = state.requests.filter(r => !r.assignee && !isClosedRequest(r)).length; const assigneeOptions = [ ...state.people.map(p=>({k:'person:'+p.id, label:p.name})), ...state.roles.map(r=>({k:'role:'+r.id, label:r.name + ' (role)'})) ].sort((a,b)=>a.label.localeCompare(b.label)); const exportList = () => exportCsv('fuse-requests.csv', ['Reference','Title','Type','Priority','Status','Requester','Assignee','Business area', 'Start','Target','Effort','Components','Raised','Closed'], rows.map(r => [r.reference, r.title, r.requestType, r.priority, r.status, (idx.person[r.requesterPersonId]||{}).name || '', partyName(r.assignee, idx), r.businessArea, r.startDate, r.targetDate, r.effortEstimate, (r.componentIds||[]).map(cid => (idx.comp[cid]||{}).identifier).filter(Boolean).join(' '), r.createdAt, r.closedAt])); const hasFilters = !!(q||fType||fPriority||fStatus||fArea||fAssignee||mine); const shared = {requests: rows, state, idx, go, act, user, onOpen, onContextMenu, canEdit, hasFilters, clearFilters}; return (
{openCount}
Open
{p1}
P1 open
{overdueCount}
Past target
{unassigned}
Unassigned
{state.requests.filter(r=>isMine(r) && !isClosedRequest(r)).length}
Mine, open
}, {k:'list', label:'List', icon:}, {k:'table', label:'Table', icon:}, {k:'timeline', label:'Timeline', icon:}, {k:'calendar', label:'Calendar', icon:}, {k:'analytics', label:'Analytics', icon:} ]}/>
{view !== 'analytics' &&
{view !== 'board' && } {(q||fType||fPriority||fStatus||fArea||fAssignee||mine) && }
{rows.length} shown
}
{view === 'board' && } {view === 'list' &&
} {view === 'table' &&
{rows.length > 0 && } {rows.length ? : } title="No requests match" action={(q||fType||fPriority||fStatus||fArea||fAssignee||mine) ? : null}/>}
} {view === 'timeline' &&
} {view === 'calendar' &&
} {view === 'analytics' &&
}
{editing && setEditing(null)} toast={toast} onSave={async (v)=>{ const isNew = !v.id; const ok = await act(isNew ? API.post('/api/requests', v) : API.put(`/api/requests/${v.id}`, v), isNew ? 'Request raised' : 'Request updated'); if (ok) setEditing(null); }}/>}
); } /* --------------------------------------------------------------- analytics */ function RequestsAnalytics({state, idx, go}){ const requests = state.requests; const open = requests.filter(r => !isClosedRequest(r)); const byStatus = (state.requestStatuses||[]).map(s => ({k:s, n: requests.filter(r=>r.status===s).length})); const byPriority = (state.requestPriorities||[]).map(p => ({k:p, n: open.filter(r=>r.priority===p).length})); const byType = (state.requestTypes||[]).map(t => ({k:t, n: open.filter(r=>r.requestType===t).length})) .sort((a,b)=>b.n-a.n); const byArea = {}; open.forEach(r => { const k = r.businessArea || 'Unspecified'; byArea[k] = (byArea[k]||0)+1; }); const areaRows = Object.entries(byArea).sort((a,b)=>b[1]-a[1]); const overdue = open.filter(r => isOverdue(r.targetDate)); const onTrack = open.length - overdue.length; const byAssignee = {}; open.forEach(r => { const p = resolveParty(r.assignee, idx); const k = p ? p.name : 'Unassigned'; byAssignee[k] = (byAssignee[k]||0) + 1; }); const assigneeRows = Object.entries(byAssignee).sort((a,b)=>b[1]-a[1]).slice(0,8); // Requests raised per month, oldest to newest, for the last 6 months. const now = new Date(); const monthKeys = []; for (let i = 5; i >= 0; i--){ const d = new Date(now.getFullYear(), now.getMonth()-i, 1); monthKeys.push({label: d.toLocaleDateString(undefined,{month:'short',year:'2-digit'}), ym: d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')}); } const raisedTrend = monthKeys.map(m => ({...m, n: requests.filter(r => (r.createdAt||'').slice(0,7) === m.ym).length})); const maxTrend = Math.max(1, ...raisedTrend.map(m=>m.n)); const Bar = ({n, max, tone}) => ; return (

By status

{requests.length}
{byStatus.map(({k,n}) =>
{k} {n}
)}

Open requests by priority

{open.length}
{byPriority.map(({k,n}) =>
{n}
)}

Open requests by type

{byType.length === 0 ? } title="Nothing open"/> : byType.map(({k,n}) =>
{k} {n}
)}

Target date performance

{overdue.length} past target
On track {onTrack}
Past target {overdue.length}
{overdue.length > 0 &&
{overdue.slice(0,6).map(r =>
go({view:'request', id:r.id})}> {r.reference} {r.title} — target {fmtDate(r.targetDate)}
)} {overdue.length > 6 &&
+{overdue.length-6} more
}
}

Open requests by business area

{areaRows.length === 0 ? } title="Nothing open"/> : areaRows.map(([area,n]) =>
{area} {n}
)}

Busiest assignees

{assigneeRows.length === 0 ? } title="Nothing open"/> : assigneeRows.map(([name,n]) =>
{name} {n}
)}

Raised per month

Last 6 months, all types and statuses
{raisedTrend.map(m =>
{m.label} {m.n}
)}
); } /* ------------------------------------------------------------------ board */ function RequestCard({request, idx, onOpen, onContextMenu, draggable, onDragStart, dragging}){ const assignee = resolveParty(request.assignee, idx); const overdue = isOverdue(request.targetDate) && !isClosedRequest(request); return (
onOpen(request)} onContextMenu={(e)=>onContextMenu && onContextMenu(e, request)} style={{cursor: draggable ? 'grab' : 'pointer'}}>
{request.reference}
{request.attachments.length > 0 && } {request.comments.length > 0 && {request.comments.length}}
{request.title}
{assignee ? {assignee.name} : Unassigned}
{request.targetDate && {fmtDate(request.targetDate)}}
); } function RequestBoard({requests, idx, statuses, act, onOpen, onContextMenu, canEdit}){ const [dragId, setDragId] = useState(null); const [overCol, setOverCol] = useState(null); const drop = async (status) => { setOverCol(null); const id = dragId; setDragId(null); if (!id) return; const req = requests.find(r => r.id === id); if (!req || req.status === status) return; if (!canEdit(id)) return; await act(API.put(`/api/requests/${id}/status`, {status}), `Moved to ${status}`); }; return (
{statuses.map(status => { const items = requests.filter(r => r.status === status); return (
{ e.preventDefault(); setOverCol(status); }} onDragLeave={()=>setOverCol(c => c === status ? null : c)} onDrop={()=>drop(status)}>
{status}
{items.length}
{items.map(r => setDragId(r.id)}/>)} {!items.length &&
Nothing here
}
); })}
); } /* ------------------------------------------------------------------- list */ function RequestList({requests, idx, onOpen, onContextMenu, hasFilters, clearFilters}){ if (!requests.length) return
} title="No requests match" action={hasFilters ? : null}/>
; const groups = {}; requests.forEach(r => { (groups[r.priority] = groups[r.priority] || []).push(r); }); return (
{['P1','P2','P3','P4'].filter(p => groups[p]).map(p => (

{p === 'P1' ? 'Critical' : p === 'P2' ? 'High' : p === 'P3' ? 'Normal' : 'Low'}

{groups[p].length}
{groups[p].map(r => { const assignee = resolveParty(r.assignee, idx); const overdue = isOverdue(r.targetDate) && !isClosedRequest(r); return (
onOpen(r)} onContextMenu={(e)=>onContextMenu && onContextMenu(e, r)}> {r.status}
{r.reference}{r.title}
{r.description}
{r.requestType} {r.businessArea && {r.businessArea}} {(r.componentIds||[]).slice(0,3).map(cid => idx.comp[cid] ? {idx.comp[cid].identifier} : null)}
{assignee ?
{assignee.name}
: Unassigned} {r.targetDate &&
target {fmtDate(r.targetDate)}
}
); })}
))}
); } /* --------------------------------------------------------------- timeline */ function RequestTimeline({requests, idx, onOpen, onContextMenu}){ const dated = requests.filter(r => r.startDate || r.targetDate); if (!dated.length) return
} title="Nothing to plot" body="Requests need a start or target date to appear on the timeline."/>
; const times = []; dated.forEach(r => { if (r.startDate) times.push(new Date(r.startDate + 'T00:00:00').getTime()); if (r.targetDate) times.push(new Date(r.targetDate + 'T00:00:00').getTime()); }); times.push(Date.now()); const min = new Date(Math.min(...times)); const max = new Date(Math.max(...times)); min.setDate(1); min.setHours(0,0,0,0); max.setMonth(max.getMonth() + 1, 1); max.setHours(0,0,0,0); const span = max.getTime() - min.getTime(); const pct = (t) => ((t - min.getTime()) / span) * 100; const months = []; const cursor = new Date(min); while (cursor < max) { months.push(new Date(cursor)); cursor.setMonth(cursor.getMonth() + 1); } const colour = (r) => isClosedRequest(r) ? 'var(--slate)' : r.priority === 'P1' ? 'var(--red)' : r.priority === 'P2' ? 'var(--amber)' : r.priority === 'P3' ? 'var(--blue)' : 'var(--slate)'; const sorted = [...dated].sort((a,b) => (a.startDate || a.targetDate).localeCompare(b.startDate || b.targetDate)); return (

Timeline

{dated.length} Bars run from start date to target date. Bar colour is priority.
Request
{months.map((m,i) =>
{m.toLocaleDateString('en-GB',{month:'short',year:'2-digit'})}
)}
{sorted.map(r => { const s = r.startDate ? new Date(r.startDate + 'T00:00:00').getTime() : new Date(r.targetDate + 'T00:00:00').getTime(); const e = r.targetDate ? new Date(r.targetDate + 'T00:00:00').getTime() : s; const left = pct(Math.min(s, e)); const width = Math.max(1.4, pct(Math.max(s, e)) - left); return (
{r.title}
{r.reference}
{months.map((m,i) => i === 0 ? null :
)}
onOpen(r)} onContextMenu={(e)=>onContextMenu && onContextMenu(e, r)} title={`${r.reference} ${r.title}\n${fmtDate(r.startDate) || 'no start'} → ${fmtDate(r.targetDate) || 'no target'}`}> {r.priority} · {r.status}
); })}
); } /* --------------------------------------------------------------- calendar */ function RequestCalendar({requests, idx, onOpen, onContextMenu}){ const [offset, setOffset] = useState(0); const base = new Date(); base.setDate(1); base.setMonth(base.getMonth() + offset); const year = base.getFullYear(), month = base.getMonth(); const first = new Date(year, month, 1); const startDow = (first.getDay() + 6) % 7; // Monday first const gridStart = new Date(year, month, 1 - startDow); const cells = Array.from({length: 42}, (_, i) => { const d = new Date(gridStart); d.setDate(gridStart.getDate() + i); return d; }); const byDate = {}; requests.forEach(r => { if (!r.targetDate) return; (byDate[r.targetDate] = byDate[r.targetDate] || []).push(r); }); const iso = (d) => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`; const today = todayIso(); const withTarget = requests.filter(r => r.targetDate).length; const tone = (r) => isClosedRequest(r) ? {background:'var(--slate-soft)', color:'var(--slate)', borderColor:'var(--slate-border)'} : r.priority === 'P1' ? {background:'var(--red-soft)', color:'var(--red)', borderColor:'var(--red-border)'} : r.priority === 'P2' ? {background:'var(--amber-soft)', color:'var(--amber)', borderColor:'var(--amber-border)'} : {background:'var(--blue-soft)', color:'var(--blue)', borderColor:'var(--blue-border)'}; return (

{base.toLocaleDateString('en-GB',{month:'long',year:'numeric'})}

{offset !== 0 && }
{withTarget} of {requests.length} shown have a target date
{['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].map(d =>
{d}
)} {cells.map((d, i) => { const key = iso(d); const items = byDate[key] || []; return (
{d.getDate()}
{items.slice(0, 4).map(r =>
onOpen(r)} onContextMenu={(e)=>onContextMenu && onContextMenu(e, r)} title={`${r.reference} ${r.title}`}> {r.reference} {r.title}
)} {items.length > 4 &&
+{items.length - 4} more
}
); })}
); } /* ----------------------------------------------------------------- detail */ /** Full record page for a business request, mirroring ComponentDetail's layout. */ function RequestDetail({id, state, idx, go, act, toast, user, canEdit}){ const [comment, setComment] = useState(''); const [commentKey, setCommentKey] = useState(0); const [internal, setInternal] = useState(false); const [busy, setBusy] = useState(false); const [raisingChange, setRaisingChange] = useState(false); const [editing, setEditing] = useState(null); const r = state.requests.find(x => x.id === id); useEffect(()=>{ setComment(''); setInternal(false); }, [id]); if (!r) return } title="Request not found" body="It may have been deleted by someone else." action={}/>; const editable = canEdit(r.id); const assignee = resolveParty(r.assignee, idx); const requester = idx.person[r.requesterPersonId]; const overdue = isOverdue(r.targetDate) && !isClosedRequest(r); const linked = (r.componentIds||[]).map(cid => idx.comp[cid]).filter(Boolean); const changes = state.changes.filter(ch => (ch.requestIds||[]).includes(r.id)); const base = `/api/requests/${r.id}`; const postComment = async () => { if (rteIsBlank(comment)) return; setBusy(true); const ok = await act(API.post(`${base}/comments`, {body: comment, isInternal: internal}), 'Comment added'); if (ok) { setComment(''); setCommentKey(k => k + 1); setInternal(false); } setBusy(false); }; return (

{r.title}

{r.status} {overdue && Past target} {!editable && Read only}
{r.reference} · {r.requestType} {r.businessArea && <> · {r.businessArea}} {r.updatedAt && <> · updated {relative(r.updatedAt)} by {r.updatedBy}}
{editable && }
{editable && !isClosedRequest(r) &&
Move to {(state.requestStatuses||[]).filter(s => s !== r.status).map(s => )}
} {r.description ? :

No description given.

} {r.resolution && <>
Resolution

{r.resolution}

}
Components affected
{linked.length ?
{linked.map(c => go({view:'component', id:c.id})}> {c.name})}
:

None linked.

} {/* A request says what the business wants; a change says what will be done about it. Raising one here carries the context across and links them. */}
Changes
{changes.length ?
{changes.map(ch => (
go({view:'change', id:ch.id})}> {ch.reference} {ch.title} {ch.status}
))}
:

No changes have been raised from this request yet.

}
Conversation
{r.comments.length === 0 &&

No comments yet.

} {r.comments.map(c => (
{c.createdBy} {fmtDateTime(c.createdAt)} {c.isInternal && Internal}
))}
{state.permissions.editableRequestIds === '*' && }
{r.events.length > 0 && <>
History
{r.events.map(e =>
{fmtDateTime(e.at)} {e.by} changed {e.field} {e.oldValue ? ` from ${e.oldValue}` : ''} to {e.newValue || 'nothing'}
)}
}

Request details

Raised by {requester ? requester.name : r.raisedBy}
Assigned to {assignee ? {assignee.name} : Unassigned}
Start date {fmtDate(r.startDate) || '—'}
Target date {r.targetDate ? {fmtDate(r.targetDate)} : '—'}
Effort estimate {r.effortEstimate ? `${r.effortEstimate} day${r.effortEstimate===1?'':'s'}` : 'Not sized'}
{r.closedAt &&
Closed{fmtDateTime(r.closedAt)}
}
{raisingChange && setRaisingChange(false)} value={NEW_CHANGE({ fromRequestId: r.id, title: `${r.reference}: ${r.title}`, description: r.description, reason: `Raised from business request ${r.reference}.`, requesterPersonId: r.requesterPersonId || '', componentIds: [...(r.componentIds || [])], requestIds: [r.id] })} onSave={async (v)=>{ const ok = await act(API.post('/api/changes', v), 'Change raised and linked'); if (ok) setRaisingChange(false); }}/>} {editing && setEditing(null)} toast={toast} onSave={async (v)=>{ const ok = await act(API.put(`/api/requests/${v.id}`, v), 'Request updated'); if (ok) setEditing(null); }}/>}
); } /* ------------------------------------------------------------------- form */ function RequestForm({value, state, user, onClose, onSave, toast}){ const [r, setR] = useState(()=>clone(value)); const [busy, setBusy] = useState(false); const set = (k,v) => setR(x => ({...x, [k]:v})); const isNew = !value.id; const canTriage = state.permissions.editableRequestIds === '*'; return ( }> {isNew && !canTriage &&
Your request will be raised as New. The team will triage it, set a priority and assign it.
} set('title', e.target.value)} placeholder="Summarise the request in one line"/> set('description', v)} toast={toast} uploadContext={r.id ? {entityKind:'request', entityId:r.id} : null}/>
{(canTriage || !isNew) && <>
Triage
set('assignee', v)} placeholder="Unassigned"/> set('effortEstimate', e.target.value)}/> set('startDate', e.target.value)}/> set('targetDate', e.target.value)}/>