);
}
// === Tweaks panel content ===
function OpcTweaks({ t, setTweak }) {
const { impersonate, currentUser, realUserId, state, getUser } = useStore();
// Admin-only impersonation: real users from the DB. Hidden for non-admins.
const isAdmin = (getUser(realUserId) || {}).role === 'Org Admin';
const personas = (state.users || []).map(u => ({ id: u.id, name: `${u.name} — ${u.role}` }));
return (
setTweak('primary_color', v)}/>
setTweak('density', v)}/>
setTweak('show_internal_bom_inline', v)}/>
setTweak('industry_template', v)}/>
{isAdmin && personas.length > 1 && (
({ value: p.id, label: p.name }))}
onChange={v => impersonate(v)}/>
)}
{ if (confirm('Reset all demo state?')) { localStorage.clear(); window.location.reload(); }}}
secondary/>
);
}
// ===========================================================================
// Unsaved-changes banner
// ===========================================================================
// The worst failure this app had was a silent one: a record rejected by the
// database still showed on screen, lived only in localStorage, and was missing
// from every other browser. The user had no way to know. Anything that fails to
// save now says so, in the page, until it is retried.
function SyncErrorBanner() {
const { syncErrors, retrySync } = useStore();
const [busy, setBusy] = React.useState(false);
if (!syncErrors || !syncErrors.length) return null;
const tables = [...new Set(syncErrors.map(e => e.table))];
const retry = async () => { setBusy(true); try { await retrySync(); } finally { setBusy(false); } };
return (
Not saved to the server.
{syncErrors.length} change{syncErrors.length > 1 ? 's' : ''} to {tables.join(', ')}
{' '}could not be saved, so {syncErrors.length > 1 ? 'they are' : 'it is'} only in this browser
and will not appear for anyone else.
);
}
window.SyncErrorBanner = SyncErrorBanner;
// ===========================================================================
// Crash boundary
// ===========================================================================
// React unmounts the entire tree when a render throws, so ONE bad field in a
// component that sits on every page produces a white screen with nothing to go
// on — no message, no route, no way back. This turns that into something a
// non-technical user can act on and a developer can diagnose, and it keeps the
// rest of the session recoverable.
//
// Deliberately a class component: getDerivedStateFromError / componentDidCatch
// have no hook equivalent.
class CrashBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: null, info: null };
}
static getDerivedStateFromError(error) { return { error }; }
componentDidCatch(error, info) {
this.setState({ info });
try {
console.error('[OPC] render crash', error, info && info.componentStack);
} catch (e) { /* never throw from the handler */ }
}
render() {
if (!this.state.error) return this.props.children;
const e = this.state.error;
const stack = (this.state.info && this.state.info.componentStack) || '';
const detail = `${e && e.message ? e.message : String(e)}\n${stack}`.trim();
// A stale cache is the most common cause and the most common cure, so it is
// the primary action — but it is the user's choice, not automatic, because
// clearing it discards anything not yet synced.
const reset = () => {
try { localStorage.removeItem('opc.state.v3'); } catch (err) {}
window.location.reload();
};
return (
This page could not be displayed
Something in the app failed while drawing this screen. Your data is safe —
nothing was saved or changed. Reloading usually clears it.
Technical details (please send this if it keeps happening)