@acuteinfo/common-screens 1.0.22 → 1.0.23

package/dist/index.d.ts

@@ -3,4 +3,5 @@ import "buffer";
 export * from "./pages/auth/authController";
 export * from "./pages/auth/forgotPassword";
 export * from "./pages/branchSelection/branchSelectionGrid";
+export { AppbarWrapper } from "./pages/appbar";
 export * from "./pages/types";

package/dist/index.js

@@ -5,7 +5,7 @@ import { useState, useRef, useEffect, Fragment, useMemo, useReducer, useCallback
 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 } from '@mui/material';
+import { Container, Grid, InputAdornment, IconButton, CircularProgress, FormHelperText, Typography, Tooltip, tooltipClasses, Stack, Box, Avatar, Button, alpha, AppBar, Toolbar } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import OTPInput, { ResendOTP } from 'otp-input-react';
 import IconButton$1 from '@mui/material/IconButton';
@@ -17,8 +17,12 @@ import { useQuery, useMutation } from 'react-query';
 import bank_logo_default from 'assets/images/BecomePartnerImg.svg';
 import { styled } from '@mui/material/styles';
 import USER_PROFILE_DEFAULT from 'assets/images/USER_PROFILE_DEFAULT.png';
+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';
 
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
     wrapper: {
         minHeight: "100vh",
         boxShadow: "0 3px 6px rgba(0,0,0,0.03)",
@@ -816,7 +820,7 @@ const isBase64 = (str = "") => {
 const BankDetails = ({ bannerDetails }) => {
     const [loginImageURL, setLoginImageURL] = useState(null);
     const urlObj = useRef(null);
-    const classes = useStyles$1();
+    const classes = useStyles$2();
     const banner = useMemo(() => bannerDetails, []);
     useEffect(() => {
         if (Boolean(banner?.bannerImg)) {
@@ -1208,7 +1212,7 @@ const reducer$1 = (state, action) => {
     }
 };
 const AuthControllerWrapper = ({ bannerDetails, logoUrl, logoTitle, loginFn, veirfyUsernameandPassword, verifyOTP, OTPResendRequest, ResetPassword, LanguageComponent, forgotPasswordEndpoint, }) => {
-    const classes = useStyles$1();
+    const classes = useStyles$2();
     const [loginState, dispath] = useReducer(reducer$1, inititalState$1);
     const [openpwdreset, setOpenPwdReset] = useState(false);
     const failureCount = useRef(0);
@@ -1724,7 +1728,7 @@ const reducer = (state, action) => {
     }
 };
 const ForgotPasswordControllerWrapper = ({ screenFlag, updatenewPassword, veirfyUsernameandMobileNo, verifyOTPForPWDReset, logoUrl, logoTitle, LanguageComponent, bannerDetails, navigate, loginPageEndpoint, }) => {
-    const classes = useStyles$1();
+    const classes = useStyles$2();
     const [loginState, dispath] = useReducer(reducer, inititalState);
     const [open, setOpen] = useState(false);
     const { enqueueSnackbar } = useSnackbar();
@@ -2048,7 +2052,7 @@ styleInject(css_248z);
 
 var Waving_hand = "waving-hand.png";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
     heading_user_img: {
         width: "40px",
         height: "40px",
@@ -2089,7 +2093,7 @@ const actions = [
     },
 ];
 const BranchSelectionGrid = ({ selectionMode, authState, isBranchSelectedFn, isLoggedInFn, logoutFn, logos, logo, navigate, BranchSelectionGridDataApiFn, GetMenuDataApiFn, sideImage, branchSelectFn, dashboardUrl, loginUrl, appTranCd, }) => {
-    const classes = useStyles();
+    const classes = useStyles$1();
     const { enqueueSnackbar } = useSnackbar();
     const { data, isLoading, isFetching, refetch, error, isError } = useQuery(["BranchSelectionGridData"], () => BranchSelectionGridDataApiFn());
     useEffect(() => {
@@ -2264,5 +2268,277 @@ const BranchSelectionGridWrapper = (props) => {
     return (jsx(ClearCacheProvider, { children: jsx(BranchSelectionGrid, { ...props }) }));
 };
 
-export { AuthControllerWrapper, BranchSelectionGridWrapper, ForgotPasswordControllerWrapper, ValidatePassword };
+const useStyles = makeStyles((theme) => ({
+    appBar: {
+        // zIndex: theme.zIndex.drawer + 1,
+        transition: theme.transitions.create(["width", "margin"], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        color: "#0063A3",
+        height: "80px",
+        background: "var(--theme-color2)",
+        boxShadow: "0px 1px 0px -0.5px #DEE0E2",
+    },
+    searchBar: {
+        width: 290,
+        border: "none",
+        color: "rgba(0, 0, 0, 0.87) !important",
+        backgroundColor: "rgb(235 237 238 / 26%)!important",
+        "& input": {
+            width: "100% !important",
+        },
+    },
+    searchList: {
+        position: "absolute",
+        background: "#fff",
+        width: "100%",
+        borderRadius: "6px",
+        boxShadow: "0 12px 25px rgba(0,0,0,.3)",
+        top: "120%",
+        height: "auto",
+        maxHeight: "325px",
+        overflowY: "auto",
+        "& .list-links": {
+            background: "none",
+            border: "none",
+            outline: "none",
+            cursor: "pointer",
+            textDecoration: "none",
+            padding: "0.7rem 1rem",
+            fontSize: "0.90rem",
+            textAlign: "left",
+            borderBottom: "1px solid #ddd",
+            color: "#222 !important",
+            fontWeight: 500,
+            "&:hover, &.active": {
+                backgroundColor: "#f4f4f4",
+            },
+        },
+    },
+    appBarShift: {
+        paddingLeft: "0px",
+        // width: `calc(100% - ${drawerWidth}px)`,
+        transition: theme.transitions.create(["width", "margin"], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+            background: "rgba(250, 251, 255, 0.9)",
+        }),
+    },
+    heading_user_dtl: {
+        width: "458px",
+        height: "73px",
+        left: "37px",
+        top: "calc(50% - 73px/2)",
+    },
+    heading_user_img: {
+        width: "40px",
+        height: "40px",
+        // cursor: "pointer",
+    },
+    heading_user_img_border: {
+        border: "2px dashed var(--theme-color3)",
+        borderRadius: "50%",
+        padding: "4px",
+    },
+    toolbar: {
+        minHeight: "80px",
+        paddingLeft: "0px",
+        height: "80px",
+    },
+    title: {
+        flexGrow: 1,
+        padding: theme.spacing(0.5, 0),
+        color: "var(--theme-color1)",
+    },
+    searchRoot: {
+        fontFamily: theme.typography.fontFamily,
+        position: "relative",
+        boxShadow: "0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)",
+        marginRight: theme.spacing(2),
+        marginLeft: theme.spacing(1),
+        marginBottom: theme.spacing(0.25),
+        marginTop: theme.spacing(0.25),
+        borderRadius: 40,
+        backgroundColor: alpha(theme.palette.common.white, 0.15),
+        "&:hover": {
+            backgroundColor: alpha(theme.palette.common.white, 0.25),
+        },
+        "& $inputInput": {
+            transition: theme.transitions.create("width"),
+            width: 120,
+            "&:focus": {
+                width: 170,
+            },
+        },
+    },
+    search: {
+        width: theme.spacing(6),
+        height: "100%",
+        position: "absolute",
+        pointerEvents: "none",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    inputRoot: {
+        color: "inherit",
+        marginTop: 0,
+        borderRadius: "40px",
+    },
+    inputInput: {
+        padding: theme.spacing(1, 1, 1, 6),
+    },
+    loggedInUser: {
+        marginLeft: theme.spacing(2),
+    },
+    nameClass: {
+        color: "#0063A3",
+        fontWeight: 600,
+        textTransform: "capitalize",
+        lineHeight: "1.4",
+        textAlign: "left",
+    },
+    dropDown: {
+        fontSize: "2rem",
+    },
+    vTop: {
+        verticalAlign: "top",
+        paddingLeft: "4px",
+        color: "var(--theme-color1)",
+    },
+    userDesignation: {
+        margin: "0px",
+        fontWeight: 500,
+        fontSize: "0.875rem",
+        lineHeight: 1.57,
+        color: "var(--theme-color1)",
+    },
+    userName: {
+        margin: "0px",
+        fontWeight: 500,
+        fontSize: "0.875rem",
+        lineHeight: 1.57,
+        color: "var(--theme-color3)",
+    },
+    userprofilehover: {
+        "&:hover": {
+            backgroundColor: "var(--theme-color2)",
+        },
+    },
+    lang_svg: {
+        marginRight: "10px",
+        width: "22px",
+        height: "22px",
+    },
+    logo: {
+        height: "38px",
+    },
+    version01: {
+        margin: "0",
+        textAlign: "center",
+        color: "var(--theme-color3)",
+        fontSize: "9px",
+    },
+    DrawerClose_icon: {
+        color: "var(--theme-color3)",
+        position: "static",
+        background: "transperant",
+        "&:hover": {
+            background: "var(--theme-color4)",
+        },
+        width: "46px",
+        height: "46px",
+    },
+    marquee: {
+        animation: "$marquee 10s linear infinite",
+        animationDelay: "3s",
+    },
+    "@keyframes marquee": {
+        "0%": { transform: "translateX(100%)" },
+        "100%": { transform: "translateX(-100%)" },
+    },
+    popover: {
+        popover: {
+            maxWidth: "100%",
+            width: "fit-content",
+            "& .MuiPopover-paper": {
+                maxWidth: "100%",
+            },
+        },
+    },
+}));
+
+const AppbarWrapper = ({ handleDrawerOpen, handleDrawerClose, open, authState, LanguageComponent, SearchComponent, dashboardUrl, logos, bankLogo, profilePic, handleLogout, handleProfile, navigate, hideGreetings }) => {
+    const classes = useStyles();
+    const { t } = useTranslation();
+    const LightTooltip = styled(({ className, ...props }) => (jsx(Tooltip, { ...props, classes: { popper: className } })))(({ theme }) => ({
+        [`& .${tooltipClasses.tooltip}`]: {
+            backgroundColor: theme.palette.common.white,
+            color: "rgba(0, 0, 0, 0.87)",
+            boxShadow: theme.shadows[1],
+            fontSize: 13,
+        },
+    }));
+    const Greetings = () => {
+        let hours = new Date().getHours();
+        let greet;
+        if (hours < 12)
+            greet = "morning";
+        else if (hours >= 12 && hours <= 16)
+            greet = "afternoon";
+        else if (hours >= 16 && hours <= 24)
+            greet = "evening";
+        return jsxs("span", { children: ["Good ", greet, ","] });
+    };
+    return (jsx(AppBar, { position: "fixed", elevation: 0, className: clsx(classes.appBar, open && classes.appBarShift), children: jsxs(Toolbar, { className: classes.toolbar, children: [jsxs(Box, { sx: {
+                        display: "flex",
+                        justifyContent: "space-evenly",
+                        alignItems: "center",
+                        height: "80px",
+                        width: "227px",
+                    }, 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 ?? "");
+                                    } }), jsx("p", { className: classes.version01, children: logos?.version })] })] }), jsx(Stack, { direction: "row", spacing: 4, mx: 2, children: jsx(Box, { className: classes.heading_user_img_border, children: jsx(Avatar, { className: classes.heading_user_img, alt: "Remy Sharp", src: Boolean(logos?.bank) ? logos?.bank : bank_logo_default }) }) }), jsxs(Typography, { component: "h1", variant: "h6", color: "inherit", noWrap: true, className: classes.title, children: [jsx(Box, { style: {
+                                marginBottom: "8px",
+                                fontSize: "17px",
+                                color: "var(--theme-color1)",
+                                width: "555px",
+                            }, className: clsx({
+                                [classes.marquee]: authState?.companyName.length > 55,
+                            }), children: authState?.companyName || "" }), jsx("div", { style: { display: "flex", gap: "8px" }, children: jsxs("div", { style: { color: "var(--theme-color6)" }, children: [jsxs(Typography, { variant: "caption", display: "block", lineHeight: 0, fontSize: "11px", children: [t("appBar.Branch"), ":", authState?.user?.branchCode ?? "001 ", "-", authState?.user?.branch ?? ""] }), jsxs(Typography, { variant: "caption", display: "inline", fontSize: "11px", children: [t("appBar.WorkingDate"), ":", " ", Boolean(authState?.workingDate)
+                                                ? checkDateAndDisplay(format(new Date(authState?.workingDate), "dd/MM/yyyy"))
+                                                : "not found"] }), jsxs(Typography, { marginLeft: 1, variant: "caption", display: "inline", fontSize: "11px", children: [t("appBar.LastLoginDate"), " :", " ", checkDateAndDisplay(authState?.user?.lastLogin ?? "Vastrapur")] })] }) })] }), jsxs(Box, { children: [hideGreetings ? (jsx(Box, { sx: { marginBottom: "3px", paddingRight: "15px" }, children: jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "flex-end", alignItems: "center", children: [jsxs(Typography, { fontSize: "17px", color: "#1C1C1C", children: [Greetings(), " ", authState?.user?.id ?? ""] }), jsx("img", { src: Waving_hand$1, alt: "", style: { height: "18px" } })] }) })) : null, jsxs(Box, { display: "flex", justifyContent: "space-evenly", alignItems: "center", children: [SearchComponent ? jsx(SearchComponent, {}) : null, LanguageComponent ? jsx(LanguageComponent, {}) : null, jsx(Box, { maxWidth: 170, display: "flex", justifyContent: "end", children: jsx(Tooltip, { title: "Logout", placement: "bottom", arrow: true, children: jsx(IconButton$1, { onClick: () => typeof handleLogout === "function" ? handleLogout() : null, color: "error", sx: {
+                                                backgroundColor: "rgba(235, 237, 238, 0.45)",
+                                                borderRadius: "10px",
+                                                height: "30px",
+                                                width: "30px",
+                                                "&:hover": {
+                                                    background: "var(--theme-color2)",
+                                                    borderRadius: "10px",
+                                                    transition: "all 0.2s ease 0s",
+                                                    boxShadow: "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
+                                                    "& .MuiSvgIcon-root": {
+                                                        height: "32px",
+                                                        width: "32px",
+                                                        transition: "all 0.2s ease 0s",
+                                                        padding: "4px",
+                                                    },
+                                                },
+                                            }, "aria-label": "show 4 new mails", children: jsx(LogoutIcon, {}) }) }) })] })] }), jsx(Stack, { direction: "row", spacing: 4, ml: 1, children: jsx(Box, { className: classes.heading_user_img_border, sx: { cursor: "pointer" }, children: jsx(LightTooltip, { title: jsxs(Fragment$1, { children: [jsxs("div", { children: [" ", t("appBar.UserID"), ": ", authState?.user?.id] }), jsxs("div", { children: [t("appBar.Role"), " : ", authState?.roleName] }), jsxs("div", { children: [t("appBar.LastUnsuccessfulLogin"), " : \"\""] })] }), placement: "bottom-start", children: jsx(Avatar, { className: classes.heading_user_img, onClick: () => typeof handleProfile === "function" ? handleProfile() : null, alt: "Remy Sharp", src: profilePic ?? "" }) }) }) })] }) }));
+};
+const checkDateAndDisplay = (dateStr) => {
+    // const dt = new Date(dateStr);
+    // //@ts-ignore
+    // if (dt instanceof Date && !isNaN(dt)) {
+    //   return dt.toDateString();
+    // }
+    if (Boolean(dateStr)) {
+        return dateStr;
+    }
+    return "N/A";
+};
+
+export { AppbarWrapper, AuthControllerWrapper, BranchSelectionGridWrapper, ForgotPasswordControllerWrapper, ValidatePassword };
 //# sourceMappingURL=index.js.map