Admin Panel

The Xylem Admin Panel is a React + Vite single-page application that provides internal management tools for the platform. It is deployed as a static build served by Nginx at admin.xylem.city.

Project Structure

xylem-admin/
├── src/
│   ├── App.jsx                  # Main app with routing
│   ├── main.jsx                 # Entry point
│   ├── index.css                # Global styles (extensive)
│   ├── components/
│   │   └── AdminLayout.jsx      # Page layout with sidebar navigation
│   ├── pages/
│   │   ├── LoginPage.jsx        # Admin authentication
│   │   ├── DashboardPage.jsx    # Overview dashboard
│   │   ├── LayersPage.jsx       # GIS layer management
│   │   ├── FloorplansPage.jsx   # Floorplan catalog management
│   │   ├── RegulatoryPage.jsx   # Regulatory rules editor
│   │   ├── ProjectsPage.jsx     # Project listing/management
│   │   ├── UsersPage.jsx        # User management
│   │   └── OrgsPage.jsx         # Organization management
│   ├── context/                 # Auth context provider
│   └── regulatory/              # ReactFlow regulatory rule editor
├── public/                      # Static assets
└── dist/                        # Production build (served by Nginx)

Pages Overview

Page	Route	Description
Login	/login	Admin authentication
Dashboard	/	Overview with stats and quick actions
Layers	/layers	Manage GIS layers (raster/vector)
Floorplans	/floorplans	Manage catalog unit templates
Regulatory	/regulatory	Visual rules editor
Projects	/projects	View and manage all projects
Users	/users	User account management
Organizations	/orgs	Organization management

Technology Stack

Library	Purpose
React 19	UI library
React Router DOM 7	Client-side routing
Vite 7	Bundler and dev server
ReactFlow 11	Visual node graph editor (regulatory rules)
Lucide React	Icon library
math.js	Mathematical expression evaluation

Design

The admin panel uses a dark-themed design with:

• Sidebar navigation — Collapsible side menu with icon + label links
• Dark glassmorphic aesthetic — Matching the frontend's visual style
• Responsive modals — For create/edit forms
• Data tables — For listing entities with sort, filter, and pagination

Authentication

The admin panel shares the same JWT auth system as the main frontend:

• Login via the backend's /auth/login endpoint
• JWT token stored in context
• Protected routes redirect to login

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build
# Output: dist/ (served by Nginx at admin.xylem.city)