.admin-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; } .admin-search { flex: 1; min-width: 200px; background: var(--white); border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 14px 9px 36px; font-size: 13.5px; font-family: var(--font); color: var(--text-main); outline: none; transition: border-color 0.15s; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238E9AB0' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; } .admin-search:focus { border-color: var(--steel); } .filter-tabs { display: flex; gap: 4px; background: var(--off-white); border: 1px solid var(--border); border-radius: 9px; padding: 3px; } .filter-tab { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; border: none; background: transparent; color: var(--text-mute); cursor: pointer; transition: all 0.15s; font-family: var(--font); } .filter-tab.active { background: var(--white); color: var(--text-main); box-shadow: var(--shadow-sm); } .btn-add-user { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; background: var(--steel); color: white; border: none; border-radius: 9px; font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; transition: all 0.15s; white-space: nowrap; } .btn-add-user:hover { background: #5689B8; box-shadow: 0 4px 12px rgba(72,120,164,0.3); } /* user table */ .user-table-wrap { background: var(--white); border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; } .user-table { width: 100%; border-collapse: collapse; } .user-table th { background: var(--off-white); padding: 11px 16px; text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-mute); border-bottom: 1px solid var(--border); white-space: nowrap; } .user-table td { padding: 13px 16px; font-size: 13px; color: var(--text-main); border-bottom: 1px solid var(--border); vertical-align: middle; } .user-table tr:last-child td { border-bottom: none; } .user-table tr:hover td { background: rgba(72,120,164,0.03); } .user-name-cell { display: flex; align-items: center; gap: 10px; } .user-table-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: white; flex-shrink: 0; } .user-full-name { font-weight: 600; font-size: 13.5px; } .user-email-sub { font-size: 11.5px; color: var(--text-mute); margin-top: 1px; } .access-level-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 5px; text-transform: uppercase; } .access-level-tag.csuite { background: rgba(31,39,52,0.08); color: var(--navy); } .access-level-tag.cco { background: rgba(72,120,164,0.12); color: var(--steel); } .access-level-tag.staff { background: rgba(145,177,177,0.15); color: #4A7272; } /* access toggle */ .toggle-wrap { display: flex; align-items: center; gap: 8px; } .toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-track { position: absolute; inset: 0; border-radius: 11px; background: var(--border); cursor: pointer; transition: background 0.2s; } .toggle input:checked + .toggle-track { background: #4CAF85; } .toggle-track::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: white; top: 3px; left: 3px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .toggle input:checked + .toggle-track::after { transform: translateX(18px); } .toggle-label { font-size: 12px; font-weight: 600; color: var(--text-mute); } .toggle input:checked ~ .toggle-label { color: #4CAF85; } .user-actions { display: flex; align-items: center; gap: 6px; } .action-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-mute); transition: all 0.15s; } .action-btn:hover { background: var(--off-white); color: var(--text-main); border-color: var(--text-mute); } .action-btn.danger:hover { background: rgba(232,84,84,0.08); color: #E85454; border-color: rgba(232,84,84,0.3); } /* ─── MODAL ───────────────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(31,39,52,0.55); backdrop-filter: blur(4px); z-index: 500; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.open { display: flex; animation: fadeIn 0.2s ease; } .modal { background: var(--white); border-radius: 16px; width: 100%; max-width: 500px; box-shadow: var(--shadow-lg); overflow: hidden; } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .modal-title { font-size: 16px; font-weight: 700; color: var(--text-main); } .modal-close { margin-left: auto; width: 30px; height: 30px; border-radius: 7px; border: none; background: var(--off-white); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-mute); font-size: 18px; line-height: 1; transition: background 0.15s; } .modal-close:hover { background: var(--border); } .modal-body { padding: 20px 24px; } .modal-form-group { margin-bottom: 16px; } .modal-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; } .modal-input, .modal-select { width: 100%; border: 1.5px solid var(--border); border-radius: 9px; padding: 10px 14px; font-size: 13.5px; font-family: var(--font); color: var(--text-main); outline: none; background: var(--white); transition: border-color 0.15s; appearance: none; } .modal-input:focus, .modal-select:focus { border-color: var(--steel); } .modal-error { display: none; font-size: 12px; color: #E85454; margin-top: 5px; font-weight: 500; } .modal-error.show { display: block; } .modal-footer { padding: 16px 24px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; } .btn-cancel { padding: 9px 18px; border-radius: 9px; border: 1.5px solid var(--border); background: transparent; color: var(--text-sub); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.15s; } .btn-cancel:hover { background: var(--off-white); } .btn-save { padding: 9px 22px; border-radius: 9px; border: none; background: var(--steel); color: white; font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; transition: all 0.15s; } .btn-save:hover { background: #5689B8; } /* confirm delete modal */ .modal.danger .modal-header { border-bottom-color: rgba(232,84,84,0.15); } .btn-delete { padding: 9px 22px; border-radius: 9px; border: none; background: #E85454; color: white; font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; transition: all 0.15s; } .btn-delete:hover { background: #D44040; } .admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .admin-stat-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow-sm); } .admin-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; } .admin-stat-value { font-size: 24px; font-weight: 800; color: var(--text-main); } .admin-stat-sub { font-size: 11.5px; color: var(--text-sub); margin-top: 2px; } .locked-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--text-mute); background: var(--off-white); border: 1px solid var(--border); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.3px; }
Sandbox Environment
This email address isn't recognized. Contact Lanier Meeks Yi to request access.
// ─── STATE ──────────────────────────────────────────────────────── let currentRole = 'cco'; const ROLES = { staff: { name: 'Kendra Marcus', initials: 'KM', title: 'Primary Therapist · LMSW', nav: ['dashboard', 'scorecards', 'training'] }, cco: { name: 'Lanier Meeks Yi', initials: 'LY', title: 'Chief Clinical Officer · LPC', nav: ['dashboard', 'audit', 'scorecards', 'reports', 'exec-dashboard', 'training', 'vault', 'staff'] }, csuite: { name: 'Ryan Lichterman', initials: 'RL', title: 'CEO · CADC-CAA', nav: ['dashboard', 'exec-dashboard', 'vault', 'staff'] } }; const NAV_CONFIG = { dashboard: { label: 'Dashboard', icon: homeIcon(), section: 'Overview' }, audit: { label: 'Audit Engine', icon: auditIcon(), section: 'Modules', badge: 'Phase 2', badgeClass: 'phase' }, scorecards: { label: 'Scorecards', icon: scoreIcon(), section: null, badge: 'Phase 3', badgeClass: 'phase' }, reports: { label: 'Reports', icon: reportIcon(), section: null, badge: 'Phase 3', badgeClass: 'phase' }, 'exec-dashboard':{ label: 'Exec Dashboard', icon: dashIcon(), section: null, badge: 'Phase 4', badgeClass: 'phase' }, training: { label: 'Training Center', icon: trainingIcon(), section: null, badge: 'Phase 5', badgeClass: 'phase' }, vault: { label: 'JC Vault', icon: vaultIcon(), section: 'Admin', badge: 'Phase 6', badgeClass: 'phase' }, staff: { label: 'Staff Roster', icon: staffIcon(), section: null } }; // ─── STAFF DATA ─────────────────────────────────────────────────── const STAFF = [ { name: 'Ryan Lichterman', role: 'Co-founder & CEO', dept: 'executive', cred: 'CADC-CAA' }, { name: 'Greg Holden', role: 'COO', dept: 'executive', cred: 'LMFT' }, { name: 'Lanier Meeks Yi', role: 'Chief Clinical Officer', dept: 'executive', cred: 'LPC, CPCS, CMAC' }, { name: 'Mosammat Alam', role: 'Associate Clinical Dir.', dept: 'executive', cred: 'LPC' }, { name: 'Tara Dozier', role: 'PMHNP-BC', dept: 'medical', cred: 'PMHNP-BC' }, { name: 'Kambiz Aflatoon', role: 'Primary Physician', dept: 'medical', cred: 'DO', type: 'Contractor' }, { name: 'Kendra Marcus', role: 'Primary Therapist', dept: 'clinical', cred: 'LMSW' }, { name: 'Anthony Deetion', role: 'Primary Therapist', dept: 'clinical', cred: 'M.Ed' }, { name: 'Dorothy Booker', role: 'Primary Therapist', dept: 'clinical', cred: 'MSW' }, { name: 'Lauren Magana', role: 'Primary Therapist', dept: 'clinical', cred: 'LMSW' }, { name: 'Sara Schondel', role: 'Case Manager', dept: 'clinical', cred: 'CAC' }, { name: 'Elizabeth Luther', role: 'Case Manager', dept: 'clinical', cred: '' }, { name: 'Loren LaFleur', role: 'Case Manager', dept: 'clinical', cred: 'BS' }, { name: "Bre'iera Moore", role: 'Case Manager', dept: 'clinical', cred: 'BA' }, { name: 'Melissa Bennett', role: 'Director of Admissions', dept: 'admissions', cred: '' }, { name: 'Misty Weiland', role: 'Admissions Coordinator', dept: 'admissions', cred: '' }, { name: 'Vincent Salvitti', role: 'Admissions Coordinator', dept: 'admissions', cred: '' }, { name: 'Kerry Jividen', role: 'Admissions Coordinator', dept: 'admissions', cred: '' }, { name: 'Dominique Whaley', role: 'BHT / Intake', dept: 'operations', cred: '' }, { name: 'Christian Gordon', role: 'BHT', dept: 'operations', cred: '' }, { name: 'Stephanie Rosenberg',role: 'Group Facilitator', dept: 'contractor', cred: 'AMFT' }, { name: 'Bryan Smith', role: 'Group Facilitator', dept: 'contractor', cred: 'CAADC' }, { name: 'Tiesha Farley', role: 'Group Facilitator', dept: 'contractor', cred: 'MSW' }, { name: 'Susan Morley', role: 'Group Facilitator', dept: 'contractor', cred: '' }, { name: 'Laura Acosta', role: 'Group Facilitator', dept: 'contractor', cred: 'CADC-T' }, ]; const DEPT_COLORS = { executive: ['#1F2734','#2A3A50'], medical: ['#2E7D5E','#3D9B78'], clinical: ['#4878A4','#5689B8'], admissions: ['#4A7272','#5A8888'], operations: ['#8A6020','#B07A28'], contractor: ['#5A4A7A','#7060A0'], }; // ─── ICONS ──────────────────────────────────────────────────────── function homeIcon() { return ``; } function auditIcon() { return ``; } function scoreIcon() { return ``; } function reportIcon() { return ``; } function dashIcon() { return ``; } function trainingIcon() { return ``; } function vaultIcon() { return ``; } function staffIcon() { return ``; } // ─── HELPERS ───────────────────────────────────────────────────── function clearDenied() { document.getElementById('access-denied').classList.remove('show'); } // ─── LOGIN ──────────────────────────────────────────────────────── function doLogin() { const email = document.getElementById('login-email').value.trim().toLowerCase(); const role = EMAIL_ROLES[email]; if (!role) { const el = document.getElementById('access-denied'); el.classList.remove('show'); void el.offsetWidth; // force reflow so shake re-triggers el.classList.add('show'); document.getElementById('login-email').focus(); return; } currentRole = role; const user = ROLES[currentRole]; document.getElementById('user-avatar').textContent = user.initials; document.getElementById('user-name').textContent = user.name; document.getElementById('user-role').textContent = user.title; buildNav(); buildStaffGrid(); buildHeatMap(); document.getElementById('login-screen').style.opacity = '0'; document.getElementById('login-screen').style.transition = 'opacity 0.4s'; setTimeout(() => { document.getElementById('login-screen').style.display = 'none'; document.getElementById('app').style.display = 'flex'; document.getElementById('app').style.opacity = '0'; document.getElementById('app').style.transition = 'opacity 0.3s'; setTimeout(() => { document.getElementById('app').style.opacity = '1'; }, 10); }, 400); navigateTo('dashboard'); } function doLogout() { document.getElementById('app').style.display = 'none'; document.getElementById('login-screen').style.display = 'flex'; document.getElementById('login-screen').style.opacity = '1'; } // ─── NAV BUILD ──────────────────────────────────────────────────── function buildNav() { const user = ROLES[currentRole]; const nav = document.getElementById('sidebar-nav'); nav.innerHTML = ''; let lastSection = null; user.nav.forEach(key => { const cfg = NAV_CONFIG[key]; if (!cfg) return; if (cfg.section && cfg.section !== lastSection) { const lbl = document.createElement('div'); lbl.className = 'nav-section-label'; lbl.textContent = cfg.section; nav.appendChild(lbl); lastSection = cfg.section; } const item = document.createElement('div'); item.className = 'nav-item'; item.dataset.page = key; item.onclick = () => navigateTo(key); let badge = ''; if (cfg.badge) { badge = `${cfg.badge}`; } item.innerHTML = ` ${cfg.icon} ${cfg.label} ${badge} `; nav.appendChild(item); }); } // ─── NAVIGATION ─────────────────────────────────────────────────── function navigateTo(pageKey) { document.querySelectorAll('.page').forEach(p => p.classList.remove('active')); document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active')); const page = document.getElementById('page-' + pageKey); if (page) page.classList.add('active'); document.querySelectorAll('.nav-item').forEach(i => { if (i.dataset.page === pageKey) i.classList.add('active'); }); const titles = { dashboard: ['Compliance Dashboard', 'Week of March 23, 2026'], audit: ['Audit Engine', 'Module 1 — Phase 2'], scorecards: ['Clinician Scorecards', 'Module 2 — Phase 3'], reports: ['Audit Reports', 'Module 3 — Phase 3'], 'exec-dashboard': ['Executive Dashboard', 'Module 4 — Phase 4'], training: ['Training Center', 'Module 5 — Phase 5'], vault: ['JC Documentation Vault', 'Module 7 — Phase 6'], staff: ['Staff Roster', '25 active staff · Locked master list'], }; const t = titles[pageKey] || ['Dashboard', '']; document.getElementById('topbar-title').textContent = t[0]; document.getElementById('topbar-subtitle').textContent = t[1]; } // ─── STAFF GRID ─────────────────────────────────────────────────── function buildStaffGrid() { const grid = document.getElementById('staff-grid'); grid.innerHTML = ''; STAFF.forEach(s => { const initials = s.name.split(' ').map(n => n[0]).filter((_, i, a) => i === 0 || i === a.length - 1).join(''); const colors = DEPT_COLORS[s.dept] || DEPT_COLORS.clinical; const deptLabel = { executive: 'Executive', medical: 'Medical', clinical: 'Clinical', admissions: 'Admissions', operations: 'Operations', contractor: 'Contractor' }; const card = document.createElement('div'); card.className = 'staff-card'; card.innerHTML = `
${initials}
${s.name}
${s.role}${s.cred ? ' · ' + s.cred : ''}
${deptLabel[s.dept] || s.dept}
`; grid.appendChild(card); }); } // ─── HEAT MAP ───────────────────────────────────────────────────── function buildHeatMap() { const container = document.getElementById('heat-map-container'); if (!container) return; const sections = ['BPS','Tx Plan','Gp Notes','CM','Discharge','Outcomes','Clinical Notes']; const clinicians = [ { name: 'K. Marcus', scores: [90, 75, 45, 80, 60, 70, 88] }, { name: 'A. Deetion', scores: [85, 70, 50, 75, 55, 65, 82] }, { name: 'D. Booker', scores: [92, 80, 40, 85, 65, 72, 90] }, { name: 'L. Magana', scores: [80, 68, 55, 70, 58, 68, 85] }, { name: 'S. Schondel', scores: [null, null, null, 88, 70, 75, null] }, { name: 'E. Luther', scores: [null, null, null, 82, 62, 70, null] }, ]; function colorClass(v) { if (v === null) return 'empty'; if (v >= 85) return 'green'; if (v >= 70) return 'lime'; if (v >= 55) return 'amber'; return 'red'; } const cols = `60px repeat(${sections.length}, 1fr)`; // header row let html = `
`; html += `
`; sections.forEach(s => { html += `
${s}
`; }); html += `
`; // data rows clinicians.forEach(c => { html += `
`; html += `
${c.name}
`; c.scores.forEach(v => { const cls = colorClass(v); html += `
`; }); html += `
`; }); // legend html += `
≥85% 70–84% 55–69% <55%
`; container.innerHTML = html; } // ─── INIT ───────────────────────────────────────────────────────── // Nothing to pre-select — role is resolved from email at login