diff --git a/static/js/customers-modern.js b/static/js/customers-modern.js new file mode 100644 index 0000000..345e1ba --- /dev/null +++ b/static/js/customers-modern.js @@ -0,0 +1,426 @@ +// Modern helper functions for customer details modal + +function formatCustomerPhonesModern(phones) { + if (!phones || phones.length === 0) { + return ` +
+
+ +
+
+

Phone Numbers

+ Not provided +
+
+ `; + } + + return phones.map(phone => ` +
+
+ +
+
+

${phone.location || 'Phone'}

+

${escapeHtml(phone.phone)}

+
+
+ `).join(''); +} + +function formatCustomerAddressModern(customer) { + const addressParts = []; + if (customer.a1) addressParts.push(escapeHtml(customer.a1)); + if (customer.a2) addressParts.push(escapeHtml(customer.a2)); + if (customer.a3) addressParts.push(escapeHtml(customer.a3)); + + const cityState = formatCityState(customer); + if (cityState !== '-') addressParts.push(escapeHtml(cityState)); + if (customer.zip) addressParts.push(escapeHtml(customer.zip)); + + if (addressParts.length === 0) { + return ` +
+
+ +
+
+

Address

+ Not provided +
+
+ `; + } + + return ` +
+ ${addressParts.map(part => ` +
+
+ +
+
+

${part}

+
+
+ `).join('')} +
+ `; +} + +function formatCustomerPersonalInfo(customer) { + const hasPersonalInfo = customer.dob || customer.legal_status || customer.ss_number || customer.prefix || customer.middle || customer.suffix; + + if (!hasPersonalInfo) { + return ` +
+
+ +
+
+

Personal Information

+ Not provided +
+
+ `; + } + + const personalItems = []; + + if (customer.dob) { + personalItems.push({ + icon: 'fa-calendar', + label: 'Date of Birth', + value: customer.dob, + color: 'purple' + }); + } + + if (customer.ss_number) { + personalItems.push({ + icon: 'fa-id-card', + label: 'SSN', + value: customer.ss_number, + color: 'purple', + mono: true + }); + } + + if (customer.legal_status) { + personalItems.push({ + icon: 'fa-gavel', + label: 'Legal Status', + value: customer.legal_status, + color: 'purple' + }); + } + + if (customer.prefix) { + personalItems.push({ + icon: 'fa-tag', + label: 'Prefix', + value: customer.prefix, + color: 'purple' + }); + } + + if (customer.middle) { + personalItems.push({ + icon: 'fa-user', + label: 'Middle Name', + value: customer.middle, + color: 'purple' + }); + } + + if (customer.suffix) { + personalItems.push({ + icon: 'fa-tag', + label: 'Suffix', + value: customer.suffix, + color: 'purple' + }); + } + + return ` +
+ ${personalItems.map(item => ` +
+
+ +
+
+

${item.label}

+

${escapeHtml(item.value)}

+
+
+ `).join('')} +
+ `; +} + +// Updated showCustomerDetailsModal function - Legacy-style compact 2-column layout with larger text +function showCustomerDetailsModal(customer) { + // Create modal content matching the legacy system layout exactly + const modalContent = ` +
+
+
+ +
+

Customer Details

+ +
+ + +
+ +
+ ${escapeHtml(customer.id || '')} +
+ + +
+ +
+
Name Information
+ ${customer.prefix ? `
Prefix:${escapeHtml(customer.prefix)}
` : ''} + ${customer.first ? `
First:${escapeHtml(customer.first)}
` : ''} + ${customer.middle ? `
Middle:${escapeHtml(customer.middle)}
` : ''} + ${customer.last ? `
Last:${escapeHtml(customer.last)}
` : ''} + ${customer.suffix ? `
Suffix:${escapeHtml(customer.suffix)}
` : ''} +
+ + +
+
Phone Numbers
+ ${formatCustomerPhonesLegacyLarger(customer.phone_numbers || [])} +
+
+ + +
+ +
+
General Information
+ ${customer.group ? `
Group:${escapeHtml(customer.group)}
` : ''} + ${customer.title ? `
Title:${escapeHtml(customer.title)}
` : ''} +
+
Address
+ ${formatCustomerAddressLegacyLarger(customer)} +
+
+ + +
+
Personal Details
+
+ Email: + ${customer.email ? `${escapeHtml(customer.email)}` : '-'} +
+ ${customer.dob ? `
DOB:${escapeHtml(customer.dob)}
` : ''} + ${customer.ss_number ? `
SSN:${escapeHtml(customer.ss_number)}
` : ''} + ${customer.legal_status ? `
Legal Status:${escapeHtml(customer.legal_status)}
` : ''} +
+
+ + +
+
Memo
+
+ ${customer.memo ? escapeHtml(customer.memo) : 'No memo information available'} +
+
+
+ + +
+ + +
+
+
+
+ `; + + // Add modal to body + document.body.insertAdjacentHTML('beforeend', modalContent); +} + +// Compact formatting functions for cleaner display +function formatCustomerPhonesCompact(phones) { + if (!phones || phones.length === 0) { + return ` +
+ Phone: + - +
+ `; + } + + return phones.map(phone => ` +
+ ${phone.location || 'Phone'}: + ${escapeHtml(phone.phone)} +
+ `).join(''); +} + +function formatCustomerAddressCompact(customer) { + const addressParts = []; + if (customer.a1) addressParts.push(escapeHtml(customer.a1)); + if (customer.a2) addressParts.push(escapeHtml(customer.a2)); + if (customer.a3) addressParts.push(escapeHtml(customer.a3)); + + const cityState = formatCityState(customer); + if (cityState !== '-') addressParts.push(escapeHtml(cityState)); + if (customer.zip) addressParts.push(escapeHtml(customer.zip)); + + if (addressParts.length === 0) { + return ` +
+ No address provided +
+ `; + } + + return ` +
+ ${addressParts.map(part => `
${part}
`).join('')} +
+ `; +} + +// Ultra-compact formatting functions for minimal space usage +function formatCustomerPhonesUltraCompact(phones) { + if (!phones || phones.length === 0) { + return ` +
+ Phone: + - +
+ `; + } + + return phones.map(phone => ` +
+ ${phone.location || 'Phone'}: + ${escapeHtml(phone.phone)} +
+ `).join(''); +} + +function formatCustomerAddressUltraCompact(customer) { + const addressParts = []; + if (customer.a1) addressParts.push(escapeHtml(customer.a1)); + if (customer.a2) addressParts.push(escapeHtml(customer.a2)); + if (customer.a3) addressParts.push(escapeHtml(customer.a3)); + + const cityState = formatCityState(customer); + if (cityState !== '-') addressParts.push(escapeHtml(cityState)); + if (customer.zip) addressParts.push(escapeHtml(customer.zip)); + + if (addressParts.length === 0) { + return ` +
+ No address provided +
+ `; + } + + return ` +
+ ${addressParts.map(part => `
${part}
`).join('')} +
+ `; +} + +// Legacy formatting functions to match the old system layout +function formatCustomerPhonesLegacy(phones) { + if (!phones || phones.length === 0) { + return `
No phone numbers
`; + } + + return phones.map(phone => ` +
+ ${phone.location || 'Phone'}: + ${escapeHtml(phone.phone)} +
+ `).join(''); +} + +function formatCustomerAddressLegacy(customer) { + const addressParts = []; + if (customer.a1) addressParts.push(escapeHtml(customer.a1)); + if (customer.a2) addressParts.push(escapeHtml(customer.a2)); + if (customer.a3) addressParts.push(escapeHtml(customer.a3)); + + const cityState = formatCityState(customer); + if (cityState !== '-') addressParts.push(escapeHtml(cityState)); + if (customer.zip) addressParts.push(escapeHtml(customer.zip)); + + if (addressParts.length === 0) { + return `
No address provided
`; + } + + return ` +
+ ${addressParts.map(part => `
${part}
`).join('')} +
+ `; +} + +// Legacy formatting functions with larger text +function formatCustomerPhonesLegacyLarger(phones) { + if (!phones || phones.length === 0) { + return `
No phone numbers
`; + } + + return phones.map(phone => ` +
+ ${phone.location || 'Phone'}: + ${escapeHtml(phone.phone)} +
+ `).join(''); +} + +function formatCustomerAddressLegacyLarger(customer) { + const addressParts = []; + if (customer.a1) addressParts.push(escapeHtml(customer.a1)); + if (customer.a2) addressParts.push(escapeHtml(customer.a2)); + if (customer.a3) addressParts.push(escapeHtml(customer.a3)); + + const cityState = formatCityState(customer); + if (cityState !== '-') addressParts.push(escapeHtml(cityState)); + if (customer.zip) addressParts.push(escapeHtml(customer.zip)); + + if (addressParts.length === 0) { + return `
No address provided
`; + } + + return ` +
+ ${addressParts.map(part => `
${part}
`).join('')} +
+ `; +} + +// Make functions globally available +window.formatCustomerPhonesModern = formatCustomerPhonesModern; +window.formatCustomerAddressModern = formatCustomerAddressModern; +window.formatCustomerPersonalInfo = formatCustomerPersonalInfo; +window.formatCustomerPhonesCompact = formatCustomerPhonesCompact; +window.formatCustomerAddressCompact = formatCustomerAddressCompact; +window.formatCustomerPhonesUltraCompact = formatCustomerPhonesUltraCompact; +window.formatCustomerAddressUltraCompact = formatCustomerAddressUltraCompact; +window.formatCustomerPhonesLegacy = formatCustomerPhonesLegacy; +window.formatCustomerAddressLegacy = formatCustomerAddressLegacy; +window.formatCustomerPhonesLegacyLarger = formatCustomerPhonesLegacyLarger; +window.formatCustomerAddressLegacyLarger = formatCustomerAddressLegacyLarger; +window.showCustomerDetailsModal = showCustomerDetailsModal; \ No newline at end of file diff --git a/static/js/customers-tailwind.js b/static/js/customers-tailwind.js index 1c0d3af..0d654b3 100644 --- a/static/js/customers-tailwind.js +++ b/static/js/customers-tailwind.js @@ -61,8 +61,8 @@ function displayCustomers(customers) { View - @@ -524,6 +524,23 @@ async function saveCustomer() { return; } + // Double confirm for edits + if (isEditing) { + const confirmMessage = `Are you sure you want to update customer "${customerData.last}"? This will permanently modify the customer record.`; + const firstConfirm = confirm(confirmMessage); + + if (!firstConfirm) { + return; // User cancelled + } + + // Second confirmation + const secondConfirm = confirm('Please confirm again: Do you really want to save these changes? This action cannot be undone.'); + + if (!secondConfirm) { + return; // User cancelled on second confirmation + } + } + let response; if (isEditing) { // Update existing customer diff --git a/templates/customers.html b/templates/customers.html index eb37e51..4a90249 100644 --- a/templates/customers.html +++ b/templates/customers.html @@ -278,6 +278,7 @@ +