-
👥
-
No Customers Yet
-
- Customer data will appear here once the customer platform API is connected.
-
+ )}
+
+ {/* Search */}
+
+ setSearch(e.target.value)}
+ />
+
+
+ {/* Error */}
+ {error && (
+
+ {error}
- ) : (
-
+ )}
+
+ {/* Customers Table */}
+
+
- | Name |
+ Customer |
Email |
+ Company |
Plan |
Domains |
- Containers |
Status |
- Joined |
+ Created |
Actions |
- {customers.map((customer) => (
-
- | {customer.name} |
- {customer.email} |
-
- {customer.plan}
- |
- {customer.domains_count || 0} |
- {customer.containers_count || 0} |
-
-
- {customer.is_active ? 'Active' : 'Inactive'}
-
- |
-
- {new Date(customer.created_at).toLocaleDateString()}
- |
-
-
+ {loading ? (
+ |
+ |
+
|
- ))}
+ ) : customers.length === 0 ? (
+
+ |
+ 👥
+ No Customers Found
+
+ {search ? 'Try a different search term' : 'Customer data will appear here'}
+
+ |
+
+ ) : (
+ customers.map((customer) => (
+
+ | {customer.full_name} |
+ {customer.email} |
+ {customer.company_name || '-'} |
+ {getPlanBadge(customer.subscription_plan)} |
+ {customer.domain_count || 0} / {customer.max_domains} |
+ {getStatusBadge(customer.is_active, customer.subscription_status)} |
+ {new Date(customer.created_at).toLocaleDateString()} |
+
+
+ |
+
+ ))
+ )}
+
+
+ {/* Plan Update Modal */}
+ {showPlanModal && selectedCustomer && (
+
{
+ setShowPlanModal(false);
+ setSelectedCustomer(null);
+ }}
+ onUpdate={handleUpdatePlan}
+ />
)}
);
};
+// Plan Update Modal Component
+const PlanModal = ({ customer, onClose, onUpdate }) => {
+ const [formData, setFormData] = useState({
+ subscription_plan: customer.subscription_plan || 'free',
+ max_domains: customer.max_domains || 5,
+ max_containers: customer.max_containers || 3,
+ subscription_status: customer.subscription_status || 'active'
+ });
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ onUpdate(customer.id, formData);
+ };
+
+ return (
+
+
+
Update Plan - {customer.full_name}
+
+
+
+
-
Account Settings
+ {/* Header with back button */}
+
+
Account Settings
+
+ ←
+ Back to Dashboard
+
+
{/* Tabs */}