6ed7f9e2ec
- Updated docs and inventory files - Added new architecture docs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
113 lines
3.5 KiB
Markdown
113 lines
3.5 KiB
Markdown
# 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*
|