start Table😉

2024-09-05 20:21:47 +05:30
parent 5cef911f02
commit 9dd4e7755c
63 changed files with 1681 additions and 2535 deletions
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="https://www.wdipl.com/public/img/wdi_logo.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/fav_optifii_logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Webzilla</title>
+    <title>Optifii</title>
  </head>
  <body>
    <div id="root"></div>
@@ -34,6 +34,11 @@ const craftedMsg = "Crafted with ❤️ by WDI Team for a better web.";
 <!-- <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+<!-- <script>
+  document.addEventListener('contextmenu', function (event) {
+    event.preventDefault();
+  });
+</script> -->

  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "tanami-admin-dashboard",
+  "name": "optifii-employee",
  "version": "0.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "tanami-admin-dashboard",
+      "name": "optifii-employee",
      "version": "0.0.0",
      "dependencies": {
        "@chakra-ui/icons": "^2.1.1",
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "tanami-admin-dashboard",
+  "name": "optifii-employee",
  "private": true,
  "version": "0.0.0",
  "type": "module",
--- a/src/App.css
+++ b/src/App.css
@@ -3,15 +3,18 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0; 
  /* font-family: "League Spartan", sans-serif !important; */
-  font-family: "Poppins", sans-serif !important;
-  
+  /* font-family: "Poppins", sans-serif !important; */
  /* font-family: "Lato", sans-serif !important; */
+
+
+  font-family: "Montserrat", sans-serif !important;
 }

 .pointer {
@@ -24,6 +27,7 @@
  background: linear-gradient(
    to right,
    #7a45fb,
+    /* #764aaf67, */
    #de41b5
  ); /* Gradient background */
  -webkit-background-clip: text; /* Clip text to the background area */
@@ -32,11 +36,26 @@
 }

 .active {
-  background-color: #E5195E;
+  /* background-color: #210A33; */
  color: #fff;
-  /* background-color: #ced8e6a2; */
+  /* background-color: black; */
+  font-weight: 600 !important;
+}
+a.active{
+  border-left: 2px solid #fff;
+  background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
+}
+/* .chakra-accordion__item.css-1t7rcca:has(.active) {
+  background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
+  border-left: 2px solid #fff;
+} */
+.chakra-accordion__item .link:hover{
+  background:transparent !important;
+}
+.chakra-accordion__item .active{
+  background:transparent !important;
+  border: none;
 }
-
 .link {
  text-decoration: none;
  transition: all 0.2s ease-in-out;
@@ -44,13 +63,13 @@
 }

 .link:hover {
-  background-color: #ced8e6a2;
+  background-color: #947ea56e !important;
  /* color: #fff; */
  /* background-color: #e2e8f01c !important; */
 }

 .active:hover {
-  background-color: #E5195E;
+  background-color: #947ea56e !important;
  /* color: #fff; */
  /* background-color: #ced8e6a2 !important; */
 }
@@ -107,7 +126,7 @@
 }

 .primary-btn {
-  background-color: #E5195E !important;
+  background-color: #210A33 !important;
 }

 .team-slider .swiper-button-next:after {
--- a/src/Components/CutomBreadcrumb.jsx
+++ b/src/Components/CutomBreadcrumb.jsx
@@ -74,14 +74,14 @@ const CustomBreadcrumb = () => {
        size={"xs"}
        as={"span"}
      >
-        Master
-      </Button>{" "}
+        Dashboard
+      </Button>
      {breadcrumbs.map((item, index) => (
        <React.Fragment key={index}>
          
          <Text size={"md"}  as={"span"}>
          {/* <MinusIcon fontStyle={4} color={"#1A202C"}/> */}
-          -
+          /
          </Text>
          <Link to={item.path}>
          <Button
--- a/src/Components/DataTable/NormalTable.jsx
+++ b/src/Components/DataTable/NormalTable.jsx
@@ -20,8 +20,8 @@ const DataTable = ({
  tableHeadRow,
  emptyMessage,
  centered,
+  total,
 }) => {
-
  console.log(data);

  const columnWidth =
@@ -29,30 +29,39 @@ const DataTable = ({
      ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
      : "auto";
  return (
-    <TableContainer overflowX={"hidden"} className="h-auto mb-3 w-100">
+    <TableContainer
+      overflowX={"auto"}
+      className="h-auto w-100 table-scroll"
+    >
      {data?.length === 0 ? (
        <EmptySearchList message={emptyMessage} />
      ) : (
        <Table size="sm">
-          <TableCaption>Tanami v1.0.0</TableCaption>
-          <Thead backgroundColor="gray.50">
+          <TableCaption p={total ? 0 : null}>
+            {total ? total : "OptiFii v1.0.0"}
+          </TableCaption>
+          <Thead 
+          // bgGradient="linear(to-r, gray.50, gray.50)"
+          bg="#6311cb37"
+          >
            <Tr>
              {tableHeadRow.map((heading, index) => (
                <Th
+                  color={"purple.900"}
+                  // fontSize={'sm'}
                  textAlign={
                    tableHeadRow.length - 1 === index || centered
                      ? "center"
                      : "left"
                  }
                  key={index}
-                  p={3}
-                  width="20px" // Adjust width as needed
-                  color={"#004118"}
+                  p={4}
+                  // width="20px" // Adjust width as needed
+                  // color={"#fff"}
                  whiteSpace="normal" // Allow text to wrap
                  wordBreak="normal" // Ensure long words break properly
                  overflowWrap="normal" // Break long words if necessary
-                  textTransform={'none'}
-                  
+                  textTransform={"none"}
                >
                  {isLoading ? <Skeleton height="20px" /> : heading}
                  {/* {heading} */}
@@ -62,26 +71,29 @@ const DataTable = ({
          </Thead>
          <Tbody className="web-text-small">
            {isLoading
-              ? Array.from({ length: TABLE_PAGINATION?.size }).map((_, index) => (
-                  <Tr key={index}>
+              ? Array.from({ length: TABLE_PAGINATION?.size }).map(
+                  (_, index) => (
+                    <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
                      {tableHeadRow.map((_, i) => (
                        <Td
-                      width={'fit-content'}
+                          // width={"fit-content"}
                          key={i}
                          style={{
                            whiteSpace: "nowrap",
                            textOverflow: "ellipsis",
                          }}
+
                          className="web-text-small"
-                        w={columnWidth}
+                          // w={columnWidth}
                        >
                          <Skeleton height="20px" mb={1} mt={1} />
                        </Td>
                      ))}
                    </Tr>
-                ))
+                  )
+                )
              : data?.map((item, index) => (
-                  <Tr key={index}>
+                  <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
                    {tableHeadRow.map((heading, i) => (
                      <Td
                        textAlign={
@@ -91,6 +103,7 @@ const DataTable = ({
                        }
                        color={"gray.600"}
                        key={i}
+                        fontWeight={500}
                        style={{
                          whiteSpace: "nowrap",
                          textOverflow: "ellipsis",
--- a/src/Components/EmptySearchList.jsx
+++ b/src/Components/EmptySearchList.jsx
@@ -1,6 +1,6 @@
 import { Box, Image, Text } from "@chakra-ui/react"
 // import EmptySearchListImage from "../assets/empty_state_empty_folder.svg"
-import EmptySearchListImage from "../assets/EmptySearchList.png"
+// import EmptySearchListImage from "../assets/EmptySearchList.png"

 const EmptySearchList = ({message}) => {
  return (
@@ -11,7 +11,7 @@ const EmptySearchList = ({message}) => {
    flexDirection={'column'}
    w={"100%"} h={"40vh"}  
    >
-        <Image w={200} mb={8}  src={EmptySearchListImage} alt='empty list' />
+        {/* <Image w={200} mb={8}  src={EmptySearchListImage} alt='empty list' /> */}
        {/* <Text className=" fw-bold fs-5" >{message}</Text> */}
        <Text className=" fw-bold fs-5" >We do not have any records</Text>
        {/* <Text as={'p'} className="web-text-medium">Posts of tanami will appear here.</Text> */}
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -1,9 +1,19 @@
-import { AddIcon, ArrowBackIcon } from "@chakra-ui/icons";
+import {
+  AddIcon,
+  ArrowBackIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  SearchIcon,
+} from "@chakra-ui/icons";
 import {
  Avatar,
  Box,
  Button,
  HStack,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
  Popover,
  PopoverArrow,
  PopoverBody,
@@ -14,52 +24,93 @@ import {
  Text,
  useColorMode,
 } from "@chakra-ui/react";
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { IoMdDownload } from "react-icons/io";
 import * as XLSX from "xlsx";
-import profile from "../assets/proavatar.webp";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
-import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
-import logoMini from "../assets/propic.png"
-import { BsBack } from "react-icons/bs";
+import mainLogo from "../assets/optifii_logo.svg";
+import { MdNotificationsNone } from "react-icons/md";

 const HeaderMain = ({ 
-  link,
-  btnTitle,
-  title,
-  icon,
  logOutHandler,
  slideDirecttion,
+  isDrawerOpen,
+  toggleDrawer,
 }) => {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
  const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");

+  const openDrawerOnClick = () => {};

  return (
    <Box
+      w={"100%"}
+      h={{base:"8%", lg:"8%"}}
+      position={"relative"}
      className={` pt-2 pb-2  fw-400 border-bottom d-flex ${
-        slideDirecttion ? "flex-row-reverse ps-2" : ""
+        slideDirecttion ? " ps-2" : ""
      }  justify-content-between align-items-center`}
-      // boxShadow={"0 0px 8px rgba(0, 0, 0, 0.2)"}
-
      zIndex={999}
    >
-      <HStack>
-      {/* <ArrowBackIcon onClick={()=>navigate(-1)} /> */}
-      <Text
-        as={"span"}
-        fontWeight={"500"}
-        // color={"forestGreen.500"}
-        color={'black.100'}
-        fontSize={'sm'}
+      <Box display={"flex"} alignItems={"center"}>
+        <Box w={"230px"} display={"flex"} alignItems={"center"} justifyContent={"space-between"}>
+          <Box
+            className={`d-flex  ${
+              true ? "justify-content-start" : "justify-content-center"
+            }  p-4 pt-0 pb-0 position-relative `}
          >
-        {/* <icon /> */}
-        {title}
-      </Text>
-      </HStack>
-
+            <Image
+              style={{
+                width: 95,
+              }}
+              src={mainLogo}
+              alt="Logo"
+              onClick={() => navigate("/")}
+              cursor={"pointer"}
+            />
+          </Box>
+          <Button
+            colorScheme={"forestGreen"}
+            rounded={"lg"}
+            onClick={toggleDrawer}
+            style={{
+              width: "28px",
+              height: "28px",
+              minWidth: "28px",
+              zIndex: 99,
+              backgroundColor: "#6311CB29",
+            }}
+          >
+            {isDrawerOpen ? (
+              <ArrowLeftIcon className="web-text-small" color={"#6311CB"} />
+            ) : (
+              <ArrowRightIcon className="web-text-small "  color={"#6311CB"} />
+            )}
+          </Button>
+        </Box>

+        <InputGroup width={350} size="sm" ml={5}>
+          <InputLeftElement pointerEvents="none">
+            <SearchIcon color="gray.300" />
+          </InputLeftElement>
+          <Input
+            type="search"
+            placeholder="Type to search..."
+            rounded="md"
+            focusBorderColor="#3725EA"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </InputGroup>
+      </Box>
+      <Box display={"flex"} justifyContent={"space-between"}>
+        <Box display={"flex"} gap={2}>
+          <Box display={"flex"} gap={2} alignItems={'center'} me={2}>
+            <Button size={'sm'} bg={"none"} p={0}>
+              <MdNotificationsNone fontSize={"20px"} />
+            </Button>
+          </Box>
          <Box me={4} gap={2} className="d-flex justify-content-center ">
            <Popover placement="bottom">
              <Portal>
@@ -82,19 +133,8 @@ const HeaderMain = ({
                </PopoverContent>
              </Portal>
              <PopoverTrigger>
-            <Box
-              // onClick={logOutHandler}
-              className="d-flex pointer  align-items-center"
-            >
-              <Avatar
-                size="sm"
-                boxSize={37}
-                // name="D"
-                // src={logoMini}
-                bg={"#000"}
-                
-                // p={1}
-              />
+                <Box className="d-flex pointer  align-items-center">
+                  <Avatar size="sm" boxSize={37} bg={"#210a33"} />
                  <Box
                    style={{
                      display: "flex",
@@ -105,16 +145,14 @@ const HeaderMain = ({
                      Hello, Developers
                    </Text>
                    <Text as={"span"} className="web-text-xsmall">
-                  wdi@tanami.com
+                      mailto:wdi@tanami.com
                    </Text>
                  </Box>
                </Box>
              </PopoverTrigger>
            </Popover>
-
-        {/* <Box onClick={() => toggleColorMode()} as="span" p={2} rounded={'lg'} className="link pointer">
-          {colorMode === "light"?  <MdOutlineDarkMode /> :<MdOutlineLightMode />}
-        </Box> */}
+          </Box>
+        </Box>
      </Box>
    </Box>
  );
--- a/src/Components/MiniHeader.jsx
+++ b/src/Components/MiniHeader.jsx
@@ -0,0 +1,49 @@
+import { ArrowBackIcon } from "@chakra-ui/icons";
+import { Box, HStack, Icon, Text, VStack } from "@chakra-ui/react";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const MiniHeader = ({ title, subTitle, backButton }) => {
+  const navigate = useNavigate();
+  const [firstPart, secondPart] = title.split(/ (.+)/);
+
+  return ( 
+    <HStack gap={3} mb={4}>
+      {backButton && (
+        <Icon
+         boxShadow='md'
+          cursor={"pointer"}
+          onClick={() => navigate(-1)}
+          as={ArrowBackIcon}
+          boxSize={7}
+          bg={"#fff"}
+          p={1}
+          rounded={"full"}
+        />
+      )}
+      <VStack alignItems={"start"} gap={1}>
+        <Box as="span" display={"flex"} gap={2}>
+          <Text fontSize={"lg"} as={"span"} fontWeight={600}>
+            {firstPart}
+          </Text>
+
+          <Text
+            bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+            bgClip="text"
+            fontSize={"lg"}
+            as={"span"}
+            fontWeight={600}
+          >
+            {secondPart}
+          </Text>
+        </Box>
+
+        <Text fontSize={"xs"} color={"gray.500"} fontWeight={500} as={"span"}>
+          {subTitle}
+        </Text>
+      </VStack>
+    </HStack>
+  );
+};
+
+export default MiniHeader;
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -28,15 +28,6 @@ import { nav } from "../Routes/Nav";
 import {
  Avatar,
  Box,
-  Button,
-  PopoverArrow,
-  PopoverBody,
-  PopoverCloseButton,
-  PopoverContent,
-  PopoverFooter,
-  PopoverHeader,
-  PopoverTrigger,
-  Portal,
  Text,
  WrapItem,
  Popover,
@@ -51,6 +42,7 @@ import {
  AlertIcon,
  Breadcrumb,
  Divider,
+  Button,
 } from "@chakra-ui/react";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import Cookies from "js-cookie"; // Import the Cookies library
@@ -64,7 +56,11 @@ import {
  RiMoneyDollarBoxLine,
 } from "react-icons/ri";
 import { VscSymbolClass } from "react-icons/vsc";
-import { MdNotificationsNone, MdOutlineAddChart, MdOutlineTaskAlt } from "react-icons/md";
+import {
+  MdNotificationsNone,
+  MdOutlineAddChart,
+  MdOutlineTaskAlt,
+} from "react-icons/md";
 import { HiOutlineChartSquareBar } from "react-icons/hi";
 import { GrManual, GrNotification } from "react-icons/gr";
 import { LuContact } from "react-icons/lu";
@@ -74,14 +70,14 @@ import CutomBreadcrumb from "../Components/CutomBreadcrumb";
 import CustomBreadcrumb from "../Components/CutomBreadcrumb";
 import { getCountdownTimer } from "../Constants/Constants";
 import { FiHome } from "react-icons/fi";
+import compLogo from "../assets/complogo.svg";

 const DashboardLayout = ({ isOnline }) => {
  const navigate = useNavigate();
  const dispach = useDispatch();
  const location = useLocation();
  const path = location.pathname;
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [openDrawerClick, setOpenDrawerClick] = useState(true);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
  const {
    setIsAuthenticate,
    colorMode,
@@ -115,17 +111,17 @@ const DashboardLayout = ({ isOnline }) => {
    return () => clearTimeout(timer);
  }, []);

-  const openDrawerOnClick = () => {
-    setOpenDrawerClick(!openDrawerClick);
+  const toggleDrawer = () => {
+    setIsDrawerOpen(!isDrawerOpen);
  };

  const logOutHandler = () => {
    // dispach(loginUser(false));
    setIsAuthenticate(false);
    Cookies.remove("isAuthenticated");
-    localStorage.removeItem('refreshToken')
-    localStorage.removeItem('accessToken')
-    localStorage.removeItem('refreshTokenExp')
+    localStorage.removeItem("refreshToken");
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("refreshTokenExp");
    navigate("/login");
  };

@@ -317,9 +313,7 @@ const DashboardLayout = ({ isOnline }) => {
        );

      default:
-        return <span className="d-flex align-items-end  gap-2">
-        <FiHome className="fs-5" /> Home
-      </span>
+        return <span className="d-flex align-items-end  gap-2">Home</span>;
    }
  };

@@ -328,10 +322,18 @@ const DashboardLayout = ({ isOnline }) => {
  }

  return (
+    <Box height={"100vh"}>
+      <HeaderMain
+        isDrawerOpen={isDrawerOpen}
+        logOutHandler={logOutHandler}
+        toggleDrawer={toggleDrawer}
+        icon
+        title={getTitle()}
+      />
      <Box
+        h={{ base: "92%", lg: "96%" }}
        style={{
-        height: "100vh",
-        width: "100vw",
+          width: "100%",
          position: "relative",
          overflow: "hidden",
        }}
@@ -356,125 +358,82 @@ const DashboardLayout = ({ isOnline }) => {
          No Internet !
        </Alert>

-      {/* <Box
-        bottom={4}
-        right={!slideFromRight ? 4 : "auto"}
-        left={slideFromRight ? 4 : "auto"}
-        backgroundColor={"#fff"}
-        rounded={"full"}
-        p={2}
-        w={8}
-        h={8}
-        display={"flex"}
-        justifyContent={"center"}
-        alignItems={"center"}
-        color={"#004118"}
-        fontWeight={"800"}
-        cursor={"pointer"}
-        position={"absolute"}
-        transition={"0.5s"}
-        boxShadow={"md"}
-        onClick={() => setSlideFormRight(!slideFromRight)}
-        _hover={{
-          opacity: 1,
-        }}
-        zIndex={999}
-      >
-        <IoMdSwap />
-      </Box> */}
-
-      {slideFromRight ? null : (
-        <aside
-          className="h-100  position-relative sideBar  "
-          // onMouseOver={() => setIsDrawerOpen(true)}
-          // onMouseLeave={() => setIsDrawerOpen(false)}
-          style={{
-            width: isDrawerOpen || openDrawerClick ? 230 : 74,
-            transition: "width 0.3s ease-in-out", // Smooth transition for width change
-            // overflow: "hidden",
-            backgroundColor: "#f1f2f6",
-            position: "relative",
-            // backgroundColor: "#002F0F",
-          }}
-        >
-          <div
-            className={`d-flex  ${
-              isDrawerOpen || openDrawerClick
-                ? "justify-content-start"
-                : "justify-content-center"
-            }  p-3 pt-3 pb-3 position-relative `}
-            height={"10%"}
-          >
-            {isDrawerOpen || openDrawerClick ? (
-              <Image
-                style={{
-                  width: 30,
-                }}
-                src={"https://www.wdipl.com/public/img/black_logo.svg"}
-                alt="Logo"
-                onClick={()=> navigate('/')}
-                cursor={"pointer"}
-              />
-            ) : (
-              <Image
-                style={{
-                  width: 30,
-                }}
-                src={"https://www.wdipl.com/public/img/black_logo.svg"}
-                alt="Logo"
-                onClick={()=> navigate('/')}
-                cursor={"pointer"}
-              />
-            )}
-          </div>
-
        <Box
-            className="ps-2 scroll-bar pe-1"
+          className="h-100 position-relative sideBar"
          style={{
-              height: "90%",
+            width: isDrawerOpen ? 250 : 0,
+            transition: "width 0.3s ease-in-out, transform 0.3s ease-in-out", // Smooth transition for width and transform
+            backgroundColor: "#210A33",
+            position: "relative",
+            color: "#fff",
+            transform: isDrawerOpen ? "translateX(0)" : "translateX(-250px)", // Move box to the left when closed
+          }}
+        >
+          <Box
+            className="ps-2 scroll-bar pe-1 pt-3"
+            style={{
+              height: "100%",
              overflowY: "scroll",
              overflowX: "hidden",
              paddingBottom: "5rem",
            }}
          >
+            <Box
+              display={"flex"}
+              alignItems={"center"}
+              bg={" #FFFFFF26"}
+              p={2}
+              // m={2}.
+              mb={2}
+              rounded="md"
+            >
+              <Image me={2} src={compLogo} />
+              <Text as={"span"} fontSize="10px">
+                Website Developers India Pvt Ltd
+              </Text>
+            </Box>
            <Accordion
              m={0}
+              // px={0}
              allowToggle
              defaultIndex={-1}
              index={openIndex}
              onChange={handleAccordionChange}
            >
-              {nav.map(({ title, type, Icon, submenu, path, colorCode }, index) => {
+              {nav.map(
+                ({ title, type, Icon, submenu, path, colorCode }, index) => {
                  if (type === "accordion") {
                    return (
-                    <AccordionItem key={index} border={"none"}>
+                      <AccordionItem
+                        key={index}
+                        border={"none"}
+                        // style={{ borderRadius: "2px", marginBottom: "8px" }}
+                      >
                        <AccordionButton
-                        style={{ height: "auto" }}
+                          style={{ height: "auto", borderRadius: "2px" }}
                          _hover={{ bg: "#ced8e6a2" }}
                          className={`${
-                          isDrawerOpen || openDrawerClick
-                            ? "p-2 web-text-medium ps-3 justify-content-between"
+                            true
+                              ? "p-2   web-text-medium ps-2 justify-content-between"
                              : "p-2 ps-1 web-text-xlarge justify-content-center"
-                        } rounded-1 link d-flex align-items-center gap-2 w-100 mb-1`}
+                          }  link d-flex align-items-center gap-2 w-100 mb-1`}
                        >
                          <Box
-                          as="span"
                            display={"flex"}
                            gap={2}
                            alignItems={"center"}
+                            style={{ height: "auto", borderRadius: "2px" }}
+                            // _hover={{ bg: "#ced8e6a2" }}
                          >
                            {/* {Icon && title === "Admin" ? <Image w={15} src={shield} /> : <Icon className={`web-text-large`} />} */}
                            {Icon && (
                              <Icon
-                            
                                fontSize={title === "Admin" ? "18px" : "15px"}
                              />
                            )}
                            <Text
                              as={"span"}
-                            display={
-                              isDrawerOpen || openDrawerClick ? "flex" : "none"
-                            }
+                              display={true ? "flex" : "none"}
                              alignItems="center"
                              overflow="hidden"
                              textAlign={"left"}
@@ -493,62 +452,45 @@ const DashboardLayout = ({ isOnline }) => {
                        >
                          {submenu?.map(
                            (
-                            { title: subMenuTitle, path: link, icon: SubIcon, colorCode },
+                              {
+                                title: subMenuTitle,
+                                path: link,
+                                icon: SubIcon,
+                                colorCode,
+                              },
                              i
                            ) => (
                              <Box
                                key={i}
-                              style={{ height: "auto", position: "relative" }}
+                                style={{
+                                  height: "auto",
+                                  position: "relative",
+                                }}
                                className={`${
-                                isDrawerOpen || openDrawerClick
+                                  true
                                    ? " web-text-medium ps-4 "
                                    : " web-text-xlarge  justify-content-center"
                                }  d-flex align-items-center  p-0`}
                              >
-                              <Box
-                                backgroundColor={"gray.300"}
-                                style={{
-                                  position: "absolute",
-                                  top: 0,
-                                  width: 2,
-                                  left: 22,
-                                  height:
-                                    i === submenu?.length - 1 ? "55%" : "120%",
-                                  borderRadius: "0 0 10px 10px",
-                                }}
-                              />
-                              <Box
-                                backgroundColor={"gray.300"}
-                                style={{
-                                  position: "absolute",
-                                  width: 10,
-                                  left: 22,
-                                  height: 2,
-                                }}
-                              />
-
                                <NavLink
+                                  style={{ borderRadius: "2px" }}
                                  className={`${
-                                  isDrawerOpen || openDrawerClick
+                                    true
                                      ? "p-2 ps-1 ms-2 web-text-medium "
                                      : "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
-                                } rounded-1 link d-flex align-items-center gap-2 w-100 `}
+                                  }  link d-flex align-items-center gap-2 w-100  mx-2`}
                                  to={link}
                                >
                                  {SubIcon && (
                                    <SubIcon
-                                    className="web-text-large ms-2"
-                                    style={{ zIndex: 111, color:colorCode?colorCode:"" }}
-
+                                      fontSize={"8px"}
+                                      className="ms-2"
+                                      // style={{ zIndex: 111, color:colorCode?colorCode:"" }}
                                    />
                                  )}
                                  <Text
                                    as={"span"}
-                                  display={
-                                    isDrawerOpen || openDrawerClick
-                                      ? "flex"
-                                      : "none"
-                                  }
+                                    display={true ? "flex" : "none"}
                                    alignItems="center"
                                    overflow="hidden"
                                  >
@@ -575,20 +517,22 @@ const DashboardLayout = ({ isOnline }) => {
                    return (
                      <NavLink
                        key={index}
-                      style={{ height: "auto", position: "relative" }}
+                        style={{
+                          height: "auto",
+                          position: "relative",
+                          borderRadius: "2px",
+                        }}
                        className={`${
-                        isDrawerOpen || openDrawerClick
-                          ? "p-2 web-text-medium"
-                          : "p-2 ps-0 web-text-xlarge justify-content-start"
-                      } rounded-1 link d-flex align-items-center gap-2 w-100 mb-2`}
+                          true
+                            ? "p-2 px-0 web-text-medium"
+                            : "p-2 px-0  ps-0 web-text-xlarge justify-content-start"
+                        }  link d-flex align-items-center gap-2 w-100 mb-2`}
                        to={path}
                      >
                        {Icon && <Icon className="web-text-large ms-2" />}
                        <Text
                          as={"span"}
-                        display={
-                          isDrawerOpen || openDrawerClick ? "flex" : "none"
-                        }
+                          display={true ? "flex" : "none"}
                          alignItems="center"
                          overflow="hidden"
                        >
@@ -599,61 +543,34 @@ const DashboardLayout = ({ isOnline }) => {
                  } else {
                    return null;
                  }
-              })}
+                }
+              )}
            </Accordion>
          </Box>
+        </Box>

-          {/* <Button
-            colorScheme={"forestGreen"}
-            rounded={"lg"}
-            // onMouseOver={() => setIsDrawerOpen(true)}
-            // onMouseLeave={() => setIsDrawerOpen(false)}
-            onClick={openDrawerOnClick}
+        <Box
          style={{
-              width: 18,
-              height: 26,
-              position: "absolute",
-              right: -19,
-              bottom: 28,
-              zIndex: 99,
-            }}
-          >
-            {isDrawerOpen || openDrawerClick ? (
-              <ArrowLeftIcon className="web-text-small" />
-            ) : (
-              <ArrowRightIcon className="web-text-small " />
-            )}
-          </Button> */}
-          <Text textAlign={'center'} fontWeight={500} fontSize={'xs'} color={"gray.600"}>{getCountdownTimer(localStorage.getItem('accessTokenExp'))}</Text>
-
-        </aside>
-      )}
-
-      <main
-        className={`h-100   ${slideFromRight ? "pe-3" : "ps-3"} d-flex flex-column gap-0`}
-        style={{
-          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 230 : 74}px)`,
+            width: `calc(100% - ${isDrawerOpen ? 250 : 0}px)`,
            transition: "width 0.3s ease-in-out",
-
+            backgroundColor: "#F3F3F9",
+            display: "flex",
+            flexDirection: "column",
+            gap: 0,
          }}
        >
-        {/* <header className="p-2 ps-0 pt-3 fw-400  border-bottom">
-          <span className="fs-5">{getTitle()}</span>
-        </header> */}
-
-        <HeaderMain
+          {/* <HeaderBox
          slideDirecttion={slideFromRight}
          logOutHandler={logOutHandler}
          icon
          title={getTitle()}
-        />
+        /> */}

-      {/* <CustomBreadcrumb /> */}
+          <CustomBreadcrumb />

          <AppContent />
-      </main>
-
-    
+        </Box>
+      </Box>
    </Box>
  );
 };
--- a/src/Pages/Dashboard/Dashbaord.jsx
+++ b/src/Pages/Dashboard/Dashbaord.jsx
--- a/src/Pages/Expenses/Expenses.jsx
+++ b/src/Pages/Expenses/Expenses.jsx
@@ -0,0 +1,16 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const Expenses = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"Manage Expenses"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+      />
+    </Box>
+  );
+};
+
+export default Expenses;
--- a/src/Pages/HelpAndSupport/HelpAndSupport.jsx
+++ b/src/Pages/HelpAndSupport/HelpAndSupport.jsx
@@ -0,0 +1,16 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const HelpAndSupport = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"Contact Us"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+      />
+    </Box>
+  );
+};
+
+export default HelpAndSupport;
--- a/src/Pages/Login.jsx
+++ b/src/Pages/Login.jsx
@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import Input01 from "../Components/Inputs/Input01";
-import logo from "../assets/logo2.png";
+import logo from "../assets/optifii_logo.png";
 import { useDispatch, useSelector } from "react-redux";
 import { loginUser } from "../Redux/Slice/auth";
 import { useContext, useEffect, useState } from "react";
@@ -125,13 +125,6 @@ const Login = () => {
      
    >
      
-<Box width={"450px"} display={'flex'} justifyContent={'center'}>
-          <Image 
-          w={300}
-            src={"https://www.wdipl.com/public/img/black_logo.svg"}
-            alt="img"
-            
-          /></Box>
      <Box
      as="form"
        onSubmit={handleSubmit(onSubmit)}
@@ -149,14 +142,17 @@ const Login = () => {
        }}
        rounded={'sm'}
      >
-        {/* <div className="d-flex flex-column"> */}
-          <Text fontSize={'lg'} fontWeight={600} color={'gray.900'} className="mt-2 rubix-text-dark text-center">
-            LOGIN
+        <Image 
+            w={100}
+            src={logo}
+            alt="img"
+            
+          />
+        <div className="d-flex flex-column">
+          <Text fontSize={'lg'} fontWeight={600} color={'gray.900'} className="mt-2 rubix-text-dark text-start">
+            Welcome
          </Text>
-          {/* <span className="fw-500  web-text-large text-secondary text-start">
-            Login to manage tanami.
-          </span> */}
-        {/* </div> */}
+        </div>

        <FormControl className=" mb-3">
          <FormLabel className="rubix-text-dark ps-1 web-text-medium fw-bold">
@@ -202,7 +198,8 @@ const Login = () => {
                h="1.75rem"
                size="sm"
                fontSize={"xs"}
-                color={"#E5195E"}
+                colorScheme={"deepPurple"}
+                // variant={"ghost"}
                onClick={handleClick}
              >
                {show ? "Hide" : "Show"}
@@ -222,7 +219,7 @@ const Login = () => {
          type="submit"
          className="w-100 primary-btn"
          color={"whitesmoke"}
-          // colorScheme="red.500"
+          colorScheme="red.500"
          size="lg"
          rounded={'sm'}
        >
--- a/src/Pages/ManageHumanResource/Approvers.jsx
+++ b/src/Pages/ManageHumanResource/Approvers.jsx
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const Approvers = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      />
+    </Box>
+  );
+};
+
+export default Approvers;
--- a/src/Pages/ManageHumanResource/Employees.jsx
+++ b/src/Pages/ManageHumanResource/Employees.jsx
@@ -0,0 +1,252 @@
+import {
+  Box,
+  Button,
+  Divider,
+  HStack,
+  Icon,
+  Input,
+  Radio,
+  Tag,
+  TagLabel,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { AddIcon, CalendarIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
+import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
+import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { FaRegEye } from "react-icons/fa";
+import { PiReceipt } from "react-icons/pi";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { Link } from "react-router-dom";
+
+const Employees = () => {
+  const { employees } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  useEffect(() => {
+    // Set isLoading to true
+    setIsLoading(true);
+
+    // Simulate a 3-second delay
+    const timer = setTimeout(() => {
+      setIsLoading(false); // Set isLoading to false after 3 seconds
+    }, 500);
+
+    // Cleanup the timer when the component unmounts or when the useEffect re-runs
+    return () => clearTimeout(timer);
+  }, []); // Empty dependency array means this effect runs once after the component mounts
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    "Emp ID",
+    "Name",
+    "Email Address",
+    "Mobile number",
+    "Grade",
+    "Department",
+    "Role",
+    "Status",
+    "Action",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = employees.map((item, index) => ({
+    "Emp ID": (
+      <Radio colorScheme="purple" value="1">
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+        >
+          <Icon
+            as={PiReceipt}
+            boxSize={8}
+            p={1.5}
+            bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
+            rounded={"full"}
+          />
+          {item?.EmpID}
+        </Text>
+      </Radio>
+    ),
+    "Name": item?.Name,
+    "Email Address": item?.emailAddress,
+    "Mobile number": item?.mobileNumber,
+    "Grade": item?.Grade,
+    "Department": item?.Department,
+    "Role": item?.Role,
+    Status: (
+      <Tag
+        my={1}
+        size={"sm"}
+        borderRadius="full"
+        colorScheme={
+          item?.status === "Approved"
+            ? "green"
+            : item?.status === "Fully Reimbursed"
+            ? "purple"
+            : item?.status === "Disapproved"
+            ? "red"
+            : item?.status === "Saved"
+            ? "yellow"
+            : item?.status === "Partially Reimbursed"
+            ? "orange"
+            : "gray" // default color scheme if status doesn't match any condition
+        }
+        border={`1px solid ${
+          item?.status === "Approved"
+            ? "green"
+            : item?.status === "Fully Reimbursed"
+            ? "purple"
+            : item?.status === "Disapproved"
+            ? "red"
+            : item?.status === "Saved"
+            ? "orange"
+            : item?.status === "Partially Reimbursed"
+            ? "orange"
+            : "gray" // default border color if status doesn't match any condition
+        }`}
+        p={1}
+        px={3}
+      >
+        <TagLabel>{item?.status}</TagLabel>
+      </Tag>
+    ),
+    Actions: (
+      <Box
+        display={"flex"}
+        gap={1}
+        alignItems={"center"}
+        justifyContent={"center"}
+      >
+        <Button
+          _hover={{ color: "gray.800", bg: "gray.100" }}
+          transition={"0.5s"}
+          size={"sm"}
+          bg={"none"}
+          p={0}
+          color="gray.600"
+        >
+          <FaRegEye fontSize={"18px"} />
+        </Button>
+        <Button
+          _hover={{ color: "gray.800", bg: "gray.100" }}
+          transition={"0.5s"}
+          size={"sm"}
+          bg={"none"}
+          p={0}
+          color="gray.600"
+        >
+          <AiOutlineEdit fontSize={"19px"} />
+        </Button>
+        <Button
+          _hover={{ color: "gray.800", bg: "gray.100" }}
+          transition={"0.5s"}
+          size={"sm"}
+          bg={"none"}
+          p={0}
+          color="gray.600"
+        >
+          <RiDeleteBin5Line fontSize={"18px"} />
+        </Button>
+      </Box>
+    ),
+  }));
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <Box
+        rounded={"xl"}
+        py={3}
+        // pb={0}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
+        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+          <Box display={"flex"} justifyContent={"space-between"} alignItems={"center"} w={"100%"}>
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="md"
+              focusBorderColor="#3725EA"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <Box>
+              
+              <Link to={"#"}>
+                <Button
+                  leftIcon={<AddIcon />}
+                   bgGradient="linear(to-r, #3725EA, #5E0FCD)"
+                  rounded={"md"}
+                  size={"sm"}
+                  fontSize={"xs"}
+                  color={"#fff"}
+                >
+                  Add Employee
+                </Button>
+              </Link>
+            </Box>
+          </Box>
+          <Divider />
+          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+            <Button
+              fontWeight={500}
+              size={"sm"}
+              leftIcon={<CalendarIcon color={"purple.800"} />}
+              colorScheme="gray"
+              color={"gray.700"}
+              variant="outline"
+              fontSize={"xs"}
+            >
+              Select Date Range
+            </Button>
+
+            <Button
+              _hover={{
+                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+                opacity: 0.8,
+              }}
+              bgGradient="linear(to-r, #3725EA, #5E0FCD)"
+              fontSize={"xs"}
+              px={8}
+              fontWeight={500}
+              size={"sm"}
+              color={"#fff"}
+              variant="outline"
+              transition={"0.5s all"}
+              _active={{
+                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+                opacity: 1,
+              }}
+            >
+              Add to Report
+            </Button>
+          </HStack>
+        </VStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default Employees;
--- a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles.jsx
+++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles.jsx
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const ManageDepartmentAndRoles = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      />
+    </Box>
+  );
+};
+
+export default ManageDepartmentAndRoles;
--- a/src/Pages/NotFound.jsx
+++ b/src/Pages/NotFound.jsx
@@ -13,7 +13,14 @@ const NotFound = () => {
    flexDirection={'column'}
    gap={8}
    >
-        <Image src={robot} w={"500px"} />
+        {/* <Image src={robot} w={"500px"} /> */}<Text
+  bgGradient='linear(to-l, #5000FF, #50006B)'
+  bgClip='text'
+  fontSize='6xl'
+  fontWeight='bold'
+>
+  Comming Soon...
+</Text>
        <Text color={'green.800'} as={'span'} fontSize={'small'}>🚧 Developing something amazing for you. 🚧</Text>
    </Box>
  )
--- a/src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx
+++ b/src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const AdvanceExpenseRequest = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      />
+    </Box>
+  );
+};
+
+export default AdvanceExpenseRequest;
--- a/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx
+++ b/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const ReimbursementRequest = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      />
+    </Box>
+  );
+};
+
+export default ReimbursementRequest;
--- a/src/Pages/OptiFiiExpense/WalletProgram.jsx
+++ b/src/Pages/OptiFiiExpense/WalletProgram.jsx
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const WalletProgram = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      />
+    </Box>
+  );
+};
+
+export default WalletProgram;
--- a/src/Pages/OptiFiiGifsAndVouchers/OptiFiiGifsAndVouchers.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/OptiFiiGifsAndVouchers.jsx
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const OptiFiiGifsAndVouchers = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      />
+    </Box>
+  );
+};
+
+export default OptiFiiGifsAndVouchers;
--- a/src/Pages/OptiFiiTaxBenefit/OptiFiiTaxBenefit.jsx
+++ b/src/Pages/OptiFiiTaxBenefit/OptiFiiTaxBenefit.jsx
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const OptiFiiTaxBenefit = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      />
+    </Box>
+  );
+};
+
+export default OptiFiiTaxBenefit;
--- a/src/Pages/Report/Report.jsx
+++ b/src/Pages/Report/Report.jsx
@@ -0,0 +1,186 @@
+import {
+  Box,
+  Button,
+  Divider,
+  HStack,
+  Icon,
+  Tag,
+  TagLabel,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { CalendarIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
+import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { FaRegEye } from "react-icons/fa";
+import { PiReceipt } from "react-icons/pi";
+
+const Report = () => {
+  const { reportsHistory } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    // Set isLoading to true
+    setIsLoading(true);
+
+    // Simulate a 3-second delay
+    const timer = setTimeout(() => {
+      setIsLoading(false); // Set isLoading to false after 3 seconds
+    }, 500);
+
+    // Cleanup the timer when the component unmounts or when the useEffect re-runs
+    return () => clearTimeout(timer);
+  }, []); // Empty dependency array means this effect runs once after the component mounts
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    "Name",
+    "Last Update",
+    "Report type",
+    "Total Expense",
+    "Status",
+    "Actions",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = reportsHistory.map((item, index) => ({
+    Name: <Text as={'span'} display={'flex'} gap={2} alignItems={'center'}>
+    <Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>,
+    "Last Update": 
+      item?.lastUpdated,
+    "Report type": item?.reportType,
+    "Total Expense": item?.totalExpense,
+    Status: (
+      <Tag
+        my={1}
+        size={"sm"}
+        borderRadius="full"
+        colorScheme={
+          item?.status === "Approved"
+            ? "green"
+            : item?.status === "Fully Reimbursed"
+            ? "purple"
+            : item?.status === "Disapproved"
+            ? "red"
+            : item?.status === "Saved"
+            ? "yellow"
+            : item?.status === "Partially Reimbursed"
+            ? "orange"
+            : "gray" // default color scheme if status doesn't match any condition
+        }
+        border={`1px solid ${
+          item?.status === "Approved"
+            ? "green"
+            : item?.status === "Fully Reimbursed"
+            ? "purple"
+            : item?.status === "Disapproved"
+            ? "red"
+            : item?.status === "Saved"
+            ? "orange"
+            : item?.status === "Partially Reimbursed"
+            ? "orange"
+            : "gray" // default border color if status doesn't match any condition
+        }`}
+        p={1}
+        px={3}
+      >
+        <TagLabel>{item?.status}</TagLabel>
+      </Tag>
+    ),
+    Actions: (
+      <Box
+        display={"flex"}
+        gap={1}
+        alignItems={"center"}
+        justifyContent={"center"}
+      >
+        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
+          <FaRegEye fontSize={"18px"} />
+        </Button>
+        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
+          <AiOutlineEdit fontSize={"19px"} />
+        </Button>
+        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
+          <RiDeleteBin5Line fontSize={"18px"} />
+        </Button>
+      </Box>
+    ),
+  }));
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <MiniHeader
+        title={"Reports History"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      />
+
+      <Box
+        rounded={"xl"}
+        py={3}
+        // pb={0}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
+        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+          <Text fontSize={"lg"} fontWeight={600}>
+            Reports
+          </Text>
+          <HStack w={"100%"} justifyContent={"space-between"}>
+            <Button
+              fontWeight={500}
+              size={"sm"}
+              leftIcon={<CalendarIcon color={"purple.800"} />}
+              colorScheme="gray"
+              color={"gray.700"}
+              variant="outline"
+              fontSize={"xs"}
+            >
+              Select Date Range
+            </Button>
+
+            <Button
+              _hover={{
+                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+                opacity: 0.8,
+              }}
+              bgGradient="linear(to-r, #3725EA, #5E0FCD)"
+              fontSize={"xs"}
+              px={8}
+              fontWeight={500}
+              size={"sm"}
+              color={"#fff"}
+              variant="outline"
+              transition={"0.5s all"}
+              _active={{
+                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+                opacity: 1,
+              }}
+            >
+              Add to Report
+            </Button>
+          </HStack>
+        </VStack>
+        <Divider />
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default Report;
--- a/src/Pages/Requests/Requests.jsx
+++ b/src/Pages/Requests/Requests.jsx
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const Requests = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      />
+    </Box>
+  );
+};
+
+export default Requests;
--- a/src/Pages/Settings/Settings.jsx
+++ b/src/Pages/Settings/Settings.jsx
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const Settings = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      />
+    </Box>
+  );
+};
+
+export default Settings;
--- a/src/Pages/SplashScreen.jsx
+++ b/src/Pages/SplashScreen.jsx
@@ -1,6 +1,7 @@
 import { Box, Image, Spinner, Text } from '@chakra-ui/react'
 import React from 'react'
 import logo from '../assets/logo2.png'
+import mainLogo from "../assets/optifii_logo.svg";

 const SplashScreen = () => {
  return (
@@ -12,7 +13,7 @@ const SplashScreen = () => {
    flexDirection={'column'}
    gap={10}
    >
-        <Image width={40} src={"https://www.wdipl.com/public/img/black_logo.svg"} />
+        <Image w={"150px"} src={mainLogo} />
        {/* <Spinner color='green.900' size='md' /> */}
        {/* <div className="dot-spinner">
    <div className="dot-spinner__dot"></div>
--- a/src/Pages/SupportAndTicket/SupportAndTicket.jsx
+++ b/src/Pages/SupportAndTicket/SupportAndTicket.jsx
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const SupportAndTicket = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      />
+    </Box>
+  );
+};
+
+export default SupportAndTicket;
--- a/src/Routes/Nav.js
+++ b/src/Routes/Nav.js
@@ -1,339 +1,211 @@
 import { HiOutlineNewspaper } from "react-icons/hi";
-import { TbBrandMedium, TbChartHistogram, TbLayoutDashboard, TbReportMoney, TbSquareRoundedFilled } from "react-icons/tb";
+import { TbBrandMedium, TbSquareRoundedFilled } from "react-icons/tb";
 import {
-  RiBankLine,
-  RiFileUserLine,
  RiMoneyDollarBoxLine,
 } from "react-icons/ri";
 import { RiExchangeBoxLine } from "react-icons/ri";
-import { VscGitPullRequestGoToChanges, VscSymbolClass } from "react-icons/vsc";
+import { VscSymbolClass } from "react-icons/vsc";
 import { FiHome, FiUsers } from "react-icons/fi";
-import { PiCrown } from "react-icons/pi";
-import { MdOutlineAddChart, MdOutlineAdminPanelSettings, MdOutlineEditCalendar, MdOutlinePolicy, MdOutlineTaskAlt, MdWorkspacesOutline } from "react-icons/md";
-import { HiOutlineChartSquareBar } from "react-icons/hi";
-import { TbListDetails } from "react-icons/tb";
-import { TbTransactionDollar } from "react-icons/tb";
-import { TbCalendarDollar } from "react-icons/tb";
-import { TbDeviceDesktopDollar } from "react-icons/tb";
-import { BiMoneyWithdraw } from "react-icons/bi";
-import { GrDocumentUpdate, GrManual, GrNotification } from "react-icons/gr";
-import { MdBrowserUpdated } from "react-icons/md";
-import { AiOutlineUserDelete } from "react-icons/ai";
-import { MdNotificationsNone } from "react-icons/md";
-import { SiAcademia } from "react-icons/si";
-import { LuContact } from "react-icons/lu";
-import { LiaCrownSolid } from "react-icons/lia";
-import { PiCrownDuotone } from "react-icons/pi";
-import { IoMdNotificationsOutline } from "react-icons/io";
-import { BellIcon } from "@chakra-ui/icons";
+import {MdOutlineEditCalendar, MdOutlinePolicy, MdOutlineTaskAlt, MdWorkspacesOutline } from "react-icons/md";
+import {  GrNotification } from "react-icons/gr";
+import HomeIcon from "../assets/homeIcon.png"
+import { PiReceiptBold } from "react-icons/pi";
+import { PiCopySimple } from "react-icons/pi";
+import { GoGift } from "react-icons/go";
+import { MdOutlineLiveHelp } from "react-icons/md";
+import { AiOutlineHome } from "react-icons/ai";
+

 export const nav = [
-
-  // {
-  //   title: "My menu",
-  //   type: "title",
-  // },
  {
-    title: "Home",
+    title: "Dashboard",
    type: "single",
    path: "/",
+    Icon: AiOutlineHome,
+  },
+  {
+    title: "Analytics",
+    type: "title",
+  },
+  {
+    title: "Manage Human Resource",
    Icon: FiHome,
-  },
-  {
-    title: "My tasks",
-    type: "single",
-    path: "/task",
-    Icon: MdOutlineTaskAlt,
-  },
-  {
-    title: "Notification",
-    type: "single",
-    path: "/notification",
-    Icon: GrNotification,
-  },
-  // {
-  //   title: "Projects",
-  //   type: "title",
-  // },
-  {
-    title: "Projects",
+    path: "/home",
    submenu: [
      {
-        title: "Tanami",
-        path: "/tanami",
+        title: "Employees",
+        path: "/employees",
        icon: TbSquareRoundedFilled,
        colorCode:"#70a1ff"
      },
      {
-        title: "ReGroup",
-        path: "/ReGroup",
+        title: "Approvers",
+        path: "/approvers",
        icon: TbSquareRoundedFilled,
        colorCode:"#7bed9f"
      },
      {
-        title: "Woka",
-        path: "/Woka",
+        title: "Manage department & roles",
+        path: "/Manage-roles",
        icon: TbSquareRoundedFilled,
-        colorCode:"#eccc68"
+        colorCode:"#7bed9f"
      },
    ],
    type: "accordion",
-    Icon: MdWorkspacesOutline,
  },
  {
-      title: "Officials",
+    title: "OptiFii Expense",
+    Icon: FiHome,
+    path: "/home",
+    submenu: [
+      {
+        title: "Wallet program",
+        path: "/wallet-program",
+        icon: TbSquareRoundedFilled,
+        colorCode:"#70a1ff"
+      },
+      {
+        title: "Reimbursement request",
+        path: "/reimbursement-request",
+        icon: TbSquareRoundedFilled,
+        colorCode:"#7bed9f"
+      },
+      {
+        title: "Advance expense request",
+        path: "/advance-expense-request",
+        icon: TbSquareRoundedFilled,
+        colorCode:"#7bed9f"
+      },
+    ],
+    type: "accordion",
+  },
+  {
+    title: "OptiFii Expense",
+    type: "single",
+    path: "/optiFii-expense",
+    Icon: PiReceiptBold,
+  },
+  {
+    title: "OptiFii Tax Benefit",
+    type: "single",
+    path: "/optiFii-benefit",
+    Icon: PiReceiptBold,
+  },
+  {
+    title: "OptiFii Gifs & Vouchers",
+    type: "single",
+    path: "/optiFii-vouchers",
+    Icon: PiReceiptBold,
+  },
+  {
+    title: "Shop",
    type: "title",
  },
-
  {
-    title: "Leaves",
+    title: "Reports",
    type: "single",
-    path: "/leaves",
-    Icon: MdOutlineEditCalendar,
+    path: "/reports",
+    Icon: PiReceiptBold,
  },
-
  {
-    title: "Policy",
+    title: "Support & Ticket",
    type: "single",
-    path: "/policy",
-    Icon: MdOutlinePolicy,
+    path: "/support-ticket",
+    Icon: PiReceiptBold,
  },
+  {
+    title: "Settings",
+    type: "title",
+  },
+  {
+    title: "Settings",
+    type: "single",
+    path: "/settings",
+    Icon: PiReceiptBold,
+  },
+];
+
+// export const nestedNav = [
 //   {
-  //   title: "IO Management",
+//     title: "MAIN MENU",
+//     type: "accordion",
+//     accArray: [
+//       {
+//         title: "Master",
 //         submenu: [
 //           {
-  //       title: "Create IO",
-  //       path: "/create-io",
-  //       icon: MdOutlineAddChart,
+//             title: "Sponser",
+//             path: "/sponser",
+//             icon: RiMoneyDollarBoxLine,
 //           },
 //           {
-  //       title: "View IO",
-  //       path: "/view-io",
-  //       icon: HiOutlineChartSquareBar,
+//             title: "Exchange rate",
+//             path: "/exchange-rate",
+//             icon: RiExchangeBoxLine,
+//           },
+//           {
+//             title: "Asset classes",
+//             path: "/view",
+//             icon: VscSymbolClass,
 //           },
 //         ],
 //         type: "accordion",
-  //   Icon: TbDeviceDesktopDollar,
+//         Icon: TbBrandMedium,
 //       },
 //       {
-  //   title: "Investor Management",
+//         title: "User",
 //         submenu: [
 //           {
-  //       title: "Investor Details",
-  //       path: "/investor-details",
-  //       icon: TbListDetails,
+//             title: "Sponser",
+//             path: "/loop",
+//             icon: TbBrandMedium,
 //           },
 //           {
-  //       title: "Investor Transactions",
-  //       path: "/investor-transactions",
-  //       icon: TbTransactionDollar,
+//             title: "Class",
+//             path: "/class",
+//             icon: TbBrandMedium,
+//           },
+//           {
+//             title: "View",
+//             path: "/view",
+//             icon: TbBrandMedium,
 //           },
 //         ],
 //         type: "accordion",
-  //   Icon: TbCalendarDollar,
+//         Icon: HiOutlineNewspaper,
+//       },
+//     ],
 //   },
 //   {
-  //   title: "INVESTORS REQUEST",
+//     title: "User",
+//     submenu: [
+//       {
+//         title: "Sponser",
+//         path: "/loop",
+//         icon: TbBrandMedium,
+//       },
+//       {
+//         title: "Class",
+//         path: "/class",
+//         icon: TbBrandMedium,
+//       },
+//       {
+//         title: "View",
+//         path: "/view",
+//         icon: TbBrandMedium,
+//       },
+//     ],
+//     type: "accordion",
+//     Icon: FiUsers,
+//   },
+//   {
+//     title: "SPONSER",
 //     type: "title",
 //   },
 //   {
-  //   title: "Deposit",
-  //   submenu: [
-  //     {
-  //       title: "Pending Request",
-  //       path: "/deposit-request",
-  //       icon: RiMoneyDollarBoxLine,
-  //     },
-  //     {
-  //       title: "View History",
-  //       path: "/deposit-history",
-  //       icon: RiExchangeBoxLine,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: BiMoneyWithdraw,
-  // },
-  // {
-  //   title: "Withdrawal",
-  //   submenu: [
-  //     {
-  //       title: "Pending Request",
-  //       path: "/withdraw-request",
-  //       icon: RiMoneyDollarBoxLine,
-  //     },
-  //     {
-  //       title: "View History",
-  //       path: "/withdraw-history",
-  //       icon: RiExchangeBoxLine,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: BiMoneyWithdraw,
-  // },
-  // {
-  //   title: "Investor Upgradation",
-  //   submenu: [
-  //     {
-  //       title: "Pending Request",
-  //       path: "/investor-request",
-  //       icon: RiMoneyDollarBoxLine,
-  //     },
-  //     {
-  //       title: "View History",
-  //       path: "/investor-history",
-  //       icon: RiExchangeBoxLine,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: MdBrowserUpdated,
-  // },
-  // {
-  //   title: "Account Deletion",
-  //   submenu: [
-  //     {
-  //       title: "Pending Request",
-  //       path: "/deletion-request",
-  //       icon: RiMoneyDollarBoxLine,
-  //     },
-  //     {
-  //       title: "View History",
-  //       path: "/deletion-history",
-  //       icon: RiExchangeBoxLine,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: AiOutlineUserDelete,
-  // },
-  // {
-  //   title: "MANAGE ADMIN",
-  //   type: "title",
-  // },
-  // {
-  //   title: "Admin",
-  //   submenu: [
-  //     {
-  //       title: "Ban / Unban Investor",
-  //       path: "/bank-investor",
-  //       icon: TbReportMoney,
-  //     },
-  //     {
-  //       title: "Academy",
-  //       path: "/academy",
-  //       icon: GrManual,
-  //     },
-  //     {
-  //       title: "Notification",
-  //       path: "/notification",
-  //       icon: MdNotificationsNone,
-  //     },
-  //     {
-  //       title: "Contact Details",
-  //       path: "/contact",
-  //       icon: LuContact,
-  //     },
-  //     {
-  //       title: "Users",
-  //       path: "/users",
-  //       icon: RiFileUserLine,
-  //     },
-  //     {
-  //       title: "Bank Details",
-  //       path: "/bank-details",
-  //       icon: RiBankLine,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: MdOutlineAdminPanelSettings,
-  // },
-  // {
 //     title: "Single Link",
 //     type: "single",
-  //   path: "/logout",
+//     path: "/",
 //     Icon: HiOutlineNewspaper,
 //   },
-];
-
-export const nestedNav = [
-  {
-    title: "MAIN MENU",
-    type: "accordion",
-    accArray: [
-      {
-        title: "Master",
-        submenu: [
-          {
-            title: "Sponser",
-            path: "/sponser",
-            icon: RiMoneyDollarBoxLine,
-          },
-          {
-            title: "Exchange rate",
-            path: "/exchange-rate",
-            icon: RiExchangeBoxLine,
-          },
-          {
-            title: "Asset classes",
-            path: "/view",
-            icon: VscSymbolClass,
-          },
-        ],
-        type: "accordion",
-        Icon: TbBrandMedium,
-      },
-      {
-        title: "User",
-        submenu: [
-          {
-            title: "Sponser",
-            path: "/loop",
-            icon: TbBrandMedium,
-          },
-          {
-            title: "Class",
-            path: "/class",
-            icon: TbBrandMedium,
-          },
-          {
-            title: "View",
-            path: "/view",
-            icon: TbBrandMedium,
-          },
-        ],
-        type: "accordion",
-        Icon: HiOutlineNewspaper,
-      },
-    ],
-  },
-  {
-    title: "User",
-    submenu: [
-      {
-        title: "Sponser",
-        path: "/loop",
-        icon: TbBrandMedium,
-      },
-      {
-        title: "Class",
-        path: "/class",
-        icon: TbBrandMedium,
-      },
-      {
-        title: "View",
-        path: "/view",
-        icon: TbBrandMedium,
-      },
-    ],
-    type: "accordion",
-    Icon: FiUsers,
-  },
-  {
-    title: "SPONSER",
-    type: "title",
-  },
-  {
-    title: "Single Link",
-    type: "single",
-    path: "/",
-    Icon: HiOutlineNewspaper,
-  },
-];
+// ];
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -1,6 +1,35 @@
-import Dashbaord from "../Pages/Dashbaord";
+import Dashbaord from "../Pages/Dashboard/Dashbaord";
+import Requests from "../Pages/Requests/Requests";
+import Expenses from "../Pages/Expenses/Expenses";
+import HelpAndSupport from "../Pages/HelpAndSupport/HelpAndSupport";
+import OptiFiiTaxBenefit from "../Pages/OptiFiiTaxBenefit/OptiFiiTaxBenefit";
+import OptiFiiGifsAndVouchers from "../Pages/OptiFiiGifsAndVouchers/OptiFiiGifsAndVouchers";
+import Report from "../Pages/Report/Report";
+import SupportAndTicket from "../Pages/SupportAndTicket/SupportAndTicket";
+import Settings from "../Pages/Settings/Settings";
+import Employees from "../Pages/ManageHumanResource/Employees";
+import Approvers from "../Pages/ManageHumanResource/Approvers";
+import ManageDepartmentAndRoles from "../Pages/ManageHumanResource/ManageDepartmentAndRoles";
+import WalletProgram from "../Pages/OptiFiiExpense/WalletProgram";
+import ReimbursementRequest from "../Pages/OptiFiiExpense/ReimbursementRequest";
+import AdvanceExpenseRequest from "../Pages/OptiFiiExpense/AdvanceExpenseRequest";

 export const RouteLink = [
  
  { path: "/", Component: Dashbaord },
+  { path: "/expenses", Component: Expenses },
+  { path: "/requests", Component: Requests },
+  { path: "/help-support", Component: HelpAndSupport },
+  { path: "/employees", Component: Employees },
+  { path: "/approvers", Component: Approvers },
+  { path: "/Manage-roles", Component: ManageDepartmentAndRoles },
+  { path: "/wallet-program", Component: WalletProgram },
+  { path: "/reimbursement-request", Component: ReimbursementRequest },
+  { path: "/advance-expense-request", Component: AdvanceExpenseRequest },
+  { path: "/optiFii-benefit", Component: OptiFiiTaxBenefit },
+  { path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers },
+  { path: "/reports", Component: Report },
+  { path: "/support-ticket", Component: SupportAndTicket },
+  { path: "/settings", Component: Settings }, 
+  
 ];
--- a/src/Theme/Theme.js
+++ b/src/Theme/Theme.js
@@ -15,30 +15,31 @@ const customTheme = extendTheme({
      800: "#930921",
      900: "#700616",
    },
-    forestGreen: {
-      50: "#ffe6e9",
-      100: "#f8c2c7",
-      200: "#ef9da4",
-      300: "#e67882",
-      400: "#dd5460",
-      500: "#DE858E", // primary shade for your custom color
-      600: "#DE858E",
-      700: "#DE858E",
-      800: "#DE858E",
-      900: "#DE858E",
-    },
-    forestGreen: {
-      50: "#e6f3e9",
-      100: "#c2e1c7",
-      200: "#9dcda4",
-      300: "#78b982",
-      400: "#54a560",
-      500: "#004118", // primary shade for your custom color
-      600: "#003b14",
-      700: "#003310",
-      800: "#002b0c",
-      900: "#002308",
+    // forestGreen: {
+    //   50: "#ffe6e9",
+    //   100: "#f8c2c7",
+    //   200: "#ef9da4",
+    //   300: "#e67882",
+    //   400: "#dd5460",
+    //   500: "#DE858E", // primary shade for your custom color
+    //   600: "#DE858E",
+    //   700: "#DE858E",
+    //   800: "#DE858E",
+    //   900: "#DE858E",
+    // },
+    deepPurple: {
+      50: "#F1EAF4",   // lightest shade
+      100: "#DBC7E4",
+      200: "#BFA0D0",
+      300: "#9D78B8",
+      400: "#794DA0",
+      500: "#210A33",  // primary shade for your custom color
+      600: "#1C082D",
+      700: "#160524",
+      800: "#10041C",
+      900: "#0A0212",  // darkest shade
    },
+    
  },
  components: {
    // Switch: {
--- a/src/assets/Ellipse-37.png
+++ b/src/assets/Ellipse-37.png
--- a/src/assets/Ellipse-38.png
+++ b/src/assets/Ellipse-38.png
--- a/src/assets/Ellipse-39.png
+++ b/src/assets/Ellipse-39.png
--- a/src/assets/Ellipse.png
+++ b/src/assets/Ellipse.png
--- a/src/assets/EmptySearchList.png
+++ b/src/assets/EmptySearchList.png
--- a/src/assets/ExpensesIcon.png
+++ b/src/assets/ExpensesIcon.png
--- a/src/assets/GiftsIcon.png
+++ b/src/assets/GiftsIcon.png
--- a/src/assets/IOheader.png
+++ b/src/assets/IOheader.png
--- a/src/assets/accademicbanner.png
+++ b/src/assets/accademicbanner.png
--- a/src/assets/bahrain_flag.png
+++ b/src/assets/bahrain_flag.png
--- a/src/assets/commingsoon.png
+++ b/src/assets/commingsoon.png
--- a/src/assets/complogo.svg
+++ b/src/assets/complogo.svg
@@ -0,0 +1,23 @@
+<svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_878_8094)">
+<path d="M18.7215 22.1497C17.9682 22.2401 17.4815 21.9853 17.1516 21.3635L16.8684 20.8649L12.7771 13.756C12.5104 13.2903 12.1227 13.0492 11.5783 13.0657C11.3529 13.0712 11.1247 13.0657 10.8965 13.0547C10.5748 13.0383 10.3053 13.1342 10.1321 13.4109C9.96164 13.6821 9.96439 13.9642 10.1266 14.2491L15.8373 24.1632C15.9198 24.3056 16.0105 24.3495 16.1672 24.3467L19.2082 24.3522L21.6195 24.3769H22.9447L11.4766 4.4556C11.4326 4.51039 11.4079 4.53504 11.3914 4.56518L8.40543 9.68794C8.0315 10.3399 8.22671 11.2631 8.80961 11.7562C9.54922 12.3836 10.5473 12.326 11.2649 11.6138C11.7791 11.1042 12.4197 11.1755 12.7716 11.7836L18.5593 21.8347L18.7215 22.1497ZM7.39362 11.4439L7.24515 11.674L6.05737 13.7012C5.94189 13.8903 5.94739 14.0272 6.05737 14.2163L10.4483 21.8401L10.6133 22.1442C10.4126 22.1442 10.2668 22.1607 10.1266 22.1415C9.65645 22.073 9.30726 21.821 9.07081 21.4073L5.51847 15.2271L5.34525 14.9532L5.21602 15.1504L3.98975 17.2461C3.89627 17.4022 3.90176 17.5145 3.9925 17.668L6.3928 21.8292C6.44229 21.9141 6.48079 22.0018 6.53853 22.1113H3.70105L4.01449 21.5662C4.2482 21.1964 4.34718 20.7937 4.2757 20.3691C4.15747 19.6349 3.62957 19.1062 3.32437 18.4487C3.27763 18.4925 3.26113 18.5007 3.25288 18.5172L0.057976 23.9988C-0.0602521 24.2015 0.00573574 24.2947 0.25319 24.3002L2.637 24.3276L11.7873 24.3413L12.0485 24.344H14.8172L7.39362 11.4439ZM27.0002 24.3769L15.3094 4.06934L14.7018 5.10759C14.0969 6.11296 14.1216 7.10464 14.7073 8.1155L20.9898 19.024L23.9538 24.1577C24.006 24.2481 24.1215 24.3659 24.2095 24.3686L27.0002 24.3769Z" fill="#E8155D"/>
+<path d="M13.5005 0.932861L12.1038 3.33262C12.068 3.39563 12.057 3.50794 12.09 3.56821L12.8984 4.96807C13.0661 5.24201 13.4785 5.26941 13.66 5.0119C14.0202 4.49688 14.3089 3.94625 14.3556 3.297C14.4244 2.39299 13.9652 1.68621 13.5005 0.932861Z" fill="white"/>
+<path d="M18.7215 22.1497L18.5538 21.8319L12.7661 11.7809C12.4169 11.1727 11.7736 11.1015 11.2594 11.611C10.5445 12.3233 9.54372 12.3808 8.80411 11.7535C8.22122 11.2604 8.026 10.3345 8.39993 9.6852L11.3859 4.56244C11.4024 4.5323 11.4271 4.51039 11.4711 4.45286L22.942 24.3769H21.6167L19.2054 24.3522L16.1645 24.3467C16.005 24.3467 15.9143 24.3029 15.8346 24.1632L10.1294 14.2491C9.96439 13.9642 9.96439 13.6821 10.1349 13.4109C10.3081 13.1342 10.5775 13.0383 10.8992 13.0547L11.5811 13.0657C12.1255 13.0492 12.5132 13.2903 12.7799 13.756L16.8711 20.8649L17.1543 21.3635C17.4815 21.9853 17.9682 22.2401 18.7215 22.1497ZM7.39362 11.4439L14.82 24.344H12.0513C11.9633 24.344 11.8753 24.3413 11.7901 24.3413L2.637 24.3248L0.25319 24.2974C0.00573574 24.2947 -0.0602521 24.1988 0.057976 23.9961L3.25563 18.5144C3.26388 18.5007 3.28038 18.4898 3.32712 18.446C3.62957 19.1034 4.15747 19.6321 4.27845 20.3663C4.34718 20.7909 4.25095 21.1964 4.01724 21.5634L3.7038 22.1086H6.54128L6.39555 21.8264L3.99525 17.6652C3.90726 17.5118 3.90176 17.3968 3.9925 17.2433L5.21877 15.1477C5.25176 15.0901 5.29301 15.0353 5.348 14.9504L5.52121 15.2244L9.07356 21.4046C9.31001 21.8155 9.6592 22.0675 10.1294 22.1387C10.2696 22.1607 10.4181 22.1415 10.616 22.1415L10.4511 21.8374L6.05737 14.2135C5.94739 14.0245 5.94189 13.8875 6.05737 13.6985L7.24515 11.6713L7.39362 11.4439ZM27.0002 24.3769C26.0407 24.3769 25.1251 24.3823 24.2095 24.3686C24.1215 24.3659 24.006 24.2508 23.9538 24.1577L20.9898 19.024L14.7073 8.1155C14.1216 7.10464 14.0941 6.11022 14.7018 5.10759C14.8997 4.78159 15.0894 4.45012 15.3094 4.06934L27.0002 24.3769Z" fill="#E8155D"/>
+<path d="M13.5006 0.933163C13.9653 1.68651 14.4245 2.39055 14.3557 3.29731C14.3062 3.9493 14.0203 4.49718 13.6601 5.0122C13.4787 5.26971 13.0662 5.23957 12.8985 4.96837L12.0902 3.56851C12.0572 3.50824 12.0682 3.39593 12.1039 3.33292L13.5006 0.933163ZM15.67 0.744141C16.1594 0.744141 16.5581 1.14136 16.5581 1.62898C16.5574 1.86391 16.4632 2.08897 16.2962 2.25483C16.1292 2.42069 15.903 2.51383 15.6672 2.51382C15.1778 2.51382 14.7792 2.11386 14.7792 1.62898C14.7806 1.39428 14.875 1.16964 15.0418 1.00393C15.2087 0.838226 15.4344 0.744858 15.67 0.744141ZM14.8781 1.63172C14.8781 1.84097 14.9616 2.04164 15.1101 2.1896C15.2586 2.33756 15.46 2.42068 15.67 2.42068C16.1044 2.42068 16.4591 2.06729 16.4618 1.63172C16.4618 1.42248 16.3784 1.2218 16.2299 1.07384C16.0814 0.925883 15.88 0.842761 15.67 0.842761C15.46 0.842761 15.2586 0.925883 15.1101 1.07384C14.9616 1.2218 14.8781 1.42248 14.8781 1.63172Z" fill="white"/>
+<path d="M15.813 1.65648C15.8625 1.67566 15.89 1.70853 15.9092 1.74962L16.0632 2.0674L16.0907 2.12767C16.0329 2.12767 15.9807 2.12493 15.9284 2.12767C15.8845 2.13041 15.8652 2.11397 15.8487 2.07562L15.7332 1.80715C15.7002 1.73593 15.637 1.70579 15.56 1.72223V2.12493H15.3758V1.13873C15.3813 1.13873 15.3868 1.13599 15.3923 1.13599H15.6947C15.736 1.13599 15.78 1.14147 15.8185 1.14968C15.9697 1.18256 16.0329 1.2894 16.0192 1.43185C16.0109 1.5469 15.9477 1.61539 15.8377 1.64552C15.8322 1.651 15.824 1.651 15.813 1.65648ZM15.56 1.5743L15.714 1.5606C15.736 1.55786 15.758 1.5469 15.7745 1.53321C15.824 1.50033 15.8322 1.45102 15.824 1.39623C15.8157 1.34692 15.7855 1.31953 15.7387 1.30309C15.681 1.28666 15.6205 1.29213 15.56 1.29213V1.5743ZM1.43588 27.2046L1.28191 26.8211H0.424067L0.270095 27.2046H0.0253906L0.721012 25.4842H0.987712L1.68058 27.2046H1.43588ZM0.852987 25.7034L0.487305 26.632H1.21867L0.852987 25.7034ZM1.90604 27.2046V25.4842H2.59891C2.94535 25.4842 3.14056 25.7225 3.14056 26.002C3.14056 26.2841 2.9426 26.5197 2.59891 26.5197H2.1205V27.2046H1.90604ZM2.91785 26.002C2.91785 25.8075 2.77763 25.6732 2.57417 25.6732H2.1205V26.3279H2.57417C2.77763 26.3279 2.91785 26.1937 2.91785 26.002ZM3.42651 27.2046V25.4842H4.11938C4.46582 25.4842 4.66103 25.7225 4.66103 26.002C4.66103 26.2841 4.46307 26.5197 4.11938 26.5197H3.64097V27.2046H3.42651ZM4.43832 26.002C4.43832 25.8075 4.2981 25.6732 4.09464 25.6732H3.64097V26.3279H4.09464C4.2981 26.3279 4.43832 26.1937 4.43832 26.002ZM4.8425 26.9608L4.97172 26.7964C5.03868 26.8741 5.1218 26.9365 5.21533 26.979C5.30885 27.0216 5.41055 27.0434 5.51337 27.0429C5.82132 27.0429 5.9203 26.8786 5.9203 26.7443C5.9203 26.3006 4.89749 26.5471 4.89749 25.9335C4.89749 25.6486 5.15044 25.4541 5.49413 25.4541C5.75533 25.4541 5.95879 25.5445 6.10451 25.6951L5.97529 25.8513C5.84606 25.7061 5.6646 25.6458 5.47488 25.6458C5.27142 25.6458 5.1202 25.7554 5.1202 25.9198C5.1202 26.306 6.14301 26.0841 6.14301 26.7279C6.14301 26.9745 5.97254 27.2347 5.50513 27.2347C5.20818 27.2347 4.98547 27.1196 4.8425 26.9608ZM7.13557 27.2539V25.4294H7.27855V27.2539H7.13557ZM9.6706 27.2046L9.29117 25.8157L8.91175 27.2046H8.67804L8.18588 25.4842H8.42509L8.80726 26.9169L9.20319 25.4842H9.38191L9.77783 26.9169L10.1573 25.4842H10.3992L9.90431 27.2046H9.6706Z" fill="white"/>
+<path d="M10.6387 27.2048V25.4844H11.7687V25.6761H10.8531V26.2295H11.7522V26.4213H10.8531V27.0157H11.7687V27.2075H10.6387V27.2048Z" fill="white"/>
+<path d="M12.1121 27.2045V25.4841H12.8819C13.1816 25.4841 13.3658 25.6649 13.3658 25.9224C13.3658 26.1389 13.2201 26.284 13.0634 26.3169C13.2476 26.3443 13.3988 26.5333 13.3988 26.7388C13.3988 27.0155 13.2146 27.2018 12.8984 27.2018H12.1121V27.2045ZM13.1404 25.9526C13.1404 25.7992 13.0359 25.6732 12.8434 25.6732H12.3265V26.2265H12.8434C13.0386 26.2293 13.1404 26.1087 13.1404 25.9526ZM13.1761 26.7169C13.1761 26.5607 13.0661 26.421 12.8572 26.421H12.3265V27.0155H12.8572C13.0551 27.0127 13.1761 26.8977 13.1761 26.7169Z" fill="white"/>
+<path d="M13.635 26.9606L13.7642 26.7962C13.877 26.9249 14.0612 27.0427 14.3059 27.0427C14.6138 27.0427 14.7128 26.8784 14.7128 26.7441C14.7128 26.3003 13.69 26.5469 13.69 25.9333C13.69 25.6484 13.943 25.4539 14.2866 25.4539C14.5478 25.4539 14.7513 25.5443 14.897 25.6949L14.7678 25.8511C14.6386 25.7059 14.4571 25.6456 14.2674 25.6456C14.0639 25.6456 13.9127 25.7552 13.9127 25.9196C13.9127 26.3058 14.9355 26.0839 14.9355 26.7277C14.9355 26.9743 14.7651 27.2345 14.2976 27.2345C14.0007 27.2345 13.778 27.1194 13.635 26.9606Z" fill="white"/>
+<path d="M15.2581 27.2045V25.4841H15.4725V27.2045H15.2581ZM16.3029 27.2045V25.6759H15.7557V25.4841H17.0645V25.6759H16.5146V27.2045H16.3029Z" fill="white"/>
+<path d="M17.3528 27.2045V25.4841H18.4828V25.6759H17.5672V26.2293H18.4663V26.421H17.5672V27.0155H18.4828V27.2072H17.3528V27.2045Z" fill="white"/>
+<path d="M18.7217 26.9608L18.8509 26.7964C18.9636 26.9252 19.1479 27.043 19.3926 27.043C19.7005 27.043 19.7995 26.8786 19.7995 26.7444C19.7995 26.3006 18.7767 26.5471 18.7767 25.9335C18.7767 25.6486 19.0296 25.4541 19.3733 25.4541C19.6345 25.4541 19.838 25.5445 19.9837 25.6952L19.8545 25.8513C19.7252 25.7061 19.5438 25.6459 19.3541 25.6459C19.1506 25.6459 18.9994 25.7554 18.9994 25.9198C18.9994 26.3061 20.0222 26.0842 20.0222 26.7279C20.0222 26.9745 19.8517 27.2347 19.3843 27.2347C19.0874 27.2347 18.8647 27.1197 18.7217 26.9608Z" fill="white"/>
+<path d="M21.0156 27.2542V25.4297H21.1586V27.2542H21.0156ZM22.1292 26.961L22.2584 26.7967C22.3711 26.9254 22.5553 27.0432 22.8 27.0432C23.108 27.0432 23.207 26.8789 23.207 26.7446C23.207 26.3008 22.1842 26.5474 22.1842 25.9337C22.1842 25.6488 22.4371 25.4543 22.7808 25.4543C23.042 25.4543 23.2455 25.5447 23.3912 25.6954L23.262 25.8516C23.1327 25.7064 22.9513 25.6461 22.7616 25.6461C22.5581 25.6461 22.4069 25.7557 22.4069 25.92C22.4069 26.3063 23.4297 26.0844 23.4297 26.7282C23.4297 26.9747 23.2592 27.235 22.7918 27.235C22.4921 27.235 22.2694 27.1199 22.1292 26.961Z" fill="white"/>
+<path d="M23.7483 27.2045V25.4841H24.8783V25.6759H23.9628V26.2293H24.8618V26.421H23.9628V27.0155H24.8783V27.2072H23.7483V27.2045Z" fill="white"/>
+<path d="M25.1523 26.3444C25.1523 25.8349 25.4988 25.4541 26.0102 25.4541C26.5216 25.4541 26.8708 25.8349 26.8708 26.3444C26.8708 26.8512 26.5216 27.2347 26.0102 27.2347C25.4988 27.2347 25.1523 26.854 25.1523 26.3444ZM26.6453 26.3444C26.6453 25.9417 26.3951 25.6459 26.0074 25.6459C25.6198 25.6459 25.3723 25.9417 25.3723 26.3444C25.3723 26.7444 25.617 27.043 26.0074 27.043C26.3951 27.043 26.6453 26.7444 26.6453 26.3444Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_878_8094">
+<rect width="27" height="27" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/fav_optifii_logo.png
+++ b/src/assets/fav_optifii_logo.png
--- a/src/assets/favicone.png
+++ b/src/assets/favicone.png
--- a/src/assets/helpIcon.png
+++ b/src/assets/helpIcon.png
--- a/src/assets/homeIcon.png
+++ b/src/assets/homeIcon.png
--- a/src/assets/kuwait_flag.png
+++ b/src/assets/kuwait_flag.png
--- a/src/assets/linkedin.png
+++ b/src/assets/linkedin.png
--- a/src/assets/logo-min
+++ b/src/assets/logo-min
--- a/src/assets/logo2
+++ b/src/assets/logo2
--- a/src/assets/oman_flag.png
+++ b/src/assets/oman_flag.png
--- a/src/assets/optifii_logo.png
+++ b/src/assets/optifii_logo.png
--- a/src/assets/optifii_logo.svg
+++ b/src/assets/optifii_logo.svg
@@ -0,0 +1,60 @@
+<svg width="112" height="46" viewBox="0 0 112 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9607 45.557C30.371 45.557 38.4486 39.8506 41.9217 31.7094C38.6746 30.0511 36.4513 26.6741 36.4513 22.7778C36.4513 18.8817 38.6744 15.5049 41.9213 13.8465C38.4479 5.70589 30.3706 0 20.9607 0C11.5511 0 3.47408 5.7055 0.000457089 13.8457C3.22516 15.492 5.4404 18.8332 5.4717 22.6949C5.51677 14.1789 12.4342 7.28926 20.9608 7.28926C29.5154 7.28926 36.4502 14.2241 36.4502 22.7786C36.4502 31.3332 29.5154 38.268 20.9608 38.268C12.4339 38.268 5.51625 31.3778 5.47169 22.8614C5.44016 26.723 3.22477 30.0641 0 31.7102C3.47337 39.8509 11.5507 45.557 20.9607 45.557Z" fill="url(#paint0_linear_1816_8383)"/>
+<path d="M46.9677 14.7348C45.078 15.0162 43.6225 15.6194 42.3841 16.6245C41.0653 17.6941 40.1968 19.2461 39.9234 21.0393C39.8671 21.3932 39.851 22.0767 39.8751 22.6878C39.9394 24.3524 40.3254 25.4461 41.2985 26.7327C42.6334 28.5018 44.8206 29.5714 47.5869 29.8126C50.6588 30.0699 53.5135 29.1371 55.2263 27.3197C56.5371 25.9366 57.0437 24.65 57.1161 22.5672C57.1483 21.6585 57.1322 21.2484 57.0196 20.7177C56.521 18.257 54.8001 16.2788 52.3394 15.3459C51.1252 14.8795 50.3452 14.7509 48.6966 14.7267C47.8764 14.7107 47.1044 14.7187 46.9677 14.7348ZM50.5703 17.1714C52.6209 17.7101 54.0845 19.1978 54.4142 21.0715C54.5509 21.8676 54.4704 23.4437 54.2533 24.0388C53.7869 25.3496 52.9426 26.3065 51.7363 26.8935C50.7151 27.3841 50.0315 27.5127 48.4554 27.5047C47.2492 27.4967 47.0642 27.4806 46.4048 27.2795C44.4186 26.6764 43.1641 25.438 42.7057 23.6528C42.561 23.098 42.5449 21.6907 42.6736 20.9911C42.7138 20.7338 42.9148 20.1869 43.1078 19.7849C43.3973 19.1898 43.5662 18.9646 44.0647 18.4902C44.9252 17.6619 45.7695 17.2839 47.3296 16.9864C47.4422 16.9703 48.0775 16.9623 48.7369 16.9784C49.6375 16.9945 50.1039 17.0427 50.5703 17.1714Z" fill="url(#paint1_linear_1816_8383)"/>
+<path d="M85.6313 15.1771C85.181 15.4022 84.9639 15.7561 84.9639 16.2868C84.9639 16.7693 85.1006 17.0749 85.4464 17.3644C86.146 17.9594 87.4407 17.8227 87.9151 17.107C88.1644 16.7452 88.1644 16.1501 87.9231 15.7239C87.5532 15.0725 86.4033 14.7911 85.6313 15.1771Z" fill="url(#paint2_linear_1816_8383)"/>
+<path d="M104.546 15.523C104.208 15.6678 103.878 16.0779 103.814 16.4156C103.725 16.9062 103.846 17.268 104.224 17.6379C105.004 18.3778 106.347 18.2652 106.773 17.4128C107.079 16.8338 106.853 16.0618 106.266 15.6758C105.985 15.4909 105.824 15.4507 105.358 15.4265C104.996 15.4185 104.698 15.4507 104.546 15.523Z" fill="url(#paint3_linear_1816_8383)"/>
+<path d="M109.636 15.5715C109.25 15.6841 108.944 15.9655 108.807 16.3354C108.421 17.3406 109.362 18.3297 110.593 18.2011C111.823 18.0724 112.249 16.7375 111.316 15.9173C110.882 15.5313 110.215 15.3946 109.636 15.5715Z" fill="url(#paint4_linear_1816_8383)"/>
+<path d="M90.6738 16.753C90.6738 17.2757 90.714 19.0047 90.7542 20.5969C90.7945 22.1891 90.8507 24.8106 90.8749 26.427C90.899 28.0433 90.9392 29.5149 90.9633 29.6999L91.0035 30.0457H92.2178H93.4321L93.3758 27.1346L93.3114 24.2316L97.7423 24.2879L102.173 24.3523L102.125 23.2747C102.093 22.6475 102.028 22.1811 101.98 22.1489C101.932 22.1167 101.112 22.0846 100.163 22.0846C99.2139 22.0846 97.2679 22.0604 95.8526 22.0283L93.2712 21.98L93.2069 20.0501C93.1747 18.9966 93.1828 18.096 93.223 18.0638C93.2552 18.0316 95.2816 18.0477 97.7101 18.096C100.147 18.1523 102.157 18.1684 102.189 18.1442C102.221 18.1201 102.229 17.6376 102.197 17.0827L102.149 16.0695L100.935 16.0213C99.5758 15.973 92.266 15.8122 91.3011 15.8122H90.6738V16.753Z" fill="url(#paint5_linear_1816_8383)"/>
+<path d="M76.4473 17.2361C76.2623 17.8071 76.0291 18.4665 75.9407 18.7158L75.7879 19.1581L74.6218 19.4315L73.4639 19.6968V20.2356V20.7744L74.5977 20.8226C75.225 20.8468 75.7477 20.887 75.7637 20.9031C75.7798 20.9191 75.812 22.2138 75.8442 23.7819C75.8844 26.1863 75.9165 26.7251 76.0452 27.2559C76.3106 28.3897 76.8976 29.1456 77.8787 29.6442C78.5783 29.99 79.2859 30.1347 80.3715 30.1347C81.3526 30.1428 81.9155 30.0623 82.8001 29.8131C83.7248 29.5477 83.6766 29.6201 83.6766 28.5264C83.6766 28.0037 83.6525 27.5614 83.6283 27.5293C83.5962 27.5051 83.4997 27.5293 83.4032 27.5936C82.9448 27.8911 82.2693 28.052 81.2561 28.0922C79.9775 28.1485 79.495 28.0278 78.9803 27.5293C78.4094 26.9824 78.3692 26.7573 78.3129 23.5889L78.2646 20.8709L80.8058 20.9272L83.3549 20.9835V20.0909C83.3549 19.6003 83.3228 19.1822 83.2825 19.1581C83.2423 19.1259 82.1004 19.0857 80.7495 19.0535L78.2888 19.0053L78.2727 17.8714C78.2646 17.2442 78.2566 16.625 78.2486 16.4963L78.2405 16.2551L77.5248 16.2309L76.8011 16.2149L76.4473 17.2361Z" fill="url(#paint6_linear_1816_8383)"/>
+<path d="M66.3472 18.5951C66.2588 18.6112 65.9853 18.6675 65.7441 18.7157C64.5057 18.965 63.0824 19.9702 62.3023 21.1362C62.1978 21.3051 62.0772 21.4418 62.0531 21.4418C62.0209 21.4418 62.0048 20.8387 62.0048 20.0908V18.7479L60.7423 18.7238L59.4717 18.6997V20.6939C59.4717 21.7956 59.4476 24.9962 59.4154 27.8107L59.3672 32.9412H60.6619H61.9646V29.9256C61.9646 28.269 61.9887 26.91 62.0289 26.91C62.0611 26.9181 62.1898 27.0869 62.3184 27.288C62.9215 28.2369 64.176 29.2742 65.1571 29.6441C66.6769 30.2151 68.5184 30.1508 69.8774 29.4672C71.0837 28.8641 72.0165 27.7705 72.4748 26.3873C72.6759 25.7923 72.692 25.6395 72.7 24.4172C72.7 23.3396 72.6678 22.9938 72.5472 22.5676C72.113 21.0719 71.1078 19.8255 69.8453 19.2063C69.4673 19.0213 68.9446 18.8122 68.6793 18.7399C68.2048 18.6192 66.6689 18.5147 66.3472 18.5951ZM67.1916 20.5653C68.9285 20.8387 70.0463 22.1173 70.2071 24.0312C70.3036 25.1329 69.9659 26.1783 69.2663 26.9502C68.1646 28.1565 66.2829 28.3897 64.6263 27.5131C63.6211 26.9824 62.8733 26.1702 62.23 24.9238L61.8842 24.2483L62.3023 23.4361C63.1065 21.86 64.4173 20.8065 65.8486 20.5653C66.4357 20.4688 66.5965 20.4688 67.1916 20.5653Z" fill="url(#paint7_linear_1816_8383)"/>
+<path d="M85.391 21.4893C85.4232 22.8162 85.4714 25.2608 85.4956 26.9254L85.5519 29.9651H86.7983H88.0367L87.9884 28.6945C87.9643 28.003 87.9241 25.9845 87.9 24.2154C87.8758 22.4463 87.8356 20.5726 87.8115 20.058L87.7633 19.1091L87.4255 19.1734C86.9832 19.2458 86.2193 19.2458 85.7368 19.1573L85.3428 19.0849L85.391 21.4893Z" fill="url(#paint8_linear_1816_8383)"/>
+<path d="M104.288 20.5329C104.312 21.144 104.4 23.5484 104.472 25.8724L104.617 30.1103L105.019 30.1585C105.244 30.1827 105.783 30.2068 106.217 30.2068H106.997V29.6037C106.997 29.0488 106.7 20.5248 106.652 19.793C106.636 19.4392 106.676 19.4473 105.856 19.584C105.598 19.6322 105.285 19.6322 105.132 19.592C104.987 19.5598 104.722 19.5035 104.553 19.4714L104.239 19.4151L104.288 20.5329Z" fill="url(#paint9_linear_1816_8383)"/>
+<path d="M109.192 20.1304C109.224 20.4762 109.321 22.8564 109.417 25.4217C109.514 27.9869 109.61 30.1099 109.643 30.142C109.667 30.1662 110.214 30.2064 110.849 30.2225L111.999 30.2466L111.951 28.9197C111.894 27.424 111.79 25.0116 111.653 21.803C111.605 20.6048 111.548 19.6157 111.532 19.5996C111.516 19.5755 111.235 19.5996 110.913 19.6559C110.455 19.7203 110.23 19.7203 109.811 19.6318C109.522 19.5675 109.257 19.5192 109.216 19.5112C109.176 19.5112 109.168 19.7846 109.192 20.1304Z" fill="url(#paint10_linear_1816_8383)"/>
+<defs>
+<linearGradient id="paint0_linear_1816_8383" x1="20.9608" y1="5.01736e-08" x2="20.9564" y2="57.7055" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E0FCD"/>
+<stop offset="0.553414" stop-color="#C942AB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1816_8383" x1="39.8643" y1="22.2864" x2="57.1307" y2="22.2864" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#C33FAD"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1816_8383" x1="84.9639" y1="16.37" x2="88.1031" y2="16.37" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#C33FAD"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1816_8383" x1="103.786" y1="16.7772" x2="106.909" y2="16.7772" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#C33FAD"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1816_8383" x1="108.72" y1="16.8538" x2="111.822" y2="16.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#C33FAD"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1816_8383" x1="90.6738" y1="22.9289" x2="102.218" y2="22.9289" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#C33FAD"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1816_8383" x1="73.4639" y1="23.1751" x2="83.677" y2="23.1751" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#C33FAD"/>
+</linearGradient>
+<linearGradient id="paint7_linear_1816_8383" x1="59.3672" y1="25.754" x2="72.7" y2="25.754" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#C33FAD"/>
+</linearGradient>
+<linearGradient id="paint8_linear_1816_8383" x1="85.3428" y1="24.525" x2="88.0367" y2="24.525" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#C33FAD"/>
+</linearGradient>
+<linearGradient id="paint9_linear_1816_8383" x1="104.239" y1="24.8109" x2="106.997" y2="24.8109" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#C33FAD"/>
+</linearGradient>
+<linearGradient id="paint10_linear_1816_8383" x1="109.179" y1="24.8789" x2="111.999" y2="24.8789" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#C33FAD"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/photo-1472313420546-a46e561861d8.avif
+++ b/src/assets/photo-1472313420546-a46e561861d8.avif
--- a/src/assets/pro1.jpg
+++ b/src/assets/pro1.jpg
--- a/src/assets/proavatar
+++ b/src/assets/proavatar
--- a/src/assets/qatar_flag.png
+++ b/src/assets/qatar_flag.png
--- a/src/assets/saudi_arabia_flag.png
+++ b/src/assets/saudi_arabia_flag.png
--- a/src/assets/uae_flag.png
+++ b/src/assets/uae_flag.png
--- a/src/assets/welcome2.avif
+++ b/src/assets/welcome2.avif