Reimbursements

prisma/migrations/20231207005126_reimbursement/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Expense" ADD COLUMN     "isReimbursement" BOOLEAN NOT NULL DEFAULT false;

prisma/schema.prisma

@@ -29,14 +29,15 @@ model Participant {
 }
 
 model Expense {
-  id       String           @id
+  id              String           @id
-  group    Group            @relation(fields: [groupId], references: [id])
+  group           Group            @relation(fields: [groupId], references: [id])
-  title    String
+  title           String
-  amount   Int
+  amount          Int
-  paidBy   Participant      @relation(fields: [paidById], references: [id])
+  paidBy          Participant      @relation(fields: [paidById], references: [id])
-  paidById String
+  paidById        String
-  paidFor  ExpensePaidFor[]
+  paidFor         ExpensePaidFor[]
-  groupId  String
+  groupId         String
+  isReimbursement Boolean          @default(false)
 }
 
 model ExpensePaidFor {

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)}

src/components/expense-form.tsx

@@ -29,6 +29,7 @@ import {
 import { getExpense, getGroup } from '@/lib/api'
 import { ExpenseFormValues, expenseFormSchema } from '@/lib/schemas'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useSearchParams } from 'next/navigation'
 import { useForm } from 'react-hook-form'
 
 export type Props = {
@@ -40,6 +41,7 @@ export type Props = {
 
 export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
   const isCreate = expense === undefined
+  const searchParams = useSearchParams()
   const form = useForm<ExpenseFormValues>({
     resolver: zodResolver(expenseFormSchema),
     defaultValues: expense
@@ -48,8 +50,17 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
           amount: expense.amount,
           paidBy: expense.paidById,
           paidFor: expense.paidFor.map(({ participantId }) => participantId),
+          isReimbursement: expense.isReimbursement,
         }
-      : { title: '', amount: 0, paidFor: [] },
+      : searchParams.get('reimbursement')
+      ? {
+          title: 'Reimbursement',
+          amount: Number(searchParams.get('amount')) || 0,
+          paidBy: searchParams.get('from') ?? undefined,
+          paidFor: [searchParams.get('to') ?? undefined],
+          isReimbursement: true,
+        }
+      : { title: '', amount: 0, paidFor: [], isReimbursement: false },
   })
 
   return (
@@ -131,8 +142,25 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
                       />
                     </FormControl>
                   </div>
-                  <FormDescription>Enter the expense amount.</FormDescription>
                   <FormMessage />
+
+                  <FormField
+                    control={form.control}
+                    name="isReimbursement"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row gap-2 items-center space-y-0 pt-2">
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <div>
+                          <FormLabel>This is a reimbursement</FormLabel>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
                 </FormItem>
               )}
             />
@@ -141,7 +169,7 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
               control={form.control}
               name="paidFor"
               render={() => (
-                <FormItem className="order-4">
+                <FormItem className="order-5">
                   <div className="mb-4">
                     <FormLabel>Paid for</FormLabel>
                     <FormDescription>

src/lib/api.ts

@@ -53,6 +53,7 @@ export async function createExpense(
           })),
         },
       },
+      isReimbursement: expenseFormValues.isReimbursement,
     },
   })
 }
@@ -105,6 +106,7 @@ export async function updateExpense(
             ),
         ),
       },
+      isReimbursement: expenseFormValues.isReimbursement,
     },
   })
 }

src/lib/balances.ts

@@ -54,7 +54,6 @@ export function getSuggestedReimbursements(
     ([participantId, { total }]) => ({ participantId, total }),
   )
   balancesArray.sort((b1, b2) => b2.total - b1.total)
-  console.log(balancesArray)
   const reimbursements: Reimbursement[] = []
   while (balancesArray.length > 1) {
     const first = balancesArray[0]

src/lib/schemas.ts

@@ -49,6 +49,7 @@ export const expenseFormSchema = z.object({
   paidFor: z
     .array(z.string())
     .min(1, 'The expense must be paid for at least 1 participant.'),
+  isReimbursement: z.boolean(),
 })
 
 export type ExpenseFormValues = z.infer<typeof expenseFormSchema>