diff --git a/src/components/InvoiceModal.js b/src/components/InvoiceModal.js index 6a34e63..6309be2 100644 --- a/src/components/InvoiceModal.js +++ b/src/components/InvoiceModal.js @@ -254,30 +254,28 @@ export function InvoiceModal(invoiceId, onClose, onUpdate) {

Historial de Pagos

-
- - +
+ + + + + + + + + + + ${payments.map(p => ` - - - - - + + + + + - - - ${payments.map(p => ` - - - - - - - - `).join('')} - -
FechaReferenciaTipoNº TransacciónImporte
FechaImporteReferenciaTipoNº Transacción${formatDate(p.paymentDate)}${p.ref || '—'}${p.type ? `${p.type}` : '—'}${p.transactionNum || '—'}${formatCurrency(p.amount)}
${formatDate(p.paymentDate)}${formatCurrency(p.amount)}${p.ref || '-'}${p.type || '-'}${p.transactionNum || '-'}
-
+ `).join('')} + +
` : ''} diff --git a/src/pages/ClientesPage.js b/src/pages/ClientesPage.js index 87cf624..d475c9e 100644 --- a/src/pages/ClientesPage.js +++ b/src/pages/ClientesPage.js @@ -135,17 +135,24 @@ export function renderClientesPage() { const modal = document.createElement('div'); modal.className = 'client-modal-overlay'; - const contactsHtml = client.contacts && client.contacts.length > 0 + const iconMail = ``; + const iconPhone = ``; + const iconMobile = ``; + + const contactsHtml = client.contacts && client.contacts.length > 0 ? client.contacts.map(contact => `
+
+ +
${displayValue(contact.firstname)} ${displayValue(contact.lastname)}
-
📧 Email: ${displayValue(contact.email)}
-
📱 Móvil: ${displayValue(contact.phoneMobile)}
-
☎️ Profesional: ${displayValue(contact.phonePro)}
-
📞 Personal: ${displayValue(contact.phonePerso)}
+ ${contact.email ? `
${iconMail}${displayValue(contact.email)}
` : ''} + ${contact.phoneMobile ? `
${iconMobile}${displayValue(contact.phoneMobile)}
` : ''} + ${contact.phonePro ? `
${iconPhone}${displayValue(contact.phonePro)}
` : ''} + ${contact.phonePerso ? `
${iconPhone}${displayValue(contact.phonePerso)}
` : ''}
`).join('') diff --git a/src/style.css b/src/style.css index 87d99cf..eeb527c 100755 --- a/src/style.css +++ b/src/style.css @@ -1473,38 +1473,60 @@ button:disabled { } .contact-card { - background: var(--gray-50); + background: var(--card-bg); border-radius: var(--radius-md); - padding: var(--space-3); + padding: var(--space-4); border: 1px solid var(--border-color); } .contact-header { - margin-bottom: var(--space-2); + display: flex; + align-items: center; + gap: var(--space-2); + margin-bottom: var(--space-3); + padding-bottom: var(--space-3); + border-bottom: 1px solid var(--border-color); +} + +.contact-avatar { + width: 28px; + height: 28px; + border-radius: 50%; + background: var(--gray-100); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-secondary); + flex-shrink: 0; } .contact-full-name { - font-weight: 500; + font-weight: 600; color: var(--text-primary); - font-size: 14px; + font-size: 13px; } .contact-details { display: flex; flex-direction: column; - gap: var(--space-1); + gap: var(--space-2); } .contact-row { display: flex; + align-items: center; gap: var(--space-2); font-size: 13px; color: var(--text-secondary); } -.contact-row .label { - min-width: 110px; +.contact-icon { + display: flex; + align-items: center; + justify-content: center; + color: var(--gray-400); flex-shrink: 0; + width: 16px; } .no-contacts { diff --git a/src/styles/modal.css b/src/styles/modal.css index 5869979..119f497 100644 --- a/src/styles/modal.css +++ b/src/styles/modal.css @@ -376,19 +376,90 @@ /* Payment History */ .payments-history-section { - border-top: 2px solid var(--border-color); - padding-top: 1.25rem; - margin-top: 1rem; + border-top: 1px solid var(--border-color); + padding-top: 1.5rem; + margin-top: 1.5rem; } .payments-history-section h3 { - margin: 0 0 0.75rem; - font-size: 1.05rem; + margin: 0 0 1rem; + font-size: 0.75rem; + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.06em; +} + +.payments-history-table { + width: 100%; + border-collapse: collapse; + font-size: 0.8125rem; + border: 1px solid var(--border-color); + border-radius: 8px; + overflow: hidden; +} + +.payments-history-table thead th { + padding: 0.5rem 0.875rem; + text-align: left; + font-size: 0.6875rem; + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; + background: var(--bg-subtle, #f3f4f6); + border-bottom: 1px solid var(--border-color); + white-space: nowrap; +} + +.payments-history-table thead th:last-child { + text-align: right; +} + +.payments-history-table tbody tr { + border-bottom: 1px solid var(--border-color); + transition: background 0.12s ease; +} + +.payments-history-table tbody tr:last-child { + border-bottom: none; +} + +.payments-history-table tbody tr:hover { + background: var(--bg-subtle, #f3f4f6); +} + +.payments-history-table td { + padding: 0.625rem 0.875rem; color: var(--text-primary); + vertical-align: middle; +} + +.payments-history-table td:last-child { + text-align: right; } .payment-amount-cell { - color: var(--success, #22c55e); + font-weight: 600; + color: var(--success, #16a34a); + font-variant-numeric: tabular-nums; + white-space: nowrap; +} + +.payment-ref-cell { + color: var(--text-secondary); + font-size: 0.75rem; +} + +.payment-type-pill { + display: inline-block; + padding: 2px 8px; + background: var(--bg-subtle, #f3f4f6); + border-radius: 99px; + font-size: 0.6875rem; + font-weight: 500; + color: var(--text-secondary); + white-space: nowrap; } /* Button Styles */