core/dashboard

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

# 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:

# 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:

{
  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)

{
  name: string
  description: string
  status: enum               // active | paused | archived
  repository_url?: url
  created_at: datetime
  owner_id: string
}

tickets (futuro)

{
  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)

{
  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

npm run build
# Upload pasta dist/

Netlify

[build]
  command = "npm run build"
  publish = "dist"

Docker

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

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!