From fdee1beb05fb53474bfc418a2864cb3e0ea3687b Mon Sep 17 00:00:00 2001
From: Atharva <aaombase@gmail.com>
Date: Sat, 22 Feb 2025 20:01:52 +0530
Subject: [PATCH] Added add farm option in dashboard and created add farm
 model.

---
 Frontend/src/pages/UserPanel/AddFarm.jsx   | 260 ++++++++++++++-------
 Frontend/src/pages/UserPanel/Dashboard.jsx |  14 +-
 2 files changed, 179 insertions(+), 95 deletions(-)

diff --git a/Frontend/src/pages/UserPanel/AddFarm.jsx b/Frontend/src/pages/UserPanel/AddFarm.jsx
index ee182ca..9b5d6a3 100644
--- a/Frontend/src/pages/UserPanel/AddFarm.jsx
+++ b/Frontend/src/pages/UserPanel/AddFarm.jsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 const AddFarm = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [farmName, setFarmName] = useState("");
   const [location, setLocation] = useState("");
   const [waterContent, setWaterContent] = useState("");
@@ -9,6 +10,7 @@ const AddFarm = () => {
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(false);
   const navigate = useNavigate();
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     const farmData = {
@@ -33,7 +35,7 @@ const AddFarm = () => {
 
       setSuccess(true);
       setError(null);
-      // navigate to the dashboard:
+      setIsModalOpen(false);
       navigate("/dashboard");
     } catch (err) {
       setError(err.message);
@@ -42,89 +44,181 @@ const AddFarm = () => {
   };
 
   return (
-    <div className="w-full bg-white rounded-lg shadow p-4">
-      <h1 className="w-full text-center text-2xl font-bold my-5">Add Farm</h1>
-      <div className="mb-4 flex justify-end space-x-4">
-        <form className="max-w-md mx-auto w-80" onSubmit={handleSubmit}>
-          <div className="mb-5">
-            <label
-              htmlFor="farmName"
-              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-            >
-              Farm Name
-            </label>
-            <input
-              type="text"
-              id="farmName"
-              value={farmName}
-              onChange={(e) => setFarmName(e.target.value)}
-              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
-              required
-            />
+    <>
+      <button
+        onClick={() => setIsModalOpen(true)}
+        className="block text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+        type="button"
+      >
+        Add New Farm
+      </button>
+
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 overflow-y-auto overflow-x-hidden flex items-center justify-center">
+          <div
+            className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
+            onClick={() => setIsModalOpen(false)}
+          ></div>
+
+          <div className="relative w-full max-w-2xl mx-4">
+            <div className="relative bg-white rounded-xl shadow-lg">
+              {/* Decorative Leaves */}
+              <div className="absolute right-0 top-0 h-full w-48 overflow-hidden pointer-events-none">
+                <svg
+                  viewBox="0 0 200 800"
+                  className="absolute right-0 h-full transform translate-x-16 fill-green-100"
+                >
+                  <path d="M0,0 Q100,200 0,400 Q100,600 0,800 L200,800 L200,0 Z" />
+                </svg>
+                <svg
+                  viewBox="0 0 200 800"
+                  className="absolute right-0 h-full transform translate-x-8 fill-green-200/40"
+                >
+                  <path d="M0,0 Q80,200 0,400 Q80,600 0,800 L200,800 L200,0 Z" />
+                </svg>
+
+                <svg
+                  viewBox="0 0 100 100"
+                  className="absolute right-12 top-20 w-16 h-16 fill-green-300/30"
+                >
+                  <path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
+                </svg>
+                <svg
+                  viewBox="0 0 100 100"
+                  className="absolute right-16 top-48 w-12 h-12 fill-green-400/20"
+                >
+                  <path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
+                </svg>
+              </div>
+
+              {/* Modal Header */}
+              <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
+                <h3 className="text-2xl font-semibold text-gray-800">
+                  Add New Farm
+                </h3>
+                <button
+                  type="button"
+                  onClick={() => setIsModalOpen(false)}
+                  className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center"
+                >
+                  <svg
+                    className="w-3 h-3"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 14 14"
+                  >
+                    <path
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+                    />
+                  </svg>
+                  <span className="sr-only">Close modal</span>
+                </button>
+              </div>
+
+              {/* Modal Body */}
+              <div className="p-4 md:p-5">
+                <form className="space-y-4" onSubmit={handleSubmit}>
+                  <div>
+                    <label
+                      htmlFor="farmName"
+                      className="block text-sm font-semibold text-gray-700 mb-2"
+                    >
+                      Farm Name
+                    </label>
+                    <input
+                      type="text"
+                      id="farmName"
+                      value={farmName}
+                      onChange={(e) => setFarmName(e.target.value)}
+                      className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
+                      placeholder="Enter farm name"
+                      required
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="location"
+                      className="block text-sm font-semibold text-gray-700 mb-2"
+                    >
+                      Location
+                    </label>
+                    <input
+                      type="text"
+                      id="location"
+                      value={location}
+                      onChange={(e) => setLocation(e.target.value)}
+                      className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
+                      placeholder="Enter location"
+                      required
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="waterContent"
+                      className="block text-sm font-semibold text-gray-700 mb-2"
+                    >
+                      Water Content
+                    </label>
+                    <input
+                      type="text"
+                      id="waterContent"
+                      value={waterContent}
+                      onChange={(e) => setWaterContent(e.target.value)}
+                      className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
+                      placeholder="Enter water content"
+                      required
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="soilType"
+                      className="block text-sm font-semibold text-gray-700 mb-2"
+                    >
+                      Soil Type
+                    </label>
+                    <input
+                      type="text"
+                      id="soilType"
+                      value={soilType}
+                      onChange={(e) => setSoilType(e.target.value)}
+                      className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
+                      placeholder="Enter soil type"
+                      required
+                    />
+                  </div>
+
+                  <button
+                    type="submit"
+                    className="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 ease-in-out transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2"
+                  >
+                    Add Farm
+                  </button>
+
+                  {error && (
+                    <p className="mt-4 text-red-500 text-sm bg-red-50 p-3 rounded-lg">
+                      {error}
+                    </p>
+                  )}
+                  {success && (
+                    <p className="mt-4 text-green-500 text-sm bg-green-50 p-3 rounded-lg">
+                      Farm added successfully!
+                    </p>
+                  )}
+                </form>
+              </div>
+            </div>
           </div>
-          <div className="mb-5">
-            <label
-              htmlFor="location"
-              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-            >
-              Location
-            </label>
-            <input
-              type="text"
-              id="location"
-              value={location}
-              onChange={(e) => setLocation(e.target.value)}
-              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
-              required
-            />
-          </div>
-          <div className="mb-5">
-            <label
-              htmlFor="waterContent"
-              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-            >
-              Water Content
-            </label>
-            <input
-              type="text"
-              id="waterContent"
-              value={waterContent}
-              onChange={(e) => setWaterContent(e.target.value)}
-              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
-              required
-            />
-          </div>
-          <div className="mb-5">
-            <label
-              htmlFor="soilType"
-              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-            >
-              Soil Type
-            </label>
-            <input
-              type="text"
-              id="soilType"
-              value={soilType}
-              onChange={(e) => setSoilType(e.target.value)}
-              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
-              required
-            />
-          </div>
-          <button
-            type="submit"
-            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-          >
-            Add Farm
-          </button>
-          {error && <p className="mt-4 text-red-500 text-sm">{error}</p>}
-          {success && (
-            <p className="mt-4 text-green-500 text-sm">
-              Farm added successfully!
-            </p>
-          )}
-        </form>
-      </div>
-    </div>
+        </div>
+      )}
+    </>
   );
 };
 
diff --git a/Frontend/src/pages/UserPanel/Dashboard.jsx b/Frontend/src/pages/UserPanel/Dashboard.jsx
index 658881e..498f29c 100644
--- a/Frontend/src/pages/UserPanel/Dashboard.jsx
+++ b/Frontend/src/pages/UserPanel/Dashboard.jsx
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import Piechart from "../../components/monitoring charts/Piechart";
 import TotalSpent from "../../components/TotalSpent";
 import FarmList from "../../components/FarmList";
+import AddFarm from "./AddFarm";
 
 const Dashboard = () => {
   const navigate = useNavigate();
@@ -10,18 +11,7 @@ const Dashboard = () => {
   return (
     <div className="w-full bg-white rounded-lg shadow p-4">
       <div className="mb-4 flex justify-end space-x-4">
-        <button
-          type="button"
-          className="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 font-semibold rounded-xl text-md px-6 py-3 mr-2 mb-2 dark:bg-gradient-to-r dark:from-blue-600 dark:via-blue-700 dark:to-blue-800 dark:hover:bg-gradient-to-br focus:outline-none dark:focus:ring-blue-800 float-right shadow-lg transform transition-transform hover:scale-105"
-          onClick={() => navigate("addfarm")}
-        >
-          <img
-            src="/images/add.svg"
-            alt="Add"
-            className="inline-block h-5 w-5 mr-2 mb-1"
-          />
-          New Farm
-        </button>
+        <AddFarm />
       </div>
 
       <div className="mb-4 flex space-x-4">