Merge branch 'fix/dashboard' into 'development'

[FIX/FE] Fixing Select Input Component UI

See merge request mbugroup/lti-web-client!231

src/components/input/SelectInput.tsx

@@ -312,6 +312,12 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         }
         styles={{
           menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+          multiValue(base) {
+            return {
+              ...base,
+              borderRadius: '8px',
+            };
+          },
         }}
         onMenuScrollToBottom={onMenuScrollToBottom}
       />

src/components/input/SelectInputCheckbox.tsx

@@ -40,7 +40,7 @@ const CheckboxOption = <
         type='checkbox'
         checked={isSelected}
         onChange={() => null}
-        className='checkbox checkbox-sm checkbox-primary pointer-events-none'
+        className='checkbox checkbox-sm rounded checkbox-primary pointer-events-none'
       />
       <label className='cursor-pointer flex-1 select-none'>{label}</label>
     </div>

src/components/pages/dashboard/DashboardProduction.tsx

@@ -38,6 +38,8 @@ import Dropdown from '@/components/Dropdown';
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import { useDashboardStore } from '@/stores/dashboard';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
+import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 
 // Helper function to normalize values to array
 const normalizeToArray = (
@@ -413,7 +415,7 @@ const DashboardProduction = () => {
 
             {formik.values.analysisMode === 'COMPARISON' && (
               <div className='px-4'>
-                <SelectInput
+                <SelectInputRadio
                   label='Compared By'
                   value={comparisonTypeOptions.find(
                     (option) => option.value === formik.values.comparisonType
@@ -437,7 +439,10 @@ const DashboardProduction = () => {
 
             {/* Location */}
             <div className='px-4'>
-              <SelectInput
+              {comparisonTypeOptions.find(
+                (option) => option.value === formik.values.comparisonType
+              )?.value === 'FARM' ? (
+                <SelectInputCheckbox
                   label='Farm'
                   value={formik.values.location}
                   onInputChange={setInputValueLocation}
@@ -453,16 +458,34 @@ const DashboardProduction = () => {
                   errorMessage={formik.errors.location as string}
                   options={locationOptions}
                   isLoading={isLoadingLocationOptions}
-                isMulti={
-                  comparisonTypeOptions.find(
-                    (option) => option.value === formik.values.comparisonType
-                  )?.value === 'FARM'
-                }
                   isError={
                     Boolean(formik.errors.location) &&
                     Boolean(formik.touched.location)
                   }
                 />
+              ) : (
+                <SelectInputRadio
+                  label='Farm'
+                  value={formik.values.location as OptionType}
+                  onInputChange={setInputValueLocation}
+                  onMenuScrollToBottom={loadMoreLocation}
+                  onChange={(selected) => {
+                    formik.setFieldValue('location', selected);
+                    // Update selectedLocationIds for kandang filter
+                    setSelectedLocationIds(normalizeToArray(selected));
+                    // Reset dependent fields when location changes
+                    formik.setFieldValue('flock', []);
+                    formik.setFieldValue('kandang', []);
+                  }}
+                  errorMessage={formik.errors.location as string}
+                  options={locationOptions}
+                  isLoading={isLoadingLocationOptions}
+                  isError={
+                    Boolean(formik.errors.location) &&
+                    Boolean(formik.touched.location)
+                  }
+                />
+              )}
             </div>
 
             {/* Flock */}
@@ -474,9 +497,12 @@ const DashboardProduction = () => {
               )
             ) && (
               <div className='px-4'>
-                <SelectInput
+                {comparisonTypeOptions.find(
+                  (option) => option.value === formik.values.comparisonType
+                )?.value === 'FLOCK' ? (
+                  <SelectInputCheckbox
                     label='Flock'
-                  value={formik.values.flock}
+                    value={formik.values.flock as OptionType[]}
                     onChange={(selected) =>
                       formik.setFieldValue('flock', selected)
                     }
@@ -485,16 +511,29 @@ const DashboardProduction = () => {
                     onMenuScrollToBottom={loadMoreFlock}
                     options={flockOptions}
                     isLoading={isLoadingFlockOptions}
-                  isMulti={
-                    comparisonTypeOptions.find(
-                      (option) => option.value === formik.values.comparisonType
-                    )?.value === 'FLOCK'
-                  }
                     isError={
                       Boolean(formik.errors.flock) &&
                       Boolean(formik.touched.flock)
                     }
                   />
+                ) : (
+                  <SelectInputRadio
+                    label='Flock'
+                    value={formik.values.flock as OptionType}
+                    onChange={(selected) =>
+                      formik.setFieldValue('flock', selected)
+                    }
+                    errorMessage={formik.errors.flock as string}
+                    onInputChange={setInputValueFlock}
+                    onMenuScrollToBottom={loadMoreFlock}
+                    options={flockOptions}
+                    isLoading={isLoadingFlockOptions}
+                    isError={
+                      Boolean(formik.errors.flock) &&
+                      Boolean(formik.touched.flock)
+                    }
+                  />
+                )}
               </div>
             )}
 
@@ -504,9 +543,12 @@ const DashboardProduction = () => {
               !(formik.values.comparisonType === 'KANDANG')
             ) && (
               <div className='px-4'>
-                <SelectInput
+                {comparisonTypeOptions.find(
+                  (option) => option.value === formik.values.comparisonType
+                )?.value === 'KANDANG' ? (
+                  <SelectInputCheckbox
                     label='Kandang'
-                  value={formik.values.kandang}
+                    value={formik.values.kandang as OptionType[]}
                     onChange={(selected) =>
                       formik.setFieldValue('kandang', selected)
                     }
@@ -515,16 +557,29 @@ const DashboardProduction = () => {
                     onMenuScrollToBottom={loadMoreKandang}
                     options={kandangOptions}
                     isLoading={isLoadingKandangOptions}
-                  isMulti={
-                    comparisonTypeOptions.find(
-                      (option) => option.value === formik.values.comparisonType
-                    )?.value === 'KANDANG'
-                  }
                     isError={
                       Boolean(formik.errors.kandang) &&
                       Boolean(formik.touched.kandang)
                     }
                   />
+                ) : (
+                  <SelectInputRadio
+                    label='Kandang'
+                    value={formik.values.kandang as OptionType}
+                    onChange={(selected) =>
+                      formik.setFieldValue('kandang', selected)
+                    }
+                    errorMessage={formik.errors.kandang as string}
+                    onInputChange={setInputValueKandang}
+                    onMenuScrollToBottom={loadMoreKandang}
+                    options={kandangOptions}
+                    isLoading={isLoadingKandangOptions}
+                    isError={
+                      Boolean(formik.errors.kandang) &&
+                      Boolean(formik.touched.kandang)
+                    }
+                  />
+                )}
               </div>
             )}