269 lines
8.8 KiB
TypeScript
269 lines
8.8 KiB
TypeScript
import {
|
|
Container,
|
|
DataGridInner,
|
|
DataGridLoader,
|
|
DataGridProvider,
|
|
TDataGridProps,
|
|
useDataGrid
|
|
} from '@/components';
|
|
import React, { createContext, useContext, useState, useEffect } from 'react';
|
|
import { getColumns, initialMember } from './Columns';
|
|
import { useAuthContext } from '@/auth';
|
|
import { LoaderTransparant } from '@/components';
|
|
import { apiConfig } from '@/config/api.config';
|
|
import ConfirmDialog from '@/components/confirm';
|
|
import axios from 'axios';
|
|
import { toast } from 'sonner';
|
|
import DetailMember from '../manage-members/blocks/DetailMember';
|
|
import { Breadcrumbs, Link } from '@mui/material';
|
|
import { Helmet } from 'react-helmet';
|
|
import { ListToolBar } from './blocks/ListToolBar';
|
|
import { RefreshCw } from 'lucide-react';
|
|
const BASE_URL = apiConfig.service_customer;
|
|
const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
|
|
|
|
const Kyc = () => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [members, setMembers] = useState([]);
|
|
const [member, setMember] = useState(initialMember);
|
|
const [profession, setProfession] = useState([]);
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [dialogType, setDialogType] = useState('');
|
|
const [isReloading, setIsReloading] = useState(false);
|
|
const closeDialog = () => {
|
|
setIsDialogOpen(false);
|
|
setMember(initialMember);
|
|
};
|
|
const { getUser } = useAuthContext();
|
|
|
|
useEffect(() => {
|
|
fetchCustomers();
|
|
}, [member]);
|
|
|
|
async function fetchCustomers() {
|
|
setIsReloading(true);
|
|
try {
|
|
let customers = await axios.get(`${BASE_URL}/customer/list`, {
|
|
params: {
|
|
limit: 10,
|
|
page: 1,
|
|
with_deleted: false,
|
|
order_field: 'created_at',
|
|
order_direction: 'DESC',
|
|
type: 'kyc'
|
|
}
|
|
});
|
|
let temp = 1;
|
|
let resMembers = customers.data.data.list.map((el: any) => {
|
|
el.no = temp++;
|
|
el.name = el.fullname;
|
|
return el;
|
|
});
|
|
setMembers(resMembers);
|
|
let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
|
|
params: {
|
|
limit: 75,
|
|
page: 1,
|
|
with_deleted: false,
|
|
order_field: 'name',
|
|
order_direction: 'ASC'
|
|
}
|
|
});
|
|
setProfession(getProfession.data.data.list);
|
|
} catch (error: any) {
|
|
toast.error(error.message);
|
|
console.log(error);
|
|
} finally {
|
|
// setLoading(false);
|
|
setIsReloading(false);
|
|
}
|
|
}
|
|
|
|
const handleUpdate = (data: any) => {
|
|
setMember(data);
|
|
setIsDialogOpen(true);
|
|
};
|
|
|
|
async function handleSubmit(data: any) {
|
|
setDialogType('update');
|
|
setMember(data);
|
|
setDialogOpen(true);
|
|
}
|
|
|
|
function handleReject(data: any) {
|
|
setDialogType('reject');
|
|
setMember(data);
|
|
setDialogOpen(true);
|
|
}
|
|
|
|
const handleReload = () => {
|
|
setIsReloading(true);
|
|
fetchCustomers();
|
|
};
|
|
|
|
const handleYes = async () => {
|
|
try {
|
|
setIsReloading(true);
|
|
const userLogin: any = await getUser();
|
|
const updateData: any = member;
|
|
const customerId = member.id;
|
|
const destinationGroup = updateData.destinationGroup;
|
|
updateData.updated_by = userLogin.data ? userLogin.data.id : '';
|
|
let today = new Date();
|
|
updateData.updated_at = today.toString();
|
|
updateData.municipio = updateData.municipio_id;
|
|
updateData.posto_adms = updateData.posto_adms_id;
|
|
updateData.suco = updateData.suco_id;
|
|
updateData.aldeia = updateData.aldeia_id;
|
|
delete updateData.id;
|
|
delete updateData.pin;
|
|
delete updateData.name;
|
|
delete updateData.longitude;
|
|
delete updateData.latitude;
|
|
delete updateData.created_at;
|
|
delete updateData.no;
|
|
delete updateData.destinationGroup;
|
|
delete updateData.statusApproval;
|
|
delete updateData.description;
|
|
delete updateData.municipio_id;
|
|
delete updateData.municipio_name;
|
|
delete updateData.posto_adms_id;
|
|
delete updateData.posto_adms_name;
|
|
delete updateData.suco_id;
|
|
delete updateData.suco_name;
|
|
delete updateData.aldeia_id;
|
|
delete updateData.aldeia_name;
|
|
delete updateData.group_name;
|
|
delete updateData.group_description;
|
|
delete updateData.group_status;
|
|
delete updateData.group_created_by;
|
|
delete updateData.group_created_at;
|
|
delete updateData.group_updated_by;
|
|
delete updateData.group_updated_at;
|
|
delete updateData.group_deleted_by;
|
|
delete updateData.group_deleted_at;
|
|
delete updateData.updated_at;
|
|
const form = new FormData();
|
|
for (const property in updateData) {
|
|
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 (dialogType === 'update') {
|
|
await axios.put(`${BASE_URL}/customer/update-dashboard/${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
|
|
});
|
|
}
|
|
toast.success(`Success Update & ${dialogType} Kyc Member`);
|
|
} catch (error: any) {
|
|
if (error?.response?.data?.error) error.message = error?.response?.data?.error;
|
|
toast.error(error.message);
|
|
} finally {
|
|
setDialogOpen(false);
|
|
setIsDialogOpen(false);
|
|
await fetchCustomers();
|
|
setIsReloading(false);
|
|
}
|
|
};
|
|
|
|
function setShowAddDialog(el: any) {
|
|
setIsDialogOpen(el);
|
|
}
|
|
// if (isReloading) return <DataGridLoader />;
|
|
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>TPAY | KYC</title>
|
|
</Helmet>
|
|
<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 ? (
|
|
<DetailMember
|
|
showAddDialog={isDialogOpen}
|
|
setShowAddDialog={setShowAddDialog}
|
|
handleClose={closeDialog}
|
|
handleReject={handleReject}
|
|
handleSubmit={handleSubmit}
|
|
initialData={member}
|
|
fetchCustomers={fetchCustomers}
|
|
profession={profession}
|
|
dialogType={dialogType}
|
|
page={'kyc'}
|
|
/>
|
|
) : (
|
|
''
|
|
)}
|
|
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">KYC Upgrade Members</h1>
|
|
<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">KYC Upgrade Members</span>
|
|
</Link>
|
|
</Breadcrumbs>
|
|
{/* <div className="w-full overflow-x-auto"> */}
|
|
<div className="grid gap-5 lg:gap-7.5 mt-5 relative">
|
|
{isReloading && (
|
|
<DataGridLoader />
|
|
// <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
|
|
// <div className="flex flex-col items-center">
|
|
// <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
|
|
// <span className="text-slate-500 font-medium">Refreshing data...</span>
|
|
// </div>
|
|
// </div>
|
|
)}
|
|
<DataGridProvider
|
|
data={members}
|
|
pagination={{ size: 10 }}
|
|
columns={getColumns(handleUpdate)}
|
|
layout={{ card: true }}
|
|
sorting={[{ id: 'created_at', desc: true }]}
|
|
toolbar={<ListToolBar onReload={handleReload} isReloading={isReloading} />}
|
|
serverSide={false}
|
|
onRowSelectionChange={(selected, table: any) => {
|
|
const selectedRow = table.getSelectedRowModel().rows[0];
|
|
if (selectedRow) handleUpdate(selectedRow.original);
|
|
}}
|
|
></DataGridProvider>
|
|
</div>
|
|
{/* </div> */}
|
|
</Container>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Kyc;
|