| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Dashboard Financeiro</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .sidebar { |
| transition: all 0.3s; |
| } |
| .sidebar.collapsed { |
| width: 70px; |
| } |
| .sidebar.collapsed .sidebar-text { |
| display: none; |
| } |
| .sidebar.collapsed .logo-text { |
| display: none; |
| } |
| .sidebar.collapsed .nav-item { |
| justify-content: center; |
| } |
| .content { |
| transition: all 0.3s; |
| } |
| .content.expanded { |
| margin-left: 70px; |
| } |
| .tab-content { |
| display: none; |
| } |
| .tab-content.active { |
| display: block; |
| } |
| .chart-container { |
| position: relative; |
| height: 300px; |
| width: 100%; |
| } |
| @media (max-width: 768px) { |
| .sidebar { |
| position: absolute; |
| z-index: 1000; |
| height: 100vh; |
| } |
| .sidebar.collapsed { |
| transform: translateX(-100%); |
| } |
| .content.expanded { |
| margin-left: 0; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar bg-indigo-800 text-white w-64 flex flex-col"> |
| <div class="p-4 flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center"> |
| <i class="fas fa-chart-line text-indigo-800 text-xl"></i> |
| </div> |
| <span class="logo-text ml-3 text-xl font-bold">FinControl</span> |
| </div> |
| <div class="mt-8 flex-1"> |
| <nav> |
| <div class="nav-item px-6 py-3 flex items-center cursor-pointer bg-indigo-900"> |
| <i class="fas fa-tachometer-alt"></i> |
| <span class="sidebar-text ml-3">Dashboard</span> |
| </div> |
| <div class="nav-item px-6 py-3 flex items-center cursor-pointer hover:bg-indigo-700"> |
| <i class="fas fa-handshake"></i> |
| <span class="sidebar-text ml-3">Serviços</span> |
| </div> |
| <div class="nav-item px-6 py-3 flex items-center cursor-pointer hover:bg-indigo-700"> |
| <i class="fas fa-money-bill-wave"></i> |
| <span class="sidebar-text ml-3">Custos</span> |
| </div> |
| <div class="nav-item px-6 py-3 flex items-center cursor-pointer hover:bg-indigo-700"> |
| <i class="fas fa-boxes"></i> |
| <span class="sidebar-text ml-3">Produtos</span> |
| </div> |
| <div class="nav-item px-6 py-3 flex items-center cursor-pointer hover:bg-indigo-700"> |
| <i class="fas fa-cog"></i> |
| <span class="sidebar-text ml-3">Configurações</span> |
| </div> |
| </nav> |
| </div> |
| <div class="p-4 border-t border-indigo-700"> |
| <div class="flex items-center cursor-pointer" id="toggle-sidebar"> |
| <i class="fas fa-chevron-left"></i> |
| <span class="sidebar-text ml-3">Recolher</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="content flex-1 overflow-auto"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="px-6 py-4 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <button class="mr-4 text-gray-500 md:hidden" id="mobile-menu-button"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <h1 class="text-xl font-semibold text-gray-800">Dashboard</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <i class="fas fa-bell text-gray-500 cursor-pointer"></i> |
| <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-user text-indigo-600"></i> |
| </div> |
| <span class="ml-2 text-sm font-medium">Admin</span> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="p-6"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-gray-500">Receitas Totais</p> |
| <h3 class="text-2xl font-bold text-green-600">R$ 25,840</h3> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-arrow-up text-green-600"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-sm text-gray-500">+12% em relação ao mês passado</p> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-gray-500">Despesas Totais</p> |
| <h3 class="text-2xl font-bold text-red-600">R$ 8,420</h3> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center"> |
| <i class="fas fa-arrow-down text-red-600"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-sm text-gray-500">+5% em relação ao mês passado</p> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-gray-500">Saldo Líquido</p> |
| <h3 class="text-2xl font-bold text-indigo-600">R$ 17,420</h3> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-dollar-sign text-indigo-600"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-sm text-gray-500">+15% em relação ao mês passado</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <h3 class="text-lg font-semibold mb-4">Fluxo Mensal</h3> |
| <div class="chart-container"> |
| <canvas id="monthlyChart"></canvas> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <h3 class="text-lg font-semibold mb-4">Distribuição de Receitas</h3> |
| <div class="chart-container"> |
| <canvas id="revenueChart"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="text-lg font-semibold">Transações Recentes</h3> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descrição</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Categoria</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap">15/06/2023</td> |
| <td class="px-6 py-4 whitespace-nowrap">Cliente A - Mensalidade</td> |
| <td class="px-6 py-4 whitespace-nowrap">Serviços</td> |
| <td class="px-6 py-4 whitespace-nowrap text-green-600 font-medium">R$ 1,200</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Pago</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap">14/06/2023</td> |
| <td class="px-6 py-4 whitespace-nowrap">Aluguel</td> |
| <td class="px-6 py-4 whitespace-nowrap">Custos Fixos</td> |
| <td class="px-6 py-4 whitespace-nowrap text-red-600 font-medium">R$ 2,500</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Pago</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap">12/06/2023</td> |
| <td class="px-6 py-4 whitespace-nowrap">Venda Produto X</td> |
| <td class="px-6 py-4 whitespace-nowrap">Produtos</td> |
| <td class="px-6 py-4 whitespace-nowrap text-green-600 font-medium">R$ 350</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Pago</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap">10/06/2023</td> |
| <td class="px-6 py-4 whitespace-nowrap">Material de Escritório</td> |
| <td class="px-6 py-4 whitespace-nowrap">Suprimentos</td> |
| <td class="px-6 py-4 whitespace-nowrap text-red-600 font-medium">R$ 180</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Pago</span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="px-6 py-4 border-t border-gray-200 flex justify-end"> |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">Ver todas</button> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const toggleSidebar = document.getElementById('toggle-sidebar'); |
| const sidebar = document.querySelector('.sidebar'); |
| const content = document.querySelector('.content'); |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| |
| toggleSidebar.addEventListener('click', () => { |
| sidebar.classList.toggle('collapsed'); |
| content.classList.toggle('expanded'); |
| |
| |
| const icon = toggleSidebar.querySelector('i'); |
| const text = toggleSidebar.querySelector('span'); |
| |
| if (sidebar.classList.contains('collapsed')) { |
| icon.classList.remove('fa-chevron-left'); |
| icon.classList.add('fa-chevron-right'); |
| text.textContent = 'Expandir'; |
| } else { |
| icon.classList.remove('fa-chevron-right'); |
| icon.classList.add('fa-chevron-left'); |
| text.textContent = 'Recolher'; |
| } |
| }); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| sidebar.classList.toggle('collapsed'); |
| }); |
| |
| |
| const monthlyCtx = document.getElementById('monthlyChart').getContext('2d'); |
| const monthlyChart = new Chart(monthlyCtx, { |
| type: 'bar', |
| data: { |
| labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'], |
| datasets: [ |
| { |
| label: 'Receitas', |
| data: [12000, 19000, 15000, 18000, 22000, 25840], |
| backgroundColor: 'rgba(16, 185, 129, 0.7)', |
| borderColor: 'rgba(16, 185, 129, 1)', |
| borderWidth: 1 |
| }, |
| { |
| label: 'Despesas', |
| data: [6500, 7000, 7500, 8000, 8200, 8420], |
| backgroundColor: 'rgba(239, 68, 68, 0.7)', |
| borderColor: 'rgba(239, 68, 68, 1)', |
| borderWidth: 1 |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true |
| } |
| } |
| } |
| }); |
| |
| const revenueCtx = document.getElementById('revenueChart').getContext('2d'); |
| const revenueChart = new Chart(revenueCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Serviços Mensais', 'Serviços Avulsos', 'Venda de Produtos', 'Outros'], |
| datasets: [{ |
| data: [65, 15, 15, 5], |
| backgroundColor: [ |
| 'rgba(99, 102, 241, 0.7)', |
| 'rgba(16, 185, 129, 0.7)', |
| 'rgba(245, 158, 11, 0.7)', |
| 'rgba(156, 163, 175, 0.7)' |
| ], |
| borderColor: [ |
| 'rgba(99, 102, 241, 1)', |
| 'rgba(16, 185, 129, 1)', |
| 'rgba(245, 158, 11, 1)', |
| 'rgba(156, 163, 175, 1)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'right', |
| } |
| } |
| } |
| }); |
| |
| |
| const navItems = document.querySelectorAll('.nav-item'); |
| |
| navItems.forEach((item, index) => { |
| item.addEventListener('click', () => { |
| |
| navItems.forEach(navItem => { |
| navItem.classList.remove('bg-indigo-900'); |
| navItem.classList.add('hover:bg-indigo-700'); |
| }); |
| |
| |
| item.classList.add('bg-indigo-900'); |
| item.classList.remove('hover:bg-indigo-700'); |
| |
| |
| |
| const title = document.querySelector('h1'); |
| const icons = ['fa-tachometer-alt', 'fa-handshake', 'fa-money-bill-wave', 'fa-boxes', 'fa-cog']; |
| const titles = ['Dashboard', 'Serviços', 'Custos', 'Produtos', 'Configurações']; |
| |
| title.textContent = titles[index]; |
| }); |
| }); |
| |
| |
| navItems[0].classList.add('bg-indigo-900'); |
| navItems[0].classList.remove('hover:bg-indigo-700'); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Robshoods/teste1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
