// app.jsx — main shell, routing, theme + lang state, auth gating // (TweaksPanel/mobile-frame stripped — those were design-tool affordances.) function App() { const [theme, setTheme] = React.useState(() => { try { return localStorage.getItem("rawj_theme") || window.RAWJ_CONFIG.DEFAULT_THEME; } catch { return "light"; } }); const [lang, setLangState] = React.useState(() => { try { return localStorage.getItem("rawj_lang") || window.RAWJ_CONFIG.DEFAULT_LANG; } catch { return "ar"; } }); const dir = lang === "ar" ? "rtl" : "ltr"; const [route, setRoute] = React.useState(() => { if (typeof location !== "undefined" && location.hash) { return location.hash.replace(/^#/, "") || "landing"; } return "landing"; }); const [user, setUser] = React.useState(null); const [bootDone, setBootDone] = React.useState(false); const setLang = React.useCallback((l) => { setLangState(l); try { localStorage.setItem("rawj_lang", l); } catch {} }, []); const toggleTheme = React.useCallback(() => { setTheme(prev => { const next = prev === "light" ? "dark" : "light"; try { localStorage.setItem("rawj_theme", next); } catch {} return next; }); }, []); // Apply theme/dir/lang to React.useEffect(() => { const root = document.documentElement; root.dir = dir; root.lang = lang; root.dataset.theme = theme; root.dataset.density = "regular"; }, [theme, dir, lang]); // Sync route → URL hash (so Back button works + shareable) React.useEffect(() => { if (typeof location === "undefined") return; const want = "#" + route; if (location.hash !== want) location.hash = want; }, [route]); // Listen for hash changes (back button) React.useEffect(() => { function onHash() { const r = location.hash.replace(/^#/, "") || "landing"; setRoute(r); } window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); // Boot: try to load current user from session React.useEffect(() => { let cancelled = false; (async () => { if (API.hasSession()) { const u = await API.me(); if (!cancelled) setUser(u); } if (!cancelled) setBootDone(true); })(); return () => { cancelled = true; }; }, []); const isAuthRoute = route === "login" || route === "signup" || route === "forgot"; const isPublicRoute = route === "landing" || isAuthRoute; // Routes that require auth const protectedRoutes = new Set(["dashboard", "accounts", "alerts", "notifs", "report", "schedule", "account", "onboard", "settings"]); // If user is not authed and tries to access a protected route → redirect to login React.useEffect(() => { if (!bootDone) return; if (!user && protectedRoutes.has(route)) { setRoute("login"); } }, [bootDone, user, route]); function onAuthSuccess(u) { setUser(u); setRoute("dashboard"); } async function signOut() { await API.logout(); setUser(null); setRoute("landing"); } // Pre-boot: render lightweight shell to avoid flash if (!bootDone) { return (
{lang === "ar" ? "جاري التحميل…" : "Loading…"}
); } // ───── Public routes ────────────────────────────── if (route === "landing") { return ( <> ); } if (route === "login") return ; if (route === "signup") return ; if (route === "forgot") return ; // ───── Authenticated routes ────────────────────── const titles = { dashboard: lang === "ar" ? "لوحة التحكم" : "Dashboard", accounts: lang === "ar" ? "الحسابات الإعلانية" : "Ad Accounts", alerts: lang === "ar" ? "تنبيهات المديونيات" : "Debt alerts", notifs: lang === "ar" ? "قنوات الإشعارات" : "Notification channels", report: lang === "ar" ? "بناء التقرير" : "Report builder", schedule: lang === "ar" ? "جدولة التقارير" : "Report schedule", account: lang === "ar" ? "تفاصيل الحساب" : "Account detail", onboard: lang === "ar" ? "ربط الحسابات" : "Connect accounts", settings: lang === "ar" ? "الإعدادات" : "Settings", }; const crumbs = { dashboard: lang === "ar" ? "روّج برو · العمليات" : "Rawj Pro · Operations", accounts: lang === "ar" ? "روّج برو · العمليات" : "Rawj Pro · Operations", alerts: lang === "ar" ? "روّج برو · العمليات" : "Rawj Pro · Operations", notifs: lang === "ar" ? "روّج برو · الإعداد" : "Rawj Pro · Setup", report: lang === "ar" ? "روّج برو · الإعداد" : "Rawj Pro · Setup", schedule: lang === "ar" ? "روّج برو · الإعداد" : "Rawj Pro · Setup", account: lang === "ar" ? "العمليات · الحسابات" : "Operations · Accounts", onboard: lang === "ar" ? "روّج برو" : "Rawj Pro", settings: lang === "ar" ? "روّج برو · الحساب" : "Rawj Pro · Account", }; const screen = (() => { switch (route) { case "onboard": return ; case "dashboard": case "accounts": return ; case "account": return ; case "alerts": return ; case "notifs": return ; case "report": return ; case "schedule": return ; case "settings": return ; default: return ; } })(); const headerRight = ( <> {(route === "dashboard" || route === "accounts") && ( )} ); return (
{screen}
); } // ─── Public top bar (landing page only) ───────────────────────────── function PublicTopBar({ lang, setLang, setRoute, user }) { // The Landing component has its own header; this is a no-op shim. return null; } // ─── Side nav with real user data + settings link + sign out ──────── function SideNavWithAccount({ route, setRoute, lang, user, onSignout }) { const L = useT(lang); const items = [ { group: L.work, links: [ { id: "dashboard", label: L.dashboard, icon: "home" }, { id: "accounts", label: L.accounts, icon: "grid" }, { id: "alerts", label: L.alerts, icon: "alert" }, ]}, { group: L.setup, links: [ { id: "onboard", label: L.onboard, icon: "link" }, { id: "report", label: L.report, icon: "doc" }, { id: "schedule", label: L.schedule, icon: "cal" }, { id: "notifs", label: L.notifs, icon: "bell" }, ]}, ]; const initials = (user?.name || user?.email || "?").slice(0, 2).toUpperCase(); return ( ); } ReactDOM.createRoot(document.getElementById("root")).render();