// app.jsx — main app with router, theme, i18n, tweaks
function App() {
// ── Tweaks (persisted to file via host) ────────────────────────────
const [tweaks, setTweak] = useTweaks(window.__TWEAK_DEFAULTS__);
// Apply theme to
React.useEffect(() => {
document.documentElement.setAttribute("data-theme", tweaks.dark ? "dark" : "light");
document.documentElement.style.colorScheme = tweaks.dark ? "dark" : "light";
}, [tweaks.dark]);
// Apply accent
React.useEffect(() => {
document.documentElement.style.setProperty("--accent", tweaks.accent);
// Pick ink that's readable on accent
const ink = tweaks.accent === "#FF6B6B" || tweaks.accent === "#7C9CFF" ? "#0a0a0a" :
tweaks.accent === "#5EE5B0" ? "#04261a" :
tweaks.accent === "#C6F24E" ? "#1a2400" :
"#1a1400";
document.documentElement.style.setProperty("--accent-ink", ink);
}, [tweaks.accent]);
// Apply lang
React.useEffect(() => {
document.documentElement.lang = tweaks.lang;
window.__currentLang__ = tweaks.lang;
}, [tweaks.lang]);
const i18nValue = React.useMemo(() => ({ t: I18N[tweaks.lang] || I18N.id, lang: tweaks.lang }), [tweaks.lang]);
// ── Router state ────────────────────────────────────────────────────
const [route, setRoute] = React.useState({ name: "home" });
const navigate = (r) => {
setRoute(r);
window.scrollTo({ top: 0, behavior: "smooth" });
};
// ── App-wide mock state ────────────────────────────────────────────
const [cart, setCart] = React.useState([]);
const [purchases, setPurchases] = React.useState(["cashflow", "invest"]);
const [savedResults, setSavedResults] = React.useState([]);
const [bookings, setBookings] = React.useState([]);
const addToCart = (product) => {
setCart((c) => {
if (c.find((x) => x.id === product.id)) return c;
return [...c, product];
});
// Toast
showToast(`${product.name_id || product.name} ditambahkan ke keranjang`);
};
const buyNow = (product) => {
setCart([product]);
navigate({ name: "checkout" });
};
// ── Deep-link from external landing pages (?screen=checkout&product=ID) ──
React.useEffect(() => {
const params = new URLSearchParams(window.location.search);
if (params.get("screen") === "checkout" && params.get("product")) {
const product = (typeof PRODUCTS !== "undefined" ? PRODUCTS : []).find((p) => p.id === params.get("product"));
if (product) buyNow(product);
window.history.replaceState({}, "", window.location.pathname);
}
}, []);
const completePurchase = (items) => {
setPurchases((p) => Array.from(new Set([...p, ...items.map((i) => i.id)])));
setCart([]);
};
const saveResult = (result) => {
setSavedResults((r) => [...r, { ...result, savedAt: Date.now() }]);
showToast("Hasil disimpan ke dashboard");
};
const confirmBooking = (b) => {
setBookings((bs) => [...bs, b]);
showToast("Booking dikonfirmasi");
};
// ── Render screen ──────────────────────────────────────────────────
let screen;
switch (route.name) {
case "home":
screen = ;
break;
case "calc":
screen = ;
break;
case "calculator":
screen = ;
break;
case "products":
screen = ;
break;
case "product":
screen = ;
break;
case "checkout":
screen = ;
break;
case "dashboard":
// legacy route — Dashboard is now the home/landing hub (no login)
screen = ;
break;
case "book":
screen = ;
break;
case "program":
screen = ;
break;
case "webinar":
screen = ;
break;
case "about":
screen = ;
break;
case "partnership":
screen = ;
break;
case "contact":
screen = ;
break;
default:
screen = ;
}
return (
);
}
// ── Toast (simple global toast) ──────────────────────────────────────
let __toastSetter = null;
function showToast(msg) {
__toastSetter && __toastSetter({ msg, id: Date.now() });
}
function Toast() {
const [t, setT] = React.useState(null);
React.useEffect(() => { __toastSetter = setT; return () => { __toastSetter = null; }; }, []);
React.useEffect(() => {
if (!t) return;
const id = setTimeout(() => setT(null), 2400);
return () => clearTimeout(id);
}, [t]);
if (!t) return null;
return (
{t.msg}
);
}
ReactDOM.createRoot(document.getElementById("root")).render();