{value || placeholder}
{clearable && value && }
{ setOpen(false); setQ(""); }} />
)}
{open && !isMob && (
<>
);
}
function ClinicalForm({ patient, onSave, onCancel, repo }) {
const cl = patient.clinical || emptyClinical();
const [c, setC] = useState({ ...emptyClinical(), ...cl, name: cl.name || patient.name, age: cl.age || patient.age, sex: cl.sex || patient.sex, phone: cl.phone || patient.phone, preOp: { ...emptyPreOp(), ...(cl.preOp || {}), lesionType: cl.preOp?.lesionType || patient.type || "", malSite: cl.preOp?.malSite || patient.malignancySite || "", primaryDx: cl.preOp?.primaryDx || patient.diagnosis || "", procedure: cl.preOp?.procedure || patient.plannedProcedure || "", plan: cl.preOp?.plan || patient.malignancyPlan || "", benignCategory: cl.preOp?.benignCategory || patient.benignCategory || "" } });
const [sec, setSec] = useState({ s1: true, s2: false, s3: false, s4: false });
const p = c.preOp;
const setP = (u) => setC({ ...c, preOp: { ...p, ...u } });
const bmi = c.height && c.weight ? (parseFloat(c.weight) / ((parseFloat(c.height) / 100) ** 2)).toFixed(1) : "";
const inp = { width: "100%", padding: "7px 10px", border: "1.5px solid #e2e8f0", borderRadius: 8, fontSize: "0.84rem", fontFamily: "'Outfit',sans-serif", boxSizing: "border-box" };
const lbl = { display: "block", fontSize: "0.68rem", fontWeight: 600, color: "#475569", marginBottom: 3, textTransform: "uppercase", letterSpacing: "0.04em" };
const g2 = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 10 };
const g3 = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 10 };
const chip = (sel, clr) => ({ padding: "4px 10px", borderRadius: 16, border: `1.5px solid ${sel ? clr : "#e2e8f0"}`, background: sel ? clr + "12" : "#fff", cursor: "pointer", fontSize: "0.72rem", fontFamily: "'Outfit',sans-serif", fontWeight: sel ? 600 : 400, color: sel ? clr : "#94a3b8" });
const [formWarnings, setFormWarnings] = useState(null);
const doSave = () => {
const emptySections = [];
const missingFields = [];
// Key fields — always warn individually
if (!c.mrd) missingFields.push("MRD Number");
const primaryDx = p.lesionType === "malignancy" ? p.malSite : p.primaryDx;
if (!primaryDx) missingFields.push("Primary Diagnosis");
if (!p.procedure) missingFields.push("Primary Procedure");
// Section 1: Particulars — check if ANY field filled
const hasParticulars = c.mrd || c.bloodGroup || c.state || c.district || c.occupation || c.height || c.weight || (c.comorbidities || []).length > 0;
if (!hasParticulars) emptySections.push("Particulars (MRD, Blood Group, Address, etc.)");
// Section 2: Clinical Details — check if ANY field filled
const hasClinical = (c.chiefComplaints || []).filter(Boolean).length > 0 || c.pulse || c.bp || c.spo2 || c.abdominalFindings || c.dre || c.chest || c.cvs || (c.pastHistory || []).filter(Boolean).length > 0 || (c.prevSurgeries || []).filter(Boolean).length > 0;
if (!hasClinical) emptySections.push("Clinical Details (Complaints, Vitals, Examination)");
// Section 3: Investigations — check if ANY investigation is done
const invKeys = ["cbc","coagulation","peripheralSmear","reticulocyte","dimer","crossmatch","lft","kft","glucose","lipid","pancreatic","protein","thyroid","cortisol","parathyroid","insulin","tumorMarkers","iron","vitB12Folate","urineExam","serology","abg","stoolExam","ascitic","pleural","usg","ncct","cect","mri","cemri","mrcp","ctAngio","doppler","petScan","hidaScan","bariumStudy","defecography","fistuloGram","contrastStudy","ercp","ugiEndoscopy","colonoscopy","proctosigmoidoscopy","cystoscopy","eus","capsuleEndoscopy","anorectalManometry","fnac","hpe","trucut"];
const hasInvestigations = invKeys.some(k => c[k]?.done) || (c.additionalInvestigations || []).length > 0;
if (!hasInvestigations) emptySections.push("Investigations (Lab work, Imaging, Endoscopy)");
// Section 4: Pre-Op Diagnosis
const hasPreOp = p.lesionType || p.primaryDx || p.malSite || p.procedure;
if (!hasPreOp) emptySections.push("Pre-Operative Diagnosis");
if (missingFields.length > 0 || emptySections.length > 0) {
setFormWarnings({ missingFields, emptySections, onProceed: () => { setFormWarnings(null); doSaveConfirmed(); } });
return;
}
doSaveConfirmed();
};
const doSaveConfirmed = () => {
onSave({ ...c, clinicalDone: true }, { name: c.name, age: c.age, sex: c.sex, phone: c.phone, diagnosis: p.lesionType === "malignancy" ? ((p.preOpHistology === "Others" ? p.histologyOther : p.preOpHistology) || "") + " " + (p.malSite || "") : p.primaryDx, plannedProcedure: p.procedure, malignancyPlan: p.plan, type: p.lesionType || patient.type, benignCategory: p.benignCategory || patient.benignCategory });
};
// Procedure options for current diagnosis
const getProcedures = () => {
let procs = [];
if (p.lesionType === "benign" && p.primaryDx) {
const found = repo.allBenignDx.find(d => d.dx === p.primaryDx);
const cat = found?.category || p.benignCategory || "";
// Get ALL procedures from the entire category (not just this diagnosis)
if (cat && repo.benignCats && repo.benignCats[cat]) {
const allCatProcs = [];
Object.values(repo.benignCats[cat].diagnoses || {}).forEach(dxProcs => {
dxProcs.forEach(pr => { if (!allCatProcs.includes(pr)) allCatProcs.push(pr); });
});
procs = allCatProcs;
} else if (found) {
procs = [...found.procedures];
}
// Also add standalone procedures mapped to same category
if (cat && repo.customRepo) {
const catProcs = (repo.customRepo.opProcs || []).filter(proc => (repo.customRepo.procCategories || {})[proc] === cat);
procs = [...new Set([...procs, ...catProcs])];
}
}
if (p.lesionType === "malignancy" && p.malSite && repo.maligSites[p.malSite]) {
procs = [...repo.maligSites[p.malSite].procedures];
}
return procs;
};
return (
setQ(e.target.value)} onClick={e => e.stopPropagation()} style={{ width: "100%", padding: "10px 14px", border: "1.5px solid #e2e8f0", borderRadius: 10, fontSize: "0.92rem", fontFamily: "'Outfit',sans-serif", boxSizing: "border-box" }} />
{list}
{ setOpen(false); setQ(""); }} />
)}
);
}
function Bdg({ children, bg, color, border }) { return {children}; }
function CollapseSection({ title, icon, open, onToggle, color = "#1565c0", children }) {
return (
setQ(e.target.value)} onClick={e => e.stopPropagation()} style={{ ...S.input, marginBottom: 0, fontSize: "0.84rem", padding: "8px 12px" }} />
{list}
{open &&
);
}
function LabCard({ label, fields, data, onChange, color = "#6a1b9a" }) {
const d = data || { done: false, date: "" };
const hasData = d.done || fields.some(f => d[f.key]);
const toggle = () => onChange({ ...d, done: !d.done });
const inp = { width: "100%", padding: "5px 7px", border: "1px solid #e2e8f0", borderRadius: 6, fontSize: "0.78rem", fontFamily: "'Outfit',sans-serif", boxSizing: "border-box" };
return (
{children}
}
{(d.done || hasData) &&
}
);
}
function MultiInput({ label, values, onChange, max = 3 }) {
const add = () => { if (values.length < max) onChange([...values, ""]); };
return (
onChange({ ...d, date: e.target.value })} style={{ ...inp, maxWidth: 160, fontSize: "0.74rem" }} />
{fields.map(f => (
onChange({ ...d, [f.key]: e.target.value })} placeholder="—" style={inp} />
))}
{values.map((v, i) => (
);
}
// ─── Photo/File Upload Component ─────────────────────────────
function PhotoUpload({ photos, onChange, label, maxPhotos = 10, accept = "image/jpeg,image/png,image/webp" }) {
const handleAdd = (e) => {
const files = Array.from(e.target.files || []);
if (files.length === 0) return;
const current = photos || [];
const remaining = maxPhotos - current.length;
files.slice(0, remaining).forEach(file => {
if (file.size > 2000000) return; // 2MB max per file
const reader = new FileReader();
reader.onload = () => {
onChange([...current, { data: reader.result, name: file.name, date: new Date().toISOString().slice(0,10), caption: "" }]);
};
reader.readAsDataURL(file);
});
e.target.value = "";
};
const remove = (i) => onChange((photos || []).filter((_, j) => j !== i));
const updateCaption = (i, cap) => { const n = [...(photos || [])]; n[i] = { ...n[i], caption: cap }; onChange(n); };
const arr = photos || [];
return (
{ const n = [...values]; n[i] = e.target.value; onChange(n); }} style={{ flex: 1, padding: "6px 10px", border: "1px solid #e2e8f0", borderRadius: 7, fontSize: "0.82rem", fontFamily: "'Outfit',sans-serif" }} placeholder={`${label} ${i + 1}`} />
{values.length > 1 && }
))}
{values.length < max && }
{arr.length < maxPhotos && }
{arr.length > 0 &&
{arr.map((p, i) => (
}
{p.data.startsWith("data:image") ? (
) : (
))}
{"📄"} PDF
)}
updateCaption(i, e.target.value)} placeholder="Caption..." style={{ width: "100%", border: "none", borderTop: "1px solid #e2e8f0", padding: "4px 6px", fontSize: "0.64rem", fontFamily: "'Outfit',sans-serif", boxSizing: "border-box", outline: "none" }} />
{/* Section 1: Patient Particulars */}
setSec({ ...sec, s1: !sec.s1 })} color="#2e7d32">
{/* Section 2: Clinical Details */}
setSec({ ...sec, s2: !sec.s2 })} color="#c62828">
setC({ ...c, chiefComplaints: v })} />
setC({ ...c, pastHistory: v })} />
setC({ ...c, prevSurgeries: v })} />
setC({ ...c, otherDetails: v })} />
setC({ ...c, name: e.target.value })} />
setC({ ...c, age: e.target.value })} />
setC({ ...c, phone: e.target.value })} />
setC({ ...c, mrd: e.target.value })} />
{c.occupation === "Other" && setC({ ...c, occupationOther: e.target.value })} placeholder="Specify occupation..." />}
setC({ ...c, height: e.target.value })} />
setC({ ...c, weight: e.target.value })} />
= 30 ? "#c62828" : "#2e7d32") : "#94a3b8", fontWeight: 600 }}>{bmi || "—"}
{COMORBIDITIES.map(cm => )}
setC({ ...c, comorbidOther: e.target.value })} />
setC({ ...c, pacClearedDate: e.target.value })} />
Examination
setC({ ...c, pulse: e.target.value })} placeholder="/min" />
setC({ ...c, bp: e.target.value })} placeholder="mmHg" />
setC({ ...c, spo2: e.target.value })} placeholder="%" />
setC({ ...c, chest: e.target.value })} />
setC({ ...c, cvs: e.target.value })} />