update table on upgrade member kyc
This commit is contained in:
Wikzyy
@ -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<Members>[] = [
|
||||
export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Members>[] => [
|
||||
{
|
||||
accessorKey: 'no',
|
||||
header: ({ column }) => {
|
||||
@ -31,6 +32,14 @@ export const columns: ColumnDef<Members>[] = [
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
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<Members>[] = [
|
||||
id: 'actions',
|
||||
cell: ({ row }) => {
|
||||
const dataMembers = row.original;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
</DropdownMenu>
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleUpdate(dataMembers)}
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
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: ''
|
||||
};
|
||||
|
||||
@ -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<TData extends object> {
|
||||
props: TDataGridProps<TData>;
|
||||
table: Table<TData>;
|
||||
totalRows: number;
|
||||
loading: (state: boolean) => void;
|
||||
reload: () => void;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const DataGridContext = createContext<IDataGridContextProps<any> | 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 <LoaderTransparant />;
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDialogOpen) resetForm();
|
||||
}, [isDialogOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>TPAY | KYC</title>
|
||||
</Helmet>
|
||||
<div>
|
||||
<div className="container mx-auto w-full">
|
||||
<ConfirmDialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
title="Confirm Action"
|
||||
content={`Are you sure you want to ${dialogType}?`}
|
||||
onYes={handleYes}
|
||||
onNo={() => setDialogOpen(false)}
|
||||
<Container>
|
||||
<ConfirmDialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
title="Confirm Action"
|
||||
content={`Are you sure you want to ${dialogType}?`}
|
||||
onYes={handleYes}
|
||||
onNo={() => setDialogOpen(false)}
|
||||
/>
|
||||
{member.id ? (
|
||||
// <CustomerDialog
|
||||
// open={isDialogOpen}
|
||||
// handleClose={closeDialog}
|
||||
// handleSubmit={handleSubmit}
|
||||
// initialData={member}
|
||||
// viewStats={true}
|
||||
// page={'kyc'}
|
||||
// />
|
||||
<DetailMember
|
||||
showAddDialog={isDialogOpen}
|
||||
setShowAddDialog={setShowAddDialog}
|
||||
handleClose={closeDialog}
|
||||
handleReject={handleReject}
|
||||
handleSubmit={handleSubmit}
|
||||
initialData={member}
|
||||
fetchCustomers={fetchCustomers}
|
||||
profession={profession}
|
||||
page={'kyc'}
|
||||
/>
|
||||
{ member.id ? (
|
||||
// <CustomerDialog
|
||||
// open={isDialogOpen}
|
||||
// handleClose={closeDialog}
|
||||
// handleSubmit={handleSubmit}
|
||||
// initialData={member}
|
||||
// viewStats={true}
|
||||
// page={'kyc'}
|
||||
// />
|
||||
<DetailMember
|
||||
showAddDialog={isDialogOpen}
|
||||
setShowAddDialog={setShowAddDialog}
|
||||
handleClose={closeDialog}
|
||||
handleReject={handleReject}
|
||||
handleSubmit={handleSubmit}
|
||||
initialData={member}
|
||||
fetchCustomers={fetchCustomers}
|
||||
profession={profession}
|
||||
page={'kyc'}
|
||||
/>
|
||||
): ""}
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Member KYC</h1>
|
||||
<div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
|
||||
<Breadcrumbs>
|
||||
<Link underline="none" color="inherit" href="/">
|
||||
<span className="text-sm hover:underline">Dashboard</span>
|
||||
</Link>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">
|
||||
KYC Upgrade Members
|
||||
</h1>
|
||||
<div className="grid gap-5 lg:gap-7.5 mx-8 w-auto">
|
||||
<Breadcrumbs>
|
||||
<Link underline="none" color="inherit" href="/">
|
||||
<span className="text-sm hover:underline">Dashboard</span>
|
||||
</Link>
|
||||
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Members</span>
|
||||
</Link>
|
||||
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Manage Member KYC</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
</div>
|
||||
<div className="w-full overflow-x-auto px-4">
|
||||
<div className="min-w-[800px]">
|
||||
<DataTable
|
||||
createData={null}
|
||||
data={members}
|
||||
columns={columns}
|
||||
onUpdate={handleUpdate}
|
||||
onDelete={null}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Members</span>
|
||||
</Link>
|
||||
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">KYC Upgrade Members</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full overflow-x-auto px-4">
|
||||
<div className="min-w-[800px]">
|
||||
<DataGridProvider
|
||||
data={members}
|
||||
columns={getColumns(handleUpdate)}
|
||||
pagination={{ size: 25 }}
|
||||
toolbar={<ListToolBar />}
|
||||
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);
|
||||
}}
|
||||
></DataGridProvider>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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<any | null>(null);
|
||||
const { showAddDialog, handleAddDialog } = useKycContext();
|
||||
const { reload } = useDataGrid();
|
||||
|
||||
return <Dialog></Dialog>;
|
||||
};
|
||||
|
||||
export default AddDialog;
|
||||
@ -4,7 +4,6 @@ import { useKycContext } from '../hooks';
|
||||
|
||||
const ListToolBar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleDetailDialog, handleAddDialog } = useKycContext();
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
|
||||
Reference in New Issue
Block a user