{ if (e.target === e.currentTarget) onClose(); }}>
);
}
function ConfirmDialog({title, message, confirmLabel='Delete', onConfirm, onClose}){
const [busy, setBusy] = useState(false);
return (
e.stopPropagation()}>
{title}
{children}
{footer && {footer}
}
{message}
{menu.name}
{count} selected
);
}
/** Delays a delete so its toast can offer Undo before it actually happens —
* use in place of `act(API.del(url), label)` for anything a user might
* regret clicking. Nothing is sent to the server unless the toast expires
* without Undo being clicked. `label` reads naturally before " deleted",
* e.g. "Component", "SVC-003", "Jane Doe". */
function deleteWithUndo(act, toast, url, label){
let undone = false;
const timer = setTimeout(()=>{ if (!undone) act(API.del(url)); }, 5500);
toast(`${label} deleted`, false, {
label: 'Undo',
onClick: () => { undone = true; clearTimeout(timer); toast(`${label} kept — nothing was deleted`); }
});
}
const Field = ({label, hint, children, style}) => (
);
function PartySelect({value, onChange, state, allowEmpty=true, placeholder='Not assigned'}){
return (
);
}
/** Tick-list for choosing several components. */
function ComponentPicker({state, value, onChange, filter}){
const [q, setQ] = useState('');
const selected = new Set(value || []);
const list = state.components
.filter(c => !filter || filter(c))
.filter(c => !q || (c.name + ' ' + c.identifier).toLowerCase().includes(q.toLowerCase()));
const toggle = (id) => {
const next = new Set(selected);
if (next.has(id)) next.delete(id); else next.add(id);
onChange([...next]);
};
return (
{children}
{list.map(c =>
)}
{!list.length &&
{selected.size > 0 && No components match
}
{selected.size} selected
}
{icon}
);
}
function ContactLinks({contact}){
const items = [];
if (contact.phone) items.push({k:'tel', icon:{title}
{body && {body}
}
{action}
No contact details recorded
;
return (
{items.map(it =>
{it.icon}{it.label}
)}
);
}
const ReadOnlyBanner = ({message}) => (
{title}
{files.map(f => (
}
{editable &&
{f.isImage ? : }
Get
{editable &&
}
))}
{f.filename}
{fmtBytes(f.byteSize)} · {f.uploadedBy} · {relative(f.uploadedAt)}
{f.description ? ' · ' + f.description : ''}
{ if (e.target.files.length) handleFiles(e.target.files); e.target.value=''; }}/>
}
}
inputRef.current.click()}
onDragOver={e=>{ e.preventDefault(); setOver(true); }}
onDragLeave={()=>setOver(false)}
onDrop={e=>{ e.preventDefault(); setOver(false);
if (e.dataTransfer.files.length) handleFiles(e.dataTransfer.files); }}>
{uploading &&
Drop files here, or click to choose
Up to 25MB per file, stored on the server
{uploading.name} — {uploading.pct}%
{views.map(v =>
)}
);
/* ---------------------------------------------------------- notifications */
/** The bell, its unread badge and the dropdown of recent notifications. */
function NotificationBell({unread, onNavigate, refreshState}){
const [open, setOpen] = useState(false);
const [items, setItems] = useState(null);
const [count, setCount] = useState(unread || 0);
const ref = useRef(null);
useEffect(()=>{ setCount(unread || 0); }, [unread]);
useEffect(()=>{
if (!open) return;
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return ()=>document.removeEventListener('mousedown', h);
}, [open]);
const load = async () => {
try {
const res = await API.get('/api/notifications?limit=40');
setItems(res.notifications);
setCount(res.unread);
} catch { setItems([]); }
};
useEffect(()=>{ if (open) load(); }, [open]);
// A quiet poll keeps the badge honest without the page needing a refresh.
useEffect(()=>{
const timer = setInterval(async () => {
try {
const res = await API.get('/api/notifications?limit=1');
setCount(res.unread);
} catch { /* offline or signed out; the next state fetch will notice */ }
}, 60000);
return ()=>clearInterval(timer);
}, []);
const markAll = async () => {
try { const res = await API.post('/api/notifications/read', {}); setCount(res.unread); await load(); }
catch { /* ignore */ }
};
const openOne = async (n) => {
setOpen(false);
if (!n.isRead) {
try { const res = await API.post('/api/notifications/read', {ids:[n.id]}); setCount(res.unread); }
catch { /* ignore */ }
}
if (n.url) onNavigate(n.url);
if (refreshState) refreshState();
};
return (
{open &&
}
);
}
/* ----------------------------------------------------------------- login */
function LoginScreen({onSignedIn}){
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [busy, setBusy] = useState(false);
const [challengeToken, setChallengeToken] = useState(null);
const [code, setCode] = useState('');
const [useBackup, setUseBackup] = useState(false);
const brand = (
Notifications
{count > 0 && {count} unread }
{count > 0 && }
{items === null && } title="Nothing yet"
body="You will hear about approvals, changes and requests that involve you."/>}
{items && items.map(n => (
Loading…
}
{items && items.length === 0 &&
openOne(n)}>
))}
{n.title}
{n.body && {n.body}
}
{relative(n.createdAt)}
Fuse
{challengeToken ? 'Verify your identity' : 'Sign in to your workspace'}
Your password was set by an administrator. Please choose a new one.
}
{error && {error}
}
{ pick(e.target.files[0]); e.target.value=''; }}/>
{hasAvatar && }
PNG, JPEG, GIF or WebP. Up to 2MB.
- content
`; return `<${tag}${attrOut}>${inner}`; } /** Clean every child of a live or inert DOM container into an allowlisted HTML string. */ const rteCleanNodes = (container) => Array.from(container.childNodes).map(n => rteWalk(n, 0)).join(''); /** Parse an HTML string via an inert, script-disabled document, then clean it. Safe for untrusted input. */ function rteCleanHtmlString(html){ const doc = new DOMParser().parseFromString(String(html||''), 'text/html'); return rteCleanNodes(doc.body); } const RTE_BLOCK_START_RE = /^\s*<(p|h1|h2|h3|ul|ol|blockquote|pre|table|hr)\b/i; /** Distinguishes rich HTML (saved through this feature) from plain text saved before it existed. */ const looksLikeRichText = (v) => RTE_BLOCK_START_RE.test(String(v||'')); const RTE_EMPTY_VALUES = new Set(['', '
${rteEscape(p).replace(/\n/g,'
')}