feat(FE-208,212,213): integrate dynamic supplier selection in PurchaseOrderAcceptApprovalForm

src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx

@@ -8,7 +8,10 @@ import { useSearchParams } from 'next/navigation';
 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 { useRouter } from 'next/navigation';
 
 import {
@@ -24,6 +27,8 @@ import {
 } from '@/types/api/purchase/purchase';
 import DateInput from '@/components/input/DateInput';
 import { formatNumber } from '@/lib/helper';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { SupplierApi } from '@/services/api/master-data';
 
 interface PurchaseOrderAcceptApprovalFormProps {
   type?: 'add' | 'edit';
@@ -47,13 +52,6 @@ const PurchaseOrderAcceptApprovalForm = ({
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
     useState('');
 
-  // ===== TYPE DEFINITIONS =====
-  interface ExpeditionVendorOptionType {
-    value: number;
-    label: string;
-    id: number;
-  }
-
   // ===== UTILITY FUNCTIONS =====
   const isRepeaterInputError = (
     idx: number,
@@ -115,7 +113,13 @@ const PurchaseOrderAcceptApprovalForm = ({
       onModalClose?.();
       router.refresh();
     },
-    [initialValues?.id, searchParams, refreshApprovals, onModalClose, onRefetchData]
+    [
+      initialValues?.id,
+      searchParams,
+      refreshApprovals,
+      onModalClose,
+      onRefetchData,
+    ]
   );
 
   const updateAcceptApprovalHandler = useCallback(
@@ -136,6 +140,15 @@ const PurchaseOrderAcceptApprovalForm = ({
     [refreshApprovals, onModalClose, onRefetchData]
   );
 
+  // ===== SELECT INPUT DATA =====
+  const {
+    setInputValue: setExpeditionsSelectInputValue,
+    options: expeditionVendors,
+    isLoadingOptions: isLoadingExpeditions,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search', {
+    category: 'BOP',
+  });
+
   // ===== FORM CONFIGURATION =====
   const formikInitialValues = useMemo(() => {
     return initialValues
@@ -250,36 +263,6 @@ const PurchaseOrderAcceptApprovalForm = ({
     [purchaseItems]
   );
 
-  const expeditionVendors: ExpeditionVendorOptionType[] = useMemo(() => {
-    return [
-      {
-        value: 1,
-        label: 'PT. Ekspedisi Sejahtera',
-        id: 1,
-      },
-      {
-        value: 2,
-        label: 'PT. Jaya Trans Logistics',
-        id: 2,
-      },
-      {
-        value: 3,
-        label: 'PT. Cargo Express Indonesia',
-        id: 3,
-      },
-      {
-        value: 4,
-        label: 'PT. Fast Delivery Service',
-        id: 4,
-      },
-      {
-        value: 5,
-        label: 'PT. Mitra Angkutan Sejahtera',
-        id: 5,
-      },
-    ];
-  }, []);
-
   const getExpeditionVendorOptions = useCallback(() => {
     return expeditionVendors;
   }, [expeditionVendors]);
@@ -289,7 +272,7 @@ const PurchaseOrderAcceptApprovalForm = ({
     idx: number,
     val: OptionType | OptionType[] | null
   ) => {
-    const expeditionVendor = val as ExpeditionVendorOptionType | null;
+    const expeditionVendor = val as OptionType | null;
     formik.setFieldTouched(`items.${idx}.expedition_vendor`, true);
     formik.setFieldValue(`items.${idx}.expedition_vendor`, expeditionVendor);
     formik.setFieldTouched(`items.${idx}.expedition_vendor_id`, true);