feat: replace button elements with UI component for navigation and form submission

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

@@ -9,6 +9,7 @@ import {
   harvestDetailsFormSchema,
 } from "@/schemas/application.schema";
 import { z } from "zod";
+import { Button } from "@/components/ui/button";
 
 type PlantingSchema = z.infer<typeof plantingDetailsFormSchema>;
 type HarvestSchema = z.infer<typeof harvestDetailsFormSchema>;
@@ -99,19 +100,14 @@ export default function SetupPage() {
       )}
 
       <div className="mt-10 flex justify-between">
-        {step > 1 && (
-          <button onClick={handleBack} className="btn btn-secondary">
-            Back
-          </button>
-        )}
+        <Button onClick={handleBack} disabled={step === 1}>
+          Back
+        </Button>
+
         {step < 3 ? (
-          <button onClick={handleNext} className="btn btn-primary">
-            Next
-          </button>
+          <Button onClick={handleNext}>Next</Button>
         ) : (
-          <button onClick={handleSubmit} className="btn btn-success">
-            Submit
-          </button>
+          <Button onClick={handleSubmit}>Submit</Button>
         )}
       </div>
     </div>

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

@@ -23,14 +23,16 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
+import { useRef } from "react";
 
 type plantingSchema = z.infer<typeof plantingDetailsFormSchema>;
 
 export default function PlantingDetailsForm({
   onChange,
 }: {
-  onChange: (data: plantingSchema) => void;
+  onChange: (data: plantingSchema) => void; 
 }) {
+  const formRef = useRef<HTMLFormElement>(null);
   const form = useForm({
     resolver: zodResolver(plantingDetailsFormSchema),
     defaultValues: {
@@ -57,6 +59,7 @@ export default function PlantingDetailsForm({
       <form
         className="grid grid-cols-3 gap-5"
         onSubmit={form.handleSubmit(onSubmit)}
+        ref={formRef}
       >
         <FormField
           control={form.control}
@@ -369,7 +372,9 @@ export default function PlantingDetailsForm({
           )}
         />
         <div className="col-span-3 flex justify-center">
-          <Button type="submit">Save</Button>
+          <Button type="submit">
+            Save
+          </Button>
         </div>
       </form>
     </Form>

frontend/components/google-map-with-drawing.tsx

@@ -27,7 +27,7 @@ const GoogleMapWithDrawing = ({
           lat: latLng.lat(),
           lng: latLng.lng(),
         }));
-        console.log("Polyline coordinates:", coordinates);
+        // console.log("Polyline coordinates:", coordinates);
         onAreaSelected(coordinates);
       } else {
         console.log("Unknown shape detected:", shape);