# HarmoScale CRM

CRM/dashboard comercial em HTML, CSS e JavaScript com Supabase.

## Stack escolhida

Para este projeto, a base recomendada e:

- frontend em `HTML/CSS/JavaScript`
- backend serverless em `TypeScript`
- banco em `SQL/Postgres` com Supabase

`PHP` nao foi incluido porque, neste caso, ele adicionaria uma segunda camada de backend sem necessidade real. A arquitetura de alta escala para este CRM fica melhor com Supabase + Edge Functions em TypeScript.

## O que este projeto cobre

- dashboard de leads e produtividade
- CRM separado por paginas
- funil de vendas com kanban
- leads ativos com cadastro e edicao
- dashboard central com origem, atendimento e resposta
- integracao com webhooks do Tintim e Evo API
- ingestao automatica de metricas de trafego e campanhas
- sincronizacao de multiplas BMs da Meta via Business Manager ID + access token
- criacao de eventos no Google Agenda via Edge Function

## Estrutura principal

- `index.html`: dashboard
- `crm.html`: hub do CRM
- `funil-vendas.html`: pipeline comercial
- `leads-ativos.html`: lista, cadastro e edicao de leads
- `calendario.html`: follow-ups e agenda
- `configuracoes.html`: integracoes
- `app.js`: logica compartilhada
- `styles.css`: visual compartilhado
- `.env`: variaveis locais do projeto
- `.env.example`: modelo da env
- `scripts/sync-env.mjs`: gera o `config.js` para o navegador
- `ARCHITECTURE.md`: explicacao da stack recomendada
- `supabase/schema.sql`: schema do banco
- `supabase/functions/_shared`: helpers compartilhados em TypeScript
- `supabase/functions/tintim-webhook/index.ts`: webhook de entrada de leads
- `supabase/functions/tintim-webhook/README.md`: payload pronto e exemplo de chamada do webhook de leads
- `supabase/functions/evo-response-webhook/index.ts`: webhook de tempo de resposta
- `supabase/functions/google-calendar/index.ts`: criacao de eventos no Google Agenda
- `supabase/functions/traffic-metrics-webhook/index.ts`: ingestao automatica de CPC, CPM, gasto e conversas iniciadas
- `supabase/functions/meta-ads-sync/index.ts`: sincronizacao direta da Meta Ads para varias BMs
- `supabase/functions/admin-users/index.ts`: bootstrap e gestao administrativa de usuarios
- `supabase/functions/admin-settings/index.ts`: configuracoes administrativas seguras e BMs da Meta

## 1. Configurar o banco no Supabase

Execute [supabase/schema.sql](/c:/Users/gusta/OneDrive/Área%20de%20Trabalho/CRM%20HARMOSCALE/supabase/schema.sql) no SQL Editor do Supabase.

## 2. Preencher a env do projeto

Edite o arquivo `.env`:

```env
CRM_SUPABASE_URL=https://SEU-PROJETO.supabase.co
CRM_SUPABASE_ANON_KEY=SUA_SUPABASE_ANON_KEY
CRM_FUNCTIONS_BASE_URL=https://SEU-PROJETO.supabase.co/functions/v1
```

Se quiser, pode copiar o modelo de `.env.example`.

## 3. Gerar o config.js do frontend

O navegador nao le `.env` diretamente. Para isso, o projeto agora tem um gerador:

```bash
node scripts/sync-env.mjs
```

Ele cria ou atualiza o arquivo `config.js` com:

- `supabaseUrl`
- `supabaseAnonKey`
- `functionsBaseUrl`

Se `CRM_FUNCTIONS_BASE_URL` nao for preenchido, ele tenta montar automaticamente com base na URL do Supabase.

## 4. Publicar as Edge Functions

```bash
supabase functions deploy tintim-webhook
supabase functions deploy evo-response-webhook
supabase functions deploy google-calendar
supabase functions deploy traffic-metrics-webhook
supabase functions deploy meta-ads-sync
supabase functions deploy admin-users
supabase functions deploy admin-settings
```

## 5. Configurar secrets das Edge Functions

As funcoes usam secrets do proprio Supabase, nao do `config.js`.

Defina:

- `SUPABASE_URL`
- `SUPABASE_ANON_KEY`
- `SUPABASE_SERVICE_ROLE_KEY`
- `GOOGLE_CLIENT_ID`
- `GOOGLE_CLIENT_SECRET`
- `GOOGLE_REFRESH_TOKEN`
- `GOOGLE_CALENDAR_ID`
- `CRM_ALLOWED_ORIGINS`
- `TINTIM_WEBHOOK_SECRET`
- `EVO_WEBHOOK_SECRET`
- `TRAFFIC_WEBHOOK_SECRET`

Exemplo:

```bash
supabase secrets set SUPABASE_URL=https://SEU-PROJETO.supabase.co
supabase secrets set SUPABASE_ANON_KEY=SUA_SUPABASE_ANON_KEY
supabase secrets set SUPABASE_SERVICE_ROLE_KEY=SUA_SUPABASE_SERVICE_ROLE_KEY
supabase secrets set GOOGLE_CLIENT_ID=SEU_GOOGLE_CLIENT_ID
supabase secrets set GOOGLE_CLIENT_SECRET=SEU_GOOGLE_CLIENT_SECRET
supabase secrets set GOOGLE_REFRESH_TOKEN=SEU_GOOGLE_REFRESH_TOKEN
supabase secrets set GOOGLE_CALENDAR_ID=primary
supabase secrets set CRM_ALLOWED_ORIGINS=https://SEU-DOMINIO.com.br,http://127.0.0.1:5500,http://localhost:5500
supabase secrets set TINTIM_WEBHOOK_SECRET=SEU_SEGREDO_TINTIM
supabase secrets set EVO_WEBHOOK_SECRET=SEU_SEGREDO_EVO
supabase secrets set TRAFFIC_WEBHOOK_SECRET=SEU_SEGREDO_TRAFEGO
```

## 6. URLs dos webhooks

- Tintim: `https://SEU-PROJETO.supabase.co/functions/v1/tintim-webhook`
- Evo API: `https://SEU-PROJETO.supabase.co/functions/v1/evo-response-webhook`
- Ads e Trafego: `https://SEU-PROJETO.supabase.co/functions/v1/traffic-metrics-webhook`
- Sync Meta Ads: `https://SEU-PROJETO.supabase.co/functions/v1/meta-ads-sync`

Exemplo de payload do webhook de leads:

- veja `supabase/functions/tintim-webhook/README.md`
- payload base em `supabase/functions/tintim-webhook/example-payload.json`

## 7. Fluxo para deixar funcional

1. Preencha `.env`.
2. Rode `node scripts/sync-env.mjs`.
3. Execute o schema no Supabase.
4. Faça deploy das Edge Functions.
5. Configure os secrets no Supabase.
6. Aponte Tintim e Evo API para os webhooks.
7. Abra `index.html`, `crm.html` ou outra pagina do sistema.

## Observacoes

- O `supabaseAnonKey` pode ficar no frontend; ele e publico por natureza.
- O `SUPABASE_SERVICE_ROLE_KEY` nunca deve ficar no frontend.
- O signup publico do Supabase deve ficar desativado depois do bootstrap inicial do primeiro `ADMIN MASTER`.
- Os webhooks externos agora exigem um segredo proprio via header `x-webhook-secret`.
- As functions internas usam JWT da sessao autenticada; sem isso, retornam `401/403`.