Deploy Phase 4.7: AI & Tech Special Silo and create QUANT_ROADMAP.md
This commit is contained in:
Antigravity Agent
525
components/modules/tech/AiSpecialSilo.tsx
Normal file
525
components/modules/tech/AiSpecialSilo.tsx
Normal file
@@ -0,0 +1,525 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { LineChart, Line, ResponsiveContainer } from 'recharts';
|
||||
import 'katex/dist/katex.min.css';
|
||||
import TechMathModal from './TechMathModal';
|
||||
import {
|
||||
Cpu, AlertCircle, BookOpen, Activity, Zap, TrendingUp, TrendingDown,
|
||||
ArrowUpRight, ArrowDownRight, Minus, Server, Wallet
|
||||
} from 'lucide-react';
|
||||
|
||||
interface TickerMetricData {
|
||||
quarter: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
interface SupplyChainDataPoint {
|
||||
quarter: string;
|
||||
nvdaInvTurnover: number;
|
||||
aggregateObligations: number;
|
||||
velocityIndex: number;
|
||||
}
|
||||
|
||||
interface Payload {
|
||||
dates: string[];
|
||||
liveDataAvailable: boolean;
|
||||
timestamp: number;
|
||||
metrics: {
|
||||
monetizationGap: {
|
||||
name: string;
|
||||
tickers: Record<string, {
|
||||
current: number;
|
||||
previous: number;
|
||||
trend: 'UP' | 'DOWN' | 'FLAT';
|
||||
segmentRevenueGrowth: number;
|
||||
capexGrowth: number;
|
||||
roiToCapex: number;
|
||||
data: {
|
||||
quarter: string;
|
||||
monetizationGap: number;
|
||||
roiToCapex: number;
|
||||
segmentRevenueGrowth: number;
|
||||
capexGrowth: number;
|
||||
}[];
|
||||
}>;
|
||||
};
|
||||
supplyChain: {
|
||||
name: string;
|
||||
unit: string;
|
||||
currentVelocity: number;
|
||||
previousVelocity: number;
|
||||
currentTurnover: number;
|
||||
currentObligations: number;
|
||||
trend: 'UP' | 'DOWN' | 'FLAT';
|
||||
data: SupplyChainDataPoint[];
|
||||
};
|
||||
infrastructure: {
|
||||
name: string;
|
||||
tickers: Record<string, {
|
||||
currentDE: number;
|
||||
currentCapExDep: number;
|
||||
trendDE: 'UP' | 'DOWN' | 'FLAT';
|
||||
data: {
|
||||
quarter: string;
|
||||
de: number;
|
||||
capexDep: number;
|
||||
debt: number;
|
||||
equity: number;
|
||||
}[];
|
||||
}>;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default function AiSpecialSilo() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [payload, setPayload] = useState<Payload | null>(null);
|
||||
const [isMathModalOpen, setIsMathModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch('/api/tech/ai');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setPayload(data);
|
||||
} else {
|
||||
setError('Error fetching AI Tech Hyper-Leverage metrics.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fetch tech metrics error:', err);
|
||||
setError('Network error loading AI Special Silo data.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-8 text-slate-100 shadow-xl min-h-[450px] flex flex-col items-center justify-center space-y-4">
|
||||
<div className="w-10 h-10 rounded-full border-2 border-teal-400 border-t-transparent animate-spin" />
|
||||
<div className="text-slate-400 text-sm font-mono animate-pulse">Ingesting quarterly balance sheets & tech indicators...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !payload) {
|
||||
return (
|
||||
<div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 text-slate-100 shadow-xl min-h-[400px] flex items-center justify-center">
|
||||
<div className="text-rose-400 font-semibold flex items-center gap-2">
|
||||
<AlertCircle className="w-5 h-5" /> {error || 'Error loading data.'}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { monetizationGap, supplyChain, infrastructure } = payload.metrics;
|
||||
|
||||
// HSL Status Colors based on metric thresholds
|
||||
const getMonetizationStatus = () => {
|
||||
const gaps = Object.values(monetizationGap.tickers).map(t => t.current);
|
||||
const minGap = Math.min(...gaps);
|
||||
if (minGap < -15) return 'RED';
|
||||
if (minGap < 0) return 'AMBER';
|
||||
return 'GREEN';
|
||||
};
|
||||
|
||||
const getSupplyChainStatus = () => {
|
||||
const vel = supplyChain.currentVelocity;
|
||||
if (vel < 1.8 || supplyChain.trend === 'DOWN') return 'RED';
|
||||
if (vel < 3.0) return 'AMBER';
|
||||
return 'GREEN';
|
||||
};
|
||||
|
||||
const getInfrastructureStatus = () => {
|
||||
const ratios = Object.values(infrastructure.tickers).map(t => t.currentCapExDep);
|
||||
const maxRatio = Math.max(...ratios);
|
||||
const des = Object.values(infrastructure.tickers).map(t => t.currentDE);
|
||||
const maxDE = Math.max(...des);
|
||||
|
||||
if (maxRatio > 4.0 || maxDE > 1.2) return 'RED';
|
||||
if (maxRatio > 2.5 || maxDE > 0.8) return 'AMBER';
|
||||
return 'GREEN';
|
||||
};
|
||||
|
||||
const monetizationStatus = getMonetizationStatus();
|
||||
const supplyStatus = getSupplyChainStatus();
|
||||
const infraStatus = getInfrastructureStatus();
|
||||
|
||||
// Helper for trend icons
|
||||
const renderTrendIcon = (trend: 'UP' | 'DOWN' | 'FLAT', isDangerUp = false) => {
|
||||
const baseClass = "w-3.5 h-3.5 inline-block align-middle";
|
||||
if (trend === 'UP') {
|
||||
return <ArrowUpRight className={`${baseClass} ${isDangerUp ? 'text-rose-400' : 'text-emerald-400'}`} />;
|
||||
}
|
||||
if (trend === 'DOWN') {
|
||||
return <ArrowDownRight className={`${baseClass} ${isDangerUp ? 'text-emerald-400' : 'text-rose-400'}`} />;
|
||||
}
|
||||
return <Minus className={`${baseClass} text-slate-500`} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* ⚠️ Dynamic Rate-Limit Fallback Banner */}
|
||||
{!payload.liveDataAvailable && (
|
||||
<div className="bg-rose-955/40 border border-rose-800/80 text-rose-400 text-xs rounded-xl p-4 flex items-center gap-3 shadow-[0_0_15px_rgba(244,63,94,0.15)] animate-pulse">
|
||||
<AlertCircle className="w-5 h-5 text-rose-400 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<span className="font-bold font-mono uppercase tracking-wider block mb-0.5">[⚠️ API Limit - Fallback Archive Active]</span>
|
||||
Real-time API balance sheet fetches are rate-limited (FMP HTTP 429). The workstation has initialized fallback calculations using the high-fidelity historical archive.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* HEADER SECTION */}
|
||||
<div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 text-slate-100 shadow-xl relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-teal-500/10 rounded-full blur-3xl -z-10" />
|
||||
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<div className="space-y-1">
|
||||
<span className="text-teal-400 text-xs font-semibold uppercase tracking-wider">AI & Tech Silo</span>
|
||||
<h2 className="text-2xl font-extrabold text-white flex items-center gap-2">
|
||||
<Zap className="text-teal-400 w-6 h-6" /> AI Hyper-Leverage & CapEx Matrix
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400">
|
||||
Monitors Big Tech capital expenditures, segment revenues, and inventory velocities to diagnose infrastructure bubbles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 w-full md:w-auto justify-end">
|
||||
<button
|
||||
onClick={() => setIsMathModalOpen(true)}
|
||||
className="flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-slate-955/80 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition-all font-semibold text-xs tracking-wider text-teal-400 w-full md:w-auto justify-center h-11 cursor-pointer"
|
||||
>
|
||||
<BookOpen className="w-4 h-4" />
|
||||
<span>📖 Modulerklärung</span>
|
||||
</button>
|
||||
|
||||
<div className="bg-slate-955/80 border border-slate-800 rounded-xl px-4 py-2 text-right shrink-0 h-11 flex flex-col justify-center">
|
||||
<div className="text-[9px] text-slate-500 uppercase font-mono">Archive State</div>
|
||||
<div className="font-mono text-xs text-slate-300">
|
||||
{new Date(payload.timestamp).toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 🚥 3 LARGE GLOWING NEON-AMPEL CARDS */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
{/* CARD 1: ROI-to-CapEx & Monetization Gap */}
|
||||
<div className="bg-slate-900/60 backdrop-blur-md border border-slate-850 rounded-2xl p-5 relative overflow-hidden shadow-lg flex flex-col justify-between min-h-[140px]">
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-indigo-500/10 to-transparent rounded-full blur-2xl pointer-events-none" />
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="space-y-1">
|
||||
<div className="text-[10px] text-indigo-400 uppercase font-bold tracking-widest font-mono">1. ROI-to-CapEx & Monetization Gap</div>
|
||||
<div className="text-lg font-black text-white leading-tight">Monetization Gap</div>
|
||||
<div className="text-[10px] text-slate-400">YoY Segment Rev Growth minus CapEx Growth</div>
|
||||
</div>
|
||||
|
||||
<span className={`w-3.5 h-3.5 rounded-full ${
|
||||
monetizationStatus === 'GREEN' ? 'bg-emerald-500 shadow-[0_0_10px_#10b981]' :
|
||||
monetizationStatus === 'AMBER' ? 'bg-amber-500 shadow-[0_0_10px_#fbbf24]' :
|
||||
'bg-rose-500 shadow-[0_0_10px_#f43f5e] animate-pulse'
|
||||
}`} />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-slate-850 flex justify-between items-end">
|
||||
<div>
|
||||
<div className="text-[9px] uppercase font-mono text-slate-500">Max Divergence</div>
|
||||
<div className="font-mono text-xl font-bold text-slate-200">
|
||||
{Math.min(...Object.values(monetizationGap.tickers).map(t => t.current)).toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-[9px] uppercase font-mono text-slate-500">Global Trend</div>
|
||||
<div className="text-xs font-semibold text-slate-300 flex items-center gap-1 justify-end">
|
||||
{renderTrendIcon(monetizationStatus === 'GREEN' ? 'UP' : 'DOWN')}
|
||||
<span>{monetizationStatus === 'GREEN' ? 'Stable' : monetizationStatus === 'AMBER' ? 'Diverging' : 'Bubble Risk'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CARD 2: Nvidia Supply-Chain Velocity */}
|
||||
<div className="bg-slate-900/60 backdrop-blur-md border border-slate-850 rounded-2xl p-5 relative overflow-hidden shadow-lg flex flex-col justify-between min-h-[140px]">
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-teal-500/10 to-transparent rounded-full blur-2xl pointer-events-none" />
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="space-y-1">
|
||||
<div className="text-[10px] text-teal-400 uppercase font-bold tracking-widest font-mono">2. Supply-Chain Commitments</div>
|
||||
<div className="text-lg font-black text-white leading-tight">Nvidia SC Velocity</div>
|
||||
<div className="text-[10px] text-slate-400">Buyer commitments relative to NVDA inventory</div>
|
||||
</div>
|
||||
|
||||
<span className={`w-3.5 h-3.5 rounded-full ${
|
||||
supplyStatus === 'GREEN' ? 'bg-emerald-500 shadow-[0_0_10px_#10b981]' :
|
||||
supplyStatus === 'AMBER' ? 'bg-amber-500 shadow-[0_0_10px_#fbbf24]' :
|
||||
'bg-rose-500 shadow-[0_0_10px_#f43f5e] animate-pulse'
|
||||
}`} />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-slate-850 flex justify-between items-end">
|
||||
<div>
|
||||
<div className="text-[9px] uppercase font-mono text-slate-500">Velocity Index</div>
|
||||
<div className="font-mono text-xl font-bold text-slate-200">
|
||||
{supplyChain.currentVelocity}x
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-[9px] uppercase font-mono text-slate-500">NVDA Inv Turnover</div>
|
||||
<div className="font-mono text-xs font-bold text-slate-355">
|
||||
{supplyChain.currentTurnover}x
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CARD 3: Tech Infrastructure Leverage */}
|
||||
<div className="bg-slate-900/60 backdrop-blur-md border border-slate-850 rounded-2xl p-5 relative overflow-hidden shadow-lg flex flex-col justify-between min-h-[140px]">
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-purple-500/10 to-transparent rounded-full blur-2xl pointer-events-none" />
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="space-y-1">
|
||||
<div className="text-[10px] text-purple-400 uppercase font-bold tracking-widest font-mono">3. Cluster Construction Leverage</div>
|
||||
<div className="text-lg font-black text-white leading-tight">Infrastructure Leverage</div>
|
||||
<div className="text-[10px] text-slate-400">Aggressive CapEx-to-Depreciation ratios</div>
|
||||
</div>
|
||||
|
||||
<span className={`w-3.5 h-3.5 rounded-full ${
|
||||
infraStatus === 'GREEN' ? 'bg-emerald-500 shadow-[0_0_10px_#10b981]' :
|
||||
infraStatus === 'AMBER' ? 'bg-amber-500 shadow-[0_0_10px_#fbbf24]' :
|
||||
'bg-rose-500 shadow-[0_0_10px_#f43f5e] animate-pulse'
|
||||
}`} />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-slate-850 flex justify-between items-end">
|
||||
<div>
|
||||
<div className="text-[9px] uppercase font-mono text-slate-500">Max CapEx/Dep</div>
|
||||
<div className="font-mono text-xl font-bold text-slate-200">
|
||||
{Math.max(...Object.values(infrastructure.tickers).map(t => t.currentCapExDep)).toFixed(1)}x
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-[9px] uppercase font-mono text-slate-500">Structural Debt</div>
|
||||
<div className="font-mono text-xs font-bold text-slate-355">
|
||||
Max D/E: {Math.max(...Object.values(infrastructure.tickers).map(t => t.currentDE)).toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* DETAILED LEDGER GRID */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
{/* PANEL A: ROI-TO-CAPEX & MONETIZATION GAPS */}
|
||||
<div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
|
||||
<div className="space-y-0.5">
|
||||
<h3 className="text-sm font-bold text-white flex items-center gap-2">
|
||||
<Activity className="w-4 h-4 text-indigo-400" /> Monetization Gap & Segment Returns
|
||||
</h3>
|
||||
<p className="text-[10px] text-slate-400">
|
||||
Compares quarterly segment revenue growth trends against CapEx growth.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{Object.entries(monetizationGap.tickers).map(([ticker, metrics]) => {
|
||||
const currentGap = metrics.current;
|
||||
|
||||
const gapColorClass = currentGap >= 0
|
||||
? 'text-emerald-400'
|
||||
: currentGap >= -15
|
||||
? 'text-amber-400 font-semibold'
|
||||
: 'text-rose-400 font-bold animate-pulse';
|
||||
|
||||
const strokeColor = currentGap >= 0
|
||||
? '#10b981'
|
||||
: currentGap >= -15
|
||||
? '#fbbf24'
|
||||
: '#f43f5e';
|
||||
|
||||
return (
|
||||
<div key={ticker} className="bg-slate-950/40 border border-slate-850 rounded-xl p-3 flex justify-between items-center hover:bg-slate-955/60 transition-colors">
|
||||
<div className="space-y-0.5 w-1/4">
|
||||
<div className="text-xs font-bold text-slate-200">{ticker}</div>
|
||||
<div className="text-[9px] text-slate-500 font-mono">
|
||||
Seg Rev QoQ: {metrics.segmentRevenueGrowth > 0 ? '+' : ''}{metrics.segmentRevenueGrowth}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sparkline for Monetization Gap */}
|
||||
<div className="w-1/3 h-8">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={metrics.data}>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="monetizationGap"
|
||||
stroke={strokeColor}
|
||||
strokeWidth={1.5}
|
||||
dot={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="text-right w-1/3 space-y-0.5">
|
||||
<div className="text-xs font-mono text-slate-400">
|
||||
ROI: <span className="font-semibold text-slate-200">{metrics.roiToCapex}%</span>
|
||||
</div>
|
||||
<div className={`font-mono text-sm font-bold ${gapColorClass}`}>
|
||||
Gap: {currentGap > 0 ? '+' : ''}{currentGap}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PANEL B: TECH INFRASTRUCTURE LEVERAGE & CLUSTER HEALTH */}
|
||||
<div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
|
||||
<div className="space-y-0.5">
|
||||
<h3 className="text-sm font-bold text-white flex items-center gap-2">
|
||||
<Server className="w-4 h-4 text-purple-400" /> Cluster Construction & Leverage Ratios
|
||||
</h3>
|
||||
<p className="text-[10px] text-slate-400">
|
||||
Tracks structural debt loads and CapEx spending compared to depreciation rate vectors.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{Object.entries(infrastructure.tickers).map(([ticker, metrics]) => {
|
||||
const currentCapExDep = metrics.currentCapExDep;
|
||||
|
||||
const highlightClass = currentCapExDep > 4.0
|
||||
? 'text-rose-400 font-bold animate-pulse'
|
||||
: currentCapExDep > 2.5
|
||||
? 'text-amber-400 font-semibold'
|
||||
: 'text-emerald-400';
|
||||
|
||||
const strokeColor = currentCapExDep > 4.0
|
||||
? '#f43f5e'
|
||||
: currentCapExDep > 2.5
|
||||
? '#fbbf24'
|
||||
: '#10b981';
|
||||
|
||||
return (
|
||||
<div key={ticker} className="bg-slate-955/40 border border-slate-850 rounded-xl p-3 flex justify-between items-center hover:bg-slate-955/60 transition-colors">
|
||||
<div className="space-y-0.5 w-1/4">
|
||||
<div className="text-xs font-bold text-slate-200">{ticker}</div>
|
||||
<div className="text-[9px] text-slate-500 font-mono">
|
||||
D/E: {metrics.currentDE.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sparkline for D/E Ratio */}
|
||||
<div className="w-1/3 h-8">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={metrics.data}>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="de"
|
||||
stroke={strokeColor}
|
||||
strokeWidth={1.5}
|
||||
dot={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="text-right w-1/3">
|
||||
<div className="text-[9px] text-slate-500 uppercase font-mono">CapEx/Depreciation</div>
|
||||
<div className={`font-mono text-sm font-bold ${highlightClass}`}>
|
||||
{currentCapExDep.toFixed(1)}x
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* PANEL C: SUPPLY CHAIN FLOW DETAILS */}
|
||||
<div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-slate-850 pb-4">
|
||||
<div className="space-y-0.5">
|
||||
<h3 className="text-sm font-bold text-white flex items-center gap-2">
|
||||
<Cpu className="w-4 h-4 text-teal-400" /> Nvidia Supply-Chain Velocity Timeline
|
||||
</h3>
|
||||
<p className="text-[10px] text-slate-400">
|
||||
Tracks the velocity of purchase commitments from top buyers (MSFT, GOOGL, META) relative to Nvidia's inventories.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-xs font-mono text-slate-400 bg-slate-955/80 border border-slate-850 px-3 py-1.5 rounded-xl">
|
||||
<div>
|
||||
NVDA Inventory: <span className="text-slate-200 font-semibold">{supplyChain.data[supplyChain.data.length - 1].aggregateObligations / 1000}B$</span>
|
||||
</div>
|
||||
<div className="border-l border-slate-800 pl-4">
|
||||
Commitments: <span className="text-slate-200 font-semibold">{supplyChain.currentObligations / 1000}B$</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse text-left text-xs text-slate-400 font-mono">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-850 text-[10px] text-slate-555 uppercase">
|
||||
<th className="py-2">Quarter</th>
|
||||
<th className="py-2 text-right">Nvidia Inventory Turnover</th>
|
||||
<th className="py-2 text-right">Top Buyer Commitments</th>
|
||||
<th className="py-2 text-right">Velocity Index</th>
|
||||
<th className="py-2 text-center">Trend Indicator</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-850">
|
||||
{supplyChain.data.map((row, idx) => {
|
||||
const prevRow = idx > 0 ? supplyChain.data[idx - 1] : row;
|
||||
const rowTrend = row.velocityIndex > prevRow.velocityIndex
|
||||
? 'UP'
|
||||
: row.velocityIndex < prevRow.velocityIndex
|
||||
? 'DOWN'
|
||||
: 'FLAT';
|
||||
|
||||
const velocityClass = row.velocityIndex < 2.0
|
||||
? 'text-rose-400 font-semibold font-bold'
|
||||
: row.velocityIndex < 3.0
|
||||
? 'text-amber-400'
|
||||
: 'text-emerald-400';
|
||||
|
||||
return (
|
||||
<tr key={row.quarter} className="hover:bg-slate-955/20 transition-colors">
|
||||
<td className="py-3 font-semibold text-slate-300">{row.quarter}</td>
|
||||
<td className="py-3 text-right text-slate-300">{row.nvdaInvTurnover.toFixed(2)}x</td>
|
||||
<td className="py-3 text-right text-slate-355">{(row.aggregateObligations / 1000).toFixed(1)}B$</td>
|
||||
<td className="py-3 text-right"><span className={velocityClass}>{row.velocityIndex.toFixed(2)}x</span></td>
|
||||
<td className="py-3 text-center">{renderTrendIcon(rowTrend, row.velocityIndex < 2.5)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modulerklärung Modal */}
|
||||
<TechMathModal
|
||||
isOpen={isMathModalOpen}
|
||||
onClose={() => setIsMathModalOpen(false)}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
192
components/modules/tech/TechMathModal.tsx
Normal file
192
components/modules/tech/TechMathModal.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import React from 'react';
|
||||
import { BookOpen, X, Cpu, Percent, Activity, Coins, ShieldAlert } from 'lucide-react';
|
||||
import 'katex/dist/katex.min.css';
|
||||
import { BlockMath, InlineMath } from 'react-katex';
|
||||
|
||||
interface TechMathModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function TechMathModal({ isOpen, onClose }: TechMathModalProps) {
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
if (isOpen) {
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
}
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-955/90 backdrop-blur-md p-4 sm:p-6 md:p-8">
|
||||
<div className="bg-slate-900 border border-slate-800/80 rounded-3xl w-full max-w-5xl h-[85vh] flex flex-col overflow-hidden shadow-2xl relative text-slate-350">
|
||||
|
||||
{/* Modal Header */}
|
||||
<div className="flex justify-between items-center px-6 py-4 bg-slate-950/50 border-b border-slate-800/80">
|
||||
<div>
|
||||
<h2 className="text-base font-bold bg-gradient-to-r from-teal-400 to-indigo-400 bg-clip-text text-transparent flex items-center gap-2">
|
||||
<BookOpen className="w-5 h-5 text-teal-400" /> English Quantitative AI & Tech Hyper-Leverage Handbook
|
||||
</h2>
|
||||
<p className="text-[10px] text-slate-500 font-mono">Infrastructure Investment & Overcapacity Early Warning System</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-slate-400 hover:text-slate-200 bg-slate-950/50 border border-slate-800 hover:border-slate-700 p-2 rounded-xl transition-all cursor-pointer flex items-center justify-center"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="flex-1 overflow-y-auto p-6 sm:p-8 space-y-8 text-slate-300 scrollbar-thin">
|
||||
|
||||
{/* Executive Summary */}
|
||||
<div className="bg-slate-950/30 rounded-2xl p-5 border border-slate-850 space-y-2">
|
||||
<h3 className="text-sm font-bold text-slate-100 flex items-center gap-2">
|
||||
<Cpu className="w-4 h-4 text-teal-400" /> Executive Overview
|
||||
</h3>
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
The AI Special Silo serves as a diagnostic matrix designed to evaluate structural imbalances in the artificial intelligence value chain. By monitoring capital expenditure (CapEx) intensity, tracking buyer-supplier inventories, and examining balance sheet debt dynamics, this quantitative handbook establishes the mathematical formulas used to detect the peak of the CapEx-Overinvestment Cycle in Big Tech before it manifests in broader market volatility.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Section 1: Monetization Gap */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-bold text-teal-400 uppercase tracking-wider font-mono flex items-center gap-1.5">
|
||||
<Percent className="w-3.5 h-3.5" /> 1. The Monetization Gap & ROI-to-CapEx Ratio
|
||||
</h4>
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
When technology companies deploy huge amounts of capital for AI clusters and computing nodes, standard revenue metrics may hide margin pressure. The Monetization Gap and ROI-to-CapEx metrics track this by isolating the growth of targeted cloud/AI segments against the velocity of capital investments:
|
||||
</p>
|
||||
<div className="bg-slate-955/40 p-5 rounded-2xl border border-slate-850 my-2 space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-300 mb-2 font-semibold">
|
||||
{"Formula for Monetization Gap (\\(G_{\\text{monetization}}\\)):"}
|
||||
</p>
|
||||
<BlockMath math="G_{\\text{monetization}, i, t} = \\Delta \\text{Rev}_{\\text{segment}, i, t} - \\Delta \\text{CapEx}_{i, t}" />
|
||||
<p className="text-xs text-slate-300 my-2 font-semibold">
|
||||
{"Formula for ROI-to-CapEx Ratio (\\(R_{\\text{ROI}}\\)):"}
|
||||
</p>
|
||||
<BlockMath math="R_{\\text{ROI}, i, t} = \\frac{\\text{Rev}_{\\text{segment}, i, t} - \\text{Rev}_{\\text{segment}, i, t-1}}{\\text{CapEx}_{i, t}} \\times 100" />
|
||||
<p className="text-[10px] text-slate-500 mt-3 font-mono leading-relaxed">
|
||||
{"Where:"}
|
||||
<br />
|
||||
{"- "}<InlineMath math="\\Delta \\text{Rev}_{\\text{segment}, i, t}" />{" is the quarter-over-quarter percentage growth rate of isolated Cloud/Segment revenue (e.g., Azure for MSFT, Google Cloud for GOOGL, Data Center for NVDA/AMD, Family of Apps for META)."}
|
||||
<br />
|
||||
{"- "}<InlineMath math="\\Delta \\text{CapEx}_{i, t}" />{" is the quarter-over-quarter percentage growth rate of Capital Expenditures."}
|
||||
<br />
|
||||
{"- "}<InlineMath math="\\text{CapEx}_{i, t}" />{" is the absolute quarterly capital expenditure of the firm in millions."}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
<strong className="text-teal-300">Strategic Rationale:</strong>{" A negative Monetization Gap (\\(G_{\\text{monetization}} < 0\\)) indicates that capital spending is growing faster than segment monetization, suggesting diminishing marginal returns. A collapsing ROI-to-CapEx ratio signals that the capital investment is failing to spark immediate segment growth, leading to eventual asset write-downs."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 2: Supply-Chain Velocity */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-bold text-teal-400 uppercase tracking-wider font-mono flex items-center gap-1.5">
|
||||
<Coins className="w-3.5 h-3.5" /> 2. Nvidia Supply-Chain Velocity Index
|
||||
</h4>
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
Supply-chain stress is a reliable leading indicator of demand contraction. We monitor the relationship between the key hardware supplier (Nvidia) and the primary cloud buyers (MSFT, GOOGL, META) by comparing buyers' future purchase commitments with the supplier's inventory speeds:
|
||||
</p>
|
||||
<div className="bg-slate-955/40 p-5 rounded-2xl border border-slate-850 my-2 space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-300 mb-2 font-semibold">Nvidia Inventory Turnover (Annualized):</p>
|
||||
<BlockMath math="\\text{Turnover}_{\\text{NVDA}, t} = \\frac{\\text{COGS}_{\\text{NVDA}, t}}{\\text{Inventory}_{\\text{NVDA}, t}} \\times 4" />
|
||||
<p className="text-xs text-slate-300 my-2 font-semibold">
|
||||
{"Supply-Chain Velocity Index (\\(V_{\\text{sc}}\\)):"}
|
||||
</p>
|
||||
<BlockMath math="V_{\\text{sc}, t} = \\frac{\\sum_{j \\in \\text{Buyers}} \\text{Purchase Obligations}_{j, t}}{\\text{Inventory}_{\\text{NVDA}, t}}" />
|
||||
<p className="text-[10px] text-slate-555 mt-3 font-mono leading-relaxed">
|
||||
{"Where:"}
|
||||
<br />
|
||||
{"- "}<InlineMath math="\\text{COGS}_{\\text{NVDA}, t}" />{" is Nvidia's quarterly Cost of Goods Sold."}
|
||||
<br />
|
||||
{"- "}<InlineMath math="\\text{Inventory}_{\\text{NVDA}, t}" />{" is Nvidia's total inventory value on its balance sheet."}
|
||||
<br />
|
||||
{"- "}<InlineMath math="\\text{Purchase Obligations}_{j, t}" />{" represents the forward purchase commitments disclosed in the notes of 10-Q filing reports by the buyers (MSFT, GOOGL, META)."}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
<strong className="text-teal-300">Supply-Chain Dynamics:</strong>{" A rising Velocity Index indicates tight capacity, where buyers' future orders are highly backed by cash-like commitments. If buyers start cutting purchase obligations or if NVDA's inventory builds up relative to COGS (declining turnover), the Velocity Index collapses, signaling a sharp correction in hardware demand 3-6 months before it impacts NVDA's reported revenues."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 3: Tech Infrastructure Leverage */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-bold text-teal-400 uppercase tracking-wider font-mono flex items-center gap-1.5">
|
||||
<Activity className="w-3.5 h-3.5" /> 3. Tech Infrastructure Leverage & Cluster Expansion
|
||||
</h4>
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
Aggressive cluster construction requires significant debt or capital consumption. We measure the balance sheet risk of massive computing nodes using the Debt-to-Equity (D/E) and CapEx-to-Depreciation ratios:
|
||||
</p>
|
||||
<div className="bg-slate-955/40 p-5 rounded-2xl border border-slate-850 my-2 space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-300 mb-2 font-semibold">Debt-to-Equity Shift Ratio:</p>
|
||||
<BlockMath math="\\text{D/E}_{i, t} = \\frac{\\text{Total Debt}_{i, t}}{\\text{Shareholders' Equity}_{i, t}}" />
|
||||
<p className="text-xs text-slate-300 my-2 font-semibold">
|
||||
{"CapEx-to-Depreciation Ratio (\\(R_{\\text{capex-dep}}\\)):"}
|
||||
</p>
|
||||
<BlockMath math="R_{\\text{capex-dep}, i, t} = \\frac{\\text{CapEx}_{i, t}}{\\text{Depreciation}_{i, t}}" />
|
||||
<p className="text-[10px] text-slate-555 mt-3 font-mono leading-relaxed">
|
||||
{"Where:"}
|
||||
<br />
|
||||
{"- "}<InlineMath math="\\text{Total Debt}_{i, t}" />{" represents short-term and long-term interest-bearing debt."}
|
||||
<br />
|
||||
{"- "}<InlineMath math="\\text{Depreciation}_{i, t}" />{" represents the quarterly depreciation expense, reflecting the wear-and-tear of existing physical server arrays."}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
<strong className="text-teal-300">Investment Health:</strong>{" A CapEx-to-Depreciation ratio exceeding 3.0x highlights hyper-aggressive server capacity expansion. When this occurs alongside rising Debt-to-Equity ratios, it indicates that the AI cluster construction is being funded by structural leverage, leaving the firm exposed to massive amortization expenses if monetization fails."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 4: Asymmetric Tech-Beta Expansions */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-bold text-teal-400 uppercase tracking-wider font-mono flex items-center gap-1.5">
|
||||
<ShieldAlert className="w-3.5 h-3.5" /> 4. Asymmetric Tech-Beta Expansion Equation
|
||||
</h4>
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
Investment hyper-leverage creates systematic feedback loops in equity markets. We model the amplification of tech sector risk (asymmetric beta expansion) using a non-linear scaling model:
|
||||
</p>
|
||||
<div className="bg-slate-955/40 p-5 rounded-2xl border border-slate-850 my-2 space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-300 mb-2 font-semibold">Systemic Tech Beta Model:</p>
|
||||
<BlockMath math="\\beta_{\\text{tech}, t} = \\beta_{0} \\times \\left(1 + \\gamma \\times \\frac{\\sum_{i} \\text{CapEx}_{i, t}}{\\sum_{i} \\text{Depreciation}_{i, t}}\\right) \\times e^{\\lambda \\times (1 - V_{\\text{sc}, t})}" />
|
||||
<p className="text-[10px] text-slate-555 mt-3 font-mono leading-relaxed">
|
||||
{"Where:"}
|
||||
<br />
|
||||
{"- "}<InlineMath math="\\beta_{0}" />{" is the baseline systematic tech beta (historically ~1.10)."}
|
||||
<br />
|
||||
{"- "}<InlineMath math="\\gamma" />{" represents the investment intensity multiplier (e.g. 0.05)."}
|
||||
<br />
|
||||
{"- "}<InlineMath math="\\lambda" />{" represents the supply-chain velocity damping constant (e.g. 0.12)."}
|
||||
<br />
|
||||
{"- "}<InlineMath math="V_{\\text{sc}, t}" />{" is the Supply-Chain Velocity Index calculated in Section 2."}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
<strong className="text-teal-300">Economic Rationale:</strong>{" This equation demonstrates that tech equity risk is not static. As CapEx outstrips depreciation (building massive infrastructure) and the Supply-Chain Velocity Index collapses (build-up of unsellable inventory), the systemic beta "}<InlineMath math="\\beta_{\\text{tech}, t}" />{" expands exponentially. Under these parameters, any minor disappointment in earnings results in an asymmetric downward repricing."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user