form-craft-package 1.8.1-dev.0 → 1.8.1-dev.2

package/package.json

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

package/src/api/client.ts

@@ -12,7 +12,7 @@ import axios, {
 
 import { PageViewTypEnum, LOCAL_STORAGE_KEYS_ENUM, SHARED_COOKIE_KEYS } from '../enums'
 import { IDynamicForm } from '../types'
-import { constructDynamicFormHref, fetchDynamicForms } from '../functions'
+import { constructDynamicFormHref, cookieHandler, fetchDynamicForms } from '../functions'
 import { CLIENT_ID, CLIENT_SECRET } from '../constants'
 import { breadcrumbStore } from '../components/common/custom-hooks/use-breadcrumb.hook'
 
@@ -120,7 +120,7 @@ apiClient.interceptors.response.use(
       .catch((refreshErr) => {
         processQueue(refreshErr, null)
         window.location.href = '/login'
-        return Promise.reject(refreshErr)
+        cookieHandler.empty()
       })
       .finally(() => {
         isRefreshing = false

package/src/components/common/currency-field.tsx

@@ -1,7 +1,7 @@
 import { InputNumber } from 'antd'
 import { useMemo, useRef } from 'react'
 import { CountryEnum } from '../../enums'
-import { INTERNATIONALIZATION_DATA } from '../../constants'
+import { ELEMENTS_DEFAULT_CLASS, INTERNATIONALIZATION_DATA } from '../../constants'
 
 export default function CurrencyField({
   country = CountryEnum.US,
@@ -61,7 +61,7 @@ export default function CurrencyField({
           : `${currencySymbol}${parseInt('0').toFixed(decimalPoint)}`
       }}
       parser={(value) => (value ? parseFloat(value.replace(/\p{Sc}\s?|(,*)/gu, '')) : 0)}
-      className="w-full right-align"
+      className={`${ELEMENTS_DEFAULT_CLASS.Currency} w-full right-align`}
     />
   )
 }

package/src/components/common/custom-hooks/use-node-condition.hook/use-disabled-elements.hook.ts

@@ -0,0 +1,64 @@
+import { useEffect, useCallback } from 'react'
+import useGetCurrentBreakpoint from '../use-window-width.hook'
+import { DeviceBreakpointEnum, FormElementConditionalKeyEnum } from '../../../../enums'
+import { disabledStore } from './visibility-store'
+import { isValidationsMet } from './visibility-utils'
+import {
+  IDndLayoutElement,
+  IDndLayoutRow,
+  IDndLayoutStructure_Responsive,
+  IFormLayoutElementConditions,
+} from '../../../../types'
+
+export function useSetDisabledElements(
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formValues?: { [key: string]: any },
+  formDataId?: string,
+): void {
+  const currentBreakpoint = useGetCurrentBreakpoint()
+  const layout: IDndLayoutRow[] =
+    layoutConfig?.layouts?.[currentBreakpoint] || layoutConfig?.layouts?.[DeviceBreakpointEnum.Default] || []
+
+  const elementsMap: Record<string, IDndLayoutElement> = layoutConfig?.elements || {}
+  const dataValues: { [key: string]: any } = formValues && typeof formValues === 'object' ? formValues : {}
+
+  const configsPerElement: Record<string, IFormLayoutElementConditions> = Object.values(elementsMap).reduce(
+    (acc, el) => {
+      const elConditions = el.conditions?.[FormElementConditionalKeyEnum.EnableIf]
+      if (elConditions && Array.isArray(elConditions) && elConditions.length > 0) acc[el.key] = el.conditions!
+
+      return acc
+    },
+    {} as Record<string, IFormLayoutElementConditions>,
+  )
+
+  const allInputsLoaded =
+    layout.length > 0 &&
+    Object.keys(elementsMap).length > 0 &&
+    Object.keys(configsPerElement).length > 0 &&
+    Object.values(dataValues).length > 0 &&
+    !!formDataId
+
+  const computeIndividuallyDisabled = useCallback((): Set<string> => {
+    if (!allInputsLoaded) return new Set()
+
+    const disabledSet = new Set<string>()
+    Object.values(elementsMap).forEach(({ key }) => {
+      const elementConfigs = configsPerElement[key]
+      const shouldEnable = isValidationsMet(FormElementConditionalKeyEnum.EnableIf, dataValues, elementConfigs, {
+        currentBreakpoint,
+        formDataId,
+      })
+
+      if (!shouldEnable) disabledSet.add(key)
+    })
+
+    return disabledSet
+  }, [elementsMap, dataValues, configsPerElement, currentBreakpoint, formDataId, allInputsLoaded])
+
+  const individuallyDisabled = computeIndividuallyDisabled()
+
+  useEffect(() => {
+    if (allInputsLoaded) disabledStore.setIds([...individuallyDisabled])
+  }, [allInputsLoaded, individuallyDisabled])
+}

package/src/components/common/custom-hooks/use-node-condition.hook/use-hidden-elements.hook.ts

@@ -0,0 +1,111 @@
+import { useEffect, useMemo, useCallback } from 'react'
+import useGetCurrentBreakpoint from '../use-window-width.hook'
+import { DeviceBreakpointEnum, FormElementConditionalKeyEnum } from '../../../../enums'
+import { hiddenStore } from './visibility-store'
+import { isValidationsMet } from './visibility-utils'
+import {
+  IDndLayoutCol,
+  IDndLayoutElement,
+  IDndLayoutRow,
+  IDndLayoutStructure_Responsive,
+  IFormLayoutElementConditions,
+} from '../../../../types'
+
+function computeHiddenIdsRecursive(layout: IDndLayoutRow[], individuallyHidden: Set<string>): string[] {
+  const hiddenCols = new Set<string>()
+  const hiddenRows = new Set<string>()
+  const rowHiddenCache = new Map<string, boolean>()
+
+  function isRowHidden(row: IDndLayoutRow): boolean {
+    if (rowHiddenCache.has(row.id)) return rowHiddenCache.get(row.id)!
+
+    const hiddenCols = row.children.map((col) => isColHidden(col as IDndLayoutCol))
+    const allColsHidden = hiddenCols.every((hidden) => hidden)
+
+    rowHiddenCache.set(row.id, allColsHidden)
+    return allColsHidden
+  }
+
+  function isColHidden(col: IDndLayoutCol): boolean {
+    const allChildrenHidden = col.children.every((child) => {
+      if (typeof child === 'string') return individuallyHidden.has(child)
+      else return isRowHidden(child)
+    })
+
+    if (allChildrenHidden) hiddenCols.add(col.id)
+
+    return allChildrenHidden
+  }
+
+  function traverseRows(rows: IDndLayoutRow[]) {
+    for (const row of rows) {
+      row.children.forEach((col) => {
+        col.children.forEach((child) => {
+          if (typeof child !== 'string') traverseRows([child])
+        })
+      })
+
+      if (isRowHidden(row)) hiddenRows.add(row.id)
+    }
+  }
+
+  traverseRows(layout)
+
+  return [...individuallyHidden, ...Array.from(hiddenCols), ...Array.from(hiddenRows)]
+}
+
+export function useSetHiddenNodes(
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formValues?: { [key: string]: any },
+  formDataId?: string,
+): void {
+  const currentBreakpoint = useGetCurrentBreakpoint() || DeviceBreakpointEnum.Default
+  const layout: IDndLayoutRow[] =
+    layoutConfig?.layouts?.[currentBreakpoint] || layoutConfig?.layouts?.[DeviceBreakpointEnum.Default] || []
+  const elementsMap: Record<string, IDndLayoutElement> = layoutConfig?.elements || {}
+  const dataValues: { [key: string]: any } = formValues && typeof formValues === 'object' ? formValues : {}
+  const configsPerElement: Record<string, IFormLayoutElementConditions> = Object.values(elementsMap).reduce(
+    (curr, el) => {
+      const elConditions = el.conditions?.[FormElementConditionalKeyEnum.ShowIf]
+
+      if (Array.isArray(elConditions) && elConditions.length > 0) return { ...curr, [el.key]: el.conditions }
+
+      return curr
+    },
+    {},
+  )
+
+  const allInputsLoaded =
+    layout.length > 0 &&
+    Object.keys(elementsMap).length > 0 &&
+    Object.keys(configsPerElement).length > 0 &&
+    !!formDataId
+
+  const computeIndividuallyHidden = useCallback((): Set<string> => {
+    if (!allInputsLoaded) return new Set()
+
+    const hiddenSet = new Set<string>()
+
+    Object.values(elementsMap).forEach(({ key }) => {
+      const elementConfigs = configsPerElement[key]
+
+      const shouldShow = isValidationsMet(FormElementConditionalKeyEnum.ShowIf, dataValues, elementConfigs, {
+        currentBreakpoint,
+        formDataId,
+      })
+      if (!shouldShow) hiddenSet.add(key)
+    })
+
+    return hiddenSet
+  }, [elementsMap, dataValues, configsPerElement, currentBreakpoint, formDataId, allInputsLoaded])
+
+  const allHiddenArray = useMemo(() => {
+    const individuallyHidden = computeIndividuallyHidden()
+
+    return computeHiddenIdsRecursive(layout, individuallyHidden)
+  }, [layout, computeIndividuallyHidden])
+
+  useEffect(() => {
+    if (allInputsLoaded) hiddenStore.setIds(allHiddenArray)
+  }, [allHiddenArray, allInputsLoaded])
+}

package/src/components/common/custom-hooks/use-node-condition.hook/use-node-condition.hook.ts

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from 'react'
+import { disabledStore, hiddenStore } from './visibility-store'
+
+export const useIsNodeHidden = (id: string): boolean =>
+  useSyncExternalStore(
+    (callback) => hiddenStore.subscribe(callback),
+    () => hiddenStore.getSnapshot().includes(id),
+    () => hiddenStore.getSnapshot().includes(id),
+  )
+
+export const checkIsNodeHidden = (id: string): boolean => hiddenStore.getSnapshot().includes(id)
+
+export const useIsNodeDisabled = (id: string): boolean =>
+  useSyncExternalStore(
+    (callback) => disabledStore.subscribe(callback),
+    () => disabledStore.getSnapshot().includes(id),
+    () => disabledStore.getSnapshot().includes(id),
+  )

package/src/components/common/custom-hooks/use-node-condition.hook/visibility-store.ts

@@ -0,0 +1,103 @@
+import { LOCAL_STORAGE_KEYS_ENUM } from '../../../../enums'
+
+type Subscriber = () => void
+
+/**
+ * Factory: create a LocalStorage-backed store for a list of string IDs.
+ * Internally holds:
+ *   • key: the localStorage key (enum value)
+ *   • ids: in-memory array of strings
+ *   • subscribers: a Set of callbacks to notify whenever ids changes
+ *
+ * Exposes methods:
+ *   - subscribe(callback): register for change notifications → returns unsubscribe()
+ *   - getSnapshot(): return current array of IDs (shallow copy)
+ *   - setIds(newIds): write new array to memory + localStorage + notify subscribers
+ */
+function createIdListStore(storageKey: LOCAL_STORAGE_KEYS_ENUM) {
+  // 1) Initialize in-memory array from localStorage (or empty array).
+  let ids: string[] = []
+  try {
+    const raw = localStorage.getItem(storageKey)
+    if (raw) {
+      const parsed = JSON.parse(raw)
+      if (Array.isArray(parsed)) {
+        ids = parsed
+      }
+    }
+  } catch {
+    ids = []
+  }
+
+  // 2) Keep track of subscribers (callbacks)
+  const subscribers = new Set<Subscriber>()
+
+  // 3) Storage-event listener (to pick up changes from other tabs/windows).
+  window.addEventListener('storage', (e) => {
+    if (e.key === storageKey) {
+      try {
+        const newArr = e.newValue ? JSON.parse(e.newValue) : []
+        if (Array.isArray(newArr)) {
+          ids = newArr
+          // Notify all subscribers that our in-memory copy changed
+          subscribers.forEach((cb) => cb())
+        }
+      } catch {
+        // ignore JSON errors
+      }
+    }
+  })
+
+  return {
+    /**
+     * Subscribe to changes. Callback is called whenever setIds or a storage-event modifies this store.
+     * Returns an unsubscribe function.
+     */
+    subscribe(callback: Subscriber): () => void {
+      subscribers.add(callback)
+      return () => {
+        subscribers.delete(callback)
+      }
+    },
+
+    /** Return a shallow copy of the current IDs array. */
+    getSnapshot(): string[] {
+      return [...ids]
+    },
+
+    /**
+     * Overwrite the list of IDs (in memory + localStorage), then notify subscribers.
+     * If the new array is identical (same length & same items in order), do nothing.
+     */
+    setIds(newIds: string[]) {
+      // Quick check: length mismatch → definitely changed
+      if (newIds.length !== ids.length) {
+        updateAndNotify(newIds)
+        return
+      }
+      // If same length, compare each item
+      for (let i = 0; i < newIds.length; i++) {
+        if (newIds[i] !== ids[i]) {
+          updateAndNotify(newIds)
+          return
+        }
+      }
+      // Otherwise, identical content → no update
+    },
+  }
+
+  /** Internal helper: write to memory + localStorage + notify subscribers */
+  function updateAndNotify(newIdsArr: string[]) {
+    ids = [...newIdsArr]
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(ids))
+    } catch {
+      // localStorage quota exceeded? we ignore for now.
+    }
+    subscribers.forEach((cb) => cb())
+  }
+}
+
+// Instantiate two separate stores:
+export const hiddenStore = createIdListStore(LOCAL_STORAGE_KEYS_ENUM.HiddenElements)
+export const disabledStore = createIdListStore(LOCAL_STORAGE_KEYS_ENUM.DisabledElements)

package/src/components/common/custom-hooks/use-node-condition.hook/visibility-utils.ts

@@ -0,0 +1,138 @@
+import { NEW_FORM_DATA_IDENTIFIER, REGEX_PATTERNS } from '../../../../constants'
+import { IFormContext } from '../../../form/layout-renderer/1-row'
+import { isNewFormDataPage } from '../../../../functions'
+import {
+  ConditionDependencyTypeEnum,
+  DeviceBreakpointEnum,
+  FieldValidationEnum,
+  FormElementConditionalKeyEnum,
+  FormStateEnum,
+} from '../../../../enums'
+import {
+  IConditionalValidation,
+  IConditionalValidation_AuthUser,
+  IConditionalValidation_Field,
+  IConditionalValidation_FormState,
+  IFormLayoutElementConditions,
+} from '../../../../types'
+
+const getValidationConfigs = (validationConfigs: IConditionalValidation[]) =>
+  validationConfigs.reduce<{
+    fieldValidations: IConditionalValidation_Field[]
+    authUserValidations: IConditionalValidation_AuthUser[]
+    hasDataIdValidation: IConditionalValidation_FormState | undefined
+    alwaysDisabled: boolean
+    hideScreens: DeviceBreakpointEnum[]
+  }>(
+    (curr, v) => {
+      if (v.dependentType === ConditionDependencyTypeEnum.Field)
+        return { ...curr, fieldValidations: [...curr.fieldValidations, v] }
+      else if (v.dependentType === ConditionDependencyTypeEnum.AuthUser)
+        return { ...curr, authUserValidations: [...curr.authUserValidations, v] }
+      else if (v.dependentType === ConditionDependencyTypeEnum.FormState) return { ...curr, hasDataIdValidation: v }
+      else if (v.dependentType === ConditionDependencyTypeEnum.AlwaysFalse) return { ...curr, alwaysDisabled: true }
+      else if (v.dependentType === ConditionDependencyTypeEnum.Screen) return { ...curr, hideScreens: v.hideScreens }
+
+      return curr
+    },
+    {
+      fieldValidations: [],
+      authUserValidations: [],
+      hasDataIdValidation: undefined,
+      alwaysDisabled: false,
+      hideScreens: [],
+    },
+  )
+
+/** If any of the validations fails, the function returns false */
+const validateConditions = (validations: IConditionalValidation_Field[], data: Record<string, any>): boolean => {
+  return validations.every((validation) => {
+    const { field, rule, value: configuredValue } = validation
+    const formValue = data[field]
+
+    switch (rule) {
+      case FieldValidationEnum.Required:
+        if (!!formValue) return true
+        return false
+
+      case FieldValidationEnum.DataLength:
+        return (
+          typeof formValue === 'string' && typeof configuredValue === 'number' && formValue.length === configuredValue
+        )
+
+      case FieldValidationEnum.MaxDataLength:
+        return (
+          typeof formValue === 'string' && typeof configuredValue === 'number' && formValue.length <= configuredValue
+        )
+
+      case FieldValidationEnum.MinDataLength:
+        return (
+          typeof formValue === 'string' && typeof configuredValue === 'number' && formValue.length >= configuredValue
+        )
+
+      case FieldValidationEnum.MinValue:
+        return typeof formValue === 'number' && typeof configuredValue === 'number' && formValue >= configuredValue
+
+      case FieldValidationEnum.MaxValue:
+        return typeof formValue === 'number' && typeof configuredValue === 'number' && formValue <= configuredValue
+
+      case FieldValidationEnum.Regex:
+        return (
+          typeof formValue === 'string' &&
+          typeof configuredValue === 'string' &&
+          new RegExp(configuredValue).test(formValue)
+        )
+
+      case FieldValidationEnum.Email:
+        return typeof formValue === 'string' && REGEX_PATTERNS.Email.test(formValue)
+
+      case FieldValidationEnum.StrictlyEquals:
+        if (!configuredValue) return !formValue || [null, undefined, ''].includes(formValue)
+        // equals no value
+
+        return formValue === configuredValue
+
+      default:
+        return false
+    }
+  })
+}
+
+export const isValidationsMet = (
+  type: FormElementConditionalKeyEnum,
+  dataValues: { [key: string]: any },
+  configs?: IFormLayoutElementConditions,
+  contextValues: { currentBreakpoint?: DeviceBreakpointEnum } & IFormContext = {},
+) => {
+  const validations = configs?.[type] ?? []
+
+  if (validations.length === 0) return true
+
+  const { fieldValidations, authUserValidations, hasDataIdValidation, alwaysDisabled, hideScreens } =
+    getValidationConfigs(validations)
+
+  if (alwaysDisabled) return false
+
+  // Dependent on other fields
+  const isFieldsConditionsMet =
+    dataValues && typeof dataValues === 'object' && fieldValidations.length > 0
+      ? validateConditions(fieldValidations as IConditionalValidation_Field[], dataValues)
+      : true
+
+  // Dependent on auth user
+  const isAuthUserConditionsMet = authUserValidations.length > 0 ? false : true
+
+  // Dependent on data id
+  const isDataIdConditionsMet = hasDataIdValidation
+    ? hasDataIdValidation.state === FormStateEnum.New
+      ? isNewFormDataPage(contextValues.formDataId)
+      : contextValues.formDataId !== NEW_FORM_DATA_IDENTIFIER
+    : true
+
+  // Dependent on screen
+  const isScreenConditionsMet = contextValues?.currentBreakpoint
+    ? !hideScreens.includes(contextValues.currentBreakpoint)
+    : true
+
+  return isFieldsConditionsMet && isAuthUserConditionsMet && isDataIdConditionsMet && isScreenConditionsMet
+}

package/src/components/common/custom-hooks/use-window-width.hook.ts

@@ -8,16 +8,19 @@ const useGetCurrentBreakpoint = (): DeviceBreakpointEnum => {
   )
 
   useEffect(() => {
-    const handleResize = () => setWidth(width)
+    const handleResize = () => {
+      const current = window.visualViewport?.width || window.innerWidth
+      setWidth(current)
+    }
 
     window.addEventListener('resize', handleResize)
     window.addEventListener('orientationchange', handleResize)
-    window.visualViewport?.addEventListener('resize', handleResize)
+    if (window.visualViewport) window.visualViewport.addEventListener('resize', handleResize)
 
     return () => {
       window.removeEventListener('resize', handleResize)
       window.removeEventListener('orientationchange', handleResize)
-      window.visualViewport?.removeEventListener('resize', handleResize)
+      if (window.visualViewport) window.visualViewport.removeEventListener('resize', handleResize)
     }
   }, [])
 

package/src/components/form/1-list/table-header.tsx

@@ -1,17 +1,21 @@
 import { Form } from 'antd'
-import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
 import { extractFiltersFromLayout } from '../../../functions/forms'
 import { DeviceBreakpointEnum, FilterConfigTypeEnum, FormPreservedItemKeys } from '../../../enums'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
+import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
+import { IDataListHeaderLayoutContext } from './table'
 import {
   BSON_DATA_IDENTIFIER_PREFIXES,
+  ELEMENTS_DEFAULT_CLASS,
   VALUE_REPLACEMENT_PLACEHOLDER,
   VALUE_REPLACEMENT_PLACEHOLDER2,
 } from '../../../constants'
-import { DynamicFormButtonRender } from '../layout-renderer/3-element/1-dynamic-button'
-import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
-import { IDataListHeaderLayoutContext } from './table'
+import {
+  DynamicFormButtonRender,
+  IDynamicButton_DisplayStateProps,
+} from '../layout-renderer/3-element/1-dynamic-button'
 import {
   IDndLayoutStructure_Responsive,
   IFilterConfig,
@@ -22,7 +26,7 @@ import {
 
 export default function FormDataListHeaderComponent({
   layoutConfig,
-  titleComponent,
+  dataCount,
   updateDynamicFilter,
   headerLayoutContext,
 }: IFormDataListHeaderComponent) {
@@ -107,17 +111,17 @@ export default function FormDataListHeaderComponent({
   )
 
   return (
-    <Form layout="vertical" form={filtersFormRef}>
+    <Form layout="vertical" form={filtersFormRef} className={ELEMENTS_DEFAULT_CLASS.DataListHeaderForm}>
       {dndLayout.map((row, rowIdx) => (
         <LayoutRendererRow
           key={rowIdx}
           rowData={row}
-          titleComponent={titleComponent}
+          dataCount={dataCount}
           formContext={formContext}
           elements={layoutConfig?.elements ?? {}}
-          renderButton={(btnProps, conditions) => (
+          renderButton={(btnProps) => (
             <DynamicFormButtonRender
-              displayStateProps={{ btnProps, conditions }}
+              displayStateProps={btnProps as IDynamicButton_DisplayStateProps}
               formContext={formContext}
               onCustomFunctionCall={onCustomFunctionCall}
             />
@@ -131,7 +135,7 @@ export default function FormDataListHeaderComponent({
 type IFormDataListHeaderComponent = {
   layoutConfig?: IDndLayoutStructure_Responsive
   updateDynamicFilter: (match?: string) => void
-  titleComponent?: ReactNode
+  dataCount?: 'pending' | number
   headerLayoutContext: IDataListHeaderLayoutContext
 }
 

package/src/components/form/1-list/table.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import FormDataListHeaderComponent from './table-header'
 import useDebounced from '../../common/custom-hooks/use-debounce.hook'
-import { Spin, Table } from 'antd'
+import { Empty, Table } from 'antd'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import { SorterResult } from 'antd/es/table/interface'
 import { constructDynamicFormHref, renderTableColumns, revertProjectionKey } from '../../../functions/forms'
@@ -13,6 +13,7 @@ import { IFormDataListConfig, IFormDataListData, IFormDataTableColumn } from '..
 import { processOptions } from '../../../functions/forms/get-data-list-option-value'
 import { IFormContext } from '../layout-renderer/1-row'
 import { useFindDynamiForm } from '../../common/custom-hooks'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../constants'
 
 export default function FormDataListTableComponent({
   layoutsConfigs,
@@ -88,7 +89,7 @@ export default function FormDataListTableComponent({
 
       setLoading(false)
     },
-    [headerLayoutContext, layoutsConfigs],
+    [headerLayoutContext],
   )
 
   useEffect(() => {
@@ -101,6 +102,7 @@ export default function FormDataListTableComponent({
   )
 
   // if (loading) return
+  console.log(loading, parentLoadings)
   if ((loading || parentLoadings.initial) && loadingBlock) return loadingBlock
 
   return (
@@ -111,16 +113,12 @@ export default function FormDataListTableComponent({
           setParentLoading(true)
           setFilterReqData((c) => ({ ...c, match, current: 1 }))
         }}
-        titleComponent={
-          <>
-            <span className="pr-1">{otherConfigs?.title}</span>
-            {otherConfigs?.showCount && <span>({parentLoadings.data ? <Spin size="small" /> : dataList.total})</span>}
-          </>
-        }
+        dataCount={otherConfigs?.showCount ? (parentLoadings.data ? 'pending' : dataList.total) : undefined}
         headerLayoutContext={headerLayoutContext}
       />
       {(!otherConfigs || otherConfigs.listType === FormDataListViewTypeEnum.Table) && (
         <Table<IFormDataListData>
+          className={ELEMENTS_DEFAULT_CLASS.DataTable}
           dataSource={dataList.data}
           columns={tableColumnsFiltered}
           rowKey={(record) => record._id}
@@ -145,6 +143,11 @@ export default function FormDataListTableComponent({
                 }
           }
           loading={parentLoadings.data}
+          locale={{
+            emptyText: (
+              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={otherConfigs?.noDataText || 'No Data'} />
+            ),
+          }}
           onChange={(cbPagination, _, sorter: SorterResult<IFormDataListData> | SorterResult<IFormDataListData>[]) => {
             console.log('ON TABLE CHANGE', cbPagination, sorter)
             setParentLoading(true)