TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added search on credit_destination field in transaction fee add +edit

Browse Source
This commit is contained in:
bagusajisaputroo
2025-04-15 10:44:43 +07:00
parent 8bf1c16b6c
commit 172e8a0815
2 changed files with 76 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/pages/transfer/transferfee/blocks/AddDialog.tsx
View File

@ -70,6 +70,8 @@ const AddFeeDialog = () => {
selectedTransferFee,
transactionTypeId
} = useManageTransferFeeContext();
const [customerSearchTerm, setCustomerSearchTerm] = useState('');
const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({
show: false,
@ -111,6 +113,7 @@ const AddFeeDialog = () => {
credit_destination_account: ''
};
const [formField, setFormField] = useState(initialState);
const resetForm = () => {
@ -151,6 +154,13 @@ const AddFeeDialog = () => {
}
}, [showAddFeeDialog, transactionTypeId, GetData]);
useEffect(() => {
if (!showAddFeeDialog) {
setCustomerSearchTerm('');
setOpen(false);
}
}, [showAddFeeDialog]);
useEffect(() => {
const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@ -619,13 +629,72 @@ const AddFeeDialog = () => {
<label className="form-label">
Credit Destination <span className="text-red-500">*</span>
</label>
{renderSelectWithLoading(
formField.credit_destination,
(value) => setFormField({ ...formField, credit_destination: value }),
customersWithNames,
'Select Customer',
isLoadingCustomers
)}
<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.credit_destination
)?.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,
credit_destination: 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">

5
src/pages/transfer/transferfee/blocks/EditDialog.tsx
View File

@ -72,7 +72,6 @@ const EditFeeDialog = () => {
message: ''
});
// Loading states
const [isLoadingTransferFee, setIsLoadingTransferFee] = useState(false);
const [isLoadingTransactionType, setIsLoadingTransactionType] = useState(false);
const [isLoadingWallets, setIsLoadingWallets] = useState(false);
@ -687,9 +686,7 @@ const EditFeeDialog = () => {
<span className="truncate">
{customers.find(customer => customer.id === formField.credit_destination)?.username || 'Search customer...'}
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4 opacity-50">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
{open && (
@ -702,9 +699,7 @@ const EditFeeDialog = () => {
value={customerSearchTerm}
onChange={(e) => setCustomerSearchTerm(e.target.value)}
autoComplete="off"
// Prevent clicks from closing the dropdown
onClick={(e) => e.stopPropagation()}
// Auto focus the input when opened
autoFocus
/>
</div>