setQ(e.target.value)} placeholder="搜尋機構名稱或地區" style={{ border: 'none', outline: 'none', background: 'transparent', fontFamily: 'inherit', fontSize: 13.5, width: '100%' }} />

{filters.map((x) => )}

共 {list.length} 家

{list.map((m) => ( window.__drawer('inst', m)}> ))}

{m.name[0]}{m.name}

{m.type}

{m.region}

{m.members}

{m.devices}

{C.fmt(m.monthly)}

{m.online}%

); } // ---------- ANALYTICS ---------- function Analytics() { return (

初評 → 近期 · 全平台平均}>

2026 年迄今}> 花蓮 · 嘉義}>

※ 功能三力為感測器硬數據，心理社會三力為參與行為推估值；所有數據用於服務優化與成效溝通，非醫療診斷。

); } // ---------- INTEGRATIONS ---------- function Integrations() { const online = C.ONLINE_DEVICES; const live = C.VENDORS_INT.filter((v) => v.api === '已介接').length; const stat = [ { n: C.VENDORS_INT.length, l: '整合教具型號', icon: 'cube' }, { n: C.VENDOR_COUNT, l: '合作廠商', icon: 'handshake' }, { n: C.fmt(online), l: '在線裝置', icon: 'broadcast' }, { n: live + ' / ' + C.VENDORS_INT.length, l: '完成介接', icon: 'plugs-connected' }, ]; return (

{stat.map((s, i) => (

{s.n}

{s.l}

))}

統一數據規格 · 跨廠商接入} pad={0}>

{C.VENDORS_INT.map((v, i) => ( window.__drawer('tool', v)}> ))}

{v.model}

{v.vendor}

{v.cat}

{v.fmt}

{v.units || '—'}

{v.uses ? C.fmt(v.uses) : '—'}

); } // ---------- LLM 報告品質 / 反饋 ---------- function Llm() { const rIcon = { up: ['thumbs-up', 'var(--good)'], edit: ['pencil-simple', 'var(--warn)'], down: ['thumbs-down', 'var(--bad)'] }; return (

{C.LLM_KPIS.map((s, i) => )}

機構老師採納 AI 建議比例} style={{ gridColumn: 'span 2', minWidth: 0 }}>

老師最常修改 / 重寫之處}>

老師的覆核不只把關品質，更是模型的學習樣本：每一次採用、微調、重寫都會回饋，讓下一份報告更準確。

{[ { ic: 'thumbs-up', c: 'var(--good)', t: '直接採用', d: '視為正樣本，強化既有生成方向' }, { ic: 'pencil-simple', c: 'var(--warn)', t: '微調後採納', d: '記錄修改重點，做局部校正' }, { ic: 'thumbs-down', c: 'var(--bad)', t: '需重寫', d: '標記為負樣本，重點重訓判讀邏輯' }, ].map((s, i) => (

{s.t}

{s.d}

))}

由機構老師覆核 · 低信心度自動標記} pad={0} style={{ marginTop: 16 }}>

{C.LLM_QUEUE.map((q, i) => { const ri = rIcon[q.rating]; return ( window.__drawer('report', q)}> ); })}

{q.who}

{q.inst}

{q.type}

= 75 ? 'var(--good)' : q.conf >= 65 ? 'var(--warn)' : 'var(--bad)' }} />

{q.conf}%

{q.by ? q.by + ' 老師' : —}

※ 每份 AI 報告皆保留資料查詢日誌與推理軌跡；信心度低於門檻者自動標記，由機構老師覆核後才採納。平台僅彙整覆核狀態，不代替老師覆核。

); } // ---------- 報告中心 ---------- function Reports() { return (

依各縣市轄區格式 · AI 協助彙整} pad={0}>

{C.REPORTS.map((r, i) => ( window.__drawer('doc', r)}> ))}

{r.title}

{r.inst}

{r.period}

{r.juri}

{r.by}

{r.date}

); } // ---------- AI / 模型成本 ---------- function Cost() { const models = C.MODEL_COSTS; const total = models.reduce((a, m) => a + m.cost, 0); const donut = models.map((m) => ({ label: m.model.replace('Claude ', ''), value: m.cost, color: m.color })); return (

{C.AI_COST_KPIS.map((s, i) => )}

2026 年迄今 · 每月 NT$} style={{ gridColumn: 'span 2', minWidth: 0 }}>

本月 · 依用途} pad={0} style={{ marginTop: 16 }}>

{models.map((m, i) => { const share = Math.round(m.cost / total * 100); return ( window.__drawer('model', { ...m, share, total })}> ); })}

{m.model}	{m.use}	{C.fmt(m.calls)}	{m.tokIn}	{m.tokOut}	NT${C.fmt(m.cost)}	{share}%
合計					NT${C.fmt(total)}	100%

2026 迄今} style={{ marginTop: 16 }}>

※ 成本為平台 LLM / AI 服務用量估算，涵蓋模型推論、語意檢索與語音轉文字；隨機構與報告量成長，並透過模型分工（複雜用 Opus、量大用 Sonnet、分類用 Haiku）控管單位成本。

); } const TITLES = { overview: ['營運總覽', '跨機構即時營運概況'], institutions: ['合作機構', '全平台合作之照護 / 日照機構'], analytics: ['數據分析', '跨機構成效與使用數據'], integrations: ['整合工具', '已接入平台的教具與廠商'], llm: ['AI 報告品質', 'LLM 報告產出、機構老師覆核與採納'], reports: ['報告中心', '評鑑與成效報告產出狀態'], cost: ['AI 成本', '模型用量、成本明細與導入時間軸'], }; const VIEWS = { overview: Overview, institutions: Institutions, analytics: Analytics, integrations: Integrations, llm: Llm, reports: Reports, cost: Cost }; // ---------- 抽屜（點擊詳情）共用小元件 ---------- function DStat({ label, value, sub }) { return (

{value}{sub && {sub}}

{label}

); } function DBtn({ children, onClick, primary }) { return ; } function DCode({ children }) { return

{children}

; } function DNote({ children }) { return

{children}

; } const confColor = (c) => c >= 75 ? 'var(--good)' : c >= 65 ? 'var(--warn)' : 'var(--bad)'; function buildDrawer(d) { if (!d) return {}; const close = () => window.__drawer(null); if (d.type === 'inst') { const m = d.data; return { title: m.name, sub: m.type + ' · ' + m.region, body: (

導入起 {m.since}

樂齡六力改善（初評 → 近期）整合裝置 {C.VENDORS_INT.slice(0, 4).map((v, i) => )} 近期動態

window.__go('analytics')}>查看數據分析 window.__loadfail('季度成效報告產生中…')}>產生季度報告

), }; } if (d.type === 'tool') { const v = d.data; const testing = v.api !== '已介接'; return { title: v.model, sub: v.vendor + ' · ' + v.cat, body: (

介接資訊資料欄位 {'{\n "member_id": "...",\n "device": "' + v.model + '",\n "session_at": "2026-06-22T09:14+08",\n "duration_s": 420,\n "score": 78,\n "domain": "' + v.cat + '"\n}'} {testing && 此教具仍在介接測試中，數據尚未納入正式統計。}

window.__go('integrations')}>整合總覽 testing ? window.__toast('已重送介接測試') : window.__loadfail('API 文件載入中…')}>{testing ? '重送介接測試' : '檢視 API 文件'}

), }; } if (d.type === 'report') { const q = d.data; const steps = ['擷取該長者前後測數據與教具互動紀錄', '比對同級別基準與個人歷史趨勢', '生成六力變化敘述與個案建議草稿', '自評信心度並標記需機構老師確認之處']; return { title: q.who + ' · ' + q.type, sub: q.inst + ' · AI 產出報告', body: (

模型信心度 {q.conf}%

推理軌跡

{i + 1} {s}

資料來源機構老師覆核 {q.status === '待覆核' ? (

window.__toast('已提醒 ' + q.inst + ' 老師覆核')}>提醒機構老師覆核

) : (

覆核結果

window.__loadfail('正在開啟完整報告…')}>檢視完整報告

)} {q.status !== '待覆核' && (

老師修改重點 · 回饋 AI 學習 {q.cat &&

}

{q.issue}

{q.rating === 'up' ? '已作為正樣本回饋模型' : q.rating === 'edit' ? '修改重點已回饋模型做局部校正' : '已標記為負樣本，重點重訓判讀邏輯'}

)}

※ AI 報告為輔助參考，由機構老師覆核後採用；老師的每次修改與重寫都會回饋模型用於學習。平台僅監看覆核狀態、不代替覆核，非醫療診斷。

), }; } if (d.type === 'doc') { const r = d.data; const points = ['機構整體六力變化與參與率摘要', '重點個案前後測成效對照', '依' + r.juri + '評鑑指標對應佐證', '次季服務建議']; return { title: r.title, sub: r.inst + ' · ' + r.period, body: (

狀態

報告內容

window.__loadfail('正在準備 PDF…')}>下載 PDF window.__loadfail('正在準備 Word…')}>下載 Word

※ 報告由 AI 協助彙整、專業人員覆核；所有數據用於服務優化與成效溝通，非醫療診斷。

), }; } if (d.type === 'model') { const m = d.data; return { title: m.model, sub: m.use, body: (

用量成本控管

依用途分工選用最適模型：複雜推理用 Opus、量大報告用 Sonnet、分類與信心度評估用 Haiku，以控管單位成本。

window.__go('cost')}>成本總覽 window.__loadfail('正在匯出用量明細…')}>檢視用量明細

), }; } return {}; } function App() { const [view, setView] = useA('overview'); const [drawer, setDrawer] = useA(null); const [toast, setToast] = useA(null); const [nav, setNav] = useA(false); // 鏡像最新狀態給 popstate 用（瀏覽器/Safari 上一頁） const drawerRef = React.useRef(null); drawerRef.current = drawer; const viewRef = React.useRef('overview'); viewRef.current = view; const pushHist = () => { try { history.pushState({ lumo: 1 }, ''); } catch (e) {} }; window.__go = (v) => { setNav(false); setDrawer(null); setView(v); if (v !== 'overview') pushHist(); }; window.__drawer = (type, data) => { if (type) { setDrawer({ type, data }); pushHist(); } else setDrawer(null); }; window.__toast = (m) => { setToast({ msg: m, mode: 'ok' }); clearTimeout(window.__tt); window.__tt = setTimeout(() => setToast(null), 2400); }; window.__loadfail = (m) => { setToast({ msg: m, mode: 'load' }); clearTimeout(window.__tt); window.__tt = setTimeout(() => setToast(null), 3200); }; React.useEffect(() => { const onPop = () => { if (drawerRef.current) setDrawer(null); else if (viewRef.current !== 'overview') setView('overview'); }; window.addEventListener('popstate', onPop); return () => window.removeEventListener('popstate', onPop); }, []); const V = VIEWS[view]; const dd = buildDrawer(drawer); return (

window.__go(v)} /> window.__go(v)} onClose={() => setNav(false)} />

setNav(true)} />

setDrawer(null)}>{dd.body} {toast && (

{toast.mode === 'load' ? : } {toast.msg}

)}

); } ReactDOM.createRoot(document.getElementById('root')).render();