add left layout

.gitignore

@@ -22,4 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.vs/
+.vs/
+.scannerwork/

public/assets/css/default.css

@@ -7,7 +7,7 @@
 .login-box {
   margin: 0 auto;
   /* justify-content: center; */
-  width: 50%;
+  /* width: 50%; */
   min-width: 350px;
 }
 

sonar-project.properties

@@ -0,0 +1,21 @@
+# Required metadata
+sonar.projectKey=pms-react
+sonar.projectName=My React Application
+sonar.projectVersion=1.0.0
+
+# Path to the sources
+sonar.sources=src
+
+# Encoding of the source files
+sonar.sourceEncoding=UTF-8
+
+# Exclusions
+sonar.exclusions=**/node_modules/**,**/*.spec.js,**/*.test.js,src/reportWebVitals.js,src/setupTests.js
+
+# Language-specific properties (for JavaScript/TypeScript)
+sonar.language=js
+sonar.javascript.lcov.reportPaths=coverage/lcov.info
+
+# SonarQube server details (optional if set globally or via command line)
+sonar.host.url=http://sonar.marcoaiot.com
+sonar.token=sqp_ce74dc25bcd924e04b2202252cff26a03afa3707

src/pages/authentication/AboutApp.jsx

@@ -0,0 +1,383 @@
+const AboutApp = ({ onClose }) => {
+  return (
+    <>
+      <div className="col-md">
+        <div className="row">
+          <div className="col  text-center mb-5 text-uppercase">
+            <h2>Why MarcoPMS?</h2>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col">
+            <div class="row">
+              <div class="col-12 col-sm-1 col-lg-2 pt-2 pt-lg-4 mt-2">
+                <i class="bx  bx-chevron-right-circle"></i>
+                <i class="bx  bx-arrow-right-stroke-circle  ps-lg-2"></i>
+                <i class="icon-integrate ps-lg-2"></i>
+              </div>
+              <div class="col-12 col-sm-11 col-lg-10 pt-sm-2 pt-lg-4">
+                <h4 class="ms-sm-2 ms-lg-1">900+ Vendor-Backed Integrations</h4>
+                <p class="ms-sm-2 ms-lg-1">
+                  Datadog offers wide coverage across any technology, with
+                  support and log processing templates provided by Datadog
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="col">
+            <div class="row">
+              <div class="col-12 col-sm-1 col-lg-2 pt-2 pt-lg-4 mt-2">
+                <i class="icon-logs-2 ps-lg-2"></i>
+              </div>
+              <div class="col-12 col-sm-11 col-lg-10 pt-sm-2 pt-lg-4">
+                <h4 class="ms-sm-2 ms-lg-1">Logging Without Limits™</h4>
+                <p class="ms-sm-2 ms-lg-1">
+                  Simple, but powerful techniques for prioritizing logs and
+                  staying in budget–without manual backups or dropping data
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col">
+            <div class="row">
+              <div class="col-12 col-sm-1 col-lg-2 pt-2 pt-lg-4 mt-2">
+                <i class="icon-integrate ps-lg-2"></i>
+              </div>
+              <div class="col-12 col-sm-11 col-lg-10 pt-sm-2 pt-lg-4">
+                <h4 class="ms-sm-2 ms-lg-1">900+ Vendor-Backed Integrations</h4>
+                <p class="ms-sm-2 ms-lg-1">
+                  Datadog offers wide coverage across any technology, with
+                  support and log processing templates provided by Datadog
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="col">
+            <div class="row">
+              <div class="col-12 col-sm-1 col-lg-2 pt-2 pt-lg-4 mt-2">
+                <i class="icon-logs-2 ps-lg-2"></i>
+              </div>
+              <div class="col-12 col-sm-11 col-lg-10 pt-sm-2 pt-lg-4">
+                <h4 class="ms-sm-2 ms-lg-1">Logging Without Limits™</h4>
+                <p class="ms-sm-2 ms-lg-1">
+                  Simple, but powerful techniques for prioritizing logs and
+                  staying in budget–without manual backups or dropping data
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col  mt-10">
+            <h2>Product Features?</h2>
+          </div>
+        </div>
+        <div className="row">
+          <div class="container">
+            <div class="row">
+              <div class="col-lg-5 order-lg-2">
+                <h4>Investigate and Troubleshoot Issues Faster</h4>
+                <div class="mt-2 ">
+                  <ul class="dashed text-start">
+                    <li>
+                      Search, filter, and analyze logs on the fly—no complex
+                      query language required
+                    </li>
+                    <li>
+                      Automatically detect unanticipated outliers, anomalies,
+                      and log errors without the need to read every log file
+                    </li>
+                    <li>
+                      Visualize and explore collected logs using an intuitive,
+                      facet-driven navigation and powerful log analytics
+                    </li>
+                    <li>
+                      Respond to only the most important issues with composite
+                      alerts based on boolean logic
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="col-lg-7">
+                <div>
+                  <video
+                    class="shadow-card-nohover w-100"
+                    preload="none"
+                    playsinline=""
+                    autoplay=""
+                    muted=""
+                    loop=""
+                    poster="https://imgix.datadoghq.com/img/logs-realtime-analytics-2018.png?auto=format"
+                  >
+                    <source
+                      src="https://imgix.datadoghq.com/video/products/log-management/log_patterns_to_analytics-v02.mp4"
+                      type="video/mp4"
+                    />
+                  </video>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="row mt-10">
+          <div class="container">
+            <div class="row">
+              <div class="col-lg-5 order-lg-2">
+                <h4>Investigate and Troubleshoot Issues Faster</h4>
+                <div class="mt-2">
+                  <ul class="dashed text-start">
+                    <li>
+                      Search, filter, and analyze logs on the fly—no complex
+                      query language required
+                    </li>
+                    <li>
+                      Automatically detect unanticipated outliers, anomalies,
+                      and log errors without the need to read every log file
+                    </li>
+                    <li>
+                      Visualize and explore collected logs using an intuitive,
+                      facet-driven navigation and powerful log analytics
+                    </li>
+                    <li>
+                      Respond to only the most important issues with composite
+                      alerts based on boolean logic
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="col-lg-7">
+                <video
+                  class="shadow-card-nohover w-100"
+                  preload="none"
+                  playsinline=""
+                  autoplay=""
+                  muted=""
+                  loop=""
+                  poster="https://imgix.datadoghq.com/img/logs-realtime-analytics-2018.png?auto=format"
+                >
+                  <source
+                    src="https://imgix.datadoghq.com/video/products/log-management/log_patterns_to_analytics-v02.mp4"
+                    type="video/mp4"
+                  />
+                </video>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row mt-10">
+          <div class="container">
+            <div class="row">
+              <div class="col-lg-5 order-lg-2">
+                <h4>Investigate and Troubleshoot Issues Faster</h4>
+                <div class="mt-2">
+                  <ul class="dashed text-start">
+                    <li>
+                      Search, filter, and analyze logs on the fly—no complex
+                      query language required
+                    </li>
+                    <li>
+                      Automatically detect unanticipated outliers, anomalies,
+                      and log errors without the need to read every log file
+                    </li>
+                    <li>
+                      Visualize and explore collected logs using an intuitive,
+                      facet-driven navigation and powerful log analytics
+                    </li>
+                    <li>
+                      Respond to only the most important issues with composite
+                      alerts based on boolean logic
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="col-lg-7">
+                <div>
+                  <video
+                    class="shadow-card-nohover w-100"
+                    preload="none"
+                    playsinline=""
+                    autoplay=""
+                    muted=""
+                    loop=""
+                    poster="https://imgix.datadoghq.com/img/logs-realtime-analytics-2018.png?auto=format"
+                  >
+                    <source
+                      src="https://imgix.datadoghq.com/video/products/log-management/log_patterns_to_analytics-v02.mp4"
+                      type="video/mp4"
+                    />
+                  </video>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row mt-10">
+          <div class="container">
+            <div class="row">
+              <div class="col-lg-5 order-lg-2">
+                <h4>Investigate and Troubleshoot Issues Faster</h4>
+                <div class="mt-2">
+                  <ul class="dashed text-start">
+                    <li>
+                      Search, filter, and analyze logs on the fly—no complex
+                      query language required
+                    </li>
+                    <li>
+                      Automatically detect unanticipated outliers, anomalies,
+                      and log errors without the need to read every log file
+                    </li>
+                    <li>
+                      Visualize and explore collected logs using an intuitive,
+                      facet-driven navigation and powerful log analytics
+                    </li>
+                    <li>
+                      Respond to only the most important issues with composite
+                      alerts based on boolean logic
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="col-lg-7">
+                <div>
+                  <video
+                    class="shadow-card-nohover w-100"
+                    preload="none"
+                    playsinline=""
+                    autoplay=""
+                    muted=""
+                    loop=""
+                    poster="https://imgix.datadoghq.com/img/logs-realtime-analytics-2018.png?auto=format"
+                  >
+                    <source
+                      src="https://imgix.datadoghq.com/video/products/log-management/log_patterns_to_analytics-v02.mp4"
+                      type="video/mp4"
+                    />
+                  </video>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* <div
+          id="carouselExample"
+          className="carousel slide"
+          data-bs-ride="carousel"
+        >
+          <div className="carousel-indicators">
+            <button
+              type="button"
+              data-bs-target="#carouselExample"
+              data-bs-slide-to="0"
+              className=""
+              aria-label="Slide 1"
+            ></button>
+            <button
+              type="button"
+              data-bs-target="#carouselExample"
+              data-bs-slide-to="1"
+              aria-label="Slide 2"
+              className="active"
+              aria-current="true"
+            ></button>
+            <button
+              type="button"
+              data-bs-target="#carouselExample"
+              data-bs-slide-to="2"
+              aria-label="Slide 3"
+              className=""
+            ></button>
+          </div>
+          <div className="carousel-inner">
+            <div className="carousel-item">
+              <img
+                className="d-block w-100"
+                src="/img/hero/03.jpg"
+                style={{ opacity: "80%" }}
+                alt="First slide"
+              />
+              <div className="carousel-caption d-none d-md-block">
+                <h3>First slide</h3>
+                <p>
+                  Eos mutat malis maluisset et, agam ancillae quo te, in vim
+                  congue pertinacia.
+                </p>
+              </div>
+            </div>
+            <div className="carousel-item active">
+              <img
+                className="d-block w-100"
+                src="/img/hero/04.jpg"
+                alt="Second slide"
+                style={{ opacity: "80%" }}
+              />
+              <div className="carousel-caption d-none d-md-block">
+                <h3>Second slide</h3>
+                <p>In numquam omittam sea.</p>
+              </div>
+            </div>
+            <div className="carousel-item">
+              <img
+                className="d-block w-100"
+                src="/img/hero/01.jpg"
+                alt="Third slide"
+                style={{ opacity: "80%" }}
+              />
+              <div className="carousel-caption d-none d-md-block">
+                <h3>Third slide</h3>
+                <p>
+                  Lorem ipsum dolor sit amet, virtute consequat ea qui, minim
+                  graeco mel no.
+                </p>
+              </div>
+            </div>
+            <div className="carousel-item">
+              <img
+                className="d-block w-100"
+                src="/img/hero/02.jpg"
+                alt="Third slide"
+                style={{ opacity: "80%" }}
+              />
+              <div className="carousel-dark carousel-caption d-none d-md-block">
+                <h3>Third slide</h3>
+                <p>
+                  Lorem ipsum dolor sit amet, virtute consequat ea qui, minim
+                  graeco mel no.
+                </p>
+              </div>
+            </div>
+          </div>
+          <a
+            className="carousel-control-prev"
+            href="#carouselExample"
+            role="button"
+            data-bs-slide="prev"
+          >
+            <span
+              className="carousel-control-prev-icon"
+              aria-hidden="true"
+            ></span>
+            <span className="visually-hidden">Previous</span>
+          </a>
+          <a
+            className="carousel-control-next"
+            href="#carouselExample"
+            role="button"
+            data-bs-slide="next"
+          >
+            <span
+              className="carousel-control-next-icon"
+              aria-hidden="true"
+            ></span>
+            <span className="visually-hidden">Next</span>
+          </a>
+        </div> */}
+      </div>
+    </>
+  );
+};
+
+export default AboutApp;

src/pages/authentication/AuthWrapper.jsx

@@ -1,13 +1,28 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import "./page-auth.css";
+import AboutApp from "./AboutApp";
+// import { hero1 } from "/public/img/backgrounds/18.jpg";
 export const AuthWrapper = ({ children }) => {
   return (
-    <div className="container-xxl">
+    <>
-      <div className="authentication-wrapper authentication-basic container-p-y">
+      <div className="authentication-wrapper authentication-cover">
-        <div className="authentication-inner">
+        <div className="authentication-inner row m-0">
-          <div className="card">
+          {/* <!-- /Left Text --> */}
-            <div className="card-body">
+          <div className="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
+            <div className="w-100 d-flex justify-content-center ">
+              <AboutApp></AboutApp>
+            </div>
+          </div>
+          {/* <!-- /Left Text --> */}
+
+          {/* <!-- Login --> */}
+          <div className="d-flex col-12 col-lg-5 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
+            <div
+              className="w-px-400 mx-auto mt-12 pt-5"
+              style={{ position: "fixed", top: "0" }}
+            >
+              {" "}
               <div className="app-brand justify-content-center">
                 <Link
                   aria-label="Go to Home Page"
@@ -28,6 +43,6 @@ export const AuthWrapper = ({ children }) => {
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };

src/pages/authentication/LoginPage.jsx

@@ -19,13 +19,13 @@ const LoginPage = () => {
 
   const loginSchema = IsLoginWithOTP
     ? z.object({
-      username: z.string().email({ message: "Valid email required" }),
+        username: z.string().email({ message: "Valid email required" }),
-    })
+      })
     : z.object({
-      username: z.string().email({ message: "Valid email required" }),
+        username: z.string().email({ message: "Valid email required" }),
-      password: z.string().min(1, { message: "Password required" }),
+        password: z.string().min(1, { message: "Password required" }),
-      rememberMe: z.boolean(),
+        rememberMe: z.boolean(),
-    });
+      });
 
   const {
     register,
@@ -151,7 +151,6 @@ const LoginPage = () => {
               )}
             </div>
 
-
             <div className="mb-3 d-flex justify-content-between">
               <div className="form-check d-flex">
                 <input