Customer Management

\n setShowAddModal(true)}\n className=\"btn btn-primary\"\n >\n 👤 Add Customer\n \n

\n\n {/* Message */}\n {message && (\n

\n {message.text}\n setMessage(null)}\n className=\"float-right text-lg leading-none\"\n >\n ×\n \n

\n )}\n\n {/* Customer Stats */}\n

Total Customers

{customers.length}

👥

\n\n

Total Revenue

\n {formatCurrency(customers.reduce((sum, c) => sum + c.total_spent, 0))}\n

💰

\n\n

Avg. Spent

\n {formatCurrency(\n customers.length > 0 \n ? customers.reduce((sum, c) => sum + c.total_spent, 0) / customers.length\n : 0\n )}\n

📊

\n\n

Loyalty Points

\n {customers.reduce((sum, c) => sum + c.loyalty_points, 0).toLocaleString()}\n

⭐

\n\n {/* Search */}\n

\n Search Customers\n setSearchTerm(e.target.value)}\n className=\"form-input\"\n />\n

\n\n {/* Customers Table */}\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {filteredCustomers.map((customer) => {\n const tier = getLoyaltyTier(customer.loyalty_points);\n return (\n \n \n \n \n \n \n \n \n \n );\n })}\n \n

Customer	Contact	Loyalty Tier	Points	Total Spent	Joined	Actions
\n \n {customer.name} \n {customer.address && (\n {customer.address} \n )}\n \n	\n \n {customer.email && (\n {customer.email} \n )}\n {customer.phone && (\n {customer.phone} \n )}\n {!customer.email && !customer.phone && (\n No contact info\n )}\n \n	\n \n {tier.name}\n \n	\n \n {customer.loyalty_points}\n {\n const points = prompt('Add/subtract loyalty points (use negative for subtraction):', '0');\n if (points !== null && !isNaN(Number(points))) {\n handleUpdateLoyaltyPoints(customer.id, Number(points));\n }\n }}\n className=\"text-blue-600 hover:text-blue-800 text-sm\"\n >\n ✏️\n \n \n	\n {formatCurrency(customer.total_spent)}\n	{formatDate(customer.created_at)}	\n \n setEditingCustomer(customer)}\n className=\"text-blue-600 hover:text-blue-800\"\n >\n ✏️\n \n \n

\n\n {filteredCustomers.length === 0 && (\n

\n {searchTerm ? 'No customers found matching your search.' : 'No customers added yet.'}\n

\n )}\n\n {/* Add Customer Modal */}\n {showAddModal && (\n setShowAddModal(false)}\n onSubmit={handleAddCustomer}\n />\n )}\n\n {/* Edit Customer Modal */}\n {editingCustomer && (\n setEditingCustomer(null)}\n onSubmit={async (data) => {\n // Note: We don't have an update customer endpoint in the backend yet\n // For now, just close the modal\n setEditingCustomer(null);\n setMessage({ type: 'success', text: 'Customer information updated!' });\n }}\n />\n )}\n

\n );\n}\n\ninterface CustomerModalProps {\n customer?: Customer;\n onClose: () => void;\n onSubmit: (data: CreateCustomerRequest) => void;\n}\n\nfunction CustomerModal({ customer, onClose, onSubmit }: CustomerModalProps) {\n const [formData, setFormData] = useState({\n name: customer?.name || '',\n email: customer?.email || '',\n phone: customer?.phone || '',\n address: customer?.address || ''\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSubmit(formData);\n };\n\n return (\n

\n {customer ? 'Edit Customer' : 'Add New Customer'}\n

\n \n

\n\n

\n \n Customer Name *\n \n setFormData({ ...formData, name: e.target.value })}\n className=\"form-input\"\n placeholder=\"Enter customer name\"\n />\n

\n\n

\n \n Email Address\n \n setFormData({ ...formData, email: e.target.value })}\n className=\"form-input\"\n placeholder=\"customer@example.com\"\n />\n

\n\n

\n \n Phone Number\n \n setFormData({ ...formData, phone: e.target.value })}\n className=\"form-input\"\n placeholder=\"(555) 123-4567\"\n />\n

\n\n

\n \n Address\n \n setFormData({ ...formData, address: e.target.value })}\n className=\"form-input\"\n rows={3}\n placeholder=\"Customer address\"\n />\n

\n\n

\n \n Cancel\n \n \n {customer ? 'Update Customer' : 'Add Customer'}\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Deedeesworld/untitled-7517/code/frontend/components/Customers.tsx","extension","actionData","errors"]