84 lines
2.9 KiB
React
84 lines
2.9 KiB
React
// MonitoringPage.jsx
|
|
import React from "react";
|
|
import MetricsCard from "../../components/monitoring charts/MetricCard";
|
|
import PerformanceChart from "../../components/monitoring charts/PerformanceChart";
|
|
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={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">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">
|
|
<h2 className="text-lg font-semibold mb-2">Performance Trend</h2>
|
|
<Piechart></Piechart>
|
|
</div> */}
|
|
|
|
{/* Alerts and Activity Feed */}
|
|
{/* <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 />
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg shadow">
|
|
<h2 className="text-lg font-semibold mb-2">Recent Activity</h2>
|
|
<ActivityFeed />
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MonitoringPage;
|