# 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*