Add ObjectTypeDisplay and ObjectTypeSelect components for enhanced object type management

- Introduced ObjectTypeDisplay component to visually represent object types with optional icons and labels.
- Created ObjectTypeSelect component to allow users to select object types from a dropdown, utilizing ObjectTypeDisplay for rendering options.
- Implemented prop types for both components to ensure proper type checking and documentation clarity.

src/components/Dashboard/common/ObjectTypeDisplay.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Tag, Typography } from 'antd'
+import { getModelByName } from '../../../database/ObjectModels'
+
+const { Text } = Typography
+
+const ObjectTypeDisplay = ({
+  objectType,
+  showIcon = true,
+  showLabel = true,
+  style,
+  color = 'default'
+}) => {
+  if (!objectType) {
+    return <Text type='secondary'>n/a</Text>
+  }
+
+  const model = getModelByName(objectType)
+
+  if (!model || model.name === 'unknown') {
+    return <Text type='secondary'>Unknown type</Text>
+  }
+
+  const Icon = model.icon
+
+  return (
+    <Tag
+      color={color}
+      style={{ margin: 0, ...style }}
+      icon={showIcon && Icon ? <Icon /> : undefined}
+    >
+      {showLabel && model.label && model.label}
+    </Tag>
+  )
+}
+
+ObjectTypeDisplay.propTypes = {
+  objectType: PropTypes.string,
+  showIcon: PropTypes.bool,
+  showLabel: PropTypes.bool,
+  showPrefix: PropTypes.bool,
+  style: PropTypes.object,
+  color: PropTypes.string
+}
+
+export default ObjectTypeDisplay

src/components/Dashboard/common/ObjectTypeSelect.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Select } from 'antd'
+import PropTypes from 'prop-types'
+import { objectModels } from '../../../database/ObjectModels'
+import ObjectTypeDisplay from './ObjectTypeDisplay'
+
+const ObjectTypeSelect = ({
+  value,
+  onChange,
+  style,
+  placeholder = 'Select object type...',
+  showSearch = true,
+  allowClear = true,
+  disabled = false
+}) => {
+  // Create options from object models
+  const options = objectModels
+    .sort((a, b) => a.label.localeCompare(b.label))
+    .map((model) => ({
+      value: model.name,
+      label: <ObjectTypeDisplay objectType={model.name} />
+    }))
+
+  console.log('VALUE', value)
+
+  return (
+    <Select
+      showSearch={showSearch}
+      style={{ width: '100%', ...style }}
+      placeholder={placeholder}
+      optionFilterProp='children'
+      value={value}
+      onChange={onChange}
+      allowClear={allowClear}
+      disabled={disabled}
+      filterOption={(input, option) =>
+        option.label.props.children[1].props.children
+          .toLowerCase()
+          .indexOf(input.toLowerCase()) >= 0
+      }
+      options={options}
+    />
+  )
+}
+
+ObjectTypeSelect.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  style: PropTypes.object,
+  placeholder: PropTypes.string,
+  showSearch: PropTypes.bool,
+  allowClear: PropTypes.bool,
+  disabled: PropTypes.bool
+}
+
+export default ObjectTypeSelect