// Insurance Portal — components const { useState, useEffect, useRef, useMemo, useCallback } = React; // ─── Ticker ──────────────────────────────────────────── function InsTicker({ value, decimals = 0, duration = 700, prefix = '', suffix = '', className }) { const [display, setDisplay] = useState(value); const fromRef = useRef(value); const startRef = useRef(0); const rafRef = useRef(0); useEffect(() => { fromRef.current = display; startRef.current = performance.now(); const tick = (now) => { const t = Math.min(1, (now - startRef.current) / duration); const eased = 1 - Math.pow(1 - t, 3); const v = fromRef.current + (value - fromRef.current) * eased; setDisplay(v); if (t < 1) rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [value, duration]); const formatted = display.toLocaleString('en-IN', { minimumFractionDigits: decimals, maximumFractionDigits: decimals, }); return {prefix}{formatted}{suffix}; } // ─── Animated bar chart ──────────────────────────────── function InsBars({ data, color, height = 80 }) { const max = Math.max(...data) || 1; return (
{data.map((v, i) => (
))}
); } // ─── Sparkline ───────────────────────────────────────── function InsSpark({ data, color = '#06b6d4', width = 120, height = 36, fill = true }) { if (!data || data.length === 0) return null; const min = Math.min(...data), max = Math.max(...data); const range = max - min || 1; const step = width / (data.length - 1); const pts = data.map((v, i) => `${i * step},${height - ((v - min) / range) * (height - 4) - 2}`); const linePath = `M ${pts.join(' L ')}`; const fillPath = `${linePath} L ${width},${height} L 0,${height} Z`; return ( {fill && } ); } // ─── Trend line chart ─────────────────────────────────── function InsTrendChart({ data, color = '#06b6d4', height = 240 }) { const ref = useRef(null); const [dim, setDim] = useState({ w: 600, h: height }); useEffect(() => { const update = () => { if (ref.current) setDim({ w: ref.current.clientWidth, h: height }); }; update(); window.addEventListener('resize', update); return () => window.removeEventListener('resize', update); }, [height]); const padL = 40, padR = 20, padT = 16, padB = 30; const w = dim.w - padL - padR; const h = dim.h - padT - padB; const values = data.map(d => d.matchRate); const min = Math.min(...values) - 2, max = Math.max(...values) + 2; const range = max - min; const stepX = w / (data.length - 1); const pts = data.map((d, i) => ({ x: padL + i * stepX, y: padT + h - ((d.matchRate - min) / range) * h })); const linePath = `M ${pts.map(p => `${p.x},${p.y}`).join(' L ')}`; const fillPath = `${linePath} L ${padL + w},${padT + h} L ${padL},${padT + h} Z`; // Y-axis ticks const ticks = [min, (min + max) / 2, max].map(v => parseFloat(v.toFixed(1))); return (
{/* Grid */} {ticks.map((t, i) => { const y = padT + h - ((t - min) / range) * h; return ( {t}% ); })} {/* X-axis */} {data.filter((_, i) => i % 5 === 0).map((d, idx) => { const i = data.indexOf(d); const x = padL + i * stepX; return D{d.day}; })} {/* Fill */} {/* Line */} {/* Dots on every 5th point */} {pts.map((p, i) => i % 5 === 0 ? ( ) : null)}
); } // ─── Fraud level badge ────────────────────────────────── function FraudBadge({ level, size = 'md' }) { const meta = window.INS_FRAUD_LEVELS[level]; if (!meta) return null; const fs = size === 'sm' ? 10 : 11; const pad = size === 'sm' ? '3px 8px' : '5px 11px'; return ( {meta.label} ); } // ─── Toast (reused pattern) ───────────────────────────── const InsToastContext = React.createContext(null); function InsToastProvider({ children }) { const [toasts, setToasts] = useState([]); const push = useCallback((t) => { const id = Math.random().toString(36).slice(2); setToasts(prev => [...prev, { id, ...t }]); if (t.duration !== 0) setTimeout(() => setToasts(prev => prev.filter(x => x.id !== id)), t.duration || 4500); }, []); const dismiss = useCallback((id) => setToasts(prev => prev.filter(x => x.id !== id)), []); return ( {children}
{toasts.map(t => (
{t.sev === 'success' ? '✓' : t.sev === 'alert' ? '!' : 'ℹ'}
{t.title}
{t.body &&
{t.body}
}
))}
); } function useInsToast() { return React.useContext(InsToastContext); } // ─── Icons (reuse pattern, distinct set) ──────────────── const InsIcon = { Home: (p) => , Search: (p) => , Scan: (p) => , Shield: (p) => , Chart: (p) => , History: (p) => , Settings: (p) => , Sun: (p) => , Moon: (p) => , ArrowRight: (p) => , ArrowUp: (p) => , ArrowDown: (p) => , X: (p) => , Download: (p) => , Filter: (p) => , Logout: (p) => , Check: (p) => , Cross: (p) => , Alert: (p) => , ChevronRight: (p) => , ChevronLeft: (p) => , }; Object.assign(window, { InsTicker, InsBars, InsSpark, InsTrendChart, FraudBadge, InsToastProvider, useInsToast, InsToastContext, InsIcon, });