@acuteinfo/common-screens 1.0.25 → 1.0.27

package/dist/index.js

@@ -1,11 +1,11 @@
 import 'regenerator-runtime/runtime';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { TextField, GradientButton, utilFunction, ClearCacheProvider, queryClient, Alert, GridWrapper } from '@acuteinfo/common-base';
+import { TextField, GradientButton, utilFunction, ClearCacheProvider, queryClient, Alert, GridWrapper, SearchBar } from '@acuteinfo/common-base';
 import { useState, useRef, useEffect, Fragment, useMemo, useReducer, useCallback } from 'react';
 import { makeStyles } from '@mui/styles';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { Container, Grid, InputAdornment, IconButton, CircularProgress, FormHelperText, Typography, Tooltip, tooltipClasses, Stack, Box, Avatar, Button, alpha, AppBar, Toolbar } from '@mui/material';
+import { Container, Grid, InputAdornment, IconButton, CircularProgress, FormHelperText, Typography, Tooltip, tooltipClasses, Stack, Box, Avatar, Button, alpha, AppBar, Toolbar, List, ListItemIcon, ListItem, ListItemText, Collapse, Drawer } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import OTPInput, { ResendOTP } from 'otp-input-react';
 import IconButton$1 from '@mui/material/IconButton';
@@ -21,8 +21,15 @@ import Waving_hand$1 from 'assets/images/Waving_Hand_header.png';
 import LogoutIcon from '@mui/icons-material/Logout';
 import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
 import { format } from 'date-fns';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import ScrollBar from 'react-perfect-scrollbar';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faHandsHelping, faUsers, faBars, faBalanceScale, faHandHoldingHeart, faTasks, faCog, faHome, faTh, faUsersCog, faCircle, faUserCircle, faHashtag, faThumbtack, faSquare, faLink, faQuestion, faPlus, faTable, faLocationArrow, faHeadset, faGears, faArrowDown, faArrowUp, faSpinner, faCircleExclamation, faRotateRight, faUserLock, faUserClock, faGripHorizontal, faFileLines, faGear, faHeadphones, faUsersGear, faMessage, faUnlock, faUserPlus, faUserCheck, faKey, faIdCard, faIdBadge, faCheck, faCheckDouble, faCircleCheck, faCircleXmark, faUserTag, faAddressCard, faChartColumn, faUserPen, faHandHolding, faHandHoldingMedical, faObjectGroup, faTowerCell, faTowerObservation, faBuilding, faMailBulk, faLandmarkFlag, faCreditCard, faHospitalSymbol, faPlugCircleBolt, faCodeBranch, faPersonCircleCheck, faBank, faServer, faNotesMedical, faA, faB, faC, faD, faE, faF, faG, faH, faI, faJ, faK, faL, faM, faN, faO, faP, faQ, faR, faS, faT, faU, faV, faW, faX, faY, faZ } from '@fortawesome/free-solid-svg-icons';
+import 'lodash';
 
-const useStyles$2 = makeStyles((theme) => ({
+const useStyles$3 = makeStyles((theme) => ({
     wrapper: {
         minHeight: "100vh",
         boxShadow: "0 3px 6px rgba(0,0,0,0.03)",
@@ -820,7 +827,7 @@ const isBase64 = (str = "") => {
 const BankDetails = ({ bannerDetails }) => {
     const [loginImageURL, setLoginImageURL] = useState(null);
     const urlObj = useRef(null);
-    const classes = useStyles$2();
+    const classes = useStyles$3();
     const banner = useMemo(() => bannerDetails, []);
     useEffect(() => {
         if (Boolean(banner?.bannerImg)) {
@@ -1212,7 +1219,7 @@ const reducer$1 = (state, action) => {
     }
 };
 const AuthControllerWrapper = ({ bannerDetails, logoUrl, logoTitle, loginFn, veirfyUsernameandPassword, verifyOTP, OTPResendRequest, ResetPassword, LanguageComponent, forgotPasswordEndpoint, }) => {
-    const classes = useStyles$2();
+    const classes = useStyles$3();
     const [loginState, dispath] = useReducer(reducer$1, inititalState$1);
     const [openpwdreset, setOpenPwdReset] = useState(false);
     const failureCount = useRef(0);
@@ -1728,7 +1735,7 @@ const reducer = (state, action) => {
     }
 };
 const ForgotPasswordControllerWrapper = ({ screenFlag, updatenewPassword, veirfyUsernameandMobileNo, verifyOTPForPWDReset, logoUrl, logoTitle, LanguageComponent, bannerDetails, navigate, loginPageEndpoint, }) => {
-    const classes = useStyles$2();
+    const classes = useStyles$3();
     const [loginState, dispath] = useReducer(reducer, inititalState);
     const [open, setOpen] = useState(false);
     const { enqueueSnackbar } = useSnackbar();
@@ -2052,7 +2059,7 @@ styleInject(css_248z);
 
 var Waving_hand = "waving-hand.png";
 
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
     heading_user_img: {
         width: "40px",
         height: "40px",
@@ -2093,7 +2100,7 @@ const actions = [
     },
 ];
 const BranchSelectionGrid = ({ selectionMode, authState, isBranchSelectedFn, isLoggedInFn, logoutFn, logos, logo, navigate, BranchSelectionGridDataApiFn, GetMenuDataApiFn, sideImage, branchSelectFn, dashboardUrl, loginUrl, appTranCd, }) => {
-    const classes = useStyles$1();
+    const classes = useStyles$2();
     const { enqueueSnackbar } = useSnackbar();
     const { data, isLoading, isFetching, refetch, error, isError } = useQuery(["BranchSelectionGridData"], () => BranchSelectionGridDataApiFn());
     useEffect(() => {
@@ -2268,7 +2275,7 @@ const BranchSelectionGridWrapper = (props) => {
     return (jsx(ClearCacheProvider, { children: jsx(BranchSelectionGrid, { ...props }) }));
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
     appBar: {
         // zIndex: theme.zIndex.drawer + 1,
         transition: theme.transitions.create(["width", "margin"], {
@@ -2470,7 +2477,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const AppbarWrapper = ({ handleDrawerOpen, handleDrawerClose, open, authState, LanguageComponent, SearchComponent, dashboardUrl, logos, bankLogo, profilePic, handleLogout, handleProfile, navigate, hideGreetings, menuIconPosition = "left", }) => {
-    const classes = useStyles();
+    const classes = useStyles$1();
     const { t } = useTranslation();
     const LightTooltip = styled(({ className, ...props }) => (jsx(Tooltip, { ...props, classes: { popper: className } })))(({ theme }) => ({
         [`& .${tooltipClasses.tooltip}`]: {
@@ -2497,7 +2504,7 @@ const AppbarWrapper = ({ handleDrawerOpen, handleDrawerClose, open, authState, L
                         alignItems: "center",
                         height: "80px",
                         width: "227px",
-                        flexDirection: menuIconPosition === "right" ? "row-reverse" : "row"
+                        flexDirection: menuIconPosition === "right" ? "row-reverse" : "row",
                     }, children: [open ? (jsx(IconButton$1, { disableRipple: true, onClick: () => handleDrawerClose(), className: classes.DrawerClose_icon, children: jsx(MenuOutlinedIcon, { fontSize: "large" }) })) : (jsx(IconButton$1, { disableRipple: true, "aria-label": "open drawer", onClick: () => handleDrawerOpen(), className: classes.DrawerClose_icon, children: jsx(MenuOutlinedIcon, { fontSize: "large" }) })), jsxs("div", { children: [jsx("img", { src: Boolean(logos?.logo) ? logos?.logo : bankLogo, alt: "CbsEnfinity", className: classes.logo, onClick: (e) => {
                                         e.preventDefault();
                                         navigate(dashboardUrl ?? "./dashboard");
@@ -2541,5 +2548,651 @@ const checkDateAndDisplay = (dateStr) => {
     return "N/A";
 };
 
-export { AppbarWrapper, AuthControllerWrapper, BranchSelectionGridWrapper, ForgotPasswordControllerWrapper, ValidatePassword };
+const drawerWidth = 227;
+const useStyles = makeStyles((theme) => ({
+    drawerPaper: {
+        position: "relative",
+        whiteSpace: "nowrap",
+        width: drawerWidth,
+        transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+        border: "none",
+        overflow: "hidden",
+        zIndex: 120,
+    },
+    drawerPaperClose: {
+        overflowX: "hidden",
+        transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        width: theme.spacing(8),
+        [theme.breakpoints.up("sm")]: {
+            width: theme.spacing(8),
+        },
+    },
+    toolbarIcon: {
+        display: "flex",
+        alignItems: "center",
+        zIndex: 9999,
+        ...theme.mixins.toolbar,
+        background: "var(--theme-color2)",
+        justifyContent: "center",
+        height: "80px",
+        // borderBottom: "1px dashed #949597",
+    },
+    hrCSS: {
+        zIndex: 9999,
+    },
+    buttonLink: {
+        backgroundColor: "transparent",
+        border: "none",
+        cursor: "pointer",
+        textDecoration: "underline",
+        display: "inline",
+        margin: 0,
+        padding: 0,
+        "&:focus": {
+            textDecoration: "none",
+        },
+        "$:hover": {
+            textDecoration: "none",
+        },
+    },
+}));
+/*
+  
+*/
+
+const reportMetaData = [];
+
+// import { createTheme } from "@mui/material";
+// const theme = createTheme();
+makeStyles((theme) => ({
+    navBarCSS: {
+        padding: "4px 1rem ",
+        backgroundColor: "#fff !important",
+        minHeight: "64px",
+        boxShadow: "0 3px 6px rgba(0,0,0,0.03)",
+        margin: "10px",
+    },
+    headerDropdown: {
+        backgroundColor: "#fff",
+        minWidth: "205px",
+        boxShadow: "0 3px 6px rgba(0,0,0,0.16)",
+        textDecoration: "none",
+        borderBottom: "3px solid  #26A456",
+    },
+    navLinkHeader: {
+        color: "#555",
+        fontSize: "14px",
+        lineHeight: "1.2",
+        paddingTop: "4px",
+        paddingBottom: "4px",
+        paddingRight: ".5rem",
+        paddingLeft: ".5rem",
+        fontWeight: 600,
+        textTransform: "capitalize",
+        display: "flex",
+        alignItems: "center",
+        cursor: "pointer",
+        "& hover": {
+            color: "#0b6fb8",
+        },
+    },
+    productLink: {
+        color: "#555",
+        padding: "0 1rem 8px 1rem",
+        display: "inline-block",
+        verticalAlign: "middle",
+        cursor: "pointer",
+        textTransform: "capitalize",
+    },
+    font13: {
+        fontSize: "13px",
+    },
+    loginDropdown: {
+        width: "160px",
+    },
+}));
+const useStylesSideBar = makeStyles((theme) => ({
+    root: {
+        justifyContent: "center",
+    },
+    drawer: {
+        margin: "5px",
+    },
+    item: {
+        display: "flex",
+        //borderBottom: "2px solid #93242433",
+        borderRadius: "8px",
+        marginLeft: "7px",
+        marginTop: "6.5px",
+        width: "90%",
+        height: "50px",
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2),
+        background: "var(--theme-color2)",
+        boxShadow: "3px 6px 9px rgba(93, 95, 121, 0.26)",
+        "& svg": {
+            // color: theme.palette.primary.main,
+            color: "var(--theme-color1)",
+        },
+        "&:hover": {
+            boxShadow: "6px 6px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 0px 0px rgba(0,0,5,0.12)",
+            background: "var(--theme-color4)",
+            transition: "0.6s ease",
+        },
+    },
+    drawerIconSize: {
+        width: "50px",
+        height: "50px",
+        padding: "18px",
+        justifyItems: "cenetr",
+    },
+    button: {
+        color: "#0063A3",
+        padding: "10px 8px",
+        //justifyContent: "flex-start",
+        textTransform: "none",
+        letterSpacing: 0,
+        width: "100%",
+        textAlign: "left",
+        "&:hover": {
+            backgroundColor: "var(--theme-color1)",
+            // boxShadow: "0px 15px 20px rgb(221 176 176 / 37%)",
+        },
+    },
+    btnRoot: {
+        paddingLeft: "24px",
+        justifyContent: "left ",
+    },
+    navLinks: {
+        // height: "calc(100vh - 78px)",
+        overflowY: "auto",
+        overflowX: "hidden",
+        // height:"100px",
+        backgroundColor: "rgba(250, 251, 255, 0.9);",
+        // height: "calc(100vh - 230px)",
+        //background: "var(--theme-color1)",
+        // marginTop: "25px",
+        // boxShadow: "0 3px 6px rgba(255, 99, 71, 0.3)",
+        borderRadius: "10px",
+        paddingTop: "5px",
+        //margin: "5px",
+    },
+    navLinksforseparateView: {
+        overflowY: "auto",
+        overflowX: "hidden",
+        height: "calc(100vh - 180px)",
+        // height:"auto",
+        paddingTop: "10px",
+    },
+    nestedMenuLevel1: {
+        paddingLeft: "20px",
+        marginTop: "11px",
+        paddingRight: theme.spacing(3),
+        height: "auto",
+        fontSize: "13px",
+        "& div > svg": {
+            fontSize: "14px",
+        },
+    },
+    nestedMenuLevel2: {
+        paddingLeft: "20px",
+        marginTop: "11px",
+        fontSize: "12px",
+        "& div > svg": {
+            fontSize: "9px",
+        },
+    },
+    listIcon: {
+        minWidth: "30px !important",
+        justifyItems: "center",
+        color: "var(--theme-color6)",
+        fontWeight: 700,
+        fontSize: "18px",
+    },
+    link: {
+        fontSize: "1rem ",
+        marginTop: "2px",
+        marginBottom: "2px",
+        textOverflow: "ellipsis",
+        color: "var(--theme-color1)",
+        marginLeft: "15px",
+        whiteSpace: "break-spaces",
+        "& span": {
+            fontWeight: 400,
+            whiteSpace: "break-spaces",
+        },
+        "& p": {
+            color: "var(--theme-color3)",
+            fontweight: 400,
+        },
+    },
+    linktext: {
+        backgroundColor: "var(--theme-color2)",
+        "&:hover": {
+            background: "var(--theme-color1)",
+            "& div": {
+                color: "var(--theme-color2) !important",
+            },
+            "& div > svg": {
+                color: "var(--theme-color2) !important",
+            },
+        },
+    },
+    faSmall: {
+        fontSize: "13px ",
+    },
+    openList: {
+        ":not(activeMenuItem)": {
+            "& > div": {
+                backgroundColor: "rgba(0, 0, 0, 0.04)",
+            },
+            "&  *": {
+                color: "var(--theme-color2)",
+            },
+        },
+    },
+    openCurrent: {
+        backgroundColor: "var(--theme-color1)",
+        "&  *": {
+            color: "var(--theme-color2)",
+        },
+        "&:hover": {
+            backgroundColor: "var(--theme-color1)",
+        },
+    },
+    slimList: {
+        paddingTop: "15px",
+        paddingBottom: "13px",
+        height: "auto",
+        paddingLeft: "15px",
+        justifyItems: "center",
+    },
+    activeMenuItem: {
+        backgroundColor: "var(--theme-color1)!important ",
+        "& > div": {
+            color: "var(--theme-color2)!important",
+        },
+        "& svg": {
+            color: "var(--theme-color4)",
+        },
+        "& hover": {
+            "& > div": {
+                color: "var(--theme-color3)",
+            },
+        },
+        "& p": {
+            color: "var(--theme-color6)",
+        },
+    },
+}));
+
+let localdrawerOpen = true;
+const SideBarNav = ({ metaData, handleDrawerOpen, drawerOpen, setView, slimSize, setNewFilterData, setNewFilterView, isFromSeparetView = false, rootUrl, dashboardUrl, navigate }) => {
+    const classes = useStylesSideBar();
+    let result = null;
+    localdrawerOpen = drawerOpen;
+    if (Array.isArray(metaData.navItems)) {
+        result = metaData.navItems.map((one) => {
+            if (one?.seperateView === true) {
+                return (jsx(SeperateListView, { item: one, setView: setView, classes: classes, level: 0, slimSize: slimSize, setNewFilterData: setNewFilterData, setNewFilterView: setNewFilterView }, one.label));
+            }
+            else if (Array.isArray(one.children)) {
+                return (jsx(NestedListItem, { item: one, classes: classes, level: 0, handleDrawerOpen: handleDrawerOpen, drawerOpen: drawerOpen, slimSize: slimSize, rootUrl: rootUrl, dashboardUrl: dashboardUrl, navigate: navigate }, one.label));
+            }
+            else {
+                return (jsx(SingleListItem, { item: one, classes: classes, level: 0, slimSize: slimSize, drawerOpen: drawerOpen, rootUrl: rootUrl, dashboardUrl: dashboardUrl, navigate: navigate }, one.label));
+            }
+        });
+    }
+    return (jsx(List, { component: "nav", disablePadding: true, className: isFromSeparetView ? classes.navLinksforseparateView : classes.navLinks, children: jsx(ScrollBar, { children: result }) }));
+};
+const SeperateListView = ({ item, setView, level, classes, slimSize, setNewFilterData, setNewFilterView, }) => {
+    let labelStart = (item.label || "").toLowerCase().substring(0, 1) || "circle";
+    const icon = item.icon ? (jsx(ListItemIcon, { className: classes.listIcon, children: jsx(FontAwesomeIcon, { icon: ["fas", labelStart] }) })) : null;
+    const levelClassName = level === 1
+        ? classes.nestedMenuLevel1
+        : level === 2
+            ? classes.nestedMenuLevel2
+            : "";
+    return (jsxs(ListItem, { button: true, disableGutters: true, className: clsx({
+            [classes.item]: true,
+            [levelClassName]: Boolean(levelClassName),
+            [classes.slimList]: Boolean(slimSize),
+            [classes.drawerIconSize]: !localdrawerOpen,
+        }), onClick: () => {
+            if (item.viewName === "newfilterview" && Array.isArray(item.children)) {
+                setNewFilterView({
+                    label: item.label,
+                    placeholder: "Search " + item.label + " Screen...",
+                });
+                let newChield = item.children.map((item1) => {
+                    return { ...item1, secondaryLabel: item1.user_code };
+                });
+                setNewFilterData(newChield);
+            }
+            setView(item.viewName);
+        }, children: [jsx(Tooltip, { title: item.label, arrow: true, placement: localdrawerOpen ? "bottom-start" : "right", children: jsx("span", { children: icon }) }), (localdrawerOpen && item.label.length > 27) || !Boolean(icon) ? (jsx(Tooltip, { title: item.label, arrow: true, placement: localdrawerOpen ? "bottom-start" : "right", children: jsx(ListItemText, { primary: item.label, className: classes.link, secondary: item.secondaryLabel ?? null }) })) : localdrawerOpen ? (jsx(ListItemText, { primary: item.label, className: classes.link, secondary: item.secondaryLabel ?? null })) : null] }));
+};
+const SingleListItem = ({ item, classes, level, slimSize, drawerOpen, rootUrl, dashboardUrl, navigate }) => {
+    const isActiveMenu = isActiveMenuFromhref(window.location?.pathname ?? "", item?.href ?? "", item?.navigationProps, rootUrl, dashboardUrl);
+    if (isActiveMenu) {
+        // GeneralAPI.setDocumentName(item.label);
+        let titleText = document.title;
+        document.title = titleText.split(" - ")[0] + " - " + item.label;
+    }
+    let labelStart = (item.label || "").toLowerCase().substring(0, 1) || "circle";
+    const icon = item.icon.toLowerCase() === "process.gif" ? (jsx(ListItemIcon, { className: classes.listIcon, children: jsx(FontAwesomeIcon, { icon: ["fas", labelStart] }) })) : (jsx(ListItemIcon, { className: classes.listIcon, children: jsx(FontAwesomeIcon, { icon: ["fas", item.icon] }) }));
+    const levelClassName = level === 1
+        ? classes.nestedMenuLevel1
+        : level === 2
+            ? classes.nestedMenuLevel2
+            : "";
+    return (jsxs(ListItem, { button: true, disableGutters: true, className: clsx({
+            [classes.item]: true,
+            [levelClassName]: Boolean(levelClassName),
+            [classes.slimList]: Boolean(slimSize),
+            [classes.activeMenuItem]: isActiveMenu,
+            [classes.drawerIconSize]: !localdrawerOpen,
+        }), onClick: (e) => {
+            e.preventDefault();
+            if (item.isRouterLink) {
+                let path = item.href;
+                path =
+                    item.href?.substring(0, 1) === "/"
+                        ? item.href.substring(1)
+                        : item.href;
+                if (item.passNavigationPropsAsURLParmas) {
+                    let urlParms = new URLSearchParams(item?.navigationProps);
+                    navigate(`${path}?${urlParms.toString()}`);
+                }
+                else {
+                    navigate(`${path}`, {
+                        state: { ...item?.navigationProps },
+                    });
+                }
+            }
+            else if (Boolean(item.href)) {
+                window.open(item.href, item.rel ?? "_newtab");
+            }
+        }, children: [jsx(Tooltip, { title: item.label, arrow: true, placement: localdrawerOpen ? "bottom-start" : "right", children: jsx("span", { children: icon }) }), (localdrawerOpen && item.label.length > 27) || !Boolean(icon) ? (jsx(Tooltip, { title: item.label, arrow: true, placement: localdrawerOpen ? "bottom-start" : "right", children: jsx(ListItemText, { primary: item.label, className: classes.link, secondary: item.secondaryLabel ?? null }) })) : localdrawerOpen ? (jsx(ListItemText, { primary: item.label, className: classes.link, secondary: item.secondaryLabel ?? null })) : null] }));
+};
+const NestedListItem = ({ item, classes, level, handleDrawerOpen, drawerOpen, slimSize, rootUrl, navigate }) => {
+    const [open, setOpen] = useState(false);
+    const handleClick = () => {
+        setOpen(!open);
+    };
+    const childrens = item.children?.map((one) => {
+        if (Array.isArray(one.children)) {
+            return (jsx(NestedListItem, { item: one, classes: classes, level: level + 1, handleDrawerOpen: handleDrawerOpen, drawerOpen: drawerOpen, slimSize: slimSize, rootUrl: rootUrl, navigate: navigate }, one.label));
+        }
+        else {
+            return (jsx(SingleListItem, { item: one, classes: classes, level: level + 1, slimSize: slimSize, rootUrl: rootUrl, navigate: navigate }, one.label));
+        }
+    });
+    let labelStart = (item.label || "").toLowerCase().substring(0, 1) || "circle";
+    const icon = item.icon === "Process.gif" ? (jsx(ListItemIcon, { className: classes.listIcon, children: jsx(FontAwesomeIcon, { icon: ["fas", labelStart] }) })) : (jsx(ListItemIcon, { className: classes.listIcon, children: jsx(FontAwesomeIcon, { icon: ["fas", item.icon] }) }));
+    const levelClassName = level === 1
+        ? classes.nestedMenuLevel1
+        : level === 2
+            ? classes.nestedMenuLevel2
+            : "";
+    return (jsxs(Fragment$1, { children: [jsxs(ListItem, { button: true, onClick: handleClick, disableGutters: true, className: open
+                    ? clsx({
+                        [classes.item]: true,
+                        [levelClassName]: Boolean(levelClassName),
+                        [classes.slimList]: Boolean(slimSize),
+                        [classes.openCurrent]: true,
+                        [classes.drawerIconSize]: !localdrawerOpen,
+                    })
+                    : clsx({
+                        [classes.item]: true,
+                        [levelClassName]: Boolean(levelClassName),
+                        [classes.slimList]: Boolean(slimSize),
+                        [classes.drawerIconSize]: !localdrawerOpen,
+                    }), children: [jsx(Tooltip, { title: item.label, arrow: true, placement: localdrawerOpen ? "bottom-start" : "right", children: jsx("span", { children: icon }) }), drawerOpen || !Boolean(icon) ? (jsxs(Fragment$1, { children: [jsx(ListItemText, { primary: item.label, secondary: item.secondaryLabel ?? null, color: "primary", className: classes.link }), open ? jsx(ExpandLess, {}) : jsx(ExpandMore, {})] })) : null] }), jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: jsx(List, { component: "div", disablePadding: true, className: open ? classes.openList : "", children: childrens }) })] }));
+};
+const isActiveMenuFromhref = (location, menuhref, navigationProps, rootUrl, dashboardUrl) => {
+    if ((location === `/${rootUrl}` || location === `/${rootUrl}/`) &&
+        menuhref === dashboardUrl) {
+        return true;
+    }
+    else if (menuhref === "report") {
+        try {
+            let urlParms = new URLSearchParams(navigationProps);
+            if ("?" + urlParms.toString() === window.location.search) {
+                return true;
+            }
+        }
+        catch (error) {
+            console.log(error);
+        }
+        return false;
+    }
+    else if (location !== `/${rootUrl}` &&
+        location !== "/" &&
+        Boolean(menuhref) &&
+        location.includes(menuhref)) {
+        return true;
+    }
+    return false;
+};
+
+const matchByValue = (search, tags, navItem) => {
+    if (!Array.isArray(tags)) {
+        tags = [tags];
+    }
+    return tags.some((one) => navItem[one]
+        ?.toLocaleLowerCase?.()
+        ?.includes(search?.toLocaleLowerCase?.()));
+};
+const filterMetaDataByValue = (searchString, navItems, tagsToSearch) => {
+    let newNavItems = [];
+    for (let i = 0; i < navItems.length; i++) {
+        if (matchByValue(searchString, tagsToSearch, navItems[i])) {
+            let { children, ...newItem } = navItems[i];
+            if (Array.isArray(children) && children.length > 0) {
+                let newChildren = filterMetaDataByValue(searchString, children, tagsToSearch);
+                if (newChildren.length > 0) {
+                    newNavItems.push({ ...newItem, children: newChildren });
+                }
+            }
+            else {
+                newNavItems.push({ ...newItem });
+            }
+        }
+    }
+    return newNavItems;
+};
+
+const SearchViewNavigation = ({ metaData, handleDrawerOpen, drawerOpen, setView, label, icon, placeholder = "Search Reports...", rootUrl, dashboardUrl, navigate }) => {
+    const [search, setSearch] = useState("");
+    const filteredMetaData = useMemo(() => {
+        return filterMetaDataByValue(search, metaData.navItems, [
+            "label",
+            "secondaryLabel",
+        ]);
+    }, [search, metaData.navItems]);
+    const classes = useStylesSideBar();
+    const myIcon = icon ? (jsx(ListItemIcon, { className: classes.listIcon, children: jsx(ArrowBackIosNewIcon, {}) })) : null;
+    const handleClick = () => {
+        if (!drawerOpen) {
+            handleDrawerOpen();
+        }
+    };
+    return (jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [jsxs(ListItem, { button: true, className: clsx({
+                    [classes.item]: true,
+                    [classes.nestedMenuLevel1]: true,
+                    [classes.linktext]: true,
+                }), onClick: () => setView("/"), children: [myIcon, jsx(ListItemText, { primary: label, className: classes.link })] }), jsx(SearchBar, { sx: { overflow: "hidden" }, value: search, onChange: (e) => setSearch(e.target.value), onClick: handleClick, placeholder: Boolean(placeholder) ? placeholder : "Search Reports...", autoFocus: drawerOpen }), jsx(SideBarNav, { handleDrawerOpen: handleDrawerOpen, drawerOpen: drawerOpen, setView: setView, metaData: {
+                    navItems: filteredMetaData,
+                    config: { rel: "", target: "_blank" },
+                }, slimSize: true, isFromSeparetView: true, rootUrl: rootUrl, dashboardUrl: dashboardUrl, navigate: navigate })] }));
+};
+
+library.add(faHandsHelping, faUsers, faBars, faBalanceScale, faHandHoldingHeart, faTasks, faCog, faHome, faTh, faUsersCog, faCircle, faUserCircle, faHashtag, faThumbtack, faSquare, faLink, faQuestion, faPlus, faTable, faLocationArrow, faHeadset, faGears, faArrowDown, faArrowUp, faSpinner, faCircleExclamation, faRotateRight, faUserLock, faUserClock, faGripHorizontal, faFileLines, faGear, faHeadphones, faUsersGear, faMessage, faUnlock, faUserPlus, faUserCheck, faKey, faIdCard, faIdBadge, faCheck, faCheckDouble, faCircleCheck, faCircleXmark, faUserTag, faAddressCard, faChartColumn, faUserPen, faHandHolding, faHandHoldingMedical, faObjectGroup, faTowerCell, faTowerObservation, faBuilding, faMailBulk, faLandmarkFlag, faCreditCard, faHospitalSymbol, faPlugCircleBolt, faCodeBranch, faPersonCircleCheck, faBank, faServer, faNotesMedical, faA, faB, faC, faD, faE, faF, faG, faH, faI, faJ, faK, faL, faM, faN, faO, faP, faQ, faR, faS, faT, faU, faV, faW, faX, faY, faZ);
+
+const transformMetaDataAsPerRole = (metaData, role, branches, company, access, products) => {
+    let navItems = filterMetaData(metaData.navItems, role, branches, company, access, products);
+    //console.log(navItems);
+    let newnavItem = navItems.map((item) => {
+        let { children, ...newItem } = item;
+        if (Array.isArray(children) && children.length > 5) {
+            if (!Boolean(newItem.seperateView)) {
+                newItem.seperateView = true;
+                newItem.viewName = "newfilterview";
+                //console.log(newItem);
+            }
+        }
+        return { ...newItem, children: children };
+    });
+    return {
+        config: metaData.config,
+        navItems: newnavItem,
+    };
+};
+const matchBranches = (userBranches, accessBranches) => {
+    if (!Array.isArray(accessBranches) || !Array.isArray(userBranches)) {
+        return true;
+    }
+    if (accessBranches.length <= 0 || userBranches.length <= 0) {
+        return true;
+    }
+    for (const one of accessBranches) {
+        if (userBranches.indexOf(one) >= 0) {
+            return true;
+        }
+    }
+    return false;
+};
+const matchComany = (userCompany, accessCompany) => {
+    if (!Array.isArray(accessCompany) || !Boolean(userCompany)) {
+        return true;
+    }
+    if (accessCompany.length <= 0) {
+        return true;
+    }
+    if (accessCompany.indexOf(userCompany) >= 0) {
+        return true;
+    }
+    return false;
+};
+const matchRoles = (userRole, accessRoles) => {
+    if (!Array.isArray(accessRoles) || typeof userRole !== "number") {
+        return true;
+    }
+    if (accessRoles.length <= 0) {
+        return true;
+    }
+    if (accessRoles.indexOf(userRole) >= 0) {
+        return true;
+    }
+    return false;
+};
+const matchInvisibleRoles = (userRole, accessRoles) => {
+    if (!Array.isArray(accessRoles) || typeof userRole !== "number") {
+        return true;
+    }
+    if (accessRoles.length <= 0) {
+        return true;
+    }
+    if (accessRoles.indexOf(userRole) >= 0) {
+        return false;
+    }
+    return true;
+};
+const matchProducts = (userProducts, accessProducts) => {
+    if (!Array.isArray(accessProducts) || !Array.isArray(userProducts)) {
+        return true;
+    }
+    if (accessProducts.length <= 0 || userProducts.length <= 0) {
+        return true;
+    }
+    for (const one of accessProducts) {
+        if (userProducts.indexOf(one) >= 0) {
+            return true;
+        }
+    }
+    return false;
+};
+const ishrefisNotNull = (item) => {
+    if (!(Array.isArray(item.children) && item.children.length > 0) &&
+        !Boolean(item.href)) {
+        //console.log(item);
+        return false;
+    }
+    return true;
+};
+const filterMetaData = (navItems, role, branches, company, access, products) => {
+    let newNavItems = [];
+    for (let i = 0; i < navItems.length; i++) {
+        if (matchRoles(Number(role), navItems[i].visibleToRoles) &&
+            matchComany(company, navItems[i].visibleToCompanies) &&
+            matchBranches(branches, navItems[i].visibleToBranches) &&
+            matchInvisibleRoles(Number(role), navItems[i].invisibleToRoles) &&
+            matchProducts(products, navItems[i].visibleToProducts) &&
+            ishrefisNotNull(navItems[i])) {
+            let { children, ...newItem } = navItems[i];
+            if (Array.isArray(children) && children.length > 0) {
+                let newChildren = filterMetaData(children, role, branches, company, access, products);
+                if (newChildren.length > 0) {
+                    newNavItems.push({ ...newItem, children: newChildren });
+                }
+            }
+            else {
+                newNavItems.push({ ...newItem, secondaryLabel: newItem.system_code });
+            }
+        }
+    }
+    return newNavItems;
+};
+
+/* eslint-disable react-hooks/exhaustive-deps */
+const SideBar = ({ authState, handleDrawerOpen, open, rootUrl, dashboardUrl = "dashboard", navigate }) => {
+    const [view, setView] = useState("/");
+    const [NewFilterView, setNewFilterView] = useState({});
+    const [NewFilterData, setNewFilterData] = useState([]);
+    const branches = useMemo(() => {
+        let myBranches = authState?.access?.entities?.Branch ?? [];
+        if (Array.isArray(myBranches) && myBranches.length >= 0) {
+            return myBranches.map((one) => one.branchCode);
+        }
+        else {
+            return [];
+        }
+    }, []);
+    const products = useMemo(() => {
+        let myProducts = authState?.access?.products ?? [];
+        if (Array.isArray(myProducts) && myProducts.length >= 0) {
+            return myProducts.map((one) => one.categoryCode);
+        }
+        else {
+            return [];
+        }
+    }, []);
+    let newMetaData = { navItems: authState.menulistdata };
+    let filteredMetaDataSideBar = transformMetaDataAsPerRole(newMetaData, Number(authState.role), branches, authState.companyID, authState.access, products);
+    let filteredReportsMetaData = transformMetaDataAsPerRole({
+        config: { rel: "", target: "_blank" },
+        navItems: reportMetaData,
+    }, Number(authState.role), branches, authState.companyID, authState.access, products);
+    return view === "report" ? (jsx(SearchViewNavigation, { metaData: filteredReportsMetaData, handleDrawerOpen: handleDrawerOpen, drawerOpen: open, setView: setView, label: "Reports", icon: "table", rootUrl: rootUrl, dashboardUrl: dashboardUrl, navigate: navigate })) : view === "newfilterview" ? (jsx(SearchViewNavigation, { metaData: {
+            config: { rel: "", target: "_blank" },
+            navItems: NewFilterData,
+        }, handleDrawerOpen: handleDrawerOpen, drawerOpen: open, setView: setView, label: NewFilterView?.label ?? "Reports", icon: "table", placeholder: NewFilterView?.placeholder, rootUrl: rootUrl, dashboardUrl: dashboardUrl, navigate: navigate })) : (jsx(Fragment$1, { children: jsx(SideBarNav, { metaData: filteredMetaDataSideBar, handleDrawerOpen: handleDrawerOpen, drawerOpen: open, setView: setView, slimSize: true, setNewFilterData: setNewFilterData, setNewFilterView: setNewFilterView, rootUrl: rootUrl, dashboardUrl: dashboardUrl, navigate: navigate }) }));
+};
+
+const SidebarWrapper = (props) => {
+    const classes = useStyles();
+    return (jsxs(Drawer, { variant: "permanent", classes: {
+            paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
+        }, open: props.open, children: [jsx("div", { className: classes.toolbarIcon }), jsx(SideBar, { ...props })] }));
+};
+
+export { AppbarWrapper, AuthControllerWrapper, BranchSelectionGridWrapper, ForgotPasswordControllerWrapper, SidebarWrapper, ValidatePassword };
 //# sourceMappingURL=index.js.map