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

# 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

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

---

Docker

# 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

---

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.