// ============================================================ // Mock dashboard SVG components — rendered in CSS/SVG to look // like real Power BI dashboards // ============================================================ const COLORS = { blue: '#0b4f9c', blue2: '#1769d6', blue3: '#4a9eff', blueL: '#cfe1f5', yellow: '#f2c811', green: '#0e8a4f', greenL: '#cfe9da', red: '#c43d3d', orange: '#e58712', purple: '#6f4ec9', ink: '#0a1628', ink3: '#5b6b7e', line: '#d9dce0', bg: '#ffffff', bgSoft: '#f7f7f4' }; // ---- Sparkline ---- const Spark = ({ data, color = COLORS.blue, w = 60, h = 28, fill = true }) => { const max = Math.max(...data); const min = Math.min(...data); const range = max - min || 1; const step = w / (data.length - 1); const points = data.map((v, i) => `${i * step},${h - (v - min) / range * (h - 4) - 2}`); const path = `M${points.join(' L')}`; const areaPath = `${path} L${w},${h} L0,${h} Z`; return ( {fill && } ); }; // ---- Bar chart ---- const BarChart = ({ data, color = COLORS.blue, h = 80, horizontal = false, labels = null }) => { const max = Math.max(...data); if (horizontal) { return (
{data.map((v, i) =>
{labels &&
{labels[i]}
}
{v}
)}
); } const w = 100 / data.length; return (
{data.map((v, i) =>
)}
); }; // ---- Line chart ---- const LineChart = ({ series, w = 280, h = 100, showAxis = true, colors = [COLORS.blue, COLORS.orange] }) => { const all = series.flat(); const max = Math.max(...all); const min = Math.min(...all); const range = max - min || 1; const padding = 8; const len = series[0].length; return ( {showAxis && [0.25, 0.5, 0.75].map((p) => )} {series.map((data, si) => { const step = (w - padding * 2) / (len - 1); const points = data.map((v, i) => `${padding + i * step},${h - padding - (v - min) / range * (h - padding * 2)}`); return ( {data.map((v, i) => { const [x, y] = points[i].split(','); return ; })} ); })} ); }; // ---- Donut ---- const Donut = ({ data, size = 80, colors = [COLORS.blue, COLORS.yellow, COLORS.blue3, COLORS.greenL] }) => { const total = data.reduce((a, b) => a + b, 0); const radius = size / 2 - 8; const cx = size / 2,cy = size / 2; const c = 2 * Math.PI * radius; let offset = 0; return ( {data.map((v, i) => { const len = v / total * c; const seg = ; offset += len; return seg; })} {total} ); }; // ---- Heatmap mini ---- const Heatmap = ({ rows = 7, cols = 14 }) => { const cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const intensity = Math.random(); cells.push({ r, c, intensity }); } } return (
{cells.map((cell, i) =>
)}
); }; // ---- Map placeholder (Georgia-ish silhouette) ---- const MiniMap = () => {/* City dots */} ; // ---- Funnel ---- const Funnel = ({ steps }) =>
{steps.map((s, i) =>
{s.label}{s.value}
)}
; // ---- Stacked bars ---- const StackedBars = ({ data, colors = [COLORS.blue, COLORS.yellow, COLORS.blue3] }) => { const max = Math.max(...data.map((d) => d.reduce((a, b) => a + b, 0))); return (
{data.map((stack, i) => { const total = stack.reduce((a, b) => a + b, 0); return (
{stack.map((v, j) =>
)}
); })}
); }; // ============================================================ // HERO MAIN DASHBOARD MOCK // ============================================================ const HeroDashboard = () => { const [tick, setTick] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setTick((v) => v + 1), 2400); return () => clearInterval(t); }, []); const revenueData = [12, 18, 14, 22, 19, 28, 24, 32, 28, 35, 31, 38]; const conversionData = [2.1, 2.4, 2.2, 2.8, 2.6, 3.2, 3.0, 3.6, 3.4, 4.1, 3.9, 4.5]; const drift = (arr) => arr.map((v) => v * (0.95 + Math.sin(tick + v) * 0.05)); return (
retail-vip-analysis.pbix
LIVE
Overview Customers Products Trends Q1 2026 
{/* Top KPI row */}
Revenue
2.84M
+12.4% vs LY
Active VIPs
1,284
 +84
Avg Basket
\u20be 184
\u2198 -2.1%
{/* Big chart */}

Revenue vs. Forecast \ last 12 months

v * 8)]} w={280} h={110} colors={[COLORS.blue, COLORS.yellow]} />
Revenue Forecast

By segment

); }; // ============================================================ // GALLERY THUMBNAILS — small dashboards per project kind // ============================================================ const GalleryThumb = ({ kind }) => { const wrap = (children) =>
{children}
; const headerBar = (label) =>
{label} LIVE
; const tile = (children, style = {}) =>
{children}
; switch (kind) { case 'restaurant': return wrap(<> {headerBar('madart-delivery.pbix')}
{tile(<>
ORDERS
3,482
)} {tile(<>
SLA
96.2%
)} {tile(<>
AOV
\u20be 28
)}
{tile()}
); case 'automotive': return wrap(<> {headerBar('vehicle-parts-sales.pbix')}
{tile(<>
MARGIN
34.8%
)} {tile(<>
STOCK RISK
14 SKU
)}
); case 'realestate': return wrap(<> {headerBar('contract-tracker.pbix')}
{tile(<>
VELOCITY
18 days
)} {tile(<>
PIPELINE
$4.2M
)}
); case 'retail': return wrap(<> {headerBar('retail-vip.pbix')}
{tile(<>
VIP COUNT
1,284
)} {tile(<>
LTV
\u20be 4.8K
)} {tile(<>
CHURN
3.2%
)}
); case 'restaurant2': return wrap(<> {headerBar('restaurant-kpi.pbix')}
{tile(<>
COVERS
284/d
)} {tile(<>
FOOD COST
28.4%
)}
); case 'construction': return wrap(<> {headerBar('project-margin.pbix')}
{tile(<>
EARNED VAL
$2.1M
)} {tile(<>
VARIANCE
-4.2%
)}
); case 'cosmetics': return wrap(<> {headerBar('cosmetics-sku.pbix')}
{tile(<>
HERO SKU
Lipstick #24
)} {tile(<>
RETURNS
2.8%
)}
); case 'automotive2': return wrap(<> {headerBar('service-dept.pbix')}
{tile(<>
BAY UTIL
78%
)} {tile(<>
HOURS BILLED
1,284
)}
); case 'retail2': return wrap(<> {headerBar('multi-brand.pbix')}
{tile(<>
BRANDS
14
)} {tile(<>
STORES
62
)} {tile(<>
SELL-THRU
68%
)}
); default: return wrap(<>{headerBar('dashboard.pbix')}); } }; Object.assign(window, { Spark, BarChart, LineChart, Donut, Heatmap, MiniMap, Funnel, StackedBars, HeroDashboard, GalleryThumb, COLORS });