Convert account transactions listing to Tailwind CSS

This commit is contained in:
RunasSudo 2024-04-04 01:10:13 +11:00
parent 56135a74db
commit 0b0ba703e0
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A

View File

@ -15,52 +15,73 @@
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('journal_new_transaction') }}" class="btn btn-primary"><i class="bi bi-plus-lg"></i> New transaction</a>
<a href="{{ url_for('account_transactions', account=account, commodity_detail=1) }}" class="btn btn-outline-secondary">Show 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-blue-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
<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, commodity_detail=1) }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
Show commodity detail
</a>
</div>
<table class="table">
<table class="min-w-full">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Related Account</th>
<th class="text-end">Dr</th>
<th class="text-end">Cr</th>
<th class="text-end">Balance</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 class="py-0.5 text-gray-900 font-semibold text-start">Related Account</th>
<th class="py-0.5 text-gray-900 font-semibold text-end">Dr</th>
<th class="py-0.5 text-gray-900 font-semibold text-end">Cr</th>
<th class="py-0.5 text-gray-900 font-semibold text-end">Balance</th>
<th></th>
</tr>
</thead>
<tbody>
<tbody class="min-w-full">
{% for transaction in transactions %}
{% if transaction.postings|length == 2 %}
{% for posting in transaction.postings if posting.account == account %}
<tr>
<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>{% for p in transaction.postings if p.account != account %}{{ p.account }}{% endfor %}</td>
<td class="text-end">{{ posting.amount().as_cost().format() if posting.quantity >= 0 else '' }}</td>
<td class="text-end">{{ (posting.amount()|abs).as_cost().format() if posting.quantity < 0 else '' }}</td>
<td class="text-end">{{ (running_totals[posting]|abs).format() }}</td>
<td>{{ 'Dr' if running_totals[posting].quantity >= 0 else 'Cr' }}</td>
<td class="py-0.5 text-gray-900">{% for p in transaction.postings if p.account != account %}{{ p.account }}{% endfor %}</td>
<td class="py-0.5 text-gray-900 text-end">{{ posting.amount().as_cost().format() if posting.quantity >= 0 else '' }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ (posting.amount()|abs).as_cost().format() if posting.quantity < 0 else '' }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ (running_totals[posting]|abs).format() }}</td>
<td class="py-0.5 pl-1 text-gray-900">{{ 'Dr' if running_totals[posting].quantity >= 0 else 'Cr' }}</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td>{{ transaction.dt.strftime('%Y-%m-%d') }}</td>
<td colspan="2">
<tr class="border-t border-gray-300">
<td class="py-0.5 text-gray-900">{{ transaction.dt.strftime('%Y-%m-%d') }}</td>
<td colspan="2" 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>
@ -70,21 +91,21 @@
{% for posting in transaction.postings if posting.account == account %}
<tr>
<td></td>
<td class="text-end"><i>{{ 'Dr' if posting.quantity >= 0 else 'Cr' }}</i></td>
<td>{{ account }}</td>
<td class="text-end">{{ posting.amount().as_cost().format() if posting.quantity >= 0 else '' }}</td>
<td class="text-end">{{ (posting.amount()|abs).as_cost().format() if posting.quantity < 0 else '' }}</td>
<td class="text-end">{{ (running_totals[posting]|abs).format() }}</td>
<td>{{ 'Dr' if running_totals[posting].quantity >= 0 else 'Cr' }}</td>
<td class="py-0.5 pr-2 text-gray-900 text-end"><i>{{ 'Dr' if posting.quantity >= 0 else 'Cr' }}</i></td>
<td class="py-0.5 text-gray-900">{{ account }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ posting.amount().as_cost().format() if posting.quantity >= 0 else '' }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ (posting.amount()|abs).as_cost().format() if posting.quantity < 0 else '' }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ (running_totals[posting]|abs).format() }}</td>
<td class="py-0.5 pl-1 text-gray-900">{{ 'Dr' if running_totals[posting].quantity >= 0 else 'Cr' }}</td>
</tr>
{% endfor %}
{% for posting in transaction.postings if posting.account != account %}
<tr>
<td></td>
<td class="text-end"><i>{{ 'Dr' if posting.quantity >= 0 else 'Cr' }}</i></td>
<td>{{ posting.account }}</td>
<td class="text-end">{{ posting.amount().as_cost().format() if posting.quantity >= 0 else '' }}</td>
<td class="text-end">{{ (posting.amount()|abs).as_cost().format() if posting.quantity < 0 else '' }}</td>
<td class="py-0.5 pr-2 text-gray-900 text-end"><i>{{ 'Dr' if posting.quantity >= 0 else 'Cr' }}</i></td>
<td class="py-0.5 text-gray-900">{{ posting.account }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ posting.amount().as_cost().format() if posting.quantity >= 0 else '' }}</td>
<td class="py-0.5 pl-1 text-gray-900 text-end">{{ (posting.amount()|abs).as_cost().format() if posting.quantity < 0 else '' }}</td>
<td></td>
<td></td>
</tr>