From 2f991e680bea37d1f97ea77df2343200f3899817 Mon Sep 17 00:00:00 2001 From: Anurag Date: Wed, 28 Feb 2024 21:13:25 +0530 Subject: [PATCH] feat: initialise a new totals tab with basic UI (#94) * feat: initialise a new totals tab with basic UI * fix: update group tabs and add stats page * fix: styling within the new elements * Prettier * Display active user expenses only if active user is set --------- Co-authored-by: Sebastien Castiel --- src/app/groups/[groupId]/group-tabs.tsx | 1 + src/app/groups/[groupId]/stats/page.tsx | 49 ++++++++++++++ .../[groupId]/stats/totals-group-spending.tsx | 17 +++++ .../[groupId]/stats/totals-your-share.tsx | 34 ++++++++++ .../[groupId]/stats/totals-your-spending.tsx | 30 +++++++++ src/app/groups/[groupId]/stats/totals.tsx | 34 ++++++++++ src/lib/hooks.ts | 14 ++++ src/lib/totals.ts | 66 +++++++++++++++++++ 8 files changed, 245 insertions(+) create mode 100644 src/app/groups/[groupId]/stats/page.tsx create mode 100644 src/app/groups/[groupId]/stats/totals-group-spending.tsx create mode 100644 src/app/groups/[groupId]/stats/totals-your-share.tsx create mode 100644 src/app/groups/[groupId]/stats/totals-your-spending.tsx create mode 100644 src/app/groups/[groupId]/stats/totals.tsx create mode 100644 src/lib/totals.ts diff --git a/src/app/groups/[groupId]/group-tabs.tsx b/src/app/groups/[groupId]/group-tabs.tsx index bd603cc..d7a0876 100644 --- a/src/app/groups/[groupId]/group-tabs.tsx +++ b/src/app/groups/[groupId]/group-tabs.tsx @@ -23,6 +23,7 @@ export function GroupTabs({ groupId }: Props) { Expenses Balances + Stats Settings diff --git a/src/app/groups/[groupId]/stats/page.tsx b/src/app/groups/[groupId]/stats/page.tsx new file mode 100644 index 0000000..eb7fa9e --- /dev/null +++ b/src/app/groups/[groupId]/stats/page.tsx @@ -0,0 +1,49 @@ +import { cached } from '@/app/cached-functions' +import { Totals } from '@/app/groups/[groupId]/stats/totals' +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from '@/components/ui/card' +import { getGroupExpenses } from '@/lib/api' +import { getTotalGroupSpending } from '@/lib/totals' +import { Metadata } from 'next' +import { notFound } from 'next/navigation' + +export const metadata: Metadata = { + title: 'Totals', +} + +export default async function TotalsPage({ + params: { groupId }, +}: { + params: { groupId: string } +}) { + const group = await cached.getGroup(groupId) + if (!group) notFound() + + const expenses = await getGroupExpenses(groupId) + const totalGroupSpendings = getTotalGroupSpending(expenses) + + return ( + <> + + + Totals + + Spending summary of the entire group. + + + + + + + + ) +} diff --git a/src/app/groups/[groupId]/stats/totals-group-spending.tsx b/src/app/groups/[groupId]/stats/totals-group-spending.tsx new file mode 100644 index 0000000..3c0c96d --- /dev/null +++ b/src/app/groups/[groupId]/stats/totals-group-spending.tsx @@ -0,0 +1,17 @@ +import { formatCurrency } from '@/lib/utils' + +type Props = { + totalGroupSpendings: number + currency: string +} + +export function TotalsGroupSpending({ totalGroupSpendings, currency }: Props) { + return ( +
+
Total group spendings
+
+ {formatCurrency(currency, totalGroupSpendings)} +
+
+ ) +} diff --git a/src/app/groups/[groupId]/stats/totals-your-share.tsx b/src/app/groups/[groupId]/stats/totals-your-share.tsx new file mode 100644 index 0000000..3218d6f --- /dev/null +++ b/src/app/groups/[groupId]/stats/totals-your-share.tsx @@ -0,0 +1,34 @@ +'use client' +import { getGroup, getGroupExpenses } from '@/lib/api' +import { getTotalActiveUserShare } from '@/lib/totals' +import { formatCurrency } from '@/lib/utils' +import { useEffect, useState } from 'react' + +type Props = { + group: NonNullable>> + expenses: NonNullable>> +} + +export function TotalsYourShare({ group, expenses }: Props) { + const [activeUser, setActiveUser] = useState('') + + useEffect(() => { + const activeUser = localStorage.getItem(`${group.id}-activeUser`) + if (activeUser) setActiveUser(activeUser) + }, [group, expenses]) + + const totalActiveUserShare = + activeUser === '' || activeUser === 'None' + ? 0 + : getTotalActiveUserShare(activeUser, expenses) + const currency = group.currency + + return ( +
+
Your total share
+
+ {formatCurrency(currency, totalActiveUserShare)} +
+
+ ) +} diff --git a/src/app/groups/[groupId]/stats/totals-your-spending.tsx b/src/app/groups/[groupId]/stats/totals-your-spending.tsx new file mode 100644 index 0000000..f621a41 --- /dev/null +++ b/src/app/groups/[groupId]/stats/totals-your-spending.tsx @@ -0,0 +1,30 @@ +'use client' +import { getGroup, getGroupExpenses } from '@/lib/api' +import { useActiveUser } from '@/lib/hooks' +import { getTotalActiveUserPaidFor } from '@/lib/totals' +import { formatCurrency } from '@/lib/utils' + +type Props = { + group: NonNullable>> + expenses: NonNullable>> +} + +export function TotalsYourSpendings({ group, expenses }: Props) { + const activeUser = useActiveUser(group.id) + + const totalYourSpendings = + activeUser === '' || activeUser === 'None' + ? 0 + : getTotalActiveUserPaidFor(activeUser, expenses) + const currency = group.currency + + return ( +
+
Total you paid for
+ +
+ {formatCurrency(currency, totalYourSpendings)} +
+
+ ) +} diff --git a/src/app/groups/[groupId]/stats/totals.tsx b/src/app/groups/[groupId]/stats/totals.tsx new file mode 100644 index 0000000..aa32037 --- /dev/null +++ b/src/app/groups/[groupId]/stats/totals.tsx @@ -0,0 +1,34 @@ +'use client' +import { TotalsGroupSpending } from '@/app/groups/[groupId]/stats/totals-group-spending' +import { TotalsYourShare } from '@/app/groups/[groupId]/stats/totals-your-share' +import { TotalsYourSpendings } from '@/app/groups/[groupId]/stats/totals-your-spending' +import { getGroup, getGroupExpenses } from '@/lib/api' +import { useActiveUser } from '@/lib/hooks' + +export function Totals({ + group, + expenses, + totalGroupSpendings, +}: { + group: NonNullable>> + expenses: NonNullable>> + totalGroupSpendings: number +}) { + const activeUser = useActiveUser(group.id) + console.log('activeUser', activeUser) + + return ( + <> + + {activeUser && activeUser !== 'None' && ( + <> + + + + )} + + ) +} diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts index 4d3ad08..490eccf 100644 --- a/src/lib/hooks.ts +++ b/src/lib/hooks.ts @@ -48,3 +48,17 @@ export function useBaseUrl() { }, []) return baseUrl } + +/** + * @returns The active user, or `null` until it is fetched from local storage + */ +export function useActiveUser(groupId: string) { + const [activeUser, setActiveUser] = useState(null) + + useEffect(() => { + const activeUser = localStorage.getItem(`${groupId}-activeUser`) + if (activeUser) setActiveUser(activeUser) + }, [groupId]) + + return activeUser +} diff --git a/src/lib/totals.ts b/src/lib/totals.ts new file mode 100644 index 0000000..797318c --- /dev/null +++ b/src/lib/totals.ts @@ -0,0 +1,66 @@ +import { getGroupExpenses } from '@/lib/api' + +export function getTotalGroupSpending( + expenses: NonNullable>>, +): number { + return expenses.reduce( + (total, expense) => + !expense.isReimbursement ? total + expense.amount : total + 0, + 0, + ) +} + +export function getTotalActiveUserPaidFor( + activeUserId: string | null, + expenses: NonNullable>>, +): number { + return expenses.reduce( + (total, expense) => + expense.paidBy.id === activeUserId ? total + expense.amount : total + 0, + 0, + ) +} + +export function getTotalActiveUserShare( + activeUserId: string | null, + expenses: NonNullable>>, +): number { + let total = 0 + + expenses.forEach((expense) => { + const paidFors = expense.paidFor + const userPaidFor = paidFors.find( + (paidFor) => paidFor.participantId === activeUserId, + ) + + if (!userPaidFor) { + // If the active user is not involved in the expense, skip it + return + } + + switch (expense.splitMode) { + case 'EVENLY': + // Divide the total expense evenly among all participants + total += expense.amount / paidFors.length + break + case 'BY_AMOUNT': + // Directly add the user's share if the split mode is BY_AMOUNT + total += userPaidFor.shares + break + case 'BY_PERCENTAGE': + // Calculate the user's share based on their percentage of the total expense + total += (expense.amount * userPaidFor.shares) / 10000 // Assuming shares are out of 10000 for percentage + break + case 'BY_SHARES': + // Calculate the user's share based on their shares relative to the total shares + const totalShares = paidFors.reduce( + (sum, paidFor) => sum + paidFor.shares, + 0, + ) + total += (expense.amount * userPaidFor.shares) / totalShares + break + } + }) + + return parseFloat(total.toFixed(2)) +}