deepkoluguri
/
institutional-trader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Move StockDetailPanel directly under the search bar for better UX
Build Institutional Trader / build-and-deploy (push) Successful in 50s Details

This commit is contained in:
Deep Koluguri 2026-06-27 15:02:34 -04:00
parent 85e9e523d9
commit 1278b5d4eb
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/App.jsx
View File

@ -66,13 +66,11 @@ export default function App() {
</TabsList> </TabsList>
<TabsContent value="market" className="mt-6 space-y-6"> <TabsContent value="market" className="mt-6 space-y-6">
<MarketScreenerPanel onSelectSymbol={setSelectedSymbol} /> <MarketScreenerPanel
{selectedSymbol && ( selectedSymbol={selectedSymbol}
<StockDetailPanel onSelectSymbol={setSelectedSymbol}
symbol={selectedSymbol} onCloseSymbol={() => setSelectedSymbol(null)}
onClose={() => setSelectedSymbol(null)}
/> />
)}
</TabsContent> </TabsContent>
<TabsContent value="flow" className="mt-6"> <TabsContent value="flow" className="mt-6">

12
frontend/src/components/dashboard/MarketScreenerPanel.jsx
View File

@ -1,5 +1,6 @@
import { useState, useEffect, useCallback, useRef } from 'react'; import { useState, useEffect, useCallback, useRef } from 'react';
import MacroIndicatorsPanel from './MacroIndicatorsPanel'; import MacroIndicatorsPanel from './MacroIndicatorsPanel';
import StockDetailPanel from './StockDetailPanel';
const API_BASE = import.meta.env.VITE_API_URL || ''; const API_BASE = import.meta.env.VITE_API_URL || '';
@ -203,7 +204,7 @@ function SearchBar({ onResult, onClear }) {
} }
// ─── Main Component ─────────────────────────────────────────────────────────── // ─── Main Component ───────────────────────────────────────────────────────────
export default function MarketScreenerPanel({ onSelectSymbol }) { export default function MarketScreenerPanel({ selectedSymbol, onSelectSymbol, onCloseSymbol }) {
const [screenerData, setScreenerData] = useState(null); const [screenerData, setScreenerData] = useState(null);
const [leaderboard, setLeaderboard] = useState(null); const [leaderboard, setLeaderboard] = useState(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@ -308,6 +309,15 @@ export default function MarketScreenerPanel({ onSelectSymbol }) {
</div> </div>
</div> </div>
{selectedSymbol && (
<div className="p-5 border-b border-slate-700/40 bg-slate-900">
<StockDetailPanel
symbol={selectedSymbol}
onClose={onCloseSymbol}
/>
</div>
)}
{/* ─── Factor Grid ─────────────────────────────────────────────────── */} {/* ─── Factor Grid ─────────────────────────────────────────────────── */}
<div className="p-5 bg-slate-950/50"> <div className="p-5 bg-slate-950/50">
<div className="mb-6 bg-blue-950/20 border border-blue-900/50 p-4 rounded-lg flex items-start gap-3 text-sm text-slate-300 max-w-4xl shadow-inner"> <div className="mb-6 bg-blue-950/20 border border-blue-900/50 p-4 rounded-lg flex items-start gap-3 text-sm text-slate-300 max-w-4xl shadow-inner">