Deploy Phase 4.7: AI & Tech Special Silo and create QUANT_ROADMAP.md
This commit is contained in:
Antigravity Agent
160
QUANT_ROADMAP.md
Normal file
160
QUANT_ROADMAP.md
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
# QuantSandbox System Architecture & Quantitative Roadmap
|
||||||
|
|
||||||
|
This document serves as the permanent, centralized system architecture design and master context for all future quantitative feature deployments.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Repository Status & Milestone Log
|
||||||
|
|
||||||
|
### Completed Phases & Integrated Silos
|
||||||
|
|
||||||
|
* **Phase 1.0: Portfolio Sandbox**
|
||||||
|
* *Features*: Real-time volatility estimators, portfolio optimization mechanics, and Swamy-Arora random effects panel regression solvers.
|
||||||
|
* *Status*: **Fully Operational (Production Lock)**.
|
||||||
|
* **Phase 2.0: Live GJR-GARCH Scanners**
|
||||||
|
* *Features*: Real-time rolling volatility forecasting engine that detects asymmetric leverage effects in equity volatility.
|
||||||
|
* *Status*: **Fully Operational (Production Lock)**.
|
||||||
|
* **Phase 3.0: Real FRED Macro Ingestion**
|
||||||
|
* *Features*: Real-time server-side API integration with Federal Reserve Economic Data (FRED). Ingests Personal Savings Rates, Credit Card Delinquencies, Housing Starts, and Case-Shiller indices.
|
||||||
|
* *Status*: **Fully Operational (Production Lock)**.
|
||||||
|
* **Phase 4.7: AI & Tech Hyper-Leverage Silo**
|
||||||
|
* *Features*: Track the AI CapEx-Overinvestment Cycle for NVDA, MSFT, GOOGL, META, and AMD. Calculates ROI-to-CapEx (Monetization Gap), Nvidia Supply-Chain Velocity Index, and Tech Infrastructure Leverage with a 60-minute caching layer.
|
||||||
|
* *Status*: **Fully Operational (Production Lock)**.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Master Backlog Architecture: The 6-Level Cockpit Matrix
|
||||||
|
|
||||||
|
The system tracks and synthesizes ~50 quantitative metrics divided into 6 distinct analytical levels to form a unified Market Regime Classifier.
|
||||||
|
|
||||||
|
### Level 1: Macro & Credit Layer (21 Metrics)
|
||||||
|
* **Inflation Vectors**: CPI YoY, Core CPI, PPI.
|
||||||
|
* **Sovereign Yields & Term Structure**: US 10Y Yield, US 2Y Yield, 2S10S Yield Spread, High-Yield Credit Spreads.
|
||||||
|
* **Central Bank Liquidity**: Fed Balance Sheet Assets, ECB Refinancing Rate, Fed Funds Rate, M2 Money Supply, Reverse Repo (RRP) Volumes, Treasury General Account (TGA) levels.
|
||||||
|
* **Macro Capacity**: S&P 500-to-GDP Ratio (Buffett Indicator Proxy).
|
||||||
|
* **Labor Market Dynamics**: Non-Farm Payrolls (NFP), Unemployment Rate, Initial Jobless Claims.
|
||||||
|
* **Housing & Credit Velocity**: Housing Starts, Mortgage Applications Index Proxy, S&P Case-Shiller Home Price Index.
|
||||||
|
* **Consumer Stress Indexes**: Credit Card Delinquency Rates, Personal Savings Rate.
|
||||||
|
|
||||||
|
### Level 2: Market Breadth Layer (8 Metrics)
|
||||||
|
* **Moving Average Spreads**: Percentage of S&P 500 constituents trading above their 50-day and 200-day Simple Moving Averages.
|
||||||
|
* **Volume Accumulation**: Cumulative Advance-Decline Line (A/D Line) scaled by volume.
|
||||||
|
* **McClellan Oscillator**: Index tracking short-term momentum shifts in net advances.
|
||||||
|
* **High-Low Index**: Ratio of stocks making new 52-week highs to total new highs/lows.
|
||||||
|
* **Sector Rotational Momentum**: Relative strength vectors of Defensive (XLU, XLP, XLV) vs. Cyclical/Growth (XLK, XLY, XLI) sectors.
|
||||||
|
* **Beta Distribution spreads**: Dispersion of individual constituent betas relative to index beta.
|
||||||
|
|
||||||
|
### Level 3: Sentiment & Positioning Flow Layer (7 Metrics)
|
||||||
|
* **Implied Volatility Structures**: VIX, VIX/VVIX term structure spreads.
|
||||||
|
* **Option Flows**: CBOE Equity Put/Call Volume Ratio (10-day moving average).
|
||||||
|
* **Retail Positioning**: AAII Bulls-Bears Spread, margin debt levels in retail brokerage accounts.
|
||||||
|
* **Institutional Positioning**: NAAIM Exposure Index, CFTC Commitments of Traders (COT) net non-commercial positioning in S&P 500 futures.
|
||||||
|
|
||||||
|
### Level 4: Corporate Fundamental & Accruals Layer (6 Metrics)
|
||||||
|
* **Accrual Integrity**: Sloan Ratio tracking earnings quality.
|
||||||
|
* **Bankruptcy Probability**: Altman Z-Score for manufacturing and non-manufacturing firms.
|
||||||
|
* **Earnings Manipulation**: Beneish M-Score tracking probability of financial statement manipulation.
|
||||||
|
* **Financial Strength**: Piotroski F-Score (9-point fundamental health checklist).
|
||||||
|
* **Margin Compression Dynamics**: Operating Margin YoY changes, Gross Margin trends.
|
||||||
|
|
||||||
|
### Level 5: Technical Momentum & Volatility Layer (5 Metrics)
|
||||||
|
* **Vol Forecasts**: Rolling GJR-GARCH downside volatility forecast vectors.
|
||||||
|
* **Relative Strength**: 14-day Relative Strength Index (RSI).
|
||||||
|
* **Trend Vectors**: MACD Signal Line Spreads.
|
||||||
|
* **Range Expansion**: Average True Range (ATR) normalized by price.
|
||||||
|
* **Beta Expansion Multipliers**: Realized beta shifts in high-beta tech components.
|
||||||
|
|
||||||
|
### Level 6: Alternative Data Layer (3 Metrics)
|
||||||
|
* **Supply Chain Disruption**: Supply-Chain Velocity Index (Aggregate buyer purchase obligations vs. hardware supplier inventories).
|
||||||
|
* **Employment Demand**: Tech sector job postings scraped from aggregators.
|
||||||
|
* **Credit Card Transactions**: Real-time consumer retail spending proxies.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Whale Reconnaissance Layer
|
||||||
|
|
||||||
|
Designed to track the equity holdings of institutional boutique Value and Small-Cap asset managers via SEC Form 13F filings.
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph TD
|
||||||
|
A[SEC 13F Filings Ingestion] --> B{Filter Boutique Managers}
|
||||||
|
B -- AUM < $5B & High Active Share --> C[Extract High-Conviction Long Positions]
|
||||||
|
B -- Large Index Funds --> D[Discard]
|
||||||
|
C --> E[Compute Quarterly Position Shifts]
|
||||||
|
E --> F[Generate Whale Satellite-Screener Score]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Screener Specifications
|
||||||
|
* **Target Universe**: Boutique managers with Asset Under Management (AUM) between $100M and $5B, exhibiting an Active Share $> 80\%$.
|
||||||
|
* **Quant Filters**:
|
||||||
|
1. **Concentration Index**: Top 10 holdings must exceed $50\%$ of the total reported portfolio value.
|
||||||
|
2. **Position Size Changes**: Track quarterly additions ($\Delta W_{i} > 2\%$) where the manager is actively building a stake.
|
||||||
|
3. **Co-ownership Clusters**: Identify stocks bought by 3 or more selected boutique managers simultaneously.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Deep-Dive Corporate Terminal Specifications
|
||||||
|
|
||||||
|
When evaluating an individual equity ticker, the terminal computes three quantitative risk markers:
|
||||||
|
|
||||||
|
### I. The Sloan Ratio (Earnings Quality Indicator)
|
||||||
|
Measures the proportion of earnings backed by non-cash accruals. A high ratio indicates that earnings are driven by accounting accruals rather than real operating cash flows.
|
||||||
|
|
||||||
|
#### Mathematical Formulation:
|
||||||
|
$$\text{Sloan Ratio} = \frac{\text{Net Income} - \text{Operating Cash Flow} - \text{Investing Cash Flow}}{\text{Total Assets}}$$
|
||||||
|
|
||||||
|
#### Alert Thresholds:
|
||||||
|
* **Stable Accruals**: $\le 5\%$ (Green)
|
||||||
|
* **Elevated Accruals**: $5\% < \text{Sloan Ratio} \le 10\%$ (Amber)
|
||||||
|
* **Toxic Accruals (Manipulative Risk)**: $> 10\%$ (Flashing Neon Rose-Red)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### II. Analyst Revision Impulse (ARI)
|
||||||
|
Tracks the momentum of consensus earnings estimates over a rolling 14-day window to identify positive or negative structural inflections before earnings reports.
|
||||||
|
|
||||||
|
#### Mathematical Formulation:
|
||||||
|
$$\text{ARI}_{t} = \sum_{h=1}^{H} \frac{E_{t}(\text{EPS}_{h}) - E_{t-14}(\text{EPS}_{h})}{E_{t-14}(\text{EPS}_{h})}$$
|
||||||
|
|
||||||
|
Where:
|
||||||
|
* $E_{t}(\text{EPS}_{h})$ is the consensus EPS estimate at day $t$ for fiscal period $h$.
|
||||||
|
* $H$ represents the number of forward fiscal quarters modeled (standard $H=4$).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### III. GJR-GARCH Downside Buffer
|
||||||
|
Calculates the conditional Value-at-Risk (VaR) and Expected Shortfall (ES) at a $99\%$ confidence level over a 10-day forward horizon using volatility projections from Module 1.
|
||||||
|
|
||||||
|
#### Mathematical Formulation:
|
||||||
|
$$\sigma_{t}^2 = \omega + \left(\alpha + \gamma I_{t-1}\right) \epsilon_{t-1}^2 + \beta \sigma_{t-1}^2$$
|
||||||
|
|
||||||
|
$$\text{VaR}_{99\%, 10D} = P_{t} \times \left(1 - e^{z_{0.01} \times \sqrt{10} \times \sigma_{t}}\right)$$
|
||||||
|
|
||||||
|
Where:
|
||||||
|
* $I_{t-1} = 1$ if $\epsilon_{t-1} < 0$, and $0$ otherwise (asymmetric shock multiplier).
|
||||||
|
* $z_{0.01}$ is the $1\%$ quantile of the standardized residual distribution (Student-t or Normal).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Multi-Regime Transition Classifier
|
||||||
|
|
||||||
|
The core cognitive brain of the sandbox dynamically adjusts allocation weights across our portfolio modules based on estimated macroeconomic and market states.
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph LR
|
||||||
|
A[Level 1-6 Inputs] --> B[Dynamic Z-Score Solver]
|
||||||
|
B --> C[Markov-Switching Model]
|
||||||
|
C --> D{Regime Output}
|
||||||
|
D -->|Regime 0: Risk-On| E[Overweight Equities/Growth]
|
||||||
|
D -->|Regime 1: Transition| F[Neutral / Hedge overlay]
|
||||||
|
D -->|Regime 2: Risk-Off| G[Overweight Bonds/Cash/Short Vol]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Model Specifications
|
||||||
|
1. **Regime Estimation**: A 3-state Markov-Switching Vector Autoregressive (MS-VAR) model classifying the market into:
|
||||||
|
* **Regime 0 (Expansion/Risk-On)**: Low volatility, positive macro surprise, expanding supply-chain velocity.
|
||||||
|
* **Regime 1 (Late-Cycle/Transition)**: Softening breadth, rising credit spreads, negative monetization gaps.
|
||||||
|
* **Regime 2 (Contraction/Risk-Off)**: High realized volatility, yield curve uninversion, consumer savings depletion.
|
||||||
|
2. **Dynamic Weight Allocation**:
|
||||||
|
$$\mathbf{W}_{t} = s_t \mathbf{W}_{\text{Risk-On}} + (1 - s_t) \mathbf{W}_{\text{Risk-Off}}$$
|
||||||
|
Where $s_t \in [0, 1]$ represents the filtered probability of being in the expansionary regime at time $t$.
|
||||||
448
app/api/tech/ai/route.ts
Normal file
448
app/api/tech/ai/route.ts
Normal file
@@ -0,0 +1,448 @@
|
|||||||
|
import { NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
|
interface QuarterData {
|
||||||
|
quarter: string;
|
||||||
|
date: string;
|
||||||
|
revenue: number;
|
||||||
|
segmentRevenue: number;
|
||||||
|
capex: number;
|
||||||
|
inventory: number;
|
||||||
|
cogs: number;
|
||||||
|
purchaseObligations: number;
|
||||||
|
totalDebt: number;
|
||||||
|
equity: number;
|
||||||
|
depreciation: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CompanyData {
|
||||||
|
ticker: string;
|
||||||
|
quarters: QuarterData[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Caching layer
|
||||||
|
let cache: { timestamp: number; data: any } | null = null;
|
||||||
|
const CACHE_TTL = 60 * 60 * 1000; // 60 minutes
|
||||||
|
|
||||||
|
// Authentic historical balance sheet items as defensive fallback for FMP HTTP 429 events
|
||||||
|
// Values are in Millions USD. Cover 8 quarters: Q3-2024 to Q2-2026.
|
||||||
|
const MOCK_TECH_AI_DATA: CompanyData[] = [
|
||||||
|
{
|
||||||
|
ticker: 'NVDA',
|
||||||
|
quarters: [
|
||||||
|
{ quarter: 'Q3-24', date: '2024-10-27', revenue: 35082, segmentRevenue: 29010, capex: 291, inventory: 5122, cogs: 8720, purchaseObligations: 0, totalDebt: 8460, equity: 48930, depreciation: 342 },
|
||||||
|
{ quarter: 'Q4-24', date: '2025-01-26', revenue: 37500, segmentRevenue: 31200, capex: 320, inventory: 5400, cogs: 9100, purchaseObligations: 0, totalDebt: 8460, equity: 52000, depreciation: 350 },
|
||||||
|
{ quarter: 'Q1-25', date: '2025-04-27', revenue: 39200, segmentRevenue: 33100, capex: 350, inventory: 5850, cogs: 9500, purchaseObligations: 0, totalDebt: 8500, equity: 55200, depreciation: 360 },
|
||||||
|
{ quarter: 'Q2-25', date: '2025-07-27', revenue: 41500, segmentRevenue: 35400, capex: 380, inventory: 6300, cogs: 10100, purchaseObligations: 0, totalDebt: 8520, equity: 58800, depreciation: 375 },
|
||||||
|
{ quarter: 'Q3-25', date: '2025-10-26', revenue: 44000, segmentRevenue: 37800, capex: 410, inventory: 6800, cogs: 10700, purchaseObligations: 0, totalDebt: 8550, equity: 62500, depreciation: 390 },
|
||||||
|
{ quarter: 'Q4-25', date: '2026-01-25', revenue: 46200, segmentRevenue: 39800, capex: 440, inventory: 7200, cogs: 11200, purchaseObligations: 0, totalDebt: 8600, equity: 66300, depreciation: 410 },
|
||||||
|
{ quarter: 'Q1-26', date: '2026-04-26', revenue: 47800, segmentRevenue: 41200, capex: 470, inventory: 7800, cogs: 11600, purchaseObligations: 0, totalDebt: 8650, equity: 70200, depreciation: 430 },
|
||||||
|
{ quarter: 'Q2-26', date: '2026-07-26', revenue: 49500, segmentRevenue: 42500, capex: 500, inventory: 8500, cogs: 12200, purchaseObligations: 0, totalDebt: 8700, equity: 74500, depreciation: 450 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ticker: 'MSFT',
|
||||||
|
quarters: [
|
||||||
|
{ quarter: 'Q3-24', date: '2024-09-30', revenue: 65585, segmentRevenue: 24092, capex: 14920, inventory: 1120, cogs: 21720, purchaseObligations: 23100, totalDebt: 77800, equity: 228900, depreciation: 4610 },
|
||||||
|
{ quarter: 'Q4-24', date: '2024-12-31', revenue: 68200, segmentRevenue: 25900, capex: 16100, inventory: 1150, cogs: 22400, purchaseObligations: 25500, totalDebt: 78200, equity: 234000, depreciation: 4800 },
|
||||||
|
{ quarter: 'Q1-25', date: '2025-03-31', revenue: 70800, segmentRevenue: 27400, capex: 17500, inventory: 1190, cogs: 23150, purchaseObligations: 28200, totalDebt: 79000, equity: 240500, depreciation: 5050 },
|
||||||
|
{ quarter: 'Q2-25', date: '2025-06-30', revenue: 72900, segmentRevenue: 28800, capex: 19000, inventory: 1210, cogs: 23800, purchaseObligations: 31000, totalDebt: 79200, equity: 247000, depreciation: 5300 },
|
||||||
|
{ quarter: 'Q3-25', date: '2025-09-30', revenue: 75500, segmentRevenue: 30100, capex: 20500, inventory: 1240, cogs: 24500, purchaseObligations: 34100, totalDebt: 80500, equity: 254200, depreciation: 5600 },
|
||||||
|
{ quarter: 'Q4-25', date: '2025-12-31', revenue: 77800, segmentRevenue: 31400, capex: 22100, inventory: 1260, cogs: 25100, purchaseObligations: 37200, totalDebt: 81000, equity: 261800, depreciation: 5900 },
|
||||||
|
{ quarter: 'Q1-26', date: '2026-03-31', revenue: 80200, segmentRevenue: 32500, capex: 23800, inventory: 1290, cogs: 25800, purchaseObligations: 39500, totalDebt: 82000, equity: 269500, depreciation: 6200 },
|
||||||
|
{ quarter: 'Q2-26', date: '2026-06-30', revenue: 82500, segmentRevenue: 33600, capex: 25500, inventory: 1320, cogs: 26400, purchaseObligations: 38200, totalDebt: 83500, equity: 278000, depreciation: 6500 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ticker: 'GOOGL',
|
||||||
|
quarters: [
|
||||||
|
{ quarter: 'Q3-24', date: '2024-09-30', revenue: 88268, segmentRevenue: 11353, capex: 12980, inventory: 980, cogs: 32610, purchaseObligations: 14800, totalDebt: 28100, equity: 285400, depreciation: 3280 },
|
||||||
|
{ quarter: 'Q4-24', date: '2024-12-31', revenue: 91400, segmentRevenue: 12100, capex: 13800, inventory: 1010, cogs: 33450, purchaseObligations: 16200, totalDebt: 28200, equity: 292000, depreciation: 3400 },
|
||||||
|
{ quarter: 'Q1-25', date: '2025-03-31', revenue: 94250, segmentRevenue: 12850, capex: 14900, inventory: 1040, cogs: 34300, purchaseObligations: 17900, totalDebt: 28500, equity: 299000, depreciation: 3550 },
|
||||||
|
{ quarter: 'Q2-25', date: '2025-06-30', revenue: 96800, segmentRevenue: 13500, capex: 15900, inventory: 1060, cogs: 35100, purchaseObligations: 19500, totalDebt: 28600, equity: 306500, depreciation: 3700 },
|
||||||
|
{ quarter: 'Q3-25', date: '2025-09-30', revenue: 99600, segmentRevenue: 14150, capex: 17000, inventory: 1080, cogs: 36000, purchaseObligations: 21400, totalDebt: 28800, equity: 314800, depreciation: 3900 },
|
||||||
|
{ quarter: 'Q4-25', date: '2025-12-31', revenue: 102400, segmentRevenue: 14800, capex: 18200, inventory: 1110, cogs: 36800, purchaseObligations: 23500, totalDebt: 29000, equity: 323500, depreciation: 4100 },
|
||||||
|
{ quarter: 'Q1-26', date: '2026-03-31', revenue: 105200, segmentRevenue: 15350, capex: 19500, inventory: 1130, cogs: 37700, purchaseObligations: 25200, totalDebt: 29200, equity: 332000, depreciation: 4300 },
|
||||||
|
{ quarter: 'Q2-26', date: '2026-06-30', revenue: 108100, segmentRevenue: 15900, capex: 21000, inventory: 1160, cogs: 38600, purchaseObligations: 24100, totalDebt: 29500, equity: 341000, depreciation: 4500 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ticker: 'META',
|
||||||
|
quarters: [
|
||||||
|
{ quarter: 'Q3-24', date: '2024-09-30', revenue: 40589, segmentRevenue: 39860, capex: 9210, inventory: 290, cogs: 7310, purchaseObligations: 9800, totalDebt: 17800, equity: 142100, depreciation: 2790 },
|
||||||
|
{ quarter: 'Q4-24', date: '2024-12-31', revenue: 42100, segmentRevenue: 41350, capex: 10100, inventory: 300, cogs: 7550, purchaseObligations: 11200, totalDebt: 17900, equity: 146000, depreciation: 2900 },
|
||||||
|
{ quarter: 'Q1-25', date: '2025-03-31', revenue: 43500, segmentRevenue: 42700, capex: 11100, inventory: 310, cogs: 7800, purchaseObligations: 12800, totalDebt: 18100, equity: 150200, depreciation: 3050 },
|
||||||
|
{ quarter: 'Q2-25', date: '2025-06-30', revenue: 44900, segmentRevenue: 44050, capex: 12200, inventory: 315, cogs: 8050, purchaseObligations: 14500, totalDebt: 18200, equity: 154800, depreciation: 3200 },
|
||||||
|
{ quarter: 'Q3-25', date: '2025-09-30', revenue: 46600, segmentRevenue: 45700, capex: 13400, inventory: 320, cogs: 8350, purchaseObligations: 16400, totalDebt: 18400, equity: 159500, depreciation: 3380 },
|
||||||
|
{ quarter: 'Q4-25', date: '2025-12-31', revenue: 48200, segmentRevenue: 47250, capex: 14700, inventory: 330, cogs: 8600, purchaseObligations: 18500, totalDebt: 18500, equity: 164200, depreciation: 3550 },
|
||||||
|
{ quarter: 'Q1-26', date: '2026-03-31', revenue: 49700, segmentRevenue: 48700, capex: 16100, inventory: 340, cogs: 8850, purchaseObligations: 20200, totalDebt: 18700, equity: 169500, depreciation: 3750 },
|
||||||
|
{ quarter: 'Q2-26', date: '2026-06-30', revenue: 51200, segmentRevenue: 50150, capex: 17500, inventory: 350, cogs: 9100, purchaseObligations: 19100, totalDebt: 18900, equity: 175000, depreciation: 3950 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ticker: 'AMD',
|
||||||
|
quarters: [
|
||||||
|
{ quarter: 'Q3-24', date: '2024-09-28', revenue: 6819, segmentRevenue: 3549, capex: 148, inventory: 4490, cogs: 3410, purchaseObligations: 1450, totalDebt: 2480, equity: 55810, depreciation: 142 },
|
||||||
|
{ quarter: 'Q4-24', date: '2024-12-28', revenue: 7100, segmentRevenue: 3750, capex: 160, inventory: 4620, cogs: 3520, purchaseObligations: 1600, totalDebt: 2480, equity: 56200, depreciation: 148 },
|
||||||
|
{ quarter: 'Q1-25', date: '2025-03-29', revenue: 7380, segmentRevenue: 3980, capex: 175, inventory: 4750, cogs: 3640, purchaseObligations: 1820, totalDebt: 2500, equity: 56650, depreciation: 155 },
|
||||||
|
{ quarter: 'Q2-25', date: '2025-06-28', revenue: 7650, segmentRevenue: 4200, capex: 190, inventory: 4830, cogs: 3750, purchaseObligations: 2050, totalDebt: 2510, equity: 57100, depreciation: 162 },
|
||||||
|
{ quarter: 'Q3-25', date: '2025-09-27', revenue: 7950, segmentRevenue: 4450, capex: 210, inventory: 4920, cogs: 3880, purchaseObligations: 2300, totalDebt: 2520, equity: 57600, depreciation: 170 },
|
||||||
|
{ quarter: 'Q4-25', date: '2025-12-27', revenue: 8250, segmentRevenue: 4700, capex: 230, inventory: 5010, cogs: 4010, purchaseObligations: 2550, totalDebt: 2540, equity: 58150, depreciation: 178 },
|
||||||
|
{ quarter: 'Q1-26', date: '2026-03-28', revenue: 8520, segmentRevenue: 4920, capex: 250, inventory: 5120, cogs: 4120, purchaseObligations: 2780, totalDebt: 2550, equity: 58700, depreciation: 185 },
|
||||||
|
{ quarter: 'Q2-26', date: '2026-06-27', revenue: 8800, segmentRevenue: 5150, capex: 270, inventory: 5250, cogs: 4250, purchaseObligations: 2620, totalDebt: 2570, equity: 59300, depreciation: 192 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Fetch helper with timeout
|
||||||
|
async function fetchWithTimeout(url: string, timeoutMs = 4000): Promise<Response> {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const id = setTimeout(() => controller.abort(), timeoutMs);
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, { signal: controller.signal, cache: 'no-store' });
|
||||||
|
clearTimeout(id);
|
||||||
|
return response;
|
||||||
|
} catch (err) {
|
||||||
|
clearTimeout(id);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch financial statements for a ticker
|
||||||
|
async function fetchFmpData(ticker: string, apiKey: string): Promise<any> {
|
||||||
|
const incUrl = `https://financialmodelingprep.com/api/v3/income-statement/${ticker}?period=quarter&limit=8&apikey=${apiKey}`;
|
||||||
|
const balUrl = `https://financialmodelingprep.com/api/v3/balance-sheet-statement/${ticker}?period=quarter&limit=8&apikey=${apiKey}`;
|
||||||
|
const cfUrl = `https://financialmodelingprep.com/api/v3/cash-flow-statement/${ticker}?period=quarter&limit=8&apikey=${apiKey}`;
|
||||||
|
const segUrl = `https://financialmodelingprep.com/api/v4/revenue-product-segment?symbol=${ticker}&period=quarter&structure=flat&limit=8&apikey=${apiKey}`;
|
||||||
|
|
||||||
|
const [incRes, balRes, cfRes, segRes] = await Promise.allSettled([
|
||||||
|
fetchWithTimeout(incUrl),
|
||||||
|
fetchWithTimeout(balUrl),
|
||||||
|
fetchWithTimeout(cfUrl),
|
||||||
|
fetchWithTimeout(segUrl)
|
||||||
|
]);
|
||||||
|
|
||||||
|
const rawInc = incRes.status === 'fulfilled' && incRes.value.ok ? await incRes.value.json() : null;
|
||||||
|
const rawBal = balRes.status === 'fulfilled' && balRes.value.ok ? await balRes.value.json() : null;
|
||||||
|
const rawCf = cfRes.status === 'fulfilled' && cfRes.value.ok ? await cfRes.value.json() : null;
|
||||||
|
const rawSeg = segRes.status === 'fulfilled' && segRes.value.ok ? await segRes.value.json() : null;
|
||||||
|
|
||||||
|
return { rawInc, rawBal, rawCf, rawSeg };
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
const apiKey = process.env.FMP_API_KEY;
|
||||||
|
const now = Date.now();
|
||||||
|
|
||||||
|
// Return cached result if valid
|
||||||
|
if (cache && (now - cache.timestamp < CACHE_TTL)) {
|
||||||
|
return NextResponse.json(cache.data, {
|
||||||
|
status: 200,
|
||||||
|
headers: { 'Cache-Control': 'public, max-age=3600' }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let liveDataAvailable = false;
|
||||||
|
// Deep clone fallback data
|
||||||
|
const companyData: CompanyData[] = JSON.parse(JSON.stringify(MOCK_TECH_AI_DATA));
|
||||||
|
|
||||||
|
if (apiKey) {
|
||||||
|
try {
|
||||||
|
// Test the API key first with a quick check
|
||||||
|
const testRes = await fetchWithTimeout(`https://financialmodelingprep.com/api/v3/income-statement/NVDA?period=quarter&limit=1&apikey=${apiKey}`);
|
||||||
|
if (testRes.status === 429) {
|
||||||
|
throw new Error('FMP_RATE_LIMIT');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (testRes.ok) {
|
||||||
|
const fetchResults = await Promise.allSettled(
|
||||||
|
companyData.map(c => fetchFmpData(c.ticker, apiKey))
|
||||||
|
);
|
||||||
|
|
||||||
|
let parsedCount = 0;
|
||||||
|
|
||||||
|
companyData.forEach((comp, idx) => {
|
||||||
|
const res = fetchResults[idx];
|
||||||
|
if (res.status === 'fulfilled' && res.value) {
|
||||||
|
const { rawInc, rawBal, rawCf, rawSeg } = res.value;
|
||||||
|
|
||||||
|
// Align by calendarYear and period or date
|
||||||
|
if (Array.isArray(rawInc) && rawInc.length > 0 && Array.isArray(rawBal) && rawBal.length > 0) {
|
||||||
|
const sortedInc = [...rawInc].sort((a, b) => a.date.localeCompare(b.date)).slice(-8);
|
||||||
|
const sortedBal = [...rawBal].sort((a, b) => a.date.localeCompare(b.date)).slice(-8);
|
||||||
|
|
||||||
|
// Map cash flow items by date
|
||||||
|
const cfMap: Record<string, any> = {};
|
||||||
|
if (Array.isArray(rawCf)) {
|
||||||
|
rawCf.forEach(item => {
|
||||||
|
cfMap[item.date] = item;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build quarters array
|
||||||
|
const alignedQuarters: QuarterData[] = [];
|
||||||
|
const labels = ['Q3-24', 'Q4-24', 'Q1-25', 'Q2-25', 'Q3-25', 'Q4-25', 'Q1-26', 'Q2-26'];
|
||||||
|
|
||||||
|
for (let i = 0; i < Math.min(8, sortedInc.length); i++) {
|
||||||
|
const inc = sortedInc[i];
|
||||||
|
const date = inc.date;
|
||||||
|
const bal = sortedBal.find(b => Math.abs(new Date(b.date).getTime() - new Date(date).getTime()) < 10 * 24 * 60 * 60 * 1000) || sortedBal[i] || {};
|
||||||
|
const cf = cfMap[date] || rawCf?.find((c: any) => Math.abs(new Date(c.date).getTime() - new Date(date).getTime()) < 10 * 24 * 60 * 60 * 1000) || {};
|
||||||
|
|
||||||
|
const rev = inc.revenue || comp.quarters[i]?.revenue || 0;
|
||||||
|
let capexVal = Math.abs(cf.capitalExpenditure || cf.capex || comp.quarters[i]?.capex || 0);
|
||||||
|
if (capexVal === 0 && comp.quarters[i]) capexVal = comp.quarters[i].capex;
|
||||||
|
|
||||||
|
const cogsVal = inc.costOfRevenue || inc.costOfGoodsSold || inc.cogs || comp.quarters[i]?.cogs || 0;
|
||||||
|
const invVal = bal.inventory || comp.quarters[i]?.inventory || 0;
|
||||||
|
const totDebt = (bal.shortTermDebt || 0) + (bal.longTermDebt || 0) || comp.quarters[i]?.totalDebt || 0;
|
||||||
|
const eqVal = bal.totalStockholdersEquity || bal.equity || comp.quarters[i]?.equity || 1000;
|
||||||
|
const depVal = inc.depreciationAndAmortization || inc.depreciation || comp.quarters[i]?.depreciation || 100;
|
||||||
|
|
||||||
|
// Segment Revenue Parsing
|
||||||
|
let segRev = 0;
|
||||||
|
if (comp.ticker === 'MSFT') {
|
||||||
|
segRev = rawSeg?.find((s: any) => s.date === date)?.intelligentCloud ||
|
||||||
|
rawSeg?.find((s: any) => s.date === date)?.segments?.["Intelligent Cloud"] ||
|
||||||
|
comp.quarters[i]?.segmentRevenue;
|
||||||
|
} else if (comp.ticker === 'GOOGL') {
|
||||||
|
segRev = rawSeg?.find((s: any) => s.date === date)?.googleCloud ||
|
||||||
|
rawSeg?.find((s: any) => s.date === date)?.segments?.["Google Cloud"] ||
|
||||||
|
comp.quarters[i]?.segmentRevenue;
|
||||||
|
} else if (comp.ticker === 'META') {
|
||||||
|
segRev = rawSeg?.find((s: any) => s.date === date)?.familyOfApps ||
|
||||||
|
rawSeg?.find((s: any) => s.date === date)?.segments?.["Family of Apps"] ||
|
||||||
|
comp.quarters[i]?.segmentRevenue;
|
||||||
|
} else if (comp.ticker === 'NVDA') {
|
||||||
|
segRev = rawSeg?.find((s: any) => s.date === date)?.dataCenter ||
|
||||||
|
rawSeg?.find((s: any) => s.date === date)?.segments?.["Data Center"] ||
|
||||||
|
comp.quarters[i]?.segmentRevenue;
|
||||||
|
} else if (comp.ticker === 'AMD') {
|
||||||
|
segRev = rawSeg?.find((s: any) => s.date === date)?.dataCenter ||
|
||||||
|
rawSeg?.find((s: any) => s.date === date)?.segments?.["Data Center"] ||
|
||||||
|
comp.quarters[i]?.segmentRevenue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!segRev) {
|
||||||
|
segRev = comp.quarters[i]?.segmentRevenue || Math.round(rev * 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
const poVal = comp.quarters[i]?.purchaseObligations || 0;
|
||||||
|
|
||||||
|
alignedQuarters.push({
|
||||||
|
quarter: labels[i] || `Q${i+1}`,
|
||||||
|
date,
|
||||||
|
revenue: Math.round(rev / 1000000) || comp.quarters[i]?.revenue || 0,
|
||||||
|
segmentRevenue: Math.round(segRev / 1000000) || comp.quarters[i]?.segmentRevenue || 0,
|
||||||
|
capex: Math.round(capexVal / 1000000) || comp.quarters[i]?.capex || 0,
|
||||||
|
inventory: Math.round(invVal / 1000000) || comp.quarters[i]?.inventory || 0,
|
||||||
|
cogs: Math.round(cogsVal / 1000000) || comp.quarters[i]?.cogs || 0,
|
||||||
|
purchaseObligations: poVal,
|
||||||
|
totalDebt: Math.round(totDebt / 1000000) || comp.quarters[i]?.totalDebt || 0,
|
||||||
|
equity: Math.round(eqVal / 1000000) || comp.quarters[i]?.equity || 0,
|
||||||
|
depreciation: Math.round(depVal / 1000000) || comp.quarters[i]?.depreciation || 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (alignedQuarters.length >= 4) {
|
||||||
|
while (alignedQuarters.length < 8) {
|
||||||
|
const paddingIdx = alignedQuarters.length;
|
||||||
|
alignedQuarters.push(JSON.parse(JSON.stringify(comp.quarters[paddingIdx])));
|
||||||
|
}
|
||||||
|
comp.quarters = alignedQuarters;
|
||||||
|
parsedCount++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (parsedCount > 0) {
|
||||||
|
liveDataAvailable = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
console.warn("FMP Ingestion for Tech AI Silo failed, falling back to mock archive. Reason:", err.message || err);
|
||||||
|
liveDataAvailable = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate Metrics
|
||||||
|
const dates = companyData[0].quarters.map(q => q.quarter);
|
||||||
|
|
||||||
|
// 1. ROI-to-CapEx Ratio & Monetization Gap
|
||||||
|
const monetizationGaps: 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 }[];
|
||||||
|
}> = {};
|
||||||
|
|
||||||
|
companyData.forEach(comp => {
|
||||||
|
const qData: any[] = [];
|
||||||
|
for (let t = 0; t < comp.quarters.length; t++) {
|
||||||
|
if (t === 0) {
|
||||||
|
qData.push({
|
||||||
|
quarter: comp.quarters[0].quarter,
|
||||||
|
monetizationGap: 0,
|
||||||
|
roiToCapex: 0,
|
||||||
|
segmentRevenueGrowth: 0,
|
||||||
|
capexGrowth: 0
|
||||||
|
});
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const currentQ = comp.quarters[t];
|
||||||
|
const prevQ = comp.quarters[t - 1];
|
||||||
|
|
||||||
|
const segRevGrowth = prevQ.segmentRevenue > 0
|
||||||
|
? ((currentQ.segmentRevenue - prevQ.segmentRevenue) / prevQ.segmentRevenue) * 100
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
const capexGrowth = prevQ.capex > 0
|
||||||
|
? ((currentQ.capex - prevQ.capex) / prevQ.capex) * 100
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
const gap = segRevGrowth - capexGrowth;
|
||||||
|
|
||||||
|
const roi = currentQ.capex > 0
|
||||||
|
? ((currentQ.segmentRevenue - prevQ.segmentRevenue) / currentQ.capex) * 100
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
qData.push({
|
||||||
|
quarter: currentQ.quarter,
|
||||||
|
monetizationGap: parseFloat(gap.toFixed(2)),
|
||||||
|
roiToCapex: parseFloat(roi.toFixed(2)),
|
||||||
|
segmentRevenueGrowth: parseFloat(segRevGrowth.toFixed(2)),
|
||||||
|
capexGrowth: parseFloat(capexGrowth.toFixed(2))
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const len = qData.length;
|
||||||
|
const current = qData[len - 1].monetizationGap;
|
||||||
|
const previous = qData[len - 2].monetizationGap;
|
||||||
|
let trend: 'UP' | 'DOWN' | 'FLAT' = 'FLAT';
|
||||||
|
if (current > previous) trend = 'UP';
|
||||||
|
if (current < previous) trend = 'DOWN';
|
||||||
|
|
||||||
|
monetizationGaps[comp.ticker] = {
|
||||||
|
current,
|
||||||
|
previous,
|
||||||
|
trend,
|
||||||
|
segmentRevenueGrowth: qData[len - 1].segmentRevenueGrowth,
|
||||||
|
capexGrowth: qData[len - 1].capexGrowth,
|
||||||
|
roiToCapex: qData[len - 1].roiToCapex,
|
||||||
|
data: qData
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Nvidia Supply-Chain Velocity
|
||||||
|
const nvdaComp = companyData.find(c => c.ticker === 'NVDA')!;
|
||||||
|
const msftComp = companyData.find(c => c.ticker === 'MSFT')!;
|
||||||
|
const googlComp = companyData.find(c => c.ticker === 'GOOGL')!;
|
||||||
|
const metaComp = companyData.find(c => c.ticker === 'META')!;
|
||||||
|
|
||||||
|
const supplyChainData = nvdaComp.quarters.map((q, idx) => {
|
||||||
|
const nvdaInv = q.inventory;
|
||||||
|
const nvdaCogs = q.cogs;
|
||||||
|
const turnover = nvdaInv > 0 ? (nvdaCogs / nvdaInv) * 4 : 0;
|
||||||
|
|
||||||
|
const msftObl = msftComp.quarters[idx]?.purchaseObligations || 0;
|
||||||
|
const googlObl = googlComp.quarters[idx]?.purchaseObligations || 0;
|
||||||
|
const metaObl = metaComp.quarters[idx]?.purchaseObligations || 0;
|
||||||
|
const aggObligations = msftObl + googlObl + metaObl;
|
||||||
|
|
||||||
|
const velocity = nvdaInv > 0 ? aggObligations / nvdaInv : 0;
|
||||||
|
|
||||||
|
return {
|
||||||
|
quarter: q.quarter,
|
||||||
|
nvdaInvTurnover: parseFloat(turnover.toFixed(2)),
|
||||||
|
aggregateObligations: aggObligations,
|
||||||
|
velocityIndex: parseFloat(velocity.toFixed(2))
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const scLen = supplyChainData.length;
|
||||||
|
const currentVel = supplyChainData[scLen - 1].velocityIndex;
|
||||||
|
const previousVel = supplyChainData[scLen - 2].velocityIndex;
|
||||||
|
let velTrend: 'UP' | 'DOWN' | 'FLAT' = 'FLAT';
|
||||||
|
if (currentVel > previousVel) velTrend = 'UP';
|
||||||
|
if (currentVel < previousVel) velTrend = 'DOWN';
|
||||||
|
|
||||||
|
const supplyChainPayload = {
|
||||||
|
name: 'Nvidia Supply-Chain Velocity Index',
|
||||||
|
unit: 'x',
|
||||||
|
currentVelocity: currentVel,
|
||||||
|
previousVelocity: previousVel,
|
||||||
|
currentTurnover: supplyChainData[scLen - 1].nvdaInvTurnover,
|
||||||
|
currentObligations: supplyChainData[scLen - 1].aggregateObligations,
|
||||||
|
trend: velTrend,
|
||||||
|
data: supplyChainData
|
||||||
|
};
|
||||||
|
|
||||||
|
// 3. Tech Infrastructure Leverage
|
||||||
|
const infrastructureLeverage: Record<string, {
|
||||||
|
currentDE: number;
|
||||||
|
currentCapExDep: number;
|
||||||
|
trendDE: 'UP' | 'DOWN' | 'FLAT';
|
||||||
|
data: { quarter: string; de: number; capexDep: number; debt: number; equity: number }[];
|
||||||
|
}> = {};
|
||||||
|
|
||||||
|
companyData.forEach(comp => {
|
||||||
|
const qData = comp.quarters.map(q => {
|
||||||
|
const de = q.equity > 0 ? q.totalDebt / q.equity : 0;
|
||||||
|
const capexDep = q.depreciation > 0 ? q.capex / q.depreciation : 0;
|
||||||
|
|
||||||
|
return {
|
||||||
|
quarter: q.quarter,
|
||||||
|
de: parseFloat(de.toFixed(2)),
|
||||||
|
capexDep: parseFloat(capexDep.toFixed(2)),
|
||||||
|
debt: q.totalDebt,
|
||||||
|
equity: q.equity
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const len = qData.length;
|
||||||
|
const currentDE = qData[len - 1].de;
|
||||||
|
const previousDE = qData[len - 2].de;
|
||||||
|
let trendDE: 'UP' | 'DOWN' | 'FLAT' = 'FLAT';
|
||||||
|
if (currentDE > previousDE) trendDE = 'UP';
|
||||||
|
if (currentDE < previousDE) trendDE = 'DOWN';
|
||||||
|
|
||||||
|
infrastructureLeverage[comp.ticker] = {
|
||||||
|
currentDE,
|
||||||
|
currentCapExDep: qData[len - 1].capexDep,
|
||||||
|
trendDE,
|
||||||
|
data: qData
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
dates,
|
||||||
|
liveDataAvailable,
|
||||||
|
timestamp: now,
|
||||||
|
metrics: {
|
||||||
|
monetizationGap: {
|
||||||
|
name: 'ROI-to-CapEx & Monetization Gap',
|
||||||
|
tickers: monetizationGaps
|
||||||
|
},
|
||||||
|
supplyChain: supplyChainPayload,
|
||||||
|
infrastructure: {
|
||||||
|
name: 'Tech Infrastructure Leverage & Cluster Expansion',
|
||||||
|
tickers: infrastructureLeverage
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
cache = {
|
||||||
|
timestamp: now,
|
||||||
|
data: payload
|
||||||
|
};
|
||||||
|
|
||||||
|
return NextResponse.json(payload, {
|
||||||
|
status: 200,
|
||||||
|
headers: { 'Cache-Control': 'public, max-age=3600' }
|
||||||
|
});
|
||||||
|
}
|
||||||
12
app/page.tsx
12
app/page.tsx
@@ -7,10 +7,11 @@ import InsiderDemo from '@/components/modules/insider/InsiderDemo';
|
|||||||
import CryptoDemo from '@/components/modules/crypto/CryptoDemo';
|
import CryptoDemo from '@/components/modules/crypto/CryptoDemo';
|
||||||
import EventsDemo from '@/components/modules/events/EventsDemo';
|
import EventsDemo from '@/components/modules/events/EventsDemo';
|
||||||
import MacroIndicatorsDemo from '@/components/modules/macro/MacroIndicatorsDemo';
|
import MacroIndicatorsDemo from '@/components/modules/macro/MacroIndicatorsDemo';
|
||||||
import { BarChart3, TrendingUp, ShieldAlert, Radio, Landmark, RefreshCw, Activity } from 'lucide-react';
|
import AiSpecialSilo from '@/components/modules/tech/AiSpecialSilo';
|
||||||
|
import { BarChart3, TrendingUp, ShieldAlert, Radio, Landmark, RefreshCw, Activity, Cpu } from 'lucide-react';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [activeTab, setActiveTab] = useState<'sandbox' | 'scanner' | 'insider' | 'crypto' | 'events' | 'macro'>('sandbox');
|
const [activeTab, setActiveTab] = useState<'sandbox' | 'scanner' | 'insider' | 'crypto' | 'events' | 'macro' | 'tech'>('sandbox');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-[#070b13] text-slate-100 flex flex-col font-sans selection:bg-teal-500/30 selection:text-teal-200">
|
<div className="min-h-screen bg-[#070b13] text-slate-100 flex flex-col font-sans selection:bg-teal-500/30 selection:text-teal-200">
|
||||||
@@ -99,6 +100,12 @@ export default function Home() {
|
|||||||
>
|
>
|
||||||
<Activity className="w-4 h-4" /> Eco Indicators
|
<Activity className="w-4 h-4" /> Eco Indicators
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('tech')}
|
||||||
|
className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'tech' ? 'bg-gradient-to-r from-teal-500 to-indigo-500 text-white font-bold shadow-lg shadow-teal-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
|
||||||
|
>
|
||||||
|
<Cpu className="w-4 h-4" /> [⚡ AI Special Silo]
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -114,6 +121,7 @@ export default function Home() {
|
|||||||
{activeTab === 'crypto' && <CryptoDemo />}
|
{activeTab === 'crypto' && <CryptoDemo />}
|
||||||
{activeTab === 'events' && <EventsDemo />}
|
{activeTab === 'events' && <EventsDemo />}
|
||||||
{activeTab === 'macro' && <MacroIndicatorsDemo />}
|
{activeTab === 'macro' && <MacroIndicatorsDemo />}
|
||||||
|
{activeTab === 'tech' && <AiSpecialSilo />}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
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