@bettoredge/calcutta 0.2.0

package/src/components/CalcuttaEscrow.tsx

@@ -0,0 +1,464 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, TextInput, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaEscrowProps } from '@bettoredge/types';
+import { useCalcuttaEscrow } from '../hooks/useCalcuttaEscrow';
+import { formatCurrency } from '../helpers/formatting';
+
+export interface CalcuttaEscrowComponentProps {
+    calcutta_competition_id: string;
+    escrow?: CalcuttaEscrowProps;
+    market_type: string;
+    max_escrow?: number;
+    player_balance?: number;
+    onDepositFunds?: (amount: number) => void;
+    onUpdate: (escrow: CalcuttaEscrowProps) => void;
+    readOnly?: boolean;
+}
+
+type EscrowAction = 'transfer_in' | 'transfer_out';
+
+const QUICK_AMOUNTS = [10, 25, 50, 100];
+
+export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
+    calcutta_competition_id,
+    escrow: initialEscrow,
+    market_type,
+    max_escrow,
+    player_balance,
+    onDepositFunds,
+    onUpdate,
+    readOnly,
+}) => {
+    const { theme } = useTheme();
+    const { escrow: hookEscrow, loading, error, fetchEscrow, deposit, withdraw } = useCalcuttaEscrow(calcutta_competition_id);
+    const [action, setAction] = useState<EscrowAction>('transfer_in');
+    const [amount, setAmount] = useState('');
+
+    const currentEscrow = hookEscrow ?? initialEscrow;
+
+    useEffect(() => {
+        if (!hookEscrow) {
+            fetchEscrow();
+        }
+    }, [hookEscrow, fetchEscrow]);
+
+    const available = Number(currentEscrow?.escrow_balance ?? 0);
+    const committed = Number(currentEscrow?.committed_balance ?? 0);
+    const total = available + committed;
+
+    // Budget cap calculations
+    const netDeposited = currentEscrow
+        ? Number(currentEscrow.total_deposited) - Number(currentEscrow.total_withdrawn)
+        : 0;
+    const budgetRemaining = max_escrow != null && Number(max_escrow) > 0
+        ? Math.max(0, Number(max_escrow) - netDeposited)
+        : null;
+    const budgetFullyDeposited = budgetRemaining !== null && budgetRemaining <= 0;
+    const budgetPct = max_escrow != null && Number(max_escrow) > 0
+        ? Math.min(100, (netDeposited / Number(max_escrow)) * 100)
+        : null;
+
+    const committedPct = total > 0 ? (committed / total) * 100 : 0;
+
+    const numericAmount = parseFloat(amount) || 0;
+    const hasBalance = player_balance != null;
+    const insufficientBalance = hasBalance && action === 'transfer_in' && numericAmount > Number(player_balance);
+    const shortfall = insufficientBalance ? numericAmount - Number(player_balance) : 0;
+
+    const handleAction = async () => {
+        if (isNaN(numericAmount) || numericAmount <= 0) return;
+        if (action === 'transfer_in' && budgetRemaining !== null && numericAmount > budgetRemaining) return;
+        if (insufficientBalance && onDepositFunds) {
+            onDepositFunds(Math.ceil(shortfall * 100) / 100);
+            return;
+        }
+        try {
+            let result;
+            if (action === 'transfer_in') {
+                result = await deposit(numericAmount);
+            } else {
+                result = await withdraw(numericAmount);
+            }
+            if (result) {
+                onUpdate(result);
+                setAmount('');
+            }
+        } catch {}
+    };
+
+    const handleQuickAmount = (amt: number) => {
+        setAmount(String(amt));
+    };
+
+    // ============================================
+    // READ-ONLY: big KPI cards only
+    // ============================================
+    if (readOnly) {
+        return (
+            <View variant="transparent" style={styles.container}>
+                <View variant="transparent" style={styles.kpiRow}>
+                    <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                        <View variant="transparent" style={[styles.kpiIcon, { backgroundColor: theme.colors.primary.subtle }]}>
+                            <Ionicons name="wallet-outline" size={20} color={theme.colors.primary.default} />
+                        </View>
+                        <Text variant="caption" color="tertiary" style={styles.kpiLabel}>Available</Text>
+                        <Text variant="h3" bold>{formatCurrency(available, market_type)}</Text>
+                    </View>
+                    <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                        <View variant="transparent" style={[styles.kpiIcon, { backgroundColor: theme.colors.surface.base }]}>
+                            <Ionicons name="lock-closed-outline" size={20} color={theme.colors.text.tertiary} />
+                        </View>
+                        <Text variant="caption" color="tertiary" style={styles.kpiLabel}>Committed</Text>
+                        <Text variant="h3" bold>{formatCurrency(committed, market_type)}</Text>
+                    </View>
+                </View>
+
+                {/* Usage bar */}
+                <View variant="transparent" style={styles.barWrap}>
+                    <View variant="transparent" style={[styles.barTrack, { backgroundColor: theme.colors.surface.base }]}>
+                        <View variant="transparent" style={[styles.barFill, { width: `${Math.min(100, committedPct)}%`, backgroundColor: theme.colors.primary.default }]} />
+                    </View>
+                    <Text variant="caption" color="tertiary" style={styles.barLabel}>
+                        {formatCurrency(committed, market_type)} committed of {formatCurrency(total, market_type)} total
+                    </Text>
+                </View>
+            </View>
+        );
+    }
+
+    // ============================================
+    // INTERACTIVE: full escrow management
+    // ============================================
+    return (
+        <View variant="transparent" style={styles.container}>
+            {/* KPI Cards */}
+            <View variant="transparent" style={styles.kpiRow}>
+                <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                    <View variant="transparent" style={[styles.kpiIcon, { backgroundColor: theme.colors.primary.subtle }]}>
+                        <Ionicons name="wallet-outline" size={20} color={theme.colors.primary.default} />
+                    </View>
+                    <Text variant="caption" color="tertiary" style={styles.kpiLabel}>Available</Text>
+                    <Text variant="h3" bold>{formatCurrency(available, market_type)}</Text>
+                </View>
+                <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                    <View variant="transparent" style={[styles.kpiIcon, { backgroundColor: theme.colors.surface.base }]}>
+                        <Ionicons name="lock-closed-outline" size={20} color={theme.colors.text.tertiary} />
+                    </View>
+                    <Text variant="caption" color="tertiary" style={styles.kpiLabel}>Committed</Text>
+                    <Text variant="h3" bold>{formatCurrency(committed, market_type)}</Text>
+                </View>
+            </View>
+
+            {/* Usage bar */}
+            <View variant="transparent" style={styles.barWrap}>
+                <View variant="transparent" style={[styles.barTrack, { backgroundColor: theme.colors.surface.base }]}>
+                    <View variant="transparent" style={[styles.barFill, { width: `${Math.min(100, committedPct)}%`, backgroundColor: theme.colors.primary.default }]} />
+                </View>
+            </View>
+
+            {/* Wallet balance */}
+            {hasBalance && (
+                <View variant="transparent" style={[styles.walletRow, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                    <Ionicons name="card-outline" size={16} color={theme.colors.text.tertiary} />
+                    <Text variant="caption" color="secondary" style={{ marginLeft: 8, flex: 1 }}>Wallet Balance</Text>
+                    <Text variant="body" bold>{formatCurrency(player_balance, market_type)}</Text>
+                </View>
+            )}
+
+            {/* Budget cap */}
+            {budgetRemaining !== null && (
+                <View variant="transparent" style={styles.budgetWrap}>
+                    <View variant="transparent" style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 }}>
+                        <Text variant="caption" color="secondary">Budget Cap</Text>
+                        <Text variant="caption" bold style={{ color: budgetFullyDeposited ? theme.colors.status.success : theme.colors.text.primary }}>
+                            {budgetFullyDeposited ? 'Fully deposited' : `${formatCurrency(budgetRemaining, market_type)} remaining`}
+                        </Text>
+                    </View>
+                    <View variant="transparent" style={[styles.barTrack, { backgroundColor: theme.colors.surface.base }]}>
+                        <View variant="transparent" style={[styles.barFill, {
+                            width: `${budgetPct ?? 0}%`,
+                            backgroundColor: budgetFullyDeposited ? theme.colors.status.success : theme.colors.primary.default,
+                        }]} />
+                    </View>
+                    <Text variant="caption" color="tertiary" style={{ marginTop: 4 }}>
+                        {formatCurrency(netDeposited, market_type)} of {formatCurrency(Number(max_escrow), market_type)}
+                    </Text>
+                </View>
+            )}
+
+            {/* Transfer In / Out toggle */}
+            <View variant="transparent" style={styles.toggleRow}>
+                <TouchableOpacity
+                    style={[
+                        styles.toggleButton,
+                        action === 'transfer_in'
+                            ? { backgroundColor: theme.colors.primary.default }
+                            : { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle, borderWidth: 1 },
+                    ]}
+                    onPress={() => setAction('transfer_in')}
+                    activeOpacity={0.7}
+                >
+                    <Ionicons
+                        name="arrow-down-outline"
+                        size={18}
+                        color={action === 'transfer_in' ? '#FFFFFF' : theme.colors.text.secondary}
+                    />
+                    <Text
+                        variant="body"
+                        bold
+                        style={{ color: action === 'transfer_in' ? '#FFFFFF' : theme.colors.text.secondary, marginLeft: 6 }}
+                    >
+                        Transfer In
+                    </Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                    style={[
+                        styles.toggleButton,
+                        { marginLeft: 10 },
+                        action === 'transfer_out'
+                            ? { backgroundColor: theme.colors.primary.default }
+                            : { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle, borderWidth: 1 },
+                    ]}
+                    onPress={() => setAction('transfer_out')}
+                    activeOpacity={0.7}
+                >
+                    <Ionicons
+                        name="arrow-up-outline"
+                        size={18}
+                        color={action === 'transfer_out' ? '#FFFFFF' : theme.colors.text.secondary}
+                    />
+                    <Text
+                        variant="body"
+                        bold
+                        style={{ color: action === 'transfer_out' ? '#FFFFFF' : theme.colors.text.secondary, marginLeft: 6 }}
+                    >
+                        Transfer Out
+                    </Text>
+                </TouchableOpacity>
+            </View>
+
+            {/* Quick amount buttons */}
+            <View variant="transparent" style={styles.quickRow}>
+                {QUICK_AMOUNTS.map(amt => (
+                    <TouchableOpacity
+                        key={amt}
+                        style={[styles.quickBtn, {
+                            backgroundColor: numericAmount === amt ? theme.colors.primary.subtle : theme.colors.surface.elevated,
+                            borderColor: numericAmount === amt ? theme.colors.primary.default : theme.colors.border.subtle,
+                        }]}
+                        onPress={() => handleQuickAmount(amt)}
+                        activeOpacity={0.7}
+                    >
+                        <Text variant="body" bold style={{
+                            color: numericAmount === amt ? theme.colors.primary.default : theme.colors.text.primary,
+                        }}>
+                            {formatCurrency(amt, market_type)}
+                        </Text>
+                    </TouchableOpacity>
+                ))}
+            </View>
+
+            {/* Amount input + submit */}
+            <View variant="transparent" style={styles.inputRow}>
+                <View variant="transparent" style={[styles.inputWrap, {
+                    borderColor: insufficientBalance ? theme.colors.status.error : theme.colors.border.subtle,
+                    backgroundColor: theme.colors.surface.input,
+                }]}>
+                    <Text variant="body" color="tertiary" style={{ marginRight: 4 }}>$</Text>
+                    <TextInput
+                        style={[styles.input, { color: theme.colors.text.primary }]}
+                        value={amount}
+                        onChangeText={setAmount}
+                        keyboardType="decimal-pad"
+                        placeholder="0.00"
+                        placeholderTextColor={theme.colors.text.tertiary}
+                    />
+                </View>
+                <TouchableOpacity
+                    style={[styles.submitBtn, {
+                        backgroundColor: insufficientBalance
+                            ? theme.colors.status.error
+                            : (loading || !amount || numericAmount <= 0 || (action === 'transfer_in' && budgetFullyDeposited))
+                                ? theme.colors.surface.elevated
+                                : theme.colors.primary.default,
+                    }]}
+                    onPress={handleAction}
+                    disabled={loading || !amount || numericAmount <= 0 || (action === 'transfer_in' && budgetFullyDeposited)}
+                    activeOpacity={0.7}
+                >
+                    {loading ? (
+                        <ActivityIndicator size="small" color="#FFFFFF" />
+                    ) : (
+                        <>
+                            <Ionicons
+                                name={action === 'transfer_in' ? 'arrow-down-circle' : 'arrow-up-circle'}
+                                size={20}
+                                color={(!amount || numericAmount <= 0) ? theme.colors.text.tertiary : '#FFFFFF'}
+                            />
+                            <Text
+                                variant="body"
+                                bold
+                                style={{
+                                    color: (!amount || numericAmount <= 0) ? theme.colors.text.tertiary : '#FFFFFF',
+                                    marginLeft: 6,
+                                }}
+                            >
+                                {insufficientBalance
+                                    ? 'Deposit & Transfer'
+                                    : action === 'transfer_in'
+                                        ? 'Transfer In'
+                                        : 'Transfer Out'}
+                            </Text>
+                        </>
+                    )}
+                </TouchableOpacity>
+            </View>
+
+            {/* Insufficient balance */}
+            {insufficientBalance && (
+                <View variant="transparent" style={[styles.warningRow, { backgroundColor: theme.colors.status.error + '10' }]}>
+                    <Ionicons name="warning-outline" size={16} color={theme.colors.status.error} />
+                    <Text variant="caption" style={{ color: theme.colors.status.error, marginLeft: 8, flex: 1 }}>
+                        You need {formatCurrency(shortfall, market_type)} more in your wallet. Tap to deposit first.
+                    </Text>
+                </View>
+            )}
+
+            {/* Error */}
+            {error && (
+                <View variant="transparent" style={[styles.warningRow, { backgroundColor: theme.colors.status.error + '10' }]}>
+                    <Ionicons name="alert-circle-outline" size={16} color={theme.colors.status.error} />
+                    <Text variant="caption" style={{ color: theme.colors.status.error, marginLeft: 8, flex: 1 }}>
+                        {error}
+                    </Text>
+                </View>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 14,
+    },
+    // KPI Cards
+    kpiRow: {
+        flexDirection: 'row',
+        gap: 10,
+    },
+    kpiCard: {
+        flex: 1,
+        borderRadius: 12,
+        borderWidth: 1,
+        padding: 14,
+        alignItems: 'center',
+    },
+    kpiIcon: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 8,
+    },
+    kpiLabel: {
+        marginBottom: 2,
+    },
+    // Usage bar
+    barWrap: {
+        marginTop: 12,
+    },
+    barTrack: {
+        height: 6,
+        borderRadius: 3,
+        overflow: 'hidden',
+    },
+    barFill: {
+        height: 6,
+        borderRadius: 3,
+    },
+    barLabel: {
+        marginTop: 4,
+        textAlign: 'center',
+    },
+    // Wallet
+    walletRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderRadius: 10,
+        borderWidth: 1,
+        marginTop: 12,
+    },
+    // Budget
+    budgetWrap: {
+        marginTop: 12,
+    },
+    // Transfer toggle
+    toggleRow: {
+        flexDirection: 'row',
+        marginTop: 16,
+    },
+    toggleButton: {
+        flex: 1,
+        flexDirection: 'row',
+        height: 48,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    // Quick amounts
+    quickRow: {
+        flexDirection: 'row',
+        marginTop: 12,
+        gap: 8,
+    },
+    quickBtn: {
+        flex: 1,
+        height: 40,
+        borderRadius: 8,
+        borderWidth: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    // Input
+    inputRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 12,
+        gap: 10,
+    },
+    inputWrap: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 48,
+        borderRadius: 10,
+        borderWidth: 1,
+        paddingHorizontal: 14,
+    },
+    input: {
+        flex: 1,
+        fontSize: 18,
+        height: 48,
+        padding: 0,
+    },
+    submitBtn: {
+        flexDirection: 'row',
+        height: 48,
+        paddingHorizontal: 16,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    // Warnings
+    warningRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderRadius: 10,
+        marginTop: 10,
+    },
+});

package/src/components/CalcuttaItemResults.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import { StyleSheet, FlatList } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaAuctionItemProps, CalcuttaItemResultProps } from '@bettoredge/types';
+import { formatCurrency, getStatusLabel } from '../helpers/formatting';
+
+export interface CalcuttaItemResultsProps {
+    item: CalcuttaAuctionItemProps;
+    item_results: CalcuttaItemResultProps[];
+    market_type: string;
+}
+
+export const CalcuttaItemResults: React.FC<CalcuttaItemResultsProps> = ({
+    item,
+    item_results,
+    market_type,
+}) => {
+    const { theme } = useTheme();
+
+    const results = [...item_results]
+        .filter(r => r.calcutta_auction_item_id === item.calcutta_auction_item_id)
+        .sort((a, b) => (a.round_number ?? 0) - (b.round_number ?? 0));
+
+    const totalPayout = results.reduce((sum, r) => sum + Number(r.payout_earned), 0);
+
+    const getResultIcon = (result: string): { name: keyof typeof Ionicons.glyphMap; color: string } => {
+        switch (result) {
+            case 'advanced':
+                return { name: 'checkmark-circle', color: theme.colors.status.success };
+            case 'eliminated':
+                return { name: 'close-circle', color: theme.colors.status.error };
+            case 'won':
+                return { name: 'trophy', color: '#FFD700' };
+            case 'placed':
+                return { name: 'medal-outline', color: theme.colors.primary.default };
+            default:
+                return { name: 'ellipse-outline', color: theme.colors.text.tertiary };
+        }
+    };
+
+    const renderResult = ({ item: result }: { item: CalcuttaItemResultProps }) => {
+        const icon = getResultIcon(result.result);
+        return (
+            <View
+                variant="transparent"
+                style={[styles.resultRow, { borderColor: theme.colors.border.subtle }]}
+            >
+                <View variant="transparent" style={styles.roundCol}>
+                    <Text variant="caption" color="secondary">
+                        R{result.round_number ?? '-'}
+                    </Text>
+                </View>
+                <Ionicons name={icon.name} size={16} color={icon.color} style={styles.resultIcon} />
+                <View variant="transparent" style={styles.resultInfo}>
+                    <Text variant="body">{getStatusLabel(result.result)}</Text>
+                    {result.placement != null && (
+                        <Text variant="caption" color="tertiary">
+                            Placement: {result.placement}
+                        </Text>
+                    )}
+                </View>
+                <View variant="transparent" style={styles.payoutCol}>
+                    {result.payout_earned > 0 ? (
+                        <Text variant="caption" style={{ color: theme.colors.status.success }}>
+                            +{formatCurrency(result.payout_earned, market_type)}
+                        </Text>
+                    ) : (
+                        <Text variant="caption" color="tertiary">-</Text>
+                    )}
+                    {result.processed && (
+                        <Ionicons name="checkmark" size={12} color={theme.colors.status.success} style={{ marginTop: 2 }} />
+                    )}
+                </View>
+            </View>
+        );
+    };
+
+    return (
+        <View variant="transparent" style={styles.container}>
+            {/* Item header */}
+            <View variant="transparent" style={[styles.header, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                <View variant="transparent" style={styles.headerLeft}>
+                    <View variant="transparent" style={[styles.itemIcon, { backgroundColor: theme.colors.surface.base }]}>
+                        <Ionicons
+                            name={item.item_type === 'team' ? 'people-outline' : 'person-outline'}
+                            size={18}
+                            color={theme.colors.text.tertiary}
+                        />
+                    </View>
+                    <View variant="transparent" style={styles.headerInfo}>
+                        <Text variant="body" bold numberOfLines={1}>{item.item_name}</Text>
+                        <Text variant="caption" color="tertiary">
+                            {item.seed != null ? `#${item.seed} Seed` : item.item_type}
+                            {' \u00B7 '}
+                            {getStatusLabel(item.status)}
+                        </Text>
+                    </View>
+                </View>
+                <View variant="transparent" style={styles.headerRight}>
+                    <Text variant="caption" color="tertiary">Won for</Text>
+                    <Text variant="body" bold>
+                        {item.winning_bid > 0 ? formatCurrency(item.winning_bid, market_type) : '-'}
+                    </Text>
+                </View>
+            </View>
+
+            {/* Summary */}
+            <View variant="transparent" style={[styles.summary, { borderColor: theme.colors.border.subtle }]}>
+                <View variant="transparent" style={styles.summaryItem}>
+                    <Text variant="caption" color="tertiary">Rounds</Text>
+                    <Text variant="body" bold>{results.length}</Text>
+                </View>
+                <View variant="transparent" style={styles.summaryItem}>
+                    <Text variant="caption" color="tertiary">Advanced</Text>
+                    <Text variant="body" bold style={{ color: theme.colors.status.success }}>
+                        {results.filter(r => r.result === 'advanced' || r.result === 'won').length}
+                    </Text>
+                </View>
+                <View variant="transparent" style={styles.summaryItem}>
+                    <Text variant="caption" color="tertiary">Total Payout</Text>
+                    <Text variant="body" bold style={{ color: totalPayout > 0 ? theme.colors.status.success : theme.colors.text.primary }}>
+                        {formatCurrency(totalPayout, market_type)}
+                    </Text>
+                </View>
+            </View>
+
+            {/* Results list */}
+            <FlatList
+                data={results}
+                keyExtractor={r => r.calcutta_item_result_id}
+                renderItem={renderResult}
+                ListEmptyComponent={
+                    <Text variant="caption" color="tertiary" style={styles.emptyText}>
+                        No results yet
+                    </Text>
+                }
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderBottomWidth: 1,
+    },
+    headerLeft: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    itemIcon: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    headerInfo: {
+        flex: 1,
+        marginLeft: 10,
+    },
+    headerRight: {
+        alignItems: 'flex-end',
+        marginLeft: 10,
+    },
+    summary: {
+        flexDirection: 'row',
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        borderBottomWidth: 1,
+    },
+    summaryItem: {
+        flex: 1,
+        alignItems: 'center',
+    },
+    resultRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        borderBottomWidth: 1,
+    },
+    roundCol: {
+        width: 30,
+    },
+    resultIcon: {
+        marginRight: 8,
+    },
+    resultInfo: {
+        flex: 1,
+    },
+    payoutCol: {
+        alignItems: 'flex-end',
+        marginLeft: 10,
+    },
+    emptyText: {
+        textAlign: 'center',
+        padding: 20,
+    },
+});