@bettoredge/calcutta 0.2.0

package/src/components/CalcuttaAuctionItem.tsx

@@ -0,0 +1,292 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { StyleSheet, TouchableOpacity, Image } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaAuctionItemProps, CalcuttaBidProps } from '@bettoredge/types';
+import { formatCurrency, getStatusLabel, getItemStatusColor, getBidStatusColor } from '../helpers/formatting';
+import { CalcuttaBidInput } from './CalcuttaBidInput';
+
+export interface CalcuttaAuctionItemComponentProps {
+    item: CalcuttaAuctionItemProps;
+    my_bid?: CalcuttaBidProps;
+    auction_type: 'sealed_bid' | 'live';
+    min_bid: number;
+    bid_increment: number;
+    escrow_balance: number;
+    onPlaceBid: (amount: number) => void;
+    is_active_item?: boolean;
+    is_paused?: boolean;
+    itemImage?: { url: string };
+}
+
+const getTimerColor = (secondsLeft: number, theme: any) => {
+    if (secondsLeft > 30) return theme.colors.status.success;
+    if (secondsLeft > 10) return '#F59E0B'; // amber/yellow
+    return theme.colors.status.error;
+};
+
+export const CalcuttaAuctionItem: React.FC<CalcuttaAuctionItemComponentProps> = ({
+    item,
+    my_bid,
+    auction_type,
+    min_bid,
+    bid_increment,
+    escrow_balance,
+    onPlaceBid,
+    is_active_item,
+    is_paused,
+    itemImage,
+}) => {
+    const { theme } = useTheme();
+    const [expanded, setExpanded] = useState(false);
+
+    // Per-item countdown for live auction
+    const [secondsLeft, setSecondsLeft] = useState<number | null>(null);
+    const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+    useEffect(() => {
+        if (countdownRef.current) clearInterval(countdownRef.current);
+        setSecondsLeft(null);
+
+        if (!item.item_deadline || item.status !== 'active' || is_paused) return;
+
+        const updateTimer = () => {
+            const deadline = new Date(item.item_deadline).getTime();
+            const diff = Math.max(0, (deadline - Date.now()) / 1000);
+            setSecondsLeft(diff);
+            if (diff <= 0 && countdownRef.current) {
+                clearInterval(countdownRef.current);
+            }
+        };
+
+        updateTimer();
+        countdownRef.current = setInterval(updateTimer, 100);
+        return () => {
+            if (countdownRef.current) clearInterval(countdownRef.current);
+        };
+    }, [item.item_deadline, item.status, is_paused]);
+
+    const canBid = (item.status === 'active' || item.status === 'pending') && !is_paused;
+    const statusColor = getItemStatusColor(item.status);
+    const isSold = item.status === 'sold';
+    const isUpcoming = auction_type === 'live' && item.status === 'pending';
+    const itemOpacity = (isSold || item.status === 'unsold') ? 0.5 : isUpcoming ? 0.7 : 1;
+
+    // Format seconds to display
+    const formatCountdown = (s: number) => {
+        if (s >= 60) {
+            const min = Math.floor(s / 60);
+            const sec = Math.floor(s % 60);
+            return `${min}:${sec.toString().padStart(2, '0')}`;
+        }
+        return s.toFixed(1);
+    };
+
+    return (
+        <View
+            variant="transparent"
+            style={[
+                styles.container,
+                { borderColor: theme.colors.border.subtle, opacity: itemOpacity },
+                is_active_item && { borderLeftWidth: 3, borderLeftColor: theme.colors.primary.default },
+            ]}
+        >
+            <TouchableOpacity
+                style={styles.row}
+                activeOpacity={0.7}
+                onPress={() => canBid && setExpanded(!expanded)}
+                disabled={!canBid}
+            >
+                {/* Item image / fallback */}
+                {(itemImage?.url || item.item_image?.url) ? (
+                    <Image
+                        source={{ uri: itemImage?.url || item.item_image?.url }}
+                        style={[styles.imageContainer, { backgroundColor: theme.colors.surface.base }]}
+                        resizeMode="contain"
+                    />
+                ) : (
+                    <View variant="transparent" style={[styles.imageContainer, { backgroundColor: theme.colors.surface.base }]}>
+                        <Ionicons
+                            name={item.item_type === 'team' ? 'people-outline' : 'person-outline'}
+                            size={16}
+                            color={theme.colors.text.tertiary}
+                        />
+                    </View>
+                )}
+
+                <View variant="transparent" style={styles.info}>
+                    <View variant="transparent" style={styles.nameRow}>
+                        <Text variant="body" bold numberOfLines={1} style={styles.name}>
+                            {item.item_name}
+                        </Text>
+                        {item.seed != null && (
+                            <Text variant="caption" color="tertiary" style={styles.seed}>
+                                #{item.seed}
+                            </Text>
+                        )}
+                    </View>
+                    <View variant="transparent" style={styles.statusRow}>
+                        <View variant="transparent" style={[styles.statusBadge, { backgroundColor: statusColor + '20' }]}>
+                            <Text variant="caption" style={{ color: statusColor, fontSize: 10 }}>
+                                {getStatusLabel(item.status)}
+                            </Text>
+                        </View>
+                        {my_bid && (
+                            <View variant="transparent" style={styles.bidStatus}>
+                                <Ionicons
+                                    name={my_bid.bid_status === 'won' ? 'checkmark-circle' : 'ellipse'}
+                                    size={10}
+                                    color={getBidStatusColor(my_bid.bid_status)}
+                                />
+                                <Text variant="caption" style={{ color: getBidStatusColor(my_bid.bid_status), marginLeft: 4, fontSize: 10 }}>
+                                    {getStatusLabel(my_bid.bid_status)}
+                                </Text>
+                            </View>
+                        )}
+                        {/* Winner info for sold items */}
+                        {isSold && item.winning_bid > 0 && (
+                            <Text variant="caption" color="tertiary" style={{ marginLeft: 8, fontSize: 10 }}>
+                                Sold: {formatCurrency(item.winning_bid)}
+                            </Text>
+                        )}
+                    </View>
+                </View>
+
+                {/* Per-item countdown timer badge (live active item) */}
+                {is_active_item && secondsLeft != null && secondsLeft > 0 && !is_paused && (
+                    <View
+                        variant="transparent"
+                        style={[
+                            styles.timerBadge,
+                            { backgroundColor: getTimerColor(secondsLeft, theme) + '20' },
+                            secondsLeft < 5 && { opacity: Math.abs(Math.sin(Date.now() / 300)) * 0.5 + 0.5 },
+                        ]}
+                    >
+                        <Ionicons name="timer-outline" size={12} color={getTimerColor(secondsLeft, theme)} />
+                        <Text
+                            variant="caption"
+                            bold
+                            style={{ color: getTimerColor(secondsLeft, theme), marginLeft: 3, fontSize: 11 }}
+                        >
+                            {formatCountdown(secondsLeft)}
+                        </Text>
+                    </View>
+                )}
+
+                {/* Going once indicator */}
+                {is_active_item && secondsLeft != null && secondsLeft <= 10 && secondsLeft > 0 && item.current_bid > 0 && !is_paused && (
+                    <Text variant="caption" bold style={{ color: theme.colors.status.error, fontSize: 10, marginLeft: 4 }}>
+                        Going...
+                    </Text>
+                )}
+
+                <View variant="transparent" style={styles.bidInfo}>
+                    <Text variant="caption" color="tertiary">
+                        {auction_type === 'sealed_bid' ? 'Your Bid' : 'Current Bid'}
+                    </Text>
+                    <Text variant="body" bold>
+                        {auction_type === 'sealed_bid'
+                            ? my_bid
+                                ? formatCurrency(my_bid.bid_amount)
+                                : '-'
+                            : item.current_bid > 0
+                                ? formatCurrency(item.current_bid)
+                                : '-'}
+                    </Text>
+                </View>
+
+                {canBid && (
+                    <Ionicons
+                        name={expanded ? 'chevron-up' : 'chevron-down'}
+                        size={16}
+                        color={theme.colors.text.tertiary}
+                        style={styles.chevron}
+                    />
+                )}
+            </TouchableOpacity>
+
+            {expanded && canBid && (
+                <View variant="transparent" style={[styles.bidInputContainer, { borderColor: theme.colors.border.subtle }]}>
+                    <CalcuttaBidInput
+                        current_bid={item.current_bid}
+                        min_bid={min_bid}
+                        bid_increment={bid_increment}
+                        auction_type={auction_type}
+                        escrow_balance={escrow_balance}
+                        existing_bid_amount={my_bid?.bid_amount}
+                        onSubmit={onPlaceBid}
+                        loading={false}
+                        disabled={is_paused}
+                    />
+                </View>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        borderBottomWidth: 1,
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+    },
+    imageContainer: {
+        height: 32,
+        width: 32,
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    info: {
+        flex: 1,
+        marginLeft: 10,
+    },
+    nameRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    name: {
+        flex: 1,
+    },
+    seed: {
+        marginLeft: 6,
+    },
+    statusRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 4,
+    },
+    statusBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    bidStatus: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginLeft: 8,
+    },
+    timerBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 6,
+        marginLeft: 6,
+    },
+    bidInfo: {
+        alignItems: 'flex-end',
+        marginLeft: 10,
+    },
+    chevron: {
+        marginLeft: 8,
+    },
+    bidInputContainer: {
+        paddingHorizontal: 12,
+        paddingBottom: 12,
+        borderTopWidth: 1,
+    },
+});

package/src/components/CalcuttaBidInput.tsx

@@ -0,0 +1,214 @@
+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 { formatCurrency } from '../helpers/formatting';
+
+export interface CalcuttaBidInputProps {
+    current_bid: number;
+    min_bid: number;
+    bid_increment: number;
+    auction_type: 'sealed_bid' | 'live';
+    escrow_balance: number;
+    existing_bid_amount?: number;
+    onSubmit: (amount: number) => void;
+    loading: boolean;
+    disabled?: boolean;
+}
+
+export const CalcuttaBidInput: React.FC<CalcuttaBidInputProps> = ({
+    current_bid,
+    min_bid,
+    bid_increment,
+    auction_type,
+    escrow_balance,
+    existing_bid_amount,
+    onSubmit,
+    loading,
+    disabled,
+}) => {
+    const { theme } = useTheme();
+
+    const minimumAllowed = auction_type === 'live'
+        ? Math.max(Number(min_bid), Number(current_bid) + Number(bid_increment))
+        : Number(min_bid);
+
+    const [amount, setAmount] = useState<string>(
+        existing_bid_amount ? existing_bid_amount.toString() : minimumAllowed.toString()
+    );
+    const [error, setError] = useState<string>('');
+
+    useEffect(() => {
+        if (!existing_bid_amount) {
+            setAmount(minimumAllowed.toString());
+        }
+    }, [minimumAllowed, existing_bid_amount]);
+
+    const numericAmount = parseFloat(amount) || 0;
+
+    const validate = (): boolean => {
+        if (isNaN(parseFloat(amount)) || numericAmount <= 0) {
+            setError('Enter a valid bid amount');
+            return false;
+        }
+        if (numericAmount < minimumAllowed) {
+            setError(`Minimum bid is ${formatCurrency(minimumAllowed)}`);
+            return false;
+        }
+        if (auction_type === 'live' && Number(bid_increment) > 0 && (numericAmount - minimumAllowed) % Number(bid_increment) !== 0) {
+            setError(`Bid must be in increments of ${formatCurrency(Number(bid_increment))}`);
+            return false;
+        }
+        const available = escrow_balance + (existing_bid_amount || 0);
+        if (numericAmount > available) {
+            setError(`Insufficient escrow. Available: ${formatCurrency(available)}`);
+            return false;
+        }
+        setError('');
+        return true;
+    };
+
+    const handleSubmit = () => {
+        if (validate()) {
+            onSubmit(numericAmount);
+        }
+    };
+
+    const adjustAmount = (direction: 'up' | 'down') => {
+        const step = Number(bid_increment) > 0 ? Number(bid_increment) : 1;
+        const current = numericAmount;
+        const newAmount = direction === 'up' ? current + step : Math.max(minimumAllowed, current - step);
+        setAmount(newAmount.toString());
+        setError('');
+    };
+
+    return (
+        <View variant="transparent" style={styles.container}>
+            {/* Amount input row */}
+            <View variant="transparent" style={styles.inputRow}>
+                <TouchableOpacity
+                    style={[styles.adjustButton, { backgroundColor: theme.colors.surface.base, borderColor: theme.colors.border.subtle }]}
+                    onPress={() => adjustAmount('down')}
+                    disabled={numericAmount <= minimumAllowed}
+                >
+                    <Ionicons
+                        name="remove"
+                        size={18}
+                        color={numericAmount <= minimumAllowed ? theme.colors.text.tertiary : theme.colors.text.primary}
+                    />
+                </TouchableOpacity>
+
+                <TextInput
+                    style={[
+                        styles.input,
+                        {
+                            color: theme.colors.text.primary,
+                            backgroundColor: theme.colors.surface.input,
+                            borderColor: error ? theme.colors.status.error : theme.colors.border.subtle,
+                        },
+                    ]}
+                    value={amount}
+                    onChangeText={(text) => {
+                        setAmount(text);
+                        setError('');
+                    }}
+                    keyboardType="decimal-pad"
+                    placeholder={formatCurrency(minimumAllowed)}
+                    placeholderTextColor={theme.colors.text.tertiary}
+                />
+
+                <TouchableOpacity
+                    style={[styles.adjustButton, { backgroundColor: theme.colors.surface.base, borderColor: theme.colors.border.subtle }]}
+                    onPress={() => adjustAmount('up')}
+                >
+                    <Ionicons name="add" size={18} color={theme.colors.text.primary} />
+                </TouchableOpacity>
+            </View>
+
+            {/* Error message */}
+            {error !== '' && (
+                <Text variant="caption" style={[styles.errorText, { color: theme.colors.status.error }]}>
+                    {error}
+                </Text>
+            )}
+
+            {/* Min bid info */}
+            <Text variant="caption" color="tertiary" style={styles.minLabel}>
+                Min: {formatCurrency(minimumAllowed)}
+                {Number(bid_increment) > 0 && ` \u00B7 Increment: ${formatCurrency(Number(bid_increment))}`}
+            </Text>
+            <Text variant="caption" color="tertiary" style={styles.minLabel}>
+                Available: {formatCurrency(escrow_balance + (existing_bid_amount || 0))}
+            </Text>
+
+            {/* Submit button */}
+            {disabled ? (
+                <View variant="transparent" style={[styles.submitButton, { backgroundColor: theme.colors.surface.base }]}>
+                    <Text variant="body" bold style={{ color: theme.colors.text.tertiary }}>
+                        Paused
+                    </Text>
+                </View>
+            ) : (
+                <TouchableOpacity
+                    style={[styles.submitButton, { backgroundColor: theme.colors.primary.default }]}
+                    onPress={handleSubmit}
+                    disabled={loading}
+                    activeOpacity={0.7}
+                >
+                    {loading ? (
+                        <ActivityIndicator size="small" color="#FFFFFF" />
+                    ) : (
+                        <Text variant="body" bold style={styles.submitText}>
+                            {existing_bid_amount ? 'Update Bid' : 'Place Bid'}
+                        </Text>
+                    )}
+                </TouchableOpacity>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        paddingTop: 10,
+    },
+    inputRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    adjustButton: {
+        width: 36,
+        height: 36,
+        borderRadius: 8,
+        borderWidth: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    input: {
+        flex: 1,
+        height: 36,
+        borderRadius: 8,
+        borderWidth: 1,
+        marginHorizontal: 8,
+        paddingHorizontal: 12,
+        fontSize: 16,
+        textAlign: 'center',
+    },
+    errorText: {
+        marginTop: 4,
+        fontSize: 11,
+    },
+    minLabel: {
+        marginTop: 4,
+    },
+    submitButton: {
+        marginTop: 10,
+        paddingVertical: 10,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    submitText: {
+        color: '#FFFFFF',
+    },
+});

package/src/components/CalcuttaCard.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, Image } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaCompetitionProps, CalcuttaParticipantProps } from '@bettoredge/types';
+import { formatCurrency, getStatusLabel } from '../helpers/formatting';
+
+export interface CalcuttaCardProps {
+    competition: CalcuttaCompetitionProps;
+    participant?: CalcuttaParticipantProps;
+    onSelect: (competition: CalcuttaCompetitionProps) => void;
+}
+
+export const CalcuttaCard: React.FC<CalcuttaCardProps> = ({
+    competition,
+    participant,
+    onSelect,
+}) => {
+    const { theme } = useTheme();
+
+    const statusLabel = getStatusLabel(competition.status);
+    const auctionLabel = competition.auction_type === 'live' ? 'Live Auction' : 'Sealed Bid';
+    const participantCount = competition.participants?.length ?? 0;
+
+    return (
+        <TouchableOpacity
+            style={[styles.row, { borderColor: theme.colors.border.subtle }]}
+            activeOpacity={0.7}
+            onPress={() => onSelect(competition)}
+        >
+            {competition.image?.url ? (
+                <Image
+                    source={{ uri: competition.image.url }}
+                    style={[styles.image, { backgroundColor: theme.colors.surface.base }]}
+                    resizeMode="cover"
+                />
+            ) : (
+                <View
+                    variant="transparent"
+                    style={[styles.image, styles.imageFallback, { backgroundColor: theme.colors.surface.base }]}
+                >
+                    <Ionicons name="trophy-outline" size={18} color={theme.colors.text.tertiary} />
+                </View>
+            )}
+
+            <View variant="transparent" style={styles.info}>
+                <Text variant="body" bold numberOfLines={1}>
+                    {competition.competition_name}
+                </Text>
+                <View variant="transparent" style={styles.meta}>
+                    <Text variant="caption" color="tertiary">
+                        {statusLabel}
+                    </Text>
+                    <Text variant="caption" color="tertiary"> {'\u00B7'} </Text>
+                    <Text variant="caption" color="tertiary">
+                        {auctionLabel}
+                    </Text>
+                </View>
+                <View variant="transparent" style={styles.meta}>
+                    <Text variant="caption" color="secondary">
+                        Pot: {formatCurrency(competition.total_pot, competition.market_type)}
+                    </Text>
+                    <Text variant="caption" color="tertiary"> {'\u00B7'} </Text>
+                    <Text variant="caption" color="secondary">
+                        {participantCount} participant{participantCount !== 1 ? 's' : ''}
+                    </Text>
+                </View>
+            </View>
+
+            {participant && (
+                <View variant="transparent" style={styles.participantInfo}>
+                    <Text variant="caption" color="secondary">
+                        {participant.items_owned} item{participant.items_owned !== 1 ? 's' : ''}
+                    </Text>
+                    <Text
+                        variant="caption"
+                        style={{
+                            color: participant.total_winnings > 0
+                                ? theme.colors.status.success
+                                : theme.colors.text.secondary,
+                            marginTop: 2,
+                        }}
+                    >
+                        {formatCurrency(participant.total_winnings, competition.market_type)}
+                    </Text>
+                </View>
+            )}
+
+            <Ionicons
+                name="chevron-forward"
+                size={16}
+                color={theme.colors.text.tertiary}
+                style={styles.chevron}
+            />
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderBottomWidth: 1,
+    },
+    image: {
+        height: 36,
+        width: 36,
+        borderRadius: 8,
+    },
+    imageFallback: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    info: {
+        flex: 1,
+        marginLeft: 10,
+    },
+    meta: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 2,
+    },
+    participantInfo: {
+        marginHorizontal: 10,
+        alignItems: 'flex-end',
+    },
+    chevron: {
+        marginLeft: 4,
+    },
+});