evyos-frontend-development/frontend/pages/build-areas/add/form.tsx

"use client"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { DateTimePicker } from "@/components/ui/date-time-picker"
import { BuildAreasAdd, buildAreasAddSchema } from "./schema"
import { useAddBuildAreasMutation } from "./queries"

const BuildAreasForm = ({ refetchTable, buildId }: { refetchTable: () => void, buildId: string }) => {

    const form = useForm<BuildAreasAdd>({
        resolver: zodResolver(buildAreasAddSchema),
        defaultValues: {
            areaName: "", areaCode: "", areaType: "", areaDirection: "", areaGrossSize: 0, areaNetSize: 0, width: 0, size: 0, expiryStarts: "", expiryEnds: "",
        },
    });

    const { handleSubmit } = form;

    const mutation = useAddBuildAreasMutation();

    function onSubmit(values: BuildAreasAdd) { mutation.mutate({ data: values, buildId }); setTimeout(() => refetchTable(), 400) };

    return (
        <Form {...form}>
            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4">
                {/* ROW 1 */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="areaName"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Area Name</FormLabel>
                                <FormControl>
                                    <Input placeholder="Area Name" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="areaCode"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Area Code</FormLabel>
                                <FormControl>
                                    <Input placeholder="Area Code" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="areaType"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Area Type</FormLabel>
                                <FormControl>
                                    <Input placeholder="Area Type" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="areaDirection"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Area Direction</FormLabel>
                                <FormControl>
                                    <Input placeholder="Area Direction" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="areaGrossSize"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Area Gross Size</FormLabel>
                                <FormControl>
                                    <Input type="number" placeholder="Area Gross Size" {...field} onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="areaNetSize"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Area Net Size</FormLabel>
                                <FormControl>
                                    <Input type="number" placeholder="Area Net Size" {...field} onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="width"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Width</FormLabel>
                                <FormControl>
                                    <Input type="number" placeholder="Width" {...field} onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="size"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Size</FormLabel>
                                <FormControl>
                                    <Input type="number" placeholder="Size" {...field} onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                <Separator />

                {/* EXPIRY DATES */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

                    <FormField
                        control={form.control}
                        name="expiryStarts"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Expiry Starts</FormLabel>
                                <FormControl>
                                    <DateTimePicker {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="expiryEnds"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Expiry Ends</FormLabel>
                                <FormControl>
                                    <DateTimePicker {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>
                <Button type="submit" className="w-full">
                    Add Build Address
                </Button>

            </form>
        </Form>
    );
};

export { BuildAreasForm }