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-29 17:38:22 +00:00
parent 5d32568a62
commit db8cb8f3a0
1 changed files with 41 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
presupuestos.html
View File

@@ -470,43 +470,66 @@ async function downloadPDF(id) {
} }
container.innerHTML = budgets.map(b => { container.innerHTML = budgets.map(b => {
let statusColor = "bg-amber-50 text-amber-600"; // 🔴 LÓGICA DE ESTADOS Y CADUCIDAD (Igual que en el Portal)
let statusText = "Pendiente"; let bDate = new Date(b.created_at);
let diffDays = Math.ceil(Math.abs(new Date() - bDate) / (1000 * 60 * 60 * 24));
let isExpired = diffDays > 30;
let statusColor = "bg-amber-100 text-amber-700";
let statusText = "Pte. Resolver";
let icon = "clock"; let icon = "clock";
if(b.status === 'accepted' || b.status === 'converted') { statusColor = "bg-emerald-50 text-emerald-600"; statusText = "Aceptado"; icon = "check-circle"; } // Prioridad de estados
else if(b.status === 'rejected') { statusColor = "bg-rose-50 text-rose-600"; statusText = "Rechazado"; icon = "x-circle"; } if (b.status === 'paid') {
statusColor = "bg-emerald-100 text-emerald-700 border border-emerald-200";
statusText = "Pagado Online";
icon = "badge-check";
} else if (isExpired && b.status !== 'rejected') {
statusColor = "bg-slate-100 text-slate-500 border border-slate-200";
statusText = "Caducado";
icon = "clock-alert";
} else if (b.status === 'accepted' || b.status === 'converted') {
statusColor = "bg-blue-100 text-blue-700 border border-blue-200";
statusText = "Aceptado (Pte. Pago)";
icon = "clock";
} else if (b.status === 'rejected') {
statusColor = "bg-rose-100 text-rose-700";
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 = bDate.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: '2-digit' });
return ` return `
<div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm flex flex-col gap-4 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 fade-in">
<div class="absolute top-0 left-0 w-1 h-full bg-slate-200"></div> <div class="absolute top-0 left-0 w-1.5 h-full ${b.status === 'paid' ? 'bg-emerald-500' : (isExpired ? 'bg-slate-300' : 'bg-primary-dynamic')}"></div>
<div class="flex justify-between items-start pl-2"> <div class="flex justify-between items-start pl-2">
<div class="w-[60%]"> <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 mt-0.5"><i data-lucide="phone" class="w-3 h-3 inline pb-0.5"></i> ${b.client_phone}</p> <div class="${statusColor} text-[8px] font-black px-2 py-0.5 rounded-md uppercase tracking-wider flex items-center gap-1 w-max mt-2">
<i data-lucide="${icon}" class="w-3 h-3"></i> ${statusText}
</div>
</div> </div>
<div class="text-right"> <div class="text-right">
<p class="text-xl font-black text-slate-800">${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.5 py-1 rounded-md uppercase tracking-wider flex items-center justify-end gap-1 w-max ml-auto mt-1"> <p class="text-[9px] font-bold text-slate-400 mt-1">${b.client_phone}</p>
<i data-lucide="${icon}" class="w-3 h-3"></i> ${statusText}
</span>
</div> </div>
</div> </div>
<div class="pt-3 border-t border-slate-100 flex justify-between items-center pl-2"> <div class="pt-3 border-t border-slate-100 flex justify-between items-center pl-2">
<div class="flex gap-2"> <div class="flex gap-2">
${ b.status === 'pending' ? ` ${ (b.status === 'pending' && !isExpired) ? `
<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}, 'accepted')" class="w-9 h-9 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center active:scale-95 transition-transform border border-emerald-100"><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> <button onclick="updateStatus(${b.id}, 'rejected')" class="w-9 h-9 bg-rose-50 text-rose-600 rounded-full flex items-center justify-center active:scale-95 transition-transform border border-rose-100"><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>` } ` : (b.status === 'paid' ?
`<span class="text-[9px] font-black text-emerald-600 uppercase tracking-widest bg-emerald-50 px-2 py-1 rounded-md">Cobrado</span>` :
`<span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Cerrado</span>`) }
</div> </div>
<div class="flex gap-2"> <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="downloadPDF(${b.id})" class="w-9 h-9 bg-slate-50 border border-slate-200 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> <button onclick="deleteBudget(${b.id})" class="w-9 h-9 bg-slate-50 border border-slate-200 text-rose-500 rounded-full flex items-center justify-center active:scale-95 transition-transform"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
</div> </div>
</div> </div>
</div> </div>