# 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](./DASHBOARD-DESPACHO.md) - Detalle del dashboard
- [MAPA-TRACKING-RT.md](./MAPA-TRACKING-RT.md) - Tracking en tiempo real
- [AUDITORIA-COMPONENTES-FRONTEND.md](../../orchestration/tareas/2026-01-28/TASK-008-validacion-remediacion/AUDITORIA-COMPONENTES-FRONTEND.md) - Auditoria completa

---

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