Client Management

Total Clients

+0 this month

Verified

Active

Repeat Clients

All Clients

Client	Contact	Verification	Last Appointment	Status	Actions

First Name

Last Name

Email Address

Phone Number

Address

City

State

ZIP Code

Identity Verification

Verify identity now using BlueNotary

Send verification link to client

Notes

// Validate address if provided if (address && city && state && zip) { try { const validationResult = await validateAddress(address, city, state, zip); if (!validationResult.valid) { const result = await Swal.fire({ title: 'Address Validation', html: ` The provided address might not be valid. Would you like to use the suggested address?

Current:
${address}
${city}, ${state} ${zip}

Suggested:
${validationResult.suggested.address}
${validationResult.suggested.city}, ${validationResult.suggested.state} ${validationResult.suggested.zip} `, icon: 'warning', showCancelButton: true, confirmButtonText: 'Use Suggested', cancelButtonText: 'Keep Current' }); if (result.isConfirmed) { document.getElementById('address').value = validationResult.suggested.address; document.getElementById('city').value = validationResult.suggested.city; document.getElementById('state').value = validationResult.suggested.state; document.getElementById('zip').value = validationResult.suggested.zip; return; // Let user review the changes before saving } } } catch (error) { console.error('Address validation error:', error); const result = await Swal.fire({ title: 'Address Validation Error', text: 'Unable to validate address. Would you like to continue anyway?', icon: 'warning', showCancelButton: true, confirmButtonText: 'Continue', cancelButtonText: 'Cancel' }); if (!result.isConfirmed) return; } } const newClient = { first_name, last_name, email, phone, address, city, state, zip, verification_status: document.getElementById('verifyNow').checked ? "verified" : "pending", status: "active" }; try { const response = await fetch(`${API_URL}/clients`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newClient), }); if (!response.ok) throw new Error("Failed to save client"); Swal.fire("Success", "Client added!", "success"); fetchClients(); // Refresh the list const modal = bootstrap.Modal.getInstance(document.getElementById('newClientModal')); modal.hide(); // Clear form document.getElementById('firstName').value = ''; document.getElementById('lastName').value = ''; document.getElementById('email').value = ''; document.getElementById('phone').value = ''; document.getElementById('verifyNow').checked = false; } catch (error) { console.error('Error adding client:', error); Swal.fire("Error", "Could not save client", "error"); } } // Filter clients function filterClients() { const searchTerm = document.getElementById('clientSearch').value.toLowerCase(); if (!searchTerm) { renderClientList(); return; } const filteredClients = clients.filter(client => { return ( client.name.toLowerCase().includes(searchTerm) || client.email.toLowerCase().includes(searchTerm) || client.phone.toLowerCase().includes(searchTerm) || client.id.toLowerCase().includes(searchTerm) ); }); renderClientList(filteredClients); } // Update summary cards function updateSummaryCards(clients) { if (!clients || clients.length === 0) { document.getElementById('total-clients-count').textContent = '0'; document.querySelector('#total-clients-count + .badge').textContent = '+0 this month'; document.getElementById('verified-clients-count').textContent = '0'; document.querySelector('#verified-clients-count + .badge').textContent = '0%'; document.getElementById('active-clients-count').textContent = '0'; document.querySelector('#active-clients-count + .badge').textContent = '0%'; document.getElementById('repeat-clients-count').textContent = '0'; document.querySelector('#repeat-clients-count + .badge').textContent = '0%'; return; } // Update total clients document.getElementById('total-clients-count').textContent = clients.length; document.querySelector('#total-clients-count + .badge').textContent = `+${clients.filter(c => { const createdDate = new Date(c.created_at); const now = new Date(); return createdDate.getMonth() === now.getMonth() && createdDate.getFullYear() === now.getFullYear(); }).length} this month`; // Update verified clients const verifiedCount = clients.filter(c => c.verification_status === 'verified').length; document.getElementById('verified-clients-count').textContent = verifiedCount; document.querySelector('#verified-clients-count + .badge').textContent = `${Math.round((verifiedCount / clients.length) * 100)}%`; // Update active clients const activeCount = clients.filter(c => c.status === 'active').length; document.getElementById('active-clients-count').textContent = activeCount; document.querySelector('#active-clients-count + .badge').textContent = `${Math.round((activeCount / clients.length) * 100)}%`; // For now, set repeat clients to 0 since we don't have appointments data yet document.getElementById('repeat-clients-count').textContent = '0'; document.querySelector('#repeat-clients-count + .badge').textContent = '0%'; } // View client profile async function viewClientProfile(clientId) { try { const response = await fetch(`${API_URL}/clients/${clientId}`); if (!response.ok) throw new Error('Failed to fetch client profile'); const client = await response.json(); const name = `${client.first_name} ${client.last_name}`; Swal.fire({ title: name, html: `

Client ID: ${client.id}

Name: ${name}

Email: ${client.email}

Phone: ${client.phone}

Status: ${client.status}

Verification: ${client.verification_status} ${client.verification_status === 'verified' ? `(on ${new Date(client.created_at).toLocaleDateString()})` : ''}

Created: ${new Date(client.created_at).toLocaleString()}

`, confirmButtonColor: '#2c3e50' }); } catch (error) { console.error('Error loading client profile:', error); Swal.fire('Error', 'Could not load client profile', 'error'); } } // Send message to client function sendMessageToClient(clientId) { const client = clients.find(c => c.id === clientId); if (!client) return; Swal.fire({ title: `Message ${client.name}`, html: `

`, showCancelButton: true, confirmButtonColor: '#2c3e50', cancelButtonColor: '#6c757d', confirmButtonText: 'Send Message' }).then((result) => { if (result.isConfirmed) { Swal.fire( 'Message Sent!', `Your message has been sent to ${client.name}.`, 'success' ); } }); } // Create new appointment function createNewAppointment(clientId) { const client = clients.find(c => c.id === clientId); if (!client) return; Swal.fire({ title: `New Appointment with ${client.name}`, html: `

Appointment Type

Date & Time

`, showCancelButton: true, confirmButtonColor: '#2c3e50', cancelButtonColor: '#6c757d', confirmButtonText: 'Schedule Appointment' }).then((result) => { if (result.isConfirmed) { // Update client's last appointment const appointmentType = document.querySelector('.swal2-select').value; const appointmentDate = document.querySelector('.swal2-input').value; client.lastAppointment = new Date(appointmentDate).toLocaleString(); client.service = appointmentType; // Refresh the client list renderClientList(); Swal.fire( 'Appointment Scheduled!', `New appointment with ${client.name} has been scheduled.`, 'success' ); } }); } async function deleteClient(clientId) { try { const response = await fetch(`https://www.faststamp.pro/clients/${clientId}`, { method: 'DELETE', }); if (!response.ok) throw new Error("Failed to delete"); fetchClients(); // Refresh list } catch (error) { Swal.fire("Error", "Could not delete client", "error"); } } // Initialize the application when DOM is loaded document.addEventListener('DOMContentLoaded', async () => { try { // Add event listener for Save Client button document.getElementById('clientForm').addEventListener('submit', async (e) => { e.preventDefault(); await addNewClient(); }); await fetchClients(); // Add event listeners document.getElementById('clientSearch')?.addEventListener('input', filterClients); document.getElementById('statusFilter')?.addEventListener('change', filterClients); document.getElementById('verificationFilter')?.addEventListener('change', filterClients); // Add event listeners to new client form document.getElementById('newClientForm')?.addEventListener('submit', async (e) => { e.preventDefault(); await addNewClient(); }); } catch (error) { console.error('Error initializing application:', error); Swal.fire('Error', 'Could not initialize application', 'error'); } });

MENU