79 lines
1.6 KiB
Markdown
79 lines
1.6 KiB
Markdown
|
# DBIS Admin Console - Frontend
|
||
|
|
|
||
|
|
React + TypeScript frontend application for the DBIS Admin Console system.
|
||
|
|
|
||
|
|
## Setup
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cd frontend
|
||
|
|
npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
## Development
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev
|
||
|
|
```
|
||
|
|
|
||
|
|
The app will be available at `http://localhost:3001`
|
||
|
|
|
||
|
|
## Build
|
||
|
|
|
||
|
|
```bash
|
||
|
|
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
|
||
|
|
|