form-craft-package 1.5.1 → 1.5.3

package/package.json

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

package/src/components/common/custom-hooks/use-preserved-form-items.hook.ts

@@ -10,7 +10,6 @@ export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues
   const isGeneratingPdf = Form.useWatch(FormPreservedItemKeys.IsGeneratingPDF, { form: formRef, preserve: true })
   const hasSignature = Form.useWatch(FormPreservedItemKeys.HasSignature, { form: formRef, preserve: true })
   const inPreviewMode = Form.useWatch(FormPreservedItemKeys.InPreviewMode, { form: formRef, preserve: true })
-  const templateReports = Form.useWatch(FormPreservedItemKeys.TemplateReports, { form: formRef, preserve: true })
   const isPublic = Form.useWatch(FormPreservedItemKeys.IsPublic, { form: formRef, preserve: true })
   const submissionPdfConfig = Form.useWatch(FormPreservedItemKeys.SubmissionPdfConfig, {
     form: formRef,
@@ -27,7 +26,6 @@ export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues
     [FormPreservedItemKeys.IsGeneratingPDF]: isGeneratingPdf,
     [FormPreservedItemKeys.HasSignature]: hasSignature,
     [FormPreservedItemKeys.InPreviewMode]: inPreviewMode,
-    [FormPreservedItemKeys.TemplateReports]: templateReports,
     [FormPreservedItemKeys.IsPublic]: isPublic,
   }
 }

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

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { IDataListParentInfo, IFormData, IFormDataListConfig, IFormLayoutRow, ITableColumn } from '../../../types'
 import FormDataListHeaderComponent from './table-header'
 import useDebounced from '../../common/custom-hooks/use-debounce.hook'
-import { Table } from 'antd'
+import { FormInstance, Table } from 'antd'
 import { FilterConfigTypeEnum, FormDataListViewTypeEnum, MongoDbSortOrderEnum } from '../../../enums'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import { SorterResult } from 'antd/es/table/interface'
@@ -39,7 +39,7 @@ export default function FormDataListTableComponent({
     pagination: DEFAULT_PAGINATION,
   })
 
-  const { attachmentBaseUrl, userId, formId, formName } = constantValues
+  const { attachmentBaseUrl, userId, formId, formName, formRef } = constantValues
 
   useEffect(() => {
     setIsHandlingSchema(true)
@@ -68,7 +68,7 @@ export default function FormDataListTableComponent({
       if (elementsWithOptions_key.length > 0)
         optionKeyValuePair = await extractElementsOptions(layout, elementsWithOptions_key)
 
-      setTableColumns(generateTableColumns(elements, optionKeyValuePair, { attachmentBaseUrl, formName }))
+      setTableColumns(generateTableColumns(elements, optionKeyValuePair, { attachmentBaseUrl, formName, formRef }))
       setHeaderLayout(header.layout)
       setOtherConfigs({ ...restConfigs, hasNoPagination: pagination?.hasNoPagination ?? false })
 
@@ -95,7 +95,7 @@ export default function FormDataListTableComponent({
       setIsHandlingSchema(false)
       isFinishedHandlingRef.current = true
     },
-    [attachmentBaseUrl, formName, userId, formId],
+    [attachmentBaseUrl, formName, userId, formId, formRef],
   )
 
   useEffect(() => {
@@ -207,4 +207,5 @@ export interface IConstantValues {
   formDataId?: string
   formName?: string
   parentInfo?: IDataListParentInfo
+  formRef?: FormInstance
 }

package/src/components/form/2-details/index.tsx

@@ -17,6 +17,7 @@ export default function FormDataDetailsComponent({
   formId,
   formKey,
   formDataId,
+  formName,
   companyKey,
   baseServerUrl,
   onCustomFunctionCall,
@@ -98,10 +99,6 @@ export default function FormDataDetailsComponent({
                   )
                 setLoadings((c) => ({ ...c, data: false }))
               } else {
-                formDataRef.setFieldValue(
-                  FormPreservedItemKeys.TemplateReports,
-                  parsedData.generateConfig.templateReports,
-                )
                 const dateFields = extractDateFields(layout)
 
                 fetchFormData(formId, dateFields)
@@ -129,6 +126,7 @@ export default function FormDataDetailsComponent({
               conditions={conditions}
               formDataId={formDataId}
               formRef={formDataRef}
+              formName={formName}
               defaulDisabled
               onCustomFunctionCall={onCustomFunctionCall}
             />
@@ -143,6 +141,7 @@ type IFormDataDetailsComponent = {
   baseServerUrl?: string
   companyKey?: string
   formDataId: string
+  formName?: string
 } & (IDataDetailsPublicProps | IDataDetailsPrivateProps) &
   ICustomFunctionCall
 

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

@@ -3,7 +3,7 @@ import { ResponsivenessDeviceEnum } from '../../../../enums'
 import { getFlexContainerStyle, getFlexItemStyle, kebabCaseToCamelCase } from '../../../../functions'
 import { IDataRender_ButtonProps, IFormLayoutElementConditions, IFormLayoutRow } from '../../../../types'
 import LayoutRendererCol from '../2-col'
-import { memo, ReactElement, ReactNode, useMemo } from 'react'
+import { memo, ReactElement, ReactNode, useMemo, useState } from 'react'
 import { LayoutRowConditionalHeaderRenderer } from './header-render'
 import { LayoutRowRepeatableRenderer } from './repeatable-render'
 
@@ -16,6 +16,8 @@ export const LayoutRendererRow = memo(
     breakpointDevice = ResponsivenessDeviceEnum.Default,
     renderButton,
   }: ILayoutRendererRow) => {
+    const [hiddenElementCount, setHiddenElementCount] = useState(0)
+
     const styleConfig = useMemo(() => {
       if (!rowData.style || !rowData.style[breakpointDevice]) return {}
       return kebabCaseToCamelCase(rowData.style[breakpointDevice])
@@ -25,23 +27,40 @@ export const LayoutRendererRow = memo(
       <>
         <LayoutRowConditionalHeaderRenderer header={rowData.props?.header}>
           <LayoutRowRepeatableRenderer basePath={basePath} repeatingSection={rowData.props?.repeatingSection}>
-            {(formListItemProps) => (
-              <div style={{ ...styleConfig, ...getFlexContainerStyle(breakpointDevice, rowData.responsiveness) }}>
-                {rowData.children.map((col, colIdx) => (
-                  <LayoutRendererCol
-                    key={colIdx}
-                    basePath={formListItemProps ? formListItemProps.updatedBasePath : basePath}
-                    colData={col}
-                    formRef={formRef}
-                    titleComponent={titleComponent}
-                    breakpointDevice={breakpointDevice}
-                    renderButton={renderButton}
-                    colStyle={getFlexItemStyle(breakpointDevice, colIdx, rowData.responsiveness)}
-                  />
-                ))}
-                {formListItemProps?.removeButton}
-              </div>
-            )}
+            {(formListItemProps) => {
+              const style: { [key: string]: any } = {
+                ...styleConfig,
+                ...getFlexContainerStyle(breakpointDevice, rowData.responsiveness),
+              }
+              if (hiddenElementCount === rowData.children.length) style.display = 'none'
+
+              return (
+                <div style={style}>
+                  {rowData.children.map((col, colIdx) => (
+                    <LayoutRendererCol
+                      key={colIdx}
+                      basePath={formListItemProps ? formListItemProps.updatedBasePath : basePath}
+                      colData={col}
+                      formRef={formRef}
+                      titleComponent={titleComponent}
+                      breakpointDevice={breakpointDevice}
+                      renderButton={renderButton}
+                      hideRow={(isHidden) =>
+                        setHiddenElementCount((c) => {
+                          if (isHidden) return c + 1
+                          else {
+                            if (c - 1 < 0) return 0
+                            return c - 1
+                          }
+                        })
+                      }
+                      colStyle={getFlexItemStyle(breakpointDevice, colIdx, rowData.responsiveness)}
+                    />
+                  ))}
+                  {formListItemProps?.removeButton}
+                </div>
+              )
+            }}
           </LayoutRowRepeatableRenderer>
         </LayoutRowConditionalHeaderRenderer>
       </>

package/src/components/form/layout-renderer/2-col/index.tsx

@@ -1,4 +1,4 @@
-import { memo, ReactElement, ReactNode, useState } from 'react'
+import { memo, ReactElement, ReactNode, useEffect, useMemo, useState } from 'react'
 import { LayoutRendererRow } from '../1-row'
 import {
   IDataRender_ButtonProps,
@@ -18,15 +18,26 @@ function LayoutRendererCol({
   titleComponent,
   breakpointDevice,
   colStyle,
+  hideRow,
   renderButton,
 }: ILayoutRendererCol) {
   const [hiddenElementCount, setHiddenElementCount] = useState(0)
 
+  const isAllChildrenHidden = useMemo(
+    () => colData.children.length === hiddenElementCount,
+    [colData.children, hiddenElementCount],
+  )
+
+  useEffect(() => {
+    console.log(isAllChildrenHidden)
+    hideRow(isAllChildrenHidden)
+  }, [isAllChildrenHidden])
+
   return (
     <div
       style={{
         ...colStyle,
-        display: colData.children.length === hiddenElementCount ? 'none' : 'flex',
+        display: isAllChildrenHidden ? 'none' : 'flex',
         flexDirection: FlexDirection.Col,
       }}
     >
@@ -53,8 +64,10 @@ function LayoutRendererCol({
             hideElement={(isHidden) =>
               setHiddenElementCount((c) => {
                 if (isHidden) return c + 1
-                if (c - 1 < 0) return 0
-                return c - 1
+                else {
+                  if (c - 1 < 0) return 0
+                  return c - 1
+                }
               })
             }
           />
@@ -72,5 +85,6 @@ interface ILayoutRendererCol {
   titleComponent?: ReactNode
   breakpointDevice: ResponsivenessDeviceEnum
   colStyle: { [key: string]: number | string }
+  hideRow: (bool: boolean) => void
   renderButton?: (props: IDataRender_ButtonProps, conditions?: IFormLayoutElementConditions) => ReactElement
 }

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

@@ -39,7 +39,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   const [dataLoadingType, setDataLoadingType] = useState<FormLoadingModalTypeEnum | undefined>()
   const { inPreviewMode, isPublic = false } = useFormPreservedItemValues(formRef)
 
-  const baseDynamicUrl = useMemo(() => constructDynamicFormHref(formName), [formName])
+  const baseDynamicUrl = useMemo(() => constructDynamicFormHref(formName) ?? '', [formName])
 
   useEffect(() => {
     formRef?.setFieldValue(FormPreservedItemKeys.FormDataId, formDataId)
@@ -76,6 +76,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   })
   const { onCreateNewData, onGeneratePdfProof } = useCreateDataWithPdfActions({
     formRef,
+    baseDynamicUrl,
     setDataLoadingType,
     onGenerateError: () => {
       setDataLoadingType(undefined)
@@ -168,7 +169,11 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         break
 
       case ButtonActionCategoryEnum.GenerateReport:
-        onGenerateReport()
+        if (!formDataId) {
+          warning({ message: 'Data id was not found!' })
+          break
+        }
+        onGenerateReport(formName, formDataId)
         setTimeout(() => setLoading(false), 500)
         break
 
@@ -189,6 +194,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
     baseDynamicUrl,
     formDataId,
     isPublic,
+    formName,
     onCustomFunctionCall,
     onDuplicateData,
     onDeleteData,

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

@@ -1,11 +1,11 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { FormLoadingModalTypeEnum } from '../../../../../enums'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
 import { stringifyJSON } from '../../../../../functions/json-handlers'
 import client from '../../../../../functions/axios-handler'
-import { extractDynamicFormHref, objectToQueryParams } from '../../../../../functions'
+import { objectToQueryParams } from '../../../../../functions'
 import { useNotification } from '../../../../common/custom-hooks'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { FormInstance } from 'antd'
 
 /* --------------------------------------------------------------------------
@@ -14,6 +14,7 @@ import { FormInstance } from 'antd'
 -------------------------------------------------------------------------- */
 export const useCreateDataWithPdfActions = ({
   formRef,
+  baseDynamicUrl,
   setDataLoadingType,
   onCreateSuccess,
   onCreateError,
@@ -21,6 +22,7 @@ export const useCreateDataWithPdfActions = ({
   onGenerateError,
 }: {
   formRef: FormInstance | undefined
+  baseDynamicUrl: string
   setDataLoadingType: (type: FormLoadingModalTypeEnum) => void
   onCreateSuccess: () => void
   onCreateError: () => void
@@ -28,13 +30,11 @@ export const useCreateDataWithPdfActions = ({
   onGenerateError: () => void
 }) => {
   const navigate = useNavigate()
-  const location = useLocation()
+  // const { isModalOpen: isSuccessModalOpen, isPendingTransition: isSuccessModalPending, openModal: openSuccessModal, closeModal: closeSuccessModal } = useLazyModalOpener()
   const { errorModal, confirmModal } = useNotification()
   const { formId, formKey, baseServerUrl, companyKey, submissionPdfConfig, isPublic } =
     useFormPreservedItemValues(formRef)
 
-  const baseDynamicUrl = useMemo(() => extractDynamicFormHref(location.pathname), [location.pathname])
-
   const onCreateNewData = useCallback(
     (generatedPdfBlobName?: string) => {
       try {

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

@@ -1,5 +1,4 @@
-import { useCallback, useMemo } from 'react'
-import { extractDynamicFormHref } from '../../../../../functions'
+import { useCallback } from 'react'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
 import client from '../../../../../functions/axios-handler'
 import { FormInstance } from 'antd'
@@ -18,7 +17,6 @@ export const useDeleteDataAction = ({
   onError: () => void
   onFinal: () => void
 }) => {
-  const baseDynamicUrl = useMemo(() => extractDynamicFormHref(location.pathname), [location.pathname])
   const { formId, formDataId } = useFormPreservedItemValues(formRef)
 
   const onDeleteData = useCallback(async () => {
@@ -31,7 +29,7 @@ export const useDeleteDataAction = ({
     } finally {
       onFinal()
     }
-  }, [formId, formDataId, baseDynamicUrl])
+  }, [formId, formDataId])
 
   return onDeleteData
 }

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

@@ -1,12 +1,13 @@
-import { useCallback, useState } from 'react'
-import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
-import { FormInstance, Modal, Select } from 'antd'
+import { useCallback, useRef, useState } from 'react'
+import { FormInstance, Modal, Select, Spin } from 'antd'
 import { FaCaretDown } from 'react-icons/fa6'
-import { IFormTemplateReport } from '../../../../../types'
+import { IDynamicForm, IFormSchema, IFormTemplateReport } from '../../../../../types'
 import { Button_FillerPortal } from '../../../../common/button'
 import { useNotification } from '../../../../common/custom-hooks'
 import { fetchFormDataAsLookup, renderData } from '../../../../../functions'
-import { FieldElementOptionSourceEnum } from '../../../../../enums'
+import client from '../../../../../functions/axios-handler'
+import { parseJSON } from '../../../../../functions/json-handlers'
+import { FieldElementOptionSourceEnum, FormPreservedItemKeys, LOCAL_STORAGE_KEYS_ENUM } from '../../../../../enums'
 
 /* --------------------------------------------------------------------------
   Generates a report by logging current form values.
@@ -17,30 +18,76 @@ export const useGenerateReportAction = ({
   onError,
   onFinal,
 }: {
-  formRef: FormInstance | undefined
+  formRef?: FormInstance
   onSuccess: () => void
   onError: () => void
   onFinal: () => void
 }) => {
   const { warning } = useNotification()
-  const { templateReports } = useFormPreservedItemValues(formRef)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [selectedTemplate, setSelectedTemplate] = useState(undefined)
+  const [templateReports, setTemplateReports] = useState<IFormTemplateReport[]>([])
   const [loading, setLoading] = useState(false)
+  const [formData, setFormData] = useState<{ [key: string]: string | number }>({})
+  const companyKeyRef = useRef('')
 
-  const onGenerateReport = useCallback(() => {
-    if (Array.isArray(templateReports) && templateReports.length > 0) setIsModalOpen(true)
+  const onGenerateReport = useCallback(
+    async (formName: string, formDataId: string) => {
+      setLoading(true)
+      setIsModalOpen(true)
+      try {
+        const storedData = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms)
+        if (storedData) {
+          const parsedData: IDynamicForm[] = JSON.parse(storedData)
+          const form = parsedData.find((entry) => entry.name === formName)
 
-    console.log('Template Reports:', templateReports)
-  }, [formRef, templateReports])
+          if (form) {
+            client
+              .get(`/api/form/${form.id}`)
+              .then((res) => {
+                if (res.status === 200) {
+                  const parsedFormData: IFormSchema | null = parseJSON(res.data.data)
+                  if (parsedFormData) {
+                    const preservedFormValues = formRef?.getFieldsValue(true) ?? {}
+                    companyKeyRef.current = preservedFormValues.companyKey ?? ''
+
+                    const formDataListFormKey =
+                      preservedFormValues[`${FormPreservedItemKeys.FormDataListElementKey}_${form.id}`]
+
+                    if (formDataListFormKey) {
+                      const formDataList = preservedFormValues[formDataListFormKey] ?? []
+                      const formDataRowFormData =
+                        formDataList.find((d: { [key: string]: string | number }) => d.id === formDataId) ?? {}
+
+                      setFormData(formDataRowFormData)
+                    } else {
+                      const mainFormData = formRef?.getFieldsValue() ?? {}
+                      setFormData(mainFormData)
+                    }
+
+                    const reports = parsedFormData.generateConfig.templateReports ?? []
+                    setTemplateReports(reports)
+                  }
+                }
+              })
+              .finally(() => setLoading(false))
+          } else setLoading(false)
+        } else setLoading(false)
+      } catch (error) {
+        console.error('Error reading or parsing localStorage data', error)
+        setLoading(false)
+      }
+    },
+    [templateReports, formRef],
+  )
 
   const ChooseTemplateReportModal = isModalOpen ? (
     <Modal
       open
-      closable={false}
       maskClosable={false}
       width={400}
       title="Please select a template!"
+      onCancel={() => setIsModalOpen(false)}
       footer={
         <div className="flex justify-between">
           <Button_FillerPortal outline onClick={() => setIsModalOpen(false)}>
@@ -52,14 +99,16 @@ export const useGenerateReportAction = ({
             title={selectedTemplate ? '' : 'Please select a template to continue!'}
             loading={loading}
             onClick={async () => {
+              if (!companyKeyRef.current) {
+                warning({ message: 'Company was not found!' })
+                return
+              }
+
               setLoading(true)
               const selectedTemplateInfo: IFormTemplateReport = templateReports.find(
                 (t: IFormTemplateReport) => t.fileBlobName === selectedTemplate,
-              )
-              const formValues = formRef?.getFieldsValue()
-              console.log('Form Values:', formValues)
+              )!
 
-              console.log(selectedTemplateInfo)
               const replacements = await Promise.all(
                 selectedTemplateInfo.replacements.map(async (rep) => {
                   if (!!rep.optionSource) {
@@ -67,7 +116,7 @@ export const useGenerateReportAction = ({
                       return {
                         placeholder: rep.placeholder,
                         value: renderData(
-                          rep.optionSource.options.find((op) => op.id === rep.option)?.value,
+                          rep.optionSource.options.find((op) => op.id === formData[rep.field])?.value,
                           rep.renderConfig,
                         ),
                       }
@@ -76,7 +125,7 @@ export const useGenerateReportAction = ({
                       return {
                         placeholder: rep.placeholder,
                         value: renderData(
-                          formDataResData.find((data) => data.id === formValues[rep.field])?.[
+                          formDataResData.find((data) => data.id === formData[rep.field])?.[
                             rep.optionSource.form.field
                           ],
                           rep.renderConfig,
@@ -86,18 +135,39 @@ export const useGenerateReportAction = ({
                   }
                   return {
                     placeholder: rep.placeholder,
-                    value: renderData(formValues[rep.field], rep.renderConfig),
+                    value: renderData(formData[rep.field], rep.renderConfig),
+                    type: rep.type,
                   }
                 }),
               )
 
-              console.log('Replacement values', replacements)
-
-              onSuccess()
-              onError()
-              onFinal()
-              warning({ message: 'Waiting for an API!' })
-              setLoading(false)
+              client
+                .post(
+                  `/api/attachment/template/${companyKeyRef.current}/${selectedTemplateInfo.templateName}`,
+                  replacements.map((r) => ({
+                    key: r.placeholder,
+                    value: r.value,
+                    type: r.type,
+                  })),
+                  { responseType: 'blob' },
+                )
+                .then((res) => {
+                  if (res.status === 200) {
+                    const url = window.URL.createObjectURL(new Blob([res.data]))
+                    const link = document.createElement('a')
+                    link.href = url
+                    link.setAttribute('download', `${selectedTemplateInfo.templateName}.pdf`) //or any other extension
+                    document.body.appendChild(link)
+                    link.click()
+                    onSuccess()
+                  }
+                })
+                .catch(() => onError())
+                .finally(() => {
+                  onFinal()
+                  setLoading(false)
+                  setIsModalOpen(false)
+                })
             }}
           >
             Continue
@@ -106,22 +176,24 @@ export const useGenerateReportAction = ({
       }
     >
       <span>Template</span>
-      <Select
-        placeholder="Please select a template"
-        suffixIcon={<FaCaretDown />}
-        options={templateReports.map((t: IFormTemplateReport) => ({ value: t.fileBlobName, label: t.templateName }))}
-        value={selectedTemplate}
-        onChange={setSelectedTemplate}
-        showSearch
-        optionFilterProp="label"
-        filterOption={(input, option) =>
-          option && typeof option.label === 'string'
-            ? option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            : false
-        }
-        allowClear={false}
-        className="w-full"
-      />
+      <Spin spinning={loading}>
+        <Select
+          placeholder="Please select a template"
+          suffixIcon={<FaCaretDown />}
+          options={templateReports.map((t: IFormTemplateReport) => ({ value: t.fileBlobName, label: t.templateName }))}
+          value={selectedTemplate}
+          onChange={setSelectedTemplate}
+          showSearch
+          optionFilterProp="label"
+          filterOption={(input, option) =>
+            option && typeof option.label === 'string'
+              ? option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              : false
+          }
+          allowClear={false}
+          className="w-full"
+        />
+      </Spin>
     </Modal>
   ) : (
     <></>

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

@@ -1,17 +1,25 @@
 import { Form, FormInstance } from 'antd'
-import { IReadFieldDataElementProps } from '../../../../types'
 import { renderData } from '../../../../functions'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import { useMemo } from 'react'
-import { DataRenderTypeEnum } from '../../../../enums'
+import { DataRenderTypeEnum, EvaluationOperatorsEnum, EvaluationValueTypeEnum } from '../../../../enums'
 import { IFormItemPath } from '.'
+import {
+  IEvaluationCondition,
+  IEvaluationConfig,
+  IEvaluationOnField,
+  IEvaluationOnList,
+  IReadFieldDataElementProps,
+} from '../../../../types'
 
 export default function LayoutRenderer_ReadFieldData({
   formRef,
   elementProps,
   style = {},
 }: ILayoutRenderer_ReadFieldData) {
-  const fieldValue = Form.useWatch(elementProps.field, { form: formRef, preserve: true })
+  const fieldValue = elementProps.isValueEvaluated
+    ? undefined
+    : Form.useWatch(elementProps.field, { form: formRef, preserve: true })
   const { baseServerUrl, companyKey } = useFormPreservedItemValues(formRef)
 
   const formValues = Form.useWatch([], { form: formRef, preserve: true })
@@ -21,6 +29,14 @@ export default function LayoutRenderer_ReadFieldData({
     [baseServerUrl, companyKey, fieldValue],
   )
 
+  const evaluatedValue = useMemo(() => {
+    if (elementProps.isValueEvaluated && formValues) {
+      const config = elementProps.evaluationConfig
+      return evaluateConfig(config, formValues)
+    }
+    return 0
+  }, [formValues, elementProps])
+
   return (
     <div className="flex items-center gap-2">
       {elementProps.label && <span>{elementProps.label}: </span>}
@@ -30,6 +46,8 @@ export default function LayoutRenderer_ReadFieldData({
             ? attachmentUrl
             : elementProps.renderConfig?.type === DataRenderTypeEnum.Conditional
             ? formValues
+            : elementProps.isValueEvaluated
+            ? evaluatedValue
             : fieldValue,
           elementProps.renderConfig ?? { type: DataRenderTypeEnum.Default },
         ) ?? 'N/A'}
@@ -43,3 +61,102 @@ type ILayoutRenderer_ReadFieldData = {
   elementProps: IReadFieldDataElementProps
   style?: { [key: string]: any }
 } & IFormItemPath
+
+const evaluateConfig = (config: IEvaluationConfig, data: { [key: string]: any }): number => {
+  // Helper to check an evaluation’s condition (if any)
+  function checkConditions(
+    dataToCheckConditions: { [key: string]: any },
+    conditions?: IEvaluationCondition[],
+  ): boolean {
+    if (!conditions || conditions.length === 0) return true
+    // As stated, at most one condition is supported.
+    const condition = conditions[0]
+
+    // Currently only the Equal operator is supported.
+    return dataToCheckConditions[condition.field] === condition.value
+  }
+
+  // Helper to combine values using the operator.
+  function applyOperator(operator: EvaluationOperatorsEnum, values: number[]): number {
+    if (values.length === 0) return 0
+    let result = values[0]
+    for (let i = 1; i < values.length; i++) {
+      const value = values[i]
+      switch (operator) {
+        case EvaluationOperatorsEnum.Add:
+          result += value
+          break
+        case EvaluationOperatorsEnum.Subtract:
+          result -= value
+          break
+        case EvaluationOperatorsEnum.Multiply:
+          result *= value
+          break
+        case EvaluationOperatorsEnum.Divide:
+          result /= value
+          break
+        default:
+          throw new Error(`Unsupported operator: ${operator}`)
+      }
+    }
+    return result
+  }
+
+  // Object to store results from each evaluation by its id.
+  const evaluationResults: { [id: string]: number } = {}
+
+  // Process each evaluation in the config.
+  for (const evaluation of config.evaluations) {
+    // Evaluation based on fields (IEvaluationOnField)
+    if (evaluation.type === EvaluationValueTypeEnum.Fields) {
+      // If a condition exists and fails, treat the result as 0.
+      if (!checkConditions(data, evaluation.conditions)) {
+        evaluationResults[evaluation.id] = 0
+        continue
+      }
+
+      const evalFields = (evaluation as IEvaluationOnField).fields
+      // For each field, take the value from data (using default if missing)
+      const values = evalFields.map((fieldConfig) => {
+        const value = data[fieldConfig.field]
+        return value !== undefined && value !== null ? value : fieldConfig.defaultValue ?? 0
+      })
+      evaluationResults[evaluation.id] = applyOperator(evaluation.operator, values)
+    }
+    // Evaluation based on a list (IEvaluationOnList)
+    else if (evaluation.type === EvaluationValueTypeEnum.List) {
+
+      const listData = data[(evaluation as IEvaluationOnList).list]
+      if (Array.isArray(listData)) {
+        const values = listData.map((item, itemIdx) => {
+          const listItemData = listData[itemIdx]
+          if (!checkConditions(listItemData, evaluation.conditions)) return 0
+
+          const fieldValue = item[(evaluation as IEvaluationOnList).listField.field]
+          
+          return fieldValue !== undefined && fieldValue !== null
+            ? fieldValue
+            : (evaluation as IEvaluationOnList).listField.defaultValue ?? 0
+        })
+        evaluationResults[evaluation.id] = applyOperator(evaluation.operator, values)
+      } else {
+        evaluationResults[evaluation.id] = 0
+      }
+    }
+  }
+
+  // Determine and return the final result.
+  // If evaluationGroups is provided, use the last one as the final evaluation.
+  if (config.evaluationGroups && config.evaluationGroups.length > 0) {
+    const finalGroup = config.evaluationGroups[config.evaluationGroups.length - 1]
+    // Retrieve results for the evaluation IDs in the group (defaulting to 0 if missing)
+    const groupValues = finalGroup.evaluationIds.map((id) => evaluationResults[id] ?? 0)
+    return applyOperator(finalGroup.operator, groupValues)
+  }
+  // Otherwise, return the result from the last evaluation.
+  else if (config.evaluations.length > 0) {
+    const lastEvaluation = config.evaluations[config.evaluations.length - 1]
+    return evaluationResults[lastEvaluation.id]
+  }
+  return 0
+}

package/src/components/form/layout-renderer/3-element/9-form-data-render.tsx

@@ -17,8 +17,9 @@ import {
   IFormLayoutRow,
   IFormRelationshipConfig,
 } from '../../../../types'
+import { FormPreservedItemKeys } from '../../../../enums'
 
-export default function LayoutRenderer_LoadFormData({ formRef, elementProps }: ILayoutRenderer_LoadFormData) {
+export default function LayoutRenderer_LoadFormData({ fullPath, formRef, elementProps }: ILayoutRenderer_LoadFormData) {
   const { form, filterConfig, sorterConfig } = elementProps
   const { formDataId } = useFormPreservedItemValues(formRef)
   const recursiveCallCount = useRef(0)
@@ -52,6 +53,7 @@ export default function LayoutRenderer_LoadFormData({ formRef, elementProps }: I
           layout: IFormLayoutRow[]
           formName: string
           parentInfo: { foreignKey: string; dataIds: string[] }
+          rootFormId: number
           data: { data: IFormData[]; total: number }
         }
       | undefined
@@ -125,6 +127,7 @@ export default function LayoutRenderer_LoadFormData({ formRef, elementProps }: I
                   layout: detailsConfig.layout,
                   formName: formDetailsRes.data.name,
                   parentInfo: { foreignKey: relationship.foreignKey, dataIds: foreignKeyIds },
+                  rootFormId: childFormId,
                   data: {
                     ...formData,
                     data: formData.data.map((d: { [key: string]: any }) => ({
@@ -178,19 +181,24 @@ export default function LayoutRenderer_LoadFormData({ formRef, elementProps }: I
         (filterConfig as IFilterByAuthUser | IFilterCustom)?.config,
         sorterConfig,
       ).then((resData) => {
-        const { config, data, layout = [], formName = '', parentInfo } = resData ?? {}
+        const { config, data, layout = [], formName = '', parentInfo, rootFormId } = resData ?? {}
 
         if (config) setDisplayConfig({ dataListConfig: config, detailsLayout: layout })
-        if (data) setDataList(data)
+        if (data) {
+          setDataList(data)
+          if (rootFormId)
+            formRef.setFieldValue(`${FormPreservedItemKeys.FormDataListElementKey}_${rootFormId}`, fullPath)
+          formRef.setFieldValue(fullPath, data.data)
+        }
         setCurrentFormInfo({ formName, parentInfo })
       })
       hasInitialFetched.current = true
     }
-  }, [form, filterConfig, sorterConfig, fetchFormDetails, formDataId, formValues])
+  }, [form, filterConfig, sorterConfig, fetchFormDetails, formDataId, formValues, fullPath])
 
   if (!form || !form.relationshipConfig?.formId) return <></>
 
-  const constantValues = { formDataId, ...currentFormInfo }
+  const constantValues = { formDataId, formRef, ...currentFormInfo }
 
   return (
     <FormDataListTableComponent

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

@@ -1,6 +1,6 @@
 import { Divider, FormInstance } from 'antd'
 import { memo, ReactElement, ReactNode, useEffect, useMemo } from 'react'
-import { IDataRender_ButtonProps, IFormLayoutElement } from '../../../../types'
+import { IDataRender_ButtonProps, IFormLayoutElement, IReadFieldDataElementProps } from '../../../../types'
 import { getElementGeneralizedProps } from '../../../../functions/get-element-props'
 import { ElementTypeEnum, ResponsivenessDeviceEnum, TextElementTypeEnum } from '../../../../enums'
 import { LayoutRenderer_FieldElement } from './2-field-element'
@@ -119,7 +119,11 @@ function LayoutRendererElement({
 
     case ElementTypeEnum.ReadFieldData:
       return (
-        <LayoutRenderer_ReadFieldData formRef={formRef} elementProps={props} style={elementData.style?.[breakpointDevice]} />
+        <LayoutRenderer_ReadFieldData
+          formRef={formRef}
+          elementProps={props as IReadFieldDataElementProps}
+          style={elementData.style?.[breakpointDevice]}
+        />
       )
 
     case ElementTypeEnum.Divider:
@@ -159,7 +163,7 @@ function LayoutRendererElement({
       )
 
     case ElementTypeEnum.LoadFormData:
-      return <LayoutRenderer_LoadFormData elementProps={props} formRef={formRef} />
+      return <LayoutRenderer_LoadFormData fullPath={fullPath} elementProps={props} formRef={formRef} />
 
     default:
       return (

package/src/enums.ts

@@ -221,8 +221,8 @@ export enum FormPreservedItemKeys {
   IsGeneratingPDF = 'isGeneratingPdf',
   HasSignature = 'hasSignature',
   InPreviewMode = 'inPreviewMode',
-  TemplateReports = 'templateReports',
   IsPublic = 'isPublic',
+  FormDataListElementKey = 'formDataListElementKey',
 }
 export enum MongoDbSortOrderEnum {
   Ascending = 1,
@@ -234,6 +234,7 @@ export enum DataCategoryEnum {
   Boolean = 'boolean',
   Null = 'null',
   Undefined = 'undefined',
+  Option = 'option',
   Array = 'array',
   Function = 'function',
   UserInput = 'user-input',
@@ -254,6 +255,17 @@ export enum RelationalOperatorsEnum {
   In = '@in',
   NotIn = '@nin',
 }
+export enum EvaluationOperatorsEnum {
+  Add = 'add',
+  Subtract = 'subtract',
+  Multiply = 'multiply',
+  Divide = 'divide',
+}
+export enum EvaluationValueTypeEnum {
+  Fields = 'fields',
+  List = 'list',
+  Group = 'group', // for nested evaluation
+}
 export enum FormRelationshipEnum {
   ManyToOne = 'many-to-one',
   OneToOne = 'one-to-one',
@@ -279,3 +291,10 @@ export enum PatternPlacholdersEnum {
   CyrillicLowercase = 'c',
   Digit = 'D',
 }
+export enum TemplateDataReplacementFieldTypesEnum {
+  Text = 1,
+  Html,
+  Image,
+  Table,
+  TableRow,
+}

package/src/functions/data-render-functions.tsx

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import { AlignTypeEnum, CountryEnum, DataRenderTypeEnum, PatternPlacholdersEnum } from '../enums'
 import { DynamicFormButtonRender } from '../components/form/layout-renderer/3-element/1-dynamic-button'
-import { Dropdown, Image } from 'antd'
+import { Dropdown, FormInstance, Image } from 'antd'
 import { FaCaretDown } from 'react-icons/fa6'
 import { INTERNATIONALIZATION_DATA } from '../constants'
 import { evaluateCondition } from './evaluate-condition'
@@ -22,9 +22,9 @@ import {
 export const generateTableColumns = (
   elements: IFormDataListElement[],
   optionKeyValuePair: { [key: string]: string },
-  contextValues: { attachmentBaseUrl?: string; formName?: string } = {},
+  contextValues: { attachmentBaseUrl?: string; formName?: string; formRef?: FormInstance } = {},
 ) => {
-  const { attachmentBaseUrl, formName } = contextValues
+  const { attachmentBaseUrl, formName, formRef } = contextValues
 
   return elements.map((el) => {
     const col: ITableColumn = {
@@ -62,7 +62,12 @@ export const generateTableColumns = (
                       .map((btnProps, btnKey) => ({
                         key: btnKey,
                         label: (
-                          <DynamicFormButtonRender btnProps={btnProps} formDataId={rowData?.id} formName={formName} />
+                          <DynamicFormButtonRender
+                            formRef={formRef}
+                            btnProps={btnProps}
+                            formDataId={rowData?.id}
+                            formName={formName}
+                          />
                         ),
                       })),
                   }}
@@ -76,6 +81,7 @@ export const generateTableColumns = (
                 </Dropdown>
               ) : (
                 <DynamicFormButtonRender
+                  formRef={formRef}
                   btnProps={(el.renderConfig as IDataRender_Buttons).buttons[0]}
                   formDataId={rowData?.id}
                   formName={formName}
@@ -92,7 +98,7 @@ export const generateTableColumns = (
 }
 
 export const renderData = (data?: any, renderConfig?: IDataRenderConfig): ReactNode => {
-  if (!data || typeof data === 'object' || !renderConfig) return 'N/A'
+  if ([null, undefined, ''].includes(data) || typeof data === 'object' || !renderConfig) return 'N/A'
 
   switch (renderConfig.type) {
     case DataRenderTypeEnum.Date:

package/src/types/companies/site-layout/authenticated/index.tsx

@@ -3,7 +3,7 @@ import { HiMenu } from 'react-icons/hi'
 import { ILayoutTemplateProps } from '../..'
 import { Link } from 'react-router-dom'
 import { IDynamicForm } from '../../../data-list'
-import { isEncodedURI } from '../../../../functions'
+import { constructDynamicFormHref, isEncodedURI } from '../../../../functions'
 import { useState } from 'react'
 import { Button, Drawer, Dropdown, Menu } from 'antd'
 
@@ -473,7 +473,3 @@ const isActive = (path: string, href: string) => {
 
   return path.startsWith(href)
 }
-
-const constructDynamicFormHref = (formName: string): string => {
-  return `/forms/${formName.toLowerCase().replace(/ /g, '-')}`
-}

package/src/types/generate/index.ts

@@ -1,3 +1,4 @@
+import { TemplateDataReplacementFieldTypesEnum } from '../../enums'
 import { IDataRenderConfig, IFieldElementOptionSource } from '../layout-elements'
 
 export interface IFormSubmissionPdf {
@@ -19,5 +20,5 @@ interface IFormTemplateReportsReplacement {
   field: string
   renderConfig: IDataRenderConfig
   optionSource?: IFieldElementOptionSource
-  option?: string
+  type: TemplateDataReplacementFieldTypesEnum
 }

package/src/types/layout-elements/evaluation-config.ts

@@ -0,0 +1,86 @@
+import {
+  DataCategoryEnum,
+  EvaluationOperatorsEnum,
+  EvaluationValueTypeEnum,
+  RelationalOperatorsEnum,
+} from '../../enums'
+
+export interface IEvaluationConfig {
+  evaluations: (IEvaluationOnField | IEvaluationOnList)[]
+  evaluationGroups?: IEvaluationGroup[]
+}
+
+interface IEvaluationConfigBase {
+  id: string
+  operator: EvaluationOperatorsEnum
+}
+
+export interface IEvaluationGroup extends IEvaluationConfigBase {
+  type: EvaluationValueTypeEnum.Group
+  evaluationIds: string[] // ids
+}
+
+export interface IEvaluationOnField extends IEvaluationConfigBase {
+  type: EvaluationValueTypeEnum.Fields
+  fields: IEvaluationField[]
+  conditions?: IEvaluationCondition[]
+}
+
+export interface IEvaluationOnList extends IEvaluationConfigBase {
+  type: EvaluationValueTypeEnum.List
+  list: string
+  listField: IEvaluationField
+  conditions?: IEvaluationCondition[]
+}
+
+interface IEvaluationField {
+  field: string
+  defaultValue: number
+}
+
+export interface IEvaluationCondition {
+  id: string
+  field: string
+  operator: RelationalOperatorsEnum
+  valueType: DataCategoryEnum
+  value: string | number | boolean
+}
+
+// {
+//   id: string
+//   type: 'evaluation',
+//   operator: 'plus',
+//   evaluations: [
+//     {
+//       id: string,
+//       type: 'list',
+//       list: 'dDataList',
+//       listField: 'dDataAmount',
+//       operator: 'plus',
+//     },
+//     {
+//       id: string,
+//       type: 'fields',
+//       fields: ['amount1', 'amount2'],
+//     },
+//     {
+//       id: string,
+//       type: 'evaluation',
+//       operator: 'plus',
+//       evaluations: [
+//         {
+//           id: string
+//           type: 'list',
+//           list: 'dDataList',
+//           listField: 'dDataAmount',
+//           operator: 'plus',
+//         },
+//         {
+//           id: string
+//           type: 'fields',
+//           fields: ['amount1', 'amount2'],
+//         }
+//       ]
+//     }
+//   ]
+// }

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

@@ -3,7 +3,8 @@ export * from './field-option-source'
 export * from './style'
 export * from './conditions'
 export * from './sanitization'
-import { ICssStyle, IDataListSorter, IFilterConfig, IRelationshipForm } from '..'
+export * from './evaluation-config'
+import { ICssStyle, IDataListSorter, IEvaluationConfig, IFilterConfig, IRelationshipForm } from '..'
 import { IFieldElementOptionSource } from './field-option-source'
 import { IDataRenderConfig } from './data-render-config'
 import {
@@ -243,12 +244,11 @@ export interface IReadFieldDataElement extends BaseFormLayoutElement {
   style?: ICssStyle
   props: IReadFieldDataElementProps
 }
-export interface IReadFieldDataElementProps {
+export type IReadFieldDataElementProps = {
   label?: string
   hasNoLabel?: boolean
-  field?: string
   renderConfig?: IDataRenderConfig
-}
+} & ({ isValueEvaluated: true; evaluationConfig: IEvaluationConfig } | { isValueEvaluated: false; field: string })
 
 /** -------------------------------------------------------------------------------------------- */