From 2483a9b9e0563d5e88241ed6edebc9f0ca532906 Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Sun, 16 Feb 2025 22:42:31 +1100
Subject: [PATCH] Very basic comparative income statement

---
 .../ComparativeDynamicReportComponent.vue     |  63 +++++++++++
 .../ComparativeDynamicReportEntry.vue         | 106 ++++++++++++++++++
 src/reports/IncomeStatementReport.vue         |  35 ++++--
 3 files changed, 196 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ComparativeDynamicReportComponent.vue
 create mode 100644 src/components/ComparativeDynamicReportEntry.vue

diff --git a/src/components/ComparativeDynamicReportComponent.vue b/src/components/ComparativeDynamicReportComponent.vue
new file mode 100644
index 0000000..e6a5104
--- /dev/null
+++ b/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>
diff --git a/src/components/ComparativeDynamicReportEntry.vue b/src/components/ComparativeDynamicReportEntry.vue
new file mode 100644
index 0000000..a44e496
--- /dev/null
+++ b/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>
diff --git a/src/reports/IncomeStatementReport.vue b/src/reports/IncomeStatementReport.vue
index 0c5aca8..39d70cc 100644
--- a/src/reports/IncomeStatementReport.vue
+++ b/src/reports/IncomeStatementReport.vue
@@ -57,15 +57,18 @@
 <!-- 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">
 				<span>to</span>
 				<input type="date" class="bordered-field" v-model="dt">
+				<span>Compare</span>
+				<input type="number" class="bordered-field w-[4em]" v-model="compareMonths">
+				<span>months</span>
 			</div>
 		</div>
-	</DynamicReportComponent>
+	</ComparativeDynamicReportComponent>
 </template>
 
 <script setup lang="ts">
@@ -75,13 +78,15 @@
 	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 compareMonths = ref(1);
 	
 	async function load() {
 		const session = await db.load();
@@ -93,17 +98,31 @@
 		
 		// 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, compareMonths], 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 < compareMonths.value; i++) {
+			const thisReportDt = dayjs(dt.value!).subtract(i, 'month').format('YYYY-MM-DD');
+			const thisReportDtStart = dayjs(dtStart.value!).subtract(i, 'month').format('YYYY-MM-DD');
+			
+			// Generate reports asynchronously
+			newReportPromises.push((async () => {
+				const reportingWorkflow = new ReportingWorkflow();
+				await reportingWorkflow.generate(session, thisReportDt, thisReportDtStart);
+				return reportingWorkflow.getReportAtStage(ReportingStage.InterimIncomeStatement, IncomeStatementReport) as IncomeStatementReport;
+			})());
+			
+			newReportLabels.push('$');
+		}
 		
-		report.value = reportingWorkflow.getReportAtStage(ReportingStage.InterimIncomeStatement, IncomeStatementReport) as IncomeStatementReport;
+		reports.value = await Promise.all(newReportPromises);
+		reportLabels.value = newReportLabels;
 	}
 	
 	load();