Merged Omabse's changes.

Frontend/src/components/FarmList.jsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+import Td from "./Td";
+
+const FarmList = () => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    fetch("http://localhost:8000/api/v1/farm", {
+      credentials: "include",
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    })
+      .then((response) => response.json())
+      .then((data) => setData(data))
+      .then(setLoading(false))
+      .catch((error) => console.error(error));
+  }, []);
+
+  return (
+    <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
+      {loading ? (
+        <div>Loading...</div>
+      ) : (
+        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+              <th scope="col" className="px-6 py-3">
+                Farm name
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Location
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Type
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Size (acres)
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.length > 0 ? (
+              data.map((item) => <Td key={item.id} children={item} />)
+            ) : (
+              <tr>
+                <td colSpan={5} className="text-center">
+                  No data available
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+};
+
+export default FarmList;

Frontend/src/components/Logs.jsx

@@ -0,0 +1,69 @@
+import { Link } from "react-router-dom";
+
+const Logs = () => {
+  return (
+    <>
+      <div className="relative overflow-y-hidden">
+        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border">
+          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+              <th scope="col" className="px-6 py-3">
+                Product name
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Color
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Category
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Price
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
+              <th
+                scope="row"
+                className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+              >
+                Apple MacBook Pro 17"
+              </th>
+              <td className="px-6 py-4">Silver</td>
+              <td className="px-6 py-4">Laptop</td>
+              <td className="px-6 py-4">$2999</td>
+            </tr>
+            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
+              <th
+                scope="row"
+                className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+              >
+                Microsoft Surface Pro
+              </th>
+              <td className="px-6 py-4">White</td>
+              <td className="px-6 py-4">Laptop PC</td>
+              <td className="px-6 py-4">$1999</td>
+            </tr>
+            <tr className="bg-white dark:bg-gray-800">
+              <th
+                scope="row"
+                className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+              >
+                Magic Mouse 2
+              </th>
+              <td className="px-6 py-4">Black</td>
+              <td className="px-6 py-4">Accessories</td>
+              <td className="px-6 py-4">$99</td>
+            </tr>
+          </tbody>{" "}
+        </table>{" "}
+        <Link to="/logs" className="text-[#2323FF] pl-5">
+          <hr />
+          View all Logs
+        </Link>
+      </div>
+    </>
+  );
+};
+
+export default Logs;

Frontend/src/components/Td.jsx

@@ -0,0 +1,30 @@
+import { useNavigate } from "react-router-dom";
+
+const Td = ({ children }) => {
+  const navigate = useNavigate();
+  return (
+    <tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
+      <td
+        className="px-6 py-4"
+        onClick={() => {
+          navigate(`farmpage/${children._id}`);
+        }}
+      >
+        {children.name}
+      </td>
+      <td className="px-6 py-4">{children.location}</td>
+      <td className="px-6 py-4">{children.soilType}</td>
+      <td className="px-6 py-4">{children.size}</td>
+      <td className="px-6 py-4">
+        <a
+          href="#"
+          className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+        >
+          Edit
+        </a>
+      </td>
+    </tr>
+  );
+};
+
+export default Td;

Frontend/src/components/TotalSpent.jsx

@@ -0,0 +1,19 @@
+const TotalSpent = () => {
+  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">
+          100,000
+        </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;

Frontend/src/components/monitoring charts/ActivityField.jsx

@@ -0,0 +1,28 @@
+// ActivityFeed.jsx
+import React from "react";
+
+const ActivityFeed = () => {
+  // Hard-coded activity feed data
+  const activities = [
+    {
+      id: 1,
+      description: "Farm A reported increased yield",
+      time: "10 mins ago",
+    },
+    { id: 2, description: "Sensor B recalibrated", time: "20 mins ago" },
+    { id: 3, description: "Alert triggered on Farm C", time: "30 mins ago" },
+  ];
+
+  return (
+    <ul className="space-y-2">
+      {activities.map((activity) => (
+        <li key={activity.id} className="bg-gray-50 p-2 rounded shadow">
+          <p className="text-sm">{activity.description}</p>
+          <span className="text-xs text-gray-500">{activity.time}</span>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default ActivityFeed;

Frontend/src/components/monitoring charts/AlertsPanel.jsx

@@ -0,0 +1,28 @@
+// AlertsPanel.jsx
+import React from "react";
+
+const AlertsPanel = () => {
+  // Hard-coded alerts data
+  const alerts = [
+    { id: 1, message: "Temperature exceeds threshold", type: "warning" },
+    { id: 2, message: "New sensor connected", type: "info" },
+    { id: 3, message: "Power consumption high", type: "warning" },
+  ];
+
+  return (
+    <div>
+      {alerts.map((alert) => (
+        <div
+          key={alert.id}
+          className={`p-2 rounded mb-2 ${
+            alert.type === "warning" ? "bg-red-100" : "bg-blue-100"
+          }`}
+        >
+          <p className="text-sm">{alert.message}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default AlertsPanel;

Frontend/src/components/monitoring charts/MetricCard.jsx

@@ -0,0 +1,13 @@
+// MetricsCard.jsx
+import React from "react";
+
+const MetricsCard = ({ title, value }) => {
+  return (
+    <div className="bg-white p-4 rounded-lg shadow">
+      <h3 className="text-gray-500 text-sm font-medium">{title}</h3>
+      <p className="text-2xl font-bold">{value}</p>
+    </div>
+  );
+};
+
+export default MetricsCard;

Frontend/src/components/monitoring charts/PerformanceChart.jsx

@@ -0,0 +1,50 @@
+// PerformanceChart.jsx
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+const PerformanceChart = () => {
+  const data = {
+    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+    datasets: [
+      {
+        label: "Yield",
+        data: [65, 59, 80, 81, 56, 55, 70], // hard-coded values
+        fill: false,
+        backgroundColor: "rgb(75, 192, 192)",
+        borderColor: "rgba(75, 192, 192, 0.2)",
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: { position: "top" },
+      title: { display: true, text: "Performance Trend" },
+    },
+  };
+
+  return <Line data={data} options={options} />;
+};
+
+export default PerformanceChart;

Frontend/src/components/monitoring charts/Piechart.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import Chart from "react-apexcharts";
+
+const Piechart = () => {
+  const [series, setSeries] = useState([35.1, 23.5, 2.4, 5.4]);
+
+  const chartOptions = {
+    series: series,
+    labels: ["Fertilizers", "Pestisides", "Manner", "Urea"],
+    colors: ["#1C64F2", "#16BDCA", "#FDBA8C", "#E74694"],
+    chart: {
+      type: "donut",
+      height: 320,
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          labels: {
+            show: true,
+            total: {
+              show: true,
+              label: "Total",
+              formatter: function (w) {
+                return w.globals.seriesTotals.reduce((a, b) => a + b, 0) + "k";
+              },
+            },
+          },
+        },
+      },
+    },
+    legend: {
+      position: "bottom",
+    },
+  };
+
+  return (
+    <div className="bg-white md:p-6 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="text-xl font-bold text-gray-900 dark:text-white mb-4 ">
+        Cost Analysis
+      </h5>
+      <Chart options={chartOptions} series={series} type="donut" height={320} />
+    </div>
+  );
+};
+
+export default Piechart;