be-components 7.4.8 → 7.5.2

package/src/BetRouter/components/PlacedOpportunityModal.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import { Text, View } from '../../Components/Themed';
+import { Modal, TouchableOpacity, FlatList, Dimensions } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import type { OpportunityProps, RouterOrderProps, RouterPartnerProps } from '../types';
+
+type PlacedOpportunityModalProps = {
+    visible: boolean;
+    opportunity: OpportunityProps | null;
+    orders: RouterOrderProps[];
+    partners: RouterPartnerProps[];
+    onClose: () => void;
+    insets?: { top: number; bottom: number; left: number; right: number };
+};
+
+const PlacedOpportunityModal = ({
+    visible,
+    opportunity,
+    orders,
+    partners,
+    onClose,
+    insets
+}: PlacedOpportunityModalProps) => {
+    const Colors = useColors();
+
+    if (!opportunity) return null;
+
+    // Use status to determine which data to show
+    const isClosed = opportunity.status === 'closed';
+    const profit = isClosed ? (opportunity.actual_profit || 0) : (opportunity.expected_profit || 0);
+    const roi = isClosed ? (opportunity.actual_roi || 0) : (opportunity.expected_roi || 0);
+    const isProfitable = profit > 0;
+    const oppOrders = orders.filter(order => order.opportunity_id === opportunity.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;
+    const maxModalHeight = screenHeight - topInset - bottomInset - modalPadding;
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="fade"
+            onRequestClose={onClose}
+        >
+            <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}>
+                                {opportunity.opportunity_type.toUpperCase()}
+                            </Text>
+                            <Text
+                                theme='h2'
+                                size={20}
+                                color={isProfitable ? Colors.text.success : Colors.text.warning}
+                                style={{ marginTop: 4 }}
+                            >
+                                ${profit.toFixed(2)} profit
+                            </Text>
+                        </View>
+                        <TouchableOpacity onPress={onClose}>
+                            <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 }) => {
+                                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';
+                                const partner = partners.find(p => p.partner_id === order.partner_id);
+
+                                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}>{winningsLabel}</Text>
+                                                <Text theme='h2' size={12} style={{ marginTop: 2 }}>
+                                                    ${displayWinnings?.toFixed(2) || '0.00'}
+                                                </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}>{isClosed ? 'Invested' : 'Total Bet'}</Text>
+                                        <Text theme='h2' size={15}>
+                                            ${opportunity.total_bet_amount.toFixed(2)}
+                                        </Text>
+                                    </View>
+
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 }}>
+                                        <Text theme='description' size={13}>{isClosed ? 'Actual ROI' : 'Expected ROI'}</Text>
+                                        <Text theme='h2' size={15}>
+                                            {(roi * 100).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}>
+                                            ${opportunity.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}>
+                                            ${opportunity.total_fees.toFixed(2)}
+                                        </Text>
+                                    </View>
+
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                                        <Text theme='description' size={13}>{isClosed ? 'Profit' : 'Fill Status'}</Text>
+                                        {isClosed ? (
+                                            <Text theme='h2' size={15} color={isProfitable ? Colors.text.success : Colors.text.error}>
+                                                ${profit.toFixed(2)}
+                                            </Text>
+                                        ) : (
+                                            <Text theme='h2' size={15}>
+                                                {opportunity.fill_status === 'all_filled' ? '✓ All filled' :
+                                                 opportunity.fill_status === 'partially_filled' ? '⚠ Partial' :
+                                                 opportunity.fill_status === 'failed' ? '✗ Failed' : '⋯ Pending'}
+                                            </Text>
+                                        )}
+                                    </View>
+                                </View>
+                            )}
+                        />
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+export default PlacedOpportunityModal;

package/src/BetRouter/components/admin/AutoFillView.tsx

@@ -0,0 +1,275 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button } from "../../../Components/Themed";
+import { ActivityIndicator } from 'react-native';
+import { useColors } from '../../../constants/useColors';
+import { BetRouterApi } from '../../api';
+import { Icons, SearchBox } from '../../../Components';
+import Switch from '../../../Components/Switch';
+import moment from 'moment-mini';
+import type {
+    RouterContestProps,
+    MarketContestProps,
+    RouterMarketProps
+} from '../../types';
+
+type AutoFillData = {
+    router_contests: RouterContestProps[];
+    market_contests: MarketContestProps[];
+    loading: boolean;
+    searchValue: string;
+    router_markets: RouterMarketProps[];
+};
+
+const AutoFillView = () => {
+    const Colors = useColors();
+
+    const [data, setData] = useState<AutoFillData>({
+        router_contests: [],
+        market_contests: [],
+        loading: true,
+        searchValue: '',
+        router_markets: []
+    });
+
+    useEffect(() => {
+        loadAutoFillData();
+        loadRouterMarkets();
+    }, []);
+
+    const loadAutoFillData = async () => {
+        setData(prev => ({ ...prev, loading: true }));
+        try {
+            const result = await BetRouterApi.BetRouter.ContestApi.getAutoFillContests();
+            setData(prev => ({
+                ...prev,
+                router_contests: result.router_contests || [],
+                market_contests: result.market_contests || [],
+                loading: false
+            }));
+        } catch (error) {
+            console.error('Failed to load auto-fill data:', error);
+            alert('Error loading auto-fill data: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const loadRouterMarkets = async () => {
+        try {
+            const markets = await BetRouterApi.BetRouter.MarketApi.getRouterMarkets();
+            setData(prev => ({ ...prev, router_markets: Array.isArray(markets) ? markets : [] }));
+        } catch (error) {
+            console.error('Failed to load router markets:', error);
+        }
+    };
+
+    const toggleContestAutoFill = async (contest: RouterContestProps) => {
+        try {
+            setData(prev => ({ ...prev, loading: true }));
+            await BetRouterApi.BetRouter.ContestApi.updateRouterContest(
+                contest.router_contest_id,
+                { auto_fill: !contest.auto_fill }
+            );
+            await loadAutoFillData();
+        } catch (error) {
+            console.error('Error updating contest auto-fill:', error);
+            alert('Error updating contest: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const toggleMarketContestAutoFill = async (marketContest: MarketContestProps) => {
+        try {
+            setData(prev => ({ ...prev, loading: true }));
+            await BetRouterApi.BetRouter.MarketApi.updateMarketContest(
+                marketContest.market_contest_id,
+                { auto_fill: !marketContest.auto_fill }
+            );
+            await loadAutoFillData();
+        } catch (error) {
+            console.error('Error updating market contest auto-fill:', error);
+            alert('Error updating market contest: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const getMarketName = (router_market_id: string) => {
+        const market = data.router_markets.find(m => m.router_market_id === router_market_id);
+        return market?.market_label || router_market_id;
+    };
+
+    const getMarketContestsForContest = (router_contest_id: string) => {
+        return data.market_contests.filter(mc => mc.router_contest_id === router_contest_id);
+    };
+
+    const filteredContests = data.router_contests.filter(contest =>
+        data.searchValue === '' ||
+        contest.contest_label.toLowerCase().includes(data.searchValue.toLowerCase()) ||
+        contest.contest_label.toLowerCase().includes(data.searchValue.toLowerCase()) ||
+        contest.router_contest_id.toLowerCase().includes(data.searchValue.toLowerCase())
+    );
+
+    if (data.loading) {
+        return (
+            <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                <ActivityIndicator size="large" color={Colors.text.h1} />
+            </View>
+        );
+    }
+
+    return (
+        <View transparent style={{ flex: 1 }}>
+            {/* Header */}
+            <View transparent style={{ marginBottom: 24 }}>
+                <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <View transparent>
+                        <Text theme='h1' size={24}>Auto-Fill Manager</Text>
+                        <Text theme='description' size={14} style={{ marginTop: 8 }}>
+                            View and manage all contests and markets that are currently auto-filling
+                        </Text>
+                    </View>
+                    <Button
+                        type='action'
+                        title='Refresh'
+                        onPress={loadAutoFillData}
+                    />
+                </View>
+            </View>
+
+            {/* Stats Cards */}
+            <View transparent style={{ flexDirection: 'row', gap: 16, marginBottom: 24 }}>
+                <View type='body' style={{ flex: 1, padding: 16, borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light }}>
+                    <Text theme='description' size={12}>CONTESTS WITH AUTO-FILL</Text>
+                    <Text theme='h1' size={32} style={{ marginTop: 8 }}>{data.router_contests.length}</Text>
+                    <Text theme='description' size={11} style={{ marginTop: 4 }}>
+                        Total router contests
+                    </Text>
+                </View>
+
+                <View type='body' style={{ flex: 1, padding: 16, borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light }}>
+                    <Text theme='description' size={12}>MARKETS WITH AUTO-FILL</Text>
+                    <Text theme='h1' size={32} style={{ marginTop: 8 }}>{data.market_contests.length}</Text>
+                    <Text theme='description' size={11} style={{ marginTop: 4 }}>
+                        Total market auto-fills
+                    </Text>
+                </View>
+            </View>
+
+            {/* Search Box */}
+            <View transparent style={{ marginBottom: 16 }}>
+                <SearchBox
+                    placeholder="Search contests..."
+                    onChange={(text) => setData(prev => ({ ...prev, searchValue: text }))}
+                    hide_search_button
+                />
+            </View>
+
+            {/* Contest List */}
+            <View type='body' style={{ borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light, overflow: 'hidden' }}>
+                <View type='header' style={{ padding: 16 }}>
+                    <Text theme='h2' size={16}>Auto-Fill Contests</Text>
+                    <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                        {filteredContests.length} contest{filteredContests.length !== 1 ? 's' : ''} with auto-fill enabled
+                    </Text>
+                </View>
+
+                <View transparent style={{ padding: 16 }}>
+                    {filteredContests.length === 0 ? (
+                        <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                            <Icons.AlertIcon size={48} color={Colors.text.descriptionLight} />
+                            <Text theme='description' size={14} style={{ marginTop: 16, textAlign: 'center' }}>
+                                {data.searchValue
+                                    ? 'No contests match your search'
+                                    : 'No contests with auto-fill enabled'}
+                            </Text>
+                        </View>
+                    ) : (
+                        filteredContests.map((contest) => {
+                            const marketContests = getMarketContestsForContest(contest.router_contest_id);
+                            return (
+                                <View
+                                    key={contest.router_contest_id}
+                                    transparent
+                                    style={{
+                                        marginBottom: 12,
+                                        padding: 16,
+                                        backgroundColor: Colors.views.header,
+                                        borderRadius: 8,
+                                        borderWidth: 1,
+                                        borderColor: Colors.borders.light
+                                    }}
+                                >
+                                    {/* Contest Header */}
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
+                                        <View transparent style={{ flex: 1 }}>
+                                            <Text theme='h2' size={16}>{contest.contest_label}</Text>
+                                            <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                                                {contest.contest_label}
+                                            </Text>
+                                            <Text theme='description' size={11} style={{ marginTop: 4 }}>
+                                                {moment(contest.scheduled_datetime).format('ddd, MMM D, YYYY [at] h:mm A')}
+                                            </Text>
+                                        </View>
+                                        <View transparent style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                                            <Text theme='description' size={12}>Auto-fill:</Text>
+                                            <Switch
+                                                value={contest.auto_fill ?? false}
+                                                switch_type='on_off'
+                                                size={14}
+                                                onChange={(_) => toggleContestAutoFill(contest)}
+                                            />
+                                        </View>
+                                    </View>
+
+                                    {/* Market Contests */}
+                                    {marketContests.length > 0 && (
+                                        <View transparent style={{ marginTop: 12, paddingTop: 12, borderTopWidth: 1, borderTopColor: Colors.borders.light }}>
+                                            <Text theme='description' size={11} style={{ marginBottom: 8, textTransform: 'uppercase' }}>
+                                                Markets with Auto-Fill ({marketContests.length})
+                                            </Text>
+                                            {marketContests.map((mc) => (
+                                                <View
+                                                    key={mc.market_contest_id}
+                                                    transparent
+                                                    style={{
+                                                        flexDirection: 'row',
+                                                        justifyContent: 'space-between',
+                                                        alignItems: 'center',
+                                                        paddingVertical: 8,
+                                                        paddingHorizontal: 12,
+                                                        backgroundColor: Colors.views.header,
+                                                        borderRadius: 6,
+                                                        marginBottom: 6
+                                                    }}
+                                                >
+                                                    <View transparent style={{ flex: 1 }}>
+                                                        <Text theme='h2' size={13}>
+                                                            {getMarketName(mc.router_market_id)}
+                                                        </Text>
+                                                        <Text theme='description' size={10} style={{ marginTop: 2 }}>
+                                                            {mc.market_contest_id}
+                                                        </Text>
+                                                    </View>
+                                                    <View transparent style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                                                        <Text theme='description' size={11}>Auto-fill:</Text>
+                                                        <Switch
+                                                            value={mc.auto_fill ?? false}
+                                                            switch_type='on_off'
+                                                            size={12}
+                                                            onChange={(_) => toggleMarketContestAutoFill(mc)}
+                                                        />
+                                                    </View>
+                                                </View>
+                                            ))}
+                                        </View>
+                                    )}
+                                </View>
+                            );
+                        })
+                    )}
+                </View>
+            </View>
+        </View>
+    );
+};
+
+export default AutoFillView;