Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Análise Financeira DRE Maha3D - Junho</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| <style> | |
| .glow-effect { | |
| text-shadow: 0 0 10px rgba(59, 130, 246, 0.7); | |
| } | |
| @media (max-width: 640px) { | |
| .month-selector { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-blue-800 text-center mb-2">Análise Financeira DRE Maha3D</h1> | |
| <p class="text-xl text-blue-600 text-center">Junho - Fechamento Mensal</p> | |
| <div class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 h-1 mt-4 rounded-full"></div> | |
| </header> | |
| <!-- Summary Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <!-- Meta Faturamento --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Meta Faturamento</p> | |
| <h3 class="text-2xl font-bold mt-1">103%</h3> | |
| </div> | |
| <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-semibold"> | |
| <i class="fas fa-check-circle mr-1"></i> Atingida | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 103%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Meta: R$55K | Realizado: R$56.677</p> | |
| </div> | |
| </div> | |
| <!-- Receita Líquida --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-green-500"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Receita Líquida</p> | |
| <h3 class="text-2xl font-bold mt-1">R$51.598</h3> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-green-600 text-sm font-medium"><i class="fas fa-arrow-up mr-1"></i> 6% vs Maio</span> | |
| </div> | |
| </div> | |
| <!-- Lucro Operacional --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-indigo-500"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Lucro Operacional</p> | |
| <h3 class="text-2xl font-bold mt-1">R$10.079</h3> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-purple-600 text-sm font-medium"><i class="fas fa-chart-line mr-1"></i> Margem 18%</span> | |
| </div> | |
| </div> | |
| <!-- Margem Contribuição --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-yellow-500"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Margem Contribuição</p> | |
| <h3 class="text-2xl font-bold mt-1">81%</h3> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-yellow-600 text-sm font-medium"><i class="fas fa-star mr-1"></i> Alta eficiência</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Column --> | |
| <div class="w-full lg:w-2/3"> | |
| <!-- Revenue vs Expenses Chart --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Fluxo Operacional Mensal</h2> | |
| <div class="h-80"> | |
| <canvas id="operationalFlowChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Quarterly Indicators --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Principais Indicadores Trimestrais</h2> | |
| <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">Indicador</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Q1</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Q2</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Variação</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receita Líquida</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$134.406</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$148.872</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">+10.8%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Lucro Operacional</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$7.033</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$22.900</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">+225.6%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Margem Contribuição</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">72.7%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">79.1%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">+6.4%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Meta Faturamento</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">87.7%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">98%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">+10.3%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="w-full lg:w-1/3"> | |
| <!-- Monthly Performance --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Performance Mensal</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Faturamento</span> | |
| <span class="text-sm font-semibold text-blue-600">103%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 103%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Receita Operacional</span> | |
| <span class="text-sm font-semibold text-green-600">R$56.677</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Margem Contribuição</span> | |
| <span class="text-sm font-semibold text-yellow-600">81%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 81%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Lucro Líquido</span> | |
| <span class="text-sm font-semibold text-purple-600">R$19.644</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 38%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Expense Breakdown --> | |
| <div class="bg-white rounded-lg shadow-lg p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Detalhamento de Despesas</h2> | |
| <div class="h-64 mb-4"> | |
| <canvas id="expenseBreakdownChart"></canvas> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-sm text-gray-600">Despesas Administrativas</span> | |
| <span class="text-sm font-semibold">R$30.808 (54%)</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm text-gray-600">Despesas Comerciais</span> | |
| <span class="text-sm font-semibold">R$4.500 (8%)</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm text-gray-600">Custos Operacionais</span> | |
| <span class="text-sm font-semibold">R$5.749 (10%)</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm text-gray-600">Impostos</span> | |
| <span class="text-sm font-semibold">R$3.879 (7%)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- DRE Detailed Table --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 mt-8"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Demonstrativo de Resultados Detalhado</h2> | |
| <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">Categoria</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Janeiro</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fevereiro</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Março</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Abril</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Maio</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Junho</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receita Operacional</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$35.611</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$42.818</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$66.173</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$46.544</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$58.301</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-bold">R$56.677</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Deduções da Receita</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$1.857</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$3.948</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$4.391</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$3.215</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$4.356</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-bold">-R$5.079</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receita Líquida</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$33.754</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$38.870</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$61.782</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$43.329</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$53.945</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-bold">R$51.598</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Custos Operacionais</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$6.535</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$14.150</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$5.990</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$16.633</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$7.909</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-bold">-R$5.749</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Lucro Bruto</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$27.219</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$24.720</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$55.792</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$26.696</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$46.036</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-bold">R$45.849</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Despesas Operacionais</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$30.732</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$36.300</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$33.665</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$32.120</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$27.791</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-bold">-R$35.770</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Lucro Operacional</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$3.513</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$11.580</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$22.126</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$5.424</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$18.245</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-bold">R$10.079</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Lucro Líquido</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$3.913</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$10.483</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$20.065</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$8.210</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$17.876</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-bold">R$19.644</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Operational Flow Chart | |
| const operationalFlowCtx = document.getElementById('operationalFlowChart').getContext('2d'); | |
| const operationalFlowChart = new Chart(operationalFlowCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'], | |
| datasets: [ | |
| { | |
| label: 'Receitas', | |
| data: [35611, 42818, 66173, 46544, 58301, 56677], | |
| backgroundColor: 'rgba(59, 130, 246, 0.7)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'Custos + Despesas', | |
| data: [-37267, -50450, -39655, -48753, -35700, -41519], | |
| backgroundColor: 'rgba(239, 68, 68, 0.7)', | |
| borderColor: 'rgba(239, 68, 68, 1)', | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'Resultado Operacional', | |
| data: [-3513, -11580, 22126, -5424, 18245, 10079], | |
| backgroundColor: 'rgba(167, 139, 250, 0.7)', | |
| borderColor: 'rgba(167, 139, 250, 1)', | |
| borderWidth: 1, | |
| type: 'line', | |
| pointBackgroundColor: 'rgba(167, 139, 250, 1)', | |
| pointRadius: 6, | |
| pointHoverRadius: 8 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.dataset.label || ''; | |
| if (label) { | |
| label += ': '; | |
| } | |
| if (context.datasetIndex < 2) { | |
| label += new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Math.abs(context.rawValue)); | |
| } else { | |
| label += new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(context.rawValue); | |
| } | |
| return label; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| ticks: { | |
| callback: function(value) { | |
| return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Expense Breakdown Chart | |
| const expenseBreakdownCtx = document.getElementById('expenseBreakdownChart').getContext('2d'); | |
| const expenseBreakdownChart = new Chart(expenseBreakdownCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Despesas Administrativas', 'Despesas Comerciais', 'Custos Operacionais', 'Impostos', 'Outros'], | |
| datasets: [{ | |
| data: [30808, 4500, 5749, 3879, 1741], | |
| backgroundColor: [ | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(249, 115, 22, 0.7)', | |
| 'rgba(234, 179, 8, 0.7)', | |
| 'rgba(6, 182, 212, 0.7)', | |
| 'rgba(156, 163, 175, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(249, 115, 22, 1)', | |
| 'rgba(234, 179, 8, 1)', | |
| 'rgba(6, 182, 212, 1)', | |
| 'rgba(156, 163, 175, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) { | |
| label += ': '; | |
| } | |
| label += new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(context.raw); | |
| label += ' (' + Math.round(context.parsed * 100 / context.dataset.data.reduce((a, b) => a + b, 0)) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| </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;" |