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

package/src/components/form/layout-renderer/3-element/8-fields-with-options.tsx

@@ -8,17 +8,20 @@ import { IFormContext } from '../1-row'
 import client, { clientCancelToken } from '../../../../api/client'
 import { CancelToken } from 'axios'
 import { useBreadcrumb } from '../../../common/custom-hooks/use-breadcrumb.hook'
-import { Spin } from 'antd'
+import { Form, Spin } from 'antd'
+import { constructDynamicFormHref, getIdEqualsQuery, isNewFormDataPage } from '../../../../functions'
 import {
-  IFilterByLinkedFormRelPath,
   IFormJoin,
   IFormLayoutFieldOption,
   IOptionSourceConstant,
+  IOptionSourceDynamicForm,
+  IOptionSourceLinkedForm,
   IOptionSourceReadFromDetails,
   IRadioElement,
   ISelectElement,
 } from '../../../../types'
-import { getIdEqualsQuery } from '../../../../functions'
+import { useFindDynamiForm } from '../../../common/custom-hooks'
+import { useNavigate } from 'react-router-dom'
 
 export default function LayoutRenderer_FieldsWithOptions({
   formContext,
@@ -26,14 +29,18 @@ export default function LayoutRenderer_FieldsWithOptions({
   elementData,
   isDisabled,
 }: ILayoutRenderer_FieldsWithOptions) {
-  const { formRef, parentFormJoins, formId, formDataId } = formContext
+  const navigate = useNavigate()
+  const { getFormById } = useFindDynamiForm()
+  const { formRef, formId, formDataId } = formContext
   const [options, setOptions] = useState<{ value: string; label: string }[]>([])
   const props = getElementGeneralizedProps(elementData.props)
   const cancelTokenRef = useRef<CancelToken | undefined>(undefined)
-  const { breadcrumbs } = useBreadcrumb()
+  const { breadcrumbs, push } = useBreadcrumb()
   const [loading, setLoading] = useState(true)
   const isManyToManyPageRef = useRef(false)
 
+  const selectedValue = Form.useWatch(formItem.path, formRef)
+
   const { inPreviewMode } = useFormPreservedItemValues(formRef)
 
   const parentRelInfo = useMemo(() => {
@@ -43,87 +50,109 @@ export default function LayoutRenderer_FieldsWithOptions({
 
     if (!!breadcrumb.manyToManyRelInfo) isManyToManyPageRef.current = true
 
-    return { formJoins: breadcrumb.formJoins ?? [], formDataId: breadcrumb.formDataId ?? '' }
+    return {
+      formJoins: !!breadcrumb.manyToManyRelInfo ? [] : breadcrumb.formJoins ?? [],
+      formDataId: breadcrumb.formDataId ?? '',
+      detailPageFormId: breadcrumb.detailPageFormId,
+    }
   }, [breadcrumbs])
 
   const fetchFormData = useCallback(
-    async (selectedFormId: number, selectedFormField: string) => {
+    async (optionSource: IOptionSourceDynamicForm) => {
+      if (!optionSource.formId) {
+        setLoading(false)
+        return
+      }
+
       const filteredJoins = (parentRelInfo.formJoins as IFormJoin[])
-        .filter((j) => j.formId !== selectedFormId)
-        .map((j, jIdx) => (jIdx === 0 ? { ...j, localField: j.localField.replace(`${selectedFormId}.`, '') } : j))
+        .filter((j) => j.formId !== optionSource.formId)
+        .map((j, jIdx) => (jIdx === 0 ? { ...j, localField: j.localField.replace(`${optionSource.formId}.`, '') } : j))
       const lastJoin = filteredJoins.length ? filteredJoins[filteredJoins.length - 1] : null
 
+      const dynamicFormProjectOtherFields = [
+        'field1_RC',
+        'field2',
+        'field2_RC',
+        'field3',
+        'field3_RC',
+        'field4',
+        'field4_RC',
+      ].reduce(
+        (c, f) => ({
+          ...c,
+          [f]: f.endsWith('_RC') ? optionSource[f as IOTherField_RC] : `$${optionSource[f as IOtherField]}`,
+        }),
+        {},
+      )
       client
-        .post(`/api/report/data/${selectedFormId}`, {
+        .post(`/api/report/data/${optionSource.formId}`, {
           joins: filteredJoins,
           match: JSON.stringify(
             parentRelInfo.formDataId && !isManyToManyPageRef.current
               ? { DeletedDate: null, ...getIdEqualsQuery(lastJoin?.alias, parentRelInfo.formDataId) }
               : { DeletedDate: null },
           ),
-          project: JSON.stringify({ value: '$_id', label: `$Data.${selectedFormField}` }),
+          project: JSON.stringify({ value: '$_id', label: `$${optionSource.field}`, ...dynamicFormProjectOtherFields }),
         })
         .then((res) => {
           if (res.status === 200) {
             const { totalRecords, data } = res.data
-            if (totalRecords === 1) formRef?.setFieldValue(formItem.name, data[0]._id)
+            if (totalRecords === 1 && isNewFormDataPage(formDataId)) formRef?.setFieldValue(formItem.name, data[0]._id)
             setOptions(data)
           }
         })
         .finally(() => setLoading(false))
     },
-    [parentRelInfo, formId, formRef],
+    [parentRelInfo, formId, formRef, formDataId],
   )
 
-  const fetchLinkedFormData = useCallback((relationshipPath: IFilterByLinkedFormRelPath[] = []) => {
-    const lastPath = relationshipPath[relationshipPath.length - 1]
-
-    if (lastPath && lastPath.field) {
-      // parentInfo.formJoins is the DIRECT joins between the details page form and base form of the LoadFormData
-      const parentJoinOfLastPathIdx =
-        parentFormJoins?.findIndex((j) => j.localField.startsWith(lastPath.formId.toString())) ?? -1
-
-      if (parentJoinOfLastPathIdx > -1) {
-        const slicedJoinsForLastPath =
-          parentFormJoins
-            ?.slice(parentJoinOfLastPathIdx)
-            .map((j, jIdx) =>
-              jIdx === 0 ? { ...j, localField: j.localField.replace(`${lastPath.formId}.`, '') } : j,
-            ) ?? []
-
-        const lastJoin = slicedJoinsForLastPath.length
-          ? slicedJoinsForLastPath[slicedJoinsForLastPath.length - 1]
-          : null
-
-        client
-          .post(`/api/report/data/${lastPath.formId}`, {
-            joins: slicedJoinsForLastPath,
-            match: JSON.stringify(
-              formDataId && lastJoin && !isManyToManyPageRef.current
-                ? {
-                    ...getIdEqualsQuery(lastJoin.alias, formDataId),
-                    DeletedDate: null,
-                  }
-                : { DeletedDate: null },
-            ),
-            project: slicedJoinsForLastPath.length
-              ? JSON.stringify({ value: '$_id', label: `$Data.${lastPath.field}` })
-              : '',
-          })
-          .then((res) => {
-            if (res.status === 200) {
-              const { totalRecords, data } = res.data
-              if (totalRecords.length === 1) formRef?.setFieldValue(formItem.name, data[0]._id)
-              setOptions(data)
-            }
-          })
-          .finally(() => setLoading(false))
-      } else setLoading(false)
-    } else setLoading(false)
-  }, [])
+  const fetchLinkedFormData = useCallback(
+    (optionSource: IOptionSourceLinkedForm) => {
+      if (!optionSource.baseFormId) {
+        setLoading(false)
+        return
+      }
+
+      const { groupOtherFields, projectOtherFields } = getOtherFields(optionSource)
+
+      const groupFields: { [key: string]: string | { $first: any } } = {
+        _id: '$_id',
+        label: { $first: `$${optionSource.field}` },
+        ...groupOtherFields,
+      }
+
+      client
+        .post(`/api/report/data/${optionSource.baseFormId}`, {
+          joins: optionSource.joins,
+          match: JSON.stringify(
+            parentRelInfo.formDataId
+              ? { ...getIdEqualsQuery(parentRelInfo.detailPageFormId, parentRelInfo.formDataId), DeletedDate: null }
+              : { DeletedDate: null },
+          ),
+          group: JSON.stringify(groupFields),
+          project: JSON.stringify({ _id: 0, value: '$_id', label: 1, ...projectOtherFields }),
+        })
+        .then((res) => {
+          if (res.status === 200) {
+            const { totalRecords, data } = res.data
+            if (totalRecords.length === 1 && isNewFormDataPage(formDataId))
+              formRef?.setFieldValue(formItem.name, data[0]._id)
+
+            setOptions(data)
+          }
+        })
+        .finally(() => setLoading(false))
+    },
+    [parentRelInfo, formDataId, formId],
+  )
 
   const fetchDetailsStaticOptions = useCallback((optionSource: IOptionSourceReadFromDetails) => {
     const { formId, optionFieldPath } = optionSource
+    if (!formId) {
+      setLoading(false)
+      return
+    }
+
     client
       .post(
         `/api/form/${formId}`,
@@ -158,10 +187,10 @@ export default function LayoutRenderer_FieldsWithOptions({
     } else if (!inPreviewMode) {
       switch (props.optionSource.type) {
         case FieldElementOptionSourceEnum.DynamicForm:
-          fetchFormData(props.optionSource.form.id, props.optionSource.form.field)
+          fetchFormData(props.optionSource)
           return
         case FieldElementOptionSourceEnum.LinkedForm:
-          fetchLinkedFormData(props.filter.relationshipPath)
+          fetchLinkedFormData(props.optionSource)
 
           return
         case FieldElementOptionSourceEnum.ReadFromDetails:
@@ -182,11 +211,35 @@ export default function LayoutRenderer_FieldsWithOptions({
         fields={[
           {
             ...props,
+            label: (
+              <div className="flex items-center gap-2 w-full">
+                <span>{props.label}</span>
+                {props.optionSource?.formId &&
+                  selectedValue &&
+                  [FieldElementOptionSourceEnum.DynamicForm, FieldElementOptionSourceEnum.LinkedForm].includes(
+                    props.optionSource.type,
+                  ) && (
+                    <div
+                      className="px-2 text-primary font-bold text-12 hover:underline cursor-pointer"
+                      onClick={() => {
+                        const formInfo = getFormById(props.optionSource.formId)
+                        if (!formInfo) return
+
+                        push({ label: `${formInfo.name} details`, href: location.pathname })
+                        navigate(`${constructDynamicFormHref(formInfo.name)}/${selectedValue}`)
+                      }}
+                    >
+                      Go to Details
+                    </div>
+                  )}
+              </div>
+            ),
             type: elementData.elementType,
             name: formItem.name,
             validations: elementData.validations,
             options,
             disabled: isDisabled,
+            mode: props.optionSource.type === FieldElementOptionSourceEnum.Any ? 'tags' : undefined,
           },
         ]}
         formRef={formRef}
@@ -204,3 +257,31 @@ type ILayoutRenderer_FieldsWithOptions = {
   formContext: IFormContext
   elementData: ISelectElement | IRadioElement
 } & IElementBaseProps
+
+const getOtherFields = (optionSource: IOptionSourceLinkedForm | IOptionSourceLinkedForm) => {
+  const otherFields: {
+    field: IOtherField
+    rcField: IOTherField_RC
+  }[] = [
+    { field: 'field2', rcField: 'field2_RC' },
+    { field: 'field3', rcField: 'field3_RC' },
+    { field: 'field4', rcField: 'field4_RC' },
+  ]
+  const groupOtherFields: { [key: string]: string | { $first: any } } = {}
+  const projectOtherFields: { [key: string]: 1 } = {}
+  otherFields.forEach((otherField) => {
+    if (optionSource[otherField.field]) {
+      groupOtherFields[otherField.field] = { $first: `$${optionSource[otherField.field]}` }
+      projectOtherFields[otherField.field] = 1
+      if (optionSource[otherField.rcField]) {
+        groupOtherFields[otherField.rcField] = { $first: { $literal: optionSource[otherField.rcField] } }
+        projectOtherFields[otherField.rcField] = 1
+      }
+    }
+  })
+
+  return { groupOtherFields, projectOtherFields }
+}
+
+type IOtherField = 'field2' | 'field3' | 'field4'
+type IOTherField_RC = 'field1_RC' | 'field2_RC' | 'field3_RC' | 'field4_RC'

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

@@ -2,21 +2,22 @@ import { IElementBaseProps } from '.'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import FormDataListTableComponent, { IDataListLayoutConfig } from '../../1-list/table'
 import FormDataListSkeleton_Table from '../../../common/loading-skeletons/table'
-import { getIdEqualsQuery, getProjectionKey } from '../../../../functions'
-import { NEW_FORM_DATA_IDENTIFIER } from '../../../../constants'
+import { getIdEqualsQuery, getProjectionKey, isNewFormDataPage, mergeJoins } from '../../../../functions'
 import { cancelableClient } from '../../../../api/client'
 import { IFormContext } from '../1-row'
+import { FormRelationshipEnum } from '../../../../enums'
 import {
   IFormDataListData,
   IFormDataLoadElementProps,
   IFormJoin,
   IFormRelationshipConfig,
+  IFormRelationshipConfig_OneToMany,
   IFormSchema,
 } from '../../../../types'
 
 export default function LayoutRenderer_LoadFormData({ formContext, elementProps }: ILayoutRenderer_LoadFormData) {
   const { formId, formRef, formDataId } = formContext
-  const { joins, baseFormId, displayConfigFormId, displayConfigId } = elementProps
+  const { joins, baseFormId, m2mRelFormId, displayConfigId } = elementProps
   const lastChildInfo = useRef<{ formName: string; parentFormJoins: IFormJoin[] }>({
     formName: '',
     parentFormJoins: [],
@@ -27,6 +28,8 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
   const [dataList, setDataList] = useState<{ data: IFormDataListData[]; total: number }>({ data: [], total: 0 })
   const dataProjectRef = useRef<{ [key: string]: string }>({})
   const reportDataApiCancelFuncRef = useRef<() => void | undefined>(undefined)
+  const formJoinsRef = useRef<IFormJoin[]>([])
+  const m2mForeignKeysRef = useRef<{ currentForm: string; otherForm: string } | undefined>()
 
   const fetchDataList = useCallback(
     (headerAppliedFilters?: string) => {
@@ -37,7 +40,7 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
       if (headerAppliedFilters) matchFilters.push(JSON.parse(headerAppliedFilters))
 
       const { request, cancel } = cancelableClient.post(`/api/report/data/${baseFormId}`, {
-        joins,
+        joins: mergeJoins([joins, formJoinsRef.current]),
         match: matchFilters.length
           ? JSON.stringify(matchFilters.length === 1 ? matchFilters[0] : { $and: matchFilters })
           : '',
@@ -60,10 +63,10 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
   )
 
   useEffect(() => {
-    if (!displayConfigFormId || !formDataId || formDataId === NEW_FORM_DATA_IDENTIFIER) return
+    if (!baseFormId || isNewFormDataPage(formDataId)) return
 
     // fetching display config (base form can be different than display config form)
-    const { request, cancel } = cancelableClient.get(`/api/form/${displayConfigFormId}`)
+    const { request, cancel } = cancelableClient.get(`/api/form/${baseFormId}`)
     request.then((res) => {
       if (res.status === 200) {
         const parsedData: IFormSchema | null = JSON.parse(res.data.data)
@@ -73,31 +76,32 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
         const relationship: IFormRelationshipConfig | undefined = relationships.find((r: IFormRelationshipConfig) =>
           r.displayConfigs?.some((dc) => dc.id === displayConfigId),
         )
-        const displayConfig = relationship?.displayConfigs?.find((config) => config.id === displayConfigId)
+        const displayConfig = relationship?.displayConfigs?.find((dc) => dc.id === displayConfigId)
+
         if (!displayConfig || displayConfig.isRenderChildForm) return
 
-        const isManyToManyRelationship = displayConfigFormId !== baseFormId
+        if (relationship!.type === FormRelationshipEnum.OneToMany && relationship?.m2mTargetFormFK)
+          m2mForeignKeysRef.current = {
+            currentForm: relationship!.foreignKey,
+            otherForm: (relationship as IFormRelationshipConfig_OneToMany)!.m2mTargetFormFK!,
+          }
+
         lastChildInfo.current = { formName: res.data.name, parentFormJoins: joins }
 
         if (displayConfig.config) {
+          formJoinsRef.current = mergeJoins([
+            ...displayConfig.config.columns.map((c) => c.joins),
+            ...Object.values(displayConfig.config.header.elements).reduce((c: IFormJoin[], el) => {
+              if (el.props && 'filter' in el.props && Array.isArray(el.props.filter?.joins)) {
+                return [...c, el.props.filter.joins]
+              }
+              return c
+            }, []),
+          ])
           if (Array.isArray(displayConfig.config.columns))
             dataProjectRef.current = displayConfig.config.columns.reduce((curr, c) => {
               if (!c.key) return curr
 
-              if (isManyToManyRelationship) {
-                // if the key starts with id, it means it's reading a field from other form joins that are already configured
-                // example: form id 145 one-to-many 145 many-to-many 146, and 149 is the rel form.
-                // the base form is 149, joined 145 (displayConfigFormId below) and 146. In this case, to read fields from 145, it appends 145 at front to make it 145.Data{...}
-                // However, to display data from 144, we can't append 145, whose keys already come with 144.Data.{...}. That's why it's checking if it starts with number or not
-                return {
-                  ...curr,
-                  [getProjectionKey(c.key)]: c.key.match(/^\d/) ? `$${c.key}` : `$${displayConfigFormId}.${c.key}`,
-                  // [getProjectionKey(c.key)]: `$${c.key}`,
-                  relDataId: '$_id',
-                  _id: `$${displayConfigFormId}._id`,
-                }
-              }
-
               return { ...curr, [getProjectionKey(c.key)]: `$${c.key}` }
             }, {})
 
@@ -118,25 +122,28 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
       cancel()
       reportDataApiCancelFuncRef.current?.()
     }
-  }, [displayConfigFormId, baseFormId, displayConfigId, formDataId, fetchDataList])
+  }, [baseFormId, displayConfigId, formDataId, fetchDataList])
 
   const dataListHeaderContext = {
+    detailPageFormId: formId,
     formId: baseFormId,
     formDataId,
     formRef,
     ...lastChildInfo.current,
     manyToManyRelInfo:
-      displayConfigFormId !== baseFormId && formId
+      m2mRelFormId && m2mRelFormId !== baseFormId && formId
         ? {
-            middleFormId: baseFormId,
+            middleFormId: m2mRelFormId,
             currentFormId: formId,
-            otherFormId: displayConfigFormId,
+            otherFormId: baseFormId,
+            currentFormFK: m2mForeignKeysRef.current?.currentForm,
+            otherFormFK: m2mForeignKeysRef.current?.otherForm,
           }
         : null,
     onCustomFunctionCall: () => {},
   }
 
-  if (!joins || !Array.isArray(joins) || formDataId === NEW_FORM_DATA_IDENTIFIER) return <></>
+  if (!joins || !Array.isArray(joins) || isNewFormDataPage(formDataId)) return <></>
 
   return (
     <FormDataListTableComponent

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

@@ -177,6 +177,9 @@ function LayoutRendererElement({
     case ElementTypeEnum.Breadcrumb:
       return <LayoutRenderer_Breadcrumb />
 
+    case ElementTypeEnum.Placeholder:
+      return <div />
+
     default:
       return (
         <LayoutRenderer_FieldElement

package/src/components/index.tsx

@@ -6,3 +6,5 @@ export * from './form/3-preview'
 export * from './common/button'
 export * from './report/1-list'
 export * from './companies'
+export * from './common/countdown'
+export * from './modals/pdf-preview.modal'

package/src/components/modals/pdf-preview.modal.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import { Document, Page, pdfjs } from 'react-pdf'
+// import 'react-pdf/dist/Page/AnnotationLayer.css'
+// import 'react-pdf/dist/Page/TextLayer.css'
+
+interface PdfViewerProps {
+  fileUrl: string // could be a URL or Blob URL
+  initialPage?: number
+}
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`
+
+export const PdfViewerModal: React.FC<PdfViewerProps> = ({ fileUrl, initialPage = 1 }) => {
+  const [numPages, setNumPages] = useState<number>(0)
+  const [pageNumber] = useState<number>(initialPage)
+
+  const onDocumentLoadSuccess = (pdf: { numPages: number; [key: string]: any }) => {
+    setNumPages(pdf.numPages)
+  }
+
+  return (
+    <div className="flex justify-center bg-background py-4">
+      <Document
+        className="w-max"
+        file={fileUrl}
+        onLoadSuccess={onDocumentLoadSuccess}
+        loading="Loading document…"
+        noData="No file specified"
+      >
+        {Array.from(new Array(numPages), (_, index) => (
+          <Page
+            key={`page_${index + 1}`}
+            pageNumber={pageNumber}
+            renderTextLayer={false}
+            renderAnnotationLayer={false}
+          />
+        ))}
+      </Document>
+    </div>
+  )
+}

package/src/constants.ts

@@ -27,6 +27,7 @@ export const DEVICE_BREAKPOINTS = {
   [DeviceBreakpointEnum.TabletPortrait]: '768px',
   [DeviceBreakpointEnum.TabletLandscape]: '992px',
   [DeviceBreakpointEnum.Laptop]: '1200px',
+  [DeviceBreakpointEnum.LaptopLarge]: '1440px',
   [DeviceBreakpointEnum.Default]: 'auto',
 } as const
 export const REPORT_EMPTY_CELL_CONTENT = '-'

package/src/enums/form.enum.ts

@@ -42,8 +42,9 @@ export enum DataRenderTypeEnum {
   // string enum for readability
   Default = 'Default',
   Number = 'Number',
-  NumberInWords = 'NumberInWords',
+  // NumberInWords = 'NumberInWords',
   Currency = 'Currency',
+  Tags = 'Tags',
   Image = 'Image',
   // PhoneNumber = 'PhoneNumber',
   Date = 'Date',
@@ -67,6 +68,7 @@ export enum ButtonElementSizeEnum {
   // Large = 'large',
 }
 export enum FieldElementOptionSourceEnum {
+  Any = 'Any',
   Static = 'Static',
   ReadFromDetails = 'ReadFromDetails',
   DynamicForm = 'DynamicForm',
@@ -112,15 +114,14 @@ export enum JustifyAndAlignContent {
 export enum FilterConfigTypeEnum {
   NoFilter = 'NoFilter',
   Custom = 'Custom',
-  ByAuthUser = 'ByAuthUser',
-  ByLinkedForm = 'ByLinkedForm',
 }
 export enum DeviceBreakpointEnum {
   Default = 'default',
-  Laptop = 'xl',
-  TabletLandscape = 'lg',
-  TabletPortrait = 'md',
-  Mobile = 'sm',
+  LaptopLarge = 'xl',
+  Laptop = 'lg',
+  TabletLandscape = 'md',
+  TabletPortrait = 'sm',
+  Mobile = 'xs',
 }
 export enum FormLoadingModalTypeEnum {
   GeneratingPdf = 1,

package/src/enums/index.ts

@@ -18,6 +18,7 @@ export enum ElementTypeEnum {
   Switch = 'Switch',
   Password = 'Password',
   Container = 'Container',
+  Placeholder = 'Placeholder',
   RichTextEditor = 'RichTextEditor',
   ReportTable = 'ReportTable',
   FormTable = 'FormTable',

package/src/functions/forms/conditional-rule-validator.ts

@@ -68,6 +68,8 @@ export const validateConditions = (validations: IConditionalValidation_Field[],
         return typeof fieldValue === 'string' && emailRegex.test(fieldValue)
 
       case FieldValidationEnum.StrictlyEquals:
+        if (value === undefined) return [null, undefined, ''].includes(fieldValue) // equals no value
+
         return fieldValue === value
 
       default:

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

@@ -7,7 +7,6 @@ import { INTERNATIONALIZATION_DATA } from '../../constants'
 import { evaluateCondition } from './evaluate-condition'
 import { ReactNode } from 'react'
 import { IDataListHeaderLayoutContext } from '../../components/form/1-list/table'
-import { convertIntegerToWords } from './convert-number-into-words'
 import {
   IDataRender_Buttons,
   IDataRender_Conditional,
@@ -21,12 +20,11 @@ import {
   IFormDataTableColumn,
 } from '../../types'
 
-export const generateTableColumns = (
+export const renderTableColumns = (
   elements: IFormDataListColumn[],
   contextValues: IDataListHeaderLayoutContext = {},
 ) => {
   const { attachmentBaseUrl } = contextValues
-
   return elements.map((el) => {
     const col: IFormDataTableColumn = {
       ...el,
@@ -96,17 +94,22 @@ export const generateTableColumns = (
 }
 
 export const renderData = (data?: any, renderConfig?: IDataRenderConfig): ReactNode => {
-  if ([null, undefined, ''].includes(data) || typeof data === 'object' || !renderConfig) return 'N/A'
+  if (
+    [null, undefined, ''].includes(data) ||
+    !renderConfig ||
+    (typeof data === 'object' && renderConfig.type !== DataRenderTypeEnum.Tags)
+  )
+    return '-'
 
   switch (renderConfig.type) {
     case DataRenderTypeEnum.Date:
       return renderDateData(data, renderConfig)
     case DataRenderTypeEnum.Number:
       return renderNumberData(Number(data), renderConfig)
-    case DataRenderTypeEnum.NumberInWords:
-      return convertIntegerToWords(Number(data))
     case DataRenderTypeEnum.Currency:
       return renderCurrencyData(Number(data), renderConfig)
+    case DataRenderTypeEnum.Tags:
+      return renderTags(data)
     case DataRenderTypeEnum.Image:
       return renderImageData(data, renderConfig)
     // case DataRenderTypeEnum.PhoneNumber:
@@ -165,6 +168,18 @@ const renderImageData = (imgFullUrl: string, renderConfig: IDataRender_Image) =>
   return <Image src={imgFullUrl} alt={alt} style={style} preview={{ maskClassName: 'rounded' }} />
 }
 
+const renderTags = (data: string[]) => {
+  if (!Array.isArray(data)) return '-'
+
+  return (
+    <div className="flex flex-wrap gap-x-2 gap-y-1">
+      {data.map((str) => (
+        <span className="bg-gray-200 px-2 rounded-lg text-[11px]">{str}</span>
+      ))}
+    </div>
+  )
+}
+
 // export const renderPhoneData = (data: string = '', country: CountryEnum = CountryEnum.US) => {
 //   const format = INTERNATIONALIZATION_DATA[country].phoneFormat
 //   if (!format) return 'N/A'

package/src/functions/forms/get-data-list-option-value.ts

@@ -48,14 +48,14 @@ export async function processOptions(options: IFormDataListColumn[]): Promise<{
           })
         }
       } else if (optionSource.type === FieldElementOptionSourceEnum.DynamicForm) {
-        const { form = {} } = optionSource
+        const { formId, field } = optionSource
 
         dynamicApiPromises.push(
-          fetchFormDataAsLookup(form.id).then((dynamicDataList) => {
+          fetchFormDataAsLookup(formId).then((dynamicDataList) => {
             dynamicDataList.forEach((dynamicData) => {
               const parsedData = JSON.parse(dynamicData.data)
 
-              finalResult[dynamicData.id] = parsedData[form.field]
+              finalResult[dynamicData.id] = parsedData[field]
             })
           }),
         )