fixing transactionfee

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

@@ -7,7 +7,8 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
-
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
 import {
   Dialog,
   DialogBody,
@@ -59,6 +60,7 @@ const EditFeeDialog = () => {
   const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
   const parsedUser = getAuth()?.user;
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -94,24 +96,22 @@ const EditFeeDialog = () => {
     const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
 
     if (showEditFeeDialog) {
-      setFormField({
+      setFormField(prevState => ({
-        ...formField,
+        ...prevState,
         updated_by: parsedUser?.username,
         updated_at: formattedTime
-      });
+      }));
     }
   }, [showEditFeeDialog]);
 
   const resetForm = () => {
     if (selectedTransferFee) {
-      // Re-fetch the current data to reset the form to original values
       fetchTransactionFee(selectedTransferFee);
     } else {
       setFormField(initialState);
     }
   };
 
-  /* actions */
   const doUpdateTransferFee = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -257,15 +257,10 @@ const EditFeeDialog = () => {
 
   const fetchTransactionFee = useCallback(async (id: string) => {
     try {
-      const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, { id });
+      const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, { });
   
       if (response?.status) {
-        let creditTo = '';
+
-        if (response.data.credit_destination?.id === '00000000-0000-0000-0000-000000000000') {
-          creditTo = 'D';
-        } else {
-          creditTo = 'I';
-        }
   
         setFormField({
           ...initialState,
@@ -282,23 +277,21 @@ const EditFeeDialog = () => {
           priority: response.data.priority || '',
           status: response.data.status || '',
           status_include: response.data.status_include || '',
-          deduct_from: 'S',
+          deduct_from: response.data.deduct_from||'',
           deduct_from_account: response.data.deduct_from_account?.id || '',
-          credit_to: creditTo,
+          credit_to: response.data.credit_to || '',
           credit_destination: response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
           credit_destination_account: response.data.credit_destination_account?.id || '',
           updated_by: parsedUser?.username,
           updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
         });
       }
-      console.log(response)
     } catch (error) {
       console.error('Error fetching transaction fee details', error);
       setAlert({ show: true, message: 'Failed to fetch transaction fee details' });
     }
-  }, [GetData, parsedUser?.username]); // only use username if that's all you need
+  }, [GetData, parsedUser?.username]);
   
-  // This flag ensures it only fetches once per open
   const hasFetchedRef = useRef(false);
   
   useEffect(() => {
@@ -307,15 +300,23 @@ const EditFeeDialog = () => {
       hasFetchedRef.current = true;
     }
   
-    // Reset fetch flag if dialog is closed
     if (!showEditFeeDialog) {
       hasFetchedRef.current = false;
     }
   }, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
   
+  const handleCloseDialog = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+    handleEditFeeDialog(false, null);
+  };
 
   return (
-    <Dialog open={showEditFeeDialog} onOpenChange={(open) => handleEditFeeDialog(open, null)}>
+    <Dialog open={showEditFeeDialog} onOpenChange={(open) => {
+      if (!open) {
+        handleCloseDialog();
+      }
+    }}>
       <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogTitle></DialogTitle>
         <DialogDescription></DialogDescription>
@@ -328,7 +329,7 @@ const EditFeeDialog = () => {
             </div>
             <div
               className="cursor-pointer hover:opacity-100 opacity-50"
-              onClick={() => handleEditFeeDialog(false, null)}
+              onClick={handleCloseDialog}
             >
               <KeenIcon icon="cross" className="text-1.5xl" />
             </div>
@@ -654,13 +655,6 @@ const EditFeeDialog = () => {
                 </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>

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

@@ -181,7 +181,30 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
         meta: { headerClassName: 'w-[250px]' }
       },
       {
-        accessorFn: (row) => row.credit_destination?.fullname,
+        accessorFn: (row: { credit_to: string }) => {
+          const mapping: Record<string, string> = {
+            D: 'Destination Member',
+            S: 'Source Member',
+            I: 'Input Customer'
+          };
+      
+          return mapping[row.credit_to] || 'Unknown';
+        },
+        id: 'credit_to',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Credit To" column={column} />
+        ),
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },      
+      {
+        accessorFn: (row) => {
+          if (row.credit_to === 'S' || row.credit_to === 'D' || !row.credit_destination) {
+            return 'N/A';
+          }
+          return row.credit_destination?.fullname;
+        },
         id: 'credit_destination',
         header: ({ column }) => <DataGridColumnHeader title="Credit Destination" column={column} />,
         enableSorting: true,
@@ -196,37 +219,102 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
+      {
+        accessorFn: (row: { deduct_from: string }) => {
+          const mapping: Record<string, string> = {
+            D: 'Destination Member',
+            S: 'Source Member',
+          };
+      
+          return mapping[row.deduct_from];
+        },
+        id: 'deduct_from',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Deduct From" column={column} />
+        ),
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },   
       {
         accessorFn: (row) => row.deduct_from_account?.description,
         id: 'deduct_from_account',
-        header: ({ column }) => <DataGridColumnHeader title="Credit Destination Account" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Deduct From Account" column={column} />,
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
+       {
+         accessorFn: (row) => row.priority,
+         id: 'priority',
+         header: ({ column }) => <DataGridColumnHeader title="Priority" column={column} />,
+         enableSorting: true,
+         enableHiding: false,
+         cell: ({ row }) => {
+           const isActive = row.original.priority === 'Y';
+ 
+           return (
+             <span
+               className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                 isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+               }`}
+             >
+               {isActive ? 'Yes' : 'No'}
+             </span>
+           );
+         },
+         meta: {
+           headerClassName: 'w-[100px]',
+           cellClassName: 'text-center'
+         }
+       },
       {
-        accessorFn: (row) => (row.priority === 'Y' ? 'Yes' : 'No'),
+        accessorFn: (row) => row.status,
-        id: 'priority',
-        header: ({ column }) => <DataGridColumnHeader title="Priority" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: { headerClassName: 'w-[100px]' }
-      },
-      {
-        accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
         id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: true,
         enableHiding: false,
-        meta: { headerClassName: 'w-[150px]' }
+        cell: ({ row }) => {
+          const isActive = row.original.status === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Active' : 'Inactive'}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
       },
       {
-        accessorFn: (row) => (row.status_include === 'Y' ? 'Yes' : 'No'),
+        accessorFn: (row) => row.status_include,
         id: 'status_include',
         header: ({ column }) => <DataGridColumnHeader title="Status Include" column={column} />,
         enableSorting: true,
         enableHiding: false,
-        meta: { headerClassName: 'w-[150px]' }
+        cell: ({ row }) => {
+          const isActive = row.original.status_include === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Yes' : 'No'}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
       },
       {
         id: 'actions',

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

@@ -701,15 +701,6 @@ const EditDialog = () => {
                 </div>
                 
                 <div className="flex justify-end pt-2.5 gap-5">
-                  <Button
-                    variant={'outline'}
-                    type="reset"
-                    onClick={() => {
-                      resetForm();
-                    }}
-                  >
-                    Reset
-                  </Button>
                   <Button variant={'default'} type="submit" disabled={isSubmitting}>
                     {isSubmitting ? 'Saving...' : 'Save Changes'}
                   </Button>
@@ -724,7 +715,7 @@ const EditDialog = () => {
                 </div>
                 <AddFeeDialog />
                           <DeleteFeeDialog />
-                          {/* <EditFeeDialog /> */}
+                          <EditFeeDialog />
               </Container>
             </ManageTransferFeeContextProvider>
           </div>