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

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

    const form = useForm<BuildAdd>({
        resolver: zodResolver(buildAddSchema),
        defaultValues: {
            buildType: "",
            collectionToken: "",
            info: {
                govAddressCode: "",
                buildName: "",
                buildNo: "",
                maxFloor: 0,
                undergroundFloor: 0,
                buildDate: "",
                decisionPeriodDate: "",
                taxNo: "",
                liftCount: 0,
                heatingSystem: false,
                coolingSystem: false,
                hotWaterSystem: false,
                blockServiceManCount: 0,
                securityServiceManCount: 0,
                garageCount: 0,
                managementRoomId: "",
            }
        },
    });

    const { handleSubmit } = form;

    const mutation = useAddBuildMutation();

    function onSubmit(values: BuildAdd) { 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="buildType"
                        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
                                        type="number"
                                        placeholder="Max Floor"
                                        {...field}
                                        onBlur={(e) => {
                                            field.onBlur();
                                            const numValue = parseFloat(e.target.value);
                                            if (!isNaN(numValue)) {
                                                field.onChange(numValue);
                                            }
                                        }}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.undergroundFloor"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Underground Floor</FormLabel>
                                <FormControl>
                                    <Input
                                        type="number"
                                        placeholder="Underground Floor"
                                        {...field}
                                        onBlur={(e) => {
                                            field.onBlur();
                                            const numValue = parseFloat(e.target.value);
                                            if (!isNaN(numValue)) {
                                                field.onChange(numValue);
                                            }
                                        }}
                                    />
                                </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
                                        type="number"
                                        placeholder="Lift Count"
                                        {...field}
                                        onBlur={(e) => {
                                            field.onBlur();
                                            const numValue = parseFloat(e.target.value);
                                            if (!isNaN(numValue)) {
                                                field.onChange(numValue);
                                            }
                                        }}
                                    />
                                </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
                                        type="number"
                                        placeholder="Block Service Man Count"
                                        {...field}
                                        onBlur={(e) => {
                                            field.onBlur();
                                            const numValue = parseFloat(e.target.value);
                                            if (!isNaN(numValue)) {
                                                field.onChange(numValue);
                                            }
                                        }}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.securityServiceManCount"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Security Service Man Count</FormLabel>
                                <FormControl>
                                    <Input
                                        type="number"
                                        placeholder="Security Service Man Count"
                                        {...field}
                                        onBlur={(e) => {
                                            field.onBlur();
                                            const numValue = parseFloat(e.target.value);
                                            if (!isNaN(numValue)) {
                                                field.onChange(numValue);
                                            }
                                        }}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="info.garageCount"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Total Garage Count In Numbers</FormLabel>
                                <FormControl>
                                    <Input
                                        type="number"
                                        placeholder="Total Garage Count"
                                        {...field}
                                        onBlur={(e) => {
                                            field.onBlur();
                                            const numValue = parseFloat(e.target.value);
                                            if (!isNaN(numValue)) {
                                                field.onChange(numValue);
                                            }
                                        }}
                                    />
                                </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">Add Build </Button>
            </form>
        </Form>
    );

};

export { BuildsForm }