evyos-frontend-development/frontend/pages/build-address/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 { buildAddressAddSchema, BuildAddressAdd } from "./schema"
import { useAddBuildAddressMutation } from "./queries"

const BuildAddressForm = ({ refetchTable }: { refetchTable: () => void }) => {

    const form = useForm<BuildAddressAdd>({
        resolver: zodResolver(buildAddressAddSchema),
        defaultValues: {
            buildNumber: "",
            doorNumber: "",
            floorNumber: "",
            commentAddress: "",
            letterAddress: "",
            shortLetterAddress: "",
            latitude: 0,
            longitude: 0,
            street: "",
            expiryStarts: "",
            expiryEnds: "",
        },
    });

    const { handleSubmit } = form;

    const mutation = useAddBuildAddressMutation();

    function onSubmit(values: BuildAddressAdd) { mutation.mutate({ data: values }); 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="buildNumber"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Build Number</FormLabel>
                                <FormControl>
                                    <Input placeholder="12A" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="doorNumber"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Door Number</FormLabel>
                                <FormControl>
                                    <Input placeholder="3" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                </div>

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

                    <FormField
                        control={form.control}
                        name="floorNumber"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Floor Number</FormLabel>
                                <FormControl>
                                    <Input placeholder="1" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="street"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Street ID</FormLabel>
                                <FormControl>
                                    <Input placeholder="671f0d..." {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                </div>

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

                    <FormField
                        control={form.control}
                        name="commentAddress"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Comment Address</FormLabel>
                                <FormControl>
                                    <Input placeholder="Near the market..." {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="letterAddress"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Letter Address</FormLabel>
                                <FormControl>
                                    <Input placeholder="123 Lemon St" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                </div>

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

                    <FormField
                        control={form.control}
                        name="shortLetterAddress"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Short Letter Address</FormLabel>
                                <FormControl>
                                    <Input placeholder="Lmn St 123" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

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

                </div>

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

                    <FormField
                        control={form.control}
                        name="longitude"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Longitude</FormLabel>
                                <FormControl>
                                    <Input
                                        type="number"
                                        placeholder="28.9784"
                                        value={field.value ?? ""}
                                        onChange={(e) =>
                                            field.onChange(e.target.value ? Number(e.target.value) : undefined)
                                        }
                                    />
                                </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 { BuildAddressForm }