83 lines
6.5 KiB
Markdown
83 lines
6.5 KiB
Markdown
# 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
|
|
|
|
1. **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)`).
|
|
|
|
2. **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".
|
|
|
|
3. **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.
|
|
|
|
4. **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).
|
|
|
|
5. **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`). |