function SettingsPage({ onSignOut, theme, onTheme, lang, onLang, userName = "Менеджер" }) { const Row = ({ icon, label, sub, right, danger, onClick, last }) => ( ); const Section = ({ title, children }) => (
{title}
{children}
); const SegmentRow = ({ icon, label, options, value, onChange, last }) => (
{label}
{options.map(opt => ( ))}
); return (
{/* User card */}
М
{userName}
Digitalshop CRM
{}}/> {}} last/>
); } // ── Root app ─────────────────────────────────────────────────────── const { useState, useEffect, useCallback } = React; function useIsMobile() { const [mobile, setMobile] = useState(window.innerWidth <= 768); useEffect(() => { const fn = () => setMobile(window.innerWidth <= 768); window.addEventListener("resize", fn); return () => window.removeEventListener("resize", fn); }, []); return mobile; } function useToast() { const [toasts, setToasts] = useState([]); const show = useCallback((message, type = "success") => { const id = Date.now(); setToasts(ts => [...ts, { id, message, type }]); setTimeout(() => setToasts(ts => ts.filter(t => t.id !== id)), 3000); }, []); return [toasts, show]; } function App() { const [authed, setAuthed] = useState(() => localStorage.getItem("crm_auth") === "1"); const [userName, setUserName] = useState(() => localStorage.getItem("crm_user_name") || "Менеджер"); const [userRole, setUserRole] = useState(() => localStorage.getItem("crm_user_role") || "manager"); const [active, setActive] = useState("orders"); const [toasts, showToast] = useToast(); const [theme, setTheme] = useState(() => localStorage.getItem("crm_theme") || "dark"); const [lang, setLang] = useState(() => localStorage.getItem("crm_lang") || "uk"); const [incomingCall, setIncoming] = useState(null); const isMobile = useIsMobile(); useEffect(() => { document.documentElement.className = theme === "light" ? "light-theme" : ""; localStorage.setItem("crm_theme", theme); }, [theme]); useEffect(() => { localStorage.setItem("crm_lang", lang); }, [lang]); // Pre-fetch calls in background as soon as user is authed useEffect(() => { if (!authed) return; if (!window._crmCalls?.data) { API.getCalls().then(d => { window._crmCalls = { data: d.calls || [], ts: Date.now() }; }).catch(() => {}); } }, [authed]); // WebSocket — incoming call notifications useEffect(() => { if (!authed) return; const proto = location.protocol === "https:" ? "wss" : "ws"; const ws = new WebSocket(`${proto}://${location.host}`); ws.onmessage = (e) => { try { const msg = JSON.parse(e.data); if (msg.event === "incoming_call") setIncoming({ caller: msg.caller, manager: msg.manager || '' }); } catch {} }; ws.onerror = () => {}; return () => ws.close(); }, [authed]); const LABELS_MAP = { uk: { orders: "Замовлення", requests: "Заявки", calls: "Дзвінки", banking: "Банки", settings: "Налаштування" }, ru: { orders: "Заказы", requests: "Заявки", calls: "Звонки", banking: "Банки", settings: "Настройки" }, }; const L = LABELS_MAP[lang] || LABELS_MAP.uk; if (!authed) { return { setUserName(name); setUserRole(role || "manager"); localStorage.setItem("crm_user_role", role || "manager"); setAuthed(true); }}/>; } const handleSignOut = () => { localStorage.removeItem("crm_auth"); localStorage.removeItem("crm_user_name"); localStorage.removeItem("crm_user_role"); setAuthed(false); }; // Track visited tabs — once mounted, keep alive (never unmount) const [visited, setVisited] = useState(() => new Set([active])); useEffect(() => { setVisited(v => new Set([...v, active])); }, [active]); // display:contents → wrapper transparent, children act as direct flex items // display:none → hidden but component stays mounted, all state preserved const wrap = (key, el) => (
{visited.has(key) && el}
); const page = ( <> {wrap("orders", )} {wrap("calls", )} {wrap("banking", )} {wrap("requests", )} {wrap("settings", )} ); // ── Mobile ───────────────────────────────────────────────────── if (isMobile) { return (
{page}
{incomingCall && setIncoming(null)} onOpenRequests={() => { setActive("requests"); setIncoming(null); }} onOpenOrders={() => { setActive("orders"); setIncoming(null); }} showToast={showToast} userName={userName} isMobile={isMobile}/>}
); } // ── Desktop ──────────────────────────────────────────────────── return (
{page}
{incomingCall && setIncoming(null)} onOpenRequests={() => { setActive("requests"); setIncoming(null); }} onOpenOrders={() => { setActive("orders"); setIncoming(null); }} showToast={showToast} userName={userName} isMobile={isMobile}/>} ); } ReactDOM.createRoot(document.getElementById("app")).render();