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 - Junho 2025</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> | |
| .slide-in { | |
| animation: slideIn 0.5s ease-out forwards; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .tabs-content { | |
| display: none; | |
| } | |
| .tabs-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h1 class="text-3xl font-bold text-gray-800">Análise Financeira <span class="text-blue-600">Junho 2025</span></h1> | |
| <div class="flex items-center space-x-4"> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Última atualização: 30/06/2025</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Exportar PDF | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 flex justify-between items-center"> | |
| <div> | |
| <h2 class="text-xl font-semibold text-gray-700">Visão Geral do Fluxo de Caixa</h2> | |
| <p class="text-gray-500">Período: Janeiro 2025 a Dezembro 2025</p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="text-center px-4 py-2 bg-blue-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Saldo Inicial</p> | |
| <p class="text-xl font-bold text-blue-600">R$ 57.765</p> | |
| </div> | |
| <i class="fas fa-arrow-right text-gray-400"></i> | |
| <div class="text-center px-4 py-2 bg-red-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Saldo Final</p> | |
| <p class="text-xl font-bold text-red-600">R$ 41.057</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-8"> | |
| <!-- Performance Overview --> | |
| <div class="bg-white rounded-xl shadow-md p-6 lg:col-span-3 slide-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-700">Desempenho Mensal</h2> | |
| <div class="relative"> | |
| <select class="appearance-none bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Jan 2025 - Dez 2025</option> | |
| <option>Últimos 6 meses</option> | |
| <option>Últimos 3 meses</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500 text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="h-80"> | |
| <canvas id="performanceChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- KPI Cards --> | |
| <div class="space-y-6 lg:col-span-2"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <!-- Receitas Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6 slide-in" style="animation-delay: 0.1s;"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500 font-medium">Receitas Totais</p> | |
| <h3 class="text-2xl font-bold mt-1 text-green-600">R$ 42.704</h3> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-lg"> | |
| <i class="fas fa-arrow-up text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-green-500 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2"><span class="font-medium text-green-600">25%↑</span> vs média mensal</p> | |
| </div> | |
| </div> | |
| <!-- Despesas Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6 slide-in" style="animation-delay: 0.2s;"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500 font-medium">Despesas Totais</p> | |
| <h3 class="text-2xl font-bold mt-1 text-red-600">R$ 44.177</h3> | |
| </div> | |
| <div class="bg-red-100 p-3 rounded-lg"> | |
| <i class="fas fa-arrow-up text-red-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-red-500 rounded-full" style="width: 62%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2"><span class="font-medium text-red-600">18%↑</span> vs média mensal</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <!-- Lucro Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6 slide-in" style="animation-delay: 0.3s;"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500 font-medium">Resultado Operacional</p> | |
| <h3 class="text-2xl font-bold mt-1 text-blue-600">R$ 17.981</h3> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-lg"> | |
| <i class="fas fa-chart-line text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-blue-500 rounded-full" style="width: 55%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2"><span class="font-medium text-blue-600">22%↑</span> vs média mensal</p> | |
| </div> | |
| </div> | |
| <!-- Margem Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6 slide-in" style="animation-delay: 0.4s;"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500 font-medium">Margem de Contribuição</p> | |
| <h3 class="text-2xl font-bold mt-1 text-purple-600">63,6%</h3> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-lg"> | |
| <i class="fas fa-percent text-purple-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <div class="relative w-20 h-20"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <circle class="text-gray-200" stroke-width="3" stroke="currentColor" fill="transparent" r="15" cx="18" cy="18"/> | |
| <circle class="progress-ring__circle text-purple-500" stroke-width="3" stroke="currentColor" fill="transparent" stroke-dasharray="100, 100" stroke-dashoffset="36.4" r="15" cx="18" cy="18"/> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center text-sm font-bold text-purple-600">63.6%</div> | |
| </div> | |
| <div class="ml-3 pt-4"> | |
| <p class="text-xs text-gray-500"><span class="font-medium text-purple-600">5%↑</span> vs último mês</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Revenue Composition --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 slide-in"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700">Composição das Receitas</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 text-white rounded-lg text-sm font-medium">Junho</button> | |
| <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">Comparativo</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="h-64"> | |
| <canvas id="revenueCompositionChart"></canvas> | |
| </div> | |
| <div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-blue-500 rounded-full mr-2"></div> | |
| <span class="text-sm font-medium">Receita de Tráfego</span> | |
| </div> | |
| <span class="text-sm font-semibold">R$ 33.561</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></div> | |
| <span class="text-sm font-medium">Receitas de Web Design</span> | |
| </div> | |
| <span class="text-sm font-semibold">R$ 8.596</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-green-500 rounded-full mr-2"></div> | |
| <span class="text-sm font-medium">Receitas de Serviços</span> | |
| </div> | |
| <span class="text-sm font-semibold">R$ 547</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-red-500 rounded-full mr-2"></div> | |
| <span class="text-sm font-medium">Hospedagem</span> | |
| </div> | |
| <span class="text-sm font-semibold">R$ 0</span> | |
| </div> | |
| <div class="pt-4 mt-4 border-t border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold">Total Receitas</span> | |
| <span class="font-bold text-lg">R$ 42.704</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-info-circle text-blue-500 mr-2"></i> | |
| <span class="text-sm font-medium text-gray-700">Receita de tráfego representou 78.6% do total, aumento de 43.7% vs média mensal</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Expense Breakdown --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 slide-in"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700">Composição das Despesas</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 text-white rounded-lg text-sm font-medium">Junho</button> | |
| <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">Comparativo</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="h-64"> | |
| <canvas id="expenseCompositionChart"></canvas> | |
| </div> | |
| <div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-purple-500 rounded-full mr-2"></div> | |
| <span class="text-sm font-medium">PLR</span> | |
| </div> | |
| <span class="text-sm font-semibold">R$ 19.396</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-red-500 rounded-full mr-2"></div> | |
| <span class="text-sm font-medium">Salários e Encargos</span> | |
| </div> | |
| <span class="text-sm font-semibold">R$ 4.709</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-blue-500 rounded-full mr-2"></div> | |
| <span class="text-sm font-medium">Custos Variáveis</span> | |
| </div> | |
| <span class="text-sm font-semibold">R$ 15.538</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></div> | |
| <span class="text-sm font-medium">Despesas Administrativas</span> | |
| </div> | |
| <span class="text-sm font-semibold">R$ 3.551</span> | |
| </div> | |
| <div class="pt-4 mt-4 border-t border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold">Total Despesas</span> | |
| <span class="font-bold text-lg">R$ 44.177</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-info-circle text-blue-500 mr-2"></i> | |
| <span class="text-sm font-medium text-gray-700">PLR representa 43.9% do total de despesas, aumento de R$ 4.000 vs média mensal</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cash Flow Projection --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 slide-in"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700">Projeção do Fluxo de Caixa</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-500">Período:</span> | |
| <div class="relative"> | |
| <select class="appearance-none bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Jun 2025 - Dez 2025</option> | |
| <option>Próximos 12 meses</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500 text-xs"></i> | |
| </div> | |
| </div> | |
| </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">Mês</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Saldo Inicial</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recebimentos</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pagamentos</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Resultado</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Saldo Final</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">Jun/25</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 42.529</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$ 42.704</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">R$ 44.177</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$ 1.473</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 41.057</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Jul/25</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 41.057</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$ 33.973</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">R$ 50.665</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$ 16.692</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 24.364</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Ago/25</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 24.364</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$ 26.635</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">R$ 38.928</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$ 12.292</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 13.119</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Set/25</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 13.119</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$ 26.235</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">R$ 37.173</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$ 10.938</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 2.181</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Out/25</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 2.181</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">R$ 27.535</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">R$ 38.794</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-R$ 11.258</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-red-600">-R$ 9.077</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-6 bg-yellow-50 p-4 rounded-lg border border-yellow-200"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mt-1"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-sm font-medium text-yellow-800">Atenção!</h3> | |
| <div class="mt-2 text-sm text-yellow-700"> | |
| <p>Projeção indica saldo negativo a partir de Outubro/2025 (-R$9.077) devido principalmente ao aumento do PLR em Julho. Recomenda-se revisão da política de distribuição de resultados ou aumento de receitas para evitar esse cenário.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Key Insights --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 slide-in"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-6">Principais Pontos de Atenção</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Financial Issues --> | |
| <div class="border-l-4 border-red-500 pl-4"> | |
| <h3 class="font-semibold text-gray-800 mb-2">Desafios Financeiros</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-red-500 text-xs mt-1 mr-2"></i> | |
| <span class="text-sm text-gray-700">PLR aumentou significativamente em Julho (R$27.396 vs média de R$19.396)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-red-500 text-xs mt-1 mr-2"></i> | |
| <span class="text-sm text-gray-700">Saldo de caixa projetado ficará negativo a partir de Outubro/2025</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-red-500 text-xs mt-1 mr-2"></i> | |
| <span class="text-sm text-gray-700">Custos variáveis acima da média em Junho (R$15.538)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Recommendations --> | |
| <div class="border-l-4 border-green-500 pl-4"> | |
| <h3 class="font-semibold text-gray-800 mb-2">Diretrizes Recomendadas</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 text-xs mt-1 mr-2"></i> | |
| <span class="text-sm text-gray-700">Revisar política de PLR para evitar impacto negativo no fluxo de caixa</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 text-xs mt-1 mr-2"></i> | |
| <span class="text-sm text-gray-700">Investir em estratégias para aumentar receita de Web Design (em queda)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 text-xs mt-1 mr-2"></i> | |
| <span class="text-sm text-gray-700">Controlar custos de remuneração de prestadores de serviço</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 text-xs mt-1 mr-2"></i> | |
| <span class="text-sm text-gray-700">Manter reserva financeira para meses de saldo negativo projetado</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Financial Summary --> | |
| <div class="mt-8 bg-blue-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-blue-800 mb-2">Resumo Financeiro</h3> | |
| <div class="mt-2 text-sm text-blue-700"> | |
| <p>Em junho, a empresa teve um bom desempenho operacional com resultado positivo de R$17.981, porém o fluxo de caixa final foi negativo em R$1.473 devido ao alto PLR distribuído. A margem de contribuição foi excelente (63.6%), mas projeções indicam desafios futuros com saldos negativos a partir de Out/2025. Recomenda-se focar em diversificação de receitas e controle de despesas variáveis para garantir sustentabilidade financeira.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabs Section --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 slide-in"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex -mb-px"> | |
| <button onclick="openTab(event, 'tab1')" class="tab-btn py-4 px-6 text-center border-b-2 font-medium text-sm border-blue-500 text-blue-600"> | |
| Detalhes Receitas | |
| </button> | |
| <button onclick="openTab(event, 'tab2')" class="tab-btn py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> | |
| Detalhes Despesas | |
| </button> | |
| <button onclick="openTab(event, 'tab3')" class="tab-btn py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> | |
| PLR | |
| </button> | |
| </nav> | |
| </div> | |
| <div id="tab1" class="tabs-content active p-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Detalhamento das Receitas</h3> | |
| <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">Jan</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fev</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mar</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jun</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 de Tráfego</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 22.815</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 23.843</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 25.170</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 33.561</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">+47%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receitas de Web Design</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 7.476</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 11.217</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 11.324</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 8.596</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-semibold">-24%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receitas de Serviços</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 0</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 497</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 497</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 547</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">+10%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div id="tab2" class="tabs-content p-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Detalhamento das Despesas</h3> | |
| <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">Jan</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fev</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mar</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jun</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">Custos Variáveis</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 6.444</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 9.591</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 11.161</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 15.538</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-semibold">+39%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">PLR</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 19.396</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 19.396</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 19.396</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 19.396</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold">0%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Salários</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 6.811</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 1.105</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 6.313</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">R$ 4.709</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">-25%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div id="tab3" class="tabs-content p-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Participação nos Lucros e Resultados (PLR)</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="bg-purple-50 p-4 rounded-lg mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium text-purple-800">Total PLR Distribuído em Junho</span> | |
| <span class="text-lg font-bold text-purple-600">R$ 19.396</span> | |
| </div> | |
| <div class="h-2 bg-purple-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-purple-500 rounded-full" style="width: 43.9%"></div> | |
| </div> | |
| <p class="text-xs text-purple-600 mt-2">43.9% do total das despesas</p> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-sm text-gray-600">PLR como % do Lucro Operacional</span> | |
| <span class="text-sm font-semibold">107.9%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm text-gray-600">PLR per capita (3 beneficiários)</span> | |
| <span class="text-sm font-semibold">R$ 6.465</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm text-gray-600">Variação vs média mensal</span> | |
| <span class="text-sm font-semibold">0%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="h-64"> | |
| <canvas id="plrChart"></canvas> | |
| </div> | |
| <div class="mt-2 text-sm text-gray-600 text-center"> | |
| <p>Projeção de aumento para R$27.396 em Julho (+41%)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab functionality | |
| function openTab(evt, tabName) { | |
| var i, tabcontent, tablinks; | |
| tabcontent = document.getElementsByClassName("tabs-content"); | |
| for (i = 0; i < tabcontent.length; i++) { | |
| tabcontent[i].classList.remove("active"); | |
| } | |
| tablinks = document.getElementsByClassName("tab-btn"); | |
| for (i = 0; i < tablinks.length; i++) { | |
| tablinks[i].classList.remove("border-blue-500", "text-blue-600"); | |
| tablinks[i].classList.add("border-transparent", "text-gray-500"); | |
| } | |
| document.getElementById(tabName).classList.add("active"); | |
| evt.currentTarget.classList.add("border-blue-500", "text-blue-600"); | |
| evt.currentTarget.classList.remove("border-transparent", "text-gray-500"); | |
| } | |
| // Charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Performance Chart | |
| const performanceCtx = document.getElementById('performanceChart').getContext('2d'); | |
| new Chart(performanceCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| datasets: [ | |
| { | |
| label: 'Receitas', | |
| data: [32757, 36279, 37684, 34902, 34148, 42704, 33973, 26635, 26235, 27535, 22588, 21013], | |
| borderColor: '#10B981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Despesas', | |
| data: [38408, 38022, 41353, 38789, 34435, 44177, 50665, 38928, 37173, 38794, 37568, 34645], | |
| borderColor: '#EF4444', | |
| backgroundColor: 'rgba(239, 68, 68, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return context.dataset.label + ': R$ ' + context.raw.toLocaleString('pt-BR'); | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| ticks: { | |
| callback: function(value) { | |
| return 'R$ ' + value.toLocaleString('pt-BR'); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Revenue Composition Chart | |
| const revenueCtx = document.getElementById('revenueCompositionChart').getContext('2d'); | |
| new Chart(revenueCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Receita de Tráfego', 'Web Design', 'Serviços', 'Hospedagem'], | |
| datasets: [{ | |
| data: [33561, 8596, 547, 0], | |
| backgroundColor: [ | |
| '#3B82F6', | |
| '#F59E0B', | |
| '#10B981', | |
| '#EF4444' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| const label = context.label || ''; | |
| const value = context.raw || 0; | |
| const total = context.dataset.data.reduce((a, b) => a + b, 0); | |
| const percentage = Math.round((value / total) * 100); | |
| return `${label}: R$ ${value.toLocaleString('pt-BR')} (${percentage}%)`; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Expense Composition Chart | |
| const expenseCtx = document.getElementById('expenseCompositionChart').getContext('2d'); | |
| new Chart(expenseCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['PLR', 'Custos Variáveis', 'Salários', 'Administrativas'], | |
| datasets: [{ | |
| data: [19396, 15538, 4709, 3551], | |
| backgroundColor: [ | |
| '#8B5CF6', | |
| '#3B82F6', | |
| '#EF4444', | |
| '#F59E0B' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| const label = context.label || ''; | |
| const value = context.raw || 0; | |
| const total = context.dataset.data.reduce((a, b) => a + b, 0); | |
| const percentage = Math.round((value / total) * 100); | |
| return `${label}: R$ ${value.toLocaleString('pt-BR')} (${percentage}%)`; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // PLR Chart | |
| const plrCtx = document.getElementById('plrChart').getContext('2d'); | |
| new Chart(plrCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| datasets: [{ | |
| label: 'PLR', | |
| data: [19396, 19396, 19396, 19396, 15396, 19396, 27396, 21396, 21396, 21396, 21396, 21396], | |
| backgroundColor: '#8B5CF6', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return 'PLR: R$ ' + context.raw.toLocaleString('pt-BR'); | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| ticks: { | |
| callback: function(value) { | |
| return 'R$ ' + value.toLocaleString('pt-BR'); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </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://enzostvs-deepsite.hf.space/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://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=EraDigital/arcq-junho" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |