{showNotif && notifPanel}
{(onAddCustomer || onAddPartner) && (
{showCreate && createMenu}
)}
{showProfile && profileMenu}
);
}
// =============================================================
// KPI Card
// =============================================================
function KPI({ label, value, unit, delta, deltaDir = 'up', progress, progressLabel, feature, sub, children }) {
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 }) {
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 }) {
return (
{dot && }
{children}
);
}
function tierVariant(tier) {
const t = (tier || '').toLowerCase();
if (t.includes('platinum') || t.includes('bạch')) return 'platinum';
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 => (
))}
);
}
// =============================================================
// OwnerPicker — chọn NHIỀU người phụ trách cho 1 khách bằng checkbox (dropdown).
// currentIds: mảng userId đang phụ trách; onChange(nextIds) gọi khi tick/bỏ tick.
// =============================================================
function OwnerPicker({ currentIds = [], assignees = [], onChange, disabled, dark, fallbackLabel }) {
const [open, setOpen] = useState(false);
const sel = new Set(currentIds.filter(Boolean));
const names = assignees.filter(u => sel.has(u.id)).map(u => u.name || '');
const label = names.length ? names.join(' + ') : (fallbackLabel || 'Chưa phân công');
const toggle = (id) => {
const next = new Set(sel);
next.has(id) ? next.delete(id) : next.add(id);
const filtered = [...next].filter(x => assignees.some(u => u.id === x));
onChange && onChange(filtered);
};
return (
e.stopPropagation()}>
{open && (
<>
{ e.stopPropagation(); setOpen(false); }} style={{position:'fixed', inset:0, zIndex:60}}/>
Chọn 1 hoặc nhiều người phụ trách
{assignees.map(u => {
const on = sel.has(u.id);
return (
);
})}
{assignees.length === 0 &&
Không có nhân viên
}
)}
);
}
// =============================================================
// DateRangePicker — chọn khoảng thời gian (lọc theo NGÀY HOÀN THÀNH).
// value = { from, to, preset } (YYYY-MM-DD, giờ VN). onChange(nextValue).
// =============================================================
function rpYMD(d) { return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; }
function computeRange(key) {
const now = new Date();
const today = rpYMD(now);
const shift = (n) => { const d = new Date(now); d.setDate(d.getDate() + n); return d; };
switch (key) {
case 'today': return { from: today, to: today };
case 'yesterday': { const y = rpYMD(shift(-1)); return { from: y, to: y }; }
case '7d': return { from: rpYMD(shift(-6)), to: today };
case '30d': return { from: rpYMD(shift(-29)), to: today };
case 'thisMonth': return { from: rpYMD(new Date(now.getFullYear(), now.getMonth(), 1)), to: today };
case 'lastMonth': return { from: rpYMD(new Date(now.getFullYear(), now.getMonth() - 1, 1)), to: rpYMD(new Date(now.getFullYear(), now.getMonth(), 0)) };
case 'thisYear': return { from: rpYMD(new Date(now.getFullYear(), 0, 1)), to: today };
case 'lastYear': return { from: rpYMD(new Date(now.getFullYear() - 1, 0, 1)), to: rpYMD(new Date(now.getFullYear() - 1, 11, 31)) };
default: return { from: today, to: today };
}
}
const RANGE_PRESETS = [
['today', 'Hôm nay'], ['yesterday', 'Hôm qua'],
['7d', '7 ngày qua'], ['30d', '30 ngày qua'],
['lastMonth', 'Tháng trước'], ['thisMonth', 'Tháng này'],
['lastYear', 'Năm trước'], ['thisYear', 'Năm nay'],
];
const RANGE_PRESET_LABEL = Object.fromEntries(RANGE_PRESETS);
function fmtVNDate(s) { if (!s) return ''; const [y, m, d] = s.split('-'); return `${d}/${m}/${y}`; }
function rangeLabelOf(v) {
if (!v || !v.from) return '';
if (v.preset && v.preset !== 'custom' && RANGE_PRESET_LABEL[v.preset]) return RANGE_PRESET_LABEL[v.preset];
return v.from === v.to ? fmtVNDate(v.from) : `${fmtVNDate(v.from)} – ${fmtVNDate(v.to)}`;
}
function DateRangePicker({ value, onChange }) {
const [open, setOpen] = useState(false);
const [draft, setDraft] = useState(value);
const [custom, setCustom] = useState(value.preset === 'custom');
useEffect(() => { if (open) { setDraft(value); setCustom(value.preset === 'custom'); } }, [open]);
// Bấm preset = áp dụng NGAY (không cần bấm Lọc), đóng dropdown luôn.
const pick = (key) => { onChange({ ...computeRange(key), preset: key }); setOpen(false); };
const apply = () => { if (draft.from && draft.to && draft.from <= draft.to) { onChange(draft); setOpen(false); } };
const label = value.from === value.to ? fmtVNDate(value.from) : `${fmtVNDate(value.from)} - ${fmtVNDate(value.to)}`;
return (
{open && (
<>
setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 60 }} />
{RANGE_PRESETS.map(([k, l]) => {
const active = !custom && value.preset === k;
return (
);
})}
{custom && (
<>
setDraft(d => ({ ...d, from: e.target.value, preset: 'custom' }))} style={{ flex: 1 }} />
→
setDraft(d => ({ ...d, to: e.target.value, preset: 'custom' }))} style={{ flex: 1 }} />
)}
)}
);
}
// =============================================================
// Bar chart (simple, vertical)
// =============================================================
function BarChart({ data, height = 120, color = 'var(--vs-light-blue)', highlight, labels }) {
const max = Math.max(...data) || 1;
const [hover, setHover] = useState(null);
return (
{data.map((v, i) => (
setHover(i)} onMouseLeave={() => setHover(h => h === i ? null : h)}
title={labels ? labels[i] : `${v}`}
>
{v > 0 ? v : ''}
{hover === i && (
{labels ? labels[i] : v}
)}
))}
);
}
Object.assign(window, {
Avatar, Sidebar, Topbar, KPI, Sparkline, Tag, tierVariant,
Card, CardHeader, Segmented, BarChart,
});
// =============================================================
// Global Search overlay (Cmd+K)
// =============================================================
function GlobalSearch({ onClose, onOpenCustomer, onNavigate }) {
const [q, setQ] = useState('');
const D = window.TVS_DATA;
const [results, setResults] = useState(null);
const [loading, setLoading] = useState(false);
const apiLive = !!(window.TVS_API && window.TVS_API.isAuthed());
useEffect(() => {
if (!q.trim()) {
setResults(null);
return;
}
if (!apiLive) {
const s = q.toLowerCase();
const customers = D.customers.filter(c =>
c.name.toLowerCase().includes(s) || c.phone.includes(s) || c.id.toLowerCase().includes(s)
).slice(0, 5);
const partners = D.partners.filter(p =>
p.name.toLowerCase().includes(s) || p.contact.toLowerCase().includes(s) || p.phone.includes(s)
).slice(0, 4);
const products = D.products.filter(p =>
p.name.toLowerCase().includes(s) || p.sku.toLowerCase().includes(s)
).slice(0, 4);
setResults({ customers, partners, products });
return;
}
setLoading(true);
const delayDebounce = setTimeout(async () => {
try {
const custRes = await window.TVS_API.api('/api/customers/list?q=' + encodeURIComponent(q) + '&pageSize=20');
const allCusts = custRes.customers || [];
const customers = allCusts.filter(c => {
const grp = (c.group || '').toLowerCase();
return !grp.includes('wholesale') && !grp.includes('đối tác');
}).slice(0, 5);
const partners = allCusts.filter(c => {
const grp = (c.group || '').toLowerCase();
return grp.includes('wholesale') || grp.includes('đối tác');
}).map(p => ({
...p,
contact: p.preferredContact || 'phone'
})).slice(0, 4);
const s = q.toLowerCase();
const products = D.products.filter(p =>
p.name.toLowerCase().includes(s) || p.sku.toLowerCase().includes(s)
).slice(0, 4);
setResults({ customers, partners, products });
} catch (e) {
console.error(e);
} finally {
setLoading(false);
}
}, 250);
return () => clearTimeout(delayDebounce);
}, [q]);
const pages = [
{l:'Tổng quan', s:'dashboard', ic:'dashboard'},
{l:'Khách hàng', s:'customers', ic:'users'},
{l:'Báo cáo', s:'reports', ic:'chart'},
{l:'Tồn kho', s:'inventory', ic:'package'},
].filter(p => !q || p.l.toLowerCase().includes(q.toLowerCase()));
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)}
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 => (
))}
) : loading && !results ? (
) : results ? (
{results.customers.length > 0 && (
{results.customers.map(c => (
{ onOpenCustomer(c); onClose(); }}>
{c.name}
{c.phone} · {c.code} · {c.city}
{c.tier}
))}
)}
{results.partners.length > 0 && (
{results.partners.map(p => (
{ onOpenCustomer(p); onClose(); }}>
{p.name}
{p.code} · {p.phone}
))}
)}
{results.products.length > 0 && (
{results.products.map(p => (
{ onNavigate('inventory'); onClose(); }}>
{p.name}
{p.sku} · {p.cat}
))}
)}
{results.customers.length === 0 && results.partners.length === 0 && results.products.length === 0 && (
Không tìm thấy kết quả cho "{q}"
)}
) : null}
);
}
function SearchGroup({ label, children }) {
return (
);
}
function SearchItem({ children, onClick }) {
return (
);
}
window.GlobalSearch = GlobalSearch;
