From 407d6df4174254ac35d4c47de48964f24cd247c1 Mon Sep 17 00:00:00 2001
From: Karan <karansalviwork@gmail.com>
Date: Wed, 26 Mar 2025 22:50:05 +0530
Subject: [PATCH] feat:Added monitoring charts

---
 Frontend/src/components/Container.jsx   |   2 +-
 Frontend/src/components/Navbar2.jsx     |   4 -
 Frontend/src/pages/Login/LoginPage.jsx  | 175 ++++++++---------
 Frontend/src/pages/Login/SignupPage.jsx | 249 ++++++++++++------------
 4 files changed, 212 insertions(+), 218 deletions(-)

diff --git a/Frontend/src/components/Container.jsx b/Frontend/src/components/Container.jsx
index a2df22e..9aae272 100644
--- a/Frontend/src/components/Container.jsx
+++ b/Frontend/src/components/Container.jsx
@@ -3,7 +3,7 @@ import React from "react";
 const Container = ({ children }) => {
   return (
     <>
-      <div className="w-full h-auto">{children}</div>
+      <div className="w-full max-h-screen">{children}</div>
     </>
   );
 };
diff --git a/Frontend/src/components/Navbar2.jsx b/Frontend/src/components/Navbar2.jsx
index 40c4621..74fb48c 100644
--- a/Frontend/src/components/Navbar2.jsx
+++ b/Frontend/src/components/Navbar2.jsx
@@ -5,8 +5,6 @@ import { Link } from "react-router-dom";
 const Navbar2 = () => {
   const user = useSelector((store) => store.user);
 
-  
-
   const [isLoggedIn, setLoggedIn] = useState(false);
 
   useEffect(() => {
@@ -23,8 +21,6 @@ const Navbar2 = () => {
 
     const user = await responce.json();
 
-  
-
     dispatch(userSliceActions.addUser(user.data));
   };
   return (
diff --git a/Frontend/src/pages/Login/LoginPage.jsx b/Frontend/src/pages/Login/LoginPage.jsx
index 9cf3644..c13457a 100644
--- a/Frontend/src/pages/Login/LoginPage.jsx
+++ b/Frontend/src/pages/Login/LoginPage.jsx
@@ -28,8 +28,6 @@ const LoginPage = () => {
 
     const user = await responce.json();
 
-   
-
     dispatch(userSliceActions.addUser(user.data));
 
     emailElement.current.value = "";
@@ -40,97 +38,94 @@ const LoginPage = () => {
     }
   };
 
-
   return (
-    <section className="bg-[url(/images/loginBG.png)] bg-cover font-sans  flex flex-col justify-center md:p-5 ">
-      <div className="container mx-auto ">
-        <div className="flex justify-between pt-24">
-          <div className="   rounded-lg shadow-md ">
-            <div className="flex flex-col items-center justify-center h-full ">
-              <h1 className="text-6xl  font-bold text-white mb-4 md:text-6xl lg:text-9xl  ml-8">
-                Welcome Back!
-              </h1>
+    <section className="bg-[url(/images/loginBG.png)] bg-cover font-sans  flex flex-col justify-center md:p-5  w-full min-h-screen max-h-screen">
+      <div className="flex justify-between items-center h-full">
+        <div className="   rounded-lg shadow-md ">
+          <div className="flex flex-col items-center justify-center h-full ">
+            <h1 className="text-6xl  font-bold text-white mb-4 md:text-6xl lg:text-9xl  ml-8">
+              Welcome Back!
+            </h1>
+          </div>
+        </div>
+        <div className=" backdrop-blur-md bg-gradient-to-tr from-slate-300/10 to-slate-200/30 rounded-lg shadow-md lg:p-36">
+          <h1 className="text-2xl font-bold text-gray-50 mb-4">Login</h1>
+          <p className="text-gray-100 mb-6">
+            Welcome back! Please login to your account.
+          </p>
+          <form className="space-y-6" onSubmit={handleLogin}>
+            <div>
+              <label
+                for="username"
+                className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
+              >
+                Email
+              </label>
+              <input
+                type="email"
+                id="username"
+                ref={emailElement}
+                className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="username@gmail.com"
+                required
+              />
             </div>
-          </div>
-          <div className=" backdrop-blur-md bg-gradient-to-tr from-slate-300/10 to-slate-200/30 rounded-lg shadow-md lg:p-36">
-            <h1 className="text-2xl font-bold text-gray-50 mb-4">Login</h1>
-            <p className="text-gray-100 mb-6">
-              Welcome back! Please login to your account.
+            <div>
+              <label
+                for="password"
+                className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
+              >
+                Password
+              </label>
+              <input
+                type="password"
+                id="password"
+                ref={passwordElement}
+                className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="********"
+                required
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <input
+                  id="remember_me"
+                  type="checkbox"
+                  value=""
+                  className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                />
+                <label
+                  for="remember_me"
+                  className="ml-2 text-sm font-medium text-gray-100 dark:text-gray-300"
+                >
+                  Remember Me
+                </label>
+              </div>
+              <Link
+                to={"/user/forgetpassword"}
+                className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+              >
+                Forgot Password?
+              </Link>
+            </div>
+            <div className=" flex justify-center">
+              <button
+                type="submit"
+                className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg   hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+              >
+                Login
+              </button>
+            </div>
+            <p className="text-gray-100 text-center mt-4">
+              New User?{" "}
+              <Link
+                to={"/user/signup"}
+                className="text-blue-600 hover:underline"
+              >
+                Signup
+              </Link>
             </p>
-            <form className="space-y-6" onSubmit={handleLogin}>
-              <div>
-                <label
-                  for="username"
-                  className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
-                >
-                  Email
-                </label>
-                <input
-                  type="email"
-                  id="username"
-                  ref={emailElement}
-                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="username@gmail.com"
-                  required
-                />
-              </div>
-              <div>
-                <label
-                  for="password"
-                  className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
-                >
-                  Password
-                </label>
-                <input
-                  type="password"
-                  id="password"
-                  ref={passwordElement}
-                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="********"
-                  required
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center">
-                  <input
-                    id="remember_me"
-                    type="checkbox"
-                    value=""
-                    className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <label
-                    for="remember_me"
-                    className="ml-2 text-sm font-medium text-gray-100 dark:text-gray-300"
-                  >
-                    Remember Me
-                  </label>
-                </div>
-                <Link
-                  to={"/user/forgetpassword"}
-                  className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-                >
-                  Forgot Password?
-                </Link>
-              </div>
-              <div className=" flex justify-center">
-                <button
-                  type="submit"
-                  className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg   hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                >
-                  Login
-                </button>
-              </div>
-              <p className="text-gray-100 text-center mt-4">
-                New User?{" "}
-                <Link
-                  to={"/user/signup"}
-                  className="text-blue-600 hover:underline"
-                >
-                  Signup
-                </Link>
-              </p>
-            </form>
-          </div>
+          </form>
         </div>
       </div>
     </section>
diff --git a/Frontend/src/pages/Login/SignupPage.jsx b/Frontend/src/pages/Login/SignupPage.jsx
index 5f5d760..f2cd7d1 100644
--- a/Frontend/src/pages/Login/SignupPage.jsx
+++ b/Frontend/src/pages/Login/SignupPage.jsx
@@ -33,8 +33,6 @@ const SignupPage = () => {
     });
     const data = await responce.json();
 
-    
-
     firstNameElement.current.value = "";
     lastNameElement.current.value = "";
     emailElement.current.value = "";
@@ -46,141 +44,147 @@ const SignupPage = () => {
   };
 
   return (
-    <section className="bg-[url(https://i.pinimg.com/736x/6c/d2/cc/6cd2cc05a7e464a78bdf1124b4ad30f1.jpg)] bg-cover font-sans flex flex-col justify-center md:p-5 ">
-      <div className="container mx-auto p-4 pt-24 sm:mt-32 md:mt-0">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <div className="bg-gradient-to-br from-purple-300 to-pink-200 rounded-lg shadow-md  min-h-40 object-center md:hidden">
-            <div className="flex flex-col items-center justify-center h-full relative">
-              <img
-                src="/images/background1.jpg"
-                alt=""
-                className="absolute order-3 w-full h-full"
-              />
-              <h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl relative ml-8">
-                Welcome to Crop Compass
-              </h1>
-            </div>
-          </div>
-          <div className="backdrop-blur-md bg-gradient-to-tr from-slate-300/10 to-slate-200/30 rounded-lg shadow-md lg:p-36">
-            <h1 className="text-2xl font-bold text-gray-50 mb-4">
-              Register Your account
+    <section className="bg-[url(https://i.pinimg.com/736x/6c/d2/cc/6cd2cc05a7e464a78bdf1124b4ad30f1.jpg)] bg-cover font-sans flex flex-col justify-center min-h-screen max-h-screen">
+      <div className="flex justify-between items-center w-full h-full p-5">
+        {/* <div className="bg-gradient-to-br from-purple-300 to-pink-200 rounded-lg shadow-md  min-h-40 object-center md:hidden">
+          <div className="flex flex-col items-center justify-center h-full relative">
+            <img
+              src="/images/background1.jpg"
+              alt=""
+              className="absolute order-3 w-full h-full"
+            />
+            <h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl relative ml-8">
+              Welcome to Crop Compass
             </h1>
-            <p className="text-gray-100">Welcome to Crop Compass.</p>
-            <p className="text-gray-100 mb-6">
-              Please register your new account.
-            </p>
-            <form
-              action="#"
-              className="space-y-6"
-              onSubmit={handleRegisteration}
-            >
-              <div className="flex flex-col gap-5 sm:flex-row">
-                <div className="w-full">
-                  <label
-                    htmlFor="username"
-                    className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
-                  >
-                    First Name
-                  </label>
-                  <input
-                    type="text"
-                    id="firstName"
-                    ref={firstNameElement}
-                    className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                    placeholder="John"
-                    required
-                  />
-                </div>
-                <div className="w-full">
-                  <label
-                    htmlFor="username"
-                    className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
-                  >
-                    Last Name
-                  </label>
-                  <input
-                    type="text"
-                    id="LastName"
-                    ref={lastNameElement}
-                    className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                    placeholder="Doe"
-                    required
-                  />
-                </div>
-              </div>
-
-              <div>
+          </div>
+        </div> */}
+        <div className="backdrop-blur-md bg-gradient-to-tr from-slate-300/10 to-slate-200/30 rounded-lg shadow-md lg:p-36 h-[95vh]">
+          <h1 className="text-2xl font-bold text-gray-50 mb-4">
+            Register Your account
+          </h1>
+          <p className="text-gray-100">Welcome to Crop Compass.</p>
+          <p className="text-gray-100 mb-6">
+            Please register your new account.
+          </p>
+          <form action="#" className="space-y-6" onSubmit={handleRegisteration}>
+            <div className="flex flex-col gap-5 sm:flex-row">
+              <div className="w-full">
                 <label
                   htmlFor="username"
                   className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
                 >
-                  Email
+                  First Name
                 </label>
                 <input
-                  type="email"
-                  id="email"
-                  ref={emailElement}
-                  className="bg-gray-50 border border-gray-300 text-black text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="user@mail.com"
-                  required
-                />
-              </div>
-              <div>
-                <label
-                  htmlFor="password"
-                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-                >
-                  Password
-                </label>
-                <input
-                  type="password"
-                  id="password"
-                  ref={passwordElement}
+                  type="text"
+                  id="firstName"
+                  ref={firstNameElement}
                   className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="At least 6 unique Characters.. "
+                  placeholder="John"
                   required
                 />
               </div>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center">
-                  <input
-                    id="remember_me"
-                    type="checkbox"
-                    value=""
-                    className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <label
-                    htmlFor="remember_me"
-                    className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-                  >
-                    Remember Me
-                  </label>
-                </div>
-                <a
-                  href="#"
-                  className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-                ></a>
-              </div>
-              <div className=" flex justify-center">
-                <button
-                  type="submit"
-                  className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg   hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+              <div className="w-full">
+                <label
+                  htmlFor="username"
+                  className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
                 >
-                  Register your Account
-                </button>
+                  Last Name
+                </label>
+                <input
+                  type="text"
+                  id="LastName"
+                  ref={lastNameElement}
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  placeholder="Doe"
+                  required
+                />
               </div>
-              <p className="text-gray-600 text-center mt-4">
-                Already have an Account ?{" "}
-                <Link
-                  to={"/user/login"}
-                  className="text-blue-600 hover:underline"
+            </div>
+
+            <div>
+              <label
+                htmlFor="username"
+                className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
+              >
+                Email
+              </label>
+              <input
+                type="email"
+                id="email"
+                ref={emailElement}
+                className="bg-gray-50 border border-gray-300 text-black text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="user@mail.com"
+                required
+              />
+            </div>
+            <div>
+              <label
+                htmlFor="password"
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+              >
+                Password
+              </label>
+              <input
+                type="password"
+                id="password"
+                ref={passwordElement}
+                className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="At least 6 unique Characters.. "
+                required
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <input
+                  id="remember_me"
+                  type="checkbox"
+                  value=""
+                  className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                />
+                <label
+                  htmlFor="remember_me"
+                  className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
                 >
-                  Login
-                </Link>
-              </p>
-            </form>
+                  Remember Me
+                </label>
+              </div>
+              <a
+                href="#"
+                className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+              ></a>
+            </div>
+            <div className=" flex justify-center">
+              <button
+                type="submit"
+                className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg   hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+              >
+                Register your Account
+              </button>
+            </div>
+            <p className="text-gray-600 text-center mt-4">
+              Already have an Account ?{" "}
+              <Link
+                to={"/user/login"}
+                className="text-blue-600 hover:underline"
+              >
+                Login
+              </Link>
+            </p>
+          </form>
+        </div>
+
+        <div className="rounded-lg shadow-md text-center w-auto">
+          <div className="flex flex-col items-center justify-center h-full ">
+            <h1 className="text-6xl  font-bold text-white mb-4 md:text-6xl lg:text-9xl  ml-8">
+              Start your Journey
+              <br />
+              with <br />
+              Crop Compass
+            </h1>
           </div>
-          {/* <div className=" backdrop-blur-sm  rounded-lg shadow-md md:block">
+        </div>
+        {/* <div className=" backdrop-blur-sm  rounded-lg shadow-md md:block">
             <div className="flex flex-col items-center justify-center h-full relative text-center">
               <img
                 src="/images/background1.jpg"
@@ -192,7 +196,6 @@ const SignupPage = () => {
               </h1>
             </div>
           </div> */}
-        </div>
       </div>
     </section>
   );