/* screens-2.jsx — Vitals, AI Analysis, Doctor Selection, Ticket */
// ────────────────────────────────────────────────────────────
// 4. VITALS — connect to devices and read realtime
// ────────────────────────────────────────────────────────────
function ScreenVitals({ scenario, onNext }) {
const [phase, setPhase] = useState('intro'); // intro → measuring → done
const [progress, setProgress] = useState(0);
const v = scenario.vitals;
const flags = scenario.vitalsFlags || {};
useEffect(() => {
if (phase !== 'measuring') return;
let p = 0;
const t = setInterval(() => {
p += 4;
setProgress(p);
if (p >= 100) { clearInterval(t); setTimeout(() => setPhase('done'), 400); }
}, 80);
return () => clearInterval(t);
}, [phase]);
return (
{phase === 'intro' && (
โปรดทำตามขั้นตอน
ข้ามขั้นตอนนี้
setPhase('measuring')} iconRight="ph-play">เริ่มวัด
)}
{phase === 'measuring' && (
{progress < 30 ? 'กำลังวัดอุณหภูมิ...' :
progress < 60 ? 'กำลังวัดความดันโลหิต...' :
progress < 90 ? 'กำลังวัด SpO₂...' : 'กำลังประมวลผล...'}
โปรดอยู่นิ่ง ๆ ระหว่างการวัด
)}
{phase === 'done' && (
วิเคราะห์ด้วย AI
)}
);
}
function DeviceStep({ n, icon, title, sub, last }) {
return (
);
}
// ────────────────────────────────────────────────────────────
// 5. AI ANALYSIS
// ────────────────────────────────────────────────────────────
function ScreenAI({ scenario, onNext }) {
const [phase, setPhase] = useState('thinking');
useEffect(() => {
const t = setTimeout(() => setPhase('result'), 2400);
return () => clearTimeout(t);
}, []);
const ai = scenario.ai;
const urgencyTone = ai.urgencyLevel >= 4 ? 'danger' : ai.urgencyLevel >= 2 ? 'warning' : 'success';
return (
{phase === 'thinking' && (
กำลังวิเคราะห์ข้อมูลของคุณ...
เชื่อมโยงอาการ + สัญญาณชีพ + ประวัติการรักษา
)}
{phase === 'result' && (
{/* Hero result */}
= 4
? `linear-gradient(135deg, ${K.danger} 0%, #B00808 100%)`
: `linear-gradient(135deg, ${K.primary900} 0%, #1A3A3B 100%)`,
color: '#fff', borderRadius: 24,
position: 'relative', overflow: 'hidden',
}} className="p-5 sm:p-8 md:p-10">
แผนกที่แนะนำ · RECOMMENDED DEPARTMENT
{ai.department}
{ai.deptEn}
{/* Two-column body */}
{ai.conditions.map((c, i) => (
))}
{ai.reasoning.map((r, i) => (
))}
{/* Disclaimer + CTA */}
ปรึกษาเจ้าหน้าที่
= 4 ? 'danger' : 'primary'}>
{ai.urgencyLevel >= 4 ? 'ไป ER ทันที' : 'เลือกแพทย์และนัดหมาย'}
);
}
function ThinkingLine({ label, delay }) {
const [done, setDone] = useState(false);
useEffect(() => { const t = setTimeout(() => setDone(true), delay + 300); return () => clearTimeout(t); }, [delay]);
return (
);
}
function ResultPill({ icon, label, value }) {
return (
);
}
// ────────────────────────────────────────────────────────────
// 6. DOCTOR SELECTION
// ────────────────────────────────────────────────────────────
function ScreenDoctor({ scenario, onNext, selectedDoctor, setSelectedDoctor }) {
return (
{scenario.doctors.map((d, i) => {
const sel = selectedDoctor === i;
return (
setSelectedDoctor(i)} style={{
border: `2px solid ${sel ? K.primary900 : K.line}`,
background: sel ? K.primary050 : '#fff',
display: 'flex', alignItems: 'center', gap: 24,
}}>
{d.name}
{d.soonest &&
{d.emergency ? 'ฉุกเฉิน' : 'พร้อมที่สุด'}
}
{d.spec}
{!d.emergency &&
{sel &&
);
})}
นัดวันอื่น
ยืนยันการนัดหมาย
);
}
// ────────────────────────────────────────────────────────────
// 7. TICKET — printable A5 OPD card
// ────────────────────────────────────────────────────────────
function ScreenTicket({ scenario, onRestart }) {
const T = useT();
const ticketNo = React.useMemo(() => 'A' + String(Math.floor(1000 + Math.random() * 9000)), [scenario.id]);
const now = React.useMemo(() => new Date(), []);
const ai = scenario.ai;
const isER = ai.urgencyLevel >= 4;
const directions = getDirections(scenario);
return (
{isER ? T({ th: 'นำท่านไปยัง ER ด่วน', en: 'Proceed to ER immediately' }) : T({ th: 'เสร็จเรียบร้อย!', en: 'All set!' })}
{isER ? T({ th: 'แสดงบัตรนี้ที่จุดคัดกรอง ER เจ้าหน้าที่จะดูแลทันที', en: 'Show this card at the ER triage point. Staff will assist immediately.' }) : T({ th: 'พิมพ์บัตรและทำตามวิธีไปแผนกด้านล่าง', en: 'Print your card and follow the directions below.' })}
{/* The A5 OPD card — only this prints */}
{/* Body grid */}
{/* LEFT — patient + queue + dept */}
{/* RIGHT — directions + QR */}
{/* Actions — hidden on print */}
{T({ th: 'เริ่มใหม่', en: 'Start over' })}
window.print()} icon="ph-printer">
{T({ th: 'พิมพ์บัตร', en: 'Print card' })}
{T({ th: 'ส่งเข้า LINE', en: 'Send to LINE' })}
);
}
// ── A5 card sub-blocks ─────────────────────────────────────
function OPDCardHeader({ isER, now, ticketNo }) {
return (
OPD Smart Triage Card
Center of Excellence · MorDee × Hospital Group
QUEUE NO.
{ticketNo}
{now.toLocaleDateString('th-TH', { day: '2-digit', month: 'short', year: 'numeric' })} · {now.toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit' })}
);
}
function OPDCardFooter({ now }) {
return (
* บัตรนี้ออกโดย Smart Triage Kiosk · ผลคัดกรองจาก AI ใช้ประกอบการตัดสินใจของแพทย์เท่านั้น
Station 04 · {now.toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
);
}
function PatientBlock({ patient }) {
return (
PATIENT · ข้อมูลผู้ป่วย
{patient.name.th} · {patient.name.en}
HN: {patient.hn.replace('HN ', '')}Age/อายุ: {patient.age}Sex/เพศ: {patient.gender.en} ({patient.gender.th})
{patient.allergy !== '–' && (
)}
);
}
function QueueBlock({ ticketNo, dept, deptEn, wait, isER }) {
return (
DEPARTMENT · แผนก
EST. WAIT · รอประมาณ
{wait.en} · {wait.th}
);
}
function SymptomBlock({ chief, ai }) {
return (
CHIEF COMPLAINT · อาการสำคัญ
”{chief.th}”
”{chief.en}”
AI TRIAGE · {ai.confidence}% confidence
= 4 ? K.dangerBg : ai.urgencyLevel >= 3 ? K.warningBg : K.successBg,
color: ai.urgencyLevel >= 4 ? K.danger : ai.urgencyLevel >= 3 ? K.warning : K.success,
}}>● {ai.urgency.en} · {ai.urgency.th}
{ai.conditions.slice(0, 2).map((c, i) => (
{c.name.en} · {c.prob}%
))}
);
}
function DirectionsBlock({ directions, dept }) {
return (
HOW TO GET THERE · วิธีไปแผนก
From Kiosk Station 04
{directions.steps.map((s, i) => (
{i + 1}
{s.title.en}
{s.title.th}
{s.sub &&
{s.sub.en} · {s.sub.th}
}
))}
);
}
function MiniMap({ directions }) {
// Simple schematic floor map showing kiosk → destination
return (
{/* corridors */}
{/* path */}
KIOSK 04
{/* destination marker */}
{directions.label}
);
}
function QRBlock({ ticketNo, hn }) {
return (
QUEUE QR · ติดตามคิวบนแอป · TRACK ON APP
สแกนด้วยกล้องมือถือ หรือเปิดแอป MorDee · Scan with phone camera or open MorDee app
{ticketNo} · {hn.replace('HN ', '')}
{/* barcode strip */}
{Array.from({ length: 56 }).map((_, i) => (
))}
);
}
function getDirections(scenario) {
const deptKey = scenario.ai.deptKey;
if (deptKey === 'er') return {
label: 'ER', endX: 290, endY: 75,
path: 'M 32 45 L 155 45 L 155 71 L 264 71',
steps: [
{ title: { en: 'Notify staff at the triage point immediately', th: 'แจ้งเจ้าหน้าที่จุด Triage ทันที' },
sub: { en: 'Show this card — staff will escort you to the ER', th: 'ยกบัตรนี้ขึ้นให้เห็น · เจ้าหน้าที่จะนำตัวเข้า ER' } },
{ title: { en: 'Take the elevator down to floor 1', th: 'ลงลิฟต์ไปชั้น 1' },
sub: { en: 'Use the nearest lift; a nurse will guide you', th: 'ใช้ลิฟต์ใกล้สุด · มีพยาบาลพาทาง' } },
{ title: { en: 'Enter the ER through the back door', th: 'เข้า ER ทางประตูด้านหลัง' },
sub: { en: 'Bay 2 · Emergency team will be ready', th: 'Bay 2 · มีทีมแพทย์ฉุกเฉินรออยู่' } },
],
};
if (deptKey === 'ortho') return {
label: 'ORTHO', endX: 230, endY: 21,
path: 'M 32 45 L 155 45 L 155 19 L 200 19',
steps: [
{ title: { en: 'Walk straight along the main corridor', th: 'เดินตรงไปตามทางเดินหลัก' },
sub: { en: 'Blue corridor · pass the Lab on your right', th: 'ทางเดินสีฟ้า · ผ่านห้อง Lab ทางขวา' } },
{ title: { en: 'Turn right at the main junction', th: 'เลี้ยวขวาที่ทางแยกใหญ่' },
sub: { en: 'Sign reads “Orthopedics · Floor 2”', th: 'มีป้ายชี้ “Orthopedics ชั้น 2”' } },
{ title: { en: 'Take the escalator to floor 2', th: 'ขึ้นบันไดเลื่อนชั้น 2' },
sub: { en: 'Orthopedics dept · examination room 7', th: 'แผนกกระดูกและข้อ · ห้องตรวจที่ 7' } },
{ title: { en: 'Show this card at the service desk', th: 'แสดงบัตรนี้ที่จุดบริการ' },
sub: { en: `Wait for your name · ${scenario.ai.wait.en}`, th: `รอเรียกชื่อ · ${scenario.ai.wait.th}` } },
],
};
// default → Internal Medicine
return {
label: 'IPD/MED', endX: 290, endY: 21,
path: 'M 32 45 L 155 45 L 155 19 L 264 19',
steps: [
{ title: { en: 'Walk straight along the main corridor', th: 'เดินตรงไปตามทางเดินหลัก' },
sub: { en: 'About 30 m, past the pharmacy', th: 'ประมาณ 30 เมตร · ผ่านห้องเภสัช' } },
{ title: { en: 'Turn right at the junction', th: 'เลี้ยวขวาที่ทางแยก' },
sub: { en: 'Toward the “Internal Medicine” sign', th: 'ตรงป้าย “อายุรกรรม Internal Medicine”' } },
{ title: { en: 'Go up to floor 2 (stairs or lift)', th: 'ขึ้นชั้น 2 (บันไดหรือลิฟต์)' },
sub: { en: 'Nearest lift is left of the restrooms', th: 'ลิฟต์ใกล้สุดอยู่ทางซ้ายหลังห้องน้ำ' } },
{ title: { en: 'Show this card at the counter', th: 'แสดงบัตรที่เคาน์เตอร์' },
sub: { en: `Wait for your name · ${scenario.ai.wait.en}`, th: `รอเรียกชื่อ · ${scenario.ai.wait.th}` } },
],
};
}
function FakeQR() {
// simple fake QR pattern
const cells = [];
const seed = 'MorDee-Triage-2026';
let h = 0; for (const c of seed) h = (h * 31 + c.charCodeAt(0)) >>> 0;
for (let i = 0; i < 21 * 21; i++) {
h = (h * 1103515245 + 12345) >>> 0;
cells.push(h % 2);
}
// force position markers
const isCorner = (r, c) => (r < 7 && c < 7) || (r < 7 && c > 13) || (r > 13 && c < 7);
const cornerOn = (r, c) => {
const inBox = (r === 0 || r === 6 || c === 0 || c === 6 || (r >= 2 && r <= 4 && c >= 2 && c <= 4));
return inBox ? 1 : 0;
};
return (
{cells.map((v, i) => {
const r = Math.floor(i / 21), c = i % 21;
let on = v;
if (isCorner(r, c)) {
const lr = r > 13 ? r - 14 : r;
const lc = c > 13 ? c - 14 : c;
on = cornerOn(lr, lc);
}
return on ? : null;
})}
);
}
window.ScreenVitals = ScreenVitals;
window.ScreenAI = ScreenAI;
window.ScreenDoctor = ScreenDoctor;
window.ScreenTicket = ScreenTicket;
