Hugging Face's logo

Spaces:
gallabs
/
dashboard-lucas
Running

App Files Community
gallabs commited on
Commit
039060f
路
verified 路
1 Parent(s): 8b0e6bd

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +702 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dashboard Lucas
3
- emoji: 馃寲
4
  colorFrom: gray
5
- colorTo: pink
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: dashboard-lucas
3
+ emoji: 馃惓
4
  colorFrom: gray
5
+ colorTo: red
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,702 @@
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>Modern Dashboard</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
+ <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
12
+ <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
13
+ <style>
14
+ .sidebar {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .sidebar.collapsed {
18
+ width: 70px;
19
+ }
20
+ .sidebar.collapsed .sidebar-text {
21
+ display: none;
22
+ }
23
+ .sidebar.collapsed .logo-text {
24
+ display: none;
25
+ }
26
+ .sidebar.collapsed .menu-item {
27
+ justify-content: center;
28
+ }
29
+ .main-content {
30
+ transition: all 0.3s ease;
31
+ }
32
+ .main-content.expanded {
33
+ margin-left: 70px;
34
+ }
35
+ .notification-dropdown {
36
+ max-height: 400px;
37
+ overflow-y: auto;
38
+ }
39
+ .card-gradient-1 {
40
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
41
+ }
42
+ .card-gradient-2 {
43
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
44
+ }
45
+ .card-gradient-3 {
46
+ background: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%);
47
+ }
48
+ .card-gradient-4 {
49
+ background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
50
+ }
51
+ .chart-container {
52
+ position: relative;
53
+ height: 300px;
54
+ }
55
+
56
+ /* Dark Mode Styles */
57
+ .dark .sidebar {
58
+ background-color: #1e293b;
59
+ border-color: #334155;
60
+ }
61
+ .dark .sidebar .menu-item:hover {
62
+ background-color: #334155;
63
+ }
64
+ .dark .sidebar .text-indigo-300 {
65
+ color: #94a3b8;
66
+ }
67
+ .dark header {
68
+ background-color: #1e293b;
69
+ border-color: #334155;
70
+ }
71
+ .dark header h1 {
72
+ color: #f8fafc;
73
+ }
74
+ .dark .bg-white {
75
+ background-color: #1e293b !important;
76
+ border-color: #334155;
77
+ }
78
+ .dark .text-gray-800 {
79
+ color: #f8fafc !important;
80
+ }
81
+ .dark .text-gray-500 {
82
+ color: #94a3b8 !important;
83
+ }
84
+ .dark .text-gray-700 {
85
+ color: #e2e8f0 !important;
86
+ }
87
+ .dark .text-gray-900 {
88
+ color: #f8fafc !important;
89
+ }
90
+ .dark .bg-gray-50 {
91
+ background-color: #334155 !important;
92
+ }
93
+ .dark .bg-gray-100 {
94
+ background-color: #334155 !important;
95
+ }
96
+ .dark .divide-gray-200 {
97
+ border-color: #334155 !important;
98
+ }
99
+ .dark .hover\:bg-gray-50:hover {
100
+ background-color: #334155 !important;
101
+ }
102
+ .dark .bg-indigo-100 {
103
+ background-color: #334155 !important;
104
+ }
105
+ .dark .dataTables_wrapper .dataTables_filter input {
106
+ background-color: #334155;
107
+ color: #f8fafc;
108
+ border-color: #475569;
109
+ }
110
+ .dark .dataTables_wrapper .dataTables_length select {
111
+ background-color: #334155;
112
+ color: #f8fafc;
113
+ border-color: #475569;
114
+ }
115
+ .dark .dataTables_wrapper .dataTables_info {
116
+ color: #94a3b8 !important;
117
+ }
118
+ .dark .dataTables_wrapper .paginate_button {
119
+ color: #e2e8f0 !important;
120
+ }
121
+ .dark .dataTables_wrapper .paginate_button.current {
122
+ background-color: #475569 !important;
123
+ border-color: #475569 !important;
124
+ }
125
+ .dark .dataTables_wrapper .paginate_button:hover {
126
+ background-color: #475569 !important;
127
+ border-color: #475569 !important;
128
+ }
129
+ .dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
130
+ color: #64748b !important;
131
+ }
132
+ </style>
133
+ </head>
134
+ <body class="bg-gray-100 dark:bg-slate-900">
135
+ <div class="flex h-screen overflow-hidden">
136
+ <!-- Sidebar -->
137
+ <div class="sidebar bg-indigo-800 dark:bg-slate-800 text-white w-64 flex-shrink-0 flex flex-col">
138
+ <div class="p-4 flex items-center justify-between border-b border-indigo-700 dark:border-slate-700">
139
+ <div class="flex items-center">
140
+ <i class="fas fa-chart-line text-2xl mr-3"></i>
141
+ <span class="logo-text text-xl font-bold">DashboardPro</span>
142
+ </div>
143
+ <button id="toggleSidebar" class="text-white focus:outline-none">
144
+ <i class="fas fa-bars"></i>
145
+ </button>
146
+ </div>
147
+ <div class="p-4 flex-1 overflow-y-auto">
148
+ <div class="mb-8">
149
+ <p class="sidebar-text text-indigo-300 dark:text-slate-400 uppercase text-xs font-semibold mb-4">Menu Principal</p>
150
+ <ul>
151
+ <li class="mb-2">
152
+ <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-indigo-700 dark:hover:bg-slate-700">
153
+ <i class="fas fa-home mr-3"></i>
154
+ <span class="sidebar-text">Dashboard</span>
155
+ </a>
156
+ </li>
157
+ <li class="mb-2">
158
+ <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-indigo-700 dark:hover:bg-slate-700">
159
+ <i class="fas fa-chart-bar mr-3"></i>
160
+ <span class="sidebar-text">Relat贸rios</span>
161
+ </a>
162
+ </li>
163
+ <li class="mb-2">
164
+ <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-indigo-700 dark:hover:bg-slate-700">
165
+ <i class="fas fa-shopping-cart mr-3"></i>
166
+ <span class="sidebar-text">Vendas</span>
167
+ </a>
168
+ </li>
169
+ <li class="mb-2">
170
+ <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-indigo-700 dark:hover:bg-slate-700">
171
+ <i class="fas fa-users mr-3"></i>
172
+ <span class="sidebar-text">Clientes</span>
173
+ </a>
174
+ </li>
175
+ <li class="mb-2">
176
+ <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-indigo-700 dark:hover:bg-slate-700">
177
+ <i class="fas fa-cog mr-3"></i>
178
+ <span class="sidebar-text">Configura莽玫es</span>
179
+ </a>
180
+ </li>
181
+ </ul>
182
+ </div>
183
+ <div>
184
+ <p class="sidebar-text text-indigo-300 dark:text-slate-400 uppercase text-xs font-semibold mb-4">Suporte</p>
185
+ <ul>
186
+ <li class="mb-2">
187
+ <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-indigo-700 dark:hover:bg-slate-700">
188
+ <i class="fas fa-question-circle mr-3"></i>
189
+ <span class="sidebar-text">Ajuda</span>
190
+ </a>
191
+ </li>
192
+ <li class="mb-2">
193
+ <a href="#" class="menu-item flex items-center p-2 rounded hover:bg-indigo-700 dark:hover:bg-slate-700">
194
+ <i class="fas fa-envelope mr-3"></i>
195
+ <span class="sidebar-text">Contato</span>
196
+ </a>
197
+ </li>
198
+ </ul>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Main Content -->
204
+ <div class="main-content flex-1 flex flex-col overflow-hidden">
205
+ <!-- Navbar -->
206
+ <header class="bg-white dark:bg-slate-800 shadow-sm">
207
+ <div class="px-6 py-4 flex items-center justify-between">
208
+ <div class="flex items-center">
209
+ <button id="mobileMenuButton" class="md:hidden text-gray-500 dark:text-slate-400 focus:outline-none mr-4">
210
+ <i class="fas fa-bars text-xl"></i>
211
+ </button>
212
+ <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Dashboard</h1>
213
+ </div>
214
+ <div class="flex items-center space-x-4">
215
+ <button id="darkModeToggle" class="text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-white focus:outline-none">
216
+ <i id="darkModeIcon" class="fas fa-moon text-xl"></i>
217
+ </button>
218
+ <div class="relative">
219
+ <button id="notificationButton" class="text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-white focus:outline-none relative">
220
+ <i class="fas fa-bell text-xl"></i>
221
+ <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">6</span>
222
+ </button>
223
+ <div id="notificationDropdown" class="hidden absolute right-0 mt-2 w-80 bg-white dark:bg-slate-800 rounded-md shadow-lg z-10 notification-dropdown">
224
+ <div class="p-4 border-b dark:border-slate-700">
225
+ <h3 class="font-semibold text-gray-800 dark:text-white">Notifica莽玫es</h3>
226
+ </div>
227
+ <div class="divide-y divide-gray-100 dark:divide-slate-700">
228
+ <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700">
229
+ <div class="flex-shrink-0 bg-blue-100 dark:bg-slate-600 p-2 rounded-full">
230
+ <i class="fas fa-shopping-cart text-blue-500 dark:text-blue-400"></i>
231
+ </div>
232
+ <div class="ml-3">
233
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Novo pedido recebido</p>
234
+ <p class="text-xs text-gray-500 dark:text-slate-400">2 minutos atr谩s</p>
235
+ </div>
236
+ </a>
237
+ <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700">
238
+ <div class="flex-shrink-0 bg-green-100 dark:bg-slate-600 p-2 rounded-full">
239
+ <i class="fas fa-user-plus text-green-500 dark:text-green-400"></i>
240
+ </div>
241
+ <div class="ml-3">
242
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Novo cliente registrado</p>
243
+ <p class="text-xs text-gray-500 dark:text-slate-400">1 hora atr谩s</p>
244
+ </div>
245
+ </a>
246
+ <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700">
247
+ <div class="flex-shrink-0 bg-yellow-100 dark:bg-slate-600 p-2 rounded-full">
248
+ <i class="fas fa-exclamation-triangle text-yellow-500 dark:text-yellow-400"></i>
249
+ </div>
250
+ <div class="ml-3">
251
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Pagamento atrasado</p>
252
+ <p class="text-xs text-gray-500 dark:text-slate-400">3 horas atr谩s</p>
253
+ </div>
254
+ </a>
255
+ <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700">
256
+ <div class="flex-shrink-0 bg-purple-100 dark:bg-slate-600 p-2 rounded-full">
257
+ <i class="fas fa-check-circle text-purple-500 dark:text-purple-400"></i>
258
+ </div>
259
+ <div class="ml-3">
260
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Pedido entregue</p>
261
+ <p class="text-xs text-gray-500 dark:text-slate-400">Ontem</p>
262
+ </div>
263
+ </a>
264
+ <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700">
265
+ <div class="flex-shrink-0 bg-red-100 dark:bg-slate-600 p-2 rounded-full">
266
+ <i class="fas fa-times-circle text-red-500 dark:text-red-400"></i>
267
+ </div>
268
+ <div class="ml-3">
269
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Pedido cancelado</p>
270
+ <p class="text-xs text-gray-500 dark:text-slate-400">Ontem</p>
271
+ </div>
272
+ </a>
273
+ <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700">
274
+ <div class="flex-shrink-0 bg-indigo-100 dark:bg-slate-600 p-2 rounded-full">
275
+ <i class="fas fa-truck text-indigo-500 dark:text-indigo-400"></i>
276
+ </div>
277
+ <div class="ml-3">
278
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Pedido em transporte</p>
279
+ <p class="text-xs text-gray-500 dark:text-slate-400">2 dias atr谩s</p>
280
+ </div>
281
+ </a>
282
+ </div>
283
+ <div class="p-3 text-center bg-gray-50 dark:bg-slate-700">
284
+ <a href="#" class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Ver todas as notifica莽玫es</a>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ <div class="relative">
289
+ <button id="userMenuButton" class="flex items-center space-x-2 focus:outline-none">
290
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User avatar">
291
+ <span class="hidden md:block text-sm font-medium text-gray-700 dark:text-white">John Doe</span>
292
+ </button>
293
+ <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-slate-800 rounded-md shadow-lg z-10">
294
+ <div class="py-1 border-b dark:border-slate-700">
295
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700">Perfil</a>
296
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700">Configura莽玫es</a>
297
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700">Relat贸rios</a>
298
+ </div>
299
+ <div class="py-1 border-b dark:border-slate-700">
300
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700">Login</a>
301
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700">Registrar</a>
302
+ </div>
303
+ <div class="py-1">
304
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700">Sair</a>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </header>
311
+
312
+ <!-- Main Content Area -->
313
+ <main class="flex-1 overflow-y-auto p-6">
314
+ <!-- Cards -->
315
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
316
+ <div class="card-gradient-1 rounded-lg shadow-md p-6 text-white">
317
+ <div class="flex justify-between items-center">
318
+ <div>
319
+ <p class="text-sm font-medium">Or莽amento</p>
320
+ <h3 class="text-2xl font-bold mt-2">R$ 24,780</h3>
321
+ <p class="text-xs mt-2 opacity-80">+12% desde o 煤ltimo m锚s</p>
322
+ </div>
323
+ <div class="bg-white bg-opacity-20 p-3 rounded-full">
324
+ <i class="fas fa-wallet text-xl"></i>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ <div class="card-gradient-2 rounded-lg shadow-md p-6 text-white">
329
+ <div class="flex justify-between items-center">
330
+ <div>
331
+ <p class="text-sm font-medium">Pagos</p>
332
+ <h3 class="text-2xl font-bold mt-2">R$ 18,650</h3>
333
+ <p class="text-xs mt-2 opacity-80">+8% desde o 煤ltimo m锚s</p>
334
+ </div>
335
+ <div class="bg-white bg-opacity-20 p-3 rounded-full">
336
+ <i class="fas fa-check-circle text-xl"></i>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ <div class="card-gradient-3 rounded-lg shadow-md p-6 text-white">
341
+ <div class="flex justify-between items-center">
342
+ <div>
343
+ <p class="text-sm font-medium">Cancelados</p>
344
+ <h3 class="text-2xl font-bold mt-2">R$ 2,340</h3>
345
+ <p class="text-xs mt-2 opacity-80">-3% desde o 煤ltimo m锚s</p>
346
+ </div>
347
+ <div class="bg-white bg-opacity-20 p-3 rounded-full">
348
+ <i class="fas fa-times-circle text-xl"></i>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ <div class="card-gradient-4 rounded-lg shadow-md p-6 text-gray-800">
353
+ <div class="flex justify-between items-center">
354
+ <div>
355
+ <p class="text-sm font-medium">Entregues</p>
356
+ <h3 class="text-2xl font-bold mt-2">R$ 15,430</h3>
357
+ <p class="text-xs mt-2 opacity-80">+15% desde o 煤ltimo m锚s</p>
358
+ </div>
359
+ <div class="bg-gray-800 bg-opacity-10 p-3 rounded-full">
360
+ <i class="fas fa-truck text-xl"></i>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- Charts -->
367
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
368
+ <div class="bg-white dark:bg-slate-800 rounded-lg shadow-md p-6">
369
+ <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Vendas Mensais</h2>
370
+ <div class="chart-container">
371
+ <canvas id="salesChart"></canvas>
372
+ </div>
373
+ <div class="mt-4 text-sm text-gray-500 dark:text-slate-400">
374
+ <p><span class="inline-block w-3 h-3 rounded-full bg-indigo-500 mr-1"></span> Vendas totais: R$ 46,340</p>
375
+ <p><span class="inline-block w-3 h-3 rounded-full bg-indigo-200 mr-1"></span> Meta: R$ 50,000</p>
376
+ </div>
377
+ </div>
378
+ <div class="bg-white dark:bg-slate-800 rounded-lg shadow-md p-6">
379
+ <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Distribui莽茫o de Vendas</h2>
380
+ <div class="chart-container">
381
+ <canvas id="distributionChart"></canvas>
382
+ </div>
383
+ <div class="mt-4 grid grid-cols-2 gap-4 text-sm text-gray-500 dark:text-slate-400">
384
+ <div><span class="inline-block w-3 h-3 rounded-full bg-indigo-500 mr-1"></span> Eletr么nicos: 35%</div>
385
+ <div><span class="inline-block w-3 h-3 rounded-full bg-red-500 mr-1"></span> Roupas: 25%</div>
386
+ <div><span class="inline-block w-3 h-3 rounded-full bg-green-500 mr-1"></span> Alimentos: 20%</div>
387
+ <div><span class="inline-block w-3 h-3 rounded-full bg-yellow-500 mr-1"></span> Livros: 10%</div>
388
+ <div><span class="inline-block w-3 h-3 rounded-full bg-gray-500 mr-1"></span> Outros: 10%</div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- Recent Orders -->
394
+ <div class="bg-white dark:bg-slate-800 rounded-lg shadow-md p-6">
395
+ <div class="flex justify-between items-center mb-6">
396
+ <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Pedidos Recentes</h2>
397
+ <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Ver todos</button>
398
+ </div>
399
+ <div class="overflow-x-auto">
400
+ <table id="ordersTable" class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
401
+ <thead class="bg-gray-50 dark:bg-slate-700">
402
+ <tr>
403
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">ID</th>
404
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">Cliente</th>
405
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">Data</th>
406
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">Valor</th>
407
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">Status</th>
408
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">A莽玫es</th>
409
+ </tr>
410
+ </thead>
411
+ <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
412
+ <tr>
413
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#ORD-0001</td>
414
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">Maria Silva</td>
415
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">15/07/2023</td>
416
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">R$ 1,250.00</td>
417
+ <td class="px-6 py-4 whitespace-nowrap">
418
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Entregue</span>
419
+ </td>
420
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
421
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3"><i class="fas fa-eye"></i></button>
422
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300"><i class="fas fa-print"></i></button>
423
+ </td>
424
+ </tr>
425
+ <tr>
426
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#ORD-0002</td>
427
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">Jo茫o Santos</td>
428
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">14/07/2023</td>
429
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">R$ 890.00</td>
430
+ <td class="px-6 py-4 whitespace-nowrap">
431
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Em transporte</span>
432
+ </td>
433
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
434
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3"><i class="fas fa-eye"></i></button>
435
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300"><i class="fas fa-print"></i></button>
436
+ </td>
437
+ </tr>
438
+ <tr>
439
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#ORD-0003</td>
440
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">Ana Oliveira</td>
441
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">13/07/2023</td>
442
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">R$ 1,750.00</td>
443
+ <td class="px-6 py-4 whitespace-nowrap">
444
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">Pendente</span>
445
+ </td>
446
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
447
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3"><i class="fas fa-eye"></i></button>
448
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300"><i class="fas fa-print"></i></button>
449
+ </td>
450
+ </tr>
451
+ <tr>
452
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#ORD-0004</td>
453
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">Carlos Pereira</td>
454
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">12/07/2023</td>
455
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">R$ 2,300.00</td>
456
+ <td class="px-6 py-4 whitespace-nowrap">
457
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">Cancelado</span>
458
+ </td>
459
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
460
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3"><i class="fas fa-eye"></i></button>
461
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300"><i class="fas fa-print"></i></button>
462
+ </td>
463
+ </tr>
464
+ <tr>
465
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#ORD-0005</td>
466
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">Patricia Souza</td>
467
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">11/07/2023</td>
468
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">R$ 1,100.00</td>
469
+ <td class="px-6 py-4 whitespace-nowrap">
470
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Entregue</span>
471
+ </td>
472
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-slate-400">
473
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3"><i class="fas fa-eye"></i></button>
474
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300"><i class="fas fa-print"></i></button>
475
+ </td>
476
+ </tr>
477
+ </tbody>
478
+ </table>
479
+ </div>
480
+ </div>
481
+ </main>
482
+ </div>
483
+ </div>
484
+
485
+ <script>
486
+ // Toggle sidebar
487
+ const toggleSidebar = document.getElementById('toggleSidebar');
488
+ const sidebar = document.querySelector('.sidebar');
489
+ const mainContent = document.querySelector('.main-content');
490
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
491
+
492
+ toggleSidebar.addEventListener('click', () => {
493
+ sidebar.classList.toggle('collapsed');
494
+ mainContent.classList.toggle('expanded');
495
+ });
496
+
497
+ mobileMenuButton.addEventListener('click', () => {
498
+ sidebar.classList.toggle('collapsed');
499
+ mainContent.classList.toggle('expanded');
500
+ });
501
+
502
+ // Toggle notification dropdown
503
+ const notificationButton = document.getElementById('notificationButton');
504
+ const notificationDropdown = document.getElementById('notificationDropdown');
505
+
506
+ notificationButton.addEventListener('click', () => {
507
+ notificationDropdown.classList.toggle('hidden');
508
+ userDropdown.classList.add('hidden');
509
+ });
510
+
511
+ // Toggle user dropdown
512
+ const userMenuButton = document.getElementById('userMenuButton');
513
+ const userDropdown = document.getElementById('userDropdown');
514
+
515
+ userMenuButton.addEventListener('click', () => {
516
+ userDropdown.classList.toggle('hidden');
517
+ notificationDropdown.classList.add('hidden');
518
+ });
519
+
520
+ // Close dropdowns when clicking outside
521
+ document.addEventListener('click', (event) => {
522
+ if (!notificationButton.contains(event.target) && !notificationDropdown.contains(event.target)) {
523
+ notificationDropdown.classList.add('hidden');
524
+ }
525
+ if (!userMenuButton.contains(event.target) && !userDropdown.contains(event.target)) {
526
+ userDropdown.classList.add('hidden');
527
+ }
528
+ });
529
+
530
+ // Dark Mode Toggle
531
+ const darkModeToggle = document.getElementById('darkModeToggle');
532
+ const darkModeIcon = document.getElementById('darkModeIcon');
533
+ const html = document.documentElement;
534
+
535
+ // Check for saved user preference or use OS preference
536
+ const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
537
+ const savedMode = localStorage.getItem('darkMode');
538
+
539
+ if (savedMode === 'dark' || (!savedMode && userPrefersDark)) {
540
+ html.classList.add('dark');
541
+ darkModeIcon.classList.replace('fa-moon', 'fa-sun');
542
+ }
543
+
544
+ darkModeToggle.addEventListener('click', () => {
545
+ const isDark = html.classList.contains('dark');
546
+
547
+ if (isDark) {
548
+ html.classList.remove('dark');
549
+ darkModeIcon.classList.replace('fa-sun', 'fa-moon');
550
+ localStorage.setItem('darkMode', 'light');
551
+ } else {
552
+ html.classList.add('dark');
553
+ darkModeIcon.classList.replace('fa-moon', 'fa-sun');
554
+ localStorage.setItem('darkMode', 'dark');
555
+ }
556
+
557
+ // Update charts when theme changes
558
+ salesChart.update();
559
+ distributionChart.update();
560
+ });
561
+
562
+ // Initialize DataTable
563
+ $(document).ready(function() {
564
+ $('#ordersTable').DataTable({
565
+ responsive: true,
566
+ "order": [[2, "desc"]],
567
+ "language": {
568
+ "lengthMenu": "Mostrar _MENU_ registros por p谩gina",
569
+ "zeroRecords": "Nenhum registro encontrado",
570
+ "info": "Mostrando p谩gina _PAGE_ de _PAGES_",
571
+ "infoEmpty": "Nenhum registro dispon铆vel",
572
+ "infoFiltered": "(filtrado de _MAX_ registros totais)",
573
+ "search": "Pesquisar:",
574
+ "paginate": {
575
+ "first": "Primeiro",
576
+ "last": "脷ltimo",
577
+ "next": "Pr贸ximo",
578
+ "previous": "Anterior"
579
+ },
580
+ }
581
+ });
582
+ });
583
+
584
+ // Sales Chart
585
+ const salesCtx = document.getElementById('salesChart').getContext('2d');
586
+ const salesChart = new Chart(salesCtx, {
587
+ type: 'line',
588
+ data: {
589
+ labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul'],
590
+ datasets: [{
591
+ label: 'Vendas 2023',
592
+ data: [6500, 5900, 8000, 8100, 5600, 5500, 7200],
593
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
594
+ borderColor: 'rgba(99, 102, 241, 1)',
595
+ borderWidth: 2,
596
+ tension: 0.3,
597
+ fill: true
598
+ },
599
+ {
600
+ label: 'Meta',
601
+ data: [7000, 7000, 7000, 7000, 7000, 7000, 7000],
602
+ borderColor: 'rgba(99, 102, 241, 0.3)',
603
+ borderWidth: 1,
604
+ borderDash: [5, 5],
605
+ pointRadius: 0,
606
+ fill: false
607
+ }]
608
+ },
609
+ options: {
610
+ responsive: true,
611
+ maintainAspectRatio: false,
612
+ plugins: {
613
+ legend: {
614
+ display: false
615
+ },
616
+ tooltip: {
617
+ callbacks: {
618
+ label: function(context) {
619
+ return context.dataset.label + ': R$ ' + context.raw.toLocaleString('pt-BR');
620
+ }
621
+ }
622
+ }
623
+ },
624
+ scales: {
625
+ y: {
626
+ beginAtZero: true,
627
+ grid: {
628
+ drawBorder: false,
629
+ color: function(context) {
630
+ if (context.tick.value === 0) {
631
+ return '#e2e8f0';
632
+ }
633
+ return html.classList.contains('dark') ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)';
634
+ }
635
+ },
636
+ ticks: {
637
+ color: html.classList.contains('dark') ? '#94a3b8' : '#64748b',
638
+ callback: function(value) {
639
+ return 'R$ ' + value.toLocaleString('pt-BR');
640
+ }
641
+ }
642
+ },
643
+ x: {
644
+ grid: {
645
+ display: false
646
+ },
647
+ ticks: {
648
+ color: html.classList.contains('dark') ? '#94a3b8' : '#64748b'
649
+ }
650
+ }
651
+ }
652
+ }
653
+ });
654
+
655
+ // Distribution Chart
656
+ const distributionCtx = document.getElementById('distributionChart').getContext('2d');
657
+ const distributionChart = new Chart(distributionCtx, {
658
+ type: 'doughnut',
659
+ data: {
660
+ labels: ['Eletr么nicos', 'Roupas', 'Alimentos', 'Livros', 'Outros'],
661
+ datasets: [{
662
+ data: [35, 25, 20, 10, 10],
663
+ backgroundColor: [
664
+ 'rgba(99, 102, 241, 0.8)',
665
+ 'rgba(244, 63, 94, 0.8)',
666
+ 'rgba(16, 185, 129, 0.8)',
667
+ 'rgba(245, 158, 11, 0.8)',
668
+ 'rgba(156, 163, 175, 0.8)'
669
+ ],
670
+ borderWidth: 0
671
+ }]
672
+ },
673
+ options: {
674
+ responsive: true,
675
+ maintainAspectRatio: false,
676
+ plugins: {
677
+ legend: {
678
+ position: 'right',
679
+ labels: {
680
+ color: html.classList.contains('dark') ? '#e2e8f0' : '#334155'
681
+ }
682
+ },
683
+ tooltip: {
684
+ callbacks: {
685
+ label: function(context) {
686
+ return context.label + ': ' + context.raw + '%';
687
+ }
688
+ }
689
+ },
690
+ cutout: '70%'
691
+ }
692
+ }
693
+ });
694
+
695
+ // Update charts when dark mode changes
696
+ darkModeToggle.addEventListener('click', () => {
697
+ salesChart.update();
698
+ distributionChart.update();
699
+ });
700
+ </script>
701
+ <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=gallabs/dashboard-lucas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
702
+ </html>