@bettoredge/calcutta 0.5.2 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettoredge/calcutta",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Calcutta auction competition components for BettorEdge applications",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/CalcuttaDetail.tsx

@@ -126,6 +126,8 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
     const [leaving, setLeaving] = useState(false);
     const [startingComp, setStartingComp] = useState(false);
     const [itemSearch, setItemSearch] = useState('');
+    const [itemsPage, setItemsPage] = useState(1);
+    const ITEMS_PER_PAGE = 10;
     const [mobileListTab, setMobileListTab] = useState<'items' | 'players'>('items');
 
     const handleRefresh = async () => {
@@ -136,10 +138,11 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
     };
 
     const filteredItems = useMemo(() => {
-        if (competition?.auction_type !== 'sweepstakes' || !itemSearch.trim()) return items;
+        if (!itemSearch.trim()) return items;
         const q = itemSearch.toLowerCase().trim();
         return items.filter(item => {
             if (item.item_name.toLowerCase().includes(q)) return true;
+            if (item.seed != null && `#${item.seed}`.includes(q)) return true;
             if (item.winning_player_id) {
                 const owner = enrichedPlayers[item.winning_player_id];
                 const ownerName = (owner?.username || owner?.show_name || '').toLowerCase();
@@ -147,7 +150,16 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
             }
             return false;
         });
-    }, [items, itemSearch, enrichedPlayers, competition?.auction_type]);
+    }, [items, itemSearch, enrichedPlayers]);
+
+    // Reset page when search changes
+    useEffect(() => { setItemsPage(1); }, [itemSearch]);
+
+    const totalItemPages = Math.max(1, Math.ceil(filteredItems.length / ITEMS_PER_PAGE));
+    const paginatedItems = useMemo(() => {
+        const start = (itemsPage - 1) * ITEMS_PER_PAGE;
+        return filteredItems.slice(start, start + ITEMS_PER_PAGE);
+    }, [filteredItems, itemsPage]);
 
     if (loading && !competition) {
         return (
@@ -210,30 +222,32 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
             );
         }
 
-        const displayItems = isSweepstakes ? filteredItems : items;
         return (
             <View variant="transparent" style={{ paddingHorizontal: 16, paddingBottom: 8 }}>
-                {isSweepstakes && (
-                    <TextInput
-                        style={{
-                            height: 36, borderRadius: 8, borderWidth: 1,
-                            borderColor: theme.colors.border.subtle, backgroundColor: theme.colors.surface.input,
-                            color: theme.colors.text.primary, paddingHorizontal: 12, fontSize: 14, lineHeight: 19, marginBottom: 8,
-                        }}
-                        placeholder="Search by team or owner..."
-                        placeholderTextColor={theme.colors.text.tertiary}
-                        value={itemSearch}
-                        onChangeText={setItemSearch}
-                        autoCapitalize="none"
-                        autoCorrect={false}
-                        onFocus={(e: any) => {
-                            if (Platform.OS === 'web' && e?.target?.scrollIntoView) {
-                                setTimeout(() => e.target.scrollIntoView({ behavior: 'smooth', block: 'center' }), 300);
-                            }
-                        }}
-                    />
+                <TextInput
+                    style={{
+                        height: 36, borderRadius: 8, borderWidth: 1,
+                        borderColor: theme.colors.border.subtle, backgroundColor: theme.colors.surface.input,
+                        color: theme.colors.text.primary, paddingHorizontal: 12, fontSize: 14, lineHeight: 19, marginBottom: 8,
+                    }}
+                    placeholder={isSweepstakes ? "Search by team or owner..." : "Search items..."}
+                    placeholderTextColor={theme.colors.text.tertiary}
+                    value={itemSearch}
+                    onChangeText={setItemSearch}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    onFocus={(e: any) => {
+                        if (Platform.OS === 'web' && e?.target?.scrollIntoView) {
+                            setTimeout(() => e.target.scrollIntoView({ behavior: 'smooth', block: 'center' }), 300);
+                        }
+                    }}
+                />
+                {itemSearch.trim() !== '' && (
+                    <Text variant="caption" color="tertiary" style={{ marginBottom: 6 }}>
+                        {filteredItems.length} of {items.length} items
+                    </Text>
                 )}
-                {displayItems.map(item => {
+                {paginatedItems.map(item => {
                     const imgUrl = resolveItemImageUrl(item.item_image) || itemImages[item.item_id]?.url;
                     const owner = item.winning_player_id ? enrichedPlayers[item.winning_player_id] : undefined;
                     const ownerName = owner?.username || owner?.show_name;
@@ -260,6 +274,27 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                         </View>
                     );
                 })}
+                {totalItemPages > 1 && (
+                    <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 10, gap: 16 }}>
+                        <TouchableOpacity
+                            onPress={() => setItemsPage(p => p - 1)}
+                            disabled={itemsPage <= 1}
+                            style={{ opacity: itemsPage <= 1 ? 0.3 : 1, padding: 4 }}
+                        >
+                            <Ionicons name="chevron-back" size={20} color={theme.colors.primary.default} />
+                        </TouchableOpacity>
+                        <Text variant="caption" color="secondary">
+                            {itemsPage} of {totalItemPages}
+                        </Text>
+                        <TouchableOpacity
+                            onPress={() => setItemsPage(p => p + 1)}
+                            disabled={itemsPage >= totalItemPages}
+                            style={{ opacity: itemsPage >= totalItemPages ? 0.3 : 1, padding: 4 }}
+                        >
+                            <Ionicons name="chevron-forward" size={20} color={theme.colors.primary.default} />
+                        </TouchableOpacity>
+                    </View>
+                )}
             </View>
         );
     };