Add dashboard auth layout and integrations

.env.example

@@ -3,3 +3,6 @@ APPWRITE_PROJECT_ID=
 APPWRITE_API_KEY=
 APPWRITE_FUNCTIONS_ENDPOINT=
 APPWRITE_FUNCTIONS_API_KEY=
+VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+VITE_APPWRITE_PROJECT_ID=
+VITE_APPWRITE_DATABASE_ID=

README.md

@@ -1 +1,70 @@
-# core
+# Core Platform Monorepo
+
+Ambiente unificado com três camadas principais:
+
+- **Appwrite** para autenticação, base de dados e funções (sync-github e check-cloudflare-status).
+- **Landing (Fresh + Deno)** para a página pública em `landing/`.
+- **Dashboard (React + Vite)** para o painel operacional em `dashboard/`.
+
+## Pré-requisitos
+- Node.js 18+ e npm
+- Deno 1.39+ (para o app Fresh)
+- Docker e Docker Compose (para Appwrite local) ou um projeto Appwrite Cloud
+- Variáveis de ambiente configuradas a partir de [.env.example](.env.example)
+
+## Variáveis de ambiente
+- **Backend/Appwrite:** use `APPWRITE_ENDPOINT`, `APPWRITE_PROJECT_ID`, `APPWRITE_API_KEY`, `APPWRITE_DATABASE_ID` e credenciais de funções conforme necessário.
+- **Dashboard (Vite):** use `VITE_APPWRITE_ENDPOINT`, `VITE_APPWRITE_PROJECT_ID` e `VITE_APPWRITE_DATABASE_ID`. O prefixo `VITE_` garante a leitura pelo Vite em tempo de build.
+- **Landing (Deno Fresh):** o arquivo `landing/main.ts` carrega automaticamente variáveis do `.env` via `$std/dotenv/load.ts`, então os mesmos valores de Appwrite podem ser reutilizados.
+
+Sugestão rápida:
+```bash
+cp .env.example .env
+# Preencha IDs/projetos/chaves de acordo com seu ambiente Appwrite
+```
+
+## Executando os ambientes
+### 1) Appwrite local
+1. Tenha Docker em execução.
+2. Inicie o stack Appwrite (CLI ou imagem oficial), por exemplo:
+   ```bash
+   docker run -it --rm \ 
+     -p 80:80 -p 443:443 \ 
+     -v "$(pwd)/appwrite:/var/lib/appwrite" \ 
+     appwrite/appwrite:latest install
+   ```
+3. Após provisionar o projeto, configure as variáveis (`APPWRITE_*` e `VITE_APPWRITE_*`) e implante as funções em `appwrite-functions/` conforme necessário.
+
+### 2) Landing (Fresh + Deno)
+```bash
+npm run dev:landing
+# ou: cd landing && deno task start
+```
+- O servidor roda em `http://localhost:8000` por padrão.
+- As variáveis `.env` são lidas automaticamente no bootstrap do Deno.
+
+### 3) Dashboard (React + Vite)
+```bash
+cd dashboard
+npm install
+npm run dev
+```
+- Usa os valores `VITE_APPWRITE_*` para client, database e funções.
+- Disponível em `http://localhost:5173`.
+
+### 4) Landing + Dashboard em paralelo
+No diretório raiz:
+```bash
+npm run dev:web
+```
+O script usa `npm-run-all` para iniciar `landing` (Deno) e `dashboard` (Vite) lado a lado.
+
+## Estrutura de pastas
+- `appwrite-functions/`: fontes das funções `sync-github` e `check-cloudflare-status`.
+- `landing/`: app Fresh (Deno) para a camada pública.
+- `dashboard/`: painel autenticado com React + Vite, Tailwind e integrações Appwrite.
+
+## Notas finais
+- O dashboard valida a sessão Appwrite no carregamento inicial e protege rotas privadas.
+- O Appwrite Database precisa do ID configurado (`APPWRITE_DATABASE_ID`/`VITE_APPWRITE_DATABASE_ID`) para consultas de projetos, cloud_accounts e audit_logs.
+- O canal Realtime da coleção `audit_logs` é usado para o terminal de logs em tempo real.

dashboard/src/App.tsx

@@ -1,35 +1,30 @@
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
+import DashboardLayout from './layouts/DashboardLayout'
+import { PrivateRoute } from './contexts/Auth'
+import Cloudflare from './pages/Cloudflare'
+import Github from './pages/Github'
+import Home from './pages/Home'
+import Login from './pages/Login'
+import Settings from './pages/Settings'
+
 function App() {
   return (
-    <main className="flex min-h-screen items-center justify-center p-6">
+    <BrowserRouter>
-      <div className="w-full max-w-2xl rounded-2xl border border-slate-800/70 bg-slate-900/60 p-8 shadow-xl shadow-slate-900/60 backdrop-blur">
+      <Routes>
-        <p className="text-xs uppercase tracking-[0.3em] text-cyan-300">Fase 3 • Dashboard</p>
+        <Route path="/login" element={<Login />} />
-        <h1 className="mt-3 text-3xl font-semibold text-slate-50">React + Vite + Appwrite</h1>
-        <p className="mt-3 text-sm leading-relaxed text-slate-300">
-          Projeto inicializado com Vite (React + TypeScript), Tailwind CSS e dependências do SDK web do Appwrite. Os serviços de
-          autenticação estão encapsulados em helpers reutilizáveis para login, logout e leitura segura da sessão atual.
-        </p>
 
-        <div className="mt-6 grid gap-4 sm:grid-cols-2">
+        <Route element={<PrivateRoute />}>
-          <div className="rounded-xl border border-slate-800/60 bg-slate-900/80 p-4">
+          <Route element={<DashboardLayout />}>
-            <h2 className="text-sm font-semibold text-slate-100">Stack pronta para UI</h2>
+            <Route index element={<Home />} />
-            <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-slate-300">
+            <Route path="/github" element={<Github />} />
-              <li>Tailwind configurado para <code className="rounded bg-slate-800 px-1">src</code> e <code className="rounded bg-slate-800 px-1">index.html</code>.</li>
+            <Route path="/cloudflare" element={<Cloudflare />} />
-              <li>Dependências instaladas: Appwrite SDK, React Router, Lucide Icons.</li>
+            <Route path="/settings" element={<Settings />} />
-              <li>Estilos base prontos para páginas do dashboard.</li>
+          </Route>
-            </ul>
+        </Route>
-          </div>
 
-          <div className="rounded-xl border border-slate-800/60 bg-slate-900/80 p-4">
+        <Route path="*" element={<Navigate to="/" replace />} />
-            <h2 className="text-sm font-semibold text-slate-100">Appwrite pronto</h2>
+      </Routes>
-            <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-slate-300">
+    </BrowserRouter>
-              <li>Client, Account e Databases inicializados em <code className="rounded bg-slate-800 px-1">src/lib/appwrite.ts</code>.</li>
-              <li>Helpers para login, logout e recuperação da sessão atual.</li>
-              <li>Tratamento de sessão expirada retornando <span className="font-semibold text-cyan-300">null</span> quando apropriado.</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </main>
   )
 }
 

dashboard/src/components/TerminalLogs.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useMemo, useState } from 'react'
+import { client, appwriteDatabaseId } from '../lib/appwrite'
+
+const channel = appwriteDatabaseId
+  ? `databases.${appwriteDatabaseId}.collections.audit_logs.documents`
+  : undefined
+
+type TerminalLog = {
+  id: string
+  message: string
+  timestamp: string
+  userId?: string
+}
+
+const formatTime = (timestamp: string) => {
+  const date = new Date(timestamp)
+  if (Number.isNaN(date.getTime())) return timestamp
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
+
+export function TerminalLogs() {
+  const [open, setOpen] = useState(true)
+  const [logs, setLogs] = useState<TerminalLog[]>([])
+
+  const logTitle = useMemo(() => (open ? 'Ocultar Terminal' : 'Mostrar Terminal'), [open])
+
+  useEffect(() => {
+    if (!channel) return undefined
+
+    const unsubscribe = client.subscribe(channel, (response) => {
+      const payload = (response as { payload?: Record<string, unknown> }).payload || {}
+      const action = (payload.action as string) || 'evento'
+      const timestamp = (payload.timestamp as string) || new Date().toISOString()
+      const userId = (payload.userId as string) || undefined
+
+      setLogs((prev) => [
+        {
+          id: crypto.randomUUID(),
+          message: action,
+          timestamp,
+          userId,
+        },
+        ...prev,
+      ].slice(0, 120))
+    })
+
+    return () => {
+      unsubscribe()
+    }
+  }, [channel])
+
+  return (
+    <div className="border-t border-slate-800 bg-slate-950/80 backdrop-blur">
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className="flex w-full items-center justify-between px-4 py-2 text-left text-xs uppercase tracking-[0.2em] text-cyan-200"
+      >
+        <span>{logTitle}</span>
+        <span className="text-[10px] font-mono text-slate-400">audit_logs realtime</span>
+      </button>
+
+      {open && (
+        <div className="max-h-56 overflow-y-auto bg-black/60 font-mono text-[12px] text-emerald-200">
+          {logs.length === 0 ? (
+            <p className="px-4 py-3 text-slate-400">Aguardando logs em tempo real...</p>
+          ) : (
+            <ul className="divide-y divide-slate-800/70">
+              {logs.map((log) => (
+                <li key={log.id} className="px-4 py-2">
+                  <span className="text-slate-500">[{formatTime(log.timestamp)}]</span>{' '}
+                  <span className="text-emerald-300">{log.message}</span>
+                  {log.userId ? <span className="text-slate-500"> • {log.userId}</span> : null}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

dashboard/src/contexts/Auth.tsx

@@ -0,0 +1,88 @@
+import { AppwriteException, Models } from 'appwrite'
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react'
+import { Navigate, Outlet, useLocation } from 'react-router-dom'
+import { account } from '../lib/appwrite'
+
+type AuthContextValue = {
+  user: Models.User<Models.Preferences> | null
+  loading: boolean
+  login: (email: string, password: string) => Promise<void>
+  logout: () => Promise<void>
+  refresh: () => Promise<void>
+}
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined)
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<Models.User<Models.Preferences> | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const fetchUser = async () => {
+    try {
+      setLoading(true)
+      const current = await account.get()
+      setUser(current)
+    } catch (error) {
+      const authError = error as AppwriteException
+      if (authError?.code === 401) {
+        setUser(null)
+      } else {
+        console.error('Erro ao buscar usuário atual', error)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchUser()
+  }, [])
+
+  const login = async (email: string, password: string) => {
+    await account.createEmailPasswordSession(email, password)
+    await fetchUser()
+  }
+
+  const logout = async () => {
+    await account.deleteSession('current')
+    setUser(null)
+  }
+
+  const value = useMemo(
+    () => ({
+      user,
+      loading,
+      login,
+      logout,
+      refresh: fetchUser,
+    }),
+    [loading, user],
+  )
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+}
+
+export const useAuth = () => {
+  const context = useContext(AuthContext)
+  if (!context) throw new Error('useAuth deve ser usado dentro de AuthProvider')
+  return context
+}
+
+export const PrivateRoute: React.FC = () => {
+  const { user, loading } = useAuth()
+  const location = useLocation()
+
+  if (loading) {
+    return (
+      <div className="grid min-h-screen place-items-center bg-slate-950 text-slate-100">
+        <p className="animate-pulse text-sm text-slate-400">Validando sessão...</p>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return <Navigate to="/login" state={{ from: location }} replace />
+  }
+
+  return <Outlet />
+}

dashboard/src/layouts/DashboardLayout.tsx

@@ -0,0 +1,82 @@
+import { Cloud, Github, Home, LogOut, Settings } from 'lucide-react'
+import { NavLink, Outlet, useNavigate } from 'react-router-dom'
+import { TerminalLogs } from '../components/TerminalLogs'
+import { useAuth } from '../contexts/Auth'
+
+const navItems = [
+  { label: 'Overview', to: '/', icon: Home },
+  { label: 'GitHub Repos', to: '/github', icon: Github },
+  { label: 'Cloudflare Zones', to: '/cloudflare', icon: Cloud },
+  { label: 'Settings', to: '/settings', icon: Settings },
+]
+
+const activeClass =
+  'flex items-center gap-2 rounded-lg bg-slate-800/60 px-3 py-2 text-slate-50 shadow-inner shadow-slate-900'
+const baseClass =
+  'flex items-center gap-2 rounded-lg px-3 py-2 text-slate-300 hover:bg-slate-800/40 transition-colors duration-150'
+
+export default function DashboardLayout() {
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+
+  const handleLogout = async () => {
+    await logout()
+    navigate('/login')
+  }
+
+  return (
+    <div className="flex min-h-screen bg-slate-950 text-slate-100">
+      <aside className="fixed left-0 top-0 flex h-full w-64 flex-col border-r border-slate-800 bg-slate-900/80 px-4 py-6 shadow-2xl shadow-slate-900/80">
+        <div className="mb-6 border-b border-slate-800 pb-4">
+          <p className="text-xs uppercase tracking-[0.3em] text-cyan-400">Fase 3</p>
+          <h1 className="text-lg font-semibold text-slate-50">Dashboard</h1>
+          <p className="text-xs text-slate-400">Automação e DevOps</p>
+        </div>
+
+        <nav className="flex-1 space-y-2">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
+              className={({ isActive }) => (isActive ? activeClass : baseClass)}
+            >
+              <item.icon size={18} />
+              <span className="text-sm">{item.label}</span>
+            </NavLink>
+          ))}
+        </nav>
+
+        <div className="mt-auto space-y-2 border-t border-slate-800 pt-4 text-sm text-slate-300">
+          <p className="truncate text-xs text-slate-500">{user?.email}</p>
+          <button
+            type="button"
+            onClick={handleLogout}
+            className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-slate-300 transition hover:bg-red-500/10 hover:text-red-200"
+          >
+            <LogOut size={18} />
+            Sair
+          </button>
+        </div>
+      </aside>
+
+      <div className="ml-64 flex min-h-screen flex-1 flex-col">
+        <header className="flex items-center justify-between border-b border-slate-800 bg-slate-900/60 px-6 py-4 backdrop-blur">
+          <div>
+            <p className="text-xs uppercase tracking-[0.2em] text-cyan-300">Painel de Controle</p>
+            <h2 className="text-xl font-semibold text-slate-50">DevOps Orchestration</h2>
+          </div>
+          <div className="rounded-lg bg-slate-800/60 px-4 py-2 text-xs text-slate-300 shadow-inner shadow-slate-900">
+            Sessão ativa: <span className="text-cyan-300">{user?.name || user?.email}</span>
+          </div>
+        </header>
+
+        <main className="flex-1 overflow-y-auto bg-slate-900/40 px-8 py-6">
+          <Outlet />
+        </main>
+
+        <TerminalLogs />
+      </div>
+    </div>
+  )
+}

dashboard/src/lib/appwrite.ts

@@ -1,7 +1,8 @@
-import { Account, AppwriteException, Client, Databases, Models } from 'appwrite'
+import { Account, AppwriteException, Client, Databases, Functions, Models } from 'appwrite'
 
 const appwriteEndpoint = import.meta.env.VITE_APPWRITE_ENDPOINT
 const appwriteProjectId = import.meta.env.VITE_APPWRITE_PROJECT_ID
+const appwriteDatabaseId = import.meta.env.VITE_APPWRITE_DATABASE_ID
 
 if (!appwriteEndpoint || !appwriteProjectId) {
   throw new Error('Defina VITE_APPWRITE_ENDPOINT e VITE_APPWRITE_PROJECT_ID no ambiente do Vite.')
@@ -11,6 +12,7 @@ const client = new Client().setEndpoint(appwriteEndpoint).setProject(appwritePro
 
 const account = new Account(client)
 const databases = new Databases(client)
+const functions = new Functions(client)
 
 const isSessionExpired = (error: unknown) => {
   if (error instanceof AppwriteException) {
@@ -47,4 +49,4 @@ export const getCurrentUser = async (): Promise<Models.User<Models.Preferences>
   }
 }
 
-export { account, client, databases }
+export { account, client, databases, functions, appwriteDatabaseId }

dashboard/src/main.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+import { AuthProvider } from './contexts/Auth.tsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    <AuthProvider>
       <App />
+    </AuthProvider>
   </React.StrictMode>,
 )

dashboard/src/pages/Cloudflare.tsx

@@ -0,0 +1,282 @@
+import { Execution, ID, Query } from 'appwrite'
+import { FormEvent, useEffect, useState } from 'react'
+import { appwriteDatabaseId, databases, functions } from '../lib/appwrite'
+
+const badgeClass = (status: string) =>
+  status === 'active' ? 'rounded-full bg-emerald-500/20 px-2 py-1 text-xs text-emerald-200' : 'rounded-full bg-amber-500/20 px-2 py-1 text-xs text-amber-200'
+
+type Zone = {
+  id: string
+  name: string
+  status: string
+  paused?: boolean
+}
+
+type Worker = {
+  name: string
+  modifiedOn?: string
+  active?: boolean
+}
+
+export default function Cloudflare() {
+  const [label, setLabel] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [accountId, setAccountId] = useState('')
+  const [cloudflareAccountId, setCloudflareAccountId] = useState('')
+  const [credentials, setCredentials] = useState<{ $id: string; label: string }[]>([])
+  const [zones, setZones] = useState<Zone[]>([])
+  const [workers, setWorkers] = useState<Worker[]>([])
+  const [execution, setExecution] = useState<Execution | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [modalOpen, setModalOpen] = useState(false)
+  const [newZone, setNewZone] = useState('')
+
+  useEffect(() => {
+    const loadCredentials = async () => {
+      if (!appwriteDatabaseId) return
+      try {
+        const response = await databases.listDocuments(appwriteDatabaseId, 'cloud_accounts', [
+          Query.equal('provider', 'cloudflare'),
+        ])
+        const docs = response.documents.map((doc) => ({ $id: doc.$id, label: (doc as { label?: string }).label || doc.$id }))
+        setCredentials(docs)
+      } catch (err) {
+        console.error(err)
+        setError('Falha ao carregar credenciais Cloudflare.')
+      }
+    }
+
+    loadCredentials()
+  }, [])
+
+  const handleSaveKey = async (event: FormEvent) => {
+    event.preventDefault()
+    setError(null)
+    if (!appwriteDatabaseId) {
+      setError('Configure VITE_APPWRITE_DATABASE_ID para salvar a chave de API.')
+      return
+    }
+
+    try {
+      const document = await databases.createDocument(appwriteDatabaseId, 'cloud_accounts', ID.unique(), {
+        provider: 'cloudflare',
+        apiKey,
+        label,
+      })
+      setCredentials((prev) => [...prev, { $id: document.$id, label: label || document.$id }])
+      setLabel('')
+      setApiKey('')
+    } catch (err) {
+      console.error(err)
+      setError('Não foi possível salvar a API Key.')
+    }
+  }
+
+  const handleStatus = async () => {
+    setError(null)
+    const selectedAccount = accountId || credentials[0]?.$id
+    if (!selectedAccount) {
+      setError('Selecione ou cadastre uma credencial Cloudflare antes de consultar o status.')
+      return
+    }
+    try {
+      const executionResult = await functions.createExecution(
+        'check-cloudflare-status',
+        JSON.stringify({ accountId: selectedAccount, cloudflareAccountId }),
+      )
+      setExecution(executionResult)
+
+      const payload = executionResult.responseBody ? JSON.parse(executionResult.responseBody) : {}
+      setZones((payload.zones as Zone[]) || [])
+      setWorkers((payload.workers as Worker[]) || [])
+    } catch (err) {
+      console.error(err)
+      setError('Não foi possível checar o status do Cloudflare.')
+    }
+  }
+
+  const handleAddZone = () => {
+    if (!newZone.trim()) return
+    setZones((prev) => [{ id: crypto.randomUUID(), name: newZone, status: 'pending' }, ...prev])
+    setNewZone('')
+    setModalOpen(false)
+  }
+
+  const online = zones.some((zone) => zone.status === 'active' && !zone.paused)
+
+  return (
+    <div className="space-y-6">
+      <header className="rounded-xl border border-slate-800/70 bg-slate-900/60 p-5 shadow-lg shadow-slate-950/50">
+        <p className="text-xs uppercase tracking-[0.3em] text-cyan-300">Cloudflare</p>
+        <h1 className="mt-2 text-2xl font-semibold text-slate-50">Integração e Status</h1>
+        <p className="mt-2 text-sm text-slate-400">
+          Salve a API Key criptografada no Appwrite e consulte a função <span className="text-cyan-300">check-cloudflare-status</span>.
+        </p>
+      </header>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <form className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5 shadow-inner shadow-slate-950/60" onSubmit={handleSaveKey}>
+          <h2 className="text-lg font-semibold text-slate-100">Salvar credencial</h2>
+          <p className="text-sm text-slate-400">Armazene a chave com criptografia gerenciada pelo Appwrite.</p>
+
+          <div className="mt-4 space-y-3">
+            <div>
+              <label className="text-sm text-slate-200">Label</label>
+              <input
+                type="text"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
+              />
+            </div>
+            <div>
+              <label className="text-sm text-slate-200">API Key</label>
+              <input
+                type="password"
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                required
+                className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
+              />
+            </div>
+            <button
+              type="submit"
+              className="rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-900 transition hover:bg-cyan-400"
+            >
+              Salvar API Key
+            </button>
+          </div>
+          {error ? <p className="mt-3 text-sm text-red-300">{error}</p> : null}
+        </form>
+
+        <div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5 shadow-inner shadow-slate-950/60">
+          <h2 className="text-lg font-semibold text-slate-100">Status das zonas</h2>
+          <p className="text-sm text-slate-400">Selecione a credencial e consulte o status em tempo real.</p>
+
+          <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div>
+              <label className="text-sm text-slate-200">Credencial</label>
+              <select
+                value={accountId}
+                onChange={(e) => setAccountId(e.target.value)}
+                className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
+              >
+                <option value="">Selecione um documento</option>
+                {credentials.map((cred) => (
+                  <option key={cred.$id} value={cred.$id}>
+                    {cred.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="text-sm text-slate-200">Cloudflare Account ID</label>
+              <input
+                type="text"
+                value={cloudflareAccountId}
+                onChange={(e) => setCloudflareAccountId(e.target.value)}
+                className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
+              />
+            </div>
+          </div>
+
+          <div className="mt-4 flex items-center gap-3">
+            <button
+              type="button"
+              onClick={handleStatus}
+              className="rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-900 transition hover:bg-cyan-400"
+            >
+              Consultar status
+            </button>
+            <button
+              type="button"
+              onClick={() => setModalOpen(true)}
+              className="rounded-lg border border-cyan-500/60 px-4 py-2 text-sm text-cyan-200 transition hover:bg-cyan-500/10"
+            >
+              Adicionar Nova Zona
+            </button>
+          </div>
+
+          {execution ? (
+            <div className="mt-3 rounded-lg border border-slate-800 bg-slate-950/60 p-3 text-xs text-slate-300">
+              Execução #{execution.$id} • Status {execution.status}
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-slate-100">Zonas DNS</h3>
+            <span className={online ? 'text-xs text-emerald-300' : 'text-xs text-amber-300'}>
+              {online ? 'Online' : 'Aguardando verificação'}
+            </span>
+          </div>
+          <ul className="mt-3 divide-y divide-slate-800 text-sm text-slate-200">
+            {zones.length === 0 ? <li className="py-3 text-slate-500">Nenhuma zona carregada.</li> : null}
+            {zones.map((zone) => (
+              <li key={zone.id} className="flex items-center justify-between py-3">
+                <div>
+                  <p className="font-semibold">{zone.name}</p>
+                  <p className="text-xs text-slate-400">ID: {zone.id}</p>
+                </div>
+                <span className={badgeClass(zone.status)}>{zone.status}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5">
+          <h3 className="text-lg font-semibold text-slate-100">Workers</h3>
+          <ul className="mt-3 divide-y divide-slate-800 text-sm text-slate-200">
+            {workers.length === 0 ? <li className="py-3 text-slate-500">Nenhum worker listado.</li> : null}
+            {workers.map((worker) => (
+              <li key={worker.name} className="flex items-center justify-between py-3">
+                <div>
+                  <p className="font-semibold">{worker.name}</p>
+                  <p className="text-xs text-slate-400">{worker.modifiedOn}</p>
+                </div>
+                <span className={worker.active ? 'text-xs text-emerald-300' : 'text-xs text-slate-400'}>
+                  {worker.active ? 'Ativo' : 'Inativo'}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      {modalOpen ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
+          <div className="w-full max-w-md rounded-xl border border-slate-800 bg-slate-950 p-6 shadow-2xl shadow-slate-900">
+            <h4 className="text-lg font-semibold text-slate-100">Adicionar Nova Zona</h4>
+            <p className="mt-1 text-sm text-slate-400">Inclua uma entrada manual enquanto a função sincroniza zonas.</p>
+            <input
+              type="text"
+              value={newZone}
+              onChange={(e) => setNewZone(e.target.value)}
+              placeholder="example.com"
+              className="mt-3 w-full rounded-lg border border-slate-800 bg-slate-900 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
+            />
+            <div className="mt-4 flex items-center justify-end gap-3">
+              <button
+                type="button"
+                onClick={() => setModalOpen(false)}
+                className="rounded-lg px-4 py-2 text-sm text-slate-300 hover:text-slate-50"
+              >
+                Cancelar
+              </button>
+              <button
+                type="button"
+                onClick={handleAddZone}
+                className="rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-900 hover:bg-cyan-400"
+              >
+                Adicionar
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

dashboard/src/pages/Github.tsx

@@ -0,0 +1,118 @@
+import { Execution } from 'appwrite'
+import { useState } from 'react'
+import { functions } from '../lib/appwrite'
+
+const columns = ['Nome', 'Linguagem', 'Stars', 'Último Commit']
+
+type Repo = {
+  id: string | number
+  name: string
+  language?: string | null
+  stargazers_count?: number
+  stars?: number
+  pushed_at?: string
+  last_commit?: string
+}
+
+export default function Github() {
+  const [accountId, setAccountId] = useState('')
+  const [execution, setExecution] = useState<Execution | null>(null)
+  const [repos, setRepos] = useState<Repo[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSync = async () => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      const executionResult = await functions.createExecution(
+        'sync-github',
+        JSON.stringify({ accountId }),
+      )
+      setExecution(executionResult)
+
+      const payload = executionResult.responseBody ? JSON.parse(executionResult.responseBody) : {}
+      const normalizedRepos: Repo[] = (payload.repositories as Repo[] | undefined) || []
+      setRepos(normalizedRepos)
+    } catch (err) {
+      console.error(err)
+      setError('Não foi possível sincronizar com o GitHub.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <header className="rounded-xl border border-slate-800/70 bg-slate-900/60 p-5 shadow-lg shadow-slate-950/50">
+        <p className="text-xs uppercase tracking-[0.3em] text-cyan-300">GitHub</p>
+        <h1 className="mt-2 text-2xl font-semibold text-slate-50">Sincronizar Repositórios</h1>
+        <p className="mt-2 text-sm text-slate-400">
+          Execute a função <span className="text-cyan-300">sync-github</span> e visualize o catálogo retornado pelo Appwrite.
+        </p>
+
+        <div className="mt-4 flex flex-col gap-3 sm:flex-row">
+          <input
+            type="text"
+            value={accountId}
+            onChange={(e) => setAccountId(e.target.value)}
+            placeholder="ID do documento em cloud_accounts"
+            className="w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
+          />
+          <button
+            type="button"
+            onClick={handleSync}
+            disabled={loading || !accountId}
+            className="rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-900 transition hover:bg-cyan-400 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {loading ? 'Sincronizando...' : 'Executar função'}
+          </button>
+        </div>
+
+        {error ? <p className="mt-3 text-sm text-red-300">{error}</p> : null}
+        {execution ? (
+          <p className="mt-2 text-xs text-slate-400">Execução #{execution.$id} • Status: {execution.status}</p>
+        ) : null}
+      </header>
+
+      <div className="overflow-hidden rounded-xl border border-slate-800/70 bg-slate-950/60 shadow-inner shadow-slate-950/60">
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-200">
+            <thead className="bg-slate-900/80 text-xs uppercase tracking-[0.2em] text-cyan-200">
+              <tr>
+                {columns.map((column) => (
+                  <th key={column} className="px-4 py-3 font-semibold">
+                    {column}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-800">
+              {repos.length === 0 ? (
+                <tr>
+                  <td colSpan={4} className="px-4 py-6 text-center text-slate-500">
+                    Nenhum repositório sincronizado ainda.
+                  </td>
+                </tr>
+              ) : (
+                repos.map((repo) => (
+                  <tr key={repo.id} className="hover:bg-slate-900/50">
+                    <td className="px-4 py-3 font-semibold text-slate-100">{repo.name}</td>
+                    <td className="px-4 py-3 text-slate-300">{repo.language ?? 'N/A'}</td>
+                    <td className="px-4 py-3 text-slate-300">{repo.stars ?? repo.stargazers_count ?? 0}</td>
+                    <td className="px-4 py-3 text-slate-300">
+                      {repo.last_commit || repo.pushed_at
+                        ? new Date(repo.last_commit || (repo.pushed_at as string)).toLocaleString()
+                        : 'Sem dados'}
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}

dashboard/src/pages/Home.tsx

@@ -0,0 +1,100 @@
+import { Query } from 'appwrite'
+import { useEffect, useState } from 'react'
+import { appwriteDatabaseId, databases } from '../lib/appwrite'
+
+const statCard = (label: string, value: string | number, helper?: string) => (
+  <div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-4 shadow-inner shadow-slate-950/60">
+    <p className="text-xs uppercase tracking-[0.25em] text-cyan-300">{label}</p>
+    <p className="mt-2 text-3xl font-semibold text-slate-50">{value}</p>
+    {helper ? <p className="mt-1 text-xs text-slate-400">{helper}</p> : null}
+  </div>
+)
+
+export default function Home() {
+  const [projectsTotal, setProjectsTotal] = useState<number | null>(null)
+  const [activeWorkers, setActiveWorkers] = useState<number | null>(null)
+  const [lastDeployment, setLastDeployment] = useState<string>('---')
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchMetrics = async () => {
+      if (!appwriteDatabaseId) {
+        setError('Defina VITE_APPWRITE_DATABASE_ID para consultar métricas.')
+        return
+      }
+
+      try {
+        const [projects, cloudAccounts, deployments] = await Promise.all([
+          databases.listDocuments(appwriteDatabaseId, 'projects', [Query.limit(1)]),
+          databases.listDocuments(appwriteDatabaseId, 'cloud_accounts', [Query.limit(1)]),
+          databases.listDocuments(appwriteDatabaseId, 'audit_logs', [Query.orderDesc('timestamp'), Query.limit(1)]),
+        ])
+
+        setProjectsTotal(projects.total)
+        setActiveWorkers(cloudAccounts.total)
+        const lastTimestamp = deployments.documents[0]?.timestamp as string | undefined
+        setLastDeployment(lastTimestamp ? new Date(lastTimestamp).toLocaleString() : 'Sem deploys registrados')
+      } catch (err) {
+        console.error(err)
+        setError('Não foi possível carregar as métricas do painel.')
+      }
+    }
+
+    fetchMetrics()
+  }, [])
+
+  return (
+    <div className="space-y-6">
+      <div className="rounded-xl border border-slate-800/80 bg-slate-900/60 p-6 shadow-lg shadow-slate-950/50">
+        <p className="text-xs uppercase tracking-[0.3em] text-cyan-300">Overview</p>
+        <h1 className="mt-2 text-2xl font-semibold text-slate-50">Saúde do Projeto</h1>
+        <p className="mt-2 text-sm text-slate-400">
+          Consolidação das integrações com GitHub, Cloudflare e Appwrite para acompanhar deploys e automações.
+        </p>
+      </div>
+
+      {error ? <div className="rounded-lg border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-200">{error}</div> : null}
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {statCard('Total Repos', projectsTotal ?? '---', 'Quantidade de projetos cadastrados no Appwrite')}
+        {statCard('Active Workers', activeWorkers ?? '---', 'Workers monitorados pelo Cloudflare')}
+        {statCard('Last Deployment', lastDeployment)}
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5">
+          <h3 className="text-lg font-semibold text-slate-100">Deploys recentes</h3>
+          <p className="mt-2 text-sm text-slate-400">Acompanhe as últimas execuções registradas no Appwrite.</p>
+          <ul className="mt-4 space-y-3 text-sm text-slate-300">
+            <li className="flex items-center justify-between rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">
+              <span>Build & Deploy</span>
+              <span className="text-xs text-emerald-300">{lastDeployment}</span>
+            </li>
+            <li className="flex items-center justify-between rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">
+              <span>Sync GitHub</span>
+              <span className="text-xs text-emerald-300">{projectsTotal ?? '---'} repositórios</span>
+            </li>
+          </ul>
+        </div>
+
+        <div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5">
+          <h3 className="text-lg font-semibold text-slate-100">Status de integrações</h3>
+          <div className="mt-4 space-y-3 text-sm text-slate-300">
+            <div className="flex items-center justify-between rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">
+              <span>Appwrite Database</span>
+              <span className="text-xs text-cyan-300">{appwriteDatabaseId ? 'Configurado' : 'Pendente'}</span>
+            </div>
+            <div className="flex items-center justify-between rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">
+              <span>Cloud Accounts</span>
+              <span className="text-xs text-cyan-300">{activeWorkers ?? '---'} credenciais</span>
+            </div>
+            <div className="flex items-center justify-between rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">
+              <span>Realtime Logs</span>
+              <span className="text-xs text-emerald-300">Monitorando audit_logs</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

dashboard/src/pages/Login.tsx

@@ -0,0 +1,85 @@
+import { FormEvent, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { useAuth } from '../contexts/Auth'
+
+export default function Login() {
+  const { login } = useAuth()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault()
+    setError(null)
+    setLoading(true)
+
+    try {
+      await login(email, password)
+      const redirectTo = (location.state as { from?: { pathname?: string } })?.from?.pathname || '/'
+      navigate(redirectTo, { replace: true })
+    } catch (err) {
+      setError('Falha ao autenticar. Confira as credenciais e tente novamente.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="relative min-h-screen overflow-hidden bg-slate-950">
+      <div
+        className="pointer-events-none absolute inset-0 opacity-60"
+        style={{
+          backgroundImage:
+            'linear-gradient(rgba(59,130,246,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(14,165,233,0.08) 1px, transparent 1px)',
+          backgroundSize: '28px 28px',
+          backgroundPosition: 'center',
+        }}
+      />
+
+      <div className="relative z-10 flex min-h-screen items-center justify-center px-4">
+        <div className="w-full max-w-md rounded-2xl border border-slate-800/80 bg-slate-900/80 p-8 shadow-2xl shadow-cyan-900/40 backdrop-blur">
+          <p className="text-xs uppercase tracking-[0.3em] text-cyan-300">Appwrite</p>
+          <h1 className="mt-2 text-2xl font-semibold text-slate-50">Acesse o Dashboard</h1>
+          <p className="mt-2 text-sm text-slate-400">Autentique-se para visualizar repositórios, zonas Cloudflare e logs.</p>
+
+          <form className="mt-6 space-y-4" onSubmit={handleSubmit}>
+            <div>
+              <label className="text-sm text-slate-200">E-mail</label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
+              />
+            </div>
+
+            <div>
+              <label className="text-sm text-slate-200">Senha</label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
+              />
+            </div>
+
+            {error ? <p className="text-sm text-red-300">{error}</p> : null}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-900 transition hover:bg-cyan-400 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {loading ? 'Entrando...' : 'Entrar'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

dashboard/src/pages/Settings.tsx

@@ -0,0 +1,16 @@
+export default function Settings() {
+  return (
+    <div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-6 shadow-inner shadow-slate-950/60">
+      <p className="text-xs uppercase tracking-[0.3em] text-cyan-300">Settings</p>
+      <h1 className="mt-2 text-2xl font-semibold text-slate-50">Preferências e Acesso</h1>
+      <p className="mt-2 text-sm text-slate-400">
+        Ajustes finos para notificações, tokens e comportamento das integrações. Expanda conforme novas features forem criadas.
+      </p>
+      <ul className="mt-4 space-y-3 text-sm text-slate-200">
+        <li className="rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">Dark theme ativo</li>
+        <li className="rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">Logs em tempo real habilitados</li>
+        <li className="rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">Sessão Appwrite protegida</li>
+      </ul>
+    </div>
+  )
+}

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "core",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev:dashboard": "cd dashboard && npm run dev",
+    "dev:landing": "cd landing && deno task start",
+    "dev:web": "npm-run-all -p dev:dashboard dev:landing",
+    "lint:dashboard": "cd dashboard && npm run lint"
+  },
+  "devDependencies": {
+    "npm-run-all": "^4.1.5"
+  }
+}