// ============ Calendar page ============ // Mock some journal entries so indicator dots are visible const SEED_JOURNAL_DATES = ['2026-04-01','2026-04-07','2026-04-09','2026-04-14','2026-04-17','2026-04-21']; const hasJournalFor = (dateStr) => { if (SEED_JOURNAL_DATES.includes(dateStr)) return true; try { const j = JSON.parse(localStorage.getItem('edgebook:journals') || '{}'); return !!j[dateStr]; } catch { return false; } }; const CalendarPage = () => { const { t, fmtCurShort, fmtCur, lang } = useI18n(); const { filteredTrades } = useAccounts(); const today = new Date(2026, 3, 21); const [cur, setCur] = useState(new Date(2026, 3, 1)); const [view, setView] = useState('month'); // month | year const [selectedDay, setSelectedDay] = useState(null); // All closed trades keyed by yyyy-mm-dd const CAL_LOCAL = useMemo(() => { const m = new Map(); filteredTrades.filter(t=>t.status==='closed').forEach(t=>{ const k = t.date.toISOString().slice(0,10); const cur = m.get(k) || { pnl: 0, count: 0, trades: [] }; cur.pnl += t.pnl; cur.count++; cur.trades.push(t); m.set(k, cur); }); return m; }, [filteredTrades]); const y = cur.getFullYear(), m = cur.getMonth(); const first = new Date(y, m, 1); const last = new Date(y, m+1, 0); const startDow = (first.getDay() + 6) % 7; const daysInMonth = last.getDate(); const prevMonthDays = new Date(y, m, 0).getDate(); const cells = []; for (let i=0;i= 42) break; } let monthPnl = 0, monthCount = 0, bestDayKey = null, worstDayKey = null, bestDayPnl = 0, worstDayPnl = 0; for (const c of cells) { if (c.out) continue; const k = c.d.toISOString().slice(0,10); const v = CAL_LOCAL.get(k); if (v) { monthPnl += v.pnl; monthCount += v.count; if (v.pnl > bestDayPnl) { bestDayPnl = v.pnl; bestDayKey = k; } if (v.pnl < worstDayPnl) { worstDayPnl = v.pnl; worstDayKey = k; } } } const inMonthKeys = cells.filter(c=>!c.out).map(c=>c.d.toISOString().slice(0,10)); const maxAbsPnl = Math.max(1, ...inMonthKeys.map(k => Math.abs(CAL_LOCAL.get(k)?.pnl||0))); const weeks = []; for (let i=0;i<6;i++){ const wk = cells.slice(i*7, i*7+7); let pnl=0, count=0; for (const c of wk) { if (c.out) continue; const v = CAL_LOCAL.get(c.d.toISOString().slice(0,10)); if (v){ pnl += v.pnl; count += v.count; } } weeks.push({ pnl, count }); } const monthName = cur.toLocaleDateString(lang==='mn'?'mn-MN':'en-US',{month:'long', year:'numeric'}); const dowLabels = lang==='mn' ? ['Да','Мя','Лх','Пү','Ба','Бя','Ня'] : ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']; const tradingDays = weeks.reduce((s,w)=>s+(w.count>0?1:0),0); // Day-of-week performance const dowStats = useMemo(() => { const buckets = [0,1,2,3,4,5,6].map(()=>({pnl:0,count:0,wins:0,losses:0})); filteredTrades.filter(t=>t.status==='closed').forEach(t => { const dow = (t.date.getDay() + 6) % 7; const b = buckets[dow]; b.pnl += t.pnl; b.count++; if (t.pnl > 0) b.wins++; else if (t.pnl < 0) b.losses++; }); return buckets; }, [filteredTrades]); const dowMax = Math.max(1, ...dowStats.map(b => Math.abs(b.pnl))); // Year view stats const yearStats = useMemo(() => { const months = Array.from({length:12},(_,mi)=>({pnl:0,count:0,days:{}})); filteredTrades.filter(t=>t.status==='closed' && t.date.getFullYear()===y).forEach(t=>{ const mi = t.date.getMonth(); const di = t.date.getDate(); months[mi].pnl += t.pnl; months[mi].count++; months[mi].days[di] = (months[mi].days[di] || 0) + t.pnl; }); const yearPnl = months.reduce((s,mn)=>s+mn.pnl,0); const bestMi = months.reduce((b,mn,i)=>mn.pnl > months[b].pnl ? i : b, 0); const worstMi = months.reduce((b,mn,i)=>mn.pnl < months[b].pnl ? i : b, 0); const tradingDaysYr = months.reduce((s,mn)=>s+Object.keys(mn.days).length,0); return { months, yearPnl, bestMi, worstMi, tradingDaysYr }; }, [filteredTrades, y]); return (
{view==='month' && <> } {view==='year' && <> } } /> {view === 'month' && ( <>
{t('month')}
{monthName}
{t('kpi_net_pnl')}
=0?'up':'dn')} style={{fontSize:20,fontWeight:600}}>{fmtCur(monthPnl)}
{t('trading_days')}
{tradingDays}
{t('th_trades')}
{monthCount}
{t('avg_per_day')}
=0?'up':'dn')} style={{fontSize:20,fontWeight:600}}>{monthCount?fmtCur(monthPnl/Math.max(1,tradingDays)):'—'}
{dowLabels.map(d =>
{d}
)}
{cells.map((c, i) => { const k = c.d.toISOString().slice(0,10); const v = CAL_LOCAL.get(k); const isToday = c.d.toDateString() === today.toDateString(); const hasJournal = !c.out && hasJournalFor(k); const isBest = !c.out && k === bestDayKey && bestDayPnl > 0; const isWorst = !c.out && k === worstDayKey && worstDayPnl < 0; let cls = 'cal-day'; if (c.out) cls += ' out'; if (isToday) cls += ' today'; if (v) cls += v.pnl >= 0 ? ' win' : ' loss'; // Graded intensity const intensity = v ? 0.20 + 0.80 * (Math.abs(v.pnl)/maxAbsPnl) : 0; const style = v ? { background: v.pnl >= 0 ? `linear-gradient(135deg, rgba(16,185,129,${0.08+intensity*0.18}) 0%, rgba(16,185,129,${intensity*0.08}) 100%)` : `linear-gradient(135deg, rgba(239,68,68,${0.08+intensity*0.18}) 0%, rgba(239,68,68,${intensity*0.08}) 100%)`, borderColor: v.pnl >= 0 ? `rgba(16,185,129,${0.2+intensity*0.25})` : `rgba(239,68,68,${0.2+intensity*0.25})`, } : {}; return (
{ if (!c.out) setSelectedDay(c.d); }} style={{cursor: c.out ? 'default' : 'pointer', position:'relative', ...style}}> {isBest &&
🏆
} {isWorst &&
⚠️
} {hasJournal &&
}
{c.d.getDate()}
{v ? ( <>
=0?'up':'dn')}>{fmtCurShort(v.pnl)}
{v.count} {v.count===1?'trade':'trades'}
) : ( !c.out &&
—
)}
); })}
{t('weekly')}
{weeks.map((w,i) => (
{t('week')} {i+1}
=0?'up':w.pnl<0?'dn':'neu')} style={{fontSize:14,fontWeight:600}}>{w.count?fmtCurShort(w.pnl):'—'}
{w.count} {t('th_trades').toLowerCase()}
))}
{/* Day of Week stats */}
{t('dow_performance')||'Day of week performance'}
{t('dow_sub')||'See which weekday compounds your edge'}
{dowStats.map((b,i)=>{ const wr = b.count ? (b.wins/b.count)*100 : 0; const h = Math.max(4, (Math.abs(b.pnl)/dowMax)*120); const isPos = b.pnl >= 0; return (
{dowLabels[i]}
{b.count > 0 && (
)}
=0?'up':b.pnl<0?'dn':'neu')} style={{fontWeight:600}}>{b.count?fmtCurShort(b.pnl):'—'}
{b.count?`${wr.toFixed(0)}% · ${b.count}`:'—'}
); })}
)} {view === 'year' && ( { setCur(new Date(y, mi, 1)); setView('month'); }}/> )} {/* Day drawer */} {selectedDay && setSelectedDay(null)}/>}
); }; // ---- Year view ---- const YearView = ({ y, yearStats, CAL_LOCAL, onPickMonth }) => { const { t, fmtCur, fmtCurShort, lang } = useI18n(); const MONTH_NAMES = Array.from({length:12},(_,i)=>new Date(y,i,1).toLocaleDateString(lang==='mn'?'mn-MN':'en-US',{month:'short'})); // compute max abs pnl for a day across the whole year for heatmap grading let yMaxAbs = 1; for (const mn of yearStats.months) { for (const k of Object.keys(mn.days)) yMaxAbs = Math.max(yMaxAbs, Math.abs(mn.days[k])); } return ( <>
{y}
{t('year_view')||'Year'}
{t('year_pnl')||'Year P&L'}
=0?'up':'dn')} style={{fontSize:20,fontWeight:600}}>{fmtCur(yearStats.yearPnl)}
{t('trading_days')}
{yearStats.tradingDaysYr}
{t('best_month')||'Best month'}
{MONTH_NAMES[yearStats.bestMi]}
{t('worst_month')||'Worst month'}
{MONTH_NAMES[yearStats.worstMi]}
{yearStats.months.map((mn, mi) => { const daysIn = new Date(y, mi+1, 0).getDate(); const firstDow = (new Date(y, mi, 1).getDay() + 6) % 7; // grid: 7 cols, up to 6 rows const cells = []; for (let i=0;ionPickMonth(mi)} onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--accent)';}} onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--border)';}}>
{MONTH_NAMES[mi]}
=0?'up':mn.pnl<0?'dn':'neu')} style={{fontWeight:600}}>{mn.count?fmtCurShort(mn.pnl):'—'}
{cells.map((d,ci)=>{ if (!d) return
; const pnl = mn.days[d]; if (pnl === undefined) return
; const intensity = 0.25 + 0.75 * (Math.abs(pnl)/yMaxAbs); const bg = pnl>=0 ? `rgba(16,185,129,${intensity})` : `rgba(239,68,68,${intensity})`; return
; })}
{mn.count} {t('th_trades').toLowerCase()}
); })}
); }; // ---- Day drawer ---- const DayDrawer = ({ day, trades, onClose }) => { const { t, fmtCur, lang } = useI18n(); const totalPnl = trades.reduce((s,t)=>s+(t.pnl||0),0); const wins = trades.filter(t=>t.pnl>0).length; const avgR = trades.length ? trades.reduce((s,t)=>s+(t.r||0),0)/trades.length : 0; const bestTrade = trades.slice().sort((a,b)=>b.pnl-a.pnl)[0]; const worstTrade = trades.slice().sort((a,b)=>a.pnl-b.pnl)[0]; const key = day.toISOString().slice(0,10); const journal = hasJournalFor(key); const go = (href) => { try { localStorage.setItem('edgebook:journal_date', key); } catch {} window.location.hash = href; }; return (
e.stopPropagation()} style={{width:460}}>
{day.toLocaleDateString(lang==='mn'?'mn-MN':'en-US',{weekday:'long',month:'long',day:'numeric',year:'numeric'})}
=0?'up':totalPnl<0?'dn':'neu')} style={{fontSize:26,fontWeight:600,marginTop:6,letterSpacing:'-0.015em'}}> {trades.length ? fmtCur(totalPnl) : '—'}
{trades.length > 0 && (
{t('th_trades')}
{trades.length}
{t('winrate')||'Win %'}
{trades.length?Math.round(wins/trades.length*100):0}%
{t('best_ticker')||'Best'}
{bestTrade?.ticker||'—'}
{t('worst_ticker')||'Worst'}
{worstTrade?.ticker||'—'}
{t('kpi_avg_r')}
=0?'up':'dn')} style={{fontWeight:600}}>{(avgR>=0?'+':'')+avgR.toFixed(2)}R
)}
{t('th_trades')}
{trades.length === 0 ? (
{t('no_trades_this_day')||'No trades this day'}
) : (
{trades.map(tr=>(
{tr.ticker}
0?'up':tr.pnl<0?'dn':'neu')} style={{fontWeight:600,fontSize:13}}>{tr.status==='open'?'—':fmtCur(tr.pnl)}
{tr.date.toLocaleTimeString(lang==='mn'?'mn-MN':'en-US',{hour:'2-digit',minute:'2-digit'})} · {tr.size} @ ${tr.entry.toFixed(2)}{tr.exit?` → $${tr.exit.toFixed(2)}`:''} · {(tr.r>=0?'+':'')+tr.r.toFixed(2)}R
))}
)}
{t('nav_journal')}
{journal ? (
Strong follow-through on morning setups. Pre-market plan flagged NVDA as priority — stuck to it, avoided FOMO chases on secondaries...
😌Calm · discipline held
) : ( )}
); }; window.CalendarPage = CalendarPage;