From 84b2559e35ae809c8f722228fa3cb6d21d0becb6 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Wed, 25 Mar 2026 08:35:01 +0000
Subject: [PATCH] =?UTF-8?q?A=C3=B1adir=20presupuestos.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 presupuestos.html | 332 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 332 insertions(+)
 create mode 100644 presupuestos.html
diff --git a/presupuestos.html b/presupuestos.html
new file mode 100644
index 0000000..247c0c6
--- /dev/null
+++ b/presupuestos.html
@@ -0,0 +1,332 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <title>Presupuestos - IntegraRepara</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        :root {
+            --primary: #4f46e5; /* Indigo 600 */
+            --app-bg: #f8fafc;
+        }
+        body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; }
+        .fade-in { animation: fadeIn 0.3s ease-out forwards; }
+        @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); }
+    </style>
+</head>
+<body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden bg-slate-50">
+
+    <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="flex items-center justify-between">
+            <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>
+            </button>
+            <h1 class="text-xl font-black tracking-tight">Presupuestos</h1>
+            <div class="w-10"></div> </div>
+    </header>
+
+    <main id="viewList" class="flex-1 overflow-y-auto px-5 pt-6 main-content z-10 fade-in">
+        <div class="flex justify-between items-end mb-4">
+            <h2 class="text-sm font-black text-slate-400 uppercase tracking-widest">Historial</h2>
+            <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"></i> Nuevo
+            </button>
+        </div>
+
+        <div id="budgetsList" class="space-y-4 pb-10">
+            <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...
+            </div>
+        </div>
+    </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)]">
+        <div class="flex justify-between items-center mb-6">
+            <h2 class="text-lg font-black text-slate-800">Nuevo Presupuesto</h2>
+            <button onclick="hideCreateView()" class="text-slate-400 p-2"><i data-lucide="x" class="w-6 h-6"></i></button>
+        </div>
+
+        <form id="budgetForm" class="space-y-5">
+            <div class="bg-slate-50 p-4 rounded-2xl border border-slate-100 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>
+                
+                <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="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="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">
+            </div>
+
+            <div class="bg-slate-50 p-4 rounded-2xl border border-slate-100 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>
+                
+                <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="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">
+                        <datalist id="articlesList"></datalist>
+                    </div>
+                    <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">
+                    </div>
+                    <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">
+                    </div>
+                    <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>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-indigo-50 p-5 rounded-2xl border border-indigo-100">
+                <div class="flex justify-between text-sm font-medium text-slate-600 mb-1">
+                    <span>Subtotal:</span> <span id="lbl_subtotal">0.00 €</span>
+                </div>
+                <div class="flex justify-between text-sm font-medium text-slate-600 mb-3 pb-3 border-b border-indigo-200/50">
+                    <span>IVA (21%):</span> <span id="lbl_tax">0.00 €</span>
+                </div>
+                <div class="flex justify-between text-xl font-black text-indigo-900">
+                    <span>TOTAL:</span> <span id="lbl_total">0.00 €</span>
+                </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">
+                <i data-lucide="save" class="w-4 h-4"></i> Generar Presupuesto
+            </button>
+        </form>
+    </main>
+
+    <div id="toast" class="fixed bottom-5 left-1/2 -translate-x-1/2 bg-slate-800 text-white px-6 py-3 rounded-full text-xs font-bold tracking-wide shadow-2xl opacity-0 pointer-events-none transition-opacity z-50 flex items-center gap-2">
+        <i data-lucide="info" class="w-4 h-4"></i> <span id="toastMsg">Mensaje</span>
+    </div>
+
+    <script>
+        const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' 
+            ? 'http://localhost:3000' 
+            : 'https://integrarepara-api.integrarepara.es';
+
+        let catalog = [];
+        let currentItems = [];
+
+        document.addEventListener("DOMContentLoaded", async () => {
+            if (!localStorage.getItem("token")) { window.location.href = "index.html"; return; }
+            lucide.createIcons();
+            
+            await fetchArticles();
+            await fetchBudgets();
+
+            // Llenar precio auto al seleccionar artículo del catálogo
+            document.getElementById('item_concept').addEventListener('change', (e) => {
+                const art = catalog.find(a => a.name === e.target.value);
+                if(art) document.getElementById('item_price').value = art.price;
+            });
+        });
+
+        // ------------------ NAVEGACIÓN ------------------
+        function showCreateView() {
+            document.getElementById('viewList').classList.add('hidden');
+            document.getElementById('viewCreate').classList.remove('hidden');
+            currentItems = [];
+            document.getElementById('budgetForm').reset();
+            renderItems();
+        }
+
+        function hideCreateView() {
+            document.getElementById('viewCreate').classList.add('hidden');
+            document.getElementById('viewList').classList.remove('hidden');
+        }
+
+        function showToast(msg) {
+            const toast = document.getElementById('toast');
+            document.getElementById('toastMsg').innerText = msg;
+            toast.classList.remove('opacity-0');
+            setTimeout(() => toast.classList.add('opacity-0'), 3000);
+        }
+
+        // ------------------ API CALLS ------------------
+        async function fetchArticles() {
+            try {
+                const res = await fetch(`${API_URL}/articles`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                if(data.ok) {
+                    catalog = data.articles;
+                    const dl = document.getElementById('articlesList');
+                    dl.innerHTML = '';
+                    catalog.forEach(a => {
+                        const opt = document.createElement('option');
+                        opt.value = a.name;
+                        dl.appendChild(opt);
+                    });
+                }
+            } catch(e) {}
+        }
+
+        async function fetchBudgets() {
+            try {
+                const res = await fetch(`${API_URL}/budgets`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                if(data.ok) renderBudgetsList(data.budgets);
+            } catch(e) {
+                document.getElementById('budgetsList').innerHTML = `<div class="text-center text-rose-500 py-6 text-sm font-bold">Error de conexión</div>`;
+            }
+        }
+
+        function renderBudgetsList(budgets) {
+            const container = document.getElementById('budgetsList');
+            if(budgets.length === 0) {
+                container.innerHTML = `
+                    <div class="text-center bg-white border border-slate-100 p-8 rounded-[2rem] shadow-sm">
+                        <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-3"><i data-lucide="file-x-2" class="w-8 h-8 text-slate-300"></i></div>
+                        <h3 class="text-sm font-black text-slate-700 mb-1">No hay presupuestos</h3>
+                        <p class="text-xs text-slate-400 font-medium">Aún no has generado ninguno.</p>
+                    </div>`;
+                lucide.createIcons();
+                return;
+            }
+
+            container.innerHTML = budgets.map(b => {
+                let statusColor = "bg-amber-100 text-amber-700";
+                let statusText = "Pendiente";
+                let icon = "clock";
+                
+                if(b.status === 'accepted' || b.status === 'converted') { statusColor = "bg-emerald-100 text-emerald-700"; statusText = "Aceptado"; icon = "check-circle"; }
+                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' });
+
+                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="flex justify-between items-start">
+                        <div class="w-[70%]">
+                            <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>
+                            <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>
+                        </div>
+                        <div class="text-right">
+                            <p class="text-lg font-black text-indigo-600">${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">
+                                <i data-lucide="${icon}" class="w-3 h-3"></i> ${statusText}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                `;
+            }).join('');
+            lucide.createIcons();
+        }
+
+        // ------------------ LÓGICA DE FORMULARIO ------------------
+        function addItem() {
+            const conceptInput = document.getElementById('item_concept');
+            const qtyInput = document.getElementById('item_qty');
+            const priceInput = document.getElementById('item_price');
+
+            const concept = conceptInput.value.trim();
+            const qty = parseFloat(qtyInput.value);
+            const price = parseFloat(priceInput.value);
+
+            if(!concept || isNaN(qty) || isNaN(price)) {
+                showToast("Rellena concepto y precio.");
+                return;
+            }
+
+            currentItems.push({ concept, qty, price, total: qty * price });
+            
+            conceptInput.value = '';
+            qtyInput.value = '1';
+            priceInput.value = '';
+            conceptInput.focus();
+
+            renderItems();
+        }
+
+        function removeItem(index) {
+            currentItems.splice(index, 1);
+            renderItems();
+        }
+
+        function renderItems() {
+            const cont = document.getElementById('itemsContainer');
+            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="w-[60%]">
+                        <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>
+                    </div>
+                    <div class="flex items-center gap-3">
+                        <span class="font-black text-indigo-600">${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>
+                    </div>
+                </div>
+            `).join('');
+            lucide.createIcons();
+            calcTotals();
+        }
+
+        function calcTotals() {
+            let sub = 0;
+            currentItems.forEach(i => sub += i.total);
+            let tax = sub * 0.21; // IVA 21%
+            let tot = sub + tax;
+
+            document.getElementById('lbl_subtotal').innerText = `${sub.toFixed(2)} €`;
+            document.getElementById('lbl_tax').innerText = `${tax.toFixed(2)} €`;
+            document.getElementById('lbl_total').innerText = `${tot.toFixed(2)} €`;
+
+            return { sub, tax, tot };
+        }
+
+        async function saveBudget() {
+            if(currentItems.length === 0) { showToast("Añade al menos 1 artículo."); return; }
+            
+            const cName = document.getElementById('c_name').value.trim();
+            const cPhone = document.getElementById('c_phone').value.trim();
+            const cAddress = document.getElementById('c_address').value.trim();
+
+            if(!cName || !cPhone) { showToast("Nombre y teléfono obligatorios."); return; }
+
+            const btn = document.getElementById('btnSave');
+            btn.disabled = true;
+            btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Generando...';
+            lucide.createIcons();
+
+            const totals = calcTotals();
+
+            const payload = {
+                client_name: cName,
+                client_phone: cPhone,
+                client_address: cAddress,
+                items: currentItems,
+                subtotal: totals.sub,
+                tax: totals.tax,
+                total: totals.tot
+            };
+
+            try {
+                const res = await fetch(`${API_URL}/budgets`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', "Authorization": `Bearer ${localStorage.getItem("token")}` },
+                    body: JSON.stringify(payload)
+                });
+                
+                const data = await res.json();
+                if(data.ok) {
+                    showToast("¡Presupuesto Creado!");
+                    hideCreateView();
+                    fetchBudgets(); // Recarga la lista
+                } else {
+                    showToast("Error al guardar.");
+                }
+            } catch(e) {
+                showToast("Fallo de conexión.");
+            } finally {
+                btn.disabled = false;
+                btn.innerHTML = '<i data-lucide="save" class="w-4 h-4"></i> Generar Presupuesto';
+                lucide.createIcons();
+            }
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
