Frontend
Estado
Zustand stores e TanStack Query
O app separa estado em duas camadas:
- Zustand — Estado global do cliente (auth, workspace, UI)
- TanStack Query — Estado do servidor (dados do Supabase)
Zustand Stores
Localizados em src/stores/:
useAuthStore
interface AuthState {
user: User | null;
session: Session | null;
loading: boolean;
setAuth: (user: User | null, session: Session | null) => void;
setLoading: (loading: boolean) => void;
}Gerencia o estado de autenticacao do Supabase.
useWorkspaceStore
interface WorkspaceState {
workspace: Workspace | null;
member: Member | null;
members: Member[];
setWorkspace: (workspace, member, members) => void;
clear: () => void;
}Armazena o workspace ativo, o membro atual e a lista de membros.
useUiStore
Estado de UI global (sidebar, modais, etc.).
TanStack Query
Toda interacao com o Supabase usa useQuery para leitura e useMutation para escrita.
// Leitura
const { data, isLoading } = useDeals(pipelineId);
// Escrita
const createDeal = useCreateDeal();
createDeal.mutate({ name: "Novo negocio", ... });Query keys
Padrao: ["entidade", workspaceId, ...filtros]
queryKey: ["deals", workspace?.id, pipelineId]
queryKey: ["deal", dealId]
queryKey: ["contacts", workspace?.id]Invalidacao
Mutations invalidam queries relacionadas em onSuccess:
onSuccess: () =>
qc.invalidateQueries({ queryKey: ["deals", workspace?.id] })