Fix:Added Create finanace and View Finance

Frontend/src/main.jsx

@@ -26,7 +26,6 @@ import Monitoring from "./pages/UserPanel/Monitoring.jsx";
 import AddFarm from "./pages/UserPanel/Farm/AddFarm.jsx";
 import UpdateFarm from "./pages/UserPanel/Farm/UpdateForm.jsx";
 import FarmPage from "./pages/UserPanel/Farm/FarmPage.jsx";
-import EditFarm from "./pages/UserPanel/Farm/EditFarm.jsx";
 createRoot(document.getElementById("root")).render(
   <StrictMode>
     <Provider store={MentifyStore}>

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

@@ -44,6 +44,7 @@ const AddFarm = () => {
       setSuccess(true);
       setError(null);
       setIsModalOpen(false);
+      window.location.reload();
     } catch (err) {
       setError(err.message);
       setSuccess(false);
@@ -53,7 +54,9 @@ const AddFarm = () => {
   return (
     <>
       <button
-        onClick={() => setIsModalOpen(true)}
+        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"
       >

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

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+
+const CreateFinance = () => {
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState("");
+  // Hardcoded farm ID from your example
+  const farmId = "67b9e6829c4979463e64a0fc";
+
+  const handleCreateFinance = async () => {
+    setLoading(true);
+    setMessage("");
+    try {
+      const response = await fetch("http://localhost:8000/api/v1/finance", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ farm: farmId }),
+      });
+      if (!response.ok) {
+        throw new Error("Failed to create finance");
+      }
+      const data = await response.json();
+      console.log("Finance response:", data);
+      setMessage("Finance created successfully!");
+    } catch (error) {
+      console.error("Error creating finance:", error);
+      setMessage("Error creating finance.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto p-4 border rounded shadow">
+      <h2 className="text-xl font-bold mb-4">Create Finance</h2>
+      <button
+        onClick={handleCreateFinance}
+        disabled={loading}
+        className="mt-4 w-full inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      >
+        {loading ? "Creating..." : "Create Finance"}
+      </button>
+      {message && <p className="mt-4 text-sm text-green-600">{message}</p>}
+    </div>
+  );
+};
+
+export default CreateFinance;

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

@@ -17,6 +17,7 @@ const EditFarm = ({ _id, onDelete }) => {
         if (onDelete) onDelete(_id);
       }
       setModalOpen(false); // Close the modal after the operation
+      window.location.reload();
     } catch (error) {
       console.error("Error deleting farm:", error);
     }

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

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import Farm from "./Farm";
 import CropTable from "./CropTable";
+import Transactions from "./Transactions";
+import CreateTransactions from "./CreateTransactions";
 
 export default function FarmPage() {
   const { farmId } = useParams();
@@ -59,9 +61,15 @@ export default function FarmPage() {
       <div className="mb-4 flex justify-end">
         <Farm farmData={farmData} farmId={farmId}></Farm>
       </div>
-      <div>
+      <div className="mb-4 ">
         <CropTable farmId={farmId}></CropTable>
       </div>
+      <div className="mb-4 flex justify-end">
+        <CreateTransactions farmId={farmId}></CreateTransactions>
+      </div>
+      <div className="mb-4 ">
+        <Transactions farmId={farmId}></Transactions>
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import Td from "../../../components/Td";
+
+const Transactions = ({ farmId }) => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(`http://localhost:8000/api/v1/finance/${farmId}`, {
+      credentials: "include",
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setData(data);
+        console.log("Fetched data:", data);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error("Error fetching transactions:", error);
+        setLoading(false);
+      });
+  }, [farmId]);
+
+  return (
+    <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
+      {loading ? (
+        <div>Loading...</div>
+      ) : (
+        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+          <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>
+          <tbody>
+            {Array.isArray(data) && data.length > 0 ? (
+              data.map((item) => <Td key={item.id} children={item} />)
+            ) : (
+              <tr>
+                <td colSpan={5} className="text-center">
+                  No data available
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+};
+
+export default Transactions;