aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/expense-form.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/expense-form.tsx')
-rw-r--r--src/components/expense-form.tsx34
1 files changed, 31 insertions, 3 deletions
diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx
index 6420bc6..3f6490f 100644
--- a/src/components/expense-form.tsx
+++ b/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>