{/* Mobile: nút tìm kiếm mở bảng ⌘K — đường vào Đối tác B2B / Tồn kho trên điện thoại */}
{showProfile && <>
setShowProfile(false)}/>{profileMenu}}
);
}
// =============================================================
// KPI Card
// =============================================================
function KPI({ label, value, unit, delta, deltaDir = 'up', progress, progressLabel, feature, sub, children }) {
if (!Number.isFinite(progress)) progress = progress == null ? progress : 0; // 0/0 từ dữ liệu trống không được vẽ NaN%
return (
{label}
{value}
{unit && {unit}}
{sub &&
{sub}
}
{delta && (
{delta}
)}
{progress != null && (
<>
{progressLabel && (
{progressLabel.left}
{progressLabel.right}
)}
)}
{children}
);
}
// =============================================================
// Sparkline (simple SVG)
// =============================================================
function Sparkline({ data, color = 'var(--vs-light-blue)', height = 56, fill }) {
if (!data || data.length === 0) return null;
const max = Math.max(...data) || 1;
const min = Math.min(...data);
const range = max - min || 1;
const w = 200;
const step = w / (data.length - 1 || 1);
const points = data.map((v, i) => [i*step, height - ((v - min) / range) * (height - 8) - 4]);
const path = points.map((p,i) => `${i===0?'M':'L'}${p[0]},${p[1]}`).join(' ');
const area = path + ` L${w},${height} L0,${height} Z`;
return (
);
}
// =============================================================
// Tag
// =============================================================
function Tag({ children, variant = 'default', dot, style }) {
return (
{dot && }
{children}
);
}
function tierVariant(tier) {
const t = (tier || '').toLowerCase();
if (t.includes('kim cương') || t.includes('diamond') || t.includes('platinum') || t.includes('bạch')) return 'platinum'; // 'platinum' = khoá CSS nội bộ, hiển thị là Kim cương
if (t.includes('gold') || t.includes('vàng')) return 'gold';
if (t.includes('silver') || t.includes('bạc')) return 'silver';
if (t.includes('bronze') || t.includes('đồng')) return 'bronze';
return 'outline';
}
// =============================================================
// Card / CardHeader
// =============================================================
function Card({ children, pad = true, className = '', style }) {
return
{children}
;
}
function CardHeader({ title, sub, actions }) {
return (
);
}
// =============================================================
// Segmented control
// =============================================================
function Segmented({ value, options, onChange }) {
return (
{options.map(o => (
))}
);
}
// =============================================================
// Bar chart (simple, vertical)
// =============================================================
function BarChart({ data, height = 120, color = 'var(--vs-light-blue)', highlight }) {
if (!data || data.length === 0) return null;
const max = Math.max(...data) || 1;
return (
{data.map((v, i) => (
))}
);
}
Object.assign(window, {
Avatar, Sidebar, Topbar, KPI, Sparkline, Tag, tierVariant,
Card, CardHeader, Segmented, BarChart,
});
// =============================================================
// Global Search overlay (Cmd+K)
// =============================================================
function GlobalSearch({ onClose, onOpenCustomer, onNavigate, role }) {
const [q, setQ] = useState('');
const [active, setActive] = useState(0);
const D = window.TVS_DATA;
const results = useMemo(() => {
if (!q.trim()) return null;
const s = searchNorm(q.trim());
const digits = phoneDigits(q);
const phoneHit = (p) => digits.length >= 3 && phoneDigits(p).includes(digits);
const customers = D.customers.filter(c =>
searchNorm(c.name).includes(s) || phoneHit(c.phone) || c.id.toLowerCase().includes(s) ||
searchNorm(c.email).includes(s)
).slice(0, 5);
// Kết quả đối tác chỉ cho vị trí có quyền vào module B2B — click sẽ điều hướng sang màn B2B
const partners = (window.tvsCan && tvsCan(role, 'b2b.view')) ? D.partners.filter(p =>
searchNorm(p.name).includes(s) || searchNorm(p.contact).includes(s) || phoneHit(p.phone) ||
searchNorm(p.email).includes(s)
).slice(0, 4) : [];
const products = (window.tvsCan && tvsCan(role, 'inventory.view')) ? D.products.filter(p =>
searchNorm(p.name).includes(s) || p.sku.toLowerCase().includes(s) || searchNorm(p.cat).includes(s)
).slice(0, 4) : [];
return { customers, partners, products };
}, [q]);
const pages = [
{l:'Tổng quan', s:'dashboard', ic:'dashboard'},
{l:'Khách hàng', s:'customers', ic:'users'},
// Chỉ gợi ý trang mà vị trí này có QUYỀN vào (ma trận phân quyền trong Cài đặt)
...(window.tvsCan && tvsCan(role, 'reports.view') ? [{l:'Báo cáo', s:'reports', ic:'chart'}] : []),
...(window.tvsCan && tvsCan(role, 'settings.view') ? [{l:'Cài đặt', s:'settings', ic:'settings'}] : []),
...(window.tvsCan && tvsCan(role, 'b2b.view') ? [{l:'Đối tác B2B', s:'b2b', ic:'handshake'}] : []),
...(window.tvsCan && tvsCan(role, 'inventory.view') ? [{l:'Tồn kho', s:'inventory', ic:'package'}] : []),
].filter(p => !q.trim() || searchNorm(p.l).includes(searchNorm(q)));
// Danh sách phẳng cho điều hướng bàn phím (↑↓ + Enter)
const flatItems = useMemo(() => {
const items = [];
if (!q.trim()) {
pages.forEach(p => items.push({ key: 'page-' + p.s, run: () => { onNavigate(p.s); onClose(); } }));
} else if (results) {
results.customers.forEach(c => items.push({ key: 'c-' + c.id, run: () => { onOpenCustomer(c); onClose(); } }));
results.partners.forEach(p => items.push({ key: 'p-' + p.id, run: () => { onNavigate('b2b'); onClose(); } }));
results.products.forEach(p => items.push({ key: 'sku-' + p.sku, run: () => { onNavigate('inventory'); onClose(); } }));
pages.forEach(p => items.push({ key: 'page-' + p.s, run: () => { onNavigate(p.s); onClose(); } }));
}
return items;
}, [q, results]);
useEffect(() => { setActive(0); }, [q]);
const isActive = (key) => flatItems[active] && flatItems[active].key === key;
const activeBg = (key) => isActive(key) ? 'var(--bg-soft)' : 'none';
const onKeyDown = (e) => {
if (e.key === 'ArrowDown') { e.preventDefault(); setActive(a => Math.min(a + 1, flatItems.length - 1)); }
if (e.key === 'ArrowUp') { e.preventDefault(); setActive(a => Math.max(a - 1, 0)); }
if (e.key === 'Enter' && flatItems[active]) { e.preventDefault(); flatItems[active].run(); }
};
return (
e.stopPropagation()}
style={{background:'var(--bg-page)',width:'min(620px,94vw)',maxHeight:'70vh',borderRadius:'var(--radius-lg)',boxShadow:'var(--shadow-pop)',overflow:'hidden',display:'flex',flexDirection:'column',animation:'slidein 0.2s var(--ease-out)'}}>
setQ(e.target.value)} onKeyDown={onKeyDown}
placeholder="Tìm khách hàng, đối tác, sản phẩm, trang..."
style={{flex:1,border:'none',outline:'none',fontSize:16,fontFamily:'inherit',color:'var(--fg-1)',background:'none'}}/>
ESC
{!q.trim() ? (
Truy cập nhanh
{pages.map(p => (
))}
) : (
{results.customers.length > 0 && (
{results.customers.map(c => (
{ onOpenCustomer(c); onClose(); }}>
{c.name}
{c.phone} · {c.id} · {c.city}
{c.tier}
))}
)}
{results.partners.length > 0 && (
{results.partners.map(p => (
{ onNavigate('b2b'); onClose(); }}>
{p.name}
{p.type} · {p.contact}
))}
)}
{results.products.length > 0 && (
{results.products.map(p => (
{ onNavigate('inventory'); onClose(); }}>
{p.name}
{p.sku} · {p.cat}
))}
)}
{pages.length > 0 && (
{pages.map(p => (
{ onNavigate(p.s); onClose(); }}>
{p.l}
))}
)}
{results.customers.length === 0 && results.partners.length === 0 && results.products.length === 0 && pages.length === 0 && (
Không tìm thấy kết quả cho "{q}"
)}
)}
);
}
function SearchGroup({ label, children }) {
return (
);
}
function SearchItem({ children, onClick, active }) {
const bg = active ? 'var(--bg-soft)' : 'none';
return (
);
}
window.GlobalSearch = GlobalSearch;
