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

\n {/* Header */}\n

Client Management & Follow-ups

\n setShowClientForm(true)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center\"\n >\n ➕ Add Client\n \n setShowFollowupForm(true)}\n className=\"bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors flex items-center\"\n >\n 📅 Schedule Follow-up\n \n

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

\n 🤝\n

Total Clients

{clients.length}

\n\n

\n ✅\n

Active Clients

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

\n\n

\n 🎯\n

Prospects

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

\n\n

\n ⏰\n

Due Follow-ups

{dueFollowups.length}

\n\n {/* Due Follow-ups Alert */}\n {dueFollowups.length > 0 && (\n

\n ⚠️\n

\n {dueFollowups.length} follow-up{dueFollowups.length !== 1 ? 's' : ''} due\n

\n You have follow-ups that need attention\n

\n \n Send All Email Follow-ups\n \n

\n )}\n\n {/* Tabs */}\n

\n setActiveTab('clients')}\n className={`py-2 px-1 border-b-2 font-medium text-sm ${\n activeTab === 'clients'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n Clients ({clients.length})\n \n setActiveTab('followups')}\n className={`py-2 px-1 border-b-2 font-medium text-sm ${\n activeTab === 'followups'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n Due Follow-ups ({dueFollowups.length})\n \n

\n\n {/* Clients Tab */}\n {activeTab === 'clients' && (\n

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

\n 🤝\n

No clients yet

Add your first client to get started.

\n ) : (\n

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

{client.name}

\n {client.company && (\n

{client.company}

\n )}\n

\n \n {client.status}\n \n

\n \n

\n {client.email && (\n

\n 📧\n {client.email}\n

\n )}\n {client.phone && (\n

\n 📞\n {client.phone}\n

\n )}\n

\n 📅\n Last contact: {new Date(client.last_contact).toLocaleDateString()}\n

\n {client.pending_followups > 0 && (\n

\n ⏰\n {client.pending_followups} pending follow-up{client.pending_followups !== 1 ? 's' : ''}\n

\n )}\n

\n \n

\n {\n setSelectedClient(client.id);\n setFollowupFormData({\n ...followupFormData,\n client_id: client.id.toString()\n });\n setShowFollowupForm(true);\n }}\n className=\"w-full bg-blue-50 text-blue-600 px-3 py-2 rounded text-sm hover:bg-blue-100 transition-colors\"\n >\n Schedule Follow-up\n \n

\n ))}\n

\n )}\n

\n )}\n\n {/* Follow-ups Tab */}\n {activeTab === 'followups' && (\n

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

\n 📅\n

No due follow-ups

All caught up! Schedule new follow-ups as needed.

\n ) : (\n

\n {dueFollowups.map(followup => (\n

{followup.subject}

\n \n {followup.type}\n \n

\n \n

\n Client: {(followup as any).client_name}\n

\n \n {followup.message && (\n

{followup.message}

\n )}\n \n

\n Scheduled: {new Date(followup.scheduled_date).toLocaleString()}\n

\n \n

\n {followup.type === 'email' && (\n handleSendFollowup(followup.id)}\n className=\"bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700 transition-colors\"\n >\n Send Email\n \n )}\n handleCompleteFollowup(followup.id)}\n className=\"bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700 transition-colors\"\n >\n Mark Complete\n \n

\n ))}\n

\n )}\n

\n )}\n\n {/* Create Client Modal */}\n {showClientForm && (\n

Add New Client

\n \n

\n Name *\n setClientFormData({...clientFormData, name: e.target.value})}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n />\n

\n \n

\n Email\n setClientFormData({...clientFormData, email: e.target.value})}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n />\n

\n \n

\n Phone\n setClientFormData({...clientFormData, phone: e.target.value})}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n />\n

\n \n

\n Status\n setClientFormData({...clientFormData, status: e.target.value})}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n >\n \n \n \n \n

\n \n

\n Company\n setClientFormData({...clientFormData, company: e.target.value})}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n />\n

\n \n

\n Notes\n setClientFormData({...clientFormData, notes: e.target.value})}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 h-20\"\n />\n

\n \n

\n setShowClientForm(false)}\n className=\"px-4 py-2 text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50\"\n >\n Cancel\n \n \n Create Client\n \n

\n )}\n\n {/* Create Follow-up Modal */}\n {showFollowupForm && (\n

Schedule Follow-up

\n \n

\n Client *\n setFollowupFormData({...followupFormData, client_id: e.target.value})}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n >\n \n {clients.map(client => (\n \n ))}\n \n

\n \n

\n Type\n setFollowupFormData({...followupFormData, type: e.target.value})}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n >\n \n \n \n \n

\n \n

\n Scheduled Date *\n setFollowupFormData({...followupFormData, scheduled_date: e.target.value})}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n />\n

\n \n

\n Subject *\n setFollowupFormData({...followupFormData, subject: e.target.value})}\n placeholder=\"e.g., Monthly check-in, Project update\"\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n />\n

\n \n

\n \n {followupFormData.type === 'email' ? 'Email Message' : 'Notes'}\n \n setFollowupFormData({...followupFormData, message: e.target.value})}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 h-24\"\n placeholder={\n followupFormData.type === 'email' \n ? \"Email content that will be sent to the client...\"\n : \"Notes about this follow-up...\"\n }\n />\n

\n \n

\n setShowFollowupForm(false)}\n className=\"px-4 py-2 text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50\"\n >\n Cancel\n \n \n Schedule Follow-up\n \n

\n )}\n

\n );\n}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/amak/Bizapp/code/frontend/components/ClientFollowup.tsx","extension","actionData","errors"]