evyos-frontend-development/frontend/pages/people/update/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 { useUpdatePeopleMutation } from "@/pages/people/update/queries"
import { personUpdateSchema, type PeopleUpdate } from "@/pages/people/update/schema"

const PeopleForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () => void, initData: PeopleUpdate, selectedUuid: string }) => {

    const form = useForm<PeopleUpdate>({ resolver: zodResolver(personUpdateSchema), defaultValues: { ...initData } })

    const { handleSubmit } = form

    const mutation = useUpdatePeopleMutation();

    function onSubmit(values: PeopleUpdate) { mutation.mutate({ data: values as any || initData, uuid: selectedUuid }); 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">
                    Update Person
                </Button>
            </form>
        </Form>
    );
}

export { PeopleForm }