44 lines
1.3 KiB
React
44 lines
1.3 KiB
React
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]);
|
|
|
|
|
|
return (
|
|
<div className="h-full">
|
|
<a
|
|
href="#"
|
|
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">
|
|
{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
|
|
</p>
|
|
</a>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TotalSpent;
|