be-components 1.0.1 → 1.0.3

package/src/Bracket/components/CompetitionLeaderboard.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useState } from 'react';
+import { FlatList, View, TouchableOpacity, Image } from 'react-native';
+import type { AthleteProps, CompetitionPlayerBracketProps, PlayerBracketProps, PublicPlayerProps, TeamProps } from '../../types';
+import { BracketApi, BracketComeptitionApi } from '../api';
+import Colors from '../../constants/colors';
+import { Button, Text } from '../../Components';
+import { CompetitionHelpers } from '../../Competition/api';
+
+type CompetitionLeaderboardProps = {
+    bracket_competition_id:string,
+    my_competition_player_brackets:CompetitionPlayerBracketProps[],
+    my_player_brackets:PlayerBracketProps[],
+    view_mode: 'short'|'full',
+    show_champions?:boolean,
+    onViewFull?: () => void,
+    onClose?:() => void
+}
+
+const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_brackets, my_player_brackets, view_mode, show_champions, onViewFull, onClose }:CompetitionLeaderboardProps) => {
+    const [ leaders_data, setData ] = useState<{
+        loading:boolean,
+        offset:number,
+        teams:TeamProps[],
+        athletes:AthleteProps[],
+        competition_player_brackets:CompetitionPlayerBracketProps[],
+        player_brackets:PlayerBracketProps[],
+        players:PublicPlayerProps[]
+    }>({
+        loading:false,
+        offset:0,
+        teams:[],
+        athletes:[],
+        competition_player_brackets: [],
+        player_brackets:[],
+        players:[]
+    })
+    const {  competition_player_brackets, players, player_brackets, teams, athletes } = leaders_data;
+
+    let visible_leaders = competition_player_brackets.sort((a,b) => a.place - b.place);
+    if(view_mode == 'short'){ visible_leaders = competition_player_brackets.slice(0, 3) }
+
+    useEffect(() => {
+        if(!bracket_competition_id){ return }
+        getLeaders(bracket_competition_id, 0)
+    },[bracket_competition_id])
+
+    const getLeaders = async(id:string, page:number) => {
+        setData({ ...leaders_data, loading: true })
+        const resp = await BracketComeptitionApi.getCompetitionPlayerBracketsByCompetitionId(id, page);
+        
+        const ps = await BracketApi.getPlayersByPlayerIds(resp.competition_player_brackets.map(cpb => cpb.player_id).concat(my_competition_player_brackets[0]?.player_id ?? '0'));
+        const team_ids = resp.player_brackets.filter(pb => pb.champion_id_type == 'team').map(pb => pb.champion_id ?? '');
+        const athlete_ids = resp.player_brackets.filter(pb => pb.champion_id_type == 'athlete').map(pb => pb.champion_id ?? '');
+        const ts = await BracketApi.getTeamsByIds(team_ids);
+        const aths = await BracketApi.getAthletesByIds(athlete_ids);
+        setData({ 
+            ...leaders_data,
+            loading:false,
+            competition_player_brackets: resp.competition_player_brackets,
+            player_brackets: resp.player_brackets.filter(pb => !my_player_brackets.find(mpb => mpb.player_bracket_id == pb.player_bracket_id)).concat(my_player_brackets),
+            teams:ts,
+            athletes: aths,
+            players: ps
+        })
+    }
+
+    const renderLeaders = (data: { item:CompetitionPlayerBracketProps, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        const player_bracket = player_brackets.find(pb => pb.player_bracket_id == data.item.player_bracket_id);
+        if(!player || !player_bracket){ return <></> }
+        let champ_team = undefined, champ_athlete = undefined
+        if(show_champions && player_bracket.champion_id_type == 'team'){ champ_team = teams.find(t => t.team_id == player_bracket.champion_id) }
+        if(show_champions && player_bracket.champion_id_type == 'athlete'){ champ_athlete = athletes.find(t => t.athlete_id == player_bracket.champion_id) }
+        return (
+            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', borderRadius:22, borderTopLeftRadius:4, borderBottomLeftRadius:4, margin:3, backgroundColor:Colors.shades.white, padding:4 }}>
+                 <View style={{ padding:5 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{CompetitionHelpers.formatPlace(data.item.place)}</Text>
+                </View>
+                <View>
+                    <Image
+                        source={{ uri: player.profile_pic }}
+                        style={{ height:40, width:40, borderRadius:100 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:5, marginRight:5 }}>
+                    <Text size={14} weight='bold' color={Colors.brand.midnight}>{player_bracket.bracket_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} weight='regular' color={Colors.brand.slate}>{data.item.points_scored} Points ({data.item.possible_points} Possible)</Text>
+                </View>
+                {champ_team ?
+                <View style={{ padding:5 }}>
+                    <Image
+                        source={{ uri: champ_team.image?.url }}
+                        style={{ height:25, width:25, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                :champ_athlete ?
+                <View style={{ padding:5 }}>
+                    <Image
+                        source={{ uri: champ_athlete.image?.url }}
+                        style={{ height:25, width:25, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                :<></>}
+                <View style={{ padding:5 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>${data.item.winnings.toFixed(2)}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
+            {my_competition_player_brackets.length > 0 ?
+            <View style={{ backgroundColor:Colors.brand.midnight, padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <View style={{ marginBottom:5 }}>
+                    <Text size={14} color={Colors.shades.white}>MY RESULTS</Text>
+                </View>
+                <FlatList
+                    data={my_competition_player_brackets}
+                    renderItem={renderLeaders}
+                    keyExtractor={(item) => item.competition_player_bracket_id.toString()}
+                />
+            </View>
+            :<></>}
+            <View style={{ padding:10, backgroundColor:Colors.shades.shade100, borderRadius:8 }}>
+                <View style={{ marginBottom:5 }}>
+                    <Text size={14} color={Colors.brand.midnight}>RESULTS</Text>
+                </View>
+                <FlatList
+                    data={visible_leaders}
+                    renderItem={renderLeaders}
+                    keyExtractor={(item) => item.competition_player_bracket_id.toString()}
+                />
+            </View>
+            {view_mode == 'short' && onViewFull ?
+            <View style={{ padding:10 }}>
+                <Button
+                    title='View Full Leaderboard'
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => onViewFull()}
+                />
+            </View>
+            :<></>}
+            </View>
+            {onClose ?
+            <View style={{ padding:10 }}>
+                <Button
+                    title='Close'
+                    style={{ padding:15 }}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.error}
+                    onPress={() => onClose()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default CompetitionLeaderboard

package/src/Bracket/components/JoinCompetitionCard.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { View, Image } from "react-native";
+import { Button, Text } from '../../Components';
+import type { BracketCompetitionProps, CompetitionPlayerBracketProps, MyPlayerProps, PlayerBalanceProps, PlayerBracketProps } from '../../types';
+import { BracketCompetitionHelpers } from '../api';
+import Colors from '../../constants/colors';
+import PlayerBalanceCard from './PlayerBalanceCard';
+
+type JoinCompetitionCardProps = {
+    player?:MyPlayerProps,
+    loading?:boolean,
+    player_bracket:PlayerBracketProps,
+    player_balance?:PlayerBalanceProps,
+    bracket_competition:BracketCompetitionProps,
+    onNotEnoughBalance:(data:{ bracket_competition:BracketCompetitionProps }) => void,
+    onEnterCompetition:(cpb:CompetitionPlayerBracketProps) => void,
+    onClose:() => void
+}
+
+const JoinCompetitionCard = ({ player, player_balance, loading, player_bracket, bracket_competition, onNotEnoughBalance, onEnterCompetition, onClose }:JoinCompetitionCardProps) => {
+    
+    const buy_in_label = BracketCompetitionHelpers.getBuyInTitle(bracket_competition)
+
+    const handleEnter = () => {
+        const is_enough_balance = BracketCompetitionHelpers.isEnoughBalance(bracket_competition, player_balance);
+        if(!is_enough_balance){ return onNotEnoughBalance({ bracket_competition }) }
+        const cpb = BracketCompetitionHelpers.generateCompetitionPlayerBracket(bracket_competition.bracket_competition_id, player_bracket.player_bracket_id)
+        onEnterCompetition(cpb)
+    }
+
+    return (
+        <View style={{ minWidth:300, backgroundColor:Colors.shades.white, borderRadius:8 }}>
+            <View style={{ borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:Colors.shades.shade100, padding:15 }}>
+                <Text size={16} color={Colors.brand.midnight} weight='bold'>{bracket_competition.competition_name}</Text>
+            </View>
+            {player && player_balance ?
+            <View style={{ padding:5, backgroundColor:Colors.incentive.gold_faded }}>
+                <PlayerBalanceCard 
+                    player={player}
+                    player_balance={player_balance}
+                />
+            </View>
+            :<></>}
+            <View style={{ justifyContent:'center', alignItems:'center' }}>
+                <Image
+                    source={{ uri: bracket_competition.image?.url }}
+                    style={{ height:240, width:240 }}
+                    resizeMode='cover'
+                />
+            </View>
+            <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View style={{ flex:1 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{player_bracket.bracket_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>{(player_bracket.completion_pct*100).toFixed(2)}% Complete</Text>
+                </View>
+            </View>
+            <View style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:Colors.shades.shade100, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                <Button
+                    title='Close'
+                    style={{ flex:1, marginRight:5 }}
+                    padding={15}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    onPress={() => onClose()}
+                />
+                <Button
+                    title={buy_in_label}
+                    disabled={loading}
+                    style={{ flex:2, opacity: loading?0.5:1  }}
+                    loading={loading}
+                    padding={15}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => handleEnter()}
+
+                />
+            </View>
+        </View>
+    )
+}
+
+export default JoinCompetitionCard

package/src/Bracket/components/PlayerBalanceCard.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Image, View } from "react-native"
+import type { MyPlayerProps, PlayerBalanceProps } from "../../types"
+import Colors from '../../constants/colors';
+import { Text } from '../../Components';
+
+type PlayerBalanceCardProps = {
+    player_balance:PlayerBalanceProps,
+    player:MyPlayerProps
+}
+
+const PlayerBalanceCard = ({ player, player_balance }:PlayerBalanceCardProps) => {
+
+    return (
+        <View style={{ flexDirection:'row', alignItems:'center' }}>
+            <View>
+                <Image
+                    source={{ uri: player.profile_pic }}
+                    style={{ height:35, width:35, borderRadius:100 }}
+                    resizeMode='cover'
+                />
+            </View>
+            <View style={{ flex:1, marginLeft:10 }}>
+                <Text size={14} color={Colors.brand.midnight} weight='bold'>{player.first_name} {player.last_name}</Text>
+                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate}>P{player_balance.promo_balance.toFixed(2)} - E{player_balance.free_market_balance.toFixed(2)}</Text>
+            </View>
+            <View>
+                <Text size={14} color={Colors.brand.midnight} weight='bold'>${player_balance.balance.toFixed(2)}</Text>
+            </View>
+        </View>
+    )
+}
+
+export default PlayerBalanceCard

package/src/Bracket/components/PlayerBracketManager.tsx

@@ -0,0 +1,229 @@
+import React, { useEffect, useState } from 'react';
+import { View, TouchableOpacity, FlatList, Image } from "react-native";
+import type { AthleteProps, BracketCompetitionProps, CompetitionPlayerBracketProps, PlayerBracketProps, TeamProps } from '../../types';
+import Colors from '../../constants/colors';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import { BracketComeptitionApi, BracketCompetitionHelpers } from '../api';
+
+type PlayerBracketManagerProps = {
+    visible:boolean,
+    width:number,
+    teams:TeamProps[],
+    athletes:AthleteProps[],
+    player_bracket?:PlayerBracketProps,
+    competition_player_brackets:CompetitionPlayerBracketProps[],
+    bracket_competitions:BracketCompetitionProps[],
+    onUpdateBracket: (pb:PlayerBracketProps) => void,
+    onEditPicks: (pb:PlayerBracketProps) => void,
+    onSelectCompetition: (bc:BracketCompetitionProps) => void,
+    onClose: () =>  void
+}
+
+const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracket_competitions, competition_player_brackets, onEditPicks, onSelectCompetition, onUpdateBracket, onClose }:PlayerBracketManagerProps) => {
+    const [ info_expanded, setInfoExpanded ] = useState(true);
+    const [ manage_data, setData ] = useState<{
+        loading:boolean,
+        draft_bracket?:PlayerBracketProps,
+        active_comp_toggle:'entered'|'eligible',
+    }>({
+        loading: false,
+        draft_bracket: player_bracket,
+        active_comp_toggle: 'entered'
+    })
+    const { draft_bracket, active_comp_toggle } = manage_data;
+
+    useEffect(() => {
+        setData({ ...manage_data, draft_bracket: player_bracket })
+    },[player_bracket])
+
+
+    const renderCompetitions = (data: { item:BracketCompetitionProps, index:number }) => {
+        const payout = BracketCompetitionHelpers.getPayout(data.item)
+        return (
+            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}
+            onPress={() => onSelectCompetition(data.item)}>
+                <View>
+                    <Image
+                        source={{ uri: data.item.image?.url }}
+                        style={{ height:35, width:35, borderRadius:3 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:5 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.competition_name}</Text>
+                    <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>Current Payout: ${payout.toFixed(2)}</Text>
+                </View>
+                <View style={{ padding:10 }}>
+                    <Text size={16} weight='bold' color={Colors.brand.midnight} textAlign='center'>${data.item.buy_in}</Text>
+                    <Text style={{ marginTop:5 }} size={12} weight='bold' color={Colors.brand.slate} textAlign='center'>{data.item.tickets_sold} / {data.item.max_brackets}</Text>
+                </View>
+                <Icons.ChevronIcon direction='right' color={Colors.brand.midnight} size={12} />
+            </TouchableOpacity>
+        )
+    }
+
+    const renderCompPlayerBrackets = (data: { item: CompetitionPlayerBracketProps, index:number }) => {
+        const bracket_competition = bracket_competitions.find(c => c.bracket_competition_id == data.item.bracket_competition_id);
+        if(!bracket_competition){ return <></> }
+        return (
+            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}
+            onPress={() => onSelectCompetition(bracket_competition)}>
+                <View>
+                    <Image
+                        source={{ uri: bracket_competition.image?.url }}
+                        style={{ height:35, width:35, borderRadius:3 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:5 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{bracket_competition.competition_name}</Text>
+                    <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>{data.item.points_scored} Points ({data.item.possible_points} possible)</Text>
+                </View>
+                <View style={{ padding:10 }}>
+                    <Text size={16} weight='bold' color={Colors.brand.midnight} textAlign='center'>{BracketCompetitionHelpers.formatPlace(data.item.place)}</Text>
+                    <Text style={{ marginTop:5 }} size={12} weight='bold' color={Colors.brand.slate} textAlign='center'>${data.item.winnings.toFixed(2)}</Text>
+                </View>
+                <Icons.ChevronIcon direction='right' color={Colors.brand.midnight} size={12} />
+            </TouchableOpacity>
+        )
+    }
+
+    if(!visible || !player_bracket || !draft_bracket){ return <></> }
+
+    const is_changed = JSON.stringify(draft_bracket) != JSON.stringify(player_bracket) ? true : false
+    const champion_team = player_bracket.champion_id_type == 'team' ? teams.find(t => t.team_id == player_bracket.champion_id) : undefined
+    const champion_athlete = player_bracket.champion_id_type == 'athlete' ? athletes.find(t => t.team_id == player_bracket.champion_id) : undefined
+    const can_delete = BracketCompetitionHelpers.canDeletePlayerBracket(player_bracket, competition_player_brackets)
+
+    return (
+        <View>
+              <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade100 }} onPress={() => onClose()}>
+                <Icons.ChevronIcon direction='left' size={12} color={Colors.brand.midnight} />
+                <View style={{ flex:1, marginLeft:20 }}>
+                    <Text size={18} color={Colors.brand.midnight} weight='bold'>{player_bracket.bracket_name}</Text>
+                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Manage your bracket and enter competitions</Text>
+                </View>
+            </TouchableOpacity>
+            <View nativeID='bracket_info'>
+                <TouchableOpacity style={{ padding:20, flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.shade100 }} onPress={() => setInfoExpanded(!info_expanded)}>
+                    <Text style={{flex:1}} size={16} color={Colors.brand.midnight} weight='bold'>Bracket Details</Text>
+                    <Icons.ChevronIcon direction={info_expanded?'up':'down'} color={Colors.brand.midnight} size={10} />
+                </TouchableOpacity>
+                {info_expanded ?
+                <View style={{ padding:10, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                        <Text style={{ flex:1 }} size={14} weight='bold' color={Colors.brand.midnight}>Name</Text>
+                        <TextInput
+                            editable={player_bracket.status == 'active' ? true : false}
+                            value={draft_bracket.bracket_name}
+                            style={{ borderRadius:8, padding:10 }}
+                            onChangeText={(text) => setData({ ...manage_data, draft_bracket: { ...draft_bracket, bracket_name:text } })}
+                        />
+                    </View>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                        <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>% Complete</Text>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{(player_bracket.completion_pct * 100).toFixed(2)}%</Text>
+                    </View>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                        <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>Champion</Text>
+                        {player_bracket.champion_id_type == 'team' && champion_team ?
+                        <View style={{ flexDirection:'row', alignItems:'center' }}>
+                            <Image
+                                source={{ uri: champion_team.image?.url }}
+                                style={{ height:25, width:25, marginRight:10 }}
+                                resizeMode='cover'
+                            />
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>{champion_team.market_name} {champion_team.name}</Text>
+                        </View>
+                        :player_bracket.champion_id_type == 'athlete' && champion_athlete ?
+                        <View style={{ flexDirection:'row', alignItems:'center' }}>
+                            <Image
+                                source={{ uri: champion_athlete.image?.url }}
+                                style={{ height:25, width:25, marginRight:10 }}
+                                resizeMode='cover'
+                            />
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>{champion_athlete.first_name} {champion_athlete.last_name}</Text>
+                        </View>
+                        :<></>}
+                    </View>
+                    
+                    <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                        <View style={{ flex:1 }} />
+                        {can_delete ?
+                        <Button
+                            title='DELETE'
+                            style={{ marginRight:4 }}
+                            title_color={Colors.shades.white}
+                            backgroundColor={Colors.utility.error}
+                            onPress={async() => {
+                                const new_b = await BracketComeptitionApi.deletePlayerBracket(draft_bracket.player_bracket_id);
+                                onUpdateBracket(new_b)
+                            }}
+                        />
+                        :<></>}
+                        {is_changed ?
+                        <Button
+                            title='SAVE'
+                            title_color={Colors.shades.white}
+                            backgroundColor={Colors.utility.success}
+                            onPress={async() => {
+                                const new_b = await BracketComeptitionApi.updatePlayerBracket(draft_bracket);
+                                onUpdateBracket(new_b)
+                            }}
+                        />
+                        : player_bracket.status == 'active' ?
+                        <Button
+                            title='UPDATE PICKS'
+                            title_color={Colors.shades.white}
+                            backgroundColor={Colors.brand.electric}
+                            onPress={() => onEditPicks(player_bracket)}
+                        />
+                        :<></>}
+                    </View>
+                </View>
+                :<></>}
+                {player_bracket.status == 'deleted' ?
+                <View style={{ position:'absolute', top:0, bottom:0, left:0, right:0, backgroundColor:Colors.shades.black_faded_heavy, justifyContent:'center', alignItems:'center' }}>
+                    <View style={{ borderRadius:8, backgroundColor:Colors.shades.white, height:120, width:200, padding:10, justifyContent:'center', alignItems:'center' }}>
+                        <Text size={18} weight='bold' color={Colors.utility.error}>DELETED!</Text>
+                    </View>
+                </View>
+                :<></>}
+            </View>
+            {player_bracket.status != 'deleted' ?
+            <View>
+                <View nativeID='competitions'>
+                    <View style={{ padding:10, paddingLeft:20, flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.shade100 }}>
+                        <Text style={{flex:1}} size={16} color={Colors.brand.midnight} weight='bold'>Competitions</Text>
+                        <View style={{ flexDirection:'row', alignItems:'center', borderRadius:22, backgroundColor:Colors.shades.white }}>
+                            <TouchableOpacity style={{ padding:10, borderTopLeftRadius:22, borderBottomLeftRadius:22, backgroundColor:active_comp_toggle=='entered' ? Colors.brand.midnight: 'transparent' }} onPress={() => setData({ ...manage_data, active_comp_toggle: 'entered' })}>
+                                <Text size={14}  textAlign='center' color={active_comp_toggle=='entered'?Colors.shades.white:Colors.brand.midnight} weight={active_comp_toggle=='entered'?'bold':'regular'}>ENTERED</Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity style={{ padding:10, borderTopRightRadius:22, borderBottomRightRadius:22, backgroundColor:active_comp_toggle=='eligible' ? Colors.brand.midnight: 'transparent' }} onPress={() => setData({ ...manage_data, active_comp_toggle: 'eligible' })}>
+                                <Text size={14} textAlign='center' color={active_comp_toggle=='eligible'?Colors.shades.white:Colors.brand.midnight} weight={active_comp_toggle=='eligible'?'bold':'regular'}>ELIGIBLE</Text>
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </View>
+                <View nativeID='competition_list'>
+                    {active_comp_toggle == 'entered' ?
+                    <FlatList
+                        data={competition_player_brackets.filter(cpb => cpb.player_bracket_id == player_bracket.player_bracket_id)}
+                        renderItem={renderCompPlayerBrackets}
+                        keyExtractor={(item) => item.competition_player_bracket_id.toString()}
+                    />
+                    : active_comp_toggle == 'eligible' ?
+                    <FlatList
+                        data={bracket_competitions}
+                        keyExtractor={(item) => item.bracket_competition_id.toString()}
+                        renderItem={renderCompetitions}
+                    />
+                    :<></>}
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default PlayerBracketManager

package/src/Bracket/components/PlayerBrackets.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { View, FlatList, TouchableOpacity, Image } from "react-native"
+import type { AthleteProps, BracketCompetitionProps, BracketProps, CompetitionPlayerBracketProps, LeagueProps, PlayerBracketProps, TeamProps } from '../../types';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import moment from 'moment-mini';
+
+type PlayerBracketSelectorProps = {
+    visible:boolean,
+    brackets:BracketProps[],
+    leagues:LeagueProps[],
+    teams:TeamProps[],
+    athletes:AthleteProps[],
+    player_brackets:PlayerBracketProps[],
+    bracket_competitions:BracketCompetitionProps[],
+    competition_player_brackets:CompetitionPlayerBracketProps[]
+    onClose:() => void,
+    onSelect:(pb:PlayerBracketProps) => void,
+}
+
+const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, player_brackets, onSelect, onClose }:PlayerBracketSelectorProps) => {
+
+    const active_brackets = player_brackets.filter(pb => pb.status == 'active');
+
+    const unique_bracket_ids = [ ...new Set(active_brackets.map(b => b.bracket_id)) ]
+
+
+    const renderPlayerBrackets = (data : { item:PlayerBracketProps, index:number }) => {
+        const champion_team = data.item.champion_id_type == 'team' ? teams.find(t => t.team_id == data.item.champion_id) : undefined
+        const champion_athlete = data.item.champion_id_type == 'athlete' ? athletes.find(t => t.team_id == data.item.champion_id) : undefined
+        return (
+            <TouchableOpacity style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onSelect(data.item)}>
+                {champion_team ?
+                <View style={{ marginRight:5 }}>
+                    <Image
+                        source={{ uri: champion_team.image?.url }}
+                        style={{ height:35, width:35, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                :champion_athlete ?
+                <View style={{ marginRight:5 }}>
+                    <Image
+                        source={{ uri: champion_athlete.image?.url }}
+                        style={{ height:35, width:35, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                :<></>}
+                <View style={{ flex:1 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.bracket_name}</Text>
+                    <Text style={{ marginTop:4 }} size={12} color={Colors.brand.slate} weight='regular'>{(data.item.completion_pct*100).toFixed()}% Complete</Text>
+                </View>
+                <Button
+                    title='VIEW'
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.electric}
+                    disabled
+                    onPress={() => console.log('')}
+                />
+            </TouchableOpacity>
+        )
+    }
+
+    const renderBrackets = (data: { item:string, index:number }) => {
+        const bracket = brackets.find(b => b.bracket_id == data.item);
+        if(!bracket){ return <></> }
+        const league= leagues.find(l => l.league_id == bracket.league_id);
+        if(!league){ return <></> }
+        const b_pbs = player_brackets.filter(pb => pb.bracket_id == data.item);
+        const started = moment().isAfter(moment(bracket.scheduled_datetime)) ? true : false
+        return (
+            <View>
+                <TouchableOpacity style={{ padding:10, backgroundColor:Colors.shades.shade100, flexDirection:'row', alignItems:'center' }}>
+                    <View>
+                        <Image
+                            source={{ uri: league.league_image }}
+                            style={{ height:35, width:35, borderRadius:4 }}
+                        />
+                    </View>
+                    <View style={{ flex:1 }}>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{bracket.bracket_name}</Text>
+                        <Text style={{ marginTop:4 }} size={12} color={Colors.brand.slate} weight='bold'>{started?'In Progress':`Starts at ${moment(bracket.scheduled_datetime).format('MMM DD YYYY hh:mm a')}`}</Text>
+                    </View>
+                </TouchableOpacity>
+                <View style={{ padding:10 }}>
+                    <FlatList
+                        data={b_pbs}
+                        renderItem={renderPlayerBrackets}
+                        keyExtractor={(item) => item.player_bracket_id.toString()}
+                    />
+                </View>
+            </View>
+        )
+    }
+
+    if(!visible){ return <></> }
+
+    return (
+        <View>
+            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade100 }} onPress={() => onClose()}>
+                <Icons.ChevronIcon direction='left' size={12} color={Colors.brand.midnight} />
+                <View style={{ flex:1, marginLeft:20 }}>
+                    <Text size={18} color={Colors.brand.midnight} weight='bold'>My Brackets</Text>
+                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Select a filled bracket below to manage it</Text>
+                </View>
+            </TouchableOpacity>
+            <View>
+                <FlatList
+                    data={unique_bracket_ids}
+                    renderItem={renderBrackets}
+                    keyExtractor={(item) => item.toString()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default PlayerBracketSelector