Add splitmode and shares to expenses

package-lock.json

@@ -34,6 +34,7 @@
         "react-hook-form": "^7.47.0",
         "tailwind-merge": "^1.14.0",
         "tailwindcss-animate": "^1.0.7",
+        "ts-pattern": "^5.0.6",
         "uuid": "^9.0.1",
         "zod": "^3.22.4"
       },
@@ -5749,6 +5750,11 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "license": "Apache-2.0"
     },
+    "node_modules/ts-pattern": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.0.6.tgz",
+      "integrity": "sha512-Y+jOjihlFriWzcBjncPCf2/am+Hgz7LtsWs77pWg5vQQKLQj07oNrJryo/wK2G0ndNaoVn2ownFMeoeAuReu3Q=="
+    },
     "node_modules/tsconfig-paths": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",

package.json

@@ -35,6 +35,7 @@
     "react-hook-form": "^7.47.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
+    "ts-pattern": "^5.0.6",
     "uuid": "^9.0.1",
     "zod": "^3.22.4"
   },

prisma/migrations/20231215203936_add_shares_in_expenses/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "ExpensePaidFor" ADD COLUMN     "shares" INTEGER NOT NULL DEFAULT 1;

prisma/migrations/20231215213409_add_split_mode/migration.sql

@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "SplitMode" AS ENUM ('EVENLY', 'BY_SHARES', 'BY_PERCENTAGE', 'BY_AMOUNT');
+
+-- AlterTable
+ALTER TABLE "Expense" ADD COLUMN     "splitMode" "SplitMode" NOT NULL DEFAULT 'EVENLY';

prisma/schema.prisma

@@ -39,14 +39,23 @@ model Expense {
   paidFor         ExpensePaidFor[]
   groupId         String
   isReimbursement Boolean          @default(false)
+  splitMode       SplitMode        @default(EVENLY)
   createdAt       DateTime         @default(now())
 }
 
+enum SplitMode {
+  EVENLY
+  BY_SHARES
+  BY_PERCENTAGE
+  BY_AMOUNT
+}
+
 model ExpensePaidFor {
   expense       Expense     @relation(fields: [expenseId], references: [id], onDelete: Cascade)
   participant   Participant @relation(fields: [participantId], references: [id], onDelete: Cascade)
   expenseId     String
   participantId String
+  shares        Int         @default(1)
 
   @@id([expenseId, participantId])
 }

src/components/expense-form.tsx

@@ -32,6 +32,7 @@ import { ExpenseFormValues, expenseFormSchema } from '@/lib/schemas'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useSearchParams } from 'next/navigation'
 import { useForm } from 'react-hook-form'
+import { match } from 'ts-pattern'
 
 export type Props = {
   group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
@@ -50,7 +51,11 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
           title: expense.title,
           amount: String(expense.amount / 100) as unknown as number, // hack
           paidBy: expense.paidById,
-          paidFor: expense.paidFor.map(({ participantId }) => participantId),
+          paidFor: expense.paidFor.map(({ participantId, shares }) => ({
+            participant: participantId,
+            shares,
+          })),
+          splitMode: expense.splitMode,
           isReimbursement: expense.isReimbursement,
         }
       : searchParams.get('reimbursement')
@@ -60,7 +65,11 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
             (Number(searchParams.get('amount')) || 0) / 100,
           ) as unknown as number, // hack
           paidBy: searchParams.get('from') ?? undefined,
-          paidFor: [searchParams.get('to') ?? undefined],
+          paidFor: [
+            searchParams.get('to')
+              ? { participant: searchParams.get('to')!, shares: 1 }
+              : undefined,
+          ],
           isReimbursement: true,
         }
       : { title: '', amount: 0, paidFor: [], isReimbursement: false },
@@ -130,7 +139,7 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
               control={form.control}
               name="amount"
               render={({ field }) => (
-                <FormItem className="order-2 sm:order-3">
+                <FormItem className="order-3 sm:order-4">
                   <FormLabel>Amount</FormLabel>
                   <div className="flex items-baseline gap-2">
                     <span>{group.currency}</span>
@@ -173,6 +182,41 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
               name="paidFor"
               render={() => (
                 <FormItem className="order-5">
+                  <FormField
+                    control={form.control}
+                    name="splitMode"
+                    render={({ field }) => (
+                      <FormItem className="order-2 sm:order-3 mb-4">
+                        <FormLabel>Split mode</FormLabel>
+                        <FormControl>
+                          <Select
+                            onValueChange={field.onChange}
+                            defaultValue={field.value}
+                          >
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="EVENLY">Evenly</SelectItem>
+                              <SelectItem value="BY_SHARES">
+                                Unevenly – By shares
+                              </SelectItem>
+                              <SelectItem value="BY_PERCENTAGE">
+                                Unevenly – By percentage
+                              </SelectItem>
+                              <SelectItem value="BY_AMOUNT">
+                                Unevenly – By amount
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormDescription>
+                          Select how to split the expense.
+                        </FormDescription>
+                      </FormItem>
+                    )}
+                  />
+
                   <div className="mb-4">
                     <FormLabel>
                       Paid for
@@ -184,10 +228,13 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
                           const paidFor = form.getValues().paidFor
                           const allSelected =
                             paidFor.length === group.participants.length
-                          const newPairFor = allSelected
+                          const newPaidFor = allSelected
                             ? []
-                            : group.participants.map((p) => p.id)
+                            : group.participants.map((p) => ({
-                          form.setValue('paidFor', newPairFor, {
+                                participant: p.id,
+                                shares: 1,
+                              }))
+                          form.setValue('paidFor', newPaidFor, {
                             shouldDirty: true,
                             shouldTouch: true,
                             shouldValidate: true,
@@ -213,28 +260,80 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
                       name="paidFor"
                       render={({ field }) => {
                         return (
-                          <FormItem
+                          <div className="flex items-center">
-                            key={id}
+                            <FormItem
-                            className="flex flex-row items-start space-x-3 space-y-0"
+                              key={id}
-                          >
+                              className="flex-1 flex flex-row items-start space-x-3 space-y-0"
-                            <FormControl>
+                            >
-                              <Checkbox
+                              <FormControl>
-                                checked={field.value?.includes(id)}
+                                <Checkbox
-                                onCheckedChange={(checked) => {
+                                  checked={field.value?.some(
-                                  return checked
+                                    ({ participant }) => participant === id,
-                                    ? field.onChange([...field.value, id])
+                                  )}
-                                    : field.onChange(
+                                  onCheckedChange={(checked) => {
-                                        field.value?.filter(
+                                    return checked
-                                          (value) => value !== id,
+                                      ? field.onChange([
-                                        ),
+                                          ...field.value,
-                                      )
+                                          { participant: id, shares: 1 },
-                                }}
+                                        ])
-                              />
+                                      : field.onChange(
-                            </FormControl>
+                                          field.value?.filter(
-                            <FormLabel className="text-sm font-normal">
+                                            (value) => value.participant !== id,
-                              {name}
+                                          ),
-                            </FormLabel>
+                                        )
-                          </FormItem>
+                                  }}
+                                />
+                              </FormControl>
+                              <FormLabel className="text-sm font-normal">
+                                {name}
+                              </FormLabel>
+                            </FormItem>
+                            {field.value?.some(
+                              ({ participant }) => participant === id,
+                            ) &&
+                              form.getValues().splitMode !== 'EVENLY' && (
+                                <div className="flex gap-1 items-baseline">
+                                  <FormControl>
+                                    <Input
+                                      className="w-[100px]"
+                                      type="number"
+                                      value={
+                                        field.value?.find(
+                                          ({ participant }) =>
+                                            participant === id,
+                                        )?.shares
+                                      }
+                                      onChange={(event) =>
+                                        field.onChange(
+                                          field.value.map((p) =>
+                                            p.participant === id
+                                              ? {
+                                                  participant: id,
+                                                  shares: Number(
+                                                    event.target.value,
+                                                  ),
+                                                }
+                                              : p,
+                                          ),
+                                        )
+                                      }
+                                      inputMode="numeric"
+                                      step={1}
+                                    />
+                                  </FormControl>
+                                  <span className="text-sm">
+                                    {match(form.getValues().splitMode)
+                                      .with('EVENLY', () => <></>)
+                                      .with('BY_SHARES', () => <>share(s)</>)
+                                      .with('BY_PERCENTAGE', () => <>%</>)
+                                      .with('BY_AMOUNT', () => (
+                                        <>{group.currency}</>
+                                      ))
+                                      .exhaustive()}
+                                  </span>
+                                </div>
+                              )}
+                          </div>
                         )
                       }}
                     />

src/lib/api.ts

@@ -36,7 +36,7 @@ export async function createExpense(
 
   for (const participant of [
     expenseFormValues.paidBy,
-    ...expenseFormValues.paidFor,
+    ...expenseFormValues.paidFor.map((p) => p.participant),
   ]) {
     if (!group.participants.some((p) => p.id === participant))
       throw new Error(`Invalid participant ID: ${participant}`)
@@ -50,10 +50,12 @@ export async function createExpense(
       amount: expenseFormValues.amount,
       title: expenseFormValues.title,
       paidById: expenseFormValues.paidBy,
+      splitMode: expenseFormValues.splitMode,
       paidFor: {
         createMany: {
           data: expenseFormValues.paidFor.map((paidFor) => ({
-            participantId: paidFor,
+            participantId: paidFor.participant,
+            shares: paidFor.shares,
           })),
         },
       },
@@ -84,12 +86,14 @@ export async function getGroupExpensesParticipants(groupId: string) {
 
 export async function getGroups(groupIds: string[]) {
   const prisma = await getPrisma()
-  return (await prisma.group.findMany({
+  return (
-    where: { id: { in: groupIds } },
+    await prisma.group.findMany({
-    include: { _count: { select: { participants: true } } },
+      where: { id: { in: groupIds } },
-  })).map(group => ({
+      include: { _count: { select: { participants: true } } },
+    })
+  ).map((group) => ({
     ...group,
-    createdAt: group.createdAt.toISOString()
+    createdAt: group.createdAt.toISOString(),
   }))
 }
 
@@ -106,7 +110,7 @@ export async function updateExpense(
 
   for (const participant of [
     expenseFormValues.paidBy,
-    ...expenseFormValues.paidFor,
+    ...expenseFormValues.paidFor.map((p) => p.participant),
   ]) {
     if (!group.participants.some((p) => p.id === participant))
       throw new Error(`Invalid participant ID: ${participant}`)
@@ -119,17 +123,34 @@ export async function updateExpense(
       amount: expenseFormValues.amount,
       title: expenseFormValues.title,
       paidById: expenseFormValues.paidBy,
+      splitMode: expenseFormValues.splitMode,
       paidFor: {
-        connectOrCreate: expenseFormValues.paidFor.map((paidFor) => ({
+        create: expenseFormValues.paidFor
+          .filter(
+            (p) =>
+              !existingExpense.paidFor.some(
+                (pp) => pp.participantId === p.participant,
+              ),
+          )
+          .map((paidFor) => ({
+            participantId: paidFor.participant,
+            shares: paidFor.shares,
+          })),
+        update: expenseFormValues.paidFor.map((paidFor) => ({
           where: {
-            expenseId_participantId: { expenseId, participantId: paidFor },
+            expenseId_participantId: {
+              expenseId,
+              participantId: paidFor.participant,
+            },
+          },
+          data: {
+            shares: paidFor.shares,
           },
-          create: { participantId: paidFor },
         })),
         deleteMany: existingExpense.paidFor.filter(
           (paidFor) =>
             !expenseFormValues.paidFor.some(
-              (pf) => pf === paidFor.participantId,
+              (pf) => pf.participant === paidFor.participantId,
             ),
         ),
       },

src/lib/schemas.ts

@@ -1,3 +1,4 @@
+import { SplitMode } from '@prisma/client'
 import * as z from 'zod'
 
 export const groupFormSchema = z
@@ -65,8 +66,13 @@ export const expenseFormSchema = z.object({
     ),
   paidBy: z.string({ required_error: 'You must select a participant.' }),
   paidFor: z
-    .array(z.string())
+    .array(z.object({ participant: z.string(), shares: z.number().int() }))
     .min(1, 'The expense must be paid for at least one participant.'),
+  splitMode: z
+    .enum<SplitMode, [SplitMode, ...SplitMode[]]>(
+      Object.values(SplitMode) as any,
+    )
+    .default('EVENLY'),
   isReimbursement: z.boolean(),
 })