dennisthiessen
d69df5df27
- Add shared UI primitives: Button, Field/Input/Select, PageHeader, Section, Callout, Tabs, Disclosure - Replace gradient buttons with single blue-accent btn-primary - Reserve gradient text for the brand wordmark only - Rework Scanner page onto the glass system; collapse explainer and glossary into a disclosure, move filters into a glass toolbar - Restructure Ticker Detail into tabs (Analysis / Indicators / S/R) with chart and recommendation always visible - Align Watchlist, Rankings, Admin, Login/Register to shared primitives - Unify stray indigo/violet/gray accents into the blue family Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
252 lines
10 KiB
TypeScript
252 lines
10 KiB
TypeScript
import { useMemo, useEffect, useState } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import { useTickerDetail } from '../hooks/useTickerDetail';
|
|
import { useFetchSymbolData } from '../hooks/useFetchSymbolData';
|
|
import { CandlestickChart } from '../components/charts/CandlestickChart';
|
|
import { ScoreCard } from '../components/ui/ScoreCard';
|
|
import { SkeletonCard } from '../components/ui/Skeleton';
|
|
import { SentimentPanel } from '../components/ticker/SentimentPanel';
|
|
import { FundamentalsPanel } from '../components/ticker/FundamentalsPanel';
|
|
import { IndicatorSelector } from '../components/ticker/IndicatorSelector';
|
|
import { RecommendationPanel } from '../components/ticker/RecommendationPanel';
|
|
import { Button } from '../components/ui/Button';
|
|
import { Callout } from '../components/ui/Callout';
|
|
import { Section } from '../components/ui/Section';
|
|
import { Tabs } from '../components/ui/Tabs';
|
|
import { formatPrice } from '../lib/format';
|
|
import type { TradeSetup } from '../lib/types';
|
|
|
|
const detailTabs = ['Analysis', 'Indicators', 'S/R Levels'] as const;
|
|
type DetailTab = (typeof detailTabs)[number];
|
|
|
|
function SectionError({ message, onRetry }: { message: string; onRetry?: () => void }) {
|
|
return (
|
|
<Callout variant="error" onRetry={onRetry}>
|
|
{message}
|
|
</Callout>
|
|
);
|
|
}
|
|
|
|
function timeAgo(iso: string): string {
|
|
const diff = Date.now() - new Date(iso).getTime();
|
|
const mins = Math.floor(diff / 60_000);
|
|
if (mins < 1) return 'just now';
|
|
if (mins < 60) return `${mins}m ago`;
|
|
const hrs = Math.floor(mins / 60);
|
|
if (hrs < 24) return `${hrs}h ago`;
|
|
const days = Math.floor(hrs / 24);
|
|
return `${days}d ago`;
|
|
}
|
|
|
|
interface DataStatusItem {
|
|
label: string;
|
|
available: boolean;
|
|
timestamp?: string | null;
|
|
}
|
|
|
|
function DataFreshnessBar({ items }: { items: DataStatusItem[] }) {
|
|
return (
|
|
<div className="glass-sm p-3 flex flex-wrap gap-4">
|
|
{items.map((item) => (
|
|
<div key={item.label} className="flex items-center gap-2">
|
|
<span className={`inline-block h-2 w-2 rounded-full shrink-0 ${
|
|
item.available ? 'bg-emerald-400 shadow-lg shadow-emerald-400/40' : 'bg-gray-600'
|
|
}`} />
|
|
<span className="text-xs text-gray-400">{item.label}</span>
|
|
{item.available && item.timestamp && (
|
|
<span className="text-[10px] text-gray-500">{timeAgo(item.timestamp)}</span>
|
|
)}
|
|
{!item.available && (
|
|
<span className="text-[10px] text-gray-600">no data</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function TickerDetailPage() {
|
|
const { symbol = '' } = useParams<{ symbol: string }>();
|
|
const { ohlcv, scores, srLevels, sentiment, fundamentals, trades } = useTickerDetail(symbol);
|
|
const ingestion = useFetchSymbolData();
|
|
const [activeTab, setActiveTab] = useState<DetailTab>('Analysis');
|
|
|
|
const dataStatus: DataStatusItem[] = useMemo(() => [
|
|
{
|
|
label: 'OHLCV',
|
|
available: !!ohlcv.data && ohlcv.data.length > 0,
|
|
timestamp: ohlcv.data?.[ohlcv.data.length - 1]?.created_at,
|
|
},
|
|
{
|
|
label: 'Sentiment',
|
|
available: !!sentiment.data && sentiment.data.count > 0,
|
|
timestamp: sentiment.data?.scores?.[0]?.timestamp,
|
|
},
|
|
{
|
|
label: 'Fundamentals',
|
|
available: !!fundamentals.data && fundamentals.data.fetched_at !== null,
|
|
timestamp: fundamentals.data?.fetched_at,
|
|
},
|
|
{
|
|
label: 'S/R Levels',
|
|
available: !!srLevels.data && srLevels.data.count > 0,
|
|
timestamp: srLevels.data?.levels?.[0]?.created_at,
|
|
},
|
|
{
|
|
label: 'Scores',
|
|
available: !!scores.data && scores.data.composite_score !== null,
|
|
timestamp: scores.data?.computed_at,
|
|
},
|
|
], [ohlcv.data, sentiment.data, fundamentals.data, srLevels.data, scores.data]);
|
|
|
|
// Log trades API errors but don't disrupt the page
|
|
useEffect(() => {
|
|
if (trades.error) {
|
|
console.error('Failed to fetch trade setups:', trades.error);
|
|
}
|
|
}, [trades.error]);
|
|
|
|
const setupsForSymbol: TradeSetup[] = useMemo(() => {
|
|
if (trades.error || !trades.data) return [];
|
|
return trades.data.filter((t) => t.symbol.toUpperCase() === symbol.toUpperCase());
|
|
}, [trades.data, trades.error, symbol]);
|
|
|
|
const longSetup = useMemo(
|
|
() => setupsForSymbol?.find((s) => s.direction === 'long'),
|
|
[setupsForSymbol],
|
|
);
|
|
|
|
const shortSetup = useMemo(
|
|
() => setupsForSymbol?.find((s) => s.direction === 'short'),
|
|
[setupsForSymbol],
|
|
);
|
|
|
|
// Use the highest-confidence setup for chart overlay fallback.
|
|
const tradeSetup: TradeSetup | undefined = useMemo(() => {
|
|
const candidates = [longSetup, shortSetup].filter(Boolean) as TradeSetup[];
|
|
if (candidates.length === 0) return undefined;
|
|
return candidates.sort((a, b) => (b.confidence_score ?? 0) - (a.confidence_score ?? 0))[0];
|
|
}, [longSetup, shortSetup]);
|
|
|
|
// Sort visible S/R levels by strength for the table (only levels within chart zones)
|
|
const sortedLevels = useMemo(() => {
|
|
if (!srLevels.data?.visible_levels) return [];
|
|
return [...srLevels.data.visible_levels].sort((a, b) => b.strength - a.strength);
|
|
}, [srLevels.data]);
|
|
|
|
return (
|
|
<div className="space-y-6 animate-slide-up">
|
|
{/* Header */}
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-semibold text-gray-100">{symbol.toUpperCase()}</h1>
|
|
<p className="text-sm text-gray-500 mt-0.5">Ticker Detail</p>
|
|
</div>
|
|
<Button onClick={() => ingestion.mutate(symbol)} loading={ingestion.isPending}>
|
|
{ingestion.isPending ? 'Fetching…' : 'Fetch Data'}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Data freshness bar */}
|
|
<DataFreshnessBar items={dataStatus} />
|
|
|
|
<RecommendationPanel symbol={symbol} longSetup={longSetup} shortSetup={shortSetup} />
|
|
|
|
{/* Chart — always visible */}
|
|
<Section title="Price Chart">
|
|
{ohlcv.isLoading && <SkeletonCard className="h-[400px]" />}
|
|
{ohlcv.isError && (
|
|
<SectionError
|
|
message={ohlcv.error instanceof Error ? ohlcv.error.message : 'Failed to load OHLCV data'}
|
|
onRetry={() => ohlcv.refetch()}
|
|
/>
|
|
)}
|
|
{ohlcv.data && (
|
|
<div className="glass p-5">
|
|
<CandlestickChart data={ohlcv.data} srLevels={srLevels.data?.levels} zones={srLevels.data?.zones} tradeSetup={tradeSetup} />
|
|
{srLevels.isError && (
|
|
<p className="mt-2 text-xs text-amber-500/80">S/R levels unavailable — chart shown without overlays</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Section>
|
|
|
|
{/* Detail tabs */}
|
|
<Tabs tabs={detailTabs} active={activeTab} onChange={setActiveTab} />
|
|
|
|
{activeTab === 'Analysis' && (
|
|
<div className="grid gap-6 lg:grid-cols-3 animate-fade-in">
|
|
<Section title="Scores">
|
|
{scores.isLoading && <SkeletonCard />}
|
|
{scores.isError && (
|
|
<SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
|
|
)}
|
|
{scores.data && (
|
|
<ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions} compositeBreakdown={scores.data.composite_breakdown} />
|
|
)}
|
|
</Section>
|
|
|
|
<Section title="Sentiment">
|
|
{sentiment.isLoading && <SkeletonCard />}
|
|
{sentiment.isError && (
|
|
<SectionError message={sentiment.error instanceof Error ? sentiment.error.message : 'Failed to load sentiment'} onRetry={() => sentiment.refetch()} />
|
|
)}
|
|
{sentiment.data && <SentimentPanel data={sentiment.data} />}
|
|
</Section>
|
|
|
|
<Section title="Fundamentals">
|
|
{fundamentals.isLoading && <SkeletonCard />}
|
|
{fundamentals.isError && (
|
|
<SectionError message={fundamentals.error instanceof Error ? fundamentals.error.message : 'Failed to load fundamentals'} onRetry={() => fundamentals.refetch()} />
|
|
)}
|
|
{fundamentals.data && <FundamentalsPanel data={fundamentals.data} />}
|
|
</Section>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'Indicators' && (
|
|
<div className="animate-fade-in">
|
|
<Section title="Technical Indicators">
|
|
<IndicatorSelector symbol={symbol} />
|
|
</Section>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'S/R Levels' && (
|
|
<div className="animate-fade-in">
|
|
<Section title="Support & Resistance Levels" hint="sorted by strength">
|
|
{sortedLevels.length === 0 ? (
|
|
<Callout variant="empty">No S/R levels detected for this ticker yet.</Callout>
|
|
) : (
|
|
<div className="glass overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
|
|
<th className="px-4 py-3">Type</th>
|
|
<th className="px-4 py-3">Price Level</th>
|
|
<th className="px-4 py-3">Strength</th>
|
|
<th className="px-4 py-3">Method</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sortedLevels.map((level) => (
|
|
<tr key={level.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
|
|
<td className="px-4 py-3">
|
|
<span className={level.type === 'support' ? 'text-emerald-400' : 'text-red-400'}>{level.type}</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-gray-200 font-mono">{formatPrice(level.price_level)}</td>
|
|
<td className="px-4 py-3 text-gray-200">{level.strength}</td>
|
|
<td className="px-4 py-3 text-gray-400">{level.detection_method}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Section>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|