diff options
| -rw-r--r-- | src/components/invoice-generator.tsx | 21 |
1 files changed, 18 insertions, 3 deletions
diff --git a/src/components/invoice-generator.tsx b/src/components/invoice-generator.tsx index d1552c1..32f2d53 100644 --- a/src/components/invoice-generator.tsx +++ b/src/components/invoice-generator.tsx @@ -2,7 +2,12 @@ import { Invoice, InvoiceSchema } from "@/models/invoice"; import { zodResolver } from "@hookform/resolvers/zod"; -import { useFieldArray, useForm, useWatch } from "react-hook-form"; +import { + useFieldArray, + useForm, + useWatch, + SubmitHandler, +} from "react-hook-form"; import { Input } from "./ui/input"; import React from "react"; import { cn } from "@/utils/cn"; @@ -40,8 +45,15 @@ export const InvoiceGenerator = () => { const lineItems = useWatch({ control, name: "line_items" }); const currency = watch("currency", "USD"); + const onSubmit: SubmitHandler<Invoice> = (data) => { + console.log(data); + }; + return ( - <form className="max-w-5xl rounded-sm border p-4 shadow-lg"> + <form + onSubmit={handleSubmit(onSubmit)} + className="max-w-5xl rounded-sm border p-4 shadow-lg" + > <div className="flex justify-between gap-4"> <section className="grid auto-rows-min grid-cols-2 gap-2"> <Input @@ -69,7 +81,7 @@ export const InvoiceGenerator = () => { <label>Due Date</label> <Input {...register("due_date")} type="date" /> <label>PO number</label> - <Input {...register("po_number", { valueAsNumber: true })} /> + <Input {...register("po_number")} /> </section> </div> <h2>Your Items</h2> @@ -126,6 +138,9 @@ export const InvoiceGenerator = () => { )}{" "} {currency} </section> + <section className="mt-4 flex flex-row-reverse"> + <Button>Download</Button> + </section> </form> ); }; |