erp-transportistas-v2/orchestration/tareas/2026-01-28/TASK-008-validacion-remediacion/AUDITORIA-COMPONENTES-FRONTEND.md

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.

// 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.

// 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):

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:

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

---

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)

{
  "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

// 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:

   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:

   @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