notkshitij/CropCompass
1
1
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Activity

Merged ombase's changes in bhakti's branch for karan to make changes to.

Browse Source
This commit is contained in:
K
2025-02-23 09:16:48 +05:30
parent a551e075b7 7da2809399
commit c604fa308e
18 changed files with 746 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/package.json
+1 -2
View File
@@ -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",
Frontend/src/App.jsx
+1
View File
@@ -38,6 +38,7 @@ function App() {
<>
<div className="w-full h-auto flex-col relative">
<Navbar2 />
<div className="pt-20"></div>
<Outlet />
<div
className={`${
Frontend/src/components/FarmList.jsx
+2 -2
View File
@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import Td from "./Td";
import Laoder from "./Laoder";
const FarmList = () => {
const [data, setData] = useState([]);
@@ -15,11 +16,10 @@ const FarmList = () => {
.then(setLoading(false))
.catch((error) => console.error(error));
}, []);
return (
<div className="relative overflow-x-auto shadow-md sm:rounded-lg">
{loading ? (
<div>Loading...</div>
<Laoder></Laoder>
) : (
<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">
Frontend/src/components/Laoder.jsx
+29
View File
@@ -0,0 +1,29 @@
const Laoder = () => {
return (
<div className="w-full bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-center w-full h-56 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<div role="status">
<svg
aria-hidden="true"
class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
);
};
export default Laoder;
Frontend/src/components/Td.jsx
+2 -6
View File
@@ -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 }) => {
<td className="px-6 py-4">{children.soilType}</td>
<td className="px-6 py-4">{children.size}</td>
<td className="px-6 py-4">
<a
href="#"
className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>
Edit
</a>
<EditFarm _id={children._id}></EditFarm>
</td>
</tr>
);
Frontend/src/components/monitoring charts/PerformanceChart.jsx
+15 -2
View File
@@ -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)",
Frontend/src/pages/Home/Cards.jsx
+170 -93
View File
@@ -1,112 +1,189 @@
import React from "react";
export const HeroSecn = () =>{
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>
<p className="text-2xl font-semibold mb-8 ">
Your crops and their Health!
</p>
</div>
</div>
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
<img src="/images/plant.png" className="w-full h-auto rounded-3xl shadow-xl" alt="plant" />
export const HeroSecn = () => {
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>
<p className="text-2xl font-semibold mb-8 ">
Your crops and their Health!
</p>
</div>
</div>
</section>
)
}
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
<img
src="/images/plant.png"
className="w-full h-auto rounded-3xl shadow-xl"
alt="plant"
/>
</div>
</div>
</section>
);
};
export const CardWithImage = () => {
return (
<div class="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg" src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg" alt="plant" />
</a>
<div class="p-6 backdrop-blur-md rounded-b-lg">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">High tech, high yields?</h5>
</a>
<p class="mb-3 font-normal text-white dark:text-gray-400">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.</p>
<a href="https://www.theguardian.com/world/2024/sep/30/high-tech-high-yields-the-kenyan-farmers-deploying-ai-to-increase-productivity" target="_blank" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
Read more
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
</div>
)
}
return (
<div className="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img
className="rounded-t-lg"
src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg"
alt="plant"
/>
</a>
<div className="p-6 backdrop-blur-md rounded-b-lg">
<a href="#">
<h5 className="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">
High tech, high yields?
</h5>
</a>
<p className="mb-3 font-normal text-white dark:text-gray-400">
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.
</p>
<a
href="https://www.theguardian.com/world/2024/sep/30/high-tech-high-yields-the-kenyan-farmers-deploying-ai-to-increase-productivity"
target="_blank"
className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl "
>
Read more
<svg
className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
/>
</svg>
</a>
</div>
</div>
);
};
export const CardOnlyText = (props) => {
return(
<div>
<a href={props.href} target="_blank" class="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white"> {props.headingText} </h5>
<p class="font-normal text-gray-50 dark:text-gray-400"> {props.bodyText} </p>
</a>
</div>
)
}
return (
<div>
<a
href={props.href}
target="_blank"
className="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
>
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
{" "}
{props.headingText}{" "}
</h5>
<p className="font-normal text-gray-50 dark:text-gray-400">
{" "}
{props.bodyText}{" "}
</p>
</a>
</div>
);
};
export const CardWithButton = () => {
return(
<div class="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">
<h5 class="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</h5>
</a>
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400"> AI-powered weather forecasts help rural Indian farmers make informed planting decisions, reducing debt and boosting savings.</p>
<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" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
Read more
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
)
}
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"
>
<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
</h5>
</a>
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
{" "}
AI-powered weather forecasts help rural Indian farmers make informed
planting decisions, reducing debt and boosting savings.
</p>
<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"
className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl "
>
Read more
<svg
className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
/>
</svg>
</a>
</div>
);
};
export const CardWithOnlyImage = () => {
return(
<div class="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
<a href="https://theprint.in/economy/telangana-is-the-success-story-of-indian-agritech-ai-tools-soil-testing-e-commerce-more/1630359/" target="_blank">
<img class=" rounded-lg" src="https://i.pinimg.com/736x/2b/2a/0f/2b2a0f7003bd3e4201573c1189d600de.jpg" alt="product image" />
</a>
</div>
)
}
return (
<div className="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
<a
href="https://theprint.in/economy/telangana-is-the-success-story-of-indian-agritech-ai-tools-soil-testing-e-commerce-more/1630359/"
target="_blank"
>
<img
className=" rounded-lg"
src="https://i.pinimg.com/736x/2b/2a/0f/2b2a0f7003bd3e4201573c1189d600de.jpg"
alt="product image"
/>
</a>
</div>
);
};
const cards = [HeroSecn, CardWithImage, CardOnlyText, CardWithButton, CardWithImage];
const cards = [
HeroSecn,
CardWithImage,
CardOnlyText,
CardWithButton,
CardWithImage,
];
export default cards;
export const CardLayout = () => {
return(
<div>
<HeroSecn />
<div className=" flex justify-center">
<div className=" flex justify-between py-8 w-5/6 ">
<cardWithImage />
<div className="flex flex-col gap-10 justify-between ">
<cardOnlyText />
<cardWithButton />
</div>
return (
<div>
<HeroSecn />
<div className=" flex justify-center">
<div className=" flex justify-between py-8 w-5/6 ">
<cardWithImage />
<div className="flex flex-col gap-10 justify-between ">
<cardOnlyText />
<cardWithButton />
</div>
<div className=" flex flex-col justify-between">
<cardWithOnlyImage />
<cardOnlyText />
</div>
</div>
</div>
<div className=" flex flex-col justify-between">
<cardWithOnlyImage />
<cardOnlyText />
</div>
</div>
)
}
</div>
</div>
);
};
Frontend/src/pages/Home/Footer.jsx
+9 -6
View File
@@ -3,11 +3,11 @@ import React from "react";
const Footer = () => {
return (
<>
<footer className=" text-gray-50">
<footer className="text-gray-50">
<div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
<div className="md:flex md:justify-between">
<div className="mb-6 md:mb-0">
<a href="/" class="flex items-center gap-2">
<a href="/" className="flex items-center gap-2">
<img
src="/images/logo.png"
className="h-9 rounded-full"
@@ -25,12 +25,15 @@ const Footer = () => {
</h2>
<ul className="text-gray-50 dark:text-gray-400 font-medium">
<li className="mb-4">
<a href="https://flowbite.com/" class="hover:underline">
<a href="https://flowbite.com/" className="hover:underline">
Flowbite
</a>
</li>
<li>
<a href="https://tailwindcss.com/" class="hover:underline">
<a
href="https://tailwindcss.com/"
className="hover:underline"
>
Tailwind CSS
</a>
</li>
@@ -44,7 +47,7 @@ const Footer = () => {
<li className="mb-4">
<a
href="https://github.com/themesberg/flowbite"
className="hover:underline "
className="hover:underline"
>
Github
</a>
@@ -82,7 +85,7 @@ const Footer = () => {
<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{" "}
<a href="/" class="hover:underline">
<a href="/" className="hover:underline">
Crop Compass™
</a>
. All Rights Reserved.
Frontend/src/pages/Home/Hero.jsx
+108 -53
View File
@@ -17,77 +17,135 @@ const Hero = () => {
</div>
</div>
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
<img src="/images/plant.png" className="w-full h-auto rounded-3xl shadow-xl" alt="plant" />
<img
src="/images/plant.png"
className="w-full h-auto rounded-3xl shadow-xl"
alt="plant"
/>
</div>
</div>
</section>
<div className=" flex justify-center">
<div className=" flex justify-between py-8 w-5/6 ">
<div class="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<div className=" flex justify-between py-8 w-5/6 ">
<div className="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img
className="rounded-t-lg"
src="/images/plant.png"
alt="plant"
/>
</a>
<div className="p-8 backdrop-blur-md rounded-b-lg">
<a href="#">
<img class="rounded-t-lg" src="/images/plant.png" alt="plant" />
<h5 className="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">
Noteworthy technology acquisitions 2021
</h5>
</a>
<div class="p-8 backdrop-blur-md rounded-b-lg">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-white dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
Read more
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
<p className="mb-3 font-normal text-white dark:text-gray-400">
Here are the biggest enterprise technology acquisitions of 2021
so far, in reverse chronological order.
</p>
<a
href="#"
className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl "
>
Read more
<svg
className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
/>
</svg>
</a>
</div>
</div>
<div className="flex flex-col gap-10 justify-between ">
<div>
<a href="#" class="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a
href="#"
className="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
>
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
Noteworthy technology acquisitions 2021
</h5>
<p className="font-normal text-gray-50 dark:text-gray-400">
Here are the biggest enterprise technology acquisitions of
2021 so far, in reverse chronological order.
</p>
</a>
</div>
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
Read more
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
<div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
Noteworthy technology acquisitions 2021
</h5>
</a>
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
Here are the biggest enterprise technology acquisitions of 2021
so far, in reverse chronological order.
</p>
<a
href="#"
className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl "
>
Read more
<svg
className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
/>
</svg>
</a>
</div>
</div>
<div className=" flex flex-col justify-between">
<div class="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class=" rounded-lg" src="/images/plant.png" alt="product image" />
</a>
</div>
<div>
<a href="#" class="block max-w-sm p-6 backdrop-blur-xl rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<div className="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img
className=" rounded-lg"
src="/images/plant.png"
alt="product image"
/>
</a>
</div>
<div>
<a
href="#"
className="block max-w-sm p-6 backdrop-blur-xl rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
>
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
Noteworthy technology acquisitions 2021
</h5>
<p className="font-normal text-gray-50 dark:text-gray-400">
Here are the biggest enterprise technology acquisitions of
2021 so far, in reverse chronological order.
</p>
</a>
</div>
</div>
</div>
</div>
</>
@@ -96,7 +154,4 @@ const Hero = () => {
export default Hero;
// {grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2}
// {grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2}
Frontend/src/pages/Home/Testimonial.jsx
+123 -46
View File
@@ -29,24 +29,24 @@ const ScrollReveal = ({ children, direction = "left" }) => {
);
};
const Testimonial = () => {
const myRef = document.querySelector(".scrollable-div");
const myRef = document.querySelector('.scrollable-div')
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 ">
<ScrollReveal direction="up">
<h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">WHY CHOOSE US?</h2>
<h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">
WHY CHOOSE US?
</h2>
</ScrollReveal>
<ScrollReveal direction="up">
<h1 className="text-3xl text-center sm:text-6xl text-white drop-shadow-[10px_10px_10px_rgba(0,0,0,0.25)] font-bold mb-4">
<TypeWriterEffect
width="230"
trackWidth="13"
width="230"
trackWidth="13"
scrollArea={myRef}
startDelay={100}
cursorColor="white"
@@ -58,62 +58,139 @@ const Testimonial = () => {
</div>
<div className="flex flex-col sm:flex-row justify-around mt-8 h-auto">
<ScrollReveal direction="up">
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<svg class="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"/>
<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="#">
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Excellent Dashboards</h5>
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
Excellent Dashboards
</h5>
</a>
<p class="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</p>
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
Check Out
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
</svg>
</a>
</div>
</ScrollReveal>
<ScrollReveal direction="up">
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<svg class="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="#">
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white"> Crop Disease Prediction </h5>
</a>
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Predict the possible crop diseases based on their shown symptoms</p>
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
Check Out
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
</svg>
<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
</p>
<a
href="#"
className="inline-flex font-medium items-center text-blue-600 hover:underline"
>
Check Out
<svg
className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
/>
</svg>
</a>
</div>
</ScrollReveal>
<ScrollReveal direction="up">
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<svg class="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"/>
<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="#">
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Crop Planner</h5>
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
{" "}
Crop Disease Prediction{" "}
</h5>
</a>
<p class="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</p>
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
Check Out
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
</svg>
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
Predict the possible crop diseases based on their shown
symptoms
</p>
<a
href="#"
className="inline-flex font-medium items-center text-blue-600 hover:underline"
>
Check Out
<svg
className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
/>
</svg>
</a>
</div>
</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>
<a href="#">
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
Crop Planner
</h5>
</a>
<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
</p>
<a
href="#"
className="inline-flex font-medium items-center text-blue-600 hover:underline"
>
Check Out
<svg
className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
/>
</svg>
</a>
</div>
</ScrollReveal>
</div>
</div>
</section>
Frontend/src/pages/UserPanel/Farm/AddFarm.jsx
+4 -1
View File
@@ -44,6 +44,7 @@ const AddFarm = () => {
setSuccess(true);
setError(null);
setIsModalOpen(false);
window.location.reload();
} catch (err) {
setError(err.message);
setSuccess(false);
@@ -53,7 +54,9 @@ const AddFarm = () => {
return (
<>
<button
onClick={() => setIsModalOpen(true)}
onClick={() => {
setIsModalOpen(true);
}}
className="block text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
type="button"
>
Frontend/src/pages/UserPanel/Farm/CreateTransactions.jsx
+51
View File
@@ -0,0 +1,51 @@
import React, { useState } from "react";
import Laoder from "../../../components/Laoder";
const CreateFinance = () => {
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState("");
// Hardcoded farm ID from your example
const farmId = "67b9e6829c4979463e64a0fc";
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 }),
});
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);
setMessage("Error creating finance.");
} finally {
setLoading(false);
}
};
return (
<div className="max-w-md mx-auto p-4 border rounded shadow">
<h2 className="text-xl font-bold mb-4">Create Finance</h2>
<button
onClick={handleCreateFinance}
disabled={loading}
className="mt-4 w-full 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 ? <Laoder></Laoder> : "Create Finance"}
</button>
{message && <p className="mt-4 text-sm text-green-600">{message}</p>}
</div>
);
};
export default CreateFinance;
Frontend/src/pages/UserPanel/Farm/CropTable.jsx
+31 -6
View File
@@ -1,9 +1,24 @@
import React, { useState, useEffect } from "react";
import Laoder from "../../../components/Laoder";
const CropTable = ({ farmId }) => {
const [crops, setCrops] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const handleRemoveCrop = async (cropId) => {
try {
await fetch(`http://localhost:8000/api/v1/crop/${cropId}`, {
method: "DELETE",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
});
setCrops(crops.filter((crop) => crop._id !== cropId));
} catch (err) {
setError(err.message);
}
};
useEffect(() => {
const fetchCrops = async () => {
try {
@@ -31,14 +46,10 @@ const CropTable = ({ farmId }) => {
};
fetchCrops();
}, [farmId]);
}, []);
if (loading) {
return (
<div className="flex justify-center items-center min-h-[400px]">
Loading crops...
</div>
);
return <Laoder></Laoder>;
}
if (error) {
@@ -84,6 +95,9 @@ const CropTable = ({ farmId }) => {
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
Harvest Date
</th>
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
Remove Crop
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
@@ -140,6 +154,17 @@ const CropTable = ({ farmId }) => {
{new Date(crop.harvestDate).toLocaleDateString()}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">
<button
type="button"
className="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
onClick={() => handleRemoveCrop(crop._id)}
>
Remove
</button>
</div>
</td>
</tr>
))}
</tbody>
Frontend/src/pages/UserPanel/Farm/EditFarm.jsx
+108
View File
@@ -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 (
<>
<button
onClick={() => setModalOpen(true)}
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 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
type="button"
>
Remove
</button>
{modalOpen && (
<div
id="popup-modal"
tabIndex="-1"
className="fixed inset-0 z-50 flex justify-center items-center overflow-y-auto overflow-x-hidden bg-black bg-opacity-50"
>
<div className="relative p-4 w-full max-w-md max-h-full">
<div className="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<button
onClick={() => setModalOpen(false)}
type="button"
className="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
>
<svg
className="w-3 h-3"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 14"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
/>
</svg>
<span className="sr-only">Close modal</span>
</button>
<div className="p-4 md:p-5 text-center">
<svg
className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
<h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
Are you sure you want to delete this product?
</h3>
<button
onClick={handleDeleteFarm}
type="button"
className="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center"
>
Yes, I'm sure
</button>
<button
onClick={() => setModalOpen(false)}
type="button"
className="py-2.5 px-5 ml-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
No, cancel
</button>
</div>
</div>
</div>
</div>
)}
</>
);
};
export default EditFarm;
Frontend/src/pages/UserPanel/Farm/Farm.jsx
+2 -11
View File
@@ -1,7 +1,7 @@
import AddCrop from "./AddCrop";
import EditFarm from "./EditFarm";
const Farm = ({ farmData, farmId }) => {
console.log("Farm id is : ", farmId);
return (
<div className="w-full ">
<div className="flex justify-between">
@@ -48,16 +48,7 @@ const Farm = ({ farmData, farmId }) => {
<td className="px-6 py-4">{farmData.soilType}</td>
<td className="px-6 py-4">{farmData.size}</td>
<td className="px-6 py-4">{farmData.waterContent}</td>
<td className="px-6 py-4">
<button
onClick={() =>
navigate(`/user/dashboard/updatefarm?farmId=${farmData._id}`)
}
className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>
Edit
</button>
</td>
<td className="px-6 py-4">Edit</td>
</tr>
</tbody>
</table>
Frontend/src/pages/UserPanel/Farm/FarmPage.jsx
+11 -6
View File
@@ -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 (
<div className="w-full bg-white rounded-lg shadow p-4">
<p>Loading farm data...</p>
</div>
);
return <Laoder></Laoder>;
}
if (!farmData) {
@@ -59,9 +58,15 @@ export default function FarmPage() {
<div className="mb-4 flex justify-end">
<Farm farmData={farmData} farmId={farmId}></Farm>
</div>
<div>
<div className="mb-4 ">
<CropTable farmId={farmId}></CropTable>
</div>
<div className="mb-4 flex justify-end">
<CreateTransactions farmId={farmId}></CreateTransactions>
</div>
<div className="mb-4 ">
<Transactions farmId={farmId}></Transactions>
</div>
</div>
);
}
Frontend/src/pages/UserPanel/Farm/Transactions.jsx
+67
View File
@@ -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 (
<div className="relative overflow-x-auto shadow-md sm:rounded-lg">
{loading ? (
<Laoder></Laoder>
) : (
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
Farm name
</th>
<th scope="col" className="px-6 py-3">
Location
</th>
<th scope="col" className="px-6 py-3">
Type
</th>
<th scope="col" className="px-6 py-3">
Size (acres)
</th>
<th scope="col" className="px-6 py-3">
Action
</th>
</tr>
</thead>
<tbody>
{Array.isArray(data) && data.length > 0 ? (
data.map((item) => <Td key={item.id} children={item} />)
) : (
<tr>
<td colSpan={5} className="text-center">
No data available
</td>
</tr>
)}
</tbody>
</table>
)}
</div>
);
};
export default Transactions;
Frontend/src/pages/UserPanel/MainUserPanel.jsx
+12 -12
View File
@@ -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 = () => {
</div>
<div className="flex flex-row gap-4">
{/* Updated Sidebar */}
<div className="w-full md:w-1/4 bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg p-6">
<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}`}
@@ -61,7 +61,7 @@ const MainUserPanel = () => {
<li>
<Link
to={"/user/dashboard"}
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
>
<IoIosHome className="text-2xl text-green-600" />
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
@@ -72,7 +72,7 @@ const MainUserPanel = () => {
<li>
<Link
to={"/user/dashboard/scheduledmeetings"}
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
>
<RiCalendarScheduleLine className="text-2xl text-green-600" />
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
@@ -82,19 +82,19 @@ const MainUserPanel = () => {
</li>
<li>
<Link
to={"/user/dashboard/history"}
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
to={"/user/dashboard/monitoring"}
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
>
<MdHistory className="text-2xl text-green-600" />
<IoMdStats className="text-2xl text-green-600" />
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
History
Monitor
</span>
</Link>
</li>
<li>
<Link
to={"/user/dashboard/notifications"}
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
>
<IoIosNotifications className="text-2xl text-green-600" />
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
@@ -105,7 +105,7 @@ const MainUserPanel = () => {
<li>
<Link
to={"/user/dashboard/feedback"}
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
>
<MdFeedback className="text-2xl text-green-600" />
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
@@ -116,7 +116,7 @@ const MainUserPanel = () => {
<li>
<Link
to={"/user/dashboard/support"}
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
>
<MdOutlineSupportAgent className="text-2xl text-green-600" />
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
@@ -127,7 +127,7 @@ const MainUserPanel = () => {
<li>
<Link
to={"/user/dashboard/settings"}
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
>
<IoSettings className="text-2xl text-green-600" />
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">