From ec5cc4ea37c64c824333ebf8c3ce86c0ac533067 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 19 May 2025 13:36:10 +0700
Subject: [PATCH] adding deduct origin on transfer fee

---
 .../transfer/transferfee/blocks/AddDialog.tsx |  98 +++++++++++++++-
 .../transferfee/blocks/EditDialog.tsx         | 109 +++++++++++++++++-
 .../hooks/ManageTransferFeeContext.tsx        |  28 ++++-
 3 files changed, 222 insertions(+), 13 deletions(-)

diff --git a/src/pages/transfer/transferfee/blocks/AddDialog.tsx b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
index ff0ff5a..f6a736e 100644
--- a/src/pages/transfer/transferfee/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
@@ -106,6 +106,7 @@ const AddFeeDialog = () => {
     created_by: '',
     created_at: '',
     deduct_from: '',
+    deduct_origin: '00000000-0000-0000-0000-000000000000',
     deduct_from_account: '',
     credit_to: '',
     credit_destination: '00000000-0000-0000-0000-000000000000',
@@ -296,6 +297,14 @@ const AddFeeDialog = () => {
         return;
       }
 
+      if (formField.deduct_from === 'I' && !formField.deduct_origin) {
+        setAlert({
+          show: true,
+          message: 'Deduct Origin is required when Input is selected'
+        });
+        setIsSubmitting(false);
+        return;
+      }
       setAlert({ show: false, message: '' });
 
       const payload = { ...formField };
@@ -304,6 +313,9 @@ const AddFeeDialog = () => {
         payload.credit_destination = '00000000-0000-0000-0000-000000000000';
       }
 
+      if (formField.deduct_from !== 'I') {
+        payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
+      }
       try {
         const response = await PostData(`${API_URL}/transactionfees/create`, payload);
 
@@ -557,7 +569,13 @@ const AddFeeDialog = () => {
                   </label>
                   <Select
                     value={formField.deduct_from}
-                    onValueChange={(value) => setFormField({ ...formField, deduct_from: value })}
+                    onValueChange={(value) =>
+                      setFormField({
+                        ...formField,
+                        deduct_from: value,
+                        deduct_origin: value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
+                      })
+                    }
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select Deduct From" />
@@ -565,12 +583,86 @@ const AddFeeDialog = () => {
                     <SelectContent>
                       <SelectItem value="D">Destination Member</SelectItem>
                       <SelectItem value="S">Source Member</SelectItem>
+                      <SelectItem value="I">Input</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
+                {formField.deduct_from === 'I' && (
+                  <div className="w-full">
+                    <label className="form-label">
+                      Deduct Origin <span className="text-red-500">*</span>
+                    </label>
+                    <div className="relative">
+                      <div
+                        className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+                        onClick={() => setOpen(!open)}
+                      >
+                        <span className="truncate">
+                          {customers.find((customer) => customer.id === formField.deduct_origin)
+                            ?.username || 'Search customer...'}
+                        </span>
+                        <path d="m6 9 6 6 6-6"></path>
+                      </div>
+
+                      {open && (
+                        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+                          <div className="sticky top-0 bg-white p-2 border-b">
+                            <Input
+                              className="h-8 text-sm"
+                              type="text"
+                              placeholder="Search customer..."
+                              value={customerSearchTerm}
+                              onChange={(e) => setCustomerSearchTerm(e.target.value)}
+                              autoComplete="off"
+                              onClick={(e) => e.stopPropagation()}
+                              autoFocus
+                            />
+                          </div>
+                          <div>
+                            {customers
+                              .filter(
+                                (customer) =>
+                                  customer.username
+                                    .toLowerCase()
+                                    .includes(customerSearchTerm.toLowerCase()) ||
+                                  customer.msisdn.includes(customerSearchTerm)
+                              )
+                              .map((customer) => (
+                                <div
+                                  key={customer.id}
+                                  className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                                  onClick={() => {
+                                    setFormField({
+                                      ...formField,
+                                      deduct_origin: customer.id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {customer.username}
+                                </div>
+                              ))}
+                            {customers.filter(
+                              (customer) =>
+                                customer.username
+                                  .toLowerCase()
+                                  .includes(customerSearchTerm.toLowerCase()) ||
+                                customer.msisdn.includes(customerSearchTerm)
+                            ).length === 0 && (
+                              <div className="px-3 py-2 text-sm text-gray-500">
+                                No customer found
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+
                 <div className="w-full">
                   <label className="form-label">
-                    Deduct From Destination <span className="text-red-500">*</span>
+                    Deduct From Account <span className="text-red-500">*</span>
                   </label>
                   {renderSelectWithLoading(
                     formField.deduct_from_account,
@@ -580,6 +672,7 @@ const AddFeeDialog = () => {
                     isLoadingWallets
                   )}
                 </div>
+
                 <div className="w-full">
                   <label className="form-label">
                     Credit To <span className="text-red-500">*</span>
@@ -678,6 +771,7 @@ const AddFeeDialog = () => {
                     </div>
                   </div>
                 )}
+
                 <div className="w-full">
                   <label className="form-label">
                     Credit Destination Account <span className="text-red-500">*</span>
diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
index bc1f1cc..1999404 100644
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -1,3 +1,4 @@
+
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import {
@@ -99,6 +100,7 @@ const EditFeeDialog = () => {
     updated_by: '',
     updated_at: '',
     deduct_from: '',
+    deduct_origin: '00000000-0000-0000-0000-000000000000',
     deduct_from_account: '',
     credit_to: '',
     credit_destination: '00000000-0000-0000-0000-000000000000',
@@ -167,6 +169,15 @@ const EditFeeDialog = () => {
         return;
       }
 
+      if (formField.deduct_from === 'I' && !formField.deduct_origin) {
+        setAlert({
+          show: true,
+          message: 'Deduct Origin is required when Input is selected'
+        });
+        setIsSubmitting(false);
+        return;
+      }
+
       setAlert({ show: false, message: '' });
 
       const payload = { ...formField };
@@ -175,6 +186,11 @@ const EditFeeDialog = () => {
         payload.credit_destination = '00000000-0000-0000-0000-000000000000';
       }
 
+      if (formField.deduct_from !== 'I') {
+        payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
+      }
+
+      // console.log(payload);
       try {
         const response = await PutData(
           `${API_URL}/transactionfees/update/${selectedTransferFee}`,
@@ -293,7 +309,7 @@ const EditFeeDialog = () => {
       setIsLoadingTransferFee(true);
       try {
         const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, {});
-
+        // console.log(response);
         if (response?.status) {
           setFormField({
             ...initialState,
@@ -310,6 +326,7 @@ const EditFeeDialog = () => {
             status_include: response.data.status_include || '',
             deduct_from: response.data.deduct_from || '',
             deduct_from_account: response.data.deduct_from_account?.id || '',
+            deduct_origin: response.data.deduct_origin?.id || '00000000-0000-0000-0000-000000000000',
             credit_to: response.data.credit_to || '',
             credit_destination:
               response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
@@ -344,6 +361,7 @@ const EditFeeDialog = () => {
       hasFetchedRef.current = false;
     }
   }, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
+  
   const handleCloseDialog = () => {
     setFormField(initialState);
     setAlert({ show: false, message: '' });
@@ -351,12 +369,14 @@ const EditFeeDialog = () => {
     setOpen(false);
     handleEditFeeDialog(false, null);
   };
+  
   useEffect(() => {
     if (!showEditFeeDialog) {
       setCustomerSearchTerm('');
       setOpen(false);
     }
   }, [showEditFeeDialog]);
+  
   const renderSelectWithLoading = (
     value: string,
     onChangeHandler: (value: string) => void,
@@ -606,7 +626,13 @@ const EditFeeDialog = () => {
                     </label>
                     <Select
                       value={formField.deduct_from}
-                      onValueChange={(value) => setFormField({ ...formField, deduct_from: value })}
+                      onValueChange={(value) =>
+                        setFormField({
+                          ...formField,
+                          deduct_from: value,
+                          deduct_origin: value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
+                        })
+                      }
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select Deduct From" />
@@ -614,13 +640,87 @@ const EditFeeDialog = () => {
                       <SelectContent>
                         <SelectItem value="D">Destination Member</SelectItem>
                         <SelectItem value="S">Source Member</SelectItem>
+                        <SelectItem value="I">Input</SelectItem>
                       </SelectContent>
                     </Select>
                   </div>
 
+                  {formField.deduct_from === 'I' && (
+                    <div className="w-full">
+                      <label className="form-label">
+                        Deduct Origin <span className="text-red-500">*</span>
+                      </label>
+                      <div className="relative">
+                        <div
+                          className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+                          onClick={() => setOpen(!open)}
+                        >
+                          <span className="truncate">
+                            {customers.find((customer) => customer.id === formField.deduct_origin)
+                              ?.username || 'Search customer...'}
+                          </span>
+                          <path d="m6 9 6 6 6-6"></path>
+                        </div>
+
+                        {open && (
+                          <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+                            <div className="sticky top-0 bg-white p-2 border-b">
+                              <Input
+                                className="h-8 text-sm"
+                                type="text"
+                                placeholder="Search customer..."
+                                value={customerSearchTerm}
+                                onChange={(e) => setCustomerSearchTerm(e.target.value)}
+                                autoComplete="off"
+                                onClick={(e) => e.stopPropagation()}
+                                autoFocus
+                              />
+                            </div>
+                            <div>
+                              {customers
+                                .filter(
+                                  (customer) =>
+                                    customer.username
+                                      .toLowerCase()
+                                      .includes(customerSearchTerm.toLowerCase()) ||
+                                    customer.msisdn.includes(customerSearchTerm)
+                                )
+                                .map((customer) => (
+                                  <div
+                                    key={customer.id}
+                                    className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                                    onClick={() => {
+                                      setFormField({
+                                        ...formField,
+                                        deduct_origin: customer.id
+                                      });
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {customer.username}
+                                  </div>
+                                ))}
+                              {customers.filter(
+                                (customer) =>
+                                  customer.username
+                                    .toLowerCase()
+                                    .includes(customerSearchTerm.toLowerCase()) ||
+                                  customer.msisdn.includes(customerSearchTerm)
+                              ).length === 0 && (
+                                <div className="px-3 py-2 text-sm text-gray-500">
+                                  No customer found
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
                   <div className="w-full">
                     <label className="form-label">
-                      Deduct From Destination <span className="text-red-500">*</span>
+                      Deduct From Account <span className="text-red-500">*</span>
                     </label>
                     {renderSelectWithLoading(
                       formField.deduct_from_account,
@@ -630,7 +730,6 @@ const EditFeeDialog = () => {
                       isLoadingWallets
                     )}
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">
                       Credit To <span className="text-red-500">*</span>
@@ -782,8 +881,6 @@ const EditFeeDialog = () => {
                     </Select>
                   </div>
 
-
-
                   <div className="flex justify-end pt-2.5 gap-5">
                     <Button variant={'outline'} type="button" onClick={resetForm}>
                       Reset
diff --git a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
index 1eee029..67e36c9 100644
--- a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
+++ b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
@@ -227,10 +227,11 @@ const ManageTransferFeeContextProvider = ({
         accessorFn: (row: { deduct_from: string }) => {
           const mapping: Record<string, string> = {
             D: 'Destination Member',
-            S: 'Source Member'
+            S: 'Source Member',
+            I: 'Input Customer'
           };
 
-          return mapping[row.deduct_from];
+          return mapping[row.deduct_from] || 'Unknown';
         },
         id: 'deduct_from',
         header: ({ column }) => <DataGridColumnHeader title="Deduct From" column={column} />,
@@ -239,16 +240,33 @@ const ManageTransferFeeContextProvider = ({
         meta: { headerClassName: 'w-[250px]' }
       },
       {
-        accessorFn: (row) => row.deduct_from_account?.description,
+        accessorFn: (row) => {
+          if (row.deduct_from === 'S' || row.deduct_from === 'D' || !row.deduct_from_account) {
+            return 'N/A';
+          }
+          return row.deduct_from_account.description;
+        },
         id: 'deduct_from_account',
         header: ({ column }) => (
-          <DataGridColumnHeader title="Deduct From Account" column={column} />
+          <DataGridColumnHeader title="Deduct From Destination" column={column} />
         ),
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
-
+      {
+        accessorFn: (row) => {
+          if (row.deduct_from === 'S' || row.deduct_from === 'D' || !row.deduct_origin) {
+            return 'N/A';
+          }
+          return row.deduct_origin?.fullname;
+        },
+        id: 'deduct_origin',
+        header: ({ column }) => <DataGridColumnHeader title="Deduct Origin" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
       {
         accessorFn: (row) => row.status,
         id: 'status',