create-gufran-expo-app 2.0.4 → 2.0.6

package/template/src/screens/teams/MyTeamDetailsScreen.tsx

@@ -1,979 +0,0 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { View, Text, StyleSheet, FlatList, StatusBar, Platform, TouchableOpacity, Image, ScrollView, ActivityIndicator } from 'react-native';
-import { MyTeamDetailsScreenProps } from '../../types/navigation';
-import { Strings, theme } from '../../constants';
-import { moderateScale, width } from '../../utils/scaling';
-import { Fonts } from '../../constants/Fonts';
-import SVG from '../../assets/icons';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { Button } from '../../components/common';
-import { useTeamDetails } from '../../services/mainServices';
-import { getApiErrorInfo, useGetImageUrl } from '../../services/authService';
-import ToastManager from '../../components/common/ToastManager';
-
-export const MyTeamDetailsScreen: React.FC<MyTeamDetailsScreenProps> = ({ navigation, route }) => {
-    // const { club, selectedClub } = route?.params ?? {};
-    // const teamId = club?.teamId;
-
-
-    const { club, selectedClub, selectedMember }: any = route?.params ?? {};
-
-    const teamDetail = route?.params ?? {}
-    const teamId = club?.teamId;
-    console.log("teamDetail===>>>", teamDetail);
-
-
-    const { data, isLoading, error, refetch } = useTeamDetails(teamId);
-
-    const TeamDetails: any = data?.data?.data;
-    console.log("Team Details:", route?.params);
-
-    const getImageUrlMutation = useGetImageUrl();
-
-    const [teamImageUrl, setTeamImageUrl] = useState<string>('');
-    const [memberImages, setMemberImages] = useState<{ [key: string]: string }>({});
-    const [imageLoading, setImageLoading] = useState<{ [key: string]: boolean }>({});
-    const [activeTab, setActiveTab] = useState<'details' | 'schedule'>('details');
-
-    // Function to get team profile image URL
-    const handleGetTeamImageUrl = () => {
-        if (!TeamDetails?.teamDetail?.teamProfileImage) return;
-
-        const teamImageName = TeamDetails.teamDetail.teamProfileImage;
-
-        // Check if it contains a folder path
-        let containerName = 'teams'; // default container
-        let blobName = teamImageName;
-
-        if (teamImageName.includes('/')) {
-            const [folder, blob] = teamImageName.split('/');
-            containerName = folder;
-            blobName = blob;
-        }
-
-        setImageLoading(prev => ({ ...prev, teamProfile: true }));
-
-        getImageUrlMutation.mutate({
-            containerName: containerName,
-            blobName: blobName
-        }, {
-            onSuccess: (response) => {
-                const imageUrl = response?.data?.data?.url;
-                setTeamImageUrl(imageUrl);
-                console.log('Team Image URL response', response.data);
-                setImageLoading(prev => ({ ...prev, teamProfile: false }));
-            },
-            onError: (error) => {
-                const errorInfo = getApiErrorInfo(error);
-                ToastManager.error(errorInfo?.message);
-                console.error('Failed to get team image URL:', error);
-                setTeamImageUrl('');
-                setImageLoading(prev => ({ ...prev, teamProfile: false }));
-            }
-        });
-    };
-
-    // Function to get member image URL
-    const handleGetMemberImageUrl = (memberImage: string, memberId: string) => {
-        if (!memberImage) return;
-
-        let containerName = 'members'; // default container
-        let blobName = memberImage;
-
-        if (memberImage.includes('/')) {
-            const [folder, blob] = memberImage.split('/');
-            containerName = folder;
-            blobName = blob;
-        }
-
-        setImageLoading(prev => ({ ...prev, [memberId]: true }));
-
-        getImageUrlMutation.mutate({
-            containerName: containerName,
-            blobName: blobName
-        }, {
-            onSuccess: (response) => {
-                const imageUrl = response?.data?.data?.url;
-                setMemberImages(prev => ({ ...prev, [memberId]: imageUrl }));
-                setImageLoading(prev => ({ ...prev, [memberId]: false }));
-            },
-            onError: (error) => {
-                const errorInfo = getApiErrorInfo(error);
-                console.error('Failed to get member image URL:', error);
-                setImageLoading(prev => ({ ...prev, [memberId]: false }));
-            }
-        });
-    };
-
-    // Effect to load team profile image
-    useEffect(() => {
-        if (TeamDetails?.teamDetail?.teamProfileImage) {
-            handleGetTeamImageUrl();
-        }
-    }, [TeamDetails?.teamDetail?.teamProfileImage]);
-
-    // Effect to load member images
-    useEffect(() => {
-        if (TeamDetails?.memberDetailList) {
-            console.log('Processing member images:', TeamDetails.memberDetailList);
-            TeamDetails.memberDetailList.forEach((member: any) => {
-                console.log('Member:', member.memberName, 'Image:', member.memberImage, 'Has image:', member.memberImage && member.memberImage.trim() !== '');
-                if (member.memberImage && member.memberImage.trim() !== '') {
-                    handleGetMemberImageUrl(member.memberImage, member.memberId.toString());
-                }
-            });
-        }
-    }, [TeamDetails?.memberDetailList]);
-
-
-
-
-    // Function to generate date data for horizontal picker
-    const generateDateData = () => {
-        const dates = [];
-        const today = new Date();
-        const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-
-        // Generate 14 days (7 before and 7 after today)
-        for (let i = -7; i <= 7; i++) {
-            const date = new Date(today);
-            date.setDate(today.getDate() + i);
-
-            dates.push({
-                id: i,
-                date: date.getDate(),
-                month: date.getMonth() + 1,
-                dayName: dayNames[date.getDay()],
-                isToday: i === 0,
-                fullDate: date
-            });
-        }
-
-        return dates;
-    };
-
-    // Function to render date item
-    const renderDateItem = ({ item }: { item: any }) => {
-        return (
-            <TouchableOpacity style={[
-                styles.dateItem,
-                item.isToday && styles.activeDateItem
-            ]}>
-                <Text style={[
-                    styles.dateNumber,
-                    item.isToday && styles.activeDateText
-                ]}>
-                    {item.date}
-                </Text>
-                <Text style={[
-                    styles.dayName,
-                    item.isToday && styles.activeDateText
-                ]}>
-                    {item.dayName}
-                </Text>
-            </TouchableOpacity>
-        );
-    };
-
-    // Function to render individual player card
-    const renderPlayerCard = (player: any) => {
-
-        return (
-            <View key={player.memberId} style={styles.playerCard}>
-                {player?.memberImage ? (
-                    <Image
-                        source={{ uri: player?.memberImage }}
-                        style={styles.playerImage}
-                    />
-                ) : (
-                    <View style={styles.playerPlaceholder}>
-                        <SVG.emptyUser
-                            width={moderateScale(50)}
-                            height={moderateScale(50)}
-                        />
-                    </View>
-                )}
-                {/* {isLoadingMemberImage && (
-                    <View style={styles.memberImageLoader}>
-                        <ActivityIndicator 
-                            size="small" 
-                            color={theme.colors.appleGreen} 
-                        />
-                    </View>
-                )} */}
-                <View style={styles.playerNameOverlay}>
-                    <Text style={styles.playerName}>{player.memberName || 'Unknown Player'}</Text>
-                </View>
-            </View>
-        );
-    };
-
-    if (!club) {
-        return (
-            <View style={styles.container}>
-                <SafeAreaView style={styles.header}>
-                    <View style={styles.headerContent}>
-                        <TouchableOpacity onPress={() => navigation.goBack()}>
-                            <SVG.arrowLeft_white width={moderateScale(25)} height={moderateScale(25)} />
-                        </TouchableOpacity>
-                        <Text style={styles.headerTitle}>Team Details</Text>
-                    </View>
-                </SafeAreaView>
-                <View style={styles.errorContainer}>
-                    <Text style={styles.errorText}>No team data available</Text>
-                    <Button
-                        title="Go Back"
-                        onPress={() => navigation.goBack()}
-                        variant="primary"
-                        size="medium"
-                    />
-                </View>
-            </View>
-        );
-    }
-
-    return (
-        <SafeAreaView style={styles.container}>
-            <StatusBar
-                barStyle="light-content"
-                backgroundColor={theme.colors.blue}
-                translucent={Platform.OS === 'android' ? true : false}
-            />
-            {Platform.OS === 'ios' && <View style={styles.statusBarBackground} />}
-
-            <View style={styles.header}>
-                <View style={styles.headerTopRow}>
-
-                    <TouchableOpacity onPress={() => navigation.goBack()}>
-                        <SVG.arrowLeft_white width={moderateScale(25)} height={moderateScale(25)} />
-                    </TouchableOpacity>
-
-
-                    <View style={{ flexDirection: 'row' }}>
-                        <View style={styles.userConSty}>
-                            {!!selectedClub?.clubImage ? (
-                                <Image
-                                source={{ uri: selectedClub?.clubImage }} style={styles.userDetailsSty} resizeMode='cover' />
-                                // onLoadEnd={() => setIsLoading(false)}
-                                // onLoad={() => setIsLoading(true)}
-                                // onLoadStart={() => setIsLoading(true)}
-                            ) : (
-                                <View style={styles.placeholderLogoHeader}>
-                                    <SVG.UsersIcon width={moderateScale(20)} height={moderateScale(20)} />
-                                </View>
-                            )}
-                        </View>
-                        <Text style={styles.userNameSty}>{selectedClub?.clubName || 'Unknown Club'}</Text>
-                    </View>
-
-                </View>
-
-                {/* Club Image Centered */}
-                <View style={styles.centerImageContainer}>
-                    {TeamDetails?.teamDetail?.teamProfileImage ? (
-                        <Image
-                            source={{ uri: TeamDetails?.teamDetail?.teamProfileImage }}
-                            style={styles.centerClubImage}
-                        />
-                    ) : (
-                        <View style={styles.centerPlaceholderImage}>
-                            <SVG.emptyUser width={moderateScale(60)} height={moderateScale(60)} />
-                        </View>
-                    )}
-                </View>
-
-                {/* Club Name Centered */}
-                <View style={styles.centerTextContainer}>
-                    <Text style={styles.centerClubName} numberOfLines={2}>
-                        {TeamDetails?.teamDetail?.teamName || 'Unknown Team'}
-                    </Text>
-                </View>
-
-                {/* Total Members */}
-                <View style={styles.centerMemberInfo}>
-                    <View style={styles.totalMembersContainer}>
-                        <SVG.profileAppleGreen width={moderateScale(16)} height={moderateScale(16)} />
-                        <Text style={styles.totalMembersText}>
-                            {TeamDetails?.teamDetail?.totalMembers || 0} {(TeamDetails?.teamDetail?.totalMembers || 0) === 1 ? 'member' : 'members'}
-                        </Text>
-                    </View>
-                </View>
-
-                {/* Chat Button */}
-                <View style={styles.chatButtonContainer}>
-                    <TouchableOpacity style={styles.chatButton} onPress={() => {
-                        const navigationData = {
-                            team: club,
-                            selectedMember: selectedMember,
-                            selectedClub: selectedClub
-                        }
-                        navigation.navigate('ChatThreads', navigationData);
-                    }}>
-                        <SVG.chatAppleGreen width={moderateScale(18)} height={moderateScale(18)} color={theme.colors.appleGreen} />
-                        <Text style={styles.chatButtonText}>Chat</Text>
-                    </TouchableOpacity>
-                </View>
-            </View>
-
-            <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
-                {/* Tab Bar */}
-                <View style={styles.tabContainer}>
-                    <TouchableOpacity
-                        style={[styles.tabButton, activeTab === 'details' && styles.activeTabButton]}
-                        onPress={() => setActiveTab('details')}
-                    >
-                        <Text style={[styles.tabButtonText, activeTab === 'details' && styles.activeTabButtonText]}>
-                            Team Details
-                        </Text>
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                        style={[styles.tabButton, activeTab === 'schedule' && styles.activeTabButton]}
-                        onPress={() => setActiveTab('schedule')}
-                    >
-                        <Text style={[styles.tabButtonText, activeTab === 'schedule' && styles.activeTabButtonText]}>
-                            Team Schedule
-                        </Text>
-                    </TouchableOpacity>
-                </View>
-
-                {/* Tab Content */}
-                {activeTab === 'details' ? (
-                    <View style={styles.tabContent}>
-                        {/* Team Info Section */}
-                        <View style={styles.sectionContainer}>
-                            <Text style={styles.sectionHeading}>TEAM INFO</Text>
-                            <Text style={styles.sectionContent}>
-                                {TeamDetails?.teamDetail?.teamDescription || 'No team description available.'}
-                            </Text>
-                        </View>
-
-                        {/* Head Coach Section */}
-                        <View style={styles.sectionContainer}>
-                            <Text style={styles.sectionHeading}>HEAD COACH</Text>
-                            <View style={styles.coachCard}>
-                                <View style={styles.coachImageContainer}>
-                                    <SVG.HeadCoachIcon width={moderateScale(27)} height={moderateScale(28)} />
-                                </View>
-                                <View style={styles.coachDetails}>
-                                    <Text style={styles.coachName}>{TeamDetails?.teamDetail?.headCoachName || 'Unknown Coach'}</Text>
-                                    {/* <Text style={styles.coachTitle}>
-                                       ? Head Coach since {TeamDetails?.teamDetail?.createdOn ? new Date(TeamDetails.teamDetail.createdOn).getFullYear() : 'Unknown'}
-                                    </Text> */}
-                                </View>
-                            </View>
-                        </View>
-
-
-                        <View style={styles.sectionContainer}>
-                            <Text style={styles.sectionHeading}>TEAM PLAYERS</Text>
-                            {/* Team Players Grid */}
-                            <View style={styles.playersGrid}>
-                                <FlatList
-                                    data={TeamDetails?.memberDetailList || []}
-                                    renderItem={({ item }) => renderPlayerCard(item)}
-                                    numColumns={3}
-                                    keyExtractor={(item) => item?.memberId?.toString() || Math.random().toString()}
-                                    columnWrapperStyle={styles.playersRow}
-                                    scrollEnabled={false}
-                                    showsVerticalScrollIndicator={false}
-                                />
-                            </View>
-                        </View>
-                    </View>
-                ) : (
-                    <View style={styles.tabContent}>
-                        {/* Team Schedule Content */}
-                        <View style={styles.sectionContainer}>
-                            {/* <View style={styles.horizontalLine} />
-                            <FlatList
-                                data={generateDateData()}
-                                renderItem={renderDateItem}
-                                horizontal
-                                showsHorizontalScrollIndicator={false}
-                                keyExtractor={(item) => item.id.toString()}
-                                contentContainerStyle={styles.datePickerContainer}
-                                style={styles.datePicker}
-                            />
-                            <View style={styles.horizontalLine} /> */}
-                            <Text style={styles.sectionHeading}>UPCOMING MATCHES</Text>
-                            <Text style={styles.sectionContent}>
-                                Schedule Matches will be displayed here Soon.
-                            </Text>
-                        </View>
-                    </View>
-                )}
-            </ScrollView>
-        </SafeAreaView>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: theme.colors.blue,
-    },
-    statusBarBackground: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: Platform.OS === 'ios' ? 44 : 0,
-        backgroundColor: theme.colors.blue,
-        zIndex: 1000,
-    },
-    header: {
-        backgroundColor: theme.colors.blue,
-        paddingTop: theme.spacing.xs,
-        paddingBottom: theme.spacing.xl,
-
-    },
-    headerContent: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: theme.spacing.lg,
-        gap: theme.spacing.md,
-    },
-    headerTitleContainer: {
-        flex: 1,
-    },
-    headerTitle: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(22),
-        color: theme.colors.white,
-    },
-    headerSubtitle: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.white,
-        opacity: 0.8,
-        marginTop: moderateScale(2),
-    },
-    content: {
-        flex: 1,
-        backgroundColor: theme.colors.background,
-        borderTopLeftRadius: moderateScale(30),
-        borderTopRightRadius: moderateScale(30),
-        marginTop: -theme.spacing.md,
-    },
-    teamImageContainer: {
-        alignItems: 'center',
-        paddingVertical: theme.spacing.xl,
-        paddingTop: theme.spacing.xl,
-    },
-    userConSty: {
-        marginHorizontal: moderateScale(10),
-        width: moderateScale(30),
-        height: moderateScale(30),
-        borderRadius: moderateScale(15),
-        borderWidth: 1.5,
-        borderColor: theme.colors.imageBorder,
-        backgroundColor: theme.colors.background,
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    userNameSty: {
-        marginTop: moderateScale(5),
-        color: theme.colors.white,
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(15)
-    },
-    userDetailsSty: {
-        width: moderateScale(36),
-        height: moderateScale(36),
-        borderRadius: moderateScale(18),
-
-    },
-    userDefaultIcone: {
-        width: moderateScale(30),
-        height: moderateScale(30),
-        borderRadius: moderateScale(10)
-    },
-    placeholderLogoHeader: {
-        width: moderateScale(20),
-        height: moderateScale(20),
-        borderRadius: moderateScale(10),
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-
-    teamImage: {
-        width: moderateScale(120),
-        height: moderateScale(120),
-        borderRadius: moderateScale(60),
-        backgroundColor: theme.colors.background,
-    },
-    placeholderImage: {
-        width: moderateScale(120),
-        height: moderateScale(120),
-        borderRadius: moderateScale(60),
-        backgroundColor: theme.colors.border,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    teamInfoContainer: {
-        paddingHorizontal: theme.spacing.lg,
-        paddingBottom: theme.spacing.xl,
-    },
-    teamName: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(24),
-        color: theme.colors.text,
-        textAlign: 'center',
-        marginBottom: theme.spacing.lg,
-    },
-    infoRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-        paddingVertical: theme.spacing.sm,
-        borderBottomWidth: 1,
-        borderBottomColor: theme.colors.border,
-    },
-    infoLabel: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(14),
-        color: theme.colors.textSecondary,
-        flex: 1,
-    },
-    infoValue: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(14),
-        color: theme.colors.text,
-        flex: 2,
-        textAlign: 'right',
-    },
-    actionsContainer: {
-        paddingHorizontal: theme.spacing.lg,
-        paddingBottom: theme.spacing.xl,
-    },
-    actionButton: {
-        width: '100%',
-        marginBottom: theme.spacing.md,
-    },
-    secondaryActions: {
-        marginTop: theme.spacing.lg,
-        gap: theme.spacing.sm,
-    },
-    secondaryButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'transparent',
-        borderWidth: 1.5,
-        borderColor: theme.colors.primary,
-        borderRadius: theme.borderRadius.xxl,
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.lg,
-        gap: theme.spacing.sm,
-    },
-    secondaryButtonText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.md,
-        color: theme.colors.primary,
-    },
-    leaveButton: {
-        borderColor: theme.colors.error,
-    },
-    leaveButtonText: {
-        color: theme.colors.error,
-    },
-    errorContainer: {
-        flex: 1,
-        backgroundColor: theme.colors.background,
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingHorizontal: theme.spacing.lg,
-        borderTopLeftRadius: moderateScale(30),
-        borderTopRightRadius: moderateScale(30),
-    },
-    errorText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(16),
-        color: theme.colors.error,
-        textAlign: 'center',
-        marginBottom: theme.spacing.lg,
-    },
-    // Member Information Styles
-    memberInfoContainer: {
-        paddingHorizontal: theme.spacing.lg,
-        paddingBottom: theme.spacing.lg,
-    },
-    sectionTitle: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(18),
-        color: theme.colors.text,
-        marginBottom: theme.spacing.md,
-    },
-    memberCard: {
-        flexDirection: 'row',
-        backgroundColor: theme.colors.surface,
-        borderRadius: theme.borderRadius.lg,
-        padding: theme.spacing.md,
-        alignItems: 'center',
-    },
-    memberImageContainer: {
-        marginRight: theme.spacing.md,
-    },
-    memberImage: {
-        width: moderateScale(60),
-        height: moderateScale(60),
-        borderRadius: moderateScale(30),
-    },
-    placeholderMemberImage: {
-        width: moderateScale(60),
-        height: moderateScale(60),
-        borderRadius: moderateScale(30),
-        backgroundColor: theme.colors.border,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    memberDetails: {
-        flex: 1,
-    },
-    memberName: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(16),
-        color: theme.colors.text,
-        marginBottom: moderateScale(4),
-    },
-    memberRelation: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(14),
-        color: theme.colors.textSecondary,
-        marginBottom: moderateScale(2),
-    },
-    memberBirthDate: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(12),
-        color: theme.colors.textSecondary,
-        marginBottom: moderateScale(4),
-    },
-    ownerBadge: {
-        backgroundColor: theme.colors.primary,
-        paddingHorizontal: moderateScale(8),
-        paddingVertical: moderateScale(4),
-        borderRadius: moderateScale(12),
-        alignSelf: 'flex-start',
-    },
-    ownerBadgeText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(10),
-        color: theme.colors.white,
-    },
-    headerTopRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: theme.spacing.lg,
-        paddingBottom: theme.spacing.sm,
-    },
-    clubInfoRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: theme.spacing.lg,
-        marginBottom: theme.spacing.md,
-    },
-    headerClubImageContainer: {
-        marginRight: theme.spacing.md,
-    },
-    headerClubImage: {
-        width: moderateScale(60),
-        height: moderateScale(60),
-        borderRadius: moderateScale(30),
-        backgroundColor: theme.colors.background,
-    },
-    headerPlaceholderImage: {
-        width: moderateScale(60),
-        height: moderateScale(60),
-        borderRadius: moderateScale(30),
-        backgroundColor: 'rgba(255, 255, 255, 0.2)',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    headerTextContainer: {
-        flex: 1,
-    },
-    headerClubName: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(20),
-        color: theme.colors.white,
-        marginBottom: moderateScale(4),
-    },
-    headerMemberText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(14),
-        color: theme.colors.appleGreen,
-        opacity: 0.8,
-    },
-    memberInfoRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: theme.spacing.sm,
-    },
-    memberCountContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    memberCount: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.appleGreen,
-        marginLeft: theme.spacing.xs,
-    },
-    chatButtonContainer: {
-        paddingHorizontal: theme.spacing.lg,
-        paddingBottom: theme.spacing.xs,
-    },
-    chatButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'transparent',
-        borderWidth: 1.5,
-        borderColor: theme.colors.appleGreen,
-        borderRadius: theme.borderRadius.xxl,
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.lg,
-        gap: theme.spacing.sm,
-    },
-    chatButtonText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.md,
-        color: theme.colors.appleGreen,
-    },
-    centerImageContainer: {
-        alignItems: 'center',
-        marginBottom: theme.spacing.xs,
-    },
-    centerClubImage: {
-        width: moderateScale(120),
-        height: moderateScale(120),
-        borderRadius: moderateScale(60),
-        backgroundColor: theme.colors.background,
-        borderWidth: 1,
-        borderColor: theme.colors.imageBorder,
-
-    },
-    centerPlaceholderImage: {
-        width: moderateScale(100),
-        height: moderateScale(100),
-        borderRadius: moderateScale(50),
-        backgroundColor: 'rgba(255, 255, 255, 0.2)',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    centerTextContainer: {
-        alignItems: 'center',
-        marginBottom: theme.spacing.sm,
-    },
-    centerClubName: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(22),
-        color: theme.colors.white,
-        textAlign: 'center',
-    },
-    centerMemberInfo: {
-        alignItems: 'center',
-        marginBottom: theme.spacing.md,
-    },
-    totalMembersContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: theme.spacing.xs,
-    },
-    totalMembersText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(12),
-        color: theme.colors.appleGreen,
-        opacity: 0.8,
-    },
-    tabContainer: {
-        flexDirection: 'row',
-        gap: theme.spacing.xs,
-        height: moderateScale(40),
-        backgroundColor: theme.colors.background,
-        borderRadius: moderateScale(29),
-        padding: moderateScale(2),
-        marginHorizontal: theme.spacing.md,
-        marginBottom: theme.spacing.md,
-        marginTop: theme.spacing.md
-    },
-    tabButton: {
-        flex: 1,
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.md,
-        backgroundColor: theme.colors.lightLavenderGray,
-        borderRadius: theme.borderRadius.xxl,
-        alignItems: 'center',
-    },
-    activeTabButton: {
-        backgroundColor: theme.colors.blue,
-    },
-    tabButtonText: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(14),
-        color: theme.colors.blue,
-    },
-    activeTabButtonText: {
-        color: theme.colors.white,
-        fontSize: moderateScale(14),
-        fontFamily: Fonts.outfitSemiBold,
-    },
-    tabContent: {
-        paddingHorizontal: theme.spacing.lg,
-    },
-    sectionContainer: {
-        marginBottom: theme.spacing.sm,
-    },
-    sectionHeading: {
-        fontFamily: Fonts.outfitLight,
-        fontSize: moderateScale(11.67),
-        color: theme.colors.blue,
-        marginVertical: theme.spacing.xs,
-    },
-    sectionContent: {
-        fontFamily: Fonts.outfitLight,
-        fontSize: moderateScale(13),
-        color: theme.colors.paraText,
-        lineHeight: moderateScale(20),
-    },
-    coachCard: {
-        flexDirection: 'row',
-        backgroundColor: theme.colors.lightLavenderGray,
-        borderRadius: theme.borderRadius.lg,
-        padding: theme.spacing.sm,
-        alignItems: 'center',
-    },
-    coachImageContainer: {
-        width: moderateScale(60),
-        height: moderateScale(60),
-        borderRadius: moderateScale(35),
-        backgroundColor: theme.colors.white,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginLeft: moderateScale(8),
-        marginRight: theme.spacing.md,
-        opacity: 1,
-    },
-    coachDetails: {
-        flex: 1,
-    },
-    coachName: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(16),
-        color: theme.colors.text,
-        marginBottom: moderateScale(4),
-    },
-    coachTitle: {
-        fontFamily: Fonts.outfitLight,
-        fontSize: moderateScale(12),
-        color: theme.colors.appleGreen,
-        marginBottom: moderateScale(2),
-    },
-    coachExperience: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(12),
-        color: theme.colors.textSecondary,
-    },
-    playersGrid: {
-        marginHorizontal: -theme.spacing.sm, // To counteract the gap in rows
-    },
-    playersRow: {
-        flexDirection: 'row',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-        marginVertical: theme.spacing.sm,
-        gap: theme.spacing.sm,
-    },
-    playerCard: {
-        position: 'relative',
-        width: width / 3 - theme.spacing.md,
-        height: moderateScale(113.49),
-        borderRadius: moderateScale(19.09),
-        borderWidth: moderateScale(1.06),
-        borderColor: theme.colors.border,
-        overflow: 'hidden',
-    },
-    playerImage: {
-        width: '100%',
-        height: '100%',
-        borderRadius: moderateScale(19.09),
-    },
-    playerNameOverlay: {
-        position: 'absolute',
-        bottom: 0,
-        width: '100%',
-        paddingHorizontal: theme.spacing.xs,
-        paddingVertical: moderateScale(4),
-        backgroundColor: 'rgba(0, 0, 0, 0.2)',
-    },
-    playerName: {
-        fontFamily: Fonts.outfitBold,
-        fontSize: moderateScale(12),
-        alignSelf: 'center',
-        color: theme.colors.white,
-        opacity: 1,
-        textAlign: 'left',
-        textShadowColor: 'rgba(0,0,0,0.6)',
-        textShadowOffset: { width: 0, height: 1 },
-        textShadowRadius: 2,
-    },
-    playerPlaceholder: {
-        width: '100%',
-        height: '100%',
-        backgroundColor: theme.colors.white,
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: moderateScale(19.09),
-    },
-    // Date Picker Styles
-    horizontalLine: {
-        height: moderateScale(1),
-        backgroundColor: theme.colors.border,
-        marginVertical: moderateScale(1),
-    },
-    datePicker: {
-        marginVertical: theme.spacing.xs,
-    },
-    datePickerContainer: {
-        paddingHorizontal: theme.spacing.sm,
-    },
-    dateItem: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.sm,
-        marginHorizontal: theme.spacing.xs,
-        borderRadius: moderateScale(8),
-        // minWidth: moderateScale(40),
-    },
-    activeDateItem: {
-        backgroundColor: theme.colors.appleGreen,
-        height: moderateScale(42),
-    },
-    dateNumber: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(12),
-        color: theme.colors.appleGreen,
-        marginBottom: moderateScale(2),
-    },
-    dayName: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(10),
-        color: theme.colors.textSecondary,
-    },
-    activeDateText: {
-        color: theme.colors.white,
-        fontSize: moderateScale(14),
-    },
-    memberImageLoader: {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        marginTop: -10,
-        marginLeft: -10,
-        backgroundColor: 'rgba(255, 255, 255, 0.8)',
-        borderRadius: moderateScale(10),
-        padding: moderateScale(5),
-    },
-});