From 99f90ee6ffd466ffd67243fbd68070f3e603205a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20K=C3=BCndig?= <michael@socialincome.org>
Date: Wed, 22 Nov 2023 18:21:28 +0100
Subject: [PATCH] website(feature): add raw payments stats page (#644)

---
 .../finances/raw-payments-stats/page.tsx      | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 website/src/app/[lang]/[region]/(website)/transparency/finances/raw-payments-stats/page.tsx

diff --git a/website/src/app/[lang]/[region]/(website)/transparency/finances/raw-payments-stats/page.tsx b/website/src/app/[lang]/[region]/(website)/transparency/finances/raw-payments-stats/page.tsx
new file mode 100644
index 000000000..8b0894911
--- /dev/null
+++ b/website/src/app/[lang]/[region]/(website)/transparency/finances/raw-payments-stats/page.tsx
@@ -0,0 +1,38 @@
+import { TransparencyPageProps } from '@/app/[lang]/[region]/(website)/transparency/finances/[currency]/page';
+import { firestoreAdmin } from '@/firebase-admin';
+import { PaymentStatsCalculator } from '@socialincome/shared/src/utils/stats/PaymentStatsCalculator';
+import { BaseContainer, Card, Typography } from '@socialincome/ui';
+
+export default async function Page({ params }: TransparencyPageProps) {
+	const paymentCalculator = await PaymentStatsCalculator.build(firestoreAdmin, 'CHF');
+	const paymentStats = paymentCalculator.allStats();
+
+	return (
+		<BaseContainer className="flex flex-col space-y-2 py-8">
+			<Typography size="xl" weight="bold">
+				Total payments amount: {paymentStats.totalPaymentsAmount.toFixed(2)}
+			</Typography>
+			<Typography size="xl" weight="bold">
+				Total payments count: {paymentStats.totalPaymentsCount}
+			</Typography>
+			<Typography size="xl" weight="bold">
+				Payments by month
+			</Typography>
+			<div className="mt-4 grid grid-cols-3 gap-4">
+				{paymentStats.totalPaymentsByMonth.map((monthlyStat, index) => (
+					<Card key={index} className="p-4">
+						<Typography size="lg" weight="semibold">
+							{monthlyStat.month}
+						</Typography>
+						<Typography>SLE: {monthlyStat.amountSLE}</Typography>
+						<Typography>CHF: {Number(monthlyStat.amount).toFixed(2)}</Typography>
+						<Typography>
+							Exchange Rate: {(Number(monthlyStat.amount) / Number(monthlyStat.amountSLE)).toFixed(6)}
+						</Typography>
+						<Typography>Number of recipients: {monthlyStat.recipientsCount}</Typography>
+					</Card>
+				))}
+			</div>
+		</BaseContainer>
+	);
+}