evyos-frontend-development/frontend/pages/builds/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 { BuildUpdate, buildUpdateSchema } from "@/pages/builds/update/schema"
import { useUpdateBuildMutation } from "./queries"
import { Checkbox } from "@/components/ui/checkbox"

const BuildupdateForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () => void, initData: BuildUpdate, selectedUuid: string }) => {

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

    const { handleSubmit } = form

    const mutation = useUpdateBuildMutation();

    function onSubmit(values: BuildUpdate) { 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" >

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

                    <FormField
                        control={form.control}
                        name="collectionToken"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Collection Token</FormLabel>
                                <FormControl>
                                    <Input placeholder="Collection Token" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="info.govAddressCode"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Gov Address Code</FormLabel>
                                <FormControl>
                                    <Input placeholder="Gov Address Code" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.buildName"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Build Name</FormLabel>
                                <FormControl>
                                    <Input placeholder="Build Name" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.buildNo"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Build No</FormLabel>
                                <FormControl>
                                    <Input placeholder="Build No" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>


                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="info.maxFloor"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Max Floor</FormLabel>
                                <FormControl>
                                    <Input placeholder="Max Floor" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.undergroundFloor"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Underground Floor</FormLabel>
                                <FormControl>
                                    <Input placeholder="Underground Floor" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="info.taxNo"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Tax No</FormLabel>
                                <FormControl>
                                    <Input placeholder="Tax No" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.liftCount"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Lift Count</FormLabel>
                                <FormControl>
                                    <Input placeholder="Lift Count" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                <div className="flex flex-row justify-evenly">
                    <FormField
                        control={form.control}
                        name="info.heatingSystem"
                        render={({ field }) => (
                            <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                                <FormControl>
                                    <Checkbox
                                        checked={field.value}
                                        onCheckedChange={field.onChange}
                                    />
                                </FormControl>
                                <div className="leading-none">
                                    <FormLabel>
                                        Heating System
                                    </FormLabel>
                                </div>
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.coolingSystem"
                        render={({ field }) => (
                            <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                                <FormControl>
                                    <Checkbox
                                        checked={field.value}
                                        onCheckedChange={field.onChange}
                                    />
                                </FormControl>
                                <div className="leading-none">
                                    <FormLabel>
                                        Cooling System
                                    </FormLabel>
                                </div>
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.hotWaterSystem"
                        render={({ field }) => (
                            <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                                <FormControl>
                                    <Checkbox
                                        checked={field.value}
                                        onCheckedChange={field.onChange}
                                    />
                                </FormControl>
                                <div className="leading-none">
                                    <FormLabel>
                                        Hot Water System
                                    </FormLabel>
                                </div>
                            </FormItem>
                        )}
                    />
                </div>

                <Separator />
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="info.buildDate"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Build Date</FormLabel>
                                <FormControl>
                                    <DateTimePicker {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.decisionPeriodDate"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Decision Period Date</FormLabel>
                                <FormControl>
                                    <DateTimePicker {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <FormField
                        control={form.control}
                        name="info.blockServiceManCount"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Block Service Man Count</FormLabel>
                                <FormControl>
                                    <Input placeholder="Block Service Man Count" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.securityServiceManCount"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Security Service Man Count</FormLabel>
                                <FormControl>
                                    <Input placeholder="Security Service Man Count" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.garageCount"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Total Garage Count In Numbers</FormLabel>
                                <FormControl>
                                    <Input placeholder="Total Garage Count" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.managementRoomId"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Management Room ID Assign</FormLabel>
                                <FormControl>
                                    <Input placeholder="Management Room ID" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                <Button type="submit" className="w-full">Update Build</Button>
            </form>
        </Form>
    );

}

export { BuildupdateForm }