be-components 7.4.7 → 7.5.1

package/src/BetRouter/components/MyOpportunities.tsx.bak

@@ -0,0 +1,440 @@
+import React, { useEffect, useState } from 'react';
+import type { OpportunityProps, OpportunityStatusLegProps, RouterOrderProps, RouterPartnerProps } from '../../types';
+import { Text, View, Button } from '../../Components/Themed';
+import { BetRouterApi } from '../api';
+import { FlatList, TouchableOpacity } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import { SearchBox, Icons } from '../../Components';
+import Pagination from '../../Components/Pagination';
+import OpportunityDetailModal from './OpportunityDetailModal';
+
+type MyOpportunitiesProps = {
+    partners:RouterPartnerProps[];
+    compact?:boolean;
+    insets?: { top: number; bottom: number; left: number; right: number };
+    onBuyOpportunity?: (opportunity: any, legIndex?: number) => void;
+}
+
+const ITEMS_PER_PAGE = 5;
+
+const MyOpportunities = ({ partners, compact = false, insets, onBuyOpportunity }:MyOpportunitiesProps) => {
+    const Colors = useColors();
+
+    const [ state, setState ] = useState<{
+        loading:boolean,
+        opportunities:OpportunityProps[],
+        opportunity_status_legs: OpportunityStatusLegProps[],
+        router_orders:RouterOrderProps[],
+        searchText: string,
+        currentPage: number,
+        selectedOpportunity: OpportunityProps | null,
+        showDetailModal: boolean
+    }>({
+        loading:false,
+        opportunities:[],
+        opportunity_status_legs:[],
+        router_orders:[],
+        searchText: '',
+        currentPage: 0,
+        selectedOpportunity: null,
+        showDetailModal: false
+    });
+
+    const { loading, opportunities, opportunity_status_legs, router_orders, searchText, currentPage, selectedOpportunity, showDetailModal } = state;
+
+    useEffect(() => {
+        BetRouterApi.setEnvironment();
+        getOpportunities();
+    },[]);
+
+    const getOpportunities = async() => {
+        setState({ ...state, loading: true });
+        const opps = await BetRouterApi.BetRouter.OpportunityApi.getMyOpenOpportunities();
+        setState({
+            ...state,
+            router_orders: opps.router_orders,
+            opportunities: opps.opportunities,
+            opportunity_status_legs: opps.opportunity_status_legs,
+            loading: false
+        })
+    }
+
+    // Filter and paginate opportunities
+    const filteredOpportunities = opportunities.filter(opp => {
+        if (!searchText) return true;
+
+        // Search in opportunity type
+        if (opp.opportunity_type.toLowerCase().includes(searchText.toLowerCase())) return true;
+
+        // Search in order titles
+        const oppOrders = router_orders.filter(order => order.opportunity_id === opp.opportunity_id);
+        return oppOrders.some(order => order.title?.toLowerCase().includes(searchText.toLowerCase()));
+    });
+
+    const totalPages = Math.ceil(filteredOpportunities.length / ITEMS_PER_PAGE);
+    const paginatedOpportunities = filteredOpportunities.slice(
+        currentPage * ITEMS_PER_PAGE,
+        (currentPage + 1) * ITEMS_PER_PAGE
+    );
+
+    const handleOpenDetail = (opp: OpportunityProps) => {
+        setState({ ...state, selectedOpportunity: opp, showDetailModal: true });
+    };
+
+    const handleCloseDetail = () => {
+        setState({ ...state, selectedOpportunity: null, showDetailModal: false });
+    };
+
+    const renderDetailModal = () => {
+        if (!selectedOpportunity) return null;
+
+        const opp = selectedOpportunity;
+        const isProfitable = (opp.expected_profit || 0) > 0;
+        const oppOrders = router_orders.filter(order => order.opportunity_id === opp.opportunity_id);
+
+        // Calculate available height respecting insets
+        const screenHeight = Dimensions.get('window').height;
+        const topInset = insets?.top || 0;
+        const bottomInset = insets?.bottom || 0;
+        const modalPadding = 32; // 16px top + 16px bottom
+        const maxModalHeight = screenHeight - topInset - bottomInset - modalPadding;
+
+        return (
+            <Modal
+                visible={showDetailModal}
+                transparent
+                animationType="fade"
+                onRequestClose={handleCloseDetail}
+            >
+                <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center', paddingTop: topInset, paddingBottom: bottomInset, paddingHorizontal: 16 }}>
+                    <View type='body' style={{ width: '100%', maxWidth: 500, borderRadius: 12, height: maxModalHeight }}>
+                        {/* Header */}
+                        <View type='header' style={{ padding: 16, borderTopLeftRadius: 12, borderTopRightRadius: 12, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <View transparent style={{ flex: 1 }}>
+                                <Text theme='h1' size={18}>
+                                    {opp.opportunity_type.toUpperCase()}
+                                </Text>
+                                <Text
+                                    theme='h2'
+                                    size={20}
+                                    color={isProfitable ? Colors.text.success : Colors.text.warning}
+                                    style={{ marginTop: 4 }}
+                                >
+                                    ${(opp.expected_profit || 0).toFixed(2)} profit
+                                </Text>
+                            </View>
+                            <TouchableOpacity onPress={handleCloseDetail}>
+                                <Icons.CloseIcon size={24} color={Colors.text.h1} />
+                            </TouchableOpacity>
+                        </View>
+
+                        {/* Content */}
+                        <View style={{ flex: 1 }}>
+                            <FlatList
+                                data={oppOrders}
+                                keyExtractor={(item, idx) => `${item.router_order_id}-${idx}`}
+                                style={{ flex: 1 }}
+                                contentContainerStyle={{ padding: 16 }}
+                            renderItem={({ item: order, index }) => {
+                                const partner = partners.find(p => p.partner_id === order.partner_id);
+                                const hasResult = order.result !== null && order.result !== undefined;
+                                const displayWinnings = hasResult ? order.net_winnings : order.potential_payout;
+                                const winningsLabel = hasResult
+                                    ? (order.result === 'win' ? '✓ Won'
+                                        : order.result === 'lose' ? '✗ Lost'
+                                        : order.result === 'push' ? '= Draw'
+                                        : order.result === 'cancelled' ? '✕ Cancelled'
+                                        : order.result)
+                                    : '⋯ Potential';
+
+                                return (
+                                    <View transparent style={{
+                                        padding: 12,
+                                        backgroundColor: Colors.views.header,
+                                        borderRadius: 8,
+                                        marginBottom: 12,
+                                        borderWidth: 1,
+                                        borderColor: Colors.borders.light
+                                    }}>
+                                        <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 }}>
+                                            <Text theme='h2' size={14}>
+                                                {partner?.name || 'Unknown'}
+                                            </Text>
+                                            <Text theme='h2' size={14}>
+                                                ${order.amount?.toFixed(2)}
+                                            </Text>
+                                        </View>
+
+                                        <Text theme='description' size={13} style={{ marginBottom: 8 }}>
+                                            {order.title}
+                                        </Text>
+
+                                        <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+                                            <View transparent>
+                                                <Text theme='description' size={11}>Contest</Text>
+                                                <Text theme='h2' size={12} style={{ marginTop: 2 }}>
+                                                    {order.contest_label}
+                                                </Text>
+                                            </View>
+
+                                            <View transparent>
+                                                <Text theme='description' size={11}>{winningsLabel}</Text>
+                                                <Text
+                                                    theme='h2'
+                                                    size={12}
+                                                    style={{ marginTop: 2 }}
+                                                    color={hasResult ? (order.result === 'win' ? Colors.text.success : order.result === 'loss' ? Colors.text.warning : undefined) : undefined}
+                                                >
+                                                    ${displayWinnings?.toFixed(2)}
+                                                </Text>
+                                            </View>
+
+                                            <View transparent>
+                                                <Text theme='description' size={11}>Price</Text>
+                                                <Text theme='h2' size={12} style={{ marginTop: 2 }}>
+                                                    {((order.price || 0) * 100).toFixed(1)}%
+                                                </Text>
+                                            </View>
+
+                                            <View transparent>
+                                                <Text theme='description' size={11}>Status</Text>
+                                                <Text theme='h2' size={12} style={{ marginTop: 2 }}>
+                                                    {order.status}
+                                                </Text>
+                                            </View>
+                                        </View>
+                                    </View>
+                                );
+                            }}
+                            ListFooterComponent={() => (
+                                <View transparent style={{ marginTop: 8, paddingTop: 16, borderTopWidth: 1, borderTopColor: Colors.borders.light }}>
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 }}>
+                                        <Text theme='description' size={13}>Total Bet</Text>
+                                        <Text theme='h2' size={15}>
+                                            ${opp.total_bet_amount.toFixed(2)}
+                                        </Text>
+                                    </View>
+
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 }}>
+                                        <Text theme='description' size={13}>Expected ROI</Text>
+                                        <Text theme='h2' size={15}>
+                                            {opp.expected_roi.toFixed(1)}%
+                                        </Text>
+                                    </View>
+
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 }}>
+                                        <Text theme='description' size={13}>Total Winnings</Text>
+                                        <Text theme='h2' size={15}>
+                                            ${opp.total_winnings.toFixed(2)}
+                                        </Text>
+                                    </View>
+
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 }}>
+                                        <Text theme='description' size={13}>Total Fees</Text>
+                                        <Text theme='h2' size={15}>
+                                            ${opp.total_fees.toFixed(2)}
+                                        </Text>
+                                    </View>
+
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                                        <Text theme='description' size={13}>Fill Status</Text>
+                                        <Text theme='h2' size={15}>
+                                            {opp.fill_status === 'all_filled' ? '✓ All filled' :
+                                             opp.fill_status === 'partially_filled' ? '⚠ Partial' :
+                                             opp.fill_status === 'failed' ? '✗ Failed' : '⋯ Pending'}
+                                        </Text>
+                                    </View>
+                                </View>
+                            )}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        );
+    };
+
+    const renderOpportunityCard = (data:{ item:OpportunityProps, index:number }) => {
+        const opp = data.item;
+        const isProfitable = (opp.expected_profit || 0) > 0;
+        const oppOrders = router_orders.filter(order => order.opportunity_id === opp.opportunity_id);
+        const firstOrder = oppOrders[0];
+        const partner = partners.find(p => p.partner_id === firstOrder?.partner_id);
+
+        return (
+            <TouchableOpacity onPress={() => handleOpenDetail(opp)}>
+                <View type='row' style={{ padding: 12, borderBottomWidth: 1, borderBottomColor: Colors.borders.light, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <View transparent style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+                        {/* Type & Profit */}
+                        <View transparent style={{ minWidth: 60 }}>
+                            <Text theme='h2' size={11} numberOfLines={1}>
+                                {opp.opportunity_type.toUpperCase()}
+                            </Text>
+                            <Text
+                                theme='h2'
+                                size={13}
+                                color={isProfitable ? Colors.text.success : Colors.text.warning}
+                            >
+                                ${(opp.expected_profit || 0).toFixed(2)}
+                            </Text>
+                        </View>
+
+                        {/* Partner/Contest */}
+                        <View transparent style={{ flex: 1, minWidth: 0 }}>
+                            {firstOrder && (
+                                <Text theme='description' size={11} numberOfLines={1}>
+                                    {partner?.name || 'Unknown'}
+                                </Text>
+                            )}
+                            <Text theme='description' size={10} numberOfLines={1}>
+                                {oppOrders.length} leg{oppOrders.length !== 1 ? 's' : ''}
+                            </Text>
+                        </View>
+
+                        {/* Bet */}
+                        <View transparent style={{ minWidth: 40 }}>
+                            <Text theme='h2' size={11}>
+                                ${opp.total_bet_amount.toFixed(0)}
+                            </Text>
+                        </View>
+
+                        {/* ROI */}
+                        <View transparent style={{ minWidth: 45 }}>
+                            <Text theme='h2' size={11}>
+                                {opp.expected_roi.toFixed(1)}%
+                            </Text>
+                        </View>
+
+                        {/* Status */}
+                        <View transparent style={{ minWidth: 20 }}>
+                            <Text theme='h2' size={13}>
+                                {opp.fill_status === 'all_filled' ? '✓' :
+                                 opp.fill_status === 'partially_filled' ? '⚠' :
+                                 opp.fill_status === 'failed' ? '✗' : '⋯'}
+                            </Text>
+                        </View>
+                    </View>
+
+                    <Icons.ChevronIcon size={16} color={Colors.text.descriptionLight} direction="right" />
+                </View>
+            </TouchableOpacity>
+        );
+    };
+
+    const renderOpportunities = (data:{ item:OpportunityProps, index:number }) => {
+        const opp = data.item;
+        const isProfitable = (opp.expected_profit || 0) > 0;
+
+        // Get orders for this opportunity
+        const oppOrders = router_orders.filter(order => order.opportunity_id === opp.opportunity_id);
+
+        if (compact) {
+            // Compact mode for desktop sidebar - show minimal info, clickable
+            return (
+                <TouchableOpacity onPress={() => handleOpenDetail(opp)}>
+                    <View type='row' style={{ padding:10, borderBottomWidth:1, borderBottomColor: Colors.borders.light }}>
+                        <View transparent style={{ flex:1 }}>
+                            <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom:6 }}>
+                                <Text theme='h1' size={14} numberOfLines={1}>
+                                    {opp.opportunity_type.toUpperCase()}
+                                </Text>
+                                <Text
+                                    theme='h2'
+                                    size={14}
+                                    color={isProfitable ? Colors.text.success : Colors.text.warning}
+                                >
+                                    ${(opp.expected_profit || 0).toFixed(2)}
+                                </Text>
+                            </View>
+
+                            <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                                <Text theme='description' size={11}>
+                                    {oppOrders.length} leg{oppOrders.length !== 1 ? 's' : ''} • ${opp.total_bet_amount.toFixed(2)}
+                                </Text>
+                                <Text theme='description' size={11}>
+                                    ROI: {opp.expected_roi.toFixed(1)}%
+                                </Text>
+                            </View>
+                        </View>
+                    </View>
+                </TouchableOpacity>
+            );
+        }
+
+        // Mobile-friendly card layout
+        return renderOpportunityCard(data);
+    }
+
+    const displayData = compact ? opportunities : paginatedOpportunities;
+
+    return (
+        <View style={{ flex:1 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:compact ? 8 : 10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+              <View transparent style={{ flex:1 }}>
+                <Text theme='h1' style={{ fontSize: compact ? 14 : 16 }}>
+                    {compact ? 'My Bets' : 'My Active Opportunities'}
+                </Text>
+                {compact && (
+                    <Text theme='description' style={{ fontSize:11, marginTop:2 }}>
+                        {opportunities.length} active
+                    </Text>
+                )}
+              </View>
+            </View>
+
+            {/* Search - only show if not compact */}
+            {!compact && (
+                <View transparent style={{ padding: 12, paddingBottom: 0 }}>
+                    <SearchBox
+                        placeholder="Search by contest..."
+                        onChange={(text) => setState({ ...state, searchText: text, currentPage: 0 })}
+                        hide_search_button
+                    />
+                </View>
+            )}
+
+            <View type='body' style={{ flex:1 }}>
+                {loading ? (
+                    <View transparent style={{ padding:10 }}>
+                        <Text theme='description' style={{ fontSize: compact ? 11 : 13 }}>
+                            Loading...
+                        </Text>
+                    </View>
+                ) : filteredOpportunities.length === 0 ? (
+                    <View transparent style={{ padding:10 }}>
+                        <Text theme='description' style={{ fontSize: compact ? 11 : 13 }}>
+                            {searchText ? 'No opportunities match your search' : 'No active opportunities'}
+                        </Text>
+                    </View>
+                ) : (
+                    <>
+                        <FlatList
+                            key='my_opps_list'
+                            data={displayData}
+                            keyExtractor={(item) => item.opportunity_id}
+                            renderItem={renderOpportunities}
+                        />
+
+                        {/* Pagination - only show if not compact */}
+                        {!compact && totalPages > 1 && (
+                            <View transparent style={{ padding: 12 }}>
+                                <Pagination
+                                    page={currentPage}
+                                    totalPages={totalPages}
+                                    onPageChange={(page) => setState({ ...state, currentPage: page })}
+                                />
+                                <Text theme='description' size={11} style={{ marginTop: 8, textAlign: 'center' }}>
+                                    Showing {currentPage * ITEMS_PER_PAGE + 1}-{Math.min((currentPage + 1) * ITEMS_PER_PAGE, filteredOpportunities.length)} of {filteredOpportunities.length}
+                                </Text>
+                            </View>
+                        )}
+                    </>
+                )}
+            </View>
+
+            {renderDetailModal()}
+        </View>
+    )
+}
+
+export default MyOpportunities