Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx

@@ -363,8 +363,8 @@ const ManageTransferFeeContextProvider = ({
 
   return (
     <div className="container mx-auto py-5">
-      <div className="flex justify-between items-center mt-6">
+      <div className="flex items-center mb-5 px-5">
-        <h1 className="text-xl font-semibold text-gray-900">Manage Transaction Fee</h1>
+        <h2 className="text-xl font-semibold text-gray-900">Manage Transaction Fee</h2>
       </div>
       <ManageTransferFeeContext.Provider
         value={{

src/pages/transfer/transfertype/blocks/AddDialog.tsx

@@ -164,11 +164,12 @@ const AddDialog = () => {
           toast.error(response?.message || 'Failed to create transfer type');
           return false;
         }
-      } catch (error) {
+      } catch (error: any) {
         toast.error(
-          error instanceof Error
+          error?.response?.data?.message ||
+            (error instanceof Error
               ? error.message
-            : 'An error occurred while creating transfer type'
+              : 'An error occurred while creating transfer type')
         );
         return false;
       }
@@ -203,8 +204,9 @@ const AddDialog = () => {
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
         setCustomers(response?.data.list);
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error fetching customer', error);
+        toast.error(error?.response?.data?.message || 'Failed to fetch customer data');
       }
     };
 
@@ -284,7 +286,9 @@ const AddDialog = () => {
                           }
                         }}
                       />
-                      {errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
+                      {errors.name && (
+                        <span className="text-red-500 text-xs mt-1">{errors.name}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -308,7 +312,9 @@ const AddDialog = () => {
                           }
                         }}
                       />
-                      {errors.description && <span className="text-red-500 text-xs mt-1">{errors.description}</span>}
+                      {errors.description && (
+                        <span className="text-red-500 text-xs mt-1">{errors.description}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -408,7 +414,9 @@ const AddDialog = () => {
                           ))}
                         </SelectContent>
                       </Select>
-                      {errors.wallet_origin && <span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</span>}
+                      {errors.wallet_origin && (
+                        <span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -427,7 +435,9 @@ const AddDialog = () => {
                           setErrors((prev) => ({ ...prev, wallet_destination: '' }));
                         }}
                       >
-                        <SelectTrigger className={errors.wallet_destination ? 'border-red-500' : ''}>
+                        <SelectTrigger
+                          className={errors.wallet_destination ? 'border-red-500' : ''}
+                        >
                           <SelectValue placeholder="Select Wallet" />
                         </SelectTrigger>
                         <SelectContent>
@@ -438,7 +448,11 @@ const AddDialog = () => {
                           ))}
                         </SelectContent>
                       </Select>
-                      {errors.wallet_destination && <span className="text-red-500 text-xs mt-1">{errors.wallet_destination}</span>}
+                      {errors.wallet_destination && (
+                        <span className="text-red-500 text-xs mt-1">
+                          {errors.wallet_destination}
+                        </span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -485,7 +499,9 @@ const AddDialog = () => {
                           <SelectItem value="DN">Donation</SelectItem>
                         </SelectContent>
                       </Select>
-                      {errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>}
+                      {errors.type && (
+                        <span className="text-red-500 text-xs mt-1">{errors.type}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -512,7 +528,9 @@ const AddDialog = () => {
                           <SelectItem value="N">No</SelectItem>
                         </SelectContent>
                       </Select>
-                      {errors.status_approval && <span className="text-red-500 text-xs mt-1">{errors.status_approval}</span>}
+                      {errors.status_approval && (
+                        <span className="text-red-500 text-xs mt-1">{errors.status_approval}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -543,7 +561,9 @@ const AddDialog = () => {
                           <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>}
+                      {errors.status_kind && (
+                        <span className="text-red-500 text-xs mt-1">{errors.status_kind}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -571,7 +591,9 @@ const AddDialog = () => {
                           <SelectItem value="N">Inactive</SelectItem>
                         </SelectContent>
                       </Select>
-                      {errors.status && <span className="text-red-500 text-xs mt-1">{errors.status}</span>}
+                      {errors.status && (
+                        <span className="text-red-500 text-xs mt-1">{errors.status}</span>
+                      )}
                     </div>
                   </div>
                 </div>

src/pages/transfer/transfertype/blocks/EditDialog.tsx

@@ -234,8 +234,10 @@ const EditDialog = () => {
         toast.error(response?.message || 'Failed to update transfer type');
         return false;
       }
-    } catch (error) {
+    } catch (error: any) {
-      toast.error(error instanceof Error ? error.message : 'Failed to Update Transfer Type');
+      toast.error(
+        error?.response?.data?.message || error.message || 'Failed to Update Transfer Type'
+      );
       return false;
     }
   }, [formField, selectedTransferType]);
@@ -257,8 +259,9 @@ const EditDialog = () => {
         if (response?.status && response?.data) {
           setCustomers(response.data.list);
         }
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error fetching customer', error);
+        toast.error(error?.response?.data?.message || 'Failed to fetch customer data');
       }
     };
 
@@ -281,8 +284,9 @@ const EditDialog = () => {
         if (response?.status && response?.data) {
           setGroups(response.data.list);
         }
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error fetching groups', error);
+        toast.error(error?.response?.data?.message || 'Failed to fetch groups');
       }
     };
 
@@ -305,8 +309,9 @@ const EditDialog = () => {
         if (response?.status && response?.data) {
           setWallets(response.data.list);
         }
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error fetching wallets', error);
+        toast.error(error?.response?.data?.message || 'Failed to fetch wallets');
       }
     };
 
@@ -353,8 +358,9 @@ const EditDialog = () => {
           }));
         }
         // console.log(response);
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error fetching transaction type', error);
+        toast.error(error?.response?.data?.message || 'Failed to load transaction type data');
         setAlert({
           show: true,
           message: 'Failed to load transaction type data'
@@ -454,6 +460,7 @@ const EditDialog = () => {
                 <p className="mt-4 text-gray-500 text-center">Loading transaction type data...</p>
               </div>
             ) : (
+              <div>
                 <form action="" onSubmit={handleSubmit}>
                   <div className="card-body grid gap-5 p-0">
                     <div className="w-full">
@@ -593,7 +600,9 @@ const EditDialog = () => {
                             isLoadingWallets
                           )}
                           {errors.wallet_origin && (
-                          <span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</span>
+                            <span className="text-red-500 text-xs mt-1">
+                              {errors.wallet_origin}
+                            </span>
                           )}
                         </div>
                       </div>
@@ -664,7 +673,9 @@ const EditDialog = () => {
                               <SelectItem value="PA">
                                 Change Group Point Agent to Customer{' '}
                               </SelectItem>
-                            <SelectItem value="PC">Change Group Point Customer to Agent</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>
@@ -703,7 +714,9 @@ const EditDialog = () => {
                               setErrors((prev) => ({ ...prev, status_approval: '' }));
                             }}
                           >
-                          <SelectTrigger className={errors.status_approval ? 'border-red-500' : ''}>
+                            <SelectTrigger
+                              className={errors.status_approval ? 'border-red-500' : ''}
+                            >
                               <SelectValue placeholder="Select" />
                             </SelectTrigger>
                             <SelectContent>
@@ -835,9 +848,7 @@ const EditDialog = () => {
                     </div>
                   </div>
                 </form>
-            )}
+                <div className="mt-8 pt-6 border-t border-gray-200">
-
-            {isLoadingData && (
                   <ManageTransferFeeContextProvider transactionTypeId={selectedTransferType}>
                     <Container>
                       <div className="grid gap-5 lg:gap-7.5 mt-5">
@@ -848,6 +859,8 @@ const EditDialog = () => {
                       <EditFeeDialog />
                     </Container>
                   </ManageTransferFeeContextProvider>
+                </div>
+              </div>
             )}
           </div>
         </DialogBody>

src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx

@@ -106,6 +106,25 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
     setShowDeleteDialog(show);
   }, []);
 
+  const StatusBadge = ({
+    value,
+    map
+  }: {
+    value: string;
+    map: Record<string, { label: string; color: string }>;
+  }) => {
+    const statusInfo = map[value] || { label: value || 'Unknown', color: 'gray' };
+    const { label, color } = statusInfo;
+
+    return (
+      <span
+        className={`px-2 py-1 text-xs font-semibold rounded-full bg-${color}-100 text-${color}-600`}
+      >
+        {label}
+      </span>
+    );
+  };
+
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
@@ -217,40 +236,82 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
+
       {
-        accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
+        accessorFn: (row) => row.status,
         id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: false,
         enableHiding: false,
-        meta: { headerClassName: 'w-[150px]' }
+        cell: ({ row }) => {
+          const status = row.original.status;
+          const label = status === 'Y' ? 'Active' : 'Inactive';
+          const color = status === 'Y' ? 'green' : 'red';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full bg-${color}-100 text-${color}-600`}
+            >
+              {label}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
       },
       {
-        accessorFn: (row: { status_kind: string }) => {
+        accessorFn: (row) => row.status_kind,
-          const mapping: Record<string, string> = {
-            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} />,
         enableSorting: false,
         enableHiding: false,
-        meta: { headerClassName: 'w-[250px]' }
+        cell: ({ row }) => {
+          const kind = row.original.status_kind;
+
+          const mapping: Record<string, { label: string; className: string }> = {
+            R: { label: 'Return', className: 'bg-blue-100 text-blue-600' },
+            T: { label: 'Transfer', className: 'bg-indigo-100 text-indigo-600' },
+            P: { label: 'Purchase', className: 'bg-green-100 text-green-600' },
+            W: { label: 'Withdraw', className: 'bg-fuchsia-100 text-fuchsia-600' },
+            U: { label: 'Top Up', className: 'bg-yellow-100 text-yellow-600' },
+            N: { label: 'Top Up Patner', className: 'bg-purple-100 text-purple-600' }
+          };
+
+          const kindInfo = mapping[kind] || {
+            label: 'Unknown',
+            className: 'bg-gray-100 text-gray-600'
+          };
+
+          return (
+            <span className={`px-2 py-1 text-xs font-semibold rounded-full ${kindInfo.className}`}>
+              {kindInfo.label}
+            </span>
+          );
+        },
+        meta: { headerClassName: 'w-[250px]', cellClassName: 'text-center' }
       },
       {
-        accessorFn: (row) => (row.status_approval === 'Y' ? 'Yes' : 'No'),
+        accessorFn: (row) => row.status_approval,
         id: 'status_approval',
         header: ({ column }) => <DataGridColumnHeader title="Approval Status" column={column} />,
         enableSorting: false,
         enableHiding: false,
-        meta: { headerClassName: 'w-[150px]' }
+        cell: ({ row }) => {
+          const approval = row.original.status_approval;
+          const label = approval === 'Y' ? 'Yes' : 'No';
+          const color = approval === 'Y' ? 'green' : 'red';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full bg-${color}-100 text-${color}-600`}
+            >
+              {label}
+            </span>
+          );
+        },
+        meta: { headerClassName: 'w-[150px]', cellClassName: 'text-center' }
       },
       {
         id: 'actions',