@bettoredge/calcutta 0.2.0

package/src/components/sealed/SealedBidPlayersTab.tsx

@@ -0,0 +1,220 @@
+import React, { useMemo } 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 type { CalcuttaPresence } from '../../hooks/useCalcuttaSocket';
+import type { CalcuttaLifecycleState } from '../../helpers/lifecycleState';
+import { formatCurrency } from '../../helpers/formatting';
+import { showResults } from '../../helpers/lifecycleState';
+
+interface SealedBidPlayersTabProps {
+    participants: CalcuttaParticipantProps[];
+    players: Record<string, PublicPlayerProps>;
+    player_id?: string;
+    presence: CalcuttaPresence;
+    market_type: string;
+    lifecycleState: CalcuttaLifecycleState;
+    socketConnected?: boolean;
+    listHeader?: React.ReactNode;
+}
+
+export const SealedBidPlayersTab: React.FC<SealedBidPlayersTabProps> = ({
+    participants,
+    players,
+    player_id,
+    presence,
+    market_type,
+    lifecycleState,
+    socketConnected,
+    listHeader,
+}) => {
+    const { theme } = useTheme();
+    const isResultsPhase = showResults(lifecycleState);
+    const showOnlineStatus = socketConnected && !isResultsPhase;
+
+    const onlineIds = useMemo(
+        () => new Set(presence.players.map(p => p.player_id)),
+        [presence.players],
+    );
+
+    const onlineCount = useMemo(
+        () => participants.filter(p => onlineIds.has(p.player_id)).length,
+        [participants, onlineIds],
+    );
+
+    // Sort by rank/winnings in results phase
+    const sortedParticipants = useMemo(() => {
+        if (!isResultsPhase) return participants;
+        return [...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 || 0) - (a.total_winnings || 0);
+        });
+    }, [participants, isResultsPhase]);
+
+    if (participants.length === 0) {
+        return (
+            <View variant="transparent" style={styles.container}>
+                <>{listHeader}</>
+                <View variant="transparent" style={styles.emptyContainer}>
+                    <Ionicons name="people-outline" size={40} color={theme.colors.text.tertiary} />
+                    <Text variant="body" color="tertiary" style={{ marginTop: 12 }}>No players yet</Text>
+                </View>
+            </View>
+        );
+    }
+
+    return (
+        <View variant="transparent" style={styles.container}>
+            <FlatList
+                data={sortedParticipants}
+                keyExtractor={p => p.calcutta_participant_id}
+                contentContainerStyle={styles.list}
+                ListHeaderComponent={
+                    <View variant="transparent">
+                        <>{listHeader}</>
+                        <View variant="transparent" style={styles.headerRow}>
+                            <Text variant="caption" color="secondary">
+                                {showOnlineStatus
+                                    ? `${onlineCount} of ${participants.length} player${participants.length !== 1 ? 's' : ''} online`
+                                    : `${participants.length} player${participants.length !== 1 ? 's' : ''}`
+                                }
+                            </Text>
+                        </View>
+                    </View>
+                }
+                renderItem={({ item: participant, index }) => {
+                    const player = players[participant.player_id];
+                    const isOnline = onlineIds.has(participant.player_id);
+                    const isMe = participant.player_id === player_id;
+                    const username = player?.username || player?.show_name || `Player ${participant.player_id.slice(0, 6)}`;
+                    const profilePic = player?.profile_pic;
+
+                    return (
+                        <View variant="transparent" style={[styles.playerRow, { borderColor: theme.colors.border.subtle }]}>
+                            {/* Rank in results phase */}
+                            {isResultsPhase && (
+                                <View variant="transparent" style={styles.rankCol}>
+                                    {(participant.place ?? index + 1) <= 3 ? (
+                                        <Ionicons
+                                            name="trophy"
+                                            size={14}
+                                            color={(participant.place ?? index + 1) === 1 ? '#FFD700' : (participant.place ?? index + 1) === 2 ? '#C0C0C0' : '#CD7F32'}
+                                        />
+                                    ) : (
+                                        <Text variant="caption" color="tertiary">{participant.place ?? index + 1}</Text>
+                                    )}
+                                </View>
+                            )}
+
+                            {/* Avatar */}
+                            <View variant="transparent" style={styles.avatarWrap}>
+                                {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 }}>
+                                            {username.charAt(0).toUpperCase()}
+                                        </Text>
+                                    </View>
+                                )}
+                                {showOnlineStatus && isOnline && (
+                                    <View variant="transparent" style={[styles.onlineDot, { backgroundColor: '#10B981', borderColor: theme.colors.surface.base }]} />
+                                )}
+                            </View>
+
+                            {/* Name */}
+                            <View variant="transparent" style={{ flex: 1 }}>
+                                <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                    <Text variant="body" bold={isMe} numberOfLines={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>
+                                {isResultsPhase && (
+                                    <Text variant="caption" color="tertiary" style={{ marginTop: 2 }}>
+                                        {participant.items_owned > 0
+                                            ? `${participant.items_owned} item${participant.items_owned !== 1 ? 's' : ''} · ${formatCurrency(participant.total_spent, market_type)} spent`
+                                            : 'No items'}
+                                    </Text>
+                                )}
+                            </View>
+
+                            {/* Winnings in results phase */}
+                            {isResultsPhase && participant.total_winnings > 0 && (
+                                <View variant="transparent" style={{ alignItems: 'flex-end' }}>
+                                    <Text variant="caption" color="tertiary" style={{ fontSize: 10 }}>Won</Text>
+                                    <Text variant="body" bold style={{ color: theme.colors.status.success }}>
+                                        {formatCurrency(participant.total_winnings, market_type)}
+                                    </Text>
+                                </View>
+                            )}
+                        </View>
+                    );
+                }}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    emptyContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 40,
+    },
+    headerRow: {
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+    },
+    list: {
+        paddingBottom: 40,
+    },
+    rankCol: {
+        width: 28,
+        alignItems: 'center',
+        marginRight: 4,
+    },
+    playerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+    },
+    avatarWrap: {
+        marginRight: 12,
+        position: 'relative',
+    },
+    avatar: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    onlineDot: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        borderWidth: 2,
+    },
+    youBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 6,
+        marginLeft: 6,
+    },
+});

package/src/components/sealed/SealedBidStatusBar.tsx

@@ -0,0 +1,415 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaCompetitionProps, CalcuttaEscrowProps, CalcuttaBidProps, CalcuttaAuctionItemProps } from '@bettoredge/types';
+import type { CalcuttaLifecycleState } from '../../helpers/lifecycleState';
+import { formatCurrency } from '../../helpers/formatting';
+
+interface SealedBidStatusBarProps {
+    competition: CalcuttaCompetitionProps;
+    escrow?: CalcuttaEscrowProps;
+    my_bids: CalcuttaBidProps[];
+    items: CalcuttaAuctionItemProps[];
+    totalItems: number;
+    market_type: string;
+    player_id?: string;
+    lifecycleState: CalcuttaLifecycleState;
+    auctionExpired?: boolean;
+    isParticipant?: boolean;
+    onEscrowTap: () => void;
+    onLeave?: () => void;
+    leaving?: boolean;
+}
+
+const getTimerColor = (msLeft: number) => {
+    if (msLeft > 3600000) return '#10B981';
+    if (msLeft > 600000) return '#F59E0B';
+    return '#EF4444';
+};
+
+export const SealedBidStatusBar: React.FC<SealedBidStatusBarProps> = ({
+    competition,
+    escrow,
+    my_bids,
+    items,
+    totalItems,
+    market_type,
+    player_id,
+    lifecycleState,
+    auctionExpired,
+    isParticipant,
+    onEscrowTap,
+    onLeave,
+    leaving,
+}) => {
+    const { theme } = useTheme();
+    const [timeLeft, setTimeLeft] = useState('');
+    const [msLeft, setMsLeft] = useState(Infinity);
+    const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+    const timerTarget = lifecycleState === 'auctioning'
+        ? competition.auction_end_datetime
+        : lifecycleState === 'scheduled'
+            ? competition.auction_start_datetime
+            : undefined;
+
+    useEffect(() => {
+        if (!timerTarget) {
+            setTimeLeft('');
+            setMsLeft(0);
+            return;
+        }
+
+        const update = () => {
+            const end = new Date(timerTarget).getTime();
+            const diff = end - Date.now();
+            setMsLeft(diff);
+
+            if (diff <= 0) {
+                setTimeLeft(lifecycleState === 'auctioning' ? 'Closed' : 'Starting...');
+                if (timerRef.current) clearInterval(timerRef.current);
+                return;
+            }
+
+            const d = Math.floor(diff / 86400000);
+            const h = Math.floor((diff % 86400000) / 3600000);
+            const m = Math.floor((diff % 3600000) / 60000);
+            const s = Math.floor((diff % 60000) / 1000);
+
+            if (d > 0) setTimeLeft(`${d}d ${h}h`);
+            else if (h > 0) setTimeLeft(`${h}h ${m}m`);
+            else setTimeLeft(`${m}:${s.toString().padStart(2, '0')}`);
+        };
+
+        update();
+        timerRef.current = setInterval(update, 1000);
+        return () => { if (timerRef.current) clearInterval(timerRef.current); };
+    }, [timerTarget, lifecycleState]);
+
+    const escrowBalance = Number(escrow?.escrow_balance ?? 0);
+    const committed = Number(escrow?.committed_balance ?? 0);
+    const total = escrowBalance + committed;
+    // All items I purchased (active + eliminated)
+    const myPurchasedItems = items.filter(i => i.winning_player_id === player_id);
+
+    // ============================================
+    // PENDING
+    // ============================================
+    if (lifecycleState === 'pending') {
+        return (
+            <View variant="transparent" style={[styles.container, { borderColor: theme.colors.border.subtle }]}>
+                
+                <View variant="transparent" style={styles.cells}>
+                    <View variant="transparent" style={styles.cell}>
+                        <Ionicons name="lock-closed-outline" size={14} color="#F59E0B" />
+                        <Text variant="caption" bold style={{ color: '#F59E0B', marginLeft: 4 }}>
+                            Coming Soon
+                        </Text>
+                    </View>
+                    <View variant="transparent" style={styles.cell}>
+                        <Text variant="caption" color="secondary">Items: {totalItems}</Text>
+                    </View>
+                    <View variant="transparent" style={styles.cell} />
+                </View>
+            </View>
+        );
+    }
+
+    // ============================================
+    // SCHEDULED
+    // ============================================
+    if (lifecycleState === 'scheduled') {
+        return (
+            <View variant="transparent" style={[styles.container, { borderColor: theme.colors.border.subtle }]}>
+                
+                <View variant="transparent" style={styles.cells}>
+                    <View variant="transparent" style={styles.cell}>
+                        <Ionicons name="calendar-outline" size={14} color="#3B82F6" />
+                        <Text variant="caption" bold style={{ color: '#3B82F6', marginLeft: 4 }}>
+                            {timeLeft ? `Starts ${timeLeft}` : 'Scheduled'}
+                        </Text>
+                    </View>
+                    <TouchableOpacity style={styles.cell} onPress={onEscrowTap} activeOpacity={0.7}>
+                        <Ionicons name="wallet-outline" size={14} color={theme.colors.text.secondary} />
+                        <Text variant="caption" bold style={{ marginLeft: 4 }}>
+                            {formatCurrency(escrowBalance, market_type)}
+                        </Text>
+                    </TouchableOpacity>
+                    <View variant="transparent" style={styles.cell}>
+                        <Ionicons name="people-outline" size={14} color={theme.colors.text.secondary} />
+                        <Text variant="caption" bold style={{ marginLeft: 4 }}>
+                            {items.length > 0 ? `${totalItems} items` : '0'}
+                        </Text>
+                    </View>
+                </View>
+            </View>
+        );
+    }
+
+    // ============================================
+    // AUCTIONING — big KPI-style bar
+    // ============================================
+    if (lifecycleState === 'auctioning') {
+        const activeBids = my_bids.filter(b => b.bid_status === 'active').length;
+        const timerColor = auctionExpired ? '#F59E0B' : getTimerColor(msLeft);
+
+        // Safe auction metrics (no bid amount leaks)
+        const totalBidsPlaced = items.reduce((s, i) => s + (i.bid_count ?? 0), 0);
+        const itemsWithBids = items.filter(i => (i.bid_count ?? 0) > 0).length;
+        const minPot = competition.min_bid * totalItems;
+        const myTotalBid = my_bids
+            .filter(b => b.bid_status === 'active')
+            .reduce((s, b) => s + Number(b.bid_amount), 0);
+
+        return (
+            <View variant="transparent" style={[styles.auctionContainer, { borderColor: theme.colors.border.subtle }]}>
+
+                {/* Timer row */}
+                <View variant="transparent" style={styles.timerRow}>
+                    <Ionicons name={auctionExpired ? 'hourglass-outline' : 'timer-outline'} size={18} color={timerColor} />
+                    <Text variant="h3" bold style={{ color: timerColor, marginLeft: 6 }}>
+                        {auctionExpired ? 'Closing...' : timeLeft}
+                    </Text>
+                </View>
+
+                {/* Auction Activity (safe metrics only) */}
+                <View variant="transparent" style={[styles.potTracker, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                    <View variant="transparent" style={styles.potHeader}>
+                        <Ionicons name="pulse-outline" size={16} color={theme.colors.primary.default} />
+                        <Text variant="caption" bold style={{ color: theme.colors.primary.default, marginLeft: 6 }}>Auction Activity</Text>
+                    </View>
+                    <View variant="transparent" style={styles.potRow}>
+                        <View variant="transparent" style={styles.potItem}>
+                            <Text variant="h3" bold>{itemsWithBids}<Text variant="caption" color="tertiary">/{totalItems}</Text></Text>
+                            <Text variant="caption" color="tertiary">Items Bid</Text>
+                        </View>
+                        <View variant="transparent" style={[styles.potDivider, { backgroundColor: theme.colors.border.subtle }]} />
+                        <View variant="transparent" style={styles.potItem}>
+                            <Text variant="h3" bold>{totalBidsPlaced}</Text>
+                            <Text variant="caption" color="tertiary">Total Bids</Text>
+                        </View>
+                        <View variant="transparent" style={[styles.potDivider, { backgroundColor: theme.colors.border.subtle }]} />
+                        <View variant="transparent" style={styles.potItem}>
+                            <Text variant="h3" bold>{formatCurrency(minPot, market_type)}</Text>
+                            <Text variant="caption" color="tertiary">Min Pot</Text>
+                        </View>
+                    </View>
+                </View>
+
+                {/* My Escrow KPIs — only for participants */}
+                {isParticipant && (
+                    <View variant="transparent" style={styles.kpiRow}>
+                        <TouchableOpacity
+                            style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}
+                            onPress={onEscrowTap}
+                            activeOpacity={0.7}
+                        >
+                            <Ionicons name="wallet-outline" size={16} color={theme.colors.primary.default} />
+                            <Text variant="caption" color="tertiary" style={{ marginTop: 2 }}>Available</Text>
+                            <Text variant="body" bold>{formatCurrency(escrowBalance, market_type)}</Text>
+                        </TouchableOpacity>
+
+                        <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                            <Ionicons name="pricetag-outline" size={16} color={theme.colors.text.secondary} />
+                            <Text variant="caption" color="tertiary" style={{ marginTop: 2 }}>My Bids</Text>
+                            <Text variant="body" bold>{formatCurrency(myTotalBid, market_type)}</Text>
+                        </View>
+
+                        <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                            <Ionicons name="pricetag-outline" size={16} color={theme.colors.text.secondary} />
+                            <Text variant="caption" color="tertiary" style={{ marginTop: 2 }}>My Items</Text>
+                            <Text variant="body" bold>{activeBids}<Text variant="caption" color="tertiary">/{totalItems}</Text></Text>
+                        </View>
+                    </View>
+                )}
+
+                {/* Transfer actions — only for participants */}
+                {isParticipant && <View variant="transparent" style={styles.transferRow}>
+                    <TouchableOpacity
+                        style={[styles.transferBtn, { backgroundColor: theme.colors.primary.default }]}
+                        onPress={onEscrowTap}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="arrow-down-outline" size={16} color="#FFFFFF" />
+                        <Text variant="caption" bold style={{ color: '#FFFFFF', marginLeft: 4 }}>
+                            Transfer In
+                        </Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        style={[styles.transferBtn, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle, borderWidth: 1 }]}
+                        onPress={onEscrowTap}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="arrow-up-outline" size={16} color={theme.colors.text.secondary} />
+                        <Text variant="caption" bold style={{ color: theme.colors.text.secondary, marginLeft: 4 }}>
+                            Transfer Out
+                        </Text>
+                    </TouchableOpacity>
+                </View>}
+
+                {/* Leave button — only when: not expired, no active bids, no escrow balance */}
+                {onLeave && !auctionExpired && activeBids === 0 && escrowBalance === 0 && committed === 0 && (
+                    <TouchableOpacity
+                        style={styles.leaveBtn}
+                        onPress={onLeave}
+                        disabled={leaving}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="exit-outline" size={16} color="#EF4444" />
+                        <Text variant="caption" bold style={{ color: '#EF4444', marginLeft: 6 }}>
+                            {leaving ? 'Leaving...' : 'Leave Auction'}
+                        </Text>
+                    </TouchableOpacity>
+                )}
+            </View>
+        );
+    }
+
+    // ============================================
+    // TOURNAMENT
+    // ============================================
+    if (lifecycleState === 'tournament') {
+        const totalPurchased = myPurchasedItems.reduce((s, i) => s + Number(i.winning_bid), 0);
+        const stillAlive = myPurchasedItems.filter(i => i.status !== 'eliminated').length;
+
+        return (
+            <View variant="transparent" style={[styles.auctionContainer, { borderColor: theme.colors.border.subtle }]}>
+
+                <View variant="transparent" style={styles.kpiRow}>
+                    <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                        <Ionicons name="ellipse" size={8} color="#10B981" />
+                        <Text variant="caption" color="tertiary" style={{ marginTop: 2 }}>Status</Text>
+                        <Text variant="body" bold style={{ color: '#8B5CF6' }}>In Progress</Text>
+                    </View>
+
+                    <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                        <Ionicons name="cart-outline" size={16} color={theme.colors.primary.default} />
+                        <Text variant="caption" color="tertiary" style={{ marginTop: 2 }}>Purchased</Text>
+                        <Text variant="body" bold>{myPurchasedItems.length} <Text variant="caption" color="tertiary">({stillAlive} alive)</Text></Text>
+                    </View>
+
+                    <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                        <Ionicons name="cash-outline" size={16} color={theme.colors.text.secondary} />
+                        <Text variant="caption" color="tertiary" style={{ marginTop: 2 }}>Spent</Text>
+                        <Text variant="body" bold>{formatCurrency(totalPurchased, market_type)}</Text>
+                    </View>
+                </View>
+            </View>
+        );
+    }
+
+    // ============================================
+    // COMPLETED
+    // ============================================
+    const totalPurchased = myPurchasedItems.reduce((s, i) => s + Number(i.winning_bid), 0);
+    return (
+        <View variant="transparent" style={[styles.auctionContainer, { borderColor: theme.colors.border.subtle }]}>
+
+            <View variant="transparent" style={styles.kpiRow}>
+                <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                    <Ionicons name="checkmark-circle" size={16} color={theme.colors.status.success} />
+                    <Text variant="caption" color="tertiary" style={{ marginTop: 2 }}>Status</Text>
+                    <Text variant="body" bold style={{ color: theme.colors.status.success }}>Completed</Text>
+                </View>
+
+                <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                    <Ionicons name="cart-outline" size={16} color={theme.colors.primary.default} />
+                    <Text variant="caption" color="tertiary" style={{ marginTop: 2 }}>Purchased</Text>
+                    <Text variant="body" bold>{myPurchasedItems.length}</Text>
+                </View>
+
+                <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                    <Ionicons name="cash-outline" size={16} color={theme.colors.text.secondary} />
+                    <Text variant="caption" color="tertiary" style={{ marginTop: 2 }}>Spent</Text>
+                    <Text variant="body" bold>{formatCurrency(totalPurchased, market_type)}</Text>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    // Compact container for pending/scheduled
+    container: {
+        borderBottomWidth: 1,
+        paddingTop: 8,
+        paddingHorizontal: 12,
+        paddingBottom: 6,
+    },
+    cells: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    cell: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    // Full KPI container for auctioning/tournament/completed
+    auctionContainer: {
+        borderBottomWidth: 1,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+    },
+    timerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 10,
+    },
+    potTracker: {
+        borderRadius: 12,
+        borderWidth: 1,
+        padding: 12,
+        marginBottom: 10,
+    },
+    potHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    potRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    potItem: {
+        flex: 1,
+        alignItems: 'center',
+    },
+    potDivider: {
+        width: 1,
+        height: 32,
+    },
+    kpiRow: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    kpiCard: {
+        flex: 1,
+        borderRadius: 10,
+        borderWidth: 1,
+        paddingVertical: 10,
+        paddingHorizontal: 8,
+        alignItems: 'center',
+    },
+    transferRow: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 10,
+    },
+    transferBtn: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 36,
+        borderRadius: 8,
+    },
+    leaveBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 10,
+        paddingVertical: 8,
+    },
+});