/* global React, Icon, MOUNJARO, WEGOVY, fmtMoney, initials, calcAge, productById, formatDate, StatusBadge */
const { useState: uS2, useMemo: uM2 } = React;
// ===== Patient list =====
function PatientList({ patients, setRoute, openPatient, onNewPatient }) {
const [q, setQ] = uS2("");
const [filter, setFilter] = uS2("all");
const filtered = patients.filter(p => {
if (filter !== "all" && p.status !== filter) return false;
if (q && !(p.first + " " + p.last).toLowerCase().includes(q.toLowerCase())) return false;
return true;
});
return (
Caseload
Patients
{patients.length} on your caseload · {patients.filter(p => p.status === "active").length} active
Import CSV
{[["all","All"],["active","Active"],["review","Review"],["paused","Paused"],["draft","Draft"]].map(([k, l]) => (
setFilter(k)}>{l}
))}
Sort: Recent
Patient DOB · Age BMI GP Last order Status
{filtered.map(p => (
openPatient(p.id)}>
{initials(p.first, p.last)}
{p.first} {p.last}
{p.email}
{formatDate(p.dob)} · {calcAge(p.dob)}
{p.bmi.toFixed(1)} · {p.weight}kg {p.gp} {formatDate(p.lastOrder)}
))}
{filtered.length === 0 && (
No patients match your filters.
)}
);
}
// ===== New prescription wizard (Step 1: pick / add patient) =====
function NewPrescriptionWizard({ patients, setRoute, addPatient, addOrder, prefillPatientId }) {
const [step, setStep] = uS2(prefillPatientId ? 2 : 1);
const [mode, setMode] = uS2(prefillPatientId ? "existing" : "new"); // "existing" | "new"
const [selectedPatient, setSelectedPatient] = uS2(prefillPatientId || null);
const [newPatient, setNewPatient] = uS2({
first: "", last: "", dob: "", phone: "", email: "",
address: "", postcode: "",
height: "", weight: "",
gpName: "", gpSurgery: "",
});
const [cart, setCart] = uS2([]); // [{pid, qty}]
const [productTab, setProductTab] = uS2("mounjaro");
const subtotal = cart.reduce((s, ci) => s + (productById(ci.pid)?.price || 0) * ci.qty, 0);
const shipping = subtotal > 0 ? 4.95 : 0;
const tax = 0;
const total = subtotal + shipping + tax;
const bmi = newPatient.height && newPatient.weight
? (newPatient.weight / Math.pow(newPatient.height / 100, 2)).toFixed(1)
: "—";
const updateCart = (pid, delta) => {
setCart(prev => {
const found = prev.find(c => c.pid === pid);
if (!found && delta > 0) return [...prev, { pid, qty: 1 }];
if (!found) return prev;
const newQty = found.qty + delta;
if (newQty <= 0) return prev.filter(c => c.pid !== pid);
return prev.map(c => c.pid === pid ? { ...c, qty: newQty } : c);
});
};
const setQty = (pid, qty) => {
setCart(prev => {
if (qty <= 0) return prev.filter(c => c.pid !== pid);
const found = prev.find(c => c.pid === pid);
if (!found) return [...prev, { pid, qty }];
return prev.map(c => c.pid === pid ? { ...c, qty } : c);
});
};
const products = productTab === "mounjaro" ? MOUNJARO : WEGOVY;
const currentPatient = selectedPatient ? patients.find(p => p.id === selectedPatient) : null;
const submitOrder = () => {
let pid = selectedPatient;
if (mode === "new") {
const newP = addPatient({
...newPatient,
bmi: bmi !== "—" ? parseFloat(bmi) : 0,
height: parseFloat(newPatient.height) || 0,
weight: parseFloat(newPatient.weight) || 0,
gp: newPatient.gpName + " · " + newPatient.gpSurgery,
});
pid = newP.id;
}
const orderId = addOrder({ patientId: pid, items: cart, total });
setRoute({ name: "order-confirmation", orderId });
};
return (
New prescription
Submit a prescription
Three steps — patient details, treatment, then payment. Dispensing begins as soon as we receive your sign-off.
Save as draft
1 ? " done" : "")}>
{step > 1 ?
Patient
2 ? " done" : "")}>
{step > 2 ?
Treatment
{step === 1 && (
setMode("existing")}>
Existing patient
setMode("new")}>
New patient
{mode === "existing" ? (
{patients.map(p => (
setSelectedPatient(p.id)} style={{
textAlign: "left",
padding: "12px 14px",
background: selectedPatient === p.id ? "var(--accent-soft)" : "transparent",
border: "1px solid " + (selectedPatient === p.id ? "var(--accent)" : "var(--line)"),
borderRadius: 10,
cursor: "pointer",
fontFamily: "inherit",
display: "flex",
gap: 12,
alignItems: "center",
}}>
{initials(p.first, p.last)}
{p.first} {p.last}
DOB {formatDate(p.dob)} · BMI {p.bmi.toFixed(1)} · {p.orders} prior orders
{selectedPatient === p.id &&
}
))}
) : (
)}
Patient details are stored against your clinic record so you can re-prescribe without re-entering information. Demographics support the pharmacist's clinical check.
Required for GLP-1
✓ Age, height, weight (BMI ≥ 27)
✓ Confirmed delivery address
✓ Registered GP
✓ Prescriber sign-off (you)
)}
{step === 2 && (
setProductTab("mounjaro")}>Mounjaro · Tirzepatide
setProductTab("wegovy")}>Wegovy · Semaglutide
{products.map(p => {
const inCart = cart.find(c => c.pid === p.id);
return (
p.stock !== "out" && updateCart(p.id, inCart ? 0 : 1)}>
{p.stock === "in" ? "In stock" : p.stock === "low" ? "Low stock" : "Out of stock"}
{p.img ?
:
}
{p.strength}
{p.name} · 4 doses {p.line === "starter" ? "· starter dose" : ""}
{fmtMoney(p.price)}
{inCart ? (
e.stopPropagation()}>
updateCart(p.id, -1)}>−
{inCart.qty}
updateCart(p.id, 1)}>+
) : (
{ e.stopPropagation(); if (p.stock !== "out") setQty(p.id, 1); }} disabled={p.stock === "out"}>Add
)}
);
})}
Prescriber notes (optional)
)}
step > 1 ? setStep(step - 1) : setRoute("dashboard")}>
← {step > 1 ? "Back" : "Cancel"}
{step === 1 && (
setStep(2)}>
Continue to treatment
)}
{step === 2 && (
setRoute({ name: "checkout", cart, patient: mode === "new" ? newPatient : currentPatient, mode, total, subtotal, shipping, onSubmit: submitOrder })}>
Continue to payment · {fmtMoney(total)}
)}
);
}
function NewPatientForm({ patient, setPatient, bmi }) {
const u = (k) => (e) => setPatient({ ...patient, [k]: e.target.value });
return (
<>
Identity
Legal name as on photo ID. We'll match against the GP record.
Contact
Used for delivery confirmation and pharmacist follow-up only.
Clinical
Required for the pharmacist's BMI eligibility check.
Registered GP
We'll notify the GP that a private prescription has been issued, in line with GMC guidance.
);
}
function SidePanel({ title, patient, children }) {
return (
{title}
{patient && patient.first && (
{initials(patient.first || "?", patient.last || "?")}
{patient.first} {patient.last}
{patient.dob ? formatDate(patient.dob) + " · " : ""}{patient.bmi ? "BMI " + (typeof patient.bmi === "number" ? patient.bmi.toFixed(1) : patient.bmi) : ""}
)}
{children}
);
}
function CartSummary({ cart, subtotal, shipping, total }) {
return (
{cart.length === 0 ? (
No items added yet.Pick a strength to begin.
) : (
<>
{cart.map(c => {
const p = productById(c.pid);
return (
{p.img ?
:
{p.strength}
}
{p.name}
{p.strength} · 4 doses · qty {c.qty}
{fmtMoney(p.price * c.qty)}
);
})}
Subtotal {fmtMoney(subtotal)}
Tracked delivery {fmtMoney(shipping)}
VAT included
Total {fmtMoney(total)}
)}
: