form-craft-package 1.10.12-dev.0 → 1.10.13-dev.1

package/.env.development

@@ -1,4 +1,5 @@
-VITE_API_BASE_URL=https://formcraftmaster-backend-dev-f8egf2fcfhhahuhr.centralus-01.azurewebsites.net
+# VITE_API_BASE_URL=https://formcraftmaster-backend-dev-f8egf2fcfhhahuhr.centralus-01.azurewebsites.net
+VITE_API_BASE_URL=http://localhost:5029
 VITE_LOG_LEVEL=debug
 VITE_COOKIE_DOMAIN=localhost
 VITE_ENV=development

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.10.12-dev.0",
+  "version": "1.10.13-dev.1",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/api/client.ts

@@ -10,7 +10,7 @@ import axios, {
   InternalAxiosRequestConfig,
 } from 'axios'
 
-import { PageViewTypEnum, LOCAL_STORAGE_KEYS_ENUM, SHARED_COOKIE_KEYS } from '../enums'
+import { PageViewTypEnum, LOCAL_STORAGE_KEYS_ENUM, SHARED_COOKIE_KEYS, SystemRolePermissionEnum } from '../enums'
 import { IDynamicForm } from '../types'
 import { constructDynamicFormHref, cookieHandler, fetchDynamicForms } from '../functions'
 import { CLIENT_ID, CLIENT_SECRET } from '../constants'
@@ -27,12 +27,17 @@ apiClient.interceptors.request.use((config) => {
   return config
 })
 
-const authResHandler = (resData: {
+type AuthResponseData = {
   access_token: string
   refresh_token: string
   companyKey: string
   expires_in: number
-}) => {
+  id?: string
+  roles?: string
+  email: string
+}
+
+const authResHandler = (resData: AuthResponseData) => {
   const expiry = new Date(Date.now() + resData.expires_in * 1000)
   Cookies.set(SHARED_COOKIE_KEYS.AccessToken, resData.access_token, {
     expires: expiry,
@@ -43,6 +48,17 @@ const authResHandler = (resData: {
     path: '/',
   })
   Cookies.set(SHARED_COOKIE_KEYS.CompanyKey, resData.companyKey, { expires: expiry, path: '/' })
+  Cookies.set(SHARED_COOKIE_KEYS.UserEmail, resData.email, { expires: expiry, path: '/' })
+
+  let permissionNames: string[] = resData.roles ? JSON.parse(resData.roles) ?? [] : []
+  permissionNames = Array.isArray(permissionNames) ? permissionNames.filter(Boolean) : []
+  const permissions = permissionNames
+    .map((name) => SystemRolePermissionEnum[name as keyof typeof SystemRolePermissionEnum])
+    .filter((permission): permission is SystemRolePermissionEnum => typeof permission === 'number')
+
+  if (permissions.length)
+    Cookies.set(SHARED_COOKIE_KEYS.UserPermissions, JSON.stringify(permissions), { expires: expiry, path: '/' })
+  else Cookies.remove(SHARED_COOKIE_KEYS.UserPermissions)
 }
 
 let isRefreshing = false
@@ -179,14 +195,40 @@ export const auth = async (
         Cookies.set(SHARED_COOKIE_KEYS.Authorized, 'true')
         forms = await fetchDynamicForms()
 
+        let userRoleIds: string[] = []
+        const userForm = forms.find((form) => form.isUser)
+        if (userForm?.id && loginAuthRes.data.id) {
+          try {
+            const userRolesRes = await apiClient.post(`/api/report/data/${userForm.id}`, {
+              joins: [],
+              match: JSON.stringify({ DeletedDate: null, 'Data.loginUser_id': loginAuthRes.data.id }),
+              project: JSON.stringify({ Data_roles: '$Data.loginUser_roles' }),
+              skip: 0,
+              limit: 1,
+            })
+            const fetchedRoles = userRolesRes?.data?.data?.[0]?.Data_roles
+            if (Array.isArray(fetchedRoles))
+              userRoleIds = fetchedRoles.filter((role): role is string => typeof role === 'string' && role.length > 0)
+          } catch {}
+        }
+
+        if (userRoleIds.length)
+          Cookies.set(SHARED_COOKIE_KEYS.UserRoleNames, JSON.stringify(userRoleIds), {
+            expires: new Date(Date.now() + loginAuthRes.data.expires_in * 1000),
+            path: '/',
+          })
+        else Cookies.remove(SHARED_COOKIE_KEYS.UserRoleNames)
+
         breadcrumbStore.reset()
         if (forms.length) {
           const firstForm = forms[0]
           const [splittedFormName] = firstForm.name.split(' ')
           breadcrumbStore.push({
             label: splittedFormName,
-            href: constructDynamicFormHref(firstForm.name),
+            href: constructDynamicFormHref(firstForm),
             type: PageViewTypEnum.List,
+            formId: firstForm.id,
+            formName: firstForm.name,
           })
         }
 
@@ -197,7 +239,7 @@ export const auth = async (
 
     return {
       authRes: loginAuthRes,
-      initialPath: forms.length > 0 ? constructDynamicFormHref(forms[0].name) : '/accounts',
+      initialPath: forms.length > 0 ? constructDynamicFormHref(forms[0]) : '/accounts',
     }
   } catch (error) {
     return { authRes: error, initialPath: '' }

package/src/api/user.ts

@@ -1,19 +1,19 @@
 import { SHARED_COOKIE_KEYS } from '../enums'
 import { cookieHandler } from '../functions/cookie-handler'
-import crypto from 'crypto-js'
-import { CLIENT_SECRET } from '../constants'
+// import crypto from 'crypto-js'
+// import { CLIENT_SECRET } from '../constants'
 
-const endSession = () => {
-  cookieHandler.empty()
-  localStorage.clear()
-  return
-}
-const decrypt = (toDecrypt: SHARED_COOKIE_KEYS) => {
-  const cookieValue = cookieHandler.get(toDecrypt)
-  if (!cookieValue) return ''
-  const bytes = crypto.AES.decrypt(cookieValue, CLIENT_SECRET)
-  return JSON.parse(bytes.toString(crypto.enc.Utf8))
-}
+// const endSession = () => {
+//   cookieHandler.empty()
+//   localStorage.clear()
+//   return
+// }
+// const decrypt = (toDecrypt: SHARED_COOKIE_KEYS) => {
+//   const cookieValue = cookieHandler.get(toDecrypt)
+//   if (!cookieValue) return ''
+//   const bytes = crypto.AES.decrypt(cookieValue, CLIENT_SECRET)
+//   return JSON.parse(bytes.toString(crypto.enc.Utf8))
+// }
 
 export const UserAuth = {
   hasRefreshToken: () => {
@@ -29,18 +29,7 @@ export const UserAuth = {
     return cookieHandler.get(SHARED_COOKIE_KEYS.CompanyKey)
   },
   getUserEmail: () => {
-    try {
-      return decrypt(SHARED_COOKIE_KEYS.UserEmail) ? decrypt(SHARED_COOKIE_KEYS.UserEmail) : ''
-    } catch {
-      endSession()
-    }
-  },
-  getUserFullName: () => {
-    try {
-      return decrypt(SHARED_COOKIE_KEYS.FullName) ? decrypt(SHARED_COOKIE_KEYS.FullName) : ''
-    } catch {
-      endSession()
-    }
+    return cookieHandler.get(SHARED_COOKIE_KEYS.UserEmail)
   },
   getUserId: () => {
     return cookieHandler.get(SHARED_COOKIE_KEYS.UserId)

package/src/components/auth-layouts/index.tsx

@@ -0,0 +1,439 @@
+import { FaAngleDown, FaAngleUp, FaCaretDown, FaKey, FaLock, FaTimes, FaUser } from 'react-icons/fa'
+import { HiMenu } from 'react-icons/hi'
+import { ICompanyConfig_Public, ILayoutTemplateProps } from '../../types/companies'
+import { Link } from 'react-router-dom'
+import { isEncodedURI } from '../../functions/forms'
+import { lazy, Suspense, useCallback, useMemo, useState, useSyncExternalStore } from 'react'
+import { Button, Drawer, Dropdown, Layout } from 'antd'
+import { UserAuth } from '../../api/user'
+import CompanyLogoSection from '../common/company-logo'
+import { MenuItemRenderer, useMenuRenderer } from './template-hooks'
+import { CountryEnum, LOCAL_STORAGE_KEYS_ENUM } from '../../enums'
+import { buildPasswordUiTranslationKey, cookieHandler } from '../../functions'
+import { REACT_QUERY_CLIENT } from '../../constants'
+import { translationStore } from '../common/custom-hooks/use-translation.hook/store'
+
+const { Header, Content, Sider } = Layout
+const ChangePasswordModal = lazy(() => import('../modals/change-password.modal'))
+
+export type TemplateName = 'template_1' | 'template_2' | 'template_3'
+
+export const TemplateLayout = ({
+  template,
+  children,
+  config,
+  isPreview = false,
+}: ILayoutTemplateProps & { template: TemplateName }) => {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const [changePasswordOpen, setChangePasswordOpen] = useState(false)
+  const userName = useMemo(() => UserAuth.getUserEmail() || '', [])
+  const { selectedLanguage } = useSyncExternalStore(
+    translationStore.subscribe.bind(translationStore),
+    translationStore.getSnapshot.bind(translationStore),
+  )
+  const siteConfigs = config?.siteLayout?.siteConfigs
+  const navigationWidth = siteConfigs?.custom?.navigationWidth || 200
+  const horizontalPadding = siteConfigs?.custom?.horizontalPadding || 20
+  const verticalPadding = siteConfigs?.custom?.verticalPadding || 20
+  const isCollapsed = navigationWidth < 200
+  const logoElement = useMemo(
+    () => <CompanyLogoSection logoUrl={config?.siteIdentity?.logoUrl} isPreview={isPreview} />,
+    [config?.siteIdentity?.logoUrl, isPreview],
+  )
+
+  const verticalMenuRenderer = useCallback<MenuItemRenderer>(
+    ({ form, meta, level, renderChildren, onNavigate }) => {
+      const active = isActive(window.location.pathname, meta.href)
+      return (
+        <div key={form.id}>
+          <Link
+            to={meta.href}
+            target={meta.target}
+            onClick={onNavigate}
+            style={{
+              width: `${navigationWidth - 25}px`,
+              borderRadius: `${siteConfigs?.Link.borderRadius}px`,
+              backgroundColor: active ? siteConfigs?.Link.colors.activeBackground : siteConfigs?.Link.colors.background,
+              color: active ? siteConfigs?.Link.colors.activeText : siteConfigs?.Link.colors.text,
+              paddingLeft: `${level * 16 + 20}px`,
+            }}
+            className={`fc-navigation-menu-item flex items-center gap-x-3 py-2 px-5 leading-4 transition-all duration-200 ${
+              active ? 'bg-opacity-25 text-opacity-25 font-semibold' : ''
+            }`}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = siteConfigs?.Link.colors.hoverBackground || ''
+              e.currentTarget.style.color = siteConfigs?.Link.colors.hoverText || ''
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = active
+                ? siteConfigs?.Link.colors.activeBackground || ''
+                : siteConfigs?.Link.colors.background || ''
+              e.currentTarget.style.color = active
+                ? siteConfigs?.Link.colors.activeText || ''
+                : siteConfigs?.Link.colors.text || ''
+            }}
+          >
+            <div className="w-6 h-6 flex items-center justify-center flex-shrink-0">
+              {meta.IconComponent ? (
+                <meta.IconComponent className="w-4 h-4" />
+              ) : (
+                <img alt="" src={form.icon ? (form.icon as string) : ''} className="w-4 h-4 object-contain" />
+              )}
+            </div>
+            <span className="flex-grow">{form.displayName || form.name}</span>
+            {meta.isParentMenu &&
+              (meta.isExpanded ? <FaAngleUp className="w-4 h-4" /> : <FaAngleDown className="w-4 h-4" />)}
+          </Link>
+          {form.children && !form.isReportGroup && meta.isExpanded && <div className="submenu">{renderChildren()}</div>}
+        </div>
+      )
+    },
+    [navigationWidth, siteConfigs],
+  )
+
+  const dropdownMenuRenderer = useCallback<MenuItemRenderer>(
+    ({ form, meta, level, renderChildren, onNavigate }) => {
+      const active = isActive(window.location.pathname, meta.href)
+      return (
+        <div key={form.id} className="relative group fc-navigation-menu-item">
+          <Link
+            to={meta.href}
+            target={meta.target}
+            onClick={onNavigate}
+            style={{
+              borderRadius: `${siteConfigs?.Link.borderRadius}px`,
+              backgroundColor: active ? siteConfigs?.Link.colors.activeBackground : siteConfigs?.Link.colors.background,
+              color: active ? siteConfigs?.Link.colors.activeText : siteConfigs?.Link.colors.text,
+              paddingLeft: `${level * 16 + 20}px`,
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = siteConfigs?.Link.colors.hoverBackground || ''
+              e.currentTarget.style.color = siteConfigs?.Link.colors.hoverText || ''
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = active
+                ? siteConfigs?.Link.colors.activeBackground || ''
+                : siteConfigs?.Link.colors.background || ''
+              e.currentTarget.style.color = active
+                ? siteConfigs?.Link.colors.activeText || ''
+                : siteConfigs?.Link.colors.text || ''
+            }}
+            className={`flex items-center gap-x-3 py-2 px-5 text-md leading-4 transition-all duration-200 bg-white text-primary hover:bg-opacity-25 hover:text-opacity-25 ${
+              active ? 'fc-navigation-menu-item-active font-semibold' : ''
+            }`}
+          >
+            {meta.IconComponent && (
+              <div className="w-6 h-6 flex items-center justify-center flex-shrink-0">
+                <meta.IconComponent className="w-4 h-4" />
+              </div>
+            )}
+            <span className="flex-grow">{form.displayName || form.name}</span>
+          </Link>
+          {meta.isParentMenu && (
+            <div className="absolute left-0 top-full hidden group-hover:flex flex-col bg-white shadow-md rounded-md z-50 min-w-[180px]">
+              {renderChildren()}
+            </div>
+          )}
+        </div>
+      )
+    },
+    [siteConfigs],
+  )
+
+  const compactMenuRenderer = useCallback<MenuItemRenderer>(
+    ({ form, meta, level, renderChildren, onNavigate }) => {
+      const active = isActive(window.location.pathname, meta.href)
+      return (
+        <div key={form.id} className="menu-item">
+          <Link
+            to={meta.href}
+            target={meta.target}
+            onClick={onNavigate}
+            style={{
+              width: `${navigationWidth - 25}px`,
+              borderRadius: `${siteConfigs?.Link.borderRadius}px`,
+              backgroundColor: active ? siteConfigs?.Link.colors.activeBackground : siteConfigs?.Link.colors.background,
+              color: active ? siteConfigs?.Link.colors.activeText : siteConfigs?.Link.colors.text,
+              paddingLeft: `${level * 16 + 20}px`,
+            }}
+            className={`fc-navigation-menu-item flex items-center gap-x-3 py-2 px-5 leading-4 transition-all duration-200 ${
+              active ? 'bg-opacity-25 text-opacity-25 font-semibold' : ''
+            }`}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = siteConfigs?.Link.colors.hoverBackground || ''
+              e.currentTarget.style.color = siteConfigs?.Link.colors.hoverText || ''
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = active
+                ? siteConfigs?.Link.colors.activeBackground || ''
+                : siteConfigs?.Link.colors.background || ''
+              e.currentTarget.style.color = active
+                ? siteConfigs?.Link.colors.activeText || ''
+                : siteConfigs?.Link.colors.text || ''
+            }}
+          >
+            <div className="w-6 h-6 flex items-center justify-center flex-shrink-0">
+              {meta.IconComponent ? (
+                <meta.IconComponent className="w-4 h-4" />
+              ) : (
+                <img alt="" src={form.icon ? (form.icon as string) : ''} className="w-4 h-4 object-contain" />
+              )}
+            </div>
+            <span className="flex-grow">{form.displayName || form.name}</span>
+            {meta.isParentMenu &&
+              (meta.isExpanded ? <FaAngleUp className="w-4 h-4" /> : <FaAngleDown className="w-4 h-4" />)}
+          </Link>
+          {form.children && !form.isReportGroup && meta.isExpanded && <div className="submenu">{renderChildren()}</div>}
+        </div>
+      )
+    },
+    [navigationWidth, siteConfigs],
+  )
+
+  const rendererMap = useMemo(
+    () => ({
+      template_1: { renderer: verticalMenuRenderer, options: { enableExpand: true } },
+      template_2: { renderer: dropdownMenuRenderer, options: { preventParentNavigation: true } },
+      template_3: { renderer: compactMenuRenderer, options: { enableExpand: true } },
+    }),
+    [verticalMenuRenderer, dropdownMenuRenderer, compactMenuRenderer],
+  )
+
+  const templateRender = rendererMap[template]
+  if (!templateRender) return
+
+  const { renderer, options } = templateRender
+  const renderMenuItem = useMenuRenderer(config as ICompanyConfig_Public | undefined, renderer, options)
+
+  const renderMenuList = useCallback(() => {
+    if (!config?.siteMenus?.length)
+      return (
+        <div className="text-warning text-center bg-warning bg-opacity-25 py-2 rounded-lg italic font-bold text-md">
+          No active form is available!
+        </div>
+      )
+    return config.siteMenus.map((form) => renderMenuItem(form))
+  }, [config?.siteMenus, renderMenuItem])
+
+  const drawerContentClass = template === 'template_3' ? 'flex flex-col' : 'flex flex-col overflow-y-auto'
+  const mobileDrawer = (
+    <Drawer
+      open={sidebarOpen}
+      onClose={() => setSidebarOpen(false)}
+      placement="left"
+      width="auto"
+      className="relative z-40 lg:hidden"
+      closeIcon={
+        <button type="button" onClick={() => setSidebarOpen(false)} className="absolute top-5 right-5">
+          <FaTimes aria-hidden="true" className="size-6 text-primary" />
+        </button>
+      }
+    >
+      <div className={drawerContentClass}>{renderMenuList()}</div>
+    </Drawer>
+  )
+
+  const mobileMenuButton = (
+    <button type="button" onClick={() => setSidebarOpen(true)} className="-m-2.5 p-2.5 text-gray-700 lg:hidden">
+      <span className="sr-only">Open sidebar</span>
+      <HiMenu aria-hidden="true" className="size-6" />
+    </button>
+  )
+
+  const renderProfileDropdown = (
+    trigger: Array<'hover' | 'click'>,
+    placement: 'top' | 'bottomRight',
+    collapsed?: boolean,
+    buttonClass?: string,
+  ) => (
+    <Dropdown
+      menu={{
+        items: [
+          ...(config?.changePasswordConfig?.isEnabled
+            ? [
+                {
+                  key: 'change_password',
+                  label:
+                    (selectedLanguage &&
+                      config?.translations?.[buildPasswordUiTranslationKey('MenuLabel')]?.[
+                        selectedLanguage as CountryEnum
+                      ]) ||
+                    'Change Password',
+                  icon: <FaLock />,
+                  onClick: () => setChangePasswordOpen(true),
+                },
+              ]
+            : []),
+          {
+            key: 'logout',
+            label: 'Log Out',
+            icon: <FaKey />,
+            onClick: async () => {
+              const persistDomain = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.PersistDomain) ?? ''
+              cookieHandler.empty()
+              REACT_QUERY_CLIENT.clear()
+              localStorage.clear()
+              localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.PersistDomain, persistDomain)
+              window.location.href = '/login'
+            },
+          },
+        ],
+      }}
+      trigger={trigger}
+      placement={placement}
+    >
+      <Button type="link" className={buttonClass}>
+        {collapsed ? (
+          <FaUser />
+        ) : (
+          <span className="ml-4 text-primary text-md font-semibold">
+            <span className="italic text-warning font-normal">{userName}</span>
+          </span>
+        )}
+        <FaCaretDown className="text-primary ml-1" />
+      </Button>
+    </Dropdown>
+  )
+
+  const layout = (() => {
+    if (template === 'template_1') {
+      if (isPreview)
+        return (
+          <div className="border rounded-md w-full">
+            <div className="flex items-center justify-between p-2 border-b">
+              <span>Logo</span>
+              <span>Profile menu</span>
+            </div>
+            <div className="flex flex-nowrap">
+              <div className="p-2 border-r">Menu</div>
+              <div className="p-2 bg-background w-full h-[150px]">Content</div>
+            </div>
+          </div>
+        )
+
+      return (
+        <Layout className="min-h-screen overflow-y-auto fc-layout">
+          <Header className="sticky top-0 z-40 flex items-center shadow-sm justify-between px-1 overflow-hidden fc-header">
+            <div className="flex fc-logo">
+              <a href="/">{logoElement}</a>
+              {mobileMenuButton}
+            </div>
+            <div>{renderProfileDropdown(['hover'], 'bottomRight')}</div>
+          </Header>
+          <Layout>
+            <Sider width={navigationWidth} className={`${isPreview ? 'flex' : 'hidden lg:flex'} fc-navigation-bar`}>
+              <div className="flex flex-col px-1 gap-2 py-2 fc-navigation-menu">{renderMenuList()}</div>
+            </Sider>
+            <Content style={{ padding: `${verticalPadding}px ${horizontalPadding}px` }} className="fc-content">
+              {children}
+            </Content>
+          </Layout>
+        </Layout>
+      )
+    }
+
+    if (template === 'template_2') {
+      if (isPreview)
+        return (
+          <div className="border rounded-md w-full">
+            <div className="flex items-center justify-between p-2 border-b">
+              <span>Logo</span>
+              <span>Menu</span>
+              <span>Profile menu</span>
+            </div>
+            <div className="p-2 bg-background w-full h-[150px]">Content</div>
+          </div>
+        )
+
+      return (
+        <Layout className="fc-layout min-h-screen">
+          <Header className="fc-header sticky top-0 z-40 flex items-center shadow-sm justify-between px-1 overflow-hidden">
+            <div className="flex">
+              <a href="/">{logoElement}</a>
+              {mobileMenuButton}
+            </div>
+            <div
+              className={`fc-navigation-menu justify-center items-center ${isPreview ? 'flex' : 'hidden lg:flex'} py-1`}
+            >
+              {renderMenuList()}
+            </div>
+            <div className="fc-profile-menu">{renderProfileDropdown(['hover'], 'bottomRight')}</div>
+          </Header>
+          <Content style={{ padding: `${verticalPadding}px ${horizontalPadding}px` }} className="fc-content">
+            {children}
+          </Content>
+        </Layout>
+      )
+    }
+
+    if (isPreview)
+      return (
+        <div className="border rounded-md w-full flex flex-row">
+          <div className="flex flex-col">
+            <div className="border-b p-2">Logo</div>
+            <div className="flex flex-col justify-between whitespace-nowrap p-2 h-[150px]">
+              <span>Menu</span>
+              <span>Profile menu</span>
+            </div>
+          </div>
+          <div className="p-2 bg-background w-full">Content</div>
+        </div>
+      )
+
+    return (
+      <Layout className="fc-layout min-h-screen">
+        <Sider
+          width={navigationWidth}
+          className={`${
+            isPreview ? 'flex' : 'hidden lg:flex'
+          } flex-col min-h-screen fixed top-0 left-0 fc-navigation-bar`}
+        >
+          <div className="flex flex-col p-2 h-full">
+            {!isCollapsed && (
+              <div className="flex justify-center p-2 fc-logo">
+                <a href="/" className="w-full flex justify-center">
+                  {logoElement}
+                </a>
+              </div>
+            )}
+            <div className="flex flex-col py-2 flex-grow fc-navigation-menu">{renderMenuList()}</div>
+          </div>
+          <div className="fc-profile-menu absolute bottom-2 left-0 w-full flex justify-center">
+            {renderProfileDropdown(['click'], 'top', isCollapsed)}
+          </div>
+        </Sider>
+        <Layout style={{ paddingLeft: `${navigationWidth}px` }}>
+          <Header className="fc-header lg:hidden sticky top-0 z-40 flex items-center gap-x-4 px-2 shadow-sm">
+            <div className="flex p-2 fc-logo">
+              <a href="/">{logoElement}</a>
+            </div>
+            {mobileMenuButton}
+            <div className="ml-auto flex items-center fc-profile-menu">
+              {renderProfileDropdown(['click'], 'bottomRight', isCollapsed, '-m-1.5 flex items-center p-1.5')}
+            </div>
+          </Header>
+          <Content style={{ padding: `${verticalPadding}px ${horizontalPadding}px` }} className="fc-content">
+            {children}
+          </Content>
+        </Layout>
+      </Layout>
+    )
+  })()
+
+  return (
+    <>
+      {changePasswordOpen && (
+        <Suspense fallback={null}>
+          <ChangePasswordModal closeModal={() => setChangePasswordOpen(false)} />
+        </Suspense>
+      )}
+      {mobileDrawer}
+      {layout}
+    </>
+  )
+}
+
+const isActive = (path: string, href: string) => {
+  if (isEncodedURI(path)) path = decodeURIComponent(path)
+  return path.startsWith(href)
+}