// OLLYMEN Store OS — shared components & icons
const { useState, useEffect, useMemo, useRef } = React;
/* ---------------- Icons (inline, stroke-based, no emoji) ---------------- */
const I = {
logo: (p={}) => (
),
home: (p={}) => ,
store: (p={}) => ,
list: (p={}) => ,
box: (p={}) => ,
phone: (p={}) => ,
grad: (p={}) => ,
board: (p={}) => ,
chart: (p={}) => ,
bell: (p={}) => ,
search: (p={}) => ,
plus: (p={}) => ,
chev: (p={}) => ,
chevd: (p={}) => ,
clock: (p={}) => ,
cam: (p={}) => ,
pin: (p={}) => ,
alert: (p={}) => ,
check: (p={}) => ,
dots: (p={}) => ,
arrow: (p={}) => ,
upload: (p={}) => ,
user: (p={}) => ,
copy: (p={}) => ,
filter: (p={}) => ,
refresh: (p={}) => ,
link: (p={}) => ,
flame: (p={}) => ,
wifi: (p={}) => ,
battery: (p={}) => ,
signal: (p={}) => ,
drop: (p={}) => ,
fish: (p={}) => ,
menu: (p={}) => ,
};
/* ---------------- Status badge ---------------- */
function StatusBadge({ kind, label }) {
const cls = { live: "live", opening: "opening", scout: "scout" }[kind] || "neutral";
const text = label || ({ live: "운영 중", opening: "오픈 준비", scout: "확장 후보" }[kind]);
return {text};
}
/* ---------------- Sidebar ---------------- */
const NAV = [
{ id: "dashboard", label: "대시보드", icon: "home", count: null },
{ id: "ops", label: "운영일지", icon: "list", count: 3 },
{ id: "inv", label: "메뉴 · 재고", icon: "box", count: 4 },
{ id: "mobile", label: "마감 체크리스트", icon: "phone", count: null },
{ id: "onboard", label: "직원 온보딩", icon: "grad", count: 3 },
{ id: "opening", label: "신규 오픈 보드", icon: "board", count: 18, suffix: "D-" },
{ id: "report", label: "주간 리포트", icon: "chart", count: null },
];
function Sidebar({ active, onChange, open, onClose }) {
const D = window.DATA;
const [wsOpen, setWsOpen] = useState(false);
const [workspace, setWorkspace] = useState("all"); // 'all' | store id
const wsRef = useRef(null);
useEffect(() => {
if (!wsOpen) return;
const close = (e) => { if (wsRef.current && !wsRef.current.contains(e.target)) setWsOpen(false); };
window.addEventListener("mousedown", close);
return () => window.removeEventListener("mousedown", close);
}, [wsOpen]);
const handle = (id) => { onChange(id); onClose && onClose(); };
const currentWs = workspace === "all"
? { name: `All Stores (${D.stores.length})`, sub: "전체 통합 뷰" }
: (() => {
const s = D.stores.find(x => x.id === workspace);
return { name: s.name, sub: s.tag + " · " + ({ live: "운영 중", opening: "오픈 준비", scout: "확장 후보" }[s.status]) };
})();
return (
<>
);
}
function NavItem({ n, active, onClick }) {
const Icon = I[n.icon];
return (
);
}
/* ---------------- Topbar ---------------- */
function Topbar({ crumbs, onLogout, onMenu }) {
return (
{crumbs.map((c, i) => (
{i > 0 && /}
{i === crumbs.length - 1 ? {c} : {c}}
))}
);
}
/* ---------------- Progress bar ---------------- */
function Bar({ value, color = "ink", tall }) {
const [w, setW] = useState(0);
useEffect(() => {
const id = requestAnimationFrame(() => {
// small extra delay so the rise + bar fill don't overlap perfectly
setTimeout(() => setW(Math.max(0, Math.min(100, value))), 60);
});
return () => cancelAnimationFrame(id);
}, [value]);
return (
);
}
/* ---------------- Count-up hook ---------------- */
function useCountUp(target, ms = 800, deps = []) {
const [v, setV] = useState(0);
useEffect(() => {
const max = Number(target);
if (!isFinite(max)) { setV(target); return; }
let raf, start;
const tick = (t) => {
if (!start) start = t;
const p = Math.min(1, (t - start) / ms);
const eased = 1 - Math.pow(1 - p, 3);
setV(max * eased);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => raf && cancelAnimationFrame(raf);
}, deps);
return v;
}
function formatCount(v, target) {
const s = String(target);
if (s.includes("/")) return s; // pass-through like "3 / 1"
if (s.includes(".")) return Number(v).toFixed(1);
return Math.round(v).toLocaleString();
}
/* ---------------- Metric card ---------------- */
function Metric({ k, v, unit, sub, delta, deltaDir, spark, accent }) {
const animated = useCountUp(v, 750, [v]);
const display = formatCount(animated, v);
return (
{k}
{display}{unit && {unit}}
{sub &&
{sub}
}
{delta &&
{delta}
}
{spark}
);
}
/* ---------------- Tiny SVG sparkline ---------------- */
function Spark({ pts, color = "var(--ink-2)", fill = "var(--surface-3)" }) {
const w = 200, h = 36;
const max = Math.max(...pts), min = Math.min(...pts);
const norm = pts.map((p, i) => {
const x = (i / (pts.length - 1)) * w;
const y = h - ((p - min) / (max - min || 1)) * (h - 4) - 2;
return [x, y];
});
const d = norm.map((p, i) => `${i ? "L" : "M"}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(" ");
const a = `${d} L${w} ${h} L0 ${h} Z`;
return (
);
}
/* ---------------- Checkbox ---------------- */
function Check({ checked, onClick, size = 18 }) {
return (
);
}
/* ---------------- Tabs ---------------- */
function Tabs({ items, active, onChange }) {
return (
{items.map(t => (
))}
);
}
/* ---------------- Card header ---------------- */
function CardHead({ title, sub, right }) {
return (
);
}
/* ---------------- Empty placeholder ---------------- */
function Placeholder({ label, height = 160 }) {
return (
{label}
);
}
Object.assign(window, {
I, StatusBadge, Sidebar, Topbar, Bar, Metric, Spark, Check, Tabs, CardHead, Placeholder, NAV,
useCountUp, formatCount,
});