;
+ };
+ export type LoadableGeneratedOptions = {
+ webpack?(): any;
+ modules?(): LoaderMap;
+ };
+ export type DynamicOptionsLoadingProps = {
+ error?: Error | null;
+ isLoading?: boolean;
+ pastDelay?: boolean;
+ retry?: () => void;
+ timedOut?: boolean;
+ };
+ export type DynamicOptions = LoadableGeneratedOptions & {
+ loading?: (loadingProps: DynamicOptionsLoadingProps) => React.ReactNode;
+ loader?: Loader
| LoaderMap;
+ loadableGenerated?: LoadableGeneratedOptions;
+ ssr?: boolean;
+ };
+ export type LoadableOptions
= DynamicOptions
;
+ export type LoadableFn
= (opts: LoadableOptions
) => React.ComponentType
;
+ export type LoadableComponent
= React.ComponentType
;
+ export declare function noSSR
(
+ LoadableInitializer: LoadableFn
,
+ loadableOptions: DynamicOptions
,
+ ): React.ComponentType
;
+ /**
+ * This function lets you dynamically import a component.
+ * It uses [React.lazy()](https://react.dev/reference/react/lazy) with [Suspense](https://react.dev/reference/react/Suspense) under the hood.
+ *
+ * Read more: [Next.js Docs: `next/dynamic`](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic)
+ */
+ export default function dynamic
(
+ dynamicOptions: DynamicOptions
| Loader
,
+ options?: DynamicOptions
,
+ ): React.ComponentType
;
+ export {};
+}
+
+// see: file://./node_modules/next/link.d.ts
+declare module 'next/link' {
+ import React from 'react';
+ import type { UrlObject } from 'url';
+ type Url = string | UrlObject;
+ type OnNavigateEventHandler = (event: { preventDefault: () => void }) => void;
+ type InternalLinkProps = {
+ href: Url;
+ as?: Url;
+ replace?: boolean;
+ scroll?: boolean;
+ shallow?: boolean;
+ passHref?: boolean;
+ prefetch?: boolean | 'auto' | null;
+ locale?: string | false;
+ legacyBehavior?: boolean;
+ onMouseEnter?: React.MouseEventHandler;
+ onTouchStart?: React.TouchEventHandler;
+ onClick?: React.MouseEventHandler;
+ onNavigate?: OnNavigateEventHandler;
+ };
+ export interface LinkProps extends InternalLinkProps {}
+ declare const Link: React.ForwardRefExoticComponent<
+ Omit, keyof LinkProps> &
+ LinkProps & {
+ children?: React.ReactNode | undefined;
+ } & React.RefAttributes
+ >;
+ export declare const useLinkStatus: () => { pending: boolean };
+ export default Link;
+}
+
+// see: file://./node_modules/next/error.d.ts
+declare module 'next/error' {
+ import React from 'react';
+ import type { NextPageContext } from '../shared/lib/utils';
+ export type ErrorProps = {
+ statusCode: number;
+ hostname?: string;
+ title?: string;
+ withDarkMode?: boolean;
+ };
+ declare function _getInitialProps({ req, res, err }: NextPageContext): Promise | ErrorProps;
+ /**
+ * `Error` component used for handling errors.
+ */
+ export default class Error extends React.Component
{
+ static displayName: string;
+ static getInitialProps: typeof _getInitialProps;
+ static origGetInitialProps: typeof _getInitialProps;
+ render(): import('react/jsx-runtime').JSX.Element;
+ }
+ export {};
+}
diff --git a/package.json b/package.json
index 3a28a4c..2c30d7b 100644
--- a/package.json
+++ b/package.json
@@ -35,9 +35,11 @@
"typescript": "^5"
},
"dependencies": {
+ "@googlemaps/markerclusterer": "^2.6.2",
"@prisma/adapter-pg": "^7.3.0",
"@prisma/client": "^7.3.0",
"@tailwindcss/postcss": "^4.1.18",
+ "@total-typescript/ts-reset": "^0.6.1",
"@vis.gl/react-google-maps": "^1.7.1",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
@@ -48,6 +50,7 @@
"next-themes": "^0.4.6",
"postcss": "^8.5.6",
"prisma": "^7.3.0",
+ "radix-ui": "^1.4.3",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"recharts": "^3.7.0",
diff --git a/prisma/sql/getAllDatacentersWithLocation.sql b/prisma/sql/getAllDatacentersWithLocation.sql
new file mode 100644
index 0000000..e0884f8
--- /dev/null
+++ b/prisma/sql/getAllDatacentersWithLocation.sql
@@ -0,0 +1,9 @@
+SELECT
+ d.id, d.name, d.operator, d.capacity_mw, d.status, d.year_opened,
+ d.region_id,
+ ST_AsGeoJSON(d.location)::TEXT as location_geojson,
+ r.code as region_code,
+ r.name as region_name
+FROM datacenters d
+JOIN grid_regions r ON d.region_id = r.id
+ORDER BY d.capacity_mw DESC
diff --git a/reset.d.ts b/reset.d.ts
new file mode 100644
index 0000000..12bd3ed
--- /dev/null
+++ b/reset.d.ts
@@ -0,0 +1 @@
+import '@total-typescript/ts-reset';
diff --git a/src/actions/datacenters.ts b/src/actions/datacenters.ts
index c1e94ce..629f9d2 100644
--- a/src/actions/datacenters.ts
+++ b/src/actions/datacenters.ts
@@ -1,6 +1,10 @@
'use server';
-import { findDatacentersInRegion, findNearbyDatacenters } from '@/generated/prisma/sql.js';
+import {
+ findDatacentersInRegion,
+ findNearbyDatacenters,
+ getAllDatacentersWithLocation,
+} from '@/generated/prisma/sql.js';
import { prisma } from '@/lib/db.js';
import { serialize } from '@/lib/superjson.js';
@@ -57,6 +61,18 @@ export async function fetchDatacentersInRegion(
}
}
+export async function fetchAllDatacentersWithLocation(): Promise> {
+ try {
+ const rows = await prisma.$queryRawTyped(getAllDatacentersWithLocation());
+ return { ok: true, data: serialize(rows) };
+ } catch (err) {
+ return {
+ ok: false,
+ error: `Failed to fetch datacenters with locations: ${err instanceof Error ? err.message : String(err)}`,
+ };
+ }
+}
+
export async function fetchNearbyDatacenters(
lat: number,
lng: number,
diff --git a/src/app/demand/page.tsx b/src/app/demand/page.tsx
new file mode 100644
index 0000000..eb232b7
--- /dev/null
+++ b/src/app/demand/page.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+ title: 'Demand Analysis | Energy & AI Dashboard',
+ description: 'Regional electricity demand growth, peak tracking, and datacenter load impact',
+};
+
+export default function DemandPage() {
+ return (
+
+
Demand Analysis
+
+ Regional demand growth trends, peak demand tracking, and estimated datacenter load as a percentage of regional
+ demand.
+
+
+
+
Charts coming in Phase 4
+
+
+
Generation Mix
+
+ Stacked area charts showing generation by fuel type per region, with renewable vs fossil comparisons and carbon
+ intensity indicators.
+
+
+
+
Charts coming in Phase 4
+
+
- {children}
+ {children}
+
diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
new file mode 100644
index 0000000..7bc9755
--- /dev/null
+++ b/src/app/map/page.tsx
@@ -0,0 +1,102 @@
+import { fetchAllDatacentersWithLocation } from '@/actions/datacenters.js';
+import { fetchPriceHeatmapData } from '@/actions/prices.js';
+import type { DatacenterMarkerData } from '@/components/map/datacenter-marker.js';
+import { EnergyMapLoader } from '@/components/map/energy-map-loader.js';
+import type { RegionHeatmapData } from '@/components/map/region-overlay.js';
+import type { getAllDatacentersWithLocation, getRegionPriceHeatmap } from '@/generated/prisma/sql.js';
+import { deserialize } from '@/lib/superjson.js';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+ title: 'Interactive Map | Energy & AI Dashboard',
+ description: 'Datacenter locations, grid region overlays, and real-time electricity price heatmap',
+};
+
+interface GeoJsonPoint {
+ type: string;
+ coordinates: [number, number];
+}
+
+function isGeoJsonPoint(val: unknown): val is GeoJsonPoint {
+ if (typeof val !== 'object' || val === null || !('coordinates' in val)) return false;
+ const obj = val as Record;
+ const coords = obj['coordinates'];
+ if (!Array.isArray(coords) || coords.length < 2) return false;
+ return typeof coords[0] === 'number' && typeof coords[1] === 'number';
+}
+
+function parseLocationGeoJson(geojson: string | null): { lat: number; lng: number } | null {
+ if (!geojson) return null;
+ try {
+ const parsed: unknown = JSON.parse(geojson);
+ if (isGeoJsonPoint(parsed)) {
+ return { lat: parsed.coordinates[1], lng: parsed.coordinates[0] };
+ }
+ } catch {
+ // Invalid JSON
+ }
+ return null;
+}
+
+function parseBoundaryGeoJson(geojsonStr: string | null): object | null {
+ if (!geojsonStr) return null;
+ try {
+ const parsed: unknown = JSON.parse(geojsonStr);
+ if (typeof parsed === 'object' && parsed !== null) {
+ return parsed;
+ }
+ } catch {
+ // Invalid JSON
+ }
+ return null;
+}
+
+export default async function MapPage() {
+ const [dcResult, priceResult] = await Promise.all([fetchAllDatacentersWithLocation(), fetchPriceHeatmapData()]);
+
+ const datacenters: DatacenterMarkerData[] = [];
+ if (dcResult.ok) {
+ const rows = deserialize(dcResult.data);
+ for (const row of rows) {
+ const loc = parseLocationGeoJson(row.location_geojson);
+ if (loc) {
+ datacenters.push({
+ id: row.id,
+ name: row.name,
+ operator: row.operator,
+ capacity_mw: row.capacity_mw,
+ status: row.status,
+ year_opened: row.year_opened,
+ region_id: row.region_id,
+ region_code: row.region_code,
+ region_name: row.region_name,
+ lat: loc.lat,
+ lng: loc.lng,
+ });
+ }
+ }
+ }
+
+ const regions: RegionHeatmapData[] = [];
+ if (priceResult.ok) {
+ const rows = deserialize(priceResult.data);
+ for (const row of rows) {
+ regions.push({
+ code: row.code,
+ name: row.name,
+ boundaryGeoJson: parseBoundaryGeoJson(row.boundary_geojson),
+ avgPrice: row.avg_price,
+ maxPrice: row.max_price,
+ avgDemand: row.avg_demand,
+ datacenterCount: row.datacenter_count,
+ totalDcCapacityMw: row.total_dc_capacity_mw,
+ });
+ }
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f92e0f4..9433904 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,8 +1,160 @@
-export default function DashboardHome() {
+import { MetricCard } from '@/components/dashboard/metric-card.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { deserialize } from '@/lib/superjson.js';
+import { Activity, ArrowRight, BarChart3, Droplets, Flame, Map, Server } from 'lucide-react';
+import Link from 'next/link';
+
+import { fetchDatacenters } from '@/actions/datacenters.js';
+import { fetchRegionDemandSummary } from '@/actions/demand.js';
+import { fetchLatestCommodityPrices, fetchLatestPrices } from '@/actions/prices.js';
+
+function formatNumber(value: number, decimals = 1): string {
+ if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(decimals)}M`;
+ if (value >= 1_000) return `${(value / 1_000).toFixed(decimals)}K`;
+ return value.toFixed(decimals);
+}
+
+export default async function DashboardHome() {
+ const [pricesResult, commoditiesResult, datacentersResult, demandResult] = await Promise.all([
+ fetchLatestPrices(),
+ fetchLatestCommodityPrices(),
+ fetchDatacenters(),
+ fetchRegionDemandSummary(),
+ ]);
+
+ const prices = pricesResult.ok
+ ? deserialize<
+ Array<{
+ price_mwh: number;
+ demand_mw: number;
+ region_code: string;
+ region_name: string;
+ timestamp: Date;
+ }>
+ >(pricesResult.data)
+ : [];
+
+ const commodities = commoditiesResult.ok
+ ? deserialize>(commoditiesResult.data)
+ : [];
+
+ const datacenters = datacentersResult.ok
+ ? deserialize>(datacentersResult.data)
+ : [];
+
+ const demandRows = demandResult.ok
+ ? deserialize>(demandResult.data)
+ : [];
+
+ const avgPrice = prices.length > 0 ? prices.reduce((sum, p) => sum + p.price_mwh, 0) / prices.length : 0;
+
+ const natGas = commodities.find(c => c.commodity === 'natural_gas');
+ const wtiCrude = commodities.find(c => c.commodity === 'wti_crude');
+
+ const totalCapacityMw = datacenters.reduce((sum, dc) => sum + dc.capacityMw, 0);
+
+ const datacenterCount = datacenters.length;
+
+ const avgDemand =
+ demandRows.length > 0 ? demandRows.reduce((sum, r) => sum + (r.avg_demand ?? 0), 0) / demandRows.length : 0;
+
return (
-
- Energy & AI Dashboard
- Phase 1 scaffold complete. Dashboard coming soon.
-
+
+
+
Dashboard
+
+ Real-time overview of AI datacenter energy impact across US grid regions.
+
+
+
+
+ 0 ? `$${avgPrice.toFixed(2)}` : '--'}
+ unit="/MWh"
+ icon={BarChart3}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ Explore datacenter locations, grid region overlays, and real-time price heatmaps.
+
+
+ View Map
+
+
+
+
+
+
+
+
+
+
+ {prices.length > 0 ? (
+
+ {prices.map(p => (
+
+
{p.region_name}
+
+ ${p.price_mwh.toFixed(2)}
+ /MWh
+
+
+ ))}
+
No price data available yet.
+ )}
+
+
+
+
+ {avgDemand > 0 && (
+
+
+
+
+
+
+
+
+ Average regional demand:{' '}
+ {formatNumber(avgDemand)} MW
+
+
+
+
+ )}
+
+
Price Trends
+
+ Multi-line regional electricity price charts with commodity overlays and AI milestone annotations.
+
+
+
+
Charts coming in Phase 4
+
+
+
+
+
+
+
+
+ {value}
+ {unit && {unit} }
+
+
+
+ );
+}
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
new file mode 100644
index 0000000..11789f2
--- /dev/null
+++ b/src/components/layout/footer.tsx
@@ -0,0 +1,9 @@
+export function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/layout/nav.tsx b/src/components/layout/nav.tsx
new file mode 100644
index 0000000..d572100
--- /dev/null
+++ b/src/components/layout/nav.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { cn } from '@/lib/utils.js';
+import { Activity, BarChart3, Flame, LayoutDashboard, Map, TrendingUp } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation.js';
+
+const NAV_LINKS = [
+ { href: '/', label: 'Dashboard', icon: LayoutDashboard },
+ { href: '/map', label: 'Map', icon: Map },
+ { href: '/trends', label: 'Trends', icon: TrendingUp },
+ { href: '/demand', label: 'Demand', icon: Activity },
+ { href: '/generation', label: 'Generation', icon: Flame },
+] as const;
+
+export function Nav() {
+ const pathname = usePathname();
+
+ return (
+
+ );
+}
diff --git a/src/components/map/datacenter-detail-panel.tsx b/src/components/map/datacenter-detail-panel.tsx
new file mode 100644
index 0000000..6bfd293
--- /dev/null
+++ b/src/components/map/datacenter-detail-panel.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet.js';
+import type { DatacenterMarkerData } from './datacenter-marker.js';
+
+interface DatacenterDetailPanelProps {
+ datacenter: DatacenterMarkerData | null;
+ onClose: () => void;
+}
+
+export function DatacenterDetailPanel({ datacenter, onClose }: DatacenterDetailPanelProps) {
+ return (
+ !open && onClose()}>
+
+ {datacenter && (
+ <>
+
+ {datacenter.name}
+
+ {datacenter.operator} · {datacenter.region_name} ({datacenter.region_code})
+
+
+
+
+
+
+
+
+
Location
+
+ {datacenter.lat.toFixed(4)}, {datacenter.lng.toFixed(4)}
+
+
+
+
+ );
+}
+
+function MetricItem({ label, value }: { label: string; value: string }) {
+ return (
+
+ );
+}
diff --git a/src/components/map/datacenter-marker.tsx b/src/components/map/datacenter-marker.tsx
new file mode 100644
index 0000000..30adb7f
--- /dev/null
+++ b/src/components/map/datacenter-marker.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { AdvancedMarker } from '@vis.gl/react-google-maps';
+import { useCallback, useState } from 'react';
+
+const OPERATOR_COLORS: Record = {
+ AWS: '#FF9900',
+ Google: '#4285F4',
+ Microsoft: '#00A4EF',
+ Meta: '#0668E1',
+ Oracle: '#F80000',
+ Equinix: '#ED1C24',
+ 'Digital Realty': '#0072CE',
+ CoreWeave: '#7B2FBE',
+ QTS: '#00B388',
+ CyrusOne: '#003B5C',
+ NTT: '#E60012',
+ Vantage: '#0099D8',
+};
+
+function getOperatorColor(operator: string): string {
+ return OPERATOR_COLORS[operator] ?? '#6B7280';
+}
+
+function getMarkerSize(capacityMw: number): number {
+ if (capacityMw >= 500) return 32;
+ if (capacityMw >= 200) return 26;
+ if (capacityMw >= 100) return 22;
+ if (capacityMw >= 50) return 18;
+ return 14;
+}
+
+export interface DatacenterMarkerData {
+ id: string;
+ name: string;
+ operator: string;
+ capacity_mw: number;
+ status: string;
+ year_opened: number;
+ region_id: string;
+ region_code: string;
+ region_name: string;
+ lat: number;
+ lng: number;
+}
+
+interface DatacenterMarkerProps {
+ datacenter: DatacenterMarkerData;
+ onClick: (datacenter: DatacenterMarkerData) => void;
+}
+
+export function DatacenterMarker({ datacenter, onClick }: DatacenterMarkerProps) {
+ const [hovered, setHovered] = useState(false);
+ const size = getMarkerSize(datacenter.capacity_mw);
+ const color = getOperatorColor(datacenter.operator);
+
+ const handleClick = useCallback(() => {
+ onClick(datacenter);
+ }, [datacenter, onClick]);
+
+ return (
+
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}>
+
+ {hovered && (
+
+
{datacenter.name}
+
+ {datacenter.operator} · {datacenter.capacity_mw} MW
+
+
+ )}
+
+ );
+}
diff --git a/src/components/map/energy-map-loader.tsx b/src/components/map/energy-map-loader.tsx
new file mode 100644
index 0000000..a335f30
--- /dev/null
+++ b/src/components/map/energy-map-loader.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+import type { DatacenterMarkerData } from './datacenter-marker.js';
+import type { RegionHeatmapData } from './region-overlay.js';
+
+const EnergyMap = dynamic(() => import('./energy-map.js').then(m => m.EnergyMap), {
+ ssr: false,
+ loading: () => (
+
+ ),
+});
+
+interface EnergyMapLoaderProps {
+ datacenters: DatacenterMarkerData[];
+ regions: RegionHeatmapData[];
+}
+
+export function EnergyMapLoader({ datacenters, regions }: EnergyMapLoaderProps) {
+ return (null);
+ const [selectedRegion, setSelectedRegion] = useState(null);
+
+ const handleDatacenterClick = useCallback((dc: DatacenterMarkerData) => {
+ setSelectedDatacenter(dc);
+ setSelectedRegion(null);
+ }, []);
+
+ const handleRegionClick = useCallback(
+ (regionCode: string) => {
+ const region = regions.find(r => r.code === regionCode);
+ if (region) {
+ setSelectedRegion(region);
+ setSelectedDatacenter(null);
+ }
+ },
+ [regions],
+ );
+
+ const handleFilterChange = useCallback((filtered: DatacenterMarkerData[]) => {
+ setFilteredDatacenters(filtered);
+ }, []);
+
+ return (
+
+
+
+
+
+ setSelectedDatacenter(null)} />
+
+ setSelectedRegion(null)} />
+
+
+ );
+}
diff --git a/src/components/map/map-controls.tsx b/src/components/map/map-controls.tsx
new file mode 100644
index 0000000..a654002
--- /dev/null
+++ b/src/components/map/map-controls.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { cn } from '@/lib/utils.js';
+import { useCallback, useMemo, useState } from 'react';
+import type { DatacenterMarkerData } from './datacenter-marker.js';
+
+interface MapControlsProps {
+ datacenters: DatacenterMarkerData[];
+ onFilterChange: (filtered: DatacenterMarkerData[]) => void;
+}
+
+export function MapControls({ datacenters, onFilterChange }: MapControlsProps) {
+ const operators = useMemo(() => {
+ const set = new Set(datacenters.map(d => d.operator));
+ return Array.from(set).sort();
+ }, [datacenters]);
+
+ const [selectedOperators, setSelectedOperators] = useState>(new Set());
+ const [minCapacity, setMinCapacity] = useState(0);
+
+ const applyFilters = useCallback(
+ (ops: Set, minCap: number) => {
+ const filtered = datacenters.filter(d => {
+ if (ops.size > 0 && !ops.has(d.operator)) return false;
+ if (d.capacity_mw < minCap) return false;
+ return true;
+ });
+ onFilterChange(filtered);
+ },
+ [datacenters, onFilterChange],
+ );
+
+ const toggleOperator = useCallback(
+ (op: string) => {
+ setSelectedOperators(prev => {
+ const next = new Set(prev);
+ if (next.has(op)) {
+ next.delete(op);
+ } else {
+ next.add(op);
+ }
+ applyFilters(next, minCapacity);
+ return next;
+ });
+ },
+ [applyFilters, minCapacity],
+ );
+
+ const handleCapacityChange = useCallback(
+ (e: React.ChangeEvent) => {
+ const val = Number(e.target.value);
+ setMinCapacity(val);
+ applyFilters(selectedOperators, val);
+ },
+ [applyFilters, selectedOperators],
+ );
+
+ const clearFilters = useCallback(() => {
+ setSelectedOperators(new Set());
+ setMinCapacity(0);
+ onFilterChange(datacenters);
+ }, [datacenters, onFilterChange]);
+
+ const hasFilters = selectedOperators.size > 0 || minCapacity > 0;
+
+ return (
+
+
+ Filters
+ {hasFilters && (
+
+ Clear all
+
+ )}
+
+
+
+
Operator
+
+ {operators.map(op => (
+ toggleOperator(op)}
+ className={cn(
+ 'rounded-md px-2 py-0.5 text-xs font-medium transition-colors',
+ selectedOperators.has(op)
+ ? 'bg-blue-600 text-white'
+ : 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-300',
+ )}>
+ {op}
+
+ ))}
+
+
+
+
+ Min Capacity: {minCapacity} MW
+
+
!open && onClose()}>
+
+ {region && (
+ <>
+
+ {region.name}
+ Grid region {region.code}
+
+
+
+
+
+
+ {regionDatacenters.length > 0 && (
+
+
Datacenters in Region
+
+ {regionDatacenters.map(dc => (
+
+
{dc.name}
+
+ {dc.operator} · {dc.capacity_mw} MW · {dc.status}
+
+
+ ))}
+
+
+ )}
+
+
+ );
+}
+
+function MetricItem({ label, value }: { label: string; value: string }) {
+ return (
+
+ );
+}
diff --git a/src/components/map/region-overlay.tsx b/src/components/map/region-overlay.tsx
new file mode 100644
index 0000000..49af3c4
--- /dev/null
+++ b/src/components/map/region-overlay.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+import { useMap } from '@vis.gl/react-google-maps';
+import { useEffect, useRef } from 'react';
+
+export interface RegionHeatmapData {
+ code: string;
+ name: string;
+ boundaryGeoJson: object | null;
+ avgPrice: number | null;
+ maxPrice: number | null;
+ avgDemand: number | null;
+ datacenterCount: number | null;
+ totalDcCapacityMw: number | null;
+}
+
+interface RegionOverlayProps {
+ regions: RegionHeatmapData[];
+ onRegionClick: (regionCode: string) => void;
+}
+
+function priceToColor(price: number | null): string {
+ if (price === null || price <= 0) return 'rgba(100, 100, 100, 0.25)';
+
+ // Scale: 0-20 cool blue, 20-50 yellow/orange, 50+ red/magenta
+ const clamped = Math.min(price, 100);
+ const ratio = clamped / 100;
+
+ if (ratio < 0.2) {
+ // Blue to cyan
+ const t = ratio / 0.2;
+ return `rgba(${Math.round(30 + t * 30)}, ${Math.round(80 + t * 140)}, ${Math.round(220 - t * 20)}, 0.30)`;
+ } else if (ratio < 0.5) {
+ // Cyan to yellow/orange
+ const t = (ratio - 0.2) / 0.3;
+ return `rgba(${Math.round(60 + t * 195)}, ${Math.round(220 - t * 60)}, ${Math.round(200 - t * 170)}, 0.35)`;
+ } else {
+ // Orange to red/magenta
+ const t = (ratio - 0.5) / 0.5;
+ return `rgba(${Math.round(255 - t * 35)}, ${Math.round(160 - t * 120)}, ${Math.round(30 + t * 80)}, 0.40)`;
+ }
+}
+
+function priceToBorderColor(price: number | null): string {
+ if (price === null || price <= 0) return 'rgba(150, 150, 150, 0.4)';
+
+ const clamped = Math.min(price, 100);
+ const ratio = clamped / 100;
+
+ if (ratio < 0.3) return 'rgba(59, 130, 246, 0.6)';
+ if (ratio < 0.6) return 'rgba(245, 158, 11, 0.6)';
+ return 'rgba(239, 68, 68, 0.6)';
+}
+
+export function RegionOverlay({ regions, onRegionClick }: RegionOverlayProps) {
+ const map = useMap();
+ const dataLayerRef = useRef(null);
+ const listenersRef = useRef([]);
+
+ useEffect(() => {
+ if (!map) return;
+
+ // Clean up previous layer
+ if (dataLayerRef.current) {
+ dataLayerRef.current.setMap(null);
+ dataLayerRef.current = null;
+ }
+ for (const listener of listenersRef.current) {
+ listener.remove();
+ }
+ listenersRef.current = [];
+
+ const dataLayer = new google.maps.Data({ map });
+ dataLayerRef.current = dataLayer;
+
+ // Build price lookup
+ const priceMap = new Map();
+ for (const region of regions) {
+ if (region.boundaryGeoJson) {
+ priceMap.set(region.code, region);
+ try {
+ const geoJsonFeature = {
+ type: 'Feature' as const,
+ geometry: region.boundaryGeoJson,
+ properties: { code: region.code, name: region.name },
+ };
+ dataLayer.addGeoJson(geoJsonFeature);
+ } catch {
+ // Skip invalid GeoJSON
+ }
+ }
+ }
+
+ // Style features by price
+ dataLayer.setStyle(feature => {
+ const rawCode = feature.getProperty('code');
+ const code = typeof rawCode === 'string' ? rawCode : '';
+ const regionData = priceMap.get(code);
+ const price = regionData?.avgPrice ?? null;
+
+ return {
+ fillColor: priceToColor(price),
+ fillOpacity: 1,
+ strokeColor: priceToBorderColor(price),
+ strokeWeight: 1.5,
+ strokeOpacity: 0.8,
+ zIndex: 1,
+ };
+ });
+
+ // Hover highlight
+ const overListener = dataLayer.addListener('mouseover', (event: google.maps.Data.MouseEvent) => {
+ if (event.feature) {
+ dataLayer.overrideStyle(event.feature, {
+ strokeWeight: 3,
+ strokeOpacity: 1,
+ fillOpacity: 1,
+ zIndex: 2,
+ });
+ }
+ });
+ listenersRef.current.push(overListener);
+
+ const outListener = dataLayer.addListener('mouseout', (event: google.maps.Data.MouseEvent) => {
+ if (event.feature) {
+ dataLayer.revertStyle(event.feature);
+ }
+ });
+ listenersRef.current.push(outListener);
+
+ // Click handler
+ const clickListener = dataLayer.addListener('click', (event: google.maps.Data.MouseEvent) => {
+ const rawCode = event.feature?.getProperty('code');
+ if (typeof rawCode === 'string' && rawCode) {
+ onRegionClick(rawCode);
+ }
+ });
+ listenersRef.current.push(clickListener);
+
+ return () => {
+ dataLayer.setMap(null);
+ for (const listener of listenersRef.current) {
+ listener.remove();
+ }
+ listenersRef.current = [];
+ dataLayerRef.current = null;
+ };
+ }, [map, regions, onRegionClick]);
+
+ return null;
+}
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..d76bd35
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils.js';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+ return
;
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+ return
;
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+ return
;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..7780c67
--- /dev/null
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import { XIcon } from 'lucide-react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils.js';
+
+function Sheet({ ...props }: React.ComponentProps) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ & {
+ side?: 'top' | 'right' | 'bottom' | 'left';
+ showCloseButton?: boolean;
+}) {
+ return (
+
+
+ {children}
+ {showCloseButton && (
+
+ Close
+
+ )}
+
+
+ );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+ return
;
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+ return
;
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps) {
+ return (
+ ) {
+ return (
+