92 lines
3.9 KiB
JavaScript
92 lines
3.9 KiB
JavaScript
import { useState } from 'react';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import OptionsFlowPanel from '@/components/dashboard/OptionsFlowPanel';
|
|
import ScannerPanel from '@/components/dashboard/ScannerPanel';
|
|
import BacktestPanel from '@/components/dashboard/BacktestPanel';
|
|
import MethodologyModal from '@/components/modals/MethodologyModal';
|
|
import ReversalAlerts from '@/components/alerts/ReversalAlerts';
|
|
import ConvergenceAlerts from '@/components/alerts/ConvergenceAlerts';
|
|
import MarketScreenerPanel from '@/components/dashboard/MarketScreenerPanel';
|
|
import StockDetailPanel from '@/components/dashboard/StockDetailPanel';
|
|
|
|
export default function App() {
|
|
const [selectedSymbol, setSelectedSymbol] = useState(null);
|
|
const [isMethodologyOpen, setIsMethodologyOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 text-slate-100">
|
|
<ConvergenceAlerts />
|
|
<ReversalAlerts />
|
|
<MethodologyModal isOpen={isMethodologyOpen} onClose={() => setIsMethodologyOpen(false)} />
|
|
|
|
{/* Header */}
|
|
<header className="border-b border-slate-800 bg-slate-900/50 backdrop-blur sticky top-0 z-40">
|
|
<div className="container mx-auto px-4 py-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
|
FactorLab: Transparent Market Research
|
|
</h1>
|
|
<p className="text-xs text-slate-400 mt-0.5">
|
|
We show you the facts fast — and we tell you what we've tested and what we haven't.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={() => setIsMethodologyOpen(true)}
|
|
className="text-xs font-semibold text-blue-400 hover:text-blue-300 transition-colors border border-blue-400/30 px-3 py-1.5 rounded bg-blue-500/10"
|
|
>
|
|
Methodology & Disclaimers
|
|
</button>
|
|
<div className="text-right border-l border-slate-700 pl-4 ml-2">
|
|
<div className="text-xs text-slate-400">Market Status</div>
|
|
<div className="text-sm font-semibold text-green-400">RTH • LIVE</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content — full width */}
|
|
<div className="container mx-auto px-4 py-6">
|
|
<Tabs defaultValue="market" className="w-full">
|
|
<TabsList className="bg-slate-900 border border-slate-800">
|
|
<TabsTrigger value="market" className="data-[state=active]:bg-slate-800">
|
|
📊 Market Analysis
|
|
</TabsTrigger>
|
|
<TabsTrigger value="flow" className="data-[state=active]:bg-slate-800">
|
|
🎯 Options Flow
|
|
</TabsTrigger>
|
|
<TabsTrigger value="scanner" className="data-[state=active]:bg-slate-800">
|
|
🔍 Multi-Signal Scanner
|
|
</TabsTrigger>
|
|
<TabsTrigger value="backtest" className="data-[state=active]:bg-slate-800">
|
|
📊 Backtests
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="market" className="mt-6 space-y-6">
|
|
<MarketScreenerPanel
|
|
selectedSymbol={selectedSymbol}
|
|
onSelectSymbol={setSelectedSymbol}
|
|
onCloseSymbol={() => setSelectedSymbol(null)}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="flow" className="mt-6">
|
|
<OptionsFlowPanel />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="scanner" className="mt-6">
|
|
<ScannerPanel />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="backtest" className="mt-6">
|
|
<BacktestPanel />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|