feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs
This commit is contained in:
Erik Silva
174
1. docs/mind-projeto-simples.md
Normal file
174
1. docs/mind-projeto-simples.md
Normal file
@@ -0,0 +1,174 @@
|
||||
# Arquitetura Multi-tenant - Modelo de Negócio Aggios
|
||||
|
||||
## Visão Geral da Plataforma
|
||||
|
||||
A plataforma Aggios utiliza uma arquitetura multi-tenant em três camadas principais:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ aggios.app (Site Institucional) │
|
||||
│ - Marketing │
|
||||
│ - Cadastro de novas agências │
|
||||
└─────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ dash.aggios.app (SuperAdmin) │
|
||||
│ - Você (dono da plataforma) │
|
||||
│ - Gerencia TODAS as agências │
|
||||
│ - Vê analytics globais │
|
||||
└─────────────────────────────────────────────────┘
|
||||
│
|
||||
┌───────────┴───────────┐
|
||||
▼ ▼
|
||||
┌──────────────────┐ ┌──────────────────┐
|
||||
│ idealpages. │ │ outraagencia. │
|
||||
│ aggios.app │ │ aggios.app │
|
||||
├──────────────────┤ ├──────────────────┤
|
||||
│ Painel da │ │ Painel da │
|
||||
│ IdeaPages │ │ Outra Agência │
|
||||
│ │ │ │
|
||||
│ • CRM │ │ • CRM │
|
||||
│ • ERP │ │ • ERP │
|
||||
│ • Projetos │ │ • Projetos │
|
||||
│ • White Label │ │ • White Label │
|
||||
│ (seu logo) │ │ (logo deles) │
|
||||
└──────────────────┘ └──────────────────┘
|
||||
│ │
|
||||
▼ ▼
|
||||
Clientes da Clientes da
|
||||
IdeaPages Outra Agência
|
||||
```
|
||||
|
||||
## Como Funciona na Prática
|
||||
|
||||
### 1. Sua Agência (Exemplo: IdeaPages)
|
||||
- **URL**: `idealpages.aggios.app`
|
||||
- **White Label**: Logo e cores da IdeaPages
|
||||
- **Clientes**: Cadastrados DENTRO da agência IdeaPages
|
||||
- **Isolamento**: Cada cliente é isolado por tenant_id (multi-tenant)
|
||||
|
||||
### 2. Quando um Cliente Precisa do CRM
|
||||
|
||||
**Você SEMPRE manda a URL da sua agência**, não aggios.app!
|
||||
|
||||
- Cliente cria conta em `idealpages.aggios.app`
|
||||
- Cliente acessa `idealpages.aggios.app` com login próprio
|
||||
- Cliente vê **SEU logo** (IdeaPages)
|
||||
- Cliente vê **SEU white label**
|
||||
- Cliente só vê os dados DELE (isolamento por tenant)
|
||||
|
||||
### 3. Estrutura de Clientes
|
||||
|
||||
```
|
||||
IdeaPages (você - agência)
|
||||
├── Cliente 1 (Empresa ABC)
|
||||
│ ├── Vê: Logo IdeaPages
|
||||
│ ├── Acessa: idealpages.aggios.app
|
||||
│ └── Usa: CRM, ERP, Projetos (dados isolados)
|
||||
│
|
||||
├── Cliente 2 (Tech Solutions)
|
||||
│ ├── Vê: Logo IdeaPages
|
||||
│ ├── Acessa: idealpages.aggios.app
|
||||
│ └── Usa: CRM, ERP, Projetos (dados isolados)
|
||||
│
|
||||
└── Cliente 3 (Marketing Pro)
|
||||
├── Vê: Logo IdeaPages
|
||||
├── Acessa: idealpages.aggios.app
|
||||
└── Usa: CRM, ERP, Projetos (dados isolados)
|
||||
```
|
||||
|
||||
## Benefícios para a Agência
|
||||
|
||||
✅ **White Label Completo**: Cliente vê sua marca, não "Aggios"
|
||||
✅ **Controle Total**: Você gerencia todos os seus clientes
|
||||
✅ **Isolamento de Dados**: Cada cliente só vê os próprios dados
|
||||
✅ **Escalável**: Adicione quantos clientes quiser na mesma agência
|
||||
✅ **Identidade Visual**: Logo e cores personalizadas por agência
|
||||
|
||||
## Fluxo de Trabalho
|
||||
|
||||
1. **Agência se cadastra** → Cria subdomínio (ex: idealpages.aggios.app)
|
||||
2. **Agência personaliza** → Upload de logo, cores, identidade visual
|
||||
3. **Agência adiciona clientes** → Cada cliente recebe credenciais
|
||||
4. **Cliente acessa** → idealpages.aggios.app (vê marca da agência)
|
||||
5. **Cliente usa módulos** → CRM, ERP, Projetos (dados isolados)
|
||||
|
||||
## Resposta Direta
|
||||
|
||||
**Pergunta**: "Cliente precisa do CRM, mando aggios.app ou idealpages.aggios.app?"
|
||||
|
||||
**Resposta**: **`idealpages.aggios.app`** ✅
|
||||
|
||||
O cliente SEMPRE acessa o painel da sua agência, onde verá sua marca e terá acesso aos módulos que você liberar.
|
||||
|
||||
---
|
||||
|
||||
## Sistema de Links de Cadastro Personalizados
|
||||
|
||||
### Visão Geral
|
||||
|
||||
Sistema que permite ao SuperAdmin criar links de cadastro customizados, escolhendo:
|
||||
- **Campos do formulário**: Quais informações coletar
|
||||
- **Módulos habilitados**: Quais funcionalidades o cliente terá acesso
|
||||
- **Branding**: Logo e cores personalizadas
|
||||
|
||||
### Fluxo de Uso
|
||||
|
||||
1. **SuperAdmin** acessa `dash.aggios.app/superadmin/signup-templates`
|
||||
2. **Cria template** selecionando:
|
||||
- Campos: email, senha, subdomínio, CNPJ, telefone, etc.
|
||||
- Módulos: CRM, ERP, PROJECTS, FINANCIAL, etc.
|
||||
- Slug: URL amigável (ex: `crm-rapido`)
|
||||
3. **Compartilha link**: `aggios.app/cadastro/crm-rapido`
|
||||
4. **Cliente acessa** e vê formulário personalizado
|
||||
5. **Após cadastro**, tenant criado com módulos específicos
|
||||
|
||||
### Exemplo Real: DH Projects
|
||||
|
||||
```
|
||||
Template: "CRM Rápido"
|
||||
Slug: crm-rapido
|
||||
Campos: email, senha, subdomínio, nome da empresa
|
||||
Módulos: CRM
|
||||
|
||||
Link gerado: aggios.app/cadastro/crm-rapido
|
||||
|
||||
Cliente preenche:
|
||||
- Email: contato@dhprojects.com
|
||||
- Senha: ********
|
||||
- Subdomínio: dhprojects
|
||||
- Empresa: DH Projects
|
||||
|
||||
Resultado:
|
||||
✅ Tenant criado: dhprojects.aggios.app
|
||||
✅ Módulo CRM habilitado
|
||||
✅ Outros módulos desabilitados
|
||||
```
|
||||
|
||||
### Estrutura Técnica
|
||||
|
||||
**Backend:**
|
||||
- Tabela: `signup_templates`
|
||||
- Repository: `SignupTemplateRepository`
|
||||
- Handlers: `/api/admin/signup-templates` (CRUD)
|
||||
- Handler público: `/api/signup-templates/slug/{slug}` (renderiza form)
|
||||
|
||||
**Frontend:**
|
||||
- Gerenciamento: `dash.aggios.app/superadmin/signup-templates`
|
||||
- Cadastro público: `aggios.app/cadastro/{slug}`
|
||||
|
||||
**Campos Disponíveis:**
|
||||
- email, password, subdomain (obrigatórios)
|
||||
- company_name, cnpj, phone, address, city, state, zipcode (opcionais)
|
||||
|
||||
**Módulos Disponíveis:**
|
||||
- CRM, ERP, PROJECTS, FINANCIAL, INVENTORY, HR
|
||||
|
||||
### Benefícios
|
||||
|
||||
✅ Cadastro rápido para clientes específicos
|
||||
✅ Coleta apenas informações necessárias
|
||||
✅ Habilita somente módulos contratados
|
||||
✅ Reduz fricção no onboarding
|
||||
✅ Personalização por caso de uso
|
||||
149
1. docs/nova-interface.md
Normal file
149
1. docs/nova-interface.md
Normal file
@@ -0,0 +1,149 @@
|
||||
# System Instruction: Arquitetura de Layout com Sidebar Expansível
|
||||
|
||||
**Role:** Senior React Developer & UI Specialist
|
||||
**Tech Stack:** React, Tailwind CSS (Sem bibliotecas de ícones ou fontes externas).
|
||||
|
||||
**Objetivo:**
|
||||
Implementar um sistema de layout "Dashboard" composto por um **Menu Lateral (Sidebar)** que expande e colapsa suavemente e uma área de conteúdo principal.
|
||||
|
||||
**Requisitos Críticos de Animação:**
|
||||
1. A transição de largura da sidebar deve ser suave (transition-all duration-300).
|
||||
2. O texto dos botões **não deve quebrar** ou desaparecer bruscamente. Use a técnica de transição de `max-width` e `opacity` para que o texto deslize suavemente para fora.
|
||||
3. Não utilize bibliotecas de animação (Framer Motion, etc), apenas Tailwind CSS puro.
|
||||
|
||||
---
|
||||
|
||||
## 1. Componente: `DashboardLayout.tsx` (Container Principal)
|
||||
|
||||
Este componente deve gerenciar o estado global do menu (aberto/fechado) para evitar "prop drilling" desnecessário.
|
||||
|
||||
```tsx
|
||||
import React, { useState } from 'react';
|
||||
import { SidebarRail } from './SidebarRail';
|
||||
|
||||
interface DashboardLayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
|
||||
// Estado centralizado do layout
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState('home');
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full bg-gray-900 text-slate-900 overflow-hidden p-3 gap-3">
|
||||
{/* Sidebar controla seu próprio estado visual via props */}
|
||||
<SidebarRail
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
isExpanded={isExpanded}
|
||||
onToggle={() => setIsExpanded(!isExpanded)}
|
||||
/>
|
||||
|
||||
{/* Área de Conteúdo (Children) */}
|
||||
<main className="flex-1 h-full min-w-0 overflow-hidden flex flex-col bg-white rounded-3xl shadow-xl relative">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## 2. Componente: `SidebarRail.tsx` (Lógica de Animação)
|
||||
|
||||
Aqui reside a lógica visual. Substitua os ícones por `<span>Icon</span>` ou SVGs genéricos para manter o código agnóstico.
|
||||
|
||||
**Pontos de atenção no código abaixo:**
|
||||
* `w-[220px]` vs `w-[72px]`: Define a largura física.
|
||||
* `max-w-[150px]` vs `max-w-0`: Define a animação do texto.
|
||||
* `whitespace-nowrap`: Impede que o texto pule de linha enquanto fecha.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
|
||||
interface SidebarRailProps {
|
||||
activeTab: string;
|
||||
onTabChange: (tab: string) => void;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
export const SidebarRail: React.FC<SidebarRailProps> = ({ activeTab, onTabChange, isExpanded, onToggle }) => {
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
h-full bg-zinc-900 rounded-3xl flex flex-col py-6 gap-4 text-gray-400 shrink-0 border border-white/10 shadow-xl
|
||||
transition-[width] duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3
|
||||
${isExpanded ? 'w-[220px]' : 'w-[72px]'}
|
||||
`}
|
||||
>
|
||||
{/* Header / Toggle */}
|
||||
<div className={`flex items-center w-full relative transition-all duration-300 mb-4 ${isExpanded ? 'justify-between px-1' : 'justify-center'}`}>
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-bold shrink-0 z-10">
|
||||
Logo
|
||||
</div>
|
||||
|
||||
{/* Título com animação de opacidade e largura */}
|
||||
<div className={`overflow-hidden transition-all duration-300 ease-in-out whitespace-nowrap absolute left-14 ${isExpanded ? 'opacity-100 max-w-[100px]' : 'opacity-0 max-w-0'}`}>
|
||||
<span className="font-bold text-white text-lg">App Name</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navegação */}
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<RailButton
|
||||
label="Dashboard"
|
||||
active={activeTab === 'home'}
|
||||
onClick={() => onTabChange('home')}
|
||||
isExpanded={isExpanded}
|
||||
/>
|
||||
<RailButton
|
||||
label="Settings"
|
||||
active={activeTab === 'settings'}
|
||||
onClick={() => onTabChange('settings')}
|
||||
isExpanded={isExpanded}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer / Toggle Button */}
|
||||
<div className="mt-auto">
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="w-full p-2 rounded-xl hover:bg-white/10 text-gray-400 hover:text-white transition-colors flex items-center justify-center"
|
||||
>
|
||||
{/* Ícone de Toggle Genérico */}
|
||||
<span>{isExpanded ? '<<' : '>>'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Subcomponente do Botão (Essencial para a animação do texto)
|
||||
const RailButton = ({ label, active, onClick, isExpanded }: any) => (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`
|
||||
flex items-center p-2.5 rounded-xl transition-all duration-300 group relative overflow-hidden
|
||||
${active ? 'bg-white/10 text-white' : 'hover:bg-white/5 hover:text-gray-200'}
|
||||
${isExpanded ? '' : 'justify-center'}
|
||||
`}
|
||||
>
|
||||
{/* Placeholder do Ícone */}
|
||||
<div className="shrink-0 flex items-center justify-center w-6 h-6 bg-gray-700/50 rounded text-[10px]">Icon</div>
|
||||
|
||||
{/* Lógica Mágica do Texto: Max-Width Transition */}
|
||||
<div className={`
|
||||
overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out
|
||||
${isExpanded ? 'max-w-[150px] opacity-100 ml-3' : 'max-w-0 opacity-0 ml-0'}
|
||||
`}>
|
||||
<span className="font-medium text-sm">{label}</span>
|
||||
</div>
|
||||
|
||||
{/* Indicador de Ativo (Barra lateral pequena quando fechado) */}
|
||||
{active && !isExpanded && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-3 bg-white rounded-r-full -ml-3" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
```
|
||||
Reference in New Issue
Block a user