Reimbursements

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

@@ -1,4 +1,5 @@
 import { BalancesList } from '@/app/groups/[groupId]/balances-list'
+import { ReimbursementList } from '@/app/groups/[groupId]/reimbursement-list'
 import {
   Card,
   CardContent,
@@ -7,7 +8,7 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { getGroup, getGroupExpenses } from '@/lib/api'
-import { getBalances } from '@/lib/balances'
+import { getBalances, getSuggestedReimbursements } from '@/lib/balances'
 import { notFound } from 'next/navigation'
 
 export default async function GroupPage({
@@ -20,22 +21,42 @@ export default async function GroupPage({
 
   const expenses = await getGroupExpenses(groupId)
   const balances = getBalances(expenses)
+  const reimbursements = getSuggestedReimbursements(balances)
+  console.log(reimbursements)
 
   return (
-    <Card className="mb-4">
-      <CardHeader>
-        <CardTitle>Balances</CardTitle>
-        <CardDescription>
-          This is the amount that each participant paid or was paid for.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <BalancesList
-          balances={balances}
-          participants={group.participants}
-          currency={group.currency}
-        />
-      </CardContent>
-    </Card>
+    <>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Balances</CardTitle>
+          <CardDescription>
+            This is the amount that each participant paid or was paid for.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <BalancesList
+            balances={balances}
+            participants={group.participants}
+            currency={group.currency}
+          />
+        </CardContent>
+      </Card>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Suggested reimbursements</CardTitle>
+          <CardDescription>
+            Here are suggestions for optimized reimbursements between
+            participants.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <ReimbursementList
+            reimbursements={reimbursements}
+            participants={group.participants}
+            currency={group.currency}
+          />
+        </CardContent>
+      </Card>
+    </>
   )
 }

src/app/groups/[groupId]/reimbursement-list.tsx

@@ -0,0 +1,31 @@
+import { Reimbursement } from '@/lib/balances'
+import { Participant } from '@prisma/client'
+
+type Props = {
+  reimbursements: Reimbursement[]
+  participants: Participant[]
+  currency: string
+}
+
+export function ReimbursementList({
+  reimbursements,
+  participants,
+  currency,
+}: Props) {
+  const getParticipant = (id: string) => participants.find((p) => p.id === id)
+  return (
+    <div className="text-sm">
+      {reimbursements.map((reimbursement, index) => (
+        <div className="border-t p-4 flex justify-between" key={index}>
+          <div>
+            <strong>{getParticipant(reimbursement.from)?.name}</strong> owes{' '}
+            <strong>{getParticipant(reimbursement.to)?.name}</strong>
+          </div>
+          <div>
+            {currency} {reimbursement.amount.toFixed(2)}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}