From c75f36f3ff2b480d81a4a733010b4b803d3e531d Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 9 Sep 2025 18:12:36 +0700
Subject: [PATCH] update: add field transaction_type on products and remove on
 provider

---
 .../master/products/blocks/AddDialog.tsx      | 141 +++-
 .../master/products/blocks/EditDialog.tsx     | 758 ++++++++++--------
 .../master/provider/blocks/AddDialog.tsx      | 103 +--
 .../master/provider/blocks/EditDialog.tsx     | 110 +--
 4 files changed, 570 insertions(+), 542 deletions(-)

diff --git a/src/pages/master/products/blocks/AddDialog.tsx b/src/pages/master/products/blocks/AddDialog.tsx
index 12c53c2..18141db 100644
--- a/src/pages/master/products/blocks/AddDialog.tsx
+++ b/src/pages/master/products/blocks/AddDialog.tsx
@@ -31,7 +31,14 @@ interface ProviderProps {
   provider_name: string;
 }
 
+interface TransactionProps {
+  id: string;
+  name: string;
+}
+
 const API_URL = apiConfig.service_master_data;
+const API_URL_TRANSACTION = apiConfig.service_transaction;
+
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const parsedUser = getAuth()?.user;
@@ -53,6 +60,7 @@ const AddDialog = () => {
     cashback_cash: string | number | null;
     status: string;
     provider: string;
+    transaction_type: string;
     process_on_third_party: string;
     created_by: string;
     created_at: string;
@@ -67,20 +75,24 @@ const AddDialog = () => {
     cashback_cash: null,
     status: '',
     provider: '',
+    transaction_type: '',
     process_on_third_party: '',
     created_by: '',
     created_at: ''
   };
   const [formField, setFormField] = useState(initialState);
   const [providers, setProviders] = useState<ProviderProps[]>([]);
+  const [transactions, setTransactions] = useState<TransactionProps[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
   const [errors, setErrors] = useState<Record<string, string>>({});
+
   const resetForm = () => {
     setFormField(initialState);
     setErrors({});
   };
+
   const validateForm = () => {
     const requiredFields = [
       { key: 'name', label: 'Name' },
@@ -93,6 +105,7 @@ const AddDialog = () => {
       { key: 'cashback_cash', label: 'Cashback Cash' },
       { key: 'status', label: 'Status' },
       { key: 'provider', label: 'Provider' },
+      { key: 'transaction_type', label: 'Transaction Type' },
       { key: 'process_on_third_party', label: 'Process On Third Party' }
     ];
     const newErrors: Record<string, string> = {};
@@ -146,6 +159,22 @@ const AddDialog = () => {
     [formField]
   );
 
+  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'
+      });
+
+      setTransactions(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching transaction type', error);
+    }
+  };
+
   const doFetchProvider = useCallback(async (sorting: any) => {
     try {
       const response = await GetData(`${API_URL}/provider/list`, {
@@ -178,8 +207,11 @@ const AddDialog = () => {
   };
 
   useEffect(() => {
-    doFetchProvider([{ id: 'id', desc: false }]);
-  }, []);
+    if (showAddDialog) {
+      doFetchProvider([{ id: 'id', desc: false }]);
+      getTransactionTypeList([{ id: 'name', desc: false }]);
+    }
+  }, [showAddDialog]);
 
   useEffect(() => {
     if (showAddDialog) {
@@ -199,7 +231,7 @@ const AddDialog = () => {
 
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
-      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
+      <DialogContent className="container-fixed max-w-[1000px] flex flex-col p-5 overflow-hidden">
         <DialogHeader>
           <DialogTitle>Product - Create</DialogTitle>
           <DialogDescription></DialogDescription>
@@ -215,13 +247,13 @@ const AddDialog = () => {
             )}
 
             <form onSubmit={handleSubmit}>
-              <div className="card-body grid gap-5">
+              <div className="grid gap-5 card-body">
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Name<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <Input
                         className={`input ${errors.name ? 'border-red-500' : ''}`}
                         type="text"
@@ -234,7 +266,7 @@ const AddDialog = () => {
                         }}
                       />
                       {errors.name && (
-                        <span className="text-red-500 text-xs mt-1">{errors.name}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.name}</span>
                       )}
                     </div>
                   </div>
@@ -242,10 +274,10 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Type<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <Input
                         className={`input ${errors.type ? 'border-red-500' : ''}`}
                         type="text"
@@ -258,7 +290,7 @@ const AddDialog = () => {
                         }}
                       />
                       {errors.type && (
-                        <span className="text-red-500 text-xs mt-1">{errors.type}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.type}</span>
                       )}
                     </div>
                   </div>
@@ -266,10 +298,10 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Code<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <Input
                         className={`input ${errors.code ? 'border-red-500' : ''}`}
                         type="text"
@@ -282,7 +314,7 @@ const AddDialog = () => {
                         }}
                       />
                       {errors.code && (
-                        <span className="text-red-500 text-xs mt-1">{errors.code}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.code}</span>
                       )}
                     </div>
                   </div>
@@ -290,10 +322,10 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Description<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <Input
                         className={`input ${errors.description ? 'border-red-500' : ''}`}
                         type="text"
@@ -306,7 +338,7 @@ const AddDialog = () => {
                         }}
                       />
                       {errors.description && (
-                        <span className="text-red-500 text-xs mt-1">{errors.description}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.description}</span>
                       )}
                     </div>
                   </div>
@@ -314,10 +346,10 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Price Point<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <NumericFormat
                         className={`input ${errors.price_point ? 'border-red-500' : ''}`}
                         value={formField.price_point ?? ''}
@@ -336,7 +368,7 @@ const AddDialog = () => {
                         placeholder="Enter Price Point"
                       />
                       {errors.price_point && (
-                        <span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.price_point}</span>
                       )}
                     </div>
                   </div>
@@ -344,10 +376,10 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Price Cash<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <NumericFormat
                         className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
                         value={formField.price_cash ?? ''}
@@ -366,7 +398,7 @@ const AddDialog = () => {
                         placeholder="Enter Price Cash"
                       />
                       {errors.price_cash && (
-                        <span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.price_cash}</span>
                       )}
                     </div>
                   </div>
@@ -374,10 +406,10 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Cashback Point<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <NumericFormat
                         className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
                         value={formField.cashback_point ?? ''}
@@ -396,7 +428,7 @@ const AddDialog = () => {
                         placeholder="Enter Cashback Point"
                       />
                       {errors.cashback_point && (
-                        <span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.cashback_point}</span>
                       )}
                     </div>
                   </div>
@@ -404,10 +436,10 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Cashback Cash<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <NumericFormat
                         className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
                         value={formField.cashback_cash ?? ''}
@@ -426,7 +458,7 @@ const AddDialog = () => {
                         placeholder="Enter Cashback Cash"
                       />
                       {errors.cashback_cash && (
-                        <span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.cashback_cash}</span>
                       )}
                     </div>
                   </div>
@@ -434,10 +466,10 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <Select
                         value={formField.status}
                         onValueChange={(value) => {
@@ -454,7 +486,7 @@ const AddDialog = () => {
                         </SelectContent>
                       </Select>
                       {errors.status && (
-                        <span className="text-red-500 text-xs mt-1">{errors.status}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.status}</span>
                       )}
                     </div>
                   </div>
@@ -462,10 +494,10 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Provider<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <Select
                         value={formField.provider}
                         onValueChange={(value) => {
@@ -490,7 +522,7 @@ const AddDialog = () => {
                         </SelectContent>
                       </Select>
                       {errors.provider && (
-                        <span className="text-red-500 text-xs mt-1">{errors.provider}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.provider}</span>
                       )}
                     </div>
                   </div>
@@ -498,10 +530,43 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
+                      Transaction Type<span className="text-red-500">*</span>
+                    </label>
+                    <div className="flex flex-col grow">
+                      <Select
+                        value={formField.transaction_type}
+                        onValueChange={(e) => {
+                          setFormField({ ...formField, transaction_type: e });
+                          setErrors((prev) => ({ ...prev, transaction_type: '' }));
+                        }}
+                      >
+                        <SelectTrigger
+                          className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
+                        >
+                          <SelectValue placeholder="Select Transaction Type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {transactions.map((transaction) => (
+                            <SelectItem key={transaction.id} value={transaction.id}>
+                              {transaction.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      {errors.transaction_type && (
+                        <span className="mt-1 text-xs text-red-500">{errors.transaction_type}</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Process on Third Party<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <Select
                         value={formField.process_on_third_party}
                         onValueChange={(value) => {
@@ -520,7 +585,7 @@ const AddDialog = () => {
                         </SelectContent>
                       </Select>
                       {errors.process_on_third_party && (
-                        <span className="text-red-500 text-xs mt-1">
+                        <span className="mt-1 text-xs text-red-500">
                           {errors.process_on_third_party}
                         </span>
                       )}
@@ -534,7 +599,7 @@ const AddDialog = () => {
                   </Button>
                   <Button variant="default" type="submit" disabled={isSubmitting}>
                     {isSubmitting ? (
-                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      <RefreshCw className="w-8 h-8 text-white animate-spin mx-7" />
                     ) : (
                       'Create'
                     )}
diff --git a/src/pages/master/products/blocks/EditDialog.tsx b/src/pages/master/products/blocks/EditDialog.tsx
index 2d6ebb3..b4ce255 100644
--- a/src/pages/master/products/blocks/EditDialog.tsx
+++ b/src/pages/master/products/blocks/EditDialog.tsx
@@ -31,7 +31,14 @@ interface ProviderProps {
   provider_name: string;
 }
 
+interface TransactionProps {
+  id: string;
+  name: string;
+}
+
 const API_URL = apiConfig.service_master_data;
+const API_URL_TRANSACTION = apiConfig.service_transaction;
+
 const EditDialog = () => {
   const { showEditDialog, handleEditDialog, selectedProducts } = useManageProductsContext();
   const { reload } = useDataGrid();
@@ -56,6 +63,7 @@ const EditDialog = () => {
     cashback_cash: string | number | null;
     status: string;
     provider: string;
+    transaction_type: string;
     process_on_third_party: string;
     updated_by: string;
     updated_at: string;
@@ -70,48 +78,51 @@ const EditDialog = () => {
     cashback_cash: null,
     status: '',
     provider: '',
+    transaction_type: '',
     process_on_third_party: '',
     updated_by: '',
     updated_at: ''
   };
   const [formField, setFormField] = useState(initialState);
   const [providers, setProviders] = useState<ProviderProps[]>([]);
+  const [transactions, setTransactions] = useState<TransactionProps[]>([]);
 
   const resetForm = () => {
     setFormField(initialState);
     setAlert({ show: false, message: '' });
   };
-  const[errors, setErrors] = useState<Record<string, string>>({});
-    const validateForm = () => {
-      const requiredFields = [
-        {key:'name', label: 'Name'},
-        {key:'type', label: 'Type'},
-        {key:'code', label: 'Code'},
-        {key:'description', label: 'Description'},
-        {key:'price_point', label: 'Price Point'},
-        {key:'price_cash', label: 'Price Cash'},
-        {key:'cashback_point', label: 'Cashback Point'},
-        {key:'cashback_cash', label: 'Cashback Cash'},
-        {key:'status', label: 'Status'},
-        {key:'provider', label: 'Provider'},
-        {key:'process_on_third_party', label: 'Process On Third Party'} 
-      ]
-      const newErrors: Record<string, string> = {};
-      let isValid = true;
-      requiredFields.forEach(({ key, label }) => {
-        if (
-          formField[key as keyof typeof formField] === '' ||
-          formField[key as keyof typeof formField] === null ||
-          formField[key as keyof typeof formField] === undefined
-        ) {
-          newErrors[key] = `${label} is required`;
-          toast.error(`${label} is required`);
-          isValid = false;
-        }
-      });
-      setErrors(newErrors);
-      return isValid;
-    }
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const validateForm = () => {
+    const requiredFields = [
+      { key: 'name', label: 'Name' },
+      { key: 'type', label: 'Type' },
+      { key: 'code', label: 'Code' },
+      { key: 'description', label: 'Description' },
+      { key: 'price_point', label: 'Price Point' },
+      { key: 'price_cash', label: 'Price Cash' },
+      { key: 'cashback_point', label: 'Cashback Point' },
+      { key: 'cashback_cash', label: 'Cashback Cash' },
+      { key: 'status', label: 'Status' },
+      { key: 'provider', label: 'Provider' },
+      { key: 'transaction_type', label: 'Transaction Type' },
+      { key: 'process_on_third_party', label: 'Process On Third Party' }
+    ];
+    const newErrors: Record<string, string> = {};
+    let isValid = true;
+    requiredFields.forEach(({ key, label }) => {
+      if (
+        formField[key as keyof typeof formField] === '' ||
+        formField[key as keyof typeof formField] === null ||
+        formField[key as keyof typeof formField] === undefined
+      ) {
+        newErrors[key] = `${label} is required`;
+        toast.error(`${label} is required`);
+        isValid = false;
+      }
+    });
+    setErrors(newErrors);
+    return isValid;
+  };
   const doUpdateProduct = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -146,6 +157,22 @@ const EditDialog = () => {
     [selectedProducts, formField]
   );
 
+  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'
+      });
+
+      setTransactions(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching transaction type', error);
+    }
+  };
+
   const doFetchProvider = useCallback(async (sorting: any) => {
     try {
       const response = await GetData(`${API_URL}/provider/list`, {
@@ -227,8 +254,11 @@ const EditDialog = () => {
   }, [formattedTime]);
 
   useEffect(() => {
-    doFetchProvider([{ id: 'name', desc: false }]);
-  }, []);
+    if (showEditDialog) {
+      doFetchProvider([{ id: 'name', desc: false }]);
+      getTransactionTypeList([{ id: 'name', desc: false }]);
+    }
+  }, [showEditDialog]);
 
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@@ -247,12 +277,12 @@ const EditDialog = () => {
 
             {isLoading ? (
               <div className="flex flex-col items-center justify-center p-8">
-                <div className="animate-pulse flex space-x-4 w-full">
-                  <div className="flex-1 space-y-4 py-1">
-                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                <div className="flex w-full space-x-4 animate-pulse">
+                  <div className="flex-1 py-1 space-y-4">
+                    <div className="w-3/4 h-4 bg-gray-200 rounded"></div>
                     <div className="space-y-2">
                       <div className="h-4 bg-gray-200 rounded"></div>
-                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                      <div className="w-5/6 h-4 bg-gray-200 rounded"></div>
                     </div>
                   </div>
                 </div>
@@ -260,318 +290,366 @@ const EditDialog = () => {
               </div>
             ) : (
               <form onSubmit={handleUpdate}>
-              <div className="card-body grid gap-5">
-                {/* Name */}
-                <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">
-                      Name<span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <Input
-                        className={`input ${errors.name ? 'border-red-500' : ''}`}
-                        type="text"
-                        value={formField.name}
-                        onChange={(e) => {
-                          setFormField({ ...formField, name: e.target.value });
-                          if (e.target.value) setErrors((prev) => ({ ...prev, name: '' }));
-                        }}
-                      />
-                      {errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
+                <div className="grid gap-5 card-body">
+                  {/* Name */}
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Name<span className="text-red-500">*</span>
+                      </label>
+                      <div className="flex flex-col grow">
+                        <Input
+                          className={`input ${errors.name ? 'border-red-500' : ''}`}
+                          type="text"
+                          value={formField.name}
+                          onChange={(e) => {
+                            setFormField({ ...formField, name: e.target.value });
+                            if (e.target.value) setErrors((prev) => ({ ...prev, name: '' }));
+                          }}
+                        />
+                        {errors.name && (
+                          <span className="mt-1 text-xs text-red-500">{errors.name}</span>
+                        )}
+                      </div>
                     </div>
                   </div>
-                </div>
-            
-                {/* Type */}
-                <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>
-                    <div className="grow flex flex-col">
-                      <Input
-                        className={`input ${errors.type ? 'border-red-500' : ''}`}
-                        type="text"
-                        value={formField.type}
-                        onChange={(e) => {
-                          setFormField({ ...formField, type: e.target.value });
-                          if (e.target.value) setErrors((prev) => ({ ...prev, type: '' }));
-                        }}
-                      />
-                      {errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>}
+
+                  {/* Type */}
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Type<span className="text-red-500">*</span>
+                      </label>
+                      <div className="flex flex-col grow">
+                        <Input
+                          className={`input ${errors.type ? 'border-red-500' : ''}`}
+                          type="text"
+                          value={formField.type}
+                          onChange={(e) => {
+                            setFormField({ ...formField, type: e.target.value });
+                            if (e.target.value) setErrors((prev) => ({ ...prev, type: '' }));
+                          }}
+                        />
+                        {errors.type && (
+                          <span className="mt-1 text-xs text-red-500">{errors.type}</span>
+                        )}
+                      </div>
                     </div>
                   </div>
-                </div>
-            
-                {/* Code */}
-                <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>
-                    <div className="grow flex flex-col">
-                      <Input
-                        className={`input ${errors.code ? 'border-red-500' : ''}`}
-                        type="text"
-                        value={formField.code}
-                        onChange={(e) => {
-                          setFormField({ ...formField, code: e.target.value });
-                          if (e.target.value) setErrors((prev) => ({ ...prev, code: '' }));
-                        }}
-                      />
-                      {errors.code && <span className="text-red-500 text-xs mt-1">{errors.code}</span>}
+
+                  {/* Code */}
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Code<span className="text-red-500">*</span>
+                      </label>
+                      <div className="flex flex-col grow">
+                        <Input
+                          className={`input ${errors.code ? 'border-red-500' : ''}`}
+                          type="text"
+                          value={formField.code}
+                          onChange={(e) => {
+                            setFormField({ ...formField, code: e.target.value });
+                            if (e.target.value) setErrors((prev) => ({ ...prev, code: '' }));
+                          }}
+                        />
+                        {errors.code && (
+                          <span className="mt-1 text-xs text-red-500">{errors.code}</span>
+                        )}
+                      </div>
                     </div>
                   </div>
-                </div>
-            
-                {/* Description */}
-                <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">
-                      Description<span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <Input
-                        className={`input ${errors.description ? 'border-red-500' : ''}`}
-                        type="text"
-                        value={formField.description}
-                        onChange={(e) => {
-                          setFormField({ ...formField, description: e.target.value });
-                          if (e.target.value) setErrors((prev) => ({ ...prev, description: '' }));
-                        }}
-                      />
-                      {errors.description && (
-                        <span className="text-red-500 text-xs mt-1">{errors.description}</span>
+
+                  {/* Description */}
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Description<span className="text-red-500">*</span>
+                      </label>
+                      <div className="flex flex-col grow">
+                        <Input
+                          className={`input ${errors.description ? 'border-red-500' : ''}`}
+                          type="text"
+                          value={formField.description}
+                          onChange={(e) => {
+                            setFormField({ ...formField, description: e.target.value });
+                            if (e.target.value) setErrors((prev) => ({ ...prev, description: '' }));
+                          }}
+                        />
+                        {errors.description && (
+                          <span className="mt-1 text-xs text-red-500">{errors.description}</span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Price Point */}
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Price Point<span className="text-red-500">*</span>
+                      </label>
+                      <div className="flex flex-col grow">
+                        <NumericFormat
+                          className={`input ${errors.price_point ? 'border-red-500' : ''}`}
+                          value={formField.price_point ?? ''}
+                          thousandSeparator="."
+                          decimalSeparator=","
+                          allowNegative={false}
+                          onValueChange={(values) => {
+                            setFormField((prev) => ({
+                              ...prev,
+                              price_point: values.floatValue ?? ''
+                            }));
+                            if (values.floatValue !== undefined)
+                              setErrors((prev) => ({ ...prev, price_point: '' }));
+                          }}
+                          placeholder="Enter Price Point"
+                        />
+                        {errors.price_point && (
+                          <span className="mt-1 text-xs text-red-500">{errors.price_point}</span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Price Cash */}
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Price Cash<span className="text-red-500">*</span>
+                      </label>
+                      <div className="flex flex-col grow">
+                        <NumericFormat
+                          className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
+                          value={formField.price_cash ?? ''}
+                          thousandSeparator="."
+                          decimalSeparator=","
+                          allowNegative={false}
+                          onValueChange={(values) => {
+                            setFormField((prev) => ({
+                              ...prev,
+                              price_cash: values.floatValue ?? ''
+                            }));
+                            if (values.floatValue !== undefined)
+                              setErrors((prev) => ({ ...prev, price_cash: '' }));
+                          }}
+                          placeholder="Enter Price Cash"
+                        />
+                        {errors.price_cash && (
+                          <span className="mt-1 text-xs text-red-500">{errors.price_cash}</span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Cashback Point */}
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Cashback Point<span className="text-red-500">*</span>
+                      </label>
+                      <div className="flex flex-col grow">
+                        <NumericFormat
+                          className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
+                          value={formField.cashback_point ?? ''}
+                          thousandSeparator="."
+                          decimalSeparator=","
+                          allowNegative={false}
+                          onValueChange={(values) => {
+                            setFormField((prev) => ({
+                              ...prev,
+                              cashback_point: values.floatValue ?? ''
+                            }));
+                            if (values.floatValue !== undefined)
+                              setErrors((prev) => ({ ...prev, cashback_point: '' }));
+                          }}
+                          placeholder="Enter Cashback Point"
+                        />
+                        {errors.cashback_point && (
+                          <span className="mt-1 text-xs text-red-500">{errors.cashback_point}</span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Cashback Cash */}
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Cashback Cash<span className="text-red-500">*</span>
+                      </label>
+                      <div className="flex flex-col grow">
+                        <NumericFormat
+                          className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
+                          value={formField.cashback_cash ?? ''}
+                          thousandSeparator="."
+                          decimalSeparator=","
+                          allowNegative={false}
+                          onValueChange={(values) => {
+                            setFormField((prev) => ({
+                              ...prev,
+                              cashback_cash: values.floatValue ?? ''
+                            }));
+                            if (values.floatValue !== undefined)
+                              setErrors((prev) => ({ ...prev, cashback_cash: '' }));
+                          }}
+                          placeholder="Enter Cashback Cash"
+                        />
+                        {errors.cashback_cash && (
+                          <span className="mt-1 text-xs text-red-500">{errors.cashback_cash}</span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Status */}
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Status<span className="text-red-500">*</span>
+                      </label>
+                      <div className="flex flex-col grow">
+                        <Select
+                          value={formField.status}
+                          onValueChange={(e) => {
+                            setFormField({ ...formField, status: e });
+                            setErrors((prev) => ({ ...prev, status: '' }));
+                          }}
+                        >
+                          <SelectTrigger
+                            className={`input ${errors.status ? 'border-red-500' : ''}`}
+                          >
+                            <SelectValue placeholder="Select a Status" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="Y">Active</SelectItem>
+                            <SelectItem value="N">Inactive</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        {errors.status && (
+                          <span className="mt-1 text-xs text-red-500">{errors.status}</span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Provider */}
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Provider
+                      </label>
+                      <div className="flex flex-col grow">
+                        <Select
+                          value={formField.provider}
+                          onValueChange={(e) => {
+                            setFormField({ ...formField, provider: e });
+                            setErrors((prev) => ({ ...prev, provider: '' }));
+                          }}
+                        >
+                          <SelectTrigger
+                            className={`input ${errors.provider ? 'border-red-500' : ''}`}
+                          >
+                            <SelectValue placeholder="Select a Provider" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {providers.map((provider) => (
+                              <SelectItem
+                                key={provider.provider_id}
+                                value={provider.provider_id.toString()}
+                              >
+                                {provider.provider_name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {errors.provider && (
+                          <span className="mt-1 text-xs text-red-500">{errors.provider}</span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Transaction Type<span className="text-red-500">*</span>
+                      </label>
+                      <div className="flex flex-col grow">
+                        <Select
+                          value={formField.transaction_type}
+                          onValueChange={(e) => {
+                            setFormField({ ...formField, transaction_type: e });
+                            setErrors((prev) => ({ ...prev, transaction_type: '' }));
+                          }}
+                        >
+                          <SelectTrigger
+                            className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
+                          >
+                            <SelectValue placeholder="Select Transaction Type" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {transactions.map((transaction) => (
+                              <SelectItem key={transaction.id} value={transaction.id}>
+                                {transaction.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {errors.transaction_type && (
+                          <span className="mt-1 text-xs text-red-500">
+                            {errors.transaction_type}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Process on Third Party */}
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="flex items-center gap-1 form-label max-w-56">
+                        Process on Third Party<span className="text-red-500">*</span>
+                      </label>
+                      <div className="flex flex-col grow">
+                        <Select
+                          value={formField.process_on_third_party}
+                          onValueChange={(value) => {
+                            setFormField({ ...formField, process_on_third_party: value });
+                            setErrors((prev) => ({ ...prev, process_on_third_party: '' }));
+                          }}
+                        >
+                          <SelectTrigger
+                            className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}
+                          >
+                            <SelectValue placeholder="Select Status" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="Y">Yes</SelectItem>
+                            <SelectItem value="N">No</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        {errors.process_on_third_party && (
+                          <span className="mt-1 text-xs text-red-500">
+                            {errors.process_on_third_party}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end gap-5">
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="w-8 h-8 text-white animate-spin mx-7" />
+                      ) : (
+                        'Save Changes'
                       )}
-                    </div>
+                    </Button>
                   </div>
                 </div>
-            
-                {/* Price Point */}
-                <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">
-                      Price Point<span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <NumericFormat
-                        className={`input ${errors.price_point ? 'border-red-500' : ''}`}
-                        value={formField.price_point ?? ''}
-                        thousandSeparator="."
-                        decimalSeparator=","
-                        allowNegative={false}
-                        onValueChange={(values) => {
-                          setFormField((prev) => ({
-                            ...prev,
-                            price_point: values.floatValue ?? ''
-                          }));
-                          if (values.floatValue !== undefined)
-                            setErrors((prev) => ({ ...prev, price_point: '' }));
-                        }}
-                        placeholder="Enter Price Point"
-                      />
-                      {errors.price_point && (
-                        <span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-            
-                {/* Price Cash */}
-                <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">
-                      Price Cash<span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <NumericFormat
-                        className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
-                        value={formField.price_cash ?? ''}
-                        thousandSeparator="."
-                        decimalSeparator=","
-                        allowNegative={false}
-                        onValueChange={(values) => {
-                          setFormField((prev) => ({
-                            ...prev,
-                            price_cash: values.floatValue ?? ''
-                          }));
-                          if (values.floatValue !== undefined)
-                            setErrors((prev) => ({ ...prev, price_cash: '' }));
-                        }}
-                        placeholder="Enter Price Cash"
-                      />
-                      {errors.price_cash && (
-                        <span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-            
-                {/* Cashback Point */}
-                <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">
-                      Cashback Point<span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <NumericFormat
-                        className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
-                        value={formField.cashback_point ?? ''}
-                        thousandSeparator="."
-                        decimalSeparator=","
-                        allowNegative={false}
-                        onValueChange={(values) => {
-                          setFormField((prev) => ({
-                            ...prev,
-                            cashback_point: values.floatValue ?? ''
-                          }));
-                          if (values.floatValue !== undefined)
-                            setErrors((prev) => ({ ...prev, cashback_point: '' }));
-                        }}
-                        placeholder="Enter Cashback Point"
-                      />
-                      {errors.cashback_point && (
-                        <span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-            
-                {/* Cashback Cash */}
-                <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">
-                      Cashback Cash<span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <NumericFormat
-                        className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
-                        value={formField.cashback_cash ?? ''}
-                        thousandSeparator="."
-                        decimalSeparator=","
-                        allowNegative={false}
-                        onValueChange={(values) => {
-                          setFormField((prev) => ({
-                            ...prev,
-                            cashback_cash: values.floatValue ?? ''
-                          }));
-                          if (values.floatValue !== undefined)
-                            setErrors((prev) => ({ ...prev, cashback_cash: '' }));
-                        }}
-                        placeholder="Enter Cashback Cash"
-                      />
-                      {errors.cashback_cash && (
-                        <span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-            
-                {/* Status */}
-                <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">
-                      Status<span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <Select
-                        value={formField.status}
-                        onValueChange={(e) => {
-                          setFormField({ ...formField, status: e });
-                          setErrors((prev) => ({ ...prev, status: '' }));
-                        }}
-                      >
-                        <SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}>
-                          <SelectValue placeholder="Select a Status" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="Y">Active</SelectItem>
-                          <SelectItem value="N">Inactive</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      {errors.status && (
-                        <span className="text-red-500 text-xs mt-1">{errors.status}</span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-            
-                {/* Provider */}
-                <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">
-                      Provider
-                    </label>
-                    <div className="grow flex flex-col">
-                      <Select
-                        value={formField.provider}
-                        onValueChange={(e) => {
-                          setFormField({ ...formField, provider: e });
-                          setErrors((prev) => ({ ...prev, provider: '' }));
-                        }}
-                      >
-                        <SelectTrigger className={`input ${errors.provider ? 'border-red-500' : ''}`}>
-                          <SelectValue placeholder="Select a Provider" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {providers.map((provider) => (
-                            <SelectItem
-                              key={provider.provider_id}
-                              value={provider.provider_id.toString()}
-                            >
-                              {provider.provider_name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      {errors.provider && (
-                        <span className="text-red-500 text-xs mt-1">{errors.provider}</span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-            
-                {/* Process on Third Party */}
-                <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>
-                    <div className="grow flex flex-col">
-                      <Select
-                        value={formField.process_on_third_party}
-                        onValueChange={(value) => {
-                          setFormField({ ...formField, process_on_third_party: value });
-                          setErrors((prev) => ({ ...prev, process_on_third_party: '' }));
-                        }}
-                      >
-                        <SelectTrigger className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}>
-                          <SelectValue placeholder="Select Status" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="Y">Yes</SelectItem>
-                          <SelectItem value="N">No</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      {errors.process_on_third_party && (
-                        <span className="text-red-500 text-xs mt-1">{errors.process_on_third_party}</span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-            
-                <div className="flex justify-end gap-5">
-                  <Button variant="default" type="submit" disabled={isSubmitting}>
-                    {isSubmitting ? (
-                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
-                    ) : (
-                      'Save Changes'
-                    )}
-                  </Button>
-                </div>
-              </div>
-            </form>
-            
+              </form>
             )}
           </div>
         </DialogBody>
diff --git a/src/pages/master/provider/blocks/AddDialog.tsx b/src/pages/master/provider/blocks/AddDialog.tsx
index cfa72a9..da1f180 100644
--- a/src/pages/master/provider/blocks/AddDialog.tsx
+++ b/src/pages/master/provider/blocks/AddDialog.tsx
@@ -42,14 +42,8 @@ export interface CustomerProps {
   username: string;
 }
 
-export interface TransactionProps {
-  id: string;
-  name: string;
-}
-
 const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL_MASTERDATA = apiConfig.service_master_data;
-const API_URL_TRANSACTION = apiConfig.service_transaction;
 
 const AddDialog = () => {
   const { showAddDialog, handleAddDialog, selectedProvider } = useManageProviderContext();
@@ -69,8 +63,7 @@ const AddDialog = () => {
       { key: 'name', label: 'Name' },
       { key: 'description', label: 'Description' },
       { key: 'type', label: 'Type' },
-      { key: 'status', label: 'Status' },
-      { key: 'transaction_type', label: 'Transaction Type' }
+      { key: 'status', label: 'Status' }
     ];
     const newErrors: Record<string, string> = {};
     let isValid = true;
@@ -93,7 +86,6 @@ const AddDialog = () => {
     description: string;
     type: string;
     status: string;
-    transaction_type: string;
     agent: string | null;
     created_by: string;
     created_at: string;
@@ -102,7 +94,6 @@ const AddDialog = () => {
     description: '',
     type: '',
     status: '',
-    transaction_type: '',
     agent: null,
     created_by: '',
     created_at: ''
@@ -110,7 +101,6 @@ const AddDialog = () => {
 
   const [formField, setFormField] = useState(initialState);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
-  const [transactions, setTransactions] = useState<TransactionProps[]>([]);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
@@ -163,23 +153,6 @@ const AddDialog = () => {
     doCreateProvider(e);
   };
 
-  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 getCustomerList = async (sorting: any) => {
     try {
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
@@ -209,9 +182,10 @@ const AddDialog = () => {
   }, [formattedTime, parsedUser.username, showAddDialog]);
 
   useEffect(() => {
-    getCustomerList([{ id: 'id', desc: false }]);
-    getTransactionTypeList([{ id: 'name', desc: false }]);
-  }, []);
+    if (showAddDialog) {
+      getCustomerList([{ id: 'id', desc: false }]);
+    }
+  }, [showAddDialog]);
 
   useEffect(() => {
     if (showAddDialog === false) {
@@ -235,13 +209,13 @@ const AddDialog = () => {
             )}
 
             <form onSubmit={handleSubmit}>
-              <div className="card-body grid gap-5">
+              <div className="grid gap-5 card-body">
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Name<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <Input
                         className={`input ${errors.name ? 'border-red-500' : ''}`}
                         type="text"
@@ -252,7 +226,7 @@ const AddDialog = () => {
                         }}
                       />
                       {errors.name && (
-                        <span className="text-red-500 text-xs mt-1">{errors.name}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.name}</span>
                       )}
                     </div>
                   </div>
@@ -260,10 +234,10 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Description<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <Input
                         className={`input ${errors.description ? 'border-red-500' : ''}`}
                         type="text"
@@ -274,7 +248,7 @@ const AddDialog = () => {
                         }}
                       />
                       {errors.description && (
-                        <span className="text-red-500 text-xs mt-1">{errors.description}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.description}</span>
                       )}
                     </div>
                   </div>
@@ -282,10 +256,10 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Type<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <Select
                         value={formField.type}
                         onValueChange={(e) => {
@@ -302,17 +276,17 @@ const AddDialog = () => {
                         </SelectContent>
                       </Select>
                       {errors.type && (
-                        <span className="text-red-500 text-xs mt-1">{errors.type}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.type}</span>
                       )}
                     </div>
                   </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">
+                    <label className="flex items-center gap-1 form-label max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <div className="grow flex flex-col">
+                    <div className="flex flex-col grow">
                       <Select
                         value={formField.status}
                         onValueChange={(e) => {
@@ -329,40 +303,7 @@ const AddDialog = () => {
                         </SelectContent>
                       </Select>
                       {errors.status && (
-                        <span className="text-red-500 text-xs mt-1">{errors.status}</span>
-                      )}
-                    </div>
-                  </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">
-                      Transaction Type<span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <Select
-                        value={formField.transaction_type}
-                        onValueChange={(e) => {
-                          setFormField({ ...formField, transaction_type: e });
-                          setErrors((prev) => ({ ...prev, transaction_type: '' }));
-                        }}
-                      >
-                        <SelectTrigger
-                          className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
-                        >
-                          <SelectValue placeholder="Select Transaction Type" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {transactions.map((transaction) => (
-                            <SelectItem key={transaction.id} value={transaction.id}>
-                              {transaction.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      {errors.transaction_type && (
-                        <span className="text-red-500 text-xs mt-1">{errors.transaction_type}</span>
+                        <span className="mt-1 text-xs text-red-500">{errors.status}</span>
                       )}
                     </div>
                   </div>
@@ -371,14 +312,14 @@ const AddDialog = () => {
                 {formField.type === 'agent' ? (
                   <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">
+                      <label className="flex items-center gap-1 form-label max-w-56">
                         Agent Name<span className="text-red-500">*</span>
                       </label>
                       <Popover open={open} onOpenChange={setOpen}>
                         <PopoverTrigger asChild>
                           <button
                             type="button"
-                            className="input col-span-5 text-left"
+                            className="col-span-5 text-left input"
                             style={{ color: 'inherit' }}
                           >
                             {customers.find((customer) => customer.id === formField.agent)
@@ -422,7 +363,7 @@ const AddDialog = () => {
                 ) : (
                   <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">
+                      <label className="flex items-center gap-1 form-label max-w-56">
                         Agent Name
                       </label>
                       <Input
@@ -441,7 +382,7 @@ const AddDialog = () => {
                   </Button>
                   <Button variant="default" type="submit" disabled={isSubmitting}>
                     {isSubmitting ? (
-                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                      <RefreshCw className="w-8 h-8 mx-3 text-white animate-spin" />
                     ) : (
                       'Create'
                     )}
diff --git a/src/pages/master/provider/blocks/EditDialog.tsx b/src/pages/master/provider/blocks/EditDialog.tsx
index 780599f..e50f0b4 100644
--- a/src/pages/master/provider/blocks/EditDialog.tsx
+++ b/src/pages/master/provider/blocks/EditDialog.tsx
@@ -22,7 +22,7 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
-import { CustomerProps, TransactionProps } from './AddDialog';
+import { CustomerProps } from './AddDialog';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import {
   Command,
@@ -37,7 +37,6 @@ import { RefreshCw } from 'lucide-react';
 
 const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL_MASTERDATA = apiConfig.service_master_data;
-const API_URL_TRANSACTION = apiConfig.service_transaction;
 
 const EditDialog = () => {
   const { showEditDialog, handleEditDialog, selectedProvider, provider } =
@@ -59,8 +58,7 @@ const EditDialog = () => {
       { key: 'name', label: 'Name' },
       { key: 'description', label: 'Description' },
       { key: 'type', label: 'Type' },
-      { key: 'status', label: 'Status' },
-      { key: 'transaction_type', label: 'Transaction Type' }
+      { key: 'status', label: 'Status' }
     ];
     const newErrors: Record<string, string> = {};
     let isValid = true;
@@ -83,7 +81,6 @@ const EditDialog = () => {
     description: string;
     type: string;
     status: string;
-    transaction_type: string;
     agent: string | null;
     updated_by: string;
     updated_at: string;
@@ -92,14 +89,12 @@ const EditDialog = () => {
     description: '',
     type: '',
     status: '',
-    transaction_type: '',
     agent: null,
     updated_by: '',
     updated_at: ''
   };
 
   const [formField, setFormField] = useState(initialState);
-  const [transactions, setTransactions] = useState<TransactionProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -162,23 +157,6 @@ const EditDialog = () => {
     }
   };
 
-  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) => {
     setIsLoading(true);
     const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
@@ -234,9 +212,10 @@ const EditDialog = () => {
   }, [formattedTime]);
 
   useEffect(() => {
-    getCustomerList([{ id: 'id', desc: false }]);
-    getTransactionTypeList([{ id: 'name', desc: false }]);
-  }, []);
+    if (showEditDialog) {
+      getCustomerList([{ id: 'id', desc: false }]);
+    }
+  }, [showEditDialog]);
 
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@@ -255,12 +234,12 @@ const EditDialog = () => {
 
             {isLoading ? (
               <div className="flex flex-col items-center justify-center p-8">
-                <div className="animate-pulse flex space-x-4 w-full">
-                  <div className="flex-1 space-y-4 py-1">
-                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                <div className="flex w-full space-x-4 animate-pulse">
+                  <div className="flex-1 py-1 space-y-4">
+                    <div className="w-3/4 h-4 bg-gray-200 rounded"></div>
                     <div className="space-y-2">
                       <div className="h-4 bg-gray-200 rounded"></div>
-                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                      <div className="w-5/6 h-4 bg-gray-200 rounded"></div>
                     </div>
                   </div>
                 </div>
@@ -268,13 +247,13 @@ const EditDialog = () => {
               </div>
             ) : (
               <form onSubmit={handleUpdate}>
-                <div className="card-body grid gap-5">
+                <div className="grid gap-5 card-body">
                   <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">
+                      <label className="flex items-center gap-1 form-label max-w-56">
                         Name<span className="text-red-500">*</span>
                       </label>
-                      <div className="grow flex flex-col">
+                      <div className="flex flex-col grow">
                         <Input
                           className={`input ${errors.name ? 'border-red-500' : ''}`}
                           type="text"
@@ -285,7 +264,7 @@ const EditDialog = () => {
                           }}
                         />
                         {errors.name && (
-                          <span className="text-red-500 text-xs mt-1">{errors.name}</span>
+                          <span className="mt-1 text-xs text-red-500">{errors.name}</span>
                         )}
                       </div>
                     </div>
@@ -294,10 +273,10 @@ const EditDialog = () => {
                   {/* Description */}
                   <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">
+                      <label className="flex items-center gap-1 form-label max-w-56">
                         Description<span className="text-red-500">*</span>
                       </label>
-                      <div className="grow flex flex-col">
+                      <div className="flex flex-col grow">
                         <Input
                           className={`input ${errors.description ? 'border-red-500' : ''}`}
                           type="text"
@@ -308,7 +287,7 @@ const EditDialog = () => {
                           }}
                         />
                         {errors.description && (
-                          <span className="text-red-500 text-xs mt-1">{errors.description}</span>
+                          <span className="mt-1 text-xs text-red-500">{errors.description}</span>
                         )}
                       </div>
                     </div>
@@ -316,10 +295,10 @@ const EditDialog = () => {
 
                   <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">
+                      <label className="flex items-center gap-1 form-label max-w-56">
                         Type<span className="text-red-500">*</span>
                       </label>
-                      <div className="grow flex flex-col">
+                      <div className="flex flex-col grow">
                         <Select
                           value={formField.type}
                           onValueChange={(value) => {
@@ -336,7 +315,7 @@ const EditDialog = () => {
                           </SelectContent>
                         </Select>
                         {errors.type && (
-                          <span className="text-red-500 text-xs mt-1">{errors.type}</span>
+                          <span className="mt-1 text-xs text-red-500">{errors.type}</span>
                         )}
                       </div>
                     </div>
@@ -344,10 +323,10 @@ const EditDialog = () => {
 
                   <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">
+                      <label className="flex items-center gap-1 form-label max-w-56">
                         Status<span className="text-red-500">*</span>
                       </label>
-                      <div className="grow flex flex-col">
+                      <div className="flex flex-col grow">
                         <Select
                           value={formField.status}
                           onValueChange={(value) => {
@@ -366,42 +345,7 @@ const EditDialog = () => {
                           </SelectContent>
                         </Select>
                         {errors.status && (
-                          <span className="text-red-500 text-xs mt-1">{errors.status}</span>
-                        )}
-                      </div>
-                    </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">
-                        Transaction Type<span className="text-red-500">*</span>
-                      </label>
-                      <div className="grow flex flex-col">
-                        <Select
-                          value={formField.transaction_type}
-                          onValueChange={(value) => {
-                            setFormField({ ...formField, status: value });
-                            setErrors((prev) => ({ ...prev, status: '' }));
-                          }}
-                        >
-                          <SelectTrigger
-                            className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
-                          >
-                            <SelectValue placeholder="Select Transaction Type" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {transactions.map((transaction) => (
-                              <SelectItem key={transaction.id} value={transaction.id}>
-                                {transaction.name}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        {errors.transaction_type && (
-                          <span className="text-red-500 text-xs mt-1">
-                            {errors.transaction_type}
-                          </span>
+                          <span className="mt-1 text-xs text-red-500">{errors.status}</span>
                         )}
                       </div>
                     </div>
@@ -410,14 +354,14 @@ const EditDialog = () => {
                   {formField.type === 'agent' ? (
                     <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">
+                        <label className="flex items-center gap-1 form-label max-w-56">
                           Agent Name<span className="text-red-500">*</span>
                         </label>
                         <Popover open={open} onOpenChange={setOpen}>
                           <PopoverTrigger asChild>
                             <button
                               type="button"
-                              className="input col-span-5 text-left"
+                              className="col-span-5 text-left input"
                               style={{ color: 'inherit' }}
                             >
                               {customers.find((customer) => customer.id === formField.agent)
@@ -461,7 +405,7 @@ const EditDialog = () => {
                   ) : (
                     <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">
+                        <label className="flex items-center gap-1 form-label max-w-56">
                           Agent Name
                         </label>
                         <Input
@@ -477,7 +421,7 @@ const EditDialog = () => {
                   <div className="flex justify-end">
                     <Button variant="default" type="submit" disabled={isSubmitting}>
                       {isSubmitting ? (
-                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                        <RefreshCw className="w-8 h-8 mx-3 text-white animate-spin" />
                       ) : (
                         'Save Changes'
                       )}