/* ============================================================ PainTrack App — core: icons, mock data, chart helpers ============================================================ */ const { useState, useEffect, useRef, useMemo } = React; /* ---------------- Icons ---------------- */ function Icon({ name, size = 20, stroke = 2, style, className }) { const P = { home: , pulse: , timeline: , book: , user: , heart: , moon: , walk: , pill: , check: , arrowR: , arrowL: , bell: , chart: , flag: , alert: , clock: , shield: , search: , play: , logout: , plus: , sparkle: , chevR: , dots: , calendar: , brain: , dumbbell: , needle: , download: , eye: , lock: , }; return ( ); } /* ---------------- Brand mark ---------------- */ function Logo({ size = 30 }) { return ( ); } /* ---------------- Full brand lockup (raster logo) ---------------- */ // Horizontal PainTrack lockup (figure + wordmark + tagline). Transparent PNG; // `h` sets the rendered height in px, width scales automatically. function Brand({ h = 30, className = "" }) { return ( PainTrack ); } /* ---------------- Chart helpers ---------------- */ // Build a smooth-ish path from {x,y} arrays inside a box. function smoothPath(pts) { if (pts.length < 2) return ""; let d = `M${pts[0].x},${pts[0].y}`; for (let i = 1; i < pts.length; i++) { const p0 = pts[i - 1], p1 = pts[i]; const cx = (p0.x + p1.x) / 2; d += ` C${cx},${p0.y} ${cx},${p1.y} ${p1.x},${p1.y}`; } return d; } function painColor(v) { if (v >= 7) return "#D75A3E"; if (v >= 4) return "#C9952E"; return "#2BA17E"; } // series: array of {day, pain}. procedureDay: x marker. width/height in px viewBox. function ReliefChart({ series, procedureDay = 0, w = 520, h = 230, showBand = true, retreatDay = null }) { const padL = 34, padR = 16, padT = 16, padB = 26; const maxDay = Math.max(...series.map(s => s.day), 1); const X = d => padL + (d / maxDay) * (w - padL - padR); const Y = p => padT + (1 - p / 10) * (h - padT - padB); const pts = series.map(s => ({ x: X(s.day), y: Y(s.pain) })); const line = smoothPath(pts); const area = line + ` L${pts[pts.length - 1].x},${h - padB} L${pts[0].x},${h - padB} Z`; const gid = "rg" + Math.round(procedureDay * 97 + maxDay); return ( {[0, 2.5, 5, 7.5, 10].map((v, i) => ( ))} {[0, 5, 10].map((v, i) => ( {v} ))} {showBand && procedureDay != null && ( )} {retreatDay && ( )} {procedureDay != null && ( )} {series.map((s, i) => (i % Math.ceil(series.length / 7) === 0 || i === series.length - 1) && ( ))} ); } // tiny sparkline from array of numbers (pain 0-10) function Spark({ data, w = 96, h = 30, color = "#11705C" }) { const max = 10; const pts = data.map((v, i) => ({ x: 2 + (i / (data.length - 1)) * (w - 4), y: 3 + (1 - v / max) * (h - 6), })); return ( ); } /* ---------------- Mock data ---------------- */ // weekly pain readings; procedure anchored function curve(start, points) { return points.map((pain, i) => ({ day: i * 7, pain })); } const PATIENTS = [ { id: "okonkwo", name: "Maya Okonkwo", first: "Maya", initials: "MO", age: 64, condition: "Lumbar RFA · L4–L5", proc: { type: "Radiofrequency ablation", level: "L4–L5", date: "Dec 2, 2025", day: 14 }, status: "responding", adherence: 92, last: "2h ago", meds: "None", phone: "patient", series: curve(0, [8, 8, 7, 3, 1, 1, 1, 2, 1, 2, 2, 3, 3, 4]), retreatDay: 98, summary: "Strong responder. Pain fell from 8 to 1 within 11 days of L4–L5 RFA and has held at 1–2/10 for 6 months. Adherence 92%, no medication escalation. Relief curve consistent with durable benefit; next re-treatment window forecast ~Q1.", }, { id: "delgado", name: "Rafael Delgado", first: "Rafael", initials: "RD", age: 51, condition: "Facet injection · cervical", proc: { type: "Facet injection", level: "Cervical", date: "Jan 18, 2026", day: 0 }, status: "nonresponder", adherence: 74, last: "1d ago", meds: "Naproxen", series: curve(0, [7, 7, 6, 7, 6, 7, 6, 7, 6, 6]), retreatDay: null, summary: "Limited response. Cervical facet injection produced no meaningful change — pain steady at 6–7/10 across 21 days, onset never detected. Consider diagnostic medial branch block before repeating. Flagged for case review.", }, { id: "bauer", name: "Lena Bauer", first: "Lena", initials: "LB", age: 58, condition: "Lumbar RFA · L3–L4", proc: { type: "Radiofrequency ablation", level: "L3–L4", date: "Jun 30, 2025", day: 0 }, status: "retreat", adherence: 88, last: "5h ago", meds: "None", series: curve(0, [8, 2, 1, 1, 2, 2, 3, 4, 5, 5, 6, 6]), retreatDay: 56, summary: "Relief fading — re-treatment due. Excellent benefit for ~7 months; pain now climbing from 2 back toward 6/10 over the last 5 weeks. Curve shape matches prior RFA. Recommend booking repeat RFA within the forecast window.", }, { id: "nilsson", name: "Anders Nilsson", first: "Anders", initials: "AN", age: 47, condition: "Epidural · L5–S1", proc: { type: "Transforaminal epidural", level: "L5–S1", date: "Jan 5, 2026", day: 7 }, status: "responding", adherence: 88, last: "3h ago", meds: "Gabapentin", series: curve(0, [7, 6, 2, 2, 3, 2, 3, 3, 3]), retreatDay: null, summary: "Responding, early plateau. Transforaminal epidural cut radicular pain from 7 to 2 within a week. Holding at 2–3/10. Adherence 88%. Continue physio; re-assess durability at the 8-week check-in.", }, { id: "haddad", name: "Sara Haddad", first: "Sara", initials: "SH", age: 62, condition: "Medial branch block", proc: { type: "Medial branch block", level: "L4–L5", date: "Jan 22, 2026", day: 0 }, status: "nonresponder", adherence: 69, last: "6d ago", meds: "Acetaminophen", series: curve(0, [6, 6, 5, 6, 6, 5, 6]), retreatDay: null, summary: "Diagnostic block negative. <50% relief reported after medial branch block — does not meet threshold for RFA candidacy. Pain unchanged at 6/10. Revisit diagnosis; consider alternate pain generator.", }, ]; const STATUS_META = { responding: { label: "Responding", cls: "good", dot: "#11705C" }, retreat: { label: "Re-treat due", cls: "watch", dot: "#C58A2E" }, nonresponder:{ label: "Non-responder", cls: "flag", dot: "#D75A3E" }, }; const BODY_REGIONS = [ { id: "neck", label: "Head / neck", d: null, cx: 60, cy: 20, r: 15 }, { id: "shoulders", label: "Shoulders", x: 30, y: 42, w: 60, h: 16 }, { id: "midback", label: "Mid back", x: 34, y: 60, w: 52, h: 36 }, { id: "lowback", label: "Lower back", x: 34, y: 98, w: 52, h: 34 }, { id: "lhip", label: "Left hip", x: 30, y: 134, w: 26, h: 22 }, { id: "rhip", label: "Right hip", x: 64, y: 134, w: 26, h: 22 }, { id: "lknee", label: "Left knee", x: 34, y: 178, w: 22, h: 20 }, { id: "rknee", label: "Right knee", x: 64, y: 178, w: 22, h: 20 }, ]; const EDUCATION = [ { tag: "Procedure", title: "What is radiofrequency ablation?", desc: "How RFA quiets the nerves carrying your pain signal — and why relief takes a couple of weeks to arrive.", meta: "4 min read", grad: "linear-gradient(135deg,#E2EFE9,#C9E2D6)", dot: "#11705C", body: "Radiofrequency ablation (RFA) uses heat from a precise radio-wave current to interrupt the small medial-branch nerves that carry pain signals from arthritic facet joints. It does not damage muscle or the spinal cord. Because the nerve is quieted rather than removed, you may notice relief build gradually over 1–3 weeks rather than immediately. Most people feel mild soreness at the needle sites for a few days. Relief commonly lasts 6–12 months; nerves can slowly regrow, which is why your relief curve helps your team time any repeat." }, { tag: "After care", title: "What to expect after an epidural", desc: "The normal timeline of soreness, onset and relief — so day-three discomfort doesn't feel like failure.", meta: "3 min read", grad: "linear-gradient(135deg,#F6E2DA,#EFCBBC)", dot: "#D75A3E", body: "After a transforaminal epidural steroid injection, it is normal to feel a temporary flare for 24–72 hours before the steroid takes effect. Onset of relief typically begins between day 2 and day 7. Keep logging daily — a brief rise before the dip is expected and tells your clinician the medication is settling in. Call the clinic for fever, severe headache, or new weakness." }, { tag: "Living with pain", title: "Why tracking beats remembering", desc: "The science of recall bias in chronic pain, and how 30 seconds a day changes your next appointment.", meta: "5 min read", grad: "linear-gradient(135deg,#F3E7CF,#E8D2A6)", dot: "#C58A2E", body: "Human memory compresses weeks of fluctuating pain into a single fuzzy impression, heavily weighted toward how you feel right now. That recall bias makes it hard to judge whether a procedure truly worked. A 30-second daily check-in captures the real shape of your relief — when it started, how deep it went, and when it began to return — so decisions about repeat treatment rest on evidence, not guesswork." }, ]; Object.assign(window, { React, useState, useEffect, useRef, useMemo, Icon, Logo, Brand, ReliefChart, Spark, smoothPath, painColor, PATIENTS, STATUS_META, BODY_REGIONS, EDUCATION });