/* ====================================================== Shared components: icons, charts, avatars, helpers ====================================================== */ const { useState, useEffect, useMemo, useRef } = React; /* ---------- Icons (inline SVG, original) ---------- */ const Icon = { dash: (p) => , book: (p) => , users: (p) => , chart: (p) => , check: (p) => , bell: (p) => , star: (p) => , search: (p) => , edit: (p) => , save: (p) => , cap: (p) => , heart: (p) => , sparkle: (p) => , alert: (p) => , arrow: (p) => , }; /* ---------- Helpers ---------- */ const totalScore = (s) => (s.collected || 0) + (s.midterm || 0) + (s.final || 0); const grade = (t) => { if (t >= 80) return { letter: "A", gpa: 4.0, tone: "good" }; if (t >= 75) return { letter: "B+", gpa: 3.5, tone: "good" }; if (t >= 70) return { letter: "B", gpa: 3.0, tone: "good" }; if (t >= 65) return { letter: "C+", gpa: 2.5, tone: "warn" }; if (t >= 60) return { letter: "C", gpa: 2.0, tone: "warn" }; if (t >= 55) return { letter: "D+", gpa: 1.5, tone: "bad" }; if (t >= 50) return { letter: "D", gpa: 1.0, tone: "bad" }; return { letter: "F", gpa: 0.0, tone: "bad" }; }; const attendanceRate = (att) => { const valid = att.filter(x => x !== "H"); const present = valid.filter(x => x === "P" || x === "L").length; return valid.length ? present / valid.length : 0; }; /* ---------- Avatar ---------- */ function Avatar({ name, seed = 1, size = 32 }) { const initials = (name || "").split(" ").map(w => w[0]).slice(0, 2).join(""); return ( {initials || "?"} ); } /* ---------- Animated number ---------- */ function AnimNum({ value, decimals = 0, suffix = "", duration = 700 }) { const [v, setV] = useState(0); const start = useRef(0); useEffect(() => { let raf, t0 = performance.now(); const from = start.current; const to = Number(value) || 0; const tick = (t) => { const p = Math.min(1, (t - t0) / duration); const eased = 1 - Math.pow(1 - p, 3); setV(from + (to - from) * eased); if (p < 1) raf = requestAnimationFrame(tick); else start.current = to; }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [value, duration]); return {v.toFixed(decimals)}{suffix}; } /* ---------- Radar chart ---------- */ function RadarChart({ axes, values, target, size = 380 }) { const n = axes.length; const cx = size / 2, cy = size / 2; const r = size * 0.34; const rings = [0.25, 0.5, 0.75, 1]; const point = (i, mag) => { const ang = -Math.PI / 2 + (i / n) * Math.PI * 2; return [cx + Math.cos(ang) * r * mag, cy + Math.sin(ang) * r * mag]; }; const polygon = (vals) => vals.map((v, i) => point(i, Math.max(0.02, v)).join(",")).join(" "); const [anim, setAnim] = useState(0); useEffect(() => { let raf, t0 = performance.now(); const tick = (t) => { const p = Math.min(1, (t - t0) / 900); setAnim(1 - Math.pow(1 - p, 3)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [JSON.stringify(values)]); const animVals = values.map(v => v * anim); return ( {rings.map((rg, i) => ( point(idx, rg).join(",")).join(" ")} /> ))} {axes.map((a, i) => { const [x, y] = point(i, 1); return ; })} {target && ( )} {animVals.map((v, i) => { const [x, y] = point(i, Math.max(0.02, v)); return ; })} {axes.map((a, i) => { const [x, y] = point(i, 1.18); const anchor = Math.abs(x - cx) < 4 ? "middle" : (x > cx ? "start" : "end"); return ( {a.short || a.label} ); })} ); } /* ---------- Donut (single value 0..1) ---------- */ function Donut({ value, size = 110, thickness = 12, label, sub, color = "url(#donutGrad)" }) { const r = (size - thickness) / 2; const c = 2 * Math.PI * r; const off = c * (1 - Math.min(1, Math.max(0, value))); return (
{label}
{sub &&
{sub}
}
); } /* ---------- Sparkline ---------- */ function Sparkline({ data, color = "var(--magenta)", width = 120, height = 36 }) { if (!data || !data.length) return null; const max = Math.max(...data), min = Math.min(...data); const norm = (v) => height - ((v - min) / Math.max(0.01, max - min)) * (height - 4) - 2; const path = data.map((v, i) => { const x = (i / (data.length - 1)) * width; return (i === 0 ? "M" : "L") + x + "," + norm(v).toFixed(1); }).join(" "); return ( ); } /* ---------- Bar chart (horizontal) ---------- */ function HBar({ value, max = 100, color }) { const pct = Math.max(0, Math.min(100, (value / max) * 100)); return (
); } /* ---------- Stat card ---------- */ function Stat({ label, value, suffix = "", trend, accent = "var(--magenta)", sub }) { return (
{label}
{suffix && {suffix}}
{sub &&
{sub}
} {trend && (
{trend.dir === "down" ? "▼" : "▲"} {trend.value}
)}
); } /* ---------- Toast ---------- */ function useToast() { const [toast, setToast] = useState(null); useEffect(() => { if (!toast) return; const id = setTimeout(() => setToast(null), 2200); return () => clearTimeout(id); }, [toast]); const Toast = () => toast ? (
{toast}
) : null; return [Toast, setToast]; } Object.assign(window, { Icon, Avatar, AnimNum, RadarChart, Donut, Sparkline, HBar, Stat, useToast, totalScore, grade, attendanceRate });