📊

No transactions yet

\n Import your bank statement to see transactions\n

\n );\n }\n \n // Group transactions by date\n const groupedTransactions: Record = {};\n \n transactions.forEach(transaction => {\n const date = new Date(transaction.date).toLocaleDateString();\n if (!groupedTransactions[date]) {\n groupedTransactions[date] = [];\n }\n groupedTransactions[date].push(transaction);\n });\n \n // Sort dates in descending order\n const sortedDates = Object.keys(groupedTransactions).sort((a, b) => {\n return new Date(b).getTime() - new Date(a).getTime();\n });\n \n const handleAssign = (transactionId: string, envelopeId: string) => {\n onAssign(transactionId, envelopeId);\n setSelectedTransaction(null);\n };\n \n return (\n

\n {sortedDates.map(date => (\n

{date}

\n {groupedTransactions[date].map(transaction => (\n

{transaction.description}

\n {transaction.processed ? (\n \n Assigned to {envelopes.find(e => e.id === transaction.category)?.name}\n \n ) : (\n Unassigned\n )}\n

= 0 ? 'text-green-600' : 'text-red-600'}`}>\n {transaction.amount >= 0 ? '+' : ''}{transaction.amount.toFixed(2)}\n

\n \n {/* Envelope selection */}\n {selectedTransaction === transaction.id && !transaction.processed && (\n

Assign to envelope:

\n {envelopes.map(envelope => (\n handleAssign(transaction.id, envelope.id)}\n >\n {envelope.icon}\n {envelope.name}\n \n ))}\n

\n )}\n \n {/* Action buttons */}\n {!transaction.processed && (\n

\n setSelectedTransaction(\n selectedTransaction === transaction.id ? null : transaction.id\n )}\n >\n {selectedTransaction === transaction.id ? 'Cancel' : 'Assign to Envelope'}\n \n

\n )}\n

\n ))}\n

\n );\n};\n\nexport default TransactionList;","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/pmaxx/untitled-8939/code/frontend/components/TransactionList.tsx","extension","actionData","errors"]