Convert general ledger view to Tailwind CSS

drcr/templates/general_ledger.html

@@ -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,49 +15,55 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 #}
 
-{% extends 'base.html' %}
+{% extends 'base_tailwind.html' %}
 {% block title %}General ledger{% endblock %}
 
 {% block content %}
-	<h1 class="h2 my-4">General ledger</h1>
+	<h1 class="text-3xl text-gray-900">
+		General ledger
+	</h1>
 	
-	<div class="mb-2">
+	<div class="my-4 flex">
 		{% if commodity_detail %}
-			<a href="{{ url_for('general_ledger') }}" class="btn btn-outline-secondary">Hide commodity detail</a>
+			<a href="{{ url_for('general_ledger') }}" 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('general_ledger', commodity_detail=1) }}" class="btn btn-outline-secondary">Show commodity detail</a>
+			<a href="{{ url_for('general_ledger', 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 class="py-0.5 text-gray-900 font-semibold text-start">Date</th>
-				<th colspan="3">Description</th>
+				<th class="py-0.5 text-gray-900 font-semibold text-start" colspan="3">Description</th>
-				<th class="text-end">Dr</th>
+				<th class="py-0.5 text-gray-900 font-semibold text-end">Dr</th>
-				<th class="text-end">Cr</th>
+				<th class="py-0.5 text-gray-900 font-semibold text-end">Cr</th>
 			</tr>
 		</thead>
 		<tbody>
 			{% for transaction in transactions %}
-				<tr>
+				<tr class="border-t border-gray-300">
-					<td>{{ transaction.dt.strftime('%Y-%m-%d') }}</td>
+					<td class="py-0.5 text-gray-900">{{ transaction.dt.strftime('%Y-%m-%d') }}</td>
-					<td colspan="3">{{ transaction.description }}</td>
+					<td class="py-0.5 text-gray-900" colspan="3">{{ transaction.description }}</td>
 					<td></td>
 					<td></td>
 				</tr>
 				{% for posting in transaction.postings %}
 					<tr>
 						<td></td>
-						<td>{{ posting.description or '' }}</td>
+						<td class="py-0.5 text-gray-900">{{ posting.description or '' }}</td>
-						<td class="text-end"><i>{{ 'Dr' if posting.quantity >= 0 else 'Cr' }}</i></td>
+						<td class="py-0.5 pr-2 text-gray-900 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.account }}</td>
 						{% if commodity_detail %}
-							<td class="text-end">{{ posting.amount().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="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()|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="py-0.5 text-gray-900 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()|abs).as_cost().format() if posting.quantity < 0 else '' }}</td>
 						{% endif %}
 					</tr>
 				{% endfor %}