fix(FE): adding color to negative value excel and change select UI

src/components/input/SelectInputRadio.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useMemo } from 'react';
+import {
+  OptionProps,
+  GroupBase,
+  components as ReactSelectComponents,
+} from 'react-select';
+import SelectInput, { OptionType, SelectInputProps } from './SelectInput';
+import { cn } from '@/lib/helper';
+
+interface SelectInputRadioProps<T = OptionType>
+  extends Omit<SelectInputProps<T>, 'closeMenuOnSelect' | 'optionComponent'> {
+  closeMenuOnSelect?: boolean;
+}
+
+const RadioOption = <
+  T extends OptionType,
+  IsMulti extends boolean,
+  Group extends GroupBase<T>,
+>(
+  props: OptionProps<T, IsMulti, Group>
+) => {
+  const { isSelected, label, innerRef, innerProps, className } = props;
+
+  return (
+    <div
+      ref={innerRef}
+      {...innerProps}
+      className={cn(
+        'flex items-center gap-2 px-3 py-2 cursor-pointer',
+        className
+      )}
+    >
+      <input
+        type='radio'
+        checked={isSelected}
+        onChange={() => null}
+        className='radio radio-sm radio-primary pointer-events-none'
+      />
+      <label className='cursor-pointer flex-1 select-none'>{label}</label>
+    </div>
+  );
+};
+
+const SelectInputRadio = <T extends OptionType>(
+  props: SelectInputRadioProps<T>
+) => {
+  const { closeMenuOnSelect = true, className, ...restProps } = props;
+
+  const customComponents = useMemo(() => {
+    return {
+      Option: RadioOption as typeof ReactSelectComponents.Option,
+    };
+  }, []);
+
+  return (
+    <SelectInput<T>
+      {...restProps}
+      closeMenuOnSelect={closeMenuOnSelect}
+      className={{
+        ...className,
+        select: cn(className?.select, 'select-radio'),
+      }}
+      components={customComponents}
+    />
+  );
+};
+
+export default SelectInputRadio;