hotswap/delphi-database
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

progress on customer data

Browse Source
This commit is contained in:
HotSwapp
2025-08-12 12:45:54 -05:00
parent c76b68d009
commit acc5155bf7
3 changed files with 499 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
templates/customers.html
View File

@@ -278,6 +278,7 @@
</div>
<script src="/static/js/customers-tailwind.js?v=12"></script>
<script src="/static/js/customers-modern.js?v=1"></script>
<script>
// Initialize on page load
@@ -437,33 +438,68 @@ function displayPhoneSearchResults(results) {
results.forEach(result => {
const row = document.createElement('tr');
row.className = 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors duration-150';
row.className = 'group border-b border-neutral-100 dark:border-neutral-700/50 hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-indigo-50/30 dark:hover:from-blue-900/10 dark:hover:to-indigo-900/10 transition-all duration-200 cursor-pointer';
// Store customer ID as data attribute to avoid escaping issues
row.dataset.customerId = result.customer.id;
row.innerHTML = `
<td class=\"px-3 py-2 whitespace-nowrap\">
<div class=\"text-sm font-mono text-neutral-900 dark:text-neutral-100 truncate\" title=\"${result.customer.id}\">${result.customer.id}</div>
<td class=\"px-4 py-4 customer-cell\">
<div class=\"text-sm font-mono font-semibold text-neutral-900 dark:text-neutral-100 bg-gradient-to-br from-neutral-50 to-neutral-100 dark:from-neutral-800 dark:to-neutral-700 px-3 py-2 rounded-lg shadow-sm border border-neutral-200/50 dark:border-neutral-600/50 group-hover:shadow-md transition-shadow\" title=\"${result.customer.id}\">${result.customer.id}</div>
</td>
<td class=\"px-3 py-2 whitespace-nowrap\">
<div class=\"text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate\" title=\"${result.customer.name}\">${result.customer.name}</div>
<td class=\"px-4 py-4 customer-cell\">
<div class=\"text-sm font-semibold text-neutral-900 dark:text-neutral-100 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors\" title=\"${result.customer.name}\">${result.customer.name}</div>
</td>
<td class=\"px-3 py-2 whitespace-nowrap\">
<span class="text-neutral-400 dark:text-neutral-500">-</span>
<td class=\"px-4 py-4 customer-cell\">
<span class="text-neutral-400 dark:text-neutral-500 text-sm font-medium">-</span>
</td>
<td class=\"px-3 py-2 whitespace-nowrap text-sm text-neutral-900 dark:text-neutral-100 truncate\" title=\"${result.customer.city}, ${result.customer.state}\">
${result.customer.city}, ${result.customer.state}
<td class=\"px-4 py-4 customer-cell\">
<div class=\"text-sm font-medium text-neutral-900 dark:text-neutral-100\" title=\"${result.customer.city}, ${result.customer.state}\">
${result.customer.city}, ${result.customer.state}
</div>
</td>
<td class=\"px-3 py-2 whitespace-nowrap text-sm text-neutral-900 dark:text-neutral-100 truncate\" title=\"${result.location}: ${result.phone}\">
<div class="font-semibold text-warning-600 dark:text-warning-400">${result.location}: ${result.phone}</div>
<td class=\"px-4 py-4 customer-cell\">
<div class=\"text-sm font-mono font-medium text-neutral-900 dark:text-neutral-100\" title=\"${result.location}: ${result.phone}\">
<div class="font-semibold text-warning-600 dark:text-warning-400">${result.location}: ${result.phone}</div>
</div>
</td>
<td class=\"px-3 py-2 whitespace-nowrap\">
<span class="text-neutral-400 dark:text-neutral-500">-</span>
<td class=\"px-4 py-4 customer-cell\">
<span class="text-neutral-400 dark:text-neutral-500 text-sm font-medium">-</span>
</td>
<td class=\"px-3 py-2 whitespace-nowrap text-right text-sm font-medium\">
<button onclick="editCustomer('${result.customer.id}')" class="inline-flex items-center gap-1 px-3 py-1.5 bg-primary-600 text-white hover:bg-primary-700 rounded-lg transition-colors duration-200 text-xs">
<i class="fa-solid fa-pencil"></i>
<span>Edit</span>
</button>
<td class=\"px-4 py-4 text-right\">
<div class=\"flex items-center justify-end space-x-2 opacity-70 group-hover:opacity-100 transition-opacity\">
<button class=\"view-phone-result-btn inline-flex items-center px-3 py-2 bg-gradient-to-r from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-600 text-slate-700 dark:text-slate-200 hover:from-slate-200 hover:to-slate-300 dark:hover:from-slate-600 dark:hover:to-slate-500 rounded-lg text-sm font-semibold transition-all duration-200 shadow-sm hover:shadow-md border border-slate-300/50 dark:border-slate-500/50\">
<i class=\"fa-solid fa-eye mr-2\"></i>
View
</button>
<button class=\"edit-phone-result-btn inline-flex items-center px-3 py-2 bg-gradient-to-r from-blue-600 to-blue-700 dark:from-blue-700 dark:to-blue-800 text-white hover:from-blue-700 hover:to-blue-800 dark:hover:from-blue-600 dark:hover:to-blue-700 rounded-lg text-sm font-semibold transition-all duration-200 shadow-sm hover:shadow-md\">
<i class=\"fa-solid fa-pencil mr-2\"></i>
Edit
</button>
</div>
</td>
`;
// Add event listeners for clickable row (same as main customer table)
const customerCells = row.querySelectorAll('.customer-cell');
customerCells.forEach(cell => {
cell.addEventListener('click', () => viewCustomer(result.customer.id));
});
// Add event listener for the view button
const viewBtn = row.querySelector('.view-phone-result-btn');
viewBtn.addEventListener('click', (e) => {
e.stopPropagation();
viewCustomer(result.customer.id);
});
// Add event listener for the edit button to avoid backslash escaping issues
const editBtn = row.querySelector('.edit-phone-result-btn');
editBtn.addEventListener('click', (e) => {
e.stopPropagation();
editCustomer(result.customer.id);
});
tbody.appendChild(row);
});
}