form-craft-package 1.11.6 → 1.11.9-dev.0

package/package.json

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

package/src/api/client.ts

@@ -208,10 +208,10 @@ export const auth = async (
               limit: 1,
             })
           } catch {}
-          if (userRolesRes?.data?.totalRecords === 0 && !JSON.parse(loginAuthRes.data.roles).includes('Admin')) {
-            cookieHandler.empty()
-            throw { status: 400, response: { status: 400, data: 'User is not found!' } }
-          }
+          if (userRolesRes?.data?.totalRecords === 0 && !JSON.parse(loginAuthRes.data.roles).includes('Admin')) {
+            cookieHandler.empty()
+            throw { status: 400, response: { status: 400, data: 'User is not found!' } }
+          }
           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)

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

@@ -4,7 +4,7 @@ import { ICompanyConfig_Public, ILayoutTemplateProps } from '../../types/compani
 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 { Button, Drawer, Dropdown, Grid, Layout } from 'antd'
 import { UserAuth } from '../../api/user'
 import CompanyLogoSection from '../common/company-logo'
 import { MenuItemRenderer, useMenuRenderer } from './template-hooks'
@@ -35,7 +35,12 @@ export const TemplateLayout = ({
   const navigationWidth = siteConfigs?.custom?.navigationWidth || 200
   const horizontalPadding = siteConfigs?.custom?.horizontalPadding || 20
   const verticalPadding = siteConfigs?.custom?.verticalPadding || 20
+  const headerHeight = siteConfigs?.Layout?.headerHeight || 60
+  const menuPaddingInline = siteConfigs?.Link?.paddingInline ?? 20
+  const menuPaddingBlock = siteConfigs?.Link?.paddingBlock ?? 8
   const isCollapsed = navigationWidth < 200
+  const screens = Grid.useBreakpoint()
+  const isDesktop = !!screens.lg
   const logoElement = useMemo(
     () => <CompanyLogoSection logoUrl={config?.siteIdentity?.logoUrl} isPreview={isPreview} />,
     [config?.siteIdentity?.logoUrl, isPreview],
@@ -55,9 +60,12 @@ export const TemplateLayout = ({
               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`,
+              paddingTop: `${menuPaddingBlock}px`,
+              paddingRight: `${menuPaddingInline}px`,
+              paddingBottom: `${menuPaddingBlock}px`,
+              paddingLeft: `${level * 16 + menuPaddingInline}px`,
             }}
-            className={`fc-navigation-menu-item flex items-center gap-x-3 py-2 px-5 leading-4 transition-all duration-200 ${
+            className={`fc-navigation-menu-item flex items-center gap-x-3 leading-4 transition-all duration-200 ${
               active ? 'bg-opacity-25 text-opacity-25 font-semibold' : ''
             }`}
             onMouseEnter={(e) => {
@@ -88,14 +96,14 @@ export const TemplateLayout = ({
         </div>
       )
     },
-    [navigationWidth, siteConfigs],
+    [menuPaddingBlock, menuPaddingInline, 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">
+        <div key={form.id} className="group fc-navigation-menu-item">
           <Link
             to={meta.href}
             target={meta.target}
@@ -104,7 +112,10 @@ export const TemplateLayout = ({
               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`,
+              paddingTop: `${menuPaddingBlock}px`,
+              paddingRight: `${menuPaddingInline}px`,
+              paddingBottom: `${menuPaddingBlock}px`,
+              paddingLeft: `${level * 16 + menuPaddingInline}px`,
             }}
             onMouseEnter={(e) => {
               e.currentTarget.style.backgroundColor = siteConfigs?.Link.colors.hoverBackground || ''
@@ -118,7 +129,7 @@ export const TemplateLayout = ({
                 ? 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 ${
+            className={`flex items-center gap-x-3 text-md leading-4 transition-all duration-200 bg-white text-primary hover:bg-opacity-75 hover:text-opacity-25 ${
               active ? 'fc-navigation-menu-item-active font-semibold' : ''
             }`}
           >
@@ -127,7 +138,7 @@ export const TemplateLayout = ({
                 <meta.IconComponent className="w-4 h-4" />
               </div>
             )}
-            <span className="flex-grow">{form.displayName || form.name}</span>
+            <span>{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]">
@@ -137,7 +148,7 @@ export const TemplateLayout = ({
         </div>
       )
     },
-    [siteConfigs],
+    [menuPaddingBlock, menuPaddingInline, siteConfigs],
   )
 
   const compactMenuRenderer = useCallback<MenuItemRenderer>(
@@ -154,9 +165,12 @@ export const TemplateLayout = ({
               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`,
+              paddingTop: `${menuPaddingBlock}px`,
+              paddingRight: `${menuPaddingInline}px`,
+              paddingBottom: `${menuPaddingBlock}px`,
+              paddingLeft: `${level * 16 + menuPaddingInline}px`,
             }}
-            className={`fc-navigation-menu-item flex items-center gap-x-3 py-2 px-5 leading-4 transition-all duration-200 ${
+            className={`fc-navigation-menu-item flex items-center gap-x-3 leading-4 transition-all duration-200 ${
               active ? 'bg-opacity-25 text-opacity-25 font-semibold' : ''
             }`}
             onMouseEnter={(e) => {
@@ -187,7 +201,7 @@ export const TemplateLayout = ({
         </div>
       )
     },
-    [navigationWidth, siteConfigs],
+    [menuPaddingBlock, menuPaddingInline, navigationWidth, siteConfigs],
   )
 
   const rendererMap = useMemo(
@@ -233,12 +247,13 @@ export const TemplateLayout = ({
     </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 mobileMenuButton =
+    !isPreview && !isDesktop ? (
+      <button type="button" onClick={() => setSidebarOpen(true)} className="-m-2.5 block p-2.5 text-gray-700">
+        <span className="sr-only">Open sidebar</span>
+        <HiMenu aria-hidden="true" className="size-6" />
+      </button>
+    ) : null
 
   const renderProfileDropdown = (
     trigger: Array<'hover' | 'click'>,
@@ -324,7 +339,14 @@ export const TemplateLayout = ({
             <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">
+            <Content
+              style={{
+                padding: `${verticalPadding}px ${horizontalPadding}px`,
+                minHeight: `calc(100vh - ${headerHeight}px)`,
+                backgroundColor: siteConfigs?.Layout.colors.bodyBg,
+              }}
+              className="fc-content"
+            >
               {children}
             </Content>
           </Layout>
@@ -347,19 +369,29 @@ export const TemplateLayout = ({
 
       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">
+          <Header
+            className="fc-header sticky top-0 z-40 flex items-center shadow-sm justify-between px-1 overflow-visible"
+            style={{ height: headerHeight, lineHeight: 'normal' }}
+          >
             <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`}
+              className={`fc-navigation-menu justify-center items-center gap-3 px-3 ${isPreview ? 'flex' : 'hidden lg:flex'}`}
             >
               {renderMenuList()}
             </div>
             <div className="fc-profile-menu">{renderProfileDropdown(['hover'], 'bottomRight')}</div>
           </Header>
-          <Content style={{ padding: `${verticalPadding}px ${horizontalPadding}px` }} className="fc-content">
+          <Content
+            style={{
+              padding: `${verticalPadding}px ${horizontalPadding}px`,
+              minHeight: `calc(100vh - ${headerHeight}px)`,
+              backgroundColor: siteConfigs?.Layout.colors.bodyBg,
+            }}
+            className="fc-content"
+          >
             {children}
           </Content>
         </Layout>
@@ -402,7 +434,7 @@ export const TemplateLayout = ({
             {renderProfileDropdown(['click'], 'top', isCollapsed)}
           </div>
         </Sider>
-        <Layout style={{ paddingLeft: `${navigationWidth}px` }}>
+        <Layout style={{ paddingLeft: `${navigationWidth}px`, minHeight: '100vh', backgroundColor: siteConfigs?.Layout.colors.bodyBg }}>
           <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>
@@ -412,7 +444,14 @@ export const TemplateLayout = ({
               {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">
+          <Content
+            style={{
+              padding: `${verticalPadding}px ${horizontalPadding}px`,
+              minHeight: isDesktop ? '100vh' : `calc(100vh - ${headerHeight}px)`,
+              backgroundColor: siteConfigs?.Layout.colors.bodyBg,
+            }}
+            className="fc-content"
+          >
             {children}
           </Content>
         </Layout>

package/src/components/companies/2-unauthenticated/index.tsx

@@ -30,17 +30,17 @@ export function UnauthenticatedLayout() {
     </div>
   )
 
+  const loginBackground =
+    loginLayout?.backgroundType === 'color'
+      ? loginLayout?.background
+      : loginLayout?.backgroundType === 'image'
+      ? `url(${loginLayout?.backgroundImage}) center/cover no-repeat`
+      : loginLayout?.background || '#f0f0f0'
+
   const imageSection = (
     <div
-      style={{
-        background:
-          loginLayout?.backgroundType === 'color'
-            ? loginLayout?.background
-            : loginLayout?.backgroundType === 'image'
-            ? `url(${loginLayout?.backgroundImage}) center/cover no-repeat`
-            : '#f0f0f0',
-      }}
-      className="w-1/2 h-full flex items-center justify-center align-middle text-center text-gray-400 text-sm bg-gray-100"
+      style={{ background: loginBackground }}
+      className="w-1/2 h-full flex items-center justify-center align-middle text-center text-gray-400 text-sm"
     ></div>
   )
 
@@ -61,6 +61,8 @@ export function UnauthenticatedLayout() {
           minWidth: '400px',
           padding: `${loginLayout?.form?.padding || 16}px`,
           background: loginLayout?.form?.background,
+          borderRadius:
+            loginLayout?.formStyle === 'full' ? undefined : `${loginLayout?.form?.borderRadius ?? 12}px`,
         }}
         className={`fc-login-panel max-h-screen overflow-auto shadow content-center text-center space-y-4 ${
           loginLayout?.formStyle === 'full' ? 'h-screen' : ''
@@ -102,6 +104,7 @@ export function UnauthenticatedLayout() {
                   return (
                     <Form.Item
                       style={spacingStyle}
+                      labelCol={{ style: { paddingBottom: loginLayout?.form?.labelMarginBottom ?? 4 } }}
                       label={field.charAt(0).toUpperCase() + field.slice(1)}
                       name={field}
                       key={field}
@@ -114,6 +117,7 @@ export function UnauthenticatedLayout() {
                   return (
                     <Form.Item
                       style={spacingStyle}
+                      labelCol={{ style: { paddingBottom: loginLayout?.form?.labelMarginBottom ?? 4 } }}
                       label="Password"
                       name="password"
                       key="password"
@@ -167,10 +171,10 @@ export function UnauthenticatedLayout() {
   return (
     <Spin spinning={loading.login}>
       <div
-        className={`h-screen w-full flex overflow-hidden ${
+        className={`min-h-screen w-screen flex overflow-hidden ${
           loginLayout?.layout === 'center' ? 'flex-col items-center justify-center' : 'flex-row'
         }`}
-        style={{ background: loginLayout?.background || '#f0f0f0' }}
+        style={{ background: loginBackground, minHeight: '100vh' }}
       >
         {loginLayout?.layout === 'center' && formSection}
         {loginLayout?.layout === 'split-left' && (

package/src/components/companies/3-config-provider/index.tsx

@@ -19,39 +19,41 @@ export function ConfigProviderLayout({ children }: { children: ReactNode }): JSX
     location.pathname.startsWith('/login')
 
   return (
-    <ConfigContext.Provider value={{ config }}>
-      <ConfigProvider
-        theme={{
-          ...theme,
-          token: {
-            ...theme.token,
-            screenXSMin: 320,
-            screenXS: 375,
-            screenXSMax: 425,
-            screenSMMax: 768,
-            screenMDMax: 1024,
-            screenLGMin: 1025,
-            screenLG: 1100,
-            screenLGMax: 1200,
-            screenXLMax: 1440,
-          },
-        }}
-      >
-        {showSwitchCompany && (
-          <div className="absolute top-2 right-2 z-20">
-            <Button_FillerPortal
-              outline
-              onClick={() => {
-                localStorage.removeItem(LOCAL_STORAGE_KEYS_ENUM.Domain)
-                navigate(0)
-              }}
-            >
-              Switch Project
-            </Button_FillerPortal>
-          </div>
-        )}
-        {children}
-      </ConfigProvider>
-    </ConfigContext.Provider>
+    <div className="relative">
+      {showSwitchCompany && (
+        <div style={{ position: 'absolute', left: 10, top: 10, zIndex: 20, background: 'white', borderRadius: 8 }}>
+          <Button_FillerPortal
+            outline
+            onClick={() => {
+              localStorage.removeItem(LOCAL_STORAGE_KEYS_ENUM.Domain)
+              navigate(0)
+            }}
+          >
+            Switch Project
+          </Button_FillerPortal>
+        </div>
+      )}
+      <ConfigContext.Provider value={{ config }}>
+        <ConfigProvider
+          theme={{
+            ...theme,
+            token: {
+              ...theme.token,
+              screenXSMin: 320,
+              screenXS: 375,
+              screenXSMax: 425,
+              screenSMMax: 768,
+              screenMDMax: 1024,
+              screenLGMin: 1025,
+              screenLG: 1100,
+              screenLGMax: 1200,
+              screenXLMax: 1440,
+            },
+          }}
+        >
+          {children}
+        </ConfigProvider>
+      </ConfigContext.Provider>
+    </div>
   )
 }

package/src/components/form/layout-renderer/1-row/index.tsx

@@ -9,6 +9,7 @@ import { IDynamicButton_DisplayStateProps } from '../3-element/1-dynamic-button'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
 import { useHiddenIds } from '../../../common/custom-hooks/use-node-condition.hook/use-node-condition.hook'
 import { ICustomComponents } from '../3-element'
+import { useConfigContext } from '../../../companies/context'
 
 export const LayoutRendererRow = memo(
   ({
@@ -21,9 +22,26 @@ export const LayoutRendererRow = memo(
     renderButton,
   }: ILayoutRendererRow) => {
     const hiddenIds = useHiddenIds()
+    const { config } = useConfigContext()
+
+    const rowStyle = useMemo(
+      () =>
+        rowData.styleTemplateId
+          ? (config?.styleTemplates?.find((template) => template.id === rowData.styleTemplateId)?.style ?? rowData.style)
+          : rowData.style,
+      [config?.styleTemplates, rowData.style, rowData.styleTemplateId],
+    )
+    const headerStyle = useMemo(
+      () =>
+        rowData.props?.header?.styleTemplateId
+          ? (config?.styleTemplates?.find((template) => template.id === rowData.props?.header?.styleTemplateId)?.style ??
+            rowData.props?.header?.style)
+          : rowData.props?.header?.style,
+      [config?.styleTemplates, rowData.props?.header?.style, rowData.props?.header?.styleTemplateId],
+    )
 
     const gridStyle = useMemo(() => {
-      const baseStyle = { ...(rowData.style || {}), ...getGridContainerStyle(rowData.display) }
+      const baseStyle = { ...(rowStyle || {}), ...getGridContainerStyle(rowData.display) }
       let template = ''
 
       if (typeof baseStyle.gridTemplateColumns === 'string') {
@@ -41,7 +59,7 @@ export const LayoutRendererRow = memo(
       }
 
       return { ...baseStyle, gridTemplateColumns: template }
-    }, [rowData, hiddenIds])
+    }, [rowData, rowStyle, hiddenIds])
 
     return (
       <div
@@ -52,7 +70,7 @@ export const LayoutRendererRow = memo(
         <LayoutRowConditionalHeaderRenderer
           formId={formContext.formId}
           rowId={rowData.id}
-          header={rowData.props?.header}
+          header={rowData.props?.header ? { ...rowData.props.header, style: headerStyle } : undefined}
         >
           <LayoutRowRepeatableRenderer
             formId={formContext.formId}

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-send-notification.hook.ts

@@ -64,10 +64,16 @@ export const useSendNotificationAction = ({
       try {
         if (!formId || !resolvedFormDataId) return []
 
-        const templateReports = formTemplateReports[formId]
+        const templateReportsForForm = formTemplateReports?.[formId]
+        if (!templateReportsForForm || !Array.isArray(templateReportsForForm.templates)) {
+          console.warn(
+            `Notification attachment generation skipped: templateReportConfig is missing for form ${formId}.`,
+          )
+          return []
+        }
 
         const joinedFormData = await client
-          .post(`/api/report/${formId}/${resolvedFormDataId}`, { joins: templateReports.joins })
+          .post(`/api/report/${formId}/${resolvedFormDataId}`, { joins: templateReportsForForm.joins || [] })
           .then((res) => (res.status === 200 ? res.data : {}))
           .catch(() => ({}))
 
@@ -97,10 +103,15 @@ export const useSendNotificationAction = ({
         for (const attachment of attachments) {
           const resolvedBlobName = resolveAttachmentBlobName(attachment)
           if (!resolvedBlobName) continue
-          const selectedTemplateInfo = templateReports.templates.find(
+          const selectedTemplateInfo = templateReportsForForm.templates.find(
             (tR: IFormTemplateReport) => tR.fileBlobName === resolvedBlobName,
           )
-          if (!selectedTemplateInfo) continue
+          if (!selectedTemplateInfo) {
+            console.warn(
+              `Notification attachment generation skipped: template report "${resolvedBlobName}" was not found in form ${formId} templateReportConfig.`,
+            )
+            continue
+          }
 
           const generatedAttachment = await replaceTemplateReportAndUpload({
             templateInfo: selectedTemplateInfo,

package/src/components/form/layout-renderer/3-element/11-breadcrumb/index.tsx

@@ -1,132 +1,132 @@
-import { IBreadcrumb, useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
-import { Button_FillerPortal } from '../../../../common/button'
-import { useNavigate } from 'react-router-dom'
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
-import React, { memo, useMemo, useSyncExternalStore } from 'react'
-import { ELEMENTS_DEFAULT_CLASS } from '../../../../../constants'
-import { IElementBaseProps } from '../'
-import useGetCurrentBreakpoint from '../../../../common/custom-hooks/use-window-width.hook'
-import { Select } from 'antd'
-import { CountryEnum, DeviceBreakpointEnum, PageViewTypEnum } from '../../../../../enums'
-import { useConfigContext } from '../../../../companies/context'
-import { buildBreadcrumbTranslationKey } from '../../../../../functions'
-import { translationStore } from '../../../../common/custom-hooks/use-translation.hook/store'
-
-import './index.scss'
-
-function LayoutRenderer_Breadcrumb(_: { formId?: number } & IElementBaseProps) {
-  const currentBreakpoint = useGetCurrentBreakpoint()
-  const navigate = useNavigate()
-  const { breadcrumbs, sliceCrumbAt } = useBreadcrumb()
-  const { config } = useConfigContext()
-  const { selectedLanguage } = useSyncExternalStore(
-    translationStore.subscribe.bind(translationStore),
-    translationStore.getSnapshot.bind(translationStore),
-  )
-
-  const translations = config?.translations
-  const fallbackTexts = { Detail: 'detail', List: 'list', New: 'New' }
-  const getTranslation = useMemo(
-    () => (key: string) => (selectedLanguage ? translations?.[key]?.[selectedLanguage as CountryEnum] ?? '' : ''),
-    [selectedLanguage, translations],
-  )
-  const getFormName = useMemo(
-    () =>
-      (bc: IBreadcrumb, field: 'Detail' | 'List' | 'New') =>
-        bc.formId
-          ? getTranslation(buildBreadcrumbTranslationKey(bc.formId, field)) || bc.formName?.split(' ')?.[0] || bc.label
-          : bc.label,
-    [getTranslation],
-  )
-  const getBreadcrumbText = useMemo(
-    () =>
-      (field: 'Detail' | 'List' | 'New') => {
-        const defaultText = getTranslation(buildBreadcrumbTranslationKey('Default', field))
-        return defaultText || fallbackTexts[field]
-      },
-    [getTranslation],
-  )
-
-  const showAsSelect = useMemo(
-    () =>
-      ([DeviceBreakpointEnum.Mobile, DeviceBreakpointEnum.TabletPortrait].includes(currentBreakpoint) &&
-        breadcrumbs.length > 1) ||
-      breadcrumbs.length > 3,
-    [currentBreakpoint, breadcrumbs],
-  )
-
-  if (showAsSelect)
-    return (
-      <Select
-        suffixIcon={null}
-        value={breadcrumbs[breadcrumbs.length - 1].href}
-        optionFilterProp="label"
-        allowClear={false}
-        className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} responsive max-w-[250px]`}
-        onChange={(bc) => {
-          const decodedUri = decodeURIComponent(bc)
-          const bcIdx = breadcrumbs.findIndex((bc) => bc.href === decodedUri)
-
-          sliceCrumbAt(bcIdx)
-          navigate(decodedUri)
-        }}
-        options={breadcrumbs.map((bc) => ({
-          value: bc.href,
-          label: (
-            <div className="flex gap-2 items-center">
-              <FaChevronLeft className="text-primary" size={10} />
-              {renderText(bc, getFormName, getBreadcrumbText)}
-            </div>
-          ),
-        }))}
-      />
-    )
-
-  return (
-    <div className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} flex items-center text-12`}>
-      {breadcrumbs.map((bc, bcIdx) => (
-        <React.Fragment key={bcIdx}>
-          <Button_FillerPortal
-            link
-            disabled={breadcrumbs.length - 1 === bcIdx}
-            onClick={() => {
-              sliceCrumbAt(bcIdx)
-              navigate(bc.href)
-            }}
-          >
-            {renderText(bc, getFormName, getBreadcrumbText)}
-          </Button_FillerPortal>
-          {breadcrumbs.length - 1 !== bcIdx && <FaChevronRight className="text-primary" />}
-        </React.Fragment>
-      ))}
-    </div>
-  )
-}
-
-export default memo(LayoutRenderer_Breadcrumb)
-
-const renderText = (
-  bc: IBreadcrumb,
-  getFormName: (bc: IBreadcrumb, field: 'Detail' | 'List' | 'New') => string,
-  getBreadcrumbText: (field: 'Detail' | 'List' | 'New') => string,
-) => {
-  const label =
-    bc.type === PageViewTypEnum.Details
-      ? getFormName(bc, 'Detail')
-      : bc.type === PageViewTypEnum.List
-        ? getFormName(bc, 'List')
-        : bc.type === PageViewTypEnum.New
-          ? getFormName(bc, 'New')
-          : bc.label
-  const detailText = getBreadcrumbText('Detail')
-  const listText = getBreadcrumbText('List')
-  const newText = getBreadcrumbText('New')
-
-  return (
-    <span className="font-normal italic">
-      {bc.type === PageViewTypEnum.New ? `${newText} ` : ''}
-      {label}
-      {bc.type === PageViewTypEnum.Details ? ` ${detailText}` : bc.type === PageViewTypEnum.List ? ` ${listText}` : ''}
-    </span>
-  )
+import { IBreadcrumb, useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
+import { Button_FillerPortal } from '../../../../common/button'
+import { useNavigate } from 'react-router-dom'
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
+import React, { memo, useMemo, useSyncExternalStore } from 'react'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../../../constants'
+import { IElementBaseProps } from '../'
+import useGetCurrentBreakpoint from '../../../../common/custom-hooks/use-window-width.hook'
+import { Select } from 'antd'
+import { CountryEnum, DeviceBreakpointEnum, PageViewTypEnum } from '../../../../../enums'
+import { useConfigContext } from '../../../../companies/context'
+import { buildBreadcrumbTranslationKey } from '../../../../../functions'
+import { translationStore } from '../../../../common/custom-hooks/use-translation.hook/store'
+
+import './index.scss'
+
+function LayoutRenderer_Breadcrumb(_: { formId?: number } & IElementBaseProps) {
+  const currentBreakpoint = useGetCurrentBreakpoint()
+  const navigate = useNavigate()
+  const { breadcrumbs, sliceCrumbAt } = useBreadcrumb()
+  const { config } = useConfigContext()
+  const { selectedLanguage } = useSyncExternalStore(
+    translationStore.subscribe.bind(translationStore),
+    translationStore.getSnapshot.bind(translationStore),
+  )
+
+  const translations = config?.translations
+  const fallbackTexts = { Detail: 'detail', List: 'list', New: 'New' }
+  const getTranslation = useMemo(
+    () => (key: string) => (selectedLanguage ? translations?.[key]?.[selectedLanguage as CountryEnum] ?? '' : ''),
+    [selectedLanguage, translations],
+  )
+  const getFormName = useMemo(
+    () =>
+      (bc: IBreadcrumb, field: 'Detail' | 'List' | 'New') =>
+        bc.formId
+          ? getTranslation(buildBreadcrumbTranslationKey(bc.formId, field)) || bc.formName?.split(' ')?.[0] || bc.label
+          : bc.label,
+    [getTranslation],
+  )
+  const getBreadcrumbText = useMemo(
+    () =>
+      (field: 'Detail' | 'List' | 'New') => {
+        const defaultText = getTranslation(buildBreadcrumbTranslationKey('Default', field))
+        return defaultText || fallbackTexts[field]
+      },
+    [getTranslation],
+  )
+
+  const showAsSelect = useMemo(
+    () =>
+      ([DeviceBreakpointEnum.Mobile, DeviceBreakpointEnum.TabletPortrait].includes(currentBreakpoint) &&
+        breadcrumbs.length > 1) ||
+      breadcrumbs.length > 3,
+    [currentBreakpoint, breadcrumbs],
+  )
+
+  if (showAsSelect)
+    return (
+      <Select
+        suffixIcon={null}
+        value={breadcrumbs[breadcrumbs.length - 1].href}
+        optionFilterProp="label"
+        allowClear={false}
+        className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} responsive max-w-[250px]`}
+        onChange={(bc) => {
+          const decodedUri = decodeURIComponent(bc)
+          const bcIdx = breadcrumbs.findIndex((bc) => bc.href === decodedUri)
+
+          sliceCrumbAt(bcIdx)
+          navigate(decodedUri)
+        }}
+        options={breadcrumbs.map((bc) => ({
+          value: bc.href,
+          label: (
+            <div className="flex gap-2 items-center">
+              <FaChevronLeft className="text-primary" size={10} />
+              {renderText(bc, getFormName, getBreadcrumbText)}
+            </div>
+          ),
+        }))}
+      />
+    )
+
+  return (
+    <div className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} flex items-center text-12`}>
+      {breadcrumbs.map((bc, bcIdx) => (
+        <React.Fragment key={bcIdx}>
+          <Button_FillerPortal
+            link
+            disabled={breadcrumbs.length - 1 === bcIdx}
+            onClick={() => {
+              sliceCrumbAt(bcIdx)
+              navigate(bc.href)
+            }}
+          >
+            {renderText(bc, getFormName, getBreadcrumbText)}
+          </Button_FillerPortal>
+          {breadcrumbs.length - 1 !== bcIdx && <FaChevronRight className="text-primary" />}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}
+
+export default memo(LayoutRenderer_Breadcrumb)
+
+const renderText = (
+  bc: IBreadcrumb,
+  getFormName: (bc: IBreadcrumb, field: 'Detail' | 'List' | 'New') => string,
+  getBreadcrumbText: (field: 'Detail' | 'List' | 'New') => string,
+) => {
+  const label =
+    bc.type === PageViewTypEnum.Details
+      ? getFormName(bc, 'Detail')
+      : bc.type === PageViewTypEnum.List
+        ? getFormName(bc, 'List')
+        : bc.type === PageViewTypEnum.New
+          ? getFormName(bc, 'New')
+          : bc.label
+  const detailText = getBreadcrumbText('Detail')
+  const listText = getBreadcrumbText('List')
+  const newText = getBreadcrumbText('New')
+
+  return (
+    <span className="font-normal italic">
+      {bc.type === PageViewTypEnum.New ? `${newText} ` : ''}
+      {label}
+      {bc.type === PageViewTypEnum.Details ? ` ${detailText}` : bc.type === PageViewTypEnum.List ? ` ${listText}` : ''}
+    </span>
+  )
 }

package/src/components/form/layout-renderer/3-element/18-gallery/upload.modal.tsx

@@ -4,7 +4,7 @@ import { saveFile } from '../../../../../functions/forms/form'
 import { TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../../../enums'
 import { RcFile, UploadFile, UploadProps } from 'antd/es/upload'
 import { Form, Modal, Spin, Upload } from 'antd'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { FaUpload } from 'react-icons/fa6'
 import { Button_FillerPortal } from '../../../../common/button'
 import { useNotification, useTranslation } from '../../../../common/custom-hooks'
@@ -77,19 +77,19 @@ export default function GalleryUploadModal({
     [elementKey, label, placeholder, t],
   )
 
-  const uploadedBlobNames = useMemo(
+  const uploadedBlobNames = useMemo(
     () =>
       uploadedFiles
         .map((file) =>
           typeof file.response === 'object' && file.response ? (file.response as { blobName?: string }).blobName : '',
         )
         .filter((blobName): blobName is string => !!blobName),
-    [uploadedFiles],
-  )
-
-  useEffect(() => {
-    if (!isOpen) setUploadedFiles([])
-  }, [isOpen])
+    [uploadedFiles],
+  )
+
+  useEffect(() => {
+    if (!isOpen) setUploadedFiles([])
+  }, [isOpen])
 
   const uploadProps: UploadProps = {
     multiple: true,
@@ -112,14 +112,14 @@ export default function GalleryUploadModal({
     },
   }
 
-  const discardUploadedFiles = useCallback(async () => {
-    setIsDiscarding(true)
-    try {
-      await Promise.all(uploadedBlobNames.map((blobName) => client.delete(`/api/attachment/${blobName}`)))
-      setUploadedFiles([])
-      onDiscardSuccess()
-    } finally {
-      setIsDiscarding(false)
+  const discardUploadedFiles = useCallback(async () => {
+    setIsDiscarding(true)
+    try {
+      await Promise.all(uploadedBlobNames.map((blobName) => client.delete(`/api/attachment/${blobName}`)))
+      setUploadedFiles([])
+      onDiscardSuccess()
+    } finally {
+      setIsDiscarding(false)
     }
   }, [onDiscardSuccess, uploadedBlobNames])
 
@@ -140,19 +140,19 @@ export default function GalleryUploadModal({
         ...(Array.isArray(existingBlobNames) ? existingBlobNames : []),
         ...uploadedBlobNames,
       ]
-      const res = await client.put(`/api/formdata/${formId}/${formDataId}`, {
-        name: formDataRes.data.name,
-        version: formDataRes.data.version,
-        private: formDataRes.data.private,
-        data: JSON.stringify(parsedData),
-      })
-      if (res.status === 200) {
-        setUploadedFiles([])
-        onSaveSuccess(uploadedBlobNames)
-      }
-    } finally {
-      setIsSaving(false)
-    }
+      const res = await client.put(`/api/formdata/${formId}/${formDataId}`, {
+        name: formDataRes.data.name,
+        version: formDataRes.data.version,
+        private: formDataRes.data.private,
+        data: JSON.stringify(parsedData),
+      })
+      if (res.status === 200) {
+        setUploadedFiles([])
+        onSaveSuccess(uploadedBlobNames)
+      }
+    } finally {
+      setIsSaving(false)
+    }
   }, [formDataId, formId, formItem.path, onSaveSuccess, uploadedBlobNames])
 
   return (

package/src/components/form/layout-renderer/3-element/2-field-element.tsx

@@ -282,9 +282,9 @@ const fieldRenderers: Partial<Record<ElementTypeEnum, FieldRenderer>> = {
   [ElementTypeEnum.Radio]: ({ options = [], disabled, isMultiValue, isCustom }) =>
     isMultiValue ? (
       <Checkbox.Group disabled={disabled} className={ELEMENTS_DEFAULT_CLASS.CheckboxGroup}>
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-1 flex-wrap">
           {options.map((o, i) => (
-            <Checkbox key={i} value={o.value}>
+            <Checkbox key={i} value={o.value} className='whitespace-nowrap'>
               {o.label}
             </Checkbox>
           ))}

package/src/components/form/layout-renderer/3-element/index.tsx

@@ -139,6 +139,7 @@ function LayoutRendererElement({
 
   const { t, selectedLanguage } = useTranslation(formContext.formId)
   const { config } = useConfigContext()
+  const styleTemplates = config?.styleTemplates
   const { maxValue, minValue } = findMaxAndMinValues(validations, {
     fieldValues: (formContext.formRef?.getFieldsValue(true) ?? {}) as Record<string, any>,
     formDataId: formContext.formDataId,
@@ -146,6 +147,8 @@ function LayoutRendererElement({
   })
 
   const isElementDisabled = useIsNodeDisabled(key)
+  const resolveStyleTemplate = (styleTemplateId?: string) =>
+    styleTemplateId ? styleTemplates?.find((template) => template.id === styleTemplateId)?.style : undefined
 
   const validationsAfterIsHidden = useMemo(
     () => (isHidden && validations ? validations.filter((v) => v.rule !== FieldValidationEnum.Required) : validations),
@@ -320,7 +323,8 @@ function LayoutRendererElement({
     },
 
     [ElementTypeEnum.ReadFieldData]: () => {
-      let style = (elementData as IReadFieldDataElement).style?.[currentBreakpoint]
+      let style = resolveStyleTemplate((elementData as IReadFieldDataElement).styleTemplateId)
+      if (!style) style = (elementData as IReadFieldDataElement).style?.[currentBreakpoint]
       if (!style) style = (elementData as IReadFieldDataElement).style?.[DeviceBreakpointEnum.Default]
 
       return (
@@ -352,7 +356,8 @@ function LayoutRendererElement({
       ),
 
     [ElementTypeEnum.Text]: () => {
-      let style = (elementData as ITextElement).style?.[currentBreakpoint]
+      let style = resolveStyleTemplate((elementData as ITextElement).styleTemplateId)
+      if (!style) style = (elementData as ITextElement).style?.[currentBreakpoint]
       if (!style) style = (elementData as ITextElement).style?.[DeviceBreakpointEnum.Default]
 
       if (props.type === TextElementTypeEnum.Plain)

package/src/constants/index.ts

@@ -48,6 +48,9 @@ export const DEFAULT_SITE_CONFIG = {
     },
     Link: {
       borderRadius: 8,
+      paddingInline: 20,
+      paddingBlock: 8,
+      activeBorderRadius: 8,
       colors: {
         background: '#ffffff',
         text: '#000000',
@@ -55,6 +58,7 @@ export const DEFAULT_SITE_CONFIG = {
         hoverText: '#245780',
         activeBackground: '#245780',
         activeText: '#f5f5f5',
+        activeBorderColor: '#1b4566',
       },
     },
     Layout: {
@@ -95,12 +99,21 @@ export const DEFAULT_SITE_CONFIG = {
         bodySortBg: '#fafafa',
         colorBgContainer: '#ffffff',
         rowHoverBg: '#fafafa',
+        rowSelectedBg: '#e6f4ff',
+        rowSelectedHoverBg: '#d9efff',
+        rowExpandedBg: '#fafcff',
         borderColor: '#f0f0f0',
         headerSplitColor: '#f0f0f0',
         headerBg: '#C6D4E2AA',
         headerColor: '#245780',
         colorText: '#000000',
         headerSortActiveBg: '#f0f0f0',
+        headerSortHoverBg: '#f5f5f5',
+        footerBg: '#fafafa',
+        footerColor: '#000000',
+        fixedHeaderSortActiveBg: '#e6edf5',
+        filterDropdownMenuBg: '#ffffff',
+        stickyScrollBarBg: 'rgba(0, 0, 0, 0.25)',
       },
       headerBorderRadius: 8,
       cellPaddingInline: 16,
@@ -108,8 +121,9 @@ export const DEFAULT_SITE_CONFIG = {
       lineHeight: 1.57,
       lineWidth: 1,
       cellFontSize: 14,
-      padding: 16,
-      margin: 16,
+      stickyScrollBarBorderRadius: 100,
+      selectionColumnWidth: 32,
+      expandIconMarginTop: 16,
     },
     Form: {
       colors: {
@@ -117,6 +131,9 @@ export const DEFAULT_SITE_CONFIG = {
         labelRequiredMarkColor: '#ff4d4f',
       },
       labelFontSize: 14,
+      itemMarginBottom: 24,
+      verticalLabelPadding: '0 0 8px',
+      labelHeight: 32,
     },
   },
 }
@@ -145,6 +162,8 @@ export const DEFAULT_COMPANY_CONFIG = {
       width: 400,
       weight: 700,
       padding: 20,
+      borderRadius: 12,
+      labelMarginBottom: 4,
       spacing: 20,
       fields: ['email', 'password', 'forgot-password'],
     },

package/src/enums/index.ts

@@ -47,6 +47,14 @@ export enum TextElementTypeEnum {
   Plain = 'Plain',
   Rich = 'Rich',
 }
+export enum StyleTemplateTypeEnum {
+  ContainerStyle = 'ContainerStyle',
+  ContainerHeaderStyle = 'ContainerHeaderStyle',
+  TextStyle = 'TextStyle',
+  ReportTableStyle = 'ReportTableStyle',
+  ListStyle = 'ListStyle',
+  ImageStyle = 'ImageStyle',
+}
 export enum DndLayoutNodeEnum { // when saved, everything in the layout will have either of these node types
   Element = 'Element', // it's the actual display of the form (can be a field, a divider etc.)
   Row = 'Row',

package/src/functions/forms/index.ts

@@ -244,16 +244,25 @@ export const replaceAndGetFileBlob = async (
     companyKey?: string
     formId?: number
   },
-): Promise<string> => {
+): Promise<Blob | ''> => {
   if (!contextData?.companyKey) return ''
 
   try {
     const replacements = await Promise.all(
       tInfo.replacements.map(async (rep) => {
+        if (!rep.renderConfig) rep.renderConfig = { type: DataRenderTypeEnum.Default }
+
+        if (!rep.field) {
+          return {
+            placeholder: rep.placeholder,
+            value: '',
+            type: rep.type,
+          }
+        }
+
         const fieldPath: string[] = rep.field.split('.')
         let repValue = fieldPath.reduce((curr, n) => curr?.[n] ?? {}, formData)
 
-        if (!rep.renderConfig) rep.renderConfig = { type: DataRenderTypeEnum.Default }
 
         if (typeof repValue === 'object') {
           if (MongoDbExtendedJsonObjectKeys.Date in repValue) repValue = repValue[MongoDbExtendedJsonObjectKeys.Date]
@@ -371,8 +380,13 @@ export const replaceTemplateReportAndUpload = async ({
     const replacedFileBlob = await replaceAndGetFileBlob(templateInfo, formData, { companyKey, formId })
     if (!replacedFileBlob) return null
 
+    const resolvedFileName = fileNameHint ?? templateInfo.templateName
+    const normalizedFileName = resolvedFileName.toLowerCase().endsWith('.pdf')
+      ? resolvedFileName
+      : `${resolvedFileName.replace(/\.[^./\]]+$/, '')}.pdf`
+
     const uploadPayload = new FormData()
-    uploadPayload.append('file', replacedFileBlob)
+    uploadPayload.append('file', replacedFileBlob, normalizedFileName)
     const uploadUrl = isPublic ? `/api/attachment/create/${companyKey}` : '/api/attachment'
 
     const blobName = await client
@@ -382,11 +396,6 @@ export const replaceTemplateReportAndUpload = async ({
 
     if (!blobName) return null
 
-    const resolvedFileName = fileNameHint ?? templateInfo.templateName
-    const normalizedFileName = resolvedFileName.toLowerCase().endsWith('.pdf')
-      ? resolvedFileName
-      : `${resolvedFileName.replace(/\.[^./\]]+$/, '')}.pdf`
-
     return { blobName, fileName: normalizedFileName }
   } catch (err) {
     console.error('replaceTemplateReportAndUpload failed:', err)

package/src/types/companies/index.ts

@@ -1,6 +1,6 @@
 import { IconType } from 'react-icons'
-import { SystemEnvironmentEnum, SystemRolePermissionEnum } from '../../enums'
-import { IFormTranslations } from '../forms'
+import { StyleTemplateTypeEnum, SystemEnvironmentEnum, SystemRolePermissionEnum } from '../../enums'
+import { ICssStyle, IFormTranslations } from '../forms'
 
 export interface ICompanyViewModel {
   id: number
@@ -24,8 +24,15 @@ export interface ICompanyConfig_Public {
   systemRoles: ISystemRole[]
   changePasswordConfig?: ICompanyConfig_ChangePasswordConfig
   translations: ICompanyTranslations
+  styleTemplates?: IStyleTemplate[]
 }
 export type ICompanyTranslations = IFormTranslations
+export interface IStyleTemplate {
+  id: string
+  name: string
+  type: StyleTemplateTypeEnum
+  style: ICssStyle
+}
 export interface ISystemRole {
   id: string
   name: string
@@ -43,6 +50,8 @@ export interface ILoginLayout {
 export interface ILoginFormLayout {
   width: number
   padding: number
+  borderRadius?: number
+  labelMarginBottom?: number
   title: string
   background: string
   size: number
@@ -136,6 +145,9 @@ export interface ICompanyConfig_LayoutConfig {
 export interface ICompanyConfig_LinkConfig {
   colors: ICompanyConfig_SiteColors
   borderRadius: number
+  paddingInline?: number
+  paddingBlock?: number
+  activeBorderRadius?: number
 }
 export interface ICompanyConfig_CustomButtonColors {
   colorTextDisabled?: string
@@ -187,12 +199,16 @@ export interface ICompanyConfig_TableConfig {
   lineHeight?: number
   lineWidth?: number
   cellFontSize?: number
-  padding?: number
-  margin?: number
+  stickyScrollBarBorderRadius?: number
+  selectionColumnWidth?: number
+  expandIconMarginTop?: number
 }
 export interface ICompanyConfig_FormConfig {
   colors: ICompanyConfig_SiteColors
   labelFontSize?: number
+  itemMarginBottom?: number
+  verticalLabelPadding?: string
+  labelHeight?: number
 }
 export interface ICompanyConfig_SiteConfigs {
   fontFamily: string

package/src/types/forms/index.ts

@@ -101,6 +101,7 @@ export interface IFormDndLayoutRowHeader {
   isCollapsible?: boolean
   defaultCollapsed?: boolean
   style?: { [key: string]: string | number }
+  styleTemplateId?: string
 }
 export interface IRepeatingSectionConfig {
   name: string

package/src/types/forms/layout-elements/index.ts

@@ -226,6 +226,7 @@ export interface IPlaceholderElement extends BaseFormLayoutElement {
 export interface IReportTableElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.ReportTable
   style?: ICssStyle | ICssStylePerBreakpoint
+  styleTemplateId?: string
   props: IReportTableElementProps
 }
 
@@ -258,6 +259,7 @@ export interface IDividerElementProps {
 export interface IReadFieldDataElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.ReadFieldData
   style?: ICssStyle | ICssStylePerBreakpoint
+  styleTemplateId?: string
   props: IReadFieldDataElementProps
 }
 
@@ -273,6 +275,7 @@ export interface IButtonElement extends BaseFormLayoutElement {
 export interface ITextElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.Text
   style?: ICssStyle | ICssStylePerBreakpoint
+  styleTemplateId?: string
   props: ITextElementProps
 }
 export interface ITextElementProps {
@@ -328,6 +331,7 @@ export interface IColorPickerElement extends BaseFormLayoutElement {
 export interface IListElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.OrderedList | ElementTypeEnum.UnorderedList
   style?: ICssStyle
+  styleTemplateId?: string
   props: {
     pageBreak?: ReportPageBreakEnum
   }
@@ -338,6 +342,7 @@ export interface IListElement extends BaseFormLayoutElement {
 export interface IImageElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.Image
   style?: ICssStyle
+  styleTemplateId?: string
   props: {
     pageBreak?: ReportPageBreakEnum
     fit?: boolean

package/src/types/index.ts

@@ -58,6 +58,7 @@ export interface IDndLayoutRow {
   }
   display?: IGridContainerConfig
   style?: ICssStyle
+  styleTemplateId?: string
 }
 export interface IDndLayoutCol {
   nodeType: DndLayoutNodeEnum.Col