90 lines
3.6 KiB
HTML
90 lines
3.6 KiB
HTML
|
|
|
|
<!-- templates/transactions.html -->
|
|
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="row mb-4">
|
|
<div class="col-12 d-flex justify-content-between align-items-center">
|
|
<h2>All Transactions</h2>
|
|
<a href="/" class="btn btn-outline-primary">Back to Dashboard</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
Transaction History
|
|
</div>
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Search transactions...">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped" id="transactionsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Description</th>
|
|
<th>Amount</th>
|
|
<th>Currency</th>
|
|
<th>Fee</th>
|
|
<th>Net Amount</th>
|
|
<th>Type</th>
|
|
<th>Account</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for transaction in transactions %}
|
|
<tr>
|
|
<td>
|
|
{% if transaction['Date'] is string %}
|
|
{{ transaction['Date'] }}
|
|
{% else %}
|
|
{{ transaction['Date'].strftime('%Y-%m-%d') }}
|
|
{% endif %}
|
|
</td>
|
|
|
|
<td>{{ transaction['Name of sender/receiver'] }}</td>
|
|
<td class="{% if transaction['Amount'] >= 0 %}positive{% else %}negative{% endif %}">
|
|
{{ "%0.2f"|format(transaction['Amount']) }}
|
|
</td>
|
|
<td>{{ transaction['Currency'] }}</td>
|
|
<td>{{ "%0.2f"|format(transaction['Fee']) }}</td>
|
|
<td>{{ "%0.2f"|format(transaction['Net Amount']) }}</td>
|
|
<td>{{ transaction['Transaction Type'] }}</td>
|
|
<td>{{ transaction['Account'] }}</td>
|
|
<td>{{ transaction['Status'] }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Simple search functionality
|
|
document.getElementById('searchInput').addEventListener('keyup', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
const tableRows = document.querySelectorAll('#transactionsTable tbody tr');
|
|
|
|
tableRows.forEach(row => {
|
|
const rowText = row.textContent.toLowerCase();
|
|
if (rowText.includes(searchTerm)) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |