refactor(FE-355): Use NumberInput and SelectInput for filters

src/components/pages/report/sale/tab/HppPerKandangTab.tsx

@@ -7,8 +7,7 @@ import SelectInput, {
   OptionType,
 } from '@/components/input/SelectInput';
 import DateInput from '@/components/input/DateInput';
-import TextInput from '@/components/input/TextInput';
-import CheckboxInput from '@/components/input/CheckboxInput';
+import NumberInput from '@/components/input/NumberInput';
 import { AreaApi } from '@/services/api/master-data';
 import { LocationApi } from '@/services/api/master-data';
 import { KandangApi } from '@/services/api/master-data';
@@ -34,9 +33,6 @@ interface Totals {
 }
 
 const HppPerKandangTab = () => {
-  // ===== STATE MANAGEMENT =====
-  const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
-
   // ===== SUBMISSION STATE =====
   const [isSubmitted, setIsSubmitted] = useState(false);
 
@@ -71,6 +67,11 @@ const HppPerKandangTab = () => {
   const { options: kandangOptions, isLoadingOptions: isLoadingKandangs } =
     useSelect(KandangApi.basePath, 'id', 'name', 'search');
 
+  const showUnrecordedOptions: OptionType[] = [
+    { value: 'false', label: 'Sembunyikan' },
+    { value: 'true', label: 'Tampilkan' },
+  ];
+
   const areaChangeHandler = useCallback(
     (val: OptionType | OptionType[] | null) => {
       const newVal = val as OptionType;
@@ -103,7 +104,7 @@ const HppPerKandangTab = () => {
   >(
     (e) => {
       const val = e.target.value;
-      updateFilter('weight_min', val || '');
+      updateFilter('weight_min', val ? String(parseInt(val, 10)) : '');
       setIsSubmitted(false);
     },
     [updateFilter]
@@ -114,7 +115,7 @@ const HppPerKandangTab = () => {
   >(
     (e) => {
       const val = e.target.value;
-      updateFilter('weight_max', val || '');
+      updateFilter('weight_max', val ? String(parseInt(val, 10)) : '');
       setIsSubmitted(false);
     },
     [updateFilter]
@@ -129,12 +130,10 @@ const HppPerKandangTab = () => {
     [updateFilter]
   );
 
-  const showUnrecordedChangeHandler = useCallback<
-    ChangeEventHandler<HTMLInputElement>
-  >(
-    (e) => {
-      const checked = e.target.checked;
-      updateFilter('show_unrecorded', checked);
+  const showUnrecordedChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      updateFilter('show_unrecorded', newVal?.value === 'true');
       setIsSubmitted(false);
     },
     [updateFilter]
@@ -308,7 +307,6 @@ const HppPerKandangTab = () => {
         }
       );
 
-      // Calculate averages
       const avgWeight =
         totals.total_remaining_chicken_birds > 0
           ? totals.total_remaining_chicken_weight_kg /
@@ -716,22 +714,22 @@ const HppPerKandangTab = () => {
         </div>
 
         <div className='grid md:grid-cols-3 grid-cols-1 gap-4'>
-          <TextInput
-            label='Rentang Bobot Min (Kg)'
-            name='weight_min'
-            placeholder='Masukkan bobot minimum'
-            value={tableFilterState.weight_min}
-            onChange={weightMinChangeHandler}
-            type='number'
-          />
-          <TextInput
-            label='Rentang Bobot Max (Kg)'
-            name='weight_max'
-            placeholder='Masukkan bobot maximum'
-            value={tableFilterState.weight_max}
-            onChange={weightMaxChangeHandler}
-            type='number'
-          />
+          <div className='flex flex-row gap-4'>
+            <NumberInput
+              label='Rentang Bobot Min (Kg)'
+              name='weight_min'
+              placeholder='Masukkan bobot minimum'
+              value={tableFilterState.weight_min}
+              onChange={weightMinChangeHandler}
+            />
+            <NumberInput
+              label='Rentang Bobot Max (Kg)'
+              name='weight_max'
+              placeholder='Masukkan bobot maximum'
+              value={tableFilterState.weight_max}
+              onChange={weightMaxChangeHandler}
+            />
+          </div>
           <DateInput
             label='Periode'
             name='period'
@@ -740,13 +738,17 @@ const HppPerKandangTab = () => {
             onChange={periodChangeHandler}
             required
           />
-        </div>
-
-        <div className='grid md:grid-cols-1 grid-cols-1 gap-4'>
-          <CheckboxInput
+          <SelectInput
             label='Tampilkan Kandang Tanpa Recording'
-            name='show_unrecorded'
-            checked={tableFilterState.show_unrecorded}
+            placeholder='Pilih Opsi'
+            options={showUnrecordedOptions}
+            value={
+              tableFilterState.show_unrecorded
+                ? showUnrecordedOptions.find((opt) => opt.value === 'true') ||
+                  null
+                : showUnrecordedOptions.find((opt) => opt.value === 'false') ||
+                  null
+            }
             onChange={showUnrecordedChangeHandler}
           />
         </div>