From 9808b88eec49bdea6b9068adb25140deb968e550 Mon Sep 17 00:00:00 2001 From: Narul Hidayah Date: Mon, 14 Apr 2025 20:43:42 +0700 Subject: [PATCH] fixing manage account, kyc delete member --- .../account/manage-account/ManageAccount.tsx | 1 + .../blocks/DetailTransaction.tsx | 28 +- .../blocks/DetailTransactionLog.tsx | 4 +- .../hooks/TransactionContext.tsx | 13 +- .../kyc-delete-member/ManageKycDeletion.tsx | 37 +++ .../kyc-delete-member/blocks/ListToolbar.tsx | 61 +++++ .../hooks/ManageKycDeletionContext.tsx | 252 ++++++++++++++++++ .../members/kyc-delete-member/hooks/index.tsx | 2 + .../hooks/useManageKycDeletionContext.tsx | 12 + src/routing/AppRoutingSetup.tsx | 2 + 10 files changed, 385 insertions(+), 27 deletions(-) create mode 100644 src/pages/members/kyc-delete-member/ManageKycDeletion.tsx create mode 100644 src/pages/members/kyc-delete-member/blocks/ListToolbar.tsx create mode 100644 src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx create mode 100644 src/pages/members/kyc-delete-member/hooks/index.tsx create mode 100644 src/pages/members/kyc-delete-member/hooks/useManageKycDeletionContext.tsx diff --git a/src/pages/account/manage-account/ManageAccount.tsx b/src/pages/account/manage-account/ManageAccount.tsx index f116edd..2b6b33b 100644 --- a/src/pages/account/manage-account/ManageAccount.tsx +++ b/src/pages/account/manage-account/ManageAccount.tsx @@ -93,6 +93,7 @@ const ManageAccount = () => { {}} onUpdate={() => console.log('Callback update')} onDelete={() => console.log('Callback delete')} /> diff --git a/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx b/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx index dfa33ec..c3ded68 100644 --- a/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx +++ b/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx @@ -33,19 +33,19 @@ const statusMap: Record = { }; export const renderStatusBadge = (statusRaw: string | null | undefined) => { - const status = statusRaw as StatusCode; - const { label, bg, text } = statusMap[status] ?? { - label: 'Unknown', - bg: 'bg-gray-100', - text: 'text-gray-600', - }; - - return ( - - {label} - - ); - }; + const status = statusRaw as StatusCode; + const { label, bg, text } = statusMap[status] ?? { + label: 'Unknown', + bg: 'bg-gray-100', + text: 'text-gray-600', + }; + + return ( + + {label} + + ); +}; const DetailTransaction = () => { const { GetData } = useCallApi(); @@ -114,7 +114,7 @@ const DetailTransaction = () => { {log.customer.fullname ?? '-'} {log.amount ?? '-'} {renderStatusBadge(log.status) ?? '-'} - {log.request_date && moment(log.request_date).isValid() ? moment(log.request_date).format('YYYY-MM-DD HH:mm:ss') : '-'} + {log.request_date && moment(log.request_date).isValid() ? moment(log.request_date).format('DD/MM/YYYY HH:mm:ss') : '-'} {log.reference ?? '-'}
diff --git a/src/pages/disbursement/history-transaction/blocks/DetailTransactionLog.tsx b/src/pages/disbursement/history-transaction/blocks/DetailTransactionLog.tsx index 7b26b05..b2a668f 100644 --- a/src/pages/disbursement/history-transaction/blocks/DetailTransactionLog.tsx +++ b/src/pages/disbursement/history-transaction/blocks/DetailTransactionLog.tsx @@ -106,11 +106,11 @@ const TransactionLogViewer = () => { Prosess Date - {detailLogData.request_date && moment(detailLogData.request_date).isValid() ? moment(detailLogData.request_date).format('YYYY-MM-DD HH:mm:ss') : '-'} + {detailLogData.request_date && moment(detailLogData.request_date).isValid() ? moment(detailLogData.request_date).format('DD/MM/YYYY HH:mm:ss') : '-'} Response Date - {detailLogData.response_date && moment(detailLogData.response_date).isValid() ? moment(detailLogData.response_date).format('YYYY-MM-DD HH:mm:ss') : '-'} + {detailLogData.response_date && moment(detailLogData.response_date).isValid() ? moment(detailLogData.response_date).format('DD/MM/YYYY HH:mm:ss') : '-'} Reference Number diff --git a/src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx b/src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx index b1807a1..8c4862b 100644 --- a/src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx +++ b/src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx @@ -93,15 +93,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { const columns = useMemo[]>( () => [ - // { - // accessorKey: 'transaction_date', - // header: ({ column }) => , - // enableSorting: false, - // enableHiding: false, - // meta: { - // headerClassName: 'w-[250px]' - // } - // }, { accessorKey: 'file_name', header: ({ column }) => , @@ -192,7 +183,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { header: ({ column }) => , enableSorting: true, enableHiding: false, - cell: ({ row }) => moment(row.original.execution_date).format('YYYY-MM-DD HH:mm:ss') + cell: ({ row }) => moment(row.original.execution_date).format('DD/MM/YYYY HH:mm:ss') }, { accessorFn: (row) => row.done_date, @@ -200,7 +191,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { header: ({ column }) => , enableSorting: true, enableHiding: false, - cell: ({ row }) => row.original.done_date ? moment(row.original.done_date).format('YYYY-MM-DD HH:mm:ss') : '' + cell: ({ row }) => row.original.done_date ? moment(row.original.done_date).format('DD/MM/YYYY HH:mm:ss') : '' }, { id: 'actions', diff --git a/src/pages/members/kyc-delete-member/ManageKycDeletion.tsx b/src/pages/members/kyc-delete-member/ManageKycDeletion.tsx new file mode 100644 index 0000000..0d5962e --- /dev/null +++ b/src/pages/members/kyc-delete-member/ManageKycDeletion.tsx @@ -0,0 +1,37 @@ +import { Container, DataGridInner } from '@/components'; +import { ManageKycDeletionContextProvider } from './hooks/ManageKycDeletionContext'; +import { Breadcrumbs, Link } from '@mui/material'; +import { Helmet } from 'react-helmet'; + +const ManageKycDeletion = () => { + return ( + <> + + TPAY | List Deletion + + + +

MANAGE KYC DELETION

+ + + Dashboard + + + + Member + + + + History Disbursement + + +
+ +
+ + + + ); +}; + +export default ManageKycDeletion; diff --git a/src/pages/members/kyc-delete-member/blocks/ListToolbar.tsx b/src/pages/members/kyc-delete-member/blocks/ListToolbar.tsx new file mode 100644 index 0000000..013a15c --- /dev/null +++ b/src/pages/members/kyc-delete-member/blocks/ListToolbar.tsx @@ -0,0 +1,61 @@ +import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; +import { Button } from '@/components/ui/button'; +import { useCallback, useState, useEffect } from 'react'; +import { toast } from 'sonner'; + +const ListToolbar = () => { + const { table, reload } = useDataGrid(); + + // Set the initial state for trxDate + const [trxDate, settrxDate] = useState({ from: '', to: '' }); + + // Function to format date to YYYY-MM-DD + const formatDate = (date: Date): string => { + return date.toISOString().split('T')[0]; + }; + + // useEffect to set the default date values + useEffect(() => { + const today = new Date(); + const nextWeek = new Date(today); + nextWeek.setDate(today.getDate() + 7); + + settrxDate({ + from: formatDate(today), // Set 'from' to today + to: formatDate(nextWeek), // Set 'to' to 7 days later + }); + }, []); + + const handleFilterData = useCallback(() => { + try { + table.getColumn('transaction_date')?.setFilterValue(trxDate); + } catch (error) { + toast.error('Error applying filter'); + console.error('Error applying filter:', error); + } + }, [trxDate, table]); + + useEffect(() => { + if (trxDate.from && trxDate.to) { + handleFilterData(); + } + }, [trxDate]); + + return ( +
+
+
+
+ + + +
+
+
+
+ ); +}; + +export default ListToolbar; diff --git a/src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx b/src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx new file mode 100644 index 0000000..5fec6e7 --- /dev/null +++ b/src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx @@ -0,0 +1,252 @@ +import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components'; +import { Toaster } from '@/components/ui/sonner'; +import { apiConfig } from '@/config/api.config'; +import { ColumnDef } from '@tanstack/react-table'; +import { createContext, useCallback, useMemo, useState } from 'react'; +import ListToolbar from '../blocks/ListToolbar'; +import { useCallApi } from '@/hooks'; +import moment from 'moment'; + +interface ManageKycDeletionProps { + id: string; + customers_id: string; + group_id: string; + username: string; + fullname: string; + email: string; + status: string; + created_at: Date; +} + +interface ContextProps { + getKycDeletionList: ( + limit: number, + page: number, + with_deleted: boolean, + order_field: any, + order_direction: any, + filter: any + ) => Promise<{ data: ManageKycDeletionProps[]; totalCount: number } | undefined>; + showDetailDialog: boolean; + handleDetailDialog: (show: boolean, selected_user: ManageKycDeletionProps | null) => void; + showAddDialog: boolean; + handleAddDialog: (show: boolean) => void; + selectedUser: ManageKycDeletionProps | null; +} + +const initialProps: ContextProps = { + getKycDeletionList: async () => ({ data: [], totalCount: 0 }), + showDetailDialog: false, + handleDetailDialog: () => {}, + showAddDialog: false, + handleAddDialog: () => {}, + selectedUser: null +}; + +const ManageKycDeletionContext = createContext(initialProps); +const API_URL = apiConfig.service_customer; + +type StatusCode = 'W' | 'Y' | 'N' | 'T'; + +interface StatusInfo { + label: string; + bg: string; + text: string; +} + +const statusMap: Record = { + W: { label: 'Waiting Approval', bg: 'bg-yellow-100', text: 'text-yellow-600' }, + T: { label: 'No Need', bg: 'bg-blue-100', text: 'text-blue-600' }, + N: { label: 'Reject', bg: 'bg-red-100', text: 'text-red-600' }, + Y: { label: 'Approve', bg: 'bg-green-100', text: 'text-green-600' }, +}; + +export const renderStatusBadge = (statusRaw: string | null | undefined) => { + const status = statusRaw as StatusCode; + const { label, bg, text } = statusMap[status] ?? { + label: 'Unknown', + bg: 'bg-gray-100', + text: 'text-gray-600', + }; + + return ( + + {label} + + ); +}; + +const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactNode }) => { + const [showDetailDialog, setShowDetailDialog] = useState(false); + const [showAddDialog, setShowAddDialog] = useState(false); + const [selectedUser, setSelectedUser] = useState(null); + const [manageKyc, setManageKyc] = useState([]); + const { GetData } = useCallApi(); + + const getKycDeletionList = async (page: number, limit: number, sorting: any, filter: any) => { + try { + let startdate; + let enddate; + let formattedFilter; + + if (filter == undefined || filter.length == 0) { + const today = new Date(); + const nextWeek = new Date(); + nextWeek.setDate(today.getDate() + 7); + + startdate = today.toISOString().split('T')[0]; + enddate = nextWeek.toISOString().split('T')[0]; + } else if (filter != undefined || filter.length != 0) { + startdate = filter[0].value.from; + enddate = filter[0].value.to; + } + + formattedFilter = { + + }; + + const response = await GetData(`${API_URL}/customer_deletion/list`, { + limit, + page: page + 1, + with_deleted: false, + order_field: "id", + order_direction: 'DESC', + filter: JSON.stringify(formattedFilter) + }); + + setManageKyc(response?.data.list); + return { data: response?.data.list, totalCount: response?.data.total_count }; + } catch (error) { + console.error('Error fetching transaction', error); + } + }; + + const handleDetailDialog = useCallback((show: boolean, selected_user: ManageKycDeletionProps | null) => { + setSelectedUser(show ? selected_user : null); + setShowDetailDialog(show); + }, []); + + const handleAddDialog = useCallback((show: boolean) => { + setShowAddDialog(show); + }, []); + + const columns = useMemo[]>( + () => [ + { + accessorFn: (row) => row.id, + id: 'id', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[100px]' + }, + }, + { + accessorFn: (row) => row.created_at, + id: 'created_at', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + }, + cell: ({ row }) => moment(row.original.created_at).format('DD/MM/YYYY HH:mm:ss') + }, + { + accessorFn: (row) => row.username, + id: 'username', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[350px]' + } + }, + { + accessorFn: (row) => row.fullname, + id: 'fullname', + header: ({ column }) => , + enableSorting: true, + meta: { + headerClassName: 'w-[350px]' + } + }, + { + accessorFn: (row) => row.registered_email, + id: 'email', + header: ({ column }) => , + enableSorting: true, + meta: { + headerClassName: 'w-[350px]' + } + }, + { + accessorFn: (row) => row.status_approve, + id: 'status_approve', + header: ({ column }) => , + enableSorting: true, + meta: { + headerClassName: 'w-[350px]' + }, + cell: ({row}) => renderStatusBadge(row.original.status_approve) + }, + { + id: 'actions', + enableSorting: false, + header: ({ column }) => , + cell: (data: any) => { + const row = data.row.original; + + return ( + <> + + + ); + }, + meta: { + headerClassName: 'w-[100px]', + cellClassName: 'text-center' + } + } + ], + [handleDetailDialog] + ); + + return ( + + + + } + layout={{ card: true }} + sorting={[{ id: 'name', desc: false }]} + serverSide={true} + onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => + getKycDeletionList(pageIndex, pageSize, sorting, columnFilters) + } + > + {children} + + + ); +}; + +export { ManageKycDeletionContextProvider, ManageKycDeletionContext }; +export type { ManageKycDeletionProps }; diff --git a/src/pages/members/kyc-delete-member/hooks/index.tsx b/src/pages/members/kyc-delete-member/hooks/index.tsx new file mode 100644 index 0000000..0d10e8a --- /dev/null +++ b/src/pages/members/kyc-delete-member/hooks/index.tsx @@ -0,0 +1,2 @@ +export * from './ManageKycDeletionContext'; +export * from './useManageKycDeletionContext'; diff --git a/src/pages/members/kyc-delete-member/hooks/useManageKycDeletionContext.tsx b/src/pages/members/kyc-delete-member/hooks/useManageKycDeletionContext.tsx new file mode 100644 index 0000000..f3a20c9 --- /dev/null +++ b/src/pages/members/kyc-delete-member/hooks/useManageKycDeletionContext.tsx @@ -0,0 +1,12 @@ +import { useContext } from 'react'; +import { ManageKycDeletionContext } from './ManageKycDeletionContext'; + +const useManageKycDeletionContext = () => { + const context = useContext(ManageKycDeletionContext); + + if (!context) throw new Error('useManageKycDeletionContext must be used within AuthProvider'); + + return context; +}; + +export { useManageKycDeletionContext }; diff --git a/src/routing/AppRoutingSetup.tsx b/src/routing/AppRoutingSetup.tsx index b7ce41f..865effb 100644 --- a/src/routing/AppRoutingSetup.tsx +++ b/src/routing/AppRoutingSetup.tsx @@ -15,6 +15,7 @@ import ManagePositionPage from '@/pages/settings/user/manage-position/ManagePosi import ManageAccount from '@/pages/account/manage-account/ManageAccount'; import ManageGroups from '@/pages/groups/ManageGroups'; import ManageMembers from '@/pages/members/manage-members/ManageMembers'; +import ManageKycDeletion from '@/pages/members/kyc-delete-member/ManageKycDeletion'; import Kyc from '@/pages/members/kyc/Kyc'; import AccessType from '@/pages/access/access-type/AccessType'; import MemberCredential from '@/pages/access/member-credentials/MemberCredentials'; @@ -79,6 +80,7 @@ const AppRoutingSetup = (): ReactElement => { } /> } /> + } /> } /> } />