Hugging Face's logo

Spaces:
ocirema
/
teste
Running

App Files Community
ocirema commited on
Commit
960fa74
·
verified ·
1 Parent(s): f13403e

implementa vendas - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +550 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Teste
3
- emoji: 🦀
4
- colorFrom: purple
5
- colorTo: indigo
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: teste
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
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,550 @@
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-PT">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gestão Comercial | Sistema de Vendas</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
+ <style>
10
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .sidebar.collapsed {
14
+ width: 80px;
15
+ }
16
+ .sidebar.collapsed .menu-text {
17
+ display: none;
18
+ }
19
+ .sidebar.collapsed .logo-text {
20
+ display: none;
21
+ }
22
+ .sidebar.collapsed .menu-item {
23
+ justify-content: center;
24
+ }
25
+ .content-area {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .content-area.expanded {
29
+ margin-left: 80px;
30
+ }
31
+ .chart-container {
32
+ height: 300px;
33
+ }
34
+ @media (max-width: 768px) {
35
+ .sidebar {
36
+ position: fixed;
37
+ z-index: 1000;
38
+ transform: translateX(-100%);
39
+ }
40
+ .sidebar.open {
41
+ transform: translateX(0);
42
+ }
43
+ .content-area {
44
+ margin-left: 0 !important;
45
+ }
46
+ .mobile-menu-btn {
47
+ display: block;
48
+ }
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-100">
53
+ <div class="flex h-screen overflow-hidden">
54
+ <!-- Sidebar -->
55
+ <div class="sidebar bg-blue-800 text-white w-64 flex flex-col flex-shrink-0">
56
+ <!-- Logo -->
57
+ <div class="p-4 flex items-center border-b border-blue-700">
58
+ <div class="bg-white p-2 rounded-lg mr-3">
59
+ <i class="fas fa-store text-blue-800 text-xl"></i>
60
+ </div>
61
+ <span class="logo-text font-bold text-xl">Gestão Comercial</span>
62
+ </div>
63
+
64
+ <!-- Menu -->
65
+ <div class="flex-grow overflow-y-auto">
66
+ <div class="p-4">
67
+ <div class="mb-6">
68
+ <div class="text-xs uppercase text-blue-300 mb-2 menu-text">Menu Principal</div>
69
+ <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg bg-blue-700 mb-2 text-white">
70
+ <i class="fas fa-tachometer-alt mr-3"></i>
71
+ <span class="menu-text">Painel</span>
72
+ </a>
73
+ <a href="vendas.html" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 mb-2 text-white">
74
+ <i class="fas fa-shopping-cart mr-3"></i>
75
+ <span class="menu-text">Vendas</span>
76
+ </a>
77
+ <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 mb-2 text-white">
78
+ <i class="fas fa-boxes mr-3"></i>
79
+ <span class="menu-text">Produtos</span>
80
+ </a>
81
+ <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 mb-2 text-white">
82
+ <i class="fas fa-users mr-3"></i>
83
+ <span class="menu-text">Clientes</span>
84
+ </a>
85
+ <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 mb-2 text-white">
86
+ <i class="fas fa-file-invoice-dollar mr-3"></i>
87
+ <span class="menu-text">Faturas/Recibos</span>
88
+ </a>
89
+ </div>
90
+
91
+ <div class="mb-6">
92
+ <div class="text-xs uppercase text-blue-300 mb-2 menu-text">Relatórios</div>
93
+ <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 mb-2 text-white">
94
+ <i class="fas fa-chart-line mr-3"></i>
95
+ <span class="menu-text">Vendas</span>
96
+ </a>
97
+ <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 mb-2 text-white">
98
+ <i class="fas fa-chart-pie mr-3"></i>
99
+ <span class="menu-text">Invent��rio</span>
100
+ </a>
101
+ </div>
102
+
103
+ <div>
104
+ <div class="text-xs uppercase text-blue-300 mb-2 menu-text">Configurações</div>
105
+ <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 mb-2 text-white">
106
+ <i class="fas fa-cog mr-3"></i>
107
+ <span class="menu-text">Sistema</span>
108
+ </a>
109
+ <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 mb-2 text-white">
110
+ <i class="fas fa-user-shield mr-3"></i>
111
+ <span class="menu-text">Usuários</span>
112
+ </a>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- User Profile -->
118
+ <div class="p-4 border-t border-blue-700 flex items-center">
119
+ <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
120
+ <i class="fas fa-user"></i>
121
+ </div>
122
+ <div class="menu-text">
123
+ <div class="font-medium">Admin</div>
124
+ <div class="text-xs text-blue-300">Administrador</div>
125
+ </div>
126
+ <button class="ml-auto text-blue-300 hover:text-white" id="toggleSidebar">
127
+ <i class="fas fa-chevron-left"></i>
128
+ </button>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Main Content -->
133
+ <div class="content-area flex-grow overflow-auto">
134
+ <!-- Top Navigation -->
135
+ <div class="bg-white shadow-sm p-4 flex items-center justify-between">
136
+ <button class="mobile-menu-btn hidden text-gray-600 hover:text-blue-800 mr-4" id="mobileMenuBtn">
137
+ <i class="fas fa-bars text-xl"></i>
138
+ </button>
139
+ <div class="flex-grow">
140
+ <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
141
+ </div>
142
+ <div class="flex items-center">
143
+ <div class="relative mr-4">
144
+ <input type="text" placeholder="Procurar..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
145
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
146
+ </div>
147
+ <div class="relative mr-4">
148
+ <button class="text-gray-600 hover:text-blue-800">
149
+ <i class="fas fa-bell text-xl"></i>
150
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
151
+ </button>
152
+ </div>
153
+ <div class="relative">
154
+ <button class="text-gray-600 hover:text-blue-800">
155
+ <i class="fas fa-envelope text-xl"></i>
156
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
157
+ </button>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Content -->
163
+ <div class="p-6">
164
+ <!-- Stats Cards -->
165
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
166
+ <div class="bg-white rounded-lg shadow p-6">
167
+ <div class="flex items-center">
168
+ <div class="p-3 rounded-full bg-blue-100 text-blue-800 mr-4">
169
+ <i class="fas fa-shopping-cart"></i>
170
+ </div>
171
+ <div>
172
+ <div class="text-gray-500 text-sm">Vendas de Hoje</div>
173
+ <div class="text-2xl font-bold">€ 2.245,00</div>
174
+ </div>
175
+ </div>
176
+ <div class="mt-4 text-sm text-green-600">
177
+ <i class="fas fa-arrow-up mr-1"></i> 12% em relação a ontem
178
+ </div>
179
+ </div>
180
+
181
+ <div class="bg-white rounded-lg shadow p-6">
182
+ <div class="flex items-center">
183
+ <div class="p-3 rounded-full bg-green-100 text-green-800 mr-4">
184
+ <i class="fas fa-users"></i>
185
+ </div>
186
+ <div>
187
+ <div class="text-gray-500 text-sm">Novos Clientes</div>
188
+ <div class="text-2xl font-bold">24</div>
189
+ </div>
190
+ </div>
191
+ <div class="mt-4 text-sm text-green-600">
192
+ <i class="fas fa-arrow-up mr-1"></i> 8% em relação ao mês passado
193
+ </div>
194
+ </div>
195
+
196
+ <div class="bg-white rounded-lg shadow p-6">
197
+ <div class="flex items-center">
198
+ <div class="p-3 rounded-full bg-orange-100 text-orange-800 mr-4">
199
+ <i class="fas fa-box-open"></i>
200
+ </div>
201
+ <div>
202
+ <div class="text-gray-500 text-sm">Produtos em Estoque</div>
203
+ <div class="text-2xl font-bold">1.245</div>
204
+ </div>
205
+ </div>
206
+ <div class="mt-4 text-sm text-red-600">
207
+ <i class="fas fa-arrow-down mr-1"></i> 5% em relação ao mês passado
208
+ </div>
209
+ </div>
210
+
211
+ <div class="bg-white rounded-lg shadow p-6">
212
+ <div class="flex items-center">
213
+ <div class="p-3 rounded-full bg-purple-100 text-purple-800 mr-4">
214
+ <i class="fas fa-file-invoice-dollar"></i>
215
+ </div>
216
+ <div>
217
+ <div class="text-gray-500 text-sm">Faturas Pendentes</div>
218
+ <div class="text-2xl font-bold">18</div>
219
+ </div>
220
+ </div>
221
+ <div class="mt-4 text-sm text-green-600">
222
+ <i class="fas fa-arrow-up mr-1"></i> 3% em relação ao mês passado
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Charts -->
228
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
229
+ <div class="bg-white rounded-lg shadow p-6">
230
+ <div class="flex justify-between items-center mb-4">
231
+ <h2 class="text-lg font-semibold text-gray-800">Vendas Mensais</h2>
232
+ <select class="border border-gray-300 rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
233
+ <option>Últimos 6 meses</option>
234
+ <option>Últimos 12 meses</option>
235
+ <option>Este ano</option>
236
+ </select>
237
+ </div>
238
+ <div class="chart-container">
239
+ <canvas id="salesChart"></canvas>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="bg-white rounded-lg shadow p-6">
244
+ <div class="flex justify-between items-center mb-4">
245
+ <h2 class="text-lg font-semibold text-gray-800">Produtos Mais Vendidos</h2>
246
+ <select class="border border-gray-300 rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
247
+ <option>Este mês</option>
248
+ <option>Mês passado</option>
249
+ <option>Este ano</option>
250
+ </select>
251
+ </div>
252
+ <div class="chart-container">
253
+ <canvas id="productsChart"></canvas>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Recent Orders -->
259
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
260
+ <div class="p-6 border-b border-gray-200">
261
+ <h2 class="text-lg font-semibold text-gray-800">Últimas Vendas</h2>
262
+ </div>
263
+ <div class="overflow-x-auto">
264
+ <table class="min-w-full divide-y divide-gray-200">
265
+ <thead class="bg-gray-50">
266
+ <tr>
267
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nº Pedido</th>
268
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>
269
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
270
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th>
271
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th>
272
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
273
+ </tr>
274
+ </thead>
275
+ <tbody class="bg-white divide-y divide-gray-200">
276
+ <tr>
277
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#12345</td>
278
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Empresa A</td>
279
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15-06-2023</td>
280
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€ 2.450,00</td>
281
+ <td class="px-6 py-4 whitespace-nowrap">
282
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Pago</span>
283
+ </td>
284
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
285
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
286
+ <button class="text-gray-600 hover:text-gray-900"><i class="fas fa-print"></i></button>
287
+ </td>
288
+ </tr>
289
+ <tr>
290
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#12344</td>
291
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Empresa B</td>
292
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14/06/2023</td>
293
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 1.890,00</td>
294
+ <td class="px-6 py-4 whitespace-nowrap">
295
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Por pagar</span>
296
+ </td>
297
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
298
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
299
+ <button class="text-gray-600 hover:text-gray-900"><i class="fas fa-print"></i></button>
300
+ </td>
301
+ </tr>
302
+ <tr>
303
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#12343</td>
304
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Empresa C</td>
305
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">13/06/2023</td>
306
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 3.210,00</td>
307
+ <td class="px-6 py-4 whitespace-nowrap">
308
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Pago</span>
309
+ </td>
310
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
311
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
312
+ <button class="text-gray-600 hover:text-gray-900"><i class="fas fa-print"></i></button>
313
+ </td>
314
+ </tr>
315
+ <tr>
316
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#12342</td>
317
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Empresa D</td>
318
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/06/2023</td>
319
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 980,00</td>
320
+ <td class="px-6 py-4 whitespace-nowrap">
321
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Anulado</span>
322
+ </td>
323
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
324
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
325
+ <button class="text-gray-600 hover:text-gray-900"><i class="fas fa-print"></i></button>
326
+ </td>
327
+ </tr>
328
+ </tbody>
329
+ </table>
330
+ </div>
331
+ <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
332
+ <div class="text-sm text-gray-500">
333
+ A mostrar <span class="font-medium">1</span> a <span class="font-medium">4</span> de <span class="font-medium">24</span> resultados
334
+ </div>
335
+ <div class="flex space-x-2">
336
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Anterior</button>
337
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">1</button>
338
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">2</button>
339
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">3</button>
340
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Próximo</button>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- Quick Actions -->
346
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
347
+ <button class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center hover:bg-blue-50 transition-colors">
348
+ <div class="bg-blue-100 p-3 rounded-full mb-3">
349
+ <i class="fas fa-plus text-blue-800"></i>
350
+ </div>
351
+ <span class="text-sm font-medium text-gray-700">Nova Venda</span>
352
+ </button>
353
+ <button class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center hover:bg-green-50 transition-colors">
354
+ <div class="bg-green-100 p-3 rounded-full mb-3">
355
+ <i class="fas fa-user-plus text-green-800"></i>
356
+ </div>
357
+ <span class="text-sm font-medium text-gray-700">Novo Cliente</span>
358
+ </button>
359
+ <button class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center hover:bg-orange-50 transition-colors">
360
+ <div class="bg-orange-100 p-3 rounded-full mb-3">
361
+ <i class="fas fa-box text-orange-800"></i>
362
+ </div>
363
+ <span class="text-sm font-medium text-gray-700">Novo Produto</span>
364
+ </button>
365
+ <button class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center hover:bg-purple-50 transition-colors">
366
+ <div class="bg-purple-100 p-3 rounded-full mb-3">
367
+ <i class="fas fa-file-invoice text-purple-800"></i>
368
+ </div>
369
+ <span class="text-sm font-medium text-gray-700">Nova Fatura</span>
370
+ </button>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
377
+
378
+ <!-- Modal for New Sale -->
379
+ <div id="newSaleModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
380
+ <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
381
+ <div class="flex justify-between items-center mb-4">
382
+ <h3 class="text-lg font-semibold">Nova Venda</h3>
383
+ <button onclick="document.getElementById('newSaleModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700">
384
+ <i class="fas fa-times"></i>
385
+ </button>
386
+ </div>
387
+ <form>
388
+ <div class="mb-4">
389
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="client">
390
+ Cliente
391
+ </label>
392
+ <select id="client" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
393
+ <option>Selecione um cliente</option>
394
+ <option>Cliente A</option>
395
+ <option>Cliente B</option>
396
+ </select>
397
+ </div>
398
+ <div class="mb-4">
399
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="product">
400
+ Produto
401
+ </label>
402
+ <select id="product" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
403
+ <option>Selecione um produto</option>
404
+ <option>Produto A - €10.00</option>
405
+ <option>Produto B - €15.00</option>
406
+ </select>
407
+ </div>
408
+ <div class="mb-4">
409
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="quantity">
410
+ Quantidade
411
+ </label>
412
+ <input id="quantity" type="number" min="1" value="1" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
413
+ </div>
414
+ <div class="flex justify-end">
415
+ <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
416
+ Adicionar
417
+ </button>
418
+ </div>
419
+ </form>
420
+ </div>
421
+ </div>
422
+ <script>
423
+ // Toggle sidebar
424
+ const toggleSidebar = document.getElementById('toggleSidebar');
425
+ const sidebar = document.querySelector('.sidebar');
426
+ const contentArea = document.querySelector('.content-area');
427
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
428
+
429
+ toggleSidebar.addEventListener('click', () => {
430
+ sidebar.classList.toggle('collapsed');
431
+ contentArea.classList.toggle('expanded');
432
+
433
+ // Change icon direction
434
+ const icon = toggleSidebar.querySelector('i');
435
+ if (sidebar.classList.contains('collapsed')) {
436
+ icon.classList.remove('fa-chevron-left');
437
+ icon.classList.add('fa-chevron-right');
438
+ } else {
439
+ icon.classList.remove('fa-chevron-right');
440
+ icon.classList.add('fa-chevron-left');
441
+ }
442
+ });
443
+
444
+ // Mobile menu toggle
445
+ mobileMenuBtn.addEventListener('click', () => {
446
+ sidebar.classList.toggle('open');
447
+ });
448
+
449
+ // Close sidebar when clicking outside on mobile
450
+ document.addEventListener('click', (e) => {
451
+ if (window.innerWidth <= 768 && !sidebar.contains(e.target) && e.target !== mobileMenuBtn) {
452
+ sidebar.classList.remove('open');
453
+ }
454
+ });
455
+
456
+ // Sales Functions
457
+ function openNewSaleModal() {
458
+ document.getElementById('newSaleModal').classList.remove('hidden');
459
+ }
460
+
461
+ function addProductToSale() {
462
+ // Implementation for adding products to sale
463
+ alert('Produto adicionado à venda!');
464
+ }
465
+
466
+ function finalizeSale() {
467
+ // Implementation for finalizing sale
468
+ alert('Venda finalizada com sucesso!');
469
+ }
470
+
471
+ // Charts
472
+ const salesCtx = document.getElementById('salesChart').getContext('2d');
473
+ const salesChart = new Chart(salesCtx, {
474
+ type: 'line',
475
+ data: {
476
+ labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
477
+ datasets: [{
478
+ label: 'Vendas em R$',
479
+ data: [2200, 1900, 2500, 1800, 2100, 2500, 2300, 2700, 2400, 2600, 2800, 3000],
480
+ backgroundColor: 'rgba(59, 130, 246, 0.2)',
481
+ borderColor: 'rgba(59, 130, 246, 1)',
482
+ borderWidth: 2,
483
+ tension: 0.4,
484
+ fill: true
485
+ }]
486
+ },
487
+ options: {
488
+ responsive: true,
489
+ maintainAspectRatio: false,
490
+ plugins: {
491
+ legend: {
492
+ display: false
493
+ }
494
+ },
495
+ scales: {
496
+ y: {
497
+ beginAtZero: true,
498
+ ticks: {
499
+ callback: function(value) {
500
+ return '€ ' + value.toLocaleString('pt-PT');
501
+ }
502
+ }
503
+ }
504
+ }
505
+ }
506
+ });
507
+
508
+ const productsCtx = document.getElementById('productsChart').getContext('2d');
509
+ const productsChart = new Chart(productsCtx, {
510
+ type: 'bar',
511
+ data: {
512
+ labels: ['Produto A', 'Produto B', 'Produto C', 'Produto D', 'Produto E'],
513
+ datasets: [{
514
+ label: 'Quantidade Vendida',
515
+ data: [120, 90, 150, 80, 110],
516
+ backgroundColor: [
517
+ 'rgba(99, 102, 241, 0.7)',
518
+ 'rgba(59, 130, 246, 0.7)',
519
+ 'rgba(16, 185, 129, 0.7)',
520
+ 'rgba(245, 158, 11, 0.7)',
521
+ 'rgba(244, 63, 94, 0.7)'
522
+ ],
523
+ borderColor: [
524
+ 'rgba(99, 102, 241, 1)',
525
+ 'rgba(59, 130, 246, 1)',
526
+ 'rgba(16, 185, 129, 1)',
527
+ 'rgba(245, 158, 11, 1)',
528
+ 'rgba(244, 63, 94, 1)'
529
+ ],
530
+ borderWidth: 1
531
+ }]
532
+ },
533
+ options: {
534
+ responsive: true,
535
+ maintainAspectRatio: false,
536
+ plugins: {
537
+ legend: {
538
+ display: false
539
+ }
540
+ },
541
+ scales: {
542
+ y: {
543
+ beginAtZero: true
544
+ }
545
+ }
546
+ }
547
+ });
548
+ </script>
549
+ <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=ocirema/teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
550
+ </html>