// Tempo — icons, sidebar, screen wrappers, sample data
// ─── Theme (light/dark) ──────────────────────────────────────────
const THEME_KEY = 'tempo:theme';
function applyTheme(theme) {
const t = theme === 'dark' ? 'dark' : 'light';
if (typeof document !== 'undefined' && document.documentElement) {
if (t === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
else document.documentElement.removeAttribute('data-theme');
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute('content', t === 'dark' ? '#0a0a0a' : '#ffffff');
}
}
function useTheme() {
const [theme, setTheme] = React.useState(() => {
try { return localStorage.getItem(THEME_KEY) === 'dark' ? 'dark' : 'light'; }
catch (e) { return 'light'; }
});
React.useEffect(() => {
applyTheme(theme);
try { localStorage.setItem(THEME_KEY, theme); } catch (e) {}
}, [theme]);
const toggle = React.useCallback(() => setTheme(t => t === 'dark' ? 'light' : 'dark'), []);
return { theme, toggle };
}
// Apply persisted theme as soon as this script runs (before React mounts) to avoid a flash.
try {
applyTheme(localStorage.getItem(THEME_KEY) === 'dark' ? 'dark' : 'light');
} catch (e) {}
// ─── Market status (CME futures, Paris time) ──────────────────────
// CME Globex trading week :
// - Opens Sunday 17h CT = Monday 00h Paris (year-round, DST aligned)
// - Closes Friday 16h CT = Friday 23h Paris
// - Daily maintenance break 16h-17h CT = 23h-00h Paris (Mon-Thu nights)
// → Closed Sat all day, Sun all day, and 23h-00h Paris on weekday nights.
function isCMEFuturesOpen(d) {
const paris = new Date((d || new Date()).toLocaleString('en-US', { timeZone: 'Europe/Paris' }));
const day = paris.getDay(); // 0=Sun ... 6=Sat
const hour = paris.getHours();
if (day === 6) return false; // Saturday : closed
if (day === 0) return false; // Sunday : closed (opens Mon 00h)
if (hour === 23) return false; // Daily maintenance break (Mon-Fri)
return true;
}
// Alias kept for backwards-compat with anything that still imports isForexOpen
const isForexOpen = isCMEFuturesOpen;
function useMarketOpen() {
const [open, setOpen] = React.useState(() => isCMEFuturesOpen(new Date()));
React.useEffect(() => {
const t = setInterval(() => setOpen(isCMEFuturesOpen(new Date())), 30 * 1000);
return () => clearInterval(t);
}, []);
return open;
}
// ─── Icons ────────────────────────────────────────────────────────
const Ico = {
home: ,
connections: ,
cockpit: ,
groups: ,
risk: ,
econ: ,
journaling: ,
dashboard: ,
trades: ,
daily: ,
weekly: ,
stats: ,
strategy: ,
data: ,
prop: ,
affiliate: ,
settings: ,
plus: ,
search: ,
chev: ,
chevDown: ,
arrL: ,
arrR: ,
check: ,
x: ,
upload: ,
filter: ,
bell: ,
help: ,
sun: ,
moon: ,
cam: ,
book: ,
sync: ,
refresh: ,
backtest: ,
fondamental: ,
};
// ─── Sidebar ──────────────────────────────────────────────────────
function Sidebar({ active, onChange, journalingOpen = true, setJournalingOpen, user, displayName }) {
const email = user?.email || '';
const handle = email ? email.split('@')[0] : '—';
// Initials prefer the display name, else the email handle.
const initialsSource = (displayName || handle || '').trim();
const initials = initialsSource.slice(0, 2).toUpperCase() || '—';
const profileLabel = (displayName || '').trim() || 'Mon Profil';
const main = [
{ id: 'home', label: 'Accueil', ico: Ico.home },
{ id: 'econ', label: 'Calendrier éco.', ico: Ico.econ },
{ id: 'routines', label: 'Routines', ico: Ico.book },
{ id: 'backtest', label: 'Backtester', ico: Ico.backtest },
{ id: 'fondamental', label: 'Fondamental', ico: Ico.fondamental },
];
const journaling = [
{ id: 'dashboard', label: 'Dashboard', ico: Ico.dashboard },
{ id: 'trades', label: 'Trades', ico: Ico.trades },
{ id: 'daily', label: 'Daily', ico: Ico.daily },
{ id: 'stats', label: 'Statistiques', ico: Ico.stats },
{ id: 'weekly', label: 'Weekly', ico: Ico.weekly },
{ id: 'strategy', label: 'Strategy', ico: Ico.strategy },
{ id: 'data', label: 'Manage Data', ico: Ico.data },
];
const isInJournaling = journaling.some(j => j.id === active);
const Item = ({ it, sub, on }) => (
);
return (
);
}
// ─── Page header (sticky, shared across desktop pages) ────────────
function PageHeader({ title, right, left }) {
const marketOpen = useMarketOpen();
const { theme, toggle } = useTheme();
return (
{marketOpen ? (
CME ouvert
) : (
CME fermé
)}
{right}
);
}
// ─── Desktop screen wrapper ───────────────────────────────────────
function DesktopScreen({ children, active, onChange, journalingOpen, setJournalingOpen, user, displayName }) {
return (
{children}
);
}
// ─── Mobile bottom nav ────────────────────────────────────────────
function BottomNav({ active, onChange }) {
const items = [
{ id: 'home', label: 'Accueil', ico: Ico.home },
{ id: 'stats', label: 'Stats', ico: Ico.stats },
{ id: 'trades', label: 'Trades', ico: Ico.trades },
{ id: 'backtest', label: 'Backtest', ico: Ico.backtest },
{ id: 'settings', label: 'Plus', ico: Ico.settings },
];
return (
{items.map(it => (
))}
);
}
function IOSChrome({ time = '14:32' }) {
return (
);
}
function MobileScreen({ children, time = '14:32', active, onChange, showNav = true }) {
return (
{children}
{showNav && }
);
}
// ─── Sample data ──────────────────────────────────────────────────
// P&L by day for May 2026 (sparse — most days empty as in screenshots)
const PNL = {
4: { p: 240, t: 3, w: 2, l: 1 },
5: { p: -180, t: 2, w: 0, l: 2 },
6: { p: 460, t: 4, w: 3, l: 1 },
7: { p: 120, t: 1, w: 1, l: 0 },
8: { p: -90, t: 3, w: 1, l: 2 },
11: { p: 540, t: 5, w: 4, l: 1 },
12: { p: 420, t: 4, w: 3, l: 1 },
13: { p: -220, t: 4, w: 1, l: 3 },
14: { p: 180, t: 2, w: 2, l: 0 },
15: { p: 720, t: 4, w: 3, l: 1 },
18: { p: 0, t: 0, w: 0, l: 0 }, // journaled but no trades
19: { p: 340, t: 3, w: 2, l: 1 },
20: { p: -60, t: 2, w: 1, l: 1 },
21: { p: 280, t: 3, w: 2, l: 1 },
22: { p: -140, t: 2, w: 0, l: 2 },
25: { p: 0, t: 0, w: 0, l: 0 }, // today, no trades yet
};
const TRADES_TODAY = [];
const RECENT_TRADES = [
{ id: 1, date: '22 mai', time: '14:12', sym: 'NQ', dir: 'L', entry: 18420.5, exit: 18395, lots: 1, pnl: -140, r: -1.1, setup: 'News', hold: '4 min' },
{ id: 2, date: '22 mai', time: '11:48', sym: 'ES', dir: 'S', entry: 5278, exit: 5274, lots: 2, pnl: 200, r: 1.3, setup: 'Range', hold: '12 min' },
{ id: 3, date: '21 mai', time: '15:42', sym: 'ES', dir: 'L', entry: 5266, exit: 5272.5, lots: 1, pnl: 325, r: 1.6, setup: 'Breakout', hold: '18 min' },
{ id: 4, date: '21 mai', time: '11:20', sym: 'EURUSD', dir: 'S', entry: 1.0842, exit: 1.0828, lots: .5, pnl: 70, r: 0.9, setup: 'Range', hold: '32 min' },
{ id: 5, date: '21 mai', time: '09:34', sym: 'NQ', dir: 'L', entry: 18380, exit: 18365, lots: 1, pnl: -125, r: -0.8, setup: 'Reversal', hold: '6 min' },
{ id: 6, date: '20 mai', time: '14:48', sym: 'GC', dir: 'L', entry: 2364, exit: 2370, lots: 1, pnl: 60, r: 0.6, setup: 'Pullback', hold: '21 min' },
{ id: 7, date: '20 mai', time: '10:12', sym: 'ES', dir: 'S', entry: 5290, exit: 5294, lots: 1, pnl: -120, r: -1.0, setup: 'News', hold: '3 min' },
{ id: 8, date: '19 mai', time: '14:55', sym: 'NQ', dir: 'L', entry: 18250, exit: 18290, lots: 1, pnl: 340, r: 2.1, setup: 'Breakout', hold: '24 min' },
];
const NEWS = [
{ src: 'BLOOMBERG', t: 'Fed minutes signal patience on rate cuts as inflation lingers', time: '06:42' },
{ src: 'FT', t: 'ECB members split on terminal rate path, eyes on May CPI print', time: '06:55' },
{ src: 'LE MONDE', t: 'CAC 40 atteint un sommet historique sur résultats T1', time: '07:10' },
{ src: 'REUTERS', t: 'Tech mega-caps lead Nasdaq futures higher pre-open', time: '07:18' },
];
const PRETRADE = [
{ id: 'p1', t: 'Plan défini', d: false },
{ id: 'p2', t: 'Risque < 1% du capital', d: false },
{ id: 'p3', t: 'Aucune news à haut impact dans 15min', d: false },
{ id: 'p4', t: 'État mental clair (sommeil, stress)', d: false },
{ id: 'p5', t: 'Aucune position ouverte concurrente', d: false },
];
const STRATEGIES = [
{ id: 's1', name: 'Breakout VWAP', desc: 'Cassure propre du VWAP avec retest', wr: 0.71, n: 42, pnl: 2840, exp: 138 },
{ id: 's2', name: 'Range Asie', desc: 'Rejet du haut/bas du range Asie', wr: 0.54, n: 24, pnl: 480, exp: 42 },
{ id: 's3', name: 'News Fade', desc: 'Fade des extensions news >1.5%', wr: 0.68, n: 16, pnl: 720, exp: 95 },
{ id: 's4', name: 'Pullback Trend', desc: 'EMA20 retest dans une tendance', wr: 0.61, n: 18, pnl: 540, exp: 58 },
{ id: 's5', name: 'Open Reversal', desc: 'Reversal sur les 30 premières min', wr: 0.43, n: 14, pnl: -220, exp: -28 },
];
Object.assign(window, {
Ico, Sidebar, PageHeader, DesktopScreen, BottomNav, IOSChrome, MobileScreen,
PNL, RECENT_TRADES, NEWS, PRETRADE, STRATEGIES,
useTheme, useMarketOpen, isCMEFuturesOpen, isForexOpen, applyTheme,
});