Hugging Face's logo

Spaces:
gallabs
/
tom-system-orcamento
Running

App Files Community
tom-system-orcamento / index.html
gallabs's picture
gallabs
Add 3 files
efaad58 verified
raw
history blame contribute delete
69.3 kB
 <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Orçamentos</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
}
}
}
}
}
</script>
<style>
.modal {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.modal.hidden {
opacity: 0;
transform: translateY(-20px);
pointer-events: none;
}
.modal-overlay {
transition: opacity 0.3s ease;
}
.modal-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.status-badge {
@apply px-2 py-1 rounded-full text-xs font-medium;
}
.status-em-elaboracao {
@apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
}
.status-aguardando {
@apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
}
.status-concluida {
@apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}
.status-convertido {
@apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200;
}
.status-cancelado {
@apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
}
.item-status-pendente {
@apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
}
.item-status-aprovado {
@apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}
.transition-colors-slow {
transition: background-color 0.5s ease, color 0.5s ease;
}
</style>
</head>
<body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors-slow">
<div class="min-h-screen">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm transition-colors-slow">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
<i class="fas fa-file-invoice-dollar mr-2"></i> Orçamentos
</h1>
<div class="flex items-center space-x-4">
<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">
<i id="theme-icon" class="fas fa-moon text-gray-700 dark:text-yellow-300"></i>
</button>
<button onclick="openNewBudgetModal()" class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-md transition-colors">
<i class="fas fa-plus mr-2"></i> Novo Orçamento
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<!-- Filters -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 mb-6 transition-colors-slow">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div>
<label for="client-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cliente</label>
<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">
</div>
<div>
<label for="seller-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Vendedor</label>
<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">
</div>
<div>
<label for="status-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
<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">
<option value="">Todos</option>
<option value="Em Elaboração">Em Elaboração</option>
<option value="Aguardando Análise">Aguardando Análise</option>
<option value="Análise Concluída">Análise Concluída</option>
<option value="Convertido em Pedido">Convertido em Pedido</option>
<option value="Cancelado">Cancelado</option>
</select>
</div>
<div>
<label for="date-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Data</label>
<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">
</div>
</div>
<div class="mt-4 flex justify-end">
<button onclick="filterBudgets()" class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-md transition-colors">
<i class="fas fa-filter mr-2"></i> Filtrar
</button>
</div>
</div>
<!-- Budgets Table -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-colors-slow">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#20230001</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Empresa ABC Ltda</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">João Silva</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">15/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">30/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge status-em-elaboracao">Em Elaboração</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-2">
<button onclick="viewBudget('20230001')" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
<i class="fas fa-eye"></i>
</button>
<button onclick="editBudget('20230001')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
<i class="fas fa-edit"></i>
</button>
<button onclick="duplicateBudget('20230001')" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
<i class="fas fa-copy"></i>
</button>
<button onclick="confirmCancelBudget('20230001')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<i class="fas fa-times-circle"></i>
</button>
<button onclick="confirmConvertBudget('20230001')" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">
<i class="fas fa-exchange-alt"></i>
</button>
</div>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#20230002</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Comércio XYZ S.A.</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Maria Souza</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">25/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge status-aguardando">Aguardando Análise</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-2">
<button onclick="viewBudget('20230002')" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
<i class="fas fa-eye"></i>
</button>
<button onclick="editBudget('20230002')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
<i class="fas fa-edit"></i>
</button>
<button onclick="duplicateBudget('20230002')" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
<i class="fas fa-copy"></i>
</button>
<button onclick="confirmCancelBudget('20230002')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<i class="fas fa-times-circle"></i>
</button>
<button onclick="confirmConvertBudget('20230002')" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">
<i class="fas fa-exchange-alt"></i>
</button>
</div>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#20230003</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Indústria 123 EIRELI</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Carlos Oliveira</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">05/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">20/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge status-concluida">Análise Concluída</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-2">
<button onclick="viewBudget('20230003')" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
<i class="fas fa-eye"></i>
</button>
<button onclick="editBudget('20230003')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
<i class="fas fa-edit"></i>
</button>
<button onclick="duplicateBudget('20230003')" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
<i class="fas fa-copy"></i>
</button>
<button onclick="confirmCancelBudget('20230003')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<i class="fas fa-times-circle"></i>
</button>
<button onclick="confirmConvertBudget('20230003')" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">
<i class="fas fa-exchange-alt"></i>
</button>
</div>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#20230004</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Serviços QWE ME</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Ana Santos</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">01/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">16/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge status-convertido">Convertido em Pedido</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-2">
<button onclick="viewBudget('20230004')" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
<i class="fas fa-eye"></i>
</button>
<button onclick="editBudget('20230004')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
<i class="fas fa-edit"></i>
</button>
<button onclick="duplicateBudget('20230004')" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
<i class="fas fa-copy"></i>
</button>
<button onclick="confirmCancelBudget('20230004')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<i class="fas fa-times-circle"></i>
</button>
<button onclick="confirmConvertBudget('20230004')" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">
<i class="fas fa-exchange-alt"></i>
</button>
</div>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#20230005</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Comércio RTY Ltda</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Pedro Costa</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">25/05/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">09/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge status-cancelado">Cancelado</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-2">
<button onclick="viewBudget('20230005')" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
<i class="fas fa-eye"></i>
</button>
<button onclick="editBudget('20230005')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
<i class="fas fa-edit"></i>
</button>
<button onclick="duplicateBudget('20230005')" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
<i class="fas fa-copy"></i>
</button>
<button onclick="confirmCancelBudget('20230005')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<i class="fas fa-times-circle"></i>
</button>
<button onclick="confirmConvertBudget('20230005')" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">
<i class="fas fa-exchange-alt"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<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">
<div class="flex-1 flex justify-between sm:hidden">
<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">
Anterior
</button>
<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">
Próxima
</button>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700 dark:text-gray-300">
Mostrando <span class="font-medium">1</span> a <span class="font-medium">5</span> de <span class="font-medium">12</span> resultados
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<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">
<span class="sr-only">Anterior</span>
<i class="fas fa-chevron-left"></i>
</button>
<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">
1
</button>
<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">
2
</button>
<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">
3
</button>
<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">
...
</span>
<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">
8
</button>
<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">
<span class="sr-only">Próxima</span>
<i class="fas fa-chevron-right"></i>
</button>
</nav>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- New Budget Modal -->
<div id="new-budget-modal" class="modal hidden fixed inset-0 overflow-y-auto z-50">
<div class="modal-overlay absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<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">
<div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
<i class="fas fa-file-invoice-dollar mr-2"></i> Novo Orçamento
</h3>
<div class="mt-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div class="sm:col-span-3">
<label for="client-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Cliente</label>
<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">
</div>
<div class="sm:col-span-3">
<label for="seller" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Vendedor</label>
<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">
<option>Selecione um vendedor</option>
<option>João Silva</option>
<option>Maria Souza</option>
<option>Carlos Oliveira</option>
<option>Ana Santos</option>
<option>Pedro Costa</option>
</select>
</div>
<div class="sm:col-span-3">
<label for="validity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Validade (dias)</label>
<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">
<option value="7">7 dias</option>
<option value="15" selected>15 dias</option>
<option value="30">30 dias</option>
<option value="45">45 dias</option>
<option value="60">60 dias</option>
</select>
</div>
<div class="sm:col-span-3">
<label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
<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">
<option value="Em Elaboração" selected>Em Elaboração</option>
<option value="Aguardando Análise">Aguardando Análise</option>
</select>
</div>
<div class="sm:col-span-6">
<label for="observations" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Observações</label>
<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>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<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">
<i class="fas fa-save mr-2"></i> Salvar
</button>
<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">
<i class="fas fa-times mr-2"></i> Cancelar
</button>
</div>
</div>
</div>
</div>
<!-- View/Edit Budget Modal -->
<div id="budget-modal" class="modal hidden fixed inset-0 overflow-y-auto z-50">
<div class="modal-overlay absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<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">
<div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<div class="flex justify-between items-center">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
<i class="fas fa-file-invoice-dollar mr-2"></i> Orçamento #<span id="budget-number">20230001</span>
</h3>
<span id="budget-status" class="status-badge status-em-elaboracao">Em Elaboração</span>
</div>
<div class="mt-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div class="sm:col-span-3">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Cliente</label>
<p id="budget-client" class="mt-1 text-sm text-gray-900 dark:text-white">Empresa ABC Ltda</p>
</div>
<div class="sm:col-span-3">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Vendedor</label>
<p id="budget-seller" class="mt-1 text-sm text-gray-900 dark:text-white">João Silva</p>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Data de Criação</label>
<p id="budget-creation-date" class="mt-1 text-sm text-gray-900 dark:text-white">15/06/2023</p>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Data de Validade</label>
<p id="budget-validity" class="mt-1 text-sm text-gray-900 dark:text-white">30/06/2023</p>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Total</label>
<p id="budget-total" class="mt-1 text-sm font-bold text-gray-900 dark:text-white">R$ 12.450,00</p>
</div>
<div class="sm:col-span-6">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Observações</label>
<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>
</div>
</div>
<div class="mt-6">
<div class="flex justify-between items-center">
<h4 class="text-md font-medium text-gray-900 dark:text-white">
<i class="fas fa-list-ul mr-2"></i> Itens do Orçamento
</h4>
<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">
<i class="fas fa-plus mr-1"></i> Adicionar Item
</button>
</div>
<div class="mt-2 overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" id="budget-items">
<tr>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900 dark:text-white">Notebook Dell Inspiron 15</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Informática</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Dell Brasil</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">3</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 3.499,00</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 10.497,00</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="item-status-pendente px-2 py-1 rounded-full text-xs">Pendente</span>
</td>
<td class="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-1">
<button onclick="editItem('1')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
<i class="fas fa-edit"></i>
</button>
<button onclick="confirmRemoveItem('1')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900 dark:text-white">Monitor LG 24"</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Informática</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">LG Eletronics</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">3</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 899,00</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 2.697,00</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="item-status-aprovado px-2 py-1 rounded-full text-xs">Aprovado</span>
</td>
<td class="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-1">
<button onclick="editItem('2')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
<i class="fas fa-edit"></i>
</button>
<button onclick="confirmRemoveItem('2')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900 dark:text-white">Teclado e Mouse Sem Fio</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Informática</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Logitech</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">3</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 249,00</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">R$ 747,00</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="item-status-pendente px-2 py-1 rounded-full text-xs">Pendente</span>
</td>
<td class="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-1">
<button onclick="editItem('3')" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
<i class="fas fa-edit"></i>
</button>
<button onclick="confirmRemoveItem('3')" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<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">
<i class="fas fa-paper-plane mr-2"></i> Enviar para Análise
</button>
<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">
<i class="fas fa-times-circle mr-2"></i> Cancelar Orçamento
</button>
<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">
<i class="fas fa-times mr-2"></i> Fechar
</button>
</div>
</div>
</div>
</div>
<!-- Add Item Modal -->
<div id="add-item-modal" class="modal hidden fixed inset-0 overflow-y-auto z-50">
<div class="modal-overlay absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<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">
<div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
<i class="fas fa-plus-circle mr-2"></i> Adicionar Item
</h3>
<div class="mt-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div class="sm:col-span-6">
<label for="item-product" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Produto</label>
<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">
<option>Selecione um produto</option>
<option>Notebook Dell Inspiron 15</option>
<option>Monitor LG 24"</option>
<option>Teclado e Mouse Sem Fio</option>
<option>Impressora HP LaserJet</option>
<option>Headset Gamer</option>
</select>
</div>
<div class="sm:col-span-3">
<label for="item-category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Categoria</label>
<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">
</div>
<div class="sm:col-span-3">
<label for="item-supplier" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Fornecedor</label>
<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">
</div>
<div class="sm:col-span-2">
<label for="item-quantity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Quantidade</label>
<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">
</div>
<div class="sm:col-span-2">
<label for="item-unit-value" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Valor Unitário</label>
<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">
</div>
<div class="sm:col-span-2">
<label for="item-total-value" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Valor Total</label>
<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">
</div>
<div class="sm:col-span-6">
<label for="item-notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Observações</label>
<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>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<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">
<i class="fas fa-save mr-2"></i> Salvar Item
</button>
<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">
<i class="fas fa-times mr-2"></i> Cancelar
</button>
</div>
</div>
</div>
</div>
<!-- Confirmation Modal -->
<div id="confirmation-modal" class="modal hidden fixed inset-0 overflow-y-auto z-50">
<div class="modal-overlay absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<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">
<div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<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">
<i class="fas fa-exclamation-triangle text-red-600 dark:text-red-300"></i>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="confirmation-title">
Confirmação
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500 dark:text-gray-300" id="confirmation-message">
Tem certeza que deseja realizar esta ação?
</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<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">
Confirmar
</button>
<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">
Cancelar
</button>
</div>
</div>
</div>
</div>
<!-- Success Notification -->
<div id="success-notification" class="fixed bottom-4 right-4 hidden">
<div class="bg-green-500 text-white px-4 py-3 rounded-md shadow-lg flex items-center">
<i class="fas fa-check-circle mr-2"></i>
<span id="success-message">Operação realizada com sucesso!</span>
<button onclick="hideSuccessNotification()" class="ml-4 text-white hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- Error Notification -->
<div id="error-notification" class="fixed bottom-4 right-4 hidden">
<div class="bg-red-500 text-white px-4 py-3 rounded-md shadow-lg flex items-center">
<i class="fas fa-exclamation-circle mr-2"></i>
<span id="error-message">Ocorreu um erro ao realizar a operação.</span>
<button onclick="hideErrorNotification()" class="ml-4 text-white hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<script>
// Theme toggle
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-icon');
const html = document.documentElement;
// Check for saved user preference or use system preference
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
html.classList.add('dark');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
} else {
html.classList.remove('dark');
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
}
themeToggle.addEventListener('click', () => {
if (html.classList.contains('dark')) {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
} else {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
}
});
// Modal functions
function openNewBudgetModal() {
document.getElementById('new-budget-modal').classList.remove('hidden');
document.querySelector('#new-budget-modal .modal-overlay').classList.remove('hidden');
}
function closeNewBudgetModal() {
document.getElementById('new-budget-modal').classList.add('hidden');
document.querySelector('#new-budget-modal .modal-overlay').classList.add('hidden');
}
function openBudgetModal(budgetId) {
// In a real app, you would fetch the budget data based on the ID
document.getElementById('budget-modal').classList.remove('hidden');
document.querySelector('#budget-modal .modal-overlay').classList.remove('hidden');
}
function closeBudgetModal() {
document.getElementById('budget-modal').classList.add('hidden');
document.querySelector('#budget-modal .modal-overlay').classList.add('hidden');
}
function openAddItemModal() {
document.getElementById('add-item-modal').classList.remove('hidden');
document.querySelector('#add-item-modal .modal-overlay').classList.remove('hidden');
}
function closeAddItemModal() {
document.getElementById('add-item-modal').classList.add('hidden');
document.querySelector('#add-item-modal .modal-overlay').classList.add('hidden');
}
function openConfirmationModal(title, message, action) {
document.getElementById('confirmation-title').textContent = title;
document.getElementById('confirmation-message').textContent = message;
document.getElementById('confirm-button').setAttribute('data-action', action);
document.getElementById('confirmation-modal').classList.remove('hidden');
document.querySelector('#confirmation-modal .modal-overlay').classList.remove('hidden');
}
function closeConfirmationModal() {
document.getElementById('confirmation-modal').classList.add('hidden');
document.querySelector('#confirmation-modal .modal-overlay').classList.add('hidden');
}
function showSuccessNotification(message) {
document.getElementById('success-message').textContent = message;
document.getElementById('success-notification').classList.remove('hidden');
setTimeout(hideSuccessNotification, 5000);
}
function hideSuccessNotification() {
document.getElementById('success-notification').classList.add('hidden');
}
function showErrorNotification(message) {
document.getElementById('error-message').textContent = message;
document.getElementById('error-notification').classList.remove('hidden');
setTimeout(hideErrorNotification, 5000);
}
function hideErrorNotification() {
document.getElementById('error-notification').classList.add('hidden');
}
// Budget actions
function viewBudget(budgetId) {
// In a real app, you would fetch the budget data based on the ID
openBudgetModal(budgetId);
}
function editBudget(budgetId) {
// In a real app, you would fetch the budget data based on the ID
openBudgetModal(budgetId);
// Enable edit mode
}
function duplicateBudget(budgetId) {
openConfirmationModal(
'Duplicar Orçamento',
`Tem certeza que deseja duplicar o orçamento #${budgetId}?`,
'duplicate'
);
}
function confirmCancelBudget(budgetId) {
openConfirmationModal(
'Cancelar Orçamento',
`Tem certeza que deseja cancelar o orçamento #${budgetId}? Esta ação não pode ser desfeita.`,
'cancel'
);
}
function confirmConvertBudget(budgetId) {
openConfirmationModal(
'Converter em Pedido',
`Tem certeza que deseja converter o orçamento #${budgetId} em um pedido de venda?`,
'convert'
);
}
function confirmCancelCurrentBudget() {
const budgetId = document.getElementById('budget-number').textContent;
confirmCancelBudget(budgetId);
}
function confirmAction() {
const action = document.getElementById('confirm-button').getAttribute('data-action');
closeConfirmationModal();
switch(action) {
case 'cancel':
showSuccessNotification('Orçamento cancelado com sucesso!');
break;
case 'convert':
showSuccessNotification('Orçamento convertido em pedido de venda!');
break;
case 'duplicate':
showSuccessNotification('Orçamento duplicado com sucesso!');
break;
case 'remove-item':
showSuccessNotification('Item removido do orçamento!');
break;
case 'send-analysis':
showSuccessNotification('Orçamento enviado para análise!');
break;
}
}
function saveNewBudget() {
closeNewBudgetModal();
showSuccessNotification('Novo orçamento criado com sucesso!');
}
function saveNewItem() {
closeAddItemModal();
showSuccessNotification('Item adicionado ao orçamento!');
}
function sendToAnalysis() {
const budgetId = document.getElementById('budget-number').textContent;
openConfirmationModal(
'Enviar para Análise',
`Tem certeza que deseja enviar o orçamento #${budgetId} para análise?`,
'send-analysis'
);
}
function confirmRemoveItem(itemId) {
openConfirmationModal(
'Remover Item',
'Tem certeza que deseja remover este item do orçamento?',
'remove-item'
);
}
function editItem(itemId) {
// In a real app, you would fetch the item data based on the ID
openAddItemModal();
// Pre-fill the form with item data
}
function filterBudgets() {
// In a real app, you would filter the budgets based on the filter values
showSuccessNotification('Filtro aplicado com sucesso!');
}
// Auto-fill category and supplier when product is selected
document.getElementById('item-product').addEventListener('change', function() {
const product = this.value;
const categoryField = document.getElementById('item-category');
const supplierField = document.getElementById('item-supplier');
// In a real app, you would fetch this data from a database
const productData = {
'Notebook Dell Inspiron 15': { category: 'Informática', supplier: 'Dell Brasil' },
'Monitor LG 24"': { category: 'Informática', supplier: 'LG Eletronics' },
'Teclado e Mouse Sem Fio': { category: 'Informática', supplier: 'Logitech' },
'Impressora HP LaserJet': { category: 'Informática', supplier: 'HP Brasil' },
'Headset Gamer': { category: 'Acessórios', supplier: 'HyperX' }
};
if (product in productData) {
categoryField.value = productData[product].category;
supplierField.value = productData[product].supplier;
} else {
categoryField.value = '';
supplierField.value = '';
}
});
// Calculate total value when quantity or unit value changes
document.getElementById('item-quantity').addEventListener('input', calculateTotal);
document.getElementById('item-unit-value').addEventListener('input', calculateTotal);
function calculateTotal() {
const quantity = parseFloat(document.getElementById('item-quantity').value) || 0;
const unitValue = parseFloat(document.getElementById('item-unit-value').value.replace(/[^\d,]/g, '').replace(',', '.')) || 0;
const total = quantity * unitValue;
document.getElementById('item-total-value').value = total.toLocaleString('pt-BR', {
style: 'currency',
currency: 'BRL'
});
}
// Format currency input
document.getElementById('item-unit-value').addEventListener('blur', function() {
const value = parseFloat(this.value.replace(/[^\d,]/g, '').replace(',', '.')) || 0;
this.value = value.toLocaleString('pt-BR', {
style: 'currency',
currency: 'BRL',
minimumFractionDigits: 2
});
});
</script>
<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>
</html>