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

package/index.ts

@@ -1,3 +1,5 @@
+import client from './src/api/client'
+
 export * from './src/enums'
 export * from './src/types'
 export * from './src/constants'
@@ -5,4 +7,5 @@ export * from './src/functions'
 export * from './src/components'
 export * from './src/components/common/custom-hooks'
 export * from './src/api/client'
-export * from './src/api/user'
+export * from './src/api/user'
+export { client }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.7.9-dev.2",
+  "version": "1.7.10-dev.0",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -11,13 +11,11 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@types/react-google-recaptcha": "^2.1.9",
-    "@types/react-signature-canvas": "^1.0.7",
     "ajv": "^8.17.1",
-    "bson": "^4.7.2",
     "pdfmake": "^0.2.18",
     "qs": "^6.14.0",
     "react-google-recaptcha": "^3.1.0",
+    "react-pdf": "^9.2.1",
     "react-signature-canvas": "^1.0.7"
   },
   "peerDependencies": {
@@ -39,6 +37,8 @@
     "@types/qs": "^6.9.18",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@types/react-google-recaptcha": "^2.1.9",
+    "@types/react-signature-canvas": "^1.0.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "ts-node": "^10.9.2",

package/src/api/client.ts

@@ -7,6 +7,7 @@ import { LOCAL_STORAGE_KEYS_ENUM, SHARED_COOKIE_KEYS } from '../enums'
 import { IDynamicForm } from '../types'
 import { constructDynamicFormHref, fetchDynamicForms } from '../functions'
 import { CLIENT_ID, CLIENT_SECRET } from '../constants'
+import { breadcrumbStore } from '../components/common/custom-hooks/use-breadcrumb.hook'
 
 const baseURL = import.meta.env.VITE_API_BASE_URL
 
@@ -70,6 +71,15 @@ const auth = async (
       if (!loginAuthRes.data.required2FA || type === 'refresh_token') {
         Cookies.set(SHARED_COOKIE_KEYS.Authorized, 'true')
         forms = await fetchDynamicForms()
+
+        breadcrumbStore.reset()
+        if (forms.length) {
+          const firstForm = forms[0]
+          const splittedFormName = firstForm.name.split(' ')?.[0] ?? ''
+
+          breadcrumbStore.push({ label: splittedFormName, href: constructDynamicFormHref(firstForm.name) })
+        }
+
         localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms, JSON.stringify(forms))
         localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.Domain, domain)
       }

package/src/components/common/countdown.tsx

@@ -0,0 +1,44 @@
+import { useState, useEffect, useRef } from 'react'
+
+export default function Countdown_FillerPortal({ initialSeconds, label = '', onComplete }: Countdown_FillerPortal) {
+  const [secondsLeft, setSecondsLeft] = useState(initialSeconds)
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    intervalRef.current = setInterval(() => {
+      setSecondsLeft((prev) => {
+        if (prev <= 1) {
+          clearInterval(intervalRef.current!)
+          onComplete()
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current)
+    }
+  }, [onComplete])
+
+  const formatTime = (secs: number) => {
+    const minutes = Math.floor(secs / 60)
+    const seconds = secs % 60
+    const minutesString = String(minutes).padStart(2, '0')
+    const secondsString = String(seconds)
+
+    return `${minutes > 0 ? `${minutesString}:` : ''}${secondsString}`
+  }
+
+  return (
+    <div className="flex items-center gap-1 text-gray-400 text-[13px] italic">
+      {label} {formatTime(secondsLeft)} sec
+    </div>
+  )
+}
+
+interface Countdown_FillerPortal {
+  initialSeconds: number
+  label?: string
+  onComplete: () => void
+}

package/src/components/common/custom-hooks/index.ts

@@ -1,3 +1,5 @@
 export * from './use-find-dynamic-form.hook'
 export * from './use-notification.hook'
 export * from './use-lazy-modal-opener.hook'
+export * from './use-breadcrumb.hook'
+export * from './use-dayjs-extender.hook'

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

@@ -31,6 +31,17 @@ function handlePopState() {
   const idx = crumbs.findIndex((c) => c.href === href)
   breadcrumbStore.sliceAt(idx >= 0 ? idx : 0)
 }
+function dedupeAdjacentCrumbs(crumbs: IBreadcrumb[]): IBreadcrumb[] {
+  if (crumbs.length === 0) return []
+
+  const result: IBreadcrumb[] = [crumbs[0]]
+  for (let i = 1; i < crumbs.length; i++) {
+    if (crumbs[i].href !== crumbs[i - 1].href) {
+      result.push(crumbs[i])
+    }
+  }
+  return result
+}
 
 if (typeof window !== 'undefined') {
   window.addEventListener('popstate', handlePopState)
@@ -50,6 +61,8 @@ export const breadcrumbStore = {
     if (last?.href.endsWith(NEW_FORM_DATA_IDENTIFIER)) crumbs = [...crumbs.slice(0, -1), c]
     else crumbs = [...crumbs, c]
 
+    crumbs = dedupeAdjacentCrumbs(crumbs)
+
     saveToStorage()
     notify()
   },
@@ -63,6 +76,8 @@ export const breadcrumbStore = {
       return c
     })
 
+    crumbs = dedupeAdjacentCrumbs(crumbs)
+
     if (changed) {
       saveToStorage()
       notify()
@@ -70,6 +85,9 @@ export const breadcrumbStore = {
   },
   sliceAt: (i: number) => {
     crumbs = crumbs.slice(0, i + 1)
+
+    crumbs = dedupeAdjacentCrumbs(crumbs)
+
     saveToStorage()
     notify()
   },

package/src/components/common/custom-hooks/use-check-element-conditions.hook.ts

@@ -3,9 +3,10 @@ import { useEffect, useState } from 'react'
 import { IConditionalValidation_Field, IFormLayoutElementConditions } from '../../../types'
 import { DeviceBreakpointEnum, FormElementConditionalKeyEnum, FormStateEnum } from '../../../enums'
 import { getValidationConfigs, validateConditions } from '../../../functions/forms/conditional-rule-validator'
-import { NEW_FORM_DATA_IDENTIFIER } from '../../../constants'
 import useGetCurrentBreakpoint from './use-window-width.hook'
 import { IFormContext } from '../../form/layout-renderer/1-row'
+import { isNewFormDataPage } from '../../../functions'
+import { NEW_FORM_DATA_IDENTIFIER } from '../../../constants'
 
 export const useCheckElementConditions = ({
   formRef,
@@ -71,7 +72,7 @@ const isValidationsMet = (
   // Dependent on data id
   const isDataIdConditionsMet = hasDataIdValidation
     ? hasDataIdValidation.state === FormStateEnum.New
-      ? !contextValues.formDataId || contextValues.formDataId === NEW_FORM_DATA_IDENTIFIER
+      ? isNewFormDataPage(contextValues.formDataId)
       : contextValues.formDataId !== NEW_FORM_DATA_IDENTIFIER
     : true
 

package/src/components/common/custom-hooks/use-dayjs-extender.hook.ts

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+import localeData from 'dayjs/plugin/localeData'
+import weekday from 'dayjs/plugin/weekday'
+
+dayjs.extend(localeData)
+dayjs.extend(weekday)
+
+export const useDayjsExtender = () => {}

package/src/components/common/custom-hooks/use-many-to-many-connector.hook.ts

@@ -1,7 +1,6 @@
 import { useEffect, useMemo } from 'react'
 import { useBreadcrumb } from './use-breadcrumb.hook'
 import { FormInstance } from 'antd'
-import { getForeignKeysFromBreadcrumb } from '../../../functions/forms/breadcrumb-handlers'
 
 export const useManyToManyConnector = (formRef: FormInstance) => {
   const { breadcrumbs } = useBreadcrumb()
@@ -21,9 +20,9 @@ export const useManyToManyConnector = (formRef: FormInstance) => {
   useEffect(() => {
     if (!prevPageBreadcrumb) return
 
-    const { foreignKey, foreignKey2 } = getForeignKeysFromBreadcrumb(prevPageBreadcrumb)
+    const { currentFormFK, otherFormFK } = prevPageBreadcrumb.manyToManyRelInfo
 
-    if (foreignKey && foreignKey2) formRef.setFieldValue(foreignKey, prevPageBreadcrumb.formDataId)
+    if (currentFormFK && otherFormFK) formRef.setFieldValue(otherFormFK, prevPageBreadcrumb.formDataId)
   }, [prevPageBreadcrumb, formRef])
 
   return

package/src/components/common/custom-hooks/use-notification.hook.tsx

@@ -2,7 +2,7 @@ import React, { createContext, ReactNode, useContext } from 'react'
 import { Modal, notification, NotificationArgsProps } from 'antd'
 
 type ModalOptions = {
-  title?: string
+  title?: ReactNode
   content?: React.ReactNode
   okText?: string
   cancelText?: string

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

@@ -15,15 +15,17 @@ const useGetCurrentBreakpoint = (): DeviceBreakpointEnum => {
 
   if (!width) return DeviceBreakpointEnum.Default
 
-  if (width < parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.Mobile])) return DeviceBreakpointEnum.Mobile
+  if (width <= parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.Mobile])) return DeviceBreakpointEnum.Mobile
 
-  if (width < parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.TabletPortrait]))
+  if (width <= parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.TabletPortrait]))
     return DeviceBreakpointEnum.TabletPortrait
 
-  if (width < parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.TabletLandscape]))
+  if (width <= parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.TabletLandscape]))
     return DeviceBreakpointEnum.TabletLandscape
 
-  if (width < parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.Laptop])) return DeviceBreakpointEnum.Laptop
+  if (width <= parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.Laptop])) return DeviceBreakpointEnum.Laptop
+
+  if (width <= parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.LaptopLarge])) return DeviceBreakpointEnum.LaptopLarge
 
   return DeviceBreakpointEnum.Default
 }

package/src/components/common/loading-skeletons/details.tsx

@@ -1,11 +1,66 @@
-import { Spin } from 'antd'
+import { Col, Row, Spin } from 'antd'
+import SkeletonBlock from '.'
+import SectionPanel from '../section-panel'
 
 export default function FormDataListSkeleton_Details() {
   return (
-    <div className="p-3">
-      <div className="text-primary italic h-[300px] text-30 rounded-md bg-white flex items-center justify-center gap-2">
-        <Spin size="large" /> Loading data...
-      </div>
-    </div>
+    <Row justify="center" className="mt-10">
+      <Col sm={24} lg={18} xl={14} xxl={12}>
+        <SectionPanel
+          className="border"
+          header={{
+            title: (
+              <div className="flex items-center gap-2 p-3">
+                <SkeletonBlock width="150px" />
+                <SkeletonBlock width={32} height={32} radius={10} />
+              </div>
+            ),
+            action: (
+              <div className="pr-3">
+                <SkeletonBlock width="150px" />
+              </div>
+            ),
+          }}
+        >
+          <div className="p-3 border-t space-y-4">
+            <Row gutter={[20, 0]}>
+              <Col span={12}>{field}</Col>
+              <Col span={12}>{field}</Col>
+            </Row>
+            <Row gutter={[20, 0]}>
+              <Col span={12}>{field}</Col>
+              <Col span={12}>{field}</Col>
+            </Row>
+            <div className="flex items-center justify-center gap-2 text-16 italic text-primary my-2">
+              <Spin  /> Loading layout & fetching data..
+            </div>
+            <Row gutter={[20, 0]}>
+              <Col span={12}>{field}</Col>
+              <Col span={12}>{field}</Col>
+            </Row>
+            <Row gutter={[20, 0]}>
+              <Col span={8}>{field}</Col>
+              <Col span={8}>{field}</Col>
+              <Col span={8}>{field}</Col>
+            </Row>
+            <Row gutter={[20, 0]}>
+              <Col span={8}>{field}</Col>
+              <Col span={8}>{field}</Col>
+              <Col span={8}>{field}</Col>
+            </Row>
+            <div className="flex justify-end">
+              <SkeletonBlock width={200} />
+            </div>
+          </div>
+        </SectionPanel>
+      </Col>
+    </Row>
   )
 }
+
+const field = (
+  <div className="flex flex-col gap-1">
+    <SkeletonBlock width={80} height={14} />
+    <SkeletonBlock width="100%" />
+  </div>
+)

package/src/components/common/loading-skeletons/index.tsx

@@ -1,3 +1,11 @@
-export default function SkeletonBlock({ height = 32, width = '100%' }: { height?: number; width?: number | string }) {
-  return <div style={{ height, width }} className="skeleton-loader" />
+export default function SkeletonBlock({
+  height = 32,
+  width = '100%',
+  radius = 4,
+}: {
+  height?: number
+  width?: number | string
+  radius?: number | string
+}) {
+  return <div style={{ height, width, borderRadius: radius }} className="skeleton-loader " />
 }

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

@@ -4,26 +4,20 @@ import FormDataListSkeleton_Table from '../../common/loading-skeletons/table'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListTableComponent, { IDataListLayoutConfig } from './table'
 import { IFormJoin, IFormDataListData, IFormDataListConfig } from '../../../types'
-import { getProjectionKey } from '../../../functions'
-
-function FormDataListComponent({
-  formId,
-  userId,
-  companyKey,
-  baseServerUrl,
-  onCustomFunctionCall,
-}: IFormDataListComponent) {
+import { getProjectionKey, mergeJoins } from '../../../functions'
+
+function FormDataListComponent({ formId, companyKey, baseServerUrl, onCustomFunctionCall }: IFormDataListComponent) {
   const [loadings, setLoadings] = useState({ initial: true, data: true })
   const [dataList, setDataList] = useState<{ data: IFormDataListData[]; total: number }>({ data: [], total: 0 })
   const [listLayoutConfig, setListLayoutConfig] = useState<IDataListLayoutConfig>()
 
-  const reportDataApiCancelFuncRef = useRef<() => void | undefined>(undefined)
+  const reportDataApiCancelFuncRef = useRef<() => void | undefined>()
   const dataProjectRef = useRef<{ [key: string]: string }>({})
   const formJoinsRef = useRef<IFormJoin[]>([])
-  const defaultFilterReqDataRef = useRef<IDataListReqData | undefined>(undefined)
+  const defaultFilterReqDataRef = useRef<IDataListReqData | undefined>()
 
   const attachmentBaseUrl = useMemo(() => `${baseServerUrl}/api/attachment/${companyKey}`, [baseServerUrl, companyKey])
-  const headerLayoutContext = { formId, userId, attachmentBaseUrl, companyKey, onCustomFunctionCall }
+  const headerLayoutContext = { formId, attachmentBaseUrl, companyKey, onCustomFunctionCall }
 
   useEffect(() => {
     setLoadings({ initial: true, data: true })
@@ -41,14 +35,24 @@ function FormDataListComponent({
     request.then(async (res) => {
       if (res.status === 200) {
         const dataListConfig: IFormDataListConfig = res.data.Data.dataListConfig
-        const { columns, formJoins, pagination, defaultFilter, defaultSorter } = dataListConfig
+        const { columns, pagination, defaultFilter, defaultSorter, header } = dataListConfig
 
         if (Array.isArray(columns))
           dataProjectRef.current = columns.reduce(
             (curr, c) => (c.key ? { ...curr, [getProjectionKey(c.key)]: `$${c.key}` } : curr),
             {},
           )
-        if (Array.isArray(formJoins)) formJoinsRef.current = formJoins
+
+        if (Array.isArray(columns))
+          formJoinsRef.current = mergeJoins([
+            ...columns.map((c) => c.joins),
+            ...Object.values(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
+            }, []),
+          ])
 
         const defaultReqData: IDataListReqData = {}
         if (!pagination?.hasNoPagination) {
@@ -96,8 +100,13 @@ function FormDataListComponent({
 
       const { request, cancel } = cancelableClient.post(`/api/report/data/${formId}`, {
         joins: formJoinsRef.current,
-        ...restReqData,
+        // group: JSON.stringify({
+        //   _id: '$_id',
+        //   ...Object.entries(dataProjectRef.current).reduce((c, n) => ({ ...c, [n[0]]: { $first: n[1] } }), {}),
+        // }),
+        // project: JSON.stringify(Object.keys(dataProjectRef.current).reduce((c, n) => ({ ...c, [n]: 1 }), {})),
         project: JSON.stringify(dataProjectRef.current),
+        ...restReqData,
       })
       reportDataApiCancelFuncRef.current = cancel
 
@@ -105,7 +114,10 @@ function FormDataListComponent({
         .then((res) => {
           if (res.status === 200) setDataList({ data: res.data.data, total: res.data.totalRecords })
         })
-        .finally(() => setLoadings({ initial: false, data: false }))
+        .finally(() => {
+          setLoadings({ initial: false, data: false })
+          reportDataApiCancelFuncRef.current = undefined
+        })
     },
     [formId],
   )
@@ -115,6 +127,10 @@ function FormDataListComponent({
       layoutsConfigs={listLayoutConfig}
       dataList={dataList}
       updateDataList={(reqData) => {
+        if (reportDataApiCancelFuncRef.current)
+          // prev request
+          reportDataApiCancelFuncRef.current()
+
         fetchFormDataList(reqData)
       }}
       parentLoadings={loadings}
@@ -130,7 +146,6 @@ type IFormDataListComponent = {
   baseServerUrl?: string
   companyKey?: string
   formId?: number
-  userId: string | number
 } & ICustomFunctionCall
 
 export interface IDataListReqData {

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

@@ -1,16 +1,15 @@
 import { Form } from 'antd'
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
-import { extractFiltersFromLayout, getIdEqualsQuery } from '../../../functions/forms'
+import { extractFiltersFromLayout } from '../../../functions/forms'
 import { DeviceBreakpointEnum, FilterConfigTypeEnum, FormPreservedItemKeys } from '../../../enums'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
-import { VALUE_REPLACEMENT_PLACEHOLDER } from '../../../constants'
+import { BSON_DATA_IDENTIFIER_PREFIXES, VALUE_REPLACEMENT_PLACEHOLDER } from '../../../constants'
 import { DynamicFormButtonRender } from '../layout-renderer/3-element/1-dynamic-button'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import { IDataListHeaderLayoutContext } from './table'
 import {
   IDndLayoutStructure_Responsive,
-  IFilterByAuthUser,
   IFilterConfig,
   IFilterCustom,
   IFilterNested,
@@ -20,13 +19,13 @@ import {
 export default function FormDataListHeaderComponent({
   layoutConfig,
   titleComponent,
-  startLoading,
   updateDynamicFilter,
   headerLayoutContext,
 }: IFormDataListHeaderComponent) {
   const [filtersFormRef] = Form.useForm()
   const [filterConfigs, setFilterConfigs] = useState<IFilterNested>({})
-  const { userId, formId, parentFormJoins, formDataId, manyToManyRelInfo, onCustomFunctionCall } = headerLayoutContext
+  const { formId, detailPageFormId, parentFormJoins, formDataId, manyToManyRelInfo, onCustomFunctionCall } =
+    headerLayoutContext
   const isInitialFetchRef = useRef(true)
 
   const currentBreakpoint = useGetCurrentBreakpoint()
@@ -36,11 +35,11 @@ export default function FormDataListHeaderComponent({
   }, [layoutConfig])
 
   const dndLayout = useMemo(() => {
-    const breakpoint = currentBreakpoint || DeviceBreakpointEnum.Default
+    const breakpoint = currentBreakpoint
 
-    if (!layoutConfig || !layoutConfig.layouts[breakpoint]) return []
+    if (!layoutConfig || !layoutConfig.layouts) return []
 
-    return layoutConfig.layouts[breakpoint]
+    return layoutConfig.layouts[breakpoint] ?? layoutConfig.layouts[DeviceBreakpointEnum.Default] ?? []
   }, [layoutConfig, currentBreakpoint])
 
   const filterValues = Form.useWatch([], filtersFormRef)
@@ -62,33 +61,23 @@ export default function FormDataListHeaderComponent({
           const config = filterConfigs[field]
 
           if ('type' in config) {
-            if (config.type === FilterConfigTypeEnum.ByLinkedForm) startLoading()
-
-            const filterData = await handleFilterValues(config as IFilterConfig, value, { userId })
-            if (filterData) filtersToApply.push(filterData)
+            const stringifiedFilter = await handleFilterValues(config as IFilterConfig, value)
+            if (stringifiedFilter) filtersToApply.push(stringifiedFilter)
           } else {
             // cases like radio buttons, where each has its own filter, but only 1 needs to apply
             const nestedConfig = config as IFilterSimple
             const eachConfig = nestedConfig[value as string]
 
-            if (eachConfig.type === FilterConfigTypeEnum.ByLinkedForm) startLoading()
-
-            const filterData = await handleFilterValues(eachConfig as IFilterConfig, value, { userId })
-            if (filterData) filtersToApply.push(filterData)
+            const stringifiedFilter = await handleFilterValues(eachConfig as IFilterConfig, value)
+            if (stringifiedFilter) filtersToApply.push(stringifiedFilter)
           }
         }
 
-        const { dynamicFilters } = filtersToApply.reduce(
-          (curr: { customFilter: { [key: string]: any }; dynamicFilters: { [key: string]: any }[] }, next) => {
-            if (!next) return curr
-            const parsedDFilter = JSON.parse(next.dynamicFilter)
-            return {
-              customFilter: { ...curr.customFilter, ...next.customFilter },
-              dynamicFilters: [...curr.dynamicFilters, parsedDFilter],
-            }
-          },
-          { customFilter: {}, dynamicFilters: [] },
-        )
+        const dynamicFilters = filtersToApply.reduce((curr: { [key: string]: any }[], next) => {
+          if (!next) return curr
+          const parsedDFilter = JSON.parse(next)
+          return [...curr, parsedDFilter]
+        }, [])
 
         const updatedDynamicFilter = JSON.stringify(
           dynamicFilters.length === 1 ? dynamicFilters[0] : { $and: dynamicFilters },
@@ -108,8 +97,8 @@ export default function FormDataListHeaderComponent({
   }, [filterValues])
 
   const formContext = useMemo(
-    () => ({ formRef: filtersFormRef, formId, formDataId, parentFormJoins, manyToManyRelInfo }),
-    [filtersFormRef, formId, formDataId, parentFormJoins, manyToManyRelInfo],
+    () => ({ formRef: filtersFormRef, detailPageFormId, formId, formDataId, parentFormJoins, manyToManyRelInfo }),
+    [filtersFormRef, formId, detailPageFormId, formDataId, parentFormJoins, manyToManyRelInfo],
   )
 
   return (
@@ -138,41 +127,26 @@ type IFormDataListHeaderComponent = {
   layoutConfig?: IDndLayoutStructure_Responsive
   updateDynamicFilter: (match?: string) => void
   titleComponent?: ReactNode
-  startLoading: () => void
   headerLayoutContext: IDataListHeaderLayoutContext
 }
 
-const handleFilterValues = async (
-  config: IFilterConfig,
-  value: any,
-  contextValues: { userId?: string | number; isDateFilter?: boolean },
-) => {
+const handleFilterValues = async (config: IFilterConfig, value: any) => {
   if (config.type === FilterConfigTypeEnum.NoFilter) return null
-  const { userId } = contextValues
 
-  if ((config as IFilterCustom).isDateFilter) value = dayjs(value as Date).toISOString()
-
-  let customFilters = {}
-  if (config.type === FilterConfigTypeEnum.ByAuthUser) customFilters = { createdById: userId }
+  if ((config as IFilterCustom).bsonDataType === BSON_DATA_IDENTIFIER_PREFIXES.Date) {
+    value = { $date: dayjs(value as Date).toISOString() }
+  } else if ((config as IFilterCustom).bsonDataType === BSON_DATA_IDENTIFIER_PREFIXES.Number) {
+    value = { $numberDecimal: value }
+  } else if ((config as IFilterCustom).bsonDataType === BSON_DATA_IDENTIFIER_PREFIXES.ObjectId) {
+    value = { $oid: value }
+  }
 
-  if (
-    [FilterConfigTypeEnum.ByAuthUser, FilterConfigTypeEnum.Custom].includes(config.type) &&
-    (config as IFilterByAuthUser | IFilterCustom).config
-  ) {
-    let stringifiedFilter = JSON.stringify((config as IFilterByAuthUser | IFilterCustom).config)
+  if (config.type === FilterConfigTypeEnum.Custom && (config as IFilterCustom).config) {
+    let stringifiedFilter = JSON.stringify((config as IFilterCustom).config)
     stringifiedFilter = stringifiedFilter
       .replaceAll(VALUE_REPLACEMENT_PLACEHOLDER, (value as string).trim())
       .replaceAll('@', '$')
 
-    return { customFilter: customFilters, dynamicFilter: stringifiedFilter }
-  }
-
-  if (config.type === FilterConfigTypeEnum.ByLinkedForm && value) {
-    const lastRel = config.relationshipPath[config.relationshipPath.length - 1]
-
-    return {
-      customFilter: {},
-      dynamicFilter: JSON.stringify(getIdEqualsQuery(lastRel.formId, value)),
-    }
+    return stringifiedFilter
   }
 }

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

@@ -4,7 +4,7 @@ import useDebounced from '../../common/custom-hooks/use-debounce.hook'
 import { Table } from 'antd'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import { SorterResult } from 'antd/es/table/interface'
-import { generateTableColumns } from '../../../functions/forms'
+import { renderTableColumns, revertProjectionKey } from '../../../functions/forms'
 import { useLocation } from 'react-router-dom'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import { DeviceBreakpointEnum, FormDataListViewTypeEnum, MongoDbSortOrderEnum } from '../../../enums'
@@ -80,7 +80,7 @@ export default function FormDataListTableComponent({
         ...restConfigs
       } = dataListConfig
 
-      setTableColumns(generateTableColumns(columns, headerLayoutContext))
+      setTableColumns(renderTableColumns(columns, headerLayoutContext))
       setOtherConfigs(restConfigs)
 
       setLoading(false)
@@ -108,7 +108,6 @@ export default function FormDataListTableComponent({
             setParentLoading(true)
             setFilterReqData((c) => ({ ...c, match, current: 1 }))
           }}
-          startLoading={() => setParentLoading(true)}
           titleComponent={
             <>
               <span className="pr-1">{otherConfigs?.title}</span>
@@ -144,7 +143,7 @@ export default function FormDataListTableComponent({
                 sort:
                   sorter && (sorter as SorterResult<IFormDataListData>).field
                     ? JSON.stringify({
-                        [(sorter as SorterResult<IFormDataListData>).field as string]:
+                        [revertProjectionKey((sorter as SorterResult<IFormDataListData>).field as string)]:
                           (sorter as SorterResult<IFormDataListData>).order === 'ascend'
                             ? MongoDbSortOrderEnum.Ascending
                             : MongoDbSortOrderEnum.Descending,
@@ -172,7 +171,6 @@ type IFormDataListTableComponent = {
 }
 
 export type IDataListHeaderLayoutContext = {
-  userId?: string | number
   attachmentBaseUrl?: string
 } & ICustomFunctionCall &
   IFormContext