Hugging Face's logo

Spaces:
Guto27
/
dashboardfinancas
Running

App Files Community
dashboardfinancas / index.html
Guto27's picture
Guto27
undefined - Initial Deployment
53ec346 verified
raw
history blame contribute delete
47.3 kB
 <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Financeiro Interativo</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.sidebar {
transition: all 0.3s ease;
}
.sidebar.collapsed {
transform: translateX(-100%);
width: 0;
padding: 0;
overflow: hidden;
}
.main-content.expanded {
width: 100%;
}
.transaction-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.file-upload {
border: 2px dashed #cbd5e0;
transition: all 0.3s ease;
}
.file-upload:hover {
border-color: #4f46e5;
background-color: #f8fafc;
}
@media (max-width: 768px) {
.sidebar {
position: fixed;
z-index: 50;
height: 100vh;
background-color: white;
}
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div id="sidebar" class="sidebar bg-indigo-700 text-white w-64 flex-shrink-0 flex flex-col">
<div class="p-4 flex items-center justify-between border-b border-indigo-600">
<h1 class="text-xl font-bold">Finanças Pessoais</h1>
<button id="toggleSidebar" class="md:hidden text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="flex-1 overflow-y-auto">
<nav class="p-4">
<div class="mb-6">
<h2 class="text-sm uppercase font-semibold text-indigo-300 mb-2">Menu</h2>
<ul>
<li class="mb-2">
<button id="dashboardBtn" class="w-full text-left px-3 py-2 rounded-md bg-indigo-800 flex items-center">
<i class="fas fa-chart-pie mr-2"></i> Dashboard
</button>
</li>
<li class="mb-2">
<button id="transactionsBtn" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-600 flex items-center">
<i class="fas fa-exchange-alt mr-2"></i> Transações
</button>
</li>
<li class="mb-2">
<button id="categoriesBtn" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-600 flex items-center">
<i class="fas fa-tags mr-2"></i> Categorias
</button>
</li>
<li class="mb-2">
<button id="importBtn" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-600 flex items-center">
<i class="fas fa-file-import mr-2"></i> Importar Dados
</button>
</li>
</ul>
</div>
<div>
<h2 class="text-sm uppercase font-semibold text-indigo-300 mb-2">Filtros</h2>
<div class="mb-4">
<label class="block text-sm mb-1">Ano</label>
<select id="yearFilter" class="w-full bg-indigo-600 border border-indigo-500 rounded-md px-3 py-2 text-white">
<option value="all">Todos</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
</select>
</div>
<div class="mb-4">
<label class="block text-sm mb-1">Mês</label>
<select id="monthFilter" class="w-full bg-indigo-600 border border-indigo-500 rounded-md px-3 py-2 text-white">
<option value="all">Todos</option>
<option value="1">Janeiro</option>
<option value="2">Fevereiro</option>
<option value="3">Março</option>
<option value="4">Abril</option>
<option value="5">Maio</option>
<option value="6">Junho</option>
<option value="7">Julho</option>
<option value="8">Agosto</option>
<option value="9">Setembro</option>
<option value="10">Outubro</option>
<option value="11">Novembro</option>
<option value="12">Dezembro</option>
</select>
</div>
<div class="mb-4">
<label class="block text-sm mb-1">Categoria</label>
<select id="categoryFilter" class="w-full bg-indigo-600 border border-indigo-500 rounded-md px-3 py-2 text-white">
<option value="all">Todas</option>
<option value="Alimentação">Alimentação</option>
<option value="Transporte">Transporte</option>
<option value="Moradia">Moradia</option>
<option value="Lazer">Lazer</option>
<option value="Saúde">Saúde</option>
<option value="Educação">Educação</option>
</select>
</div>
<div class="mb-4">
<label class="block text-sm mb-1">Portador</label>
<select id="holderFilter" class="w-full bg-indigo-600 border border-indigo-500 rounded-md px-3 py-2 text-white">
<option value="all">Todos</option>
<option value="João">João</option>
<option value="Maria">Maria</option>
<option value="Família">Família</option>
</select>
</div>
<button id="applyFilters" class="w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded-md">
Aplicar Filtros
</button>
</div>
</nav>
</div>
<div class="p-4 border-t border-indigo-600">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center mr-2">
<i class="fas fa-user text-sm"></i>
</div>
<div>
<p class="text-sm font-medium">Usuário</p>
<p class="text-xs text-indigo-300">admin@email.com</p>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div id="mainContent" class="main-content flex-1 flex flex-col overflow-hidden">
<!-- Top Navigation -->
<header class="bg-white shadow-sm">
<div class="flex items-center justify-between px-4 py-3">
<div class="flex items-center">
<button id="mobileToggleSidebar" class="mr-4 text-gray-600 md:hidden">
<i class="fas fa-bars"></i>
</button>
<h1 id="pageTitle" class="text-xl font-semibold text-gray-800">Dashboard</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<button class="text-gray-600 hover:text-gray-900">
<i class="fas fa-bell"></i>
</button>
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
</div>
<div class="relative">
<button class="text-gray-600 hover:text-gray-900">
<i class="fas fa-cog"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="flex-1 overflow-y-auto p-4 md:p-6">
<!-- Dashboard View -->
<div id="dashboardView">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Receitas</p>
<p class="text-2xl font-bold text-green-600">R$ 8.500,00</p>
</div>
<div class="bg-green-100 p-3 rounded-full">
<i class="fas fa-arrow-up text-green-600"></i>
</div>
</div>
<p class="text-xs text-gray-500 mt-2">+5% em relação ao mês passado</p>
</div>
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Despesas</p>
<p class="text-2xl font-bold text-red-600">R$ 6.200,00</p>
</div>
<div class="bg-red-100 p-3 rounded-full">
<i class="fas fa-arrow-down text-red-600"></i>
</div>
</div>
<p class="text-xs text-gray-500 mt-2">+3% em relação ao mês passado</p>
</div>
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Saldo</p>
<p class="text-2xl font-bold text-indigo-600">R$ 2.300,00</p>
</div>
<div class="bg-indigo-100 p-3 rounded-full">
<i class="fas fa-wallet text-indigo-600"></i>
</div>
</div>
<p class="text-xs text-gray-500 mt-2">+2% em relação ao mês passado</p>
</div>
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Economias</p>
<p class="text-2xl font-bold text-blue-600">R$ 15.750,00</p>
</div>
<div class="bg-blue-100 p-3 rounded-full">
<i class="fas fa-piggy-bank text-blue-600"></i>
</div>
</div>
<p class="text-xs text-gray-500 mt-2">+10% em relação ao mês passado</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold">Despesas por Categoria</h2>
<select class="text-sm border rounded px-2 py-1">
<option>Últimos 6 meses</option>
<option>Este ano</option>
<option>Ano passado</option>
</select>
</div>
<div class="h-64">
<canvas id="categoryChart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold">Evolução Mensal</h2>
<select class="text-sm border rounded px-2 py-1">
<option>2023</option>
<option>2022</option>
<option>2021</option>
</select>
</div>
<div class="h-64">
<canvas id="monthlyTrendChart"></canvas>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold">Despesas por Portador</h2>
<select class="text-sm border rounded px-2 py-1">
<option>Últimos 3 meses</option>
<option>Este ano</option>
</select>
</div>
<div class="h-64">
<canvas id="holderChart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold">Top Despesas</h2>
<select class="text-sm border rounded px-2 py-1">
<option>Este mês</option>
<option>Mês passado</option>
</select>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
<div class="flex items-center">
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-shopping-bag text-red-500 text-sm"></i>
</div>
<div>
<p class="font-medium">Supermercado</p>
<p class="text-xs text-gray-500">10/06/2023</p>
</div>
</div>
<p class="font-semibold text-red-600">R$ 850,00</p>
</div>
<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-car text-blue-500 text-sm"></i>
</div>
<div>
<p class="font-medium">Combustível</p>
<p class="text-xs text-gray-500">08/06/2023</p>
</div>
</div>
<p class="font-semibold text-red-600">R$ 320,00</p>
</div>
<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
<div class="flex items-center">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-utensils text-purple-500 text-sm"></i>
</div>
<div>
<p class="font-medium">Restaurante</p>
<p class="text-xs text-gray-500">05/06/2023</p>
</div>
</div>
<p class="font-semibold text-red-600">R$ 280,00</p>
</div>
<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
<div class="flex items-center">
<div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-gamepad text-yellow-500 text-sm"></i>
</div>
<div>
<p class="font-medium">Lazer</p>
<p class="text-xs text-gray-500">03/06/2023</p>
</div>
</div>
<p class="font-semibold text-red-600">R$ 250,00</p>
</div>
</div>
</div>
</div>
</div>
<!-- Transactions View -->
<div id="transactionsView" class="hidden">
<div class="bg-white rounded-lg shadow overflow-hidden mb-6">
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
<h3 class="text-lg font-medium leading-6 text-gray-900">Transações Recentes</h3>
<div class="mt-2 md:mt-0 flex space-x-2">
<select class="text-sm border rounded px-2 py-1">
<option>Todas as transações</option>
<option>Apenas receitas</option>
<option>Apenas despesas</option>
</select>
<button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">
<i class="fas fa-plus mr-1"></i> Adicionar
</button>
</div>
</div>
</div>
<div class="divide-y divide-gray-200">
<!-- Transaction Item -->
<div class="transaction-card p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
<i class="fas fa-arrow-down text-green-600"></i>
</div>
<div>
<p class="font-medium">Salário</p>
<p class="text-sm text-gray-500">Empresa XYZ</p>
</div>
</div>
<div class="text-right">
<p class="font-semibold text-green-600">R$ 5.000,00</p>
<p class="text-sm text-gray-500">05/06/2023</p>
</div>
</div>
</div>
<!-- Transaction Item -->
<div class="transaction-card p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
<i class="fas fa-shopping-bag text-red-600"></i>
</div>
<div>
<p class="font-medium">Supermercado</p>
<p class="text-sm text-gray-500">Mercado ABC</p>
</div>
</div>
<div class="text-right">
<p class="font-semibold text-red-600">R$ 850,00</p>
<p class="text-sm text-gray-500">10/06/2023</p>
</div>
</div>
</div>
<!-- Transaction Item -->
<div class="transaction-card p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
<i class="fas fa-car text-red-600"></i>
</div>
<div>
<p class="font-medium">Combustível</p>
<p class="text-sm text-gray-500">Posto Shell</p>
</div>
</div>
<div class="text-right">
<p class="font-semibold text-red-600">R$ 320,00</p>
<p class="text-sm text-gray-500">08/06/2023</p>
</div>
</div>
</div>
<!-- Transaction Item -->
<div class="transaction-card p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
<i class="fas fa-utensils text-red-600"></i>
</div>
<div>
<p class="font-medium">Restaurante</p>
<p class="text-sm text-gray-500">Restaurante XYZ</p>
</div>
</div>
<div class="text-right">
<p class="font-semibold text-red-600">R$ 280,00</p>
<p class="text-sm text-gray-500">05/06/2023</p>
</div>
</div>
</div>
</div>
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
<button class="text-indigo-600 hover:text-indigo-900 font-medium">
Ver todas as transações
</button>
</div>
</div>
</div>
<!-- Categories View -->
<div id="categoriesView" class="hidden">
<div class="bg-white rounded-lg shadow overflow-hidden mb-6">
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
<h3 class="text-lg font-medium leading-6 text-gray-900">Categorias</h3>
<button class="mt-2 md:mt-0 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">
<i class="fas fa-plus mr-1"></i> Nova Categoria
</button>
</div>
</div>
<div class="divide-y divide-gray-200">
<!-- Category Item -->
<div class="p-4 hover:bg-gray-50">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
<i class="fas fa-shopping-bag text-red-600"></i>
</div>
<div>
<p class="font-medium">Alimentação</p>
<p class="text-sm text-gray-500">Supermercados, restaurantes, etc.</p>
</div>
</div>
<div class="flex items-center space-x-2">
<span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">R$ 1.200,00</span>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
</div>
<!-- Category Item -->
<div class="p-4 hover:bg-gray-50">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-car text-blue-600"></i>
</div>
<div>
<p class="font-medium">Transporte</p>
<p class="text-sm text-gray-500">Combustível, táxi, transporte público</p>
</div>
</div>
<div class="flex items-center space-x-2">
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">R$ 800,00</span>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
</div>
<!-- Category Item -->
<div class="p-4 hover:bg-gray-50">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
<i class="fas fa-home text-purple-600"></i>
</div>
<div>
<p class="font-medium">Moradia</p>
<p class="text-sm text-gray-500">Aluguel, condomínio, contas</p>
</div>
</div>
<div class="flex items-center space-x-2">
<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">R$ 2.500,00</span>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
</div>
<!-- Category Item -->
<div class="p-4 hover:bg-gray-50">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
<i class="fas fa-gamepad text-yellow-600"></i>
</div>
<div>
<p class="font-medium">Lazer</p>
<p class="text-sm text-gray-500">Cinema, viagens, hobbies</p>
</div>
</div>
<div class="flex items-center space-x-2">
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">R$ 600,00</span>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Import View -->
<div id="importView" class="hidden">
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">Importar Dados Financeiros</h3>
</div>
<div class="px-4 py-5 sm:p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-md font-medium mb-3">Importar de Arquivos</h4>
<div class="file-upload p-8 rounded-lg text-center cursor-pointer mb-4">
<i class="fas fa-file-import text-4xl text-indigo-500 mb-2"></i>
<p class="font-medium">Arraste e solte arquivos aqui</p>
<p class="text-sm text-gray-500 mt-1">ou clique para selecionar</p>
<input type="file" class="hidden" multiple>
</div>
<div class="text-sm text-gray-500 mb-4">
<p>Formatos suportados: PDF, CSV, XLSX</p>
<p>Tamanho máximo: 10MB por arquivo</p>
</div>
<div class="flex space-x-2">
<button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
<i class="fas fa-upload mr-2"></i> Importar
</button>
<button class="border border-gray-300 px-4 py-2 rounded-md hover:bg-gray-50">
Cancelar
</button>
</div>
</div>
<div>
<h4 class="text-md font-medium mb-3">Importar de Bancos</h4>
<div class="space-y-3">
<button class="w-full flex items-center p-3 border rounded-md hover:bg-gray-50">
<img src="https://logodownload.org/wp-content/uploads/2018/10/itau-logo.png" class="h-6 mr-3" alt="Itaú">
<span>Conectar ao Itaú</span>
</button>
<button class="w-full flex items-center p-3 border rounded-md hover:bg-gray-50">
<img src="https://logodownload.org/wp-content/uploads/2020/09/nubank-logo.png" class="h-6 mr-3" alt="Nubank">
<span>Conectar ao Nubank</span>
</button>
<button class="w-full flex items-center p-3 border rounded-md hover:bg-gray-50">
<img src="https://logodownload.org/wp-content/uploads/2020/09/c6-bank-logo.png" class="h-6 mr-3" alt="C6 Bank">
<span>Conectar ao C6 Bank</span>
</button>
</div>
<div class="mt-4 p-3 bg-blue-50 rounded-md">
<p class="text-sm text-blue-800">
<i class="fas fa-info-circle mr-1"></i> As conexões com bancos utilizam APIs seguras e não armazenamos suas credenciais.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Sidebar toggle for mobile
const toggleSidebar = document.getElementById('toggleSidebar');
const mobileToggleSidebar = document.getElementById('mobileToggleSidebar');
const sidebar = document.getElementById('sidebar');
const mainContent = document.getElementById('mainContent');
mobileToggleSidebar.addEventListener('click', () => {
sidebar.classList.toggle('collapsed');
mainContent.classList.toggle('expanded');
});
toggleSidebar.addEventListener('click', () => {
sidebar.classList.toggle('collapsed');
mainContent.classList.toggle('expanded');
});
// Navigation between views
const dashboardBtn = document.getElementById('dashboardBtn');
const transactionsBtn = document.getElementById('transactionsBtn');
const categoriesBtn = document.getElementById('categoriesBtn');
const importBtn = document.getElementById('importBtn');
const dashboardView = document.getElementById('dashboardView');
const transactionsView = document.getElementById('transactionsView');
const categoriesView = document.getElementById('categoriesView');
const importView = document.getElementById('importView');
const pageTitle = document.getElementById('pageTitle');
function resetActiveButtons() {
dashboardBtn.classList.remove('bg-indigo-800');
dashboardBtn.classList.add('hover:bg-indigo-600');
transactionsBtn.classList.remove('bg-indigo-800');
transactionsBtn.classList.add('hover:bg-indigo-600');
categoriesBtn.classList.remove('bg-indigo-800');
categoriesBtn.classList.add('hover:bg-indigo-600');
importBtn.classList.remove('bg-indigo-800');
importBtn.classList.add('hover:bg-indigo-600');
}
function hideAllViews() {
dashboardView.classList.add('hidden');
transactionsView.classList.add('hidden');
categoriesView.classList.add('hidden');
importView.classList.add('hidden');
}
dashboardBtn.addEventListener('click', () => {
resetActiveButtons();
dashboardBtn.classList.add('bg-indigo-800');
dashboardBtn.classList.remove('hover:bg-indigo-600');
hideAllViews();
dashboardView.classList.remove('hidden');
pageTitle.textContent = 'Dashboard';
// On mobile, close sidebar after navigation
if (window.innerWidth < 768) {
sidebar.classList.add('collapsed');
mainContent.classList.add('expanded');
}
});
transactionsBtn.addEventListener('click', () => {
resetActiveButtons();
transactionsBtn.classList.add('bg-indigo-800');
transactionsBtn.classList.remove('hover:bg-indigo-600');
hideAllViews();
transactionsView.classList.remove('hidden');
pageTitle.textContent = 'Transações';
if (window.innerWidth < 768) {
sidebar.classList.add('collapsed');
mainContent.classList.add('expanded');
}
});
categoriesBtn.addEventListener('click', () => {
resetActiveButtons();
categoriesBtn.classList.add('bg-indigo-800');
categoriesBtn.classList.remove('hover:bg-indigo-600');
hideAllViews();
categoriesView.classList.remove('hidden');
pageTitle.textContent = 'Categorias';
if (window.innerWidth < 768) {
sidebar.classList.add('collapsed');
mainContent.classList.add('expanded');
}
});
importBtn.addEventListener('click', () => {
resetActiveButtons();
importBtn.classList.add('bg-indigo-800');
importBtn.classList.remove('hover:bg-indigo-600');
hideAllViews();
importView.classList.remove('hidden');
pageTitle.textContent = 'Importar Dados';
if (window.innerWidth < 768) {
sidebar.classList.add('collapsed');
mainContent.classList.add('expanded');
}
});
// Apply filters
document.getElementById('applyFilters').addEventListener('click', () => {
const year = document.getElementById('yearFilter').value;
const month = document.getElementById('monthFilter').value;
const category = document.getElementById('categoryFilter').value;
const holder = document.getElementById('holderFilter').value;
alert(`Filtros aplicados:\nAno: ${year}\nMês: ${month}\nCategoria: ${category}\nPortador: ${holder}`);
// Here you would typically update the charts and data based on filters
// For this example, we'll just log the filters
console.log({year, month, category, holder});
});
// Initialize charts
document.addEventListener('DOMContentLoaded', function() {
// Category Chart
const categoryCtx = document.getElementById('categoryChart').getContext('2d');
const categoryChart = new Chart(categoryCtx, {
type: 'doughnut',
data: {
labels: ['Alimentação', 'Transporte', 'Moradia', 'Lazer', 'Saúde', 'Educação'],
datasets: [{
data: [1200, 800, 2500, 600, 300, 400],
backgroundColor: [
'#EF4444',
'#3B82F6',
'#8B5CF6',
'#F59E0B',
'#10B981',
'#6366F1'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
}
}
}
});
// Monthly Trend Chart
const monthlyTrendCtx = document.getElementById('monthlyTrendChart').getContext('2d');
const monthlyTrendChart = new Chart(monthlyTrendCtx, {
type: 'line',
data: {
labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
datasets: [
{
label: 'Receitas',
data: [5000, 4800, 5200, 5100, 5300, 5500, 5400, 5600, 5800, 5700, 5900, 6000],
borderColor: '#10B981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
fill: true,
tension: 0.3
},
{
label: 'Despesas',
data: [4200, 4000, 4500, 4300, 4600, 4800, 4700, 4900, 5000, 5100, 5200, 5300],
borderColor: '#EF4444',
backgroundColor: 'rgba(239, 68, 68, 0.1)',
fill: true,
tension: 0.3
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
}
},
scales: {
y: {
beginAtZero: false
}
}
}
});
// Holder Chart
const holderCtx = document.getElementById('holderChart').getContext('2d');
const holderChart = new Chart(holderCtx, {
type: 'bar',
data: {
labels: ['João', 'Maria', 'Família'],
datasets: [{
label: 'Despesas por Portador',
data: [3200, 1800, 1200],
backgroundColor: [
'#3B82F6',
'#8B5CF6',
'#F59E0B'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
});
// File upload interaction
const fileUpload = document.querySelector('.file-upload');
const fileInput = fileUpload.querySelector('input[type="file"]');
fileUpload.addEventListener('click', () => {
fileInput.click();
});
fileInput.addEventListener('change', () => {
if (fileInput.files.length > 0) {
fileUpload.innerHTML = `
<i class="fas fa-check-circle text-green-500 text-4xl mb-2"></i>
<p class="font-medium">${fileInput.files.length} arquivo(s) selecionado(s)</p>
<p class="text-sm text-gray-500 mt-1">Pronto para importar</p>
`;
}
});
</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=Guto27/dashboardfinancas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>