# belezaki! — Página de Serviços (Catálogo Godmode) > **Versão**: 1.0 (maio/2026) > **O que é**: a página `/servicos` do app — o catálogo de serviços do salão/clínica. > **Por que ela importa**: o catálogo é a peça que **alimenta tudo** — agenda, comanda, comissão, estoque, booking online, marketplace, fidelidade, IA. Um catálogo mal modelado limita o produto inteiro. A maioria dos concorrentes nacionais entrega só o básico (nome + duração + preço + comissão); aqui vamos muito além. --- ## 1. O gap Auditando a v0.11 do belezaki!, **não havia página dedicada de cadastro de serviços** — só o model `Service` no Prisma e cadastros pontuais dentro do onboarding/agenda. Esse é um buraco grande: sem uma página rica de catálogo, o salão depende do suporte humano pra mexer no preço, comissão, descrição online, etc. Todos os players sérios têm essa página. Antes de construir, mapeei o que cada concorrente entrega: | Player | Pontos fortes do catálogo | Pontos fracos | |---|---|---| | **Avec** | Categoria, cor, comissão, booking online, marketplace, split por serviço | Sem prontuário-link, sem dynamic pricing, sem variantes, sem upsell automático | | **Trinks** | Marketing por serviço, +130 relatórios separam por serviço, comissão escalonada | UX antiga; pacotes/membership só por serviço, sem add-on | | **Salão99** | Onboarding rápido, cor, comissão simples | Sem variantes, sem booking SEO, sem custo/margem | | **Belezzia / Sistema Beauty** | Categoria, comissão | Catálogo raso | | **AppBeleza / Programa Salão** | Pacotes, gift, app cliente | Sem dynamic pricing, sem online SEO, sem custo | | **Fresha** | **Variantes (curto/médio/longo)**, galeria, **booking SEO**, **member-only**, marketplace, add-on | Sem custo unitário, sem dynamic pricing real | | **Booksy** | Marketplace, **add-on**, IA-suggested description, descrição rica | Sem custo/margem detalhada | | **Vagaro / Mindbody** | **Memberships**, recurring, **comissão por profissional**, capacidade em grupo | UX pesada | | **GlossGenius** | **IA sugere preço de mercado**, fotografia premium, UI bonita | Catálogo simples | | **Boulevard / Zenoti** | **Dynamic pricing**, **prep/cleanup time**, **resource allocation**, equipment binding, **room** | Caro / enterprise | O belezaki! `/servicos` **consolida o melhor de todos** e adiciona o que é único nosso: **conexão com anamnese/termo da clínica**, **vertical config** (Brow/Lash/Barber/Make/Nails) e **IA sugerindo preço baseada em salões similares na sua região**. --- ## 2. O modelo de dados — `ServicePlus` (extensão premium) `schema-extensions-services.prisma` (já no repo). Os 25+ campos por grupo: **Identificação**: `name`, `internalCode`, `description`, `shortDescription`, `slug`, `categoryId`, `tags[]`. **Tempo & operação**: `activeMinutes`, `processingMinutes` (química esperando — o profissional atende outro), `prepMinutes`, `cleanupMinutes`, `capacityType` (individual/grupo), `maxConcurrent` (limite de execuções simultâneas, ex.: 3 lavatórios = 3 químicas). **Preço**: `priceModel` (FIXED/FROM/RANGE/VARIANTS/HIDDEN), `priceCents`, `costCents` (insumo), `marginPercent` (calculado), **`dynamicPricingEnabled` + `peakMultiplier` + `offPeakMultiplier`**. **Sinal & política**: `depositRequired`, `depositPercent`, `cancellationPolicyHours`, `noShowFeePercent`. **Comissão**: `commissionModel` (PERCENT/FIXED/TIERED), `commissionPercent`, `commissionFixedCents`, `commissionTiers` (json escalonado), `assistantCommissionPercent`. **Booking online & marketplace**: `visibility` (INTERNAL/ONLINE/MARKETPLACE), `publicTitle`, `publicDescription`, `seoTitle`, `slug`, `requiresApproval`, `minAdvanceHours`, `maxAdvanceDays`, `bookingBufferAfter`. **Saúde & compliance** (a cunha anti-Avec): `requiresAnamnese`, `anamnesisTemplateId`, `requiresConsent`, `consentTemplateId`, `contraindications`, `recoveryHours` (downtime), `pregnancySafe`, `breastfeedingSafe`, `ageMin/ageMax`, `genderTarget`. **Recursos exigidos**: `requiredResourceIds[]` (cabines), `requiredEquipmentIds[]`, `requiredProfessionalSkills[]`. **Comercial**: `packageEligible`, `giftCardEligible`, `membershipEligible`, `recurringRecommended`, `recommendedCadenceDays`, `recommendedNextServiceIds[]` (upsell). **Vertical config**: `verticalConfig` Json — Lash → `{fioMm, curvatura, colaLote}`, Brow → `{tecnica, mapping}`, Make → `{modoEvento, kitProprio}`. **IA & analytics**: `aiSuggestedPriceCents` (+`reasoning`), `aiSuggestedDuration`, `popularityScore`, `profitabilityScore`. **Tabelas auxiliares** (apoio): - `ServiceCategory` (árvore com `parentId`) - `ServicePriceVariant` (curto/médio/longo) - `ServiceProfessionalPrice` (preço/comissão override por profissional) - `ServiceConsumable` (qual produto consome, em que qtd, controle de lote) - `ServiceGalleryImage` (antes/depois com consentimento) - `ServiceAddon` (anexáveis ao serviço-pai com desconto) --- ## 3. A página: arquitetura visual Segue o padrão **godmode-page-design** (header com ícone gradiente → stats bar → toolbar premium → multiple views → drawer de edição → bulk actions). **Header**: ícone gradiente Scissors + título + sublabel ("X ativos · ticket médio R$ Y · Z no booking"). Dois CTAs: *"Sugerir do mercado (IA)"* e *"Novo serviço"*. **Stats bar (6 KPIs)**: Total · Ativos · Ticket médio · Booking online · Com anamnese · ✨ IA sugere ajuste. **Toolbar**: busca (nome/tag/código), filtros (categoria, status, onde aparece), toggle de colunas (10 colunas configuráveis), view switcher (table/cards/compact). **3 views**: - **Table** — densa, 10 colunas, multi-select, sort por nome/preço/duração/popularidade, badges (anamnese/termo/dinâmico), painel IA na última coluna. - **Cards** — visual, 3 colunas, ícone com cor de marca, tags, ideal pra catálogo grande. - **Compact** — uma linha por serviço, ideal pra revisão em volume. **Bulk actions bar** (aparece com seleção): Duplicar · Publicar online · Arquivar · Excluir. **Empty state**: convida a importar um catálogo da vertical (Brow/Lash/Barber/Make/Nails) ou criar do zero. --- ## 4. O drawer de edição — 7 abas A peça mais importante. Tudo isolado em abas pra não esmagar a tela. 1. **Básico** — código interno, categoria, descrição curta (1 linha pra agenda) + descrição completa, tags, cor, destaque/novo. 2. **Tempo & recursos** — *ativo + processado + prep + limpeza* somando o "tempo do slot" (mostrado em destaque), capacidade (individual/grupo), max simultâneo. 3. **Preço & comissão** — modelo de preço (FIXED/FROM/RANGE/VARIANTS/HIDDEN), preço base + **custo do insumo** → **margem calculada visível**, **dynamic pricing on/off com multiplicadores**, sinal, política de cancelamento, **3 modelos de comissão** (percent/fixed/tiered). 4. **Consumo & custo** — produtos consumidos por execução (qtd + unidade + controle de lote). Vincula ao estoque (S4). 5. **Booking online** — `visibility` em 3 segmentos visuais, título público, descrição rica, slug SEO, antecedência mín/máx, aprovação manual, galeria antes/depois. 6. **Saúde & compliance** 🗡️ (a cunha) — anamnese exigida (vincula ao template), termo de consentimento (vincula ao consentTemplate), contraindicações, downtime, gênero, idade, pregnancySafe. **Esta aba é o que a Avec não tem.** 7. **Pacote, gift & upsell** — pacote/gift/membership eligible, recorrência recomendada com cadência (30d hidratação, 14-21d lash, 45d escova), upsell automático, add-ons. **Banner IA no topo do drawer**: quando `aiSuggestedPriceCents` difere do preço atual, mostra "IA sugere X — baseado em 32 salões similares na sua região" com botões **Aplicar** ou **Dispensar**. (Inspiração: GlossGenius AI Analyst.) --- ## 5. Justificativa de cada decisão importante **Por que separar `activeMinutes` de `processingMinutes`?** Avec, Trinks e Salão99 contam só "duração total". Resultado: a química prende o profissional por 3 horas inteiras. Boulevard/Zenoti separam — durante o "processado" o profissional atende outro cliente. **Isso aumenta a ocupação em 25–40%** em salões com química. É um dos diferenciais operacionais mais subestimados. **Por que `costCents` + margem calculada?** Sem custo, o dono não sabe quais serviços dão lucro real. A Avec mostra receita; o belezaki! mostra **lucro**. Quando o `profitabilityScore` é baixo, a IA recomenda subir o preço ou cortar do catálogo. **Por que `dynamicPricing`?** A Avec não tem. Companhias aéreas e Uber fazem; salão pode. Aumenta ocupação no ocioso (terça 9h) com desconto e captura valor no pico (sexta 18h) com prêmio. Guard-rail: modo "sugestão" antes de "automático". **Por que `priceModel: VARIANTS`?** Cabelo curto/médio/longo é o caso clássico. Fresha entrega; ninguém no Brasil entrega bem. Reduz fricção do booking online (a cliente sabe o que vai pagar). **Por que `requiresAnamnese` + `requiresConsent` no serviço?** Porque o catálogo é onde o salão configura "este procedimento precisa de ficha". Aí a agenda bloqueia, o checkout do booking exige, e o prontuário registra. **Tudo amarrado.** A Avec não amarra porque não tem prontuário. **Por que `recommendedCadenceDays`?** Quando o cliente fecha a comanda, o sistema sugere "agendar a próxima sessão em 30 dias". Aumenta retenção sem campanha de WhatsApp. **Por que `ServiceProfessionalPrice` (preço/comissão por profissional)?** Profissional sênior cobra mais que pleno. Vagaro/Mindbody fazem; ninguém no Brasil. Crítico pra salões com hierarquia. **Por que `verticalConfig` Json?** Cada nicho tem campo próprio (cola de cílios por lote, técnica de henna, kit próprio na make). Em vez de criar tabela pra cada, um JSON tipado por vertical (com schema Zod no app) entrega flexibilidade sem migration sempre. --- ## 6. Como a página vence cada concorrente | Frente | belezaki! | Avec | Trinks | Fresha | Booksy | GlossGenius | |---|---|---|---|---|---|---| | Ativo vs processado | ✅ | ❌ | ❌ | ⚠️ | ❌ | ❌ | | Custo + margem | ✅ | ❌ | ⚠️ | ❌ | ❌ | ⚠️ | | Dynamic pricing | ✅ | ❌ | ❌ | ❌ | ⚠️ | ❌ | | Variantes (curto/médio/longo) | ✅ | ❌ | ❌ | ✅ | ⚠️ | ❌ | | Preço por profissional | ✅ | ❌ | ⚠️ | ⚠️ | ⚠️ | ❌ | | Booking SEO + slug | ✅ | ✅ | ⚠️ | ✅ | ✅ | ⚠️ | | Galeria antes/depois | ✅ | ⚠️ | ❌ | ✅ | ✅ | ✅ | | Vincula a anamnese/termo | ✅ 🗡️ | ❌ | ❌ | ❌ | ❌ | ❌ | | Add-on / upsell automático | ✅ | ❌ | ⚠️ | ✅ | ✅ | ❌ | | Cadência de retorno | ✅ | ❌ | ⚠️ | ❌ | ⚠️ | ❌ | | Sugestão de preço IA | ✅ | ❌ | ❌ | ❌ | ⚠️ | ✅ | | Vertical config nichada | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | --- ## 7. Métricas que esta página move | KPI | Como esta página afeta | |---|---| | **Ocupação da agenda** | +25-40% via separação ativo/processado | | **Margem média do salão** | +5-10pp via custo/margem visível + sugestão IA | | **Conversão booking online** | +20-30% via variantes + galeria + SEO slug | | **Ticket médio** | +10-15% via upsell automático + add-on + cadência | | **No-show no booking público** | -50% via sinal + política de cancelamento | | **Tempo de cadastro do catálogo** | -70% via importar catálogo da vertical | | **Compliance clínico** | 100% — anamnese/termo vinculados ao serviço | --- ## 8. Implementação — o que ficou pronto agora ``` apps/web-salao/src/app/(app)/servicos/ ├── page.tsx # server component (fetch + KPIs) ├── services-client.tsx # client (toolbar + 3 views + drawer 7 abas) └── actions.ts # server actions (CRUD + bulk) packages/db/prisma/ └── schema-extensions-services.prisma # ServicePlus + 6 tabelas auxiliares apps/web-salao/src/components/sidebar.tsx # entrada "Serviços" 🆕 ``` **Pendências planejadas** (próximo sprint): - [ ] Migration de ServicePlus + backfill do Service existente - [ ] `ServiceConsumable` ligando ao estoque com baixa por lote - [ ] `ServiceProfessionalPrice` com override - [ ] Galeria antes/depois com upload pra storage - [ ] Job de IA noturno populando `aiSuggestedPriceCents` (compara com salões similares por geolocalização + segmento) - [ ] Importador de catálogo por vertical (1 clique = catálogo Lash completo pré-configurado) - [ ] Página pública de booking lê esses campos (`/agendar/[slug]/servico/[serviceSlug]`) --- ## 9. Por que esta página é estratégica (não só uma tela) O catálogo é o **schema do negócio** do salão. Tudo gira em torno dele: ``` Catálogo ─┬─ Agenda (duração, capacidade, cabine) ├─ Comanda (preço, comissão, consumo) ├─ Estoque (consumível por serviço com lote) ├─ Booking online + Marketplace (visibilidade, SEO, galeria) ├─ Fidelidade/Pacotes (elegibilidade, cadência, upsell) ├─ Prontuário/Clínica (anamnese, termo, contraindicação) 🗡️ ├─ IA (sugestão de preço, margem, otimizador de agenda) └─ Vertical config (Lash/Brow/Barber/Make/Nails) ``` Um catálogo bem modelado **multiplica o valor de cada feature do produto**. Um catálogo raso (Avec, Salão99, Belezzia) limita o resto pra sempre. Por isso esta página é a base — e por isso vale o investimento de modelagem profunda agora, antes da Onda 2.