icleafreportui 0.1.0

package/src/components/Header.css

@@ -0,0 +1,301 @@
+/* latest header style */
+
+.header_whole_container {
+      display: flex;
+      position: fixed;
+      left: 0;
+      padding: 20px;
+      margin-left: 260px;
+      width: calc(100% - 260px);
+      /* padding-bottom: 10px; */
+      height: 60px;
+      align-items: center;
+      z-index: 1010;
+      border-bottom: 1px solid #dcdcdc;
+      background-color: #FFFFFF;
+      justify-content: space-between;
+}
+
+.header_logo_container {
+      padding: 30px 0px;
+      text-align: center;
+      margin-left: 0;
+}
+
+.header1-toggle-icon:hover {
+      background-color: var(--primary-color);
+      color: var(--button-text-color);
+}
+
+.header1-toggle-icon {
+      background-color: #FFF;
+      border-radius: 8px;
+      padding: 6px;
+      align-items: center;
+      /* box-shadow: 4px 4px 32px 1px rgba(0, 0, 0, 0.20); */
+      -webkit-user-select: none;
+      user-select: none;
+      outline: unset;
+      height: 30px;
+      width: 30px;
+      background: var(--sidebar_side_mnu_bg);
+      color: var(--primary-color);
+}
+
+.mini-sidebar .header1-toggle-icon {
+      transform: scaleX(-1);
+      -moz-transform: scaleX(-1);
+      -webkit-transform: scaleX(-1);
+      -ms-transform: scaleX(-1);
+}
+
+.header_logo_img {
+      height: auto;
+      width: 60%;
+      max-width: 120px;
+      -webkit-user-select: none;
+      user-select: none;
+}
+
+.header_container2 {
+      display: flex;
+      align-items: center;
+      width: 13%;
+}
+
+.user_icon_container {
+      display: flex;
+      justify-content: flex-end;
+}
+
+.username_container {
+      padding-left: 20px;
+}
+
+.userName_text {
+      font-size: 14px;
+      color: #222222;
+      font-weight: 500;
+      line-height: 16px;
+      letter-spacing: 0em;
+}
+
+.header_container3 {
+      padding-left: 22px;
+}
+
+.logout_icon {
+      box-shadow: 4px 4px 32px 1px rgba(0, 0, 0, 0.20);
+      background-color: transparent;
+      padding: 0px;
+      border-radius: 0%;
+      /* color: #575757; */
+      font-size: 38px;
+      box-shadow: none;
+      height: 17px;
+      width: 17px;
+}
+
+.popover_container {
+      padding: 0px 16px 16px;
+      row-gap: 5px;
+      display: flex;
+      flex-direction: column;
+}
+
+.admpopover {
+      width: 190px;
+      /* height: 400px;    */
+}
+
+.popover_name_container {
+      padding: 15px 15px;
+}
+
+.acc-mnu-top {
+      text-align: left;
+      padding: 25px 20px;
+      -webkit-user-select: none;
+      user-select: none;
+      margin: 0px;
+      flex-shrink: 0;
+      box-shadow: none;
+      background-image: none;
+      border-radius: 8px;
+      background-color: rgb(255, 248, 225);
+      overflow: hidden;
+      position: relative;
+}
+
+.acc-mnu-top::before {
+      border: 3px solid rgb(255, 229, 127);
+      border-radius: 50%;
+      top: 65px;
+      right: -60px;
+      content: "";
+      position: absolute;
+      width: 160px;
+      height: 160px;
+}
+
+.acc-mnu-top::after {
+      border: 19px solid rgb(255, 229, 127);
+      border-radius: 50%;
+      top: 5px;
+      right: -160px;
+      content: "";
+      position: absolute;
+      width: 200px;
+      height: 200px;
+}
+
+.acc-mnu-seperator {
+      border-width: 0px 0px thin;
+      border-style: solid;
+      border-color: rgb(227, 232, 239);
+      color: rgb(54, 65, 82);
+      transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      margin-bottom: 0;
+      opacity: 1;
+}
+
+.acc-mnu-icon {
+      color: var(--primary-color);
+}
+
+.popover_container .col-3 {
+      /* padding-left: 0px; */
+      padding-right: 0px;
+}
+
+.popover_container .col-12 {
+      /* padding-left: 0px; */
+      padding-left: 10px;
+}
+
+.popover_container .row {
+      width: 100%;
+      margin-left: 0px;
+      margin-right: 0px;
+      padding: 10px 0;
+      border-radius: 4px;
+      background: var(--content-background-color);
+}
+
+.popover_container .row_lang {
+      width: 55%;
+      margin-left: 0px;
+      margin-right: 0px;
+      padding: 10px 0;
+      border-radius: 4px;
+      background: var(--content-background-color);
+}
+
+.acc-mnu-item {
+      color: var(--bs-gray-700);
+}
+
+.acc-mnu-item:hover {
+      color: var(--primary-color);
+      background: var(--sidebar_side_mnu_bg);
+}
+
+.acc_menu_highlight {
+      color: var(--primary-color);
+      background: var(--sidebar_side_mnu_bg) !important;
+
+}
+
+.hi_msg {
+      font-size: 12px;
+}
+
+.name_text {
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 20px;
+      letter-spacing: 0em;
+}
+
+.email_text {
+      font-size: 11px;
+      line-height: 15px;
+      font-weight: 300;
+      letter-spacing: 0em;
+}
+
+.popup_user_text {
+      padding-left: 11px;
+      font-size: 13px;
+      line-height: 15px;
+      font-weight: 300;
+      letter-spacing: 0em;
+}
+
+.pop_up_info {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+}
+
+.label_text {
+      font-size: 14px;
+      line-height: 14px;
+      letter-spacing: 0.05em;
+      font-weight: 300;
+}
+
+.cursor {
+      cursor: pointer;
+}
+
+/* Admin */
+.popoveradmCls {
+      padding: 15px;
+      /* row-gap: 15px; */
+      display: flex;
+      flex-direction: column;
+}
+
+.profImgCls {
+      width: 50px;
+      height: 50px;
+      border-radius: 50px;
+      box-shadow: 0px 2px 7px #a2a2a2;
+      padding: 5px;
+}
+
+.labeltxtadm {
+      /* font-size: large; */
+      color: #000;
+      /* display: block; */
+      padding: 5px;
+
+}
+
+.imgClsHeader {
+
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+}
+
+.acc_mnu_pop {
+      width: 250px;
+}
+
+.acc_mnu_pop::before {
+      top: 0%;
+      right: 18px;
+      margin: -15px 0 0 68px;
+      border-left: 13px solid transparent;
+      border-bottom: 15px solid #fe9c00;
+      border-right: 0px solid transparent;
+}
+
+.user_Img {
+      width: 60px;
+      height: 60px;
+      border-radius: 50px;
+}

package/src/components/Header.jsx

@@ -0,0 +1,192 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FaPowerOff } from "react-icons/fa";
+import { MdFiberManualRecord, MdLogout, MdOutlineLockReset } from "react-icons/md";
+import { IoIosList, IoIosSettings } from "react-icons/io";
+import { GiHamburgerMenu } from "react-icons/gi";
+import Popover from '@mui/material/Popover';
+import { Link, useLocation } from 'react-router-dom';
+import "./Header.css"
+import { MdKeyboardArrowDown, MdAssignment } from "react-icons/md";
+import { RiHome5Fill, RiLogoutCircleRLine, RiMenuFoldLine } from "react-icons/ri";
+import { HiBookmarkSquare, HiOutlineUser } from "react-icons/hi2";
+import { TbDeviceMobileFilled } from "react-icons/tb";
+import { IoBookOutline, IoCalendar, IoCalendarOutline, IoCartOutline, IoLanguage, IoLibraryOutline, IoLogOutOutline, IoPencilOutline, IoPersonCircleOutline, IoPersonOutline, IoSettingsOutline, IoShuffle, IoShuffleOutline } from "react-icons/io5";
+import { TfiMenuAlt } from "react-icons/tfi";
+import { RotatingLines } from 'react-loader-spinner';
+import { Drawer } from 'antd'; // Import Drawer from antd
+import './Header.css';
+import { BiSolidBookContent, BiSolidUserPin } from "react-icons/bi";
+import { FaCheck, FaCircleInfo } from "react-icons/fa6";
+import { PiExamFill, PiShuffleAngularBold } from "react-icons/pi";
+import { RiRedPacketLine } from "react-icons/ri";
+import { MdMenuBook, MdKeyboardArrowRight, MdCorporateFare } from "react-icons/md";
+import { IoGameControllerSharp } from "react-icons/io5";
+import commonImagePathUrlPrefix, { logo } from './imagePathUrl';
+
+const Header = () => {
+  const navigate = useNavigate()
+  const [show, setShow] = useState(false);
+  const location = useLocation();
+  const [activeMenuItem, setActiveMenuItem] = useState(location.pathname);
+  const [isSideMenu, setSideMenu] = useState("");
+  const [userChooseLan, setUserChooseLan] = useState("en")
+
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [userEmail] = useState(localStorage.getItem("email"));
+  const [userName] = useState(localStorage.getItem("fName") + " " + localStorage.getItem("lName"))
+  const roleId = localStorage.getItem("roleId")
+  const [manageContentSubMenuOpen, setManageContentSubMenuOpen] = useState(false);
+  const [manageExamSubMenuOpen, setManageExamSubMenuOpen] = useState(false);
+  const [managePackSubMenuOpen, setManagePackSubMenuOpen] = useState(false);
+  const [manageUserSubMenuOpen, setManageUserSubMenuOpen] = useState(false);
+  const [manageCorporateSubMenuOpen, setManageCorporateSubMenuOpen] = useState(false);
+  const [manageControlSubMenuOpen, setManageControlSubMenuOpen] = useState(false);
+
+  const [usernames, setUserNames] = useState("");
+  const [userimg, setUserImg] = useState("");
+  const [availableCredit, setAvailableCredit] = useState("");
+  const [buyCredit, setbuyCredit] = useState("");
+  const [storageB, setStroageB] = useState("");
+  const [storagelimit, setStorageLimit] = useState("");
+  const [buy, setbuy] = useState('')
+  const [totalbuy, settotalbuy] = useState('')
+
+
+  const token = localStorage.getItem("token");
+  const headers = {
+    Authorization: `Bearer ${token}`,
+  };
+  const name = localStorage.getItem("fName")
+  const [showAlert, setShowAlert] = useState(false);
+  const [alertMessage, setAlertMessage] = useState('');
+  const userImage = localStorage.getItem("profileImg");
+  const [userNameEvaluator] = useState(localStorage.getItem("userName"));
+
+  useEffect(() => {
+    if (localStorage.getItem("consentChkFlg") === "false") {
+      // navigate("/myProfile")
+    } else {
+      // setShowAlert(false);
+    }
+  }, []);
+
+
+
+
+
+
+
+  const handlesidebar = () => {
+    if (window.innerWidth < 1001) {
+      // If the screen width is less than 800px, toggle the drawer visibility
+      setDrawerVisible(!drawerVisible);
+    } else {
+      // If the screen width is 800px or more, toggle the 'mini-sidebar' class
+      document.body.classList.toggle('mini-sidebar');
+    }
+  }
+
+
+
+
+
+
+  const handleOutsideClick = (e) => {
+    const dropdownMenu = document.querySelector(".user-menu");
+    const mobileDropdownMenu = document.querySelector(".mobile-user-menu");
+    const mobileSideMenu = document.querySelector("#mobile_btn");
+
+    if (
+      dropdownMenu &&
+      !dropdownMenu.contains(e.target) &&
+      !mobileDropdownMenu?.contains(e.target) &&
+      !mobileSideMenu?.contains(e.target)
+    ) {
+      setShow(false);
+      // setMobileshow(false);
+      // setShow1(false);
+      document.body.classList.remove("slide-nav");
+    }
+  };
+  // useEffect(() => {
+
+  // }, []);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    document.addEventListener("click", handleOutsideClick);
+
+    return () => {
+      document.removeEventListener("click", handleOutsideClick);
+    };
+  }, []);
+
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [anchorLang, setAnchorLang] = useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+
+  const handleLangClick = (event) => {
+    setAnchorLang(event.currentTarget);
+  };
+
+  const handleLangClose = () => {
+    setAnchorLang(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const open1 = Boolean(anchorLang);
+  const id = open ? 'simple-popover' : undefined;
+  const lang_id = open1 ? 'lang-simple-popover' : undefined;
+
+
+
+  const handleChange = (value) => {
+    window.location.reload()
+
+    setUserChooseLan(value);
+  };
+
+  const handleLogout = () => {
+    localStorage.clear(); // Clear all local storage
+    // navigate('/login'); // Navigate to login page
+    window.location.reload();
+  };
+
+
+  return (
+    <div className='header_whole_container'>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        {/* <div>
+          <RiMenuFoldLine
+            cursor="pointer"
+            onClick={handlesidebar}
+            size={30}
+            className='header1-toggle-icon'
+            tabIndex={0}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                handlesidebar()
+              }
+            }}
+          />
+        </div> */}
+      </div>
+      <div className='acc_conf_main' onClick={handleLogout}>
+            <FaPowerOff tabIndex={0}
+              size={30} aria-describedby={id} variant="contained"  className="account-mnu-icon" />
+          </div>
+      {/* <button onClick={handleLogout}>
+        Logout</button> */}
+    </div>
+  );
+};
+
+export default Header;

package/src/components/Loader.jsx

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react';
+import { Modal } from 'react-bootstrap';
+import { RotatingLines } from 'react-loader-spinner'
+
+
+function Loader({ visible }) {
+    const [value, setValue] = useState(visible);
+
+
+    return (
+        <Modal onShow={true} style={{ background: "transperent" }}>
+            <RotatingLines
+                strokeColor="grey"
+                strokeWidth="5"
+                animationDuration="0.75"
+                width="96"
+                visible={true}
+            />
+        </Modal>
+    )
+
+}
+export default Loader;

package/src/components/imagePathUrl.jsx

@@ -0,0 +1,11 @@
+export default "https://groupnpay.com/iccloud";
+export const elearnImagePathUrlPrefix = "https://groupnpay.com/iccloud/qhubresources/elearn";
+// export const commonImagePathUrlPrefix = "http://64.227.170.125:8080/iccloud";
+// export const elearnImagePathUrlPrefix = "http://64.227.170.125:8080/iccloud/qhubresources/elearn";
+// export const commonImagePathUrlPrefix = "http://139.59.64.128:8080/iccloud";
+// export const elearnImagePathUrlPrefix = "http://139.59.64.128:8080/iccloud/qhubresources/elearn";
+// export const commonImagePathUrlPrefix = "http://192.168.3.155:8080/icleaf";
+// export const elearnImagePathUrlPrefix = "http://192.168.3.155:8080/icleaf/qhubresources/elearn";
+export const logo = process.env.PUBLIC_URL + '/images/icleaf_logo.png';
+export const youngMan = process.env.PUBLIC_URL + '/images/young-man-studying-library-using-laptop-1.png';
+export const baseName = "/icleaf/#"