// ===== App shell — sidebar nav, role switching, screen routing ===== const { useState: useS_App, useEffect: useE_App } = React; const NAV_BY_ROLE = { agro: [ { id: "dashboard", label: "Dashboard", icon: "dashboard" }, { id: "panen", label: "Time Delay Prediksi Panen", icon: "leaf" }, { id: "supplier", label: "Pemilihan Supplier", icon: "suppliers" }, { id: "penerimaan", label: "Penerimaan & Validasi", icon: "box" }, { id: "ews", label: "Keamanan Pangan", icon: "shield" } ], induk: [ { id: "dashboard", label: "Dashboard", icon: "dashboard" }, { id: "menu", label: "Optimasi Menu", icon: "menu" }, { id: "ews", label: "Keamanan Pangan", icon: "shield" } ], satelit: [ { id: "dashboard", label: "Dashboard", icon: "dashboard" }, { id: "menu", label: "Optimasi Menu", icon: "menu" }, { id: "ews", label: "Keamanan Pangan", icon: "shield" } ], supplier: [ { id: "dashboard", label: "Dashboard", icon: "dashboard" }, { id: "penerimaan", label: "Penerimaan Komoditas", icon: "box" }, { id: "ews", label: "Keamanan Pangan", icon: "shield" }, { id: "manajemen", label: "Manajemen Supplier", icon: "factory" } ], penerima: [ { id: "dashboard", label: "Dashboard", icon: "dashboard" }, { id: "checklist", label: "Verifikasi Makanan", icon: "shield" }, { id: "feedback", label: "Penilaian & Feedback", icon: "bell" } ] }; function App() { const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS); const [authed, setAuthed] = useS_App(false); const [route, setRoute] = useS_App("dashboard"); const [showProfile, setShowProfile] = useS_App(false); const [sidebarOpen, setSidebarOpen] = useS_App(true); const { Icon } = window.IDSSUI; // Authentication helpers const checkAuth = () => { const authedRole = sessionStorage.getItem('authedRole'); const authedUser = sessionStorage.getItem('authedUser'); return authedRole && authedUser; }; const logoutUser = () => { sessionStorage.removeItem('authedUser'); sessionStorage.removeItem('authedRole'); sessionStorage.removeItem('userName'); setAuthed(false); setShowProfile(false); }; // Check if user is already authenticated (from sessionStorage) useE_App(() => { if (checkAuth()) { const authedRole = sessionStorage.getItem('authedRole'); setTweak("role", authedRole); setAuthed(true); } }, []); // Map supplier sub-types to main supplier role for navigation const mainRole = ["supplier_tani", "supplier_koperasi", "supplier_umkm", "supplier_besar"].includes(tweaks.role) ? "supplier" : tweaks.role; const role = window.IDSS.ROLES[tweaks.role]; const nav = NAV_BY_ROLE[mainRole]; // Apply theme & density to useE_App(() => { document.documentElement.dataset.theme = tweaks.theme; document.documentElement.dataset.density = tweaks.density; }, [tweaks.theme, tweaks.density]); // Phase 2 Stage 4: Centralized message listener for all inter-role broadcasts useE_App(() => { const handleMessage = (event) => { if (!event.data?.type) return; // Not our message const { type, payload, fulfillment, feedback, requests } = event.data; // B1: Check for duplicate submission (Phase B - Reliability) const submissionPayload = payload || fulfillment || feedback || null; if (submissionPayload && window.isSubmissionDuplicate) { if (window.isSubmissionDuplicate(submissionPayload)) { window.showToast('Pengajuan sudah tercatat sebelumnya', 'info', 2000); return; } } // Development logging (removed from production) // Uncomment untuk debugging: console.log(`[Message] ${type}`, { fulfillment, feedback, requests }); // Optional: Add analytics, auditing, or other cross-cutting concerns here // e.g., track message frequency, validate payload structure, etc. }; window.addEventListener("message", handleMessage); return () => window.removeEventListener("message", handleMessage); }, []); // C5: Cross-Tab Sync Listener useE_App(() => { if (window.TabSync) { window.TabSync.listen((payload) => { if (payload.action === 'data_refresh') { setRefreshTrigger(v => !v); } }); } }, []); // Forward AHP weights to AHP screen useE_App(() => { window.__ahpWeights = { harga: tweaks.ahpHarga, mutu: tweaks.ahpMutu, waktu: tweaks.ahpWaktu, jumlah: tweaks.ahpJumlah }; window.postMessage({ type: "__ahp_weights", weights: window.__ahpWeights }, "*"); }, [tweaks.ahpHarga, tweaks.ahpMutu, tweaks.ahpWaktu, tweaks.ahpJumlah]); // Reset route and adjust porsi when role changes useE_App(() => { setRoute("dashboard"); // Auto-adjust portion target based on role const defaultPorsi = tweaks.role === "agro" ? 3000 : tweaks.role === "induk" ? 3000 : 2000; setTweak("porsi", defaultPorsi); }, [tweaks.role]); if (!authed) { return ( <> { setTweak("role", roleId); setAuthed(true); }}/> ); } // Render content let content; // Settings page available for all roles if (route === "settings") { content = ; } else if (mainRole === "agro") { if (route === "dashboard") content = ; if (route === "panen") content = ; if (route === "supplier") content = ; if (route === "penerimaan") content = ; if (route === "ews") content = ; } else if (mainRole === "supplier") { if (route === "dashboard") content = ; if (route === "penerimaan") content = ; if (route === "ews") content = ; if (route === "manajemen") content = ; } else if (mainRole === "penerima") { if (route === "dashboard") content = ; if (route === "checklist") content = ; if (route === "feedback") content = ; } else { if (route === "dashboard") content = setRoute("ews")}/>; if (route === "menu") content = ; if (route === "ews") content = ; } return (
n.id===route)?.label}`} data-sidebar={sidebarOpen ? "open" : "closed"}>
{[ { src: "assets/logo-tanoto.png", alt: "Tanoto" }, { src: "assets/logo-bappenas.png", alt: "Bappenas" }, { src: "assets/logo-seafast.png", alt: "SEAFAST" }, { src: "assets/logo-cs.png", alt: "C-System" } ].map((l, i) => (
{l.alt}
))}
IDSS · Makan Bergizi Gratis
Intelligent Decision Support System
{role.initials}
{role.short}
{sessionStorage.getItem('userName') || role.location.split(" — ")[0]}
{content}
); } function TweaksUI({ tweaks, setTweak }) { return ( setTweak("theme", v)} options={[{value:"light",label:"Light"},{value:"dark",label:"Dark"}]}/> setTweak("density", v)} options={[{value:"comfortable",label:"Comfortable"},{value:"compact",label:"Compact"}]}/> setTweak("scenario", v)} options={[ { value:"normal", label:"Normal" }, { value:"krisis", label:"Krisis pasokan" }, { value:"surplus", label:"Surplus panen" } ]}/> setTweak("porsi", v)}/> setTweak("ahpHarga", v)}/> setTweak("ahpMutu", v)}/> setTweak("ahpWaktu", v)}/> setTweak("ahpJumlah", v)}/> ); } function SettingsScreen({ role, tweaks, setTweak }) { const { Icon } = window.IDSSUI; const authedUser = sessionStorage.getItem('authedUser'); const loginTime = sessionStorage.getItem('loginTime'); return (

Pengaturan

Kelola preferensi dan informasi akun Anda

{/* Profil Akun */}

Profil Akun

Username
{authedUser || "—"}
Role
{role.name}
Lokasi
{role.location}
{/* Tampilan & Tema */}

Tampilan

Tema
{[ { value: "light", label: "Terang" }, { value: "dark", label: "Gelap" } ].map(option => ( ))}
Kepadatan
{[ { value: "comfortable", label: "Nyaman" }, { value: "compact", label: "Padat" } ].map(option => ( ))}
{/* Tentang Sistem */}

Tentang Sistem

Nama Sistem AI Techno IDSS
Versi 1.0 (Demo)
Status Prototipe Riset
Pengembang IPB University, Tanoto Foundation, SEAFAST Center, Center of System
💡 Tips: Pengaturan tema dan kepadatan berlaku untuk semua halaman. Data sesi disimpan secara lokal dan akan terhapus saat logout.
); } window.SettingsScreen = SettingsScreen; const root = ReactDOM.createRoot(document.getElementById("root")); root.render();