be-components 7.4.7 → 7.5.1

package/src/BetRouter/layouts/MobileAdminLayout.tsx

@@ -0,0 +1,387 @@
+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 Screen = 'menu' | 'league' | 'tool';
+
+type MobileAdminLayoutProps = {
+    insets: { top: number; bottom: number; left: number; right: number };
+    onClose?: () => void;
+    initialContestId?: string;
+    initialLeagueId?: string;
+};
+
+const MobileAdminLayout = ({ insets, onClose, initialContestId, initialLeagueId }: MobileAdminLayoutProps) => {
+    const Colors = useColors();
+
+    // Navigation state
+    const [leagues, setLeagues] = useState<RouterLeagueProps[]>([]);
+    const [selectedLeagueId, setSelectedLeagueId] = useState<string | null>(null);
+    const [selectedSection, setSelectedSection] = useState<NavigationSection>('info');
+    const [selectedTool, setSelectedTool] = useState<GlobalTool | null>(null);
+    const [currentScreen, setCurrentScreen] = useState<Screen>('menu');
+    const [searchText, setSearchText] = useState('');
+
+    useEffect(() => {
+        loadLeagues();
+    }, []);
+
+    // Handle deep linking
+    useEffect(() => {
+        if (initialLeagueId && leagues.length > 0) {
+            setSelectedLeagueId(initialLeagueId);
+            setSelectedSection('contests');
+            setCurrentScreen('league');
+        }
+    }, [initialLeagueId, leagues]);
+
+    const loadLeagues = async () => {
+        try {
+            const response = await getLeagues('active');
+            const leaguesData = Array.isArray(response) ? response : response || [];
+            setLeagues(leaguesData);
+        } catch (error) {
+            console.error('Failed to load leagues:', error);
+        }
+    };
+
+    const handleSelectLeague = (league: RouterLeagueProps) => {
+        setSelectedLeagueId(league.router_league_id);
+        setSelectedSection('info');
+        setCurrentScreen('league');
+    };
+
+    const handleSelectTool = (tool: GlobalTool) => {
+        setSelectedTool(tool);
+        setCurrentScreen('tool');
+    };
+
+    const handleBack = () => {
+        if (currentScreen === 'league' || currentScreen === 'tool') {
+            setCurrentScreen('menu');
+            setSelectedLeagueId(null);
+            setSelectedTool(null);
+        }
+    };
+
+    const filteredLeagues = leagues.filter(league =>
+        league.name.toLowerCase().includes(searchText.toLowerCase())
+    );
+
+    const selectedLeague = leagues.find(l => l.router_league_id === selectedLeagueId);
+
+    // ========== MAIN MENU SCREEN ==========
+    if (currentScreen === 'menu') {
+        return (
+            <View style={{ flex: 1, backgroundColor: Colors.views.header }}>
+                {/* Header */}
+                <View type='header' style={{
+                    padding: 16,
+                    paddingTop: insets.top + 16,
+                    borderBottomWidth: 1,
+                    borderBottomColor: Colors.borders.light
+                }}>
+                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <Text theme='h1' size={24}>Admin Portal</Text>
+                        {onClose && (
+                            <TouchableOpacity onPress={onClose}>
+                                <Icons.CloseIcon size={24} color={Colors.text.h1} />
+                            </TouchableOpacity>
+                        )}
+                    </View>
+                </View>
+
+                <ScrollView style={{ flex: 1 }}>
+                    {/* Global Tools Section */}
+                    <View transparent style={{ padding: 8 }}>
+                        <Text theme='description' size={12} style={{ marginBottom: 8, textTransform: 'uppercase' }}>
+                            Global Tools
+                        </Text>
+
+                        <TouchableOpacity
+                            onPress={() => handleSelectTool('jobs')}
+                            style={{
+                                padding: 12,
+                                backgroundColor: Colors.views.header,
+                                borderRadius: 8,
+                                borderWidth: 1,
+                                borderColor: Colors.borders.light,
+                                marginBottom: 8,
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between'
+                            }}
+                        >
+                            <View transparent>
+                                <Text theme='h2' size={16}>Job Manager</Text>
+                                <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                                    Manage automated jobs
+                                </Text>
+                            </View>
+                            <Icons.ChevronIcon size={20} color={Colors.text.descriptionLight} direction="right" />
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            onPress={() => handleSelectTool('auto-fill')}
+                            style={{
+                                padding: 12,
+                                backgroundColor: Colors.views.header,
+                                borderRadius: 8,
+                                borderWidth: 1,
+                                borderColor: Colors.borders.light,
+                                marginBottom: 8,
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between'
+                            }}
+                        >
+                            <View transparent>
+                                <Text theme='h2' size={16}>Auto-Fill Manager</Text>
+                                <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                                    Manage auto-fill settings
+                                </Text>
+                            </View>
+                            <Icons.ChevronIcon size={20} color={Colors.text.descriptionLight} direction="right" />
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            onPress={() => handleSelectTool('config')}
+                            style={{
+                                padding: 12,
+                                backgroundColor: Colors.views.header,
+                                borderRadius: 8,
+                                borderWidth: 1,
+                                borderColor: Colors.borders.light,
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between'
+                            }}
+                        >
+                            <View transparent>
+                                <Text theme='h2' size={16}>Config Manager</Text>
+                                <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                                    Manage system configuration
+                                </Text>
+                            </View>
+                            <Icons.ChevronIcon size={20} color={Colors.text.descriptionLight} direction="right" />
+                        </TouchableOpacity>
+                    </View>
+
+                    {/* Leagues Section */}
+                    <View transparent style={{ padding: 8, paddingTop: 0 }}>
+                        <Text theme='description' size={12} style={{ marginBottom: 8, textTransform: 'uppercase' }}>
+                            Leagues
+                        </Text>
+
+                        <View transparent style={{ marginBottom: 8 }}>
+                            <SearchBox
+                                placeholder="Search leagues..."
+                                onChange={(text) => setSearchText(text)}
+                                hide_search_button
+                            />
+                        </View>
+
+                        {filteredLeagues.map(league => (
+                            <TouchableOpacity
+                                key={league.router_league_id}
+                                onPress={() => handleSelectLeague(league)}
+                                style={{
+                                    padding: 12,
+                                    backgroundColor: Colors.views.header,
+                                    borderRadius: 8,
+                                    borderWidth: 1,
+                                    borderColor: Colors.borders.light,
+                                    marginBottom: 8,
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between'
+                                }}
+                            >
+                                <View transparent style={{ flex: 1 }}>
+                                    <Text theme='h2' size={16}>{league.name}</Text>
+                                    <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                                        {league.name}
+                                    </Text>
+                                </View>
+                                <Icons.ChevronIcon size={20} color={Colors.text.descriptionLight} direction="right" />
+                            </TouchableOpacity>
+                        ))}
+
+                        {filteredLeagues.length === 0 && (
+                            <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                                <Text theme='description' size={14}>
+                                    No leagues found
+                                </Text>
+                            </View>
+                        )}
+                    </View>
+                </ScrollView>
+            </View>
+        );
+    }
+
+    // ========== LEAGUE VIEW SCREEN ==========
+    if (currentScreen === 'league' && selectedLeague) {
+        return (
+            <View style={{ flex: 1, backgroundColor: Colors.views.header }}>
+                {/* Header */}
+                <View type='header' style={{
+                    padding: 16,
+                    paddingTop: insets.top + 16,
+                    borderBottomWidth: 1,
+                    borderBottomColor: Colors.borders.light
+                }}>
+                    <View transparent style={{ flexDirection: 'row', alignItems: 'center', gap: 12, marginBottom: 12 }}>
+                        <TouchableOpacity onPress={handleBack}>
+                            <Icons.ChevronIcon size={24} color={Colors.text.h1} direction="left" />
+                        </TouchableOpacity>
+                        <View transparent style={{ flex: 1 }}>
+                            <Text theme='h1' size={20}>{selectedLeague.name}</Text>
+                            <Text theme='description' size={12} style={{ marginTop: 2 }}>
+                                {selectedLeague.name}
+                            </Text>
+                        </View>
+                        {onClose && (
+                            <TouchableOpacity onPress={onClose}>
+                                <Icons.CloseIcon size={24} color={Colors.text.h1} />
+                            </TouchableOpacity>
+                        )}
+                    </View>
+
+                    {/* Tab Bar */}
+                    <View transparent style={{ flexDirection: 'row', gap: 4 }}>
+                        <TouchableOpacity
+                            onPress={() => setSelectedSection('info')}
+                            style={{
+                                flex: 1,
+                                paddingVertical: 12,
+                                borderBottomWidth: 2,
+                                borderBottomColor: selectedSection === 'info' ? Colors.text.success : 'transparent',
+                                alignItems: 'center'
+                            }}
+                        >
+                            <Text
+                                theme={selectedSection === 'info' ? 'h2' : 'description'}
+                                size={14}
+                            >
+                                Info
+                            </Text>
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            onPress={() => setSelectedSection('contests')}
+                            style={{
+                                flex: 1,
+                                paddingVertical: 12,
+                                borderBottomWidth: 2,
+                                borderBottomColor: selectedSection === 'contests' ? Colors.text.success : 'transparent',
+                                alignItems: 'center'
+                            }}
+                        >
+                            <Text
+                                theme={selectedSection === 'contests' ? 'h2' : 'description'}
+                                size={14}
+                            >
+                                Contests
+                            </Text>
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            onPress={() => setSelectedSection('participants')}
+                            style={{
+                                flex: 1,
+                                paddingVertical: 12,
+                                borderBottomWidth: 2,
+                                borderBottomColor: selectedSection === 'participants' ? Colors.text.success : 'transparent',
+                                alignItems: 'center'
+                            }}
+                        >
+                            <Text
+                                theme={selectedSection === 'participants' ? 'h2' : 'description'}
+                                size={14}
+                            >
+                                Participants
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+
+                {/* Content Area - Reuse existing components */}
+                <ScrollView style={{ flex: 1 }}>
+                    <View transparent style={{ flex: 1 }}>
+                        {selectedSection === 'info' && (
+                            <LeagueInfo league={selectedLeague} />
+                        )}
+
+                        {selectedSection === 'contests' && (
+                            <LeagueContests
+                                league={selectedLeague}
+                                initialContestId={initialContestId}
+                            />
+                        )}
+
+                        {selectedSection === 'participants' && (
+                            <LeagueParticipants league={selectedLeague} />
+                        )}
+                    </View>
+                </ScrollView>
+            </View>
+        );
+    }
+
+    // ========== GLOBAL TOOL SCREEN ==========
+    if (currentScreen === 'tool' && selectedTool) {
+        return (
+            <View style={{ flex: 1, backgroundColor: Colors.views.header }}>
+                {/* Header */}
+                <View type='header' style={{
+                    padding: 16,
+                    paddingTop: insets.top + 16,
+                    borderBottomWidth: 1,
+                    borderBottomColor: Colors.borders.light
+                }}>
+                    <View transparent style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+                        <TouchableOpacity onPress={handleBack}>
+                            <Icons.ChevronIcon size={24} color={Colors.text.h1} direction="left" />
+                        </TouchableOpacity>
+                        <View transparent style={{ flex: 1 }}>
+                            <Text theme='h1' size={20}>
+                                {selectedTool === 'jobs' ? 'Job Manager' : selectedTool === 'auto-fill' ? 'Auto-Fill Manager' : 'Config Manager'}
+                            </Text>
+                        </View>
+                        {onClose && (
+                            <TouchableOpacity onPress={onClose}>
+                                <Icons.CloseIcon size={24} color={Colors.text.h1} />
+                            </TouchableOpacity>
+                        )}
+                    </View>
+                </View>
+
+                {/* Content Area - Reuse existing components */}
+                <ScrollView style={{ flex: 1 }}>
+                    <View transparent style={{ flex: 1 }}>
+                        {selectedTool === 'jobs' && <JobManager />}
+                        {selectedTool === 'auto-fill' && <AutoFillView />}
+                        {selectedTool === 'config' && <ConfigManager />}
+                    </View>
+                </ScrollView>
+            </View>
+        );
+    }
+
+    return null;
+};
+
+export default MobileAdminLayout;