From c7116c71d1a074b75f9b9947dfeb2311382cb775 Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Thu, 12 Jun 2025 23:14:05 +1000
Subject: [PATCH] Add print/save to PDF menu to dynamic reports

---
 src/components/DynamicReportMenu.vue    | 41 +++++++++++++++++++++++++
 src/plugins/austax/TaxSummaryReport.vue | 11 +++++--
 src/reports/BalanceSheetReport.vue      |  4 ++-
 src/reports/IncomeStatementReport.vue   | 30 +++++++++---------
 src/reports/TrialBalanceReport.vue      | 12 ++++----
 5 files changed, 74 insertions(+), 24 deletions(-)
 create mode 100644 src/components/DynamicReportMenu.vue

diff --git a/src/components/DynamicReportMenu.vue b/src/components/DynamicReportMenu.vue
new file mode 100644
index 0000000..765c919
--- /dev/null
+++ b/src/components/DynamicReportMenu.vue
@@ -0,0 +1,41 @@
+<!--
+	DrCr: 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>
+	<div class="relative print:hidden">
+		<button class="text-gray-400 align-middle hover:text-gray-500" @click="isMenuOpen = !isMenuOpen"><EllipsisHorizontalCircleIcon class="size-6" /></button>
+		<ul class="absolute top-8 right-0 bg-white w-[11rem] shadow-lg ring-1 ring-black/5 focus:outline-hidden" :class="isMenuOpen ? 'block' : 'hidden'">
+			<li class="group cursor-pointer select-none py-1 px-3 text-gray-900 hover:text-white hover:bg-emerald-600" @click="menuPrint">
+				<PrinterIcon class="inline size-5 text-gray-500 group-hover:text-white" />
+				Print/Save as PDF
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script setup type="ts">
+	import { EllipsisHorizontalCircleIcon, PrinterIcon } from '@heroicons/vue/24/outline';
+	import { ref } from 'vue';
+	
+	const isMenuOpen = ref(false);
+	
+	function menuPrint() {
+		window.print();
+		isMenuOpen.value = false;
+	}
+</script>
diff --git a/src/plugins/austax/TaxSummaryReport.vue b/src/plugins/austax/TaxSummaryReport.vue
index 8d15246..c99c9e8 100644
--- a/src/plugins/austax/TaxSummaryReport.vue
+++ b/src/plugins/austax/TaxSummaryReport.vue
@@ -1,5 +1,5 @@
 <!--
-	DrCr: Web-based double-entry bookkeeping framework
+	DrCr: Double-entry bookkeeping framework
 	Copyright (C) 2022-2025  Lee Yingtong Li (RunasSudo)
 	
 	This program is free software: you can redistribute it and/or modify
@@ -17,7 +17,13 @@
 -->
 
 <template>
-	<DynamicReportComponent :report="report" />
+	<DynamicReportComponent :report="report">
+		<div class="relative">
+			<div class="absolute -top-10 right-0">
+				<DynamicReportMenu />
+			</div>
+		</div>
+	</DynamicReportComponent>
 </template>
 
 <script setup lang="ts">
@@ -25,6 +31,7 @@
 	import { ref } from 'vue';
 	
 	import DynamicReportComponent from '../../components/DynamicReportComponent.vue';
+	import DynamicReportMenu from '../../components/DynamicReportMenu.vue';
 	import { DynamicReport } from '../../reports/base.ts';
 	
 	const report = ref(null as DynamicReport | null);
diff --git a/src/reports/BalanceSheetReport.vue b/src/reports/BalanceSheetReport.vue
index daa6768..8706353 100644
--- a/src/reports/BalanceSheetReport.vue
+++ b/src/reports/BalanceSheetReport.vue
@@ -1,5 +1,5 @@
 <!--
-	DrCr: Web-based double-entry bookkeeping framework
+	DrCr: Double-entry bookkeeping framework
 	Copyright (C) 2022-2025  Lee Yingtong Li (RunasSudo)
 	
 	This program is free software: you can redistribute it and/or modify
@@ -32,6 +32,7 @@
 						</select>
 					</div>
 				</div>
+				<DynamicReportMenu />
 			</div>
 		</div>
 		<div class="rounded-md bg-red-50 mt-4 p-4 col-span-2" v-if="!doesBalance">
@@ -57,6 +58,7 @@
 	import { DynamicReport, Row, reportEntryById } from './base.ts';
 	import { db } from '../db.ts';
 	import DynamicReportComponent from '../components/DynamicReportComponent.vue';
+	import DynamicReportMenu from '../components/DynamicReportMenu.vue';
 	
 	const report = ref(null as DynamicReport | null);
 	const reportColumns = ref([] as string[]);
diff --git a/src/reports/IncomeStatementReport.vue b/src/reports/IncomeStatementReport.vue
index 46f550a..b7053b9 100644
--- a/src/reports/IncomeStatementReport.vue
+++ b/src/reports/IncomeStatementReport.vue
@@ -1,5 +1,5 @@
 <!--
-	DrCr: Web-based double-entry bookkeeping framework
+	DrCr: Double-entry bookkeeping framework
 	Copyright (C) 2022-2025  Lee Yingtong Li (RunasSudo)
 	
 	This program is free software: you can redistribute it and/or modify
@@ -18,22 +18,21 @@
 
 <template>
 	<DynamicReportComponent :report="report" :columns="reportColumns">
-		<div class="my-2 py-2 flex">
-			<div class="grow flex gap-x-2 items-baseline">
-				<input type="date" class="bordered-field" v-model.lazy="dtStart">
-				<span>to</span>
-				<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" min="1" 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" @change="onCompareUnitChange">
-							<option value="years">years</option>
-							<option value="months">months</option>
-						</select>
-					</div>
+		<div class="my-2 py-2 flex gap-x-2 items-baseline">
+			<input type="date" class="bordered-field" v-model.lazy="dtStart">
+			<span>to</span>
+			<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" min="1" 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" @change="onCompareUnitChange">
+						<option value="years">years</option>
+						<option value="months">months</option>
+					</select>
 				</div>
 			</div>
+			<DynamicReportMenu />
 		</div>
 	</DynamicReportComponent>
 </template>
@@ -46,6 +45,7 @@
 	import { DynamicReport } from './base.ts';
 	import { db } from '../db.ts';
 	import DynamicReportComponent from '../components/DynamicReportComponent.vue';
+	import DynamicReportMenu from '../components/DynamicReportMenu.vue';
 	
 	const report = ref(null as DynamicReport | null);
 	const reportColumns = ref([] as string[]);
diff --git a/src/reports/TrialBalanceReport.vue b/src/reports/TrialBalanceReport.vue
index bc98e05..3615bcf 100644
--- a/src/reports/TrialBalanceReport.vue
+++ b/src/reports/TrialBalanceReport.vue
@@ -1,5 +1,5 @@
 <!--
-	DrCr: Web-based double-entry bookkeeping framework
+	DrCr: Double-entry bookkeeping framework
 	Copyright (C) 2022-2025  Lee Yingtong Li (RunasSudo)
 	
 	This program is free software: you can redistribute it and/or modify
@@ -18,11 +18,10 @@
 
 <template>
 	<DynamicReportComponent :report="report">
-		<div class="my-2 py-2 flex">
-			<div class="grow flex gap-x-2 items-baseline">
-				<span class="whitespace-nowrap">As at</span>
-				<input type="date" class="bordered-field" v-model.lazy="dt">
-			</div>
+		<div class="my-2 py-2 flex gap-x-2 items-baseline">
+			<span class="whitespace-nowrap">As at</span>
+			<input type="date" class="bordered-field" v-model.lazy="dt">
+			<DynamicReportMenu />
 		</div>
 	</DynamicReportComponent>
 </template>
@@ -35,6 +34,7 @@
 	import { DynamicReport } from './base.ts';
 	import { db } from '../db.ts';
 	import DynamicReportComponent from '../components/DynamicReportComponent.vue';
+	import DynamicReportMenu from '../components/DynamicReportMenu.vue';
 	
 	const report = ref(null as DynamicReport | null);