diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx index 9ab435d..798472d 100644 --- a/dashboard/src/App.tsx +++ b/dashboard/src/App.tsx @@ -1,12 +1,16 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom' import DashboardLayout from './layouts/DashboardLayout' import { PrivateRoute } from './contexts/Auth' +import AccountsAdmin from './pages/AccountsAdmin' import Cloudflare from './pages/Cloudflare' -import Hello from './pages/Hello' +import ERPFinance from './pages/ERPFinance' import Github from './pages/Github' +import Hello from './pages/Hello' import Home from './pages/Home' +import Kanban from './pages/Kanban' import Login from './pages/Login' import Profile from './pages/Profile' +import Projects from './pages/Projects' import Settings from './pages/Settings' function App() { @@ -18,6 +22,10 @@ function App() { }> }> } /> + } /> + } /> + } /> + } /> } /> } /> } /> diff --git a/dashboard/src/layouts/DashboardLayout.tsx b/dashboard/src/layouts/DashboardLayout.tsx index db181d1..bba109b 100644 --- a/dashboard/src/layouts/DashboardLayout.tsx +++ b/dashboard/src/layouts/DashboardLayout.tsx @@ -1,4 +1,4 @@ -import { Cloud, Github, Home, Settings, Sparkles, Terminal } from 'lucide-react' +import { Cloud, Github, Home, Settings, Sparkles, Terminal, FolderGit2, KanbanSquare, KeyRound, DollarSign } from 'lucide-react' import { NavLink, Outlet } from 'react-router-dom' import { TerminalLogs } from '../components/TerminalLogs' import UserDropdown from '../components/UserDropdown' @@ -6,6 +6,10 @@ import { useAuth } from '../contexts/Auth' const navItems = [ { label: 'Overview', to: '/', icon: Home }, + { label: 'Projetos', to: '/projects', icon: FolderGit2 }, + { label: 'Kanban', to: '/kanban', icon: KanbanSquare }, + { label: 'Contas', to: '/accounts', icon: KeyRound }, + { label: 'Financeiro', to: '/finance', icon: DollarSign }, { label: 'Hello World', to: '/hello', icon: Sparkles }, { label: 'GitHub Repos', to: '/github', icon: Github }, { label: 'Cloudflare Zones', to: '/cloudflare', icon: Cloud }, diff --git a/dashboard/src/pages/AccountsAdmin.tsx b/dashboard/src/pages/AccountsAdmin.tsx new file mode 100644 index 0000000..3732d93 --- /dev/null +++ b/dashboard/src/pages/AccountsAdmin.tsx @@ -0,0 +1,207 @@ +import { KeyRound, Plus, Cloud, Github, Server, Zap, Eye, EyeOff, Trash2, TestTube } from 'lucide-react' +import { useEffect, useState } from 'react' +import { Query, type Models } from 'appwrite' +import { databases, appwriteDatabaseId } from '../lib/appwrite' + +type Account = Models.Document & { + name: string + provider: 'cloudflare' | 'github' | 'cpanel' | 'directadmin' | 'appwrite' + apiKey: string + endpoint?: string + active: boolean +} + +const COLLECTION_ID = 'cloud_accounts' + +const providerIcons = { + cloudflare: Cloud, + github: Github, + cpanel: Server, + directadmin: Server, + appwrite: Zap, +} + +const providerColors = { + cloudflare: 'text-orange-400', + github: 'text-slate-100', + cpanel: 'text-blue-400', + directadmin: 'text-purple-400', + appwrite: 'text-pink-400', +} + +export default function AccountsAdmin() { + const [accounts, setAccounts] = useState([]) + const [loading, setLoading] = useState(true) + const [showSecret, setShowSecret] = useState>({}) + const [isCreating, setIsCreating] = useState(false) + + useEffect(() => { + fetchAccounts() + }, []) + + const fetchAccounts = async () => { + try { + if (!appwriteDatabaseId) return + const response = await databases.listDocuments( + appwriteDatabaseId, + COLLECTION_ID, + [Query.orderDesc('$createdAt'), Query.limit(100)] + ) + setAccounts(response.documents) + } catch (error) { + console.error('Erro ao carregar contas:', error) + } finally { + setLoading(false) + } + } + + const maskApiKey = (key: string) => { + if (key.length <= 8) return '****' + return `${key.substring(0, 4)}${'*'.repeat(20)}${key.substring(key.length - 4)}` + } + + const toggleSecret = (id: string) => { + setShowSecret(prev => ({ ...prev, [id]: !prev[id] })) + } + + const ProviderIcon = ({ provider }: { provider: Account['provider'] }) => { + const Icon = providerIcons[provider] + const colorClass = providerColors[provider] + return + } + + return ( +
+ {/* Header */} +
+
+

Admin

+

Gerenciar Contas

+

+ Gerencie credenciais de APIs: Cloudflare, GitHub, cPanel, DirectAdmin e Appwrite. +

+
+ +
+ + {/* Stats */} +
+ {['cloudflare', 'github', 'cpanel', 'directadmin', 'appwrite'].map((provider) => { + const count = accounts.filter(a => a.provider === provider).length + const Icon = providerIcons[provider as Account['provider']] + const colorClass = providerColors[provider as Account['provider']] + return ( +
+
+ +

{provider}

+
+

{count}

+
+ ) + })} +
+ + {/* Accounts List */} +
+

Contas Cadastradas

+ + {loading ? ( +

Carregando...

+ ) : accounts.length === 0 ? ( +
+ +

Nenhuma conta cadastrada

+

Clique em "Nova Conta" para adicionar

+
+ ) : ( +
+ {accounts.map((account) => ( +
+ {/* Info */} +
+ +
+

{account.name}

+

+ {account.provider.toUpperCase()} + {account.endpoint && ` • ${account.endpoint}`} +

+
+
+ + {/* Actions */} +
+ {/* API Key */} +
+ + {showSecret[account.$id] ? account.apiKey : maskApiKey(account.apiKey)} + + +
+ + {/* Status */} + + {account.active ? 'Ativo' : 'Inativo'} + + + {/* Test */} + + + {/* Delete */} + +
+
+ ))} +
+ )} +
+ + {/* Create Modal (simplificado - placeholder) */} + {isCreating && ( +
+
+

Nova Conta

+

+ Funcionalidade de criação será implementada em breve. +

+ +
+
+ )} +
+ ) +} diff --git a/dashboard/src/pages/ERPFinance.tsx b/dashboard/src/pages/ERPFinance.tsx new file mode 100644 index 0000000..33fb31f --- /dev/null +++ b/dashboard/src/pages/ERPFinance.tsx @@ -0,0 +1,154 @@ +import { DollarSign, TrendingUp, TrendingDown, PieChart, Plus } from 'lucide-react' +import { useState } from 'react' + +type Transaction = { + id: string + description: string + amount: number + type: 'income' | 'expense' + category: string + date: string +} + +const mockTransactions: Transaction[] = [ + { id: '1', description: 'Hospedagem Cloudflare', amount: 120.00, type: 'expense', category: 'Infraestrutura', date: '2024-12-10' }, + { id: '2', description: 'Cliente - Projeto Web', amount: 2500.00, type: 'income', category: 'Serviços', date: '2024-12-09' }, + { id: '3', description: 'Licença GitHub Enterprise', amount: 210.00, type: 'expense', category: 'Software', date: '2024-12-08' }, + { id: '4', description: 'Consultoria DevOps', amount: 1800.00, type: 'income', category: 'Consultoria', date: '2024-12-07' }, +] + +export default function ERPFinance() { + const [transactions] = useState(mockTransactions) + + const totalIncome = transactions.filter(t => t.type === 'income').reduce((acc, t) => acc + t.amount, 0) + const totalExpense = transactions.filter(t => t.type === 'expense').reduce((acc, t) => acc + t.amount, 0) + const balance = totalIncome - totalExpense + + const formatCurrency = (value: number) => { + return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value) + } + + return ( +
+ {/* Header */} +
+
+

ERP

+

Financeiro

+

+ Gerencie receitas, despesas e acompanhe o fluxo de caixa. +

+
+ +
+ + {/* Summary Cards */} +
+ {/* Total Income */} +
+
+ +

Receitas

+
+

{formatCurrency(totalIncome)}

+

Total de entradas

+
+ + {/* Total Expense */} +
+
+ +

Despesas

+
+

{formatCurrency(totalExpense)}

+

Total de saídas

+
+ + {/* Balance */} +
+
+ +

Saldo

+
+

= 0 ? 'text-cyan-400' : 'text-red-400'}`}> + {formatCurrency(balance)} +

+

Receitas - Despesas

+
+
+ + {/* Transactions Table */} +
+
+

Transações Recentes

+ +
+ +
+ {transactions.length === 0 ? ( +

Nenhuma transação registrada

+ ) : ( + transactions.map((transaction) => ( +
+ {/* Info */} +
+
+ {transaction.type === 'income' ? : } +
+
+

{transaction.description}

+

+ {transaction.category} • {new Date(transaction.date).toLocaleDateString('pt-BR')} +

+
+
+ + {/* Amount */} +

+ {transaction.type === 'income' ? '+' : '-'} {formatCurrency(transaction.amount)} +

+
+ )) + )} +
+
+ + {/* Categories Quick Stats */} +
+ {/* Top Categories */} +
+

Categorias

+
+ {['Infraestrutura', 'Serviços', 'Software', 'Consultoria'].map((category, idx) => ( +
+ {category} + {idx === 0 ? '37%' : idx === 1 ? '28%' : idx === 2 ? '20%' : '15%'} +
+ ))} +
+
+ + {/* Monthly Trend Placeholder */} +
+

Tendência Mensal

+
+ {[60, 80, 75, 90, 85, 100].map((height, idx) => ( +
+ ))} +
+

Últimos 6 meses

+
+
+
+ ) +} diff --git a/dashboard/src/pages/Kanban.tsx b/dashboard/src/pages/Kanban.tsx new file mode 100644 index 0000000..8ff3274 --- /dev/null +++ b/dashboard/src/pages/Kanban.tsx @@ -0,0 +1,137 @@ +import { KanbanSquare, Plus } from 'lucide-react' +import { useState } from 'react' + +type Ticket = { + id: string + title: string + description: string + status: 'backlog' | 'in_progress' | 'done' + priority: 'low' | 'medium' | 'high' + assignee?: string +} + +const mockTickets: Ticket[] = [ + { + id: '1', + title: 'Implementar dropdown de perfil', + description: 'Criar componente UserDropdown com avatar e menu', + status: 'done', + priority: 'high', + assignee: 'Você' + }, + { + id: '2', + title: 'Admin Multi-Plataforma', + description: 'Gerenciar credenciais Cloudflare, GitHub, cPanel', + status: 'in_progress', + priority: 'high' + }, + { + id: '3', + title: 'Página de Projetos', + description: 'Grid com filtros e busca', + status: 'in_progress', + priority: 'medium' + }, + { + id: '4', + title: 'ERP Financeiro', + description: 'Módulo de receitas e despesas', + status: 'backlog', + priority: 'medium' + }, +] + +const columns = [ + { id: 'backlog', title: 'Backlog', icon: '📋' }, + { id: 'in_progress', title: 'Em Progresso', icon: '🏃' }, + { id: 'done', title: 'Concluído', icon: '✅' }, +] as const + +export default function Kanban() { + const [tickets] = useState(mockTickets) + + const getPriorityColor = (priority: Ticket['priority']) => { + switch (priority) { + case 'high': return 'bg-red-500/20 text-red-300 border-red-500/30' + case 'medium': return 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30' + case 'low': return 'bg-blue-500/20 text-blue-300 border-blue-500/30' + } + } + + return ( +
+ {/* Header */} +
+
+

Quadro

+

Kanban

+

+ Gerencie tasks e acompanhe o progresso do trabalho. +

+
+ +
+ + {/* Kanban Board */} +
+ {columns.map((column) => { + const columnTickets = tickets.filter(t => t.status === column.id) + + return ( +
+ {/* Column Header */} +
+
+ {column.icon} +

{column.title}

+
+ + {columnTickets.length} + +
+ + {/* Tickets */} +
+ {columnTickets.length === 0 ? ( +
+ +

Nenhum ticket

+
+ ) : ( + columnTickets.map((ticket) => ( +
+ {/* Title */} +

{ticket.title}

+ + {/* Description */} +

+ {ticket.description} +

+ + {/* Footer */} +
+ + {ticket.priority} + + {ticket.assignee && ( + {ticket.assignee} + )} +
+
+ )) + )} +
+
+ ) + })} +
+
+ ) +} diff --git a/dashboard/src/pages/Projects.tsx b/dashboard/src/pages/Projects.tsx new file mode 100644 index 0000000..6c44619 --- /dev/null +++ b/dashboard/src/pages/Projects.tsx @@ -0,0 +1,148 @@ +import { FolderGit2, Plus, Search, Archive, Play, Pause } from 'lucide-react' +import { useState } from 'react' + +type Project = { + id: string + name: string + description: string + status: 'active' | 'paused' | 'archived' + repository_url?: string + created_at: string +} + +const mockProjects: Project[] = [ + { + id: '1', + name: 'Core Platform', + description: 'Plataforma DevOps principal com dashboard e integraçõesFoi implementadoo esquema completo para gerenciar múltiplas plataformas.', + status: 'active', + repository_url: 'https://github.com/rede5/core', + created_at: '2024-12-11' + }, + { + id: '2', + name: 'Landing Page', + description: 'Landing page com Fresh e Deno', + status: 'active', + created_at: '2024-12-10' + }, +] + +export default function Projects() { + const [projects] = useState(mockProjects) + const [filter, setFilter] = useState<'all' | Project['status']>('all') + + const filteredProjects = filter === 'all' + ? projects + : projects.filter(p => p.status === filter) + + const getStatusColor = (status: Project['status']) => { + switch (status) { + case 'active': return 'bg-emerald-500/20 text-emerald-300' + case 'paused': return 'bg-yellow-500/20 text-yellow-300' + case 'archived': return 'bg-slate-700/50 text-slate-400' + } + } + + const getStatusIcon = (status: Project['status']) => { + switch (status) { + case 'active': return + case 'paused': return + case 'archived': return + } + } + + return ( +
+ {/* Header */} +
+
+

Gestão

+

Projetos

+

+ Gerencie seus projetos e repositorios. +

+
+ +
+ + {/* Filters & Search */} +
+
+
+ + +
+
+
+ {(['all', 'active', 'paused', 'archived'] as const).map((status) => ( + + ))} +
+
+ + {/* Projects Grid */} +
+ {filteredProjects.map((project) => ( +
+ {/* Icon & Status */} +
+
+ +
+ + {getStatusIcon(project.status)} + {project.status} + +
+ + {/* Info */} +

{project.name}

+

{project.description}

+ + {/* Meta */} +
+ {new Date(project.created_at).toLocaleDateString('pt-BR')} + {project.repository_url && ( + + GitHub + + )} +
+
+ ))} +
+ + {filteredProjects.length === 0 && ( +
+ +

Nenhum projeto encontrado

+
+ )} +
+ ) +}