This commit is contained in:
unknown
2025-04-15 14:38:34 +07:00
8 changed files with 119 additions and 33 deletions

View File

@ -61,7 +61,6 @@ const DetailTransaction = () => {
useEffect(() => {
const fetchTransactionDetails = async () => {
console.log(selectedTransactionId)
if (selectedTransactionId) {
try {
const response = await GetData(`${API_URL}/transaction/history/${selectedTransactionId}`, {

View File

@ -54,10 +54,6 @@ const TransactionLogViewer = () => {
detailLogData
} = useTransactionContext();
console.log('detailLogData: ', detailLogData)
return (
<Dialog open={showDetailLogDialog} onOpenChange={setShowDetailLogDialog}>
<DialogContent className="container-fixed max-w-[1280px] w-full h-[90vh] flex flex-col p-6 overflow-hidden">

View File

@ -13,7 +13,7 @@ import axios from 'axios';
const API_URL = apiConfig.service_customer;
const DetailDialog = () => {
const { showDetailDialog, setShowDetailDialog, detailKyc } = useManageKycDeletionContext();
const { showDetailDialog, setShowDetailDialog, detailKyc, handleApproveReject } = useManageKycDeletionContext();
return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@ -38,8 +38,8 @@ const DetailDialog = () => {
<div className="flex justify-end gap-2 mt-3">
<Button type="button" variant="outline" onClick={() => setShowDetailDialog(false)}>Cancel</Button>
<Button onClick={()=>{}} variant="destructive" color="warning">Reject</Button>
<Button onClick={()=>{}} variant="default" color="primary">Approve</Button>
<Button onClick={()=>handleApproveReject(detailKyc.id, 'N')} variant="destructive" color="warning">Reject</Button>
<Button onClick={()=>handleApproveReject(detailKyc.id, 'Y')} variant="default" color="primary">Approve</Button>
</div>
</div>
) : (<div></div>)}

View File

@ -1,5 +1,6 @@
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner';
import { toast } from 'sonner';
import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table';
import { createContext, useCallback, useMemo, useState } from 'react';
@ -36,6 +37,7 @@ interface ContextProps {
selectedIdCustomer: string | null;
detailKyc: any | null;
setDetailKyc: React.Dispatch<React.SetStateAction<any>>;
handleApproveReject: (customerDeletionId: string, status_approve: string) => {};
}
const initialProps: ContextProps = {
@ -48,6 +50,7 @@ const initialProps: ContextProps = {
setShowDetailDialog: () => { },
detailKyc: async () => {},
setDetailKyc: () => { },
handleApproveReject: () => ({customerDeletionId: '0', status_approve: 'Y'}),
};
const ManageKycDeletionContext = createContext<ContextProps>(initialProps);
@ -83,13 +86,15 @@ export const renderStatusBadge = (statusRaw: string | null | undefined) => {
);
};
// const { reload } = useDataGrid();
const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactNode }) => {
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [showAddDialog, setShowAddDialog] = useState(false);
const [selectedIdCustomer, setSelectedIdCustomer] = useState<string | null>(null);
const [detailKyc, setDetailKyc] = useState<any>();
const [manageKyc, setManageKyc] = useState<ManageKycDeletionProps[]>([]);
const { GetData } = useCallApi();
const { GetData, PostData } = useCallApi();
const getKycDeletionList = async (page: number, limit: number, sorting: any, filter: any) => {
try {
@ -130,12 +135,11 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
};
const handleDetailDialog = useCallback(async (show: boolean, selected_id_customer: string | null) => {
setSelectedIdCustomer(show ? selected_id_customer : null);
let detailCustomer = await GetData(`${API_URL}/customer_deletion/detail/${selected_id_customer}`, {})
setDetailKyc(detailCustomer?.data)
console.log('detailCustomer: ',detailCustomer)
console.log('detailCustomer2: ',detailCustomer?.data)
console.log('detailKyc: ', detailKyc)
if (show == true) {
setSelectedIdCustomer(show ? selected_id_customer : null);
let detailCustomer = await GetData(`${API_URL}/customer_deletion/detail/${selected_id_customer}`, {})
setDetailKyc(detailCustomer?.data)
}
setShowDetailDialog(show);
}, []);
@ -143,6 +147,26 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
setShowAddDialog(show);
}, []);
const handleApproveReject = useCallback(async (customerDeletionId: string, status_approve: string) => {
console.log(customerDeletionId, status_approve)
try {
let approveReject = await PostData(`${API_URL}/customer_deletion/update_status/${customerDeletionId}`, {
status_approve
})
if (approveReject?.status == true) {
toast.success('Success update status approval')
handleDetailDialog(false, null)
} else {
toast.warning(`${approveReject?.message}`)
handleDetailDialog(false, null)
}
} catch (error) {
toast.warning('Failed to approve/reject')
handleDetailDialog(false, null)
}
}, [])
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
@ -242,7 +266,8 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
selectedIdCustomer,
setShowDetailDialog,
setDetailKyc,
detailKyc
detailKyc,
handleApproveReject,
}}
>
<Toaster expand visibleToasts={9} duration={3000} />

View File

@ -30,7 +30,7 @@ const DetailApprovalTransaction = () => {
const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
id: selectedTransactionId
});
// console.log(response?.data);
console.log(response?.data);
setTransactionDetails(response?.data);
} catch (error) {
console.error('Error fetching transaction', error);
@ -190,7 +190,7 @@ const DetailApprovalTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.type.name}</p>
<p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
</div>
</div>
@ -346,9 +346,11 @@ const DetailApprovalTransaction = () => {
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.description}</p>
</div>
<div>
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.type.name}</p>
<p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
</div>
</div>
<div>
<p className="text-sm text-gray-500">Reference</p>

View File

@ -189,7 +189,7 @@ const DetailTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.type.name}</p>
<p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
</div>
</div>
@ -347,7 +347,7 @@ const DetailTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.type.name}</p>
<p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
</div>
<div>
<p className="text-sm text-gray-500">Reference</p>

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">

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>