feat: streamline setup page with step navigation and enhance map area selection

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

@@ -1,123 +1,118 @@
 "use client";
-import { SetStateAction, useEffect, useState } from "react";
+import { useState } from "react";
 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 { Separator } from "@/components/ui/separator";
 import {
   plantingDetailsFormSchema,
   harvestDetailsFormSchema,
 } from "@/schemas/application.schema";
 import { z } from "zod";
 
-type plantingSchema = z.infer<typeof plantingDetailsFormSchema>;
-type harvestSchema = z.infer<typeof harvestDetailsFormSchema>;
+type PlantingSchema = z.infer<typeof plantingDetailsFormSchema>;
+type HarvestSchema = z.infer<typeof harvestDetailsFormSchema>;
+
+const steps = [
+  { title: "Step 1", description: "Planting Details" },
+  { title: "Step 2", description: "Harvest Details" },
+  { title: "Step 3", description: "Select Map Area" },
+];
 
 export default function SetupPage() {
-  const [plantingDetails, setPlantingDetails] = useState<plantingSchema | null>(
+  const [step, setStep] = useState(1);
+  const [plantingDetails, setPlantingDetails] = useState<PlantingSchema | null>(
     null
   );
-  const [harvestDetails, setHarvestDetails] = useState<harvestSchema | null>(
+  const [harvestDetails, setHarvestDetails] = useState<HarvestSchema | null>(
     null
   );
   const [mapData, setMapData] = useState<{ lat: number; lng: number }[] | null>(
     null
   );
 
-  // handle planting details submission
-  const handlePlantingDetailsChange = (data: plantingSchema) => {
-    setPlantingDetails(data);
+  const handleNext = () => {
+    if (step === 1 && !plantingDetails) {
+      alert("Please complete the Planting Details before proceeding.");
+      return;
+    }
+    if (step === 2 && !harvestDetails) {
+      alert("Please complete the Harvest Details before proceeding.");
+      return;
+    }
+    setStep((prev) => prev + 1);
   };
 
-  // handle harvest details submission
-  const handleHarvestDetailsChange = (data: harvestSchema) => {
-    setHarvestDetails(data);
+  const handleBack = () => {
+    setStep((prev) => prev - 1);
   };
 
-  // handle map area selection
-  const handleMapDataChange = (data: { lat: number; lng: number }[]) => {
-    setMapData((prevMapData) => {
-      if (prevMapData) {
-        return [...prevMapData, ...data];
-      } else {
-        return data;
-      }
-    });
-  };
-
-  // log the changes
-  useEffect(() => {
-    // console.log(plantingDetails);
-    // console.log(harvestDetails);
-    console.table(mapData);
-  }, [plantingDetails, harvestDetails, mapData]);
-
   const handleSubmit = () => {
-    if (!plantingDetails || !harvestDetails || !mapData) {
-      alert("Please complete all sections before submitting.");
+    if (!mapData) {
+      alert("Please select an area on the map before submitting.");
       return;
     }
 
-    const formData = {
-      plantingDetails,
-      harvestDetails,
-      mapData,
-    };
-
-    console.log("Form data to be submitted:", formData);
-
-    fetch("/api/submit", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(formData),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log("Response from backend:", data);
-      })
-      .catch((error) => {
-        console.error("Error submitting form:", error);
-      });
+    console.log("Submitting:", { plantingDetails, harvestDetails, mapData });
   };
 
   return (
     <div className="p-5">
-      {/* Planting Details Section */}
-      <div className="flex justify-center">
-        <h1 className="text-2xl">Planting Details</h1>
-      </div>
-      <Separator className="mt-3" />
-      <div className="mt-10 flex justify-center">
-        <PlantingDetailsForm onChange={handlePlantingDetailsChange} />
+      {/* Stepper Navigation */}
+      <div className="flex justify-between items-center mb-5">
+        {steps.map((item, index) => (
+          <div key={index} className="flex flex-col items-center">
+            <div
+              className={`w-10 h-10 flex items-center justify-center rounded-full text-white font-bold ${
+                step === index + 1 ? "bg-blue-500" : "bg-gray-500"
+              }`}
+            >
+              {index + 1}
+            </div>
+            <span className="font-medium mt-2">{item.title}</span>
+            <span className="text-gray-500 text-sm">{item.description}</span>
+          </div>
+        ))}
       </div>
 
-      {/* Harvest Details Section */}
-      <div className="flex justify-center mt-20">
-        <h1 className="text-2xl">Harvest Details</h1>
-      </div>
-      <Separator className="mt-3" />
-      <div className="mt-10 flex justify-center">
-        <HarvestDetailsForm onChange={handleHarvestDetailsChange} />
-      </div>
+      <Separator className="mb-5" />
 
-      {/* Map Section */}
-      <div className="mt-10">
-        <div className="flex justify-center mt-20">
-          <h1 className="text-2xl">Map</h1>
-        </div>
-        <Separator className="mt-3" />
-        <div className="mt-10">
-          <GoogleMapWithDrawing onAreaSelected={handleMapDataChange} />
-        </div>
-      </div>
+      {step === 1 && (
+        <>
+          <h2 className="text-xl text-center">Planting Details</h2>
+          <PlantingDetailsForm onChange={setPlantingDetails} />
+        </>
+      )}
 
-      {/* Submit Button */}
-      <div className="mt-10 flex justify-center">
-        <button onClick={handleSubmit} className="btn btn-primary">
-          Submit All Data
-        </button>
+      {step === 2 && (
+        <>
+          <h2 className="text-xl text-center">Harvest Details</h2>
+          <HarvestDetailsForm onChange={setHarvestDetails} />
+        </>
+      )}
+
+      {step === 3 && (
+        <>
+          <h2 className="text-xl text-center">Select Area on Map</h2>
+          <GoogleMapWithDrawing onAreaSelected={setMapData} />
+        </>
+      )}
+
+      <div className="mt-10 flex justify-between">
+        {step > 1 && (
+          <button onClick={handleBack} className="btn btn-secondary">
+            Back
+          </button>
+        )}
+        {step < 3 ? (
+          <button onClick={handleNext} className="btn btn-primary">
+            Next
+          </button>
+        ) : (
+          <button onClick={handleSubmit} className="btn btn-success">
+            Submit
+          </button>
+        )}
       </div>
     </div>
   );

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

@@ -21,42 +21,7 @@ const GoogleMapWithDrawing = ({
     (overlay: google.maps.drawing.OverlayCompleteEvent) => {
       const shape = overlay.overlay;
 
-      // check the shape of the drawing and extract lat/lng values
-      if (shape instanceof google.maps.Polygon) {
-        const path = shape.getPath();
-        const coordinates = path.getArray().map((latLng) => ({
-          lat: latLng.lat(),
-          lng: latLng.lng(),
-        }));
-        console.log("Polygon coordinates:", coordinates);
-        onAreaSelected(coordinates);
-      } else if (shape instanceof google.maps.Rectangle) {
-        const bounds = shape.getBounds();
-        if (bounds) {
-          const northEast = bounds.getNorthEast();
-          const southWest = bounds.getSouthWest();
-          const coordinates = [
-            { lat: northEast.lat(), lng: northEast.lng() },
-            { lat: southWest.lat(), lng: southWest.lng() },
-          ];
-          console.log("Rectangle coordinates:", coordinates);
-          onAreaSelected(coordinates);
-        }
-      } else if (shape instanceof google.maps.Circle) {
-        const center = shape.getCenter();
-        const radius = shape.getRadius();
-        if (center) {
-          const coordinates = [
-            {
-              lat: center.lat(),
-              lng: center.lng(),
-              radius: radius, // circle's radius in meters
-            },
-          ];
-          console.log("Circle center:", coordinates);
-          onAreaSelected(coordinates);
-        }
-      } else if (shape instanceof google.maps.Polyline) {
+      if (shape instanceof google.maps.Polyline) {
         const path = shape.getPath();
         const coordinates = path.getArray().map((latLng) => ({
           lat: latLng.lat(),
@@ -90,9 +55,6 @@ const GoogleMapWithDrawing = ({
               drawingControlOptions: {
                 position: google.maps.ControlPosition.TOP_CENTER,
                 drawingModes: [
-                  google.maps.drawing.OverlayType.POLYGON,
-                  google.maps.drawing.OverlayType.RECTANGLE,
-                  google.maps.drawing.OverlayType.CIRCLE,
                   google.maps.drawing.OverlayType.POLYLINE,
                 ],
               },