DrCr/drcr/templates/statements/statement_lines.html

{#  DrCr: Web-based double-entry bookkeeping framework
    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
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
#}

{% extends 'base.html' %}
{% block title %}Statement lines{% endblock %}

{% block content %}
	<h1 class="page-heading">
		Statement lines
	</h1>
	
	<form method="POST">
		<div class="my-2 py-2 flex bg-white sticky top-0">
			<div class="grow flex gap-x-2 items-baseline">
				<button formaction="{{ url_for('statement_line_reconcile_transfer') }}" class="btn-secondary text-emerald-700 ring-emerald-600" type="submit">
					Reconcile selected as transfer
				</button>
				<a href="{{ url_for('statement_lines_import') }}" class="btn-secondary">
					Import statement
				</a>
				{% if request.args.get('unclassified', '0') != '1' %}
					<a href="{{ url_for('statement_lines', **dict(request.args, unclassified=1)) }}" class="btn-secondary">
						Show only unclassified lines
					</a>
				{% endif %}
			</div>
			<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm">
				{% if page.prev_num %}
					<a href="{{ url_for('statement_lines', **dict(request.args, page=page.prev_num)) }}" class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
						<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
							<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
						</svg>
					</a>
				{% endif %}
				{% for pageno in page.iter_pages() %}
					{% if pageno %}
						{% if pageno == page.page %}
							<a href="{{ url_for('statement_lines', **dict(request.args, page=pageno)) }}" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-white bg-emerald-600">{{ pageno }}</a>
						{% else %}
							<a href="{{ url_for('statement_lines', **dict(request.args, page=pageno)) }}" class="relative inline-flex items-center px-4 py-2 text-sm text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">{{ pageno }}</a>
						{% endif %}
					{% else %}
						<span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300">…</span>
					{% endif %}
				{% endfor %}
				{% if page.next_num %}
					<a href="{{ url_for('statement_lines', **dict(request.args, page=page.next_num)) }}" class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 bg-white hover:bg-gray-50">
						<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
							<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
						</svg>
					</a>
				{% endif %}
			</nav>
		</div>
		
		<table class="min-w-full">
			<thead>
				<tr class="border-b border-gray-300">
					<th></th>
					<th class="py-0.5 px-1 align-bottom text-gray-900 font-semibold text-start">Source account</th>
					<th class="py-0.5 px-1 align-bottom text-gray-900 font-semibold text-start">Date</th>
					<th class="py-0.5 px-1 align-bottom text-gray-900 font-semibold text-start">Description</th>
					<th class="py-0.5 px-1 align-bottom text-gray-900 font-semibold text-start">Charged to</th>
					<th class="py-0.5 px-1 align-bottom text-gray-900 font-semibold text-end">Dr</th>
					<th class="py-0.5 px-1 align-bottom text-gray-900 font-semibold text-end">Cr</th>
					<th class="py-0.5 pl-1 align-bottom text-gray-900 font-semibold text-end">Balance</th>
				</tr>
			</thead>
			<tbody>
				{% for line in page.items %}
					<tr data-line-id="{{ line.id }}">
						<td class="py-0.5 pr-1 align-baseline"><input class="checkbox-primary" type="checkbox" name="sel-line-id" value="{{ line.id }}"></td>
						<td class="py-0.5 px-1 align-baseline text-gray-900"><a href="{{ url_for('statement_lines', account=line.source_account) }}" class="hover:text-blue-700 hover:underline">{{ line.source_account }}</a></td>
						<td class="py-0.5 px-1 align-baseline text-gray-900">{{ line.dt.strftime('%Y-%m-%d') }}</td>
						<td class="py-0.5 px-1 align-baseline text-gray-900">{{ line.description }}</td>
						<td class="charge-account py-0.5 px-1 align-baseline text-gray-900">
							{% if not line.reconciliation %}
								<a href="#" class="text-red-500 hover:text-red-600 hover:underline" onclick="classifyLine({{ line.id }});return false;">Unclassified</a>
								<a href="{{ url_for('statement_line_charge_complex') }}?line-id={{ line.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>
							{% elif line.is_complex() %}
								<i>(Complex)</i>
								<a href="{{ url_for('journal_edit_transaction', id=line.reconciliation.posting.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>
							{% else %}
								{% for posting in line.reconciliation.posting.transaction.postings if posting.account != line.source_account %}
									<a href="#" class="hover:text-blue-700 hover:underline" onclick="classifyLine({{ line.id }});return false;">{{ posting.account }}</a>
								{% endfor %}
								<a href="{{ url_for('journal_edit_transaction', id=line.reconciliation.posting.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 class="py-0.5 px-1 align-baseline text-gray-900 text-end">{{ line.amount().format() if line.quantity >= 0 else '' }}</td>
						<td class="py-0.5 px-1 align-baseline text-gray-900 text-end">{{ (line.amount()|abs).format() if line.quantity < 0 else '' }}</td>
						<td class="py-0.5 pl-1 align-baseline text-gray-900 text-end">{{ line.balance or '' }}</td>
					</tr>
				{% endfor %}
			</tbody>
		</table>
	</form>
{% endblock %}

{% block scripts %}
	<script>
		function classifyLine(lineId) {
			let chargeAccount = prompt('Charge to:');
			if (!chargeAccount) {
				return;
			}
			
			const xhr = new XMLHttpRequest();
			xhr.addEventListener('load', function() {
				if (xhr.status === 200) {
					document.querySelector('[data-line-id="' + lineId + '"] .charge-account a').innerText = chargeAccount;
					document.querySelector('[data-line-id="' + lineId + '"] .charge-account a').className = 'text-body';
				} else {
					alert('Error when charging statement line');
				}
			});
			xhr.open('POST', '{{ url_for("statement_line_charge") }}');
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xhr.send('line-id=' + lineId + '&charge-account=' + chargeAccount);
		}
	</script>
{% endblock %}