Add New Customer

"use-client";-import-{-Button-}-from-"@/components/ui/button";-import-{-Input-}-from-"@/components/ui/input";-import-{-useForm-}-from-"react-hook-form";-import-{-zodResolver-}-from-"@hookform/resolvers/zod";-import-*-as-z-from-"zod";-import-{-Form,-FormField,-FormItem,-FormLabel,-FormControl,-FormMessage,-}-from-"@/components/ui/form";-import-{-useRouter-}-from-"next/navigation";-import-{-useState-}-from-"react";-import-{-Select,-SelectContent,-SelectItem,-SelectTrigger,-SelectValue,-}-from-"@/components/ui/select";-import-{-Textarea-}-from-"@/components/ui/textarea";-const-formSchema-=-z.object({-title:-z.enum(["Mr",-"Miss",-"Mrs",-"Dr"]).optional(),-name:-z.string().min(1,-{-message:-"Name-is-required"-}),-email:-z.string().email({-message:-"Invalid-email-address"-}),-phone:-z.string().min(10,-{-message:-"Phone-number-should-have-at-least-10-digits"-}),-address:-z.string().min(1,-{-message:-"Address-is-required"-}),-currency:-z.enum(["USD",-"EUR",-"GBP",-"INR"]).optional(),-website:-z.string().url({-message:-"Invalid-URL"-}).optional(),-tags:-z.string().optional(),-});-export-default-function-AddCustomerPage()-{-const-router-=-useRouter();-const-[loading,-setLoading]-=-useState(false);-const-form-=-useForm({-resolver:-zodResolver(formSchema),-defaultValues:-{-title:-"",-name:-"",-email:-"",-phone:-"",-address:-"",-currency:-"",-website:-"",-tags:-"",-},-});-async-function-onSubmit(values)-{-setLoading(true);-//-Placeholder-for-submission-logic-setLoading(false);-}-return-(-<div-className="flex-1-space-y-4-p-8-pt-6">-<div-className="flex-items-center-justify-between-space-y-2">-<h2-className="text-3xl-font-bold-tracking-tight">Add-New-Customer</h2>-</div>-<Form-{...form}>-<form-onSubmit={form.handleSubmit(onSubmit)}-className="grid-grid-cols-1-gap-8-md:grid-cols-2">-<FormField-control={form.control}-name="title"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Title</FormLabel>-<FormControl>-<Select-onValueChange={field.onChange}-defaultValue={field.value}>-<SelectTrigger>-<SelectValue-placeholder="Select-title"-/>-</SelectTrigger>-<SelectContent>-<SelectItem-value="Mr">Mr</SelectItem>-<SelectItem-value="Miss">Miss</SelectItem>-<SelectItem-value="Mrs">Mrs</SelectItem>-<SelectItem-value="Dr">Dr</SelectItem>-</SelectContent>-</Select>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="name"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Name</FormLabel>-<FormControl>-<Input-placeholder="Customer-Name"-{...field}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="email"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Email</FormLabel>-<FormControl>-<Input-placeholder="customer@example.com"-{...field}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="phone"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Phone</FormLabel>-<FormControl>-<Input-placeholder="Phone-Number"-{...field}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="address"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Address</FormLabel>-<FormControl>-<Textarea-placeholder="Customer-Address"-{...field}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="currency"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Preferred-Currency</FormLabel>-<FormControl>-<Select-onValueChange={field.onChange}-defaultValue={field.value}>-<SelectTrigger>-<SelectValue-placeholder="Select-currency"-/>-</SelectTrigger>-<SelectContent>-<SelectItem-value="USD">USD</SelectItem>-<SelectItem-value="EUR">EUR</SelectItem>-<SelectItem-value="GBP">GBP</SelectItem>-<SelectItem-value="INR">INR</SelectItem>-</SelectContent>-</Select>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="website"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Website</FormLabel>-<FormControl>-<Input-placeholder="https://example.com"-{...field}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="tags"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Tags</FormLabel>-<FormControl>-<Input-placeholder="e.g.,-VIP,-Wholesale"-{...field}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<div-className="col-span-1-md:col-span-2-flex-justify-end-mt-4">-<Button-type="submit"-disabled={loading}>-{loading-?-"Adding-Customer..."-:-"Add-Customer"}-</Button>-</div>-</form>-</Form>-</div>-);-}