fixing manage account, kyc delete member
This commit is contained in:
Narul Hidayah
@ -93,6 +93,7 @@ const ManageAccount = () => {
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={dataAccount}
|
||||
createData={()=>{}}
|
||||
onUpdate={() => console.log('Callback update')}
|
||||
onDelete={() => console.log('Callback delete')}
|
||||
/>
|
||||
|
||||
@ -45,7 +45,7 @@ export const renderStatusBadge = (statusRaw: string | null | undefined) => {
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const DetailTransaction = () => {
|
||||
const { GetData } = useCallApi();
|
||||
@ -114,7 +114,7 @@ const DetailTransaction = () => {
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.customer.fullname ?? '-'}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.amount ?? '-'}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{renderStatusBadge(log.status) ?? '-'}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date && moment(log.request_date).isValid() ? moment(log.request_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date && moment(log.request_date).isValid() ? moment(log.request_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.reference ?? '-'}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
<div key={`actions-${log.id}`}>
|
||||
|
||||
@ -106,11 +106,11 @@ const TransactionLogViewer = () => {
|
||||
</tr>
|
||||
<tr className='border-t'>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">Prosess Date</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.request_date && moment(detailLogData.request_date).isValid() ? moment(detailLogData.request_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.request_date && moment(detailLogData.request_date).isValid() ? moment(detailLogData.request_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
|
||||
</tr>
|
||||
<tr className='border-t'>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">Response Date</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.response_date && moment(detailLogData.response_date).isValid() ? moment(detailLogData.response_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.response_date && moment(detailLogData.response_date).isValid() ? moment(detailLogData.response_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
|
||||
</tr>
|
||||
<tr className='border-t'>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">Reference Number</td>
|
||||
|
||||
@ -93,15 +93,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
const columns = useMemo<ColumnDef<any>[]>(
|
||||
() => [
|
||||
// {
|
||||
// accessorKey: 'transaction_date',
|
||||
// header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
|
||||
// enableSorting: false,
|
||||
// enableHiding: false,
|
||||
// meta: {
|
||||
// headerClassName: 'w-[250px]'
|
||||
// }
|
||||
// },
|
||||
{
|
||||
accessorKey: 'file_name',
|
||||
header: ({ column }) => <DataGridColumnHeader title="File Name" column={column} />,
|
||||
@ -192,7 +183,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
header: ({ column }) => <DataGridColumnHeader title="Execution Date" column={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 }) => <DataGridColumnHeader title="Done Date" column={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',
|
||||
|
||||
37
src/pages/members/kyc-delete-member/ManageKycDeletion.tsx
Normal file
37
src/pages/members/kyc-delete-member/ManageKycDeletion.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>TPAY | List Deletion</title>
|
||||
</Helmet>
|
||||
<ManageKycDeletionContextProvider>
|
||||
<Container className="mb-7">
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE KYC DELETION</h1>
|
||||
<Breadcrumbs sx={{ mb: 2 }}>
|
||||
<Link underline="none" color="inherit" href="/">
|
||||
<span className="text-sm hover:underline">Dashboard</span>
|
||||
</Link>
|
||||
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Member</span>
|
||||
</Link>
|
||||
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">History Disbursement</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
<div className="grid gap-5 lg:gap-7.5">
|
||||
<DataGridInner />
|
||||
</div>
|
||||
</Container>
|
||||
</ManageKycDeletionContextProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageKycDeletion;
|
||||
61
src/pages/members/kyc-delete-member/blocks/ListToolbar.tsx
Normal file
61
src/pages/members/kyc-delete-member/blocks/ListToolbar.tsx
Normal file
@ -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 (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
||||
<div className="flex justify-between w-full items-center">
|
||||
<div className="flex gap-3 items-center ml-auto">
|
||||
<DefaultTooltip title={'Refresh'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListToolbar;
|
||||
@ -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<ContextProps>(initialProps);
|
||||
const API_URL = apiConfig.service_customer;
|
||||
|
||||
type StatusCode = 'W' | 'Y' | 'N' | 'T';
|
||||
|
||||
interface StatusInfo {
|
||||
label: string;
|
||||
bg: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const statusMap: Record<StatusCode, StatusInfo> = {
|
||||
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 (
|
||||
<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [showDetailDialog, setShowDetailDialog] = useState(false);
|
||||
const [showAddDialog, setShowAddDialog] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState<ManageKycDeletionProps | null>(null);
|
||||
const [manageKyc, setManageKyc] = useState<ManageKycDeletionProps[]>([]);
|
||||
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<ColumnDef<any>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: 'id',
|
||||
header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]'
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.created_at,
|
||||
id: 'created_at',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Created Date" column={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 }) => <DataGridColumnHeader title="Username" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[350px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.fullname,
|
||||
id: 'fullname',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Fullname" column={column} />,
|
||||
enableSorting: true,
|
||||
meta: {
|
||||
headerClassName: 'w-[350px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.registered_email,
|
||||
id: 'email',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Email" column={column} />,
|
||||
enableSorting: true,
|
||||
meta: {
|
||||
headerClassName: 'w-[350px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.status_approve,
|
||||
id: 'status_approve',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
|
||||
enableSorting: true,
|
||||
meta: {
|
||||
headerClassName: 'w-[350px]'
|
||||
},
|
||||
cell: ({row}) => renderStatusBadge(row.original.status_approve)
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
enableSorting: false,
|
||||
header: ({ column }) => <DataGridColumnHeader title="Action" column={column} />,
|
||||
cell: (data: any) => {
|
||||
const row = data.row.original;
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleDetailDialog(true, row.id)}
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
],
|
||||
[handleDetailDialog]
|
||||
);
|
||||
|
||||
return (
|
||||
<ManageKycDeletionContext.Provider
|
||||
value={{
|
||||
getKycDeletionList,
|
||||
showDetailDialog,
|
||||
handleDetailDialog,
|
||||
showAddDialog,
|
||||
handleAddDialog,
|
||||
selectedUser
|
||||
}}
|
||||
>
|
||||
<Toaster expand visibleToasts={9} duration={3000} />
|
||||
|
||||
<DataGridProvider
|
||||
columns={columns}
|
||||
pagination={{ size: 10 }}
|
||||
toolbar={<ListToolbar />}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'name', desc: false }]}
|
||||
serverSide={true}
|
||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||
getKycDeletionList(pageIndex, pageSize, sorting, columnFilters)
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</DataGridProvider>
|
||||
</ManageKycDeletionContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export { ManageKycDeletionContextProvider, ManageKycDeletionContext };
|
||||
export type { ManageKycDeletionProps };
|
||||
2
src/pages/members/kyc-delete-member/hooks/index.tsx
Normal file
2
src/pages/members/kyc-delete-member/hooks/index.tsx
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './ManageKycDeletionContext';
|
||||
export * from './useManageKycDeletionContext';
|
||||
@ -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 };
|
||||
@ -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 => {
|
||||
|
||||
<Route path="/members/kyc" element={<Kyc />} />
|
||||
<Route path="/members/member-management" element={<ManageMembers />} />
|
||||
<Route path="/members/kyc-delete-member" element={<ManageKycDeletion />} />
|
||||
<Route path="/members/create-member-credential" element={<MemberCredential />} />
|
||||
|
||||
<Route path="/access/access-type-management" element={<AccessType />} />
|
||||
|
||||
Reference in New Issue
Block a user