\n {/* Header */}\n

Transactions

\n {filteredTransactions.length} of {transactions.length} transactions\n

\n\n {/* Summary Cards */}\n

\n 💰\n

Total Income

{formatCurrency(totalIncome)}

\n \n

\n 💸\n

Total Expenses

{formatCurrency(totalExpenses)}

\n \n

= 0 \n ? 'bg-blue-50 border-blue-200' \n : 'bg-orange-50 border-orange-200'\n }`}>\n

\n \n {totalIncome - totalExpenses >= 0 ? '📈' : '📉'}\n \n

= 0 ? 'text-blue-800' : 'text-orange-800'\n }`}>\n Net Amount\n

= 0 ? 'text-blue-900' : 'text-orange-900'\n }`}>\n {formatCurrency(totalIncome - totalExpenses)}\n

\n\n {/* Filters and Search */}\n

\n {/* Search */}\n

\n \n Search\n \n setFilters(prev => ({ ...prev, search: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n {/* Category Filter */}\n

\n \n Category\n \n setFilters(prev => ({ ...prev, category: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n >\n \n {TRANSACTION_CATEGORIES.map((category) => (\n \n ))}\n \n

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

\n \n Type\n \n setFilters(prev => ({ ...prev, type: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n

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

\n \n Sort By\n \n

\n setSortBy(e.target.value as 'date' | 'amount' | 'category')}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc')}\n className=\"px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50\"\n title={`Sort ${sortOrder === 'asc' ? 'Descending' : 'Ascending'}`}\n >\n {sortOrder === 'asc' ? '↑' : '↓'}\n \n

\n\n {/* Transaction List */}\n

\n {filteredTransactions.length === 0 ? (\n

\n 📝\n

No transactions found

\n {transactions.length === 0 \n ? \"Start by adding your first transaction!\"\n : \"Try adjusting your filters to see more transactions.\"\n }\n

\n ) : (\n

\n {filteredTransactions.map((transaction) => (\n \n

\n \n {transaction.category}\n \n \n {formatDate(transaction.date)}\n \n

\n {transaction.description}\n

\n \n

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

\n \n

\n handleEdit(transaction)}\n className=\"p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg\"\n title=\"Edit transaction\"\n >\n ✏️\n \n handleDelete(transaction.id!)}\n className=\"p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg\"\n title=\"Delete transaction\"\n >\n 🗑️\n \n

\n ))}\n

\n )}\n

\n \n );\n}","deleted","label",[171,172,154],"frontend","components","permalink","https://www.val.town/x/Dev_J/F_manager/code/frontend/components/TransactionList.tsx","extension","actionData","errors"]