Frontend completo (Etapas 11-18) e extensões de backend (Etapas 13 e 18)
Adiciona o frontend Next.js em frontend/ (setup, design system, autenticação/tema, layout/navegação, área master, área tenant completa: clientes, produtos, vendas, recebimentos, whatsapp, e-mail, alertas, equipe e perfil). Estende o backend de forma aditiva e autorizada: cookie httpOnly para refresh token (Etapa 13) e CRUD de equipe + edição de perfil do tenant (Etapa 18, módulo src/modules/equipe/ novo e PUT /tenant/perfil). Detalhes completos em Etapas/V2/*. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
Executable
+1
@@ -0,0 +1 @@
|
|||||||
|
cd frontend && npx lint-staged
|
||||||
@@ -181,6 +181,26 @@ propositalmente para depois — detalhar em Observações).
|
|||||||
`npm run lint`, `tsc --noEmit` e `npm run build` (produção) também
|
`npm run lint`, `tsc --noEmit` e `npm run build` (produção) também
|
||||||
passam sem erros; smoke test manual via `curl` contra a imagem
|
passam sem erros; smoke test manual via `curl` contra a imagem
|
||||||
`production` real confirmou login + guards funcionando fim a fim.
|
`production` real confirmou login + guards funcionando fim a fim.
|
||||||
|
- **[2026-08-15, revisitado pela Etapa 13 do frontend]** Adicionado
|
||||||
|
suporte a cookie httpOnly para o refresh token (`security.util.ts`,
|
||||||
|
`auth.controller.ts`, `RefreshDto`/`LogoutDto`) — mudança aditiva, os
|
||||||
|
21 testes originais continuam passando sem alteração, mais 4 novos
|
||||||
|
cobrindo o cookie (total 24/24 em `auth.e2e-spec.ts`). Detalhe completo
|
||||||
|
em `Etapas/V2/20-controle-de-progresso-frontend.md`, Etapa 13.
|
||||||
|
- **[2026-08-16, revisitado pela Etapa 18 do frontend]** `tenant_users`
|
||||||
|
(criada nesta etapa) ganhou CRUD real do lado do tenant: novo módulo
|
||||||
|
`src/modules/equipe/` (`GET/POST /tenant/equipe`, `PATCH
|
||||||
|
/tenant/equipe/:id`, só `tenant_admin`, RLS via `TenantContextService`
|
||||||
|
como `customers`/`products` da Etapa 5) — o `GET /auth/tenant/users`
|
||||||
|
deste módulo continua exatamente como estava, só leitura/demonstração,
|
||||||
|
não foi tocado. Também aditivo: `PUT /tenant/perfil`
|
||||||
|
(`nome_fantasia`/`razao_social`) em `src/modules/tenant-profile/`, ao
|
||||||
|
lado do `PUT /tenant/perfil/cor` já existente da Etapa 8. Mudança
|
||||||
|
autorizada explicitamente pelo usuário antes de implementar (a Etapa 18
|
||||||
|
do frontend precisava de CRUD real de equipe e edição de perfil, que
|
||||||
|
não existiam). Detalhe completo — DTOs, regras de limite de plano,
|
||||||
|
auto-bloqueio, testes e2e — em
|
||||||
|
`Etapas/V2/20-controle-de-progresso-frontend.md`, Etapa 18.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,81 @@
|
|||||||
|
# SeConectai Vendas — Prompts de Build Faseado
|
||||||
|
|
||||||
|
Este pacote contém 8 prompts sequenciais e autocontidos para entregar a uma
|
||||||
|
IA de geração de código (Claude Code, Cursor, Windsurf etc). Cada arquivo
|
||||||
|
pode ser colado como um prompt único — eles já trazem o contexto necessário
|
||||||
|
para não depender de memória de conversa anterior.
|
||||||
|
|
||||||
|
## Ordem obrigatória — Backend
|
||||||
|
|
||||||
|
1. `01-setup-projeto.md` — estrutura base, Docker Compose, Postgres, Prisma
|
||||||
|
2. `02-autenticacao-rls.md` — login master/tenant, JWT, RLS
|
||||||
|
3. `03-painel-master-tenants.md` — CRUD de tenants, planos, faturas
|
||||||
|
4. `04-integracoes-evolution-email.md` — Evolution API, instâncias WhatsApp, SMTP
|
||||||
|
5. `05-painel-tenant-customers-produtos.md` — CRUD de clientes e produtos/serviços
|
||||||
|
6. `06-vendas-dashboards.md` — vendas, parcelas, resumos
|
||||||
|
7. `07-motor-de-alertas.md` — BullMQ, templates, disparo e logs
|
||||||
|
8. `08-personalizacao-whitelabel.md` — logo/cor por tenant, ajustes finais
|
||||||
|
|
||||||
|
Controle de progresso: `09-controle-de-progresso.md`
|
||||||
|
|
||||||
|
## Ordem obrigatória — Frontend
|
||||||
|
|
||||||
|
Pré-requisito: backend concluído (ou ao menos as etapas cujos endpoints
|
||||||
|
cada tela consome). Arquitetura de referência:
|
||||||
|
`10-frontend-schema-arquitetura.md`.
|
||||||
|
|
||||||
|
11. `11-frontend-setup-projeto.md` — Next.js, Tailwind, tokens, estrutura
|
||||||
|
12. `12-frontend-design-system.md` — biblioteca de componentes base
|
||||||
|
13. `13-frontend-autenticacao-tema.md` — login, sessão, tema dinâmico whitelabel
|
||||||
|
14. `14-frontend-layout-navegacao.md` — sidebar/topbar/drawer/bottom-nav
|
||||||
|
15. `15-frontend-area-master.md` — telas de negócio do painel master
|
||||||
|
16. `16-frontend-area-tenant-cadastros.md` — dashboard, clientes, produtos
|
||||||
|
17. `17-frontend-area-tenant-vendas.md` — vendas, parcelas, financeiro
|
||||||
|
18. `18-frontend-area-tenant-integracoes-perfil.md` — WhatsApp, e-mail, alertas, equipe, whitelabel
|
||||||
|
19. `19-frontend-polimento-testes.md` — responsividade, acessibilidade, E2E
|
||||||
|
|
||||||
|
Controle de progresso: `20-controle-de-progresso-frontend.md`
|
||||||
|
|
||||||
|
## Arquivos de controle de progresso (obrigatórios)
|
||||||
|
|
||||||
|
`09-controle-de-progresso.md` (backend) e
|
||||||
|
`20-controle-de-progresso-frontend.md` (frontend) são o estado oficial
|
||||||
|
de cada parte do projeto. Regras:
|
||||||
|
|
||||||
|
- **Sempre envie o arquivo correspondente junto com o prompt de cada
|
||||||
|
etapa** (o de backend para as etapas 1–8, o de frontend para as
|
||||||
|
etapas 11–19).
|
||||||
|
- A IA deve lê-lo antes de começar e recusar iniciar uma etapa se a
|
||||||
|
anterior não estiver 100% concluída na checklist.
|
||||||
|
- Ao final de cada etapa, a IA deve devolver o arquivo atualizado (itens
|
||||||
|
marcados, status geral e observações preenchidas) — é esse arquivo
|
||||||
|
atualizado que você guarda e reenvia na próxima etapa/sessão.
|
||||||
|
- Sem esse arquivo, uma IA nova (em outra sessão) não tem como saber o
|
||||||
|
que já foi feito — por isso ele substitui a necessidade de repetir todo
|
||||||
|
o histórico da conversa.
|
||||||
|
|
||||||
|
## Como usar cada prompt
|
||||||
|
|
||||||
|
- Rode nessa ordem — cada etapa assume que a anterior está pronta e
|
||||||
|
funcionando (migrations aplicadas, testes passando).
|
||||||
|
- Ao final de cada etapa, confira o checklist de "Critérios de aceite"
|
||||||
|
antes de avançar para a próxima. Se algo não for atendido, peça correção
|
||||||
|
antes de seguir.
|
||||||
|
- O arquivo `seconectai-vendas-schema.sql` é a fonte de verdade do modelo
|
||||||
|
de dados — qualquer etapa que crie migration deve refletir exatamente
|
||||||
|
essas tabelas (a IA pode adaptar para sintaxe Prisma, mas a estrutura,
|
||||||
|
nomes de campo e tipos devem ser preservados).
|
||||||
|
- Cada prompt já repete o essencial do contexto (stack, convenções), então
|
||||||
|
eles funcionam mesmo em uma conversa nova/sessão nova com a IA.
|
||||||
|
|
||||||
|
## Stack fixada em todas as etapas
|
||||||
|
|
||||||
|
- Node.js 20+ / TypeScript
|
||||||
|
- NestJS (modular por domínio)
|
||||||
|
- PostgreSQL 16 + Prisma ORM
|
||||||
|
- Redis + BullMQ (a partir da etapa 7)
|
||||||
|
- Docker + Docker Compose
|
||||||
|
- Autenticação: JWT (access curto) + refresh token com rotação, senha com
|
||||||
|
argon2id
|
||||||
|
- Multi-tenancy: banco único, isolamento por `tenant_id` + Row Level
|
||||||
|
Security do Postgres
|
||||||
@@ -0,0 +1,261 @@
|
|||||||
|
# SeConectai Vendas — Schema de Frontend (Web Responsivo)
|
||||||
|
|
||||||
|
Este documento define a arquitetura do frontend que vai consumir a API
|
||||||
|
já especificada nas etapas 1–8. Cobre estrutura de telas, navegação,
|
||||||
|
sistema de design e a estratégia de responsividade para funcionar bem
|
||||||
|
tanto em tela de PC quanto em smartphone.
|
||||||
|
|
||||||
|
## 1. Visão geral
|
||||||
|
|
||||||
|
Uma única aplicação, com duas áreas autenticadas separadas:
|
||||||
|
|
||||||
|
- **Área master** (`/master/...`) — seu painel, gestão dos tenants.
|
||||||
|
- **Área tenant** (`/app/...`) — painel que seus clientes usam no dia a
|
||||||
|
dia (vendas, clientes, produtos, alertas).
|
||||||
|
|
||||||
|
Ambas consomem a mesma API REST do backend. O layout de cada área é
|
||||||
|
diferente (menu, cores, permissões), mas compartilham o mesmo sistema de
|
||||||
|
design (componentes, tokens, grid responsivo).
|
||||||
|
|
||||||
|
## 2. Stack sugerida
|
||||||
|
|
||||||
|
- **Next.js 14+ (App Router)** + React 18 + TypeScript
|
||||||
|
- **Tailwind CSS** para estilos utilitários, com tokens de design via
|
||||||
|
CSS variables (necessário para o whitelabel: cor primária muda por
|
||||||
|
tenant em tempo de execução, não pode ser fixa no build)
|
||||||
|
- **shadcn/ui** como base de componentes acessíveis, customizados por
|
||||||
|
cima (não usar como está "fora da caixa" — ajustar aos tokens do
|
||||||
|
projeto)
|
||||||
|
- **TanStack Query (React Query)** para cache/estado de dados vindos da
|
||||||
|
API (listagens, dashboards)
|
||||||
|
- **React Hook Form + Zod** para formulários e validação — os schemas
|
||||||
|
Zod devem espelhar os DTOs do backend
|
||||||
|
- **Recharts** para os gráficos de dashboard (resumo de vendas etc)
|
||||||
|
- Estado de UI leve (sidebar aberta/fechada, tema) via Context/Zustand —
|
||||||
|
não precisa de Redux para este escopo
|
||||||
|
|
||||||
|
## 3. Estratégia de responsividade
|
||||||
|
|
||||||
|
Mobile-first. Breakpoints (padrão Tailwind, manter):
|
||||||
|
|
||||||
|
| Breakpoint | Largura | Uso principal |
|
||||||
|
|------------|-----------|----------------|
|
||||||
|
| base | < 640px | smartphone |
|
||||||
|
| `sm` | ≥ 640px | smartphone grande / phablet |
|
||||||
|
| `md` | ≥ 768px | tablet |
|
||||||
|
| `lg` | ≥ 1024px | desktop |
|
||||||
|
| `xl` | ≥ 1280px | desktop grande |
|
||||||
|
|
||||||
|
Regras de layout por faixa:
|
||||||
|
|
||||||
|
- **Desktop (`lg` e acima):** sidebar fixa lateral (~240px) + topbar.
|
||||||
|
Conteúdo em grid de 2 colunas quando fizer sentido (ex: formulário +
|
||||||
|
resumo lateral).
|
||||||
|
- **Tablet (`md`):** sidebar colapsada só com ícones (expande em hover
|
||||||
|
ou toque), conteúdo em coluna única ou 2 colunas conforme espaço.
|
||||||
|
- **Mobile (abaixo de `md`):**
|
||||||
|
- Sidebar vira **drawer** (menu lateral que desliza, acionado por
|
||||||
|
ícone de hambúrguer na topbar).
|
||||||
|
- **Bottom tab bar fixa** com os 4–5 itens mais usados de cada área
|
||||||
|
(ex. no tenant: Dashboard, Clientes, Vendas, Recebimentos, Mais).
|
||||||
|
- Tabelas **não** fazem scroll horizontal como solução padrão — cada
|
||||||
|
linha vira um **card empilhado** (rótulo: valor), com as
|
||||||
|
informações mais importantes em destaque e as secundárias
|
||||||
|
colapsadas/expansíveis.
|
||||||
|
- Formulários em coluna única; campos grandes o suficiente para touch
|
||||||
|
(mínimo 44x44px de área de toque).
|
||||||
|
- Modais viram **tela cheia** ou **bottom sheet** (desliza de baixo),
|
||||||
|
nunca uma caixa pequena centralizada como no desktop.
|
||||||
|
- Filtros de listagem (que no desktop ficam visíveis lateralmente)
|
||||||
|
viram um botão "Filtros" que abre um bottom sheet no mobile.
|
||||||
|
|
||||||
|
Checklist de teste obrigatório em **toda** tela construída: 375px
|
||||||
|
(mobile pequeno), 768px (tablet) e 1280px (desktop), sem scroll
|
||||||
|
horizontal indevido em nenhuma delas.
|
||||||
|
|
||||||
|
## 4. Mapa de rotas
|
||||||
|
|
||||||
|
### Público (sem autenticação)
|
||||||
|
```
|
||||||
|
/login → detecta master ou tenant pelo e-mail/domínio
|
||||||
|
/esqueci-senha
|
||||||
|
/redefinir-senha/:token
|
||||||
|
```
|
||||||
|
|
||||||
|
### Área master — `/master`
|
||||||
|
```
|
||||||
|
/master/dashboard
|
||||||
|
/master/tenants (lista)
|
||||||
|
/master/tenants/novo
|
||||||
|
/master/tenants/:id (detalhe, edição, faturas do tenant)
|
||||||
|
/master/planos
|
||||||
|
/master/faturas (visão consolidada de todas as mensalidades)
|
||||||
|
/master/evolution-config
|
||||||
|
/master/alertas/templates
|
||||||
|
/master/alertas/logs
|
||||||
|
/master/configuracoes (perfil do admin master, senha, MFA)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Área tenant — `/app`
|
||||||
|
```
|
||||||
|
/app/dashboard
|
||||||
|
/app/clientes (lista)
|
||||||
|
/app/clientes/novo
|
||||||
|
/app/clientes/:id (detalhe, contatos, histórico de vendas)
|
||||||
|
/app/produtos (produtos e serviços)
|
||||||
|
/app/produtos/novo
|
||||||
|
/app/produtos/:id
|
||||||
|
/app/vendas (lista)
|
||||||
|
/app/vendas/nova
|
||||||
|
/app/vendas/:id (detalhe, itens, parcelas)
|
||||||
|
/app/recebimentos (contas a receber, marcar pago)
|
||||||
|
/app/whatsapp (instâncias Evolution, QR code, status)
|
||||||
|
/app/email-config
|
||||||
|
/app/alertas/templates
|
||||||
|
/app/alertas/logs
|
||||||
|
/app/equipe (usuários do tenant, só para tenant_admin)
|
||||||
|
/app/perfil (logo, cor, dados da empresa)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 5. Navegação e layout por área
|
||||||
|
|
||||||
|
**Desktop:**
|
||||||
|
- Sidebar: logo do tenant (ou logo master) no topo, itens de menu com
|
||||||
|
ícone + label, indicador do item ativo, avatar do usuário + logout no
|
||||||
|
rodapé.
|
||||||
|
- Topbar: breadcrumb da página atual, sino de notificações (alertas
|
||||||
|
recentes), busca rápida (clientes/vendas).
|
||||||
|
|
||||||
|
**Mobile:**
|
||||||
|
- Topbar fixa: logo compacta (só o símbolo, não o nome completo) +
|
||||||
|
ícone de menu (drawer) + sino de notificações.
|
||||||
|
- Drawer: réplica do menu completo da sidebar desktop, ocupa a tela
|
||||||
|
inteira ou 80% da largura.
|
||||||
|
- Bottom tab bar: 4 itens fixos mais "Mais" (que abre o restante do
|
||||||
|
menu). Ícone + label curto embaixo.
|
||||||
|
|
||||||
|
## 6. Sistema de design (tokens)
|
||||||
|
|
||||||
|
Paleta **neutra da plataforma** (usada em textos, fundos, bordas —
|
||||||
|
igual em master e em todos os tenants):
|
||||||
|
|
||||||
|
- `--neutral-950: #12141A` — texto principal
|
||||||
|
- `--neutral-500: #6B7280` — texto secundário
|
||||||
|
- `--neutral-200: #E5E7EB` — bordas
|
||||||
|
- `--neutral-50: #F8F9FB` — fundo de página
|
||||||
|
- `--surface: #FFFFFF` — fundo de cards/painéis
|
||||||
|
- `--danger: #DC2626` — erros, valores atrasados
|
||||||
|
- `--success: #16A34A` — pagos, confirmados
|
||||||
|
- `--warning: #D97706` — pendências, avisos
|
||||||
|
|
||||||
|
Cor de marca **do painel master** (fixa, identidade do SeConectai
|
||||||
|
Vendas): `--brand-master: #1E3A5F` (azul petróleo escuro) com acento
|
||||||
|
`--brand-master-accent: #2DD4BF` (verde-água) — usada apenas na área
|
||||||
|
`/master`.
|
||||||
|
|
||||||
|
Cor de marca **de cada tenant** (dinâmica, whitelabel): variável
|
||||||
|
`--color-primary`, resolvida em runtime a partir de
|
||||||
|
`tenants.cor_primaria` (endpoint público de tema, já definido na Etapa
|
||||||
|
8 do backend) e aplicada via CSS variable no layout de `/app`. Se o
|
||||||
|
tenant não definiu cor própria, cair para um azul neutro padrão
|
||||||
|
(`#2563EB`). Validar contraste mínimo (WCAG AA) contra branco antes de
|
||||||
|
aplicar — se a cor escolhida pelo tenant não passar, usar uma versão
|
||||||
|
escurecida automaticamente para texto sobre fundo colorido.
|
||||||
|
|
||||||
|
Tipografia: uma família para UI (ex: Inter ou similar, boa legibilidade
|
||||||
|
em telas pequenas e números tabulares para valores monetários) e uso de
|
||||||
|
`font-variant-numeric: tabular-nums` em qualquer coluna de valores para
|
||||||
|
alinhamento visual em tabelas/cards.
|
||||||
|
|
||||||
|
## 7. Componentes de design system (biblioteca a construir)
|
||||||
|
|
||||||
|
Base (`components/ui/`): Button, Input, Select, DatePicker, Textarea,
|
||||||
|
Table (com variante que vira lista de Cards abaixo do breakpoint `md`),
|
||||||
|
Modal/Sheet (adaptável tela-cheia no mobile), Toast, Badge/StatusPill
|
||||||
|
(para status de fatura/parcela/venda), Card, Pagination, EmptyState,
|
||||||
|
Skeleton (loading), Tabs, FormField (wrapper de label+erro+input).
|
||||||
|
|
||||||
|
Layout (`components/layout/`): Sidebar, Topbar, Drawer, BottomTabBar,
|
||||||
|
Breadcrumb.
|
||||||
|
|
||||||
|
Domínio (`components/domain/`): ClienteCard, VendaForm, ParcelaRow,
|
||||||
|
ProdutoForm, StatusFaturaBadge, ResumoVendasChart, InstanciaWhatsappCard.
|
||||||
|
|
||||||
|
## 8. Dados e autenticação no client
|
||||||
|
|
||||||
|
- **TanStack Query** para toda chamada de leitura (listagens,
|
||||||
|
dashboards, detalhes), com invalidação automática após mutations
|
||||||
|
(criar/editar/excluir).
|
||||||
|
- **Zod schemas** espelhando os DTOs do backend — usados tanto na
|
||||||
|
validação de formulário quanto na tipagem das respostas da API (fonte
|
||||||
|
única de verdade dos tipos no frontend).
|
||||||
|
- **Access token em memória** (não em `localStorage`, para reduzir
|
||||||
|
superfície de XSS); **refresh token em cookie `httpOnly`**, setado
|
||||||
|
pelo backend. Interceptor de requisição renova o access token
|
||||||
|
automaticamente em caso de 401 e repete a chamada original.
|
||||||
|
- **Middleware do Next.js** protegendo `/master/*` e `/app/*`,
|
||||||
|
verificando sessão válida antes de renderizar a página (evita "flash"
|
||||||
|
de conteúdo protegido).
|
||||||
|
- Tema (cor primária + logo) resolvido no login: chama o endpoint
|
||||||
|
público de tema com o identificador do tenant, aplica as CSS
|
||||||
|
variables antes mesmo do usuário autenticar (tela de login já com a
|
||||||
|
cara do tenant certo).
|
||||||
|
|
||||||
|
## 9. Estrutura de pastas sugerida
|
||||||
|
|
||||||
|
```
|
||||||
|
frontend/
|
||||||
|
├── app/
|
||||||
|
│ ├── (public)/
|
||||||
|
│ │ ├── login/
|
||||||
|
│ │ ├── esqueci-senha/
|
||||||
|
│ │ └── redefinir-senha/[token]/
|
||||||
|
│ ├── master/
|
||||||
|
│ │ ├── layout.tsx
|
||||||
|
│ │ ├── dashboard/
|
||||||
|
│ │ ├── tenants/
|
||||||
|
│ │ ├── planos/
|
||||||
|
│ │ ├── faturas/
|
||||||
|
│ │ ├── evolution-config/
|
||||||
|
│ │ └── alertas/
|
||||||
|
│ └── app/
|
||||||
|
│ ├── layout.tsx
|
||||||
|
│ ├── dashboard/
|
||||||
|
│ ├── clientes/
|
||||||
|
│ ├── produtos/
|
||||||
|
│ ├── vendas/
|
||||||
|
│ ├── recebimentos/
|
||||||
|
│ ├── whatsapp/
|
||||||
|
│ ├── email-config/
|
||||||
|
│ ├── alertas/
|
||||||
|
│ ├── equipe/
|
||||||
|
│ └── perfil/
|
||||||
|
├── components/
|
||||||
|
│ ├── ui/
|
||||||
|
│ ├── layout/
|
||||||
|
│ └── domain/
|
||||||
|
├── lib/
|
||||||
|
│ ├── api/ (client HTTP + funções por domínio)
|
||||||
|
│ ├── auth/
|
||||||
|
│ ├── theme/
|
||||||
|
│ └── validators/ (schemas Zod)
|
||||||
|
├── hooks/
|
||||||
|
└── styles/
|
||||||
|
└── tokens.css (CSS variables da paleta e tipografia)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 10. Checklist de responsividade (aplicar em toda tela nova)
|
||||||
|
|
||||||
|
- [ ] Testado em 375px, 768px e 1280px sem overflow horizontal indevido
|
||||||
|
- [ ] Tabelas de listagem viram cards empilhados abaixo de `md`
|
||||||
|
- [ ] Navegação principal acessível via bottom tab bar ou drawer no mobile
|
||||||
|
- [ ] Touch targets ≥ 44x44px em elementos interativos no mobile
|
||||||
|
- [ ] Formulário utilizável com teclado virtual aberto (campo em foco
|
||||||
|
não fica escondido atrás do teclado)
|
||||||
|
- [ ] Modais/diálogos viram tela cheia ou bottom sheet no mobile
|
||||||
|
- [ ] Cor primária dinâmica do tenant aplicada corretamente em
|
||||||
|
botões/links/destaques, com contraste validado
|
||||||
|
- [ ] Foco de teclado visível em todos os elementos interativos
|
||||||
|
(acessibilidade, não só mobile)
|
||||||
|
- [ ] Estados de carregamento (skeleton) e vazio (empty state) tratados
|
||||||
|
em toda listagem
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
# Etapa 11 — Setup do Projeto Frontend
|
||||||
|
|
||||||
|
## Contexto do projeto
|
||||||
|
|
||||||
|
Estou construindo o frontend do **SeConectai Vendas** — CRM/vendas
|
||||||
|
multi-tenant. O backend (API REST em NestJS) já está pronto, seguindo o
|
||||||
|
schema e as etapas descritas em documentos separados. O frontend consome
|
||||||
|
essa API e tem duas áreas: painel **master** (`/master`) e painel
|
||||||
|
**tenant** (`/app`).
|
||||||
|
|
||||||
|
A arquitetura completa (rotas, breakpoints, tokens de design, estrutura
|
||||||
|
de pastas) está definida no arquivo `10-frontend-schema-arquitetura.md`
|
||||||
|
— **use esse arquivo como fonte de verdade** para tudo que for construído
|
||||||
|
nesta e nas próximas etapas.
|
||||||
|
|
||||||
|
Esta é a **Etapa 1 de 9 do frontend** (numerada como Etapa 11 no conjunto
|
||||||
|
geral do projeto, para não colidir com as 8 etapas do backend). Aqui é
|
||||||
|
só a fundação — nenhuma tela de negócio ainda.
|
||||||
|
|
||||||
|
## Objetivo desta etapa
|
||||||
|
|
||||||
|
Inicializar o projeto Next.js com toda a configuração base: Tailwind com
|
||||||
|
os tokens de design do schema, estrutura de pastas, variáveis de
|
||||||
|
ambiente, lint/format, e uma página inicial validando a conexão com a
|
||||||
|
API do backend.
|
||||||
|
|
||||||
|
## Tarefas
|
||||||
|
|
||||||
|
1. **Inicialização do projeto**
|
||||||
|
- Next.js 14+ com App Router, TypeScript, ESLint já integrado.
|
||||||
|
- Configurar Tailwind CSS.
|
||||||
|
- Configurar Prettier + regra de integração com ESLint (sem conflito
|
||||||
|
de formatação).
|
||||||
|
|
||||||
|
2. **Tokens de design**
|
||||||
|
- Criar `styles/tokens.css` com todas as CSS variables definidas na
|
||||||
|
seção 6 do schema (`--neutral-*`, `--surface`, `--danger`,
|
||||||
|
`--success`, `--warning`, `--brand-master`, `--brand-master-accent`,
|
||||||
|
`--color-primary` com fallback `#2563EB`).
|
||||||
|
- Configurar `tailwind.config.ts` para expor essas variáveis como
|
||||||
|
cores utilitárias (ex: `bg-primary`, `text-danger`), em vez de usar
|
||||||
|
`var(--...)` espalhado pelo código.
|
||||||
|
- Configurar fonte (Inter ou equivalente definida no schema), incluindo
|
||||||
|
`font-variant-numeric: tabular-nums` disponível como classe utilitária
|
||||||
|
para colunas de valores monetários.
|
||||||
|
|
||||||
|
3. **Estrutura de pastas**
|
||||||
|
- Criar exatamente a estrutura de pastas da seção 9 do schema:
|
||||||
|
`app/(public)/`, `app/master/`, `app/app/`, `components/ui/`,
|
||||||
|
`components/layout/`, `components/domain/`, `lib/api/`,
|
||||||
|
`lib/auth/`, `lib/theme/`, `lib/validators/`, `hooks/`, `styles/`.
|
||||||
|
- Cada pasta de rota deve existir com um `page.tsx` placeholder (ex:
|
||||||
|
"Em construção — Etapa X") para validar que o roteamento do mapa de
|
||||||
|
rotas inteiro já resolve sem erro 404, mesmo antes das telas reais
|
||||||
|
existirem.
|
||||||
|
|
||||||
|
4. **Variáveis de ambiente e cliente HTTP base**
|
||||||
|
- `.env.local.example` com `NEXT_PUBLIC_API_URL` e demais chaves que
|
||||||
|
forem necessárias.
|
||||||
|
- Criar `lib/api/client.ts`: wrapper mínimo sobre `fetch` (ou axios,
|
||||||
|
justificar a escolha) com base URL configurável, tratamento de erro
|
||||||
|
padronizado (parse de erro da API em formato consistente), e um
|
||||||
|
ponto único de onde o interceptor de refresh token será plugado na
|
||||||
|
Etapa 13 (deixar o gancho pronto, sem implementar auth ainda).
|
||||||
|
|
||||||
|
5. **Página de diagnóstico**
|
||||||
|
- Uma rota simples (ex: `/diagnostico`, pode ser removida depois) que
|
||||||
|
chama `GET /health` do backend e mostra o resultado — só para
|
||||||
|
confirmar que a integração frontend↔backend está funcionando de
|
||||||
|
ponta a ponta antes de seguir.
|
||||||
|
|
||||||
|
6. **Qualidade**
|
||||||
|
- Scripts no `package.json`: `dev`, `build`, `start`, `lint`,
|
||||||
|
`format`.
|
||||||
|
- Configurar Husky + lint-staged (ou equivalente) para rodar lint no
|
||||||
|
pre-commit, se fizer sentido para o fluxo do projeto.
|
||||||
|
|
||||||
|
## Critérios de aceite
|
||||||
|
|
||||||
|
- [ ] `npm run dev` sobe o projeto sem erro
|
||||||
|
- [ ] Todas as rotas do mapa de rotas (seção 4 do schema) resolvem, com
|
||||||
|
página placeholder, sem 404
|
||||||
|
- [ ] `tokens.css` contém todas as variáveis do schema, aplicadas
|
||||||
|
corretamente (inspecionar no DevTools que os valores computados
|
||||||
|
batem)
|
||||||
|
- [ ] Classes utilitárias do Tailwind (`bg-primary`, `text-danger` etc)
|
||||||
|
funcionam e refletem os tokens
|
||||||
|
- [ ] `/diagnostico` mostra o retorno real de `GET /health` do backend
|
||||||
|
(com o backend rodando local)
|
||||||
|
- [ ] `npm run lint` roda sem erro
|
||||||
|
- [ ] Estrutura de pastas idêntica à definida na seção 9 do schema de
|
||||||
|
frontend
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
# Etapa 12 — Sistema de Design e Componentes Base
|
||||||
|
|
||||||
|
## Contexto do projeto
|
||||||
|
|
||||||
|
Continuação do frontend do **SeConectai Vendas**. A Etapa 11 entregou o
|
||||||
|
projeto Next.js configurado com Tailwind, tokens de design e estrutura
|
||||||
|
de pastas. Nenhum componente de UI reutilizável existe ainda.
|
||||||
|
|
||||||
|
Referência obrigatória: seção 6 (tokens) e seção 7 (lista de
|
||||||
|
componentes) do `10-frontend-schema-arquitetura.md`.
|
||||||
|
|
||||||
|
## Objetivo desta etapa
|
||||||
|
|
||||||
|
Construir a biblioteca de componentes base (`components/ui/`) que será
|
||||||
|
usada por **todas** as telas de negócio das próximas etapas. Tudo aqui
|
||||||
|
deve já nascer responsivo e acessível — as telas de negócio só vão
|
||||||
|
compor esses componentes, não reimplementar comportamento responsivo
|
||||||
|
caso a caso.
|
||||||
|
|
||||||
|
## Tarefas
|
||||||
|
|
||||||
|
1. **Base a partir do shadcn/ui**
|
||||||
|
- Instalar e configurar shadcn/ui, mas customizar cada componente
|
||||||
|
usado para consumir os tokens do projeto (não deixar cores/spacing
|
||||||
|
hardcoded vindos do template padrão).
|
||||||
|
- Justificar no código (comentário curto) qualquer componente que
|
||||||
|
fugir do padrão shadcn por necessidade específica do projeto.
|
||||||
|
|
||||||
|
2. **Componentes a construir** (todos em `components/ui/`, cada um com
|
||||||
|
suas variantes documentadas via comentário ou arquivo `.stories`
|
||||||
|
opcional):
|
||||||
|
|
||||||
|
- **Button**: variantes `primary` (usa `--color-primary`),
|
||||||
|
`secondary`, `destructive`, `ghost`; tamanhos `sm`/`md`/`lg`; estado
|
||||||
|
`loading` (spinner substituindo o label, sem mudar a largura do
|
||||||
|
botão); estado `disabled`.
|
||||||
|
- **Input / Textarea**: com label, texto de ajuda, estado de erro
|
||||||
|
(borda + mensagem), prefixo/sufixo opcional (ex: "R$" para campos
|
||||||
|
de valor).
|
||||||
|
- **Select**: nativo estilizado ou baseado em Radix (via shadcn),
|
||||||
|
com busca para listas longas (ex: seleção de cliente/produto).
|
||||||
|
- **DatePicker**: seleção de data única e, quando necessário, período
|
||||||
|
(usado nos filtros de dashboard/listagens).
|
||||||
|
- **FormField**: wrapper que padroniza label + input + mensagem de
|
||||||
|
erro + texto de ajuda — todo formulário do sistema deve usar esse
|
||||||
|
wrapper, nunca montar label/erro manualmente.
|
||||||
|
- **Table**: **componente central desta etapa**. Recebe colunas e
|
||||||
|
dados de forma genérica (tipado com generics em TypeScript).
|
||||||
|
Abaixo do breakpoint `md`, renderiza automaticamente como lista de
|
||||||
|
**Cards empilhados** (cada linha vira um card com pares
|
||||||
|
rótulo:valor, permitindo destacar 1–2 campos principais e colapsar
|
||||||
|
o resto). Suporta: ordenação por coluna, estado de loading
|
||||||
|
(skeleton), estado vazio (usa o `EmptyState`), paginação integrada.
|
||||||
|
- **Modal / Sheet**: um único componente que se comporta como modal
|
||||||
|
centralizado no desktop e como tela cheia (ou bottom sheet, definir
|
||||||
|
e justificar qual) no mobile, controlado pelo mesmo breakpoint `md`.
|
||||||
|
- **Toast**: sistema de notificação temporária (sucesso, erro, aviso,
|
||||||
|
info), empilhável, com auto-dismiss configurável.
|
||||||
|
- **Badge / StatusPill**: variantes semânticas mapeadas para os
|
||||||
|
status de negócio já existentes no backend (`pendente`, `pago`,
|
||||||
|
`atrasado`, `cancelado`, `ativo`, `inadimplente`, `suspenso`,
|
||||||
|
`trial`, `confirmada`, `concluida`, `orcamento`) — cada status com
|
||||||
|
cor e label em português já resolvidos aqui, para não repetir esse
|
||||||
|
mapeamento em cada tela.
|
||||||
|
- **Card**: contêiner base usado em dashboards e nas listas
|
||||||
|
responsivas da Table.
|
||||||
|
- **Pagination**: controles de página, compatível com os parâmetros
|
||||||
|
de paginação da API do backend.
|
||||||
|
- **EmptyState**: ilustração/texto + ação sugerida, usado em toda
|
||||||
|
listagem vazia (ex: "Nenhum cliente cadastrado ainda" + botão
|
||||||
|
"Cadastrar cliente").
|
||||||
|
- **Skeleton**: blocos de carregamento reutilizáveis (linha de texto,
|
||||||
|
card, linha de tabela).
|
||||||
|
- **Tabs**: navegação em abas (usado, por exemplo, no detalhe de
|
||||||
|
venda: Itens / Parcelas / Histórico).
|
||||||
|
|
||||||
|
3. **Acessibilidade (obrigatório, não opcional)**
|
||||||
|
- Todos os componentes interativos com foco de teclado visível
|
||||||
|
(`outline` customizado com a cor de foco do design system, não o
|
||||||
|
padrão do navegador nem `outline: none` sem substituto).
|
||||||
|
- Componentes baseados em Radix/shadcn já trazem boa parte da
|
||||||
|
semântica ARIA — não remover isso ao customizar.
|
||||||
|
- Respeitar `prefers-reduced-motion` em qualquer transição/animação.
|
||||||
|
- Touch targets mínimos de 44x44px nos componentes interativos.
|
||||||
|
|
||||||
|
4. **Página de showcase**
|
||||||
|
- Criar uma rota de desenvolvimento (ex: `/dev/componentes`, não
|
||||||
|
exposta em produção) que renderiza todos os componentes acima com
|
||||||
|
suas variantes, para revisão visual rápida em qualquer breakpoint
|
||||||
|
sem precisar montar uma tela de negócio primeiro.
|
||||||
|
|
||||||
|
## Critérios de aceite
|
||||||
|
|
||||||
|
- [ ] Todos os componentes listados existem, tipados em TypeScript, com
|
||||||
|
as variantes descritas
|
||||||
|
- [ ] `Table` alterna corretamente entre tabela (≥768px) e cards
|
||||||
|
empilhados (<768px) na página de showcase
|
||||||
|
- [ ] `Modal/Sheet` alterna corretamente entre modal centralizado
|
||||||
|
(desktop) e tela cheia/bottom sheet (mobile)
|
||||||
|
- [ ] `StatusPill` cobre todos os status de negócio listados, com cor e
|
||||||
|
label em português
|
||||||
|
- [ ] Navegação por teclado (Tab) percorre todos os componentes
|
||||||
|
interativos da página de showcase com foco visível
|
||||||
|
- [ ] Nenhum componente quebra ou tem overflow horizontal em 375px
|
||||||
|
- [ ] Página de showcase acessível apenas em ambiente de desenvolvimento
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
# Etapa 13 — Autenticação e Tema Dinâmico (Whitelabel)
|
||||||
|
|
||||||
|
## Contexto do projeto
|
||||||
|
|
||||||
|
Continuação do frontend do **SeConectai Vendas**. Já existem: projeto
|
||||||
|
configurado (Etapa 11) e a biblioteca de componentes base (Etapa 12). O
|
||||||
|
backend já expõe toda a API de autenticação (login master/tenant,
|
||||||
|
refresh, esqueci senha) e o endpoint público de tema por tenant
|
||||||
|
(definidos nas Etapas 2 e 8 do backend).
|
||||||
|
|
||||||
|
## Objetivo desta etapa
|
||||||
|
|
||||||
|
Implementar as telas públicas de autenticação, o mecanismo de sessão no
|
||||||
|
client (armazenamento de token, renovação automática, proteção de
|
||||||
|
rotas), e a resolução do tema (logo + cor) por tenant antes mesmo do
|
||||||
|
login.
|
||||||
|
|
||||||
|
## Tarefas
|
||||||
|
|
||||||
|
1. **Telas públicas (`app/(public)/`)**
|
||||||
|
- **`/login`**: formulário de e-mail + senha. Deve detectar se o
|
||||||
|
login é de master ou de tenant (definir estratégia: campo
|
||||||
|
oculto/toggle, ou dois formulários, ou detecção automática pelo
|
||||||
|
backend a partir do e-mail — escolher a mais simples de implementar
|
||||||
|
e documentar a decisão). Erros de credencial inválida devem ser
|
||||||
|
claros mas não revelar se o e-mail existe ou não (mensagem genérica
|
||||||
|
"e-mail ou senha inválidos").
|
||||||
|
- **`/esqueci-senha`**: formulário de e-mail, chama o endpoint de
|
||||||
|
recuperação, sempre mostra mensagem de sucesso genérica (não
|
||||||
|
revelar se o e-mail existe no sistema).
|
||||||
|
- **`/redefinir-senha/[token]`**: formulário de nova senha (com
|
||||||
|
confirmação), valida força mínima no client espelhando a regra do
|
||||||
|
backend, trata token expirado/inválido com mensagem clara.
|
||||||
|
- Todas essas telas devem ser **totalmente responsivas**: em mobile,
|
||||||
|
formulário ocupa a largura da tela com padding adequado; em
|
||||||
|
desktop, formulário centralizado com largura máxima (ex: 420px) e
|
||||||
|
fundo com identidade visual do tema resolvido (ver item 3).
|
||||||
|
|
||||||
|
2. **Gerenciamento de sessão (`lib/auth/`)**
|
||||||
|
- Access token guardado **em memória** (ex: em um Context/store, não
|
||||||
|
em `localStorage`/`sessionStorage`).
|
||||||
|
- Refresh token: o backend deve setar como cookie `httpOnly`; o
|
||||||
|
client não manipula esse cookie diretamente, apenas confia que ele
|
||||||
|
é enviado automaticamente nas chamadas relevantes.
|
||||||
|
- Interceptor no `lib/api/client.ts` (gancho deixado pronto na Etapa
|
||||||
|
11): ao receber 401, tenta chamar o endpoint de refresh
|
||||||
|
automaticamente; se conseguir, repete a requisição original com o
|
||||||
|
novo token; se falhar, desloga e redireciona para `/login`.
|
||||||
|
- Função `logout()` que limpa o estado em memória e chama o endpoint
|
||||||
|
de logout do backend (revoga o refresh token no servidor).
|
||||||
|
|
||||||
|
3. **Middleware de proteção de rotas**
|
||||||
|
- Middleware do Next.js protegendo `/master/*` e `/app/*`: verifica
|
||||||
|
se existe sessão válida (ex: checando um cookie de sinalização não
|
||||||
|
sensível, já que o access token real fica só em memória no client —
|
||||||
|
definir estratégia de verificação no servidor sem expor o token) e
|
||||||
|
redireciona para `/login` se não houver.
|
||||||
|
- Usuário master tentando acessar `/app/*` (ou vice-versa) deve ser
|
||||||
|
redirecionado para a área correta, não para login.
|
||||||
|
- Após login bem-sucedido, redirecionar automaticamente para
|
||||||
|
`/master/dashboard` ou `/app/dashboard` conforme o tipo de usuário
|
||||||
|
retornado pela API.
|
||||||
|
|
||||||
|
4. **Tema dinâmico por tenant (`lib/theme/`)**
|
||||||
|
- Na tela `/login`, antes de qualquer autenticação, resolver o tema:
|
||||||
|
se a URL/subdomínio/parâmetro identificar um tenant específico,
|
||||||
|
chamar o endpoint público `/public/tenants/:slugOuId/tema` e
|
||||||
|
aplicar `--color-primary` e o logo retornados. Se não houver tenant
|
||||||
|
identificável (ex: acesso genérico), mostrar o tema padrão da
|
||||||
|
plataforma.
|
||||||
|
- Após o login, na área `/app`, resolver o tema a partir do perfil do
|
||||||
|
tenant autenticado (não precisa mais do endpoint público).
|
||||||
|
- Implementar a validação de contraste descrita na seção 6 do schema:
|
||||||
|
se `cor_primaria` do tenant não atingir contraste mínimo (WCAG AA)
|
||||||
|
contra branco, escurecer automaticamente antes de aplicar como cor
|
||||||
|
de texto/ícone sobre fundo colorido (manter a cor original para
|
||||||
|
fundos, ajustar só onde teria problema de legibilidade).
|
||||||
|
|
||||||
|
5. **Feedback de erro e loading**
|
||||||
|
- Todos os formulários desta etapa usam os componentes `FormField`,
|
||||||
|
`Button` (estado `loading`) e `Toast` já construídos na Etapa 12 —
|
||||||
|
nenhuma solução de UI paralela aqui.
|
||||||
|
|
||||||
|
## Critérios de aceite
|
||||||
|
|
||||||
|
- [ ] Login master e login tenant funcionam ponta a ponta com o backend
|
||||||
|
real
|
||||||
|
- [ ] Sessão expira corretamente e é renovada automaticamente via
|
||||||
|
refresh (testar deixando o access token expirar e fazendo uma
|
||||||
|
ação)
|
||||||
|
- [ ] Logout limpa a sessão e o backend revoga o refresh token
|
||||||
|
- [ ] Middleware bloqueia acesso não autenticado a `/master/*` e
|
||||||
|
`/app/*`, redirecionando para `/login`
|
||||||
|
- [ ] Usuário master não consegue acessar `/app/*` diretamente pela URL
|
||||||
|
(e vice-versa) sem ser redirecionado
|
||||||
|
- [ ] Fluxo completo de esqueci/redefinir senha funciona, incluindo
|
||||||
|
tratamento de token expirado
|
||||||
|
- [ ] Tela de login aplica a cor/logo do tenant certo quando o tenant é
|
||||||
|
identificável, e cai no tema padrão quando não é
|
||||||
|
- [ ] Cor de tenant com baixo contraste é ajustada automaticamente onde
|
||||||
|
necessário, sem quebrar a legibilidade
|
||||||
|
- [ ] Todas as telas desta etapa testadas em 375px, 768px e 1280px
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
# Etapa 14 — Layout e Navegação (Master e Tenant)
|
||||||
|
|
||||||
|
## Contexto do projeto
|
||||||
|
|
||||||
|
Continuação do frontend do **SeConectai Vendas**. Já existem: setup,
|
||||||
|
componentes base, e autenticação/tema funcionando. Ainda não existe
|
||||||
|
nenhum layout real das áreas autenticadas — as rotas de `/master` e
|
||||||
|
`/app` só têm placeholders.
|
||||||
|
|
||||||
|
Referência obrigatória: seção 5 (navegação por área) do
|
||||||
|
`10-frontend-schema-arquitetura.md`.
|
||||||
|
|
||||||
|
## Objetivo desta etapa
|
||||||
|
|
||||||
|
Construir o "casco" (shell) de navegação das duas áreas autenticadas —
|
||||||
|
sidebar, topbar, drawer mobile, bottom tab bar — totalmente responsivo,
|
||||||
|
que vai envolver todas as telas de negócio das próximas etapas.
|
||||||
|
|
||||||
|
## Tarefas
|
||||||
|
|
||||||
|
1. **Layout master (`app/master/layout.tsx`)**
|
||||||
|
- Desktop (`lg+`): sidebar fixa à esquerda (~240px) com: logo/marca
|
||||||
|
do SeConectai Vendas no topo (identidade fixa do master, não
|
||||||
|
whitelabel), lista de itens de menu com ícone + label, item ativo
|
||||||
|
destacado, avatar + nome do admin master + botão de logout no
|
||||||
|
rodapé.
|
||||||
|
- Itens do menu master: Dashboard, Tenants, Planos, Faturas,
|
||||||
|
Configuração Evolution API, Alertas (Templates/Logs),
|
||||||
|
Configurações.
|
||||||
|
- Topbar: breadcrumb da página atual + ícone de notificações (pode
|
||||||
|
ficar como placeholder visual nesta etapa, funcionalidade real na
|
||||||
|
Etapa 18/19) + busca rápida (input, funcionalidade real pode ficar
|
||||||
|
para depois, mas o componente deve existir).
|
||||||
|
- Mobile (abaixo de `md`): topbar fixa compacta (logo símbolo +
|
||||||
|
hambúrguer + notificações) + drawer com o menu completo + bottom
|
||||||
|
tab bar com os itens mais usados (definir 4 principais: Dashboard,
|
||||||
|
Tenants, Faturas, Alertas — o resto entra em "Mais").
|
||||||
|
|
||||||
|
2. **Layout tenant (`app/app/layout.tsx`)**
|
||||||
|
- Mesma estrutura de sidebar/topbar/drawer/bottom-nav do master, mas:
|
||||||
|
- Logo e cor vêm do tema do tenant autenticado (usar o que foi
|
||||||
|
resolvido na Etapa 13).
|
||||||
|
- Itens do menu: Dashboard, Clientes, Produtos, Vendas,
|
||||||
|
Recebimentos, WhatsApp, E-mail, Alertas, Equipe, Perfil.
|
||||||
|
- Bottom tab bar mobile com 4 principais: Dashboard, Clientes,
|
||||||
|
Vendas, Recebimentos — resto em "Mais".
|
||||||
|
- Itens do menu visíveis conforme o papel do usuário logado (ex:
|
||||||
|
"Equipe" só aparece para `tenant_admin`) — implementar o
|
||||||
|
controle de visibilidade por `role` aqui, para ser reaproveitado
|
||||||
|
em todas as telas.
|
||||||
|
|
||||||
|
3. **Componentes de layout (`components/layout/`)**
|
||||||
|
- `Sidebar`: recebe a lista de itens de menu e o slot de rodapé
|
||||||
|
(usuário) como props/children — não deve ter os itens hardcoded
|
||||||
|
dentro dela, para poder ser reaproveitada entre master e tenant com
|
||||||
|
conteúdo diferente.
|
||||||
|
- `Topbar`: recebe breadcrumb e slots de ações (notificações, busca).
|
||||||
|
- `Drawer`: menu deslizante mobile, fecha ao navegar ou ao tocar fora.
|
||||||
|
- `BottomTabBar`: recebe até 4 itens fixos + item "Mais" que abre um
|
||||||
|
sheet com o restante do menu.
|
||||||
|
- `Breadcrumb`: gerado a partir da estrutura de rotas (pode ser
|
||||||
|
manual por página nesta primeira versão, com nota no código sobre
|
||||||
|
automatizar depois).
|
||||||
|
|
||||||
|
4. **Estado de navegação**
|
||||||
|
- Sidebar colapsável (ícones apenas) no breakpoint `md`, com um botão
|
||||||
|
para expandir/recolher manualmente também no desktop, se fizer
|
||||||
|
sentido — decisão livre, mas documentar o comportamento escolhido.
|
||||||
|
- Persistir a preferência de sidebar colapsada/expandida (ex: em
|
||||||
|
cookie ou localStorage, não é dado sensível).
|
||||||
|
|
||||||
|
5. **Empty shells das páginas de negócio**
|
||||||
|
- Cada rota de `/master/*` e `/app/*` já criada como placeholder na
|
||||||
|
Etapa 11 deve agora estar **dentro** do layout correto (sidebar +
|
||||||
|
topbar aplicados), ainda com conteúdo placeholder — só a moldura
|
||||||
|
precisa estar pronta e correta aqui.
|
||||||
|
|
||||||
|
## Critérios de aceite
|
||||||
|
|
||||||
|
- [ ] Layout master renderiza sidebar/topbar no desktop e
|
||||||
|
drawer+bottom-nav no mobile, com os itens de menu corretos
|
||||||
|
- [ ] Layout tenant renderiza com a cor/logo do tenant autenticado
|
||||||
|
aplicada corretamente na sidebar/topbar
|
||||||
|
- [ ] Item "Equipe" só aparece no menu do tenant para usuários
|
||||||
|
`tenant_admin` (testar com usuário de outro papel)
|
||||||
|
- [ ] Navegação entre itens do menu funciona e destaca corretamente o
|
||||||
|
item ativo, tanto no desktop quanto no drawer/bottom-nav mobile
|
||||||
|
- [ ] Drawer mobile fecha ao selecionar um item ou tocar fora dele
|
||||||
|
- [ ] Bottom tab bar mostra os 4 itens definidos + "Mais" com o restante
|
||||||
|
- [ ] Sidebar colapsável funciona no breakpoint `md` e a preferência do
|
||||||
|
usuário é lembrada entre sessões
|
||||||
|
- [ ] Todas as rotas do mapa de rotas abrem dentro do layout correto
|
||||||
|
(nenhuma "solta" sem sidebar/topbar)
|
||||||
|
- [ ] Testado em 375px, 768px e 1280px sem quebra de layout
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
# Etapa 15 — Área Master: Telas de Negócio
|
||||||
|
|
||||||
|
## Contexto do projeto
|
||||||
|
|
||||||
|
Continuação do frontend do **SeConectai Vendas**. Já existem: setup,
|
||||||
|
design system, autenticação/tema, e o layout/navegação da área master
|
||||||
|
funcionando. Esta etapa implementa as telas reais dentro desse layout,
|
||||||
|
consumindo os endpoints do painel master já prontos no backend (Etapas
|
||||||
|
3 e 4 do backend).
|
||||||
|
|
||||||
|
## Objetivo desta etapa
|
||||||
|
|
||||||
|
Todas as telas funcionais da área `/master`: dashboard, gestão de
|
||||||
|
tenants, planos, faturas, configuração da Evolution API e templates/logs
|
||||||
|
de alerta.
|
||||||
|
|
||||||
|
## Tarefas
|
||||||
|
|
||||||
|
1. **`/master/dashboard`**
|
||||||
|
- Cards de resumo (usando o componente `Card`/`StatCard`): total de
|
||||||
|
tenants por status, MRR, total recebido no mês, total em aberto.
|
||||||
|
- Gráfico simples (Recharts) de evolução de faturamento ou novos
|
||||||
|
tenants nos últimos meses, se o backend expuser dado suficiente
|
||||||
|
para isso — caso não exponha, usar só os cards de resumo e anotar a
|
||||||
|
limitação.
|
||||||
|
- Layout em grid (2–4 colunas no desktop, coluna única no mobile).
|
||||||
|
|
||||||
|
2. **`/master/tenants`**
|
||||||
|
- Listagem usando o componente `Table` (vira cards no mobile
|
||||||
|
automaticamente), colunas: nome, status (`StatusPill`), plano,
|
||||||
|
data de criação. Busca por nome/documento, filtro por status,
|
||||||
|
paginação.
|
||||||
|
- Ação rápida por linha: ver detalhe, mudar status.
|
||||||
|
- Botão "Novo tenant" levando para `/master/tenants/novo`.
|
||||||
|
|
||||||
|
3. **`/master/tenants/novo`**
|
||||||
|
- Formulário de criação: dados cadastrais, seleção de plano
|
||||||
|
(`Select`), dia de vencimento da mensalidade, dados do primeiro
|
||||||
|
usuário `tenant_admin` (nome, e-mail, senha provisória — mostrar a
|
||||||
|
senha gerada/informada em um `Toast`/modal de confirmação após
|
||||||
|
criar, com aviso claro para copiar/repassar ao cliente).
|
||||||
|
|
||||||
|
4. **`/master/tenants/:id`**
|
||||||
|
- Detalhe completo com `Tabs`: Dados cadastrais (editável), Faturas
|
||||||
|
(lista de `tenant_faturas` desse tenant, com ação de marcar como
|
||||||
|
paga), Uso (quantidade de usuários/customers/vendas — dados
|
||||||
|
agregados do backend).
|
||||||
|
- Ação de mudar status (`ativo`/`suspenso`/`cancelado`/`inadimplente`)
|
||||||
|
com confirmação explícita (modal) antes de aplicar, já que afeta o
|
||||||
|
login dos usuários do tenant.
|
||||||
|
|
||||||
|
5. **`/master/planos`**
|
||||||
|
- CRUD simples em lista + modal de criação/edição (não precisa de
|
||||||
|
página própria, dado o volume baixo de planos).
|
||||||
|
- Impedir exclusão de plano em uso (o backend já bloqueia — o
|
||||||
|
frontend deve mostrar a mensagem de erro retornada de forma clara,
|
||||||
|
não apenas um erro genérico).
|
||||||
|
|
||||||
|
6. **`/master/faturas`**
|
||||||
|
- Listagem consolidada de todas as `tenant_faturas`, filtros por
|
||||||
|
status/tenant/período, ação de marcar como paga.
|
||||||
|
- Botão de ação para disparar a geração de faturas do mês (endpoint
|
||||||
|
manual do backend nesta fase) com confirmação antes de executar.
|
||||||
|
|
||||||
|
7. **`/master/evolution-config`**
|
||||||
|
- Formulário de cadastro/edição da conexão (nome, URL base, API key —
|
||||||
|
campo de senha/mascarado, nunca mostrar a key completa depois de
|
||||||
|
salva).
|
||||||
|
- Botão "Testar conexão" com feedback claro de sucesso/erro (`Toast`).
|
||||||
|
|
||||||
|
8. **`/master/alertas/templates`** e **`/master/alertas/logs`**
|
||||||
|
- Templates: lista + editor de template (tipo, canal, assunto,
|
||||||
|
corpo com suporte a inserir os placeholders disponíveis via um
|
||||||
|
menu de ajuda ao lado do editor).
|
||||||
|
- Logs: listagem com filtro por canal/status/período, mostrando o
|
||||||
|
conteúdo enviado e o erro (se houver) ao expandir uma linha.
|
||||||
|
|
||||||
|
9. **`/master/configuracoes`**
|
||||||
|
- Dados do próprio admin master (nome, e-mail), troca de senha.
|
||||||
|
|
||||||
|
## Critérios de aceite
|
||||||
|
|
||||||
|
- [ ] Todas as telas listadas funcionam ponta a ponta com o backend real
|
||||||
|
- [ ] Dashboard mostra números corretos comparados com dados de teste
|
||||||
|
conhecidos
|
||||||
|
- [ ] Criar tenant exibe claramente a senha provisória gerada, com aviso
|
||||||
|
de que não será mostrada novamente
|
||||||
|
- [ ] Mudar status de tenant exige confirmação explícita antes de
|
||||||
|
aplicar
|
||||||
|
- [ ] Erros de negócio retornados pela API (ex: exclusão de plano em
|
||||||
|
uso, limite de instância) aparecem como mensagem clara para o
|
||||||
|
usuário, não como erro genérico
|
||||||
|
- [ ] API key da Evolution nunca aparece em texto completo na tela após
|
||||||
|
salva
|
||||||
|
- [ ] Editor de template mostra os placeholders disponíveis e insere
|
||||||
|
corretamente no corpo da mensagem
|
||||||
|
- [ ] Todas as listagens usam paginação, busca/filtro e estados de
|
||||||
|
loading/vazio corretamente
|
||||||
|
- [ ] Todas as telas testadas em 375px, 768px e 1280px
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
# Etapa 16 — Área Tenant: Dashboard, Clientes e Produtos
|
||||||
|
|
||||||
|
## Contexto do projeto
|
||||||
|
|
||||||
|
Continuação do frontend do **SeConectai Vendas**. Já existem: setup,
|
||||||
|
design system, autenticação/tema, layout/navegação e a área master
|
||||||
|
completa. Esta etapa inicia as telas de negócio da área `/app` (o
|
||||||
|
painel que os seus clientes usam), consumindo os endpoints das Etapas 5
|
||||||
|
e 6 (parte de dashboard) do backend.
|
||||||
|
|
||||||
|
## Objetivo desta etapa
|
||||||
|
|
||||||
|
Dashboard inicial do tenant, e os cadastros de clientes (customers) e
|
||||||
|
produtos/serviços — a base de dados que toda venda vai referenciar.
|
||||||
|
|
||||||
|
## Tarefas
|
||||||
|
|
||||||
|
1. **`/app/dashboard`**
|
||||||
|
- Cards de resumo: total recebido no mês, total a receber
|
||||||
|
(pendente+atrasado, com o atrasado destacado visualmente, ex: cor
|
||||||
|
de alerta), quantidade de vendas no mês.
|
||||||
|
- Gráfico de resumo semanal/mensal de vendas (Recharts), consumindo
|
||||||
|
as views de dashboard do backend.
|
||||||
|
- Lista das próximas parcelas a vencer (top 5–10), com link direto
|
||||||
|
para `/app/recebimentos`.
|
||||||
|
- Grid responsivo: 2–3 colunas no desktop, coluna única no mobile,
|
||||||
|
gráfico sempre com largura total.
|
||||||
|
|
||||||
|
2. **`/app/clientes`**
|
||||||
|
- Listagem (`Table`, vira cards no mobile) com busca por
|
||||||
|
nome/documento, filtro por ativo/inativo, paginação.
|
||||||
|
- Colunas/cards mostrando: razão social, documento, telefone/e-mail,
|
||||||
|
status.
|
||||||
|
- Botão "Novo cliente" → `/app/clientes/novo`.
|
||||||
|
|
||||||
|
3. **`/app/clientes/novo` e `/app/clientes/:id`**
|
||||||
|
- Formulário completo: dados cadastrais (razão social, nome
|
||||||
|
fantasia, documento, e-mail, telefone/WhatsApp, endereço, cidade,
|
||||||
|
UF, observações).
|
||||||
|
- No detalhe (`:id`), usar `Tabs`: Dados cadastrais (editável),
|
||||||
|
Contatos (CRUD aninhado — lista de `customer_contacts` com
|
||||||
|
indicação clara de qual é o principal e ação de marcar
|
||||||
|
principal), Histórico de vendas (lista somente leitura das vendas
|
||||||
|
desse cliente, com link para o detalhe de cada venda — mesmo que a
|
||||||
|
tela de vendas só seja construída na próxima etapa, deixar o link
|
||||||
|
já apontando para a rota correta).
|
||||||
|
- Ação de desativar (soft delete) com confirmação, mantendo o
|
||||||
|
registro visível no histórico.
|
||||||
|
|
||||||
|
4. **`/app/produtos`**
|
||||||
|
- Listagem com filtro por tipo (`produto`/`servico`) e por ativo,
|
||||||
|
busca por nome/SKU.
|
||||||
|
- Colunas/cards: nome, tipo (`StatusPill` ou badge simples), valor de
|
||||||
|
venda, SKU, status.
|
||||||
|
|
||||||
|
5. **`/app/produtos/novo` e `/app/produtos/:id`**
|
||||||
|
- Formulário: tipo (produto/serviço), nome, descrição, SKU (opcional,
|
||||||
|
validar unicidade — mostrar erro claro se a API retornar conflito),
|
||||||
|
valor de venda, valor de custo (opcional), unidade, flag
|
||||||
|
"recorrente".
|
||||||
|
- Ação de desativar (soft delete) com confirmação.
|
||||||
|
|
||||||
|
6. **Validação e limites de plano**
|
||||||
|
- Ao tentar criar cliente ou produto além do limite do plano do
|
||||||
|
tenant, a API retorna erro — o frontend deve mostrar essa mensagem
|
||||||
|
de forma clara (ex: banner ou toast explicando o limite atingido),
|
||||||
|
não travar silenciosamente o formulário.
|
||||||
|
|
||||||
|
## Critérios de aceite
|
||||||
|
|
||||||
|
- [ ] Dashboard do tenant mostra números batendo com dados de teste
|
||||||
|
conhecidos
|
||||||
|
- [ ] CRUD completo de clientes funciona, incluindo contatos aninhados e
|
||||||
|
regra de contato principal único
|
||||||
|
- [ ] Histórico de vendas no detalhe do cliente lista corretamente
|
||||||
|
(mesmo que a tela de destino ainda não exista até a próxima etapa)
|
||||||
|
- [ ] CRUD completo de produtos/serviços funciona, incluindo validação
|
||||||
|
de SKU duplicado
|
||||||
|
- [ ] Tentar exceder limite do plano (clientes ou produtos) mostra
|
||||||
|
mensagem clara ao usuário
|
||||||
|
- [ ] Desativar cliente/produto pede confirmação e reflete corretamente
|
||||||
|
na listagem (sai da lista de ativos, mas seria visível com filtro
|
||||||
|
"inativos")
|
||||||
|
- [ ] Todas as listagens com busca, filtro, paginação e estados de
|
||||||
|
loading/vazio
|
||||||
|
- [ ] Todas as telas testadas em 375px, 768px e 1280px
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
# Etapa 17 — Área Tenant: Vendas e Financeiro
|
||||||
|
|
||||||
|
## Contexto do projeto
|
||||||
|
|
||||||
|
Continuação do frontend do **SeConectai Vendas**. Já existem: setup,
|
||||||
|
design system, autenticação/tema, layout/navegação, área master
|
||||||
|
completa, e clientes/produtos no painel do tenant. Esta é a etapa mais
|
||||||
|
crítica do painel do tenant — o fluxo de vendas e o controle financeiro
|
||||||
|
— consumindo os endpoints da Etapa 6 do backend.
|
||||||
|
|
||||||
|
## Objetivo desta etapa
|
||||||
|
|
||||||
|
Registro completo de vendas (com itens e parcelas), listagem e ação
|
||||||
|
sobre recebimentos, e os dashboards financeiros/semana-mês.
|
||||||
|
|
||||||
|
## Tarefas
|
||||||
|
|
||||||
|
1. **`/app/vendas`**
|
||||||
|
- Listagem (`Table`) com filtro por status (`orcamento`,
|
||||||
|
`confirmada`, `concluida`, `cancelada`), por cliente, por período
|
||||||
|
de `data_venda`, paginação.
|
||||||
|
- Colunas/cards: número da venda, cliente, valor total, status
|
||||||
|
(`StatusPill`), data.
|
||||||
|
- Botão "Nova venda" → `/app/vendas/nova`.
|
||||||
|
|
||||||
|
2. **`/app/vendas/nova`** — a tela mais complexa do projeto
|
||||||
|
- Seleção de cliente (`Select` com busca, puxando de `/app/clientes`)
|
||||||
|
— se o cliente não existir ainda, oferecer atalho para cadastrar
|
||||||
|
rápido sem sair do fluxo (modal com o formulário mínimo de
|
||||||
|
cliente).
|
||||||
|
- Lista de itens da venda: adicionar produto/serviço (busca por
|
||||||
|
nome/SKU), quantidade, valor unitário (pré-preenchido do catálogo,
|
||||||
|
editável para casos de desconto pontual — deixar claro visualmente
|
||||||
|
quando o valor foi alterado do catálogo). Cálculo automático do
|
||||||
|
subtotal por item e do total geral, considerando o campo de
|
||||||
|
desconto geral da venda.
|
||||||
|
- Definição das parcelas: opção "gerar parcelas automaticamente"
|
||||||
|
(informar número de parcelas e primeira data de vencimento, o
|
||||||
|
sistema calcula o resto) ou "definir manualmente" (lista editável
|
||||||
|
de valor+vencimento por parcela). Validação em tempo real: soma das
|
||||||
|
parcelas precisa bater com o valor total da venda antes de permitir
|
||||||
|
salvar (mostrar a diferença, se houver, de forma clara).
|
||||||
|
- Layout responsivo: no desktop, itens da venda e resumo/parcelas
|
||||||
|
podem ficar lado a lado (2 colunas); no mobile, tudo empilhado com
|
||||||
|
o resumo total sempre visível (ex: barra fixa no rodapé mostrando o
|
||||||
|
total atualizado enquanto o usuário edita os itens).
|
||||||
|
- Salvar como `orcamento` ou já como `confirmada` (duas ações
|
||||||
|
distintas, não um único botão "Salvar").
|
||||||
|
|
||||||
|
3. **`/app/vendas/:id`**
|
||||||
|
- Detalhe com `Tabs`: Itens (somente leitura se a venda estiver
|
||||||
|
`confirmada`/`concluida`, editável se `orcamento`), Parcelas (lista
|
||||||
|
com status e ação de marcar como paga por parcela), Histórico
|
||||||
|
(mudanças de status, se o backend expuser isso via `audit_logs`).
|
||||||
|
- Ações de topo: mudar status (confirmar orçamento, cancelar venda —
|
||||||
|
com confirmação explícita explicando que isso cancela as parcelas
|
||||||
|
pendentes associadas).
|
||||||
|
|
||||||
|
4. **`/app/recebimentos`**
|
||||||
|
- Listagem de parcelas (`sale_payments`) via a view/endpoint do
|
||||||
|
backend, com filtro por status, por cliente, por período de
|
||||||
|
vencimento. Parcelas atrasadas destacadas visualmente (cor de
|
||||||
|
alerta) e, se possível, ordenadas por padrão com as mais urgentes
|
||||||
|
no topo.
|
||||||
|
- Ação "Marcar como pago" por linha, com seleção de forma de
|
||||||
|
pagamento — se o backend suportar ação em lote, oferecer seleção
|
||||||
|
múltipla de linhas com ação "Marcar selecionadas como pagas".
|
||||||
|
|
||||||
|
5. **Dashboards financeiros (complementando `/app/dashboard` da Etapa
|
||||||
|
16, se ainda não coberto)**
|
||||||
|
- Gráfico de resumo semanal e mensal lado a lado ou alternável (toggle
|
||||||
|
de período), usando as views `vw_resumo_vendas_semanal` /
|
||||||
|
`vw_resumo_vendas_mensal` do backend.
|
||||||
|
- Bloco "Financeiro": total recebido, total a receber, total
|
||||||
|
atrasado, com cores semânticas consistentes com o `StatusPill`.
|
||||||
|
|
||||||
|
## Critérios de aceite
|
||||||
|
|
||||||
|
- [ ] Criar venda completa (cliente + itens + parcelas) funciona ponta a
|
||||||
|
ponta e reflete corretamente no backend
|
||||||
|
- [ ] Validação de soma das parcelas vs. valor total impede salvar
|
||||||
|
quando não bate, com mensagem clara da diferença
|
||||||
|
- [ ] Cadastro rápido de cliente dentro do fluxo de nova venda funciona
|
||||||
|
sem perder o que já foi preenchido na venda
|
||||||
|
- [ ] Venda confirmada não permite editar itens/valores na tela de
|
||||||
|
detalhe (reflete a regra do backend)
|
||||||
|
- [ ] Cancelar venda pede confirmação e reflete o cancelamento das
|
||||||
|
parcelas pendentes na tela de recebimentos
|
||||||
|
- [ ] Marcar parcela como paga atualiza corretamente o dashboard
|
||||||
|
financeiro sem precisar recarregar a página manualmente
|
||||||
|
(invalidação de cache do React Query)
|
||||||
|
- [ ] Parcelas atrasadas visualmente destacadas na listagem de
|
||||||
|
recebimentos
|
||||||
|
- [ ] Barra de total fixa no mobile durante a montagem de uma venda
|
||||||
|
funciona corretamente e não sobrepõe conteúdo importante
|
||||||
|
- [ ] Todas as telas testadas em 375px, 768px e 1280px, com atenção
|
||||||
|
especial à tela de nova venda (a mais densa de informação)
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
# Etapa 18 — Área Tenant: Integrações, Alertas, Equipe e Perfil
|
||||||
|
|
||||||
|
## Contexto do projeto
|
||||||
|
|
||||||
|
Continuação do frontend do **SeConectai Vendas**. Já existem: setup,
|
||||||
|
design system, autenticação/tema, layout/navegação, área master
|
||||||
|
completa, e clientes/produtos/vendas/recebimentos no painel do tenant.
|
||||||
|
Esta etapa fecha o painel do tenant com as telas de configuração:
|
||||||
|
integrações de mensageria, templates/logs de alerta próprios do tenant,
|
||||||
|
gestão da equipe e personalização whitelabel — consumindo os endpoints
|
||||||
|
das Etapas 4, 7 e 8 do backend.
|
||||||
|
|
||||||
|
## Objetivo desta etapa
|
||||||
|
|
||||||
|
Telas de `/app/whatsapp`, `/app/email-config`, `/app/alertas/*`,
|
||||||
|
`/app/equipe` e `/app/perfil`.
|
||||||
|
|
||||||
|
## Tarefas
|
||||||
|
|
||||||
|
1. **`/app/whatsapp`**
|
||||||
|
- Lista de instâncias WhatsApp do tenant (pode ser mais de uma,
|
||||||
|
conforme limite do plano), com status (`desconectado`,
|
||||||
|
`conectando`, `conectado`, `erro`) via `StatusPill`.
|
||||||
|
- Ação "Nova instância" (respeitando limite do plano — mostrar
|
||||||
|
mensagem clara se atingido).
|
||||||
|
- Fluxo de conexão: ao criar/selecionar uma instância, mostrar o QR
|
||||||
|
code retornado pela API (imagem), com polling automático do status
|
||||||
|
a cada poucos segundos até detectar `conectado` (parar o polling
|
||||||
|
nesse momento e mostrar sucesso).
|
||||||
|
- Botão de teste de envio (número + mensagem) com feedback claro.
|
||||||
|
- Ação de desconectar/remover instância, com confirmação.
|
||||||
|
|
||||||
|
2. **`/app/email-config`**
|
||||||
|
- Toggle "Usar configuração padrão da plataforma" vs "Usar meu
|
||||||
|
próprio SMTP" — ao desativar o padrão, exibir e exigir os campos de
|
||||||
|
SMTP próprio.
|
||||||
|
- Botão de teste de envio (e-mail de destino) com feedback claro.
|
||||||
|
- Senha do SMTP: campo tipo password, nunca pré-preenchido com o
|
||||||
|
valor real ao editar (mesma lógica de segurança da API key da
|
||||||
|
Evolution na área master).
|
||||||
|
|
||||||
|
3. **`/app/alertas/templates`**
|
||||||
|
- Mesma lógica de editor da Etapa 15 (master), mas aqui os templates
|
||||||
|
são do tenant, com fallback visual indicando quando um tipo/canal
|
||||||
|
ainda não tem template próprio e está usando o padrão da
|
||||||
|
plataforma (ex: badge "usando padrão da plataforma" com opção de
|
||||||
|
"criar meu próprio").
|
||||||
|
|
||||||
|
4. **`/app/alertas/logs`**
|
||||||
|
- Listagem de `alert_logs` filtrada para os alertas enviados pelo
|
||||||
|
tenant (para os próprios `customers` dele), com os mesmos filtros
|
||||||
|
da tela master (canal, status, período) e expansão de linha para
|
||||||
|
ver conteúdo enviado/erro.
|
||||||
|
|
||||||
|
5. **`/app/equipe`** (visível só para `tenant_admin`, conforme já
|
||||||
|
controlado no layout da Etapa 14)
|
||||||
|
- Listagem dos `tenant_users` do tenant, com papel (`role`) e status
|
||||||
|
ativo/inativo.
|
||||||
|
- Convite/criação de novo usuário: nome, e-mail, papel, senha
|
||||||
|
provisória (mesma UX de exibir e avisar sobre a senha gerada, como
|
||||||
|
na criação de tenant pelo master).
|
||||||
|
- Ação de desativar usuário e de alterar papel.
|
||||||
|
|
||||||
|
6. **`/app/perfil`**
|
||||||
|
- Dados da empresa (nome fantasia, razão social — parte editável
|
||||||
|
dentro do que o backend permitir ao tenant alterar).
|
||||||
|
- **Upload de logo**: componente de upload com preview imediato,
|
||||||
|
validação de tipo/tamanho no client antes de enviar (espelhando as
|
||||||
|
regras do backend: png/jpg/svg, até 2MB), e ação de remover logo
|
||||||
|
(volta ao padrão da plataforma).
|
||||||
|
- **Seletor de cor primária**: color picker, com preview ao vivo de
|
||||||
|
como a cor fica aplicada nos componentes principais (ex: mostrar um
|
||||||
|
botão de exemplo com a cor escolhida antes de salvar), incluindo o
|
||||||
|
aviso de contraste automático descrito na Etapa 13.
|
||||||
|
- Ao salvar, o tema da aplicação inteira (sidebar, botões) deve
|
||||||
|
atualizar imediatamente, sem precisar recarregar a página.
|
||||||
|
|
||||||
|
## Critérios de aceite
|
||||||
|
|
||||||
|
- [ ] Fluxo completo de conexão de instância WhatsApp funciona (criar →
|
||||||
|
escanear QR → status muda para conectado automaticamente via
|
||||||
|
polling)
|
||||||
|
- [ ] Teste de envio de WhatsApp e de e-mail funcionam com feedback
|
||||||
|
claro de sucesso/erro
|
||||||
|
- [ ] Alternância entre SMTP próprio e padrão da plataforma funciona
|
||||||
|
corretamente, exigindo campos quando aplicável
|
||||||
|
- [ ] Templates do tenant mostram claramente quando estão usando
|
||||||
|
fallback do padrão da plataforma
|
||||||
|
- [ ] Logs de alerta do tenant mostram apenas os alertas dele
|
||||||
|
(isolamento correto)
|
||||||
|
- [ ] CRUD de equipe funciona e respeita a visibilidade só para
|
||||||
|
`tenant_admin`
|
||||||
|
- [ ] Upload de logo funciona com validação client-side e preview
|
||||||
|
imediato
|
||||||
|
- [ ] Alteração de cor primária reflete instantaneamente em toda a
|
||||||
|
aplicação após salvar, sem reload manual
|
||||||
|
- [ ] Todas as telas testadas em 375px, 768px e 1280px
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
# Etapa 19 — Polimento, Acessibilidade e Testes E2E
|
||||||
|
|
||||||
|
## Contexto do projeto
|
||||||
|
|
||||||
|
Etapa final do frontend do **SeConectai Vendas**. Todas as telas de
|
||||||
|
negócio das áreas master e tenant já estão implementadas (Etapas 11–18).
|
||||||
|
Esta etapa é uma auditoria completa e o fechamento com testes
|
||||||
|
automatizados, antes de considerar o frontend pronto para produção.
|
||||||
|
|
||||||
|
## Objetivo desta etapa
|
||||||
|
|
||||||
|
Revisão sistemática de responsividade e acessibilidade em todas as
|
||||||
|
telas, ajustes de performance, e uma suíte de testes E2E cobrindo os
|
||||||
|
fluxos críticos do sistema.
|
||||||
|
|
||||||
|
## Tarefas
|
||||||
|
|
||||||
|
1. **Auditoria de responsividade**
|
||||||
|
- Percorrer **todas** as rotas do mapa de rotas (master e tenant) nos
|
||||||
|
três breakpoints de referência (375px, 768px, 1280px) e registrar/
|
||||||
|
corrigir qualquer:
|
||||||
|
- overflow horizontal
|
||||||
|
- texto cortado ou sobreposto
|
||||||
|
- touch target menor que 44x44px em mobile
|
||||||
|
- tabela que não virou card corretamente
|
||||||
|
- modal que não se adaptou (tela cheia/bottom sheet) no mobile
|
||||||
|
- Prestar atenção especial às telas mais densas: `/app/vendas/nova`,
|
||||||
|
`/master/tenants/:id`, dashboards com gráficos.
|
||||||
|
|
||||||
|
2. **Auditoria de acessibilidade**
|
||||||
|
- Rodar um checador automatizado (ex: axe-core) em todas as rotas
|
||||||
|
principais e corrigir violações críticas e sérias.
|
||||||
|
- Verificar manualmente: navegação completa por teclado (Tab/Shift+Tab)
|
||||||
|
em pelo menos um fluxo completo por área (ex: criar um cliente
|
||||||
|
inteiro só com teclado), foco visível em 100% dos elementos
|
||||||
|
interativos, contraste de texto mínimo AA em todos os textos
|
||||||
|
(incluindo sobre a cor primária dinâmica do tenant).
|
||||||
|
- Confirmar que `prefers-reduced-motion` é respeitado em todas as
|
||||||
|
transições/animações implementadas ao longo do projeto.
|
||||||
|
- Textos alternativos em imagens relevantes (logo do tenant, ícones
|
||||||
|
que carregam significado além do decorativo).
|
||||||
|
|
||||||
|
3. **Estados de loading, erro e vazio**
|
||||||
|
- Conferir que **toda** listagem e todo formulário do sistema trata
|
||||||
|
corretamente: carregando (skeleton), erro de rede/API (mensagem
|
||||||
|
clara com ação de tentar novamente quando fizer sentido), e vazio
|
||||||
|
(EmptyState com ação sugerida). Nenhuma tela pode ficar em branco
|
||||||
|
silenciosamente em caso de erro.
|
||||||
|
|
||||||
|
4. **Performance**
|
||||||
|
- Rodar Lighthouse (ou equivalente) nas rotas principais, mobile e
|
||||||
|
desktop, e corrigir problemas de maior impacto (ex: imagens sem
|
||||||
|
otimização, JS não utilizado sendo carregado antecipadamente,
|
||||||
|
ausência de `next/image` onde aplicável).
|
||||||
|
- Garantir `loading="lazy"` em imagens fora da dobra inicial (ex:
|
||||||
|
logos em listagens longas, se aplicável).
|
||||||
|
|
||||||
|
5. **Testes E2E (Playwright ou Cypress — escolher um e justificar)**
|
||||||
|
- Fluxo 1: login master → criar tenant → confirmar que o
|
||||||
|
`tenant_admin` criado consegue logar.
|
||||||
|
- Fluxo 2: login tenant → cadastrar cliente → cadastrar produto →
|
||||||
|
criar venda com parcelas → marcar uma parcela como paga → conferir
|
||||||
|
que o dashboard financeiro reflete o pagamento.
|
||||||
|
- Fluxo 3: alteração de logo/cor no perfil do tenant e confirmação
|
||||||
|
visual de que o tema mudou na sidebar.
|
||||||
|
- Fluxo 4: tentativa de acesso não autenticado a rota protegida
|
||||||
|
(`/app/dashboard` sem login) redireciona corretamente para
|
||||||
|
`/login`.
|
||||||
|
- Rodar a suíte pelo menos no viewport mobile e no desktop (Playwright
|
||||||
|
permite configurar múltiplos projetos/viewports).
|
||||||
|
|
||||||
|
6. **Revisão final de conteúdo/copy**
|
||||||
|
- Passar por todos os textos de botão, mensagem de erro, empty state
|
||||||
|
e confirmação verificando: voz ativa, consistência de nome de ação
|
||||||
|
(o botão "Salvar" deve gerar uma confirmação que também fala em
|
||||||
|
"salvo", não "criado" ou outra variação), e nenhuma mensagem de
|
||||||
|
erro genérica onde a API já fornece detalhe suficiente para ser
|
||||||
|
específica.
|
||||||
|
|
||||||
|
## Critérios de aceite
|
||||||
|
|
||||||
|
- [ ] Nenhuma rota do mapa de rotas tem overflow horizontal em 375px,
|
||||||
|
768px ou 1280px
|
||||||
|
- [ ] Checador de acessibilidade automatizado sem violações críticas ou
|
||||||
|
sérias nas rotas principais
|
||||||
|
- [ ] Um fluxo completo (ex: cadastro de cliente) realizado do início ao
|
||||||
|
fim apenas com teclado, com foco sempre visível
|
||||||
|
- [ ] Contraste de texto validado sobre a cor primária dinâmica em pelo
|
||||||
|
menos 3 tenants de teste com cores diferentes (incluindo uma cor
|
||||||
|
clara, para forçar o ajuste automático de contraste)
|
||||||
|
- [ ] Todas as listagens e formulários tratam loading/erro/vazio
|
||||||
|
corretamente — testado forçando erro de rede manualmente
|
||||||
|
- [ ] Lighthouse mobile e desktop nas rotas principais sem alertas de
|
||||||
|
performance de alto impacto
|
||||||
|
- [ ] Suíte de testes E2E dos 4 fluxos descritos passa em mobile e
|
||||||
|
desktop
|
||||||
|
- [ ] Revisão de copy concluída, sem mensagens de erro genéricas onde a
|
||||||
|
API fornece detalhe específico
|
||||||
File diff suppressed because it is too large
Load Diff
+1
-1
@@ -6,7 +6,7 @@ import tseslint from 'typescript-eslint';
|
|||||||
|
|
||||||
export default tseslint.config(
|
export default tseslint.config(
|
||||||
{
|
{
|
||||||
ignores: ['eslint.config.mjs', 'dist/**', 'node_modules/**', 'coverage/**'],
|
ignores: ['eslint.config.mjs', 'dist/**', 'node_modules/**', 'coverage/**', 'frontend/**'],
|
||||||
},
|
},
|
||||||
eslint.configs.recommended,
|
eslint.configs.recommended,
|
||||||
...tseslint.configs.recommendedTypeChecked,
|
...tseslint.configs.recommendedTypeChecked,
|
||||||
|
|||||||
@@ -0,0 +1,3 @@
|
|||||||
|
# URL base da API do backend (NestJS). Ver Etapas/01-setup-projeto.md —
|
||||||
|
# porta padrão do backend é 3000.
|
||||||
|
NEXT_PUBLIC_API_URL=http://localhost:3000
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files (.env.local.example é versionado de propósito)
|
||||||
|
.env*
|
||||||
|
!.env*.example
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "all",
|
||||||
|
"printWidth": 100
|
||||||
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
# SeConectai Vendas — Frontend
|
||||||
|
|
||||||
|
Aplicação Next.js (App Router) que consome a API do backend NestJS deste
|
||||||
|
mesmo repositório. Arquitetura de referência:
|
||||||
|
[`Etapas/V2/10-frontend-schema-arquitetura.md`](../Etapas/V2/10-frontend-schema-arquitetura.md).
|
||||||
|
Estado de progresso das etapas de frontend:
|
||||||
|
[`Etapas/V2/20-controle-de-progresso-frontend.md`](../Etapas/V2/20-controle-de-progresso-frontend.md).
|
||||||
|
|
||||||
|
## Rodando localmente
|
||||||
|
|
||||||
|
1. Backend rodando (via `docker compose up -d` na raiz do repo, ou
|
||||||
|
localmente) — necessário para `/diagnostico` e para qualquer chamada de
|
||||||
|
API.
|
||||||
|
2. `cp .env.local.example .env.local` e ajuste `NEXT_PUBLIC_API_URL` se o
|
||||||
|
backend não estiver em `http://localhost:3000`.
|
||||||
|
3. `npm install`
|
||||||
|
4. `npm run dev` — sobe em `http://localhost:3001` (porta 3000 é do
|
||||||
|
backend; se estiver livre o Next também aceitaria 3000, mas o
|
||||||
|
`CORS_ORIGINS` do backend já está configurado para 3001).
|
||||||
|
|
||||||
|
## Scripts
|
||||||
|
|
||||||
|
- `npm run dev` — servidor de desenvolvimento (Turbopack)
|
||||||
|
- `npm run build` — build de produção
|
||||||
|
- `npm run start` — serve o build de produção
|
||||||
|
- `npm run lint` — ESLint
|
||||||
|
- `npm run format` / `npm run format:check` — Prettier
|
||||||
|
|
||||||
|
## Stack
|
||||||
|
|
||||||
|
Next.js 15 (App Router) + React 19 + TypeScript, Tailwind CSS v4
|
||||||
|
(tokens definidos em [`styles/tokens.css`](./styles/tokens.css) via
|
||||||
|
`@theme inline`, não em `tailwind.config.ts` — ver decisão registrada no
|
||||||
|
controle de progresso da Etapa 11).
|
||||||
|
|
||||||
|
## Estrutura
|
||||||
|
|
||||||
|
```
|
||||||
|
app/(public)/ rotas públicas (login, recuperação de senha)
|
||||||
|
app/master/ painel master
|
||||||
|
app/app/ painel tenant
|
||||||
|
components/ui/ componentes base (Etapa 12)
|
||||||
|
components/layout/ sidebar/topbar/drawer (Etapa 14)
|
||||||
|
components/domain/ componentes específicos de domínio
|
||||||
|
lib/api/ cliente HTTP
|
||||||
|
lib/auth/ sessão/autenticação (Etapa 13)
|
||||||
|
lib/theme/ resolução de tema whitelabel (Etapa 13)
|
||||||
|
lib/validators/ schemas Zod
|
||||||
|
styles/tokens.css tokens de design (CSS variables)
|
||||||
|
```
|
||||||
@@ -0,0 +1,125 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { apiClient, ApiError } from '@/lib/api/client';
|
||||||
|
import { forgotPasswordSchema, type ForgotPasswordFormValues } from '@/lib/validators/auth';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
|
||||||
|
type Area = 'tenant' | 'master';
|
||||||
|
|
||||||
|
export default function EsqueciSenhaPage() {
|
||||||
|
const [area, setArea] = React.useState<Area>('tenant');
|
||||||
|
const [sent, setSent] = React.useState(false);
|
||||||
|
const [error, setError] = React.useState<string | null>(null);
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors, isSubmitting },
|
||||||
|
} = useForm<ForgotPasswordFormValues>({ resolver: zodResolver(forgotPasswordSchema) });
|
||||||
|
|
||||||
|
const onSubmit = async (values: ForgotPasswordFormValues) => {
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
// Resposta é sempre genérica (200), mesmo se o e-mail não existir —
|
||||||
|
// o backend nunca revela isso (Etapa 13: nunca revelar se o e-mail existe).
|
||||||
|
await apiClient.post('/auth/password/forgot', {
|
||||||
|
email: values.email,
|
||||||
|
usuario_tipo: area === 'master' ? 'master' : 'tenant_user',
|
||||||
|
});
|
||||||
|
setSent(true);
|
||||||
|
} catch (err) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError ? err.message : 'Não foi possível conectar. Tente novamente.',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="flex min-h-screen items-center justify-center bg-neutral-50 p-4">
|
||||||
|
<div className="flex w-full max-w-[420px] flex-col gap-6 rounded-xl border border-border bg-surface p-6 shadow-sm sm:p-8">
|
||||||
|
<div className="flex flex-col gap-2 text-center">
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Esqueci minha senha</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Informe seu e-mail — se ele existir no sistema, enviaremos instruções de redefinição.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{sent ? (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<p role="status" className="rounded-lg bg-success/10 p-3 text-sm text-success">
|
||||||
|
Se o e-mail informado existir, as instruções de redefinição foram enviadas.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
|
||||||
|
>
|
||||||
|
Voltar para o login
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)} noValidate>
|
||||||
|
<div
|
||||||
|
role="radiogroup"
|
||||||
|
aria-label="Tipo de acesso"
|
||||||
|
className="grid grid-cols-2 gap-1 rounded-lg bg-muted p-1"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
role="radio"
|
||||||
|
aria-checked={area === 'tenant'}
|
||||||
|
onClick={() => setArea('tenant')}
|
||||||
|
className={`min-h-9 rounded-md text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring ${
|
||||||
|
area === 'tenant'
|
||||||
|
? 'bg-background text-foreground shadow-sm'
|
||||||
|
: 'text-muted-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Sou cliente
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
role="radio"
|
||||||
|
aria-checked={area === 'master'}
|
||||||
|
onClick={() => setArea('master')}
|
||||||
|
className={`min-h-9 rounded-md text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring ${
|
||||||
|
area === 'master'
|
||||||
|
? 'bg-background text-foreground shadow-sm'
|
||||||
|
: 'text-muted-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Sou administrador
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FormField label="E-mail" error={errors.email?.message}>
|
||||||
|
<Input type="email" autoComplete="email" {...register('email')} />
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<p role="alert" className="rounded-lg bg-danger/10 p-3 text-sm text-danger">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button type="submit" loading={isSubmitting} className="w-full">
|
||||||
|
Enviar instruções
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
|
||||||
|
>
|
||||||
|
Voltar para o login
|
||||||
|
</Link>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,153 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useRouter, useSearchParams } from 'next/navigation';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { useAuth } from '@/lib/auth/auth-context';
|
||||||
|
import { useTenantTheme, TenantThemeProvider } from '@/lib/theme/theme-provider';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { loginSchema, type LoginFormValues } from '@/lib/validators/auth';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
type LoginArea = 'tenant' | 'master';
|
||||||
|
|
||||||
|
function GenericInvalidCredentialsMessage(): string {
|
||||||
|
return 'E-mail ou senha inválidos.';
|
||||||
|
}
|
||||||
|
|
||||||
|
function LoginFormInner() {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const { loginMaster, loginTenant } = useAuth();
|
||||||
|
const { theme } = useTenantTheme();
|
||||||
|
|
||||||
|
// Estratégia de detecção de tipo de login (Etapa 13): o backend expõe
|
||||||
|
// dois endpoints separados (`/auth/master/login` e `/auth/tenant/login`,
|
||||||
|
// sem detecção automática por e-mail — ver observações da Etapa 13 no
|
||||||
|
// controle de progresso). Escolhido um toggle explícito em vez de dois
|
||||||
|
// formulários separados por ser a opção mais simples de implementar e
|
||||||
|
// mais clara para o usuário; "tenant" é o padrão porque é o público
|
||||||
|
// majoritário (clientes), master é uso interno raro.
|
||||||
|
const [area, setArea] = React.useState<LoginArea>('tenant');
|
||||||
|
const [submitError, setSubmitError] = React.useState<string | null>(null);
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors, isSubmitting },
|
||||||
|
} = useForm<LoginFormValues>({ resolver: zodResolver(loginSchema) });
|
||||||
|
|
||||||
|
const onSubmit = async (values: LoginFormValues) => {
|
||||||
|
setSubmitError(null);
|
||||||
|
try {
|
||||||
|
if (area === 'master') {
|
||||||
|
await loginMaster(values.email, values.senha);
|
||||||
|
} else {
|
||||||
|
await loginTenant(values.email, values.senha);
|
||||||
|
}
|
||||||
|
|
||||||
|
const redirectParam = searchParams.get('redirect');
|
||||||
|
const fallback = area === 'master' ? '/master/dashboard' : '/app/dashboard';
|
||||||
|
router.push(redirectParam && redirectParam.startsWith('/') ? redirectParam : fallback);
|
||||||
|
} catch (err) {
|
||||||
|
if (err instanceof ApiError && err.statusCode === 401) {
|
||||||
|
setSubmitError(GenericInvalidCredentialsMessage());
|
||||||
|
} else if (err instanceof ApiError) {
|
||||||
|
setSubmitError(err.message);
|
||||||
|
} else {
|
||||||
|
setSubmitError('Não foi possível conectar. Tente novamente.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex w-full max-w-[420px] flex-col gap-6 rounded-xl border border-border bg-surface p-6 shadow-sm sm:p-8">
|
||||||
|
<div className="flex flex-col items-center gap-2 text-center">
|
||||||
|
{theme?.logoUrl ? (
|
||||||
|
<Image
|
||||||
|
src={theme.logoUrl}
|
||||||
|
alt={theme.nome}
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
className="size-12 rounded-lg object-contain"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">
|
||||||
|
{theme?.nome ?? 'SeConectai Vendas'}
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Entre com seu e-mail e senha</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
role="radiogroup"
|
||||||
|
aria-label="Tipo de acesso"
|
||||||
|
className="grid grid-cols-2 gap-1 rounded-lg bg-muted p-1"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
role="radio"
|
||||||
|
aria-checked={area === 'tenant'}
|
||||||
|
onClick={() => setArea('tenant')}
|
||||||
|
className={`min-h-9 rounded-md text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring ${
|
||||||
|
area === 'tenant' ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Sou cliente
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
role="radio"
|
||||||
|
aria-checked={area === 'master'}
|
||||||
|
onClick={() => setArea('master')}
|
||||||
|
className={`min-h-9 rounded-md text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring ${
|
||||||
|
area === 'master' ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Sou administrador
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)} noValidate>
|
||||||
|
<FormField label="E-mail" error={errors.email?.message}>
|
||||||
|
<Input type="email" autoComplete="email" {...register('email')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Senha" error={errors.senha?.message}>
|
||||||
|
<Input type="password" autoComplete="current-password" {...register('senha')} />
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
{submitError && (
|
||||||
|
<p role="alert" className="rounded-lg bg-danger/10 p-3 text-sm text-danger">
|
||||||
|
{submitError}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button type="submit" loading={isSubmitting} className="w-full">
|
||||||
|
Entrar
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/esqueci-senha"
|
||||||
|
className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
|
||||||
|
>
|
||||||
|
Esqueci minha senha
|
||||||
|
</Link>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LoginForm() {
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const tenantId = searchParams.get('tenant');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TenantThemeProvider tenantId={tenantId}>
|
||||||
|
<LoginFormInner />
|
||||||
|
</TenantThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { Suspense } from 'react';
|
||||||
|
import { LoginForm } from './login-form';
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
return (
|
||||||
|
<main className="flex min-h-screen items-center justify-center bg-neutral-50 p-4">
|
||||||
|
<Suspense fallback={null}>
|
||||||
|
<LoginForm />
|
||||||
|
</Suspense>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useParams } from 'next/navigation';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { apiClient, ApiError } from '@/lib/api/client';
|
||||||
|
import { resetPasswordSchema, type ResetPasswordFormValues } from '@/lib/validators/auth';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
|
||||||
|
export default function RedefinirSenhaPage() {
|
||||||
|
const { token } = useParams<{ token: string }>();
|
||||||
|
const [done, setDone] = React.useState(false);
|
||||||
|
const [tokenInvalido, setTokenInvalido] = React.useState(false);
|
||||||
|
const [error, setError] = React.useState<string | null>(null);
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors, isSubmitting },
|
||||||
|
} = useForm<ResetPasswordFormValues>({ resolver: zodResolver(resetPasswordSchema) });
|
||||||
|
|
||||||
|
const onSubmit = async (values: ResetPasswordFormValues) => {
|
||||||
|
setError(null);
|
||||||
|
setTokenInvalido(false);
|
||||||
|
try {
|
||||||
|
await apiClient.post('/auth/password/reset', { token, nova_senha: values.novaSenha });
|
||||||
|
setDone(true);
|
||||||
|
} catch (err) {
|
||||||
|
if (err instanceof ApiError && err.statusCode === 401) {
|
||||||
|
setTokenInvalido(true);
|
||||||
|
} else if (err instanceof ApiError) {
|
||||||
|
setError(err.message);
|
||||||
|
} else {
|
||||||
|
setError('Não foi possível conectar. Tente novamente.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="flex min-h-screen items-center justify-center bg-neutral-50 p-4">
|
||||||
|
<div className="flex w-full max-w-[420px] flex-col gap-6 rounded-xl border border-border bg-surface p-6 shadow-sm sm:p-8">
|
||||||
|
<div className="flex flex-col gap-2 text-center">
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Redefinir senha</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{done ? (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<p role="status" className="rounded-lg bg-success/10 p-3 text-sm text-success">
|
||||||
|
Senha redefinida com sucesso.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
|
||||||
|
>
|
||||||
|
Ir para o login
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
) : tokenInvalido ? (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<p role="alert" className="rounded-lg bg-danger/10 p-3 text-sm text-danger">
|
||||||
|
Este link de redefinição é inválido ou já expirou.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/esqueci-senha"
|
||||||
|
className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
|
||||||
|
>
|
||||||
|
Solicitar um novo link
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)} noValidate>
|
||||||
|
<FormField
|
||||||
|
label="Nova senha"
|
||||||
|
error={errors.novaSenha?.message}
|
||||||
|
helpText="Mínimo de 10 caracteres."
|
||||||
|
>
|
||||||
|
<Input type="password" autoComplete="new-password" {...register('novaSenha')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Confirmar nova senha" error={errors.confirmarSenha?.message}>
|
||||||
|
<Input type="password" autoComplete="new-password" {...register('confirmarSenha')} />
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<p role="alert" className="rounded-lg bg-danger/10 p-3 text-sm text-danger">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button type="submit" loading={isSubmitting} className="w-full">
|
||||||
|
Redefinir senha
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,209 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import type { DateRange } from 'react-day-picker';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ALERT_LOG_STATUSES,
|
||||||
|
listTenantAlertLogs,
|
||||||
|
type AlertLog,
|
||||||
|
type AlertLogStatus,
|
||||||
|
} from '@/lib/api/tenant-alert-logs';
|
||||||
|
import { CANAIS_TEMPLATE, CANAL_TEMPLATE_LABEL, TIPO_TEMPLATE_LABEL } from '@/lib/api/alert-templates';
|
||||||
|
import type { CanalTemplate } from '@/lib/api/alert-templates';
|
||||||
|
import { formatDateTime } from '@/lib/format';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { DateRangePicker } from '@/components/ui/date-picker';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
|
||||||
|
const STATUS_LABEL: Record<AlertLogStatus, string> = {
|
||||||
|
enviado: 'Enviado',
|
||||||
|
entregue: 'Entregue',
|
||||||
|
lido: 'Lido',
|
||||||
|
falhou: 'Falhou',
|
||||||
|
};
|
||||||
|
|
||||||
|
const STATUS_TONE: Record<AlertLogStatus, 'default' | 'destructive' | 'outline'> = {
|
||||||
|
enviado: 'outline',
|
||||||
|
entregue: 'default',
|
||||||
|
lido: 'default',
|
||||||
|
falhou: 'destructive',
|
||||||
|
};
|
||||||
|
|
||||||
|
const STATUS_OPTIONS: { value: AlertLogStatus | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os status' },
|
||||||
|
...ALERT_LOG_STATUSES.map((s) => ({ value: s, label: STATUS_LABEL[s] })),
|
||||||
|
];
|
||||||
|
|
||||||
|
const CANAL_OPTIONS: { value: CanalTemplate | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os canais' },
|
||||||
|
...CANAIS_TEMPLATE.map((c) => ({ value: c, label: CANAL_TEMPLATE_LABEL[c] })),
|
||||||
|
];
|
||||||
|
|
||||||
|
const LIMIT = 20;
|
||||||
|
|
||||||
|
export default function TenantAlertLogsPage() {
|
||||||
|
const [canal, setCanal] = React.useState<CanalTemplate | 'todos'>('todos');
|
||||||
|
const [status, setStatus] = React.useState<AlertLogStatus | 'todos'>('todos');
|
||||||
|
const [periodo, setPeriodo] = React.useState<DateRange | undefined>();
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
const [detail, setDetail] = React.useState<AlertLog | null>(null);
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: [
|
||||||
|
'tenant',
|
||||||
|
'alert-logs',
|
||||||
|
{ canal, status, de: periodo?.from?.toISOString(), ate: periodo?.to?.toISOString(), page },
|
||||||
|
],
|
||||||
|
queryFn: () =>
|
||||||
|
listTenantAlertLogs({
|
||||||
|
canal: canal === 'todos' ? undefined : canal,
|
||||||
|
status: status === 'todos' ? undefined : status,
|
||||||
|
data_inicio: periodo?.from?.toISOString(),
|
||||||
|
data_fim: periodo?.to?.toISOString(),
|
||||||
|
page,
|
||||||
|
limit: LIMIT,
|
||||||
|
}),
|
||||||
|
placeholderData: (prev) => prev,
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<AlertLog>[] = [
|
||||||
|
{
|
||||||
|
id: 'tipo',
|
||||||
|
header: 'Tipo',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => (row.template ? TIPO_TEMPLATE_LABEL[row.template.tipo] : '—'),
|
||||||
|
},
|
||||||
|
{ id: 'canal', header: 'Canal', primary: true, cell: (row) => CANAL_TEMPLATE_LABEL[row.canal] },
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
cell: (row) => <Badge variant={STATUS_TONE[row.status]}>{STATUS_LABEL[row.status]}</Badge>,
|
||||||
|
},
|
||||||
|
{ id: 'enviado_em', header: 'Enviado em', cell: (row) => formatDateTime(row.enviado_em) },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Logs de alerta</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Histórico de envios de WhatsApp/e-mail aos seus clientes</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||||
|
<Select
|
||||||
|
value={canal}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setCanal(value as CanalTemplate | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-44" aria-label="Filtrar por canal">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{CANAL_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select
|
||||||
|
value={status}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setStatus(value as AlertLogStatus | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-44" aria-label="Filtrar por status">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{STATUS_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<DateRangePicker
|
||||||
|
value={periodo}
|
||||||
|
onChange={(range) => {
|
||||||
|
setPeriodo(range);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
placeholder="Período"
|
||||||
|
className="w-full sm:w-64"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={data?.data ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhum log encontrado"
|
||||||
|
emptyDescription="Ajuste os filtros de período/canal/status."
|
||||||
|
onRowClick={(row) => setDetail(row)}
|
||||||
|
rowActions={() => (
|
||||||
|
<Button variant="ghost" size="sm">
|
||||||
|
Ver detalhes
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
pagination={
|
||||||
|
data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={detail !== null}
|
||||||
|
onOpenChange={(open) => !open && setDetail(null)}
|
||||||
|
title="Detalhe do envio"
|
||||||
|
description={detail ? formatDateTime(detail.enviado_em) : undefined}
|
||||||
|
>
|
||||||
|
{detail && (
|
||||||
|
<div className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0">
|
||||||
|
<div className="flex flex-wrap gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-muted-foreground">Tipo</p>
|
||||||
|
<p className="font-medium text-foreground">
|
||||||
|
{detail.template ? TIPO_TEMPLATE_LABEL[detail.template.tipo] : '—'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-muted-foreground">Canal</p>
|
||||||
|
<p className="font-medium text-foreground">{CANAL_TEMPLATE_LABEL[detail.canal]}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-muted-foreground">Status</p>
|
||||||
|
<Badge variant={STATUS_TONE[detail.status]}>{STATUS_LABEL[detail.status]}</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div>
|
||||||
|
<p className="mb-1 text-sm font-medium text-foreground">Conteúdo enviado</p>
|
||||||
|
<p className="rounded-lg border border-border bg-muted/50 p-3 text-sm whitespace-pre-wrap">
|
||||||
|
{detail.conteudo_enviado || '—'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{detail.erro && (
|
||||||
|
<div>
|
||||||
|
<p className="mb-1 text-sm font-medium text-danger">Erro</p>
|
||||||
|
<p className="rounded-lg border border-danger/30 bg-danger/10 p-3 text-sm whitespace-pre-wrap text-danger">
|
||||||
|
{detail.erro}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ResponsiveDialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,412 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Plus } from 'lucide-react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
CANAIS_TEMPLATE,
|
||||||
|
CANAL_TEMPLATE_LABEL,
|
||||||
|
PLACEHOLDERS_POR_TIPO,
|
||||||
|
TIPOS_TEMPLATE_TENANT,
|
||||||
|
TIPO_TEMPLATE_TENANT_LABEL,
|
||||||
|
createTenantAlertTemplate,
|
||||||
|
deleteTenantAlertTemplate,
|
||||||
|
listTenantAlertTemplates,
|
||||||
|
updateTenantAlertTemplate,
|
||||||
|
type AlertTemplate,
|
||||||
|
type CanalTemplate,
|
||||||
|
type TipoTemplateTenant,
|
||||||
|
} from '@/lib/api/tenant-alert-templates';
|
||||||
|
import {
|
||||||
|
tenantAlertTemplateSchema,
|
||||||
|
type TenantAlertTemplateFormValues,
|
||||||
|
} from '@/lib/validators/tenant-alert-templates';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
|
||||||
|
const TIPO_OPTIONS: { value: TipoTemplateTenant | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os tipos' },
|
||||||
|
...TIPOS_TEMPLATE_TENANT.map((tipo) => ({ value: tipo, label: TIPO_TEMPLATE_TENANT_LABEL[tipo] })),
|
||||||
|
];
|
||||||
|
|
||||||
|
const CANAL_OPTIONS: { value: CanalTemplate | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os canais' },
|
||||||
|
...CANAIS_TEMPLATE.map((canal) => ({ value: canal, label: CANAL_TEMPLATE_LABEL[canal] })),
|
||||||
|
];
|
||||||
|
|
||||||
|
const LIMIT = 20;
|
||||||
|
// Limite alto o bastante para trazer todas as combinações tipo×canal numa
|
||||||
|
// única chamada — usado só para calcular a matriz de fallback abaixo, não
|
||||||
|
// para a listagem paginada principal.
|
||||||
|
const MATRIX_LIMIT = 100;
|
||||||
|
|
||||||
|
export default function TenantAlertTemplatesPage() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [tipo, setTipo] = React.useState<TipoTemplateTenant | 'todos'>('todos');
|
||||||
|
const [canal, setCanal] = React.useState<CanalTemplate | 'todos'>('todos');
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
|
||||||
|
const [editing, setEditing] = React.useState<AlertTemplate | null>(null);
|
||||||
|
const [formOpen, setFormOpen] = React.useState(false);
|
||||||
|
const [deleting, setDeleting] = React.useState<AlertTemplate | null>(null);
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'alert-templates', { tipo, canal, page }],
|
||||||
|
queryFn: () =>
|
||||||
|
listTenantAlertTemplates({
|
||||||
|
tipo: tipo === 'todos' ? undefined : tipo,
|
||||||
|
canal: canal === 'todos' ? undefined : canal,
|
||||||
|
page,
|
||||||
|
limit: LIMIT,
|
||||||
|
}),
|
||||||
|
placeholderData: (prev) => prev,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Matriz de fallback: não existe endpoint que informe se um tipo/canal
|
||||||
|
// está usando o padrão da plataforma — inferido client-side comparando
|
||||||
|
// contra a lista completa de templates ativos do tenant.
|
||||||
|
const { data: allTemplates } = useQuery({
|
||||||
|
queryKey: ['tenant', 'alert-templates', 'matrix'],
|
||||||
|
queryFn: () => listTenantAlertTemplates({ ativo: true, limit: MATRIX_LIMIT }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const form = useForm<TenantAlertTemplateFormValues>({ resolver: zodResolver(tenantAlertTemplateSchema) });
|
||||||
|
const corpoFieldRef = React.useRef<HTMLTextAreaElement | null>(null);
|
||||||
|
const { ref: corpoRegisterRef, ...corpoRegister } = form.register('corpo');
|
||||||
|
const watchedTipo = form.watch('tipo');
|
||||||
|
const watchedCanal = form.watch('canal');
|
||||||
|
|
||||||
|
function openCreate(preset?: { tipo: TipoTemplateTenant; canal: CanalTemplate }) {
|
||||||
|
setEditing(null);
|
||||||
|
form.reset({
|
||||||
|
tipo: preset?.tipo ?? 'cobranca_cliente',
|
||||||
|
canal: preset?.canal ?? 'whatsapp',
|
||||||
|
assunto: '',
|
||||||
|
corpo: '',
|
||||||
|
ativo: true,
|
||||||
|
});
|
||||||
|
setFormOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEdit(template: AlertTemplate) {
|
||||||
|
setEditing(template);
|
||||||
|
form.reset({
|
||||||
|
tipo: template.tipo as TipoTemplateTenant,
|
||||||
|
canal: template.canal,
|
||||||
|
assunto: template.assunto ?? '',
|
||||||
|
corpo: template.corpo,
|
||||||
|
ativo: template.ativo,
|
||||||
|
});
|
||||||
|
setFormOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function insertPlaceholder(chave: string) {
|
||||||
|
const token = `{{${chave}}}`;
|
||||||
|
const el = corpoFieldRef.current;
|
||||||
|
const current = form.getValues('corpo') ?? '';
|
||||||
|
|
||||||
|
if (!el) {
|
||||||
|
form.setValue('corpo', current + token, { shouldValidate: true });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const start = el.selectionStart ?? current.length;
|
||||||
|
const end = el.selectionEnd ?? current.length;
|
||||||
|
const next = current.slice(0, start) + token + current.slice(end);
|
||||||
|
form.setValue('corpo', next, { shouldValidate: true });
|
||||||
|
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
el.focus();
|
||||||
|
const pos = start + token.length;
|
||||||
|
el.setSelectionRange(pos, pos);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function invalidateAll() {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'alert-templates'] });
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (values: TenantAlertTemplateFormValues) => {
|
||||||
|
const payload = { ...values, assunto: values.canal === 'email' ? values.assunto : undefined };
|
||||||
|
return editing ? updateTenantAlertTemplate(editing.id, payload) : createTenantAlertTemplate(payload);
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
invalidateAll();
|
||||||
|
toast.success(editing ? 'Template atualizado.' : 'Template criado.');
|
||||||
|
setFormOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar o template.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (id: string) => deleteTenantAlertTemplate(id),
|
||||||
|
onSuccess: () => {
|
||||||
|
invalidateAll();
|
||||||
|
toast.success('Template desativado.');
|
||||||
|
setDeleting(null);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível desativar o template.');
|
||||||
|
setDeleting(null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<AlertTemplate>[] = [
|
||||||
|
{ id: 'tipo', header: 'Tipo', primary: true, cell: (row) => TIPO_TEMPLATE_TENANT_LABEL[row.tipo as TipoTemplateTenant] },
|
||||||
|
{ id: 'canal', header: 'Canal', primary: true, cell: (row) => CANAL_TEMPLATE_LABEL[row.canal] },
|
||||||
|
{
|
||||||
|
id: 'corpo',
|
||||||
|
header: 'Prévia',
|
||||||
|
cell: (row) => <span className="line-clamp-1 text-muted-foreground">{row.corpo}</span>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
cell: (row) => <Badge variant={row.ativo ? 'default' : 'outline'}>{row.ativo ? 'Ativo' : 'Inativo'}</Badge>,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const placeholders = watchedTipo ? PLACEHOLDERS_POR_TIPO[watchedTipo] : [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Templates de alerta</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Mensagens enviadas aos seus clientes</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={() => openCreate()}>
|
||||||
|
<Plus /> Novo template
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{TIPOS_TEMPLATE_TENANT.map((t) =>
|
||||||
|
CANAIS_TEMPLATE.map((c) => {
|
||||||
|
const usaProprio = allTemplates?.data.some((tpl) => tpl.tipo === t && tpl.canal === c) ?? false;
|
||||||
|
return (
|
||||||
|
<Card key={`${t}-${c}`} className="flex flex-col gap-2 p-4">
|
||||||
|
<p className="text-sm font-medium text-foreground">
|
||||||
|
{TIPO_TEMPLATE_TENANT_LABEL[t]} · {CANAL_TEMPLATE_LABEL[c]}
|
||||||
|
</p>
|
||||||
|
{usaProprio ? (
|
||||||
|
<Badge variant="default" className="w-fit">
|
||||||
|
Template próprio configurado
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Badge variant="outline" className="w-fit">
|
||||||
|
Usando padrão da plataforma
|
||||||
|
</Badge>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="w-fit"
|
||||||
|
onClick={() => openCreate({ tipo: t, canal: c })}
|
||||||
|
>
|
||||||
|
Criar meu próprio
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||||
|
<Select
|
||||||
|
value={tipo}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setTipo(value as TipoTemplateTenant | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-56" aria-label="Filtrar por tipo">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{TIPO_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select
|
||||||
|
value={canal}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setCanal(value as CanalTemplate | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-44" aria-label="Filtrar por canal">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{CANAL_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={data?.data ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhum template próprio cadastrado"
|
||||||
|
emptyDescription="Sem um template próprio, o padrão da plataforma é usado automaticamente."
|
||||||
|
emptyAction={
|
||||||
|
<Button size="sm" onClick={() => openCreate()}>
|
||||||
|
Novo template
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
rowActions={(row) => (
|
||||||
|
<>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => openEdit(row)}>
|
||||||
|
Editar
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setDeleting(row)}>
|
||||||
|
Desativar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
pagination={
|
||||||
|
data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={formOpen}
|
||||||
|
onOpenChange={setFormOpen}
|
||||||
|
title={editing ? 'Editar template' : 'Novo template'}
|
||||||
|
className="sm:max-w-2xl"
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => setFormOpen(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
loading={saveMutation.isPending}
|
||||||
|
onClick={form.handleSubmit((values) => saveMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
Salvar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0"
|
||||||
|
onSubmit={form.handleSubmit((values) => saveMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Tipo" id="tipo" error={form.formState.errors.tipo?.message} required>
|
||||||
|
<Select
|
||||||
|
value={watchedTipo}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
form.setValue('tipo', value as TipoTemplateTenant, { shouldValidate: true })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="tipo" className="w-full">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{TIPOS_TEMPLATE_TENANT.map((t) => (
|
||||||
|
<SelectItem key={t} value={t}>
|
||||||
|
{TIPO_TEMPLATE_TENANT_LABEL[t]}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Canal" id="canal" error={form.formState.errors.canal?.message} required>
|
||||||
|
<Select
|
||||||
|
value={watchedCanal}
|
||||||
|
onValueChange={(value) => form.setValue('canal', value as CanalTemplate, { shouldValidate: true })}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="canal" className="w-full">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{CANAIS_TEMPLATE.map((c) => (
|
||||||
|
<SelectItem key={c} value={c}>
|
||||||
|
{CANAL_TEMPLATE_LABEL[c]}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{watchedCanal === 'email' && (
|
||||||
|
<FormField label="Assunto" error={form.formState.errors.assunto?.message} required>
|
||||||
|
<Input {...form.register('assunto')} />
|
||||||
|
</FormField>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-[1fr_220px]">
|
||||||
|
<FormField label="Corpo da mensagem" error={form.formState.errors.corpo?.message} required>
|
||||||
|
<Textarea
|
||||||
|
rows={8}
|
||||||
|
{...corpoRegister}
|
||||||
|
ref={(el) => {
|
||||||
|
corpoRegisterRef(el);
|
||||||
|
corpoFieldRef.current = el;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<p className="text-xs font-medium text-muted-foreground">Placeholders disponíveis</p>
|
||||||
|
<div className="flex flex-col gap-1.5 overflow-y-auto rounded-lg border border-border p-2 sm:max-h-56">
|
||||||
|
{placeholders.map((p) => (
|
||||||
|
<button
|
||||||
|
key={p.chave}
|
||||||
|
type="button"
|
||||||
|
onClick={() => insertPlaceholder(p.chave)}
|
||||||
|
title={p.descricao}
|
||||||
|
className="rounded-md px-2 py-1.5 text-left text-xs hover:bg-muted"
|
||||||
|
>
|
||||||
|
<code className="font-mono font-medium text-primary-on-light">{`{{${p.chave}}}`}</code>
|
||||||
|
<p className="text-muted-foreground">{p.descricao}</p>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={deleting !== null}
|
||||||
|
onOpenChange={(open) => !open && setDeleting(null)}
|
||||||
|
title="Desativar template?"
|
||||||
|
description="O padrão da plataforma volta a ser usado nos disparos automáticos, mas o template continua no histórico."
|
||||||
|
confirmLabel="Desativar"
|
||||||
|
destructive
|
||||||
|
loading={deleteMutation.isPending}
|
||||||
|
onConfirm={() => deleting && deleteMutation.mutate(deleting.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,473 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useParams } from 'next/navigation';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Plus, Star } from 'lucide-react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
createCustomerContact,
|
||||||
|
deactivateCustomer,
|
||||||
|
deleteCustomerContact,
|
||||||
|
getCustomer,
|
||||||
|
updateCustomer,
|
||||||
|
updateCustomerContact,
|
||||||
|
type Customer,
|
||||||
|
type CustomerContact,
|
||||||
|
} from '@/lib/api/customers';
|
||||||
|
import { listSales, type SaleListItem } from '@/lib/api/sales';
|
||||||
|
import {
|
||||||
|
customerContactSchema,
|
||||||
|
customerSchema,
|
||||||
|
type CustomerContactFormValues,
|
||||||
|
type CustomerFormValues,
|
||||||
|
} from '@/lib/validators/customers';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { BR_STATES } from '@/lib/br-states';
|
||||||
|
import { formatCurrency, formatDate } from '@/lib/format';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import { StatusPill } from '@/components/ui/status-pill';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
|
||||||
|
export default function ClienteDetalhePage() {
|
||||||
|
const params = useParams<{ id: string }>();
|
||||||
|
const customerId = params.id;
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [deactivateOpen, setDeactivateOpen] = React.useState(false);
|
||||||
|
|
||||||
|
const { data: customer, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'customers', customerId],
|
||||||
|
queryFn: () => getCustomer(customerId),
|
||||||
|
});
|
||||||
|
|
||||||
|
const deactivateMutation = useMutation({
|
||||||
|
mutationFn: () => deactivateCustomer(customerId),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'customers'] });
|
||||||
|
toast.success('Cliente desativado.');
|
||||||
|
setDeactivateOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível desativar o cliente.');
|
||||||
|
setDeactivateOpen(false);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading || !customer) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<Skeleton className="h-8 w-64" />
|
||||||
|
<Skeleton className="h-64 w-full" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">
|
||||||
|
{customer.nome_fantasia || customer.razao_social}
|
||||||
|
</h1>
|
||||||
|
<Badge variant={customer.ativo ? 'default' : 'outline'}>{customer.ativo ? 'Ativo' : 'Inativo'}</Badge>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">{customer.documento || customer.email || '—'}</p>
|
||||||
|
</div>
|
||||||
|
{customer.ativo && (
|
||||||
|
<Button variant="outline" onClick={() => setDeactivateOpen(true)}>
|
||||||
|
Desativar cliente
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tabs defaultValue="dados">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="dados">Dados cadastrais</TabsTrigger>
|
||||||
|
<TabsTrigger value="contatos">Contatos</TabsTrigger>
|
||||||
|
<TabsTrigger value="historico">Histórico de vendas</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="dados" className="pt-4">
|
||||||
|
<DadosCadastraisForm customerId={customerId} customer={customer} />
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="contatos" className="pt-4">
|
||||||
|
<ContatosTab customerId={customerId} contatos={customer.contatos} />
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="historico" className="pt-4">
|
||||||
|
<HistoricoVendasTab customerId={customerId} />
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={deactivateOpen}
|
||||||
|
onOpenChange={setDeactivateOpen}
|
||||||
|
title="Desativar cliente?"
|
||||||
|
description="O cliente sai das listagens de ativos, mas o cadastro e o histórico de vendas continuam disponíveis."
|
||||||
|
confirmLabel="Desativar"
|
||||||
|
destructive
|
||||||
|
loading={deactivateMutation.isPending}
|
||||||
|
onConfirm={() => deactivateMutation.mutate()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DadosCadastraisForm({ customerId, customer }: { customerId: string; customer: Customer }) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const form = useForm<CustomerFormValues>({
|
||||||
|
resolver: zodResolver(customerSchema),
|
||||||
|
defaultValues: {
|
||||||
|
razao_social: customer.razao_social,
|
||||||
|
nome_fantasia: customer.nome_fantasia ?? '',
|
||||||
|
documento: customer.documento ?? '',
|
||||||
|
email: customer.email ?? '',
|
||||||
|
telefone_whatsapp: customer.telefone_whatsapp ?? '',
|
||||||
|
endereco: customer.endereco ?? '',
|
||||||
|
cidade: customer.cidade ?? '',
|
||||||
|
uf: customer.uf ?? '',
|
||||||
|
observacoes: customer.observacoes ?? '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: (values: CustomerFormValues) =>
|
||||||
|
updateCustomer(customerId, {
|
||||||
|
...values,
|
||||||
|
nome_fantasia: values.nome_fantasia || undefined,
|
||||||
|
documento: values.documento || undefined,
|
||||||
|
email: values.email || undefined,
|
||||||
|
telefone_whatsapp: values.telefone_whatsapp || undefined,
|
||||||
|
endereco: values.endereco || undefined,
|
||||||
|
cidade: values.cidade || undefined,
|
||||||
|
uf: values.uf || undefined,
|
||||||
|
observacoes: values.observacoes || undefined,
|
||||||
|
}),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'customers', customerId] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'customers'] });
|
||||||
|
toast.success('Dados do cliente atualizados.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar as alterações.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="max-w-2xl">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Dados cadastrais</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Razão social" error={form.formState.errors.razao_social?.message} required>
|
||||||
|
<Input {...form.register('razao_social')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Nome fantasia" error={form.formState.errors.nome_fantasia?.message}>
|
||||||
|
<Input {...form.register('nome_fantasia')} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Documento (CPF/CNPJ)" error={form.formState.errors.documento?.message}>
|
||||||
|
<Input {...form.register('documento')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Telefone/WhatsApp" error={form.formState.errors.telefone_whatsapp?.message}>
|
||||||
|
<Input {...form.register('telefone_whatsapp')} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<FormField label="E-mail" error={form.formState.errors.email?.message}>
|
||||||
|
<Input type="email" {...form.register('email')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Endereço" error={form.formState.errors.endereco?.message}>
|
||||||
|
<Input {...form.register('endereco')} />
|
||||||
|
</FormField>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-[1fr_120px]">
|
||||||
|
<FormField label="Cidade" error={form.formState.errors.cidade?.message}>
|
||||||
|
<Input {...form.register('cidade')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="UF" id="uf" error={form.formState.errors.uf?.message}>
|
||||||
|
<Select
|
||||||
|
value={form.watch('uf')}
|
||||||
|
onValueChange={(value) => form.setValue('uf', value, { shouldValidate: true })}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="uf" className="w-full">
|
||||||
|
<SelectValue placeholder="UF" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{BR_STATES.map((uf) => (
|
||||||
|
<SelectItem key={uf} value={uf}>
|
||||||
|
{uf}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<FormField label="Observações" error={form.formState.errors.observacoes?.message}>
|
||||||
|
<Textarea rows={3} {...form.register('observacoes')} />
|
||||||
|
</FormField>
|
||||||
|
<div>
|
||||||
|
<Button type="submit" loading={mutation.isPending}>
|
||||||
|
Salvar alterações
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContatosTab({ customerId, contatos }: { customerId: string; contatos: CustomerContact[] }) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [editing, setEditing] = React.useState<CustomerContact | null>(null);
|
||||||
|
const [formOpen, setFormOpen] = React.useState(false);
|
||||||
|
const [deleting, setDeleting] = React.useState<CustomerContact | null>(null);
|
||||||
|
const [settingPrincipalId, setSettingPrincipalId] = React.useState<string | null>(null);
|
||||||
|
|
||||||
|
const form = useForm<CustomerContactFormValues>({ resolver: zodResolver(customerContactSchema) });
|
||||||
|
|
||||||
|
function invalidate() {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'customers', customerId] });
|
||||||
|
}
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
setEditing(null);
|
||||||
|
form.reset({ nome: '', cargo: '', email: '', telefone_whatsapp: '', principal: contatos.length === 0 });
|
||||||
|
setFormOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEdit(contact: CustomerContact) {
|
||||||
|
setEditing(contact);
|
||||||
|
form.reset({
|
||||||
|
nome: contact.nome,
|
||||||
|
cargo: contact.cargo ?? '',
|
||||||
|
email: contact.email ?? '',
|
||||||
|
telefone_whatsapp: contact.telefone_whatsapp ?? '',
|
||||||
|
principal: contact.principal,
|
||||||
|
});
|
||||||
|
setFormOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (values: CustomerContactFormValues) => {
|
||||||
|
const payload = {
|
||||||
|
nome: values.nome,
|
||||||
|
cargo: values.cargo || undefined,
|
||||||
|
email: values.email || undefined,
|
||||||
|
telefone_whatsapp: values.telefone_whatsapp || undefined,
|
||||||
|
principal: values.principal,
|
||||||
|
};
|
||||||
|
return editing
|
||||||
|
? updateCustomerContact(customerId, editing.id, payload)
|
||||||
|
: createCustomerContact(customerId, payload);
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
invalidate();
|
||||||
|
toast.success(editing ? 'Contato atualizado.' : 'Contato adicionado.');
|
||||||
|
setFormOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar o contato.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (contactId: string) => deleteCustomerContact(customerId, contactId),
|
||||||
|
onSuccess: () => {
|
||||||
|
invalidate();
|
||||||
|
toast.success('Contato removido.');
|
||||||
|
setDeleting(null);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível remover o contato.');
|
||||||
|
setDeleting(null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const setPrincipalMutation = useMutation({
|
||||||
|
mutationFn: (contactId: string) => updateCustomerContact(customerId, contactId, { principal: true }),
|
||||||
|
onMutate: (contactId) => setSettingPrincipalId(contactId),
|
||||||
|
onSuccess: () => {
|
||||||
|
invalidate();
|
||||||
|
toast.success('Contato principal atualizado.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível atualizar o contato principal.');
|
||||||
|
},
|
||||||
|
onSettled: () => setSettingPrincipalId(null),
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<CustomerContact>[] = [
|
||||||
|
{
|
||||||
|
id: 'nome',
|
||||||
|
header: 'Nome',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-medium text-foreground">{row.nome}</span>
|
||||||
|
{row.principal && <Badge>Principal</Badge>}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ id: 'cargo', header: 'Cargo', cell: (row) => row.cargo || '—' },
|
||||||
|
{
|
||||||
|
id: 'contato',
|
||||||
|
header: 'Contato',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{row.telefone_whatsapp && <span>{row.telefone_whatsapp}</span>}
|
||||||
|
{row.email && <span className="text-xs text-muted-foreground">{row.email}</span>}
|
||||||
|
{!row.telefone_whatsapp && !row.email && '—'}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button size="sm" onClick={openCreate}>
|
||||||
|
<Plus /> Novo contato
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={contatos}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
emptyTitle="Nenhum contato cadastrado"
|
||||||
|
emptyAction={
|
||||||
|
<Button size="sm" onClick={openCreate}>
|
||||||
|
Novo contato
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
rowActions={(row) => (
|
||||||
|
<>
|
||||||
|
{!row.principal && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
loading={settingPrincipalId === row.id}
|
||||||
|
onClick={() => setPrincipalMutation.mutate(row.id)}
|
||||||
|
>
|
||||||
|
<Star /> Tornar principal
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => openEdit(row)}>
|
||||||
|
Editar
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setDeleting(row)}>
|
||||||
|
Excluir
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={formOpen}
|
||||||
|
onOpenChange={setFormOpen}
|
||||||
|
title={editing ? 'Editar contato' : 'Novo contato'}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => setFormOpen(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
loading={saveMutation.isPending}
|
||||||
|
onClick={form.handleSubmit((values) => saveMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
Salvar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0"
|
||||||
|
onSubmit={form.handleSubmit((values) => saveMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<FormField label="Nome" error={form.formState.errors.nome?.message} required>
|
||||||
|
<Input {...form.register('nome')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Cargo" error={form.formState.errors.cargo?.message}>
|
||||||
|
<Input {...form.register('cargo')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="E-mail" error={form.formState.errors.email?.message}>
|
||||||
|
<Input type="email" {...form.register('email')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Telefone/WhatsApp" error={form.formState.errors.telefone_whatsapp?.message}>
|
||||||
|
<Input {...form.register('telefone_whatsapp')} />
|
||||||
|
</FormField>
|
||||||
|
</form>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={deleting !== null}
|
||||||
|
onOpenChange={(open) => !open && setDeleting(null)}
|
||||||
|
title={`Remover "${deleting?.nome}"?`}
|
||||||
|
description="Esta ação não pode ser desfeita."
|
||||||
|
confirmLabel="Remover"
|
||||||
|
destructive
|
||||||
|
loading={deleteMutation.isPending}
|
||||||
|
onConfirm={() => deleting && deleteMutation.mutate(deleting.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HistoricoVendasTab({ customerId }: { customerId: string }) {
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'vendas', { customerId, page }],
|
||||||
|
queryFn: () => listSales({ customer_id: customerId, page, limit: 10 }),
|
||||||
|
placeholderData: (prev) => prev,
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<SaleListItem>[] = [
|
||||||
|
{ id: 'numero', header: 'Venda', primary: true, cell: (row) => `#${row.numero_venda}` },
|
||||||
|
{ id: 'status', header: 'Status', primary: true, cell: (row) => <StatusPill status={row.status} /> },
|
||||||
|
{ id: 'valor', header: 'Valor total', cell: (row) => formatCurrency(row.valor_total) },
|
||||||
|
{ id: 'data', header: 'Data', cell: (row) => formatDate(row.data_venda) },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={data?.data ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhuma venda registrada"
|
||||||
|
emptyDescription="As vendas feitas para este cliente aparecem aqui."
|
||||||
|
rowActions={(row) => (
|
||||||
|
<Button variant="ghost" size="sm" asChild>
|
||||||
|
<Link href={`/app/vendas/${row.id}`}>Ver</Link>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
pagination={
|
||||||
|
data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,140 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useMutation } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
|
||||||
|
import { createCustomer } from '@/lib/api/customers';
|
||||||
|
import { customerSchema, type CustomerFormValues } from '@/lib/validators/customers';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { BR_STATES } from '@/lib/br-states';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
|
||||||
|
export default function NovoClientePage() {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const form = useForm<CustomerFormValues>({
|
||||||
|
resolver: zodResolver(customerSchema),
|
||||||
|
defaultValues: {
|
||||||
|
razao_social: '',
|
||||||
|
nome_fantasia: '',
|
||||||
|
documento: '',
|
||||||
|
email: '',
|
||||||
|
telefone_whatsapp: '',
|
||||||
|
endereco: '',
|
||||||
|
cidade: '',
|
||||||
|
uf: '',
|
||||||
|
observacoes: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: (values: CustomerFormValues) =>
|
||||||
|
createCustomer({
|
||||||
|
razao_social: values.razao_social,
|
||||||
|
nome_fantasia: values.nome_fantasia || undefined,
|
||||||
|
documento: values.documento || undefined,
|
||||||
|
email: values.email || undefined,
|
||||||
|
telefone_whatsapp: values.telefone_whatsapp || undefined,
|
||||||
|
endereco: values.endereco || undefined,
|
||||||
|
cidade: values.cidade || undefined,
|
||||||
|
uf: values.uf || undefined,
|
||||||
|
observacoes: values.observacoes || undefined,
|
||||||
|
}),
|
||||||
|
onSuccess: (customer) => {
|
||||||
|
toast.success('Cliente cadastrado.');
|
||||||
|
router.push(`/app/clientes/${customer.id}`);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
// Erro de limite do plano (400) vem com mensagem de negócio clara do
|
||||||
|
// backend — mostrado direto, sem mensagem genérica (Etapa 16, item 6).
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível cadastrar o cliente.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Novo cliente</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Cadastro de cliente</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form
|
||||||
|
className="flex max-w-2xl flex-col gap-6"
|
||||||
|
onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Dados cadastrais</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Razão social" error={form.formState.errors.razao_social?.message} required>
|
||||||
|
<Input {...form.register('razao_social')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Nome fantasia" error={form.formState.errors.nome_fantasia?.message}>
|
||||||
|
<Input {...form.register('nome_fantasia')} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Documento (CPF/CNPJ)" error={form.formState.errors.documento?.message}>
|
||||||
|
<Input placeholder="000.000.000-00" {...form.register('documento')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Telefone/WhatsApp" error={form.formState.errors.telefone_whatsapp?.message}>
|
||||||
|
<Input {...form.register('telefone_whatsapp')} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<FormField label="E-mail" error={form.formState.errors.email?.message}>
|
||||||
|
<Input type="email" {...form.register('email')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Endereço" error={form.formState.errors.endereco?.message}>
|
||||||
|
<Input {...form.register('endereco')} />
|
||||||
|
</FormField>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-[1fr_120px]">
|
||||||
|
<FormField label="Cidade" error={form.formState.errors.cidade?.message}>
|
||||||
|
<Input {...form.register('cidade')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="UF" id="uf" error={form.formState.errors.uf?.message}>
|
||||||
|
<Select
|
||||||
|
value={form.watch('uf')}
|
||||||
|
onValueChange={(value) => form.setValue('uf', value, { shouldValidate: true })}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="uf" className="w-full">
|
||||||
|
<SelectValue placeholder="UF" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{BR_STATES.map((uf) => (
|
||||||
|
<SelectItem key={uf} value={uf}>
|
||||||
|
{uf}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<FormField label="Observações" error={form.formState.errors.observacoes?.message}>
|
||||||
|
<Textarea rows={3} {...form.register('observacoes')} />
|
||||||
|
</FormField>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Button type="submit" loading={mutation.isPending}>
|
||||||
|
Cadastrar cliente
|
||||||
|
</Button>
|
||||||
|
<Button type="button" variant="outline" onClick={() => router.push('/app/clientes')}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,145 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Plus, Search } from 'lucide-react';
|
||||||
|
|
||||||
|
import { listCustomers, type Customer } from '@/lib/api/customers';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
|
||||||
|
const ATIVO_OPTIONS = [
|
||||||
|
{ value: 'todos', label: 'Ativos e inativos' },
|
||||||
|
{ value: 'true', label: 'Somente ativos' },
|
||||||
|
{ value: 'false', label: 'Somente inativos' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const LIMIT = 20;
|
||||||
|
|
||||||
|
export default function ClientesPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [busca, setBusca] = React.useState('');
|
||||||
|
const [ativo, setAtivo] = React.useState('true');
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'customers', { busca, ativo, page }],
|
||||||
|
queryFn: () =>
|
||||||
|
listCustomers({
|
||||||
|
busca: busca || undefined,
|
||||||
|
ativo: ativo === 'todos' ? undefined : ativo === 'true',
|
||||||
|
page,
|
||||||
|
limit: LIMIT,
|
||||||
|
}),
|
||||||
|
placeholderData: (prev) => prev,
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<Customer>[] = [
|
||||||
|
{
|
||||||
|
id: 'nome',
|
||||||
|
header: 'Cliente',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="font-medium text-foreground">{row.nome_fantasia || row.razao_social}</span>
|
||||||
|
{row.documento && <span className="text-xs text-muted-foreground">{row.documento}</span>}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'contato',
|
||||||
|
header: 'Contato',
|
||||||
|
cell: (row) => (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{row.telefone_whatsapp && <span>{row.telefone_whatsapp}</span>}
|
||||||
|
{row.email && <span className="text-xs text-muted-foreground">{row.email}</span>}
|
||||||
|
{!row.telefone_whatsapp && !row.email && '—'}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => <Badge variant={row.ativo ? 'default' : 'outline'}>{row.ativo ? 'Ativo' : 'Inativo'}</Badge>,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Clientes</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Base de clientes do seu negócio</p>
|
||||||
|
</div>
|
||||||
|
<Button asChild>
|
||||||
|
<Link href="/app/clientes/novo">
|
||||||
|
<Plus /> Novo cliente
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||||
|
<div className="relative flex-1 sm:max-w-xs">
|
||||||
|
<Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-neutral-500" />
|
||||||
|
<Input
|
||||||
|
placeholder="Buscar por nome ou documento..."
|
||||||
|
className="pl-9"
|
||||||
|
value={busca}
|
||||||
|
onChange={(e) => {
|
||||||
|
setBusca(e.target.value);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Select
|
||||||
|
value={ativo}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setAtivo(value);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-52" aria-label="Filtrar por status">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{ATIVO_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={data?.data ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhum cliente encontrado"
|
||||||
|
emptyDescription="Ajuste os filtros ou cadastre um novo cliente."
|
||||||
|
emptyAction={
|
||||||
|
<Button size="sm" asChild>
|
||||||
|
<Link href="/app/clientes/novo">Novo cliente</Link>
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
onRowClick={(row) => router.push(`/app/clientes/${row.id}`)}
|
||||||
|
rowActions={(row) => (
|
||||||
|
<Button variant="ghost" size="sm" asChild>
|
||||||
|
<Link href={`/app/clientes/${row.id}`}>Ver</Link>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
pagination={
|
||||||
|
data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,181 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
||||||
|
import { ArrowRight, CircleDollarSign, ShoppingCart, TriangleAlert } from 'lucide-react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
getFinanceiro,
|
||||||
|
getResumoMensal,
|
||||||
|
getResumoSemanal,
|
||||||
|
type ResumoMensalRow,
|
||||||
|
type ResumoSemanalRow,
|
||||||
|
} from '@/lib/api/tenant-dashboard';
|
||||||
|
import { formatCurrency, formatDate } from '@/lib/format';
|
||||||
|
import { StatCard } from '@/components/domain/stat-card';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import { EmptyState } from '@/components/ui/empty-state';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
|
||||||
|
function useChartColor() {
|
||||||
|
const [color, setColor] = React.useState('#2563eb');
|
||||||
|
React.useEffect(() => {
|
||||||
|
const value = getComputedStyle(document.documentElement).getPropertyValue('--color-primary').trim();
|
||||||
|
if (value) setColor(value);
|
||||||
|
}, []);
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ResumoChart({ periodo }: { periodo: 'semanal' | 'mensal' }) {
|
||||||
|
const color = useChartColor();
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'dashboard', 'resumo', periodo],
|
||||||
|
queryFn: (): Promise<(ResumoSemanalRow | ResumoMensalRow)[]> =>
|
||||||
|
periodo === 'semanal' ? getResumoSemanal() : getResumoMensal(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const chartData = (data ?? []).map((row) => ({
|
||||||
|
label: formatDate('semana' in row ? row.semana : row.mes),
|
||||||
|
total_vendido: row.total_vendido,
|
||||||
|
qtd_vendas: row.qtd_vendas,
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (isLoading) return <Skeleton className="h-64 w-full" />;
|
||||||
|
if (chartData.length === 0) {
|
||||||
|
return <EmptyState title="Sem vendas no período" description="Ainda não há dados suficientes para o gráfico." />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ResponsiveContainer width="100%" height={260}>
|
||||||
|
<AreaChart data={chartData} margin={{ left: 8, right: 8, top: 8, bottom: 0 }}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="resumoVendasFill" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="5%" stopColor={color} stopOpacity={0.35} />
|
||||||
|
<stop offset="95%" stopColor={color} stopOpacity={0.02} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-border" />
|
||||||
|
<XAxis dataKey="label" tickLine={false} axisLine={false} className="text-xs fill-muted-foreground" />
|
||||||
|
<YAxis
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
width={72}
|
||||||
|
className="text-xs fill-muted-foreground"
|
||||||
|
tickFormatter={(value: number) => formatCurrency(value)}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
formatter={(value, name) =>
|
||||||
|
name === 'total_vendido' ? [formatCurrency(Number(value)), 'Total vendido'] : [String(value), 'Vendas']
|
||||||
|
}
|
||||||
|
contentStyle={{ borderRadius: 8, borderColor: 'var(--border)' }}
|
||||||
|
/>
|
||||||
|
<Area type="monotone" dataKey="total_vendido" stroke={color} strokeWidth={2} fill="url(#resumoVendasFill)" />
|
||||||
|
</AreaChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TenantDashboardPage() {
|
||||||
|
const { data: financeiro, isLoading: loadingFinanceiro } = useQuery({
|
||||||
|
queryKey: ['tenant', 'dashboard', 'financeiro'],
|
||||||
|
queryFn: () => getFinanceiro(8),
|
||||||
|
});
|
||||||
|
|
||||||
|
const totalAtrasado = Number(financeiro?.total_atrasado ?? 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Dashboard</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Visão geral das suas vendas</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||||
|
<StatCard
|
||||||
|
label="Recebido no mês"
|
||||||
|
value={formatCurrency(financeiro?.total_recebido_mes)}
|
||||||
|
icon={CircleDollarSign}
|
||||||
|
tone="success"
|
||||||
|
loading={loadingFinanceiro}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="A receber"
|
||||||
|
value={formatCurrency(financeiro?.total_a_receber)}
|
||||||
|
icon={ShoppingCart}
|
||||||
|
tone="warning"
|
||||||
|
loading={loadingFinanceiro}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Atrasado"
|
||||||
|
value={formatCurrency(financeiro?.total_atrasado)}
|
||||||
|
icon={TriangleAlert}
|
||||||
|
tone={totalAtrasado > 0 ? 'danger' : 'default'}
|
||||||
|
loading={loadingFinanceiro}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Evolução de vendas</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Tabs defaultValue="semanal">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="semanal">Semanal</TabsTrigger>
|
||||||
|
<TabsTrigger value="mensal">Mensal</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<TabsContent value="semanal" className="pt-4">
|
||||||
|
<ResumoChart periodo="semanal" />
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="mensal" className="pt-4">
|
||||||
|
<ResumoChart periodo="mensal" />
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
|
||||||
|
<CardTitle>Próximas parcelas a vencer</CardTitle>
|
||||||
|
<Link
|
||||||
|
href="/app/recebimentos"
|
||||||
|
className="flex items-center gap-1 text-sm text-primary-on-light hover:underline"
|
||||||
|
>
|
||||||
|
Ver todos <ArrowRight className="size-3.5" />
|
||||||
|
</Link>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{loadingFinanceiro ? (
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{Array.from({ length: 4 }).map((_, i) => (
|
||||||
|
<Skeleton key={i} className="h-10 w-full" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : financeiro && financeiro.proximas_parcelas.length > 0 ? (
|
||||||
|
<ul className="flex flex-col divide-y divide-border">
|
||||||
|
{financeiro.proximas_parcelas.map((parcela) => (
|
||||||
|
<li key={parcela.id} className="flex items-center justify-between gap-4 py-2.5 text-sm">
|
||||||
|
<div className="min-w-0">
|
||||||
|
<p className="truncate font-medium text-foreground">{parcela.sale.customer.razao_social}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Venda #{parcela.sale.numero_venda} · Parcela {parcela.numero_parcela}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="font-medium tabular-nums text-foreground">{formatCurrency(parcela.valor)}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">{formatDate(parcela.vencimento)}</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : (
|
||||||
|
<EmptyState title="Nenhuma parcela pendente" description="Não há parcelas a vencer no momento." />
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,215 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Send } from 'lucide-react';
|
||||||
|
|
||||||
|
import { getTenantEmailConfig, testarEnvioEmail, updateTenantEmailConfig } from '@/lib/api/email-config';
|
||||||
|
import {
|
||||||
|
tenantEmailConfigSchema,
|
||||||
|
testarEnvioEmailSchema,
|
||||||
|
type TenantEmailConfigFormValues,
|
||||||
|
type TestarEnvioEmailFormValues,
|
||||||
|
} from '@/lib/validators/email-config';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
|
||||||
|
const USAR_PADRAO_OPTIONS = [
|
||||||
|
{ value: 'padrao', label: 'Usar configuração padrão da plataforma' },
|
||||||
|
{ value: 'proprio', label: 'Usar meu próprio SMTP' },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export default function EmailConfigPage() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const { data: config, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'email-config'],
|
||||||
|
queryFn: getTenantEmailConfig,
|
||||||
|
});
|
||||||
|
|
||||||
|
const form = useForm<TenantEmailConfigFormValues>({
|
||||||
|
resolver: zodResolver(tenantEmailConfigSchema),
|
||||||
|
values: config
|
||||||
|
? {
|
||||||
|
usar_config_padrao: config.usar_config_padrao,
|
||||||
|
smtp_host: config.smtp_host ?? '',
|
||||||
|
smtp_porta: config.smtp_porta,
|
||||||
|
smtp_usuario: config.smtp_usuario ?? '',
|
||||||
|
smtp_senha: '',
|
||||||
|
email_remetente: config.email_remetente ?? '',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
const usarPadrao = form.watch('usar_config_padrao');
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (values: TenantEmailConfigFormValues) => updateTenantEmailConfig(values),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
queryClient.setQueryData(['tenant', 'email-config'], result);
|
||||||
|
toast.success('Configuração de e-mail atualizada.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar a configuração.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const testForm = useForm<TestarEnvioEmailFormValues>({
|
||||||
|
resolver: zodResolver(testarEnvioEmailSchema),
|
||||||
|
defaultValues: { destinatario: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const testMutation = useMutation({
|
||||||
|
mutationFn: (values: TestarEnvioEmailFormValues) => testarEnvioEmail(values.destinatario),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
// `DispatchResult` sempre responde HTTP 200 — falha de envio vem como
|
||||||
|
// `{ sucesso: false, erro }`, não como erro HTTP (ver `lib/api/email-config.ts`).
|
||||||
|
if (result.sucesso) {
|
||||||
|
toast.success('E-mail de teste enviado com sucesso.');
|
||||||
|
} else {
|
||||||
|
toast.error(result.erro ?? 'Falha ao enviar o e-mail de teste.');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Falha ao enviar o e-mail de teste.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Configuração de e-mail</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">SMTP usado para envio de alertas por e-mail</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card className="max-w-xl">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Servidor SMTP</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Ao desativar o padrão da plataforma, os campos de SMTP próprio ficam obrigatórios.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<Skeleton className="h-11 w-full" />
|
||||||
|
<Skeleton className="h-11 w-full" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
onSubmit={form.handleSubmit((values) => saveMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<FormField label="Origem do envio" id="usar_config_padrao">
|
||||||
|
<Select
|
||||||
|
value={usarPadrao ? 'padrao' : 'proprio'}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
form.setValue('usar_config_padrao', value === 'padrao', { shouldValidate: true })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="usar_config_padrao" className="w-full">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{USAR_PADRAO_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
{!usarPadrao && (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-[1fr_140px]">
|
||||||
|
<FormField
|
||||||
|
label="Host SMTP"
|
||||||
|
error={form.formState.errors.smtp_host?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Input placeholder="smtp.exemplo.com" {...form.register('smtp_host')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField
|
||||||
|
label="Porta"
|
||||||
|
error={form.formState.errors.smtp_porta?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
{...form.register('smtp_porta', {
|
||||||
|
setValueAs: (v) => (v === '' ? undefined : Number(v)),
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<FormField
|
||||||
|
label="Usuário SMTP"
|
||||||
|
error={form.formState.errors.smtp_usuario?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Input {...form.register('smtp_usuario')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField
|
||||||
|
label="Senha SMTP"
|
||||||
|
error={form.formState.errors.smtp_senha?.message}
|
||||||
|
helpText="Por segurança, o valor atual nunca é pré-preenchido — é preciso reinformar a senha a cada alteração"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Input type="password" autoComplete="off" {...form.register('smtp_senha')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField
|
||||||
|
label="E-mail remetente"
|
||||||
|
error={form.formState.errors.email_remetente?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Input type="email" {...form.register('email_remetente')} />
|
||||||
|
</FormField>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Button type="submit" loading={saveMutation.isPending}>
|
||||||
|
Salvar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="max-w-xl">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Testar envio</CardTitle>
|
||||||
|
<CardDescription>Envia um e-mail de teste usando a configuração atual.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4 sm:flex-row sm:items-end"
|
||||||
|
onSubmit={testForm.handleSubmit((values) => testMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
className="flex-1"
|
||||||
|
label="E-mail de destino"
|
||||||
|
error={testForm.formState.errors.destinatario?.message}
|
||||||
|
>
|
||||||
|
<Input type="email" {...testForm.register('destinatario')} />
|
||||||
|
</FormField>
|
||||||
|
<Button type="submit" variant="outline" loading={testMutation.isPending}>
|
||||||
|
<Send /> Enviar teste
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,359 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Copy, Plus } from 'lucide-react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
EQUIPE_ROLES,
|
||||||
|
EQUIPE_ROLE_LABEL,
|
||||||
|
createEquipeUser,
|
||||||
|
listEquipe,
|
||||||
|
updateEquipeUser,
|
||||||
|
type EquipeUser,
|
||||||
|
type EquipeUserCreated,
|
||||||
|
} from '@/lib/api/equipe';
|
||||||
|
import {
|
||||||
|
createEquipeUserSchema,
|
||||||
|
updateEquipeRoleSchema,
|
||||||
|
type CreateEquipeUserFormValues,
|
||||||
|
type UpdateEquipeRoleFormValues,
|
||||||
|
} from '@/lib/validators/equipe';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { useAuth } from '@/lib/auth/auth-context';
|
||||||
|
import { formatDateTime } from '@/lib/format';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
|
||||||
|
export default function EquipePage() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { user } = useAuth();
|
||||||
|
const meuId = user?.sub;
|
||||||
|
|
||||||
|
const { data: equipe, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'equipe'],
|
||||||
|
queryFn: listEquipe,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [formOpen, setFormOpen] = React.useState(false);
|
||||||
|
const [created, setCreated] = React.useState<EquipeUserCreated | null>(null);
|
||||||
|
const [changingRole, setChangingRole] = React.useState<EquipeUser | null>(null);
|
||||||
|
const [togglingAtivo, setTogglingAtivo] = React.useState<EquipeUser | null>(null);
|
||||||
|
|
||||||
|
const createForm = useForm<CreateEquipeUserFormValues>({
|
||||||
|
resolver: zodResolver(createEquipeUserSchema),
|
||||||
|
defaultValues: { nome: '', email: '', role: 'vendedor', senha: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
createForm.reset({ nome: '', email: '', role: 'vendedor', senha: '' });
|
||||||
|
setFormOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const createMutation = useMutation({
|
||||||
|
mutationFn: (values: CreateEquipeUserFormValues) =>
|
||||||
|
createEquipeUser({
|
||||||
|
nome: values.nome,
|
||||||
|
email: values.email,
|
||||||
|
role: values.role,
|
||||||
|
senha: values.senha || undefined,
|
||||||
|
}),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'equipe'] });
|
||||||
|
setFormOpen(false);
|
||||||
|
setCreated(result);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível criar o usuário.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
async function copySenha() {
|
||||||
|
if (!created) return;
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(created.senha_provisoria);
|
||||||
|
toast.success('Senha copiada.');
|
||||||
|
} catch {
|
||||||
|
toast.error('Não foi possível copiar automaticamente — selecione e copie manualmente.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const roleForm = useForm<UpdateEquipeRoleFormValues>({
|
||||||
|
resolver: zodResolver(updateEquipeRoleSchema),
|
||||||
|
});
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (changingRole) roleForm.reset({ role: changingRole.role });
|
||||||
|
}, [changingRole, roleForm]);
|
||||||
|
|
||||||
|
const roleMutation = useMutation({
|
||||||
|
mutationFn: (values: UpdateEquipeRoleFormValues) =>
|
||||||
|
updateEquipeUser(changingRole!.id, { role: values.role as EquipeUser['role'] }),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'equipe'] });
|
||||||
|
toast.success('Papel atualizado.');
|
||||||
|
setChangingRole(null);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível alterar o papel.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggleAtivoMutation = useMutation({
|
||||||
|
mutationFn: (target: EquipeUser) => updateEquipeUser(target.id, { ativo: !target.ativo }),
|
||||||
|
onSuccess: (_, target) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'equipe'] });
|
||||||
|
toast.success(target.ativo ? 'Usuário desativado.' : 'Usuário reativado.');
|
||||||
|
setTogglingAtivo(null);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível atualizar o usuário.');
|
||||||
|
setTogglingAtivo(null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<EquipeUser>[] = [
|
||||||
|
{ id: 'nome', header: 'Nome', primary: true, cell: (row) => row.nome },
|
||||||
|
{ id: 'email', header: 'E-mail', primary: true, cell: (row) => row.email },
|
||||||
|
{ id: 'role', header: 'Papel', cell: (row) => EQUIPE_ROLE_LABEL[row.role] },
|
||||||
|
{
|
||||||
|
id: 'ativo',
|
||||||
|
header: 'Status',
|
||||||
|
cell: (row) => (
|
||||||
|
<Badge variant={row.ativo ? 'default' : 'outline'}>{row.ativo ? 'Ativo' : 'Inativo'}</Badge>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'criado_em',
|
||||||
|
header: 'Criado em',
|
||||||
|
hideOnMobileCard: true,
|
||||||
|
cell: (row) => formatDateTime(row.criado_em),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Equipe</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Usuários com acesso ao painel deste tenant</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={openCreate}>
|
||||||
|
<Plus /> Nova pessoa
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={equipe ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhum usuário cadastrado"
|
||||||
|
emptyAction={
|
||||||
|
<Button size="sm" onClick={openCreate}>
|
||||||
|
Nova pessoa
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
rowActions={(row) => {
|
||||||
|
const isSelf = row.id === meuId;
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
disabled={isSelf}
|
||||||
|
title={isSelf ? 'Não é possível alterar o próprio papel' : undefined}
|
||||||
|
onClick={() => setChangingRole(row)}
|
||||||
|
>
|
||||||
|
Alterar papel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
disabled={isSelf}
|
||||||
|
title={isSelf ? 'Não é possível desativar o próprio usuário' : undefined}
|
||||||
|
onClick={() => setTogglingAtivo(row)}
|
||||||
|
>
|
||||||
|
{row.ativo ? 'Desativar' : 'Reativar'}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={formOpen}
|
||||||
|
onOpenChange={setFormOpen}
|
||||||
|
title="Nova pessoa"
|
||||||
|
description="Cria um novo acesso ao painel deste tenant."
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => setFormOpen(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
loading={createMutation.isPending}
|
||||||
|
onClick={createForm.handleSubmit((values) => createMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
Criar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0"
|
||||||
|
onSubmit={createForm.handleSubmit((values) => createMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<FormField label="Nome" error={createForm.formState.errors.nome?.message} required>
|
||||||
|
<Input {...createForm.register('nome')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="E-mail" error={createForm.formState.errors.email?.message} required>
|
||||||
|
<Input type="email" {...createForm.register('email')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Papel" id="role" error={createForm.formState.errors.role?.message} required>
|
||||||
|
<Select
|
||||||
|
value={createForm.watch('role')}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
createForm.setValue('role', value as CreateEquipeUserFormValues['role'], {
|
||||||
|
shouldValidate: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="role" className="w-full">
|
||||||
|
<SelectValue placeholder="Selecione um papel" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{EQUIPE_ROLES.map((role) => (
|
||||||
|
<SelectItem key={role} value={role}>
|
||||||
|
{EQUIPE_ROLE_LABEL[role]}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
<FormField
|
||||||
|
label="Senha provisória"
|
||||||
|
helpText="Deixe em branco para o sistema gerar uma senha automaticamente"
|
||||||
|
error={createForm.formState.errors.senha?.message}
|
||||||
|
>
|
||||||
|
<Input type="text" autoComplete="off" {...createForm.register('senha')} />
|
||||||
|
</FormField>
|
||||||
|
</form>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={created !== null}
|
||||||
|
onOpenChange={(open) => !open && setCreated(null)}
|
||||||
|
title="Usuário criado com sucesso"
|
||||||
|
description="Copie e repasse a senha provisória à pessoa agora — ela não será mostrada novamente."
|
||||||
|
footer={
|
||||||
|
<Button className="w-full" onClick={() => setCreated(null)}>
|
||||||
|
Concluir
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{created && (
|
||||||
|
<div className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">Usuário</p>
|
||||||
|
<p className="font-medium text-foreground">
|
||||||
|
{created.nome} · {created.email} · {EQUIPE_ROLE_LABEL[created.role]}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<p className="text-sm font-medium text-foreground">Senha provisória</p>
|
||||||
|
<div className="flex items-center gap-2 rounded-lg border border-warning/30 bg-warning/10 p-3">
|
||||||
|
<code className="flex-1 font-mono text-base font-semibold text-foreground select-all">
|
||||||
|
{created.senha_provisoria}
|
||||||
|
</code>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
onClick={copySenha}
|
||||||
|
aria-label="Copiar senha"
|
||||||
|
>
|
||||||
|
<Copy className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-warning">
|
||||||
|
Atenção: esta senha não fica salva em texto puro em nenhum lugar e não será exibida
|
||||||
|
novamente. Copie e repasse à pessoa agora.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ResponsiveDialog>
|
||||||
|
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={changingRole !== null}
|
||||||
|
onOpenChange={(open) => !open && setChangingRole(null)}
|
||||||
|
title={`Alterar papel — ${changingRole?.nome ?? ''}`}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => setChangingRole(null)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
loading={roleMutation.isPending}
|
||||||
|
onClick={roleForm.handleSubmit((values) => roleMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
Salvar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0">
|
||||||
|
<FormField label="Papel" id="changing-role">
|
||||||
|
<Select
|
||||||
|
value={roleForm.watch('role')}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
roleForm.setValue('role', value as UpdateEquipeRoleFormValues['role'], {
|
||||||
|
shouldValidate: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="changing-role" className="w-full">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{EQUIPE_ROLES.map((role) => (
|
||||||
|
<SelectItem key={role} value={role}>
|
||||||
|
{EQUIPE_ROLE_LABEL[role]}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={togglingAtivo !== null}
|
||||||
|
onOpenChange={(open) => !open && setTogglingAtivo(null)}
|
||||||
|
title={togglingAtivo?.ativo ? `Desativar ${togglingAtivo.nome}?` : `Reativar ${togglingAtivo?.nome}?`}
|
||||||
|
description={
|
||||||
|
togglingAtivo?.ativo
|
||||||
|
? 'A pessoa perde acesso imediatamente — as sessões abertas são revogadas.'
|
||||||
|
: 'A pessoa volta a ter acesso ao painel com as mesmas credenciais.'
|
||||||
|
}
|
||||||
|
confirmLabel={togglingAtivo?.ativo ? 'Desativar' : 'Reativar'}
|
||||||
|
destructive={togglingAtivo?.ativo}
|
||||||
|
loading={toggleAtivoMutation.isPending}
|
||||||
|
onConfirm={() => togglingAtivo && toggleAtivoMutation.mutate(togglingAtivo)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { cookies } from 'next/headers';
|
||||||
|
|
||||||
|
import { TenantShell } from '@/components/layout/tenant-shell';
|
||||||
|
import { SIDEBAR_COOKIE, readSidebarCollapsedCookie } from '@/lib/layout/sidebar-cookie';
|
||||||
|
|
||||||
|
export default async function TenantLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
const cookieStore = await cookies();
|
||||||
|
const collapsed = readSidebarCollapsedCookie(cookieStore.get(SIDEBAR_COOKIE)?.value);
|
||||||
|
|
||||||
|
return <TenantShell initialCollapsed={collapsed}>{children}</TenantShell>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,332 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Trash2, Upload } from 'lucide-react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
getTenantProfile,
|
||||||
|
removeTenantLogo,
|
||||||
|
updateTenantCor,
|
||||||
|
updateTenantProfile,
|
||||||
|
uploadTenantLogo,
|
||||||
|
} from '@/lib/api/tenant-profile';
|
||||||
|
import {
|
||||||
|
updateTenantCorSchema,
|
||||||
|
updateTenantProfileSchema,
|
||||||
|
type UpdateTenantCorFormValues,
|
||||||
|
type UpdateTenantProfileFormValues,
|
||||||
|
} from '@/lib/validators/tenant-profile';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { resolveAssetUrl } from '@/lib/api/asset-url';
|
||||||
|
import { ensureAccessibleTextColor } from '@/lib/theme/contrast';
|
||||||
|
import { useTenantTheme } from '@/lib/theme/theme-provider';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
|
||||||
|
const TAMANHO_MAXIMO_LOGO_BYTES = 2 * 1024 * 1024;
|
||||||
|
const TIPOS_LOGO_ACEITOS = ['image/png', 'image/jpeg', 'image/svg+xml'];
|
||||||
|
|
||||||
|
export default function PerfilPage() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { applyThemeUpdate } = useTenantTheme();
|
||||||
|
|
||||||
|
const { data: perfil, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'perfil'],
|
||||||
|
queryFn: getTenantProfile,
|
||||||
|
});
|
||||||
|
|
||||||
|
const dadosForm = useForm<UpdateTenantProfileFormValues>({
|
||||||
|
resolver: zodResolver(updateTenantProfileSchema),
|
||||||
|
values: perfil
|
||||||
|
? { nome_fantasia: perfil.nome_fantasia ?? '', razao_social: perfil.razao_social ?? '' }
|
||||||
|
: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
const dadosMutation = useMutation({
|
||||||
|
mutationFn: (values: UpdateTenantProfileFormValues) => updateTenantProfile(values),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
queryClient.setQueryData(['tenant', 'perfil'], result);
|
||||||
|
applyThemeUpdate({ nome: result.nome_fantasia ?? result.razao_social ?? undefined });
|
||||||
|
toast.success('Dados da empresa atualizados.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar os dados.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- Logo ---
|
||||||
|
const fileInputRef = React.useRef<HTMLInputElement | null>(null);
|
||||||
|
const [previewUrl, setPreviewUrl] = React.useState<string | null>(null);
|
||||||
|
const [removingLogo, setRemovingLogo] = React.useState(false);
|
||||||
|
|
||||||
|
const uploadMutation = useMutation({
|
||||||
|
mutationFn: (file: File) => uploadTenantLogo(file),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
queryClient.setQueryData(['tenant', 'perfil'], (prev: typeof perfil) =>
|
||||||
|
prev ? { ...prev, logo_url: result.logo_url } : prev,
|
||||||
|
);
|
||||||
|
applyThemeUpdate({ logoUrl: resolveAssetUrl(result.logo_url) });
|
||||||
|
toast.success('Logo atualizada.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível enviar a logo.');
|
||||||
|
},
|
||||||
|
onSettled: () => {
|
||||||
|
setPreviewUrl((prev) => {
|
||||||
|
if (prev) URL.revokeObjectURL(prev);
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const removeLogoMutation = useMutation({
|
||||||
|
mutationFn: removeTenantLogo,
|
||||||
|
onSuccess: (result) => {
|
||||||
|
queryClient.setQueryData(['tenant', 'perfil'], (prev: typeof perfil) =>
|
||||||
|
prev ? { ...prev, logo_url: result.logo_url } : prev,
|
||||||
|
);
|
||||||
|
applyThemeUpdate({ logoUrl: null });
|
||||||
|
toast.success('Logo removida — voltou ao padrão da plataforma.');
|
||||||
|
setRemovingLogo(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível remover a logo.');
|
||||||
|
setRemovingLogo(false);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function onSelectLogoFile(event: React.ChangeEvent<HTMLInputElement>) {
|
||||||
|
const file = event.target.files?.[0];
|
||||||
|
event.target.value = '';
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
if (!TIPOS_LOGO_ACEITOS.includes(file.type)) {
|
||||||
|
toast.error('Formato não suportado — envie um arquivo PNG, JPG ou SVG.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (file.size > TAMANHO_MAXIMO_LOGO_BYTES) {
|
||||||
|
toast.error('Arquivo maior que 2MB — escolha uma imagem menor.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setPreviewUrl(URL.createObjectURL(file));
|
||||||
|
uploadMutation.mutate(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
const logoSrc = previewUrl ?? resolveAssetUrl(perfil?.logo_url);
|
||||||
|
|
||||||
|
// --- Cor primária ---
|
||||||
|
const corForm = useForm<UpdateTenantCorFormValues>({
|
||||||
|
resolver: zodResolver(updateTenantCorSchema),
|
||||||
|
values: perfil ? { cor_primaria: perfil.cor_primaria ?? '#2563EB' } : undefined,
|
||||||
|
});
|
||||||
|
const corAtual = corForm.watch('cor_primaria') || '#2563EB';
|
||||||
|
const corValida = /^#[0-9A-Fa-f]{6}$/.test(corAtual);
|
||||||
|
|
||||||
|
const corMutation = useMutation({
|
||||||
|
mutationFn: (values: UpdateTenantCorFormValues) => updateTenantCor(values.cor_primaria),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
queryClient.setQueryData(['tenant', 'perfil'], (prev: typeof perfil) =>
|
||||||
|
prev ? { ...prev, cor_primaria: result.cor_primaria } : prev,
|
||||||
|
);
|
||||||
|
applyThemeUpdate({ corPrimaria: result.cor_primaria });
|
||||||
|
toast.success('Cor primária atualizada.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar a cor.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Perfil da empresa</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Dados cadastrais e identidade visual usados em toda a aplicação
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card className="max-w-xl">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Dados da empresa</CardTitle>
|
||||||
|
<CardDescription>Nome fantasia e razão social exibidos no sistema.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<Skeleton className="h-11 w-full" />
|
||||||
|
<Skeleton className="h-11 w-full" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
onSubmit={dadosForm.handleSubmit((values) => dadosMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
label="Nome fantasia"
|
||||||
|
error={dadosForm.formState.errors.nome_fantasia?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Input {...dadosForm.register('nome_fantasia')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField
|
||||||
|
label="Razão social"
|
||||||
|
error={dadosForm.formState.errors.razao_social?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Input {...dadosForm.register('razao_social')} />
|
||||||
|
</FormField>
|
||||||
|
<div>
|
||||||
|
<Button type="submit" loading={dadosMutation.isPending}>
|
||||||
|
Salvar dados
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="max-w-xl">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Logo</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
PNG, JPG ou SVG, até 2MB. Sem logo própria, a plataforma usa um ícone padrão.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-muted">
|
||||||
|
{logoSrc ? (
|
||||||
|
<Image
|
||||||
|
src={logoSrc}
|
||||||
|
alt="Logo do tenant"
|
||||||
|
width={80}
|
||||||
|
height={80}
|
||||||
|
unoptimized={previewUrl !== null}
|
||||||
|
className="size-20 object-contain"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<span className="text-xs text-muted-foreground">Sem logo</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
accept="image/png,image/jpeg,image/svg+xml"
|
||||||
|
className="hidden"
|
||||||
|
onChange={onSelectLogoFile}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
loading={uploadMutation.isPending}
|
||||||
|
onClick={() => fileInputRef.current?.click()}
|
||||||
|
>
|
||||||
|
<Upload /> Enviar logo
|
||||||
|
</Button>
|
||||||
|
{perfil?.logo_url && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setRemovingLogo(true)}
|
||||||
|
>
|
||||||
|
<Trash2 /> Remover logo
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="max-w-xl">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Cor primária</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Aplicada na sidebar, botões e destaques em toda a aplicação, com ajuste automático de
|
||||||
|
contraste quando necessário.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
onSubmit={corForm.handleSubmit((values) => corMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
label="Cor"
|
||||||
|
error={corForm.formState.errors.cor_primaria?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
aria-label="Selecionar cor primária"
|
||||||
|
className="size-11 shrink-0 cursor-pointer rounded-lg border border-input bg-transparent p-1"
|
||||||
|
value={corValida ? corAtual : '#2563EB'}
|
||||||
|
onChange={(e) =>
|
||||||
|
corForm.setValue('cor_primaria', e.target.value.toUpperCase(), {
|
||||||
|
shouldValidate: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
className="max-w-40 font-mono uppercase"
|
||||||
|
placeholder="#2563EB"
|
||||||
|
{...corForm.register('cor_primaria')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
{corValida && (
|
||||||
|
<div className="flex flex-col gap-2 rounded-lg border border-border p-4">
|
||||||
|
<p className="text-xs font-medium text-muted-foreground">Pré-visualização</p>
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<span
|
||||||
|
className="inline-flex h-11 items-center rounded-lg px-4 text-sm font-medium text-white"
|
||||||
|
style={{ backgroundColor: corAtual }}
|
||||||
|
>
|
||||||
|
Botão de exemplo
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className="text-sm font-medium"
|
||||||
|
style={{ color: ensureAccessibleTextColor(corAtual) }}
|
||||||
|
>
|
||||||
|
Texto/ícone sobre fundo claro
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Button type="submit" loading={corMutation.isPending} disabled={!corValida}>
|
||||||
|
Salvar cor
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={removingLogo}
|
||||||
|
onOpenChange={setRemovingLogo}
|
||||||
|
title="Remover logo?"
|
||||||
|
description="A identidade visual volta a usar o ícone padrão da plataforma."
|
||||||
|
confirmLabel="Remover"
|
||||||
|
destructive
|
||||||
|
loading={removeLogoMutation.isPending}
|
||||||
|
onConfirm={() => removeLogoMutation.mutate()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useParams, useRouter } from 'next/navigation';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import { deactivateProduct, getProduct, updateProduct } from '@/lib/api/products';
|
||||||
|
import type { ProductFormValues } from '@/lib/validators/products';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import { ProductForm } from '@/components/domain/product-form';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
|
||||||
|
export default function ProdutoDetalhePage() {
|
||||||
|
const params = useParams<{ id: string }>();
|
||||||
|
const productId = params.id;
|
||||||
|
const router = useRouter();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [deactivateOpen, setDeactivateOpen] = React.useState(false);
|
||||||
|
|
||||||
|
const { data: product, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'produtos', productId],
|
||||||
|
queryFn: () => getProduct(productId),
|
||||||
|
});
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (values: ProductFormValues) =>
|
||||||
|
updateProduct(productId, {
|
||||||
|
...values,
|
||||||
|
sku: values.sku || undefined,
|
||||||
|
descricao: values.descricao || undefined,
|
||||||
|
unidade: values.unidade || undefined,
|
||||||
|
}),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'produtos', productId] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'produtos'] });
|
||||||
|
toast.success('Produto atualizado.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar as alterações.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deactivateMutation = useMutation({
|
||||||
|
mutationFn: () => deactivateProduct(productId),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'produtos', productId] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'produtos'] });
|
||||||
|
toast.success('Produto desativado.');
|
||||||
|
setDeactivateOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível desativar o produto.');
|
||||||
|
setDeactivateOpen(false);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading || !product) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<Skeleton className="h-8 w-64" />
|
||||||
|
<Skeleton className="h-64 w-full" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">{product.nome}</h1>
|
||||||
|
<Badge variant={product.ativo ? 'default' : 'outline'}>{product.ativo ? 'Ativo' : 'Inativo'}</Badge>
|
||||||
|
</div>
|
||||||
|
{product.ativo && (
|
||||||
|
<Button variant="outline" onClick={() => setDeactivateOpen(true)}>
|
||||||
|
Desativar
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ProductForm
|
||||||
|
defaultValues={{
|
||||||
|
tipo: product.tipo,
|
||||||
|
nome: product.nome,
|
||||||
|
descricao: product.descricao ?? '',
|
||||||
|
sku: product.sku ?? '',
|
||||||
|
valor_venda: Number(product.valor_venda),
|
||||||
|
valor_custo: product.valor_custo ? Number(product.valor_custo) : undefined,
|
||||||
|
unidade: product.unidade,
|
||||||
|
recorrente: product.recorrente,
|
||||||
|
}}
|
||||||
|
onSubmit={(values) => saveMutation.mutate(values)}
|
||||||
|
onCancel={() => router.push('/app/produtos')}
|
||||||
|
submitting={saveMutation.isPending}
|
||||||
|
submitLabel="Salvar alterações"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={deactivateOpen}
|
||||||
|
onOpenChange={setDeactivateOpen}
|
||||||
|
title="Desativar produto?"
|
||||||
|
description="O item sai das listagens de ativos, mas o histórico de vendas continua íntegro."
|
||||||
|
confirmLabel="Desativar"
|
||||||
|
destructive
|
||||||
|
loading={deactivateMutation.isPending}
|
||||||
|
onConfirm={() => deactivateMutation.mutate()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useMutation } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import { createProduct } from '@/lib/api/products';
|
||||||
|
import type { ProductFormValues } from '@/lib/validators/products';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
import { ProductForm } from '@/components/domain/product-form';
|
||||||
|
|
||||||
|
export default function NovoProdutoPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: (values: ProductFormValues) =>
|
||||||
|
createProduct({
|
||||||
|
...values,
|
||||||
|
sku: values.sku || undefined,
|
||||||
|
descricao: values.descricao || undefined,
|
||||||
|
unidade: values.unidade || undefined,
|
||||||
|
}),
|
||||||
|
onSuccess: (product) => {
|
||||||
|
toast.success('Produto cadastrado.');
|
||||||
|
router.push(`/app/produtos/${product.id}`);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
// SKU duplicado (409) e limite de plano vêm com mensagem de negócio
|
||||||
|
// clara do backend — mostrada direto (Etapa 16, item 6).
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível cadastrar o produto.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Novo produto</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Cadastro de produto ou serviço</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ProductForm
|
||||||
|
defaultValues={{
|
||||||
|
tipo: 'produto',
|
||||||
|
nome: '',
|
||||||
|
descricao: '',
|
||||||
|
sku: '',
|
||||||
|
valor_venda: 0,
|
||||||
|
valor_custo: undefined,
|
||||||
|
unidade: '',
|
||||||
|
recorrente: false,
|
||||||
|
}}
|
||||||
|
onSubmit={(values) => mutation.mutate(values)}
|
||||||
|
onCancel={() => router.push('/app/produtos')}
|
||||||
|
submitting={mutation.isPending}
|
||||||
|
submitLabel="Cadastrar produto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,167 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Plus, Search } from 'lucide-react';
|
||||||
|
|
||||||
|
import { listProducts, type ItemTipo, type ProductService } from '@/lib/api/products';
|
||||||
|
import { formatCurrency } from '@/lib/format';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
|
||||||
|
const TIPO_OPTIONS: { value: ItemTipo | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Produtos e serviços' },
|
||||||
|
{ value: 'produto', label: 'Somente produtos' },
|
||||||
|
{ value: 'servico', label: 'Somente serviços' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const ATIVO_OPTIONS = [
|
||||||
|
{ value: 'todos', label: 'Ativos e inativos' },
|
||||||
|
{ value: 'true', label: 'Somente ativos' },
|
||||||
|
{ value: 'false', label: 'Somente inativos' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const LIMIT = 20;
|
||||||
|
|
||||||
|
export default function ProdutosPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [busca, setBusca] = React.useState('');
|
||||||
|
const [tipo, setTipo] = React.useState<ItemTipo | 'todos'>('todos');
|
||||||
|
const [ativo, setAtivo] = React.useState('true');
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'produtos', { busca, tipo, ativo, page }],
|
||||||
|
queryFn: () =>
|
||||||
|
listProducts({
|
||||||
|
busca: busca || undefined,
|
||||||
|
tipo: tipo === 'todos' ? undefined : tipo,
|
||||||
|
ativo: ativo === 'todos' ? undefined : ativo === 'true',
|
||||||
|
page,
|
||||||
|
limit: LIMIT,
|
||||||
|
}),
|
||||||
|
placeholderData: (prev) => prev,
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<ProductService>[] = [
|
||||||
|
{
|
||||||
|
id: 'nome',
|
||||||
|
header: 'Nome',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="font-medium text-foreground">{row.nome}</span>
|
||||||
|
{row.sku && <span className="text-xs text-muted-foreground">SKU {row.sku}</span>}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'tipo',
|
||||||
|
header: 'Tipo',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => <Badge variant="outline">{row.tipo === 'produto' ? 'Produto' : 'Serviço'}</Badge>,
|
||||||
|
},
|
||||||
|
{ id: 'valor', header: 'Valor de venda', cell: (row) => formatCurrency(row.valor_venda) },
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
cell: (row) => <Badge variant={row.ativo ? 'default' : 'outline'}>{row.ativo ? 'Ativo' : 'Inativo'}</Badge>,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Produtos e serviços</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Itens que você vende</p>
|
||||||
|
</div>
|
||||||
|
<Button asChild>
|
||||||
|
<Link href="/app/produtos/novo">
|
||||||
|
<Plus /> Novo produto
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||||
|
<div className="relative flex-1 sm:max-w-xs">
|
||||||
|
<Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-neutral-500" />
|
||||||
|
<Input
|
||||||
|
placeholder="Buscar por nome ou SKU..."
|
||||||
|
className="pl-9"
|
||||||
|
value={busca}
|
||||||
|
onChange={(e) => {
|
||||||
|
setBusca(e.target.value);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Select
|
||||||
|
value={tipo}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setTipo(value as ItemTipo | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-52" aria-label="Filtrar por tipo">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{TIPO_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select
|
||||||
|
value={ativo}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setAtivo(value);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-52" aria-label="Filtrar por status">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{ATIVO_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={data?.data ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhum produto encontrado"
|
||||||
|
emptyDescription="Ajuste os filtros ou cadastre um novo produto."
|
||||||
|
emptyAction={
|
||||||
|
<Button size="sm" asChild>
|
||||||
|
<Link href="/app/produtos/novo">Novo produto</Link>
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
onRowClick={(row) => router.push(`/app/produtos/${row.id}`)}
|
||||||
|
rowActions={(row) => (
|
||||||
|
<Button variant="ghost" size="sm" asChild>
|
||||||
|
<Link href={`/app/produtos/${row.id}`}>Ver</Link>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
pagination={
|
||||||
|
data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,299 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { RefreshCw } from 'lucide-react';
|
||||||
|
import type { DateRange } from 'react-day-picker';
|
||||||
|
|
||||||
|
import {
|
||||||
|
atualizarRecebimentosAtrasados,
|
||||||
|
listRecebimentos,
|
||||||
|
marcarRecebimentoPago,
|
||||||
|
type FormaPagamento,
|
||||||
|
type Recebimento,
|
||||||
|
} from '@/lib/api/sale-payments';
|
||||||
|
import { listCustomers } from '@/lib/api/customers';
|
||||||
|
import type { ParcelaStatus } from '@/lib/api/sales';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { formatCurrency, formatDate } from '@/lib/format';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Combobox } from '@/components/ui/combobox';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { DateRangePicker } from '@/components/ui/date-picker';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { StatusPill } from '@/components/ui/status-pill';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
import { MarcarPagoDialog } from '@/components/domain/marcar-pago-dialog';
|
||||||
|
|
||||||
|
const STATUS_OPTIONS: { value: ParcelaStatus | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os status' },
|
||||||
|
{ value: 'pendente', label: 'Pendente' },
|
||||||
|
{ value: 'atrasado', label: 'Atrasado' },
|
||||||
|
{ value: 'pago', label: 'Pago' },
|
||||||
|
{ value: 'cancelado', label: 'Cancelado' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const FORMAS: { value: FormaPagamento; label: string }[] = [
|
||||||
|
{ value: 'pix', label: 'Pix' },
|
||||||
|
{ value: 'boleto', label: 'Boleto' },
|
||||||
|
{ value: 'cartao', label: 'Cartão' },
|
||||||
|
{ value: 'dinheiro', label: 'Dinheiro' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const LIMIT = 20;
|
||||||
|
|
||||||
|
function invalidateAll(queryClient: ReturnType<typeof useQueryClient>) {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'recebimentos'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'vendas'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'dashboard'] });
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RecebimentosPage() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [status, setStatus] = React.useState<ParcelaStatus | 'todos'>('todos');
|
||||||
|
const [customerId, setCustomerId] = React.useState('');
|
||||||
|
const [periodo, setPeriodo] = React.useState<DateRange | undefined>();
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
const [payingParcela, setPayingParcela] = React.useState<{ id: string; valor: string } | null>(null);
|
||||||
|
const [selected, setSelected] = React.useState<Set<string>>(new Set());
|
||||||
|
const [bulkForma, setBulkForma] = React.useState<FormaPagamento | ''>('');
|
||||||
|
const [bulkOpen, setBulkOpen] = React.useState(false);
|
||||||
|
const [bulkLoading, setBulkLoading] = React.useState(false);
|
||||||
|
const [atualizarOpen, setAtualizarOpen] = React.useState(false);
|
||||||
|
|
||||||
|
const { data: customersData } = useQuery({
|
||||||
|
queryKey: ['tenant', 'customers', 'combobox'],
|
||||||
|
queryFn: () => listCustomers({ limit: 100 }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: [
|
||||||
|
'tenant',
|
||||||
|
'recebimentos',
|
||||||
|
{ status, customerId, de: periodo?.from?.toISOString(), ate: periodo?.to?.toISOString(), page },
|
||||||
|
],
|
||||||
|
queryFn: () =>
|
||||||
|
listRecebimentos({
|
||||||
|
status: status === 'todos' ? undefined : status,
|
||||||
|
customer_id: customerId || undefined,
|
||||||
|
vencimento_inicio: periodo?.from?.toISOString().slice(0, 10),
|
||||||
|
vencimento_fim: periodo?.to?.toISOString().slice(0, 10),
|
||||||
|
page,
|
||||||
|
limit: LIMIT,
|
||||||
|
}),
|
||||||
|
placeholderData: (prev) => prev,
|
||||||
|
});
|
||||||
|
|
||||||
|
const atualizarMutation = useMutation({
|
||||||
|
mutationFn: () => atualizarRecebimentosAtrasados(),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
invalidateAll(queryClient);
|
||||||
|
toast.success(`${result.atualizadas} parcela(s) marcadas como atrasadas.`);
|
||||||
|
setAtualizarOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível atualizar as parcelas atrasadas.');
|
||||||
|
setAtualizarOpen(false);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function toggleSelected(id: string) {
|
||||||
|
setSelected((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(id)) next.delete(id);
|
||||||
|
else next.add(id);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function marcarSelecionadasPagas() {
|
||||||
|
if (!bulkForma) return;
|
||||||
|
setBulkLoading(true);
|
||||||
|
const ids = Array.from(selected);
|
||||||
|
const results = await Promise.allSettled(ids.map((id) => marcarRecebimentoPago(id, bulkForma)));
|
||||||
|
const falhas = results.filter((r) => r.status === 'rejected').length;
|
||||||
|
setBulkLoading(false);
|
||||||
|
setBulkOpen(false);
|
||||||
|
setSelected(new Set());
|
||||||
|
setBulkForma('');
|
||||||
|
invalidateAll(queryClient);
|
||||||
|
if (falhas === 0) {
|
||||||
|
toast.success(`${ids.length} parcela(s) marcadas como pagas.`);
|
||||||
|
} else {
|
||||||
|
toast.error(`${ids.length - falhas} de ${ids.length} marcadas como pagas — ${falhas} falharam.`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const customerOptions = [
|
||||||
|
{ value: '', label: 'Todos os clientes' },
|
||||||
|
...(customersData?.data ?? []).map((c) => ({ value: c.id, label: c.nome_fantasia || c.razao_social })),
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: DataTableColumn<Recebimento>[] = [
|
||||||
|
{
|
||||||
|
id: 'select',
|
||||||
|
header: '',
|
||||||
|
hideOnMobileCard: true,
|
||||||
|
cell: (row) =>
|
||||||
|
row.status === 'pendente' || row.status === 'atrasado' ? (
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="size-4 accent-primary"
|
||||||
|
checked={selected.has(row.id)}
|
||||||
|
onChange={() => toggleSelected(row.id)}
|
||||||
|
aria-label={`Selecionar parcela de ${row.sale.customer.razao_social}`}
|
||||||
|
/>
|
||||||
|
) : null,
|
||||||
|
className: 'w-px',
|
||||||
|
},
|
||||||
|
{ id: 'cliente', header: 'Cliente', primary: true, cell: (row) => row.sale.customer.razao_social },
|
||||||
|
{
|
||||||
|
id: 'venda',
|
||||||
|
header: 'Venda',
|
||||||
|
cell: (row) => `#${row.sale.numero_venda} · parcela ${row.numero_parcela}`,
|
||||||
|
},
|
||||||
|
{ id: 'valor', header: 'Valor', primary: true, cell: (row) => formatCurrency(row.valor) },
|
||||||
|
{
|
||||||
|
id: 'vencimento',
|
||||||
|
header: 'Vencimento',
|
||||||
|
cell: (row) => (
|
||||||
|
<span className={cn(row.status === 'atrasado' && 'font-medium text-danger')}>{formatDate(row.vencimento)}</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ id: 'status', header: 'Status', cell: (row) => <StatusPill status={row.status} /> },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Recebimentos</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Parcelas de vendas a receber</p>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" onClick={() => setAtualizarOpen(true)}>
|
||||||
|
<RefreshCw /> Atualizar atrasadas
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||||
|
<Select
|
||||||
|
value={status}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setStatus(value as ParcelaStatus | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-48" aria-label="Filtrar por status">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{STATUS_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Combobox
|
||||||
|
options={customerOptions}
|
||||||
|
value={customerId}
|
||||||
|
onChange={(value) => {
|
||||||
|
setCustomerId(value);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
placeholder="Todos os clientes"
|
||||||
|
searchPlaceholder="Buscar cliente..."
|
||||||
|
className="w-full sm:w-56"
|
||||||
|
/>
|
||||||
|
<DateRangePicker
|
||||||
|
value={periodo}
|
||||||
|
onChange={(range) => {
|
||||||
|
setPeriodo(range);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
placeholder="Período de vencimento"
|
||||||
|
className="w-full sm:w-64"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selected.size > 0 && (
|
||||||
|
<div className="flex flex-wrap items-center gap-3 rounded-lg border border-primary/30 bg-primary/5 p-3">
|
||||||
|
<span className="text-sm font-medium text-foreground">{selected.size} selecionada(s)</span>
|
||||||
|
<Button size="sm" onClick={() => setBulkOpen(true)}>
|
||||||
|
Marcar selecionadas como pagas
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="ghost" onClick={() => setSelected(new Set())}>
|
||||||
|
Limpar seleção
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={data?.data ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhum recebimento encontrado"
|
||||||
|
emptyDescription="Ajuste os filtros de status/cliente/período."
|
||||||
|
rowActions={(row) =>
|
||||||
|
row.status === 'pendente' || row.status === 'atrasado' ? (
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setPayingParcela(row)}>
|
||||||
|
Marcar como paga
|
||||||
|
</Button>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
pagination={
|
||||||
|
data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<MarcarPagoDialog
|
||||||
|
parcela={payingParcela}
|
||||||
|
onOpenChange={(open) => !open && setPayingParcela(null)}
|
||||||
|
onSuccess={() => invalidateAll(queryClient)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={atualizarOpen}
|
||||||
|
onOpenChange={setAtualizarOpen}
|
||||||
|
title="Atualizar parcelas atrasadas?"
|
||||||
|
description="Marca como atrasada toda parcela pendente já vencida."
|
||||||
|
confirmLabel="Atualizar"
|
||||||
|
loading={atualizarMutation.isPending}
|
||||||
|
onConfirm={() => atualizarMutation.mutate()}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={bulkOpen}
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
setBulkOpen(open);
|
||||||
|
if (!open) setBulkForma('');
|
||||||
|
}}
|
||||||
|
title={`Marcar ${selected.size} parcela(s) como pagas?`}
|
||||||
|
description="Selecione a forma de pagamento usada em todas as parcelas selecionadas."
|
||||||
|
confirmLabel="Confirmar"
|
||||||
|
confirmDisabled={!bulkForma}
|
||||||
|
loading={bulkLoading}
|
||||||
|
onConfirm={marcarSelecionadasPagas}
|
||||||
|
>
|
||||||
|
<div className="px-4 pb-4 sm:px-0 sm:pb-0">
|
||||||
|
<Select value={bulkForma} onValueChange={(value) => setBulkForma(value as FormaPagamento)}>
|
||||||
|
<SelectTrigger className="w-full" aria-label="Forma de pagamento">
|
||||||
|
<SelectValue placeholder="Selecione a forma de pagamento" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{FORMAS.map((f) => (
|
||||||
|
<SelectItem key={f.value} value={f.value}>
|
||||||
|
{f.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</ConfirmDialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,301 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useParams, useRouter } from 'next/navigation';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import {
|
||||||
|
changeSaleStatus,
|
||||||
|
getSale,
|
||||||
|
updateSale,
|
||||||
|
TRANSICOES_VALIDAS,
|
||||||
|
type SaleInput,
|
||||||
|
type SaleListItem,
|
||||||
|
type VendaStatus,
|
||||||
|
} from '@/lib/api/sales';
|
||||||
|
import type { SaleFormValues } from '@/lib/validators/sales';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { formatCurrency, formatDate, formatDateTime } from '@/lib/format';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { EmptyState } from '@/components/ui/empty-state';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import { StatusPill } from '@/components/ui/status-pill';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
import { MarcarPagoDialog } from '@/components/domain/marcar-pago-dialog';
|
||||||
|
import { VendaForm } from '@/components/domain/venda-form';
|
||||||
|
|
||||||
|
function saleToFormValues(sale: SaleListItem): SaleFormValues {
|
||||||
|
return {
|
||||||
|
customer_id: sale.customer_id,
|
||||||
|
data_venda: sale.data_venda.slice(0, 10),
|
||||||
|
desconto: Number(sale.desconto),
|
||||||
|
observacoes: sale.observacoes ?? '',
|
||||||
|
itens: sale.itens.map((item) => ({
|
||||||
|
product_service_id: item.product_service_id,
|
||||||
|
nome: item.produto.nome,
|
||||||
|
quantidade: Number(item.quantidade),
|
||||||
|
valor_unitario: Number(item.valor_unitario),
|
||||||
|
valor_catalogo: Number(item.produto.valor_venda),
|
||||||
|
})),
|
||||||
|
modoParcelas: 'manual',
|
||||||
|
numeroParcelas: sale.parcelas.length || 1,
|
||||||
|
parcelasManuais: sale.parcelas.map((p) => ({ valor: Number(p.valor), vencimento: p.vencimento.slice(0, 10) })),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function invalidateSaleQueries(
|
||||||
|
queryClient: ReturnType<typeof useQueryClient>,
|
||||||
|
saleId: string,
|
||||||
|
) {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'vendas', saleId] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'vendas'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'recebimentos'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'dashboard'] });
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function VendaDetalhePage() {
|
||||||
|
const params = useParams<{ id: string }>();
|
||||||
|
const saleId = params.id;
|
||||||
|
const router = useRouter();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [cancelOpen, setCancelOpen] = React.useState(false);
|
||||||
|
const [concludeOpen, setConcludeOpen] = React.useState(false);
|
||||||
|
const [payingParcela, setPayingParcela] = React.useState<{ id: string; valor: string } | null>(null);
|
||||||
|
|
||||||
|
const { data: sale, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'vendas', saleId],
|
||||||
|
queryFn: () => getSale(saleId),
|
||||||
|
});
|
||||||
|
|
||||||
|
const statusMutation = useMutation({
|
||||||
|
mutationFn: (status: Exclude<VendaStatus, 'orcamento'>) => changeSaleStatus(saleId, status),
|
||||||
|
onSuccess: () => {
|
||||||
|
invalidateSaleQueries(queryClient, saleId);
|
||||||
|
toast.success('Status da venda atualizado.');
|
||||||
|
setCancelOpen(false);
|
||||||
|
setConcludeOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível atualizar o status.');
|
||||||
|
setCancelOpen(false);
|
||||||
|
setConcludeOpen(false);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateMutation = useMutation({
|
||||||
|
mutationFn: (input: SaleInput) => updateSale(saleId, input),
|
||||||
|
onSuccess: () => {
|
||||||
|
invalidateSaleQueries(queryClient, saleId);
|
||||||
|
toast.success('Venda atualizada.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar as alterações.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading || !sale) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<Skeleton className="h-8 w-64" />
|
||||||
|
<Skeleton className="h-64 w-full" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const transicoesDisponiveis = TRANSICOES_VALIDAS[sale.status];
|
||||||
|
const podeConfirmar = transicoesDisponiveis.includes('confirmada');
|
||||||
|
const podeConcluir = transicoesDisponiveis.includes('concluida');
|
||||||
|
const podeCancelar = transicoesDisponiveis.includes('cancelada');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Venda #{sale.numero_venda}</h1>
|
||||||
|
<StatusPill status={sale.status} />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{sale.customer.razao_social} · {formatDate(sale.data_venda)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{podeConfirmar && (
|
||||||
|
<Button onClick={() => statusMutation.mutate('confirmada')} loading={statusMutation.isPending}>
|
||||||
|
Confirmar venda
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{podeConcluir && (
|
||||||
|
<Button variant="outline" onClick={() => setConcludeOpen(true)}>
|
||||||
|
Concluir venda
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{podeCancelar && (
|
||||||
|
<Button variant="outline" onClick={() => setCancelOpen(true)}>
|
||||||
|
Cancelar venda
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tabs defaultValue="itens">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="itens">Itens</TabsTrigger>
|
||||||
|
<TabsTrigger value="parcelas">Parcelas</TabsTrigger>
|
||||||
|
<TabsTrigger value="historico">Histórico</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="itens" className="pt-4">
|
||||||
|
{sale.status === 'orcamento' ? (
|
||||||
|
<VendaForm
|
||||||
|
mode="edit"
|
||||||
|
defaultValues={saleToFormValues(sale)}
|
||||||
|
submittingConfirmOrSave={updateMutation.isPending}
|
||||||
|
onConfirmOrSave={(input) => updateMutation.mutate(input)}
|
||||||
|
onCancel={() => router.push('/app/vendas')}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<ItensReadOnly sale={sale} />
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="parcelas" className="pt-4">
|
||||||
|
<ParcelasTab sale={sale} onMarcarPago={setPayingParcela} />
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="historico" className="pt-4">
|
||||||
|
<EmptyState
|
||||||
|
title="Histórico não disponível nesta versão"
|
||||||
|
description="O backend ainda não expõe um endpoint de auditoria (audit_logs) para consulta pelo tenant — só registra internamente."
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={cancelOpen}
|
||||||
|
onOpenChange={setCancelOpen}
|
||||||
|
title="Cancelar venda?"
|
||||||
|
description="Isso cancela todas as parcelas pendentes/atrasadas desta venda. Parcelas já pagas não são estornadas."
|
||||||
|
confirmLabel="Cancelar venda"
|
||||||
|
destructive
|
||||||
|
loading={statusMutation.isPending}
|
||||||
|
onConfirm={() => statusMutation.mutate('cancelada')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={concludeOpen}
|
||||||
|
onOpenChange={setConcludeOpen}
|
||||||
|
title="Concluir venda?"
|
||||||
|
description="Marca a venda como concluída — use quando a entrega/prestação do serviço tiver sido finalizada."
|
||||||
|
confirmLabel="Concluir"
|
||||||
|
loading={statusMutation.isPending}
|
||||||
|
onConfirm={() => statusMutation.mutate('concluida')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<MarcarPagoDialog
|
||||||
|
parcela={payingParcela}
|
||||||
|
onOpenChange={(open) => !open && setPayingParcela(null)}
|
||||||
|
onSuccess={() => invalidateSaleQueries(queryClient, saleId)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ItensReadOnly({ sale }: { sale: SaleListItem }) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="overflow-x-auto rounded-lg border border-border">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Item</TableHead>
|
||||||
|
<TableHead>Qtd.</TableHead>
|
||||||
|
<TableHead>Valor unit.</TableHead>
|
||||||
|
<TableHead>Subtotal</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{sale.itens.map((item) => (
|
||||||
|
<TableRow key={item.id}>
|
||||||
|
<TableCell>{item.produto.nome}</TableCell>
|
||||||
|
<TableCell className="tabular-nums">{item.quantidade}</TableCell>
|
||||||
|
<TableCell className="tabular-nums">{formatCurrency(item.valor_unitario)}</TableCell>
|
||||||
|
<TableCell className="tabular-nums">{formatCurrency(item.valor_total)}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-end gap-1 text-sm">
|
||||||
|
<div className="flex w-48 justify-between text-muted-foreground">
|
||||||
|
<span>Desconto</span>
|
||||||
|
<span className="tabular-nums">-{formatCurrency(sale.desconto)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex w-48 justify-between text-base font-semibold text-foreground">
|
||||||
|
<span>Total</span>
|
||||||
|
<span className="tabular-nums">{formatCurrency(sale.valor_total)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{sale.observacoes && (
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
<span className="font-medium text-foreground">Observações: </span>
|
||||||
|
{sale.observacoes}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ParcelasTab({
|
||||||
|
sale,
|
||||||
|
onMarcarPago,
|
||||||
|
}: {
|
||||||
|
sale: SaleListItem;
|
||||||
|
onMarcarPago: (parcela: { id: string; valor: string }) => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="overflow-x-auto rounded-lg border border-border">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Parcela</TableHead>
|
||||||
|
<TableHead>Valor</TableHead>
|
||||||
|
<TableHead>Vencimento</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Pago em</TableHead>
|
||||||
|
<TableHead className="w-px">
|
||||||
|
<span className="sr-only">Ações</span>
|
||||||
|
</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{sale.parcelas.map((parcela) => (
|
||||||
|
<TableRow key={parcela.id}>
|
||||||
|
<TableCell>{parcela.numero_parcela}</TableCell>
|
||||||
|
<TableCell className="tabular-nums">{formatCurrency(parcela.valor)}</TableCell>
|
||||||
|
<TableCell className="tabular-nums">{formatDate(parcela.vencimento)}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<StatusPill status={parcela.status} />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="tabular-nums">{formatDateTime(parcela.pago_em)}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{parcela.status === 'pendente' || parcela.status === 'atrasado' ? (
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => onMarcarPago(parcela)}>
|
||||||
|
Marcar como paga
|
||||||
|
</Button>
|
||||||
|
) : parcela.status === 'pago' ? (
|
||||||
|
<Badge variant="outline">{parcela.forma_pagamento}</Badge>
|
||||||
|
) : null}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useMutation } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import { createSale, type SaleInput } from '@/lib/api/sales';
|
||||||
|
import type { SaleFormValues } from '@/lib/validators/sales';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
import { VendaForm } from '@/components/domain/venda-form';
|
||||||
|
|
||||||
|
function todayIso(): string {
|
||||||
|
return new Date().toISOString().slice(0, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULT_VALUES: SaleFormValues = {
|
||||||
|
customer_id: '',
|
||||||
|
data_venda: todayIso(),
|
||||||
|
desconto: 0,
|
||||||
|
observacoes: '',
|
||||||
|
itens: [],
|
||||||
|
modoParcelas: 'automatico',
|
||||||
|
numeroParcelas: 1,
|
||||||
|
parcelasManuais: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function NovaVendaPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const draftMutation = useMutation({
|
||||||
|
mutationFn: (input: SaleInput) => createSale({ ...input, status: 'orcamento' }),
|
||||||
|
onSuccess: (sale) => {
|
||||||
|
toast.success('Orçamento salvo.');
|
||||||
|
router.push(`/app/vendas/${sale.id}`);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar o orçamento.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const confirmMutation = useMutation({
|
||||||
|
mutationFn: (input: SaleInput) => createSale({ ...input, status: 'confirmada' }),
|
||||||
|
onSuccess: (sale) => {
|
||||||
|
toast.success('Venda confirmada.');
|
||||||
|
router.push(`/app/vendas/${sale.id}`);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível confirmar a venda.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Nova venda</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Registre uma venda com itens e parcelas</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<VendaForm
|
||||||
|
mode="create"
|
||||||
|
defaultValues={DEFAULT_VALUES}
|
||||||
|
submittingDraft={draftMutation.isPending}
|
||||||
|
submittingConfirmOrSave={confirmMutation.isPending}
|
||||||
|
onSaveDraft={(input) => draftMutation.mutate(input)}
|
||||||
|
onConfirmOrSave={(input) => confirmMutation.mutate(input)}
|
||||||
|
onCancel={() => router.push('/app/vendas')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,153 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Plus } from 'lucide-react';
|
||||||
|
import type { DateRange } from 'react-day-picker';
|
||||||
|
|
||||||
|
import { listSales, type SaleListItem, type VendaStatus } from '@/lib/api/sales';
|
||||||
|
import { listCustomers } from '@/lib/api/customers';
|
||||||
|
import { formatCurrency, formatDate } from '@/lib/format';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Combobox } from '@/components/ui/combobox';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { DateRangePicker } from '@/components/ui/date-picker';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { StatusPill } from '@/components/ui/status-pill';
|
||||||
|
|
||||||
|
const STATUS_OPTIONS: { value: VendaStatus | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os status' },
|
||||||
|
{ value: 'orcamento', label: 'Orçamento' },
|
||||||
|
{ value: 'confirmada', label: 'Confirmada' },
|
||||||
|
{ value: 'concluida', label: 'Concluída' },
|
||||||
|
{ value: 'cancelada', label: 'Cancelada' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const LIMIT = 20;
|
||||||
|
|
||||||
|
export default function VendasPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [status, setStatus] = React.useState<VendaStatus | 'todos'>('todos');
|
||||||
|
const [customerId, setCustomerId] = React.useState('');
|
||||||
|
const [periodo, setPeriodo] = React.useState<DateRange | undefined>();
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
|
||||||
|
const { data: customersData } = useQuery({
|
||||||
|
queryKey: ['tenant', 'customers', 'combobox'],
|
||||||
|
queryFn: () => listCustomers({ limit: 100 }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: [
|
||||||
|
'tenant',
|
||||||
|
'vendas',
|
||||||
|
{ status, customerId, de: periodo?.from?.toISOString(), ate: periodo?.to?.toISOString(), page },
|
||||||
|
],
|
||||||
|
queryFn: () =>
|
||||||
|
listSales({
|
||||||
|
status: status === 'todos' ? undefined : status,
|
||||||
|
customer_id: customerId || undefined,
|
||||||
|
data_inicio: periodo?.from?.toISOString().slice(0, 10),
|
||||||
|
data_fim: periodo?.to?.toISOString().slice(0, 10),
|
||||||
|
page,
|
||||||
|
limit: LIMIT,
|
||||||
|
}),
|
||||||
|
placeholderData: (prev) => prev,
|
||||||
|
});
|
||||||
|
|
||||||
|
const customerOptions = [
|
||||||
|
{ value: '', label: 'Todos os clientes' },
|
||||||
|
...(customersData?.data ?? []).map((c) => ({ value: c.id, label: c.nome_fantasia || c.razao_social })),
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: DataTableColumn<SaleListItem>[] = [
|
||||||
|
{ id: 'numero', header: 'Venda', primary: true, cell: (row) => `#${row.numero_venda}` },
|
||||||
|
{ id: 'cliente', header: 'Cliente', primary: true, cell: (row) => row.customer.razao_social },
|
||||||
|
{ id: 'valor', header: 'Valor total', cell: (row) => formatCurrency(row.valor_total) },
|
||||||
|
{ id: 'status', header: 'Status', cell: (row) => <StatusPill status={row.status} /> },
|
||||||
|
{ id: 'data', header: 'Data', cell: (row) => formatDate(row.data_venda) },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Vendas</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Orçamentos e vendas confirmadas</p>
|
||||||
|
</div>
|
||||||
|
<Button asChild>
|
||||||
|
<Link href="/app/vendas/nova">
|
||||||
|
<Plus /> Nova venda
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||||
|
<Select
|
||||||
|
value={status}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setStatus(value as VendaStatus | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-48" aria-label="Filtrar por status">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{STATUS_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Combobox
|
||||||
|
options={customerOptions}
|
||||||
|
value={customerId}
|
||||||
|
onChange={(value) => {
|
||||||
|
setCustomerId(value);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
placeholder="Todos os clientes"
|
||||||
|
searchPlaceholder="Buscar cliente..."
|
||||||
|
className="w-full sm:w-56"
|
||||||
|
/>
|
||||||
|
<DateRangePicker
|
||||||
|
value={periodo}
|
||||||
|
onChange={(range) => {
|
||||||
|
setPeriodo(range);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
placeholder="Período da venda"
|
||||||
|
className="w-full sm:w-64"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={data?.data ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhuma venda encontrada"
|
||||||
|
emptyDescription="Ajuste os filtros ou registre uma nova venda."
|
||||||
|
emptyAction={
|
||||||
|
<Button size="sm" asChild>
|
||||||
|
<Link href="/app/vendas/nova">Nova venda</Link>
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
onRowClick={(row) => router.push(`/app/vendas/${row.id}`)}
|
||||||
|
rowActions={(row) => (
|
||||||
|
<Button variant="ghost" size="sm" asChild>
|
||||||
|
<Link href={`/app/vendas/${row.id}`}>Ver</Link>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
pagination={
|
||||||
|
data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,338 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { CheckCircle2, Plus, Send } from 'lucide-react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
consultarWhatsappStatus,
|
||||||
|
criarWhatsappInstance,
|
||||||
|
listWhatsappInstances,
|
||||||
|
obterWhatsappQrCode,
|
||||||
|
removerWhatsappInstance,
|
||||||
|
testarEnvioWhatsapp,
|
||||||
|
type WhatsappInstance,
|
||||||
|
type WhatsappInstanceStatus,
|
||||||
|
} from '@/lib/api/whatsapp';
|
||||||
|
import {
|
||||||
|
testarEnvioWhatsappSchema,
|
||||||
|
type TestarEnvioWhatsappFormValues,
|
||||||
|
} from '@/lib/validators/whatsapp';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { formatDateTime } from '@/lib/format';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
|
||||||
|
const STATUS_LABEL: Record<WhatsappInstanceStatus, string> = {
|
||||||
|
desconectado: 'Desconectado',
|
||||||
|
conectando: 'Conectando',
|
||||||
|
conectado: 'Conectado',
|
||||||
|
erro: 'Erro',
|
||||||
|
};
|
||||||
|
|
||||||
|
const STATUS_TONE: Record<WhatsappInstanceStatus, 'default' | 'destructive' | 'outline' | 'secondary'> = {
|
||||||
|
desconectado: 'outline',
|
||||||
|
conectando: 'secondary',
|
||||||
|
conectado: 'default',
|
||||||
|
erro: 'destructive',
|
||||||
|
};
|
||||||
|
|
||||||
|
const POLL_INTERVAL_MS = 4000;
|
||||||
|
|
||||||
|
/** `EvolutionQrCode.base64` não tem prefixo garantido pelo backend — renderiza defensivamente. */
|
||||||
|
function qrImageSrc(base64?: string): string | null {
|
||||||
|
if (!base64) return null;
|
||||||
|
return base64.startsWith('data:') ? base64 : `data:image/png;base64,${base64}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ConnectInstanceDialog({
|
||||||
|
instance,
|
||||||
|
onOpenChange,
|
||||||
|
}: {
|
||||||
|
instance: WhatsappInstance | null;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
}) {
|
||||||
|
const open = instance !== null;
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [status, setStatus] = React.useState<WhatsappInstanceStatus | null>(null);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
setStatus(instance?.status ?? null);
|
||||||
|
}, [instance?.id, instance?.status]);
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: qrcode,
|
||||||
|
isLoading: qrLoading,
|
||||||
|
error: qrError,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ['tenant', 'whatsapp', 'qrcode', instance?.id],
|
||||||
|
queryFn: () => obterWhatsappQrCode(instance!.id),
|
||||||
|
enabled: open && status !== 'conectado',
|
||||||
|
retry: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Polling automático do status a cada poucos segundos, parando sozinho ao
|
||||||
|
// detectar "conectado" ou quando o diálogo fecha/desmonta — o efeito
|
||||||
|
// depende de `status`, então uma vez "conectado" a condição de guarda
|
||||||
|
// abaixo impede reagendar um novo `setInterval` (sem vazamento).
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!open || !instance || status === 'conectado') return;
|
||||||
|
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
consultarWhatsappStatus(instance.id)
|
||||||
|
.then((updated) => {
|
||||||
|
setStatus(updated.status);
|
||||||
|
if (updated.status === 'conectado') {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'whatsapp'] });
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// falha pontual de rede/consulta — a próxima iteração tenta de novo
|
||||||
|
});
|
||||||
|
}, POLL_INTERVAL_MS);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [open, instance, status, queryClient]);
|
||||||
|
|
||||||
|
const qrSrc = qrImageSrc(qrcode?.base64);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={open}
|
||||||
|
onOpenChange={onOpenChange}
|
||||||
|
title={`Conectar — ${instance?.instance_name ?? ''}`}
|
||||||
|
description="Escaneie o QR code no WhatsApp do número que vai enviar as mensagens."
|
||||||
|
footer={
|
||||||
|
<Button className="w-full" variant="outline" onClick={() => onOpenChange(false)}>
|
||||||
|
Fechar
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col items-center gap-4 px-4 pb-4 sm:px-0 sm:pb-0">
|
||||||
|
{status === 'conectado' ? (
|
||||||
|
<div className="flex flex-col items-center gap-2 py-8 text-center">
|
||||||
|
<CheckCircle2 className="size-10 text-success" aria-hidden />
|
||||||
|
<p className="font-medium text-foreground">Conectado com sucesso!</p>
|
||||||
|
<p className="text-sm text-muted-foreground">Esta instância já pode enviar mensagens.</p>
|
||||||
|
</div>
|
||||||
|
) : qrLoading ? (
|
||||||
|
<Skeleton className="size-56" />
|
||||||
|
) : qrError ? (
|
||||||
|
<p className="py-8 text-center text-sm text-destructive">
|
||||||
|
{qrError instanceof ApiError ? qrError.message : 'Não foi possível obter o QR code.'}
|
||||||
|
</p>
|
||||||
|
) : qrSrc ? (
|
||||||
|
<>
|
||||||
|
{/* Base64 de origem dinâmica (Evolution API) — `<img>` puro, `next/image` não otimiza data URIs. */}
|
||||||
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||||
|
<img
|
||||||
|
src={qrSrc}
|
||||||
|
alt="QR code para conectar o WhatsApp"
|
||||||
|
className="size-56 rounded-lg border border-border object-contain"
|
||||||
|
/>
|
||||||
|
{qrcode?.pairing_code && (
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Código de pareamento: <span className="font-mono font-medium">{qrcode.pairing_code}</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Aguardando leitura — o status atualiza automaticamente assim que o WhatsApp conectar.
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<p className="py-8 text-center text-sm text-muted-foreground">QR code indisponível.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TestSendDialog({
|
||||||
|
instance,
|
||||||
|
onOpenChange,
|
||||||
|
}: {
|
||||||
|
instance: WhatsappInstance | null;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
}) {
|
||||||
|
const form = useForm<TestarEnvioWhatsappFormValues>({
|
||||||
|
resolver: zodResolver(testarEnvioWhatsappSchema),
|
||||||
|
defaultValues: { numero: '', mensagem: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (instance) form.reset({ numero: '', mensagem: '' });
|
||||||
|
}, [instance, form]);
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: (values: TestarEnvioWhatsappFormValues) =>
|
||||||
|
testarEnvioWhatsapp(instance!.id, { numero: values.numero, mensagem: values.mensagem || undefined }),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
// `DispatchResult` sempre responde HTTP 200 — falha de envio vem como
|
||||||
|
// `{ sucesso: false, erro }`, não como erro HTTP (ver `lib/api/whatsapp.ts`).
|
||||||
|
if (result.sucesso) {
|
||||||
|
toast.success('Mensagem de teste enviada.');
|
||||||
|
onOpenChange(false);
|
||||||
|
} else {
|
||||||
|
toast.error(result.erro ?? 'Falha ao enviar a mensagem de teste.');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Falha ao enviar a mensagem de teste.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={instance !== null}
|
||||||
|
onOpenChange={onOpenChange}
|
||||||
|
title={`Testar envio — ${instance?.instance_name ?? ''}`}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button loading={mutation.isPending} onClick={form.handleSubmit((v) => mutation.mutate(v))}>
|
||||||
|
<Send /> Enviar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0"
|
||||||
|
onSubmit={form.handleSubmit((v) => mutation.mutate(v))}
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
label="Número (DDI+DDD+número)"
|
||||||
|
error={form.formState.errors.numero?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Input placeholder="5511999998888" {...form.register('numero')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Mensagem" error={form.formState.errors.mensagem?.message}>
|
||||||
|
<Textarea placeholder="Mensagem de teste do SeConectai Vendas." {...form.register('mensagem')} />
|
||||||
|
</FormField>
|
||||||
|
</form>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WhatsappPage() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const { data: instances, isLoading } = useQuery({
|
||||||
|
queryKey: ['tenant', 'whatsapp'],
|
||||||
|
queryFn: listWhatsappInstances,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [connecting, setConnecting] = React.useState<WhatsappInstance | null>(null);
|
||||||
|
const [testing, setTesting] = React.useState<WhatsappInstance | null>(null);
|
||||||
|
const [removing, setRemoving] = React.useState<WhatsappInstance | null>(null);
|
||||||
|
|
||||||
|
const createMutation = useMutation({
|
||||||
|
mutationFn: criarWhatsappInstance,
|
||||||
|
onSuccess: (instance) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'whatsapp'] });
|
||||||
|
setConnecting(instance);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível criar a instância.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const removeMutation = useMutation({
|
||||||
|
mutationFn: (id: string) => removerWhatsappInstance(id),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'whatsapp'] });
|
||||||
|
toast.success('Instância removida.');
|
||||||
|
setRemoving(null);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível remover a instância.');
|
||||||
|
setRemoving(null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<WhatsappInstance>[] = [
|
||||||
|
{ id: 'instance_name', header: 'Instância', primary: true, cell: (row) => row.instance_name },
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => <Badge variant={STATUS_TONE[row.status]}>{STATUS_LABEL[row.status]}</Badge>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'numero_conectado',
|
||||||
|
header: 'Número conectado',
|
||||||
|
cell: (row) => row.numero_conectado ?? '—',
|
||||||
|
},
|
||||||
|
{ id: 'criado_em', header: 'Criada em', hideOnMobileCard: true, cell: (row) => formatDateTime(row.criado_em) },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">WhatsApp</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Instâncias de envio de mensagens via Evolution API</p>
|
||||||
|
</div>
|
||||||
|
<Button loading={createMutation.isPending} onClick={() => createMutation.mutate()}>
|
||||||
|
<Plus /> Nova instância
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={instances ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhuma instância cadastrada"
|
||||||
|
emptyDescription="Crie uma instância para conectar um número de WhatsApp."
|
||||||
|
emptyAction={
|
||||||
|
<Button size="sm" loading={createMutation.isPending} onClick={() => createMutation.mutate()}>
|
||||||
|
Nova instância
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
rowActions={(row) => (
|
||||||
|
<>
|
||||||
|
{row.status !== 'conectado' && (
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setConnecting(row)}>
|
||||||
|
Conectar
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setTesting(row)}>
|
||||||
|
Testar envio
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setRemoving(row)}>
|
||||||
|
Remover
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ConnectInstanceDialog instance={connecting} onOpenChange={(open) => !open && setConnecting(null)} />
|
||||||
|
<TestSendDialog instance={testing} onOpenChange={(open) => !open && setTesting(null)} />
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={removing !== null}
|
||||||
|
onOpenChange={(open) => !open && setRemoving(null)}
|
||||||
|
title={`Remover instância "${removing?.instance_name}"?`}
|
||||||
|
description="Desconecta o número e apaga a instância na Evolution API — não é possível desfazer."
|
||||||
|
confirmLabel="Remover"
|
||||||
|
destructive
|
||||||
|
loading={removeMutation.isPending}
|
||||||
|
onConfirm={() => removing && removeMutation.mutate(removing.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { notFound } from 'next/navigation';
|
||||||
|
import { ComponentesShowcase } from './showcase-client';
|
||||||
|
|
||||||
|
/** Rota de desenvolvimento (Etapa 12) — nunca acessível fora de dev. */
|
||||||
|
export default function ComponentesPage() {
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
notFound();
|
||||||
|
}
|
||||||
|
|
||||||
|
return <ComponentesShowcase />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,408 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import type { DateRange } from 'react-day-picker';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import {
|
||||||
|
InputGroup,
|
||||||
|
InputGroupAddon,
|
||||||
|
InputGroupInput,
|
||||||
|
InputGroupText,
|
||||||
|
} from '@/components/ui/input-group';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { Combobox } from '@/components/ui/combobox';
|
||||||
|
import { DatePicker, DateRangePicker } from '@/components/ui/date-picker';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { STATUS_PILL_MAP, StatusPill, type BusinessStatus } from '@/components/ui/status-pill';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import { Skeleton, SkeletonCard, SkeletonText } from '@/components/ui/skeleton';
|
||||||
|
import { EmptyState } from '@/components/ui/empty-state';
|
||||||
|
import { DataPagination } from '@/components/ui/data-pagination';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { DataTable, type DataTableColumn, type DataTableSort } from '@/components/ui/data-table';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
interface DemoCliente {
|
||||||
|
id: string;
|
||||||
|
nome: string;
|
||||||
|
documento: string;
|
||||||
|
telefone: string;
|
||||||
|
cidade: string;
|
||||||
|
status: BusinessStatus;
|
||||||
|
valor: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEMO_CLIENTES: DemoCliente[] = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
nome: 'Ateliê Boa Vista Ltda',
|
||||||
|
documento: '12.345.678/0001-90',
|
||||||
|
telefone: '(11) 98765-4321',
|
||||||
|
cidade: 'São Paulo/SP',
|
||||||
|
status: 'ativo',
|
||||||
|
valor: 4230.5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
nome: 'Comércio Silva & Filhos',
|
||||||
|
documento: '98.765.432/0001-10',
|
||||||
|
telefone: '(21) 91234-5678',
|
||||||
|
cidade: 'Rio de Janeiro/RJ',
|
||||||
|
status: 'inadimplente',
|
||||||
|
valor: 1890,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
nome: 'Padaria Pão Dourado',
|
||||||
|
documento: '11.222.333/0001-44',
|
||||||
|
telefone: '(31) 99887-6655',
|
||||||
|
cidade: 'Belo Horizonte/MG',
|
||||||
|
status: 'ativo',
|
||||||
|
valor: 750.9,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
nome: 'Distribuidora Nordeste',
|
||||||
|
documento: '55.666.777/0001-88',
|
||||||
|
telefone: '(85) 98111-2233',
|
||||||
|
cidade: 'Fortaleza/CE',
|
||||||
|
status: 'trial',
|
||||||
|
valor: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
nome: 'Oficina Central Auto Peças',
|
||||||
|
documento: '22.333.444/0001-55',
|
||||||
|
telefone: '(41) 97654-3210',
|
||||||
|
cidade: 'Curitiba/PR',
|
||||||
|
status: 'suspenso',
|
||||||
|
valor: 320,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const CLIENTE_COLUMNS: DataTableColumn<DemoCliente>[] = [
|
||||||
|
{ id: 'nome', header: 'Cliente', primary: true, sortable: true, cell: (row) => row.nome },
|
||||||
|
{ id: 'documento', header: 'Documento', cell: (row) => row.documento },
|
||||||
|
{ id: 'telefone', header: 'Telefone', cell: (row) => row.telefone },
|
||||||
|
{ id: 'cidade', header: 'Cidade', cell: (row) => row.cidade },
|
||||||
|
{
|
||||||
|
id: 'valor',
|
||||||
|
header: 'Valor em aberto',
|
||||||
|
sortable: true,
|
||||||
|
className: 'text-right',
|
||||||
|
cell: (row) => row.valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => <StatusPill status={row.status} />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const PRODUTO_OPTIONS = [
|
||||||
|
{ value: 'p1', label: 'Consultoria mensal' },
|
||||||
|
{ value: 'p2', label: 'Licença de software' },
|
||||||
|
{ value: 'p3', label: 'Suporte técnico avançado' },
|
||||||
|
{ value: 'p4', label: 'Treinamento presencial' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<section className="flex flex-col gap-4 border-t border-border pt-8 first:border-0 first:pt-0">
|
||||||
|
<h2 className="text-lg font-semibold text-foreground">{title}</h2>
|
||||||
|
{children}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ComponentesShowcase() {
|
||||||
|
const [tableLoading, setTableLoading] = React.useState(false);
|
||||||
|
const [tableEmpty, setTableEmpty] = React.useState(false);
|
||||||
|
const [sort, setSort] = React.useState<DataTableSort | undefined>();
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
const [dialogOpen, setDialogOpen] = React.useState(false);
|
||||||
|
const [comboboxValue, setComboboxValue] = React.useState<string>();
|
||||||
|
const [date, setDate] = React.useState<Date>();
|
||||||
|
const [range, setRange] = React.useState<DateRange>();
|
||||||
|
const [paginationDemoPage, setPaginationDemoPage] = React.useState(1);
|
||||||
|
|
||||||
|
const sortedData = React.useMemo(() => {
|
||||||
|
if (!sort) return DEMO_CLIENTES;
|
||||||
|
const factor = sort.direction === 'asc' ? 1 : -1;
|
||||||
|
return [...DEMO_CLIENTES].sort((a, b) => {
|
||||||
|
const av = a[sort.columnId as keyof DemoCliente];
|
||||||
|
const bv = b[sort.columnId as keyof DemoCliente];
|
||||||
|
if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * factor;
|
||||||
|
return String(av).localeCompare(String(bv)) * factor;
|
||||||
|
});
|
||||||
|
}, [sort]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="mx-auto flex max-w-5xl flex-col gap-10 p-6 pb-24 sm:p-10">
|
||||||
|
<header className="flex flex-col gap-1">
|
||||||
|
<p className="text-sm text-muted-foreground">/dev/componentes — Etapa 12</p>
|
||||||
|
<h1 className="text-2xl font-semibold text-foreground">
|
||||||
|
Design system — SeConectai Vendas
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Rota só de desenvolvimento (404 em produção). Redimensione a janela para ver o
|
||||||
|
comportamento responsivo.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<Section title="Button">
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<Button variant="primary">Primary</Button>
|
||||||
|
<Button variant="secondary">Secondary</Button>
|
||||||
|
<Button variant="destructive">Destructive</Button>
|
||||||
|
<Button variant="ghost">Ghost</Button>
|
||||||
|
<Button variant="outline">Outline</Button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<Button size="sm">Small (denso, ex: linha de tabela)</Button>
|
||||||
|
<Button size="md">Medium (padrão, 44px)</Button>
|
||||||
|
<Button size="lg">Large</Button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<Button loading>Salvando…</Button>
|
||||||
|
<Button disabled>Desabilitado</Button>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Input / Textarea / FormField">
|
||||||
|
<div className="grid max-w-md gap-4">
|
||||||
|
<FormField label="Nome fantasia" helpText="Como o cliente é conhecido no dia a dia.">
|
||||||
|
<Input placeholder="Ex: Padaria Pão Dourado" />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="E-mail" error="E-mail inválido" required>
|
||||||
|
<Input type="email" defaultValue="nao-e-um-email" />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Valor de venda">
|
||||||
|
<InputGroup>
|
||||||
|
<InputGroupAddon>
|
||||||
|
<InputGroupText>R$</InputGroupText>
|
||||||
|
</InputGroupAddon>
|
||||||
|
<InputGroupInput placeholder="0,00" inputMode="decimal" />
|
||||||
|
</InputGroup>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Observações">
|
||||||
|
<Textarea placeholder="Notas internas sobre o cliente…" />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Select / Combobox (busca)">
|
||||||
|
<div className="grid max-w-md gap-4">
|
||||||
|
<FormField label="Papel do usuário">
|
||||||
|
<Select defaultValue="tenant_admin">
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="tenant_admin">Administrador</SelectItem>
|
||||||
|
<SelectItem value="vendedor">Vendedor</SelectItem>
|
||||||
|
<SelectItem value="financeiro">Financeiro</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Produto/serviço" helpText="Busca por nome ou SKU.">
|
||||||
|
<Combobox
|
||||||
|
options={PRODUTO_OPTIONS}
|
||||||
|
value={comboboxValue}
|
||||||
|
onChange={setComboboxValue}
|
||||||
|
placeholder="Selecionar produto…"
|
||||||
|
searchPlaceholder="Buscar produto…"
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="DatePicker">
|
||||||
|
<div className="grid max-w-md gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Data de vencimento">
|
||||||
|
<DatePicker value={date} onChange={setDate} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Período">
|
||||||
|
<DateRangePicker value={range} onChange={setRange} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Table (responsiva — vira Cards abaixo de 768px)">
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<Button variant="outline" size="sm" onClick={() => setTableLoading((v) => !v)}>
|
||||||
|
{tableLoading ? 'Parar loading' : 'Simular loading'}
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="sm" onClick={() => setTableEmpty((v) => !v)}>
|
||||||
|
{tableEmpty ? 'Mostrar dados' : 'Simular vazio'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<DataTable
|
||||||
|
columns={CLIENTE_COLUMNS}
|
||||||
|
data={tableEmpty ? [] : sortedData}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={tableLoading}
|
||||||
|
sort={sort}
|
||||||
|
onSortChange={setSort}
|
||||||
|
emptyTitle="Nenhum cliente cadastrado ainda"
|
||||||
|
emptyDescription="Cadastre o primeiro cliente para começar a vender."
|
||||||
|
emptyAction={<Button size="sm">Cadastrar cliente</Button>}
|
||||||
|
rowActions={() => (
|
||||||
|
<Button variant="ghost" size="sm">
|
||||||
|
Ver
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
pagination={{ page, limit: 5, total: 23, onPageChange: setPage }}
|
||||||
|
/>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Pagination (isolada)">
|
||||||
|
<DataPagination
|
||||||
|
page={paginationDemoPage}
|
||||||
|
limit={10}
|
||||||
|
total={97}
|
||||||
|
onPageChange={setPaginationDemoPage}
|
||||||
|
/>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Modal / Sheet responsivo">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Vira modal centralizado no desktop e bottom sheet no mobile (mesmo breakpoint da Table).
|
||||||
|
</p>
|
||||||
|
<Button className="w-fit" onClick={() => setDialogOpen(true)}>
|
||||||
|
Abrir exemplo
|
||||||
|
</Button>
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={dialogOpen}
|
||||||
|
onOpenChange={setDialogOpen}
|
||||||
|
title="Cadastro rápido de cliente"
|
||||||
|
description="Usado no fluxo de nova venda quando o cliente ainda não existe."
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => setDialogOpen(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => setDialogOpen(false)}>Salvar</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0">
|
||||||
|
<FormField label="Nome">
|
||||||
|
<Input placeholder="Nome do cliente" />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Telefone/WhatsApp">
|
||||||
|
<Input placeholder="(00) 00000-0000" />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Toast">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => toast.success('Cliente salvo com sucesso.')}
|
||||||
|
>
|
||||||
|
Sucesso
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => toast.error('Não foi possível salvar. Tente novamente.')}
|
||||||
|
>
|
||||||
|
Erro
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => toast.warning('Limite do plano quase atingido.')}
|
||||||
|
>
|
||||||
|
Aviso
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => toast.info('Sessão renovada automaticamente.')}
|
||||||
|
>
|
||||||
|
Info
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Badge / StatusPill">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Badge>Default</Badge>
|
||||||
|
<Badge variant="secondary">Secondary</Badge>
|
||||||
|
<Badge variant="destructive">Destructive</Badge>
|
||||||
|
<Badge variant="outline">Outline</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{(Object.keys(STATUS_PILL_MAP) as BusinessStatus[]).map((status) => (
|
||||||
|
<StatusPill key={status} status={status} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Card">
|
||||||
|
<Card className="max-w-sm">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Total recebido no mês</CardTitle>
|
||||||
|
<CardDescription>Atualizado há 2 minutos</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-2xl font-semibold tabular-nums text-foreground">R$ 18.420,00</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="EmptyState">
|
||||||
|
<EmptyState
|
||||||
|
title="Nenhuma venda registrada"
|
||||||
|
description="As vendas confirmadas aparecerão aqui."
|
||||||
|
action={<Button size="sm">Nova venda</Button>}
|
||||||
|
/>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Skeleton">
|
||||||
|
<div className="flex max-w-md flex-col gap-3">
|
||||||
|
<SkeletonText />
|
||||||
|
<SkeletonText className="w-2/3" />
|
||||||
|
<SkeletonCard />
|
||||||
|
<Skeleton className="size-11 rounded-full" />
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Tabs">
|
||||||
|
<Tabs defaultValue="itens" className="max-w-md">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="itens">Itens</TabsTrigger>
|
||||||
|
<TabsTrigger value="parcelas">Parcelas</TabsTrigger>
|
||||||
|
<TabsTrigger value="historico">Histórico</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<TabsContent value="itens" className="text-sm text-muted-foreground">
|
||||||
|
Lista de itens da venda.
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="parcelas" className="text-sm text-muted-foreground">
|
||||||
|
Lista de parcelas geradas.
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="historico" className="text-sm text-muted-foreground">
|
||||||
|
Histórico de mudanças de status.
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</Section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { apiClient, ApiError } from '@/lib/api/client';
|
||||||
|
|
||||||
|
interface HealthStatus {
|
||||||
|
status: 'ok' | 'error';
|
||||||
|
timestamp: string;
|
||||||
|
database: 'up' | 'down';
|
||||||
|
}
|
||||||
|
|
||||||
|
type DiagnosticoState =
|
||||||
|
| { phase: 'loading' }
|
||||||
|
| { phase: 'success'; data: HealthStatus }
|
||||||
|
| { phase: 'error'; message: string };
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Rota temporária para validar a integração frontend↔backend de ponta a
|
||||||
|
* ponta (Etapa 11). Pode ser removida quando não fizer mais falta.
|
||||||
|
*/
|
||||||
|
export default function DiagnosticoPage() {
|
||||||
|
const [state, setState] = useState<DiagnosticoState>({ phase: 'loading' });
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
apiClient
|
||||||
|
.get<HealthStatus>('/health')
|
||||||
|
.then((data) => setState({ phase: 'success', data }))
|
||||||
|
.catch((err: unknown) => {
|
||||||
|
const message = err instanceof ApiError ? err.message : 'Falha ao conectar com a API.';
|
||||||
|
setState({ phase: 'error', message });
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="flex min-h-screen flex-col items-center justify-center gap-4 p-8">
|
||||||
|
<h1 className="text-xl font-semibold text-neutral-950">Diagnóstico de conexão com a API</h1>
|
||||||
|
|
||||||
|
{state.phase === 'loading' && <p className="text-neutral-500">Consultando GET /health…</p>}
|
||||||
|
|
||||||
|
{state.phase === 'success' && (
|
||||||
|
<div className="tabular-nums rounded-lg border border-neutral-200 bg-surface p-4 text-sm">
|
||||||
|
<p>
|
||||||
|
Status:{' '}
|
||||||
|
<span className={state.data.status === 'ok' ? 'text-success' : 'text-danger'}>
|
||||||
|
{state.data.status}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Banco de dados:{' '}
|
||||||
|
<span className={state.data.database === 'up' ? 'text-success' : 'text-danger'}>
|
||||||
|
{state.data.database}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p>Timestamp: {state.data.timestamp}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{state.phase === 'error' && (
|
||||||
|
<p className="rounded-lg border border-danger bg-surface p-4 text-sm text-danger">
|
||||||
|
{state.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,129 @@
|
|||||||
|
@import 'tailwindcss';
|
||||||
|
@import '../styles/tokens.css';
|
||||||
|
@import 'tw-animate-css';
|
||||||
|
@import 'shadcn/tailwind.css';
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-destructive-foreground: var(--destructive-foreground);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--color-background: var(--background);
|
||||||
|
--radius-sm: calc(var(--radius) * 0.6);
|
||||||
|
--radius-md: calc(var(--radius) * 0.8);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) * 1.4);
|
||||||
|
--radius-2xl: calc(var(--radius) * 1.8);
|
||||||
|
--radius-3xl: calc(var(--radius) * 2.2);
|
||||||
|
--radius-4xl: calc(var(--radius) * 2.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Ponte shadcn/ui → tokens do projeto (styles/tokens.css). Em vez da
|
||||||
|
* paleta oklch neutra que o `shadcn init` gera por padrão, cada variável
|
||||||
|
* que os componentes shadcn consomem aponta para os tokens definidos na
|
||||||
|
* Etapa 11 — assim customizar a cor de marca (--color-primary, dinâmica
|
||||||
|
* por tenant a partir da Etapa 13) muda os componentes automaticamente,
|
||||||
|
* sem precisar editar cada um.
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--background: var(--neutral-50);
|
||||||
|
--foreground: var(--neutral-950);
|
||||||
|
--card: var(--surface);
|
||||||
|
--card-foreground: var(--neutral-950);
|
||||||
|
--popover: var(--surface);
|
||||||
|
--popover-foreground: var(--neutral-950);
|
||||||
|
--primary: var(--color-primary);
|
||||||
|
--primary-foreground: #ffffff;
|
||||||
|
--secondary: var(--neutral-50);
|
||||||
|
--secondary-foreground: var(--neutral-950);
|
||||||
|
--muted: var(--neutral-50);
|
||||||
|
--muted-foreground: var(--neutral-500);
|
||||||
|
--accent: var(--neutral-50);
|
||||||
|
--accent-foreground: var(--neutral-950);
|
||||||
|
--destructive: var(--danger);
|
||||||
|
--destructive-foreground: #ffffff;
|
||||||
|
--border: var(--neutral-200);
|
||||||
|
--input: var(--neutral-200);
|
||||||
|
--ring: var(--color-primary);
|
||||||
|
--radius: 0.625rem;
|
||||||
|
--chart-1: var(--color-primary);
|
||||||
|
--chart-2: var(--success);
|
||||||
|
--chart-3: var(--warning);
|
||||||
|
--chart-4: var(--danger);
|
||||||
|
--chart-5: var(--neutral-500);
|
||||||
|
--sidebar: var(--surface);
|
||||||
|
--sidebar-foreground: var(--neutral-950);
|
||||||
|
--sidebar-primary: var(--color-primary);
|
||||||
|
--sidebar-primary-foreground: #ffffff;
|
||||||
|
--sidebar-accent: var(--neutral-50);
|
||||||
|
--sidebar-accent-foreground: var(--neutral-950);
|
||||||
|
--sidebar-border: var(--neutral-200);
|
||||||
|
--sidebar-ring: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
@apply font-sans;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fallback de foco para elementos nativos que não passam por um
|
||||||
|
componente shadcn (esses já têm seu próprio focus-visible:ring). */
|
||||||
|
a:focus-visible,
|
||||||
|
button:focus-visible,
|
||||||
|
input:focus-visible,
|
||||||
|
select:focus-visible,
|
||||||
|
textarea:focus-visible,
|
||||||
|
[tabindex]:focus-visible {
|
||||||
|
outline: 2px solid var(--ring);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* `prefers-reduced-motion` (Etapa 12, obrigatório) — aplicado globalmente
|
||||||
|
para cobrir qualquer animação/transição, independente da biblioteca. */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import type { Metadata } from 'next';
|
||||||
|
import { Inter } from 'next/font/google';
|
||||||
|
import './globals.css';
|
||||||
|
import { Toaster } from '@/components/ui/sonner';
|
||||||
|
import { AuthProvider } from '@/lib/auth/auth-context';
|
||||||
|
import { QueryProvider } from '@/lib/query/query-provider';
|
||||||
|
|
||||||
|
const inter = Inter({
|
||||||
|
variable: '--font-inter',
|
||||||
|
subsets: ['latin'],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'SeConectai Vendas',
|
||||||
|
description: 'CRM/vendas multi-tenant SeConectai',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="pt-BR">
|
||||||
|
<body className={`${inter.variable} font-sans antialiased`}>
|
||||||
|
<QueryProvider>
|
||||||
|
<AuthProvider>{children}</AuthProvider>
|
||||||
|
<Toaster position="top-center" />
|
||||||
|
</QueryProvider>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,209 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import type { DateRange } from 'react-day-picker';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ALERT_LOG_STATUSES,
|
||||||
|
listAlertLogs,
|
||||||
|
type AlertLog,
|
||||||
|
type AlertLogStatus,
|
||||||
|
} from '@/lib/api/alert-logs';
|
||||||
|
import { CANAIS_TEMPLATE, CANAL_TEMPLATE_LABEL, TIPO_TEMPLATE_LABEL } from '@/lib/api/alert-templates';
|
||||||
|
import type { CanalTemplate } from '@/lib/api/alert-templates';
|
||||||
|
import { formatDateTime } from '@/lib/format';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { DateRangePicker } from '@/components/ui/date-picker';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
|
||||||
|
const STATUS_LABEL: Record<AlertLogStatus, string> = {
|
||||||
|
enviado: 'Enviado',
|
||||||
|
entregue: 'Entregue',
|
||||||
|
lido: 'Lido',
|
||||||
|
falhou: 'Falhou',
|
||||||
|
};
|
||||||
|
|
||||||
|
const STATUS_TONE: Record<AlertLogStatus, 'default' | 'destructive' | 'outline'> = {
|
||||||
|
enviado: 'outline',
|
||||||
|
entregue: 'default',
|
||||||
|
lido: 'default',
|
||||||
|
falhou: 'destructive',
|
||||||
|
};
|
||||||
|
|
||||||
|
const STATUS_OPTIONS: { value: AlertLogStatus | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os status' },
|
||||||
|
...ALERT_LOG_STATUSES.map((s) => ({ value: s, label: STATUS_LABEL[s] })),
|
||||||
|
];
|
||||||
|
|
||||||
|
const CANAL_OPTIONS: { value: CanalTemplate | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os canais' },
|
||||||
|
...CANAIS_TEMPLATE.map((c) => ({ value: c, label: CANAL_TEMPLATE_LABEL[c] })),
|
||||||
|
];
|
||||||
|
|
||||||
|
const LIMIT = 20;
|
||||||
|
|
||||||
|
export default function AlertLogsPage() {
|
||||||
|
const [canal, setCanal] = React.useState<CanalTemplate | 'todos'>('todos');
|
||||||
|
const [status, setStatus] = React.useState<AlertLogStatus | 'todos'>('todos');
|
||||||
|
const [periodo, setPeriodo] = React.useState<DateRange | undefined>();
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
const [detail, setDetail] = React.useState<AlertLog | null>(null);
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: [
|
||||||
|
'master',
|
||||||
|
'alert-logs',
|
||||||
|
{ canal, status, de: periodo?.from?.toISOString(), ate: periodo?.to?.toISOString(), page },
|
||||||
|
],
|
||||||
|
queryFn: () =>
|
||||||
|
listAlertLogs({
|
||||||
|
canal: canal === 'todos' ? undefined : canal,
|
||||||
|
status: status === 'todos' ? undefined : status,
|
||||||
|
data_inicio: periodo?.from?.toISOString(),
|
||||||
|
data_fim: periodo?.to?.toISOString(),
|
||||||
|
page,
|
||||||
|
limit: LIMIT,
|
||||||
|
}),
|
||||||
|
placeholderData: (prev) => prev,
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<AlertLog>[] = [
|
||||||
|
{
|
||||||
|
id: 'tipo',
|
||||||
|
header: 'Tipo',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => (row.template ? TIPO_TEMPLATE_LABEL[row.template.tipo] : '—'),
|
||||||
|
},
|
||||||
|
{ id: 'canal', header: 'Canal', primary: true, cell: (row) => CANAL_TEMPLATE_LABEL[row.canal] },
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
cell: (row) => <Badge variant={STATUS_TONE[row.status]}>{STATUS_LABEL[row.status]}</Badge>,
|
||||||
|
},
|
||||||
|
{ id: 'enviado_em', header: 'Enviado em', cell: (row) => formatDateTime(row.enviado_em) },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Logs de alerta</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Histórico de envios de WhatsApp/e-mail</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||||
|
<Select
|
||||||
|
value={canal}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setCanal(value as CanalTemplate | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-44" aria-label="Filtrar por canal">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{CANAL_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select
|
||||||
|
value={status}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setStatus(value as AlertLogStatus | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-44" aria-label="Filtrar por status">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{STATUS_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<DateRangePicker
|
||||||
|
value={periodo}
|
||||||
|
onChange={(range) => {
|
||||||
|
setPeriodo(range);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
placeholder="Período"
|
||||||
|
className="w-full sm:w-64"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={data?.data ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhum log encontrado"
|
||||||
|
emptyDescription="Ajuste os filtros de período/canal/status."
|
||||||
|
onRowClick={(row) => setDetail(row)}
|
||||||
|
rowActions={() => (
|
||||||
|
<Button variant="ghost" size="sm">
|
||||||
|
Ver detalhes
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
pagination={
|
||||||
|
data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={detail !== null}
|
||||||
|
onOpenChange={(open) => !open && setDetail(null)}
|
||||||
|
title="Detalhe do envio"
|
||||||
|
description={detail ? formatDateTime(detail.enviado_em) : undefined}
|
||||||
|
>
|
||||||
|
{detail && (
|
||||||
|
<div className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0">
|
||||||
|
<div className="flex flex-wrap gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-muted-foreground">Tipo</p>
|
||||||
|
<p className="font-medium text-foreground">
|
||||||
|
{detail.template ? TIPO_TEMPLATE_LABEL[detail.template.tipo] : '—'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-muted-foreground">Canal</p>
|
||||||
|
<p className="font-medium text-foreground">{CANAL_TEMPLATE_LABEL[detail.canal]}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-muted-foreground">Status</p>
|
||||||
|
<Badge variant={STATUS_TONE[detail.status]}>{STATUS_LABEL[detail.status]}</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div>
|
||||||
|
<p className="mb-1 text-sm font-medium text-foreground">Conteúdo enviado</p>
|
||||||
|
<p className="rounded-lg border border-border bg-muted/50 p-3 text-sm whitespace-pre-wrap">
|
||||||
|
{detail.conteudo_enviado || '—'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{detail.erro && (
|
||||||
|
<div>
|
||||||
|
<p className="mb-1 text-sm font-medium text-danger">Erro</p>
|
||||||
|
<p className="rounded-lg border border-danger/30 bg-danger/10 p-3 text-sm whitespace-pre-wrap text-danger">
|
||||||
|
{detail.erro}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ResponsiveDialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,349 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Plus } from 'lucide-react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
CANAL_TEMPLATE_LABEL,
|
||||||
|
CANAIS_TEMPLATE,
|
||||||
|
PLACEHOLDERS_POR_TIPO,
|
||||||
|
TIPO_TEMPLATE_LABEL,
|
||||||
|
TIPOS_TEMPLATE,
|
||||||
|
createAlertTemplate,
|
||||||
|
deleteAlertTemplate,
|
||||||
|
listAlertTemplates,
|
||||||
|
updateAlertTemplate,
|
||||||
|
type AlertTemplate,
|
||||||
|
type CanalTemplate,
|
||||||
|
type TipoTemplate,
|
||||||
|
} from '@/lib/api/alert-templates';
|
||||||
|
import { alertTemplateSchema, type AlertTemplateFormValues } from '@/lib/validators/alert-templates';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
|
||||||
|
const TIPO_OPTIONS: { value: TipoTemplate | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os tipos' },
|
||||||
|
...TIPOS_TEMPLATE.map((tipo) => ({ value: tipo, label: TIPO_TEMPLATE_LABEL[tipo] })),
|
||||||
|
];
|
||||||
|
|
||||||
|
const CANAL_OPTIONS: { value: CanalTemplate | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os canais' },
|
||||||
|
...CANAIS_TEMPLATE.map((canal) => ({ value: canal, label: CANAL_TEMPLATE_LABEL[canal] })),
|
||||||
|
];
|
||||||
|
|
||||||
|
const LIMIT = 20;
|
||||||
|
|
||||||
|
export default function AlertTemplatesPage() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [tipo, setTipo] = React.useState<TipoTemplate | 'todos'>('todos');
|
||||||
|
const [canal, setCanal] = React.useState<CanalTemplate | 'todos'>('todos');
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
|
||||||
|
const [editing, setEditing] = React.useState<AlertTemplate | null>(null);
|
||||||
|
const [formOpen, setFormOpen] = React.useState(false);
|
||||||
|
const [deleting, setDeleting] = React.useState<AlertTemplate | null>(null);
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ['master', 'alert-templates', { tipo, canal, page }],
|
||||||
|
queryFn: () =>
|
||||||
|
listAlertTemplates({
|
||||||
|
tipo: tipo === 'todos' ? undefined : tipo,
|
||||||
|
canal: canal === 'todos' ? undefined : canal,
|
||||||
|
page,
|
||||||
|
limit: LIMIT,
|
||||||
|
}),
|
||||||
|
placeholderData: (prev) => prev,
|
||||||
|
});
|
||||||
|
|
||||||
|
const form = useForm<AlertTemplateFormValues>({ resolver: zodResolver(alertTemplateSchema) });
|
||||||
|
const corpoFieldRef = React.useRef<HTMLTextAreaElement | null>(null);
|
||||||
|
const { ref: corpoRegisterRef, ...corpoRegister } = form.register('corpo');
|
||||||
|
const watchedTipo = form.watch('tipo');
|
||||||
|
const watchedCanal = form.watch('canal');
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
setEditing(null);
|
||||||
|
form.reset({ tipo: 'mensalidade_tenant', canal: 'whatsapp', assunto: '', corpo: '', ativo: true });
|
||||||
|
setFormOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEdit(template: AlertTemplate) {
|
||||||
|
setEditing(template);
|
||||||
|
form.reset({
|
||||||
|
tipo: template.tipo,
|
||||||
|
canal: template.canal,
|
||||||
|
assunto: template.assunto ?? '',
|
||||||
|
corpo: template.corpo,
|
||||||
|
ativo: template.ativo,
|
||||||
|
});
|
||||||
|
setFormOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function insertPlaceholder(chave: string) {
|
||||||
|
const token = `{{${chave}}}`;
|
||||||
|
const el = corpoFieldRef.current;
|
||||||
|
const current = form.getValues('corpo') ?? '';
|
||||||
|
|
||||||
|
if (!el) {
|
||||||
|
form.setValue('corpo', current + token, { shouldValidate: true });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const start = el.selectionStart ?? current.length;
|
||||||
|
const end = el.selectionEnd ?? current.length;
|
||||||
|
const next = current.slice(0, start) + token + current.slice(end);
|
||||||
|
form.setValue('corpo', next, { shouldValidate: true });
|
||||||
|
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
el.focus();
|
||||||
|
const pos = start + token.length;
|
||||||
|
el.setSelectionRange(pos, pos);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (values: AlertTemplateFormValues) => {
|
||||||
|
const payload = { ...values, assunto: values.canal === 'email' ? values.assunto : undefined };
|
||||||
|
return editing ? updateAlertTemplate(editing.id, payload) : createAlertTemplate(payload);
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'alert-templates'] });
|
||||||
|
toast.success(editing ? 'Template atualizado.' : 'Template criado.');
|
||||||
|
setFormOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar o template.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (id: string) => deleteAlertTemplate(id),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'alert-templates'] });
|
||||||
|
toast.success('Template desativado.');
|
||||||
|
setDeleting(null);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível desativar o template.');
|
||||||
|
setDeleting(null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<AlertTemplate>[] = [
|
||||||
|
{ id: 'tipo', header: 'Tipo', primary: true, cell: (row) => TIPO_TEMPLATE_LABEL[row.tipo] },
|
||||||
|
{ id: 'canal', header: 'Canal', primary: true, cell: (row) => CANAL_TEMPLATE_LABEL[row.canal] },
|
||||||
|
{
|
||||||
|
id: 'corpo',
|
||||||
|
header: 'Prévia',
|
||||||
|
cell: (row) => <span className="line-clamp-1 text-muted-foreground">{row.corpo}</span>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
cell: (row) => <Badge variant={row.ativo ? 'default' : 'outline'}>{row.ativo ? 'Ativo' : 'Inativo'}</Badge>,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const placeholders = watchedTipo ? PLACEHOLDERS_POR_TIPO[watchedTipo] : [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Templates de alerta</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Padrões de mensagem da plataforma</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={openCreate}>
|
||||||
|
<Plus /> Novo template
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||||
|
<Select
|
||||||
|
value={tipo}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setTipo(value as TipoTemplate | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-56" aria-label="Filtrar por tipo">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{TIPO_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select
|
||||||
|
value={canal}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setCanal(value as CanalTemplate | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-44" aria-label="Filtrar por canal">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{CANAL_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={data?.data ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhum template cadastrado"
|
||||||
|
emptyAction={
|
||||||
|
<Button size="sm" onClick={openCreate}>
|
||||||
|
Novo template
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
rowActions={(row) => (
|
||||||
|
<>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => openEdit(row)}>
|
||||||
|
Editar
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setDeleting(row)}>
|
||||||
|
Desativar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
pagination={
|
||||||
|
data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={formOpen}
|
||||||
|
onOpenChange={setFormOpen}
|
||||||
|
title={editing ? 'Editar template' : 'Novo template'}
|
||||||
|
className="sm:max-w-2xl"
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => setFormOpen(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
loading={saveMutation.isPending}
|
||||||
|
onClick={form.handleSubmit((values) => saveMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
Salvar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0"
|
||||||
|
onSubmit={form.handleSubmit((values) => saveMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Tipo" id="tipo" error={form.formState.errors.tipo?.message} required>
|
||||||
|
<Select
|
||||||
|
value={watchedTipo}
|
||||||
|
onValueChange={(value) => form.setValue('tipo', value as TipoTemplate, { shouldValidate: true })}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="tipo" className="w-full">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{TIPOS_TEMPLATE.map((t) => (
|
||||||
|
<SelectItem key={t} value={t}>
|
||||||
|
{TIPO_TEMPLATE_LABEL[t]}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Canal" id="canal" error={form.formState.errors.canal?.message} required>
|
||||||
|
<Select
|
||||||
|
value={watchedCanal}
|
||||||
|
onValueChange={(value) => form.setValue('canal', value as CanalTemplate, { shouldValidate: true })}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="canal" className="w-full">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{CANAIS_TEMPLATE.map((c) => (
|
||||||
|
<SelectItem key={c} value={c}>
|
||||||
|
{CANAL_TEMPLATE_LABEL[c]}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{watchedCanal === 'email' && (
|
||||||
|
<FormField label="Assunto" error={form.formState.errors.assunto?.message} required>
|
||||||
|
<Input {...form.register('assunto')} />
|
||||||
|
</FormField>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-[1fr_220px]">
|
||||||
|
<FormField label="Corpo da mensagem" error={form.formState.errors.corpo?.message} required>
|
||||||
|
<Textarea
|
||||||
|
rows={8}
|
||||||
|
{...corpoRegister}
|
||||||
|
ref={(el) => {
|
||||||
|
corpoRegisterRef(el);
|
||||||
|
corpoFieldRef.current = el;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<p className="text-xs font-medium text-muted-foreground">Placeholders disponíveis</p>
|
||||||
|
<div className="flex flex-col gap-1.5 overflow-y-auto rounded-lg border border-border p-2 sm:max-h-56">
|
||||||
|
{placeholders.map((p) => (
|
||||||
|
<button
|
||||||
|
key={p.chave}
|
||||||
|
type="button"
|
||||||
|
onClick={() => insertPlaceholder(p.chave)}
|
||||||
|
title={p.descricao}
|
||||||
|
className="rounded-md px-2 py-1.5 text-left text-xs hover:bg-muted"
|
||||||
|
>
|
||||||
|
<code className="font-mono font-medium text-primary-on-light">{`{{${p.chave}}}`}</code>
|
||||||
|
<p className="text-muted-foreground">{p.descricao}</p>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={deleting !== null}
|
||||||
|
onOpenChange={(open) => !open && setDeleting(null)}
|
||||||
|
title="Desativar template?"
|
||||||
|
description="O template deixa de ser usado nos disparos automáticos, mas continua no histórico."
|
||||||
|
confirmLabel="Desativar"
|
||||||
|
destructive
|
||||||
|
loading={deleteMutation.isPending}
|
||||||
|
onConfirm={() => deleting && deleteMutation.mutate(deleting.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||||
|
import { KeyRound } from 'lucide-react';
|
||||||
|
|
||||||
|
import { listMasterAdmins } from '@/lib/api/master-admins';
|
||||||
|
import { apiClient, ApiError } from '@/lib/api/client';
|
||||||
|
import { useAuth } from '@/lib/auth/auth-context';
|
||||||
|
import { formatDateTime } from '@/lib/format';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Não existe endpoint de perfil/senha dedicado para o master admin no
|
||||||
|
* backend (só `GET /auth/master/admins`, somente leitura, e o fluxo
|
||||||
|
* genérico `forgot`/`reset` por e-mail — ver observações da Etapa 15 no
|
||||||
|
* controle de progresso). Nome/e-mail aqui são só exibidos (resolvidos
|
||||||
|
* filtrando a lista completa pelo `sub` do JWT), e a troca de senha
|
||||||
|
* reaproveita `POST /auth/password/forgot`, o mesmo fluxo já usado em
|
||||||
|
* `/esqueci-senha` — não uma troca "senha atual → nova senha" direta na
|
||||||
|
* tela, porque essa rota não existe.
|
||||||
|
*/
|
||||||
|
export default function MasterConfiguracoesPage() {
|
||||||
|
const { user } = useAuth();
|
||||||
|
const { data: admins, isLoading } = useQuery({
|
||||||
|
queryKey: ['master', 'admins'],
|
||||||
|
queryFn: listMasterAdmins,
|
||||||
|
});
|
||||||
|
|
||||||
|
const me = admins?.find((admin) => admin.id === user?.sub);
|
||||||
|
|
||||||
|
const resetMutation = useMutation({
|
||||||
|
mutationFn: () =>
|
||||||
|
apiClient.post('/auth/password/forgot', { email: me!.email, usuario_tipo: 'master' }),
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success('Se o e-mail existir, as instruções de redefinição foram enviadas.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível enviar o e-mail.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Configurações</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Dados da sua conta de administrador</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card className="max-w-xl">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Meus dados</CardTitle>
|
||||||
|
<CardDescription>Somente leitura nesta versão.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Skeleton className="h-5 w-48" />
|
||||||
|
<Skeleton className="h-5 w-64" />
|
||||||
|
</div>
|
||||||
|
) : me ? (
|
||||||
|
<dl className="flex flex-col gap-3 text-sm">
|
||||||
|
<div className="flex justify-between gap-4">
|
||||||
|
<dt className="text-muted-foreground">Nome</dt>
|
||||||
|
<dd className="font-medium text-foreground">{me.nome}</dd>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between gap-4">
|
||||||
|
<dt className="text-muted-foreground">E-mail</dt>
|
||||||
|
<dd className="font-medium text-foreground">{me.email}</dd>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between gap-4">
|
||||||
|
<dt className="text-muted-foreground">Último login</dt>
|
||||||
|
<dd className="text-foreground">{formatDateTime(me.ultimo_login)}</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground">Não foi possível identificar sua conta.</p>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="max-w-xl">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Senha</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Enviaremos um e-mail com um link para você definir uma nova senha.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
loading={resetMutation.isPending}
|
||||||
|
disabled={!me}
|
||||||
|
onClick={() => resetMutation.mutate()}
|
||||||
|
>
|
||||||
|
<KeyRound /> Enviar e-mail de redefinição de senha
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Building2, CheckCircle2, CircleDollarSign, Clock, TrendingUp, XCircle } from 'lucide-react';
|
||||||
|
|
||||||
|
import { getMasterDashboard } from '@/lib/api/dashboard';
|
||||||
|
import { formatCurrency } from '@/lib/format';
|
||||||
|
import { StatCard } from '@/components/domain/stat-card';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sem gráfico de evolução (tarefa 1 da Etapa 15, "se o backend expuser dado
|
||||||
|
* suficiente"): `GET /master/dashboard` (`dashboard.service.ts#resumo`) só
|
||||||
|
* devolve o snapshot atual — nenhuma série histórica de faturamento/novos
|
||||||
|
* tenants. Ficou só com os cards de resumo, como a própria tarefa já
|
||||||
|
* previa para esse cenário.
|
||||||
|
*/
|
||||||
|
export default function MasterDashboardPage() {
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ['master', 'dashboard'],
|
||||||
|
queryFn: getMasterDashboard,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Dashboard</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Visão geral da plataforma</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 className="mb-3 text-sm font-medium text-muted-foreground">Tenants por status</h2>
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
|
||||||
|
<StatCard label="Trial" value={String(data?.tenants_por_status.trial ?? 0)} icon={Clock} loading={isLoading} />
|
||||||
|
<StatCard
|
||||||
|
label="Ativos"
|
||||||
|
value={String(data?.tenants_por_status.ativo ?? 0)}
|
||||||
|
icon={CheckCircle2}
|
||||||
|
tone="success"
|
||||||
|
loading={isLoading}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Inadimplentes"
|
||||||
|
value={String(data?.tenants_por_status.inadimplente ?? 0)}
|
||||||
|
icon={XCircle}
|
||||||
|
tone="danger"
|
||||||
|
loading={isLoading}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Suspensos"
|
||||||
|
value={String(data?.tenants_por_status.suspenso ?? 0)}
|
||||||
|
icon={XCircle}
|
||||||
|
tone="warning"
|
||||||
|
loading={isLoading}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Cancelados"
|
||||||
|
value={String(data?.tenants_por_status.cancelado ?? 0)}
|
||||||
|
icon={Building2}
|
||||||
|
loading={isLoading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 className="mb-3 text-sm font-medium text-muted-foreground">Financeiro</h2>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||||
|
<StatCard label="MRR" value={formatCurrency(data?.mrr)} icon={TrendingUp} loading={isLoading} />
|
||||||
|
<StatCard
|
||||||
|
label="Recebido no mês"
|
||||||
|
value={formatCurrency(data?.total_recebido_mes)}
|
||||||
|
icon={CircleDollarSign}
|
||||||
|
tone="success"
|
||||||
|
loading={isLoading}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Em aberto"
|
||||||
|
value={formatCurrency(data?.total_em_aberto)}
|
||||||
|
icon={CircleDollarSign}
|
||||||
|
tone="warning"
|
||||||
|
loading={isLoading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,223 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Plug, Plus } from 'lucide-react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
createEvolutionConfig,
|
||||||
|
deleteEvolutionConfig,
|
||||||
|
listEvolutionConfigs,
|
||||||
|
testarConexaoEvolution,
|
||||||
|
updateEvolutionConfig,
|
||||||
|
type EvolutionConfig,
|
||||||
|
} from '@/lib/api/evolution-config';
|
||||||
|
import {
|
||||||
|
evolutionConfigSchema,
|
||||||
|
type EvolutionConfigFormValues,
|
||||||
|
} from '@/lib/validators/evolution-config';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { formatDate } from '@/lib/format';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
|
||||||
|
export default function EvolutionConfigPage() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { data: configs, isLoading } = useQuery({
|
||||||
|
queryKey: ['master', 'evolution-config'],
|
||||||
|
queryFn: listEvolutionConfigs,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [editing, setEditing] = React.useState<EvolutionConfig | null>(null);
|
||||||
|
const [formOpen, setFormOpen] = React.useState(false);
|
||||||
|
const [deleting, setDeleting] = React.useState<EvolutionConfig | null>(null);
|
||||||
|
const [testingId, setTestingId] = React.useState<string | null>(null);
|
||||||
|
|
||||||
|
const form = useForm<EvolutionConfigFormValues>({ resolver: zodResolver(evolutionConfigSchema) });
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
setEditing(null);
|
||||||
|
form.reset({ nome: '', base_url: '', api_key: '', versao: '' });
|
||||||
|
setFormOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEdit(config: EvolutionConfig) {
|
||||||
|
setEditing(config);
|
||||||
|
form.reset({ nome: config.nome, base_url: config.base_url, api_key: '', versao: config.versao });
|
||||||
|
setFormOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (values: EvolutionConfigFormValues) => {
|
||||||
|
if (editing) {
|
||||||
|
return updateEvolutionConfig(editing.id, {
|
||||||
|
nome: values.nome,
|
||||||
|
base_url: values.base_url,
|
||||||
|
versao: values.versao || undefined,
|
||||||
|
...(values.api_key ? { api_key: values.api_key } : {}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return createEvolutionConfig({
|
||||||
|
nome: values.nome,
|
||||||
|
base_url: values.base_url,
|
||||||
|
api_key: values.api_key,
|
||||||
|
versao: values.versao || undefined,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'evolution-config'] });
|
||||||
|
toast.success(editing ? 'Configuração atualizada.' : 'Configuração criada.');
|
||||||
|
setFormOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar a configuração.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (id: string) => deleteEvolutionConfig(id),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'evolution-config'] });
|
||||||
|
toast.success('Configuração excluída.');
|
||||||
|
setDeleting(null);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível excluir a configuração.');
|
||||||
|
setDeleting(null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const testMutation = useMutation({
|
||||||
|
mutationFn: (id: string) => testarConexaoEvolution(id),
|
||||||
|
onMutate: (id) => setTestingId(id),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
toast.success(`Conexão OK (status ${result.status_http}${result.versao ? `, versão ${result.versao}` : ''}).`);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Falha ao testar a conexão.');
|
||||||
|
},
|
||||||
|
onSettled: () => setTestingId(null),
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<EvolutionConfig>[] = [
|
||||||
|
{ id: 'nome', header: 'Nome', primary: true, cell: (row) => row.nome },
|
||||||
|
{ id: 'base_url', header: 'URL base', cell: (row) => row.base_url },
|
||||||
|
{ id: 'api_key', header: 'API key', cell: (row) => <code className="text-xs">{row.api_key}</code> },
|
||||||
|
{ id: 'versao', header: 'Versão', cell: (row) => row.versao },
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => <Badge variant={row.ativo ? 'default' : 'outline'}>{row.ativo ? 'Ativo' : 'Inativo'}</Badge>,
|
||||||
|
},
|
||||||
|
{ id: 'criado_em', header: 'Criado em', hideOnMobileCard: true, cell: (row) => formatDate(row.criado_em) },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Evolution API</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Conexão usada para disparar mensagens de WhatsApp</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={openCreate}>
|
||||||
|
<Plus /> Nova configuração
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={configs ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhuma configuração cadastrada"
|
||||||
|
emptyDescription="Cadastre a conexão com a Evolution API para habilitar o envio de WhatsApp."
|
||||||
|
emptyAction={
|
||||||
|
<Button size="sm" onClick={openCreate}>
|
||||||
|
Nova configuração
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
rowActions={(row) => (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
loading={testingId === row.id}
|
||||||
|
onClick={() => testMutation.mutate(row.id)}
|
||||||
|
>
|
||||||
|
<Plug /> Testar conexão
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => openEdit(row)}>
|
||||||
|
Editar
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setDeleting(row)}>
|
||||||
|
Excluir
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={formOpen}
|
||||||
|
onOpenChange={setFormOpen}
|
||||||
|
title={editing ? 'Editar configuração' : 'Nova configuração'}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => setFormOpen(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
loading={saveMutation.isPending}
|
||||||
|
onClick={form.handleSubmit((values) => saveMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
Salvar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0"
|
||||||
|
onSubmit={form.handleSubmit((values) => saveMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<FormField label="Nome" error={form.formState.errors.nome?.message} required>
|
||||||
|
<Input {...form.register('nome')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="URL base" error={form.formState.errors.base_url?.message} required>
|
||||||
|
<Input placeholder="https://evolution.exemplo.com" {...form.register('base_url')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField
|
||||||
|
label="API key"
|
||||||
|
error={form.formState.errors.api_key?.message}
|
||||||
|
helpText={editing ? 'Deixe em branco para manter a chave atual' : undefined}
|
||||||
|
required={!editing}
|
||||||
|
>
|
||||||
|
<Input type="password" autoComplete="off" {...form.register('api_key')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Versão" error={form.formState.errors.versao?.message}>
|
||||||
|
<Input placeholder="2.3" {...form.register('versao')} />
|
||||||
|
</FormField>
|
||||||
|
</form>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={deleting !== null}
|
||||||
|
onOpenChange={(open) => !open && setDeleting(null)}
|
||||||
|
title={`Excluir "${deleting?.nome}"?`}
|
||||||
|
description="Só é possível excluir se nenhuma instância de WhatsApp estiver usando esta configuração."
|
||||||
|
confirmLabel="Excluir"
|
||||||
|
destructive
|
||||||
|
loading={deleteMutation.isPending}
|
||||||
|
onConfirm={() => deleting && deleteMutation.mutate(deleting.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,218 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { RefreshCw, Zap } from 'lucide-react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
atualizarFaturasAtrasadas,
|
||||||
|
gerarFaturasMes,
|
||||||
|
listFaturas,
|
||||||
|
marcarFaturaPaga,
|
||||||
|
type FaturaListItem,
|
||||||
|
type FaturaStatus,
|
||||||
|
} from '@/lib/api/faturas';
|
||||||
|
import { listTenants } from '@/lib/api/tenants';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { formatCurrency, formatDate } from '@/lib/format';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Combobox } from '@/components/ui/combobox';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { StatusPill } from '@/components/ui/status-pill';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
|
||||||
|
const STATUS_OPTIONS: { value: FaturaStatus | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os status' },
|
||||||
|
{ value: 'pendente', label: 'Pendente' },
|
||||||
|
{ value: 'pago', label: 'Pago' },
|
||||||
|
{ value: 'atrasado', label: 'Atrasado' },
|
||||||
|
{ value: 'cancelado', label: 'Cancelado' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const LIMIT = 20;
|
||||||
|
|
||||||
|
export default function FaturasPage() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [status, setStatus] = React.useState<FaturaStatus | 'todos'>('todos');
|
||||||
|
const [tenantId, setTenantId] = React.useState<string>('');
|
||||||
|
const [referencia, setReferencia] = React.useState('');
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
const [gerarOpen, setGerarOpen] = React.useState(false);
|
||||||
|
const [atualizarOpen, setAtualizarOpen] = React.useState(false);
|
||||||
|
|
||||||
|
const { data: tenantsOptions } = useQuery({
|
||||||
|
queryKey: ['master', 'tenants', 'combobox'],
|
||||||
|
queryFn: () => listTenants({ limit: 100 }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ['master', 'faturas', { status, tenantId, referencia, page }],
|
||||||
|
queryFn: () =>
|
||||||
|
listFaturas({
|
||||||
|
status: status === 'todos' ? undefined : status,
|
||||||
|
tenant_id: tenantId || undefined,
|
||||||
|
referencia: referencia || undefined,
|
||||||
|
page,
|
||||||
|
limit: LIMIT,
|
||||||
|
}),
|
||||||
|
placeholderData: (prev) => prev,
|
||||||
|
});
|
||||||
|
|
||||||
|
const marcarPagoMutation = useMutation({
|
||||||
|
mutationFn: (id: string) => marcarFaturaPaga(id),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'faturas'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'dashboard'] });
|
||||||
|
toast.success('Fatura marcada como paga.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível marcar a fatura como paga.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const gerarMutation = useMutation({
|
||||||
|
mutationFn: () => gerarFaturasMes(),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'faturas'] });
|
||||||
|
toast.success(`${result.criadas} fatura(s) geradas para ${result.referencia} (${result.ignoradas} já existiam).`);
|
||||||
|
setGerarOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível gerar as faturas do mês.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const atualizarMutation = useMutation({
|
||||||
|
mutationFn: () => atualizarFaturasAtrasadas(),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'faturas'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'tenants'] });
|
||||||
|
toast.success(`${result.atualizadas} fatura(s) marcadas como atrasadas (${result.tenants_afetados} tenant(s) afetados).`);
|
||||||
|
setAtualizarOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível atualizar as faturas atrasadas.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<FaturaListItem>[] = [
|
||||||
|
{ id: 'tenant', header: 'Tenant', primary: true, cell: (row) => row.tenant.razao_social },
|
||||||
|
{ id: 'referencia', header: 'Referência', cell: (row) => row.referencia },
|
||||||
|
{ id: 'valor', header: 'Valor', cell: (row) => formatCurrency(row.valor) },
|
||||||
|
{ id: 'vencimento', header: 'Vencimento', cell: (row) => formatDate(row.vencimento) },
|
||||||
|
{ id: 'status', header: 'Status', primary: true, cell: (row) => <StatusPill status={row.status} /> },
|
||||||
|
];
|
||||||
|
|
||||||
|
const tenantComboboxOptions = (tenantsOptions?.data ?? []).map((t) => ({
|
||||||
|
value: t.id,
|
||||||
|
label: t.nome_fantasia || t.razao_social,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Faturas</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Mensalidades cobradas dos tenants</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Button variant="outline" onClick={() => setAtualizarOpen(true)}>
|
||||||
|
<RefreshCw /> Atualizar atrasadas
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => setGerarOpen(true)}>
|
||||||
|
<Zap /> Gerar faturas do mês
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||||
|
<Select
|
||||||
|
value={status}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setStatus(value as FaturaStatus | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-48" aria-label="Filtrar por status">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{STATUS_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Combobox
|
||||||
|
options={[{ value: '', label: 'Todos os tenants' }, ...tenantComboboxOptions]}
|
||||||
|
value={tenantId}
|
||||||
|
onChange={(value) => {
|
||||||
|
setTenantId(value);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
placeholder="Todos os tenants"
|
||||||
|
searchPlaceholder="Buscar tenant..."
|
||||||
|
className="w-full sm:w-56"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
placeholder="Referência (aaaa-mm)"
|
||||||
|
value={referencia}
|
||||||
|
onChange={(e) => {
|
||||||
|
setReferencia(e.target.value);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
className="w-full sm:w-40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={data?.data ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhuma fatura encontrada"
|
||||||
|
emptyDescription="Ajuste os filtros ou gere as faturas do mês."
|
||||||
|
rowActions={(row) =>
|
||||||
|
row.status !== 'pago' && row.status !== 'cancelado' ? (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
loading={marcarPagoMutation.isPending && marcarPagoMutation.variables === row.id}
|
||||||
|
onClick={() => marcarPagoMutation.mutate(row.id)}
|
||||||
|
>
|
||||||
|
Marcar como paga
|
||||||
|
</Button>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
pagination={
|
||||||
|
data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={gerarOpen}
|
||||||
|
onOpenChange={setGerarOpen}
|
||||||
|
title="Gerar faturas do mês"
|
||||||
|
description="Cria uma fatura pendente para cada tenant que ainda não tem uma fatura no mês corrente. Tenants que já têm fatura para o mês não são duplicados."
|
||||||
|
confirmLabel="Gerar faturas"
|
||||||
|
loading={gerarMutation.isPending}
|
||||||
|
onConfirm={() => gerarMutation.mutate()}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={atualizarOpen}
|
||||||
|
onOpenChange={setAtualizarOpen}
|
||||||
|
title="Atualizar faturas atrasadas"
|
||||||
|
description="Marca como atrasada toda fatura pendente vencida, e move para inadimplente os tenants ativos afetados."
|
||||||
|
confirmLabel="Atualizar"
|
||||||
|
loading={atualizarMutation.isPending}
|
||||||
|
onConfirm={() => atualizarMutation.mutate()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { cookies } from 'next/headers';
|
||||||
|
|
||||||
|
import { MasterShell } from '@/components/layout/master-shell';
|
||||||
|
import { SIDEBAR_COOKIE, readSidebarCollapsedCookie } from '@/lib/layout/sidebar-cookie';
|
||||||
|
|
||||||
|
export default async function MasterLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
const cookieStore = await cookies();
|
||||||
|
const collapsed = readSidebarCollapsedCookie(cookieStore.get(SIDEBAR_COOKIE)?.value);
|
||||||
|
|
||||||
|
return <MasterShell initialCollapsed={collapsed}>{children}</MasterShell>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,248 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Plus } from 'lucide-react';
|
||||||
|
|
||||||
|
import { createPlano, deletePlano, listPlanos, updatePlano, type Plano } from '@/lib/api/planos';
|
||||||
|
import { planoSchema, type PlanoFormValues } from '@/lib/validators/planos';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { formatCurrency } from '@/lib/format';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { ConfirmDialog } from '@/components/domain/confirm-dialog';
|
||||||
|
|
||||||
|
/** `<input type="number">` vazio deve virar `undefined` (ilimitado), não `NaN`/`0`. */
|
||||||
|
function toOptionalInt(value: string): number | undefined {
|
||||||
|
return value === '' ? undefined : Number(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PlanosPage() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { data: planos, isLoading } = useQuery({
|
||||||
|
queryKey: ['master', 'planos'],
|
||||||
|
queryFn: () => listPlanos(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const [editing, setEditing] = React.useState<Plano | null>(null);
|
||||||
|
const [formOpen, setFormOpen] = React.useState(false);
|
||||||
|
const [deleting, setDeleting] = React.useState<Plano | null>(null);
|
||||||
|
|
||||||
|
const form = useForm<PlanoFormValues>({ resolver: zodResolver(planoSchema) });
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
setEditing(null);
|
||||||
|
form.reset({
|
||||||
|
nome: '',
|
||||||
|
descricao: '',
|
||||||
|
valor_mensal: 0,
|
||||||
|
limite_customers: undefined,
|
||||||
|
limite_usuarios: undefined,
|
||||||
|
limite_instancias_whatsapp: undefined,
|
||||||
|
});
|
||||||
|
setFormOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEdit(plano: Plano) {
|
||||||
|
setEditing(plano);
|
||||||
|
form.reset({
|
||||||
|
nome: plano.nome,
|
||||||
|
descricao: plano.descricao ?? '',
|
||||||
|
valor_mensal: Number(plano.valor_mensal),
|
||||||
|
limite_customers: plano.limite_customers ?? undefined,
|
||||||
|
limite_usuarios: plano.limite_usuarios ?? undefined,
|
||||||
|
limite_instancias_whatsapp: plano.limite_instancias_whatsapp,
|
||||||
|
});
|
||||||
|
setFormOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (values: PlanoFormValues) =>
|
||||||
|
editing ? updatePlano(editing.id, values) : createPlano(values),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'planos'] });
|
||||||
|
toast.success(editing ? 'Plano atualizado.' : 'Plano criado.');
|
||||||
|
setFormOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar o plano.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (id: string) => deletePlano(id),
|
||||||
|
onSuccess: (result) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'planos'] });
|
||||||
|
toast.success(
|
||||||
|
result.deletado ? 'Plano excluído.' : 'Plano em uso por tenant(s) — desativado em vez de excluído.',
|
||||||
|
);
|
||||||
|
setDeleting(null);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível excluir o plano.');
|
||||||
|
setDeleting(null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<Plano>[] = [
|
||||||
|
{ id: 'nome', header: 'Plano', primary: true, cell: (row) => row.nome },
|
||||||
|
{
|
||||||
|
id: 'valor',
|
||||||
|
header: 'Valor mensal',
|
||||||
|
cell: (row) => formatCurrency(row.valor_mensal),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'limites',
|
||||||
|
header: 'Limites',
|
||||||
|
cell: (row) => (
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{row.limite_customers ?? '∞'} clientes · {row.limite_usuarios ?? '∞'} usuários ·{' '}
|
||||||
|
{row.limite_instancias_whatsapp} WhatsApp
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => (
|
||||||
|
<Badge variant={row.ativo ? 'default' : 'outline'}>{row.ativo ? 'Ativo' : 'Inativo'}</Badge>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Planos</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Planos de assinatura oferecidos aos tenants</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={openCreate}>
|
||||||
|
<Plus /> Novo plano
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={planos ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhum plano cadastrado"
|
||||||
|
emptyDescription="Crie o primeiro plano para poder cadastrar tenants."
|
||||||
|
emptyAction={
|
||||||
|
<Button size="sm" onClick={openCreate}>
|
||||||
|
Novo plano
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
rowActions={(row) => (
|
||||||
|
<>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => openEdit(row)}>
|
||||||
|
Editar
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setDeleting(row)}>
|
||||||
|
Excluir
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={formOpen}
|
||||||
|
onOpenChange={setFormOpen}
|
||||||
|
title={editing ? 'Editar plano' : 'Novo plano'}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => setFormOpen(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
loading={saveMutation.isPending}
|
||||||
|
onClick={form.handleSubmit((values) => saveMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
Salvar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0"
|
||||||
|
onSubmit={form.handleSubmit((values) => saveMutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<FormField label="Nome" error={form.formState.errors.nome?.message} required>
|
||||||
|
<Input {...form.register('nome')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Descrição" error={form.formState.errors.descricao?.message}>
|
||||||
|
<Textarea rows={2} {...form.register('descricao')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField
|
||||||
|
label="Valor mensal (R$)"
|
||||||
|
error={form.formState.errors.valor_mensal?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
{...form.register('valor_mensal', { valueAsNumber: true })}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||||
|
<FormField
|
||||||
|
label="Limite de clientes"
|
||||||
|
helpText="Vazio = ilimitado"
|
||||||
|
error={form.formState.errors.limite_customers?.message}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
{...form.register('limite_customers', { setValueAs: toOptionalInt })}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField
|
||||||
|
label="Limite de usuários"
|
||||||
|
helpText="Vazio = ilimitado"
|
||||||
|
error={form.formState.errors.limite_usuarios?.message}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
{...form.register('limite_usuarios', { setValueAs: toOptionalInt })}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField
|
||||||
|
label="Instâncias WhatsApp"
|
||||||
|
error={form.formState.errors.limite_instancias_whatsapp?.message}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
{...form.register('limite_instancias_whatsapp', { setValueAs: toOptionalInt })}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={deleting !== null}
|
||||||
|
onOpenChange={(open) => !open && setDeleting(null)}
|
||||||
|
title={`Excluir "${deleting?.nome}"?`}
|
||||||
|
description="Se este plano estiver em uso por algum tenant não cancelado, ele será desativado em vez de excluído."
|
||||||
|
confirmLabel="Excluir"
|
||||||
|
destructive
|
||||||
|
loading={deleteMutation.isPending}
|
||||||
|
onConfirm={() => deleting && deleteMutation.mutate(deleting.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,271 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useParams } from 'next/navigation';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Package, ShoppingCart, Users } from 'lucide-react';
|
||||||
|
|
||||||
|
import { getTenant, updateTenant, type TenantDetail } from '@/lib/api/tenants';
|
||||||
|
import { listPlanos } from '@/lib/api/planos';
|
||||||
|
import { marcarFaturaPaga } from '@/lib/api/faturas';
|
||||||
|
import type { Fatura } from '@/lib/api/faturas';
|
||||||
|
import { updateTenantSchema, type UpdateTenantFormValues } from '@/lib/validators/tenants';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { formatCurrency, formatDate } from '@/lib/format';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import { StatusPill } from '@/components/ui/status-pill';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import { StatCard } from '@/components/domain/stat-card';
|
||||||
|
import { TenantStatusDialog } from '@/components/domain/tenant-status-dialog';
|
||||||
|
|
||||||
|
export default function TenantDetailPage() {
|
||||||
|
const params = useParams<{ id: string }>();
|
||||||
|
const tenantId = params.id;
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [statusDialogOpen, setStatusDialogOpen] = React.useState(false);
|
||||||
|
|
||||||
|
const { data: tenant, isLoading } = useQuery({
|
||||||
|
queryKey: ['master', 'tenants', tenantId],
|
||||||
|
queryFn: () => getTenant(tenantId),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading || !tenant) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<Skeleton className="h-8 w-64" />
|
||||||
|
<Skeleton className="h-64 w-full" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">
|
||||||
|
{tenant.nome_fantasia || tenant.razao_social}
|
||||||
|
</h1>
|
||||||
|
<StatusPill status={tenant.status} />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">{tenant.email_contato}</p>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" onClick={() => setStatusDialogOpen(true)}>
|
||||||
|
Mudar status
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tabs defaultValue="dados">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="dados">Dados cadastrais</TabsTrigger>
|
||||||
|
<TabsTrigger value="faturas">Faturas</TabsTrigger>
|
||||||
|
<TabsTrigger value="uso">Uso</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="dados" className="pt-4">
|
||||||
|
<DadosCadastraisForm tenantId={tenantId} tenant={tenant} />
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="faturas" className="pt-4">
|
||||||
|
<FaturasTab faturas={tenant.faturas} tenantId={tenantId} />
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="uso" className="pt-4">
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||||
|
<StatCard label="Usuários" value={String(tenant._count.usuarios)} icon={Users} />
|
||||||
|
<StatCard
|
||||||
|
label="Clientes"
|
||||||
|
value={`${tenant._count.customers}${tenant.plano.limite_customers ? ` / ${tenant.plano.limite_customers}` : ''}`}
|
||||||
|
icon={Package}
|
||||||
|
/>
|
||||||
|
<StatCard label="Vendas" value={String(tenant._count.vendas)} icon={ShoppingCart} />
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
<TenantStatusDialog
|
||||||
|
tenant={statusDialogOpen ? { id: tenant.id, razao_social: tenant.razao_social, status: tenant.status } : null}
|
||||||
|
onOpenChange={setStatusDialogOpen}
|
||||||
|
onSuccess={() => queryClient.invalidateQueries({ queryKey: ['master', 'tenants', tenantId] })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DadosCadastraisForm({ tenantId, tenant }: { tenantId: string; tenant: TenantDetail }) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { data: planos } = useQuery({
|
||||||
|
queryKey: ['master', 'planos', { ativo: true }],
|
||||||
|
queryFn: () => listPlanos({ ativo: true }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const form = useForm<UpdateTenantFormValues>({
|
||||||
|
resolver: zodResolver(updateTenantSchema),
|
||||||
|
defaultValues: {
|
||||||
|
razao_social: tenant.razao_social,
|
||||||
|
nome_fantasia: tenant.nome_fantasia ?? '',
|
||||||
|
documento: tenant.documento ?? '',
|
||||||
|
email_contato: tenant.email_contato,
|
||||||
|
telefone: tenant.telefone ?? '',
|
||||||
|
plano_id: tenant.plano_id,
|
||||||
|
dia_vencimento_mensalidade: tenant.dia_vencimento_mensalidade,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: (values: UpdateTenantFormValues) =>
|
||||||
|
updateTenant(tenantId, {
|
||||||
|
...values,
|
||||||
|
nome_fantasia: values.nome_fantasia || undefined,
|
||||||
|
documento: values.documento || undefined,
|
||||||
|
telefone: values.telefone || undefined,
|
||||||
|
}),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'tenants', tenantId] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'tenants'] });
|
||||||
|
toast.success('Dados do tenant atualizados.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível salvar as alterações.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="max-w-2xl">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Dados cadastrais</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Razão social" error={form.formState.errors.razao_social?.message} required>
|
||||||
|
<Input {...form.register('razao_social')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Nome fantasia" error={form.formState.errors.nome_fantasia?.message}>
|
||||||
|
<Input {...form.register('nome_fantasia')} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Documento" error={form.formState.errors.documento?.message}>
|
||||||
|
<Input {...form.register('documento')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Telefone" error={form.formState.errors.telefone?.message}>
|
||||||
|
<Input {...form.register('telefone')} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<FormField label="E-mail de contato" error={form.formState.errors.email_contato?.message} required>
|
||||||
|
<Input type="email" {...form.register('email_contato')} />
|
||||||
|
</FormField>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField
|
||||||
|
label="Plano"
|
||||||
|
id="plano_id"
|
||||||
|
error={form.formState.errors.plano_id?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
value={form.watch('plano_id')}
|
||||||
|
onValueChange={(value) => form.setValue('plano_id', value, { shouldValidate: true })}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="plano_id" className="w-full">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{(planos ?? []).map((plano) => (
|
||||||
|
<SelectItem key={plano.id} value={plano.id}>
|
||||||
|
{plano.nome}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
{!planos?.some((p) => p.id === tenant.plano_id) && (
|
||||||
|
<SelectItem value={tenant.plano_id}>{tenant.plano.nome} (inativo)</SelectItem>
|
||||||
|
)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
<FormField
|
||||||
|
label="Dia de vencimento da mensalidade"
|
||||||
|
error={form.formState.errors.dia_vencimento_mensalidade?.message}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max="28"
|
||||||
|
{...form.register('dia_vencimento_mensalidade', {
|
||||||
|
setValueAs: (v) => (v === '' ? undefined : Number(v)),
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button type="submit" loading={mutation.isPending}>
|
||||||
|
Salvar alterações
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FaturasTab({ faturas, tenantId }: { faturas: Fatura[]; tenantId: string }) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const marcarPagoMutation = useMutation({
|
||||||
|
mutationFn: (id: string) => marcarFaturaPaga(id),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'tenants', tenantId] });
|
||||||
|
toast.success('Fatura marcada como paga.');
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível marcar a fatura como paga.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<Fatura>[] = [
|
||||||
|
{ id: 'referencia', header: 'Referência', primary: true, cell: (row) => row.referencia },
|
||||||
|
{ id: 'valor', header: 'Valor', cell: (row) => formatCurrency(row.valor) },
|
||||||
|
{ id: 'vencimento', header: 'Vencimento', cell: (row) => formatDate(row.vencimento) },
|
||||||
|
{ id: 'status', header: 'Status', primary: true, cell: (row) => <StatusPill status={row.status} /> },
|
||||||
|
{ id: 'pago_em', header: 'Pago em', cell: (row) => formatDate(row.pago_em) },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<p className="text-sm text-muted-foreground">Últimas 5 faturas deste tenant.</p>
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={faturas}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
emptyTitle="Nenhuma fatura gerada ainda"
|
||||||
|
rowActions={(row) =>
|
||||||
|
row.status !== 'pago' ? (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
loading={marcarPagoMutation.isPending && marcarPagoMutation.variables === row.id}
|
||||||
|
onClick={() => marcarPagoMutation.mutate(row.id)}
|
||||||
|
>
|
||||||
|
Marcar como paga
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Badge variant="outline">Paga</Badge>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,238 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Copy } from 'lucide-react';
|
||||||
|
|
||||||
|
import { createTenant, type CreateTenantResult } from '@/lib/api/tenants';
|
||||||
|
import { listPlanos } from '@/lib/api/planos';
|
||||||
|
import { createTenantSchema, type CreateTenantFormValues } from '@/lib/validators/tenants';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
|
||||||
|
export default function NovoTenantPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [created, setCreated] = React.useState<CreateTenantResult | null>(null);
|
||||||
|
|
||||||
|
const { data: planos } = useQuery({
|
||||||
|
queryKey: ['master', 'planos', { ativo: true }],
|
||||||
|
queryFn: () => listPlanos({ ativo: true }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const form = useForm<CreateTenantFormValues>({
|
||||||
|
resolver: zodResolver(createTenantSchema),
|
||||||
|
defaultValues: {
|
||||||
|
razao_social: '',
|
||||||
|
nome_fantasia: '',
|
||||||
|
documento: '',
|
||||||
|
email_contato: '',
|
||||||
|
telefone: '',
|
||||||
|
plano_id: '',
|
||||||
|
admin_nome: '',
|
||||||
|
admin_email: '',
|
||||||
|
admin_senha: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: (values: CreateTenantFormValues) =>
|
||||||
|
createTenant({
|
||||||
|
razao_social: values.razao_social,
|
||||||
|
nome_fantasia: values.nome_fantasia || undefined,
|
||||||
|
documento: values.documento || undefined,
|
||||||
|
email_contato: values.email_contato,
|
||||||
|
telefone: values.telefone || undefined,
|
||||||
|
plano_id: values.plano_id,
|
||||||
|
dia_vencimento_mensalidade: values.dia_vencimento_mensalidade,
|
||||||
|
admin: {
|
||||||
|
nome: values.admin_nome,
|
||||||
|
email: values.admin_email,
|
||||||
|
senha: values.admin_senha || undefined,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
onSuccess: (result) => setCreated(result),
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível criar o tenant.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
async function copySenha() {
|
||||||
|
if (!created) return;
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(created.admin.senha_provisoria);
|
||||||
|
toast.success('Senha copiada.');
|
||||||
|
} catch {
|
||||||
|
toast.error('Não foi possível copiar automaticamente — selecione e copie manualmente.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Novo tenant</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Cadastro de um novo cliente da plataforma</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form
|
||||||
|
className="flex max-w-2xl flex-col gap-6"
|
||||||
|
onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Dados cadastrais</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Razão social" error={form.formState.errors.razao_social?.message} required>
|
||||||
|
<Input {...form.register('razao_social')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Nome fantasia" error={form.formState.errors.nome_fantasia?.message}>
|
||||||
|
<Input {...form.register('nome_fantasia')} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Documento (CNPJ/CPF)" error={form.formState.errors.documento?.message}>
|
||||||
|
<Input {...form.register('documento')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Telefone" error={form.formState.errors.telefone?.message}>
|
||||||
|
<Input {...form.register('telefone')} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<FormField
|
||||||
|
label="E-mail de contato"
|
||||||
|
error={form.formState.errors.email_contato?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Input type="email" {...form.register('email_contato')} />
|
||||||
|
</FormField>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField
|
||||||
|
label="Plano"
|
||||||
|
id="plano_id"
|
||||||
|
error={form.formState.errors.plano_id?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
value={form.watch('plano_id')}
|
||||||
|
onValueChange={(value) => form.setValue('plano_id', value, { shouldValidate: true })}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="plano_id" className="w-full">
|
||||||
|
<SelectValue placeholder="Selecione um plano" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{(planos ?? []).map((plano) => (
|
||||||
|
<SelectItem key={plano.id} value={plano.id}>
|
||||||
|
{plano.nome}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
<FormField
|
||||||
|
label="Dia de vencimento da mensalidade"
|
||||||
|
helpText="1 a 28 — vazio usa o padrão do sistema"
|
||||||
|
error={form.formState.errors.dia_vencimento_mensalidade?.message}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max="28"
|
||||||
|
{...form.register('dia_vencimento_mensalidade', {
|
||||||
|
setValueAs: (v) => (v === '' ? undefined : Number(v)),
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Primeiro usuário (administrador do tenant)</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Nome" error={form.formState.errors.admin_nome?.message} required>
|
||||||
|
<Input {...form.register('admin_nome')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="E-mail" error={form.formState.errors.admin_email?.message} required>
|
||||||
|
<Input type="email" {...form.register('admin_email')} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
<FormField
|
||||||
|
label="Senha provisória"
|
||||||
|
helpText="Deixe em branco para o sistema gerar uma senha automaticamente"
|
||||||
|
error={form.formState.errors.admin_senha?.message}
|
||||||
|
>
|
||||||
|
<Input type="text" autoComplete="off" {...form.register('admin_senha')} />
|
||||||
|
</FormField>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Button type="submit" loading={mutation.isPending}>
|
||||||
|
Criar tenant
|
||||||
|
</Button>
|
||||||
|
<Button type="button" variant="outline" onClick={() => router.push('/master/tenants')}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={created !== null}
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
if (!open && created) router.push(`/master/tenants/${created.tenant.id}`);
|
||||||
|
}}
|
||||||
|
title="Tenant criado com sucesso"
|
||||||
|
description="Copie e repasse a senha provisória ao cliente agora — ela não será mostrada novamente."
|
||||||
|
footer={
|
||||||
|
<Button
|
||||||
|
className="w-full"
|
||||||
|
onClick={() => created && router.push(`/master/tenants/${created.tenant.id}`)}
|
||||||
|
>
|
||||||
|
Concluir
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{created && (
|
||||||
|
<div className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">Administrador</p>
|
||||||
|
<p className="font-medium text-foreground">
|
||||||
|
{created.admin.nome} · {created.admin.email}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<p className="text-sm font-medium text-foreground">Senha provisória</p>
|
||||||
|
<div className="flex items-center gap-2 rounded-lg border border-warning/30 bg-warning/10 p-3">
|
||||||
|
<code className="flex-1 font-mono text-base font-semibold text-foreground select-all">
|
||||||
|
{created.admin.senha_provisoria}
|
||||||
|
</code>
|
||||||
|
<Button type="button" variant="ghost" size="icon-sm" onClick={copySenha} aria-label="Copiar senha">
|
||||||
|
<Copy className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-warning">
|
||||||
|
Atenção: esta senha não fica salva em texto puro em nenhum lugar e não será exibida
|
||||||
|
novamente. Copie e repasse ao cliente agora.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ResponsiveDialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,152 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Plus, Search } from 'lucide-react';
|
||||||
|
|
||||||
|
import { listTenants, type TenantListItem, type TenantStatus } from '@/lib/api/tenants';
|
||||||
|
import { formatDate } from '@/lib/format';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { StatusPill } from '@/components/ui/status-pill';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { TenantStatusDialog } from '@/components/domain/tenant-status-dialog';
|
||||||
|
|
||||||
|
const STATUS_OPTIONS: { value: TenantStatus | 'todos'; label: string }[] = [
|
||||||
|
{ value: 'todos', label: 'Todos os status' },
|
||||||
|
{ value: 'trial', label: 'Trial' },
|
||||||
|
{ value: 'ativo', label: 'Ativo' },
|
||||||
|
{ value: 'inadimplente', label: 'Inadimplente' },
|
||||||
|
{ value: 'suspenso', label: 'Suspenso' },
|
||||||
|
{ value: 'cancelado', label: 'Cancelado' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const LIMIT = 20;
|
||||||
|
|
||||||
|
export default function TenantsPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [busca, setBusca] = React.useState('');
|
||||||
|
const [status, setStatus] = React.useState<TenantStatus | 'todos'>('todos');
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
const [statusTarget, setStatusTarget] = React.useState<TenantListItem | null>(null);
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ['master', 'tenants', { busca, status, page }],
|
||||||
|
queryFn: () =>
|
||||||
|
listTenants({
|
||||||
|
busca: busca || undefined,
|
||||||
|
status: status === 'todos' ? undefined : status,
|
||||||
|
page,
|
||||||
|
limit: LIMIT,
|
||||||
|
}),
|
||||||
|
placeholderData: (prev) => prev,
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: DataTableColumn<TenantListItem>[] = [
|
||||||
|
{
|
||||||
|
id: 'nome',
|
||||||
|
header: 'Tenant',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="font-medium text-foreground">{row.nome_fantasia || row.razao_social}</span>
|
||||||
|
{row.documento && <span className="text-xs text-muted-foreground">{row.documento}</span>}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
primary: true,
|
||||||
|
cell: (row) => <StatusPill status={row.status} />,
|
||||||
|
},
|
||||||
|
{ id: 'plano', header: 'Plano', cell: (row) => row.plano?.nome ?? '—' },
|
||||||
|
{ id: 'criado_em', header: 'Criado em', cell: (row) => formatDate(row.criado_em) },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Tenants</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Clientes da plataforma SeConectai Vendas</p>
|
||||||
|
</div>
|
||||||
|
<Button asChild>
|
||||||
|
<Link href="/master/tenants/novo">
|
||||||
|
<Plus /> Novo tenant
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||||
|
<div className="relative flex-1 sm:max-w-xs">
|
||||||
|
<Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-neutral-500" />
|
||||||
|
<Input
|
||||||
|
placeholder="Buscar por nome ou documento..."
|
||||||
|
className="pl-9"
|
||||||
|
value={busca}
|
||||||
|
onChange={(e) => {
|
||||||
|
setBusca(e.target.value);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Select
|
||||||
|
value={status}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setStatus(value as TenantStatus | 'todos');
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-48" aria-label="Filtrar por status">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{STATUS_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={data?.data ?? []}
|
||||||
|
keyField={(row) => row.id}
|
||||||
|
loading={isLoading}
|
||||||
|
emptyTitle="Nenhum tenant encontrado"
|
||||||
|
emptyDescription="Ajuste os filtros ou cadastre um novo tenant."
|
||||||
|
emptyAction={
|
||||||
|
<Button size="sm" asChild>
|
||||||
|
<Link href="/master/tenants/novo">Novo tenant</Link>
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
onRowClick={(row) => router.push(`/master/tenants/${row.id}`)}
|
||||||
|
rowActions={(row) => (
|
||||||
|
<>
|
||||||
|
<Button variant="ghost" size="sm" asChild>
|
||||||
|
<Link href={`/master/tenants/${row.id}`}>Ver</Link>
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setStatusTarget(row)}>
|
||||||
|
Mudar status
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
pagination={
|
||||||
|
data ? { page: data.meta.page, limit: data.meta.limit, total: data.meta.total, onPageChange: setPage } : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TenantStatusDialog
|
||||||
|
tenant={statusTarget}
|
||||||
|
onOpenChange={(open) => !open && setStatusTarget(null)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { redirect } from 'next/navigation';
|
||||||
|
|
||||||
|
export default function RootPage() {
|
||||||
|
redirect('/login');
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "radix-nova",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "app/globals.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide",
|
||||||
|
"rtl": false,
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"menuColor": "default",
|
||||||
|
"menuAccent": "subtle",
|
||||||
|
"registries": {}
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import type { ReactNode } from 'react';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
|
||||||
|
interface ConfirmDialogProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
confirmLabel?: string;
|
||||||
|
cancelLabel?: string;
|
||||||
|
destructive?: boolean;
|
||||||
|
loading?: boolean;
|
||||||
|
/** Desabilita o botão de confirmar (ex: falta escolher uma opção obrigatória em `children`). */
|
||||||
|
confirmDisabled?: boolean;
|
||||||
|
onConfirm: () => void;
|
||||||
|
/** Conteúdo extra entre a descrição e os botões (ex: um `Select` obrigatório) — opcional. */
|
||||||
|
children?: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Confirmação explícita antes de ações sensíveis (mudar status de tenant,
|
||||||
|
* excluir plano, disparar geração de faturas etc) — Etapa 15. `children`
|
||||||
|
* é opcional (Etapa 17: usado para pedir a forma de pagamento antes de
|
||||||
|
* marcar parcelas selecionadas como pagas em lote).
|
||||||
|
*/
|
||||||
|
export function ConfirmDialog({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
confirmLabel = 'Confirmar',
|
||||||
|
cancelLabel = 'Cancelar',
|
||||||
|
destructive = false,
|
||||||
|
loading = false,
|
||||||
|
confirmDisabled = false,
|
||||||
|
onConfirm,
|
||||||
|
children,
|
||||||
|
}: ConfirmDialogProps) {
|
||||||
|
return (
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={open}
|
||||||
|
onOpenChange={onOpenChange}
|
||||||
|
title={title}
|
||||||
|
description={description}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
|
||||||
|
{cancelLabel}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={destructive ? 'destructive' : 'primary'}
|
||||||
|
loading={loading}
|
||||||
|
disabled={confirmDisabled}
|
||||||
|
onClick={onConfirm}
|
||||||
|
>
|
||||||
|
{confirmLabel}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{children ?? <div className="sr-only" />}
|
||||||
|
</ResponsiveDialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import { createCustomer, type Customer } from '@/lib/api/customers';
|
||||||
|
import { customerSchema, type CustomerFormValues } from '@/lib/validators/customers';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
|
||||||
|
interface CustomerQuickCreateDialogProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
onCreated: (customer: Customer) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cadastro rápido de cliente sem sair do fluxo de nova venda (Etapa 17,
|
||||||
|
* critério de aceite "não perder o que já foi preenchido na venda") — só
|
||||||
|
* os campos mínimos; o resto pode ser completado depois em
|
||||||
|
* `/app/clientes/:id`.
|
||||||
|
*/
|
||||||
|
export function CustomerQuickCreateDialog({ open, onOpenChange, onCreated }: CustomerQuickCreateDialogProps) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const form = useForm<CustomerFormValues>({
|
||||||
|
resolver: zodResolver(customerSchema),
|
||||||
|
defaultValues: { razao_social: '', documento: '', email: '', telefone_whatsapp: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: (values: CustomerFormValues) =>
|
||||||
|
createCustomer({
|
||||||
|
razao_social: values.razao_social,
|
||||||
|
documento: values.documento || undefined,
|
||||||
|
email: values.email || undefined,
|
||||||
|
telefone_whatsapp: values.telefone_whatsapp || undefined,
|
||||||
|
}),
|
||||||
|
onSuccess: (customer) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tenant', 'customers'] });
|
||||||
|
toast.success('Cliente cadastrado.');
|
||||||
|
form.reset({ razao_social: '', documento: '', email: '', telefone_whatsapp: '' });
|
||||||
|
onCreated(customer);
|
||||||
|
onOpenChange(false);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível cadastrar o cliente.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={open}
|
||||||
|
onOpenChange={onOpenChange}
|
||||||
|
title="Cadastro rápido de cliente"
|
||||||
|
description="Só o essencial — complete o resto depois no cadastro do cliente."
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button loading={mutation.isPending} onClick={form.handleSubmit((values) => mutation.mutate(values))}>
|
||||||
|
Cadastrar e usar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0"
|
||||||
|
onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
|
||||||
|
>
|
||||||
|
<FormField label="Razão social" error={form.formState.errors.razao_social?.message} required>
|
||||||
|
<Input {...form.register('razao_social')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Documento (CPF/CNPJ)" error={form.formState.errors.documento?.message}>
|
||||||
|
<Input {...form.register('documento')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Telefone/WhatsApp" error={form.formState.errors.telefone_whatsapp?.message}>
|
||||||
|
<Input {...form.register('telefone_whatsapp')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="E-mail" error={form.formState.errors.email?.message}>
|
||||||
|
<Input type="email" {...form.register('email')} />
|
||||||
|
</FormField>
|
||||||
|
</form>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import { marcarRecebimentoPago, type FormaPagamento } from '@/lib/api/sale-payments';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { formatCurrency } from '@/lib/format';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
|
||||||
|
const FORMAS: { value: FormaPagamento; label: string }[] = [
|
||||||
|
{ value: 'pix', label: 'Pix' },
|
||||||
|
{ value: 'boleto', label: 'Boleto' },
|
||||||
|
{ value: 'cartao', label: 'Cartão' },
|
||||||
|
{ value: 'dinheiro', label: 'Dinheiro' },
|
||||||
|
];
|
||||||
|
|
||||||
|
interface MarcarPagoDialogProps {
|
||||||
|
parcela: { id: string; valor: string } | null;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
onSuccess: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Reaproveitado no detalhe da venda (aba Parcelas) e em `/app/recebimentos`. */
|
||||||
|
export function MarcarPagoDialog({ parcela, onOpenChange, onSuccess }: MarcarPagoDialogProps) {
|
||||||
|
const [forma, setForma] = React.useState<FormaPagamento | ''>('');
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
setForma('');
|
||||||
|
}, [parcela?.id]);
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: () => marcarRecebimentoPago(parcela!.id, forma as FormaPagamento),
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success('Parcela marcada como paga.');
|
||||||
|
onOpenChange(false);
|
||||||
|
onSuccess();
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível marcar a parcela como paga.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={parcela !== null}
|
||||||
|
onOpenChange={onOpenChange}
|
||||||
|
title="Marcar parcela como paga"
|
||||||
|
description={parcela ? `Valor: ${formatCurrency(parcela.valor)}` : undefined}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={mutation.isPending}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button disabled={!forma} loading={mutation.isPending} onClick={() => mutation.mutate()}>
|
||||||
|
Confirmar pagamento
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0">
|
||||||
|
<Select value={forma} onValueChange={(value) => setForma(value as FormaPagamento)}>
|
||||||
|
<SelectTrigger className="w-full" aria-label="Forma de pagamento">
|
||||||
|
<SelectValue placeholder="Selecione a forma de pagamento" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{FORMAS.map((f) => (
|
||||||
|
<SelectItem key={f.value} value={f.value}>
|
||||||
|
{f.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,116 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
|
||||||
|
import { productSchema, type ProductFormValues } from '@/lib/validators/products';
|
||||||
|
import type { ItemTipo } from '@/lib/api/products';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
|
||||||
|
interface ProductFormProps {
|
||||||
|
defaultValues: ProductFormValues;
|
||||||
|
onSubmit: (values: ProductFormValues) => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
submitting: boolean;
|
||||||
|
submitLabel: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Campos de produto/serviço, compartilhado entre `/app/produtos/novo` e `/app/produtos/:id` (Etapa 16). */
|
||||||
|
export function ProductForm({ defaultValues, onSubmit, onCancel, submitting, submitLabel }: ProductFormProps) {
|
||||||
|
const form = useForm<ProductFormValues>({ resolver: zodResolver(productSchema), defaultValues });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form className="flex max-w-2xl flex-col gap-6" onSubmit={form.handleSubmit(onSubmit)}>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Dados do item</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-[160px_1fr]">
|
||||||
|
<FormField label="Tipo" id="tipo" error={form.formState.errors.tipo?.message} required>
|
||||||
|
<Select
|
||||||
|
value={form.watch('tipo')}
|
||||||
|
onValueChange={(value) => form.setValue('tipo', value as ItemTipo, { shouldValidate: true })}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="tipo" className="w-full">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="produto">Produto</SelectItem>
|
||||||
|
<SelectItem value="servico">Serviço</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Nome" error={form.formState.errors.nome?.message} required>
|
||||||
|
<Input {...form.register('nome')} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FormField label="Descrição" error={form.formState.errors.descricao?.message}>
|
||||||
|
<Textarea rows={2} {...form.register('descricao')} />
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="SKU" helpText="Opcional — precisa ser único no seu catálogo" error={form.formState.errors.sku?.message}>
|
||||||
|
<Input {...form.register('sku')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Unidade" helpText="Ex: un, kg, hora" error={form.formState.errors.unidade?.message}>
|
||||||
|
<Input {...form.register('unidade')} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField label="Valor de venda (R$)" error={form.formState.errors.valor_venda?.message} required>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
{...form.register('valor_venda', { valueAsNumber: true })}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Valor de custo (R$)" helpText="Opcional" error={form.formState.errors.valor_custo?.message}>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
{...form.register('valor_custo', {
|
||||||
|
setValueAs: (v) => (v === '' ? undefined : Number(v)),
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FormField label="Recorrente" id="recorrente" error={form.formState.errors.recorrente?.message}>
|
||||||
|
<Select
|
||||||
|
value={form.watch('recorrente') ? 'true' : 'false'}
|
||||||
|
onValueChange={(value) => form.setValue('recorrente', value === 'true', { shouldValidate: true })}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="recorrente" className="w-full sm:w-48">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="false">Não</SelectItem>
|
||||||
|
<SelectItem value="true">Sim — cobrança recorrente</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormField>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Button type="submit" loading={submitting}>
|
||||||
|
{submitLabel}
|
||||||
|
</Button>
|
||||||
|
<Button type="button" variant="outline" onClick={onCancel}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import type { LucideIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
interface StatCardProps {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
icon?: LucideIcon;
|
||||||
|
loading?: boolean;
|
||||||
|
tone?: 'default' | 'success' | 'warning' | 'danger';
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TONE_CLASSNAMES: Record<NonNullable<StatCardProps['tone']>, string> = {
|
||||||
|
default: 'text-foreground',
|
||||||
|
success: 'text-success',
|
||||||
|
warning: 'text-warning',
|
||||||
|
danger: 'text-danger',
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Card de resumo numérico (dashboards) — Etapa 15. */
|
||||||
|
export function StatCard({ label, value, icon: Icon, loading, tone = 'default', className }: StatCardProps) {
|
||||||
|
return (
|
||||||
|
<Card className={className}>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
|
||||||
|
{Icon && <Icon className="size-4 text-muted-foreground" aria-hidden />}
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{loading ? (
|
||||||
|
<Skeleton className="h-8 w-24" />
|
||||||
|
) : (
|
||||||
|
<p className={cn('text-2xl font-semibold tabular-nums', TONE_CLASSNAMES[tone])}>{value}</p>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import { updateTenantStatus, type TenantStatusTransition } from '@/lib/api/tenants';
|
||||||
|
import { ApiError } from '@/lib/api/client';
|
||||||
|
import { toast } from '@/lib/toast';
|
||||||
|
import { STATUS_PILL_MAP } from '@/components/ui/status-pill';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
|
||||||
|
const TRANSITIONS: TenantStatusTransition[] = ['ativo', 'inadimplente', 'suspenso', 'cancelado'];
|
||||||
|
|
||||||
|
interface TenantStatusDialogProps {
|
||||||
|
tenant: { id: string; razao_social: string; status: string } | null;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
onSuccess?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mudança de status de tenant com confirmação explícita (critério de
|
||||||
|
* aceite da Etapa 15) — reaproveitado pela listagem e pelo detalhe de
|
||||||
|
* tenant, já que a mesma ação aparece nos dois lugares.
|
||||||
|
*/
|
||||||
|
export function TenantStatusDialog({ tenant, onOpenChange, onSuccess }: TenantStatusDialogProps) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [target, setTarget] = React.useState<TenantStatusTransition | ''>('');
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
setTarget('');
|
||||||
|
}, [tenant?.id]);
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: (status: TenantStatusTransition) => updateTenantStatus(tenant!.id, status),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['master', 'tenants'] });
|
||||||
|
toast.success('Status do tenant atualizado.');
|
||||||
|
onOpenChange(false);
|
||||||
|
onSuccess?.();
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
toast.error(err instanceof ApiError ? err.message : 'Não foi possível atualizar o status.');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ResponsiveDialog
|
||||||
|
open={tenant !== null}
|
||||||
|
onOpenChange={onOpenChange}
|
||||||
|
title={`Mudar status — ${tenant?.razao_social ?? ''}`}
|
||||||
|
description="Suspender ou cancelar bloqueia imediatamente o login de todos os usuários deste tenant, mesmo com sessões já abertas."
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={mutation.isPending}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={target === 'suspenso' || target === 'cancelado' ? 'destructive' : 'primary'}
|
||||||
|
disabled={!target}
|
||||||
|
loading={mutation.isPending}
|
||||||
|
onClick={() => target && mutation.mutate(target)}
|
||||||
|
>
|
||||||
|
Confirmar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Status atual: <span className="font-medium text-foreground">{STATUS_PILL_MAP[tenant?.status as keyof typeof STATUS_PILL_MAP]?.label ?? tenant?.status}</span>
|
||||||
|
</p>
|
||||||
|
<Select value={target} onValueChange={(v) => setTarget(v as TenantStatusTransition)}>
|
||||||
|
<SelectTrigger className="w-full" aria-label="Novo status">
|
||||||
|
<SelectValue placeholder="Selecione o novo status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{TRANSITIONS.filter((status) => status !== tenant?.status).map((status) => (
|
||||||
|
<SelectItem key={status} value={status}>
|
||||||
|
{STATUS_PILL_MAP[status].label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</ResponsiveDialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,497 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useFieldArray, useForm, type UseFormRegisterReturn } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Plus, Trash2 } from 'lucide-react';
|
||||||
|
|
||||||
|
import { listCustomers } from '@/lib/api/customers';
|
||||||
|
import { listProducts } from '@/lib/api/products';
|
||||||
|
import type { SaleInput } from '@/lib/api/sales';
|
||||||
|
import { saleFormSchema, type SaleFormValues } from '@/lib/validators/sales';
|
||||||
|
import { formatCurrency, formatDate } from '@/lib/format';
|
||||||
|
import { CustomerQuickCreateDialog } from '@/components/domain/customer-quick-create-dialog';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Combobox } from '@/components/ui/combobox';
|
||||||
|
import { FormField } from '@/components/ui/form-field';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
|
||||||
|
function toCents(value: number): number {
|
||||||
|
return Math.round(value * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
function todayIso(): string {
|
||||||
|
return new Date().toISOString().slice(0, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Calcula os vencimentos (30 em 30 dias) só para pré-visualização — o backend recalcula de verdade. */
|
||||||
|
function previewVencimentosAutomaticos(dataVenda: string, numeroParcelas: number): Date[] {
|
||||||
|
const base = dataVenda ? new Date(`${dataVenda}T00:00:00Z`) : new Date();
|
||||||
|
return Array.from({ length: numeroParcelas }, (_, i) => {
|
||||||
|
const d = new Date(base);
|
||||||
|
d.setUTCDate(d.getUTCDate() + 30 * (i + 1));
|
||||||
|
return d;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface VendaFormSubmitHandlers {
|
||||||
|
/** Só no modo `create` — salva como orçamento. */
|
||||||
|
onSaveDraft?: (input: SaleInput) => void;
|
||||||
|
/** No `create`, confirma a venda; no `edit`, salva as alterações (venda continua em orçamento). */
|
||||||
|
onConfirmOrSave: (input: SaleInput) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface VendaFormProps extends VendaFormSubmitHandlers {
|
||||||
|
mode: 'create' | 'edit';
|
||||||
|
defaultValues: SaleFormValues;
|
||||||
|
submittingDraft?: boolean;
|
||||||
|
submittingConfirmOrSave?: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function VendaForm({
|
||||||
|
mode,
|
||||||
|
defaultValues,
|
||||||
|
submittingDraft,
|
||||||
|
submittingConfirmOrSave,
|
||||||
|
onSaveDraft,
|
||||||
|
onConfirmOrSave,
|
||||||
|
onCancel,
|
||||||
|
}: VendaFormProps) {
|
||||||
|
const [quickCreateOpen, setQuickCreateOpen] = React.useState(false);
|
||||||
|
|
||||||
|
const form = useForm<SaleFormValues>({ resolver: zodResolver(saleFormSchema), defaultValues });
|
||||||
|
const itensArray = useFieldArray({ control: form.control, name: 'itens' });
|
||||||
|
const parcelasArray = useFieldArray({ control: form.control, name: 'parcelasManuais' });
|
||||||
|
|
||||||
|
const customerId = form.watch('customer_id');
|
||||||
|
const itens = form.watch('itens');
|
||||||
|
const desconto = form.watch('desconto') || 0;
|
||||||
|
const dataVenda = form.watch('data_venda');
|
||||||
|
const modoParcelas = form.watch('modoParcelas');
|
||||||
|
const numeroParcelas = form.watch('numeroParcelas');
|
||||||
|
const parcelasManuais = form.watch('parcelasManuais') ?? [];
|
||||||
|
|
||||||
|
const { data: customersData } = useQuery({
|
||||||
|
queryKey: ['tenant', 'customers', 'combobox'],
|
||||||
|
queryFn: () => listCustomers({ ativo: true, limit: 100 }),
|
||||||
|
});
|
||||||
|
const { data: productsData } = useQuery({
|
||||||
|
queryKey: ['tenant', 'produtos', 'combobox'],
|
||||||
|
queryFn: () => listProducts({ ativo: true, limit: 100 }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const customerOptions = (customersData?.data ?? []).map((c) => ({
|
||||||
|
value: c.id,
|
||||||
|
label: c.nome_fantasia || c.razao_social,
|
||||||
|
}));
|
||||||
|
const productOptions = (productsData?.data ?? []).map((p) => ({
|
||||||
|
value: p.id,
|
||||||
|
label: p.sku ? `${p.nome} (${p.sku})` : p.nome,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const subtotalItens = itens.reduce((acc, item) => acc + item.quantidade * item.valor_unitario, 0);
|
||||||
|
const total = Math.max(0, subtotalItens - desconto);
|
||||||
|
const descontoExcedeItens = desconto > subtotalItens;
|
||||||
|
|
||||||
|
const somaParcelasManuais = parcelasManuais.reduce((acc, p) => acc + (p.valor || 0), 0);
|
||||||
|
const diffParcelas = toCents(total) - toCents(somaParcelasManuais);
|
||||||
|
const parcelasBatem = modoParcelas === 'automatico' || diffParcelas === 0;
|
||||||
|
|
||||||
|
function addItem(productId: string) {
|
||||||
|
const produto = productsData?.data.find((p) => p.id === productId);
|
||||||
|
if (!produto) return;
|
||||||
|
if (itensArray.fields.some((f) => f.product_service_id === productId)) return;
|
||||||
|
itensArray.append({
|
||||||
|
product_service_id: produto.id,
|
||||||
|
nome: produto.nome,
|
||||||
|
quantidade: 1,
|
||||||
|
valor_unitario: Number(produto.valor_venda),
|
||||||
|
valor_catalogo: Number(produto.valor_venda),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildInput(values: SaleFormValues): SaleInput | null {
|
||||||
|
if (values.modoParcelas === 'manual') {
|
||||||
|
if (!values.parcelasManuais || values.parcelasManuais.length === 0) {
|
||||||
|
form.setError('parcelasManuais', { message: 'Adicione pelo menos uma parcela' });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (!parcelasBatem) {
|
||||||
|
form.setError('parcelasManuais', {
|
||||||
|
message: `A soma das parcelas não bate com o total da venda (diferença de ${formatCurrency(Math.abs(diffParcelas) / 100)})`,
|
||||||
|
});
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
} else if (!values.numeroParcelas || values.numeroParcelas < 1) {
|
||||||
|
form.setError('numeroParcelas', { message: 'Informe o número de parcelas' });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
customer_id: values.customer_id,
|
||||||
|
data_venda: values.data_venda,
|
||||||
|
desconto: values.desconto || undefined,
|
||||||
|
observacoes: values.observacoes || undefined,
|
||||||
|
itens: values.itens.map((item) => ({
|
||||||
|
product_service_id: item.product_service_id,
|
||||||
|
quantidade: item.quantidade,
|
||||||
|
valor_unitario: item.valor_unitario,
|
||||||
|
})),
|
||||||
|
...(values.modoParcelas === 'manual'
|
||||||
|
? { parcelas: values.parcelasManuais!.map((p) => ({ valor: p.valor, vencimento: p.vencimento })) }
|
||||||
|
: { numero_parcelas: values.numeroParcelas }),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const vencimentosPreview =
|
||||||
|
modoParcelas === 'automatico' && numeroParcelas
|
||||||
|
? previewVencimentosAutomaticos(dataVenda, numeroParcelas)
|
||||||
|
: [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6 pb-24 lg:pb-0">
|
||||||
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_380px]">
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Cliente e data</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
<div className="flex items-end gap-2">
|
||||||
|
<FormField
|
||||||
|
label="Cliente"
|
||||||
|
id="customer_id"
|
||||||
|
className="flex-1"
|
||||||
|
error={form.formState.errors.customer_id?.message}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<Combobox
|
||||||
|
id="customer_id"
|
||||||
|
options={customerOptions}
|
||||||
|
value={customerId}
|
||||||
|
onChange={(value) => form.setValue('customer_id', value, { shouldValidate: true })}
|
||||||
|
placeholder="Selecionar cliente..."
|
||||||
|
searchPlaceholder="Buscar cliente..."
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<Button type="button" variant="outline" onClick={() => setQuickCreateOpen(true)}>
|
||||||
|
<Plus /> Novo
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<FormField label="Data da venda" error={form.formState.errors.data_venda?.message} required>
|
||||||
|
<Input type="date" {...form.register('data_venda')} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Observações" error={form.formState.errors.observacoes?.message}>
|
||||||
|
<Textarea rows={2} {...form.register('observacoes')} />
|
||||||
|
</FormField>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
|
||||||
|
<CardTitle>Itens da venda</CardTitle>
|
||||||
|
<div className="w-64">
|
||||||
|
<Combobox
|
||||||
|
options={productOptions}
|
||||||
|
value=""
|
||||||
|
onChange={addItem}
|
||||||
|
placeholder="Adicionar item..."
|
||||||
|
searchPlaceholder="Buscar produto/serviço..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-3">
|
||||||
|
{form.formState.errors.itens?.message && (
|
||||||
|
<p className="text-sm text-destructive">{form.formState.errors.itens.message}</p>
|
||||||
|
)}
|
||||||
|
{itensArray.fields.length === 0 ? (
|
||||||
|
<p className="py-6 text-center text-sm text-muted-foreground">
|
||||||
|
Nenhum item adicionado ainda — busque um produto ou serviço acima.
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col divide-y divide-border">
|
||||||
|
{itensArray.fields.map((field, index) => {
|
||||||
|
const item = itens[index];
|
||||||
|
const alterado = item && item.valor_unitario !== item.valor_catalogo;
|
||||||
|
return (
|
||||||
|
<div key={field.id} className="flex flex-wrap items-end gap-3 py-3">
|
||||||
|
<div className="min-w-40 flex-1">
|
||||||
|
<p className="text-sm font-medium text-foreground">{field.nome}</p>
|
||||||
|
{alterado && (
|
||||||
|
<Badge variant="outline" className="mt-1">
|
||||||
|
Valor alterado do catálogo ({formatCurrency(field.valor_catalogo)})
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<FormField label="Qtd." className="w-24">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
min="0.01"
|
||||||
|
{...form.register(`itens.${index}.quantidade`, { valueAsNumber: true })}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Valor unit. (R$)" className="w-32">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
{...form.register(`itens.${index}.valor_unitario`, { valueAsNumber: true })}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<div className="w-28 text-right">
|
||||||
|
<p className="text-xs text-muted-foreground">Subtotal</p>
|
||||||
|
<p className="font-medium tabular-nums text-foreground">
|
||||||
|
{formatCurrency((item?.quantidade || 0) * (item?.valor_unitario || 0))}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
aria-label="Remover item"
|
||||||
|
onClick={() => itensArray.remove(index)}
|
||||||
|
>
|
||||||
|
<Trash2 className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Parcelas</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
<Select
|
||||||
|
value={modoParcelas}
|
||||||
|
onValueChange={(value) => form.setValue('modoParcelas', value as 'automatico' | 'manual')}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full sm:w-64" aria-label="Modo de parcelamento">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="automatico">Gerar parcelas automaticamente</SelectItem>
|
||||||
|
<SelectItem value="manual">Definir parcelas manualmente</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
{modoParcelas === 'automatico' ? (
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<FormField
|
||||||
|
label="Número de parcelas"
|
||||||
|
helpText="Vencimentos calculados de 30 em 30 dias a partir da data da venda"
|
||||||
|
error={form.formState.errors.numeroParcelas?.message}
|
||||||
|
className="w-40"
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
{...form.register('numeroParcelas', {
|
||||||
|
setValueAs: (v) => (v === '' ? undefined : Number(v)),
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
{vencimentosPreview.length > 0 && (
|
||||||
|
<ul className="flex flex-col gap-1 text-sm text-muted-foreground">
|
||||||
|
{vencimentosPreview.map((date, i) => (
|
||||||
|
<li key={i} className="flex justify-between tabular-nums">
|
||||||
|
<span>Parcela {i + 1}</span>
|
||||||
|
<span>{formatDate(date)}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
{form.formState.errors.parcelasManuais?.message && (
|
||||||
|
<p className="text-sm text-destructive">{form.formState.errors.parcelasManuais.message}</p>
|
||||||
|
)}
|
||||||
|
{parcelasArray.fields.map((field, index) => (
|
||||||
|
<div key={field.id} className="flex items-end gap-2">
|
||||||
|
<FormField label={`Parcela ${index + 1} — valor`} className="flex-1">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
{...form.register(`parcelasManuais.${index}.valor`, { valueAsNumber: true })}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Vencimento" className="flex-1">
|
||||||
|
<Input type="date" {...form.register(`parcelasManuais.${index}.vencimento`)} />
|
||||||
|
</FormField>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
aria-label="Remover parcela"
|
||||||
|
onClick={() => parcelasArray.remove(index)}
|
||||||
|
>
|
||||||
|
<Trash2 className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="self-start"
|
||||||
|
onClick={() => parcelasArray.append({ valor: 0, vencimento: dataVenda || todayIso() })}
|
||||||
|
>
|
||||||
|
<Plus /> Adicionar parcela
|
||||||
|
</Button>
|
||||||
|
<div
|
||||||
|
className={`rounded-lg p-3 text-sm ${
|
||||||
|
parcelasBatem ? 'bg-success/10 text-success' : 'bg-danger/10 text-danger'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Soma das parcelas: {formatCurrency(somaParcelasManuais)} —{' '}
|
||||||
|
{parcelasBatem ? 'bate com o total' : `diferença de ${formatCurrency(Math.abs(diffParcelas) / 100)}`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden flex-col gap-4 lg:flex">
|
||||||
|
<ResumoCard
|
||||||
|
subtotalItens={subtotalItens}
|
||||||
|
desconto={desconto}
|
||||||
|
total={total}
|
||||||
|
descontoExcedeItens={descontoExcedeItens}
|
||||||
|
formErrorDesconto={form.formState.errors.desconto?.message}
|
||||||
|
registerDesconto={form.register('desconto', { valueAsNumber: true })}
|
||||||
|
mode={mode}
|
||||||
|
submittingDraft={submittingDraft}
|
||||||
|
submittingConfirmOrSave={submittingConfirmOrSave}
|
||||||
|
onSaveDraft={onSaveDraft ? () => { const input = buildInput(form.getValues()); if (input) onSaveDraft(input); } : undefined}
|
||||||
|
onConfirmOrSave={() => { const input = buildInput(form.getValues()); if (input) onConfirmOrSave(input); }}
|
||||||
|
onCancel={onCancel}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile: resumo + ações fixos no rodapé, sempre visíveis */}
|
||||||
|
<div className="fixed inset-x-0 bottom-16 z-10 border-t border-border bg-surface p-4 shadow-lg lg:hidden">
|
||||||
|
<div className="mb-3 flex items-center justify-between">
|
||||||
|
<span className="text-sm text-muted-foreground">Total da venda</span>
|
||||||
|
<span className="text-lg font-semibold tabular-nums text-foreground">{formatCurrency(total)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{onSaveDraft && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
className="flex-1"
|
||||||
|
loading={submittingDraft}
|
||||||
|
onClick={() => {
|
||||||
|
const input = buildInput(form.getValues());
|
||||||
|
if (input) onSaveDraft(input);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Orçamento
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
className="flex-1"
|
||||||
|
loading={submittingConfirmOrSave}
|
||||||
|
onClick={() => {
|
||||||
|
const input = buildInput(form.getValues());
|
||||||
|
if (input) onConfirmOrSave(input);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{mode === 'create' ? 'Confirmar venda' : 'Salvar alterações'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CustomerQuickCreateDialog
|
||||||
|
open={quickCreateOpen}
|
||||||
|
onOpenChange={setQuickCreateOpen}
|
||||||
|
onCreated={(customer) => form.setValue('customer_id', customer.id, { shouldValidate: true })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ResumoCard({
|
||||||
|
subtotalItens,
|
||||||
|
desconto,
|
||||||
|
total,
|
||||||
|
descontoExcedeItens,
|
||||||
|
formErrorDesconto,
|
||||||
|
registerDesconto,
|
||||||
|
mode,
|
||||||
|
submittingDraft,
|
||||||
|
submittingConfirmOrSave,
|
||||||
|
onSaveDraft,
|
||||||
|
onConfirmOrSave,
|
||||||
|
onCancel,
|
||||||
|
}: {
|
||||||
|
subtotalItens: number;
|
||||||
|
desconto: number;
|
||||||
|
total: number;
|
||||||
|
descontoExcedeItens: boolean;
|
||||||
|
formErrorDesconto?: string;
|
||||||
|
registerDesconto: UseFormRegisterReturn<'desconto'>;
|
||||||
|
mode: 'create' | 'edit';
|
||||||
|
submittingDraft?: boolean;
|
||||||
|
submittingConfirmOrSave?: boolean;
|
||||||
|
onSaveDraft?: () => void;
|
||||||
|
onConfirmOrSave: () => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Card className="sticky top-4">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Resumo</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
<FormField label="Desconto geral (R$)" error={formErrorDesconto || (descontoExcedeItens ? 'Desconto maior que a soma dos itens' : undefined)}>
|
||||||
|
<Input type="number" step="0.01" min="0" {...registerDesconto} />
|
||||||
|
</FormField>
|
||||||
|
<div className="flex flex-col gap-1.5 border-t border-border pt-3 text-sm">
|
||||||
|
<div className="flex justify-between text-muted-foreground">
|
||||||
|
<span>Subtotal itens</span>
|
||||||
|
<span className="tabular-nums">{formatCurrency(subtotalItens)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-muted-foreground">
|
||||||
|
<span>Desconto</span>
|
||||||
|
<span className="tabular-nums">-{formatCurrency(desconto)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-base font-semibold text-foreground">
|
||||||
|
<span>Total</span>
|
||||||
|
<span className="tabular-nums">{formatCurrency(total)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{onSaveDraft && (
|
||||||
|
<Button type="button" variant="outline" loading={submittingDraft} onClick={onSaveDraft}>
|
||||||
|
Salvar como orçamento
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button type="button" loading={submittingConfirmOrSave} onClick={onConfirmOrSave}>
|
||||||
|
{mode === 'create' ? 'Confirmar venda' : 'Salvar alterações'}
|
||||||
|
</Button>
|
||||||
|
<Button type="button" variant="ghost" onClick={onCancel}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Sidebar } from '@/components/layout/sidebar';
|
||||||
|
import { Topbar } from '@/components/layout/topbar';
|
||||||
|
import { Drawer } from '@/components/layout/drawer';
|
||||||
|
import { BottomTabBar } from '@/components/layout/bottom-tab-bar';
|
||||||
|
import { Breadcrumb, type BreadcrumbEntry } from '@/components/layout/breadcrumb';
|
||||||
|
import { persistSidebarCollapsed } from '@/lib/layout/sidebar-cookie';
|
||||||
|
import type { NavItem } from '@/lib/layout/nav-items';
|
||||||
|
|
||||||
|
interface AppShellProps {
|
||||||
|
/** Logo/marca completa (sidebar desktop expandida e header do drawer). */
|
||||||
|
brand: React.ReactNode;
|
||||||
|
/** Só o símbolo — sidebar desktop recolhida e topbar mobile. */
|
||||||
|
brandCollapsed: React.ReactNode;
|
||||||
|
items: NavItem[];
|
||||||
|
bottomHrefs: string[];
|
||||||
|
footer: React.ReactNode;
|
||||||
|
/** Rodapé enxuto (só avatar + logout) para a sidebar recolhida. */
|
||||||
|
footerCollapsed: React.ReactNode;
|
||||||
|
initialCollapsed: boolean;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
function findBreadcrumb(items: NavItem[], pathname: string): BreadcrumbEntry[] {
|
||||||
|
for (const item of items) {
|
||||||
|
if (item.children) {
|
||||||
|
const child = item.children.find(
|
||||||
|
(c) => pathname === c.href || pathname.startsWith(`${c.href}/`),
|
||||||
|
);
|
||||||
|
if (child) return [{ label: item.label }, { label: child.label }];
|
||||||
|
}
|
||||||
|
if (pathname === item.href || pathname.startsWith(`${item.href}/`)) {
|
||||||
|
return [{ label: item.label }];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Casco de navegação das áreas autenticadas (Etapa 14): compõe
|
||||||
|
* Sidebar/Topbar/Drawer/BottomTabBar num único lugar para não duplicar essa
|
||||||
|
* orquestração entre o shell do master e o do tenant — cada um só passa
|
||||||
|
* marca, itens de menu e rodapé de usuário diferentes.
|
||||||
|
*/
|
||||||
|
export function AppShell({
|
||||||
|
brand,
|
||||||
|
brandCollapsed,
|
||||||
|
items,
|
||||||
|
bottomHrefs,
|
||||||
|
footer,
|
||||||
|
footerCollapsed,
|
||||||
|
initialCollapsed,
|
||||||
|
children,
|
||||||
|
}: AppShellProps) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const [collapsed, setCollapsed] = React.useState(initialCollapsed);
|
||||||
|
const [drawerOpen, setDrawerOpen] = React.useState(false);
|
||||||
|
|
||||||
|
const toggleCollapsed = React.useCallback(() => {
|
||||||
|
setCollapsed((prev) => {
|
||||||
|
const next = !prev;
|
||||||
|
persistSidebarCollapsed(next);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const bottomItems = React.useMemo(
|
||||||
|
() =>
|
||||||
|
bottomHrefs
|
||||||
|
.map((href) => items.find((item) => item.href === href))
|
||||||
|
.filter((item): item is NavItem => Boolean(item)),
|
||||||
|
[items, bottomHrefs],
|
||||||
|
);
|
||||||
|
const moreItems = React.useMemo(
|
||||||
|
() => items.filter((item) => !bottomHrefs.includes(item.href)),
|
||||||
|
[items, bottomHrefs],
|
||||||
|
);
|
||||||
|
const breadcrumbItems = React.useMemo(() => findBreadcrumb(items, pathname), [items, pathname]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-dvh bg-neutral-50">
|
||||||
|
<Sidebar
|
||||||
|
brand={brand}
|
||||||
|
brandCollapsed={brandCollapsed}
|
||||||
|
items={items}
|
||||||
|
footer={footer}
|
||||||
|
footerCollapsed={footerCollapsed}
|
||||||
|
collapsed={collapsed}
|
||||||
|
onToggleCollapsed={toggleCollapsed}
|
||||||
|
/>
|
||||||
|
<Drawer open={drawerOpen} onOpenChange={setDrawerOpen} brand={brand} items={items} footer={footer} />
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex min-h-dvh flex-col transition-[padding] duration-150',
|
||||||
|
collapsed ? 'md:pl-16' : 'md:pl-60',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Topbar
|
||||||
|
breadcrumb={<Breadcrumb items={breadcrumbItems} />}
|
||||||
|
mobileBrand={brandCollapsed}
|
||||||
|
onMenuClick={() => setDrawerOpen(true)}
|
||||||
|
/>
|
||||||
|
<main className="flex-1 p-4 pb-20 md:p-6 md:pb-6">{children}</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BottomTabBar items={bottomItems} moreItems={moreItems} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import { Ellipsis } from 'lucide-react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
||||||
|
import { NavList } from '@/components/layout/nav-list';
|
||||||
|
import type { NavItem } from '@/lib/layout/nav-items';
|
||||||
|
|
||||||
|
function isActive(pathname: string, href: string): boolean {
|
||||||
|
return pathname === href || pathname.startsWith(`${href}/`);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BottomTabBarProps {
|
||||||
|
/** Os 4 itens principais, já resolvidos na ordem de exibição. */
|
||||||
|
items: NavItem[];
|
||||||
|
/** Restante do menu, exibido no sheet "Mais". */
|
||||||
|
moreItems: NavItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Bottom tab bar mobile (`<md`) — 4 itens fixos + "Mais" com o restante do menu. */
|
||||||
|
export function BottomTabBar({ items, moreItems }: BottomTabBarProps) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const [moreOpen, setMoreOpen] = React.useState(false);
|
||||||
|
const moreActive = moreItems.some(
|
||||||
|
(item) => isActive(pathname, item.href) || item.children?.some((child) => isActive(pathname, child.href)),
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<nav
|
||||||
|
aria-label="Navegação principal"
|
||||||
|
className="fixed inset-x-0 bottom-0 z-20 flex h-16 items-stretch border-t border-border bg-surface md:hidden"
|
||||||
|
>
|
||||||
|
{items.map((item) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
const active = isActive(pathname, item.href);
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
aria-current={active ? 'page' : undefined}
|
||||||
|
className={cn(
|
||||||
|
'flex flex-1 flex-col items-center justify-center gap-0.5 text-[11px] font-medium text-neutral-500',
|
||||||
|
active && 'text-primary-on-light',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className="size-5" aria-hidden />
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setMoreOpen(true)}
|
||||||
|
aria-haspopup="dialog"
|
||||||
|
className={cn(
|
||||||
|
'flex flex-1 flex-col items-center justify-center gap-0.5 text-[11px] font-medium text-neutral-500',
|
||||||
|
moreActive && 'text-primary-on-light',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Ellipsis className="size-5" aria-hidden />
|
||||||
|
Mais
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<Sheet open={moreOpen} onOpenChange={setMoreOpen}>
|
||||||
|
<SheetContent side="bottom" className="max-h-[70vh] gap-0 p-0">
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle>Mais opções</SheetTitle>
|
||||||
|
</SheetHeader>
|
||||||
|
<div className="overflow-y-auto px-3 pb-4">
|
||||||
|
<NavList items={moreItems} onNavigate={() => setMoreOpen(false)} />
|
||||||
|
</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import Link from 'next/link';
|
||||||
|
import { ChevronRight } from 'lucide-react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
export interface BreadcrumbEntry {
|
||||||
|
label: string;
|
||||||
|
href?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gerado manualmente a partir do item de menu ativo em `AppShell` nesta
|
||||||
|
* primeira versão (Etapa 14) — automatizar a partir da árvore de rotas do
|
||||||
|
* Next é uma melhoria natural de uma etapa futura, quando houver páginas
|
||||||
|
* com mais de 2 níveis (ex: detalhe dentro de uma lista).
|
||||||
|
*/
|
||||||
|
export function Breadcrumb({ items, className }: { items: BreadcrumbEntry[]; className?: string }) {
|
||||||
|
if (items.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav aria-label="Breadcrumb" className={cn('min-w-0', className)}>
|
||||||
|
<ol className="flex min-w-0 items-center gap-1.5 text-sm">
|
||||||
|
{items.map((item, index) => {
|
||||||
|
const last = index === items.length - 1;
|
||||||
|
return (
|
||||||
|
<li key={`${item.label}-${index}`} className="flex min-w-0 items-center gap-1.5">
|
||||||
|
{index > 0 && <ChevronRight className="size-3.5 shrink-0 text-neutral-500" aria-hidden />}
|
||||||
|
{item.href && !last ? (
|
||||||
|
<Link href={item.href} className="truncate text-neutral-500 hover:text-foreground">
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<span
|
||||||
|
className={cn('truncate', last ? 'font-medium text-foreground' : 'text-neutral-500')}
|
||||||
|
aria-current={last ? 'page' : undefined}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
import { NavList } from '@/components/layout/nav-list';
|
||||||
|
import type { NavItem } from '@/lib/layout/nav-items';
|
||||||
|
|
||||||
|
interface DrawerProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
brand: React.ReactNode;
|
||||||
|
items: NavItem[];
|
||||||
|
footer: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Menu deslizante mobile — réplica do menu completo da sidebar desktop.
|
||||||
|
* Fecha ao navegar (`NavList.onNavigate`) ou ao tocar fora (comportamento
|
||||||
|
* padrão do `Sheet`/Radix Dialog).
|
||||||
|
*/
|
||||||
|
export function Drawer({ open, onOpenChange, brand, items, footer }: DrawerProps) {
|
||||||
|
return (
|
||||||
|
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||||
|
<SheetContent side="left" className="w-4/5 gap-0 p-0">
|
||||||
|
<SheetHeader className="h-16 flex-row items-center gap-2 px-4 py-0">
|
||||||
|
{brand}
|
||||||
|
<SheetTitle className="sr-only">Menu de navegação</SheetTitle>
|
||||||
|
</SheetHeader>
|
||||||
|
<Separator />
|
||||||
|
<div className="min-h-0 flex-1 overflow-y-auto px-3 py-4">
|
||||||
|
<NavList items={items} onNavigate={() => onOpenChange(false)} />
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className="flex flex-col gap-2 p-3">{footer}</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { AppShell } from '@/components/layout/app-shell';
|
||||||
|
import { UserFooter } from '@/components/layout/user-footer';
|
||||||
|
import { useAuth } from '@/lib/auth/auth-context';
|
||||||
|
import { MASTER_NAV_ITEMS, MASTER_BOTTOM_HREFS } from '@/lib/layout/nav-items';
|
||||||
|
|
||||||
|
function MasterBrandSymbol() {
|
||||||
|
return (
|
||||||
|
<span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-brand-master text-sm font-bold text-white">
|
||||||
|
SV
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Identidade fixa do painel master — nunca whitelabel (ver `TenantShell`). */
|
||||||
|
function MasterBrand() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<MasterBrandSymbol />
|
||||||
|
<span className="truncate text-sm font-semibold text-neutral-950">SeConectai Vendas</span>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MasterShell({
|
||||||
|
initialCollapsed,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
initialCollapsed: boolean;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const { logout } = useAuth();
|
||||||
|
const handleLogout = React.useCallback(() => {
|
||||||
|
void logout();
|
||||||
|
}, [logout]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
// `Sidebar`/`BottomTabBar`/`NavList` destacam o item ativo com os tokens
|
||||||
|
// `--color-primary(-on-light)` — dinâmicos por tenant (Etapa 13). O
|
||||||
|
// master tem identidade fixa (seção 6 da arquitetura), então essa
|
||||||
|
// sobrescrita local troca esses tokens por `--brand-master` só dentro
|
||||||
|
// desta árvore, sem tocar no `:root` (evitaria vazar pro `/app` do
|
||||||
|
// tenant na mesma aba).
|
||||||
|
<div
|
||||||
|
style={{ '--color-primary': 'var(--brand-master)', '--color-primary-on-light': 'var(--brand-master)' } as React.CSSProperties}
|
||||||
|
>
|
||||||
|
<AppShell
|
||||||
|
brand={<MasterBrand />}
|
||||||
|
brandCollapsed={<MasterBrandSymbol />}
|
||||||
|
items={MASTER_NAV_ITEMS}
|
||||||
|
bottomHrefs={MASTER_BOTTOM_HREFS}
|
||||||
|
footer={<UserFooter label="Administrador master" onLogout={handleLogout} />}
|
||||||
|
footerCollapsed={<UserFooter label="Administrador master" compact onLogout={handleLogout} />}
|
||||||
|
initialCollapsed={initialCollapsed}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</AppShell>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import { ChevronDown } from 'lucide-react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import type { NavItem } from '@/lib/layout/nav-items';
|
||||||
|
|
||||||
|
function isActive(pathname: string, href: string): boolean {
|
||||||
|
return pathname === href || pathname.startsWith(`${href}/`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isGroupActive(pathname: string, item: NavItem): boolean {
|
||||||
|
if (isActive(pathname, item.href)) return true;
|
||||||
|
return item.children?.some((child) => isActive(pathname, child.href)) ?? false;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NavListProps {
|
||||||
|
items: NavItem[];
|
||||||
|
/** Modo ícones-apenas (sidebar recolhida) — grupos viram link direto pro primeiro filho. */
|
||||||
|
collapsed?: boolean;
|
||||||
|
/** Disparado ao navegar (o Drawer usa isso para fechar). */
|
||||||
|
onNavigate?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Lista de navegação com estado de item/grupo ativo — compartilhada entre
|
||||||
|
* `Sidebar` (desktop) e `Drawer` (mobile) para não duplicar essa lógica em
|
||||||
|
* dois lugares.
|
||||||
|
*/
|
||||||
|
export function NavList({ items, collapsed = false, onNavigate }: NavListProps) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const [openHref, setOpenHref] = React.useState<string | null>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="flex flex-col gap-1">
|
||||||
|
{items.map((item) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
const active = isGroupActive(pathname, item);
|
||||||
|
|
||||||
|
if (item.children && !collapsed) {
|
||||||
|
const open = openHref === item.href || (openHref === null && active);
|
||||||
|
return (
|
||||||
|
<div key={item.href}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setOpenHref(open ? '' : item.href)}
|
||||||
|
aria-expanded={open}
|
||||||
|
className={cn(
|
||||||
|
'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-500 transition-colors hover:bg-muted hover:text-foreground',
|
||||||
|
active && 'bg-primary/10 text-primary-on-light',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className="size-4.5 shrink-0" aria-hidden />
|
||||||
|
<span className="flex-1 text-left">{item.label}</span>
|
||||||
|
<ChevronDown
|
||||||
|
className={cn('size-4 shrink-0 transition-transform', open && 'rotate-180')}
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
{open && (
|
||||||
|
<div className="ml-4 flex flex-col gap-0.5 border-l border-border py-1 pl-4">
|
||||||
|
{item.children.map((child) => (
|
||||||
|
<Link
|
||||||
|
key={child.href}
|
||||||
|
href={child.href}
|
||||||
|
onClick={onNavigate}
|
||||||
|
aria-current={isActive(pathname, child.href) ? 'page' : undefined}
|
||||||
|
className={cn(
|
||||||
|
'rounded-lg px-3 py-2 text-sm text-neutral-500 transition-colors hover:bg-muted hover:text-foreground',
|
||||||
|
isActive(pathname, child.href) && 'font-medium text-primary-on-light',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{child.label}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
onClick={onNavigate}
|
||||||
|
aria-current={active ? 'page' : undefined}
|
||||||
|
title={collapsed ? item.label : undefined}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-500 transition-colors hover:bg-muted hover:text-foreground',
|
||||||
|
active && 'bg-primary/10 text-primary-on-light',
|
||||||
|
collapsed && 'mx-auto size-11 justify-center px-0 py-0',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className="size-4.5 shrink-0" aria-hidden />
|
||||||
|
{!collapsed && <span>{item.label}</span>}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
import { NavList } from '@/components/layout/nav-list';
|
||||||
|
import type { NavItem } from '@/lib/layout/nav-items';
|
||||||
|
|
||||||
|
interface SidebarProps {
|
||||||
|
brand: React.ReactNode;
|
||||||
|
brandCollapsed: React.ReactNode;
|
||||||
|
items: NavItem[];
|
||||||
|
footer: React.ReactNode;
|
||||||
|
footerCollapsed: React.ReactNode;
|
||||||
|
collapsed: boolean;
|
||||||
|
onToggleCollapsed: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sidebar fixa (desktop, `md+`). Itens de menu e rodapé de usuário chegam
|
||||||
|
* via props — sem nada hardcoded — para ser reaproveitada entre o shell do
|
||||||
|
* master e o do tenant com conteúdo diferente (Etapa 14).
|
||||||
|
*/
|
||||||
|
export function Sidebar({
|
||||||
|
brand,
|
||||||
|
brandCollapsed,
|
||||||
|
items,
|
||||||
|
footer,
|
||||||
|
footerCollapsed,
|
||||||
|
collapsed,
|
||||||
|
onToggleCollapsed,
|
||||||
|
}: SidebarProps) {
|
||||||
|
return (
|
||||||
|
<aside
|
||||||
|
className={cn(
|
||||||
|
'fixed inset-y-0 left-0 z-30 hidden flex-col border-r border-border bg-surface transition-[width] duration-150 md:flex',
|
||||||
|
collapsed ? 'w-16' : 'w-60',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className={cn('flex h-16 shrink-0 items-center gap-2 overflow-hidden px-4', collapsed && 'justify-center px-2')}>
|
||||||
|
{collapsed ? brandCollapsed : brand}
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className="min-h-0 flex-1 overflow-y-auto px-3 py-4">
|
||||||
|
<NavList items={items} collapsed={collapsed} />
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className={cn('flex flex-col gap-2 p-3', collapsed && 'items-center')}>
|
||||||
|
{collapsed ? footerCollapsed : footer}
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
onClick={onToggleCollapsed}
|
||||||
|
aria-label={collapsed ? 'Expandir menu' : 'Recolher menu'}
|
||||||
|
className={collapsed ? 'self-center' : 'self-end'}
|
||||||
|
>
|
||||||
|
{collapsed ? <PanelLeftOpen className="size-4" /> : <PanelLeftClose className="size-4" />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
import { AppShell } from '@/components/layout/app-shell';
|
||||||
|
import { UserFooter } from '@/components/layout/user-footer';
|
||||||
|
import { useAuth } from '@/lib/auth/auth-context';
|
||||||
|
import { TenantThemeProvider, useTenantTheme } from '@/lib/theme/theme-provider';
|
||||||
|
import { TENANT_NAV_ITEMS, TENANT_BOTTOM_HREFS, filterByRole } from '@/lib/layout/nav-items';
|
||||||
|
import type { UserRole } from '@/lib/auth/jwt';
|
||||||
|
|
||||||
|
const ROLE_LABELS: Record<UserRole, string> = {
|
||||||
|
tenant_admin: 'Administrador',
|
||||||
|
vendedor: 'Vendedor',
|
||||||
|
financeiro: 'Financeiro',
|
||||||
|
visualizador: 'Visualizador',
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Logo/nome resolvidos do tema do tenant (Etapa 13); cai para a marca padrão sem tema. */
|
||||||
|
function TenantBrand({ collapsed = false }: { collapsed?: boolean }) {
|
||||||
|
const { theme } = useTenantTheme();
|
||||||
|
const name = theme?.nome ?? 'SeConectai Vendas';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{theme?.logoUrl ? (
|
||||||
|
<Image
|
||||||
|
src={theme.logoUrl}
|
||||||
|
alt={name}
|
||||||
|
width={36}
|
||||||
|
height={36}
|
||||||
|
className="size-9 shrink-0 rounded-lg object-contain"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary text-sm font-bold text-primary-foreground">
|
||||||
|
{name.charAt(0).toUpperCase()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{!collapsed && <span className="truncate text-sm font-semibold text-neutral-950">{name}</span>}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TenantShellInner({
|
||||||
|
initialCollapsed,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
initialCollapsed: boolean;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const { user, logout } = useAuth();
|
||||||
|
const handleLogout = React.useCallback(() => {
|
||||||
|
void logout();
|
||||||
|
}, [logout]);
|
||||||
|
|
||||||
|
const items = React.useMemo(() => filterByRole(TENANT_NAV_ITEMS, user?.role), [user?.role]);
|
||||||
|
const roleLabel = user?.role ? ROLE_LABELS[user.role] : 'Usuário';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AppShell
|
||||||
|
brand={<TenantBrand />}
|
||||||
|
brandCollapsed={<TenantBrand collapsed />}
|
||||||
|
items={items}
|
||||||
|
bottomHrefs={TENANT_BOTTOM_HREFS}
|
||||||
|
footer={<UserFooter label={roleLabel} onLogout={handleLogout} />}
|
||||||
|
footerCollapsed={<UserFooter label={roleLabel} compact onLogout={handleLogout} />}
|
||||||
|
initialCollapsed={initialCollapsed}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</AppShell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shell da área `/app`. Resolve o tema do tenant a partir do `tenant_id` do
|
||||||
|
* usuário autenticado (Etapa 13) e filtra os itens de menu por `role` — ex:
|
||||||
|
* "Equipe" só aparece para `tenant_admin` (Etapa 14, critério de aceite).
|
||||||
|
*/
|
||||||
|
export function TenantShell({
|
||||||
|
initialCollapsed,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
initialCollapsed: boolean;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TenantThemeProvider tenantId={user?.tenant_id ?? null}>
|
||||||
|
<TenantShellInner initialCollapsed={initialCollapsed}>{children}</TenantShellInner>
|
||||||
|
</TenantThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Bell, Menu, Search } from 'lucide-react';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
|
||||||
|
interface TopbarProps {
|
||||||
|
breadcrumb: React.ReactNode;
|
||||||
|
/** Logo compacta (só símbolo) exibida no lugar do breadcrumb no mobile. */
|
||||||
|
mobileBrand: React.ReactNode;
|
||||||
|
onMenuClick: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Topbar fixa no topo. Desktop: breadcrumb + busca rápida + notificações.
|
||||||
|
* Mobile (`<md`): logo símbolo + hambúrguer (abre o `Drawer`) + notificações
|
||||||
|
* — a busca funcional real fica para a Etapa 18/19, aqui só o componente.
|
||||||
|
*/
|
||||||
|
export function Topbar({ breadcrumb, mobileBrand, onMenuClick }: TopbarProps) {
|
||||||
|
return (
|
||||||
|
<header className="sticky top-0 z-20 flex h-16 items-center gap-3 border-b border-border bg-surface px-4 md:px-6">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
className="md:hidden"
|
||||||
|
onClick={onMenuClick}
|
||||||
|
aria-label="Abrir menu"
|
||||||
|
>
|
||||||
|
<Menu className="size-5" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="flex min-w-0 flex-1 items-center gap-3">
|
||||||
|
<div className="md:hidden">{mobileBrand}</div>
|
||||||
|
<div className="hidden min-w-0 md:block">{breadcrumb}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden max-w-xs flex-1 items-center md:flex">
|
||||||
|
<div className="relative w-full">
|
||||||
|
<Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-neutral-500" />
|
||||||
|
<Input placeholder="Buscar clientes, vendas..." className="pl-9" aria-label="Busca rápida" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="button" variant="ghost" size="icon-sm" aria-label="Notificações">
|
||||||
|
<Bell className="size-5" />
|
||||||
|
</Button>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { LogOut } from 'lucide-react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
interface UserFooterProps {
|
||||||
|
label: string;
|
||||||
|
sublabel?: string;
|
||||||
|
onLogout: () => void;
|
||||||
|
/** Sidebar recolhida/drawer fechado: só avatar + botão de sair, sem texto. */
|
||||||
|
compact?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Rodapé de identidade + logout da sidebar/drawer (Etapa 14). O access
|
||||||
|
* token (`lib/auth/jwt.ts`) não carrega nome/e-mail do usuário — só
|
||||||
|
* `sub`/`tipo`/`tenant_id`/`role` — então a identificação aqui é o papel do
|
||||||
|
* usuário, não o nome; ver observação da Etapa 14 no controle de progresso.
|
||||||
|
*/
|
||||||
|
export function UserFooter({ label, sublabel, onLogout, compact = false }: UserFooterProps) {
|
||||||
|
const initial = label.charAt(0).toUpperCase();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn('flex w-full items-center gap-2', compact && 'w-auto flex-col')}>
|
||||||
|
<span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground">
|
||||||
|
{initial}
|
||||||
|
</span>
|
||||||
|
{!compact && (
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="truncate text-sm font-medium text-foreground">{label}</p>
|
||||||
|
{sublabel && <p className="truncate text-xs text-neutral-500">{sublabel}</p>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
onClick={onLogout}
|
||||||
|
aria-label="Sair"
|
||||||
|
title="Sair"
|
||||||
|
>
|
||||||
|
<LogOut className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import { Slot } from 'radix-ui';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
|
||||||
|
secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
|
||||||
|
destructive:
|
||||||
|
'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
|
||||||
|
outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
|
||||||
|
ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
|
||||||
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
function Badge({
|
||||||
|
className,
|
||||||
|
variant = 'default',
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot.Root : 'span';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="badge"
|
||||||
|
data-variant={variant}
|
||||||
|
className={cn(badgeVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants };
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import { Slot } from 'radix-ui';
|
||||||
|
import { Loader2Icon } from 'lucide-react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||||
|
secondary:
|
||||||
|
'bg-secondary text-secondary-foreground border-border hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]',
|
||||||
|
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||||
|
ghost:
|
||||||
|
'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground',
|
||||||
|
outline:
|
||||||
|
'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground',
|
||||||
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
|
},
|
||||||
|
// `sm` fica abaixo de 44px de propósito: reservado para ações densas
|
||||||
|
// (ex: linha de tabela), nunca a única forma de disparar uma ação —
|
||||||
|
// ver Etapas/V2/20-controle-de-progresso-frontend.md, Etapa 12.
|
||||||
|
size: {
|
||||||
|
sm: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
||||||
|
md: 'h-11 min-w-11 gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5',
|
||||||
|
lg: 'h-12 min-w-11 gap-2 px-5 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4',
|
||||||
|
icon: 'size-11',
|
||||||
|
'icon-sm': 'size-8',
|
||||||
|
'icon-lg': 'size-12',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'primary',
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
type ButtonProps = React.ComponentProps<'button'> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
loading?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
asChild = false,
|
||||||
|
loading = false,
|
||||||
|
disabled,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: ButtonProps) {
|
||||||
|
// `Slot.Root` (Radix) exige exatamente um filho React — o wrapper de
|
||||||
|
// loading/span abaixo (usado no `<button>` nativo) sempre passaria 2
|
||||||
|
// filhos (o `{loading && ...}` condicional + o `<span>`), quebrando o
|
||||||
|
// `asChild`. Sem estado de loading fazer sentido quando quem renderiza de
|
||||||
|
// verdade é o filho (ex: um `Link`), `asChild` passa `children` direto.
|
||||||
|
if (asChild) {
|
||||||
|
return (
|
||||||
|
<Slot.Root
|
||||||
|
data-slot="button"
|
||||||
|
data-variant={variant}
|
||||||
|
data-size={size}
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Slot.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
data-slot="button"
|
||||||
|
data-variant={variant}
|
||||||
|
data-size={size}
|
||||||
|
aria-busy={loading || undefined}
|
||||||
|
className={cn(buttonVariants({ variant, size, className }), loading && 'relative')}
|
||||||
|
disabled={disabled || loading}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{loading && <Loader2Icon className="absolute size-4 animate-spin" aria-hidden />}
|
||||||
|
<span className={cn('inline-flex items-center gap-2', loading && 'invisible')}>
|
||||||
|
{children}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
||||||
@@ -0,0 +1,186 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { DayPicker, getDefaultClassNames, type DayButton, type Locale } from 'react-day-picker';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Button, buttonVariants } from '@/components/ui/button';
|
||||||
|
import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
function Calendar({
|
||||||
|
className,
|
||||||
|
classNames,
|
||||||
|
showOutsideDays = true,
|
||||||
|
captionLayout = 'label',
|
||||||
|
buttonVariant = 'ghost',
|
||||||
|
locale,
|
||||||
|
formatters,
|
||||||
|
components,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DayPicker> & {
|
||||||
|
buttonVariant?: React.ComponentProps<typeof Button>['variant'];
|
||||||
|
}) {
|
||||||
|
const defaultClassNames = getDefaultClassNames();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DayPicker
|
||||||
|
showOutsideDays={showOutsideDays}
|
||||||
|
className={cn(
|
||||||
|
'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
|
||||||
|
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||||
|
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
captionLayout={captionLayout}
|
||||||
|
locale={locale}
|
||||||
|
formatters={{
|
||||||
|
formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),
|
||||||
|
...formatters,
|
||||||
|
}}
|
||||||
|
classNames={{
|
||||||
|
root: cn('w-fit', defaultClassNames.root),
|
||||||
|
months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
|
||||||
|
month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
|
||||||
|
nav: cn(
|
||||||
|
'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
|
||||||
|
defaultClassNames.nav,
|
||||||
|
),
|
||||||
|
button_previous: cn(
|
||||||
|
buttonVariants({ variant: buttonVariant }),
|
||||||
|
'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
|
||||||
|
defaultClassNames.button_previous,
|
||||||
|
),
|
||||||
|
button_next: cn(
|
||||||
|
buttonVariants({ variant: buttonVariant }),
|
||||||
|
'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
|
||||||
|
defaultClassNames.button_next,
|
||||||
|
),
|
||||||
|
month_caption: cn(
|
||||||
|
'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
|
||||||
|
defaultClassNames.month_caption,
|
||||||
|
),
|
||||||
|
dropdowns: cn(
|
||||||
|
'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
|
||||||
|
defaultClassNames.dropdowns,
|
||||||
|
),
|
||||||
|
dropdown_root: cn('relative rounded-(--cell-radius)', defaultClassNames.dropdown_root),
|
||||||
|
dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
|
||||||
|
caption_label: cn(
|
||||||
|
'font-medium select-none',
|
||||||
|
captionLayout === 'label'
|
||||||
|
? 'text-sm'
|
||||||
|
: 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
|
||||||
|
defaultClassNames.caption_label,
|
||||||
|
),
|
||||||
|
month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),
|
||||||
|
weekdays: cn('flex', defaultClassNames.weekdays),
|
||||||
|
weekday: cn(
|
||||||
|
'flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none',
|
||||||
|
defaultClassNames.weekday,
|
||||||
|
),
|
||||||
|
week: cn('mt-2 flex w-full', defaultClassNames.week),
|
||||||
|
week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
|
||||||
|
week_number: cn(
|
||||||
|
'text-[0.8rem] text-muted-foreground select-none',
|
||||||
|
defaultClassNames.week_number,
|
||||||
|
),
|
||||||
|
day: cn(
|
||||||
|
'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
|
||||||
|
props.showWeekNumber
|
||||||
|
? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
|
||||||
|
: '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
|
||||||
|
defaultClassNames.day,
|
||||||
|
),
|
||||||
|
range_start: cn(
|
||||||
|
'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',
|
||||||
|
defaultClassNames.range_start,
|
||||||
|
),
|
||||||
|
range_middle: cn('rounded-none', defaultClassNames.range_middle),
|
||||||
|
range_end: cn(
|
||||||
|
'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',
|
||||||
|
defaultClassNames.range_end,
|
||||||
|
),
|
||||||
|
today: cn(
|
||||||
|
'rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none',
|
||||||
|
defaultClassNames.today,
|
||||||
|
),
|
||||||
|
outside: cn(
|
||||||
|
'text-muted-foreground aria-selected:text-muted-foreground',
|
||||||
|
defaultClassNames.outside,
|
||||||
|
),
|
||||||
|
disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
|
||||||
|
hidden: cn('invisible', defaultClassNames.hidden),
|
||||||
|
...classNames,
|
||||||
|
}}
|
||||||
|
components={{
|
||||||
|
Root: ({ className, rootRef, ...props }) => {
|
||||||
|
return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
|
||||||
|
},
|
||||||
|
Chevron: ({ className, orientation, ...props }) => {
|
||||||
|
if (orientation === 'left') {
|
||||||
|
return <ChevronLeftIcon className={cn('size-4', className)} {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (orientation === 'right') {
|
||||||
|
return <ChevronRightIcon className={cn('size-4', className)} {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <ChevronDownIcon className={cn('size-4', className)} {...props} />;
|
||||||
|
},
|
||||||
|
DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,
|
||||||
|
WeekNumber: ({ children, ...props }) => {
|
||||||
|
return (
|
||||||
|
<td {...props}>
|
||||||
|
<div className="flex size-(--cell-size) items-center justify-center text-center">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
...components,
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CalendarDayButton({
|
||||||
|
className,
|
||||||
|
day,
|
||||||
|
modifiers,
|
||||||
|
locale,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
|
||||||
|
const defaultClassNames = getDefaultClassNames();
|
||||||
|
|
||||||
|
const ref = React.useRef<HTMLButtonElement>(null);
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (modifiers.focused) ref.current?.focus();
|
||||||
|
}, [modifiers.focused]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
ref={ref}
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
data-day={day.date.toLocaleDateString(locale?.code)}
|
||||||
|
data-selected-single={
|
||||||
|
modifiers.selected &&
|
||||||
|
!modifiers.range_start &&
|
||||||
|
!modifiers.range_end &&
|
||||||
|
!modifiers.range_middle
|
||||||
|
}
|
||||||
|
data-range-start={modifiers.range_start}
|
||||||
|
data-range-end={modifiers.range_end}
|
||||||
|
data-range-middle={modifiers.range_middle}
|
||||||
|
className={cn(
|
||||||
|
'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',
|
||||||
|
defaultClassNames.day,
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Calendar, CalendarDayButton };
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
function Card({
|
||||||
|
className,
|
||||||
|
size = 'default',
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
data-size={size}
|
||||||
|
className={cn(
|
||||||
|
'group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn(
|
||||||
|
'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn(
|
||||||
|
'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn('text-sm text-muted-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div data-slot="card-content" className={cn('px-(--card-spacing)', className)} {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn(
|
||||||
|
'flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from '@/components/ui/command';
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||||
|
|
||||||
|
export interface ComboboxOption {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ComboboxProps {
|
||||||
|
options: ComboboxOption[];
|
||||||
|
value?: string;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
searchPlaceholder?: string;
|
||||||
|
emptyText?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
loading?: boolean;
|
||||||
|
className?: string;
|
||||||
|
id?: string;
|
||||||
|
'aria-invalid'?: boolean;
|
||||||
|
'aria-describedby'?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* `Select` com busca, usado nas listas longas do sistema (cliente,
|
||||||
|
* produto/serviço) — seção 7 do schema de frontend. Composição de
|
||||||
|
* Command + Popover, não do `Select` nativo do Radix.
|
||||||
|
*/
|
||||||
|
function Combobox({
|
||||||
|
options,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
placeholder = 'Selecionar…',
|
||||||
|
searchPlaceholder = 'Buscar…',
|
||||||
|
emptyText = 'Nenhum resultado encontrado.',
|
||||||
|
disabled,
|
||||||
|
loading,
|
||||||
|
className,
|
||||||
|
id,
|
||||||
|
...aria
|
||||||
|
}: ComboboxProps) {
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const selected = options.find((option) => option.value === value);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
id={id}
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
aria-expanded={open}
|
||||||
|
disabled={disabled || loading}
|
||||||
|
loading={loading}
|
||||||
|
className={cn(
|
||||||
|
'w-full justify-between font-normal',
|
||||||
|
!selected && 'text-muted-foreground',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...aria}
|
||||||
|
>
|
||||||
|
{selected ? selected.label : placeholder}
|
||||||
|
<ChevronsUpDownIcon className="opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder={searchPlaceholder} />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>{emptyText}</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{options.map((option) => (
|
||||||
|
<CommandItem
|
||||||
|
key={option.value}
|
||||||
|
value={option.label}
|
||||||
|
onSelect={() => {
|
||||||
|
onChange(option.value);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CheckIcon
|
||||||
|
className={cn('mr-2', option.value === value ? 'opacity-100' : 'opacity-0')}
|
||||||
|
/>
|
||||||
|
{option.label}
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Combobox };
|
||||||
@@ -0,0 +1,180 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Command as CommandPrimitive } from 'cmdk';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { InputGroup, InputGroupAddon } from '@/components/ui/input-group';
|
||||||
|
import { SearchIcon, CheckIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive
|
||||||
|
data-slot="command"
|
||||||
|
className={cn(
|
||||||
|
'flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandDialog({
|
||||||
|
title = 'Command Palette',
|
||||||
|
description = 'Search for a command to run...',
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
showCloseButton = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Dialog> & {
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
className?: string;
|
||||||
|
showCloseButton?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Dialog {...props}>
|
||||||
|
<DialogHeader className="sr-only">
|
||||||
|
<DialogTitle>{title}</DialogTitle>
|
||||||
|
<DialogDescription>{description}</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<DialogContent
|
||||||
|
className={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)}
|
||||||
|
showCloseButton={showCloseButton}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandInput({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
||||||
|
return (
|
||||||
|
<div data-slot="command-input-wrapper" className="p-1 pb-0">
|
||||||
|
<InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
|
||||||
|
<CommandPrimitive.Input
|
||||||
|
data-slot="command-input"
|
||||||
|
className={cn(
|
||||||
|
'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
<InputGroupAddon>
|
||||||
|
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
||||||
|
</InputGroupAddon>
|
||||||
|
</InputGroup>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.List
|
||||||
|
data-slot="command-list"
|
||||||
|
className={cn(
|
||||||
|
'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandEmpty({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Empty
|
||||||
|
data-slot="command-empty"
|
||||||
|
className={cn('py-6 text-center text-sm', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandGroup({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Group
|
||||||
|
data-slot="command-group"
|
||||||
|
className={cn(
|
||||||
|
'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Separator
|
||||||
|
data-slot="command-separator"
|
||||||
|
className={cn('-mx-1 h-px bg-border', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Item
|
||||||
|
data-slot="command-item"
|
||||||
|
className={cn(
|
||||||
|
"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
|
||||||
|
</CommandPrimitive.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="command-shortcut"
|
||||||
|
className={cn(
|
||||||
|
'ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Command,
|
||||||
|
CommandDialog,
|
||||||
|
CommandInput,
|
||||||
|
CommandList,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandItem,
|
||||||
|
CommandShortcut,
|
||||||
|
CommandSeparator,
|
||||||
|
};
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
interface DataPaginationProps {
|
||||||
|
/** 1-indexado, compatível com `page`/`limit`/`meta.total` da API (Etapas 1–8 do backend). */
|
||||||
|
page: number;
|
||||||
|
limit: number;
|
||||||
|
total: number;
|
||||||
|
onPageChange: (page: number) => void;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPageNumbers(page: number, totalPages: number): (number | 'ellipsis')[] {
|
||||||
|
if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
|
||||||
|
|
||||||
|
const pages = new Set([1, totalPages, page, page - 1, page + 1]);
|
||||||
|
const sorted = [...pages].filter((p) => p >= 1 && p <= totalPages).sort((a, b) => a - b);
|
||||||
|
|
||||||
|
const result: (number | 'ellipsis')[] = [];
|
||||||
|
sorted.forEach((p, i) => {
|
||||||
|
if (i > 0 && p - sorted[i - 1] > 1) result.push('ellipsis');
|
||||||
|
result.push(p);
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Controles de página compatíveis com os parâmetros de paginação do backend (Etapa 12). */
|
||||||
|
function DataPagination({ page, limit, total, onPageChange, className }: DataPaginationProps) {
|
||||||
|
const totalPages = Math.max(1, Math.ceil(total / limit));
|
||||||
|
const firstItem = total === 0 ? 0 : (page - 1) * limit + 1;
|
||||||
|
const lastItem = Math.min(page * limit, total);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
aria-label="Paginação"
|
||||||
|
className={cn('flex flex-col items-center justify-between gap-3 sm:flex-row', className)}
|
||||||
|
>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{total === 0 ? 'Nenhum resultado' : `Mostrando ${firstItem}–${lastItem} de ${total}`}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
aria-label="Página anterior"
|
||||||
|
disabled={page <= 1}
|
||||||
|
onClick={() => onPageChange(page - 1)}
|
||||||
|
>
|
||||||
|
<ChevronLeftIcon />
|
||||||
|
</Button>
|
||||||
|
{getPageNumbers(page, totalPages).map((p, index) =>
|
||||||
|
p === 'ellipsis' ? (
|
||||||
|
<span key={`ellipsis-${index}`} className="flex size-11 items-center justify-center">
|
||||||
|
<MoreHorizontalIcon className="size-4 text-muted-foreground" aria-hidden />
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
key={p}
|
||||||
|
variant={p === page ? 'outline' : 'ghost'}
|
||||||
|
size="icon"
|
||||||
|
aria-label={`Página ${p}`}
|
||||||
|
aria-current={p === page ? 'page' : undefined}
|
||||||
|
onClick={() => onPageChange(p)}
|
||||||
|
>
|
||||||
|
{p}
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
aria-label="Próxima página"
|
||||||
|
disabled={page >= totalPages}
|
||||||
|
onClick={() => onPageChange(page + 1)}
|
||||||
|
>
|
||||||
|
<ChevronRightIcon />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { DataPagination };
|
||||||
@@ -0,0 +1,306 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { ArrowDownIcon, ArrowUpIcon, ChevronDownIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { useIsDesktop } from '@/hooks/use-media-query';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
import { SkeletonTableRow, SkeletonCard } from '@/components/ui/skeleton';
|
||||||
|
import { EmptyState } from '@/components/ui/empty-state';
|
||||||
|
import { DataPagination } from '@/components/ui/data-pagination';
|
||||||
|
|
||||||
|
export interface DataTableSort {
|
||||||
|
columnId: string;
|
||||||
|
direction: 'asc' | 'desc';
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DataTableColumn<T> {
|
||||||
|
id: string;
|
||||||
|
header: string;
|
||||||
|
cell: (row: T) => React.ReactNode;
|
||||||
|
sortable?: boolean;
|
||||||
|
/** Campo em destaque no card mobile (limite recomendado: 1–2 por tabela). */
|
||||||
|
primary?: boolean;
|
||||||
|
/** Não mostrado no card mobile (ex: coluna técnica só relevante em tela larga). */
|
||||||
|
hideOnMobileCard?: boolean;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DataTableProps<T> {
|
||||||
|
columns: DataTableColumn<T>[];
|
||||||
|
data: T[];
|
||||||
|
keyField: (row: T) => string;
|
||||||
|
loading?: boolean;
|
||||||
|
sort?: DataTableSort;
|
||||||
|
onSortChange?: (sort: DataTableSort) => void;
|
||||||
|
emptyTitle?: string;
|
||||||
|
emptyDescription?: string;
|
||||||
|
emptyAction?: React.ReactNode;
|
||||||
|
rowActions?: (row: T) => React.ReactNode;
|
||||||
|
onRowClick?: (row: T) => void;
|
||||||
|
pagination?: {
|
||||||
|
page: number;
|
||||||
|
limit: number;
|
||||||
|
total: number;
|
||||||
|
onPageChange: (page: number) => void;
|
||||||
|
};
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SortButton<T>({
|
||||||
|
column,
|
||||||
|
sort,
|
||||||
|
onSortChange,
|
||||||
|
}: {
|
||||||
|
column: DataTableColumn<T>;
|
||||||
|
sort?: DataTableSort;
|
||||||
|
onSortChange: (sort: DataTableSort) => void;
|
||||||
|
}) {
|
||||||
|
const active = sort?.columnId === column.id;
|
||||||
|
const nextDirection = active && sort?.direction === 'asc' ? 'desc' : 'asc';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="-my-2 -ml-1 flex min-h-11 items-center gap-1 rounded-sm py-2 pl-1 font-medium hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
|
||||||
|
onClick={() => onSortChange({ columnId: column.id, direction: nextDirection })}
|
||||||
|
>
|
||||||
|
{column.header}
|
||||||
|
{active ? (
|
||||||
|
sort.direction === 'asc' ? (
|
||||||
|
<ArrowUpIcon className="size-3.5" aria-hidden />
|
||||||
|
) : (
|
||||||
|
<ArrowDownIcon className="size-3.5" aria-hidden />
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<ArrowUpIcon className="size-3.5 opacity-0 group-hover:opacity-30" aria-hidden />
|
||||||
|
)}
|
||||||
|
<span className="sr-only">
|
||||||
|
{active ? `ordenado ${sort.direction === 'asc' ? 'crescente' : 'decrescente'}` : 'ordenar'}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MobileRowCard<T>({
|
||||||
|
row,
|
||||||
|
columns,
|
||||||
|
rowActions,
|
||||||
|
onRowClick,
|
||||||
|
}: {
|
||||||
|
row: T;
|
||||||
|
columns: DataTableColumn<T>[];
|
||||||
|
rowActions?: (row: T) => React.ReactNode;
|
||||||
|
onRowClick?: (row: T) => void;
|
||||||
|
}) {
|
||||||
|
const [expanded, setExpanded] = React.useState(false);
|
||||||
|
const primaryColumns = columns.filter((c) => c.primary);
|
||||||
|
const secondaryColumns = columns.filter((c) => !c.primary && !c.hideOnMobileCard);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className={cn('flex flex-col gap-3 p-4', onRowClick && 'cursor-pointer')}
|
||||||
|
onClick={onRowClick ? () => onRowClick(row) : undefined}
|
||||||
|
role={onRowClick ? 'button' : undefined}
|
||||||
|
tabIndex={onRowClick ? 0 : undefined}
|
||||||
|
onKeyDown={
|
||||||
|
onRowClick
|
||||||
|
? (e) => {
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
e.preventDefault();
|
||||||
|
onRowClick(row);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{primaryColumns.length > 0 && (
|
||||||
|
<div className="flex flex-col gap-0.5">
|
||||||
|
{primaryColumns.map((column) => (
|
||||||
|
<div key={column.id} className="text-base font-medium text-foreground">
|
||||||
|
{column.cell(row)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{secondaryColumns.length > 0 && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="-mx-2 flex min-h-11 items-center gap-1 self-start px-2 text-xs font-medium text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setExpanded((v) => !v);
|
||||||
|
}}
|
||||||
|
aria-expanded={expanded}
|
||||||
|
>
|
||||||
|
{expanded ? 'Ver menos' : 'Ver mais'}
|
||||||
|
<ChevronDownIcon
|
||||||
|
className={cn('size-3.5 transition-transform', expanded && 'rotate-180')}
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
{expanded && (
|
||||||
|
<dl className="flex flex-col gap-2 border-t border-border pt-3">
|
||||||
|
{secondaryColumns.map((column) => (
|
||||||
|
<div key={column.id} className="flex items-center justify-between gap-4 text-sm">
|
||||||
|
<dt className="text-muted-foreground">{column.header}</dt>
|
||||||
|
<dd className="tabular-nums text-foreground">{column.cell(row)}</dd>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</dl>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{rowActions && (
|
||||||
|
<div
|
||||||
|
className="flex items-center gap-2 border-t border-border pt-3"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
{rowActions(row)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Componente central do design system (Etapa 12). Abaixo de `md` renderiza
|
||||||
|
* como lista de Cards empilhados em vez de fazer scroll horizontal na
|
||||||
|
* tabela — cada `column.primary` vira um campo em destaque no card, o
|
||||||
|
* resto fica atrás de "Ver mais".
|
||||||
|
*/
|
||||||
|
function DataTable<T>({
|
||||||
|
columns,
|
||||||
|
data,
|
||||||
|
keyField,
|
||||||
|
loading,
|
||||||
|
sort,
|
||||||
|
onSortChange,
|
||||||
|
emptyTitle = 'Nenhum resultado encontrado',
|
||||||
|
emptyDescription,
|
||||||
|
emptyAction,
|
||||||
|
rowActions,
|
||||||
|
onRowClick,
|
||||||
|
pagination,
|
||||||
|
className,
|
||||||
|
}: DataTableProps<T>) {
|
||||||
|
const isDesktop = useIsDesktop();
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
{isDesktop ? (
|
||||||
|
<div className="rounded-lg border border-border">
|
||||||
|
{Array.from({ length: 5 }).map((_, i) => (
|
||||||
|
<SkeletonTableRow key={i} columns={columns.length + (rowActions ? 1 : 0)} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
{Array.from({ length: 3 }).map((_, i) => (
|
||||||
|
<SkeletonCard key={i} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
<EmptyState title={emptyTitle} description={emptyDescription} action={emptyAction} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn('flex flex-col gap-4', className)}>
|
||||||
|
{isDesktop ? (
|
||||||
|
// `overflow-x-auto` (não `overflow-hidden`): com muitas colunas perto
|
||||||
|
// do breakpoint `md`, a tabela pode ficar mais larga que o
|
||||||
|
// container — sem scroll horizontal, a(s) última(s) coluna(s)
|
||||||
|
// simplesmente sumiam cortadas em vez de ficarem acessíveis
|
||||||
|
// (achado da Etapa 15, testando `/master/tenants` em 768px).
|
||||||
|
<div className="overflow-x-auto overflow-y-hidden rounded-lg border border-border">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
{columns.map((column) => (
|
||||||
|
<TableHead key={column.id} className={cn('group', column.className)}>
|
||||||
|
{column.sortable && onSortChange ? (
|
||||||
|
<SortButton column={column} sort={sort} onSortChange={onSortChange} />
|
||||||
|
) : (
|
||||||
|
column.header
|
||||||
|
)}
|
||||||
|
</TableHead>
|
||||||
|
))}
|
||||||
|
{rowActions && (
|
||||||
|
<TableHead className="w-px">
|
||||||
|
<span className="sr-only">Ações</span>
|
||||||
|
</TableHead>
|
||||||
|
)}
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{data.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={keyField(row)}
|
||||||
|
className={onRowClick ? 'cursor-pointer' : undefined}
|
||||||
|
onClick={onRowClick ? () => onRowClick(row) : undefined}
|
||||||
|
tabIndex={onRowClick ? 0 : undefined}
|
||||||
|
onKeyDown={
|
||||||
|
onRowClick
|
||||||
|
? (e) => {
|
||||||
|
if (e.key === 'Enter') onRowClick(row);
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{columns.map((column) => (
|
||||||
|
<TableCell key={column.id} className={cn('tabular-nums', column.className)}>
|
||||||
|
{column.cell(row)}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
{rowActions && (
|
||||||
|
<TableCell onClick={(e) => e.stopPropagation()}>
|
||||||
|
<div className="flex items-center gap-2">{rowActions(row)}</div>
|
||||||
|
</TableCell>
|
||||||
|
)}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
{data.map((row) => (
|
||||||
|
<MobileRowCard
|
||||||
|
key={keyField(row)}
|
||||||
|
row={row}
|
||||||
|
columns={columns}
|
||||||
|
rowActions={rowActions}
|
||||||
|
onRowClick={onRowClick}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{pagination && <DataPagination {...pagination} />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { DataTable };
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { format } from 'date-fns';
|
||||||
|
import { ptBR } from 'date-fns/locale';
|
||||||
|
import { CalendarIcon } from 'lucide-react';
|
||||||
|
import type { DateRange } from 'react-day-picker';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Calendar } from '@/components/ui/calendar';
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||||
|
|
||||||
|
interface DatePickerProps {
|
||||||
|
value?: Date;
|
||||||
|
onChange: (date: Date | undefined) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
className?: string;
|
||||||
|
id?: string;
|
||||||
|
'aria-invalid'?: boolean;
|
||||||
|
'aria-describedby'?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Seleção de data única — usada em formulários (ex: vencimento de parcela). */
|
||||||
|
function DatePicker({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
placeholder = 'Selecionar data',
|
||||||
|
disabled,
|
||||||
|
className,
|
||||||
|
id,
|
||||||
|
...aria
|
||||||
|
}: DatePickerProps) {
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
id={id}
|
||||||
|
variant="outline"
|
||||||
|
disabled={disabled}
|
||||||
|
className={cn(
|
||||||
|
'w-full justify-start font-normal',
|
||||||
|
!value && 'text-muted-foreground',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...aria}
|
||||||
|
>
|
||||||
|
<CalendarIcon />
|
||||||
|
{value ? format(value, "dd 'de' MMMM 'de' yyyy", { locale: ptBR }) : placeholder}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0" align="start">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={value}
|
||||||
|
onSelect={(date) => {
|
||||||
|
onChange(date);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
locale={ptBR}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DateRangePickerProps {
|
||||||
|
value?: DateRange;
|
||||||
|
onChange: (range: DateRange | undefined) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
className?: string;
|
||||||
|
id?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Seleção de período — usada nos filtros de dashboard/listagens (seção 7 do schema). */
|
||||||
|
function DateRangePicker({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
placeholder = 'Selecionar período',
|
||||||
|
disabled,
|
||||||
|
className,
|
||||||
|
id,
|
||||||
|
}: DateRangePickerProps) {
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
|
||||||
|
const label = React.useMemo(() => {
|
||||||
|
if (!value?.from) return placeholder;
|
||||||
|
if (!value.to) return format(value.from, 'dd/MM/yyyy', { locale: ptBR });
|
||||||
|
return `${format(value.from, 'dd/MM/yyyy', { locale: ptBR })} – ${format(value.to, 'dd/MM/yyyy', { locale: ptBR })}`;
|
||||||
|
}, [value, placeholder]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
id={id}
|
||||||
|
variant="outline"
|
||||||
|
disabled={disabled}
|
||||||
|
className={cn(
|
||||||
|
'w-full justify-start font-normal',
|
||||||
|
!value?.from && 'text-muted-foreground',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CalendarIcon />
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0" align="start">
|
||||||
|
<Calendar
|
||||||
|
mode="range"
|
||||||
|
selected={value}
|
||||||
|
onSelect={onChange}
|
||||||
|
locale={ptBR}
|
||||||
|
numberOfMonths={2}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { DatePicker, DateRangePicker };
|
||||||
@@ -0,0 +1,145 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Dialog as DialogPrimitive } from 'radix-ui';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { XIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||||
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||||
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||||
|
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||||
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
data-slot="dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||||
|
showCloseButton?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DialogPortal>
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
data-slot="dialog-content"
|
||||||
|
className={cn(
|
||||||
|
'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<DialogPrimitive.Close data-slot="dialog-close" asChild>
|
||||||
|
<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
|
||||||
|
<XIcon />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</Button>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div data-slot="dialog-header" className={cn('flex flex-col gap-2', className)} {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogFooter({
|
||||||
|
className,
|
||||||
|
showCloseButton = false,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'div'> & {
|
||||||
|
showCloseButton?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<DialogPrimitive.Close asChild>
|
||||||
|
<Button variant="outline">Close</Button>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
data-slot="dialog-title"
|
||||||
|
className={cn('text-base leading-none font-medium', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
data-slot="dialog-description"
|
||||||
|
className={cn(
|
||||||
|
'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogPortal,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
};
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { InboxIcon, type LucideIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
interface EmptyStateProps {
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
icon?: LucideIcon;
|
||||||
|
action?: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Usado em toda listagem vazia do sistema (Etapa 12), ex: "Nenhum cliente cadastrado ainda". */
|
||||||
|
function EmptyState({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
icon: Icon = InboxIcon,
|
||||||
|
action,
|
||||||
|
className,
|
||||||
|
}: EmptyStateProps) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col items-center justify-center gap-3 px-4 py-12 text-center',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex size-12 items-center justify-center rounded-full bg-muted">
|
||||||
|
<Icon className="size-6 text-muted-foreground" aria-hidden />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<p className="text-sm font-medium text-foreground">{title}</p>
|
||||||
|
{description && <p className="text-sm text-muted-foreground">{description}</p>}
|
||||||
|
</div>
|
||||||
|
{action}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { EmptyState };
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
|
||||||
|
interface FormFieldProps {
|
||||||
|
label: string;
|
||||||
|
children: React.ReactElement<{
|
||||||
|
id?: string;
|
||||||
|
'aria-invalid'?: boolean;
|
||||||
|
'aria-describedby'?: string;
|
||||||
|
}>;
|
||||||
|
error?: string;
|
||||||
|
helpText?: string;
|
||||||
|
required?: boolean;
|
||||||
|
className?: string;
|
||||||
|
id?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapper obrigatório para label + input + erro + texto de ajuda —
|
||||||
|
* nenhuma tela deve montar esse trio manualmente (Etapa 12). Injeta
|
||||||
|
* `id`/`aria-invalid`/`aria-describedby` no único filho, então `children`
|
||||||
|
* precisa ser um componente que espalha `...props` no elemento nativo
|
||||||
|
* (Input, Textarea, SelectTrigger etc).
|
||||||
|
*/
|
||||||
|
function FormField({ label, children, error, helpText, required, className, id }: FormFieldProps) {
|
||||||
|
const autoId = React.useId();
|
||||||
|
const fieldId = id ?? autoId;
|
||||||
|
const errorId = `${fieldId}-error`;
|
||||||
|
const helpId = `${fieldId}-help`;
|
||||||
|
|
||||||
|
const describedBy =
|
||||||
|
[error ? errorId : null, helpText ? helpId : null].filter(Boolean).join(' ') || undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn('flex flex-col gap-1.5', className)}>
|
||||||
|
<Label htmlFor={fieldId}>
|
||||||
|
{label}
|
||||||
|
{required && (
|
||||||
|
<span className="text-destructive" aria-hidden>
|
||||||
|
{' '}
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Label>
|
||||||
|
{React.cloneElement(children, {
|
||||||
|
id: fieldId,
|
||||||
|
'aria-invalid': !!error,
|
||||||
|
'aria-describedby': describedBy,
|
||||||
|
})}
|
||||||
|
{helpText && !error && (
|
||||||
|
<p id={helpId} className="text-xs text-muted-foreground">
|
||||||
|
{helpText}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<p id={errorId} role="alert" className="text-xs text-destructive">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { FormField };
|
||||||
@@ -0,0 +1,144 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
|
||||||
|
function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="input-group"
|
||||||
|
role="group"
|
||||||
|
className={cn(
|
||||||
|
'group/input-group relative flex h-11 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputGroupAddonVariants = cva(
|
||||||
|
"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
align: {
|
||||||
|
'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
|
||||||
|
'inline-end': 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
|
||||||
|
'block-start':
|
||||||
|
'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
|
||||||
|
'block-end':
|
||||||
|
'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
align: 'inline-start',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
function InputGroupAddon({
|
||||||
|
className,
|
||||||
|
align = 'inline-start',
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="group"
|
||||||
|
data-slot="input-group-addon"
|
||||||
|
data-align={align}
|
||||||
|
className={cn(inputGroupAddonVariants({ align }), className)}
|
||||||
|
onClick={(e) => {
|
||||||
|
if ((e.target as HTMLElement).closest('button')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.currentTarget.parentElement?.querySelector('input')?.focus();
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
||||||
|
sm: '',
|
||||||
|
'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
|
||||||
|
'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
size: 'xs',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function InputGroupButton({
|
||||||
|
className,
|
||||||
|
type = 'button',
|
||||||
|
variant = 'ghost',
|
||||||
|
size = 'xs',
|
||||||
|
...props
|
||||||
|
}: Omit<React.ComponentProps<typeof Button>, 'size'> &
|
||||||
|
VariantProps<typeof inputGroupButtonVariants>) {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
type={type}
|
||||||
|
data-size={size}
|
||||||
|
variant={variant}
|
||||||
|
className={cn(inputGroupButtonVariants({ size }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
data-slot="input-group-control"
|
||||||
|
className={cn(
|
||||||
|
'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
|
||||||
|
return (
|
||||||
|
<Textarea
|
||||||
|
data-slot="input-group-control"
|
||||||
|
className={cn(
|
||||||
|
'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
InputGroup,
|
||||||
|
InputGroupAddon,
|
||||||
|
InputGroupButton,
|
||||||
|
InputGroupText,
|
||||||
|
InputGroupInput,
|
||||||
|
InputGroupTextarea,
|
||||||
|
};
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
data-slot="input"
|
||||||
|
className={cn(
|
||||||
|
'h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Input };
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Label as LabelPrimitive } from 'radix-ui';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
data-slot="label"
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Label };
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Popover as PopoverPrimitive } from 'radix-ui';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
||||||
|
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
||||||
|
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverContent({
|
||||||
|
className,
|
||||||
|
align = 'center',
|
||||||
|
sideOffset = 4,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<PopoverPrimitive.Portal>
|
||||||
|
<PopoverPrimitive.Content
|
||||||
|
data-slot="popover-content"
|
||||||
|
align={align}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
'z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</PopoverPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
||||||
|
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="popover-header"
|
||||||
|
className={cn('flex flex-col gap-0.5 text-sm', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
|
||||||
|
return <div data-slot="popover-title" className={cn('font-medium', className)} {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>) {
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
data-slot="popover-description"
|
||||||
|
className={cn('text-muted-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Popover,
|
||||||
|
PopoverAnchor,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverDescription,
|
||||||
|
PopoverHeader,
|
||||||
|
PopoverTitle,
|
||||||
|
PopoverTrigger,
|
||||||
|
};
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { useIsDesktop } from '@/hooks/use-media-query';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetDescription,
|
||||||
|
SheetFooter,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
} from '@/components/ui/sheet';
|
||||||
|
|
||||||
|
interface ResponsiveDialogProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
footer?: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Um único componente para modal (Etapa 12): centralizado no desktop
|
||||||
|
* (`Dialog`), bottom sheet no mobile (`Sheet` com `side="bottom"`) —
|
||||||
|
* escolhido em vez de tela cheia porque a maioria dos formulários deste
|
||||||
|
* projeto (confirmações, cadastro rápido de cliente, edição de parcela)
|
||||||
|
* é curta o bastante para caber sem precisar ocupar a tela inteira;
|
||||||
|
* `max-h-[85vh]` com scroll interno cobre os casos mais longos. Alterna
|
||||||
|
* no mesmo breakpoint `md` usado pela `Table`.
|
||||||
|
*/
|
||||||
|
function ResponsiveDialog({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
children,
|
||||||
|
footer,
|
||||||
|
className,
|
||||||
|
}: ResponsiveDialogProps) {
|
||||||
|
const isDesktop = useIsDesktop();
|
||||||
|
|
||||||
|
if (isDesktop) {
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className={className}>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{title}</DialogTitle>
|
||||||
|
{description && <DialogDescription>{description}</DialogDescription>}
|
||||||
|
</DialogHeader>
|
||||||
|
{children}
|
||||||
|
{footer && <DialogFooter>{footer}</DialogFooter>}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||||
|
<SheetContent
|
||||||
|
side="bottom"
|
||||||
|
className={`max-h-[85vh] overflow-y-auto rounded-t-xl ${className ?? ''}`}
|
||||||
|
>
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle>{title}</SheetTitle>
|
||||||
|
{description && <SheetDescription>{description}</SheetDescription>}
|
||||||
|
</SheetHeader>
|
||||||
|
<div className="px-4">{children}</div>
|
||||||
|
{footer && <SheetFooter>{footer}</SheetFooter>}
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { ResponsiveDialog };
|
||||||
@@ -0,0 +1,185 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Select as SelectPrimitive } from 'radix-ui';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||||
|
return <SelectPrimitive.Root data-slot="select" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Group
|
||||||
|
data-slot="select-group"
|
||||||
|
className={cn('scroll-my-1 p-1', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||||
|
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectTrigger({
|
||||||
|
className,
|
||||||
|
size = 'default',
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||||
|
size?: 'sm' | 'default';
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
data-slot="select-trigger"
|
||||||
|
data-size={size}
|
||||||
|
className={cn(
|
||||||
|
"flex w-full items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-3 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-11 data-[size=sm]:h-8 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
position = 'item-aligned',
|
||||||
|
align = 'center',
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
data-slot="select-content"
|
||||||
|
data-align-trigger={position === 'item-aligned'}
|
||||||
|
className={cn(
|
||||||
|
'relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
||||||
|
position === 'popper' &&
|
||||||
|
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
position={position}
|
||||||
|
align={align}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SelectScrollUpButton />
|
||||||
|
<SelectPrimitive.Viewport
|
||||||
|
data-position={position}
|
||||||
|
className={cn(
|
||||||
|
'data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)',
|
||||||
|
position === 'popper' && '',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
<SelectScrollDownButton />
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
data-slot="select-label"
|
||||||
|
className={cn('px-1.5 py-1 text-xs text-muted-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
data-slot="select-item"
|
||||||
|
className={cn(
|
||||||
|
"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="pointer-events-none" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Separator
|
||||||
|
data-slot="select-separator"
|
||||||
|
className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollUpButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollUpButton
|
||||||
|
data-slot="select-scroll-up-button"
|
||||||
|
className={cn(
|
||||||
|
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronUpIcon />
|
||||||
|
</SelectPrimitive.ScrollUpButton>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollDownButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollDownButton
|
||||||
|
data-slot="select-scroll-down-button"
|
||||||
|
className={cn(
|
||||||
|
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDownIcon />
|
||||||
|
</SelectPrimitive.ScrollDownButton>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectLabel,
|
||||||
|
SelectScrollDownButton,
|
||||||
|
SelectScrollUpButton,
|
||||||
|
SelectSeparator,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
};
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Separator as SeparatorPrimitive } from 'radix-ui';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
function Separator({
|
||||||
|
className,
|
||||||
|
orientation = 'horizontal',
|
||||||
|
decorative = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
data-slot="separator"
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Separator };
|
||||||
@@ -0,0 +1,130 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Dialog as SheetPrimitive } from 'radix-ui';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { XIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||||
|
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||||
|
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||||
|
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||||
|
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Overlay
|
||||||
|
data-slot="sheet-overlay"
|
||||||
|
className={cn(
|
||||||
|
'fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
side = 'right',
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||||
|
side?: 'top' | 'right' | 'bottom' | 'left';
|
||||||
|
showCloseButton?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SheetPortal>
|
||||||
|
<SheetOverlay />
|
||||||
|
<SheetPrimitive.Content
|
||||||
|
data-slot="sheet-content"
|
||||||
|
data-side={side}
|
||||||
|
className={cn(
|
||||||
|
'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<SheetPrimitive.Close data-slot="sheet-close" asChild>
|
||||||
|
<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
|
||||||
|
<XIcon />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</Button>
|
||||||
|
</SheetPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</SheetPrimitive.Content>
|
||||||
|
</SheetPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-header"
|
||||||
|
className={cn('flex flex-col gap-0.5 p-4', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-footer"
|
||||||
|
className={cn('mt-auto flex flex-col gap-2 p-4', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Title
|
||||||
|
data-slot="sheet-title"
|
||||||
|
className={cn('text-base font-medium text-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Description
|
||||||
|
data-slot="sheet-description"
|
||||||
|
className={cn('text-sm text-muted-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sheet,
|
||||||
|
SheetTrigger,
|
||||||
|
SheetClose,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetFooter,
|
||||||
|
SheetTitle,
|
||||||
|
SheetDescription,
|
||||||
|
};
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="skeleton"
|
||||||
|
className={cn('animate-pulse rounded-md bg-muted', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Linha de texto — usada em qualquer trecho aguardando conteúdo textual. */
|
||||||
|
function SkeletonText({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return <Skeleton className={cn('h-4 w-full', className)} {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Bloco de card — usada em grids de dashboard enquanto os dados carregam. */
|
||||||
|
function SkeletonCard({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return <Skeleton className={cn('h-32 w-full rounded-xl', className)} {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Linha de tabela — usada pela `DataTable` no estado de loading. */
|
||||||
|
function SkeletonTableRow({ columns = 4 }: { columns?: number }) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-4 border-b border-border px-2 py-3 last:border-0">
|
||||||
|
{Array.from({ length: columns }).map((_, index) => (
|
||||||
|
<Skeleton key={index} className="h-4 flex-1" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Skeleton, SkeletonText, SkeletonCard, SkeletonTableRow };
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useTheme } from 'next-themes';
|
||||||
|
import { Toaster as Sonner, type ToasterProps } from 'sonner';
|
||||||
|
import {
|
||||||
|
CircleCheckIcon,
|
||||||
|
InfoIcon,
|
||||||
|
TriangleAlertIcon,
|
||||||
|
OctagonXIcon,
|
||||||
|
Loader2Icon,
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
const Toaster = ({ ...props }: ToasterProps) => {
|
||||||
|
const { theme = 'system' } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sonner
|
||||||
|
theme={theme as ToasterProps['theme']}
|
||||||
|
className="toaster group"
|
||||||
|
icons={{
|
||||||
|
success: <CircleCheckIcon className="size-4" />,
|
||||||
|
info: <InfoIcon className="size-4" />,
|
||||||
|
warning: <TriangleAlertIcon className="size-4" />,
|
||||||
|
error: <OctagonXIcon className="size-4" />,
|
||||||
|
loading: <Loader2Icon className="size-4 animate-spin" />,
|
||||||
|
}}
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
'--normal-bg': 'var(--popover)',
|
||||||
|
'--normal-text': 'var(--popover-foreground)',
|
||||||
|
'--normal-border': 'var(--border)',
|
||||||
|
'--border-radius': 'var(--radius)',
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
toastOptions={{
|
||||||
|
classNames: {
|
||||||
|
toast: 'cn-toast',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Toaster };
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
export const STATUS_PILL_TONES = ['success', 'warning', 'danger', 'primary', 'neutral'] as const;
|
||||||
|
type StatusPillTone = (typeof STATUS_PILL_TONES)[number];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Status de negócio já existentes no backend (Etapas 1–8) → cor semântica
|
||||||
|
* + label em português, resolvidos uma única vez aqui para não repetir
|
||||||
|
* esse mapeamento em cada tela (Etapa 12).
|
||||||
|
*/
|
||||||
|
export const STATUS_PILL_MAP = {
|
||||||
|
pendente: { tone: 'warning', label: 'Pendente' },
|
||||||
|
pago: { tone: 'success', label: 'Pago' },
|
||||||
|
atrasado: { tone: 'danger', label: 'Atrasado' },
|
||||||
|
cancelado: { tone: 'neutral', label: 'Cancelado' },
|
||||||
|
ativo: { tone: 'success', label: 'Ativo' },
|
||||||
|
inadimplente: { tone: 'danger', label: 'Inadimplente' },
|
||||||
|
suspenso: { tone: 'warning', label: 'Suspenso' },
|
||||||
|
trial: { tone: 'primary', label: 'Trial' },
|
||||||
|
confirmada: { tone: 'primary', label: 'Confirmada' },
|
||||||
|
concluida: { tone: 'success', label: 'Concluída' },
|
||||||
|
orcamento: { tone: 'neutral', label: 'Orçamento' },
|
||||||
|
cancelada: { tone: 'neutral', label: 'Cancelada' },
|
||||||
|
} as const satisfies Record<string, { tone: StatusPillTone; label: string }>;
|
||||||
|
|
||||||
|
export type BusinessStatus = keyof typeof STATUS_PILL_MAP;
|
||||||
|
|
||||||
|
const toneClasses: Record<StatusPillTone, string> = {
|
||||||
|
success: 'bg-success/10 text-success',
|
||||||
|
warning: 'bg-warning/10 text-warning',
|
||||||
|
danger: 'bg-danger/10 text-danger',
|
||||||
|
primary: 'bg-primary/10 text-primary',
|
||||||
|
neutral: 'bg-neutral-500/10 text-neutral-500',
|
||||||
|
};
|
||||||
|
|
||||||
|
interface StatusPillProps {
|
||||||
|
status: BusinessStatus;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatusPill({ status, className }: StatusPillProps) {
|
||||||
|
const config = STATUS_PILL_MAP[status];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="status-pill"
|
||||||
|
className={cn(
|
||||||
|
'inline-flex h-5 w-fit shrink-0 items-center justify-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap',
|
||||||
|
toneClasses[config.tone],
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{config.label}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { StatusPill };
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user