/* primitives.jsx — Workforce Planner — shared UI primitives. Styled with Boxme tokens, Vietnamese copy. */ // ---------- Vietnamese label dictionary (status, role, day type, tier) ---------- const VI_LABEL = { // Status badges DRAFT: 'Nháp', APPROVED: 'Đã duyệt', SENT: 'Đã gửi', FULFILLED: 'Hoàn tất', CANCELLED: 'Đã hủy', ACTIVE: 'Hoạt động', INACTIVE: 'Tạm dừng', PROMOTED: 'Đã chốt', PENDING: 'Chờ duyệt', REJECTED: 'Từ chối', SUBMITTED: 'Đã gửi', OVERDUE: 'Trễ hạn', // Import diff new: 'Mới', update: 'Sửa', unchanged: 'Giữ nguyên', // Severity INFO: 'Thông tin', WARNING: 'Cảnh báo', CRITICAL: 'Nghiêm trọng', // Day type MEGA_SALE: 'Sale lớn', PAYDAY: 'Ngày lương', MINI_SPIKE: 'Sale nhỏ', NORMAL: 'Bình thường', // Customer tier KEY: 'Trọng điểm', MAJOR: 'Lớn', STANDARD: 'Phổ thông', // Plan flags FORECAST: 'Dự báo', ACTUAL: 'Thực tế', UNCERTAIN: 'Chưa chắc', // Staff type OFFICIAL: 'Chính thức', TEMP: 'Thời vụ', }; function viLabel(text) { if (typeof text === 'string' && VI_LABEL[text] != null) return VI_LABEL[text]; return text; } const VI_ROLE = { PICKER: 'nhặt hàng', PACKER: 'đóng gói', CHECKER: 'kiểm hàng', LEAD: 'trưởng nhóm' }; function viRole(r) { return VI_ROLE[r] || (r || '').toLowerCase(); } // ---------- Viewport hook ---------- function useViewport() { const [vw, setVw] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280); React.useEffect(() => { let raf = 0; function onResize() { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => setVw(window.innerWidth)); } window.addEventListener('resize', onResize); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', onResize); }; }, []); return { vw, isMobile: vw < 720, // phone isTablet: vw >= 720 && vw < 1024, isCompact: vw < 1100, // hide non-essential top-nav chrome isNarrow: vw < 1280, }; } // ---------- Icon ---------- const FA_MAP = { // nav / actions home: 'fa-solid fa-house', warehouse: 'fa-solid fa-warehouse', users: 'fa-solid fa-users', sliders: 'fa-solid fa-sliders', forecast: 'fa-solid fa-chart-line', plan: 'fa-solid fa-list-check', hiring: 'fa-solid fa-user-plus', upload: 'fa-solid fa-file-arrow-up', audit: 'fa-solid fa-clipboard-check', search: 'fa-solid fa-magnifying-glass', command: 'fa-solid fa-square-caret-up', bell: 'fa-regular fa-bell', user: 'fa-regular fa-circle-user', logout: 'fa-solid fa-right-from-bracket', globe: 'fa-solid fa-globe', building: 'fa-solid fa-building', 'chevron-down': 'fa-solid fa-chevron-down', 'chevron-right': 'fa-solid fa-chevron-right', 'chevron-left': 'fa-solid fa-chevron-left', check: 'fa-solid fa-check', x: 'fa-solid fa-xmark', plus: 'fa-solid fa-plus', minus: 'fa-solid fa-minus', edit: 'fa-regular fa-pen-to-square', trash: 'fa-regular fa-trash-can', download: 'fa-solid fa-download', print: 'fa-solid fa-print', pdf: 'fa-regular fa-file-pdf', excel: 'fa-regular fa-file-excel', filter: 'fa-solid fa-filter', refresh: 'fa-solid fa-rotate', rocket: 'fa-solid fa-rocket-launch', play: 'fa-solid fa-play', pause: 'fa-solid fa-pause', info: 'fa-solid fa-circle-info', warning: 'fa-solid fa-triangle-exclamation', critical: 'fa-solid fa-circle-exclamation', spark: 'fa-solid fa-bolt', history: 'fa-solid fa-clock-rotate-left', ellipsis: 'fa-solid fa-ellipsis', diff: 'fa-solid fa-code-branch', copy: 'fa-regular fa-copy', external: 'fa-solid fa-arrow-up-right-from-square', shield: 'fa-solid fa-shield-halved', lock: 'fa-solid fa-lock', mail: 'fa-regular fa-envelope', calendar: 'fa-regular fa-calendar', clock: 'fa-regular fa-clock', link: 'fa-solid fa-link', arrowUp: 'fa-solid fa-arrow-up', arrowDown: 'fa-solid fa-arrow-down', arrowRight: 'fa-solid fa-arrow-right', layers: 'fa-solid fa-layer-group', cube: 'fa-solid fa-cube', truck: 'fa-solid fa-truck', cog: 'fa-solid fa-gear', eye: 'fa-regular fa-eye', drag: 'fa-solid fa-grip-vertical', }; function Icon({ name, size = 14, style, className }) { const cls = FA_MAP[name] || 'fa-regular fa-circle'; return ( ); } // ---------- Button ---------- function Button({ variant = 'primary', size = 'md', children, icon, iconRight, onClick, disabled, type, style, title }) { const base = { fontFamily: 'var(--bx-font-sans)', fontWeight: 500, borderRadius: 10, border: '1px solid transparent', cursor: disabled ? 'not-allowed' : 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, height: size === 'sm' ? 30 : size === 'lg' ? 44 : 36, padding: size === 'sm' ? '0 12px' : size === 'lg' ? '0 22px' : '0 14px', fontSize: size === 'sm' ? 12.5 : 13.28, opacity: disabled ? 0.55 : 1, transition: 'background 120ms, border-color 120ms', whiteSpace: 'nowrap', }; const v = { primary: { background: 'var(--bx-primary)', color: '#fff' }, secondary: { background: 'var(--bx-surface-2)', color: 'var(--bx-text-dark)' }, outline: { background: '#fff', color: 'var(--bx-text-dark)', borderColor: 'var(--bx-border)' }, ghost: { background: 'transparent', color: 'var(--bx-text-dark)' }, 'ghost-primary': { background: 'transparent', color: 'var(--bx-primary)' }, danger: { background: 'var(--bx-error)', color: '#fff' }, 'danger-outline': { background: '#fff', color: 'var(--bx-error)', borderColor: 'var(--bx-error)' }, }[variant]; return ( ); } // ---------- IconBtn (square, no label) ---------- function IconBtn({ name, onClick, title, active, size = 32, style }) { return ( ); } // ---------- Input ---------- function Input({ value, onChange, placeholder, icon, iconRight, type = 'text', size = 'md', error, disabled, style, autoFocus, onKeyDown }) { const [focus, setFocus] = React.useState(false); const h = size === 'sm' ? 32 : 36; return (
{icon ? : null} setFocus(true)} onBlur={() => setFocus(false)} autoFocus={autoFocus} disabled={disabled} onKeyDown={onKeyDown} style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--bx-font-sans)', fontSize: 13, color: 'var(--bx-text-dark)', minWidth: 0, fontVariantNumeric: type === 'number' ? 'tabular-nums' : 'normal', }} /> {iconRight ? : null}
); } // ---------- Field (label + input + error) ---------- function Field({ label, hint, error, required, children, style }) { return ( ); } // ---------- Select (native, restyled) ---------- function Select({ value, onChange, options, placeholder, size = 'md', disabled, style }) { const h = size === 'sm' ? 32 : 36; return (
); } // ---------- Badge / Chip ---------- const STATUS_COLORS = { DRAFT: { bg: '#f5f5f5', fg: '#4a4a4a', dot: '#99a1af' }, APPROVED: { bg: '#eef2ff', fg: '#0b43ea', dot: '#0b43ea' }, SENT: { bg: '#eff6ff', fg: '#1e40af', dot: '#1e40af' }, FULFILLED: { bg: '#f0fdf4', fg: '#15803d', dot: '#00af4e' }, CANCELLED: { bg: '#f5f5f5', fg: '#525252', dot: '#a3a3a3' }, ACTIVE: { bg: '#f0fdf4', fg: '#15803d', dot: '#00af4e' }, INACTIVE: { bg: '#f5f5f5', fg: '#737373', dot: '#a3a3a3' }, PROMOTED: { bg: '#f0fdf4', fg: '#15803d', dot: '#00af4e' }, new: { bg: '#eef2ff', fg: '#0b43ea', dot: '#0b43ea' }, update: { bg: '#fefce8', fg: '#92400e', dot: '#d97706' }, unchanged: { bg: '#f5f5f5', fg: '#737373', dot: '#a3a3a3' }, INFO: { bg: '#eff6ff', fg: '#1e40af', dot: '#2563eb' }, WARNING: { bg: '#fefce8', fg: '#92400e', dot: '#d97706' }, CRITICAL: { bg: '#fef2f2', fg: '#b91c1c', dot: '#dc2626' }, }; function Badge({ kind, children, dot, style, size = 'md' }) { const c = STATUS_COLORS[kind] || { bg: 'var(--bx-surface-2)', fg: 'var(--bx-text-body)', dot: '#a3a3a3' }; return ( {dot !== false ? : null} {viLabel(children) || viLabel(kind)} ); } // ---------- Card ---------- function Card({ title, subtitle, actions, padding = 16, children, style, bodyStyle, noBody }) { return (
{(title || actions) && (
{title &&
{title}
} {subtitle &&
{subtitle}
}
{actions &&
{actions}
}
)} {!noBody &&
{children}
}
); } // ---------- Tabs ---------- function Tabs({ value, onChange, tabs, dense, style }) { return (
{tabs.map(t => { const active = (t.id || t.value) === value; return ( ); })}
); } // ---------- Section tabs (underlined for hero page) ---------- function SectionTabs({ value, onChange, tabs }) { return (
{tabs.map(t => { const active = t.id === value; return ( ); })}
); } // ---------- Table ---------- // Column.priority: 1 = always show, 2 = hide on mobile, 3 = hide on mobile + tablet function Table({ columns, rows, getRowKey, dense, onRowClick, emptyText = 'Chưa có dữ liệu', stickyHeader }) { const { isMobile, isTablet } = useViewport(); columns = columns.filter(c => { const p = c.priority || 1; if (isMobile && p >= 2) return false; if (isTablet && p >= 3) return false; return true; }); if (!rows || rows.length === 0) { return (
{emptyText === 'No rows' ? 'Chưa có dữ liệu' : emptyText}
); } return (
{columns.map((c, i) => ( ))} {rows.map((r, i) => ( onRowClick(r) : undefined} style={{ background: i % 2 === 1 ? 'rgba(245,245,245,0.4)' : '#fff', cursor: onRowClick ? 'pointer' : 'default', }}> {columns.map((c, ci) => ( ))} ))}
{c.header}
{c.render ? c.render(r, i) : r[c.key]}
); } // ---------- Dialog ---------- function Dialog({ open, onClose, title, subtitle, footer, children, width = 560, destructive }) { const { isMobile } = useViewport(); if (!open) return null; return (
e.stopPropagation()} style={{ width: '100%', maxWidth: isMobile ? '100%' : width, maxHeight: isMobile ? '92vh' : 'calc(100vh - 48px)', borderTopLeftRadius: isMobile ? 'var(--bx-radius-lg)' : 'var(--bx-radius-lg)', borderTopRightRadius: isMobile ? 'var(--bx-radius-lg)' : 'var(--bx-radius-lg)', borderBottomLeftRadius: isMobile ? 0 : 'var(--bx-radius-lg)', borderBottomRightRadius: isMobile ? 0 : 'var(--bx-radius-lg)', background: '#fff', borderRadius: 'var(--bx-radius-lg)', boxShadow: 'var(--bx-shadow-pop)', display: 'flex', flexDirection: 'column', overflow: 'hidden', }}> {isMobile &&
}
{title}
{subtitle &&
{subtitle}
}
{children}
{footer && (
{footer}
)}
); } // ---------- Skeleton ---------- function Skeleton({ width = '100%', height = 12, radius = 6, style }) { return (
); } // ---------- Empty state ---------- function Empty({ icon = 'info', title, subtitle, action }) { return (
{title}
{subtitle ?
{subtitle}
: null} {action ?
{action}
: null}
); } // ---------- Toast ---------- function Toast({ kind = 'INFO', title, body, onClose }) { const c = STATUS_COLORS[kind] || STATUS_COLORS.INFO; const ic = kind === 'CRITICAL' ? 'critical' : kind === 'WARNING' ? 'warning' : kind === 'FULFILLED' ? 'check' : 'info'; return (
{title}
{body &&
{body}
}
); } // ---------- Metric tile ---------- function Metric({ label, value, sublabel, hint, delta, deltaTone, icon, style, mono = true }) { return (
{icon ? : null} {label}
{value}
{sublabel ? {sublabel} : null} {delta != null ? ( {delta} ) : null}
{hint ?
{hint}
: null}
); } // ---------- Number / fmt helpers ---------- const fmt = { int: (n) => (n == null ? '—' : Number(n).toLocaleString('vi-VN')), pct: (n) => (n == null ? '—' : (n <= 1 ? (n * 100).toFixed(1) + '%' : n.toFixed(1) + '%')), signed: (n) => (n == null ? '—' : (n > 0 ? '+' : '') + Number(n).toLocaleString('vi-VN')), hrs: (n) => (n == null ? '—' : Number(n).toFixed(1) + 'h'), date: (iso) => { if (!iso) return '—'; const d = new Date(iso); const dd = String(d.getDate()).padStart(2,'0'); const mm = String(d.getMonth()+1).padStart(2,'0'); return dd + '/' + mm + '/' + d.getFullYear(); }, shortDate: (iso) => { if (!iso) return '—'; const d = new Date(iso); const dd = String(d.getDate()).padStart(2,'0'); const mm = String(d.getMonth()+1).padStart(2,'0'); return dd + '/' + mm; }, dateTime: (iso) => { if (!iso) return '—'; const d = new Date(iso); const dd = String(d.getDate()).padStart(2,'0'); const mm = String(d.getMonth()+1).padStart(2,'0'); const hh = String(d.getHours()).padStart(2,'0'); const mi = String(d.getMinutes()).padStart(2,'0'); return dd + '/' + mm + ' ' + hh + ':' + mi; }, vnd: (n) => (n == null ? '—' : Number(n).toLocaleString('vi-VN') + 'đ'), }; // Vietnamese weekday helper function viWeekday(iso, short = true) { if (!iso) return '—'; const d = new Date(iso); const map = short ? ['CN','T2','T3','T4','T5','T6','T7'] : ['Chủ nhật','Thứ 2','Thứ 3','Thứ 4','Thứ 5','Thứ 6','Thứ 7']; return map[d.getDay()]; } // ---------- Avatar ---------- function Avatar({ name, size = 28, color }) { const initials = (name || '?').split(' ').slice(-2).map(s => s[0]).join('').toUpperCase(); const bg = color || '#eef2ff'; const fg = color ? '#fff' : '#0b43ea'; return (
{initials}
); } // expose Object.assign(window, { Icon, FA_MAP, Button, IconBtn, Input, Field, Select, Badge, Card, Tabs, SectionTabs, Table, Dialog, Skeleton, Empty, Toast, Metric, fmt, Avatar, STATUS_COLORS, useViewport, VI_LABEL, viLabel, VI_ROLE, viRole, viWeekday, });