// ===== src/icons.jsx ===== // Minimal inline icon set (Lucide-style strokes, 1.6 weight) const Icon = ({ d, size = 16, stroke = 1.6, fill = "none", style, ...rest }) => ( ); const I = { Logo: (p) => ( ), Search: (p)=> }/>, Bell: (p)=> , Plus: (p)=> , Chevron:(p)=> , ChevronDown:(p)=> , ChevronUp:(p)=> , Dashboard: (p)=> }/>, Users: (p)=> }/>, Calendar:(p)=> }/>, Clipboard:(p)=> }/>, Activity:(p)=> , Package:(p)=> }/>, CreditCard:(p)=> }/>, FileText:(p)=> }/>, Chart: (p)=> }/>, Send: (p)=> , Settings:(p)=> }/>, Phone: (p)=> , Mail: (p)=> }/>, MapPin: (p)=> }/>, User: (p)=> }/>, Edit: (p)=> }/>, Trash: (p)=> }/>, Filter: (p)=> , Menu: (p)=> , More: (p)=> }/>, Download:(p)=> }/>, Print: (p)=> }/>, Check: (p)=> , X: (p)=> , Eye: (p)=> }/>, Upload: (p)=> }/>, Image: (p)=> }/>, Clock: (p)=> }/>, Heart: (p)=> , Dollar: (p)=> , Stethoscope:(p)=> }/>, ArrowUp:(p)=> , ArrowDown:(p)=> , ArrowRight:(p)=> , ArrowLeft:(p)=> , Wave: (p)=> , Sun: (p)=> }/>, Moon: (p)=> , WhatsApp:(p)=> }/>, Logout: (p)=> }/>, Lock: (p)=> }/>, Mic: (p)=> }/>, Megaphone:(p)=> }/>, Layers: (p)=> , Pin: (p)=> , Sparkle:(p)=> , Drag: (p)=> }/>, }; window.I = I; window.Icon = Icon; // ===== src/data.jsx ===== // Domain data lives in PostgreSQL (Supabase). window.DATA is the // in-memory mirror hydrated on boot by hydrateDomainTables(); every // CRUD path goes through KineticData.upsert / remove, which writes // through to Supabase and republishes the mirror. No seed/mock data. /* Removed: seed arrays for patients, appointments, therapists, departments, doctors, packages, payments, campaigns, sessions. Production hydrates from PostgreSQL (Supabase) via hydrateDomainTables(). No demo path. */ window.DATA = { patients: [], appts: [], therapists: [], departments: [], doctors: [], receptionists: [], schedules: [], packages: [], payments: [], campaigns: [], sessions: [], paymentHistory: [], subscriptions: [], treatmentMethods: [], }; // ── Reactive data hook ───────────────────────────────────────── // Components that read from window.DATA.* should call useDataVersion() // so they re-render when any table is upserted/removed/hydrated. // Emits the same event (kinetic:data-updated) already dispatched by // KineticData.upsert/remove and hydrateDomainTables. Also reacts to // kinetic:clinic-updated so calendar working hours / slot duration // changes propagate to every open calendar without a reload. function useDataVersion() { const [tick, setTick] = React.useState(0); React.useEffect(() => { const on = () => setTick(t => t + 1); window.addEventListener("kinetic:data-updated", on); window.addEventListener("kinetic:clinic-updated", on); return () => { window.removeEventListener("kinetic:data-updated", on); window.removeEventListener("kinetic:clinic-updated", on); }; }, []); return tick; } window.useDataVersion = useDataVersion; // ===== src/charts.jsx ===== // Lightweight SVG charts — no external lib. Tabular numerics, brand blues. // ── Shared hook: observe container width ────────────────────── function useContainerWidth(initialWidth) { const ref = React.useRef(null); const [w, setW] = React.useState(initialWidth); React.useEffect(() => { if (!ref.current) return; const measure = () => { if (ref.current) setW(ref.current.clientWidth); }; // Measure synchronously on mount — the observer's initial notification // can be missed, leaving the chart at its fallback width. measure(); const ro = new ResizeObserver(measure); ro.observe(ref.current); return () => ro.disconnect(); }, []); return [ref, w]; } // ── Shared chart constants ───────────────────────────────────── const CHART_PAD = { L: 38, R: 12, T: 10, B: 22 }; const Y_TICKS = 4; // Placeholder rendered by every chart when there are no points yet — // production starts with an empty DB, so charts must not crash on []. function ChartEmpty({ height }) { return (

لا توجد بيانات بعد

); } // Smooth area / line chart function AreaChart({ data, height = 160, color = "#7BBDE8", fill = "rgba(123,189,232,.22)", showGrid = true, showAxis = true, formatY = (v)=>v }) { const [ref, w] = useContainerWidth(600); if (!data || data.length === 0) return ; const { L: padL, R: padR, T: padT, B: padB } = CHART_PAD; const innerW = Math.max(w - padL - padR, 50); const innerH = height - padT - padB; const max = Math.max(...data.map(d => d.v)) * 1.15 || 1; const min = 0; const stepX = innerW / Math.max(data.length - 1, 1); const pts = data.map((d,i) => ({ x: padL + i * stepX, y: padT + innerH - ((d.v - min) / (max - min)) * innerH, v: d.v, label: d.label, })); // Catmull-Rom-ish smooth const path = pts.map((p,i) => i===0 ? `M ${p.x} ${p.y}` : `C ${pts[i-1].x + stepX/2} ${pts[i-1].y}, ${p.x - stepX/2} ${p.y}, ${p.x} ${p.y}` ).join(" "); const areaPath = `${path} L ${pts[pts.length-1].x} ${padT+innerH} L ${pts[0].x} ${padT+innerH} Z`; const ticks = Array.from({length:Y_TICKS+1},(_,i)=> min + (max-min)*(i/Y_TICKS)); return (

); } function BarChart({ data, height = 160, color = "#7BBDE8", showAxis = true, formatY = (v)=>v }) { const [ref, w] = useContainerWidth(600); if (!data || data.length === 0) return ; const { L: padL, R: padR, T: padT, B: padB } = CHART_PAD; const innerW = Math.max(w - padL - padR, 50); const innerH = height - padT - padB; const max = Math.max(...data.map(d => d.v)) * 1.15 || 1; const bandW = innerW / data.length; const barW = Math.min(bandW * 0.62, 26); const ticks = Array.from({length:Y_TICKS+1},(_,i)=> (max)*(i/Y_TICKS)); return (

); } function DonutChart({ data, size=160, thickness=22, centerLabel, centerValue }) { if (!data || data.length === 0 || data.every(d => !d.v)) return ; const total = data.reduce((s,d)=>s+d.v,0) || 1; const r = (size - thickness) / 2; const cx = size/2, cy = size/2; let acc = 0; const arcs = data.map((d,i) => { const start = acc/total * Math.PI*2 - Math.PI/2; acc += d.v; const end = acc/total * Math.PI*2 - Math.PI/2; const large = end - start > Math.PI ? 1 : 0; const x1 = cx + r*Math.cos(start), y1 = cy + r*Math.sin(start); const x2 = cx + r*Math.cos(end), y2 = cy + r*Math.sin(end); return { d:`M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}`, color: d.color, label:d.label, v:d.v }; }); return (

{arcs.map((a,i)=>(

{a.label} {Math.round(a.v/total*100)}%

))}

); } function Sparkline({ data, width=120, height=36, color="#7BBDE8" }) { if (!data || data.length === 0) return null; const max = Math.max(...data), min = Math.min(...data); const stepX = width / (data.length-1 || 1); const pts = data.map((v,i)=>`${i*stepX},${height - ((v-min)/((max-min)||1))*height}`); return ( ); } Object.assign(window, { AreaChart, BarChart, DonutChart, Sparkline });