Fix:Implemented AddCrop component

Frontend/src/pages/UserPanel/Farm/FarmPage.jsx

@@ -1,9 +1,13 @@
 import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
+import Farm from "./Farm";
+import AddCrop from "../Crops/AddCrop";
 
 export default function FarmPage() {
   const { farmId } = useParams();
-  const [farmData, setFarmData] = useState({});
+  const navigate = useNavigate();
+  const [farmData, setFarmData] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     async function fetching() {
@@ -18,59 +22,39 @@ export default function FarmPage() {
             },
           }
         );
-        const jsonData = await response.json(); // renamed variable to avoid confusion
+        const jsonData = await response.json();
         console.log(jsonData);
         setFarmData(jsonData);
       } catch (error) {
         console.error("Error fetching farm data: ", error);
+      } finally {
+        setLoading(false);
       }
     }
     fetching();
   }, [farmId]);
 
+  if (loading) {
+    return (
+      <div className="w-full bg-white rounded-lg shadow p-4">
+        <p>Loading farm data...</p>
+      </div>
+    );
+  }
+
+  if (!farmData) {
+    return (
+      <div className="w-full bg-white rounded-lg shadow p-4">
+        <p>No farm data found.</p>
+      </div>
+    );
+  }
+
   return (
     <div className="w-full bg-white rounded-lg shadow p-4">
-      <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-        <tr>
-          <th scope="col" className="px-6 py-3">
-            Farm name
-          </th>
-          <th scope="col" className="px-6 py-3">
-            Location
-          </th>
-          <th scope="col" className="px-6 py-3">
-            Type
-          </th>
-          <th scope="col" className="px-6 py-3">
-            Size (acres)
-          </th>
-          <th scope="col" className="px-6 py-3">
-            Action
-          </th>
-        </tr>
-      </thead>
-      <tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
-        <td
-          className="px-6 py-4"
-          onClick={() => {
-            console.log("Td", farmData._id);
-            navigate(`farmpage/${farmData._id}`);
-          }}
-        >
-          {farmData.name}
-        </td>
-        <td className="px-6 py-4">{farmData.location}</td>
-        <td className="px-6 py-4">{farmData.soilType}</td>
-        <td className="px-6 py-4">{farmData.size}</td>
-        <td className="px-6 py-4">
-          <a
-            href="#"
-            className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-          >
-            Edit
-          </a>
-        </td>
-      </tr>
+      {/* Back Button */}
+      <Farm farmData={farmData}></Farm>
+      <AddCrop></AddCrop>
     </div>
   );
 }