This shall be the final commit to this branch since all the commits up to this point have been merged with the main branch.

Backend/Controllers/farm.controller.js

@@ -39,6 +39,7 @@ const getUserFarms = async (req, res) => {
 // Get a single farm by ID
 const getFarmById = async (req, res) => {
   try {
+    console.log("also i am clla ing", "My farm id is : ", req.params.farmId);
     const farm = await Farm.findById(req.params.farmId)
       .populate("crops")
       .populate("finances");

Backend/Controllers/finance.controller.js

@@ -2,15 +2,55 @@ const Finance = require("../Models/finance.model.js");
 const Farm = require("../Models/farm.model.js");
 
 // Create finance record for a farm
+// const createFinance = async (req, res) => {
+//   try {
+//     const { farm } = req.body;
+
+//     console.log("My farm id is which is going to be created : ", req.body);
+
+//     // Check if the farm exists
+//     const existingFarm = await Farm.findById(farm);
+//     if (!existingFarm)
+//       return res.status(404).json({ message: "Farm not found" });
+
+//     const finance = new Finance({
+//       farm,
+//       transactions: [],
+//       totalExpenses: 0,
+//       totalRevenue: 0,
+//     });
+
+//     await finance.save();
+
+//     // Link finance to farm
+//     existingFarm.finances = finance._id;
+//     await existingFarm.save();
+
+//     res.status(201).json(finance);
+//   } catch (error) {
+//     res.status(500).json({ message: error.message });
+//   }
+// };
 const createFinance = async (req, res) => {
   try {
     const { farm } = req.body;
 
+    console.log("My farm id is which is going to be created : ", farm);
+
     // Check if the farm exists
     const existingFarm = await Farm.findById(farm);
-    if (!existingFarm)
+    if (!existingFarm) {
       return res.status(404).json({ message: "Farm not found" });
+    }
 
+    // Check if finance already exists for this farm
+    if (existingFarm.finances) {
+      return res
+        .status(400)
+        .json({ message: "Finance already exists for this farm" });
+    }
+
+    // Create finance entry
     const finance = new Finance({
       farm,
       transactions: [],
@@ -50,6 +90,12 @@ const addTransaction = async (req, res) => {
   try {
     const { type, amount, description } = req.body;
 
+    console.log("My type is : ", type);
+    console.log("My amount is : ", amount);
+    console.log("My description is : ", description);
+
+    console.log("My finance id is : ", req.params.financeId);
+
     const finance = await Finance.findById(req.params.financeId);
     if (!finance)
       return res.status(404).json({ message: "Finance record not found" });

Backend/Controllers/user.controller.js

@@ -65,12 +65,12 @@ const loginUser = catchAsyncErrors(async (req, res) => {
 
   return res
     .status(200)
-    .cookie(process.env.TOKEN_NAME, token, {
+    .cookie("uid", token, {
+      httpOnly: true, // Prevent access from JavaScript (recommended for security)
+      secure: false, // ⚠️ Set to `false` for localhost
+      sameSite: "Lax", // Use "Lax" instead of "None" for better compatibility
       path: "/",
-      sameSite: "None",
-      secure: process.env.NODE_ENV === "production",
-      httpOnly: true,
-      expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
+      expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days
     })
     .json({
       success: true,
@@ -260,8 +260,6 @@ const resetPassword = catchAsyncErrors(async (req, res) => {
 
 // get user personal details
 const getUserDetails = catchAsyncErrors(async (req, res) => {
-
-
   const user = await User.findById(req.user._id);
 
   if (!user) {

Backend/app.js

@@ -30,7 +30,7 @@ app.use(express.static("public"));
 app.use(cookieParser());
 
 app.get("/", (req, res) => {
-  return res.send("Hiddskpkpk...");
+  return res.send("Server is running...");
 });
 
 app.use("/api/v1", userRoute);
@@ -43,6 +43,4 @@ app.use("/api/v1/finance", financeRoute);
 
 app.use("/api/v1/task", taskRoute);
 
-
-
 module.exports = app;

Frontend/.env

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8000

Frontend/.vite/deps/_metadata.json

@@ -0,0 +1,142 @@
+{
+  "hash": "2bafedf9",
+  "configHash": "7e00041b",
+  "lockfileHash": "a954eb91",
+  "browserHash": "c3bc7b53",
+  "optimized": {
+    "react": {
+      "src": "../../node_modules/react/index.js",
+      "file": "react.js",
+      "fileHash": "902ee93a",
+      "needsInterop": true
+    },
+    "react-dom/client": {
+      "src": "../../node_modules/react-dom/client.js",
+      "file": "react-dom_client.js",
+      "fileHash": "cfbeda6d",
+      "needsInterop": true
+    },
+    "react-router-dom": {
+      "src": "../../node_modules/react-router-dom/dist/index.js",
+      "file": "react-router-dom.js",
+      "fileHash": "216229fd",
+      "needsInterop": false
+    },
+    "react-redux": {
+      "src": "../../node_modules/react-redux/dist/react-redux.mjs",
+      "file": "react-redux.js",
+      "fileHash": "b9f679da",
+      "needsInterop": false
+    },
+    "@reduxjs/toolkit": {
+      "src": "../../node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs",
+      "file": "@reduxjs_toolkit.js",
+      "fileHash": "13da79f3",
+      "needsInterop": false
+    },
+    "socket.io-client": {
+      "src": "../../node_modules/socket.io-client/build/esm/index.js",
+      "file": "socket__io-client.js",
+      "fileHash": "ab2fcae8",
+      "needsInterop": false
+    },
+    "react-icons/io": {
+      "src": "../../node_modules/react-icons/io/index.mjs",
+      "file": "react-icons_io.js",
+      "fileHash": "fb80952c",
+      "needsInterop": false
+    },
+    "react-icons/fa6": {
+      "src": "../../node_modules/react-icons/fa6/index.mjs",
+      "file": "react-icons_fa6.js",
+      "fileHash": "da456fb8",
+      "needsInterop": false
+    },
+    "react-icons/ri": {
+      "src": "../../node_modules/react-icons/ri/index.mjs",
+      "file": "react-icons_ri.js",
+      "fileHash": "6e092d47",
+      "needsInterop": false
+    },
+    "react-icons/bs": {
+      "src": "../../node_modules/react-icons/bs/index.mjs",
+      "file": "react-icons_bs.js",
+      "fileHash": "c070a6ed",
+      "needsInterop": false
+    },
+    "react-icons/fa": {
+      "src": "../../node_modules/react-icons/fa/index.mjs",
+      "file": "react-icons_fa.js",
+      "fileHash": "aa81607f",
+      "needsInterop": false
+    },
+    "react-icons/md": {
+      "src": "../../node_modules/react-icons/md/index.mjs",
+      "file": "react-icons_md.js",
+      "fileHash": "60d442c6",
+      "needsInterop": false
+    },
+    "react-icons/io5": {
+      "src": "../../node_modules/react-icons/io5/index.mjs",
+      "file": "react-icons_io5.js",
+      "fileHash": "5d65fe60",
+      "needsInterop": false
+    },
+    "framer-motion": {
+      "src": "../../node_modules/framer-motion/dist/es/index.mjs",
+      "file": "framer-motion.js",
+      "fileHash": "05223771",
+      "needsInterop": false
+    },
+    "react-intersection-observer": {
+      "src": "../../node_modules/react-intersection-observer/dist/index.mjs",
+      "file": "react-intersection-observer.js",
+      "fileHash": "575187c6",
+      "needsInterop": false
+    },
+    "react-chartjs-2": {
+      "src": "../../node_modules/react-chartjs-2/dist/index.js",
+      "file": "react-chartjs-2.js",
+      "fileHash": "07d12b80",
+      "needsInterop": false
+    },
+    "chart.js": {
+      "src": "../../node_modules/chart.js/dist/chart.js",
+      "file": "chart__js.js",
+      "fileHash": "39dbe037",
+      "needsInterop": false
+    },
+    "react-apexcharts": {
+      "src": "../../node_modules/react-apexcharts/dist/react-apexcharts.min.js",
+      "file": "react-apexcharts.js",
+      "fileHash": "2bdb7b94",
+      "needsInterop": true
+    },
+    "react-typewriter-effect": {
+      "src": "../../node_modules/react-typewriter-effect/dist/index.js",
+      "file": "react-typewriter-effect.js",
+      "fileHash": "574603a4",
+      "needsInterop": true
+    }
+  },
+  "chunks": {
+    "chunk-UU7TO5PY": {
+      "file": "chunk-UU7TO5PY.js"
+    },
+    "chunk-2YIK36WJ": {
+      "file": "chunk-2YIK36WJ.js"
+    },
+    "chunk-UHINIFCJ": {
+      "file": "chunk-UHINIFCJ.js"
+    },
+    "chunk-SD42HLFO": {
+      "file": "chunk-SD42HLFO.js"
+    },
+    "chunk-W4EHDCLL": {
+      "file": "chunk-W4EHDCLL.js"
+    },
+    "chunk-EWTE5DHJ": {
+      "file": "chunk-EWTE5DHJ.js"
+    }
+  }
+}

Frontend/.vite/deps/chart__js.js

@@ -0,0 +1,100 @@
+import {
+  Animation,
+  Animations,
+  ArcElement,
+  BarController,
+  BarElement,
+  BasePlatform,
+  BasicPlatform,
+  BubbleController,
+  CategoryScale,
+  Chart,
+  DatasetController,
+  DomPlatform,
+  DoughnutController,
+  Element,
+  Interaction,
+  LineController,
+  LineElement,
+  LinearScale,
+  LogarithmicScale,
+  PieController,
+  PointElement,
+  PolarAreaController,
+  RadarController,
+  RadialLinearScale,
+  Scale,
+  ScatterController,
+  Ticks,
+  TimeScale,
+  TimeSeriesScale,
+  _detectPlatform,
+  adapters,
+  animator,
+  controllers,
+  defaults,
+  elements,
+  index,
+  layouts,
+  plugin_colors,
+  plugin_decimation,
+  plugin_legend,
+  plugin_subtitle,
+  plugin_title,
+  plugin_tooltip,
+  plugins,
+  registerables,
+  registry,
+  scales
+} from "./chunk-2YIK36WJ.js";
+import "./chunk-EWTE5DHJ.js";
+export {
+  Animation,
+  Animations,
+  ArcElement,
+  BarController,
+  BarElement,
+  BasePlatform,
+  BasicPlatform,
+  BubbleController,
+  CategoryScale,
+  Chart,
+  plugin_colors as Colors,
+  DatasetController,
+  plugin_decimation as Decimation,
+  DomPlatform,
+  DoughnutController,
+  Element,
+  index as Filler,
+  Interaction,
+  plugin_legend as Legend,
+  LineController,
+  LineElement,
+  LinearScale,
+  LogarithmicScale,
+  PieController,
+  PointElement,
+  PolarAreaController,
+  RadarController,
+  RadialLinearScale,
+  Scale,
+  ScatterController,
+  plugin_subtitle as SubTitle,
+  Ticks,
+  TimeScale,
+  TimeSeriesScale,
+  plugin_title as Title,
+  plugin_tooltip as Tooltip,
+  adapters as _adapters,
+  _detectPlatform,
+  animator,
+  controllers,
+  defaults,
+  elements,
+  layouts,
+  plugins,
+  registerables,
+  registry,
+  scales
+};
+//# sourceMappingURL=chart__js.js.map

Frontend/.vite/deps/chart__js.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

Frontend/.vite/deps/chunk-EWTE5DHJ.js

@@ -0,0 +1,45 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+export {
+  __esm,
+  __commonJS,
+  __export,
+  __toESM,
+  __toCommonJS,
+  __publicField
+};
+//# sourceMappingURL=chunk-EWTE5DHJ.js.map

Frontend/.vite/deps/chunk-EWTE5DHJ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

Frontend/.vite/deps/chunk-SD42HLFO.js

@@ -0,0 +1,149 @@
+import {
+  require_react
+} from "./chunk-W4EHDCLL.js";
+import {
+  __toESM
+} from "./chunk-EWTE5DHJ.js";
+
+// node_modules/react-icons/lib/iconBase.mjs
+var import_react2 = __toESM(require_react(), 1);
+
+// node_modules/react-icons/lib/iconContext.mjs
+var import_react = __toESM(require_react(), 1);
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = import_react.default.createContext && import_react.default.createContext(DefaultContext);
+
+// node_modules/react-icons/lib/iconBase.mjs
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function Tree2Element(tree) {
+  return tree && tree.map((node, i) => import_react2.default.createElement(node.tag, _objectSpread({
+    key: i
+  }, node.attr), Tree2Element(node.child)));
+}
+function GenIcon(data) {
+  return (props) => import_react2.default.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = (conf) => {
+    var {
+      attr,
+      size,
+      title
+    } = props, svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return import_react2.default.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && import_react2.default.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? import_react2.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+}
+
+export {
+  GenIcon
+};
+//# sourceMappingURL=chunk-SD42HLFO.js.map

Frontend/.vite/deps/chunk-SD42HLFO.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../node_modules/react-icons/lib/iconBase.mjs", "../../node_modules/react-icons/lib/iconContext.mjs"],
+  "sourcesContent": ["var _excluded = [\"attr\", \"size\", \"title\"];\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != typeof i) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nimport React from \"react\";\nimport { IconContext, DefaultContext } from \"./iconContext.mjs\";\nfunction Tree2Element(tree) {\n  return tree && tree.map((node, i) => /*#__PURE__*/React.createElement(node.tag, _objectSpread({\n    key: i\n  }, node.attr), Tree2Element(node.child)));\n}\nexport function GenIcon(data) {\n  return props => /*#__PURE__*/React.createElement(IconBase, _extends({\n    attr: _objectSpread({}, data.attr)\n  }, props), Tree2Element(data.child));\n}\nexport function IconBase(props) {\n  var elem = conf => {\n    var {\n        attr,\n        size,\n        title\n      } = props,\n      svgProps = _objectWithoutProperties(props, _excluded);\n    var computedSize = size || conf.size || \"1em\";\n    var className;\n    if (conf.className) className = conf.className;\n    if (props.className) className = (className ? className + \" \" : \"\") + props.className;\n    return /*#__PURE__*/React.createElement(\"svg\", _extends({\n      stroke: \"currentColor\",\n      fill: \"currentColor\",\n      strokeWidth: \"0\"\n    }, conf.attr, attr, svgProps, {\n      className: className,\n      style: _objectSpread(_objectSpread({\n        color: props.color || conf.color\n      }, conf.style), props.style),\n      height: computedSize,\n      width: computedSize,\n      xmlns: \"http://www.w3.org/2000/svg\"\n    }), title && /*#__PURE__*/React.createElement(\"title\", null, title), props.children);\n  };\n  return IconContext !== undefined ? /*#__PURE__*/React.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);\n}", "import React from \"react\";\nexport var DefaultContext = {\n  color: undefined,\n  size: undefined,\n  className: undefined,\n  style: undefined,\n  attr: undefined\n};\nexport var IconContext = React.createContext && /*#__PURE__*/React.createContext(DefaultContext);"],
+  "mappings": ";;;;;;;;AASA,IAAAA,gBAAkB;;;ACTlB,mBAAkB;AACX,IAAI,iBAAiB;AAAA,EAC1B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AACR;AACO,IAAI,cAAc,aAAAC,QAAM,iBAA8B,aAAAA,QAAM,cAAc,cAAc;;;ADR/F,IAAI,YAAY,CAAC,QAAQ,QAAQ,OAAO;AACxC,SAAS,yBAAyB,QAAQ,UAAU;AAAE,MAAI,UAAU,KAAM,QAAO,CAAC;AAAG,MAAI,SAAS,8BAA8B,QAAQ,QAAQ;AAAG,MAAI,KAAK;AAAG,MAAI,OAAO,uBAAuB;AAAE,QAAI,mBAAmB,OAAO,sBAAsB,MAAM;AAAG,SAAK,IAAI,GAAG,IAAI,iBAAiB,QAAQ,KAAK;AAAE,YAAM,iBAAiB,CAAC;AAAG,UAAI,SAAS,QAAQ,GAAG,KAAK,EAAG;AAAU,UAAI,CAAC,OAAO,UAAU,qBAAqB,KAAK,QAAQ,GAAG,EAAG;AAAU,aAAO,GAAG,IAAI,OAAO,GAAG;AAAA,IAAG;AAAA,EAAE;AAAE,SAAO;AAAQ;AAC3e,SAAS,8BAA8B,QAAQ,UAAU;AAAE,MAAI,UAAU,KAAM,QAAO,CAAC;AAAG,MAAI,SAAS,CAAC;AAAG,WAAS,OAAO,QAAQ;AAAE,QAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,GAAG,GAAG;AAAE,UAAI,SAAS,QAAQ,GAAG,KAAK,EAAG;AAAU,aAAO,GAAG,IAAI,OAAO,GAAG;AAAA,IAAG;AAAA,EAAE;AAAE,SAAO;AAAQ;AACtR,SAAS,WAAW;AAAE,aAAW,OAAO,SAAS,OAAO,OAAO,KAAK,IAAI,SAAU,QAAQ;AAAE,aAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AAAE,UAAI,SAAS,UAAU,CAAC;AAAG,eAAS,OAAO,QAAQ;AAAE,YAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,GAAG,GAAG;AAAE,iBAAO,GAAG,IAAI,OAAO,GAAG;AAAA,QAAG;AAAA,MAAE;AAAA,IAAE;AAAE,WAAO;AAAA,EAAQ;AAAG,SAAO,SAAS,MAAM,MAAM,SAAS;AAAG;AAClV,SAAS,QAAQ,GAAG,GAAG;AAAE,MAAI,IAAI,OAAO,KAAK,CAAC;AAAG,MAAI,OAAO,uBAAuB;AAAE,QAAI,IAAI,OAAO,sBAAsB,CAAC;AAAG,UAAM,IAAI,EAAE,OAAO,SAAUC,IAAG;AAAE,aAAO,OAAO,yBAAyB,GAAGA,EAAC,EAAE;AAAA,IAAY,CAAC,IAAI,EAAE,KAAK,MAAM,GAAG,CAAC;AAAA,EAAG;AAAE,SAAO;AAAG;AAC9P,SAAS,cAAc,GAAG;AAAE,WAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AAAE,QAAI,IAAI,QAAQ,UAAU,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC;AAAG,QAAI,IAAI,QAAQ,OAAO,CAAC,GAAG,IAAE,EAAE,QAAQ,SAAUA,IAAG;AAAE,sBAAgB,GAAGA,IAAG,EAAEA,EAAC,CAAC;AAAA,IAAG,CAAC,IAAI,OAAO,4BAA4B,OAAO,iBAAiB,GAAG,OAAO,0BAA0B,CAAC,CAAC,IAAI,QAAQ,OAAO,CAAC,CAAC,EAAE,QAAQ,SAAUA,IAAG;AAAE,aAAO,eAAe,GAAGA,IAAG,OAAO,yBAAyB,GAAGA,EAAC,CAAC;AAAA,IAAG,CAAC;AAAA,EAAG;AAAE,SAAO;AAAG;AACtb,SAAS,gBAAgB,KAAK,KAAK,OAAO;AAAE,QAAM,eAAe,GAAG;AAAG,MAAI,OAAO,KAAK;AAAE,WAAO,eAAe,KAAK,KAAK,EAAE,OAAc,YAAY,MAAM,cAAc,MAAM,UAAU,KAAK,CAAC;AAAA,EAAG,OAAO;AAAE,QAAI,GAAG,IAAI;AAAA,EAAO;AAAE,SAAO;AAAK;AAC3O,SAAS,eAAe,GAAG;AAAE,MAAI,IAAI,aAAa,GAAG,QAAQ;AAAG,SAAO,YAAY,OAAO,IAAI,IAAI,IAAI;AAAI;AAC1G,SAAS,aAAa,GAAG,GAAG;AAAE,MAAI,YAAY,OAAO,KAAK,CAAC,EAAG,QAAO;AAAG,MAAI,IAAI,EAAE,OAAO,WAAW;AAAG,MAAI,WAAW,GAAG;AAAE,QAAI,IAAI,EAAE,KAAK,GAAG,KAAK,SAAS;AAAG,QAAI,YAAY,OAAO,EAAG,QAAO;AAAG,UAAM,IAAI,UAAU,8CAA8C;AAAA,EAAG;AAAE,UAAQ,aAAa,IAAI,SAAS,QAAQ,CAAC;AAAG;AAGvT,SAAS,aAAa,MAAM;AAC1B,SAAO,QAAQ,KAAK,IAAI,CAAC,MAAM,MAAmB,cAAAC,QAAM,cAAc,KAAK,KAAK,cAAc;AAAA,IAC5F,KAAK;AAAA,EACP,GAAG,KAAK,IAAI,GAAG,aAAa,KAAK,KAAK,CAAC,CAAC;AAC1C;AACO,SAAS,QAAQ,MAAM;AAC5B,SAAO,WAAsB,cAAAA,QAAM,cAAc,UAAU,SAAS;AAAA,IAClE,MAAM,cAAc,CAAC,GAAG,KAAK,IAAI;AAAA,EACnC,GAAG,KAAK,GAAG,aAAa,KAAK,KAAK,CAAC;AACrC;AACO,SAAS,SAAS,OAAO;AAC9B,MAAI,OAAO,UAAQ;AACjB,QAAI;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,OACJ,WAAW,yBAAyB,OAAO,SAAS;AACtD,QAAI,eAAe,QAAQ,KAAK,QAAQ;AACxC,QAAI;AACJ,QAAI,KAAK,UAAW,aAAY,KAAK;AACrC,QAAI,MAAM,UAAW,cAAa,YAAY,YAAY,MAAM,MAAM,MAAM;AAC5E,WAAoB,cAAAA,QAAM,cAAc,OAAO,SAAS;AAAA,MACtD,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,IACf,GAAG,KAAK,MAAM,MAAM,UAAU;AAAA,MAC5B;AAAA,MACA,OAAO,cAAc,cAAc;AAAA,QACjC,OAAO,MAAM,SAAS,KAAK;AAAA,MAC7B,GAAG,KAAK,KAAK,GAAG,MAAM,KAAK;AAAA,MAC3B,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,OAAO;AAAA,IACT,CAAC,GAAG,SAAsB,cAAAA,QAAM,cAAc,SAAS,MAAM,KAAK,GAAG,MAAM,QAAQ;AAAA,EACrF;AACA,SAAO,gBAAgB,SAAyB,cAAAA,QAAM,cAAc,YAAY,UAAU,MAAM,UAAQ,KAAK,IAAI,CAAC,IAAI,KAAK,cAAc;AAC3I;",
+  "names": ["import_react", "React", "r", "React"]
+}

Frontend/.vite/deps/chunk-UU7TO5PY.js

@@ -0,0 +1,172 @@
+import {
+  __commonJS
+} from "./chunk-EWTE5DHJ.js";
+
+// node_modules/object-assign/index.js
+var require_object_assign = __commonJS({
+  "node_modules/object-assign/index.js"(exports, module) {
+    "use strict";
+    var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+    var hasOwnProperty = Object.prototype.hasOwnProperty;
+    var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+    function toObject(val) {
+      if (val === null || val === void 0) {
+        throw new TypeError("Object.assign cannot be called with null or undefined");
+      }
+      return Object(val);
+    }
+    function shouldUseNative() {
+      try {
+        if (!Object.assign) {
+          return false;
+        }
+        var test1 = new String("abc");
+        test1[5] = "de";
+        if (Object.getOwnPropertyNames(test1)[0] === "5") {
+          return false;
+        }
+        var test2 = {};
+        for (var i = 0; i < 10; i++) {
+          test2["_" + String.fromCharCode(i)] = i;
+        }
+        var order2 = Object.getOwnPropertyNames(test2).map(function(n) {
+          return test2[n];
+        });
+        if (order2.join("") !== "0123456789") {
+          return false;
+        }
+        var test3 = {};
+        "abcdefghijklmnopqrst".split("").forEach(function(letter) {
+          test3[letter] = letter;
+        });
+        if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
+          return false;
+        }
+        return true;
+      } catch (err) {
+        return false;
+      }
+    }
+    module.exports = shouldUseNative() ? Object.assign : function(target, source) {
+      var from;
+      var to = toObject(target);
+      var symbols;
+      for (var s = 1; s < arguments.length; s++) {
+        from = Object(arguments[s]);
+        for (var key in from) {
+          if (hasOwnProperty.call(from, key)) {
+            to[key] = from[key];
+          }
+        }
+        if (getOwnPropertySymbols) {
+          symbols = getOwnPropertySymbols(from);
+          for (var i = 0; i < symbols.length; i++) {
+            if (propIsEnumerable.call(from, symbols[i])) {
+              to[symbols[i]] = from[symbols[i]];
+            }
+          }
+        }
+      }
+      return to;
+    };
+  }
+});
+
+// node_modules/prop-types/lib/ReactPropTypesSecret.js
+var require_ReactPropTypesSecret = __commonJS({
+  "node_modules/prop-types/lib/ReactPropTypesSecret.js"(exports, module) {
+    "use strict";
+    var ReactPropTypesSecret = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
+    module.exports = ReactPropTypesSecret;
+  }
+});
+
+// node_modules/prop-types/lib/has.js
+var require_has = __commonJS({
+  "node_modules/prop-types/lib/has.js"(exports, module) {
+    module.exports = Function.call.bind(Object.prototype.hasOwnProperty);
+  }
+});
+
+// node_modules/prop-types/checkPropTypes.js
+var require_checkPropTypes = __commonJS({
+  "node_modules/prop-types/checkPropTypes.js"(exports, module) {
+    "use strict";
+    var printWarning = function() {
+    };
+    if (true) {
+      ReactPropTypesSecret = require_ReactPropTypesSecret();
+      loggedTypeFailures = {};
+      has = require_has();
+      printWarning = function(text) {
+        var message = "Warning: " + text;
+        if (typeof console !== "undefined") {
+          console.error(message);
+        }
+        try {
+          throw new Error(message);
+        } catch (x) {
+        }
+      };
+    }
+    var ReactPropTypesSecret;
+    var loggedTypeFailures;
+    var has;
+    function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
+      if (true) {
+        for (var typeSpecName in typeSpecs) {
+          if (has(typeSpecs, typeSpecName)) {
+            var error;
+            try {
+              if (typeof typeSpecs[typeSpecName] !== "function") {
+                var err = Error(
+                  (componentName || "React class") + ": " + location + " type `" + typeSpecName + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof typeSpecs[typeSpecName] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
+                );
+                err.name = "Invariant Violation";
+                throw err;
+              }
+              error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
+            } catch (ex) {
+              error = ex;
+            }
+            if (error && !(error instanceof Error)) {
+              printWarning(
+                (componentName || "React class") + ": type specification of " + location + " `" + typeSpecName + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof error + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
+              );
+            }
+            if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+              loggedTypeFailures[error.message] = true;
+              var stack = getStack ? getStack() : "";
+              printWarning(
+                "Failed " + location + " type: " + error.message + (stack != null ? stack : "")
+              );
+            }
+          }
+        }
+      }
+    }
+    checkPropTypes.resetWarningCache = function() {
+      if (true) {
+        loggedTypeFailures = {};
+      }
+    };
+    module.exports = checkPropTypes;
+  }
+});
+
+export {
+  require_object_assign,
+  require_ReactPropTypesSecret,
+  require_has,
+  require_checkPropTypes
+};
+/*! Bundled license information:
+
+object-assign/index.js:
+  (*
+  object-assign
+  (c) Sindre Sorhus
+  @license MIT
+  *)
+*/
+//# sourceMappingURL=chunk-UU7TO5PY.js.map

Frontend/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

Frontend/.vite/deps/react-chartjs-2.js

@@ -0,0 +1,190 @@
+import {
+  BarController,
+  BubbleController,
+  Chart,
+  DoughnutController,
+  LineController,
+  PieController,
+  PolarAreaController,
+  RadarController,
+  ScatterController
+} from "./chunk-2YIK36WJ.js";
+import {
+  require_react
+} from "./chunk-W4EHDCLL.js";
+import {
+  __toESM
+} from "./chunk-EWTE5DHJ.js";
+
+// node_modules/react-chartjs-2/dist/index.js
+var import_react = __toESM(require_react());
+var defaultDatasetIdKey = "label";
+function reforwardRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+function setOptions(chart, nextOptions) {
+  const options = chart.options;
+  if (options && nextOptions) {
+    Object.assign(options, nextOptions);
+  }
+}
+function setLabels(currentData, nextLabels) {
+  currentData.labels = nextLabels;
+}
+function setDatasets(currentData, nextDatasets) {
+  let datasetIdKey = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : defaultDatasetIdKey;
+  const addedDatasets = [];
+  currentData.datasets = nextDatasets.map((nextDataset) => {
+    const currentDataset = currentData.datasets.find((dataset) => dataset[datasetIdKey] === nextDataset[datasetIdKey]);
+    if (!currentDataset || !nextDataset.data || addedDatasets.includes(currentDataset)) {
+      return {
+        ...nextDataset
+      };
+    }
+    addedDatasets.push(currentDataset);
+    Object.assign(currentDataset, nextDataset);
+    return currentDataset;
+  });
+}
+function cloneData(data) {
+  let datasetIdKey = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : defaultDatasetIdKey;
+  const nextData = {
+    labels: [],
+    datasets: []
+  };
+  setLabels(nextData, data.labels);
+  setDatasets(nextData, data.datasets, datasetIdKey);
+  return nextData;
+}
+function getDatasetAtEvent(chart, event) {
+  return chart.getElementsAtEventForMode(event.nativeEvent, "dataset", {
+    intersect: true
+  }, false);
+}
+function getElementAtEvent(chart, event) {
+  return chart.getElementsAtEventForMode(event.nativeEvent, "nearest", {
+    intersect: true
+  }, false);
+}
+function getElementsAtEvent(chart, event) {
+  return chart.getElementsAtEventForMode(event.nativeEvent, "index", {
+    intersect: true
+  }, false);
+}
+function ChartComponent(props, ref) {
+  const { height = 150, width = 300, redraw = false, datasetIdKey, type, data, options, plugins = [], fallbackContent, updateMode, ...canvasProps } = props;
+  const canvasRef = (0, import_react.useRef)(null);
+  const chartRef = (0, import_react.useRef)(null);
+  const renderChart = () => {
+    if (!canvasRef.current) return;
+    chartRef.current = new Chart(canvasRef.current, {
+      type,
+      data: cloneData(data, datasetIdKey),
+      options: options && {
+        ...options
+      },
+      plugins
+    });
+    reforwardRef(ref, chartRef.current);
+  };
+  const destroyChart = () => {
+    reforwardRef(ref, null);
+    if (chartRef.current) {
+      chartRef.current.destroy();
+      chartRef.current = null;
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (!redraw && chartRef.current && options) {
+      setOptions(chartRef.current, options);
+    }
+  }, [
+    redraw,
+    options
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (!redraw && chartRef.current) {
+      setLabels(chartRef.current.config.data, data.labels);
+    }
+  }, [
+    redraw,
+    data.labels
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (!redraw && chartRef.current && data.datasets) {
+      setDatasets(chartRef.current.config.data, data.datasets, datasetIdKey);
+    }
+  }, [
+    redraw,
+    data.datasets
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (!chartRef.current) return;
+    if (redraw) {
+      destroyChart();
+      setTimeout(renderChart);
+    } else {
+      chartRef.current.update(updateMode);
+    }
+  }, [
+    redraw,
+    options,
+    data.labels,
+    data.datasets,
+    updateMode
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (!chartRef.current) return;
+    destroyChart();
+    setTimeout(renderChart);
+  }, [
+    type
+  ]);
+  (0, import_react.useEffect)(() => {
+    renderChart();
+    return () => destroyChart();
+  }, []);
+  return import_react.default.createElement("canvas", {
+    ref: canvasRef,
+    role: "img",
+    height,
+    width,
+    ...canvasProps
+  }, fallbackContent);
+}
+var Chart2 = (0, import_react.forwardRef)(ChartComponent);
+function createTypedChart(type, registerables) {
+  Chart.register(registerables);
+  return (0, import_react.forwardRef)((props, ref) => import_react.default.createElement(Chart2, {
+    ...props,
+    ref,
+    type
+  }));
+}
+var Line = createTypedChart("line", LineController);
+var Bar = createTypedChart("bar", BarController);
+var Radar = createTypedChart("radar", RadarController);
+var Doughnut = createTypedChart("doughnut", DoughnutController);
+var PolarArea = createTypedChart("polarArea", PolarAreaController);
+var Bubble = createTypedChart("bubble", BubbleController);
+var Pie = createTypedChart("pie", PieController);
+var Scatter = createTypedChart("scatter", ScatterController);
+export {
+  Bar,
+  Bubble,
+  Chart2 as Chart,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Scatter,
+  getDatasetAtEvent,
+  getElementAtEvent,
+  getElementsAtEvent
+};
+//# sourceMappingURL=react-chartjs-2.js.map

Frontend/.vite/deps/react-dom_client.js

@@ -0,0 +1,39 @@
+import {
+  require_react_dom
+} from "./chunk-UHINIFCJ.js";
+import "./chunk-W4EHDCLL.js";
+import {
+  __commonJS
+} from "./chunk-EWTE5DHJ.js";
+
+// node_modules/react-dom/client.js
+var require_client = __commonJS({
+  "node_modules/react-dom/client.js"(exports) {
+    var m = require_react_dom();
+    if (false) {
+      exports.createRoot = m.createRoot;
+      exports.hydrateRoot = m.hydrateRoot;
+    } else {
+      i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+      exports.createRoot = function(c, o) {
+        i.usingClientEntryPoint = true;
+        try {
+          return m.createRoot(c, o);
+        } finally {
+          i.usingClientEntryPoint = false;
+        }
+      };
+      exports.hydrateRoot = function(c, h, o) {
+        i.usingClientEntryPoint = true;
+        try {
+          return m.hydrateRoot(c, h, o);
+        } finally {
+          i.usingClientEntryPoint = false;
+        }
+      };
+    }
+    var i;
+  }
+});
+export default require_client();
+//# sourceMappingURL=react-dom_client.js.map

Frontend/.vite/deps/react-dom_client.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../node_modules/react-dom/client.js"],
+  "sourcesContent": ["'use strict';\n\nvar m = require('react-dom');\nif (process.env.NODE_ENV === 'production') {\n  exports.createRoot = m.createRoot;\n  exports.hydrateRoot = m.hydrateRoot;\n} else {\n  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;\n  exports.createRoot = function(c, o) {\n    i.usingClientEntryPoint = true;\n    try {\n      return m.createRoot(c, o);\n    } finally {\n      i.usingClientEntryPoint = false;\n    }\n  };\n  exports.hydrateRoot = function(c, h, o) {\n    i.usingClientEntryPoint = true;\n    try {\n      return m.hydrateRoot(c, h, o);\n    } finally {\n      i.usingClientEntryPoint = false;\n    }\n  };\n}\n"],
+  "mappings": ";;;;;;;;;AAAA;AAAA;AAEA,QAAI,IAAI;AACR,QAAI,OAAuC;AACzC,cAAQ,aAAa,EAAE;AACvB,cAAQ,cAAc,EAAE;AAAA,IAC1B,OAAO;AACD,UAAI,EAAE;AACV,cAAQ,aAAa,SAAS,GAAG,GAAG;AAClC,UAAE,wBAAwB;AAC1B,YAAI;AACF,iBAAO,EAAE,WAAW,GAAG,CAAC;AAAA,QAC1B,UAAE;AACA,YAAE,wBAAwB;AAAA,QAC5B;AAAA,MACF;AACA,cAAQ,cAAc,SAAS,GAAG,GAAG,GAAG;AACtC,UAAE,wBAAwB;AAC1B,YAAI;AACF,iBAAO,EAAE,YAAY,GAAG,GAAG,CAAC;AAAA,QAC9B,UAAE;AACA,YAAE,wBAAwB;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAjBM;AAAA;AAAA;",
+  "names": []
+}

Frontend/.vite/deps/react-intersection-observer.js

@@ -0,0 +1,293 @@
+"use client";
+import {
+  require_react
+} from "./chunk-W4EHDCLL.js";
+import {
+  __toESM
+} from "./chunk-EWTE5DHJ.js";
+
+// node_modules/react-intersection-observer/dist/index.mjs
+var React = __toESM(require_react(), 1);
+var React2 = __toESM(require_react(), 1);
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var observerMap = /* @__PURE__ */ new Map();
+var RootIds = /* @__PURE__ */ new WeakMap();
+var rootId = 0;
+var unsupportedValue = void 0;
+function defaultFallbackInView(inView) {
+  unsupportedValue = inView;
+}
+function getRootId(root) {
+  if (!root) return "0";
+  if (RootIds.has(root)) return RootIds.get(root);
+  rootId += 1;
+  RootIds.set(root, rootId.toString());
+  return RootIds.get(root);
+}
+function optionsToId(options) {
+  return Object.keys(options).sort().filter(
+    (key) => options[key] !== void 0
+  ).map((key) => {
+    return `${key}_${key === "root" ? getRootId(options.root) : options[key]}`;
+  }).toString();
+}
+function createObserver(options) {
+  const id = optionsToId(options);
+  let instance = observerMap.get(id);
+  if (!instance) {
+    const elements = /* @__PURE__ */ new Map();
+    let thresholds;
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        var _a;
+        const inView = entry.isIntersecting && thresholds.some((threshold) => entry.intersectionRatio >= threshold);
+        if (options.trackVisibility && typeof entry.isVisible === "undefined") {
+          entry.isVisible = inView;
+        }
+        (_a = elements.get(entry.target)) == null ? void 0 : _a.forEach((callback) => {
+          callback(inView, entry);
+        });
+      });
+    }, options);
+    thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [options.threshold || 0]);
+    instance = {
+      id,
+      observer,
+      elements
+    };
+    observerMap.set(id, instance);
+  }
+  return instance;
+}
+function observe(element, callback, options = {}, fallbackInView = unsupportedValue) {
+  if (typeof window.IntersectionObserver === "undefined" && fallbackInView !== void 0) {
+    const bounds = element.getBoundingClientRect();
+    callback(fallbackInView, {
+      isIntersecting: fallbackInView,
+      target: element,
+      intersectionRatio: typeof options.threshold === "number" ? options.threshold : 0,
+      time: 0,
+      boundingClientRect: bounds,
+      intersectionRect: bounds,
+      rootBounds: bounds
+    });
+    return () => {
+    };
+  }
+  const { id, observer, elements } = createObserver(options);
+  const callbacks = elements.get(element) || [];
+  if (!elements.has(element)) {
+    elements.set(element, callbacks);
+  }
+  callbacks.push(callback);
+  observer.observe(element);
+  return function unobserve() {
+    callbacks.splice(callbacks.indexOf(callback), 1);
+    if (callbacks.length === 0) {
+      elements.delete(element);
+      observer.unobserve(element);
+    }
+    if (elements.size === 0) {
+      observer.disconnect();
+      observerMap.delete(id);
+    }
+  };
+}
+function isPlainChildren(props) {
+  return typeof props.children !== "function";
+}
+var InView = class extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "node", null);
+    __publicField(this, "_unobserveCb", null);
+    __publicField(this, "handleNode", (node) => {
+      if (this.node) {
+        this.unobserve();
+        if (!node && !this.props.triggerOnce && !this.props.skip) {
+          this.setState({ inView: !!this.props.initialInView, entry: void 0 });
+        }
+      }
+      this.node = node ? node : null;
+      this.observeNode();
+    });
+    __publicField(this, "handleChange", (inView, entry) => {
+      if (inView && this.props.triggerOnce) {
+        this.unobserve();
+      }
+      if (!isPlainChildren(this.props)) {
+        this.setState({ inView, entry });
+      }
+      if (this.props.onChange) {
+        this.props.onChange(inView, entry);
+      }
+    });
+    this.state = {
+      inView: !!props.initialInView,
+      entry: void 0
+    };
+  }
+  componentDidMount() {
+    this.unobserve();
+    this.observeNode();
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold || prevProps.skip !== this.props.skip || prevProps.trackVisibility !== this.props.trackVisibility || prevProps.delay !== this.props.delay) {
+      this.unobserve();
+      this.observeNode();
+    }
+  }
+  componentWillUnmount() {
+    this.unobserve();
+  }
+  observeNode() {
+    if (!this.node || this.props.skip) return;
+    const {
+      threshold,
+      root,
+      rootMargin,
+      trackVisibility,
+      delay,
+      fallbackInView
+    } = this.props;
+    this._unobserveCb = observe(
+      this.node,
+      this.handleChange,
+      {
+        threshold,
+        root,
+        rootMargin,
+        // @ts-ignore
+        trackVisibility,
+        // @ts-ignore
+        delay
+      },
+      fallbackInView
+    );
+  }
+  unobserve() {
+    if (this._unobserveCb) {
+      this._unobserveCb();
+      this._unobserveCb = null;
+    }
+  }
+  render() {
+    const { children } = this.props;
+    if (typeof children === "function") {
+      const { inView, entry } = this.state;
+      return children({ inView, entry, ref: this.handleNode });
+    }
+    const {
+      as,
+      triggerOnce,
+      threshold,
+      root,
+      rootMargin,
+      onChange,
+      skip,
+      trackVisibility,
+      delay,
+      initialInView,
+      fallbackInView,
+      ...props
+    } = this.props;
+    return React.createElement(
+      as || "div",
+      { ref: this.handleNode, ...props },
+      children
+    );
+  }
+};
+function useInView({
+  threshold,
+  delay,
+  trackVisibility,
+  rootMargin,
+  root,
+  triggerOnce,
+  skip,
+  initialInView,
+  fallbackInView,
+  onChange
+} = {}) {
+  var _a;
+  const [ref, setRef] = React2.useState(null);
+  const callback = React2.useRef(onChange);
+  const [state, setState] = React2.useState({
+    inView: !!initialInView,
+    entry: void 0
+  });
+  callback.current = onChange;
+  React2.useEffect(
+    () => {
+      if (skip || !ref) return;
+      let unobserve;
+      unobserve = observe(
+        ref,
+        (inView, entry) => {
+          setState({
+            inView,
+            entry
+          });
+          if (callback.current) callback.current(inView, entry);
+          if (entry.isIntersecting && triggerOnce && unobserve) {
+            unobserve();
+            unobserve = void 0;
+          }
+        },
+        {
+          root,
+          rootMargin,
+          threshold,
+          // @ts-ignore
+          trackVisibility,
+          // @ts-ignore
+          delay
+        },
+        fallbackInView
+      );
+      return () => {
+        if (unobserve) {
+          unobserve();
+        }
+      };
+    },
+    // We break the rule here, because we aren't including the actual `threshold` variable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // If the threshold is an array, convert it to a string, so it won't change between renders.
+      Array.isArray(threshold) ? threshold.toString() : threshold,
+      ref,
+      root,
+      rootMargin,
+      triggerOnce,
+      skip,
+      trackVisibility,
+      fallbackInView,
+      delay
+    ]
+  );
+  const entryTarget = (_a = state.entry) == null ? void 0 : _a.target;
+  const previousEntryTarget = React2.useRef(void 0);
+  if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {
+    previousEntryTarget.current = entryTarget;
+    setState({
+      inView: !!initialInView,
+      entry: void 0
+    });
+  }
+  const result = [setRef, state.inView, state.entry];
+  result.ref = result[0];
+  result.inView = result[1];
+  result.entry = result[2];
+  return result;
+}
+export {
+  InView,
+  defaultFallbackInView,
+  observe,
+  useInView
+};
+//# sourceMappingURL=react-intersection-observer.js.map

Frontend/.vite/deps/react.js

@@ -0,0 +1,6 @@
+import {
+  require_react
+} from "./chunk-W4EHDCLL.js";
+import "./chunk-EWTE5DHJ.js";
+export default require_react();
+//# sourceMappingURL=react.js.map

Frontend/.vite/deps/react.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

Frontend/src/App.jsx

@@ -37,7 +37,8 @@ function App() {
   return (
     <>
       <div className="w-full h-auto flex-col relative">
-        <div className="pt-20"></div>
+        
+
         <Outlet />
         <div
           className={`${

Frontend/src/components/Container.jsx

@@ -3,7 +3,7 @@ import React from "react";
 const Container = ({ children }) => {
   return (
     <>
-      <div className="w-full h-auto">{children}</div>
+      <div className="w-full max-h-screen">{children}</div>
     </>
   );
 };

Frontend/src/components/FarmList.jsx

@@ -1,24 +1,29 @@
 import { useEffect, useState } from "react";
 import Td from "./Td";
 import Loader from "./Loader";
+import { useGetFarmsQuery } from "../store/api/farmApi";
 
 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));
-  }, []);
+  // const [data, setData] = useState([]);
+  // const [loading, setLoading] = useState(true);
+
+  const { data: farms, error, isLoading } = useGetFarmsQuery();
+
+  console.log(farms);
+  // 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 ? (
+      {isLoading ? (
         <Loader></Loader>
       ) : (
         <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
@@ -42,8 +47,8 @@ const FarmList = () => {
             </tr>
           </thead>
           <tbody>
-            {data.length > 0 ? (
-              data.map((item) => <Td key={item.id} children={item} />)
+            {farms && farms.length > 0 ? (
+              farms.map((item) => <Td key={item.id} children={item} />)
             ) : (
               <tr>
                 <td colSpan={5} className="text-center">

Frontend/src/components/Navbar.jsx

@@ -6,7 +6,7 @@ import { BACKEND_URL } from "../constants";
 const Navbar = () => {
   const user = useSelector((store) => store.user);
 
-  //console.log("User is : ", user);
+
 
   const navigate = useNavigate();
 
@@ -18,7 +18,7 @@ const Navbar = () => {
 
     const data = await responce.json();
 
-    //console.log("User Logged out data is : ", data);
+   
 
     if (data.success == true) {
       navigate("/user/login");

Frontend/src/components/Navbar2.jsx

@@ -1,24 +1,38 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 
 const Navbar2 = () => {
+  const user = useSelector((store) => store.user);
 
-  const [isLoggedIn, setLoggedIn] = useState(false)
-    return (
-    <div className=" flex  justify-center rounded-full">
-      <nav className=" h-18 mt-3 mb-3 w-[97.5%] mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-md rounded-full">
+  const [isLoggedIn, setLoggedIn] = useState(false);
+
+  useEffect(() => {
+    if (user.name !== "Unloggedin User") {
+      setLoggedIn(true);
+    }
+  }, [user]);
+
+  const handleUserSession = async (event) => {
+    event.preventDefault();
+    const responce = await fetch(`http://localhost:8000/api/v1/me`, {
+      credentials: "include",
+    });
+
+    const user = await responce.json();
+
+    dispatch(userSliceActions.addUser(user.data));
+  };
+  return (
+    <div className=" flex  justify-center w-full">
+      <nav className=" h-18 mt-3 mb-3 w-4/12 mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-md rounded-full">
         <div className="absolute inset-0 bg-gradient-to-r from-gray-100/10 to-gray-500/20 pointer-events-none rounded-full"></div>
         <div className="relative h-full flex items-center justify-between p-4">
-
           <a
             href="/"
             className="flex items-center space-x-3 rtl:space-x-reverse"
           >
-            <img
-              src="/images/logo.png"
-              className="size-10"
-              alt="Logo"
-            />
+            <img src="/images/logo.png" className="size-10" alt="Logo" />
             <span className="self-center text-2xl text-white font-semibold whitespace-nowrap dark:text-white">
               Crop Compass
             </span>
@@ -26,18 +40,17 @@ const Navbar2 = () => {
           <div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
             <button
               type="button"
-              className="text-black  bg-white  hover:bg-purple-200 font-medium rounded-full text-sm py-2 px-4 text-center" 
+              className="text-black  bg-white  hover:bg-purple-200 font-medium rounded-full text-sm py-2 px-4 text-center"
             >
-              {isLoggedIn? (
-                <Link to={"/user/dashboard/addfarm"}>Get Started</Link>
+              {isLoggedIn ? (
+                <Link to={"/user/dashboard"}>Get Started</Link>
               ) : (
                 <Link to={"/user/login"}>Log In</Link>
               )}
             </button>
-            
           </div>
 
-          <div
+          {/* <div
             className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
             id="navbar-sticky"
           >
@@ -76,12 +89,11 @@ const Navbar2 = () => {
                 </a>
               </li>
             </ul>
-          </div>
+          </div> */}
         </div>
       </nav>
     </div>
-    );
-  };
-  
-  export default Navbar2;
-  
+  );
+};
+
+export default Navbar2;

Frontend/src/components/Notification.jsx

@@ -6,7 +6,7 @@ const Notification = ({ notification }) => {
     // const dateStr = "2024-09-26T04:31:50.646+00:00";
     const date = new Date(dateStr);
     const dayName = date.toLocaleDateString("en-US", { weekday: "long" });
-    //console.log(dayName);
+
     return dayName;
   };
 
@@ -27,7 +27,7 @@ const Notification = ({ notification }) => {
     };
 
     const istDate = date.toLocaleString("en-US", options);
-    //console.log(istDate); // Output: "September 26, 2024, 10:01:50 AM"
+
     return istDate;
   };
 

Frontend/src/components/TotalSpent.jsx

@@ -1,4 +1,28 @@
+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
@@ -6,7 +30,7 @@ const TotalSpent = () => {
         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">
-          ₹10,000
+          {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

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

@@ -1,5 +1,5 @@
 // PerformanceChart.jsx
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Line } from "react-chartjs-2";
 import {
   Chart as ChartJS,
@@ -11,6 +11,7 @@ import {
   Tooltip,
   Legend,
 } from "chart.js";
+import { useGetFarmsQuery } from "../../store/api/farmApi";
 
 ChartJS.register(
   CategoryScale,
@@ -22,7 +23,35 @@ ChartJS.register(
   Legend
 );
 
+const calculateSpend = (farmList) => {
+  let totalSpend = [];
+  for (let i = 0; i < farmList.length; i++) {
+    if (!farmList[i]) continue;
+    if (!farmList[i]?.finances) continue;
+    if (!farmList[i]?.finances?.transactions) continue;
+
+    for (let j = 0; j < farmList[i]?.finances?.transactions.length; j++) {
+      if (!farmList[i]?.finances?.transactions[j]) continue;
+      if (!farmList[i]?.finances?.transactions[j]?.amount) continue;
+      if (farmList[i]?.finances?.transactions[j]?.type == "Revenue") continue;
+      totalSpend.push(farmList[i]?.finances?.transactions[j]?.amount);
+    }
+  }
+  return totalSpend;
+};
+
 const PerformanceChart = () => {
+  const [totalSpend, setTotalSpend] = useState(0);
+  const [spentList, setSpentList] = useState([]);
+  const { data: farmList, isLoading, error } = useGetFarmsQuery();
+
+  useEffect(() => {
+    if (!isLoading && !error && farmList) {
+      setTotalSpend(calculateSpend(farmList));
+      setSpentList(calculateSpend(farmList));
+    }
+  }, [farmList]);
+
   const data = {
     labels: [
       "Jan",
@@ -40,8 +69,8 @@ const PerformanceChart = () => {
     ],
     datasets: [
       {
-        label: "Yield",
-        data: [75, 68, 85, 88, 60, 62, 78, 90, 95, 92, 88, 80], // slightly improved values
+        label: "Expences",
+        data: spentList, // slightly improved values
         fill: false,
         backgroundColor: "rgb(75, 192, 192)",
         borderColor: "rgba(75, 192, 192, 0.2)",
@@ -53,7 +82,7 @@ const PerformanceChart = () => {
     responsive: true,
     plugins: {
       legend: { position: "top" },
-      title: { display: true, text: "Performance Trend" },
+      title: { display: true, text: "Expences Tracking " },
     },
   };
 

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

@@ -0,0 +1,96 @@
+// PerformanceChart.jsx
+import React, { useEffect, useState } from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { useGetFarmsQuery } from "../../store/api/farmApi";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+const calculateSpend = (farmList) => {
+  let totalSpend = [];
+  for (let i = 0; i < farmList.length; i++) {
+    if (!farmList[i]) continue;
+    if (!farmList[i]?.finances) continue;
+    if (!farmList[i]?.finances?.transactions) continue;
+
+    for (let j = 0; j < farmList[i]?.finances?.transactions.length; j++) {
+      if (!farmList[i]?.finances?.transactions[j]) continue;
+      if (!farmList[i]?.finances?.transactions[j]?.amount) continue;
+      if (farmList[i]?.finances?.transactions[j]?.type == "Expense") continue;
+      totalSpend.push(farmList[i]?.finances?.transactions[j]?.amount);
+    }
+  }
+  return totalSpend;
+};
+
+const PerformanceChart2 = () => {
+  const [totalSpend, setTotalSpend] = useState(0);
+  const [spentList, setSpentList] = useState([]);
+  const { data: farmList, isLoading, error } = useGetFarmsQuery();
+
+  
+
+  useEffect(() => {
+    if (!isLoading && !error && farmList) {
+      setTotalSpend(calculateSpend(farmList));
+      setSpentList(calculateSpend(farmList));
+    }
+  }, [farmList]);
+
+ 
+
+  const data = {
+    labels: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ],
+    datasets: [
+      {
+        label: "Expences",
+        data: spentList, // slightly improved 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: "Expences Tracking " },
+    },
+  };
+
+  return <Line data={data} options={options} />;
+};
+
+export default PerformanceChart2;

Frontend/src/main.jsx

@@ -27,6 +27,7 @@ import AddFarm from "./pages/UserPanel/Farm/AddFarm.jsx";
 import UpdateFarm from "./pages/UserPanel/Farm/UpdateForm.jsx";
 import FarmPage from "./pages/UserPanel/Farm/FarmPage.jsx";
 import Ai from "./pages/UserPanel/Ai.jsx";
+import CropPage from "./pages/UserPanel/Farm/CropPage.jsx";
 createRoot(document.getElementById("root")).render(
   <StrictMode>
     <Provider store={MentifyStore}>
@@ -61,6 +62,7 @@ createRoot(document.getElementById("root")).render(
               <Route path="addfarm" element={<AddFarm />} />
               <Route path="updatefarm" element={<UpdateFarm />} />
               <Route path="farmpage/:farmId" element={<FarmPage />} />
+              <Route path="croppage/:cropId" element={<CropPage />} />
             </Route>
           </Route>
         </Routes>

Frontend/src/pages/Home/Cards.jsx

@@ -1,18 +1,47 @@
-import React from "react";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { useEffect } from "react";
+
+import { Link } from "react-router-dom";
 
 export const HeroSecn = () => {
+  const user = useSelector((store) => store.user);
+
+ 
+
+  const [isLoggedIn, setLoggedIn] = useState(false);
+
+  useEffect(() => {
+    if (user.name !== "Unloggedin User") {
+      setLoggedIn(true);
+    }
+  }, [user]);
+
+  const handleUserSession = async (event) => {
+    event.preventDefault();
+    const responce = await fetch(`http://localhost:8000/api/v1/me`, {
+      credentials: "include",
+    });
+
+    const user = await responce.json();
+
+  
+
+    dispatch(userSliceActions.addUser(user.data));
+  };
   return (
     <section className=" py-40 w-full flex justify-center text-gray-100">
       <div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
         <div className="container mx-auto flex flex-col justify-between h-full w-full">
           <div className="text-center md:text-start flex flex-col justify-around h-full">
-            <h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold">
-              Anything and Everything you Need to know About
+            <h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold ">
+              One stop solution for every farmer's need.
             </h1>
-            <p className="text-2xl font-semibold mb-8 ">
-              Your crops and their Health!
-            </p>
           </div>
+          <button
+            type="button"
+            className="text-black w-auto max-w-lg  bg-white  hover:bg-purple-200 font-medium rounded-full text-sm py-2 px-4 text-center"
+          ></button>
         </div>
         <div className="w-full md:w-4/5 object-contain flex justify-center items-center">
           <img
@@ -28,7 +57,7 @@ export const HeroSecn = () => {
 
 export const CardWithImage = () => {
   return (
-    <div className="max-w-sm  rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+    <div className="max-w-sm   rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
       <a href="#">
         <img
           className="rounded-t-lg"
@@ -99,10 +128,7 @@ export const CardOnlyText = (props) => {
 export const CardWithButton = () => {
   return (
     <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-      <a
-        href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/"
-        target="_blank"
-      >
+      <a target="_blank">
         <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
           Empowering smallholder farmers with AI tools can bolster global food
           security

Frontend/src/pages/Home/Footer.jsx

@@ -18,171 +18,16 @@ const Footer = () => {
                 </span>
               </a>
             </div>
-            <div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
-              <div>
-                <h2 className="mb-6 text-sm font-semibold text-gray-50 uppercase dark:text-white">
-                  Resources
-                </h2>
-                <ul className="text-gray-50 dark:text-gray-400 font-medium">
-                  <li className="mb-4">
-                    <a href="https://flowbite.com/" className="hover:underline">
-                      Flowbite
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      href="https://tailwindcss.com/"
-                      className="hover:underline"
-                    >
-                      Tailwind CSS
-                    </a>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <h2 className="mb-6 text-sm font-semibold text-gray-50 uppercase dark:text-white">
-                  Follow us
-                </h2>
-                <ul className="text-gray-50 dark:text-gray-400 font-medium">
-                  <li className="mb-4">
-                    <a
-                      href="https://github.com/themesberg/flowbite"
-                      className="hover:underline"
-                    >
-                      Github
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      href="https://discord.gg/4eeurUVvTy"
-                      className="hover:underline"
-                    >
-                      Discord
-                    </a>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <h2 className="mb-6 text-sm font-semibold text-gray-50 uppercase dark:text-white">
-                  Legal
-                </h2>
-                <ul className="text-gray-50 dark:text-gray-400 font-medium">
-                  <li className="mb-4">
-                    <a href="#" className="hover:underline">
-                      Privacy Policy
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" className="hover:underline">
-                      Terms &amp; Conditions
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
           </div>
           <hr className="my-6 border-gray-50 sm:mx-auto dark:border-gray-700 lg:my-8" />
           <div className="sm:flex sm:items-center sm:justify-between">
             <span className="text-sm text-gray-50 sm:text-center dark:text-gray-400">
-              © 2024{" "}
+              © 2025{" "}
               <a href="/" className="hover:underline">
                 Crop Compass™
               </a>
               . All Rights Reserved.
             </span>
-            <div className="flex mt-4 sm:justify-center sm:mt-0">
-              <a
-                href="#"
-                className="text-gray-50 hover:text-gray-900 dark:hover:text-white"
-              >
-                <svg
-                  className="w-4 h-4"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 8 19"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span className="sr-only">Facebook page</span>
-              </a>
-              <a
-                href="#"
-                className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
-              >
-                <svg
-                  className="w-4 h-4"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 21 16"
-                >
-                  <path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
-                </svg>
-                <span className="sr-only">Discord community</span>
-              </a>
-              <a
-                href="#"
-                className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
-              >
-                <svg
-                  className="w-4 h-4"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 17"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span className="sr-only">Twitter page</span>
-              </a>
-              <a
-                href="#"
-                className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
-              >
-                <svg
-                  className="w-4 h-4"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span className="sr-only">GitHub account</span>
-              </a>
-              <a
-                href="#"
-                className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
-              >
-                <svg
-                  className="w-4 h-4"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span className="sr-only">Dribbble account</span>
-              </a>
-            </div>
           </div>
         </div>
       </footer>

Frontend/src/pages/Home/Hero2.jsx

@@ -1,7 +1,15 @@
-import React from 'react'
+import React from "react";
 import { motion } from "framer-motion";
 import { useInView } from "react-intersection-observer";
-import { CardOnlyText, CardWithButton, CardWithImage, CardWithOnlyImage, HeroSecn, } from "./Cards";
+import {
+  CardOnlyText,
+  CardWithButton,
+  CardWithImage,
+  CardWithOnlyImage,
+  HeroSecn,
+} from "./Cards";
+import Testimonial from "./Testimonial";
+import Navbar2 from "../../components/Navbar2";
 
 const ScrollReveal = ({ children, direction = "left" }) => {
   const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
@@ -26,33 +34,64 @@ const ScrollReveal = ({ children, direction = "left" }) => {
 };
 
 function Hero2() {
-    const myRef = document.querySelector('.scrollable-div')
+  const myRef = document.querySelector(".scrollable-div");
 
   return (
     <div>
-      <ScrollReveal direction='up'>
+      <Navbar2 />
+      <ScrollReveal direction="up">
         <HeroSecn />
       </ScrollReveal>
+      <Testimonial />
       <div className=" flex justify-center">
         <div className=" flex justify-between  py-8 w-5/6 ">
-
-          <ScrollReveal direction='up'>
+          <ScrollReveal direction="up">
             <CardWithImage />
           </ScrollReveal>
-        
-        <div className="flex flex-col gap-10 justify-between ">
-          <ScrollReveal direction='up' > <CardOnlyText headingText = {"AI for agriculture: How Indian farmers are harvesting innovation"} bodyText={"Farmers participating in the programme saw a 21% increase in chili yields per acre, a 9% reduction in pesticide use, a 5% decrease in fertilizer usage, and an 8% improvement in unit prices due to quality enhancements."} href={"https://www.weforum.org/impact/ai-for-agriculture-in-india/ "} /> </ScrollReveal>
-          <ScrollReveal direction='up'> <CardWithButton /> </ScrollReveal>
-        </div>
 
-        <div className=" flex flex-col justify-between">
-          <ScrollReveal direction='up'> <CardOnlyText headingText={"SugarChain: Blockchain technology meets Agriculture"} bodyText={"The use of blockchain technology can help farmers automate processes with high trust, addressing issues like middlemen involvement and ensuring accurate compensation for their products"} href={"https://arxiv.org/abs/2301.08405"} /> </ScrollReveal>
-          <ScrollReveal direction='up'> <CardWithOnlyImage /> </ScrollReveal>
-        </div>
+          <div className="flex flex-col gap-10 justify-between ">
+            <ScrollReveal direction="up">
+              {" "}
+              <CardOnlyText
+                headingText={
+                  "AI for agriculture: How Indian farmers are harvesting innovation"
+                }
+                bodyText={
+                  "Farmers participating in the programme saw a 21% increase in chili yields per acre, a 9% reduction in pesticide use, a 5% decrease in fertilizer usage, and an 8% improvement in unit prices due to quality enhancements."
+                }
+                href={
+                  "https://www.weforum.org/impact/ai-for-agriculture-in-india/ "
+                }
+              />{" "}
+            </ScrollReveal>
+            <ScrollReveal direction="up">
+              {" "}
+              <CardWithButton />{" "}
+            </ScrollReveal>
+          </div>
+
+          <div className=" flex flex-col justify-between">
+            <ScrollReveal direction="up">
+              {" "}
+              <CardOnlyText
+                headingText={
+                  "SugarChain: Blockchain technology meets Agriculture"
+                }
+                bodyText={
+                  "The use of blockchain technology can help farmers automate processes with high trust, addressing issues like middlemen involvement and ensuring accurate compensation for their products"
+                }
+                href={"https://arxiv.org/abs/2301.08405"}
+              />{" "}
+            </ScrollReveal>
+            <ScrollReveal direction="up">
+              {" "}
+              <CardWithOnlyImage />{" "}
+            </ScrollReveal>
+          </div>
         </div>
       </div>
     </div>
-  )
+  );
 }
 
-export default Hero2
+export default Hero2;

Frontend/src/pages/Home/HomePage.jsx

@@ -10,7 +10,7 @@ const HomePage = () => {
     <>
       <div className=" bg-[url(/images/bgphoto.png)] bg-no-repeat bg-cover">
         <Hero2 />
-        <Testimonial />
+        
         <Footer />
       </div>
     </>

Frontend/src/pages/Home/Testimonial.jsx

@@ -35,8 +35,8 @@ const Testimonial = () => {
   return (
     <>
       <section className=" py-12 px-2 md:px-32  text-white">
-        <div className="container mx-auto ">
-          <div className="text-center flex-col justify-center align-middle ">
+        <div className="container mx-auto min-h-[20]">
+          <div className="text-center flex-col justify-center align-middle  min-h-full">
             <ScrollReveal direction="up">
               <h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">
                 WHY CHOOSE US?
@@ -50,33 +50,29 @@ const Testimonial = () => {
                   scrollArea={myRef}
                   startDelay={100}
                   cursorColor="white"
-                  text="Record breaking features like never before!"
+                  text="⠀Unparalled management for crops & farms."
                   typeSpeed={100}
                 />
               </h1>
             </ScrollReveal>
           </div>
 
-          <div className="flex flex-col sm:flex-row  justify-around mt-8 h-auto">
+          <div className="flex flex-col sm:flex-row  justify-around mt-8 h-auto min-h-[50]">
             <ScrollReveal direction="up">
               <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-                <svg
-                  className="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z" />
-                </svg>
-                <a href="#">
+                <img
+                  src="/images/dashboard.png"
+                  alt="dashboard"
+                  className="w-7 h-7"
+                ></img>
+                <a href="/user/dashboard/">
                   <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
                     Excellent Dashboards
                   </h5>
                 </a>
                 <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
                   Our descriptive dashboards give insights into your crop's
-                  health and keeps track of your burning expenses
+                  health and keeps track of your burning expenses.
                 </p>
                 <a
                   href="#"
@@ -103,16 +99,8 @@ const Testimonial = () => {
             </ScrollReveal>
 
             <ScrollReveal direction="up">
-              <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-                <svg
-                  className="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z" />
-                </svg>
+              <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 pb-13">
+                <img src="/images/crops.png" className="w-7 h-7" alt="" />
                 <a href="#">
                   <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
                     {" "}
@@ -121,10 +109,10 @@ const Testimonial = () => {
                 </a>
                 <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
                   Predict the possible crop diseases based on their shown
-                  symptoms
+                  symptoms.
                 </p>
                 <a
-                  href="#"
+                  href="/ai"
                   className="inline-flex font-medium items-center text-blue-600 hover:underline"
                 >
                   Check Out
@@ -149,16 +137,8 @@ const Testimonial = () => {
 
             <ScrollReveal direction="up">
               <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-                <svg
-                  className="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z" />
-                </svg>
-                <a href="#">
+                <img src="/images/planner.png" className="w-7 h-7" alt="" />
+                <a href="/user/dashboard/monitoring">
                   <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
                     Crop Planner
                   </h5>
@@ -166,7 +146,7 @@ const Testimonial = () => {
                 <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
                   Based on previous season's crop and used pertilizers and
                   pesticides, plan what crops would best suit the present state
-                  of your soil
+                  of your soil.
                 </p>
                 <a
                   href="#"

Frontend/src/pages/Login/LoginPage.jsx

@@ -28,8 +28,6 @@ const LoginPage = () => {
 
     const user = await responce.json();
 
-    //console.log("User Login Data is here : ", user);
-
     dispatch(userSliceActions.addUser(user.data));
 
     emailElement.current.value = "";
@@ -40,97 +38,94 @@ const LoginPage = () => {
     }
   };
 
-
   return (
-    <section className="bg-[url(/images/loginBG.png)] bg-cover font-sans  flex flex-col justify-center md:p-5 ">
-      <div className="container mx-auto ">
-        <div className="flex justify-between pt-24">
-          <div className="   rounded-lg shadow-md ">
-            <div className="flex flex-col items-center justify-center h-full ">
-              <h1 className="text-6xl  font-bold text-white mb-4 md:text-6xl lg:text-9xl  ml-8">
-                Welcome Back!
-              </h1>
+    <section className="bg-[url(/images/loginBG.png)] bg-cover font-sans  flex flex-col justify-center md:p-5  w-full min-h-screen max-h-screen">
+      <div className="flex justify-between items-center h-full">
+        <div className="   rounded-lg shadow-md ">
+          <div className="flex flex-col items-center justify-center h-full ">
+            <h1 className="text-6xl  font-bold text-white mb-4 md:text-6xl lg:text-9xl  ml-8">
+              Welcome Back!
+            </h1>
+          </div>
+        </div>
+        <div className=" backdrop-blur-md bg-gradient-to-tr from-slate-300/10 to-slate-200/30 rounded-lg shadow-md lg:p-36">
+          <h1 className="text-2xl font-bold text-gray-50 mb-4">Login</h1>
+          <p className="text-gray-100 mb-6">
+            Welcome back! Please login to your account.
+          </p>
+          <form className="space-y-6" onSubmit={handleLogin}>
+            <div>
+              <label
+                for="username"
+                className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
+              >
+                Email
+              </label>
+              <input
+                type="email"
+                id="username"
+                ref={emailElement}
+                className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="username@gmail.com"
+                required
+              />
             </div>
-          </div>
-          <div className=" backdrop-blur-md bg-gradient-to-tr from-slate-300/10 to-slate-200/30 rounded-lg shadow-md lg:p-36">
-            <h1 className="text-2xl font-bold text-gray-50 mb-4">Login</h1>
-            <p className="text-gray-100 mb-6">
-              Welcome back! Please login to your account.
+            <div>
+              <label
+                for="password"
+                className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
+              >
+                Password
+              </label>
+              <input
+                type="password"
+                id="password"
+                ref={passwordElement}
+                className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="********"
+                required
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <input
+                  id="remember_me"
+                  type="checkbox"
+                  value=""
+                  className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                />
+                <label
+                  for="remember_me"
+                  className="ml-2 text-sm font-medium text-gray-100 dark:text-gray-300"
+                >
+                  Remember Me
+                </label>
+              </div>
+              <Link
+                to={"/user/forgetpassword"}
+                className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+              >
+                Forgot Password?
+              </Link>
+            </div>
+            <div className=" flex justify-center">
+              <button
+                type="submit"
+                className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg   hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+              >
+                Login
+              </button>
+            </div>
+            <p className="text-gray-100 text-center mt-4">
+              New User?{" "}
+              <Link
+                to={"/user/signup"}
+                className="text-blue-600 hover:underline"
+              >
+                Signup
+              </Link>
             </p>
-            <form className="space-y-6" onSubmit={handleLogin}>
-              <div>
-                <label
-                  for="username"
-                  className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
-                >
-                  Email
-                </label>
-                <input
-                  type="email"
-                  id="username"
-                  ref={emailElement}
-                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="username@gmail.com"
-                  required
-                />
-              </div>
-              <div>
-                <label
-                  for="password"
-                  className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
-                >
-                  Password
-                </label>
-                <input
-                  type="password"
-                  id="password"
-                  ref={passwordElement}
-                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="********"
-                  required
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center">
-                  <input
-                    id="remember_me"
-                    type="checkbox"
-                    value=""
-                    className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <label
-                    for="remember_me"
-                    className="ml-2 text-sm font-medium text-gray-100 dark:text-gray-300"
-                  >
-                    Remember Me
-                  </label>
-                </div>
-                <Link
-                  to={"/user/forgetpassword"}
-                  className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-                >
-                  Forgot Password?
-                </Link>
-              </div>
-              <div className=" flex justify-center">
-                <button
-                  type="submit"
-                  className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg   hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                >
-                  Login
-                </button>
-              </div>
-              <p className="text-gray-100 text-center mt-4">
-                New User?{" "}
-                <Link
-                  to={"/user/signup"}
-                  className="text-blue-600 hover:underline"
-                >
-                  Signup
-                </Link>
-              </p>
-            </form>
-          </div>
+          </form>
         </div>
       </div>
     </section>

Frontend/src/pages/Login/SignupPage.jsx

@@ -13,18 +13,12 @@ const SignupPage = () => {
 
   const handleRegisteration = async (event) => {
     event.preventDefault();
-    let userRole;
-    if (roleElement.current.value == "Student") {
-      userRole = "user";
-    } else {
-      userRole = "mentor";
-    }
+
     const user = {
       name:
         firstNameElement.current.value + " " + lastNameElement.current.value,
       email: emailElement.current.value,
       password: passwordElement.current.value,
-      role: userRole,
     };
 
     event.preventDefault();
@@ -39,13 +33,10 @@ const SignupPage = () => {
     });
     const data = await responce.json();
 
-    //console.log("Our user data is : ", data);
-
     firstNameElement.current.value = "";
     lastNameElement.current.value = "";
     emailElement.current.value = "";
     passwordElement.current.value = "";
-    roleElement.current.value = "";
 
     if (data.success == true) {
       navigate("/user/login");
@@ -53,143 +44,147 @@ const SignupPage = () => {
   };
 
   return (
-    <section className="bg-[url(https://i.pinimg.com/736x/6c/d2/cc/6cd2cc05a7e464a78bdf1124b4ad30f1.jpg)] bg-cover font-sans flex flex-col justify-center md:p-5 ">
-      <div className="container mx-auto p-4 pt-24 sm:mt-32 md:mt-0">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <div className="bg-gradient-to-br from-purple-300 to-pink-200 rounded-lg shadow-md  min-h-40 object-center md:hidden">
-            <div className="flex flex-col items-center justify-center h-full relative">
-              <img
-                src="/images/background1.jpg"
-                alt=""
-                className="absolute order-3 w-full h-full"
-              />
-              <h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl relative ml-8">
-                Welcome to Crop Compass
-              </h1>
-            </div>
-          </div>
-          <div className="backdrop-blur-md bg-gradient-to-tr from-slate-300/10 to-slate-200/30 rounded-lg shadow-md lg:p-36">
-            <h1 className="text-2xl font-bold text-gray-50 mb-4">
-              Register Your account
+    <section className="bg-[url(https://i.pinimg.com/736x/6c/d2/cc/6cd2cc05a7e464a78bdf1124b4ad30f1.jpg)] bg-cover font-sans flex flex-col justify-center min-h-screen max-h-screen">
+      <div className="flex justify-between items-center w-full h-full p-5">
+        {/* <div className="bg-gradient-to-br from-purple-300 to-pink-200 rounded-lg shadow-md  min-h-40 object-center md:hidden">
+          <div className="flex flex-col items-center justify-center h-full relative">
+            <img
+              src="/images/background1.jpg"
+              alt=""
+              className="absolute order-3 w-full h-full"
+            />
+            <h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl relative ml-8">
+              Welcome to Crop Compass
             </h1>
-            <p className="text-gray-100">
-              Welcome to Crop Compass. 
-            </p>
-            <p className="text-gray-100 mb-6">
-              Please register your new account.           
-            </p>
-            <form
-              action="#"
-              className="space-y-6"
-              onSubmit={handleRegisteration}
-            >
-              <div className="flex flex-col gap-5 sm:flex-row">
-                <div className="w-full">
-                  <label
-                    htmlFor="username"
-                    className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
-                  >
-                    First Name
-                  </label>
-                  <input
-                    type="text"
-                    id="firstName"
-                    ref={firstNameElement}
-                    className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                    placeholder="John"
-                    required
-                  />
-                </div>
-                <div className="w-full">
-                  <label
-                    htmlFor="username"
-                    className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
-                  >
-                    Last Name
-                  </label>
-                  <input
-                    type="text"
-                    id="LastName"
-                    ref={lastNameElement}
-                    className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                    placeholder="Doe"
-                    required
-                  />
-                </div>
-              </div>
-
-              <div>
+          </div>
+        </div> */}
+        <div className="backdrop-blur-md bg-gradient-to-tr from-slate-300/10 to-slate-200/30 rounded-lg shadow-md lg:p-36 h-[95vh]">
+          <h1 className="text-2xl font-bold text-gray-50 mb-4">
+            Register Your account
+          </h1>
+          <p className="text-gray-100">Welcome to Crop Compass.</p>
+          <p className="text-gray-100 mb-6">
+            Please register your new account.
+          </p>
+          <form action="#" className="space-y-6" onSubmit={handleRegisteration}>
+            <div className="flex flex-col gap-5 sm:flex-row">
+              <div className="w-full">
                 <label
                   htmlFor="username"
                   className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
                 >
-                  Email
+                  First Name
                 </label>
                 <input
-                  type="email"
-                  id="email"
-                  ref={emailElement}
-                  className="bg-gray-50 border border-gray-300 text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="user@mail.com"
-                  required
-                />
-              </div>
-              <div>
-                <label
-                  htmlFor="password"
-                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-                >
-                  Password
-                </label>
-                <input
-                  type="password"
-                  id="password"
-                  ref={passwordElement}
+                  type="text"
+                  id="firstName"
+                  ref={firstNameElement}
                   className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="At least 6 unique Characters.. "
+                  placeholder="John"
                   required
                 />
               </div>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center">
-                  <input
-                    id="remember_me"
-                    type="checkbox"
-                    value=""
-                    className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <label
-                    htmlFor="remember_me"
-                    className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-                  >
-                    Remember Me
-                  </label>
-                </div>
-                <a
-                  href="#"
-                  className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-                ></a>
-              </div>
-              <div className=" flex justify-center">
-                <button
-                  type="submit"
-                  className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg   hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+              <div className="w-full">
+                <label
+                  htmlFor="username"
+                  className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
                 >
-                  Register your Account
-                </button>
+                  Last Name
+                </label>
+                <input
+                  type="text"
+                  id="LastName"
+                  ref={lastNameElement}
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  placeholder="Doe"
+                  required
+                />
               </div>
-              <p className="text-gray-600 text-center mt-4">
-                Already have an Account ?{" "}
-                <Link
-                  to={"/user/login"}
-                  className="text-blue-600 hover:underline"
+            </div>
+
+            <div>
+              <label
+                htmlFor="username"
+                className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
+              >
+                Email
+              </label>
+              <input
+                type="email"
+                id="email"
+                ref={emailElement}
+                className="bg-gray-50 border border-gray-300 text-black text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="user@mail.com"
+                required
+              />
+            </div>
+            <div>
+              <label
+                htmlFor="password"
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+              >
+                Password
+              </label>
+              <input
+                type="password"
+                id="password"
+                ref={passwordElement}
+                className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="At least 6 unique Characters.. "
+                required
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <input
+                  id="remember_me"
+                  type="checkbox"
+                  value=""
+                  className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                />
+                <label
+                  htmlFor="remember_me"
+                  className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
                 >
-                  Login
-                </Link>
-              </p>
-            </form>
+                  Remember Me
+                </label>
+              </div>
+              <a
+                href="#"
+                className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+              ></a>
+            </div>
+            <div className=" flex justify-center">
+              <button
+                type="submit"
+                className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg   hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+              >
+                Register your Account
+              </button>
+            </div>
+            <p className="text-gray-600 text-center mt-4">
+              Already have an Account ?{" "}
+              <Link
+                to={"/user/login"}
+                className="text-blue-600 hover:underline"
+              >
+                Login
+              </Link>
+            </p>
+          </form>
+        </div>
+
+        <div className="rounded-lg shadow-md text-center w-auto">
+          <div className="flex flex-col items-center justify-center h-full ">
+            <h1 className="text-6xl  font-bold text-white mb-4 md:text-6xl lg:text-9xl  ml-8">
+              Start your Journey
+              <br />
+              with <br />
+              Crop Compass
+            </h1>
           </div>
-          {/* <div className=" backdrop-blur-sm  rounded-lg shadow-md md:block">
+        </div>
+        {/* <div className=" backdrop-blur-sm  rounded-lg shadow-md md:block">
             <div className="flex flex-col items-center justify-center h-full relative text-center">
               <img
                 src="/images/background1.jpg"
@@ -201,7 +196,6 @@ const SignupPage = () => {
               </h1>
             </div>
           </div> */}
-        </div>
       </div>
     </section>
   );

Frontend/src/pages/Password/ResetPassword.jsx

@@ -14,7 +14,7 @@ const ResetPassword = () => {
 
   const { token } = useParams();
 
-  // console.log("So our Token is : ", token);
+ 
 
   const handleResetPassword = async (event) => {
     event.preventDefault();
@@ -41,7 +41,7 @@ const ResetPassword = () => {
 
       const data = await responce.json();
 
-      //console.log("Status of the Reset password", data);
+      
 
       if (data.success === true) {
         navigate("/user/login");

Frontend/src/pages/UserPanel/Ai.jsx

@@ -33,9 +33,9 @@ const Ai = () => {
         throw new Error("Prediction request failed");
       }
 
-      const data = await response.json();
+      const result = await response.json();
       // Assuming the API returns a JSON object with an "output" field.
-      setPrediction(data.output || "No prediction returned");
+      setPrediction(result.data || "No prediction returned");
     } catch (err) {
       console.error("Error during prediction:", err);
       setError(err.message);
@@ -45,32 +45,34 @@ const Ai = () => {
   };
 
   return (
-    <div className="max-w-md mx-auto p-6 bg-white shadow rounded-lg">
-      <h2 className="text-2xl font-bold mb-4 text-center">
-        Plant disease prediction
-      </h2>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <input
-          type="file"
-          accept="image/*"
-          onChange={handleFileChange}
-          className="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 p-2"
-        />
-        <button
-          type="submit"
-          disabled={loading || !selectedFile}
-          className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          {loading ? "Predicting..." : "Predict"}
-        </button>
-      </form>
-      {error && <p className="mt-4 text-center text-red-600">{error}</p>}
-      {prediction && (
-        <div className="mt-4 p-4 bg-green-100 border border-green-300 rounded">
-          <h3 className="text-lg font-semibold">Prediction:</h3>
-          <p>{prediction}</p>
-        </div>
-      )}
+    <div className="min-h-screen w-full flex items-center justify-center max-h-screen">
+      <div className="max-w-md mx-auto p-6 bg-white shadow rounded-lg">
+        <h2 className="text-2xl font-bold mb-4 text-center">
+          Plant disease prediction
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleFileChange}
+            className="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 p-2"
+          />
+          <button
+            type="submit"
+            disabled={loading || !selectedFile}
+            className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            {loading ? "Predicting..." : "Predict"}
+          </button>
+        </form>
+        {error && <p className="mt-4 text-center text-red-600">{error}</p>}
+        {prediction && (
+          <div className="mt-4 p-4 bg-green-100 border border-green-300 rounded">
+            <h3 className="text-lg font-semibold">Prediction:</h3>
+            <p>{prediction}</p>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

Frontend/src/pages/UserPanel/Farm/AddCrop.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useCreateCropMutation } from "../../../store/api/cropApi";
 
 const AddCrop = ({ farmId }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -12,6 +13,7 @@ const AddCrop = ({ farmId }) => {
   const [uploading, setUploading] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState("");
+  const [createCrop] = useCreateCropMutation();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -28,16 +30,19 @@ const AddCrop = ({ farmId }) => {
     if (image) {
       formData.append("image", image);
     }
-    console.log(formData);
+
     try {
-      const response = await fetch(`http://localhost:8000/api/v1/crop`, {
-        method: "POST",
-        credentials: "include",
-        body: formData,
-      });
-      if (!response.ok) {
-        throw new Error("Failed to create crop");
-      }
+      const response = await createCrop(formData);
+      // const response = await fetch(`http://localhost:8000/api/v1/crop`, {
+      //   method: "POST",
+      //   credentials: "include",
+      //   body: formData,
+      // });
+      // if (!response.ok) {
+      //   throw new Error("Failed to create crop");
+      // }
+
+     
       setSuccess("Crop created successfully!");
       // Reset form fields
       setName("");
@@ -46,6 +51,7 @@ const AddCrop = ({ farmId }) => {
       setGrowthStage("");
       setHealthStatus("");
       setImage(null);
+      setIsModalOpen(false);
     } catch (err) {
       setError(err.message);
     } finally {

Frontend/src/pages/UserPanel/Farm/AddFarm.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useCreateFarmMutation } from "../../../store/api/farmApi";
 
 const AddFarm = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -11,6 +12,8 @@ const AddFarm = () => {
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(false);
   const navigator = useNavigate();
+
+  const [createFarm] = useCreateFarmMutation();
   const handleSubmit = async (e) => {
     e.preventDefault();
     const farmData = {
@@ -21,30 +24,19 @@ const AddFarm = () => {
       size: sizeContent,
     };
 
-    console.log(farmData);
+   
 
     try {
-      const response = await fetch("http://localhost:8000/api/v1/farm", {
-        method: "POST",
-        credentials: "include",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(farmData),
-      });
+      const res = await createFarm(farmData);
+    
 
-      const data = await response.json();
-      console.log(data);
-
-      if (!response.ok) {
-        throw new Error("Failed to add farm");
+      if (res.error) {
+        return null;
       }
 
-      navigator("farmpage");
       setSuccess(true);
       setError(null);
       setIsModalOpen(false);
-      window.location.reload();
     } catch (err) {
       setError(err.message);
       setSuccess(false);

Frontend/src/pages/UserPanel/Farm/AddTransactions.jsx

@@ -1,42 +1,52 @@
 import React, { useState } from "react";
 import Loader from "../../../components/Loader";
+import { useAddTransactionMutation } from "../../../store/api/financeApi";
 
-const AddTransaction = ({ farmId }) => {
+const AddTransaction = ({ farmId, financeId }) => {
   const [modalOpen, setModalOpen] = useState(false);
   const [type, setType] = useState("Expense");
   const [amount, setAmount] = useState("");
   const [description, setDescription] = useState("");
   const [loading, setLoading] = useState(false);
   const [message, setMessage] = useState("");
+  const [addTransaction] = useAddTransactionMutation();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
     setMessage("");
 
+    const transactionData = {
+      type,
+      amount: parseFloat(amount),
+      description,
+    };
+   
+
     try {
-      const response = await fetch(
-        `http://localhost:8000/api/v1/finance/${farmId}/transaction`,
-        {
-          method: "POST",
-          credentials: "include",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            type,
-            amount: parseFloat(amount),
-            description,
-          }),
-        }
-      );
+      const response = await addTransaction({ financeId, transactionData });
+      // const response = await fetch(
+      //   `http://localhost:8000/api/v1/finance/${farmId}/transaction`,
+      //   {
+      //     method: "POST",
+      //     credentials: "include",
+      //     headers: {
+      //       "Content-Type": "application/json",
+      //     },
+      //     body: JSON.stringify({
+      //       type,
+      //       amount: parseFloat(amount),
+      //       description,
+      //     }),
+      //   }
+      // );
 
-      if (!response.ok) {
-        throw new Error("Failed to create transaction");
-      }
+      // if (!response.ok) {
+      //   throw new Error("Failed to create transaction");
+      // }
 
-      const data = await response.json();
-      console.log("Transaction created:", data);
+      // const data = await response.json();
+    
       setMessage("Transaction created successfully!");
       // Optionally clear the form
       setType("Expense");

Frontend/src/pages/UserPanel/Farm/CreateTask.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useCreateTaskMutation } from "../../../store/api/taskApi";
 
 const CreateTask = ({ farmId, onTaskCreated }) => {
   const [farm, setFarm] = useState(farmId);
@@ -10,6 +11,8 @@ const CreateTask = ({ farmId, onTaskCreated }) => {
   const [message, setMessage] = useState("");
   const [modalOpen, setModalOpen] = useState(false);
 
+  const [createTask] = useCreateTaskMutation();
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
@@ -27,20 +30,11 @@ const CreateTask = ({ farmId, onTaskCreated }) => {
       status,
     };
 
+  
+
     try {
-      const response = await fetch("http://localhost:8000/api/v1/task", {
-        method: "POST",
-        credentials: "include",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(taskData),
-      });
-      if (!response.ok) {
-        throw new Error("Failed to create task");
-      }
-      const data = await response.json();
-      console.log("Task created:", data);
+      const res = await createTask(taskData).unwrap();
+
       setMessage("Task created successfully!");
       setModalOpen(false);
       // Call the parent's callback with the newly created task

Frontend/src/pages/UserPanel/Farm/CreateTransactions.jsx

@@ -1,29 +1,47 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Loader from "../../../components/Loader";
+import { useParams } from "react-router-dom";
+import { useCreateFinanceMutation } from "../../../store/api/financeApi";
+import { useGetFarmByIdQuery } from "../../../store/api/farmApi";
 
 const CreateFinance = () => {
   const [loading, setLoading] = useState(false);
   const [message, setMessage] = useState("");
-  // Hardcoded farm ID from your example
-  const farmId = "67b9e6829c4979463e64a0fc";
 
+  const [farm, setFarm] = useState("");
+  // Hardcoded farm ID from your example
+  const { farmId } = useParams();
+  const [createFinance] = useCreateFinanceMutation();
+
+  const { data: farmData, isLoading, error } = useGetFarmByIdQuery(farmId);
+
+
+
+  useEffect(() => {
+    if (!isLoading && !error && farmData) {
+      setFarm(farmData);
+    }
+  }, [farmData]);
   const handleCreateFinance = async () => {
     setLoading(true);
     setMessage("");
     try {
-      const response = await fetch("http://localhost:8000/api/v1/finance", {
-        method: "POST",
-        credentials: "include",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ farm: farmId }),
-      });
+      const responce = await createFinance({ farm: farmId });
+      // const response = await fetch("http://localhost:8000/api/v1/finance", {
+      //   method: "POST",
+      //   credentials: "include",
+      //   headers: {
+      //     "Content-Type": "application/json",
+      //   },
+      //   body: JSON.stringify({ farm: farmId }),
+      // });
+
+   
       if (!response.ok) {
         throw new Error("Failed to create finance");
       }
       const data = await response.json();
-      console.log("Finance response:", data);
+
       setMessage("Finance created successfully!");
     } catch (error) {
       console.error("Error creating finance:", error);
@@ -39,7 +57,7 @@ const CreateFinance = () => {
       disabled={loading}
       className="mt-4 w-30 inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
     >
-      {loading ? <Loader></Loader> : "Create Finance"}
+      Create Finance
     </button>
   );
 };

Frontend/src/pages/UserPanel/Farm/CropPage.jsx

@@ -0,0 +1,260 @@
+import React, { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import Farm from "./Farm";
+import CropTable from "./CropTable";
+import Transactions from "./Transactions";
+import CreateTransactions from "./CreateTransactions";
+import Loader from "../../../components/Loader";
+import AddTransaction from "./AddTransactions";
+import FinanceSummary from "./FinanceSummary";
+import CreateTask from "./CreateTask";
+import DisplayTast from "./DisplayTask";
+import { useGetFarmByIdQuery } from "../../../store/api/farmApi";
+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();
+  const navigate = useNavigate();
+  const [farmData, setFarmData] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  const farmId = cropId;
+
+ 
+
+  const { data: farm, error, isLoading } = useGetFarmByIdQuery(farmId);
+  const {
+    data: crop,
+    error: cropError,
+    isLoading: cropLoading,
+  } = useGetCropByIdQuery(cropId);
+
+  useEffect(() => {
+    if (!isLoading && !error && farm) {
+      setFarmData(farm);
+      setLoading(false);
+    }
+  }, [farm]);
+
+ 
+  const {
+    data: harvest,
+    isLoading: harvestLoading,
+    error: harvestError,
+  } = useCropHarvestQuery(cropId);
+
+ 
+
+  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">
+      {/* Header Section */}
+      <header className="mb-4">
+        <div className="flex justify-between items-center">
+          <h2 className="text-2xl font-bold">{crop?.name}</h2>
+          <div className="flex items-center space-x-4">
+            <button
+              type="button"
+              className="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded"
+              onClick={() => navigate(`/user/dashboard`)}
+            >
+              Back
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Crop Table Section */}
+      <section className="w-full flex justify-center">
+        <img src={crop?.image} className="w-1/2 h-auto rounded-md" alt="" />
+      </section>
+
+      <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>
+
+      <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>
+
+        <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>
+
+            <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>
+
+              <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>
+
+              <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>
+  );
+}

Frontend/src/pages/UserPanel/Farm/CropTable.jsx

@@ -1,10 +1,22 @@
 import React, { useState, useEffect } from "react";
 import Loader from "../../../components/Loader";
+import { Link, useNavigate } from "react-router-dom";
+import { useGetCropsByFarmQuery } from "../../../store/api/cropApi";
 
 const CropTable = ({ farmId }) => {
   const [crops, setCrops] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+
+  const navigate = useNavigate();
+
+  const {
+    data: cropsData,
+    error: cropsError,
+    isLoading: cropsLoading,
+  } = useGetCropsByFarmQuery(farmId);
+
+ 
   const handleRemoveCrop = async (cropId) => {
     try {
       await fetch(`http://localhost:8000/api/v1/crop/${cropId}`, {
@@ -19,34 +31,13 @@ const CropTable = ({ farmId }) => {
       setError(err.message);
     }
   };
+
   useEffect(() => {
-    const fetchCrops = async () => {
-      try {
-        const response = await fetch(
-          `http://localhost:8000/api/v1/crop/farm/${farmId}`,
-          {
-            credentials: "include",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
-
-        if (!response.ok) {
-          throw new Error("Failed to fetch crops");
-        }
-
-        const data = await response.json();
-        setCrops(data || []);
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchCrops();
-  }, []);
+    if (cropsData) {
+      setCrops(cropsData);
+      setLoading(false);
+    }
+  }, [cropsData]);
 
   if (loading) {
     return <Loader></Loader>;
@@ -102,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 ? (

Frontend/src/pages/UserPanel/Farm/DisplayTask.jsx

@@ -1,11 +1,20 @@
 import React, { useState, useEffect } from "react";
 import Loader from "../../../components/Loader";
+import { useGetTasksByFarmQuery } from "../../../store/api/taskApi";
 
 const DisplayTast = ({ farmId }) => {
   const [tasks, setTasks] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
+  const {
+    data: taskList,
+    error: taskError,
+    isLoading,
+  } = useGetTasksByFarmQuery(farmId);
+
+ 
+
   // Function to delete a task and update the state
   const handleDeleteTask = async (taskId) => {
     try {
@@ -23,7 +32,7 @@ const DisplayTast = ({ farmId }) => {
       // Optionally check the response, but we'll update state regardless.
       // Remove the deleted task from state.
       setTasks((prevTasks) => prevTasks.filter((task) => task._id !== taskId));
-      console.log(`Task ${taskId} deleted successfully.`);
+
     } catch (error) {
       console.error("Error deleting task:", error);
       // Optionally, you could set an error state here.
@@ -31,33 +40,11 @@ const DisplayTast = ({ farmId }) => {
   };
 
   useEffect(() => {
-    const fetchTasks = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const response = await fetch(
-          `http://localhost:8000/api/v1/task/farm/${farmId}`,
-          {
-            credentials: "include",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
-        if (!response.ok) {
-          throw new Error("Failed to fetch tasks");
-        }
-        const data = await response.json();
-        setTasks(data);
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchTasks();
-  }, [farmId]);
+    if (taskList) {
+      setTasks(taskList);
+      setLoading(false);
+    }
+  }, [farmId, taskList]);
 
   if (loading) return <div>Loading tasks...</div>;
   if (error) return <div className="text-red-600">Error: {error}</div>;

Frontend/src/pages/UserPanel/Farm/EditFarm.jsx

@@ -1,23 +1,26 @@
 import React, { useState } from "react";
+import { useDeleteFarmMutation } from "../../../store/api/farmApi";
 
 const EditFarm = ({ _id, onDelete }) => {
   const [modalOpen, setModalOpen] = useState(false);
+  const [deleteFarm] = useDeleteFarmMutation();
 
   // This function will run when the "Yes, I'm sure" button is clicked.
   const handleDeleteFarm = async () => {
     try {
-      const response = await fetch(`http://localhost:8000/api/v1/farm/${_id}`, {
-        method: "DELETE",
-        credentials: "include",
-      });
-      const data = await response.json();
-      console.log("Delete response:", data);
-      if (data.success) {
-        // Notify the parent component to update its state
-        if (onDelete) onDelete(_id);
+      const res = await deleteFarm(_id);
+      // const response = await fetch(`http://localhost:8000/api/v1/farm/${_id}`, {
+      //   method: "DELETE",
+      //   credentials: "include",
+      // });
+      // const data = await response.json();
+     
+
+      if (!res) {
+        return null;
       }
+
       setModalOpen(false); // Close the modal after the operation
-      window.location.reload();
     } catch (error) {
       console.error("Error deleting farm:", error);
     }

Frontend/src/pages/UserPanel/Farm/FarmPage.jsx

@@ -9,49 +9,30 @@ import AddTransaction from "./AddTransactions";
 import FinanceSummary from "./FinanceSummary";
 import CreateTask from "./CreateTask";
 import DisplayTast from "./DisplayTask";
+import { useGetFarmByIdQuery } from "../../../store/api/farmApi";
 
 export default function FarmPage() {
   const { farmId } = useParams();
   const navigate = useNavigate();
-  const [farmData, setFarmData] = useState(null);
+  const [farmData, setFarmData] = useState("");
   const [loading, setLoading] = useState(true);
 
+ 
+
+  const { data: farm, error, isLoading } = useGetFarmByIdQuery(farmId);
+
   useEffect(() => {
-    async function fetchFarmData() {
-      try {
-        const response = await fetch(
-          `http://localhost:8000/api/v1/farm/${farmId}`,
-          {
-            method: "GET",
-            credentials: "include",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
-        const jsonData = await response.json();
-        console.log("Fetched farm data:", jsonData);
-        setFarmData(jsonData);
-      } catch (error) {
-        console.error("Error fetching farm data: ", error);
-      } finally {
-        setLoading(false);
-      }
+    if (!isLoading && !error && farm) {
+      setFarmData(farm);
+      setLoading(false);
     }
-    fetchFarmData();
-  }, [farmId]);
+  }, [farm]);
 
-  if (loading) {
-    return <Loader />;
-  }
+ 
 
-  if (!farmData) {
-    return (
-      <div className="w-full bg-white rounded-lg shadow p-4">
-        <p>No farm data found.</p>
-      </div>
-    );
-  }
+  
+
+ 
 
   return (
     <div className="w-full bg-white rounded-lg shadow p-4 space-y-8">
@@ -82,14 +63,14 @@ export default function FarmPage() {
       {/* Add Transaction Modal Section */}
       <section>
         <div className="flex justify-end">
-          <AddTransaction farmId={farmId} />
+          <AddTransaction farmId={farmId} financeId={farmData?.finances?._id} />
         </div>
       </section>
 
       {/* Finance Summary Section */}
       <section>
         <div className="flex justify-end">
-          <FinanceSummary farmId={farmId} />
+          <FinanceSummary farmId={farmId} financeId={farmData?.finances?._id} />
         </div>
       </section>
 

Frontend/src/pages/UserPanel/Farm/FinanceSummary.jsx

@@ -1,20 +1,45 @@
 import React, { useState, useEffect } from "react";
 import Loader from "../../../components/Loader";
+import { useGetTransactionsQuery } from "../../../store/api/financeApi";
 
-const FinanceSummary = ({ farmId }) => {
+function formatTimestamp(isoString) {
+  const date = new Date(isoString);
+  return date.toLocaleString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true, // Ensures AM/PM format
+  });
+}
+
+const FinanceSummary = ({ farmId, financeId }) => {
   const [summary, setSummary] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
+
+
+  const {
+    data: transaction,
+    error: transactionError,
+    isLoading,
+  } = useGetTransactionsQuery(financeId);
+
+ 
+
   useEffect(() => {
     const fetchSummary = async () => {
       setLoading(true);
       setError("");
       try {
         const response = await fetch(
-          `http://localhost:8000/api/v1/finance/summary/${farmId}`,
+          `http://localhost:8000/api/v1/finance/summary/${financeId}`,
           { credentials: "include" }
         );
+       
         if (!response.ok) {
           throw new Error("Failed to fetch summary");
         }
@@ -30,45 +55,70 @@ const FinanceSummary = ({ farmId }) => {
     fetchSummary();
   }, [farmId]);
 
-  if (loading) return <Loader />;
-  if (error) return <div className="p-4 text-center text-red-600">{error}</div>;
+  // if (loading) return <Loader />;
+  //if (error) return <div className="p-4 text-center text-red-600">{error}</div>;
 
   // Extract only the important fields.
-  const { totalExpenses, totalRevenue, transactions } = summary;
+  const { totalExpenses, totalRevenue, transactions } = summary || {};
   const transactionsCount = Array.isArray(transactions)
     ? transactions.length
     : 0;
 
   return (
-    <div className="max-w-md mx-auto p-8 bg-gray-50">
+    <div className="w-full mx-auto p-8 bg-gray-50">
       <div className="bg-white rounded-lg shadow overflow-hidden">
         <header className="bg-blue-600 px-6 py-4">
-          <h2 className="text-3xl font-bold text-white">Finance Summary</h2>
+          <h2 className="text-3xl font-bold text-white">
+            Transactions Summary
+          </h2>
         </header>
-        <div className="p-6">
-          <table className="w-full table-auto">
-            <tbody className="divide-y divide-gray-200">
-              <tr className="hover:bg-gray-50">
-                <td className="px-6 py-4 font-medium text-gray-600">
-                  Total Expenses
+        <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">
+                Type of Transaction
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Amount
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Description
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Date
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {transaction?.map((transaction) => (
+              <tr>
+                <td scope="col" className="px-6 py-3">
+                  {transaction.type}
                 </td>
-                <td className="px-6 py-4 text-gray-800">{totalExpenses}</td>
-              </tr>
-              <tr className="hover:bg-gray-50">
-                <td className="px-6 py-4 font-medium text-gray-600">
-                  Total Revenue
+                <td scope="col" className="px-6 py-3">
+                  {transaction.amount}
                 </td>
-                <td className="px-6 py-4 text-gray-800">{totalRevenue}</td>
-              </tr>
-              <tr className="hover:bg-gray-50">
-                <td className="px-6 py-4 font-medium text-gray-600">
-                  Transactions
+                <td scope="col" className="px-6 py-3">
+                  {transaction.description}
+                </td>
+                <td scope="col" className="px-6 py-3">
+                  {formatTimestamp(transaction.date)}
+                </td>
+                <td className="px-6 py-4">
+                  <button
+                    className="block text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5"
+                    type="button"
+                  >
+                    Remove
+                  </button>
                 </td>
-                <td className="px-6 py-4 text-gray-800">{transactionsCount}</td>
               </tr>
-            </tbody>
-          </table>
-        </div>
+            ))}
+          </tbody>
+        </table>
       </div>
     </div>
   );

Frontend/src/pages/UserPanel/Farm/Transactions.jsx

@@ -13,7 +13,7 @@ const Transactions = ({ farmId }) => {
       .then((response) => response.json())
       .then((data) => {
         setData(data);
-        console.log("Fetched data:", data);
+
         setLoading(false);
       })
       .catch((error) => {
@@ -31,34 +31,22 @@ const Transactions = ({ farmId }) => {
           <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">
-                Field
+                Total Expenses
               </th>
               <th scope="col" className="px-6 py-3">
-                Value
+                totalRevenue
               </th>
             </tr>
           </thead>
           <tbody>
-            {!Array.isArray(data) ? (
-              // Data is an object: show key-value pairs
-              Object.entries(data).map(([key, value]) => (
-                <tr key={key}>
-                  <td className="px-6 py-3 font-bold">{key}</td>
-                  <td className="px-6 py-3">
-                    {typeof value === "object" ? JSON.stringify(value) : value}
-                  </td>
-                </tr>
-              ))
-            ) : // Data is an array: render using your Td component
-            data.length > 0 ? (
-              data.map((item) => <Td key={item.id} children={item} />)
-            ) : (
-              <tr>
-                <td colSpan={2} className="text-center">
-                  No data available
-                </td>
-              </tr>
-            )}
+            <tr>
+              <td className="px-6 py-3">
+                {data.totalExpenses ? data.totalExpenses : "N/A"}
+              </td>
+              <td className="px-6 py-3">
+                {data.totalRevenue ? data.totalRevenue : "N/A"}
+              </td>
+            </tr>
           </tbody>
         </table>
       )}

Frontend/src/pages/UserPanel/MainUserPanel.jsx

@@ -25,7 +25,7 @@ const MainUserPanel = () => {
 
     const data = await responce.json();
 
-    //console.log("User Logged out data is : ", data);
+    
 
     if (data.success === true) {
       navigate("/user/login");
@@ -38,7 +38,7 @@ const MainUserPanel = () => {
       <div className="container mx-auto p-4">
         <div className="flex items-center mb-4 md:hidden">
           <img
-            src={`${user.avatar}`}
+            src={`/images/default1.png`}
             alt="Profile Picture"
             className="rounded-full w-10 h-10 mr-2"
           />
@@ -49,7 +49,7 @@ const MainUserPanel = () => {
           <div className="w-full md:w-1/4 bg-gradient-to-br from-white/30 to-gray-50/30 rounded-xl shadow-lg p-6 backdrop-blur-lg">
             <div className="hidden md:flex items-center mb-6">
               <img
-                src={`${user.avatar}`}
+                src={`/images/default1.png`}
                 alt="Profile Picture"
                 className="w-12 h-12 rounded-full mr-3 border-2 border-green-500"
               />
@@ -231,7 +231,7 @@ const MainUserPanel = () => {
             </div>
             <div className="mb-4">
               <img
-                src={`${user.avatar}`}
+                src={`/images/default1.png`}
                 alt="Profile Picture"
                 className="rounded-full w-24 h-24 mx-auto"
               />
@@ -243,9 +243,12 @@ const MainUserPanel = () => {
                 {user.address == null && "Maharashtra, Pune"}
               </p>
               <div className="flex justify-center mt-4">
-                <button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
+                <Link
+                  to="/"
+                  className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2"
+                >
                   <FaHome className="text-lg font-extrabold" />
-                </button>
+                </Link>
                 <button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
                   <IoMdSettings className="text-lg font-extrabold" />
                 </button>

Frontend/src/pages/UserPanel/MentorSessionCard.jsx

@@ -20,14 +20,14 @@ const MentorSessionCard = ({ session }) => {
 
   const user = useSelector((store) => store.user);
 
-  //console.log("User in the Dashborde : ");
+ 
 
   let timeStringToDayName = (dateStr) => {
     // for getting day name by time string
     // const dateStr = "2024-09-26T04:31:50.646+00:00";
     const date = new Date(dateStr);
     const dayName = date.toLocaleDateString("en-US", { weekday: "long" });
-    //console.log(dayName);
+  
     return dayName;
   };
 
@@ -48,7 +48,7 @@ const MentorSessionCard = ({ session }) => {
     };
 
     const istDate = date.toLocaleString("en-US", options);
-    console.log(istDate); // Output: "September 26, 2024, 10:01:50 AM"
+   
     return istDate;
   };
 

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>
   );

Frontend/src/pages/UserPanel/Notifications.jsx

@@ -75,29 +75,7 @@ const Notifications = () => {
     },
   ];
 
-  // for getting day name by time string
-  // const dateStr = '2024-09-26T04:31:50.646+00:00';
-  // const date = new Date(dateStr);
-  // const dayName = date.toLocaleDateString('en-US', { weekday: 'long' });
-  // console.log(dayName); // Output: "Thursday"
-
-  // for converting the to get time in am or pm
-  // const utcDateStr = '2024-09-26T04:31:50.646+00:00';
-  // const date = new Date(utcDateStr);
-  // India TimeZone is Asia/Kolkata, which is UTC+5:30
-  // const options = {
-  //     timeZone: 'Asia/Kolkata',
-  //     hour: 'numeric',
-  //     minute: 'numeric',
-  //     second: 'numeric',
-  //     hour12: true,
-  //   year: 'numeric',
-  //   month: 'long',
-  //   day: 'numeric'
-  // };
-
-  // const istDate = date.toLocaleString('en-US', options);
-  // console.log(istDate); // Output: "September 26, 2024, 10:01:50 AM"
+  
 
   return (
     <>

Frontend/src/pages/UserPanel/Settings.jsx

@@ -18,8 +18,6 @@ const Settings = () => {
 
   const loader = useSelector((store) => store.loader);
 
-  //console.log("Before the user is : ", user);
-
   const dispatch = useDispatch();
 
   // Optimise the call for the database here you are refreshing the page again and again which makes read and write operation
@@ -27,11 +25,9 @@ const Settings = () => {
     event.preventDefault();
     formData.append("avatar", avatar);
 
-    //console.log("forma daata is : ", formData);
-
     if (avatar) {
       dispatch(loaderSliceActions.showLoader());
-      //console.log("The loader values is : ", loader);
+
       const responce = await fetch(`${BACKEND_URL}/api/v1/user/avatar`, {
         method: "PUT",
         credentials: "include",
@@ -40,13 +36,11 @@ const Settings = () => {
 
       const finalResponce = await responce.json();
 
-      //console.log("Our final responce is : ", finalResponce);
-
       if (finalResponce.success) {
         dispatch(loaderSliceActions.hideLoader());
-        //console.log("The loader values is : ", loader);
+
         dispatch(userSliceActions.addUser(finalResponce.data));
-        // console.log("Updated User is : ", user);
+
         window.location.reload();
       }
     }
@@ -68,8 +62,6 @@ const Settings = () => {
 
     const user = await responce.json();
 
-    //console.log("User Login Data is here : ", user);
-
     dispatch(userSliceActions.addUser(user.data));
 
     emailElement.current.value = "";
@@ -90,7 +82,7 @@ const Settings = () => {
 
             <div className="w-full h-auto flex items-center justify-center py-7">
               <div className="w-[9rem] h-[9rem] overflow-hidden rounded-full object-center">
-                <img src={`${user.avatar}`} alt="Avatar" />
+                <img src={`/images/default1.png`} alt="Avatar" />
               </div>
             </div>
           </div>
@@ -144,7 +136,6 @@ const Settings = () => {
                   className="hidden"
                   onChange={(e) => {
                     setAvatar(e.target.files[0]);
-                    //console.log(e.target.files[0]);
                   }}
                 />
               </label>

Frontend/src/store/api/cropApi.js

@@ -0,0 +1,93 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+const API_URI = import.meta.env.VITE_API_URL;
+
+export const cropApi = createApi({
+  reducerPath: "cropApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${API_URI}/api/v1/crop`,
+    credentials: "include", // Ensures credentials (cookies, tokens) are included
+  }),
+  tagTypes: ["Crops"],
+  endpoints: (builder) => ({
+    getCropsByFarm: builder.query({
+      query: (farmId) => `/farm/${farmId}`,
+      providesTags: ["Crops"],
+    }),
+    getCropById: builder.query({
+      query: (cropId) => `/${cropId}`,
+      providesTags: (result, error, cropId) => [{ type: "Crops", id: cropId }],
+    }),
+    createCrop: builder.mutation({
+      query: (formData) => ({
+        url: "/",
+        method: "POST",
+        body: formData,
+      }),
+      invalidatesTags: ["Crops"],
+    }),
+    updateCrop: builder.mutation({
+      query: ({ cropId, updatedCrop }) => ({
+        url: `/${cropId}`,
+        method: "PUT",
+        body: updatedCrop,
+      }),
+      invalidatesTags: (result, error, { cropId }) => [
+        { type: "Crops", id: cropId },
+      ],
+    }),
+    deleteCrop: builder.mutation({
+      query: (cropId) => ({
+        url: `/${cropId}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["Crops"],
+    }),
+    updateHealthStatus: builder.mutation({
+      query: ({ cropId, healthStatus }) => ({
+        url: `/health/${cropId}`,
+        method: "PUT",
+        body: { healthStatus },
+      }),
+      invalidatesTags: (result, error, { cropId }) => [
+        { type: "Crops", id: cropId },
+      ],
+    }),
+    updateGrowthStage: builder.mutation({
+      query: ({ cropId, growthStage }) => ({
+        url: `/growth/${cropId}`,
+        method: "PUT",
+        body: { growthStage },
+      }),
+      invalidatesTags: (result, error, { cropId }) => [
+        { type: "Crops", id: cropId },
+      ],
+    }),
+    cropHarvest: builder.query({
+      query: (cropId) => `/harvest/${cropId}`,
+    }),
+    suggestNextCrop: builder.query({
+      query: (cropId) => `/nextCrop/${cropId}`,
+    }),
+    suggestPesticides: builder.query({
+      query: (cropId) => `/pesticides/${cropId}`,
+    }),
+    suggestFertilizers: builder.query({
+      query: (cropId) => `/fertilizers/${cropId}`,
+    }),
+  }),
+});
+
+export const {
+  useGetCropsByFarmQuery,
+  useGetCropByIdQuery,
+  useCreateCropMutation,
+  useUpdateCropMutation,
+  useDeleteCropMutation,
+  useUpdateHealthStatusMutation,
+  useUpdateGrowthStageMutation,
+  useCropHarvestQuery,
+  useSuggestNextCropQuery,
+  useSuggestPesticidesQuery,
+  useSuggestFertilizersQuery,
+} = cropApi;

Frontend/src/store/api/farmApi.js

@@ -0,0 +1,58 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+const API_URI = import.meta.env.VITE_API_URL;
+
+export const farmApi = createApi({
+  reducerPath: "farmApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${API_URI}/api/v1/farm`,
+    credentials: "include",
+  }),
+  tagTypes: ["Farms"],
+  endpoints: (builder) => ({
+    getFarms: builder.query({
+      query: () => "/",
+      providesTags: ["Farms"],
+    }),
+    getFarmById: builder.query({
+      query: (farmId) => `/${farmId}`,
+      providesTags: ["Farms"],
+    }),
+    createFarm: builder.mutation({
+      query: (newFarm) => ({
+        url: "/",
+        method: "POST",
+        body: newFarm,
+        credentials: "include",
+      }),
+      invalidatesTags: ["Farms"],
+    }),
+    updateFarm: builder.mutation({
+      query: ({ farmId, updatedFarm }) => ({
+        url: `/${farmId}`,
+        method: "PUT",
+        body: updatedFarm,
+        credentials: "include",
+      }),
+      invalidatesTags: (result, error, { farmId }) => [
+        { type: "Farms", id: farmId },
+      ],
+    }),
+    deleteFarm: builder.mutation({
+      query: (farmId) => ({
+        url: `/${farmId}`,
+        method: "DELETE",
+        credentials: "include",
+      }),
+      invalidatesTags: ["Farms"],
+    }),
+  }),
+});
+
+export const {
+  useGetFarmsQuery,
+  useGetFarmByIdQuery,
+  useCreateFarmMutation,
+  useUpdateFarmMutation,
+  useDeleteFarmMutation,
+} = farmApi;

Frontend/src/store/api/financeApi.js

@@ -0,0 +1,58 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+const API_URI = import.meta.env.VITE_API_URL;
+
+export const financeApi = createApi({
+  reducerPath: "financeApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${API_URI}/api/v1/finance`,
+    credentials: "include",
+  }),
+  tagTypes: ["Finance", "Transactions"],
+  endpoints: (builder) => ({
+    getFinanceByFarm: builder.query({
+      query: (farmId) => `/${farmId}`,
+      providesTags: ["Finance"],
+    }),
+    getTransactions: builder.query({
+      query: (financeId) => `/transactions/${financeId}`,
+      providesTags: ["Transactions"],
+    }),
+    getFinancialSummary: builder.query({
+      query: (financeId) => `/summary/${financeId}`,
+      providesTags: ["Finance"],
+    }),
+    createFinance: builder.mutation({
+      query: (financeData) => ({
+        url: "/",
+        method: "POST",
+        body: financeData,
+      }),
+      invalidatesTags: ["Finance"],
+    }),
+    deleteTransaction: builder.mutation({
+      query: (financeId) => ({
+        url: `/${financeId}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["Transactions", "Finance"],
+    }),
+    addTransaction: builder.mutation({
+      query: ({ financeId, transactionData }) => ({
+        url: `/${financeId}/transaction`,
+        method: "POST",
+        body: transactionData,
+      }),
+      invalidatesTags: ["Transactions", "Finance"],
+    }),
+  }),
+});
+
+export const {
+  useGetFinanceByFarmQuery,
+  useGetTransactionsQuery,
+  useGetFinancialSummaryQuery,
+  useCreateFinanceMutation,
+  useDeleteTransactionMutation,
+  useAddTransactionMutation,
+} = financeApi;

Frontend/src/store/api/taskApi.js

@@ -0,0 +1,65 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+const API_URI = import.meta.env.VITE_API_URL;
+
+export const taskApi = createApi({
+  reducerPath: "taskApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${API_URI}/api/v1/task`,
+    credentials: "include",
+  }),
+  tagTypes: ["Tasks"],
+  endpoints: (builder) => ({
+    getTasksByFarm: builder.query({
+      query: (farmId) => `/farm/${farmId}`,
+      providesTags: ["Tasks"],
+    }),
+    getTaskById: builder.query({
+      query: (taskId) => `/${taskId}`,
+      providesTags: (result, error, taskId) => [{ type: "Tasks", id: taskId }],
+    }),
+    createTask: builder.mutation({
+      query: (taskData) => ({
+        url: "/",
+        method: "POST",
+        body: taskData,
+      }),
+      invalidatesTags: ["Tasks"],
+    }),
+    updateTask: builder.mutation({
+      query: ({ taskId, updatedTask }) => ({
+        url: `/${taskId}`,
+        method: "PUT",
+        body: updatedTask,
+      }),
+      invalidatesTags: (result, error, { taskId }) => [
+        { type: "Tasks", id: taskId },
+      ],
+    }),
+    updateTaskStatus: builder.mutation({
+      query: ({ taskId, status }) => ({
+        url: `/${taskId}/status`,
+        method: "PATCH",
+        body: { status },
+      }),
+      invalidatesTags: (result, error, { taskId }) => [
+        { type: "Tasks", id: taskId },
+      ],
+    }),
+    deleteTask: builder.mutation({
+      query: (taskId) => ({
+        url: `/${taskId}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["Tasks"],
+    }),
+  }),
+});
+
+export const {
+  useGetTasksByFarmQuery,
+  useGetTaskByIdQuery,
+  useCreateTaskMutation,
+  useUpdateTaskMutation,
+  useUpdateTaskStatusMutation,
+  useDeleteTaskMutation,
+} = taskApi;