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

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

@@ -1,15 +1,8 @@
 import { useNavigate } from 'react-router-dom'
-import { useNotification } from '../../../../common/custom-hooks'
+import { useFindDynamiForm, useNotification } from '../../../../common/custom-hooks'
 import { useCheckElementConditions } from '../../../../common/custom-hooks/use-check-element-conditions.hook'
-import { memo, useCallback, useMemo, useState } from 'react'
-import {
-  ButtonActionCategoryEnum,
-  FormLoadingModalTypeEnum,
-  NavigateButtonCustomComponentType,
-  NavigateButtonTypesEnum,
-} from '../../../../../enums'
+import { memo, useCallback, useState } from 'react'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
-import { constructDynamicFormHref } from '../../../../../functions/forms'
 import { useDuplicateDataAction } from './use-duplicate-data.hook'
 import { useDeleteDataAction } from './use-delete-data.hook'
 import { usePublishDataAction } from './use-publish-data.hook'
@@ -21,34 +14,34 @@ import { NEW_FORM_DATA_IDENTIFIER } from '../../../../../constants'
 import { Button_FillerPortal } from '../../../../common/button'
 import { getButtonRenderProps } from '../../../../../functions/forms/get-element-props'
 import WarningIcon from '../../../../common/warning-icon'
+import FormDataLoadingIndicatorModal from '../../../../modals/form-data-loading.modal'
+import { IFormContext } from '../../1-row'
+import { ButtonActionCategoryEnum, FormLoadingModalTypeEnum } from '../../../../../enums'
+import { useButtonNavigateAction } from './use-button-navigate.hook'
+import { constructDynamicFormHref } from '../../../../../functions'
 import {
-  IButtonNavigateState,
   IButtonElementProps,
   IFormLayoutElementConditions,
   IButtonProps_Other,
   IButtonProps_Navigate,
 } from '../../../../../types'
-import FormDataLoadingIndicatorModal from '../../../../modals/form-data-loading.modal'
-import { IFormContext } from '../../1-row'
 
 export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   const { displayStateProps = {}, formContext = {}, onCustomFunctionCall = () => {} } = props
-  const {
-    btnProps,
-    conditions,
-    defaultDisabled = false,
-    stateToPass = {},
-  } = displayStateProps as IDynamicButton_DisplayStateProps
-  const { formDataId, formRef, formName = '' } = formContext as IFormContext
+  const { btnProps, conditions, defaultDisabled = false } = displayStateProps as IDynamicButton_DisplayStateProps
+  const { formDataId, formRef } = formContext as IFormContext
 
+  const { getFormById } = useFindDynamiForm()
   const navigate = useNavigate()
   const { success, warning, error, confirmModal } = useNotification()
   const { isElementDisabled, isElementHidden } = useCheckElementConditions({ formRef, conditions, defaultDisabled })
   const [loading, setLoading] = useState(false)
   const [dataLoadingType, setDataLoadingType] = useState<FormLoadingModalTypeEnum | undefined>()
-  const { inPreviewMode, isPublic = false } = useFormPreservedItemValues(formRef)
+  const { inPreviewMode, isPublic = false, submissionPdfConfig } = useFormPreservedItemValues(formRef)
 
-  const baseDynamicUrl = useMemo(() => constructDynamicFormHref(formName) ?? '', [formName])
+  const formInfo = btnProps.formId ? getFormById(btnProps.formId) : undefined
+  formContext.formId = btnProps.formId
+  formContext.formName = formInfo?.name
 
   const displayResultMessage = useCallback(
     (isSuccess: boolean = true) => {
@@ -58,24 +51,49 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
     [btnProps.messages, success, error],
   )
 
+  const onButtonNavigate = useButtonNavigateAction({
+    ...formContext,
+    onSuccess: () => {},
+    onError: () => {},
+    onFinal: () => {},
+  })
+
+  const handleSecondaryAction = useCallback(
+    (formDataId?: string) => {
+      if (!btnProps.secondaryAction) {
+        if (formInfo?.name) navigate(`${constructDynamicFormHref(formInfo.name)}/${formDataId}`, { replace: true })
+        setTimeout(() => {
+          setDataLoadingType(undefined)
+          displayResultMessage()
+        }, 500)
+        return
+      }
+
+      const { category } = btnProps.secondaryAction
+      if (category === ButtonActionCategoryEnum.Navigate) onButtonNavigate(btnProps.secondaryAction)
+      else if (category === ButtonActionCategoryEnum.CustomFunction) {
+        onCustomFunctionCall(btnProps.secondaryAction.functionName, btnProps.messages ?? defaultMessage)
+        setTimeout(() => setLoading(false), 500)
+      }
+    },
+    [btnProps, onButtonNavigate, formInfo],
+  )
+
   const onDuplicateData = useDuplicateDataAction({
     ...formContext,
-    onSuccess: () => displayResultMessage(),
+    onSuccess: () => handleSecondaryAction(),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
   const onDeleteData = useDeleteDataAction({
     ...formContext,
-    onSuccess: () => {
-      displayResultMessage(true)
-      navigate(baseDynamicUrl)
-    },
+    onSuccess: () => handleSecondaryAction(),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
   const onPublishData = usePublishDataAction({
     ...formContext,
-    onSuccess: () => displayResultMessage(),
+    onSuccess: () => handleSecondaryAction(),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
@@ -86,22 +104,14 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       setDataLoadingType(undefined)
       setLoading(false)
     },
-    onSuccess: () => {
-      setDataLoadingType(undefined)
-      displayResultMessage()
-    },
+    onSuccess: (formDataId?: string) => handleSecondaryAction(formDataId),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
   const onSaveExistingData = useSaveExistingDataAction({
     ...formContext,
     setDataLoadingType,
-    onSuccess: () => {
-      setTimeout(() => {
-        setDataLoadingType(undefined)
-        displayResultMessage()
-      }, 500)
-    },
+    onSuccess: () => handleSecondaryAction(),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
@@ -116,54 +126,14 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   const handleButtonClick = useCallback(async () => {
     switch (btnProps.category) {
       case ButtonActionCategoryEnum.Navigate:
-        switch (btnProps.navigateType) {
-          case NavigateButtonTypesEnum.NewDataPage:
-            navigate(`${baseDynamicUrl}/${NEW_FORM_DATA_IDENTIFIER}`, { state: stateToPass })
-            break
-
-          case NavigateButtonTypesEnum.ViewDataDetails:
-            if (formDataId) navigate(`${baseDynamicUrl}/${formDataId}`)
-            else error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
-            break
-
-          case NavigateButtonTypesEnum.ReturnToList:
-            navigate(baseDynamicUrl)
-            break
-
-          case NavigateButtonTypesEnum.Custom:
-            if (Array.isArray(btnProps.urlComponents)) {
-              const validComponents = btnProps.urlComponents.filter((c) => !!c.type && !!c.value)
-              const formData = formRef?.getFieldsValue() ?? {}
-
-              const finalUrl = validComponents
-                .map((c) => {
-                  if (c.type === NavigateButtonCustomComponentType.DynamicPath) {
-                    const data = formData[c.value] ?? ''
-                    return data.replaceAll(' ', '')
-                  }
-
-                  return c.value
-                })
-                .join('/')
-
-              window.open(finalUrl, '_blank')
-            }
-            break
-
-          case NavigateButtonTypesEnum.ReturnOneBack:
-          default:
-            navigate(-1)
-            break
-        }
-        // window.location.href = `${baseDynamicUrl}/${NEW_FORM_DATA_IDENTIFIER}`
-
+        onButtonNavigate(btnProps)
         setLoading(false)
         break
 
       case ButtonActionCategoryEnum.DuplicateData:
         if (formDataId) await onDuplicateData()
         else {
-          error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+          error({ message: BUTTON_CUSTOM_ERROR_MESSAGES.DataIdNotFound })
           setLoading(false)
         }
         break
@@ -171,7 +141,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       case ButtonActionCategoryEnum.DeleteData:
         if (formDataId) await onDeleteData()
         else {
-          error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+          error({ message: BUTTON_CUSTOM_ERROR_MESSAGES.DataIdNotFound })
           setLoading(false)
         }
         break
@@ -179,7 +149,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       case ButtonActionCategoryEnum.PublishDataChanges:
         if (formDataId) await onPublishData()
         else {
-          error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+          error({ message: BUTTON_CUSTOM_ERROR_MESSAGES.DataIdNotFound })
           setLoading(false)
         }
         break
@@ -188,7 +158,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         await onSaveSignature()
 
         if (formDataId === NEW_FORM_DATA_IDENTIFIER) {
-          if (isPublic) onGeneratePdfProof()
+          if (isPublic && submissionPdfConfig) onGeneratePdfProof()
           else onCreateNewData()
         } else onSaveExistingData()
 
@@ -224,9 +194,9 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
     }
   }, [
     btnProps,
-    baseDynamicUrl,
     formDataId,
     isPublic,
+    submissionPdfConfig,
     onCustomFunctionCall,
     onDuplicateData,
     onDeleteData,
@@ -235,6 +205,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
     onGeneratePdfProof,
     onSaveExistingData,
     onGenerateReport,
+    onButtonNavigate,
     setDataLoadingType,
   ])
 
@@ -252,7 +223,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
           if (
             isPublic &&
             formDataId === NEW_FORM_DATA_IDENTIFIER &&
-            btnProps.category !== ButtonActionCategoryEnum.SaveDataChanges
+            [ButtonActionCategoryEnum.SaveDataChanges, ButtonActionCategoryEnum.Navigate].includes(btnProps.category)
           )
             return
           setLoading(true)
@@ -271,9 +242,9 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         {isPublic &&
           formDataId === NEW_FORM_DATA_IDENTIFIER &&
           btnProps.category !== ButtonActionCategoryEnum.SaveDataChanges && (
-            <WarningIcon tooltip={CUSTOM_ERROR_MESSAGES.UnavailableForPublic} />
+            <WarningIcon tooltip={BUTTON_CUSTOM_ERROR_MESSAGES.UnavailableForPublic} />
           )}
-        {inPreviewMode && <WarningIcon tooltip={CUSTOM_ERROR_MESSAGES.InPreviewMode} />}
+        {inPreviewMode && <WarningIcon tooltip={BUTTON_CUSTOM_ERROR_MESSAGES.InPreviewMode} />}
         {btnProps.label}
       </Button_FillerPortal>
       {!!dataLoadingType && (
@@ -296,7 +267,6 @@ interface IDynamicButton_DisplayStateProps {
   btnProps: IButtonElementProps
   conditions?: IFormLayoutElementConditions
   defaultDisabled?: boolean
-  stateToPass?: IButtonNavigateState
 }
 
 export interface ICustomFunctionCall {
@@ -309,14 +279,14 @@ export interface ICustomFunctionCall {
   ) => void
 }
 export interface IOnSuccessFunctions {
-  onSuccess: () => void
+  onSuccess: (formDataId?: string) => void
   onError: () => void
   onFinal: () => void
 }
 
 const defaultMessage = { success: 'Successfully completed!', error: 'Error occured' }
 
-const CUSTOM_ERROR_MESSAGES = {
+export const BUTTON_CUSTOM_ERROR_MESSAGES = {
   DataIdNotFound: 'Data id was not found!',
   FormInstanceNotFound: 'Form ref was not found!',
   UnavailableForPublic: 'Button action is NOT allowed for public use!',

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-button-navigate.hook.tsx

@@ -0,0 +1,88 @@
+import { useCallback } from 'react'
+import { IButtonProps_Navigate } from '../../../../../types'
+import { useFindDynamiForm, useNotification } from '../../../../common/custom-hooks'
+import { constructDynamicFormHref } from '../../../../../functions/forms'
+import { NavigateButtonCustomComponentType, NavigateButtonTypesEnum } from '../../../../../enums'
+import { IFormContext } from '../../1-row'
+import { BUTTON_CUSTOM_ERROR_MESSAGES, IOnSuccessFunctions } from '.'
+import { useNavigate } from 'react-router-dom'
+import { NEW_FORM_DATA_IDENTIFIER } from '../../../../../constants'
+import { useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
+
+/* --------------------------------------------------------------------------
+  Navigation button action handler
+-------------------------------------------------------------------------- */
+export const useButtonNavigateAction = ({
+  onSuccess,
+  onError,
+  onFinal,
+  ...formContext
+}: IOnSuccessFunctions & IFormContext) => {
+  const { formRef, formDataId, parentFormJoins, manyToManyRelInfo } = formContext
+  const { getFormById } = useFindDynamiForm()
+  const { error } = useNotification()
+  const { updateCrumb } = useBreadcrumb()
+  const navigate = useNavigate()
+
+  const onButtonNavigate = useCallback(
+    async (btnProps: IButtonProps_Navigate) => {
+      const formInfo = btnProps.formId ? getFormById(btnProps.formId) : undefined
+      const baseDynamicUrl = formInfo ? constructDynamicFormHref(formInfo.name) : ''
+
+      switch (btnProps.navigateType) {
+        case NavigateButtonTypesEnum.NewDataPage:
+          let newDatapageNavigateUrl = `${baseDynamicUrl}/${NEW_FORM_DATA_IDENTIFIER}`
+          if (manyToManyRelInfo && parentFormJoins && formDataId) {
+            const middleFormInfo = getFormById(manyToManyRelInfo.middleFormId)
+
+            if (middleFormInfo)
+              newDatapageNavigateUrl = `${constructDynamicFormHref(middleFormInfo.name)}/${NEW_FORM_DATA_IDENTIFIER}`
+          }
+          if (formDataId !== NEW_FORM_DATA_IDENTIFIER)
+            updateCrumb(location.pathname, { formJoins: parentFormJoins, formDataId, manyToManyRelInfo })
+
+          navigate(newDatapageNavigateUrl)
+          break
+
+        case NavigateButtonTypesEnum.ViewDataDetails:
+          if (formDataId) navigate(`${baseDynamicUrl}/${formDataId}`)
+          else error({ message: BUTTON_CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+          break
+
+        case NavigateButtonTypesEnum.GoToDataList:
+          navigate(baseDynamicUrl)
+          break
+
+        case NavigateButtonTypesEnum.Custom:
+          if (btnProps.customUrl) {
+            navigate(btnProps.customUrl)
+          } else if (Array.isArray(btnProps.urlComponents)) {
+            const validComponents = btnProps.urlComponents.filter((c) => !!c.type && !!c.value)
+            const formData = formRef?.getFieldsValue() ?? {}
+
+            const finalUrl = validComponents
+              .map((c) => {
+                if (c.type === NavigateButtonCustomComponentType.DynamicPath) {
+                  const data = formData[c.value] ?? ''
+                  return data.replaceAll(' ', '')
+                }
+
+                return c.value
+              })
+              .join('/')
+
+            window.open(finalUrl, '_blank')
+          }
+          break
+
+        case NavigateButtonTypesEnum.GoBack:
+        default:
+          navigate(-1 * (btnProps.navigateBackCount ?? 1))
+          break
+      }
+    },
+    [parentFormJoins, manyToManyRelInfo, formRef],
+  )
+
+  return onButtonNavigate
+}

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

@@ -1,13 +1,14 @@
 import { useCallback } from 'react'
 import { FormLoadingModalTypeEnum } from '../../../../../enums'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
-import { stringifyJSON } from '../../../../../functions/forms/json-handlers'
+import { toMongoDbExtendedJSON } from '../../../../../functions/forms/extended-json-handlers'
 import client from '../../../../../api/client'
-import { constructDynamicFormHref, objectToQueryParams } from '../../../../../functions/forms'
+import { objectToQueryParams } from '../../../../../functions/forms'
 import { useNotification } from '../../../../common/custom-hooks'
 import { useNavigate } from 'react-router-dom'
 import { IFormContext } from '../../1-row'
 import { IOnSuccessFunctions } from '.'
+import { useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
 
 /* --------------------------------------------------------------------------
   - Creates new form data.
@@ -28,43 +29,40 @@ export const useCreateDataWithPdfActions = ({
   const { formRef, formKey, formId, formName, companyKey } = formContext
 
   const navigate = useNavigate()
-  // const { isModalOpen: isSuccessModalOpen, isPendingTransition: isSuccessModalPending, openModal: openSuccessModal, closeModal: closeSuccessModal } = useLazyModalOpener()
   const { errorModal, confirmModal } = useNotification()
   const { baseServerUrl, submissionPdfConfig, isPublic } = useFormPreservedItemValues(formRef)
+  const { breadcrumbs } = useBreadcrumb()
 
   const onCreateNewData = useCallback(
     (generatedPdfBlobName?: string) => {
       try {
         formRef?.validateFields().then(async (values) => {
           setDataLoadingType(FormLoadingModalTypeEnum.SavingChanges)
-
           const reqData = {
             name: '', // TODO: maybe later, make it dynamic
-            data: stringifyJSON({ ...values, generatedPdfBlobName }),
+            data: JSON.stringify(toMongoDbExtendedJSON({ ...values, generatedPdfBlobName })),
             ...(isPublic ? { private: false } : { version: 1 }),
           }
 
           const endpoint = isPublic ? `/api/site/${formKey}` : `/api/formdata/${formId}`
           const res = await client.post(endpoint, reqData)
 
-          if (res.status === 200)
-            setTimeout(() => {
-              onCreateSuccess()
-              if (!isPublic && formName) navigate(`${constructDynamicFormHref(formName)}/${res.data}`)
-              else if (submissionPdfConfig?.showDownloadModal) {
-                confirmModal({
-                  title: submissionPdfConfig.successTitle ?? 'Successfully generated the PDF!',
-                  content: submissionPdfConfig.successContent ?? 'Would you like to download the PDF?',
-                  centered: true,
-                  okText: 'Download',
-                  onOk: () => {
-                    const href = `${baseServerUrl}/api/attachment/${companyKey}/${generatedPdfBlobName}`
-                    window.open(href, '_blank')
-                    window.location.reload()
-                  },
-                })
-              }
-            }, 500)
+          if (res.status === 200) {
+            onCreateSuccess(res.data)
+            if (submissionPdfConfig?.showDownloadModal) {
+              confirmModal({
+                title: submissionPdfConfig.successTitle ?? 'Successfully generated the PDF!',
+                content: submissionPdfConfig.successContent ?? 'Would you like to download the PDF?',
+                centered: true,
+                okText: 'Download',
+                onOk: () => {
+                  const href = `${baseServerUrl}/api/attachment/${companyKey}/${generatedPdfBlobName}`
+                  window.open(href, '_blank')
+                  window.location.reload()
+                },
+              })
+            }
+          }
         })
       } catch (err) {
         if (submissionPdfConfig?.errorMsg) errorModal({ title: submissionPdfConfig.errorMsg })
@@ -74,6 +72,7 @@ export const useCreateDataWithPdfActions = ({
       }
     },
     [
+      breadcrumbs,
       formRef,
       formId,
       formKey,

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-generate-report.hook.tsx

@@ -4,9 +4,8 @@ import { FaCaretDown } from 'react-icons/fa6'
 import { IDynamicForm, IFormSchema, IFormTemplateReport } from '../../../../../types'
 import { Button_FillerPortal } from '../../../../common/button'
 import { useNotification } from '../../../../common/custom-hooks'
-import { fetchFormDataAsLookup, renderData } from '../../../../../functions/forms'
+import { fetchFormDataAsLookup, getIdEqualsQuery, renderData } from '../../../../../functions/forms'
 import client from '../../../../../api/client'
-import { parseJSON } from '../../../../../functions/forms/json-handlers'
 import { FieldElementOptionSourceEnum, LOCAL_STORAGE_KEYS_ENUM } from '../../../../../enums'
 import { IFormContext } from '../../1-row'
 import { IOnSuccessFunctions } from '.'
@@ -44,14 +43,14 @@ export const useGenerateReportAction = ({
             .get(`/api/form/${form.id}`)
             .then((res) => {
               if (res.status === 200) {
-                const parsedFormData: IFormSchema | null = parseJSON(res.data.data)
+                const parsedFormData: IFormSchema | null = JSON.parse(res.data.data)
                 if (parsedFormData) {
                   const reports = parsedFormData.generateConfig.templateReports ?? []
                   if (reports.length)
                     client
                       .post(`/api/report/data/${form.id}`, {
                         joins: parsedFormData.generateConfig.formJoins,
-                        match: JSON.stringify({ $expr: { $eq: [`$_id`, { $toObjectId: formDataId }] } }),
+                        match: JSON.stringify(getIdEqualsQuery('', formDataId)),
                       })
                       .then((res) => {
                         if (res.status === 200) {

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

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import { FormLoadingModalTypeEnum } from '../../../../../enums'
-import { stringifyJSON } from '../../../../../functions/forms/json-handlers'
+import { toMongoDbExtendedJSON } from '../../../../../functions/forms/extended-json-handlers'
 import client from '../../../../../api/client'
 import { IFormContext } from '../../1-row'
 import { IOnSuccessFunctions } from '.'
@@ -27,7 +27,7 @@ export const useSaveExistingDataAction = ({
         setDataLoadingType(FormLoadingModalTypeEnum.SavingChanges)
         const reqData = {
           name: 'Dynamic form data', // TODO: maybe later, make it dynamic
-          data: stringifyJSON(values),
+          data: JSON.stringify(toMongoDbExtendedJSON(values)),
           version: 1, // FIXME: increment
           private: false, // not used anymore, sending it as false by default
         }

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

@@ -0,0 +1,30 @@
+import { useBreadcrumb } from '../../../common/custom-hooks/use-breadcrumb.hook'
+import { Button_FillerPortal } from '../../../common/button'
+import { useNavigate } from 'react-router-dom'
+import { FaChevronRight } from 'react-icons/fa6'
+import React from 'react'
+
+export default function LayoutRenderer_Breadcrumb() {
+  const navigate = useNavigate()
+  const { breadcrumbs, sliceAt } = useBreadcrumb()
+
+  return (
+    <div className="flex items-center text-12">
+      {breadcrumbs.map((bc, bcIdx) => (
+        <React.Fragment key={bcIdx}>
+          <Button_FillerPortal
+            link
+            disabled={breadcrumbs.length - 1 === bcIdx}
+            onClick={() => {
+              sliceAt(bcIdx)
+              navigate(bc.href)
+            }}
+          >
+            <span className="font-normal italic">{bc.label}</span>
+          </Button_FillerPortal>
+          {breadcrumbs.length - 1 !== bcIdx && <FaChevronRight className="text-primary" />}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}

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

@@ -50,6 +50,9 @@ export const LayoutRenderer_FieldElement = ({
               const sanitizationRule = field.sanitization
               if (!sanitizationRule || sanitizationRule.type === DataSanitizationTypeEnum.Default) return value
 
+              if (sanitizationRule.type === DataSanitizationTypeEnum.Predefined && sanitizationRule.pattern)
+                return formatByPattern(value, sanitizationRule.pattern)
+
               if (sanitizationRule.type === DataSanitizationTypeEnum.Custom)
                 return formatByPattern(value, sanitizationRule.pattern)
             }}
@@ -193,7 +196,7 @@ const getField = ({
       )
     case ElementTypeEnum.ShortInput:
     default:
-      return <Input placeholder={placeholder} disabled={disabled} autoComplete='off'/>
+      return <Input placeholder={placeholder} disabled={disabled} autoComplete="off" />
   }
 }
 

package/src/components/form/layout-renderer/3-element/4-rich-text-editor.tsx

@@ -2,20 +2,44 @@ import { Form } from 'antd'
 import ReactQuill from 'react-quill'
 import 'react-quill/dist/quill.snow.css'
 import { IElementBaseProps } from '.'
-import { IInputElementProps } from '../../../../types'
+import { IInputElementProps, IValidationRule } from '../../../../types'
 import { IFormContext } from '../1-row'
+import { mapToFormItemRules } from '../../../../functions'
+import { FieldValidationEnum } from '../../../../enums'
+import { REGEX_PATTERNS } from '../../../../constants'
 
 export default function LayoutRenderer_RichEditor({
   formContext,
   elementProps,
   formItem,
+  validations,
   isDisabled,
 }: ILayoutRenderer_RichEditor) {
   const { formRef } = formContext
   const fieldValue = Form.useWatch(formItem.path, { form: formRef, preserve: true })
+  const requiredValidation = validations?.find((v) => v.rule === FieldValidationEnum.Required)
 
   return (
-    <Form.Item name={formItem.name} label={elementProps.hasNoLabel ? '' : elementProps.label} labelAlign="left">
+    <Form.Item
+      name={formItem.name}
+      rules={
+        requiredValidation
+          ? mapToFormItemRules(
+              [
+                requiredValidation,
+                {
+                  rule: FieldValidationEnum.Regex,
+                  value: REGEX_PATTERNS.NonEmptyHtmlString.toString(),
+                  message: requiredValidation.message,
+                },
+              ],
+              formItem.name,
+            )
+          : []
+      }
+      label={elementProps.hasNoLabel ? '' : elementProps.label}
+      labelAlign="left"
+    >
       <ReactQuill
         theme="snow"
         value={fieldValue}
@@ -43,4 +67,5 @@ const modules = {
 type ILayoutRenderer_RichEditor = {
   elementProps: IInputElementProps
   formContext: IFormContext
+  validations?: IValidationRule[]
 } & IElementBaseProps

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

@@ -6,14 +6,16 @@ import { FormPreservedItemKeys } from '../../../../enums'
 import { Button_FillerPortal } from '../../../common/button'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import { IElementBaseProps } from '.'
-import { ISignatureElementProps } from '../../../../types'
+import { ISignatureElementProps, IValidationRule } from '../../../../types'
 import { IFormContext } from '../1-row'
+import { mapToFormItemRules } from '../../../../functions'
 
 export default function LayoutRenderer_Signature({
   formItem,
   elementProps,
   isDisabled,
   formContext,
+  validations,
 }: ILayoutRenderer_Signature) {
   const { formRef, formDataId, companyKey } = formContext
   const sigCanvasRef = useRef<SignatureCanvas>(null)
@@ -33,6 +35,7 @@ export default function LayoutRenderer_Signature({
   return (
     <Form.Item
       name={formItem.name}
+      rules={Array.isArray(validations) ? mapToFormItemRules(validations, formItem.name) : []}
       label={
         !elementProps.hasNoLabel && (
           <div className="flex items-center gap-1">
@@ -81,4 +84,5 @@ export default function LayoutRenderer_Signature({
 type ILayoutRenderer_Signature = {
   elementProps: ISignatureElementProps
   formContext: IFormContext
+  validations?: IValidationRule[]
 } & IElementBaseProps