Add CustomSelect component for enhanced selection functionality with option change handling

src/components/Dashboard/common/CustomSelect.jsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react'
+import { Select } from 'antd'
+import PropTypes from 'prop-types'
+
+const CustomSelect = ({
+  placeholder,
+  disabled,
+  options = [],
+  value,
+  onChange,
+  ...rest
+}) => {
+  const prevOptionsRef = useRef(options)
+
+  useEffect(() => {
+    // Check if options have changed
+    const optionsChanged =
+      JSON.stringify(prevOptionsRef.current) !== JSON.stringify(options)
+
+    if (optionsChanged && value !== undefined && value !== null) {
+      // Check if current value exists in new options
+      const valueExists =
+        Array.isArray(options) &&
+        options.some((option) => option.value === value)
+
+      // If value doesn't exist in new options, clear it
+      if (!valueExists && onChange) {
+        onChange(undefined)
+      }
+    }
+
+    // Update the ref with current options
+    prevOptionsRef.current = options
+  }, [options, value, onChange])
+
+  return (
+    <Select
+      placeholder={placeholder}
+      disabled={disabled}
+      options={Array.isArray(options) ? options : []}
+      value={value}
+      onChange={onChange}
+      {...rest}
+    />
+  )
+}
+
+CustomSelect.propTypes = {
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  options: PropTypes.array,
+  value: PropTypes.any,
+  onChange: PropTypes.func
+}
+
+export default CustomSelect