fixing transactionfee

2025-04-14 12:07:54 +07:00
parent ab7a8bab9e
commit 3bbea4bff7
3 changed files with 125 additions and 52 deletions
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/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({
-        ...formField,
+      setFormField(prevState => ({
+        ...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>
--- a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
+++ b/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'),
-        id: 'priority',
-        header: ({ column }) => <DataGridColumnHeader title="Priority" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: { headerClassName: 'w-[100px]' }
-      },
-      {
-        accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
+        accessorFn: (row) => row.status,
        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',
--- a/src/pages/transfer/transfertype/blocks/EditDialog.tsx
+++ b/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>