feat: Specialist Desks — per asset-class fundamental configs + report catalogue
- 7 pre-seeded desks (Forex, Metals, Agri, Energy, Indices, Crypto, Bonds) each with default fundamental drivers, macro regime sensitivities and price delta thresholds - Global report catalogue (specialist_reports) fully manual — add any report including non-calendar ones (e.g. Cocoa Grinding Report, ICCO) - Many-to-many report ↔ desk linking (report_desk_links table) - 12 default reports pre-seeded (COT, EIA, WASDE, FOMC, ECB, CPI, NFP…) - AI scorer injects SPECIALIST DESK context block for asset classes present in each scoring batch (upcoming reports, key drivers, regime sensitivity) - /specialist-desks page: desk sidebar + fundamentals editor + macro sensitivity tag editor + reports tab + global reports catalogue + modal to create/edit any report with desk assignment Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
OpenSquared
@@ -22,6 +22,7 @@ import SystemLogs from './pages/SystemLogs'
|
||||
import VaRAnalysis from './pages/VaRAnalysis'
|
||||
import PositionHistory from './pages/PositionHistory'
|
||||
import InstitutionalReports from './pages/InstitutionalReports'
|
||||
import SpecialistDesks from './pages/SpecialistDesks'
|
||||
import { useCycleWatcher } from './hooks/useApi'
|
||||
|
||||
function GlobalWatcher() {
|
||||
@@ -59,6 +60,7 @@ export default function App() {
|
||||
<Route path="/position-history" element={<PositionHistory />} />
|
||||
<Route path="/logs" element={<SystemLogs />} />
|
||||
<Route path="/institutional" element={<InstitutionalReports />} />
|
||||
<Route path="/specialist-desks" element={<SpecialistDesks />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import {
|
||||
LayoutDashboard, Globe, BarChart2, FlaskConical,
|
||||
History, Calendar, TrendingUp, Zap, DollarSign, Settings, BrainCircuit, Activity, BookOpen, FileBarChart, Brain, ShieldAlert, Microscope, ScrollText, Gauge, GitCompare, Building2
|
||||
History, Calendar, TrendingUp, Zap, DollarSign, Settings, BrainCircuit, Activity, BookOpen, FileBarChart, Brain, ShieldAlert, Microscope, ScrollText, Gauge, GitCompare, Building2, Users
|
||||
} from 'lucide-react'
|
||||
import { useGeoRiskScore, useAiStatus, usePortfolioSummary } from '../../hooks/useApi'
|
||||
import clsx from 'clsx'
|
||||
@@ -26,6 +26,7 @@ const nav = [
|
||||
{ to: '/backtest', icon: History, label: 'Backtest' },
|
||||
{ to: '/calendar', icon: Calendar, label: 'Calendar' },
|
||||
{ to: '/institutional', icon: Building2, label: 'Inst. Reports' },
|
||||
{ to: '/specialist-desks', icon: Users, label: 'Specialist Desks' },
|
||||
{ to: '/logs', icon: ScrollText, label: 'System Logs' },
|
||||
{ to: '/config', icon: Settings, label: 'Configuration' },
|
||||
]
|
||||
|
||||
@@ -1101,3 +1101,106 @@ export const useEvaluateInstrumentScan = () => {
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['pattern-lab-runs'] }),
|
||||
})
|
||||
}
|
||||
|
||||
// ── Specialist Desks ───────────────────────────────────────────────────────────
|
||||
|
||||
export type MacroSensitivity = { regime: string; effect: string }
|
||||
export type PriceDeltaThresholds = {
|
||||
significant_day: number; extreme_day: number
|
||||
significant_week: number; extreme_week: number
|
||||
}
|
||||
export type SpecialistReport = {
|
||||
id: string; name: string; source: string; cadence: string
|
||||
next_date: string | null; last_date: string | null
|
||||
importance: number; notes: string; url: string
|
||||
desks?: string[]
|
||||
created_at: string; updated_at: string
|
||||
}
|
||||
export type DeskConfig = {
|
||||
asset_class: string; display_name: string; icon: string
|
||||
fundamentals: string; macro_sensitivity: MacroSensitivity[]
|
||||
price_delta_thresholds: PriceDeltaThresholds; notes: string
|
||||
reports: SpecialistReport[]; updated_at: string
|
||||
}
|
||||
|
||||
export const useAllDeskConfigs = () =>
|
||||
useQuery<DeskConfig[]>({
|
||||
queryKey: ['desk-configs'],
|
||||
queryFn: () => api.get('/specialist-desks/configs').then(r => r.data),
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
export const useUpdateDeskConfig = () => {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: ({ asset_class, body }: { asset_class: string; body: Partial<DeskConfig> }) =>
|
||||
api.put(`/specialist-desks/configs/${asset_class}`, body).then(r => r.data),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['desk-configs'] }),
|
||||
})
|
||||
}
|
||||
|
||||
export const useAllSpecialistReports = () =>
|
||||
useQuery<SpecialistReport[]>({
|
||||
queryKey: ['specialist-reports'],
|
||||
queryFn: () => api.get('/specialist-desks/reports').then(r => r.data),
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
export const useCreateSpecialistReport = () => {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (body: Partial<SpecialistReport> & { desks?: string[] }) =>
|
||||
api.post('/specialist-desks/reports', body).then(r => r.data),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['specialist-reports'] })
|
||||
qc.invalidateQueries({ queryKey: ['desk-configs'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const useUpdateSpecialistReport = () => {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: ({ id, body }: { id: string; body: Partial<SpecialistReport> & { desks?: string[] } }) =>
|
||||
api.put(`/specialist-desks/reports/${id}`, body).then(r => r.data),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['specialist-reports'] })
|
||||
qc.invalidateQueries({ queryKey: ['desk-configs'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const useDeleteSpecialistReport = () => {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (id: string) => api.delete(`/specialist-desks/reports/${id}`).then(r => r.data),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['specialist-reports'] })
|
||||
qc.invalidateQueries({ queryKey: ['desk-configs'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const useLinkReportDesk = () => {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: ({ report_id, asset_class }: { report_id: string; asset_class: string }) =>
|
||||
api.post(`/specialist-desks/reports/${report_id}/link/${asset_class}`).then(r => r.data),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['specialist-reports'] })
|
||||
qc.invalidateQueries({ queryKey: ['desk-configs'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const useUnlinkReportDesk = () => {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: ({ report_id, asset_class }: { report_id: string; asset_class: string }) =>
|
||||
api.delete(`/specialist-desks/reports/${report_id}/link/${asset_class}`).then(r => r.data),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['specialist-reports'] })
|
||||
qc.invalidateQueries({ queryKey: ['desk-configs'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
682
frontend/src/pages/SpecialistDesks.tsx
Normal file
682
frontend/src/pages/SpecialistDesks.tsx
Normal file
@@ -0,0 +1,682 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
useAllDeskConfigs, useAllSpecialistReports,
|
||||
useUpdateDeskConfig, useCreateSpecialistReport,
|
||||
useUpdateSpecialistReport, useDeleteSpecialistReport,
|
||||
useLinkReportDesk, useUnlinkReportDesk,
|
||||
DeskConfig, SpecialistReport, MacroSensitivity,
|
||||
} from '../hooks/useApi'
|
||||
import {
|
||||
Users, FileText, Plus, Trash2, Save, X, Edit2,
|
||||
ChevronRight, Star, Link, ExternalLink, RefreshCw,
|
||||
AlertCircle, Calendar, BookOpen,
|
||||
} from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
const CADENCE_OPTIONS = ['daily', 'weekly', 'bi-weekly', 'monthly', '6-weekly', 'quarterly', 'annual', 'irregular']
|
||||
const DESK_ORDER = ['forex', 'metals', 'agri', 'energy', 'indices', 'crypto', 'bonds']
|
||||
|
||||
// ── Importance stars ───────────────────────────────────────────────────────────
|
||||
|
||||
function Stars({ n, onChange }: { n: number; onChange?: (v: number) => void }) {
|
||||
return (
|
||||
<span className="flex gap-0.5">
|
||||
{[1, 2, 3].map(i => (
|
||||
<Star
|
||||
key={i}
|
||||
onClick={() => onChange?.(i)}
|
||||
className={clsx('w-3.5 h-3.5 transition-colors',
|
||||
i <= n ? 'text-amber-400 fill-amber-400' : 'text-slate-700',
|
||||
onChange && 'cursor-pointer hover:text-amber-300')}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Report modal ───────────────────────────────────────────────────────────────
|
||||
|
||||
function ReportModal({
|
||||
initial, allDesks, onSave, onClose,
|
||||
}: {
|
||||
initial?: SpecialistReport & { desks?: string[] }
|
||||
allDesks: DeskConfig[]
|
||||
onSave: (data: any) => void
|
||||
onClose: () => void
|
||||
}) {
|
||||
const [name, setName] = useState(initial?.name ?? '')
|
||||
const [source, setSource] = useState(initial?.source ?? '')
|
||||
const [cadence, setCadence] = useState(initial?.cadence ?? 'monthly')
|
||||
const [nextDate, setNextDate] = useState(initial?.next_date ?? '')
|
||||
const [lastDate, setLastDate] = useState(initial?.last_date ?? '')
|
||||
const [importance, setImp] = useState(initial?.importance ?? 2)
|
||||
const [notes, setNotes] = useState(initial?.notes ?? '')
|
||||
const [url, setUrl] = useState(initial?.url ?? '')
|
||||
const [desks, setDesks] = useState<string[]>(initial?.desks ?? [])
|
||||
|
||||
const toggleDesk = (ac: string) =>
|
||||
setDesks(d => d.includes(ac) ? d.filter(x => x !== ac) : [...d, ac])
|
||||
|
||||
const handleSave = () => {
|
||||
if (!name.trim()) return
|
||||
onSave({ name: name.trim(), source, cadence, next_date: nextDate || null, last_date: lastDate || null, importance, notes, url, desks })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
||||
<div className="w-[520px] bg-dark-800 border border-slate-700/60 rounded-xl shadow-2xl overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-700/40">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="w-4 h-4 text-violet-400" />
|
||||
<span className="font-semibold text-slate-100 text-sm">
|
||||
{initial ? 'Edit Report' : 'New Report'}
|
||||
</span>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-slate-500 hover:text-slate-300 transition-colors">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="p-5 space-y-4 max-h-[70vh] overflow-y-auto">
|
||||
{/* Name + Source */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-500 uppercase tracking-wide mb-1 block">Report name *</label>
|
||||
<input value={name} onChange={e => setName(e.target.value)}
|
||||
placeholder="Cocoa Grinding Report"
|
||||
className="w-full px-3 py-2 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-200 focus:outline-none focus:border-violet-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-500 uppercase tracking-wide mb-1 block">Source / Issuer</label>
|
||||
<input value={source} onChange={e => setSource(e.target.value)}
|
||||
placeholder="ICCO, USDA, CFTC…"
|
||||
className="w-full px-3 py-2 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-200 focus:outline-none focus:border-violet-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cadence + Importance */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-500 uppercase tracking-wide mb-1 block">Cadence</label>
|
||||
<select value={cadence} onChange={e => setCadence(e.target.value)}
|
||||
className="w-full px-3 py-2 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-200 focus:outline-none focus:border-violet-500">
|
||||
{CADENCE_OPTIONS.map(c => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-500 uppercase tracking-wide mb-1 block">Importance</label>
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<Stars n={importance} onChange={setImp} />
|
||||
<span className="text-[10px] text-slate-500">{importance === 3 ? 'High' : importance === 2 ? 'Medium' : 'Low'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-500 uppercase tracking-wide mb-1 block">Next release date</label>
|
||||
<input type="date" value={nextDate} onChange={e => setNextDate(e.target.value)}
|
||||
className="w-full px-3 py-2 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-200 focus:outline-none focus:border-violet-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-500 uppercase tracking-wide mb-1 block">Last release date</label>
|
||||
<input type="date" value={lastDate} onChange={e => setLastDate(e.target.value)}
|
||||
className="w-full px-3 py-2 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-200 focus:outline-none focus:border-violet-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* URL */}
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-500 uppercase tracking-wide mb-1 block">URL (optional)</label>
|
||||
<input value={url} onChange={e => setUrl(e.target.value)}
|
||||
placeholder="https://…"
|
||||
className="w-full px-3 py-2 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-200 focus:outline-none focus:border-violet-500" />
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-500 uppercase tracking-wide mb-1 block">Notes</label>
|
||||
<textarea value={notes} onChange={e => setNotes(e.target.value)} rows={2}
|
||||
placeholder="Market impact context, watch for…"
|
||||
className="w-full px-3 py-2 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-300 focus:outline-none focus:border-violet-500 resize-none" />
|
||||
</div>
|
||||
|
||||
{/* Desk assignment */}
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-500 uppercase tracking-wide mb-2 block">Assign to desks</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{DESK_ORDER.map(ac => {
|
||||
const desk = allDesks.find(d => d.asset_class === ac)
|
||||
if (!desk) return null
|
||||
const active = desks.includes(ac)
|
||||
return (
|
||||
<button key={ac} onClick={() => toggleDesk(ac)}
|
||||
className={clsx(
|
||||
'flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs border transition-colors',
|
||||
active
|
||||
? 'bg-violet-700 border-violet-500 text-white'
|
||||
: 'border-slate-700 text-slate-500 hover:text-slate-300 hover:border-slate-500'
|
||||
)}>
|
||||
<span>{desk.icon}</span>
|
||||
<span>{desk.display_name}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-5 py-3 border-t border-slate-700/40 flex justify-end gap-2">
|
||||
<button onClick={onClose}
|
||||
className="px-3 py-1.5 text-xs text-slate-400 hover:text-slate-200 transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button onClick={handleSave} disabled={!name.trim()}
|
||||
className="flex items-center gap-1.5 px-4 py-1.5 bg-violet-700 hover:bg-violet-600 disabled:opacity-40 text-white text-xs font-semibold rounded transition-colors">
|
||||
<Save className="w-3.5 h-3.5" /> Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Macro sensitivity row editor ───────────────────────────────────────────────
|
||||
|
||||
function MacroSensitivityEditor({
|
||||
items, onChange,
|
||||
}: { items: MacroSensitivity[]; onChange: (v: MacroSensitivity[]) => void }) {
|
||||
const [regime, setRegime] = useState('')
|
||||
const [effect, setEffect] = useState('')
|
||||
|
||||
const add = () => {
|
||||
if (!regime.trim() || !effect.trim()) return
|
||||
onChange([...items, { regime: regime.trim(), effect: effect.trim() }])
|
||||
setRegime(''); setEffect('')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{items.map((s, i) => (
|
||||
<div key={i} className="flex items-center gap-2 bg-dark-700/60 rounded px-2 py-1.5 text-xs">
|
||||
<span className="font-mono text-violet-300 min-w-[120px] truncate">{s.regime}</span>
|
||||
<ChevronRight className="w-3 h-3 text-slate-600 flex-shrink-0" />
|
||||
<span className="text-slate-300 flex-1 truncate">{s.effect}</span>
|
||||
<button onClick={() => onChange(items.filter((_, j) => j !== i))}
|
||||
className="text-slate-600 hover:text-red-400 transition-colors flex-shrink-0">
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex gap-2">
|
||||
<input value={regime} onChange={e => setRegime(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && add()}
|
||||
placeholder="regime (e.g. risk_off)"
|
||||
className="w-36 px-2 py-1 text-xs bg-dark-700 border border-slate-700/50 rounded text-slate-300 placeholder-slate-600 focus:outline-none focus:border-violet-500 font-mono" />
|
||||
<input value={effect} onChange={e => setEffect(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && add()}
|
||||
placeholder="effect on this asset class"
|
||||
className="flex-1 px-2 py-1 text-xs bg-dark-700 border border-slate-700/50 rounded text-slate-300 placeholder-slate-600 focus:outline-none focus:border-violet-500" />
|
||||
<button onClick={add} disabled={!regime.trim() || !effect.trim()}
|
||||
className="px-2 py-1 bg-violet-800 hover:bg-violet-700 disabled:opacity-30 text-white rounded text-xs transition-colors">
|
||||
<Plus className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Main page ──────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function SpecialistDesks() {
|
||||
const { data: desks = [], isLoading: desksLoading } = useAllDeskConfigs()
|
||||
const { data: allReports = [] } = useAllSpecialistReports()
|
||||
const { mutateAsync: updateDesk, isPending: savingDesk } = useUpdateDeskConfig()
|
||||
const { mutateAsync: createReport } = useCreateSpecialistReport()
|
||||
const { mutateAsync: updateReport } = useUpdateSpecialistReport()
|
||||
const { mutate: deleteReport } = useDeleteSpecialistReport()
|
||||
const { mutate: linkReport } = useLinkReportDesk()
|
||||
const { mutate: unlinkReport } = useUnlinkReportDesk()
|
||||
|
||||
const orderedDesks = DESK_ORDER
|
||||
.map(ac => desks.find(d => d.asset_class === ac))
|
||||
.filter(Boolean) as DeskConfig[]
|
||||
|
||||
const [activeDeskAc, setActiveDeskAc] = useState<string>(DESK_ORDER[0])
|
||||
const [activeTab, setActiveTab] = useState<'config' | 'reports' | 'all-reports'>('config')
|
||||
|
||||
// Desk edit state
|
||||
const [editFund, setEditFund] = useState('')
|
||||
const [editMacro, setEditMacro] = useState<MacroSensitivity[]>([])
|
||||
const [editThresh, setEditThresh] = useState({ significant_day: 1.0, extreme_day: 3.0, significant_week: 2.0, extreme_week: 5.0 })
|
||||
const [editNotes, setEditNotes] = useState('')
|
||||
const [dirty, setDirty] = useState(false)
|
||||
|
||||
// Report modal
|
||||
const [reportModal, setReportModal] = useState<null | 'new' | (SpecialistReport & { desks?: string[] })>(null)
|
||||
|
||||
const activeDesk = desks.find(d => d.asset_class === activeDeskAc)
|
||||
|
||||
const selectDesk = (ac: string) => {
|
||||
const d = desks.find(x => x.asset_class === ac)
|
||||
if (!d) return
|
||||
setActiveDeskAc(ac)
|
||||
setEditFund(d.fundamentals)
|
||||
setEditMacro(d.macro_sensitivity ?? [])
|
||||
setEditThresh(d.price_delta_thresholds ?? { significant_day: 1, extreme_day: 3, significant_week: 2, extreme_week: 5 })
|
||||
setEditNotes(d.notes ?? '')
|
||||
setDirty(false)
|
||||
setActiveTab('config')
|
||||
}
|
||||
|
||||
// Init on first load
|
||||
const [initialized, setInitialized] = useState(false)
|
||||
if (!initialized && desks.length > 0) {
|
||||
setInitialized(true)
|
||||
selectDesk(DESK_ORDER[0])
|
||||
}
|
||||
|
||||
const handleSaveDesk = async () => {
|
||||
if (!activeDesk) return
|
||||
await updateDesk({
|
||||
asset_class: activeDeskAc,
|
||||
body: {
|
||||
display_name: activeDesk.display_name,
|
||||
icon: activeDesk.icon,
|
||||
fundamentals: editFund,
|
||||
macro_sensitivity: editMacro,
|
||||
price_delta_thresholds: editThresh,
|
||||
notes: editNotes,
|
||||
},
|
||||
})
|
||||
setDirty(false)
|
||||
}
|
||||
|
||||
const handleCreateReport = async (data: any) => {
|
||||
await createReport(data)
|
||||
setReportModal(null)
|
||||
}
|
||||
|
||||
const handleUpdateReport = async (data: any) => {
|
||||
if (!reportModal || reportModal === 'new') return
|
||||
await updateReport({ id: (reportModal as SpecialistReport).id, body: data })
|
||||
setReportModal(null)
|
||||
}
|
||||
|
||||
const deskReports = activeDesk?.reports ?? []
|
||||
const today = new Date().toISOString().slice(0, 10)
|
||||
|
||||
if (desksLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen text-slate-500">
|
||||
<RefreshCw className="w-5 h-5 animate-spin mr-2" /> Loading desks…
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-dark-900 text-slate-200 overflow-hidden">
|
||||
{/* ── Left: desk list ─────────────────────────────────────────────────── */}
|
||||
<div className="w-52 flex-shrink-0 border-r border-slate-700/40 flex flex-col">
|
||||
<div className="p-4 border-b border-slate-700/40">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-4 h-4 text-violet-400" />
|
||||
<span className="font-semibold text-sm text-slate-100">Specialist Desks</span>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-600 mt-1">Per asset-class fundamental configs + reports</p>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 py-2 overflow-y-auto">
|
||||
{orderedDesks.map(d => (
|
||||
<button
|
||||
key={d.asset_class}
|
||||
onClick={() => selectDesk(d.asset_class)}
|
||||
className={clsx(
|
||||
'w-full text-left px-4 py-3 flex items-center gap-3 border-b border-slate-700/20 transition-colors',
|
||||
d.asset_class === activeDeskAc
|
||||
? 'bg-violet-900/30 border-l-2 border-l-violet-500'
|
||||
: 'hover:bg-dark-700/50'
|
||||
)}>
|
||||
<span className="text-lg">{d.icon}</span>
|
||||
<div>
|
||||
<div className="text-xs font-medium text-slate-200">{d.display_name}</div>
|
||||
<div className="text-[10px] text-slate-600">{d.reports.length} report{d.reports.length !== 1 ? 's' : ''}</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* All reports link */}
|
||||
<button
|
||||
onClick={() => setActiveTab('all-reports')}
|
||||
className={clsx(
|
||||
'px-4 py-3 flex items-center gap-2 border-t border-slate-700/40 transition-colors text-xs',
|
||||
activeTab === 'all-reports'
|
||||
? 'bg-slate-700/50 text-slate-200'
|
||||
: 'text-slate-500 hover:text-slate-300'
|
||||
)}>
|
||||
<FileText className="w-3.5 h-3.5" />
|
||||
All Reports ({allReports.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Right: desk detail / all reports ──────────────────────────────── */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{activeTab === 'all-reports' ? (
|
||||
/* ══ ALL REPORTS VIEW ════════════════════════════════════════════ */
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg font-bold text-slate-100 flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-violet-400" />
|
||||
Report Catalogue
|
||||
</h1>
|
||||
<p className="text-xs text-slate-500 mt-0.5">All reports — manual and auto-tracked</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setReportModal('new')}
|
||||
className="flex items-center gap-1.5 bg-violet-700 hover:bg-violet-600 text-white px-3 py-2 rounded text-xs font-semibold transition-colors">
|
||||
<Plus className="w-3.5 h-3.5" /> New Report
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-dark-800 border border-slate-700/40 rounded-lg overflow-hidden">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="text-[10px] text-slate-500 uppercase tracking-wide border-b border-slate-700/40">
|
||||
<th className="text-left px-4 py-2">Report</th>
|
||||
<th className="text-left px-3 py-2">Source</th>
|
||||
<th className="text-left px-3 py-2">Cadence</th>
|
||||
<th className="text-left px-3 py-2">Next date</th>
|
||||
<th className="text-left px-3 py-2">Desks</th>
|
||||
<th className="text-left px-3 py-2">Imp.</th>
|
||||
<th className="px-3 py-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allReports.map(r => (
|
||||
<tr key={r.id} className="border-b border-slate-700/20 hover:bg-dark-700/40 transition-colors">
|
||||
<td className="px-4 py-2">
|
||||
<div className="font-medium text-slate-200">{r.name}</div>
|
||||
{r.notes && <div className="text-[10px] text-slate-600 truncate max-w-[200px]">{r.notes}</div>}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-slate-400">{r.source}</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className="bg-dark-700 rounded px-1.5 py-0.5 text-slate-400 font-mono">{r.cadence}</span>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
{r.next_date ? (
|
||||
<span className={clsx(
|
||||
'font-mono',
|
||||
r.next_date <= today ? 'text-orange-400' : 'text-slate-300'
|
||||
)}>{r.next_date}</span>
|
||||
) : <span className="text-slate-700">—</span>}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{(r.desks ?? []).map(ac => {
|
||||
const d = desks.find(x => x.asset_class === ac)
|
||||
return d ? (
|
||||
<span key={ac} className="text-[10px] bg-dark-700 rounded px-1 text-slate-400">
|
||||
{d.icon}
|
||||
</span>
|
||||
) : null
|
||||
})}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-2"><Stars n={r.importance} /></td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-1">
|
||||
{r.url && (
|
||||
<a href={r.url} target="_blank" rel="noopener noreferrer"
|
||||
className="text-slate-600 hover:text-violet-400 transition-colors">
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
)}
|
||||
<button onClick={() => setReportModal(r as any)}
|
||||
className="text-slate-600 hover:text-slate-300 transition-colors">
|
||||
<Edit2 className="w-3 h-3" />
|
||||
</button>
|
||||
<button onClick={() => deleteReport(r.id)}
|
||||
className="text-slate-600 hover:text-red-400 transition-colors">
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{allReports.length === 0 && (
|
||||
<tr><td colSpan={7} className="px-4 py-8 text-center text-slate-600">No reports yet</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
) : activeDesk ? (
|
||||
/* ══ DESK DETAIL ═════════════════════════════════════════════════ */
|
||||
<div className="p-6 space-y-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-slate-100 flex items-center gap-2">
|
||||
<span className="text-2xl">{activeDesk.icon}</span>
|
||||
{activeDesk.display_name}
|
||||
<span className="text-[10px] text-slate-500 uppercase tracking-widest font-normal ml-1">Specialist Desk</span>
|
||||
</h1>
|
||||
</div>
|
||||
{dirty && (
|
||||
<button onClick={handleSaveDesk} disabled={savingDesk}
|
||||
className="flex items-center gap-1.5 bg-emerald-700 hover:bg-emerald-600 disabled:opacity-50 text-white px-4 py-2 rounded text-xs font-semibold transition-colors">
|
||||
{savingDesk ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
|
||||
Save changes
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 bg-dark-800 rounded p-0.5 w-fit">
|
||||
{(['config', 'reports'] as const).map(tab => (
|
||||
<button key={tab} onClick={() => setActiveTab(tab)}
|
||||
className={clsx('px-4 py-1.5 text-xs rounded transition-colors font-medium flex items-center gap-1.5', {
|
||||
'bg-violet-700 text-white': activeTab === tab,
|
||||
'text-slate-500 hover:text-slate-300': activeTab !== tab,
|
||||
})}>
|
||||
{tab === 'config' ? <BookOpen className="w-3 h-3" /> : <FileText className="w-3 h-3" />}
|
||||
{tab === 'config' ? 'Fundamentals' : `Reports (${deskReports.length})`}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── CONFIG TAB ── */}
|
||||
{activeTab === 'config' && (
|
||||
<div className="space-y-5">
|
||||
{/* Key drivers */}
|
||||
<div className="bg-dark-800 border border-slate-700/40 rounded-lg p-4">
|
||||
<label className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2 block">
|
||||
Key Fundamental Drivers
|
||||
</label>
|
||||
<textarea
|
||||
value={editFund}
|
||||
onChange={e => { setEditFund(e.target.value); setDirty(true) }}
|
||||
rows={4}
|
||||
placeholder="Describe the primary price drivers for this asset class…"
|
||||
className="w-full px-3 py-2 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-300 focus:outline-none focus:border-violet-500 resize-none leading-relaxed"
|
||||
/>
|
||||
<p className="text-[10px] text-slate-600 mt-1">This block is injected into the AI scorer prompt for relevant patterns.</p>
|
||||
</div>
|
||||
|
||||
{/* Macro sensitivity */}
|
||||
<div className="bg-dark-800 border border-slate-700/40 rounded-lg p-4">
|
||||
<label className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2 block">
|
||||
Macro Regime Sensitivity
|
||||
</label>
|
||||
<MacroSensitivityEditor
|
||||
items={editMacro}
|
||||
onChange={v => { setEditMacro(v); setDirty(true) }}
|
||||
/>
|
||||
<p className="text-[10px] text-slate-600 mt-2">Format: regime identifier → market effect. Injected as signal context for the scorer.</p>
|
||||
</div>
|
||||
|
||||
{/* Price thresholds */}
|
||||
<div className="bg-dark-800 border border-slate-700/40 rounded-lg p-4">
|
||||
<label className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-3 block">
|
||||
Price Move Thresholds
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{([
|
||||
['significant_day', 'Significant (daily)'],
|
||||
['extreme_day', 'Extreme (daily)'],
|
||||
['significant_week', 'Significant (weekly)'],
|
||||
['extreme_week', 'Extreme (weekly)'],
|
||||
] as const).map(([key, label]) => (
|
||||
<div key={key}>
|
||||
<label className="text-[10px] text-slate-500 mb-1 block">{label}</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number" step="0.1" min="0"
|
||||
value={editThresh[key]}
|
||||
onChange={e => { setEditThresh(t => ({ ...t, [key]: parseFloat(e.target.value) || 0 })); setDirty(true) }}
|
||||
className="w-20 px-2 py-1.5 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-200 focus:outline-none focus:border-violet-500 font-mono"
|
||||
/>
|
||||
<span className="text-xs text-slate-500">%</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div className="bg-dark-800 border border-slate-700/40 rounded-lg p-4">
|
||||
<label className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2 block">Notes</label>
|
||||
<textarea
|
||||
value={editNotes}
|
||||
onChange={e => { setEditNotes(e.target.value); setDirty(true) }}
|
||||
rows={2}
|
||||
placeholder="Additional desk-specific notes…"
|
||||
className="w-full px-3 py-2 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-300 focus:outline-none focus:border-violet-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── REPORTS TAB ── */}
|
||||
{activeTab === 'reports' && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<p className="text-xs text-slate-500">
|
||||
Reports assigned to the <span className="text-violet-300">{activeDesk.display_name}</span> desk.
|
||||
They appear in the AI scorer's specialist context when relevant patterns are scored.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setReportModal('new')}
|
||||
className="flex items-center gap-1.5 bg-violet-700 hover:bg-violet-600 text-white px-3 py-1.5 rounded text-xs font-semibold transition-colors">
|
||||
<Plus className="w-3 h-3" /> New report
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{deskReports.map(r => {
|
||||
const overdue = r.next_date && r.next_date <= today
|
||||
return (
|
||||
<div key={r.id}
|
||||
className={clsx(
|
||||
'flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors',
|
||||
overdue ? 'border-orange-700/40 bg-orange-900/10' : 'border-slate-700/40 bg-dark-800'
|
||||
)}>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-0.5">
|
||||
<span className="text-xs font-semibold text-slate-100">{r.name}</span>
|
||||
{overdue && (
|
||||
<span className="flex items-center gap-1 text-[10px] text-orange-400">
|
||||
<AlertCircle className="w-3 h-3" /> Due
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-[10px] text-slate-500">
|
||||
<span>{r.source}</span>
|
||||
<span className="bg-dark-700 rounded px-1 font-mono">{r.cadence}</span>
|
||||
{r.next_date && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
Next: <span className={clsx('font-mono ml-0.5', overdue ? 'text-orange-400' : 'text-slate-300')}>{r.next_date}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{r.notes && <p className="text-[10px] text-slate-600 mt-0.5 italic">{r.notes}</p>}
|
||||
</div>
|
||||
<Stars n={r.importance} />
|
||||
<div className="flex items-center gap-1.5">
|
||||
{r.url && (
|
||||
<a href={r.url} target="_blank" rel="noopener noreferrer"
|
||||
className="text-slate-600 hover:text-violet-400 transition-colors">
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
)}
|
||||
<button onClick={() => setReportModal(r as any)}
|
||||
className="text-slate-600 hover:text-slate-300 transition-colors">
|
||||
<Edit2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => unlinkReport({ report_id: r.id, asset_class: activeDeskAc })}
|
||||
title="Remove from this desk"
|
||||
className="text-slate-600 hover:text-red-400 transition-colors">
|
||||
<Link className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{deskReports.length === 0 && (
|
||||
<div className="text-center py-12 text-slate-600">
|
||||
<FileText className="w-8 h-8 mx-auto mb-2 opacity-30" />
|
||||
<p className="text-sm">No reports assigned to this desk</p>
|
||||
<p className="text-xs mt-1">Create one with "New report" or assign existing ones from the global catalogue</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Unassigned reports that could be linked */}
|
||||
{(() => {
|
||||
const unlinked = allReports.filter(
|
||||
r => !(r.desks ?? []).includes(activeDeskAc)
|
||||
)
|
||||
if (unlinked.length === 0) return null
|
||||
return (
|
||||
<div className="border-t border-slate-700/30 pt-3">
|
||||
<p className="text-[10px] text-slate-600 uppercase tracking-wide mb-2">Add existing report to this desk</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{unlinked.map(r => (
|
||||
<button
|
||||
key={r.id}
|
||||
onClick={() => linkReport({ report_id: r.id, asset_class: activeDeskAc })}
|
||||
className="flex items-center gap-1 px-2.5 py-1 text-xs border border-dashed border-slate-700 text-slate-500 hover:border-violet-600 hover:text-violet-300 rounded transition-colors">
|
||||
<Plus className="w-3 h-3" /> {r.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* ── Report modal ─────────────────────────────────────────────────────── */}
|
||||
{reportModal && (
|
||||
<ReportModal
|
||||
initial={reportModal === 'new' ? undefined : reportModal}
|
||||
allDesks={desks}
|
||||
onSave={reportModal === 'new' ? handleCreateReport : handleUpdateReport}
|
||||
onClose={() => setReportModal(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user