erp-transportistas-v2/docs/20-frontend

Frontend - ERP Transportistas

Sistema: SIMCO v4.0.0 Proyecto: erp-transportistas Version: 1.0.0 Actualizado: 2026-01-28

---

Resumen

El frontend de ERP Transportistas esta construido con React 18.x y proporciona interfaces para:

• Dashboard de Despacho: Asignacion de viajes a unidades
• Tracking en Tiempo Real: Seguimiento GPS de unidades
• Gestion de Viajes: Estados, eventos, POD

---

Stack Tecnologico

Tecnologia	Version	Proposito
React	18.x	UI Framework
TypeScript	5.x	Tipado estatico
TanStack Query	5.x	Data fetching
React Router	6.x	Routing
Tailwind CSS	3.x	Estilos
Leaflet	1.9.x	Mapas (pendiente integracion)
Zustand	4.x	Estado global

---

Estructura de Carpetas

frontend/src/
├── features/
│   ├── despacho/           # Dashboard de despacho
│   │   ├── components/     # DispatchMap, AsignacionModal, etc.
│   │   ├── types/          # Interfaces y ENUMs
│   │   └── api/            # React Query hooks
│   └── tracking/           # Tracking en tiempo real
│       ├── components/     # TrackingMap, ViajeTrackingView, etc.
│       ├── types/          # Interfaces de tracking
│       └── hooks/          # useTrackingWebSocket, etc.
├── pages/
│   └── DespachoPage.tsx    # Pagina principal de despacho
├── shared/
│   ├── components/         # Componentes compartidos
│   └── hooks/              # Hooks compartidos
└── App.tsx

---

Features Implementadas

1. Despacho (Sprint S6)

Componente	Archivo	Estado
DispatchMap	despacho/components/DispatchMap.tsx	Funcional (sin mapas reales)
AsignacionModal	despacho/components/AsignacionModal.tsx	Funcional
UnidadStatusPanel	despacho/components/UnidadStatusPanel.tsx	Funcional
ViajesPendientesPanel	despacho/components/ViajesPendientesPanel.tsx	Funcional
DespachoPage	pages/DespachoPage.tsx	Funcional

2. Tracking (Sprint S7)

Componente	Archivo	Estado
ViajeTrackingView	tracking/components/ViajeTrackingView.tsx	Funcional (sin mapas reales)
ETAProgressBar	tracking/components/ETAProgressBar.tsx	Funcional
EventTimeline	tracking/components/EventTimeline.tsx	Funcional
useTrackingWebSocket	tracking/hooks/useTrackingWebSocket.ts	Funcional

---

Pendientes de Integracion

Mapas Leaflet

Los componentes de mapa usan CSS gradients como placeholder. Leaflet esta instalado pero no integrado.

Trabajo requerido:

1. Crear MapBase componente con react-leaflet
2. Integrar en DispatchMap, TrackingMap, ViajeTrackingView
3. Configurar tile provider (OpenStreetMap, Mapbox)

Esfuerzo estimado: 10-15 horas

Errores de Tipos

3 errores de tipo detectados en auditoria TASK-008:

1. EventoTrackingFilters import (EventosList.tsx)
2. Campo activo vs activa (GeocercasList.tsx)
3. Enum TipoGeocerca mismatch (GeocercasList.tsx)

Esfuerzo estimado: 30 minutos

---

Documentacion Relacionada

• DASHBOARD-DESPACHO.md - Detalle del dashboard
• MAPA-TRACKING-RT.md - Tracking en tiempo real
• AUDITORIA-COMPONENTES-FRONTEND.md - Auditoria completa

---

Generado: 2026-01-28 | Sistema SIMCO v4.0.0