feat(FE-208): replace product name input with select dropdown for better usability

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

@@ -8,6 +8,7 @@ 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 {
   PurchaseRequestStaffApprovalFormDefaultValues,
@@ -237,6 +238,13 @@ const PurchaseOrderStaffApprovalForm = ({
     return Object.values(warehouseGroups);
   }, [purchaseItems]);
 
+  const productOptions = useMemo(() => {
+    return purchaseItems.map((item) => ({
+      value: item.product_id,
+      label: item.product.name,
+    }));
+  }, [purchaseItems]);
+
   useEffect(() => {
     if (purchaseItems.length > 0 && initialValues?.items) {
       const updatedItems = purchaseItems.map((purchaseItem, idx) => {
@@ -357,16 +365,20 @@ const PurchaseOrderStaffApprovalForm = ({
                               return (
                                 <tr key={`purchase-item-${purchaseItem.id}`}>
                                   <td>
-                                    <TextInput
+                                    <SelectInput
-                                      name={`items.${purchaseItem.id}.product_name`}
+                                      key={`product-${purchaseItem.id}`}
-                                      type='text'
+                                      value={{
-                                      value={purchaseItem?.product?.name || ''}
+                                        value: purchaseItem?.product_id || 0,
-                                      readOnly={true}
+                                        label:
+                                          purchaseItem?.product?.name || '',
+                                      }}
+                                      options={productOptions}
+                                      isClearable={false}
+                                      isSearchable={false}
                                       className={{
                                         wrapper:
                                           'min-w-52 md:min-w-72 lg:min-w-80',
                                       }}
-                                      disabled={true}
                                     />
                                   </td>
                                   <td>