/* ============================================================ app.jsx — shell: nav, routing, theming, tweaks, data tools. ============================================================ */ (function () { const { useState, useEffect, useRef, useMemo } = React; const { Icon } = window; const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakButton } = window; // ────────────────────────────────────────────────────────── function PortfolioSwitcher({ compact } = {}) { const { list, current } = window.usePortfolios(); const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h); }, []); const cur = list.find(p => p.id === current) || list[0]; return (
{open && (
{list.map(p => ( ))}
)}
); } function SyncIndicator() { const s = window.useSyncStatus(); const map = { idle: { dot: '#5e6a7d', text: 'Local' }, syncing: { dot: '#d8a229', text: 'กำลังบันทึก…' }, synced: { dot: '#26a269', text: 'บันทึกแล้ว' }, error: { dot: '#e5484d', text: 'Sync error ⚠️' }, }; const { dot, text } = map[s] || map.idle; return (
{text} {s === 'error' && }
); } // Account box — shows the signed-in email + logout. Only renders when cloud // accounts are configured (window.OZLAuth present); hidden in local mode. function AccountBox() { const [email, setEmail] = React.useState(''); React.useEffect(() => { if (!window.OZLAuth) return; window.OZLAuth.getSession().then(({ data }) => { if (data && data.session && data.session.user) setEmail(data.session.user.email || ''); }); }, []); if (!window.OZLAuth) return null; const logout = async () => { try { await window.OZLAuth.signOut(); } catch (e) {} try { localStorage.removeItem('ozl_app_v1'); } catch (e) {} // clear local cache so the next account starts clean window.location.replace('login.html'); }; return (
{(email[0] || '?').toUpperCase()} {email || '—'}
); } const ACCENTS = { blue: ['#3b82f6', '#6aa6ff'], gold: ['#d8a229', '#edc24f'], green: ['#1f9d62', '#37c684'], purple: ['#8b5cf6', '#a78bfa'], }; // count of watchlist items with an active trade signal function WatchNavBadge() { const list = window.useWatchlist(); const n = (window.WL && list) ? list.filter(w => window.WL.grade(w).active).length : 0; if (!n) return null; return {n}; } // open-app popup summarising fired signals + price alerts (shown once per session) function WatchAlerts({ go }) { const list = window.useWatchlist(); const [show, setShow] = useState(false); const fired = useMemo(() => { if (!window.WL || !list) return []; return list.map(w => { const g = window.WL.grade(w); const pa = window.WL.priceAlerts(w); return (g.active || pa.length) ? { w, g, pa } : null; }).filter(Boolean).sort((a, b) => { const ra = a.g.g ? window.WL.GRADES[a.g.g].rank : 0; const rb = b.g.g ? window.WL.GRADES[b.g.g].rank : 0; return rb - ra; }); }, [list]); useEffect(() => { if (!fired.length) return; const sig = fired.map(f => f.w.ticker + (f.g.g || '') + f.pa.map(a => a.kind).join('')).join('|'); try { if (sessionStorage.getItem('wl_alert_seen') === sig) return; } catch {} const t = setTimeout(() => setShow(true), 900); return () => clearTimeout(t); }, [fired]); const dismiss = () => { const sig = fired.map(f => f.w.ticker + (f.g.g || '') + f.pa.map(a => a.kind).join('')).join('|'); try { sessionStorage.setItem('wl_alert_seen', sig); } catch {} setShow(false); }; if (!show || !fired.length) return null; return (
สัญญาณ Watchlist · {fired.length}
{fired.slice(0, 6).map(f => (
{ go('watchlist'); dismiss(); }}> {f.g.g && {f.g.g}} {f.w.ticker} {f.g.active ? f.g.label : (f.pa[0] && f.pa[0].text)}
))}
); } function hexToRgba(hex, a) { const h = hex.replace('#', ''); const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16); return `rgba(${r},${g},${b},${a})`; } const NAV = [ { id: 'dashboard', label: 'Dashboard', th: 'ภาพรวมพอร์ต', icon: 'dashboard' }, { id: 'trades', label: 'Trades', th: 'บันทึกเทรด', icon: 'trades' }, { id: 'daily', label: 'Daily NLV', th: 'NLV รายวัน', icon: 'daily' }, { id: 'summary', label: 'สรุปผลเทรด', th: 'ตามกลยุทธ์/ticker', icon: 'summary' }, { id: 'watchlist', label: 'Watchlist', th: 'จับตา + แจ้งเตือน', icon: 'eye', pro: true }, ]; // ลิงก์ feedback — เปิดอีเมลหาทีมงานพร้อมหัวข้อตั้งไว้ให้ const FEEDBACK_EMAIL = 'optionzlog@gmail.com'; const FEEDBACK_MAILTO = 'mailto:' + FEEDBACK_EMAIL + '?subject=' + encodeURIComponent('[Fillbook] Feedback') + '&body=' + encodeURIComponent('บอกเราได้เลยว่าชอบ/ติดตรงไหน อยากได้อะไรเพิ่ม:\n\n'); const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "blue", "dashVariant": "Classic", "theme": "dark", "fontset": "plex" }/*EDITMODE-END*/; // Freemium gate — shows the feature blurred behind a Pro lock. function ProGate({ title, th, desc, children }) { const goPricing = () => { try { window.location.href = 'OptionzLog Landing.html#pricing'; } catch (e) {} }; return (
PRO

{title}

{th}

{desc || 'สรุปผลรายสัปดาห์อัตโนมัติ + ติดตามพอร์ต LEAP แบบเจาะลึก พร้อม WoW, unrealized P/L และข้อความสรุปพร้อมแชร์ — ปลดล็อกด้วยแพ็กเกจ Pro'}

ทดลองฟรี 14 วัน · ยกเลิกได้ทุกเมื่อ
); } function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [route, setRoute] = useState(() => (location.hash || '').replace('#', '') || 'dashboard'); const state = window.useStore(); const T = window.TL; useEffect(() => { const h = () => setRoute((location.hash || '').replace('#', '') || 'dashboard'); window.addEventListener('hashchange', h); return () => window.removeEventListener('hashchange', h); }, []); const go = (id) => { location.hash = id; setRoute(id); }; // apply theme + font + accent to :root useEffect(() => { const root = document.documentElement; root.setAttribute('data-theme', t.theme === 'light' ? 'light' : 'dark'); root.setAttribute('data-font', t.fontset === 'sarabun' ? 'sarabun' : 'plex'); const [a1, a2] = ACCENTS[t.accent] || ACCENTS.blue; root.style.setProperty('--accent', a1); root.style.setProperty('--accent-2', a2); root.style.setProperty('--accent-soft', hexToRgba(a1, t.theme === 'light' ? 0.12 : 0.16)); root.style.setProperty('--accent-line', hexToRgba(a1, 0.42)); }, [t.theme, t.fontset, t.accent]); const variant = { Classic: 1, Goal: 2, Terminal: 3 }[t.dashVariant] || 1; // topbar quick stats const daily = state.daily.slice().filter(d => d && d.date).sort((a, b) => a.date.localeCompare(b.date)); const lastNLV = daily.length ? daily[daily.length - 1].nlv : 0; const m = T.metrics(state.trades); const cur = NAV.find(n => n.id === route) || NAV[0]; let Page = null; if (route === 'dashboard') Page = ; else if (route === 'trades') Page = ; else if (route === 'daily') Page = ; else if (route === 'summary') Page = ; else if (route === 'weekly') Page = window.IS_PRO ? : ; else if (route === 'watchlist') Page = window.IS_PRO ? : ; else Page = ; // data tools const exportData = () => { const blob = new Blob([JSON.stringify(window.Store.get(), null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'option-trade-log-' + new Date().toISOString().slice(0, 10) + '.json'; a.click(); URL.revokeObjectURL(url); }; const importData = () => { const inp = document.createElement('input'); inp.type = 'file'; inp.accept = '.json'; inp.onchange = e => { const f = e.target.files[0]; if (!f) return; const r = new FileReader(); r.onload = () => { try { window.Store.importState(JSON.parse(r.result)); } catch (err) { alert('ไฟล์ไม่ถูกต้อง'); } }; r.readAsText(f); }; inp.click(); }; return (
{cur.label} · {cur.th}
{route === 'dashboard' && (
{['Classic', 'Goal', 'Terminal'].map(v => ( ))}
)}
NLV
{T.fmtMoney(lastNLV)}
Net P/L
= 0 ? 'var(--pos-bright)' : 'var(--neg-bright)' }}>{T.fmtMoneyP(m.net)}
Win
{T.fmtPct(m.winRate, 0)}
{Page}
{/* mobile bottom nav */} { const k = Object.keys(ACCENTS).find(key => ACCENTS[key][0] === v) || 'blue'; setTweak('accent', k); }} /> setTweak('theme', v ? 'light' : 'dark')} /> setTweak('fontset', v)} /> setTweak('dashVariant', v)} /> { if (confirm('รีเซ็ตข้อมูลทั้งหมดกลับเป็นชุดที่นำเข้าจาก Excel?')) window.Store.resetToSeed(); }} />
); } ReactDOM.createRoot(document.getElementById('root')).render(); })();