// ═══════════════════════════════════════════════════════════════
// inventory.jsx — the Stock Room screens (Inventory Step 2)
// ═══════════════════════════════════════════════════════════════
//
// WHAT THIS IS (in plain English):
// Everything you see under the "Stock Room" item in the sidebar lives in
// this file: the product catalog, preference cards, and the inventory
// settings (procedures with their meds/equipment lists, manufacturers,
// suppliers, shelves, units, kits, IOL families, CSV import).
//
// It is a second script next to public/index.html, compiled in the browser
// by the same Babel that compiles the main app, and it reuses the main
// app's styles (cards, buttons, tables) so it feels like one program.
// index.html loads this file BEFORE its own script, then renders
// when the sidebar item is chosen.
//
// Where the data lives: the server's inventory drawers (see inventory.js).
// Each drawer is loaded with a version number and saved back with that
// number; if someone else saved first, the server refuses (409) and we
// reload their copy and say so, instead of overwriting them.
//
// Seeding: the very first time anyone opens the Stock Room on a fresh
// server, the catalog is empty. We then load /inventory-seed.json —
// Heather's master lists extracted from her app (deploy/extract-seed.js)
// — into every drawer, once. After that it is live data.
//
// Quantities (stock on hand, receiving, adjustments, alerts, reports) live in
// inventory-stock.jsx (Step 3). The patient chart's Dispensary is Step 4; the
// chart's own med/equipment lists are untouched until then.
// ═══════════════════════════════════════════════════════════════
const InvReact = React;
const { useState: invUseState, useEffect: invUseEffect, useMemo: invUseMemo, useRef: invUseRef, useCallback: invUseCallback } = React;
// ─── Talking to the server ─────────────────────────────────────
const InvApi = {
headers() { return { 'Content-Type': 'application/json', 'X-HIPAA-Session': 'active' }; },
async get(store) {
const r = await fetch(`/api/inventory/store/${store}`, { headers: this.headers() });
if (!r.ok) throw new Error(`Could not load ${store} (${r.status})`);
return r.json(); // { data, version, updatedAt, updatedBy }
},
// Returns { ok:true, version } or { ok:false, conflict:true, current } or throws.
async save(store, data, version) {
const r = await fetch(`/api/inventory/store/${store}`, { method: 'PUT', headers: this.headers(), body: JSON.stringify({ data, version }) });
const body = await r.json().catch(() => ({}));
if (r.status === 409) return { ok: false, conflict: true, current: body.current };
if (!r.ok) throw new Error(body.error || `Could not save ${store} (${r.status})`);
return { ok: true, version: body.version };
},
audit(action, detail) { try { if (window.HIPAA && HIPAA.auditLog) HIPAA.auditLog(action, detail); } catch {} },
};
// One drawer, held in React state with its version. save(next) writes it back;
// on a conflict the other person's copy replaces ours and the caller is told.
function useInvStore(name, fallback) {
const [state, setState] = invUseState({ data: null, version: 0, loading: true, error: null });
const load = invUseCallback(async () => {
try { const d = await InvApi.get(name); setState({ data: d.data == null ? fallback : d.data, version: d.version, loading: false, error: null, updatedAt: d.updatedAt, updatedBy: d.updatedBy }); }
catch (e) { setState(s => ({ ...s, loading: false, error: e.message })); }
}, [name]);
invUseEffect(() => { load(); }, [load]);
const save = invUseCallback(async (next) => {
const r = await InvApi.save(name, next, state.version);
if (r.ok) { setState(s => ({ ...s, data: next, version: r.version })); return { ok: true }; }
if (r.conflict) { setState(s => ({ ...s, data: r.current.data == null ? fallback : r.current.data, version: r.current.version })); return { ok: false, conflict: true, by: r.current.updatedBy }; }
return { ok: false };
}, [name, state.version]);
return { ...state, save, reload: load };
}
const invId = (prefix) => prefix + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
const invNorm = (s) => String(s == null ? '' : s).toLowerCase().replace(/\s+/g, ' ').trim();
const invMoney = (n) => (n == null || n === '' || isNaN(n)) ? '—' : '$' + Number(n).toFixed(2);
const INV_GROUPS = ['IOL', 'Surgery Supplies', 'Refractive supplies', 'Clinic Supplies', 'Crash Cart', 'Cleaning', 'Other'];
const INV_PROC_KEYS = [['cataract', 'Cataract'], ['rle', 'RLE'], ['icl', 'ICL'], ['lasik', 'LASIK'], ['smile', 'SMILE'], ['prk', 'PRK']];
// ─── Barcode brain (GS1) ───────────────────────────────────────
// A lens box or drug box barcode packs several facts into one string:
// (01) the product code, (17) expiry YYMMDD, (10) lot, (21) serial. Scanners
// "type" the whole thing at once. This pulls the pieces apart. Ported from
// Heather's parseGS1 so the same boxes scan the same way.
function invParseGS1(raw) {
let b = String(raw || '').replace(/[\u200b\u200c\u200d\ufeff]/g, '').replace(/[\r\n\t ]/g, '');
b = b.replace(//gi, '\x1d').replace(/\u241d/g, '\x1d').replace(/^\][A-Za-z]\d/, '');
const GS = '\x1d';
const fixed = { '00': 18, '01': 14, '02': 14, '11': 6, '12': 6, '13': 6, '15': 6, '16': 6, '17': 6, '20': 2 };
const variable = new Set(['10', '21', '22', '30', '37', '90', '91', '92', '240', '241', '250', '251', '400', '8004']);
const out = { raw: String(raw || ''), gtin: '', lot: '', serial: '', expiry: '', other: {} };
if (/^\d{8,14}$/.test(b)) { out.gtin = b; return out; } // a plain UPC/EAN
let i = 0, found = false;
const yymmdd = (v) => { if (!/^\d{6}$/.test(v)) return ''; const dd = v.slice(4, 6) === '00' ? '01' : v.slice(4, 6); return `20${v.slice(0, 2)}-${v.slice(2, 4)}-${dd}`; };
while (i < b.length) {
if (b[i] === GS) { i++; continue; }
let ai = null;
for (const len of [4, 3, 2]) { const c = b.slice(i, i + len); if (c.length === len && (fixed[c] !== undefined || variable.has(c))) { ai = c; break; } }
if (!ai) break;
i += ai.length;
let val;
if (fixed[ai] !== undefined) { val = b.slice(i, i + fixed[ai]); i += fixed[ai]; }
else { const e = b.indexOf(GS, i); val = e < 0 ? b.slice(i) : b.slice(i, e); i = e < 0 ? b.length : e; }
found = true;
if (ai === '01' || ai === '02') out.gtin = val;
else if (ai === '10') out.lot = val;
else if (ai === '21') out.serial = val;
else if (ai === '17') out.expiry = yymmdd(val);
else out.other[ai] = val;
}
if (!found) out.gtin = b.replace(/\D/g, '');
return out;
}
// Match a scan to a product: by GTIN/UPC (ignoring leading zeros), then by manufacturer code.
function invFindByScan(products, raw) {
const s = invParseGS1(raw);
const digits = (v) => String(v || '').replace(/\D/g, '').replace(/^0+/, '');
const g = digits(s.gtin);
let hit = null;
if (g) hit = products.find(p => digits(p.upc) && digits(p.upc) === g) || products.find(p => digits(p.upc) && (g.endsWith(digits(p.upc)) || digits(p.upc).endsWith(g)) && Math.min(g.length, digits(p.upc).length) >= 11);
if (!hit) { const code = invNorm(raw); hit = products.find(p => invNorm(p.manufacturerCode) === code || invNorm(p.upc) === code); }
return { product: hit || null, scan: s };
}
// ─── Small shared pieces ───────────────────────────────────────
function InvModal({ title, onClose, children, wide }) {
return (
{ if (e.target === e.currentTarget) onClose(); }}>
{title}
{children}
);
}
function InvField({ label, children, span }) {
return
The catalog on this server is empty. Load Heather's master lists — about 1,250 products (965 lenses), 12 preference cards, 15 procedures, and the medication and equipment lists for each procedure — as the starting point. This happens once; after that everything is edited here.
{s.seedSource ? <>Master lists loaded {s.seededAt ? new Date(s.seededAt).toLocaleString() : ''} from {s.seedSource}. Everything is now edited here; Heather's file is no longer the source. : 'Catalog entered by hand.'}
);
}
// ─── Catalog ───────────────────────────────────────────────────
function InvCatalog({ stores, savedOrConflict, toast, onHand, refreshAll }) {
const P = stores.products.data || [];
const [mode, setMode] = invUseState('products'); // 'products' | 'lenses'
const [receiving, setReceiving] = invUseState(null); // null | { product }
const [adjusting, setAdjusting] = invUseState(null); // null | { product, lot }
const [q, setQ] = invUseState('');
const [group, setGroup] = invUseState('all');
const [showArchived, setShowArchived] = invUseState(false);
const [limit, setLimit] = invUseState(150);
const [editing, setEditing] = invUseState(null); // product object or 'new'
const [scanMsg, setScanMsg] = invUseState('');
const list = invUseMemo(() => {
const n = invNorm(q); const words = n ? n.split(' ') : [];
return P.filter(p => (showArchived ? p.active === false : p.active !== false))
.filter(p => group === 'all' || p.group === group)
.filter(p => !words.length || words.every(w => invNorm(p.description).includes(w) || invNorm(p.manufacturerCode).includes(w) || invNorm(p.manufacturer).includes(w) || invNorm(p.upc).includes(w) || invNorm(p.supplier).includes(w)))
.sort((a, b) => a.description.localeCompare(b.description));
}, [P, q, group, showArchived]);
const onSearchKey = (e) => {
if (e.key !== 'Enter') return;
e.preventDefault(); // a scanner ends with Enter; without this the keypress lands in the modal's form and submits it
const { product, scan } = invFindByScan(P, q);
if (product) { setEditing(product); setScanMsg(''); }
else if (scan.gtin && scan.gtin.length >= 8) setScanMsg(`No product has barcode ${scan.gtin}. Add it, then paste the barcode into the UPC field.`);
};
const saveProduct = async (prod) => {
const isNew = !P.some(p => p.id === prod.id);
const dup = P.find(p => p.id !== prod.id && invNorm(p.description) === invNorm(prod.description));
if (dup) { toast(`⚠️ "${dup.description}" already exists${dup.active === false ? ' (archived)' : ''}.`, 'error'); return; }
const next = isNew ? [...P, prod] : P.map(p => p.id === prod.id ? prod : p);
if (await savedOrConflict(stores.products, next, isNew ? 'Product added' : 'Product saved')) setEditing(null);
};
const setActive = async (prod, active) => {
const next = P.map(p => p.id === prod.id ? { ...p, active } : p);
if (await savedOrConflict(stores.products, next, active ? 'Product restored' : 'Product archived')) setEditing(null);
};
const counts = invUseMemo(() => { const c = { all: 0 }; for (const p of P) { if (p.active === false) continue; c.all++; c[p.group] = (c[p.group] || 0) + 1; } return c; }, [P]);
const chip = (id, label) => ;
return (
{ setQ(e.target.value); setScanMsg(''); setLimit(150); }} onKeyDown={onSearchKey} placeholder="Search description, code, UPC, manufacturer — or scan a barcode and press Enter" />
{pickFor && pickFor.section === sec && pickFor.i === i
? { setDraft(d => ({ ...d, [sec]: d[sec].map((x, k) => k === i ? { ...x, productId: p2.id, linkGuessed: false } : x) })); setPickFor(null); }} />
:
{p ? {p.description} : {it.pullsToStock ? 'Needs a product' : 'Not linked'}}
{it.linkGuessed && p && Best guess — please confirm}
{it.linkGuessed && p && }
{p && }
}
); })}
);
return (
Procedure list
The names the worklist uses. Each maps to a procedure type (which decides the med/equipment lists below) and a default preference card. A card marked for a lens family wins over the default when the worklist lens matches.
{draft && section('meds', 'Intra-op medications', '"Standard" is pre-checked on every chart. "Pulls to stock" means each patient use deducts the linked product from stock — leave it off for shared multi-use bottles.')}
{draft && section('equipment', 'Equipment', 'Equipment used during the case. Link a product only if something is consumed per case (e.g. a laser pack).')}
{draft && section('dischargeMeds', 'Discharge medications', 'Given or sent home at discharge. Link the exact product (e.g. Diamox tablets) so the right item is pulled.')}
A family groups lens models (by a keyword or a model prefix) so a preference card can say "for LAL cases only", and so extra supplies (a cartridge, peel packs) come along automatically whenever a lens in that family is on the worklist.
Needs a description column; optional columns: manufacturer_code, manufacturer, group, shelf, supplier, purchase_uom, dispense_uom, units_per_purchase, purchase_price, upc, par_min, is_iol, is_drug, is_controlled, exp_required, is_buy_and_bill. Rows matching an existing description (or UPC) update that product; others are added. Nothing is deleted.
{preview && (
Recognized columns: {preview.columns.join(', ')}
{preview.adds.length} new products, {preview.updates.length} updates.
{preview.adds.slice(0, 8).map(a =>
+ {a.description}
)}
)}
);
}
// Shared with the rest of the app and with tests.
window.SurgSuiteInventory = { StockRoomView, parseGS1: invParseGS1, findByScan: invFindByScan, iolFamilyOf: invIolFamilyOf, api: InvApi };