Hugging Face's logo

Spaces:
gallabs
/
pedido-de-compra-datatables-boootstrap532
Running

App Files Community
gallabs commited on
Commit
e4bbd95
·
verified ·
1 Parent(s): 973e6b2

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +813 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pedido De Compra Datatables Boootstrap532
3
- emoji: 📈
4
- colorFrom: green
5
- colorTo: red
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-datatables-boootstrap532
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
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,813 @@
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" data-bs-theme="dark">
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
+ <!-- Bootstrap 5.3.2 CSS -->
8
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <!-- Bootstrap Icons -->
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
11
+ <!-- DataTables CSS -->
12
+ <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
13
+ <!-- SweetAlert2 CSS -->
14
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
15
+ <style>
16
+ .offcanvas-end {
17
+ width: 33% !important;
18
+ }
19
+ @media (max-width: 992px) {
20
+ .offcanvas-end {
21
+ width: 75% !important;
22
+ }
23
+ }
24
+ @media (max-width: 576px) {
25
+ .offcanvas-end {
26
+ width: 100% !important;
27
+ }
28
+ }
29
+ .status-em-elaboracao {
30
+ color: #ffc107;
31
+ }
32
+ .status-aguardando {
33
+ color: #0dcaf0;
34
+ }
35
+ .status-aprovado {
36
+ color: #198754;
37
+ }
38
+ .status-enviado {
39
+ color: #0d6efd;
40
+ }
41
+ .status-recebido-parcial {
42
+ color: #fd7e14;
43
+ }
44
+ .status-recebido-total {
45
+ color: #20c997;
46
+ }
47
+ .status-cancelado {
48
+ color: #dc3545;
49
+ }
50
+ .item-row {
51
+ transition: all 0.3s ease;
52
+ }
53
+ .item-row:hover {
54
+ background-color: rgba(255, 255, 255, 0.05);
55
+ }
56
+ .history-item {
57
+ border-left: 3px solid #6c757d;
58
+ padding-left: 10px;
59
+ margin-bottom: 10px;
60
+ }
61
+ .history-item:last-child {
62
+ margin-bottom: 0;
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="bg-dark text-light">
67
+ <div class="container-fluid py-3">
68
+ <div class="d-flex justify-content-between align-items-center mb-4">
69
+ <h1 class="display-6"><i class="bi bi-cart-check me-2"></i>Pedidos de Compra</h1>
70
+ <button class="btn btn-primary" id="btnNovoPedido">
71
+ <i class="bi bi-plus-lg me-1"></i> Novo Pedido de Compra
72
+ </button>
73
+ </div>
74
+
75
+ <!-- Filtros -->
76
+ <div class="card bg-dark border-secondary mb-4">
77
+ <div class="card-header bg-secondary bg-opacity-25">
78
+ <h5 class="mb-0"><i class="bi bi-funnel me-2"></i>Filtros</h5>
79
+ </div>
80
+ <div class="card-body">
81
+ <div class="row g-3">
82
+ <div class="col-md-3">
83
+ <label for="filtroFornecedor" class="form-label">Fornecedor</label>
84
+ <select class="form-select" id="filtroFornecedor">
85
+ <option value="">Todos</option>
86
+ <option>Fornecedor A</option>
87
+ <option>Fornecedor B</option>
88
+ <option>Fornecedor C</option>
89
+ </select>
90
+ </div>
91
+ <div class="col-md-3">
92
+ <label for="filtroStatus" class="form-label">Status</label>
93
+ <select class="form-select" id="filtroStatus">
94
+ <option value="">Todos</option>
95
+ <option>Em Elaboração</option>
96
+ <option>Aguardando Aprovação</option>
97
+ <option>Aprovado</option>
98
+ <option>Enviado</option>
99
+ <option>Recebido Parcial</option>
100
+ <option>Recebido Total</option>
101
+ <option>Cancelado</option>
102
+ </select>
103
+ </div>
104
+ <div class="col-md-3">
105
+ <label for="filtroResponsavel" class="form-label">Responsável</label>
106
+ <select class="form-select" id="filtroResponsavel">
107
+ <option value="">Todos</option>
108
+ <option>João Silva</option>
109
+ <option>Maria Souza</option>
110
+ <option>Carlos Oliveira</option>
111
+ </select>
112
+ </div>
113
+ <div class="col-md-3">
114
+ <label for="filtroData" class="form-label">Período</label>
115
+ <input type="date" class="form-control" id="filtroData">
116
+ </div>
117
+ </div>
118
+ </div>
119
+ <div class="card-footer bg-secondary bg-opacity-10 text-end">
120
+ <button class="btn btn-outline-secondary me-2" id="btnLimparFiltros">
121
+ <i class="bi bi-eraser me-1"></i> Limpar
122
+ </button>
123
+ <button class="btn btn-primary" id="btnAplicarFiltros">
124
+ <i class="bi bi-filter me-1"></i> Aplicar
125
+ </button>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Tabela de Pedidos -->
130
+ <div class="card bg-dark border-secondary">
131
+ <div class="card-header bg-secondary bg-opacity-25">
132
+ <h5 class="mb-0"><i class="bi bi-list-ul me-2"></i>Lista de Pedidos</h5>
133
+ </div>
134
+ <div class="card-body">
135
+ <div class="table-responsive">
136
+ <table class="table table-dark table-hover table-striped" id="tabelaPedidos" style="width:100%">
137
+ <thead>
138
+ <tr>
139
+ <th>Número</th>
140
+ <th>Fornecedor</th>
141
+ <th>Responsável</th>
142
+ <th>Emissão</th>
143
+ <th>Previsão Entrega</th>
144
+ <th>Status</th>
145
+ <th>Valor Total</th>
146
+ <th>Ações</th>
147
+ </tr>
148
+ </thead>
149
+ <tbody>
150
+ <tr>
151
+ <td>PO-2023-001</td>
152
+ <td>Fornecedor A</td>
153
+ <td>João Silva</td>
154
+ <td>10/10/2023</td>
155
+ <td>25/10/2023</td>
156
+ <td><span class="status-aprovado">Aprovado</span></td>
157
+ <td>R$ 5.250,00</td>
158
+ <td>
159
+ <button class="btn btn-sm btn-outline-info btnVisualizar" title="Visualizar">
160
+ <i class="bi bi-eye"></i>
161
+ </button>
162
+ <button class="btn btn-sm btn-outline-warning btnEditar" title="Editar">
163
+ <i class="bi bi-pencil"></i>
164
+ </button>
165
+ <button class="btn btn-sm btn-outline-danger btnCancelar" title="Cancelar">
166
+ <i class="bi bi-x-circle"></i>
167
+ </button>
168
+ <button class="btn btn-sm btn-outline-secondary btnImprimir" title="Imprimir">
169
+ <i class="bi bi-printer"></i>
170
+ </button>
171
+ </td>
172
+ </tr>
173
+ <tr>
174
+ <td>PO-2023-002</td>
175
+ <td>Fornecedor B</td>
176
+ <td>Maria Souza</td>
177
+ <td>12/10/2023</td>
178
+ <td>30/10/2023</td>
179
+ <td><span class="status-enviado">Enviado</span></td>
180
+ <td>R$ 3.780,50</td>
181
+ <td>
182
+ <button class="btn btn-sm btn-outline-info btnVisualizar" title="Visualizar">
183
+ <i class="bi bi-eye"></i>
184
+ </button>
185
+ <button class="btn btn-sm btn-outline-warning btnEditar" title="Editar">
186
+ <i class="bi bi-pencil"></i>
187
+ </button>
188
+ <button class="btn btn-sm btn-outline-danger btnCancelar" title="Cancelar">
189
+ <i class="bi bi-x-circle"></i>
190
+ </button>
191
+ <button class="btn btn-sm btn-outline-secondary btnImprimir" title="Imprimir">
192
+ <i class="bi bi-printer"></i>
193
+ </button>
194
+ </td>
195
+ </tr>
196
+ <tr>
197
+ <td>PO-2023-003</td>
198
+ <td>Fornecedor C</td>
199
+ <td>Carlos Oliveira</td>
200
+ <td>15/10/2023</td>
201
+ <td>05/11/2023</td>
202
+ <td><span class="status-em-elaboracao">Em Elaboração</span></td>
203
+ <td>R$ 1.920,75</td>
204
+ <td>
205
+ <button class="btn btn-sm btn-outline-info btnVisualizar" title="Visualizar">
206
+ <i class="bi bi-eye"></i>
207
+ </button>
208
+ <button class="btn btn-sm btn-outline-warning btnEditar" title="Editar">
209
+ <i class="bi bi-pencil"></i>
210
+ </button>
211
+ <button class="btn btn-sm btn-outline-danger btnCancelar" title="Cancelar">
212
+ <i class="bi bi-x-circle"></i>
213
+ </button>
214
+ <button class="btn btn-sm btn-outline-secondary btnImprimir" title="Imprimir">
215
+ <i class="bi bi-printer"></i>
216
+ </button>
217
+ </td>
218
+ </tr>
219
+ <tr>
220
+ <td>PO-2023-004</td>
221
+ <td>Fornecedor A</td>
222
+ <td>João Silva</td>
223
+ <td>18/10/2023</td>
224
+ <td>08/11/2023</td>
225
+ <td><span class="status-aguardando">Aguardando Aprovação</span></td>
226
+ <td>R$ 7.340,20</td>
227
+ <td>
228
+ <button class="btn btn-sm btn-outline-info btnVisualizar" title="Visualizar">
229
+ <i class="bi bi-eye"></i>
230
+ </button>
231
+ <button class="btn btn-sm btn-outline-warning btnEditar" title="Editar">
232
+ <i class="bi bi-pencil"></i>
233
+ </button>
234
+ <button class="btn btn-sm btn-outline-danger btnCancelar" title="Cancelar">
235
+ <i class="bi bi-x-circle"></i>
236
+ </button>
237
+ <button class="btn btn-sm btn-outline-secondary btnImprimir" title="Imprimir">
238
+ <i class="bi bi-printer"></i>
239
+ </button>
240
+ </td>
241
+ </tr>
242
+ <tr>
243
+ <td>PO-2023-005</td>
244
+ <td>Fornecedor B</td>
245
+ <td>Maria Souza</td>
246
+ <td>20/10/2023</td>
247
+ <td>10/11/2023</td>
248
+ <td><span class="status-recebido-parcial">Recebido Parcial</span></td>
249
+ <td>R$ 4.560,00</td>
250
+ <td>
251
+ <button class="btn btn-sm btn-outline-info btnVisualizar" title="Visualizar">
252
+ <i class="bi bi-eye"></i>
253
+ </button>
254
+ <button class="btn btn-sm btn-outline-warning btnEditar" title="Editar">
255
+ <i class="bi bi-pencil"></i>
256
+ </button>
257
+ <button class="btn btn-sm btn-outline-danger btnCancelar" title="Cancelar">
258
+ <i class="bi bi-x-circle"></i>
259
+ </button>
260
+ <button class="btn btn-sm btn-outline-secondary btnImprimir" title="Imprimir">
261
+ <i class="bi bi-printer"></i>
262
+ </button>
263
+ </td>
264
+ </tr>
265
+ </tbody>
266
+ </table>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- OffCanvas Novo Pedido -->
273
+ <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNovoPedido" aria-labelledby="offcanvasNovoPedidoLabel">
274
+ <div class="offcanvas-header bg-dark">
275
+ <h5 class="offcanvas-title" id="offcanvasNovoPedidoLabel">Novo Pedido de Compra</h5>
276
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
277
+ </div>
278
+ <div class="offcanvas-body bg-dark">
279
+ <form id="formNovoPedido">
280
+ <div class="mb-3">
281
+ <label for="novoFornecedor" class="form-label">Fornecedor</label>
282
+ <select class="form-select" id="novoFornecedor" required>
283
+ <option value="" selected disabled>Selecione um fornecedor</option>
284
+ <option>Fornecedor A</option>
285
+ <option>Fornecedor B</option>
286
+ <option>Fornecedor C</option>
287
+ </select>
288
+ </div>
289
+ <div class="mb-3">
290
+ <label for="novoResponsavel" class="form-label">Responsável</label>
291
+ <select class="form-select" id="novoResponsavel" required>
292
+ <option value="" selected disabled>Selecione o responsável</option>
293
+ <option>João Silva</option>
294
+ <option>Maria Souza</option>
295
+ <option>Carlos Oliveira</option>
296
+ </select>
297
+ </div>
298
+ <div class="mb-3">
299
+ <label for="novoCondicoesPagamento" class="form-label">Condições de Pagamento</label>
300
+ <select class="form-select" id="novoCondicoesPagamento" required>
301
+ <option value="" selected disabled>Selecione as condições</option>
302
+ <option>À vista</option>
303
+ <option>30 dias</option>
304
+ <option>60 dias</option>
305
+ <option>90 dias</option>
306
+ </select>
307
+ </div>
308
+ <div class="mb-3">
309
+ <label for="novoPrevisaoEntrega" class="form-label">Previsão de Entrega</label>
310
+ <input type="date" class="form-control" id="novoPrevisaoEntrega" required>
311
+ </div>
312
+ <div class="mb-3">
313
+ <label for="novoObservacoes" class="form-label">Observações</label>
314
+ <textarea class="form-control" id="novoObservacoes" rows="3"></textarea>
315
+ </div>
316
+ <div class="d-grid gap-2">
317
+ <button type="submit" class="btn btn-primary">
318
+ <i class="bi bi-save me-1"></i> Salvar Pedido
319
+ </button>
320
+ </div>
321
+ </form>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Modal Detalhes Pedido -->
326
+ <div class="modal fade" id="modalDetalhesPedido" tabindex="-1" aria-labelledby="modalDetalhesPedidoLabel" aria-hidden="true">
327
+ <div class="modal-dialog modal-xl">
328
+ <div class="modal-content bg-dark">
329
+ <div class="modal-header bg-secondary bg-opacity-25">
330
+ <h5 class="modal-title" id="modalDetalhesPedidoLabel">Detalhes do Pedido de Compra</h5>
331
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
332
+ </div>
333
+ <div class="modal-body">
334
+ <div class="row mb-4">
335
+ <div class="col-md-6">
336
+ <div class="card bg-dark border-secondary mb-3">
337
+ <div class="card-header bg-secondary bg-opacity-10">
338
+ <h6 class="mb-0"><i class="bi bi-building me-2"></i>Dados do Fornecedor</h6>
339
+ </div>
340
+ <div class="card-body">
341
+ <p class="mb-1"><strong>Nome:</strong> <span id="detalheFornecedor">Fornecedor A</span></p>
342
+ <p class="mb-1"><strong>CNPJ:</strong> 12.345.678/0001-99</p>
343
+ <p class="mb-1"><strong>Contato:</strong> [email protected]</p>
344
+ <p class="mb-0"><strong>Telefone:</strong> (11) 9876-5432</p>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ <div class="col-md-6">
349
+ <div class="card bg-dark border-secondary mb-3">
350
+ <div class="card-header bg-secondary bg-opacity-10">
351
+ <h6 class="mb-0"><i class="bi bi-person me-2"></i>Dados do Pedido</h6>
352
+ </div>
353
+ <div class="card-body">
354
+ <p class="mb-1"><strong>Número:</strong> <span id="detalheNumero">PO-2023-001</span></p>
355
+ <p class="mb-1"><strong>Responsável:</strong> <span id="detalheResponsavel">João Silva</span></p>
356
+ <p class="mb-1"><strong>Emissão:</strong> 10/10/2023</p>
357
+ <p class="mb-1"><strong>Previsão Entrega:</strong> 25/10/2023</p>
358
+ <p class="mb-1"><strong>Status:</strong> <span class="status-aprovado" id="detalheStatus">Aprovado</span></p>
359
+ <p class="mb-0"><strong>Condições Pagamento:</strong> 30 dias</p>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <div class="card bg-dark border-secondary mb-4">
366
+ <div class="card-header bg-secondary bg-opacity-10 d-flex justify-content-between align-items-center">
367
+ <h6 class="mb-0"><i class="bi bi-list-check me-2"></i>Itens do Pedido</h6>
368
+ <button class="btn btn-sm btn-success" id="btnAdicionarItem">
369
+ <i class="bi bi-plus-lg me-1"></i> Adicionar Item
370
+ </button>
371
+ </div>
372
+ <div class="card-body">
373
+ <div class="table-responsive">
374
+ <table class="table table-dark table-hover" id="tabelaItensPedido">
375
+ <thead>
376
+ <tr>
377
+ <th>Produto</th>
378
+ <th>Categoria</th>
379
+ <th>Quantidade</th>
380
+ <th>Valor Unitário</th>
381
+ <th>Valor Total</th>
382
+ <th>Recebido</th>
383
+ <th>Status</th>
384
+ <th>Ações</th>
385
+ </tr>
386
+ </thead>
387
+ <tbody>
388
+ <tr class="item-row">
389
+ <td>Produto X</td>
390
+ <td>Eletrônicos</td>
391
+ <td>5</td>
392
+ <td>R$ 350,00</td>
393
+ <td>R$ 1.750,00</td>
394
+ <td>0</td>
395
+ <td><span class="text-warning">Pendente</span></td>
396
+ <td>
397
+ <button class="btn btn-sm btn-outline-warning btnEditarItem" title="Editar">
398
+ <i class="bi bi-pencil"></i>
399
+ </button>
400
+ <button class="btn btn-sm btn-outline-primary btnReceberItem" title="Registrar Recebimento">
401
+ <i class="bi bi-check-circle"></i>
402
+ </button>
403
+ <button class="btn btn-sm btn-outline-danger btnRemoverItem" title="Remover">
404
+ <i class="bi bi-trash"></i>
405
+ </button>
406
+ </td>
407
+ </tr>
408
+ <tr class="item-row">
409
+ <td>Produto Y</td>
410
+ <td>Informática</td>
411
+ <td>10</td>
412
+ <td>R$ 250,00</td>
413
+ <td>R$ 2.500,00</td>
414
+ <td>10</td>
415
+ <td><span class="text-success">Recebido</span></td>
416
+ <td>
417
+ <button class="btn btn-sm btn-outline-warning btnEditarItem" title="Editar">
418
+ <i class="bi bi-pencil"></i>
419
+ </button>
420
+ <button class="btn btn-sm btn-outline-primary btnReceberItem" title="Registrar Recebimento">
421
+ <i class="bi bi-check-circle"></i>
422
+ </button>
423
+ <button class="btn btn-sm btn-outline-danger btnRemoverItem" title="Remover">
424
+ <i class="bi bi-trash"></i>
425
+ </button>
426
+ </td>
427
+ </tr>
428
+ <tr class="item-row">
429
+ <td>Produto Z</td>
430
+ <td>Móveis</td>
431
+ <td>2</td>
432
+ <td>R$ 500,00</td>
433
+ <td>R$ 1.000,00</td>
434
+ <td>1</td>
435
+ <td><span class="text-info">Parcial</span></td>
436
+ <td>
437
+ <button class="btn btn-sm btn-outline-warning btnEditarItem" title="Editar">
438
+ <i class="bi bi-pencil"></i>
439
+ </button>
440
+ <button class="btn btn-sm btn-outline-primary btnReceberItem" title="Registrar Recebimento">
441
+ <i class="bi bi-check-circle"></i>
442
+ </button>
443
+ <button class="btn btn-sm btn-outline-danger btnRemoverItem" title="Remover">
444
+ <i class="bi bi-trash"></i>
445
+ </button>
446
+ </td>
447
+ </tr>
448
+ </tbody>
449
+ <tfoot>
450
+ <tr>
451
+ <td colspan="4" class="text-end"><strong>Total:</strong></td>
452
+ <td><strong>R$ 5.250,00</strong></td>
453
+ <td colspan="3"></td>
454
+ </tr>
455
+ </tfoot>
456
+ </table>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="card bg-dark border-secondary">
462
+ <div class="card-header bg-secondary bg-opacity-10">
463
+ <h6 class="mb-0"><i class="bi bi-clock-history me-2"></i>Histórico do Pedido</h6>
464
+ </div>
465
+ <div class="card-body">
466
+ <div class="history-item">
467
+ <small class="text-muted">10/10/2023 09:15</small>
468
+ <p class="mb-0">Pedido criado por João Silva</p>
469
+ </div>
470
+ <div class="history-item">
471
+ <small class="text-muted">10/10/2023 11:30</small>
472
+ <p class="mb-0">Item "Produto X" adicionado</p>
473
+ </div>
474
+ <div class="history-item">
475
+ <small class="text-muted">10/10/2023 11:35</small>
476
+ <p class="mb-0">Item "Produto Y" adicionado</p>
477
+ </div>
478
+ <div class="history-item">
479
+ <small class="text-muted">10/10/2023 11:40</small>
480
+ <p class="mb-0">Item "Produto Z" adicionado</p>
481
+ </div>
482
+ <div class="history-item">
483
+ <small class="text-muted">11/10/2023 14:20</small>
484
+ <p class="mb-0">Pedido enviado para aprovação</p>
485
+ </div>
486
+ <div class="history-item">
487
+ <small class="text-muted">12/10/2023 10:00</small>
488
+ <p class="mb-0">Pedido aprovado por Maria Souza</p>
489
+ </div>
490
+ <div class="text-center mt-3">
491
+ <a href="#" class="text-decoration-none">Ver mais...</a>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ <div class="modal-footer bg-secondary bg-opacity-10">
497
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
498
+ <i class="bi bi-x-lg me-1"></i> Fechar
499
+ </button>
500
+ <button type="button" class="btn btn-primary" id="btnEnviarAprovacao">
501
+ <i class="bi bi-send me-1"></i> Enviar para Aprovação
502
+ </button>
503
+ <button type="button" class="btn btn-success" id="btnRegistrarRecebimento">
504
+ <i class="bi bi-check-circle me-1"></i> Registrar Recebimento
505
+ </button>
506
+ <button type="button" class="btn btn-danger" id="btnCancelarPedido">
507
+ <i class="bi bi-x-circle me-1"></i> Cancelar Pedido
508
+ </button>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- Modal Editar Item -->
515
+ <div class="modal fade" id="modalEditarItem" tabindex="-1" aria-labelledby="modalEditarItemLabel" aria-hidden="true">
516
+ <div class="modal-dialog">
517
+ <div class="modal-content bg-dark">
518
+ <div class="modal-header bg-secondary bg-opacity-25">
519
+ <h5 class="modal-title" id="modalEditarItemLabel">Editar Item</h5>
520
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
521
+ </div>
522
+ <div class="modal-body">
523
+ <form id="formEditarItem">
524
+ <div class="mb-3">
525
+ <label for="editarProduto" class="form-label">Produto</label>
526
+ <select class="form-select" id="editarProduto" required>
527
+ <option value="" selected disabled>Selecione um produto</option>
528
+ <option>Produto X</option>
529
+ <option>Produto Y</option>
530
+ <option>Produto Z</option>
531
+ <option>Produto W</option>
532
+ </select>
533
+ </div>
534
+ <div class="mb-3">
535
+ <label for="editarQuantidade" class="form-label">Quantidade</label>
536
+ <input type="number" class="form-control" id="editarQuantidade" min="1" value="1" required>
537
+ </div>
538
+ <div class="mb-3">
539
+ <label for="editarValorUnitario" class="form-label">Valor Unitário</label>
540
+ <input type="number" class="form-control" id="editarValorUnitario" min="0.01" step="0.01" value="0.00" required>
541
+ </div>
542
+ <div class="mb-3">
543
+ <label for="editarQuantidadeRecebida" class="form-label">Quantidade Recebida</label>
544
+ <input type="number" class="form-control" id="editarQuantidadeRecebida" min="0" value="0">
545
+ </div>
546
+ <div class="mb-3">
547
+ <label for="editarStatusItem" class="form-label">Status</label>
548
+ <select class="form-select" id="editarStatusItem">
549
+ <option value="Pendente">Pendente</option>
550
+ <option value="Parcial">Parcial</option>
551
+ <option value="Recebido">Recebido</option>
552
+ </select>
553
+ </div>
554
+ </form>
555
+ </div>
556
+ <div class="modal-footer">
557
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
558
+ <i class="bi bi-x-lg me-1"></i> Cancelar
559
+ </button>
560
+ <button type="button" class="btn btn-primary" id="btnSalvarItem">
561
+ <i class="bi bi-save me-1"></i> Salvar
562
+ </button>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+
568
+ <!-- Modal Adicionar Item -->
569
+ <div class="modal fade" id="modalAdicionarItem" tabindex="-1" aria-labelledby="modalAdicionarItemLabel" aria-hidden="true">
570
+ <div class="modal-dialog">
571
+ <div class="modal-content bg-dark">
572
+ <div class="modal-header bg-secondary bg-opacity-25">
573
+ <h5 class="modal-title" id="modalAdicionarItemLabel">Adicionar Item</h5>
574
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
575
+ </div>
576
+ <div class="modal-body">
577
+ <form id="formAdicionarItem">
578
+ <div class="mb-3">
579
+ <label for="novoProduto" class="form-label">Produto</label>
580
+ <select class="form-select" id="novoProduto" required>
581
+ <option value="" selected disabled>Selecione um produto</option>
582
+ <option>Produto X</option>
583
+ <option>Produto Y</option>
584
+ <option>Produto Z</option>
585
+ <option>Produto W</option>
586
+ </select>
587
+ </div>
588
+ <div class="mb-3">
589
+ <label for="novoQuantidade" class="form-label">Quantidade</label>
590
+ <input type="number" class="form-control" id="novoQuantidade" min="1" value="1" required>
591
+ </div>
592
+ <div class="mb-3">
593
+ <label for="novoValorUnitario" class="form-label">Valor Unitário</label>
594
+ <input type="number" class="form-control" id="novoValorUnitario" min="0.01" step="0.01" value="0.00" required>
595
+ </div>
596
+ </form>
597
+ </div>
598
+ <div class="modal-footer">
599
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
600
+ <i class="bi bi-x-lg me-1"></i> Cancelar
601
+ </button>
602
+ <button type="button" class="btn btn-primary" id="btnConfirmarAdicionarItem">
603
+ <i class="bi bi-plus-lg me-1"></i> Adicionar
604
+ </button>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </div>
609
+
610
+ <!-- Bootstrap 5.3.2 JS Bundle with Popper -->
611
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
612
+ <!-- jQuery -->
613
+ <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
614
+ <!-- DataTables JS -->
615
+ <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
616
+ <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
617
+ <!-- SweetAlert2 JS -->
618
+ <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
619
+ <script>
620
+ $(document).ready(function() {
621
+ // Inicializar DataTable
622
+ $('#tabelaPedidos').DataTable({
623
+ language: {
624
+ url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/pt-BR.json'
625
+ },
626
+ responsive: true
627
+ });
628
+
629
+ // Abrir OffCanvas Novo Pedido
630
+ $('#btnNovoPedido').click(function() {
631
+ var offcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasNovoPedido'));
632
+ offcanvas.show();
633
+ });
634
+
635
+ // Abrir Modal Detalhes Pedido
636
+ $('.btnVisualizar').click(function() {
637
+ var modal = new bootstrap.Modal(document.getElementById('modalDetalhesPedido'));
638
+ modal.show();
639
+ });
640
+
641
+ // Abrir Modal Adicionar Item
642
+ $('#btnAdicionarItem').click(function() {
643
+ var modal = new bootstrap.Modal(document.getElementById('modalAdicionarItem'));
644
+ modal.show();
645
+ });
646
+
647
+ // Abrir Modal Editar Item
648
+ $('.btnEditarItem').click(function() {
649
+ var modal = new bootstrap.Modal(document.getElementById('modalEditarItem'));
650
+ modal.show();
651
+ });
652
+
653
+ // Confirmar Adicionar Item
654
+ $('#btnConfirmarAdicionarItem').click(function() {
655
+ Swal.fire({
656
+ title: 'Item adicionado!',
657
+ text: 'O novo item foi adicionado ao pedido.',
658
+ icon: 'success',
659
+ confirmButtonText: 'OK'
660
+ }).then(() => {
661
+ var modal = bootstrap.Modal.getInstance(document.getElementById('modalAdicionarItem'));
662
+ modal.hide();
663
+ });
664
+ });
665
+
666
+ // Salvar Edição de Item
667
+ $('#btnSalvarItem').click(function() {
668
+ Swal.fire({
669
+ title: 'Alterações salvas!',
670
+ text: 'As alterações no item foram salvas com sucesso.',
671
+ icon: 'success',
672
+ confirmButtonText: 'OK'
673
+ }).then(() => {
674
+ var modal = bootstrap.Modal.getInstance(document.getElementById('modalEditarItem'));
675
+ modal.hide();
676
+ });
677
+ });
678
+
679
+ // Remover Item
680
+ $('.btnRemoverItem').click(function() {
681
+ Swal.fire({
682
+ title: 'Remover item?',
683
+ text: 'Tem certeza que deseja remover este item do pedido?',
684
+ icon: 'warning',
685
+ showCancelButton: true,
686
+ confirmButtonColor: '#3085d6',
687
+ cancelButtonColor: '#d33',
688
+ confirmButtonText: 'Sim, remover!',
689
+ cancelButtonText: 'Cancelar'
690
+ }).then((result) => {
691
+ if (result.isConfirmed) {
692
+ Swal.fire(
693
+ 'Removido!',
694
+ 'O item foi removido do pedido.',
695
+ 'success'
696
+ );
697
+ }
698
+ });
699
+ });
700
+
701
+ // Enviar para Aprovação
702
+ $('#btnEnviarAprovacao').click(function() {
703
+ Swal.fire({
704
+ title: 'Enviar para aprovação?',
705
+ text: 'Tem certeza que deseja enviar este pedido para aprovação?',
706
+ icon: 'question',
707
+ showCancelButton: true,
708
+ confirmButtonColor: '#3085d6',
709
+ cancelButtonColor: '#d33',
710
+ confirmButtonText: 'Sim, enviar!',
711
+ cancelButtonText: 'Cancelar'
712
+ }).then((result) => {
713
+ if (result.isConfirmed) {
714
+ Swal.fire(
715
+ 'Enviado!',
716
+ 'O pedido foi enviado para aprovação.',
717
+ 'success'
718
+ );
719
+ }
720
+ });
721
+ });
722
+
723
+ // Registrar Recebimento
724
+ $('#btnRegistrarRecebimento').click(function() {
725
+ Swal.fire({
726
+ title: 'Registrar recebimento',
727
+ text: 'Selecione o tipo de recebimento:',
728
+ icon: 'info',
729
+ showDenyButton: true,
730
+ showCancelButton: true,
731
+ confirmButtonText: 'Recebimento Total',
732
+ denyButtonText: 'Recebimento Parcial',
733
+ cancelButtonText: 'Cancelar'
734
+ }).then((result) => {
735
+ if (result.isConfirmed) {
736
+ Swal.fire(
737
+ 'Recebimento total registrado!',
738
+ 'Todos os itens foram marcados como recebidos.',
739
+ 'success'
740
+ );
741
+ } else if (result.isDenied) {
742
+ Swal.fire(
743
+ 'Recebimento parcial registrado!',
744
+ 'Os itens recebidos foram atualizados.',
745
+ 'success'
746
+ );
747
+ }
748
+ });
749
+ });
750
+
751
+ // Cancelar Pedido
752
+ $('#btnCancelarPedido').click(function() {
753
+ Swal.fire({
754
+ title: 'Cancelar pedido?',
755
+ text: 'Tem certeza que deseja cancelar este pedido? Esta ação não pode ser desfeita.',
756
+ icon: 'warning',
757
+ showCancelButton: true,
758
+ confirmButtonColor: '#3085d6',
759
+ cancelButtonColor: '#d33',
760
+ confirmButtonText: 'Sim, cancelar!',
761
+ cancelButtonText: 'Manter pedido'
762
+ }).then((result) => {
763
+ if (result.isConfirmed) {
764
+ Swal.fire(
765
+ 'Cancelado!',
766
+ 'O pedido foi cancelado com sucesso.',
767
+ 'success'
768
+ ).then(() => {
769
+ var modal = bootstrap.Modal.getInstance(document.getElementById('modalDetalhesPedido'));
770
+ modal.hide();
771
+ });
772
+ }
773
+ });
774
+ });
775
+
776
+ // Formulário Novo Pedido
777
+ $('#formNovoPedido').submit(function(e) {
778
+ e.preventDefault();
779
+ Swal.fire({
780
+ title: 'Pedido criado!',
781
+ text: 'O novo pedido de compra foi criado com sucesso.',
782
+ icon: 'success',
783
+ confirmButtonText: 'OK'
784
+ }).then(() => {
785
+ var offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('offcanvasNovoPedido'));
786
+ offcanvas.hide();
787
+ });
788
+ });
789
+
790
+ // Aplicar Filtros
791
+ $('#btnAplicarFiltros').click(function() {
792
+ Swal.fire({
793
+ title: 'Filtros aplicados!',
794
+ text: 'Os filtros foram aplicados à lista de pedidos.',
795
+ icon: 'success',
796
+ confirmButtonText: 'OK'
797
+ });
798
+ });
799
+
800
+ // Limpar Filtros
801
+ $('#btnLimparFiltros').click(function() {
802
+ $('#filtroFornecedor, #filtroStatus, #filtroResponsavel, #filtroData').val('');
803
+ Swal.fire({
804
+ title: 'Filtros limpos!',
805
+ text: 'Todos os filtros foram removidos.',
806
+ icon: 'success',
807
+ confirmButtonText: 'OK'
808
+ });
809
+ });
810
+ });
811
+ </script>
812
+ <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-datatables-boootstrap532" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
813
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Crie uma interface web responsiva para o gerenciamento de "Pedidos de Compra" utilizando HTML, CSS e JavaScript com Bootstrap 5.3.2. A tela deve conter: - Título: "Pedidos de Compra" - Um botão para "Novo Pedido de Compra" - Para as tabelas, utilize o datatables. - Uma tabela para listar os pedidos com as colunas: - Número do Pedido de Compra - Fornecedor - Responsável pela Compra - Data de Emissão - Data de Previsão de Entrega - Status do Pedido (Em Elaboração, Aguardando Aprovação, Aprovado, Enviado, Recebido Parcial, Recebido Total, Cancelado) - Valor Total - Ações (Visualizar, Editar, Cancelar, Imprimir) - Filtros por fornecedor, status, responsável e data. - Ao visualizar um pedido, abrir um modal ou tela de detalhe com: - Dados do Fornecedor, Responsável, Condições de Pagamento, Observações - Lista dos Itens do Pedido de Compra, colunas: - Produto (Nome) - Categoria do Produto - Quantidade Solicitada - Valor Unitário Negociado - Valor Total do Item - Quantidade Recebida - Status do Item (Pendente, Recebido, etc.) - Ações por item (Editar, Registrar Recebimento, Remover) - Botão para "Adicionar Item" - Botão para "Enviar para Aprovação" (habilitado apenas enquanto o status for "Em Elaboração") - Botão para "Registrar Recebimento" (parcial/total, conforme status) - Botão para "Cancelar Pedido" (com modal de confirmação) - Histórico de eventos/ações do pedido no final da tela - Confirmações e alertas devem usar SweetAlert2. - Layout limpo, organizado, responsivo, com boas práticas de UX para facilitar o dia a dia de quem opera. - Utilize ícones modernos (FontAwesome ou Bootstrap Icons), cores suaves e espaçamento adequado. - Por favor, gere no modo dark (tema escuro). - No botão `+ Novo Pedido de Compra`, por favor abra um offcanvas, com 1/3 de largura em relação à tela principal. - Abra o OffCanvas da direita para a esquerda (right offcanvas) de forma suave. - Deixe os filtros visíveis. - Quando mostrar os detalhes do Pedido, ao clicar em `+ Adicionar Item`, abra uma linha para adicionarmos um item. - Na lista "Itens do Pedido". no botão editar, abra um `Modal` para editarmos os itens. - Além do total na coluna "Unitário" dos itens do pedido, ponha um valor total também na coluna total. - No Histórico, ponha no fim da lista de históricos, uma mensagem "ver mais" ou "ver todos". - Ao invés de usar `tailwindcss`, por favor, utilize o `Bootstrap 5.3.2`.