// =========================================================== // Main App — auth gate, role switcher, router, tweaks // =========================================================== const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "variation": "classic", "role": "staff-linh", "density": "regular", "accentMode": "navy", "startLoggedIn": false }/*EDITMODE-END*/; // 1 workspace DUY NHẤT cho mọi tài khoản (admin lẫn nhân viên kinh doanh) — không tách // màn hình theo vai trò. Sổ khách của mỗi người gồm cả khách lẻ + đối tác, chia tệp bằng // bộ lọc bên trong màn Khách hàng. Khác biệt admin/staff nằm ở DỮ LIỆU thấy được (RBAC // backend), không phải ở nav. const NAV = [ { id: 'dashboard', label: 'Tổng quan', icon: 'dashboard' }, { id: 'customers', label: 'Khách hàng', icon: 'users' }, { id: 'followpipe', label: 'Follow-up & Pipeline', icon: 'target' }, { id: 'telesale', label: 'Console Gọi', icon: 'phone' }, { id: 'inventory', label: 'Tồn kho', icon: 'package' }, { id: 'reports', label: 'Báo cáo', icon: 'chart' }, { id: 'settings', label: 'Cài đặt', icon: 'settings' }, ]; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [authed, setAuthed] = useState( (window.TVS_API && window.TVS_API.isAuthed()) || t.startLoggedIn !== false ); const [refreshKey, setRefreshKey] = useState(0); window.tvsRefreshUI = () => setRefreshKey(k => k + 1); // Khi khôi phục phiên bằng token, đồng bộ role hiện tại từ dữ liệu thật. useEffect(() => { if (window.TVS_API && window.TVS_API.isAuthed() && window.TVS_DATA.roles && window.TVS_DATA.roles[0]) { const realId = window.TVS_DATA.roles[0].id; if (t.role !== realId) setTweak('role', realId); } }, []); const doLogout = () => { if (window.TVS_API) window.TVS_API.logout(); setAuthed(false); }; const role = D.roles.find(r => r.id === t.role) || D.roles[0]; const nav = role.role === 'admin' ? NAV : NAV.filter(n => n.id !== 'settings'); // Default screen depends on role const [screen, setScreen] = useState(() => { const hash = window.location.hash.replace('#/', ''); const matched = NAV.find(n => n.id === hash); return matched ? matched.id : nav[0].id; }); const [openCustomer, setOpenCustomer] = useState(null); const [openPartner, setOpenPartner] = useState(null); const [logOrderFor, setLogOrderFor] = useState(null); const [savedToast, setSavedToast] = useState(null); const [showAddCustomer, setShowAddCustomer] = useState(false); const [showAddPartner, setShowAddPartner] = useState(false); const [mobileNavOpen, setMobileNavOpen] = useState(false); const [showSearch, setShowSearch] = useState(false); const [accountMode, setAccountMode] = useState(null); // 'profile' | 'account' | null // Navigate to a screen and exit account view const goTo = (s) => { setAccountMode(null); setScreen(s); window.location.hash = '#/' + s; }; useEffect(() => { if (window.location.hash === '') { window.location.hash = '#/' + screen; } const onHashChange = () => { const hash = window.location.hash.replace('#/', ''); const matched = nav.find(n => n.id === hash); if (matched) { setScreen(matched.id); } }; window.addEventListener('hashchange', onHashChange); return () => window.removeEventListener('hashchange', onHashChange); }, [nav]); const onLogOrder = (c) => setLogOrderFor(c); // Cmd+K / Ctrl+K opens global search; ESC closes overlays useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); if (authed) setShowSearch(true); } if (e.key === 'Escape') { setShowSearch(false); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [authed]); // Re-set screen if role changes and current screen not in nav useEffect(() => { if (!nav.find(n => n.id === screen)) { setScreen(nav[0].id); } }, [t.role]); // Apply variation to useEffect(() => { document.documentElement.setAttribute('data-variation', t.variation); }, [t.variation]); // Close mobile nav on route change useEffect(() => { setMobileNavOpen(false); }, [screen]); // ============ AUTH GATE ============ if (!authed) { return { setTweak('role', roleId); setAuthed(true); }}/>; } return (
setShowAddCustomer(true)} onAddPartner={() => setShowAddPartner(true)} onOpenMobileNav={() => setMobileNavOpen(true)} onOpenSearch={() => setShowSearch(true)} onOpenAccount={(m) => setAccountMode(m)} onLogout={doLogout}/> {mobileNavOpen &&
setMobileNavOpen(false)}/>}
{accountMode ? ( setAccountMode(m)}/> ) : ( <> {screen === 'dashboard' && setShowAddCustomer(true)}/>} {screen === 'customers' && { setOpenCustomer(null); setScreen('telesale'); }} onLogOrder={onLogOrder} onAddCustomer={() => setShowAddCustomer(true)} onAddPartner={() => setShowAddPartner(true)}/>} {screen === 'telesale' && } {screen === 'followpipe' && { setOpenCustomer(null); setScreen('telesale'); }}/>} {screen === 'instore' && } {screen === 'inventory' && } {screen === 'reports' && } {screen === 'settings' && } )}
{openCustomer && ( setOpenCustomer(null)} onCall={() => { setOpenCustomer(null); setScreen('telesale'); }} onLogOrder={(c) => { setOpenCustomer(null); setLogOrderFor(c); }} /> )} {openPartner && ( setOpenPartner(null)} onLogOrder={(p) => { setOpenPartner(null); setLogOrderFor({...p, _b2b: true}); }} /> )} {logOrderFor && ( setLogOrderFor(null)} onSave={async (order) => { const isB2B = !!logOrderFor._b2b; // Lưu đơn THẬT vào DB (khách lẻ và đối tác B2B đều là Customer nên dùng chung endpoint). if (window.TVS_API && window.TVS_API.isAuthed()) { try { await window.TVS_API.addOrder(logOrderFor.id, { ref: order.posRef, total: order.total, channel: order.channel, date: order.orderDate && order.orderTime ? `${order.orderDate}T${order.orderTime}:00` : order.orderDate, items: order.items.map(it => ({ sku: it.sku, name: it.name, qty: it.qty, price: isB2B ? (it.b2bPrice || it.price || 0) : (it.price || 0) })), }); } catch (e) { // Không đóng modal / không báo thành công khi lưu lỗi — tránh mất dữ liệu người dùng đã nhập. window.tvsToast && window.tvsToast('Lỗi lưu đơn: ' + e.message); return; } } setSavedToast({name: logOrderFor.name, count: order.items.length, total: order.total}); setLogOrderFor(null); setTimeout(() => setSavedToast(null), 4000); }} /> )} {showAddCustomer && ( setShowAddCustomer(false)} onSave={async (c) => { setShowAddCustomer(false); // Tạo khách thật + đưa vào pipeline (ô "Lead mới") if (window.TVS_API && window.TVS_API.isAuthed()) { try { const r = await window.TVS_API.createCustomer({ name: c.name, phone: c.phone, email: c.email, gender: c.gender, birthYear: c.birthYear, city: c.city }); // Nếu backend trả deduped + claimed -> khách đã được claim, vẫn đưa vào pipeline // Nếu created -> khách mới, đưa vào pipeline if (r && r.customer) await window.TVS_API.api('/api/pipeline', { method:'POST', body: JSON.stringify({ customerId: r.customer.id, stage:'lead' }) }); } catch (e) { /* lỗi mạng -> vẫn báo tạo */ } } setSavedToast({name: c.name, count: 0, total: 0, kind:'new-customer'}); setTimeout(() => setSavedToast(null), 4000); }}/> )} {showAddPartner && ( setShowAddPartner(false)} onSave={async (p) => { setShowAddPartner(false); if (window.TVS_API && window.TVS_API.isAuthed()) { try { await window.TVS_API.createPartner(p); await window.TVS_API.refresh(); } catch (e) { window.tvsToast && window.tvsToast('Lỗi tạo đối tác: ' + e.message); } } setSavedToast({name: p.name, count: 0, total: 0, kind:'new-partner'}); setTimeout(() => setSavedToast(null), 4000); }}/> )} {savedToast && (
{savedToast.kind === 'new-customer' ? `Đã tạo khách hàng ${savedToast.name}` : savedToast.kind === 'new-partner' ? `Đã thêm đối tác ${savedToast.name}` : `Đã lưu lịch sử mua cho ${savedToast.name}`}
{savedToast.count > 0 && (
{savedToast.count} sản phẩm · {fmt.vndFull(savedToast.total)} · Chờ khớp Sapo
)}
)} {showSearch && ( setShowSearch(false)} onOpenCustomer={(c) => setOpenCustomer(c)} onNavigate={(s) => setScreen(s)} /> )} ({value: r.id, label: r.label + ' — ' + r.person}))} onChange={(v) => setTweak('role', v)}/> setTweak('variation', v)}/>
{t.variation === 'classic' && '📐 Sidebar dọc + label · phù hợp cho power-user dùng cả ngày'} {t.variation === 'compact' && '⚡ Icon rail · tối ưu màn hình nhỏ, in-store tablet'} {t.variation === 'airy' && '✨ Top nav + nhiều khoảng trắng · phù hợp quản lý xem báo cáo'}
Đăng xuất để xem màn login
); } window.App = App;