form-craft-package 1.5.6 → 1.6.1

package/index.ts

@@ -2,8 +2,5 @@ export * from './src/enums'
 export * from './src/types'
 export * from './src/constants'
 export * from './src/functions'
-export * from './src/functions/json-handlers'
-export * from './src/functions/form-schema-validator'
-export * from './src/functions/get-element-props'
 export * from './src/components'
 export * from './src/components/common/custom-hooks'

package/package.json

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

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

@@ -1,9 +1,10 @@
 import { Form, FormInstance } from 'antd'
 import { useEffect, useState } from 'react'
 import { IConditionalValidation_Field, IFormLayoutElementConditions } from '../../../types'
-import { FormElementConditionalKeyEnum, FormStateEnum } from '../../../enums'
-import { getValidationConfigs, validateConditions } from '../../../functions/conditional-rule-validator'
+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'
 
 export const useCheckElementConditions = (
   formRef: FormInstance | undefined,
@@ -12,13 +13,20 @@ export const useCheckElementConditions = (
 ) => {
   const [isDisabled, setIsDisabled] = useState(defaultDisabled)
   const [isHidden, setIsHidden] = useState(false)
+  const currentBreakpoint = useGetCurrentBreakpoint()
 
   const formValues = Form.useWatch([], { form: formRef, preserve: true })
 
   useEffect(() => {
     if (!!formValues) {
-      setIsDisabled(!isValidationsMet(FormElementConditionalKeyEnum.EnableIf, formValues, conditionalConfigs))
-      setIsHidden(!isValidationsMet(FormElementConditionalKeyEnum.ShowIf, formValues, conditionalConfigs))
+      setIsDisabled(
+        !isValidationsMet(FormElementConditionalKeyEnum.EnableIf, formValues, conditionalConfigs, {
+          currentBreakpoint,
+        }),
+      )
+      setIsHidden(
+        !isValidationsMet(FormElementConditionalKeyEnum.ShowIf, formValues, conditionalConfigs, { currentBreakpoint }),
+      )
     }
   }, [formValues, conditionalConfigs])
 
@@ -29,12 +37,13 @@ const isValidationsMet = (
   type: FormElementConditionalKeyEnum,
   dataValues: { [key: string]: any },
   configs?: IFormLayoutElementConditions,
+  contextValues?: { currentBreakpoint?: DeviceBreakpointEnum },
 ) => {
   const validations = configs?.[type] ?? []
 
   if (validations.length === 0) return true
 
-  const { fieldValidations, authUserValidations, hasDataIdValidation, alwaysDisabled } =
+  const { fieldValidations, authUserValidations, hasDataIdValidation, alwaysDisabled, hideScreens } =
     getValidationConfigs(validations)
 
   if (alwaysDisabled) return false
@@ -55,5 +64,10 @@ const isValidationsMet = (
       : dataValues.formDataId !== NEW_FORM_DATA_IDENTIFIER
     : true
 
-  return isFieldsConditionsMet && isAuthUserConditionsMet && isDataIdConditionsMet
+  // Dependent on screen
+  const isScreenConditionsMet = contextValues?.currentBreakpoint
+    ? !hideScreens.includes(contextValues.currentBreakpoint)
+    : true
+
+  return isFieldsConditionsMet && isAuthUserConditionsMet && isDataIdConditionsMet && isScreenConditionsMet
 }

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

@@ -3,7 +3,6 @@ import { FormPreservedItemKeys } from '../../../enums'
 
 export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues => {
   const baseServerUrl = Form.useWatch(FormPreservedItemKeys.BaseServerUrl, { form: formRef, preserve: true })
-  const companyKey = Form.useWatch(FormPreservedItemKeys.CompanyKey, { form: formRef, preserve: true })
   const isGeneratingPdf = Form.useWatch(FormPreservedItemKeys.IsGeneratingPDF, { form: formRef, preserve: true })
   const hasSignature = Form.useWatch(FormPreservedItemKeys.HasSignature, { form: formRef, preserve: true })
   const inPreviewMode = Form.useWatch(FormPreservedItemKeys.InPreviewMode, { form: formRef, preserve: true })
@@ -15,7 +14,6 @@ export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues
 
   return {
     [FormPreservedItemKeys.BaseServerUrl]: baseServerUrl,
-    [FormPreservedItemKeys.CompanyKey]: companyKey,
     [FormPreservedItemKeys.SubmissionPdfConfig]: submissionPdfConfig,
     [FormPreservedItemKeys.IsGeneratingPDF]: isGeneratingPdf,
     [FormPreservedItemKeys.HasSignature]: hasSignature,

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

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react'
+import { DeviceBreakpointEnum } from '../../../enums'
+import { DEVICE_BREAKPOINTS } from '../../../constants'
+
+const useGetCurrentBreakpoint = (): DeviceBreakpointEnum => {
+  const [width, setWidth] = useState<number>(typeof window !== 'undefined' ? window.innerWidth : 0)
+
+  useEffect(() => {
+    const handleResize = () => setWidth(window.innerWidth)
+
+    window.addEventListener('resize', handleResize)
+
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  if (!width) return DeviceBreakpointEnum.Default
+
+  // if (width < parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.Mobile])) return DeviceBreakpointEnum.Mobile
+
+  if (width < parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.TabletPortrait]))
+    return DeviceBreakpointEnum.TabletPortrait
+
+  if (width < parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.TabletLandscape]))
+    return DeviceBreakpointEnum.TabletLandscape
+
+  if (width < parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.Laptop])) return DeviceBreakpointEnum.Laptop
+
+  return DeviceBreakpointEnum.Default
+}
+
+export default useGetCurrentBreakpoint

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

@@ -1,10 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import client from '../../../functions/axios-handler'
-import { parseJSON } from '../../../functions/json-handlers'
+import { parseJSON } from '../../../functions/forms/json-handlers'
 import FormDataListSkeleton_Table from '../../common/loading-skeletons/table'
-import { IFormData, IFormDataListConfig, IFormLayoutRow, IFormSchema } from '../../../types'
+import { IFormData, IFormDataListConfig, IFormLayoutElement, IFormLayoutRow, IFormSchema } from '../../../types'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListTableComponent, { IReqDataConfig } from './table'
+import { DeviceBreakpointEnum } from '../../../enums'
 
 function FormDataListComponent({
   formName,
@@ -19,13 +20,16 @@ function FormDataListComponent({
   const [dataListConfig, setDataListConfig] = useState<
     | {
         dataListConfig: IFormDataListConfig & { configForFormId: number }
-        detailsLayout: IFormLayoutRow[]
+        detailsLayoutConfig: {
+          elements: { [key: string]: IFormLayoutElement }
+          layouts: { [key in DeviceBreakpointEnum]?: IFormLayoutRow[] }
+        }
       }
     | undefined
   >()
 
   const attachmentBaseUrl = useMemo(() => `${baseServerUrl}/api/attachment/${companyKey}`, [baseServerUrl, companyKey])
-  const dataListHeaderContext = { formId, userId, attachmentBaseUrl, formName }
+  const dataListHeaderContext = { formId, userId, attachmentBaseUrl, formName, companyKey }
 
   useEffect(() => {
     if (formId) {
@@ -36,7 +40,10 @@ function FormDataListComponent({
             // configForFormId is passed to ensure that the table shows the correct data list when the forms are switched quickly
             setDataListConfig({
               dataListConfig: { ...parsedData.dataListConfig, configForFormId: formId },
-              detailsLayout: parsedData.detailsConfig.layout,
+              detailsLayoutConfig: {
+                elements: parsedData.detailsConfig.elements,
+                layouts: parsedData.detailsConfig.layouts,
+              },
             })
           }
         }

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

@@ -1,11 +1,12 @@
 import { Form } from 'antd'
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import dayjs from 'dayjs'
-import { extractFiltersFromLayout } from '../../../functions'
-import { FilterConfigTypeEnum, FormPreservedItemKeys } from '../../../enums'
+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 { DynamicFormButtonRender, ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
+import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import {
   DEFAULT_NO_FILTER,
   DEFAULT_NO_SORTER,
@@ -13,20 +14,17 @@ import {
   IDataListHeaderContext,
   IReqDataConfig,
 } from './table'
-import client from '../../../functions/axios-handler'
 import {
   IFilterByAuthUser,
-  IFilterByLinkedForm,
   IFilterConfig,
   IFilterCustom,
   IFilterNested,
   IFilterSimple,
-  IFormData,
-  IFormLayoutRow,
+  IFormDetailsConfig,
 } from '../../../types'
 
 export default function FormDataListHeaderComponent({
-  layout,
+  layoutConfig,
   titleComponent,
   defaultFilter,
   startLoading,
@@ -36,7 +34,14 @@ export default function FormDataListHeaderComponent({
 }: IFormDataListHeaderComponent) {
   const [dataListHeaderFormRef] = Form.useForm()
   const [filterConfigs, setFilterConfigs] = useState<IFilterNested>({})
-  const { userId, formId, formName, parentInfo } = dataListHeaderContext
+  const { userId, formId, formName, parentInfo, formDataId } = dataListHeaderContext
+
+  const currentBreakpoint = useGetCurrentBreakpoint()
+
+  const layout = useMemo(
+    () => layoutConfig.layouts[currentBreakpoint] ?? layoutConfig.layouts[DeviceBreakpointEnum.Default] ?? [],
+    [layoutConfig.layouts, currentBreakpoint],
+  )
 
   const filterValues = Form.useWatch([], dataListHeaderFormRef)
 
@@ -44,7 +49,7 @@ export default function FormDataListHeaderComponent({
     if (dataListHeaderFormRef) dataListHeaderFormRef.setFieldsValue({ [FormPreservedItemKeys.InPreviewMode]: false })
   }, [dataListHeaderFormRef])
 
-  useEffect(() => setFilterConfigs(extractFiltersFromLayout(layout)), [layout])
+  useEffect(() => setFilterConfigs(extractFiltersFromLayout(layoutConfig.elements)), [layoutConfig])
 
   const organizeFilterData = useCallback(
     async (values: { [key: string]: any }) => {
@@ -75,25 +80,28 @@ export default function FormDataListHeaderComponent({
           }
         }
 
-        const { customFilter, dynamicFilter } = filtersToApply.reduce(
-          (curr, next) => {
+        const { customFilter, 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 },
-              dynamicFilter: { ...curr.dynamicFilter, ...parsedDFilter },
+              dynamicFilters: [...curr.dynamicFilters, parsedDFilter],
             }
           },
-          { customFilter: {}, dynamicFilter: {} },
+          { customFilter: {}, dynamicFilters: [] },
         )
 
+        const updatedDynamicFilter = JSON.stringify(
+          dynamicFilters.length === 1 ? dynamicFilters[0] : { $and: dynamicFilters },
+        )
         updateReqData((c) => {
           if (!c)
             return {
               ...DEFAULT_NO_SORTER,
               pagination: DEFAULT_PAGINATION,
               customFilter,
-              dynamicFilter: JSON.stringify(dynamicFilter),
+              dynamicFilter: updatedDynamicFilter,
             }
 
           return {
@@ -101,7 +109,7 @@ export default function FormDataListHeaderComponent({
             sort: defaultFilter.sort,
             pagination: { ...defaultFilter.pagination, current: 1 },
             customFilter,
-            dynamicFilter: JSON.stringify(dynamicFilter),
+            dynamicFilter: updatedDynamicFilter,
           }
         })
       } else updateReqData(defaultFilter)
@@ -114,8 +122,8 @@ export default function FormDataListHeaderComponent({
   }, [filterValues])
 
   const formContext = useMemo(
-    () => ({ formRef: dataListHeaderFormRef, formName, formId }),
-    [dataListHeaderFormRef, formName, formId],
+    () => ({ formRef: dataListHeaderFormRef, formName, formId, formDataId, linkedParentsDataIds: parentInfo?.dataIds }),
+    [dataListHeaderFormRef, formName, formId, formDataId, parentInfo],
   )
 
   return (
@@ -126,6 +134,7 @@ export default function FormDataListHeaderComponent({
           rowData={row}
           titleComponent={titleComponent}
           formContext={formContext}
+          elements={layoutConfig.elements}
           renderButton={(btnProps, conditions) => (
             <DynamicFormButtonRender
               displayStateProps={{ btnProps, conditions, stateToPass: { parentInfo } }}
@@ -140,7 +149,7 @@ export default function FormDataListHeaderComponent({
 }
 
 type IFormDataListHeaderComponent = {
-  layout: IFormLayoutRow[]
+  layoutConfig: IFormDetailsConfig
   updateReqData: React.Dispatch<React.SetStateAction<IReqDataConfig | undefined>>
   titleComponent?: ReactNode
   defaultFilter: IReqDataConfig
@@ -148,26 +157,6 @@ type IFormDataListHeaderComponent = {
 } & ICustomFunctionCall &
   IDataListHeaderContext
 
-const getLinkedFormFilter = async (
-  config: IFilterByLinkedForm,
-  parentDataIds: string[],
-  lastRelIndex: number,
-): Promise<{ dataIds: string[]; foreignKey: string }> => {
-  const lastRel = config.relationshipPath[lastRelIndex]
-
-  if (lastRelIndex - 1 >= 0) {
-    const childOfLastRel = config.relationshipPath[lastRelIndex - 1]
-    const childFormDataRes = await client.post(`/api/formdata/list/${childOfLastRel.formId}`, {
-      dynamicFilter: JSON.stringify({ [`Data.${lastRel.foreignKey}`]: { $in: parentDataIds } }),
-    })
-    if (childFormDataRes.status === 200) {
-      const childDataIds = childFormDataRes.data.data.map((d: IFormData) => d.id)
-
-      return getLinkedFormFilter(config, childDataIds, lastRelIndex - 1)
-    } else return { dataIds: parentDataIds, foreignKey: childOfLastRel.foreignKey }
-  } else return { dataIds: parentDataIds, foreignKey: lastRel.foreignKey }
-}
-
 const handleFilterValues = async (
   config: IFilterConfig,
   value: any,
@@ -194,11 +183,11 @@ const handleFilterValues = async (
   }
 
   if (config.type === FilterConfigTypeEnum.ByLinkedForm && value) {
-    const finalFilter = await getLinkedFormFilter(config, [value], config.relationshipPath.length - 1)
+    const lastRel = config.relationshipPath[config.relationshipPath.length - 1]
 
     return {
       customFilter: {},
-      dynamicFilter: JSON.stringify({ [`Data.${finalFilter.foreignKey}`]: { $in: finalFilter.dataIds } }),
+      dynamicFilter: JSON.stringify({ $expr: { $eq: [`$${lastRel.formId}._id`, { $toObjectId: value }] } }),
     }
   }
 }

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

@@ -1,17 +1,23 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { IDataListParentInfo, IFormData, IFormDataListConfig, IFormLayoutRow, ITableColumn } from '../../../types'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { IDataListParentInfo, IFormData, IFormDataListConfig, IFormDetailsConfig, ITableColumn } from '../../../types'
 import FormDataListHeaderComponent from './table-header'
 import useDebounced from '../../common/custom-hooks/use-debounce.hook'
 import { FormInstance, Table } from 'antd'
-import { FilterConfigTypeEnum, FormDataListViewTypeEnum, MongoDbSortOrderEnum } from '../../../enums'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import { SorterResult } from 'antd/es/table/interface'
-import { appendOptionsFromDetailsLayout, extractElementsOptions, generateTableColumns } from '../../../functions'
+import { appendOptionsFromDetailsLayout, extractElementsOptions, generateTableColumns } from '../../../functions/forms'
 import { useLocation } from 'react-router-dom'
+import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
+import {
+  DeviceBreakpointEnum,
+  FilterConfigTypeEnum,
+  FormDataListViewTypeEnum,
+  MongoDbSortOrderEnum,
+} from '../../../enums'
 
 export default function FormDataListTableComponent({
   dataListConfig,
-  detailsLayout,
+  detailsLayoutConfig,
   parentLoading,
   dataList,
   loadingBlock,
@@ -20,8 +26,9 @@ export default function FormDataListTableComponent({
   onCustomFunctionCall,
   ...dataListHeaderContext
 }: IFormDataListTableComponent) {
+  const currentBreakpoint = useGetCurrentBreakpoint()
   const location = useLocation()
-  const [tableColumns, setTableColumns] = useState<ITableColumn[]>([])
+  const [tableColumns, setTableColumns] = useState<(ITableColumn & { hideScreens?: DeviceBreakpointEnum[] })[]>([])
   const [filterReqData, setFilterReqData, debouncedFilterReqData] = useDebounced<IReqDataConfig | undefined>(
     undefined,
     250,
@@ -29,7 +36,7 @@ export default function FormDataListTableComponent({
   const [otherConfigs, setOtherConfigs] = useState<
     (Partial<IFormDataListConfig> & { hasNoPagination: boolean }) | undefined
   >(undefined)
-  const [headerLayout, setHeaderLayout] = useState<IFormLayoutRow[]>([])
+  const [headerLayoutConfig, setHeaderLayoutConfig] = useState<IFormDetailsConfig>({ elements: {}, layouts: {} })
   const [isHandlingSchema, setIsHandlingSchema] = useState(true)
   const isFinishedHandlingRef = useRef(false)
 
@@ -39,7 +46,7 @@ export default function FormDataListTableComponent({
     pagination: DEFAULT_PAGINATION,
   })
 
-  const { attachmentBaseUrl, userId, formId, formName, formRef } = dataListHeaderContext
+  const { attachmentBaseUrl, userId, formId } = dataListHeaderContext
 
   useEffect(() => {
     setIsHandlingSchema(true)
@@ -50,26 +57,31 @@ export default function FormDataListTableComponent({
   }, [debouncedFilterReqData])
 
   const handleDataListConfig = useCallback(
-    async (config: IFormDataListConfig & { configForFormId?: number }, layout: IFormLayoutRow[] = []) => {
+    async (config: IFormDataListConfig & { configForFormId?: number }, layoutConfig?: IFormDetailsConfig) => {
       if (config.configForFormId && config.configForFormId !== formId) return
 
       const {
-        elements = [],
-        header = { layout: [] },
+        columns = [],
+        header = { elements: {}, layouts: {} },
         pagination,
         defaultFilter,
         defaultSorter,
         ...restConfigs
       } = config
 
-      const elementsWithOptions_key = elements.filter((op) => op.isSelectOption).map((op) => op.key)
+      const elementsWithOptions_key = columns
+        .filter((op) => op.isSelectOption)
+        .map((op) => (op.key.includes('Data.') ? op.key.replace('Data.', '') : op.key))
 
       let optionKeyValuePair = {}
       if (elementsWithOptions_key.length > 0)
-        optionKeyValuePair = await extractElementsOptions(layout, elementsWithOptions_key)
+        optionKeyValuePair = await extractElementsOptions(layoutConfig?.elements ?? {}, elementsWithOptions_key)
 
-      setTableColumns(generateTableColumns(elements, optionKeyValuePair, { attachmentBaseUrl, formName, formRef }))
-      setHeaderLayout(appendOptionsFromDetailsLayout(header.layout, layout))
+      setTableColumns(generateTableColumns(columns, optionKeyValuePair, dataListHeaderContext))
+      setHeaderLayoutConfig({
+        layouts: header.layouts,
+        elements: appendOptionsFromDetailsLayout(header.elements, layoutConfig?.elements),
+      })
       setOtherConfigs({ ...restConfigs, hasNoPagination: pagination?.hasNoPagination ?? false })
 
       if (defaultFilter && defaultFilter.type !== FilterConfigTypeEnum.NoFilter)
@@ -95,19 +107,24 @@ export default function FormDataListTableComponent({
       setIsHandlingSchema(false)
       isFinishedHandlingRef.current = true
     },
-    [attachmentBaseUrl, formName, userId, formId, formRef],
+    [attachmentBaseUrl, userId, formId, dataListHeaderContext],
   )
 
   useEffect(() => {
-    if (dataListConfig) handleDataListConfig(dataListConfig, detailsLayout)
-  }, [dataListConfig, detailsLayout])
+    if (dataListConfig) handleDataListConfig(dataListConfig, detailsLayoutConfig)
+  }, [dataListConfig, detailsLayoutConfig])
+
+  const tableColumnsFiltered = useMemo(
+    () => tableColumns.filter((op) => !Array.isArray(op.hideScreens) || !op.hideScreens.includes(currentBreakpoint)),
+    [tableColumns, currentBreakpoint],
+  )
 
   if (isHandlingSchema && loadingBlock) return loadingBlock
 
   return (
     <>
       <FormDataListHeaderComponent
-        layout={headerLayout}
+        layoutConfig={headerLayoutConfig}
         updateReqData={(req) => {
           if (!isFinishedHandlingRef.current) return
 
@@ -128,7 +145,7 @@ export default function FormDataListTableComponent({
       {dataListConfig?.listType === FormDataListViewTypeEnum.Table && (
         <Table<IFormData>
           dataSource={dataList.data}
-          columns={tableColumns}
+          columns={tableColumnsFiltered}
           rowKey={(record) => record.id}
           pagination={
             otherConfigs?.hasNoPagination
@@ -166,7 +183,7 @@ export default function FormDataListTableComponent({
 
 type IFormDataListTableComponent = {
   dataListConfig?: IFormDataListConfig & { configForFormId?: number }
-  detailsLayout?: IFormLayoutRow[]
+  detailsLayoutConfig?: IFormDetailsConfig
   dataList: { data: IFormData[]; total: number }
   parentLoading: boolean
   loadingBlock?: JSX.Element
@@ -208,4 +225,5 @@ export interface IDataListHeaderContext {
   formName?: string
   parentInfo?: IDataListParentInfo
   formRef?: FormInstance
+  companyKey?: string
 }

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

@@ -1,16 +1,17 @@
 import { Form } from 'antd'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { IFormLayoutRow, IFormSchema } from '../../../types'
+import { IFormLayoutElement, IFormLayoutRow, IFormSchema } from '../../../types'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../constants'
 import client from '../../../functions/axios-handler'
-import { parseJSON } from '../../../functions/json-handlers'
+import { parseJSON } from '../../../functions/forms/json-handlers'
 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 { extractDateFields, queryParamsToObject } from '../../../functions'
-import { FormPreservedItemKeys } from '../../../enums'
+import { extractDateFields, queryParamsToObject } from '../../../functions/forms'
+import { DeviceBreakpointEnum, FormPreservedItemKeys } from '../../../enums'
 import dayjs from 'dayjs'
+import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -22,10 +23,20 @@ export default function FormDataDetailsComponent({
   baseServerUrl,
   onCustomFunctionCall,
 }: IFormDataDetailsComponent) {
+  const location = useLocation()
   const [formDataRef] = Form.useForm()
   const [loadings, setLoadings] = useState({ layout: true, data: true })
-  const [layout, setLayout] = useState<IFormLayoutRow[]>([])
-  const location = useLocation()
+  const [layoutConfig, setLayoutConfig] = useState<{
+    elements: { [key: string]: IFormLayoutElement }
+    layouts: { [key in DeviceBreakpointEnum]?: IFormLayoutRow[] }
+  }>({ elements: {}, layouts: {} })
+
+  const currentBreakpoint = useGetCurrentBreakpoint()
+
+  const layout = useMemo(
+    () => layoutConfig.layouts[currentBreakpoint] ?? layoutConfig.layouts[DeviceBreakpointEnum.Default] ?? [],
+    [layoutConfig.layouts, currentBreakpoint],
+  )
 
   useEffect(() => {
     // this is for converting the screen to PDF
@@ -39,11 +50,10 @@ export default function FormDataDetailsComponent({
     if (formDataRef)
       formDataRef.setFieldsValue({
         [FormPreservedItemKeys.BaseServerUrl]: baseServerUrl,
-        [FormPreservedItemKeys.CompanyKey]: companyKey,
         [FormPreservedItemKeys.IsPublic]: isPublic,
         [FormPreservedItemKeys.InPreviewMode]: false,
       })
-  }, [formDataRef, baseServerUrl, companyKey, isPublic])
+  }, [formDataRef, baseServerUrl, isPublic])
 
   const fetchFormData = useCallback(
     (dFormId?: number, dateFields: string[] = []) => {
@@ -87,7 +97,7 @@ export default function FormDataDetailsComponent({
             const parsedData: IFormSchema | null = parseJSON(res.data.data)
             if (parsedData) {
               console.log('FORM LAYOUT FETCH (PARSED)', parsedData)
-              const { layout } = parsedData.detailsConfig
+              const { layouts: rawLayouts, elements } = parsedData.detailsConfig
 
               if (isPublic) {
                 if (parsedData.generateConfig?.submissionPdf?.enabled)
@@ -97,11 +107,11 @@ export default function FormDataDetailsComponent({
                   )
                 setLoadings((c) => ({ ...c, data: false }))
               } else {
-                const dateFields = extractDateFields(layout)
+                const dateFields = extractDateFields(elements)
 
                 fetchFormData(formId, dateFields)
               }
-              setLayout(layout)
+              setLayoutConfig({ elements, layouts: rawLayouts })
             }
           }
         })
@@ -110,8 +120,8 @@ export default function FormDataDetailsComponent({
   }, [formId, formKey, isPublic, formDataRef, fetchFormData])
 
   const formContext = useMemo(
-    () => ({ formId, formKey, formDataId, formRef: formDataRef, formName }),
-    [formDataId, formDataRef, formName, formId, formKey],
+    () => ({ formId, formKey, formDataId, formRef: formDataRef, formName, companyKey }),
+    [formDataId, formDataRef, formName, formId, formKey, companyKey],
   )
 
   if (loadings.layout || loadings.data) return <FormDataListSkeleton_Details />
@@ -123,6 +133,7 @@ export default function FormDataDetailsComponent({
           key={rowIdx}
           rowData={row}
           formContext={formContext}
+          elements={layoutConfig.elements}
           renderButton={(btnProps, conditions) => (
             <DynamicFormButtonRender
               displayStateProps={{ btnProps, conditions, defaulDisabled: true }}

package/src/components/form/3-preview/index.tsx

@@ -1,6 +1,6 @@
 import { Form } from 'antd'
-import { IFormLayoutRow } from '../../../types'
-import { FormPreservedItemKeys, ResponsivenessDeviceEnum } from '../../../enums'
+import { IFormLayoutElement, IFormLayoutRow } from '../../../types'
+import { FormPreservedItemKeys } from '../../../enums'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import { DynamicFormButtonRender } from '../layout-renderer/3-element/1-dynamic-button'
 import { useNotification } from '../../common/custom-hooks'
@@ -8,11 +8,11 @@ import { ReactNode, useEffect, useMemo } from 'react'
 
 export const FormPreviewComponent = ({
   layout,
-  breakpointDevice,
+  elements = {},
   titleComponent,
 }: {
   layout: IFormLayoutRow[]
-  breakpointDevice?: ResponsivenessDeviceEnum
+  elements: { [key: string]: IFormLayoutElement }
   titleComponent?: ReactNode
 }) => {
   const [previewFormRef] = Form.useForm()
@@ -30,9 +30,9 @@ export const FormPreviewComponent = ({
         <LayoutRendererRow
           key={rowIdx}
           rowData={row}
-          breakpointDevice={breakpointDevice}
           titleComponent={titleComponent}
           formContext={formContext}
+          elements={elements}
           renderButton={(btnProps, conditions) => (
             <DynamicFormButtonRender
               displayStateProps={{ btnProps, conditions }}

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { IFormLayoutRowHeader } from '../../../../types'
-import { kebabCaseToCamelCase } from '../../../../functions'
+import { kebabCaseToCamelCase } from '../../../../functions/forms'
 import { FaCaretDown, FaCaretUp } from 'react-icons/fa6'
 
 export default function RowHeader({