criar uma análise financeira completa de fluxo de caixa a partir dos dados colados do relatório. Considerar Novembro como mês de fechamento e destacar os pontos principais como Receitas totais, Despesas totais, resultado operacional, lucro líquido, margem de contribuição, etc. Detalhar a composição das despesas e receitas (incluir a divisão das receitas, Receitas de Trafego, de Web, de Serviços, etc) e informar o PLR. Inclui também uma análise com principais pontos de atenção e diretrizes. Incluir uma projeção do fluxo da caixa. Seguem dados: FLUXO DE CAIXA Realizado (R$) Realizado (R$) Realizado (R$) Realizado (R$) Realizado (R$) Realizado (R$) Realizado (R$) Realizado (R$) Realizado (R$) Realizado (R$) Realizado (R$) Previsto (R$) Realizado (R$)

CATEGORIAS jan/25 fev/25 mar/25 abr/25 mai/25 jun/25 jul/25 ago/25 set/25 out/25 nov/25 dez/25 dez/25
Saldo do Mês Anterior R$ 57.765 R$ 52.114 R$ 50.371 R$ 46.703 R$ 42.816 R$ 42.529 R$ 44.457 R$ 36.478 R$ 25.195 R$ 27.204 R$ 27.102 R$ 17.611 R$ 27.611
Total de Recebimentos R$ 32.757 R$ 36.279 R$ 37.684 R$ 34.902 R$ 34.148 R$ 42.104 R$ 33.888 R$ 44.910 R$ 46.361 R$ 49.334 R$ 51.009 R$ 47.416 R$ 4.656
3.01 Receitas de Vendas e de Serviços R$ 30.291 R$ 35.806 R$ 37.240 R$ 34.097 R$ 33.737 R$ 42.104 R$ 33.888 R$ 43.745 R$ 44.574 R$ 49.071 R$ 49.841 R$ 47.416 R$ 4.656
HOSPEDAGEM R$ - R$ 250 R$ 250 R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ 222 R$ - R$ -
Receita de Tráfego R$ 22.815 R$ 23.843 R$ 25.170 R$ 19.145 R$ 23.370 R$ 32.961 R$ 27.074 R$ 34.795 R$ 30.949 R$ 39.539 R$ 37.828 R$ 38.857 R$ 4.656
Receitas de Serviços R$ - R$ 497 R$ 497 R$ - R$ 1.216 R$ 547 R$ 829 R$ 714 R$ 5.490 R$ 1.547 R$ 2.627 R$ 2.394 R$ -
Receitas de Web Design R$ 7.476 R$ 11.217 R$ 11.324 R$ 14.952 R$ 9.151 R$ 8.596 R$ 5.985 R$ 8.236 R$ 8.135 R$ 7.985 R$ 9.165 R$ 6.165 R$ -
3.02 Receitas Financeiras R$ 2.466 R$ 473 R$ - R$ 805 R$ 412 R$ - R$ - R$ - R$ 1.787 R$ 263 R$ - R$ - R$ -
Rendimentos de Aplicações R$ 2.466 R$ 473 R$ - R$ 805 R$ 412 R$ - R$ - R$ - R$ 1.787 R$ 263 R$ - R$ - R$ -
3.03 Outras Receitas e Entradas R$ - R$ - R$ 444 R$ - R$ - R$ - R$ - R$ 1.166 R$ - R$ - R$ 1.168 R$ - R$ -
Reembolso R$ - R$ - R$ 444 R$ - R$ - R$ - R$ - R$ 1.166 R$ - R$ 1.168 R$ - R$ -
Total de Pagamentos -R$ 38.408 -R$ 38.022 -R$ 41.353 -R$ 38.789 -R$ 38.435 -R$ 46.177 -R$ 43.866 -R$ 44.193 -R$ 50.352 -R$ 51.320 -R$ 52.617 -R$ 50.153 -R$ 6.278
4.01 Impostos sobre Vendas e sobre Serviços -R$ 2.754 -R$ 2.177 -R$ 3.447 -R$ 2.763 -R$ 2.227 -R$ 3.029 -R$ 3.047 -R$ 3.290 -R$ 3.981 -R$ 4.146 -R$ 4.813 -R$ 4.282 R$ -
Simples Nacional - DAS -R$ 2.754 -R$ 2.177 -R$ 3.447 -R$ 2.763 -R$ 2.227 -R$ 3.029 -R$ 3.047 -R$ 3.290 -R$ 3.981 -R$ 4.146 -R$ 4.813 -R$ 4.282 R$ -
4.02 Despesas com Vendas e Serviços -R$ 2.690 -R$ 6.214 -R$ 6.514 -R$ 6.253 -R$ 7.581 -R$ 10.308 -R$ 7.792 -R$ 8.205 -R$ 9.666 -R$ 9.813 -R$ 6.577 -R$ 6.657 -R$ 397
CRM R$ - R$ - R$ - R$ - -R$ 171 -R$ 815 R$ - -R$ 331 -R$ 1.649 -R$ 540 R$ - -R$ 260 -R$ 260
Comissões de Vendedores R$ - R$ - R$ - R$ - R$ - R$ - R$ - -R$ 459 R$ - -R$ 759 -R$ 449 R$ - R$ -
Desenvolvimento Web R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - -R$ 525 -R$ 1.075 R$ - R$ - R$ -
Despesas com reembolso R$ - R$ - R$ - R$ - R$ - -R$ 1.131 R$ - R$ - R$ - R$ - R$ - R$ - R$ -
Manutenção -R$ 417 -R$ 582 -R$ 582 -R$ 582 -R$ 669 -R$ 769 -R$ 769 -R$ 841 -R$ 901 -R$ 2.331 -R$ 1.015 -R$ 1.146 R$ -
Materiais Aplicados na Prestação de Serviços R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - -R$ 938 -R$ 889 -R$ 533 -R$ 670 -R$ 137
Remuneração de prestadores de serviço -R$ 2.274 -R$ 5.631 -R$ 5.932 -R$ 5.670 -R$ 4.760 -R$ 4.624 -R$ 4.053 -R$ 2.353 -R$ 1.253 R$ - R$ - R$ - R$ -
Social mídia R$ - R$ - R$ - R$ - -R$ 1.980 -R$ 2.970 -R$ 2.970 -R$ 4.220 -R$ 4.400 -R$ 4.220 -R$ 4.580 -R$ 4.580 R$ -
Total de custos variáveis -R$ 5.444 -R$ 8.391 -R$ 9.961 -R$ 9.016 -R$ 9.808 -R$ 13.338 -R$ 10.839 -R$ 11.495 -R$ 13.648 -R$ 13.959 -R$ 11.391 -R$ 10.939 -R$ 397
Margem de Contribuição R$ 24.847 R$ 27.416 R$ 27.279 R$ 25.081 R$ 23.929 R$ 28.766 R$ 23.048 R$ 32.250 R$ 30.927 R$ 35.112 R$ 38.451 R$ 36.478 R$ 4.259
4.03 Despesas com Salários e Encargos -R$ 7.811 -R$ 2.305 -R$ 7.513 -R$ 6.909 -R$ 5.909 -R$ 6.909 -R$ 7.465 -R$ 7.669 -R$ 10.146 -R$ 9.690 -R$ 11.294 -R$ 11.486 -R$ 1.450
Pró-labore -R$ 5.006 R$ - -R$ 5.208 -R$ 2.604 -R$ 2.604 -R$ 2.604 -R$ 2.604 -R$ 2.604 -R$ 3.036 -R$ 3.036 -R$ 3.036 -R$ 3.036 R$ -
Remuneração de Autônomos -R$ 2.805 -R$ 2.305 -R$ 2.305 -R$ 4.305 -R$ 3.305 -R$ 4.305 -R$ 4.861 -R$ 5.065 -R$ 7.110 -R$ 6.654 -R$ 8.258 -R$ 8.450 -R$ 1.450
4.04 Despesas com Colaboradores -R$ 575 -R$ 197 -R$ 197 -R$ 197 -R$ 197 -R$ 494 -R$ 197 -R$ 100 -R$ 1.100 -R$ 100 -R$ 100 -R$ 578 -R$ 578
Cursos e Treinamentos -R$ 575 -R$ 197 -R$ 197 -R$ 197 -R$ 197 -R$ 494 -R$ 197 -R$ 100 -R$ 1.100 -R$ 100 -R$ 100 -R$ 578 -R$ 578
4.05 Despesas Administrativas -R$ 1.777 -R$ 3.991 -R$ 3.777 -R$ 2.195 -R$ 2.310 -R$ 3.551 -R$ 2.403 -R$ 2.220 -R$ 2.656 -R$ 2.548 -R$ 5.827 -R$ 2.785 -R$ 2.451
Honorários Advocatícios R$ - -R$ 567 -R$ 283 R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ -
Honorários Contábeis -R$ 350 -R$ 380 -R$ 380 -R$ 380 -R$ 380 -R$ 380 -R$ 380 -R$ 380 -R$ 380 -R$ 380 -R$ 380 -R$ 600 -R$ 600
Materiais de Escritório -R$ 485 -R$ 291 -R$ 291 -R$ 460 -R$ 390 -R$ 390 -R$ 390 -R$ 390 -R$ 390 -R$ 425 -R$ 468 -R$ 680 -R$ 680
Retenção - GPS 2631 - INSS -R$ 311 -R$ 334 -R$ 334 -R$ 334 -R$ 334 -R$ 334 -R$ 334 -R$ 334 -R$ 334 -R$ 334 -R$ 334 -R$ 334 R$ -
Sistemas -R$ 631 -R$ 2.419 -R$ 2.414 -R$ 903 -R$ 1.206 -R$ 2.447 -R$ 1.004 -R$ 1.005 -R$ 1.441 -R$ 1.409 -R$ 4.499 -R$ 1.025 -R$ 1.025
outras despesas R$ - R$ - -R$ 74 -R$ 119 R$ - R$ - R$ - -R$ 111 -R$ 111 R$ - -R$ 146 -R$ 146 -R$ 146
taxa de licença R$ - R$ - R$ - R$ - R$ - R$ - -R$ 296 R$ - R$ - R$ - R$ - R$ - R$ -
4.06 Despesas Comerciais -R$ 191 -R$ 470 -R$ 402 -R$ 966 -R$ 709 -R$ 331 -R$ 1.462 -R$ 1.210 -R$ 1.685 -R$ 1.818 -R$ 893 -R$ 1.310 -R$ 1.310
Brindes para Clientes R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - -R$ 300 R$ - R$ - R$ -
Marketing e Publicidade -R$ 191 -R$ 470 -R$ 402 -R$ 966 -R$ 709 -R$ 331 -R$ 1.041 -R$ 1.210 -R$ 1.685 -R$ 1.518 -R$ 893 -R$ 1.310 -R$ 1.310
Viagens e Representações R$ - R$ - R$ - R$ - R$ - R$ - -R$ 421 R$ - R$ - R$ - R$ - R$ - R$ -
4.07 Despesas com Imóvel -R$ 205 -R$ 100 -R$ 100 -R$ 100 -R$ 100 -R$ 100 -R$ 100 -R$ 100 -R$ 89 -R$ 164 -R$ 89 -R$ 89 -R$ 89
Aluguel -R$ 205 -R$ 100 -R$ 100 -R$ 100 -R$ 100 -R$ 100 -R$ 100 -R$ 100 -R$ 89 -R$ 164 -R$ 89 -R$ 89 -R$ 89
Custos fixos -R$ 10.559 -R$ 7.062 -R$ 11.989 -R$ 10.367 -R$ 9.224 -R$ 11.385 -R$ 11.627 -R$ 11.298 -R$ 15.675 -R$ 14.320 -R$ 18.201 -R$ 16.247 -R$ 5.877
Lucro Operacional R$ 14.289 R$ 20.353 R$ 15.290 R$ 14.714 R$ 14.704 R$ 17.381 R$ 11.422 R$ 20.951 R$ 15.252 R$ 20.792 R$ 20.249 R$ 20.231 -R$ 1.618
4.09 Despesas com Diretoria -R$ 19.396 -R$ 19.396 -R$ 19.396 -R$ 19.396 -R$ 19.396 -R$ 21.396 -R$ 21.396 -R$ 21.396 -R$ 20.964 -R$ 22.964 -R$ 22.964 -R$ 22.964 R$ -
PLR - Participação nos Lucros e Resultados -R$ 19.396 -R$ 19.396 -R$ 19.396 -R$ 19.396 -R$ 19.396 -R$ 21.396 -R$ 21.396 -R$ 21.396 -R$ 20.964 -R$ 22.964 -R$ 22.964 -R$ 22.964 R$ -
4.10 Despesas Financeiras -R$ 9 -R$ 12 -R$ 6 -R$ 9 -R$ 6 -R$ 58 -R$ 4 -R$ 4 -R$ 14 -R$ 27 -R$ 61 -R$ 4 -R$ 4
Tarifas Bancárias R$ - -R$ 12 -R$ 6 -R$ 9 -R$ 6 -R$ 58 -R$ 4 -R$ 4 -R$ 14 -R$ 27 -R$ 61 -R$ 4 -R$ 4
Tarifas de Cartões de Crédito -R$ 9 R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ -
4.11 Outras Despesas R$ - -R$ 161 R$ - R$ - R$ - R$ - R$ - R$ - -R$ 52 -R$ 50 R$ - R$ - R$ -
Despesas a identificar R$ - -R$ 161 R$ - R$ - R$ - R$ - R$ - R$ - -R$ 52 -R$ 50 R$ - R$ - R$ -
5.01 Bens Imobilizados da Empresa -R$ 3.000 -R$ 3.000 R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ -
Investimento em cursos ou consultoria -R$ 3.000 -R$ 3.000 R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ - R$ -
Geração de Caixa do Período -R$ 5.651 -R$ 1.743 -R$ 3.668 -R$ 3.887 -R$ 4.286 -R$ 4.073 -R$ 9.978 R$ 717 -R$ 3.991 -R$ 1.985 -R$ 1.608 -R$ 2.737 -R$ 1.622
Saldo Final de Caixa R$ 52.114 R$ 50.371 R$ 46.703 R$ 42.816 R$ 42.529 R$ 44.457 R$ 36.478 R$ 25.195 R$ 27.204 R$ 27.102 R$ 27.611 R$ 14.874 R$ 25.989

README.md

@@ -1,10 +1,13 @@
 ---
-title: Financial Flow Analyzer
-emoji: 🌍
-colorFrom: yellow
-colorTo: gray
+title: Financial Flow Analyzer 💰
+colorFrom: purple
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,143 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .footer {
+                    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+                    color: white;
+                    margin-top: 4rem;
+                }
+                
+                .footer-link {
+                    transition: all 0.3s ease;
+                    position: relative;
+                }
+                
+                .footer-link:hover {
+                    color: #a5b4fc;
+                }
+                
+                .footer-link::after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 1px;
+                    bottom: -2px;
+                    left: 50%;
+                    background-color: #a5b4fc;
+                    transition: all 0.3s ease;
+                }
+                
+                .footer-link:hover::after {
+                    width: 100%;
+                    left: 0;
+                }
+                
+                .divider {
+                    background: rgba(255, 255, 255, 0.1);
+                }
+            </style>
+            
+            <footer class="footer">
+                <div class="container mx-auto px-4 py-12">
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                        <!-- Company Info -->
+                        <div>
+                            <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M12 2L2 7V17C2 17.55 2.45 18 3 18H21C21.55 18 22 17.55 22 17V7L12 2Z" fill="white" fill-opacity="0.2"/>
+                                    <path d="M12 2L2 7V17C2 17.55 2.45 18 3 18H21C21.55 18 22 17.55 22 17V7L12 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                </svg>
+                                FinanceFlow
+                            </h3>
+                            <p class="text-gray-400 text-sm mb-4">
+                                Análise financeira completa e inteligente para tomada de decisões estratégicas.
+                            </p>
+                            <div class="flex gap-3">
+                                <a href="#" class="text-gray-400 hover:text-white">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+                                    </svg>
+                                </a>
+                                <a href="#" class="text-gray-400 hover:text-white">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+                                    </svg>
+                                </a>
+                                <a href="#" class="text-gray-400 hover:text-white">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                        
+                        <!-- Quick Links -->
+                        <div>
+                            <h4 class="text-white font-semibold mb-4">Links Rápidos</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-gray-400 text-sm hover:text-gray-200">Dashboard</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm hover:text-gray-200">Análise Financeira</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm hover:text-gray-200">Projeções</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm hover:text-gray-200">Relatórios</a></li>
+                            </ul>
+                        </div>
+                        
+                        <!-- Resources -->
+                        <div>
+                            <h4 class="text-white font-semibold mb-4">Recursos</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-gray-400 text-sm hover:text-gray-200">Documentação</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm hover:text-gray-200">Tutoriais</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm hover:text-gray-200">API</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm hover:text-gray-200">Suporte</a></li>
+                            </ul>
+                        </div>
+                        
+                        <!-- Contact -->
+                        <div>
+                            <h4 class="text-white font-semibold mb-4">Contato</h4>
+                            <ul class="space-y-2 text-sm">
+                                <li class="text-gray-400 flex items-center gap-2">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                                        <polyline points="9 22 9 12 15 12 15 22"/>
+                                    </svg>
+                                    São Paulo, SP
+                                </li>
+                                <li class="text-gray-400 flex items-center gap-2">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
+                                        <polyline points="22,6 12,13 2,6"/>
+                                    </svg>
+                                    finance@flow.com
+                                </li>
+                                <li class="text-gray-400 flex items-center gap-2">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+                                    </svg>
+                                    +55 11 9999-9999
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <!-- Divider -->
+                    <div class="divider my-8"></div>
+                    
+                    <!-- Bottom -->
+                    <div class="flex flex-col md:flex-row justify-between items-center text-sm text-gray-400">
+                        <p>&copy; 2025 FinanceFlow. Todos os direitos reservados.</p>
+                        <div class="flex gap-4 mt-4 md:mt-0">
+                            <a href="#" class="hover:text-gray-200">Política de Privacidade</a>
+                            <a href="#" class="hover:text-gray-200">Termos de Serviço</a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,113 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .navbar {
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+                }
+                
+                .nav-link {
+                    transition: all 0.3s ease;
+                    position: relative;
+                }
+                
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 2px;
+                    bottom: -4px;
+                    left: 50%;
+                    background-color: white;
+                    transition: all 0.3s ease;
+                }
+                
+                .nav-link:hover::after {
+                    width: 100%;
+                    left: 0;
+                }
+                
+                .mobile-menu {
+                    display: none;
+                }
+                
+                @media (max-width: 768px) {
+                    .mobile-menu {
+                        display: block;
+                    }
+                    
+                    .desktop-menu {
+                        display: none;
+                    }
+                }
+            </style>
+            
+            <nav class="navbar">
+                <div class="container mx-auto px-4">
+                    <div class="flex items-center justify-between h-16">
+                        <!-- Logo -->
+                        <div class="flex items-center">
+                            <span class="text-white font-bold text-xl flex items-center gap-2">
+                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M12 2L2 7V17C2 17.55 2.45 18 3 18H21C21.55 18 22 17.55 22 17V7L12 2Z" fill="white" fill-opacity="0.2"/>
+                                    <path d="M12 2L2 7V17C2 17.55 2.45 18 3 18H21C21.55 18 22 17.55 22 17V7L12 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                    <path d="M12 22V18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                    <path d="M8 22H16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                    <circle cx="12" cy="11" r="3" fill="white"/>
+                                </svg>
+                                FinanceFlow
+                            </span>
+                        </div>
+                        
+                        <!-- Desktop Menu -->
+                        <div class="desktop-menu hidden md:flex items-center space-x-6">
+                            <a href="#dashboard" class="nav-link text-white hover:text-gray-200">Dashboard</a>
+                            <a href="#analysis" class="nav-link text-white hover:text-gray-200">Análise</a>
+                            <a href="#projection" class="nav-link text-white hover:text-gray-200">Projeção</a>
+                            <a href="#reports" class="nav-link text-white hover:text-gray-200">Relatórios</a>
+                            <button class="bg-white text-purple-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition-colors">
+                                Novo Relatório
+                            </button>
+                        </div>
+                        
+                        <!-- Mobile Menu Button -->
+                        <div class="mobile-menu">
+                            <button id="mobile-menu-btn" class="text-white hover:text-gray-200">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                    <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                    <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Mobile Menu -->
+                    <div id="mobile-menu-panel" class="hidden pb-4 md:hidden">
+                        <div class="flex flex-col space-y-3">
+                            <a href="#dashboard" class="text-white hover:text-gray-200 py-2">Dashboard</a>
+                            <a href="#analysis" class="text-white hover:text-gray-200 py-2">Análise</a>
+                            <a href="#projection" class="text-white hover:text-gray-200 py-2">Projeção</a>
+                            <a href="#reports" class="text-white hover:text-gray-200 py-2">Relatórios</a>
+                            <button class="bg-white text-purple-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition-colors w-full">
+                                Novo Relatório
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        `;
+        
+        // Mobile menu toggle
+        const menuBtn = this.shadowRoot.getElementById('mobile-menu-btn');
+        const menuPanel = this.shadowRoot.getElementById('mobile-menu-panel');
+        
+        menuBtn.addEventListener('click', () => {
+            menuPanel.classList.toggle('hidden');
+        });
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,304 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Análise Financeira - Fluxo de Caixa</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💰</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <custom-navbar></custom-navbar>
+    
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        <!-- Header Section -->
+        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+                <div>
+                    <h1 class="text-3xl font-bold text-gray-800 flex items-center gap-2">
+                        <i data-feather="trending-up" class="w-8 h-8 text-blue-600"></i>
+                        Análise Financeira Completa
+                    </h1>
+                    <p class="text-gray-600 mt-2">Período: Janeiro - Novembro 2025 | Mês de Fechamento: Novembro</p>
+                </div>
+                <div class="flex gap-2">
+                    <button onclick="exportToPDF()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2">
+                        <i data-feather="download" class="w-4 h-4"></i>
+                        Exportar PDF
+                    </button>
+                    <button onclick="refreshData()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors flex items-center gap-2">
+                        <i data-feather="refresh-cw" class="w-4 h-4"></i>
+                        Atualizar
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- KPI Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-green-500">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-600 text-sm">Receitas Totais</p>
+                        <p class="text-2xl font-bold text-gray-800" id="totalRevenues">R$ 0</p>
+                        <p class="text-xs text-gray-500 mt-1">Período Acumulado</p>
+                    </div>
+                    <div class="bg-green-100 p-3 rounded-lg">
+                        <i data-feather="dollar-sign" class="w-6 h-6 text-green-600"></i>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-red-500">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-600 text-sm">Despesas Totais</p>
+                        <p class="text-2xl font-bold text-gray-800" id="totalExpenses">R$ 0</p>
+                        <p class="text-xs text-gray-500 mt-1">Período Acumulado</p>
+                    </div>
+                    <div class="bg-red-100 p-3 rounded-lg">
+                        <i data-feather="trending-down" class="w-6 h-6 text-red-600"></i>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-blue-500">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-600 text-sm">Lucro Operacional</p>
+                        <p class="text-2xl font-bold text-gray-800" id="operationalProfit">R$ 0</p>
+                        <p class="text-xs text-gray-500 mt-1">Média Mensal</p>
+                    </div>
+                    <div class="bg-blue-100 p-3 rounded-lg">
+                        <i data-feather="bar-chart-2" class="w-6 h-6 text-blue-600"></i>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-purple-500">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-600 text-sm">Margem Contribuição</p>
+                        <p class="text-2xl font-bold text-gray-800" id="contributionMargin">0%</p>
+                        <p class="text-xs text-gray-500 mt-1">Média do Período</p>
+                    </div>
+                    <div class="bg-purple-100 p-3 rounded-lg">
+                        <i data-feather="pie-chart" class="w-6 h-6 text-purple-600"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Charts Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+            <div class="bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                    <i data-feather="bar-chart" class="w-5 h-5"></i>
+                    Evolução Mensal de Receitas vs Despesas
+                </h2>
+                <canvas id="monthlyFlowChart"></canvas>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                    <i data-feather="pie-chart" class="w-5 h-5"></i>
+                    Composição das Receitas - Novembro
+                </h2>
+                <canvas id="revenueCompositionChart"></canvas>
+            </div>
+        </div>
+
+        <!-- Detailed Analysis Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+            <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                    <i data-feather="file-text" class="w-5 h-5"></i>
+                    Análise Detalhada - Novembro/2025
+                </h2>
+                
+                <div class="space-y-4">
+                    <div class="border-l-4 border-blue-500 pl-4">
+                        <h3 class="font-semibold text-gray-700">Receitas Totais</h3>
+                        <p class="text-2xl font-bold text-green-600">R$ 51.009</p>
+                        <div class="mt-2 space-y-1 text-sm">
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">• Receita de Tráfego:</span>
+                                <span class="font-medium">R$ 37.828 (74.2%)</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">• Web Design:</span>
+                                <span class="font-medium">R$ 9.165 (18.0%)</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">• Serviços:</span>
+                                <span class="font-medium">R$ 2.627 (5.1%)</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">• Outras Receitas:</span>
+                                <span class="font-medium">R$ 1.390 (2.7%)</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="border-l-4 border-red-500 pl-4">
+                        <h3 class="font-semibold text-gray-700">Despesas Totais</h3>
+                        <p class="text-2xl font-bold text-red-600">R$ 52.617</p>
+                        <div class="mt-2 space-y-1 text-sm">
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">• PLR (Participação Lucros):</span>
+                                <span class="font-medium">R$ 22.964 (43.6%)</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">• Salários e Encargos:</span>
+                                <span class="font-medium">R$ 11.294 (21.5%)</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">• Custos Variáveis:</span>
+                                <span class="font-medium">R$ 11.391 (21.7%)</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">• Demais Despesas:</span>
+                                <span class="font-medium">R$ 6.968 (13.2%)</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="border-l-4 border-purple-500 pl-4">
+                        <h3 class="font-semibold text-gray-700">Indicadores Financeiros</h3>
+                        <div class="grid grid-cols-2 gap-4 mt-2">
+                            <div>
+                                <p class="text-sm text-gray-600">Resultado Operacional</p>
+                                <p class="text-xl font-bold text-blue-600">R$ 20.249</p>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-600">Lucro Líquido</p>
+                                <p class="text-xl font-bold text-green-600">R$ -2.715</p>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-600">Margem Contribuição</p>
+                                <p class="text-xl font-bold text-purple-600">75.4%</p>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-600">Saldo Final Caixa</p>
+                                <p class="text-xl font-bold text-gray-700">R$ 27.611</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                    <i data-feather="alert-triangle" class="w-5 h-5"></i>
+                    Pontos de Atenção
+                </h2>
+                <div class="space-y-3">
+                    <div class="flex items-start gap-2">
+                        <i data-feather="alert-circle" class="w-5 h-5 text-yellow-500 mt-0.5"></i>
+                        <div>
+                            <p class="text-sm font-medium text-gray-700">PLR Elevado</p>
+                            <p class="text-xs text-gray-600">PLR representa 43.6% das despesas de Novembro</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-2">
+                        <i data-feather="trending-down" class="w-5 h-5 text-red-500 mt-0.5"></i>
+                        <div>
+                            <p class="text-sm font-medium text-gray-700">Caixa em Queda</p>
+                            <p class="text-xs text-gray-600">Saldo reduziu 52% desde Janeiro</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-2">
+                        <i data-feather="target" class="w-5 h-5 text-blue-500 mt-0.5"></i>
+                        <div>
+                            <p class="text-sm font-medium text-gray-700">Dependência Tráfego</p>
+                            <p class="text-xs text-gray-600">74.2% das receitas vêm de tráfego</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-2">
+                        <i data-feather="arrow-up" class="w-5 h-5 text-green-500 mt-0.5"></i>
+                        <div>
+                            <p class="text-sm font-medium text-gray-700">Boa Margem</p>
+                            <p class="text-xs text-gray-600">Margem de contribuição de 75.4% é saudável</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Cash Flow Projection -->
+        <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                <i data-feather="activity" class="w-5 h-5"></i>
+                Projeção de Fluxo de Caixa - Próximos 6 Meses
+            </h2>
+            <canvas id="projectionChart"></canvas>
+            
+            <div class="mt-6 p-4 bg-blue-50 rounded-lg">
+                <h3 class="font-semibold text-gray-700 mb-2">Diretrizes e Recomendações:</h3>
+                <ul class="space-y-2 text-sm text-gray-600">
+                    <li class="flex items-start gap-2">
+                        <i data-feather="check-circle" class="w-4 h-4 text-green-500 mt-0.5"></i>
+                        <span>Reduzir PLR para máximo 30% do lucro operacional para melhorar fluxo</span>
+                    </li>
+                    <li class="flex items-start gap-2">
+                        <i data-feather="check-circle" class="w-4 h-4 text-green-500 mt-0.5"></i>
+                        <span>Diversificar fontes de receita para reduzir dependência de tráfego</span>
+                    </li>
+                    <li class="flex items-start gap-2">
+                        <i data-feather="check-circle" class="w-4 h-4 text-green-500 mt-0.5"></i>
+                        <span>Renegociar contratos de prestadores de serviço para reduzir custos variáveis</span>
+                    </li>
+                    <li class="flex items-start gap-2">
+                        <i data-feather="check-circle" class="w-4 h-4 text-green-500 mt-0.5"></i>
+                        <span>Implementar controle mais rigoroso de despesas administrativas</span>
+                    </li>
+                    <li class="flex items-start gap-2">
+                        <i data-feather="check-circle" class="w-4 h-4 text-green-500 mt-0.5"></i>
+                        <span>Manter reserva mínima de caixa equivalente a 2 meses de despesas fixas</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <!-- Detailed Table -->
+        <div class="bg-white rounded-xl shadow-sm p-6">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                <i data-feather="table" class="w-5 h-5"></i>
+                Resumo Mensal Consolidado
+            </h2>
+            <div class="overflow-x-auto">
+                <table class="w-full text-sm">
+                    <thead>
+                        <tr class="border-b-2 border-gray-200">
+                            <th class="text-left py-2 px-3">Mês</th>
+                            <th class="text-right py-2 px-3">Receitas</th>
+                            <th class="text-right py-2 px-3">Despesas</th>
+                            <th class="text-right py-2 px-3">Resultado</th>
+                            <th class="text-right py-2 px-3">Saldo Caixa</th>
+                        </tr>
+                    </thead>
+                    <tbody id="monthlyTable">
+                        <!-- Table will be populated by JavaScript -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,347 @@
+// Financial Data and Analysis
+const financialData = {
+    months: ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov'],
+    revenues: [32757, 36279, 37684, 34902, 34148, 42104, 33888, 44910, 46361, 49334, 51009],
+    expenses: [38408, 38022, 41353, 38789, 38435, 46177, 43866, 44193, 50352, 51320, 52617],
+    operationalProfit: [14289, 20353, 15290, 14714, 14704, 17381, 11422, 20951, 15252, 20792, 20249],
+    plr: [19396, 19396, 19396, 19396, 19396, 21396, 21396, 21396, 20964, 22964, 22964],
+    cashBalance: [57765, 52114, 50371, 46703, 42816, 42529, 44457, 36478, 25195, 27204, 27102, 27611],
+    revenueBreakdown: {
+        november: {
+            traffic: 37828,
+            webDesign: 9165,
+            services: 2627,
+            hosting: 222,
+            financial: 0,
+            others: 1168
+        }
+    },
+    expensesBreakdown: {
+        november: {
+            plr: 22964,
+            salaries: 11294,
+            variableCosts: 11391,
+            taxes: 4813,
+            administrative: 5827,
+            commercial: 893,
+            property: 89,
+            financial: 61,
+            others: 0
+        }
+    }
+};
+
+// Utility Functions
+function formatCurrency(value) {
+    return new Intl.NumberFormat('pt-BR', {
+        style: 'currency',
+        currency: 'BRL'
+    }).format(value);
+}
+
+function formatPercentage(value) {
+    return (value * 100).toFixed(1) + '%';
+}
+
+// Calculate Financial Metrics
+function calculateMetrics() {
+    const totalRevenues = financialData.revenues.reduce((a, b) => a + b, 0);
+    const totalExpenses = financialData.expenses.reduce((a, b) => a + b, 0);
+    const avgOperationalProfit = financialData.operationalProfit.reduce((a, b) => a + b, 0) / financialData.operationalProfit.length;
+    
+    // Calculate average contribution margin
+    let totalContributionMargin = 0;
+    for (let i = 0; i < financialData.months.length; i++) {
+        const contributionMargin = financialData.revenues[i] * 0.754; // Using average 75.4%
+        totalContributionMargin += contributionMargin;
+    }
+    const avgContributionMargin = totalContributionMargin / totalRevenues;
+
+    return {
+        totalRevenues,
+        totalExpenses,
+        avgOperationalProfit,
+        avgContributionMargin
+    };
+}
+
+// Update KPI Cards
+function updateKPIs() {
+    const metrics = calculateMetrics();
+    
+    document.getElementById('totalRevenues').textContent = formatCurrency(metrics.totalRevenues);
+    document.getElementById('totalExpenses').textContent = formatCurrency(metrics.totalExpenses);
+    document.getElementById('operationalProfit').textContent = formatCurrency(metrics.avgOperationalProfit);
+    document.getElementById('contributionMargin').textContent = formatPercentage(metrics.avgContributionMargin);
+}
+
+// Create Monthly Flow Chart
+function createMonthlyFlowChart() {
+    const ctx = document.getElementById('monthlyFlowChart').getContext('2d');
+    
+    new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov'],
+            datasets: [{
+                label: 'Receitas',
+                data: financialData.revenues,
+                borderColor: '#10B981',
+                backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                tension: 0.4,
+                fill: true
+            }, {
+                label: 'Despesas',
+                data: financialData.expenses,
+                borderColor: '#EF4444',
+                backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                tension: 0.4,
+                fill: true
+            }, {
+                label: 'Saldo Caixa',
+                data: financialData.cashBalance.slice(1),
+                borderColor: '#3B82F6',
+                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                tension: 0.4,
+                fill: false,
+                yAxisID: 'y1'
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'top',
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        callback: function(value) {
+                            return formatCurrency(value);
+                        }
+                    }
+                },
+                y1: {
+                    type: 'linear',
+                    display: true,
+                    position: 'right',
+                    grid: {
+                        drawOnChartArea: false,
+                    },
+                    ticks: {
+                        callback: function(value) {
+                            return formatCurrency(value);
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+
+// Create Revenue Composition Chart
+function createRevenueCompositionChart() {
+    const ctx = document.getElementById('revenueCompositionChart').getContext('2d');
+    const novemberData = financialData.revenueBreakdown.november;
+    
+    new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: ['Tráfego', 'Web Design', 'Serviços', 'Hospedagem', 'Outras'],
+            datasets: [{
+                data: [novemberData.traffic, novemberData.webDesign, novemberData.services, novemberData.hosting, novemberData.others],
+                backgroundColor: [
+                    '#3B82F6',
+                    '#10B981',
+                    '#F59E0B',
+                    '#8B5CF6',
+                    '#EF4444'
+                ]
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'right',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                            const percentage = ((context.raw / total) * 100).toFixed(1);
+                            return context.label + ': ' + formatCurrency(context.raw) + ' (' + percentage + '%)';
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+
+// Create Projection Chart
+function createProjectionChart() {
+    const ctx = document.getElementById('projectionChart').getContext('2d');
+    
+    // Project next 6 months based on trends
+    const projectionMonths = ['Dez', 'Jan', 'Fev', 'Mar', 'Abr', 'Mai'];
+    const lastRevenue = financialData.revenues[financialData.revenues.length - 1];
+    const lastExpense = financialData.expenses[financialData.expenses.length - 1];
+    
+    // Simple linear projection with slight growth for revenues and controlled expenses
+    const projectedRevenues = [
+        lastRevenue * 0.9, // December lower due to holidays
+        lastRevenue * 1.02,
+        lastRevenue * 1.04,
+        lastRevenue * 1.06,
+        lastRevenue * 1.08,
+        lastRevenue * 1.10
+    ];
+    
+    const projectedExpenses = [
+        lastExpense * 0.8, // December lower expenses
+        lastExpense * 0.95, // Cost reduction measures
+        lastExpense * 0.96,
+        lastExpense * 0.97,
+        lastExpense * 0.98,
+        lastExpense * 0.99
+    ];
+    
+    let projectedCash = financialData.cashBalance[financialData.cashBalance.length - 1];
+    const projectedCashFlow = [projectedCash];
+    
+    for (let i = 0; i < projectedRevenues.length; i++) {
+        projectedCash += (projectedRevenues[i] - projectedExpenses[i]);
+        projectedCashFlow.push(projectedCash);
+    }
+    
+    new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: ['Nov', ...projectionMonths],
+            datasets: [{
+                label: 'Receitas Projetadas',
+                data: [null, ...projectedRevenues],
+                borderColor: '#10B981',
+                borderDash: [5, 5],
+                tension: 0.4
+            }, {
+                label: 'Despesas Projetadas',
+                data: [null, ...projectedExpenses],
+                borderColor: '#EF4444',
+                borderDash: [5, 5],
+                tension: 0.4
+            }, {
+                label: 'Saldo Caixa Projetado',
+                data: projectedCashFlow,
+                borderColor: '#3B82F6',
+                backgroundColor: 'rgba(59, 130, 246, 0.2)',
+                fill: true,
+                tension: 0.4
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'top',
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: false,
+                    ticks: {
+                        callback: function(value) {
+                            return formatCurrency(value);
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+
+// Populate Monthly Table
+function populateMonthlyTable() {
+    const tableBody = document.getElementById('monthlyTable');
+    tableBody.innerHTML = '';
+    
+    for (let i = 0; i < financialData.months.length; i++) {
+        const revenue = financialData.revenues[i];
+        const expense = financialData.expenses[i];
+        const result = revenue - expense;
+        const cashBalance = financialData.cashBalance[i + 1];
+        
+        const row = document.createElement('tr');
+        row.className = 'border-b border-gray-100';
+        row.innerHTML = `
+            <td class="py-2 px-3 font-medium">${financialData.months[i].charAt(0).toUpperCase() + financialData.months[i].slice(1)}/25</td>
+            <td class="py-2 px-3 text-right font-medium text-green-600">${formatCurrency(revenue)}</td>
+            <td class="py-2 px-3 text-right font-medium text-red-600">${formatCurrency(expense)}</td>
+            <td class="py-2 px-3 text-right font-medium ${result >= 0 ? 'text-green-600' : 'text-red-600'}">${formatCurrency(result)}</td>
+            <td class="py-2 px-3 text-right font-medium">${formatCurrency(cashBalance)}</td>
+        `;
+        tableBody.appendChild(row);
+    }
+    
+    // Add totals row
+    const totalRevenue = financialData.revenues.reduce((a, b) => a + b, 0);
+    const totalExpense = financialData.expenses.reduce((a, b) => a + b, 0);
+    const totalResult = totalRevenue - totalExpense;
+    
+    const totalsRow = document.createElement('tr');
+    totalsRow.className = 'font-bold bg-gray-50';
+    totalsRow.innerHTML = `
+        <td class="py-2 px-3">TOTAL</td>
+        <td class="py-2 px-3 text-right text-green-600">${formatCurrency(totalRevenue)}</td>
+        <td class="py-2 px-3 text-right text-red-600">${formatCurrency(totalExpense)}</td>
+        <td class="py-2 px-3 text-right ${totalResult >= 0 ? 'text-green-600' : 'text-red-600'}">${formatCurrency(totalResult)}</td>
+        <td class="py-2 px-3 text-right">${formatCurrency(financialData.cashBalance[financialData.cashBalance.length - 1])}</td>
+    `;
+    tableBody.appendChild(totalsRow);
+}
+
+// Export to PDF (placeholder function)
+function exportToPDF() {
+    alert('Função de exportação para PDF será implementada com integração de biblioteca PDF como jsPDF');
+}
+
+// Refresh Data (placeholder function)
+function refreshData() {
+    const cards = document.querySelectorAll('.bg-white');
+    cards.forEach(card => card.classList.add('loading'));
+    
+    setTimeout(() => {
+        cards.forEach(card => card.classList.remove('loading'));
+        updateKPIs();
+        populateMonthlyTable();
+    }, 1000);
+}
+
+// Initialize Dashboard
+document.addEventListener('DOMContentLoaded', function() {
+    updateKPIs();
+    createMonthlyFlowChart();
+    createRevenueCompositionChart();
+    createProjectionChart();
+    populateMonthlyTable();
+});
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});

style.css

@@ -1,28 +1,221 @@
+/* Custom Styles for Financial Dashboard */
+
+:root {
+    --primary-color: #3B82F6;
+    --secondary-color: #10B981;
+    --danger-color: #EF4444;
+    --warning-color: #F59E0B;
+    --dark-color: #1F2937;
+    --light-color: #F9FAFB;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Card Animations */
+.bg-white {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.bg-white:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+/* Chart Container */
+canvas {
+    max-height: 300px;
+}
+
+/* Number Formatting */
+.currency {
+    font-variant-numeric: tabular-nums;
+}
+
+/* Loading Animation */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: .5;
+    }
+}
+
+.loading {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Table Styles */
+table {
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+table th {
+    font-weight: 600;
+    color: var(--dark-color);
+    background-color: var(--light-color);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+table td {
+    border-bottom: 1px solid #E5E7EB;
+}
+
+table tr:hover td {
+    background-color: #F9FAFB;
+}
+
+/* Positive and Negative Values */
+.text-positive {
+    color: var(--secondary-color);
+}
+
+.text-negative {
+    color: var(--danger-color);
+}
+
+/* Custom Button Styles */
+button {
+    transition: all 0.2s ease;
+}
+
+button:hover {
+    transform: translateY(-1px);
+}
+
+button:active {
+    transform: translateY(0);
+}
+
+/* Alert Box Styles */
+.alert-box {
+    border-left-width: 4px;
+    border-left-style: solid;
+}
+
+.alert-success {
+    border-left-color: var(--secondary-color);
+    background-color: #F0FDF4;
+}
+
+.alert-warning {
+    border-left-color: var(--warning-color);
+    background-color: #FFFBEB;
+}
+
+.alert-danger {
+    border-left-color: var(--danger-color);
+    background-color: #FEF2F2;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.alert-info {
+    border-left-color: var(--primary-color);
+    background-color: #EFF6FF;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Responsive Typography */
+@media (max-width: 640px) {
+    .text-3xl {
+        font-size: 1.5rem;
+        line-height: 2rem;
+    }
+    
+    .text-2xl {
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+    }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Print Styles */
+@media print {
+    body {
+        print-color-adjust: exact;
+        -webkit-print-color-adjust: exact;
+    }
+    
+    .no-print {
+        display: none !important;
+    }
+    
+    .bg-white {
+        break-inside: avoid;
+    }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Dark mode support (if implemented later) */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #111827;
+        color: #F9FAFB;
+    }
+    
+    .bg-white {
+        background-color: #1F2937;
+        color: #F9FAFB;
+    }
+    
+    .text-gray-800 {
+        color: #F9FAFB;
+    }
+    
+    .text-gray-600 {
+        color: #D1D5DB;
+    }
 }
+
+/* Smooth Transitions */
+* {
+    transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+/* Custom Tooltip */
+.tooltip {
+    position: relative;
+}
+
+.tooltip::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #1F2937;
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: 50;
+}
+
+.tooltip:hover::after {
+    opacity: 1;
+}