Ferco Admin — Panel administrador de remates ganaderos

Frontend React 18 + Vite + TypeScript para gestionar el backend Spring Boot de remates en vivo. Consume la API REST, WebSocket nativo (/ws/**) y SSE (/api/webflux/lotes/stream/*).

Requisitos

• Bun 1.x (o Node.js 18+ con npm)

Instalación

Con Bun (recomendado en este repo):

bun install

Con npm:

npm install

Variables de entorno

Copie .env.example a .env:

Variable	Descripción
VITE_API_URL	URL base del backend sin barra final. Ej: https://testapp.digitaltelecom.net. Si está vacía, las peticiones usan el mismo origen (recomendado en dev con el proxy de Vite).

Desarrollo

bun run dev
# o: npm run dev

Abre http://localhost:5173.

Sin VITE_API_URL, Vite hace proxy de /api, /auth, /contador y /ws hacia https://testapp.digitaltelecom.net (configurable en vite.config.ts).

Producción

bun run build
bun run preview
# o: npm run build && npm run preview

Despliegue: sirva la carpeta dist/ en el mismo dominio que la API o configure CORS en el backend.

Docker

Imagen multi-etapa: Bun compila el frontend y nginx sirve los estáticos.

# Con docker compose (recomendado)
docker compose up -d --build

# Panel en http://localhost:8080

Variables en docker-compose.yml o en un .env junto al compose:

Variable	Default	Descripción
VITE_API_URL	https://testapp.digitaltelecom.net	URL del backend (se embebe en el build)
APP_PORT	8080	Puerto expuesto en el host

Build manual:

docker build \
  --build-arg VITE_API_URL=https://testapp.digitaltelecom.net \
  -t ferco-admin:latest .

docker run -d -p 8080:80 --name ferco-admin ferco-admin:latest

Nota: VITE_API_URL se define en tiempo de build. Si cambia la API, reconstruya la imagen (docker compose up -d --build).

Autenticación

• Login: POST /api/usuarios/login (email + contraseña).
• Token JWT en localStorage (ferco_admin_token).
• Rutas del panel protegidas; 401 cierra sesión y redirige a /login.
• Solo usuarios aprobados (confirmed: true) pueden entrar.

Módulos

Ruta	Función
/	Dashboard con totales y accesos rápidos
/usuarios	Listado, aprobación de pendientes, edición, eliminación
/cabanas	CRUD cabañas
/remates	CRUD remates, finalizar remate, indicador WS eventos
/lotes	CRUD lotes, suscripción SSE opcional por lote
/pujas	Listado, filtros, informes por remate
/en-vivo	Sala operador: contador WS/REST, reset, corregir, FIN_REMATE, pujas en vivo
/historial	GET /api/HistorialPujas

Tiempo real

• Contador: wss://…/ws/puja/{remateId}/{loteId} + REST /contador/*
• Eventos remate: wss://…/ws/eventos/{remateId} → mensaje FIN_REMATE
• SSE lotes: GET /api/webflux/lotes/stream/{loteId} con header Authorization: Bearer …

Estructura

src/
  api/          Cliente HTTP y endpoints
  auth/         AuthContext, PrivateRoute
  hooks/        useWebSocket, useContador, useEventosRemate, useLoteSSE
  pages/        Pantallas del panel
  components/   Layout, Sidebar, DataTable, Modal, etc.
  types/        Interfaces TypeScript
  utils/        URLs, fechas

Backend de referencia

Producción: https://testapp.digitaltelecom.net