From 9a1be88bce336b4272105be5d15d7acedf89a0a4 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Wed, 21 Jan 2026 15:18:37 +0700
Subject: [PATCH] fix(FE): fixing dashboard select input UI component

---
 src/components/input/SelectInput.tsx          |   6 +
 src/components/input/SelectInputCheckbox.tsx  |   2 +-
 .../pages/dashboard/DashboardProduction.tsx   | 193 +++++++++++-------
 3 files changed, 131 insertions(+), 70 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 9cc9fda5..2571efc5 100644
--- a/src/components/input/SelectInput.tsx
+++ b/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}
       />
diff --git a/src/components/input/SelectInputCheckbox.tsx b/src/components/input/SelectInputCheckbox.tsx
index 0827a70a..24125204 100644
--- a/src/components/input/SelectInputCheckbox.tsx
+++ b/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>
diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index 079b082c..dd4abd47 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/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
-                label='Farm'
-                value={formik.values.location}
-                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}
-                isMulti={
-                  comparisonTypeOptions.find(
-                    (option) => option.value === formik.values.comparisonType
-                  )?.value === 'FARM'
-                }
-                isError={
-                  Boolean(formik.errors.location) &&
-                  Boolean(formik.touched.location)
-                }
-              />
+              {comparisonTypeOptions.find(
+                (option) => option.value === formik.values.comparisonType
+              )?.value === 'FARM' ? (
+                <SelectInputCheckbox
+                  label='Farm'
+                  value={formik.values.location}
+                  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)
+                  }
+                />
+              ) : (
+                <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
-                  label='Flock'
-                  value={formik.values.flock}
-                  onChange={(selected) =>
-                    formik.setFieldValue('flock', selected)
-                  }
-                  errorMessage={formik.errors.flock as string}
-                  onInputChange={setInputValueFlock}
-                  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)
-                  }
-                />
+                {comparisonTypeOptions.find(
+                  (option) => option.value === formik.values.comparisonType
+                )?.value === 'FLOCK' ? (
+                  <SelectInputCheckbox
+                    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)
+                    }
+                  />
+                ) : (
+                  <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
-                  label='Kandang'
-                  value={formik.values.kandang}
-                  onChange={(selected) =>
-                    formik.setFieldValue('kandang', selected)
-                  }
-                  errorMessage={formik.errors.kandang as string}
-                  onInputChange={setInputValueKandang}
-                  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)
-                  }
-                />
+                {comparisonTypeOptions.find(
+                  (option) => option.value === formik.values.comparisonType
+                )?.value === 'KANDANG' ? (
+                  <SelectInputCheckbox
+                    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)
+                    }
+                  />
+                ) : (
+                  <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>
             )}