\n {getTransactionIcon(transaction)}\n

\n {getTransactionTitle(transaction)}\n

\n {getTransactionSubtitle(transaction)}\n

\n {transaction.recipientBank && (\n

\n {formatDate(transaction.createdAt)}\n

\n )}\n

\n {transaction.type === 'credit' ? '+' : '-'}\n {formatCurrency(transaction.amount, transaction.currency)}\n

\n {transaction.status.toUpperCase()}\n

\n );\n\n const renderEmptyState = () => (\n

📝

No Transactions Found

\n {filter === 'all' \n ? \"You haven't made any transactions yet.\"\n : `No ${filter} transactions found.`\n }\n

\n );\n\n const renderLoadingSkeleton = () => (\n

\n {[1, 2, 3, 4, 5].map(i => (\n

\n ))}\n

\n );\n\n const filteredTransactions = getFilteredTransactions();\n\n return (\n

\n {/* Header */}\n

\n \n ←\n Back\n \n

Transaction History

\n\n {/* Filters */}\n

\n {/* Account Filter */}\n

\n \n Account\n \n setSelectedAccount(e.target.value)}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n {accounts.map(account => (\n \n ))}\n \n

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

\n \n Transaction Type\n \n

\n setFilter('all')}\n className={`px-3 py-1 rounded-full text-sm font-medium ${\n filter === 'all' \n ? 'bg-blue-600 text-white' \n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n All\n \n setFilter('credit')}\n className={`px-3 py-1 rounded-full text-sm font-medium ${\n filter === 'credit' \n ? 'bg-green-600 text-white' \n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n Credit\n \n setFilter('debit')}\n className={`px-3 py-1 rounded-full text-sm font-medium ${\n filter === 'debit' \n ? 'bg-red-600 text-white' \n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n Debit\n \n setFilter('external')}\n className={`px-3 py-1 rounded-full text-sm font-medium ${\n filter === 'external' \n ? 'bg-purple-600 text-white' \n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n External\n \n

\n\n {/* Transaction Count */}\n {!loading && (\n

\n {filteredTransactions.length} transaction{filteredTransactions.length !== 1 ? 's' : ''} found\n

\n )}\n\n {/* Transactions List */}\n

\n {loading ? (\n renderLoadingSkeleton()\n ) : filteredTransactions.length > 0 ? (\n filteredTransactions.map(renderTransactionItem)\n ) : (\n renderEmptyState()\n )}\n

\n\n {/* Load More Button (if needed) */}\n {!loading && filteredTransactions.length >= 15 && (\n

\n \n Load More\n \n

\n )}\n

\n );\n};\n\nexport default History;","deleted","label",[167,168,150],"frontend","components","permalink","https://www.val.town/x/cgshaq/AccessBankMobile/code/frontend/components/History.tsx","extension","actionData","errors"]