core/dashboard/README.md

# Dashboard - Core Platform

> Painel administrativo DevOps desenvolvido com **React + TypeScript + Vite** integrado ao **Appwrite Cloud** para autenticação, database e realtime.

## 🎯 Visão Geral

Dashboard para gerenciamento de:
- **Servidores**: Monitoramento de status, IP e região
- **Repositórios GitHub**: Acompanhamento de commits e status
- **Audit Logs**: Logs de eventos em tempo real
- **Contas Cloudflare**: Gerenciamento de integrações

## 🛠 Stack Tecnológica

- **Framework**: [React 18](https://react.dev)
- **Build Tool**: [Vite 5](https://vitejs.dev)
- **Linguagem**: TypeScript 5
- **Roteamento**: React Router DOM 7
- **Estilização**: Tailwind CSS 3
- **Backend**: Appwrite Cloud SDK
- **Ícones**: Lucide React
- **Linting**: ESLint 8

## 📦 Instalação

```bash
# Na raiz do projeto
cd dashboard

# Instalar dependências
npm install
```

## ⚙️ Configuração

### Variáveis de Ambiente

O dashboard lê variáveis do arquivo `.env` na **raíz do monorepo** (não nesta pasta).

Variáveis necessárias (todas com prefixo `VITE_`):

```env
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=seu_project_id
VITE_APPWRITE_DATABASE_ID=seu_database_id
VITE_APPWRITE_COLLECTION_SERVERS_ID=servers
VITE_APPWRITE_COLLECTION_GITHUB_REPOS_ID=github_repos
VITE_APPWRITE_COLLECTION_AUDIT_LOGS_ID=audit_logs
VITE_APPWRITE_COLLECTION_CLOUDFLARE_ACCOUNTS_ID=cloud_accounts
```

**⚠️ Importante**: O Vite só expõe variáveis com prefixo `VITE_` para o browser.

### Configuração do Appwrite

Veja o [README principal](../README.md#setup-appwrite-cloud) para instruções completas de setup do Appwrite Cloud.

## 🏃 Scripts

| Comando | Descrição |
|---------|-----------|
| `npm run dev` | Inicia dev server (porta 5173) |
| `npm run build` | Gera build de produção em `dist/` |
| `npm run preview` | Testa build localmente |
| `npm run lint` | Executa ESLint |

### Executar em Desenvolvimento

```bash
npm run dev
```

Acesse: http://localhost:5173

**Login**: Use credenciais criadas no Appwrite Auth (ex: `admin@test.com`)

## 📁 Estrutura de Pastas

```
dashboard/
├── public/              # Arquivos estáticos
│   └── vite.svg
├── src/
│   ├── components/      # Componentes reutilizáveis
│   │   ├── Header.tsx
│   │   ├── Overview.tsx
│   │   ├── ServerList.tsx
│   │   ├── GitHubRepos.tsx
│   │   ├── Terminal.tsx
│   │   └── ...
│   ├── pages/           # Páginas/rotas
│   │   ├── Login.tsx
│   │   ├── Dashboard.tsx
│   │   └── ...
│   ├── lib/             # Utilitários e SDK
│   │   └── appwrite.ts  # Inicialização SDK Appwrite
│   ├── App.tsx          # Componente raiz + rotas
│   ├── main.tsx         # Entry point
│   └── index.css        # Tailwind + estilos globais
├── index.html           # Template HTML
├── vite.config.ts       # Configuração Vite
├── tailwind.config.js   # Configuração Tailwind
├── tsconfig.json        # Configuração TypeScript
└── package.json         # Dependências e scripts
```

## 🔑 Funcionalidades

### Autenticação

- Login com Email/Password via Appwrite Auth
- Session management com `account.createEmailPasswordSession`
- Logout com `account.deleteSession('current')`
- Proteção de rotas com verificação de sessão

### Database Queries

Consulta coleções Appwrite usando o SDK:

```typescript
import { databases } from './lib/appwrite';

// Listar servidores
const servers = await databases.listDocuments(
  import.meta.env.VITE_APPWRITE_DATABASE_ID,
  import.meta.env.VITE_APPWRITE_COLLECTION_SERVERS_ID
);
```

### Realtime Subscriptions

Terminal assina eventos da coleção `audit_logs`:

```typescript
import { client } from './lib/appwrite';

client.subscribe(
  `databases.${databaseId}.collections.${auditLogsId}.documents`,
  (response) => {
    console.log('Novo log:', response.payload);
  }
);
```

## 🎨 Componentes Principais

| Componente | Descrição |
|------------|-----------|
| `Header` | Barra superior com navegação e logout |
| `Overview` | Widgets com métricas de servidores, repos e logs |
| `ServerList` | Tabela de servidores com status online/offline |
| `GitHubRepos` | Lista de repositórios GitHub integrados |
| `Terminal` | Console com logs em tempo real (Realtime) |

## 🧪 Testes

### Linting

```bash
npm run lint
```

Configuração ESLint em `.eslintrc.cjs`:
- Parser: `@typescript-eslint/parser`
- Plugins: React Hooks, React Refresh
- Regras: React 18.2+ (sem import React necessário)

### Build de Produção

```bash
npm run build
```

Saída:
- `dist/index.html`
- `dist/assets/index-[hash].js`
- `dist/assets/index-[hash].css`

Otimizações:
- Tree-shaking
- Minificação
- Code splitting
- Hashing de assets

## 🚀 Deploy

### Vercel (Recomendado)

```bash
npm run build
# Ou conecte o repo no painel Vercel
```

**Configuração Vercel**:
- Build Command: `npm run build`
- Output Directory: `dist`
- Environment Variables: Adicione todas as `VITE_*`

### Netlify

```bash
npm run build
# Arraste a pasta dist/ no painel Netlify
```

**netlify.toml** (opcional):
```toml
[build]
  command = "npm run build"
  publish = "dist"
```

### Cloudflare Pages

```bash
npm run build
# Upload via Wrangler ou painel
```

**⚠️ Importante**: Configure as variáveis de ambiente `VITE_*` no painel do provider!

## 🔧 Troubleshooting

### "import.meta.env.VITE_APPWRITE_PROJECT_ID is undefined"

**Causa**: Arquivo `.env` não está na raiz do monorepo ou variável não tem prefixo `VITE_`

**Solução**:
```bash
# Verifique se o .env existe na raiz (não em dashboard/)
cat ../.env

# Certifique-se que as variáveis começam com VITE_
grep VITE_ ../.env
```

### Erro de CORS no Appwrite

**Solução**:
1. Appwrite Console → Settings → Platforms
2. Add Platform → **Web**
3. Hostname: `localhost` (dev) e seu domínio (produção)

### TypeScript errors no build

```bash
# Verificar erros
npx tsc --noEmit

# Atualizar tipos se necessário
npm install --save-dev @types/react@latest @types/react-dom@latest
```

## 📚 Recursos

- [Appwrite React SDK](https://appwrite.io/docs/sdks#client)
- [Vite Guide](https://vitejs.dev/guide/)
- [React Documentation](https://react.dev)
- [Tailwind CSS](https://tailwindcss.com/docs)

---

Para configuração completa e setup do Appwrite, veja o [README principal](../README.md).