diff --git a/frontend/src/pages/Customers.jsx b/frontend/src/pages/Customers.jsx index 49ad7e6..0204950 100644 --- a/frontend/src/pages/Customers.jsx +++ b/frontend/src/pages/Customers.jsx @@ -14,6 +14,9 @@ const Customers = () => { const [showPlanModal, setShowPlanModal] = useState(false); const [showEditModal, setShowEditModal] = useState(false); const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); + const [showToast, setShowToast] = useState(false); + const [toastMessage, setToastMessage] = useState(''); + const [toastType, setToastType] = useState('success'); // success, error useEffect(() => { fetchCustomers(); @@ -43,16 +46,30 @@ const Customers = () => { } }; + const showSuccessToast = (message) => { + setToastMessage(message); + setToastType('success'); + setShowToast(true); + setTimeout(() => setShowToast(false), 3000); + }; + + const showErrorToast = (message) => { + setToastMessage(message); + setToastType('error'); + setShowToast(true); + setTimeout(() => setShowToast(false), 5000); + }; + const handleUpdatePlan = async (customerId, planData) => { try { await customerService.updateCustomerPlan(customerId, planData); fetchCustomers(); setShowPlanModal(false); setSelectedCustomer(null); - alert('Plan updated successfully!'); + showSuccessToast('Plan updated successfully!'); } catch (err) { console.error('Failed to update plan:', err); - alert('Failed to update plan: ' + (err.response?.data?.message || err.message)); + showErrorToast('Failed to update plan: ' + (err.response?.data?.message || err.message)); } }; @@ -62,10 +79,10 @@ const Customers = () => { fetchCustomers(); setShowEditModal(false); setSelectedCustomer(null); - alert('Customer updated successfully!'); + showSuccessToast('Customer updated successfully!'); } catch (err) { console.error('Failed to update customer:', err); - alert('Failed to update customer: ' + (err.response?.data?.message || err.message)); + showErrorToast('Failed to update customer: ' + (err.response?.data?.message || err.message)); } }; @@ -75,36 +92,32 @@ const Customers = () => { fetchCustomers(); setShowDeleteConfirm(false); setSelectedCustomer(null); - alert('Customer deleted successfully!'); + showSuccessToast('Customer deleted successfully!'); } catch (err) { console.error('Failed to delete customer:', err); - alert('Failed to delete customer: ' + (err.response?.data?.message || err.message)); + showErrorToast('Failed to delete customer: ' + (err.response?.data?.message || err.message)); } }; const handleSuspendCustomer = async (customerId) => { - if (!confirm('Are you sure you want to suspend this customer?')) return; - try { await customerService.suspendCustomer(customerId); fetchCustomers(); - alert('Customer suspended successfully!'); + showSuccessToast('Customer suspended successfully!'); } catch (err) { console.error('Failed to suspend customer:', err); - alert('Failed to suspend customer: ' + (err.response?.data?.message || err.message)); + showErrorToast('Failed to suspend customer: ' + (err.response?.data?.message || err.message)); } }; const handleActivateCustomer = async (customerId) => { - if (!confirm('Are you sure you want to activate this customer?')) return; - try { await customerService.activateCustomer(customerId); fetchCustomers(); - alert('Customer activated successfully!'); + showSuccessToast('Customer activated successfully!'); } catch (err) { console.error('Failed to activate customer:', err); - alert('Failed to activate customer: ' + (err.response?.data?.message || err.message)); + showErrorToast('Failed to activate customer: ' + (err.response?.data?.message || err.message)); } }; @@ -315,6 +328,28 @@ const Customers = () => { onConfirm={handleDeleteCustomer} /> )} + + {/* Toast Notification */} + {showToast && ( +
+
+ {toastType === 'success' ? ( + + + + ) : ( + + + + )} + {toastMessage} +
+
+ )} ); };