# US-Iran Military Situation Display Dashboard

A production-ready data visualization dashboard with 1920×1080 resolution, dark-themed military-grade UI.

## Tech Stack

- **Build:** Vite (React + TypeScript)
- **Styling:** Tailwind CSS
- **State:** Zustand
- **Charts:** echarts, echarts-for-react
- **Maps:** react-map-gl, mapbox-gl
- **Icons:** lucide-react
- **Font:** Orbitron (Google Fonts)

## Setup

```bash
npm install
```

### Mapbox (optional)

For the interactive map, create a `.env` file:

```bash
cp .env.example .env
# Edit .env and add your Mapbox token from https://account.mapbox.com/access-tokens/
```

Without a token, the map area shows a placeholder with location labels.

## Development

```bash
npm run dev
```

## Build

```bash
npm run build
```

## Project Structure

```
src/
├── components/
│   ├── HeaderPanel.tsx   # Top global overview & power index comparison
│   ├── ForcePanel.tsx    # Reusable left/right panel for military forces
│   ├── WarMap.tsx        # Mapbox GL (Persian Gulf center)
│   └── StatCard.tsx      # Reusable number card
├── store/
│   └── situationStore.ts # Zustand store + WebSocket mock logic
├── data/
│   └── mockData.ts       # TypeScript interfaces & initial mock data
├── pages/
│   └── Dashboard.tsx     # Main layout (1920×1080)
├── App.tsx
└── index.css
```