// ui.jsx — shared visual components (icons, photo placeholder, donut chart, badges) const { useState, useEffect, useRef, useMemo } = React; // ───────────────────────────────────────────────────────────── // Icons — simple, line-based, all 20px viewBox // ───────────────────────────────────────────────────────────── function Icon({ name, size = 20, stroke = 'currentColor', strokeWidth = 1.6, fill = 'none' }) { const paths = { home: <>, list: <>, user: <>, bell: <>, camera: <>, image: <>, plus: <>, check: <>, chev_r: <>, chev_l: <>, close: <>, search: <>, filter: <>, calendar: <>, clock: <>, flag: <>, bolt: <>, pin: <>, sparkle: <>, heart: <>, arrow_r: <>, eye: <>, upload: <>, dot3: <>, cog: <>, layout: <>, chart: <>, globe: <>, edit: <>, refresh: <>, logout: <>, // category icons cat_classroom: <>, cat_restroom: <>, cat_equipment: <>, cat_cleanliness: <>, cat_electricity: <>, cat_water: <>, cat_safety: <>, cat_common: <>, }; return ( {paths[name] || null} ); } // Map category id → icon name const CAT_ICONS = { classroom: 'cat_classroom', restroom: 'cat_restroom', equipment: 'cat_equipment', cleanliness: 'cat_cleanliness', electricity: 'cat_electricity', water: 'cat_water', safety: 'cat_safety', common: 'cat_common', }; // ───────────────────────────────────────────────────────────── // Photo placeholder — diagonal stripes + mono label // ───────────────────────────────────────────────────────────── function Photo({ hue = 270, label = '', tag = 'BEFORE', height = 160, dark, style = {}, after = false, url }) { const c1 = `oklch(0.50 0.22 ${hue})`; const c2 = `oklch(0.40 0.20 ${(hue + 30) % 360})`; const c3 = `oklch(0.62 0.20 ${(hue - 20 + 360) % 360})`; const bg = after ? `linear-gradient(135deg, oklch(0.50 0.18 155), oklch(0.42 0.16 170))` : `linear-gradient(135deg, ${c1}, ${c2} 50%, ${c3})`; return (
{url && ( {label )}
{tag === 'BEFORE' ? : } {tag} {label && !url && {label}}
); } // ───────────────────────────────────────────────────────────── // Category chip // ───────────────────────────────────────────────────────────── function CategoryChip({ cat, lang = 'th', size = 'sm' }) { const big = size === 'lg'; return ( {cat[lang]} ); } // ───────────────────────────────────────────────────────────── // Status pill // ───────────────────────────────────────────────────────────── function StatusPill({ status, lang = 'th', t }) { const map = { pending: { cls: 'pending', label: t.pending }, 'in-progress': { cls: 'progress', label: t.inProgress }, resolved: { cls: 'resolved', label: t.resolved }, }; const m = map[status]; return {m.label}; } // ───────────────────────────────────────────────────────────── // Donut chart — animated stroke-dasharray // segments: [{ value, color }, …] (values sum to 100 or any total; we normalize) // ───────────────────────────────────────────────────────────── function Donut({ size = 220, stroke = 22, segments = [], center }) { const r = (size - stroke) / 2; const C = 2 * Math.PI * r; const total = segments.reduce((s, x) => s + x.value, 0) || 1; // animate from 0 to actual const [progress, setProgress] = useState(0); useEffect(() => { let raf, start; const dur = 900; const tick = (t) => { if (!start) start = t; const p = Math.min(1, (t - start) / dur); setProgress(easeOut(p)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [segments.map(s => s.value).join(',')]); let cumulative = 0; const segs = segments.map((s, i) => { const frac = (s.value / total) * progress; const dash = C * frac; const gap = C - dash; const offset = -C * cumulative; cumulative += s.value / total; return { ...s, dash, gap, offset }; }); return (
{segs.map((s, i) => ( ))} {center && (
{center}
)}
); } function easeOut(t) { return 1 - Math.pow(1 - t, 3); } // ───────────────────────────────────────────────────────────── // Avatar with photo-upload — click/tap to pick an image (data URL) // ───────────────────────────────────────────────────────────── function AvatarUpload({ photo, name, onChange, size = 96, ring, light }) { const inputRef = useRef(null); const initial = (name || '?').trim().split('')[0]; function pick(e) { const file = e.target.files && e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = ev => onChange(ev.target.result); reader.readAsDataURL(file); e.target.value = ''; } return (
{!photo && initial}
); } // Logo mark — small "Bp" lockup function Logomark({ size = 32, light = false }) { return (
Bp
); } Object.assign(window, { Icon, CAT_ICONS, Photo, CategoryChip, StatusPill, Donut, Logomark, easeOut, AvatarUpload, });