be-components 7.5.6 → 7.5.7

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

@@ -0,0 +1,1238 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button } from "../../../Components/Themed";
+import { ActivityIndicator, TouchableOpacity, TextInput, Modal, ScrollView } from 'react-native';
+import { useColors } from '../../../constants/useColors';
+import { BetRouterApi } from '../../api';
+import { Icons, SearchBox } from '../../../Components';
+import type { RouterMarketProps, RouterMarketSideProps, RouterMarketVariableProps } from '../../types';
+
+type RouterMarketsData = {
+    router_markets: RouterMarketProps[];
+    router_market_sides: RouterMarketSideProps[];
+    router_market_variables: RouterMarketVariableProps[];
+    loading: boolean;
+    searchValue: string;
+    showCreateMarketModal: boolean;
+    showEditMarketModal: boolean;
+    showDeleteMarketModal: boolean;
+    showCreateSideModal: boolean;
+    showEditSideModal: boolean;
+    showDeleteSideModal: boolean;
+    selectedMarket: RouterMarketProps | null;
+    selectedSide: RouterMarketSideProps | null;
+    expandedMarketId: string | null;
+    // Form state for router_market
+    formMarketKey: string;
+    formMarketLabel: string;
+    formMarketDescription: string;
+    formCategory: 'game_result' | 'team_stat' | 'player_stat' | 'game_stat';
+    formVariableRequired: boolean;
+    formDefaultVariableType: 'total' | 'spread';
+    formAllowMultipleParticipants: boolean;
+    formParticipantType: 'team' | 'player' | 'event';
+    formStatus: 'active' | 'inactive';
+    // Form state for router_market_side
+    formSideRouterMarketId: string;
+    formSideType: string;
+    formSideKey: string;
+    formRenderer: string;
+};
+
+const RouterMarkets = () => {
+    const Colors = useColors();
+
+    const [data, setData] = useState<RouterMarketsData>({
+        router_markets: [],
+        router_market_sides: [],
+        router_market_variables: [],
+        loading: true,
+        searchValue: '',
+        showCreateMarketModal: false,
+        showEditMarketModal: false,
+        showDeleteMarketModal: false,
+        showCreateSideModal: false,
+        showEditSideModal: false,
+        showDeleteSideModal: false,
+        selectedMarket: null,
+        selectedSide: null,
+        expandedMarketId: null,
+        formMarketKey: '',
+        formMarketLabel: '',
+        formMarketDescription: '',
+        formCategory: 'game_result',
+        formVariableRequired: false,
+        formDefaultVariableType: 'total',
+        formAllowMultipleParticipants: false,
+        formParticipantType: 'team',
+        formStatus: 'active',
+        formSideRouterMarketId: '',
+        formSideType: '',
+        formSideKey: '',
+        formRenderer: ''
+    });
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    const loadData = async () => {
+        setData(prev => ({ ...prev, loading: true }));
+        try {
+            const [marketsResult, sidesResult, variablesResult] = await Promise.all([
+                BetRouterApi.BetRouter.MarketApi.getRouterMarkets(),
+                BetRouterApi.BetRouter.MarketApi.getMarketSides(),
+                BetRouterApi.BetRouter.MarketApi.getMarketVariables()
+            ]);
+
+            // API returns arrays directly, not objects with properties
+            setData(prev => ({
+                ...prev,
+                router_markets: Array.isArray(marketsResult) ? marketsResult : [],
+                router_market_sides: Array.isArray(sidesResult) ? sidesResult : [],
+                router_market_variables: Array.isArray(variablesResult) ? variablesResult : [],
+                loading: false
+            }));
+        } catch (error) {
+            console.error('Failed to load router markets:', error);
+            alert('Error loading router markets: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    // Market CRUD operations
+    const openCreateMarketModal = () => {
+        setData(prev => ({
+            ...prev,
+            showCreateMarketModal: true,
+            formMarketKey: '',
+            formMarketLabel: '',
+            formMarketDescription: '',
+            formCategory: 'game_result',
+            formVariableRequired: false,
+            formDefaultVariableType: 'total',
+            formAllowMultipleParticipants: false,
+            formParticipantType: 'team',
+            formStatus: 'active'
+        }));
+    };
+
+    const openEditMarketModal = (market: RouterMarketProps) => {
+        setData(prev => ({
+            ...prev,
+            showEditMarketModal: true,
+            selectedMarket: market,
+            formMarketKey: market.market_key,
+            formMarketLabel: market.market_label,
+            formMarketDescription: market.market_description,
+            formCategory: market.category,
+            formVariableRequired: market.variable_required,
+            formDefaultVariableType: market.default_variable_type,
+            formAllowMultipleParticipants: market.allow_multiple_participants,
+            formParticipantType: market.participant_type,
+            formStatus: market.status
+        }));
+    };
+
+    const openDeleteMarketModal = (market: RouterMarketProps) => {
+        setData(prev => ({
+            ...prev,
+            showDeleteMarketModal: true,
+            selectedMarket: market
+        }));
+    };
+
+    const handleCreateMarket = async () => {
+        if (!data.formMarketKey || !data.formMarketLabel || !data.formMarketDescription) {
+            alert('Please fill in all required fields');
+            return;
+        }
+
+        try {
+            setData(prev => ({ ...prev, loading: true }));
+            await BetRouterApi.BetRouter.MarketApi.createRouterMarket(
+                data.formMarketKey,
+                data.formMarketLabel,
+                data.formMarketDescription,
+                data.formCategory,
+                data.formVariableRequired,
+                data.formDefaultVariableType,
+                data.formAllowMultipleParticipants,
+                data.formParticipantType,
+                data.formStatus
+            );
+            closeModals();
+            await loadData();
+        } catch (error) {
+            console.error('Error creating router market:', error);
+            alert('Error creating router market: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const handleUpdateMarket = async () => {
+        if (!data.selectedMarket) return;
+
+        try {
+            setData(prev => ({ ...prev, loading: true }));
+            await BetRouterApi.BetRouter.MarketApi.updateRouterMarket(
+                data.selectedMarket.router_market_id,
+                {
+                    market_key: data.formMarketKey,
+                    market_label: data.formMarketLabel,
+                    market_description: data.formMarketDescription,
+                    category: data.formCategory,
+                    variable_required: data.formVariableRequired,
+                    default_variable_type: data.formDefaultVariableType,
+                    allow_multiple_participants: data.formAllowMultipleParticipants,
+                    participant_type: data.formParticipantType,
+                    status: data.formStatus
+                }
+            );
+            closeModals();
+            await loadData();
+        } catch (error) {
+            console.error('Error updating router market:', error);
+            alert('Error updating router market: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const handleDeleteMarket = async () => {
+        if (!data.selectedMarket) return;
+
+        try {
+            setData(prev => ({ ...prev, loading: true }));
+            await BetRouterApi.BetRouter.MarketApi.deleteRouterMarket(data.selectedMarket.router_market_id);
+            closeModals();
+            await loadData();
+        } catch (error) {
+            console.error('Error deleting router market:', error);
+            alert('Error deleting router market: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    // Side CRUD operations
+    const openCreateSideModal = (router_market_id: string) => {
+        setData(prev => ({
+            ...prev,
+            showCreateSideModal: true,
+            formSideRouterMarketId: router_market_id,
+            formSideType: '',
+            formSideKey: '',
+            formRenderer: ''
+        }));
+    };
+
+    const openEditSideModal = (side: RouterMarketSideProps) => {
+        setData(prev => ({
+            ...prev,
+            showEditSideModal: true,
+            selectedSide: side,
+            formSideRouterMarketId: side.router_market_id,
+            formSideType: side.side_type,
+            formSideKey: side.side_key,
+            formRenderer: side.renderer
+        }));
+    };
+
+    const openDeleteSideModal = (side: RouterMarketSideProps) => {
+        setData(prev => ({
+            ...prev,
+            showDeleteSideModal: true,
+            selectedSide: side
+        }));
+    };
+
+    const handleCreateSide = async () => {
+        if (!data.formSideRouterMarketId || !data.formSideType || !data.formSideKey || !data.formRenderer) {
+            alert('Please fill in all required fields');
+            return;
+        }
+
+        try {
+            setData(prev => ({ ...prev, loading: true }));
+            await BetRouterApi.BetRouter.MarketApi.createMarketSide(
+                data.formSideRouterMarketId,
+                data.formSideType,
+                data.formSideKey,
+                data.formRenderer
+            );
+            closeModals();
+            await loadData();
+        } catch (error) {
+            console.error('Error creating market side:', error);
+            alert('Error creating market side: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const handleUpdateSide = async () => {
+        if (!data.selectedSide) return;
+
+        try {
+            setData(prev => ({ ...prev, loading: true }));
+            await BetRouterApi.BetRouter.MarketApi.updateMarketSide(
+                data.selectedSide.market_side_id,
+                {
+                    router_market_id: data.formSideRouterMarketId,
+                    side_type: data.formSideType,
+                    side_key: data.formSideKey,
+                    renderer: data.formRenderer
+                }
+            );
+            closeModals();
+            await loadData();
+        } catch (error) {
+            console.error('Error updating market side:', error);
+            alert('Error updating market side: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const handleDeleteSide = async () => {
+        if (!data.selectedSide) return;
+
+        try {
+            setData(prev => ({ ...prev, loading: true }));
+            await BetRouterApi.BetRouter.MarketApi.deleteMarketSide(data.selectedSide.market_side_id);
+            closeModals();
+            await loadData();
+        } catch (error) {
+            console.error('Error deleting market side:', error);
+            alert('Error deleting market side: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const closeModals = () => {
+        setData(prev => ({
+            ...prev,
+            showCreateMarketModal: false,
+            showEditMarketModal: false,
+            showDeleteMarketModal: false,
+            showCreateSideModal: false,
+            showEditSideModal: false,
+            showDeleteSideModal: false,
+            selectedMarket: null,
+            selectedSide: null
+        }));
+    };
+
+    const toggleMarketExpansion = (router_market_id: string) => {
+        setData(prev => ({
+            ...prev,
+            expandedMarketId: prev.expandedMarketId === router_market_id ? null : router_market_id
+        }));
+    };
+
+    const filteredMarkets = data.router_markets.filter(market =>
+        market.market_label.toLowerCase().includes(data.searchValue.toLowerCase()) ||
+        market.market_key.toLowerCase().includes(data.searchValue.toLowerCase())
+    );
+
+    const getSidesForMarket = (router_market_id: string) => {
+        return data.router_market_sides.filter(side => side.router_market_id === router_market_id);
+    };
+
+    const getVariablesForMarket = (router_market_id: string) => {
+        return data.router_market_variables.filter(variable => variable.router_market_id === router_market_id);
+    };
+
+    return (
+        <View transparent style={{ flex: 1, padding: 20 }}>
+            {/* Header */}
+            <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
+                <View transparent>
+                    <Text theme="h1" size={24}>Router Markets</Text>
+                    <Text theme="description" size={14}>
+                        Manage router market types, sides, and variables
+                    </Text>
+                </View>
+                <Button
+                    type='success'
+                    title='+ Create Market'
+                    onPress={openCreateMarketModal}
+                />
+            </View>
+
+            {/* Search */}
+            <View transparent style={{ marginBottom: 20 }}>
+                <SearchBox
+                    placeholder="Search markets..."
+                    onChange={(text) => setData(prev => ({ ...prev, searchValue: text }))}
+                    hide_search_button
+                />
+            </View>
+
+            {/* Markets List */}
+            {data.loading ? (
+                <View transparent style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                    <ActivityIndicator size="large" color={Colors.text.h1} />
+                </View>
+            ) : (
+                <ScrollView style={{ flex: 1 }}>
+                    <View transparent style={{ paddingBottom: 40 }}>
+                        {filteredMarkets.length === 0 ? (
+                            <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                                <Text theme="description" size={14}>
+                                    No router markets found
+                                </Text>
+                            </View>
+                        ) : (
+                            filteredMarkets.map((market) => {
+                                const isExpanded = data.expandedMarketId === market.router_market_id;
+                                const sides = getSidesForMarket(market.router_market_id);
+                                const variables = getVariablesForMarket(market.router_market_id);
+
+                                return (
+                                    <View
+                                        key={market.router_market_id}
+                                        style={{
+                                            backgroundColor: Colors.views.body,
+                                            borderRadius: 8,
+                                            marginBottom: 12,
+                                            overflow: 'hidden'
+                                        }}
+                                    >
+                                        {/* Market Header */}
+                                        <TouchableOpacity
+                                            onPress={() => toggleMarketExpansion(market.router_market_id)}
+                                            style={{
+                                                padding: 16,
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between'
+                                            }}
+                                        >
+                                            <View transparent style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
+                                                <Icons.ChevronIcon
+                                                    direction={isExpanded ? 'down' : 'right'}
+                                                    size={8}
+                                                    color={Colors.text.h1}
+                                                />
+                                                <View transparent style={{ flex: 1, marginLeft: 12 }}>
+                                                    <View transparent style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                                                        <Text theme="h2" size={16}>
+                                                            {market.market_label}
+                                                        </Text>
+                                                        <View
+                                                            style={{
+                                                                backgroundColor: market.status === 'active'
+                                                                    ? Colors.text.success
+                                                                    : Colors.views.header,
+                                                                paddingHorizontal: 8,
+                                                                paddingVertical: 2,
+                                                                borderRadius: 4
+                                                            }}
+                                                        >
+                                                            <Text theme="h2" size={10}>
+                                                                {market.status.toUpperCase()}
+                                                            </Text>
+                                                        </View>
+                                                    </View>
+                                                    <Text theme="description" size={12} style={{ marginTop: 4 }}>
+                                                        {market.market_key} • {market.category} • {market.participant_type}
+                                                    </Text>
+                                                    <Text theme="description" size={12} style={{ marginTop: 2 }}>
+                                                        {market.market_description}
+                                                    </Text>
+                                                </View>
+                                            </View>
+                                            <View transparent style={{ flexDirection: 'row', gap: 8, marginLeft: 12 }}>
+                                                <TouchableOpacity
+                                                    onPress={(e) => {
+                                                        e.stopPropagation();
+                                                        openEditMarketModal(market);
+                                                    }}
+                                                    style={{ padding: 8 }}
+                                                >
+                                                    <Icons.EditIcon size={16} color={Colors.text.description} />
+                                                </TouchableOpacity>
+                                                <TouchableOpacity
+                                                    onPress={(e) => {
+                                                        e.stopPropagation();
+                                                        openDeleteMarketModal(market);
+                                                    }}
+                                                    style={{
+                                                        paddingHorizontal: 12,
+                                                        paddingVertical: 6,
+                                                        backgroundColor: Colors.text.error,
+                                                        borderRadius: 4
+                                                    }}
+                                                >
+                                                    <Text theme="h2" size={11}>Delete</Text>
+                                                </TouchableOpacity>
+                                            </View>
+                                        </TouchableOpacity>
+
+                                        {/* Expanded Content */}
+                                        {isExpanded && (
+                                            <View style={{ backgroundColor: Colors.views.header, padding: 16 }}>
+                                                {/* Market Properties */}
+                                                <View transparent style={{ marginBottom: 16 }}>
+                                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>
+                                                        Properties
+                                                    </Text>
+                                                    <View transparent style={{ gap: 4 }}>
+                                                        <Text theme="description" size={12}>
+                                                            Variable Required: {market.variable_required ? 'Yes' : 'No'}
+                                                        </Text>
+                                                        <Text theme="description" size={12}>
+                                                            Default Variable Type: {market.default_variable_type}
+                                                        </Text>
+                                                        <Text theme="description" size={12}>
+                                                            Allow Multiple Participants: {market.allow_multiple_participants ? 'Yes' : 'No'}
+                                                        </Text>
+                                                    </View>
+                                                </View>
+
+                                                {/* Market Sides */}
+                                                <View transparent style={{ marginBottom: 16 }}>
+                                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                                                        <Text theme="h2" size={14}>
+                                                            Sides ({sides.length})
+                                                        </Text>
+                                                        <TouchableOpacity
+                                                            onPress={() => openCreateSideModal(market.router_market_id)}
+                                                            style={{
+                                                                backgroundColor: Colors.views.body,
+                                                                paddingHorizontal: 12,
+                                                                paddingVertical: 6,
+                                                                borderRadius: 4
+                                                            }}
+                                                        >
+                                                            <Text theme="h2" size={12}>+ Add Side</Text>
+                                                        </TouchableOpacity>
+                                                    </View>
+                                                    {sides.length === 0 ? (
+                                                        <Text theme="description" size={12}>No sides defined</Text>
+                                                    ) : (
+                                                        <View transparent style={{ gap: 8 }}>
+                                                            {sides.map((side) => (
+                                                                <View
+                                                                    key={side.market_side_id}
+                                                                    style={{
+                                                                        backgroundColor: Colors.views.body,
+                                                                        padding: 12,
+                                                                        borderRadius: 6,
+                                                                        flexDirection: 'row',
+                                                                        justifyContent: 'space-between',
+                                                                        alignItems: 'center'
+                                                                    }}
+                                                                >
+                                                                    <View transparent style={{ flex: 1 }}>
+                                                                        <Text theme="h2" size={13}>
+                                                                            {side.side_key}
+                                                                        </Text>
+                                                                        <Text theme="description" size={11} style={{ marginTop: 2 }}>
+                                                                            Type: {side.side_type}
+                                                                        </Text>
+                                                                        <Text theme="description" size={11} style={{ marginTop: 2 }}>
+                                                                            Renderer: {side.renderer}
+                                                                        </Text>
+                                                                    </View>
+                                                                    <View transparent style={{ flexDirection: 'row', gap: 8 }}>
+                                                                        <TouchableOpacity
+                                                                            onPress={() => openEditSideModal(side)}
+                                                                            style={{ padding: 6 }}
+                                                                        >
+                                                                            <Icons.EditIcon size={14} color={Colors.text.description} />
+                                                                        </TouchableOpacity>
+                                                                        <TouchableOpacity
+                                                                            onPress={() => openDeleteSideModal(side)}
+                                                                            style={{
+                                                                                paddingHorizontal: 8,
+                                                                                paddingVertical: 4,
+                                                                                backgroundColor: Colors.text.error,
+                                                                                borderRadius: 4
+                                                                            }}
+                                                                        >
+                                                                            <Text theme="h2" size={10}>Del</Text>
+                                                                        </TouchableOpacity>
+                                                                    </View>
+                                                                </View>
+                                                            ))}
+                                                        </View>
+                                                    )}
+                                                </View>
+
+                                                {/* Market Variables */}
+                                                <View transparent>
+                                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>
+                                                        Variables ({variables.length})
+                                                    </Text>
+                                                    {variables.length === 0 ? (
+                                                        <Text theme="description" size={12}>No variables defined</Text>
+                                                    ) : (
+                                                        <View transparent style={{ gap: 4 }}>
+                                                            {variables.map((variable) => (
+                                                                <Text key={variable.router_market_variable_id} theme="description" size={12}>
+                                                                    {variable.variable} ({variable.variable_type})
+                                                                </Text>
+                                                            ))}
+                                                        </View>
+                                                    )}
+                                                </View>
+                                            </View>
+                                        )}
+                                    </View>
+                                );
+                            })
+                        )}
+                    </View>
+                </ScrollView>
+            )}
+
+            {/* Create Market Modal */}
+            <Modal
+                visible={data.showCreateMarketModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeModals}
+            >
+                <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
+                    <View style={{ backgroundColor: Colors.views.body, borderRadius: 12, padding: 24, width: '90%', maxWidth: 500 }}>
+                        <Text theme="h1" size={20} style={{ marginBottom: 20 }}>Create Router Market</Text>
+
+                        <ScrollView style={{ maxHeight: 500 }}>
+                            <View transparent style={{ gap: 16 }}>
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Market Key *</Text>
+                                    <TextInput
+                                        style={{
+                                            backgroundColor: Colors.views.header,
+                                            borderRadius: 6,
+                                            padding: 12,
+                                            color: Colors.text.h1,
+                                            fontSize: 14
+                                        }}
+                                        value={data.formMarketKey}
+                                        onChangeText={(text) => setData(prev => ({ ...prev, formMarketKey: text }))}
+                                        placeholder="e.g., moneyline"
+                                        placeholderTextColor={Colors.text.description}
+                                    />
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Market Label *</Text>
+                                    <TextInput
+                                        style={{
+                                            backgroundColor: Colors.views.header,
+                                            borderRadius: 6,
+                                            padding: 12,
+                                            color: Colors.text.h1,
+                                            fontSize: 14
+                                        }}
+                                        value={data.formMarketLabel}
+                                        onChangeText={(text) => setData(prev => ({ ...prev, formMarketLabel: text }))}
+                                        placeholder="e.g., Moneyline"
+                                        placeholderTextColor={Colors.text.description}
+                                    />
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Description *</Text>
+                                    <TextInput
+                                        style={{
+                                            backgroundColor: Colors.views.header,
+                                            borderRadius: 6,
+                                            padding: 12,
+                                            color: Colors.text.h1,
+                                            fontSize: 14,
+                                            minHeight: 80
+                                        }}
+                                        value={data.formMarketDescription}
+                                        onChangeText={(text) => setData(prev => ({ ...prev, formMarketDescription: text }))}
+                                        placeholder="Market description"
+                                        placeholderTextColor={Colors.text.description}
+                                        multiline
+                                    />
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Category</Text>
+                                    <View transparent style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+                                        {(['game_result', 'team_stat', 'player_stat', 'game_stat'] as const).map((cat) => (
+                                            <TouchableOpacity
+                                                key={cat}
+                                                onPress={() => setData(prev => ({ ...prev, formCategory: cat }))}
+                                                style={{
+                                                    backgroundColor: data.formCategory === cat ? Colors.views.body : Colors.views.header,
+                                                    paddingHorizontal: 12,
+                                                    paddingVertical: 8,
+                                                    borderRadius: 6
+                                                }}
+                                            >
+                                                <Text theme="h2" size={12}>{cat}</Text>
+                                            </TouchableOpacity>
+                                        ))}
+                                    </View>
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Participant Type</Text>
+                                    <View transparent style={{ flexDirection: 'row', gap: 8 }}>
+                                        {(['team', 'player', 'event'] as const).map((type) => (
+                                            <TouchableOpacity
+                                                key={type}
+                                                onPress={() => setData(prev => ({ ...prev, formParticipantType: type }))}
+                                                style={{
+                                                    backgroundColor: data.formParticipantType === type ? Colors.views.body : Colors.views.header,
+                                                    paddingHorizontal: 12,
+                                                    paddingVertical: 8,
+                                                    borderRadius: 6
+                                                }}
+                                            >
+                                                <Text theme="h2" size={12}>{type}</Text>
+                                            </TouchableOpacity>
+                                        ))}
+                                    </View>
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Default Variable Type</Text>
+                                    <View transparent style={{ flexDirection: 'row', gap: 8 }}>
+                                        {(['total', 'spread'] as const).map((type) => (
+                                            <TouchableOpacity
+                                                key={type}
+                                                onPress={() => setData(prev => ({ ...prev, formDefaultVariableType: type }))}
+                                                style={{
+                                                    backgroundColor: data.formDefaultVariableType === type ? Colors.views.body : Colors.views.header,
+                                                    paddingHorizontal: 12,
+                                                    paddingVertical: 8,
+                                                    borderRadius: 6
+                                                }}
+                                            >
+                                                <Text theme="h2" size={12}>{type}</Text>
+                                            </TouchableOpacity>
+                                        ))}
+                                    </View>
+                                </View>
+
+                                <View transparent style={{ gap: 12 }}>
+                                    <TouchableOpacity
+                                        onPress={() => setData(prev => ({ ...prev, formVariableRequired: !prev.formVariableRequired }))}
+                                        style={{
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            gap: 8
+                                        }}
+                                    >
+                                        <View
+                                            style={{
+                                                width: 20,
+                                                height: 20,
+                                                borderRadius: 4,
+                                                borderWidth: 2,
+                                                borderColor: data.formVariableRequired ? Colors.views.body : Colors.text.description,
+                                                backgroundColor: data.formVariableRequired ? Colors.views.body : 'transparent',
+                                                justifyContent: 'center',
+                                                alignItems: 'center'
+                                            }}
+                                        >
+                                            {data.formVariableRequired && <Text theme="h2" size={12}>✓</Text>}
+                                        </View>
+                                        <Text theme="h2" size={14}>Variable Required</Text>
+                                    </TouchableOpacity>
+
+                                    <TouchableOpacity
+                                        onPress={() => setData(prev => ({ ...prev, formAllowMultipleParticipants: !prev.formAllowMultipleParticipants }))}
+                                        style={{
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            gap: 8
+                                        }}
+                                    >
+                                        <View
+                                            style={{
+                                                width: 20,
+                                                height: 20,
+                                                borderRadius: 4,
+                                                borderWidth: 2,
+                                                borderColor: data.formAllowMultipleParticipants ? Colors.views.body : Colors.text.description,
+                                                backgroundColor: data.formAllowMultipleParticipants ? Colors.views.body : 'transparent',
+                                                justifyContent: 'center',
+                                                alignItems: 'center'
+                                            }}
+                                        >
+                                            {data.formAllowMultipleParticipants && <Text theme="h2" size={12}>✓</Text>}
+                                        </View>
+                                        <Text theme="h2" size={14}>Allow Multiple Participants</Text>
+                                    </TouchableOpacity>
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Status</Text>
+                                    <View transparent style={{ flexDirection: 'row', gap: 8 }}>
+                                        {(['active', 'inactive'] as const).map((status) => (
+                                            <TouchableOpacity
+                                                key={status}
+                                                onPress={() => setData(prev => ({ ...prev, formStatus: status }))}
+                                                style={{
+                                                    backgroundColor: data.formStatus === status ? Colors.views.body : Colors.views.header,
+                                                    paddingHorizontal: 12,
+                                                    paddingVertical: 8,
+                                                    borderRadius: 6
+                                                }}
+                                            >
+                                                <Text theme="h2" size={12}>{status}</Text>
+                                            </TouchableOpacity>
+                                        ))}
+                                    </View>
+                                </View>
+                            </View>
+                        </ScrollView>
+
+                        <View transparent style={{ flexDirection: 'row', gap: 12, marginTop: 24 }}>
+                            <Button
+                                title="Cancel"
+                                onPress={closeModals}
+                                type="close"
+                                style={{ flex: 1 }}
+                            />
+                            <Button
+                                title="Create"
+                                onPress={handleCreateMarket}
+                                style={{ flex: 1 }}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+
+            {/* Edit Market Modal */}
+            <Modal
+                visible={data.showEditMarketModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeModals}
+            >
+                <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
+                    <View style={{ backgroundColor: Colors.views.body, borderRadius: 12, padding: 24, width: '90%', maxWidth: 500 }}>
+                        <Text theme="h1" size={20} style={{ marginBottom: 20 }}>Edit Router Market</Text>
+
+                        <ScrollView style={{ maxHeight: 500 }}>
+                            <View transparent style={{ gap: 16 }}>
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Market Key *</Text>
+                                    <TextInput
+                                        style={{
+                                            backgroundColor: Colors.views.header,
+                                            borderRadius: 6,
+                                            padding: 12,
+                                            color: Colors.text.h1,
+                                            fontSize: 14
+                                        }}
+                                        value={data.formMarketKey}
+                                        onChangeText={(text) => setData(prev => ({ ...prev, formMarketKey: text }))}
+                                    />
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Market Label *</Text>
+                                    <TextInput
+                                        style={{
+                                            backgroundColor: Colors.views.header,
+                                            borderRadius: 6,
+                                            padding: 12,
+                                            color: Colors.text.h1,
+                                            fontSize: 14
+                                        }}
+                                        value={data.formMarketLabel}
+                                        onChangeText={(text) => setData(prev => ({ ...prev, formMarketLabel: text }))}
+                                    />
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Description *</Text>
+                                    <TextInput
+                                        style={{
+                                            backgroundColor: Colors.views.header,
+                                            borderRadius: 6,
+                                            padding: 12,
+                                            color: Colors.text.h1,
+                                            fontSize: 14,
+                                            minHeight: 80
+                                        }}
+                                        value={data.formMarketDescription}
+                                        onChangeText={(text) => setData(prev => ({ ...prev, formMarketDescription: text }))}
+                                        multiline
+                                    />
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Category</Text>
+                                    <View transparent style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+                                        {(['game_result', 'team_stat', 'player_stat', 'game_stat'] as const).map((cat) => (
+                                            <TouchableOpacity
+                                                key={cat}
+                                                onPress={() => setData(prev => ({ ...prev, formCategory: cat }))}
+                                                style={{
+                                                    backgroundColor: data.formCategory === cat ? Colors.views.body : Colors.views.header,
+                                                    paddingHorizontal: 12,
+                                                    paddingVertical: 8,
+                                                    borderRadius: 6
+                                                }}
+                                            >
+                                                <Text theme="h2" size={12}>{cat}</Text>
+                                            </TouchableOpacity>
+                                        ))}
+                                    </View>
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Participant Type</Text>
+                                    <View transparent style={{ flexDirection: 'row', gap: 8 }}>
+                                        {(['team', 'player', 'event'] as const).map((type) => (
+                                            <TouchableOpacity
+                                                key={type}
+                                                onPress={() => setData(prev => ({ ...prev, formParticipantType: type }))}
+                                                style={{
+                                                    backgroundColor: data.formParticipantType === type ? Colors.views.body : Colors.views.header,
+                                                    paddingHorizontal: 12,
+                                                    paddingVertical: 8,
+                                                    borderRadius: 6
+                                                }}
+                                            >
+                                                <Text theme="h2" size={12}>{type}</Text>
+                                            </TouchableOpacity>
+                                        ))}
+                                    </View>
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Default Variable Type</Text>
+                                    <View transparent style={{ flexDirection: 'row', gap: 8 }}>
+                                        {(['total', 'spread'] as const).map((type) => (
+                                            <TouchableOpacity
+                                                key={type}
+                                                onPress={() => setData(prev => ({ ...prev, formDefaultVariableType: type }))}
+                                                style={{
+                                                    backgroundColor: data.formDefaultVariableType === type ? Colors.views.body : Colors.views.header,
+                                                    paddingHorizontal: 12,
+                                                    paddingVertical: 8,
+                                                    borderRadius: 6
+                                                }}
+                                            >
+                                                <Text theme="h2" size={12}>{type}</Text>
+                                            </TouchableOpacity>
+                                        ))}
+                                    </View>
+                                </View>
+
+                                <View transparent style={{ gap: 12 }}>
+                                    <TouchableOpacity
+                                        onPress={() => setData(prev => ({ ...prev, formVariableRequired: !prev.formVariableRequired }))}
+                                        style={{
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            gap: 8
+                                        }}
+                                    >
+                                        <View
+                                            style={{
+                                                width: 20,
+                                                height: 20,
+                                                borderRadius: 4,
+                                                borderWidth: 2,
+                                                borderColor: data.formVariableRequired ? Colors.views.body : Colors.text.description,
+                                                backgroundColor: data.formVariableRequired ? Colors.views.body : 'transparent',
+                                                justifyContent: 'center',
+                                                alignItems: 'center'
+                                            }}
+                                        >
+                                            {data.formVariableRequired && <Text theme="h2" size={12}>✓</Text>}
+                                        </View>
+                                        <Text theme="h2" size={14}>Variable Required</Text>
+                                    </TouchableOpacity>
+
+                                    <TouchableOpacity
+                                        onPress={() => setData(prev => ({ ...prev, formAllowMultipleParticipants: !prev.formAllowMultipleParticipants }))}
+                                        style={{
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            gap: 8
+                                        }}
+                                    >
+                                        <View
+                                            style={{
+                                                width: 20,
+                                                height: 20,
+                                                borderRadius: 4,
+                                                borderWidth: 2,
+                                                borderColor: data.formAllowMultipleParticipants ? Colors.views.body : Colors.text.description,
+                                                backgroundColor: data.formAllowMultipleParticipants ? Colors.views.body : 'transparent',
+                                                justifyContent: 'center',
+                                                alignItems: 'center'
+                                            }}
+                                        >
+                                            {data.formAllowMultipleParticipants && <Text theme="h2" size={12}>✓</Text>}
+                                        </View>
+                                        <Text theme="h2" size={14}>Allow Multiple Participants</Text>
+                                    </TouchableOpacity>
+                                </View>
+
+                                <View transparent>
+                                    <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Status</Text>
+                                    <View transparent style={{ flexDirection: 'row', gap: 8 }}>
+                                        {(['active', 'inactive'] as const).map((status) => (
+                                            <TouchableOpacity
+                                                key={status}
+                                                onPress={() => setData(prev => ({ ...prev, formStatus: status }))}
+                                                style={{
+                                                    backgroundColor: data.formStatus === status ? Colors.views.body : Colors.views.header,
+                                                    paddingHorizontal: 12,
+                                                    paddingVertical: 8,
+                                                    borderRadius: 6
+                                                }}
+                                            >
+                                                <Text theme="h2" size={12}>{status}</Text>
+                                            </TouchableOpacity>
+                                        ))}
+                                    </View>
+                                </View>
+                            </View>
+                        </ScrollView>
+
+                        <View transparent style={{ flexDirection: 'row', gap: 12, marginTop: 24 }}>
+                            <Button
+                                title="Cancel"
+                                onPress={closeModals}
+                                type="close"
+                                style={{ flex: 1 }}
+                            />
+                            <Button
+                                title="Update"
+                                onPress={handleUpdateMarket}
+                                style={{ flex: 1 }}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+
+            {/* Delete Market Modal */}
+            <Modal
+                visible={data.showDeleteMarketModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeModals}
+            >
+                <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
+                    <View style={{ backgroundColor: Colors.views.body, borderRadius: 12, padding: 24, width: '90%', maxWidth: 400 }}>
+                        <Text theme="h1" size={20} style={{ marginBottom: 12 }}>Delete Router Market</Text>
+                        <Text theme="description" size={14} style={{ marginBottom: 24 }}>
+                            Are you sure you want to delete "{data.selectedMarket?.market_label}"? This action cannot be undone.
+                        </Text>
+                        <View transparent style={{ flexDirection: 'row', gap: 12 }}>
+                            <Button
+                                title="Cancel"
+                                onPress={closeModals}
+                                type="close"
+                                style={{ flex: 1 }}
+                            />
+                            <Button
+                                title="Delete"
+                                onPress={handleDeleteMarket}
+                                style={{ flex: 1, backgroundColor: Colors.text.error }}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+
+            {/* Create Side Modal */}
+            <Modal
+                visible={data.showCreateSideModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeModals}
+            >
+                <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
+                    <View style={{ backgroundColor: Colors.views.body, borderRadius: 12, padding: 24, width: '90%', maxWidth: 500 }}>
+                        <Text theme="h1" size={20} style={{ marginBottom: 20 }}>Create Market Side</Text>
+
+                        <View transparent style={{ gap: 16 }}>
+                            <View transparent>
+                                <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Side Type *</Text>
+                                <TextInput
+                                    style={{
+                                        backgroundColor: Colors.views.header,
+                                        borderRadius: 6,
+                                        padding: 12,
+                                        color: Colors.text.h1,
+                                        fontSize: 14
+                                    }}
+                                    value={data.formSideType}
+                                    onChangeText={(text) => setData(prev => ({ ...prev, formSideType: text }))}
+                                    placeholder="e.g., team, athlete, side"
+                                    placeholderTextColor={Colors.text.description}
+                                />
+                            </View>
+
+                            <View transparent>
+                                <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Side Key *</Text>
+                                <TextInput
+                                    style={{
+                                        backgroundColor: Colors.views.header,
+                                        borderRadius: 6,
+                                        padding: 12,
+                                        color: Colors.text.h1,
+                                        fontSize: 14
+                                    }}
+                                    value={data.formSideKey}
+                                    onChangeText={(text) => setData(prev => ({ ...prev, formSideKey: text }))}
+                                    placeholder="e.g., home, away, over, under"
+                                    placeholderTextColor={Colors.text.description}
+                                />
+                            </View>
+
+                            <View transparent>
+                                <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Renderer *</Text>
+                                <TextInput
+                                    style={{
+                                        backgroundColor: Colors.views.header,
+                                        borderRadius: 6,
+                                        padding: 12,
+                                        color: Colors.text.h1,
+                                        fontSize: 14,
+                                        minHeight: 80
+                                    }}
+                                    value={data.formRenderer}
+                                    onChangeText={(text) => setData(prev => ({ ...prev, formRenderer: text }))}
+                                    placeholder="Template for rendering titles"
+                                    placeholderTextColor={Colors.text.description}
+                                    multiline
+                                />
+                            </View>
+                        </View>
+
+                        <View transparent style={{ flexDirection: 'row', gap: 12, marginTop: 24 }}>
+                            <Button
+                                title="Cancel"
+                                onPress={closeModals}
+                                type="close"
+                                style={{ flex: 1 }}
+                            />
+                            <Button
+                                title="Create"
+                                onPress={handleCreateSide}
+                                style={{ flex: 1 }}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+
+            {/* Edit Side Modal */}
+            <Modal
+                visible={data.showEditSideModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeModals}
+            >
+                <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
+                    <View style={{ backgroundColor: Colors.views.body, borderRadius: 12, padding: 24, width: '90%', maxWidth: 500 }}>
+                        <Text theme="h1" size={20} style={{ marginBottom: 20 }}>Edit Market Side</Text>
+
+                        <View transparent style={{ gap: 16 }}>
+                            <View transparent>
+                                <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Side Type *</Text>
+                                <TextInput
+                                    style={{
+                                        backgroundColor: Colors.views.header,
+                                        borderRadius: 6,
+                                        padding: 12,
+                                        color: Colors.text.h1,
+                                        fontSize: 14
+                                    }}
+                                    value={data.formSideType}
+                                    onChangeText={(text) => setData(prev => ({ ...prev, formSideType: text }))}
+                                />
+                            </View>
+
+                            <View transparent>
+                                <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Side Key *</Text>
+                                <TextInput
+                                    style={{
+                                        backgroundColor: Colors.views.header,
+                                        borderRadius: 6,
+                                        padding: 12,
+                                        color: Colors.text.h1,
+                                        fontSize: 14
+                                    }}
+                                    value={data.formSideKey}
+                                    onChangeText={(text) => setData(prev => ({ ...prev, formSideKey: text }))}
+                                />
+                            </View>
+
+                            <View transparent>
+                                <Text theme="h2" size={14} style={{ marginBottom: 8 }}>Renderer *</Text>
+                                <TextInput
+                                    style={{
+                                        backgroundColor: Colors.views.header,
+                                        borderRadius: 6,
+                                        padding: 12,
+                                        color: Colors.text.h1,
+                                        fontSize: 14,
+                                        minHeight: 80
+                                    }}
+                                    value={data.formRenderer}
+                                    onChangeText={(text) => setData(prev => ({ ...prev, formRenderer: text }))}
+                                    multiline
+                                />
+                            </View>
+                        </View>
+
+                        <View transparent style={{ flexDirection: 'row', gap: 12, marginTop: 24 }}>
+                            <Button
+                                title="Cancel"
+                                onPress={closeModals}
+                                type="close"
+                                style={{ flex: 1 }}
+                            />
+                            <Button
+                                title="Update"
+                                onPress={handleUpdateSide}
+                                style={{ flex: 1 }}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+
+            {/* Delete Side Modal */}
+            <Modal
+                visible={data.showDeleteSideModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeModals}
+            >
+                <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
+                    <View style={{ backgroundColor: Colors.views.body, borderRadius: 12, padding: 24, width: '90%', maxWidth: 400 }}>
+                        <Text theme="h1" size={20} style={{ marginBottom: 12 }}>Delete Market Side</Text>
+                        <Text theme="description" size={14} style={{ marginBottom: 24 }}>
+                            Are you sure you want to delete this market side? This action cannot be undone.
+                        </Text>
+                        <View transparent style={{ flexDirection: 'row', gap: 12 }}>
+                            <Button
+                                title="Cancel"
+                                onPress={closeModals}
+                                type="close"
+                                style={{ flex: 1 }}
+                            />
+                            <Button
+                                title="Delete"
+                                onPress={handleDeleteSide}
+                                style={{ flex: 1, backgroundColor: Colors.text.error }}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        </View>
+    );
+};
+
+export default RouterMarkets;