Gestão de Estado Frontend (Zustand & Query Cache)

Gerenciamento de Estado no Frontend

O frontend do Prime Crown foi migrado de um React Context monolítico para uma arquitetura combinada de Zustand (para estado de domínio da aplicação) e TanStack Query (para cache e sincronização server-side).

graph LR
    Boot["/api/boot (Carga Inicial)"] --> QueryCache["TanStack Query Cache"]
    QueryCache -->|useStoreQuerySync| Stores["Zustand Stores (src/stores/)"]
    Stores -->|Selectors Granulares| Components["Componentes React 19"]
    Components -->|Actions Otimistas| Stores
    Stores -->|syncAtomic.ts| API["/api/atomic/*"]

📦 Detalhamento das Zustand Stores (src/stores/)

1. requestsStore.ts (Agendamentos & Faturas)

• Estado: Lista de ServiceRequest, faturas ativas e filtros de data/status.
• Ações: updateRequestStatus, rescheduleRequest, cancelRequest, addInvoice.
• Seletores Recomendados: useRequestsList(), usePendingRequests().

2. entityStore.ts (Clientes, Funcionárias, Serviços e Leads)

• Estado: Entidades core do sistema e dicionário de preços/addons.
• Ações: saveClient, saveEmployee, updateLeadStatus, deleteEntity.
• Seletores Recomendados: useClients(), useEmployees(), useLeads().

3. systemStore.ts (Configurações Globais & Regras)

• Estado: Configurações de IA (Gemini), instâncias de WhatsApp, regras de cancelamento e logs.
• Ações: updateWhatsAppConfig, updateAiSettings, addSystemLog.

4. payrollStore.ts (Folha de Pagamento)

• Estado: Períodos operacionais, entradas de horas, reservas de emergência e histórico de repasses.
• Ações: settlePayrollPeriod, adjustStaffBonus, transferToReserve.

---

⚡ Padrão de Atualização Otimista com Rollback Automatico

Para garantir que a interface seja instantânea (zero delay de rede para o usuário), utilizamos o padrão Optimistic UI:

// Exemplo do padrão executado dentro das stores:
async updateRequest(id: string, updates: Partial<ServiceRequest>) {
  // 1. Snapshot do estado anterior (para rollback)
  const previousState = get().requests;

  // 2. Atualização otimista imediata na store
  set((state) => ({
    requests: state.requests.map(r => r.id === id ? { ...r, ...updates } : r)
  }));

  try {
    // 3. Persistência atômica assíncrona no Cloudflare D1
    await syncAtomic('/api/atomic/requests', { id, ...updates });
  } catch (error) {
    // 4. Em caso de falha, reverte a store e notifica
    set({ requests: previousState });
    toastBridge.show('error', 'Falha ao sincronizar com o servidor');
  }
}