General ledger view

src/GeneralLedgerView.vue

@@ -0,0 +1,135 @@
+<!--
+	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/>.
+-->
+
+<template>
+	<h1 class="page-heading">
+		General ledger
+	</h1>
+	
+	<div class="my-4 flex">
+		<button v-if="commodityDetail" class="btn-secondary" @click="commodityDetail = false">Hide commodity detail</button>
+		<button v-if="!commodityDetail" class="btn-secondary" @click="commodityDetail = true">Show commodity detail</button>
+	</div>
+	
+	<table class="min-w-full" ref="table">
+		<thead>
+			<tr>
+				<th class="py-0.5 pr-1 text-gray-900 font-semibold text-start">Date</th>
+				<th class="py-0.5 px-1 text-gray-900 font-semibold text-start" colspan="3">Description</th>
+				<th class="py-0.5 px-1 text-gray-900 font-semibold text-end">Dr</th>
+				<th class="py-0.5 pl-1 text-gray-900 font-semibold text-end">Cr</th>
+			</tr>
+		</thead>
+		<tbody id="transaction-list">
+			<template v-for="transaction in transactions" :key="transaction.id">
+				<tr class="border-t border-gray-300">
+					<td class="py-0.5 pr-1 text-gray-900">{{ transaction.dt.split(' ')[0] }}</td>
+					<td class="py-0.5 px-1 text-gray-900" colspan="3">{{ transaction.description }}</td>
+					<td></td>
+					<td></td>
+				</tr>
+				<template v-for="posting in transaction.postings" :key="posting.id">
+					<tr>
+						<td></td>
+						<td class="py-0.5 px-1 text-gray-900">{{ posting.description }}</td>
+						<td class="py-0.5 px-1 text-gray-900 text-end"><i>{{ posting.quantity >= 0 ? 'Dr' : 'Cr' }}</i></td>
+						<td class="py-0.5 px-1 text-gray-900">{{ posting.account }}</td>
+						<td class="py-0.5 px-1 text-gray-900 text-end">
+							{{ posting.quantity >= 0 ? (commodityDetail ? ppWithCommodity(posting.quantity, posting.commodity) : pp(asCost(posting.quantity, posting.commodity))) : '' }}
+						</td>
+						<td class="py-0.5 pl-1 text-gray-900 text-end">
+							{{ posting.quantity < 0 ? (commodityDetail ? ppWithCommodity(-posting.quantity, posting.commodity) : pp(asCost(-posting.quantity, posting.commodity))) : '' }}
+						</td>
+					</tr>
+				</template>
+			</template>
+		</tbody>
+	</table>
+	
+	<div class="my-4 flex" v-if="transactionsOffset !== null">
+		<button class="btn-secondary" @click="load()">Load more…</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
+	
+	import { asCost } from './commodities.ts';
+	import { db } from './db.ts';
+	import { pp, ppWithCommodity } from './display.ts';
+	
+	const commodityDetail = ref(false);
+	
+	interface _Transaction {
+		id: number,
+		dt: string,
+		description: string,
+		postings: _Posting[]
+	}
+	
+	interface _Posting {
+		id: number,
+		description: string,
+		account: string,
+		quantity: number,
+		commodity: string
+	}
+	
+	const transactions = ref([] as _Transaction[]);
+	const transactionsOffset = ref(0 as number | null);
+	
+	async function load() {
+		if (transactionsOffset.value === null) {
+			// No more entries
+			return;
+		}
+		
+		const session = await db.load();
+		
+		const transactionsRaw: {transaction_id: number, dt: string, transaction_description: string, id: number, description: string, account: string, quantity: number, commodity: string}[] = await session.select('SELECT transaction_id, dt, transactions.description AS transaction_description, postings.id, postings.description, account, quantity, commodity FROM transactions LEFT JOIN postings ON transactions.id = postings.transaction_id ORDER BY dt DESC, transaction_id DESC, postings.id LIMIT 200 OFFSET ?', [transactionsOffset.value]);
+		
+		if (transactionsRaw.length === 0) {
+			// No more entries
+			transactionsOffset.value = null;
+			return;
+		}
+		
+		// Group postings into transactions
+		for (const transactionRaw of transactionsRaw) {
+			if (transactions.value.length === 0 || transactions.value.at(-1)!.id !== transactionRaw.transaction_id) {
+				transactions.value.push({
+					id: transactionRaw.transaction_id,
+					dt: transactionRaw.dt,
+					description: transactionRaw.transaction_description,
+					postings: []
+				});
+			}
+			
+			transactions.value.at(-1)!.postings.push({
+				id: transactionRaw.id,
+				description: transactionRaw.description,
+				account: transactionRaw.account,
+				quantity: transactionRaw.quantity,
+				commodity: transactionRaw.commodity
+			});
+		}
+		
+		transactionsOffset.value += transactionsRaw.length;
+	}
+	load();
+</script>

src/HomeView.vue

@@ -31,7 +31,7 @@
 		<div class="px-4">
 			<h2 class="font-medium text-gray-700 mb-2">General reports</h2>
 			<ul class="list-disc ml-6">
-				<!--<li><a href="#" class="text-gray-900 hover:text-blue-700 hover:underline">General ledger</a></li>-->
+				<li><RouterLink to="/general-ledger" class="text-gray-900 hover:text-blue-700 hover:underline">General ledger</RouterLink></li>
 				<li><RouterLink to="/trial-balance" class="text-gray-900 hover:text-blue-700 hover:underline">Trial balance</RouterLink></li>
 				<!--<li><a href="#" class="text-gray-900 hover:text-blue-700 hover:underline">Balance sheet</a></li>-->
 				<!--<li><a href="#" class="text-gray-900 hover:text-blue-700 hover:underline">Income statement</a></li>-->

src/commodities.ts

@@ -0,0 +1,38 @@
+/*
+	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/>.
+*/
+
+import { db } from './db.ts';
+
+export function asCost(quantity: number, commodity: string): number {
+	// Convert the amount to cost price in the reporting commodity
+	
+	if (commodity === db.metadata.reporting_commodity) {
+		return quantity;
+	}
+	if (commodity.indexOf('{{') >= 0) {
+		// Total price
+		const price = parseFloat(commodity.substring(commodity.indexOf('{{') + 2, commodity.indexOf('}}', commodity.indexOf('{{'))));
+		return Math.round(price * Math.pow(10, db.metadata.dps));
+	}
+	if (commodity.indexOf('{') >= 0) {
+		// Unit price
+		const price = parseFloat(commodity.substring(commodity.indexOf('{') + 1, commodity.indexOf('}', commodity.indexOf('{'))));
+		return Math.round(quantity * price);
+	}
+	throw new Error('No cost base specified: ' + quantity + ' ' + commodity);
+}

src/display.ts

@@ -19,6 +19,7 @@
 import { db } from './db.ts';
 
 export function pp(quantity: number): string {
+	// Pretty print the quantity
 	if (quantity < 0) {
 		return '−' + pp(-quantity);
 	}
@@ -29,3 +30,12 @@ export function pp(quantity: number): string {
 	
 	return wholePart.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '\u202F') + '.' + fracPart.toString().padStart(db.metadata.dps, '0');
 }
+
+export function ppWithCommodity(quantity: number, commodity: string): string {
+	// Pretty print the amount including commodity
+	if (commodity.length === 1) {
+		return commodity + pp(quantity);
+	} else {
+		return pp(quantity) + ' ' + commodity;
+	}
+}

src/main.ts

@@ -23,6 +23,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 
 import App from './App.vue';
 import HomeView from './HomeView.vue';
+import GeneralLedgerView from './GeneralLedgerView.vue';
 import TrialBalanceView from './TrialBalanceView.vue';
 
 import { db } from './db.ts';
@@ -31,6 +32,7 @@ async function initApp() {
 	// Init router
 	const routes = [
 		{ path: '/', component: HomeView },
+		{ path: '/general-ledger', component: GeneralLedgerView },
 		{ path: '/trial-balance', component: TrialBalanceView },
 	];
 	const router = createRouter({
@@ -41,7 +43,7 @@ async function initApp() {
 	// Init state
 	const dbFilename: string = await invoke('get_open_filename');
 	if (dbFilename !== null) {
-		db.init(dbFilename);
+		await db.init(dbFilename);  // Ensure all metadata cached before loading Vue
 	}
 	
 	// Create Vue app