e.currentTarget.style.background=C.bg}
onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
);
/* 알림 카테고리 박스 */
const AlertStack = ({title, count, color, items, badge='건', emptyText='없음'}) => (
{items.length===0 ?
{emptyText}
:
items.map((it,i) =>
)}
);
/* 라인 차트 — 일별 매출/주문량 */
const LineChart = ({data, color=C.primary, height=120, fillOpacity=0.15, unit=''}) => {
const max = Math.max(...data) * 1.1;
const min = Math.min(...data) * 0.9;
const w = 280, h = height;
const pts = data.map((v,i) => ({x: (i/(data.length-1))*w, y: h - ((v-min)/(max-min))*h}));
const line = pts.map((p,i) => `${i===0?'M':'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
const fill = `${line} L${w},${h} L0,${h} Z`;
return
;
};
/* 스파크라인 (KPI 카드용 작은 그래프) */
const Sparkline = ({data, color=C.primary, w=80, h=28}) => {
const max = Math.max(...data), min = Math.min(...data);
const pts = data.map((v,i) => `${(i/(data.length-1))*w},${h - ((v-min)/(max-min||1))*h}`).join(' ');
return
;
};
/* 막대 차트 (업체 증감) */
const BarChart = ({data, height=140}) => {
const max = Math.max(...data.flatMap(d=>[d.n,d.e])) * 1.2;
return
;
};
/* 추세 뱃지 (▲ 11.0%) */
const TrendBadge = ({value, suffix='%', muted=false}) => {
const up = value > 0;
const color = muted ? C.fg3 : (up ? C.primary : C.danger);
return
{up?'▲':'▼'}{Math.abs(value)}{suffix}
;
};
/* 메인 페이지 셸 (사이드바 placeholder + 페이지 헤더) */
const DashShell = ({children, headline, subtitle, accent=C.primary}) => (
{/* 페이지 헤더 (탑바 모방) */}
끼니저 · 대시보드
{headline}
{subtitle &&
{subtitle}
}
{children}
);
Object.assign(window, { C, DASH_DATA, KpiCard, AlertItem, AlertStack, LineChart, Sparkline, BarChart, TrendBadge, DashShell });