// Main App — wires up shell + pages + tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "#2848ff",
"density": "regular",
"dark": true,
"blurStrength": 20,
"showGrid": true,
"panelStyle": "glass"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [active, setActive] = useState("architecture");
const [lang, setLang] = useState("th");
const [collapsed, setCollapsed] = useState(false);
const [rightCollapsed, setRightCollapsed] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
const [dataVersion, setDataVersion] = useState(0);
const [dataStats, setDataStats] = useState(null);
// ─── Auth state (web mode only — Electron bypasses login) ───
const [authChecking, setAuthChecking] = useState(window.SYK_MODE === 'web');
const [user, setUser] = useState(window.SYK_MODE === 'electron' ? { role: 'owner', permissions: [] } : null);
// Verify token on mount (web mode)
useEffect(() => {
if (window.SYK_MODE !== 'web') return;
(async () => {
if (!window.api?.isAuthenticated?.()) {
setAuthChecking(false);
return;
}
try {
const fresh = await window.api.refreshUser();
if (fresh) setUser(fresh);
} catch {
// Token invalid — clear + show login
await window.api.logout();
}
setAuthChecking(false);
})();
// Allow API client to force logout on 401-refresh-failed
window.__forceLogout = () => {
window.api?.logout();
setUser(null);
};
// Expose current user globally for HasPermission helpers
window.SYK_USER = user;
}, []);
// Keep SYK_USER in sync
useEffect(() => { window.SYK_USER = user; }, [user]);
// Persist sidebar states
useEffect(() => {
const saved = localStorage.getItem('syk-right-collapsed');
if (saved !== null) setRightCollapsed(saved === '1');
}, []);
useEffect(() => {
localStorage.setItem('syk-right-collapsed', rightCollapsed ? '1' : '0');
}, [rightCollapsed]);
// Load real data from SQLite (via IPC) on mount — replaces mock data in place
useEffect(() => {
if (window.loadRealData) {
window.loadRealData().then(result => {
if (result && result.loaded) {
setDataStats(result.stats);
setDataVersion(v => v + 1); // force re-render so pages see new data
console.log('[App] Real data loaded:', result.stats);
}
});
}
// Expose reload trigger for re-import button
window.__triggerReload = () => setDataVersion(v => v + 1);
}, []);
// Apply theme + density to
useEffect(() => {
document.documentElement.dataset.theme = t.dark ? "dark" : "light";
document.documentElement.dataset.density = t.density;
document.documentElement.style.setProperty("--syk-blue", t.accent);
// Lighten accent for soft variant
const m = t.accent.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
if (m) {
const r = parseInt(m[1], 16), g = parseInt(m[2], 16), b = parseInt(m[3], 16);
const lighten = (c) => Math.min(255, Math.round(c + (255 - c) * 0.45));
document.documentElement.style.setProperty("--syk-blue-soft", `rgb(${lighten(r)},${lighten(g)},${lighten(b)})`);
}
}, [t.dark, t.density, t.accent]);
const Page = {
architecture: ArchitecturePage,
dashboard: DashboardPage,
boq: BOQPage,
procurement: ProcurementPage,
billing: BillingPage,
progress: ProgressPage,
inventory: InventoryPage,
subcontractor: SubcontractorPage,
drawings: DrawingsPage,
contracts: ContractsPage,
}[active] || ArchitecturePage;
// ─── Auth guards (web mode only) ───
if (window.SYK_MODE === 'web' && authChecking) {
return (
);
}
if (window.SYK_MODE === 'web' && !user) {
return (
{
setUser(u);
window.SYK_USER = u;
// Trigger data load now that we have auth
if (window.loadRealData) {
const r = await window.loadRealData();
if (r.loaded) { setDataStats(r.stats); setDataVersion(v => v + 1); }
}
}} />
);
}
return (
setCollapsed((c) => !c)}
lang={lang}
mobileOpen={mobileOpen}
onCloseMobile={() => setMobileOpen(false)}
/>
setTweak("dark", !t.dark)}
onOpenMobile={() => setMobileOpen(true)}
/>
setRightCollapsed(c => !c)}
/>
setTweak("dark", v)} />
setTweak("accent", v)} />
setTweak("density", v)} />
setTweak("blurStrength", v)} />
setTweak("showGrid", v)} />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();