Add ObjectList component to display a list of objects with icons and IDs, enhancing the dashboard's UI.

src/components/Dashboard/common/ObjectList.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { List, Typography, Flex } from 'antd'
+import { getModelByName } from '../../../database/ObjectModels'
+import IdDisplay from './IdDisplay'
+
+const { Text } = Typography
+
+const ObjectList = ({ value, objectType, bordered = true }) => {
+  if (!value || !Array.isArray(value) || value.length === 0) {
+    return <Text type='secondary'>n/a</Text>
+  }
+  return (
+    <List
+      size='small'
+      bordered={bordered}
+      dataSource={value}
+      renderItem={(item) => {
+        const model = getModelByName(objectType)
+        const Icon = model.icon
+        return (
+          <List.Item>
+            <Flex gap={'small'} align='center'>
+              <Icon />
+              {item?.name ? <Text ellipsis>{item.name}</Text> : null}
+              {item?._id ? (
+                <IdDisplay
+                  id={item?._id}
+                  longId={false}
+                  type={objectType}
+                  showHyperlink={true}
+                />
+              ) : null}
+            </Flex>
+          </List.Item>
+        )
+      }}
+      style={{ width: '100%' }}
+    />
+  )
+}
+
+ObjectList.propTypes = {
+  value: PropTypes.array,
+  bordered: PropTypes.bool,
+  objectType: PropTypes.string
+}
+
+export default ObjectList