Hugging Face's logo

Spaces:
gallabs
/
pedido-de-compra-bootstrap532
Running

App Files Community
gallabs commited on
Commit
18ed172
·
verified ·
1 Parent(s): 0b9ed3f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1194 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pedido De Compra Bootstrap532
3
- emoji: 🌍
4
- colorFrom: pink
5
- colorTo: purple
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: pedido-de-compra-bootstrap532
3
+ emoji: 🐳
4
+ colorFrom: purple
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,1194 @@
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>Pedidos de Compra</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
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/sweetalert2@11"></script>
10
+ <style>
11
+ body {
12
+ background-color: #1a202c;
13
+ color: #e2e8f0;
14
+ min-height: 100vh;
15
+ }
16
+
17
+ .status-badge {
18
+ padding: 0.25rem 0.5rem;
19
+ border-radius: 50rem;
20
+ font-size: 0.75rem;
21
+ font-weight: 500;
22
+ }
23
+
24
+ .status-em-elaboracao {
25
+ background-color: #4b5563;
26
+ color: #d1d5db;
27
+ }
28
+
29
+ .status-aguardando-aprovacao {
30
+ background-color: #f59e0b;
31
+ color: #1e293b;
32
+ }
33
+
34
+ .status-aprovado {
35
+ background-color: #10b981;
36
+ color: #1e293b;
37
+ }
38
+
39
+ .status-enviado {
40
+ background-color: #3b82f6;
41
+ color: #ffffff;
42
+ }
43
+
44
+ .status-recebido-parcial {
45
+ background-color: #8b5cf6;
46
+ color: #ffffff;
47
+ }
48
+
49
+ .status-recebido-total {
50
+ background-color: #22c55e;
51
+ color: #1e293b;
52
+ }
53
+
54
+ .status-cancelado {
55
+ background-color: #ef4444;
56
+ color: #ffffff;
57
+ }
58
+
59
+ .offcanvas {
60
+ transition: transform 0.3s ease-in-out;
61
+ }
62
+
63
+ .offcanvas-end {
64
+ transform: translateX(100%);
65
+ }
66
+
67
+ .offcanvas.show {
68
+ transform: translateX(0);
69
+ }
70
+
71
+ .backdrop {
72
+ transition: opacity 0.3s ease-in-out;
73
+ opacity: 0;
74
+ pointer-events: none;
75
+ }
76
+
77
+ .backdrop.show {
78
+ opacity: 1;
79
+ pointer-events: auto;
80
+ }
81
+
82
+ .table-responsive {
83
+ overflow-x: auto;
84
+ }
85
+
86
+ .table {
87
+ color: #e2e8f0;
88
+ }
89
+
90
+ .table thead th {
91
+ background-color: #2d3748;
92
+ border-bottom: 1px solid #4a5568;
93
+ font-size: 0.75rem;
94
+ font-weight: 500;
95
+ text-transform: uppercase;
96
+ letter-spacing: 0.05em;
97
+ }
98
+
99
+ .table tbody tr {
100
+ background-color: #2d3748;
101
+ }
102
+
103
+ .table tbody tr:hover {
104
+ background-color: rgba(45, 55, 72, 0.7);
105
+ }
106
+
107
+ .table tbody tr td {
108
+ vertical-align: middle;
109
+ white-space: nowrap;
110
+ border-top: 1px solid #4a5568;
111
+ }
112
+
113
+ .table tfoot td {
114
+ background-color: #2d3748;
115
+ font-weight: 500;
116
+ border-top: 1px solid #4a5568;
117
+ }
118
+
119
+ .btn-action {
120
+ padding: 0.25rem;
121
+ background: transparent;
122
+ border: none;
123
+ }
124
+
125
+ .btn-action:hover {
126
+ opacity: 0.8;
127
+ }
128
+
129
+ .btn-blue {
130
+ background-color: #2563eb;
131
+ color: white;
132
+ }
133
+
134
+ .btn-blue:hover {
135
+ background-color: #1d4ed8;
136
+ color: white;
137
+ }
138
+
139
+ .btn-gray {
140
+ background-color: #4a5568;
141
+ color: white;
142
+ }
143
+
144
+ .btn-gray:hover {
145
+ background-color: #2d3748;
146
+ color: white;
147
+ }
148
+
149
+ .btn-green {
150
+ background-color: #10b981;
151
+ color: white;
152
+ }
153
+
154
+ .btn-green:hover {
155
+ background-color: #0d9e6e;
156
+ color: white;
157
+ }
158
+
159
+ .btn-yellow {
160
+ background-color: #d97706;
161
+ color: white;
162
+ }
163
+
164
+ .btn-yellow:hover {
165
+ background-color: #b45309;
166
+ color: white;
167
+ }
168
+
169
+ .btn-purple {
170
+ background-color: #7c3aed;
171
+ color: white;
172
+ }
173
+
174
+ .btn-purple:hover {
175
+ background-color: #6d28d9;
176
+ color: white;
177
+ }
178
+
179
+ .btn-red {
180
+ background-color: #dc2626;
181
+ color: white;
182
+ }
183
+
184
+ .btn-red:hover {
185
+ background-color: #b91c1c;
186
+ color: white;
187
+ }
188
+
189
+ .card {
190
+ background-color: #2d3748;
191
+ border: 1px solid #4a5568;
192
+ }
193
+
194
+ .form-control, .form-select {
195
+ background-color: #2d3748;
196
+ border: 1px solid #4a5568;
197
+ color: #e2e8f0;
198
+ }
199
+
200
+ .form-control:focus, .form-select:focus {
201
+ background-color: #2d3748;
202
+ border-color: #4299e1;
203
+ color: #e2e8f0;
204
+ box-shadow: 0 0 0 0.25rem rgba(66, 153, 225, 0.25);
205
+ }
206
+
207
+ .form-control::placeholder {
208
+ color: #a0aec0;
209
+ }
210
+
211
+ .history-item {
212
+ display: flex;
213
+ align-items: flex-start;
214
+ margin-bottom: 1rem;
215
+ }
216
+
217
+ .history-icon {
218
+ flex-shrink: 0;
219
+ width: 2rem;
220
+ height: 2rem;
221
+ border-radius: 50%;
222
+ display: flex;
223
+ align-items: center;
224
+ justify-content: center;
225
+ margin-right: 0.75rem;
226
+ }
227
+
228
+ .history-content p {
229
+ margin-bottom: 0;
230
+ }
231
+
232
+ .history-date {
233
+ font-size: 0.875rem;
234
+ color: #a0aec0;
235
+ }
236
+
237
+ .modal-content {
238
+ background-color: #2d3748;
239
+ color: #e2e8f0;
240
+ border: 1px solid #4a5568;
241
+ }
242
+
243
+ .modal-header {
244
+ border-bottom: 1px solid #4a5568;
245
+ }
246
+
247
+ .modal-footer {
248
+ border-top: 1px solid #4a5568;
249
+ }
250
+
251
+ .btn-close {
252
+ filter: invert(1);
253
+ }
254
+
255
+ #itemForm {
256
+ display: none;
257
+ }
258
+
259
+ #itemForm.show {
260
+ display: block;
261
+ }
262
+
263
+ @media (max-width: 768px) {
264
+ .offcanvas {
265
+ width: 100% !important;
266
+ }
267
+ }
268
+ </style>
269
+ </head>
270
+ <body>
271
+ <div class="container-fluid px-4 py-5">
272
+ <!-- Header -->
273
+ <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
274
+ <h1 class="text-primary mb-0">Pedidos de Compra</h1>
275
+ <div class="d-flex flex-column flex-sm-row gap-3 w-100 w-md-auto">
276
+ <button id="newOrderBtn" class="btn btn-blue d-flex align-items-center gap-2">
277
+ <i class="fas fa-plus"></i> Novo Pedido de Compra
278
+ </button>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Filters (always visible) -->
283
+ <div id="filters" class="card mb-5">
284
+ <div class="card-body">
285
+ <div class="row g-4">
286
+ <div class="col-12 col-md-6 col-lg-3">
287
+ <label class="form-label">Fornecedor</label>
288
+ <select class="form-select">
289
+ <option>Todos</option>
290
+ <option>Fornecedor A</option>
291
+ <option>Fornecedor B</option>
292
+ <option>Fornecedor C</option>
293
+ </select>
294
+ </div>
295
+ <div class="col-12 col-md-6 col-lg-3">
296
+ <label class="form-label">Status</label>
297
+ <select class="form-select">
298
+ <option>Todos</option>
299
+ <option>Em Elaboração</option>
300
+ <option>Aguardando Aprovação</option>
301
+ <option>Aprovado</option>
302
+ <option>Enviado</option>
303
+ <option>Recebido Parcial</option>
304
+ <option>Recebido Total</option>
305
+ <option>Cancelado</option>
306
+ </select>
307
+ </div>
308
+ <div class="col-12 col-md-6 col-lg-3">
309
+ <label class="form-label">Responsável</label>
310
+ <select class="form-select">
311
+ <option>Todos</option>
312
+ <option>João Silva</option>
313
+ <option>Maria Souza</option>
314
+ <option>Carlos Oliveira</option>
315
+ </select>
316
+ </div>
317
+ <div class="col-12 col-md-6 col-lg-3">
318
+ <label class="form-label">Período</label>
319
+ <input type="date" class="form-control">
320
+ </div>
321
+ </div>
322
+ <div class="d-flex justify-content-end mt-4 gap-2">
323
+ <button class="btn btn-gray">Limpar</button>
324
+ <button class="btn btn-blue">Aplicar</button>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Orders Table -->
330
+ <div class="card shadow-lg">
331
+ <div class="table-responsive">
332
+ <table class="table table-hover mb-0">
333
+ <thead>
334
+ <tr>
335
+ <th class="ps-4">Nº Pedido</th>
336
+ <th>Fornecedor</th>
337
+ <th>Responsável</th>
338
+ <th>Emissão</th>
339
+ <th>Previsão Entrega</th>
340
+ <th>Status</th>
341
+ <th>Valor Total</th>
342
+ <th class="text-end pe-4">Ações</th>
343
+ </tr>
344
+ </thead>
345
+ <tbody>
346
+ <tr>
347
+ <td class="ps-4">PC-2023-001</td>
348
+ <td>Fornecedor A</td>
349
+ <td>João Silva</td>
350
+ <td>10/05/2023</td>
351
+ <td>25/05/2023</td>
352
+ <td>
353
+ <span class="status-badge status-recebido-total">Recebido Total</span>
354
+ </td>
355
+ <td>R$ 5.245,00</td>
356
+ <td class="text-end pe-4">
357
+ <div class="d-flex justify-content-end gap-2">
358
+ <button onclick="viewOrder('PC-2023-001')" class="btn-action text-primary">
359
+ <i class="fas fa-eye"></i>
360
+ </button>
361
+ <button class="btn-action text-warning">
362
+ <i class="fas fa-print"></i>
363
+ </button>
364
+ </div>
365
+ </td>
366
+ </tr>
367
+ <tr>
368
+ <td class="ps-4">PC-2023-002</td>
369
+ <td>Fornecedor B</td>
370
+ <td>Maria Souza</td>
371
+ <td>15/05/2023</td>
372
+ <td>30/05/2023</td>
373
+ <td>
374
+ <span class="status-badge status-enviado">Enviado</span>
375
+ </td>
376
+ <td>R$ 3.780,50</td>
377
+ <td class="text-end pe-4">
378
+ <div class="d-flex justify-content-end gap-2">
379
+ <button onclick="viewOrder('PC-2023-002')" class="btn-action text-primary">
380
+ <i class="fas fa-eye"></i>
381
+ </button>
382
+ <button class="btn-action text-warning">
383
+ <i class="fas fa-print"></i>
384
+ </button>
385
+ </div>
386
+ </td>
387
+ </tr>
388
+ <tr>
389
+ <td class="ps-4">PC-2023-003</td>
390
+ <td>Fornecedor C</td>
391
+ <td>Carlos Oliveira</td>
392
+ <td>18/05/2023</td>
393
+ <td>05/06/2023</td>
394
+ <td>
395
+ <span class="status-badge status-aguardando-aprovacao">Aguardando Aprovação</span>
396
+ </td>
397
+ <td>R$ 12.450,00</td>
398
+ <td class="text-end pe-4">
399
+ <div class="d-flex justify-content-end gap-2">
400
+ <button onclick="viewOrder('PC-2023-003')" class="btn-action text-primary">
401
+ <i class="fas fa-eye"></i>
402
+ </button>
403
+ <button class="btn-action text-warning">
404
+ <i class="fas fa-print"></i>
405
+ </button>
406
+ </div>
407
+ </td>
408
+ </tr>
409
+ <tr>
410
+ <td class="ps-4">PC-2023-004</td>
411
+ <td>Fornecedor A</td>
412
+ <td>João Silva</td>
413
+ <td>20/05/2023</td>
414
+ <td>10/06/2023</td>
415
+ <td>
416
+ <span class="status-badge status-em-elaboracao">Em Elaboração</span>
417
+ </td>
418
+ <td>R$ 7.890,25</td>
419
+ <td class="text-end pe-4">
420
+ <div class="d-flex justify-content-end gap-2">
421
+ <button onclick="viewOrder('PC-2023-004')" class="btn-action text-primary">
422
+ <i class="fas fa-eye"></i>
423
+ </button>
424
+ <button class="btn-action text-success">
425
+ <i class="fas fa-edit"></i>
426
+ </button>
427
+ <button onclick="cancelOrder('PC-2023-004')" class="btn-action text-danger">
428
+ <i class="fas fa-times"></i>
429
+ </button>
430
+ <button class="btn-action text-warning">
431
+ <i class="fas fa-print"></i>
432
+ </button>
433
+ </div>
434
+ </td>
435
+ </tr>
436
+ <tr>
437
+ <td class="ps-4">PC-2023-005</td>
438
+ <td>Fornecedor B</td>
439
+ <td>Maria Souza</td>
440
+ <td>22/05/2023</td>
441
+ <td>15/06/2023</td>
442
+ <td>
443
+ <span class="status-badge status-recebido-parcial">Recebido Parcial</span>
444
+ </td>
445
+ <td>R$ 9.120,75</td>
446
+ <td class="text-end pe-4">
447
+ <div class="d-flex justify-content-end gap-2">
448
+ <button onclick="viewOrder('PC-2023-005')" class="btn-action text-primary">
449
+ <i class="fas fa-eye"></i>
450
+ </button>
451
+ <button onclick="registerReceipt('PC-2023-005')" class="btn-action text-purple">
452
+ <i class="fas fa-truck-loading"></i>
453
+ </button>
454
+ <button class="btn-action text-warning">
455
+ <i class="fas fa-print"></i>
456
+ </button>
457
+ </div>
458
+ </td>
459
+ </tr>
460
+ </tbody>
461
+ </table>
462
+ </div>
463
+ <div class="card-footer d-flex align-items-center justify-content-between">
464
+ <div class="text-muted">
465
+ Mostrando <span class="fw-bold">1</span> a <span class="fw-bold">5</span> de <span class="fw-bold">15</span> resultados
466
+ </div>
467
+ <div class="d-flex gap-1">
468
+ <button class="btn btn-gray btn-sm">
469
+ <i class="fas fa-chevron-left"></i>
470
+ </button>
471
+ <button class="btn btn-blue btn-sm">1</button>
472
+ <button class="btn btn-gray btn-sm">2</button>
473
+ <button class="btn btn-gray btn-sm">3</button>
474
+ <button class="btn btn-gray btn-sm">
475
+ <i class="fas fa-chevron-right"></i>
476
+ </button>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <!-- Order Detail Modal -->
483
+ <div id="orderModal" class="modal fade" tabindex="-1" aria-hidden="true">
484
+ <div class="modal-dialog modal-xl">
485
+ <div class="modal-content">
486
+ <div class="modal-header">
487
+ <h3 class="modal-title text-primary" id="modalOrderNumber">Pedido PC-2023-001</h3>
488
+ <button type="button" class="btn-close" onclick="closeModal()"></button>
489
+ </div>
490
+ <div class="modal-body">
491
+ <!-- Order Info -->
492
+ <div class="row g-4 mt-3">
493
+ <div class="col-12 col-md-4">
494
+ <div class="card h-100">
495
+ <div class="card-body">
496
+ <h4 class="card-title text-primary mb-3">Fornecedor</h4>
497
+ <p id="modalSupplier">Fornecedor A</p>
498
+ <p id="modalSupplierContact">[email protected]</p>
499
+ <p id="modalSupplierPhone">(11) 9999-9999</p>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ <div class="col-12 col-md-4">
504
+ <div class="card h-100">
505
+ <div class="card-body">
506
+ <h4 class="card-title text-primary mb-3">Responsável</h4>
507
+ <p id="modalResponsible">João Silva</p>
508
+ <p id="modalDepartment">Compras</p>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ <div class="col-12 col-md-4">
513
+ <div class="card h-100">
514
+ <div class="card-body">
515
+ <h4 class="card-title text-primary mb-3">Datas</h4>
516
+ <div class="row g-2">
517
+ <div class="col-6">
518
+ <p class="text-muted small mb-0">Emissão:</p>
519
+ <p id="modalEmissionDate">10/05/2023</p>
520
+ </div>
521
+ <div class="col-6">
522
+ <p class="text-muted small mb-0">Previsão Entrega:</p>
523
+ <p id="modalDeliveryDate">25/05/2023</p>
524
+ </div>
525
+ <div class="col-6">
526
+ <p class="text-muted small mb-0">Pagamento:</p>
527
+ <p id="modalPayment">30 dias</p>
528
+ </div>
529
+ <div class="col-6">
530
+ <p class="text-muted small mb-0">Status:</p>
531
+ <p id="modalStatus"><span class="status-badge status-recebido-total">Recebido Total</span></p>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </div>
538
+
539
+ <!-- Order Items -->
540
+ <div class="mt-5">
541
+ <div class="d-flex justify-content-between align-items-center mb-4">
542
+ <h4 class="mb-0">Itens do Pedido</h4>
543
+ <button id="addItemBtn" class="btn btn-blue btn-sm">
544
+ <i class="fas fa-plus me-1"></i> Adicionar Item
545
+ </button>
546
+ </div>
547
+
548
+ <!-- Item Form (hidden by default) -->
549
+ <div id="itemForm" class="card mb-4">
550
+ <div class="card-body">
551
+ <div class="row g-4 mb-4">
552
+ <div class="col-12 col-md-6">
553
+ <label class="form-label">Produto *</label>
554
+ <select class="form-select">
555
+ <option>Selecione um produto</option>
556
+ <option>Notebook Dell XPS 15</option>
557
+ <option>Monitor 27" 4K</option>
558
+ <option>Teclado Mecânico</option>
559
+ </select>
560
+ </div>
561
+ <div class="col-12 col-md-6">
562
+ <label class="form-label">Quantidade *</label>
563
+ <input type="number" min="1" value="1" class="form-control">
564
+ </div>
565
+ </div>
566
+ <div class="row g-4">
567
+ <div class="col-12 col-md-6">
568
+ <label class="form-label">Valor Unitário *</label>
569
+ <input type="text" placeholder="R$ 0,00" class="form-control">
570
+ </div>
571
+ <div class="col-12 col-md-6">
572
+ <label class="form-label">Valor Total</label>
573
+ <input type="text" placeholder="R$ 0,00" readonly class="form-control">
574
+ </div>
575
+ </div>
576
+ <div class="d-flex justify-content-end mt-4 gap-2">
577
+ <button type="button" onclick="hideItemForm()" class="btn btn-gray btn-sm">
578
+ Cancelar
579
+ </button>
580
+ <button type="button" class="btn btn-green btn-sm">
581
+ <i class="fas fa-save me-1"></i> Salvar
582
+ </button>
583
+ </div>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="table-responsive">
588
+ <table class="table">
589
+ <thead>
590
+ <tr>
591
+ <th>Produto</th>
592
+ <th>Categoria</th>
593
+ <th>Quantidade</th>
594
+ <th>Unitário</th>
595
+ <th>Total</th>
596
+ <th>Recebido</th>
597
+ <th>Status</th>
598
+ <th class="text-end">Ações</th>
599
+ </tr>
600
+ </thead>
601
+ <tbody>
602
+ <tr>
603
+ <td>Notebook Dell XPS 15</td>
604
+ <td>Informática</td>
605
+ <td>2</td>
606
+ <td>R$ 4.500,00</td>
607
+ <td>R$ 9.000,00</td>
608
+ <td>2</td>
609
+ <td>
610
+ <span class="status-badge bg-success text-white">Recebido</span>
611
+ </td>
612
+ <td class="text-end">
613
+ <div class="d-flex justify-content-end gap-1">
614
+ <button onclick="editItem('Notebook Dell XPS 15', 2, 4500)" class="btn-action text-primary">
615
+ <i class="fas fa-edit"></i>
616
+ </button>
617
+ <button onclick="deleteItem('Notebook Dell XPS 15')" class="btn-action text-danger">
618
+ <i class="fas fa-trash"></i>
619
+ </button>
620
+ </div>
621
+ </td>
622
+ </tr>
623
+ <tr>
624
+ <td>Monitor 27" 4K</td>
625
+ <td>Informática</td>
626
+ <td>5</td>
627
+ <td>R$ 1.250,00</td>
628
+ <td>R$ 6.250,00</td>
629
+ <td>5</td>
630
+ <td>
631
+ <span class="status-badge bg-success text-white">Recebido</span>
632
+ </td>
633
+ <td class="text-end">
634
+ <div class="d-flex justify-content-end gap-1">
635
+ <button onclick="editItem('Monitor 27\" 4K', 5, 1250)" class="btn-action text-primary">
636
+ <i class="fas fa-edit"></i>
637
+ </button>
638
+ <button onclick="deleteItem('Monitor 27\" 4K')" class="btn-action text-danger">
639
+ <i class="fas fa-trash"></i>
640
+ </button>
641
+ </div>
642
+ </td>
643
+ </tr>
644
+ </tbody>
645
+ <tfoot>
646
+ <tr>
647
+ <td colspan="3" class="text-end fw-bold">Total:</td>
648
+ <td colspan="5">R$ 15.250,00</td>
649
+ </tr>
650
+ </tfoot>
651
+ </table>
652
+ </div>
653
+ </div>
654
+
655
+ <!-- Order Notes -->
656
+ <div class="mt-5">
657
+ <h4 class="mb-3">Observações</h4>
658
+ <div class="card">
659
+ <div class="card-body">
660
+ <p id="modalNotes">Entregar na recepção do prédio A, das 8h às 17h. Favor embalar com cuidado os equipamentos eletrônicos.</p>
661
+ </div>
662
+ </div>
663
+ </div>
664
+
665
+ <!-- Order History -->
666
+ <div class="mt-5">
667
+ <div class="d-flex justify-content-between align-items-center mb-3">
668
+ <h4 class="mb-0">Histórico</h4>
669
+ <button onclick="showAllHistory()" class="btn btn-link text-primary p-0">
670
+ Ver todos <i class="fas fa-chevron-down ms-1"></i>
671
+ </button>
672
+ </div>
673
+ <div id="historyItems">
674
+ <div class="history-item">
675
+ <div class="history-icon bg-primary">
676
+ <i class="fas fa-check text-white"></i>
677
+ </div>
678
+ <div class="history-content">
679
+ <p class="fw-medium">Pedido recebido totalmente</p>
680
+ <p class="history-date">25/05/2023 14:30 - Por João Silva</p>
681
+ </div>
682
+ </div>
683
+ <div class="history-item">
684
+ <div class="history-icon bg-purple">
685
+ <i class="fas fa-truck text-white"></i>
686
+ </div>
687
+ <div class="history-content">
688
+ <p class="fw-medium">Pedido enviado pelo fornecedor</p>
689
+ <p class="history-date">20/05/2023 09:15 - Por Fornecedor A</p>
690
+ </div>
691
+ </div>
692
+ <div class="history-item">
693
+ <div class="history-icon bg-success">
694
+ <i class="fas fa-thumbs-up text-white"></i>
695
+ </div>
696
+ <div class="history-content">
697
+ <p class="fw-medium">Pedido aprovado</p>
698
+ <p class="history-date">12/05/2023 16:45 - Por Maria Souza (Gerente)</p>
699
+ </div>
700
+ </div>
701
+ <div class="history-item">
702
+ <div class="history-icon bg-warning">
703
+ <i class="fas fa-paper-plane text-white"></i>
704
+ </div>
705
+ <div class="history-content">
706
+ <p class="fw-medium">Pedido enviado para aprovação</p>
707
+ <p class="history-date">10/05/2023 17:30 - Por João Silva</p>
708
+ </div>
709
+ </div>
710
+ <div class="history-item">
711
+ <div class="history-icon bg-secondary">
712
+ <i class="fas fa-file-alt text-white"></i>
713
+ </div>
714
+ <div class="history-content">
715
+ <p class="fw-medium">Pedido criado</p>
716
+ <p class="history-date">10/05/2023 14:00 - Por João Silva</p>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ <div class="modal-footer">
723
+ <button id="sendApprovalBtn" type="button" onclick="confirmSendForApproval()" class="btn btn-yellow">
724
+ <i class="fas fa-paper-plane me-2"></i> Enviar para Aprovação
725
+ </button>
726
+ <button id="registerReceiptBtn" type="button" class="btn btn-purple">
727
+ <i class="fas fa-truck-loading me-2"></i> Registrar Recebimento
728
+ </button>
729
+ <button onclick="cancelOrder('PC-2023-001')" type="button" class="btn btn-gray">
730
+ <i class="fas fa-times me-2"></i> Cancelar Pedido
731
+ </button>
732
+ <button onclick="closeModal()" type="button" class="btn btn-gray">
733
+ Fechar
734
+ </button>
735
+ </div>
736
+ </div>
737
+ </div>
738
+ </div>
739
+
740
+ <!-- Edit Item Modal -->
741
+ <div id="editItemModal" class="modal fade" tabindex="-1" aria-hidden="true">
742
+ <div class="modal-dialog">
743
+ <div class="modal-content">
744
+ <div class="modal-header">
745
+ <h3 class="modal-title text-primary">Editar Item</h3>
746
+ <button type="button" class="btn-close" onclick="closeEditItemModal()"></button>
747
+ </div>
748
+ <div class="modal-body">
749
+ <div class="row g-4">
750
+ <div class="col-12">
751
+ <label class="form-label">Produto</label>
752
+ <input type="text" id="editProductName" readonly class="form-control">
753
+ </div>
754
+ <div class="col-12 col-md-6">
755
+ <label class="form-label">Quantidade *</label>
756
+ <input type="number" id="editQuantity" min="1" class="form-control">
757
+ </div>
758
+ <div class="col-12 col-md-6">
759
+ <label class="form-label">Valor Unitário *</label>
760
+ <input type="text" id="editUnitPrice" placeholder="R$ 0,00" class="form-control">
761
+ </div>
762
+ <div class="col-12">
763
+ <label class="form-label">Valor Total</label>
764
+ <input type="text" id="editTotalPrice" placeholder="R$ 0,00" readonly class="form-control">
765
+ </div>
766
+ </div>
767
+ </div>
768
+ <div class="modal-footer">
769
+ <button type="button" onclick="saveItemChanges()" class="btn btn-green">
770
+ <i class="fas fa-save me-2"></i> Salvar Alterações
771
+ </button>
772
+ <button type="button" onclick="closeEditItemModal()" class="btn btn-gray">
773
+ Cancelar
774
+ </button>
775
+ </div>
776
+ </div>
777
+ </div>
778
+ </div>
779
+
780
+ <!-- New Order Offcanvas -->
781
+ <div id="backdrop" class="backdrop fixed-top start-0 w-100 h-100 bg-black bg-opacity-50 z-40"></div>
782
+
783
+ <div id="newOrderOffcanvas" class="offcanvas offcanvas-end offcanvas-end" tabindex="-1">
784
+ <div class="offcanvas-header">
785
+ <h2 class="offcanvas-title text-primary">Novo Pedido de Compra</h2>
786
+ <button type="button" class="btn-close text-reset" onclick="closeOffcanvas()"></button>
787
+ </div>
788
+ <div class="offcanvas-body">
789
+ <form>
790
+ <div class="mb-4">
791
+ <label class="form-label">Fornecedor *</label>
792
+ <select class="form-select">
793
+ <option>Selecione um fornecedor</option>
794
+ <option>Fornecedor A</option>
795
+ <option>Fornecedor B</option>
796
+ <option>Fornecedor C</option>
797
+ </select>
798
+ </div>
799
+
800
+ <div class="mb-4">
801
+ <label class="form-label">Responsável *</label>
802
+ <select class="form-select">
803
+ <option>Selecione um responsável</option>
804
+ <option>João Silva</option>
805
+ <option>Maria Souza</option>
806
+ <option>Carlos Oliveira</option>
807
+ </select>
808
+ </div>
809
+
810
+ <div class="row g-3 mb-4">
811
+ <div class="col-12 col-md-6">
812
+ <label class="form-label">Data de Emissão *</label>
813
+ <input type="date" class="form-control">
814
+ </div>
815
+ <div class="col-12 col-md-6">
816
+ <label class="form-label">Previsão de Entrega *</label>
817
+ <input type="date" class="form-control">
818
+ </div>
819
+ </div>
820
+
821
+ <div class="mb-4">
822
+ <label class="form-label">Condição de Pagamento *</label>
823
+ <select class="form-select">
824
+ <option>À vista</option>
825
+ <option>7 dias</option>
826
+ <option>15 dias</option>
827
+ <option>30 dias</option>
828
+ <option>60 dias</option>
829
+ </select>
830
+ </div>
831
+
832
+ <div class="mb-4">
833
+ <label class="form-label">Observações</label>
834
+ <textarea rows="3" class="form-control"></textarea>
835
+ </div>
836
+
837
+ <div class="pt-4 border-top">
838
+ <h3 class="mb-4">Itens do Pedido</h3>
839
+
840
+ <div class="mb-4">
841
+ <div class="card">
842
+ <div class="card-body">
843
+ <div class="row g-3 mb-4">
844
+ <div class="col-12 col-md-6">
845
+ <label class="form-label">Produto *</label>
846
+ <select class="form-select">
847
+ <option>Selecione um produto</option>
848
+ <option>Notebook Dell XPS 15</option>
849
+ <option>Monitor 27" 4K</option>
850
+ <option>Teclado Mecânico</option>
851
+ <option>Mouse Sem Fio</option>
852
+ </select>
853
+ </div>
854
+ <div class="col-12 col-md-6">
855
+ <label class="form-label">Quantidade *</label>
856
+ <input type="number" min="1" value="1" class="form-control">
857
+ </div>
858
+ </div>
859
+ <div class="row g-3">
860
+ <div class="col-12 col-md-6">
861
+ <label class="form-label">Valor Unitário *</label>
862
+ <input type="text" placeholder="R$ 0,00" class="form-control">
863
+ </div>
864
+ <div class="col-12 col-md-6">
865
+ <label class="form-label">Valor Total</label>
866
+ <input type="text" placeholder="R$ 0,00" readonly class="form-control">
867
+ </div>
868
+ </div>
869
+ <div class="d-flex justify-content-end mt-4">
870
+ <button type="button" class="btn btn-red btn-sm">
871
+ <i class="fas fa-trash me-1"></i> Remover
872
+ </button>
873
+ </div>
874
+ </div>
875
+ </div>
876
+ </div>
877
+
878
+ <button type="button" class="btn btn-gray w-100 d-flex align-items-center justify-content-center gap-2">
879
+ <i class="fas fa-plus"></i> Adicionar Item
880
+ </button>
881
+ </div>
882
+
883
+ <div class="d-flex justify-content-end gap-3 pt-5">
884
+ <button type="button" onclick="closeOffcanvas()" class="btn btn-gray">
885
+ Cancelar
886
+ </button>
887
+ <button type="button" class="btn btn-blue">
888
+ <i class="fas fa-save me-2"></i> Salvar Pedido
889
+ </button>
890
+ </div>
891
+ </form>
892
+ </div>
893
+ </div>
894
+
895
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
896
+ <script>
897
+ // Initialize Bootstrap components
898
+ var orderModal = new bootstrap.Modal(document.getElementById('orderModal'));
899
+ var editItemModal = new bootstrap.Modal(document.getElementById('editItemModal'));
900
+ var newOrderOffcanvas = new bootstrap.Offcanvas(document.getElementById('newOrderOffcanvas'));
901
+
902
+ // Toggle item form
903
+ document.getElementById('addItemBtn').addEventListener('click', function() {
904
+ document.getElementById('itemForm').classList.add('show');
905
+ });
906
+
907
+ function hideItemForm() {
908
+ document.getElementById('itemForm').classList.remove('show');
909
+ }
910
+
911
+ // Open new order offcanvas
912
+ document.getElementById('newOrderBtn').addEventListener('click', function() {
913
+ document.getElementById('backdrop').classList.add('show');
914
+ newOrderOffcanvas.show();
915
+ });
916
+
917
+ // Close offcanvas
918
+ function closeOffcanvas() {
919
+ document.getElementById('backdrop').classList.remove('show');
920
+ newOrderOffcanvas.hide();
921
+ }
922
+
923
+ // Close modal
924
+ function closeModal() {
925
+ orderModal.hide();
926
+ }
927
+
928
+ // View order modal
929
+ function viewOrder(orderNumber) {
930
+ // In a real app, we would fetch order details based on orderNumber
931
+ document.getElementById('modalOrderNumber').textContent = `Pedido ${orderNumber}`;
932
+
933
+ // Update buttons based on status
934
+ const status = document.getElementById('modalStatus').textContent.trim();
935
+ const sendApprovalBtn = document.getElementById('sendApprovalBtn');
936
+ const registerReceiptBtn = document.getElementById('registerReceiptBtn');
937
+
938
+ sendApprovalBtn.style.display = status === 'Em Elaboração' ? 'block' : 'none';
939
+ registerReceiptBtn.style.display = (status === 'Em Elaboração' || status === 'Cancelado') ? 'none' : 'block';
940
+
941
+ orderModal.show();
942
+ }
943
+
944
+ // Show all history items
945
+ function showAllHistory() {
946
+ // In a real app, we would fetch all history items here
947
+ Swal.fire({
948
+ title: 'Histórico Completo',
949
+ html: `
950
+ <div class="text-left" style="max-height: 24rem; overflow-y: auto;">
951
+ <div class="d-flex align-items-start mb-3">
952
+ <div class="flex-shrink-0 bg-primary rounded-circle p-2 me-3">
953
+ <i class="fas fa-check text-white"></i>
954
+ </div>
955
+ <div>
956
+ <p class="fw-medium mb-0">Pedido recebido totalmente</p>
957
+ <p class="text-muted small">25/05/2023 14:30 - Por João Silva</p>
958
+ </div>
959
+ </div>
960
+ <div class="d-flex align-items-start mb-3">
961
+ <div class="flex-shrink-0 bg-purple rounded-circle p-2 me-3">
962
+ <i class="fas fa-truck text-white"></i>
963
+ </div>
964
+ <div>
965
+ <p class="fw-medium mb-0">Pedido enviado pelo fornecedor</p>
966
+ <p class="text-muted small">20/05/2023 09:15 - Por Fornecedor A</p>
967
+ </div>
968
+ </div>
969
+ <div class="d-flex align-items-start mb-3">
970
+ <div class="flex-shrink-0 bg-success rounded-circle p-2 me-3">
971
+ <i class="fas fa-thumbs-up text-white"></i>
972
+ </div>
973
+ <div>
974
+ <p class="fw-medium mb-0">Pedido aprovado</p>
975
+ <p class="text-muted small">12/05/2023 16:45 - Por Maria Souza (Gerente)</p>
976
+ </div>
977
+ </div>
978
+ <div class="d-flex align-items-start mb-3">
979
+ <div class="flex-shrink-0 bg-warning rounded-circle p-2 me-3">
980
+ <i class="fas fa-paper-plane text-white"></i>
981
+ </div>
982
+ <div>
983
+ <p class="fw-medium mb-0">Pedido enviado para aprovação</p>
984
+ <p class="text-muted small">10/05/2023 17:30 - Por João Silva</p>
985
+ </div>
986
+ </div>
987
+ <div class="d-flex align-items-start mb-3">
988
+ <div class="flex-shrink-0 bg-secondary rounded-circle p-2 me-3">
989
+ <i class="fas fa-file-alt text-white"></i>
990
+ </div>
991
+ <div>
992
+ <p class="fw-medium mb-0">Pedido criado</p>
993
+ <p class="text-muted small">10/05/2023 14:00 - Por João Silva</p>
994
+ </div>
995
+ </div>
996
+ <div class="d-flex align-items-start">
997
+ <div class="flex-shrink-0 bg-info rounded-circle p-2 me-3">
998
+ <i class="fas fa-comment text-white"></i>
999
+ </div>
1000
+ <div>
1001
+ <p class="fw-medium mb-0">Observação adicionada</p>
1002
+ <p class="text-muted small">10/05/2023 14:05 - Por João Silva</p>
1003
+ <p class="fst-italic small">"Entregar na recepção do prédio A"</p>
1004
+ </div>
1005
+ </div>
1006
+ </div>
1007
+ `,
1008
+ background: '#1f2937',
1009
+ color: '#f3f4f6',
1010
+ confirmButtonColor: '#3b82f6',
1011
+ width: '600px'
1012
+ });
1013
+ }
1014
+
1015
+ // Confirm send for approval
1016
+ function confirmSendForApproval() {
1017
+ Swal.fire({
1018
+ title: 'Enviar para Aprovação',
1019
+ text: 'Tem certeza que deseja enviar este pedido para aprovação? Esta ação não pode ser desfeita.',
1020
+ icon: 'question',
1021
+ showCancelButton: true,
1022
+ confirmButtonColor: '#3b82f6',
1023
+ cancelButtonColor: '#6b7280',
1024
+ confirmButtonText: 'Sim, enviar!',
1025
+ cancelButtonText: 'Cancelar',
1026
+ background: '#1f2937',
1027
+ color: '#f3f4f6'
1028
+ }).then((result) => {
1029
+ if (result.isConfirmed) {
1030
+ Swal.fire({
1031
+ title: 'Enviado!',
1032
+ text: 'O pedido foi enviado para aprovação com sucesso.',
1033
+ icon: 'success',
1034
+ background: '#1f2937',
1035
+ color: '#f3f4f6'
1036
+ });
1037
+ }
1038
+ });
1039
+ }
1040
+
1041
+ // Cancel order confirmation
1042
+ function cancelOrder(orderNumber) {
1043
+ Swal.fire({
1044
+ title: 'Cancelar Pedido',
1045
+ text: `Tem certeza que deseja cancelar o pedido ${orderNumber}? Esta ação não pode ser desfeita.`,
1046
+ icon: 'warning',
1047
+ showCancelButton: true,
1048
+ confirmButtonColor: '#ef4444',
1049
+ cancelButtonColor: '#6b7280',
1050
+ confirmButtonText: 'Sim, cancelar!',
1051
+ cancelButtonText: 'Não, manter',
1052
+ background: '#1f2937',
1053
+ color: '#f3f4f6'
1054
+ }).then((result) => {
1055
+ if (result.isConfirmed) {
1056
+ Swal.fire({
1057
+ title: 'Cancelado!',
1058
+ text: `O pedido ${orderNumber} foi cancelado.`,
1059
+ icon: 'success',
1060
+ background: '#1f2937',
1061
+ color: '#f3f4f6'
1062
+ });
1063
+ }
1064
+ });
1065
+ }
1066
+
1067
+ // Register receipt
1068
+ function registerReceipt(orderNumber) {
1069
+ Swal.fire({
1070
+ title: 'Registrar Recebimento',
1071
+ html: `
1072
+ <div class="text-left">
1073
+ <div class="mb-3">
1074
+ <label class="form-label">Tipo de Recebimento</label>
1075
+ <select id="receiptType" class="form-select">
1076
+ <option value="partial">Parcial</option>
1077
+ <option value="total">Total</option>
1078
+ </select>
1079
+ </div>
1080
+ <div id="partialFields">
1081
+ <div class="mb-3">
1082
+ <label class="form-label">Quantidade Recebida</label>
1083
+ <input type="number" id="receivedQty" class="form-control">
1084
+ </div>
1085
+ <div class="mb-3">
1086
+ <label class="form-label">Nota Fiscal</label>
1087
+ <input type="text" id="invoiceNumber" class="form-control">
1088
+ </div>
1089
+ </div>
1090
+ </div>
1091
+ `,
1092
+ showCancelButton: true,
1093
+ confirmButtonText: 'Registrar',
1094
+ cancelButtonText: 'Cancelar',
1095
+ background: '#1f2937',
1096
+ color: '#f3f4f6',
1097
+ preConfirm: () => {
1098
+ const type = document.getElementById('receiptType').value;
1099
+ const qty = document.getElementById('receivedQty').value;
1100
+ const invoice = document.getElementById('invoiceNumber').value;
1101
+
1102
+ if (type === 'partial' && (!qty || qty <= 0)) {
1103
+ Swal.showValidationMessage('Informe a quantidade recebida');
1104
+ }
1105
+
1106
+ return { type, qty, invoice };
1107
+ }
1108
+ }).then((result) => {
1109
+ if (result.isConfirmed) {
1110
+ Swal.fire({
1111
+ title: 'Sucesso!',
1112
+ text: 'Recebimento registrado com sucesso.',
1113
+ icon: 'success',
1114
+ background: '#1f2937',
1115
+ color: '#f3f4f6'
1116
+ });
1117
+ }
1118
+ });
1119
+ }
1120
+
1121
+ // Edit item modal functions
1122
+ function editItem(productName, quantity, unitPrice) {
1123
+ document.getElementById('editProductName').value = productName;
1124
+ document.getElementById('editQuantity').value = quantity;
1125
+ document.getElementById('editUnitPrice').value = `R$ ${unitPrice.toFixed(2).replace('.', ',')}`;
1126
+ document.getElementById('editTotalPrice').value = `R$ ${(quantity * unitPrice).toFixed(2).replace('.', ',')}`;
1127
+
1128
+ editItemModal.show();
1129
+ }
1130
+
1131
+ function closeEditItemModal() {
1132
+ editItemModal.hide();
1133
+ }
1134
+
1135
+ function saveItemChanges() {
1136
+ const productName = document.getElementById('editProductName').value;
1137
+ const quantity = document.getElementById('editQuantity').value;
1138
+ const unitPrice = document.getElementById('editUnitPrice').value;
1139
+
1140
+ // Here you would save the changes to your data/API
1141
+ Swal.fire({
1142
+ title: 'Item Atualizado!',
1143
+ text: `O item ${productName} foi atualizado com sucesso.`,
1144
+ icon: 'success',
1145
+ background: '#1f2937',
1146
+ color: '#f3f4f6'
1147
+ });
1148
+
1149
+ closeEditItemModal();
1150
+ }
1151
+
1152
+ function deleteItem(productName) {
1153
+ Swal.fire({
1154
+ title: 'Excluir Item',
1155
+ text: `Tem certeza que deseja excluir o item ${productName}?`,
1156
+ icon: 'warning',
1157
+ showCancelButton: true,
1158
+ confirmButtonColor: '#ef4444',
1159
+ cancelButtonColor: '#6b7280',
1160
+ confirmButtonText: 'Sim, excluir!',
1161
+ cancelButtonText: 'Cancelar',
1162
+ background: '#1f2937',
1163
+ color: '#f3f4f6'
1164
+ }).then((result) => {
1165
+ if (result.isConfirmed) {
1166
+ Swal.fire({
1167
+ title: 'Excluído!',
1168
+ text: `O item ${productName} foi removido do pedido.`,
1169
+ icon: 'success',
1170
+ background: '#1f2937',
1171
+ color: '#f3f4f6'
1172
+ });
1173
+ }
1174
+ });
1175
+ }
1176
+
1177
+ // Close offcanvas when clicking on backdrop
1178
+ document.getElementById('backdrop').addEventListener('click', closeOffcanvas);
1179
+
1180
+ // Calculate total price when editing
1181
+ document.getElementById('editQuantity').addEventListener('input', calculateTotal);
1182
+ document.getElementById('editUnitPrice').addEventListener('input', calculateTotal);
1183
+
1184
+ function calculateTotal() {
1185
+ const quantity = parseFloat(document.getElementById('editQuantity').value) || 0;
1186
+ const unitPriceStr = document.getElementById('editUnitPrice').value.replace('R$ ', '').replace(',', '.');
1187
+ const unitPrice = parseFloat(unitPriceStr) || 0;
1188
+
1189
+ const total = quantity * unitPrice;
1190
+ document.getElementById('editTotalPrice').value = `R$ ${total.toFixed(2).replace('.', ',')}`;
1191
+ }
1192
+ </script>
1193
+ <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/pedido-de-compra-bootstrap532" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1194
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ - Ao invés de usar `tailwindcss`, por favor, utilize o `Bootstrap 5.3.2`.