From d73535dc86d48e995562cee6171624b0b2c2eb4b Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Thu, 4 Apr 2024 15:39:32 +1100
Subject: [PATCH] Convert account transactions with commodity detail view to
 Tailwind CSS

---
 .../transactions_commodity_detail.html        | 54 ++++++++++++-------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/drcr/templates/transactions_commodity_detail.html b/drcr/templates/transactions_commodity_detail.html
index 65eeb12..48a7417 100644
--- a/drcr/templates/transactions_commodity_detail.html
+++ b/drcr/templates/transactions_commodity_detail.html
@@ -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 %}