diff --git a/src/pages/transfer/transfertype/blocks/AddDialog.tsx b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
index b57fcab..1458819 100644
--- a/src/pages/transfer/transfertype/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
@@ -482,6 +482,7 @@ const AddDialog = () => {
                           <SelectItem value="DA">Disbursment Agent</SelectItem>
                           <SelectItem value="WI">Withdraw Merchant</SelectItem>
                           <SelectItem value="IC">Income Merchant</SelectItem>
+                          <SelectItem value="DN">Donation</SelectItem>
                         </SelectContent>
                       </Select>
                       {errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>}
diff --git a/src/pages/transfer/transfertype/blocks/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
index 2dab877..4a18331 100644
--- a/src/pages/transfer/transfertype/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
@@ -68,6 +68,7 @@ const EditDialog = () => {
     message: ''
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const [isLoadingData, setIsLoadingData] = useState(true);
 
   const [isLoadingWallets, setIsLoadingWallets] = useState(false);
 
@@ -316,6 +317,7 @@ const EditDialog = () => {
     if (!showEditDialog || !selectedTransferType) return;
 
     const fetchTransactionType = async () => {
+      setIsLoadingData(true);
       try {
         const response = await GetData(
           `${API_URL}/transactiontype/getdata/${selectedTransferType}`,
@@ -357,6 +359,8 @@ const EditDialog = () => {
           show: true,
           message: 'Failed to load transaction type data'
         });
+      } finally {
+        setIsLoadingData(false);
       }
     };
 
@@ -414,7 +418,6 @@ const EditDialog = () => {
               <h1 className="text-xl font-semibold leading-none text-gray-900">
                 Update Transaction Type
               </h1>
-              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
             </div>
             <div
               className="cursor-pointer hover:opacity-100 opacity-50"
@@ -427,6 +430,7 @@ const EditDialog = () => {
             </div>
           </div>
         </DialogHeader>
+
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
           <div className="flex flex-col px-0">
             {alert.show && (
@@ -436,384 +440,415 @@ const EditDialog = () => {
                 </Alert>
               </div>
             )}
-            <form action="" onSubmit={handleSubmit}>
-              <div className="card-body grid gap-5 p-0">
-                <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">
-                      Transfer Type Name
-                      <span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <Input
-                        className={`input ${errors.name ? 'border-red-500' : ''}`}
-                        type="text"
-                        autoComplete="off"
-                        value={formField.name}
-                        onChange={({ target }) => {
-                          setFormField((prev) => ({ ...prev, name: target.value }));
-                          if (target.value) {
-                            setErrors((prev) => ({ ...prev, name: '' }));
-                          }
-                        }}
-                      />
-                      {errors.name && (
-                        <span className="text-red-500 text-xs mt-1">{errors.name}</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">
-                      Description
-                      <span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <Input
-                        className={`input ${errors.description ? 'border-red-500' : ''}`}
-                        type="text"
-                        autoComplete="off"
-                        value={formField.description}
-                        onChange={({ target }) => {
-                          setFormField((prev) => ({ ...prev, description: target.value }));
-                          if (target.value) {
-                            setErrors((prev) => ({ ...prev, description: '' }));
-                          }
-                        }}
-                      />
-                      {errors.description && (
-                        <span className="text-red-500 text-xs mt-1">{errors.description}</span>
-                      )}
+            {isLoadingData ? (
+              <div className="p-5">
+                <div className="animate-pulse space-y-4">
+                  {[...Array(6)].map((_, idx) => (
+                    <div key={idx}>
+                      <div className="h-4 bg-gray-200 rounded w-1/3 mb-2"></div>
+                      <div className="h-10 bg-gray-200 rounded w-full"></div>
+                    </div>
+                  ))}
+                </div>
+                <p className="mt-4 text-gray-500 text-center">Loading transaction type data...</p>
+              </div>
+            ) : (
+              <form action="" onSubmit={handleSubmit}>
+                <div className="card-body grid gap-5 p-0">
+                  <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">
+                        Transfer Type Name
+                        <span className="text-red-500">*</span>
+                      </label>
+                      <div className="grow flex flex-col">
+                        <Input
+                          className={`input ${errors.name ? 'border-red-500' : ''}`}
+                          type="text"
+                          autoComplete="off"
+                          value={formField.name}
+                          onChange={({ target }) => {
+                            setFormField((prev) => ({ ...prev, name: target.value }));
+                            if (target.value) {
+                              setErrors((prev) => ({ ...prev, name: '' }));
+                            }
+                          }}
+                        />
+                        {errors.name && (
+                          <span className="text-red-500 text-xs mt-1">{errors.name}</span>
+                        )}
+                      </div>
                     </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">
-                      Minimum Amount
-                    </label>
-                    <div className="grow">
-                      <NumericFormat
-                        className="input"
-                        value={formField.minimum_amount}
-                        thousandSeparator="."
-                        decimalSeparator=","
-                        allowNegative={false}
-                        onValueChange={(values) => {
-                          setFormField((prev) => ({
-                            ...prev,
-                            minimum_amount: values.floatValue || 0
-                          }));
-                        }}
-                        placeholder="Enter Minimum Amount"
-                      />
+                  <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"
+                          autoComplete="off"
+                          value={formField.description}
+                          onChange={({ target }) => {
+                            setFormField((prev) => ({ ...prev, description: target.value }));
+                            if (target.value) {
+                              setErrors((prev) => ({ ...prev, description: '' }));
+                            }
+                          }}
+                        />
+                        {errors.description && (
+                          <span className="text-red-500 text-xs mt-1">{errors.description}</span>
+                        )}
+                      </div>
                     </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">
-                      Maximum Amount
-                    </label>
-                    <div className="grow">
-                      <NumericFormat
-                        className="input"
-                        value={formField.maximum_amount}
-                        thousandSeparator="."
-                        decimalSeparator=","
-                        allowNegative={false}
-                        onValueChange={(values) => {
-                          setFormField((prev) => ({
-                            ...prev,
-                            maximum_amount: values.floatValue || 0
-                          }));
-                        }}
-                        placeholder="Enter Maximum Amount"
-                      />
+                  <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">
+                        Minimum Amount
+                      </label>
+                      <div className="grow">
+                        <NumericFormat
+                          className="input"
+                          value={formField.minimum_amount}
+                          thousandSeparator="."
+                          decimalSeparator=","
+                          allowNegative={false}
+                          onValueChange={(values) => {
+                            setFormField((prev) => ({
+                              ...prev,
+                              minimum_amount: values.floatValue || 0
+                            }));
+                          }}
+                          placeholder="Enter Minimum Amount"
+                        />
+                      </div>
                     </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">
-                      Max Transaction per day
-                    </label>
-                    <div className="grow">
-                      <NumericFormat
-                        className="input"
-                        value={formField.max_transaction_per_day}
-                        thousandSeparator="."
-                        decimalSeparator=","
-                        allowNegative={false}
-                        onValueChange={(values) => {
-                          setFormField((prev) => ({
-                            ...prev,
-                            max_transaction_per_day: values.floatValue || 0
-                          }));
-                        }}
-                        placeholder="Enter Max Transaction Per Day"
-                      />
-                    </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">
-                      From Account
-                      <span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      {renderSelectWithLoading(
-                        formField.wallet_origin,
-                        (value) => setFormField({ ...formField, wallet_origin: value }),
-                        wallets,
-                        'Select Wallet',
-                        isLoadingWallets
-                      )}
-                      {errors.wallet_origin && (
-                        <span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</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">
-                      To Account
-                      <span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <Select
-                        value={formField.wallet_destination}
-                        onValueChange={(wallet_destination) => {
-                          setFormField((prev) => ({ ...prev, wallet_destination }));
-                          setErrors((prev) => ({ ...prev, wallet_destination: '' }));
-                        }}
-                      >
-                        <SelectTrigger
-                          className={errors.wallet_destination ? 'border-red-500' : ''}
+                  <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">
+                        Maximum Amount
+                      </label>
+                      <div className="grow">
+                        <NumericFormat
+                          className="input"
+                          value={formField.maximum_amount}
+                          thousandSeparator="."
+                          decimalSeparator=","
+                          allowNegative={false}
+                          onValueChange={(values) => {
+                            setFormField((prev) => ({
+                              ...prev,
+                              maximum_amount: values.floatValue || 0
+                            }));
+                          }}
+                          placeholder="Enter Maximum Amount"
+                        />
+                      </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">
+                        Max Transaction per day
+                      </label>
+                      <div className="grow">
+                        <NumericFormat
+                          className="input"
+                          value={formField.max_transaction_per_day}
+                          thousandSeparator="."
+                          decimalSeparator=","
+                          allowNegative={false}
+                          onValueChange={(values) => {
+                            setFormField((prev) => ({
+                              ...prev,
+                              max_transaction_per_day: values.floatValue || 0
+                            }));
+                          }}
+                          placeholder="Enter Max Transaction Per Day"
+                        />
+                      </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">
+                        From Account
+                        <span className="text-red-500">*</span>
+                      </label>
+                      <div className="grow flex flex-col">
+                        {renderSelectWithLoading(
+                          formField.wallet_origin,
+                          (value) => setFormField({ ...formField, wallet_origin: value }),
+                          wallets,
+                          'Select Wallet',
+                          isLoadingWallets
+                        )}
+                        {errors.wallet_origin && (
+                          <span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</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">
+                        To Account
+                        <span className="text-red-500">*</span>
+                      </label>
+                      <div className="grow flex flex-col">
+                        <Select
+                          value={formField.wallet_destination}
+                          onValueChange={(wallet_destination) => {
+                            setFormField((prev) => ({ ...prev, wallet_destination }));
+                            setErrors((prev) => ({ ...prev, wallet_destination: '' }));
+                          }}
                         >
-                          <SelectValue placeholder="Select Wallet" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {wallets.map((wallet) => (
-                            <SelectItem value={wallet.id} key={wallet.id}>
-                              {wallet.name}
+                          <SelectTrigger
+                            className={errors.wallet_destination ? 'border-red-500' : ''}
+                          >
+                            <SelectValue placeholder="Select Wallet" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {wallets.map((wallet) => (
+                              <SelectItem value={wallet.id} key={wallet.id}>
+                                {wallet.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {errors.wallet_destination && (
+                          <span className="text-red-500 text-xs mt-1">
+                            {errors.wallet_destination}
+                          </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">
+                        Status Transaction Type
+                        <span className="text-red-500"> *</span>
+                      </label>
+                      <div className="grow flex flex-col">
+                        <Select
+                          value={formField.type}
+                          onValueChange={(value) => {
+                            setFormField((prev) => ({ ...prev, type: value }));
+                            setErrors((prev) => ({ ...prev, type: '' }));
+                          }}
+                        >
+                          <SelectTrigger className={errors.type ? 'border-red-500' : ''}>
+                            <SelectValue placeholder="Select" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="D">Disbursement </SelectItem>
+                            <SelectItem value="O">Other </SelectItem>
+                            <SelectItem value="CA">
+                              Change Group Emoney Customer to Agent{' '}
                             </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      {errors.wallet_destination && (
-                        <span className="text-red-500 text-xs mt-1">
-                          {errors.wallet_destination}
-                        </span>
-                      )}
+                            <SelectItem value="AC">
+                              Change Group Emoney Agent to Customer{' '}
+                            </SelectItem>
+                            <SelectItem value="PA">
+                              Change Group Point Agent to Customer{' '}
+                            </SelectItem>
+                            <SelectItem value="PC">Change Group Point Customer to Agent</SelectItem>
+                            <SelectItem value="CE">Return Customer Emoney </SelectItem>
+                            <SelectItem value="AD">Return Agent Deposit </SelectItem>
+                            <SelectItem value="AM">Return Agent Merchant </SelectItem>
+                            <SelectItem value="AE">Return Agent Emoney </SelectItem>
+                            <SelectItem value="R">Reward Point </SelectItem>
+                            <SelectItem value="TE">Top Up Escrow </SelectItem>
+                            <SelectItem value="TM">Top Up Master Agent </SelectItem>
+                            <SelectItem value="TA">Top Up Agent </SelectItem>
+                            <SelectItem value="PL">Purchase Loja</SelectItem>
+                            <SelectItem value="DE">Disbursment Escrow</SelectItem>
+                            <SelectItem value="DM">Disbursment Master Agent</SelectItem>
+                            <SelectItem value="DA">Disbursment Agent</SelectItem>
+                            <SelectItem value="WI">Withdraw Merchant</SelectItem>
+                            <SelectItem value="IC">Income Merchant</SelectItem>
+                            <SelectItem value="DN">Donation</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        {errors.type && (
+                          <span className="text-red-500 text-xs mt-1">{errors.type}</span>
+                        )}
+                      </div>
                     </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">
-                      Status Transaction Type
-                      <span className="text-red-500"> *</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <Select
-                        value={formField.type}
-                        onValueChange={(value) => {
-                          setFormField((prev) => ({ ...prev, type: value }));
-                          setErrors((prev) => ({ ...prev, type: '' }));
-                        }}
-                      >
-                        <SelectTrigger className={errors.type ? 'border-red-500' : ''}>
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="D">Disbursement </SelectItem>
-                          <SelectItem value="O">Other </SelectItem>
-                          <SelectItem value="CA">Change Group Emoney Customer to Agent </SelectItem>
-                          <SelectItem value="AC">Change Group Emoney Agent to Customer </SelectItem>
-                          <SelectItem value="PA">Change Group Point Agent to Customer </SelectItem>
-                          <SelectItem value="PC">Change Group Point Customer to Agent</SelectItem>
-                          <SelectItem value="CE">Return Customer Emoney </SelectItem>
-                          <SelectItem value="AD">Return Agent Deposit </SelectItem>
-                          <SelectItem value="AM">Return Agent Merchant </SelectItem>
-                          <SelectItem value="AE">Return Agent Emoney </SelectItem>
-                          <SelectItem value="R">Reward Point </SelectItem>
-                          <SelectItem value="TE">Top Up Escrow </SelectItem>
-                          <SelectItem value="TM">Top Up Master Agent </SelectItem>
-                          <SelectItem value="TA">Top Up Agent </SelectItem>
-                          <SelectItem value="PL">Purchase Loja</SelectItem>
-                          <SelectItem value="DE">Disbursment Escrow</SelectItem>
-                          <SelectItem value="DM">Disbursment Master Agent</SelectItem>
-                          <SelectItem value="DA">Disbursment Agent</SelectItem>
-                          <SelectItem value="WI">Withdraw Merchant</SelectItem>
-                          <SelectItem value="IC">Income Merchant</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      {errors.type && (
-                        <span className="text-red-500 text-xs mt-1">{errors.type}</span>
-                      )}
+                  <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 Approval
+                        <span className="text-red-500">*</span>
+                      </label>
+                      <div className="grow flex flex-col">
+                        <Select
+                          value={formField.status_approval}
+                          onValueChange={(value) => {
+                            setFormField((prev) => ({ ...prev, status_approval: value }));
+                            setErrors((prev) => ({ ...prev, status_approval: '' }));
+                          }}
+                        >
+                          <SelectTrigger className={errors.status_approval ? 'border-red-500' : ''}>
+                            <SelectValue placeholder="Select" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="Y">Yes</SelectItem>
+                            <SelectItem value="N">No</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        {errors.status_approval && (
+                          <span className="text-red-500 text-xs mt-1">
+                            {errors.status_approval}
+                          </span>
+                        )}
+                      </div>
                     </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">
+                        Status Kind
+                        <span className="text-red-500">*</span>
+                      </label>
 
-                <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 Approval
-                      <span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <Select
-                        value={formField.status_approval}
-                        onValueChange={(value) => {
-                          setFormField((prev) => ({ ...prev, status_approval: value }));
-                          setErrors((prev) => ({ ...prev, status_approval: '' }));
-                        }}
-                      >
-                        <SelectTrigger className={errors.status_approval ? 'border-red-500' : ''}>
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="Y">Yes</SelectItem>
-                          <SelectItem value="N">No</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      {errors.status_approval && (
-                        <span className="text-red-500 text-xs mt-1">{errors.status_approval}</span>
-                      )}
+                      <div className="grow flex flex-col">
+                        <Select
+                          value={formField.status_kind}
+                          onValueChange={(value) => {
+                            setFormField((prev) => ({ ...prev, status_kind: value }));
+                            setErrors((prev) => ({ ...prev, status_kind: '' }));
+                          }}
+                        >
+                          <SelectTrigger className={errors.status_kind ? 'border-red-500' : ''}>
+                            <SelectValue placeholder="Select" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="R">Return</SelectItem>
+                            <SelectItem value="T">Transfer</SelectItem>
+                            <SelectItem value="P">Purchase</SelectItem>
+                            <SelectItem value="W">Withdraw</SelectItem>
+                            <SelectItem value="U">Top Up</SelectItem>
+                            <SelectItem value="N">Top Up Patner</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        {errors.status_kind && (
+                          <span className="text-red-500 text-xs mt-1">{errors.status_kind}</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">
+                        Status
+                        <span className="text-red-500"> *</span>
+                      </label>
+                      <div className="grow flex flex-col">
+                        <Select
+                          value={formField.status}
+                          onValueChange={(value) => {
+                            setFormField((prev) => ({ ...prev, status: value }));
+                            setErrors((prev) => ({ ...prev, status: '' }));
+                          }}
+                        >
+                          <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
+                            <SelectValue placeholder="Select" />
+                          </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>
-                </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">
-                      Status Kind
-                      <span className="text-red-500">*</span>
-                    </label>
 
-                    <div className="grow flex flex-col">
-                      <Select
-                        value={formField.status_kind}
-                        onValueChange={(value) => {
-                          setFormField((prev) => ({ ...prev, status_kind: value }));
-                          setErrors((prev) => ({ ...prev, status_kind: '' }));
-                        }}
-                      >
-                        <SelectTrigger className={errors.status_kind ? 'border-red-500' : ''}>
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="R">Return</SelectItem>
-                          <SelectItem value="T">Transfer</SelectItem>
-                          <SelectItem value="P">Purchase</SelectItem>
-                          <SelectItem value="W">Withdraw</SelectItem>
-                          <SelectItem value="U">Top Up</SelectItem>
-                          <SelectItem value="N">Top Up Patner</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      {errors.status_kind && (
-                        <span className="text-red-500 text-xs mt-1">{errors.status_kind}</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">
-                      Status
-                      <span className="text-red-500"> *</span>
-                    </label>
-                    <div className="grow flex flex-col">
-                      <Select
-                        value={formField.status}
-                        onValueChange={(value) => {
-                          setFormField((prev) => ({ ...prev, status: value }));
-                          setErrors((prev) => ({ ...prev, status: '' }));
-                        }}
-                      >
-                        <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
-                          <SelectValue placeholder="Select" />
-                        </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>
-
-                <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">
-                      Groups
-                      <span className="text-red-500">*</span>
-                    </label>
-                    <div className="relative w-full">
-                      <Input
-                        type="text"
-                        placeholder="No groups selected"
-                        value={selectedPermissionNames || ''}
-                        readOnly
-                        className={`bg-gray-100 mb-2 ${errors.permission ? 'border-red-500' : ''}`}
-                      />
-                      {errors.permission && (
-                        <span className="text-red-500 text-xs mt-2">{errors.permission}</span>
-                      )}
-                      <div className="border rounded-md p-3 max-h-48 overflow-y-auto">
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-                          {groups.map((group) => (
-                            <div key={group.id} className="flex items-center space-x-2">
-                              <Checkbox
-                                id={`group-${group.id}`}
-                                checked={formField.permission.includes(group.id)}
-                                onCheckedChange={() => handleGroupChange(group.id)}
-                              />
-                              <label
-                                htmlFor={`group-${group.id}`}
-                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                              >
-                                {group.name}
-                              </label>
-                            </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">
+                        Groups
+                        <span className="text-red-500">*</span>
+                      </label>
+                      <div className="relative w-full">
+                        <Input
+                          type="text"
+                          placeholder="No groups selected"
+                          value={selectedPermissionNames || ''}
+                          readOnly
+                          className={`bg-gray-100 mb-2 ${errors.permission ? 'border-red-500' : ''}`}
+                        />
+                        {errors.permission && (
+                          <span className="text-red-500 text-xs mt-2">{errors.permission}</span>
+                        )}
+                        <div className="border rounded-md p-3 max-h-48 overflow-y-auto">
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                            {groups.map((group) => (
+                              <div key={group.id} className="flex items-center space-x-2">
+                                <Checkbox
+                                  id={`group-${group.id}`}
+                                  checked={formField.permission.includes(group.id)}
+                                  onCheckedChange={() => handleGroupChange(group.id)}
+                                />
+                                <label
+                                  htmlFor={`group-${group.id}`}
+                                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                >
+                                  {group.name}
+                                </label>
+                              </div>
+                            ))}
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
 
-                <div className="flex justify-end pt-2.5 gap-5">
-                  <Button variant={'outline'} type="button" onClick={() => resetForm()}>
-                    Reset
-                  </Button>
-                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
-                    {isSubmitting ? 'Saving...' : 'Save Changes'}
-                  </Button>
+                  <div className="flex justify-end pt-2.5 gap-5">
+                    <Button variant={'outline'} type="button" onClick={() => resetForm()}>
+                      Reset
+                    </Button>
+                    <Button
+                      variant={'default'}
+                      type="submit"
+                      disabled={isSubmitting || isLoadingData}
+                    >
+                      {isSubmitting ? 'Saving...' : 'Save Changes'}
+                    </Button>
+                  </div>
                 </div>
-              </div>
-            </form>
-            <ManageTransferFeeContextProvider transactionTypeId={selectedTransferType}>
-              <Container>
-                <div className="grid gap-5 lg:gap-7.5 mt-5">
-                  <DataGridInner />
-                </div>
-                <AddFeeDialog />
-                <DeleteFeeDialog />
-                <EditFeeDialog />
-              </Container>
-            </ManageTransferFeeContextProvider>
+              </form>
+            )}
+
+            {isLoadingData && (
+              <ManageTransferFeeContextProvider transactionTypeId={selectedTransferType}>
+                <Container>
+                  <div className="grid gap-5 lg:gap-7.5 mt-5">
+                    <DataGridInner />
+                  </div>
+                  <AddFeeDialog />
+                  <DeleteFeeDialog />
+                  <EditFeeDialog />
+                </Container>
+              </ManageTransferFeeContextProvider>
+            )}
           </div>
         </DialogBody>
       </DialogContent>
diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
index 517b956..c815be0 100644
--- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
+++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
@@ -203,7 +203,8 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             DM: 'Disbursment Master Agent',
             DA: 'Disbursment Agent',
             WI: 'Withdraw Merchant',
-            IC: 'Income Merchant'
+            IC: 'Income Merchant',
+            DN: 'Donation'
           };
 
           return mapping[row.type] || 'Unknown';
@@ -227,20 +228,18 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
       {
         accessorFn: (row: { status_kind: string }) => {
           const mapping: Record<string, string> = {
-            R: "Return",
-            T: "Transfer",
-            P: "Purchase",
-            W: "Withdraw",
-            U: "Top Up",
-            N: "Top Up Patner"
+            R: 'Return',
+            T: 'Transfer',
+            P: 'Purchase',
+            W: 'Withdraw',
+            U: 'Top Up',
+            N: 'Top Up Patner'
           };
 
           return mapping[row.status_kind] || 'Unknown';
         },
         id: 'status_kind',
-        header: ({ column }) => (
-          <DataGridColumnHeader title="Status Kind" column={column} />
-        ),
+        header: ({ column }) => <DataGridColumnHeader title="Status Kind" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
@@ -295,22 +294,19 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
     let filterObject: Record<string, any> = {};
 
     if (debouncedSearchTerm) {
-      filterObject["any"] = debouncedSearchTerm.toLowerCase();
+      filterObject['any'] = debouncedSearchTerm.toLowerCase();
     }
 
     if (columnFilters.length > 0) {
       columnFilters.forEach((filter: any) => {
         if (filter.id && filter.value) {
           if (filter.id === 'name') {
-            filterObject["any"] = filter.value.toLowerCase();
-          } 
-          else if (filter.id === 'wallet_origin') {
-            filterObject["wallet_origin.name"] = filter.value.toLowerCase();
-          }
-          else if (filter.id === 'wallet_destination') {
-            filterObject["wallet_destination.name"] = filter.value.toLowerCase();
-          }
-          else {
+            filterObject['any'] = filter.value.toLowerCase();
+          } else if (filter.id === 'wallet_origin') {
+            filterObject['wallet_origin.name'] = filter.value.toLowerCase();
+          } else if (filter.id === 'wallet_destination') {
+            filterObject['wallet_destination.name'] = filter.value.toLowerCase();
+          } else {
             filterObject[filter.id] = filter.value.toLowerCase();
           }
         }
@@ -369,4 +365,4 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
 };
 
 export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
-export type { TransferType };
\ No newline at end of file
+export type { TransferType };