be-components 7.4.8 → 7.5.1

package/src/BetRouter/layouts/DesktopAdminLayout.tsx

@@ -0,0 +1,348 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text } from "../../Components/Themed";
+import { ScrollView, TouchableOpacity } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import { Icons, SearchBox } from '../../Components';
+import { getLeagues } from '../api';
+import type { RouterLeagueProps } from '../types';
+import LeagueInfo from '../components/admin/LeagueInfo';
+import LeagueContests from '../components/admin/LeagueContests';
+import LeagueParticipants from '../components/admin/LeagueParticipants';
+import AutoFillView from '../components/admin/AutoFillView';
+import ConfigManager from '../components/admin/ConfigManager';
+import JobManager from '../components/admin/JobManager';
+
+type NavigationSection = 'info' | 'contests' | 'participants';
+type GlobalTool = 'jobs' | 'auto-link' | 'auto-fill' | 'config';
+
+type DesktopAdminLayoutProps = {
+    insets: { top: number; bottom: number; left: number; right: number };
+    onClose?: () => void;
+    initialContestId?: string; // Optional contest ID to deep link to
+    initialLeagueId?: string; // Optional league ID to deep link to
+};
+
+const DesktopAdminLayout = ({ insets, onClose, initialContestId, initialLeagueId }: DesktopAdminLayoutProps) => {
+    const Colors = useColors();
+
+    // Navigation state
+    const [leagues, setLeagues] = useState<RouterLeagueProps[]>([]);
+    const [expandedLeagueId, setExpandedLeagueId] = useState<string | null>(null);
+    const [selectedLeagueId, setSelectedLeagueId] = useState<string | null>(null);
+    const [selectedSection, setSelectedSection] = useState<NavigationSection>('info');
+    const [selectedTool, setSelectedTool] = useState<GlobalTool | null>(null);
+    const [searchText, setSearchText] = useState('');
+
+    // Load leagues on mount
+    useEffect(() => {
+        loadLeagues();
+    }, []);
+
+    // Handle deep linking to specific contest
+    useEffect(() => {
+        if (initialLeagueId && leagues.length > 0) {
+            console.log('Deep linking to league:', initialLeagueId);
+            // Select and expand the league
+            setSelectedLeagueId(initialLeagueId);
+            setExpandedLeagueId(initialLeagueId);
+            setSelectedSection('contests');
+            setSelectedTool(null);
+        }
+    }, [initialLeagueId, leagues]);
+
+    const loadLeagues = async () => {
+        try {
+            const response = await getLeagues('active');
+            const leaguesData = Array.isArray(response) ? response : [];
+
+            setLeagues(leaguesData);
+            // Auto-select first league if available (only if not deep linking)
+            if (leaguesData.length > 0 && !selectedLeagueId && !initialLeagueId) {
+                const firstLeague = leaguesData[0];
+                if(!firstLeague){ return }
+                setSelectedLeagueId(firstLeague.router_league_id);
+                setExpandedLeagueId(firstLeague.router_league_id);
+            }
+        } catch (error) {
+            console.error('Failed to load leagues:', error);
+        }
+    };
+
+    const toggleLeagueExpansion = (leagueId: string) => {
+        if (expandedLeagueId === leagueId) {
+            setExpandedLeagueId(null);
+        } else {
+            setExpandedLeagueId(leagueId);
+            setSelectedLeagueId(leagueId);
+            setSelectedSection('info');
+            setSelectedTool(null); // Clear any selected tool
+        }
+    };
+
+    const selectSection = (leagueId: string, section: NavigationSection) => {
+        setSelectedLeagueId(leagueId);
+        setSelectedSection(section);
+        setSelectedTool(null);
+    };
+
+    const selectTool = (tool: GlobalTool) => {
+        setSelectedTool(tool);
+        setSelectedSection('info'); // Reset section when selecting a tool
+    };
+
+    const filteredLeagues = leagues.filter(league =>
+        league.name.toLowerCase().includes(searchText.toLowerCase())
+    );
+
+    const selectedLeague = leagues.find(l => l.router_league_id === selectedLeagueId);
+
+    const renderLeagueNav = (league: RouterLeagueProps) => {
+        const isExpanded = expandedLeagueId === league.router_league_id;
+        const isSelected = selectedLeagueId === league.router_league_id;
+
+        return (
+            <View key={league.router_league_id} transparent style={{ marginBottom: 4 }}>
+                {/* League Header */}
+                <TouchableOpacity
+                    onPress={() => toggleLeagueExpansion(league.router_league_id)}
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        padding: 12,
+                        backgroundColor: isSelected ? Colors.views.body : 'transparent',
+                        borderRadius: 6,
+                    }}
+                >
+                    <Icons.ChevronIcon
+                        direction={isExpanded ? 'down' : 'right'}
+                        size={8}
+                        color={Colors.text.h1}
+                    />
+                    <Text theme='h2' size={14} style={{ flex: 1, marginLeft:10 }}>
+                        {league.name}
+                    </Text>
+                </TouchableOpacity>
+
+                {/* Sub-sections */}
+                {isExpanded && (
+                    <View transparent style={{ marginLeft: 24, marginTop: 4 }}>
+                        {(['info', 'contests', 'participants'] as NavigationSection[]).map(section => {
+                            const isActive = isSelected && selectedSection === section && !selectedTool;
+                            return (
+                                <TouchableOpacity
+                                    key={section}
+                                    onPress={() => selectSection(league.router_league_id, section)}
+                                    style={{
+                                        padding: 10,
+                                        paddingLeft: 16,
+                                        backgroundColor: isActive ? Colors.views.header : 'transparent',
+                                        borderRadius: 4,
+                                        marginBottom: 2,
+                                    }}
+                                >
+                                    <Text
+                                        theme={isActive ? 'h2' : 'description'}
+                                        size={13}
+                                    >
+                                        {section.charAt(0).toUpperCase() + section.slice(1)}
+                                    </Text>
+                                </TouchableOpacity>
+                            );
+                        })}
+                    </View>
+                )}
+            </View>
+        );
+    };
+
+    return (
+        <View transparent style={{ flex: 1, flexDirection: 'row' }}>
+            {/* Left Navigation Sidebar */}
+            <View
+                type='body'
+                style={{
+                    width: 280,
+                    borderRightWidth: 2,
+                    borderRightColor: Colors.borders.light,
+                }}
+            >
+                {/* Header with close button */}
+                <View
+                    type='header'
+                    style={{
+                        padding: 16,
+                        paddingTop: insets.top + 16,
+                        borderBottomWidth: 2,
+                        borderBottomColor: Colors.borders.light,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                    }}
+                >
+                    <Text theme='h1' size={18}>Admin Portal</Text>
+                    {onClose && (
+                        <TouchableOpacity onPress={onClose}>
+                            <Icons.CloseIcon size={24} color={Colors.text.h1} />
+                        </TouchableOpacity>
+                    )}
+                </View>
+
+                {/* Search */}
+                <View transparent style={{ padding: 12 }}>
+                    <SearchBox
+                        placeholder="Search leagues..."
+                        onChange={setSearchText}
+                        hide_search_button
+                    />
+                </View>
+
+                {/* Leagues Navigation */}
+                <ScrollView style={{ flex: 1 }}>
+                    <View transparent style={{ padding: 12, paddingTop: 4 }}>
+                        {filteredLeagues.map(renderLeagueNav)}
+                    </View>
+
+                    {/* Divider */}
+                    <View
+                        transparent
+                        style={{
+                            height: 2,
+                            backgroundColor: Colors.borders.light,
+                            marginVertical: 12,
+                        }}
+                    />
+
+                    {/* Global Tools */}
+                    <View transparent style={{ padding: 12 }}>
+                        <Text theme='description' size={11} style={{ marginBottom: 8, paddingLeft: 4 }}>
+                            GLOBAL TOOLS
+                        </Text>
+
+                        <TouchableOpacity
+                            onPress={() => selectTool('jobs')}
+                            style={{
+                                padding: 10,
+                                paddingLeft: 16,
+                                backgroundColor: selectedTool === 'jobs' ? Colors.views.header : 'transparent',
+                                borderRadius: 4,
+                                marginBottom: 2,
+                            }}
+                        >
+                            <Text
+                                theme={selectedTool === 'jobs' ? 'h2' : 'description'}
+                                size={13}
+                            >
+                                Job Manager
+                            </Text>
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            onPress={() => selectTool('auto-link')}
+                            style={{
+                                padding: 10,
+                                paddingLeft: 16,
+                                backgroundColor: selectedTool === 'auto-link' ? Colors.views.header : 'transparent',
+                                borderRadius: 4,
+                                marginBottom: 2,
+                            }}
+                        >
+                            <Text
+                                theme={selectedTool === 'auto-link' ? 'h2' : 'description'}
+                                size={13}
+                            >
+                                Auto-Link
+                            </Text>
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            onPress={() => selectTool('auto-fill')}
+                            style={{
+                                padding: 10,
+                                paddingLeft: 16,
+                                backgroundColor: selectedTool === 'auto-fill' ? Colors.views.header : 'transparent',
+                                borderRadius: 4,
+                                marginBottom: 2,
+                            }}
+                        >
+                            <Text
+                                theme={selectedTool === 'auto-fill' ? 'h2' : 'description'}
+                                size={13}
+                            >
+                                Auto-Fill Manager
+                            </Text>
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            onPress={() => selectTool('config')}
+                            style={{
+                                padding: 10,
+                                paddingLeft: 16,
+                                backgroundColor: selectedTool === 'config' ? Colors.views.header : 'transparent',
+                                borderRadius: 4,
+                            }}
+                        >
+                            <Text
+                                theme={selectedTool === 'config' ? 'h2' : 'description'}
+                                size={13}
+                            >
+                                Config Manager
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+                </ScrollView>
+            </View>
+
+            {/* Main Content Area */}
+            <View transparent style={{ flex: 1 }}>
+                <ScrollView style={{ flex: 1 }}>
+                    <View transparent style={{ padding: 20 }}>
+                        {/* Render content based on selection */}
+                        {selectedTool === 'jobs' && (
+                            <JobManager />
+                        )}
+
+                        {selectedTool === 'auto-link' && (
+                            <View transparent>
+                                <Text theme='h1' size={24}>Auto-Link</Text>
+                                <Text theme='description' size={14} style={{ marginTop: 8 }}>
+                                    Automatic linking tools coming soon...
+                                </Text>
+                            </View>
+                        )}
+
+                        {selectedTool === 'auto-fill' && (
+                            <AutoFillView />
+                        )}
+
+                        {selectedTool === 'config' && (
+                            <ConfigManager />
+                        )}
+
+                        {!selectedTool && selectedLeague && selectedSection === 'info' && (
+                            <LeagueInfo league={selectedLeague} />
+                        )}
+
+                        {!selectedTool && selectedLeague && selectedSection === 'contests' && (
+                            <LeagueContests league={selectedLeague} initialContestId={initialContestId} />
+                        )}
+
+                        {!selectedTool && selectedLeague && selectedSection === 'participants' && (
+                            <LeagueParticipants league={selectedLeague} />
+                        )}
+
+                        {!selectedTool && !selectedLeague && (
+                            <View transparent style={{ alignItems: 'center', paddingTop: 60 }}>
+                                <Icons.AlertIcon size={64} color={Colors.text.descriptionLight} />
+                                <Text theme='description' size={16} style={{ marginTop: 16 }}>
+                                    Select a league to get started
+                                </Text>
+                            </View>
+                        )}
+                    </View>
+                </ScrollView>
+            </View>
+        </View>
+    );
+};
+
+export default DesktopAdminLayout;

package/src/BetRouter/layouts/DesktopLayout.tsx

@@ -0,0 +1,292 @@
+import React, { useState } from 'react';
+import { View, Text, Button } from "../../Components/Themed";
+import type {
+    RouterMarketProps,
+    RouterMarketSideProps,
+    RouterMarketVariableProps,
+    RouterContestProps,
+    RouterLeagueProps,
+    RouterPartnerProps,
+    PartnerMarketProps,
+    BuyOpportunity
+} from '../types';
+import type { MyPlayerProps, GetContestResponse } from '../../types';
+import { ScrollView, Modal } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import BuyOpportunities from '../components/BuyOpportunities';
+import MyOpportunities from '../components/MyOpportunities';
+import OpportunityHistory from '../components/OpportunityHistory';
+import ContestLiquidity from '../components/ContestLiquidity';
+import AccountManager from '../components/AccountManager';
+import ContestSelector from '../components/ContestSelector';
+import moment from 'moment-mini';
+
+type DesktopLayoutProps = {
+    me: MyPlayerProps;
+    partners: RouterPartnerProps[];
+    leagues: RouterLeagueProps[];
+    selectedLeague: RouterLeagueProps | null;
+    contests: RouterContestProps[];
+    filteredContests: RouterContestProps[];
+    selectedContest: RouterContestProps | null;
+    contestDetails: GetContestResponse | undefined;
+    opportunities: {
+        router_contests: RouterContestProps[];
+        contests_processed: number;
+        total_liquidity_count: number;
+        total_opportunities: number;
+        partner_markets: PartnerMarketProps[];
+        router_market_variables: RouterMarketVariableProps[];
+        router_markets: RouterMarketProps[];
+        router_market_sides: RouterMarketSideProps[];
+        partners: RouterPartnerProps[];
+        opportunities: BuyOpportunity[];
+    };
+    opps_loading: boolean;
+    size: { width: number; height: number };
+    insets: { top: number; bottom: number; left: number; right: number };
+    onSelectLeague: (league: RouterLeagueProps) => void;
+    onSelectContest: (contest: RouterContestProps) => void;
+    onOpenAdminPortal: (initialContestId?: string, initialLeagueId?: string) => void;
+    onBuyOpportunity: (opportunity: BuyOpportunity, legIndex?: number) => void;
+    onRefreshOpportunities?: () => Promise<void>;
+};
+
+const DesktopLayout = ({
+    me,
+    partners,
+    leagues,
+    selectedLeague,
+    //contests,
+    filteredContests,
+    selectedContest,
+    //contestDetails,
+    opportunities,
+    opps_loading,
+    size,
+    insets,
+    onSelectLeague,
+    onSelectContest,
+    onOpenAdminPortal,
+    onBuyOpportunity,
+    onRefreshOpportunities
+}: DesktopLayoutProps) => {
+    const Colors = useColors();
+    const [collapsedPanels, setCollapsedPanels] = useState<Set<string>>(new Set());
+    //const [showContestModal, setShowContestModal] = useState(false);
+
+    const togglePanel = (panelKey: string) => {
+        const newSet = new Set(collapsedPanels);
+        if (newSet.has(panelKey)) {
+            newSet.delete(panelKey);
+        } else {
+            newSet.add(panelKey);
+        }
+        setCollapsedPanels(newSet);
+    };
+
+    const isCollapsed = (panelKey: string) => collapsedPanels.has(panelKey);
+
+    return (
+        <View style={{ flex: 1 }}>
+            {/* Main 3-Column Dashboard */}
+            <View style={{
+                flex: 1,
+                flexDirection: 'row'
+            }}>
+                {/* Left Column - 25% - My Bets + History */}
+                <View style={{
+                    width: isCollapsed('left') ? 50 : '25%',
+                    minWidth: isCollapsed('left') ? 50 : 300,
+                    borderRightWidth: 1,
+                    borderRightColor: Colors.borders.light
+                }}>
+                    {isCollapsed('left') ? (
+                        <View style={{ padding: 10, alignItems: 'center' }}>
+                            <Button
+                                type='text'
+                                title='▶'
+                                onPress={() => togglePanel('left')}
+                                style={{ padding: 5 }}
+                            />
+                        </View>
+                    ) : (
+                        <View style={{ flex: 1 }}>
+                            {/* Collapse button */}
+                            <View transparent style={{
+                                position: 'absolute',
+                                top: 10,
+                                right: 5,
+                                zIndex: 10
+                            }}>
+                                <Button
+                                    type='text'
+                                    title='◀'
+                                    onPress={() => togglePanel('left')}
+                                    style={{ padding: 5, opacity: 0.5 }}
+                                />
+                            </View>
+
+                            <ScrollView style={{ flex: 1 }}>
+                                {/* Account Manager */}
+                                <View float style={{ margin: 10 }}>
+                                    <AccountManager
+                                        me={me}
+                                        onOpenAdminPortal={onOpenAdminPortal}
+                                    />
+                                </View>
+
+                                {/* My Active Bets */}
+                                <View float style={{ margin: 10, minHeight: 350 }}>
+                                    <MyOpportunities
+                                        partners={partners}
+                                        compact={true}
+                                        insets={insets}
+                                        onBuyOpportunity={onBuyOpportunity}
+                                    />
+                                </View>
+
+                                {/* History/Stats */}
+                                <View float style={{ margin: 10, minHeight: 300 }}>
+                                    <OpportunityHistory
+                                        me={me}
+                                        compact={true}
+                                        insets={insets}
+                                        partners={partners}
+                                    />
+                                </View>
+                            </ScrollView>
+                        </View>
+                    )}
+                </View>
+
+                {/* Center Column - 50% - Buy Opportunities */}
+                <View style={{
+                    flex: 1,
+                    minWidth: 400
+                }}>
+                    <View float style={{ margin: 10, flex: 1 }}>
+                        <BuyOpportunities
+                            loading={opps_loading}
+                            router_markets={opportunities.router_markets}
+                            router_market_sides={opportunities.router_market_sides}
+                            router_market_variables={opportunities.router_market_variables}
+                            partner_markets={opportunities.partner_markets}
+                            buy_opportunities={opportunities.opportunities}
+                            width={size.width}
+                            partners={opportunities.partners}
+                            router_contests={opportunities.router_contests}
+                            insets={insets}
+                            onBuyOpportunity={onBuyOpportunity}
+                            onRefresh={onRefreshOpportunities}
+                        />
+                    </View>
+                </View>
+
+                {/* Right Column - 25% - Contest List */}
+                <View style={{
+                    width: isCollapsed('right') ? 50 : '25%',
+                    minWidth: isCollapsed('right') ? 50 : 300,
+                    borderLeftWidth: 1,
+                    borderLeftColor: Colors.borders.light
+                }}>
+                    {isCollapsed('right') ? (
+                        <View style={{ padding: 10, alignItems: 'center' }}>
+                            <Button
+                                type='text'
+                                title='◀'
+                                onPress={() => togglePanel('right')}
+                                style={{ padding: 5 }}
+                            />
+                        </View>
+                    ) : (
+                        <View style={{ flex: 1 }}>
+                            {/* Collapse button */}
+                            <View transparent style={{
+                                position: 'absolute',
+                                top: 10,
+                                left: 5,
+                                zIndex: 10
+                            }}>
+                                <Button
+                                    type='text'
+                                    title='▶'
+                                    onPress={() => togglePanel('right')}
+                                    style={{ padding: 5, opacity: 0.5 }}
+                                />
+                            </View>
+
+                            <ContestSelector
+                                leagues={leagues}
+                                selectedLeague={selectedLeague}
+                                contests={filteredContests}
+                                selectedContest={selectedContest}
+                                onSelectLeague={onSelectLeague}
+                                onSelectContest={onSelectContest}
+                            />
+                        </View>
+                    )}
+                </View>
+            </View>
+
+            {/* Contest Liquidity Modal */}
+            {selectedContest && (
+                <Modal
+                    visible={true}
+                    transparent={true}
+                    animationType="fade"
+                    onRequestClose={() => onSelectContest(null as any)}
+                >
+                    <View style={{
+                        flex: 1,
+                        backgroundColor: 'rgba(0,0,0,0.5)',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        padding: 20
+                    }}>
+                        <View float style={{
+                            width: '95%',
+                            height: '90%',
+                            borderRadius: 8,
+                            overflow: 'hidden'
+                        }}>
+                            <View type='header' style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                padding: 15,
+                                borderBottomWidth: 1,
+                                borderBottomColor: Colors.borders.light
+                            }}>
+                                <View transparent style={{ flex: 1 }}>
+                                    <Text theme='h1' style={{ fontSize: 18 }}>
+                                        {selectedContest.contest_label}
+                                    </Text>
+                                    <Text theme='description' style={{ fontSize: 12, marginTop: 2 }}>
+                                        {moment(selectedContest.scheduled_datetime).format('ddd, MMM D, YYYY [at] h:mm A')}
+                                    </Text>
+                                </View>
+                                <Button
+                                    type='text'
+                                    title='✕ Close'
+                                    onPress={() => onSelectContest(null as any)}
+                                    style={{ padding: 8 }}
+                                />
+                            </View>
+                            <ScrollView style={{ flex: 1 }}>
+                                <ContestLiquidity
+                                    router_contest_id={selectedContest.router_contest_id}
+                                    include_opportunities={true}
+                                    onBuyOpportunity={onBuyOpportunity}
+                                    me={me}
+                                    onOpenAdminPortal={onOpenAdminPortal}
+                                />
+                            </ScrollView>
+                        </View>
+                    </View>
+                </Modal>
+            )}
+        </View>
+    );
+};
+
+export default DesktopLayout;