index.html•14.3 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Server - Dashboard Avançado</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- HEADER -->
<header class="header">
<div class="header-content">
<div class="header-title">
<div>
<h1>🚀 MCP Server Dashboard</h1>
<p class="subtitle">Gerenciamento Avançado de Tarefas, Calendário e Logs</p>
</div>
</div>
<div class="header-actions">
<div id="serverStatus" class="server-status">
<div class="status-dot status-offline"></div>
<span>Verificando...</span>
</div>
</div>
</div>
</header>
<!-- MAIN CONTAINER -->
<div class="container">
<!-- STATS GRID -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon">📋</div>
<div class="stat-label">Tarefas Ativas</div>
</div>
<div class="stat-value" id="taskCount">0</div>
<div class="stat-change" id="taskChange">Carregando...</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon">✅</div>
<div class="stat-label">Concluídas</div>
</div>
<div class="stat-value" id="completedCount">0</div>
<div class="stat-change" id="completedChange">Carregando...</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon">📅</div>
<div class="stat-label">Eventos</div>
</div>
<div class="stat-value" id="eventCount">0</div>
<div class="stat-change">Próximos 7 dias</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon">📝</div>
<div class="stat-label">Notas</div>
</div>
<div class="stat-value" id="noteCount">0</div>
<div class="stat-change">Total armazenadas</div>
</div>
</div>
<!-- TABS -->
<div class="tabs-container">
<button class="tab active" data-tab="dashboard">📊 Dashboard</button>
<button class="tab" data-tab="tasks">📋 Tarefas</button>
<button class="tab" data-tab="calendar">📅 Calendário</button>
<button class="tab" data-tab="notes">📝 Notas</button>
<button class="tab" data-tab="connections">📡 Conexões MCP</button>
<button class="tab" data-tab="logs">📊 Logs</button>
</div>
<!-- DASHBOARD PANEL -->
<div id="dashboard" class="content-panel active">
<div class="panel-header">
<h2 class="panel-title">📊 Dashboard Overview</h2>
</div>
<div style="display: grid; gap: 24px;">
<div>
<h3 style="margin-bottom: 16px; color: var(--text-secondary);">Tarefas Recentes</h3>
<div id="dashboardTasks"></div>
</div>
<div>
<h3 style="margin-bottom: 16px; color: var(--text-secondary);">Próximos Eventos</h3>
<div id="dashboardEvents"></div>
</div>
</div>
</div>
<!-- TASKS PANEL -->
<div id="tasks" class="content-panel">
<div class="panel-header">
<h2 class="panel-title">📋 Gerenciar Tarefas</h2>
<div class="panel-actions">
<button class="btn btn-secondary btn-sm" onclick="loadTasks()">🔄 Atualizar</button>
<button class="btn btn-primary btn-sm" onclick="showCreateTaskModal()">➕ Nova Tarefa</button>
</div>
</div>
<div class="filter-bar">
<button class="filter-btn active" data-filter="all">Todas</button>
<button class="filter-btn" data-filter="pending">Pendentes</button>
<button class="filter-btn" data-filter="completed">Concluídas</button>
<button class="filter-btn" data-filter="high">Alta Prioridade</button>
<div class="search-box">
<span class="search-icon">🔍</span>
<input type="text" class="search-input" id="taskSearch" placeholder="Buscar tarefas...">
</div>
</div>
<div id="taskList" class="task-grid"></div>
</div>
<!-- CALENDAR PANEL -->
<div id="calendar" class="content-panel">
<div class="panel-header">
<h2 class="panel-title">📅 Calendário</h2>
<div class="panel-actions">
<button class="btn btn-secondary btn-sm" onclick="loadEvents()">🔄 Atualizar</button>
<button class="btn btn-primary btn-sm" onclick="showCreateEventModal()">➕ Novo Evento</button>
</div>
</div>
<div id="eventList"></div>
</div>
<!-- NOTES PANEL -->
<div id="notes" class="content-panel">
<div class="panel-header">
<h2 class="panel-title">📝 Notas</h2>
<div class="panel-actions">
<button class="btn btn-secondary btn-sm" onclick="loadNotes()">🔄 Atualizar</button>
<button class="btn btn-primary btn-sm" onclick="showCreateNoteModal()">➕ Nova Nota</button>
</div>
</div>
<div id="noteList"></div>
</div>
<!-- CONNECTIONS PANEL -->
<div id="connections" class="content-panel">
<div class="panel-header">
<h2 class="panel-title">📡 Clientes MCP Conectados</h2>
<div class="panel-actions">
<button class="btn btn-secondary btn-sm" onclick="loadConnections()">🔄 Atualizar</button>
</div>
</div>
<div class="stats-grid" style="margin-bottom: 24px;">
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon">✅</div>
<div class="stat-label">Clientes Ativos</div>
</div>
<div class="stat-value" id="activeClientsCount">0</div>
<div class="stat-change">Online agora</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon">📊</div>
<div class="stat-label">Total de Requisições</div>
</div>
<div class="stat-value" id="totalRequestsCount">0</div>
<div class="stat-change">Todas as conexões</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon">🔧</div>
<div class="stat-label">Ferramentas Usadas</div>
</div>
<div class="stat-value" id="toolsUsedCount">0</div>
<div class="stat-change">Únicas</div>
</div>
</div>
<div id="connectionsList" class="connection-grid"></div>
</div>
<!-- LOGS PANEL -->
<div id="logs" class="content-panel">
<div class="panel-header">
<h2 class="panel-title">📊 Logs do Sistema</h2>
<div class="panel-actions">
<button class="btn btn-secondary btn-sm" onclick="loadLogs()">🔄 Atualizar</button>
<button class="btn btn-secondary btn-sm" onclick="clearLogFilters()">🔄 Limpar Filtros</button>
</div>
</div>
<div class="log-controls">
<button class="filter-btn active" data-log-filter="all">Todos</button>
<button class="filter-btn" data-log-filter="info">Info</button>
<button class="filter-btn" data-log-filter="success">Success</button>
<button class="filter-btn" data-log-filter="warning">Warning</button>
<button class="filter-btn" data-log-filter="error">Error</button>
<div class="search-box">
<span class="search-icon">🔍</span>
<input type="text" class="search-input" id="logSearch" placeholder="Buscar nos logs...">
</div>
</div>
<div id="logContainer" class="log-container"></div>
</div>
</div>
<!-- TOAST CONTAINER -->
<div class="toast-container" id="toastContainer"></div>
<!-- MODALS -->
<div id="modalOverlay" class="modal-overlay" onclick="closeModals()"></div>
<div id="taskModal" class="modal">
<div class="modal-header">
<h3 class="modal-title">➕ Nova Tarefa</h3>
<button class="modal-close" onclick="closeModals()">✕</button>
</div>
<form id="createTaskForm" class="modal-body">
<div class="form-group">
<label class="form-label required">Título</label>
<input type="text" class="form-input" id="taskTitle" required placeholder="Ex: Estudar Python">
</div>
<div class="form-group">
<label class="form-label">Descrição</label>
<textarea class="form-textarea" id="taskDescription" placeholder="Detalhes da tarefa..."></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Prioridade</label>
<select class="form-select" id="taskPriority">
<option value="low">🟢 Baixa</option>
<option value="medium" selected>🟡 Média</option>
<option value="high">🔴 Alta</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Data Limite</label>
<input type="date" class="form-input" id="taskDueDate">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeModals()">Cancelar</button>
<button type="submit" class="btn btn-primary">Criar Tarefa</button>
</div>
</form>
</div>
<div id="eventModal" class="modal">
<div class="modal-header">
<h3 class="modal-title">📅 Novo Evento</h3>
<button class="modal-close" onclick="closeModals()">✕</button>
</div>
<form id="createEventForm" class="modal-body">
<div class="form-group">
<label class="form-label required">Título</label>
<input type="text" class="form-input" id="eventTitle" required placeholder="Ex: Reunião de equipe">
</div>
<div class="form-group">
<label class="form-label">Descrição</label>
<textarea class="form-textarea" id="eventDescription" placeholder="Detalhes do evento..."></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label required">Data/Hora Início</label>
<input type="datetime-local" class="form-input" id="eventStartTime" required>
</div>
<div class="form-group">
<label class="form-label required">Data/Hora Fim</label>
<input type="datetime-local" class="form-input" id="eventEndTime" required>
</div>
</div>
<div class="form-group">
<label class="form-label">Local</label>
<input type="text" class="form-input" id="eventLocation" placeholder="Ex: Sala de reuniões">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeModals()">Cancelar</button>
<button type="submit" class="btn btn-primary">Criar Evento</button>
</div>
</form>
</div>
<div id="noteModal" class="modal">
<div class="modal-header">
<h3 class="modal-title">📝 Nova Nota</h3>
<button class="modal-close" onclick="closeModals()">✕</button>
</div>
<form id="createNoteForm" class="modal-body">
<div class="form-group">
<label class="form-label required">Título</label>
<input type="text" class="form-input" id="noteTitle" required placeholder="Ex: Ideias para o projeto">
</div>
<div class="form-group">
<label class="form-label required">Conteúdo</label>
<textarea class="form-textarea" id="noteContent" required placeholder="Escreva sua nota aqui..." style="min-height: 200px;"></textarea>
</div>
<div class="form-group">
<label class="form-label">Tags (separadas por vírgula)</label>
<input type="text" class="form-input" id="noteTags" placeholder="Ex: trabalho, importante, ideias">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeModals()">Cancelar</button>
<button type="submit" class="btn btn-primary">Criar Nota</button>
</div>
</form>
</div>
<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>
</body>
</html>