VPS 4 Builder
216 lines
7.1 KiB
HTML
216 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt-BR">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Gerenciamento de Clínicas - RF Dental</title>
|
||
|
||
<!-- Fontes -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||
|
||
<!-- Ícones -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
||
<!-- Estilos -->
|
||
<link rel="stylesheet" href="admin-clinics.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-header">
|
||
<h2>🦷 DentalSys</h2>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<a href="/" class="nav-item">
|
||
<span class="icon">🖼️</span> Pacientes
|
||
</a>
|
||
<a href="/?action=new-patient" class="nav-item">
|
||
<span class="icon">➕</span> Novo Paciente
|
||
</a>
|
||
<a href="/clients" class="nav-item">
|
||
<span class="icon">🖥️</span> Dispositivos
|
||
</a>
|
||
<a href="/?action=settings" class="nav-item">
|
||
<span class="icon">⚙️</span> Configurações
|
||
</a>
|
||
<a href="/?action=plugins" class="nav-item">
|
||
<span class="icon">🔌</span> Plugins / Wasabi
|
||
</a>
|
||
<a href="/?action=sync" class="nav-item">
|
||
<span class="icon">🔄</span> Sincronização
|
||
</a>
|
||
<a href="/reset" class="nav-item text-danger">
|
||
<span class="icon">⚠️</span> Zerar Sistema
|
||
</a>
|
||
<a href="/admin-clinics" class="nav-item active">
|
||
<span class="icon">🏢</span> Gerenciar Clínicas
|
||
</a>
|
||
<a href="#" class="nav-item" onclick="logout(); return false;">
|
||
<span class="icon">🚪</span> Sair
|
||
</a>
|
||
</nav>
|
||
<div class="sidebar-footer">
|
||
<div class="sidebar-brand" style="color: var(--dark); opacity: 0.8; font-weight: 500; text-align: center; font-size: 14px;">
|
||
<span>🦷 DentalSys</span>
|
||
<span class="version-badge">v2.0.3</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main-content">
|
||
|
||
<header class="top-header">
|
||
<div class="header-title">
|
||
<h1>Dispositivos e Clínicas</h1>
|
||
<p>Gerencie o acesso do Aplicativo Desktop aos computadores das clínicas.</p>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button id="addClinicBtn" class="primary-btn pulse-animation">
|
||
<i class="fa-solid fa-plus"></i> Novo Acesso
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="dashboard-stats">
|
||
<div class="stat-card glass-card">
|
||
<div class="stat-icon bg-blue">
|
||
<i class="fa-solid fa-desktop"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3>Total de Dispositivos</h3>
|
||
<p id="totalDevices">0</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card glass-card">
|
||
<div class="stat-icon bg-green">
|
||
<i class="fa-solid fa-check-circle"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3>Ativos</h3>
|
||
<p id="activeDevices">0</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card glass-card">
|
||
<div class="stat-icon bg-red">
|
||
<i class="fa-solid fa-ban"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3>Bloqueados</h3>
|
||
<p id="blockedDevices">0</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="data-section glass-card">
|
||
<div class="table-container">
|
||
<table class="modern-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Status</th>
|
||
<th>Clínica</th>
|
||
<th>Computador</th>
|
||
<th>Email de Acesso</th>
|
||
<th>Último IP</th>
|
||
<th>Token de Autenticação</th>
|
||
<th>Ações</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="clinicsTableBody">
|
||
<!-- Loading state -->
|
||
<tr>
|
||
<td colspan="7" class="loading-cell">
|
||
<div class="spinner"></div>
|
||
<p>Carregando dispositivos...</p>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- Modal Cadastro -->
|
||
<div id="clinicModal" class="modal-overlay">
|
||
<div class="modal-content glass-card">
|
||
<div class="modal-header">
|
||
<h2>Adicionar Novo Dispositivo</h2>
|
||
<button class="close-modal"><i class="fa-solid fa-xmark"></i></button>
|
||
</div>
|
||
|
||
<form id="clinicForm" class="modern-form">
|
||
<div class="form-group">
|
||
<label for="clinic_name">Nome da Clínica</label>
|
||
<div class="input-with-icon">
|
||
<i class="fa-solid fa-hospital"></i>
|
||
<input type="text" id="clinic_name" name="clinic_name" placeholder="Ex: Odonto Mais Centro" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="pc_name">Identificação do Computador</label>
|
||
<div class="input-with-icon">
|
||
<i class="fa-solid fa-desktop"></i>
|
||
<input type="text" id="pc_name" name="pc_name" placeholder="Ex: Recepção 01" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="email">E-mail de Login</label>
|
||
<div class="input-with-icon">
|
||
<i class="fa-solid fa-envelope"></i>
|
||
<input type="email" id="email" name="email" placeholder="recepcao@odontomais.com" required>
|
||
</div>
|
||
<small>O email que o usuário usará no aplicativo Desktop.</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="password">Senha de Acesso</label>
|
||
<div class="input-with-icon">
|
||
<i class="fa-solid fa-lock"></i>
|
||
<input type="password" id="password" name="password" placeholder="Mínimo 6 caracteres" required minlength="6">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="secondary-btn close-modal">Cancelar</button>
|
||
<button type="submit" class="primary-btn" id="submitBtn">
|
||
<i class="fa-solid fa-check"></i> Salvar e Gerar Token
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal Token Gerado -->
|
||
<div id="tokenModal" class="modal-overlay">
|
||
<div class="modal-content glass-card success-modal">
|
||
<div class="success-icon pulse-animation">
|
||
<i class="fa-solid fa-check-circle"></i>
|
||
</div>
|
||
<h2>Dispositivo Cadastrado!</h2>
|
||
<p>Copie o token abaixo e cole-o no Aplicativo Desktop junto com o email e senha para liberar o envio de raios-x.</p>
|
||
|
||
<div class="token-container">
|
||
<code id="generatedToken">8f8a3b20-1d8c-4b3f-9e7b...</code>
|
||
<button id="copyTokenBtn" class="icon-btn" title="Copiar Token">
|
||
<i class="fa-regular fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<button class="primary-btn close-token-modal" style="width: 100%; margin-top: 20px;">
|
||
Entendido
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toast" class="toast">Notificação</div>
|
||
|
||
<script src="admin-clinics.js"></script>
|
||
</body>
|
||
</html>
|