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 <sebastien@castiel.me>

src/app/groups/[groupId]/group-tabs.tsx

@@ -23,6 +23,7 @@ export function GroupTabs({ groupId }: Props) {
       <TabsList>
         <TabsTrigger value="expenses">Expenses</TabsTrigger>
         <TabsTrigger value="balances">Balances</TabsTrigger>
+        <TabsTrigger value="stats">Stats</TabsTrigger>
         <TabsTrigger value="edit">Settings</TabsTrigger>
       </TabsList>
     </Tabs>

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 (
+    <>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Totals</CardTitle>
+          <CardDescription>
+            Spending summary of the entire group.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col space-y-4">
+          <Totals
+            group={group}
+            expenses={expenses}
+            totalGroupSpendings={totalGroupSpendings}
+          />
+        </CardContent>
+      </Card>
+    </>
+  )
+}

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 (
+    <div>
+      <div className="text-muted-foreground">Total group spendings</div>
+      <div className="text-lg">
+        {formatCurrency(currency, totalGroupSpendings)}
+      </div>
+    </div>
+  )
+}

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<Awaited<ReturnType<typeof getGroup>>>
+  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>
+}
+
+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 (
+    <div>
+      <div className="text-muted-foreground">Your total share</div>
+      <div className="text-lg">
+        {formatCurrency(currency, totalActiveUserShare)}
+      </div>
+    </div>
+  )
+}

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<Awaited<ReturnType<typeof getGroup>>>
+  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>
+}
+
+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 (
+    <div>
+      <div className="text-muted-foreground">Total you paid for</div>
+
+      <div className="text-lg">
+        {formatCurrency(currency, totalYourSpendings)}
+      </div>
+    </div>
+  )
+}

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<Awaited<ReturnType<typeof getGroup>>>
+  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>
+  totalGroupSpendings: number
+}) {
+  const activeUser = useActiveUser(group.id)
+  console.log('activeUser', activeUser)
+
+  return (
+    <>
+      <TotalsGroupSpending
+        totalGroupSpendings={totalGroupSpendings}
+        currency={group.currency}
+      />
+      {activeUser && activeUser !== 'None' && (
+        <>
+          <TotalsYourSpendings group={group} expenses={expenses} />
+          <TotalsYourShare group={group} expenses={expenses} />
+        </>
+      )}
+    </>
+  )
+}

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<string | null>(null)
+
+  useEffect(() => {
+    const activeUser = localStorage.getItem(`${groupId}-activeUser`)
+    if (activeUser) setActiveUser(activeUser)
+  }, [groupId])
+
+  return activeUser
+}

src/lib/totals.ts

@@ -0,0 +1,66 @@
+import { getGroupExpenses } from '@/lib/api'
+
+export function getTotalGroupSpending(
+  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>,
+): number {
+  return expenses.reduce(
+    (total, expense) =>
+      !expense.isReimbursement ? total + expense.amount : total + 0,
+    0,
+  )
+}
+
+export function getTotalActiveUserPaidFor(
+  activeUserId: string | null,
+  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>,
+): number {
+  return expenses.reduce(
+    (total, expense) =>
+      expense.paidBy.id === activeUserId ? total + expense.amount : total + 0,
+    0,
+  )
+}
+
+export function getTotalActiveUserShare(
+  activeUserId: string | null,
+  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>,
+): 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))
+}