be-components 7.2.2 → 7.2.4

package/src/PartnerPortal/components/ReferralCodeManager.tsx

@@ -0,0 +1,303 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from "../../Components/Themed";
+import type { FocusPositionProps, PlayerReferralProps, PromoProps } from '../../types';
+import { PartnerPortalApi, PartnerPortalHelpers } from '../api';
+import { FlatList, ImageBackground, type ViewStyle } from 'react-native';
+import PromoSelector from './PromoSelector';
+import { useColors } from '../../constants/useColors';
+import { showConfirmAlert } from '../../Components/ConfirmAlert';
+
+type ReferralCodeManagerProps = {
+    player_referral_id?:string,
+    company_id?:string,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
+    float?:boolean,
+    onClose: () => void,
+    header_style?:ViewStyle,
+    footer_style?:ViewStyle
+}
+const sections = ['header','info','code','promo','inactivate','activate','delete']
+const ReferralCodeManager = ({ float, player_referral_id, company_id, header_style, footer_style, onFocusPosition, onClose }:ReferralCodeManagerProps) => {
+    const Colors = useColors();
+    const [ action_loading, setActionLoading ] = useState(false);
+    const [ size, setSize ] = useState({ height:0, width:0 });
+    const [ state, setState ] = useState<{
+        checked:boolean,
+        available:boolean,
+        promos:PromoProps[],
+        player_referral?:PlayerReferralProps,
+        draft_referral?:PlayerReferralProps
+    }>({
+        draft_referral: undefined,
+        player_referral:undefined,
+        promos:[],
+        checked:false,
+        available:false
+    });
+    const { draft_referral, promos, player_referral, checked, available } = state;
+    const active_promo = promos.find(p => p.promo_id == draft_referral?.promo_id);
+    useEffect(() => {
+        PartnerPortalApi.setEnvironment();
+        getData(player_referral_id);
+    },[player_referral_id]);
+
+    const getData = async(id?:string) => {
+        const s_promos = await PartnerPortalApi.CompanyApi.getPromos();
+        let s_refer:PlayerReferralProps | undefined
+        if(id){
+            s_refer = await PartnerPortalApi.CompanyApi.getReferralById(id);
+            if(!s_refer){ return alert('Unable to get referral.  Please try again') }
+        } else {
+            s_refer = PartnerPortalHelpers.CompanyHelpers.generateNewReferral()
+        }
+        setState({
+            checked:id ? true : false,
+            available: id ? true : false,
+            promos:s_promos,
+            draft_referral: s_refer,
+            player_referral: id ? s_refer : undefined
+        })
+    }
+
+    const isValid = () => {
+        let errors:string[] = []
+        if(!draft_referral){ return ['Please complete this form'] }
+        if(!draft_referral.referral_code){ errors.push('Please enter a valid code') }
+        if(!checked){ errors.push('Please check if the referral code is available') }
+        if(!available){ errors.push('This code is not available to use') }
+        if(!active_promo){ errors.push('Add a promo code') }
+        return errors
+    }
+    const errors = isValid();
+
+    const checkAvailability = async(code:string) => {
+        if(action_loading){ return }
+        if(!code){ return alert('Please enter a code') }
+        setActionLoading(true);
+        const resp = await PartnerPortalApi.CompanyApi.getReferralByCode(code.toLowerCase());
+        setState({ ...state, checked: true, available: resp.player_referral ? false : true });
+        setActionLoading(false)
+    }
+
+    const deactivate = async() => {
+        if(!player_referral){ return }
+        if(action_loading){ return }
+        setActionLoading(true);
+        const new_code = await PartnerPortalApi.CompanyApi.deactivateCode(player_referral.player_referral_id);
+        if(!new_code){ return alert('Unable to process. Please try again later') }
+        setState({ ...state, player_referral: new_code, draft_referral:new_code })
+        setActionLoading(false);
+    }
+
+    const activate = async() => {
+        if(!player_referral){ return }
+        if(action_loading){ return }
+        setActionLoading(true);
+        const new_code = await PartnerPortalApi.CompanyApi.activateCode(player_referral.player_referral_id);
+        if(!new_code){ return alert('Unable to process. Please try again later') }
+        setState({ ...state, player_referral: new_code, draft_referral:new_code })
+        setActionLoading(false);
+    }
+
+    const deleteCode = async() => {
+        if(!player_referral){ return }
+        if(action_loading){ return }
+        setActionLoading(true);
+        const new_code = await PartnerPortalApi.CompanyApi.deleteCode(player_referral.player_referral_id);
+        if(!new_code){ return alert('Unable to process. Please try again later') }
+        setState({ ...state, player_referral: new_code, draft_referral:new_code })
+        setActionLoading(false);
+    }
+
+    const handleUpdate = async(dr:PlayerReferralProps) => {
+        if(action_loading){ return }
+        setActionLoading(true);
+        const new_referral = await PartnerPortalApi.CompanyApi.updateCodeOnReferral(dr);
+        if(!new_referral){ return alert('Unable to process at this time') }
+        setState({
+            ...state,
+            draft_referral: new_referral,
+            player_referral: new_referral
+        });
+        setActionLoading(false);
+    }
+
+    const handleCreate = async() => {
+        if(action_loading){ return }
+        if(!draft_referral){ return }
+        if(errors.length > 0){ return alert(errors.map(e => e)) }
+        setActionLoading(true);
+        const new_code = await PartnerPortalApi.CompanyApi.createCode({ ...draft_referral, company_id});
+        if(!new_code){ return alert('Unable to process. Please try again later') }
+        setState({ ...state, player_referral: new_code, draft_referral:new_code })
+        setActionLoading(false);
+    }
+
+    const renderSections = (data: { item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, ...header_style }}>
+                      <View transparent style={{ flex:1 }}>
+                        <Text theme='h1'>Manage Referral Code</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>Update or create your referral code below</Text>
+                      </View>
+                    </View>
+                )
+            case 'info':
+                return (
+                    <ImageBackground
+                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1758727070/ChatGPT_Image_Sep_24_2025_10_17_44_AM_w39gdn.png' }}
+                        style={{ width: size.width, height:225, justifyContent:'flex-end', overflow:'hidden', ...header_style}}>
+                        <View type='dark_blur' style={{ padding:20 }}>
+                            <Text theme='h1' size={36}>Referral Code</Text>
+                            <Text theme='description' size={16} style={{ marginTop:3 }}>Track the users that sign up for BettorEdge with referral codes</Text>
+                        </View>
+                    </ImageBackground>
+                )
+            case 'code':
+                if(!draft_referral){ return <></> }
+                return (
+                    <View transparent style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                        <View transparent style={{ marginBottom:10 }}>
+                            <Text theme='h1'>Referral Code</Text>
+                            <Text theme='description' style={{ marginTop:4 }}>Enter the referral code and check its availability</Text>
+                        </View>
+                        <View transparent type='row'>
+                            <TextInput
+                                value={draft_referral.referral_code}
+                                onFocusPosition={onFocusPosition}
+                                editable={player_referral ? false : true}
+                                style={{ flex:1, marginLeft:5, textAlign:'center', borderColor:available?Colors.text.success:checked?Colors.text.error:Colors.text.warning }}
+                                onChangeText={(text) => setState({ ...state, checked:false, available: false, draft_referral: { ...draft_referral, referral_code: text } })}
+                            />
+                            {!player_referral ?
+                            <Button
+                                title='CHECK'
+                                type='success'
+                                loading={action_loading}
+                                disabled={checked || !draft_referral.referral_code}
+                                style={{ marginLeft:5, opacity: checked || !draft_referral.referral_code ? 0.5 : 1 }}
+                                onPress={() => checkAvailability(draft_referral.referral_code)}
+                            />
+                            :<></>}
+                        </View>
+                        {player_referral ?
+                        <Text theme='error' style={{ marginTop:4 }}>To change the referral code.  Please inactivate this one and create a new one</Text>
+                        :checked && available?
+                        <Text theme='success' style={{ marginTop:4 }}>Great! This code is available</Text>
+                        :checked && !available ?
+                        <Text theme='error' style={{ marginTop:4 }}>Sorry! This code is already taken</Text>
+                        :<></>}
+                    </View>
+                )
+            case 'promo':
+                if(!draft_referral){ return <></> }
+                return (
+                    <View transparent style={{ padding:20 }}>
+                        <View transparent style={{ marginBottom:10 }}>
+                            <Text theme='h1'>Promotion Type</Text>
+                            <Text theme='description' style={{ marginTop:4 }}>Select the type of promotion for this code</Text>
+                        </View>
+                        <PromoSelector 
+                            promos={promos}
+                            limited_type='promo_code'
+                            max_value={20}
+                            active_promo={active_promo}
+                            onSelectPromo={(promo) => setState({ ...state, draft_referral: { ...draft_referral, promo_id: promo.promo_id } })}
+                        />
+                    </View>
+                )
+            case 'inactivate':
+                if(!player_referral){ return <></> }
+                if(player_referral.status != 'pending'){ return <></> }
+                
+                return (
+                    <View transparent style={{ padding:20 }}>
+                        <Button
+                            title='DEACTIVATE CODE'
+                            loading={action_loading}
+                            type='error'
+                            onPress={() => deactivate()}
+                        />
+                    </View>
+                )
+            case 'activate':
+                if(!player_referral){ return <></> }
+                if(player_referral.status != 'inactive'){ return <></> }
+                return (
+                    <View transparent style={{ flexDirection:'row', padding:20 }}>
+                        <Button
+                            title='ARCHVE'
+                            loading={action_loading}
+                            type='error'
+                            style={{ flex:1, marginRight:5 }}
+                            onPress={() => {
+                                showConfirmAlert('Are You Sure?', 'Once archived the code can no longer be activated or used',
+                                    () => deleteCode(),
+                                    () => console.log('')
+                                )
+                            }}
+                        />
+                        <Button
+                            title='ACTIVATE CODE'
+                            loading={action_loading}
+                            type='success'
+                            style={{ flex:3 }}
+                            onPress={() => activate()}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+    const is_changed = JSON.stringify(player_referral) != JSON.stringify(draft_referral) ? true : false
+    return (
+        <View float={float} style={{ flex:1 }} onLayout={(ev) => {
+            const { width, height } = ev.nativeEvent.layout
+            setSize({ width, height })
+        }}>
+            <FlatList
+                data={sections}
+                key='code_sections'
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+            {player_referral?.status == 'closed' ?
+             <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                <View float style={{ height:200, width:200, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1' textAlign='center'>CODE HAS BEEN ARCHIVED</Text>
+                </View>
+            </View>
+            :<></>}
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
+              <Button
+                title='CLOSE'
+                type='close'
+                style={{ flex:1 }}
+                onPress={() => onClose()}
+              />
+              {player_referral && draft_referral ?
+              <Button
+                title='SAVE CODE'
+                style={{ flex:3, marginLeft:5, opacity: is_changed && !action_loading ? 1 : 0.5 }}
+                loading={action_loading}
+                type='success'
+                disabled={!is_changed || action_loading}
+                onPress={() => handleUpdate(draft_referral)}
+              />
+              :
+                <Button
+                title='CREATE CODE'
+                style={{ flex:3, marginLeft:5, opacity: errors.length == 0 && !action_loading ? 1 : 0.5 }}
+                loading={action_loading}
+                type='success'
+                disabled={action_loading}
+                onPress={() => handleCreate()}
+              />
+              }
+            </View>
+        </View>
+    )
+}
+export default ReferralCodeManager

package/src/PartnerPortal/index.tsx

@@ -1,19 +1,21 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Text, View } from "../Components/Themed"
-import type { BracketCompetitionProps, CompanyEmbedProps, CompanyProps, CompetitionProps, EmbedPropertyProps, EmbedProps, ExternalKeyProps, MyPlayerProps, PollCampaignProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
+import type { BracketCompetitionProps, CompanyEmbedProps, CompanyPlayerProps, CompanyPlayerStatProps, CompanyProps, CompetitionProps, EmbedPropertyProps, EmbedProps, ExternalKeyProps, MyPlayerProps, PlayerReferralProps, PollCampaignProps, PromoProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
 import type { CompanyMemberProps } from '../Authenticator/api/types';
 import { PartnerPortalApi } from './api';
-import { FlatList, Image } from 'react-native';
+import { FlatList, Image, ScrollView } from 'react-native';
 import { useColors } from '../constants/useColors';
 import ImageUploader from '../Components/ImageUploader';
 import moment from 'moment-mini';
-import { Icons } from '../Components';
+import { Icons, SearchBox } from '../Components';
+import Pagination from '../Components/Pagination';
 
 type PartnerPortalProps = {
     me:MyPlayerProps,
     company_id:string,
     refresh_key?:string,
     onCreateEmbed:() => void,
+    onManageReferral: (pr?:PlayerReferralProps) => void,
     onCreateEngagement: (init_engagement?:string) => void,
     onSelectCompanyEmbed: (company_embed:CompanyEmbedProps) => void,
     onSelectCompetition: (competition:CompetitionProps) => void,
@@ -22,9 +24,9 @@ type PartnerPortalProps = {
     onSelectFlashCampaign: (flash_campaign:PollCampaignProps) => void
 }
 
-const sections = ['top_row','second_row','third_row']
+const sections = ['top_row','stats','referrals','second_row','third_row']
 
-const PartnerPortal = ({ me, company_id, refresh_key, onCreateEngagement, onSelectBracketCompetition, onCreateEmbed, onSelectCompanyEmbed, onSelectCompetition, onSelectFlashCampaign, onSelectSquaresCompetition }:PartnerPortalProps) => {
+const PartnerPortal = ({ me, company_id, refresh_key, onCreateEngagement, onSelectBracketCompetition, onManageReferral, onCreateEmbed, onSelectCompanyEmbed, onSelectCompetition, onSelectFlashCampaign, onSelectSquaresCompetition }:PartnerPortalProps) => {
     const Colors = useColors();
     const [ engagement_state, setEngagementState ] = useState<{
         loading: boolean,
@@ -50,17 +52,30 @@ const PartnerPortal = ({ me, company_id, refresh_key, onCreateEngagement, onSele
         loading: boolean,
         company?:CompanyProps,
         my_member?:CompanyMemberProps,
+        company_player_stats:CompanyPlayerStatProps[],
+        company_players:CompanyPlayerProps[],
+        company_players_offset:number,
+        player_referrals:PlayerReferralProps[],
+        promos:PromoProps[],
         company_members:CompanyMemberProps[],
         external_keys:ExternalKeyProps[],
         players:PublicPlayerProps[],
     }>({
         loading:false,
         company_members: [],
+        company_players_offset: 0,
         external_keys: [],
+        player_referrals:[],
+        company_player_stats:[],
+        company_players:[],
+        promos:[],
         players: []
-    })
-    const { company, external_keys, players, company_members } = state;
-
+    });
+    const [ referral_search, setReferralSearch ] = useState('');
+    const [ player_search, setPlayerSearch ] = useState('');
+    const { company, promos, company_players_offset, company_player_stats, company_players, player_referrals, external_keys, players, company_members } = state;
+    const filtered_referrals = player_referrals.filter(r => r.referral_code.toLowerCase().includes(referral_search.toLowerCase())).slice(0,5);
+    const filtered_players = company_players.sort((a,b) => b.revenue - a.revenue).filter(p => p.username.toLowerCase().includes(player_search.toLowerCase())).slice(0,5);
     useEffect(() => {
         PartnerPortalApi.setEnvironment();
         getStateData();
@@ -75,16 +90,32 @@ const PartnerPortal = ({ me, company_id, refresh_key, onCreateEngagement, onSele
         const s_playes = await PartnerPortalApi.getPlayersByPlayerIds(player_ids);
         const my_co_member = company_response?.company_members.find(cm => cm.player_id == me.player_id);
         const s_keys = await PartnerPortalApi.CompanyApi.getApiKeys(company_id);
+        const s_refer = await PartnerPortalApi.CompanyApi.getReferralCodesByCompanyId(company_id);
+        const s_stats = await PartnerPortalApi.CompanyApi.getCompanyPlayerStats(company_id);
+        const s_cps = await PartnerPortalApi.CompanyApi.getCompanyPlayers(company_id, 0);
         setState({
             ...state,
             loading: false,
             company: company_response?.company,
             external_keys: s_keys,
+            promos: s_refer.promos,
+            company_players: s_cps,
+            player_referrals: s_refer.player_referrals,
+            company_player_stats: s_stats,
             players: s_playes,
+            company_players_offset: 0,
             my_member:my_co_member,
             company_members: company_response?.company_members ?? []
         });
     }
+    const getAdditionalPlayers = async(page:number) => {
+        const s_cps = await PartnerPortalApi.CompanyApi.getCompanyPlayers(company_id, page);
+        setState({
+            ...state,
+            company_players: s_cps,
+            company_players_offset: page
+        })
+    }
 
     const getActiveEngagementData = async() => {
         setEngagementState({ ...engagement_state, loading:true });
@@ -217,6 +248,57 @@ const PartnerPortal = ({ me, company_id, refresh_key, onCreateEngagement, onSele
         )
     }
 
+    const renderPlayers = (data:{ item:CompanyPlayerProps, index:number }) => {
+        return (
+            <View transparent type='row' style={{ padding:10, margin:4, minWidth:300, flexGrow:1, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <Image
+                    source={{ uri: data.item.profile_pic }}
+                    style={{ height:40, width:40, borderRadius:100 }}
+                    resizeMode='cover'
+                />
+                <View float style={{ marginRight:10, marginLeft:10, padding:5, borderRadius:22, backgroundColor:data.item.vouched_status == 'verified' ? Colors.text.success : data.item.vouched_status == 'unverified' ? Colors.text.action : Colors.text.error }}>
+                    <Text theme='h1' color={Colors.text.white}>{data.item.vouched_status.toUpperCase()}</Text>
+                </View>
+                <View transparent style={{ flex:1, minWidth:200, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.username}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Used Code {data.item.code_used}</Text>
+                </View>
+                <View float style={{ marginRight:25, padding:5, borderRadius:22, backgroundColor:data.item.verified ? Colors.text.success : Colors.text.error }}>
+                    <Text theme='h1' color={Colors.text.white}>Email</Text>
+                </View>
+                <View float style={{ marginRight:25, padding:5, borderRadius:22, backgroundColor:data.item.phone_verified ? Colors.text.success : Colors.text.error }}>
+                    <Text theme='h1' color={Colors.text.white}>Phone</Text>
+                </View>
+                <View transparent style={{ alignItems:'flex-end' }}>
+                    <Text theme='h1' color={Colors.text.success}>${data.item.revenue.toFixed(2)}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Revenue Generated</Text>
+                </View>
+            </View>
+        )
+    }
+
+    const renderReferrals = (data:{ item:PlayerReferralProps, index:number }) => {
+        const promo = promos.find(e => e.promo_id == data.item.promo_id);
+        if(!promo){ return <></> }
+        const stats = company_player_stats.filter(ps => ps.referral_code.toLowerCase() == data.item.referral_code.toLowerCase());
+        const players_generated = stats.reduce((a,b) => a + b.player_count, 0)
+        return (
+            <Button 
+                transparent 
+                style={{ padding:10, borderRadius:0, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => onManageReferral(data.item)}>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.referral_code}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.status == 'pending' ? 'ACTIVE':  data.item.status.toUpperCase()} - {promo.description}</Text>
+                </View>
+                <View transparent style={{ alignItems:'flex-end' }}>
+                    <Text theme='h1' color={Colors.text.action}>{players_generated}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Players Generated</Text>
+                </View>
+            </Button>
+        )
+    }
+
     const renderMembers = (data:{ item:CompanyMemberProps, index:number }) => {
         const player = players.find(p => p.player_id == data.item.player_id);
         if(!player){ return <></> }
@@ -235,6 +317,7 @@ const PartnerPortal = ({ me, company_id, refresh_key, onCreateEngagement, onSele
         )
     }
 
+    
     const renderSections = (data:{ item:string, index:number }) => {
         switch(data.item){
             case 'top_row':
@@ -281,7 +364,7 @@ const PartnerPortal = ({ me, company_id, refresh_key, onCreateEngagement, onSele
                               :<></>}
                             </View>
                             <View transparent style={{ flexDirection:'row', flexWrap:'wrap'}}>
-                                {company_members.map((m,i) => {
+                                {company_members.filter(cm => !cm.hidden).map((m,i) => {
                                     return renderMembers({ item: m, index:i })
                                 })}
                             </View>
@@ -314,6 +397,78 @@ const PartnerPortal = ({ me, company_id, refresh_key, onCreateEngagement, onSele
 
                     </View>
                 )
+            case 'stats':
+                const player_count = company_player_stats.reduce((a,b) => a + b.player_count, 0);
+                return (
+                    <View transparent style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        <View float nativeID='player_count' style={{ flexGrow:1, minWidth: 250, margin:10 }}>
+                            <View transparent style={{ justifyContent:'center', alignItems:'center', padding:10 }}>
+                                <Text theme='h1' size={40}>{player_count}</Text>
+                            </View>
+                            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1' color={Colors.text.success}>Users Generated</Text>
+                              </View>
+                            </View>
+                        </View>
+                        <View float nativeID='company_referrals' style={{ flexGrow:4,  minWidth:300, margin:10 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Players Generated</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>See all players that have joined BettorEdge using your referral code</Text>
+                              </View>
+                            </View>
+                            <View style={{ padding:10 }}>
+                                <SearchBox hide_search_button onChange={(text) => setPlayerSearch(text)} />
+                            </View>
+                           <ScrollView horizontal={true} contentContainerStyle={{ flexGrow: 1 }}>
+                                <View transparent type='body' style={{ flex:1 }}>
+                                    <FlatList
+                                    data={filtered_players}
+                                    key={'company_players'}
+                                    keyExtractor={item => item.player_id.toString()}
+                                    renderItem={renderPlayers}
+                                    />
+                                </View>
+                            </ScrollView>
+                            <Pagination offset={company_players_offset} onNext={() => getAdditionalPlayers(company_players_offset + 1)} onPrevious={() => getAdditionalPlayers(company_players_offset - 1)} />
+                        </View>
+                        <View />
+                    </View>
+                )
+            case 'referrals':
+                return (
+                    <View transparent style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        <View float nativeID='company_referrals' style={{ flexGrow:4, flexBasis:4, minWidth:300, margin:10 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Referral Codes</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Active Referral Codes</Text>
+                              </View>
+                              <View transparent style={{ padding:10 }}>
+                                <Text theme='h1' color={Colors.text.action}>{player_referrals.length}</Text>
+                              </View>
+                              <Button
+                                title='CREATE'
+                                type='success'
+                                style={{ padding:10 }}
+                                onPress={() => onManageReferral()}
+                              />
+                            </View>
+                            <View style={{ padding:10 }}>
+                                <SearchBox hide_search_button onChange={(text) => setReferralSearch(text)} />
+                            </View>
+                            <View transparent type='body'>
+                                <FlatList
+                                    data={filtered_referrals.sort((a,b) => moment(a.create_datetime).unix() - moment(b.create_datetime).unix())}
+                                    key={'company_referrals'}
+                                    keyExtractor={item => item.player_referral_id.toString()}
+                                    renderItem={renderReferrals}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                )
             case 'second_row':
                 const active_embeds = company_embeds.length
                 return (

package/src/index.tsx

@@ -66,10 +66,12 @@ import ManageFlashMarket from './FlashMarket/components/ManageFlashMarket';
 import PartnerPortal from './PartnerPortal';
 import EmbedManager from './PartnerPortal/components/EmbedManager';
 import CreateEmbed from './PartnerPortal/components/CreateEmbed';
+import ReferralCodeManager from './PartnerPortal/components/ReferralCodeManager';
 export {
   Authenticator,
   Observer,
   CreateEmbed,
+  ReferralCodeManager,
   CreateEngagement,
   DiscordConnectionManager,
   BEEventApi,

package/src/types.d.ts

@@ -436,6 +436,27 @@ export interface CompanyProps {
     last_update_datetime: any
 }
 
+export interface CompanyPlayerStatProps {
+    player_count: number,
+    referral_code:string,
+    vouched_status:string,
+    revenue: number
+}
+
+export interface CompanyPlayerProps {
+    player_id:string,
+    username:string,
+    email:string,
+    profile_pic?:string,
+    phone:number,
+    verified:boolean,
+    phone_verified:boolean,
+    vouched_status:'verified'|'unverified'|'failed'
+    code_used:string,
+    revenue:number,
+    create_datetime:any
+}
+
 export interface PlayerPodcastProps {
     player_podcast_id:string,
     player_id:string,