feat:Add individual crop page

Frontend/src/components/TotalSpent.jsx

@@ -1,4 +1,28 @@
+import { useEffect, useState } from "react";
+import { useGetFarmsQuery } from "../store/api/farmApi";
+
+const calculateSpend = (farmList) => {
+  let totalSpend = 0;
+  for (let i = 0; i < farmList.length; i++) {
+    if (!farmList[i]) continue;
+    if (!farmList[i]?.finances) continue;
+    if (!farmList[i]?.finances?.totalExpenses) continue;
+    totalSpend += farmList[i]?.finances?.totalExpenses;
+  }
+  return totalSpend;
+};
+
 const TotalSpent = () => {
+  const [totalSpend, setTotalSpend] = useState(0);
+  const { data: farmList, isLoading, error } = useGetFarmsQuery();
+
+  useEffect(() => {
+    if (!isLoading && !error && farmList) {
+      setTotalSpend(calculateSpend(farmList));
+    }
+  }, [farmList]);
+
+  console.log("My farm list is : ", farmList);
   return (
     <div className="h-full">
       <a
@@ -6,7 +30,7 @@ const TotalSpent = () => {
         className="h-full block max-w-sm p-6 bg-no-repeat bg-center bg-cover border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
       >
         <h5 className="mb-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
-          ₹10,000
+          {totalSpend && totalSpend} ₹
         </h5>
         <p className="font-normal text-gray-700 dark:text-gray-400">
           This is the total cost which you spent on this farm

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

@@ -10,7 +10,25 @@ import FinanceSummary from "./FinanceSummary";
 import CreateTask from "./CreateTask";
 import DisplayTast from "./DisplayTask";
 import { useGetFarmByIdQuery } from "../../../store/api/farmApi";
-import { useGetCropByIdQuery } from "../../../store/api/cropApi";
+import {
+  useCropHarvestQuery,
+  useGetCropByIdQuery,
+  useSuggestFertilizersQuery,
+  useSuggestNextCropQuery,
+  useSuggestPesticidesQuery,
+} from "../../../store/api/cropApi";
+import { PiPottedPlantFill } from "react-icons/pi";
+import { GiGrimReaper } from "react-icons/gi";
+import { GiProgression } from "react-icons/gi";
+
+function formatDate(isoString) {
+  const date = new Date(isoString);
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
 
 export default function CropPage() {
   const { cropId } = useParams();
@@ -37,6 +55,31 @@ export default function CropPage() {
   }, [farm]);
 
   console.log("djoejwrru9", crop);
+  const {
+    data: harvest,
+    isLoading: harvestLoading,
+    error: harvestError,
+  } = useCropHarvestQuery(cropId);
+
+  console.log("Haraufugfudg : ", harvest);
+
+  const {
+    data: pesticides,
+    isLoading: pesticideLoading,
+    error: pesticideError,
+  } = useSuggestPesticidesQuery(cropId);
+
+  const {
+    data: fertilizers,
+    isLoading: fertilizerLoading,
+    error: fertilizerError,
+  } = useSuggestFertilizersQuery(cropId);
+
+  const {
+    data: nextCrop,
+    isLoading: nextCropLoading,
+    error: nextCropError,
+  } = useSuggestNextCropQuery(cropId);
 
   return (
     <div className="w-full bg-white rounded-lg shadow p-4 space-y-8">
@@ -57,48 +100,160 @@ export default function CropPage() {
       </header>
 
       {/* Crop Table Section */}
-      <section>
+      <section className="w-full flex justify-center">
-        <CropTable farmId={farmId} />
+        <img src={crop?.image} className="w-1/2 h-auto rounded-md" alt="" />
       </section>
 
-      {/* Create Transactions Section */}
+      <section className="w-full flex justify-center flex-col">
-      <section>
+        <div className="w-full h-auto flex items-center justify-between gap-5">
-        <div className="flex justify-end">
+          <div className="w-full">
-          <CreateTransactions farmId={farmId} />
+            <button
+              data-tooltip-target="tooltip-light"
+              data-tooltip-style="light"
+              type="button"
+              class="text-white w-full text-md font-semibold bg-green-700 hover:bg-green-800 focus:ring-4 inline-flex items-center gap-2 focus:outline-none focus:ring-green-300  rounded-lg px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              <PiPottedPlantFill className="text-2xl" />{" "}
+              {formatDate(crop?.plantedDate)}
+            </button>
+            <div
+              id="tooltip-light"
+              role="tooltip"
+              class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 tooltip"
+            >
+              Planted Date
+              <div class="tooltip-arrow" data-popper-arrow></div>
+            </div>
+          </div>
+
+          <div className="w-full">
+            <button
+              data-tooltip-target="tooltip-light1"
+              data-tooltip-style="light"
+              type="button"
+              class=" w-full text-black text-md font-semibold bg-green-200 hover:bg-green-300 focus:ring-4 inline-flex items-center gap-2 focus:outline-none focus:ring-green-300  rounded-lg px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              <GiGrimReaper className="text-2xl" />{" "}
+              {formatDate(crop?.harvestDate)}
+            </button>
+            <div
+              id="tooltip-light1"
+              role="tooltip"
+              class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 tooltip"
+            >
+              Harvest Date
+              <div class="tooltip-arrow" data-popper-arrow></div>
+            </div>
+          </div>
+
+          <div className="w-full">
+            <button
+              data-tooltip-target="tooltip-light2"
+              data-tooltip-style="light"
+              type="button"
+              class="text-black w-full text-md font-semibold bg-white hover:bg-green-50 focus:ring-4 inline-flex items-center gap-2 focus:outline-none focus:ring-orange-300 border-2 border-green-200 rounded-lg px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              <GiProgression className="text-2xl" />{" "}
+              {formatDate(crop?.harvestDate)}
+            </button>
+            <div
+              id="tooltip-light2"
+              role="tooltip"
+              class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 tooltip"
+            >
+              Progress
+              <div class="tooltip-arrow" data-popper-arrow></div>
+            </div>
+          </div>
         </div>
       </section>
 
-      {/* Transactions Table Section */}
+      <section className="w-full flex justify-center flex-col">
-      <section>
+        <h1 className="text-2xl font-bold text-center my-3 mb-10">
-        <Transactions farmId={farmId} />
+          Automated Mentoring For Crop Health And Groth
-      </section>
+        </h1>
 
-      {/* Add Transaction Modal Section */}
+        <div className="overflow-hidden rounded-xl">
-      <section>
+          <table>
-        <div className="flex justify-end">
+            <thead className="bg-gray-50 ">
-          <AddTransaction farmId={farmId} financeId={farmData?.finances?._id} />
+              <tr>
-        </div>
+                <th className="px-6 py-3 font-extrabold text-left text-sm  text-gray-800 uppercase tracking-wider  border-2">
-      </section>
+                  Expected Doubts
+                </th>
+                <th className="px-6 py-3 font-extrabold text-left text-sm  text-gray-800 uppercase tracking-wider  border-2">
+                  Approximate Solution
+                </th>
+              </tr>
+            </thead>
 
-      {/* Finance Summary Section */}
+            <tbody>
-      <section>
+              <tr className="hover:bg-gray-50">
-        <div className="flex justify-end">
+                <td className="px-6 py-4 whitespace-nowrap  border-2">
-          <FinanceSummary farmId={farmId} financeId={farmData?.finances?._id} />
+                  Approximate Harvest Date
-        </div>
+                </td>
-      </section>
+                <td className="px-6 py-4 whitespace-pre-wrap border-2">
+                  {harvest?.message}
+                </td>
+              </tr>
 
-      {/* Create Task Section */}
+              <tr className="hover:bg-gray-50">
-      <section>
+                <td className="px-6 py-4 whitespace-nowrap  border-2">
-        <div className="flex justify-end">
+                  Suitable Pesticides For Crop
-          <CreateTask farmId={farmId} />
+                </td>
-        </div>
+                <td className="px-6 py-4 whitespace-pre-wrap border-2">
-      </section>
+                  {pesticides?.message}
+                </td>
+              </tr>
 
-      {/* Display Task Section */}
+              <tr className="hover:bg-gray-50">
-      <section>
+                <td className="px-6 py-4 whitespace-nowrap  border-2">
-        <div className="flex justify-end">
+                  Suitable fertilizers For Crop
-          <DisplayTast farmId={farmId} />
+                </td>
+                <td className="px-6 py-4 whitespace-pre-wrap border-2">
+                  {fertilizers?.message}
+                </td>
+              </tr>
+
+              <tr className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap  border-2">
+                  Best Crop To Grow
+                </td>
+                <td className="px-6 py-4 whitespace-pre-wrap border-2">
+                  {nextCrop?.message}
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
+
+        {/* <div className="flex items-start justify-start gap-5">
+          <h6 className="text-lg font-semibold min-w-[200px] text-nowrap">
+            Approximate Harvest Date:
+          </h6>
+
+          <p className="w-auto"></p>
+        </div>
+
+        <div className="flex items-start justify-start gap-5">
+          <h6 className="text-lg font-semibold text-nowrap">
+            Suitable Pesticides For Crop:
+          </h6>
+          <p>{pesticides?.message}</p>
+        </div>
+
+        <div className="flex items-start justify-start gap-5">
+          <h6 className="text-lg font-semibold text-nowrap">
+            Suitable fertilizers For Crop:
+          </h6>
+          <p>{fertilizers?.message}</p>
+        </div>
+
+        <div className="flex items-start justify-start gap-5">
+          <h6 className="text-lg font-semibold text-nowrap">
+            Best Crop To Grow:
+          </h6>
+          <p>{nextCrop?.message}</p>
+        </div> */}
       </section>
     </div>
   );

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Loader from "../../../components/Loader";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useGetCropsByFarmQuery } from "../../../store/api/cropApi";
 
 const CropTable = ({ farmId }) => {
@@ -8,6 +8,8 @@ const CropTable = ({ farmId }) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
+  const navigate = useNavigate();
+
   const {
     data: cropsData,
     error: cropsError,
@@ -91,7 +93,13 @@ const CropTable = ({ farmId }) => {
           </thead>
           <tbody className="bg-white divide-y divide-gray-200">
             {crops.map((crop) => (
-              <tr key={crop._id} className="hover:bg-gray-50">
+              <tr
+                key={crop._id}
+                className="hover:bg-gray-50"
+                onClick={() => {
+                  navigate(`/user/dashboard/croppage/${crop._id}`);
+                }}
+              >
                 <td className="px-6 py-4 whitespace-nowrap">
                   <div className="h-12 w-12 rounded-full overflow-hidden">
                     {crop.image ? (