mirror of
https://github.com/acedanger/finance.git
synced 2025-12-05 22:50:12 -08:00
78 lines
2.6 KiB
Plaintext
78 lines
2.6 KiB
Plaintext
---
|
|
import type { Transaction } from "@types";
|
|
import { formatDate, formatCurrency } from "@utils";
|
|
|
|
interface Props {
|
|
transactions: Transaction[];
|
|
}
|
|
|
|
const { transactions } = Astro.props;
|
|
|
|
// Sort transactions by date descending for display
|
|
const sortedTransactions = [...transactions].sort(
|
|
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
|
|
);
|
|
|
|
// TODO: UI/UX Improvements
|
|
// - Add sorting functionality for all columns
|
|
// - Implement pagination for large transaction lists
|
|
// - Add transaction filtering capabilities
|
|
// - Implement row hover actions
|
|
// - Add transaction details expansion/collapse
|
|
// - Consider adding bulk actions (delete, categorize)
|
|
---
|
|
|
|
<section class="transaction-list" id="transaction-section">
|
|
<table id="transaction-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Description</th>
|
|
<th class="amount-col">Amount</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="transaction-table-body">
|
|
{
|
|
sortedTransactions.map((txn) => (
|
|
<tr data-txn-id={txn.id}>
|
|
<td>{formatDate(txn.date)}</td>
|
|
<td>{txn.description}</td>
|
|
<td
|
|
class={`amount-col ${Number(txn.amount) >= 0 ? "amount-positive" : "amount-negative"}`}
|
|
>
|
|
{formatCurrency(Number(txn.amount))}
|
|
</td>
|
|
<td>
|
|
<button
|
|
class="action-btn edit-btn"
|
|
title="Edit transaction"
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
class="action-btn delete-btn"
|
|
title="Delete transaction"
|
|
>
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))
|
|
}
|
|
{
|
|
sortedTransactions.length === 0 && (
|
|
<tr>
|
|
<td
|
|
colspan="4"
|
|
style="text-align: center; font-style: italic; color: #777;"
|
|
>
|
|
No transactions found for this account.
|
|
</td>
|
|
</tr>
|
|
)
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</section>
|