Convert journal report to Tailwind CSS

This commit is contained in:
RunasSudo 2024-04-04 11:38:31 +11:00
parent 89e177983e
commit c93b9bf1dd
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A

View File

@ -1,5 +1,5 @@
{# DrCr: Web-based double-entry bookkeeping framework
Copyright (C) 2022–2023 Lee Yingtong Li (RunasSudo)
Copyright (C) 2022–2024 Lee Yingtong Li (RunasSudo)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
@ -15,50 +15,68 @@
along with this program. If not, see <https://www.gnu.org/licenses/>.
#}
{% extends 'base.html' %}
{% extends 'base_tailwind.html' %}
{% block title %}Journal{% endblock %}
{% block content %}
<h1 class="h2 my-4">Journal</h1>
<h1 class="text-3xl text-gray-900">
Journal
</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>
<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>
{% if commodity_detail %}
<a href="{{ url_for('journal') }}" class="btn btn-outline-secondary">Hide commodity detail</a>
<a href="{{ url_for('journal') }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
Hide commodity detail
</a>
{% else %}
<a href="{{ url_for('journal', commodity_detail=1) }}" class="btn btn-outline-secondary">Show commodity detail</a>
<a href="{{ url_for('journal', 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>
{% endif %}
</div>
<table class="table">
<table class="min-w-full">
<thead>
<tr>
<th>Date</th>
<th colspan="3">Description</th>
<th class="text-end">Dr</th>
<th class="text-end">Cr</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" colspan="3">Description</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>
</tr>
</thead>
<tbody>
{% for transaction in transactions %}
<tr>
<td>{{ transaction.dt.strftime('%Y-%m-%d') }}</td>
<td colspan="3">{{ transaction.description }} <a href="{{ url_for('journal_edit_transaction', id=transaction.id) }}"><i class="bi bi-pencil text-muted"></i></a></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" colspan="3">
{{ transaction.description }}
<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>
</td>
<td></td>
<td></td>
</tr>
{% for posting in transaction.postings %}
<tr>
<td></td>
<td>{{ posting.description or '' }}</td>
<td class="text-end"><i>{{ 'Dr' if posting.quantity >= 0 else 'Cr' }}</i></td>
<td>{{ posting.account }}</td>
<td class="py-0.5 text-gray-900">{{ posting.description or '' }}</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>
{% if commodity_detail %}
<td class="text-end">{{ posting.amount().format('force') if posting.quantity >= 0 else '' }}</td>
<td class="text-end">{{ (posting.amount()|abs).format('force') if posting.quantity < 0 else '' }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ posting.amount().format('force') if posting.quantity >= 0 else '' }}</td>
<td class="py-0.5 text-gray-900 text-end">{{ (posting.amount()|abs).format('force') if posting.quantity < 0 else '' }}</td>
{% else %}
<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 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>
{% endif %}
</tr>
{% endfor %}