/* ============================================================
shared.jsx — icons, date/status utilities, small components
============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ---------- "today" anchor for the prototype ---------- */
const TODAY = new Date('2026-06-01T00:00:00');
const NEAR_DAYS = 60;
/* ---------- icons (1.6 stroke, 20px line set) ---------- */
function Icon({ d, size = 19, fill, stroke = 1.6, children, style }) {
return (
);
}
const I = {
dash: (p) => ,
list: (p) => ,
calendar:(p)=> ,
bell: (p) => ,
plus: (p) => ,
search: (p) => ,
chevR: (p) => ,
chevD: (p) => ,
arrowL: (p) => ,
close: (p) => ,
check: (p) => ,
filter: (p) => ,
sliders:(p) => ,
clock: (p) => ,
qr: (p) => ,
beaker: (p) => ,
micro: (p) => ,
flask: (p) => ,
history:(p) => ,
warning:(p) => ,
shield: (p) => ,
trend: (p) => ,
copy: (p) => ,
edit: (p) => ,
download:(p)=> ,
sun: (p) => ,
moon: (p) => ,
menu: (p) => ,
grid: (p) => ,
pin: (p) => ,
tag: (p) => ,
refresh:(p) => ,
spark: (p) => ,
dots: (p) => ,
building:(p)=> ,
lock: (p) => ,
unlock: (p) => ,
logout: (p) => ,
user: (p) => ,
finger: (p) => ,
eye: (p) => ,
eyeoff: (p) => ,
scan: (p) => ,
trash: (p) => ,
pie: (p) => ,
addbox: (p) => ,
thermo: (p) => ,
wrench: (p) => ,
};
/* ---------- department metadata ---------- */
const DEPT_META = {
'Blood bank': { abbr: 'BLD', th: 'ธนาคารเลือด', hue: 18, short: 'Blood Bank' },
'Chemistry': { abbr: 'CHE', th: 'เคมีคลินิก', hue: 250, short: 'Chemistry' },
'Hematology&Microscopy': { abbr: 'HEM', th: 'โลหิตวิทยา/จุลทรรศน์', hue: 330, short: 'Hematology' },
'Microbiology': { abbr: 'MIC', th: 'จุลชีววิทยา', hue: 150, short: 'Microbiology' },
'Biomolecular': { abbr: 'MOL', th: 'ชีวโมเลกุล', hue: 195, short: 'Biomolecular' },
'Serology': { abbr: 'SER', th: 'ภูมิคุ้มกัน/ซีโรโลยี', hue: 70, short: 'Serology' },
'Pathology': { abbr: 'CYT', th: 'พยาธิ/เซลล์วิทยา', hue: 300, short: 'Pathology' },
};
/* real responsible person per department (head / section MT) */
const DEPT_OWNER = {
'Blood bank': 'นางพานิช ศรีเนตร · นักวิทยาศาสตร์การแพทย์ชำนาญการ',
'Chemistry': 'ทนพญ. สุภาวดี เบ้าทอง',
'Hematology&Microscopy': 'ทนพญ. สุวรรณี ไสวดี',
'Microbiology': 'ทนพญ. วิรัตยา พลเดช',
'Biomolecular': 'ทนพ. พีรภัทร ภักตะภา',
'Serology': 'ทนพ. พงศกร วันทาพงษ์',
'Pathology': 'นายเดชา บุตรมาศ · เจ้าพนักงานวิทยาศาสตร์การแพทย์ชำนาญงาน',
};
/* standard location label tied to the 7 real departments (system-wide) */
function deptLoc(deptName) {
const m = DEPT_META[deptName] || {};
return `งาน${m.th || deptName} (${m.short || deptName})`;
}
function deptColor(dept, l = 0.62, c = 0.13) {
const m = DEPT_META[dept];
const hue = m ? m.hue : 60;
return `oklch(${l} ${c} ${hue})`;
}
function deptSoft(dept) {
const m = DEPT_META[dept];
const hue = m ? m.hue : 60;
return `oklch(0.94 0.04 ${hue})`;
}
/* ---------- date / status utilities ---------- */
const THMONTH = ['ม.ค.','ก.พ.','มี.ค.','เม.ย.','พ.ค.','มิ.ย.','ก.ค.','ส.ค.','ก.ย.','ต.ค.','พ.ย.','ธ.ค.'];
function parseD(s) { return s ? new Date(s + 'T00:00:00') : null; }
function fmtDate(s) {
const d = parseD(s); if (!d) return '—';
return `${d.getDate()} ${THMONTH[d.getMonth()]} ${(d.getFullYear() + 543) % 100}`;
}
function fmtDateFull(s) {
const d = parseD(s); if (!d) return '—';
return `${d.getDate()} ${THMONTH[d.getMonth()]} ${d.getFullYear() + 543}`;
}
function daysUntil(s) {
const d = parseD(s); if (!d) return null;
return Math.round((d - TODAY) / 86400000);
}
/* status: ok | warn | danger | none */
function statusOf(inst) {
if (!inst.exp) return { key: 'none', label: 'ไม่มีข้อมูลสอบเทียบ', en: 'No data', days: null };
const dd = daysUntil(inst.exp);
if (dd < 0) return { key: 'danger', label: 'เกินกำหนด', en: 'Overdue', days: dd };
if (dd <= NEAR_DAYS) return { key: 'warn', label: 'ใกล้ครบกำหนด', en: 'Due soon', days: dd };
return { key: 'ok', label: 'ปกติ', en: 'Valid', days: dd };
}
const STATUS_ORDER = { danger: 0, warn: 1, none: 2, ok: 3 };
/* ---------- small components ---------- */
function Pill({ status, showDays }) {
const s = typeof status === 'string' ? { key: status } : status;
const labels = { ok: 'ปกติ', warn: 'ใกล้ครบกำหนด', danger: 'เกินกำหนด', none: 'ไม่มีข้อมูล' };
let txt = s.label || labels[s.key];
if (showDays && s.days != null) {
if (s.days < 0) txt = `เกิน ${Math.abs(s.days)} วัน`;
else if (s.key !== 'ok') txt = `อีก ${s.days} วัน`;
}
return (
{txt}
);
}
function DeptDot({ dept }) {
return ;
}
function DeptBadge({ dept, onClick }) {
const m = DEPT_META[dept] || {};
return (
{m.short || dept}
);
}
/* circular progress ring */
function Ring({ pct, size = 64, stroke = 7, color, track, label, sub }) {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const off = c * (1 - pct / 100);
return (
);
}
/* copy-to-clipboard helper */
function CopyBtn({ text, size = 15 }) {
const [done, setDone] = useState(false);
return (
);
}
/* deterministic QR-like matrix (decorative fallback, seeded by code).
Used only if the real QR library failed to load (offline/CDN blocked). */
function QRDecorative({ text, size = 132, n = 21 }) {
const cells = useMemo(() => {
let h = 2166136261;
const s = String(text == null ? '' : text);
for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
const rng = () => { h ^= h << 13; h ^= h >>> 17; h ^= h << 5; return ((h >>> 0) % 1000) / 1000; };
const grid = [];
for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) {
const finder = (gx, gy) => (gx < 7 && gy < 7) || (gx >= n - 7 && gy < 7) || (gx < 7 && gy >= n - 7);
if (finder(x, y)) {
const lx = x >= n - 7 ? x - (n - 7) : x, ly = y >= n - 7 ? y - (n - 7) : y;
const on = lx === 0 || lx === 6 || ly === 0 || ly === 6 || (lx >= 2 && lx <= 4 && ly >= 2 && ly <= 4);
if (on) grid.push([x, y]);
} else if (rng() > 0.52) grid.push([x, y]);
}
return grid;
}, [text, n]);
const u = size / n;
return (
);
}
/* real, scannable QR code (ISO/IEC 18004) rendered in the same style.
Encodes `text` (the instrument code) — scanning returns that string. */
function QRMatrix({ text, size = 132, n = 21 }) {
const qr = useMemo(() => {
if (typeof window.qrcode !== 'function') return null;
try {
const q = window.qrcode(0, 'M'); // type 0 = auto-fit, M = 15% error correction
q.addData(String(text == null ? '' : text));
q.make();
const count = q.getModuleCount();
const grid = [];
for (let r = 0; r < count; r++) for (let c = 0; c < count; c++) { if (q.isDark(r, c)) grid.push([c, r]); }
return { count, grid };
} catch (e) { return null; }
}, [text]);
// fallback to the decorative matrix if the QR lib is unavailable
if (!qr) return ;
const margin = 2; // quiet zone (modules) for reliable scanning
const total = qr.count + margin * 2;
const u = size / total;
return (
);
}
/* deep-link URL for an instrument — scanning its QR opens the detail card.
Built from the current host so it works wherever the app is deployed. */
function instrumentURL(code) {
const loc = window.location;
return loc.origin + loc.pathname + '#/detail/' + encodeURIComponent(code);
}
function EmptyState({ icon, title, sub }) {
const Ico = icon || I.beaker;
return (
);
}
Object.assign(window, {
TODAY, NEAR_DAYS, Icon, I, DEPT_META, DEPT_OWNER, deptLoc, deptColor, deptSoft,
THMONTH, parseD, fmtDate, fmtDateFull, daysUntil, statusOf, STATUS_ORDER,
Pill, DeptDot, DeptBadge, Ring, CopyBtn, QRMatrix, instrumentURL, EmptyState,
useState, useEffect, useRef, useMemo, useCallback,
});