SENTINEL | Sovereign Utility

// ========================================== // KINETIC HOLD BUTTON (Physical UX) // ========================================== function KineticHoldButton({ text, color, onComplete, disabled }) { const [progress, setProgress] = useState(0); const [isHolding, setIsHolding] = useState(false); const intervalRef = useRef(null); const startHold = (e) => { if (disabled) return; e.preventDefault(); setIsHolding(true); }; const stopHold = () => { if (disabled) return; setIsHolding(false); setProgress(0); clearInterval(intervalRef.current); }; useEffect(() => { if (isHolding && !disabled) { intervalRef.current = setInterval(() => { setProgress(p => { if (p >= 100) { clearInterval(intervalRef.current); setIsHolding(false); onComplete(); return 100; } return p + 5; // Fills in 1.5 seconds }); }, 75); } return () => clearInterval(intervalRef.current); }, [isHolding, disabled, onComplete]); return ( ); } // ========================================== // CLIENT PORTAL (Biosecurity Shield UX) // ========================================== function ViewClientPortal({ authData, triggerHUD, setShowOmni }) { const [ledger, setLedger] = useState({ transactions: [], deliveries: [] }); const [loading, setLoading] = useState(true); const [isProcessingBilling, setIsProcessingBilling] = useState(false); useEffect(() => { const fetchMatrix = async () => { if (!authData || !authData.token) { setLoading(false); return; } try { const ledRes = await fetch(`${WORKER_API}/api/ledger/history`, { headers: { 'Authorization': `Bearer ${authData.token}` } }); const ledData = await ledRes.json(); if (ledData.success) { setLedger({ transactions: Array.isArray(ledData.transactions) ? ledData.transactions : [], deliveries: Array.isArray(ledData.deliveries) ? ledData.deliveries : [] }); } } catch(e) {} setLoading(false); }; fetchMatrix(); }, [authData?.token]); const exportInvoice = (tx) => { const date = new Date(tx.created_at).toLocaleString(); const amount = ((tx.amount_cents || 0) / 100).toFixed(2); const printWindow = window.open('', '_blank'); printWindow.document.write(`INVOICE_${tx.id}

TRANSACTION ID

${tx.id.substring(0,12).toUpperCase()}

NODE

01 (HUNTINGTON BEACH)

${tx.asset_name}$${amount}

TYPE${tx.type?.toUpperCase()}

STATUS${tx.status?.toUpperCase()}

TOTAL SETTLED$${amount}

`); printWindow.document.close(); }; const exportDeliveryPDF = (drop) => { const date = new Date(drop.created_at).toLocaleString(); const printWindow = window.open('', '_blank'); const imagesHtml = drop.proof_url ? drop.proof_url.split(',').map(url => `

`).join('') : '

[ FATAL: NO OPTICAL DATA LOCATED IN AETHER ]

Diagnostic: Supabase Bucket "kinetic-proofs" may be marked Private or lacking RLS Insert policies.

'; printWindow.document.write(`WAYBILL_${drop.id}

CLIENT

${drop.client_name}

DATE SECURED

${date}

COORDINATES

${drop.address}

PAYLOAD

${drop.asset_name} (${drop.volume_oz}oz)

STATUS

${drop.status?.toUpperCase()}

// OPTICAL PROOF & SIGNATURE MATRIX

${imagesHtml}

`); printWindow.document.close(); }; const manageBilling = async () => { if (isProcessingBilling) return; setIsProcessingBilling(true); try { const res = await fetch(`${WORKER_API}/api/vault/portal`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authData.token}` }, body: JSON.stringify({ email: authData.user }) }); const data = await res.json(); if (data.success && data.url) window.location.href = data.url; else triggerHUD(data.error || "BILLING UPLINK FAILED.", "error"); } catch(e) { triggerHUD("NETWORK ENTROPY.", "error"); } setIsProcessingBilling(false); }; return (

{/* BIOSECURITY SHIELD */}

PPM DETECTED

Facility Baseline Secured

{/* TITANIUM CARD ID */}

SOVEREIGN ID

{authData?.role.toUpperCase()}

{authData?.user}

// ACCOUNT_MATRIX

Sovereign Ledger

{loading ? (

DECRYPTING LEDGER...

) : ( <>

FINANCIAL MATRIX (VAULT)

{ledger.transactions.length === 0 ? (

No financial assets procured.

) : ( ledger.transactions.map(tx => (

{tx.asset_name}

${((tx.amount_cents || 0) / 100).toFixed(2)} [{tx.type?.toUpperCase()}]

{tx.status?.toUpperCase()}

)) )}

LOGISTICS MATRIX (FLEET)

{ledger.deliveries.length === 0 ? (

No logistical drops recorded.

) : ( ledger.deliveries.map(drop => (

{drop.asset_name} ({drop.volume_oz}oz)

{drop.address}

{drop.status?.toUpperCase()}

{drop.status === 'completed' && } {drop.proof_url && ( )}

)) )}

)}

); } // ========================================== // OPERATOR HUD (Sticky Map + Bottom Sheet) // ========================================== function ViewOperator({ authData, triggerHUD, setShowOmni }) { const [routes, setRoutes] = useState([]); const [loading, setLoading] = useState(true); const [activeDrop, setActiveDrop] = useState(null); const [proofImage, setProofImage] = useState(null); const [isSealing, setIsSealing] = useState(false); const [isOfflineMode, setIsOfflineMode] = useState(!navigator.onLine); const fileRef = useRef(null); const sigCanvasRef = useRef(null); const [isDrawing, setIsDrawing] = useState(false); const [signatureData, setSignatureData] = useState(null); useEffect(() => { const handleOnline = () => { setIsOfflineMode(false); syncOfflineCache(); }; const handleOffline = () => setIsOfflineMode(true); window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); const fetchRoutes = async () => { if (!authData || !authData.token) return; try { const res = await fetch(`${WORKER_API}/api/fleet/routes`, { headers: { 'Authorization': `Bearer ${authData.token}` } }); const data = await res.json(); if (data.success && Array.isArray(data.routes)) { const sorted = data.routes.sort((a, b) => (a.route_index || 999) - (b.route_index || 999)); setRoutes(sorted); } } catch(e) {} setLoading(false); }; fetchRoutes(); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, [authData?.token]); const syncOfflineCache = async () => { const cache = JSON.parse(localStorage.getItem('sentinel_offline_cache') || '[]'); if (cache.length === 0) return; triggerHUD("[ UPLINK RESTORED: SYNCHING CACHE ]", "success"); let remainingCache = []; for (let i = 0; i < cache.length; i++) { const drop = cache[i]; try { let proofUrlsStr = ''; if (drop.images && drop.images.length > 0) { const syncRes = await fetch(`${WORKER_API}/api/ledger/sync`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ trackingId: `DROP_${drop.delivery_id.substring(0,8)}`, images: drop.images, token: authData.token }) }); const syncData = await syncRes.json(); if (syncData.success && syncData.urls) proofUrlsStr = syncData.urls.join(','); } const res = await fetch(`${WORKER_API}/api/fleet/routes`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authData.token}` }, body: JSON.stringify({ delivery_id: drop.delivery_id, status: 'completed', proof_url: proofUrlsStr }) }); if (!res.ok) remainingCache.push(drop); } catch(e) { remainingCache.push(drop); } } localStorage.setItem('sentinel_offline_cache', JSON.stringify(remainingCache)); }; const handleCapture = (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (ev) => { const img = new Image(); img.onload = () => { const canvas = document.createElement('canvas'); const MAX_W = 1000; let w = img.width, h = img.height; if (w > MAX_W) { h = Math.round((h * MAX_W) / w); w = MAX_W; } canvas.width = w; canvas.height = h; canvas.getContext('2d').drawImage(img, 0, 0, w, h); setProofImage(canvas.toDataURL('image/webp', 0.6)); }; img.src = ev.target.result; }; reader.readAsDataURL(file); }; const startDrawing = (e) => { e.preventDefault(); setIsDrawing(true); const canvas = sigCanvasRef.current; const ctx = canvas.getContext('2d'); const rect = canvas.getBoundingClientRect(); const x = (e.clientX || (e.touches && e.touches[0].clientX)) - rect.left; const y = (e.clientY || (e.touches && e.touches[0].clientY)) - rect.top; ctx.beginPath(); ctx.moveTo(x, y); }; const draw = (e) => { e.preventDefault(); if (!isDrawing) return; const canvas = sigCanvasRef.current; const ctx = canvas.getContext('2d'); const rect = canvas.getBoundingClientRect(); const x = (e.clientX || (e.touches && e.touches[0].clientX)) - rect.left; const y = (e.clientY || (e.touches && e.touches[0].clientY)) - rect.top; ctx.lineTo(x, y); ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 3; ctx.lineCap = 'round'; ctx.stroke(); }; const endDrawing = (e) => { if(e) e.preventDefault(); if (isDrawing) { setIsDrawing(false); setSignatureData(sigCanvasRef.current.toDataURL('image/png')); } }; const clearSignature = () => { const canvas = sigCanvasRef.current; const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); setSignatureData(null); }; const sealDelivery = async () => { if (!activeDrop || isSealing) return; if (activeDrop.requires_signature && (!proofImage || !signatureData)) { triggerHUD("PHOTO & SIGNATURE REQUIRED", "error"); return; } if (!activeDrop.requires_signature && !proofImage) { triggerHUD("KINETIC PROOF REQUIRED", "error"); return; } setIsSealing(true); const finalImages = []; if (proofImage) finalImages.push(proofImage); if (signatureData) finalImages.push(signatureData); if (!navigator.onLine) { const cache = JSON.parse(localStorage.getItem('sentinel_offline_cache') || '[]'); cache.push({ delivery_id: activeDrop.id, images: finalImages, timestamp: Date.now() }); localStorage.setItem('sentinel_offline_cache', JSON.stringify(cache)); triggerHUD("[ NETWORK SEVERED: SECURING LOCALLY ]", "success"); setRoutes(routes.filter(r => r.id !== activeDrop.id)); setActiveDrop(null); setProofImage(null); setSignatureData(null); setIsSealing(false); return; } try { let proofUrlsStr = ''; if (finalImages.length > 0) { const syncRes = await fetch(`${WORKER_API}/api/ledger/sync`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ trackingId: `DROP_${activeDrop.id.substring(0,8)}`, images: finalImages, token: authData.token }) }); const syncData = await syncRes.json(); if (syncData.success && syncData.urls) proofUrlsStr = syncData.urls.join(','); } const res = await fetch(`${WORKER_API}/api/fleet/routes`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authData.token}` }, body: JSON.stringify({ delivery_id: activeDrop.id, status: 'completed', proof_url: proofUrlsStr }) }); const data = await res.json(); if (data.success) { triggerHUD("DELIVERY SEALED.", "success"); setRoutes(routes.filter(r => r.id !== activeDrop.id)); setActiveDrop(null); setProofImage(null); setSignatureData(null); } else { triggerHUD("SYNC FAILED.", "error"); } } catch(e) { triggerHUD("NETWORK ENTROPY.", "error"); } setIsSealing(false); }; if (activeDrop) { return (

// ACTIVE_COORDINATES

{activeDrop.client_name}

{activeDrop.address}

PAYLOAD

{activeDrop.asset_name} ({activeDrop.volume_oz}oz)

ENVIRONMENTAL PROOF

{!proofImage ? ( <> ) : (

)}

{activeDrop.requires_signature && (

CLIENT SIGNATURE REQUIRED

)}

); } return (

{/* STICKY RADAR MAP */}

setActiveDrop(r)} /> {isOfflineMode &&

OFFLINE CACHE

}

{/* SCROLLABLE ROUTE LIST */}

PENDING ROUTES

{loading ? (

CALCULATING OPTIMAL PATH...

) : (!Array.isArray(routes) || routes.length === 0) ? (

No active routes assigned. Sector Clear.

) : ( routes.map((route, index) => (

setActiveDrop(route)} style={{animationDelay: `${index * 0.1}s`}}>

DROP 0{route.route_index || index + 1} {route.requires_signature && [SIG_REQ]}

{route.client_name}

{route.address}

{route.volume_oz}oz

)) )}

{/* KINETIC BOTTOM SHEET (Modal) */}

setActiveDrop(null)}>

{activeDrop && ( <>

// ACTIVE_PAYLOAD

{activeDrop.client_name}

{activeDrop.address}

{activeDrop.asset_name} ({activeDrop.volume_oz}oz)

ENVIRONMENTAL PROOF

{!proofImage ? ( <> ) : (

)}

{activeDrop.requires_signature && (

CLIENT SIGNATURE REQUIRED

)}

); } // ========================================== // KIOSK VIEW (Absolute Isolation) // ========================================== function ViewKiosk({ setMode, triggerHUD }) { const [step, setStep] = useState('home'); const [kioskUser, setKioskUser] = useState(null); const [identifier, setIdentifier] = useState(''); const [asset, setAsset] = useState({ name: '', rate: 0 }); const [volume, setVolume] = useState('0.0'); const [priceCents, setPriceCents] = useState(0); const [discountTier, setDiscountTier] = useState(null); const [isOverridden, setIsOverridden] = useState(false); const [qrUrl, setQrUrl] = useState(''); const [isProcessing, setIsProcessing] = useState(false); const [overrideTarget, setOverrideTarget] = useState(null); const [pourActive, setPourActive] = useState(false); const pourIntervalRef = useRef(null); const qrEngineRef = useRef(null); const overrideEngineRef = useRef(null); const ASSET_RATES = { "01": { name: "Solvent 01", rate: 0.87 }, "02": { name: "Strike 02", rate: 0.87 }, "03": { name: "Inertia 03", rate: 1.37 } }; const startScanner = (containerId, engineRef, successCallback) => { if (typeof window.Html5Qrcode === 'undefined') { triggerHUD("OPTICAL SENSOR DELAYED. USE MANUAL ENTRY.", "error"); return; } try { const html5QrCode = new window.Html5Qrcode(containerId); engineRef.current = html5QrCode; html5QrCode.start( { facingMode: "environment" }, { fps: 10, qrbox: { width: 250, height: 250 } }, (decodedText) => { if (html5QrCode.isScanning) html5QrCode.pause(); successCallback(decodedText, html5QrCode); }, (err) => { } ).catch(err => { triggerHUD("CAMERA ACCESS BLOCKED BY DEVICE.", "error"); }); } catch (e) { triggerHUD("OPTICAL HARDWARE FAULT.", "error"); } }; const stopScanner = (engineRef) => { if (engineRef.current) { try { if (engineRef.current.isScanning) { engineRef.current.stop().catch(e=>{}); } } catch(e){} engineRef.current = null; } }; useEffect(() => { if (step === 'identify') startScanner("reader-container", qrEngineRef, verifyIdentity); return () => stopScanner(qrEngineRef); }, [step]); useEffect(() => { if (step === 'override') startScanner("override-reader-container", overrideEngineRef, executeOverride); return () => stopScanner(overrideEngineRef); }, [step]); useEffect(() => { if (volume && volume !== '0.0') { const oz = parseFloat(volume); let multiplier = 1.0; let tierName = null; if (oz >= 35200) { multiplier = 0.382; tierName = "PHI_DEVIATION [61.8%]"; } else if (oz >= 7040) { multiplier = 0.50; tierName = "DRUM_VOLUME [50%]"; } else if (oz >= 640) { multiplier = 0.70; tierName = "FLEET_RESERVE [30%]"; } else if (oz >= 128) { multiplier = 0.85; tierName = "GALLON_THRESHOLD [15%]"; } setDiscountTier(tierName); if (!isOverridden) setPriceCents(Math.round((oz * asset.rate * multiplier) * 100)); } else { if (!isOverridden) setPriceCents(0); setDiscountTier(null); } }, [volume, asset.rate, isOverridden]); const handlePourStart = (e) => { if (e) { e.preventDefault(); e.stopPropagation(); } if (isProcessing || isOverridden) return; setPourActive(true); pourIntervalRef.current = setInterval(() => { setVolume(prev => { const next = parseFloat(prev || 0) + 1.618; return next.toFixed(1); }); }, 150); }; const handlePourStop = (e) => { if (e) { e.preventDefault(); e.stopPropagation(); } setPourActive(false); if (pourIntervalRef.current) { clearInterval(pourIntervalRef.current); pourIntervalRef.current = null; } }; const verifyIdentity = async (code, scannerInstance) => { if (!code) return; setIsProcessing(true); try { const res = await fetch(`${WORKER_API}/api/kiosk/verify`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ identifier: code }) }); const data = await res.json(); if (data.success) { setKioskUser({ operator: data.operator, parent_id: data.parent_id, type: data.type }); triggerHUD(`AUTHORIZED: ${data.operator}`, "success"); if(scannerInstance) stopScanner(qrEngineRef); setStep('menu'); } else { triggerHUD("[FAULT] IDENTIFIER NOT RECOGNIZED.", "error"); if(scannerInstance && scannerInstance.isScanning) scannerInstance.resume(); } } catch (e) { triggerHUD("Network entropy. SCAN AGAIN.", "error"); if(scannerInstance && scannerInstance.isScanning) scannerInstance.resume(); } setIsProcessing(false); }; const executeOverride = async (code, scannerInstance) => { if (!code) return; setIsProcessing(true); try { const res = await fetch(`${WORKER_API}/api/kiosk/verify`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ identifier: code }) }); const data = await res.json(); if (data.success && (data.type === 'parent' || data.type === 'fleet')) { triggerHUD(`OVERRIDE AUTHORIZED: ${data.operator}`, "success"); if(scannerInstance) stopScanner(overrideEngineRef); if (overrideTarget === 'cancel') resetKiosk(); else if (overrideTarget === 'adjust') { setIsOverridden(true); setOverrideTarget(null); setStep('input'); } } else { triggerHUD("[FAULT] UNRECOGNIZED CLEARANCE.", "error"); if(scannerInstance && scannerInstance.isScanning) scannerInstance.resume(); } } catch (e) { triggerHUD("Network entropy.", "error"); if(scannerInstance && scannerInstance.isScanning) scannerInstance.resume(); } setIsProcessing(false); }; const triggerOverride = (targetStr) => { setOverrideTarget(targetStr); setStep('override'); }; const selectAsset = (id) => { setAsset(ASSET_RATES[id]); setStep('input'); }; const generateInvoice = async () => { if (priceCents <= 0) return; setIsProcessing(true); try { const res = await fetch(`${WORKER_API}/api/kiosk/charge`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ assetName: asset.name, volumeOz: volume, customPriceCents: priceCents, discountTier, type: (kioskUser && kioskUser.type === 'fleet') ? 'fleet' : 'standard', operatorName: kioskUser?.operator, parentId: kioskUser?.parent_id }) }); const data = await res.json(); if (data.success) { if (kioskUser && kioskUser.type === 'fleet') { triggerHUD("FLEET DISPENSE LOGGED.", "success"); resetKiosk(); } else { setQrUrl(data.url); setStep('checkout'); } } else triggerHUD("[FAULT] " + data.error, "error"); } catch (e) { triggerHUD("Network entropy.", "error"); } setIsProcessing(false); }; const processCash = async () => { if (!confirm("COMMANDER OVERRIDE: Log this transaction as cash?")) return; setIsProcessing(true); try { const res = await fetch(`${WORKER_API}/api/kiosk/charge`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ assetName: asset.name, volumeOz: volume, customPriceCents: priceCents, type: 'cash', discountTier, operatorName: kioskUser?.operator, parentId: kioskUser?.parent_id }) }); const data = await res.json(); if (data.success) { triggerHUD("CASH OVERRIDE LOGGED.", "success"); resetKiosk(); } } catch (e) {} setIsProcessing(false); }; const resetKiosk = () => { setStep('home'); setVolume('0.0'); setQrUrl(''); setIsOverridden(false); setDiscountTier(null); setKioskUser(null); setIdentifier(''); setOverrideTarget(null); }; return (

SENTINEL

NODE 01 // WALK-IN PORTAL

{step === 'home' && (

)} {step === 'identify' && (

Scan Sovereign ID

MANUAL ENTRY (CELLULAR / KINETIC KEY)

setIdentifier(e.target.value)} placeholder="ENTER DATA" />

)} {step === 'override' && (

[ COMMANDER OVERRIDE REQUIRED ]

MANUAL ENTRY (CELLULAR / KINETIC KEY)

setIdentifier(e.target.value)} placeholder="ENTER CLEARANCE" />

)} {step === 'menu' && (

{kioskUser &&

OPERATOR: {kioskUser.operator}

}

)} {step === 'input' && (

{asset.name}

Base Rate: ${(asset.rate).toFixed(2)} / fluid oz

{discountTier &&

{discountTier}

}

{volume}

console.log('Simulating pour')} disabled={isOverridden || isProcessing} />

TOTAL

${(priceCents / 100).toFixed(2)}

setPriceCents(Math.round(Number(e.target.value) * 100))} />

OVERRIDE ACTIVE

{!isOverridden && }

)} {step === 'checkout' && (

Invoice Ready

${(priceCents / 100).toFixed(2)}

Scan with personal device to finalize.

)} {!isHardLocked && }

); } // ========================================== // MAIN APPLICATION SHELL // ========================================== function SentinelApp() { const [mode, setMode] = useState(isHardLocked ? 'KIOSK' : 'PUBLIC'); const [view, setView] = useState('HOME'); const [history, setHistory] = useState(['HOME']); const [auth, setAuth] = useState({ active: false, token: null, user: null, role: null }); const [hud, setHud] = useState({ show: false, msg: '', type: 'success' }); const [showAuth, setShowAuth] = useState(false); const [showOmni, setShowOmni] = useState(false); const [authType, setAuthType] = useState('login'); const [accountType, setAccountType] = useState('client'); const [authMethod, setAuthMethod] = useState('email'); const [authEmail, setAuthEmail] = useState(''); const [authPass, setAuthPass] = useState(''); const [authCompany, setAuthCompany] = useState(''); const [identifierStr, setIdentifierStr] = useState(''); const [otpStep, setOtpStep] = useState('request'); const [authError, setAuthError] = useState(''); const [isAuthenticating, setIsAuthenticating] = useState(false); const [requiresMfa, setRequiresMfa] = useState(false); const [mfaCode, setMfaCode] = useState(''); const [mfaData, setMfaData] = useState(null); useEffect(() => { const urlParams = new URLSearchParams(window.location.search); if (urlParams.get('kiosk') === 'success') { setMode('KIOSK'); triggerHUD('TERMINAL PAYMENT CONFIRMED.', 'success'); window.history.replaceState(null, '', window.location.pathname + (isHardLocked ? '?terminal=active' : '')); } else if (urlParams.get('kiosk') === 'cancelled') { setMode('KIOSK'); triggerHUD('TERMINAL PAYMENT ABORTED.', 'error'); window.history.replaceState(null, '', window.location.pathname + (isHardLocked ? '?terminal=active' : '')); } }, []); const triggerHUD = (msg, type = 'success') => { setHud({ show: true, msg, type }); setTimeout(() => setHud({ show: false, msg: '', type: 'success' }), 4000); }; const navigate = (to) => { setHistory(p => [...p, to]); setView(to); window.scrollTo({ top: 0, behavior: 'smooth' }); }; const back = () => { setHistory(p => { if(p.length > 1) { const n = p.slice(0, -1); setView(n[n.length - 1]); window.scrollTo({ top: 0, behavior: 'smooth' }); return n; } return p; }); }; const triggerGateway = () => { if(!auth.active) { setShowAuth(true); setAuthError(''); setAuthEmail(''); setAuthPass(''); setIdentifierStr(''); setRequiresMfa(false); setMfaCode(''); setMfaData(null); setAuthType('login'); setAuthMethod('email'); setOtpStep('request'); setAccountType('client'); } else { setAuth({active: false, token: null, user: null, role: null}); setMode('PUBLIC'); setView('HOME'); setHistory(['HOME']); triggerHUD("// MEMBRANE SEALED", "success"); window.scrollTo({ top: 0, behavior: 'smooth' }); } }; const finalizeAuth = (data, identifier) => { const finalRole = data.role || 'client'; let assignedMode = 'CLIENT'; let assignedView = 'CLIENT_PORTAL'; if (finalRole === 'commander' || finalRole === 'employee') { assignedMode = 'COMMAND'; assignedView = 'COMMAND'; } else if (finalRole === 'operator' || finalRole === 'driver') { assignedMode = 'OPERATOR'; assignedView = 'OPERATOR'; } else if (finalRole === 'commercial') { assignedMode = 'CLIENT'; assignedView = 'CLIENT_PORTAL'; } setAuth({ active: true, token: data.token, user: data.user || identifier, role: finalRole }); setMode(assignedMode); setView(assignedView); setShowAuth(false); triggerHUD("// GATEWAY OPEN", "success"); }; const handleEmailAuthSubmit = async (e) => { e.preventDefault(); if(isAuthenticating) return; setIsAuthenticating(true); setAuthError(''); try { let endpoint = authType === 'register' ? '/api/auth/register' : (requiresMfa ? '/api/auth/mfa' : '/api/auth/login'); let payload = authType === 'register' ? { email: authEmail, password: authPass, company_name: authCompany, account_type: accountType } : (requiresMfa ? { factor_id: mfaData.factor_id, code: mfaCode, temp_token: mfaData.temp_token, role: mfaData.role } : { email: authEmail, password: authPass }); const res = await fetch(`${WORKER_API}${endpoint}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const data = await res.json(); if(data.success) { if (data.requires_mfa) { setRequiresMfa(true); setMfaData(data); } else if (data.token) { finalizeAuth(data, authEmail); } else { triggerHUD("// MANIFESTATION SUCCESS. AWAITING LOGIN.", "success"); setAuthType('login'); } } else setAuthError(`[DENIED: ${data.error || 'INERTIAL MISMATCH'}]`); } catch(err) { setAuthError('[NETWORK FAULT]'); } setIsAuthenticating(false); }; const handleOTPRequest = async (e) => { e.preventDefault(); if(isAuthenticating) return; setIsAuthenticating(true); setAuthError(''); try { const res = await fetch(`${WORKER_API}/api/auth/otp-request`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ identifier: identifierStr }) }); const data = await res.json(); if(data.success) { setOtpStep('verify'); triggerHUD("// PROTOCOL SENT", "success"); } else setAuthError(`[FAULT: ${data.error || 'CARRIER REJECTED'}]`); } catch(err) { setAuthError('[NETWORK FAULT]'); } setIsAuthenticating(false); }; const handleOTPVerify = async (e) => { e.preventDefault(); if(isAuthenticating) return; setIsAuthenticating(true); setAuthError(''); try { const res = await fetch(`${WORKER_API}/api/auth/otp-verify`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ identifier: identifierStr, code: authPass }) }); const data = await res.json(); if(data.success) { if (data.token) finalizeAuth(data, identifierStr); } else setAuthError(`[DENIED: ${data.error || 'INVALID FREQUENCY'}]`); } catch(err) { setAuthError('[NETWORK FAULT]'); } setIsAuthenticating(false); }; return (

{hud.show &&

{hud.msg}

} {showOmni && setShowOmni(false)} />} {showAuth && !showOmni && (

{requiresMfa ? '// AWAITING TOTP OVERRIDE' : (authType === 'login' ? '// AWAITING IDENTIFICATION' : '// MANIFEST NEW FREQUENCY')} {(!requiresMfa && authMethod === 'email') && ( )}

{!requiresMfa && (

)} {authMethod === 'email' ? (

{!requiresMfa ? ( <> {authType === 'register' && (

)}

> setAuthEmail(e.target.value)} autoComplete="email" autoFocus required />

> setAuthPass(e.target.value)} autoComplete={authType === 'login' ? "current-password" : "new-password"} required />

{(authType === 'register' && accountType === 'commercial') && (

> setAuthCompany(e.target.value)} autoComplete="organization" required />

)} ) : ( <>

> setMfaCode(e.target.value)} autoComplete="one-time-code" inputMode="numeric" pattern="[0-9]*" autoFocus required maxLength="6" />

)}

{isAuthenticating ? 'VERIFYING...' : authError}

) : (

{otpStep === 'request' ? ( <>

> setIdentifierStr(e.target.value)} autoFocus required />

) : ( <>

> setAuthPass(e.target.value)} autoComplete="one-time-code" inputMode="numeric" pattern="[0-9]*" autoFocus required maxLength="6" />

)}

{isAuthenticating ? 'VERIFYING...' : authError}

)}

)} {!isHardLocked && !showOmni && (

{ setMode('PUBLIC'); setView('HOME'); setHistory(['HOME']); window.scrollTo({ top: 0, behavior: 'smooth' }); }}> SENTINEL

{history.length > 1 && mode === 'PUBLIC' && ( )}

{auth.active && ( [{auth.role || 'AUTHORIZED'}] )}

)} {!showOmni && (

{mode === 'KIOSK' && } {mode !== 'KIOSK' && mode === 'PUBLIC' && view === 'HOME' && } {mode !== 'KIOSK' && mode === 'PUBLIC' && view === 'ORACLE' && } {mode !== 'KIOSK' && mode === 'PUBLIC' && view === 'VAULT' && } {mode !== 'KIOSK' && mode === 'PUBLIC' && view === 'NODES' && } {mode !== 'KIOSK' && mode === 'COMMAND' && } {mode !== 'KIOSK' && mode === 'CLIENT' && } {mode !== 'KIOSK' && mode === 'OPERATOR' && }

)}

); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();