diff --git a/.env b/.env old mode 100644 new mode 100755 diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 diff --git a/index.html b/index.html old mode 100644 new mode 100755 index 70d54c7..491f46d --- a/index.html +++ b/index.html @@ -1,13 +1,17 @@ - - - - - doli-front - - -
- - - + + + + + + doli-front + + + + +
+ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json old mode 100644 new mode 100755 diff --git a/package.json b/package.json old mode 100644 new mode 100755 diff --git a/public/vite.svg b/public/vite.svg old mode 100644 new mode 100755 diff --git a/src/components/InvoiceItem.js b/src/components/InvoiceItem.js new file mode 100644 index 0000000..275e0e8 --- /dev/null +++ b/src/components/InvoiceItem.js @@ -0,0 +1,73 @@ +export function InvoiceItem(invoice, onView) { + const item = document.createElement('tr'); + item.className = 'invoice-item'; + + // Formatear fecha + const formatDate = (dateString) => { + const date = new Date(dateString); + return date.toLocaleDateString('es-ES'); + }; + + // Formatear moneda + const formatCurrency = (amount) => { + return new Intl.NumberFormat('es-ES', { + style: 'currency', + currency: 'EUR' + }).format(amount); + }; + + // Obtener clase de estado + const getStatusClass = (status) => { + const statusMap = { + 'draft': 'status-draft', + 'validated': 'status-validated', + 'paid': 'status-paid', + 'unpaid': 'status-unpaid', + 'canceled': 'status-canceled' + }; + return statusMap[status] || 'status-default'; + }; + + // Obtener texto de estado + const getStatusText = (status) => { + const statusTextMap = { + 'draft': 'Borrador', + 'validated': 'Validada', + 'paid': 'Pagada', + 'unpaid': 'Impagada', + 'canceled': 'Cancelada' + }; + return statusTextMap[status] || status; + }; + + item.innerHTML = /*html*/` + ${invoice.number} + + + ${getStatusText(invoice.status)} + + + + + ${invoice.clientName || 'Sin nombre'} + + ${formatDate(invoice.date)} + ${formatCurrency(invoice.total)} + ${formatCurrency(invoice.remainToPay)} + + + + `; + + // Event listener para el botón de ver + const viewBtn = item.querySelector('.btn-view'); + viewBtn.addEventListener('click', () => { + if (onView) { + onView(invoice.id); + } + }); + + return item; +} diff --git a/src/components/InvoiceModal.js b/src/components/InvoiceModal.js new file mode 100644 index 0000000..42f1bb2 --- /dev/null +++ b/src/components/InvoiceModal.js @@ -0,0 +1,465 @@ +import { getInvoiceById, updateInvoice, validateInvoice, addInvoiceLine } from '../services/invoices.js'; + +export function InvoiceModal(invoiceId, onClose, onUpdate) { + const modal = document.createElement('div'); + modal.className = 'modal-overlay'; + + let invoice = null; + let isLoading = true; + + // Formatear fecha para input type="date" + const formatDateForInput = (dateString) => { + if (!dateString) return ''; + const date = new Date(dateString); + return date.toISOString().split('T')[0]; + }; + + // Formatear fecha para mostrar + const formatDate = (dateString) => { + if (!dateString) return '-'; + const date = new Date(dateString); + return date.toLocaleDateString('es-ES'); + }; + + // Formatear moneda + const formatCurrency = (amount) => { + return new Intl.NumberFormat('es-ES', { + style: 'currency', + currency: 'EUR' + }).format(amount || 0); + }; + + // Obtener texto de estado + const getStatusText = (status) => { + const statusTextMap = { + 'draft': 'Borrador', + 'validated': 'Validada', + 'paid': 'Pagada', + 'unpaid': 'Impagada', + 'canceled': 'Cancelada' + }; + return statusTextMap[status] || status; + }; + + // Renderizar contenido del modal + const renderContent = () => { + const modalContent = modal.querySelector('.modal-content'); + + if (isLoading) { + modalContent.innerHTML = ` +
+

Cargando...

+ +
+
+
Cargando detalles de la factura...
+
+ `; + return; + } + + if (!invoice) { + modalContent.innerHTML = ` +
+

Error

+ +
+
+
No se pudo cargar la factura
+
+ `; + return; + } + + const isDraft = invoice.status === 'draft'; + const canEdit = isDraft || invoice.status === 'validated' || invoice.status === 'unpaid'; + + modalContent.innerHTML = ` +
+
+

${invoice.number || 'Nueva Factura'}

+ + ${getStatusText(invoice.status)} + +
+ +
+ +
+
+ +
+

Información de la Factura

+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+ + +
+
+

Líneas de Factura

+ ${isDraft ? '' : ''} +
+ + ${isDraft ? ` + + ` : ''} + +
+ + + + + + + + + + + + ${invoice.lines && invoice.lines.length > 0 + ? invoice.lines.map(line => ` + + + + + + + + `).join('') + : '' + } + +
DescripciónCantidadPrecio UnitarioIVA %Total
${line.description || ''}${line.quantity || 0}${formatCurrency(line.unitPrice)}${line.taxRate || 0}%${formatCurrency(line.total)}
No hay líneas en esta factura
+
+ + +
+
+ Total: + ${formatCurrency(invoice.total)} +
+
+ Pendiente: + ${formatCurrency(invoice.remainToPay)} +
+
+
+
+
+ +
+
+ ${isDraft ? '' : ''} +
+
+ + ${canEdit ? '' : ''} +
+
+ `; + + attachEventListeners(); + }; + + // Adjuntar event listeners + const attachEventListeners = () => { + // Botón cerrar + const closeBtn = modal.querySelector('.btn-close'); + closeBtn?.addEventListener('click', handleClose); + + // Botón cancelar modal + const cancelBtn = modal.querySelector('.btn-cancel-modal'); + cancelBtn?.addEventListener('click', handleClose); + + // Botón guardar + const saveBtn = modal.querySelector('.btn-save'); + saveBtn?.addEventListener('click', handleSave); + + // Botón validar + const validateBtn = modal.querySelector('.btn-validate'); + validateBtn?.addEventListener('click', handleValidate); + + // Botón añadir línea + const addLineBtn = modal.querySelector('.btn-add-line'); + addLineBtn?.addEventListener('click', toggleAddLineForm); + + // Botón guardar línea + const saveLineBtn = modal.querySelector('.btn-save-line'); + saveLineBtn?.addEventListener('click', handleSaveLine); + + // Botón cancelar línea + const cancelLineBtn = modal.querySelector('.btn-cancel-line'); + cancelLineBtn?.addEventListener('click', () => { + const form = modal.querySelector('.add-line-form'); + if (form) form.style.display = 'none'; + }); + + // Click fuera del modal + modal.addEventListener('click', (e) => { + if (e.target === modal) { + handleClose(); + } + }); + }; + + // Manejar cierre + const handleClose = () => { + modal.remove(); + if (onClose) onClose(); + }; + + // Manejar guardado + const handleSave = async () => { + const form = modal.querySelector('#invoice-form'); + const formData = new FormData(form); + + // La API espera camelCase en el PUT (notePublic/notePrivate) + const data = { + number: formData.get('number') || undefined, + expireDate: formData.get('expireDate') || undefined, + notePublic: formData.get('note_public') || undefined, + notePrivate: formData.get('note_private') || undefined + }; + + // Filtrar valores undefined + Object.keys(data).forEach(key => { + if (data[key] === undefined || data[key] === '') { + delete data[key]; + } + }); + + try { + const saveBtn = modal.querySelector('.btn-save'); + saveBtn.disabled = true; + saveBtn.textContent = 'Guardando...'; + + await updateInvoice(invoiceId, data); + + alert('Factura actualizada correctamente'); + if (onUpdate) onUpdate(); + handleClose(); + } catch (error) { + console.error('Error al guardar:', error); + alert('Error al guardar la factura: ' + error.message); + } finally { + const saveBtn = modal.querySelector('.btn-save'); + if (saveBtn) { + saveBtn.disabled = false; + saveBtn.textContent = 'Guardar Cambios'; + } + } + }; + + // Manejar validación + const handleValidate = async () => { + if (!confirm('¿Estás seguro de que quieres validar esta factura? No podrás editarla completamente después.')) { + return; + } + + try { + const validateBtn = modal.querySelector('.btn-validate'); + validateBtn.disabled = true; + validateBtn.textContent = 'Validando...'; + + await validateInvoice(invoiceId); + + alert('Factura validada correctamente'); + if (onUpdate) onUpdate(); + + // Recargar la factura para mostrar el nuevo estado + await loadInvoice(); + } catch (error) { + console.error('Error al validar:', error); + alert('Error al validar la factura: ' + error.message); + + const validateBtn = modal.querySelector('.btn-validate'); + if (validateBtn) { + validateBtn.disabled = false; + validateBtn.innerHTML = 'Validar Factura'; + } + } + }; + + // Mostrar/ocultar formulario de añadir línea + const toggleAddLineForm = () => { + const form = modal.querySelector('.add-line-form'); + if (form) { + const isVisible = form.style.display !== 'none'; + form.style.display = isVisible ? 'none' : 'block'; + + if (!isVisible) { + // Limpiar campos + modal.querySelector('#line-description').value = ''; + modal.querySelector('#line-quantity').value = '1'; + modal.querySelector('#line-price').value = '0'; + modal.querySelector('#line-tax').value = '21'; + } + } + }; + + // Guardar nueva línea + const handleSaveLine = async () => { + const description = modal.querySelector('#line-description').value.trim(); + const quantity = parseFloat(modal.querySelector('#line-quantity').value); + const unitPrice = parseFloat(modal.querySelector('#line-price').value); + const taxRate = parseFloat(modal.querySelector('#line-tax').value); + + if (!description) { + alert('La descripción es obligatoria'); + return; + } + + if (!quantity || quantity <= 0) { + alert('La cantidad debe ser mayor que 0'); + return; + } + + if (unitPrice < 0) { + alert('El precio no puede ser negativo'); + return; + } + + if (taxRate < 0 || taxRate > 100) { + alert('El IVA debe estar entre 0 y 100'); + return; + } + + try { + const saveBtn = modal.querySelector('.btn-save-line'); + saveBtn.disabled = true; + saveBtn.textContent = 'Guardando...'; + + await addInvoiceLine(invoiceId, { + description, + quantity, + unitPrice, + taxRate + }); + + alert('Línea añadida correctamente'); + toggleAddLineForm(); + await loadInvoice(); + } catch (error) { + console.error('Error al añadir línea:', error); + alert('Error al añadir línea: ' + error.message); + } finally { + const saveBtn = modal.querySelector('.btn-save-line'); + if (saveBtn) { + saveBtn.disabled = false; + saveBtn.textContent = 'Guardar Línea'; + } + } + }; + + // Cargar factura + const loadInvoice = async () => { + try { + isLoading = true; + renderContent(); + + invoice = await getInvoiceById(invoiceId); + isLoading = false; + renderContent(); + } catch (error) { + console.error('Error al cargar factura:', error); + isLoading = false; + invoice = null; + renderContent(); + } + }; + + // Inicializar modal + modal.innerHTML = ` +
+
+ `; + + // Cargar factura + loadInvoice(); + + return modal; +} diff --git a/src/components/Login.js b/src/components/Login.js old mode 100644 new mode 100755 diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js old mode 100644 new mode 100755 diff --git a/src/counter.js b/src/counter.js old mode 100644 new mode 100755 diff --git a/src/javascript.svg b/src/javascript.svg old mode 100644 new mode 100755 diff --git a/src/main.js b/src/main.js old mode 100644 new mode 100755 diff --git a/src/pages/CreateInvoicePage.js b/src/pages/CreateInvoicePage.js new file mode 100644 index 0000000..8b5ca82 --- /dev/null +++ b/src/pages/CreateInvoicePage.js @@ -0,0 +1,243 @@ +export function renderCreateInvoicePage() { + const container = document.createElement('div'); + container.className = 'create-invoice-page'; + + container.innerHTML = /*html*/` +
+

Nueva Factura

+ +
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+

Líneas de Factura

+ +
+ +
+
+ +
+ + +
+
+ `; + + const clientSelect = container.querySelector('#clientId'); + + async function loadClients() { + try { + const token = localStorage.getItem('token'); + const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/Clients?limit=1000`, { + headers: { 'Authorization': `Bearer ${token}` } + }); + + if (!response.ok) throw new Error('Error al cargar clientes'); + + const clients = await response.json(); + + clientSelect.innerHTML = ''; + clients.forEach(client => { + const option = document.createElement('option'); + option.value = client.id; + option.textContent = client.name; + clientSelect.appendChild(option); + }); + + clientSelect.disabled = false; + } catch (error) { + console.error('Error:', error); + clientSelect.innerHTML = ''; + } + } + + loadClients(); + + const today = new Date().toISOString().split('T')[0]; + container.querySelector('#date').value = today; + + const expireDate = new Date(); + expireDate.setDate(expireDate.getDate() + 30); + container.querySelector('#expireDate').value = expireDate.toISOString().split('T')[0]; + + let lineCounter = 0; + + function createInvoiceLine() { + lineCounter++; + const lineDiv = document.createElement('div'); + lineDiv.className = 'line-row-compact'; + + lineDiv.innerHTML = /*html*/` + + + + +
0.00 €
+ + `; + + const descInput = lineDiv.querySelector('.line-desc-compact'); + const qtyInput = lineDiv.querySelector('.line-qty-compact'); + const priceInput = lineDiv.querySelector('.line-price-compact'); + const taxInput = lineDiv.querySelector('.line-tax-compact'); + const totalDiv = lineDiv.querySelector('.line-total-compact'); + + function updateTotal() { + const qty = parseFloat(qtyInput.value) || 0; + const price = parseFloat(priceInput.value) || 0; + const tax = parseFloat(taxInput.value) || 0; + const subtotal = qty * price; + const total = subtotal * (1 + tax / 100); + totalDiv.textContent = `${total.toFixed(2)} €`; + } + + qtyInput.addEventListener('input', updateTotal); + priceInput.addEventListener('input', updateTotal); + taxInput.addEventListener('input', updateTotal); + + lineDiv.querySelector('.btn-delete-compact').addEventListener('click', () => { + lineDiv.remove(); + }); + + return lineDiv; + } + + const linesContainer = container.querySelector('#invoice-lines-container'); + linesContainer.appendChild(createInvoiceLine()); + linesContainer.appendChild(createInvoiceLine()); + + container.querySelector('#add-line-btn').addEventListener('click', () => { + linesContainer.appendChild(createInvoiceLine()); + }); + + container.querySelector('#back-btn').addEventListener('click', () => { + window.location.hash = '#invoices'; + }); + + container.querySelector('#cancel-btn').addEventListener('click', () => { + if (confirm('¿Cancelar? Se perderán los cambios.')) { + window.location.hash = '#invoices'; + } + }); + + container.querySelector('#invoice-form').addEventListener('submit', async (e) => { + e.preventDefault(); + + const clientIdValue = parseInt(container.querySelector('#clientId').value); + + if (!clientIdValue || isNaN(clientIdValue) || clientIdValue < 1) { + alert('Selecciona un cliente'); + return; + } + + const lines = container.querySelectorAll('.line-row-compact'); + if (lines.length === 0) { + alert('Añade al menos una línea'); + return; + } + + const formData = { + clientId: clientIdValue, + date: container.querySelector('#date').value + 'T00:00:00', + expireDate: container.querySelector('#expireDate').value + 'T00:00:00', + notePublic: container.querySelector('#notePublic').value || null, + notePrivate: container.querySelector('#notePrivate').value || null, + lines: [] + }; + + let hasEmptyLine = false; + lines.forEach(line => { + const desc = line.querySelector('.line-desc-compact').value.trim(); + const qty = parseFloat(line.querySelector('.line-qty-compact').value); + const price = parseFloat(line.querySelector('.line-price-compact').value); + const tax = parseFloat(line.querySelector('.line-tax-compact').value); + + if (!desc || !qty || !price) { + hasEmptyLine = true; + return; + } + + formData.lines.push({ + description: desc, + quantity: qty, + unitPrice: price, + taxRate: tax + }); + }); + + if (hasEmptyLine) { + alert('Completa todos los campos de las líneas'); + return; + } + + try { + const submitBtn = container.querySelector('.btn-submit-compact'); + submitBtn.disabled = true; + submitBtn.textContent = 'Guardando...'; + + const token = localStorage.getItem('token'); + const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/Invoices`, { + method: 'POST', + headers: { + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify(formData) + }); + + if (!response.ok) { + const error = await response.text(); + throw new Error(error || 'Error al crear'); + } + + const invoiceId = await response.json(); + alert(`Factura creada (ID: ${invoiceId})`); + window.location.hash = '#invoices'; + + } catch (error) { + console.error('Error:', error); + alert(error.message || 'Error al crear la factura'); + + const submitBtn = container.querySelector('.btn-submit-compact'); + if (submitBtn) { + submitBtn.disabled = false; + submitBtn.textContent = 'Crear Factura'; + } + } + }); + + return container; +} diff --git a/src/pages/DashboardPage.js b/src/pages/DashboardPage.js old mode 100644 new mode 100755 diff --git a/src/pages/Facturas.js b/src/pages/Facturas.js new file mode 100755 index 0000000..30210d0 --- /dev/null +++ b/src/pages/Facturas.js @@ -0,0 +1,240 @@ +import { InvoiceItem } from '../components/InvoiceItem.js'; +import { InvoiceModal } from '../components/InvoiceModal.js'; + +export function renderFacturasPage() { + const container = document.createElement('div'); + container.className = 'facturas-page'; + + // Estado de paginación + let currentPage = 1; + let totalPages = 1; + const pageSize = 20; + let allInvoices = []; // Almacenar todas las facturas + let filteredInvoices = []; // Facturas filtradas + let currentFilter = ''; // Filtro actual de estado + let searchTerm = ''; // Término de búsqueda actual + + container.innerHTML = /*html*/` +
+

Facturas

+
+ +
+ + + +
+ +
+ + + + + + + + + + + + + + + + + +
NúmeroEstadoClienteFechaTotalPendienteAcciones
Cargando facturas...
+
+ + + `; + + // Función para aplicar filtros combinados + function applyFilters() { + // Ya no filtra localmente, hace llamada a la API + loadAllInvoices(); + } + + // Función para renderizar la página actual + function renderPage(page = 1) { + const invoicesList = container.querySelector('.invoices-list'); + + currentPage = page; + totalPages = Math.ceil(filteredInvoices.length / pageSize); + + // Calcular índices para la página + const startIndex = (page - 1) * pageSize; + const endIndex = Math.min(startIndex + pageSize, filteredInvoices.length); + const invoices = filteredInvoices.slice(startIndex, endIndex); + + console.log(`Página ${currentPage}/${totalPages}, Facturas en esta página: ${invoices.length}, Total filtrado: ${filteredInvoices.length}`); + + // Actualizar UI de paginación + updatePaginationUI(); + + // Limpiar lista + invoicesList.innerHTML = ''; + + // Si no hay facturas + if (invoices.length === 0) { + invoicesList.innerHTML = 'No hay facturas disponibles'; + return; + } + + // Renderizar cada factura + invoices.forEach(invoice => { + const invoiceItem = InvoiceItem(invoice, handleViewInvoice); + invoicesList.appendChild(invoiceItem); + }); + } + + // Manejar ver/editar factura + function handleViewInvoice(invoiceId) { + const modal = InvoiceModal(invoiceId, null, () => { + // Callback cuando se actualiza la factura + loadAllInvoices(); + }); + document.body.appendChild(modal); + } + + // Función para cargar todas las facturas + async function loadAllInvoices() { + const invoicesList = container.querySelector('.invoices-list'); + + try { + invoicesList.innerHTML = 'Cargando facturas...'; + + const token = localStorage.getItem('token'); + + // Construir URL con parámetros + let url = `${import.meta.env.VITE_API_BASE_URL}/api/Invoices?limit=1000`; + + if (currentFilter) { + url += `&status=${currentFilter}`; + } + + if (searchTerm) { + url += `&search=${encodeURIComponent(searchTerm)}`; + } + + const response = await fetch(url, { + method: 'GET', + headers: { + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json' + } + }); + + if (!response.ok) { + throw new Error('Error al cargar facturas'); + } + + const data = await response.json(); + + // Manejo de respuesta - obtener todas las facturas + allInvoices = Array.isArray(data) ? data : data.data || data.invoices || []; + filteredInvoices = [...allInvoices]; + + console.log(`Total de facturas cargadas: ${allInvoices.length}`); + + // Renderizar la primera página + renderPage(1); + + } catch (error) { + console.error('Error al cargar facturas:', error); + invoicesList.innerHTML = 'Error al cargar las facturas. Por favor, intenta de nuevo.'; + } + } + + // Función para actualizar la UI de paginación + function updatePaginationUI() { + const paginationDiv = container.querySelector('.pagination'); + const currentPageSpan = container.querySelector('.current-page'); + const totalPagesSpan = container.querySelector('.total-pages'); + const btnPrev = container.querySelector('.btn-prev'); + const btnNext = container.querySelector('.btn-next'); + + currentPageSpan.textContent = currentPage; + totalPagesSpan.textContent = totalPages; + + // Mostrar u ocultar la paginación según el número de páginas + if (totalPages <= 1) { + paginationDiv.style.display = 'none'; + } else { + paginationDiv.style.display = 'flex'; + } + + // Deshabilitar botones según corresponda + btnPrev.disabled = currentPage === 1; + btnNext.disabled = currentPage === totalPages; + } + + // Event listeners + const newInvoiceBtn = container.querySelector('.btn-new-invoice'); + newInvoiceBtn.addEventListener('click', () => { + window.location.hash = '#create-invoice'; + }); + + const searchInput = container.querySelector('.search-input'); + searchInput.addEventListener('input', (e) => { + const inputValue = e.target.value.trim(); + // Debounce para no hacer muchas llamadas + clearTimeout(searchInput.debounceTimer); + searchInput.debounceTimer = setTimeout(() => { + // Validación mínima: al menos 2 caracteres para activar búsqueda + if (inputValue.length >= 2) { + searchTerm = inputValue; + } else { + searchTerm = ''; // Si es muy corto, mostrar todas + } + applyFilters(); + }, 500); // Espera 500ms después de que el usuario deja de escribir + }); + + const filterStatus = container.querySelector('.filter-status'); + filterStatus.addEventListener('change', (e) => { + currentFilter = e.target.value; + console.log(`Filtro aplicado: ${currentFilter || 'Todos'}`); + applyFilters(); + }); + + // Event listeners de paginación + const btnPrev = container.querySelector('.btn-prev'); + const btnNext = container.querySelector('.btn-next'); + + btnPrev.addEventListener('click', () => { + if (currentPage > 1) { + renderPage(currentPage - 1); + scrollToTop(); + } + }); + + btnNext.addEventListener('click', () => { + if (currentPage < totalPages) { + renderPage(currentPage + 1); + scrollToTop(); + } + }); + + // Función para scroll al inicio + function scrollToTop() { + container.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + + // Cargar todas las facturas al montar el componente + loadAllInvoices(); + + return container; +} diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js old mode 100644 new mode 100755 diff --git a/src/pages/pagesRegistry.js b/src/pages/pagesRegistry.js old mode 100644 new mode 100755 index 8a7bf57..b1cb087 --- a/src/pages/pagesRegistry.js +++ b/src/pages/pagesRegistry.js @@ -1,40 +1,37 @@ import { renderDashboard } from './DashboardPage.js'; -import { renderTestPage } from './test.js'; +import { renderFacturasPage } from './Facturas.js'; +import { renderCreateInvoicePage } from './CreateInvoicePage.js'; // Registry of all pages available in the application export const pagesRegistry = [ { route: 'dashboard', name: 'Dashboard', - icon: '🏠', + icon: '', requiresAuth: true, showInSidebar: true, render: renderDashboard }, - { - route: 'test', - name: 'Test Page', - icon: '🧪', - requiresAuth: true, - showInSidebar: true, - render: renderTestPage - }, { route: 'invoices', name: 'Facturas', - icon: '📄', + icon: '', requiresAuth: true, showInSidebar: true, - render: () => { - const div = document.createElement('div'); - div.innerHTML = '

Facturas

Página en construcción...

'; - return div; - } + render: renderFacturasPage + }, + { + route: 'create-invoice', + name: 'Nueva Factura', + icon: '+', + requiresAuth: true, + showInSidebar: false, // No mostrar en sidebar + render: renderCreateInvoicePage }, { route: 'clients', name: 'Clientes', - icon: '👥', + icon: '', requiresAuth: true, showInSidebar: true, render: () => { @@ -46,7 +43,7 @@ export const pagesRegistry = [ { route: 'settings', name: 'Configuración', - icon: '⚙️', + icon: '', requiresAuth: true, showInSidebar: true, render: () => { diff --git a/src/pages/test.js b/src/pages/test.js old mode 100644 new mode 100755 diff --git a/src/router.js b/src/router.js old mode 100644 new mode 100755 diff --git a/src/services/auth.js b/src/services/auth.js old mode 100644 new mode 100755 diff --git a/src/services/invoices.js b/src/services/invoices.js new file mode 100644 index 0000000..bcfc386 --- /dev/null +++ b/src/services/invoices.js @@ -0,0 +1,98 @@ +const API_BASE_URL = import.meta.env.VITE_API_BASE_URL; + +function getAuthHeaders() { + const token = localStorage.getItem('token'); + return { + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json' + }; +} + +export async function getInvoiceById(id) { + const response = await fetch(`${API_BASE_URL}/api/Invoices/${id}`, { + method: 'GET', + headers: getAuthHeaders() + }); + + if (!response.ok) { + throw new Error('Error al obtener la factura'); + } + + return await response.json(); +} + +export async function updateInvoice(id, data) { + const response = await fetch(`${API_BASE_URL}/api/Invoices/${id}`, { + method: 'PUT', + headers: getAuthHeaders(), + body: JSON.stringify(data) + }); + + if (!response.ok) { + const error = await response.json().catch(() => ({})); + throw new Error(error.detail || 'Error al actualizar la factura'); + } + + return true; +} + +export async function validateInvoice(id) { + const response = await fetch(`${API_BASE_URL}/api/Invoices/${id}/validate`, { + method: 'POST', + headers: getAuthHeaders() + }); + + if (!response.ok) { + const error = await response.json().catch(() => ({})); + throw new Error(error.detail || 'Error al validar la factura'); + } + + return true; +} + +export async function updateInvoiceStatus(id, status) { + const response = await fetch(`${API_BASE_URL}/api/Invoices/${id}/status`, { + method: 'PATCH', + headers: getAuthHeaders(), + body: JSON.stringify({ status }) + }); + + if (!response.ok) { + const error = await response.json().catch(() => ({})); + throw new Error(error.detail || 'Error al actualizar el estado'); + } + + return true; +} + +export async function addInvoiceLine(id, lineData) { + const response = await fetch(`${API_BASE_URL}/api/Invoices/${id}/lines`, { + method: 'POST', + headers: getAuthHeaders(), + body: JSON.stringify(lineData) + }); + + if (!response.ok) { + const error = await response.json().catch(() => ({})); + throw new Error(error.detail || 'Error al agregar línea'); + } + + return await response.json(); +} + +export async function deleteInvoice(id) { + // Nota: No hay endpoint DELETE en el OpenAPI spec, + // pero podríamos usar el endpoint de cambio de estado a "canceled" + // o implementarlo si está disponible en el backend + const response = await fetch(`${API_BASE_URL}/api/Invoices/${id}`, { + method: 'DELETE', + headers: getAuthHeaders() + }); + + if (!response.ok) { + // Si no existe DELETE, intentar cancelar + return await updateInvoiceStatus(id, 'canceled'); + } + + return true; +} diff --git a/src/style.css b/src/style.css old mode 100644 new mode 100755 index fba8aa6..4475d28 --- a/src/style.css +++ b/src/style.css @@ -31,6 +31,7 @@ a { color: var(--primary); text-decoration: inherit; } + a:hover { color: var(--primary-hover); } @@ -57,9 +58,11 @@ h1 { will-change: filter; transition: filter 300ms; } + .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } + .logo.vanilla:hover { filter: drop-shadow(0 0 2em #f7df1eaa); } @@ -84,9 +87,11 @@ button { cursor: pointer; transition: background-color 0.25s, border-color 0.25s; } + button:hover { background-color: var(--primary-hover); } + button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; @@ -97,6 +102,7 @@ button:focus-visible { color: var(--text-primary); background-color: #f8fafc; } + a:hover { color: var(--primary-hover); } @@ -228,22 +234,22 @@ button:focus-visible { .status-pending { background-color: #fef3c7; - color: #d97706; + color: #000000; } .status-paid { background-color: #d1fae5; - color: #059669; + color: #000000; } .status-overdue { background-color: #fee2e2; - color: #dc2626; + color: #000000; } .status-draft { background-color: #f1f5f9; - color: #64748b; + color: #000000; } .amount-display { @@ -404,7 +410,7 @@ button:focus-visible { background-color: #f8fafc; } -.main-content > div { +.main-content>div { max-width: 1280px; margin: 0 auto; padding: 2rem; @@ -431,38 +437,347 @@ button:focus-visible { } } -/* Test Page Styles */ -.test-page { +/* Facturas Page Styles */ +.facturas-page { padding: 2rem; + max-width: 1600px; + margin: 0 auto; } -.test-page h1 { +.facturas-header { + margin-bottom: 2rem; +} + +.facturas-header h1 { color: var(--text-primary); - margin-bottom: 1rem; font-size: 2rem; + margin: 0; } -.test-content { +.btn-new-invoice { + background-color: var(--primary); + color: white; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 8px; + cursor: pointer; + font-weight: 600; + transition: background-color 0.2s; + margin-left: auto; +} + +.btn-new-invoice:hover { + background-color: var(--primary-hover); +} + +.facturas-filters { + display: flex; + gap: 1rem; + margin-bottom: 1.5rem; + align-items: center; +} + +.search-input, +.filter-status { + padding: 0.75rem 1rem; + border: 1px solid var(--border-color); + border-radius: 8px; + font-size: 0.95rem; + background: var(--card-bg); + color: #000000; +} + +.search-input { + flex: 1; + max-width: 400px; +} + +.filter-status { + min-width: 200px; + cursor: pointer; +} + +/* Invoices Table Styles */ +.invoices-table-container { background: var(--card-bg); - padding: 2rem; border-radius: 12px; border: 1px solid var(--border-color); - margin-top: 1rem; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } -.test-button { - background-color: var(--success); - color: white; - padding: 0.5rem 1rem; +.invoices-table { + width: 100%; + border-collapse: collapse; +} + +.invoices-table thead { + background: #f8fafc; + border-bottom: 2px solid var(--border-color); +} + +.invoices-table th { + font-weight: 600; + color: var(--text-secondary); + font-size: 0.85rem; + text-transform: uppercase; + padding: 1rem 1.5rem; + text-align: left; +} + +.invoices-table tbody tr { + border-bottom: 1px solid var(--border-color); + transition: background-color 0.2s; +} + +.invoices-table tbody tr:hover { + background-color: #f8fafc; +} + +.invoices-table tbody tr:last-child { + border-bottom: none; +} + +.invoices-table td { + padding: 1rem 1.5rem; +} + +.invoice-number { + font-weight: 600; + color: var(--text-primary); +} + +.invoice-status .status-badge { + display: inline-block; + padding: 0.4rem 0.8rem; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 600; + text-align: center; +} + +.status-draft { + background: #f3f4f6; + color: #000000; +} + +.status-validated { + background: #dbeafe; + color: #000000; +} + +.status-paid { + background: #d1fae5; + color: #000000; +} + +.status-unpaid { + background: #fee2e2; + color: #000000; +} + +.status-canceled { + background: #f3f4f6; + color: #000000; + text-decoration: line-through; +} + +.invoice-client { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-secondary); +} + +.client-icon { + font-size: 1rem; +} + +.invoice-date, +.invoice-total, +.invoice-remain { + color: var(--text-primary); +} + +.invoice-total, +.invoice-remain { + font-weight: 600; +} + +.invoice-actions { + display: flex; + gap: 0.5rem; + justify-content: center; +} + +.btn-view { + background: transparent; border: none; - border-radius: 6px; + padding: 0.25rem; + border-radius: 4px; cursor: pointer; - margin-top: 1rem; + color: var(--text-secondary); + transition: all 0.2s; + display: inline-flex; + align-items: center; + justify-content: center; } -.test-button:hover { - background-color: var(--success-hover); - border-color: transparent; +.btn-view:hover { + color: var(--primary); + transform: scale(1.1); +} + +.loading, +.error, +.no-invoices { + padding: 3rem; + text-align: center; + color: var(--text-secondary); + font-size: 1.1rem; +} + +.error { + color: var(--danger); +} + +/* Pagination Styles */ +.pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + margin-top: 2rem; + padding: 1.5rem; + background: var(--card-bg); + border-radius: 12px; + border: 1px solid var(--border-color); +} + +.pagination-info { + font-weight: 600; + color: var(--text-primary); + font-size: 1rem; + display: flex; + gap: 0.5rem; + align-items: center; +} + +.pagination-info .current-page, +.pagination-info .total-pages { + font-weight: 700; + color: var(--primary); + min-width: 30px; + text-align: center; +} + +.btn-pagination { + padding: 0.75rem 1.5rem; + background-color: var(--primary); + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-weight: 600; + transition: all 0.2s; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.btn-pagination:hover:not(:disabled) { + background-color: var(--primary-hover); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); +} + +.btn-pagination:disabled { + background-color: #cbd5e1; + cursor: not-allowed; + opacity: 0.6; +} + +.btn-pagination:active:not(:disabled) { + transform: translateY(0); +} + +/* Responsive */ +@media (max-width: 768px) { + .pagination { + flex-wrap: wrap; + gap: 1rem; + } + + .btn-pagination { + flex: 1; + min-width: 120px; + } + + .pagination-info { + order: 3; + width: 100%; + justify-content: center; + } +} + +@media (max-width: 1400px) { + + .invoices-header, + .invoice-item { + grid-template-columns: 40px 120px 100px 50px 130px 100px 100px 100px 70px; + font-size: 0.9rem; + } +} + +@media (max-width: 1024px) { + .facturas-page { + padding: 1rem; + } + + .invoices-header, + .invoice-item { + grid-template-columns: 40px 100px 90px 130px 90px 90px 60px; + gap: 0.5rem; + padding: 1rem; + } + + .invoice-id, + .invoice-remain { + display: none; + } +} + +@media (max-width: 768px) { + .facturas-filters { + flex-direction: column; + } + + .search-input { + max-width: 100%; + } + + .invoices-header { + display: none; + } + + .invoice-item { + grid-template-columns: 1fr; + gap: 0.5rem; + padding: 1.5rem; + } + + .invoice-item>div { + display: flex; + justify-content: space-between; + align-items: center; + } + + .invoice-item>div::before { + content: attr(class); + font-weight: 600; + color: var(--text-secondary); + text-transform: capitalize; + } } /* Adjust dashboard and login for new layout */ @@ -473,3 +788,314 @@ button:focus-visible { min-height: 100vh; width: 100%; } + +/* Create Invoice Page - Ultra Compact */ +.create-invoice-page { + padding: 2rem; + max-width: 1000px; + margin: 0 auto; + min-height: 100vh; +} + +.invoice-header-compact { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; + flex-shrink: 0; +} + +.invoice-header-compact h1 { + margin: 0; + font-size: 1.5rem; + color: var(--text-primary); + font-weight: 600; +} + +.btn-back { + background: transparent; + color: var(--text-secondary); + border: 1px solid var(--border-color); + padding: 0.5rem 1rem; + border-radius: 6px; + cursor: pointer; + font-weight: 500; + font-size: 0.9rem; + transition: all 0.2s; +} + +.btn-back:hover { + background: #f8fafc; + color: var(--text-primary); + border-color: #cbd5e1; +} + +.invoice-form-compact { + background: var(--card-bg); + border-radius: 12px; + border: 1px solid var(--border-color); + padding: 2rem; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.form-grid-compact { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: 1rem; + margin-bottom: 1.5rem; + flex-shrink: 0; +} + +.notes-grid-compact { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin-bottom: 1.5rem; +} + +.form-field-compact { + display: flex; + flex-direction: column; +} + +.form-field-compact.full-width { + grid-column: 1 / -1; +} + +.form-field-compact label { + font-weight: 500; + margin-bottom: 0.5rem; + color: var(--text-secondary); + font-size: 0.875rem; +} + +.form-field-compact input, +.form-field-compact select, +.form-field-compact textarea { + padding: 0.625rem 0.75rem; + border: 1px solid var(--border-color); + border-radius: 6px; + font-size: 0.9375rem; + color: var(--text-primary); + background: #ffffff; + resize: vertical; + min-height: 38px; + font-family: inherit; + transition: all 0.2s; +} + +.form-field-compact input:focus, +.form-field-compact select:focus, +.form-field-compact textarea:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); +} + +.lines-section-compact { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + margin-bottom: 1.5rem; +} + +.lines-header-compact { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + flex-shrink: 0; +} + +.lines-header-compact h3 { + margin: 0; + font-size: 1.125rem; + color: var(--text-primary); + font-weight: 600; +} + +.btn-add-compact { + background: #f8fafc; + color: var(--text-primary); + border: 1px solid var(--border-color); + padding: 0.5rem 1rem; + border-radius: 6px; + cursor: pointer; + font-weight: 500; + font-size: 0.875rem; + transition: all 0.2s; +} + +.btn-add-compact:hover { + background: #f1f5f9; + border-color: #cbd5e1; +} + +.lines-table-compact { + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.line-row-compact { + display: grid; + grid-template-columns: 4fr 0.8fr 1.2fr 0.8fr 1.2fr auto; + gap: 0.75rem; + align-items: center; + background: #f8fafc; + border: 1px solid var(--border-color); + border-radius: 6px; + padding: 0.75rem; + transition: all 0.2s; +} + +.line-row-compact:hover { + background: #f1f5f9; +} + +.line-desc-compact, +.line-qty-compact, +.line-price-compact, +.line-tax-compact { + padding: 0.5rem 0.625rem; + border: 1px solid var(--border-color); + border-radius: 4px; + font-size: 0.875rem; + background: white; + color: var(--text-primary); + transition: all 0.2s; +} + +.line-desc-compact { + width: 100%; +} + +.line-desc-compact:focus, +.line-qty-compact:focus, +.line-price-compact:focus, +.line-tax-compact:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); +} + +.line-total-compact { + font-weight: 600; + color: var(--text-primary); + font-size: 0.9375rem; + text-align: right; + padding-right: 0.5rem; +} + +.btn-delete-compact { + background: transparent; + color: #94a3b8; + border: 1px solid transparent; + width: 32px; + height: 32px; + border-radius: 4px; + cursor: pointer; + font-size: 1.5rem; + font-weight: 300; + line-height: 1; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s; + flex-shrink: 0; +} + +.btn-delete-compact:hover { + color: #ef4444; + background: #fee2e2; + border-color: transparent; +} + +.form-actions-compact { + display: flex; + justify-content: flex-end; + gap: 0.75rem; + margin-top: 0; + padding-top: 1.5rem; + border-top: 1px solid var(--border-color); + flex-shrink: 0; +} + +.btn-cancel-compact { + background: transparent; + color: var(--text-secondary); + border: 1px solid var(--border-color); + padding: 0.625rem 1.25rem; + border-radius: 6px; + cursor: pointer; + font-weight: 500; + font-size: 0.9375rem; + transition: all 0.2s; +} + +.btn-cancel-compact:hover { + background: #f8fafc; + color: var(--text-primary); +} + +.btn-submit-compact { + background: var(--primary); + color: white; + border: none; + padding: 0.625rem 1.5rem; + border-radius: 6px; + cursor: pointer; + font-weight: 500; + font-size: 0.9375rem; + transition: all 0.2s; +} + +.btn-submit-compact:hover { + background: var(--primary-hover); +} + +.btn-submit-compact:disabled { + background: #e2e8f0; + color: #94a3b8; + cursor: not-allowed; +} + +@media (max-width: 768px) { + .create-invoice-page { + padding: 0.5rem; + height: calc(100vh - 1rem); + } + + .form-grid-compact { + grid-template-columns: 1fr; + gap: 0.5rem; + } + + .form-field-compact.full-width { + grid-column: 1; + } + + .line-row-compact { + grid-template-columns: 1fr auto; + gap: 0.5rem; + padding: 0.75rem; + } + + .line-desc-compact { + grid-column: 1; + } + + .line-qty-compact, + .line-price-compact, + .line-tax-compact, + .line-total-compact { + width: 60px; + } + + .btn-delete-compact { + grid-column: 2; + } +} \ No newline at end of file diff --git a/src/styles/modal.css b/src/styles/modal.css new file mode 100644 index 0000000..d4a72fe --- /dev/null +++ b/src/styles/modal.css @@ -0,0 +1,393 @@ +/* Modal Styles */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + padding: 1rem; + animation: fadeIn 0.2s ease-in-out; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.modal-content { + background: var(--card-bg); + border-radius: 12px; + max-width: 900px; + width: 100%; + max-height: 90vh; + display: flex; + flex-direction: column; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + animation: slideUp 0.3s ease-out; +} + +@keyframes slideUp { + from { + transform: translateY(20px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} + +.modal-header { + padding: 1.5rem 2rem; + border-bottom: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; +} + +.modal-title { + display: flex; + align-items: center; + gap: 1rem; +} + +.modal-title h2 { + margin: 0; + font-size: 1.5rem; + color: var(--text-primary); +} + +.btn-close { + background: none; + border: none; + font-size: 2rem; + line-height: 1; + color: var(--text-secondary); + cursor: pointer; + padding: 0; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + transition: all 0.2s; +} + +.btn-close:hover { + background-color: #f1f5f9; + color: var(--text-primary); +} + +.modal-body { + padding: 2rem; + overflow-y: auto; + flex: 1; +} + +.modal-footer { + padding: 1.5rem 2rem; + border-top: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + gap: 1rem; +} + +.footer-actions-left, +.footer-actions-right { + display: flex; + gap: 0.75rem; +} + +/* Form Styles in Modal */ +.form-section { + margin-bottom: 2rem; +} + +.form-section:last-child { + margin-bottom: 0; +} + +.form-section h3 { + margin: 0 0 1rem 0; + font-size: 1.125rem; + color: var(--text-primary); + font-weight: 600; +} + +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1rem; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin-bottom: 1rem; +} + +.form-group { + display: flex; + flex-direction: column; +} + +.form-group.full-width { + grid-column: 1 / -1; +} + +.form-group label { + font-size: 0.875rem; + font-weight: 500; + color: var(--text-secondary); + margin-bottom: 0.5rem; +} + +.form-group input, +.form-group textarea, +.form-group select { + padding: 0.625rem 0.75rem; + border: 1px solid var(--border-color); + border-radius: 6px; + font-size: 0.9375rem; + transition: all 0.2s; + font-family: inherit; + background-color: #ffffff; + color: var(--text-primary); +} + +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); +} + +.form-group input:disabled, +.form-group textarea:disabled, +.form-group select:disabled { + background-color: #f8fafc; + color: var(--text-secondary); + cursor: not-allowed; +} + +.form-group input[readonly] { + background-color: #f8fafc; + color: var(--text-secondary); +} + +/* Add Line Form */ +.add-line-form { + background-color: #f8fafc; + padding: 1.5rem; + border-radius: 8px; + margin-bottom: 1rem; + border: 2px dashed var(--border-color); +} + +.form-group textarea { + resize: vertical; + min-height: 80px; +} + +/* Invoice Lines Table */ +.invoice-lines { + margin: 1rem 0; +} + +.lines-table { + width: 100%; + border-collapse: collapse; + font-size: 0.875rem; +} + +.lines-table thead { + background-color: #f8fafc; +} + +.lines-table th { + padding: 0.75rem; + text-align: left; + font-weight: 600; + color: var(--text-secondary); + border-bottom: 2px solid var(--border-color); +} + +.lines-table td { + padding: 0.75rem; + border-bottom: 1px solid var(--border-color); +} + +.lines-table tbody tr:hover { + background-color: #f8fafc; +} + +.no-lines { + text-align: center; + color: var(--text-secondary); + font-style: italic; +} + +/* Invoice Totals */ +.invoice-totals { + margin-top: 1.5rem; + padding: 1rem; + background-color: #f8fafc; + border-radius: 8px; + display: flex; + flex-direction: column; + gap: 0.75rem; + max-width: 300px; + margin-left: auto; +} + +.total-row { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.9375rem; +} + +.total-row.pending { + font-size: 1.125rem; + color: var(--primary); + padding-top: 0.75rem; + border-top: 2px solid var(--border-color); +} + +/* Button Styles */ +.btn-small { + padding: 0.5rem 1rem; + font-size: 0.875rem; +} + +.btn-primary { + background-color: var(--primary); + color: white; +} + +.btn-primary:hover { + background-color: var(--primary-hover); +} + +.btn-success { + background-color: var(--success); + color: white; +} + +.btn-success:hover { + background-color: var(--success-hover); +} + +.btn-cancel { + background-color: transparent; + color: var(--text-secondary); + border: 1px solid var(--border-color); +} + +.btn-cancel:hover { + background-color: #f8fafc; + color: var(--text-primary); +} + +/* Invoice Actions Buttons */ +.invoice-actions { + display: flex; + gap: 0.5rem; + align-items: center; + justify-content: center; +} + +.btn-action { + background: none; + border: none; + font-size: 1.25rem; + cursor: pointer; + padding: 0.25rem 0.5rem; + border-radius: 4px; + transition: all 0.2s; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.btn-action:hover { + background-color: #f1f5f9; + transform: scale(1.1); +} + +.btn-delete:hover { + background-color: #fee2e2; +} + +/* Loading and Error States */ +.loading { + text-align: center; + padding: 2rem; + color: var(--text-secondary); +} + +.error { + text-align: center; + padding: 2rem; + color: var(--danger); +} + +/* Responsive Modal */ +@media (max-width: 768px) { + .modal-overlay { + padding: 0; + } + + .modal-content { + max-width: 100%; + max-height: 100vh; + border-radius: 0; + } + + .modal-header, + .modal-body, + .modal-footer { + padding: 1rem; + } + + .form-row { + grid-template-columns: 1fr; + gap: 0.75rem; + } + + .invoice-totals { + max-width: 100%; + } + + .modal-footer { + flex-direction: column; + } + + .footer-actions-left, + .footer-actions-right { + width: 100%; + } + + .footer-actions-left button, + .footer-actions-right button { + flex: 1; + } +} \ No newline at end of file