"use client"; import { useState, useMemo } from "react"; import Link from "next/link"; import { useParams } from "next/navigation"; import { DashLayout } from "@/components/dashboard/DashLayout"; import { DEMO_INFUSION_ORDERS, INFUSION_CHECKLIST } from "@/lib/data/nursing-mock"; import { formatDateTime } from "@/lib/data/dashboard-mock"; type HistoryForm = { lastMeal: string; pregnancyStatus: string; priorIVExperience: string; currentSymptoms: string; confirmedAllergies: string; currentMedicationsReconfirm: string; }; type Vitals = { bpSystolic: string; bpDiastolic: string; heartRate: string; temperature: string; spo2: string; weight: string; }; const EMPTY_HISTORY: HistoryForm = { lastMeal: "", pregnancyStatus: "", priorIVExperience: "", currentSymptoms: "", confirmedAllergies: "", currentMedicationsReconfirm: "", }; const EMPTY_VITALS: Vitals = { bpSystolic: "", bpDiastolic: "", heartRate: "", temperature: "", spo2: "", weight: "", }; const ORDER_CSS = ` .ord-back { font-size:13px;color:var(--teal);text-decoration:none;margin-bottom:18px;display:inline-block; } .emergency-bar { display:flex;justify-content:space-between;align-items:center; padding:14px 20px;background:linear-gradient(135deg,#FBE7E7 0%,#FFF4F4 100%); border:1.5px solid #F5BEBE;border-radius:var(--radius-sm); margin-bottom:20px;flex-wrap:wrap;gap:12px; } .eb-text { font-size:12px;color:#A62626;font-weight:500;line-height:1.5; } .eb-text strong { font-weight:700; } .eb-actions { display:flex;gap:8px; } .eb-call-btn, .eb-video-btn { padding:9px 18px;border-radius:50px;border:none; font-size:12px;font-weight:600;font-family:var(--font-display); cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block; transition:transform .15s; } .eb-call-btn { background:#D42C2C;color:#fff; } .eb-video-btn { background:#fff;color:#D42C2C;border:1.5px solid #D42C2C; } .eb-call-btn:hover, .eb-video-btn:hover { transform:translateY(-1px); } .ord-grid { display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px; } @media(max-width:1024px){ .ord-grid { grid-template-columns:1fr; } } .ord-info-block { background:var(--white);border-radius:var(--radius);padding:24px; border:1.5px solid var(--border);box-shadow:var(--shadow); } .oib-title { font-size:15px;font-weight:600;color:var(--text);margin-bottom:12px;letter-spacing:-0.3px; } .oib-title em { font-style:italic;font-family:var(--font-serif);color:var(--teal);font-weight:400; } .info-row { display:flex;justify-content:space-between;padding:8px 0;font-size:12px;border-bottom:1px dashed var(--border); } .info-row:last-child { border-bottom:none; } .info-row-label { color:var(--text-3); } .info-row-val { color:var(--text);font-weight:500; } .allergy-box { padding:14px;border-radius:var(--radius-sm); background:#FBE7E7;border-left:3px solid #D42C2C; font-size:12px;color:#8B1F1F;line-height:1.6;margin-top:10px; } .allergy-box strong { display:block;margin-bottom:4px;font-weight:700; } .protocol-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px; } .proto-row { padding:10px 14px;background:var(--sky-pale);border-radius:var(--radius-sm); display:flex;justify-content:space-between;align-items:center; } .proto-ing { font-size:12px;color:var(--text); } .proto-dose { font-size:12px;font-weight:600;color:var(--teal); } .doctor-notes-box { padding:14px;border-radius:var(--radius-sm); background:var(--sky-pale);border-left:3px solid var(--teal); margin-top:14px;font-size:12px;color:var(--text-2);line-height:1.7; } .doctor-notes-box strong { color:var(--teal); } .phase-section { margin-bottom:28px; } .phase-header { display:flex;align-items:center;gap:12px;margin-bottom:14px; padding-bottom:10px;border-bottom:2px solid var(--border); } .phase-icon { width:36px;height:36px;border-radius:10px;background:var(--sky-pale); display:flex;align-items:center;justify-content:center;font-size:18px; } .phase-title { font-size:15px;font-weight:600;color:var(--text);letter-spacing:-0.3px; } .phase-title em { font-style:italic;font-family:var(--font-serif);color:var(--teal);font-weight:400; } .phase-count { font-size:11px;color:var(--text-3);margin-left:auto; } .step-card { display:flex;gap:14px;padding:14px 16px;border-radius:var(--radius-sm); border:1.5px solid var(--border);background:var(--white);margin-bottom:10px; transition:all .2s; } .step-card.done { background:#E5F5F3;border-color:#0A7B6E; } .step-checkbox { width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border); display:flex;align-items:center;justify-content:center;flex-shrink:0; cursor:pointer;transition:all .15s;background:var(--white);margin-top:1px; } .step-card.done .step-checkbox { background:#0A7B6E;border-color:#0A7B6E;color:#fff; } .step-body { flex:1;min-width:0; } .step-label { font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px; } .step-card.done .step-label { color:#0A7B6E;text-decoration:line-through;text-decoration-thickness:1px;opacity:0.8; } .step-desc { font-size:11px;color:var(--text-3);line-height:1.6; } .step-mandatory { font-size:9px;padding:2px 8px;border-radius:50px;background:#FFF4E6;color:#D97706;margin-left:8px;font-weight:600; } .consent-card { padding:20px;border-radius:var(--radius-sm); background:var(--white);border:2px solid var(--border); } .consent-card.signed { border-color:#0A7B6E;background:#F0FBF9; } .consent-body { font-size:12px;color:var(--text-2);line-height:1.75;margin-bottom:14px; } .consent-body ul { margin:8px 0 8px 20px;padding:0; } .consent-signature { padding:14px;background:var(--off-white);border-radius:var(--radius-sm); border:1px dashed var(--border-strong);margin-top:10px; } .consent-sig-input { width:100%;padding:10px 14px;border-radius:var(--radius-sm); border:1.5px solid var(--border);background:var(--white); font-size:13px;font-family:var(--font-display);outline:none; } .consent-sig-input:focus { border-color:var(--sky); } .consent-confirm-btn { margin-top:10px;padding:10px 24px;border-radius:50px;border:none; background:linear-gradient(145deg,var(--teal),var(--sky));color:#fff; font-size:12px;font-weight:600;font-family:var(--font-display);cursor:pointer; box-shadow:0 3px 12px rgba(26,126,168,0.25);transition:transform .2s; } .consent-confirm-btn:hover { transform:translateY(-1px); } .consent-confirm-btn:disabled { background:var(--border);cursor:not-allowed;box-shadow:none;transform:none; } .history-form { display:grid;grid-template-columns:1fr 1fr;gap:14px; } @media(max-width:768px){ .history-form { grid-template-columns:1fr; } } .hf-field { display:flex;flex-direction:column;gap:5px; } .hf-label { font-size:11px;color:var(--text-2);font-weight:500;letter-spacing:0.3px; } .hf-input { padding:10px 12px;border-radius:var(--radius-sm); border:1.5px solid var(--border);background:var(--off-white); font-size:12px;font-family:var(--font-display);outline:none; } .hf-input:focus { border-color:var(--sky); } .hf-textarea { resize:none;line-height:1.6; } .vitals-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px; } @media(max-width:768px){ .vitals-grid { grid-template-columns:1fr 1fr; } } .vt-field { padding:12px;background:var(--off-white);border-radius:var(--radius-sm); border:1.5px solid var(--border); } .vt-label { font-size:10px;color:var(--text-3);letter-spacing:0.5px;margin-bottom:4px; } .vt-input { width:100%;padding:6px 0;border:none;background:transparent; font-size:15px;font-weight:600;color:var(--text);outline:none; } .vt-unit { font-size:10px;color:var(--text-3);margin-left:4px; } .close-order-bar { padding:24px;border-radius:var(--radius); background:linear-gradient(135deg,#F0FBF9 0%,#E5F5F3 100%); border:2px solid #0A7B6E;margin-top:24px; } .close-order-bar.locked { background:var(--off-white);border-color:var(--border);opacity:0.9; } .cob-title { font-size:16px;font-weight:600;color:#0A7B6E;margin-bottom:6px; } .close-order-bar.locked .cob-title { color:var(--text-3); } .cob-sub { font-size:12px;color:var(--text-2);line-height:1.6;margin-bottom:14px; } .cob-btn { padding:12px 32px;border-radius:50px;border:none; background:#0A7B6E;color:#fff;font-size:13px;font-weight:600; font-family:var(--font-display);cursor:pointer;box-shadow:0 4px 16px rgba(10,123,110,0.3); } .cob-btn:disabled { background:var(--border);cursor:not-allowed;box-shadow:none; } .cob-locked-text { font-size:12px;color:#D97706;font-weight:600; } .noc-open-btn { padding:10px 22px;border-radius:50px;border:none; background:linear-gradient(145deg,var(--teal),var(--sky));color:#fff; font-size:12px;font-weight:600;font-family:var(--font-display); cursor:pointer;text-decoration:none;display:inline-block; box-shadow:0 3px 12px rgba(26,126,168,0.25); } .vm-overlay { position:fixed;inset:0;z-index:300; display:flex;align-items:center;justify-content:center;padding:20px; background:rgba(0,0,0,0.85); } .vm-card { width:100%;max-width:720px;background:#111;border-radius:var(--radius); padding:28px;color:#fff; } .vm-title { font-size:18px;font-weight:600;margin-bottom:8px; } .vm-title em { font-style:italic;font-family:var(--font-serif);color:#5BB8F5;font-weight:400; } .vm-sub { font-size:13px;color:rgba(255,255,255,0.6);margin-bottom:18px;line-height:1.6; } .vm-preview { width:100%;aspect-ratio:16/10;background:linear-gradient(135deg,#1A7EA8 0%,#0F5C7D 100%); border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center; flex-direction:column;gap:14px;margin-bottom:16px;position:relative;overflow:hidden; } .vm-preview::before { content:'';position:absolute;inset:0; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.15),transparent 50%); } .vm-avatar { width:100px;height:100px;border-radius:50%; background:rgba(255,255,255,0.15);backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center; font-size:42px;position:relative;z-index:1; border:2px solid rgba(255,255,255,0.3); } .vm-doc-name { font-size:18px;font-weight:600;z-index:1;position:relative; } .vm-pulse { font-size:12px;color:#5BB8F5;z-index:1;position:relative;animation:pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity:0.5; } 50% { opacity:1; } } .vm-controls { display:flex;gap:10px;justify-content:center;flex-wrap:wrap; } .vm-btn { padding:10px 22px;border-radius:50px;border:none; font-size:12px;font-weight:600;font-family:var(--font-display);cursor:pointer; } .vm-btn.mute { background:rgba(255,255,255,0.1);color:#fff; } .vm-btn.end { background:#D42C2C;color:#fff; } .vm-close-btn { background:transparent;border:1px solid rgba(255,255,255,0.3); color:#fff;padding:8px 18px;border-radius:50px;cursor:pointer; font-size:12px;font-family:var(--font-display);margin-top:10px; } `; export default function NurseOrderDetail() { const params = useParams<{ id: string }>(); const orderId = params?.id ?? ""; const order = DEMO_INFUSION_ORDERS.find((o) => o.id === orderId); const [completedSteps, setCompletedSteps] = useState(order?.checklistCompleted ?? []); const [consentSigned, setConsentSigned] = useState(order?.consentSigned ?? false); const [historyTaken, setHistoryTaken] = useState(order?.historyTaken ?? false); const [signatureName, setSignatureName] = useState(""); const [fpStep, setFpStep] = useState<"idle" | "scanning" | "done">("idle"); const [history, setHistory] = useState(EMPTY_HISTORY); const [vitals, setVitals] = useState(EMPTY_VITALS); const [finalNotes, setFinalNotes] = useState(""); const [showVideoModal, setShowVideoModal] = useState(false); const [orderClosed, setOrderClosed] = useState(order?.status === "completed"); const mandatorySteps = useMemo(() => INFUSION_CHECKLIST.filter((s) => s.mandatory), []); const allMandatoryDone = mandatorySteps.every((s) => completedSteps.includes(s.id)); const progress = useMemo(() => { const total = INFUSION_CHECKLIST.length; return Math.round((completedSteps.length / total) * 100); }, [completedSteps]); if (!order) { return (
← Back to nurse dashboard
); } // Render pre-phase in two logical halves: patient prep steps (before drip prep) // and cannulation steps (after drip prep). This keeps the visual flow: // Patient prep → Drip prep (highlighted) → Cannulation → During → Post. const CANNULATION_STEP_IDS = new Set(["hand-hygiene", "site-selection", "skin-prep", "cannulation"]); const patientPrepSteps = INFUSION_CHECKLIST.filter((s) => s.phase === "pre" && !CANNULATION_STEP_IDS.has(s.id)); const cannulationSteps = INFUSION_CHECKLIST.filter((s) => s.phase === "pre" && CANNULATION_STEP_IDS.has(s.id)); const prepSteps = INFUSION_CHECKLIST.filter((s) => s.phase === "prep"); const duringSteps = INFUSION_CHECKLIST.filter((s) => s.phase === "during"); const postSteps = INFUSION_CHECKLIST.filter((s) => s.phase === "post"); const historyFilled = history.lastMeal && history.priorIVExperience && history.currentSymptoms; function toggleStep(stepId: string) { if (stepId === "obtain-consent" && !consentSigned) { alert("Please sign the informed consent form first (scroll up)."); return; } if (stepId === "history-taking" && !historyFilled) { alert("Please complete the patient history form first (scroll up)."); return; } if (stepId === "baseline-vitals" && !vitals.bpSystolic) { alert("Please record baseline vital signs first."); return; } setCompletedSteps((prev) => { if (prev.includes(stepId)) return prev.filter((s) => s !== stepId); return [...prev, stepId]; }); } function startFpScan() { setFpStep("scanning"); setTimeout(() => setFpStep("done"), 2400); } function signConsent() { if (!signatureName.trim()) { alert("Patient must type their full name to sign."); return; } if (fpStep !== "done") { alert("Fingerprint verification is required before signing consent."); return; } setConsentSigned(true); } function confirmHistory() { if (!historyFilled) { alert("Please fill in at least: last meal, prior IV experience, and current symptoms."); return; } setHistoryTaken(true); } function closeOrder() { if (!allMandatoryDone) { alert("All mandatory checklist steps must be complete before closing the order."); return; } if (!finalNotes.trim()) { alert("Please add final session notes before closing."); return; } setOrderClosed(true); alert("✓ Order closed. Patient record updated, physician notified."); } return ( Infusion Order · {order.id.toUpperCase()}} subtitle={`${order.patientName} · ${order.dripName} · Scheduled ${formatDateTime(order.scheduledAt)}`} allowedRoles={["nurse", "admin"]} > )}

2. Patient History Taking

Verify and update the patient's history verbally. All fields are required before starting infusion.

setHistory({ ...history, lastMeal: e.target.value })} placeholder="e.g. 10:30 AM, light breakfast" disabled={historyTaken} />
setHistory({ ...history, currentSymptoms: e.target.value })} placeholder="e.g. Feeling normal, mild fatigue" disabled={historyTaken} />