6ed7f9e2ec
- Updated docs and inventory files - Added new architecture docs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
320 lines
11 KiB
Markdown
320 lines
11 KiB
Markdown
# AUDITORIA-COMPONENTES-FRONTEND.md
|
|
|
|
**Proyecto:** erp-transportistas
|
|
**TASK:** 008.2.1 + 008.2.2
|
|
**Fecha:** 2026-01-28
|
|
**Agente:** Claude Opus 4.5
|
|
|
|
---
|
|
|
|
## 1. RESUMEN EJECUTIVO
|
|
|
|
| Metrica | Valor |
|
|
|---------|-------|
|
|
| Total Componentes Auditados | 10 |
|
|
| Componentes con Props Correctos | 10 |
|
|
| Componentes con Imports Correctos | 8 |
|
|
| Errores de Tipo Detectados | 3 |
|
|
| Placeholders/TODOs Identificados | 12 |
|
|
| Libreria de Mapas | Leaflet/react-leaflet (instalada, NO integrada) |
|
|
|
|
**Estado General:** FUNCIONAL con observaciones menores
|
|
|
|
---
|
|
|
|
## 2. INVENTARIO DE COMPONENTES
|
|
|
|
### 2.1 Feature: Despacho
|
|
|
|
| # | Componente | Archivo | Props Interface | Tipos Importados | Estado |
|
|
|---|------------|---------|-----------------|------------------|--------|
|
|
| 1 | `DispatchMap` | `frontend/src/features/despacho/components/DispatchMap.tsx` | `DispatchMapProps` | `EstadoUnidad`, `ViajePendiente`, `EstadoUnidadDespacho` | OK |
|
|
| 2 | `AsignacionModal` | `frontend/src/features/despacho/components/AsignacionModal.tsx` | `AsignacionModalProps` | `ViajePendiente`, `SugerenciaAsignacion`, `TipoCertificacion` | OK |
|
|
| 3 | `UnidadStatusPanel` | `frontend/src/features/despacho/components/UnidadStatusPanel.tsx` | `UnidadStatusPanelProps` | `EstadoUnidadDespacho`, `EstadoUnidad` | OK |
|
|
| 4 | `ViajesPendientesPanel` | `frontend/src/features/despacho/components/ViajesPendientesPanel.tsx` | `ViajesPendientesPanelProps` | `ViajePendiente` | OK |
|
|
|
|
### 2.2 Feature: Tracking
|
|
|
|
| # | Componente | Archivo | Props Interface | Tipos Importados | Estado |
|
|
|---|------------|---------|-----------------|------------------|--------|
|
|
| 5 | `TrackingMap` | `frontend/src/features/tracking/components/TrackingMap.tsx` | `TrackingMapProps` | `PosicionActual`, `EventoTracking` | OK |
|
|
| 6 | `EventosList` | `frontend/src/features/tracking/components/EventosList.tsx` | `EventosListProps` | `EventoTracking`, `EventoTrackingFilters`, `TipoEventoTracking` | ERROR |
|
|
| 7 | `GeocercasList` | `frontend/src/features/tracking/components/GeocercasList.tsx` | `GeocercasListProps` | `Geocerca`, `GeocercaFilters`, `TipoGeocerca` | ERROR |
|
|
| 8 | `ViajeTrackingView` | `frontend/src/features/tracking/components/ViajeTrackingView.tsx` | `ViajeTrackingViewProps` | `TipoEventoTracking`, `EventoTracking` | OK |
|
|
| 9 | `ETAProgressBar` | `frontend/src/features/tracking/components/ETAProgressBar.tsx` | `ETAProgressBarProps` | `TipoEventoTracking` | OK |
|
|
| 10 | `EventTimeline` | `frontend/src/features/tracking/components/EventTimeline.tsx` | `EventTimelineProps` | `TipoEventoTracking`, `FuenteEvento`, `EventoTracking` | OK |
|
|
|
|
---
|
|
|
|
## 3. EVALUACION DE COHERENCIA DE TIPOS
|
|
|
|
### 3.1 Archivos de Tipos Analizados
|
|
|
|
| Feature | Archivo | ENUMs | Interfaces | DTOs |
|
|
|---------|---------|-------|------------|------|
|
|
| Despacho | `frontend/src/features/despacho/types/index.ts` | 3 | 13 | 4 |
|
|
| Tracking | `frontend/src/features/tracking/types/index.ts` | 3 | 9 | 2 |
|
|
|
|
### 3.2 Errores de Tipo Detectados
|
|
|
|
#### ERROR 1: Import de Tipo Inexistente - `EventoTrackingFilters`
|
|
|
|
**Archivo:** `frontend/src/features/tracking/components/EventosList.tsx`
|
|
**Linea:** 4
|
|
**Descripcion:** El componente importa `EventoTrackingFilters` pero el tipo en `types/index.ts` se llama `EventoFilters`.
|
|
|
|
```typescript
|
|
// ACTUAL (incorrecto)
|
|
import type { EventoTracking, EventoTrackingFilters, TipoEventoTracking } from '../types';
|
|
|
|
// ESPERADO (correcto)
|
|
import type { EventoTracking, EventoFilters, TipoEventoTracking } from '../types';
|
|
```
|
|
|
|
**Severidad:** ALTA - Causa error de compilacion TypeScript
|
|
**Remediacion:** Renombrar import o agregar alias de tipo en `types/index.ts`
|
|
|
|
---
|
|
|
|
#### ERROR 2: Mismatch de Filtro - `activo` vs `activa`
|
|
|
|
**Archivo:** `frontend/src/features/tracking/components/GeocercasList.tsx`
|
|
**Linea:** 47
|
|
**Descripcion:** El componente usa `activo` en el objeto `filters`, pero el tipo `GeocercaFilters` define el campo como `activa`.
|
|
|
|
```typescript
|
|
// ACTUAL en componente (incorrecto)
|
|
const filters: GeocercaFilters = {
|
|
tipo: tipoFilter || undefined,
|
|
activo: activoFilter !== '' ? activoFilter : undefined, // activo
|
|
...
|
|
};
|
|
|
|
// DEFINICION en types/index.ts
|
|
export interface GeocercaFilters {
|
|
tipo?: TipoGeocerca;
|
|
activa?: boolean; // activa (con 'a')
|
|
...
|
|
}
|
|
```
|
|
|
|
**Severidad:** MEDIA - El campo se ignora en runtime
|
|
**Remediacion:** Cambiar `activo` a `activa` en el componente
|
|
|
|
---
|
|
|
|
#### ERROR 3: Mismatch de Enum - `TipoGeocerca` Labels vs Values
|
|
|
|
**Archivo:** `frontend/src/features/tracking/components/GeocercasList.tsx`
|
|
**Lineas:** 11-34
|
|
**Descripcion:** Los labels y iconos definen valores que no existen en el enum `TipoGeocerca`.
|
|
|
|
**Labels en Componente (parciales):**
|
|
```typescript
|
|
const tipoGeocercaLabels: Record<TipoGeocerca, string> = {
|
|
CLIENTE: 'Cliente',
|
|
ALMACEN: 'Almacen', // NO existe en enum
|
|
GASOLINERA: 'Gasolinera',
|
|
CASETA: 'Caseta',
|
|
PUNTO_CONTROL: 'Punto de Control',
|
|
ZONA_RIESGO: 'Zona de Riesgo',
|
|
ZONA_DESCANSO: 'Zona de Descanso', // NO existe en enum
|
|
FRONTERA: 'Frontera', // NO existe en enum
|
|
ADUANA: 'Aduana', // NO existe en enum
|
|
PUERTO: 'Puerto', // NO existe en enum
|
|
};
|
|
```
|
|
|
|
**Enum en types/index.ts:**
|
|
```typescript
|
|
export enum TipoGeocerca {
|
|
CIRCULAR = 'CIRCULAR',
|
|
POLIGONAL = 'POLIGONAL',
|
|
CLIENTE = 'CLIENTE',
|
|
PROVEEDOR = 'PROVEEDOR',
|
|
PATIO = 'PATIO',
|
|
ZONA_RIESGO = 'ZONA_RIESGO',
|
|
CASETA = 'CASETA',
|
|
GASOLINERA = 'GASOLINERA',
|
|
PUNTO_CONTROL = 'PUNTO_CONTROL',
|
|
OTRO = 'OTRO',
|
|
}
|
|
```
|
|
|
|
**Valores Faltantes en Enum:**
|
|
- `ALMACEN`
|
|
- `ZONA_DESCANSO`
|
|
- `FRONTERA`
|
|
- `ADUANA`
|
|
- `PUERTO`
|
|
|
|
**Valores en Enum No Mapeados:**
|
|
- `CIRCULAR`
|
|
- `POLIGONAL`
|
|
- `PROVEEDOR`
|
|
- `PATIO`
|
|
- `OTRO`
|
|
|
|
**Severidad:** ALTA - TypeScript dara error de tipo
|
|
**Remediacion:** Sincronizar enum con labels o usar Partial<Record>
|
|
|
|
---
|
|
|
|
## 4. LISTA DE TODOs Y PLACEHOLDERS
|
|
|
|
### 4.1 Integracion de Mapas (CRITICO)
|
|
|
|
| # | Archivo | Linea | Texto | Descripcion |
|
|
|---|---------|-------|-------|-------------|
|
|
| 1 | `DispatchMap.tsx` | 71 | `{/* Placeholder map background */}` | Background CSS gradient en lugar de mapa real |
|
|
| 2 | `DispatchMap.tsx` | 199 | `Integrar con Leaflet/Mapbox` | Nota visible en UI indicando integracion pendiente |
|
|
| 3 | `TrackingMap.tsx` | 40 | `// Simple map rendering (placeholder - integrate with actual map library)` | Comentario de codigo |
|
|
| 4 | `TrackingMap.tsx` | 75 | `{/* Placeholder map background */}` | Background CSS gradient en lugar de mapa real |
|
|
| 5 | `TrackingMap.tsx` | 81 | `{/* Route polyline placeholder */}` | Polyline SVG simplificada |
|
|
| 6 | `TrackingMap.tsx` | 132 | `{/* Map controls placeholder */}` | Controles zoom no funcionales |
|
|
| 7 | `TrackingMap.tsx` | 156 | `Integrar con Mapbox/Google Maps/Leaflet` | Nota visible en UI |
|
|
| 8 | `ViajeTrackingView.tsx` | 92 | `const remainingKm = 100; // Placeholder - would calculate from route` | Calculo ETA hardcodeado |
|
|
| 9 | `ViajeTrackingView.tsx` | 159 | `{/* Route polyline (placeholder) */}` | Polyline SVG simplificada |
|
|
| 10 | `ViajeTrackingView.tsx` | 246 | `Integrar con Leaflet/Mapbox` | Nota visible en UI |
|
|
|
|
### 4.2 Otros Placeholders (Menor Prioridad)
|
|
|
|
| # | Archivo | Linea | Tipo | Descripcion |
|
|
|---|---------|-------|------|-------------|
|
|
| 11 | `AsignacionModal.tsx` | 203 | Input placeholder | Texto ejemplo en campo de notas |
|
|
| 12 | `GeocercasList.tsx` | 91 | Input placeholder | "Buscar por nombre..." |
|
|
|
|
---
|
|
|
|
## 5. ESTADO DE LIBRERIA DE MAPAS
|
|
|
|
### 5.1 Dependencias Instaladas (package.json)
|
|
|
|
```json
|
|
{
|
|
"dependencies": {
|
|
"leaflet": "^1.9.4",
|
|
"react-leaflet": "^4.2.1"
|
|
},
|
|
"devDependencies": {
|
|
"@types/leaflet": "^1.9.8"
|
|
}
|
|
}
|
|
```
|
|
|
|
**Estado:** INSTALADA pero NO UTILIZADA
|
|
|
|
### 5.2 Uso Actual
|
|
|
|
Los componentes de mapa (`DispatchMap`, `TrackingMap`, `ViajeTrackingView`) utilizan:
|
|
- CSS gradients como fondo de mapa
|
|
- SVG polylines para rutas
|
|
- Posicionamiento absoluto con calculos manuales de coordenadas
|
|
- Transformacion simple Mexico-centrica para demo
|
|
|
|
```typescript
|
|
// Ejemplo de transformacion actual (NO usa Leaflet)
|
|
const transformCoords = (lat: number, lng: number) => {
|
|
const x = ((lng + 118) / 32) * 100;
|
|
const y = ((33 - lat) / 19) * 100;
|
|
return { x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) };
|
|
};
|
|
```
|
|
|
|
### 5.3 Integracion Leaflet Requerida
|
|
|
|
Para completar la integracion se requiere:
|
|
|
|
1. **Crear componente base de mapa:**
|
|
```typescript
|
|
import { MapContainer, TileLayer, Marker, Polyline } from 'react-leaflet';
|
|
```
|
|
|
|
2. **Configurar tiles:**
|
|
- OpenStreetMap (gratuito)
|
|
- Mapbox (requiere API key)
|
|
- Google Maps (requiere API key + licencia comercial)
|
|
|
|
3. **Actualizar componentes:**
|
|
- `DispatchMap.tsx` - Mapa de despacho con unidades y viajes
|
|
- `TrackingMap.tsx` - Mapa de tracking en tiempo real
|
|
- `ViajeTrackingView.tsx` - Vista de tracking individual
|
|
|
|
4. **Agregar CSS de Leaflet:**
|
|
```css
|
|
@import 'leaflet/dist/leaflet.css';
|
|
```
|
|
|
|
---
|
|
|
|
## 6. RECOMENDACIONES
|
|
|
|
### 6.1 Correccion Inmediata (BLOQUEANTE)
|
|
|
|
| Prioridad | Accion | Archivo | Esfuerzo |
|
|
|-----------|--------|---------|----------|
|
|
| P0 | Renombrar `EventoTrackingFilters` a `EventoFilters` o agregar alias | `EventosList.tsx` | 5 min |
|
|
| P0 | Cambiar `activo` a `activa` en GeocercaFilters | `GeocercasList.tsx` | 2 min |
|
|
| P0 | Sincronizar enum `TipoGeocerca` con labels | `types/index.ts` + `GeocercasList.tsx` | 15 min |
|
|
|
|
### 6.2 Integracion Mapas (ALTA PRIORIDAD)
|
|
|
|
| Prioridad | Accion | Esfuerzo Estimado |
|
|
|-----------|--------|-------------------|
|
|
| P1 | Crear componente `LeafletMapBase` reutilizable | 2h |
|
|
| P1 | Integrar Leaflet en `TrackingMap.tsx` | 3h |
|
|
| P1 | Integrar Leaflet en `DispatchMap.tsx` | 3h |
|
|
| P1 | Integrar Leaflet en `ViajeTrackingView.tsx` | 2h |
|
|
| P2 | Implementar calculo real de ETA basado en routing | 4h |
|
|
|
|
### 6.3 Mejoras Futuras (BAJA PRIORIDAD)
|
|
|
|
| Prioridad | Accion | Descripcion |
|
|
|-----------|--------|-------------|
|
|
| P3 | Agregar clustering de markers | Para muchas unidades en pantalla |
|
|
| P3 | Implementar WebSocket para tracking real-time | Reemplazar polling con push |
|
|
| P3 | Agregar soporte offline para mapas | Tiles cacheados en mobile |
|
|
|
|
---
|
|
|
|
## 7. MATRIZ DE COHERENCIA COMPONENTES-TIPOS
|
|
|
|
| Componente | Props OK | Imports OK | Types Match | Build Pass |
|
|
|------------|:--------:|:----------:|:-----------:|:----------:|
|
|
| DispatchMap | OK | OK | OK | OK |
|
|
| AsignacionModal | OK | OK | OK | OK |
|
|
| UnidadStatusPanel | OK | OK | OK | OK |
|
|
| ViajesPendientesPanel | OK | OK | OK | OK |
|
|
| TrackingMap | OK | OK | OK | OK |
|
|
| EventosList | OK | ERROR | ERROR | FAIL |
|
|
| GeocercasList | OK | OK | ERROR | FAIL |
|
|
| ViajeTrackingView | OK | OK | OK | OK |
|
|
| ETAProgressBar | OK | OK | OK | OK |
|
|
| EventTimeline | OK | OK | OK | OK |
|
|
|
|
**Resultado:** 8/10 componentes pasarian build sin errores
|
|
|
|
---
|
|
|
|
## 8. CONCLUSION
|
|
|
|
El frontend de `erp-transportistas` tiene una arquitectura solida con:
|
|
- Props interfaces bien definidas para todos los componentes
|
|
- Tipos centralizados en archivos `types/index.ts` por feature
|
|
- Uso correcto de TanStack Query para fetching
|
|
- Separacion clara entre componentes de presentacion y logica
|
|
|
|
**Problemas a resolver:**
|
|
1. **3 errores de tipos** que impedirian compilacion TypeScript estricta
|
|
2. **Integracion de mapas pendiente** - Leaflet instalado pero no utilizado
|
|
3. **10 placeholders de mapa** con notas visibles en UI
|
|
|
|
**Esfuerzo estimado para remediacion completa:**
|
|
- Errores de tipos: 30 minutos
|
|
- Integracion basica Leaflet: 10 horas
|
|
- Total: ~1-2 dias de trabajo
|
|
|
|
---
|
|
|
|
*Generado por TASK-008.2.1 + 008.2.2 - Auditoria Frontend*
|