Pular para conteúdo

Guia — atenvi-web

Agendamento público + painel do estabelecimento (tenant), unificados em Next.js 15 (App Router). Não confundir com atenvi-web-admin (backoffice interno Atenvi, ver atenvi-web-admin.md).

Estrutura de pastas

src/
  app/
    (public)/       ← sem autenticação: link de agendamento do cliente final (AG1)
    (private)/      ← autenticado: painel do estabelecimento (profissional/admin do tenant)
      layout.tsx
      <feature>/    ← agenda, cadastro profissional/serviço, caixa, comissão
        page.tsx
        loading.tsx
        error.tsx
  components/       ← componentes locais do web
  hooks/
  lib/
    api/            ← funções de fetch para TanStack Query
    utils/
  stores/           ← Zustand stores
  types/

Regras Next.js

  • Server Components por padrão — 'use client' apenas quando necessário (interação, estado)
  • Dados em Server Components via fetch direto ao atenvi-bff (sem TanStack Query no servidor)
  • TanStack Query apenas em Client Components para dados interativos/reativos
  • Loading UI com loading.tsx e Error boundary com error.tsx por rota

TanStack Query

  • Query keys: ['<resource>', <id>?] → ['appointments'], ['appointments', tenantId]
  • Funções de fetch centralizadas em src/lib/api/
  • Sem lógica de fetch inline em componentes

Zustand

  • Store por domínio de UI: useLayoutStore (sidebar, tema), useFilterStore
  • Sem server state no Zustand — apenas estado de UI

Componentes

  • Componentes de negócio locais em src/components/
  • Primitivos de UI via atenvi-ui e shadcn/ui — sem reimplementação

(public) vs (private)

  • (public): foco em experiência do cliente final agendando — SEO relevante, metadata via generateMetadata(), SSR/SSG
  • (private): painel do estabelecimento — pode ser Client-heavy, sem preocupação de SEO