diff --git a/Frontend/package.json b/Frontend/package.json index c56f30f..7b28878 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -11,11 +11,10 @@ }, "dependencies": { "@reduxjs/toolkit": "^2.2.7", + "@splinetool/react-spline": "^4.0.0", "apexcharts": "^4.5.0", "chart.js": "^4.4.8", "flowbite": "^2.5.1", - "@splinetool/react-spline": "^4.0.0", - "flowbite": "^2.5.1", "framer-motion": "^12.4.7", "react": "^18.3.1", "react-apexcharts": "^1.7.0", diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx index e4ed377..464137a 100644 --- a/Frontend/src/App.jsx +++ b/Frontend/src/App.jsx @@ -38,6 +38,7 @@ function App() { <>
+
{ const [data, setData] = useState([]); @@ -15,11 +16,10 @@ const FarmList = () => { .then(setLoading(false)) .catch((error) => console.error(error)); }, []); - return (
{loading ? ( -
Loading...
+ ) : ( diff --git a/Frontend/src/components/Laoder.jsx b/Frontend/src/components/Laoder.jsx new file mode 100644 index 0000000..f676961 --- /dev/null +++ b/Frontend/src/components/Laoder.jsx @@ -0,0 +1,29 @@ +const Laoder = () => { + return ( +
+
+
+ + Loading... +
+
+
+ ); +}; + +export default Laoder; diff --git a/Frontend/src/components/Td.jsx b/Frontend/src/components/Td.jsx index 7e86d13..ec3b614 100644 --- a/Frontend/src/components/Td.jsx +++ b/Frontend/src/components/Td.jsx @@ -1,4 +1,5 @@ import { useNavigate } from "react-router-dom"; +import EditFarm from "../pages/UserPanel/Farm/EditFarm"; const Td = ({ children }) => { const navigate = useNavigate(); @@ -16,12 +17,7 @@ const Td = ({ children }) => { ); diff --git a/Frontend/src/components/monitoring charts/PerformanceChart.jsx b/Frontend/src/components/monitoring charts/PerformanceChart.jsx index fc0c744..26f50e3 100644 --- a/Frontend/src/components/monitoring charts/PerformanceChart.jsx +++ b/Frontend/src/components/monitoring charts/PerformanceChart.jsx @@ -24,11 +24,24 @@ ChartJS.register( const PerformanceChart = () => { const data = { - labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], + labels: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], datasets: [ { label: "Yield", - data: [65, 59, 80, 81, 56, 55, 70], // hard-coded values + data: [75, 68, 85, 88, 60, 62, 78, 90, 95, 92, 88, 80], // slightly improved values fill: false, backgroundColor: "rgb(75, 192, 192)", borderColor: "rgba(75, 192, 192, 0.2)", diff --git a/Frontend/src/pages/Home/Cards.jsx b/Frontend/src/pages/Home/Cards.jsx index c37104b..2ea0007 100644 --- a/Frontend/src/pages/Home/Cards.jsx +++ b/Frontend/src/pages/Home/Cards.jsx @@ -1,112 +1,189 @@ - import React from "react"; -export const HeroSecn = () =>{ - return( -
-
-
-
-

- Anything and Everything you Need to know About -

-

- Your crops and their Health! -

-
-
-
- plant +export const HeroSecn = () => { + return ( +
+
+
+
+

+ Anything and Everything you Need to know About +

+

+ Your crops and their Health! +

-
- ) -} +
+ plant +
+
+
+ ); +}; export const CardWithImage = () => { - return ( -
- - plant - -
- -
High tech, high yields?
- -

The Kenyan farmers deploying AI to increase productivity -This article is more than 4 months old. AI apps are increasingly popular among small-scale farmers seeking to improve the quality and quantity of their crop.

- - Read more - - -
-
- ) -} + return ( +
+ + plant + +
+ +
+ High tech, high yields? +
+ +

+ The Kenyan farmers deploying AI to increase productivity This article + is more than 4 months old. AI apps are increasingly popular among + small-scale farmers seeking to improve the quality and quantity of + their crop. +

+ + Read more + + +
+
+ ); +}; export const CardOnlyText = (props) => { - return( - - ) -} + return ( + + ); +}; export const CardWithButton = () => { - return( -
- -
Empowering smallholder farmers with AI tools can bolster global food security
- -

AI-powered weather forecasts help rural Indian farmers make informed planting decisions, reducing debt and boosting savings.

- - Read more - - -
- ) -} + return ( +
+ +
+ Empowering smallholder farmers with AI tools can bolster global food + security +
+ +

+ {" "} + AI-powered weather forecasts help rural Indian farmers make informed + planting decisions, reducing debt and boosting savings. +

+ + Read more + + +
+ ); +}; export const CardWithOnlyImage = () => { - return( -
- - product image - -
- ) -} + return ( +
+ + product image + +
+ ); +}; -const cards = [HeroSecn, CardWithImage, CardOnlyText, CardWithButton, CardWithImage]; +const cards = [ + HeroSecn, + CardWithImage, + CardOnlyText, + CardWithButton, + CardWithImage, +]; export default cards; - export const CardLayout = () => { - return( -
- -
-
- -
- - -
+ return ( +
+ +
+
+ +
+ + +
-
- - -
-
-
+
+ + +
- ) -} \ No newline at end of file +
+
+ ); +}; diff --git a/Frontend/src/pages/Home/Footer.jsx b/Frontend/src/pages/Home/Footer.jsx index 439d6dc..f442d48 100644 --- a/Frontend/src/pages/Home/Footer.jsx +++ b/Frontend/src/pages/Home/Footer.jsx @@ -3,11 +3,11 @@ import React from "react"; const Footer = () => { return ( <> -
+ @@ -140,6 +154,17 @@ const CropTable = ({ farmId }) => { {new Date(crop.harvestDate).toLocaleDateString()} + ))} diff --git a/Frontend/src/pages/UserPanel/Farm/EditFarm.jsx b/Frontend/src/pages/UserPanel/Farm/EditFarm.jsx new file mode 100644 index 0000000..ec07c46 --- /dev/null +++ b/Frontend/src/pages/UserPanel/Farm/EditFarm.jsx @@ -0,0 +1,108 @@ +import React, { useState } from "react"; + +const EditFarm = ({ _id, onDelete }) => { + const [modalOpen, setModalOpen] = useState(false); + + // 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); + } + setModalOpen(false); // Close the modal after the operation + window.location.reload(); + } catch (error) { + console.error("Error deleting farm:", error); + } + }; + + return ( + <> + + + {modalOpen && ( + + )} + + ); +}; + +export default EditFarm; diff --git a/Frontend/src/pages/UserPanel/Farm/Farm.jsx b/Frontend/src/pages/UserPanel/Farm/Farm.jsx index 3f8a44c..b2b1ad4 100644 --- a/Frontend/src/pages/UserPanel/Farm/Farm.jsx +++ b/Frontend/src/pages/UserPanel/Farm/Farm.jsx @@ -1,7 +1,7 @@ import AddCrop from "./AddCrop"; +import EditFarm from "./EditFarm"; const Farm = ({ farmData, farmId }) => { - console.log("Farm id is : ", farmId); return (
@@ -48,16 +48,7 @@ const Farm = ({ farmData, farmId }) => {
- +
{children.soilType} {children.size} - - Edit - +
Harvest Date + Remove Crop +
+
+ +
+
{farmData.soilType} {farmData.size} {farmData.waterContent} - - Edit
diff --git a/Frontend/src/pages/UserPanel/Farm/FarmPage.jsx b/Frontend/src/pages/UserPanel/Farm/FarmPage.jsx index 32ed12f..c5d13fa 100644 --- a/Frontend/src/pages/UserPanel/Farm/FarmPage.jsx +++ b/Frontend/src/pages/UserPanel/Farm/FarmPage.jsx @@ -2,6 +2,9 @@ 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 Laoder from "../../../components/Laoder"; export default function FarmPage() { const { farmId } = useParams(); @@ -35,11 +38,7 @@ export default function FarmPage() { }, [farmId]); if (loading) { - return ( -
-

Loading farm data...

-
- ); + return ; } if (!farmData) { @@ -59,9 +58,15 @@ export default function FarmPage() {
-
+
+
+ +
+
+ +
); } diff --git a/Frontend/src/pages/UserPanel/Farm/Transactions.jsx b/Frontend/src/pages/UserPanel/Farm/Transactions.jsx new file mode 100644 index 0000000..a8be177 --- /dev/null +++ b/Frontend/src/pages/UserPanel/Farm/Transactions.jsx @@ -0,0 +1,67 @@ +import { useEffect, useState } from "react"; +import Td from "../../../components/Td"; +import Laoder from "../../../components/Laoder"; + +const Transactions = ({ farmId }) => { + const [data, setData] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + fetch(`http://localhost:8000/api/v1/finance/${farmId}`, { + credentials: "include", + }) + .then((response) => response.json()) + .then((data) => { + setData(data); + console.log("Fetched data:", data); + setLoading(false); + }) + .catch((error) => { + console.error("Error fetching transactions:", error); + setLoading(false); + }); + }, [farmId]); + + return ( +
+ {loading ? ( + + ) : ( + + + + + + + + + + + + {Array.isArray(data) && data.length > 0 ? ( + data.map((item) => + + + )} + +
+ Farm name + + Location + + Type + + Size (acres) + + Action +
) + ) : ( +
+ No data available +
+ )} +
+ ); +}; + +export default Transactions; diff --git a/Frontend/src/pages/UserPanel/MainUserPanel.jsx b/Frontend/src/pages/UserPanel/MainUserPanel.jsx index 6db9ece..c88d34d 100644 --- a/Frontend/src/pages/UserPanel/MainUserPanel.jsx +++ b/Frontend/src/pages/UserPanel/MainUserPanel.jsx @@ -5,7 +5,6 @@ import { RiLogoutBoxLine } from "react-icons/ri"; import { IoMdSettings } from "react-icons/io"; import { FaHome } from "react-icons/fa"; import { useSelector } from "react-redux"; -import { MdHistory } from "react-icons/md"; import { IoIosNotifications } from "react-icons/io"; import { MdFeedback } from "react-icons/md"; import { MdOutlineSupportAgent } from "react-icons/md"; @@ -13,6 +12,7 @@ import { IoSettings } from "react-icons/io5"; import { RiCalendarScheduleLine } from "react-icons/ri"; import { IoIosHome } from "react-icons/io"; import { BACKEND_URL } from "../../constants"; +import { IoMdStats } from "react-icons/io"; const MainUserPanel = () => { const navigate = useNavigate(); @@ -46,7 +46,7 @@ const MainUserPanel = () => {
{/* Updated Sidebar */} -
+
{
  • @@ -72,7 +72,7 @@ const MainUserPanel = () => {
  • @@ -82,19 +82,19 @@ const MainUserPanel = () => {
  • - + - History + Monitor
  • @@ -105,7 +105,7 @@ const MainUserPanel = () => {
  • @@ -116,7 +116,7 @@ const MainUserPanel = () => {
  • @@ -127,7 +127,7 @@ const MainUserPanel = () => {