Loading dashboard...

\n );\n }\n\n return (\n

\n {/* Stats Overview */}\n

{stats.totalBills}

Total Bills

{stats.pendingBills}

Pending

{stats.paidBills}

Paid

${stats.totalRevenue.toFixed(2)}

Total Revenue

${stats.outstandingAmount.toFixed(2)}

Outstanding

\n\n {/* Navigation Tabs */}\n

\n setActiveTab('bills')}\n className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${\n activeTab === 'bills'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n 📋 Bills ({bills.length})\n \n {\n setActiveTab('create');\n setEditingBill(null);\n }}\n className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${\n activeTab === 'create'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n ➕ {editingBill ? 'Edit Bill' : 'Create Bill'}\n \n setActiveTab('customers')}\n className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${\n activeTab === 'customers'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n 👥 Customers ({customers.length})\n \n

\n\n {/* Tab Content */}\n

\n {activeTab === 'bills' && (\n \n )}\n \n {activeTab === 'create' && (\n \n )}\n \n {activeTab === 'customers' && (\n \n )}\n

\n );\n}\n\n// Customer List Component\nfunction CustomerList({ customers, token, onCustomerUpdated }: {\n customers: Customer[];\n token: string;\n onCustomerUpdated: () => void;\n}) {\n const [showForm, setShowForm] = useState(false);\n const [editingCustomer, setEditingCustomer] = useState(null);\n const [formData, setFormData] = useState({\n name: '',\n email: '',\n phone: '',\n address: ''\n });\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n try {\n const url = editingCustomer \n ? `/api/bills/customers/${editingCustomer.id}`\n : '/api/bills/customers';\n \n const method = editingCustomer ? 'PUT' : 'POST';\n \n const response = await fetch(url, {\n method,\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${token}`\n },\n body: JSON.stringify(formData)\n });\n\n if (response.ok) {\n onCustomerUpdated();\n setShowForm(false);\n setEditingCustomer(null);\n setFormData({ name: '', email: '', phone: '', address: '' });\n }\n } catch (error) {\n console.error('Error saving customer:', error);\n }\n };\n\n const handleEdit = (customer: Customer) => {\n setEditingCustomer(customer);\n setFormData({\n name: customer.name,\n email: customer.email,\n phone: customer.phone,\n address: customer.address\n });\n setShowForm(true);\n };\n\n const handleCancel = () => {\n setShowForm(false);\n setEditingCustomer(null);\n setFormData({ name: '', email: '', phone: '', address: '' });\n };\n\n return (\n

Customer Management

\n setShowForm(true)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors\"\n >\n Add Customer\n \n

\n\n {showForm && (\n

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

\n Name\n setFormData(prev => ({ ...prev, name: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n Email\n setFormData(prev => ({ ...prev, email: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n Phone\n setFormData(prev => ({ ...prev, phone: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n Address\n setFormData(prev => ({ ...prev, address: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n {editingCustomer ? 'Update' : 'Create'} Customer\n \n \n Cancel\n \n

\n )}\n\n

\n \n \n \n \n \n \n \n \n \n \n \n {customers.map((customer) => (\n \n \n \n \n \n \n \n ))}\n \n

\n Name\n	\n Email\n	\n Phone\n	\n Address\n	\n Actions\n
\n {customer.name}\n	\n {customer.email}\n	\n {customer.phone}\n	\n {customer.address}\n	\n handleEdit(customer)}\n className=\"text-blue-600 hover:text-blue-900 transition-colors\"\n >\n Edit\n \n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/Sujal5/c/code/frontend/components/AdminDashboard.tsx","extension","actionData","errors"]