// ========================================================= // PSS:NICU — Screens (ภาษาไทย) // ========================================================= const { useState: uS, useEffect: uE, useMemo: uM } = React; const ROLE_TH = { doctor: 'แพทย์', nurse: 'พยาบาล', admin: 'ผู้ดูแลระบบ' }; function greeting() { const h = new Date().getHours(); if (h < 12) return 'สวัสดีตอนเช้า'; if (h < 17) return 'สวัสดีตอนบ่าย'; return 'สวัสดีตอนเย็น'; } // ===== LOGIN ======================================================= function LoginScreen({ onLogin, lang }) { const [loading, setLoading] = uS(false); const [clicked, setClicked] = uS(false); const [error, setError] = uS(null); const [googleReady, setGoogleReady] = uS(false); const btnRef = React.useRef(null); // Safety reset: if user cancels Google popup, restore button after 500ms of focus return uE(() => { if (!clicked || loading) return; const onFocus = () => { setTimeout(() => { if (!loading) setClicked(false); }, 600); }; window.addEventListener('focus', onFocus); return () => window.removeEventListener('focus', onFocus); }, [clicked, loading]); uE(() => { const init = () => { if (!window.google?.accounts?.id || !btnRef.current) return; google.accounts.id.initialize({ client_id: window.PSS_CLIENT_ID, callback: async (resp) => { setLoading(true); setError(null); try { const res = await fetch(window.PSS_API_URL, { method: 'POST', headers: { 'Content-Type': 'text/plain;charset=utf-8' }, body: JSON.stringify({ action: 'login', token: resp.credential }) }); const data = await res.json(); if (data.status !== 'ok') throw new Error('ไม่พบบัญชีนี้ในระบบ หรือบัญชีถูกระงับ'); sessionStorage.setItem('pss_token', resp.credential); onLogin({ ...data, token: resp.credential }); } catch (err) { setError('ไม่พบบัญชีนี้ในระบบ หรือเกิดข้อผิดพลาด กรุณาลองอีกครั้ง'); setLoading(false); setClicked(false); } } }); google.accounts.id.renderButton(btnRef.current, { type: 'standard', shape: 'pill', theme: 'outline', text: 'signin_with', locale: 'th', size: 'large', width: 280 }); setGoogleReady(true); }; if (window.google?.accounts?.id) { init(); } else { window.addEventListener('load', init, { once: true }); } return () => window.removeEventListener('load', init); }, []); const isBusy = clicked || loading; return (
{/* Fine grain — paper texture */}
{/* Logo — PNG (transparent bg) so no blend mode needed */} PSS:NICU { e.target.style.display = 'none'; }} /> {/* PSS : NICU — single line institutional wordmark */}
PSS:NICU
{/* Tagline — what it actually is (trust + clarity) */}
Parental Stress Scale
ประเมินความเครียดผู้ปกครอง · หอผู้ป่วยทารกแรกเกิด
{/* Sign-in */}
{/* Skeleton — แสดงขณะ Google SDK ยังไม่โหลด */} {!googleReady && !isBusy && (
กำลังโหลด...
)}
setClicked(true)} style={{ minHeight: 44, visibility: isBusy ? 'hidden' : 'visible', pointerEvents: isBusy ? 'none' : 'auto', }} /> {isBusy && (
{loading ? 'กำลังตรวจสอบสิทธิ์' : 'กำลังเชื่อมต่อ Google'}
)}
{/* Buyer hook — for hospitals not yet on the system */} {!isBusy && ( )} {error && (
{error}
)}
{/* Footer — institutional trust signals */}
Valhalla Team · v5.0
); } const bedAbbr = (bed) => { const s = String(bed || ''); return s.startsWith('iso ') ? s.slice(4) : s; }; const bedFs = (bed, size) => { const s = bedAbbr(bed); return s.length > 3 ? size * 0.26 : size * 0.38; }; const fmtDate = (d) => { if (!d) return '—'; try { return new Date(d).toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: '2-digit' }); } catch { return String(d).slice(0, 10); } }; const fmtBy = (by) => by ? (by.includes('@') ? by.split('@')[0] : by) : ''; const daysIn = (admitDate, dayAdmit) => { if (admitDate) { const d = Math.floor((Date.now() - new Date(admitDate)) / 86400000) + 1; return d > 0 ? d : 1; } return Number(dayAdmit) || null; }; // ===== GLOBAL SEARCH ============================================== function GlobalSearch({ families, assessments, thresholds, onOpen, onClose }) { const isMobile = useIsMobile(); const [q, setQ] = uS(''); const [cursor, setCursor] = uS(0); const inputRef = React.useRef(null); uE(() => { inputRef.current?.focus(); }, []); const latestMap = uM(() => { const m = {}; families.forEach(f => { const fa = assessments.filter(a => a.famId === f.famId).sort((a, b) => a.date.localeCompare(b.date)); m[f.famId] = fa[fa.length - 1] || null; }); return m; }, [families, assessments]); const results = uM(() => { const s = q.toLowerCase().trim(); const list = s ? families.filter(f => String(f.bed).toLowerCase().includes(s) || String(f.infantId || '').toLowerCase().includes(s) ) : families; return list.slice(0, 8); }, [q, families]); uE(() => { setCursor(0); }, [q]); const handleKeyDown = (e) => { if (e.key === 'ArrowDown') { e.preventDefault(); setCursor(c => Math.min(c + 1, results.length - 1)); } else if (e.key === 'ArrowUp') { e.preventDefault(); setCursor(c => Math.max(c - 1, 0)); } else if (e.key === 'Enter' && results[cursor]) { onOpen(results[cursor].famId); } else if (e.key === 'Escape') { onClose(); } }; return ( <> {/* Backdrop */}
{/* Modal */}
{/* Search input */}
setQ(e.target.value)} onKeyDown={handleKeyDown} placeholder="ค้นหาเตียง หรือ HN…" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 16, background: 'transparent', color: 'var(--ink)', fontFamily: 'var(--sans)', }} /> {q ? : Esc }
{/* Results list */}
{!q &&
ครอบครัวทั้งหมด ({families.length} ราย)
} {q && results.length === 0 && (
ไม่พบครอบครัวที่ตรงกับ "{q}"
)} {results.map((fam, i) => { const last = latestMap[fam.famId]; const sev = severity(last?.total, thresholds); const days = daysIn(fam.admitDate, fam.dayAdmit); return ( ); })}
{/* Keyboard hints — desktop only */}
{isMobile ? แตะเพื่อเปิด · กด ✕ เพื่อปิด : <>↑↓ เลื่อน↵ เปิดEsc ปิด }
); } // ===== DASHBOARD =================================================== function DashboardScreen({ user, families, assessments, interventions, lang, onOpenFamily, onRoute, thresholds, density }) { const isMobile = useIsMobile(); const enriched = uM(() => families.map((f) => { const fa = assessments.filter((a) => a.famId === f.famId).sort((a, b) => a.date.localeCompare(b.date)); const last = fa[fa.length - 1]; const trend = fa.map((a) => a.total); const isRising = trend.length >= 2 && trend[trend.length - 1] > trend[trend.length - 2]; const fivList = (interventions || []).filter(iv => iv.famId === f.famId).sort((a, b) => b.date.localeCompare(a.date)); const lastInterv = fivList[0] || null; return { fam: f, last, trend, isRising, lastInterv }; }), [families, assessments, interventions]); const highRisk = enriched.filter((e) => e.last && severity(e.last.total, thresholds).key === 'high' || severity(e.last?.total, thresholds).key === 'extreme'); const rising = enriched.filter((e) => e.isRising && e.last); const newToday = enriched.filter((e) => e.fam.dayAdmit <= 2); const avgScore = uM(() => { const all = enriched.filter((e) => e.last).map((e) => e.last.total); return all.length ? Math.round(all.reduce((a, b) => a + b, 0) / all.length) : 0; }, [enriched]); const subAgg = uM(() => { const sums = { ss: 0, ia: 0, pr: 0, sc: 0 }; let n = 0; enriched.forEach((e) => { if (e.last) { n++; for (const k in sums) sums[k] += e.last.subTotals[k]; } }); if (!n) return null; return { ss: Math.round(sums.ss / n), ia: Math.round(sums.ia / n), pr: Math.round(sums.pr / n), sc: Math.round(sums.sc / n) }; }, [enriched]); const priorityList = [...enriched].filter((e) => e.last).sort((a, b) => b.last.total - a.last.total).slice(0, 5); return (
{/* Welcome */}
{new Date(TODAY).toLocaleDateString('th-TH', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}

{greeting()}, {(user.name || fmtBy(user.email)).split(/\s+/)[0]}

{highRisk.length} {highRisk.length === 1 ? 'ราย' : 'ราย'}ต้องการความใส่ใจเป็นพิเศษวันนี้

{/* Stat strip — horizontal scroll on mobile, grid on desktop */} {isMobile ? (
{[ { label: 'ครอบครัวทั้งหมด', value: families.length, suffix: 'ราย', accent: 'var(--ink-2)' }, { label: 'ความเสี่ยงสูง', value: highRisk.length, suffix: '/ ' + families.length, accent: 'var(--sev-high)', hint: highRisk.length > 0 ? 'ติดตามด่วน' : 'ปกติ' }, { label: 'แนวโน้มเพิ่ม', value: rising.length, suffix: 'ราย', accent: 'var(--sev-mod)', hint: 'จากครั้งก่อน' }, { label: 'คะแนนเฉลี่ย', value: avgScore, suffix: '/104', accent: 'var(--terracotta)', hint: `${enriched.filter(e => e.last).length} ราย` }, ].map((c, i) => (
))}
) : (
0 ? 'ควรติดตามด่วนวันนี้' : 'อยู่ในเกณฑ์ปกติ'} /> e.last).length} ราย`} />
)} {/* Severity legend */}
{[ { key: 'none', label: 'ไม่เครียด', color: 'var(--sev-none)', range: '0' }, { key: 'mild', label: 'เล็กน้อย', color: 'var(--sev-mild)', range: `1–${thresholds.mild - 1}` }, { key: 'mod', label: 'ปานกลาง', color: 'var(--sev-mod)', range: `${thresholds.mild}–${thresholds.mod - 1}` }, { key: 'high', label: 'มาก', color: 'var(--sev-high)', range: `${thresholds.mod}–${thresholds.high - 1}` }, { key: 'extreme', label: 'มากที่สุด', color: 'var(--sev-extreme)', range: `${thresholds.high}+` }, ].map(s =>
{s.label} {!isMobile && {s.range}}
)}
{/* Two-column: Priority list + subscale aggregate */}
{/* Priority */}

ความเครียดสูงสุด

{priorityList.length === 0 && (
✓
ไม่มีครอบครัวที่ต้องติดตามด่วน
)}
{priorityList.map((e, i) => { const sev = severity(e.last.total, thresholds); return ( ); })}
{/* Subscale aggregate */}

แหล่งความเครียด

คะแนนเฉลี่ย subscale ของผู้ปกครองทุกราย

{subAgg && }
{' '} รูปแบบที่พบ: รูปลักษณ์ทารกเป็นปัจจัยกดดันสูงสุดอย่างสม่ำเสมอ — ควรพิจารณาจัดการปฐมนิเทศให้ผู้ปกครองในหอผู้ป่วย
{/* Rising trend list */}

แนวโน้มเพิ่มขึ้น

{rising.length} รายที่ต้องระวัง
{rising.length === 0 ?
ไม่มีแนวโน้มเพิ่มขึ้น ดีมากวันนี้
:
{rising.map((e) => { const sev = severity(e.last.total, thresholds); const delta = e.trend[e.trend.length - 1] - e.trend[e.trend.length - 2]; return ( ); })}
}
); } // ===== ADD FAMILY FORM ============================================ const RELATION_OPTIONS = ['มารดา', 'บิดา', 'ผู้ปกครองอื่น']; const KCMH_BEDS = [ '1','2','3','4','5','6','7','8','9','10','11','12', 'iso 1-1','iso 1-2','iso 2-1','iso 2-2','iso 3-1','iso 3-2','iso 3-3','iso 3-4' ]; // Hospital-specific bed list — set window.PSS_BEDS in index.html to override KCMH default const BEDS = window.PSS_BEDS || KCMH_BEDS; function AddFamilyForm({ onSave, onCancel, lang, isMobile }) { const empty = { bed: BEDS[0], infantId:'', ga:'', bw:'', admitDate:'', dx:'', relation: RELATION_OPTIONS[0] }; const [f, setF] = uS(empty); const [saving, setSaving] = uS(false); const set = (k, v) => setF(prev => ({ ...prev, [k]: v })); const valid = !!f.bed; const submit = () => { if (!valid) return; setSaving(true); onSave({ ...f, ga: Number(f.ga) || '', bw: Number(f.bw) || '', famId: 'F' + Date.now(), active: true }); }; const inputStyle = { width: '100%', padding: '9px 12px', border: '1px solid var(--line)', borderRadius: 8, fontSize: 13, background: 'var(--card)', fontFamily: 'var(--sans)' }; const labelStyle = { fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)', display: 'block', marginBottom: 6 }; return (
เพิ่มครอบครัวใหม่
set('infantId', e.target.value)} placeholder="เช่น 1234/69" style={inputStyle} />
set('ga', e.target.value)} placeholder="28" style={inputStyle} />
set('bw', e.target.value)} placeholder="1200" style={inputStyle} />
set('admitDate', e.target.value)} style={inputStyle} />
set('dx', e.target.value)} placeholder="เช่น RDS, ventilator support" style={inputStyle} />
); } // ===== FAMILY LIST ================================================ function FamilyListScreen({ families, assessments, lang, density, thresholds, onOpenFamily, onNewAssessment, user, onAddFamily }) { const isMobile = useIsMobile(); const [q, setQ] = uS(''); const [sortBy, setSortBy] = uS('risk'); const [filter, setFilter] = uS('all'); const [showAddForm, setShowAddForm] = uS(false); const canAddFamily = user?.role !== null; // admin, nurse, doctor ทำได้เท่ากัน const enriched = uM(() => families.map((f) => { const fa = assessments.filter((a) => a.famId === f.famId).sort((a, b) => a.date.localeCompare(b.date)); const last = fa[fa.length - 1]; const trend = fa.map((a) => a.total); const isRising = trend.length >= 2 && trend[trend.length - 1] > trend[trend.length - 2]; return { fam: f, last, trend, isRising }; }), [families, assessments]); const filtered = enriched.filter((e) => { if (q) { const s = q.toLowerCase().trim(); const hit = (e.fam.bed + ' ' + e.fam.infantId).toLowerCase().includes(s); if (!hit) return false; } if (filter === 'high') { const k = severity(e.last?.total, thresholds).key; return k === 'high' || k === 'extreme'; } if (filter === 'rising') return e.isRising; if (filter === 'new') return e.fam.dayAdmit <= 3; return true; }); const sorted = [...filtered].sort((a, b) => { if (sortBy === 'risk') return (b.last?.total || 0) - (a.last?.total || 0); if (sortBy === 'bed') return a.fam.bed.localeCompare(b.fam.bed); if (sortBy === 'day') return b.fam.dayAdmit - a.fam.dayAdmit; return 0; }); const filters = [ { k: 'all', label: 'ทั้งหมด', count: enriched.length }, { k: 'high', label: 'ความเสี่ยงสูง', count: enriched.filter((e) => { const k = severity(e.last?.total, thresholds).key; return k === 'high' || k === 'extreme'; }).length }, { k: 'rising', label: 'แนวโน้มเพิ่ม', count: enriched.filter((e) => e.isRising).length }, { k: 'new', label: 'รายใหม่ (≤3 วัน)', count: enriched.filter((e) => e.fam.dayAdmit <= 3).length }]; return (
ครอบครัว ในความดูแล} action={canAddFamily && ( )} /> {showAddForm && isMobile && (
setShowAddForm(false)} /> )} {showAddForm && ( setShowAddForm(false)} onSave={(fam) => { onAddFamily(fam); setShowAddForm(false); }} /> )} {/* Toolbar */}
{/* Search */}
setQ(e.target.value)} placeholder="ค้นหาเตียง หรือ HN" style={{ width: '100%', height: '100%', padding: '0 14px 0 40px', border: '1px solid var(--line)', borderRadius: 10, background: 'var(--card)', fontSize: 14, boxSizing: 'border-box' }} />
{/* Filters + Sort */}
{filters.map((f) => )}
{!isMobile &&
{t('parent', lang)} {t('day', lang)} {t('last', lang)} {t('score', lang)} {t('trend', lang)} · {t('risk', lang)}
} {sorted.length === 0 && (
🏥
{enriched.length === 0 ? 'ยังไม่มีครอบครัวในระบบ' : 'ไม่พบครอบครัวที่ตรงกับการค้นหา'}
{enriched.length === 0 ? 'กด "+ เพิ่มครอบครัว" เพื่อเริ่มต้น' : 'ลองเปลี่ยน filter หรือคำค้นหา'}
)}
{sorted.map((e) => onOpenFamily(e.fam.famId)} /> )}
); } // ===== FAMILY DETAIL ============================================== function FamilyDetailScreen({ famId, families, assessments, interventions, lang, thresholds, showSubscales, onBack, onNewAssessment, onOpenAlert, onSaveNote, onSaveIntervention, carePlan, onUpdateCarePlan }) { const isMobile = useIsMobile(); const fam = families.find((f) => f.famId === famId); const fa = assessments.filter((a) => a.famId === famId).sort((a, b) => a.date.localeCompare(b.date)); const last = fa[fa.length - 1]; const sev = severity(last?.total, thresholds); const interv = interventions.filter((i) => i.famId === famId); const [tab, setTab] = uS('overview'); const [showNote, setShowNote] = uS(false); const [noteText, setNoteText] = uS(''); const [savedNote, setSavedNote] = uS(''); const saveNote = () => { const text = noteText.trim(); if (!text) return; setSavedNote(text); setShowNote(false); if (onSaveNote) onSaveNote(text); }; if (!fam) return null; return (
{/* Breadcrumb */} {/* Hero */}
{fam.bed} HN {fam.infantId}

เตียง {fam.bed}

{(() => { const d = daysIn(fam.admitDate, fam.dayAdmit); return d ? D {d} : null; })()}
{fam.relation} · GA {fam.ga} wk · BW {fam.bw} g {fam.admitDate && · รับ {fmtDate(fam.admitDate)}}
{fam.dx}
คะแนนล่าสุด
{last ? last.total : '—'} /104
{last ? `${fmtDate(last.date)} · ${fmtBy(last.by)}` : 'ยังไม่มีการประเมิน'}
{(sev.key === 'high' || sev.key === 'extreme') && }
{showNote && (
บันทึก — เตียง {fam.bed} · HN {fam.infantId}