Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CashFlow Wizard Pro | Análise Financeira</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> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Main Dashboard --> | |
| <div class="w-full lg:w-2/3"> | |
| <section class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800 mb-6">Análise Financeira Completa - Outubro 2025</h1> | |
| <!-- Summary Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> | |
| <div class="bg-primary-50 border-l-4 border-primary-500 p-4 rounded-r-lg"> | |
| <h3 class="text-sm font-medium text-gray-500">Receitas Totais</h3> | |
| <p class="text-2xl font-bold text-primary-600">R$ 50.653</p> | |
| </div> | |
| <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg"> | |
| <h3 class="text-sm font-medium text-gray-500">Despesas Totais</h3> | |
| <p class="text-2xl font-bold text-red-600">R$ 51.320</p> | |
| </div> | |
| <div class="bg-green-50 border-l-4 border-green-500 p-4 rounded-r-lg"> | |
| <h3 class="text-sm font-medium text-gray-500">Lucro Operacional</h3> | |
| <p class="text-2xl font-bold text-green-600">R$ 20.792</p> | |
| </div> | |
| <div class="bg-purple-50 border-l-4 border-purple-500 p-4 rounded-r-lg"> | |
| <h3 class="text-sm font-medium text-gray-500">Margem de Contribuição</h3> | |
| <p class="text-2xl font-bold text-purple-600">69.3%</p> | |
| </div> | |
| </div> | |
| <!-- Revenue Breakdown --> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Composição das Receitas</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-medium">Receita de Tráfego</h3> | |
| <span class="text-primary-600 font-bold">R$ 39.539</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-primary-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">78% do total</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-medium">Web Design</h3> | |
| <span class="text-primary-600 font-bold">R$ 7.985</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-primary-500 h-2 rounded-full" style="width: 15.8%"></div> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">15.8% do total</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-medium">Serviços</h3> | |
| <span class="text-primary-600 font-bold">R$ 1.547</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-primary-500 h-2 rounded-full" style="width: 3%"></div> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">3% do total</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-medium">Outras Receitas</h3> | |
| <span class="text-primary-600 font-bold">R$ 1.582</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-primary-500 h-2 rounded-full" style="width: 3.2%"></div> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">3.2% do total</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Expense Breakdown --> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Composição das Despesas</h2> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <h3 class="font-medium mb-2">PLR (Participação nos Lucros)</h3> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-4"> | |
| <div class="bg-red-500 h-4 rounded-full" style="width: 44.7%"></div> | |
| </div> | |
| <span class="text-sm font-medium">R$ 22.964</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-2">Custos Variáveis</h3> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-4"> | |
| <div class="bg-red-400 h-4 rounded-full" style="width: 27.2%"></div> | |
| </div> | |
| <span class="text-sm font-medium">R$ 13.959</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-2">Custos Fixos</h3> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-4"> | |
| <div class="bg-red-300 h-4 rounded-full" style="width: 27.9%"></div> | |
| </div> | |
| <span class="text-sm font-medium">R$ 14.320</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-2">Outras Despesas</h3> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-4"> | |
| <div class="bg-red-200 h-4 rounded-full" style="width: 0.2%"></div> | |
| </div> | |
| <span class="text-sm font-medium">R$ 50</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Key Metrics --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <h3 class="font-semibold text-gray-700 mb-2">Saldo Final de Caixa</h3> | |
| <p class="text-3xl font-bold text-primary-600">R$ 25.052</p> | |
| <div class="flex items-center mt-2"> | |
| <i data-feather="trending-up" class="text-green-500"></i> | |
| <span class="text-sm text-green-600 ml-1">+12% vs mês anterior</span> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <h3 class="font-semibold text-gray-700 mb-2">Ticket Médio</h3> | |
| <p class="text-3xl font-bold text-primary-600">R$ 2.532</p> | |
| <div class="flex items-center mt-2"> | |
| <i data-feather="trending-down" class="text-red-500"></i> | |
| <span class="text-sm text-red-600 ml-1">-5% vs mês anterior</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analysis and Recommendations --> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 mb-8"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Análise Financeira e Recomendações</h2> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="font-medium text-gray-800 mb-2">Pontos Positivos</h3> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>Crescimento de 12% no saldo de caixa em relação ao mês anterior</li> | |
| <li>Margem de contribuição saudável de 69%, acima da média do setor</li> | |
| <li>Receita de tráfego representa 78% do total, mostrando forte demanda</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800 mb-2">Pontos de Atenção</h3> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>Despesas operacionais elevadas (PLR representa 44.7% das despesas)</li> | |
| <li>Ticket médio em queda (-5%), indicando possível necessidade de ajuste de preços</li> | |
| <li>Dependência excessiva da receita de tráfego (78%)</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800 mb-2">Sugestões de Melhoria</h3> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>Diversificação de fontes de receita para reduzir dependência do tráfego</li> | |
| <li>Revisão da estrutura de PLR para melhor equilíbrio financeiro</li> | |
| <li>Análise de precificação para reverter queda no ticket médio</li> | |
| <li>Criação de reserva de emergência com 10% do lucro operacional</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="w-full lg:w-1/3"> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Quick Actions</h2> | |
| <div class="space-y-3"> | |
| <a href="#" class="block p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="flex items-center"> | |
| <i data-feather="dollar-sign" class="text-primary-500"></i> | |
| <span class="ml-2">Generate Report</span> | |
| </div> | |
| </a> | |
| <a href="#" class="block p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="flex items-center"> | |
| <i data-feather="settings" class="text-primary-500"></i> | |
| <span class="ml-2">Settings</span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Recent Transactions</h2> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium">Web Design Project</p> | |
| <p class="text-sm text-gray-500">Oct 15, 2025</p> | |
| </div> | |
| <span class="text-green-600 font-medium">+R$ 3,500</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium">Server Hosting</p> | |
| <p class="text-sm text-gray-500">Oct 10, 2025</p> | |
| </div> | |
| <span class="text-red-600 font-medium">-R$ 1,200</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |