feat: Add some new connection

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

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useCreateTaskMutation } from "../../../store/api/taskApi";
 
 const CreateTask = ({ farmId, onTaskCreated }) => {
   const [farm, setFarm] = useState(farmId);
@@ -10,6 +11,8 @@ const CreateTask = ({ farmId, onTaskCreated }) => {
   const [message, setMessage] = useState("");
   const [modalOpen, setModalOpen] = useState(false);
 
+  const [createTask] = useCreateTaskMutation();
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
@@ -27,20 +30,11 @@ const CreateTask = ({ farmId, onTaskCreated }) => {
       status,
     };
 
+    console.log("Task Data is worked : ", taskData);
+
     try {
-      const response = await fetch("http://localhost:8000/api/v1/task", {
-        method: "POST",
-        credentials: "include",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(taskData),
-      });
-      if (!response.ok) {
-        throw new Error("Failed to create task");
-      }
-      const data = await response.json();
-      console.log("Task created:", data);
+      const res = await createTask(taskData).unwrap();
+
       setMessage("Task created successfully!");
       setModalOpen(false);
       // Call the parent's callback with the newly created task

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

@@ -1,11 +1,20 @@
 import React, { useState, useEffect } from "react";
 import Loader from "../../../components/Loader";
+import { useGetTasksByFarmQuery } from "../../../store/api/taskApi";
 
 const DisplayTast = ({ farmId }) => {
   const [tasks, setTasks] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
+  const {
+    data: taskList,
+    error: taskError,
+    isLoading,
+  } = useGetTasksByFarmQuery(farmId);
+
+  console.log("Task list is : ", taskList);
+
   // Function to delete a task and update the state
   const handleDeleteTask = async (taskId) => {
     try {
@@ -31,33 +40,11 @@ const DisplayTast = ({ farmId }) => {
   };
 
   useEffect(() => {
-    const fetchTasks = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const response = await fetch(
-          `http://localhost:8000/api/v1/task/farm/${farmId}`,
-          {
-            credentials: "include",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
-        if (!response.ok) {
-          throw new Error("Failed to fetch tasks");
-        }
-        const data = await response.json();
-        setTasks(data);
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchTasks();
-  }, [farmId]);
+    if (taskList) {
+      setTasks(taskList);
+      setLoading(false);
+    }
+  }, [farmId, taskList]);
 
   if (loading) return <div>Loading tasks...</div>;
   if (error) return <div className="text-red-600">Error: {error}</div>;

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

@@ -1,11 +1,35 @@
 import React, { useState, useEffect } from "react";
 import Loader from "../../../components/Loader";
+import { useGetTransactionsQuery } from "../../../store/api/financeApi";
+
+function formatTimestamp(isoString) {
+  const date = new Date(isoString);
+  return date.toLocaleString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true, // Ensures AM/PM format
+  });
+}
 
 const FinanceSummary = ({ farmId, financeId }) => {
   const [summary, setSummary] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
+  console.log("Finance id /mljkfgj is : ", financeId);
+
+  const {
+    data: transaction,
+    error: transactionError,
+    isLoading,
+  } = useGetTransactionsQuery(financeId);
+
+  console.log("Transaction data is : ", transaction);
+
   useEffect(() => {
     const fetchSummary = async () => {
       setLoading(true);
@@ -52,23 +76,48 @@ const FinanceSummary = ({ farmId, financeId }) => {
           <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
+                Type of Transaction
               </th>
               <th scope="col" className="px-6 py-3">
-                Location
+                Amount
               </th>
               <th scope="col" className="px-6 py-3">
-                Type
+                Description
               </th>
               <th scope="col" className="px-6 py-3">
-                Size (acres)
+                Date
               </th>
               <th scope="col" className="px-6 py-3">
                 Action
               </th>
             </tr>
           </thead>
-          <tbody></tbody>
+          <tbody>
+            {transaction?.map((transaction) => (
+              <tr>
+                <td scope="col" className="px-6 py-3">
+                  {transaction.type}
+                </td>
+                <td scope="col" className="px-6 py-3">
+                  {transaction.amount}
+                </td>
+                <td scope="col" className="px-6 py-3">
+                  {transaction.description}
+                </td>
+                <td scope="col" className="px-6 py-3">
+                  {formatTimestamp(transaction.date)}
+                </td>
+                <td className="px-6 py-4">
+                  <button
+                    className="block text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5"
+                    type="button"
+                  >
+                    Remove
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
         </table>
       </div>
     </div>