feat:Fixed all the UI Pages

Frontend/src/pages/UserPanel/Monitoring.jsx

@@ -5,31 +5,67 @@ import PerformanceChart from "../../components/monitoring charts/PerformanceChar
 import AlertsPanel from "../../components/monitoring charts/AlertsPanel";
 import ActivityFeed from "../../components/monitoring charts/ActivityField";
 import Piechart from "../../components/monitoring charts/Piechart";
+import { useGetFarmsQuery } from "../../store/api/farmApi";
+import PerformanceChart2 from "../../components/monitoring charts/PerformanceChart2";
+
+const calculateSpend = (farms) => {
+  let totalSpend = 0;
+  for (let i = 0; i < farms.length; i++) {
+    if (!farms[i]) continue;
+    if (!farms[i]?.finances) continue;
+    if (!farms[i]?.finances?.totalExpenses) continue;
+    totalSpend += farms[i]?.finances?.totalExpenses;
+  }
+  return totalSpend;
+};
+
+const calculateRevenue = (farms) => {
+  let totalSpend = 0;
+  for (let i = 0; i < farms.length; i++) {
+    if (!farms[i]) continue;
+    if (!farms[i]?.finances) continue;
+    if (!farms[i]?.finances?.totalRevenue) continue;
+    totalSpend += farms[i]?.finances?.totalRevenue;
+  }
+  return totalSpend;
+};
 
 const MonitoringPage = () => {
+  const { data: farms, error, isLoading } = useGetFarmsQuery();
+
+ 
+
   return (
     <div className="w-full bg-white rounded-lg shadow p-4">
       <div className="p-6">
         {/* Summary Metrics */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
-          <MetricsCard title="Active Farms" value="12" />
-          <MetricsCard title="Total Yield" value="3500 kg" />
-          <MetricsCard title="Alerts" value="3" />
+          <MetricsCard title="Active Farms" value={farms?.length} />
+          <MetricsCard
+            title="Total Expence"
+            value={farms && calculateSpend(farms)}
+          />
+          <MetricsCard
+            title="Total Revenue"
+            value={farms && calculateRevenue(farms)}
+          />
           <MetricsCard title="Uptime" value="99.9%" />
         </div>
 
         {/* Performance Trend Chart */}
         <div className="mb-6 bg-white p-4 rounded-lg shadow">
-          <h2 className="text-lg font-semibold mb-2">Performance Trend</h2>
+          <h2 className="text-lg font-semibold mb-2">Expence Trend</h2>
           <PerformanceChart />
+          <h2 className="text-lg font-semibold mb-2 mt-10">Revenue Trend</h2>
+          <PerformanceChart2 />
         </div>
-        <div className="mb-6 bg-white p-4 rounded-lg shadow">
+        {/* <div className="mb-6 bg-white p-4 rounded-lg shadow">
           <h2 className="text-lg font-semibold mb-2">Performance Trend</h2>
           <Piechart></Piechart>
-        </div>
+        </div> */}
 
         {/* Alerts and Activity Feed */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div className="bg-white p-4 rounded-lg shadow">
             <h2 className="text-lg font-semibold mb-2">Alerts</h2>
             <AlertsPanel />
@@ -38,7 +74,7 @@ const MonitoringPage = () => {
             <h2 className="text-lg font-semibold mb-2">Recent Activity</h2>
             <ActivityFeed />
           </div>
-        </div>
+        </div> */}
       </div>
     </div>
   );