feat:Add individual crop page
This commit is contained in:
@@ -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>
|
||||
<CropTable farmId={farmId} />
|
||||
<section className="w-full flex justify-center">
|
||||
<img src={crop?.image} className="w-1/2 h-auto rounded-md" alt="" />
|
||||
</section>
|
||||
|
||||
{/* Create Transactions Section */}
|
||||
<section>
|
||||
<div className="flex justify-end">
|
||||
<CreateTransactions farmId={farmId} />
|
||||
<section className="w-full flex justify-center flex-col">
|
||||
<div className="w-full h-auto flex items-center justify-between gap-5">
|
||||
<div className="w-full">
|
||||
<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>
|
||||
<Transactions farmId={farmId} />
|
||||
</section>
|
||||
<section className="w-full flex justify-center flex-col">
|
||||
<h1 className="text-2xl font-bold text-center my-3 mb-10">
|
||||
Automated Mentoring For Crop Health And Groth
|
||||
</h1>
|
||||
|
||||
{/* Add Transaction Modal Section */}
|
||||
<section>
|
||||
<div className="flex justify-end">
|
||||
<AddTransaction farmId={farmId} financeId={farmData?.finances?._id} />
|
||||
</div>
|
||||
</section>
|
||||
<div className="overflow-hidden rounded-xl">
|
||||
<table>
|
||||
<thead className="bg-gray-50 ">
|
||||
<tr>
|
||||
<th className="px-6 py-3 font-extrabold text-left text-sm text-gray-800 uppercase tracking-wider border-2">
|
||||
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 */}
|
||||
<section>
|
||||
<div className="flex justify-end">
|
||||
<FinanceSummary farmId={farmId} financeId={farmData?.finances?._id} />
|
||||
</div>
|
||||
</section>
|
||||
<tbody>
|
||||
<tr className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap border-2">
|
||||
Approximate Harvest Date
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-pre-wrap border-2">
|
||||
{harvest?.message}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Create Task Section */}
|
||||
<section>
|
||||
<div className="flex justify-end">
|
||||
<CreateTask farmId={farmId} />
|
||||
</div>
|
||||
</section>
|
||||
<tr className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap border-2">
|
||||
Suitable Pesticides For Crop
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-pre-wrap border-2">
|
||||
{pesticides?.message}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Display Task Section */}
|
||||
<section>
|
||||
<div className="flex justify-end">
|
||||
<DisplayTast farmId={farmId} />
|
||||
<tr className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap border-2">
|
||||
Suitable fertilizers For Crop
|
||||
</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>
|
||||
);
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
Reference in New Issue
Block a user