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

member and kyc

Browse Source
This commit is contained in:
unknown
2025-03-13 16:28:58 +07:00
parent 966d3c7780
commit 5a0a2a6d71
5 changed files with 154 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/ui/DataTable.tsx
View File

@ -43,10 +43,10 @@ interface DataTableProps<TData, TValue> {
export function DataTable<TData, TValue>({
columns,
data,
createGroup,
createData,
onUpdate,
onDelete
}: DataTableProps<TData, TValue> & { createGroup?: () => void }) {
}: DataTableProps<TData, TValue> & { createData?: () => void }) {
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [sorting, setSorting] = useState<SortingState>([]);
@ -74,12 +74,7 @@ export function DataTable<TData, TValue>({
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
className="max-w-sm"
/>
{createGroup && (
<Button variant="outline" onClick={createGroup}>
Create Group
</Button>
)}
{/* <Button onClick={createData} variant="outline" className="h-7.5 text-[0.8rem]">Add Data</Button> */}
</div>
<div className="rounded-md border">
<Table>

2
src/pages/groups/ManageGroups.tsx
View File

@ -145,7 +145,7 @@ const ManageGroups = () => {
onNo={() => setDialogOpen(false)}
/>
<h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
<DataTable data={dataGroup} columns={columns} createGroup={createGroup} onUpdate={handleUpdate} onDelete={handleDelete} />
<DataTable data={dataGroup} columns={columns} createData={createGroup} onUpdate={handleUpdate} onDelete={handleDelete} />
<Dialog open={isDialogOpen} onClose={closeDialog}>
<DialogContent className="w-[600px]">
<div className="flex justify-between">

8
src/pages/members/kyc/Kyc.tsx
View File

@ -87,8 +87,8 @@ const Kyc = () => {
}
const handleYes = async () => {
let userLogin: any = await getUser();
let updateData: any = member;
const userLogin: any = await getUser();
const updateData: any = member;
const customerId = member.id;
updateData.updated_by = userLogin.data ? userLogin.data.id : ''
let today = new Date();
@ -100,6 +100,8 @@ const Kyc = () => {
delete updateData.latitude;
delete updateData.created_at;
delete updateData.no;
delete updateData.destinationGroup;
delete updateData.statusApproval;
delete updateData.group_id;
delete updateData.group_name;
delete updateData.group_description;
@ -140,7 +142,7 @@ const Kyc = () => {
onNo={() => setDialogOpen(false)}
/>
<CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleReject={handleReject}
handleSubmit={handleSubmit} initialData={member} viewStats={true}/>
handleSubmit={handleSubmit} initialData={member} viewStats={true} page={"kyc"}/>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-7">Manage Member KYC</h1>
<DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
</div>

136
src/pages/members/manage-members/CustomerDetailModal.tsx
View File

@ -1,4 +1,5 @@
import React, { useState, useEffect } from "react";
import axios from 'axios';
import {
Dialog,
DialogActions,
@ -14,21 +15,114 @@ import {
} from "@mui/material";
import Divider from '@mui/material/Divider';
import { initialMember } from "./Columns";
import { apiConfig } from '@/config/api.config';
const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject }: any) => {
const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject, page }: any) => {
const [formData, setFormData] = useState(initialData || initialMember);
const [viewOnly, setViewOnly] = useState(viewStats || false);
const [municipios, setMunicipios] = useState([]);
const [aldeias, setAldeias] = useState([]);
const [postoAdm, setPostoAdm] = useState([]);
const [sucos, setSucos] = useState([]);
useEffect(() => {
setFormData(initialData || {}); // Sync formData when initialData changes
fetchMasterData()
}, [initialData]);
async function fetchMasterData() {
try {
let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setMunicipios(getMunicipios.data.data.list)
let getPostoAdms = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setPostoAdm(getPostoAdms.data.data.list)
let getSucos = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setSucos(getSucos.data.data.list)
let getAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/aldeias/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setAldeias(getAldeias.data.data.list)
} catch (error) {
console.log(error);
}
}
const handleChange = (e: any) => {
const handleChange = async (e: any) => {
const { name, value } = e.target;
if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(name, value);
setFormData({ ...formData, [name]: value });
};
async function getMasterAfter(name: string, id: any) {
if (name === 'municipio') {
let getMunicipiosPosto = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/postoadms/${id}`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setPostoAdm(getMunicipiosPosto.data.data)
}
if (name === 'posto_adms') {
let getPostoSuco = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/sucos/${id}`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setSucos(getPostoSuco.data.data)
}
if (name === 'suco') {
let getSucoAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/aldeias/${id}`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setAldeias(getSucoAldeias.data.data)
}
}
const onSubmit = () => {
handleSubmit(formData);
handleClose();
@ -102,32 +196,44 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
<FormControl fullWidth margin="dense">
<InputLabel>Municipio</InputLabel>
<Select disabled={viewOnly} name="municipio" value={formData.municipio} onChange={handleChange}>
<MenuItem value="municipio1">Municipio 1</MenuItem>
<MenuItem value="municipio2">Municipio 2</MenuItem>
{
municipios ? municipios.map((el: any) => (
<MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
)) : ""
}
</Select>
</FormControl>
<FormControl fullWidth margin="dense">
<InputLabel>Posto</InputLabel>
<Select disabled={viewOnly} name="posto_adms" value={formData.posto_adms} onChange={handleChange}>
<MenuItem value="posto1">Posto 1</MenuItem>
<MenuItem value="posto2">Posto 2</MenuItem>
<Select disabled={viewOnly || !formData.municipio} name="posto_adms" value={formData.posto_adms} onChange={handleChange}>
{
postoAdm ? postoAdm.map((el: any) => (
<MenuItem key={el.posto_adms_id || el.id} value={el.posto_adms_id || el.id}>{el.posto_adms_name || el.name}</MenuItem>
)) : ""
}
</Select>
</FormControl>
<FormControl fullWidth margin="dense">
<InputLabel>Suco</InputLabel>
<Select disabled={viewOnly} name="suco" value={formData.suco} onChange={handleChange}>
<MenuItem value="posto1">suco 1</MenuItem>
<MenuItem value="posto2">suco 2</MenuItem>
<Select disabled={viewOnly || !formData.posto_adms} name="suco" value={formData.suco} onChange={handleChange}>
{
sucos ? sucos.map((el: any) => (
<MenuItem key={el.sucos_id || el.id} value={el.sucos_id || el.id}>{el.sucos_name || el.name}</MenuItem>
)) : ""
}
</Select>
</FormControl>
<FormControl fullWidth margin="dense">
<InputLabel>Aldeia</InputLabel>
<Select disabled={viewOnly} name="aldeia" value={formData.aldeia} onChange={handleChange}>
<MenuItem value="posto1">aldeia 1</MenuItem>
<MenuItem value="posto2">aldeia 2</MenuItem>
<Select disabled={viewOnly || !formData.suco} name="aldeia" value={formData.aldeia} onChange={handleChange}>
{
aldeias ? aldeias.map((el: any) => (
<MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
)) : ""
}
</Select>
</FormControl>
@ -141,12 +247,12 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
<Button onClick={() => viewOnly ? setViewOnly(false) : setViewOnly(true)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
<Button onClick={handleClose} color="secondary">Cancel</Button>
{
formData.isneedapproval == 1 ? (
formData.isneedapproval == 1 && page === 'kyc' ? (
<Button onClick={onReject} color="warning" variant="contained">Reject</Button>
) : ('')
}
<Button onClick={onSubmit} color="primary" variant="contained">
{ formData.isneedapproval == 1 ? (`Edit & Approve`) : (`Edit`) }
{ formData.id ? (formData.isneedapproval == 1 && page === 'kyc' ? (`Edit & Approve`) : (`Edit`)) : ("Create") }
</Button>
</DialogActions>
</Dialog>

31
src/pages/members/manage-members/ManageMembers.tsx
View File

@ -6,9 +6,11 @@ import axios from 'axios';
import CustomerDialog from './CustomerDetailModal';
import ConfirmDialog from '@/components/confirm';
import { useAuthContext } from '@/auth';
import { ScreenLoader } from '@/components';
const BASE_URL = apiConfig.service_customer;
const ManageMembers = () => {
const [loading, setLoading] = useState(false);
const [members, setMembers] = useState([]);
const [member, setMember] = useState(initialMember);
const [isDialogOpen, setIsDialogOpen] = useState(false);
@ -18,7 +20,9 @@ const ManageMembers = () => {
const { getUser } = useAuthContext();
useEffect(() => {
setLoading(true)
fetchGroups()
setLoading(false)
}, []);
async function fetchGroups() {
@ -46,20 +50,26 @@ const ManageMembers = () => {
}
const handleUpdate = (data: any) => {
setDialogType('update');
setMember(data)
setIsDialogOpen(true)
}
function createMember() {
setDialogType('create');
setMember(initialMember);
setIsDialogOpen(true);
}
async function handleSubmit(data: any) {
setDialogType('update')
setMember(data)
setDialogOpen(true)
}
const handleYes = async () => {
let userLogin: any = await getUser();
let updateData: any = member;
let customerId = member.id;
const userLogin: any = await getUser();
const updateData: any = member;
const customerId = member.id;
updateData.updated_by = userLogin.data ? userLogin.data.id : ''
let today = new Date();
updateData.updated_at = today.toString();
@ -70,6 +80,8 @@ const ManageMembers = () => {
delete updateData.latitude;
delete updateData.created_at;
delete updateData.no;
delete updateData.destinationGroup;
delete updateData.statusApproval;
delete updateData.group_id;
delete updateData.group_name;
delete updateData.group_description;
@ -81,15 +93,20 @@ const ManageMembers = () => {
delete updateData.group_deleted_by;
delete updateData.group_deleted_at;
try {
await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
if (dialogType === 'update') await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
// if (dialogType === 'create') await axios.post(`${BASE_URL}/customers/create`, member)
await fetchGroups();
setDialogOpen(false)
setIsDialogOpen(false)
} catch (error: any) {
alert(error.message)
setDialogOpen(false)
setIsDialogOpen(false)
}
}
if (loading) return (<ScreenLoader/>)
return (
<div>
<div className="container mx-auto p-5">
@ -97,13 +114,13 @@ const ManageMembers = () => {
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={`Are you sure you want to `+( dialogType === 'create' ? "create?" : ( dialogType === 'update' ? "update?" : "delete?"))}
content={`Are you sure you want to ${dialogType}?`}
onYes={handleYes}
onNo={() => setDialogOpen(false)}
/>
<CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleSubmit={handleSubmit} initialData={member}/>
<h1 className="text-xl font-medium leading-none text-gray-900">Manage Members</h1>
<DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
<DataTable data={members} createData={createMember} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
</div>
</div>
);