Skip to main content

​
Overview

BoxApp provides a complete member management system to handle athlete profiles, memberships, emergency contacts, medical history, and waivers.

Member Profiles

Store contact info, emergency contacts, and medical history

Role Management

Assign roles: Athletes, Coaches, Receptionists, or Admins

Membership Tracking

View active memberships and plan details

Waiver Management

Track digital waiver signatures for liability protection

​
Adding New Members

You can add members through the Members page with automatic account creation:

​
Step-by-Step Process

  1. Navigate to Members page
  2. Click “Add Member” button (Members.tsx:322-326)
  3. Fill in member details:
    • First name and last name
    • Email address (required)
    • Role (athlete, coach, receptionist)
    • Medical history (optional)
    • Emergency contact information
When you create a member, BoxApp automatically creates a user account with the default password BoxApp2026!. Members should change this on first login.

​
Member Creation Code Flow

// Members.tsx:214-223
const { data, error } = await supabase.functions.invoke('create-member', {
  body: {
    email: newMember.email,
    password: 'BoxApp2026!',
    first_name: newMember.firstName,
    last_name: newMember.lastName,
    role_id: newMember.roleId,
    box_id: currentBox?.id
  }
});

​
Member Roles

Standard gym members who can:
  • View class schedules
  • Book sessions
  • Track their WOD results
  • Submit session feedback
  • View their membership status
Instructors who can:
  • Manage class schedules
  • Create and publish WODs
  • View athlete attendance
  • All athlete permissions
Front desk staff who can:
  • Add and edit members
  • Assign memberships
  • View schedules
  • Limited admin access
Gym owners/managers with full access to:
  • All member management features
  • Billing and invoicing
  • Competition management
  • Box configuration

​
Member Details View

Click on any member to view their complete profile (Members.tsx:692-764):

​
Contact Information

  • Full name and email
  • Join date
  • Current status (active/inactive/on hold)

​
Medical & Safety

// Members.tsx:751-758
<div className="medical-background">
  <h3>Medical Background</h3>
  <p>{selectedMember?.medical_history || 'No medical history on file'}</p>
</div>

​
Emergency Contacts

  • Contact name
  • Phone number

​
Waiver Status

Members with unsigned waivers are flagged with a red alert icon. Follow up to ensure compliance.

​
Membership Assignment

Assign or modify memberships directly from the member details: 
// Members.tsx:171-200
const handleQuickAssignPlan = async (memberId: string) => {
  const plan = plans.find((p: any) => p.id === selectedPlanId);
  const startDate = new Date();
  const endDate = new Date();
  endDate.setDate(endDate.getDate() + (plan?.duration_days || 30));

  const { error } = await supabase.from('memberships').insert([{
    athlete_id: memberId,
    user_id: memberId,
    plan_id: selectedPlanId,
    box_id: currentBox.id,
    status: 'active',
    start_date: startDate.toISOString(),
    end_date: endDate.toISOString()
  }]);
};
The system automatically calculates end dates based on the plan’s duration (typically 30 days).

​
Searching and Filtering

The member list supports real-time search: 
// Members.tsx:102-106
const filteredMembers = members.filter(member =>
  member.first_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
  member.last_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
  member.email.toLowerCase().includes(searchTerm.toLowerCase())
);

​
Password Reset

Admins can reset member passwords (Members.tsx:147-169):
  1. Navigate to member details
  2. Click “Reset Password”
  3. Confirm the action
Password is reset to 12345678. Members will be required to change it on next login.
// Members.tsx:155-160
const { data, error } = await supabase.rpc('admin_reset_password', {
  target_user_id: memberId
});

​
Editing Member Information

Update member details through the edit dialog (Members.tsx:267-298):
  • Personal information (name)
  • Medical history
  • Emergency contacts
  • Role assignment
  • Status (active/inactive/on hold)

​
Member Status Badges

// Members.tsx:302-309
const getStatusVariant = (status: string) => {
  switch (status) {
    case 'active': return 'default';
    case 'inactive': return 'destructive';
    case 'on_hold': return 'secondary';
    default: return 'outline';
  }
};

Active

Member has valid membership and can attend classes

Inactive

Membership expired or manually deactivated

On Hold

Temporary freeze - membership preserved but classes blocked

​
Pagination

The member list displays 8 members per page with navigation controls (Members.tsx:108-112): 
const itemsPerPage = 8;
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentMembers = filteredMembers.slice(indexOfFirstItem, indexOfLastItem);
const totalPages = Math.ceil(filteredMembers.length / itemsPerPage);

​
Best Practices

  1. Collect medical history upfront: Essential for coach awareness and safety
  2. Verify emergency contacts: Test contact numbers and update regularly
  3. Enforce waiver signing: Don’t allow class attendance without signed waivers
  4. Regular data audits: Clean up inactive members quarterly
  5. Use status changes: Set members “on hold” instead of deleting during temporary absences

Build docs developers (and LLMs) love

Get started for freeTalk to us