Hugging Face's logo

Spaces:
Guto27
/
dashboardfinancas
Running

App Files Community
Guto27 commited on
Commit
53ec346
·
verified ·
1 Parent(s): 7186d63

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +836 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dashboardfinancas
3
- emoji: 💻
4
- colorFrom: yellow
5
  colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: dashboardfinancas
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,836 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dashboard Financeiro Interativo</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ .sidebar {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .sidebar.collapsed {
15
+ transform: translateX(-100%);
16
+ width: 0;
17
+ padding: 0;
18
+ overflow: hidden;
19
+ }
20
+ .main-content.expanded {
21
+ width: 100%;
22
+ }
23
+ .transaction-card:hover {
24
+ transform: translateY(-2px);
25
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
26
+ }
27
+ .file-upload {
28
+ border: 2px dashed #cbd5e0;
29
+ transition: all 0.3s ease;
30
+ }
31
+ .file-upload:hover {
32
+ border-color: #4f46e5;
33
+ background-color: #f8fafc;
34
+ }
35
+ @media (max-width: 768px) {
36
+ .sidebar {
37
+ position: fixed;
38
+ z-index: 50;
39
+ height: 100vh;
40
+ background-color: white;
41
+ }
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-50">
46
+ <div class="flex h-screen overflow-hidden">
47
+ <!-- Sidebar -->
48
+ <div id="sidebar" class="sidebar bg-indigo-700 text-white w-64 flex-shrink-0 flex flex-col">
49
+ <div class="p-4 flex items-center justify-between border-b border-indigo-600">
50
+ <h1 class="text-xl font-bold">Finanças Pessoais</h1>
51
+ <button id="toggleSidebar" class="md:hidden text-white">
52
+ <i class="fas fa-times"></i>
53
+ </button>
54
+ </div>
55
+ <div class="flex-1 overflow-y-auto">
56
+ <nav class="p-4">
57
+ <div class="mb-6">
58
+ <h2 class="text-sm uppercase font-semibold text-indigo-300 mb-2">Menu</h2>
59
+ <ul>
60
+ <li class="mb-2">
61
+ <button id="dashboardBtn" class="w-full text-left px-3 py-2 rounded-md bg-indigo-800 flex items-center">
62
+ <i class="fas fa-chart-pie mr-2"></i> Dashboard
63
+ </button>
64
+ </li>
65
+ <li class="mb-2">
66
+ <button id="transactionsBtn" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-600 flex items-center">
67
+ <i class="fas fa-exchange-alt mr-2"></i> Transações
68
+ </button>
69
+ </li>
70
+ <li class="mb-2">
71
+ <button id="categoriesBtn" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-600 flex items-center">
72
+ <i class="fas fa-tags mr-2"></i> Categorias
73
+ </button>
74
+ </li>
75
+ <li class="mb-2">
76
+ <button id="importBtn" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-600 flex items-center">
77
+ <i class="fas fa-file-import mr-2"></i> Importar Dados
78
+ </button>
79
+ </li>
80
+ </ul>
81
+ </div>
82
+ <div>
83
+ <h2 class="text-sm uppercase font-semibold text-indigo-300 mb-2">Filtros</h2>
84
+ <div class="mb-4">
85
+ <label class="block text-sm mb-1">Ano</label>
86
+ <select id="yearFilter" class="w-full bg-indigo-600 border border-indigo-500 rounded-md px-3 py-2 text-white">
87
+ <option value="all">Todos</option>
88
+ <option value="2023">2023</option>
89
+ <option value="2022">2022</option>
90
+ </select>
91
+ </div>
92
+ <div class="mb-4">
93
+ <label class="block text-sm mb-1">Mês</label>
94
+ <select id="monthFilter" class="w-full bg-indigo-600 border border-indigo-500 rounded-md px-3 py-2 text-white">
95
+ <option value="all">Todos</option>
96
+ <option value="1">Janeiro</option>
97
+ <option value="2">Fevereiro</option>
98
+ <option value="3">Março</option>
99
+ <option value="4">Abril</option>
100
+ <option value="5">Maio</option>
101
+ <option value="6">Junho</option>
102
+ <option value="7">Julho</option>
103
+ <option value="8">Agosto</option>
104
+ <option value="9">Setembro</option>
105
+ <option value="10">Outubro</option>
106
+ <option value="11">Novembro</option>
107
+ <option value="12">Dezembro</option>
108
+ </select>
109
+ </div>
110
+ <div class="mb-4">
111
+ <label class="block text-sm mb-1">Categoria</label>
112
+ <select id="categoryFilter" class="w-full bg-indigo-600 border border-indigo-500 rounded-md px-3 py-2 text-white">
113
+ <option value="all">Todas</option>
114
+ <option value="Alimentação">Alimentação</option>
115
+ <option value="Transporte">Transporte</option>
116
+ <option value="Moradia">Moradia</option>
117
+ <option value="Lazer">Lazer</option>
118
+ <option value="Saúde">Saúde</option>
119
+ <option value="Educação">Educação</option>
120
+ </select>
121
+ </div>
122
+ <div class="mb-4">
123
+ <label class="block text-sm mb-1">Portador</label>
124
+ <select id="holderFilter" class="w-full bg-indigo-600 border border-indigo-500 rounded-md px-3 py-2 text-white">
125
+ <option value="all">Todos</option>
126
+ <option value="João">João</option>
127
+ <option value="Maria">Maria</option>
128
+ <option value="Família">Família</option>
129
+ </select>
130
+ </div>
131
+ <button id="applyFilters" class="w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded-md">
132
+ Aplicar Filtros
133
+ </button>
134
+ </div>
135
+ </nav>
136
+ </div>
137
+ <div class="p-4 border-t border-indigo-600">
138
+ <div class="flex items-center">
139
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center mr-2">
140
+ <i class="fas fa-user text-sm"></i>
141
+ </div>
142
+ <div>
143
+ <p class="text-sm font-medium">Usuário</p>
144
+ <p class="text-xs text-indigo-300">admin@email.com</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Main Content -->
151
+ <div id="mainContent" class="main-content flex-1 flex flex-col overflow-hidden">
152
+ <!-- Top Navigation -->
153
+ <header class="bg-white shadow-sm">
154
+ <div class="flex items-center justify-between px-4 py-3">
155
+ <div class="flex items-center">
156
+ <button id="mobileToggleSidebar" class="mr-4 text-gray-600 md:hidden">
157
+ <i class="fas fa-bars"></i>
158
+ </button>
159
+ <h1 id="pageTitle" class="text-xl font-semibold text-gray-800">Dashboard</h1>
160
+ </div>
161
+ <div class="flex items-center space-x-4">
162
+ <div class="relative">
163
+ <button class="text-gray-600 hover:text-gray-900">
164
+ <i class="fas fa-bell"></i>
165
+ </button>
166
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
167
+ </div>
168
+ <div class="relative">
169
+ <button class="text-gray-600 hover:text-gray-900">
170
+ <i class="fas fa-cog"></i>
171
+ </button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </header>
176
+
177
+ <!-- Page Content -->
178
+ <div class="flex-1 overflow-y-auto p-4 md:p-6">
179
+ <!-- Dashboard View -->
180
+ <div id="dashboardView">
181
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
182
+ <div class="bg-white rounded-lg shadow p-4">
183
+ <div class="flex items-center justify-between">
184
+ <div>
185
+ <p class="text-sm text-gray-500">Receitas</p>
186
+ <p class="text-2xl font-bold text-green-600">R$ 8.500,00</p>
187
+ </div>
188
+ <div class="bg-green-100 p-3 rounded-full">
189
+ <i class="fas fa-arrow-up text-green-600"></i>
190
+ </div>
191
+ </div>
192
+ <p class="text-xs text-gray-500 mt-2">+5% em relação ao mês passado</p>
193
+ </div>
194
+ <div class="bg-white rounded-lg shadow p-4">
195
+ <div class="flex items-center justify-between">
196
+ <div>
197
+ <p class="text-sm text-gray-500">Despesas</p>
198
+ <p class="text-2xl font-bold text-red-600">R$ 6.200,00</p>
199
+ </div>
200
+ <div class="bg-red-100 p-3 rounded-full">
201
+ <i class="fas fa-arrow-down text-red-600"></i>
202
+ </div>
203
+ </div>
204
+ <p class="text-xs text-gray-500 mt-2">+3% em relação ao mês passado</p>
205
+ </div>
206
+ <div class="bg-white rounded-lg shadow p-4">
207
+ <div class="flex items-center justify-between">
208
+ <div>
209
+ <p class="text-sm text-gray-500">Saldo</p>
210
+ <p class="text-2xl font-bold text-indigo-600">R$ 2.300,00</p>
211
+ </div>
212
+ <div class="bg-indigo-100 p-3 rounded-full">
213
+ <i class="fas fa-wallet text-indigo-600"></i>
214
+ </div>
215
+ </div>
216
+ <p class="text-xs text-gray-500 mt-2">+2% em relação ao mês passado</p>
217
+ </div>
218
+ <div class="bg-white rounded-lg shadow p-4">
219
+ <div class="flex items-center justify-between">
220
+ <div>
221
+ <p class="text-sm text-gray-500">Economias</p>
222
+ <p class="text-2xl font-bold text-blue-600">R$ 15.750,00</p>
223
+ </div>
224
+ <div class="bg-blue-100 p-3 rounded-full">
225
+ <i class="fas fa-piggy-bank text-blue-600"></i>
226
+ </div>
227
+ </div>
228
+ <p class="text-xs text-gray-500 mt-2">+10% em relação ao mês passado</p>
229
+ </div>
230
+ </div>
231
+
232
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
233
+ <div class="bg-white rounded-lg shadow p-4">
234
+ <div class="flex items-center justify-between mb-4">
235
+ <h2 class="text-lg font-semibold">Despesas por Categoria</h2>
236
+ <select class="text-sm border rounded px-2 py-1">
237
+ <option>Últimos 6 meses</option>
238
+ <option>Este ano</option>
239
+ <option>Ano passado</option>
240
+ </select>
241
+ </div>
242
+ <div class="h-64">
243
+ <canvas id="categoryChart"></canvas>
244
+ </div>
245
+ </div>
246
+ <div class="bg-white rounded-lg shadow p-4">
247
+ <div class="flex items-center justify-between mb-4">
248
+ <h2 class="text-lg font-semibold">Evolução Mensal</h2>
249
+ <select class="text-sm border rounded px-2 py-1">
250
+ <option>2023</option>
251
+ <option>2022</option>
252
+ <option>2021</option>
253
+ </select>
254
+ </div>
255
+ <div class="h-64">
256
+ <canvas id="monthlyTrendChart"></canvas>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
262
+ <div class="bg-white rounded-lg shadow p-4">
263
+ <div class="flex items-center justify-between mb-4">
264
+ <h2 class="text-lg font-semibold">Despesas por Portador</h2>
265
+ <select class="text-sm border rounded px-2 py-1">
266
+ <option>Últimos 3 meses</option>
267
+ <option>Este ano</option>
268
+ </select>
269
+ </div>
270
+ <div class="h-64">
271
+ <canvas id="holderChart"></canvas>
272
+ </div>
273
+ </div>
274
+ <div class="bg-white rounded-lg shadow p-4">
275
+ <div class="flex items-center justify-between mb-4">
276
+ <h2 class="text-lg font-semibold">Top Despesas</h2>
277
+ <select class="text-sm border rounded px-2 py-1">
278
+ <option>Este mês</option>
279
+ <option>Mês passado</option>
280
+ </select>
281
+ </div>
282
+ <div class="space-y-3">
283
+ <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
284
+ <div class="flex items-center">
285
+ <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3">
286
+ <i class="fas fa-shopping-bag text-red-500 text-sm"></i>
287
+ </div>
288
+ <div>
289
+ <p class="font-medium">Supermercado</p>
290
+ <p class="text-xs text-gray-500">10/06/2023</p>
291
+ </div>
292
+ </div>
293
+ <p class="font-semibold text-red-600">R$ 850,00</p>
294
+ </div>
295
+ <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
296
+ <div class="flex items-center">
297
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
298
+ <i class="fas fa-car text-blue-500 text-sm"></i>
299
+ </div>
300
+ <div>
301
+ <p class="font-medium">Combustível</p>
302
+ <p class="text-xs text-gray-500">08/06/2023</p>
303
+ </div>
304
+ </div>
305
+ <p class="font-semibold text-red-600">R$ 320,00</p>
306
+ </div>
307
+ <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
308
+ <div class="flex items-center">
309
+ <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
310
+ <i class="fas fa-utensils text-purple-500 text-sm"></i>
311
+ </div>
312
+ <div>
313
+ <p class="font-medium">Restaurante</p>
314
+ <p class="text-xs text-gray-500">05/06/2023</p>
315
+ </div>
316
+ </div>
317
+ <p class="font-semibold text-red-600">R$ 280,00</p>
318
+ </div>
319
+ <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
320
+ <div class="flex items-center">
321
+ <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
322
+ <i class="fas fa-gamepad text-yellow-500 text-sm"></i>
323
+ </div>
324
+ <div>
325
+ <p class="font-medium">Lazer</p>
326
+ <p class="text-xs text-gray-500">03/06/2023</p>
327
+ </div>
328
+ </div>
329
+ <p class="font-semibold text-red-600">R$ 250,00</p>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Transactions View -->
337
+ <div id="transactionsView" class="hidden">
338
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
339
+ <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
340
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
341
+ <h3 class="text-lg font-medium leading-6 text-gray-900">Transações Recentes</h3>
342
+ <div class="mt-2 md:mt-0 flex space-x-2">
343
+ <select class="text-sm border rounded px-2 py-1">
344
+ <option>Todas as transações</option>
345
+ <option>Apenas receitas</option>
346
+ <option>Apenas despesas</option>
347
+ </select>
348
+ <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">
349
+ <i class="fas fa-plus mr-1"></i> Adicionar
350
+ </button>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ <div class="divide-y divide-gray-200">
355
+ <!-- Transaction Item -->
356
+ <div class="transaction-card p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
357
+ <div class="flex items-center justify-between">
358
+ <div class="flex items-center">
359
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
360
+ <i class="fas fa-arrow-down text-green-600"></i>
361
+ </div>
362
+ <div>
363
+ <p class="font-medium">Salário</p>
364
+ <p class="text-sm text-gray-500">Empresa XYZ</p>
365
+ </div>
366
+ </div>
367
+ <div class="text-right">
368
+ <p class="font-semibold text-green-600">R$ 5.000,00</p>
369
+ <p class="text-sm text-gray-500">05/06/2023</p>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ <!-- Transaction Item -->
374
+ <div class="transaction-card p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
375
+ <div class="flex items-center justify-between">
376
+ <div class="flex items-center">
377
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
378
+ <i class="fas fa-shopping-bag text-red-600"></i>
379
+ </div>
380
+ <div>
381
+ <p class="font-medium">Supermercado</p>
382
+ <p class="text-sm text-gray-500">Mercado ABC</p>
383
+ </div>
384
+ </div>
385
+ <div class="text-right">
386
+ <p class="font-semibold text-red-600">R$ 850,00</p>
387
+ <p class="text-sm text-gray-500">10/06/2023</p>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ <!-- Transaction Item -->
392
+ <div class="transaction-card p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
393
+ <div class="flex items-center justify-between">
394
+ <div class="flex items-center">
395
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
396
+ <i class="fas fa-car text-red-600"></i>
397
+ </div>
398
+ <div>
399
+ <p class="font-medium">Combustível</p>
400
+ <p class="text-sm text-gray-500">Posto Shell</p>
401
+ </div>
402
+ </div>
403
+ <div class="text-right">
404
+ <p class="font-semibold text-red-600">R$ 320,00</p>
405
+ <p class="text-sm text-gray-500">08/06/2023</p>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ <!-- Transaction Item -->
410
+ <div class="transaction-card p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
411
+ <div class="flex items-center justify-between">
412
+ <div class="flex items-center">
413
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
414
+ <i class="fas fa-utensils text-red-600"></i>
415
+ </div>
416
+ <div>
417
+ <p class="font-medium">Restaurante</p>
418
+ <p class="text-sm text-gray-500">Restaurante XYZ</p>
419
+ </div>
420
+ </div>
421
+ <div class="text-right">
422
+ <p class="font-semibold text-red-600">R$ 280,00</p>
423
+ <p class="text-sm text-gray-500">05/06/2023</p>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
429
+ <button class="text-indigo-600 hover:text-indigo-900 font-medium">
430
+ Ver todas as transações
431
+ </button>
432
+ </div>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- Categories View -->
437
+ <div id="categoriesView" class="hidden">
438
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
439
+ <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
440
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
441
+ <h3 class="text-lg font-medium leading-6 text-gray-900">Categorias</h3>
442
+ <button class="mt-2 md:mt-0 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">
443
+ <i class="fas fa-plus mr-1"></i> Nova Categoria
444
+ </button>
445
+ </div>
446
+ </div>
447
+ <div class="divide-y divide-gray-200">
448
+ <!-- Category Item -->
449
+ <div class="p-4 hover:bg-gray-50">
450
+ <div class="flex items-center justify-between">
451
+ <div class="flex items-center">
452
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
453
+ <i class="fas fa-shopping-bag text-red-600"></i>
454
+ </div>
455
+ <div>
456
+ <p class="font-medium">Alimentação</p>
457
+ <p class="text-sm text-gray-500">Supermercados, restaurantes, etc.</p>
458
+ </div>
459
+ </div>
460
+ <div class="flex items-center space-x-2">
461
+ <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">R$ 1.200,00</span>
462
+ <button class="text-gray-400 hover:text-gray-600">
463
+ <i class="fas fa-ellipsis-v"></i>
464
+ </button>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ <!-- Category Item -->
469
+ <div class="p-4 hover:bg-gray-50">
470
+ <div class="flex items-center justify-between">
471
+ <div class="flex items-center">
472
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
473
+ <i class="fas fa-car text-blue-600"></i>
474
+ </div>
475
+ <div>
476
+ <p class="font-medium">Transporte</p>
477
+ <p class="text-sm text-gray-500">Combustível, táxi, transporte público</p>
478
+ </div>
479
+ </div>
480
+ <div class="flex items-center space-x-2">
481
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">R$ 800,00</span>
482
+ <button class="text-gray-400 hover:text-gray-600">
483
+ <i class="fas fa-ellipsis-v"></i>
484
+ </button>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ <!-- Category Item -->
489
+ <div class="p-4 hover:bg-gray-50">
490
+ <div class="flex items-center justify-between">
491
+ <div class="flex items-center">
492
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
493
+ <i class="fas fa-home text-purple-600"></i>
494
+ </div>
495
+ <div>
496
+ <p class="font-medium">Moradia</p>
497
+ <p class="text-sm text-gray-500">Aluguel, condomínio, contas</p>
498
+ </div>
499
+ </div>
500
+ <div class="flex items-center space-x-2">
501
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">R$ 2.500,00</span>
502
+ <button class="text-gray-400 hover:text-gray-600">
503
+ <i class="fas fa-ellipsis-v"></i>
504
+ </button>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ <!-- Category Item -->
509
+ <div class="p-4 hover:bg-gray-50">
510
+ <div class="flex items-center justify-between">
511
+ <div class="flex items-center">
512
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
513
+ <i class="fas fa-gamepad text-yellow-600"></i>
514
+ </div>
515
+ <div>
516
+ <p class="font-medium">Lazer</p>
517
+ <p class="text-sm text-gray-500">Cinema, viagens, hobbies</p>
518
+ </div>
519
+ </div>
520
+ <div class="flex items-center space-x-2">
521
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">R$ 600,00</span>
522
+ <button class="text-gray-400 hover:text-gray-600">
523
+ <i class="fas fa-ellipsis-v"></i>
524
+ </button>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+
532
+ <!-- Import View -->
533
+ <div id="importView" class="hidden">
534
+ <div class="bg-white rounded-lg shadow overflow-hidden">
535
+ <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
536
+ <h3 class="text-lg font-medium leading-6 text-gray-900">Importar Dados Financeiros</h3>
537
+ </div>
538
+ <div class="px-4 py-5 sm:p-6">
539
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
540
+ <div>
541
+ <h4 class="text-md font-medium mb-3">Importar de Arquivos</h4>
542
+ <div class="file-upload p-8 rounded-lg text-center cursor-pointer mb-4">
543
+ <i class="fas fa-file-import text-4xl text-indigo-500 mb-2"></i>
544
+ <p class="font-medium">Arraste e solte arquivos aqui</p>
545
+ <p class="text-sm text-gray-500 mt-1">ou clique para selecionar</p>
546
+ <input type="file" class="hidden" multiple>
547
+ </div>
548
+ <div class="text-sm text-gray-500 mb-4">
549
+ <p>Formatos suportados: PDF, CSV, XLSX</p>
550
+ <p>Tamanho máximo: 10MB por arquivo</p>
551
+ </div>
552
+ <div class="flex space-x-2">
553
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
554
+ <i class="fas fa-upload mr-2"></i> Importar
555
+ </button>
556
+ <button class="border border-gray-300 px-4 py-2 rounded-md hover:bg-gray-50">
557
+ Cancelar
558
+ </button>
559
+ </div>
560
+ </div>
561
+ <div>
562
+ <h4 class="text-md font-medium mb-3">Importar de Bancos</h4>
563
+ <div class="space-y-3">
564
+ <button class="w-full flex items-center p-3 border rounded-md hover:bg-gray-50">
565
+ <img src="https://logodownload.org/wp-content/uploads/2018/10/itau-logo.png" class="h-6 mr-3" alt="Itaú">
566
+ <span>Conectar ao Itaú</span>
567
+ </button>
568
+ <button class="w-full flex items-center p-3 border rounded-md hover:bg-gray-50">
569
+ <img src="https://logodownload.org/wp-content/uploads/2020/09/nubank-logo.png" class="h-6 mr-3" alt="Nubank">
570
+ <span>Conectar ao Nubank</span>
571
+ </button>
572
+ <button class="w-full flex items-center p-3 border rounded-md hover:bg-gray-50">
573
+ <img src="https://logodownload.org/wp-content/uploads/2020/09/c6-bank-logo.png" class="h-6 mr-3" alt="C6 Bank">
574
+ <span>Conectar ao C6 Bank</span>
575
+ </button>
576
+ </div>
577
+ <div class="mt-4 p-3 bg-blue-50 rounded-md">
578
+ <p class="text-sm text-blue-800">
579
+ <i class="fas fa-info-circle mr-1"></i> As conexões com bancos utilizam APIs seguras e não armazenamos suas credenciais.
580
+ </p>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+
591
+ <script>
592
+ // Sidebar toggle for mobile
593
+ const toggleSidebar = document.getElementById('toggleSidebar');
594
+ const mobileToggleSidebar = document.getElementById('mobileToggleSidebar');
595
+ const sidebar = document.getElementById('sidebar');
596
+ const mainContent = document.getElementById('mainContent');
597
+
598
+ mobileToggleSidebar.addEventListener('click', () => {
599
+ sidebar.classList.toggle('collapsed');
600
+ mainContent.classList.toggle('expanded');
601
+ });
602
+
603
+ toggleSidebar.addEventListener('click', () => {
604
+ sidebar.classList.toggle('collapsed');
605
+ mainContent.classList.toggle('expanded');
606
+ });
607
+
608
+ // Navigation between views
609
+ const dashboardBtn = document.getElementById('dashboardBtn');
610
+ const transactionsBtn = document.getElementById('transactionsBtn');
611
+ const categoriesBtn = document.getElementById('categoriesBtn');
612
+ const importBtn = document.getElementById('importBtn');
613
+
614
+ const dashboardView = document.getElementById('dashboardView');
615
+ const transactionsView = document.getElementById('transactionsView');
616
+ const categoriesView = document.getElementById('categoriesView');
617
+ const importView = document.getElementById('importView');
618
+
619
+ const pageTitle = document.getElementById('pageTitle');
620
+
621
+ function resetActiveButtons() {
622
+ dashboardBtn.classList.remove('bg-indigo-800');
623
+ dashboardBtn.classList.add('hover:bg-indigo-600');
624
+ transactionsBtn.classList.remove('bg-indigo-800');
625
+ transactionsBtn.classList.add('hover:bg-indigo-600');
626
+ categoriesBtn.classList.remove('bg-indigo-800');
627
+ categoriesBtn.classList.add('hover:bg-indigo-600');
628
+ importBtn.classList.remove('bg-indigo-800');
629
+ importBtn.classList.add('hover:bg-indigo-600');
630
+ }
631
+
632
+ function hideAllViews() {
633
+ dashboardView.classList.add('hidden');
634
+ transactionsView.classList.add('hidden');
635
+ categoriesView.classList.add('hidden');
636
+ importView.classList.add('hidden');
637
+ }
638
+
639
+ dashboardBtn.addEventListener('click', () => {
640
+ resetActiveButtons();
641
+ dashboardBtn.classList.add('bg-indigo-800');
642
+ dashboardBtn.classList.remove('hover:bg-indigo-600');
643
+ hideAllViews();
644
+ dashboardView.classList.remove('hidden');
645
+ pageTitle.textContent = 'Dashboard';
646
+
647
+ // On mobile, close sidebar after navigation
648
+ if (window.innerWidth < 768) {
649
+ sidebar.classList.add('collapsed');
650
+ mainContent.classList.add('expanded');
651
+ }
652
+ });
653
+
654
+ transactionsBtn.addEventListener('click', () => {
655
+ resetActiveButtons();
656
+ transactionsBtn.classList.add('bg-indigo-800');
657
+ transactionsBtn.classList.remove('hover:bg-indigo-600');
658
+ hideAllViews();
659
+ transactionsView.classList.remove('hidden');
660
+ pageTitle.textContent = 'Transações';
661
+
662
+ if (window.innerWidth < 768) {
663
+ sidebar.classList.add('collapsed');
664
+ mainContent.classList.add('expanded');
665
+ }
666
+ });
667
+
668
+ categoriesBtn.addEventListener('click', () => {
669
+ resetActiveButtons();
670
+ categoriesBtn.classList.add('bg-indigo-800');
671
+ categoriesBtn.classList.remove('hover:bg-indigo-600');
672
+ hideAllViews();
673
+ categoriesView.classList.remove('hidden');
674
+ pageTitle.textContent = 'Categorias';
675
+
676
+ if (window.innerWidth < 768) {
677
+ sidebar.classList.add('collapsed');
678
+ mainContent.classList.add('expanded');
679
+ }
680
+ });
681
+
682
+ importBtn.addEventListener('click', () => {
683
+ resetActiveButtons();
684
+ importBtn.classList.add('bg-indigo-800');
685
+ importBtn.classList.remove('hover:bg-indigo-600');
686
+ hideAllViews();
687
+ importView.classList.remove('hidden');
688
+ pageTitle.textContent = 'Importar Dados';
689
+
690
+ if (window.innerWidth < 768) {
691
+ sidebar.classList.add('collapsed');
692
+ mainContent.classList.add('expanded');
693
+ }
694
+ });
695
+
696
+ // Apply filters
697
+ document.getElementById('applyFilters').addEventListener('click', () => {
698
+ const year = document.getElementById('yearFilter').value;
699
+ const month = document.getElementById('monthFilter').value;
700
+ const category = document.getElementById('categoryFilter').value;
701
+ const holder = document.getElementById('holderFilter').value;
702
+
703
+ alert(`Filtros aplicados:\nAno: ${year}\nMês: ${month}\nCategoria: ${category}\nPortador: ${holder}`);
704
+
705
+ // Here you would typically update the charts and data based on filters
706
+ // For this example, we'll just log the filters
707
+ console.log({year, month, category, holder});
708
+ });
709
+
710
+ // Initialize charts
711
+ document.addEventListener('DOMContentLoaded', function() {
712
+ // Category Chart
713
+ const categoryCtx = document.getElementById('categoryChart').getContext('2d');
714
+ const categoryChart = new Chart(categoryCtx, {
715
+ type: 'doughnut',
716
+ data: {
717
+ labels: ['Alimentação', 'Transporte', 'Moradia', 'Lazer', 'Saúde', 'Educação'],
718
+ datasets: [{
719
+ data: [1200, 800, 2500, 600, 300, 400],
720
+ backgroundColor: [
721
+ '#EF4444',
722
+ '#3B82F6',
723
+ '#8B5CF6',
724
+ '#F59E0B',
725
+ '#10B981',
726
+ '#6366F1'
727
+ ],
728
+ borderWidth: 0
729
+ }]
730
+ },
731
+ options: {
732
+ responsive: true,
733
+ maintainAspectRatio: false,
734
+ plugins: {
735
+ legend: {
736
+ position: 'right',
737
+ }
738
+ }
739
+ }
740
+ });
741
+
742
+ // Monthly Trend Chart
743
+ const monthlyTrendCtx = document.getElementById('monthlyTrendChart').getContext('2d');
744
+ const monthlyTrendChart = new Chart(monthlyTrendCtx, {
745
+ type: 'line',
746
+ data: {
747
+ labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
748
+ datasets: [
749
+ {
750
+ label: 'Receitas',
751
+ data: [5000, 4800, 5200, 5100, 5300, 5500, 5400, 5600, 5800, 5700, 5900, 6000],
752
+ borderColor: '#10B981',
753
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
754
+ fill: true,
755
+ tension: 0.3
756
+ },
757
+ {
758
+ label: 'Despesas',
759
+ data: [4200, 4000, 4500, 4300, 4600, 4800, 4700, 4900, 5000, 5100, 5200, 5300],
760
+ borderColor: '#EF4444',
761
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
762
+ fill: true,
763
+ tension: 0.3
764
+ }
765
+ ]
766
+ },
767
+ options: {
768
+ responsive: true,
769
+ maintainAspectRatio: false,
770
+ plugins: {
771
+ legend: {
772
+ position: 'top',
773
+ }
774
+ },
775
+ scales: {
776
+ y: {
777
+ beginAtZero: false
778
+ }
779
+ }
780
+ }
781
+ });
782
+
783
+ // Holder Chart
784
+ const holderCtx = document.getElementById('holderChart').getContext('2d');
785
+ const holderChart = new Chart(holderCtx, {
786
+ type: 'bar',
787
+ data: {
788
+ labels: ['João', 'Maria', 'Família'],
789
+ datasets: [{
790
+ label: 'Despesas por Portador',
791
+ data: [3200, 1800, 1200],
792
+ backgroundColor: [
793
+ '#3B82F6',
794
+ '#8B5CF6',
795
+ '#F59E0B'
796
+ ],
797
+ borderWidth: 0
798
+ }]
799
+ },
800
+ options: {
801
+ responsive: true,
802
+ maintainAspectRatio: false,
803
+ plugins: {
804
+ legend: {
805
+ display: false
806
+ }
807
+ },
808
+ scales: {
809
+ y: {
810
+ beginAtZero: true
811
+ }
812
+ }
813
+ }
814
+ });
815
+ });
816
+
817
+ // File upload interaction
818
+ const fileUpload = document.querySelector('.file-upload');
819
+ const fileInput = fileUpload.querySelector('input[type="file"]');
820
+
821
+ fileUpload.addEventListener('click', () => {
822
+ fileInput.click();
823
+ });
824
+
825
+ fileInput.addEventListener('change', () => {
826
+ if (fileInput.files.length > 0) {
827
+ fileUpload.innerHTML = `
828
+ <i class="fas fa-check-circle text-green-500 text-4xl mb-2"></i>
829
+ <p class="font-medium">${fileInput.files.length} arquivo(s) selecionado(s)</p>
830
+ <p class="text-sm text-gray-500 mt-1">Pronto para importar</p>
831
+ `;
832
+ }
833
+ });
834
+ </script>
835
+ <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>
836
+ </html>