create-gufran-expo-app 2.0.4 → 2.0.6

package/template/src/screens/clubs/JoinClub.tsx

@@ -1,841 +0,0 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { View, Text, StyleSheet, FlatList, StatusBar, Platform, TouchableOpacity, Image, RefreshControl, ActivityIndicator, Modal, Animated, Dimensions, PanResponder, Keyboard } from 'react-native';
-import { JoinClubScreenProps } from '../../types/navigation';
-import { theme } from '../../constants';
-import { moderateScale } from '../../utils/scaling';
-import { Fonts } from '../../constants/Fonts';
-import SVG from '../../assets/icons';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useInfiniteClubSearch, useJoinClub } from '../../services/mainServices';
-import { useQueryClient } from '@tanstack/react-query';
-import { Button, ClubCard, TextInput } from '../../components/common';
-import ToastManager from '../../components/common/ToastManager';
-import { getApiErrorInfo, useMembers, useGetImageUrl } from '../../services';
-import { useFocusEffect } from '@react-navigation/native';
-const PAGE_SIZE = 10;
-
-type MemberListItemProps = {
-    item: any;
-    isSelected: boolean;
-    onSelect: (member: any) => void;
-};
-
-const MemberListItem: React.FC<MemberListItemProps> = ({ item, isSelected, onSelect }) => {
-    const [memberImageError, setMemberImageError] = useState(false);
-    return (
-        <TouchableOpacity style={styles.memberListItem} onPress={() => onSelect(item)}>
-            {item?.profileImage && !memberImageError ? (
-                <Image
-                    source={{ uri: item?.profileImage }}
-                    onError={() => {
-                        setMemberImageError(true);
-                    }}
-                    style={styles.profileImage}
-                />
-            ) : (
-                <SVG.emptyUser style={{ marginRight: moderateScale(10) }} width={moderateScale(50)} height={moderateScale(50)} />
-            )}
-            {/* {memberImageError && (
-                <SVG.emptyUser style={{ marginRight: moderateScale(10) }} width={moderateScale(50)} height={moderateScale(50)} />
-            )} */}
-            <View style={styles.memberNameContainer}>
-                <Text style={styles.memberName}>{item?.name}</Text>
-                {item?.isOwner && (
-                    <Text style={styles.memberNameSubtitle}>Yourself</Text>
-                )}
-            </View>
-            <View>
-                {isSelected ? (
-                    <SVG.checkRadio width={moderateScale(20)} height={moderateScale(20)} />
-                ) : (
-                    <SVG.uncheckRadio width={moderateScale(20)} height={moderateScale(20)} />
-                )}
-            </View>
-        </TouchableOpacity>
-    );
-};
-
-export const JoinClubScreen: React.FC<JoinClubScreenProps> = ({ navigation }) => {
-
-    // Pagination state
-    const [isRefreshing, setIsRefreshing] = useState(false);
-    const [membersModal, setMembersModal] = useState<boolean>(false);
-    const [selectedMember, setSelectedMember] = useState<any>(null);
-    // Bottom sheet animation values
-    const translateY = useRef(new Animated.Value(0)).current;
-    const screenHeight = Dimensions.get('window').height;
-    const bottomSheetHeight = screenHeight * 0.45; // 45% of screen height
-    const [searchQuery, setSearchQuery] = useState('');
-    const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout | null>(null);
-    const [joinClubDetails, setJoinClubDetails] = useState<any>(null);
-    const [joinClubImageUrls, setJoinClubImageUrls] = useState<Record<number, string>>({});
-    const [joinClubMemberImageUrls, setJoinClubMemberImageUrls] = useState<Record<number, string>>({});
-    const queryClient = useQueryClient();
-    const joinClubMutation = useJoinClub();
-    const getImageUrlMutation = useGetImageUrl();
-
-
-
-
-    const keyExtractor = (item: any, index: number) => {
-        // Create a more robust key that combines multiple attributes to ensure uniqueness
-        const id = item?.id?.toString() || '';
-        const name = item?.name || item?.clubName || '';
-        const clubCode = item?.clubCode || item?.uniqueCode || '';
-        const timestamp = item?.createdAt || item?.timestamp || '';
-
-        // Create a unique composite key using multiple attributes
-        const keyParts = [id, name, clubCode, timestamp].filter(part => part && part.toString().trim() !== '');
-
-        if (keyParts.length > 0) {
-            return `club-${keyParts.join('-')}-${index}`;
-        }
-
-        // Ultimate fallback with index to ensure uniqueness
-        return `club-unknown-${index}`;
-    };
-
-
-    const { data, fetchNextPage,
-        hasNextPage,
-        isFetchingNextPage,
-        isLoading,
-        isError,
-        refetch
-    } = useInfiniteClubSearch(searchQuery, PAGE_SIZE);
-
-    // Flatten all pages into a single array and add clubImageUrl from state
-    const allClubs = data?.pages?.flatMap(page =>
-        (page?.data?.data || []).map((club: any) => ({
-            ...club,
-            clubImageUrl: joinClubImageUrls[club.id] || undefined
-        }))
-    ) || [];
-
-
-    const { data: membersData, isLoading: isLoadingMembers, isError: isErrorMembers, refetch: refetchMembers } = useMembers({ PageNumber: 0, PageSize: 10 });
-    const rawMembers = Array.isArray(membersData?.data?.data) ? membersData.data.data : [];
-    const sortedMembers = rawMembers.sort((a: any, b: any) => {
-        if (a?.isOwner) return -1;
-        if (b?.isOwner) return 1;
-        return 0;
-    });
-
-    const members = sortedMembers.map((member: any) => ({
-        ...member,
-        profileImageUrl: joinClubMemberImageUrls[member.id] || undefined
-    }));
-
-
-    useFocusEffect(useCallback(() => {
-        refetch();
-    }, [refetch]));
-
-
-    // Pull to refresh
-    const onRefresh = useCallback(async () => {
-        try {
-            setIsRefreshing(true);
-            // Clear all cached data for this query to start fresh from page 0
-            queryClient.removeQueries({
-                queryKey: ['infiniteClubSearch', searchQuery, PAGE_SIZE]
-            });
-            // This will trigger a fresh fetch starting from page 0
-            await refetch();
-        } catch (error) {
-            console.error('Refresh failed:', error);
-        } finally {
-            setIsRefreshing(false);
-        }
-    }, [refetch, queryClient, searchQuery]);
-
-    // Handle search input with debouncing
-    const handleSearch = useCallback((text: string) => {
-        setSearchQuery(text);
-        if (text.length < 3) {
-            return;
-        }
-
-        // Clear existing timeout
-        if (searchTimeout) {
-            clearTimeout(searchTimeout);
-        }
-
-        // Set new timeout for debounced search
-        const timeout = setTimeout(() => {
-            // Clear cache and refetch with new search term
-            queryClient.removeQueries({
-                queryKey: ['infiniteClubSearch', text || 'club', PAGE_SIZE]
-            });
-        }, 500); // 500ms debounce
-
-        setSearchTimeout(timeout);
-    }, [searchTimeout, queryClient]);
-
-    // Cleanup timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (searchTimeout) {
-                clearTimeout(searchTimeout);
-            }
-        };
-    }, [searchTimeout]);
-
-    // Load more data
-    const onEndReached = useCallback(() => {
-        if (isFetchingNextPage || !hasNextPage) return;
-        fetchNextPage();
-    }, [isFetchingNextPage, hasNextPage, fetchNextPage, allClubs.length]);
-
-    // Render loading footer
-    const renderFooter = () => {
-        if (!isFetchingNextPage) return null;
-        return (
-            <View style={styles.footerLoader}>
-                <ActivityIndicator size="small" color={theme.colors.primary} />
-                <Text style={styles.footerText}>Loading more clubs...</Text>
-            </View>
-        );
-    };
-
-
-
-    const renderEmptyComponent = () => {
-        if (isLoading) return null;
-        return (
-            <View style={styles.emptyContainer}>
-                <Text style={styles.emptyListText}>No clubs found</Text>
-                <Text style={styles.emptySubText}>Try refreshing or check back later</Text>
-            </View>
-        );
-    };
-
-    const handleScroll = useCallback(() => {
-        Keyboard.dismiss();
-    }, []);
-
-    const handleMemberSelection = (member: any) => {
-        setSelectedMember(member);
-    };
-
-    // Bottom sheet animation functions
-    const showBottomSheet = () => {
-        setSelectedMember(null);
-        setMembersModal(true);
-        Animated.spring(translateY, {
-            toValue: 0,
-            useNativeDriver: true,
-            tension: 100,
-            friction: 8,
-        }).start();
-    };
-
-    const hideBottomSheet = () => {
-        Animated.timing(translateY, {
-            toValue: bottomSheetHeight,
-            duration: 300,
-            useNativeDriver: true,
-        }).start(() => {
-            setMembersModal(false);
-            translateY.setValue(bottomSheetHeight);
-        });
-    };
-
-    // PanResponder for swipe gestures
-    const panResponder = useRef(
-        PanResponder.create({
-            onMoveShouldSetPanResponder: (_, gestureState) => {
-                return Math.abs(gestureState.dy) > 5;
-            },
-            onPanResponderGrant: () => {
-                translateY.setOffset((translateY as any)._value);
-                translateY.setValue(0);
-            },
-            onPanResponderMove: (_, gestureState) => {
-                // Only allow downward movement
-                if (gestureState.dy > 0) {
-                    translateY.setValue(gestureState.dy);
-                }
-            },
-            onPanResponderRelease: (_, gestureState) => {
-                translateY.flattenOffset();
-
-                // If swiped down more than 100px or with high velocity, close the modal
-                if (gestureState.dy > 100 || gestureState.vy > 0.5) {
-                    hideBottomSheet();
-                } else {
-                    // Snap back to original position
-                    Animated.spring(translateY, {
-                        toValue: 0,
-                        useNativeDriver: true,
-                        tension: 100,
-                        friction: 8,
-                    }).start();
-                }
-            },
-        })
-    ).current;
-
-    const renderMemberListItem = ({ item }: { item: any }) => (
-        <MemberListItem
-            item={item}
-            isSelected={selectedMember?.id === item?.id}
-            onSelect={handleMemberSelection}
-        />
-    );
-
-
-    const getJoinClubImageUrls = async (clubItem: any) => {
-        if (clubItem?.clubImage == null) return;
-
-        // Skip if already fetched
-        if (joinClubImageUrls[clubItem.id] !== undefined) return;
-
-        const [folder, blobName] = clubItem?.clubImage.split('/');
-
-        try {
-            getImageUrlMutation.mutate({
-                containerName: folder,
-                blobName: blobName
-            }, {
-                onSuccess: (response) => {
-                    const imageUrl = response?.data?.data?.url;
-                    console.log('JoinClub Image URL response', response.data);
-
-                    // Prefetch image into React Native cache to avoid blink when scrolling back
-                    if (imageUrl) {
-                        Image.prefetch(imageUrl).catch((prefetchError) => {
-                            console.warn('JoinClub Image prefetch failed:', prefetchError);
-                        });
-                    }
-
-                    // Simple state update instead of recreating entire query cache
-                    setJoinClubImageUrls(prev => ({
-                        ...prev,
-                        [clubItem.id]: imageUrl
-                    }));
-                },
-                onError: (error) => {
-                    const errorInfo = getApiErrorInfo(error);
-                    ToastManager.error(errorInfo.message);
-                    setJoinClubImageUrls(prev => ({
-                        ...prev,
-                        [clubItem.id]: ""
-                    }));
-                }
-            });
-        } catch (err) {
-            setJoinClubImageUrls(prev => ({
-                ...prev,
-                [clubItem.id]: ""
-            }));
-        }
-    };
-
-
-    const getJoinClubImageMembersUrls = async (memberItem: any) => {
-        console.log('JoinClub getJoinClubImageMembersUrls>>>>>14798', JSON.stringify(memberItem));
-        if (memberItem?.profileImage == null) return;
-
-        // Skip if already fetched
-        if (joinClubMemberImageUrls[memberItem.id] !== undefined) return;
-        console.log('JoinClub getJoinClubImageMembersUrls>>>>>147', JSON.stringify(memberItem));
-
-        const [folder, blobName] = memberItem?.profileImage.split('/');
-
-        try {
-            getImageUrlMutation.mutate({
-                containerName: folder,
-                blobName: blobName
-            }, {
-                onSuccess: (response) => {
-                    const imageUrl = response?.data?.data?.url;
-                    console.log('JoinClub Image Members URL response', response.data);
-
-                    // Prefetch image into React Native cache to avoid blink when scrolling back
-                    if (imageUrl) {
-                        Image.prefetch(imageUrl).catch((prefetchError) => {
-                            console.warn('JoinClub Image prefetch failed:', prefetchError);
-                        });
-                    }
-
-                    // Simple state update instead of recreating entire query cache
-                    setJoinClubMemberImageUrls(prev => ({
-                        ...prev,
-                        [memberItem.id]: imageUrl
-                    }));
-                },
-                onError: (error) => {
-                    const errorInfo = getApiErrorInfo(error);
-                    ToastManager.error(errorInfo.message);
-                    setJoinClubMemberImageUrls(prev => ({
-                        ...prev,
-                        [memberItem.id]: ""
-                    }));
-                }
-            });
-        } catch (err) {
-            setJoinClubMemberImageUrls(prev => ({
-                ...prev,
-                [memberItem.id]: ""
-            }));
-        }
-    };
-
-    const onJoinClubViewableItemsChanged = useCallback(
-        ({
-            viewableItems,
-        }: {
-            viewableItems: Array<{ item: any }>;
-        }) => {
-            const items = viewableItems.map(({ item }) => item);
-            items.forEach((item) => {
-                if (item && !item.clubImageUrl) {
-                    console.log('JoinClub onViewableItemsChanged>>>>>', JSON.stringify(item));
-                    getJoinClubImageUrls(item);
-                }
-            });
-        },
-        [getJoinClubImageUrls]
-    );
-    const onJoinClubViewableItemsChangedMembers = useCallback(
-        ({
-            viewableItems,
-        }: {
-            viewableItems: Array<{ item: any }>;
-        }) => {
-            const items = viewableItems.map(({ item }) => item);
-            items.forEach((item) => {
-                if (item && !item.profileImageUrl) {
-                    getJoinClubImageMembersUrls(item);
-                }
-            });
-        },
-        [getJoinClubImageMembersUrls]
-    );
-
-    const joinClubViewabilityConfig = useRef({
-        viewAreaCoveragePercentThreshold: 50, // Increased threshold for better on-demand loading
-        minimumViewTime: 100, // Minimum time item must be visible before triggering
-        waitForInteraction: false, // Don't wait for user interaction
-    }).current;
-
-    const joinClubViewabilityConfigMembers = useRef({
-        viewAreaCoveragePercentThreshold: 50, // Increased threshold for better on-demand loading
-        minimumViewTime: 100, // Minimum time item must be visible before triggering
-        waitForInteraction: false, // Don't wait for user interaction
-    }).current;
-
-    const renderClubItem = ({ item }: any) => {
-        return (
-            <ClubCard
-                club={item}
-                onJoin={true}
-                clubCodeShow={true}
-                onJoinPress={() => {
-                    setJoinClubDetails(item);
-
-                    // Check if there's only one member with isOwner: true
-                    if (rawMembers.length === 1 && rawMembers[0].isOwner === true) {
-                        // Auto-select the single owner member and join directly
-                        setSelectedMember(rawMembers[0]);
-
-                        // Join club directly without showing modal
-                        joinClubMutation.mutate({
-                            clubId: item.id,
-                            memberId: rawMembers[0].id,
-                        }, {
-                            onSuccess: (response) => {
-                                ToastManager.success(response.data.message || 'Join club successful');
-                                navigation.goBack();
-                            },
-                            onError: (error) => {
-                                const errorInfo = getApiErrorInfo(error);
-                                ToastManager.error(errorInfo?.message);
-                                console.error('Join club failed:', error);
-                            },
-                        });
-                    } else {
-                        // Show modal for member selection as usual
-                        setMembersModal(true);
-                        showBottomSheet();
-                    }
-                }}
-            />
-        );
-    };
-
-    const joinClub = () => {
-        if (joinClubDetails && selectedMember) {
-
-            joinClubMutation.mutate({
-                clubId: joinClubDetails?.id,
-                memberId: selectedMember?.id,
-            }, {
-                onSuccess: (response) => {
-                    ToastManager.success(response.data.message || 'Join club successful');
-                    navigation.goBack();
-                },
-                onError: (error) => {
-                    const errorInfo = getApiErrorInfo(error);
-                    ToastManager.error(errorInfo?.message);
-
-                    console.error('Join club failed:', error);
-                },
-            });
-        }
-    };
-
-    return (
-        <View style={styles.container}>
-            <StatusBar
-                barStyle="light-content"
-                backgroundColor={theme.colors.blue}
-                translucent={Platform.OS === 'android' ? true : false}
-            />
-            {Platform.OS === 'ios' && <View style={styles.statusBarBackground} />}
-            <SafeAreaView style={styles.header} >
-                <View style={{ paddingHorizontal: theme.spacing.lg }}>
-                    <TouchableOpacity onPress={() => navigation.goBack()}>
-                        <SVG.arrowLeft_white width={moderateScale(25)} height={moderateScale(25)} />
-                    </TouchableOpacity>
-                    <Text style={styles.headerTitle}>Search and join club</Text>
-                </View>
-                <View style={styles.addMemberContainer}>
-                </View>
-                <View style={styles.content}>
-                    <View style={styles.searchContainer}>
-                        <TextInput
-                            leftIconStyle={{ marginLeft: theme.spacing.sm }}
-                            leftIconSizeWidth={moderateScale(17)}
-                            leftIconSizeHeight={moderateScale(17)}
-                            placeholder="Unique code and club name"
-                            style={styles.searchInput}
-                            leftIcon={SVG.search}
-                            variant="outlined"
-                            maxLength={50}
-                            value={searchQuery}
-                            onChangeText={handleSearch}
-                        />
-                    </View>
-                    <FlatList
-                        data={allClubs}
-                        renderItem={renderClubItem}
-                        keyExtractor={keyExtractor}
-                        style={styles.clubsList}
-                        showsVerticalScrollIndicator={false}
-                        contentContainerStyle={styles.flatListContent}
-                        removeClippedSubviews={false}
-                        initialNumToRender={10}
-                        onEndReached={onEndReached}
-                        onEndReachedThreshold={0.9}
-                        ListFooterComponent={renderFooter}
-                        ListEmptyComponent={renderEmptyComponent}
-                        // onViewableItemsChanged={onJoinClubViewableItemsChanged}
-                        // viewabilityConfig={joinClubViewabilityConfig}
-                        onScroll={handleScroll}
-                        scrollEventThrottle={16}
-                        refreshControl={
-                            <RefreshControl
-                                refreshing={isRefreshing}
-                                onRefresh={onRefresh}
-                                colors={[theme.colors.primary]}
-                                tintColor={theme.colors.primary}
-                            />
-                        }
-                    />
-                </View>
-            </SafeAreaView>
-
-
-            <Modal
-                visible={membersModal}
-                animationType="fade"
-                transparent={true}
-                onRequestClose={hideBottomSheet}
-            >
-                <View style={styles.modalOverlay}>
-                    <TouchableOpacity
-                        style={styles.modalBackdrop}
-                        activeOpacity={1}
-                        onPress={hideBottomSheet}
-                    />
-                    <Animated.View
-                        style={[
-                            styles.modalContainer,
-                            {
-                                transform: [{ translateY }],
-                            },
-                        ]}
-                    >
-                        <View style={styles.dragHandle} {...panResponder.panHandlers} />
-                        <FlatList
-                            data={members}
-                            renderItem={renderMemberListItem}
-                            style={styles.membersList}
-                            showsVerticalScrollIndicator={false}
-                            ListHeaderComponent={() => {
-                                return (
-                                    <View>
-                                        <View style={styles.headerContainer}>
-                                            <Text style={styles.mamberHeaderTitle}>Continue as</Text>
-                                        </View>
-                                    </View>
-                                )
-                            }}
-                            keyExtractor={(item, index) => {
-                                // Create a more robust key for members
-                                const id = item?.id?.toString() || '';
-                                const name = item?.name || '';
-                                const email = item?.email || '';
-                                const memberCode = item?.membershipCode || '';
-                                const createdAt = item?.createdAt || '';
-
-                                // Create a unique composite key using multiple attributes
-                                const keyParts = [id, name, email, memberCode, createdAt].filter(part => part && part.toString().trim() !== '');
-
-                                if (keyParts.length > 0) {
-                                    return `member-${keyParts.join('-')}`;
-                                }
-
-                                // Ultimate fallback with index to ensure uniqueness
-                                return `member-unknown-${index}`;
-                            }}
-
-                        />
-
-                        <Button
-                            title="Continue"
-                            onPress={() => {
-                                joinClub();
-                                hideBottomSheet();
-                            }}
-                            variant="primary"
-                            size="medium"
-                            style={styles.nextButton}
-                            disabled={selectedMember == null ? true : false}
-                        />
-                    </Animated.View>
-                </View>
-            </Modal>
-        </View>
-    );
-};
-
-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, // Status bar height for iOS
-        backgroundColor: theme.colors.blue,
-        zIndex: 1000,
-    },
-    header: {
-        flex: 1,
-        backgroundColor: theme.colors.blue,
-        paddingVertical: theme.spacing.xs,
-        paddingTop: Platform.OS === 'android' ? theme.spacing.lg : theme.spacing.xs,
-    },
-    headerTitle: {
-        marginTop: moderateScale(20),
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(22),
-        color: theme.colors.white,
-    },
-    skipButton: {
-        alignSelf: 'flex-end',
-        paddingHorizontal: theme.spacing.sm,
-        paddingVertical: theme.spacing.xs,
-    },
-    skipButtonText: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: theme.typography.fontSize.md,
-        color: theme.colors.white,
-    },
-    addMemberContainer: {
-        backgroundColor: theme.colors.blue,
-        paddingHorizontal: theme.spacing.lg,
-        paddingBottom: theme.spacing.md,
-    },
-    addMemberButton: {
-        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,
-    },
-    addMemberButtonText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.md,
-        color: theme.colors.appleGreen,
-    },
-    content: {
-        flex: 1,
-        backgroundColor: theme.colors.background,
-        paddingHorizontal: theme.spacing.lg,
-        paddingTop: theme.spacing.md,
-        borderTopLeftRadius: moderateScale(30),
-        borderTopRightRadius: moderateScale(30),
-    },
-    sectionTitle: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.xs,
-        color: theme.colors.blue,
-        marginBottom: theme.spacing.md,
-        letterSpacing: 0.5,
-    },
-    clubsList: {
-        flex: 1,
-    },
-    flatListContent: {
-        paddingBottom: theme.spacing.xl,
-    },
-    emptyContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: theme.spacing.xl,
-    },
-    bottomContainer: {
-        height: moderateScale(120),
-        paddingHorizontal: theme.spacing.lg,
-        paddingVertical: theme.spacing.md,
-        backgroundColor: theme.colors.white,
-    },
-    nextButton: {
-        width: '100%',
-        marginBottom: theme.spacing.md,
-    },
-    emptyListText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.md,
-        color: theme.colors.text,
-        textAlign: 'center',
-        marginBottom: theme.spacing.xs,
-    },
-    emptySubText: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: theme.typography.fontSize.sm,
-        color: theme.colors.textSecondary,
-        textAlign: 'center',
-    },
-    footerLoader: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: theme.spacing.md,
-        gap: theme.spacing.sm,
-    },
-    footerText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.sm,
-        color: theme.colors.textSecondary,
-    },
-    errorText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.md,
-        color: theme.colors.error,
-        textAlign: 'center',
-        marginBottom: theme.spacing.md,
-    },
-    retryButton: {
-        backgroundColor: theme.colors.primary,
-        paddingHorizontal: theme.spacing.lg,
-        paddingVertical: theme.spacing.sm,
-        borderRadius: theme.borderRadius.md,
-    },
-    retryButtonText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.md,
-        color: theme.colors.white,
-        textAlign: 'center',
-    },
-    modalOverlay: {
-        flex: 1,
-        justifyContent: 'flex-end',
-    },
-    modalBackdrop: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    },
-    modalContainer: {
-        backgroundColor: theme.colors.white,
-        borderTopLeftRadius: moderateScale(20),
-        borderTopRightRadius: moderateScale(20),
-        paddingHorizontal: theme.spacing.lg,
-        paddingTop: theme.spacing.sm,
-        paddingBottom: theme.spacing.xl,
-        height: '45%',
-        maxHeight: '45%',
-    },
-    dragHandle: {
-        width: moderateScale(40),
-        height: moderateScale(4),
-        backgroundColor: theme.colors.border,
-        borderRadius: moderateScale(2),
-        alignSelf: 'center',
-        marginBottom: theme.spacing.sm,
-    },
-    membersList: {
-        flex: 1,
-    },
-    memberListItem: {
-        height: moderateScale(70),
-        alignItems: 'center',
-        paddingVertical: theme.spacing.md,
-        flexDirection: 'row',
-    },
-    headerContainer: {
-        paddingVertical: theme.spacing.xs,
-    },
-    mamberHeaderTitle: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(14),
-        color: theme.colors.text,
-    },
-    profileImage: {
-        width: moderateScale(50),
-        height: moderateScale(50),
-        borderRadius: moderateScale(25),
-        marginRight: moderateScale(10),
-    },
-    memberName: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(14),
-        color: theme.colors.text,
-    },
-    memberNameContainer: {
-        flex: 1,
-        justifyContent: 'center',
-    },
-    memberNameSubtitle: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(12),
-        color: theme.colors.border,
-    },
-    searchInput: {
-    },
-    searchContainer: {
-        marginBottom: theme.spacing.md,
-    },
-    placeholderStyle: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(5),
-        color: theme.colors.textSecondary,
-    },
-});