Convert account transactions with commodity detail view to Tailwind CSS

This commit is contained in:
RunasSudo 2024-04-04 15:39:32 +11:00
parent 9e2734843e
commit d73535dc86
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
1 changed files with 35 additions and 19 deletions

View File

@ -15,34 +15,50 @@
along with this program. If not, see <https://www.gnu.org/licenses/>.
#}
{% extends 'base.html' %}
{% extends 'base_tailwind.html' %}
{% block title %}Account transactions{% endblock %}
{% block content %}
<h1 class="h2 my-4">Account transactions</h1>
<h1 class="text-3xl text-gray-900">
Account transactions
</h1>
<div class="mb-2">
<a href="{{ url_for('account_transactions', account=account) }}" class="btn btn-outline-secondary">Hide commodity detail</a>
<div class="my-4 flex gap-x-2">
<a href="{{ url_for('journal_new_transaction') }}" class="inline-flex items-center gap-x-1.5 bg-emerald-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-emerald-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
New transaction
</a>
<a href="{{ url_for('account_transactions', account=account) }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
Hide commodity detail
</a>
</div>
<table class="table table-sm table-borderless">
<table class="min-w-full">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th class="py-0.5 text-gray-900 font-semibold text-start">Date</th>
<th class="py-0.5 text-gray-900 font-semibold text-start">Description</th>
<th></th>
<th class="text-end">Amount</th>
<th class="text-end">Balance</th>
<th class="py-0.5 text-gray-900 font-semibold text-end">Amount</th>
<th class="py-0.5 text-gray-900 font-semibold text-end">Balance</th>
<th></th>
</tr>
</thead>
<tbody>
{% for transaction in transactions %}
<tr style="border-width:1px 0 0 0">
<td>{{ transaction.dt.strftime('%Y-%m-%d') }}</td>
<td>
<tr class="border-t border-gray-300">
<td class="py-0.5 text-gray-900">{{ transaction.dt.strftime('%Y-%m-%d') }}</td>
<td class="py-0.5 text-gray-900">
{{ transaction.description }}
{% if transaction.id %}<a href="{{ url_for('journal_edit_transaction', id=transaction.id) }}"><i class="bi bi-pencil text-muted"></i></a>{% endif %}
{% if transaction.id %}
<a href="{{ url_for('journal_edit_transaction', id=transaction.id) }}" class="text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 inline align-middle -mt-0.5">
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
</svg>
</a>
{% endif %}
</td>
<td></td>
<td></td>
@ -55,10 +71,10 @@
<tr>
<td></td>
<td></td>
<td>{{ 'Dr' if posting.quantity >= 0 else 'Cr' }}</td>
<td class="text-end">{{ (posting.amount()|abs).format('force') }}</td>
<td class="text-end">{{ (amount|abs).format('force') }}</td>
<td>{{ 'Dr' if amount.quantity >= 0 else 'Cr' }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ 'Dr' if posting.quantity >= 0 else 'Cr' }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ (posting.amount()|abs).format('force') }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ (amount|abs).format('force') }}</td>
<td class="py-0.5 pl-1 text-gray-900">{{ 'Dr' if amount.quantity >= 0 else 'Cr' }}</td>
</tr>
{% else %}
<tr>
@ -66,8 +82,8 @@
<td></td>
<td></td>
<td></td>
<td class="text-end">{{ (amount|abs).format('force') }}</td>
<td>{{ 'Dr' if amount.quantity >= 0 else 'Cr' }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ (amount|abs).format('force') }}</td>
<td class="py-0.5 pl-1 text-gray-900">{{ 'Dr' if amount.quantity >= 0 else 'Cr' }}</td>
</tr>
{% endfor %}
{% endfor %}