@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/layout/mainLayout/Layout.jsx

@@ -0,0 +1,445 @@
+import React, { Suspense, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import Navbar from '@/layout/mainLayout/header/Navbar';
+import SideBar from '@/layout/mainLayout/sidebar/SideBar';
+import { Outlet, useLocation } from 'react-router';
+import Grid from '@mui/material/Grid2';
+import { ButtonBase, IconButton } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import medplatLogo from '@/assets/img/medplat-highres.png';
+import bankverification from '@/assets/img/nhm-logo.png';
+import GovOfGujarat from '@/assets/img/govtofgujarat.png';
+import useAdaptiveZoom from './AdaptiveZoom';
+import { execute } from '@/common/services/GlobalApis';
+
+import SewaRural from '@/assets/img/sewa-rural.png';
+import Chatbot from '@/layout/mainLayout/Chatbot';
+import { CustomTooltip } from '@/views/custom-components/CustomTooltip';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGlobe, faUniversalAccess } from '@fortawesome/free-solid-svg-icons';
+import ChangePasswordModal from '@/views/feature-components/users/ChangePasswordModal';
+
+const getModifiedMenuItems = (menuJson) => {
+  let newMenuItems = [];
+  if (menuJson) {
+    Object.keys(menuJson).forEach((menu) => {
+      newMenuItems.push({
+        name: menu,
+        subGroups: menuJson[menu],
+      });
+    });
+  }
+  return newMenuItems;
+};
+
+const Layout = () => {
+  const { user } = useSelector((state) => state.Authenticate);
+  const menuList = getModifiedMenuItems(user?.features);
+  const [orientation, setOrientation] = useState(localStorage.getItem('sideBarOrientation') || 'vertical');
+  const [showSideBar, setShowSideBar] = useState(JSON.parse(localStorage.getItem('displaySideBar')) || true);
+  const [showForcePasswordChange, setShowForcePasswordChange] = useState(false);
+  const location = useLocation();
+  const [bhashiniEnabled, setBhashiniEnabled] = useState(false);
+  const [chatbotEnabled, setChatbotEnabled] = useState(false);
+
+  useEffect(() => {
+    if (user && !user?.firstTimePasswordChanged && location.pathname === '/ui/medplat/dashboard/webtasks') {
+      setShowForcePasswordChange(true);
+    }
+  }, [user, location.pathname]);
+
+  useEffect(() => {
+    if (orientation === 'horizontal') {
+      setShowSideBar(true);
+      localStorage.setItem('displaySideBar', JSON.stringify(true));
+    }
+  }, [orientation]);
+
+  useEffect(() => {
+    if (GeneralUtil.isTecho) {
+      const checkFlags = async () => {
+        try {
+          const dto = {
+            code: 'RETRIEVE_SYSTEM_CONFIGURATION_BY_KEYS',
+            parameters: {
+              keys: ['BHASHINI_TRANSLATION_ENABLE', 'CHATBOT_ENABLE'],
+            },
+          };
+          const res = await execute(dto);
+          const results = res?.data?.result || [];
+          const bhashiniConfig = results.find((item) => item.key === 'BHASHINI_TRANSLATION_ENABLE');
+          const chatbotConfig = results.find((item) => item.key === 'CHATBOT_ENABLE');
+          setBhashiniEnabled(bhashiniConfig?.value === 'true');
+          setChatbotEnabled(chatbotConfig?.value === 'true');
+        } catch (e) {
+          console.error('Failed to fetch system configurations:', e);
+          setBhashiniEnabled(false);
+          setChatbotEnabled(false);
+        }
+      };
+      checkFlags();
+    }
+  }, []);
+
+  const theme = useTheme();
+  const showFooter = GeneralUtil.isTecho || GeneralUtil.isEkavach || GeneralUtil.isSewaRural;
+  const showDrawerLauncher = orientation === 'vertical';
+  const toggleSidebarVisibility = () =>
+    setShowSideBar((cur) => {
+      const newState = !cur;
+      localStorage.setItem('displaySideBar', JSON.stringify(newState));
+      return newState;
+    });
+  const zoom = useAdaptiveZoom();
+
+  return (
+    <Grid
+      sx={{
+        height: '100vh',
+        overflow: 'hidden',
+        background:
+          theme.palette.mode === 'dark'
+            ? theme.palette.background.default
+            : 'linear-gradient(180deg, #edf4fb 0%, #f7fbff 38%, #eff5fb 100%)',
+      }}
+    >
+      <Navbar
+        user={user}
+        orientation={orientation}
+        showSideBar={showSideBar}
+        setShowSideBar={setShowSideBar}
+        setOrientation={setOrientation}
+      />
+      <Grid className="flex flex-1 overflow-hidden" sx={{ height: 'calc(100vh - 72px)' }}>
+        <SideBar
+          orientation={orientation}
+          subGroups={menuList}
+          sideBarOrientation={orientation}
+          isVisible={showSideBar}
+          onToggle={toggleSidebarVisibility}
+          datatestid="main-sidebar"
+          bhashiniEnabled={bhashiniEnabled}
+        />
+        {showSideBar && orientation === 'vertical' && (
+          <ButtonBase
+            onClick={toggleSidebarVisibility}
+            data-testid="layout-sidebar-collapse-toggle"
+            sx={{
+              position: 'fixed',
+              left: '96px',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              zIndex: 1150,
+              width: 15,
+              height: 72,
+              borderRadius: '0 12px 12px 0',
+              border: `1px solid ${theme.palette.custom?.shellBorder}`,
+              borderLeft: 'none',
+              background: theme.palette.custom?.sidebarBg,
+              color: theme.palette.custom?.sidebarIcon,
+              boxShadow:
+                theme.palette.mode === 'dark'
+                  ? '0 10px 20px rgba(2, 8, 23, 0.16)'
+                  : '0 10px 20px rgba(15, 23, 42, 0.12)',
+              backdropFilter: 'blur(14px)',
+              overflow: 'visible',
+              '&::after': {
+                content: '""',
+                position: 'absolute',
+                top: '50%',
+                right: '-5px',
+                transform: 'translateY(-50%)',
+                width: 10,
+                height: 28,
+                borderRadius: '0 10px 10px 0',
+                border: `1px solid ${theme.palette.custom?.shellBorder}`,
+                borderLeft: 'none',
+                background: theme.palette.custom?.sidebarBg,
+                transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+              },
+              '&::before': {
+                content: '""',
+                position: 'absolute',
+                inset: '-5px -8px',
+                borderRadius: '0 16px 16px 0',
+                background:
+                  theme.palette.mode === 'dark'
+                    ? 'radial-gradient(circle at 60% 50%, rgba(125, 211, 252, 0.14), transparent 68%)'
+                    : 'radial-gradient(circle at 60% 50%, rgba(77, 168, 218, 0.12), transparent 68%)',
+                opacity: 0,
+                transform: 'scale(0.96)',
+                transition: 'opacity 0.2s ease, transform 0.2s ease',
+                pointerEvents: 'none',
+              },
+              '&:hover': {
+                transform: 'translateY(-50%) translateX(1px)',
+                boxShadow:
+                  theme.palette.mode === 'dark'
+                    ? '0 14px 24px rgba(2, 8, 23, 0.18)'
+                    : '0 14px 24px rgba(15, 23, 42, 0.14)',
+              },
+              '&:hover::after': {
+                transform: 'translateY(-50%) translateX(1px)',
+              },
+              '&:hover::before': {
+                opacity: 1,
+                transform: 'scale(1)',
+              },
+              transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+            }}
+          />
+        )}
+        {showDrawerLauncher && (
+          <ButtonBase
+            onClick={toggleSidebarVisibility}
+            data-testid="layout-sidebar-toggle"
+            sx={{
+              position: 'fixed',
+              left: '0',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              zIndex: 1150,
+              width: 15,
+              height: 72,
+              borderRadius: '0 12px 12px 0',
+              border: `1px solid ${theme.palette.custom?.shellBorder}`,
+              borderLeft: 'none',
+              background: theme.palette.custom?.sidebarBg,
+              color: theme.palette.custom?.sidebarIcon,
+              boxShadow:
+                theme.palette.mode === 'dark'
+                  ? '0 10px 20px rgba(2, 8, 23, 0.16)'
+                  : '0 10px 20px rgba(15, 23, 42, 0.12)',
+              backdropFilter: 'blur(14px)',
+              overflow: 'visible',
+              '&::after': {
+                content: '""',
+                position: 'absolute',
+                top: '50%',
+                right: '-5px',
+                transform: 'translateY(-50%)',
+                width: 10,
+                height: 28,
+                borderRadius: '0 10px 10px 0',
+                border: `1px solid ${theme.palette.custom?.shellBorder}`,
+                borderLeft: 'none',
+                background: theme.palette.custom?.sidebarBg,
+                transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+              },
+              '&::before': {
+                content: '""',
+                position: 'absolute',
+                inset: '-5px -8px',
+                borderRadius: '0 16px 16px 0',
+                background:
+                  theme.palette.mode === 'dark'
+                    ? 'radial-gradient(circle at 60% 50%, rgba(125, 211, 252, 0.14), transparent 68%)'
+                    : 'radial-gradient(circle at 60% 50%, rgba(77, 168, 218, 0.12), transparent 68%)',
+                opacity: 0,
+                transform: 'scale(0.96)',
+                transition: 'opacity 0.2s ease, transform 0.2s ease',
+                pointerEvents: 'none',
+              },
+              '&:hover': {
+                transform: 'translateY(-50%) translateX(1px)',
+                boxShadow:
+                  theme.palette.mode === 'dark'
+                    ? '0 14px 24px rgba(2, 8, 23, 0.18)'
+                    : '0 14px 24px rgba(15, 23, 42, 0.14)',
+              },
+              '&:hover::after': {
+                transform: 'translateY(-50%) translateX(1px)',
+              },
+              '&:hover::before': {
+                opacity: 1,
+                transform: 'scale(1)',
+              },
+              transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+            }}
+          />
+        )}
+        <Grid
+          className={`${showFooter ? 'flex flex-col h-full w-full overflow-hidden' : 'flex-1'} transition-all duration-300 ease-in-out`}
+          sx={{
+            height: '100%',
+            marginTop: orientation === 'horizontal' && showSideBar ? { xs: '54px', md: '58px' } : 0,
+            paddingTop: orientation === 'horizontal' ? { xs: 0.5, md: 1 } : 0,
+            paddingBottom: showFooter ? 0 : { xs: 2, md: 3 },
+            paddingRight: 0,
+            paddingLeft:
+              orientation === 'vertical'
+                ? {
+                    xs: showSideBar ? '96px' : '0px',
+                    md: showSideBar ? '96px' : '0px',
+                  }
+                : 0,
+          }}
+        >
+          {!showFooter && (
+            <div
+              className="px-4 h-full overflow-y-auto"
+              style={{
+                zoom: zoom,
+              }}
+            >
+              <Suspense>
+                <Outlet />
+              </Suspense>
+            </div>
+          )}
+          {showFooter && (
+            <>
+              <div
+                className="px-4 flex-1 min-h-0 overflow-y-auto"
+                style={{
+                  zoom: zoom,
+                }}
+              >
+                <Suspense>
+                  <Outlet />
+                </Suspense>
+              </div>
+
+              <footer
+                className="text-gray-500 text-[10px] mt-auto"
+                style={{
+                  padding: '8px 18px 0px 18px',
+                  borderTop:
+                    theme.palette.mode === 'dark'
+                      ? '1px solid rgba(255, 255, 255, 0.08)'
+                      : '1px solid rgba(148, 163, 184, 0.18)',
+                  background: theme.palette.mode === 'dark' ? theme.palette.background.paper : 'rgba(255,255,255,0.9)',
+                }}
+              >
+                <div className="flex items-center justify-between px-1 py-1">
+                  {/* Left Side: 3 Images */}
+                  <div className="flex items-center gap-4">
+                    <ul className="flex items-center justify-between gap-3 list-none p-0 m-0">
+                      {!GeneralUtil.isSewaRural && (
+                        <li>
+                          <a href="https://gujhealth.gujarat.gov.in/" target="_blank" border="0" rel="noreferrer">
+                            <img src={GovOfGujarat} alt="Government of Gujarat" height="40" className="h-8 w-auto" />
+                          </a>
+                        </li>
+                      )}
+                      {!GeneralUtil.isSewaRural && (
+                        <li>
+                          <a href="http://nhm.gov.in" target="_blank" border="0" rel="noreferrer">
+                            <img
+                              src={bankverification}
+                              alt="National Health Mission"
+                              height="40"
+                              className="h-8 w-auto"
+                            />
+                          </a>
+                        </li>
+                      )}
+                      {
+                        <li>
+                          <a href="http://www.sewarural.org/" target="_blank" border="0" rel="noreferrer">
+                            <img src={SewaRural} alt="SEWA Rural" height="40" className="h-8 w-auto" />
+                          </a>
+                        </li>
+                      }
+                      {/* {GeneralUtil.isTecho && (
+                        <li className="ml-2 pl-2 border-l border-gray-300 dark:border-gray-700">
+                          <div className="flex items-center gap-2">
+                            <div className="h-8 w-16 bg-gray-200 dark:bg-gray-800 rounded flex items-center justify-center text-[7px] font-bold text-gray-400 border border-dashed border-gray-400">
+                              GIGW LOGO
+                            </div>
+                          </div>
+                        </li>
+                      )} */}
+                    </ul>
+                  </div>
+                  {GeneralUtil.isTecho && (
+                    <div className="flex flex-col items-center gap-1 flex-1">
+                      <div className="flex flex-col md:flex-row justify-center items-center gap-x-6 opacity-80 pt-1"></div>
+                      <p className="font-medium text-gray-600 dark:text-gray-400 m-0 leading-relaxed opacity-80">
+                        © 2026 Government of Gujarat. All rights reserved.
+                      </p>
+                    </div>
+                  )}
+                  {/* Right Side: 1 Image and Icons */}
+                  <div className="flex items-center gap-4">
+                    {GeneralUtil.isTecho && (
+                      <div className="flex items-center border-r border-gray-300 dark:border-gray-700 pr-3">
+                        <CustomTooltip
+                          title={
+                            <p className="m-0 leading-relaxed font-medium ">
+                              Best viewed in the latest versions of Google Chrome, Mozilla Firefox, and Microsoft Edge
+                              with a screen resolution of 1280 × 720 or higher.
+                            </p>
+                          }
+                        >
+                          <IconButton
+                            size="small"
+                            sx={{
+                              color: 'inherit',
+                              opacity: 0.7,
+                              p: 0.5,
+                              transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                              '&:hover': {
+                                opacity: 1,
+                                transform: 'scale(1.2) translateY(-2px)',
+                                color: theme.palette.primary.main,
+                                filter: 'drop-shadow(0 0 8px rgba(0,0,0,0.1))',
+                              },
+                            }}
+                          >
+                            <FontAwesomeIcon icon={faGlobe} style={{ fontSize: 20 }} />
+                          </IconButton>
+                        </CustomTooltip>
+                        <CustomTooltip
+                          title={
+                            <p className="m-0 leading-relaxed font-medium ">
+                              This website is designed in accordance with W3C Web Content Accessibility Guidelines
+                              (WCAG) 2.1.
+                            </p>
+                          }
+                        >
+                          <IconButton
+                            size="small"
+                            sx={{
+                              color: 'inherit',
+                              opacity: 0.7,
+                              p: 0.5,
+                              transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                              '&:hover': {
+                                opacity: 1,
+                                transform: 'scale(1.2) translateY(-2px)',
+                                color: theme.palette.secondary.main,
+                                filter: 'drop-shadow(0 0 8px rgba(0,0,0,0.1))',
+                              },
+                            }}
+                          >
+                            <FontAwesomeIcon icon={faUniversalAccess} style={{ fontSize: 20 }} />
+                          </IconButton>
+                        </CustomTooltip>
+                      </div>
+                    )}
+                    <a href=" http://www.argusoft.com/" target="_blank" border="0" rel="noreferrer">
+                      <img src={medplatLogo} alt="Argusoft Medplat" height="40" className="h-10 w-auto" />
+                    </a>
+                  </div>
+                </div>
+              </footer>
+            </>
+          )}
+        </Grid>
+      </Grid>
+      {GeneralUtil.isTecho && chatbotEnabled && <Chatbot />}
+      {showForcePasswordChange && (
+        <ChangePasswordModal
+          open={showForcePasswordChange}
+          onClose={() => setShowForcePasswordChange(false)}
+          userId={user?.id}
+          isFirstTime={!user?.firstTimePasswordChanged}
+        />
+      )}
+    </Grid>
+  );
+};
+
+export default Layout;