# EMS Frontend Template

> Base React/TypeScript UI template for EMS customer projects

**Current Version: 1.2.0** | See `VERSIONS.json`

This is the shared frontend template used to bootstrap new EMS customer frontends. Copy it into a new customer repo and customize.

---

## Usage — New Customer Setup

```bash
# Copy template into customer repo
cp -r ems-frontend-template/ <customer-repo>/frontend/
cd <customer-repo>/frontend

# Install dependencies
npm install

# Start dev server
npm run dev
# Opens at http://localhost:3000, proxies /api to localhost:8000
```

### Customize for your customer:

1. `src/contexts/ThemeContext.tsx` -- Branding colors, customer name
2. `src/layouts/MainLayout.tsx` -- Logo, sidebar menu items
3. `src/App.tsx` -- Add/remove routes per customer needs
4. `vite.config.ts` -- Update proxy target if backend port differs
5. `package.json` -- Remove unused deps (e.g., Three.js if no 3D)
6. Update `VERSIONS.json` -- Set new project name and version

---

## Project Structure

```
ems-frontend-template/
+-- src/
|   +-- pages/                 # Page components
|   |   +-- Dashboard/         # Main dashboard
|   |   +-- Monitoring/        # Real-time monitoring
|   |   +-- Devices/           # Device management
|   |   +-- DeviceDetail/      # Device detail view
|   |   +-- Analysis/          # Energy analysis (cost, loss, YoY, MoM)
|   |   +-- Alarms/            # Alarm center
|   |   +-- Carbon/            # Carbon emissions
|   |   +-- Reports/           # Report center
|   |   +-- BigScreen/         # 2D visualization screen
|   |   +-- BigScreen3D/       # 3D visualization screen
|   |   +-- Charging/          # EV charging management
|   |   +-- Prediction/        # Energy prediction
|   |   +-- EnergyStrategy/    # Energy strategy
|   |   +-- AIOperations/      # AI-assisted operations
|   |   +-- Maintenance/       # Maintenance management
|   |   +-- DataQuery/         # Data query
|   |   +-- Management/        # General management
|   |   +-- Quota/             # Energy quota
|   |   +-- System/            # System settings & audit log
|   |   +-- Login/             # Login page
|   +-- layouts/               # Layout components (MainLayout)
|   +-- contexts/              # React contexts (ThemeContext)
|   +-- hooks/                 # Custom hooks (useRealtimeWebSocket)
|   +-- services/              # API service layer
|   +-- i18n/                  # Internationalization (zh + en)
|   +-- utils/                 # Utility functions
|   +-- assets/                # Static assets
|   +-- App.tsx                # Root component with routes
|   +-- main.tsx               # Entry point
+-- public/
|   +-- devices/               # SVG device icons
+-- Dockerfile                 # Dev container
+-- Dockerfile.prod            # Production container
+-- vite.config.ts             # Vite config (proxy, port)
+-- package.json
+-- VERSIONS.json              # Version tracking
```

---

## Tech Stack

- React 19 + TypeScript
- Ant Design 5 + ProComponents
- ECharts 6
- Three.js + React Three Fiber (optional, for 3D visualization)
- i18next (zh + en)
- Vite 8

---

## Available Commands

```bash
npm run dev        # Start dev server (port 3000)
npm run build      # Production build
npm run preview    # Preview production build
```

---

## Docker

```bash
# Development
docker build -t ems-frontend .
docker run -p 3000:3000 ems-frontend

# Production
docker build -f Dockerfile.prod -t ems-frontend-prod .
docker run -p 80:80 ems-frontend-prod
```

---

## Version Management

```bash
# List all versions
git tag -l

# Download a specific version
git checkout v1.1.0

# Download as zip
curl -o template-v1.1.0.zip \
  "http://100.69.143.96:3300/tianpu/ems-frontend-template/archive/v1.1.0.zip"

# Go back to latest
git checkout master
```

When releasing: update `VERSIONS.json` + `package.json` version, then tag and push.
See [ems-core README](http://100.69.143.96:3300/tianpu/ems-core) for the full version management guide.

---

## Notes

- Not all pages are needed for every customer -- remove unused page imports from `App.tsx`
- Remove corresponding dependencies from `package.json` (e.g., Three.js if no 3D)
- The template is designed to work with ems-core backend at `/api`

---

## License

Copyright 2026. All rights reserved.