adding deduct origin on transfer fee

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>