DBIS Admin Console - Frontend
React + TypeScript frontend application for the DBIS Admin Console system.
Setup
cd frontend
npm install
Development
npm run dev
The app will be available at http://localhost:3001
Build
npm run build
Environment Variables
Create a .env file based on .env.example:
VITE_API_BASE_URL=http://localhost:3000
VITE_APP_NAME=DBIS Admin Console
VITE_REAL_TIME_UPDATE_INTERVAL=5000
Features
- DBIS Admin Console: Global network control and monitoring
- SCB Admin Console: Jurisdiction-scoped administration
- Permission-based UI: Controls shown/hidden based on user permissions
- Real-time updates: Polling-based dashboard updates
- Responsive design: Works on desktop, tablet, and mobile
Project Structure
src/
components/
shared/ # Reusable components (DataTable, Modal, Button, etc.)
admin/ # Admin-specific components
layout/ # Layout components (Sidebar, TopBar, etc.)
auth/ # Authentication components
pages/
dbis/ # DBIS admin pages
scb/ # SCB admin pages
auth/ # Auth pages
services/
api/ # API clients
auth/ # Auth service
hooks/ # Custom React hooks
stores/ # Zustand stores
utils/ # Utility functions
types/ # TypeScript types
constants/ # Constants
Tech Stack
- React 18
- TypeScript
- Vite
- React Router v6
- Zustand (state management)
- React Query (data fetching)
- Recharts (charts)
- React Hot Toast (notifications)
- React Icons