Nexus ECS

Aplicacion web interna para el Sistema de Equipos como Servicio (ECS) de Sapian. El objetivo del frontend es reemplazar el control operativo basado en Excel por una interfaz rapida para consultar equipos, revisar estados, alertas contractuales y novedades de facturacion.

Alcance actual

El proyecto esta enfocado de momento solo en frontend local. La interfaz actual incluye:

• Login con Firebase Authentication (correo/contrasena y Microsoft).
• Router con rutas base de autenticacion y dashboard.
• Dashboard ECS con menu hamburguesa tipo drawer.
• Busqueda rapida por placa Sapian o serial.
• Tabs sin scroll de pagina: Resumen, Inventario, Alertas y Consulta.
• Componentes reutilizables para botones, campos, tarjetas, metricas y estados.

Stack

• React 19
• TypeScript
• Vite
• React Router DOM
• Firebase (Authentication, Firestore)
• ESLint

Estructura principal

src/
  features/
    auth/
      AuthProvider.tsx
      useAuth.ts
  lib/
    firebase/
      app.ts
      auth.ts
      collections.ts
      config.ts
      firestore.ts
  pages/
    DashboardPage.tsx
    LoginPage.tsx
  routes/
    AppRouter.tsx
    GuestRoute.tsx
    ProtectedRoute.tsx
    paths.ts
  ui/
    AuthShell.tsx
    Button.tsx
    MetricCard.tsx
    SectionCard.tsx
    StatusBadge.tsx
    TextField.tsx
  App.css
  App.tsx
  index.css

Rutas

• /: redirige a /login.
• /login: pantalla de inicio de sesion.
• /dashboard: panel principal ECS.
• *: redirige a /login.

Firebase

1. Crear proyecto en Firebase

1. Entra a Firebase Console y crea un proyecto (o usa uno existente).
2. Agrega una app web y copia la configuracion del SDK.
3. En Authentication habilita:
   • Correo/contrasena (Email/Password).
   • Microsoft (opcional, para el boton de la pantalla de login).

2. Variables de entorno locales

Copia el ejemplo y completa los valores de tu app web:

cp .env.example .env

VITE_FIREBASE_API_KEY=tu_api_key
VITE_FIREBASE_AUTH_DOMAIN=tu_proyecto.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=tu_proyecto
VITE_FIREBASE_STORAGE_BUCKET=tu_proyecto.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=1:123456789:web:abcdef

Reinicia npm run dev despues de crear o modificar .env.

3. Usuarios de prueba

En Firebase Console → Authentication → Users, crea un usuario con correo y contrasena para probar el login interno.

Para Microsoft, configura el proveedor en Firebase y registra la URI de redireccion que indique la consola.

4. Firestore

Firestore usa la misma configuracion de .env que Authentication; no requiere variables adicionales.

Crear la base de datos

1. En Firebase Console → Build → Firestore Database → Create database.
2. Elige la region mas cercana a tus usuarios (ej. southamerica-east1).
3. Para produccion, inicia en modo de produccion y aplica reglas restrictivas desde el inicio.

Reglas de seguridad

El repositorio incluye firestore.rules con acceso solo para usuarios autenticados en las colecciones base del dominio ECS:

• equipos
• bitacora (solo lectura y creacion; sin borrado ni edicion)
• contratos

Publica las reglas de una de estas formas:

Opcion A — Consola web

1. Firestore → Rules.
2. Copia el contenido de firestore.rules y publica.

Opcion B — Firebase CLI

npm install -g firebase-tools
firebase login
firebase use tu_proyecto
firebase deploy --only firestore:rules,firestore:indexes

Uso en el codigo

import { collection } from 'firebase/firestore'
import { firestoreCollections } from './lib/firebase/collections'
import { getFirestoreDb } from './lib/firebase/firestore'

const equiposRef = collection(getFirestoreDb(), firestoreCollections.equipos)

Emulador local (opcional)

firebase init emulators   # selecciona Firestore
firebase emulators:start --only firestore

En .env:

VITE_FIREBASE_FIRESTORE_EMULATOR_HOST=127.0.0.1:8080

Reinicia npm run dev para que el cliente apunte al emulador.

Desarrollo local

Instalar dependencias:

npm install

Iniciar servidor local:

npm run dev

Validar lint:

npm run lint

Generar build local:

npm run build

Previsualizar build:

npm run preview

Convenciones de interfaz

• Diseno minimalista, sin border-radius.
• Sin scroll de pagina en el dashboard principal.
• Navegacion interna mediante tabs.
• Menu lateral desplegable con boton hamburguesa y overlay.
• Optimizado principalmente para escritorio.
• Paleta semaforica ECS:
  • Verde #26a69a: disponible.
  • Azul #00796b: facturable.
  • Amarillo #cddc39: prestamo.
  • Rojo #d00440: reparacion o alerta interna.

Dominio ECS

El sistema se centra en equipos fisicos administrados bajo el modelo de Equipos como Servicio. La placa interna Sapian es el identificador principal del activo.

Estados base del MVP:

• Disponible
• Facturable
• Devolucion
• Prestamo
• Recambio
• Reparacion

Modulos esperados segun el acta:

• CRUD de equipos.
• Transicion de estados.
• Bitacora historica inmutable.
• Carga inicial desde Excel.
• Alertas de contratos a 36 meses.
• URL de contratos.
• Reporte mensual de cobros.
• Control de licencias Windows.

Docker

El proyecto incluye archivos Docker para despliegue futuro, pero el trabajo actual se realiza solo en local hasta que se indique lo contrario.

Construir y ejecutar con Docker:

docker build -t nexus .
docker run --rm -p 8080:80 nexus

O usando Docker Compose:

docker compose up --build

La aplicacion quedara disponible en http://localhost:8080.