henry
77032a3c3a
- Fix font colors (gray-900 for headings, gray-600 for secondary text) - Replace JSON pre block with styled orders table - Update design spec with visual details
77 lines
2.3 KiB
Markdown
77 lines
2.3 KiB
Markdown
# Stock Detail Page Implementation Design
|
|
|
|
**Goal:** Create a stock detail page at `/analyze/:ticker` showing TradingView chart, position, orders, and trading graph results.
|
|
|
|
**Architecture:** Dynamic route approach - separate route from analyze page with ticker parameter.
|
|
|
|
## Files to Create/Modify
|
|
|
|
1. `app/routes/analyze.ticker.tsx` - Stock detail page component
|
|
2. `app/components/TradingViewChart.tsx` - TradingView lightweight charts wrapper
|
|
3. `app/routes/api/alpaca/orders.ts` - Orders API endpoint
|
|
4. `app/routes.ts` - Add new route
|
|
|
|
## Page Structure
|
|
|
|
```
|
|
/analyze/:ticker
|
|
├── Navbar
|
|
├── Stock Header (ticker, current price)
|
|
├── TradingView Chart (full width)
|
|
├── Position Card (quantity, avg cost, current value)
|
|
│ - Styled card with gray-900 headings, gray-600 text
|
|
├── Orders Table (recent orders with status)
|
|
│ - Table with Side (green/red), Qty, Status, Filled Price, Filled At
|
|
│ - Empty state shows "No orders found for {ticker}"
|
|
└── Trading Graph Results (expandable sections)
|
|
├── Analyst Reports (fundamentals, technical, sentiment)
|
|
├── Debate Summary
|
|
└── Final Decision
|
|
```
|
|
|
|
## Data Sources
|
|
|
|
- **Chart**: TradingView widget with Alpaca data
|
|
- **Position**: `/api/alpaca/positions` filtered by ticker
|
|
- **Orders**: New `/api/alpaca/orders` endpoint
|
|
- **Analysis**: `/api/analyze` + TradingGraph results
|
|
|
|
## API Changes
|
|
|
|
### GET /api/alpaca/orders
|
|
Returns list of orders from Alpaca, optionally filtered by ticker.
|
|
|
|
```typescript
|
|
// Response format
|
|
{
|
|
orders: Array<{
|
|
id: string;
|
|
ticker: string;
|
|
qty: number;
|
|
side: "buy" | "sell";
|
|
status: "new" | "filled" | "canceled";
|
|
filled_at: string | null;
|
|
filled_avg_price: string;
|
|
}>
|
|
}
|
|
```
|
|
|
|
## Component Details
|
|
|
|
### TradingViewChart.tsx
|
|
- Uses TradingView lightweight charts library
|
|
- Props: `ticker`, `data` (price data array)
|
|
- Fetches historical bars from Alpaca API
|
|
- Renders candlestick chart
|
|
|
|
### analyze.ticker.tsx
|
|
- Loader function fetches position, orders, and runs analysis
|
|
- Uses `useLoaderData` for server-fetched data
|
|
- Client-side rerun of analysis via form action
|
|
|
|
## User Flow
|
|
|
|
1. User clicks ticker in analyze page table
|
|
2. Navigates to `/analyze/:ticker`
|
|
3. Page shows chart at top, position/orders/analysis below
|
|
4. "Rerun Analysis" button triggers TradingGraph |