hệ thống thật (JET-96 M1)
ARIA: nav[aria-label] · aria-current · status "Trang X/Y — A–B / N dòng" · size-picker.
Demo dùng cỡ trang nhỏ để thấy điều hướng; production: 25/50/100 (mặc định 25). */
function Pagination({ page, size, total, onPage, onSize, sizes = [10, 25, 50], note = 'demo · production 25/50/100' }) {
const pages = Math.max(1, Math.ceil(total / size));
const cur = Math.min(Math.max(1, page), pages);
const from = total === 0 ? 0 : (cur - 1) * size + 1;
const to = Math.min(total, cur * size);
// dải số trang wrap-safe: 1 … (cur-1) cur (cur+1) … last
const nums = [];
const push = (n) => { if (!nums.includes(n) && n >= 1 && n <= pages) nums.push(n); };
push(1); push(2); for (let d = -1; d <= 1; d++) push(cur + d); push(pages - 1); push(pages);
nums.sort((a, b) => a - b);
const withGaps = []; let prev = 0;
nums.forEach((n) => { if (n - prev > 1) withGaps.push('…' + n); withGaps.push(n); prev = n; });
const btn = (active, disabled) => ({ minWidth: 34, height: 34, padding: '0 9px', borderRadius: 9, border: active ? 'none' : '1px solid var(--border-strong)', background: active ? 'var(--dv-green)' : '#fff', color: active ? '#fff' : disabled ? 'var(--dv-ink-faint)' : 'var(--dv-ink)', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13, cursor: disabled || active ? 'default' : 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: disabled ? 0.5 : 1 });
const { IconChevronLeft, IconChevronRight } = window;
return (
{total === 0 ? 'Không có dòng nào' : <>Trang {cur}/{pages} — {from}–{to} / {total} dòng}
{pages > 1 && (
)}
{onSize && (
)}
);
}
/* ---------- KeysetPager (Cũ hơn / Mới hơn) — cho Nhật ký append-only (keyset, JET-96 M3) ---------- */
function KeysetPager({ offset, size, total, onOlder, onNewer }) {
const from = total === 0 ? 0 : offset + 1;
const to = Math.min(total, offset + size);
const { IconChevronLeft, IconChevronRight } = window;
const bs = (disabled) => ({ display: 'inline-flex', alignItems: 'center', gap: 6, height: 36, padding: '0 14px', borderRadius: 999, border: '1px solid var(--border-strong)', background: '#fff', color: disabled ? 'var(--dv-ink-faint)' : 'var(--dv-green)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1 });
return (
{from}–{to} / {total} bản ghi
);
}
window.Pagination = Pagination;
window.KeysetPager = KeysetPager;
/* ---------- Status badge (procurement tones) ---------- */
const STATUS_MAP = {
draft: { label: 'Nháp', bg: '#EEF0EF', fg: '#525B58', dot: '#8A938F' },
suggested: { label: 'Đề xuất', bg: '#FFF1CF', fg: '#8a6a00', dot: '#E1A100' },
pending: { label: 'Chờ duyệt', bg: '#FFF1CF', fg: '#8a6a00', dot: '#E1A100' },
approved: { label: 'Đã duyệt', bg: '#D6ECE5', fg: '#00533F', dot: '#0A7F64' },
sent: { label: 'Đã gửi', bg: '#D6ECE5', fg: '#00533F', dot: '#0A7F64' },
open: { label: 'Đang mở', bg: '#E5EEFb', fg: '#1d4f8a', dot: '#2A6FDB' },
submitted: { label: 'Đã báo giá', bg: '#D6ECE5', fg: '#00533F', dot: '#0A7F64' },
awarded: { label: 'Đã chọn', bg: '#00533F', fg: '#ffffff', dot: '#FDB813' },
received: { label: 'Đã nhận', bg: '#D6ECE5', fg: '#00533F', dot: '#0A7F64' },
rejected: { label: 'Từ chối', bg: '#F8E0DD', fg: '#9c2b22', dot: '#C5372C' },
active: { label: 'Hiệu lực', bg: '#D6ECE5', fg: '#00533F', dot: '#0A7F64' },
expired: { label: 'Hết hạn', bg: '#F8E0DD', fg: '#9c2b22', dot: '#C5372C' },
confirmed: { label: 'Đã xác nhận', bg: '#D6ECE5', fg: '#00533F', dot: '#0A7F64' },
shipping: { label: 'Đang giao', bg: '#E5EEFb', fg: '#1d4f8a', dot: '#2A6FDB' },
matched: { label: 'Khớp', bg: '#D6ECE5', fg: '#00533F', dot: '#0A7F64' },
mismatch: { label: 'Lệch', bg: '#F8E0DD', fg: '#9c2b22', dot: '#C5372C' },
partial: { label: 'Một phần', bg: '#FFF1CF', fg: '#8a6a00', dot: '#E1A100' },
critical: { label: 'Khẩn', bg: '#F8E0DD', fg: '#9c2b22', dot: '#C5372C' },
low: { label: 'Thấp', bg: '#FFF1CF', fg: '#8a6a00', dot: '#E1A100' },
healthy: { label: 'Đủ', bg: '#D6ECE5', fg: '#00533F', dot: '#0A7F64' },
};
function StatusBadge({ status, label, size = 'md' }) {
const s = STATUS_MAP[status] || STATUS_MAP.draft;
const pad = size === 'sm' ? '2px 9px 2px 7px' : '4px 11px 4px 8px';
const fs = size === 'sm' ? 11.5 : 12.5;
return (
{label || s.label}
);
}
window.StatusBadge = StatusBadge;
/* ---------- SLA countdown ---------- */
function useTick(ms = 1000) {
const [, set] = React.useState(0);
React.useEffect(() => { const id = setInterval(() => set((n) => n + 1), ms); return () => clearInterval(id); }, [ms]);
}
function SLACountdown({ deadline, compact = false }) {
useTick(1000);
const diff = deadline - Date.now();
const over = diff <= 0;
const abs = Math.abs(diff);
const h = Math.floor(abs / 3.6e6), m = Math.floor((abs % 3.6e6) / 6e4), s = Math.floor((abs % 6e4) / 1000);
const urgent = !over && diff < 3.6e6 * 2;
const color = over ? '#C5372C' : urgent ? '#E1A100' : 'var(--dv-green-bright)';
const bg = over ? '#F8E0DD' : urgent ? '#FFF1CF' : '#D6ECE5';
const txt = over ? 'Quá hạn ' : '';
const time = h > 24 ? `${Math.floor(h / 24)}n ${h % 24}g` : `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
const { IconClock } = window;
return (
{txt}{time}
);
}
window.SLACountdown = SLACountdown;
/* ---------- Offered-vs-target delta chip ---------- */
function DeltaChip({ offered, target, size = 'md' }) {
if (offered == null || target == null) return —;
const d = offered - target;
const pct = target ? (d / target) * 100 : 0;
const good = d <= 0; // lower than target price = good for buyer
const color = d === 0 ? 'var(--dv-ink-soft)' : good ? 'var(--dv-green-bright)' : '#C5372C';
const bg = d === 0 ? '#EEF0EF' : good ? '#D6ECE5' : '#F8E0DD';
const { IconArrowDown, IconArrowUp } = window;
return (
{d !== 0 && (good ? : )}
{d === 0 ? '±0%' : PCT(pct)}
);
}
window.DeltaChip = DeltaChip;
/* ---------- Partial-fulfil indicator ---------- */
function FillBar({ have, need, width = 96 }) {
const ratio = Math.max(0, Math.min(1, have / need));
const full = have >= need;
const color = full ? 'var(--dv-green-bright)' : ratio >= 0.5 ? 'var(--dv-yellow-600)' : '#C5372C';
return (
{NUM(have)}/{NUM(need)}
{!full && · {Math.round(ratio * 100)}%}
);
}
window.FillBar = FillBar;
/* ---------- Days-of-inventory bar ---------- */
function DoiBar({ days, target = 30, max = 60 }) {
const tone = days <= 7 ? 'critical' : days <= 15 ? 'low' : 'healthy';
const color = tone === 'critical' ? '#C5372C' : tone === 'low' ? '#E1A100' : 'var(--dv-green-bright)';
const pct = Math.max(4, Math.min(100, (days / max) * 100));
return (
{days}ng
);
}
window.DoiBar = DoiBar;
/* ---------- Jargon tooltip ---------- */
function Tip({ text, children }) {
const [open, setOpen] = React.useState(false);
const { IconHelp } = window;
return (
setOpen(true)} onMouseLeave={() => setOpen(false)}>
{children}
{open && (
{text}
)}
);
}
window.Tip = Tip;
/* ---------- VAT incl/excl toggle ---------- */
function VatToggle({ value, onChange }) {
return (
{[['excl', 'Chưa VAT'], ['incl', 'Có VAT']].map(([k, l]) => (
))}
);
}
window.VatToggle = VatToggle;
/* ---------- Status tabs (Tất cả / Chờ… ) ---------- */
function StatusTabs({ items, value, onChange }) {
return (
{items.map(([k, label, count]) => {
const on = value === k;
return (
);
})}
);
}
window.StatusTabs = StatusTabs;
/* ---------- Page header ---------- */
function PageHeader({ title, subtitle, actions }) {
return (
{title}
{subtitle &&
{subtitle}
}
{actions &&
{actions}
}
);
}
window.PageHeader = PageHeader;
/* ---------- Toolbar (search + filters) ---------- */
function Toolbar({ children }) {
return {children}
;
}
function SearchBox({ value, onChange, placeholder, width = 280 }) {
const { IconSearch } = window;
return (
onChange(e.target.value)} placeholder={placeholder} style={{ border: 'none', outline: 'none', background: 'transparent', flex: 1, fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--dv-ink)' }} />
);
}
function GhostBtn({ icon, children, onClick, active }) {
return (
);
}
window.Toolbar = Toolbar; window.SearchBox = SearchBox; window.GhostBtn = GhostBtn;
/* ---------- Data table primitives ---------- */
function Table({ children, minWidth }) {
return (
);
}
function Th({ children, align = 'left', width }) {
return {children} | ;
}
function Td({ children, align = 'left', mono, strong, color, nowrap }) {
return {children} | ;
}
function Tr({ children, onClick, hover = true, highlight }) {
const [h, setH] = React.useState(false);
return (
setH(true)} onMouseLeave={() => setH(false)}
style={{ borderBottom: '1px solid var(--border-default)', cursor: onClick ? 'pointer' : 'default',
background: highlight ? '#FFFBF0' : (hover && h ? 'var(--dv-mist)' : 'transparent'), transition: 'background 120ms' }}>{children}
);
}
window.Table = Table; window.Th = Th; window.Td = Td; window.Tr = Tr;
/* ---------- Tiny inline icon badge (square, soft) ---------- */
function MiniBadge({ children, tone = 'green' }) {
const map = { green: ['var(--dv-green-50)', 'var(--dv-green)'], yellow: ['var(--dv-yellow-100)', 'var(--dv-yellow-600)'], red: ['#F8E0DD', '#C5372C'], blue: ['#E5EEFb', '#1d4f8a'] };
const [bg, fg] = map[tone] || map.green;
return {children};
}
window.MiniBadge = MiniBadge;
/* ---------- MultiSelect filter (checkbox popover) ----------
Empty selection === "all". `allLabel` shown when nothing/everything picked. */
function MultiSelect({ options, value, onChange, allLabel = 'Tất cả', icon, width = 200, align = 'left' }) {
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
const { IconChevronDown, IconCheck, IconX } = window;
React.useEffect(() => {
if (!open) return;
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [open]);
const sel = value || [];
const toggle = (opt) => { onChange(sel.includes(opt) ? sel.filter((x) => x !== opt) : [...sel, opt]); };
const summary = sel.length === 0 ? allLabel : sel.length === 1 ? sel[0] : `${sel.length} đã chọn`;
return (
{open && (
{allLabel} ({sel.length || options.length})
{sel.length > 0 && }
{options.map((opt) => {
const on = sel.includes(opt);
return (
);
})}
)}
);
}
window.MultiSelect = MultiSelect;
/* ---------- Empty state + CSV export (Gói 3) ---------- */
function EmptyState({ icon = 'IconInbox', title, hint }) {
const Icon = window[icon] || window.IconInbox;
return (
);
}
window.EmptyState = EmptyState;
function exportCSV(filename, header, rows) {
const esc = (c) => { const s = String(c == null ? '' : c); return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s; };
const csv = '\uFEFF' + [header.map(esc).join(','), ...rows.map((r) => r.map(esc).join(','))].join('\n');
const a = document.createElement('a');
a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }));
a.download = filename;
a.click();
URL.revokeObjectURL(a.href);
}
window.exportCSV = exportCSV;
/* ---------- Skeleton bar (hiện khi đồng bộ) ---------- */
function Skel({ w = '100%', h = 12, r = 6 }) {
return ;
}
window.Skel = Skel;
/* ---------- Toast ---------- */
function Toast({ msg, onDone }) {
React.useEffect(() => { if (!msg) return; const id = setTimeout(onDone, 3200); return () => clearTimeout(id); }, [msg]);
const { IconCheckCircle } = window;
if (!msg) return null;
return (
{msg}
);
}
window.Toast = Toast;
/* ---------- Pipeline stepper — shows where a screen sits in a multi-stage flow ---------- */
function PipelineSteps({ steps, active }) {
const { IconChevronRight } = window;
return (
{steps.map((s, i) => {
const on = i === active;
const done = i < active;
return (
{i + 1}
{s}
{i < steps.length - 1 && }
);
})}
);
}
window.PipelineSteps = PipelineSteps;