evyos-frontend-development/frontend/pages/people/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 { PeopleAdd, personAddSchema } from "./schema"
import { useAddPeopleMutation } from "./queries"
import { DateTimePicker } from "@/components/ui/date-time-picker"

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

    const form = useForm<PeopleAdd>({
        resolver: zodResolver(personAddSchema),
        defaultValues: {
            firstName: "",
            surname: "",
            middleName: "",
            sexCode: "",
            personRef: "",
            personTag: "",
            fatherName: "",
            motherName: "",
            countryCode: "",
            nationalIdentityId: "",
            birthPlace: "",
            birthDate: "",
            taxNo: "",
            birthname: "",
            expiryStarts: "",
            expiryEnds: "",
        },
    });

    const { handleSubmit } = form;

    const mutation = useAddPeopleMutation();

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

    return (
        <Form {...form}>
            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4">
                {/* BASIC INFO */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

                    <FormField
                        control={form.control}
                        name="firstName"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>First Name</FormLabel>
                                <FormControl>
                                    <Input placeholder="John" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="surname"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Surname</FormLabel>
                                <FormControl>
                                    <Input placeholder="Doe" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

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

                    <FormField
                        control={form.control}
                        name="middleName"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Middle Name</FormLabel>
                                <FormControl>
                                    <Input placeholder="Alexander" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

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

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

                    <FormField
                        control={form.control}
                        name="personRef"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Person Ref</FormLabel>
                                <FormControl>
                                    <Input placeholder="REF123" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="personTag"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Person Tag</FormLabel>
                                <FormControl>
                                    <Input placeholder="TAG001" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

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

                    <FormField
                        control={form.control}
                        name="fatherName"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Father Name</FormLabel>
                                <FormControl>
                                    <Input placeholder="Father..." {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="motherName"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Mother Name</FormLabel>
                                <FormControl>
                                    <Input placeholder="Mother..." {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                {/* COUNTRY + NATIONAL ID */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

                    <FormField
                        control={form.control}
                        name="countryCode"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Country Code</FormLabel>
                                <FormControl>
                                    <Input placeholder="TR" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="nationalIdentityId"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>National Identity ID</FormLabel>
                                <FormControl>
                                    <Input placeholder="12345678901" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

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

                    <FormField
                        control={form.control}
                        name="birthPlace"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Birth Place</FormLabel>
                                <FormControl>
                                    <Input placeholder="Istanbul" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="birthDate"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Birth Date</FormLabel>
                                <FormControl>
                                    <DateTimePicker {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

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

                    <FormField
                        control={form.control}
                        name="taxNo"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Tax No</FormLabel>
                                <FormControl>
                                    <Input placeholder="Tax number..." {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="birthname"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Birth Name</FormLabel>
                                <FormControl>
                                    <Input placeholder="Birth name..." {...field} />
                                </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">Create Person</Button>
            </form>
        </Form>
    );
};

export { PeopleForm }