\n );\n }\n\n const activeStaff = staff.filter(s => s.active);\n const inactiveStaff = staff.filter(s => !s.active);\n\n return (\n

\n {/* Header */}\n

Staff Management

\n setShowCreateForm(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 Staff Member\n \n

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

\n 👥\n

Active Staff

{activeStaff.length}

\n\n

\n 😴\n

Inactive Staff

{inactiveStaff.length}

\n\n

\n 🏢\n

Departments

\n {new Set(activeStaff.map(s => s.department)).size}\n

\n\n {/* Active Staff */}\n

Active Staff Members

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

\n 👥\n

No active staff members

Add your first staff member to get started.

\n ) : (\n

\n {activeStaff.map(member => (\n

\n \n {member.name.split(' ').map(n => n[0]).join('')}\n \n

{member.name}

{member.role}

\n \n

\n 📧\n {member.email}\n

\n 🏢\n {member.department}\n

\n 📅\n Joined {new Date(member.created_at).toLocaleDateString()}\n

\n \n

\n handleEdit(member)}\n className=\"flex-1 bg-blue-50 text-blue-600 px-3 py-1 rounded text-sm hover:bg-blue-100 transition-colors\"\n >\n Edit\n \n handleDeactivate(member.id)}\n className=\"flex-1 bg-red-50 text-red-600 px-3 py-1 rounded text-sm hover:bg-red-100 transition-colors\"\n >\n Deactivate\n \n

\n ))}\n

\n )}\n

\n\n {/* Inactive Staff */}\n {inactiveStaff.length > 0 && (\n

Inactive Staff Members

\n {inactiveStaff.map(member => (\n

\n \n {member.name.split(' ').map(n => n[0]).join('')}\n \n

{member.name}

{member.role} • {member.department}

\n handleActivate(member.id)}\n className=\"bg-green-50 text-green-600 px-3 py-1 rounded text-sm hover:bg-green-100 transition-colors\"\n >\n Reactivate\n \n

\n ))}\n

\n )}\n\n {/* Create/Edit Staff Modal */}\n {showCreateForm && (\n

\n {editingStaff ? 'Edit Staff Member' : 'Add New Staff Member'}\n

\n \n

\n Name *\n setFormData({...formData, 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 setFormData({...formData, email: e.target.value})}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n />\n

\n \n

\n Role *\n setFormData({...formData, role: e.target.value})}\n placeholder=\"e.g., Manager, Developer, Sales Rep\"\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n />\n

\n \n

\n Department *\n setFormData({...formData, department: e.target.value})}\n placeholder=\"e.g., Operations, Technology, Sales\"\n className=\"w-full border border-gray-300 rounded-md px-3 py-2\"\n />\n

\n \n

\n setFormData({...formData, active: e.target.checked})}\n className=\"mr-2\"\n />\n Active\n

\n \n

\n \n Cancel\n \n \n {editingStaff ? 'Update' : 'Create'} Staff Member\n \n

\n )}\n

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