- ([]);
+ const [coachLocations, setCoachLocations] = useState([]);
+ const [coachProfiles, setCoachProfiles] = useState>({});
const [search, setSearch] = useState("");
const [location, setLocation] = useState("");
const [loading, setLoading] = useState(false);
@@ -235,6 +394,51 @@ const MyCoachesPage = () => {
[debouncedLocation, debouncedSearch],
);
+ const coachLocationsById = useMemo(() => {
+ return coachLocations.reduce>((acc, location) => {
+ const coachId = pickLocationCoachId(location);
+ if (!coachId && coachId !== 0) return acc;
+ const key = String(coachId);
+ acc[key] = acc[key] ? [...acc[key], location] : [location];
+ return acc;
+ }, {});
+ }, [coachLocations]);
+
+ const rosterBreakdown = useMemo(() => {
+ const ratingValues: number[] = [];
+ const rateValues: number[] = [];
+ const categorized: Record = {
+ active: [],
+ pending: [],
+ inactive: [],
+ };
+
+ coaches.forEach((coach) => {
+ const status = resolveStatus(coach);
+ const category = getStatusCategory(status);
+ const ratingValue = resolveRatingValue(coach);
+ const rateValue = resolveHourlyRateValue(coach);
+
+ if (ratingValue !== null) ratingValues.push(ratingValue);
+ if (rateValue !== null) rateValues.push(rateValue);
+
+ categorized[category].push(coach);
+ });
+
+ const averageRating = ratingValues.length
+ ? (ratingValues.reduce((total, value) => total + value, 0) / ratingValues.length).toFixed(1)
+ : null;
+ const averageRate = rateValues.length
+ ? `$${Math.round(rateValues.reduce((total, value) => total + value, 0) / rateValues.length)}`
+ : null;
+
+ return {
+ ...categorized,
+ averageRating,
+ averageRate,
+ };
+ }, [coaches]);
+
const fetchCoaches = useCallback(async () => {
setLoading(true);
setError(null);
@@ -254,31 +458,133 @@ const MyCoachesPage = () => {
}
}, [debouncedLocation, debouncedSearch]);
+ const fetchCoachLocations = useCallback(async () => {
+ try {
+ const data = await getCoachLocation({ page: 1, limit: 100 });
+ setCoachLocations(data);
+ } catch (err) {
+ console.error("Failed to load coach locations", err);
+ }
+ }, []);
+
+ useEffect(() => {
+ const coachIds = Array.from(
+ new Set(
+ coaches
+ .map((coach) => pickCoachId(coach))
+ .filter((id) => id !== undefined && id !== null)
+ .map(String)
+ .map((value) => value.trim())
+ .filter(Boolean),
+ ),
+ );
+
+ const missingIds = coachIds.filter((id) => !coachProfiles[id]);
+ if (!missingIds.length) return;
+
+ let cancelled = false;
+
+ const loadProfiles = async () => {
+ const entries = await Promise.all(
+ missingIds.map(async (id) => {
+ try {
+ const profile = await fetchCoachProfile(id);
+ return { id, profile };
+ } catch (error) {
+ console.error(`Failed to fetch profile for coach ${id}`, error);
+ return null;
+ }
+ }),
+ );
+
+ if (cancelled) return;
+
+ setCoachProfiles((prev) => {
+ const next = { ...prev };
+ entries.forEach((entry) => {
+ if (entry?.profile) {
+ next[entry.id] = entry.profile;
+ }
+ });
+ return next;
+ });
+ };
+
+ void loadProfiles();
+
+ return () => {
+ cancelled = true;
+ };
+ }, [coachProfiles, coaches]);
+
useEffect(() => {
fetchCoaches();
- }, [fetchCoaches]);
+ fetchCoachLocations();
+ }, [fetchCoachLocations, fetchCoaches]);
const showEmpty = !loading && !error && coaches.length === 0;
return (
- 
-
-
+
+
-
+ {name}
- {status &&
+
+ {hourlyRate && (
+
+ {hourlyRate}
+ /hr
+
+ )}
+
+
+
-
- {(about || locations.length > 0) && (
-
+
- {hourlyRate &&
+
+ {name}
+ + ● + +
{rating && (
- {distance}
}
{hourlyRate}
}
-
{about &&
- )}
+ {about}
} {locations.length > 0 && (
@@ -202,13 +354,18 @@ const MyCoachCard = ({ coach }: { coach: PlayerCoach }) => {
)}
{coachId && (
-
- View profile
-
+ <>
+
+ View profile
+
+
+ Book lesson
+
+
)}
@@ -222,6 +379,8 @@ const buildQueryParams = (search: string, location: string) => ({
const MyCoachesPage = () => {
const [coaches, setCoaches] = useState
-
-
-
+
Roster
+
+
+
+ Roster
My coaches
- Keep track of the coaches you are working with and jump to their profiles quickly. + See every coach you work with, check their status, and jump into booking without leaving this page.
+
+
+ Active coaches · {rosterBreakdown.active.length}
+
+
+ Pending approvals · {rosterBreakdown.pending.length}
+
+
+ Total in roster · {coaches.length}
+
+
+
+
-
+
+
+
+
+ Roster health
+Stay connected
+
+
+
+ Average rating
+{rosterBreakdown.averageRating ?? "—"}
+Across coaches with ratings
+
+
+ Typical rate
+{rosterBreakdown.averageRate ?? "—"}
+Per hour on average
+
+
+ Confirmed
+{rosterBreakdown.active.length}
+Ready for booking
+
+
+ Pending
+{rosterBreakdown.pending.length}
+Waiting for confirmation
+
@@ -325,11 +631,97 @@ const MyCoachesPage = () => {
)}
{!loading && !error && coaches.length > 0 && (
-
+
+ )}
+
+ {rosterBreakdown.pending.length > 0 && (
+
+
+ )}
+
+ {rosterBreakdown.inactive.length > 0 && (
+
+
+ )}
+
)}
- {coaches.map((coach) => (
-
+ <>
+ {rosterBreakdown.active.length > 0 && (
+
+
+
+
+ Active
+Active coaches
+Confirmed coaches you can book and message right away.
+
+ {rosterBreakdown.active.map((coach) => {
+ const coachId = pickCoachId(coach);
+ const linkedLocations = coachId ? coachLocationsById[String(coachId)] ?? [] : [];
+ const profileLocations = coachId
+ ? deriveProfileLocations(coachProfiles[String(coachId)])
+ : [];
+
+ return (
+
+
+
+
+
+ Pending
+Awaiting approval
+These coaches still need to confirm before you can book with them.
+
+ {rosterBreakdown.pending.map((coach) => {
+ const coachId = pickCoachId(coach);
+ const linkedLocations = coachId ? coachLocationsById[String(coachId)] ?? [] : [];
+ const profileLocations = coachId
+ ? deriveProfileLocations(coachProfiles[String(coachId)])
+ : [];
+
+ return (
+
+
+
+
+
+ Inactive
+Archived coaches
+Coaches with cancelled or inactive connections stay here for reference.
+
+ {rosterBreakdown.inactive.map((coach) => {
+ const coachId = pickCoachId(coach);
+ const linkedLocations = coachId ? coachLocationsById[String(coachId)] ?? [] : [];
+ const profileLocations = coachId
+ ? deriveProfileLocations(coachProfiles[String(coachId)])
+ : [];
+
+ return (
+
+