@bettoredge/calcutta 0.2.0

package/src/components/CalcuttaLeaderboard.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import { StyleSheet, FlatList, Image } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaParticipantProps, PublicPlayerProps } from '@bettoredge/types';
+import { formatCurrency, formatPlace } from '../helpers/formatting';
+
+export interface CalcuttaLeaderboardProps {
+    participants: CalcuttaParticipantProps[];
+    players?: Record<string, PublicPlayerProps>;
+    player_id?: string;
+    market_type: string;
+    listHeader?: React.ReactNode;
+}
+
+export const CalcuttaLeaderboard: React.FC<CalcuttaLeaderboardProps> = ({
+    participants,
+    players,
+    player_id,
+    market_type,
+    listHeader,
+}) => {
+    const { theme } = useTheme();
+
+    const sorted = [...participants].sort((a, b) => {
+        if (a.place && b.place) return a.place - b.place;
+        if (a.place) return -1;
+        if (b.place) return 1;
+        return b.total_winnings - a.total_winnings;
+    });
+
+    const renderHeader = () => (
+        <View variant="transparent">
+            <>{listHeader}</>
+            <View
+                variant="transparent"
+                style={[styles.headerRow, { borderColor: theme.colors.border.subtle, backgroundColor: theme.colors.surface.elevated }]}
+            >
+                <Text variant="caption" color="tertiary" style={styles.placeCol}>#</Text>
+                <Text variant="caption" color="tertiary" style={styles.playerCol}>Player</Text>
+                <Text variant="caption" color="tertiary" style={styles.numCol}>Items</Text>
+                <Text variant="caption" color="tertiary" style={styles.numCol}>Spent</Text>
+                <Text variant="caption" color="tertiary" style={styles.numCol}>Won</Text>
+            </View>
+        </View>
+    );
+
+    const renderItem = ({ item, index }: { item: CalcuttaParticipantProps; index: number }) => {
+        const place = item.place ?? index + 1;
+        const isPositive = item.total_winnings > item.total_spent;
+        const isMe = item.player_id === player_id;
+        const player = players?.[item.player_id];
+        const username = player?.username || player?.show_name || `Player ${item.player_id.slice(0, 6)}`;
+        const profilePic = player?.profile_pic;
+
+        return (
+            <View
+                variant="transparent"
+                style={[styles.row, { borderColor: theme.colors.border.subtle }, isMe && { backgroundColor: theme.colors.primary.subtle + '40' }]}
+            >
+                <View variant="transparent" style={styles.placeCol}>
+                    {place <= 3 ? (
+                        <Ionicons
+                            name="trophy"
+                            size={14}
+                            color={place === 1 ? '#FFD700' : place === 2 ? '#C0C0C0' : '#CD7F32'}
+                        />
+                    ) : (
+                        <Text variant="caption" color="secondary">{formatPlace(place)}</Text>
+                    )}
+                </View>
+                <View variant="transparent" style={styles.playerInfo}>
+                    {profilePic ? (
+                        <Image source={{ uri: profilePic }} style={styles.avatar} />
+                    ) : (
+                        <View variant="transparent" style={[styles.avatar, { backgroundColor: theme.colors.primary.subtle }]}>
+                            <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 10 }}>
+                                {username.charAt(0).toUpperCase()}
+                            </Text>
+                        </View>
+                    )}
+                    <View variant="transparent" style={{ flex: 1, marginLeft: 8 }}>
+                        <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center' }}>
+                            <Text variant="body" bold={isMe} numberOfLines={1} style={{ flex: 1 }}>{username}</Text>
+                            {isMe && (
+                                <View variant="transparent" style={[styles.youBadge, { backgroundColor: theme.colors.primary.subtle }]}>
+                                    <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 9 }}>YOU</Text>
+                                </View>
+                            )}
+                        </View>
+                    </View>
+                </View>
+                <Text variant="caption" color="secondary" style={styles.numCol}>
+                    {item.items_owned}
+                </Text>
+                <Text variant="caption" color="secondary" style={styles.numCol}>
+                    {formatCurrency(item.total_spent, market_type)}
+                </Text>
+                <Text
+                    variant="caption"
+                    bold={isPositive}
+                    style={[
+                        styles.numCol,
+                        { color: isPositive ? theme.colors.status.success : theme.colors.text.secondary },
+                    ]}
+                >
+                    {formatCurrency(item.total_winnings, market_type)}
+                </Text>
+            </View>
+        );
+    };
+
+    return (
+        <FlatList
+            data={sorted}
+            keyExtractor={item => item.calcutta_participant_id}
+            ListHeaderComponent={renderHeader}
+            renderItem={renderItem}
+            ListEmptyComponent={
+                <Text variant="caption" color="tertiary" style={styles.emptyText}>
+                    No participants yet
+                </Text>
+            }
+        />
+    );
+};
+
+const styles = StyleSheet.create({
+    headerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        borderBottomWidth: 1,
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        borderBottomWidth: 1,
+    },
+    placeCol: {
+        width: 32,
+        alignItems: 'center',
+    },
+    playerInfo: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginLeft: 4,
+    },
+    playerCol: {
+        flex: 1,
+        marginLeft: 4,
+    },
+    avatar: {
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    youBadge: {
+        paddingHorizontal: 5,
+        paddingVertical: 1,
+        borderRadius: 4,
+        marginLeft: 4,
+    },
+    numCol: {
+        width: 60,
+        textAlign: 'right',
+    },
+    emptyText: {
+        textAlign: 'center',
+        padding: 20,
+    },
+});

package/src/components/CalcuttaPayoutPreview.tsx

@@ -0,0 +1,194 @@
+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 { CalcuttaPayoutRuleProps } from '@bettoredge/types';
+import { formatCurrency } from '../helpers/formatting';
+
+export interface CalcuttaPayoutPreviewProps {
+    payout_rules: CalcuttaPayoutRuleProps[];
+    total_pot: number;
+    market_type: string;
+    unclaimed_pot?: number;
+    min_spend_pct?: number;
+}
+
+export const CalcuttaPayoutPreview: React.FC<CalcuttaPayoutPreviewProps> = ({
+    payout_rules,
+    total_pot,
+    market_type,
+    unclaimed_pot,
+    min_spend_pct,
+}) => {
+    const { theme } = useTheme();
+
+    const roundRules = payout_rules
+        .filter(r => r.payout_type === 'round')
+        .sort((a, b) => (a.round_number ?? 0) - (b.round_number ?? 0));
+
+    const placementRules = payout_rules
+        .filter(r => r.payout_type === 'placement')
+        .sort((a, b) => (a.placement ?? 0) - (b.placement ?? 0));
+
+    const totalPct = payout_rules.reduce((sum, r) => sum + r.payout_pct, 0);
+
+    const renderRule = (rule: CalcuttaPayoutRuleProps) => {
+        const amount = (rule.payout_pct / 100) * total_pot;
+        return (
+            <View
+                key={rule.calcutta_payout_rule_id}
+                variant="transparent"
+                style={[styles.ruleRow, { borderColor: theme.colors.border.subtle }]}
+            >
+                <View variant="transparent" style={styles.ruleInfo}>
+                    <Text variant="body" numberOfLines={1}>
+                        {rule.description ?? `${rule.payout_type === 'round' ? `Round ${rule.round_number}` : `${rule.placement}${getOrdinal(rule.placement ?? 0)} Place`}`}
+                    </Text>
+                    <Text variant="caption" color="tertiary">
+                        {rule.payout_type === 'round' ? 'Round Payout' : 'Placement Payout'}
+                    </Text>
+                </View>
+                <View variant="transparent" style={styles.ruleAmounts}>
+                    <Text variant="body" bold>
+                        {formatCurrency(amount, market_type)}
+                    </Text>
+                    <Text variant="caption" color="tertiary">
+                        {rule.payout_pct.toFixed(1)}%
+                    </Text>
+                </View>
+            </View>
+        );
+    };
+
+    return (
+        <View variant="transparent" style={styles.container}>
+            {/* Total pot summary */}
+            <View
+                variant="transparent"
+                style={[styles.potSummary, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}
+            >
+                <Ionicons name="cash-outline" size={20} color={theme.colors.primary.default} />
+                <View variant="transparent" style={styles.potInfo}>
+                    <Text variant="caption" color="tertiary">Total Pot</Text>
+                    <Text variant="body" bold>
+                        {formatCurrency(total_pot, market_type)}
+                    </Text>
+                </View>
+                <View variant="transparent" style={styles.potInfo}>
+                    <Text variant="caption" color="tertiary">Allocated</Text>
+                    <Text variant="body" bold>
+                        {totalPct.toFixed(1)}%
+                    </Text>
+                </View>
+            </View>
+
+            {/* Min spend rule note */}
+            {min_spend_pct != null && Number(min_spend_pct) > 0 && (
+                <View
+                    variant="transparent"
+                    style={[styles.rolloverBanner, { backgroundColor: theme.colors.primary.subtle, borderColor: theme.colors.border.subtle }]}
+                >
+                    <Ionicons name="alert-circle-outline" size={16} color={theme.colors.primary.default} />
+                    <View variant="transparent" style={{ marginLeft: 8, flex: 1 }}>
+                        <Text variant="caption" style={{ color: theme.colors.text.secondary }}>
+                            Min spend rule active: {Number(min_spend_pct)}%. If you deposit $300 but only bid $200, the ${((Number(min_spend_pct) / 100) * 300 - 200).toFixed(0)} shortfall is added to the pot.
+                        </Text>
+                    </View>
+                </View>
+            )}
+
+            {/* Unclaimed rollover notice */}
+            {(unclaimed_pot ?? 0) > 0 && (
+                <View
+                    variant="transparent"
+                    style={[styles.rolloverBanner, { backgroundColor: theme.colors.primary.subtle, borderColor: theme.colors.border.subtle }]}
+                >
+                    <Ionicons name="swap-horizontal-outline" size={16} color={theme.colors.primary.default} />
+                    <View variant="transparent" style={{ marginLeft: 8, flex: 1 }}>
+                        <Text variant="caption" bold style={{ color: theme.colors.primary.default }}>
+                            {formatCurrency(unclaimed_pot ?? 0, market_type)} rolling forward
+                        </Text>
+                        <Text variant="caption" style={{ color: theme.colors.text.secondary, marginTop: 2 }}>
+                            From unbid teams that advanced. This amount is added to the next round's pool. After the final round, any remaining amount is split among all players based on how much they spent.
+                        </Text>
+                    </View>
+                </View>
+            )}
+
+            {/* Round-based payouts */}
+            {roundRules.length > 0 && (
+                <>
+                    <View variant="transparent" style={styles.sectionHeader}>
+                        <Text variant="caption" bold color="secondary">Round Payouts</Text>
+                    </View>
+                    {roundRules.map(renderRule)}
+                </>
+            )}
+
+            {/* Placement-based payouts */}
+            {placementRules.length > 0 && (
+                <>
+                    <View variant="transparent" style={styles.sectionHeader}>
+                        <Text variant="caption" bold color="secondary">Placement Payouts</Text>
+                    </View>
+                    {placementRules.map(renderRule)}
+                </>
+            )}
+
+            {payout_rules.length === 0 && (
+                <Text variant="caption" color="tertiary" style={styles.emptyText}>
+                    No payout rules defined
+                </Text>
+            )}
+        </View>
+    );
+};
+
+const getOrdinal = (n: number): string => {
+    const suffixes = ['th', 'st', 'nd', 'rd'];
+    const v = n % 100;
+    return (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]);
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    potSummary: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 14,
+        borderBottomWidth: 1,
+    },
+    potInfo: {
+        marginLeft: 16,
+    },
+    sectionHeader: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    ruleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        borderBottomWidth: 1,
+    },
+    ruleInfo: {
+        flex: 1,
+    },
+    ruleAmounts: {
+        alignItems: 'flex-end',
+        marginLeft: 10,
+    },
+    emptyText: {
+        textAlign: 'center',
+        padding: 20,
+    },
+    rolloverBanner: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        padding: 12,
+        borderBottomWidth: 1,
+    },
+});

package/src/components/CalcuttaRoundResults.tsx

@@ -0,0 +1,250 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type {
+    CalcuttaRoundProps,
+    CalcuttaAuctionItemProps,
+    CalcuttaItemResultProps,
+    CalcuttaPayoutRuleProps,
+} from '@bettoredge/types';
+import { useCalcuttaResults, RoundResultSummary } from '../hooks/useCalcuttaResults';
+import { formatCurrency, getStatusLabel } from '../helpers/formatting';
+
+export interface CalcuttaRoundResultsProps {
+    rounds: CalcuttaRoundProps[];
+    items: CalcuttaAuctionItemProps[];
+    item_results: CalcuttaItemResultProps[];
+    payout_rules: CalcuttaPayoutRuleProps[];
+    market_type: string;
+    total_pot?: number;
+    unclaimed_pot?: number;
+}
+
+export const CalcuttaRoundResults: React.FC<CalcuttaRoundResultsProps> = ({
+    rounds,
+    items,
+    item_results,
+    payout_rules,
+    market_type,
+    total_pot,
+    unclaimed_pot,
+}) => {
+    const { theme } = useTheme();
+    const { roundSummaries } = useCalcuttaResults(rounds, items, item_results, payout_rules);
+    const [expandedRound, setExpandedRound] = useState<string | null>(null);
+
+    if (rounds.length === 0) {
+        return (
+            <View variant="transparent" style={styles.emptyContainer}>
+                <Text variant="caption" color="tertiary">No rounds yet</Text>
+            </View>
+        );
+    }
+
+    const toggleRound = (roundId: string) => {
+        setExpandedRound(prev => prev === roundId ? null : roundId);
+    };
+
+    const renderRound = (summary: RoundResultSummary) => {
+        const isExpanded = expandedRound === summary.round.calcutta_round_id;
+        const statusColor = summary.round.status === 'closed'
+            ? theme.colors.status.success
+            : summary.round.status === 'inprogress'
+                ? theme.colors.primary.default
+                : theme.colors.text.tertiary;
+
+        return (
+            <View
+                key={summary.round.calcutta_round_id}
+                variant="transparent"
+                style={[styles.roundCard, { borderColor: theme.colors.border.subtle }]}
+            >
+                <TouchableOpacity
+                    style={styles.roundHeader}
+                    onPress={() => toggleRound(summary.round.calcutta_round_id)}
+                    activeOpacity={0.7}
+                >
+                    <View variant="transparent" style={styles.roundInfo}>
+                        <Text variant="body" bold>{summary.round.round_name}</Text>
+                        <View variant="transparent" style={styles.roundMeta}>
+                            <View variant="transparent" style={[styles.statusDot, { backgroundColor: statusColor }]} />
+                            <Text variant="caption" color="tertiary">
+                                {getStatusLabel(summary.round.status)}
+                            </Text>
+                            {summary.total_payout > 0 && (
+                                <Text variant="caption" style={{ color: theme.colors.status.success, marginLeft: 8 }}>
+                                    {formatCurrency(summary.total_payout, market_type)} paid
+                                </Text>
+                            )}
+                        </View>
+                    </View>
+                    <View variant="transparent" style={styles.roundCounts}>
+                        <Text variant="caption" bold style={{ color: theme.colors.status.success }}>
+                            {summary.advanced_items.length}/{summary.advanced_items.length + summary.eliminated_items.length}
+                        </Text>
+                        <Text variant="caption" color="tertiary" style={{ marginLeft: 4 }}>advanced</Text>
+                    </View>
+                    <Ionicons
+                        name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                        size={16}
+                        color={theme.colors.text.tertiary}
+                        style={styles.chevron}
+                    />
+                </TouchableOpacity>
+
+                {isExpanded && (
+                    <View variant="transparent" style={[styles.roundBody, { borderColor: theme.colors.border.subtle }]}>
+                        {/* Payout rule */}
+                        {summary.payout_rule && (
+                            <View variant="transparent" style={styles.payoutRow}>
+                                <Ionicons name="cash-outline" size={14} color={theme.colors.text.tertiary} />
+                                <Text variant="caption" color="tertiary" style={{ marginLeft: 6 }}>
+                                    {summary.payout_rule.payout_pct}% of pot split among advancing teams
+                                </Text>
+                            </View>
+                        )}
+
+                        {/* Rollover notice for unsold advancing items */}
+                        {summary.round.status === 'closed' && summary.advanced_items.some(i => !i.winning_player_id) && (
+                            <View variant="transparent" style={[styles.payoutRow, { marginTop: 2 }]}>
+                                <Ionicons name="arrow-forward-circle-outline" size={14} color={theme.colors.primary.default} />
+                                <Text variant="caption" style={{ marginLeft: 6, color: theme.colors.primary.default, flex: 1 }}>
+                                    Unbid teams' share rolls into the next round. Any amount remaining after the final round is redistributed to all players proportionally.
+                                </Text>
+                            </View>
+                        )}
+
+                        {/* Advanced items */}
+                        {summary.advanced_items.length > 0 && (
+                            <>
+                                <Text variant="caption" bold color="secondary" style={styles.sectionLabel}>
+                                    Advanced ({summary.advanced_items.length})
+                                </Text>
+                                {summary.advanced_items.map(item => {
+                                    const isUnsold = !item.winning_player_id;
+                                    return (
+                                        <View key={item.calcutta_auction_item_id} variant="transparent" style={styles.itemRow}>
+                                            <Ionicons
+                                                name={isUnsold ? 'help-circle' : 'checkmark-circle'}
+                                                size={14}
+                                                color={isUnsold ? theme.colors.text.tertiary : theme.colors.status.success}
+                                            />
+                                            <Text variant="caption" style={[styles.itemName, isUnsold && { color: theme.colors.text.tertiary }]} numberOfLines={1}>
+                                                {item.item_name}{isUnsold ? ' (unbid)' : ''}
+                                            </Text>
+                                            {item.seed != null && (
+                                                <Text variant="caption" color="tertiary">#{item.seed}</Text>
+                                            )}
+                                        </View>
+                                    );
+                                })}
+                            </>
+                        )}
+
+                        {/* Eliminated items */}
+                        {summary.eliminated_items.length > 0 && (
+                            <>
+                                <Text variant="caption" bold color="secondary" style={styles.sectionLabel}>
+                                    Eliminated ({summary.eliminated_items.length})
+                                </Text>
+                                {summary.eliminated_items.map(item => {
+                                    const isUnsold = !item.winning_player_id;
+                                    return (
+                                        <View key={item.calcutta_auction_item_id} variant="transparent" style={styles.itemRow}>
+                                            <Ionicons name="close-circle" size={14} color={theme.colors.status.error} />
+                                            <Text variant="caption" style={[styles.itemName, isUnsold && { color: theme.colors.text.tertiary }]} numberOfLines={1}>
+                                                {item.item_name}{isUnsold ? ' (unbid)' : ''}
+                                            </Text>
+                                            {item.seed != null && (
+                                                <Text variant="caption" color="tertiary">#{item.seed}</Text>
+                                            )}
+                                        </View>
+                                    );
+                                })}
+                            </>
+                        )}
+
+                        {summary.advanced_items.length === 0 && summary.eliminated_items.length === 0 && (
+                            <Text variant="caption" color="tertiary" style={styles.noResults}>
+                                No results yet for this round
+                            </Text>
+                        )}
+                    </View>
+                )}
+            </View>
+        );
+    };
+
+    return (
+        <ScrollView style={styles.container}>
+            {roundSummaries.map(renderRound)}
+        </ScrollView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    emptyContainer: {
+        alignItems: 'center',
+        padding: 20,
+    },
+    roundCard: {
+        borderBottomWidth: 1,
+    },
+    roundHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+    },
+    roundInfo: {
+        flex: 1,
+    },
+    roundMeta: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 4,
+    },
+    statusDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        marginRight: 6,
+    },
+    roundCounts: {
+        marginHorizontal: 10,
+    },
+    chevron: {
+        marginLeft: 4,
+    },
+    roundBody: {
+        paddingHorizontal: 12,
+        paddingBottom: 12,
+        borderTopWidth: 1,
+    },
+    payoutRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 8,
+    },
+    sectionLabel: {
+        marginTop: 8,
+        marginBottom: 4,
+    },
+    itemRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 4,
+        paddingLeft: 4,
+    },
+    itemName: {
+        flex: 1,
+        marginLeft: 6,
+    },
+    noResults: {
+        paddingVertical: 8,
+        textAlign: 'center',
+    },
+});