From 4b9f729cb13a2a6bd6a93f08aa4cd37f249dc3e1 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 13 Feb 2025 21:40:27 +0700
Subject: [PATCH] feat: enhance planting details form with additional fields
 for spacing and depth

---
 frontend/app/setup/page.tsx                 | 11 ++-
 frontend/app/setup/planting-detail-form.tsx | 96 ++++++++++++++++++++-
 2 files changed, 104 insertions(+), 3 deletions(-)

diff --git a/frontend/app/setup/page.tsx b/frontend/app/setup/page.tsx
index 5630df5..cc11086 100644
--- a/frontend/app/setup/page.tsx
+++ b/frontend/app/setup/page.tsx
@@ -1,7 +1,14 @@
+import PlantingDetailsForm from "./planting-detail-form";
+import { Separator } from "@/components/ui/separator";
+
 export default function SetupPage() {
   return (
-    <div>
-      <h1>Setup Page</h1>
+    <div className="p-5">
+      <h1 className="text-2xl">Plating Details</h1>
+      <Separator className="mt-3" />
+      <div className="mt-3">
+        <PlantingDetailsForm />
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/setup/planting-detail-form.tsx b/frontend/app/setup/planting-detail-form.tsx
index c3a3146..13d8a08 100644
--- a/frontend/app/setup/planting-detail-form.tsx
+++ b/frontend/app/setup/planting-detail-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Form,
   FormControl,
@@ -29,7 +31,7 @@ export default function PlantingDetailsForm() {
             <FormItem>
               <FormLabel className="font-bold text-lg">Day to Emerge</FormLabel>
               <FormControl>
-                <div className="mt-10 space-y-5">
+                <div className="mt-5 space-y-5">
                   <div className="flex space-x-5">
                     <Input
                       type="text"
@@ -44,6 +46,98 @@ export default function PlantingDetailsForm() {
             </FormItem>
           )}
         />
+        <FormField
+          control={form.control}
+          name="plantSpacing"
+          render={({ field }: { field: any }) => (
+            <FormItem>
+              <FormLabel className="font-bold text-lg">Plant Spacing</FormLabel>
+              <FormControl>
+                <div className="mt-5 space-y-5">
+                  <div className="flex space-x-5">
+                    <Input
+                      type="text"
+                      id="plantSpacing"
+                      className="w-96"
+                      {...field}
+                    />
+                  </div>
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="rowSpacing"
+          render={({ field }: { field: any }) => (
+            <FormItem>
+              <FormLabel className="font-bold text-lg">Row Spacing</FormLabel>
+              <FormControl>
+                <div className="mt-10 space-y-5">
+                  <div className="flex space-x-5">
+                    <Input
+                      type="text"
+                      id="rowSpacing"
+                      className="w-96"
+                      {...field}
+                    />
+                  </div>
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="plantingDepth"
+          render={({ field }: { field: any }) => (
+            <FormItem>
+              <FormLabel className="font-bold text-lg">
+                Planting Depth
+              </FormLabel>
+              <FormControl>
+                <div className="mt-10 space-y-5">
+                  <div className="flex space-x-5">
+                    <Input
+                      type="text"
+                      id="plantingDepth"
+                      className="w-96"
+                      {...field}
+                    />
+                  </div>
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="averageHeight"
+          render={({ field }: { field: any }) => (
+            <FormItem>
+              <FormLabel className="font-bold text-lg">
+                Average Height
+              </FormLabel>
+              <FormControl>
+                <div className="mt-10 space-y-5">
+                  <div className="flex space-x-5">
+                    <Input
+                      type="text"
+                      id="averageHeight"
+                      className="w-96"
+                      {...field}
+                    />
+                  </div>
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
       </form>
     </Form>
   );