@acuteinfo/common-screens 1.0.17 → 1.0.19

package/dist/index.d.ts

@@ -2,3 +2,4 @@ import "regenerator-runtime/runtime";
 import "buffer";
 export * from "./pages/auth/authController";
 export * from "./pages/auth/forgotPassword";
+export * from "./pages/branchSelection/branchSelectionGrid";

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 } from '@acuteinfo/common-base';
-import { useState, useRef, useEffect, Fragment, useMemo, useReducer } from 'react';
+import { TextField, GradientButton, utilFunction, ClearCacheProvider, queryClient, Alert, GridWrapper } 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 } from '@mui/material';
+import { Container, Grid, InputAdornment, IconButton, CircularProgress, FormHelperText, Typography, Tooltip, tooltipClasses, Stack, Box, Avatar, Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import OTPInput, { ResendOTP } from 'otp-input-react';
 import IconButton$1 from '@mui/material/IconButton';
@@ -13,8 +13,12 @@ import clsx from 'clsx';
 import { useSnackbar } from 'notistack';
 import FingerprintSharpIcon from '@mui/icons-material/FingerprintSharp';
 import CryptoJS from 'crypto-js';
+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';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
     wrapper: {
         minHeight: "100vh",
         boxShadow: "0 3px 6px rgba(0,0,0,0.03)",
@@ -186,7 +190,7 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
-const UsernamePasswordField = ({ classes, loginState, verifyUsernamePassword, forgotPasswordEndpoint }) => {
+const UsernamePasswordField = ({ classes, loginState, verifyUsernamePassword, forgotPasswordEndpoint, }) => {
     const [input, setInput] = useState({ userName: "", password: "" });
     const [showPasswordTime, setShowPasswordTime] = useState(0);
     const showPassword = Date.now() < showPasswordTime;
@@ -600,8 +604,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".spinner-wrap{position:relative}.spinner-item{animation:zoom 2s linear .75s infinite;border:1px solid #949597;border-radius:50%;height:250px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:250px}.spinner-item--2{animation-delay:1.25s}.spinner-item--3{animation-delay:1.75s}@keyframes zoom{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}50%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(.6)}}.image{height:50px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.progress{backdrop-filter:blur(2px) brightness(101%);border:1px solid #b0b0b0;border-radius:4px;box-shadow:0 0 3px #b0b0;margin:0 auto;width:20em}.bar{background:#4263c7;height:4px;width:65%}";
-styleInject(css_248z);
+var css_248z$1 = ".spinner-wrap{position:relative}.spinner-item{animation:zoom 2s linear .75s infinite;border:1px solid #949597;border-radius:50%;height:250px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:250px}.spinner-item--2{animation-delay:1.25s}.spinner-item--3{animation-delay:1.75s}@keyframes zoom{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}50%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(.6)}}.image{height:50px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.progress{backdrop-filter:blur(2px) brightness(101%);border:1px solid #b0b0b0;border-radius:4px;box-shadow:0 0 3px #b0b0;margin:0 auto;width:20em}.bar{background:#4263c7;height:4px;width:65%}";
+styleInject(css_248z$1);
 
 const VerifyFinger = ({ classes, loginState, verifyFinger, previousStep, }) => {
     const { t } = useTranslation();
@@ -812,7 +816,7 @@ const isBase64 = (str = "") => {
 const BankDetails = ({ bannerDetails }) => {
     const [loginImageURL, setLoginImageURL] = useState(null);
     const urlObj = useRef(null);
-    const classes = useStyles();
+    const classes = useStyles$1();
     const banner = useMemo(() => bannerDetails, []);
     useEffect(() => {
         if (Boolean(banner?.bannerImg)) {
@@ -1203,8 +1207,8 @@ const reducer$1 = (state, action) => {
         }
     }
 };
-const AuthControllerWrapper = ({ bannerDetails, logoUrl, logoTitle, loginFn, veirfyUsernameandPassword, verifyOTP, OTPResendRequest, ResetPassword, LanguageComponent, forgotPasswordEndpoint }) => {
-    const classes = useStyles();
+const AuthControllerWrapper = ({ bannerDetails, logoUrl, logoTitle, loginFn, veirfyUsernameandPassword, verifyOTP, OTPResendRequest, ResetPassword, LanguageComponent, forgotPasswordEndpoint, }) => {
+    const classes = useStyles$1();
     const [loginState, dispath] = useReducer(reducer$1, inititalState$1);
     const [openpwdreset, setOpenPwdReset] = useState(false);
     const failureCount = useRef(0);
@@ -1455,7 +1459,7 @@ const AuthControllerWrapper = ({ bannerDetails, logoUrl, logoTitle, loginFn, vei
                                             }, otpresendCount: otpResendRef.current }, "OTPForm")] })) : (jsx(VerifyFinger, { classes: classes, loginState: loginState, verifyFinger: verifyFinger, previousStep: changeUserName }, "biometric")) })) }))] })] }) }));
 };
 
-const ForgotPasswordFields = ({ classes, loginState, onSubmit, navigate, loginPageEndpoint }) => {
+const ForgotPasswordFields = ({ classes, loginState, onSubmit, navigate, loginPageEndpoint, }) => {
     const [input, setInput] = useState({
         userName: loginState.workingState === 1 ? loginState?.username : "",
         mobileno: "",
@@ -1719,8 +1723,8 @@ const reducer = (state, action) => {
         }
     }
 };
-const ForgotPasswordControllerWrapper = ({ screenFlag, updatenewPassword, veirfyUsernameandMobileNo, verifyOTPForPWDReset, logoUrl, logoTitle, LanguageComponent, bannerDetails, navigate, loginPageEndpoint }) => {
-    const classes = useStyles();
+const ForgotPasswordControllerWrapper = ({ screenFlag, updatenewPassword, veirfyUsernameandMobileNo, verifyOTPForPWDReset, logoUrl, logoTitle, LanguageComponent, bannerDetails, navigate, loginPageEndpoint, }) => {
+    const classes = useStyles$1();
     const [loginState, dispath] = useReducer(reducer, inititalState);
     const [open, setOpen] = useState(false);
     const { enqueueSnackbar } = useSnackbar();
@@ -1917,5 +1921,353 @@ const ForgotPasswordControllerWrapper = ({ screenFlag, updatenewPassword, veirfy
                                         }, otpresendCount: otpResendRef.current, OTPResendRequest: undefined })) : (jsx(ForgotPasswordFields, { classes: classes, loginState: loginState, onSubmit: onSubmitHandel, navigate: navigate, loginPageEndpoint: loginPageEndpoint }))] }) })] })] }) }));
 };
 
-export { AuthControllerWrapper, ForgotPasswordControllerWrapper, ValidatePassword };
+const BranchSelectionGridMetaData = {
+    gridConfig: {
+        dense: true,
+        gridLabel: "Access Branch List",
+        rowIdColumn: "BRANCH_CD",
+        // searchPlaceholder: "Branches",
+        defaultColumnConfig: {
+            width: 400,
+            maxWidth: 450,
+            minWidth: 300,
+        },
+        allowColumnReordering: false,
+        disableSorting: false,
+        hideHeader: false,
+        disableGroupBy: true,
+        enablePagination: false,
+        containerHeight: {
+            min: "68vh",
+            max: "68vh ",
+        },
+        allowFilter: false,
+        allowColumnHiding: false,
+        allowRowSelection: false,
+        isCusrsorFocused: true,
+        hideFooter: true,
+    },
+    columns: [
+        {
+            accessor: "BRANCH_CD",
+            columnName: "Branch Code",
+            sequence: 1,
+            alignment: "left",
+            componentType: "default",
+            width: 200,
+            minWidth: 140,
+            maxWidth: 220,
+        },
+        {
+            accessor: "BRANCH_NM",
+            columnName: "Branch Name",
+            sequence: 2,
+            alignment: "left",
+            componentType: "default",
+            width: 280,
+            minWidth: 280,
+            maxWidth: 420,
+        },
+        {
+            accessor: "DISP_STATUS",
+            columnName: "Status",
+            sequence: 3,
+            alignment: "left",
+            componentType: "default",
+            width: 200,
+            minWidth: 140,
+            maxWidth: 220,
+        },
+        {
+            accessor: "BEGIN_DATETIME",
+            columnName: "Begin Time",
+            sequence: 4,
+            alignment: "left",
+            componentType: "dateTime",
+            width: 222,
+            minWidth: 140,
+            maxWidth: 240,
+        },
+        {
+            accessor: "END_DATETIME",
+            columnName: "End Time",
+            sequence: 5,
+            alignment: "left",
+            componentType: "dateTime",
+            width: 222,
+            minWidth: 140,
+            maxWidth: 240,
+        },
+        {
+            accessor: "DAYEND_STATUS",
+            columnName: "Dayend Status",
+            sequence: 6,
+            componentType: "default",
+            isVisible: false,
+        },
+        {
+            accessor: "EOD_RUNNING_STATUS",
+            columnName: "EOD Running Status",
+            sequence: 6,
+            componentType: "default",
+            isVisible: false,
+        },
+        {
+            accessor: "BASE_COMP_CD",
+            columnName: "Base Comp Cd",
+            sequence: 6,
+            componentType: "default",
+            isVisible: false,
+        },
+        {
+            accessor: "BASE_BRANCH_CD",
+            columnName: "Base Branch Cd",
+            sequence: 6,
+            componentType: "default",
+            isVisible: false,
+        },
+        {
+            accessor: "COMP_CD",
+            columnName: "Comp Cd",
+            sequence: 6,
+            componentType: "default",
+            isVisible: false,
+        },
+        {
+            accessor: "COMP_NM",
+            columnName: "Comp Name",
+            sequence: 6,
+            componentType: "default",
+            isVisible: false,
+        },
+    ],
+};
+
+var css_248z = "*{box-sizing:border-box}*,.sideImage{margin:0;padding:0}.sideImage{display:flex;height:100%;position:relative;z-index:1}.bank-name,.emp-id{font-size:18px;font-weight:600;line-height:1em;margin:8px 0}.bank-name{word-wrap:break-word}.name-heading{color:var(--theme-color1);font-weight:400;position:relative;z-index:1}.name-heading span{color:var(--theme-color1);font-weight:700}";
+styleInject(css_248z);
+
+var Waving_hand = "waving-hand.png";
+
+const useStyles = makeStyles((theme) => ({
+    heading_user_img: {
+        width: "40px",
+        height: "40px",
+        // cursor: "pointer",
+    },
+    heading_user_img_border: {
+        border: "2px dashed var(--theme-color3)",
+        borderRadius: "50%",
+        padding: "4px",
+    },
+    logo: {
+        height: "38px",
+    },
+}));
+
+const actions = [
+    {
+        actionName: "back",
+        actionLabel: "Back",
+        multiple: false,
+        rowDoubleClick: false,
+        // actionTextColor: "var(--theme-color3)",
+        // actionBackground: "var(--theme-color2)",
+        // startsIcon: "West",
+        // rotateIcon: "scale(1.4) rotateX(-360deg)",
+    },
+    {
+        actionName: "proceed",
+        actionLabel: "Proceed",
+        multiple: false,
+        rowDoubleClick: true,
+        // actionTextColor: "var(--theme-color2)",
+        // actionBackground: "var(--theme-color3)",
+        // onEnterSubmit: true,
+        // endsIcon: "East",
+        // rotateIcon: "scale(1.4) rotateX(-360deg)",
+    },
+];
+const BranchSelectionGrid = ({ selectionMode, authState, isBranchSelectedFn, isLoggedInFn, logoutFn, logos, logo, navigate, BranchSelectionGridDataApiFn, GetMenuDataApiFn, sideImage, branchSelectFn, dashboardUrl, loginUrl, appTranCd, }) => {
+    const classes = useStyles();
+    const { enqueueSnackbar } = useSnackbar();
+    const { data, isLoading, isFetching, refetch, error, isError } = useQuery(["BranchSelectionGridData"], () => BranchSelectionGridDataApiFn());
+    useEffect(() => {
+        return () => {
+            queryClient.removeQueries(["BranchSelectionGridData", {}]);
+        };
+    }, []);
+    // const imagesData = useQuery<any, any>(["getBankimgAndProfileimg"], () =>
+    //   getBankimgAndProfileimg({
+    //     userID: authController?.authState?.user?.id,
+    //     companyID: authController?.authState?.access_token?.companyID,
+    //   })
+    // );
+    useEffect(() => {
+        if (!isLoggedInFn()) {
+            navigate(loginUrl);
+        }
+        else if (isBranchSelectedFn() && selectionMode !== "C") {
+            navigate(dashboardUrl);
+        }
+    }, [isBranchSelectedFn, isLoggedInFn]);
+    const mutation = useMutation(GetMenuDataApiFn, {
+        onSuccess: (data, extreData) => {
+            branchSelectFn({
+                menulistdata: data,
+                branchCode: extreData?.BRANCH_CD,
+                branch: extreData?.BRANCH_NM,
+                baseBranchCode: extreData?.BASE_BRANCH_CD,
+            });
+        },
+    });
+    const getError = mutation.error;
+    const setCurrentAction = useCallback((data) => {
+        if (data.name === "proceed") {
+            if (data.rows?.length === 0) {
+                enqueueSnackbar("Please Select Branch", {
+                    variant: "error",
+                });
+            }
+            else if (data.rows?.[0]?.data?.STATUS === "C") {
+                enqueueSnackbar("Branch is in Day End Status.~rPlease contact system Vendor.", {
+                    variant: "error",
+                });
+            }
+            else {
+                mutation.mutate({
+                    BASE_COMP_CD: data.rows?.[0]?.data?.BASE_COMP_CD ?? "",
+                    BASE_BRANCH_CD: data.rows?.[0]?.data?.BASE_BRANCH_CD ?? "",
+                    COMP_CD: data.rows?.[0]?.data?.COMP_CD ?? "",
+                    BRANCH_CD: data.rows?.[0]?.data?.BRANCH_CD ?? "",
+                    GROUP_NAME: authState?.groupName ?? "",
+                    APP_TRAN_CD: appTranCd,
+                    COMP_NM: data.rows?.[0]?.data?.COMP_NM ?? "",
+                    BRANCH_NM: data.rows?.[0]?.data?.BRANCH_NM ?? "",
+                    DAYEND_STATUS: data.rows?.[0]?.data?.DAYEND_STATUS ?? "",
+                    EOD_RUNNING_STATUS: data.rows?.[0]?.data?.EOD_RUNNING_STATUS ?? "",
+                    IS_UPD_DEF_BRANCH: authState?.user?.isUpdDefBranch ?? "",
+                    COMP_BASE_BRANCH_CD: data.rows?.[0]?.data?.COMP_BASE_BRANCH_CD ?? "",
+                    selectionMode,
+                });
+            }
+        }
+        else if (data.name === "back") {
+            if (selectionMode === "C") {
+                navigate(dashboardUrl, {
+                    replace: true,
+                });
+            }
+            else {
+                logoutFn();
+            }
+        }
+    }, [navigate, data, mutation]);
+    useEffect(() => {
+        var oneBranchOpen = data?.some((branch) => branch.STATUS === "O");
+        if (oneBranchOpen === false) {
+            enqueueSnackbar("Branch is in Day End Status.~rPlease contact system Vendor.", {
+                variant: "error",
+            });
+            logoutFn();
+        }
+        if (data?.length === 1) {
+            if (data?.[0]?.STATUS === "O") {
+                setCurrentAction({ name: "proceed", rows: [{ data: { ...data[0] } }] });
+            }
+        }
+    }, [JSON.stringify(data)]);
+    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, ","] });
+    };
+    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 greet = Greetings();
+    return (jsx(Fragment$1, { children: jsxs(Grid, { container: true, style: {
+                margin: "0",
+                padding: "0",
+                height: "100vh",
+                // overflowY: "hidden",
+            }, children: [jsx(Grid, { item: true, lg: 1, md: 1, xl: 1, xs: 1, sm: 1, children: jsx("img", { className: "sideImage", src: sideImage, alt: "side-Image" }) }), jsx(Grid, { item: true, lg: 11, md: 11, xl: 11, xs: 11, style: {
+                        display: "flex",
+                        justifyContent: "center",
+                    }, children: jsxs(Grid, { container: true, style: {
+                            minHeight: "100vh",
+                            padding: "10px 0px 0px 0px",
+                        }, lg: 11, md: 11, xl: 11, xs: 11, children: [jsxs(Grid, { container: true, style: {
+                                    margin: "0",
+                                    padding: "0",
+                                    // height: "12vh",
+                                }, lg: 12, md: 12, xl: 12, xs: 12, children: [jsx(Grid, { xs: 12, sm: 1, md: 1, lg: 1, xl: 1, sx: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            // justifyContent: "center",
+                                        }, children: 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: ["User ID : ", authState?.user?.id ?? ""] }), jsxs("div", { children: ["Role : ", authState?.roleName ?? ""] }), jsx("div", { children: "Last Unsuccessful Login : \"\"" })] }), placement: "bottom-start", children: jsx(Avatar, { className: classes.heading_user_img, 
+                                                        // onClick={handleNavigate}
+                                                        alt: "Remy Sharp", src: Boolean(logos?.profile)
+                                                            ? logos?.profile
+                                                            : USER_PROFILE_DEFAULT }) }) }) }) }), jsxs(Grid, { xs: 12, sm: 5, md: 5, lg: 5, xl: 5, sx: {
+                                            justifyContent: "center",
+                                            display: "flex",
+                                            flexDirection: "column",
+                                        }, children: [jsxs("h1", { className: "name-heading", style: { fontSize: "24px", margin: "4px 0px" }, children: ["Welcome ", jsx("span", { children: `${authState?.user?.name ?? ""},` })] }), jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [jsx("h3", { style: { margin: "4px 0px" }, children: Greetings() }), jsx("img", { src: Waving_hand, alt: "", style: { height: "18px" } })] })] }), jsx(Grid, { xs: 12, sm: 1, md: 1, lg: 1, xl: 1, sx: {
+                                            display: "flex",
+                                            // flexDirection: "column",
+                                            justifyContent: "center",
+                                            alignItems: "center",
+                                        }, children: jsx(Stack, { direction: "row", justifyContent: "flex-start", spacing: 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(Grid, { xs: 12, sm: 3, md: 3, lg: 3, xl: 3, sx: {
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            justifyContent: "center",
+                                        }, children: [jsx("div", { className: "bank-name-container", style: { fontSize: "14px" }, children: jsx("p", { className: "bank-name", children: `Bank Name: ${authState?.companyName ?? ""}` }) }), jsx("p", { className: "emp-id", children: `Emp. Id: ${authState?.user?.employeeID ?? ""}` })] }), jsxs(Grid, { xs: 12, sm: 3, md: 3, lg: 2, xl: 2, sx: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "right",
+                                        }, children: [" ", jsx("div", { children: jsx("img", { src: Boolean(logos?.logo) ? logos?.logo : logo, alt: "CbsEnfinity", className: classes.logo }) })] })] }), isError ? (jsx(Fragment, { children: jsx("div", { style: { width: "100%", paddingTop: "10px" }, children: jsx(Alert, { severity: error?.severity ?? "error", errorMsg: error?.error_msg ?? "Error", errorDetail: error?.error_detail ?? "" }) }) })) : mutation.isError && mutation.error ? (jsx(Fragment, { children: jsx("div", { style: { width: "100%", paddingTop: "10px" }, children: jsx(Alert, { severity: getError.severity ?? "error", errorMsg: getError.error_msg ?? "Error", errorDetail: getError.error_detail ?? "" }) }) })) : null, jsx(GridWrapper, { finalMetaData: BranchSelectionGridMetaData, data: data ?? [], setData: () => null, actions: actions, setAction: setCurrentAction, 
+                                // controlsAtBottom={true}
+                                // headerToolbarStyle={{
+                                //   background: "var(--theme-color2)",
+                                //   color: "black",
+                                //   padding: "0",
+                                // }}
+                                // onlySingleSelectionAllow={true}
+                                // isNewRowStyle={true}
+                                loading: isLoading || isFetching || mutation.isLoading }, `branchSelection`), isError || data?.length === 0 ? (jsx(Button, { sx: {
+                                    backgroundColor: "var(--theme-color3)",
+                                    position: "absolute",
+                                    right: "113px",
+                                    bottom: "20px",
+                                    width: "7rem",
+                                    "&:hover": {
+                                        backgroundColor: "var(--theme-color3)",
+                                    },
+                                }, onClick: () => {
+                                    if (selectionMode === "C") {
+                                        navigate(dashboardUrl, {
+                                            replace: true,
+                                        });
+                                    }
+                                    else {
+                                        logoutFn();
+                                    }
+                                }, children: "Back" })) : null] }) })] }) }));
+};
+const BranchSelectionGridWrapper = (props) => {
+    return (jsx(ClearCacheProvider, { children: jsx(BranchSelectionGrid, { ...props }) }));
+};
+
+export { AuthControllerWrapper, BranchSelectionGridWrapper, ForgotPasswordControllerWrapper, ValidatePassword };
 //# sourceMappingURL=index.js.map