Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 notkshitij
|
e1a47b0af4
|
||
|
notkshitij
|
23f9a25184
|
||
|
notkshitij
|
da96ae89a2
|
||
|
notkshitij
|
f201486b8f
|
||
|
notkshitij
|
01e8845328
|
||
 KaranSalvi
|
0f8aa521a9 | ||
|
notkshitij
|
bd0daf45bd
|
||
|
KaranSalvi
|
ddbf340af7 | ||
|
notkshitij
|
b84468441c
|
||
|
notkshitij
|
f92534f814
|
||
|
notkshitij
|
a6b604f04f
|
@@ -0,0 +1 @@
|
||||
Backend/package-lock.json
|
||||
@@ -2,7 +2,7 @@ const multer = require("multer");
|
||||
|
||||
const storage = multer.diskStorage({
|
||||
destination: function (req, file, cb) {
|
||||
cb(null, "./public/images");
|
||||
cb(null, "./uploads");
|
||||
},
|
||||
|
||||
filename: function (req, file, cb) {
|
||||
|
||||
Generated
-4823
File diff suppressed because it is too large
Load Diff
+11
-14
@@ -10,23 +10,20 @@
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"@google/generative-ai": "^0.22.0",
|
||||
"@huggingface/transformers": "^3.3.3",
|
||||
"@xenova/transformers": "^2.17.2",
|
||||
"bcrypt": "^5.1.1",
|
||||
"cloudinary": "^2.5.1",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"@google/generative-ai": "^0.24.1",
|
||||
"bcrypt": "^6.0.0",
|
||||
"cloudinary": "^2.7.0",
|
||||
"cookie-parser": "^1.4.7",
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^16.4.5",
|
||||
"express": "^4.19.2",
|
||||
"jimp": "^1.6.0",
|
||||
"dotenv": "^16.5.0",
|
||||
"express": "^5.1.0",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"mongoose": "^8.6.1",
|
||||
"multer": "^1.4.5-lts.1",
|
||||
"nodemailer": "^6.9.15",
|
||||
"socket.io": "^4.7.5"
|
||||
"mongoose": "^8.16.0",
|
||||
"multer": "^2.0.1",
|
||||
"nodemailer": "^7.0.3",
|
||||
"socket.io": "^4.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.1.4"
|
||||
"nodemon": "^3.1.10"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
package-lock.json
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -1,8 +0,0 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
@@ -1,38 +0,0 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import react from 'eslint-plugin-react'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
|
||||
export default [
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
settings: { react: { version: '18.3' } },
|
||||
plugins: {
|
||||
react,
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...js.configs.recommended.rules,
|
||||
...react.configs.recommended.rules,
|
||||
...react.configs['jsx-runtime'].rules,
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react/jsx-no-target-blank': 'off',
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
@@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/images/logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crop Compass</title>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,46 +0,0 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"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",
|
||||
"framer-motion": "^12.4.7",
|
||||
"react": "^18.3.1",
|
||||
"react-apexcharts": "^1.7.0",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.3.0",
|
||||
"react-intersection-observer": "^9.15.1",
|
||||
"react-player": "^2.16.0",
|
||||
"react-redux": "^9.1.2",
|
||||
"react-router-dom": "^6.26.1",
|
||||
"react-typewriter-effect": "^1.1.0",
|
||||
"socket.io-client": "^4.7.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.9.0",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.9.0",
|
||||
"eslint-plugin-react": "^7.35.0",
|
||||
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.9",
|
||||
"globals": "^15.9.0",
|
||||
"postcss": "^8.4.45",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"vite": "^5.4.1"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
@@ -1 +0,0 @@
|
||||
<svg viewBox="-2.4 -2.4 28.80 28.80" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="3.2640000000000002"> <title></title> <g id="Complete"> <g id="add-square"> <g> <rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" width="20" x="2" y="2"></rect> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="15.5" x2="8.5" y1="12" y2="12"></line> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="12" x2="12" y1="15.5" y2="8.5"></line> </g> </g> </g> </g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="add-square"> <g> <rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" width="20" x="2" y="2"></rect> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="15.5" x2="8.5" y1="12" y2="12"></line> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="12" x2="12" y1="15.5" y2="8.5"></line> </g> </g> </g> </g></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 482 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 143 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 510 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 510 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
@@ -1,12 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
|
||||
|
||||
<defs>
|
||||
</defs>
|
||||
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
|
||||
<path d="M 37.712 41.541 c -2.437 -10.14 2.919 -19.609 8.772 -25.137 c -6.221 11.54 -7.41 20.104 -3.461 33.177 l 2.29 -0.854 c -0.882 -2.464 -1.413 -4.873 -1.685 -7.241 c 8.23 -2.355 13.883 -7.209 15.231 -15.926 C 59.796 13.651 52.042 6.72 43.718 0.117 c 3.04 9.758 -11.581 17.964 -10.296 30.949 c 0.271 2.741 0.697 5.33 1.326 7.825" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(127,178,65); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
<path d="M 34.069 30.999 c 0.917 -12.923 13.599 -21.098 9.649 -30.883 c 1.394 8.216 -9.771 12.38 -12.663 22.195 c -1.575 5.836 -1.151 11.452 3.693 16.579 C 34.119 36.396 33.937 33.751 34.069 30.999 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(113,156,64); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
<polygon points="68.77,61.09 70.46,47.61 43.69,47.61 19.54,47.61 21.23,61.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
|
||||
<polyline points="63.11,61.09 59.5,90 44.01,90 30.5,90 26.89,61.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
|
||||
<polygon points="62.61,65.09 63.11,61.09 26.89,61.09 27.39,65.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(145,107,77); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 307 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 779 KiB |
@@ -1,74 +0,0 @@
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import "./App.css";
|
||||
//import Navbar from "./components/Navbar";
|
||||
import Navbar2 from "./components/Navbar2";
|
||||
import { useEffect } from "react";
|
||||
import { userSliceActions } from "./store/userSlice";
|
||||
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { BACKEND_URL } from "./constants";
|
||||
|
||||
function App() {
|
||||
const user = useSelector((store) => store.user);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const loader = useSelector((store) => store.loader);
|
||||
|
||||
useEffect(() => {
|
||||
async function initialiseUser() {
|
||||
if (user.role == "unloggeduser") {
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1/getuser`, {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
const userData = await responce.json();
|
||||
|
||||
//console.log("User Datae is ", userData);
|
||||
|
||||
dispatch(userSliceActions.addUser(userData.data));
|
||||
|
||||
//console.log("Updated User is : ", user);
|
||||
}
|
||||
}
|
||||
initialiseUser();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-auto flex-col relative">
|
||||
<div className="pt-20"></div>
|
||||
<Outlet />
|
||||
<div
|
||||
className={`${
|
||||
loader ? "block" : "hidden"
|
||||
} absolute w-full h-full bg-black opacity-50 top-0 left-0`}
|
||||
>
|
||||
<div className="text-center my-96">
|
||||
<div role="status">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="inline w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-blue-900"
|
||||
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 className="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Container = ({ children }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-auto">{children}</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Container;
|
||||
@@ -1,61 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Td from "./Td";
|
||||
import Loader from "./Loader";
|
||||
|
||||
const FarmList = () => {
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
fetch("http://localhost:8000/api/v1/farm", {
|
||||
credentials: "include",
|
||||
method: "GET",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => setData(data))
|
||||
.then(setLoading(false))
|
||||
.catch((error) => console.error(error));
|
||||
}, []);
|
||||
return (
|
||||
<div className="relative overflow-x-auto shadow-md sm:rounded-lg">
|
||||
{loading ? (
|
||||
<Loader></Loader>
|
||||
) : (
|
||||
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
||||
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Farm name
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Location
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Type
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Size (acres)
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.length > 0 ? (
|
||||
data.map((item) => <Td key={item.id} children={item} />)
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={5} className="text-center">
|
||||
No data available
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FarmList;
|
||||
@@ -1,38 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
function FileInput() {
|
||||
|
||||
const handleFileChange= () => {
|
||||
const fileInput = document.getElementById("file_input");
|
||||
const file = fileInput.files[0];
|
||||
if (!file) {
|
||||
alert("Please select a file!");
|
||||
return;
|
||||
}
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
// Send to backend
|
||||
fetch("http://your-backend-url.com/upload", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => console.log("File uploaded successfully:", data))
|
||||
.catch((error) => console.error("Upload failed:", error));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className=' pt-24'>
|
||||
|
||||
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label>
|
||||
<input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
|
||||
id="file_input"
|
||||
type="file"
|
||||
onChange={handleFileChange} />
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileInput
|
||||
@@ -1,29 +0,0 @@
|
||||
const Loader = () => {
|
||||
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 Loader;
|
||||
@@ -1,69 +0,0 @@
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Logs = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="relative overflow-y-hidden">
|
||||
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border">
|
||||
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Product name
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Color
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Category
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Price
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
|
||||
<th
|
||||
scope="row"
|
||||
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
Apple MacBook Pro 17"
|
||||
</th>
|
||||
<td className="px-6 py-4">Silver</td>
|
||||
<td className="px-6 py-4">Laptop</td>
|
||||
<td className="px-6 py-4">$2999</td>
|
||||
</tr>
|
||||
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
|
||||
<th
|
||||
scope="row"
|
||||
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
Microsoft Surface Pro
|
||||
</th>
|
||||
<td className="px-6 py-4">White</td>
|
||||
<td className="px-6 py-4">Laptop PC</td>
|
||||
<td className="px-6 py-4">$1999</td>
|
||||
</tr>
|
||||
<tr className="bg-white dark:bg-gray-800">
|
||||
<th
|
||||
scope="row"
|
||||
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
Magic Mouse 2
|
||||
</th>
|
||||
<td className="px-6 py-4">Black</td>
|
||||
<td className="px-6 py-4">Accessories</td>
|
||||
<td className="px-6 py-4">$99</td>
|
||||
</tr>
|
||||
</tbody>{" "}
|
||||
</table>{" "}
|
||||
<Link to="/logs" className="text-[#2323FF] pl-5">
|
||||
<hr />
|
||||
View all Logs
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logs;
|
||||
@@ -1,16 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Message = ({ message }) => {
|
||||
const date = new Date();
|
||||
return (
|
||||
<div className="w-auto h-auto bg-gray-200 rounded-md text-start p-3 mx-4">
|
||||
<p className="">{message}</p>
|
||||
<p className="text-end text-sm ">
|
||||
{date.getDate()}/{date.getMonth()}/{date.getFullYear()}{" "}
|
||||
{date.toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Message;
|
||||
@@ -1,206 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
import { BACKEND_URL } from "../constants";
|
||||
|
||||
const Navbar = () => {
|
||||
const user = useSelector((store) => store.user);
|
||||
|
||||
//console.log("User is : ", user);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogOut = async () => {
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1/logout`, {
|
||||
method: "Get",
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
const data = await responce.json();
|
||||
|
||||
//console.log("User Logged out data is : ", data);
|
||||
|
||||
if (data.success == true) {
|
||||
navigate("/user/login");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<nav className="bg-[#3D8D7A] dark:bg-gray-900">
|
||||
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||
<a
|
||||
href="/"
|
||||
className="flex items-center space-x-3 rtl:space-x-reverse"
|
||||
>
|
||||
<img
|
||||
src="/images/logo.png"
|
||||
className="size-12 mr-2 "
|
||||
alt="Logo"
|
||||
/>
|
||||
<span className="self-center text-4xl font-bold whitespace-nowrap dark:text-white">
|
||||
Crop Compass
|
||||
</span>
|
||||
</a>
|
||||
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
||||
<button
|
||||
type="button"
|
||||
className="flex text-sm bg-white rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
data-dropdown-toggle="user-dropdown"
|
||||
data-dropdown-placement="bottom"
|
||||
>
|
||||
<span className="sr-only">Open user menu</span>
|
||||
<img
|
||||
className="size-9 rounded-full"
|
||||
src={`${user?.avatar}`}
|
||||
alt="user photo"
|
||||
/>
|
||||
</button>
|
||||
{/* <!-- Dropdown menu --> */}
|
||||
<div
|
||||
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 cursor-pointer"
|
||||
id="user-dropdown"
|
||||
>
|
||||
{user?.name !== "Unloggedin User" && (
|
||||
<div className="px-4 py-3">
|
||||
<span className="block text-sm text-gray-900 dark:text-white">
|
||||
{user?.name}
|
||||
</span>
|
||||
<span className="block text-sm text-gray-500 truncate dark:text-gray-400">
|
||||
{user?.email}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ul className="py-2" aria-labelledby="user-menu-button">
|
||||
{user?.name !== "Unloggedin User" && (
|
||||
<>
|
||||
<li>
|
||||
<Link
|
||||
to={"/user/dashboard"}
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to={"/user/dashboard/settings"}
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Earnings
|
||||
</a>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
|
||||
{user?.name === "Unloggedin User" ? (
|
||||
<li>
|
||||
<Link
|
||||
to={"/user/login"}
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<a
|
||||
onClick={handleLogOut}
|
||||
className="block px-4 py-2 text-sm text-[#FBFFE4] hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Sign out
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
data-collapse-toggle="navbar-user"
|
||||
type="button"
|
||||
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||
aria-controls="navbar-user"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 17 14"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M1 1h15M1 7h15M1 13h15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
|
||||
id="navbar-user"
|
||||
>
|
||||
<ul className="flex text-xl flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-[#A3D1C6] md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-[#3D8D7A] dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
<li>
|
||||
<Link
|
||||
to={"/"}
|
||||
className="block py-2 px-3 bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
|
||||
aria-current="page"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
@@ -1,87 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Navbar2 = () => {
|
||||
|
||||
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">
|
||||
<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"
|
||||
/>
|
||||
<span className="self-center text-2xl text-white font-semibold whitespace-nowrap dark:text-white">
|
||||
Crop Compass
|
||||
</span>
|
||||
</a>
|
||||
<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"
|
||||
>
|
||||
{isLoggedIn? (
|
||||
<Link to={"/user/dashboard/addfarm"}>Get Started</Link>
|
||||
) : (
|
||||
<Link to={"/user/login"}>Log In</Link>
|
||||
)}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
|
||||
id="navbar-sticky"
|
||||
>
|
||||
<ul className="flex flex-col p-4 md:p-0 mt-4 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 bg-transparent font-bold">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-50 rounded-sm md:bg-transparent md:text-gray-50 md:p-0 md:dark:text-gray-50"
|
||||
aria-current="page"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent "
|
||||
>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
|
||||
>
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-50 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar2;
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Notification = ({ notification }) => {
|
||||
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;
|
||||
};
|
||||
|
||||
let timeStringtoRealTime = (utcDateStr) => {
|
||||
// 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 istDate;
|
||||
};
|
||||
|
||||
let { message, timestamp, isRead } = notification;
|
||||
|
||||
const realTimeString = timeStringtoRealTime(timestamp);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-between p-4 bg-white shadow rounded-lg"
|
||||
onClick={() => {
|
||||
isRead = true;
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="https://placehold.co/40x40"
|
||||
alt="Profile picture of the user who followed you"
|
||||
className="w-10 h-10 rounded-full mr-3"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-gray-900">{message}</p>
|
||||
<p className="text-gray-500">
|
||||
{timeStringToDayName(timestamp)},
|
||||
{realTimeString.substring(21, 26) +
|
||||
" " +
|
||||
realTimeString.substring(30)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<p className="text-gray-500 mr-3">{realTimeString.substring(0, 18)}</p>
|
||||
<span
|
||||
className={`w-3 h-3 bg-blue-600 rounded-full ${isRead && "hidden"}`}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Notification;
|
||||
@@ -1,26 +0,0 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import EditFarm from "../pages/UserPanel/Farm/EditFarm";
|
||||
|
||||
const Td = ({ children }) => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
|
||||
<td
|
||||
className="px-6 py-4"
|
||||
onClick={() => {
|
||||
navigate(`farmpage/${children._id}`);
|
||||
}}
|
||||
>
|
||||
{children.name}
|
||||
</td>
|
||||
<td className="px-6 py-4">{children.location}</td>
|
||||
<td className="px-6 py-4">{children.soilType}</td>
|
||||
<td className="px-6 py-4">{children.size}</td>
|
||||
<td className="px-6 py-4">
|
||||
<EditFarm _id={children._id}></EditFarm>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
export default Td;
|
||||
@@ -1,19 +0,0 @@
|
||||
const TotalSpent = () => {
|
||||
return (
|
||||
<div className="h-full">
|
||||
<a
|
||||
href="#"
|
||||
className="h-full block max-w-sm p-6 bg-no-repeat bg-center bg-cover border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
|
||||
>
|
||||
<h5 className="mb-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
₹10,000
|
||||
</h5>
|
||||
<p className="font-normal text-gray-700 dark:text-gray-400">
|
||||
This is the total cost which you spent on this farm
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TotalSpent;
|
||||
@@ -1,28 +0,0 @@
|
||||
// ActivityFeed.jsx
|
||||
import React from "react";
|
||||
|
||||
const ActivityFeed = () => {
|
||||
// Hard-coded activity feed data
|
||||
const activities = [
|
||||
{
|
||||
id: 1,
|
||||
description: "Farm A reported increased yield",
|
||||
time: "10 mins ago",
|
||||
},
|
||||
{ id: 2, description: "Sensor B recalibrated", time: "20 mins ago" },
|
||||
{ id: 3, description: "Alert triggered on Farm C", time: "30 mins ago" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ul className="space-y-2">
|
||||
{activities.map((activity) => (
|
||||
<li key={activity.id} className="bg-gray-50 p-2 rounded shadow">
|
||||
<p className="text-sm">{activity.description}</p>
|
||||
<span className="text-xs text-gray-500">{activity.time}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityFeed;
|
||||
@@ -1,28 +0,0 @@
|
||||
// AlertsPanel.jsx
|
||||
import React from "react";
|
||||
|
||||
const AlertsPanel = () => {
|
||||
// Hard-coded alerts data
|
||||
const alerts = [
|
||||
{ id: 1, message: "Temperature exceeds threshold", type: "warning" },
|
||||
{ id: 2, message: "New sensor connected", type: "info" },
|
||||
{ id: 3, message: "Power consumption high", type: "warning" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{alerts.map((alert) => (
|
||||
<div
|
||||
key={alert.id}
|
||||
className={`p-2 rounded mb-2 ${
|
||||
alert.type === "warning" ? "bg-red-100" : "bg-blue-100"
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm">{alert.message}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlertsPanel;
|
||||
@@ -1,13 +0,0 @@
|
||||
// MetricsCard.jsx
|
||||
import React from "react";
|
||||
|
||||
const MetricsCard = ({ title, value }) => {
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<h3 className="text-gray-500 text-sm font-medium">{title}</h3>
|
||||
<p className="text-2xl font-bold">{value}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetricsCard;
|
||||
@@ -1,63 +0,0 @@
|
||||
// PerformanceChart.jsx
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from "chart.js";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
|
||||
const PerformanceChart = () => {
|
||||
const data = {
|
||||
labels: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "Yield",
|
||||
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)",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: { position: "top" },
|
||||
title: { display: true, text: "Performance Trend" },
|
||||
},
|
||||
};
|
||||
|
||||
return <Line data={data} options={options} />;
|
||||
};
|
||||
|
||||
export default PerformanceChart;
|
||||
@@ -1,46 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import Chart from "react-apexcharts";
|
||||
|
||||
const Piechart = () => {
|
||||
const [series, setSeries] = useState([35.1, 23.5, 2.4, 5.4]);
|
||||
|
||||
const chartOptions = {
|
||||
series: series,
|
||||
labels: ["Fertilizers", "Pestisides", "Manner", "Urea"],
|
||||
colors: ["#1C64F2", "#16BDCA", "#FDBA8C", "#E74694"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
height: 320,
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
total: {
|
||||
show: true,
|
||||
label: "Total",
|
||||
formatter: function (w) {
|
||||
return w.globals.seriesTotals.reduce((a, b) => a + b, 0) + "k";
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white md:p-6 block max-w-sm p-6 bg-no-repeat bg-center bg-cover border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
|
||||
<h5 className="text-xl font-bold text-gray-900 dark:text-white mb-4 ">
|
||||
Farm Info
|
||||
</h5>
|
||||
<Chart options={chartOptions} series={series} type="donut" height={320} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Piechart;
|
||||
@@ -1 +0,0 @@
|
||||
export const BACKEND_URL = "http://localhost:8000";
|
||||
@@ -1,26 +0,0 @@
|
||||
import React, { createContext, useMemo, useContext } from "react";
|
||||
import { io } from "socket.io-client";
|
||||
import { BACKEND_URL } from "../constants";
|
||||
|
||||
const SocketContext = createContext(null);
|
||||
|
||||
export const useSocket = () => {
|
||||
const socket = useContext(SocketContext);
|
||||
return socket;
|
||||
};
|
||||
|
||||
export const SocketProvider = (props) => {
|
||||
const socket = useMemo(
|
||||
() =>
|
||||
io(`${BACKEND_URL}`, {
|
||||
withCredentials: true,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<SocketContext.Provider value={socket}>
|
||||
{props.children}
|
||||
</SocketContext.Provider>
|
||||
);
|
||||
};
|
||||
@@ -1,7 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@theme {
|
||||
--color-midnight: #A3D1C6;
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import App from "./App.jsx";
|
||||
import "./index.css";
|
||||
import { SocketProvider } from "./context/SocketProvider.jsx";
|
||||
|
||||
import { Provider } from "react-redux";
|
||||
import MentifyStore from "./store/index.js";
|
||||
|
||||
import LoginPage from "./pages/Login/LoginPage.jsx";
|
||||
import SignupPage from "./pages/Login/SignupPage.jsx";
|
||||
import MainUserPanel from "./pages/UserPanel/MainUserPanel.jsx";
|
||||
import ForgetPassword from "./pages/Password/ForgetPassword.jsx";
|
||||
import ResetPassword from "./pages/Password/ResetPassword.jsx";
|
||||
|
||||
import HomePage from "./pages/Home/HomePage.jsx";
|
||||
import Dashboard from "./pages/UserPanel/Dashboard.jsx";
|
||||
import History from "./pages/UserPanel/History.jsx";
|
||||
import Notifications from "./pages/UserPanel/Notifications.jsx";
|
||||
import Settings from "./pages/UserPanel/Settings.jsx";
|
||||
import ScheduleMeeting from "./pages/UserPanel/ScheduleMeeting.jsx";
|
||||
import Support from "./pages/UserPanel/Support.jsx";
|
||||
import FeedBackAndRatings from "./pages/UserPanel/FeedBackAndRatings.jsx";
|
||||
import Monitoring from "./pages/UserPanel/Monitoring.jsx";
|
||||
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";
|
||||
createRoot(document.getElementById("root")).render(
|
||||
<StrictMode>
|
||||
<Provider store={MentifyStore}>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/ai" element={<Ai />} />
|
||||
{/* Routes for the main App */}
|
||||
<Route path="/" element={<App />}>
|
||||
<Route index element={<HomePage />} />
|
||||
<Route path="home" element={<HomePage />} />
|
||||
</Route>
|
||||
|
||||
{/* User related routes */}
|
||||
<Route path="user" element={<App />}>
|
||||
<Route path="login" element={<LoginPage />} />
|
||||
<Route path="signup" element={<SignupPage />} />
|
||||
<Route path="forgetpassword" element={<ForgetPassword />} />
|
||||
<Route
|
||||
path="api/v1/password/reset/:token"
|
||||
element={<ResetPassword />}
|
||||
/>
|
||||
|
||||
<Route path="dashboard" element={<MainUserPanel />}>
|
||||
<Route index element={<Dashboard />} />
|
||||
<Route path="history" element={<History />} />
|
||||
<Route path="notifications" element={<Notifications />} />
|
||||
<Route path="settings" element={<Settings />} />
|
||||
<Route path="scheduledmeetings" element={<ScheduleMeeting />} />
|
||||
<Route path="support" element={<Support />} />
|
||||
<Route path="feedback" element={<FeedBackAndRatings />} />
|
||||
<Route path="monitoring" element={<Monitoring />} />
|
||||
<Route path="addfarm" element={<AddFarm />} />
|
||||
<Route path="updatefarm" element={<UpdateFarm />} />
|
||||
<Route path="farmpage/:farmId" element={<FarmPage />} />
|
||||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
</StrictMode>
|
||||
);
|
||||
@@ -1,43 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-white py-12 w-full flex justify-center">
|
||||
<div className="flex flex-col md:flex-row justify-between w-10/12 h-auto">
|
||||
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
|
||||
<img src="/images/calender.png" className="w-full h-auto" alt="" />
|
||||
</div>
|
||||
<div className="container mx-auto flex flex-col justify-around h-full w-full md:py-10">
|
||||
<div className="text-center md:text-start flex flex-col justify-around h-full">
|
||||
<h2 className="text-xl font-bold mb-4 text-yellow-600">
|
||||
CUSTOMIZE WITH YOUR SCHEDULE
|
||||
</h2>
|
||||
<h1 className="text-2xl md:text-4xl md:font-extrabold font-bold mb-4">
|
||||
Personalized Professional Online Mentor on Your Schedule
|
||||
</h1>
|
||||
<p className="text-base mb-8">
|
||||
Our scheduling system allows you to select based on free time.
|
||||
Lorem ipsum demo text for template. Keep track of your students
|
||||
class and mentoring schedules, and never miss your Session. The
|
||||
best online class scheduling system with easy accessibility.
|
||||
Lorem ipsum is a placeholder text commonly used to demonstrate
|
||||
the visual form
|
||||
</p>
|
||||
<div className="flex gap-4 justify-center md:justify-start">
|
||||
<button
|
||||
type="button"
|
||||
className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
||||
>
|
||||
Get started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -1,189 +0,0 @@
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export const CardWithImage = () => {
|
||||
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"
|
||||
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 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 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,
|
||||
];
|
||||
|
||||
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>
|
||||
|
||||
<div className=" flex flex-col justify-between">
|
||||
<cardWithOnlyImage />
|
||||
<cardOnlyText />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,50 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Customization = () => {
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
className="bg-gray-100 py-12 w-full flex justify-center"
|
||||
style={{ backgroundColor: "#f0f0f0" }}
|
||||
>
|
||||
<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-around h-full w-full md:py-10">
|
||||
<div className="text-center md:text-start flex flex-col justify-around h-full">
|
||||
<h2 className="text-xl font-bold mb-4 text-yellow-600">
|
||||
CUSTOMIZE WITH YOUR SCHEDULE
|
||||
</h2>
|
||||
<h1 className="text-2xl md:text-4xl md:font-extrabold font-bold mb-4">
|
||||
Talented and Qualified Tutors to Serve You for Help
|
||||
</h1>
|
||||
<p className="text-base mb-8">
|
||||
Our scheduling system allows you to select based on free time.
|
||||
Lorem ipsum demo text for template. Keep track of your students
|
||||
class and tutoring schedules, and never miss your lectures. The
|
||||
best online class scheduling system with easy accessibility.
|
||||
Lorem ipsum is a placeholder text commonly used to demonstrate
|
||||
the visual form
|
||||
</p>
|
||||
<div className="flex gap-4 justify-center md:justify-start">
|
||||
<button
|
||||
type="button"
|
||||
className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
||||
>
|
||||
Get started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
|
||||
<img
|
||||
src="/images/interaction2.png"
|
||||
className="w-full h-auto"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Customization;
|
||||
@@ -1,193 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<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="/" className="flex items-center gap-2">
|
||||
<img
|
||||
src="/images/logo.png"
|
||||
className="h-9 rounded-full"
|
||||
alt="Logo"
|
||||
/>
|
||||
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
|
||||
Crop Compass
|
||||
</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 & 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{" "}
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -1,157 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<>
|
||||
<section className=" py-12 w-full flex justify-center pt-28 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className=" flex justify-center">
|
||||
<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="#">
|
||||
<h5 className="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">
|
||||
Noteworthy technology acquisitions 2021
|
||||
</h5>
|
||||
</a>
|
||||
<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="#"
|
||||
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 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 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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
|
||||
// {grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2}
|
||||
@@ -1,58 +0,0 @@
|
||||
import React from 'react'
|
||||
import { motion } from "framer-motion";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
import { CardOnlyText, CardWithButton, CardWithImage, CardWithOnlyImage, HeroSecn, } from "./Cards";
|
||||
|
||||
const ScrollReveal = ({ children, direction = "left" }) => {
|
||||
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
|
||||
|
||||
const variants = {
|
||||
left: { opacity: 0, x: -100 },
|
||||
right: { opacity: 0, x: 100 },
|
||||
up: { opacity: 0, y: 100 },
|
||||
down: { opacity: 0, y: -100 },
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial={variants[direction]}
|
||||
animate={inView ? { opacity: 1, x: 0, y: 0 } : {}}
|
||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
function Hero2() {
|
||||
const myRef = document.querySelector('.scrollable-div')
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ScrollReveal direction='up'>
|
||||
<HeroSecn />
|
||||
</ScrollReveal>
|
||||
<div className=" flex justify-center">
|
||||
<div className=" flex justify-between py-8 w-5/6 ">
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Hero2
|
||||
@@ -1,20 +0,0 @@
|
||||
import React from "react";
|
||||
import Navbar from "../../components/Navbar";
|
||||
import Hero from "./Hero";
|
||||
import Testimonial from "./Testimonial";
|
||||
import Hero2 from "./Hero2";
|
||||
import Footer from "./Footer";
|
||||
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<>
|
||||
<div className=" bg-[url(/images/bgphoto.png)] bg-no-repeat bg-cover">
|
||||
<Hero2 />
|
||||
<Testimonial />
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
@@ -1,289 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Reviews = [
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
];
|
||||
|
||||
const ReviewSection = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-gray-100 py-12">
|
||||
<div className="container mx-auto">
|
||||
<div className="text-center">
|
||||
<h2 className=" text-2xl md:text-4xl font-bold mb-4">OUR TESTIMONIALS</h2>
|
||||
<h1 className="text-3xl md:text-6xl font-bold mb-4">
|
||||
What Our Students Say About Us
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="default-carousel"
|
||||
className="relative w-full"
|
||||
data-carousel="slide"
|
||||
>
|
||||
{/* <!-- Carousel wrapper --> */}
|
||||
<div className="relative h-64 overflow-hidden rounded-lg md:h-96">
|
||||
{/* <!-- Item 1 --> */}
|
||||
{Reviews.map((reviewList) => (
|
||||
<div
|
||||
className="hidden duration-700 ease-in-out w-full"
|
||||
data-carousel-item
|
||||
>
|
||||
<div className="flex w-full items-center justify-center h-full gap-8">
|
||||
{/* Review no 1 */}
|
||||
|
||||
{reviewList.map((review) => (
|
||||
<div className="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 md:py-2">
|
||||
<div className="flex flex-col items-center pb-10 p-2">
|
||||
<img
|
||||
className="w-20 h-20 md:w-24 md:h-24 mb-3 rounded-full shadow-lg"
|
||||
src={`${review.src}`}
|
||||
alt={`${review.alt}`}
|
||||
/>
|
||||
<h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
|
||||
{review.name}
|
||||
</h5>
|
||||
<span className="text-base font-semibold text-gray-500 dark:text-gray-400">
|
||||
{review.occupation}
|
||||
</span>
|
||||
|
||||
<p className="md:hidden text-sm text-gray-600 text-center">
|
||||
{review.review.substring(0, 35)}....
|
||||
</p>
|
||||
|
||||
<p className="hidden md:block text-sm text-gray-600 text-center">
|
||||
{review.review.substring(0,200)}...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* <!-- Slider indicators --> */}
|
||||
<div className="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="true"
|
||||
aria-label="Slide 1"
|
||||
data-carousel-slide-to="0"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 2"
|
||||
data-carousel-slide-to="1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 3"
|
||||
data-carousel-slide-to="2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 4"
|
||||
data-carousel-slide-to="3"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 5"
|
||||
data-carousel-slide-to="4"
|
||||
></button>
|
||||
</div>
|
||||
{/* <!-- Slider controls --> */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
|
||||
data-carousel-prev
|
||||
>
|
||||
<span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
||||
<svg
|
||||
className="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 1 1 5l4 4"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Previous</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
|
||||
data-carousel-next
|
||||
>
|
||||
<span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
||||
<svg
|
||||
className="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="m1 9 4-4-4-4"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Next</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReviewSection;
|
||||
@@ -1,179 +0,0 @@
|
||||
import React from "react";
|
||||
import { MdEngineering } from "react-icons/md";
|
||||
import { FaLaptopCode } from "react-icons/fa";
|
||||
import { LiaLanguageSolid } from "react-icons/lia";
|
||||
import { MdScience } from "react-icons/md";
|
||||
import { MdHistoryEdu } from "react-icons/md";
|
||||
import { MdPsychology } from "react-icons/md";
|
||||
import { CgWebsite } from "react-icons/cg";
|
||||
import { FaReplyAll } from "react-icons/fa";
|
||||
|
||||
const SubjectList = [
|
||||
{
|
||||
icon: "FaLaptopCode",
|
||||
title: "Programming",
|
||||
},
|
||||
{
|
||||
icon: "MdEngineering",
|
||||
title: "Engineering",
|
||||
},
|
||||
{
|
||||
icon: "LiaLanguageSolid",
|
||||
title: "Languages",
|
||||
},
|
||||
{
|
||||
icon: "MdScience",
|
||||
title: "Science",
|
||||
},
|
||||
{
|
||||
icon: "MdHistoryEdu",
|
||||
title: "History",
|
||||
},
|
||||
{
|
||||
icon: "MdPsychology",
|
||||
title: "Psychology",
|
||||
},
|
||||
{
|
||||
icon: "CgWebsite",
|
||||
title: "Web Design",
|
||||
},
|
||||
{
|
||||
icon: "FaReplyAll",
|
||||
title: "See all",
|
||||
},
|
||||
];
|
||||
const SubjectSection = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-white py-12 flex justify-center">
|
||||
<div className="w-11/12">
|
||||
<div className="container mx-auto">
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl md:text-4xl font-bold mb-4">
|
||||
OUR TUTOR SUBJECTS
|
||||
</h2>
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-4">
|
||||
Find Online Tutor in Any Subject
|
||||
</h1>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3 md:gap-4 mt-10 md:grid-cols-3 lg:grid-cols-4">
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 "
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
|
||||
<FaLaptopCode className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-sm sm:text-xl font-bold text-black font-sans">
|
||||
Programming
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
|
||||
<MdEngineering className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-sm sm:text-xl font-bold text-black font-sans">
|
||||
Engineering
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-pink-500 bg-pink-100 rounded-lg dark:bg-pink-800 dark:text-pink-200">
|
||||
<LiaLanguageSolid className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
Languages
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-purple-500 bg-purple-100 rounded-lg dark:bg-purple-800 dark:text-purple-200">
|
||||
<MdScience className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
Science
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-yellow-500 bg-yellow-100 rounded-lg dark:bg-yellow-800 dark:text-yellow-200">
|
||||
<MdHistoryEdu className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
History
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
|
||||
<MdPsychology className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
Psychology
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 md:hidden lg:flex"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-800 dark:text-orange-200 ">
|
||||
<CgWebsite className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
Web Design
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 md:hidden lg:flex"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200">
|
||||
<FaReplyAll className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
See all
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubjectSection;
|
||||
@@ -1,201 +0,0 @@
|
||||
import React from "react";
|
||||
import { IoMdContacts } from "react-icons/io";
|
||||
import { FaClock } from "react-icons/fa";
|
||||
import { FaMessage } from "react-icons/fa6";
|
||||
import { motion } from "framer-motion";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
import TypeWriterEffect from "react-typewriter-effect";
|
||||
import cards from "./Cards";
|
||||
|
||||
const ScrollReveal = ({ children, direction = "left" }) => {
|
||||
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.5 });
|
||||
|
||||
const variants = {
|
||||
left: { opacity: 0, x: -100 },
|
||||
right: { opacity: 0, x: 100 },
|
||||
up: { opacity: 0, y: 100 },
|
||||
down: { opacity: 0, y: -100 },
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial={variants[direction]}
|
||||
animate={inView ? { opacity: 1, x: 0, y: 0 } : {}}
|
||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const Testimonial = () => {
|
||||
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>
|
||||
</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"
|
||||
scrollArea={myRef}
|
||||
startDelay={100}
|
||||
cursorColor="white"
|
||||
text="Record breaking features like never before!"
|
||||
typeSpeed={100}
|
||||
/>
|
||||
</h1>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row justify-around mt-8 h-auto">
|
||||
<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">
|
||||
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
|
||||
</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 Disease Prediction{" "}
|
||||
</h5>
|
||||
</a>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonial;
|
||||
@@ -1,140 +0,0 @@
|
||||
import React, { useRef } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { userSliceActions } from "../../store/userSlice";
|
||||
import { BACKEND_URL } from "../../constants";
|
||||
|
||||
const LoginPage = () => {
|
||||
const emailElement = useRef();
|
||||
const passwordElement = useRef();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleLogin = async (event) => {
|
||||
event.preventDefault();
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1/login`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: emailElement.current.value,
|
||||
password: passwordElement.current.value,
|
||||
}),
|
||||
});
|
||||
|
||||
const user = await responce.json();
|
||||
|
||||
//console.log("User Login Data is here : ", user);
|
||||
|
||||
dispatch(userSliceActions.addUser(user.data));
|
||||
|
||||
emailElement.current.value = "";
|
||||
passwordElement.current.value = "";
|
||||
|
||||
if (user.success == true) {
|
||||
navigate("/");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginPage;
|
||||
@@ -1,16 +0,0 @@
|
||||
import React from "react";
|
||||
import Navbar2 from "../../components/Navbar2.jsx";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import Container from "../../components/Container.jsx";
|
||||
|
||||
const MainLoginPage = () => {
|
||||
return (
|
||||
<>
|
||||
<Container>
|
||||
<Outlet />
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainLoginPage;
|
||||
@@ -1,210 +0,0 @@
|
||||
import React, { useRef } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { BACKEND_URL } from "../../constants";
|
||||
|
||||
const SignupPage = () => {
|
||||
const firstNameElement = useRef();
|
||||
const lastNameElement = useRef();
|
||||
const emailElement = useRef();
|
||||
const roleElement = useRef();
|
||||
const passwordElement = useRef();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
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();
|
||||
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1/register`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(user),
|
||||
credentials: "include",
|
||||
});
|
||||
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");
|
||||
}
|
||||
};
|
||||
|
||||
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
|
||||
</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>
|
||||
<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-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}
|
||||
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"
|
||||
>
|
||||
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=" 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"
|
||||
alt=""
|
||||
className="absolute order-3 w-full h-full"
|
||||
/>
|
||||
<h1 className="text-5xl font-bold text-white mb-4 md:text-5xl lg:text-8xl relative ml-8 text-center">
|
||||
Welcome to MentorFlux!
|
||||
</h1>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignupPage;
|
||||
@@ -1,77 +0,0 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { IoIosKey } from "react-icons/io";
|
||||
import { Link } from "react-router-dom";
|
||||
import { FaArrowLeft } from "react-icons/fa6";
|
||||
import { BACKEND_URL } from "../../constants";
|
||||
|
||||
const ForgetPassword = () => {
|
||||
const emailElement = useRef();
|
||||
|
||||
const [status, setStatus] = useState(false);
|
||||
|
||||
const handleForgetPassword = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1//password/forgot`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: emailElement.current.value,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await responce.json();
|
||||
|
||||
if (data.success === true) {
|
||||
setStatus(true);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="w-full h-[78vh] flex justify-center items-center">
|
||||
<div className="">
|
||||
<div className="flex flex-col items-center gap-12">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<IoIosKey className="text-5xl bg-purple-200 p-2 rounded-full text-purple-500" />
|
||||
<h2 className="text-3xl font-bold font-sans">Forget Password?</h2>
|
||||
<p className="text-gray-500">
|
||||
No worries, we'll send you resent instructions.
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
className="flex flex-col w-full gap-5"
|
||||
onSubmit={handleForgetPassword}
|
||||
>
|
||||
<div>
|
||||
<label htmlFor="email"></label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder="Enter your email"
|
||||
className="w-full rounded-md border-gray-400 border-2"
|
||||
ref={emailElement}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
||||
>
|
||||
{status === false ? "Send Email" : "Email Sent to your Mail"}
|
||||
</button>
|
||||
|
||||
<Link
|
||||
to={"/user/login"}
|
||||
className="text-center text-gray-600 inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaArrowLeft className="text-lg" /> Back to Login Page
|
||||
</Link>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForgetPassword;
|
||||
@@ -1,130 +0,0 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { RiLockPasswordFill } from "react-icons/ri";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { FaArrowLeft } from "react-icons/fa6";
|
||||
import { BACKEND_URL } from "../../constants";
|
||||
|
||||
const ResetPassword = () => {
|
||||
const [secure, setSecure] = useState(true);
|
||||
|
||||
const newPassworElement = useRef();
|
||||
const confirmPassworElement = useRef();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { token } = useParams();
|
||||
|
||||
// console.log("So our Token is : ", token);
|
||||
|
||||
const handleResetPassword = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (
|
||||
confirmPassworElement.current.value !== newPassworElement.current.value
|
||||
) {
|
||||
setSecure(false);
|
||||
} else {
|
||||
const responce = await fetch(
|
||||
`${BACKEND_URL}/api/v1/password/reset/${token}`,
|
||||
{
|
||||
method: "PUT",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
password: newPassworElement.current.value,
|
||||
confirmPassword: confirmPassworElement.current.value,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
const data = await responce.json();
|
||||
|
||||
//console.log("Status of the Reset password", data);
|
||||
|
||||
if (data.success === true) {
|
||||
navigate("/user/login");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-[78vh] flex justify-center items-center">
|
||||
<div className="">
|
||||
<div className="flex flex-col items-center gap-10">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<RiLockPasswordFill className="text-5xl bg-purple-200 p-2 rounded-full text-purple-500" />
|
||||
<h2 className="text-3xl font-bold font-sans">
|
||||
Create New Password
|
||||
</h2>
|
||||
<p className="text-gray-500">
|
||||
Create your new, unique and secure password here.
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
className="flex flex-col w-full gap-5"
|
||||
onSubmit={handleResetPassword}
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="passwordNew"
|
||||
className="text-gray-500 font-semibold"
|
||||
>
|
||||
New Password :
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="passwordNew"
|
||||
ref={newPassworElement}
|
||||
placeholder="Enter your New Password"
|
||||
className="w-full rounded-md border-gray-400 border-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="passwordConfirm"
|
||||
className="text-gray-500 font-semibold"
|
||||
>
|
||||
Confirm Password :
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="passwordConfirm"
|
||||
ref={confirmPassworElement}
|
||||
placeholder="Enter your Confirm Password"
|
||||
className="w-full rounded-md border-gray-400 border-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p
|
||||
className={`text-red-800 text-sm underline w-96 text-center ${
|
||||
secure && "hidden"
|
||||
} `}
|
||||
>
|
||||
Password and confirm Password is not same.Please Enter new
|
||||
password and confirm Password same
|
||||
</p>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
||||
>
|
||||
Reset Password
|
||||
</button>
|
||||
|
||||
<Link
|
||||
to={"/user/login"}
|
||||
className="text-center text-gray-600 inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaArrowLeft className="text-lg" /> Back to Login Page
|
||||
</Link>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ResetPassword;
|
||||
@@ -1,78 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
const Ai = () => {
|
||||
const [selectedFile, setSelectedFile] = useState(null);
|
||||
const [prediction, setPrediction] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setSelectedFile(e.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!selectedFile) return;
|
||||
|
||||
setLoading(true);
|
||||
setPrediction("");
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("image", selectedFile);
|
||||
|
||||
const response = await fetch("http://localhost:3000/predict", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Prediction request failed");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
// Assuming the API returns a JSON object with an "output" field.
|
||||
setPrediction(data.output || "No prediction returned");
|
||||
} catch (err) {
|
||||
console.error("Error during prediction:", err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Ai;
|
||||
@@ -1,23 +0,0 @@
|
||||
import React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Piechart from "../../components/monitoring charts/Piechart";
|
||||
import TotalSpent from "../../components/TotalSpent";
|
||||
import FarmList from "../../components/FarmList";
|
||||
import AddFarm from "./Farm/AddFarm";
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||
<div className="mb-4 flex justify-end space-x-4">
|
||||
<AddFarm />
|
||||
</div>
|
||||
|
||||
<div className="mb-4 flex space-x-10">
|
||||
<Piechart />
|
||||
<TotalSpent />
|
||||
</div>
|
||||
<FarmList />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Dashboard;
|
||||
@@ -1,240 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
const AddCrop = ({ farmId }) => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [farm, setFarm] = useState(farmId);
|
||||
const [harvestDate, setHarvestDate] = useState("");
|
||||
const [growthStage, setGrowthStage] = useState("Planted");
|
||||
|
||||
const [healthStatus, setHealthStatus] = useState("");
|
||||
const [image, setImage] = useState(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [success, setSuccess] = useState("");
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setUploading(true);
|
||||
setError("");
|
||||
setSuccess("");
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("name", name);
|
||||
formData.append("farm", farm);
|
||||
formData.append("harvestDate", harvestDate);
|
||||
formData.append("growthStage", growthStage);
|
||||
formData.append("healthStatus", healthStatus);
|
||||
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");
|
||||
}
|
||||
setSuccess("Crop created successfully!");
|
||||
// Reset form fields
|
||||
setName("");
|
||||
setFarm("");
|
||||
setHarvestDate("");
|
||||
setGrowthStage("");
|
||||
setHealthStatus("");
|
||||
setImage(null);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
className="block text-white bg-green-500 hover:bg-green-600 focus:ring-4 focus:outline-none focus:ring-green-300 rounded-lg text-sm px-5 py-2.5 text-center h-10 font-extrabold"
|
||||
type="button"
|
||||
>
|
||||
Add New Crop
|
||||
</button>
|
||||
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
></div>
|
||||
{/* Modal Content */}
|
||||
<div className="relative w-full max-w-2xl mx-4">
|
||||
<div className="relative bg-white rounded-xl shadow-lg">
|
||||
{/* Decorative SVG Elements */}
|
||||
<div className="absolute right-0 top-0 h-full w-48 overflow-hidden pointer-events-none">
|
||||
<svg
|
||||
viewBox="0 0 200 800"
|
||||
className="absolute right-0 h-full transform translate-x-16 fill-green-100"
|
||||
>
|
||||
<path d="M0,0 Q100,200 0,400 Q100,600 0,800 L200,800 L200,0 Z" />
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 200 800"
|
||||
className="absolute right-0 h-full transform translate-x-8 fill-green-200/40"
|
||||
>
|
||||
<path d="M0,0 Q80,200 0,400 Q80,600 0,800 L200,800 L200,0 Z" />
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className="absolute right-12 top-20 w-16 h-16 fill-green-300/30"
|
||||
>
|
||||
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className="absolute right-16 top-48 w-12 h-12 fill-green-400/20"
|
||||
>
|
||||
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
|
||||
<h3 className="text-2xl font-semibold text-gray-800">
|
||||
Add New Crop
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center"
|
||||
>
|
||||
<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>
|
||||
{/* Modal Body */}
|
||||
<div className="p-4 md:p-5">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Crop Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Rice"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="harvestDate"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Harvest Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
id="harvestDate"
|
||||
value={harvestDate}
|
||||
onChange={(e) => setHarvestDate(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="growthStage"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Growth Stage
|
||||
</label>
|
||||
<select
|
||||
id="growthStage"
|
||||
value={growthStage}
|
||||
onChange={(e) => setGrowthStage(e.target.value)}
|
||||
className="mt-1 block w-full px-3 py-2 rounded-md border-gray-300 shadow-sm"
|
||||
required
|
||||
>
|
||||
<option value="Planted">Planted</option>
|
||||
<option value="Growing">Growing</option>
|
||||
<option value="Ready to Harvest">Ready to Harvest</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="healthStatus"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Health Status
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="healthStatus"
|
||||
value={healthStatus}
|
||||
onChange={(e) => setHealthStatus(e.target.value)}
|
||||
placeholder="Healthy"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="image"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Crop Image
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="image"
|
||||
accept="image/*"
|
||||
onChange={(e) => setImage(e.target.files[0])}
|
||||
className="mt-1 block w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition"
|
||||
>
|
||||
{uploading ? "Uploading..." : "Create Crop"}
|
||||
</button>
|
||||
</div>
|
||||
{error && <p className="text-red-600">{error}</p>}
|
||||
{success && <p className="text-green-600">{success}</p>}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddCrop;
|
||||
@@ -1,253 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const AddFarm = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [farmName, setFarmName] = useState("");
|
||||
const [location, setLocation] = useState("");
|
||||
const [waterContent, setWaterContent] = useState("");
|
||||
const [sizeContent, setSizeContent] = useState("");
|
||||
const [soilType, setSoilType] = useState("");
|
||||
const [error, setError] = useState(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const navigator = useNavigate();
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const farmData = {
|
||||
name: farmName,
|
||||
location,
|
||||
waterContent,
|
||||
soilType,
|
||||
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 data = await response.json();
|
||||
console.log(data);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to add farm");
|
||||
}
|
||||
|
||||
navigator("farmpage");
|
||||
setSuccess(true);
|
||||
setError(null);
|
||||
setIsModalOpen(false);
|
||||
window.location.reload();
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setSuccess(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
Add New Farm
|
||||
</button>
|
||||
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto overflow-x-hidden flex items-center justify-center">
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
></div>
|
||||
|
||||
<div className="relative w-full max-w-2xl mx-4">
|
||||
<div className="relative bg-white rounded-xl shadow-lg">
|
||||
{/* Decorative Leaves */}
|
||||
<div className="absolute right-0 top-0 h-full w-48 overflow-hidden pointer-events-none">
|
||||
<svg
|
||||
viewBox="0 0 200 800"
|
||||
className="absolute right-0 h-full transform translate-x-16 fill-green-100"
|
||||
>
|
||||
<path d="M0,0 Q100,200 0,400 Q100,600 0,800 L200,800 L200,0 Z" />
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 200 800"
|
||||
className="absolute right-0 h-full transform translate-x-8 fill-green-200/40"
|
||||
>
|
||||
<path d="M0,0 Q80,200 0,400 Q80,600 0,800 L200,800 L200,0 Z" />
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className="absolute right-12 top-20 w-16 h-16 fill-green-300/30"
|
||||
>
|
||||
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className="absolute right-16 top-48 w-12 h-12 fill-green-400/20"
|
||||
>
|
||||
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
|
||||
<h3 className="text-2xl font-semibold text-gray-800">
|
||||
Add New Farm
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center"
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="p-4 md:p-5">
|
||||
<form className="space-y-4" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="farmName"
|
||||
className="block text-sm font-semibold text-gray-700 mb-2"
|
||||
>
|
||||
Farm Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="farmName"
|
||||
value={farmName}
|
||||
onChange={(e) => setFarmName(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
||||
placeholder="Enter farm name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="location"
|
||||
className="block text-sm font-semibold text-gray-700 mb-2"
|
||||
>
|
||||
Location
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
||||
placeholder="Enter location"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="waterContent"
|
||||
className="block text-sm font-semibold text-gray-700 mb-2"
|
||||
>
|
||||
Water Content
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="waterContent"
|
||||
value={waterContent}
|
||||
onChange={(e) => setWaterContent(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
||||
placeholder="Enter water content"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="waterContent"
|
||||
className="block text-sm font-semibold text-gray-700 mb-2"
|
||||
>
|
||||
Size of Land
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="waterContent"
|
||||
value={sizeContent}
|
||||
onChange={(e) => setSizeContent(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
||||
placeholder="Enter water content"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="soilType"
|
||||
className="block text-sm font-semibold text-gray-700 mb-2"
|
||||
>
|
||||
Soil Type
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="soilType"
|
||||
value={soilType}
|
||||
onChange={(e) => setSoilType(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
||||
placeholder="Enter soil type"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 ease-in-out transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2"
|
||||
>
|
||||
Add Farm
|
||||
</button>
|
||||
|
||||
{error && (
|
||||
<p className="mt-4 text-red-500 text-sm bg-red-50 p-3 rounded-lg">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
{success && (
|
||||
<p className="mt-4 text-green-500 text-sm bg-green-50 p-3 rounded-lg">
|
||||
Farm added successfully!
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddFarm;
|
||||
@@ -1,167 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import Loader from "../../../components/Loader";
|
||||
|
||||
const AddTransaction = ({ farmId }) => {
|
||||
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 handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setMessage("");
|
||||
|
||||
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,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to create transaction");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Transaction created:", data);
|
||||
setMessage("Transaction created successfully!");
|
||||
// Optionally clear the form
|
||||
setType("Expense");
|
||||
setAmount("");
|
||||
setDescription("");
|
||||
} catch (error) {
|
||||
console.error("Error creating transaction:", error);
|
||||
setMessage("Error creating transaction.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setModalOpen(true)}
|
||||
className="block text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
|
||||
type="button"
|
||||
>
|
||||
Add Transaction
|
||||
</button>
|
||||
|
||||
{modalOpen && (
|
||||
<div 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">
|
||||
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
||||
{/* Modal Header */}
|
||||
<div className="flex justify-between items-center p-4 border-b rounded-t dark:border-gray-600">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Add Transaction
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setModalOpen(false)}
|
||||
type="button"
|
||||
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/* Modal Body */}
|
||||
<div className="p-4">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="transaction-type"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Type
|
||||
</label>
|
||||
<select
|
||||
id="transaction-type"
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||
required
|
||||
>
|
||||
<option value="Expense">Expense</option>
|
||||
<option value="Revenue">Revenue</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="transaction-amount"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Amount
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="transaction-amount"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="transaction-description"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id="transaction-description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="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 ? <Loader></Loader> : "Add Transaction"}
|
||||
</button>
|
||||
</form>
|
||||
{message && (
|
||||
<p className="mt-4 text-sm text-center text-green-600">
|
||||
{message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddTransaction;
|
||||
@@ -1,186 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
const CreateTask = ({ farmId, onTaskCreated }) => {
|
||||
const [farm, setFarm] = useState(farmId);
|
||||
const [taskType, setTaskType] = useState("Sowing");
|
||||
const [description, setDescription] = useState("Started Sowing the seeds");
|
||||
const [assignedDate, setAssignedDate] = useState("2025-04-15");
|
||||
const [status, setStatus] = useState("Pending");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState("");
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setMessage("");
|
||||
|
||||
// In a real app, you might also fetch or choose a crop.
|
||||
// For now, we assume crop is provided.
|
||||
const crop = "67ba388f9c4979463e64a39a";
|
||||
const taskData = {
|
||||
farm,
|
||||
crop,
|
||||
taskType,
|
||||
description,
|
||||
assignedDate,
|
||||
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);
|
||||
setMessage("Task created successfully!");
|
||||
setModalOpen(false);
|
||||
// Call the parent's callback with the newly created task
|
||||
if (onTaskCreated) onTaskCreated(data);
|
||||
} catch (error) {
|
||||
console.error("Error creating task:", error);
|
||||
setMessage("Error creating task.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setModalOpen(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"
|
||||
>
|
||||
Create Task
|
||||
</button>
|
||||
|
||||
{modalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
||||
<div className="relative w-full max-w-2xl p-6 bg-white rounded-lg shadow-xl">
|
||||
<div className="flex justify-between items-center border-b pb-3">
|
||||
<h2 className="text-2xl font-bold text-gray-800">Create Task</h2>
|
||||
<button
|
||||
onClick={() => setModalOpen(false)}
|
||||
type="button"
|
||||
className="text-gray-600 hover:text-gray-800"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="task-type"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Task Type
|
||||
</label>
|
||||
<select
|
||||
id="task-type"
|
||||
value={taskType}
|
||||
onChange={(e) => setTaskType(e.target.value)}
|
||||
className="mt-2 block w-full rounded-md border-gray-300 shadow-sm p-3 focus:ring-2 focus:ring-green-400"
|
||||
required
|
||||
>
|
||||
<option value="Sowing">Sowing</option>
|
||||
<option value="Watering">Watering</option>
|
||||
<option value="Fertilization">Fertilization</option>
|
||||
<option value="Pest Control">Pest Control</option>
|
||||
<option value="Harvesting">Harvesting</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="description"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 focus:ring-2 focus:ring-green-400"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="assignedDate"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Assigned Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
id="assignedDate"
|
||||
value={assignedDate}
|
||||
onChange={(e) => setAssignedDate(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 focus:ring-2 focus:ring-green-400"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="status"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Status
|
||||
</label>
|
||||
<select
|
||||
id="status"
|
||||
value={status}
|
||||
onChange={(e) => setStatus(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 focus:ring-2 focus:ring-green-400"
|
||||
required
|
||||
>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="Completed">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full inline-flex justify-center py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
{loading ? "Creating Task..." : "Create Task"}
|
||||
</button>
|
||||
</form>
|
||||
{message && (
|
||||
<p className="mt-4 text-center text-sm text-green-600">
|
||||
{message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateTask;
|
||||
@@ -1,47 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import Loader from "../../../components/Loader";
|
||||
|
||||
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 (
|
||||
<button
|
||||
onClick={handleCreateFinance}
|
||||
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"}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateFinance;
|
||||
@@ -1,177 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Loader from "../../../components/Loader";
|
||||
|
||||
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 {
|
||||
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 (loading) {
|
||||
return <Loader></Loader>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
|
||||
<p className="text-red-600">Error: {error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (crops.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8 bg-gray-50 rounded-lg">
|
||||
<h2 className="text-xl font-semibold text-gray-600">No crops found</h2>
|
||||
<p className="text-gray-500 mt-2">
|
||||
Start by adding some crops to your farm
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow">
|
||||
<div className="px-4 py-5 sm:px-6">
|
||||
<h1 className="text-2xl font-semibold text-gray-900">Crops Table</h1>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
|
||||
Image
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
|
||||
Name
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
|
||||
Growth Stage
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
|
||||
Health Status
|
||||
</th>
|
||||
<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">
|
||||
{crops.map((crop) => (
|
||||
<tr key={crop._id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="h-12 w-12 rounded-full overflow-hidden">
|
||||
{crop.image ? (
|
||||
<img
|
||||
src={crop.image}
|
||||
alt={crop.name}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full w-full bg-gray-200 flex items-center justify-center">
|
||||
<span className="text-gray-500 text-xs">No image</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{crop.name}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
className="inline-flex px-2 py-1 text-sm font-medium rounded-full"
|
||||
style={{
|
||||
backgroundColor:
|
||||
crop.growthStage === "Planted"
|
||||
? "rgb(220, 252, 231)"
|
||||
: crop.growthStage === "Growing"
|
||||
? "rgb(254, 249, 195)"
|
||||
: "rgb(224, 242, 254)",
|
||||
color:
|
||||
crop.growthStage === "Planted"
|
||||
? "rgb(22, 101, 52)"
|
||||
: crop.growthStage === "Growing"
|
||||
? "rgb(113, 63, 18)"
|
||||
: "rgb(3, 105, 161)",
|
||||
}}
|
||||
>
|
||||
{crop.growthStage}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-gray-900">
|
||||
{crop.healthStatus}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-gray-900">
|
||||
{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>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CropTable;
|
||||
@@ -1,243 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
const AddCrop = ({ farmId }) => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [farm, setFarm] = useState(farmId);
|
||||
const [harvestDate, setHarvestDate] = useState("");
|
||||
const [growthStage, setGrowthStage] = useState("Planted");
|
||||
const [healthStatus, setHealthStatus] = useState("");
|
||||
const [image, setImage] = useState(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [success, setSuccess] = useState("");
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setUploading(true);
|
||||
setError("");
|
||||
setSuccess("");
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("name", name);
|
||||
formData.append("farm", farm);
|
||||
formData.append("harvestDate", harvestDate);
|
||||
formData.append("growthStage", growthStage);
|
||||
formData.append("healthStatus", healthStatus);
|
||||
if (image) {
|
||||
formData.append("image", image);
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
setSuccess("Crop created successfully!");
|
||||
setName("");
|
||||
setFarm("");
|
||||
setHarvestDate("");
|
||||
setGrowthStage("");
|
||||
setHealthStatus("");
|
||||
setImage(null);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
className="block text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
|
||||
type="button"
|
||||
>
|
||||
Add New Crop
|
||||
</button>
|
||||
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden">
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
></div>
|
||||
<div className="relative w-full max-w-3xl mx-4">
|
||||
<div className="relative bg-white rounded-xl shadow-lg">
|
||||
{/* Decorative SVG Elements - Moved further right */}
|
||||
<div className="z-0 absolute right-0 top-0 h-full w-32 overflow-hidden pointer-events-none">
|
||||
<svg
|
||||
viewBox="0 0 200 800"
|
||||
className="absolute right-0 h-full transform translate-x-16 fill-green-100"
|
||||
>
|
||||
<path d="M0,0 Q100,200 0,400 Q100,600 0,800 L200,800 L200,0 Z" />
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 200 800"
|
||||
className="absolute right-0 h-full transform translate-x-8 fill-green-200/40"
|
||||
>
|
||||
<path d="M0,0 Q80,200 0,400 Q80,600 0,800 L200,800 L200,0 Z" />
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className="absolute right-12 top-20 w-16 h-16 fill-green-300/30"
|
||||
>
|
||||
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className="absolute right-16 top-48 w-12 h-12 fill-green-400/20"
|
||||
>
|
||||
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b rounded-t border-gray-200">
|
||||
<h3 className="text-2xl font-semibold text-gray-800">
|
||||
Add New Crop
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm z-100 w-8 h-8 inline-flex justify-center items-center"
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="p-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-6 max-w-2xl">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
Crop Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Rice"
|
||||
className="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="harvestDate"
|
||||
className="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
Harvest Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
id="harvestDate"
|
||||
value={harvestDate}
|
||||
onChange={(e) => setHarvestDate(e.target.value)}
|
||||
className="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="growthStage"
|
||||
className="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
Growth Stage
|
||||
</label>
|
||||
<select
|
||||
id="growthStage"
|
||||
value={growthStage}
|
||||
onChange={(e) => setGrowthStage(e.target.value)}
|
||||
className="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
required
|
||||
>
|
||||
<option value="Planted">Planted</option>
|
||||
<option value="Growing">Growing</option>
|
||||
<option value="Ready to Harvest">Ready to Harvest</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="healthStatus"
|
||||
className="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
Health Status
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="healthStatus"
|
||||
value={healthStatus}
|
||||
onChange={(e) => setHealthStatus(e.target.value)}
|
||||
placeholder="Healthy"
|
||||
className="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="image"
|
||||
className="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
Crop Image
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="image"
|
||||
accept="image/*"
|
||||
onChange={(e) => setImage(e.target.files[0])}
|
||||
className="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full z-100 bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition duration-200 font-medium"
|
||||
>
|
||||
{uploading ? "Uploading..." : "Create Crop"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-600 mt-4">{error}</p>}
|
||||
{success && <p className="text-green-600 mt-4">{success}</p>}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddCrop;
|
||||
@@ -1,106 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Loader from "../../../components/Loader";
|
||||
|
||||
const DisplayTast = ({ farmId }) => {
|
||||
const [tasks, setTasks] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
// Function to delete a task and update the state
|
||||
const handleDeleteTask = async (taskId) => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`http://localhost:8000/api/v1/task/${taskId}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
// Assuming that a successful deletion returns a 200 status code
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to delete task");
|
||||
}
|
||||
// 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.
|
||||
}
|
||||
};
|
||||
|
||||
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 (loading) return <div>Loading tasks...</div>;
|
||||
if (error) return <div className="text-red-600">Error: {error}</div>;
|
||||
if (!tasks || tasks.length === 0) {
|
||||
return <div className="p-4">No tasks found for this farm.</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto w-full p-4">
|
||||
<table className="w-full text-sm text-left border">
|
||||
<thead className="text-xs text-gray-700 uppercase bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3">Task Type</th>
|
||||
<th className="px-6 py-3">Description</th>
|
||||
<th className="px-6 py-3">Assigned Date</th>
|
||||
<th className="px-6 py-3">Status</th>
|
||||
<th className="px-6 py-3">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tasks.map((task) => (
|
||||
<tr key={task._id} className="bg-white border-b hover:bg-gray-50">
|
||||
<td className="px-6 py-4">{task.taskType}</td>
|
||||
<td className="px-6 py-4">{task.description}</td>
|
||||
<td className="px-6 py-4">
|
||||
{new Date(task.assignedDate).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="px-6 py-4">{task.status}</td>
|
||||
<td className="px-6 py-4">
|
||||
<button
|
||||
onClick={() => handleDeleteTask(task._id)}
|
||||
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>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DisplayTast;
|
||||
@@ -1,108 +0,0 @@
|
||||
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;
|
||||
@@ -1,60 +0,0 @@
|
||||
import AddCrop from "./AddCrop";
|
||||
import EditFarm from "./EditFarm";
|
||||
|
||||
const Farm = ({ farmData, farmId }) => {
|
||||
return (
|
||||
<div className="w-full ">
|
||||
<div className="flex justify-between">
|
||||
<h1 className="text-2xl font-bold mb-4 m-3">{farmData.name}</h1>
|
||||
<AddCrop farmId={farmId}></AddCrop>
|
||||
</div>
|
||||
|
||||
<table className="min-w-full text-left">
|
||||
<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">
|
||||
Water Content
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900 dark:even:bg-gray-800 border-b dark:border-gray-700">
|
||||
{/* Clicking on the name cell can navigate to a more detailed view if needed */}
|
||||
<td
|
||||
className="px-6 py-4 cursor-pointer hover:text-blue-600 transition"
|
||||
onClick={() => {
|
||||
// Navigate to a detailed view for this farm if desired
|
||||
navigate(`farmpage/${farmData._id}`);
|
||||
}}
|
||||
>
|
||||
{farmData.name}
|
||||
</td>
|
||||
<td className="px-6 py-4">{farmData.location}</td>
|
||||
<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">
|
||||
<EditFarm></EditFarm>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Farm;
|
||||
@@ -1,111 +0,0 @@
|
||||
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";
|
||||
|
||||
export default function FarmPage() {
|
||||
const { farmId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [farmData, setFarmData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
fetchFarmData();
|
||||
}, [farmId]);
|
||||
|
||||
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">
|
||||
{/* Header Section */}
|
||||
<header className="mb-4">
|
||||
<div className="flex justify-end">
|
||||
<Farm farmData={farmData} farmId={farmId} />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Crop Table Section */}
|
||||
<section>
|
||||
<CropTable farmId={farmId} />
|
||||
</section>
|
||||
|
||||
{/* Create Transactions Section */}
|
||||
<section>
|
||||
<div className="flex justify-end">
|
||||
<CreateTransactions farmId={farmId} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Transactions Table Section */}
|
||||
<section>
|
||||
<Transactions farmId={farmId} />
|
||||
</section>
|
||||
|
||||
{/* Add Transaction Modal Section */}
|
||||
<section>
|
||||
<div className="flex justify-end">
|
||||
<AddTransaction farmId={farmId} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Finance Summary Section */}
|
||||
<section>
|
||||
<div className="flex justify-end">
|
||||
<FinanceSummary farmId={farmId} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Create Task Section */}
|
||||
<section>
|
||||
<div className="flex justify-end">
|
||||
<CreateTask farmId={farmId} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Display Task Section */}
|
||||
<section>
|
||||
<div className="flex justify-end">
|
||||
<DisplayTast farmId={farmId} />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Loader from "../../../components/Loader";
|
||||
|
||||
const FinanceSummary = ({ farmId }) => {
|
||||
const [summary, setSummary] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSummary = async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const response = await fetch(
|
||||
`http://localhost:8000/api/v1/finance/summary/${farmId}`,
|
||||
{ credentials: "include" }
|
||||
);
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch summary");
|
||||
}
|
||||
const data = await response.json();
|
||||
setSummary(data);
|
||||
} catch (err) {
|
||||
console.error("Error fetching finance summary:", err);
|
||||
setError("Error fetching summary");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchSummary();
|
||||
}, [farmId]);
|
||||
|
||||
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 transactionsCount = Array.isArray(transactions)
|
||||
? transactions.length
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="max-w-md 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>
|
||||
</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
|
||||
</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>
|
||||
<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>
|
||||
<td className="px-6 py-4 text-gray-800">{transactionsCount}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FinanceSummary;
|
||||
@@ -1,69 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Td from "../../../components/Td";
|
||||
import Loader from "../../../components/Loader";
|
||||
|
||||
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 ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<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">
|
||||
Field
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Value
|
||||
</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>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Transactions;
|
||||
@@ -1,155 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const UpdateFarm = () => {
|
||||
const [farmName, setFarmName] = useState("");
|
||||
const [location, setLocation] = useState("");
|
||||
const [waterContent, setWaterContent] = useState("");
|
||||
const [soilType, setSoilType] = useState("");
|
||||
const [sizeContent, setSizeContent] = useState("");
|
||||
const [error, setError] = useState(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const farmData = {
|
||||
name: farmName,
|
||||
location,
|
||||
waterContent,
|
||||
soilType,
|
||||
size: sizeContent,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
"http://localhost:8000/api/v1/farm/67b9b3a1b68365aa35ae0e5f",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(farmData),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to Update the farm");
|
||||
}
|
||||
|
||||
setSuccess(true);
|
||||
setError(null);
|
||||
// navigate to the dashboard:
|
||||
navigate("/dashboard");
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setSuccess(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||
<h1 className="w-full text-center text-2xl font-bold my-5">
|
||||
Update farm
|
||||
</h1>
|
||||
|
||||
<div className="mb-4 flex justify-end space-x-4">
|
||||
<form className="max-w-md mx-auto w-80" onSubmit={handleSubmit}>
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="farmName"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Farm Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="farmName"
|
||||
value={farmName}
|
||||
onChange={(e) => setFarmName(e.target.value)}
|
||||
className="shadow-xs 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"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="location"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Location
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
className="shadow-xs 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"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="waterContent"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Water Content
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="waterContent"
|
||||
value={waterContent}
|
||||
onChange={(e) => setWaterContent(e.target.value)}
|
||||
className="shadow-xs 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"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="soilType"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Soil Type
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="soilType"
|
||||
value={soilType}
|
||||
onChange={(e) => setSoilType(e.target.value)}
|
||||
className="shadow-xs 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"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="soilType"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Size of Land
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="soilType"
|
||||
value={sizeContent}
|
||||
onChange={(e) => setSizeContent(e.target.value)}
|
||||
className="shadow-xs 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"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="text-white bg-blue-700 hover:bg-blue-800 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"
|
||||
>
|
||||
Add Farm
|
||||
</button>
|
||||
{error && <p className="mt-4 text-red-500 text-sm">{error}</p>}
|
||||
{success && (
|
||||
<p className="mt-4 text-green-500 text-sm">
|
||||
Farm Updated successfully!
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateFarm;
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const FeedBackAndRatings = () => {
|
||||
return (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
|
||||
export default FeedBackAndRatings
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const History = () => {
|
||||
return (
|
||||
<>
|
||||
<div className=""></div></>
|
||||
)
|
||||
}
|
||||
|
||||
export default History
|
||||
@@ -1,267 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link, Outlet, useNavigate } from "react-router-dom";
|
||||
import { BsThreeDotsVertical } from "react-icons/bs";
|
||||
import { RiLogoutBoxLine } from "react-icons/ri";
|
||||
import { IoMdSettings } from "react-icons/io";
|
||||
import { FaHome } from "react-icons/fa";
|
||||
import { useSelector } from "react-redux";
|
||||
import { IoIosNotifications } from "react-icons/io";
|
||||
import { MdFeedback } from "react-icons/md";
|
||||
import { MdOutlineSupportAgent } from "react-icons/md";
|
||||
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();
|
||||
|
||||
const handleLogOut = async () => {
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1/logout`, {
|
||||
method: "Get",
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
const data = await responce.json();
|
||||
|
||||
//console.log("User Logged out data is : ", data);
|
||||
|
||||
if (data.success === true) {
|
||||
navigate("/user/login");
|
||||
}
|
||||
};
|
||||
|
||||
const user = useSelector((store) => store.user);
|
||||
return (
|
||||
<>
|
||||
<div className="container mx-auto p-4">
|
||||
<div className="flex items-center mb-4 md:hidden">
|
||||
<img
|
||||
src={`${user.avatar}`}
|
||||
alt="Profile Picture"
|
||||
className="rounded-full w-10 h-10 mr-2"
|
||||
/>
|
||||
<span className="text-lg font-medium">Hello, {user.name}</span>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
{/* Updated Sidebar */}
|
||||
<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}`}
|
||||
alt="Profile Picture"
|
||||
className="w-12 h-12 rounded-full mr-3 border-2 border-green-500"
|
||||
/>
|
||||
<span className="text-xl font-semibold text-gray-800">
|
||||
Hello, {user.name}
|
||||
</span>
|
||||
</div>
|
||||
<ul className="space-y-4">
|
||||
<li>
|
||||
<Link
|
||||
to={"/user/dashboard"}
|
||||
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">
|
||||
Dashboard
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
{/* <li>
|
||||
<Link
|
||||
to={"/user/dashboard/scheduledmeetings"}
|
||||
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">
|
||||
Scheduled Meeting
|
||||
</span>
|
||||
</Link>
|
||||
</li> */}
|
||||
<li>
|
||||
<Link
|
||||
to={"/user/dashboard/monitoring"}
|
||||
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
|
||||
>
|
||||
<IoMdStats className="text-2xl text-green-600" />
|
||||
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
||||
Monitor
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
{/* <li>
|
||||
<Link
|
||||
to={"/user/dashboard/notifications"}
|
||||
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">
|
||||
Notifications
|
||||
</span>
|
||||
</Link>
|
||||
</li> */}
|
||||
{/* <li>
|
||||
<Link
|
||||
to={"/user/dashboard/feedback"}
|
||||
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">
|
||||
Feedback and Ratings
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
*/}
|
||||
{/* <li>
|
||||
<Link
|
||||
to={"/user/dashboard/support"}
|
||||
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">
|
||||
Support
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
*/}
|
||||
<li>
|
||||
<Link
|
||||
to={"/user/dashboard/settings"}
|
||||
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">
|
||||
Settings
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Outlet />
|
||||
<div className="hidden md:block w-3/12 bg-white rounded-lg shadow p-4 h-96">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-medium">My Profile</h3>
|
||||
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
||||
<button
|
||||
type="button"
|
||||
className="flex text-sm rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
data-dropdown-toggle="user-dropdown"
|
||||
data-dropdown-placement="bottom"
|
||||
>
|
||||
<span className="sr-only">Open user menu</span>
|
||||
<BsThreeDotsVertical className="text-lg" />
|
||||
</button>
|
||||
{/* Dropdown menu */}
|
||||
<div
|
||||
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
|
||||
id="user-dropdown"
|
||||
>
|
||||
<div className="px-4 py-3">
|
||||
<span className="block text-sm text-gray-900 dark:text-white">
|
||||
Bonnie Green
|
||||
</span>
|
||||
<span className="block text-sm text-gray-500 truncate dark:text-gray-400">
|
||||
name@flowbite.com
|
||||
</span>
|
||||
</div>
|
||||
<ul className="py-2" aria-labelledby="user-menu-button">
|
||||
<li>
|
||||
<Link
|
||||
to={"/user/dashboard"}
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Earnings
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
onClick={handleLogOut}
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Sign out
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
data-collapse-toggle="navbar-user"
|
||||
type="button"
|
||||
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||
aria-controls="navbar-user"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 17 14"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M1 1h15M1 7h15M1 13h15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<img
|
||||
src={`${user.avatar}`}
|
||||
alt="Profile Picture"
|
||||
className="rounded-full w-24 h-24 mx-auto"
|
||||
/>
|
||||
<h4 className="text-lg font-medium mt-2">{user.name}</h4>
|
||||
<p className="text-gray-500 text-sm mt-2">
|
||||
Join on {user.createdAt && user.createdAt.substring(0, 10)}
|
||||
</p>
|
||||
<p className="text-gray-500 text-sm mt-2">
|
||||
{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">
|
||||
<FaHome className="text-lg font-extrabold" />
|
||||
</button>
|
||||
<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>
|
||||
<button
|
||||
className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
|
||||
onClick={handleLogOut}
|
||||
>
|
||||
<RiLogoutBoxLine className="text-lg font-extrabold" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainUserPanel;
|
||||
@@ -1,98 +0,0 @@
|
||||
import React from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const MentorSessionCard = ({ session }) => {
|
||||
const {
|
||||
id,
|
||||
mentorName,
|
||||
mentorMail,
|
||||
mentorAvatar,
|
||||
studentName,
|
||||
studentMail,
|
||||
studentAvatar,
|
||||
roomid,
|
||||
schduledTime,
|
||||
createdAt,
|
||||
updatedAt,
|
||||
amountPaid,
|
||||
status,
|
||||
} = 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;
|
||||
};
|
||||
|
||||
let timeStringtoRealTime = (utcDateStr) => {
|
||||
// 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 istDate;
|
||||
};
|
||||
|
||||
const realTimeString = timeStringtoRealTime(schduledTime);
|
||||
|
||||
return (
|
||||
<li className="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-8 h-8 rounded-full"
|
||||
src="/images/profile.jpeg"
|
||||
alt="Neil image"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 ms-4">
|
||||
<p className="text-sm font-medium text-gray-900 truncate dark:text-white">
|
||||
{user.role === "user" ? mentorName : studentName}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
|
||||
{user.role === "user" ? mentorMail : studentMail}
|
||||
</p>
|
||||
</div>
|
||||
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
|
||||
₹{amountPaid}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center">
|
||||
<div>
|
||||
<p className="text-gray-500">
|
||||
{timeStringToDayName(schduledTime)},
|
||||
{realTimeString.substring(21, 26) +
|
||||
" " +
|
||||
realTimeString.substring(30)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export default MentorSessionCard;
|
||||
@@ -1,47 +0,0 @@
|
||||
// MonitoringPage.jsx
|
||||
import React from "react";
|
||||
import MetricsCard from "../../components/monitoring charts/MetricCard";
|
||||
import PerformanceChart from "../../components/monitoring charts/PerformanceChart";
|
||||
import AlertsPanel from "../../components/monitoring charts/AlertsPanel";
|
||||
import ActivityFeed from "../../components/monitoring charts/ActivityField";
|
||||
import Piechart from "../../components/monitoring charts/Piechart";
|
||||
|
||||
const MonitoringPage = () => {
|
||||
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="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>
|
||||
<PerformanceChart />
|
||||
</div>
|
||||
<div className="mb-6 bg-white p-4 rounded-lg shadow">
|
||||
<h2 className="text-lg font-semibold mb-2">Performance Trend</h2>
|
||||
<Piechart></Piechart>
|
||||
</div>
|
||||
|
||||
{/* Alerts and Activity Feed */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<h2 className="text-lg font-semibold mb-2">Alerts</h2>
|
||||
<AlertsPanel />
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<h2 className="text-lg font-semibold mb-2">Recent Activity</h2>
|
||||
<ActivityFeed />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MonitoringPage;
|
||||
@@ -1,120 +0,0 @@
|
||||
import React from "react";
|
||||
import Notification from "../../components/Notification";
|
||||
|
||||
const Notifications = () => {
|
||||
let notifications = [
|
||||
{
|
||||
id: 1,
|
||||
type: "success",
|
||||
message: "Your profile has been updated successfully.",
|
||||
timestamp: "2024-09-26T10:00:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: "warning",
|
||||
message: "Your subscription is about to expire in 3 days.",
|
||||
timestamp: "2024-09-25T09:30:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: "info",
|
||||
message: "New mentor has joined your network.",
|
||||
timestamp: "2024-09-24T15:45:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
];
|
||||
|
||||
// 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 (
|
||||
<>
|
||||
<div className="w-full bg-white rounded-lg shadow p-4 min-h-[85vh]">
|
||||
<div className="flex flex-col justify-center items-center mb-4">
|
||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||
Notifications
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-col w-full gap-2">
|
||||
{notifications.map((notification) => (
|
||||
<Notification key={notification.id} notification={notification} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Notifications;
|
||||
@@ -1,131 +0,0 @@
|
||||
import React from "react";
|
||||
import MentorSessionCard from "./MentorSessionCard";
|
||||
|
||||
const ScheduleMeeting = () => {
|
||||
let meetingInfo = [
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full bg-white rounded-lg shadow p-4 min-h-[85vh]">
|
||||
<div className="flex flex-col justify-center items-center mb-4">
|
||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||
Scheduled Meetings
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-5">
|
||||
{meetingInfo.map((session) => (
|
||||
<MentorSessionCard session={session} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScheduleMeeting;
|
||||
@@ -1,273 +0,0 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { loaderSliceActions } from "../../store/loaderSlice";
|
||||
import { userSliceActions } from "../../store/userSlice";
|
||||
import { BACKEND_URL } from "../../constants";
|
||||
|
||||
const Settings = () => {
|
||||
const nameElement = useRef();
|
||||
const emailElement = useRef();
|
||||
const passwordElement = useRef();
|
||||
const confirmPassElement = useRef();
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
const [avatar, setAvatar] = useState();
|
||||
|
||||
const user = useSelector((store) => store.user);
|
||||
|
||||
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
|
||||
const handleAvatar = async (event) => {
|
||||
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",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = async (event) => {
|
||||
event.preventDefault();
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1/login`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: emailElement.current.value,
|
||||
password: passwordElement.current.value,
|
||||
}),
|
||||
});
|
||||
|
||||
const user = await responce.json();
|
||||
|
||||
//console.log("User Login Data is here : ", user);
|
||||
|
||||
dispatch(userSliceActions.addUser(user.data));
|
||||
|
||||
emailElement.current.value = "";
|
||||
passwordElement.current.value = "";
|
||||
|
||||
if (user.success == true) {
|
||||
navigate("/");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<>
|
||||
<div className="w-full bg-white rounded-lg shadow p-4 min-h-[85vh]">
|
||||
<div className="flex flex-col justify-center items-center mb-4">
|
||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||
Update Your Avatar
|
||||
</h2>
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={handleAvatar}>
|
||||
<div className="flex items-center justify-center w-full">
|
||||
<img src={formData.avatar && `${formData.avatar}`} alt="" />
|
||||
<label
|
||||
htmlFor="dropzone-file"
|
||||
className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center pt-5 pb-6">
|
||||
<svg
|
||||
className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 20 16"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
|
||||
/>
|
||||
</svg>
|
||||
<p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
{avatar ? (
|
||||
<span className="font-semibold">
|
||||
Avatar uploaded successfully
|
||||
</span>
|
||||
) : (
|
||||
<span className="font-semibold">
|
||||
Click to upload and press Upload button
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
SVG, PNG, JPG or GIF (MAX. 800x400px)
|
||||
</p>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-gray-600 px-4 py-1 rounded-lg text-white font-semibold my-4"
|
||||
>
|
||||
Upload
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
id="dropzone-file"
|
||||
type="file"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
setAvatar(e.target.files[0]);
|
||||
//console.log(e.target.files[0]);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="flex flex-col justify-center items-center mb-4">
|
||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||
Update Your Details
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6" onSubmit={handleLogin}>
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Name :
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="password"
|
||||
ref={nameElement}
|
||||
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="Enter your Updated Name here.."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 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="Enter your Updated Email here.."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{/* <div>
|
||||
<label
|
||||
for="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="********"
|
||||
required
|
||||
/>
|
||||
</div> */}
|
||||
<div className="flex justify-center items-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="text-white bg-purple-500 hover:bg-purple-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
>
|
||||
Change the Details
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="flex flex-col justify-center items-center my-10">
|
||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||
Update Your Password
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6" onSubmit={handleLogin}>
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
New 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="Enter your New Password to update.."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Confirm Password :
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
ref={confirmPassElement}
|
||||
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="Enter your New Password to update.."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-center items-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="text-white bg-purple-500 hover:bg-purple-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
>
|
||||
Change the Password
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Support = () => {
|
||||
return (
|
||||
<>
|
||||
<div className=""></div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Support;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
@@ -1,41 +0,0 @@
|
||||
class PeerService {
|
||||
constructor() {
|
||||
if (!this.peer) {
|
||||
this.peer = new RTCPeerConnection({
|
||||
iceServers: [
|
||||
{
|
||||
urls: [
|
||||
"stun:stun.l.google.com:19302",
|
||||
"stun:global.stun.twilio.com:3478",
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async getAnswer(offer) {
|
||||
if (this.peer) {
|
||||
await this.peer.setRemoteDescription(offer);
|
||||
const ans = await this.peer.createAnswer();
|
||||
await this.peer.setLocalDescription(new RTCSessionDescription(ans));
|
||||
return ans;
|
||||
}
|
||||
}
|
||||
|
||||
async setLocalDescription(ans) {
|
||||
if (this.peer) {
|
||||
await this.peer.setRemoteDescription(new RTCSessionDescription(ans));
|
||||
}
|
||||
}
|
||||
|
||||
async getOffer() {
|
||||
if (this.peer) {
|
||||
const offer = await this.peer.createOffer();
|
||||
await this.peer.setLocalDescription(new RTCSessionDescription(offer));
|
||||
return offer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new PeerService();
|
||||
@@ -1,14 +0,0 @@
|
||||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import userSlice from "./userSlice";
|
||||
import messageSlice from "./messageSlice";
|
||||
import loaderSlice from "./loaderSlice";
|
||||
|
||||
const MentifyStore = configureStore({
|
||||
reducer: {
|
||||
user: userSlice.reducer,
|
||||
messages: messageSlice.reducer,
|
||||
loader: loaderSlice.reducer,
|
||||
},
|
||||
});
|
||||
|
||||
export default MentifyStore;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const loaderSlice = createSlice({
|
||||
name: "loader",
|
||||
initialState: false,
|
||||
reducers: {
|
||||
showLoader: (state) => {
|
||||
return true;
|
||||
},
|
||||
hideLoader: (state) => {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const loaderSliceActions = loaderSlice.actions;
|
||||
|
||||
export default loaderSlice;
|
||||
@@ -1,15 +0,0 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const messageSlice = createSlice({
|
||||
name: "messages",
|
||||
initialState: [],
|
||||
reducers: {
|
||||
addMessage: (state, action) => {
|
||||
return [...state, action.payload];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const messageActions = messageSlice.actions;
|
||||
|
||||
export default messageSlice;
|
||||
@@ -1,20 +0,0 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
const userSlice = createSlice({
|
||||
name: "user",
|
||||
initialState: {
|
||||
name: "Unloggedin User",
|
||||
email: "Unlogged@gmail.com",
|
||||
avatar: "/images/default1.png",
|
||||
role: "unloggeduser",
|
||||
mainInterest: [],
|
||||
},
|
||||
reducers: {
|
||||
addUser: (state, action) => {
|
||||
return (state = action.payload);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const userSliceActions = userSlice.actions;
|
||||
|
||||
export default userSlice;
|
||||
@@ -1,13 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: 'class', // Change this based on your needs
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
'plant': "url('/home/atharva/public/images/plant-1573.svg')",
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"destination": "/"
|
||||
}
|
||||
]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user