128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
import { Suspense } from 'react';
|
|
|
|
import { ChartSkeleton } from '@/components/charts/chart-skeleton.js';
|
|
import { MetricCardSkeleton } from '@/components/dashboard/metric-card-skeleton.js';
|
|
import { Card, CardContent, CardHeader } from '@/components/ui/card.js';
|
|
import { Skeleton } from '@/components/ui/skeleton.js';
|
|
import { AlertTriangle } from 'lucide-react';
|
|
import type { Metadata } from 'next';
|
|
|
|
import { CrackSpreadSection } from './_sections/crack-spread-section.js';
|
|
import { EventsSection } from './_sections/events-section.js';
|
|
import { FuturesSection } from './_sections/futures-section.js';
|
|
import { ConflictHeroMetrics } from './_sections/hero-metrics.js';
|
|
import { MarketFearSection } from './_sections/market-fear-section.js';
|
|
import { NormalizedSection } from './_sections/normalized-section.js';
|
|
import { OilSection } from './_sections/oil-section.js';
|
|
import { SupplySection } from './_sections/supply-section.js';
|
|
import { WarPremiumSection } from './_sections/war-premium-section.js';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Conflict Impact | Energy & AI Dashboard',
|
|
description:
|
|
'Iran conflict energy market impact — oil prices, supply disruptions, war premium, and geopolitical events',
|
|
};
|
|
|
|
function HeroSkeleton() {
|
|
return (
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
|
|
{Array.from({ length: 8 }).map((_, i) => (
|
|
<MetricCardSkeleton key={i} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GaugeSkeleton() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<Skeleton className="h-5 w-48" />
|
|
<Skeleton className="mt-1 h-3 w-64" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<div key={i} className="flex flex-col items-center gap-2 rounded-lg border border-border/50 p-4">
|
|
<Skeleton className="h-3 w-20" />
|
|
<Skeleton className="h-20 w-36 rounded" />
|
|
<Skeleton className="h-3 w-16" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default function ConflictPage() {
|
|
return (
|
|
<div className="space-y-6 px-4 py-6 sm:px-6 sm:py-8">
|
|
{/* Page header with alert banner */}
|
|
<div>
|
|
<div className="mb-4 flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/5 px-4 py-3">
|
|
<AlertTriangle className="h-5 w-5 shrink-0 text-red-400" />
|
|
<div>
|
|
<p className="text-sm font-semibold text-red-400">Active Conflict — Iran-US War (Week 6)</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
Strait of Hormuz closed. Qatar LNG offline 3-5 years. SPR at historic lows. Data updates every 30 minutes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">Conflict Energy Impact</h1>
|
|
<p className="mt-2 text-muted-foreground">
|
|
How the Iran-US conflict is reshaping energy markets — oil prices, supply disruptions, and the cost to every
|
|
grid region.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Hero metrics row */}
|
|
<Suspense fallback={<HeroSkeleton />}>
|
|
<ConflictHeroMetrics />
|
|
</Suspense>
|
|
|
|
{/* Normalized performance since conflict — the single most informative chart */}
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<NormalizedSection />
|
|
</Suspense>
|
|
|
|
{/* War Premium */}
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<WarPremiumSection />
|
|
</Suspense>
|
|
|
|
{/* Oil prices chart */}
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<OilSection />
|
|
</Suspense>
|
|
|
|
{/* Natural Gas Futures + Supply side by side */}
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<FuturesSection />
|
|
</Suspense>
|
|
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<SupplySection />
|
|
</Suspense>
|
|
</div>
|
|
|
|
{/* Crack Spread (refinery margins) */}
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<CrackSpreadSection />
|
|
</Suspense>
|
|
|
|
{/* Market Fear Indicators */}
|
|
<Suspense fallback={<GaugeSkeleton />}>
|
|
<MarketFearSection />
|
|
</Suspense>
|
|
|
|
{/* Event Timeline */}
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<EventsSection />
|
|
</Suspense>
|
|
</div>
|
|
);
|
|
}
|