fix form add and edit

- add type and code field
- fix field with response

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,
@@ -29,17 +41,21 @@ const AddDialog = () => {
   });
   const initialState = {
     name: '',
+    code: '',
+    type: '',
     description: '',
     price_point: 0,
     price_cash: 0,
     cashback_point: 0,
     cashback_cash: 0,
     status: '',
-    providerId: '',
+    provider: '',
+    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,11 +83,30 @@ 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();
 
     if (
       formField.name.trim() === '' ||
+      formField.type.trim() === '' ||
+      formField.code.trim() === '' ||
       formField.description.trim() === '' ||
       formField.price_point === 0 ||
       formField.price_cash === 0 ||
@@ -90,6 +125,10 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  useEffect(() => {
+    doFetchProvider([{ id: 'id', desc: false }]);
+  }, []);
+
   useEffect(() => {
     if (showAddDialog) {
       setFormField({
@@ -113,7 +152,7 @@ const AddDialog = () => {
           <DialogTitle>Product - Create</DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
-        <DialogBody ref={parentRef}>
+        <DialogBody ref={parentRef} className='overflow-y-auto'>
           <div className="flex flex-col">
             {alert.show && (
               <Alert variant="danger">
@@ -137,6 +176,34 @@ const AddDialog = () => {
                   </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">
+                      Type<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      value={formField.type}
+                      onChange={(e) => setFormField({ ...formField, type: e.target.value })}
+                    />
+                  </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">
+                      Code<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      value={formField.code}
+                      onChange={(e) => setFormField({ ...formField, code: e.target.value })}
+                    />
+                  </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">
@@ -232,12 +299,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 +319,45 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Provider ID
                     </label>
-                    <Input
+                    <Select
-                      className="input"
+                      value={formField.provider}
-                      type="text"
+                      onValueChange={(value) =>
-                      value={formField.providerId}
+                        setFormField({ ...formField, provider: value.toString() })
-                      onChange={(e) => setFormField({ ...formField, providerId: e.target.value })}
+                      }
-                    />
+                    >
+                      <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>
 

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

@@ -15,6 +15,18 @@ 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: string;
+  name: string;
+}
 
 const API_URL = apiConfig.service_master_data;
 const EditDialog = () => {
@@ -30,17 +42,21 @@ const EditDialog = () => {
   });
   const initialState = {
     name: '',
+    code: '',
+    type: '',
     description: '',
     price_point: 0,
     price_cash: 0,
     cashback_point: 0,
     cashback_cash: 0,
     status: '',
-    providerId: '',
+    provider: '',
+    process_on_third_party: '',
     updated_by: '',
     updated_at: ''
   };
   const [formField, setFormField] = useState(initialState);
+  const [providers, setProviders] = useState<ProviderProps[]>([]);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -66,19 +82,40 @@ const EditDialog = () => {
     [selectedProducts, 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 doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/product/getdata/${selectedProducts}`, { id });
+    const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
+    console.log(response);
 
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
+        type: response.data.type,
+        code: response.data.code,
         description: response.data.description,
         price_point: response.data.price_point,
         price_cash: response.data.price_cash,
         cashback_point: response.data.cashback_point,
         cashback_cash: response.data.cashback_cash,
-        status: response.data.status
+        status: response.data.status,
+        provider: response.data.provider_id,
+        process_on_third_party: response.data.process_on_third_party
       }));
     } else {
       setFormField(initialState);
@@ -90,6 +127,8 @@ const EditDialog = () => {
 
     if (
       formField.name.trim() === '' ||
+      formField.type.trim() === '' ||
+      formField.code.trim() === '' ||
       formField.description.trim() === '' ||
       formField.price_point === 0 ||
       formField.price_cash === 0 ||
@@ -130,6 +169,10 @@ const EditDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    doFetchProvider([{ id: 'name', desc: false }]);
+  }, []);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -137,7 +180,7 @@ const EditDialog = () => {
           <DialogTitle>Product - Update</DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
-        <DialogBody>
+        <DialogBody className="overflow-y-auto">
           <div className="flex flex-col">
             {alert.show && (
               <Alert variant="danger">
@@ -161,6 +204,34 @@ const EditDialog = () => {
                   </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">
+                      Type<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      value={formField.type}
+                      onChange={(e) => setFormField({ ...formField, type: e.target.value })}
+                    />
+                  </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">
+                      Code<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      value={formField.code}
+                      onChange={(e) => setFormField({ ...formField, code: e.target.value })}
+                    />
+                  </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">
@@ -256,12 +327,18 @@ const EditDialog = () => {
                     <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={(e) => setFormField({ ...formField, status: e })}
-                    />
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select a Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>
 
@@ -270,12 +347,43 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Provider ID
                     </label>
-                    <Input
+                    <Select
-                      className="input"
+                      value={formField.provider}
-                      type="text"
+                      onValueChange={(e) => setFormField({ ...formField, provider: e })}
-                      value={formField.providerId}
+                    >
-                      onChange={(e) => setFormField({ ...formField, providerId: e.target.value })}
+                      <SelectTrigger>
-                    />
+                        <SelectValue placeholder="Select a Provider" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {providers.map((provider) => (
+                          <SelectItem key={provider.id} value={provider.id}>
+                            {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>
 

src/pages/master/profession/blocks/EditDialog.tsx

@@ -20,7 +20,7 @@ const API_URL = apiConfig.service_master_data;
 const EditDialog = () => {
   const { showEditDialog, handleEditDialog, selectedProfession } = useManageProfessionContext();
   const { reload } = useDataGrid();
-  const { PutData } = useCallApi();
+  const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@@ -62,6 +62,19 @@ const EditDialog = () => {
     [selectedProfession, formField]
   );
 
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id });
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name
+      }));
+    } else {
+      setFormField(initialState);
+    }
+  }, []);
+
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -75,6 +88,12 @@ const EditDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  useEffect(() => {
+    if (selectedProfession) {
+      doFetchData(selectedProfession);
+    }
+  }, [selectedProfession]);
+
   useEffect(() => {
     if (showEditDialog) {
       setFormField({
@@ -85,6 +104,12 @@ const EditDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">

src/pages/master/provider/blocks/EditDialog.tsx

@@ -91,22 +91,54 @@ const EditDialog = () => {
     [selectedProvider, formField]
   );
 
-  const doFetchData = useCallback(async () => {
+  const getCustomerList = async (sorting: any) => {
-    if (selectedProvider) {
+    try {
-      const data = provider.find((item) => item.id === selectedProvider);
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      if (data) {
+      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
-        setFormField((prev) => ({
+        limit: 100,
-          ...prev,
+        page: 1,
-          name: data.name,
+        with_deleted: false,
-          description: data.description,
+        order_field: sorting[0].id,
-          type: data.type,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-          status: data.status,
+      });
-          transactionTypeId: data.transactionTypeId,
+
-          agentId: data.agentId
+      // console.log('CUSTOMER: ', response?.data);
-        }));
+      setCustomers(response?.data.list);
-      }
+    } catch (error) {
-    } else {
+      console.error('Error fetching customer', error);
-      resetForm();
+    }
+  };
+
+  const getTransactionTypeList = async (sorting: any) => {
+    try {
+      const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('TRANSACTION TYPE: ', response?.data);
+      setTransactions(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching transaction type', error);
+    }
+  };
+
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response?.data.name,
+        description: response?.data.description,
+        type: response?.data.type,
+        status: response?.data.status,
+        transactionTypeId: response?.data.transactionTypeId,
+        agentId: response?.data.agentId
+      }));
     }
   }, []);
 
@@ -130,9 +162,15 @@ const EditDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
   useEffect(() => {
     if (selectedProvider) {
-      doFetchData();
+      doFetchData(selectedProvider);
     }
   }, [selectedProvider]);
 
@@ -147,41 +185,6 @@ const EditDialog = () => {
   }, [formattedTime]);
 
   useEffect(() => {
-    const getCustomerList = async (sorting: any) => {
-      try {
-        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
-          limit: 100,
-          page: 1,
-          with_deleted: false,
-          order_field: sorting[0].id,
-          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-        });
-
-        // console.log('CUSTOMER: ', response?.data);
-        setCustomers(response?.data.list);
-      } catch (error) {
-        console.error('Error fetching customer', error);
-      }
-    };
-
-    const getTransactionTypeList = async (sorting: any) => {
-      try {
-        const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
-          limit: 100,
-          page: 1,
-          with_deleted: false,
-          order_field: sorting[0].id,
-          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-        });
-
-        // console.log('TRANSACTION TYPE: ', response?.data);
-        setTransactions(response?.data.list);
-      } catch (error) {
-        console.error('Error fetching transaction type', error);
-      }
-    };
-
     getCustomerList([{ id: 'msisdn', desc: false }]);
     getTransactionTypeList([{ id: 'name', desc: false }]);
   }, []);

src/pages/settings/user/manage-position/blocks/AddDialog.tsx

@@ -83,6 +83,12 @@ const AddDialog = () => {
   const doCreatePosition = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+
+      if (formField.name.trim() === '') {
+        setAlert({ show: true, message: 'Please fill in all required fields.' });
+        return;
+      }
+
       const response = await PostData(`${API_URL}/user_role/create`, {
         name: formField.name,
         roles: selectMenus,

src/pages/settings/user/manage-position/blocks/EditDialog.tsx

@@ -91,6 +91,12 @@ const EditDialog = () => {
   const doEditPosition = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+
+      if (formField.name.trim() === '') {
+        setAlert((prev) => ({ ...prev, show: true, message: 'Please fill name field.' }));
+        return;
+      }
+
       if (!selectedPosition) {
         toast.success('Please Select Position');
         return;