);
}
function useChairsideStored(key, init) {
const [v, set] = React.useState(() => {
try { const r = localStorage.getItem(key); return r ? JSON.parse(r) : init; } catch { return init; }
});
React.useEffect(() => { try { localStorage.setItem(key, JSON.stringify(v)); } catch {} }, [key, v]);
return [v, set];
}
// ─── Identity-backed progress sync (A3) ───────────────────────────────────
// ChairsideProgress talks to /api/progress. It is OFFLINE-SAFE: when the page is
// opened as a file (no server) or the user isn't signed in, every call resolves
// to null/false and the app keeps working from localStorage exactly as before.
// The full store set is fetched once per page load and shared across all hooks.
const _progressFetch = { promise: null };
const ChairsideProgress = {
fetchAll() {
if (_progressFetch.promise) return _progressFetch.promise;
_progressFetch.promise = fetch("/api/progress", { credentials: "same-origin" })
.then((r) => (r.ok ? r.json() : null))
.catch(() => null);
return _progressFetch.promise;
},
get(key) {
return ChairsideProgress.fetchAll().then((d) => (d && d.stores ? (d.stores[key] ?? null) : null));
},
put(key, value) {
return fetch("/api/progress", {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "same-origin",
body: JSON.stringify({ key, value }),
}).then((r) => r.ok).catch(() => false);
},
};
function _ps_isObj(x) { return x && typeof x === "object" && !Array.isArray(x); }
// Merge a server value into a local value without losing either. Completions are
// additive (done/drillDone OR together, keep the later `at`); journals keep the
// longer text. Falls back to the server value for anything else.
function _ps_pickRicher(a, b) {
if (a == null) return b;
if (b == null) return a;
if (_ps_isObj(a) && _ps_isObj(b)) {
const m = { ...a, ...b };
if (a.done || b.done) m.done = true;
if (a.drillDone || b.drillDone) m.drillDone = true;
const at = Math.max(a.at || 0, b.at || 0);
if (at) m.at = at;
return m;
}
if (typeof a === "string" && typeof b === "string") return a.length >= b.length ? a : b;
return b;
}
function _ps_merge(local, server) {
if (!_ps_isObj(local)) return server == null ? local : server;
if (!_ps_isObj(server)) return local;
const out = { ...local };
for (const k of Object.keys(server)) out[k] = _ps_pickRicher(local[k], server[k]);
return out;
}
// Drop-in superset of useChairsideStored: same localStorage read/write, plus a
// one-time server hydrate (merged, never clobbering local) and a debounced push
// on change. Same key => same localStorage entry, so switching a store from
// useChairsideStored to this hook never loses existing local data.
function useSyncedStore(key, init) {
const [v, setV] = React.useState(() => {
try { const r = localStorage.getItem(key); return r ? JSON.parse(r) : init; } catch { return init; }
});
React.useEffect(() => {
try { localStorage.setItem(key, JSON.stringify(v)); } catch {}
}, [key, v]);
// Hydrate once from the server, merging into whatever is already local.
React.useEffect(() => {
let alive = true;
ChairsideProgress.get(key).then((serverVal) => {
if (!alive || serverVal == null) return;
setV((prev) => _ps_merge(prev, serverVal));
});
return () => { alive = false; };
}, [key]);
// Push changes to the server (debounced). Skips the first render so the
// pre-hydrate local value is never written over the server's copy.
const firstRender = React.useRef(true);
React.useEffect(() => {
if (firstRender.current) { firstRender.current = false; return; }
const t = setTimeout(() => { ChairsideProgress.put(key, v); }, 800);
return () => clearTimeout(t);
}, [key, v]);
return [v, setV];
}
// ─── Responsive helper ────────────────────────────────────────────────────
// True on phone-width viewports. Mirrors the matchMedia pattern SuiteSidebar
// uses, so inline-styled multi-column grids can collapse to a single column on
// phones without a CSS build step.
function useIsPhone(maxWidth = 640) {
const query = `(max-width: ${maxWidth - 1}px)`;
const [isPhone, setIsPhone] = React.useState(() => {
try { return Boolean(window.matchMedia && window.matchMedia(query).matches); } catch { return false; }
});
React.useEffect(() => {
if (typeof window === "undefined" || !window.matchMedia) return;
const mq = window.matchMedia(query);
const onChange = () => setIsPhone(mq.matches);
onChange();
if (mq.addEventListener) mq.addEventListener("change", onChange);
else mq.addListener(onChange);
return () => {
if (mq.removeEventListener) mq.removeEventListener("change", onChange);
else mq.removeListener(onChange);
};
}, [query]);
return isPhone;
}
// ─── Suite role (canonical, server-written) ────────────────────────────────
// One canonical role vocabulary for the whole suite, mirroring PracticeRole in
// api/_lib/identity-shared.ts — keep the two in sync (the server validates,
// the client only reflects). Each entry maps the canonical id onto the
// vocabularies the courses already use: EQ's role ids (EQ_ROLES in
// eq-data.jsx) and Chairside's role ids (COURSE.roles in chairside-data.jsx).
// selfSelect mirrors SELF_SELECT_ROLES on the server: Owner and OfficeManager
// carry practice-admin rights, so a member never assigns those to themselves.
// primaryCourse drives the hub's "Your path" zone: the SUITE_PRODUCTS course
// id shown first for that seat. Patient-facing roles start in Chairside;
// Owner and Office Manager start in Lead. Everything else stays reachable —
// role only reorders and highlights, it never hides.
const SUITE_ROLES = [
{ id: "TC", label: "Treatment Coordinator", eqId: "treatment_coordinator", chairsideId: "tc", selfSelect: true, primaryCourse: "course" },
{ id: "FrontDesk", label: "Front Desk", eqId: "front_desk", chairsideId: "fd", selfSelect: true, primaryCourse: "course" },
{ id: "Hygienist", label: "Hygienist", eqId: "hygienist", chairsideId: "hy", selfSelect: true, primaryCourse: "course" },
{ id: "Doctor", label: "Doctor", eqId: "associate_doctor", chairsideId: "dr", selfSelect: true, primaryCourse: "course" },
{ id: "Assistant", label: "Dental Assistant", eqId: "dental_assistant", chairsideId: null, selfSelect: true, primaryCourse: "course" },
{ id: "Owner", label: "Owner", eqId: "doctor_owner", chairsideId: "ow", selfSelect: false, primaryCourse: "lead" },
{ id: "OfficeManager", label: "Office Manager", eqId: "office_manager", chairsideId: "ow", selfSelect: false, primaryCourse: "lead" },
];
function suiteRole(id) { return SUITE_ROLES.find((r) => r.id === id) || null; }
// EQ's "other" (and any unknown id) maps to null — the suite role stays unset.
function suiteRoleFromEq(eqId) { return SUITE_ROLES.find((r) => r.eqId === eqId) || null; }
function suiteRoleToEq(id) { const r = suiteRole(id); return r ? r.eqId : null; }
function suiteRoleToChairside(id) { const r = suiteRole(id); return r ? r.chairsideId : null; }
// Mirror a canonical role into EQ's localStorage key so EQ stops re-asking.
// Never overwrites an existing local choice — a deliberate in-EQ pick wins.
function mirrorRoleToEq(roleId) {
try {
const existing = localStorage.getItem("eq.role.v1");
if (existing != null && JSON.parse(existing)) return;
const eqId = suiteRoleToEq(roleId);
if (eqId) localStorage.setItem("eq.role.v1", JSON.stringify(eqId));
} catch {}
}
// Fetch /api/me once. me === null means UNKNOWN (still loading, or the request
// failed) — callers must fail open on null: show everything, gate nothing,
// ask nothing. Only a loaded payload may drive role or entitlement UI.
function useSuiteMe() {
const [me, setMe] = React.useState(null);
React.useEffect(() => {
let alive = true;
fetch("/api/me", { credentials: "same-origin" })
.then((r) => (r.ok ? r.json() : null))
.then((data) => { if (alive && data && typeof data === "object") setMe(data); })
.catch(() => { /* fail open: me stays null */ });
return () => { alive = false; };
}, []);
return [me, setMe];
}
// Write the member's own role to the server (POST /api/me) and mirror it into
// EQ's local key. `extra` may carry displayName for the first-run flow.
// Resolves to the updated /api/me payload, or null on failure — the mirror
// keeps this session coherent either way, and the server becomes the source
// of truth on next load.
async function saveSuiteRole(roleId, extra) {
mirrorRoleToEq(roleId);
try {
const res = await fetch("/api/me", {
method: "POST",
credentials: "same-origin",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ role: roleId, ...(extra || {}) }),
});
if (!res.ok) return null;
return await res.json();
} catch { return null; }
}
// Suite-level role picker. Same job as EQ's RoleGate, one level up: ask once,
// write the answer to the server, and every course reads it from there.
// Render only when /api/me has LOADED and role is null — never while unknown.
// Pass `me` (the loaded /api/me payload) to enable the first-run name
// confirmation: the field prefilled from the invite hint or email-derived
// default, saved in the same POST as the role. One screen, one save.
function SuiteRolePicker({ tokens, accent, onSaved, me }) {
const [saving, setSaving] = React.useState(null);
const [name, setName] = React.useState(me && me.displayName ? me.displayName : "");
const pick = async (roleId) => {
if (saving) return;
setSaving(roleId);
const trimmed = name.trim();
const extra = me && trimmed && trimmed !== me.displayName ? { displayName: trimmed.slice(0, 60) } : undefined;
const updated = await saveSuiteRole(roleId, extra);
setSaving(null);
if (onSaved) onSaved(updated, roleId);
};
const mono = { fontFamily: "'IBM Plex Mono', ui-monospace, monospace", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase" };
return (
Before you start
What do you do at the practice?
Your role sets what shows first — lessons, scenarios, and practice reps that match your seat.
Everything else stays one click away, and you can change this anytime.
{me && (
setName(e.target.value)}
placeholder="How your name shows to the team"
style={{
width: "100%", boxSizing: "border-box", padding: "10px 12px", fontSize: 15,
border: `1px solid ${tokens.line}`, background: tokens.surface2, color: tokens.text, minHeight: 44,
}}
/>