Merged all the changes from backend and frontend branch to main. Everything functional.
This commit is contained in:
@@ -145,6 +145,7 @@ const updateHealthStatus = async (req, res) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
module.exports = {
|
||||
createCrop,
|
||||
getCropsByFarm,
|
||||
|
||||
@@ -0,0 +1,357 @@
|
||||
// const {
|
||||
// GoogleGenerativeAI,
|
||||
// HarmCategory,
|
||||
// HarmBlockThreshold,
|
||||
// } = require("@google/generative-ai");
|
||||
// const {
|
||||
// GoogleGenerativeAI,
|
||||
// HarmCategory,
|
||||
// HarmBlockThreshold,
|
||||
// } = require("@google/generative-ai");
|
||||
// const dotenv = require("dotenv");
|
||||
|
||||
// dotenv.config({
|
||||
// path: "./.env",
|
||||
// });
|
||||
|
||||
// const apiKey = process.env.GEMINI_API_KEY;
|
||||
// const genAI = new GoogleGenerativeAI(apiKey);
|
||||
|
||||
// const model = genAI.getGenerativeModel({
|
||||
// model: "gemini-2.0-flash",
|
||||
// });
|
||||
|
||||
// const generationConfig = {
|
||||
// temperature: 1,
|
||||
// topP: 0.95,
|
||||
// topK: 40,
|
||||
// maxOutputTokens: 8192,
|
||||
// responseMimeType: "text/plain",
|
||||
// };
|
||||
|
||||
// export async function run(message) {
|
||||
// const chatSession = model.startChat({
|
||||
// generationConfig,
|
||||
// history: [
|
||||
// {
|
||||
// role: "user",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "AI Model Guidelines:\n\nContext Restriction: Only provide answers based on the content available on [Your Website Name]. Do not generate responses unrelated to the website's information.\nNo External Knowledge: If a user asks about a topic outside the website’s scope, politely inform them that you can only assist with website-related queries.\nSafe & Ethical Responses: Do not answer harmful, illegal, controversial, or inappropriate questions. If such a query is detected, respond with a neutral message stating that the request cannot be fulfilled.\nAccuracy & Clarity: Ensure responses are factual, clear, and helpful, directly referencing available website data without assumptions or speculation.\n\nGreeting should be similar lto this :\nHello! 👋\nI’m here to assist you with information available on [Your Website Name]. Here’s what I can do:\n\n✅ Answer questions based on the content from this website.\n✅ Guide you through available services, features, and resources.\n✅ Help you navigate and find what you need.\n\nuse emoji when you feel like it makes sense and increases the user understanding",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "model",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "Hello! 👋\n\nI’m here to assist you with information available on [Your Website Name]. Here’s what I can do:\n\n✅ Answer questions based on the content from this website.\n✅ Guide you through available services, features, and resources.\n✅ Help you navigate and find what you need.\n\nHow can I help you today? 😃\n",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "user",
|
||||
// parts: [{ text: "forget everythings until now " }],
|
||||
// },
|
||||
// {
|
||||
// role: "model",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "Understood. I am now reset and ready to assist you with information available on [Your Website Name], adhering to the guidelines. How can I help you?\n",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "user",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "you will get some json or js object which will be some questions related to farming, you have to answer those questions and give proper description which is neccessary for a farmer to have if you recommend some kind of poisonous pestiside or something give a small warning and some things to keep some precausetions, dont answer anything unrelated to farming and strictly avoid harmful topics like war or viiolence, if farmer wants to kill pestisides then thats ok but anything else is not \n ",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "model",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "Understood. I will answer questions related to farming based on the content available on [Your Website Name]. I will provide detailed descriptions where necessary, including precautions when recommending potentially harmful pesticides. I will strictly avoid topics unrelated to farming or any harmful subjects. Please provide the JSON or JS object containing the questions. I'm ready! 🚜\n",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "user",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "keep the warning and precuastions short, and you are not a chatbot you are a data processing unit who will have the data and analyze it and answer accordingly\n ",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "model",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "Understood. I will function as a data processing unit, analyzing the provided data related to farming and answering questions with concise warnings and precautions where applicable. I will not engage in conversational chatbot behavior. Please provide the data. I'm ready to process! 👩🌾\n",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// });
|
||||
|
||||
// const result = await chatSession.sendMessage(message);
|
||||
// console.log(result.response.text());
|
||||
// }
|
||||
|
||||
// const {
|
||||
// GoogleGenerativeAI,
|
||||
// HarmCategory,
|
||||
// HarmBlockThreshold,
|
||||
// } = require("@google/generative-ai");
|
||||
// const apiKey = "AIzaSyDsXug23r4umgcJpj77KeqNyYW0hQnYDgg";
|
||||
// const genAI = new GoogleGenerativeAI(apiKey);
|
||||
// const model = genAI.getGenerativeModel({
|
||||
// model: "gemini-2.0-flash",
|
||||
// });
|
||||
// const generationConfig = {
|
||||
// temperature: 1,
|
||||
// topP: 0.95,
|
||||
// topK: 40,
|
||||
// maxOutputTokens: 8192,
|
||||
// responseMimeType: "text/plain",
|
||||
// };
|
||||
// async function run(message) {
|
||||
// const chatSession = model.startChat({
|
||||
// generationConfig,
|
||||
// history: [
|
||||
// {
|
||||
// role: "user",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "you will get some json or js object which will be some questions related to farming, you have to answer those questions and give proper description which is neccessary for a farmer to have if you recommend some kind of poisonous pestiside or something give a small warning and some things to keep some precausetions, dont answer anything unrelated to farming and strictly avoid harmful topics like war or viiolence, if farmer wants to kill pestisides then thats ok but anything else is not \n ",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "model",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "Understood. I will answer questions related to farming based on the content available on [Your Website Name]. I will provide detailed descriptions where necessary, including precautions when recommending potentially harmful pesticides. I will strictly avoid topics unrelated to farming or any harmful subjects. Please provide the JSON or JS object containing the questions. I'm ready! 🚜\n",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "user",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "keep the warning and precuastions short, and you are not a chatbot you are a data processing unit who will have the data and analyze it and answer accordingly\n ",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "model",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "Understood. I will function as a data processing unit, analyzing the provided data related to farming and answering questions with concise warnings and precautions where applicable. I will not engage in conversational chatbot behavior. Please provide the data. I'm ready to process! 👩🌾\n",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// });
|
||||
// const result = await chatSession.sendMessage(message);
|
||||
// console.log(result.response.text());
|
||||
// }
|
||||
// run("How we check the farmes soil type ? ");
|
||||
|
||||
// const {
|
||||
// GoogleGenerativeAI,
|
||||
// HarmCategory,
|
||||
// HarmBlockThreshold,
|
||||
// } = require("@google/generative-ai");
|
||||
|
||||
// const apiKey = "AIzaSyDsXug23r4umgcJpj77KeqNyYW0hQnYDgg";
|
||||
// const genAI = new GoogleGenerativeAI(apiKey);
|
||||
|
||||
// const model = genAI.getGenerativeModel({
|
||||
// model: "gemini-2.0-flash",
|
||||
// });
|
||||
|
||||
// const generationConfig = {
|
||||
// temperature: 1,
|
||||
// topP: 0.95,
|
||||
// topK: 40,
|
||||
// maxOutputTokens: 8192,
|
||||
// responseMimeType: "text/plain",
|
||||
// };
|
||||
|
||||
// async function run(message) {
|
||||
// const chatSession = model.startChat({
|
||||
// generationConfig,
|
||||
// history: [
|
||||
// {
|
||||
// role: "user",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "AI Guidelines:\n- The AI must only provide answers related to farming, including crops, sowing, irrigation, harvesting, fertilizers, pesticides, soil health, and climate conditions. \n- The AI must not answer anything outside farming. \n- If asked an unrelated question, the AI must not respond. \n- If the query is unclear, the AI must default to farming-related guidance. \n- The AI must provide only one-line responses without extra details. \n- No harmful, hurtful, or controversial responses. \n- No advice on illegal, unsafe, or unethical farming practices.\n",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "model",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "Understood. I will only provide one-line responses directly related to farming.\n",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// });
|
||||
|
||||
// const result = await chatSession.sendMessage(message);
|
||||
// console.log(result.response.text());
|
||||
// }
|
||||
|
||||
// const {
|
||||
// GoogleGenerativeAI,
|
||||
// HarmCategory,
|
||||
// HarmBlockThreshold,
|
||||
// } = require("@google/generative-ai");
|
||||
|
||||
// const apiKey = "AIzaSyDsXug23r4umgcJpj77KeqNyYW0hQnYDgg";
|
||||
// const genAI = new GoogleGenerativeAI(apiKey);
|
||||
|
||||
// const model = genAI.getGenerativeModel({
|
||||
// model: "gemini-2.0-flash",
|
||||
// });
|
||||
|
||||
// const generationConfig = {
|
||||
// temperature: 1,
|
||||
// topP: 0.95,
|
||||
// topK: 40,
|
||||
// maxOutputTokens: 8192,
|
||||
// responseMimeType: "text/plain",
|
||||
// };
|
||||
|
||||
// async function run() {
|
||||
// const chatSession = model.startChat({
|
||||
// generationConfig,
|
||||
// history: [
|
||||
// {
|
||||
// role: "user",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "AI Guidelines:\n- The AI must only provide answers related to farming, including crops, sowing, irrigation, harvesting, fertilizers, pesticides, soil health, and climate conditions. \n- The AI must not answer anything outside farming. \n- If asked an unrelated question, the AI must not respond. \n- If the query is unclear, the AI must default to farming-related guidance. \n- The AI must provide only one-line responses without extra details. \n- No harmful, hurtful, or controversial responses. \n- No advice on illegal, unsafe, or unethical farming practices.\n",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "model",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "Understood. I will only provide one-line responses directly related to farming.\n",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "user",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "you can also receive json or javascript object as an input ",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// role: "model",
|
||||
// parts: [
|
||||
// {
|
||||
// text: "Understood. I will process the JSON or JavaScript object only if it pertains to farming and respond with a single line.\n",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// });
|
||||
|
||||
// const result = await chatSession.sendMessage("INSERT_INPUT_HERE");
|
||||
// console.log(result.response.text());
|
||||
// }
|
||||
|
||||
const {
|
||||
GoogleGenerativeAI,
|
||||
HarmCategory,
|
||||
HarmBlockThreshold,
|
||||
} = require("@google/generative-ai");
|
||||
|
||||
const apiKey = "AIzaSyDsXug23r4umgcJpj77KeqNyYW0hQnYDgg";
|
||||
const genAI = new GoogleGenerativeAI(apiKey);
|
||||
|
||||
const model = genAI.getGenerativeModel({
|
||||
model: "gemini-2.0-flash",
|
||||
});
|
||||
|
||||
const generationConfig = {
|
||||
temperature: 1,
|
||||
topP: 0.95,
|
||||
topK: 40,
|
||||
maxOutputTokens: 8192,
|
||||
responseMimeType: "text/plain",
|
||||
};
|
||||
|
||||
async function run(message) {
|
||||
const chatSession = model.startChat({
|
||||
generationConfig,
|
||||
history: [
|
||||
{
|
||||
role: "user",
|
||||
parts: [
|
||||
{
|
||||
text: "AI Guidelines:\n- The AI must only provide answers related to farming, including crops, sowing, irrigation, harvesting, fertilizers, pesticides, soil health, and climate conditions. \n- The AI must not answer anything outside farming. \n- If asked an unrelated question, the AI must not respond. \n- If the query is unclear, the AI must default to farming-related guidance. \n- The AI must provide only one-line responses without extra details. \n- No harmful, hurtful, or controversial responses. \n- No advice on illegal, unsafe, or unethical farming practices.\n",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
role: "model",
|
||||
parts: [
|
||||
{
|
||||
text: "Understood. I will only provide one-line responses directly related to farming.\n",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
role: "user",
|
||||
parts: [
|
||||
{
|
||||
text: "you can also receive json or javascript object as an input ",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
role: "model",
|
||||
parts: [
|
||||
{
|
||||
text: "Understood. I will process the JSON or JavaScript object only if it pertains to farming and respond with a single line.\n",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
role: "user",
|
||||
parts: [
|
||||
{
|
||||
text: "Answer everything which falls under the farming and agriculture even if the prompt does not include any farm or agriculture word in it",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
role: "model",
|
||||
parts: [
|
||||
{
|
||||
text: "Understood. I will assume all queries are related to farming and provide a one-line farming-related response.\n",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const result = await chatSession.sendMessage(message);
|
||||
console.log(result.response.text());
|
||||
}
|
||||
|
||||
module.exports = { run };
|
||||
|
||||
// run("Sowing start and harvesting end which crop ?");
|
||||
@@ -9,6 +9,7 @@ const financeRoute = require("./Routes/finance.routes.js");
|
||||
const taskRoute = require("./Routes/task.routes.js");
|
||||
const { checkAuthenticated } = require("./Middlewares/authentication.js");
|
||||
const dotenv = require("dotenv");
|
||||
const { run } = require("./Utils/model.js");
|
||||
|
||||
dotenv.config({
|
||||
path: "./.env",
|
||||
@@ -42,4 +43,6 @@ app.use("/api/v1/finance", financeRoute);
|
||||
|
||||
app.use("/api/v1/task", taskRoute);
|
||||
|
||||
|
||||
|
||||
module.exports = app;
|
||||
|
||||
Generated
+10
@@ -9,6 +9,7 @@
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@google/generative-ai": "^0.22.0",
|
||||
"@huggingface/transformers": "^3.3.3",
|
||||
"@xenova/transformers": "^2.17.2",
|
||||
"bcrypt": "^5.1.1",
|
||||
@@ -38,6 +39,15 @@
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@google/generative-ai": {
|
||||
"version": "0.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.22.0.tgz",
|
||||
"integrity": "sha512-mLR3PDWCk5O/BWNyDvFDIiwKeXQmFGZ+kJFd9m73QrUPCFREttJyVbBPTW4y9CwTbaltLMDaLDfroCrRv5Bl8Q==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@huggingface/jinja": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@huggingface/jinja/-/jinja-0.3.3.tgz",
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"@google/generative-ai": "^0.22.0",
|
||||
"@huggingface/transformers": "^3.3.3",
|
||||
"@xenova/transformers": "^2.17.2",
|
||||
"bcrypt": "^5.1.1",
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
# 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?
|
||||
@@ -0,0 +1,8 @@
|
||||
# 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
|
||||
@@ -0,0 +1,38 @@
|
||||
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 },
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,18 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"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",
|
||||
"apexcharts": "^4.5.0",
|
||||
"chart.js": "^4.4.8",
|
||||
"flowbite": "^2.5.1",
|
||||
"@splinetool/react-spline": "^4.0.0",
|
||||
"flowbite": "^2.5.1",
|
||||
"framer-motion": "^12.4.7",
|
||||
"react": "^18.3.1",
|
||||
"react-apexcharts": "^1.7.0",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
@@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 143 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 510 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 510 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -0,0 +1,12 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 779 KiB |
@@ -0,0 +1,74 @@
|
||||
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">
|
||||
<Navbar2 />
|
||||
<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;
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
const Container = ({ children }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-auto">{children}</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Container;
|
||||
@@ -0,0 +1,61 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Td from "./Td";
|
||||
|
||||
const FarmList = () => {
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
fetch("http://localhost:8000/api/v1/farm", {
|
||||
credentials: "include",
|
||||
method: "GET",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => setData(data))
|
||||
.then(setLoading(false))
|
||||
.catch((error) => console.error(error));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative overflow-x-auto shadow-md sm:rounded-lg">
|
||||
{loading ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
||||
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Farm name
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Location
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Type
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Size (acres)
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.length > 0 ? (
|
||||
data.map((item) => <Td key={item.id} children={item} />)
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={5} className="text-center">
|
||||
No data available
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FarmList;
|
||||
@@ -0,0 +1,69 @@
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Logs = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="relative overflow-y-hidden">
|
||||
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border">
|
||||
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Product name
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Color
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Category
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Price
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
|
||||
<th
|
||||
scope="row"
|
||||
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
Apple MacBook Pro 17"
|
||||
</th>
|
||||
<td className="px-6 py-4">Silver</td>
|
||||
<td className="px-6 py-4">Laptop</td>
|
||||
<td className="px-6 py-4">$2999</td>
|
||||
</tr>
|
||||
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
|
||||
<th
|
||||
scope="row"
|
||||
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
Microsoft Surface Pro
|
||||
</th>
|
||||
<td className="px-6 py-4">White</td>
|
||||
<td className="px-6 py-4">Laptop PC</td>
|
||||
<td className="px-6 py-4">$1999</td>
|
||||
</tr>
|
||||
<tr className="bg-white dark:bg-gray-800">
|
||||
<th
|
||||
scope="row"
|
||||
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
Magic Mouse 2
|
||||
</th>
|
||||
<td className="px-6 py-4">Black</td>
|
||||
<td className="px-6 py-4">Accessories</td>
|
||||
<td className="px-6 py-4">$99</td>
|
||||
</tr>
|
||||
</tbody>{" "}
|
||||
</table>{" "}
|
||||
<Link to="/logs" className="text-[#2323FF] pl-5">
|
||||
<hr />
|
||||
View all Logs
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logs;
|
||||
@@ -0,0 +1,16 @@
|
||||
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;
|
||||
@@ -0,0 +1,206 @@
|
||||
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;
|
||||
@@ -0,0 +1,100 @@
|
||||
const Navbar2 = () => {
|
||||
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 focus:ring-4 focus:outline-none focus:ring-black-300 font-medium rounded-full text-sm py-2 px-4 text-center"
|
||||
>
|
||||
Get started
|
||||
</button>
|
||||
<button
|
||||
data-collapse-toggle="navbar-sticky"
|
||||
type="button"
|
||||
className="inline-flex items-center p-2 w-10 h-10 mt-2 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-purple-400 dark:focus:ring-gray-600"
|
||||
aria-controls="navbar-sticky"
|
||||
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-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;
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
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;
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const Td = ({ children }) => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
|
||||
<td
|
||||
className="px-6 py-4"
|
||||
onClick={() => {
|
||||
navigate(`farmpage/${children._id}`);
|
||||
}}
|
||||
>
|
||||
{children.name}
|
||||
</td>
|
||||
<td className="px-6 py-4">{children.location}</td>
|
||||
<td className="px-6 py-4">{children.soilType}</td>
|
||||
<td className="px-6 py-4">{children.size}</td>
|
||||
<td className="px-6 py-4">
|
||||
<a
|
||||
href="#"
|
||||
className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
export default Td;
|
||||
@@ -0,0 +1,19 @@
|
||||
const TotalSpent = () => {
|
||||
return (
|
||||
<div className="h-full">
|
||||
<a
|
||||
href="#"
|
||||
className="h-full block max-w-sm p-6 bg-no-repeat bg-center bg-cover border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
|
||||
>
|
||||
<h5 className="mb-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
100,000
|
||||
</h5>
|
||||
<p className="font-normal text-gray-700 dark:text-gray-400">
|
||||
This is the total cost which you spent on this farm
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TotalSpent;
|
||||
@@ -0,0 +1,28 @@
|
||||
// ActivityFeed.jsx
|
||||
import React from "react";
|
||||
|
||||
const ActivityFeed = () => {
|
||||
// Hard-coded activity feed data
|
||||
const activities = [
|
||||
{
|
||||
id: 1,
|
||||
description: "Farm A reported increased yield",
|
||||
time: "10 mins ago",
|
||||
},
|
||||
{ id: 2, description: "Sensor B recalibrated", time: "20 mins ago" },
|
||||
{ id: 3, description: "Alert triggered on Farm C", time: "30 mins ago" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ul className="space-y-2">
|
||||
{activities.map((activity) => (
|
||||
<li key={activity.id} className="bg-gray-50 p-2 rounded shadow">
|
||||
<p className="text-sm">{activity.description}</p>
|
||||
<span className="text-xs text-gray-500">{activity.time}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityFeed;
|
||||
@@ -0,0 +1,28 @@
|
||||
// AlertsPanel.jsx
|
||||
import React from "react";
|
||||
|
||||
const AlertsPanel = () => {
|
||||
// Hard-coded alerts data
|
||||
const alerts = [
|
||||
{ id: 1, message: "Temperature exceeds threshold", type: "warning" },
|
||||
{ id: 2, message: "New sensor connected", type: "info" },
|
||||
{ id: 3, message: "Power consumption high", type: "warning" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{alerts.map((alert) => (
|
||||
<div
|
||||
key={alert.id}
|
||||
className={`p-2 rounded mb-2 ${
|
||||
alert.type === "warning" ? "bg-red-100" : "bg-blue-100"
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm">{alert.message}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlertsPanel;
|
||||
@@ -0,0 +1,13 @@
|
||||
// MetricsCard.jsx
|
||||
import React from "react";
|
||||
|
||||
const MetricsCard = ({ title, value }) => {
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<h3 className="text-gray-500 text-sm font-medium">{title}</h3>
|
||||
<p className="text-2xl font-bold">{value}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetricsCard;
|
||||
@@ -0,0 +1,50 @@
|
||||
// PerformanceChart.jsx
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from "chart.js";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
|
||||
const PerformanceChart = () => {
|
||||
const data = {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Yield",
|
||||
data: [65, 59, 80, 81, 56, 55, 70], // hard-coded values
|
||||
fill: false,
|
||||
backgroundColor: "rgb(75, 192, 192)",
|
||||
borderColor: "rgba(75, 192, 192, 0.2)",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: { position: "top" },
|
||||
title: { display: true, text: "Performance Trend" },
|
||||
},
|
||||
};
|
||||
|
||||
return <Line data={data} options={options} />;
|
||||
};
|
||||
|
||||
export default PerformanceChart;
|
||||
@@ -0,0 +1,46 @@
|
||||
import React, { useState } from "react";
|
||||
import Chart from "react-apexcharts";
|
||||
|
||||
const Piechart = () => {
|
||||
const [series, setSeries] = useState([35.1, 23.5, 2.4, 5.4]);
|
||||
|
||||
const chartOptions = {
|
||||
series: series,
|
||||
labels: ["Fertilizers", "Pestisides", "Manner", "Urea"],
|
||||
colors: ["#1C64F2", "#16BDCA", "#FDBA8C", "#E74694"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
height: 320,
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
total: {
|
||||
show: true,
|
||||
label: "Total",
|
||||
formatter: function (w) {
|
||||
return w.globals.seriesTotals.reduce((a, b) => a + b, 0) + "k";
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white md:p-6 block max-w-sm p-6 bg-no-repeat bg-center bg-cover border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
|
||||
<h5 className="text-xl font-bold text-gray-900 dark:text-white mb-4 ">
|
||||
Cost Analysis
|
||||
</h5>
|
||||
<Chart options={chartOptions} series={series} type="donut" height={320} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Piechart;
|
||||
@@ -0,0 +1 @@
|
||||
export const BACKEND_URL = "http://localhost:8000";
|
||||
@@ -0,0 +1,26 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@theme {
|
||||
--color-midnight: #A3D1C6;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
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";
|
||||
createRoot(document.getElementById("root")).render(
|
||||
<StrictMode>
|
||||
<Provider store={MentifyStore}>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
{/* 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>
|
||||
);
|
||||
@@ -0,0 +1,43 @@
|
||||
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;
|
||||
@@ -0,0 +1,112 @@
|
||||
|
||||
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 class="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<a href="#">
|
||||
<img class="rounded-t-lg" src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg" alt="plant" />
|
||||
</a>
|
||||
<div class="p-6 backdrop-blur-md rounded-b-lg">
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">High tech, high yields?</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-white dark:text-gray-400">The Kenyan farmers deploying AI to increase productivity
|
||||
This article is more than 4 months old. AI apps are increasingly popular among small-scale farmers seeking to improve the quality and quantity of their crop.</p>
|
||||
<a href="https://www.theguardian.com/world/2024/sep/30/high-tech-high-yields-the-kenyan-farmers-deploying-ai-to-increase-productivity" target="_blank" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
|
||||
Read more
|
||||
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const CardOnlyText = (props) => {
|
||||
return(
|
||||
<div>
|
||||
<a href={props.href} target="_blank" class="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white"> {props.headingText} </h5>
|
||||
<p class="font-normal text-gray-50 dark:text-gray-400"> {props.bodyText} </p>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const CardWithButton = () => {
|
||||
return(
|
||||
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<a href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/" target="_blank">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Empowering smallholder farmers with AI tools can bolster global food security</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400"> AI-powered weather forecasts help rural Indian farmers make informed planting decisions, reducing debt and boosting savings.</p>
|
||||
<a href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/" target="_blank" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
|
||||
Read more
|
||||
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const CardWithOnlyImage = () => {
|
||||
return(
|
||||
<div class="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
|
||||
<a href="https://theprint.in/economy/telangana-is-the-success-story-of-indian-agritech-ai-tools-soil-testing-e-commerce-more/1630359/" target="_blank">
|
||||
<img class=" rounded-lg" src="https://i.pinimg.com/736x/2b/2a/0f/2b2a0f7003bd3e4201573c1189d600de.jpg" alt="product image" />
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
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;
|
||||
@@ -0,0 +1,190 @@
|
||||
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="/" class="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/" class="hover:underline">
|
||||
Flowbite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://tailwindcss.com/" class="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="/" class="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;
|
||||
@@ -0,0 +1,102 @@
|
||||
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 class="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<a href="#">
|
||||
<img class="rounded-t-lg" src="/images/plant.png" alt="plant" />
|
||||
</a>
|
||||
<div class="p-8 backdrop-blur-md rounded-b-lg">
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-white dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
||||
<a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
|
||||
Read more
|
||||
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-10 justify-between ">
|
||||
|
||||
<div>
|
||||
<a href="#" class="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||||
<p class="font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
||||
<a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
|
||||
Read more
|
||||
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className=" flex flex-col justify-between">
|
||||
|
||||
<div class="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
|
||||
<a href="#">
|
||||
<img class=" rounded-lg" src="/images/plant.png" alt="product image" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<a href="#" class="block max-w-sm p-6 backdrop-blur-xl rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||||
<p class="font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
|
||||
|
||||
|
||||
|
||||
// {grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2}
|
||||
@@ -0,0 +1,58 @@
|
||||
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
|
||||
@@ -0,0 +1,20 @@
|
||||
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;
|
||||
@@ -0,0 +1,289 @@
|
||||
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;
|
||||
@@ -0,0 +1,179 @@
|
||||
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;
|
||||
@@ -0,0 +1,124 @@
|
||||
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 class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
||||
</svg>
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Excellent Dashboards</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Our descriptive dashboards give insights into your crop's health and keeps track of your burning expenses</p>
|
||||
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
||||
Check Out
|
||||
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
|
||||
<ScrollReveal direction="up">
|
||||
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
||||
</svg>
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white"> Crop Disease Prediction </h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Predict the possible crop diseases based on their shown symptoms</p>
|
||||
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
||||
Check Out
|
||||
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal direction="up">
|
||||
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
||||
</svg>
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Crop Planner</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Based on previous season's crop and used pertilizers and pesticides, plan what crops would best suit the present state of your soil</p>
|
||||
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
||||
Check Out
|
||||
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonial;
|
||||
@@ -0,0 +1,140 @@
|
||||
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;
|
||||
@@ -0,0 +1,16 @@
|
||||
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;
|
||||
@@ -0,0 +1,210 @@
|
||||
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;
|
||||
@@ -0,0 +1,77 @@
|
||||
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;
|
||||
@@ -0,0 +1,130 @@
|
||||
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;
|
||||
@@ -0,0 +1,23 @@
|
||||
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-4">
|
||||
<Piechart />
|
||||
<TotalSpent />
|
||||
</div>
|
||||
<FarmList />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Dashboard;
|
||||
@@ -0,0 +1,240 @@
|
||||
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;
|
||||
@@ -0,0 +1,250 @@
|
||||
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);
|
||||
} 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;
|
||||
@@ -0,0 +1,152 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
const CropTable = ({ farmId }) => {
|
||||
const [crops, setCrops] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
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();
|
||||
}, [farmId]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center min-h-[400px]">
|
||||
Loading crops...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
</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>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CropTable;
|
||||
@@ -0,0 +1,243 @@
|
||||
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;
|
||||
@@ -0,0 +1,67 @@
|
||||
import AddCrop from "./AddCrop";
|
||||
|
||||
const Farm = ({ farmData, farmId }) => {
|
||||
console.log("Farm id is : ", 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">
|
||||
<button
|
||||
onClick={() =>
|
||||
navigate(`/user/dashboard/updatefarm?farmId=${farmData._id}`)
|
||||
}
|
||||
className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Farm;
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import Farm from "./Farm";
|
||||
import CropTable from "./CropTable";
|
||||
|
||||
export default function FarmPage() {
|
||||
const { farmId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [farmData, setFarmData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetching() {
|
||||
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(jsonData);
|
||||
setFarmData(jsonData);
|
||||
} catch (error) {
|
||||
console.error("Error fetching farm data: ", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetching();
|
||||
}, [farmId]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||
<p>Loading farm data...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!farmData) {
|
||||
return (
|
||||
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||
<p>No farm data found.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
console.log("My farm id is : ", farmId);
|
||||
|
||||
return (
|
||||
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||
{/* Back Button */}
|
||||
|
||||
<div className="mb-4 flex justify-end">
|
||||
<Farm farmData={farmData} farmId={farmId}></Farm>
|
||||
</div>
|
||||
<div>
|
||||
<CropTable farmId={farmId}></CropTable>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
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;
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
const FeedBackAndRatings = () => {
|
||||
return (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
|
||||
export default FeedBackAndRatings
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
|
||||
const History = () => {
|
||||
return (
|
||||
<>
|
||||
<div className=""></div></>
|
||||
)
|
||||
}
|
||||
|
||||
export default History
|
||||
@@ -0,0 +1,266 @@
|
||||
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 { MdHistory } from "react-icons/md";
|
||||
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";
|
||||
|
||||
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 to-gray-50 rounded-xl shadow-lg p-6">
|
||||
<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 transition-colors"
|
||||
>
|
||||
<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 transition-colors"
|
||||
>
|
||||
<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/history"}
|
||||
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
|
||||
>
|
||||
<MdHistory className="text-2xl text-green-600" />
|
||||
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
||||
History
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to={"/user/dashboard/notifications"}
|
||||
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
|
||||
>
|
||||
<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 transition-colors"
|
||||
>
|
||||
<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 transition-colors"
|
||||
>
|
||||
<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 transition-colors"
|
||||
>
|
||||
<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.description == null &&
|
||||
"I am a Senior Software Engineer at Google and also mentored 50+ students to get their dream job."}
|
||||
</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;
|
||||
@@ -0,0 +1,98 @@
|
||||
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;
|
||||
@@ -0,0 +1,47 @@
|
||||
// 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;
|
||||
@@ -0,0 +1,120 @@
|
||||
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;
|
||||
@@ -0,0 +1,131 @@
|
||||
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;
|
||||
@@ -0,0 +1,273 @@
|
||||
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;
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
const Support = () => {
|
||||
return (
|
||||
<>
|
||||
<div className=""></div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Support;
|
||||
@@ -0,0 +1,41 @@
|
||||
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();
|
||||
@@ -0,0 +1,14 @@
|
||||
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;
|
||||
@@ -0,0 +1,18 @@
|
||||
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;
|
||||
@@ -0,0 +1,15 @@
|
||||
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;
|
||||
@@ -0,0 +1,20 @@
|
||||
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;
|
||||
@@ -0,0 +1,13 @@
|
||||
/** @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: [],
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"destination": "/"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
{
|
||||
"name": "git repo",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"node_modules/@yr/monotone-cubic-spline": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/apexcharts": {
|
||||
"version": "3.46.0",
|
||||
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.46.0.tgz",
|
||||
"integrity": "sha512-ELAY6vj8JQD7QLktKasTzwm9Wt0qxqfQSo+3QWS7G7I774iK8HCkG1toGsqJH0mkK6PtYBtnSIe66uUcwoCw1w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@yr/monotone-cubic-spline": "^1.0.3",
|
||||
"svg.draggable.js": "^2.2.2",
|
||||
"svg.easing.js": "^2.0.0",
|
||||
"svg.filter.js": "^2.0.2",
|
||||
"svg.pathmorphing.js": "^0.1.3",
|
||||
"svg.resize.js": "^1.4.3",
|
||||
"svg.select.js": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.draggable.js": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.easing.js": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"svg.js": ">=2.3.x"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.filter.js": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.2.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.js": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/svg.pathmorphing.js": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.resize.js": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.6.5",
|
||||
"svg.select.js": "^2.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.resize.js/node_modules/svg.select.js": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.2.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.select.js": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.6.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
.DS_Store
|
||||
.git*
|
||||
test
|
||||
package-lock.json
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "4"
|
||||
- "6"
|
||||
sudo: false
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 yr.no
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
[](https://npmjs.org/package/@yr/monotone-cubic-spline)
|
||||
[](https://travis-ci.org/YR/monotone-cubic-spline?branch=master)
|
||||
|
||||
Convert a series of points to a monotone cubic spline (based on D3.js implementation)
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
const spline = require('@yr/monotone-cubic-spline');
|
||||
const points = spline.points([[0,0], [1,1], [2,1], [3,0], [4,0]]);
|
||||
const svgPath = spline.svgPath(points);
|
||||
|
||||
console.log(svgPath);
|
||||
// => 'M0 0C0.08333333333333333, 0.08333333333333333, ...'
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
**points(points)**: convert array of points (x,y) to array of bezier points (c1x,c1y,c2x,c2y,x,y)
|
||||
|
||||
**slice(points, start, end)**: slice a segment of converted points
|
||||
|
||||
**svgPath(points)**: convert array of bezier points to svg path (`d`) string
|
||||
+166
@@ -0,0 +1,166 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Convert a series of points to a monotone cubic spline
|
||||
* Algorithm based on https://github.com/mbostock/d3
|
||||
* https://github.com/yr/monotone-cubic-spline
|
||||
* @copyright Yr
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
var ε = 1e-6;
|
||||
|
||||
module.exports = {
|
||||
/**
|
||||
* Convert 'points' to bezier
|
||||
* @param {Array} points
|
||||
* @returns {Array}
|
||||
*/
|
||||
points: function points(_points) {
|
||||
var tgts = tangents(_points);
|
||||
|
||||
var p = _points[1];
|
||||
var p0 = _points[0];
|
||||
var pts = [];
|
||||
var t = tgts[1];
|
||||
var t0 = tgts[0];
|
||||
|
||||
// Add starting 'M' and 'C' points
|
||||
pts.push(p0, [p0[0] + t0[0], p0[1] + t0[1], p[0] - t[0], p[1] - t[1], p[0], p[1]]);
|
||||
|
||||
// Add 'S' points
|
||||
for (var i = 2, n = tgts.length; i < n; i++) {
|
||||
var _p = _points[i];
|
||||
var _t = tgts[i];
|
||||
|
||||
pts.push([_p[0] - _t[0], _p[1] - _t[1], _p[0], _p[1]]);
|
||||
}
|
||||
|
||||
return pts;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Slice out a segment of 'points'
|
||||
* @param {Array} points
|
||||
* @param {Number} start
|
||||
* @param {Number} end
|
||||
* @returns {Array}
|
||||
*/
|
||||
slice: function slice(points, start, end) {
|
||||
var pts = points.slice(start, end);
|
||||
|
||||
if (start) {
|
||||
// Add additional 'C' points
|
||||
if (pts[1].length < 6) {
|
||||
var n = pts[0].length;
|
||||
|
||||
pts[1] = [pts[0][n - 2] * 2 - pts[0][n - 4], pts[0][n - 1] * 2 - pts[0][n - 3]].concat(pts[1]);
|
||||
}
|
||||
// Remove control points for 'M'
|
||||
pts[0] = pts[0].slice(-2);
|
||||
}
|
||||
|
||||
return pts;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Convert 'points' to svg path
|
||||
* @param {Array} points
|
||||
* @returns {String}
|
||||
*/
|
||||
svgPath: function svgPath(points) {
|
||||
var p = '';
|
||||
|
||||
for (var i = 0; i < points.length; i++) {
|
||||
var point = points[i];
|
||||
var n = point.length;
|
||||
|
||||
if (!i) {
|
||||
p += 'M' + point[n - 2] + ' ' + point[n - 1];
|
||||
} else if (n > 4) {
|
||||
p += 'C' + point[0] + ', ' + point[1];
|
||||
p += ', ' + point[2] + ', ' + point[3];
|
||||
p += ', ' + point[4] + ', ' + point[5];
|
||||
} else {
|
||||
p += 'S' + point[0] + ', ' + point[1];
|
||||
p += ', ' + point[2] + ', ' + point[3];
|
||||
}
|
||||
}
|
||||
|
||||
return p;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate tangents for 'points'
|
||||
* @param {Array} points
|
||||
* @returns {Array}
|
||||
*/
|
||||
function tangents(points) {
|
||||
var m = finiteDifferences(points);
|
||||
var n = points.length - 1;
|
||||
|
||||
var tgts = [];
|
||||
var a = void 0,
|
||||
b = void 0,
|
||||
d = void 0,
|
||||
s = void 0;
|
||||
|
||||
for (var i = 0; i < n; i++) {
|
||||
d = slope(points[i], points[i + 1]);
|
||||
|
||||
if (Math.abs(d) < ε) {
|
||||
m[i] = m[i + 1] = 0;
|
||||
} else {
|
||||
a = m[i] / d;
|
||||
b = m[i + 1] / d;
|
||||
s = a * a + b * b;
|
||||
if (s > 9) {
|
||||
s = d * 3 / Math.sqrt(s);
|
||||
m[i] = s * a;
|
||||
m[i + 1] = s * b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (var _i = 0; _i <= n; _i++) {
|
||||
s = (points[Math.min(n, _i + 1)][0] - points[Math.max(0, _i - 1)][0]) / (6 * (1 + m[_i] * m[_i]));
|
||||
tgts.push([s || 0, m[_i] * s || 0]);
|
||||
}
|
||||
|
||||
return tgts;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute slope from point 'p0' to 'p1'
|
||||
* @param {Array} p0
|
||||
* @param {Array} p1
|
||||
* @returns {Number}
|
||||
*/
|
||||
function slope(p0, p1) {
|
||||
return (p1[1] - p0[1]) / (p1[0] - p0[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute three-point differences for 'points'
|
||||
* @param {Array} points
|
||||
* @returns {Array}
|
||||
*/
|
||||
function finiteDifferences(points) {
|
||||
var m = [];
|
||||
var p0 = points[0];
|
||||
var p1 = points[1];
|
||||
var d = m[0] = slope(p0, p1);
|
||||
var i = 1;
|
||||
|
||||
for (var n = points.length - 1; i < n; i++) {
|
||||
p0 = p1;
|
||||
p1 = points[i + 1];
|
||||
m[i] = (d + (d = slope(p0, p1))) * 0.5;
|
||||
}
|
||||
m[i] = d;
|
||||
|
||||
return m;
|
||||
}
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
{
|
||||
"name": "@yr/monotone-cubic-spline",
|
||||
"description": "Convert a series of points to a monotone cubic spline",
|
||||
"version": "1.0.3",
|
||||
"author": "Alexander Pope <alexander.pope@nrk.no>",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"babel-plugin-syntax-trailing-function-commas": "6.22.0",
|
||||
"babel-plugin-transform-async-generator-functions": "6.24.1",
|
||||
"babel-plugin-transform-async-to-generator": "6.24.1",
|
||||
"babel-plugin-transform-es2015-arrow-functions": "6.22.0",
|
||||
"babel-plugin-transform-es2015-block-scoped-functions": "6.22.0",
|
||||
"babel-plugin-transform-es2015-block-scoping": "6.24.1",
|
||||
"babel-plugin-transform-es2015-classes": "6.24.1",
|
||||
"babel-plugin-transform-es2015-computed-properties": "6.24.1",
|
||||
"babel-plugin-transform-es2015-destructuring": "6.23.0",
|
||||
"babel-plugin-transform-es2015-duplicate-keys": "6.24.1",
|
||||
"babel-plugin-transform-es2015-for-of": "6.23.0",
|
||||
"babel-plugin-transform-es2015-function-name": "6.24.1",
|
||||
"babel-plugin-transform-es2015-literals": "6.22.0",
|
||||
"babel-plugin-transform-es2015-object-super": "6.24.1",
|
||||
"babel-plugin-transform-es2015-parameters": "6.24.1",
|
||||
"babel-plugin-transform-es2015-shorthand-properties": "6.24.1",
|
||||
"babel-plugin-transform-es2015-spread": "6.22.0",
|
||||
"babel-plugin-transform-es2015-sticky-regex": "6.24.1",
|
||||
"babel-plugin-transform-es2015-template-literals": "6.22.0",
|
||||
"babel-plugin-transform-es2015-unicode-regex": "6.24.1",
|
||||
"babel-plugin-transform-es5-property-mutators": "6.24.1",
|
||||
"babel-plugin-transform-exponentiation-operator": "6.24.1",
|
||||
"babel-plugin-transform-object-rest-spread": "6.23.0",
|
||||
"buddy": "6.x.x",
|
||||
"expect.js": "*",
|
||||
"mocha": "*"
|
||||
},
|
||||
"main": "src/index.js",
|
||||
"repository": "https://github.com/YR/monotone-cubic-spline.git",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"prepublish": "buddy build",
|
||||
"test": "NODE_ENV=test mocha test/lib-test.js --reporter spec"
|
||||
},
|
||||
"browser": "index.js",
|
||||
"buddy": {
|
||||
"build": [
|
||||
{
|
||||
"input": "src/",
|
||||
"output": ".",
|
||||
"bundle": false,
|
||||
"version": "es5"
|
||||
},
|
||||
{
|
||||
"input": "src/index.js",
|
||||
"output": "test/lib.js"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
+161
@@ -0,0 +1,161 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Convert a series of points to a monotone cubic spline
|
||||
* Algorithm based on https://github.com/mbostock/d3
|
||||
* https://github.com/yr/monotone-cubic-spline
|
||||
* @copyright Yr
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
const ε = 1e-6;
|
||||
|
||||
module.exports = {
|
||||
/**
|
||||
* Convert 'points' to bezier
|
||||
* @param {Array} points
|
||||
* @returns {Array}
|
||||
*/
|
||||
points(points) {
|
||||
const tgts = tangents(points);
|
||||
|
||||
const p = points[1];
|
||||
const p0 = points[0];
|
||||
const pts = [];
|
||||
const t = tgts[1];
|
||||
const t0 = tgts[0];
|
||||
|
||||
// Add starting 'M' and 'C' points
|
||||
pts.push(p0, [p0[0] + t0[0], p0[1] + t0[1], p[0] - t[0], p[1] - t[1], p[0], p[1]]);
|
||||
|
||||
// Add 'S' points
|
||||
for (let i = 2, n = tgts.length; i < n; i++) {
|
||||
const p = points[i];
|
||||
const t = tgts[i];
|
||||
|
||||
pts.push([p[0] - t[0], p[1] - t[1], p[0], p[1]]);
|
||||
}
|
||||
|
||||
return pts;
|
||||
},
|
||||
|
||||
/**
|
||||
* Slice out a segment of 'points'
|
||||
* @param {Array} points
|
||||
* @param {Number} start
|
||||
* @param {Number} end
|
||||
* @returns {Array}
|
||||
*/
|
||||
slice(points, start, end) {
|
||||
const pts = points.slice(start, end);
|
||||
|
||||
if (start) {
|
||||
// Add additional 'C' points
|
||||
if (pts[1].length < 6) {
|
||||
const n = pts[0].length;
|
||||
|
||||
pts[1] = [pts[0][n - 2] * 2 - pts[0][n - 4], pts[0][n - 1] * 2 - pts[0][n - 3]].concat(pts[1]);
|
||||
}
|
||||
// Remove control points for 'M'
|
||||
pts[0] = pts[0].slice(-2);
|
||||
}
|
||||
|
||||
return pts;
|
||||
},
|
||||
|
||||
/**
|
||||
* Convert 'points' to svg path
|
||||
* @param {Array} points
|
||||
* @returns {String}
|
||||
*/
|
||||
svgPath(points) {
|
||||
let p = '';
|
||||
|
||||
for (let i = 0; i < points.length; i++) {
|
||||
const point = points[i];
|
||||
const n = point.length;
|
||||
|
||||
if (!i) {
|
||||
p += `M${point[n - 2]} ${point[n - 1]}`;
|
||||
} else if (n > 4) {
|
||||
p += `C${point[0]}, ${point[1]}`;
|
||||
p += `, ${point[2]}, ${point[3]}`;
|
||||
p += `, ${point[4]}, ${point[5]}`;
|
||||
} else {
|
||||
p += `S${point[0]}, ${point[1]}`;
|
||||
p += `, ${point[2]}, ${point[3]}`;
|
||||
}
|
||||
}
|
||||
|
||||
return p;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate tangents for 'points'
|
||||
* @param {Array} points
|
||||
* @returns {Array}
|
||||
*/
|
||||
function tangents(points) {
|
||||
const m = finiteDifferences(points);
|
||||
const n = points.length - 1;
|
||||
|
||||
const tgts = [];
|
||||
let a, b, d, s;
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
d = slope(points[i], points[i + 1]);
|
||||
|
||||
if (Math.abs(d) < ε) {
|
||||
m[i] = m[i + 1] = 0;
|
||||
} else {
|
||||
a = m[i] / d;
|
||||
b = m[i + 1] / d;
|
||||
s = a * a + b * b;
|
||||
if (s > 9) {
|
||||
s = d * 3 / Math.sqrt(s);
|
||||
m[i] = s * a;
|
||||
m[i + 1] = s * b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i <= n; i++) {
|
||||
s = (points[Math.min(n, i + 1)][0] - points[Math.max(0, i - 1)][0]) / (6 * (1 + m[i] * m[i]));
|
||||
tgts.push([s || 0, m[i] * s || 0]);
|
||||
}
|
||||
|
||||
return tgts;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute slope from point 'p0' to 'p1'
|
||||
* @param {Array} p0
|
||||
* @param {Array} p1
|
||||
* @returns {Number}
|
||||
*/
|
||||
function slope(p0, p1) {
|
||||
return (p1[1] - p0[1]) / (p1[0] - p0[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute three-point differences for 'points'
|
||||
* @param {Array} points
|
||||
* @returns {Array}
|
||||
*/
|
||||
function finiteDifferences(points) {
|
||||
const m = [];
|
||||
let p0 = points[0];
|
||||
let p1 = points[1];
|
||||
let d = (m[0] = slope(p0, p1));
|
||||
let i = 1;
|
||||
|
||||
for (let n = points.length - 1; i < n; i++) {
|
||||
p0 = p1;
|
||||
p1 = points[i + 1];
|
||||
m[i] = (d + (d = slope(p0, p1))) * 0.5;
|
||||
}
|
||||
m[i] = d;
|
||||
|
||||
return m;
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 ApexCharts
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user