refactor: Snapshot Externe — layout 3 lignes temporelles × 4 piliers
Remplace le 2×2 indépendant par une matrice cohérente avec le concept E1/E2/E3 : - 3 lignes (Long/Moyen/Court), chacune ancrée sur l'événement actif de ce niveau - 4 colonnes (Géopolitique / Prix & Marchés / Régimes Macro / Calendrier) - Assets affichés dans la colonne Prix filtrés selon affected_assets de l'événement - Barres macro normalisées sur max score (overflow corrigé, overflow-hidden) - Calendrier filtré par horizon temporel (7j / 1M / 3M) selon le niveau - En-têtes colonnes globaux pour lecture matricielle immédiate Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
OpenSquared
@@ -4,14 +4,14 @@ import axios from 'axios'
|
||||
import clsx from 'clsx'
|
||||
import {
|
||||
Globe, BarChart2, Activity, Calendar,
|
||||
ArrowRight, Clock, TrendingUp, TrendingDown, Minus, ExternalLink,
|
||||
ArrowRight, Clock, TrendingUp, TrendingDown, Minus,
|
||||
} from 'lucide-react'
|
||||
|
||||
const api = axios.create({ baseURL: '/api' })
|
||||
|
||||
function todayStr() { return new Date().toISOString().split('T')[0] }
|
||||
function fmtDate(d: string) {
|
||||
return new Date(d).toLocaleDateString('fr-FR', { day: '2-digit', month: 'short', year: 'numeric' })
|
||||
function fmtShort(d: string) {
|
||||
return new Date(d).toLocaleDateString('fr-FR', { day: '2-digit', month: 'short' })
|
||||
}
|
||||
function daysSince(ref: string, start: string) {
|
||||
return Math.floor((new Date(ref).getTime() - new Date(start).getTime()) / 86_400_000)
|
||||
@@ -25,7 +25,8 @@ function offsetDate(d: string, days: number) {
|
||||
|
||||
interface MarketEvent {
|
||||
id: number; name: string; start_date: string; end_date: string | null
|
||||
level: string; category: string; description: string; impact_score: number
|
||||
level: string; category: string; description: string; market_impact: string
|
||||
affected_assets: string; impact_score: number
|
||||
}
|
||||
|
||||
interface DayContext {
|
||||
@@ -36,285 +37,346 @@ interface DayContext {
|
||||
}
|
||||
|
||||
interface Quote { symbol: string; price: number; change_pct: number; name?: string }
|
||||
|
||||
interface MacroRegime {
|
||||
scenarios: { dominant: string; scores: Record<string, number> }
|
||||
gauges: Record<string, { value: number | null; label: string; change_pct?: number | null }>
|
||||
}
|
||||
|
||||
interface CalEvent { title: string; date: string; importance: number; currency?: string }
|
||||
|
||||
// ── Sub-components ─────────────────────────────────────────────────────────────
|
||||
// ── Config ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
const LEVEL_CFG = {
|
||||
long: { label: 'L', color: 'text-violet-400', bg: 'bg-violet-900/30', border: 'border-violet-700/40' },
|
||||
medium: { label: 'M', color: 'text-blue-400', bg: 'bg-blue-900/30', border: 'border-blue-700/40' },
|
||||
short: { label: 'C', color: 'text-emerald-400', bg: 'bg-emerald-900/30', border: 'border-emerald-700/40' },
|
||||
const LEVEL = {
|
||||
long: {
|
||||
label: 'Long Terme', badge: 'L',
|
||||
ring: 'border-violet-700/50', bg: 'bg-violet-950/20',
|
||||
header: 'bg-violet-950/40 border-violet-700/40',
|
||||
accent: 'text-violet-400', dot: 'bg-violet-500',
|
||||
badgeCls: 'bg-violet-800 text-violet-200',
|
||||
},
|
||||
medium: {
|
||||
label: 'Moyen Terme', badge: 'M',
|
||||
ring: 'border-blue-700/50', bg: 'bg-blue-950/20',
|
||||
header: 'bg-blue-950/40 border-blue-700/40',
|
||||
accent: 'text-blue-400', dot: 'bg-blue-500',
|
||||
badgeCls: 'bg-blue-800 text-blue-200',
|
||||
},
|
||||
short: {
|
||||
label: 'Court Terme', badge: 'C',
|
||||
ring: 'border-emerald-700/50', bg: 'bg-emerald-950/20',
|
||||
header: 'bg-emerald-950/40 border-emerald-700/40',
|
||||
accent: 'text-emerald-400', dot: 'bg-emerald-500',
|
||||
badgeCls: 'bg-emerald-800 text-emerald-200',
|
||||
},
|
||||
} as const
|
||||
|
||||
const REGIME_LABELS: Record<string, string> = {
|
||||
risk_on: 'Risk On', risk_off: 'Risk Off', stagflation: 'Stagflation',
|
||||
goldilocks: 'Goldilocks', recession: 'Récession', reflation: 'Reflation',
|
||||
soft_landing: 'Soft Landing', desinflation: 'Désinflation', incertain: 'Incertain',
|
||||
}
|
||||
|
||||
function EventBadge({ ev, level, refDate }: { ev: MarketEvent | null; level: 'long' | 'medium' | 'short'; refDate: string }) {
|
||||
const cfg = LEVEL_CFG[level]
|
||||
// Assets relevant to each temporal level — fallback to standard set
|
||||
const LEVEL_ASSETS: Record<string, string[]> = {
|
||||
long: ['SPY', 'GLD', 'USO', 'TLT'],
|
||||
medium: ['SPY', 'USO', 'GLD', 'UUP'],
|
||||
short: ['QQQ', 'TLT', 'UUP', 'GLD'],
|
||||
}
|
||||
|
||||
// Try to map affected_assets field to quote symbols we have
|
||||
function relevantAssets(ev: MarketEvent | null, level: string): string[] {
|
||||
if (!ev) return LEVEL_ASSETS[level] ?? []
|
||||
try {
|
||||
const raw: string[] = JSON.parse(ev.affected_assets || '[]')
|
||||
const MAP: Record<string, string> = {
|
||||
SPX: 'SPY', SPY: 'SPY', QQQ: 'QQQ', NVDA: 'NVDA',
|
||||
GC: 'GLD', Gold: 'GLD', GLD: 'GLD',
|
||||
CL: 'USO', Oil: 'USO', USO: 'USO',
|
||||
NG: 'USO', TLT: 'TLT', USD: 'UUP', UUP: 'UUP',
|
||||
VIX: 'VIX', HYG: 'HYG',
|
||||
}
|
||||
const mapped = raw.map(a => MAP[a]).filter(Boolean) as string[]
|
||||
const unique = [...new Set(mapped)].slice(0, 4)
|
||||
return unique.length >= 2 ? unique : LEVEL_ASSETS[level] ?? []
|
||||
} catch { return LEVEL_ASSETS[level] ?? [] }
|
||||
}
|
||||
|
||||
// ── Cells ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
function CellGeo({
|
||||
ev, level, refDate,
|
||||
}: {
|
||||
ev: MarketEvent | null; level: keyof typeof LEVEL; refDate: string
|
||||
}) {
|
||||
const cfg = LEVEL[level]
|
||||
if (!ev) return (
|
||||
<div className={clsx('flex items-center gap-2 rounded-lg px-3 py-2 border opacity-40', cfg.bg, cfg.border)}>
|
||||
<span className={clsx('text-xs font-bold w-4 shrink-0', cfg.color)}>{cfg.label}</span>
|
||||
<span className="text-xs text-slate-600 italic">—</span>
|
||||
<div className="flex items-center justify-center h-full text-xs text-slate-600 italic p-3">
|
||||
Aucun événement {cfg.label.toLowerCase()} actif
|
||||
</div>
|
||||
)
|
||||
const days = daysSince(refDate, ev.start_date)
|
||||
return (
|
||||
<div className={clsx('flex items-center gap-2 rounded-lg px-3 py-2 border', cfg.bg, cfg.border)}>
|
||||
<span className={clsx('text-xs font-bold w-4 shrink-0', cfg.color)}>{cfg.label}</span>
|
||||
<span className={clsx('text-xs font-semibold flex-1 truncate', cfg.color)}>{ev.name}</span>
|
||||
<span className="text-xs text-slate-500 shrink-0 tabular-nums">J+{days}</span>
|
||||
<div className="p-3 space-y-2 h-full">
|
||||
<div className={clsx('text-sm font-bold leading-tight', cfg.accent)}>{ev.name}</div>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500">
|
||||
<Clock className="w-3 h-3 shrink-0" />
|
||||
<span>{ev.start_date}</span>
|
||||
<span className={clsx('font-semibold', cfg.accent)}>J+{days}</span>
|
||||
{!ev.end_date && <span className="text-amber-500/70">en cours</span>}
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 leading-relaxed line-clamp-3">{ev.description}</p>
|
||||
{ev.market_impact && (
|
||||
<p className="text-xs text-slate-600 italic line-clamp-2">{ev.market_impact}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Pillar 1 — Géopolitique / Temporal Context
|
||||
function PillarGeo({ ctx, refDate }: { ctx: DayContext | null; refDate: string }) {
|
||||
function CellMarkets({
|
||||
ev, level, quotes,
|
||||
}: {
|
||||
ev: MarketEvent | null; level: string; quotes: Record<string, Quote> | null
|
||||
}) {
|
||||
const assets = relevantAssets(ev, level)
|
||||
return (
|
||||
<div className="bg-dark-800 rounded-xl border border-violet-700/30 p-5 flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="w-4 h-4 text-violet-400" />
|
||||
<span className="text-sm font-semibold text-violet-300">Géopolitique</span>
|
||||
</div>
|
||||
<Link to={`/timeline?date=${refDate}`} className="flex items-center gap-1 text-xs text-slate-500 hover:text-violet-400 transition-colors">
|
||||
Timeline <ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{ctx ? (
|
||||
<>
|
||||
<EventBadge ev={ctx.events.long} level="long" refDate={refDate} />
|
||||
<EventBadge ev={ctx.events.medium} level="medium" refDate={refDate} />
|
||||
<EventBadge ev={ctx.events.short} level="short" refDate={refDate} />
|
||||
</>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{(['long', 'medium', 'short'] as const).map(l => (
|
||||
<div key={l} className={clsx('h-9 rounded-lg border animate-pulse', LEVEL_CFG[l].bg, LEVEL_CFG[l].border)} />
|
||||
))}
|
||||
<div className="p-3 space-y-1.5 h-full">
|
||||
{assets.map(sym => {
|
||||
const q = quotes?.[sym]
|
||||
if (!q) return (
|
||||
<div key={sym} className="flex items-center justify-between py-0.5">
|
||||
<span className="text-xs text-slate-600">{sym}</span>
|
||||
<span className="text-xs text-slate-700">—</span>
|
||||
</div>
|
||||
)
|
||||
const up = q.change_pct > 0.1
|
||||
const dn = q.change_pct < -0.1
|
||||
return (
|
||||
<div key={sym} className="flex items-center justify-between py-0.5">
|
||||
<span className="text-xs text-slate-400 truncate max-w-[6rem]">{q.name || sym}</span>
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
<span className="text-xs text-slate-300 tabular-nums">{q.price?.toFixed(q.price > 100 ? 1 : 2)}</span>
|
||||
<span className={clsx(
|
||||
'text-xs flex items-center gap-0.5 tabular-nums w-14 justify-end',
|
||||
up ? 'text-emerald-400' : dn ? 'text-red-400' : 'text-slate-500'
|
||||
)}>
|
||||
{up ? <TrendingUp className="w-2.5 h-2.5" /> : dn ? <TrendingDown className="w-2.5 h-2.5" /> : <Minus className="w-2.5 h-2.5" />}
|
||||
{q.change_pct > 0 ? '+' : ''}{q.change_pct?.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CellMacro({
|
||||
level, macro,
|
||||
}: {
|
||||
level: keyof typeof LEVEL; macro: MacroRegime | null
|
||||
}) {
|
||||
const cfg = LEVEL[level]
|
||||
const dominant = macro?.scenarios?.dominant ?? 'incertain'
|
||||
const dominantLabel = REGIME_LABELS[dominant] ?? dominant
|
||||
|
||||
const scores = macro?.scenarios?.scores ?? {}
|
||||
const maxScore = Math.max(...Object.values(scores).map(Number), 1)
|
||||
const top3 = Object.entries(scores)
|
||||
.sort((a, b) => Number(b[1]) - Number(a[1]))
|
||||
.slice(0, 3)
|
||||
|
||||
// Key gauge per level
|
||||
const gaugeKeys = {
|
||||
long: ['vix', 'us10y'],
|
||||
medium: ['dxy', 'credit_spread'],
|
||||
short: ['vix', 'dxy'],
|
||||
}[level] ?? ['vix', 'dxy']
|
||||
|
||||
return (
|
||||
<div className="p-3 space-y-2.5 h-full">
|
||||
<div className={clsx('text-sm font-bold', cfg.accent)}>{dominantLabel}</div>
|
||||
<div className="space-y-1.5">
|
||||
{top3.map(([name, score]) => {
|
||||
const pct = Math.min(100, Math.round((Number(score) / maxScore) * 100))
|
||||
const label = REGIME_LABELS[name] ?? name
|
||||
return (
|
||||
<div key={name} className="flex items-center gap-2">
|
||||
<span className="text-xs text-slate-500 w-20 truncate">{label}</span>
|
||||
<div className="flex-1 bg-dark-700 rounded-full h-1.5 overflow-hidden">
|
||||
<div
|
||||
className={clsx('h-1.5 rounded-full transition-all', cfg.dot)}
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-slate-600 w-7 text-right tabular-nums">{pct}%</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="flex gap-2 flex-wrap pt-1 border-t border-slate-700/20">
|
||||
{gaugeKeys.map(k => {
|
||||
const g = macro?.gauges?.[k]
|
||||
if (!g?.value) return null
|
||||
const up = (g.change_pct ?? 0) > 0
|
||||
return (
|
||||
<div key={k} className="flex items-center gap-1 bg-dark-900/40 rounded px-2 py-1">
|
||||
<span className="text-xs text-slate-500">{g.label}</span>
|
||||
<span className={clsx('text-xs font-medium tabular-nums', up ? 'text-emerald-400' : 'text-red-400')}>
|
||||
{g.value?.toFixed(g.value > 10 ? 1 : 2)}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Calendar events filtered by temporal horizon relative to refDate
|
||||
function calForLevel(events: CalEvent[], level: string, refDate: string): CalEvent[] {
|
||||
const horizons: Record<string, number> = { long: 90, medium: 30, short: 7 }
|
||||
const horizon = horizons[level] ?? 30
|
||||
return events
|
||||
.filter(e => e.date >= refDate && e.date <= offsetDate(refDate, horizon))
|
||||
.sort((a, b) => a.date.localeCompare(b.date))
|
||||
.slice(0, 4)
|
||||
}
|
||||
|
||||
function CellCalendar({
|
||||
level, events, refDate,
|
||||
}: {
|
||||
level: keyof typeof LEVEL; events: CalEvent[] | null; refDate: string
|
||||
}) {
|
||||
const cfg = LEVEL[level]
|
||||
const horizon = { long: '3 mois', medium: '1 mois', short: '7 jours' }[level]
|
||||
const items = calForLevel(events ?? [], level, refDate)
|
||||
|
||||
return (
|
||||
<div className="p-3 space-y-1.5 h-full">
|
||||
<div className="text-xs text-slate-600 mb-2">Horizon {horizon}</div>
|
||||
{items.length === 0 && (
|
||||
<div className="text-xs text-slate-700 italic">Aucun événement</div>
|
||||
)}
|
||||
{items.map((ev, i) => {
|
||||
const imp = ev.importance ?? 1
|
||||
const impColor = imp >= 3 ? 'text-red-400' : imp >= 2 ? 'text-yellow-400' : 'text-slate-500'
|
||||
return (
|
||||
<div key={i} className="flex items-start gap-2">
|
||||
<span className="text-xs text-slate-600 shrink-0 w-14">{fmtShort(ev.date)}</span>
|
||||
<span className={clsx('text-xs truncate flex-1', impColor)}>
|
||||
{ev.currency && <span className="text-slate-600 mr-1">[{ev.currency}]</span>}
|
||||
{ev.title}
|
||||
</span>
|
||||
<div className="flex gap-0.5 shrink-0 mt-0.5">
|
||||
{[1, 2, 3].map(n => (
|
||||
<div key={n} className={clsx(
|
||||
'w-1 h-1 rounded-full',
|
||||
n <= imp
|
||||
? (imp >= 3 ? 'bg-red-500' : imp >= 2 ? 'bg-yellow-500' : 'bg-slate-500')
|
||||
: 'bg-slate-700'
|
||||
)} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Temporal Row ───────────────────────────────────────────────────────────────
|
||||
|
||||
function TemporalRow({
|
||||
level, ev, quotes, macro, calEvents, refDate,
|
||||
}: {
|
||||
level: keyof typeof LEVEL
|
||||
ev: MarketEvent | null
|
||||
quotes: Record<string, Quote> | null
|
||||
macro: MacroRegime | null
|
||||
calEvents: CalEvent[] | null
|
||||
refDate: string
|
||||
}) {
|
||||
const cfg = LEVEL[level]
|
||||
|
||||
return (
|
||||
<div className={clsx('rounded-xl border overflow-hidden', cfg.ring)}>
|
||||
{/* Row header */}
|
||||
<div className={clsx('flex items-center gap-3 px-4 py-2.5 border-b', cfg.header)}>
|
||||
<span className={clsx('text-xs font-bold px-2 py-0.5 rounded', cfg.badgeCls)}>
|
||||
{cfg.badge}
|
||||
</span>
|
||||
<span className={clsx('text-sm font-semibold', cfg.accent)}>{cfg.label}</span>
|
||||
{ev && (
|
||||
<>
|
||||
<span className="text-slate-600">·</span>
|
||||
<span className="text-sm text-slate-300 font-medium">{ev.name}</span>
|
||||
<span className="text-xs text-slate-500 ml-auto flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
J+{daysSince(refDate, ev.start_date)} depuis {ev.start_date}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{!ev && (
|
||||
<span className="text-xs text-slate-600 italic ml-2">Aucun événement actif</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{ctx?.has_commentary && (
|
||||
<div className="text-xs text-slate-500 italic border-t border-slate-700/30 pt-2">
|
||||
Commentaires IA disponibles → voir Timeline
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Pillar 2 — Prix & Marchés
|
||||
const KEY_SYMBOLS = ['SPY', 'QQQ', 'GLD', 'USO', 'TLT', 'UUP']
|
||||
|
||||
function QuoteRow({ symbol, quote }: { symbol: string; quote?: Quote }) {
|
||||
if (!quote) return (
|
||||
<div className="flex items-center justify-between py-1">
|
||||
<span className="text-xs text-slate-500">{symbol}</span>
|
||||
<span className="text-xs text-slate-700">—</span>
|
||||
</div>
|
||||
)
|
||||
const up = quote.change_pct > 0.1
|
||||
const dn = quote.change_pct < -0.1
|
||||
return (
|
||||
<div className="flex items-center justify-between py-1">
|
||||
<span className="text-xs text-slate-400">{quote.name || symbol}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-white tabular-nums">{quote.price?.toFixed(2)}</span>
|
||||
<span className={clsx('text-xs tabular-nums flex items-center gap-0.5', up ? 'text-emerald-400' : dn ? 'text-red-400' : 'text-slate-500')}>
|
||||
{up ? <TrendingUp className="w-3 h-3" /> : dn ? <TrendingDown className="w-3 h-3" /> : <Minus className="w-3 h-3" />}
|
||||
{quote.change_pct > 0 ? '+' : ''}{quote.change_pct?.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PillarMarkets({ quotes }: { quotes: Record<string, Quote> | null }) {
|
||||
return (
|
||||
<div className="bg-dark-800 rounded-xl border border-blue-700/30 p-5 flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<BarChart2 className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-sm font-semibold text-blue-300">Prix & Marchés</span>
|
||||
</div>
|
||||
<Link to="/markets" className="flex items-center gap-1 text-xs text-slate-500 hover:text-blue-400 transition-colors">
|
||||
Marchés <ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-slate-700/20">
|
||||
{KEY_SYMBOLS.map(sym => (
|
||||
<QuoteRow key={sym} symbol={sym} quote={quotes?.[sym]} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Link to="/specialist-desks" className="flex items-center gap-1 text-xs text-slate-500 hover:text-blue-400 transition-colors border-t border-slate-700/30 pt-2">
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
COT & Forward Curves → Specialist Desks
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Pillar 3 — Régimes Macro
|
||||
const REGIME_LABELS: Record<string, { label: string; color: string }> = {
|
||||
risk_on: { label: 'Risk On', color: 'text-emerald-400' },
|
||||
risk_off: { label: 'Risk Off', color: 'text-red-400' },
|
||||
stagflation: { label: 'Stagflation', color: 'text-orange-400' },
|
||||
goldilocks: { label: 'Goldilocks', color: 'text-emerald-300' },
|
||||
recession: { label: 'Récession', color: 'text-red-500' },
|
||||
reflation: { label: 'Reflation', color: 'text-yellow-400' },
|
||||
incertain: { label: 'Incertain', color: 'text-slate-400' },
|
||||
}
|
||||
|
||||
function PillarMacro({ macro }: { macro: MacroRegime | null }) {
|
||||
const dominant = macro?.scenarios?.dominant ?? 'incertain'
|
||||
const cfg = REGIME_LABELS[dominant] ?? { label: dominant, color: 'text-slate-400' }
|
||||
const scores = macro?.scenarios?.scores ?? {}
|
||||
const top3 = Object.entries(scores).sort((a, b) => b[1] - a[1]).slice(0, 4)
|
||||
|
||||
const KEY_GAUGES = ['vix', 'dxy', 'us10y', 'credit_spread']
|
||||
|
||||
return (
|
||||
<div className="bg-dark-800 rounded-xl border border-amber-700/30 p-5 flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="w-4 h-4 text-amber-400" />
|
||||
<span className="text-sm font-semibold text-amber-300">Régimes Macro</span>
|
||||
</div>
|
||||
<Link to="/macro" className="flex items-center gap-1 text-xs text-slate-500 hover:text-amber-400 transition-colors">
|
||||
Macro <ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Dominant regime */}
|
||||
<div className="bg-dark-900/40 rounded-lg px-3 py-2 border border-slate-700/20">
|
||||
<div className="text-xs text-slate-500 mb-0.5">Régime dominant</div>
|
||||
<div className={clsx('text-base font-bold', cfg.color)}>{cfg.label}</div>
|
||||
</div>
|
||||
|
||||
{/* Top scenarios */}
|
||||
<div className="space-y-1.5">
|
||||
{top3.map(([name, score]) => {
|
||||
const r = REGIME_LABELS[name] ?? { label: name, color: 'text-slate-400' }
|
||||
const pct = Math.round((score as number) * 100)
|
||||
return (
|
||||
<div key={name} className="flex items-center gap-2">
|
||||
<span className={clsx('text-xs w-24 truncate', r.color)}>{r.label}</span>
|
||||
<div className="flex-1 bg-dark-700 rounded-full h-1.5">
|
||||
<div className={clsx('h-1.5 rounded-full', pct > 60 ? 'bg-amber-500' : pct > 30 ? 'bg-amber-700' : 'bg-slate-600')}
|
||||
style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
<span className="text-xs text-slate-500 w-8 text-right tabular-nums">{pct}%</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Key gauges */}
|
||||
<div className="grid grid-cols-2 gap-1.5 border-t border-slate-700/30 pt-2">
|
||||
{KEY_GAUGES.map(k => {
|
||||
const g = macro?.gauges?.[k]
|
||||
if (!g) return null
|
||||
const up = (g.change_pct ?? 0) > 0
|
||||
const dn = (g.change_pct ?? 0) < 0
|
||||
return (
|
||||
<div key={k} className="flex items-center justify-between bg-dark-900/30 rounded px-2 py-1">
|
||||
<span className="text-xs text-slate-500">{g.label}</span>
|
||||
<span className={clsx('text-xs font-medium tabular-nums', up ? 'text-emerald-400' : dn ? 'text-red-400' : 'text-slate-400')}>
|
||||
{g.value?.toFixed(g.value > 10 ? 1 : 2) ?? '—'}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Pillar 4 — Calendrier Économique
|
||||
function PillarCalendar({ events }: { events: CalEvent[] | null }) {
|
||||
const upcoming = (events ?? [])
|
||||
.filter(e => e.date >= todayStr())
|
||||
.sort((a, b) => a.date.localeCompare(b.date))
|
||||
.slice(0, 5)
|
||||
|
||||
const recent = (events ?? [])
|
||||
.filter(e => e.date < todayStr())
|
||||
.sort((a, b) => b.date.localeCompare(a.date))
|
||||
.slice(0, 3)
|
||||
|
||||
const importanceColor = (n: number) =>
|
||||
n >= 3 ? 'text-red-400' : n >= 2 ? 'text-yellow-400' : 'text-slate-500'
|
||||
|
||||
return (
|
||||
<div className="bg-dark-800 rounded-xl border border-emerald-700/30 p-5 flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4 text-emerald-400" />
|
||||
<span className="text-sm font-semibold text-emerald-300">Calendrier Économique</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Link to="/institutional" className="flex items-center gap-1 text-xs text-slate-500 hover:text-emerald-400 transition-colors">
|
||||
Rapports <ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
<Link to="/calendar" className="flex items-center gap-1 text-xs text-slate-500 hover:text-emerald-400 transition-colors">
|
||||
Calendrier <ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upcoming */}
|
||||
<div>
|
||||
<div className="text-xs text-slate-500 uppercase tracking-wider mb-1.5">À venir</div>
|
||||
<div className="space-y-1.5">
|
||||
{upcoming.length === 0 && <div className="text-xs text-slate-600 italic">Aucun événement</div>}
|
||||
{upcoming.map((ev, i) => (
|
||||
<div key={i} className="flex items-start gap-2">
|
||||
<div className="flex items-center gap-1 shrink-0 w-20">
|
||||
<Clock className="w-3 h-3 text-slate-600" />
|
||||
<span className="text-xs text-slate-500">{fmtDate(ev.date)}</span>
|
||||
</div>
|
||||
<span className={clsx('text-xs font-medium flex-1 truncate', importanceColor(ev.importance))}>
|
||||
{ev.currency && <span className="text-slate-600 mr-1">[{ev.currency}]</span>}
|
||||
{ev.title}
|
||||
</span>
|
||||
<div className="flex gap-0.5 shrink-0">
|
||||
{[1, 2, 3].map(n => (
|
||||
<div key={n} className={clsx('w-1 h-1 rounded-full', n <= ev.importance ? importanceColor(ev.importance).replace('text-', 'bg-') : 'bg-slate-700')} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent */}
|
||||
{recent.length > 0 && (
|
||||
<div className="border-t border-slate-700/30 pt-2">
|
||||
<div className="text-xs text-slate-500 uppercase tracking-wider mb-1.5">Récents</div>
|
||||
<div className="space-y-1">
|
||||
{recent.map((ev, i) => (
|
||||
<div key={i} className="flex items-center gap-2 opacity-60">
|
||||
<span className="text-xs text-slate-600 w-20 shrink-0">{fmtDate(ev.date)}</span>
|
||||
<span className="text-xs text-slate-500 truncate">
|
||||
{ev.currency && <span className="mr-1">[{ev.currency}]</span>}
|
||||
{ev.title}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{/* Row body: 4 columns */}
|
||||
<div className={clsx('grid grid-cols-4 divide-x divide-slate-700/30', cfg.bg)}>
|
||||
{/* Pilier 1: Géopolitique */}
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-1.5 px-3 py-1.5 border-b border-slate-700/20">
|
||||
<Globe className="w-3 h-3 text-slate-500" />
|
||||
<span className="text-xs text-slate-500 font-medium">Géopolitique</span>
|
||||
<Link to={`/timeline?date=${refDate}`} className={clsx('ml-auto text-xs flex items-center gap-0.5 hover:opacity-100 opacity-50', cfg.accent)}>
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
<CellGeo ev={ev} level={level} refDate={refDate} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pilier 2: Prix & Marchés */}
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-1.5 px-3 py-1.5 border-b border-slate-700/20">
|
||||
<BarChart2 className="w-3 h-3 text-slate-500" />
|
||||
<span className="text-xs text-slate-500 font-medium">Prix & Marchés</span>
|
||||
<Link to="/markets" className="ml-auto text-xs text-slate-600 hover:text-slate-400 flex items-center gap-0.5">
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
<CellMarkets ev={ev} level={level} quotes={quotes} />
|
||||
</div>
|
||||
|
||||
{/* Pilier 3: Régimes Macro */}
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-1.5 px-3 py-1.5 border-b border-slate-700/20">
|
||||
<Activity className="w-3 h-3 text-slate-500" />
|
||||
<span className="text-xs text-slate-500 font-medium">Régimes Macro</span>
|
||||
<Link to="/macro" className="ml-auto text-xs text-slate-600 hover:text-slate-400 flex items-center gap-0.5">
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
<CellMacro level={level} macro={macro} />
|
||||
</div>
|
||||
|
||||
{/* Pilier 4: Calendrier */}
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-1.5 px-3 py-1.5 border-b border-slate-700/20">
|
||||
<Calendar className="w-3 h-3 text-slate-500" />
|
||||
<span className="text-xs text-slate-500 font-medium">Calendrier</span>
|
||||
<Link to="/calendar" className="ml-auto text-xs text-slate-600 hover:text-slate-400 flex items-center gap-0.5">
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
<CellCalendar level={level} events={calEvents} refDate={refDate} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Main component ─────────────────────────────────────────────────────────────
|
||||
// ── Main ───────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function ExternalSnapshot() {
|
||||
const [refDate, setRefDate] = useState(todayStr())
|
||||
@@ -322,25 +384,18 @@ export default function ExternalSnapshot() {
|
||||
const [quotes, setQuotes] = useState<Record<string, Quote> | null>(null)
|
||||
const [macro, setMacro] = useState<MacroRegime | null>(null)
|
||||
const [calEvents, setCalEvents] = useState<CalEvent[] | null>(null)
|
||||
const [loadingCtx, setLoadingCtx] = useState(false)
|
||||
|
||||
// Fetch temporal context when date changes
|
||||
useEffect(() => {
|
||||
setLoadingCtx(true)
|
||||
api.get(`/timeline/day/${refDate}`)
|
||||
.then(r => setCtx(r.data))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoadingCtx(false))
|
||||
.catch(() => setCtx(null))
|
||||
}, [refDate])
|
||||
|
||||
// Fetch live data once (always current)
|
||||
useEffect(() => {
|
||||
api.get('/market/quotes').then(r => {
|
||||
// Flatten: quotes is Record<assetClass, Quote[]> → flatten to Record<symbol, Quote>
|
||||
const flat: Record<string, Quote> = {}
|
||||
for (const arr of Object.values(r.data as Record<string, Quote[]>)) {
|
||||
for (const arr of Object.values(r.data as Record<string, Quote[]>))
|
||||
for (const q of arr) flat[q.symbol] = q
|
||||
}
|
||||
setQuotes(flat)
|
||||
}).catch(() => {})
|
||||
|
||||
@@ -353,70 +408,66 @@ export default function ExternalSnapshot() {
|
||||
if (next <= todayStr()) setRefDate(next)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-5 max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-white flex items-center gap-2">
|
||||
<Globe className="w-5 h-5 text-slate-400" />
|
||||
Snapshot Externe
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 mt-0.5">
|
||||
Vue d'ensemble des 4 piliers du contexte externe — {fmtDate(refDate)}
|
||||
</p>
|
||||
</div>
|
||||
const evLong = ctx?.events?.long ?? null
|
||||
const evMedium = ctx?.events?.medium ?? null
|
||||
const evShort = ctx?.events?.short ?? null
|
||||
|
||||
{/* Date navigator */}
|
||||
<div className="bg-dark-800 rounded-xl border border-slate-700/40 p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-1">
|
||||
<button onClick={() => navigate(-30)} className="px-2 py-1 text-xs text-slate-400 hover:text-white hover:bg-dark-700 rounded">-1M</button>
|
||||
<button onClick={() => navigate(-7)} className="px-2 py-1 text-xs text-slate-400 hover:text-white hover:bg-dark-700 rounded">-7J</button>
|
||||
<button onClick={() => navigate(-1)} className="px-2 py-1 text-xs text-slate-400 hover:text-white hover:bg-dark-700 rounded">-1J</button>
|
||||
</div>
|
||||
<div className="flex-1 flex items-center justify-center gap-3">
|
||||
<input
|
||||
type="date"
|
||||
value={refDate}
|
||||
min="2020-01-01"
|
||||
max={todayStr()}
|
||||
onChange={e => setRefDate(e.target.value)}
|
||||
className="bg-dark-700 border border-slate-700/40 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:border-slate-500"
|
||||
/>
|
||||
<button onClick={() => setRefDate(todayStr())} className="text-xs text-slate-400 hover:text-white">
|
||||
Aujourd'hui
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
{refDate < todayStr() && (
|
||||
<span className="text-amber-500/70">Piliers 2-3-4 en données live</span>
|
||||
)}
|
||||
</div>
|
||||
return (
|
||||
<div className="p-6 space-y-4 max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-white flex items-center gap-2">
|
||||
<Globe className="w-5 h-5 text-slate-400" />
|
||||
Snapshot Externe
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 mt-0.5">
|
||||
3 temporalités × 4 piliers — vision situationnelle complète
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={() => navigate(-30)} className="px-2 py-1.5 text-xs text-slate-400 hover:text-white hover:bg-dark-700 rounded">-1M</button>
|
||||
<button onClick={() => navigate(-7)} className="px-2 py-1.5 text-xs text-slate-400 hover:text-white hover:bg-dark-700 rounded">-7J</button>
|
||||
<button onClick={() => navigate(-1)} className="px-2 py-1.5 text-xs text-slate-400 hover:text-white hover:bg-dark-700 rounded">-1J</button>
|
||||
<input
|
||||
type="date"
|
||||
value={refDate}
|
||||
min="2020-01-01"
|
||||
max={todayStr()}
|
||||
onChange={e => setRefDate(e.target.value)}
|
||||
className="bg-dark-800 border border-slate-700/40 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:border-slate-500"
|
||||
/>
|
||||
<button onClick={() => setRefDate(todayStr())} className="px-2 py-1.5 text-xs text-slate-400 hover:text-white hover:bg-dark-700 rounded">
|
||||
Aujourd'hui
|
||||
</button>
|
||||
<button onClick={() => navigate(1)} disabled={refDate >= todayStr()} className="px-2 py-1.5 text-xs text-slate-400 hover:text-white hover:bg-dark-700 rounded disabled:opacity-20">+1J</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 4 pillar grid */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<PillarGeo ctx={loadingCtx ? null : ctx} refDate={refDate} />
|
||||
<PillarMarkets quotes={quotes} />
|
||||
<PillarMacro macro={macro} />
|
||||
<PillarCalendar events={calEvents} />
|
||||
{/* Column headers */}
|
||||
<div className="grid grid-cols-4 gap-0 text-xs text-slate-600 uppercase tracking-wider px-1">
|
||||
<div className="flex items-center gap-1.5"><Globe className="w-3 h-3" /> Géopolitique</div>
|
||||
<div className="flex items-center gap-1.5"><BarChart2 className="w-3 h-3" /> Prix & Marchés</div>
|
||||
<div className="flex items-center gap-1.5"><Activity className="w-3 h-3" /> Régimes Macro</div>
|
||||
<div className="flex items-center gap-1.5"><Calendar className="w-3 h-3" /> Calendrier</div>
|
||||
</div>
|
||||
|
||||
{/* Links bar */}
|
||||
<div className="flex items-center gap-4 text-xs text-slate-600 border-t border-slate-700/30 pt-4">
|
||||
<span>Navigation rapide :</span>
|
||||
{/* 3 temporal rows */}
|
||||
<TemporalRow level="long" ev={evLong} quotes={quotes} macro={macro} calEvents={calEvents} refDate={refDate} />
|
||||
<TemporalRow level="medium" ev={evMedium} quotes={quotes} macro={macro} calEvents={calEvents} refDate={refDate} />
|
||||
<TemporalRow level="short" ev={evShort} quotes={quotes} macro={macro} calEvents={calEvents} refDate={refDate} />
|
||||
|
||||
{/* Footer links */}
|
||||
<div className="flex items-center gap-4 text-xs text-slate-600 pt-2">
|
||||
<span>Voir aussi :</span>
|
||||
{[
|
||||
{ to: '/timeline', label: 'Timeline' },
|
||||
{ to: '/geo', label: 'Geo Radar' },
|
||||
{ to: '/markets', label: 'Marchés' },
|
||||
{ to: '/macro', label: 'Macro' },
|
||||
{ to: '/calendar', label: 'Calendrier' },
|
||||
{ to: '/institutional', label: 'Rapports' },
|
||||
{ to: '/specialist-desks', label: 'Desks' },
|
||||
].map(({ to, label }) => (
|
||||
<Link key={to} to={to} className="hover:text-slate-300 transition-colors">
|
||||
{label}
|
||||
['/timeline', 'Timeline'],
|
||||
['/specialist-desks','COT & Curves'],
|
||||
['/geo', 'Geo Radar'],
|
||||
['/institutional', 'Rapports'],
|
||||
].map(([to, label]) => (
|
||||
<Link key={to} to={to} className="hover:text-slate-300 flex items-center gap-1">
|
||||
{label} <ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user