# DecorOne Platform Uma fundação SaaS premium para decoradores de festas divulgarem serviços, receberem solicitações e, futuramente, administrarem operações por workspace. ## Masterplan - Atender decoradores e pequenos ateliês que precisam de um site profissional e uma base operacional centralizada. - Separar claramente o site público, a área do cliente, o painel do decorador e a administração global da plataforma. - Entregar no estado atual uma experiência navegável com autenticação, perfis, RBAC, tema claro/escuro e páginas estruturais para os módulos futuros. - Preparar dados e permissões para multi-tenancy: toda entidade operacional futura deve pertencer a um `workspaceId`. - Evoluir para CRM, agenda, catálogo, propostas, contratos, pagamentos, equipe, assinatura e white-label sem quebrar as rotas ou perfis existentes. ## Tech Stack & Architecture - **React 18 + TypeScript + Vite** - Entrada da aplicação: `src/main.tsx` - Árvore de rotas: `src/App.tsx` - Configuração Vite: `vite.config.ts` - **React Router DOM com `HashRouter`** - As URLs usam hash routing: `/#/admin`, `/#/decoracoes`. - Links de seções da landing usam hashes como `/#como-funciona` e `/#planos`. - Não migrar para `BrowserRouter` sem configurar fallback de SPA no host. - **Tailwind CSS v4** - Integrado via `@tailwindcss/vite`. - Tokens de cor, tipografia, utilitários globais e modo escuro ficam em `src/styles/main.css`. - Use classes Tailwind e `cn()` de `src/lib/utils.ts`; não adicionar CSS Modules, styled-components ou bibliotecas de design paralelas. - **Lucide React** - Fonte padrão de ícones para menus, ações e feedback visual. - Não introduzir SVGs inline quando existir ícone equivalente no Lucide. - **GenMB SDK** - Injetado em `index.html` e acessado por `window.genmb`. - Capacidades habilitadas: `auth`, `kv`, `rbac`, `billing`, `booking`, `commerce`, `contact-form`, `file-storage`, `functions`, `email`, `realtime`, `audit-log`, `maps`, `address`, `image-ai` e `text-ai`. - Não há backend REST, ORM ou banco relacional implementado pelo projeto atualmente. ### Providers e estado A composição em `src/main.tsx` deve ser preservada: ```tsx ``` - `ThemeProvider` (`src/components/theme-provider.tsx`) - Persiste o tema em `localStorage` com a chave `decorone-theme`. - Aplica a classe `.dark` ao elemento ``. - `AuthProvider` (`src/components/auth-provider.tsx`) - Aguarda `window.genmb.auth.ready()`. - Cria ou carrega o perfil do usuário no GenMB KV. - Configura a resolução de roles para o GenMB RBAC. - `ToastProvider` (`src/components/toast-provider.tsx`) - Expõe `useToast()`. - Toasts são removidos automaticamente após 4,5 segundos. - `ErrorBoundary` (`src/components/error-boundary.tsx`) - Intercepta falhas de renderização e oferece atualização da página ou retorno à home. - Use `useState` local para filtros, abas, modais e estados de página. Não há Redux, Zustand ou outra store global. ### Autenticação, perfis e RBAC Perfis são armazenados em: ```text decorone:user:{userId} ``` O tipo de domínio está em `src/types/domain.ts` e deve continuar contendo os contratos compartilhados como `GenmbUser`, `GenmbProfile` e `GenmbRole`. Regras atuais em `src/components/auth-provider.tsx`: - O único administrador global é o e-mail `luizzjunio270@gmail.com`. - Esse usuário recebe role `admin` e permissão `['*']`. - Todo outro usuário autenticado recebe role `decorator`. - Decoradores recebem automaticamente: - `workspaceId` gerado por `crypto.randomUUID()`; - `workspaceName` inicial no formato `Ateliê de {nome}`; - permissões `workspace:read` e `workspace:write`. > Não transforme a regra do e-mail administrador em uma lista configurável apenas no frontend. Quando a administração de usuários evoluir, migrar essa decisão para uma fonte segura no backend/RBAC. ### Rotas protegidas `src/components/auth-guard.tsx` controla o acesso: - `/admin` exige role `decorator`. - `/plataforma` exige role `admin`. - `/perfil` exige qualquer usuário autenticado. - Um usuário com role incompatível é redirecionado para seu ambiente correspondente. ## File Structure ```text index.html # HTML base, SEO inicial, tema e SDK GenMB injetado. package.json # Dependências e scripts do projeto. vite.config.ts # Configuração do Vite e plugin Tailwind v4. functions/ └── daily_platform_summary.py # Function agendada às 09:00 UTC; envia resumo diário ao admin. src/ ├── main.tsx # Bootstrap React e ordem dos providers globais. ├── App.tsx # Rotas públicas, autenticadas, administrativas e de erro. ├── styles/ │ └── main.css # Tokens visuais, tipografia, dark mode e estilos globais. ├── types/ │ └── domain.ts # Tipos compartilhados de usuário, perfil, role e domínio futuro. ├── data/ │ └── site.ts # Navegação, planos, depoimentos, menu admin e catálogo demonstrativo. ├── lib/ │ ├── utils.ts # Helper cn() com clsx e tailwind-merge. │ └── metadata.ts # Hook usePageMetadata para título e descrição por página. ├── components/ │ ├── auth-provider.tsx # Sessão GenMB, perfil KV, workspace e RBAC. │ ├── auth-guard.tsx # Proteção e redirecionamento por autenticação/role. │ ├── theme-provider.tsx # Estado global de tema claro/escuro. │ ├── theme-toggle.tsx # Controle visual de alternância de tema. │ ├── toast-provider.tsx # Contexto e interface de notificações temporárias. │ ├── error-boundary.tsx # Recuperação de erros de renderização. │ ├── public-header.tsx # Header responsivo do site público. │ ├── admin-sidebar.tsx # Menu lateral desktop e drawer mobile do painel. │ ├── footer.tsx # Rodapé público com links e contatos. │ ├── logo.tsx # Logo temporária reutilizável baseada em Sparkles. │ └── ui/ │ ├── button.tsx # Botão padronizado com variantes e estado loading. │ └── input.tsx # Input padronizado com erro e acessibilidade. └── pages/ ├── landing-page.tsx # Home pública: hero, etapas, depoimentos e planos. ├── decorations-page.tsx # Vitrine pública de decorações. ├── quote-page.tsx # Jornada de solicitação de orçamento. ├── reservations-page.tsx # Estrutura de reservas/agendamentos públicos. ├── client-portal-page.tsx # Estrutura da área do cliente. ├── auth-page.tsx # Login, cadastro e recuperação de senha GenMB. ├── admin-page.tsx # Painel do decorador e módulos estruturais. ├── platform-admin-page.tsx # Área exclusiva do administrador global. ├── profile-page.tsx # Edição de nome e workspace do usuário autenticado. ├── help-page.tsx # Página pública de ajuda. ├── catalog-page.tsx # Estrutura de catálogo para evolução futura. ├── settings-page.tsx # Estrutura de configurações para evolução futura. ├── server-error-page.tsx # Página de falha técnica dedicada. └── not-found-page.tsx # Página 404. ``` ## Key Features ### Site público As páginas públicas usam `PublicHeader` e `Footer` quando apropriado. - Landing page em `/` - Hero com CTA “Solicitar orçamento”. - Acesso para visualização de decorações. - Seções “Como funciona”, depoimentos e planos. - Conteúdo demonstrativo centralizado em `src/data/site.ts`. - Portfólio em `/decoracoes` - Usa `decorationShowcase` de `src/data/site.ts`. - As imagens atuais são remotas e demonstrativas via `picsum.photos`. - Ao implementar catálogo real, substituir o array por dados filtrados por `workspaceId`. - Solicitação de orçamento em `/solicitar-orcamento` - É uma estrutura de jornada pública; integrar posteriormente com `window.genmb.contactForm`, e-mail ou functions. - Todo pedido futuro precisa incluir `workspaceId`, status, dados do evento e timestamps. - Área do cliente em `/cliente` - Estrutura prevista para acompanhamento de pedidos, propostas, pagamentos e reservas. - A associação cliente/workspace ainda não está implementada. ### Painel do decorador A rota `/admin` é protegida para `decorator`. O menu é definido por `adminMenu` em `src/data/site.ts`: - Dashboard - Agenda - Clientes - Decorações - Orçamentos - Financeiro - Avaliações - Contratos - Configurações `src/components/admin-sidebar.tsx` usa seleção local de item ativo; os itens ainda não possuem subrotas próprias. Ao implementar módulos reais, prefira rotas aninhadas ou rotas explícitas como `/admin/clientes`, mantendo a sidebar sincronizada com `useLocation`. O menu lateral: - É fixo em desktop (`lg`). - Usa drawer com overlay em mobile. - Inclui links para `/perfil` e para o site público. - Não executa logout apesar de usar o ícone `LogOut`; não assumir que aquele item encerra sessão. ### Perfis `/perfil` permite atualizar somente: ```ts Pick ``` `workspaceName` só existe para decoradores. Nunca permitir que a tela cliente altere `role`, `workspaceId`, `email` ou permissões. ### Modelos futuros Todas as entidades operacionais devem incluir, no mínimo: ```ts type WorkspaceOwnedEntity = { id: string workspaceId: string createdAt: string updatedAt: string } ``` Modelos esperados: - `Client`: dados de contato, tags, histórico e `workspaceId`. - `Decoration`: título, categoria, mídia, descrição, preço opcional e `workspaceId`. - `Quote`: cliente, evento, itens, total, status e `workspaceId`. - `Reservation`: data, horário, local, cliente, status e `workspaceId`. - `Payment`: valor, vencimento, status, referência de orçamento e `workspaceId`. - `Review`: autor, nota, comentário, visibilidade e `workspaceId`. Nunca buscar, editar ou exibir registros de outro workspace para decoradores. ### Integrações e function `functions/daily_platform_summary.py`: - É executada diariamente às 09:00 UTC. - Envia e-mail para `luizzjunio270@gmail.com`. - Atualmente informa que os módulos operacionais ainda não possuem métricas persistidas. - Quando banco de dados operacional existir, ampliar a function com métricas agregadas; não expor dados de workspaces individuais sem necessidade. Os planos em `src/data/site.ts` são conteúdo visual. Embora `billing` esteja habilitado no GenMB, não existe checkout implementado. ## Design Guidelines - Estética: premium, acolhedora e editorial, apropriada para decoração de festas. - Identidade atual: marca pública exibida como **“Luiz Junio Decorações”**, embora a plataforma interna seja DecorOne. - Cor primária definida pelos tokens em `src/styles/main.css`; o `theme-color` inicial de `index.html` é `#8c5b42`. - Fontes e tokens devem ser consumidos pelas classes existentes, incluindo `font-display`, `bg-primary`, `text-muted-foreground`, `bg-card` e `border-border`. - Use superfícies claras, bordas discretas, cantos arredondados e sombras leves. - Preserve estados de foco visíveis com `focus-visible:ring-*`. - Use `Button` e `Input` de `src/components/ui/` para manter tamanhos, loading, contraste e interações consistentes. - Tema escuro é obrigatório para qualquer nova tela; não usar cores fixas claras fora de casos intencionais como a sidebar `bg-[#211c1a]`. - Layout público usa a classe global `container`. - Desktop: navegação horizontal e sidebar fixa. - Mobile: header recolhível, CTAs empilháveis e sidebar em drawer. ## App Flow 1. **Visitante** - Entra em `/`. - Navega para `/decoracoes`, âncoras de “Como funciona” e “Planos”, ou `/solicitar-orcamento`. - Pode abrir `/cliente`, `/ajuda` ou `/login`. 2. **Autenticação** - `/login`, `/cadastro` e `/recuperar-senha` compartilham `AuthPage`. - O fluxo depende do GenMB Auth: Google, magic link, senha, OTP e recuperação. - Após autenticação, `AuthProvider` cria/carrega o perfil e atribui role/workspace. 3. **Decorador** - Acessa `/admin`. - Navega visualmente pelos módulos do menu lateral. - Atualiza nome e ateliê em `/perfil`. - Retorna ao site público pelo link da sidebar. 4. **Administrador global** - O e-mail administrador é direcionado para `/plataforma`. - Não pode acessar `/admin` como decorador devido ao `AuthGuard`. 5. **Estados especiais** - Rota inexistente: `NotFoundPage`. - Erro técnico dedicado: `/erro`. - Erro de renderização inesperado: `ErrorBoundary`. - Sessão ainda inicializando: tela de carregamento do `AuthGuard`. ## Conventions - Componentes React: `PascalCase`; arquivos de componentes e páginas: `kebab-case.tsx`. - Hooks: prefixo `use`, como `useAuth`, `useTheme`, `useToast` e `usePageMetadata`. - Dados estáticos de marketing e navegação ficam em `src/data/site.ts`; não espalhar arrays de planos, menu ou depoimentos pelas páginas. - Tipos compartilhados ficam em `src/types/domain.ts`. - Utilitários de classe devem usar `cn()` de `src/lib/utils.ts`. - Preferir componentes funcionais, props tipadas e composição simples. - Não adicionar estado global para estados exclusivos de uma página. - Em ações assíncronas, use `Button loading` e trate falhas com `useToast()`. ### Como adicionar uma página 1. Criar `src/pages/nova-pagina.tsx`. 2. Aplicar `usePageMetadata()` se a rota for pública. 3. Reutilizar `PublicHeader`/`Footer` ou o shell administrativo adequado. 4. Registrar a rota em `src/App.tsx`. 5. Se for privada, envolver com `AuthGuard`; se for administrativa, validar a role necessária. 6. Se manipular dados operacionais, exigir e persistir `workspaceId`. 7. Adicionar item de navegação em `src/data/site.ts` somente se a página fizer parte da navegação oficial. ### Como adicionar um módulo administrativo real 1. Criar rota dedicada em vez de expandir indefinidamente `admin-page.tsx`. 2. Garantir escopo por `profile.workspaceId`. 3. Validar permissões no cliente e na camada GenMB/backend quando disponível. 4. Incluir loading, estado vazio, erro e confirmação visual de ações. 5. Registrar eventos relevantes quando o módulo de audit log for integrado. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.