From 9e8d920b75725dc8535c00d4e6fd9efb498b08f0 Mon Sep 17 00:00:00 2001
From: VPS 4 Builder <deploy@clube67.com>
Date: Tue, 26 May 2026 20:26:57 +0200
Subject: [PATCH] feat: premium layout unification under RF Dental and
 sidebar/toolbar reorganization

---
 dental-server/auth/login.html           |   2 +-
 dental-server/package.json              |   2 +-
 dental-server/public/admin-clinics.html |  38 +++-----
 dental-server/public/clients.html       |  40 +++-----
 dental-server/public/index.html         |  84 +++++++++-------
 dental-server/public/style.css          | 122 ++++++++++++++++--------
 6 files changed, 157 insertions(+), 131 deletions(-)

diff --git a/dental-server/auth/login.html b/dental-server/auth/login.html
index 0549001..74d24db 100644
--- a/dental-server/auth/login.html
+++ b/dental-server/auth/login.html
@@ -201,7 +201,7 @@
             
             <button type="submit" class="btn" id="loginBtn">Entrar</button>
             <div style="text-align: center; margin-top: 20px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500;">
-                v2.0.3
+                v2.0.4
             </div>
         </form>
     </div>
diff --git a/dental-server/package.json b/dental-server/package.json
index 32fe5e5..d69c309 100644
--- a/dental-server/package.json
+++ b/dental-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dental-image-server",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Servidor Socket.IO para receber e processar imagens dentais com interface web",
   "main": "server.js",
   "scripts": {
diff --git a/dental-server/public/admin-clinics.html b/dental-server/public/admin-clinics.html
index 9b057ba..c167402 100644
--- a/dental-server/public/admin-clinics.html
+++ b/dental-server/public/admin-clinics.html
@@ -21,42 +21,28 @@
   <!-- Sidebar -->
   <aside class="sidebar">
     <div class="sidebar-header">
-      <h2>🦷 DentalSys</h2>
+      <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">
-        <span class="icon">🖼️</span> Pacientes
-      </a>
-      <a href="/?action=new-patient" class="nav-item">
-        <span class="icon">➕</span> Novo Paciente
+        <i class="fa-solid fa-chart-line"></i> Dashboard
       </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
+        <i class="fa-solid fa-network-wired"></i> Conexões
       </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
+        <i class="fa-solid fa-hospital"></i> Clínicas e Acessos
       </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>
+      <button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
+        <i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
+      </button>
     </div>
   </aside>
 
diff --git a/dental-server/public/clients.html b/dental-server/public/clients.html
index 64f9e32..12c816c 100644
--- a/dental-server/public/clients.html
+++ b/dental-server/public/clients.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Clientes Conectados - Dental Server</title>
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="/style.css">
     <style>
         .clients-container {
@@ -189,42 +189,28 @@
     <!-- Sidebar -->
     <aside class="sidebar">
         <div class="sidebar-header">
-            <h2>🦷 DentalSys</h2>
+            <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">
-                <span class="icon">🖼️</span> Pacientes
-            </a>
-            <a href="/?action=new-patient" class="nav-item">
-                <span class="icon">➕</span> Novo Paciente
+                <i class="fa-solid fa-chart-line"></i> Dashboard
             </a>
             <a href="/clients" class="nav-item active">
-                <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
+                <i class="fa-solid fa-network-wired"></i> Conexões
             </a>
             <a href="/admin-clinics" class="nav-item">
-                <span class="icon">🏢</span> Gerenciar Clínicas
-            </a>
-            <a href="#" class="nav-item" onclick="logout(); return false;">
-                <span class="icon">🚪</span> Sair
+                <i class="fa-solid fa-hospital"></i> Clínicas e Acessos
             </a>
         </nav>
+        
         <div class="sidebar-footer">
-            <div class="sidebar-brand">
-                <span>🦷 DentalSys</span>
-                <span class="version-badge">v2.0.3</span>
-            </div>
+            <button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
+                <i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
+            </button>
         </div>
     </aside>
 
diff --git a/dental-server/public/index.html b/dental-server/public/index.html
index a710f4b..32794c0 100644
--- a/dental-server/public/index.html
+++ b/dental-server/public/index.html
@@ -6,6 +6,7 @@
     <title>Gerenciador de Imagens Dentais</title>
     <meta name="description" content="Sistema de gerenciamento de imagens de raio-X dental">
     <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="/style.css">
 </head>
 <body>
@@ -13,51 +14,28 @@
         <!-- Sidebar -->
         <aside class="sidebar">
             <div class="sidebar-header">
-                <h2>🦷 DentalSys</h2>
+                <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 active">
-                    <span class="icon">🖼️</span> Pacientes
-                </a>
-                <a href="/?action=new-patient" class="nav-item">
-                    <span class="icon">➕</span> Novo Paciente
+                    <i class="fa-solid fa-chart-line"></i> Dashboard
                 </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
+                    <i class="fa-solid fa-network-wired"></i> Conexões
                 </a>
                 <a href="/admin-clinics" class="nav-item">
-                    <span class="icon">🏢</span> Gerenciar Clínicas
+                    <i class="fa-solid fa-hospital"></i> Clínicas e Acessos
                 </a>
-                <a href="#" class="nav-item" onclick="logout(); return false;">
-                    <span class="icon">🚪</span> Sair
-                </a>
-                <div class="nav-divider"></div>
-                <div class="sidebar-filter-wrapper">
-                    <select id="clientFilter" class="client-filter">
-                        <option value="">📋 Todos os Clientes</option>
-                    </select>
-                </div>
-                <button id="toggleDisabledBtn" class="btn btn-secondary btn-block" style="margin: 0 12px; width: calc(100% - 24px);">
-                    <span id="toggleText">Ocultas</span>
-                </button>
             </nav>
+            
             <div class="sidebar-footer">
-                <div class="sidebar-brand">
-                    <span>🦷 DentalSys</span>
-                    <span class="version-badge">v2.0.3</span>
-                </div>
+                <button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
+                    <i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
+                </button>
             </div>
         </aside>
 
@@ -96,9 +74,41 @@
 
         <!-- Scrollable content area -->
         <div class="content-scroll">
+            
+            <!-- Toolbar de Filtros e Ações Rápidas (Migradas da Sidebar) -->
+            <div class="toolbar glass-card" style="margin-bottom: 24px; padding: 16px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; box-shadow: var(--shadow-sm);">
+                <div class="toolbar-left" style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
+                    <!-- Filtro de Clientes -->
+                    <select id="clientFilter" class="client-filter" style="padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); font-size: 0.95rem; font-weight: 500; outline: none; min-width: 200px; cursor: pointer;">
+                        <option value="">📋 Todos os Clientes</option>
+                    </select>
+                    <!-- Mostrar Ocultas -->
+                    <button id="toggleDisabledBtn" class="btn btn-secondary" style="padding: 10px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary);">
+                        👁️ <span id="toggleText">Ocultas</span>
+                    </button>
+                </div>
+                
+                <div class="toolbar-right" style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
+                    <button class="btn btn-primary" onclick="openCreatePatientModal()" style="padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; background: var(--primary-color); color: white; border: none; cursor: pointer; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);">
+                        ➕ Novo Paciente
+                    </button>
+                    <button class="btn btn-secondary" onclick="openSettingsModal()" title="Configurações" style="padding: 10px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 6px;">
+                        ⚙️ Configurações
+                    </button>
+                    <button class="btn btn-secondary" onclick="openPluginsModal()" title="Plugins / Wasabi" style="padding: 10px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 6px;">
+                        🔌 Plugins / Wasabi
+                    </button>
+                    <button class="btn btn-secondary" onclick="openSyncModal()" title="Sincronização" style="padding: 10px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 6px;">
+                        🔄 Sincronização
+                    </button>
+                    <a href="/reset" class="btn btn-danger" title="Zerar Sistema" style="padding: 10px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;">
+                        ⚠️ Zerar Sistema
+                    </a>
+                </div>
+            </div>
 
-        <!-- Loading State -->
-        <div id="loadingState" class="loading">
+            <!-- Loading State -->
+            <div id="loadingState" class="loading">
             <div class="spinner"></div>
             <p>Carregando...</p>
         </div>
diff --git a/dental-server/public/style.css b/dental-server/public/style.css
index e259d01..c3b02cc 100644
--- a/dental-server/public/style.css
+++ b/dental-server/public/style.css
@@ -2,7 +2,7 @@
    DENTAL IMAGE MANAGER - PREMIUM STYLES (Mobile-First)
    ================================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');
 
 :root {
     /* Premium Color Palette */
@@ -43,7 +43,9 @@
     --radius: 12px;
     --radius-lg: 20px;
     --radius-full: 9999px;
-    --sidebar-width: 280px;
+    --sidebar-width: 260px;
+    
+    --font-heading: 'Outfit', sans-serif;
 }
 
 * {
@@ -67,7 +69,7 @@ body {
 }
 
 /* ================================================================
-   LAYOUT & SIDEBAR (Glassmorphism)
+   LAYOUT & SIDEBAR (Premium Glassmorphism RF Dental)
    ================================================================ */
 
 .app-container {
@@ -86,76 +88,118 @@ body {
     border-right: 1px solid var(--glass-border);
     display: flex;
     flex-direction: column;
-    flex-shrink: 0;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 24px 0;
     z-index: 100;
     box-shadow: var(--shadow-md);
+    flex-shrink: 0;
+    transition: all 0.3s ease;
 }
 
 .sidebar-header {
-    padding: 24px 20px;
-    background: transparent;
-    border-bottom: 1px solid var(--border-color);
+    padding: 0 24px 32px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border-bottom: none;
+}
+
+.logo-icon {
+    width: 40px;
+    height: 40px;
+    background: linear-gradient(135deg, #4cc9f0, var(--primary-color));
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: white;
 }
 
 .sidebar-header h2 {
-    margin: 0;
-    font-size: 1.4rem;
-    font-weight: 700;
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    display: flex;
-    align-items: center;
-    gap: 10px;
+    font-family: var(--font-heading);
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    color: var(--dark-color);
 }
 
 .sidebar-nav {
-    flex: 1;
-    padding: 20px 12px;
-    overflow-y: auto;
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 8px;
+    padding: 0 16px;
+    flex: 1;
+    overflow-y: auto;
 }
 
 .nav-item {
-    display: flex;
-    align-items: center;
     padding: 12px 16px;
-    color: var(--text-secondary);
+    border-radius: 10px;
+    color: var(--dark-color);
+    opacity: 0.7;
     text-decoration: none;
     font-weight: 500;
-    border-radius: var(--radius);
-    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
     gap: 12px;
+    transition: all 0.3s ease;
 }
 
-.nav-item .icon {
-    font-size: 1.2rem;
-    flex-shrink: 0;
-    transition: transform 0.2s ease;
+.nav-item i {
+    font-size: 18px;
+    width: 20px;
+    text-align: center;
 }
 
 .nav-item:hover {
-    background-color: var(--bg-surface);
+    background: var(--bg-surface);
     color: var(--primary-color);
-    box-shadow: var(--shadow-sm);
+    opacity: 1;
     transform: translateX(4px);
-}
-
-.nav-item:hover .icon {
-    transform: scale(1.1);
+    box-shadow: var(--shadow-sm);
 }
 
 .nav-item.active {
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+    color: white !important;
+    opacity: 1;
     box-shadow: var(--shadow);
     font-weight: 600;
 }
 
+.sidebar-footer {
+    padding: 0 24px;
+}
+
+.logout-btn {
+    width: 100%;
+    padding: 12px;
+    background: transparent;
+    border: 1px solid var(--glass-border);
+    color: #a0aec0;
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-family: 'Inter', sans-serif;
+    font-weight: 500;
+    transition: all 0.3s;
+}
+
+.logout-btn:hover {
+    background: rgba(239, 68, 68, 0.15);
+    color: var(--danger-color);
+    border-color: var(--danger-color);
+}
+
+.nav-divider {
+    height: 1px;
+    background: var(--border-color);
+    margin: 16px 0;
+}
+
 .nav-divider {
     height: 1px;
     background: var(--border-color);