form-craft-package 1.7.10-dev.2 → 1.7.10-dev.3

package/package.json

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

package/src/api/client.ts

@@ -2,7 +2,7 @@ import Cookies from 'js-cookie'
 import axios, { AxiosRequestConfig, AxiosResponse, CancelTokenSource } from 'axios'
 import qs from 'qs'
 import { notification } from 'antd'
-import { LOCAL_STORAGE_KEYS_ENUM, SHARED_COOKIE_KEYS } from '../enums'
+import { BreadcrumbTypeEnum, LOCAL_STORAGE_KEYS_ENUM, SHARED_COOKIE_KEYS } from '../enums'
 
 import { IDynamicForm } from '../types'
 import { constructDynamicFormHref, fetchDynamicForms } from '../functions'
@@ -77,7 +77,11 @@ const auth = async (
           const firstForm = forms[0]
           const splittedFormName = firstForm.name.split(' ')?.[0] ?? ''
 
-          breadcrumbStore.push({ label: splittedFormName, href: constructDynamicFormHref(firstForm.name) })
+          breadcrumbStore.push({
+            label: splittedFormName,
+            href: constructDynamicFormHref(firstForm.name),
+            type: BreadcrumbTypeEnum.List,
+          })
         }
 
         localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms, JSON.stringify(forms))

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

@@ -1,8 +1,8 @@
 import { useSyncExternalStore } from 'react'
-import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
+import { BreadcrumbTypeEnum, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../constants'
 
-export type IBreadcrumb = { label: string; href: string; [key: string]: any }
+export type IBreadcrumb = { label: string; href: string; [key: string]: any; type: BreadcrumbTypeEnum }
 
 let crumbs: IBreadcrumb[] = loadFromStorage()
 const listeners = new Set<() => void>()
@@ -36,8 +36,11 @@ function dedupeAdjacentCrumbs(crumbs: IBreadcrumb[]): IBreadcrumb[] {
 
   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])
+    const curr = crumbs[i]
+    const prev = crumbs[i - 1]
+    if (curr.href !== prev.href) {
+      if (curr.label === prev.label && curr.type === prev.type) result.splice(i - 1, 1)
+      result.push(curr)
     }
   }
   return result

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

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

package/src/components/common/custom-hooks/use-login-handler.ts

@@ -5,88 +5,95 @@ import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import { cookieHandler } from '../../../functions/cookie-handler'
 import { message } from 'antd'
 export function useLoginHandler() {
-    const navigate = useNavigate()
-    const domain = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Domain) || ''
-    const [loading, updateLoading] = useReducer(
-        (currState: any, updated: any) => ({ ...currState, ...updated }),
-        { login: false }
-    )
+  const navigate = useNavigate()
+  const domain = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Domain) || ''
+  const [loading, updateLoading] = useReducer((currState: any, updated: any) => ({ ...currState, ...updated }), {
+    login: false,
+  })
 
-    const [googleAuthSetup, setGoogleAuthSetup] = useState<null | {
-        qrCodeImageUrl: string
-        manualEntryCode: string
-        key: string
-    }>(null)
+  const [googleAuthSetup, setGoogleAuthSetup] = useState<null | {
+    qrCodeImageUrl: string
+    manualEntryCode: string
+    key: string
+  }>(null)
 
-    const [showVerificationModal, setShowVerificationModal] = useState(false)
-    const [latestLoginValues, setLatestLoginValues] = useState<any>(null)
+  const [showVerificationModal, setShowVerificationModal] = useState(false)
+  const [latestLoginValues, setLatestLoginValues] = useState<any>(null)
 
-    const handleLogin = async (values: any) => {
-        updateLoading({ login: true })
-        setLatestLoginValues(values)
+  const handleLogin = async (values: any) => {
+    updateLoading({ login: true })
+    setLatestLoginValues(values)
 
-        const { authRes, initialPath } = await auth(values.email, values.password, domain, values.type || 'password')
-        if (authRes.status === 200) {
-            const data = authRes.data
-            if (!data.required2FA) {
-                navigate(initialPath)
-            } else if (data.required2FA && !data.configuredGoogleAuth) {
-                const googleSetup = await client.get(`api/authorization/authkey`)
-                if (googleSetup.status === 200) {
-                    setGoogleAuthSetup({
-                        qrCodeImageUrl: googleSetup.data.qrCodeImageUrl,
-                        manualEntryCode: googleSetup.data.manualEntrySetupCode,
-                        key: googleSetup.data.key,
-                    })
-                }
-            } else if (data.required2FA && data.configuredGoogleAuth) {
-                setShowVerificationModal(true)
-            }
+    const { authRes, initialPath } = await auth(
+      values.email,
+      values.password,
+      localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Domain) ?? '',
+      values.type || 'password',
+    )
+    if (authRes.status === 200) {
+      const data = authRes.data
+      if (!data.required2FA) {
+        navigate(initialPath)
+      } else if (data.required2FA && !data.configuredGoogleAuth) {
+        const googleSetup = await client.get(`api/authorization/authkey`)
+        if (googleSetup.status === 200) {
+          setGoogleAuthSetup({
+            qrCodeImageUrl: googleSetup.data.qrCodeImageUrl,
+            manualEntryCode: googleSetup.data.manualEntrySetupCode,
+            key: googleSetup.data.key,
+          })
         }
-
-        updateLoading({ login: false })
+      } else if (data.required2FA && data.configuredGoogleAuth) {
+        setShowVerificationModal(true)
+      }
     }
 
-    const handleSetupDone = async () => {
-        if (!googleAuthSetup) return
-        await client.put(`api/authorization/authkey?key=${googleAuthSetup.key}`)
-        setGoogleAuthSetup(null)
-        handleLogin(latestLoginValues)
-    }
-    const handleSetupCancel = async () => {
-        await cookieHandler.empty()
-        setGoogleAuthSetup(null)
-    }
+    updateLoading({ login: false })
+  }
 
-    const handleVerifyCode = async (code: any) => {
-        await handleLogin({ email: latestLoginValues.email, password: code, type: 'refresh_token' })
-    }
-    const handleUnlinkAuthenticator = async () => {
-        const res = await client.get('api/authorization/authkey')
-        if (res.status === 200) {
-            setGoogleAuthSetup({
-                qrCodeImageUrl: res.data.qrCodeImageUrl,
-                manualEntryCode: res.data.manualEntrySetupCode,
-                key: res.data.key,
-            })
-            setShowVerificationModal(false)
-        }
+  const handleSetupDone = async () => {
+    if (!googleAuthSetup) return
+    await client.put(`api/authorization/authkey?key=${googleAuthSetup.key}`)
+    setGoogleAuthSetup(null)
+    handleLogin(latestLoginValues)
+  }
+  const handleSetupCancel = async () => {
+    await cookieHandler.empty()
+    setGoogleAuthSetup(null)
+  }
+
+  const handleVerifyCode = async (code: any) => {
+    await handleLogin({ email: latestLoginValues.email, password: code, type: 'refresh_token' })
+  }
+  const handleUnlinkAuthenticator = async () => {
+    const res = await client.get('api/authorization/authkey')
+    if (res.status === 200) {
+      setGoogleAuthSetup({
+        qrCodeImageUrl: res.data.qrCodeImageUrl,
+        manualEntryCode: res.data.manualEntrySetupCode,
+        key: res.data.key,
+      })
+      setShowVerificationModal(false)
     }
+  }
 
-    const handleForgotPassword = async (email?: string) => {
-        if (!email) {
-            return message.error('Please enter your email or username first.')
-        }
-        const payload = {
-            subject: 'Reset your password',
-            body: `
+  const handleForgotPassword = async (email?: string) => {
+    if (!email) {
+      return message.error('Please enter your email or username first.')
+    }
+    const payload = {
+      subject: 'Reset your password',
+      body: `
     <div style="font-family: Arial, sans-serif; max-width: 600px; margin: auto; padding: 20px; border: 1px solid #ddd; border-radius: 10px;">
       <h2 style="color: #333;">Reset Your Password</h2>
       <p style="font-size: 16px; color: #555;">
         We received a request to reset your password. Click the button below to verify and continue:
       </p>
       <div style="text-align: center; margin: 30px 0;">
-<a href="${window.location.href.replace('forgot-password', 'reset-password')}?token=[token]&domain=${domain}&email=${email}" 
+<a href="${window.location.href.replace(
+        'forgot-password',
+        'reset-password',
+      )}?token=[token]&domain=${domain}&email=${email}" 
    style="background-color: #4CAF50; color: white; padding: 12px 24px; text-decoration: none; font-size: 16px; border-radius: 6px;">
   Click here to reset password
 </a>
@@ -97,91 +104,80 @@ export function useLoginHandler() {
       </p>
     </div>
   `,
-            from: 'no-reply@icodice.com',
-            to: email,
-            cc: '',
-            bcc: '',
-            notificationId: 0,
-            attachments: [],
-        };
-
-
-        try {
-            await client.post(`/api/user/${domain}/forgotpassword/${email}`, payload)
-            message.success('Reset link sent. Please check your email.')
-        } catch (error) {
-            console.error('Forgot Password Error:', error)
-            message.error('Failed to send reset email.')
-        }
+      from: 'no-reply@icodice.com',
+      to: email,
+      cc: '',
+      bcc: '',
+      notificationId: 0,
+      attachments: [],
     }
 
-    const handleVerifyToken = async (domain: string, email: string, token: string) => {
-        const encodedEmail = encodeURIComponent(email);
-        try {
-            const response = await client.post(
-                `/api/user/${domain}/verifypasswordtoken/${encodedEmail}`,
-                `"${token}"`,
-                {
-                    headers: {
-                        'accept': 'text/plain',
-                        'Content-Type': 'application/json',
-                    }
-                }
-            );
-            return response.data;
-        } catch (error) {
-            message.error('Invalid or expired reset token.');
-            return null;
-        }
-    };
-
+    try {
+      await client.post(`/api/user/${domain}/forgotpassword/${email}`, payload)
+      message.success('Reset link sent. Please check your email.')
+    } catch (error) {
+      console.error('Forgot Password Error:', error)
+      message.error('Failed to send reset email.')
+    }
+  }
 
-    const handleResetPassword = async (
-        domain: string,
-        email: string,
-        token: string,
-        password: string
-    ) => {
-        try {
-            const payload = {
-                token,
-                password,
-                notification: {
-                    subject: 'Password Reset Confirmation',
-                    body: 'Your password has been successfully reset.',
-                    from: 'no-reply@icodice.com',
-                    to: email,
-                    cc: '',
-                    bcc: '',
-                    notificationId: 0,
-                    attachments: [],
-                },
-            }
-            const encodedEmail = encodeURIComponent(email);
-            const response = await client.post(`/api/user/${domain}/resetpassword/${encodedEmail}`, payload)
-            if (response.status === 200) {
-                message.success('Password successfully reset.')
-                navigate('/login')
-            }
-            return response
-        } catch (error) {
-            message.error('Failed to reset password.')
-            return null
-        }
+  const handleVerifyToken = async (domain: string, email: string, token: string) => {
+    const encodedEmail = encodeURIComponent(email)
+    try {
+      const response = await client.post(`/api/user/${domain}/verifypasswordtoken/${encodedEmail}`, `"${token}"`, {
+        headers: {
+          accept: 'text/plain',
+          'Content-Type': 'application/json',
+        },
+      })
+      return response.data
+    } catch (error) {
+      message.error('Invalid or expired reset token.')
+      return null
     }
+  }
 
-    return {
-        handleLogin,
-        loading,
-        googleAuthSetup,
-        showVerificationModal,
-        handleSetupDone,
-        setShowVerificationModal,
-        handleSetupCancel,
-        handleVerifyCode,
-        handleUnlinkAuthenticator,
-        handleForgotPassword,
-        handleVerifyToken,
-        handleResetPassword
+  const handleResetPassword = async (domain: string, email: string, token: string, password: string) => {
+    try {
+      const payload = {
+        token,
+        password,
+        notification: {
+          subject: 'Password Reset Confirmation',
+          body: 'Your password has been successfully reset.',
+          from: 'no-reply@icodice.com',
+          to: email,
+          cc: '',
+          bcc: '',
+          notificationId: 0,
+          attachments: [],
+        },
+      }
+      const encodedEmail = encodeURIComponent(email)
+      const response = await client.post(`/api/user/${domain}/resetpassword/${encodedEmail}`, payload)
+      if (response.status === 200) {
+        message.success('Password successfully reset.')
+        navigate('/login')
+      }
+      return response
+    } catch (error) {
+      message.error('Failed to reset password.')
+      return null
     }
+  }
+
+  return {
+    handleLogin,
+    loading,
+    googleAuthSetup,
+    showVerificationModal,
+    handleSetupDone,
+    setShowVerificationModal,
+    handleSetupCancel,
+    handleVerifyCode,
+    handleUnlinkAuthenticator,
+    handleForgotPassword,
+    handleVerifyToken,
+    handleResetPassword,
+  }
 }

package/src/components/companies/2-unauthenticated/index.tsx

@@ -6,7 +6,6 @@ import { useNavigate } from 'react-router-dom'
 
 export function UnauthenticatedLayout() {
   const { config } = useConfigContext()
-  console.log(config?.siteLanguages)
   const navigate = useNavigate()
   const loginLayout = config?.loginLayout
   const siteIdentity = config?.siteIdentity

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

@@ -37,13 +37,12 @@ function FormDataListComponent({ formId, companyKey, baseServerUrl, onCustomFunc
         const dataListConfig: IFormDataListConfig = res.data.Data.dataListConfig
         const { columns, pagination, defaultFilter, defaultSorter, header } = dataListConfig
 
-        if (Array.isArray(columns))
+        if (Array.isArray(columns)) {
           dataProjectRef.current = columns.reduce(
             (curr, c) => (c.key ? { ...curr, [getProjectionKey(c.key)]: `$${c.key}` } : curr),
             {},
           )
 
-        if (Array.isArray(columns))
           formJoinsRef.current = mergeJoins([
             ...columns.map((c) => c.joins),
             ...Object.values(header.elements).reduce((c: IFormJoin[], el) => {
@@ -53,7 +52,7 @@ function FormDataListComponent({ formId, companyKey, baseServerUrl, onCustomFunc
               return c
             }, []),
           ])
-
+        }
         const defaultReqData: IDataListReqData = {}
         if (!pagination?.hasNoPagination) {
           defaultReqData.current = 1
@@ -100,11 +99,6 @@ function FormDataListComponent({ formId, companyKey, baseServerUrl, onCustomFunc
 
       const { request, cancel } = cancelableClient.post(`/api/report/data/${formId}`, {
         joins: formJoinsRef.current,
-        // 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,
       })

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

@@ -4,14 +4,15 @@ 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 { renderTableColumns, revertProjectionKey } from '../../../functions/forms'
-import { useLocation } from 'react-router-dom'
+import { constructDynamicFormHref, renderTableColumns, revertProjectionKey } from '../../../functions/forms'
+import { useLocation, useNavigate } from 'react-router-dom'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import { DeviceBreakpointEnum, FormDataListViewTypeEnum, MongoDbSortOrderEnum } from '../../../enums'
 import { IDataListReqData } from '.'
 import { IFormDataListConfig, IFormDataListData, IFormDataTableColumn } from '../../../types'
 import { processOptions } from '../../../functions/forms/get-data-list-option-value'
 import { IFormContext } from '../layout-renderer/1-row'
+import { useFindDynamiForm } from '../../common/custom-hooks'
 
 export default function FormDataListTableComponent({
   layoutsConfigs,
@@ -22,7 +23,9 @@ export default function FormDataListTableComponent({
   setParentLoading,
   headerLayoutContext,
 }: IFormDataListTableComponent) {
+  const { getFormById } = useFindDynamiForm()
   const currentBreakpoint = useGetCurrentBreakpoint()
+  const navigate = useNavigate()
   const location = useLocation()
   const [loading, setLoading] = useState(true)
   const [tableColumns, setTableColumns] = useState<(IFormDataTableColumn & { hideScreens?: DeviceBreakpointEnum[] })[]>(
@@ -122,6 +125,16 @@ export default function FormDataListTableComponent({
           dataSource={dataList.data}
           columns={tableColumnsFiltered}
           rowKey={(record) => record._id}
+          rowClassName={() => (layoutsConfigs?.dataListConfig?.onRowClickToNavigate ? 'cursor-pointer' : '')}
+          onRow={(record) => ({
+            onClick: () => {
+              if (layoutsConfigs?.dataListConfig?.onRowClickToNavigate && headerLayoutContext?.formId) {
+                const formInfo = getFormById(headerLayoutContext.formId)
+                if (!formInfo) return
+                navigate(`${constructDynamicFormHref(formInfo.name)}/${record._id}`)
+              }
+            },
+          })}
           pagination={
             otherConfigs?.pagination?.hasNoPagination
               ? false

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

@@ -1,18 +1,24 @@
 import { Form } from 'antd'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { IDndLayoutStructure_Responsive, IFormSchema } from '../../../types'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import { DynamicFormButtonRender, ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListSkeleton_Details from '../../common/loading-skeletons/details'
 import { useLocation } from 'react-router-dom'
-import { DeviceBreakpointEnum, FormPreservedItemKeys, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import client from '../../../api/client'
 import { useBreadcrumb } from '../../common/custom-hooks/use-breadcrumb.hook'
 import NotFound from '../../common/not-found'
 import { useManyToManyConnector } from '../../common/custom-hooks/use-many-to-many-connector.hook'
+import {
+  BreadcrumbTypeEnum,
+  DeviceBreakpointEnum,
+  FormPreservedItemKeys,
+  LOCAL_STORAGE_KEYS_ENUM,
+} from '../../../enums'
 import {
   fromMongoDbExtendedJSON,
+  getPickerFieldsWithOriginalTz,
   isNewFormDataPage,
   isValidMongoDbId,
   queryParamsToObject,
@@ -35,6 +41,7 @@ export default function FormDataDetailsComponent({
   const [loadings, setLoadings] = useState({ layout: true, data: true })
   const [layoutConfig, setLayoutConfig] = useState<IDndLayoutStructure_Responsive>({ elements: {}, layouts: {} })
   const [isNotFound, setIsNotFound] = useState(false)
+  const originalTzFieldsRef = useRef<string[]>([])
   useManyToManyConnector(formDataRef)
 
   const currentBreakpoint = useGetCurrentBreakpoint()
@@ -52,8 +59,9 @@ export default function FormDataDetailsComponent({
   useEffect(() => {
     const splittedFormName = formName?.split(' ')?.[0] ?? ''
     push({
-      label: isNewFormDataPage(formDataId) ? `New ${splittedFormName.toLowerCase()}` : `${splittedFormName} details`,
+      label: isNewFormDataPage(formDataId) ? splittedFormName.toLowerCase() : splittedFormName,
       href: location.pathname,
+      type: isNewFormDataPage(formDataId) ? BreadcrumbTypeEnum.New : BreadcrumbTypeEnum.Details,
     })
   }, [location.pathname, formName, formDataId])
 
@@ -101,7 +109,10 @@ export default function FormDataDetailsComponent({
               const { data: jsonData, ...restFormData } = res.data
               let parsedFormData = JSON.parse(jsonData)
               if (parsedFormData) {
-                const fieldsValue: { [key: string]: any } = fromMongoDbExtendedJSON(parsedFormData)
+                const fieldsValue: { [key: string]: any } = fromMongoDbExtendedJSON(
+                  parsedFormData,
+                  originalTzFieldsRef.current,
+                )
                 formDataRef.setFieldsValue({ ...restFormData, ...fieldsValue })
 
                 console.log('FORM DATA FETCH (PARSED)', fieldsValue)
@@ -125,6 +136,7 @@ export default function FormDataDetailsComponent({
             if (parsedData) {
               console.log('FORM LAYOUT FETCH (PARSED)', parsedData)
               const { layouts: rawLayouts, elements } = parsedData.detailsConfig
+              originalTzFieldsRef.current = getPickerFieldsWithOriginalTz(elements)
 
               if (isPublic) {
                 if (parsedData.generateConfig?.submissionPdf?.enabled)
@@ -144,7 +156,7 @@ export default function FormDataDetailsComponent({
   }, [formId, formKey, isPublic, formDataRef, fetchFormData])
 
   const formContext = useMemo(
-    () => ({ formId, formKey, formDataId, formRef: formDataRef, companyKey }),
+    () => ({ detailPageFormId: formId, formId, formKey, formDataId, formRef: formDataRef, companyKey }),
     [formDataId, formDataRef, formId, formKey, companyKey],
   )
 

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

@@ -69,6 +69,8 @@ export const LayoutRendererRow = memo(
                           hiddenColIdx.current = [...hiddenColIdx.current, colIdx]
                           return c + 1
                         } else {
+                          hiddenColIdx.current = hiddenColIdx.current.filter((idx) => idx !== colIdx)
+
                           if (c - 1 < 0) return 0
                           return c - 1
                         }

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

@@ -226,7 +226,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         loading={loading}
         disabled={isElementDisabled}
         className="w-full"
-        onClick={() => {
+        onClick={(e) => {
           if (inPreviewMode) return
           if (
             isPublic &&
@@ -234,7 +234,9 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
             ![ButtonActionCategoryEnum.SaveDataChanges, ButtonActionCategoryEnum.Navigate].includes(btnProps.category)
           )
             return
+          e.stopPropagation()
           setLoading(true)
+
           if (btnProps.confirmation?.enabled) {
             confirmModal({
               content: btnProps.confirmation.message,
@@ -242,9 +244,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
               cancelText: btnProps.confirmation.cancelLabel,
               onOk: handleButtonClick,
             })
-          } else {
-            handleButtonClick()
-          }
+          } else handleButtonClick()
         }}
       >
         {isPublic &&

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

@@ -3,8 +3,10 @@ import { Button_FillerPortal } from '../../../common/button'
 import { useNavigate } from 'react-router-dom'
 import { FaChevronRight } from 'react-icons/fa6'
 import React from 'react'
+import { BreadcrumbTypeEnum } from '../../../../enums'
+import { IBreadcrumbElementProps } from '../../../../types'
 
-export default function LayoutRenderer_Breadcrumb() {
+export default function LayoutRenderer_Breadcrumb({ elementProps }: { elementProps: IBreadcrumbElementProps }) {
   const navigate = useNavigate()
   const { breadcrumbs, sliceAt } = useBreadcrumb()
 
@@ -20,7 +22,15 @@ export default function LayoutRenderer_Breadcrumb() {
               navigate(bc.href)
             }}
           >
-            <span className="font-normal italic">{bc.label}</span>
+            <span className="font-normal italic">
+              {bc.type === BreadcrumbTypeEnum.New ? `${elementProps.newText} ` : ''}
+              {bc.label}
+              {bc.type === BreadcrumbTypeEnum.Details
+                ? ` ${elementProps.detailText}`
+                : bc.type === BreadcrumbTypeEnum.List
+                ? ` ${elementProps.listText}`
+                : ''}
+            </span>
           </Button_FillerPortal>
           {breadcrumbs.length - 1 !== bcIdx && <FaChevronRight className="text-primary" />}
         </React.Fragment>

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

@@ -1,18 +1,21 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { FieldElementOptionSourceEnum } from '../../../../enums'
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { BreadcrumbTypeEnum, FieldElementOptionSourceEnum, FilterConfigTypeEnum } from '../../../../enums'
 import { IElementBaseProps } from '.'
 import { LayoutRenderer_FieldElement } from './2-field-element'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import { IFormContext } from '../1-row'
-import client, { clientCancelToken } from '../../../../api/client'
-import { CancelToken } from 'axios'
+import { cancelableClient } from '../../../../api/client'
 import { useBreadcrumb } from '../../../common/custom-hooks/use-breadcrumb.hook'
 import { Form, Spin } from 'antd'
+import { useFindDynamiForm } from '../../../common/custom-hooks'
+import { useNavigate } from 'react-router-dom'
 import { constructDynamicFormHref, getIdEqualsQuery, isNewFormDataPage } from '../../../../functions'
 import {
+  IFilterConfig,
   IFormJoin,
   IFormLayoutFieldOption,
+  IOptionDependentOn,
   IOptionSourceConstant,
   IOptionSourceDynamicForm,
   IOptionSourceLinkedForm,
@@ -20,8 +23,6 @@ import {
   IRadioElement,
   ISelectElement,
 } from '../../../../types'
-import { useFindDynamiForm } from '../../../common/custom-hooks'
-import { useNavigate } from 'react-router-dom'
 
 export default function LayoutRenderer_FieldsWithOptions({
   formContext,
@@ -31,17 +32,43 @@ export default function LayoutRenderer_FieldsWithOptions({
 }: ILayoutRenderer_FieldsWithOptions) {
   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 { formRef, formId, formDataId, detailPageFormId } = formContext
+  const { inPreviewMode } = useFormPreservedItemValues(formRef)
   const { breadcrumbs, push } = useBreadcrumb()
+
+  const props = getElementGeneralizedProps(elementData.props)
+
+  const [options, setOptions] = useState<{ value: string; label: ReactNode }[]>([])
   const [loading, setLoading] = useState(true)
+
   const isManyToManyPageRef = useRef(false)
+  const dependentOnRef = useRef<IOptionDependentOn | undefined>(props.dependentOn)
+  const filterRef = useRef<IFilterConfig | undefined>(props.filter)
+  const dependentFieldPrevValueRef = useRef<any>(null)
+  const selectedValuePrefRef = useRef<string | null>(null)
+
+  const cancelReqFuncRef = useRef<{
+    otherForm?: () => void
+    linkedForm?: () => void
+    linkedFormTemp?: () => void
+    staticOptions?: () => void
+  }>({})
 
   const selectedValue = Form.useWatch(formItem.path, formRef)
+  const dependentFieldValue = dependentOnRef.current ? Form.useWatch(dependentOnRef.current.field, formRef) : undefined
 
-  const { inPreviewMode } = useFormPreservedItemValues(formRef)
+  useEffect(() => {
+    if (dependentOnRef.current && dependentFieldValue !== dependentFieldPrevValueRef.current) {
+      dependentFieldPrevValueRef.current = dependentFieldValue
+      if (!dependentFieldValue) setOptions([])
+      setLoading(true)
+    }
+  }, [dependentFieldValue])
+
+  useEffect(() => {
+    if (!selectedValuePrefRef.current && selectedValue) selectedValuePrefRef.current = selectedValue
+  }, [selectedValue])
 
   const parentRelInfo = useMemo(() => {
     if (breadcrumbs.length < 2) return { formJoins: [], formDataId: '' }
@@ -84,16 +111,27 @@ export default function LayoutRenderer_FieldsWithOptions({
         }),
         {},
       )
-      client
-        .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: `$${optionSource.field}`, ...dynamicFormProjectOtherFields }),
-        })
+
+      let baseQuery: { [key: string]: any } = { DeletedDate: null }
+      if (filterRef.current && filterRef.current.type === FilterConfigTypeEnum.Custom && filterRef.current.config)
+        baseQuery = { ...baseQuery, ...JSON.parse(JSON.stringify(filterRef.current.config).replaceAll('@', '$')) }
+
+      const { request, cancel } = cancelableClient.post(`/api/report/data/${optionSource.formId}`, {
+        joins: filteredJoins,
+        match: JSON.stringify(
+          parentRelInfo.formDataId && !isManyToManyPageRef.current
+            ? { ...baseQuery, ...getIdEqualsQuery(lastJoin?.alias, parentRelInfo.formDataId) }
+            : { ...baseQuery },
+        ),
+        project: JSON.stringify({
+          value: '$_id',
+          label: `$${optionSource.field}`,
+          ...dynamicFormProjectOtherFields,
+        }),
+      })
+      cancelReqFuncRef.current = { ...cancelReqFuncRef.current, otherForm: cancel }
+
+      request
         .then((res) => {
           if (res.status === 200) {
             const { totalRecords, data } = res.data
@@ -108,30 +146,65 @@ export default function LayoutRenderer_FieldsWithOptions({
 
   const fetchLinkedFormData = useCallback(
     (optionSource: IOptionSourceLinkedForm) => {
-      if (!optionSource.baseFormId) {
+      if (!optionSource.baseFormId || (!!dependentOnRef.current && !dependentFieldValue)) {
         setLoading(false)
         return
       }
 
-      const { groupOtherFields, projectOtherFields } = getOtherFields(optionSource)
+      if (!isNewFormDataPage(formDataId) && optionSource.joins.length > 2 && selectedValuePrefRef.current) {
+        const { request, cancel } = cancelableClient.get(
+          `/api/formdata/${optionSource.baseFormId}/${selectedValuePrefRef.current}`,
+        )
+        cancelReqFuncRef.current = { ...cancelReqFuncRef.current, linkedFormTemp: cancel }
+
+        request
+          .then((res) => {
+            if (res.status === 200) {
+              let parsedFormData = JSON.parse(res.data.data)
+              if (parsedFormData)
+                setOptions((c) =>
+                  c.length > 0
+                    ? c
+                    : [
+                        {
+                          value: selectedValuePrefRef.current!,
+                          label: parsedFormData[optionSource.field.split('Data.')[1]],
+                        },
+                        { value: 'PLACEHOLDER', label: loadingOptionLabel, disabled: true },
+                      ],
+                )
+            }
+          })
+          .finally(() => setLoading(false))
+      }
 
+      const { groupOtherFields, projectOtherFields } = getOtherFields(optionSource)
       const groupFields: { [key: string]: string | { $first: any } } = {
         _id: '$_id',
         label: { $first: `$${optionSource.field}` },
         ...groupOtherFields,
       }
+      let baseQuery: { [key: string]: any } = { DeletedDate: null }
+      if (filterRef.current && filterRef.current.type === FilterConfigTypeEnum.Custom && filterRef.current.config)
+        baseQuery = { ...baseQuery, ...JSON.parse(JSON.stringify(filterRef.current.config).replaceAll('@', '$')) }
 
-      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 }),
-        })
+      const { request, cancel } = cancelableClient.post(`/api/report/data/${optionSource.baseFormId}`, {
+        joins: optionSource.joins,
+        match: JSON.stringify(
+          dependentFieldValue
+            ? { ...baseQuery, ...getIdEqualsQuery(dependentOnRef.current?.formId, dependentFieldValue) }
+            : parentRelInfo.formDataId
+            ? { ...baseQuery, ...getIdEqualsQuery(parentRelInfo.detailPageFormId, parentRelInfo.formDataId) }
+            : !isNewFormDataPage(formDataId) && detailPageFormId
+            ? { ...baseQuery, ...getIdEqualsQuery(detailPageFormId, formDataId) }
+            : baseQuery,
+        ),
+        group: JSON.stringify(groupFields),
+        project: JSON.stringify({ _id: 0, value: '$_id', label: 1, ...projectOtherFields }),
+      })
+      cancelReqFuncRef.current = { ...cancelReqFuncRef.current, linkedForm: cancel }
+
+      request
         .then((res) => {
           if (res.status === 200) {
             const { totalRecords, data } = res.data
@@ -143,7 +216,7 @@ export default function LayoutRenderer_FieldsWithOptions({
         })
         .finally(() => setLoading(false))
     },
-    [parentRelInfo, formDataId, formId],
+    [parentRelInfo, formDataId, detailPageFormId, dependentFieldValue],
   )
 
   const fetchDetailsStaticOptions = useCallback((optionSource: IOptionSourceReadFromDetails) => {
@@ -153,12 +226,12 @@ export default function LayoutRenderer_FieldsWithOptions({
       return
     }
 
-    client
-      .post(
-        `/api/form/${formId}`,
-        { project: JSON.stringify({ [optionFieldPath]: 1 }) },
-        { cancelToken: cancelTokenRef.current },
-      )
+    const { request, cancel } = cancelableClient.post(`/api/form/${formId}`, {
+      project: JSON.stringify({ [optionFieldPath]: 1 }),
+    })
+    cancelReqFuncRef.current = { ...cancelReqFuncRef.current, staticOptions: cancel }
+
+    request
       .then((res) => {
         if (res.status === 200) {
           const resData = res.data
@@ -178,9 +251,6 @@ export default function LayoutRenderer_FieldsWithOptions({
   useEffect(() => {
     if (!props.optionSource || inPreviewMode === undefined) return
 
-    const axiosSource = clientCancelToken.source()
-    cancelTokenRef.current = axiosSource.token
-
     if (props.optionSource.type === FieldElementOptionSourceEnum.Static) {
       setOptions(props.optionSource.options.map((op: IFormLayoutFieldOption) => ({ value: op.id, label: op.value })))
       setLoading(false)
@@ -201,10 +271,17 @@ export default function LayoutRenderer_FieldsWithOptions({
           return
       }
     } else setLoading(false)
-
-    return () => axiosSource.cancel()
   }, [props.optionSource, inPreviewMode, fetchLinkedFormData, fetchFormData])
 
+  useEffect(() => {
+    return () => {
+      cancelReqFuncRef.current.otherForm?.()
+      cancelReqFuncRef.current.linkedForm?.()
+      cancelReqFuncRef.current.linkedFormTemp?.()
+      cancelReqFuncRef.current.staticOptions?.()
+    }
+  }, [])
+
   return (
     <div className="relative">
       <LayoutRenderer_FieldElement
@@ -225,7 +302,7 @@ export default function LayoutRenderer_FieldsWithOptions({
                         const formInfo = getFormById(props.optionSource.formId)
                         if (!formInfo) return
 
-                        push({ label: `${formInfo.name} details`, href: location.pathname })
+                        push({ label: formInfo.name, href: location.pathname, type: BreadcrumbTypeEnum.Details })
                         navigate(`${constructDynamicFormHref(formInfo.name)}/${selectedValue}`)
                       }}
                     >
@@ -285,3 +362,10 @@ const getOtherFields = (optionSource: IOptionSourceLinkedForm | IOptionSourceLin
 
 type IOtherField = 'field2' | 'field3' | 'field4'
 type IOTherField_RC = 'field1_RC' | 'field2_RC' | 'field3_RC' | 'field4_RC'
+
+const loadingOptionLabel = (
+  <div className="flex items-center gap-2">
+    <Spin size="small" />
+    <span className="italic">Fetching rest of the data..</span>
+  </div>
+)

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

@@ -5,7 +5,7 @@ import FormDataListSkeleton_Table from '../../../common/loading-skeletons/table'
 import { getIdEqualsQuery, getProjectionKey, isNewFormDataPage, mergeJoins } from '../../../../functions'
 import { cancelableClient } from '../../../../api/client'
 import { IFormContext } from '../1-row'
-import { FormRelationshipEnum } from '../../../../enums'
+import { FilterConfigTypeEnum, FormRelationshipEnum } from '../../../../enums'
 import {
   IFormDataListData,
   IFormDataLoadElementProps,
@@ -17,7 +17,7 @@ import {
 
 export default function LayoutRenderer_LoadFormData({ formContext, elementProps }: ILayoutRenderer_LoadFormData) {
   const { formId, formRef, formDataId } = formContext
-  const { joins, baseFormId, m2mRelFormId, displayConfigId } = elementProps
+  const { joins, baseFormId, m2mRelFormId, displayConfigId, filter: initialFilter } = elementProps
   const lastChildInfo = useRef<{ formName: string; parentFormJoins: IFormJoin[] }>({
     formName: '',
     parentFormJoins: [],
@@ -32,7 +32,11 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
   const m2mForeignKeysRef = useRef<{ currentForm: string; otherForm: string } | undefined>()
 
   const fetchDataList = useCallback(
-    (headerAppliedFilters?: string) => {
+    (
+      headerAppliedFilters: string = initialFilter && initialFilter.type === FilterConfigTypeEnum.Custom
+        ? JSON.stringify(initialFilter.config).replaceAll('@', '$')
+        : '',
+    ) => {
       if (!baseFormId) return
       setLoadings((c) => ({ ...c, data: true }))
 
@@ -42,12 +46,12 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
       const { request, cancel } = cancelableClient.post(`/api/report/data/${baseFormId}`, {
         joins: mergeJoins([joins, formJoinsRef.current]),
         match: matchFilters.length
-          ? JSON.stringify(matchFilters.length === 1 ? matchFilters[0] : { $and: matchFilters })
+          ? JSON.stringify(matchFilters.length === 1 ? matchFilters[0] : { $and: matchFilters }).replaceAll(
+              `${baseFormId}.`,
+              '',
+            )
           : '',
-        project: JSON.stringify({
-          ...dataProjectRef.current,
-          ...joins.reduce((curr, j) => ({ ...curr, [`${j.formId}_id`]: `$${j.formId}._id` }), {}),
-        }),
+        project: JSON.stringify(dataProjectRef.current),
       })
       reportDataApiCancelFuncRef.current = cancel
 
@@ -59,7 +63,7 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
         })
         .finally(() => setLoadings({ initial: false, data: false }))
     },
-    [joins, baseFormId],
+    [joins, baseFormId, initialFilter],
   )
 
   useEffect(() => {

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

@@ -22,6 +22,7 @@ import {
   IDndLayoutElement,
   IFormLayoutElementConditions,
   IReadFieldDataElementProps,
+  IBreadcrumbElementProps,
 } from '../../../../types'
 
 function LayoutRendererElementWrapper({
@@ -175,7 +176,7 @@ function LayoutRendererElement({
       return <LayoutRenderer_CurrencyField elementData={elementData} formContext={formContext} {...elementBaseProps} />
 
     case ElementTypeEnum.Breadcrumb:
-      return <LayoutRenderer_Breadcrumb />
+      return <LayoutRenderer_Breadcrumb elementProps={props as IBreadcrumbElementProps} />
 
     case ElementTypeEnum.Placeholder:
       return <div />

package/src/components/modals/report-filters.modal/index.tsx

@@ -135,7 +135,7 @@ export default function ReportFilterModal({ reportId, closeModal }: IReportFilte
       ]}
     >
       <Spin spinning={loadings.converting}>
-        <Form name="generate_report_form" onFinish={(values) => console.log({ values })} layout="vertical">
+        <Form name="generate_report_form" onFinish={() => {}} layout="vertical">
           Filters
         </Form>
       </Spin>

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

@@ -37,7 +37,7 @@ export default function ReportListComponent() {
         {reports.map((r) => (
           <div className="flex items-center justify-between" key={r.id}>
             <span>{r.name}</span>
-            <Button_FillerPortal primary onClick={() => console.log(r)}>
+            <Button_FillerPortal primary onClick={() => {}}>
               Generate
             </Button_FillerPortal>
           </div>

package/src/enums/form.enum.ts

@@ -198,3 +198,8 @@ export enum ReadFieldDataValueTypeEnum {
   Default = 'Default',
   Evaluated = 'Evaluated',
 }
+export enum BreadcrumbTypeEnum {
+  Details = 1,
+  List,
+  New,
+}

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

@@ -53,6 +53,7 @@ export const renderTableColumns = (
                   ? 'justify-end'
                   : ''
               }`}
+              onClick={(e) => e.stopPropagation()}
             >
               {(el.renderConfig as IDataRender_Buttons).buttons.length > 1 ? (
                 <Dropdown
@@ -125,6 +126,9 @@ export const renderData = (data?: any, renderConfig?: IDataRenderConfig): ReactN
 
 const renderDateData = (data: string, renderConfig: IDataRender_Date) => {
   const { format = '' } = (renderConfig as IDataRender_Date) ?? {}
+
+  if (renderConfig.displayInOriginalTz) return dayjs(data).utc().format(format)
+
   return dayjs(data).format(format)
 }
 

package/src/functions/forms/extended-json-handlers.ts

@@ -1,6 +1,6 @@
-import dayjs from 'dayjs'
 import { BSON_DATA_IDENTIFIER_PREFIXES } from '../../constants'
 import { isValidMongoDbId } from '..'
+import dayjs from 'dayjs'
 
 export function toMongoDbExtendedJSON(input: Record<string, any>): Record<string, any> {
   const out: Record<string, any> = {}
@@ -13,8 +13,7 @@ export function toMongoDbExtendedJSON(input: Record<string, any>): Record<string
         out[key] = val
       }
     } else if (key.startsWith(BSON_DATA_IDENTIFIER_PREFIXES.Date)) {
-      const s = String(val)
-      if (!isNaN(Date.parse(s))) out[key] = { $date: s }
+      if (dayjs(val).isValid()) out[key] = { $date: dayjs(val).utc().toISOString() }
       else {
         console.warn(`Invalid Date for "${key}":`, val)
         out[key] = val
@@ -32,7 +31,7 @@ export function toMongoDbExtendedJSON(input: Record<string, any>): Record<string
   return out
 }
 
-export function fromMongoDbExtendedJSON(input: Record<string, any>): Record<string, any> {
+export function fromMongoDbExtendedJSON(input: Record<string, any>, originalTzFields: string[]): Record<string, any> {
   const out: Record<string, any> = {}
 
   for (const [key, val] of Object.entries(input)) {
@@ -40,7 +39,7 @@ export function fromMongoDbExtendedJSON(input: Record<string, any>): Record<stri
       out[key] = (val as any).$oid
     } else if (key.startsWith(BSON_DATA_IDENTIFIER_PREFIXES.Date) && val && typeof val === 'object' && '$date' in val) {
       const date = (val as any).$date
-      out[key] = date ? dayjs(date) : date
+      out[key] = date ? (originalTzFields.includes(key) ? dayjs(date).utc() : dayjs(date)) : date
     } else if (
       key.startsWith(BSON_DATA_IDENTIFIER_PREFIXES.Number) &&
       val &&

package/src/functions/forms/get-element-props.ts

@@ -1,5 +1,5 @@
-import { ButtonElementSizeEnum, ButtonElementTypeEnum } from '../../enums'
-import { IButtonElementProps } from '../../types'
+import { ButtonElementSizeEnum, ButtonElementTypeEnum, ElementTypeEnum } from '../../enums'
+import { IButtonElementProps, IDndLayoutElement, IPickerElementProps } from '../../types'
 
 // since all the field elements have different type, this function is generalizing the types
 export const getElementGeneralizedProps = (props: Record<string, any> | undefined): Record<string, any> => ({
@@ -18,3 +18,14 @@ export const getButtonRenderProps = (btnProps: IButtonElementProps) => ({
     ButtonElementTypeEnum.DangerOutlined,
   ].includes(btnProps.buttonType!),
 })
+
+export const getPickerFieldsWithOriginalTz = (elements: { [key: string]: IDndLayoutElement }) =>
+  Object.values(elements).reduce((curr: string[], el) => {
+    if (
+      [ElementTypeEnum.DatePicker, ElementTypeEnum.TimePicker].includes(el.elementType) &&
+      (el.props as IPickerElementProps)?.displayInOriginalTz
+    )
+      return [...curr, el.key]
+
+    return curr
+  }, [])

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

@@ -9,6 +9,7 @@ import * as FaIcons from 'react-icons/fa'
 import { cookieHandler } from '../../../../functions/cookie-handler'
 import { UserAuth } from '../../../../api/user'
 import { useBreadcrumb } from '../../../../components/common/custom-hooks/use-breadcrumb.hook'
+import { BreadcrumbTypeEnum } from '../../../../enums'
 
 const { Header, Content, Sider } = Layout
 
@@ -491,8 +492,8 @@ export const layoutTemplates = [
               onClick={() => {
                 reset()
                 const splittedFormName = form.name.split(' ')?.[0] ?? ''
-                push({ label: `${splittedFormName} list`, href })
-                
+                push({ label: splittedFormName, href, type: BreadcrumbTypeEnum.List })
+
                 if (isParentMenu) toggleMenu(form.id)
               }}
               style={{

package/src/types/forms/data-list/index.ts

@@ -10,6 +10,7 @@ export interface IFormDataListColumn {
   label: string
   order: number
   optionFieldPath?: string
+  displayInOriginalTz?: boolean
   sortable?: boolean
   align?: AlignTypeEnum
   width?: string | number

package/src/types/forms/index.ts

@@ -24,7 +24,7 @@ export interface IFormDataListConfig {
   pagination?: IFormDataListPagination
   title?: string
   showCount?: boolean
-  usePopup?: boolean
+  onRowClickToNavigate?: boolean
   defaultFilter?: { [key: string]: any } | null
   defaultSorter?: IDataListSorter
 }

package/src/types/forms/layout-elements/data-render-config.ts

@@ -45,6 +45,7 @@ export interface IDataRender_Image {
 export interface IDataRender_Date {
   type: DataRenderTypeEnum.Date
   format: string
+  displayInOriginalTz?: boolean
 }
 
 export interface IDataRender_Conditional {

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

@@ -112,46 +112,52 @@ export interface ICurrencyInputElementProps {
 
 export interface ISelectElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.Select
-  props: {
-    label?: string
-    placeholder?: string
-    description?: string
-    hasNoLabel?: boolean
-    allowClear?: boolean
-    optionSource?: IFieldElementOptionSource
-    defaultValue?: string | number | boolean
-    filter?: IFilterConfig
-  }
+  props: ISelectElementProps
+}
+export interface IOptionDependentOn {
+  formId: number
+  field: string
+}
+interface IOptionElementProps_Base {
+  label?: string
+  dependentOn?: IOptionDependentOn
+  description?: string
+  hasNoLabel?: boolean
+  optionSource?: IFieldElementOptionSource
+  filter?: IFilterConfig
+  defaultValue?: string | number | boolean
+}
+export type ISelectElementProps = IOptionElementProps_Base & {
+  placeholder?: string
+  allowClear?: boolean
+  defaultValue?: string | number | boolean
 }
 
 /** -------------------------------------------------------------------------------------------- */
 
 export interface IRadioElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.Radio
-  props: {
-    label?: string
-    description?: string
-    hasNoLabel?: boolean
-    isMultiValue?: boolean
-    optionSource?: IFieldElementOptionSource
-    defaultValue?: string | number | boolean
-    filter?: IFilterConfig
-    isCustom?: boolean
-  }
+  props: IRadioElementProps
+}
+export type IRadioElementProps = IOptionElementProps_Base & {
+  isMultiValue?: boolean
+  isCustom?: boolean
 }
 
 /** -------------------------------------------------------------------------------------------- */
 
 export interface IPickerElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.DatePicker | ElementTypeEnum.TimePicker
-  props: {
-    label?: string
-    hasNoLabel?: boolean
-    placeholder?: string
-    description?: string
-    allowClear?: boolean
-    filter?: IFilterConfig
-  }
+  props: IPickerElementProps
+}
+export interface IPickerElementProps {
+  label?: string
+  hasNoLabel?: boolean
+  placeholder?: string
+  description?: string
+  allowClear?: boolean
+  filter?: IFilterConfig
+  displayInOriginalTz?: boolean
 }
 
 /** -------------------------------------------------------------------------------------------- */
@@ -338,6 +344,13 @@ export interface IImageElement extends BaseFormLayoutElement {
 
 export interface IBreadcrumbElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.Breadcrumb
+  props: IBreadcrumbElementProps
+}
+export interface IBreadcrumbElementProps {
+  hasNoLabel?: boolean
+  detailText?: string
+  listText?: string
+  newText?: string
 }
 
 /** -------------------------------------------------------------------------------------------- */