6.5 KiB

Raw Blame History

BarberFlow SaaS - Project Context

Este documento serve como a fonte da verdade para a arquitetura, estrutura e regras de negócio do BarberFlow, um sistema SaaS Multi-Tenant para barbearias construído com Expo (React Native).

🚀 Tech Stack Principal

Framework: Expo / React Native (Foco em Web/Mobile First)
Roteamento: Expo Router (File-based routing)
Animações & UI: react-native-reanimated (UI/UX Pro Max)
Armazenamento: @react-native-async-storage/async-storage (Persistência local temporária/mock)
Ícones: lucide-react-native
Mídia: expo-image-picker (Imagens convertidas em Base64 para armazenamento)

📁 Estrutura de Diretórios (`app/`)

O projeto utiliza um roteamento baseado no file-system do Expo Router, rigidamente dividido em duas áreas principais após a seleção global de idioma e fluxos de autenticação.

app/index.tsx: Raiz Absoluta. A primeira tela do app. Redireciona para /landing.
app/landing.tsx: Landing page comercial do SaaS. Contém botões para acessar "Painel do Dono", "Área do Barbeiro" ou "Ver Demonstração" (Área do Cliente).
app/admin/: Área Administrativa (O Painel do Dono e do Barbeiro)
- _layout.tsx: Define o Stack protegido do Admin.
- login.tsx: Tela de autenticação para o dono da barbearia.
- barber-login.tsx: Tela de autenticação separada para funcionários (barbeiros).
- register.tsx: Tela de criação de conta (BarberFlow Pro).
- forgot-password.tsx: Tela de recuperação de senha.
- dashboard.tsx: Visão geral de agendamentos pendentes e confirmados. Permite aceitar, recusar ou cancelar. (A visão é filtrada com base em quem está logado).
- agenda.tsx: Tabela visual (Daily Schedule) mostrando os horários de todos os barbeiros e seus status (Livre, Pendente, Confirmado, Bloqueado).
- finance.tsx: Tela de gestão financeira, exibindo faturamento bruto e o cálculo de comissão exato para cada barbeiro.
- config.tsx: Wizard de 6 Passos para configurar a barbearia (Identidade, Localização, Serviços, Barbeiros, Formas de Pagamento, Link Final).
app/[slug]/: Área do Cliente (Multi-Tenant)
- _layout.tsx: Provedor de contexto específico do tenant (barbearia).
- index.tsx: Tela inicial de redirecionamento do tenant para o fluxo de idioma/auth.
- (auth)/: Autenticação e Pré-requisitos do Cliente
  - language-selection.tsx: O cliente escolhe o idioma (PT/ES) e a moeda (R$/GS) que prefere ser atendido.
  - login.tsx: Tela de login do cliente. Redireciona para o agendamento após sucesso.
  - register.tsx: Tela de cadastro do cliente.
  - forgot-password.tsx: Tela de recuperação de senha.
- (tabs)/: Área Interna do Cliente
  - _layout.tsx: Tab bar com as opções principais.
  - agendar.tsx: O core do lado do cliente. Fluxo de 3 passos: Escolher Serviço/Barbeiro -> Escolher Data/Hora -> Pagamento & Confirmação.
  - profile.tsx: Perfil do cliente com histórico.

🧠 Gerenciamento de Estado (Contextos)

1. `BarbeariaContext.tsx`

O "banco de dados" do sistema. Gerencia os dados da barbearia atual (Tenant).

Resiliência do Slug: Se o usuário acessa um slug e ele bate com o do AsyncStorage, os dados carregam.
Role-Based Access Control (RBAC): Armazena a variável activeBarberId. Se for null, o sistema entende que é o dono e libera tudo. Se tiver um ID de funcionário logado, restringe as views.
Estruturas Principais:
- services: Contém nomes, preços bilíngues e duração (nomePt, nomeEs, precoPt, precoEs, duracao).
- barbers: Lista de profissionais contendo nome, foto, commission, email, password e permissions (canViewFinance, canEditConfig).
- paymentMethods: Array de strings (ex: ['pix', 'card', 'money', 'alias']).
- appointments: Lista de agendamentos com status e valor total do serviço.

2. `LanguageContext.tsx`

Coração do sistema i18n e regras de moeda.

Tradução: A função t(key) é robusta contra chaves não encontradas ou parâmetros undefined.
Preços (formatPrice): Recebe dois valores e formata com base no idioma atual (Real R$ ou Guarani GS).

⚖️ Regras de Negócio Críticas

Separação Dono vs Funcionário vs Cliente:
- Dono: Acessa via /admin/login. Visualiza e edita todas as configurações, visualiza a agenda de todos e acessa o balanço financeiro geral.
- Barbeiro (Funcionário): Acessa via /admin/barber-login. Ao logar, vai para o Dashboard onde só visualiza os seus próprios agendamentos. Na agenda, não consegue clicar/bloquear a agenda de colegas. O acesso a configurações e financeiro depende de flags explícitas de permissão no cadastro dele.
- Cliente: Acessa via /[slug], faz autenticação e visualiza os horários disponíveis (área em (tabs)).
Fluxo de Agendamento e Edição (Admin):
- Na tela config.tsx, o admin consegue criar e agora também editar informações de barbeiros e serviços sem precisar deletá-los.
- A agenda do admin e do barbeiro permite selecionar múltiplos horários em massa (multi-select) e aplicar a ação "Bloquear" ou "Liberar".
Sistema Financeiro e Comissionamento:
- O sistema rastreia o valor gerado nos agendamentos accepted e calcula de forma individual o repasse do barbeiro com base na porcentagem (%) cadastrada no seu perfil.
- Se um barbeiro com permissão de ver as finanças acessar a tela, ele só enxergará o valor do próprio caixa e o valor que ele vai receber, enquanto o dono enxerga a somatória bruta de todos.
Lógica de Formas de Pagamento Dinâmicas:
- O admin marca os métodos aceitos na aba de configurações. A lista sofre filtro dinâmico de moeda (O cliente que escolheu idioma Espanhol não vê PIX, e o cliente do Português não vê Alias).
Tratamento de Imagens:
- O upload de logos e avatares converte o binário para Base64 injetando diretamente no estado e no AsyncStorage.

🎨 Padrão de UI/UX (Pro Max)

Todas as telas seguem o manual de referências UI/UX.

Animações: FadeInUp, FadeInDown, e FadeInRight usando react-native-reanimated para navegação suave.
Feedback Tátil: expo-haptics acionados ao confirmar botões de bloqueio e salvar perfis.
Design Responsivo: Uso do useWindowDimensions() nas telas web para garantir que, no iPhone ou Android, os painéis colapsem na vertical (flex-col) de ponta a ponta com segurança visual (paddingHorizontal: 16).

6.5 KiB Raw Blame History