Enhance ObjectProperty component to support conditional input rendering

- Added `useFormItem` prop to control input rendering behavior.
- Refactored input rendering logic to streamline component structure and improve maintainability.
- Updated various input types to utilize the new `inputProps` for consistent handling of properties.

src/components/Dashboard/common/ObjectProperty.jsx

@@ -85,6 +85,7 @@ const ObjectProperty = ({
   minimal = false,
   previewOpen = false,
   showPreview = true,
+  useFormItem = true,
   options = [],
   roundNumber = false,
   fixedNumber = false,
@@ -613,171 +614,135 @@ const ObjectProperty = ({
       mergedFormItemProps.onChange = onChange
     }
 
+    const inputProps = useFormItem
+      ? {}
+      : {
+          value,
+          onChange,
+          disabled
+        }
+
+    const renderInput = () => {
       switch (type) {
         case 'netGross':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <NetGrossInput
               difference={difference}
               prefix={prefix}
               suffix={suffix}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'secret':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <Input.Password
               placeholder={label}
-              disabled={disabled}
-              {...mergedFormItemProps}
               iconRender={(visible) =>
                 visible ? <EyeSlashIcon /> : <EyeIcon />
               }
+              {...mergedFormItemProps}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'wsprotocol':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <Select
               defaultValue='ws'
-              disabled={disabled}
               options={[
                 { value: 'ws', label: 'Websocket' },
                 { value: 'wss', label: 'Websocket Secure' }
               ]}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'select':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <CustomSelect
               placeholder={'Select a ' + label.toLowerCase() + '...'}
-              disabled={disabled}
               options={Array.isArray(options) ? options : []}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'priceMode':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <Select
               defaultValue='margin'
-              disabled={disabled}
               options={[
                 { value: 'margin', label: 'Margin %' },
                 { value: 'amount', label: '£ Amount' }
               ]}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'bool':
           return (
-          <Form.Item
+            <Switch
-            name={formItemName}
+              {...inputProps}
-            {...mergedFormItemProps}
+              {...(useFormItem ? {} : { checked: value })}
-            valuePropName='checked'
+            />
-          >
-            <Switch disabled={disabled} />
-          </Form.Item>
           )
         case 'dateTime':
           return (
-          <Form.Item
-            name={formItemName}
-            {...mergedFormItemProps}
-            getValueProps={(v) => ({ value: v ? dayjs(v) : null })}
-          >
             <DatePicker
               showTime
               style={{ width: '100%' }}
-              disabled={disabled}
+              {...inputProps}
+              {...(useFormItem ? {} : { value: value ? dayjs(value) : null })}
             />
-          </Form.Item>
           )
         case 'country':
-        return (
+          return <CountrySelect {...inputProps} />
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <CountrySelect disabled={disabled} />
-          </Form.Item>
-        )
         case 'color':
           return (
-          <Form.Item
+            <ColorSelector
-            name={formItemName}
+              required={required}
-            {...mergedFormItemProps}
+              {...inputProps}
-            valuePropName='value'
+              {...(useFormItem ? {} : { value })}
-            getValueFromEvent={(v) => v}
+            />
-          >
-            <ColorSelector required={required} disabled={disabled} />
-          </Form.Item>
           )
         case 'weight':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <InputNumber
               suffix='g'
               style={{ width: '100%' }}
               placeholder={label}
-              disabled={disabled}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'number':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <InputNumber
               placeholder={label}
-              disabled={disabled}
               prefix={prefix}
               suffix={suffix}
               min={min}
               max={max}
               step={step}
-              {...mergedFormItemProps}
               style={{ width: '100%' }}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'text':
-        return (
+          return <Input placeholder={label} {...inputProps} />
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <Input
-              placeholder={label}
-              {...mergedFormItemProps}
-              disabled={disabled}
-            />
-          </Form.Item>
-        )
         case 'codeBlock':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <CodeBlockEditor
               code={value}
               language={language}
-              disabled={disabled}
               height={height}
               minimal={minimal}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'markdown':
-        return (
+          return <MarkdownInput {...inputProps} />
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <MarkdownInput value={value} />
-          </Form.Item>
-        )
         case 'material':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <Select
               options={MATERIAL_OPTIONS}
               placeholder={label}
-              disabled={disabled}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'id':
           // id is not editable, just show view mode
@@ -792,76 +757,76 @@ const ObjectProperty = ({
           }
         case 'object':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <ObjectSelect
               type={objectType}
-              disabled={disabled}
               masterFilter={masterFilter}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'objectType':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+            <ObjectTypeSelect masterFilter={masterFilter} {...inputProps} />
-            <ObjectTypeSelect disabled={disabled} masterFilter={masterFilter} />
-          </Form.Item>
           )
         case 'objectList':
-        return (
+          return <ObjectSelect type={objectType} multiple {...inputProps} />
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <ObjectSelect type={objectType} multiple disabled={disabled} />
-          </Form.Item>
-        )
         case 'tags':
-        return (
+          return <TagsInput {...inputProps} />
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <TagsInput />
-          </Form.Item>
-        )
         case 'file':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <FileUpload
-              value={value}
               multiple={false}
               defaultPreviewOpen={previewOpen}
               showPreview={showPreview}
               showInfo={showHyperlink}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'fileList':
           return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
             <FileUpload
-              value={value}
               multiple={true}
               defaultPreviewOpen={previewOpen}
               showPreview={showPreview}
               showInfo={showHyperlink}
+              {...inputProps}
             />
-          </Form.Item>
           )
         case 'objectChildren': {
           return (
             <ObjectChildTable
-            value={value}
               properties={properties}
               objectData={objectData}
               isEditing={true}
-            formListName={formItemName}
               rollups={rollups}
+              {...inputProps}
             />
           )
         }
         default:
+          return <Input placeholder={label} {...inputProps} />
+      }
+    }
+
+    if (!useFormItem) {
+      return renderInput()
+    }
+
     return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+      <Form.Item
-            <Input placeholder={label} {...mergedFormItemProps} />
+        name={formItemName}
+        {...mergedFormItemProps}
+        {...(type === 'bool' ? { valuePropName: 'checked' } : {})}
+        {...(type === 'color'
+          ? { valuePropName: 'value', getValueFromEvent: (v) => v }
+          : {})}
+        {...(type === 'dateTime'
+          ? { getValueProps: (v) => ({ value: v ? dayjs(v) : null }) }
+          : {})}
+      >
+        {renderInput()}
       </Form.Item>
     )
   }
-  }
 
   const property = renderProperty()
   // Render the property directly (remove useDescriptions functionality)
@@ -892,6 +857,7 @@ ObjectProperty.propTypes = {
   height: PropTypes.string,
   previewOpen: PropTypes.bool,
   showPreview: PropTypes.bool,
+  useFormItem: PropTypes.bool,
   showHyperlink: PropTypes.bool,
   options: PropTypes.array,
   showSince: PropTypes.bool,