| | <!DOCTYPE html> |
| | <html lang="en" class="h-full bg-gray-50"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Dashboard Financeiro - Fluxo de Caixa</title> |
| | <link rel="stylesheet" href="style.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script src="components/navbar.js"></script> |
| | <script> |
| | tailwind.config = { |
| | theme: { |
| | extend: { |
| | colors: { |
| | primary: { |
| | 50: '#f0f9ff', |
| | 100: '#e0f2fe', |
| | 200: '#b0e0ff', |
| | 300: '#7ec8ff', |
| | 400: '#4ab0ff', |
| | 500: '#0088ff', |
| | 600: '#0066cc', |
| | 700: '#004999', |
| | 800: '#003366', |
| | 900: '#001a33', |
| | }, |
| | secondary: { |
| | 50: '#f5f7fa', |
| | 100: '#e4e9f2', |
| | 200: '#c5d0e5', |
| | 300: '#9fb8d9', |
| | 400: '#7a9fcc', |
| | 500: '#4d82bf', |
| | 600: '#3a66a3', |
| | 700: '#2c4d87', |
| | 800: '#1e366b', |
| | 900: '#10204f', |
| | } |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | </head> |
| | <body class="h-full"> |
| | <custom-navbar></custom-navbar> |
| | |
| | <main class="container mx-auto px-4 py-8"> |
| | <div class="flex flex-col lg:flex-row gap-8"> |
| | |
| | <div class="w-full lg:w-2/3"> |
| | <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h1 class="text-2xl font-bold text-primary-800">Evolução Financeira - DRE (Jan-Out/2025)</h1> |
| | <div class="flex items-center space-x-2"> |
| | <button class="px-3 py-1 bg-primary-100 text-primary-700 rounded-lg text-sm">Exportar PDF</button> |
| | <button class="p-2 rounded-lg hover:bg-gray-100"> |
| | <i data-feather="more-vertical"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="h-80"> |
| | <canvas id="financialChart"></canvas> |
| | </div> |
| | |
| | <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"> |
| | <div class="bg-blue-50 p-4 rounded-lg"> |
| | <p class="text-sm text-blue-700 mb-1">Receita Líquida</p> |
| | <p class="text-2xl font-bold text-blue-900">R$50.934</p> |
| | <p class="text-xs text-blue-600">+2,1% vs mês anterior</p> |
| | </div> |
| | <div class="bg-gray-50 p-4 rounded-lg"> |
| | <p class="text-sm text-gray-700 mb-1">Custos Operacionais</p> |
| | <p class="text-2xl font-bold text-gray-900">R$17.319</p> |
| | <p class="text-xs text-gray-600">-1,3% vs mês anterior</p> |
| | </div> |
| | <div class="bg-green-50 p-4 rounded-lg"> |
| | <p class="text-sm text-green-700 mb-1">Lucro Líquido</p> |
| | <p class="text-2xl font-bold text-green-900">R$2.284</p> |
| | <p class="text-xs text-green-600">+8,5% vs mês anterior</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="w-full lg:w-1/3"> |
| | <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-xl font-bold text-primary-800">Indicadores Chave</h2> |
| | <i data-feather="info" class="text-gray-400"></i> |
| | </div> |
| | |
| | <div class="space-y-4"> |
| | <div> |
| | <div class="flex justify-between text-sm mb-1"> |
| | <span class="text-gray-600">Margem Bruta</span> |
| | <span class="font-medium">66%</span> |
| | </div> |
| | <div class="w-full bg-gray-200 rounded-full h-2"> |
| | <div class="bg-blue-500 h-2 rounded-full" style="width: 66%"></div> |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <div class="flex justify-between text-sm mb-1"> |
| | <span class="text-gray-600">Despesas Operacionais</span> |
| | <span class="font-medium">61%</span> |
| | </div> |
| | <div class="w-full bg-gray-200 rounded-full h-2"> |
| | <div class="bg-yellow-500 h-2 rounded-full" style="width: 61%"></div> |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <div class="flex justify-between text-sm mb-1"> |
| | <span class="text-gray-600">Margem Líquida</span> |
| | <span class="font-medium">4.5%</span> |
| | </div> |
| | <div class="w-full bg-gray-200 rounded-full h-2"> |
| | <div class="bg-green-500 h-2 rounded-full" style="width: 4.5%"></div> |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <div class="flex justify-between text-sm mb-1"> |
| | <span class="text-gray-600">Margem de Contribuição</span> |
| | <span class="font-medium">57.3%</span> |
| | </div> |
| | <div class="w-full bg-gray-200 rounded-full h-2"> |
| | <div class="bg-purple-500 h-2 rounded-full" style="width: 57.3%"></div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white rounded-xl shadow-md p-6"> |
| | <h2 class="text-xl font-bold text-primary-800 mb-4">Resumo Executivo</h2> |
| | <div class="prose prose-sm text-gray-700"> |
| | <p>O fechamento de outubro mostrou manutenção da receita e leve melhoria no lucro líquido. A empresa consolida resultado positivo, ainda pressionado por altas despesas administrativas.</p> |
| | <p class="mt-3 font-medium">Pontos de Atenção:</p> |
| | <ul class="list-disc list-inside"> |
| | <li>Despesas administrativas representam 80% do total de despesas</li> |
| | <li>Margem operacional ainda abaixo do ideal (4,5% vs meta de 8%)</li> |
| | <li>Aumento de deduções e impostos sobre vendas em outubro</li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| |
|
| | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| | <script src="script.js"></script> |
| | <script> |
| | feather.replace(); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const ctx = document.getElementById('financialChart').getContext('2d'); |
| | const myChart = new Chart(ctx, { |
| | type: 'line', |
| | data: { |
| | labels: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out"], |
| | datasets: [ |
| | { |
| | label: 'Receita Líquida', |
| | data: [52955, 35479, 47800, 48745, 52123, 56412, 54729, 50621, 51664, 50934], |
| | borderColor: '#004080', |
| | backgroundColor: 'rgba(0, 64, 128, 0.1)', |
| | borderWidth: 2, |
| | fill: true, |
| | tension: 0.4 |
| | }, |
| | { |
| | label: 'Custos Operacionais', |
| | data: [20571, 17265, 10506, 17062, 18840, 25296, 20341, 18733, 17556, 17319], |
| | borderColor: '#808080', |
| | backgroundColor: 'rgba(128, 128, 128, 0.1)', |
| | borderWidth: 2, |
| | tension: 0.4 |
| | }, |
| | { |
| | label: 'Lucro Líquido', |
| | data: [309, -13589, 9669, 606, 3060, 422, 2153, 1346, 2571, 2284], |
| | borderColor: '#00a86b', |
| | backgroundColor: 'rgba(0, 168, 107, 0.1)', |
| | borderWidth: 2, |
| | tension: 0.4 |
| | } |
| | ] |
| | }, |
| | options: { |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | plugins: { |
| | legend: { |
| | position: 'top', |
| | }, |
| | tooltip: { |
| | mode: 'index', |
| | intersect: false, |
| | } |
| | }, |
| | scales: { |
| | y: { |
| | beginAtZero: false |
| | } |
| | } |
| | } |
| | }); |
| | }); |
| | </script> |
| | <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
