be-components 7.4.8 → 7.5.2

package/src/BetRouter/components/OpportunityHistory.tsx

@@ -0,0 +1,408 @@
+import React, { useEffect, useState } from 'react';
+import { Text, View, Button } from '../../Components/Themed';
+import { BetRouterApi } from '../api';
+import { FlatList, TouchableOpacity } from 'react-native';
+import type { OpportunityProps, OpportunitySummaryProps, OpportunityStatusLegProps, RouterOrderProps, RouterPartnerProps } from '../types';
+import { useColors } from '../../constants/useColors';
+import DateTimePicker from 'react-datetime-picker';
+import 'react-datetime-picker/dist/DateTimePicker.css';
+import 'react-calendar/dist/Calendar.css';
+import 'react-clock/dist/Clock.css';
+import type { MyPlayerProps } from '../../types';
+import DropDown from '../../Components/Dropdown';
+import Pagination from '../../Components/Pagination';
+import { SearchBox, Icons } from '../../Components';
+import moment from 'moment-mini';
+import PlacedOpportunityModal from './PlacedOpportunityModal';
+
+type DateRangePreset = 'yesterday' | 'last7' | 'last30' | 'custom';
+type OpportunityHistoryProps = {
+    me: MyPlayerProps;
+    compact?: boolean;
+    insets?: { top: number; bottom: number; left: number; right: number };
+    partners?: RouterPartnerProps[];
+}
+
+//const ITEMS_PER_PAGE = 5;
+
+const OpportunityHistory = ({ me, compact = false, insets, partners = [] }: OpportunityHistoryProps) => {
+    const Colors = useColors();
+
+    const [state, setState] = useState<{
+        loading: boolean;
+        opportunities: OpportunityProps[];
+        opportunitySummary: OpportunitySummaryProps[];
+        opportunityStatusLegs: OpportunityStatusLegProps[];
+        routerOrders: RouterOrderProps[];
+        pages: number;
+        currentPage: number;
+        searchText: string;
+        selectedOpportunity: OpportunityProps | null;
+        showDetailModal: boolean;
+    }>({
+        loading: false,
+        opportunities: [],
+        opportunitySummary: [],
+        opportunityStatusLegs: [],
+        routerOrders: [],
+        pages: 0,
+        currentPage: 0,
+        searchText: '',
+        selectedOpportunity: null,
+        showDetailModal: false
+    });
+
+    const [dateRange, setDateRange] = useState<{
+        preset: DateRangePreset;
+        from: Date;
+        to: Date;
+    }>({
+        preset: 'last30',
+        from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+        to: new Date()
+    });
+
+    const [showCustomPicker, setShowCustomPicker] = useState(false);
+
+    const { loading, opportunities, opportunitySummary, routerOrders, pages, currentPage, searchText, selectedOpportunity, showDetailModal } = state;
+
+    useEffect(() => {
+        BetRouterApi.setEnvironment();
+        if (!me?.player_id) { return }
+        loadOpportunities();
+    }, [me?.player_id]);
+
+    const loadOpportunities = async (page: number = 0, customFrom?: Date, customTo?: Date) => {
+        setState(prev => ({ ...prev, loading: true }));
+
+        const from = customFrom || dateRange.from;
+        const to = customTo || dateRange.to;
+        const fromTimestamp = Math.floor(from.getTime());
+        const toTimestamp = Math.floor(to.getTime());
+
+        const result = await BetRouterApi.BetRouter.OpportunityApi.getMyPastOpportunities(
+            fromTimestamp,
+            toTimestamp,
+            page
+        );
+
+        setState(prev => ({
+            ...prev,
+            opportunities: result.opportunities,
+            opportunitySummary: result.opportunity_summary,
+            opportunityStatusLegs: result.opportunity_status_legs,
+            routerOrders: result.router_orders,
+            pages: result.pages,
+            currentPage: page,
+            loading: false
+        }));
+    };
+
+    const handleDateRangeChange = (preset: DateRangePreset) => {
+        const now = new Date();
+        let from: Date;
+        const to = now;
+
+        switch (preset) {
+            case 'yesterday':
+                from = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+                break;
+            case 'last7':
+                from = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+                break;
+            case 'custom':
+                setShowCustomPicker(true);
+                return;
+            case 'last30':
+            default:
+                from = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+        }
+
+        setDateRange({ preset, from, to });
+        setShowCustomPicker(false);
+        loadOpportunities(0, from, to);
+    };
+
+    const handleApplyDateRange = () => {
+        loadOpportunities(0);
+        setShowCustomPicker(false);
+    };
+
+    const handleOpenDetail = (opp: OpportunityProps) => {
+        setState({ ...state, selectedOpportunity: opp, showDetailModal: true });
+    };
+
+    const handleCloseDetail = () => {
+        setState({ ...state, selectedOpportunity: null, showDetailModal: false });
+    };
+
+    // Filter opportunities by search (client-side filter on current page only)
+    const filteredOpportunities = opportunities.filter(opp => {
+        if (!searchText) return true;
+        if (opp.opportunity_type.toLowerCase().includes(searchText.toLowerCase())) return true;
+        const oppOrders = routerOrders.filter(order => order.opportunity_id === opp.opportunity_id);
+        return oppOrders.some(order => order.title?.toLowerCase().includes(searchText.toLowerCase()));
+    });
+
+    // Use server-side pagination info
+    const totalPages = pages;
+    const paginatedOpportunities = filteredOpportunities;
+
+
+    const renderOpportunityCard = (data: { item: OpportunityProps, index: number }) => {
+        const opp = data.item;
+        const isProfitable = (opp.actual_profit || 0) >= 0;
+        const oppOrders = routerOrders.filter(order => order.opportunity_id === opp.opportunity_id);
+        const firstOrder = oppOrders[0];
+
+        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.error}
+                            >
+                                ${(opp.actual_profit || 0).toFixed(2)}
+                            </Text>
+                        </View>
+
+                        {/* Info */}
+                        <View transparent style={{ flex: 1, minWidth: 0 }}>
+                            {firstOrder && (
+                                <Text theme='description' size={11} numberOfLines={1}>
+                                    {moment(opp.create_datetime).format('MMM D, h:mm A')}
+                                </Text>
+                            )}
+                            <Text theme='description' size={10} numberOfLines={1}>
+                                {oppOrders.length} leg{oppOrders.length !== 1 ? 's' : ''}
+                            </Text>
+                        </View>
+
+                        {/* Invested */}
+                        <View transparent style={{ minWidth: 45 }}>
+                            <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.actual_roi * 100).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>
+        );
+    };
+
+    return (
+        <View float style={{ flex: compact ? 0 : 1 }}>
+            <PlacedOpportunityModal
+                visible={showDetailModal}
+                opportunity={selectedOpportunity}
+                orders={routerOrders}
+                partners={partners}
+                onClose={handleCloseDetail}
+                insets={insets}
+            />
+
+            <View type='header' style={{ padding: 15, borderTopLeftRadius: 8, borderTopRightRadius: 8 }}>
+                <Text theme='h1' style={{ fontSize: 16 }}>Past Opportunities</Text>
+                <Text theme='description' style={{ fontSize: 12, marginTop: 3 }}>
+                    {filteredOpportunities.length} opportunit{filteredOpportunities.length !== 1 ? 'ies' : 'y'}
+                </Text>
+            </View>
+
+            <View type='body' style={{ flex: 1 }}>
+                {/* Date Range Selector */}
+                <View transparent style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+                    <DropDown
+                        selected_value={dateRange.preset === 'yesterday' ? 'Yesterday' :
+                            dateRange.preset === 'last7' ? 'Last 7 Days' :
+                                dateRange.preset === 'last30' ? 'Last 30 Days' :
+                                    'Custom Range'}
+                        dropdown_options={[
+                            { value: 'Yesterday', eligible_options: ['Yesterday', 'Last 7 Days', 'Last 30 Days', 'Custom Range'] }
+                        ]}
+                        onOptionSelect={(option) => {
+                            if (option === 'Yesterday') handleDateRangeChange('yesterday');
+                            else if (option === 'Last 7 Days') handleDateRangeChange('last7');
+                            else if (option === 'Last 30 Days') handleDateRangeChange('last30');
+                            else if (option === 'Custom Range') handleDateRangeChange('custom');
+                        }}
+                    />
+                </View>
+
+                {/* Custom Date Picker */}
+                {showCustomPicker && (
+                    <View transparent style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+                        <View transparent style={{ flexDirection: 'row', gap: 10, marginBottom: 10 }}>
+                            <View transparent style={{ flex: 1 }}>
+                                <Text theme='description' size={12} style={{ marginBottom: 5 }}>From</Text>
+                                <DateTimePicker
+                                    onChange={(date) => setDateRange({ ...dateRange, from: date as Date })}
+                                    value={dateRange.from}
+                                />
+                            </View>
+                            <View transparent style={{ flex: 1 }}>
+                                <Text theme='description' size={12} style={{ marginBottom: 5 }}>To</Text>
+                                <DateTimePicker
+                                    onChange={(date) => setDateRange({ ...dateRange, to: date as Date })}
+                                    value={dateRange.to}
+                                />
+                            </View>
+                        </View>
+                        <Button title="Apply" onPress={handleApplyDateRange} />
+                    </View>
+                )}
+
+                {/* Search */}
+                <View transparent style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+                    <SearchBox
+                        onChange={(text) => setState({ ...state, searchText: text, currentPage: 0 })}
+                        hide_search_button
+                    />
+                </View>
+
+                {/* Overall Statistics */}
+                {opportunitySummary.length > 0 && (
+                    <View transparent style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+                        {opportunitySummary.map((summary, idx) => {
+                            const isProfitable = (summary.actual_profit || 0) >= 0;
+                            const avgRoi = summary.total_bet_amount > 0
+                                ? ((summary.actual_profit || 0) / summary.total_bet_amount) * 100
+                                : 0;
+
+                            return (
+                                <View
+                                    key={idx}
+                                    transparent
+                                    style={{
+                                        padding: 12,
+                                        backgroundColor: Colors.views.header,
+                                        borderRadius: 8,
+                                        marginBottom: idx < opportunitySummary.length - 1 ? 8 : 0,
+                                        borderWidth: 1,
+                                        borderColor: Colors.borders.light
+                                    }}
+                                >
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                                        <Text theme='h2' size={14}>
+                                            {summary.opportunity_type?.toUpperCase() || 'OVERALL'}
+                                        </Text>
+                                        <Text
+                                            theme='h2'
+                                            size={16}
+                                            color={isProfitable ? Colors.text.success : Colors.text.error}
+                                        >
+                                            ${(summary.actual_profit || 0).toFixed(2)}
+                                        </Text>
+                                    </View>
+
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
+                                        <View transparent>
+                                            <Text theme='description' size={11}>Count</Text>
+                                            <Text theme='h2' size={12} style={{ marginTop: 2 }}>
+                                                {summary.opportunity_count}
+                                            </Text>
+                                        </View>
+
+                                        <View transparent>
+                                            <Text theme='description' size={11}>Invested</Text>
+                                            <Text theme='h2' size={12} style={{ marginTop: 2 }}>
+                                                ${(summary.total_bet_amount || 0).toFixed(2)}
+                                            </Text>
+                                        </View>
+
+                                        <View transparent>
+                                            <Text theme='description' size={11}>Winnings</Text>
+                                            <Text theme='h2' size={12} style={{ marginTop: 2 }}>
+                                                ${(summary.total_winnings || 0).toFixed(2)}
+                                            </Text>
+                                        </View>
+
+                                        <View transparent>
+                                            <Text theme='description' size={11}>Fees</Text>
+                                            <Text theme='h2' size={12} style={{ marginTop: 2 }}>
+                                                ${(summary.total_fees || 0).toFixed(2)}
+                                            </Text>
+                                        </View>
+
+                                        <View transparent>
+                                            <Text theme='description' size={11}>Avg ROI</Text>
+                                            <Text theme='h2' size={12} style={{ marginTop: 2 }}>
+                                                {avgRoi.toFixed(1)}%
+                                            </Text>
+                                        </View>
+                                    </View>
+                                </View>
+                            );
+                        })}
+                    </View>
+                )}
+
+                {/* Pagination */}
+                {!loading && opportunities.length > 0 && totalPages > 1 && (
+                    <View transparent style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+                        <Pagination
+                            offset={currentPage}
+                            pages={totalPages}
+                            onNext={() => {
+                                if ((currentPage + 1) < totalPages) {
+                                    loadOpportunities(currentPage + 1);
+                                }
+                            }}
+                            onPrevious={() => {
+                                if (currentPage > 0) {
+                                    loadOpportunities(currentPage - 1);
+                                }
+                            }}
+                            onSelectPage={(page) => {
+                                loadOpportunities(page);
+                            }}
+                        />
+                    </View>
+                )}
+
+                {/* Opportunity List */}
+                {loading ? (
+                    <View transparent style={{ padding: 20, alignItems: 'center' }}>
+                        <Text theme='description'>Loading...</Text>
+                    </View>
+                ) : paginatedOpportunities.length === 0 ? (
+                    <View transparent style={{ padding: 20, alignItems: 'center' }}>
+                        <Text theme='description'>No past opportunities found</Text>
+                    </View>
+                ) : (
+                    <FlatList
+                        data={paginatedOpportunities}
+                        keyExtractor={(item) => item.opportunity_id}
+                        renderItem={renderOpportunityCard}
+                    />
+                )}
+            </View>
+        </View>
+    );
+};
+
+export default OpportunityHistory;

package/src/BetRouter/components/PartnerCredentials.tsx

@@ -0,0 +1,212 @@
+import React, { useState } from 'react';
+import { View, Text, Button } from "../../Components/Themed";
+import { Modal, TextInput, ScrollView, TouchableOpacity } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import type { AccountPartnerProps, RouterPartnerProps } from '../types';
+import { getRequiredCredentialFields, getCredentialFieldLabels, getCredentialFieldTypes } from '../types/credentials';
+
+type PartnerCredentialsProps = {
+    visible: boolean;
+    accountPartner: AccountPartnerProps;
+    partner: RouterPartnerProps;
+    onClose: () => void;
+    onUpdate: (partner_id: string, credentials: Record<string, any>) => Promise<void>;
+}
+
+const PartnerCredentials = ({ visible, accountPartner, partner, onClose, onUpdate }: PartnerCredentialsProps) => {
+    const Colors = useColors();
+    const [credentials, setCredentials] = useState<Record<string, any>>({});
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState(false);
+
+    // Get credential fields, labels, and types from helper functions
+    const credentialFields = getRequiredCredentialFields(partner.name);
+    const fieldLabels = getCredentialFieldLabels(partner.name);
+    const fieldTypes = getCredentialFieldTypes(partner.name);
+
+    const handleUpdateCredential = (field: string, value: string) => {
+        setCredentials(prev => ({
+            ...prev,
+            [field]: value
+        }));
+        // Clear error when user types
+        if (error) setError(null);
+    };
+
+    const handleSave = async () => {
+        // Validate all required fields are filled
+        const missingFields = credentialFields.filter(field => !credentials[field] || credentials[field].trim() === '');
+        if (missingFields.length > 0) {
+            setError(`Please fill in all required fields: ${missingFields.map(f => fieldLabels[f]).join(', ')}`);
+            return;
+        }
+
+        try {
+            setLoading(true);
+            setError(null);
+            setSuccess(false);
+            await onUpdate(accountPartner.partner_id, credentials);
+            setSuccess(true);
+            // Auto-close after showing success message
+            setTimeout(() => {
+                onClose();
+                setSuccess(false);
+                setCredentials({});
+            }, 1500);
+        } catch (e: any) {
+            console.error('Error updating credentials:', e);
+            setError(e?.response?.data?.message || e?.message || 'Failed to update credentials. Please try again.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleClose = () => {
+        setCredentials({});
+        setError(null);
+        setSuccess(false);
+        onClose();
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            transparent={true}
+            animationType="fade"
+            onRequestClose={onClose}
+            statusBarTranslucent={true}
+        >
+            <View style={{
+                flex: 1,
+                backgroundColor: 'rgba(0,0,0,0.5)',
+                justifyContent: 'center',
+                alignItems: 'center'
+            }}>
+                <TouchableOpacity
+                    activeOpacity={1}
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0
+                    }}
+                    onPress={handleClose}
+                />
+                <View float style={{
+                    width: '90%',
+                    maxWidth: 500,
+                    maxHeight: '80%',
+                    borderRadius: 8,
+                    zIndex: 1
+                }}>
+                    {/* Header */}
+                    <View type='header' style={{
+                        padding: 15,
+                        borderTopLeftRadius: 8,
+                        borderTopRightRadius: 8,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between'
+                    }}>
+                        <View transparent>
+                            <Text theme='h1'>Update Credentials</Text>
+                            <Text theme='description' style={{ marginTop: 3 }}>{partner.name}</Text>
+                        </View>
+                        <Button
+                            type='text'
+                            title='Close'
+                            onPress={handleClose}
+                        />
+                    </View>
+
+                    {/* Body */}
+                    <ScrollView style={{ maxHeight: 400 }}>
+                        <View type='body' style={{ padding: 15 }}>
+                            <Text theme='description' style={{ marginBottom: 15 }}>
+                                Enter your credentials for {partner.name}. These will be securely encrypted and stored.
+                            </Text>
+
+                            <Text theme='description' style={{ marginBottom: 15, fontStyle: 'italic' }}>
+                                Note: You are updating new credentials. Any previously saved credentials will be replaced.
+                            </Text>
+
+                            {credentialFields.map((field) => {
+                                const fieldType = fieldTypes[field];
+                                const isMultiline = fieldType === 'textarea';
+                                const isSecure = fieldType === 'password';
+
+                                return (
+                                    <View key={field} transparent style={{ marginBottom: 15 }}>
+                                        <Text style={{ marginBottom: 5, fontWeight: '600' }}>
+                                            {fieldLabels[field] || field.charAt(0).toUpperCase() + field.slice(1).replace(/_/g, ' ')}
+                                        </Text>
+                                        <TextInput
+                                            style={{
+                                                borderWidth: 1,
+                                                borderColor: Colors.borders.input,
+                                                borderRadius: 4,
+                                                padding: 10,
+                                                color: Colors.text.input,
+                                                backgroundColor: Colors.views.input,
+                                                minHeight: isMultiline ? 100 : undefined,
+                                                textAlignVertical: isMultiline ? 'top' : 'center'
+                                            }}
+                                            value={credentials[field] || ''}
+                                            onChangeText={(value) => handleUpdateCredential(field, value)}
+                                            placeholder={`Enter ${fieldLabels[field] || field}`}
+                                            placeholderTextColor={Colors.text.placholder}
+                                            secureTextEntry={isSecure}
+                                            multiline={isMultiline}
+                                            numberOfLines={isMultiline ? 4 : 1}
+                                            autoCapitalize='none'
+                                            autoCorrect={false}
+                                        />
+                                    </View>
+                                );
+                            })}
+
+                            {error && (
+                                <View transparent style={{ marginTop: 10, padding: 10, borderRadius: 4, backgroundColor: Colors.buttons.background.error }}>
+                                    <Text style={{ color: Colors.text.white }}>{error}</Text>
+                                </View>
+                            )}
+
+                            {success && (
+                                <View transparent style={{ marginTop: 10, padding: 10, borderRadius: 4, backgroundColor: Colors.buttons.background.success }}>
+                                    <Text style={{ color: Colors.text.white, fontWeight: '600' }}>✓ Credentials saved successfully!</Text>
+                                </View>
+                            )}
+                        </View>
+                    </ScrollView>
+
+                    {/* Footer */}
+                    <View type='footer' style={{
+                        padding: 15,
+                        borderBottomLeftRadius: 8,
+                        borderBottomRightRadius: 8,
+                        flexDirection: 'row',
+                        justifyContent: 'flex-end',
+                        gap: 10
+                    }}>
+                        <Button
+                            type='text'
+                            title='Cancel'
+                            onPress={handleClose}
+                            disabled={loading || success}
+                        />
+                        <Button
+                            title={loading ? 'Saving...' : success ? 'Saved!' : 'Save Credentials'}
+                            onPress={handleSave}
+                            disabled={loading || success}
+                            type={success ? 'success' : undefined}
+                        />
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+export default PartnerCredentials;