544 lines
33 KiB
HTML
544 lines
33 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Customers (Rolodex) - Delphi Database{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center justify-center w-10 h-10 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded-xl">
|
|
<i class="fa-solid fa-address-book text-lg"></i>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100">Customers (Rolodex)</h1>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button id="addCustomerBtn" class="flex items-center gap-2 px-4 py-2 bg-success-600 text-white hover:bg-success-700 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-circle-plus"></i>
|
|
<span>New Customer</span>
|
|
<kbd class="hidden sm:inline-block ml-2 px-1.5 py-0.5 bg-success-700 rounded text-xs">Ctrl+N</kbd>
|
|
</button>
|
|
<button id="statsBtn" class="flex items-center gap-2 px-4 py-2 bg-info-600 text-white hover:bg-info-700 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-chart-line"></i>
|
|
<span>Statistics</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search and Filter Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div class="lg:col-span-2">
|
|
<label for="searchInput" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Search Customers</label>
|
|
<div class="relative">
|
|
<input type="text" id="searchInput" class="w-full pl-10 pr-4 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" placeholder="Search by name, ID, city, email...">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<i class="fa-solid fa-magnifying-glass text-neutral-400 dark:text-neutral-500"></i>
|
|
</div>
|
|
<button id="searchBtn" class="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-primary-600 dark:text-neutral-500 dark:hover:text-primary-400 transition-colors">
|
|
<i class="fa-solid fa-arrow-right text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="groupFilter" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Group Filter</label>
|
|
<select id="groupFilter" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
<option value="">All Groups</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="stateFilter" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">State Filter</label>
|
|
<select id="stateFilter" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
<option value="">All States</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-700">
|
|
<div class="max-w-md">
|
|
<label for="phoneSearch" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Phone Search</label>
|
|
<div class="relative">
|
|
<input type="text" id="phoneSearch" class="w-full pl-10 pr-4 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" placeholder="Search by phone number...">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<i class="fa-solid fa-phone text-neutral-400 dark:text-neutral-500"></i>
|
|
</div>
|
|
<button id="phoneSearchBtn" class="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-primary-600 dark:text-neutral-500 dark:hover:text-primary-400 transition-colors">
|
|
<i class="fa-solid fa-arrow-right text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer List -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm text-left text-neutral-900 dark:text-neutral-100" id="customersTable">
|
|
<thead class="bg-neutral-50 dark:bg-neutral-800/50">
|
|
<tr class="border-b border-neutral-200 dark:border-neutral-700">
|
|
<th class="px-6 py-4 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">ID</th>
|
|
<th class="px-6 py-4 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Name</th>
|
|
<th class="px-6 py-4 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Group</th>
|
|
<th class="px-6 py-4 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Location</th>
|
|
<th class="px-6 py-4 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Phone</th>
|
|
<th class="px-6 py-4 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Email</th>
|
|
<th class="px-6 py-4 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="customersTableBody" class="divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
<!-- Customer rows will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div id="emptyState" class="hidden flex flex-col items-center justify-center py-12 text-center">
|
|
<div class="w-16 h-16 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center mb-4">
|
|
<i class="fa-solid fa-users text-2xl text-neutral-400 dark:text-neutral-500"></i>
|
|
</div>
|
|
<h3 class="text-lg font-medium text-neutral-900 dark:text-neutral-100 mb-2">No customers found</h3>
|
|
<p class="text-neutral-500 dark:text-neutral-400 mb-4">Get started by adding your first customer.</p>
|
|
<button onclick="showAddCustomerModal()" class="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-circle-plus"></i>
|
|
<span>Add Customer</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50">
|
|
<nav aria-label="Customer pagination">
|
|
<div id="pagination" class="flex items-center justify-center space-x-1">
|
|
<!-- Pagination will be populated here -->
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer Modal -->
|
|
<div id="customerModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
|
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl max-w-6xl w-full max-h-screen overflow-hidden">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h2 id="customerModalLabel" class="text-xl font-semibold text-neutral-900 dark:text-neutral-100">Customer Details</h2>
|
|
<button onclick="closeCustomerModal()" class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 transition-colors">
|
|
<i class="fa-solid fa-xmark text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="px-6 py-4 max-h-96 overflow-y-auto scrollbar-thin">
|
|
<form id="customerForm">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
<!-- Personal Information -->
|
|
<div class="space-y-4">
|
|
<h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">Personal Information</h3>
|
|
<div>
|
|
<label for="customerId" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Customer ID <span class="text-danger-600">*</span></label>
|
|
<input type="text" id="customerId" required class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div>
|
|
<label for="last" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Last Name/Company <span class="text-danger-600">*</span></label>
|
|
<input type="text" id="last" required class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="first" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">First Name</label>
|
|
<input type="text" id="first" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div>
|
|
<label for="middle" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Middle Name</label>
|
|
<input type="text" id="middle" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<label for="prefix" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Prefix</label>
|
|
<input type="text" id="prefix" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div>
|
|
<label for="suffix" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Suffix</label>
|
|
<input type="text" id="suffix" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div>
|
|
<label for="title" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Title</label>
|
|
<input type="text" id="title" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="group" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Group</label>
|
|
<input type="text" id="group" list="groupList" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
<datalist id="groupList"></datalist>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address Information -->
|
|
<div class="space-y-4">
|
|
<h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">Address</h3>
|
|
<div>
|
|
<label for="a1" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Address Line 1 / Firm</label>
|
|
<input type="text" id="a1" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div>
|
|
<label for="a2" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Address Line 2</label>
|
|
<input type="text" id="a2" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div>
|
|
<label for="a3" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Address Line 3</label>
|
|
<input type="text" id="a3" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="col-span-2">
|
|
<label for="city" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">City</label>
|
|
<input type="text" id="city" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div>
|
|
<label for="abrev" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">State</label>
|
|
<input type="text" id="abrev" list="stateList" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
<datalist id="stateList"></datalist>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="zip" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Zip Code</label>
|
|
<input type="text" id="zip" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Information -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">Contact Information</h3>
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Email</label>
|
|
<input type="email" id="email" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div id="phoneList" class="space-y-4 mt-4"></div>
|
|
<button type="button" id="addPhoneBtn" class="mt-2 flex items-center gap-2 px-3 py-2 bg-success-600 text-white hover:bg-success-700 rounded-lg transition-colors duration-200 text-sm">
|
|
<i class="fa-solid fa-circle-plus"></i>
|
|
Add Phone
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Additional Information -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
<div class="space-y-4">
|
|
<h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">Additional Details</h3>
|
|
<div>
|
|
<label for="dob" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Date of Birth</label>
|
|
<input type="date" id="dob" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div>
|
|
<label for="ss_number" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Social Security Number</label>
|
|
<input type="text" id="ss_number" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
<div>
|
|
<label for="legal_status" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Legal Status</label>
|
|
<input type="text" id="legal_status" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="memo" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Notes</label>
|
|
<textarea id="memo" rows="6" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"></textarea>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50">
|
|
<button onclick="closeCustomerModal()" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200">
|
|
Cancel
|
|
</button>
|
|
<button id="deleteCustomerBtn" class="hidden px-4 py-2 bg-danger-600 text-white hover:bg-danger-700 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-trash"></i>
|
|
<span>Delete</span>
|
|
</button>
|
|
<button id="saveCustomerBtn" class="px-4 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg transition-colors duration-200">
|
|
<i class="fa-regular fa-circle-check"></i>
|
|
<span>Save</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Modal -->
|
|
<div id="statsModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
|
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl max-w-2xl w-full">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100">Customer Database Statistics</h2>
|
|
<button onclick="closeStatsModal()" class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 transition-colors">
|
|
<i class="fa-solid fa-xmark text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div id="statsContent" class="px-6 py-4">
|
|
<!-- Statistics will be loaded here -->
|
|
</div>
|
|
<div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50">
|
|
<button onclick="closeStatsModal()" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/customers-tailwind.js"></script>
|
|
|
|
<script>
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check authentication first
|
|
const token = localStorage.getItem('auth_token');
|
|
if (!token) {
|
|
window.location.href = '/login';
|
|
return;
|
|
}
|
|
|
|
loadCustomers();
|
|
loadGroups();
|
|
loadStates();
|
|
setupEventListeners();
|
|
});
|
|
|
|
function setupEventListeners() {
|
|
// Search functionality
|
|
document.getElementById('searchBtn').addEventListener('click', performSearch);
|
|
document.getElementById('searchInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') performSearch();
|
|
});
|
|
|
|
// Phone search
|
|
document.getElementById('phoneSearchBtn').addEventListener('click', performPhoneSearch);
|
|
document.getElementById('phoneSearch').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') performPhoneSearch();
|
|
});
|
|
|
|
// Modal buttons
|
|
document.getElementById('addCustomerBtn').addEventListener('click', showAddCustomerModal);
|
|
document.getElementById('saveCustomerBtn').addEventListener('click', saveCustomer);
|
|
document.getElementById('deleteCustomerBtn').addEventListener('click', deleteCustomer);
|
|
document.getElementById('statsBtn').addEventListener('click', showStats);
|
|
|
|
// Form validation
|
|
const customerIdInput = document.getElementById('customerId');
|
|
if (customerIdInput) {
|
|
customerIdInput.addEventListener('blur', validateCustomerId);
|
|
}
|
|
}
|
|
|
|
// Modal functions
|
|
function closeStatsModal() {
|
|
document.getElementById('statsModal').classList.add('hidden');
|
|
}
|
|
|
|
// Load customers with enhanced formatting
|
|
async function loadCustomers(page = 0, search = '') {
|
|
try {
|
|
const params = new URLSearchParams({
|
|
skip: page * 50,
|
|
limit: 50
|
|
});
|
|
|
|
if (search) params.append('search', search);
|
|
|
|
const response = await fetch(`/api/customers/?${params}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to load customers');
|
|
|
|
const customers = await response.json();
|
|
displayCustomers(customers);
|
|
|
|
} catch (error) {
|
|
console.error('Error loading customers:', error);
|
|
showAlert('Error loading customers: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function performSearch() {
|
|
currentSearch = document.getElementById('searchInput').value;
|
|
currentPage = 0;
|
|
loadCustomers(currentPage, currentSearch);
|
|
}
|
|
|
|
async function performPhoneSearch() {
|
|
const phone = document.getElementById('phoneSearch').value;
|
|
if (!phone) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/customers/search/phone?phone=${encodeURIComponent(phone)}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Phone search failed');
|
|
|
|
const results = await response.json();
|
|
displayPhoneSearchResults(results);
|
|
|
|
} catch (error) {
|
|
console.error('Phone search error:', error);
|
|
showAlert('Phone search failed: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function displayPhoneSearchResults(results) {
|
|
const tbody = document.getElementById('customersTableBody');
|
|
const emptyState = document.getElementById('emptyState');
|
|
|
|
tbody.innerHTML = '';
|
|
|
|
if (!results || results.length === 0) {
|
|
emptyState.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
emptyState.classList.add('hidden');
|
|
|
|
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.innerHTML = `
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">${result.customer.id}</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">${result.customer.name}</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="text-neutral-400 dark:text-neutral-500">-</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-900 dark:text-neutral-100">
|
|
${result.customer.city}, ${result.customer.state}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-900 dark:text-neutral-100">
|
|
<div class="font-semibold text-warning-600 dark:text-warning-400">${result.location}: ${result.phone}</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="text-neutral-400 dark:text-neutral-500">-</span>
|
|
</td>
|
|
<td class="px-6 py-4 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>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
async function loadGroups() {
|
|
try {
|
|
const response = await fetch('/api/customers/groups', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const groups = await response.json();
|
|
const select = document.getElementById('groupFilter');
|
|
groups.forEach(g => {
|
|
const option = document.createElement('option');
|
|
option.value = g.group;
|
|
option.textContent = g.group;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading groups:', error);
|
|
}
|
|
}
|
|
|
|
async function loadStates() {
|
|
try {
|
|
const response = await fetch('/api/customers/states', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const states = await response.json();
|
|
const select = document.getElementById('stateFilter');
|
|
states.forEach(s => {
|
|
const option = document.createElement('option');
|
|
option.value = s.state;
|
|
option.textContent = s.state;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading states:', error);
|
|
}
|
|
}
|
|
|
|
async function showStats() {
|
|
try {
|
|
const response = await fetch('/api/customers/stats', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to load statistics');
|
|
|
|
const stats = await response.json();
|
|
displayStats(stats);
|
|
|
|
} catch (error) {
|
|
console.error('Error loading stats:', error);
|
|
showAlert('Error loading statistics: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function displayStats(stats) {
|
|
const content = document.getElementById('statsContent');
|
|
content.innerHTML = `
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-3">Database Overview</h3>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between">
|
|
<span class="text-neutral-600 dark:text-neutral-400">Total Customers:</span>
|
|
<span class="font-semibold text-neutral-900 dark:text-neutral-100">${stats.total_customers}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-neutral-600 dark:text-neutral-400">Phone Numbers:</span>
|
|
<span class="font-semibold text-neutral-900 dark:text-neutral-100">${stats.total_phone_numbers}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-neutral-600 dark:text-neutral-400">With Email:</span>
|
|
<span class="font-semibold text-neutral-900 dark:text-neutral-100">${stats.customers_with_email}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-3">Group Breakdown</h3>
|
|
<div class="space-y-2">
|
|
${stats.group_breakdown.map(g => `
|
|
<div class="flex justify-between">
|
|
<span class="text-neutral-600 dark:text-neutral-400">${g.group}:</span>
|
|
<span class="font-semibold text-neutral-900 dark:text-neutral-100">${g.count}</span>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('statsModal').classList.remove('hidden');
|
|
}
|
|
|
|
// Placeholder functions for now
|
|
function editCustomer(customerId) {
|
|
showAlert('Edit customer feature coming soon...', 'info');
|
|
}
|
|
|
|
function viewCustomer(customerId) {
|
|
showAlert('View customer feature coming soon...', 'info');
|
|
}
|
|
|
|
function saveCustomer() {
|
|
showAlert('Save customer feature coming soon...', 'info');
|
|
}
|
|
|
|
function deleteCustomer() {
|
|
showAlert('Delete customer feature coming soon...', 'info');
|
|
}
|
|
|
|
function validateCustomerId() {
|
|
// Placeholder
|
|
}
|
|
</script>
|
|
{% endblock %} |