Allow comparing by calendar month in comparative income statement report

src/components/ComparativeDynamicReportComponent.vue

@@ -0,0 +1,63 @@
+<!--
+	DrCr: Web-based double-entry bookkeeping framework
+	Copyright (C) 2022–2025  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>
+	<template v-if="reports.length > 0">
+		<h1 class="page-heading">
+			{{ reports[0].title }}
+		</h1>
+		
+		<slot />
+		
+		<table class="min-w-full">
+			<thead>
+				<tr class="border-b border-gray-300">
+					<th></th>
+					<th v-for="label of labels" class="py-0.5 pl-1 text-gray-900 font-semibold text-end">{{ label }}&nbsp;</th>
+				</tr>
+			</thead>
+			<tbody>
+				<ComparativeDynamicReportEntry :row="[row[0], row]" v-for="row of joinedEntries" />
+			</tbody>
+		</table>
+	</template>
+</template>
+
+<script setup lang="ts">
+	import { computed, defineProps } from 'vue';
+	
+	import { DynamicReport } from '../reports/base.ts';
+	import ComparativeDynamicReportEntry from './ComparativeDynamicReportEntry.vue';
+	
+	const { reports, labels } = defineProps<{ reports: DynamicReport[], labels: string[] }>();
+	
+	const joinedEntries = computed(() => {
+		// FIXME: Validate reports are of the same type, etc.
+		const result = [];
+		
+		for (let i = 0; i < reports[0].entries.length; i++) {
+			const thisRow = [];
+			for (let report of reports) {
+				thisRow.push(report.entries[i]);
+			}
+			result.push(thisRow);
+		}
+		
+		return result;
+	});
+</script>

src/components/ComparativeDynamicReportEntry.vue

@@ -0,0 +1,106 @@
+<!--
+	DrCr: Web-based double-entry bookkeeping framework
+	Copyright (C) 2022–2025  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>
+	<template v-if="row[0] instanceof Entry">
+		<!-- NB: Subtotal and Calculated are subclasses of Entry -->
+		<tr :class="row[0].bordered ? 'border-y border-gray-300' : null">
+			<component :is="row[0].heading ? 'th' : 'td'" class="py-0.5 pr-1 text-gray-900 text-start" :class="{ 'font-semibold': row[0].heading }">
+				<a :href="row[0].link" class="hover:text-blue-700 hover:underline" v-if="row[0].link !== null">{{ row[0].text }}</a>
+				<template v-if="row[0].link === null">{{ row[0].text }}</template>
+			</component>
+			<template v-for="entry of row[1]">
+				<component :is="row[0].heading ? 'th' : 'td'" class="py-0.5 pl-1 text-gray-900 text-end" :class="{ 'font-semibold': row[0].heading }" v-html="entry ? ppBracketed((entry as Entry).quantity, (entry as Entry).link ?? undefined) : ''" />
+			</template>
+		</tr>
+	</template>
+	<template v-if="row[0] instanceof Section">
+		<tr v-if="row[0].title !== null">
+			<th class="py-0.5 pr-1 text-gray-900 font-semibold text-start">{{ row[0].title }}</th>
+			<th></th>
+		</tr>
+		<ComparativeDynamicReportEntry :row="childRow" v-for="childRow of joinedChildren" />
+	</template>
+	<template v-if="row[0] instanceof Spacer">
+		<tr><td :colspan="row[1].length + 1" class="py-0.5">&nbsp;</td></tr>
+	</template>
+</template>
+
+<script setup lang="ts">
+	import { computed, defineProps } from 'vue';
+	
+	import { ppBracketed } from '../display.ts';
+	import { DynamicReportNode, Entry, Section, Spacer, Subtotal } from '../reports/base.ts';
+	
+	const { row } = defineProps<{ row: [DynamicReportNode, (DynamicReportNode | null)[]] }>();
+	
+	const joinedChildren = computed(() => {
+		// First get all children's names
+		const joinedNames: string[] = [];
+		for (let cell of row[1]) {
+			for (let entry of (cell as any).entries) {
+				if (entry instanceof Subtotal) {  // Handle Subtotal separately
+					continue;
+				}
+				if (!joinedNames.includes((entry as any).text)) {
+					joinedNames.push((entry as any).text);
+				}
+			}
+		}
+		joinedNames.sort();
+		
+		// Then return joined children in order of sorted names
+		const result: [DynamicReportNode, (DynamicReportNode | null)[]][] = [];
+		for (let name of joinedNames) {
+			const thisRow: DynamicReportNode[] = [];
+			let thisRowExample = null;
+			for (let cell of row[1]) {
+				let thisCell = null;
+				for (let entry of (cell as any).entries) {
+					if ((entry as any).text === name) {
+						thisCell = entry;
+						thisRowExample = entry;
+						break;
+					}
+				}
+				thisRow.push(thisCell);
+			}
+			result.push([thisRowExample, thisRow]);
+		}
+		
+		// Add Subtotal
+		const subtotalRow = [];
+		let subtotalExample = null;
+		for (let cell of row[1]) {
+			let thisCell = null;
+			for (let entry of (cell as any).entries) {
+				if (entry instanceof Subtotal) {
+					thisCell = entry;
+					subtotalExample = entry;
+					break;
+				}
+			}
+			subtotalRow.push(thisCell);
+		}
+		if (subtotalExample) {
+			result.push([subtotalExample, subtotalRow]);
+		}
+		
+		return result;
+	});
+</script>

src/components/DropdownBox.vue

@@ -1,6 +1,6 @@
 <!--
 	DrCr: Web-based double-entry bookkeeping framework
-	Copyright (C) 2022–2024  Lee Yingtong Li (RunasSudo)
+	Copyright (C) 2022–2025  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
@@ -26,7 +26,7 @@
 		</button>
 		<ul class="absolute z-20 mt-1 max-h-60 w-full overflow-auto bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" :class="isOpen ? 'block' : 'hidden'">
 			<template v-for="([categoryName, categoryItems], index) in values">
-				<li class="relative cursor-default select-none py-1 pl-3 pr-9 text-gray-500 border-b border-gray-300" :class="{ 'pt-4': index > 0 }">
+				<li class="relative cursor-default select-none py-1 pl-3 pr-9 text-gray-500 border-b border-gray-300" :class="{ 'pt-4': index > 0 }" v-if="categoryName">
 					<span class="block truncate text-xs font-bold uppercase">{{ categoryName }}</span>
 				</li>
 				<li v-for="item in categoryItems" class="group relative cursor-default select-none py-1 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-emerald-600" :data-selected="item[0] === selectedValue[0] ? 'selected' : null" @click="selectedValue = item; isOpen = false">
@@ -45,7 +45,7 @@
 	
 	import { defineModel, defineProps, ref } from 'vue';
 	
-	const { values } = defineProps<{ values: [string, [string, string][]][] }>();  // Array of [category name, [internal identifier, pretty name]]
+	const { values } = defineProps<{ values: [string | null, [string, string][]][] }>();  // Array of [category name, [internal identifier, pretty name]]
 	
 	const selectedValue = defineModel({ default: null! as [string, string] });  // Vue bug: Compiler produces broken code if setting default directly here
 	if (selectedValue.value === null) {

src/reports/IncomeStatementReport.vue

@@ -57,15 +57,25 @@
 <!-- Report display -->
 
 <template>
-	<DynamicReportComponent :report="report">
+	<ComparativeDynamicReportComponent :reports="reports" :labels="reportLabels">
 		<div class="my-2 py-2 flex">
 			<div class="grow flex gap-x-2 items-baseline">
-				<input type="date" class="bordered-field" v-model="dtStart">
+				<input type="date" class="bordered-field" v-model.lazy="dtStart">
 				<span>to</span>
-				<input type="date" class="bordered-field" v-model="dt">
+				<input type="date" class="bordered-field" v-model.lazy="dt">
+				<span>Compare</span>
+				<div class="relative flex flex-grow items-stretch shadow-sm">
+					<input type="number" class="bordered-field w-[9.5em] pr-[6em]" v-model.lazy="comparePeriods">
+					<div class="absolute inset-y-0 right-0 flex items-center z-10">
+						<select class="h-full border-0 bg-transparent py-0 pl-2 pr-8 text-gray-900 focus:ring-2 focus:ring-inset focus:ring-emerald-600" v-model="compareUnit">
+							<option value="years">years</option>
+							<option value="months">months</option>
+						</select>
+					</div>
+				</div>
 			</div>
 		</div>
-	</DynamicReportComponent>
+	</ComparativeDynamicReportComponent>
 </template>
 
 <script setup lang="ts">
@@ -75,14 +85,18 @@
 	import { Computed, DynamicReport, Section, Spacer, Subtotal } from './base.ts';
 	import { db } from '../db.ts';
 	import { ExtendedDatabase } from '../dbutil.ts';
-	import DynamicReportComponent from '../components/DynamicReportComponent.vue';
+	import ComparativeDynamicReportComponent from '../components/ComparativeDynamicReportComponent.vue';
 	import { ReportingStage, ReportingWorkflow } from '../reporting.ts';
 	
-	const report = ref(null as IncomeStatementReport | null);
+	const reports = ref([] as IncomeStatementReport[]);
+	const reportLabels = ref([] as string[]);
 	
 	const dt = ref(null as string | null);
 	const dtStart = ref(null as string | null);
 	
+	const comparePeriods = ref(1);
+	const compareUnit = ref('years');
+	
 	async function load() {
 		const session = await db.load();
 		
@@ -93,17 +107,53 @@
 		
 		// Update report when dates etc. changed
 		// We initialise the watcher here only after dt and dtStart are initialised above
-		watch([dt, dtStart], async () => {
+		watch([dt, dtStart, comparePeriods, compareUnit], async () => {
 			const session = await db.load();
 			await updateReport(session);
 		});
 	}
 	
 	async function updateReport(session: ExtendedDatabase) {
-		const reportingWorkflow = new ReportingWorkflow();
-		await reportingWorkflow.generate(session, dt.value!, dtStart.value!);
+		const newReportPromises = [];
+		const newReportLabels = [];
+		for (let i = 0; i < comparePeriods.value; i++) {
+			let thisReportDt, thisReportDtStart, thisReportLabel;
+			
+			if (compareUnit.value === 'years') {
+				thisReportDt = dayjs(dt.value!).subtract(i, 'year').format('YYYY-MM-DD');
+				thisReportDtStart = dayjs(dtStart.value!).subtract(i, 'year').format('YYYY-MM-DD');
+				thisReportLabel = dayjs(dt.value!).subtract(i, 'year').format('YYYY');
+			} else if (compareUnit.value === 'months') {
+				if (dayjs(dt.value!).add(1, 'day').isSame(dayjs(dt.value!).set('date', 1).add(1, 'month'))) {
+					// If dt is the end of a calendar month, then fix each prior dt to be the end of the calendar month
+					thisReportDt = dayjs(dt.value!).subtract(i, 'month').set('date', 1).add(1, 'month').subtract(1, 'day').format('YYYY-MM-DD');
+					thisReportDtStart = dayjs(dtStart.value!).subtract(i, 'month').format('YYYY-MM-DD');
+				} else {
+					thisReportDt = dayjs(dt.value!).subtract(i, 'month').format('YYYY-MM-DD');
+					thisReportDtStart = dayjs(dtStart.value!).subtract(i, 'month').format('YYYY-MM-DD');
+				}
+				thisReportLabel = dayjs(dt.value!).subtract(i, 'month').format('YYYY-MM');
+			} else {
+				throw new Error('Unexpected compareUnit');
+			}
+			
+			// Generate reports asynchronously
+			newReportPromises.push((async () => {
+				const reportingWorkflow = new ReportingWorkflow();
+				await reportingWorkflow.generate(session, thisReportDt, thisReportDtStart);
+				return reportingWorkflow.getReportAtStage(ReportingStage.InterimIncomeStatement, IncomeStatementReport) as IncomeStatementReport;
+			})());
+			
+			if (comparePeriods.value === 1) {
+				// If only 1 report, the heading is simply "$"
+				newReportLabels.push(db.metadata.reporting_commodity);
+			} else {
+				newReportLabels.push(thisReportLabel);
+			}
+		}
 		
-		report.value = reportingWorkflow.getReportAtStage(ReportingStage.InterimIncomeStatement, IncomeStatementReport) as IncomeStatementReport;
+		reports.value = await Promise.all(newReportPromises);
+		reportLabels.value = newReportLabels;
 	}
 	
 	load();