Skip to main content

Documentation Index

Fetch the complete documentation index at: https://isp.misidev.space/llms.txt

Use this file to discover all available pages before exploring further.

Follow these steps to get the ICP System frontend running locally and log in for the first time.
ICP System requires a compatible REST API backend. The frontend proxies all /api requests to the backend host you configure in your .env file. Make sure your backend is running and reachable before starting the dev server.
1

Prerequisites

Before you begin, make sure you have the following installed and available:
  • Node.js v18 or later (v20+ recommended)
  • npm v9 or later (bundled with Node.js)
  • Access to a running ICP System backend API — see Backend API for setup instructions
Verify your Node.js version:
node --version
2

Clone the repository and install dependencies

Clone the repository and install the project’s npm dependencies from inside the red-dashboard/ directory.
git clone https://github.com/DjAlvaroCuba/ISP-Capacity-FRONT.git
cd ISP-Capacity-FRONT/red-dashboard
npm install
npm will install all runtime and development dependencies declared in package.json, including React 19, Material UI v7, TanStack Query, Recharts, and Vite.
3

Configure the environment

Create a .env file at the root of the red-dashboard/ directory (next to package.json) and set VITE_API_BASE_URL to point at your backend API:
VITE_API_BASE_URL=http://127.0.0.1:8000/api
Vite’s dev server is pre-configured to proxy all requests that start with /api to http://127.0.0.1:8000, so the frontend never makes cross-origin requests during local development. If your backend runs on a different host or port, update both VITE_API_BASE_URL and the proxy target in vite.config.ts to match.
For production deployments, set VITE_API_BASE_URL to your backend’s public URL and remove or adjust the Vite proxy configuration. See Configuration for details.
4

Start the development server

Run the dev server with:
npm run dev
Vite will compile the project and open a local server, typically at http://localhost:5173. The terminal output will show the exact URL.Other available scripts:
# Build a production bundle
npm run build

# Preview the production build locally
npm run preview

# Run ESLint
npm run lint
5

Log in

Open your browser and navigate to:
http://localhost:5173/login
Enter your username and password, then click Entrar. On success, the server returns a JWT access token that is saved to localStorage under the key access_token. You are then redirected to the home page.If you enter incorrect credentials, the login page displays: “Credenciales inválidas. Verifica tu usuario y contraseña.”
User accounts and passwords are managed through the backend API. Ask your administrator if you do not have credentials yet. See Users & roles for how accounts are created.
6

Explore the Capacity & Risks dashboard

After logging in, you land on the Capacity & Risks dashboard — the home page of ICP System. From here you can:
  • Review KPI cards showing total contracted, assigned, and available bandwidth
  • Inspect risk distribution across your connections
  • Navigate to Providers, Nodes, Connections, Clients, Equipment, or Zabbix monitoring using the sidebar