// branding.jsx — Quản trị hệ thống: logo · nhóm màu · tên gọi · mô tả · liên hệ + thông tin cty chứng từ. // Admin chỉnh trong "Quản trị hệ thống"; lưu Supabase app_settings['branding'] (JSON, DÙNG CHUNG // toàn hệ thống, RLS chỉ admin ghi) qua p.saveBranding; localStorage (usePersist 'brandingv2', // hoist main.jsx) = cache hiển thị tức thì + màn đăng nhập. Áp toàn cục: token màu phái sinh từ primary/accent // (set CSS var trên ) + document.title. Tải TRƯỚC shell.jsx (BrandLogo dùng chung). const DEFAULT_BRANDING = { name: 'My S.W.O', logo: '/favicon-v2.svg', // logo mặc định = mark SWO trong .design/icons (đã deploy ở root); đặt '' để dùng mark chữ logoText: 'SWO', primary: '#1466E0', accent: '#12C5C0', // cyan thương hiệu theo logo SWO Mark (v4) description: '', // rỗng = dùng mô tả mặc định (i18n login.heroSub) contactEmail: 'support@swo.vn', contactPhone: '', contactAddress: '', copyright: '© 2026 S.W.O Technology · Smart Works · Optimal & Simple', // ---- thông tin công ty cho chứng từ (báo giá / hợp đồng / đề nghị thanh toán) ---- contactWeb: 'swo.vn', companyName: '', // rỗng = dùng `name`; tên pháp lý hiện trên chứng từ companyAddr: '', // rỗng = dùng `contactAddress` docLogo: '', // logo riêng cho chứng từ; rỗng = dùng ký hiệu chữ docFont: 'Cambria', // font chữ trên chứng từ (báo giá / hợp đồng / đề nghị thanh toán) mst: '0315378557', bankName: 'Vietcombank — CN TP. Hồ Chí Minh', bankAcc: '0071 0000 20289', }; // "Nhóm màu" dựng sẵn (primary + accent). Tùy chọn "Tùy chỉnh" cho phép chọn màu tự do. const BRAND_THEMES = [ { id:'swo', name:{vi:'S.W.O (mặc định)',en:'S.W.O (default)'}, primary:'#1466E0', accent:'#12C5C0' }, { id:'indigo', name:{vi:'Chàm',en:'Indigo'}, primary:'#4F46E5', accent:'#06B6D4' }, { id:'violet', name:{vi:'Tím',en:'Violet'}, primary:'#7C3AED', accent:'#EC4899' }, { id:'emerald', name:{vi:'Lục bảo',en:'Emerald'}, primary:'#059669', accent:'#14B8A6' }, { id:'amber', name:{vi:'Hổ phách',en:'Amber'}, primary:'#D97706', accent:'#0FB0AB' }, { id:'rose', name:{vi:'Hồng',en:'Rose'}, primary:'#E11D48', accent:'#F59E0B' }, { id:'slate', name:{vi:'Xám đá',en:'Slate'}, primary:'#475569', accent:'#0EA5E9' }, ]; /* ---- color helpers (phái sinh ramp từ 1 màu seed) ---- */ function _hexToRgb(h) { const s = (h || '').replace('#', '').trim(); const v = s.length === 3 ? s.split('').map(c => c + c).join('') : s.slice(0, 6).padEnd(6, '0'); const n = parseInt(v, 16) || 0; return { r:(n >> 16) & 255, g:(n >> 8) & 255, b:n & 255 }; } function _toHex(r, g, b) { const h = x => Math.max(0, Math.min(255, Math.round(x))).toString(16).padStart(2, '0'); return '#' + h(r) + h(g) + h(b); } function _mix(hex, target, ratio) { const a = _hexToRgb(hex), b = _hexToRgb(target); return _toHex(a.r + (b.r - a.r) * ratio, a.g + (b.g - a.g) * ratio, a.b + (b.b - a.b) * ratio); } const _BLACK = '#000000', _WHITE = '#ffffff'; // Trả về map các CSS var phái sinh từ primary + accent (đủ để re-skin nhất quán). function deriveBrandVars(primary, accent) { const p = /^#?[0-9a-fA-F]{3,6}$/.test(primary || '') ? primary : DEFAULT_BRANDING.primary; const a = /^#?[0-9a-fA-F]{3,6}$/.test(accent || '') ? accent : DEFAULT_BRANDING.accent; const c = _hexToRgb(p); return { '--primary': p, '--primary-hover': _mix(p, _BLACK, 0.16), '--primary-active': _mix(p, _BLACK, 0.30), '--primary-light': _mix(p, _WHITE, 0.90), '--primary-light-2': _mix(p, _WHITE, 0.82), '--accent': a, '--accent-light': _mix(a, _WHITE, 0.88), '--info': p, '--info-bg': _mix(p, _WHITE, 0.90), '--ring': `0 0 0 3px rgba(${c.r},${c.g},${c.b},.16)`, }; } // Áp branding ra toàn cục (gọi từ effect trong main.jsx mỗi khi branding đổi). function applyBranding(b) { const br = Object.assign({}, DEFAULT_BRANDING, b || {}); const root = document.documentElement; const vars = deriveBrandVars(br.primary, br.accent); Object.keys(vars).forEach(k => root.style.setProperty(k, vars[k])); // Tiêu đề = ĐÚNG tên trong Quản trị hệ thống (branding.name), không nối hậu tố. document.title = br.name || DEFAULT_BRANDING.name; } /* ---- Brand mark: logo ảnh (nếu có) hoặc mark chữ ".swo-mark" ---- */ function BrandLogo({ branding, size = 26, fontSize = 10, className = '' }) { const b = Object.assign({}, DEFAULT_BRANDING, branding || {}); if (b.logo) return {b.name; return {b.logoText || 'SWO'}; } /* ===================== Quản trị hệ thống (admin) ===================== */ function SystemAdminPanel() { const p = usePortal(); const { t, tt, lang } = useLang(); const toast = useToast(); const isAdmin = p.role === 'admin'; const [d, setD] = React.useState(() => Object.assign({}, DEFAULT_BRANDING, p.branding)); const set = (k, v) => setD(s => ({ ...s, [k]:v })); const fileRef = React.useRef(); const docFileRef = React.useRef(); const dirty = JSON.stringify(d) !== JSON.stringify(Object.assign({}, DEFAULT_BRANDING, p.branding)); // Đọc tệp ảnh → data-URL, gán vào khóa branding (logo app hoặc docLogo chứng từ). const readImage = (e, key) => { const f = e.target.files && e.target.files[0]; e.target.value = ''; if (!f) return; if (!/^image\//.test(f.type)) { toast(lang === 'vi' ? 'Vui lòng chọn tệp ảnh' : 'Please choose an image file', 'error'); return; } if (f.size > 512 * 1024) { toast(lang === 'vi' ? 'Ảnh quá lớn (tối đa 512KB)' : 'Image too large (max 512KB)', 'error'); return; } const rd = new FileReader(); rd.onload = () => set(key, rd.result); rd.readAsDataURL(f); }; const onUpload = (e) => readImage(e, 'logo'); const save = () => { p.saveBranding(Object.assign({}, DEFAULT_BRANDING, d)); toast(lang === 'vi' ? 'Đã lưu — đồng bộ toàn hệ thống' : 'Saved — synced system-wide', 'success'); }; const resetAll = () => { setD(Object.assign({}, DEFAULT_BRANDING)); }; const applyTheme = (th) => setD(s => ({ ...s, primary:th.primary, accent:th.accent })); const activeTheme = BRAND_THEMES.find(th => th.primary.toLowerCase() === (d.primary || '').toLowerCase() && th.accent.toLowerCase() === (d.accent || '').toLowerCase()); if (!isAdmin) { return
; } const previewVars = deriveBrandVars(d.primary, d.accent); return (
{/* Thanh lưu cố định trên đầu — luôn thao tác được, không phải cuộn */}
{t('sys.note')} · {lang === 'vi' ? 'Lưu sẽ áp dụng cho TOÀN hệ thống (mọi máy & người dùng).' : 'Saving applies system-wide (all machines & users).'}
{dirty && {t('sys.unsaved')}}
{/* Bố trí theo nhóm: Nhận diện & giao diện · Thông tin doanh nghiệp · Chính sách hệ thống */}
{/* ===== Nhóm 1: Nhận diện & giao diện ===== */}
{lang === 'vi' ? 'Nhận diện & giao diện' : 'Identity & appearance'}
{/* Nhận diện: logo + tên + mô tả */}

{t('sys.identity')}

{d.logo && }
{t('sys.logoHint')}
{!d.logo && ( set('logoText', e.target.value)} style={{ maxWidth:140 }} /> )} set('name', e.target.value)} placeholder="My S.W.O" />