// Shared components: icons, sidebar, topbar, level chips, helpers // All components exported to window for cross-file access. const { useState, useEffect, useMemo, useRef } = React; const D = window.LR_DATA; // ====== Icons (inline SVG) ====== const Icon = ({ name, size = 18 }) => { const paths = { dashboard: <>, matrix: <>, calendar: <>, clipboard: <>, alert: <>, chart: <>, user: <>, users: <>, book: <>, plus: <>, search: <>, bell: <>, settings: <>, filter: <>, download: <>, check: , edit: <>, chevronRight: , chevronDown: , clock: <>, sparkles: <>, pulse: , target: <>, signature: <>, moon: , sun: <>, logout: <>, }; return ( ); }; // ====== Helpers ====== function initials(name) { const t = name.replace(/^(น\.ส\.|นาง|นาย)/, '').trim(); return t.slice(0, 1); } function levelClass(score) { return `lvl-${Math.max(1, Math.min(5, score))}`; } function levelLabel(score) { const lv = D.LEVELS.find(l => l.n === score); return lv ? lv.label : '—'; } function staffName(id) { if (id === 'group') return 'ทีมพยาบาล (Group)'; const s = D.staffById(id); return s ? `${s.title}${s.name}` : id; } function staffShort(id) { if (id === 'group') return 'Group'; const s = D.staffById(id); return s ? s.name : id; } function avg(arr) { return arr.length ? arr.reduce((a,b)=>a+b,0)/arr.length : 0; } // ====== LevelChip ====== const LevelChip = ({ level, size = 'sm' }) => { let lv; if (typeof level === 'string') { lv = D.levelById(level); } else if (typeof level === 'number') { const n = Math.max(1, Math.min(5, Math.round(level))); lv = D.LEVELS.find(l => l.n === n); } if (!lv) return null; return {lv.label}; }; // ====== Avatar ====== const Avatar = ({ name, size = 30 }) => (

{initials(name)}

); // ====== Role helpers ====== const ROLE_LEVELS = { dept_head: 5, unit_head: 4, shift_head: 3, supervisor: 2, supervisee: 1, admin: 5 }; // role can be a string OR a JSON-array string e.g. '["dept_head","supervisor"]' function parseRoles(role) { if (!role) return ['supervisee']; if (Array.isArray(role)) return role; try { const p = JSON.parse(role); if (Array.isArray(p)) return p; } catch {} return [role]; } function roleLevel(role) { return Math.max(...parseRoles(role).map(r => ROLE_LEVELS[r] || 1)); } function isSupervisorRole(role) { return roleLevel(role) >= 2; } function primaryRole(role) { const roles = parseRoles(role); return roles.reduce((best, r) => (ROLE_LEVELS[r]||1) > (ROLE_LEVELS[best]||1) ? r : best, roles[0]); } // ====== Sidebar ====== const Sidebar = ({ current, onNav, role }) => { const lv = roleLevel(role); const isSupRole = lv >= 2; // minLevel: 2=supervisor+, 3=shift_head+, 4=unit_head+, 5=dept_head only const supervisorItems = [ { id: 'dashboard', label: 'Dashboard', icon: 'dashboard', minLevel: 2 }, { id: 'matrix', label: 'Skill Matrix', icon: 'matrix', minLevel: 2, badge: String(D.STAFF.length) }, { id: 'planning', label: 'แผน & ปฏิทิน', icon: 'calendar', minLevel: 2 }, { id: 'evaluation', label: 'หัวข้อนิเทศ', icon: 'clipboard', minLevel: 4 }, { id: 'records', label: 'บันทึกการนิเทศ', icon: 'clipboard', minLevel: 2 }, { id: 'cases', label: 'Case Review', icon: 'alert', minLevel: 2, badge: String(D.CASES.length) }, { id: 'analytics', label: 'Analytics', icon: 'chart', minLevel: 3 }, { id: 'staff', label: 'บุคลากร', icon: 'users', minLevel: 4 }, { id: 'knowledge', label: 'คลังความรู้', icon: 'book', minLevel: 2 }, { id: 'users', label: 'จัดการผู้ใช้งาน', icon: 'settings', minLevel: 4 }, ].filter(it => it.minLevel <= lv); const superviseeItems = [ { id: 'mydashboard', label: 'หน้าฉัน', icon: 'dashboard' }, { id: 'myplan', label: 'แผนพัฒนาฉัน', icon: 'target' }, { id: 'records', label: 'บันทึกการนิเทศ', icon: 'clipboard' }, { id: 'knowledge', label: 'คลังความรู้', icon: 'book' }, ]; const list = isSupRole ? supervisorItems : superviseeItems; const roleLabel = { dept_head: 'หัวหน้ากลุ่มงาน', unit_head: 'หัวหน้างาน', shift_head: 'หัวหน้าเวร', supervisor: 'ผู้นิเทศ', supervisee: 'ผู้รับการนิเทศ', admin: 'ผู้ดูแลระบบ', }[role] || role; return ( ); }; // ====== Topbar ====== const Topbar = ({ title, crumbs, role, onRoleChange, user, onTweaksToggle }) => { const u = D.staffById(user); return (

{crumbs &&

{crumbs}

}

{title}

{u && (

{u.title}{u.name.split(' ')[0]}

{D.POSITIONS[u.pos].replace('พยาบาลวิชาชีพ', 'พว.')}

)}

); }; // ====== Radar chart (SVG) ====== const Radar = ({ axes, values, size = 240, maxVal = 5 }) => { const cx = size / 2, cy = size / 2, r = size / 2 - 30; const n = axes.length; const angle = (i) => -Math.PI / 2 + (i * 2 * Math.PI) / n; const point = (i, v) => { const a = angle(i); const rr = (v / maxVal) * r; return [cx + rr * Math.cos(a), cy + rr * Math.sin(a)]; }; const rings = [1, 2, 3, 4, 5]; return ( ); }; // ====== Donut chart ====== const Donut = ({ segments, size = 140, thickness = 18 }) => { const r = (size - thickness) / 2; const c = 2 * Math.PI * r; const total = segments.reduce((s, x) => s + x.value, 0) || 1; let off = 0; return ( ); }; // ====== Bar chart (compact) ====== const BarChart = ({ data, height = 140, max }) => { const m = max || Math.max(...data.map(d => d.value)); return (

{data.map((d, i) => (

{d.label}

))}

); }; // ====== Line chart ====== const LineChart = ({ data, width = 360, height = 120 }) => { const max = Math.max(...data) * 1.1; const min = Math.min(...data) * 0.9; const w = width, h = height; const stepX = w / (data.length - 1); const pts = data.map((v, i) => [i * stepX, h - ((v - min) / (max - min || 1)) * (h - 10) - 5]); const path = 'M ' + pts.map(p => p.join(',')).join(' L '); const area = `M 0,${h} L ` + pts.map(p => p.join(',')).join(' L ') + ` L ${w},${h} Z`; return ( ); }; Object.assign(window, { Icon, LevelChip, Avatar, Sidebar, Topbar, Radar, Donut, BarChart, LineChart, initials, levelClass, levelLabel, staffName, staffShort, avg, parseRoles, roleLevel, primaryRole, isSupervisorRole, });