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

fixing manage account, kyc delete member

Browse Source
This commit is contained in:
Narul Hidayah
2025-04-14 20:43:42 +07:00
parent d0ac8c55b4
commit 9808b88eec
10 changed files with 385 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/account/manage-account/ManageAccount.tsx
View File

@ -93,6 +93,7 @@ const ManageAccount = () => {
<DataTable
columns={columns}
data={dataAccount}
createData={()=>{}}
onUpdate={() => console.log('Callback update')}
onDelete={() => console.log('Callback delete')}
/>

28
src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx
View File

@ -33,19 +33,19 @@ const statusMap: Record<StatusCode, StatusInfo> = {
};
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 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 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}`}>

4
src/pages/disbursement/history-transaction/blocks/DetailTransactionLog.tsx
View File

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

13
src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx
View File

@ -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
View 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
View 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;

252
src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx Normal file
View File

@ -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
View File

@ -0,0 +1,2 @@
export * from './ManageKycDeletionContext';
export * from './useManageKycDeletionContext';

12
src/pages/members/kyc-delete-member/hooks/useManageKycDeletionContext.tsx Normal file
View File

@ -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 };

2
src/routing/AppRoutingSetup.tsx
View File

@ -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 />} />