Dashboard-Automatizase/docs/architecture/componentes.md

Componentes

NextJS Frontend App

Responsabilidade: Renderiza UI do portal, gerencia estado da aplicação

Interfaces Principais:

• Pages: /login, /reset-password, /dashboard
• Components: WhatsAppInstanceCard, GoogleCalendarCard, Header, Footer
• Hooks: useAuth, useWhatsAppInstances, useGoogleCalendar

Dependências: Supabase Auth Client, API Routes, Shadcn/ui

Tech Stack: Next.js 14, React 18, TypeScript, TailwindCSS, Shadcn/ui

---

NextJS API Routes (BFF)

Responsabilidade: Orquestra chamadas à EvolutionAPI e Supabase, protege API keys

Interfaces Principais:

• /api/whatsapp/instances - Lista instâncias
• /api/whatsapp/instances/[name]/qrcode - Gera QR code
• /api/whatsapp/instances/[name]/disconnect - Desconecta
• /api/google-calendar/status - Status OAuth
• /api/google-calendar/callback - Callback OAuth

Dependências: EvolutionAPI client, Supabase client

Tech Stack: Next.js API Routes, TypeScript, Vercel Edge Functions

---

Supabase Backend

Responsabilidade: Autenticação, autorização, persistência de dados

Interfaces Principais:

• Supabase Auth API (login, logout, resetPassword)
• PostgreSQL schema portal
• Row Level Security policies

Dependências: PostgreSQL 15+, SMTP AutomatizaSE

Tech Stack: Supabase (Auth + Database), PostgreSQL

---

Diagrama de Componentes

graph TB
    subgraph "Frontend (Vercel)"
        Pages[Pages<br/>/login /dashboard]
        Components[Components<br/>Cards, Modals]
        Hooks[Custom Hooks<br/>useAuth useAPI]

        Pages --> Components
        Pages --> Hooks
        Components --> Hooks
    end

    subgraph "Backend (API Routes)"
        WhatsAppAPI[WhatsApp Routes]
        CalendarAPI[Calendar Routes]
        AuthMW[Auth Middleware]

        WhatsAppAPI --> AuthMW
        CalendarAPI --> AuthMW
    end

    subgraph "External Services"
        Evolution[EvolutionAPI]
        Supabase[Supabase]
        n8n[n8n OAuth]
    end

    Hooks --> WhatsAppAPI
    Hooks --> CalendarAPI
    Hooks --> Supabase

    WhatsAppAPI --> Evolution
    CalendarAPI --> Supabase
    AuthMW --> Supabase

    Pages --> n8n
    n8n --> CalendarAPI

    style Pages fill:#4A90E2
    style Components fill:#4A90E2
    style WhatsAppAPI fill:#000
    style CalendarAPI fill:#000
    style Evolution fill:#25D366
    style Supabase fill:#3ECF8E
    style n8n fill:#FF6D5A

---