feat: update harvest and planting detail forms to handle data changes and improve type safety

frontend/app/(sidebar)/setup/harvest-detail-form.tsx

@@ -24,7 +24,11 @@ import { Button } from "@/components/ui/button";
 
 type harvestSchema = z.infer<typeof harvestDetailsFormSchema>;
 
-export default function HarvestDetailsForm() {
+export default function HarvestDetailsForm({
+  onChange,
+}: {
+  onChange: (data: harvestSchema) => void;
+}) {
   const form = useForm<harvestSchema>({
     resolver: zodResolver(harvestDetailsFormSchema),
     defaultValues: {
@@ -38,9 +42,15 @@ export default function HarvestDetailsForm() {
       expectedYieldPerAcre: 0,
     },
   });
+  const onSubmit: (data: harvestSchema) => void = (data) => {
+    onChange(data);
+  };
   return (
     <Form {...form}>
-      <form className="grid grid-cols-3 gap-5">
+      <form
+        className="grid grid-cols-3 gap-5"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
         <FormField
           control={form.control}
           name="daysToFlower"
@@ -57,6 +67,13 @@ export default function HarvestDetailsForm() {
                       id="daysToFlower"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -81,6 +98,13 @@ export default function HarvestDetailsForm() {
                       id="daysToMaturity"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -105,6 +129,13 @@ export default function HarvestDetailsForm() {
                       id="harvestWindow"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -129,6 +160,13 @@ export default function HarvestDetailsForm() {
                       id="estimatedLossRate"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -178,6 +216,13 @@ export default function HarvestDetailsForm() {
                       id="estimatedRevenue"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -202,6 +247,13 @@ export default function HarvestDetailsForm() {
                       id="expectedYieldPer100ft"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -226,6 +278,13 @@ export default function HarvestDetailsForm() {
                       id="expectedYieldPerAcre"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>

frontend/app/(sidebar)/setup/page.tsx

@@ -4,48 +4,31 @@ import PlantingDetailsForm from "./planting-detail-form";
 import HarvestDetailsForm from "./harvest-detail-form";
 import { Separator } from "@/components/ui/separator";
 import GoogleMapWithDrawing from "@/components/google-map-with-drawing";
+import {
+  plantingDetailsFormSchema,
+  harvestDetailsFormSchema,
+} from "@/schemas/application.schema";
+import { z } from "zod";
+
+type plantingSchema = z.infer<typeof plantingDetailsFormSchema>;
+type harvestSchema = z.infer<typeof harvestDetailsFormSchema>;
 
 export default function SetupPage() {
-  type PlantingDetails = {
+  const [plantingDetails, setPlantingDetails] = useState<plantingSchema | null>(
-    daysToEmerge: number;
+    null
-    plantSpacing: number;
+  );
-    rowSpacing: number;
+  const [harvestDetails, setHarvestDetails] = useState<harvestSchema | null>(
-    plantingDepth: number;
+    null
-    averageHeight: number;
+  );
-    isPerennial: boolean;
-    autoCreateTasks: boolean;
-    startMethod?: string;
-    lightProfile?: string;
-    soilConditions?: string;
-    plantingDetails?: string;
-    pruningDetails?: string;
-  };
-
-  const [plantingDetails, setPlantingDetails] =
-    useState<PlantingDetails | null>(null);
-  const [harvestDetails, setHarvestDetails] = useState(null);
   const [mapData, setMapData] = useState(null);
 
   // handle planting details submission
-  const handlePlantingDetailsChange = (data: {
+  const handlePlantingDetailsChange = (data: plantingSchema) => {
-    daysToEmerge: number;
-    plantSpacing: number;
-    rowSpacing: number;
-    plantingDepth: number;
-    averageHeight: number;
-    isPerennial: boolean;
-    autoCreateTasks: boolean;
-    startMethod?: string;
-    lightProfile?: string;
-    soilConditions?: string;
-    plantingDetails?: string;
-    pruningDetails?: string;
-  }) => {
     setPlantingDetails(data);
   };
 
   // handle harvest details submission
-  const handleHarvestDetailsChange = (data: SetStateAction<null>) => {
+  const handleHarvestDetailsChange = (data: harvestSchema) => {
     setHarvestDetails(data);
   };
 
@@ -54,9 +37,11 @@ export default function SetupPage() {
     setMapData(data);
   };
 
+  // log the changes
   useEffect(() => {
     console.log(plantingDetails);
-  }, [plantingDetails]);
+    console.log(harvestDetails);
+  }, [plantingDetails, harvestDetails]);
 
   const handleSubmit = () => {
     if (!plantingDetails || !harvestDetails || !mapData) {
@@ -105,7 +90,7 @@ export default function SetupPage() {
       </div>
       <Separator className="mt-3" />
       <div className="mt-10 flex justify-center">
-        {/* <HarvestDetailsForm onChange={handleHarvestDetailsChange} /> */}
+        <HarvestDetailsForm onChange={handleHarvestDetailsChange} />
       </div>
 
       {/* Map Section */}

frontend/app/(sidebar)/setup/planting-detail-form.tsx

@@ -23,23 +23,8 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
-import { useState } from "react";
 
 type plantingSchema = z.infer<typeof plantingDetailsFormSchema>;
-interface FormData {
-  daysToEmerge: number;
-  plantSpacing: number;
-  rowSpacing: number;
-  plantingDepth: number;
-  averageHeight: number;
-  startMethod?: string;
-  lightProfile?: string;
-  soilConditions?: string;
-  plantingDetails?: string;
-  pruningDetails?: string;
-  isPerennial: boolean;
-  autoCreateTasks: boolean;
-}
 
 export default function PlantingDetailsForm({
   onChange,
@@ -64,7 +49,7 @@ export default function PlantingDetailsForm({
     },
   });
 
-  const onSubmit = (data: FormData) => {
+  const onSubmit = (data: plantingSchema) => {
     onChange(data);
   };
   return (