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