Registry switch

.env

@@ -7,9 +7,11 @@ REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"
 #REACT_APP_APPSITE="http://localhost:7012"
 
 
-REACT_APP_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+# REACT_APP_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
-REACT_APP_USERS_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
+# REACT_APP_USERS_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
-# REACT_APP_PASSWORD_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser/resetpass"
+
+REACT_APP_AUX_ENDPOINT="https://api.myfit.ai/en/desktop/api/v2/myfit"
+REACT_APP_USERS_ENDPOINT="https://api.myfit.ai/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=15
 
@@ -18,3 +20,8 @@ REACT_APP_RESOURCES="Resources"
 REACT_APP_HISTORY="History"
 
 REACT_APP_TRACKING_SHOW=1
+REACT_APP_HISTORY_SHOW=1
+
+REACT_APP_RESOURCES_SHOW=1
+
+REACT_APP_VERSION_NO="DEF-CONFIG"

.env.development

@@ -7,8 +7,8 @@ REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"
 #REACT_APP_APPSITE="http://localhost:7012"
 
 
-REACT_APP_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+REACT_APP_AUX_ENDPOINT="https://devapi.myfit.ai/en/desktop/api/v2/myfit"
-REACT_APP_USERS_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
+REACT_APP_USERS_ENDPOINT="https://devapi.myfit.ai/en/desktop/api/v2/myfituser"
 # REACT_APP_PASSWORD_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser/resetpass"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=15
@@ -18,3 +18,8 @@ REACT_APP_RESOURCES="Resources"
 REACT_APP_HISTORY="History"
 
 REACT_APP_TRACKING_SHOW=1
+REACT_APP_HISTORY_SHOW=1
+
+REACT_APP_RESOURCES_SHOW=1
+
+REACT_APP_VERSION_NO="DEV-CONFIG"

.env.production

@@ -6,10 +6,10 @@ REACT_APP_TWITTER="https://twitter.com/fluxtra"
 REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"
 #REACT_APP_APPSITE="http://localhost:7012"
 
+REACT_APP_AUX_ENDPOINT="https://api.myfit.ai/en/desktop/api/v2/myfit"
+REACT_APP_USERS_ENDPOINT="https://api.myfit.ai/en/desktop/api/v2/myfituser"
 
-REACT_APP_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+# REACT_APP_PASSWORD_ENDPOINT="https://api.mermsemr.com/en/desktop/api/v2/myfituser/resetpass"
-REACT_APP_USERS_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
-# REACT_APP_PASSWORD_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser/resetpass"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=15
 
@@ -18,3 +18,8 @@ REACT_APP_RESOURCES="Resources"
 REACT_APP_HISTORY="History"
 
 REACT_APP_TRACKING_SHOW=0
+REACT_APP_HISTORY_SHOW=0
+
+REACT_APP_RESOURCES_SHOW=0
+
+REACT_APP_VERSION_NO="PROD-CONFIG"

.gitlab-ci.yml

@@ -0,0 +1,23 @@
+build-job:
+  stage: build
+  script:
+    - echo "Hello, $GITLAB_USER_LOGIN!"
+
+test-job1:
+  stage: test
+  script:
+    - echo "This job tests something"
+
+test-job2:
+  stage: test
+  script:
+    - echo "This job tests something, but takes more time than test-job1."
+    - echo "After the echo commands complete, it runs the sleep command for 20 seconds"
+    - echo "which simulates a test that runs 20 seconds longer than test-job1"
+    - sleep 20
+
+deploy-prod:
+  stage: deploy
+  script:
+    - echo "This job deploys something from the $CI_COMMIT_BRANCH branch."
+  environment: production

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
   users-myfit:
-    image: registry.myfit.ai/users-myfit:latest
+    image: registry.chiefsoft.net/users-myfit:latest
     build:
       context: .
       dockerfile: docker/Dockerfile
@@ -17,17 +17,10 @@ services:
       - ./src/:/usr/src/app/src
       - ./vendors/:/usr/src/app/vendors
     extra_hosts:
-      - backend.wrenchboard.api.live:10.10.33.15
+      - api.myfit.ai:10.10.33.15
-      - backend.wrenchboard.api.test:10.10.33.15
+      - devapi.myfit.ai:10.10.33.15
-      # #- backend.wrenchboard.api.live:172.31.4.27
-      # #- backend.wrenchboard.api.test:10.20.30.27
-      - apigateway.wrenchboard.app.dev.fluxtra.net:10.20.30.19
-      - apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
     environment:
       - CHOKIDAR_USEPOLLING=true
-   # volumes:
-   #   - ./:/app
-   #   - /app/node_modules
     tty: true
     stdin_open: true
     # working_dir: /app

src/components/AuthPages/AuthLayout.jsx

@@ -1,37 +1,34 @@
 import React from "react";
 import loginThumb from "../../assets/images/auth-thumb.svg";
-import logo from "../../assets/images/light-logo.png"; //logo-1.svg";
+import logo from "../../assets/images/light-logo.png";
 
+/**
+ * Renders a login layout with a slogan and child components.
+ * The layout adjusts its height based on the screen height.
+ * @returns {React.Component} The rendered login layout.
+ */
 export default function LoginLayout({ slogan, children }) {
-  const checkScreenHeight = window.screen.height;
+  const screen = window.screen.height <= 950 ? "h-screen" : "h-screen";
-  let screen = "";
+
-  if (checkScreenHeight <= 950) {
-    screen = "h-screen";
-    // screen = "h-[950px]";
-  } else {
-    screen = "h-screen";
-  }
   return (
     <div className="layout-wrapper">
       <div className={`main-wrapper w-full ${screen}`}>
         <div className="flex w-full h-full">
           <div className="xl:flex hidden w-1/2 h-full p-[70px]  flex-col justify-between primary-home">
-          {/*
+            {/* <div className="logo">
-           <div className="logo">
               <img src={logo} alt="logo" />
-            </div>
+            </div> */}
-          */} 
             <div className="thumbnail flex justify-center">
-             {/*  <img src={loginThumb} alt="login-thumb" />*/}
+              {/* <img src={loginThumb} alt="login-thumb" /> */}
             </div>
             <div className="article w-[600px]">
-              <p className="text-[60px] font-bold leading-[72px] text-white">
+              <p className="text-[60px] font-bold leading-[72px] text-[#a03774]">
                 {slogan} 
               </p>
             </div>
           </div>
           <div className="flex-1 flex justify-center items-center">
-            {children && children}
+            {children}
           </div>
         </div>
       </div>

src/components/AuthPages/Login/index.jsx

@@ -73,7 +73,7 @@ export default function Login() {
         <div className="content-wrapper w-full  flex justify-center items-center xl:bg-white dark:bg-dark-white   2xl:w-[828px] xl:w-[500px] 2xl:h-[818px] xl:h-[600px] rounded-xl 2xl:px-[164px] xl:px-[56px] sm:px-7 px-5 ">
           <div className="w-full">
             <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-              <h1 className="text-5xl font-bold leading-[74px]   text-dark-gray dark:text-white">
+              <h1 className="text-5xl font-bold leading-[74px] text-dark-gray dark:text-white">
                 Log In
               </h1>
               <div className="shape mb-[10px]">
@@ -170,6 +170,9 @@ export default function Login() {
                   </a>
                 </p>
               </div>
+              <div>
+              {process.env.REACT_APP_VERSION_NO}
+              </div>
             </div>
           </div>
         </div>

src/components/Calendar/CalendarTable.jsx

@@ -21,11 +21,11 @@ export default function CalendarTable({ className }) {
   const [value, onChange] = useState(new Date()); // value of calendar date and onchange handler for calendar
   const [remDate, setRemDate] = useState([]) // for holding dates on reminders to display on calendar
 
-  const reminderApi = new usersService(); // instantiating the API SERVICE
+  const calenderApi = new usersService(); // instantiating the API SERVICE
 
   const getUserReminders = async () => {
     try {
-      const res = await reminderApi.getUserReminders();
+      const res = await calenderApi.getUserReminders();
       if(res.status == 200 && res.data.status > 0){
         setRemDate(res.data.reminders)
         setIsLoading(false)
@@ -117,32 +117,46 @@ export default function CalendarTable({ className }) {
   );
 }
 
-const ReminderThumbnail = ({reminders}) => {
+/**
+ * Renders a list of reminder thumbnails.
+ * Each thumbnail displays the reminder's category image, description, and start date.
+ 
+ * Each object should have the following properties:
+ * - category (string): The category of the reminder.
+ * - description (string): The description of the reminder.
+ * - start_date (string): The start date of the reminder.
+ */
+const ReminderThumbnail = ({ reminders }) => {
+  const getThumbnailImage = (category) => {
+    if (!category) {
+      return dataImage1;
+    }
+    return localImgLoad(`images/${category}.png`);
+  };
+
   return (
     <div className="w-full h-full overflow-y-auto overflow-x-hidden pb-1">
       {reminders.map((reminder, index) => (
         <div key={index} className="flex space-x-2 items-center bg-slate-300 hover:bg-white mb-1 p-1 transition-all duration-500">
-        <div className="w-[30px] h-[30px] rounded-full overflow-hidden flex justify-center items-center">
+          <div className="w-[30px] h-[30px] rounded-full overflow-hidden flex justify-center items-center">
-          <img
+            <img
-            src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
+              src={getThumbnailImage(reminder.category)}
-            alt="data"
+              alt="data"
-            className="w-full h-full"
+              className="w-full h-full"
-          />
+            />
-        </div>
+          </div>
-        <div className="flex flex-col justify-start items-start">
+          <div className="flex flex-col justify-start items-start">
-          <h1 className="font-bold text-[10px] text-dark-gray dark:text-white whitespace-nowrap">
+            <h1 className="font-bold text-[10px] text-dark-gray dark:text-white whitespace-nowrap">
-          {reminder.description?.substring(0, 20)+ ' ...'}
+              {reminder.description?.substring(0, 20) + ' ...'}
-          </h1>
+            </h1>
-          <span className="text-[8px] text-thin-light-gray">
+            <span className="text-[8px] text-thin-light-gray">
-          
+              Added <span className="text-purple">
-            Added <span className="text-purple">
+                {reminder.start_date.split(' ')[0]}
-              {reminder.start_date.split(' ')[0]}
               </span>
-          </span>
+            </span>
+          </div>
         </div>
-      </div>
       ))}
-
     </div>
-  )
+  );
-}
+};

src/components/Partials/MobileSideBar.jsx

@@ -1,7 +1,6 @@
 import React, { useContext } from "react";
 import { NavLink } from "react-router-dom";
-import logo from "../../assets/images/myfit-logo-2.png"; //logo-2.svg";
+import { default as logo, default as logo3 } from "../../assets/images/myfit-logo-2.png"; //logo-2.svg";
-import logo3 from "../../assets/images/myfit-logo-2.png"; //logo-3.svg";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
@@ -130,20 +129,9 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
                   </span>
                 </NavLink>
               </li>
-              <li className="item group">
+              
-                <NavLink
+              {(process.env.REACT_APP_HISTORY_SHOW == true) ? 
-                  to="/resources"
+              (<li className="item group">
-                  className="nav-item flex items-center justify-start space-x-3.5"
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                    <Icons name="star" />
-                  </span>
-                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                    {process.env.REACT_APP_RESOURCES}
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
                 <NavLink
                   to="/history"
                   className="nav-item flex items-center justify-start space-x-3.5"
@@ -152,10 +140,11 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
                     <Icons name="history" />
                   </span>
                   <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                    History
+                  {process.env.REACT_APP_HISTORY}
                   </span>
                 </NavLink>
-              </li>
+              </li>)
+              : ''}
             </ul>
           </div>
         </div>

src/components/Partials/Sidebar.jsx

@@ -193,26 +193,31 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   </span>
                 </NavLink>
               </li>
-              <li className="item group">
+
-                <NavLink
+               {process.env.REACT_APP_RESOURCES_SHOW == true ?
-                  to="/resources"
+                <li className="item group">
-                  className={`nav-item flex items-center ${
+                  <NavLink
-                    ((navData) => (navData.isActive ? "active" : ""),
+                    to="/resources"
-                    sidebar ? "justify-start space-x-3.5" : "justify-center")
+                    className={`nav-item flex items-center ${
-                  }`}
+                      ((navData) => (navData.isActive ? "active" : ""),
-                >
+                      sidebar ? "justify-start space-x-3.5" : "justify-center")
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
-                    <Icons name="resources" />
-                  </span>
-                  <span
-                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                      sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
-                    {process.env.REACT_APP_RESOURCES}
+                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
-                  </span>
+                      <Icons name="resources" />
-                </NavLink>
+                    </span>
-              </li>
+                    <span
+                      className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                        sidebar ? "active flex-1" : "w-0"
+                      }`}
+                    >
+                      {process.env.REACT_APP_RESOURCES}
+                    </span>
+                  </NavLink>
+                </li>
+               :
+               <></>
+               }
           
               <li className="item group">
                 <NavLink
@@ -230,7 +235,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
-                    History
+                    {process.env.REACT_APP_HISTORY}
                   </span>
                 </NavLink>
               </li>

src/index.css

@@ -15,11 +15,13 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Italic.ttf");
 }
+
 /* regular Weight */
 @font-face {
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Regular.ttf");
 }
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -28,6 +30,7 @@
   min-height: 0;
   min-width: 0;
 }
+
 :root {
   --toastify-color-success: #f539f8;
 }
@@ -38,18 +41,20 @@ body {
   background-repeat: no-repeat;
   background-size: cover;
 }
+
 html {
   font-family: "Product Sans";
 }
+
 .primary-gradient {
   background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%);
- /* background-image: url("./assets/images/left-myft.jpg");
+  /* background-image: url("./assets/images/left-myft.jpg");
   background-repeat: no-repeat;
   background-size: cover; */
 }
 
 .dark .dark-primary-gradient {
-  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(188,73,190,1) 100%);
+  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(188, 73, 190, 1) 100%);
 }
 
 .primary-home {
@@ -57,12 +62,25 @@ html {
   background-image: url("./assets/images/left-myft.jpg");
   background-repeat: no-repeat;
   background-size: cover;
+  position: relative;
+}
+
+.primary-home::before {
+  content: "";
+  position: absolute;
+  width: 55px;
+  height: 100%;
+  top: 0;
+  right: -30px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
 }
 
 .btn-shine {
   position: relative;
   overflow: hidden;
 }
+
 .btn-shine:after {
   content: "";
   z-index: 1;
@@ -78,6 +96,7 @@ html {
   transition: transform 0.45s ease-in-out;
   transform: translate3d(500%, 0, 0) rotate(35deg);
 }
+
 .secondary-gradient::before {
   content: "";
   display: block;
@@ -89,40 +108,52 @@ html {
   background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
   opacity: 30%;
 }
+
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
 /* Firefox */
 input[type="number"] {
   -moz-appearance: textfield;
 }
+
 .default-border-bottom {
   border-bottom: 1px solid #d3d2fe;
 }
+
 .overflow-style-none::-webkit-scrollbar {
   display: none;
 }
+
 /* Hide scrollbar for IE, Edge and Firefox */
 .overflow-style-none {
-  -ms-overflow-style: none; /* IE and Edge */
+  -ms-overflow-style: none;
-  scrollbar-width: none; /* Firefox */
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
+
 .btn-gradient {
   background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
 }
+
 .btn-gradient:hover {
   background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
 }
+
 .text-26 {
   font-size: 26px;
   line-height: 31.54px;
 }
+
 .text-18 {
   font-size: 18px;
 }
+
 .section-shadow {
   box-shadow: 0px 9px 95px 0px #0000000d;
 }
@@ -132,6 +163,7 @@ input[type="number"] {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
 .border-gradient {
   border: 1px solid transparent;
   background: linear-gradient(to right, white, white),
@@ -139,6 +171,7 @@ input[type="number"] {
   background-clip: padding-box, border-box;
   background-origin: padding-box, border-box;
 }
+
 .signup.btn-loader {
   border: 3px solid hsla(180, 4%, 82%, 0.2);
   border-top-color: #ffffff;
@@ -153,6 +186,7 @@ input[type="number"] {
     transform: rotate(360deg);
   }
 }
+
 /* TODO: =================================default end================================ */
 /* TODO: =================================update password================================ */
 .content-wrapper.thankyou-section {
@@ -162,11 +196,13 @@ input[type="number"] {
   transform: scale(0);
   visibility: hidden;
 }
+
 .content-wrapper.thankyou-section.active {
   transition: all 0.5s ease-in-out;
   transform: scale(1);
   visibility: visible;
 }
+
 /* #otp {
   caret-color: transparent;
 }
@@ -187,11 +223,13 @@ input[type="number"] {
   transform: scale(1);
   width: 100%;
 }
+
 .sidebar-logo {
   transform: scale(0);
   width: 0;
   transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
 }
+
 .menu-setting-items .items .item .item-content {
   transform: scale(0);
   transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
@@ -201,30 +239,35 @@ input[type="number"] {
   transform: scale(1);
   transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
 }
+
 .menu-setting-items .heading.active {
   opacity: 100;
   transform: scale(1);
   width: 100%;
   transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
 }
+
 .menu-setting-items .heading {
   opacity: 0;
   transform: scale(0);
   width: 0;
   transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
 }
+
 .signout-btn .signout-btn-content.active {
   opacity: 100;
   transform: scale(1);
   width: 100%;
   transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
 }
+
 .signout-btn .signout-btn-content {
   opacity: 0;
   transform: scale(0);
   width: 0;
   transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79);
 }
+
 .balance-dropdown::before {
   content: "";
   display: block;
@@ -237,6 +280,7 @@ input[type="number"] {
   top: -28px;
   left: 50%;
 }
+
 .notification-dropdown::before {
   content: "";
   display: block;
@@ -249,6 +293,7 @@ input[type="number"] {
   top: -28px;
   left: 74%;
 }
+
 .profile-dropdown::before {
   content: "";
   display: block;
@@ -261,6 +306,7 @@ input[type="number"] {
   top: -28px;
   left: 57%;
 }
+
 .dark .profile-dropdown::before,
 .dark .notification-dropdown::before,
 .dark .balance-dropdown::before {
@@ -273,58 +319,71 @@ input[type="number"] {
   visibility: hidden;
   transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s;
 }
+
 .balance-dropdown.active {
   top: 6rem;
   opacity: 100;
   visibility: visible;
 }
+
 .notification-dropdown {
   top: 16rem;
   opacity: 0;
   visibility: hidden;
   transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s;
 }
+
 .notification-dropdown.active {
   top: 6rem;
   opacity: 100;
   visibility: visible;
 }
+
 .profile-dropdown {
   top: 16rem;
   opacity: 0;
   visibility: hidden;
   transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s;
 }
+
 .profile-dropdown.active {
   top: 6rem;
   opacity: 100;
   visibility: visible;
 }
+
 .profile-dropdown,
 .notification-dropdown,
 .balance-dropdown {
   box-shadow: 19px 11px 127px 0px #00000030;
 }
+
 .miniLineChart canvas {
   height: 122px;
 }
+
 .menu-setting-items .nav-item.active span.item-icon {
   @apply bg-purple text-white;
 }
+
 .menu-setting-items .nav-item.active span.item-content {
   @apply text-purple;
 }
+
 .dark .menu-setting-items .nav-item.active span.item-content {
   @apply text-white
 }
+
 /* TODO: =================================layout end================================ */
 /* TODO: =================================HomePage ================================ */
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li {
   margin: 0;
 }
+
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li.slick-active button {
   background: white;
 }
+
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li button {
   background: none;
   border: 1px solid white;
@@ -332,11 +391,13 @@ input[type="number"] {
   width: 8px;
   height: 8px;
 }
+
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li button:before {
   content: "";
   width: 100%;
   height: 100%;
 }
+
 .trending-slider-left-btn::before {
   content: "";
   display: block;
@@ -349,15 +410,17 @@ input[type="number"] {
   z-index: -1;
   opacity: 30%;
 }
+
 .card-style-one .content .thumbnail {
   background-repeat: no-repeat;
   background-size: cover;
 }
+
 .card-style-one {
   box-shadow: 0px 9px 95px 0px #0000000d;
 }
 
-.trending-products .slick-slide > div {
+.trending-products .slick-slide>div {
   margin: 0 16px;
 }
 
@@ -423,6 +486,7 @@ input[type="number"] {
 .circle-count:nth-child(2) svg circle:last-of-type {
   stroke: rgba(242, 153, 74, 1);
 }
+
 .circle-count:nth-child(3) svg circle:last-of-type {
   stroke: rgba(235, 87, 87, 1);
 }
@@ -431,9 +495,11 @@ input[type="number"] {
   stroke-dasharray: 156px;
   stroke-dashoffset: calc(156px - (156px * var(--percent)) / 100);
 }
+
 .recent-transaction-widget .content ul li:last-child {
   border-bottom: none;
 }
+
 /* TODO: =================================my wallet end================================ */
 /* TODO: =================================upload product end================================ */
 .drop-product-upload {
@@ -444,23 +510,29 @@ input[type="number"] {
 .drop-product-upload.highlight {
   border: 2px dashed #5356fb;
 }
+
 .field-title {
   @apply text-xl font-bold tracking-wide text-dark-gray dark:text-white;
 }
+
 .switch-btn {
   transition: all 0.5s ease-in-out;
   background-color: #878f9a;
 }
+
 .switch-btn.active {
   background-color: #27ae60;
 }
+
 .switch-btn .inner-circle {
   transition: all 0.5s ease-in-out;
   transform: translate(1.5px, 1.5px);
 }
+
 .switch-btn.active .inner-circle {
   transform: translate(24.5px, 1.5px);
 }
+
 .preview-upload-product {
   background-image: url("./assets/images/background-2.svg");
   background-repeat: no-repeat;
@@ -472,18 +544,23 @@ input[type="number"] {
 .notification-page .content-item .notifications {
   @apply flex space-x-4 items-center;
 }
+
 .notification-page .content-item .notifications .notification-page .content-item .notifications {
   @apply mb-0;
 }
+
 .notification-setting-tab .notification-settings-items li:last-child {
   border-bottom: none;
 }
+
 .faq-tab .accordion-items .accordion-item:first-child .accordion-title-bar {
   padding-top: 0;
 }
+
 .faq-tab .accordion-items .accordion-item:last-child .accordion-body .accordion-body-content {
   padding-bottom: 20px;
 }
+
 .faq-tab .accordion-title-bar {
   background: #ffffff;
   position: relative;
@@ -495,11 +572,13 @@ input[type="number"] {
   transform: rotate(0deg);
   visibility: hidden;
 }
+
 .faq-tab .accordion-title-bar .accordion-title-icon .vertical.active {
   transition: all 0.5s ease-in-out;
   transform: rotate(90deg);
   visibility: visible;
 }
+
 .faq-tab .accordion-body {
   transition: all 0.2s ease-in-out;
   max-height: 0;
@@ -507,12 +586,14 @@ input[type="number"] {
   transform: translateY(-220px);
   overflow: hidden;
 }
+
 .faq-tab .accordion-body.active {
   transition: all 0.5s ease-in-out;
   max-height: 1444px;
   transform: translateY(0);
   opacity: 100;
 }
+
 /* TODO: =================================setting end================================= */
 /* TODO: =================================modal================================= */
 .children-element {
@@ -520,9 +601,11 @@ input[type="number"] {
   top: 175px;
   transform: translate(-50%, 0px);
 }
+
 .modal-com {
   transition: all 0.1s ease-in-out;
 }
+
 /* TODO: =================================modal end================================= */
 /* TODO: =================================login ================================= */
 .btn-login {
@@ -530,6 +613,7 @@ input[type="number"] {
   height: 58px;
   @apply bg-purple;
 }
+
 .btn-login.active {
   transition: all 0.5s ease-in-out;
   width: 58px;
@@ -558,11 +642,13 @@ TODO: components ===========================
   visibility: hidden;
   top: 150px;
 }
+
 .drop-down-com .drop-down-content.active {
   opacity: 100;
   visibility: visible;
   top: 100%;
 }
+
 .product-options .drop-down-content {
   transition: all 0.5s ease-in-out;
   opacity: 0;
@@ -570,11 +656,13 @@ TODO: components ===========================
   top: 150px;
   right: 40px;
 }
+
 .product-options .drop-down-content.active {
   opacity: 100;
   visibility: visible;
   top: 0;
 }
+
 .product-two-options .drop-down-content {
   transition: all 0.5s ease-in-out;
   opacity: 0;
@@ -582,11 +670,13 @@ TODO: components ===========================
   top: 150px;
   right: 0;
 }
+
 .product-two-options .drop-down-content.active {
   opacity: 100;
   visibility: visible;
   top: calc(100% + 10px);
 }
+
 .rate-statics-dropdown {
   transition: all 0.5s ease-in-out;
   opacity: 0;
@@ -594,11 +684,13 @@ TODO: components ===========================
   top: 150px;
   left: 0;
 }
+
 .rate-statics-dropdown.active {
   opacity: 100;
   visibility: visible;
   top: calc(100% + 10px);
 }
+
 .Update-table-dropdown :is(.text-sm) {
   @apply text-base;
 }
@@ -607,47 +699,57 @@ TODO: components ===========================
 .dark .drop-product-upload {
   background-color: #1d1f2f;
 }
+
 html.dark body {
   background-image: url("./assets/images/background-dark.svg");
   background-repeat: no-repeat;
   background-size: cover;
 }
+
 .dark .preview-upload-product {
   background: none;
 }
+
 .dark .faq-tab .accordion-title-bar {
   background: none;
 }
+
 .dark .content-wrapper.thankyou-section {
   background-image: none;
 }
+
 /*
 TODO: Responsive ===========================
 */
 
 @media (prefers-color-scheme: dark) {
+
   /* defaults to dark theme */
   html.dark body {
     background-image: url("./assets/images/background-dark.svg");
   }
 }
+
 @media (max-width: 1536px) {
-  .trending-products .slick-slide > div {
+  .trending-products .slick-slide>div {
     margin: 0 10px;
   }
 }
-@media (max-width: 1280px) {
+
-}
+@media (max-width: 1280px) {}
+
 @media (max-width: 1024px) {
   .content-wrapper.thankyou-section {
     background-image: none;
   }
+
   .children-element {
     left: 50%;
     top: 65px;
     transform: translate(-50%, 0px);
   }
 }
+
 @media (max-width: 768px) {
   .profile-dropdown::before {
     content: "";
@@ -661,6 +763,7 @@ TODO: Responsive ===========================
     top: -28px;
     left: 78%;
   }
+
   .children-element {
     left: 0;
     top: 0;
@@ -668,19 +771,26 @@ TODO: Responsive ===========================
     transform: none;
   }
 }
-@media (max-width: 640px) {
+
-}
+@media (max-width: 640px) {}
+
 @media (max-width: 426px) {
+
   .nft-authprofile-wrapper .content-wrapper-profile-only .auth,
   .nft-userprofile-wrapper .content-wrapper-profile-only .auth {
     margin-top: -70px;
   }
-  .react-date-picker__calendar {width: 290px;}
+
+  .react-date-picker__calendar {
+    width: 290px;
+  }
 }
+
 @media (max-width: 376px) {
   .notification-page .content-item .notifications {
     @apply block space-x-0;
   }
+
   .notification-page .content-item .notifications .icon {
     @apply mb-2;
   }
@@ -688,52 +798,60 @@ TODO: Responsive ===========================
 }
 
 /* Calendar */
-.react-calendar{
+.react-calendar {
   width: 100%;
   min-height: 23.2rem;
   border-radius: 7px !important;
   @apply border border-pink !important;
 }
 
-.dark .react-calendar{
+.dark .react-calendar {
   background: #11131F;
   color: #7B818D;
   border: 1px solid #25284F;
 }
+
 .dark .react-calendar__navigation button:enabled:hover,
 .dark .react-calendar__navigation button:enabled:focus,
 .dark .react-calendar__tile:disabled,
-.dark .react-calendar__navigation button:disabled{background: #1D1F2F;}
+.dark .react-calendar__navigation button:disabled {
+  background: #1D1F2F;
+}
 
-.react-calendar__navigation{
+.react-calendar__navigation {
   margin-top: 2px;
   margin-inline: 2px;
   @apply text-pink !important;
 }
 
-.react-calendar__tile--active{color: #fff; font-weight: bold;
+.react-calendar__tile--active {
+  color: #fff;
+  font-weight: bold;
   /* background-color: #006edc; */
   @apply bg-pink;
 }
-.dark .react-calendar__tile--active{color: #fff;}
+
+.dark .react-calendar__tile--active {
+  color: #fff;
+}
 
 .react-calendar__navigation button:enabled:hover,
-.react-calendar__navigation button:enabled:focus{
+.react-calendar__navigation button:enabled:focus {
   @apply rounded-full transition duration-500
 }
 
-.react-calendar__month-view__days{
+.react-calendar__month-view__days {
   display: grid !important;
   grid-template-columns: repeat(7, 1fr);
 }
 
-.react-calendar__month-view__weekdays__weekday abbr:where([title]){
+.react-calendar__month-view__weekdays__weekday abbr:where([title]) {
   text-decoration: none !important;
   cursor: default;
   @apply text-pink !important;
 }
 
-.react-calendar__tile{
+.react-calendar__tile {
   border: 1px solid #cfd7e3 !important;
   border-left: 0;
   text-align: right;
@@ -742,9 +860,11 @@ TODO: Responsive ===========================
   /* @apply border border-pink !important; */
 }
 
-.dark .react-calendar__tile{background: #11131F;}
+.dark .react-calendar__tile {
+  background: #11131F;
+}
 
-.reminder-select select{
+.reminder-select select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -758,28 +878,29 @@ TODO: Responsive ===========================
 }
 
 .reminder-select select::-ms-expand {
-  display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
+  display: none;
+  /* Remove default arrow in Internet Explorer 10 and 11 */
 }
 
-.reminder-select select option{
+.reminder-select select option {
   color: inherit;
 }
 
 /* Target Internet Explorer 9 to undo the custom arrow */
 @media screen and (min-width:0\0) {
   .reminder-select select {
-      background: none\9;
+    background: none\9;
-      padding: 5px\9;
+    padding: 5px\9;
   }
 }
 
 /* Date Picker */
-.react-date-picker{
+.react-date-picker {
   display: flex !important;
   flex: 1;
 }
 
-.react-date-picker__wrapper{
+.react-date-picker__wrapper {
   border: 0.5px solid #E3E4FE;
   padding: 1.25rem;
   background: #fafafa;
@@ -787,29 +908,38 @@ TODO: Responsive ===========================
   @apply border border-pink;
 }
 
-.dark .react-date-picker__wrapper {border: 0.5px solid #25284F;}
+.dark .react-date-picker__wrapper {
+  border: 0.5px solid #25284F;
+}
 
-.dark .react-date-picker__wrapper{
+.dark .react-date-picker__wrapper {
   background: #11131F;
   color: #7B818D;
 }
 
-.dark .react-date-picker__button svg{stroke: #7B818D;}
+.dark .react-date-picker__button svg {
+  stroke: #7B818D;
+}
 
-.react-date-picker__calendar {inset: 100% 25px auto auto !important;}
+.react-date-picker__calendar {
-.react-date-picker__calendar .react-calendar{
+  inset: 100% 25px auto auto !important;
+}
+
+.react-date-picker__calendar .react-calendar {
   min-height: 18.4rem;
 }
 
-.react-date-picker__calendar .react-calendar__tile{
+.react-date-picker__calendar .react-calendar__tile {
   height: 40px !important;
 }
 
 .react-date-picker__inputGroup__input,
 .react-date-picker__inputGroup__divider,
-.react-date-picker__inputGroup__leadingZero{
+.react-date-picker__inputGroup__leadingZero {
   cursor: pointer;
   color: #374151;
 }
 
-.animate-fadeIn {@apply transition duration-300}
+.animate-fadeIn {
+  @apply transition duration-300
+}

src/views/CalendarPage.jsx

@@ -2,9 +2,9 @@ import React from "react";
 import Calendar from "../components/Calendar";
 
 export default function CalendarPage() {
-    return (
+  return (
-        <>
+    <>
-            <Calendar />
+      <Calendar />
-        </>
+    </>
-    );
+  );
 }