393 lines
14 KiB
TypeScript
393 lines
14 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Link } from "react-router";
|
|
import Navbar from "../components/Navbar";
|
|
import type { TradingDecision } from "../types/agents";
|
|
|
|
interface StockRow {
|
|
id: string;
|
|
ticker: string;
|
|
currentPrice: number | null;
|
|
position: number;
|
|
rsi: number | null;
|
|
analysis: TradingDecision | null;
|
|
loading: boolean;
|
|
}
|
|
|
|
export const meta = () => {
|
|
return [
|
|
{ title: "Portfolio Analysis - AITrader" },
|
|
{ name: "description", content: "Analyze your stock portfolio with AI trading insights" },
|
|
];
|
|
};
|
|
|
|
export default function Analyze() {
|
|
const [stocks, setStocks] = useState<StockRow[]>([]);
|
|
const [newTicker, setNewTicker] = useState("");
|
|
|
|
// Load Alpaca portfolio and database stocks on mount
|
|
useEffect(() => {
|
|
const loadPortfolio = async () => {
|
|
try {
|
|
// Fetch both Alpaca positions and database stocks
|
|
const [positionsRes, dbStocksRes] = await Promise.all([
|
|
fetch("/api/alpaca/positions"),
|
|
fetch("/api/stocks"),
|
|
]);
|
|
|
|
const positions = positionsRes.ok ? await positionsRes.json() : [];
|
|
const dbStocks = dbStocksRes.ok ? await dbStocksRes.json() : [];
|
|
|
|
// Create a set of tickers from Alpaca positions for quick lookup
|
|
const alpacaTickers = new Set(positions.map((p: { ticker: string }) => p.ticker));
|
|
|
|
// Build stocks array for Alpaca positions
|
|
const alpacaStocks = await Promise.all(
|
|
positions.map(async (p: { ticker: string; qty: number }) => {
|
|
try {
|
|
const quoteRes = await fetch(`/api/alpaca/quote/${p.ticker}`);
|
|
const quote = quoteRes.ok ? await quoteRes.json() : null;
|
|
return {
|
|
id: `alpaca-${p.ticker}`,
|
|
ticker: p.ticker,
|
|
currentPrice: quote?.price ?? null,
|
|
position: p.qty,
|
|
rsi: null,
|
|
analysis: null,
|
|
loading: false,
|
|
};
|
|
} catch {
|
|
return {
|
|
id: `alpaca-${p.ticker}`,
|
|
ticker: p.ticker,
|
|
currentPrice: null,
|
|
position: p.qty,
|
|
rsi: null,
|
|
analysis: null,
|
|
loading: false,
|
|
};
|
|
}
|
|
})
|
|
);
|
|
|
|
// Add database stocks that are not in Alpaca positions with position=0
|
|
const dbOnlyStocks = [];
|
|
for (const stock of dbStocks) {
|
|
if (!alpacaTickers.has(stock.ticker)) {
|
|
try {
|
|
const quoteRes = await fetch(`/api/alpaca/quote/${stock.ticker}`);
|
|
const quote = quoteRes.ok ? await quoteRes.json() : null;
|
|
dbOnlyStocks.push({
|
|
id: `db-${stock.ticker}`,
|
|
ticker: stock.ticker,
|
|
currentPrice: quote?.price ?? null,
|
|
position: 0,
|
|
rsi: null,
|
|
analysis: null,
|
|
loading: false,
|
|
});
|
|
} catch {
|
|
dbOnlyStocks.push({
|
|
id: `db-${stock.ticker}`,
|
|
ticker: stock.ticker,
|
|
currentPrice: null,
|
|
position: 0,
|
|
rsi: null,
|
|
analysis: null,
|
|
loading: false,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
setStocks([...alpacaStocks, ...dbOnlyStocks]);
|
|
} catch (err) {
|
|
console.error("[analyze] Portfolio load error:", err);
|
|
}
|
|
};
|
|
|
|
loadPortfolio();
|
|
}, []);
|
|
|
|
// Refresh prices every minute
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
stocks.forEach((stock) => {
|
|
fetch(`/api/alpaca/quote/${stock.ticker}`)
|
|
.then((res) => res.ok ? res.json() : null)
|
|
.then((data) => {
|
|
if (data?.price) {
|
|
setStocks((s) => s.map((st) =>
|
|
st.ticker === stock.ticker ? { ...st, currentPrice: data.price } : st
|
|
));
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
});
|
|
}, 60000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [stocks]);
|
|
|
|
const addStock = async () => {
|
|
if (!newTicker.trim()) return;
|
|
const ticker = newTicker.trim().toUpperCase();
|
|
|
|
console.log("[analyze] Adding stock:", ticker);
|
|
|
|
// Check if ticker already exists
|
|
if (stocks.some((s) => s.ticker === ticker)) {
|
|
console.log("[analyze] Ticker already exists:", ticker);
|
|
return;
|
|
}
|
|
|
|
// Save to database first
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append("ticker", ticker);
|
|
await fetch("/api/stocks", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
} catch (err) {
|
|
console.error("[analyze] Error saving stock to DB:", err);
|
|
}
|
|
|
|
const newStock: StockRow = {
|
|
id: `db-${ticker}`,
|
|
ticker,
|
|
currentPrice: null,
|
|
position: 0,
|
|
rsi: null,
|
|
analysis: null,
|
|
loading: true,
|
|
};
|
|
|
|
setStocks((s) => [...s, newStock]);
|
|
setNewTicker("");
|
|
|
|
try {
|
|
console.log("[analyze] Fetching quote and positions for", ticker);
|
|
const [quoteRes, positionsRes] = await Promise.all([
|
|
fetch(`/api/alpaca/quote/${ticker}`),
|
|
fetch("/api/alpaca/positions"),
|
|
]);
|
|
|
|
console.log("[analyze] Quote response:", quoteRes.status);
|
|
console.log("[analyze] Positions response:", positionsRes.status);
|
|
|
|
const quote = quoteRes.ok ? await quoteRes.json() : null;
|
|
const positions = positionsRes.ok ? await positionsRes.json() : [];
|
|
|
|
console.log("[analyze] Quote data:", quote);
|
|
console.log("[analyze] Positions data:", positions);
|
|
|
|
const position = positions.find((p: { ticker: string; qty: number }) =>
|
|
p.ticker === ticker
|
|
)?.qty ?? 0;
|
|
|
|
console.log("[analyze] Found position:", position);
|
|
|
|
setStocks((s) => s.map((st) =>
|
|
st.ticker === ticker
|
|
? { ...st, loading: false, currentPrice: quote?.price ?? null, position }
|
|
: st
|
|
));
|
|
} catch (err) {
|
|
console.error("[analyze] Error adding stock:", err);
|
|
setStocks((s) => s.map((st) => st.ticker === ticker ? { ...st, loading: false } : st));
|
|
}
|
|
};
|
|
|
|
// Update all positions on mount and when stocks change
|
|
useEffect(() => {
|
|
if (stocks.length === 0) return;
|
|
|
|
const updatePositions = async () => {
|
|
try {
|
|
const res = await fetch("/api/alpaca/positions");
|
|
if (res.ok) {
|
|
const positions = await res.json();
|
|
setStocks((s) => s.map((st) => {
|
|
const pos = positions.find((p: { ticker: string; qty: number }) =>
|
|
p.ticker === st.ticker
|
|
);
|
|
return pos ? { ...st, position: pos.qty } : st;
|
|
}));
|
|
}
|
|
} catch (err) {
|
|
console.error("[analyze] Position update error:", err);
|
|
}
|
|
};
|
|
|
|
updatePositions();
|
|
}, [stocks.length]);
|
|
|
|
const removeStock = async (id: string) => {
|
|
const stock = stocks.find((s) => s.id === id);
|
|
if (!stock) return;
|
|
|
|
// Delete from database if this was a manually added stock (db- prefix)
|
|
if (id.startsWith("db-")) {
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append("_method", "DELETE");
|
|
formData.append("ticker", stock.ticker);
|
|
await fetch("/api/stocks", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
} catch (err) {
|
|
console.error("[analyze] Error deleting stock from DB:", err);
|
|
}
|
|
}
|
|
|
|
setStocks((s) => s.filter((stock) => stock.id !== id));
|
|
};
|
|
|
|
const runAnalysis = async (id: string, ticker: string) => {
|
|
setStocks((s) => s.map((st) => st.id === id ? { ...st, loading: true } : st));
|
|
|
|
try {
|
|
const [quoteRes, indicatorsRes] = await Promise.all([
|
|
fetch(`/api/alpaca/quote/${ticker}`),
|
|
fetch(`/api/indicators?symbol=${ticker}`),
|
|
]);
|
|
|
|
const quote = quoteRes.ok ? await quoteRes.json() : null;
|
|
const indicators = indicatorsRes.ok ? await indicatorsRes.json() : null;
|
|
|
|
const analysisRes = await fetch("/api/analyze", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ ticker }),
|
|
});
|
|
const analysis = analysisRes.ok ? await analysisRes.json() : null;
|
|
|
|
setStocks((s) => s.map((st) =>
|
|
st.id === id
|
|
? {
|
|
...st,
|
|
loading: false,
|
|
currentPrice: quote?.price ?? null,
|
|
rsi: indicators?.indicators?.rsi ?? null,
|
|
analysis,
|
|
}
|
|
: st
|
|
));
|
|
} catch {
|
|
setStocks((s) => s.map((st) => st.id === id ? { ...st, loading: false } : st));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
|
|
<Navbar />
|
|
<div className="mx-auto max-w-7xl px-6 py-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-6">Portfolio Analysis</h1>
|
|
|
|
<div className="bg-white rounded-xl shadow-lg p-6 mb-6">
|
|
<div className="flex gap-3 mb-4">
|
|
<input
|
|
type="text"
|
|
value={newTicker}
|
|
onChange={(e) => setNewTicker(e.target.value.toUpperCase())}
|
|
placeholder="Add ticker (e.g. AAPL)"
|
|
className="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
onKeyDown={(e) => e.key === "Enter" && addStock()}
|
|
/>
|
|
<button
|
|
onClick={addStock}
|
|
className="bg-blue-600 text-white px-6 py-2.5 rounded-lg font-medium hover:bg-blue-700 transition-colors"
|
|
>
|
|
Add Stock
|
|
</button>
|
|
</div>
|
|
|
|
{stocks.length === 0 ? (
|
|
<p className="text-gray-500 text-center py-8">No stocks added. Add a ticker to get started.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 font-medium text-gray-700">Ticker</th>
|
|
<th className="text-left py-3 px-4 font-medium text-gray-700">Price</th>
|
|
<th className="text-left py-3 px-4 font-medium text-gray-700">Position</th>
|
|
<th className="text-left py-3 px-4 font-medium text-gray-700">RSI</th>
|
|
<th className="text-left py-3 px-4 font-medium text-gray-700">Analysis</th>
|
|
<th className="text-left py-3 px-4 font-medium text-gray-700">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{stocks.map((stock) => (
|
|
<tr key={stock.id} className="border-b border-gray-100">
|
|
<td className="py-3 px-4 font-bold text-gray-900">
|
|
<Link to={`/analyze/${stock.ticker}`} className="text-blue-600 hover:underline">
|
|
{stock.ticker}
|
|
</Link>
|
|
</td>
|
|
<td className="py-3 px-4 text-gray-900">
|
|
{stock.currentPrice ? `$${stock.currentPrice.toFixed(2)}` : "-"}
|
|
</td>
|
|
<td className="py-3 px-4 text-gray-900 font-medium">
|
|
{stock.position}
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
{stock.rsi ? (
|
|
<span className={
|
|
stock.rsi > 70 ? "text-red-600" :
|
|
stock.rsi < 30 ? "text-green-600" : "text-gray-900"
|
|
}>
|
|
{stock.rsi.toFixed(2)}
|
|
</span>
|
|
) : "-"}
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
{stock.analysis ? (
|
|
<div>
|
|
<span className={`font-medium ${
|
|
stock.analysis.action === "buy" ? "text-green-600" :
|
|
stock.analysis.action === "sell" ? "text-red-600" : "text-gray-600"
|
|
}`}>
|
|
{stock.analysis.action.toUpperCase()}
|
|
</span>
|
|
<div className="text-xs text-gray-500">
|
|
Confidence: {(stock.analysis.confidence * 100).toFixed(0)}%
|
|
</div>
|
|
</div>
|
|
) : stock.loading ? (
|
|
<span className="text-blue-600">Analyzing...</span>
|
|
) : "-"}
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => runAnalysis(stock.id, stock.ticker)}
|
|
disabled={stock.loading}
|
|
className="bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700 disabled:opacity-50"
|
|
>
|
|
{stock.loading ? "Running..." : "Analyze"}
|
|
</button>
|
|
<button
|
|
onClick={async () => {
|
|
if (confirm(`Remove ${stock.ticker}?`)) {
|
|
await removeStock(stock.id);
|
|
}
|
|
}}
|
|
className="bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |