Client Management

\n Manage your clients and their follow-up workflows.\n

\n \n 🔄 Refresh\n \n setShowAddForm(true)}\n className=\"bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 flex items-center\"\n >\n ➕ Add Client\n \n

\n\n {/* Add Client Form */}\n {showAddForm && (\n

Add New Client

\n \n {error && (\n

⚠️

{error}

\n )}\n\n

\n \n Client Name *\n \n setFormData({ ...formData, name: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"John Doe\"\n />\n

\n\n

\n \n Email Address *\n \n setFormData({ ...formData, email: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"john@example.com\"\n />\n

\n\n

\n \n Phone Number\n \n setFormData({ ...formData, phone: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"+1 (555) 123-4567\"\n />\n

\n\n

\n \n Company\n \n setFormData({ ...formData, company: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"Acme Corp\"\n />\n

\n\n

\n \n Service Delivered Date *\n \n setFormData({ ...formData, serviceDeliveredAt: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n

\n \n Workflow Template *\n \n setFormData({ ...formData, workflowId: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n >\n \n {workflows.filter(w => w.isActive).map(workflow => (\n \n ))}\n \n

\n\n

\n \n {saving ? (\n <>\n

\n Adding...\n \n ) : (\n 'Add Client'\n )}\n \n {\n setShowAddForm(false);\n setError(null);\n }}\n className=\"px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50\"\n >\n Cancel\n \n

\n )}\n\n {/* Clients List */}\n

\n {clients.length === 0 ? (\n

👥

No clients yet

Add your first client to start managing follow-ups.

\n setShowAddForm(true)}\n className=\"bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600\"\n >\n Add Your First Client\n \n

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {clients.map((client) => (\n \n \n \n \n \n \n \n \n ))}\n \n

\n Client\n	\n Contact\n	\n Service Date\n	\n Workflow\n	\n Status\n	\n Actions\n
\n \n {client.name} \n {client.company && (\n {client.company} \n )}\n \n	\n {client.email} \n {client.phone && (\n {client.phone} \n )}\n	\n {formatDate(client.serviceDeliveredAt)}\n	\n {getWorkflowName(client.workflowId)} \n Step {client.currentStepIndex + 1} \n	\n \n {client.status}\n \n	\n \n {client.status === 'active' && (\n updateClientStatus(client.id, 'paused')}\n className=\"text-yellow-600 hover:text-yellow-900\"\n >\n ⏸️ Pause\n \n )}\n {client.status === 'paused' && (\n updateClientStatus(client.id, 'active')}\n className=\"text-green-600 hover:text-green-900\"\n >\n ▶️ Resume\n \n )}\n {client.status !== 'completed' && (\n updateClientStatus(client.id, 'completed')}\n className=\"text-blue-600 hover:text-blue-900\"\n >\n ✅ Complete\n \n )}\n \n

\n )}\n

\n\n {/* Summary Stats */}\n {clients.length > 0 && (\n

\n {clients.filter(c => c.status === 'active').length}\n

Active Clients

\n {clients.filter(c => c.status === 'completed').length}\n

Completed

\n {clients.filter(c => c.status === 'paused').length}\n

Paused

\n )}\n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/ampomah/untitled-2883/code/frontend/components/ClientManager.tsx","extension","actionData","errors"]