Hugging Face's logo

Spaces:
gallabs
/
tom-system-orcamento
Running

App Files Community
gallabs commited on
Commit
efaad58
·
verified ·
1 Parent(s): a0b8ca9

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +942 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tom System Orcamento
3
- emoji: 🌖
4
- colorFrom: gray
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tom-system-orcamento
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,942 @@
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>Orçamentos</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: {
16
+ 50: '#f0f9ff',
17
+ 100: '#e0f2fe',
18
+ 200: '#bae6fd',
19
+ 300: '#7dd3fc',
20
+ 400: '#38bdf8',
21
+ 500: '#0ea5e9',
22
+ 600: '#0284c7',
23
+ 700: '#0369a1',
24
+ 800: '#075985',
25
+ 900: '#0c4a6e',
26
+ }
27
+ }
28
+ }
29
+ }
30
+ }
31
+ </script>
32
+ <style>
33
+ .modal {
34
+ transition: opacity 0.3s ease, transform 0.3s ease;
35
+ }
36
+ .modal.hidden {
37
+ opacity: 0;
38
+ transform: translateY(-20px);
39
+ pointer-events: none;
40
+ }
41
+ .modal-overlay {
42
+ transition: opacity 0.3s ease;
43
+ }
44
+ .modal-overlay.hidden {
45
+ opacity: 0;
46
+ pointer-events: none;
47
+ }
48
+ .status-badge {
49
+ @apply px-2 py-1 rounded-full text-xs font-medium;
50
+ }
51
+ .status-em-elaboracao {
52
+ @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
53
+ }
54
+ .status-aguardando {
55
+ @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
56
+ }
57
+ .status-concluida {
58
+ @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
59
+ }
60
+ .status-convertido {
61
+ @apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200;
62
+ }
63
+ .status-cancelado {
64
+ @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
65
+ }
66
+ .item-status-pendente {
67
+ @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
68
+ }
69
+ .item-status-aprovado {
70
+ @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
71
+ }
72
+ .transition-colors-slow {
73
+ transition: background-color 0.5s ease, color 0.5s ease;
74
+ }
75
+ </style>
76
+ </head>
77
+ <body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors-slow">
78
+ <div class="min-h-screen">
79
+ <!-- Header -->
80
+ <header class="bg-white dark:bg-gray-800 shadow-sm transition-colors-slow">
81
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
82
+ <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
83
+ <i class="fas fa-file-invoice-dollar mr-2"></i> Orçamentos
84
+ </h1>
85
+ <div class="flex items-center space-x-4">
86
+ <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
87
+ <i id="theme-icon" class="fas fa-moon text-gray-700 dark:text-yellow-300"></i>
88
+ </button>
89
+ <button onclick="openNewBudgetModal()" class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-md transition-colors">
90
+ <i class="fas fa-plus mr-2"></i> Novo Orçamento
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </header>
95
+
96
+ <!-- Main Content -->
97
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
98
+ <!-- Filters -->
99
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 mb-6 transition-colors-slow">
100
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
101
+ <div>
102
+ <label for="client-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cliente</label>
103
+ <input type="text" id="client-filter" placeholder="Filtrar por cliente" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
104
+ </div>
105
+ <div>
106
+ <label for="seller-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Vendedor</label>
107
+ <input type="text" id="seller-filter" placeholder="Filtrar por vendedor" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
108
+ </div>
109
+ <div>
110
+ <label for="status-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
111
+ <select id="status-filter" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
112
+ <option value="">Todos</option>
113
+ <option value="Em Elaboração">Em Elaboração</option>
114
+ <option value="Aguardando Análise">Aguardando Análise</option>
115
+ <option value="Análise Concluída">Análise Concluída</option>
116
+ <option value="Convertido em Pedido">Convertido em Pedido</option>
117
+ <option value="Cancelado">Cancelado</option>
118
+ </select>
119
+ </div>
120
+ <div>
121
+ <label for="date-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Data</label>
122
+ <input type="date" id="date-filter" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
123
+ </div>
124
+ </div>
125
+ <div class="mt-4 flex justify-end">
126
+ <button onclick="filterBudgets()" class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-md transition-colors">
127
+ <i class="fas fa-filter mr-2"></i> Filtrar
128
+ </button>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Budgets Table -->
133
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-colors-slow">
134
+ <div class="overflow-x-auto">
135
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
136
+ <thead class="bg-gray-50 dark:bg-gray-700">
137
+ <tr>
138
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Número</th>
139
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cliente</th>
140
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Vendedor</th>
141
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Criação</th>
142
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Validade</th>
143
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
144
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Ações</th>
145
+ </tr>
146
+ </thead>
147
+ <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
148
+ <tr>
149
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#20230001</td>
150
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Empresa ABC Ltda</td>
151
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">João Silva</td>
152
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">15/06/2023</td>
153
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">30/06/2023</td>
154
+ <td class="px-6 py-4 whitespace-nowrap">
155
+ <span class="status-badge status-em-elaboracao">Em Elaboração</span>
156
+ </td>
157
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
158
+ <div class="flex justify-end space-x-2">
159
+ <button onclick="viewBudget('20230001')" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
160
+ <i class="fas fa-eye"></i>
161
+ </button>
162
+ <button onclick="editBudget('20230001')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
163
+ <i class="fas fa-edit"></i>
164
+ </button>
165
+ <button onclick="duplicateBudget('20230001')" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
166
+ <i class="fas fa-copy"></i>
167
+ </button>
168
+ <button onclick="confirmCancelBudget('20230001')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
169
+ <i class="fas fa-times-circle"></i>
170
+ </button>
171
+ <button onclick="confirmConvertBudget('20230001')" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">
172
+ <i class="fas fa-exchange-alt"></i>
173
+ </button>
174
+ </div>
175
+ </td>
176
+ </tr>
177
+ <tr>
178
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#20230002</td>
179
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Comércio XYZ S.A.</td>
180
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Maria Souza</td>
181
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10/06/2023</td>
182
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">25/06/2023</td>
183
+ <td class="px-6 py-4 whitespace-nowrap">
184
+ <span class="status-badge status-aguardando">Aguardando Análise</span>
185
+ </td>
186
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
187
+ <div class="flex justify-end space-x-2">
188
+ <button onclick="viewBudget('20230002')" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
189
+ <i class="fas fa-eye"></i>
190
+ </button>
191
+ <button onclick="editBudget('20230002')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
192
+ <i class="fas fa-edit"></i>
193
+ </button>
194
+ <button onclick="duplicateBudget('20230002')" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
195
+ <i class="fas fa-copy"></i>
196
+ </button>
197
+ <button onclick="confirmCancelBudget('20230002')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
198
+ <i class="fas fa-times-circle"></i>
199
+ </button>
200
+ <button onclick="confirmConvertBudget('20230002')" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">
201
+ <i class="fas fa-exchange-alt"></i>
202
+ </button>
203
+ </div>
204
+ </td>
205
+ </tr>
206
+ <tr>
207
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#20230003</td>
208
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Indústria 123 EIRELI</td>
209
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Carlos Oliveira</td>
210
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">05/06/2023</td>
211
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">20/06/2023</td>
212
+ <td class="px-6 py-4 whitespace-nowrap">
213
+ <span class="status-badge status-concluida">Análise Concluída</span>
214
+ </td>
215
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
216
+ <div class="flex justify-end space-x-2">
217
+ <button onclick="viewBudget('20230003')" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
218
+ <i class="fas fa-eye"></i>
219
+ </button>
220
+ <button onclick="editBudget('20230003')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
221
+ <i class="fas fa-edit"></i>
222
+ </button>
223
+ <button onclick="duplicateBudget('20230003')" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
224
+ <i class="fas fa-copy"></i>
225
+ </button>
226
+ <button onclick="confirmCancelBudget('20230003')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
227
+ <i class="fas fa-times-circle"></i>
228
+ </button>
229
+ <button onclick="confirmConvertBudget('20230003')" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">
230
+ <i class="fas fa-exchange-alt"></i>
231
+ </button>
232
+ </div>
233
+ </td>
234
+ </tr>
235
+ <tr>
236
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#20230004</td>
237
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Serviços QWE ME</td>
238
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Ana Santos</td>
239
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">01/06/2023</td>
240
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">16/06/2023</td>
241
+ <td class="px-6 py-4 whitespace-nowrap">
242
+ <span class="status-badge status-convertido">Convertido em Pedido</span>
243
+ </td>
244
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
245
+ <div class="flex justify-end space-x-2">
246
+ <button onclick="viewBudget('20230004')" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
247
+ <i class="fas fa-eye"></i>
248
+ </button>
249
+ <button onclick="editBudget('20230004')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
250
+ <i class="fas fa-edit"></i>
251
+ </button>
252
+ <button onclick="duplicateBudget('20230004')" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
253
+ <i class="fas fa-copy"></i>
254
+ </button>
255
+ <button onclick="confirmCancelBudget('20230004')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
256
+ <i class="fas fa-times-circle"></i>
257
+ </button>
258
+ <button onclick="confirmConvertBudget('20230004')" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">
259
+ <i class="fas fa-exchange-alt"></i>
260
+ </button>
261
+ </div>
262
+ </td>
263
+ </tr>
264
+ <tr>
265
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#20230005</td>
266
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Comércio RTY Ltda</td>
267
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Pedro Costa</td>
268
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">25/05/2023</td>
269
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">09/06/2023</td>
270
+ <td class="px-6 py-4 whitespace-nowrap">
271
+ <span class="status-badge status-cancelado">Cancelado</span>
272
+ </td>
273
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
274
+ <div class="flex justify-end space-x-2">
275
+ <button onclick="viewBudget('20230005')" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
276
+ <i class="fas fa-eye"></i>
277
+ </button>
278
+ <button onclick="editBudget('20230005')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
279
+ <i class="fas fa-edit"></i>
280
+ </button>
281
+ <button onclick="duplicateBudget('20230005')" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
282
+ <i class="fas fa-copy"></i>
283
+ </button>
284
+ <button onclick="confirmCancelBudget('20230005')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
285
+ <i class="fas fa-times-circle"></i>
286
+ </button>
287
+ <button onclick="confirmConvertBudget('20230005')" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">
288
+ <i class="fas fa-exchange-alt"></i>
289
+ </button>
290
+ </div>
291
+ </td>
292
+ </tr>
293
+ </tbody>
294
+ </table>
295
+ </div>
296
+ <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-600 sm:px-6">
297
+ <div class="flex-1 flex justify-between sm:hidden">
298
+ <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
299
+ Anterior
300
+ </button>
301
+ <button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
302
+ Próxima
303
+ </button>
304
+ </div>
305
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
306
+ <div>
307
+ <p class="text-sm text-gray-700 dark:text-gray-300">
308
+ Mostrando <span class="font-medium">1</span> a <span class="font-medium">5</span> de <span class="font-medium">12</span> resultados
309
+ </p>
310
+ </div>
311
+ <div>
312
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
313
+ <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
314
+ <span class="sr-only">Anterior</span>
315
+ <i class="fas fa-chevron-left"></i>
316
+ </button>
317
+ <button aria-current="page" class="z-10 bg-primary-50 dark:bg-primary-900 border-primary-500 dark:border-primary-700 text-primary-600 dark:text-primary-200 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
318
+ 1
319
+ </button>
320
+ <button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
321
+ 2
322
+ </button>
323
+ <button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
324
+ 3
325
+ </button>
326
+ <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300">
327
+ ...
328
+ </span>
329
+ <button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
330
+ 8
331
+ </button>
332
+ <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
333
+ <span class="sr-only">Próxima</span>
334
+ <i class="fas fa-chevron-right"></i>
335
+ </button>
336
+ </nav>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </main>
342
+ </div>
343
+
344
+ <!-- New Budget Modal -->
345
+ <div id="new-budget-modal" class="modal hidden fixed inset-0 overflow-y-auto z-50">
346
+ <div class="modal-overlay absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
347
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
348
+ <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
349
+ <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
350
+ <div class="sm:flex sm:items-start">
351
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
352
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
353
+ <i class="fas fa-file-invoice-dollar mr-2"></i> Novo Orçamento
354
+ </h3>
355
+ <div class="mt-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
356
+ <div class="sm:col-span-3">
357
+ <label for="client-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Cliente</label>
358
+ <input type="text" name="client-name" id="client-name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
359
+ </div>
360
+
361
+ <div class="sm:col-span-3">
362
+ <label for="seller" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Vendedor</label>
363
+ <select id="seller" name="seller" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
364
+ <option>Selecione um vendedor</option>
365
+ <option>João Silva</option>
366
+ <option>Maria Souza</option>
367
+ <option>Carlos Oliveira</option>
368
+ <option>Ana Santos</option>
369
+ <option>Pedro Costa</option>
370
+ </select>
371
+ </div>
372
+
373
+ <div class="sm:col-span-3">
374
+ <label for="validity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Validade (dias)</label>
375
+ <select id="validity" name="validity" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
376
+ <option value="7">7 dias</option>
377
+ <option value="15" selected>15 dias</option>
378
+ <option value="30">30 dias</option>
379
+ <option value="45">45 dias</option>
380
+ <option value="60">60 dias</option>
381
+ </select>
382
+ </div>
383
+
384
+ <div class="sm:col-span-3">
385
+ <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
386
+ <select id="status" name="status" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
387
+ <option value="Em Elaboração" selected>Em Elaboração</option>
388
+ <option value="Aguardando Análise">Aguardando Análise</option>
389
+ </select>
390
+ </div>
391
+
392
+ <div class="sm:col-span-6">
393
+ <label for="observations" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Observações</label>
394
+ <textarea id="observations" name="observations" rows="3" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white"></textarea>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
401
+ <button type="button" onclick="saveNewBudget()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm">
402
+ <i class="fas fa-save mr-2"></i> Salvar
403
+ </button>
404
+ <button type="button" onclick="closeNewBudgetModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-600 text-base font-medium text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
405
+ <i class="fas fa-times mr-2"></i> Cancelar
406
+ </button>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <!-- View/Edit Budget Modal -->
413
+ <div id="budget-modal" class="modal hidden fixed inset-0 overflow-y-auto z-50">
414
+ <div class="modal-overlay absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
415
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
416
+ <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-5xl sm:w-full">
417
+ <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
418
+ <div class="sm:flex sm:items-start">
419
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
420
+ <div class="flex justify-between items-center">
421
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
422
+ <i class="fas fa-file-invoice-dollar mr-2"></i> Orçamento #<span id="budget-number">20230001</span>
423
+ </h3>
424
+ <span id="budget-status" class="status-badge status-em-elaboracao">Em Elaboração</span>
425
+ </div>
426
+
427
+ <div class="mt-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
428
+ <div class="sm:col-span-3">
429
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Cliente</label>
430
+ <p id="budget-client" class="mt-1 text-sm text-gray-900 dark:text-white">Empresa ABC Ltda</p>
431
+ </div>
432
+
433
+ <div class="sm:col-span-3">
434
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Vendedor</label>
435
+ <p id="budget-seller" class="mt-1 text-sm text-gray-900 dark:text-white">João Silva</p>
436
+ </div>
437
+
438
+ <div class="sm:col-span-2">
439
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Data de Criação</label>
440
+ <p id="budget-creation-date" class="mt-1 text-sm text-gray-900 dark:text-white">15/06/2023</p>
441
+ </div>
442
+
443
+ <div class="sm:col-span-2">
444
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Data de Validade</label>
445
+ <p id="budget-validity" class="mt-1 text-sm text-gray-900 dark:text-white">30/06/2023</p>
446
+ </div>
447
+
448
+ <div class="sm:col-span-2">
449
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Total</label>
450
+ <p id="budget-total" class="mt-1 text-sm font-bold text-gray-900 dark:text-white">R$ 12.450,00</p>
451
+ </div>
452
+
453
+ <div class="sm:col-span-6">
454
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Observações</label>
455
+ <p id="budget-observations" class="mt-1 text-sm text-gray-900 dark:text-white">Orçamento para equipamentos de escritório conforme lista abaixo.</p>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="mt-6">
460
+ <div class="flex justify-between items-center">
461
+ <h4 class="text-md font-medium text-gray-900 dark:text-white">
462
+ <i class="fas fa-list-ul mr-2"></i> Itens do Orçamento
463
+ </h4>
464
+ <button onclick="openAddItemModal()" class="flex items-center px-3 py-1 bg-primary-600 hover:bg-primary-700 text-white rounded-md text-sm transition-colors">
465
+ <i class="fas fa-plus mr-1"></i> Adicionar Item
466
+ </button>
467
+ </div>
468
+
469
+ <div class="mt-2 overflow-x-auto">
470
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
471
+ <thead class="bg-gray-50 dark:bg-gray-700">
472
+ <tr>
473
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Produto</th>
474
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Categoria</th>
475
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Fornecedor</th>
476
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Qtd</th>
477
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Valor Unit.</th>
478
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Total</th>
479
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
480
+ <th scope="col" class="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Ações</th>
481
+ </tr>
482
+ </thead>
483
+ <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" id="budget-items">
484
+ <tr>
485
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900 dark:text-white">Notebook Dell Inspiron 15</td>
486
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Informática</td>
487
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Dell Brasil</td>
488
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">3</td>
489
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 3.499,00</td>
490
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 10.497,00</td>
491
+ <td class="px-3 py-2 whitespace-nowrap">
492
+ <span class="item-status-pendente px-2 py-1 rounded-full text-xs">Pendente</span>
493
+ </td>
494
+ <td class="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
495
+ <div class="flex justify-end space-x-1">
496
+ <button onclick="editItem('1')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
497
+ <i class="fas fa-edit"></i>
498
+ </button>
499
+ <button onclick="confirmRemoveItem('1')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
500
+ <i class="fas fa-trash"></i>
501
+ </button>
502
+ </div>
503
+ </td>
504
+ </tr>
505
+ <tr>
506
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900 dark:text-white">Monitor LG 24"</td>
507
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Informática</td>
508
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">LG Eletronics</td>
509
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">3</td>
510
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 899,00</td>
511
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 2.697,00</td>
512
+ <td class="px-3 py-2 whitespace-nowrap">
513
+ <span class="item-status-aprovado px-2 py-1 rounded-full text-xs">Aprovado</span>
514
+ </td>
515
+ <td class="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
516
+ <div class="flex justify-end space-x-1">
517
+ <button onclick="editItem('2')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
518
+ <i class="fas fa-edit"></i>
519
+ </button>
520
+ <button onclick="confirmRemoveItem('2')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
521
+ <i class="fas fa-trash"></i>
522
+ </button>
523
+ </div>
524
+ </td>
525
+ </tr>
526
+ <tr>
527
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900 dark:text-white">Teclado e Mouse Sem Fio</td>
528
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Informática</td>
529
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Logitech</td>
530
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">3</td>
531
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 249,00</td>
532
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 747,00</td>
533
+ <td class="px-3 py-2 whitespace-nowrap">
534
+ <span class="item-status-pendente px-2 py-1 rounded-full text-xs">Pendente</span>
535
+ </td>
536
+ <td class="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
537
+ <div class="flex justify-end space-x-1">
538
+ <button onclick="editItem('3')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
539
+ <i class="fas fa-edit"></i>
540
+ </button>
541
+ <button onclick="confirmRemoveItem('3')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
542
+ <i class="fas fa-trash"></i>
543
+ </button>
544
+ </div>
545
+ </td>
546
+ </tr>
547
+ </tbody>
548
+ </table>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
555
+ <button type="button" onclick="sendToAnalysis()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
556
+ <i class="fas fa-paper-plane mr-2"></i> Enviar para Análise
557
+ </button>
558
+ <button type="button" onclick="confirmCancelCurrentBudget()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
559
+ <i class="fas fa-times-circle mr-2"></i> Cancelar Orçamento
560
+ </button>
561
+ <button type="button" onclick="closeBudgetModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-600 text-base font-medium text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
562
+ <i class="fas fa-times mr-2"></i> Fechar
563
+ </button>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </div>
568
+
569
+ <!-- Add Item Modal -->
570
+ <div id="add-item-modal" class="modal hidden fixed inset-0 overflow-y-auto z-50">
571
+ <div class="modal-overlay absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
572
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
573
+ <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
574
+ <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
575
+ <div class="sm:flex sm:items-start">
576
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
577
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
578
+ <i class="fas fa-plus-circle mr-2"></i> Adicionar Item
579
+ </h3>
580
+ <div class="mt-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
581
+ <div class="sm:col-span-6">
582
+ <label for="item-product" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Produto</label>
583
+ <select id="item-product" name="item-product" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
584
+ <option>Selecione um produto</option>
585
+ <option>Notebook Dell Inspiron 15</option>
586
+ <option>Monitor LG 24"</option>
587
+ <option>Teclado e Mouse Sem Fio</option>
588
+ <option>Impressora HP LaserJet</option>
589
+ <option>Headset Gamer</option>
590
+ </select>
591
+ </div>
592
+
593
+ <div class="sm:col-span-3">
594
+ <label for="item-category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Categoria</label>
595
+ <input type="text" id="item-category" name="item-category" readonly class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 bg-gray-100 dark:bg-gray-700 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:text-white">
596
+ </div>
597
+
598
+ <div class="sm:col-span-3">
599
+ <label for="item-supplier" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Fornecedor</label>
600
+ <input type="text" id="item-supplier" name="item-supplier" readonly class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 bg-gray-100 dark:bg-gray-700 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:text-white">
601
+ </div>
602
+
603
+ <div class="sm:col-span-2">
604
+ <label for="item-quantity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Quantidade</label>
605
+ <input type="number" id="item-quantity" name="item-quantity" min="1" value="1" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
606
+ </div>
607
+
608
+ <div class="sm:col-span-2">
609
+ <label for="item-unit-value" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Valor Unitário</label>
610
+ <input type="text" id="item-unit-value" name="item-unit-value" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
611
+ </div>
612
+
613
+ <div class="sm:col-span-2">
614
+ <label for="item-total-value" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Valor Total</label>
615
+ <input type="text" id="item-total-value" name="item-total-value" readonly class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 bg-gray-100 dark:bg-gray-700 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:text-white">
616
+ </div>
617
+
618
+ <div class="sm:col-span-6">
619
+ <label for="item-notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Observações</label>
620
+ <textarea id="item-notes" name="item-notes" rows="2" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white"></textarea>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ </div>
625
+ </div>
626
+ <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
627
+ <button type="button" onclick="saveNewItem()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm">
628
+ <i class="fas fa-save mr-2"></i> Salvar Item
629
+ </button>
630
+ <button type="button" onclick="closeAddItemModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-600 text-base font-medium text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
631
+ <i class="fas fa-times mr-2"></i> Cancelar
632
+ </button>
633
+ </div>
634
+ </div>
635
+ </div>
636
+ </div>
637
+
638
+ <!-- Confirmation Modal -->
639
+ <div id="confirmation-modal" class="modal hidden fixed inset-0 overflow-y-auto z-50">
640
+ <div class="modal-overlay absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
641
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
642
+ <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
643
+ <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
644
+ <div class="sm:flex sm:items-start">
645
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 sm:mx-0 sm:h-10 sm:w-10">
646
+ <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-300"></i>
647
+ </div>
648
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
649
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="confirmation-title">
650
+ Confirmação
651
+ </h3>
652
+ <div class="mt-2">
653
+ <p class="text-sm text-gray-500 dark:text-gray-300" id="confirmation-message">
654
+ Tem certeza que deseja realizar esta ação?
655
+ </p>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
661
+ <button type="button" onclick="confirmAction()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm" id="confirm-button">
662
+ Confirmar
663
+ </button>
664
+ <button type="button" onclick="closeConfirmationModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-600 text-base font-medium text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
665
+ Cancelar
666
+ </button>
667
+ </div>
668
+ </div>
669
+ </div>
670
+ </div>
671
+
672
+ <!-- Success Notification -->
673
+ <div id="success-notification" class="fixed bottom-4 right-4 hidden">
674
+ <div class="bg-green-500 text-white px-4 py-3 rounded-md shadow-lg flex items-center">
675
+ <i class="fas fa-check-circle mr-2"></i>
676
+ <span id="success-message">Operação realizada com sucesso!</span>
677
+ <button onclick="hideSuccessNotification()" class="ml-4 text-white hover:text-gray-200">
678
+ <i class="fas fa-times"></i>
679
+ </button>
680
+ </div>
681
+ </div>
682
+
683
+ <!-- Error Notification -->
684
+ <div id="error-notification" class="fixed bottom-4 right-4 hidden">
685
+ <div class="bg-red-500 text-white px-4 py-3 rounded-md shadow-lg flex items-center">
686
+ <i class="fas fa-exclamation-circle mr-2"></i>
687
+ <span id="error-message">Ocorreu um erro ao realizar a operação.</span>
688
+ <button onclick="hideErrorNotification()" class="ml-4 text-white hover:text-gray-200">
689
+ <i class="fas fa-times"></i>
690
+ </button>
691
+ </div>
692
+ </div>
693
+
694
+ <script>
695
+ // Theme toggle
696
+ const themeToggle = document.getElementById('theme-toggle');
697
+ const themeIcon = document.getElementById('theme-icon');
698
+ const html = document.documentElement;
699
+
700
+ // Check for saved user preference or use system preference
701
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
702
+ html.classList.add('dark');
703
+ themeIcon.classList.remove('fa-moon');
704
+ themeIcon.classList.add('fa-sun');
705
+ } else {
706
+ html.classList.remove('dark');
707
+ themeIcon.classList.remove('fa-sun');
708
+ themeIcon.classList.add('fa-moon');
709
+ }
710
+
711
+ themeToggle.addEventListener('click', () => {
712
+ if (html.classList.contains('dark')) {
713
+ html.classList.remove('dark');
714
+ localStorage.setItem('theme', 'light');
715
+ themeIcon.classList.remove('fa-sun');
716
+ themeIcon.classList.add('fa-moon');
717
+ } else {
718
+ html.classList.add('dark');
719
+ localStorage.setItem('theme', 'dark');
720
+ themeIcon.classList.remove('fa-moon');
721
+ themeIcon.classList.add('fa-sun');
722
+ }
723
+ });
724
+
725
+ // Modal functions
726
+ function openNewBudgetModal() {
727
+ document.getElementById('new-budget-modal').classList.remove('hidden');
728
+ document.querySelector('#new-budget-modal .modal-overlay').classList.remove('hidden');
729
+ }
730
+
731
+ function closeNewBudgetModal() {
732
+ document.getElementById('new-budget-modal').classList.add('hidden');
733
+ document.querySelector('#new-budget-modal .modal-overlay').classList.add('hidden');
734
+ }
735
+
736
+ function openBudgetModal(budgetId) {
737
+ // In a real app, you would fetch the budget data based on the ID
738
+ document.getElementById('budget-modal').classList.remove('hidden');
739
+ document.querySelector('#budget-modal .modal-overlay').classList.remove('hidden');
740
+ }
741
+
742
+ function closeBudgetModal() {
743
+ document.getElementById('budget-modal').classList.add('hidden');
744
+ document.querySelector('#budget-modal .modal-overlay').classList.add('hidden');
745
+ }
746
+
747
+ function openAddItemModal() {
748
+ document.getElementById('add-item-modal').classList.remove('hidden');
749
+ document.querySelector('#add-item-modal .modal-overlay').classList.remove('hidden');
750
+ }
751
+
752
+ function closeAddItemModal() {
753
+ document.getElementById('add-item-modal').classList.add('hidden');
754
+ document.querySelector('#add-item-modal .modal-overlay').classList.add('hidden');
755
+ }
756
+
757
+ function openConfirmationModal(title, message, action) {
758
+ document.getElementById('confirmation-title').textContent = title;
759
+ document.getElementById('confirmation-message').textContent = message;
760
+ document.getElementById('confirm-button').setAttribute('data-action', action);
761
+ document.getElementById('confirmation-modal').classList.remove('hidden');
762
+ document.querySelector('#confirmation-modal .modal-overlay').classList.remove('hidden');
763
+ }
764
+
765
+ function closeConfirmationModal() {
766
+ document.getElementById('confirmation-modal').classList.add('hidden');
767
+ document.querySelector('#confirmation-modal .modal-overlay').classList.add('hidden');
768
+ }
769
+
770
+ function showSuccessNotification(message) {
771
+ document.getElementById('success-message').textContent = message;
772
+ document.getElementById('success-notification').classList.remove('hidden');
773
+ setTimeout(hideSuccessNotification, 5000);
774
+ }
775
+
776
+ function hideSuccessNotification() {
777
+ document.getElementById('success-notification').classList.add('hidden');
778
+ }
779
+
780
+ function showErrorNotification(message) {
781
+ document.getElementById('error-message').textContent = message;
782
+ document.getElementById('error-notification').classList.remove('hidden');
783
+ setTimeout(hideErrorNotification, 5000);
784
+ }
785
+
786
+ function hideErrorNotification() {
787
+ document.getElementById('error-notification').classList.add('hidden');
788
+ }
789
+
790
+ // Budget actions
791
+ function viewBudget(budgetId) {
792
+ // In a real app, you would fetch the budget data based on the ID
793
+ openBudgetModal(budgetId);
794
+ }
795
+
796
+ function editBudget(budgetId) {
797
+ // In a real app, you would fetch the budget data based on the ID
798
+ openBudgetModal(budgetId);
799
+ // Enable edit mode
800
+ }
801
+
802
+ function duplicateBudget(budgetId) {
803
+ openConfirmationModal(
804
+ 'Duplicar Orçamento',
805
+ `Tem certeza que deseja duplicar o orçamento #${budgetId}?`,
806
+ 'duplicate'
807
+ );
808
+ }
809
+
810
+ function confirmCancelBudget(budgetId) {
811
+ openConfirmationModal(
812
+ 'Cancelar Orçamento',
813
+ `Tem certeza que deseja cancelar o orçamento #${budgetId}? Esta ação não pode ser desfeita.`,
814
+ 'cancel'
815
+ );
816
+ }
817
+
818
+ function confirmConvertBudget(budgetId) {
819
+ openConfirmationModal(
820
+ 'Converter em Pedido',
821
+ `Tem certeza que deseja converter o orçamento #${budgetId} em um pedido de venda?`,
822
+ 'convert'
823
+ );
824
+ }
825
+
826
+ function confirmCancelCurrentBudget() {
827
+ const budgetId = document.getElementById('budget-number').textContent;
828
+ confirmCancelBudget(budgetId);
829
+ }
830
+
831
+ function confirmAction() {
832
+ const action = document.getElementById('confirm-button').getAttribute('data-action');
833
+ closeConfirmationModal();
834
+
835
+ switch(action) {
836
+ case 'cancel':
837
+ showSuccessNotification('Orçamento cancelado com sucesso!');
838
+ break;
839
+ case 'convert':
840
+ showSuccessNotification('Orçamento convertido em pedido de venda!');
841
+ break;
842
+ case 'duplicate':
843
+ showSuccessNotification('Orçamento duplicado com sucesso!');
844
+ break;
845
+ case 'remove-item':
846
+ showSuccessNotification('Item removido do orçamento!');
847
+ break;
848
+ case 'send-analysis':
849
+ showSuccessNotification('Orçamento enviado para análise!');
850
+ break;
851
+ }
852
+ }
853
+
854
+ function saveNewBudget() {
855
+ closeNewBudgetModal();
856
+ showSuccessNotification('Novo orçamento criado com sucesso!');
857
+ }
858
+
859
+ function saveNewItem() {
860
+ closeAddItemModal();
861
+ showSuccessNotification('Item adicionado ao orçamento!');
862
+ }
863
+
864
+ function sendToAnalysis() {
865
+ const budgetId = document.getElementById('budget-number').textContent;
866
+ openConfirmationModal(
867
+ 'Enviar para Análise',
868
+ `Tem certeza que deseja enviar o orçamento #${budgetId} para análise?`,
869
+ 'send-analysis'
870
+ );
871
+ }
872
+
873
+ function confirmRemoveItem(itemId) {
874
+ openConfirmationModal(
875
+ 'Remover Item',
876
+ 'Tem certeza que deseja remover este item do orçamento?',
877
+ 'remove-item'
878
+ );
879
+ }
880
+
881
+ function editItem(itemId) {
882
+ // In a real app, you would fetch the item data based on the ID
883
+ openAddItemModal();
884
+ // Pre-fill the form with item data
885
+ }
886
+
887
+ function filterBudgets() {
888
+ // In a real app, you would filter the budgets based on the filter values
889
+ showSuccessNotification('Filtro aplicado com sucesso!');
890
+ }
891
+
892
+ // Auto-fill category and supplier when product is selected
893
+ document.getElementById('item-product').addEventListener('change', function() {
894
+ const product = this.value;
895
+ const categoryField = document.getElementById('item-category');
896
+ const supplierField = document.getElementById('item-supplier');
897
+
898
+ // In a real app, you would fetch this data from a database
899
+ const productData = {
900
+ 'Notebook Dell Inspiron 15': { category: 'Informática', supplier: 'Dell Brasil' },
901
+ 'Monitor LG 24"': { category: 'Informática', supplier: 'LG Eletronics' },
902
+ 'Teclado e Mouse Sem Fio': { category: 'Informática', supplier: 'Logitech' },
903
+ 'Impressora HP LaserJet': { category: 'Informática', supplier: 'HP Brasil' },
904
+ 'Headset Gamer': { category: 'Acessórios', supplier: 'HyperX' }
905
+ };
906
+
907
+ if (product in productData) {
908
+ categoryField.value = productData[product].category;
909
+ supplierField.value = productData[product].supplier;
910
+ } else {
911
+ categoryField.value = '';
912
+ supplierField.value = '';
913
+ }
914
+ });
915
+
916
+ // Calculate total value when quantity or unit value changes
917
+ document.getElementById('item-quantity').addEventListener('input', calculateTotal);
918
+ document.getElementById('item-unit-value').addEventListener('input', calculateTotal);
919
+
920
+ function calculateTotal() {
921
+ const quantity = parseFloat(document.getElementById('item-quantity').value) || 0;
922
+ const unitValue = parseFloat(document.getElementById('item-unit-value').value.replace(/[^\d,]/g, '').replace(',', '.')) || 0;
923
+ const total = quantity * unitValue;
924
+
925
+ document.getElementById('item-total-value').value = total.toLocaleString('pt-BR', {
926
+ style: 'currency',
927
+ currency: 'BRL'
928
+ });
929
+ }
930
+
931
+ // Format currency input
932
+ document.getElementById('item-unit-value').addEventListener('blur', function() {
933
+ const value = parseFloat(this.value.replace(/[^\d,]/g, '').replace(',', '.')) || 0;
934
+ this.value = value.toLocaleString('pt-BR', {
935
+ style: 'currency',
936
+ currency: 'BRL',
937
+ minimumFractionDigits: 2
938
+ });
939
+ });
940
+ </script>
941
+ <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/tom-system-orcamento" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
942
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Crie uma interface web responsiva para o cadastro e gerenciamento de "Orçamentos" utilizando HTML, CSS e JavaScript puro (pode usar Bootstrap 5 se desejar). A tela deve conter: - Título: "Orçamentos" - Um botão para "Novo Orçamento" - Uma tabela para listar orçamentos existentes com as colunas: - Número do Orçamento - Nome do Cliente Potencial - Vendedor Responsável - Data de Criação - Data de Validade - Status do Orçamento (ex: Em Elaboração, Aguardando Análise, Análise Concluída, Convertido em Pedido de Venda, Cancelado) - Ações (Visualizar, Editar, Duplicar, Cancelar, Converter em Pedido de Venda) - Um campo de busca/filtro por cliente, vendedor, status e data. - Ao clicar em "Visualizar" ou "Editar", abrir um modal ou ir para uma nova tela com os detalhes completos do Orçamento, incluindo: - Dados do Cliente Potencial - Vendedor Responsável - Status, Observações - Lista de itens do orçamento, com as colunas: - Produto (Nome) - Categoria do Produto - Fornecedor Sugerido - Quantidade - Valor Unitário Orçado - Status do Item (Pendente, Aprovado para Compra, etc.) - Ações por item (Editar, Remover) - Botão para "Adicionar Item", que abre um formulário inline ou modal para seleção de Produto, Fornecedor, Quantidade e Valor. - Botão para "Enviar para Análise de Compra" - Botão para "Cancelar Orçamento" - Todos os botões devem ter modais de confirmação (no estilo SweetAlert2 ou similar). - Interface deve ser moderna, clean, responsiva, com feedback visual nas ações (sucesso/erro). - Utilize ícones modernos (FontAwesome ou Bootstrap Icons), cores suaves e espaçamento adequado. - Por favor, gere no modo dark (tema escuro), com um botão que alterne entre uma "meia lua, para dark" e "um sol, para modo light".