Transactions

Manage your income and expenses

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

\n\n {/* Transactions List */}\n {transactions.length === 0 ? (\n

📝

No Transactions Yet

Start by adding your first income or expense transaction.

\n \n

\n ) : (\n

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

\n {/* Transaction Info */}\n

\n {getTypeIcon(transaction.type)}\n

\n \n

{transaction.category}

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

\n \n {transaction.description && (\n

{transaction.description}

\n )}\n \n

{formatDate(transaction.date)}

\n\n {/* Actions */}\n

\n setEditingId(transaction.id)}\n className=\"p-2 text-gray-400 hover:text-blue-600 transition-colors\"\n title=\"Edit\"\n >\n ✏️\n \n setDeleteConfirm(transaction.id)}\n className=\"p-2 text-gray-400 hover:text-red-600 transition-colors\"\n title=\"Delete\"\n >\n 🗑️\n \n

\n\n {/* Delete Confirmation */}\n {deleteConfirm === transaction.id && (\n

Are you sure you want to delete this transaction?

\n handleDelete(transaction.id)}\n className=\"bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors text-sm\"\n >\n Delete\n \n setDeleteConfirm(null)}\n className=\"bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition-colors text-sm\"\n >\n Cancel\n \n

\n )}\n

\n ))}\n

\n )}\n\n {/* Summary */}\n {transactions.length > 0 && (\n

Summary

Total Income

\n {formatCurrency(\n transactions\n .filter(t => t.type === 'income')\n .reduce((sum, t) => sum + t.amount, 0)\n )}\n

Total Expenses

\n {formatCurrency(\n transactions\n .filter(t => t.type === 'expense')\n .reduce((sum, t) => sum + t.amount, 0)\n )}\n

Net Amount

\n sum + (t.type === 'income' ? t.amount : -t.amount), 0\n ) >= 0 ? 'text-green-600' : 'text-red-600'\n }`}>\n {formatCurrency(\n transactions.reduce((sum, t) => \n sum + (t.type === 'income' ? t.amount : -t.amount), 0\n )\n )}\n

\n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/beekay/support_case/code/frontend/components/TransactionList.tsx","extension","actionData","errors"]