/* ============================================================================ ReMeDe Weight Journey — หน้าจอฝั่งคลินิก (C1–C9) ไฟล์นี้ทำหน้าที่ "แสดงผล + state ของหน้าจอ" เท่านั้น - ข้อมูลทั้งหมดมาจาก window.RMD_API (ui_kits/api.js) — ห้ามเรียก supabase ตรงนี้ - กฎธุรกิจ (แปลงคลิก→mg, สัญญาณเตือน, จัดรูปแบบตัวเลข) อยู่ที่ window.RMDLogic - ทุกหน้าที่ดึงข้อมูลต้องมีครบสามสถานะ: กำลังโหลด / ว่าง / error พร้อมปุ่มลองใหม่ ตอนนี้ฐานข้อมูลจริงยังแทบว่าง สถานะ "ว่าง" คือสิ่งที่คนจะเห็นบ่อยที่สุด ============================================================================ */ const NS = window.ReMeDeWeightJourneyDesignSystem_3d7adc; const { Button, IconButton, Card, Badge, Icon, FormField, Input, Select, Switch, SegmentedControl, NumberStepper, MetricStat, DoseReadout, PenGauge, WeightDoseChart, DataTable, TitrationTimeline, Callout, Toast, EmptyState, DangerConfirm, Dialog, SideNav, Tabs } = NS; const L = window.RMDLogic; const API = window.RMD_API; const page = { flex: 1, minWidth: 0, overflowY: "auto", padding: "var(--page-gutter-desktop)", display: "flex", flexDirection: "column", gap: "var(--space-6)" }; /* --------------------------------------------------------------------------- 1. คำแปลค่า enum ของฐานข้อมูล → ภาษาไทย ผู้ใช้ต้องไม่เห็นค่าดิบอย่าง "abdomen_left" หรือ "penlow" เด็ดขาด --------------------------------------------------------------------------- */ const SYMPTOM_TH = { nausea: "คลื่นไส้", vomiting: "อาเจียน", constipation: "ท้องผูก", diarrhea: "ท้องเสีย", appetite_loss: "เบื่ออาหาร", fatigue: "อ่อนเพลีย", injection_site_reaction: "ปฏิกิริยาที่ตำแหน่งฉีด", other: "อาการอื่น", }; const SITE_TH = { abdomen_left: "หน้าท้องซ้าย", abdomen_right: "หน้าท้องขวา", thigh_left: "ต้นขาซ้าย", thigh_right: "ต้นขาขวา", upper_arm: "ต้นแขน", }; const OFF_RX_TH = { side_effect: "มีผลข้างเคียง", not_enough_drug: "ยาไม่พอ", doctor_advice: "แพทย์แนะนำ", miscount: "นับคลิกผิด", other: "เหตุผลอื่น", }; const PEN_STATUS_TH = { in_use: "กำลังใช้อยู่", finished: "ใช้หมดแล้ว", discarded: "ทิ้งแล้ว", expired: "หมดอายุ" }; const PROGRAM_ICON = { medication: "syringe", diet_only: "utensils" }; const VISIT_KIND_TH = { initial: "ครั้งแรก", refill: "รับยาใหม่", followup: "ติดตามอาการ" }; const ROLE_TH = { nurse: "ผู้ช่วย/พยาบาล", doctor: "แพทย์", admin: "แอดมิน/เจ้าของ", patient: "ผู้ป่วย" }; const ACTION_TH = { read: "เปิดดูข้อมูล", create: "เพิ่มข้อมูล", update: "แก้ไขข้อมูล", delete: "ลบข้อมูล", export: "ส่งออกข้อมูล", login: "เข้าสู่ระบบ" }; const ENTITY_TH = { patient: "ข้อมูลผู้ป่วย", patients: "ข้อมูลผู้ป่วย", weight_logs: "บันทึกน้ำหนัก", side_effects: "อาการ", injections: "การฉีดยา", prescriptions: "ใบสั่งโดส", pens: "ปากกา", visits: "การมาคลินิก", consents: "คำยินยอม", pen_models: "รุ่นปากกา", }; /* คำขอใช้สิทธิตาม PDPA (data_requests) */ const REQUEST_KIND_TH = { export: "ขอสำเนาข้อมูล", erase: "ขอลบข้อมูล" }; const REQUEST_STATUS_TH = { open: "รอดำเนินการ", done: "ดำเนินการแล้ว", rejected: "ปฏิเสธคำขอ" }; /* เมนูตามบทบาทจริงจากตาราง staff — ไม่ผูกกับรายชื่อคนอีกต่อไป */ const ROLE_NAV = { nurse: ["list", "refill"], doctor: ["list", "refill", "dash"], admin: ["list", "refill", "dash", "requests", "settings", "audit"], }; /* --------------------------------------------------------------------------- 2. ตัวช่วยจัดรูปแบบสำหรับการแสดงผล (ไม่ใช่กฎธุรกิจ จึงอยู่ที่หน้าจอ) --------------------------------------------------------------------------- */ const DASH = "—"; function fmtDate(value) { if (!value) return DASH; const d = new Date(value); if (isNaN(d.getTime())) return DASH; return d.toLocaleDateString("th-TH", { day: "2-digit", month: "short", year: "numeric" }); } function fmtDateTime(value) { if (!value) return DASH; const d = new Date(value); if (isNaN(d.getTime())) return DASH; return d.toLocaleDateString("th-TH", { day: "2-digit", month: "short" }) + " · " + d.toLocaleTimeString("th-TH", { hour: "2-digit", minute: "2-digit" }); } /** "วันนี้ / เมื่อวาน / N วันที่แล้ว" — ไม่มีข้อมูลคือไม่มี ไม่ใช่ 0 วัน */ function fmtSince(value) { if (!value) return "ยังไม่มีบันทึก"; const d = new Date(value); if (isNaN(d.getTime())) return DASH; const days = Math.floor((Date.now() - d.getTime()) / 86400000); if (days <= 0) return "วันนี้"; if (days === 1) return "เมื่อวาน"; return days + " วันที่แล้ว"; } function daysBetween(from, to) { return Math.floor((new Date(to).getTime() - new Date(from).getTime()) / 86400000); } /** * รวมข้อมูลดิบเป็นซีรีส์รายสัปดาห์สำหรับกราฟ * สัปดาห์ที่ไม่มีบันทึก ต้องได้ weight = null เพื่อให้กราฟ "ขาดเส้น" * ห้ามเติม 0 หรือลากค่าเดิมต่อ — นั่นคือการเดาค่าที่ผู้ป่วยไม่ได้บันทึก */ function buildWeekSeries({ programStartAt, weights, injections, sideEffects }) { const all = [] .concat((weights || []).map((w) => w.measured_at)) .concat((injections || []).map((i) => i.injected_at)) .concat((sideEffects || []).map((s) => s.reported_at)) .map((v) => new Date(v).getTime()) .filter((t) => Number.isFinite(t)); if (!all.length) return []; const startCandidates = all.slice(); if (programStartAt) { const ps = new Date(programStartAt).getTime(); if (Number.isFinite(ps)) startCandidates.push(ps); } const start = Math.min.apply(null, startCandidates); const weekOf = (value) => Math.max(0, Math.floor((new Date(value).getTime() - start) / 604800000)); const lastWeek = Math.max(weekOf(Date.now()), weekOf(Math.max.apply(null, all))); const series = []; for (let i = 0; i <= lastWeek; i++) { series.push({ label: "ส." + (i + 1), weight: null, mg: null, se: null }); } // weights เรียงเก่า → ใหม่อยู่แล้ว ค่าท้ายสุดของสัปดาห์จึงเป็นค่าที่ทับลงไปเป็นตัวสุดท้าย (weights || []).forEach((w) => { const slot = series[weekOf(w.measured_at)]; if (slot) slot.weight = Number(w.weight_kg); }); (injections || []).forEach((inj) => { const slot = series[weekOf(inj.injected_at)]; if (!slot) return; slot.mg = (slot.mg || 0) + Number(inj.mg || 0); }); (sideEffects || []).forEach((se) => { const slot = series[weekOf(se.reported_at)]; if (!slot) return; const level = Number(se.severity); if (Number.isFinite(level)) slot.se = Math.max(slot.se || 0, level); }); return series; } /* --------------------------------------------------------------------------- 3. ตัวช่วยเรื่องสถานะการโหลด — ใช้ซ้ำทุกหน้า จะได้ไม่มีหน้าไหนลืมสถานะใดสถานะหนึ่ง --------------------------------------------------------------------------- */ function useAsync(run, deps) { const [state, setState] = React.useState({ loading: true, error: null, data: null }); const [tick, setTick] = React.useState(0); const keys = (deps || []).concat([tick]); React.useEffect(() => { let alive = true; setState({ loading: true, error: null, data: null }); Promise.resolve() .then(run) .then( (data) => { if (alive) setState({ loading: false, error: null, data: data }); }, (err) => { if (alive) setState({ loading: false, error: (err && err.message) || "โหลดข้อมูลไม่สำเร็จ", data: null }); } ); return () => { alive = false; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, keys); return { loading: state.loading, error: state.error, data: state.data, reload: () => setTick((t) => t + 1) }; } function LoadingBlock({ label }) { return ; } function ErrorBlock({ message, onRetry }) { return ( ลองใหม่ : null} /> ); } /** ห่อเนื้อหาที่ต้องรอข้อมูล: โหลด → error (มีปุ่มลองใหม่) → ว่าง → เนื้อหาจริง */ function AsyncBlock({ state, isEmpty, empty, children }) { if (state.loading) return ; if (state.error) return ; if (isEmpty) return empty; return children; } function PageHead({ eyebrow, title, subtitle, actions }) { return (
{eyebrow ?

{eyebrow}

: null}

{title}

{subtitle ?

{subtitle}

: null}
{actions}
); } /** * ป้ายบอกโปรแกรมการรักษา — ต้องเห็นได้ทันทีว่าคนนี้ใช้ยาฉีดหรือปรับอาหารอย่างเดียว * เพราะทุกหน้าจอที่เกี่ยวกับยาจะเปลี่ยนไปตามค่านี้ */ function ProgramBadge({ programType, size }) { if (!programType) return null; const dietOnly = L.isDietOnly(programType); return ( {L.programLabel(programType)} ); } /** ป้ายสัญญาณเตือนจาก flags ที่ view v_patient_alerts คำนวณมาให้ */ function FlagBadges({ flags }) { if (!flags || !flags.length) return ปกติ; return ( {flags.map((key) => { const meta = L.FLAG_META[key]; if (!meta) return null; return {meta[1]}; })} ); } /* =========================================================================== C2 — รายชื่อผู้ป่วย ใช้เป็นหน้าเลือกผู้ป่วยของ "รับยาใหม่" ด้วย (pickMode) =========================================================================== */ /* --------------------------------------------------------------------------- C10 — เปิดบัญชีให้ผู้ป่วย / ตั้งรหัสใหม่ให้ ผู้ป่วยล็อกอินด้วย HN + รหัสผ่าน ไม่มีอีเมลจริงในระบบ จึงกดลิงก์ "ลืมรหัสผ่าน" ด้วยตัวเองไม่ได้ — คลินิกเป็นทางเดียวที่ตั้งรหัสใหม่ให้ได้ รหัสถูกสร้างที่เซิร์ฟเวอร์และส่งกลับมา "ครั้งเดียว" ไม่ถูกเก็บไว้ที่ไหนอีกเลย หน้าจอจึงต้องบอกให้ชัดว่าปิดหน้าต่างนี้แล้วดูย้อนหลังไม่ได้ --------------------------------------------------------------------------- */ function CredentialsPanel({ result }) { const [copied, setCopied] = React.useState(null); async function copy(kind, value) { try { await navigator.clipboard.writeText(value); setCopied(kind); setTimeout(() => setCopied(null), 1800); } catch (err) { // เบราว์เซอร์บางตัวไม่ให้เขียนคลิปบอร์ด — ค่ายังอยู่บนจอให้จดเองได้ setCopied("fail"); setTimeout(() => setCopied(null), 2600); } } const row = (label, value, kind) => (
{label} {value}
); return (
ระบบไม่ได้เก็บรหัสผ่านไว้ที่ไหน — ปิดหน้าต่างนี้แล้วจะดูย้อนหลังไม่ได้ ถ้าลืมจดต้องกดตั้งรหัสใหม่อีกครั้ง · ส่งให้ผู้ป่วยแล้วอย่าเก็บไว้ในแชต {row("รหัสผู้ป่วย", result.login_id, "id")} {row("รหัสผ่าน", result.password, "pw")} {copied === "fail" ? (

คัดลอกอัตโนมัติไม่ได้ในเบราว์เซอร์นี้ กรุณาลากคลุมแล้วคัดลอกเอง

) : null}

ผู้ป่วยจะถูกบังคับให้ตั้งรหัสใหม่ของตัวเองทันทีที่เข้าใช้งานครั้งแรก

); } function NewPatientDialog({ open, onClose, onCreated }) { const [hn, setHn] = React.useState(""); const [nickname, setNickname] = React.useState(""); const [programType, setProgramType] = React.useState("medication"); const [startWeight, setStartWeight] = React.useState(""); const [targetWeight, setTargetWeight] = React.useState(""); const [saving, setSaving] = React.useState(false); const [error, setError] = React.useState(null); const [result, setResult] = React.useState(null); // ล้างฟอร์มทุกครั้งที่เปิดใหม่ ไม่ให้ค่าของคนก่อนหน้าค้างมาจนบันทึกผิดคน React.useEffect(() => { if (!open) return; setHn(""); setNickname(""); setProgramType("medication"); setStartWeight(""); setTargetWeight(""); setError(null); setResult(null); setSaving(false); }, [open]); const cleanHN = API.normalizeHN(hn); const hnValid = API.HN_RE.test(cleanHN); const canSubmit = hnValid && nickname.trim() && !saving; async function submit() { if (!canSubmit) return; setSaving(true); setError(null); try { const res = await API.createPatientAccount({ hn: cleanHN, nickname: nickname, program_type: programType, start_weight_kg: startWeight, target_weight_kg: targetWeight, }); setResult(res); onCreated(); } catch (err) { setError((err && err.message) || "เปิดบัญชีไม่สำเร็จ"); } finally { setSaving(false); } } return ( จดรหัสแล้ว ปิดหน้าต่าง : }> {result ? : (
setHn(e.target.value)} /> setNickname(e.target.value)} />
setStartWeight(e.target.value)} />
setTargetWeight(e.target.value)} />
{error ? {error} : null}
)} ); } /** ตั้งรหัสใหม่ให้ผู้ป่วยที่ลืมรหัส — อยู่ในหน้ารายละเอียดผู้ป่วย */ function ResetPasswordAction({ patient }) { const [open, setOpen] = React.useState(false); const [saving, setSaving] = React.useState(false); const [error, setError] = React.useState(null); const [result, setResult] = React.useState(null); function close() { setOpen(false); setResult(null); setError(null); } async function submit() { setSaving(true); setError(null); try { setResult(await API.resetPatientPassword(patient.id)); } catch (err) { setError((err && err.message) || "ตั้งรหัสใหม่ไม่สำเร็จ"); } finally { setSaving(false); } } return ( จดรหัสแล้ว ปิดหน้าต่าง : }> {result ? : (

รหัสเดิมจะใช้ไม่ได้ทันทีที่กดยืนยัน ถ้าผู้ป่วยกำลังเปิดแอปอยู่จะถูกให้เข้าสู่ระบบใหม่ ทำเมื่อยืนยันตัวผู้ป่วยได้แน่ชัดแล้วเท่านั้น

{error ? {error} : null}
)} ); } function PatientList({ onOpen, pickMode, canManageAccounts }) { const state = useAsync(() => API.listPatients(), []); const [filter, setFilter] = React.useState("all"); const [query, setQuery] = React.useState(""); const [adding, setAdding] = React.useState(false); // ระหว่างเลือกผู้ป่วยเพื่อเริ่ม refill ไม่ควรมีปุ่มเปิดบัญชีมาแทรก — คนละงานกัน const showAdd = canManageAccounts && !pickMode; const patients = state.data || []; const q = query.trim().toLowerCase(); const rows = patients .filter((p) => (filter === "flag" ? p.flags.length > 0 : filter === "med" ? !L.isDietOnly(p.program_type) : filter === "diet" ? L.isDietOnly(p.program_type) : true)) .filter((p) => !q || (p.nickname || "").toLowerCase().includes(q) || (p.hn || "").toLowerCase().includes(q)) .map((p) => Object.assign({}, p, { id: p.patient_id })); const countWith = (key) => patients.filter((p) => p.flags.includes(key)).length; const dietOnlyCount = patients.filter((p) => L.isDietOnly(p.program_type)).length; return (
setQuery(e.target.value)} /> {showAdd ? : null} } /> {showAdd ? setAdding(false)} onCreated={state.reload} /> : null} setAdding(true)}>เปิดบัญชีผู้ป่วย : null} />}>
p.flags.length > 0).length)} />
onOpen(r.patient_id)} emptyLabel={q ? "ไม่พบผู้ป่วยที่ตรงกับคำค้นหา" : "ไม่มีผู้ป่วยที่ตรงกับตัวกรองนี้"} columns={[ { key: "nickname", header: "ผู้ป่วย", render: (r) => (
{r.nickname || "ไม่ได้ตั้งชื่อเล่น"}
{r.hn}
) }, { key: "program_type", header: "โปรแกรม", render: (r) => }, { key: "last_measured_at", header: "บันทึกน้ำหนักล่าสุด", render: (r) => fmtSince(r.last_measured_at) }, // คนที่ปรับอาหารอย่างเดียวไม่มีใบสั่งยาและไม่มีปากกา — แสดงขีดจะทำให้เข้าใจว่า "ยังไม่ได้สั่ง" { key: "prescribed_clicks", header: "โดสตามใบสั่ง", numeric: true, align: "right", render: (r) => (L.isDietOnly(r.program_type) ? "ไม่ใช้ยาฉีด" : r.prescribed_clicks == null ? DASH : r.prescribed_clicks + " คลิก") }, { key: "clicks_remaining", header: "ยาคงเหลือ", numeric: true, align: "right", render: (r) => (L.isDietOnly(r.program_type) ? DASH : r.clicks_remaining == null ? DASH : r.clicks_remaining + " คลิก") }, { key: "next_visit_at", header: "นัดถัดไป", render: (r) => (r.next_visit_at ? fmtDate(r.next_visit_at) : "ยังไม่มีนัด") }, { key: "flags", header: "สัญญาณ", render: (r) => }, { key: "go", header: "", align: "right", render: () => }, ]} rows={rows} />
); } /** * เปลี่ยนโปรแกรมการรักษาของผู้ป่วย (ใช้ยาฉีด ↔ ปรับอาหารอย่างเดียว) * กฎว่าเปลี่ยนได้หรือไม่อยู่ที่ฐานข้อมูล (เช่นยังมีใบสั่งยาเปิดอยู่) * หน้าจอมีหน้าที่แค่ถามยืนยันและแสดงข้อความที่ฐานข้อมูลตอบกลับมาตรง ๆ */ function ProgramSwitch({ patient, onChanged }) { const [open, setOpen] = React.useState(false); const [saving, setSaving] = React.useState(false); const [error, setError] = React.useState(null); const dietOnly = L.isDietOnly(patient.program_type); const next = dietOnly ? "medication" : "diet_only"; async function apply() { setSaving(true); setError(null); try { await API.setProgramType(patient.id, next); setOpen(false); onChanged(next); } catch (err) { setError((err && err.message) || "เปลี่ยนโปรแกรมไม่สำเร็จ กรุณาลองใหม่"); } finally { setSaving(false); } } return ( setOpen(false)} footer={ }>

{dietOnly ? "หลังเปลี่ยนแล้วจะกำหนดโดส จ่ายปากกา และบันทึกการฉีดยาให้ผู้ป่วยรายนี้ได้ตามปกติ" : "หลังเปลี่ยนแล้วผู้ป่วยจะไม่เห็นส่วนที่เกี่ยวกับยาฉีดในแอปอีก และระบบจะไม่ให้บันทึกใบสั่งยา ปากกา หรือการฉีดยาของรายนี้"}

{error ?
{error}
: null} ); } /* =========================================================================== C3 — หน้าผู้ป่วยรายบุคคล (หน้าจอสำคัญที่สุดของระบบ) =========================================================================== */ function PatientDetail({ patientId, profile, onBack, onRefill, canRefill, canManageAccounts, onToast }) { const [tab, setTab] = React.useState("trend"); const [range, setRange] = React.useState("12w"); const state = useAsync(() => Promise.all([ API.getPatient(patientId), API.getWeightLogs(patientId), API.getInjections(patientId), API.getSideEffects(patientId), API.getPrescriptions(patientId), API.getPens(patientId), API.getVisits(patientId), ]).then(([patient, weights, injections, sideEffects, prescriptions, pens, visits]) => ({ patient, weights, injections, sideEffects, prescriptions, pens, visits })), [patientId]); // การเปิดดูข้อมูลผู้ป่วยต้องลง audit log — แต่ถ้าลงไม่สำเร็จ ห้ามบังหน้าจอที่แพทย์กำลังใช้ React.useEffect(() => { if (!patientId) return; API.logPatientRead(patientId, "patient", "read").catch((err) => { console.error("[clinic] ลง audit log การเปิดดูข้อมูลไม่สำเร็จ", err && err.message); }); }, [patientId]); if (state.loading) return
; if (state.error) { return (
รายชื่อ} />
); } const { patient, weights, injections, sideEffects, prescriptions, pens, visits } = state.data; // ผู้ป่วยโปรแกรมปรับอาหารอย่างเดียวไม่มีใบสั่งยา/ปากกา/การฉีดเลย (ฐานข้อมูลบล็อกไว้) // จึงต้องซ่อนทั้งตัวเลขโดส แท็บการจ่ายยา และแท่งโดสในกราฟ ไม่ใช่แสดงเป็นขีด const dietOnly = L.isDietOnly(patient.program_type); const canEditProgram = profile && (profile.role === "doctor" || profile.role === "admin"); const series = buildWeekSeries({ programStartAt: patient.program_start_at, weights, injections, sideEffects }); const shown = range === "6w" ? series.slice(-6) : series.slice(-12); const latest = weights.length ? weights[weights.length - 1] : null; const previous = weights.length > 1 ? weights[weights.length - 2] : null; const delta = latest && previous ? L.weightDelta(latest.weight_kg, previous.weight_kg) : null; const startWeight = patient.start_weight_kg != null ? Number(patient.start_weight_kg) : (weights.length ? Number(weights[0].weight_kg) : null); const lossPct = latest ? L.lossPercentFrom(startWeight, latest.weight_kg) : null; const currentRx = prescriptions.find((r) => r.is_current) || null; const weeksWithLog = series.filter((w) => w.weight != null).length; const targetWeight = patient.target_weight_kg != null ? Number(patient.target_weight_kg) : undefined; const nextVisit = visits.filter((v) => new Date(v.visit_at).getTime() > Date.now()).slice(-1)[0] || null; const programWeek = patient.program_start_at ? Math.floor(daysBetween(patient.program_start_at, Date.now()) / 7) + 1 : null; const tabItems = [ { value: "trend", label: "แนวโน้ม" }, { value: "se", label: "อาการ" }, ].concat(dietOnly ? [] : [ { value: "disp", label: "การจ่ายยา" }, { value: "hist", label: "ประวัติการปรับโดส" }, ]); // กันแท็บค้าง: ถ้าเพิ่งย้ายผู้ป่วยไปโปรแกรมปรับอาหาร แท็บที่เลือกไว้เดิมอาจไม่มีแล้ว const activeTab = tabItems.some((t) => t.value === tab) ? tab : "trend"; return (
{patient.nickname || "ไม่ได้ตั้งชื่อเล่น"} } subtitle={"เริ่มโปรแกรม " + fmtDate(patient.program_start_at) + (nextVisit ? " · นัดถัดไป " + fmtDate(nextVisit.visit_at) : " · ยังไม่มีนัดถัดไป")} actions={ {canManageAccounts ? : null} {canEditProgram ? ( { if (onToast) onToast("เปลี่ยนเป็นโปรแกรม" + L.programLabel(next) + "แล้ว"); state.reload(); }} /> ) : null} {canRefill ? ( ) : null} } />
{dietOnly ? ( ) : ( )}
{activeTab === "trend" ? ( series.length === 0 ? ( ) : ( }>
น้ำหนัก {dietOnly ? null : โดส mg ต่อสัปดาห์} อาการที่รายงาน {targetWeight != null ? เป้าหมาย {L.formatKg(targetWeight)} กก. : null} สัปดาห์ที่ไม่มีบันทึกจะไม่มีจุดบนเส้น
) ) : activeTab === "se" ? ( fmtDate(r.reported_at) }, { key: "symptom", header: "อาการ", render: (r) => SYMPTOM_TH[r.symptom] || r.symptom }, { key: "severity", header: "ระดับ", align: "right", numeric: true, render: (r) => r.severity + " · " + L.severityLabel(r.severity) }, { key: "source", header: "ที่มา", render: (r) => (r.source === "clinic" ? "บันทึกที่คลินิก" : "ผู้ป่วยรายงานเอง") }, { key: "note", header: "บันทึกเพิ่มเติม", render: (r) => r.note || DASH }, ]} rows={sideEffects} /> ) : activeTab === "disp" ? ( fmtDate(r.dispensed_at) }, { key: "pen", header: "รุ่นปากกา", render: (r) => (r.pen_models ? r.pen_models.label : DASH) }, { key: "lot", header: "Lot" }, { key: "expiry", header: "หมดอายุ", render: (r) => fmtDate(r.expiry) }, { key: "left", header: "คลิกคงเหลือ", numeric: true, align: "right", render: (r) => r.clicks_remaining + " / " + r.clicks_total }, { key: "status", header: "สถานะ", render: (r) => PEN_STATUS_TH[r.status] || r.status }, ]} rows={pens} /> fmtDate(r.injected_at) }, { key: "clicks", header: "คลิก", numeric: true, align: "right" }, { key: "mg", header: "mg", numeric: true, align: "right", render: (r) => L.formatMg(r.mg) }, { key: "pen_label", header: "รุ่นปากกา" }, { key: "site", header: "ตำแหน่งฉีด", render: (r) => SITE_TH[r.site] || r.site }, { key: "off_rx_reason", header: "ต่างจากใบสั่ง", render: (r) => (r.off_rx_reason ? (OFF_RX_TH[r.off_rx_reason] || r.off_rx_reason) : DASH) }, ]} rows={injections.slice().reverse()} /> ) : ( {prescriptions.length === 0 ? ( ) : ( ({ mg: L.formatMg(r.prescribed_mg), clicks: r.prescribed_clicks, date: fmtDate(r.effective_from), reason: r.clinical_reason, by: r.decided_by_nickname || "ไม่ระบุผู้ตัดสินใจ", current: !!r.is_current, }))} /> )} )}
); } /* =========================================================================== C4 + C5 + C6 — หน้ารับยาใหม่ จบในหน้าเดียว ลำดับการบันทึก: createVisit → saveClinicWeight → setPrescription → dispensePen =========================================================================== */ const CLINICAL_REASONS = [ "เริ่มการรักษา", "ทนยาได้ดี น้ำหนักลดต่อเนื่อง", "มีผลข้างเคียง จึงคงหรือลดโดส", "น้ำหนักนิ่ง จึงเพิ่มโดส", "ผู้ป่วยขอปรับโดส", ]; function RefillVisit({ patientId, profile, onBack, onSaved }) { const state = useAsync(() => Promise.all([ API.getPatient(patientId), API.getWeightLogs(patientId), API.getInjections(patientId), API.getSideEffects(patientId), API.getPrescriptions(patientId), API.getPens(patientId), API.getPenModels(), ]).then(([patient, weights, injections, sideEffects, prescriptions, pens, penModels]) => ({ patient, weights, injections, sideEffects, prescriptions, pens, penModels })), [patientId]); const [weight, setWeight] = React.useState(""); const [waist, setWaist] = React.useState(""); const [bodyFat, setBodyFat] = React.useState(""); const [rxMode, setRxMode] = React.useState("keep"); const [rxPenModelId, setRxPenModelId] = React.useState(""); const [clicks, setClicks] = React.useState(10); const [reason, setReason] = React.useState(""); const [dispensing, setDispensing] = React.useState(false); const [penModelId, setPenModelId] = React.useState(""); const [lot, setLot] = React.useState(""); const [expiry, setExpiry] = React.useState(""); const [saving, setSaving] = React.useState(false); const [saveError, setSaveError] = React.useState(null); const [ready, setReady] = React.useState(false); const canPrescribe = profile.role === "doctor" || profile.role === "admin"; // ตั้งค่าเริ่มต้นจากใบสั่งปัจจุบันหลังโหลดเสร็จ — ทำครั้งเดียว ไม่ทับสิ่งที่ผู้ใช้พิมพ์ไปแล้ว React.useEffect(() => { if (!state.data || ready) return; const current = state.data.prescriptions.find((r) => r.is_current) || null; const firstModel = state.data.penModels[0]; if (current) { setRxPenModelId(current.pen_model_id); setClicks(current.prescribed_clicks); setPenModelId(current.pen_model_id); setRxMode(canPrescribe ? "keep" : "keep"); } else { // ยังไม่มีใบสั่งเลย — แพทย์ต้องกำหนดโดสครั้งแรกในการมาครั้งนี้ if (firstModel) { setRxPenModelId(firstModel.id); setPenModelId(firstModel.id); } setRxMode(canPrescribe ? "set" : "keep"); setReason(canPrescribe ? "เริ่มการรักษา" : ""); } setReady(true); }, [state.data, ready, canPrescribe]); if (state.loading) return
; if (state.error) { return (
ย้อนกลับ} />
); } const { patient, weights, injections, sideEffects, prescriptions, pens, penModels } = state.data; // ปรับอาหารอย่างเดียว = การมาครั้งนี้มีแค่ชั่งน้ำหนักกับทบทวนอาการ // ส่วนตัดสินใจโดสและจ่ายปากกาต้องไม่มีให้กดเลย (ฐานข้อมูลก็ปฏิเสธอยู่แล้ว) const dietOnly = L.isDietOnly(patient.program_type); const currentRx = prescriptions.find((r) => r.is_current) || null; const activePens = pens.filter((p) => p.status === "in_use"); const clicksLeft = activePens.reduce((sum, p) => sum + Number(p.clicks_remaining || 0), 0); const series = buildWeekSeries({ programStartAt: patient.program_start_at, weights, injections, sideEffects }); const recentSideEffects = sideEffects.filter((s) => daysBetween(s.reported_at, Date.now()) <= 28); const modelOptions = penModels.filter((m) => m.is_active) // บอกเป็น "โดสเต็มกี่ mg ใช้กี่คลิก" ไม่ใช่ mg ต่อคลิก เพราะเลขนั้นเป็นทศนิยมยาว // (ปากกา 2.5 mg ได้ 0.0417 mg/คลิก) อ่านแล้วไม่ช่วยตัดสินใจอะไรเลย .map((m) => ({ value: m.id, label: m.label + " · เต็มโดส " + Number(m.mg_per_dose).toFixed(1) + " mg = " + m.clicks_per_dose + " คลิก" })); const rxModel = penModels.find((m) => m.id === rxPenModelId) || null; const dispenseModel = penModels.find((m) => m.id === penModelId) || null; const weightCheck = L.validateWeight(weight); const rxOk = dietOnly || rxMode !== "set" || (!!rxPenModelId && clicks > 0 && reason.trim().length >= 3); const dispenseOk = dietOnly || !dispensing || (!!penModelId && lot.trim() !== "" && expiry !== ""); const canSave = weightCheck.valid && rxOk && dispenseOk && !saving; async function handleSave() { setSaving(true); setSaveError(null); try { const visit = await API.createVisit({ patientId: patientId, staffId: profile.id, kind: dietOnly ? "followup" : currentRx ? "refill" : "initial", }); await API.saveClinicWeight({ patientId: patientId, visitId: visit.id, weightKg: weightCheck.value, waistCm: waist, bodyFatPct: bodyFat, }); if (!dietOnly && rxMode === "set") { await API.setPrescription({ patientId: patientId, penModelId: rxPenModelId, clicks: clicks, clinicalReason: reason, visitId: visit.id, }); } if (!dietOnly && dispensing) { await API.dispensePen({ patientId: patientId, penModelId: penModelId, lot: lot, expiry: expiry, visitId: visit.id, }); } onSaved(); } catch (err) { setSaveError((err && err.message) || "บันทึกไม่สำเร็จ กรุณาลองใหม่"); } finally { setSaving(false); } } return (
{(patient.nickname || patient.hn) + (dietOnly ? " · ติดตามผล" : " · รับยาใหม่")} } subtitle={dietOnly ? "ผู้ป่วยรายนี้อยู่ในโปรแกรมปรับอาหารอย่างเดียว การมาครั้งนี้มีแค่ชั่งน้ำหนักและทบทวนอาการ" : "ชั่งน้ำหนัก ทบทวนอาการ ตัดสินใจโดส และจ่ายปากกา จบในหน้าเดียว"} actions={} /> {/* minWidth:0 ทั้งสองคอลัมน์ — ไม่งั้น min-content ของฟอร์ม/กราฟดันแทร็กจนล้นขอบขวา และปุ่มบันทึกหลุดออกนอกจอจนกดไม่ได้ */}
setWeight(e.target.value)} invalid={!!weightCheck.message} /> setWaist(e.target.value)} /> setBodyFat(e.target.value)} />
{recentSideEffects.length === 0 ? ( ) : ( fmtDate(r.reported_at) }, { key: "symptom", header: "อาการ", render: (r) => SYMPTOM_TH[r.symptom] || r.symptom }, { key: "severity", header: "ระดับ", align: "right", numeric: true, render: (r) => r.severity + " · " + L.severityLabel(r.severity) }, ]} rows={recentSideEffects} /> )} {dietOnly ? null : ( {dispensing ? (
setLot(e.target.value)} invalid={lot.trim() === ""} placeholder="เช่น T4-88999" /> setExpiry(e.target.value)} invalid={expiry === ""} />
{dispenseModel ? (
) : null} ) : null} )}
{series.length ? ( ) : ( )} {dietOnly ? null : ( {!canPrescribe ? ( การกำหนดหรือเปลี่ยนโดสต้องทำโดยแพทย์หรือแอดมิน คุณยังบันทึกน้ำหนักและจ่ายปากกาได้ตามปกติ ) : ( {rxMode === "keep" ? (
{currentRx ? ( ) : ( เลือก “กำหนดโดสครั้งแรก” เพื่อบันทึกโดสตั้งต้นพร้อมเหตุผลทางคลินิก )}
) : (
setReason(e.target.value)} placeholder="เลือกเหตุผล" options={CLINICAL_REASONS.map((r) => ({ value: r, label: r }))} invalid={rxMode === "set" && reason.trim().length < 3} />
)} )} )} {saveError ? {saveError} : null}
{!dietOnly && currentRx && clicksLeft < currentRx.prescribed_clicks ? ( น้อยกว่าโดสตามใบสั่ง ({currentRx.prescribed_clicks} คลิก) ควรจ่ายด้ามใหม่ในการมาครั้งนี้ ) : null}
); } /* NumberStepper ของ design system รับ/คืนตัวเลขตรง ๆ — ห่อไว้เพื่อกันค่าที่ไม่ใช่ตัวเลข หลุดเข้าไปตอนผู้ใช้กดเร็ว ๆ (คลิกเป็นค่าที่ผิดแล้วคนเจ็บ ไม่ใช่แค่หน้าจอเพี้ยน) */ function NumberStepperSafe({ value, onChange, min, max, unit }) { return onChange(Math.round(Number(v) || 0))} min={min} max={max} unit={unit} />; } /* =========================================================================== C7 — ภาพรวมคลินิก ตัวเลขทุกตัวในหน้านี้นับจากข้อมูลจริงเท่านั้น ค่าที่คำนวณไม่ได้ให้บอกตรง ๆ ว่ายังไม่มี =========================================================================== */ function ClinicDashboard() { const state = useAsync(() => API.listPatients(), []); const patients = state.data || []; const countWith = (key) => patients.filter((p) => p.flags.includes(key)).length; return (
}>
p.flags.length > 0).length)} unit="คน" />
({ id: key, label: L.FLAG_META[key][1], level: L.FLAG_META[key][0] === "act" ? "ควรจัดการ" : "ควรเฝ้าดู", count: countWith(key), }))} /> สัดส่วนคนที่ลดถึง 5 / 10 / 15 เปอร์เซ็นต์ อัตราคงอยู่รายสัปดาห์ และความสัมพันธ์ระหว่างโดสกับผลลัพธ์ ต้องรวมข้อมูลย้อนหลังของผู้ป่วยทุกคน ระบบยังไม่มีสรุปชุดนี้ให้ดึง จึงยังไม่แสดงตัวเลขเพื่อไม่ให้เข้าใจผิด
); } /* =========================================================================== C8 — ตั้งค่ารุ่นปากกา: แก้ขนาดยาต่อโดสตามกล่อง (แอดมินเท่านั้น) จงใจให้ทำยาก: เลือกรุ่น → กรอกค่าใหม่ → เลือกผู้อนุมัติคนที่สอง → พิมพ์ยืนยัน =========================================================================== */ function PenSettings({ profile, onSaved }) { const state = useAsync(() => Promise.all([API.getPenModels(), API.listStaff()]) .then(([models, staff]) => ({ models, staff })), []); const [modelId, setModelId] = React.useState(""); const [mg, setMg] = React.useState(""); const [approverId, setApproverId] = React.useState(""); const [typed, setTyped] = React.useState(""); const [ack, setAck] = React.useState(false); const [saving, setSaving] = React.useState(false); const [saveError, setSaveError] = React.useState(null); const models = (state.data && state.data.models) || []; const staff = (state.data && state.data.staff) || []; const admins = staff.filter((s) => s.is_active && s.role === "admin" && s.id !== profile.id); const selected = models.find((m) => m.id === modelId) || null; const approver = admins.find((s) => s.id === approverId) || null; // แก้ได้เฉพาะ "ขนาดที่พิมพ์บนกล่อง" — mg ต่อคลิกเป็นค่าที่ระบบหารเอง (ขนาดต่อโดส ÷ 60) const currentMg = selected ? Number(selected.mg_per_dose) : null; const mgNum = Number(mg); const mgValid = mg.trim() !== "" && Number.isFinite(mgNum) && mgNum > 0 && mgNum <= 30 && mgNum !== currentMg; const canSave = !!selected && mgValid && !!approver && typed === "ยืนยัน" && ack && !saving; function reset() { setMg(""); setTyped(""); setAck(false); setApproverId(""); setSaveError(null); } async function handleSave() { setSaving(true); setSaveError(null); try { await API.updatePenModelMg({ penModelId: modelId, newMgPerDose: mgNum, approverStaffId: approverId, confirmText: typed, }); reset(); setModelId(""); state.reload(); onSaved(mgNum); } catch (err) { setSaveError((err && err.message) || "บันทึกไม่สำเร็จ กรุณาลองใหม่"); } finally { setSaving(false); } } return (
}> { setModelId(r.id); reset(); }} columns={[ { key: "label", header: "รุ่นปากกา" }, { key: "mg_per_dose", header: "เต็มโดส (mg)", numeric: true, align: "right", render: (r) => Number(r.mg_per_dose).toFixed(1) }, { key: "clicks_per_dose", header: "คลิกต่อโดส", numeric: true, align: "right" }, // ทศนิยม 4 ตำแหน่ง เพราะปากกา 2.5 mg ได้ 0.0417 ถ้าปัดสองตำแหน่งจะเหลือ 0.04 ซึ่งคูณกลับไม่ตรง { key: "mg_per_click", header: "mg ต่อคลิก", numeric: true, align: "right", render: (r) => {Number(r.mg_per_click).toFixed(4)} }, { key: "clicks_total", header: "คลิกทั้งด้าม", numeric: true, align: "right", render: (r) => r.clicks_total + " (" + r.doses_per_pen + " โดส)" }, { key: "mg_updated_at", header: "แก้ขนาดยาล่าสุด", render: (r) => (r.mg_updated_at ? fmtDate(r.mg_updated_at) : "ยังไม่เคยแก้") }, { key: "is_active", header: "สถานะ", render: (r) => (r.is_active ? ใช้งานอยู่ : ปิดใช้งาน) }, { key: "pick", header: "", align: "right", render: (r) => (r.id === modelId ? กำลังแก้ : ) }, ]} rows={models} /> {admins.length === 0 ? ( การแก้ขนาดยาต่อโดสต้องมีแอดมินอีกคนที่ยังใช้งานอยู่เป็นผู้อนุมัติ ตอนนี้ระบบยังไม่มีบัญชีดังกล่าว จึงยังแก้ค่าไม่ได้ ) : !selected ? ( ) : ( }>
setMg(e.target.value)} /> setNote(e.target.value)} placeholder={decision === "rejected" ? "เหตุผลที่ปฏิเสธคำขอ" : "สิ่งที่ทำไปแล้ว"} /> {error ? {error} : null}
); } /* =========================================================================== C1 — เข้าสู่ระบบฝั่งคลินิก (Supabase Auth จริง) บทบาทมาจากตาราง staff เท่านั้น ไม่มีรายชื่อคนอยู่ในโค้ดอีกแล้ว =========================================================================== */ function ClinicLogin({ onSignedIn }) { const [email, setEmail] = React.useState(""); const [password, setPassword] = React.useState(""); const [busy, setBusy] = React.useState(false); const [error, setError] = React.useState(null); const canSubmit = email.trim() !== "" && password !== "" && !busy; async function submit(e) { if (e) e.preventDefault(); if (!canSubmit) return; setBusy(true); setError(null); try { await API.auth.signInWithPassword(email, password); if (onSignedIn) await onSignedIn(); } catch (err) { setError((err && err.message) || "เข้าสู่ระบบไม่สำเร็จ กรุณาลองใหม่"); } finally { // ถ้าโปรไฟล์โหลดไม่ผ่าน (เช่นบัญชียังไม่ผูกกับตาราง staff) ผู้ใช้ต้องกดลองใหม่ได้ setBusy(false); } } return (

ReMeDe

Weight Journey · Clinic

setEmail(e.target.value)} /> setPassword(e.target.value)} /> {error ? {error} : null}

การเข้าดูข้อมูลผู้ป่วยทุกครั้งถูกบันทึกไว้ในประวัติการใช้งาน

); } /* =========================================================================== โครงแอปฝั่งคลินิก — ดูแลเซสชัน บทบาท และการนำทาง =========================================================================== */ const NAV_ALL = [ { value: "list", label: "รายชื่อผู้ป่วย", icon: "users" }, { value: "refill", label: "รับยาใหม่", icon: "clipboard-list" }, { value: "dash", label: "ภาพรวมคลินิก", icon: "chart-pie" }, { value: "requests", label: "คำขอใช้สิทธิ PDPA", icon: "file-text" }, { value: "settings", label: "ตั้งค่ารุ่นปากกา", icon: "shield-alert" }, { value: "audit", label: "ประวัติการแก้ไข", icon: "history" }, ]; function ClinicApp() { const [profile, setProfile] = React.useState(null); const [authReady, setAuthReady] = React.useState(false); const [authError, setAuthError] = React.useState(null); const [nav, setNav] = React.useState("list"); const [screen, setScreen] = React.useState("list"); const [activePatientId, setActivePatientId] = React.useState(null); const [toast, setToast] = React.useState(null); React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 3600); return () => clearTimeout(t); }, [toast]); const mounted = React.useRef(true); React.useEffect(() => () => { mounted.current = false; }, []); // แปลงเซสชันเป็นโปรไฟล์ + บทบาทจริงจากตาราง staff const applySession = React.useCallback(async (session) => { if (!mounted.current) return; if (!session) { setProfile(null); setAuthError(null); setAuthReady(true); return; } try { const p = await API.auth.getProfile(); if (!mounted.current) return; setProfile(p); setAuthError(null); } catch (err) { if (!mounted.current) return; setAuthError((err && err.message) || "โหลดข้อมูลผู้ใช้ไม่สำเร็จ"); setProfile(null); } finally { if (mounted.current) setAuthReady(true); } }, []); // ติดตามเซสชันของ Supabase — ทั้งตอนเปิดหน้าครั้งแรกและตอน token หมุน React.useEffect(() => { let stop = null; API.auth.getSession() .then(applySession) .then(() => { stop = API.auth.onChange((event, session) => { applySession(session); }); }) .catch((err) => { if (!mounted.current) return; setAuthError((err && err.message) || "เชื่อมต่อระบบไม่สำเร็จ"); setAuthReady(true); }); return () => { if (stop) stop(); }; }, [applySession]); const allowed = profile && profile.kind === "staff" ? (ROLE_NAV[profile.role] || []) : []; const go = (value) => { setNav(value); setScreen(value); setActivePatientId(null); }; async function handleLogout() { try { await API.auth.logout(); } catch (err) { setToast((err && err.message) || "ออกจากระบบไม่สำเร็จ"); } setProfile(null); setActivePatientId(null); go("list"); } const shell = (children) => (
{children}
); if (!authReady) { return shell(
); } if (!profile) { return shell(
{authError ? (
{authError}
) : null} {/* โหลดโปรไฟล์เองหลังล็อกอินสำเร็จ ไม่รอเฉพาะ event ของ Supabase ถ้า event มาไม่ถึงด้วยเหตุใดก็ตาม ผู้ใช้จะได้ไม่ค้างอยู่หน้าล็อกอินทั้งที่ล็อกอินผ่านแล้ว */} { setNav("list"); setScreen("list"); const session = await API.auth.getSession(); await applySession(session); }} />
); } // ผู้ป่วยที่บังเอิญเปิดลิงก์นี้ต้องไม่เห็นอะไรของฝั่งคลินิกเลย แม้แต่ชื่อเมนู if (profile.kind !== "staff") { return shell(
ออกจากระบบ} />
); } const canRefill = allowed.includes("refill"); /* เปิดบัญชี/ตั้งรหัสใหม่ให้ผู้ป่วย — เฉพาะแอดมิน (ตัดสินใจแล้ว 3 ส.ค. 2569) ด่านจริงอยู่ที่ Edge Function patient-accounts ซึ่งเช็ค role = admin ด้วยตัวเอง บรรทัดนี้แค่ซ่อนปุ่มไม่ให้พยาบาลกดแล้วเจอ 403 เปล่า ๆ ถ้าจะเปลี่ยนสิทธิ์ ต้องแก้ทั้งสองที่เสมอ แก้แค่ที่นี่ = ซ่อนปุ่มแต่ทางยังเปิด */ const canManageAccounts = profile.kind === "staff" && profile.role === "admin"; const openPatient = (id) => { setActivePatientId(id); setScreen("detail"); }; const openRefill = (id) => { setActivePatientId(id); setScreen("refill-form"); }; let body; if (screen === "detail" && activePatientId) { body = { setActivePatientId(null); setScreen(nav === "refill" ? "refill" : "list"); }} onRefill={openRefill} onToast={setToast} />; } else if (screen === "refill-form" && activePatientId && canRefill) { body = setScreen("detail")} onSaved={() => { setToast("บันทึกการมาคลินิกเรียบร้อย"); setScreen("detail"); }} />; } else if (screen === "refill" && canRefill) { body = ; } else if (screen === "dash" && allowed.includes("dash")) { body = ; } else if (screen === "requests") { // กันอีกชั้นนอกเหนือจากการซ่อนเมนู — สิทธิ์จริงบังคับที่ RLS ของ data_requests อยู่แล้ว body = allowed.includes("requests") ? :
; } else if (screen === "settings") { // กันอีกชั้นนอกเหนือจากการซ่อนเมนู — สิทธิ์จริงบังคับที่ DB อยู่แล้ว body = allowed.includes("settings") ? setToast("บันทึกขนาดยาต่อโดสเป็น " + Number(v).toFixed(1) + " mg แล้ว")} /> :
; } else if (screen === "audit") { body = allowed.includes("audit") ? :
; } else { body = ; } return (
allowed.includes(n.value))} footer={
{profile.nickname}
{ROLE_TH[profile.role] || profile.role}
} />
{body}
{toast ?
setToast(null)} />
: null}
); } Object.assign(window, { ClinicApp, ClinicLogin, PatientList, PatientDetail, RefillVisit, ClinicDashboard, PenSettings, AuditLog, DataRequests, PageHead });