erp-transportistas-v2/docs/02-definicion-modulos/MAI-006-tracking/historias-usuario/US-MAI006-018-ver-estado-sincronizacion.md

US-MAI006-018: Ver Estado de Sincronizacion

Modulo: MAI-006-tracking Version: 1.0.0 Fecha: 2026-01-27 Story Points: 3 Prioridad: MEDIA

---

Descripcion

Como conductor, Quiero saber en todo momento cuantos datos estan pendientes de enviar y el estado de la sincronizacion, Para tener visibilidad de que mi trabajo queda registrado y saber si debo buscar conexion para enviar datos criticos.

---

Actor Principal

Operador / Conductor

---

Precondiciones

1. El conductor tiene la app abierta
2. Existe al menos un viaje activo o cerrado recientemente

---

Criterios de Aceptacion

CA-1: Indicador de estado de conexion en header

Given el conductor esta usando la app When observa el header de cualquier pantalla Then ve un icono de estado de conexion con los siguientes estados:

• Verde: Online y sincronizado
• Amarillo: Sincronizando (animacion)
• Rojo: Offline
• Naranja: Online pero con errores de sync

CA-2: Badge de items pendientes

Given hay datos pendientes de sincronizar When el conductor ve el header Then junto al icono de conexion aparece un badge numerico

• Muestra el numero exacto si < 100
• Muestra "99+" si >= 100
• Desaparece cuando el contador llega a 0

CA-3: Acceso a panel de estado detallado

Given el conductor quiere ver mas detalles When toca el icono de estado de conexion Then se abre un panel/modal con informacion detallada:

• Estado de conexion actual (Online/Offline)
• Tiempo offline (si aplica)
• Ultima sincronizacion exitosa (fecha y hora)
• Desglose de pendientes por tipo

CA-4: Desglose de pendientes por tipo

Given el conductor abre el panel de estado When hay items pendientes Then ve una tabla con:

Tipo	Cantidad	Tamano
Eventos	X	X KB
Posiciones GPS	X	X KB
Fotos	X	X MB
Firmas	X	X KB
Total	X	X MB

CA-5: Indicador de ultima sincronizacion

Given hubo al menos una sincronizacion exitosa When el conductor consulta el panel de estado Then ve "Ultima sincronizacion: [fecha] [hora]"

• Formato: "Hace X minutos" si < 1 hora
• Formato: "Hoy a las HH:MM" si es hoy
• Formato: "Ayer a las HH:MM" si fue ayer
• Formato: "DD/MM/YYYY HH:MM" si es anterior

CA-6: Boton para forzar sincronizacion

Given el conductor esta en el panel de estado And hay conexion a internet And hay items pendientes When toca el boton "Sincronizar ahora" Then inicia la sincronizacion inmediatamente And el boton cambia a estado "Sincronizando..." (disabled) And muestra progreso de la sincronizacion

CA-7: Alerta de errores de sincronizacion

Given algunos items fallaron al sincronizar When el conductor abre el panel de estado Then ve una seccion "Errores" con:

• Cantidad de items con error
• Descripcion del error mas reciente
• Boton "Reintentar" para forzar retry
• Boton "Ver detalles" para mas informacion

---

Flujo Principal

1. Conductor observa header con indicador de estado
2. Conductor nota badge de pendientes
3. Conductor toca el indicador
4. Sistema muestra panel de estado
5. Conductor revisa desglose de pendientes
6. Conductor toca "Sincronizar ahora" (si aplica)
7. Sistema ejecuta sincronizacion
8. Sistema actualiza indicadores en tiempo real

---

Wireframe ASCII del Panel de Estado

+----------------------------------------------------------+
|  ESTADO DE SINCRONIZACION                          [X]   |
+----------------------------------------------------------+
|                                                          |
|  Estado:  [O] ONLINE                                     |
|           Conectado a 4G/LTE                             |
|                                                          |
|  Ultima sincronizacion: Hace 15 minutos                  |
|  (2026-01-27 14:35:22)                                   |
|                                                          |
+----------------------------------------------------------+
|  PENDIENTES DE ENVIAR                                    |
|  +----------------------------------------------------+  |
|  | Tipo              | Cantidad | Tamano    | Estado  |  |
|  +----------------------------------------------------+  |
|  | Eventos           |       5  |    2 KB   | Listo   |  |
|  | Posiciones GPS    |      45  |    5 KB   | Listo   |  |
|  | Fotos             |       3  |  4.5 MB   | Listo   |  |
|  | Firma POD         |       1  |   32 KB   | Listo   |  |
|  +----------------------------------------------------+  |
|  | TOTAL             |      54  |  4.6 MB   |         |  |
|  +----------------------------------------------------+  |
|                                                          |
+----------------------------------------------------------+
|  ERRORES (2 items)                                       |
|  [!] 2 fotos fallaron: "Timeout de conexion"            |
|      [Reintentar]  [Ver detalles]                       |
+----------------------------------------------------------+
|                                                          |
|  [========== SINCRONIZAR AHORA ==========]              |
|                                                          |
+----------------------------------------------------------+

---

Notas Tecnicas

Tecnologias Involucradas

Componente	Tecnologia	Proposito
UI	React Native	Componentes visuales
State	RxJS Observables	Estado reactivo
Icons	Lucide Icons	Iconografia
Storage Query	WatermelonDB	Consulta de pendientes

Componente React

// src/components/SyncStatusIndicator.tsx
interface SyncStatusIndicatorProps {
  variant: 'header' | 'panel';
}

// Estados del indicador
type ConnectionStatus = 'ONLINE' | 'OFFLINE' | 'SYNCING' | 'ERROR';

// Colores por estado
const STATUS_COLORS = {
  ONLINE: '#10B981',   // Verde
  OFFLINE: '#EF4444',  // Rojo
  SYNCING: '#F59E0B',  // Amarillo
  ERROR: '#F97316'     // Naranja
};

Estructura de Datos para UI

interface SyncStatusData {
  connectionStatus: ConnectionStatus;
  connectionType: string | null;  // 'wifi', '4g', 'cellular'
  lastSyncAt: Date | null;
  pendingItems: {
    events: { count: number; size: number };
    positions: { count: number; size: number };
    photos: { count: number; size: number };
    signatures: { count: number; size: number };
  };
  errors: Array<{
    itemId: string;
    type: string;
    message: string;
    timestamp: Date;
  }>;
  totalPending: number;
  totalSize: number;
}

---

Dependencias

Dependencia	Tipo	Descripcion
US-MAI006-016	Funcional	Operar sin conexion
US-MAI006-017	Funcional	Sincronizar al reconectar
SyncManager	Tecnica	Servicio de sincronizacion

---

Riesgos y Mitigaciones

Riesgo	Probabilidad	Impacto	Mitigacion
UI no se actualiza en tiempo real	Media	Bajo	Usar observables reactivos
Calculo de tamano incorrecto	Baja	Bajo	Pruebas unitarias
Panel bloquea la UI	Baja	Medio	Usar modal con animacion

---

Definition of Done

• Indicador de estado visible en header
• Badge de pendientes funciona correctamente
• Panel de estado muestra toda la informacion
• Desglose por tipo implementado
• Ultima sincronizacion se muestra correctamente
• Boton "Sincronizar ahora" funciona
• Seccion de errores implementada
• Actualizacion en tiempo real (reactiva)
• Pruebas de UI completadas
• Accesibilidad verificada (a11y)

---

US-MAI006-018 v1.0.0 - erp-transportistas - Sistema SIMCO v4.0.0