/* ============================================================
lib.jsx — shared hooks, helpers, icons, chart primitives
============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ---------- persistence ---------- */
function useLocalState(key, initial) {
const k = "roan_" + key;
const BASE = (typeof API !== "undefined" && API.baseUrl) || "/api";
// Laad initieel uit localStorage (snelle start)
const [val, setValRaw] = useState(() => {
try {
const s = localStorage.getItem(k);
return s !== null ? JSON.parse(s) : initial;
} catch (e) { return initial; }
});
// Haal bij opstarten de waarde op uit de database
useEffect(() => {
if (typeof API === "undefined" || API.useMock) return;
fetch(`${BASE}/data/${encodeURIComponent(key)}`, { credentials: "include" })
.then(r => r.json())
.then(({ found, value }) => {
if (found && value !== null) {
setValRaw(value);
try { localStorage.setItem(k, JSON.stringify(value)); } catch (e) {}
}
})
.catch(() => {}); // stil falen — localStorage blijft als fallback
}, [key]); // eslint-disable-line
// Sla op in localStorage én database bij elke wijziging
const setVal = (updater) => {
setValRaw(prev => {
const next = typeof updater === "function" ? updater(prev) : updater;
try { localStorage.setItem(k, JSON.stringify(next)); } catch (e) {}
if (typeof API !== "undefined" && !API.useMock) {
fetch(`${BASE}/data/${encodeURIComponent(key)}`, {
method: "POST", credentials: "include",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ value: next }),
}).catch(() => {});
}
return next;
});
};
return [val, setVal];
}
/* ---------- formatting ---------- */
const fmtEur = (n, dec = 0) =>
"€" + Number(n).toLocaleString("nl-NL", { minimumFractionDigits: dec, maximumFractionDigits: dec });
const fmtNum = (n) => Number(n).toLocaleString("nl-NL");
const clamp = (n, a, b) => Math.max(a, Math.min(b, n));
const NL_DAYS = ["zo", "ma", "di", "wo", "do", "vr", "za"];
const NL_DAYS_FULL = ["zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag"];
const NL_MONTHS = ["januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december"];
function fmtDateNL(d) {
return `${NL_DAYS_FULL[d.getDay()]} ${d.getDate()} ${NL_MONTHS[d.getMonth()]}`;
}
function greetingNL(d) {
const h = d.getHours();
if (h < 6) return "Goedenacht";
if (h < 12) return "Goedemorgen";
if (h < 18) return "Goedemiddag";
return "Goedenavond";
}
// monday-based start of week
function startOfWeek(d) {
const x = new Date(d);
const day = (x.getDay() + 6) % 7;
x.setDate(x.getDate() - day);
x.setHours(0, 0, 0, 0);
return x;
}
function addDays(d, n) { const x = new Date(d); x.setDate(x.getDate() + n); return x; }
function sameDay(a, b) { return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
function isoKey(d) { return d.toISOString().slice(0, 10); }
/* ---------- icons (stroke, lucide-ish, original) ---------- */
function Icon({ name, ...p }) {
const paths = {
home: <>,
wallet: <>,
chart: <>,
target: <>,
calendar: <>,
check: <>,
checkCircle: <>,
flame: <>,
smile: <>,
droplet: <>,
dumbbell: <>,
book: <>,
heart: <>,
sparkle: <>,
compass: <>,
sun: <>,
moon: <>,
settings: <>,
plus: <>,
minus: <>,
chevL: <>,
chevR: <>,
arrowUp: <>,
arrowDn: <>,
trend: <>,
dots: <>,
bell: <>,
search: <>,
clock: <>,
coffee: <>,
leaf: <>,
};
return (
);
}
/* ---------- widget header ---------- */
function WHead({ icon, title, sub, action, onAction, accent }) {
return (
);
}
/* ---------- circular progress ring ---------- */
function Ring({ value, max = 100, size = 84, stroke = 9, color = "var(--accent)", track = "var(--surface-3)", children, rounded = true }) {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const pct = clamp(value / max, 0, 1);
return (
);
}
/* ---------- smooth line / area chart ---------- */
function smoothPath(pts) {
if (pts.length < 2) return "";
let d = `M ${pts[0][0]} ${pts[0][1]}`;
for (let i = 0; i < pts.length - 1; i++) {
const [x0, y0] = pts[i], [x1, y1] = pts[i + 1];
const cx = (x0 + x1) / 2;
d += ` C ${cx} ${y0}, ${cx} ${y1}, ${x1} ${y1}`;
}
return d;
}
function LineChart({ data, height = 150, color = "var(--accent)", fill = true, pad = 6, showDot = true, gridY = 3 }) {
const ref = useRef(null);
const [w, setW] = useState(400);
useEffect(() => {
if (!ref.current) return;
const ro = new ResizeObserver(es => setW(es[0].contentRect.width));
ro.observe(ref.current);
return () => ro.disconnect();
}, []);
const min = Math.min(...data), max = Math.max(...data);
const span = max - min || 1;
const H = height, topPad = 10, botPad = 10;
const innerH = H - topPad - botPad;
const pts = data.map((v, i) => [
pad + (i / (data.length - 1)) * (w - pad * 2),
topPad + innerH - ((v - min) / span) * innerH,
]);
const line = smoothPath(pts);
const area = line + ` L ${pts[pts.length-1][0]} ${H} L ${pts[0][0]} ${H} Z`;
const last = pts[pts.length - 1];
const gid = useMemo(() => "g" + Math.random().toString(36).slice(2, 8), []);
return (
);
}
/* ---------- mini sparkline bars ---------- */
function Bars({ data, height = 46, color = "var(--accent)", gap = 4, highlightLast = false }) {
const max = Math.max(...data, 1);
return (
{data.map((v, i) => (
))}