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,32 +439,53 @@ const DashboardProduction = () => {
 
             {/* Location */}
             <div className='px-4'>
-              <SelectInput
+              {comparisonTypeOptions.find(
-                label='Farm'
+                (option) => option.value === formik.values.comparisonType
-                value={formik.values.location}
+              )?.value === 'FARM' ? (
-                onInputChange={setInputValueLocation}
+                <SelectInputCheckbox
-                onMenuScrollToBottom={loadMoreLocation}
+                  label='Farm'
-                onChange={(selected) => {
+                  value={formik.values.location}
-                  formik.setFieldValue('location', selected);
+                  onInputChange={setInputValueLocation}
-                  // Update selectedLocationIds for kandang filter
+                  onMenuScrollToBottom={loadMoreLocation}
-                  setSelectedLocationIds(normalizeToArray(selected));
+                  onChange={(selected) => {
-                  // Reset dependent fields when location changes
+                    formik.setFieldValue('location', selected);
-                  formik.setFieldValue('flock', []);
+                    // Update selectedLocationIds for kandang filter
-                  formik.setFieldValue('kandang', []);
+                    setSelectedLocationIds(normalizeToArray(selected));
-                }}
+                    // Reset dependent fields when location changes
-                errorMessage={formik.errors.location as string}
+                    formik.setFieldValue('flock', []);
-                options={locationOptions}
+                    formik.setFieldValue('kandang', []);
-                isLoading={isLoadingLocationOptions}
+                  }}
-                isMulti={
+                  errorMessage={formik.errors.location as string}
-                  comparisonTypeOptions.find(
+                  options={locationOptions}
-                    (option) => option.value === formik.values.comparisonType
+                  isLoading={isLoadingLocationOptions}
-                  )?.value === 'FARM'
+                  isError={
-                }
+                    Boolean(formik.errors.location) &&
-                isError={
+                    Boolean(formik.touched.location)
-                  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,27 +497,43 @@ const DashboardProduction = () => {
               )
             ) && (
               <div className='px-4'>
-                <SelectInput
+                {comparisonTypeOptions.find(
-                  label='Flock'
+                  (option) => option.value === formik.values.comparisonType
-                  value={formik.values.flock}
+                )?.value === 'FLOCK' ? (
-                  onChange={(selected) =>
+                  <SelectInputCheckbox
-                    formik.setFieldValue('flock', selected)
+                    label='Flock'
-                  }
+                    value={formik.values.flock as OptionType[]}
-                  errorMessage={formik.errors.flock as string}
+                    onChange={(selected) =>
-                  onInputChange={setInputValueFlock}
+                      formik.setFieldValue('flock', selected)
-                  onMenuScrollToBottom={loadMoreFlock}
+                    }
-                  options={flockOptions}
+                    errorMessage={formik.errors.flock as string}
-                  isLoading={isLoadingFlockOptions}
+                    onInputChange={setInputValueFlock}
-                  isMulti={
+                    onMenuScrollToBottom={loadMoreFlock}
-                    comparisonTypeOptions.find(
+                    options={flockOptions}
-                      (option) => option.value === formik.values.comparisonType
+                    isLoading={isLoadingFlockOptions}
-                    )?.value === 'FLOCK'
+                    isError={
-                  }
+                      Boolean(formik.errors.flock) &&
-                  isError={
+                      Boolean(formik.touched.flock)
-                    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,27 +543,43 @@ const DashboardProduction = () => {
               !(formik.values.comparisonType === 'KANDANG')
             ) && (
               <div className='px-4'>
-                <SelectInput
+                {comparisonTypeOptions.find(
-                  label='Kandang'
+                  (option) => option.value === formik.values.comparisonType
-                  value={formik.values.kandang}
+                )?.value === 'KANDANG' ? (
-                  onChange={(selected) =>
+                  <SelectInputCheckbox
-                    formik.setFieldValue('kandang', selected)
+                    label='Kandang'
-                  }
+                    value={formik.values.kandang as OptionType[]}
-                  errorMessage={formik.errors.kandang as string}
+                    onChange={(selected) =>
-                  onInputChange={setInputValueKandang}
+                      formik.setFieldValue('kandang', selected)
-                  onMenuScrollToBottom={loadMoreKandang}
+                    }
-                  options={kandangOptions}
+                    errorMessage={formik.errors.kandang as string}
-                  isLoading={isLoadingKandangOptions}
+                    onInputChange={setInputValueKandang}
-                  isMulti={
+                    onMenuScrollToBottom={loadMoreKandang}
-                    comparisonTypeOptions.find(
+                    options={kandangOptions}
-                      (option) => option.value === formik.values.comparisonType
+                    isLoading={isLoadingKandangOptions}
-                    )?.value === 'KANDANG'
+                    isError={
-                  }
+                      Boolean(formik.errors.kandang) &&
-                  isError={
+                      Boolean(formik.touched.kandang)
-                    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>
             )}