Don’t count reimbursements in stats (fixes #118) (#119)

* fix default shares value

* fix default shares value for reimbursements

* prettier

Dockerfile

@@ -10,12 +10,13 @@ COPY ./package.json \
      ./postcss.config.js ./
 COPY ./scripts ./scripts
 COPY ./prisma ./prisma
-COPY ./src ./src
 
 RUN apk add --no-cache openssl && \
     npm ci --ignore-scripts && \
     npx prisma generate
 
+COPY ./src ./src
+
 ENV NEXT_TELEMETRY_DISABLED=1
 
 COPY scripts/build.env .env

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint",
     "check-types": "tsc --noEmit",
     "check-formatting": "prettier -c src",
+    "prettier": "prettier -w src",
     "postinstall": "prisma migrate deploy && prisma generate",
     "build-image": "./scripts/build-image.sh",
     "start-container": "docker compose --env-file container.env up"

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/components/expense-form.tsx

@@ -56,6 +56,17 @@ export type Props = {
   runtimeFeatureFlags: RuntimeFeatureFlags
 }
 
+const enforceCurrencyPattern = (value: string) =>
+  value
+    // replace first comma with #
+    .replace(/[.,]/, '#')
+    // remove all other commas
+    .replace(/[.,]/g, '')
+    // change back # to dot
+    .replace(/#/, '.')
+    // remove all non-numeric and non-dot characters
+    .replace(/[^\d.]/g, '')
+
 export function ExpenseForm({
   group,
   expense,
@@ -103,7 +114,10 @@ export function ExpenseForm({
           paidBy: searchParams.get('from') ?? undefined,
           paidFor: [
             searchParams.get('to')
-              ? { participant: searchParams.get('to')!, shares: 1 }
+              ? {
+                  participant: searchParams.get('to')!,
+                  shares: '1' as unknown as number,
+                }
               : undefined,
           ],
           isReimbursement: true,
@@ -122,7 +136,7 @@ export function ExpenseForm({
           // paid for all, split evenly
           paidFor: group.participants.map(({ id }) => ({
             participant: id,
-            shares: 1,
+            shares: '1' as unknown as number,
           })),
           paidBy: getSelectedPayer(),
           isReimbursement: false,
@@ -210,18 +224,23 @@ export function ExpenseForm({
             <FormField
               control={form.control}
               name="amount"
-              render={({ field }) => (
+              render={({ field: { onChange, ...field } }) => (
                 <FormItem className="sm:order-3">
                   <FormLabel>Amount</FormLabel>
                   <div className="flex items-baseline gap-2">
                     <span>{group.currency}</span>
                     <FormControl>
                       <Input
+                        {...field}
                         className="text-base max-w-[120px]"
-                        type="number"
+                        type="text"
                         inputMode="decimal"
                         step={0.01}
                         placeholder="0.00"
+                        onChange={(event) =>
+                          onChange(enforceCurrencyPattern(event.target.value))
+                        }
+                        onClick={(e) => e.currentTarget.select()}
                         {...field}
                       />
                     </FormControl>
@@ -427,7 +446,7 @@ export function ExpenseForm({
                                               ),
                                             )}
                                             className="text-base w-[80px] -my-2"
-                                            type="number"
+                                            type="text"
                                             disabled={
                                               !field.value?.some(
                                                 ({ participant }) =>
@@ -447,7 +466,9 @@ export function ExpenseForm({
                                                     ? {
                                                         participant: id,
                                                         shares:
-                                                          event.target.value,
+                                                          enforceCurrencyPattern(
+                                                            event.target.value,
+                                                          ),
                                                       }
                                                     : p,
                                                 ),

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/schemas.ts

@@ -51,8 +51,7 @@ export const expenseFormSchema = z
         [
           z.number(),
           z.string().transform((value, ctx) => {
-            const normalizedValue = value.replace(/,/g, '.')
-            const valueAsNumber = Number(normalizedValue)
+            const valueAsNumber = Number(value)
             if (Number.isNaN(valueAsNumber))
               ctx.addIssue({
                 code: z.ZodIssueCode.custom,

src/lib/totals.ts

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