VPS 4 Builder
202 lines
6.5 KiB
HTML
202 lines
6.5 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?v=2.0.1">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo-icon">
|
|
<i class="fa-solid fa-tooth"></i>
|
|
</div>
|
|
<h2>RF Dental</h2>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<a href="/" class="nav-item">
|
|
<i class="fa-solid fa-chart-line"></i> Dashboard
|
|
</a>
|
|
<a href="/clients" class="nav-item">
|
|
<i class="fa-solid fa-network-wired"></i> Conexões
|
|
</a>
|
|
<a href="/admin-clinics" class="nav-item active">
|
|
<i class="fa-solid fa-hospital"></i> Clínicas e Acessos
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<button id="logoutBtn" class="logout-btn">
|
|
<i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
|
|
</button>
|
|
</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?v=2.0.1"></script>
|
|
</body>
|
|
</html>
|