Next.js Dashboard Build

Now let me read the existing files to understand the current setup before building.

Let me check which shadcn UI components are available.

Good. I have card.tsx, badge.tsx, button.tsx, input.tsx, select.tsx, scroll-area.tsx, separator.tsx, and label.tsx available. Let me read the card and select components to understand their API.

Now I have everything I need. Let me build this dark-themed geopolitical shipping dashboard. I'll update the theme, layout, and create the component files.

Now let me update the layout with proper metadata and dark class:

Now let me create all the dashboard components. I'll start with the sidebar, metric cards, calculator, and news feed:

Now let me create the main page that ties everything together:

Now I need to ensure the .dark variant selector works properly since we're using class="dark" on <html>. Let me check the current globals.css dark variant:

The theme is set directly on :root as dark colors (since this is a dark-only dashboard), so no .dark override needed. Everything looks good. Let me verify the label and separator components exist:

All components exist. The dashboard is complete. Here's what I built:

GeoShip Command Dashboard - a dark-themed maritime risk monitoring dashboard with 5 components:

Sidebar (dashboard-sidebar.tsx) - Collapsible navigation with 6 nav items (Overview, Fleet Tracker, Risk Map, Threat Intel, Analytics, Routes) plus Settings, featuring a branded logo area and active-state highlighting in the green primary color.
Header (dashboard-header.tsx) - Top bar with a pulsing red "LIVE" indicator, search, and notification bell with a badge count.
Metric Cards (metric-cards.tsx) - Three KPI cards: WTI Crude Price ($82.47 with trend), Strait of Hormuz Status (ELEVATED with a red "RED / ALERT" badge), and Average War Surcharge ($4,280 with trend).
Surcharge Calculator (surcharge-calculator.tsx) - A form with three Select dropdowns (cargo type, origin port, destination port) that calculates an estimated war risk surcharge with a multiplier system based on high-risk origins/destinations.
News Feed (news-feed.tsx) - A scrollable list of 10 geopolitical headlines with severity badges (critical/high/medium/low), region tags, source attribution, and timestamps, all inside a ScrollArea for smooth scrolling.