// Tempo — pages : Accueil, Journal quotidien, Trades, fenêtre du jour, détail
// d'un trade, connexion et mot de passe.
// ─── Briques communes de ce fichier ───────────────────────────────
// Mot de passe : longueur minimale unique (charte §7), pour le contrôle, le
// message, le placeholder et minLength. Exposée sur window (Réglages).
const PASSWORD_MIN = 8;
const PASSWORD_HINT = PASSWORD_MIN + ' caractères minimum';
const PASSWORD_TOO_SHORT = 'Le mot de passe doit faire au moins ' + PASSWORD_MIN + ' caractères.';
// Libellés d'écrans : table unique NAV_LABELS (core.jsx, chargé avant ce fichier).
function pg2Nav(id) {
return NAV_LABELS[id] || {};
}
// Source d'un trade telle qu'affichée (charte §5), jamais le code brut
// (« generic », « mt5 ») : table unique appSourceLabel (app.jsx, lu au rendu).
// Un trade sans source a été saisi à la main.
function tradeSourceLabel(src) {
return appSourceLabel(src) || 'Saisie manuelle';
}
// « Sam. 26 sept. » : jour court capitalisé + date, dans le fuseau du profil.
function pg2DayTitle(day) {
const wd = fmtWeekdayShort(day);
if (wd === '—') return '—';
return wd.charAt(0).toUpperCase() + wd.slice(1) + ' ' + fmtDayShort(day);
}
// Nombre de trades notés en R : même règle que computeStats (trades-api.jsx),
// R renseigné, fini et non nul.
function pg2RCount(trades) {
let n = 0;
for (const t of trades || []) {
const v = t && t.r_multiple;
if (v === null || v === undefined || v === '') continue;
const rv = Number(v);
if (Number.isFinite(rv) && rv !== 0) n++;
}
return n;
}
// Profit factor affiché : « — » sans trade ou avec uniquement des trades nuls,
// « ∞ » sans perte (Infinity conservé), sinon 2 décimales. Même règle que le
// mobile (appPFText, app.jsx).
function pg2PFText(pf, count, wins, losses) {
if (!count || (!wins && !losses)) return '—';
return fmtPF(pf, count);
}
// « 1 246 trades » : nombre au format français (charte §1) et accord du mot.
// Formateur partagé fmtCount (format-prefs.jsx), espace ordinaire entre le
// nombre et le mot.
function pg2Count(n, mot) {
return fmtCount(n, mot);
}
// « 24 G · 22 P · 1 nul » (charte §3), nombres au format français (charte §1 :
// « 2 664 G · 2 336 P », jamais « 2664 G »), comme pgWinLossText (pages.jsx).
function pg2WinLoss(wins, losses, nuls) {
const n = Number(nuls) || 0;
return fmtNum(Number(wins) || 0, 0) + ' G · ' + fmtNum(Number(losses) || 0, 0) + ' P'
+ (n > 0 ? ' · ' + fmtNum(n, 0) + ' nul' + (n > 1 ? 's' : '') : '');
}
// Mise en page selon la largeur de la fenêtre (ordinateur) : le contenu passe
// en deux colonnes plutôt que de tronquer un montant (charte §9).
function usePg2MinWidth(px) {
const query = '(min-width: ' + px + 'px)';
const read = () => { try { return window.matchMedia(query).matches; } catch (e) { return true; } };
const [ok, setOk] = React.useState(read);
React.useEffect(() => {
let mq;
try { mq = window.matchMedia(query); } catch (e) { return undefined; }
const on = () => setOk(mq.matches);
on();
if (mq.addEventListener) mq.addEventListener('change', on); else if (mq.addListener) mq.addListener(on);
return () => { if (mq.removeEventListener) mq.removeEventListener('change', on); else if (mq.removeListener) mq.removeListener(on); };
}, [query]);
return ok;
}
// Feuille pleine largeur sous 900 px (charte §8) : useIsMobile (app.jsx).
function usePg2Mobile() {
if (typeof useIsMobile === 'function') return useIsMobile();
return typeof window !== 'undefined' && window.innerWidth < 900;
}
// Erreur de chargement des trades (charte §7) : ce n'est pas un compte vide.
// Les données déjà chargées restent affichées, avec ce bandeau et Réessayer.
// state.tradesError est facultatif : sans lui, rien ne s'affiche.
function Pg2LoadError({ state, style }) {
if (!state || !state.tradesError) return null;
return (
Impossible de charger tes trades. Vérifie ta connexion.
{typeof state.refreshTrades === 'function' && (
)}
);
}
// Squelette de liste (trades, jours) : uniquement pendant le premier
// chargement (charte §7), même rendu que les squelettes des autres écrans.
function Pg2RowsSkeleton({ rows = 4, label = 'Chargement…', gap = 20, style }) {
const bar = (w, h) => ;
return (
{Array.from({ length: rows }).map((_, i) => (
{bar('22%', 10)}{bar('14%', 12)}{bar('16%', 14)}
))}
);
}
// Trades non chargés (échec, aucune donnée en mémoire) : ce n'est pas un
// compte vide, on n'invite donc pas à ajouter un premier trade. Le bandeau
// Pg2LoadError, en haut de page, porte le bouton Réessayer.
function Pg2Unavailable({ text = 'Tes trades s’afficheront ici dès que la connexion sera rétablie.', style }) {
return ;
}
// Pastille d'état des marchés de l'Accueil. Source unique : sessionStatusInTz
// (format-prefs.jsx), chaque place dans son propre fuseau. Même règle que
// l'Accueil mobile (app.jsx) : New York, puis Londres, puis Tokyo.
function homeMarketPill(mk) {
if (mk.newyork) return { text: 'Session de New York ouverte', open: true };
if (mk.london) return { text: 'Session de Londres ouverte', open: true };
if (mk.tokyo) return { text: 'Session de Tokyo ouverte', open: true };
if (mk.cmeOpen) return { text: 'CME ouvert · hors sessions principales', open: true };
return { text: 'Marchés fermés', open: false };
}
// ─── ACCUEIL ──────────────────────────────────────────────────────
function Home({ nav, navStats, openJournal, openImport, openTrade, state }) {
const t = useLiveTime();
// Raccourcis vers la section Statistiques (vue trading / habitudes). Inertes si navStats absent.
const goStatsTrading = navStats ? () => navStats('trading') : (nav ? () => nav('stats') : undefined);
const { agenda, toggleAgenda, stats, tradesLoading } = state;
const trades = Array.isArray(state.trades) ? state.trades : [];
const wide = usePg2MinWidth(1200);
// Trades récents : Entrée et Sortie seulement quand la carte a la place de
// les montrer sans tronquer le P&L — pleine largeur dès 1000 px, ou à côté
// des raccourcis dès 1600 px.
const roomy = usePg2MinWidth(1600);
const mid = usePg2MinWidth(1000);
const recentCols = (wide ? roomy : mid) ? PG2_COLS_COMPACT : PG2_COLS_HOME;
// Horloges : l'heure du profil, puis Londres, New York et Tokyo, chacune dans
// son fuseau, avec l'état de sa séance (sessionStatusInTz, format-prefs.jsx).
// Si le fuseau du profil est celui d'une place (profil New York), l'horloge
// du profil porte l'état de cette séance, qui n'est pas répétée.
// La pastille CME reste dans l'en-tête de page.
const tz = window.__appTz || 'Europe/Paris';
const mk = sessionStatusInTz(tz, t);
const heroPill = homeMarketPill(mk);
const mine = mk.sessions.find(s => s.tz === tz);
const clocks = [{ key: 'me', c: 'Ton heure · ' + tzLabel(tz), time: tzTimeIn(t, tz), on: mine ? mine.open : false, label: mine ? mine.label : null }].concat(
['london', 'newyork', 'tokyo']
.map(k => mk.sessions.find(s => s.key === k))
.filter(s => s && s.tz !== tz)
.map(s => ({ key: s.key, c: s.name, time: tzTimeIn(t, s.tz), on: s.open, label: s.label }))
);
// Grille des horloges : toutes sur une ligne quand la largeur mesurée le
// permet (≈ 215 px par horloge), sinon deux par ligne.
const [clockRef, clockW] = usePgWidth();
const clockOneRow = clockW > 0 && clockW >= clocks.length * 215 + (clocks.length - 1) * 22;
const clockCols = clockOneRow ? `repeat(${clocks.length}, auto)` : 'repeat(2, auto)';
// Nombre impair d'horloges sur deux colonnes (profil à Londres, New York ou
// Tokyo : 3 horloges) : « Ton heure » occupe toute la première ligne, les
// deux autres se partagent la seconde — jamais une horloge seule en bas.
const clockSpanFirst = !clockOneRow && clocks.length % 2 === 1;
// « Samedi 26 septembre · Semaine 39 », dans le fuseau du profil.
const dateLabel = buildDateLabel();
// Greeting name: real display name (profile) with email/Trader fallbacks (see state.displayName).
// Prénom du profil, seulement une fois le profil chargé (pas de « Bonjour, demo »
// tiré de l'e-mail, remplacé une seconde plus tard par le vrai prénom).
const greeting = state && state.profileReady ? (state.displayName || '') : '';
const n = stats.count || 0;
const net = Number(stats.netPnl) || 0;
const nuls = Number.isFinite(stats.breakeven) ? stats.breakeven : Math.max(0, n - (stats.wins || 0) - (stats.losses || 0));
const rCount = React.useMemo(
() => (Number.isFinite(stats.rCount) ? stats.rCount : pg2RCount(trades)),
[trades, stats.rCount]
);
const recent = trades.slice(0, 5);
// Premier chargement : squelettes, jamais l'état « compte vide ». Échec de
// chargement sans données : ce n'est pas un compte vide non plus (charte §7),
// le bandeau Pg2LoadError propose Réessayer.
const firstLoad = !!tradesLoading && n === 0;
const loadFailed = !tradesLoading && !!state.tradesError && n === 0;
const noData = firstLoad || loadFailed;
return (
{/* Appareil et profil à des heures différentes : bandeau partagé avec
l'Accueil mobile (AppTzNotice, app.jsx). */}
{typeof AppTzNotice === 'function' && }
{/* ── Hero — big personal card ── */}
{/* Hero left — gradient + personal greeting. .on-dark : contour de
focus clair sur ce bandeau toujours sombre (charte §8). */}
{firstLoad
? <>Chargement de ton journal…
: loadFailed
? <>Ton journal n’a pas pu être chargé pour le moment.
: n === 0
? <>Tempo est prêt. Ajoute ton premier trade ou importe un fichier de ton courtier pour démarrer ton journal.
: <>Tu as enregistré {pg2Count(n, 'trade')} · taux de réussite {fmtPct(stats.winRate, 1)}{rCount > 0 && <> · R moyen {fmtR(stats.avgR)}}}
{/* ── Agenda du jour + Habitudes + Actualités ── */}
{/* Agenda live */}
Agenda du jour
{/* Agenda non lu : le message, jamais « Aucun événement aujourd’hui » ;
les événements déjà chargés restent affichés sous le message.
Agenda pas encore lu (state.agendaLoaded faux) : un squelette,
la phrase « Aucun événement » n'est dite qu'une fois la réponse
arrivée (charte §7). */}
{agenda.length > 0 ? (
) : state.agendaError ? null : state.agendaLoaded === false ? (
) : (
Aucun événement aujourd’hui — ajoute-en depuis Routines.
)}
{/* Habitudes — même carte que sur mobile (HomeHabitsCard, plus bas) */}
{/* Actualités — flux RSS en direct (carte commune ordinateur / mobile, news.jsx) */}
{/* Raccourci de navigation : la période par défaut (« Ce mois »), comme le menu. */}
navStats('trading', 'month') : undefined}/>
);
}
// ─── Accueil : cartes « Vérifications avant trade » et « Habitudes » ───
// Définies UNE fois ici, utilisées telles quelles par Home (ordinateur) et par
// HomeMobile (app.jsx, chargé après) : `compact` ne change que les dimensions.
// Aucun calcul de série, de taux ni de date dans ce fichier : tout vient de
// useAppState et du moteur de design/state.jsx (docs/spec-habitudes.md §5, §8.3, §8.4).
const HOME_NBSP = ' ';
// Coche du jour depuis l'Accueil. toggleHabit (state.jsx) est optimiste et
// rétablit la case en cas d'échec : ici on ne garde que l'écriture en cours
// (aria-busy) et le message à afficher sous la ligne.
function useHomeHabitToggle(state) {
const [busy, setBusy] = React.useState({});
const [fail, setFail] = React.useState(null); // { id, text }
const pending = React.useRef({});
const alive = React.useRef(true);
React.useEffect(() => { alive.current = true; return () => { alive.current = false; }; }, []);
const toggle = async (id) => {
if (pending.current[id] || typeof state.toggleHabit !== 'function') return;
pending.current[id] = true;
setFail(null);
setBusy(b => ({ ...b, [id]: true }));
let res = null;
try { res = await state.toggleHabit(id); } catch (e) { res = { error: e }; }
delete pending.current[id];
if (!alive.current) {
// Accueil quitté pendant l'envoi : l'échec part vers l'avis commun de
// l'application (state.notifyWriteError), en nommant l'habitude.
if (res && res.error) {
const row = (state.habitRows || []).find(h => h.id === id);
const text = 'La coche de «' + HOME_NBSP + (row && row.name ? row.name : 'cette habitude') + HOME_NBSP + '» n’a pas été enregistrée. ' + sbErrorMessage(res.error);
if (typeof state.notifyWriteError === 'function') state.notifyWriteError(text);
else console.warn('[Tempo] ' + text);
}
return;
}
setBusy(b => { const n = { ...b }; delete n[id]; return n; });
if (res && res.error) setFail({ id, text: sbErrorMessage(res.error) });
};
return { busy, fail, toggle };
}
// Une ligne à cocher : toute la ligne est cliquable, le rôle et le clavier sont
// portés par la case (HabitCheck). Nom barré une fois coché, comme l'agenda.
// La case dessinée s'aligne sur le bord de la carte : sa zone de clic (32 px,
// 44 px sur mobile) déborde dans la marge.
function HomeHabitRow({ item, hook, compact, right, divider }) {
const done = !!item.d;
const fail = hook.fail && hook.fail.id === item.id ? hook.fail.text : null;
return (
);
}
// Pastille d'avancement : « 1 sur 2 », ou verte avec coche quand tout est fait.
// Rien à compter : pas de pastille.
function HomeHabitPill({ done, total, allText }) {
if (!total) return null;
const base = { padding: '3px 9px', fontSize: 11.5, whiteSpace: 'nowrap', flexShrink: 0 };
if (done >= total) return {Ico.check}{allText};
return {done} sur {total};
}
// Trois lignes de squelette, uniquement pendant le premier chargement.
function HomeHabitSkeleton({ label }) {
const bar = (w, h, r) => ;
return (
{['62%', '78%', '48%'].map((w, i) => (
{bar(20, 20, 6)}{bar(w, 10, 6)}
))}
);
}
// Lien d'en-tête ou de ligne (« Modifier › »). Sur mobile, la zone tactile fait 44 px.
function HomeCardLink({ onClick, compact, children }) {
return (
);
}
const HOME_CARD_TITLE = { fontSize: 14, fontWeight: 600, letterSpacing: '-.01em' };
// Carte « Vérifications avant trade » (§8.3). Elle informe, elle ne bloque
// pas : « Ajouter un trade » reste toujours actif.
function HomePretradeCard({ state, nav, openImport, compact = false }) {
const hook = useHomeHabitToggle(state);
const items = Array.isArray(state.pretradeItems) ? state.pretradeItems : [];
const done = items.filter(p => p.d).length;
const left = items.length - done;
const dayTrades = state.tradesByDay && state.today ? state.tradesByDay[state.today] : null;
const tradesToday = dayTrades && Array.isArray(dayTrades.trades) ? dayTrades.trades.length : 0;
const failed = !!state.habitsError;
const loading = !failed && !!state.habitsLoading && items.length === 0;
const empty = !failed && !loading && items.length === 0;
return (
Vérifications avant trade
{!loading && }
{failed && (
)}
{loading && }
{empty && (
Ajoute les points à contrôler avant chaque trade{HOME_NBSP}: stop placé, risque, annonces…
)}
{items.length > 0 && (
À valider avant ta première position du jour.
{tradesToday > 0 && left > 0 && (
Tu as déjà {tradesToday}{HOME_NBSP}trade{tradesToday > 1 ? 's' : ''} aujourd’hui et il reste {left}{HOME_NBSP}vérification{left > 1 ? 's' : ''}.
)}
{items.map(p => )}
)}
);
}
// Pied de la carte « Habitudes » : la semaine en cours, de lundi à dimanche.
// Chaque jour terminé porte sa fraction (faites/prévues) et la couleur de son
// niveau ; aujourd'hui est cerclé de bleu avec son compte du moment (discret :
// il n'entre dans aucun taux) ; les jours à venir sont en pointillés.
// Mêmes lignes et mêmes règles que Statistiques › Habitudes › Cette semaine,
// que le clic ouvre : habitudes ET vérifications avant trade. Ce périmètre est
// écrit sous le titre, car le haut de la carte ne liste que les habitudes.
function HomeHabitWeek({ state, navStats }) {
const { theme } = useTheme();
const today = state.today;
const ctx = state.habitCtx;
const rows = Array.isArray(state.habitRows) ? state.habitRows : [];
// Jours tradés inconnus : les vérifications ne sont pas comptées. En cours de
// chargement, la bande attend ; en échec, elle dit ce qu'elle exclut.
const tradesState = state.habitTradesState || 'ready';
const withChecks = rows.some(h => h.section === 'pretrade' && (!h.archived || h.archivedDay));
const ready = !!state.habitHistoryReady && !(withChecks && tradesState === 'loading');
const scope = !withChecks ? ''
: tradesState === 'error' ? 'Habitudes seulement' + HOME_NBSP + ': tes trades ne sont pas chargés, tes vérifications ne sont pas comptées.'
: 'Habitudes et vérifications avant trade, faites sur prévues.';
const week = React.useMemo(() => {
if (!today || !ctx) return null;
const start = habitWeekStart(today);
const days = [];
for (let i = 0; i < 7; i++) {
const iso = habitShiftDay(start, i);
days.push({ iso, tally: habitDayTally(rows, iso, ctx) });
}
return { days, stats: habitRangeStats(rows, start, habitShiftDay(today, -1), ctx) };
}, [rows, ctx, today]);
if (!week) return null;
const rateText = week.stats.rate === null ? '—' : fmtPct(week.stats.rate, 0);
const open = typeof navStats === 'function' ? () => navStats('habits', 'week') : null;
const body = (
Semaine en cours
Régularité{HOME_NBSP}
{ready
? {rateText}
: }
{scope && {scope}}
{week.days.map((d, i) => {
const t = d.tally;
const isToday = t.state === 'today';
const dayName = fmtDayLong(d.iso);
let look, text = '', tip, ink;
if (t.state === 'future') {
look = { background: 'transparent', border: '1px dashed var(--line-2)' };
tip = dayName + ' · à venir';
} else if (isToday) {
look = { background: 'var(--bg-card)', border: '1.5px solid var(--blue)', boxShadow: '0 0 0 2px rgba(59,130,246,.16)' };
// Compte du moment, comme la case du jour des Statistiques (« 3/3 · en cours »).
if (t.planned > 0) { text = t.done + '/' + t.planned; ink = 'var(--fg-2)'; }
tip = dayName + ' · aujourd’hui, en cours · ' + (t.planned > 0 ? t.done + ' sur ' + t.planned : 'rien de prévu');
} else if (!ready) {
look = { background: 'var(--bg-elev)', border: '1px solid transparent' };
tip = dayName;
} else if (t.state === 'counted') {
look = habitLevelStyle(t.level, theme);
text = t.done + '/' + t.planned;
tip = dayName + ' · ' + t.done + ' sur ' + t.planned + ' · ' + fmtPct((t.done / t.planned) * 100, 0);
} else {
look = habitLevelStyle(null, theme);
tip = dayName + ' · rien de prévu';
}
return (
{FR_WEEKDAYS_2[i]}{text}
);
})}
);
const wrap = { display: 'block', width: '100%', marginTop: 14, padding: '12px 0 0', borderTop: '1px solid var(--line)' };
if (!open) return
{body}
;
return (
);
}
// Carte « Habitudes » (§8.4) : ce qui est prévu aujourd'hui, à cocher, puis la
// semaine en cours.
function HomeHabitsCard({ state, nav, navStats, compact = false }) {
const hook = useHomeHabitToggle(state);
const groups = Array.isArray(state.habits) ? state.habits : [];
const total = groups.reduce((s, g) => s + g.items.length, 0);
const dueGroups = groups.map(g => ({ g: g.g, sec: g.sec, items: g.items.filter(it => it.due) })).filter(g => g.items.length > 0);
const due = dueGroups.reduce((s, g) => s + g.items.length, 0);
const done = dueGroups.reduce((s, g) => s + g.items.filter(it => it.d).length, 0);
const failed = !!state.habitsError;
const loading = !failed && !!state.habitsLoading && total === 0;
const empty = !failed && !loading && total === 0;
const ready = !!state.habitHistoryReady;
const today = state.today;
const ctx = state.habitCtx;
const rows = Array.isArray(state.habitRows) ? state.habitRows : [];
const goRoutines = () => nav && nav('routines');
// Oublis d'hier : même périmètre que la case d'hier de la bande « Semaine en
// cours » juste en dessous (habitudes et vérifications avant trade), pour que
// les deux chiffres se répondent (« 2 non cochées sur 6 » et « 4/6 »).
// Prochain jour prévu : habitudes de cette carte (Matin, Journée, Soir, actives).
const extra = React.useMemo(() => {
const out = { missed: 0, planned: 0, next: null };
if (!today || !ctx) return out;
const y = habitDayTally(rows, habitShiftDay(today, -1), ctx);
if (y.state === 'counted') { out.missed = y.planned - y.done; out.planned = y.planned; }
const own = rows.filter(h => !h.archived && h.section !== 'pretrade');
if (own.length === 0) return out;
for (let n = 1; n <= 7; n++) {
const iso = habitShiftDay(today, n);
if (own.some(h => habitIsDue(h, iso, ctx))) { out.next = { iso, n }; break; }
}
return out;
}, [rows, ctx, today]);
const tradesPending = state.habitTradesState === 'loading' && rows.some(h => h.section === 'pretrade' && (!h.archived || h.archivedDay));
const missed = ready && !tradesPending ? extra.missed : 0;
const weekdayLong = (iso) => FR_WEEKDAYS_LONG[FR_WEEKDAYS_SHORT.indexOf(fmtWeekdayShort(iso))] || '';
const showLinks = total > 0;
return (
);
}
// Carte d'indicateur (Accueil ordinateur et mobile). La couleur vient
// uniquement du conteneur (vert pour un gain, rouge pour une perte, var(--fg)
// sinon) : les compteurs animés en héritent. Formats : AnimatedMoney finit sur
// fmtMoney ; AnimatedNumber avec suffix « % » → fmtPct, « R » → fmtR.
// loading (facultatif) : squelette pendant le premier chargement.
function QuickStat({ label, value, isMoney, pos, neg, decimals, suffix, sub, display, loading }) {
return (
);
}
// Agenda du jour non lu (state.agendaError) : même message et même bouton que
// la carte Agenda de Routines (charte §7 : une lecture en échec n'est pas un
// agenda vide). Carte « Agenda du jour » de l'Accueil, ordinateur et mobile.
function HomeAgendaError({ state, style }) {
const mobile = usePg2Mobile();
if (!state || !state.agendaError) return null;
return (
Impossible de charger ton agenda. Vérifie ta connexion.
{typeof state.reloadAgenda === 'function' && (
)}
);
}
// Agenda du jour de l'Accueil (ordinateur et mobile). toggleAgenda (state.jsx)
// est optimiste et rétablit la case en cas d'échec : le message est affiché ici,
// seul point commun aux deux écrans (charte §7 : un échec n'est jamais silencieux).
function AgendaTimeline({ now, agenda, toggleAgenda, onLostError }) {
const events = agenda || [];
const [fail, setFail] = React.useState('');
const alive = React.useRef(true);
React.useEffect(() => { alive.current = true; return () => { alive.current = false; }; }, []);
const toggle = async (ev) => {
if (typeof toggleAgenda !== 'function') return;
setFail('');
let res = null;
try { res = await toggleAgenda(ev.id); } catch (e) { res = { error: e }; }
if (!(res && res.error)) return;
if (!alive.current) {
// Accueil quitté pendant l'envoi : avis commun de l'application.
if (typeof onLostError === 'function') onLostError('La coche de l’événement «' + HOME_NBSP + (ev.e || 'Événement') + HOME_NBSP + '» n’a pas été enregistrée. ' + sbErrorMessage(res.error));
return;
}
setFail('Impossible d’enregistrer «' + HOME_NBSP + (ev.e || 'Événement') + HOME_NBSP + '». ' + sbErrorMessage(res.error));
};
// Heure courante dans le fuseau du profil, comme les heures saisies dans
// l'agenda (le prop now ne sert qu'au rafraîchissement).
const [nh, nm] = tzNow().split(':').map(Number);
const nowMin = nh * 60 + nm;
return (
{events.map((e, i) => {
// Heure « HH:MM » saisie dans le fuseau du profil ; illisible → pas de surbrillance.
const [h, m] = String(e.h || '').split(':').map(Number);
const eventMin = h * 60 + m;
const isActive = Number.isFinite(eventMin) && Math.abs(eventMin - nowMin) <= 30 && !e.done;
return (
{e.h || '—'}
{/* Zone de clic : 20 px autour du point, 44 px sous 900 px de large
(.agenda-hit, index.html) ; les marges négatives la laissent
sans effet sur la mise en page. */}
{i < events.length - 1 && }
);
}
// ─── Tableau de trades (Accueil, fenêtre du jour, page Trades) ────
// Un seul composant, colonnes de la charte (§5) : Date · Symbole · Sens ·
// Entrée · Sortie · Quantité · Stratégie · R · P&L. Chaque écran choisit les
// siennes. En-têtes en casse de phrase : les capitales viennent du CSS.
// `width` : gabarit de la colonne. `fit` : gabarit quand les lignes sont
// solidaires de l'en-tête (PG2_SUBGRID), la largeur d'une colonne se calculant
// alors sur toutes les lignes :
// Date : jamais plus étroite que la date la plus longue (« 30 sept. · 16:45 »
// ne se tronque pas quand les montants prennent la place) ;
// Entrée, Sortie, Quantité : juste leur contenu (max-content) — la place
// qu'elles n'utilisent pas revient à la Date et à la Stratégie ;
// P&L : toujours son contenu en entier (un montant à 7 chiffres ne déborde
// pas sur le R, charte §9), avec un plancher de 92 px (`minWidth`).
const PG2_TRADE_COLUMNS = {
date: { label: 'Date', width: 'minmax(96px, 132px)', fit: 'minmax(max-content, 132px)' },
symbol: { label: 'Symbole', width: 'minmax(64px, 96px)' },
side: { label: 'Sens', width: '40px' },
entry: { label: 'Entrée', width: 'minmax(64px, 104px)', fit: 'minmax(64px, max-content)', align: 'right' },
exit: { label: 'Sortie', width: 'minmax(64px, 104px)', fit: 'minmax(64px, max-content)', align: 'right' },
lots: { label: 'Quantité', width: 'minmax(64px, 80px)', fit: 'minmax(64px, max-content)', align: 'right' },
// Retrait à gauche : la Stratégie ne se lit pas collée à la Quantité (alignée
// à droite). 112 px au moins, dont 100 utiles : « Breakout VWAP » tient.
strategy: { label: 'Stratégie', width: 'minmax(112px, 1fr)', padLeft: 12 },
r: { label: 'R', width: 'minmax(64px, 80px)', align: 'right' },
pnl: { label: 'P&L', width: 'minmax(92px, 124px)', fit: 'max-content', minWidth: 92, align: 'right' },
};
const PG2_COLS_COMPACT = ['date', 'symbol', 'side', 'entry', 'exit', 'strategy', 'r', 'pnl'];
const PG2_COLS_FULL = ['date', 'symbol', 'side', 'entry', 'exit', 'lots', 'strategy', 'r', 'pnl'];
const PG2_COLS_NARROW = ['date', 'symbol', 'side', 'pnl'];
const PG2_COLS_HOME = ['date', 'symbol', 'side', 'strategy', 'r', 'pnl'];
// Accueil (carte à côté des raccourcis) : la date « 25 sept. · 18:17 » tient en
// 112 px ; la place gagnée va à la Stratégie, qui ne se tronque plus.
const PG2_WIDTHS_HOME = { date: 'minmax(96px, 112px)' };
// Fenêtre du jour (880 px) : Entrée et Sortie resserrées, la place gagnée va à
// la Stratégie (« Open Reversal » en entier).
const PG2_WIDTHS_DAY = { date: 'minmax(96px, 112px)', entry: 'minmax(64px, 88px)', exit: 'minmax(64px, 88px)' };
// Lignes solidaires de l'en-tête (subgrid) : une colonne en max-content se
// calcule sur TOUTES les lignes, les pastilles et montants restent alignés.
// Navigateur sans subgrid : grille indépendante par ligne (comportement d'avant).
const PG2_SUBGRID = (() => {
try { return typeof CSS !== 'undefined' && CSS.supports && CSS.supports('grid-template-columns', 'subgrid'); } catch (e) { return false; }
})();
// Enveloppes de structure (role=row, role=cell) d'une ligne de trade : sans
// boîte propre, la ligne-bouton reste l'élément de grille.
const PG2_ROW_WRAP = { display: 'contents' };
function pg2SignClass(v) {
if (v === null || v === undefined || v === '') return '';
const n = Number(v);
return n > 0 ? 'pos' : n < 0 ? 'neg' : '';
}
// Nom d'une ligne de trade pour un lecteur d'écran. La ligne est un bouton : son
// nom remplace son contenu, il dit donc tout ce que la ligne montre, colonne
// nommée, avec les formateurs des cellules (une valeur absente est omise) :
// « Ouvrir le trade GBPUSD du 9 oct. · 18:17 : Vente, entrée 1,11573, sortie
// 1,11411, quantité 0,5, stratégie Breakout VWAP, −0,58 R, P&L −46,40 $ ».
// Le début (« Ouvrir le trade SYMBOLE du DATE ») ne change pas.
function pg2TradeRowLabel(t, cols, showSource) {
const head = `Ouvrir le trade ${t.symbol || ''} du ${fmtDateTime(t.executed_at)}`;
const parts = [];
const add = (prefix, text) => { if (text && text !== '—') parts.push(prefix + text); };
const digits = priceDigitsOf(t.entry, t.exit_price);
for (const k of cols) {
if (k === 'side') add('', t.direction === 'short' ? 'Vente' : 'Achat');
else if (k === 'entry') add('entrée ', fmtPrice(t.entry, digits));
else if (k === 'exit') add('sortie ', fmtPrice(t.exit_price, digits));
else if (k === 'lots') add('quantité ', fmtLots(t.lots));
else if (k === 'strategy') add('stratégie ', t.setup ? String(t.setup) : '');
else if (k === 'r') add('', fmtR(t.r_multiple));
else if (k === 'pnl') add('P&L ', fmtMoney(t.pnl, true));
}
if (showSource) add('source ', tradeSourceLabel(t.imported_from));
return parts.length ? head + '\u00A0: ' + parts.join(', ') : head;
}
// `widths` (optionnel) : largeurs de colonnes propres à un écran, { clé: gabarit
// CSS grid }, qui remplacent celles de PG2_TRADE_COLUMNS (tableaux étroits).
// `ariaLabel` : nom du tableau pour un lecteur d'écran.
// Le tableau est mémorisé (React.memo, TradeTableMemo) : il n'est redessiné que
// si ses props changent. TradeTable, que les écrans appellent, lui ajoute
// `fmtKey`, la signature des préférences d'affichage (devise, fuseau, jour
// courant) : les changer redessine les lignes même si la liste est la même.
// Structure lue : tableau > ligne d'en-têtes (columnheader) puis une ligne par
// trade, dont l'unique cellule contient la ligne-bouton. Les enveloppes
// (row, cell) sont en display: contents : la mise en page (grille, subgrid)
// reste celle de la ligne-bouton.
const TradeTableMemo = React.memo(function TradeTableMemo({ trades, columns, openTrade, openJournal, showSource, chevron, padX = 4, headerStyle, widths, ariaLabel = 'Trades' }) {
const cols = (columns || PG2_COLS_COMPACT).filter(k => PG2_TRADE_COLUMNS[k]);
const hasFlex = cols.includes('strategy');
// Gabarit d'une colonne, dans l'ordre : largeur propre à l'écran (`widths`) ;
// sans colonne Stratégie, le P&L prend la place restante ; lignes solidaires
// de l'en-tête → `fit` (largeur du contenu, calculée sur toutes les lignes) ;
// sinon `width` (grille indépendante par ligne : un max-content désalignerait
// les colonnes d'une ligne à l'autre).
const colWidth = (k) => {
const c = PG2_TRADE_COLUMNS[k];
if (widths && widths[k]) return widths[k];
if (k === 'pnl' && !hasFlex) return 'minmax(92px, 1fr)';
return (PG2_SUBGRID && c.fit) || c.width;
};
// Plancher d'une colonne en max-content (P&L) : porté par ses cellules,
// en-tête compris.
const colMin = (k) => (PG2_SUBGRID && colWidth(k) === 'max-content' && PG2_TRADE_COLUMNS[k].minWidth) || 0;
const template = cols.map(colWidth).join(' ') + (chevron ? ' 16px' : '');
const open = (t) => {
if (openTrade) return openTrade(t);
if (openJournal) return openJournal(t.executed_at);
};
const cell = (k, t) => {
switch (k) {
case 'date': return (
{fmtDateTime(t.executed_at)}
{/* width 0 + minWidth 100 % : la source remplit la colonne sans l'élargir
(seule la date fixe la largeur minimale de la colonne). */}
{showSource &&
{tradeSourceLabel(t.imported_from)}
}
);
case 'symbol': return {t.symbol || '—'};
case 'side': {
const sell = t.direction === 'short';
return (
{sell ? 'V' : 'A'}
);
}
case 'entry': return {fmtPrice(t.entry, priceDigitsOf(t.entry, t.exit_price))};
case 'exit': return {fmtPrice(t.exit_price, priceDigitsOf(t.entry, t.exit_price))};
case 'lots': return {fmtLots(t.lots)};
// Un nom vraiment long reste tronqué : l'infobulle le donne en entier.
case 'strategy': return {t.setup || '—'};
case 'r': return {fmtR(t.r_multiple)};
case 'pnl': return {fmtMoney(t.pnl, true)};
default: return null;
}
};
const rowGrid = PG2_SUBGRID
? { gridColumn: '1 / -1', display: 'grid', gridTemplateColumns: 'subgrid' }
: { display: 'grid', gridTemplateColumns: template };
return (
);
});
function TradeTable(props) {
const fmtKey = [window.__appCurrency, window.__appTz, todayISO()].join('|');
return ;
}
// Tuile de raccourci : nom et description lus dans NAV_LABELS (core.jsx).
function NavTile({ nav, to, onClick }) {
const l = pg2Nav(to);
const title = l.titre || l.menu || '';
const ico = l.ico || Ico[to] || Ico.chev;
return (
);
}
// ─── JOURNAL QUOTIDIEN ────────────────────────────────────────────
const PG2_DAYS_PAGE = 30;
// Liste des jours du Journal quotidien, COMMUNE à l'ordinateur (Daily) et au
// mobile (DailyMobile, app.jsx) : jours tradés, jours avec un journal (notes ou
// humeur) ou des captures, et aujourd'hui en tête. « Tous » montre cette union,
// « Avec trades » les seuls jours tradés. Affichage par pages de 30 jours
// (« Afficher 30 jours de plus »). Le profit factor garde Infinity (jour sans
// perte → « ∞ ») et vaut null quand il n'a pas de sens (que des nuls → « — »).
// Sans la liste des journaux (lecture en échec), les jours tradés restent là.
function useDailyDays(state, tab) {
const tradesByDay = (state && state.tradesByDay) || {};
const today = (state && state.today) || todayISO();
const journalDays = (state && state.journalDays) || null;
const uid = state && state.user ? state.user.id : null;
const [limit, setLimit] = React.useState(PG2_DAYS_PAGE);
React.useEffect(() => {
if (uid && state && typeof state.loadJournalDays === 'function') state.loadJournalDays();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [uid]);
React.useEffect(() => { setLimit(PG2_DAYS_PAGE); }, [tab]);
const all = React.useMemo(() => {
const set = new Set(Object.keys(tradesByDay));
if (journalDays) Object.keys(journalDays).forEach(d => set.add(d));
set.add(today);
return Array.from(set).sort().reverse().map(day => {
const data = tradesByDay[day] || { trades: [], pnl: 0, wins: 0, losses: 0 };
const trades = data.trades || [];
let totalWin = 0, totalLoss = 0;
for (const t of trades) {
const p = Number(t.pnl) || 0;
if (p > 0) totalWin += p;
else if (p < 0) totalLoss += Math.abs(p);
}
const pnl = Number(data.pnl) || 0;
return {
day, // ISO date
p: pnl, pnl,
t: trades.length,
w: data.wins || 0,
l: data.losses || 0,
wr: trades.length > 0 ? ((data.wins || 0) / trades.length) * 100 : null,
pf: totalLoss > 0 ? totalWin / totalLoss : (totalWin > 0 ? Infinity : null),
journal: (journalDays && journalDays[day]) || null,
};
});
}, [tradesByDay, journalDays, today]);
const filtered = all.filter(d => tab === 'all' || d.t > 0);
const visible = filtered.slice(0, limit);
return {
visible,
more: Math.max(0, filtered.length - visible.length),
showMore: () => setLimit(l => l + PG2_DAYS_PAGE),
// Rien à montrer : ni trade ni journal (la carte d'aujourd'hui, vide, ne compte pas).
empty: all.every(d => d.t === 0 && !d.journal),
};
}
// Repères d'un journal rempli sur la carte d'un jour : « Notes · Humeur 4/5 · 2 captures ».
function dailyJournalBits(j) {
if (!j) return [];
const bits = [];
if (j.notes) bits.push('Notes');
if (j.mood != null) bits.push('Humeur ' + j.mood + '/5');
if (j.captures > 0) bits.push(j.captures + ' capture' + (j.captures > 1 ? 's' : ''));
return bits;
}
// Bouton « Afficher 30 jours de plus » (ordinateur et mobile).
function DailyMoreButton({ more, onMore, style }) {
if (!more) return null;
const n = Math.min(more, PG2_DAYS_PAGE);
return (
);
}
function Daily({ nav, openJournal, openImport, state }) {
const [tab, setTab] = React.useState('all');
const { tradesLoading, today } = state || { tradesLoading: false, today: todayISO() };
const { visible, more, showMore, empty } = useDailyDays(state, tab);
const addTrade = () => openImport && openImport(null, 'manual');
// Rien à afficher : aucun trade ni journal (la carte d'aujourd'hui, vide, est toujours là).
const noTrades = empty;
// Aucune carte à l'écran : compte sans rien, ou filtre « Avec trades » sans
// jour tradé. Tant que les trades se chargent (ou si leur lecture a échoué),
// on ne peut pas dire « aucun jour avec trades » : squelette, ou message
// d'indisponibilité.
const nothingShown = noTrades || visible.length === 0;
return (
{/* Filtres et action d'en-tête : seulement quand il y a des jours à filtrer
(sinon l'état vide porte seul l'action principale). */}
{!noTrades &&
{Ico.plus} Ajouter un trade,
]}
/>
}
{tradesLoading && nothingShown ? (
{[0, 1, 2].map(i => (
))}
) : nothingShown && state?.tradesError ? (
) : noTrades ? (
) : visible.length === 0 ? (
// Filtre « Avec trades » sans aucun jour tradé (le compte n'a que des
// journaux) : la page le dit, au lieu de rester blanche sous les filtres.
setTab('all')}/>
) : (
{visible.map(d => (
))}
)}
);
}
// Filtre « Avec trades » qui ne retient aucun jour : état vide commun à
// l'ordinateur (Daily) et au mobile (DailyMobile, app.jsx). Une seule action,
// secondaire : « Ajouter un trade » est déjà dans la barre de filtres (charte
// §7 : une action principale par écran).
// `compact` : par défaut, resserré sur mobile comme les autres états vides.
function DailyFilterEmpty({ onAll, compact }) {
const mobile = usePg2Mobile();
return (
);
}
// Indicateurs d'un jour : pistes d'au moins 112 px séparées de 16 px, le P&L
// en occupant deux. Les quatre tiennent sur une ligne à partir de 5 pistes.
const PG2_DAY_TRACK = 112;
const PG2_DAY_GAP = 16;
const PG2_DAY_ONE_ROW = 5 * PG2_DAY_TRACK + 4 * PG2_DAY_GAP;
// En pile (P&L au-dessus), les trois autres indicateurs demandent trois pistes
// de 104 px. En dessous (fenêtre de 900 à 989 px, menu latéral déplié), trois
// pistes proportionnées à leur contenu — « Trades » est court, « Taux de
// réussite » porte « 12 G · 10 P » — plutôt que deux pistes et un indicateur
// seul sur une troisième ligne.
const PG2_DAY_STACK_TRACK = 104;
const PG2_DAY_STACK_ROW = 3 * PG2_DAY_STACK_TRACK + 2 * PG2_DAY_GAP;
const PG2_DAY_STACK_TIGHT = 'minmax(0, 0.55fr) minmax(0, 1.2fr) minmax(0, 1fr)';
// Carte d'un jour : les mêmes indicateurs que l'Accueil (P&L, trades, taux de
// réussite avec « G · P », profit factor). La carte mesure la place réelle de
// ses indicateurs (fenêtre étroite, menu latéral déplié ou non) : quand ils ne
// tiennent pas sur une ligne, le P&L occupe la première et les trois autres se
// rangent dessous, côte à côte — plus de ligne bancale (deux indicateurs à
// côté du P&L, le troisième seul en dessous), jamais un montant tronqué.
// Toutes les cartes ayant la même largeur, les colonnes restent alignées d'une
// carte à l'autre.
function DayJournalCard({ day, highlight, openJournal, openImport }) {
const [zoneRef, zoneW] = usePgWidth();
// usePgWidth arrondit au pixel : 1 px de marge, pour ne jamais annoncer cinq
// pistes quand il n'y a la place que pour quatre.
const stacked = zoneW > 0 && zoneW < PG2_DAY_ONE_ROW + 1;
const tight = stacked && zoneW < PG2_DAY_STACK_ROW + 1;
const hasTrades = day.t > 0;
const tone = day.p > 0 ? 'pos' : (day.p < 0 ? 'neg' : null);
const nuls = Math.max(0, day.t - (day.w || 0) - (day.l || 0));
const journalBits = dailyJournalBits(day.journal);
return (
{/* Le nom dit le jour (comme sur téléphone et dans les Statistiques) :
hors de sa carte, « Journal » seul ne désigne rien. */}
);
}
// `span` : nombre de pistes occupées, ou 'all' pour toute la ligne.
function DayMetric({ label, value, sub, tone, big, span }) {
const color = tone === 'pos' ? 'var(--green)' : (tone === 'neg' ? 'var(--red)' : 'var(--fg)');
return (
{label}
{value}
{sub &&
{sub}
}
);
}
// ─── Fenêtre du jour : Statistiques / Notes / Trades / Captures ───
function JournalModal({ open, dayISO, onClose, state, openImport, openTrade }) {
const [tab, setTab] = React.useState('stats');
const [notes, setNotesLocal] = React.useState('');
const [mood, setMoodLocal] = React.useState(null);
const [attachments, setAttachments] = React.useState([]);
// Lecture du journal : { day, ok } une fois terminée (réussie ou non), null
// pendant la lecture. Le jour est mémorisé avec le résultat pour que rien de
// ce qui a été lu pour un jour ne puisse passer pour le journal d'un autre.
const [loaded, setLoaded] = React.useState(null);
// Notes ou humeur « non enregistrées » : { day, notes ?, mood ?, last } levé à
// chaque échec d'enregistrement, baissé au succès (charte §7 : un échec n'est
// jamais silencieux, et ce qui a été saisi n'est jamais perdu sans le dire).
const [unsaved, setUnsaved] = React.useState(null);
const unsavedRef = React.useRef(null);
// Enregistrements en cours d'attente (fermeture ou changement de jour).
const [settling, setSettling] = React.useState(false);
// Même drapeau, lisible tout de suite (avant le rendu suivant) par la saisie,
// et attente en cours partagée : deux demandes simultanées (flèche puis
// « Fermer ») attendent la même fin au lieu de se marcher dessus.
const settlingRef = React.useRef(false);
const settleRun = React.useRef(null);
const inflight = React.useRef(new Set());
// Frappe en attente de sauvegarde automatique : { save } — l'enregistrement
// du texte tapé, sur le jour où il a été tapé (et avec le compte de ce
// moment-là). null quand rien n'attend.
const pendingNotes = React.useRef(null);
// Numéro du dernier enregistrement de chaque champ (un résultat plus ancien
// ne fait pas foi) ; epoch change quand la saisie est abandonnée.
const saveSeq = React.useRef({ notes: 0, mood: 0, epoch: 0 });
const [reloadKey, setReloadKey] = React.useState(0);
const [uploading, setUploading] = React.useState(false);
const [drag, setDrag] = React.useState(false);
const [previews, setPreviews] = React.useState({}); // file_path → signedUrl
const [attachError, setAttachError] = React.useState('');
const [confirmAttach, setConfirmAttach] = React.useState(null); // id de la capture à supprimer
const [removingAttach, setRemovingAttach] = React.useState(null);
const [viewer, setViewer] = React.useState(null); // id de la capture ouverte en grand
// Internal navigation state seeded from the dayISO prop. Updating this with the prev/next
// arrows shifts the viewed day without closing the modal.
const [currentDay, setCurrentDay] = React.useState(dayISO || null);
const inputRef = React.useRef(null);
const saveTimer = React.useRef(null);
const urlAsked = React.useRef({}); // file_path → instant de la dernière demande d'adresse signée
const isMobile = usePg2Mobile();
// Jour affiché, lisible après une attente (envoi ou suppression de capture) :
// null quand la fenêtre est fermée.
const dayRef = React.useRef(null);
dayRef.current = open ? currentDay : null;
// Le journal du jour AFFICHÉ est-il lu ? Sinon (lecture en cours ou en échec)
// rien n'est affiché ni modifiable : ni notes, ni humeur, ni captures. Une
// saisie sur un journal non lu écraserait ce qui est enregistré.
const loadedHere = !!(open && currentDay && loaded && loaded.day === currentDay);
const journalReady = loadedHere && loaded.ok;
const journalError = loadedHere && !loaded.ok;
const loadingJournal = !journalReady && !journalError;
const markUnsaved = (u) => { unsavedRef.current = u; setUnsaved(u); };
// Enregistre les notes ('notes') ou l'humeur ('mood') d'un jour. Renvoie une
// promesse (jamais rejetée) de réussite. Un échec lève le drapeau « non
// enregistré » : le pied de la fenêtre le dit et propose de réessayer
// (setDayJournal* renvoient { error }).
const saveJournal = (day, what, value) => {
const fn = state && (what === 'mood' ? state.setDayJournalMood : state.setDayJournalNotes);
if (typeof fn !== 'function' || !day) return Promise.resolve(true);
const seq = ++saveSeq.current[what];
const epoch = saveSeq.current.epoch;
const p = (async () => {
let r;
try { r = await fn(day, value); } catch (e) { r = { error: e }; }
const failed = !!(r && r.error);
if (failed) console.warn('[Tempo] journal du jour :', (r.error && r.error.message) || r.error);
// Résultat périmé : un enregistrement plus récent du même champ fait foi,
// ou la saisie a été abandonnée entre-temps.
if (epoch !== saveSeq.current.epoch || seq !== saveSeq.current[what]) return !failed;
const cur = unsavedRef.current && unsavedRef.current.day === day ? unsavedRef.current : null;
if (failed) {
markUnsaved({ ...(cur || { day }), [what]: value, last: what });
} else if (cur && what in cur) {
const next = { ...cur };
delete next[what];
const left = 'notes' in next ? 'notes' : 'mood' in next ? 'mood' : null;
markUnsaved(left ? { ...next, last: left } : null);
}
return !failed;
})();
inflight.current.add(p);
p.then(() => { inflight.current.delete(p); });
return p;
};
// Notes en attente de sauvegarde automatique : enregistrées avant de changer
// de jour ou de fermer. Ce qui part est la frappe en attente elle-même (son
// jour, son texte), jamais le jour ni le texte du rendu courant : après un
// changement de jour, ceux-ci sont ceux d'un AUTRE journal.
const flushNotes = () => {
if (saveTimer.current) { clearTimeout(saveTimer.current); saveTimer.current = null; }
const p = pendingNotes.current;
if (!p) return;
pendingNotes.current = null;
p.save();
};
const hasPendingSave = () => !!pendingNotes.current || inflight.current.size > 0 || !!unsavedRef.current;
// Attend que plus rien ne soit en route : une frappe en attente part tout de
// suite, et on recommence tant qu'il en arrive une ou qu'un enregistrement
// est en cours.
const drainSaves = async () => {
do {
flushNotes();
await Promise.all(Array.from(inflight.current));
} while (pendingNotes.current || inflight.current.size);
};
// Termine tout ce qui reste à enregistrer : notes en attente, enregistrements
// en cours, puis une nouvelle tentative pour ce qui a échoué. Renvoie true
// quand tout est enregistré. Pendant l'attente, notes et humeur ne sont plus
// modifiables (settling) : rien ne peut être tapé puis perdu.
const settleSaves = () => {
if (settleRun.current) return settleRun.current;
settlingRef.current = true;
setSettling(true);
const run = (async () => {
try {
await drainSaves();
const u = unsavedRef.current;
if (u) {
const jobs = [];
if ('notes' in u) jobs.push(saveJournal(u.day, 'notes', u.notes));
if ('mood' in u) jobs.push(saveJournal(u.day, 'mood', u.mood));
await Promise.all(jobs);
await drainSaves();
}
return !unsavedRef.current;
} finally {
settleRun.current = null;
settlingRef.current = false;
setSettling(false);
}
})();
settleRun.current = run;
return run;
};
// Abandon confirmé (ou fenêtre fermée) : plus rien n'est en attente, et un
// résultat qui arriverait encore ne relève plus le drapeau.
const abandonSaves = () => {
if (saveTimer.current) { clearTimeout(saveTimer.current); saveTimer.current = null; }
pendingNotes.current = null;
saveSeq.current.epoch++;
if (unsavedRef.current) markUnsaved(null);
};
// Une saisie non enregistrée (échec, ou enregistrement encore en cours) fait
// poser la question « Abandonner ta saisie ? » avant de fermer.
const isDirty = !!(open && (unsaved || settling));
const dirtyShown = React.useRef(false);
dirtyShown.current = isDirty;
// Fermeture demandée par la modale. Saisie déjà signalée comme non
// enregistrée : on arrive ici par « Abandonner », la fenêtre se ferme. Sinon
// la fenêtre attend l'enregistrement en cours ; s'il échoue, elle reste
// ouverte sur le jour, avec le message et « Réessayer » dans le pied.
const closeJournal = async () => {
if (dirtyShown.current) { abandonSaves(); if (onClose) onClose(); return; }
if (!hasPendingSave()) { if (onClose) onClose(); return; }
const epoch = saveSeq.current.epoch;
const ok = await settleSaves();
if (ok && epoch === saveSeq.current.epoch && onClose) onClose();
};
const modal = useModalBehavior({ open, onRequestClose: closeJournal, isDirty, labelledBy: 'journal-modal-title' });
// Croix et bouton « Fermer » : une saisie non enregistrée est d'abord
// relancée ; si elle passe, la fenêtre se ferme sans rien demander.
const askClose = async () => {
// Plus rien en attente : la fenêtre se ferme, même si la question
// « Abandonner ta saisie ? » est encore à l'écran (elle n'a plus d'objet).
if (!hasPendingSave()) { if (onClose) onClose(); return; }
if (unsavedRef.current && !settlingRef.current) {
const epoch = saveSeq.current.epoch;
const ok = await settleSaves();
if (epoch !== saveSeq.current.epoch) return;
if (ok) { if (onClose) onClose(); return; }
}
modal.requestClose();
};
// La question « Abandonner ta saisie ? » ne reste pas quand il n'y a plus rien
// à abandonner (« Réessayer » réussi pendant qu'elle était affichée) : elle
// est retirée et le focus revient où il était (le bouton « Réessayer », lui,
// a disparu). Sans cela, la croix et « Fermer » resteraient inertes.
const staleConfirm = !!(open && !isDirty && modal.confirmDiscard);
React.useEffect(() => {
if (staleConfirm) modal.keepEditing();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [staleConfirm]);
const retrySaves = () => { settleSaves(); };
const saveError = !unsaved ? ''
: ('notes' in unsaved && 'mood' in unsaved) ? 'Notes et humeur non enregistrées. Vérifie ta connexion.'
: 'mood' in unsaved ? 'Humeur non enregistrée. Vérifie ta connexion.'
: 'Notes non enregistrées. Vérifie ta connexion.';
// When the modal is (re)opened from a calendar cell, snap currentDay back to that prop.
React.useEffect(() => {
if (open && dayISO) setCurrentDay(dayISO);
}, [open, dayISO]);
React.useEffect(() => {
setAttachError(''); setConfirmAttach(null); setRemovingAttach(null); setViewer(null);
// Le drapeau « non enregistré » n'est PAS effacé au changement de jour : on
// ne quitte un jour qu'une fois sa saisie enregistrée (shiftDay). Fenêtre
// fermée : plus rien n'est en attente. Fermeture décidée ailleurs (changement
// de compte) avec une frappe encore en attente : elle part d'abord, sur son
// jour et avec le compte du moment de la frappe, au lieu d'être jetée (après
// « Abandonner », abandonSaves l'a déjà retirée : rien ne part).
if (!open) { flushNotes(); abandonSaves(); }
}, [open, currentDay]);
React.useEffect(() => {
// Rien du jour précédent ne reste sous le titre du nouveau jour (ni à la
// réouverture) : notes, humeur, captures et vignettes repartent de zéro. Les
// notes en attente du jour quitté sont déjà parties (flushNotes).
setLoaded(null);
setNotesLocal('');
setMoodLocal(null);
setAttachments([]);
setPreviews({});
urlAsked.current = {};
if (!open || !currentDay || !state) return undefined;
let live = true;
const day = currentDay;
(async () => {
try {
const [journal, atts] = await Promise.all([
state.getDayJournal(day),
state.getDayAttachments(day),
]);
if (!live) return;
setNotesLocal(journal?.notes || '');
setMoodLocal(journal?.mood ?? null);
setAttachments(atts || []);
setLoaded({ day, ok: true });
// Adresses signées : vignettes des images, lien des autres fichiers.
(atts || []).forEach(async (a) => {
if (!a.file_path) return;
urlAsked.current[a.file_path] = Date.now();
const url = await state.getAttachmentUrl(a.file_path);
if (url && live) setPreviews(prev => ({ ...prev, [a.file_path]: url }));
});
} catch (e) {
console.warn('[Tempo] journal du jour :', (e && e.message) || e);
if (!live) return;
// Échec de chargement : on n'affiche pas un journal vide (une saisie
// écraserait les notes existantes) mais un message avec Réessayer.
setLoaded({ day, ok: false });
}
})();
return () => { live = false; };
}, [open, currentDay, reloadKey]);
if (!open) return null;
// Shift currentDay by N days (negative for previous, positive for next).
// Jamais au-delà d'aujourd'hui (fuseau du profil) : on ne tient pas le
// journal d'un jour qui n'a pas eu lieu (même règle que « Ajouter des trades »).
const todayDay = todayISO();
const canNext = !!currentDay && currentDay < todayDay;
const shiftDay = (delta) => {
if (!currentDay) return;
if (delta > 0 && !canNext) return;
// Parse YYYY-MM-DD as a UTC date to avoid DST surprises on add/subtract, then format back.
const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(currentDay);
if (!m) return;
const d = new Date(Date.UTC(+m[1], +m[2] - 1, +m[3]));
d.setUTCDate(d.getUTCDate() + delta);
const y = d.getUTCFullYear();
const mo = String(d.getUTCMonth() + 1).padStart(2, '0');
const da = String(d.getUTCDate()).padStart(2, '0');
const next = `${y}-${mo}-${da}`;
const go = () => setCurrentDay(next > todayDay ? todayDay : next);
if (!hasPendingSave()) { go(); return; }
// Les notes en attente partent d'abord, pour appartenir au jour quitté ; un
// enregistrement en échec est relancé. S'il échoue encore, on reste sur le
// jour : le pied de la fenêtre le dit et propose « Réessayer ».
const from = currentDay;
const epoch = saveSeq.current.epoch;
settleSaves().then((ok) => {
if (ok && epoch === saveSeq.current.epoch && dayRef.current === from) go();
});
};
const debouncedSaveNotes = (v) => {
if (!journalReady || settlingRef.current) return;
setNotesLocal(v);
if (saveTimer.current) clearTimeout(saveTimer.current);
const day = currentDay;
pendingNotes.current = { save: () => saveJournal(day, 'notes', v) };
saveTimer.current = setTimeout(flushNotes, 500);
};
const setMood = (v) => {
if (!journalReady || settlingRef.current) return;
setMoodLocal(v);
saveJournal(currentDay, 'mood', v);
};
// « du mar. 6 oct. » : précise le jour d'un message arrivé après un changement de jour.
const dayMention = (day) => ' du ' + fmtWeekdayShort(day) + ' ' + fmtDayShort(day);
// Ajoute les captures une par une (l'état « Envoi… » couvre tout le lot).
// L'envoi appartient au jour où il a été lancé : s'il se termine après un
// changement de jour, la fenêtre du jour affiché n'est pas touchée (le cache
// du jour d'origine, lui, est à jour : la capture y sera au retour).
const addFiles = async (list) => {
const files = Array.from(list || []);
if (!files.length || !state || !journalReady) return;
const day = currentDay;
const sameDay = () => dayRef.current === day;
const refused = []; // { name, why }
// Un seul fichier : message court. Plusieurs : une ligne par refus, qui nomme
// le fichier. Jour changé entre-temps : le jour concerné est précisé.
const refusedText = () => refused.map(r => (
sameDay()
? (files.length > 1 ? 'Impossible d’ajouter la capture « ' + r.name + ' » : ' : 'Impossible d’ajouter la capture : ')
: 'Impossible d’ajouter la capture « ' + r.name + ' » au journal' + dayMention(day) + ' : '
) + r.why).join('\n');
setAttachError('');
setUploading(true);
for (const f of files) {
let res;
try { res = await state.uploadDayAttachment(day, f); } catch (e) { res = { error: e }; }
const error = res && res.error;
if (error || !res || !res.data) {
console.warn('[Tempo] envoi de capture', error);
refused.push({ name: (f && f.name) || 'fichier', why: sbErrorMessage(error || {}) });
if (dayRef.current) setAttachError(refusedText());
continue;
}
const data = res.data;
if (!sameDay()) continue;
setAttachments(prev => [data, ...prev.filter(a => a.id !== data.id)]);
if (data.file_path) {
urlAsked.current[data.file_path] = Date.now();
const url = await state.getAttachmentUrl(data.file_path);
if (url && sameDay()) setPreviews(prev => ({ ...prev, [data.file_path]: url }));
}
}
setUploading(false);
};
const pickFiles = () => { if (!uploading && journalReady && inputRef.current) inputRef.current.click(); };
// Suppression confirmée : la vignette ne disparaît qu'une fois la
// suppression faite ; en cas d'échec, message en ligne.
const removeAttach = async (id) => {
if (removingAttach || !journalReady) return;
const att = attachments.find(a => a.id === id);
const day = currentDay;
setRemovingAttach(id);
setAttachError('');
let res;
try { res = await state.deleteDayAttachment(day, id); } catch (e) { res = { error: e }; }
const error = res && res.error;
if (error) console.warn('[Tempo] suppression de capture', error);
// Jour changé pendant l'attente : la fenêtre affiche un autre journal, on
// n'y touche pas (seul un échec est signalé, avec le jour concerné).
if (dayRef.current !== day) {
if (error && dayRef.current) {
setAttachError('Impossible de supprimer la capture' + (att && att.file_name ? ' « ' + att.file_name + ' »' : '') + ' du journal' + dayMention(day) + ' : ' + sbErrorMessage(error));
}
return;
}
setRemovingAttach(null);
if (error) {
setAttachError('Impossible de supprimer la capture : ' + sbErrorMessage(error));
return;
}
setConfirmAttach(null);
setAttachments(prev => prev.filter(a => a.id !== id));
if (att) setPreviews(prev => { const n = { ...prev }; delete n[att.file_path]; return n; });
};
// Une adresse signée dure une heure : si une image ne s'affiche plus, on en
// redemande une (au plus une fois par minute et par fichier).
const refreshPreview = async (a) => {
if (!a || !a.file_path || !state) return;
if (Date.now() - (urlAsked.current[a.file_path] || 0) < 60000) return;
urlAsked.current[a.file_path] = Date.now();
const day = currentDay;
let url = null;
try { url = await state.getAttachmentUrl(a.file_path); } catch (e) { url = null; }
if (url && dayRef.current === day) setPreviews(prev => (prev[a.file_path] === url ? prev : { ...prev, [a.file_path]: url }));
};
// La saisie manuelle borne la date à aujourd'hui (import-modal.jsx) : sur un
// jour à venir (ouvert parce qu'il contient un trade mal daté), « Ajouter un
// trade à cette date » mentirait. L'action n'y est pas proposée.
const futureDay = !!currentDay && currentDay > todayDay;
// Ferme le journal puis ouvre la saisie d'un trade pré-remplie sur ce jour.
// Une saisie en attente est enregistrée d'abord ; si elle échoue, on reste
// sur le jour (message et « Réessayer » dans le pied).
const addTradeHere = async () => {
const d = currentDay;
if (hasPendingSave()) {
const epoch = saveSeq.current.epoch;
const ok = await settleSaves();
if (!ok || epoch !== saveSeq.current.epoch || dayRef.current !== d) return;
}
if (onClose) onClose();
if (openImport) openImport(d, 'manual');
};
// Statistiques du jour — currentDay, pour que les flèches mettent tout à jour.
const dayTrades = (state?.tradesByDay?.[currentDay]?.trades) || [];
const n = dayTrades.length;
const hasTrades = n > 0;
// Trades pas encore chargés ou en échec : ne pas conclure « aucun trade ce jour ».
const tradesUnavailable = !hasTrades && !!(state?.tradesError || state?.tradesLoading)
&& !(Array.isArray(state?.trades) && state.trades.length);
let netPnl = 0, wins = 0, losses = 0, best = -Infinity, worst = Infinity, totalWin = 0, totalLoss = 0, volume = 0;
for (const t of dayTrades) {
const p = Number(t.pnl) || 0;
netPnl += p;
if (p > 0) { wins++; totalWin += p; }
else if (p < 0) { losses++; totalLoss += Math.abs(p); }
if (p > best) best = p;
if (p < worst) worst = p;
const lots = Number(t.lots);
if (t.lots != null && t.lots !== '' && Number.isFinite(lots)) volume += lots;
}
const nuls = n - wins - losses;
const pf = totalLoss > 0 ? totalWin / totalLoss : (totalWin > 0 ? Infinity : null);
// Somme nettoyée du bruit binaire (0,1 + 0,2), sans perdre de décimales :
// 8 décimales, la précision la plus fine d'une quantité (fmtLots).
const volumeTotal = Math.round(volume * 1e8) / 1e8;
const date = pg2DayTitle(currentDay);
const pad = isMobile ? 12 : 24;
// Captures et humeur du jour affiché, une fois son journal lu.
const shownAttachments = journalReady ? attachments : [];
const shownMood = journalReady ? mood : null;
const viewerAtt = viewer != null ? shownAttachments.find(a => a.id === viewer) : null;
const viewerUrl = viewerAtt ? previews[viewerAtt.file_path] : null;
const captureLocked = uploading || !journalReady;
const captureDimmed = uploading || journalError;
return (
{/* En-tête */}
{date}
{/* Ajoute un trade DIRECTEMENT sur ce jour (saisie manuelle pré-remplie). */}
{!futureDay && }
{/* Onglets (défilants sur mobile) */}
{/* Lecture du journal en échec : dit dans les quatre onglets (l'onglet
ouvert par défaut est Statistiques), avec Réessayer. */}
{journalError && (
Impossible de charger le journal de ce jour. Vérifie ta connexion.
)}
{/* Contenu de l'onglet : un seul panneau dessiné, celui de l'onglet actif,
relié à son onglet (aria-controls côté SegmentedTabs) ; les panneaux
des autres onglets existent, vides et masqués (TabPanelStubs). */}