/* CHAIRSIDE — the primary workspace. Course content remains in Chairside.html; this page only guides the member into learning, AI practice, and review. */ const { useEffect, useMemo } = React; const COURSE = window.CHAIRSIDE_COURSE; const ALL_PRODUCTS = (window.SUITE_PRODUCTS || []).flatMap((group) => group.items); const ADD_ONS = ALL_PRODUCTS.filter((product) => !["course", "my-practice"].includes(product.id)); const FEATURED_ADD_ON_IDS = new Set(["praxia", "eq"]); function ProgressBar({ value, tokens, accent, label }) { return (
); } function StepLink({ number, title, detail, href, tokens, accent }) { return ( {number} {title} {detail} ); } function AddOnCard({ product, tokens, accessible, entitlementKnown, isOwner, featured = false }) { const productAccent = CHAIRSIDE_ACCENTS[product.accent] || CHAIRSIDE_ACCENTS.amber; const Wrapper = accessible ? "a" : "div"; const wrapperProps = accessible ? { href: product.href } : { "aria-label": `${product.name}, available as an add-on` }; const status = entitlementKnown ? (accessible ? "In your plan" : "Available as add-on") : "Add-on"; return (
{status} {product.duration}

{product.name}

{product.sub}

{product.desc}

{product.role} {accessible ? "Open →" : isOwner ? "Add to plan" : "Ask practice owner"}
); } function App() { const [tweaks, setTweak] = useTweaks({ theme: "warm", accent: "amber" }); const tokens = CHAIRSIDE_THEMES[tweaks.theme]; const accent = CHAIRSIDE_ACCENTS[tweaks.accent]; const [me, setMe] = useSuiteMe(); const [progress] = useSyncedStore("chairside.progress", {}); const entitlements = me && Array.isArray(me.entitlements) ? me.entitlements : null; const entitlementKnown = entitlements !== null; const isOwner = !!(me && me.isOwner === true); const needsRole = !!(me && me.role == null); const roleInfo = me && me.role ? suiteRole(me.role) : null; const practiceRole = roleInfo ? (suiteRoleToChairside(roleInfo.id) || "tc") : "tc"; const practiceHref = `Chairside-Roles.html#role=${practiceRole}&view=practice&launch=1`; const courseState = useMemo(() => { const lessons = COURSE.modules.flatMap((module) => module.lessons.map((lesson) => ({ lesson, module }))); const done = lessons.filter(({ lesson }) => progress[lesson.id]?.done).length; const drillsDone = lessons.filter(({ lesson }) => progress[lesson.id]?.drillDone).length; const modulesDone = COURSE.modules.filter((module) => module.lessons.every((lesson) => progress[lesson.id]?.done)).length; const next = lessons.find(({ lesson }) => !progress[lesson.id]?.done) || lessons[0]; const pct = lessons.length ? Math.round((done / lessons.length) * 100) : 0; return { lessons, done, drillsDone, modulesDone, next, pct }; }, [progress]); const nextLessonHref = `Chairside.html#view=lesson&module=${courseState.next.module.id}&lesson=${courseState.next.lesson.id}`; const featuredAddOns = ADD_ONS.filter((product) => FEATURED_ADD_ON_IDS.has(product.id)); const supportingAddOns = ADD_ONS.filter((product) => !FEATURED_ADD_ON_IDS.has(product.id)); const owns = (key) => entitlements === null || entitlements.includes(key); const displayName = me && me.displayName ? me.displayName.split(" ")[0] : null; useEffect(() => { const scrollToSection = () => { const id = window.location.hash.replace(/^#/, ""); if (!id) return; const section = document.getElementById(id); if (section) section.scrollIntoView({ block: "start" }); }; scrollToSection(); window.addEventListener("hashchange", scrollToSection); return () => window.removeEventListener("hashchange", scrollToSection); }, []); return ( <>
{needsRole && (
setMe((previous) => updated || (previous ? { ...previous, role: roleId } : previous))} />
)}
Your Chairside rhythm
Progress

Keep the next step visible.

Course progress and AI feedback stay connected, so the next lesson and the next practice rep reinforce each other.

{courseState.pct}%
Course complete
{courseState.modulesDone}/12
Modules complete
{courseState.drillsDone}
Drills complete
Add-ons

Build more skills when the team is ready.

Chairside remains the starting point. These courses and tools extend the work without interrupting the core path.

{featuredAddOns.map((product) => ( ))}
{supportingAddOns.map((product) => ( ))}
Chairside by Praxia
The art of the yes that helps.
setTweak("theme", value)} options={[{ value: "warm", label: "Warm" }, { value: "cream", label: "Cream" }, { value: "dark", label: "Dark" }]} /> setTweak("accent", value)} options={[{ value: "amber", label: "Amber" }, { value: "rose", label: "Rose" }, { value: "teal", label: "Teal" }, { value: "indigo", label: "Indigo" }, { value: "violet", label: "Violet" }]} /> ); } ReactDOM.createRoot(document.getElementById("root")).render();