feat(frontend): add VAT breakdown, print receipt, and VAT indicators

Add print receipt feature to UserBookingModal with full VAT breakdown. Fix VAT rate display (remove double *100). Show VAT breakdown (net + VAT) on booking confirmed page. Add VAT info to EditBookingModal. Show incl. VAT label on BookingFlow total, schedule, and today dashboard. Add VAT note to prices page. Show booking total amount on account page. Improve VAT enable toast in BusinessSettings.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
2026-06-22 17:06:38 +01:00
co-authored by Sisyphus
parent 194aacf68c
commit d71373c7f2
10 changed files with 199 additions and 26 deletions
@@ -1,5 +1,6 @@
<script lang="ts">
import { authStore } from '$lib/stores/auth.svelte';
import { ensureBusinessInfo, getBusinessInfo } from '$lib/stores/businessInfo.svelte';
import { SvelteDate } from 'svelte/reactivity';
import { toast } from 'svelte-sonner';
import { formatDuration } from '$lib/utils/format';
@@ -88,6 +89,9 @@
let summary = $state<DailySummary | null>(null);
let weekSummary = $state<DailySummary | null>(null);
// VAT registration status from public business info (via shared store)
let vatRegistered = $derived(getBusinessInfo()?.is_vat_registered ?? false);
// Data diffing — only update UI when payload actually changes
let prevDataJson = $state('');
@@ -226,6 +230,7 @@
}
$effect(() => {
ensureBusinessInfo();
fetchCurrentAndNext();
// Recalculate time display every 15s (no data fetch)
@@ -433,16 +438,17 @@
day: 'numeric'
})}
</div>
{/if}
{/if}
<!-- Stats grid -->
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
<div class="rounded-md border border-teal-100 bg-white p-3">
<div class="text-xs font-medium text-gray-500">Payments Taken</div>
<div class="mt-1 text-lg font-bold text-gray-900">
£{summary.total_payments_today.toFixed(2)}
</div>
<!-- Stats grid -->
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
<div class="rounded-md border border-teal-100 bg-white p-3">
<div class="text-xs font-medium text-gray-500">Payments Taken</div>
<div class="mt-1 text-lg font-bold text-gray-900">
£{summary.total_payments_today.toFixed(2)}
</div>
{#if vatRegistered}<div class="text-[10px] text-gray-400">incl. VAT</div>{/if}
</div>
<div class="rounded-md border border-teal-100 bg-white p-3">
<div class="text-xs font-medium text-gray-500">Tips</div>
@@ -569,12 +575,13 @@
</div>
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
<div class="rounded-md border border-gray-200 bg-white p-3">
<div class="text-xs font-medium text-gray-500">Payments Taken</div>
<div class="mt-1 text-lg font-bold text-gray-900">
£{weekSummary.total_payments_today.toFixed(2)}
</div>
</div>
<div class="rounded-md border border-gray-200 bg-white p-3">
<div class="text-xs font-medium text-gray-500">Payments Taken</div>
<div class="mt-1 text-lg font-bold text-gray-900">
£{weekSummary.total_payments_today.toFixed(2)}
</div>
{#if vatRegistered}<div class="text-[10px] text-gray-400">incl. VAT</div>{/if}
</div>
<div class="rounded-md border border-gray-200 bg-white p-3">
<div class="text-xs font-medium text-gray-500">Tips</div>