\n {/* Header */}\n

\n BIN Extrap Collection\n

\n Store and manage your Bank Identification Numbers collection\n

\n \n \n {filteredAndSortedBins.length} BINs in collection\n \n

\n\n {/* Controls */}\n

\n {/* Search */}\n

\n \n setSearchTerm(e.target.value)}\n className=\"w-full pl-10 pr-4 py-3 input-icy rounded-lg text-white placeholder-green-300\"\n />\n

\n\n {/* Card Type Filter */}\n

\n setSelectedCardType(e.target.value)}\n className=\"w-full py-3 px-4 input-icy rounded-lg text-white capitalize\"\n >\n {cardTypes.map(type => (\n \n ))}\n \n

\n\n {/* Country Filter */}\n

\n setSelectedCountry(e.target.value)}\n className=\"w-full py-3 px-4 input-icy rounded-lg text-white\"\n >\n {countries.map(country => (\n \n ))}\n \n

\n\n {/* Advanced Controls */}\n

\n {/* Sort Controls */}\n

\n setSortBy(e.target.value as any)}\n className=\"py-2 px-3 input-icy rounded-lg text-white text-sm\"\n >\n \n \n \n \n \n \n setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}\n className=\"p-2 glass rounded-lg hover:bg-green-500/20 transition-colors\"\n title={`Sort ${sortOrder === 'asc' ? 'Descending' : 'Ascending'}`}\n >\n \n \n

\n\n {/* View Mode Toggle */}\n

\n setViewMode('grid')}\n className={`p-2 rounded transition-colors ${viewMode === 'grid' ? 'bg-green-500/30 text-green-200' : 'text-green-300 hover:text-green-200'}`}\n title=\"Grid View\"\n >\n \n \n setViewMode('list')}\n className={`p-2 rounded transition-colors ${viewMode === 'list' ? 'bg-green-500/30 text-green-200' : 'text-green-300 hover:text-green-200'}`}\n title=\"List View\"\n >\n \n \n

\n\n {/* Action Buttons */}\n

\n setIsAdding(!isAdding)}\n className=\"btn-icy rounded-lg py-2 px-4 font-medium transition-all duration-300 hover:scale-105 flex items-center\"\n >\n \n Add BIN\n \n \n \n \n Export\n \n \n \n \n Import\n \n \n\n \n \n Reset\n \n

\n\n {/* Add BIN Form */}\n {isAdding && (\n

\n \n Add New BIN\n

\n \n

\n BIN Number *\n setNewBin(e.target.value.replace(/\\D/g, '').slice(0, 15))}\n className=\"w-full py-3 px-4 input-icy rounded-lg text-white placeholder-green-300\"\n />\n

\n \n

\n Bank Name\n setNewBank(e.target.value)}\n className=\"w-full py-3 px-4 input-icy rounded-lg text-white placeholder-green-300\"\n />\n

\n \n

\n Country\n setNewCountry(e.target.value)}\n className=\"w-full py-3 px-4 input-icy rounded-lg text-white placeholder-green-300\"\n />\n

\n \n

\n Expiry Month\n setNewExpiryMonth(e.target.value.replace(/\\D/g, '').slice(0, 2))}\n className=\"w-full py-3 px-4 input-icy rounded-lg text-white placeholder-green-300\"\n />\n

\n \n

\n Expiry Year\n setNewExpiryYear(e.target.value.replace(/\\D/g, '').slice(0, 4))}\n className=\"w-full py-3 px-4 input-icy rounded-lg text-white placeholder-green-300\"\n />\n

\n \n

\n CVV\n setNewCvv(e.target.value.replace(/\\D/g, '').slice(0, 4))}\n className=\"w-full py-3 px-4 input-icy rounded-lg text-white placeholder-green-300\"\n />\n

\n \n

\n Notes\n setNewNotes(e.target.value)}\n className=\"w-full py-3 px-4 input-icy rounded-lg text-white placeholder-green-300\"\n />\n

\n \n

\n \n \n Add BIN\n \n \n setIsAdding(false)}\n className=\"glass rounded-lg py-3 px-6 font-medium transition-all duration-300 hover:scale-105 text-gray-300\"\n >\n Cancel\n \n

\n )}\n\n {/* BIN Collection */}\n {filteredAndSortedBins.length > 0 ? (\n viewMode === 'grid' ? (\n

\n {filteredAndSortedBins.map((entry) => (\n \n

\n {entry.bin}\n

\n {entry.isPreloaded && (\n \n Featured\n \n )}\n

\n \n {entry.cardType}\n \n

\n \n

\n copyBIN(entry.bin)}\n className=\"p-2 glass rounded-lg hover:bg-green-500/20 transition-colors\"\n title=\"Copy BIN\"\n >\n \n \n \n copyFullCard(entry)}\n className=\"p-2 glass rounded-lg hover:bg-blue-500/20 transition-colors\"\n title=\"Copy Full Card Data\"\n >\n \n \n \n generateFromBIN(entry.bin)}\n className=\"p-2 glass rounded-lg hover:bg-purple-500/20 transition-colors\"\n title=\"Generate Card\"\n >\n \n \n \n {!entry.isPreloaded && (\n deleteBIN(entry.id)}\n className=\"p-2 glass rounded-lg hover:bg-red-500/20 transition-colors\"\n title=\"Delete BIN\"\n >\n \n \n )}\n

\n \n

\n {(entry.expiryMonth && entry.expiryYear) && (\n

\n \n Expires: {entry.expiryMonth}/{entry.expiryYear}\n

\n )}\n \n {entry.cvv && (\n

\n \n CVV: {entry.cvv}\n

\n )}\n \n {entry.bank && (\n

\n \n {entry.bank}\n

\n )}\n \n {entry.country && (\n

\n \n {entry.country}\n

\n )}\n \n {entry.notes && (\n

\n \n {entry.notes}\n

\n )}\n \n

\n \n Added {entry.dateAdded}\n

\n ))}\n

\n ) : (\n // List View\n

\n {filteredAndSortedBins.map((entry) => (\n \n

\n \n {entry.bin}\n \n {entry.isPreloaded && (\n \n Featured\n \n )}\n

\n \n \n {entry.cardType}\n \n \n {entry.bank && (\n \n {entry.bank}\n \n )}\n \n {entry.country && (\n \n {entry.country}\n \n )}\n \n {(entry.expiryMonth && entry.expiryYear) && (\n \n {entry.expiryMonth}/{entry.expiryYear}\n \n )}\n

\n \n

\n ))}\n \n )\n ) : (\n

\n \n

\n {searchTerm || selectedCardType !== \"All\" || selectedCountry !== \"All\" ? \"No BINs found\" : \"No BINs in collection\"}\n

\n {searchTerm || selectedCardType !== \"All\" || selectedCountry !== \"All\"\n ? \"Try adjusting your search or filter criteria\" \n : \"Start building your BIN collection by adding your first BIN\"\n }\n

\n )}\n\n {/* Statistics */}\n

{binEntries.length}

Total BINs

\n {new Set(binEntries.map(b => b.cardType)).size}\n

Card Types

\n {new Set(binEntries.filter(b => b.country).map(b => b.country)).size}\n

Countries

{filteredAndSortedBins.length}

Filtered Results

\n \n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/hmv0011/SON-GOKU/code/frontend/components/BINExtrap.tsx","extension","actionData","errors"]

\n BIN Extrap Collection\n

\n \n \n \n Add New BIN\n

\n {entry.bin}\n

\n {searchTerm || selectedCardType !== \"All\" || selectedCountry !== \"All\" ? \"No BINs found\" : \"No BINs in collection\"}\n

\n \n Add New BIN\n