From d78805dbce1aa03a19ec7661a76332f47ce33d21 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Tue, 15 Apr 2025 17:23:01 +0700 Subject: [PATCH] update table on upgrade member kyc --- src/pages/members/kyc/Columns.tsx | 171 +++++++++++----- src/pages/members/kyc/Kyc.tsx | 201 ++++++++++--------- src/pages/members/kyc/blocks/AddDialog.tsx | 14 -- src/pages/members/kyc/blocks/ListToolBar.tsx | 1 - 4 files changed, 225 insertions(+), 162 deletions(-) delete mode 100644 src/pages/members/kyc/blocks/AddDialog.tsx diff --git a/src/pages/members/kyc/Columns.tsx b/src/pages/members/kyc/Columns.tsx index 541ac16..55d3d28 100644 --- a/src/pages/members/kyc/Columns.tsx +++ b/src/pages/members/kyc/Columns.tsx @@ -1,3 +1,4 @@ +import { DataGridColumnHeader, KeenIcon } from '@/components'; import { Button } from '@/components/ui/button'; import { DropdownMenu, @@ -18,7 +19,7 @@ export type Members = { created_at: Date; }; -export const columns: ColumnDef[] = [ +export const getColumns = (handleUpdate: (data: any) => void): ColumnDef[] => [ { accessorKey: 'no', header: ({ column }) => { @@ -31,6 +32,14 @@ export const columns: ColumnDef[] = [ ); + }, + cell: ({ row, table }) => { + const pageIndex = table.getState().pagination.pageIndex; + const pageSize = table.getState().pagination.pageSize; + const rowIndex = row.index; + + const number = pageIndex * pageSize + rowIndex + 1; + return number; } }, { @@ -136,61 +145,117 @@ export const columns: ColumnDef[] = [ id: 'actions', cell: ({ row }) => { const dataMembers = row.original; + return ( - - + ); } } ]; -export const initialMember = { - id: "", - fullname: "", - email: "", - username: "", - msisdn: "", - password: "", - pin: "", - try_pin: "", - mother_fullname: "", - agent_name: "", - bank_name: "", - bank_account: "", - ibank_number: "", - address: "", - longitude: "", - latitude: "", - nationality: "", - photouser: "", - photomerchant: "", - file_selfie: "", - file_document_id: "", - file_document_id_selfie: "", - file_commercial_license: "", - identity_type: "", - identity_number: "", - license_number: "", - date_birth: "", - gender: "", - status: "N", - isneedapproval: "", - isapproved: "", - approveddate: "", - approvedby: "", - created_by: "", - created_at: "", - updated_by: "", - updated_at: "", - deleted_by: "", - deleted_at: "", - group: "", - point_tier: "", - language: "", - municipio: "", - posto_adms: "", - suco: "", - aldeia: "", - profession: "", - description: "" -} +export type MembersProps = { + id: string; + fullname: string; + email: string; + username: string; + msisdn: string; + password: string; + pin: string; + try_pin: string; + mother_fullname: string; + agent_name: string; + bank_name: string; + bank_account: string; + ibank_number: string; + address: string; + longitude: string; + latitude: string; + nationality: string; + photouser: string; + photomerchant: string; + file_selfie: string; + file_document_id: string; + file_document_id_selfie: string; + file_commercial_license: string; + identity_type: string; + identity_number: string; + license_number: string; + date_birth: string; + gender: string; + status: string; + isneedapproval: string; + isapproved: string; + approveddate: string; + approvedby: string; + created_by: string; + created_at: string; + updated_by: string; + updated_at: string; + deleted_by: string; + deleted_at: string; + group: string; + point_tier: string; + language: string; + municipio: string; + posto_adms: string; + suco: string; + aldeia: string; + profession: string; + description: string; +}; + +export const initialMember: MembersProps = { + id: '', + fullname: '', + email: '', + username: '', + msisdn: '', + password: '', + pin: '', + try_pin: '', + mother_fullname: '', + agent_name: '', + bank_name: '', + bank_account: '', + ibank_number: '', + address: '', + longitude: '', + latitude: '', + nationality: '', + photouser: '', + photomerchant: '', + file_selfie: '', + file_document_id: '', + file_document_id_selfie: '', + file_commercial_license: '', + identity_type: '', + identity_number: '', + license_number: '', + date_birth: '', + gender: '', + status: 'N', + isneedapproval: '', + isapproved: '', + approveddate: '', + approvedby: '', + created_by: '', + created_at: '', + updated_by: '', + updated_at: '', + deleted_by: '', + deleted_at: '', + group: '', + point_tier: '', + language: '', + municipio: '', + posto_adms: '', + suco: '', + aldeia: '', + profession: '', + description: '' +}; diff --git a/src/pages/members/kyc/Kyc.tsx b/src/pages/members/kyc/Kyc.tsx index b3ecff9..b27ce0f 100644 --- a/src/pages/members/kyc/Kyc.tsx +++ b/src/pages/members/kyc/Kyc.tsx @@ -1,9 +1,9 @@ -import { DataGridInner, TDataGridProps } from '@/components'; +import { Container, DataGridInner, DataGridProvider, TDataGridProps } from '@/components'; import { DataTable } from '@/components/ui/DataTable'; import { Table } from '@tanstack/react-table'; import React, { createContext, useContext, useState, useEffect } from 'react'; import { ManageKycContextProvider } from './hooks'; -import { columns, initialMember } from './Columns'; +import { getColumns, initialMember } from './Columns'; import { useAuthContext } from '@/auth'; import { LoaderTransparant } from '@/components'; import { apiConfig } from '@/config/api.config'; @@ -16,25 +16,7 @@ const BASE_URL_MASTER_DATA = apiConfig.service_master_data; import DetailMember from '../manage-members/blocks/DetailMember'; import { Breadcrumbs, Link } from '@mui/material'; import { Helmet } from 'react-helmet'; - -export interface IDataGridContextProps { - props: TDataGridProps; - table: Table; - totalRows: number; - loading: (state: boolean) => void; - reload: () => void; - children?: React.ReactNode; -} - -const DataGridContext = createContext | undefined>(undefined); - -export const useDataGrid = () => { - const context = useContext(DataGridContext); - if (!context) { - throw new Error('useDataGrid must be used within a DataGridProvider'); - } - return context; -}; +import { ListToolBar } from './blocks/ListToolBar'; const Kyc = () => { const [loading, setLoading] = useState(false); @@ -58,8 +40,8 @@ const Kyc = () => { limit: 10, page: 1, with_deleted: false, - order_field: 'fullname', - order_direction: 'ASC', + order_field: 'created_at', + order_direction: 'DESC', type: 'kyc' } }); @@ -72,14 +54,14 @@ const Kyc = () => { setMembers(resMembers); let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, { params: { - limit: 50, - page: 1, - with_deleted: false, - order_field: 'name', - order_direction: 'ASC', + limit: 50, + page: 1, + with_deleted: false, + order_field: 'name', + order_direction: 'ASC' } }); - setProfession(getProfession.data.data.list) + setProfession(getProfession.data.data.list); } catch (error: any) { toast.error(error.message); console.log(error); @@ -103,8 +85,12 @@ const Kyc = () => { setDialogOpen(true); } + const resetForm = () => { + setMember(initialMember); + }; + const handleYes = async () => { - setLoading(true) + setLoading(true); const userLogin: any = await getUser(); const updateData: any = member; const customerId = member.id; @@ -151,100 +137,127 @@ const Kyc = () => { if (updateData[property]) form.append(property, updateData[property]); } if (dialogType === 'reject') { - if (destinationGroup === "Premium") await axios.post(`${BASE_URL}/customer/reject`, { customerid: customerId, description: updateData.approval_description_premium }); - if (destinationGroup === "Agent") await axios.post(`${BASE_URL}/customer/reject`, { customerid: customerId, description: updateData.approval_description_agent }); + if (destinationGroup === 'Premium') + await axios.post(`${BASE_URL}/customer/reject`, { + customerid: customerId, + description: updateData.approval_description_premium + }); + if (destinationGroup === 'Agent') + await axios.post(`${BASE_URL}/customer/reject`, { + customerid: customerId, + description: updateData.approval_description_agent + }); } if (dialogType === 'update') { await axios.put(`${BASE_URL}/customer/update/${customerId}`, form); - if (updateData.isneedapproval == 1&&destinationGroup === "Premium") await axios.post(`${BASE_URL}/customer/approve`, { customerid: customerId, description: updateData.approval_description_premium}); - if (updateData.isneedapproval == 1&&destinationGroup === "Agent") await axios.post(`${BASE_URL}/customer/approve`, { customerid: customerId, description: updateData.approval_description_agent}); + if (updateData.isneedapproval == 1 && destinationGroup === 'Premium') + await axios.post(`${BASE_URL}/customer/approve`, { + customerid: customerId, + description: updateData.approval_description_premium + }); + if (updateData.isneedapproval == 1 && destinationGroup === 'Agent') + await axios.post(`${BASE_URL}/customer/approve`, { + customerid: customerId, + description: updateData.approval_description_agent + }); } setDialogOpen(false); setIsDialogOpen(false); toast.success(`Success Update & ${dialogType} Kyc Member`); } catch (error: any) { - if (error?.response?.data?.error) error.message = error?.response?.data?.error + if (error?.response?.data?.error) error.message = error?.response?.data?.error; setDialogOpen(false); setIsDialogOpen(false); toast.error(error.message); } finally { await fetchCustomers(); - setLoading(false) + setLoading(false); } }; function setShowAddDialog(el: any) { - setIsDialogOpen(el) + setIsDialogOpen(el); } if (loading) return ; + useEffect(() => { + if (!isDialogOpen) resetForm(); + }, [isDialogOpen]); + return ( <> TPAY | KYC -
-
- setDialogOpen(false)} - title="Confirm Action" - content={`Are you sure you want to ${dialogType}?`} - onYes={handleYes} - onNo={() => setDialogOpen(false)} + + setDialogOpen(false)} + title="Confirm Action" + content={`Are you sure you want to ${dialogType}?`} + onYes={handleYes} + onNo={() => setDialogOpen(false)} + /> + {member.id ? ( + // + - { member.id ? ( - // - - ): ""} -

Manage Member KYC

-
- - - Dashboard - + ) : ( + '' + )} +

+ KYC Upgrade Members +

+
+ + + Dashboard + - - Members - - - - Manage Member KYC - - -
-
-
- -
-
+ + Members + + + KYC Upgrade Members + +
-
+
+
+ } + layout={{ card: true }} + sorting={[{ id: 'created_at', desc: true }]} + serverSide={false} + onRowSelectionChange={(selected, table: any) => { + const selectedRow = table.getSelectedRowModel().rows[0]; + if (selectedRow) handleUpdate(selectedRow.original); + }} + > +
+
+ ); }; diff --git a/src/pages/members/kyc/blocks/AddDialog.tsx b/src/pages/members/kyc/blocks/AddDialog.tsx deleted file mode 100644 index 68b4d58..0000000 --- a/src/pages/members/kyc/blocks/AddDialog.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Dialog } from '@/components/ui/dialog'; -import { useRef } from 'react'; -import { useKycContext } from '../hooks'; -import { useDataGrid } from '@/components'; - -const AddDialog = () => { - const parentRef = useRef(null); - const { showAddDialog, handleAddDialog } = useKycContext(); - const { reload } = useDataGrid(); - - return ; -}; - -export default AddDialog; diff --git a/src/pages/members/kyc/blocks/ListToolBar.tsx b/src/pages/members/kyc/blocks/ListToolBar.tsx index 8d99350..180e68b 100644 --- a/src/pages/members/kyc/blocks/ListToolBar.tsx +++ b/src/pages/members/kyc/blocks/ListToolBar.tsx @@ -4,7 +4,6 @@ import { useKycContext } from '../hooks'; const ListToolBar = () => { const { table, reload } = useDataGrid(); - const { handleDetailDialog, handleAddDialog } = useKycContext(); return (