marsalva/App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar presupuestos.html

Browse Source
This commit is contained in:
marsalva
2026-03-25 08:38:42 +00:00
parent 84b2559e35
commit 5b2fa54174
1 changed files with 208 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
presupuestos.html
View File

@@ -7,92 +7,103 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script> <script src="https://unpkg.com/lucide@latest"></script>
<style> <style>
/* VARIABLES CORPORATIVAS DINÁMICAS (Igual que en el menú) */
:root { :root {
--primary: #4f46e5; /* Indigo 600 */ --primary: #2563eb;
--app-bg: #f8fafc; --secondary: #f59e0b;
--app-bg: #f4f7f9;
} }
body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; } body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; }
.fade-in { animation: fadeIn 0.3s ease-out forwards; } .fade-in { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.main-content { padding-bottom: calc(env(safe-area-inset-bottom) + 80px); } .main-content { padding-bottom: calc(env(safe-area-inset-bottom) + 80px); }
/* Clases CSS dinámicas */
.bg-primary-dynamic { background-color: var(--primary) !important; }
.text-primary-dynamic { color: var(--primary) !important; }
.border-primary-dynamic { border-color: var(--primary) !important; }
.ring-primary-dynamic:focus { outline: none; box-shadow: 0 0 0 2px var(--primary) !important; }
</style> </style>
</head> </head>
<body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden bg-slate-50"> <body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative">
<header class="bg-indigo-600 px-5 pt-safe mt-6 pb-6 text-white shrink-0 shadow-md relative z-20 rounded-b-[2rem]"> <div class="absolute top-0 left-0 w-full h-40 bg-primary-dynamic rounded-b-[2.5rem] z-0 transition-colors duration-500"></div>
<div class="flex items-center justify-between">
<header class="px-6 pt-safe mt-8 pb-6 z-10 relative text-white shrink-0">
<div class="flex items-center justify-between mb-2">
<button onclick="window.location.href='menu.html'" class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center active:scale-95 transition-transform backdrop-blur-md"> <button onclick="window.location.href='menu.html'" class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center active:scale-95 transition-transform backdrop-blur-md">
<i data-lucide="arrow-left" class="w-5 h-5"></i> <i data-lucide="arrow-left" class="w-5 h-5"></i>
</button> </button>
<h1 class="text-xl font-black tracking-tight">Presupuestos</h1> <h1 class="text-xl font-black tracking-tight leading-none text-center">Mis Presupuestos</h1>
<div class="w-10"></div> </div> <div class="w-10"></div> </div>
</header> </header>
<main id="viewList" class="flex-1 overflow-y-auto px-5 pt-6 main-content z-10 fade-in"> <main id="viewList" class="flex-1 overflow-y-auto px-5 pt-4 main-content z-10 relative fade-in">
<div class="flex justify-between items-end mb-4"> <div class="flex justify-end mb-4">
<h2 class="text-sm font-black text-slate-400 uppercase tracking-widest">Historial</h2> <button onclick="showCreateView()" class="bg-white text-slate-700 px-4 py-3 rounded-2xl shadow-sm border border-slate-100 text-xs font-black flex items-center gap-2 active:scale-95 transition-transform uppercase tracking-widest">
<button onclick="showCreateView()" class="bg-indigo-100 text-indigo-700 px-4 py-2 rounded-xl text-xs font-bold flex items-center gap-2 active:scale-95 transition-transform"> <i data-lucide="plus" class="w-4 h-4 text-primary-dynamic"></i> Nuevo Presupuesto
<i data-lucide="plus" class="w-4 h-4"></i> Nuevo
</button> </button>
</div> </div>
<div id="budgetsList" class="space-y-4 pb-10"> <div id="budgetsList" class="space-y-4 pb-10">
<div class="text-center text-slate-400 py-10 text-sm font-medium"> <div class="text-center text-slate-400 py-10 text-sm font-medium">
<i data-lucide="loader-2" class="w-8 h-8 animate-spin mx-auto mb-2 text-indigo-300"></i> Cargando... <i data-lucide="loader-2" class="w-8 h-8 animate-spin mx-auto mb-2 text-primary-dynamic"></i> Cargando...
</div> </div>
</div> </div>
</main> </main>
<main id="viewCreate" class="hidden flex-1 overflow-y-auto px-5 pt-6 main-content z-10 fade-in bg-white absolute inset-0 mt-[5.5rem] rounded-t-[2rem] shadow-[0_-10px_40px_rgba(0,0,0,0.1)]"> <main id="viewCreate" class="hidden flex-1 overflow-y-auto px-5 pt-6 main-content z-20 fade-in bg-[var(--app-bg)] absolute inset-0 mt-[6rem] rounded-t-[2.5rem] shadow-[0_-10px_40px_rgba(0,0,0,0.1)]">
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h2 class="text-lg font-black text-slate-800">Nuevo Presupuesto</h2> <h2 class="text-lg font-black text-slate-800">Generar Nuevo</h2>
<button onclick="hideCreateView()" class="text-slate-400 p-2"><i data-lucide="x" class="w-6 h-6"></i></button> <button onclick="hideCreateView()" class="w-8 h-8 bg-slate-200 text-slate-600 rounded-full flex items-center justify-center active:scale-95"><i data-lucide="x" class="w-4 h-4"></i></button>
</div> </div>
<form id="budgetForm" class="space-y-5"> <form id="budgetForm" class="space-y-5">
<div class="bg-slate-50 p-4 rounded-2xl border border-slate-100 space-y-4"> <div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm space-y-4">
<h3 class="text-[10px] font-black text-indigo-600 uppercase tracking-widest mb-2 flex items-center gap-1"><i data-lucide="user" class="w-3 h-3"></i> Datos del Cliente</h3> <h3 class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-1 flex items-center gap-1"><i data-lucide="user" class="w-3 h-3"></i> Cliente</h3>
<input type="text" id="c_name" required placeholder="Nombre del Cliente" class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold text-slate-700 outline-none focus:ring-2 focus:ring-indigo-500"> <input type="text" id="c_name" required placeholder="Nombre del Cliente" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-700 ring-primary-dynamic transition-all">
<input type="tel" id="c_phone" required placeholder="Teléfono" class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold text-slate-700 outline-none focus:ring-2 focus:ring-indigo-500"> <input type="tel" id="c_phone" required placeholder="Teléfono" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-700 ring-primary-dynamic transition-all">
<input type="text" id="c_address" placeholder="Dirección (Opcional)" class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold text-slate-700 outline-none focus:ring-2 focus:ring-indigo-500"> <input type="text" id="c_address" placeholder="Dirección (Opcional)" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-700 ring-primary-dynamic transition-all">
</div> </div>
<div class="bg-slate-50 p-4 rounded-2xl border border-slate-100 space-y-4"> <div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm space-y-4">
<h3 class="text-[10px] font-black text-indigo-600 uppercase tracking-widest mb-2 flex items-center gap-1"><i data-lucide="shopping-cart" class="w-3 h-3"></i> Conceptos</h3> <h3 class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-1 flex items-center gap-1"><i data-lucide="shopping-cart" class="w-3 h-3"></i> Conceptos</h3>
<div id="itemsContainer" class="space-y-3 empty:hidden mb-3"></div> <div id="itemsContainer" class="space-y-3 empty:hidden mb-3"></div>
<div class="grid grid-cols-12 gap-2 bg-white p-3 rounded-xl border border-slate-200 shadow-sm"> <div class="grid grid-cols-12 gap-2 bg-slate-50 p-3 rounded-xl border border-slate-100">
<div class="col-span-12"> <div class="col-span-12">
<input type="text" id="item_concept" list="articlesList" placeholder="Concepto o Artículo..." class="w-full px-3 py-2 bg-slate-50 rounded-lg text-sm font-medium outline-none border border-slate-100 focus:border-indigo-400"> <input type="text" id="item_concept" list="articlesList" placeholder="Añadir artículo o mano de obra..." class="w-full px-3 py-2 bg-white rounded-lg text-sm font-medium border border-slate-200 ring-primary-dynamic">
<datalist id="articlesList"></datalist> <datalist id="articlesList"></datalist>
</div> </div>
<div class="col-span-4"> <div class="col-span-4">
<input type="number" id="item_qty" placeholder="Cant." value="1" min="1" step="0.01" class="w-full px-3 py-2 bg-slate-50 rounded-lg text-sm font-bold text-center outline-none border border-slate-100 focus:border-indigo-400"> <input type="number" id="item_qty" placeholder="Cant." value="1" min="1" step="0.01" class="w-full px-3 py-2 bg-white rounded-lg text-sm font-bold text-center border border-slate-200 ring-primary-dynamic">
</div> </div>
<div class="col-span-5"> <div class="col-span-5">
<input type="number" id="item_price" placeholder="Precio €" min="0" step="0.01" class="w-full px-3 py-2 bg-slate-50 rounded-lg text-sm font-bold text-right outline-none border border-slate-100 focus:border-indigo-400"> <input type="number" id="item_price" placeholder="Precio €" min="0" step="0.01" class="w-full px-3 py-2 bg-white rounded-lg text-sm font-bold text-right border border-slate-200 ring-primary-dynamic">
</div> </div>
<div class="col-span-3 flex items-center justify-end"> <div class="col-span-3 flex items-center justify-end">
<button type="button" onclick="addItem()" class="w-full h-full bg-indigo-600 text-white rounded-lg flex items-center justify-center active:scale-95"><i data-lucide="plus" class="w-5 h-5"></i></button> <button type="button" onclick="addItem()" class="w-full h-full bg-primary-dynamic text-white rounded-lg flex items-center justify-center active:scale-95 shadow-md"><i data-lucide="plus" class="w-5 h-5"></i></button>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-indigo-50 p-5 rounded-2xl border border-indigo-100"> <div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm relative overflow-hidden">
<div class="flex justify-between text-sm font-medium text-slate-600 mb-1"> <div class="absolute top-0 left-0 w-1 h-full bg-primary-dynamic"></div>
<div class="flex justify-between text-sm font-medium text-slate-500 mb-1 pl-2">
<span>Subtotal:</span> <span id="lbl_subtotal">0.00 €</span> <span>Subtotal:</span> <span id="lbl_subtotal">0.00 €</span>
</div> </div>
<div class="flex justify-between text-sm font-medium text-slate-600 mb-3 pb-3 border-b border-indigo-200/50"> <div class="flex justify-between text-sm font-medium text-slate-500 mb-3 pb-3 border-b border-slate-100 pl-2">
<span>IVA (21%):</span> <span id="lbl_tax">0.00 €</span> <span>IVA (21%):</span> <span id="lbl_tax">0.00 €</span>
</div> </div>
<div class="flex justify-between text-xl font-black text-indigo-900"> <div class="flex justify-between text-xl font-black text-slate-800 pl-2">
<span>TOTAL:</span> <span id="lbl_total">0.00 €</span> <span>TOTAL:</span> <span id="lbl_total" class="text-primary-dynamic">0.00 €</span>
</div> </div>
</div> </div>
<button type="button" onclick="saveBudget()" id="btnSave" class="w-full bg-indigo-600 text-white font-black py-4 rounded-2xl shadow-[0_8px_20px_-6px_rgba(79,70,229,0.5)] hover:bg-indigo-700 active:scale-95 transition-all uppercase tracking-widest text-xs flex justify-center items-center gap-2 mt-4 mb-20"> <button type="button" onclick="saveBudget()" id="btnSave" class="w-full bg-primary-dynamic text-white font-black py-4 rounded-2xl shadow-lg hover:opacity-90 active:scale-95 transition-all uppercase tracking-widest text-xs flex justify-center items-center gap-2 mt-2 mb-10">
<i data-lucide="save" class="w-4 h-4"></i> Generar Presupuesto <i data-lucide="save" class="w-4 h-4"></i> Generar Presupuesto
</button> </button>
</form> </form>
@@ -109,22 +120,41 @@
let catalog = []; let catalog = [];
let currentItems = []; let currentItems = [];
let allBudgets = [];
// ------------------ INICIALIZACIÓN Y TEMA CORPORATIVO ------------------
async function applyTheme() {
try {
let theme = JSON.parse(localStorage.getItem('app_theme'));
const res = await fetch(`${API_URL}/config/company`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
if(data.ok && data.config && data.config.portal_settings && data.config.portal_settings.app_settings) {
theme = data.config.portal_settings.app_settings;
localStorage.setItem('app_theme', JSON.stringify(theme));
}
if(theme) {
document.documentElement.style.setProperty('--primary', theme.primary);
document.documentElement.style.setProperty('--secondary', theme.secondary);
document.documentElement.style.setProperty('--app-bg', theme.bg);
}
} catch (e) { console.warn("Usando tema por defecto"); }
}
document.addEventListener("DOMContentLoaded", async () => { document.addEventListener("DOMContentLoaded", async () => {
if (!localStorage.getItem("token")) { window.location.href = "index.html"; return; } if (!localStorage.getItem("token")) { window.location.href = "index.html"; return; }
await applyTheme();
lucide.createIcons(); lucide.createIcons();
await fetchArticles(); await fetchArticles();
await fetchBudgets(); await fetchBudgets();
// Llenar precio auto al seleccionar artículo del catálogo
document.getElementById('item_concept').addEventListener('change', (e) => { document.getElementById('item_concept').addEventListener('change', (e) => {
const art = catalog.find(a => a.name === e.target.value); const art = catalog.find(a => a.name === e.target.value);
if(art) document.getElementById('item_price').value = art.price; if(art) document.getElementById('item_price').value = art.price;
}); });
}); });
// ------------------ NAVEGACIÓN ------------------ // ------------------ NAVEGACIÓN Y TOASTS ------------------
function showCreateView() { function showCreateView() {
document.getElementById('viewList').classList.add('hidden'); document.getElementById('viewList').classList.add('hidden');
document.getElementById('viewCreate').classList.remove('hidden'); document.getElementById('viewCreate').classList.remove('hidden');
@@ -167,12 +197,125 @@
try { try {
const res = await fetch(`${API_URL}/budgets`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } }); const res = await fetch(`${API_URL}/budgets`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json(); const data = await res.json();
if(data.ok) renderBudgetsList(data.budgets); if(data.ok) {
allBudgets = data.budgets;
renderBudgetsList(allBudgets);
}
} catch(e) { } catch(e) {
document.getElementById('budgetsList').innerHTML = `<div class="text-center text-rose-500 py-6 text-sm font-bold">Error de conexión</div>`; document.getElementById('budgetsList').innerHTML = `<div class="text-center text-rose-500 py-6 text-sm font-bold">Error de conexión</div>`;
} }
} }
// ------------------ ACCIONES DE LOS PRESUPUESTOS ------------------
async function updateStatus(id, newStatus) {
try {
const res = await fetch(`${API_URL}/budgets/${id}/status`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json', "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ status: newStatus })
});
const data = await res.json();
if (data.ok) {
showToast(newStatus === 'accepted' ? "¡Presupuesto Aceptado!" : "Presupuesto Rechazado");
fetchBudgets();
} else { showToast("Error al actualizar"); }
} catch (e) { showToast("Error de conexión"); }
}
async function deleteBudget(id) {
if (!confirm("¿Seguro que quieres borrar este presupuesto?")) return;
try {
const res = await fetch(`${API_URL}/budgets/${id}`, {
method: 'DELETE',
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
});
const data = await res.json();
if (data.ok) {
showToast("Presupuesto borrado correctamente");
fetchBudgets();
} else {
showToast(data.error || "No se puede borrar este presupuesto");
}
} catch (e) { showToast("Error de conexión"); }
}
// FUNCIÓN PARA GENERAR Y DESCARGAR PDF BÁSICO
function downloadPDF(id) {
const b = allBudgets.find(x => x.id === id);
if(!b) return;
// Creamos un HTML limpio imprimible
let itemsHtml = (b.items || []).map(i => `
<tr>
<td style="padding: 8px; border-bottom: 1px solid #ddd;">${i.concept}</td>
<td style="padding: 8px; border-bottom: 1px solid #ddd; text-align: center;">${i.qty}</td>
<td style="padding: 8px; border-bottom: 1px solid #ddd; text-align: right;">${parseFloat(i.price).toFixed(2)}€</td>
<td style="padding: 8px; border-bottom: 1px solid #ddd; text-align: right;">${parseFloat(i.total).toFixed(2)}€</td>
</tr>
`).join('');
const companyName = localStorage.getItem('userName') || 'Empresa Instaladora';
const dateStr = new Date(b.created_at).toLocaleDateString('es-ES');
const printContent = `
<html>
<head>
<title>Presupuesto PRE-${b.id}</title>
<style>
body { font-family: Arial, sans-serif; padding: 40px; color: #333; }
.header { display: flex; justify-content: space-between; margin-bottom: 40px; border-bottom: 2px solid #2563eb; padding-bottom: 20px; }
h1 { color: #2563eb; margin: 0; }
table { w-full; border-collapse: collapse; margin-top: 30px; width: 100%; }
th { background-color: #f8fafc; padding: 10px; text-align: left; border-bottom: 2px solid #ddd; }
.totals { margin-top: 30px; width: 50%; float: right; border-top: 2px solid #333; padding-top: 10px; }
.totals div { display: flex; justify-content: space-between; margin-bottom: 5px; }
.totals .final { font-size: 1.2em; font-weight: bold; color: #2563eb; }
</style>
</head>
<body>
<div class="header">
<div>
<h1>PRESUPUESTO PRE-${b.id}</h1>
<p>Fecha: ${dateStr}</p>
<p>Emitido por: <strong>${companyName}</strong></p>
</div>
<div style="text-align: right;">
<h3>Datos del Cliente</h3>
<p><strong>${b.client_name}</strong></p>
<p>Tel: ${b.client_phone}</p>
<p>${b.client_address || ''}</p>
</div>
</div>
<table>
<thead>
<tr>
<th>Concepto</th>
<th style="text-align:center;">Cant.</th>
<th style="text-align:right;">Precio/U</th>
<th style="text-align:right;">Total</th>
</tr>
</thead>
<tbody>${itemsHtml}</tbody>
</table>
<div class="totals">
<div><span>Subtotal:</span> <span>${parseFloat(b.subtotal).toFixed(2)}€</span></div>
<div><span>IVA (21%):</span> <span>${parseFloat(b.tax).toFixed(2)}€</span></div>
<div class="final"><span>TOTAL:</span> <span>${parseFloat(b.total).toFixed(2)}€</span></div>
</div>
<script>
window.onload = function() { window.print(); }
<\/script>
</body>
</html>
`;
// Abre una ventana nueva oculta y lanza el diálogo de imprimir nativo del móvil (que permite guardar como PDF)
const printWindow = window.open('', '_blank');
printWindow.document.write(printContent);
printWindow.document.close();
}
// ------------------ RENDERIZAR LA LISTA EN PANTALLA ------------------
function renderBudgetsList(budgets) { function renderBudgetsList(budgets) {
const container = document.getElementById('budgetsList'); const container = document.getElementById('budgetsList');
if(budgets.length === 0) { if(budgets.length === 0) {
@@ -187,37 +330,52 @@
} }
container.innerHTML = budgets.map(b => { container.innerHTML = budgets.map(b => {
let statusColor = "bg-amber-100 text-amber-700"; let statusColor = "bg-amber-50 text-amber-600";
let statusText = "Pendiente"; let statusText = "Pendiente";
let icon = "clock"; let icon = "clock";
if(b.status === 'accepted' || b.status === 'converted') { statusColor = "bg-emerald-100 text-emerald-700"; statusText = "Aceptado"; icon = "check-circle"; } if(b.status === 'accepted' || b.status === 'converted') { statusColor = "bg-emerald-50 text-emerald-600"; statusText = "Aceptado"; icon = "check-circle"; }
else if(b.status === 'rejected') { statusColor = "bg-rose-100 text-rose-700"; statusText = "Rechazado"; icon = "x-circle"; } else if(b.status === 'rejected') { statusColor = "bg-rose-50 text-rose-600"; statusText = "Rechazado"; icon = "x-circle"; }
const d = new Date(b.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: '2-digit' }); const d = new Date(b.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: '2-digit' });
return ` return `
<div class="bg-white p-4 rounded-2xl border border-slate-100 shadow-[0_4px_15px_-5px_rgba(0,0,0,0.05)] flex flex-col gap-3 relative overflow-hidden"> <div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm flex flex-col gap-4 relative overflow-hidden">
<div class="flex justify-between items-start"> <div class="absolute top-0 left-0 w-1 h-full bg-slate-200"></div>
<div class="w-[70%]">
<div class="flex justify-between items-start pl-2">
<div class="w-[60%]">
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">PRE-${b.id} • ${d}</span> <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">PRE-${b.id} • ${d}</span>
<h3 class="text-sm font-bold text-slate-800 truncate">${b.client_name || 'Sin Nombre'}</h3> <h3 class="text-sm font-bold text-slate-800 truncate">${b.client_name || 'Sin Nombre'}</h3>
<p class="text-xs text-slate-500 font-medium truncate mt-0.5"><i data-lucide="phone" class="w-3 h-3 inline pb-0.5"></i> ${b.client_phone}</p> <p class="text-xs text-slate-500 font-medium mt-0.5"><i data-lucide="phone" class="w-3 h-3 inline pb-0.5"></i> ${b.client_phone}</p>
</div> </div>
<div class="text-right"> <div class="text-right">
<p class="text-lg font-black text-indigo-600">${parseFloat(b.total).toFixed(2)}€</p> <p class="text-xl font-black text-slate-800">${parseFloat(b.total).toFixed(2)}€</p>
<span class="${statusColor} text-[9px] font-black px-2 py-1 rounded-md uppercase tracking-wider flex items-center justify-end gap-1 mt-1 w-max ml-auto"> <span class="${statusColor} text-[9px] font-black px-2.5 py-1 rounded-md uppercase tracking-wider flex items-center justify-end gap-1 w-max ml-auto mt-1">
<i data-lucide="${icon}" class="w-3 h-3"></i> ${statusText} <i data-lucide="${icon}" class="w-3 h-3"></i> ${statusText}
</span> </span>
</div> </div>
</div> </div>
<div class="pt-3 border-t border-slate-100 flex justify-between items-center pl-2">
<div class="flex gap-2">
${ b.status === 'pending' ? `
<button onclick="updateStatus(${b.id}, 'accepted')" title="Aceptar" class="w-9 h-9 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center active:scale-95 transition-transform"><i data-lucide="check" class="w-5 h-5"></i></button>
<button onclick="updateStatus(${b.id}, 'rejected')" title="Rechazar" class="w-9 h-9 bg-rose-50 text-rose-600 rounded-full flex items-center justify-center active:scale-95 transition-transform"><i data-lucide="x" class="w-5 h-5"></i></button>
` : `<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest flex items-center">Ya gestionado</span>` }
</div>
<div class="flex gap-2">
<button onclick="downloadPDF(${b.id})" title="Descargar PDF" class="w-9 h-9 bg-slate-50 border border-slate-100 text-slate-600 rounded-full flex items-center justify-center active:scale-95 transition-transform"><i data-lucide="download" class="w-4 h-4"></i></button>
<button onclick="deleteBudget(${b.id})" title="Borrar" class="w-9 h-9 bg-slate-50 border border-slate-100 text-rose-500 rounded-full flex items-center justify-center active:scale-95 transition-transform hover:bg-rose-50"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
</div>
</div>
</div> </div>
`; `;
}).join(''); }).join('');
lucide.createIcons(); lucide.createIcons();
} }
// ------------------ LÓGICA DE FORMULARIO ------------------ // ------------------ CREACIÓN DE PRESUPUESTO (ITEMS) ------------------
function addItem() { function addItem() {
const conceptInput = document.getElementById('item_concept'); const conceptInput = document.getElementById('item_concept');
const qtyInput = document.getElementById('item_qty'); const qtyInput = document.getElementById('item_qty');
@@ -250,14 +408,14 @@
function renderItems() { function renderItems() {
const cont = document.getElementById('itemsContainer'); const cont = document.getElementById('itemsContainer');
cont.innerHTML = currentItems.map((item, idx) => ` cont.innerHTML = currentItems.map((item, idx) => `
<div class="flex justify-between items-center bg-white p-3 rounded-xl border border-slate-100 shadow-sm text-sm"> <div class="flex justify-between items-center bg-slate-50 p-3 rounded-xl border border-slate-100 text-sm">
<div class="w-[60%]"> <div class="w-[60%]">
<p class="font-bold text-slate-700 truncate">${item.concept}</p> <p class="font-bold text-slate-700 truncate">${item.concept}</p>
<p class="text-[10px] text-slate-400 font-medium uppercase">${item.qty} ud x ${item.price.toFixed(2)}€</p> <p class="text-[10px] text-slate-400 font-medium uppercase">${item.qty} ud x ${item.price.toFixed(2)}€</p>
</div> </div>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<span class="font-black text-indigo-600">${item.total.toFixed(2)}€</span> <span class="font-black text-slate-800">${item.total.toFixed(2)}€</span>
<button type="button" onclick="removeItem(${idx})" class="w-7 h-7 bg-rose-50 text-rose-500 rounded-full flex items-center justify-center active:scale-90"><i data-lucide="trash-2" class="w-4 h-4"></i></button> <button type="button" onclick="removeItem(${idx})" class="w-7 h-7 bg-white shadow-sm border border-slate-100 text-rose-500 rounded-full flex items-center justify-center active:scale-90"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
</div> </div>
</div> </div>
`).join(''); `).join('');
@@ -315,7 +473,7 @@
if(data.ok) { if(data.ok) {
showToast("¡Presupuesto Creado!"); showToast("¡Presupuesto Creado!");
hideCreateView(); hideCreateView();
fetchBudgets(); // Recarga la lista fetchBudgets();
} else { } else {
showToast("Error al guardar."); showToast("Error al guardar.");
} }