Reimbursements

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

@@ -22,7 +22,6 @@ export default async function GroupPage({
   const expenses = await getGroupExpenses(groupId)
   const balances = getBalances(expenses)
   const reimbursements = getSuggestedReimbursements(balances)
-  console.log(reimbursements)
 
   return (
     <>
@@ -54,6 +53,7 @@ export default async function GroupPage({
             reimbursements={reimbursements}
             participants={group.participants}
             currency={group.currency}
+            groupId={groupId}
           />
         </CardContent>
       </Card>

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

@@ -16,6 +16,7 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { getGroup, getGroupExpenses } from '@/lib/api'
+import { cn } from '@/lib/utils'
 import { ChevronRight, Plus } from 'lucide-react'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
@@ -62,7 +63,10 @@ export default async function GroupExpensesPage({
             </TableHeader>
             <TableBody>
               {expenses.map((expense) => (
-                <TableRow key={expense.id}>
+                <TableRow
+                  key={expense.id}
+                  className={cn(expense.isReimbursement && 'italic')}
+                >
                   <TableCell>{expense.title}</TableCell>
                   <TableCell>
                     <Badge variant="secondary">

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

@@ -1,16 +1,20 @@
+import { Button } from '@/components/ui/button'
 import { Reimbursement } from '@/lib/balances'
 import { Participant } from '@prisma/client'
+import Link from 'next/link'
 
 type Props = {
   reimbursements: Reimbursement[]
   participants: Participant[]
   currency: string
+  groupId: string
 }
 
 export function ReimbursementList({
   reimbursements,
   participants,
   currency,
+  groupId,
 }: Props) {
   const getParticipant = (id: string) => participants.find((p) => p.id === id)
   return (
@@ -20,6 +24,13 @@ export function ReimbursementList({
           <div>
             <strong>{getParticipant(reimbursement.from)?.name}</strong> owes{' '}
             <strong>{getParticipant(reimbursement.to)?.name}</strong>
+            <Button variant="link" asChild className="-my-3">
+              <Link
+                href={`/groups/${groupId}/expenses/create?reimbursement=yes&from=${reimbursement.from}&to=${reimbursement.to}&amount=${reimbursement.amount}`}
+              >
+                Mark as paid
+              </Link>
+            </Button>
           </div>
           <div>
             {currency} {reimbursement.amount.toFixed(2)}