124 lines
4.6 KiB
JavaScript
124 lines
4.6 KiB
JavaScript
import { cn } from '@/utils/cn';
|
||
import { Badge } from '../../ui/Badge';
|
||
|
||
export function PriceContextSection({
|
||
row,
|
||
currentPrice,
|
||
vwap,
|
||
rthOpen,
|
||
pctVsRthOpen,
|
||
pctVsPriorClose,
|
||
spot,
|
||
moneynessPct,
|
||
session,
|
||
tapeAlign
|
||
}) {
|
||
return (
|
||
<div className="space-y-3">
|
||
<h4 className="text-sm font-semibold text-slate-300 mb-3 border-b border-slate-700 pb-2">📊 PRICE CONTEXT</h4>
|
||
<div className="space-y-2 text-xs">
|
||
<div>
|
||
<span className="text-slate-500">Current:</span>
|
||
<span className="ml-2 text-slate-200 font-semibold">
|
||
${typeof currentPrice === 'number' ? currentPrice.toFixed(2) : 'N/A'}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-slate-500">VWAP:</span>
|
||
<span className="ml-2 text-slate-200">
|
||
${typeof vwap === 'number' ? vwap.toFixed(2) : 'N/A'}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-slate-500">RTH Open:</span>
|
||
<span className="ml-2 text-slate-200">
|
||
${typeof rthOpen === 'number' ? rthOpen.toFixed(2) : 'N/A'}
|
||
</span>
|
||
</div>
|
||
{Math.abs(pctVsRthOpen) < 0.01 && Math.abs(pctVsPriorClose) < 0.01 ? (
|
||
<div>
|
||
<span className="text-slate-500">Price Change:</span>
|
||
<span className="ml-2 text-slate-300 font-semibold">0.00% (flat since open)</span>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div>
|
||
<span className="text-slate-500">vs RTH Open:</span>
|
||
<span className={cn(
|
||
"ml-2 font-semibold",
|
||
pctVsRthOpen > 0 ? "text-green-400" : "text-red-400"
|
||
)}>
|
||
{pctVsRthOpen > 0 ? '+' : ''}{typeof pctVsRthOpen === 'number' ? pctVsRthOpen.toFixed(2) : '0.00'}%
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-slate-500">vs Prior Close:</span>
|
||
<span className={cn(
|
||
"ml-2 font-semibold",
|
||
pctVsPriorClose > 0 ? "text-green-400" : "text-red-400"
|
||
)}>
|
||
{pctVsPriorClose > 0 ? '+' : ''}{typeof pctVsPriorClose === 'number' ? pctVsPriorClose.toFixed(2) : '0.00'}%
|
||
</span>
|
||
</div>
|
||
</>
|
||
)}
|
||
<div>
|
||
<span className="text-slate-500">Spot Price:</span>
|
||
<span className="ml-2 text-slate-200 font-semibold">
|
||
${typeof spot === 'number' ? spot.toFixed(2) : spot || 'N/A'}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-slate-500">Moneyness:</span>
|
||
<span className={cn(
|
||
"ml-2 font-semibold",
|
||
moneynessPct > 0 ? "text-green-400" : moneynessPct < 0 ? "text-red-400" : "text-slate-300"
|
||
)}>
|
||
{typeof moneynessPct === 'number' ? moneynessPct.toFixed(2) : moneynessPct || '0.00'}%
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-slate-500">Session:</span>
|
||
<span className="ml-2 text-slate-300">
|
||
<Badge variant="outline" className="text-xs">
|
||
{session}
|
||
</Badge>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tape Alignment Visual */}
|
||
{tapeAlign !== '—' ? (
|
||
<div className="mt-4 p-4 bg-green-900/30 border-2 border-green-500 rounded-lg">
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-4xl">✅</span>
|
||
<div>
|
||
<div className="text-xl font-bold text-green-400">TAPE ALIGNED</div>
|
||
<div className="text-sm text-gray-300">Price confirming flow direction ↑</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="mt-4 p-4 bg-orange-900/30 border-2 border-orange-500 rounded-lg">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-4xl">⚠️</span>
|
||
<div>
|
||
<div className="text-xl font-bold text-orange-400">NO TAPE ALIGNMENT</div>
|
||
<div className="text-sm text-gray-300">Price not confirming flow direction</div>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-xs text-gray-400">Current Price</div>
|
||
<div className="text-2xl font-bold text-orange-300">${typeof currentPrice === 'number' ? currentPrice.toFixed(2) : 'N/A'}</div>
|
||
<div className="text-xs text-gray-400">Expected: Upward momentum</div>
|
||
<div className="text-xs text-red-300">Reality: Flat/down</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|