core/dashboard/README.md

# Dashboard - DevOps Orchestration Platform

Dashboard completo para gerenciamento de infraestrutura, projetos, finanças e tasks com design VSCode-like premium.

## 🎨 Design System

Layout **VSCode-like** com:
- **Cores**: slate-900/950 background, cyan-300/400 accents
- **Cards**: rounded-xl com border-slate-800 e shadow-inner
- **Typography**: uppercase tracking-wide para labels
- **Avatar**: Gradientes cyan → blue
- **Animações**: Transitions suaves 150ms

## 📱 Páginas

### 🏠 Overview (`/`)
- Dashboard principal com métricas
- Total de repos, workers ativos, último deploy
- Status de integrações (Appwrite, GitHub, Realtime)

### 👤 Perfil (`/profile`)
- Avatar com iniciais do usuário
- Informações da conta (email, ID, data de criação)
- Estatísticas (projetos, tickets, uptime)
- Placeholder para edição e segurança

### 📊 Projetos (`/projects`)
- Grid de cards de projetos
- Filtros: Todos, Active, Paused, Archived
- Busca por nome
- Status badges coloridos
- Link para repositório GitHub

### 📋 Kanban (`/kanban`)
- 3 colunas: Backlog 📋 | Em Progresso 🏃 | Concluído ✅
- Cards de tickets com título, descrição
- Labels de prioridade: Low/Medium/High
- Assignee e drag & drop (futuro)

### 🔑 Admin de Contas (`/accounts`)
- Gerenciar credenciais multi-plataforma:
  - Cloudflare (laranja)
  - GitHub (branco)
  - cPanel (azul)
  - DirectAdmin (roxo)
  - Appwrite (rosa)
- Mascaramento de API Keys com toggle show/hide
- Testes de conexão
- Stats por provider

### 💰 Financeiro (`/finance`)
- Módulo ERP básico
- Cards de resumo: Receitas | Despesas | Saldo
- Lista de transações com categorias
- Gráfico de tendência mensal
- Breakdown por categoria

### ⚡ Hello World (`/hello`)
- Teste de Appwrite Function básica
- Input customizado
- Logs de execução

### 🐙 GitHub Repos (`/github`)
- Sincronizar repositórios do GitHub
- Usar credencial do cloud_accounts
- Listar repos do usuário

### ☁️ Cloudflare Zones (`/cloudflare`)
- Status de Zones e Workers
- Integração com Cloudflare API
- Usar credencial do cloud_accounts

### ⚙️ Settings (`/settings`)
- Configurações gerais
- Preferências (futuro)

## 🧩 Componentes

### `UserDropdown`
- Dropdown de perfil no header (canto direito)
- Avatar com iniciais e gradiente
- Menu: Meu Perfil, Configurações, Sair
- Click outside para fechar

### `TerminalLogs`
- Terminal em tempo real no rodapé
- Monitora collection `audit_logs` via Realtime
- Logs com timestamp

## 🗂️ Estrutura

```
dashboard/src/
├── components/
│   ├── TerminalLogs.tsx       # Terminal realtime
│   └── UserDropdown.tsx       # Dropdown de perfil
│
├── contexts/
│   └── Auth.tsx               # Contexto auth Appwrite
│
├── layouts/
│   └── DashboardLayout.tsx    # Layout principal com sidebar
│
├── lib/
│   └── appwrite.ts            # Config Appwrite SDK
│
├── pages/
│   ├── AccountsAdmin.tsx      # Admin multi-plataforma
│   ├── Cloudflare.tsx         # Zones Cloudflare
│   ├── ERPFinance.tsx         # Módulo financeiro
│   ├── Github.tsx             # Repos GitHub
│   ├── Hello.tsx              # Hello World function
│   ├── Home.tsx               # Overview dashboard
│   ├── Kanban.tsx             # Board de tickets
│   ├── Login.tsx              # Página de login
│   ├── Profile.tsx            # Perfil do usuário
│   ├── Projects.tsx           # Grid de projetos
│   └── Settings.tsx           # Configurações
│
├── App.tsx                    # Routes
└── main.tsx                   # Entry point
```

## 🔧 Stack Tecnológica

- **Framework**: React 18 + TypeScript
- **Build**: Vite 5
- **Routing**: React Router DOM v7
- **Backend**: Appwrite Cloud (BaaS)
- **Styling**: Tailwind CSS 3
- **Icons**: Lucide React
- **Linting**: ESLint + TypeScript ESLint

## 🚀 Scripts

```bash
# Desenvolvimento
npm run dev              # Vite dev server em http://localhost:5173

# Build
npm run build            # TypeScript + Vite build

# Lint
npm run lint             # ESLint com regras TypeScript

# Preview
npm run preview          # Preview do build de produção
```

## 🔑 Variáveis de Ambiente

Crie `.env` com:

```env
# Appwrite Endpoint (cliente)
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1

# Project ID (cliente)
VITE_APPWRITE_PROJECT_ID=seu_project_id

# Database ID (cliente)
VITE_APPWRITE_DATABASE_ID=seu_database_id

# Collections IDs (cliente)
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
```

**Todas as variáveis `VITE_*` são expostas no cliente**, portanto não coloque segredos!

## 📊 Appwrite Collections

### `cloud_accounts`
Credenciais de APIs multi-plataforma:
```typescript
{
  name: string               // Ex: "Cloudflare Produção"
  provider: enum             // cloudflare | github | cpanel | directadmin | appwrite
  apiKey: string             // API Key ou token
  endpoint?: string          // URL do endpoint (opcional)
  active: boolean            // Se está ativo
}
```

### `projects` (futuro)
```typescript
{
  name: string
  description: string
  status: enum               // active | paused | archived
  repository_url?: url
  created_at: datetime
  owner_id: string
}
```

### `tickets` (futuro)
```typescript
{
  title: string
  description: string
  status: enum               // backlog | in_progress | done
  priority: enum             // low | medium | high
  assignee?: string
  project_id?: string
  created_at: datetime
}
```

### `transactions` (futuro - ERP)
```typescript
{
  description: string
  amount: number
  type: enum                 // income | expense
  category: string
  date: datetime
}
```

## 🎯 Navegação

9 itens na sidebar:

1. **Overview** 🏠 - Dashboard principal
2. **Projetos** 📂 - Gestão de projetos
3. **Kanban** 📋 - Board de tickets
4. **Contas** 🔑 - Admin multi-plataforma
5. **Financeiro** 💰 - ERP módulo
6. **Hello World** ✨ - Test function
7. **GitHub Repos** 🐙 - Integração GitHub
8. **Cloudflare Zones** ☁️ - Integração Cloudflare
9. **Settings** ⚙️ - Configurações

## 🔒 Autenticação

- Login via email/senha com Appwrite Auth
- Redirect automático para dashboard após login
- Protected routes com `PrivateRoute` HOC
- Logout via UserDropdown no header

## 📦 Build Stats

```
Bundle size: 306KB gzipped
Modules: 1727 transformed
Build time: ~8s
```

## 🚀 Deploy

### Vercel
```bash
npm run build
# Upload pasta dist/
```

### Netlify
```toml
[build]
  command = "npm run build"
  publish = "dist"
```

### Docker
```dockerfile
FROM node:22-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 5173
CMD ["npm", "run", "preview"]
```

## 🎨 Customização

### Cores
Editar `tailwind.config.js` e trocar `slate`/`cyan` por outras cores mantendo o padrão.

### Ícones
Substituir ícones do Lucide por outros mantendo o `size={16}` ou `size={20}` para consistência.

### Layout
Ajustar sidebar width em `DashboardLayout.tsx` linha 30: `w-64` → `w-72` para maior.

## 📝 Próximos Passos

- [ ] Implementar CRUD completo de Projetos
- [ ] Drag & drop no Kanban
- [ ] Formulário de criação de Contas
- [ ] Charts reais no Financeiro (recharts/visx)
- [ ] Edição de perfil
- [ ] Notificações toast (sonner)
- [ ] Dark/Light mode toggle
- [ ] Testes com Vitest + Testing Library

## 🐛 Troubleshooting

### Erro ao buildar
```bash
rm -rf node_modules dist
npm install
npm run build
```

### Variáveis não carregam
Verifique se tem prefixo `VITE_` e reinicie dev server.

### Realtime não funciona
Certifique-se que `audit_logs` collection existe e tem Read permission para usuário autenticado.

---

**Dashboard criado com 💎 mantendo padrão VSCode-like top!**