Split unevenly by amount

package-lock.json

@@ -12,6 +12,7 @@
         "@hookform/resolvers": "^3.3.2",
         "@prisma/client": "5.6.0",
         "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-collapsible": "^1.0.3",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-hover-card": "^1.0.7",
         "@radix-ui/react-icons": "^1.3.0",
@@ -34,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"
       },
@@ -627,6 +629,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
+      "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@@ -5749,6 +5781,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

@@ -13,6 +13,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@prisma/client": "5.6.0",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
@@ -35,6 +36,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

@@ -5,11 +5,16 @@ import { Button } from '@/components/ui/button'
 import {
   Card,
   CardContent,
-  CardFooter,
+  CardDescription,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
 import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
 import {
   Form,
   FormControl,
@@ -29,9 +34,12 @@ import {
 } from '@/components/ui/select'
 import { getExpense, getGroup } from '@/lib/api'
 import { ExpenseFormValues, expenseFormSchema } from '@/lib/schemas'
+import { cn } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { Save, Trash2 } from 'lucide-react'
 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 +58,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: String(shares / 100) as unknown as number,
+          })),
+          splitMode: expense.splitMode,
           isReimbursement: expense.isReimbursement,
         }
       : searchParams.get('reimbursement')
@@ -60,10 +72,20 @@ 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')! }
+              : undefined,
+          ],
           isReimbursement: true,
         }
-      : { title: '', amount: 0, paidFor: [], isReimbursement: false },
+      : {
+          title: '',
+          amount: 0,
+          paidFor: [],
+          isReimbursement: false,
+          splitMode: 'EVENLY',
+        },
   })
 
   return (
@@ -75,12 +97,12 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
               {isCreate ? <>Create expense</> : <>Edit expense</>}
             </CardTitle>
           </CardHeader>
-          <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          <CardContent className="grid sm:grid-cols-2 gap-6">
             <FormField
               control={form.control}
               name="title"
               render={({ field }) => (
-                <FormItem className="order-1">
+                <FormItem className="">
                   <FormLabel>Expense title</FormLabel>
                   <FormControl>
                     <Input
@@ -97,40 +119,11 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
               )}
             />
 
-            <FormField
-              control={form.control}
-              name="paidBy"
-              render={({ field }) => (
-                <FormItem className="order-3 sm:order-2">
-                  <FormLabel>Paid by</FormLabel>
-                  <Select
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a participant" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {group.participants.map(({ id, name }) => (
-                        <SelectItem key={id} value={id}>
-                          {name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <FormDescription>
-                    Select the participant who paid the expense.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
             <FormField
               control={form.control}
               name="amount"
               render={({ field }) => (
-                <FormItem className="order-2 sm:order-3">
+                <FormItem className="sm:order-3">
                   <FormLabel>Amount</FormLabel>
                   <div className="flex items-baseline gap-2">
                     <span>{group.currency}</span>
@@ -168,44 +161,82 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
               )}
             />
 
+            <FormField
+              control={form.control}
+              name="paidBy"
+              render={({ field }) => (
+                <FormItem className="sm:order-5">
+                  <FormLabel>Paid by</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a participant" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {group.participants.map(({ id, name }) => (
+                        <SelectItem key={id} value={id}>
+                          {name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    Select the participant who paid the expense.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className="mt-4">
+          <CardHeader>
+            <CardTitle className="flex justify-between">
+              <span>Paid for</span>
+              <Button
+                variant="link"
+                type="button"
+                className="-my-2 -mx-4"
+                onClick={() => {
+                  const paidFor = form.getValues().paidFor
+                  const allSelected =
+                    paidFor.length === group.participants.length
+                  const newPaidFor = allSelected
+                    ? []
+                    : group.participants.map((p) => ({
+                        participant: p.id,
+                        shares:
+                          paidFor.find((pfor) => pfor.participant === p.id)
+                            ?.shares ?? ('1' as unknown as number),
+                      }))
+                  form.setValue('paidFor', newPaidFor, {
+                    shouldDirty: true,
+                    shouldTouch: true,
+                    shouldValidate: true,
+                  })
+                }}
+              >
+                {form.getValues().paidFor.length ===
+                group.participants.length ? (
+                  <>Select none</>
+                ) : (
+                  <>Select all</>
+                )}
+              </Button>
+            </CardTitle>
+            <CardDescription>
+              Select who the expense was paid for.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
             <FormField
               control={form.control}
               name="paidFor"
               render={() => (
-                <FormItem className="order-5">
+                <FormItem className="sm:order-4 row-span-2 space-y-0">
-                  <div className="mb-4">
-                    <FormLabel>
-                      Paid for
-                      <Button
-                        variant="link"
-                        type="button"
-                        className="-m-2"
-                        onClick={() => {
-                          const paidFor = form.getValues().paidFor
-                          const allSelected =
-                            paidFor.length === group.participants.length
-                          const newPairFor = allSelected
-                            ? []
-                            : group.participants.map((p) => p.id)
-                          form.setValue('paidFor', newPairFor, {
-                            shouldDirty: true,
-                            shouldTouch: true,
-                            shouldValidate: true,
-                          })
-                        }}
-                      >
-                        {form.getValues().paidFor.length ===
-                        group.participants.length ? (
-                          <>Select none</>
-                        ) : (
-                          <>Select all</>
-                        )}
-                      </Button>
-                    </FormLabel>
-                    <FormDescription>
-                      Select who the expense was paid for.
-                    </FormDescription>
-                  </div>
                   {group.participants.map(({ id, name }) => (
                     <FormField
                       key={id}
@@ -213,28 +244,123 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
                       name="paidFor"
                       render={({ field }) => {
                         return (
-                          <FormItem
+                          <div
-                            key={id}
+                            data-id={`${id}/${form.getValues().splitMode}/${
-                            className="flex flex-row items-start space-x-3 space-y-0"
+                              group.currency
+                            }`}
+                            className="flex items-center border-t last-of-type:border-b last-of-type:!mb-4 -mx-6 px-6 py-3"
                           >
-                            <FormControl>
+                            <FormItem className="flex-1 flex flex-row items-start space-x-3 space-y-0">
-                              <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(
+                                          field.value?.filter(
+                                            (value) => value.participant !== id,
+                                          ),
+                                        )
+                                  }}
+                                />
+                              </FormControl>
+                              <FormLabel className="text-sm font-normal flex-1">
+                                {name}
+                              </FormLabel>
+                            </FormItem>
+                            {form.getValues().splitMode !== 'EVENLY' && (
+                              <FormField
+                                name={`paidFor[${field.value.findIndex(
+                                  ({ participant }) => participant === id,
+                                )}].shares`}
+                                render={() => {
+                                  const sharesLabel = (
+                                    <span
+                                      className={cn('text-sm', {
+                                        'text-muted': !field.value?.some(
+                                          ({ participant }) =>
+                                            participant === id,
                                         ),
-                                      )
+                                      })}
+                                    >
+                                      {match(form.getValues().splitMode)
+                                        .with('BY_SHARES', () => <>share(s)</>)
+                                        .with('BY_PERCENTAGE', () => <>%</>)
+                                        .with('BY_AMOUNT', () => (
+                                          <>{group.currency}</>
+                                        ))
+                                        .otherwise(() => (
+                                          <></>
+                                        ))}
+                                    </span>
+                                  )
+                                  return (
+                                    <div>
+                                      <div className="flex gap-1 items-baseline">
+                                        {form.getValues().splitMode ===
+                                          'BY_AMOUNT' && sharesLabel}
+                                        <FormControl>
+                                          <Input
+                                            key={String(
+                                              !field.value?.some(
+                                                ({ participant }) =>
+                                                  participant === id,
+                                              ),
+                                            )}
+                                            className="text-base w-[80px] -my-2"
+                                            type="number"
+                                            disabled={
+                                              !field.value?.some(
+                                                ({ participant }) =>
+                                                  participant === id,
+                                              )
+                                            }
+                                            value={
+                                              field.value?.find(
+                                                ({ participant }) =>
+                                                  participant === id,
+                                              )?.shares
+                                            }
+                                            onChange={(event) =>
+                                              field.onChange(
+                                                field.value.map((p) =>
+                                                  p.participant === id
+                                                    ? {
+                                                        participant: id,
+                                                        shares:
+                                                          event.target.value,
+                                                      }
+                                                    : p,
+                                                ),
+                                              )
+                                            }
+                                            inputMode="numeric"
+                                            step={1}
+                                          />
+                                        </FormControl>
+                                        {[
+                                          'BY_SHARES',
+                                          'BY_PERCENTAGE',
+                                        ].includes(
+                                          form.getValues().splitMode,
+                                        ) && sharesLabel}
+                                      </div>
+                                      <FormMessage className="float-right" />
+                                    </div>
+                                  )
                                 }}
                               />
-                            </FormControl>
+                            )}
-                            <FormLabel className="text-sm font-normal">
+                          </div>
-                              {name}
-                            </FormLabel>
-                          </FormItem>
                         )
                       }}
                     />
@@ -243,26 +369,80 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
                 </FormItem>
               )}
             />
-          </CardContent>
 
-          <CardFooter className="gap-2">
+            <Collapsible className="mt-5">
-            <SubmitButton
+              <CollapsibleTrigger asChild>
-              loadingContent={isCreate ? <>Creating…</> : <>Saving…</>}
+                <Button variant="link" className="-mx-4">
-            >
+                  Advanced splitting options…
-              {isCreate ? <>Create</> : <>Save</>}
+                </Button>
-            </SubmitButton>
+              </CollapsibleTrigger>
-            {!isCreate && onDelete && (
+              <CollapsibleContent>
-              <AsyncButton
+                <div className="grid sm:grid-cols-2 gap-6 pt-3">
-                type="button"
+                  <FormField
-                variant="destructive"
+                    control={form.control}
-                loadingContent="Deleting…"
+                    name="splitMode"
-                action={onDelete}
+                    render={({ field }) => (
-              >
+                      <FormItem className="sm:order-2">
-                Delete
+                        <FormLabel>Split mode</FormLabel>
-              </AsyncButton>
+                        <FormControl>
-            )}
+                          <Select
-          </CardFooter>
+                            onValueChange={(value) => {
+                              form.setValue('splitMode', value as any, {
+                                shouldDirty: true,
+                                shouldTouch: true,
+                                shouldValidate: true,
+                              })
+                            }}
+                            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>
+              </CollapsibleContent>
+            </Collapsible>
+          </CardContent>
         </Card>
+
+        <div className="flex mt-4 gap-2">
+          <SubmitButton
+            loadingContent={isCreate ? <>Creating…</> : <>Saving…</>}
+          >
+            <Save className="w-4 h-4 mr-2" />
+            {isCreate ? <>Create</> : <>Save</>}
+          </SubmitButton>
+          {!isCreate && onDelete && (
+            <AsyncButton
+              type="button"
+              variant="destructive"
+              loadingContent="Deleting…"
+              action={onDelete}
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete
+            </AsyncButton>
+          )}
+        </div>
       </form>
     </Form>
   )

src/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

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/balances.ts

@@ -1,5 +1,6 @@
 import { getGroupExpenses } from '@/lib/api'
 import { Participant } from '@prisma/client'
+import { match } from 'ts-pattern'
 
 export type Balances = Record<
   Participant['id'],
@@ -19,34 +20,42 @@ export function getBalances(
 
   for (const expense of expenses) {
     const paidBy = expense.paidById
-    const paidFors = expense.paidFor.map((p) => p.participantId)
+    const paidFors = expense.paidFor
 
     if (!balances[paidBy]) balances[paidBy] = { paid: 0, paidFor: 0, total: 0 }
     balances[paidBy].paid += expense.amount
     balances[paidBy].total += expense.amount
-    paidFors.forEach((paidFor, index) => {
-      if (!balances[paidFor])
-        balances[paidFor] = { paid: 0, paidFor: 0, total: 0 }
 
-      const dividedAmount = divide(
+    const totalPaidForShares = paidFors.reduce(
-        expense.amount,
+      (sum, paidFor) => sum + paidFor.shares,
-        paidFors.length,
+      0,
-        index === paidFors.length - 1,
+    )
-      )
+    let remaining = expense.amount
-      balances[paidFor].paidFor += dividedAmount
+    paidFors.forEach((paidFor, index) => {
-      balances[paidFor].total -= dividedAmount
+      if (!balances[paidFor.participantId])
+        balances[paidFor.participantId] = { paid: 0, paidFor: 0, total: 0 }
+
+      const isLast = index === paidFors.length - 1
+
+      const [shares, totalShares] = match(expense.splitMode)
+        .with('EVENLY', () => [1, paidFors.length])
+        .with('BY_SHARES', () => [paidFor.shares, totalPaidForShares])
+        .with('BY_PERCENTAGE', () => [paidFor.shares, totalPaidForShares])
+        .with('BY_AMOUNT', () => [paidFor.shares, totalPaidForShares])
+        .exhaustive()
+
+      const dividedAmount = isLast
+        ? remaining
+        : Math.floor((expense.amount * shares) / totalShares)
+      remaining -= dividedAmount
+      balances[paidFor.participantId].paidFor += dividedAmount
+      balances[paidFor.participantId].total -= dividedAmount
     })
   }
 
   return balances
 }
 
-function divide(total: number, count: number, isLast: boolean): number {
-  if (!isLast) return Math.floor(total / count)
-
-  return total - divide(total, count, false) * (count - 1)
-}
-
 export function getSuggestedReimbursements(
   balances: Balances,
 ): Reimbursement[] {

src/lib/schemas.ts

@@ -1,3 +1,4 @@
+import { SplitMode } from '@prisma/client'
 import * as z from 'zod'
 
 export const groupFormSchema = z
@@ -38,36 +39,111 @@ export const groupFormSchema = z
 
 export type GroupFormValues = z.infer<typeof groupFormSchema>
 
-export const expenseFormSchema = z.object({
+export const expenseFormSchema = z
-  title: z
+  .object({
-    .string({ required_error: 'Please enter a title.' })
+    title: z
-    .min(2, 'Enter at least two characters.'),
+      .string({ required_error: 'Please enter a title.' })
-  amount: z
+      .min(2, 'Enter at least two characters.'),
-    .union(
+    amount: z
-      [
+      .union(
-        z.number(),
+        [
-        z.string().transform((value, ctx) => {
+          z.number(),
-          const valueAsNumber = Number(value)
+          z.string().transform((value, ctx) => {
-          if (Number.isNaN(valueAsNumber))
+            const valueAsNumber = Number(value)
+            if (Number.isNaN(valueAsNumber))
+              ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: 'Invalid number.',
+              })
+            return Math.round(valueAsNumber * 100)
+          }),
+        ],
+        { required_error: 'You must enter an amount.' },
+      )
+      .refine((amount) => amount >= 1, 'The amount must be higher than 0.01.')
+      .refine(
+        (amount) => amount <= 10_000_000_00,
+        'The amount must be lower than 10,000,000.',
+      ),
+    paidBy: z.string({ required_error: 'You must select a participant.' }),
+    paidFor: z
+      .array(
+        z.object({
+          participant: z.string(),
+          shares: z.union([
+            z.number(),
+            z.string().transform((value, ctx) => {
+              const valueAsNumber = Number(value)
+              if (Number.isNaN(valueAsNumber))
+                ctx.addIssue({
+                  code: z.ZodIssueCode.custom,
+                  message: 'Invalid number.',
+                })
+              return Math.round(valueAsNumber * 100)
+            }),
+          ]),
+        }),
+      )
+      .min(1, 'The expense must be paid for at least one participant.')
+      .superRefine((paidFor, ctx) => {
+        let sum = 0
+        for (const { shares } of paidFor) {
+          sum += shares
+          if (shares < 1) {
             ctx.addIssue({
               code: z.ZodIssueCode.custom,
-              message: 'Invalid number.',
+              message: 'All shares must be higher than 0.',
             })
-          return Math.round(valueAsNumber * 100)
+          }
-        }),
+        }
-      ],
+      }),
-      { required_error: 'You must enter an amount.' },
+    splitMode: z
-    )
+      .enum<SplitMode, [SplitMode, ...SplitMode[]]>(
-    .refine((amount) => amount >= 1, 'The amount must be higher than 0.01.')
+        Object.values(SplitMode) as any,
-    .refine(
+      )
-      (amount) => amount <= 10_000_000_00,
+      .default('EVENLY'),
-      'The amount must be lower than 10,000,000.',
+    isReimbursement: z.boolean(),
-    ),
+  })
-  paidBy: z.string({ required_error: 'You must select a participant.' }),
+  .superRefine((expense, ctx) => {
-  paidFor: z
+    let sum = 0
-    .array(z.string())
+    for (const { shares } of expense.paidFor) {
-    .min(1, 'The expense must be paid for at least one participant.'),
+      sum +=
-  isReimbursement: z.boolean(),
+        typeof shares === 'number' ? shares : Math.round(Number(shares) * 100)
-})
+    }
+    switch (expense.splitMode) {
+      case 'EVENLY':
+        break // noop
+      case 'BY_SHARES':
+        break // noop
+      case 'BY_AMOUNT': {
+        if (sum !== expense.amount) {
+          const detail =
+            sum < expense.amount
+              ? `${((expense.amount - sum) / 100).toFixed(2)} missing`
+              : `${((sum - expense.amount) / 100).toFixed(2)} surplus`
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Sum of amounts must equal the expense amount (${detail}).`,
+            path: ['paidFor'],
+          })
+        }
+        break
+      }
+      case 'BY_PERCENTAGE': {
+        if (sum !== 10000) {
+          const detail =
+            sum < 10000
+              ? `${((10000 - sum) / 100).toFixed(0)}% missing`
+              : `${((sum - 10000) / 100).toFixed(0)}% surplus`
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Sum of percentages must equal 100 (${detail})`,
+            path: ['paidFor'],
+          })
+        }
+        break
+      }
+    }
+  })
 
 export type ExpenseFormValues = z.infer<typeof expenseFormSchema>