\n {/* Header */}\n

Member Dashboard

\n setShowAddForm(!showAddForm)}\n className=\"btn-primary\"\n >\n ➕ Add Member\n \n \n 🔄 Refresh\n \n

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

Add New Member

\n \n Name *\n \n setNewMember({ ...newMember, name: e.target.value })}\n className=\"w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500\"\n />\n

\n \n Email *\n \n setNewMember({ ...newMember, email: e.target.value })}\n className=\"w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500\"\n />\n

\n \n Phone\n \n setNewMember({ ...newMember, phone: e.target.value })}\n className=\"w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500\"\n />\n

\n \n Membership Type\n \n setNewMember({ ...newMember, membership_type: e.target.value as any })}\n className=\"w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500\"\n >\n \n \n \n \n

\n \n {loading ? 'Adding...' : 'Add Member'}\n \n setShowAddForm(false)}\n className=\"btn-secondary\"\n >\n Cancel\n \n

\n )}\n\n

\n {/* Members List */}\n

Members ({members.length})

\n {members.map((member) => (\n setSelectedMember(member)}\n className={`p-4 border-b cursor-pointer hover:bg-gray-50 transition-colors ${\n selectedMember?.id === member.id ? 'bg-blue-50 border-blue-200' : ''\n }`}\n >\n

{member.name}

{member.email}

\n {member.phone && (\n

{member.phone}

\n )}\n

\n \n {member.membership_type}\n \n

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

\n ))}\n

\n\n {/* Member Details */}\n

\n {selectedMember ? `${selectedMember.name}'s Bookings` : 'Select a Member'}\n

\n {!selectedMember ? (\n

\n Click on a member to view their bookings\n

\n ) : loading ? (\n

Loading bookings...

\n ) : memberBookings.length === 0 ? (\n

\n No upcoming bookings\n

\n ) : (\n

\n {memberBookings.map((booking) => (\n \n

\n {booking.class.name}\n

\n {booking.class.instructor}\n

\n 📅 {formatDate(booking.class.date)}\n ⏰ {formatTime(booking.class.start_time)}\n

\n \n {booking.status}\n \n

\n ))}\n

\n )}\n

\n \n \n );\n}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/newbienate/my-first-val/code/frontend/components/MemberDashboard.tsx","extension","actionData","errors"]