refactor(general): add all expense types (#817)

admin/src/collections/Expenses.ts

@@ -20,9 +20,13 @@ export const expensesCollection = buildAuditedCollection<Expense>({
 			dataType: 'string',
 			name: 'Type',
 			enumValues: [
+				{ id: ExpenseType.AccountFees, label: 'Account fees' },
+				{ id: ExpenseType.Administrative, label: 'Administrative' },
 				{ id: ExpenseType.DeliveryFees, label: 'Delivery fees' },
 				{ id: ExpenseType.DonationFees, label: 'Donation fees' },
-				{ id: ExpenseType.ExchangeRateFluctuation, label: 'Exchange rate fluctuation' },
+				{ id: ExpenseType.ExchangeRateLoss, label: 'Exchange rate fluctuation' },
+				{ id: ExpenseType.FundraisingAdvertising, label: 'Fundraising and advertising' },
+				{ id: ExpenseType.Staff, label: 'Staff' },
 			],
 			validation: { required: true },
 		},

shared/src/types/expense.ts

@@ -1,9 +1,13 @@
 export const EXPENSES_FIRESTORE_PATH = 'expenses';
 
 export enum ExpenseType {
-	DonationFees = 'donation_fees',
+	AccountFees = 'account_fees',
+	Administrative = 'Administrative',
 	DeliveryFees = 'delivery_fees',
-	ExchangeRateFluctuation = 'exchange_rate_fluctuation',
+	DonationFees = 'donation_fees',
+	ExchangeRateLoss = 'exchange_rate_loss',
+	FundraisingAdvertising = 'FundraisingAdvertising',
+	Staff = 'staff',
 }
 
 export type Expense = {

shared/src/utils/stats/ExpensesStatsCalculator.ts

@@ -8,6 +8,12 @@ type ExpenseStatsEntry = Expense & {
 	amount: number;
 };
 
+export type ExpenseStats = {
+	totalExpensesByYear: { [year: string]: number };
+	totalExpensesByType: { [type: string]: number };
+	totalExpensesByYearAndType: { [year: string]: { [type in ExpenseType]: number } };
+};
+
 export class ExpensesStatsCalculator {
 	private expenses: _.Collection<ExpenseStatsEntry>;
 
@@ -46,10 +52,10 @@ export class ExpensesStatsCalculator {
 			.reduce((a, b) => ({ ...a, ...b }), {});
 	}
 
-	public allStats() {
+	public allStats(): ExpenseStats {
 		return {
-			totalExpensesByYear: this.totalExpensesBy('year'),
-			totalExpensesByType: this.totalExpensesBy('type'),
+			totalExpensesByYear: this.totalExpensesBy('year') as { [year: string]: number },
+			totalExpensesByType: this.totalExpensesBy('type') as { [type in ExpenseType]: number },
 			totalExpensesByYearAndType: this.totalExpensesByYearAndType(),
 		};
 	}

website/src/app/[lang]/[region]/(website)/transparency/finances/[currency]/page.tsx

@@ -7,7 +7,7 @@ import {
 	ContributionStats,
 	ContributionStatsCalculator,
 } from '@socialincome/shared/src/utils/stats/ContributionStatsCalculator';
-import { ExpensesStatsCalculator } from '@socialincome/shared/src/utils/stats/ExpensesStatsCalculator';
+import { ExpenseStats, ExpensesStatsCalculator } from '@socialincome/shared/src/utils/stats/ExpensesStatsCalculator';
 import { PaymentStats, PaymentStatsCalculator } from '@socialincome/shared/src/utils/stats/PaymentStatsCalculator';
 import { Section1 } from './section-1';
 import { Section2 } from './section-2';
@@ -29,6 +29,7 @@ export type SectionProps = {
 	params: DefaultParams & { currency: string };
 	contributionStats: ContributionStats;
 	paymentStats: PaymentStats;
+	expenseStats: ExpenseStats;
 	costs: {
 		transaction: number;
 		delivery: number;
@@ -50,9 +51,8 @@ export default async function Page({ params }: TransparencyPageProps) {
 		return { contributionStats, expensesStats, paymentStats };
 	};
 	const currency = params.currency.toUpperCase() as WebsiteCurrency;
-	const { contributionStats, expensesStats, paymentStats } = await getStats(currency);
-
-	console.info(JSON.stringify(expensesStats, null, 2));
+	const { contributionStats, expensesStats: expenseStats, paymentStats } = await getStats(currency);
+	console.info(JSON.stringify(expenseStats, null, 2));
 
 	// TODO: Calculate these costs dynamically
 	const costs = {
@@ -66,10 +66,34 @@ export default async function Page({ params }: TransparencyPageProps) {
 	return (
 		<div className="flex flex-col space-y-16 py-8">
 			<CurrencyRedirect currency={currency} />
-			<Section1 params={params} contributionStats={contributionStats} paymentStats={paymentStats} costs={costs} />
-			<Section2 params={params} contributionStats={contributionStats} paymentStats={paymentStats} costs={costs} />
-			<Section3 params={params} contributionStats={contributionStats} paymentStats={paymentStats} costs={costs} />
-			<Section4 params={params} contributionStats={contributionStats} paymentStats={paymentStats} costs={costs} />
+			<Section1
+				params={params}
+				contributionStats={contributionStats}
+				paymentStats={paymentStats}
+				costs={costs}
+				expenseStats={expenseStats}
+			/>
+			<Section2
+				params={params}
+				contributionStats={contributionStats}
+				paymentStats={paymentStats}
+				costs={costs}
+				expenseStats={expenseStats}
+			/>
+			<Section3
+				params={params}
+				contributionStats={contributionStats}
+				paymentStats={paymentStats}
+				costs={costs}
+				expenseStats={expenseStats}
+			/>
+			<Section4
+				params={params}
+				contributionStats={contributionStats}
+				paymentStats={paymentStats}
+				costs={costs}
+				expenseStats={expenseStats}
+			/>
 		</div>
 	);
 }

website/src/app/[lang]/[region]/(website)/transparency/finances/[currency]/section-3-cards.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { ExpenseStats } from '@socialincome/shared/src/utils/stats/ExpensesStatsCalculator';
 import { Button, Card, CardContent, Typography } from '@socialincome/ui';
 import { Children, PropsWithChildren, useState } from 'react';
 
@@ -16,10 +17,12 @@ type CountryCardProps = {
 		country: string;
 		total: string;
 	};
+	expenseStats: ExpenseStats; // TODO: remove again
 };
 
 /* eslint-disable @next/next/no-img-element */
-export function CountryCard({ country, translations }: CountryCardProps) {
+export function CountryCard({ country, translations, expenseStats }: CountryCardProps) {
+	console.log(expenseStats);
 	return (
 		<li>
 			<Card>

website/src/app/[lang]/[region]/(website)/transparency/finances/[currency]/section-3.tsx

@@ -4,7 +4,7 @@ import { Typography } from '@socialincome/ui';
 import { SectionProps } from './page';
 import { CountryCard, CountryCardList } from './section-3-cards';
 
-export async function Section3({ params, contributionStats }: SectionProps) {
+export async function Section3({ params, contributionStats, expenseStats }: SectionProps) {
 	const translator = await Translator.getInstance({
 		language: params.lang,
 		namespaces: ['countries', 'website-finances'],
@@ -40,6 +40,7 @@ export async function Section3({ params, contributionStats }: SectionProps) {
 									},
 								}),
 							}}
+							expenseStats={expenseStats}
 						/>
 					))}
 			</CountryCardList>