Add active user balance and reimbursements

src/app/groups/[groupId]/expenses/active-user-balance.tsx

@@ -1,7 +1,8 @@
 'use client'
 import { Money } from '@/components/money'
-import { getBalances } from '@/lib/balances'
+import { Reimbursement, getBalances } from '@/lib/balances'
 import { useActiveUser } from '@/lib/hooks'
+import { Participant } from '@prisma/client'
 import { useTranslations } from 'next-intl'
 
 type Props = {
@@ -43,3 +44,82 @@ export function ActiveUserBalance({ groupId, currency, expense }: Props) {
   }
   return <div className="text-xs text-muted-foreground">{fmtBalance}</div>
 }
+
+// Get all the suggested reimbursements for the current user
+export function ActiveUserReimbursementList({
+  reimbursements,
+  participants,
+  currency,
+  groupId,
+}: {
+  reimbursements: Reimbursement[]
+  participants: Participant[]
+  currency: string
+  groupId: string
+}) {
+  const activeUserId = useActiveUser(groupId)
+  if (activeUserId === null || activeUserId === '' || activeUserId === 'None') {
+    return null
+  }
+  if (reimbursements.length === 0) {
+    return null
+  }
+
+  let total = 0
+  for (const reimbursement of reimbursements) {
+    if (
+      reimbursement.from !== activeUserId &&
+      reimbursement.to !== activeUserId
+    ) {
+      continue
+    }
+    let sign = reimbursement.from === activeUserId ? -1 : 1
+    total += sign * reimbursement.amount
+  }
+
+  if (total === 0) {
+    return null
+  }
+
+  const getParticipant = (id: string) =>
+    participants.find((p) => p.id === id) || { name: 'Unknown' }
+
+  const currentUser = <>({getParticipant(activeUserId).name})</>
+
+  const userReimbursements = reimbursements
+    .filter((r) => r.from === activeUserId || r.to === activeUserId)
+    .map((r) => {
+      const from = getParticipant(r.from)
+      const to = getParticipant(r.to)
+      const amount = r.amount
+      if (r.from === activeUserId) {
+        return (
+          <div key={r.from + r.to} className="text-sm">
+            You owe {to.name}{' '}
+            <Money
+              currency={currency}
+              amount={amount}
+              bold
+              colored
+              negative={true}
+            />
+          </div>
+        )
+      } else {
+        return (
+          <div key={r.from + r.to} className="text-sm">
+            {from.name} owes you{' '}
+            <Money currency={currency} amount={amount} bold colored />
+          </div>
+        )
+      }
+    })
+
+  return (
+    <div className="text-sm">
+      <strong>Your balance {currentUser}:</strong>{' '}
+      <Money currency={currency} amount={total} bold colored />
+      <div className="mt-2">{userReimbursements}</div>
+    </div>
+  )
+}

src/app/groups/[groupId]/expenses/page.tsx

@@ -1,4 +1,5 @@
 import { cached } from '@/app/cached-functions'
+import { ActiveUserReimbursementList } from '@/app/groups/[groupId]/expenses/active-user-balance'
 import { ActiveUserModal } from '@/app/groups/[groupId]/expenses/active-user-modal'
 import { CreateFromReceiptButton } from '@/app/groups/[groupId]/expenses/create-from-receipt-button'
 import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
@@ -16,6 +17,7 @@ import {
   getGroupExpenseCount,
   getGroupExpenses,
 } from '@/lib/api'
+import { getBalances, getSuggestedReimbursements } from '@/lib/balances'
 import { env } from '@/lib/env'
 import { Download, Plus } from 'lucide-react'
 import { Metadata } from 'next'
@@ -41,13 +43,23 @@ export default async function GroupExpensesPage({
 
   const categories = await getCategories()
 
+  const expenses = await getGroupExpenses(group.id)
+  const balances = getBalances(expenses)
+  const reimbursements = getSuggestedReimbursements(balances)
+
   return (
     <>
       <Card className="mb-4 rounded-none -mx-4 border-x-0 sm:border-x sm:rounded-lg sm:mx-0">
         <div className="flex flex-1">
           <CardHeader className="flex-1 p-4 sm:p-6">
             <CardTitle>{t('title')}</CardTitle>
             <CardDescription>{t('description')}</CardDescription>
+            <ActiveUserReimbursementList
+              reimbursements={reimbursements}
+              groupId={groupId}
+              participants={group.participants}
+              currency={group.currency}
+            />
           </CardHeader>
           <CardHeader className="p-4 sm:p-6 flex flex-row space-y-0 gap-2">
             <Button variant="secondary" size="icon" asChild>

src/components/money.tsx

@@ -7,19 +7,22 @@ type Props = {
   amount: number
   bold?: boolean
   colored?: boolean
+  negative?: boolean
 }
 
 export function Money({
   currency,
   amount,
   bold = false,
   colored = false,
+  negative = false,
 }: Props) {
   const locale = useLocale()
   return (
     <span
       className={cn(
-        colored && amount <= 1
+        // For reimbursements, we want to be able to force the color
+        colored && (amount <= 1 || negative)
           ? 'text-red-600'
           : colored && amount >= 1
           ? 'text-green-600'