refactor(FE-Storyless): simplify MovementForm by integrating useSelect for warehouse and supplier inputs, enhance data fetching logic

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -8,7 +8,10 @@ import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import {
   CreateMovementPayload,
   Movement,
@@ -46,9 +49,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
-  const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
-    useState('');
-  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
 
   // ===== FORM HANDLERS =====
   const createMovementHandler = useCallback(
@@ -92,18 +92,25 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     ProductWarehouseApi.getAllFetcher
   );
 
+  // ===== USE SELECT HOOKS =====
+  const {
+    inputValue: warehouseSelectInputValue,
+    setInputValue: setWarehouseSelectInputValue,
+    isLoadingOptions: isLoadingWarehouses,
+  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setSupplierSelectInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSuppliers,
+  } = useSelect(SupplierApi.basePath, 'id', 'name', 'search');
+
   const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
-  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
+  const { data: warehouses } = useSWR(
     warehousesUrl,
     WarehouseApi.getAllFetcher
   );
 
-  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue }).toString()}`;
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
-    suppliersUrl,
-    SupplierApi.getAllFetcher
-  );
-
   // ===== DATA PROCESSING =====
   const warehouseStockMap = useMemo(() => {
     if (!isResponseSuccess(allProductWarehouses)) return new Map();
@@ -129,8 +136,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     return stockMap;
   }, [allProductWarehouses]);
 
-  const warehouseOptions = isResponseSuccess(warehouses)
+  const warehouseOptions = useMemo(() => {
-    ? warehouses?.data.map((w) => {
+    if (!isResponseSuccess(warehouses)) return [];
+
+    return (
+      warehouses?.data.map((w) => {
         warehouseStockMap.get(w.id);
         return {
           value: w.id,
@@ -141,12 +151,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
               ? w.location?.name
               : undefined,
         };
-      })
+      }) || []
-    : [];
+    );
-
+  }, [warehouses, warehouseStockMap]);
-  const supplierOptions = isResponseSuccess(suppliers)
-    ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
-    : [];
 
   // ===== FORM INITIALIZATION =====
   const formikInitialValues = useMemo<MovementFormValues>(