add dropdown for form

src/pages/master/products/blocks/AddDialog.tsx

@@ -15,13 +15,25 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+interface ProviderProps {
+  id: number;
+  name: string;
+}
 
 const API_URL = apiConfig.service_master_data;
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const parsedUser = getAuth()?.user;
   const { showAddDialog, handleAddDialog } = useManageProductsContext();
-  const { PostData } = useCallApi();
+  const { PostData, GetData } = useCallApi();
   const { reload } = useDataGrid();
   const [alert, setAlert] = useState({
     show: false,
@@ -36,10 +48,12 @@ const AddDialog = () => {
     cashback_cash: 0,
     status: '',
     providerId: '',
+    process_on_third_party: '',
     created_by: '',
     created_at: ''
   };
   const [formField, setFormField] = useState(initialState);
+  const [providers, setProviders] = useState<ProviderProps[]>([]);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
@@ -67,6 +81,23 @@ const AddDialog = () => {
     [formField]
   );
 
+  const doFetchProvider = useCallback(async (sorting: any) => {
+    try {
+      const response = await GetData(`${API_URL}/provider/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      console.log('PROVIDER: ', response?.data);
+      setProviders(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching provider', error);
+    }
+  }, []);
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -90,6 +121,10 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  useEffect(() => {
+    doFetchProvider([{ id: 'id', desc: false }]);
+  }, []);
+
   useEffect(() => {
     if (showAddDialog) {
       setFormField({
@@ -232,12 +267,18 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Select
-                      className="input"
-                      type="text"
                       value={formField.status}
-                      onChange={(e) => setFormField({ ...formField, status: e.target.value })}
+                      onValueChange={(value) => setFormField({ ...formField, status: value })}
-                    />
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Yes</SelectItem>
+                        <SelectItem value="N">No</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>
 
@@ -246,12 +287,45 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Provider ID
                     </label>
-                    <Input
+                    <Select
-                      className="input"
-                      type="text"
                       value={formField.providerId}
-                      onChange={(e) => setFormField({ ...formField, providerId: e.target.value })}
+                      onValueChange={(value) =>
-                    />
+                        setFormField({ ...formField, providerId: value.toString() })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Provider" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {providers.map((provider) => (
+                          <SelectItem key={provider.id} value={provider.id.toString()}>
+                            {provider.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Process on Third Party<span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formField.process_on_third_party}
+                      onValueChange={(value) =>
+                        setFormField({ ...formField, process_on_third_party: value })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Yes</SelectItem>
+                        <SelectItem value="N">No</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>