| | <!DOCTYPE html> |
| | <html lang="pt-br"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>PULSEDESK - Sistema de Chamados</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| | <style> |
| | .tech-font { |
| | font-family: 'Orbitron', sans-serif; |
| | } |
| | .pulse-logo { |
| | position: relative; |
| | width: 60px; |
| | height: 60px; |
| | border-radius: 50%; |
| | background-color: #ef4444; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | animation: pulse 2s infinite; |
| | } |
| | @keyframes pulse { |
| | 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } |
| | 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } |
| | 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } |
| | } |
| | .computer-icon { |
| | color: white; |
| | font-size: 30px; |
| | position: relative; |
| | } |
| | .computer-icon::after { |
| | content: "●"; |
| | color: #ef4444; |
| | font-size: 12px; |
| | position: absolute; |
| | top: -5px; |
| | right: -5px; |
| | animation: heartbeat 1.5s infinite; |
| | } |
| | @keyframes heartbeat { |
| | 0% { transform: scale(1); } |
| | 25% { transform: scale(1.3); } |
| | 50% { transform: scale(1); } |
| | 75% { transform: scale(1.3); } |
| | 100% { transform: scale(1); } |
| | } |
| | .sidebar { |
| | transition: all 0.3s; |
| | } |
| | .sidebar-item:hover { |
| | background-color: #1e293b; |
| | } |
| | .modal { |
| | transition: all 0.3s; |
| | } |
| | .chart-container { |
| | position: relative; |
| | height: 300px; |
| | width: 300px; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-900 text-gray-200 min-h-screen"> |
| | <div class="flex h-screen overflow-hidden"> |
| | |
| | <div class="sidebar w-64 bg-gray-800 flex flex-col"> |
| | <div class="p-4 flex items-center space-x-3"> |
| | <div class="pulse-logo"> |
| | <i class="computer-icon fas fa-desktop"></i> |
| | </div> |
| | <span class="tech-font text-orange-500 text-xl font-bold">PULSEDESK</span> |
| | </div> |
| | <div class="flex-1 overflow-y-auto"> |
| | <nav class="px-2 space-y-1"> |
| | <a href="#" onclick="showDashboard()" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md bg-gray-900 text-white"> |
| | <i class="fas fa-tachometer-alt mr-3"></i> |
| | Dashboard |
| | </a> |
| | <a href="#" onclick="openModal('tickets-modal')" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700"> |
| | <i class="fas fa-ticket-alt mr-3"></i> |
| | Chamados |
| | </a> |
| | <a href="#" onclick="openModal('clients-modal')" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700"> |
| | <i class="fas fa-users mr-3"></i> |
| | Clientes |
| | </a> |
| | <a href="#" onclick="openModal('reports-modal')" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700"> |
| | <i class="fas fa-chart-pie mr-3"></i> |
| | Relatórios |
| | </a> |
| | <a href="#" onclick="openModal('settings-modal')" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700"> |
| | <i class="fas fa-cog mr-3"></i> |
| | Configurações |
| | </a> |
| | </nav> |
| | </div> |
| | <div class="p-4 border-t border-gray-700"> |
| | <div class="text-xs text-gray-400"> |
| | <p>PULSEDESK v1.0</p> |
| | <p>© 2023 Todos os direitos reservados</p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="flex-1 overflow-y-auto"> |
| | <div id="dashboard-content" class="p-6"> |
| | <h1 class="text-2xl font-bold mb-6">Dashboard</h1> |
| | |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
| | <div class="bg-gray-800 rounded-lg p-6 shadow"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <p class="text-gray-400">Chamados Abertos</p> |
| | <h3 class="text-3xl font-bold text-red-500">24</h3> |
| | </div> |
| | <div class="bg-red-500/20 p-3 rounded-full"> |
| | <i class="fas fa-exclamation-circle text-red-500 text-xl"></i> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-800 rounded-lg p-6 shadow"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <p class="text-gray-400">Chamados em Andamento</p> |
| | <h3 class="text-3xl font-bold text-yellow-500">12</h3> |
| | </div> |
| | <div class="bg-yellow-500/20 p-3 rounded-full"> |
| | <i class="fas fa-spinner text-yellow-500 text-xl"></i> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-800 rounded-lg p-6 shadow"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <p class="text-gray-400">Chamados em Pausa</p> |
| | <h3 class="text-3xl font-bold text-blue-500">8</h3> |
| | </div> |
| | <div class="bg-blue-500/20 p-3 rounded-full"> |
| | <i class="fas fa-pause text-blue-500 text-xl"></i> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-800 rounded-lg p-6 shadow"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <p class="text-gray-400">Chamados Finalizados</p> |
| | <h3 class="text-3xl font-bold text-green-500">42</h3> |
| | </div> |
| | <div class="bg-green-500/20 p-3 rounded-full"> |
| | <i class="fas fa-check-circle text-green-500 text-xl"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-gray-800 rounded-lg p-6 shadow mb-8"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <h2 class="text-xl font-bold">Chamados Recentes</h2> |
| | <button onclick="openModal('tickets-modal')" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm"> |
| | Novo Chamado |
| | </button> |
| | </div> |
| | <div class="overflow-x-auto"> |
| | <table class="min-w-full divide-y divide-gray-700"> |
| | <thead> |
| | <tr> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">ID</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Título</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Cliente</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Prioridade</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Data</th> |
| | </tr> |
| | </thead> |
| | <tbody class="divide-y divide-gray-700"> |
| | <tr class="hover:bg-gray-700"> |
| | <td class="px-6 py-4 whitespace-nowrap">#1001</td> |
| | <td class="px-6 py-4 whitespace-nowrap">Problema com conexão</td> |
| | <td class="px-6 py-4 whitespace-nowrap">Empresa ABC</td> |
| | <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-red-500/20 text-red-500">Aberto</span></td> |
| | <td class="px |
| | </html> |
