Pedro Gomes
b7e3208eb2
Passo 12 completo. Build limpo, AC server-side totalmente verificado. O que foi implementado: lib/queue/ — camada de persistência offline: db.ts — Dexie 4 com tabelas pending e deadLetters broadcast.ts — BroadcastChannel helper (mai-call-sync) para comunicar entre tabs sync.ts — loop de sync com retry/backoff: signPhotoUpload → PUT MinIO → create; 409 = sucesso; 4xx = dead-letter; erros de rede = paragem + retry na próxima volta SyncProvider — React Context que: Arranca sync ao reconectar (online event + visibilitychange) Polling de 10s como fallback Regista Background Sync API quando disponível Expõe pendingCount / deadLetterCount via useSyncState() Formulário (/maintenance/new) — refatorado: ao submeter, escreve em IndexedDB e navega imediatamente para /sent sem esperar pelo servidor. O SyncProvider processa a fila em background. Feedback visual: SyncChip na home: "Tudo sincronizado" / "N pedidos por enviar" / erro dead-letter /maintenance/sent: mostra "Em fila" (Clock) ou "Enviado" (CheckCircle2) reactivamente via BroadcastChannel Workbox (@ducanh2912/next-pwa) — app shell precaching ativo, para que o app carregue mesmo sem rede depois da primeira visita.
32 lines
930 B
TypeScript
32 lines
930 B
TypeScript
'use client';
|
|
|
|
import { useSyncState } from './sync-provider';
|
|
|
|
export function SyncChip() {
|
|
const { pendingCount, deadLetterCount } = useSyncState();
|
|
|
|
if (deadLetterCount > 0) {
|
|
return (
|
|
<div className="rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
|
{deadLetterCount} pedido{deadLetterCount > 1 ? 's' : ''} com erro — contacta o supervisor.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (pendingCount > 0) {
|
|
return (
|
|
<div className="flex items-center gap-2 rounded-lg bg-orange-50 px-3 py-2 text-xs text-orange-700">
|
|
<span className="h-2 w-2 rounded-full bg-orange-400" />
|
|
{pendingCount} pedido{pendingCount > 1 ? 's' : ''} por enviar
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 rounded-lg bg-green-50 px-3 py-2 text-xs text-green-700">
|
|
<span className="h-2 w-2 rounded-full bg-green-500" />
|
|
Tudo sincronizado
|
|
</div>
|
|
);
|
|
}
|