UI changed

package.json

@@ -13,7 +13,7 @@
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
-    "dev": "react-scripts --openssl-legacy-provider start",
+    "dev": "react-scripts start",
     "build": "react-scripts --openssl-legacy-provider build",
     "changelog": "auto-changelog --starting-version 4.1.0 --commit-limit false --hide-credit",
     "eject": "react-scripts eject",

src/components/AppFooter.js

@@ -23,7 +23,7 @@ const AppFooter = () => {
   }, []);
 
   return (
-    <CFooter>
+    <CFooter style={{background:"#179FAF",border:"none"}} >
       <div>
         <span className="ms-1">
           {/* {new Date().getFullYear()} &copy; {copyright ? copyright : ""} . */}

src/components/AppHeader.js

@@ -40,7 +40,7 @@ const AppHeader = () => {
     getConfiguration();
   }, []);
   return (
-    <CHeader position="sticky" className="mb-4">
+    <CHeader position="sticky" style={{background:"#B4D1E5",border:"none",marginLeft:"2rem", marginRight:"2rem",borderRadius:"20px",marginTop:"1rem",marginBottom:"2rem"}}> 
       <CContainer fluid>
         <CHeaderToggler
           className="ps-1"
@@ -89,8 +89,8 @@ const AppHeader = () => {
           <AppHeaderDropdown />
         </CHeaderNav>
       </CContainer>
-      <CHeaderDivider />
+      {/* <CHeaderDivider /> */}
-      <CContainer fluid>{/* <AppBreadcrumb /> */}</CContainer>
+      {/* <CContainer fluid><AppBreadcrumb /></CContainer> */}
     </CHeader>
   );
 };

src/components/AppSidebar.js

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-
 import {
+  CCloseButton,
   CSidebar,
   CSidebarBrand,
-  CSidebarNav,
+  CSidebarFooter,
+  CSidebarHeader,
   CSidebarToggler,
+  CSidebarNav,
 } from "@coreui/react";
 import CIcon from "@coreui/icons-react";
 
@@ -15,7 +17,8 @@ import { logoNegative } from "src/assets/brand/logo-negative";
 import { sygnet } from "src/assets/brand/sygnet";
 
 import SimpleBar from "simplebar-react";
-import "simplebar/dist/simplebar.min.css";
+import "simplebar-react/dist/simplebar.min.css";
+// import "simplebar/dist/simplebar.min.css";
 
 // sidebar nav config
 import navigation from "../_nav";
@@ -108,43 +111,112 @@ const AppSidebar = () => {
   //---------------------------//
   return (
     <CSidebar
+      className="border-end"
+      colorScheme="dark"
       position="fixed"
       unfoldable={unfoldable}
       visible={sidebarShow}
+      style={{ background: "#179FAF" }}
       onVisibleChange={(visible) => {
         dispatch({ type: "set", sidebarShow: visible });
       }}
     >
-      <CSidebarBrand
+      {/* <CSidebarHeader> */}
-        className="d-none  d-md-flex"
+      {/* <CSidebarBrand
-        style={{ background: "rgb(140, 213, 213)" }}
+          // className="d-none  d-md-flex"
+          // style={{ background: "rgb(140, 213, 213)" }}
           to="/"
-      >
+        > */}
       {/* <CIcon className="sidebar-brand-full" icon={logoNegative} height={35} /> */}
 
-        {AdminlogoUrl ? (
+      {/* {AdminlogoUrl ? (
             <Link to="/dashboard">
-            <img src={AdminlogoUrl} alt="" width="100%" />
+              <img src={AdminlogoUrl} alt="" height={32} style={{borderRadius:"5px"}} />
             </Link>
           ) : { AppName } ? (
             <h3>Cheminova </h3>
           ) : (
             ""
-        )}
+          )} */}
       {/* <CIcon className="sidebar-brand-narrow"  height={35} /> */}
-        <CIcon className="sidebar-brand-narrow" icon={sygnet} height={35} />
+      {/* <CIcon className="sidebar-brand-narrow" icon={sygnet} height={32} /> */}
-      </CSidebarBrand>
+      {/* </CSidebarBrand> */}
+      {/* <CCloseButton
+          className="d-lg-none"
+          dark
+          onClick={() => dispatch({ type: 'set', sidebarShow: false })}
+        /> */}
+      {/* </CSidebarHeader> */}
+      <CSidebarHeader
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "0.5rem",
+        }}
+      >
+        {AdminlogoUrl ? (
+          <Link to="/dashboard">
+            <img
+              src={AdminlogoUrl}
+              alt="Admin Logo"
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "contain",
+                borderRadius: "5px",
+              }}
+            />
+          </Link>
+        ) : AppName ? (
+          <h3>Cheminova</h3>
+        ) : (
+          ""
+        )}
+      </CSidebarHeader>
+
+      {/* <CSidebarNav>
+        <SimpleBar>
+          <AppSidebarNav items={navigationItem}/>
+        </SimpleBar>
+      </CSidebarNav> */}
       <CSidebarNav>
         <SimpleBar>
-          <AppSidebarNav items={navigationItem} />
+          <div
+            style={{
+              background: "#B4D1E5",
+              margin: "0.5rem",
+              border: "none",
+              borderRadius: "20px",
+            }}
+          >
+            <AppSidebarNav items={navigation} />
+          </div>
         </SimpleBar>
       </CSidebarNav>
-      <CSidebarToggler
+      <CSidebarFooter className="border-top">
+        <div className="d-flex flex-column justify-content-center align-items-center h-100">
+          <span className="text-muted">Powered by</span>
+          <a
+            href="https://codeology.solutions/"
+            target="_blank"
+            // rel="noopener noreferrer"
+            className="fw-semibold text-muted"
+          >
+            Codeology.solutions
+          </a>
+        </div>
+
+        {/* <CSidebarToggler
+          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
+        /> */}
+      </CSidebarFooter>
+      {/* <CSidebarToggler
         className="d-none d-lg-flex"
         onClick={() =>
           dispatch({ type: "set", sidebarUnfoldable: !unfoldable })
         }
-      />
+      /> */}
     </CSidebar>
   );
 };

src/components/AppSidebarNav.css

@@ -0,0 +1,104 @@
+/* Base styles for nav-link, nav-group, and nav-item */
+.sidebar-nav .nav-link,
+.sidebar-nav .nav-group,
+.sidebar-nav .nav-item {
+  background-color: white;
+  color: black;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+  border-radius: 5px;
+}
+
+/* Hover styles for nav-link, nav-group, and nav-item */
+.sidebar-nav .nav-link:hover,
+.sidebar-nav .nav-group:hover,
+.sidebar-nav .nav-item:hover {
+  background-color: #0b0689;
+  color: white;
+}
+
+/* Active state styles for nav-link */
+.sidebar-nav .nav-link.active {
+  background-color: #0b0689;
+  color: white;
+}
+
+/* Active state styles for nav-group and nav-item */
+.sidebar-nav .nav-group.active,
+.sidebar-nav .nav-item.active {
+  /* background-color: #0B0689;  */
+  color: white;
+}
+
+/* Styles for expanded nav-group to ensure name remains black */
+.sidebar-nav .nav-group.show > .nav-link {
+  color: black;
+}
+
+/* Badge styling inside nav items */
+.sidebar-nav .nav-link .ms-auto,
+.sidebar-nav .nav-group .ms-auto,
+.sidebar-nav .nav-item .ms-auto {
+  background-color: transparent;
+  color: black;
+  transition: color 0.3s ease;
+}
+
+/* Hover and active styles for badges */
+.sidebar-nav .nav-link:hover .ms-auto,
+.sidebar-nav .nav-group:hover .ms-auto,
+.sidebar-nav .nav-item:hover .ms-auto,
+.sidebar-nav .nav-link.active .ms-auto,
+.sidebar-nav .nav-group.active .ms-auto,
+.sidebar-nav .nav-item.active .ms-auto {
+  color: white; /* White badge text */
+}
+.sidebar-nav .nav-group.show {
+  background-color: #b4d1e5;
+}
+/* Icon styling */
+.sidebar-nav .nav-link .nav-icon,
+.sidebar-nav .nav-group .nav-icon,
+.sidebar-nav .nav-item .nav-icon {
+  color: black; /* Black icon */
+  transition: color 0.3s ease;
+}
+
+/* Hover and active styles for icons */
+.sidebar-nav .nav-link:hover .nav-icon,
+.sidebar-nav .nav-group:hover .nav-icon,
+.sidebar-nav .nav-item:hover .nav-icon,
+.sidebar-nav .nav-link.active .nav-icon,
+.sidebar-nav .nav-group.active .nav-icon,
+.sidebar-nav .nav-item.active .nav-icon {
+  color: white; /* White icon */
+}
+/* .sidebar-nav .nav-group.show .nav-item:hover .nav-icon,
+.sidebar-nav .nav-group.show .nav-link:hover .nav-icon {
+  color: white; 
+} */
+/* Toggle styling for nav-group */
+.sidebar-nav .nav-group-toggle::after {
+  display: block;
+  flex: 0 1 12px;
+  height: 12px;
+  margin-left: auto;
+  content: "";
+  background-image: var(--cui-sidebar-nav-group-indicator);
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: transform 0.15s, color 0.3s ease;
+  color: white; /* Default toggle color */
+}
+
+/* Hover and active styles for toggle */
+.sidebar-nav .nav-group:hover > .nav-group-toggle::after,
+.sidebar-nav .nav-group.active > .nav-group-toggle::after {
+  color: black;
+}
+
+/* Rotate toggle when nav-group is expanded */
+.sidebar-nav .nav-group.show > .nav-group-toggle::after {
+  transform: rotate(180deg);
+  color: black;
+}

src/components/AppSidebarNav.js

@@ -1,15 +1,23 @@
 import React from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import PropTypes from "prop-types";
-
+import "simplebar-react/dist/simplebar.min.css";
-import { CBadge } from "@coreui/react";
+import { CBadge, CNavLink } from "@coreui/react";
+import "./AppSidebarNav.css";
 
 export const AppSidebarNav = ({ items }) => {
   const location = useLocation();
-  const navLink = (name, icon, badge) => {
+
+  const navLink = (name, icon, badge, indent = false) => {
     return (
       <>
-        {icon && icon}
+        {icon
+          ? icon
+          : indent && (
+              <span className="nav-icon">
+                <span className="nav-icon-bullet"></span>
+              </span>
+            )}
         {name && name}
         {badge && (
           <CBadge color={badge.color} className="ms-auto">
@@ -20,12 +28,12 @@ export const AppSidebarNav = ({ items }) => {
     );
   };
 
-  const navItem = (item, index) => {
+  const navItem = (item, index, indent = false) => {
     const { component, name, badge, icon, ...rest } = item;
     const Component = component;
     return (
-      <>
       <Component
+        as="div"
         {...(rest.to &&
           !rest.items && {
             component: NavLink,
@@ -36,9 +44,9 @@ export const AppSidebarNav = ({ items }) => {
       >
         {navLink(name, icon, badge)}
       </Component>
-      </>
     );
   };
+
   const navGroup = (item, index) => {
     const { component, name, icon, to, ...rest } = item;
     const Component = component;
@@ -58,12 +66,12 @@ export const AppSidebarNav = ({ items }) => {
   };
 
   return (
-    <React.Fragment>
+    <>
       {items &&
         items.map((item, index) =>
           item.items ? navGroup(item, index) : navItem(item, index)
         )}
-    </React.Fragment>
+    </>
   );
 };
 

src/components/header/AppHeaderDropdown.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 import {
   CAvatar,
   CBadge,
@@ -8,7 +8,7 @@ import {
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
-} from '@coreui/react'
+} from "@coreui/react";
 import {
   cilBell,
   cilCreditCard,
@@ -20,27 +20,27 @@ import {
   cilTask,
   cilUser,
   cilPencil,
-} from '@coreui/icons'
+} from "@coreui/icons";
-import CIcon from '@coreui/icons-react'
+import CIcon from "@coreui/icons-react";
-import swal from 'sweetalert';
+import swal from "sweetalert";
 
-import userImage from './../../assets/images/avatars/1.jpeg'
+import userImage from "./../../assets/images/avatars/1.jpeg";
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
 // import { signout } from 'src/auth'
 import { useNavigate } from "react-router-dom";
-import { useEffect } from 'react';
+import { useEffect } from "react";
-import axios from 'axios';
+import axios from "axios";
-import { useState } from 'react';
+import { useState } from "react";
-
+import { use } from "react";
 
 const AppHeaderDropdown = () => {
-  const [userData, setUserData] = useState()
+  const [userData, setUserData] = useState();
   let history = useNavigate();
   const signout = async () => {
-    localStorage.removeItem('authToken')
+    localStorage.removeItem("authToken");
     swal("success!", "Logged Out", "success");
     history("/");
-  }
+  };
 
   //for user image
 
@@ -51,32 +51,35 @@ const AppHeaderDropdown = () => {
         headers: {
           Authorization: `Bearer ${token}`,
         },
-      })
+      });
 
       if (response.data.success === true) {
-        setUserData(response.data.user)
+        setUserData(response.data.user);
-
       }
-    }
+    } catch (err) {
-    catch (err) {
-
       console.log(err);
-    };
     }
-
+  };
 
   useEffect(() => {
-    getUser()
+    getUser();
-  }, [])
+  }, []);
-
   return (
     <CDropdown variant="nav-item">
       <CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
         {/* {userData && userData ? <CAvatar src={userData.avatar.url} size="md" /> : */}
-        <CAvatar src={userImage} size="md" />
+        <CAvatar
+          src={userImage}
+          size="md"
+          style={{
+            filter: "brightness(0.7)",
+          }}
+        />
       </CDropdownToggle>
       <CDropdownMenu className="pt-0" placement="bottom-end">
-        <CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
+        <CDropdownHeader className="bg-light fw-semibold py-2">
+          Account
+        </CDropdownHeader>
         <CDropdownItem href="#">
           {/* <CIcon icon={cilBell} className="me-2" />
           Updates
@@ -129,13 +132,13 @@ const AppHeaderDropdown = () => {
           </CBadge> */}
         </CDropdownItem>
         {/* <CDropdownDivider /> */}
-        <Link to='/profile/edit'>
+        <Link to="/profile/edit">
           <CDropdownItem>
             <CIcon icon={cilUser} className="me-2" />
             Edit Profile
           </CDropdownItem>
         </Link>
-        <Link to='/change_password'>
+        <Link to="/change_password">
           <CDropdownItem>
             <CIcon icon={cilPencil} className="me-2" />
             Change Password
@@ -143,11 +146,11 @@ const AppHeaderDropdown = () => {
         </Link>
         <CDropdownItem href="#">
           <CIcon icon={cilLockLocked} className="me-2" />
-          <span onClick={signout} >Log Out</span>
+          <span onClick={signout}>Log Out</span>
         </CDropdownItem>
       </CDropdownMenu>
     </CDropdown>
-  )
+  );
-}
+};
 
-export default AppHeaderDropdown
+export default AppHeaderDropdown;

src/layout/DefaultLayout.js

@@ -10,7 +10,7 @@ const DefaultLayout = () => {
   return (
     <div>
       <AppSidebar />
-      <div className="wrapper d-flex flex-column min-vh-100 bg-light">
+      <div className="wrapper d-flex flex-column min-vh-100" style={{background:"#179FAF"}}>
         <AppHeader />
         <div className="body flex-grow-1 px-3">
           <AppContent />

src/views/Announcment/announcement.js

@@ -37,7 +37,7 @@ const Announcements = () => {
           Authorization: `Bearer ${token}`, // if token is necessary for authorization
         },
       });
-      console.log(response);
+      // console.log(response);
       const { announcements, totalAnnouncements } = response.data;
       setAnnouncements(announcements);
       setTotalAnnouncements(totalAnnouncements);
@@ -87,9 +87,20 @@ const Announcements = () => {
         <Button
           variant="contained"
           onClick={() => navigate("/announcement/create")}
-          sx={{ textTransform: "none" }}
+          style={{
+            fontWeight: "bold",
+            textTransform: "capitalize",
+          }}
+          sx={{
+            backgroundColor: "white",
+            color: "black",
+            "&:hover": {
+              backgroundColor: "#0B0689",
+              color: "white",
+            },
+          }}
         >
-          Add New{" "}
+          Add New
         </Button>
       </Box>
 

src/views/Announcment/createAnnouncement.js

@@ -155,7 +155,7 @@ const CreateAnnouncement = () => {
           <Button
             variant="contained"
             color="secondary"
-            onClick={() => navigateBack()}
+            onClick={() => navigate("/announcement")}
           >
             Cancel
           </Button>

src/views/Attendance/AttendanceSalesCoordinator.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef,useCallback } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";

src/views/Attendance/AttendanceTerritoryManager.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef,useCallback } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";

src/views/Attendance/SingleUserAttendance.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
 
@@ -28,7 +28,7 @@ const SingleUserAttendance = () => {
           show: itemPerPage,
         },
       });
-      console.log(res.data);
+      // console.log(res.data);
       setuser(res.data?.user);
       setAttendanceData(res.data?.attendance);
       setUserType(res.data?.userType);
@@ -71,7 +71,7 @@ const SingleUserAttendance = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
+                    color="secondary"
                     style={{
                       fontWeight: "bold",
                       marginBottom: "1rem",

src/views/Attendance/TodayAttendance.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
@@ -76,12 +76,19 @@ const TodayAttendance = () => {
                 <div className="page-title-right d-flex">
                   <Button
                     variant="contained"
-                    color="primary"
                     style={{
                       fontWeight: "bold",
                       marginRight: "1rem",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() => {
                       navigate("/salescoordinator/attendance", {
                         replace: true,
@@ -92,11 +99,18 @@ const TodayAttendance = () => {
                   </Button>
                   <Button
                     variant="contained"
-                    color="primary"
                     style={{
                       fontWeight: "bold",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() => {
                       navigate("/territorymanager/attendance", {
                         replace: true,

src/views/Brands/Brands.js

@@ -210,12 +210,20 @@ const Brands = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
+                    // color="success"
                     style={{
                       fontWeight: "bold",
-                      marginBottom: "1rem",
+                      marginBottom: "0.5rem",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={handleOpen}
                   >
                     Add New brand

src/views/Categories/categories.js

@@ -255,12 +255,20 @@ const Categories = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
                     style={{
                       fontWeight: "bold",
-                      marginBottom: "1rem",
+                      marginBottom: "0.5rem",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
+                    // color="success"
                     onClick={handleOpen}
                   >
                     Add New Category
@@ -480,7 +488,10 @@ const Categories = () => {
                                     mt-1
                                   "
                                     onClick={() =>
-                                    handleEditClick(item._id, item.categoryName)
+                                      handleEditClick(
+                                        item._id,
+                                        item.categoryName
+                                      )
                                     }
                                   >
                                     Edit

src/views/Leaves/LeaveSalesCoordinator.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef,useCallback } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";

src/views/Leaves/LeaveTerritoryManager.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef,useCallback } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";

src/views/Leaves/SingleUserLeave.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
 
@@ -67,7 +67,7 @@ const [userType, setUserType] = useState("");
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
+                    color="secondary"
                     style={{
                       fontWeight: "bold",
                       marginBottom: "1rem",

src/views/Leaves/TodayLeaves.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
@@ -77,12 +77,19 @@ const TodayLeave = () => {
                 <div className="d-flex">
                   <Button
                     variant="contained"
-                    color="primary"
                     style={{
                       fontWeight: "bold",
                       marginRight: "1rem",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() => {
                       navigate("/salescoordinator/leave", {
                         replace: true,
@@ -93,11 +100,18 @@ const TodayLeave = () => {
                   </Button>
                   <Button
                     variant="contained"
-                    color="primary"
                     style={{
                       fontWeight: "bold",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() => {
                       navigate("/territorymanager/leave", {
                         replace: true,

src/views/PrincipalDistributors/AddMultiplePD.js

@@ -4,6 +4,7 @@ import swal from "sweetalert";
 import { isAutheticated } from "src/auth";
 import { useNavigate } from "react-router-dom"; 
 import { toast } from "react-hot-toast";
+import { Button } from "@mui/material";
 const AddMultiplePd = () => {
   const [file, setFile] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -106,12 +107,17 @@ const AddMultiplePd = () => {
   return (
     <div className="container mt-4">
       <div className="mb-6">
-        <button
+        <Button
+          variant="contained"
+          style={{
+            fontWeight: "bold",
+            textTransform: "capitalize",
+          }}
+          color="secondary"
           onClick={() => navigate("/principal-distributor")}
-          className="btn btn-secondary"
         >
           Back
-        </button>
+        </Button>
       </div>
       <h5 className="mb-6 mt-4">Add Multiple Principal Distributor</h5>
       <div className="my-3">

src/views/PrincipalDistributors/ViewRetailDistributorPD.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Link, useParams } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
@@ -266,12 +266,20 @@ const ViewRetailDistributorPD = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
+                    // color="primary"
                     style={{
                       fontWeight: "bold",
                       marginBottom: "1rem",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={handleOpenModal}
                   >
                     Add Retailer
@@ -283,12 +291,7 @@ const ViewRetailDistributorPD = () => {
                       fontWeight: "bold",
                       marginBottom: "1rem",
                       marginLeft: "1rem",
-                      textTransform: "capitalize",
+                      textTransform: "capitalize"
-                      backgroundColor: "#d32f2f", // Red color for danger
-                      color: "#fff",
-                      "&:hover": {
-                        backgroundColor: "#b71c1c", // Darker red on hover
-                      },
                     }}
                     onClick={() => navigate("/principal-distributor")}
                   >

src/views/PrincipalDistributors/addPrincipalDistributor.js

@@ -53,10 +53,10 @@ const AddPrincipalDistributor = () => {
       value: state.isoCode,
     }));
     setStateOptions(states);
-}, []);
+  }, []);
 
-// Fetch city options whenever selected state changes
+  // Fetch city options whenever selected state changes
-useEffect(() => {
+  useEffect(() => {
     if (selectedState) {
       const cities = City.getCitiesOfState("IN", selectedState.value).map(
         (city) => ({
@@ -68,7 +68,7 @@ useEffect(() => {
     } else {
       setCityOptions([]); // Reset cities if no state selected
     }
-}, [selectedState]);
+  }, [selectedState]);
 
   const handleInputChange = (e) => {
     setUser({ ...user, [e.target.name]: e.target.value });
@@ -177,8 +177,14 @@ useEffect(() => {
         <Button
           variant="outlined"
           color="secondary"
+          style={{
+            fontWeight: "bold",
+            textTransform: "capitalize",
+            position: "absolute",
+            top: "10px",
+            right: "10px",
+          }}
           onClick={handleCancel}
-          sx={{ position: "absolute", top: "10px", right: "10px" }}
         >
           Cancel
         </Button>

src/views/PrincipalDistributors/principalDistributor.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Link } from "react-router-dom";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import { isAutheticated } from "src/auth";
@@ -203,8 +203,16 @@ const principalDistributor = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
+                    // color="primary"
-                    className="font-bold mb-2 capitalize mr-2"
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
+                    style={{ marginRight: "0.5rem", fontWeight: "bold", textTransform: "capitalize", marginBottom: "0.5rem" }}
                     onClick={() => {
                       navigate("/add-principal-distributor");
                     }}
@@ -213,8 +221,16 @@ const principalDistributor = () => {
                   </Button>
                   <Button
                     variant="contained"
-                    color="primary"
+                    // color="primary"
-                    className="font-bold mb-2 capitalize"
+                    style={{ fontWeight: "bold", textTransform: "capitalize", marginBottom: "0.5rem" }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() =>
                       navigate("/add-principal-distributor/multiple", {
                         replace: true,

src/views/PrincipalDistributors/singlePrincipalDistributorAllDetails.js

@@ -316,7 +316,16 @@ const SinglePrincipalDistributorAllDetails = () => {
             </div>
             <div className="page-title-right">
               <Link to="/principal-distributor">
-                <Button className="btn btn-danger btn-sm">Back</Button>
+                <Button
+                  className="btn btn-danger"
+                  style={{
+                    fontWeight: "bold",
+                    marginBottom: "0.5rem",
+                    textTransform: "capitalize",
+                  }}
+                >
+                  Back
+                </Button>
               </Link>
             </div>
           </div>

src/views/ProductManual/ProductManual.js

@@ -222,8 +222,20 @@ const ProductManual = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
+                    // color="primary"
-                    className="font-bold mb-2 capitalize mr-2"
+                    style={{
+                      fontWeight: "bold",
+                      marginBottom: "0.5rem",
+                      textTransform: "capitalize"
+                    }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() => handleOpen()}
                   >
                     Add New Product Manual

src/views/Products/AddMultipleProducts.js

@@ -4,6 +4,7 @@ import swal from "sweetalert";
 import { isAutheticated } from "src/auth.js";
 import { useNavigate } from "react-router-dom"; // Import useNavigate
 import toast from "react-hot-toast";
+import { Button } from "@mui/material";
 
 const AddMultipleProducts = () => {
   const [file, setFile] = useState(null);
@@ -37,14 +38,14 @@ const AddMultipleProducts = () => {
     setErrors([]);
     setupdatedProducts([]);
     setnewlyCreated([]);
-try{
+    try {
       const formData = new FormData();
-    formData.append('file', file);
+      formData.append("file", file);
 
       const token = isAutheticated();
-      const response = await axios.post('/api/products/upload', formData, {
+      const response = await axios.post("/api/products/upload", formData, {
         headers: {
-          'Content-Type': 'multipart/form-data',
+          "Content-Type": "multipart/form-data",
           Authorization: `Bearer ${token}`,
         },
       });
@@ -68,24 +69,32 @@ try{
           icon: "warning",
           button: "OK",
         });
-      } else if(data.updatedProducts && data.updatedProducts.length > 0 || data.newlyCreated && data.newlyCreated.length > 0) {
+      } else if (
+        (data.updatedProducts && data.updatedProducts.length > 0) ||
+        (data.newlyCreated && data.newlyCreated.length > 0)
+      ) {
         swal({
           title: "SpreadSheet Upload Successful",
           text: "Products added successfully",
           icon: "success",
           button: "OK",
         });
-      }
+      } else {
-      else {
         toast.success("Products added successfully");
-        navigate('/products');
+        navigate("/products");
       }
 
       setFile(null); // Clear the file input
       document.querySelector('input[type="file"]').value = ""; // Reset file input value
     } catch (error) {
       console.error("Upload error:", error);
-      swal("Error", `Failed to upload products: ${error.response?.data?.message || 'An unexpected error occurred'}`, "error");
+      swal(
+        "Error",
+        `Failed to upload products: ${
+          error.response?.data?.message || "An unexpected error occurred"
+        }`,
+        "error"
+      );
     } finally {
       setLoading(false);
     }
@@ -94,12 +103,17 @@ try{
   return (
     <div className="container mt-4">
       <div className="mb-6">
-        <button
+        <Button
-          onClick={() => navigate('/products')}
+          variant="contained"
-          className="btn btn-secondary"
+          style={{
+            fontWeight: "bold",
+            textTransform: "capitalize",
+          }}
+          color="secondary"
+          onClick={() => navigate("/products")}
         >
           Back
-        </button>
+        </Button>
       </div>
       <h5 className="mb-6 mt-4">Add Multiple Products</h5>
       <div className="my-3">

src/views/Products/Products.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
@@ -211,16 +211,41 @@ const Products = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
+                    // color="success"
-                    className="font-bold mb-2 capitalize mr-2"
+                    style={{
+                      fontWeight: "bold",
+                      marginBottom: "0.5rem",
+                      textTransform: "capitalize",
+                      marginRight: "0.5rem",
+                    }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() => navigate("/product/add", { replace: true })}
                   >
                     Add Product
                   </Button>
                   <Button
                     variant="contained"
-                    color="primary"
+                    // color="success"
-                    className="font-bold mb-2 capitalize"
+                    style={{
+                      fontWeight: "bold",
+                      marginBottom: "0.5rem",
+                      textTransform: "capitalize",
+                    }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() =>
                       navigate("/product/add/multiple", { replace: true })
                     }

src/views/RetailDistributors/AddMultipleRD.js

@@ -4,6 +4,7 @@ import swal from "sweetalert";
 import { isAutheticated } from "src/auth";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-hot-toast";
+import { Button } from "@mui/material";
 const AddMultiplerd = () => {
   const [file, setFile] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -107,12 +108,17 @@ const AddMultiplerd = () => {
   return (
     <div className="container mt-4">
       <div className="mb-6">
-        <button
+        <Button
           onClick={() => navigate("/retail-distributor")}
-          className="btn btn-secondary"
+          variant="contained"
+          color="secondary"
+          style={{
+            fontWeight: "bold",
+            textTransform: "capitalize",
+          }}
         >
           Back
-        </button>
+        </Button>
       </div>
       <h5 className="mb-6 mt-4">Add Multiple Retailers</h5>
       <div className="my-3">

src/views/RetailDistributors/DistributorOrders.js

@@ -133,7 +133,9 @@ const SingleDistributorOrder = () => {
           },
         }
       );
-      distributortype === "principaldistributor"? setdistributorDetails(response.data.user): setdistributorDetails(response.data);
+      distributortype === "principaldistributor"
+        ? setdistributorDetails(response.data.user)
+        : setdistributorDetails(response.data);
     } catch (error) {
       console.error("Error fetching data: ", error);
     }
@@ -241,10 +243,22 @@ const SingleDistributorOrder = () => {
           mb: 3,
         }}
       >
-        <Typography variant="h4">{distributortype === "principaldistributor" ? "Principal Distributor Details":"Retailers Details"}</Typography>
+        <Typography variant="h4">
-        <IconButton sx={{ color: "red" }} onClick={handleCancel}>
+          {distributortype === "principaldistributor"
-          Cancel <CancelIcon />
+            ? "Principal Distributor Details"
-        </IconButton>
+            : "Retailers Details"}
+        </Typography>
+        <Button
+          variant="contained"
+          color="secondary"
+          style={{
+            fontWeight: "bold",
+            textTransform: "capitalize",
+          }}
+          onClick={handleCancel}
+        >
+          Back
+        </Button>
       </Box>
 
       <Paper sx={{ p: 2, mb: 3 }}>

src/views/RetailDistributors/EditRetailDistributor.js

@@ -341,7 +341,13 @@ const EditRetailDistributor = () => {
           variant="outlined"
           color="secondary"
           onClick={handleCancel}
-          sx={{ position: "absolute", top: "10px", right: "10px" }}
+          style={{
+            fontWeight: "bold",
+            textTransform: "capitalize",
+            position: "absolute",
+            top: "10px",
+            right: "10px",
+          }}
         >
           Cancel
         </Button>

src/views/RetailDistributors/RetailDistributor.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback, useRef } from "react";
 import { Link } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
 import debounce from "lodash.debounce";
@@ -156,8 +156,20 @@ const RetailDistributor = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
+                    style={{
-                    className="font-bold mb-2 capitalize mr-2"
+                      fontWeight: "bold",
+                      marginBottom: "0.5rem",
+                      textTransform: "capitalize",
+                      marginRight: "0.5rem",
+                    }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() => {
                       Navigate("/retaildistributor/add");
                     }}
@@ -166,8 +178,19 @@ const RetailDistributor = () => {
                   </Button>
                   <Button
                     variant="contained"
-                    color="primary"
+                    style={{
-                    className="font-bold mb-2 capitalize"
+                      fontWeight: "bold",
+                      marginBottom: "0.5rem",
+                      textTransform: "capitalize",
+                    }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() =>
                       Navigate("/add-retail-distributor/multiple", {
                         replace: true,

src/views/RetailDistributors/SingleRetailDistributor.js

@@ -304,9 +304,21 @@ const SingleRetailDistributor = () => {
         }}
       >
         <Typography variant="h4">Retailer Details</Typography>
-        <IconButton sx={{ color: "red" }} onClick={handleCancel}>
+        <Button
+          className="btn btn-danger"
+          style={{
+            fontWeight: "bold",
+            marginBottom: "0.5rem",
+            textTransform: "capitalize",
+          }}
+          onClick={handleCancel}
+        >
+          Back
+        </Button>
+          
+        {/* <IconButton sx={{ color: "red" }} >
           Cancel <CancelIcon />
-        </IconButton>
+        </IconButton> */}
       </Box>
 
       <Paper sx={{ p: 2, mb: 3 }}>

src/views/RetailDistributors/addRetailDistributor.js

@@ -213,7 +213,13 @@ useEffect(() => {
           variant="outlined"
           color="secondary"
           onClick={handleCancel}
-          sx={{ position: "absolute", top: "10px", right: "10px" }}
+          style={{
+            fontWeight: "bold",
+            textTransform: "capitalize",
+            position: "absolute",
+            top: "10px",
+            right: "10px",
+          }}
         >
           Cancel
         </Button>

src/views/SalesCoOrdinators/AddMultipleSC.js

@@ -4,6 +4,7 @@ import swal from "sweetalert";
 import { isAutheticated } from "src/auth";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-hot-toast";
+import { Button } from "@mui/material";
 const AddMultiplesc = () => {
   const [file, setFile] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -110,12 +111,17 @@ const AddMultiplesc = () => {
   return (
     <div className="container mt-4">
       <div className="mb-6">
-        <button
+        <Button
           onClick={() => navigate("/salescoordinators")}
-          className="btn btn-secondary"
+          variant="contained"
+          color="secondary"
+          style={{
+            fontWeight: "bold",
+            textTransform: "capitalize",
+          }}
         >
           Back
-        </button>
+        </Button>
       </div>
       <h5 className="mb-6 mt-4">Add Multiple Sales Coordinators</h5>
       <div className="my-3">

src/views/SalesCoOrdinators/EditSalesCoOrdinator.js

@@ -3,7 +3,7 @@ import axios from "axios";
 import { useNavigate, useParams } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import Modal from "react-bootstrap/Modal";
-import Button from "react-bootstrap/Button";
+import { Button } from "@mui/material";
 import Form from "react-bootstrap/Form";
 import swal from "sweetalert";
 
@@ -71,7 +71,7 @@ const EditSalesCoOrdinator = () => {
       .patch(
         `/api/salescoordinator/profile/update/${id}`,
         {
-          uniqueId:formData.uniqueId,
+          uniqueId: formData.uniqueId,
           name: formData.name,
           email: formData.email,
         },
@@ -209,13 +209,18 @@ const EditSalesCoOrdinator = () => {
             <div className="col-12">
               <div className="page-title-box d-flex align-items-center justify-content-between">
                 <h4 className="mb-3">Edit Sales Coordinator</h4>
-                <button
+                <Button
                   onClick={onCancel}
-                  type="button"
+                  variant="contained"
-                  className="btn btn-warning btn-cancel waves-effect waves-light mr-3"
+                  color="secondary"
+                  style={{
+                    fontWeight: "bold",
+                    marginBottom: "0.5rem",
+                    textTransform: "capitalize",
+                  }}
                 >
                   Back
-                </button>
+                </Button>
               </div>
             </div>
           </div>

src/views/SalesCoOrdinators/SalesCoOrdinator.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
@@ -148,8 +148,21 @@ const SalesCoOrdinator = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
+                    // color="primary"
-                    className="font-bold mb-2 capitalize mr-2"
+                    style={{
+                      fontWeight: "bold",
+                      marginBottom: "0.5rem",
+                      textTransform: "capitalize",
+                      marginRight: "0.5rem",
+                    }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() => {
                       navigate("/salescoordinator/add", { replace: true });
                     }}
@@ -158,8 +171,20 @@ const SalesCoOrdinator = () => {
                   </Button>
                   <Button
                     variant="contained"
-                    color="primary"
+                    // color="primary"
-                    className="font-bold mb-2 capitalize"
+                    style={{
+                      fontWeight: "bold",
+                      marginBottom: "0.5rem",
+                      textTransform: "capitalize",
+                    }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() =>
                       navigate("/add-sales-coordinator/multiple", {
                         replace: true,

src/views/SalesCoOrdinators/ViewPrincipalDistributorSC.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Link, useParams } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
@@ -263,12 +263,19 @@ const ViewPrincipalDistributorSC = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
                     style={{
                       fontWeight: "bold",
                       marginBottom: "1rem",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={handleOpenModal}
                   >
                     Add Principal Distributor
@@ -281,11 +288,6 @@ const ViewPrincipalDistributorSC = () => {
                       marginBottom: "1rem",
                       marginLeft: "1rem",
                       textTransform: "capitalize",
-                      backgroundColor: "#d32f2f", // Red color for danger
-                      color: "#fff",
-                      "&:hover": {
-                        backgroundColor: "#b71c1c", // Darker red on hover
-                      },
                     }}
                     onClick={() => navigate("/salescoordinators")}
                   >

src/views/SalesCoOrdinators/ViewRetailDistributorSC.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Link, useParams } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
@@ -266,12 +266,19 @@ const ViewRetailDistributorSC = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
                     style={{
                       fontWeight: "bold",
                       marginBottom: "1rem",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={handleOpenModal}
                   >
                     Add Retailer
@@ -284,11 +291,6 @@ const ViewRetailDistributorSC = () => {
                       marginBottom: "1rem",
                       marginLeft: "1rem",
                       textTransform: "capitalize",
-                      backgroundColor: "#d32f2f", // Red color for danger
-                      color: "#fff",
-                      "&:hover": {
-                        backgroundColor: "#b71c1c", // Darker red on hover
-                      },
                     }}
                     onClick={() => navigate("/salescoordinators")}
                   >

src/views/TerritoryManager/AddMultipleTM.js

@@ -4,6 +4,7 @@ import swal from "sweetalert";
 import { isAutheticated } from "src/auth";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-hot-toast";
+import { Button } from "@mui/material";
 const AddMultipletm = () => {
   const [file, setFile] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -110,12 +111,17 @@ const AddMultipletm = () => {
   return (
     <div className="container mt-4">
       <div className="mb-6">
-        <button
+        <Button
           onClick={() => navigate("/territorymanagers")}
-          className="btn btn-secondary"
+          variant="contained"
+          color="secondary"
+          style={{
+            fontWeight: "bold",
+            textTransform: "capitalize",
+          }}
         >
           Back
-        </button>
+        </Button>
       </div>
       <h5 className="mb-6 mt-4">Add Multiple Territory Managers</h5>
       <div className="my-3">

src/views/TerritoryManager/EditTerritoryManager.js

@@ -212,7 +212,7 @@ const EditTerritoryManager = () => {
                 <button
                   onClick={onCancel}
                   type="button"
-                  className="btn btn-warning btn-cancel waves-effect waves-light mr-3"
+                  className="btn btn-danger btn-cancel waves-effect waves-light mr-3"
                 >
                   Back
                 </button>

src/views/TerritoryManager/TerritoryManager.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
@@ -148,8 +148,20 @@ const TerritoryManager = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
+                    style={{
-                    className="font-bold mb-2 capitalize mr-2"
+                      fontWeight: "bold",
+                      marginBottom: "0.5rem",
+                      textTransform: "capitalize",
+                      marginRight: "0.5rem",
+                    }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() => {
                       navigate("/territorymanager/add", { replace: true });
                     }}
@@ -158,8 +170,19 @@ const TerritoryManager = () => {
                   </Button>
                   <Button
                     variant="contained"
-                    color="primary"
+                    style={{
-                    className="font-bold mb-2 capitalize"
+                      fontWeight: "bold",
+                      marginBottom: "0.5rem",
+                      textTransform: "capitalize",
+                    }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={() =>
                       navigate("/add-territory-manager/multiple", {
                         replace: true,

src/views/TerritoryManager/ViewPrincipalDistributorTM.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Link, useParams } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
@@ -262,12 +262,19 @@ const ViewPrincipalDistributorTM = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
                     style={{
                       fontWeight: "bold",
                       marginBottom: "1rem",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={handleOpenModal}
                   >
                     Add Principal Distributor
@@ -280,11 +287,6 @@ const ViewPrincipalDistributorTM = () => {
                       marginBottom: "1rem",
                       marginLeft: "1rem",
                       textTransform: "capitalize",
-                      backgroundColor: "#d32f2f", // Red color for danger
-                      color: "#fff",
-                      "&:hover": {
-                        backgroundColor: "#b71c1c", // Darker red on hover
-                      },
                     }}
                     onClick={() => navigate("/territorymanagers")}
                   >

src/views/TerritoryManager/ViewRetailDistributor.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Link, useParams } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
@@ -266,12 +266,19 @@ const ViewRetailDistributorTM = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
                     style={{
                       fontWeight: "bold",
                       marginBottom: "1rem",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={handleOpenModal}
                   >
                     Add Retailer
@@ -284,11 +291,6 @@ const ViewRetailDistributorTM = () => {
                       marginBottom: "1rem",
                       marginLeft: "1rem",
                       textTransform: "capitalize",
-                      backgroundColor: "#d32f2f", // Red color for danger
-                      color: "#fff",
-                      "&:hover": {
-                        backgroundColor: "#b71c1c", // Darker red on hover
-                      },
                     }}
                     onClick={() => navigate("/territorymanagers")}
                   >

src/views/TerritoryManager/ViewSalesCoOrdinatorTM.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Link, useParams } from "react-router-dom";
 import axios from "axios";
-import Button from "@material-ui/core/Button";
+import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
@@ -260,12 +260,19 @@ const ViewSalesCoOrdinatorTM = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
                     style={{
                       fontWeight: "bold",
                       marginBottom: "1rem",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={handleOpenModal}
                   >
                     Add Sales Coordinator
@@ -278,11 +285,6 @@ const ViewSalesCoOrdinatorTM = () => {
                       marginBottom: "1rem",
                       marginLeft: "1rem",
                       textTransform: "capitalize",
-                      backgroundColor: "#d32f2f", // Red color for danger
-                      color: "#fff",
-                      "&:hover": {
-                        backgroundColor: "#b71c1c", // Darker red on hover
-                      },
                     }}
                     onClick={() => navigate("/territorymanagers")}
                   >

src/views/Transporter/Transporter.js

@@ -255,12 +255,19 @@ const Transporter = () => {
                 <div className="page-title-right">
                   <Button
                     variant="contained"
-                    color="primary"
                     style={{
                       fontWeight: "bold",
-                      marginBottom: "1rem",
+                      marginBottom: "0.5rem",
                       textTransform: "capitalize",
                     }}
+                    sx={{
+                      backgroundColor: "white",
+                      color: "black",
+                      "&:hover": {
+                        backgroundColor: "#0B0689",
+                        color: "white",
+                      },
+                    }}
                     onClick={handleOpen}
                   >
                     Add New Transporter

src/views/pages/login/Login.js

@@ -133,16 +133,19 @@ const Login = () => {
   };
 
   return (
-    <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
+    <div
+      className=" min-vh-100 d-flex flex-row align-items-center"
+      style={{ backgroundColor: "#179FAF" }}
+    >
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md={8}>
             <CCardGroup>
-              <CCard className="p-4">
+              <CCard className="p-4" style={{ backgroundColor: "#B4D1E5" }}>
                 <CCardBody>
                   <CForm>
-                    <h1>Cheminova</h1>
+                    <h1 className="fw-semibold ">Cheminova</h1>
-                    <p className="text-medium-emphasis">
+                    <p className="fw-semibold text-gray-700 text-base">
                       Sign In to Your Cheminova Admin Dashboard.
                     </p>
                     <CInputGroup className="mb-3">

src/views/widgets/WidgetsDropdown.js

@@ -141,7 +141,7 @@ const WidgetsDropdown = ({
         <CCol sm={6} lg={3}>
           <CWidgetStatsA
             className="mb-4"
-            color="primary"
+            color="warning"
             value={<>{users}</>}
             title="Total Principal Distributor"
           />
@@ -152,7 +152,7 @@ const WidgetsDropdown = ({
         <CCol sm={6} lg={3}>
           <CWidgetStatsA
             className="mb-4"
-            color="primary"
+            color="success"
             value={<>{retaildistributor}</>}
             title="Total Retailers"
           />
@@ -163,7 +163,7 @@ const WidgetsDropdown = ({
         <CCol sm={6} lg={3}>
           <CWidgetStatsA
             className="mb-4"
-            color="primary"
+            color="danger"
             value={<>{salescoordinator}</>}
             title="Total Sales Coordinator"
           />
@@ -250,7 +250,7 @@ const WidgetsDropdown = ({
         <CCol sm={6} lg={3}>
           <CWidgetStatsA
             className="mb-4"
-            color="primary"
+            color="warning"
             value={<>{product}</>}
             title="Total SKUs"
           />
@@ -258,7 +258,7 @@ const WidgetsDropdown = ({
         <CCol sm={6} lg={3}>
           <CWidgetStatsA
             className="mb-4"
-            color="primary"
+            color="success"
             value={<>{category}</>}
             title="Total Categories"
           />
@@ -266,7 +266,7 @@ const WidgetsDropdown = ({
         <CCol sm={6} lg={3}>
           <CWidgetStatsA
             className="mb-4"
-            color="primary"
+            color="danger"
             value={<>{Brand}</>}
             title="Total Brands"
           />