2f9d067a94
- Backend: category filter now ORs signal column so multi-category reports (category='multi') appear when filtering by Forex/Energy/Metals/Indices — fixes blank results - Frontend: category pills expanded to match desk taxonomy (agri, crypto, bonds, indices added; equities kept for compatibility) - Frontend: banner pointing to /specialist-desks clarifies the split between auto-fetched reports and manual desk report scheduling Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
419 lines
18 KiB
TypeScript
419 lines
18 KiB
TypeScript
import { useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { useInstitutionalReports, useInstitutionalStats, useRefreshInstitutionalReports } from '../hooks/useApi'
|
|
import { useQueryClient } from '@tanstack/react-query'
|
|
import { RefreshCw, TrendingUp, TrendingDown, Minus, AlertTriangle, Star, CheckCircle, Clock, Users, ExternalLink } from 'lucide-react'
|
|
import clsx from 'clsx'
|
|
import { format } from 'date-fns'
|
|
|
|
interface InstitutionalReport {
|
|
id: number
|
|
report_type: string
|
|
report_date: string
|
|
fetch_date: string
|
|
title: string
|
|
source: string
|
|
importance: number
|
|
category: string
|
|
key_points: string[]
|
|
trading_implications: string
|
|
signal_energy: string
|
|
signal_metals: string
|
|
signal_indices: string
|
|
signal_forex: string
|
|
ai_summary: string
|
|
absorbed_score: number | null
|
|
injected_in_cycle_id: string | null
|
|
}
|
|
|
|
const SIGNAL_CONFIG: Record<string, { label: string; color: string; icon: React.ReactNode }> = {
|
|
bullish: { label: 'Bullish', color: 'text-emerald-400 bg-emerald-900/30 border-emerald-700/40', icon: <TrendingUp className="w-3 h-3" /> },
|
|
bearish: { label: 'Bearish', color: 'text-red-400 bg-red-900/30 border-red-700/40', icon: <TrendingDown className="w-3 h-3" /> },
|
|
neutral: { label: 'Neutral', color: 'text-slate-400 bg-slate-800/50 border-slate-700/40', icon: <Minus className="w-3 h-3" /> },
|
|
}
|
|
|
|
const ASSET_CLASSES = ['energy', 'metals', 'indices', 'forex'] as const
|
|
|
|
function SignalBadge({ signal, label }: { signal: string; label: string }) {
|
|
const cfg = SIGNAL_CONFIG[signal] ?? SIGNAL_CONFIG.neutral
|
|
return (
|
|
<span className={clsx('inline-flex items-center gap-1 px-1.5 py-0.5 rounded border text-xs font-medium', cfg.color)}>
|
|
{cfg.icon}
|
|
<span className="text-slate-400 mr-0.5">{label}:</span>
|
|
{cfg.label}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
function ImportanceStars({ n }: { n: number }) {
|
|
return (
|
|
<span className="flex items-center gap-0.5">
|
|
{[1, 2, 3].map(i => (
|
|
<Star
|
|
key={i}
|
|
className={clsx('w-3 h-3', i <= n ? 'text-amber-400 fill-amber-400' : 'text-slate-700')}
|
|
/>
|
|
))}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
function AbsorptionBadge({ score }: { score: number | null }) {
|
|
if (score === null || score === undefined) {
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded border border-slate-700/40 bg-slate-800/50 text-slate-500 text-xs">
|
|
<Clock className="w-3 h-3" />
|
|
Not absorbed
|
|
</span>
|
|
)
|
|
}
|
|
const pct = Math.round(score * 100)
|
|
const isAbsorbed = pct >= 30
|
|
return (
|
|
<span className={clsx(
|
|
'inline-flex items-center gap-1 px-1.5 py-0.5 rounded border text-xs font-medium',
|
|
isAbsorbed
|
|
? 'text-blue-400 bg-blue-900/30 border-blue-700/40'
|
|
: 'text-slate-500 bg-slate-800/50 border-slate-700/40'
|
|
)}>
|
|
<CheckCircle className="w-3 h-3" />
|
|
{isAbsorbed ? `Absorbed ${pct}%` : `Low ${pct}%`}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
const TYPE_COLORS: Record<string, string> = {
|
|
cot: 'bg-purple-900/30 text-purple-300 border-purple-700/40',
|
|
eia: 'bg-orange-900/30 text-orange-300 border-orange-700/40',
|
|
earnings: 'bg-blue-900/30 text-blue-300 border-blue-700/40',
|
|
vx_curve: 'bg-rose-900/30 text-rose-300 border-rose-700/40',
|
|
central_bank: 'bg-cyan-900/30 text-cyan-300 border-cyan-700/40',
|
|
sentiment: 'bg-yellow-900/30 text-yellow-300 border-yellow-700/40',
|
|
}
|
|
|
|
const TYPE_LABELS: Record<string, string> = {
|
|
cot: 'COT',
|
|
eia: 'EIA',
|
|
earnings: 'Earnings',
|
|
vx_curve: 'VX Curve',
|
|
central_bank: 'Central Banks',
|
|
sentiment: 'Sentiment',
|
|
}
|
|
|
|
function ReportCard({ report }: { report: InstitutionalReport }) {
|
|
const [expanded, setExpanded] = useState(false)
|
|
const typeColor = TYPE_COLORS[report.report_type] ?? 'bg-slate-800 text-slate-400 border-slate-700/40'
|
|
|
|
return (
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-lg overflow-hidden hover:border-slate-600/60 transition-colors">
|
|
{/* Header */}
|
|
<div className="p-4 flex items-start justify-between gap-3">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 flex-wrap mb-1.5">
|
|
<span className={clsx('px-2 py-0.5 rounded border text-xs font-bold uppercase tracking-wider', typeColor)}>
|
|
{TYPE_LABELS[report.report_type] ?? report.report_type}
|
|
</span>
|
|
<ImportanceStars n={report.importance} />
|
|
<span className="text-slate-500 text-xs">
|
|
{report.report_date}
|
|
</span>
|
|
<AbsorptionBadge score={report.absorbed_score} />
|
|
</div>
|
|
<div className="text-white font-medium text-sm truncate">{report.title}</div>
|
|
<div className="text-slate-500 text-xs mt-0.5">{report.source}</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setExpanded(e => !e)}
|
|
className="text-xs text-slate-400 hover:text-white shrink-0 border border-slate-700/40 rounded px-2 py-1"
|
|
>
|
|
{expanded ? 'Collapse' : 'Expand'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Signal badges row */}
|
|
<div className="px-4 pb-3 flex flex-wrap gap-1.5">
|
|
<SignalBadge signal={report.signal_energy} label="Energy" />
|
|
<SignalBadge signal={report.signal_metals} label="Metals" />
|
|
<SignalBadge signal={report.signal_indices} label="Indices" />
|
|
<SignalBadge signal={report.signal_forex} label="Forex" />
|
|
</div>
|
|
|
|
{/* Key points preview (always visible) */}
|
|
{report.key_points?.length > 0 && (
|
|
<div className="px-4 pb-3">
|
|
<ul className="space-y-1">
|
|
{(expanded ? report.key_points : report.key_points.slice(0, 3)).map((kp, i) => {
|
|
const isExtreme = kp.includes('EXTREME')
|
|
return (
|
|
<li key={i} className={clsx(
|
|
'text-xs flex items-start gap-1.5',
|
|
isExtreme ? 'text-amber-300' : 'text-slate-300'
|
|
)}>
|
|
{isExtreme
|
|
? <AlertTriangle className="w-3 h-3 text-amber-400 shrink-0 mt-0.5" />
|
|
: <span className="w-3 text-center text-slate-600 shrink-0">•</span>
|
|
}
|
|
{kp}
|
|
</li>
|
|
)
|
|
})}
|
|
{!expanded && report.key_points.length > 3 && (
|
|
<li className="text-xs text-slate-600">+{report.key_points.length - 3} more…</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{/* Expanded: trading implications + AI summary */}
|
|
{expanded && (
|
|
<div className="border-t border-slate-700/40 p-4 space-y-3">
|
|
{report.trading_implications && (
|
|
<div>
|
|
<div className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">
|
|
Trading Implications
|
|
</div>
|
|
<div className="bg-amber-900/10 border border-amber-700/30 rounded p-2.5">
|
|
{report.trading_implications.split(' | ').map((impl, i) => (
|
|
<p key={i} className="text-xs text-amber-200 leading-relaxed">{impl}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{report.ai_summary && (
|
|
<div>
|
|
<div className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">
|
|
AI Summary
|
|
</div>
|
|
<p className="text-xs text-slate-400 leading-relaxed">{report.ai_summary}</p>
|
|
</div>
|
|
)}
|
|
{report.injected_in_cycle_id && (
|
|
<div className="text-xs text-slate-600">
|
|
Injected in cycle: <span className="font-mono">{report.injected_in_cycle_id.slice(0, 16)}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function InstitutionalReports() {
|
|
const qc = useQueryClient()
|
|
const [filterType, setFilterType] = useState<string>('')
|
|
const [filterCategory, setFilterCategory] = useState<string>('')
|
|
const [filterImportance, setFilterImportance] = useState<number>(0)
|
|
const [filterDays, setFilterDays] = useState<number>(90)
|
|
|
|
const params = {
|
|
...(filterType ? { report_type: filterType } : {}),
|
|
...(filterCategory ? { category: filterCategory } : {}),
|
|
...(filterImportance ? { importance: filterImportance } : {}),
|
|
days: filterDays,
|
|
}
|
|
|
|
const { data: reports = [], isLoading, isFetching } = useInstitutionalReports(params)
|
|
const { data: stats } = useInstitutionalStats()
|
|
const refresh = useRefreshInstitutionalReports()
|
|
|
|
const handleRefresh = (type?: string) => {
|
|
refresh.mutate(type, {
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ['institutional-reports'] })
|
|
qc.invalidateQueries({ queryKey: ['institutional-stats'] })
|
|
},
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-xl font-bold text-white">Institutional Reports</h1>
|
|
<p className="text-slate-400 text-sm mt-0.5">
|
|
COT · EIA · Earnings · VX Curve · Central Banks · Sentiment — scheduled daily/weekly
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{([
|
|
{ type: 'cot', label: 'COT', cls: 'bg-purple-900/40 text-purple-300 border-purple-700/40 hover:bg-purple-800/50' },
|
|
{ type: 'eia', label: 'EIA', cls: 'bg-orange-900/40 text-orange-300 border-orange-700/40 hover:bg-orange-800/50' },
|
|
{ type: 'earnings', label: 'Earn.', cls: 'bg-blue-900/40 text-blue-300 border-blue-700/40 hover:bg-blue-800/50' },
|
|
{ type: 'vx_curve', label: 'VX', cls: 'bg-rose-900/40 text-rose-300 border-rose-700/40 hover:bg-rose-800/50' },
|
|
{ type: 'central_bank', label: 'CB RSS', cls: 'bg-cyan-900/40 text-cyan-300 border-cyan-700/40 hover:bg-cyan-800/50' },
|
|
{ type: 'sentiment', label: 'Senti.', cls: 'bg-yellow-900/40 text-yellow-300 border-yellow-700/40 hover:bg-yellow-800/50' },
|
|
] as const).map(({ type, label, cls }) => (
|
|
<button
|
|
key={type}
|
|
onClick={() => handleRefresh(type)}
|
|
disabled={refresh.isPending}
|
|
className={clsx('flex items-center gap-1 px-2.5 py-1.5 text-xs border rounded disabled:opacity-50', cls)}
|
|
>
|
|
<RefreshCw className={clsx('w-3 h-3', refresh.isPending && 'animate-spin')} />
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats bar */}
|
|
{stats && (
|
|
<div className="grid grid-cols-3 sm:grid-cols-6 gap-2">
|
|
{[
|
|
{ label: 'COT', value: stats.by_type?.cot ?? 0, cls: 'text-purple-400' },
|
|
{ label: 'EIA', value: stats.by_type?.eia ?? 0, cls: 'text-orange-400' },
|
|
{ label: 'Earnings', value: stats.by_type?.earnings ?? 0, cls: 'text-blue-400' },
|
|
{ label: 'VX Curve', value: stats.by_type?.vx_curve ?? 0, cls: 'text-rose-400' },
|
|
{ label: 'Central Bank', value: stats.by_type?.central_bank ?? 0, cls: 'text-cyan-400' },
|
|
{ label: 'Sentiment', value: stats.by_type?.sentiment ?? 0, cls: 'text-yellow-400' },
|
|
].map(({ label, value, cls }) => (
|
|
<div key={label} className="bg-dark-800 border border-slate-700/40 rounded p-3 text-center">
|
|
<div className={clsx('text-xl font-bold', cls)}>{value}</div>
|
|
<div className="text-xs text-slate-500 mt-0.5">{label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Latest dates */}
|
|
{stats && (
|
|
<div className="flex flex-wrap gap-4 text-xs text-slate-500">
|
|
{stats.latest_cot && <span>COT: <span className="text-purple-400">{stats.latest_cot}</span></span>}
|
|
{stats.latest_eia && <span>EIA: <span className="text-orange-400">{stats.latest_eia}</span></span>}
|
|
{stats.by_type?.earnings ? <span>Earnings: <span className="text-blue-400">{Object.keys(stats.by_type).includes('earnings') ? 'tracked' : ''}</span></span> : null}
|
|
<span className="text-slate-600">Total: {stats.total} · Absorbed: {stats.absorbed_count}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Specialist Desks link */}
|
|
<div className="flex items-center gap-3 bg-indigo-900/20 border border-indigo-700/40 rounded-lg px-4 py-2.5 text-xs text-indigo-300">
|
|
<Users className="w-3.5 h-3.5 shrink-0 text-indigo-400" />
|
|
<span className="flex-1">
|
|
Ces rapports sont <strong>analysés automatiquement</strong> (fetch + scoring IA). Pour gérer le <strong>calendrier des rapports par desk</strong> — ajouter un rapport custom (ex. broyage cacao), planifier les prochaines dates, lier à un desk specialist —
|
|
</span>
|
|
<Link
|
|
to="/specialist-desks"
|
|
className="flex items-center gap-1 bg-indigo-700/40 hover:bg-indigo-600/50 border border-indigo-600/50 rounded px-2.5 py-1 font-medium text-indigo-200 transition-colors shrink-0"
|
|
>
|
|
<ExternalLink className="w-3 h-3" />
|
|
Specialist Desks
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap gap-3 bg-dark-800 border border-slate-700/40 rounded-lg p-3">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="text-xs text-slate-500">Type:</span>
|
|
<div className="flex flex-wrap gap-1">
|
|
{(['', 'cot', 'eia', 'earnings', 'vx_curve', 'central_bank', 'sentiment'] as const).map(t => (
|
|
<button
|
|
key={t}
|
|
onClick={() => setFilterType(t)}
|
|
className={clsx(
|
|
'px-2.5 py-1 rounded text-xs font-medium border transition-colors',
|
|
filterType === t
|
|
? 'bg-blue-600 text-white border-blue-500'
|
|
: 'bg-dark-700 text-slate-400 border-slate-700/40 hover:border-slate-600'
|
|
)}
|
|
>
|
|
{t === '' ? 'All' : (TYPE_LABELS[t] ?? t)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="text-xs text-slate-500">Category:</span>
|
|
<div className="flex flex-wrap gap-1">
|
|
{([
|
|
{ v: '', label: 'All' },
|
|
{ v: 'energy', label: 'Energy' },
|
|
{ v: 'metals', label: 'Metals' },
|
|
{ v: 'agri', label: 'Agri' },
|
|
{ v: 'equities', label: 'Equities' },
|
|
{ v: 'forex', label: 'Forex' },
|
|
{ v: 'crypto', label: 'Crypto' },
|
|
{ v: 'bonds', label: 'Bonds' },
|
|
{ v: 'volatility',label: 'Volatility'},
|
|
{ v: 'macro', label: 'Macro' },
|
|
{ v: 'sentiment', label: 'Sentiment'},
|
|
{ v: 'multi', label: 'Multi' },
|
|
]).map(({ v, label }) => (
|
|
<button
|
|
key={v}
|
|
onClick={() => setFilterCategory(v)}
|
|
className={clsx(
|
|
'px-2.5 py-1 rounded text-xs font-medium border transition-colors',
|
|
filterCategory === v
|
|
? 'bg-blue-600 text-white border-blue-500'
|
|
: 'bg-dark-700 text-slate-400 border-slate-700/40 hover:border-slate-600'
|
|
)}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-slate-500">Min importance:</span>
|
|
<div className="flex gap-1">
|
|
{[0, 1, 2, 3].map(n => (
|
|
<button
|
|
key={n}
|
|
onClick={() => setFilterImportance(n)}
|
|
className={clsx(
|
|
'px-2.5 py-1 rounded text-xs font-medium border transition-colors',
|
|
filterImportance === n
|
|
? 'bg-blue-600 text-white border-blue-500'
|
|
: 'bg-dark-700 text-slate-400 border-slate-700/40 hover:border-slate-600'
|
|
)}
|
|
>
|
|
{n === 0 ? 'Any' : '★'.repeat(n)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-slate-500">Period:</span>
|
|
<select
|
|
value={filterDays}
|
|
onChange={e => setFilterDays(Number(e.target.value))}
|
|
className="bg-dark-700 border border-slate-700/40 text-slate-300 text-xs rounded px-2 py-1"
|
|
>
|
|
{[30, 60, 90, 180, 365].map(d => (
|
|
<option key={d} value={d}>{d}d</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Report list */}
|
|
{isLoading || isFetching ? (
|
|
<div className="text-center py-12 text-slate-500">
|
|
<RefreshCw className="w-6 h-6 animate-spin mx-auto mb-2" />
|
|
Loading reports…
|
|
</div>
|
|
) : reports.length === 0 ? (
|
|
<div className="text-center py-16 space-y-3">
|
|
<div className="text-slate-600 text-4xl">📋</div>
|
|
<div className="text-slate-400 font-medium">No institutional reports yet</div>
|
|
<p className="text-slate-600 text-sm max-w-sm mx-auto">
|
|
Use the refresh buttons above to fetch reports. COT and EIA require API keys.
|
|
Earnings, VX, Central Bank RSS, and Sentiment fetch automatically.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
<div className="text-xs text-slate-500">{reports.length} report{reports.length > 1 ? 's' : ''}</div>
|
|
{(reports as InstitutionalReport[]).map(r => (
|
|
<ReportCard key={r.id} report={r} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|