fix detail member
This commit is contained in:
unknown
@ -1,616 +0,0 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
|
||||||
import axios from 'axios';
|
|
||||||
import { Dialog,DialogActions,DialogContent,DialogTitle,TextField,Button,MenuItem,Select,InputLabel,FormControl,Typography,
|
|
||||||
InputAdornment,Grid,Box,List,ListItem,
|
|
||||||
} from "@mui/material";
|
|
||||||
import UploadFileIcon from "@mui/icons-material/UploadFile";
|
|
||||||
import Divider from '@mui/material/Divider';
|
|
||||||
import { initialMember } from "./Columns";
|
|
||||||
import { apiConfig } from '@/config/api.config';
|
|
||||||
import ConfirmDialog from '@/components/confirm';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
|
|
||||||
const BASE_URL_CUSTOMER = apiConfig.service_customer;
|
|
||||||
// MAIN PAGE
|
|
||||||
const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject, page, fetchCustomers }: 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([]);
|
|
||||||
const [profession, setProfession] = useState([]);
|
|
||||||
const [groupData] = useState({
|
|
||||||
reguler: `This fill can not be empty!`,
|
|
||||||
premium: `This field required only for Premium or Agent`,
|
|
||||||
agent: `This field required only for Agent`
|
|
||||||
})
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setFormData(initialData || {}); // Sync formData when initialData changes
|
|
||||||
fetchMasterData()
|
|
||||||
}, [initialData]);
|
|
||||||
|
|
||||||
async function fetchMasterData() {
|
|
||||||
try {
|
|
||||||
let getProfession = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
|
|
||||||
params: {
|
|
||||||
limit: 50,
|
|
||||||
page: 1,
|
|
||||||
with_deleted: false,
|
|
||||||
order_field: 'name',
|
|
||||||
order_direction: 'ASC',
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setProfession(getProfession.data.data.list)
|
|
||||||
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 = async (e: any) => {
|
|
||||||
const { name, value } = e.target;
|
|
||||||
if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(name, value);
|
|
||||||
if (name === "file_selfie" || name === "photouser" || name === 'file_document_id' || name === "file_document_id_selfie" ||
|
|
||||||
name === "file_commercial_license") { // FOR FILE ONLY
|
|
||||||
setFormData({ ...formData, [name]: e.target.files[0] });
|
|
||||||
} else {
|
|
||||||
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 = () => {
|
|
||||||
if (page === 'kyc' && !formData.description) return toast.warning(`Description for approval needed!`)
|
|
||||||
handleSubmit(formData);
|
|
||||||
// handleClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onReject = () => {
|
|
||||||
handleReject(formData);
|
|
||||||
handleClose();
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateDate(date: any, type: any) {
|
|
||||||
if (!date) return ''
|
|
||||||
const today = new Date(date);
|
|
||||||
if (type === 'datetime') return today.toISOString().replace('T', ' ').substring(0, 19);
|
|
||||||
return today.toISOString().split('T')[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
|
|
||||||
<DialogTitle>Customer Form ({viewOnly ? 'View' : 'Edit'})</DialogTitle>
|
|
||||||
<DialogContent>
|
|
||||||
<div className="flex justify-between pb-5">
|
|
||||||
<Typography sx={{color:'grey'}}>Customer Data</Typography>
|
|
||||||
<Typography sx={{color:'grey'}} display="flex" justifyContent="flex-end">Created: {generateDate(formData.created_at, 'datetime')}</Typography>
|
|
||||||
</div>
|
|
||||||
{
|
|
||||||
formData.isneedapproval == 1 ? (
|
|
||||||
<div className="flex justify-between pb-5">
|
|
||||||
<Typography sx={{color:'orange'}}>User Request for approval </Typography>
|
|
||||||
</div>
|
|
||||||
) : ('')
|
|
||||||
}
|
|
||||||
|
|
||||||
<TextField disabled={viewOnly} required multiline fullWidth margin="dense" label="Full Name" name="fullname" value={formData.fullname} onChange={handleChange} />
|
|
||||||
{/* <Typography fontSize={13} paddingLeft={2} marginTop={-2.5} color="red">{groupData.reguler}</Typography> */}
|
|
||||||
<TextField disabled={viewOnly} required fullWidth margin="dense" label="Email" name="email" value={formData.email} onChange={handleChange} />
|
|
||||||
<TextField disabled fullWidth required margin="dense" label="Group" name="group" value={formData.group_name} onChange={handleChange} />
|
|
||||||
{fileTextFile("Photo", formData.photouser, "photouser", handleChange)}
|
|
||||||
<TextField disabled={viewOnly} required fullWidth margin="dense" label="Username" name="username" value={formData.username} onChange={handleChange} />
|
|
||||||
<TextField disabled={viewOnly} required fullWidth margin="dense" label="Mother Fullname" name="mother_fullname" value={formData.mother_fullname} onChange={handleChange} />
|
|
||||||
<TextField disabled={viewOnly} required fullWidth margin="dense" label="MSISDN" name="msisdn" value={formData.msisdn} onChange={handleChange} />
|
|
||||||
<TextField disabled={viewOnly} required fullWidth margin="dense" label="Address" name="address" value={formData.address} onChange={handleChange} />
|
|
||||||
<TextField disabled={viewOnly} required fullWidth margin="dense" label="Nationality" name="nationality" value={formData.nationality} onChange={handleChange} />
|
|
||||||
<TextField disabled={viewOnly} required fullWidth margin="dense" label="Date of Birth" name="date_birth" type="date" value={generateDate(formData.date_birth, null)} onChange={handleChange} InputLabelProps={{ shrink: true }} />
|
|
||||||
<FormControl required fullWidth margin="dense">
|
|
||||||
<InputLabel>Gender</InputLabel>
|
|
||||||
<Select required disabled={viewOnly} name="gender" value={formData.gender} onChange={handleChange}>
|
|
||||||
<MenuItem key={1} value="M">Male</MenuItem>
|
|
||||||
<MenuItem key={2} value="F">Female</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
<FormControl fullWidth margin="dense">
|
|
||||||
<InputLabel>Identity Type</InputLabel>
|
|
||||||
<Select disabled={viewOnly} name="identity_type" value={formData.identity_type} onChange={handleChange}>
|
|
||||||
<MenuItem key={1} value="eleitoral_id">Eleitoral ID</MenuItem>
|
|
||||||
<MenuItem key={2} value="bihete_de_identidade">Bihete de Identidade</MenuItem>
|
|
||||||
<MenuItem key={3} value="passport">Passport</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
{/* AGENT & PREMIUM DATA */}
|
|
||||||
<TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
|
|
||||||
<TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
|
|
||||||
<TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Merchant Address" name="merchantaddress" value={formData.merchantaddress} onChange={handleChange} />
|
|
||||||
<TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Longitude Merchant" name="longitudemerchant" value={formData.longitudemerchant} onChange={handleChange} />
|
|
||||||
<TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Latitude Merchant" name="latitudemerchant" value={formData.latitudemerchant} onChange={handleChange} />
|
|
||||||
{fileTextFile("File Selfie", formData.file_selfie, "file_selfie", handleChange)}
|
|
||||||
<img width={300} height={250} srcSet={formData.file_selfie} src={formData.file_selfie} alt={"file_selfie"} style={{borderRadius: 10}}/>
|
|
||||||
{fileTextFile("File Document", formData.file_document_id, "file_document_id", handleChange)}
|
|
||||||
<img width={300} height={250} srcSet={formData.file_document_id} src={formData.file_document_id} alt={"file_document_id"} style={{borderRadius: 10}}/>
|
|
||||||
{fileTextFile("File Document & Selfie", formData.file_document_id_selfie, "file_document_id_selfie", handleChange)}
|
|
||||||
<img width={300} height={250} srcSet={formData.file_document_id_selfie} src={formData.file_document_id_selfie} alt={"file_document_id_selfie"} style={{borderRadius: 10}}/>
|
|
||||||
{fileTextFile("File Commercial License", formData.file_commercial_license, "file_commercial_license", handleChange)}
|
|
||||||
<img width={300} height={250} srcSet={formData.file_commercial_license} src={formData.file_commercial_license} alt={"file_commercial_license"} style={{borderRadius: 10}}/>
|
|
||||||
{/* AGENT & PREMIUM DATA */}
|
|
||||||
|
|
||||||
{/* <TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} /> */}
|
|
||||||
<FormControl fullWidth margin="dense">
|
|
||||||
<InputLabel>Profession</InputLabel>
|
|
||||||
<Select disabled={viewOnly} name="profession" value={formData.profession} onChange={handleChange}>
|
|
||||||
{
|
|
||||||
profession ? profession.map((el: any) => (
|
|
||||||
<MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
|
|
||||||
)) : ""
|
|
||||||
}
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
{/* <TextField fullWidth margin="dense" label="Password" name="password" type="password" value={formData.password} onChange={handleChange} /> */}
|
|
||||||
{/* <TextField fullWidth margin="dense" label="PIN" name="pin" value={formData.pin} onChange={handleChange} /> */}
|
|
||||||
<FormControl fullWidth margin="dense">
|
|
||||||
<InputLabel>Status</InputLabel>
|
|
||||||
<Select disabled={viewOnly} name="status" value={formData.status} onChange={handleChange}>
|
|
||||||
<MenuItem key={1} value="Y">Active</MenuItem>
|
|
||||||
<MenuItem key={2} value="N">Inactive</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<FormControl fullWidth margin="dense">
|
|
||||||
<InputLabel>Municipio</InputLabel>
|
|
||||||
<Select disabled={viewOnly} name="municipio" value={formData.municipio} onChange={handleChange}>
|
|
||||||
{
|
|
||||||
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 || !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 || !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 || !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>
|
|
||||||
|
|
||||||
<Divider className="pt-7"/>
|
|
||||||
<Typography sx={{color:'grey'}}>Bank</Typography>
|
|
||||||
<FormControl fullWidth margin="dense">
|
|
||||||
<InputLabel>Bank Name</InputLabel>
|
|
||||||
<Select disabled={viewOnly} name="bank_name" value={formData.bank_name} onChange={handleChange}>
|
|
||||||
<MenuItem key={1} value="BNCTL">BNCTL</MenuItem>
|
|
||||||
<MenuItem key={2} value="BRI">BRI</MenuItem>
|
|
||||||
<MenuItem key={3} value="BNU">BNU</MenuItem>
|
|
||||||
<MenuItem key={4} value="Mandiri">Mandiri</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
<TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Account" name="bank_account" value={formData.bank_account} onChange={handleChange} />
|
|
||||||
<TextField disabled={viewOnly} fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} />
|
|
||||||
<Divider className="pt-7"/>
|
|
||||||
{/* {getAdmAccess(page, formData, handleClose, fetchCustomers)} */}
|
|
||||||
{ page === 'kyc' ? (
|
|
||||||
<>
|
|
||||||
<Typography sx={{color:'grey'}}>Approval</Typography>
|
|
||||||
<TextField fullWidth required={page === 'kyc'?true:false} margin="dense" label="Approval Description" name="description" value={formData.description} onChange={handleChange} />
|
|
||||||
</>
|
|
||||||
) : (<>
|
|
||||||
{getAdmAccess(page, formData, handleClose, fetchCustomers, viewOnly, setViewOnly)}
|
|
||||||
<Divider className="pt-7"/>
|
|
||||||
{formData.id ? showCustomerWallet(formData.id) : ""}
|
|
||||||
</>)
|
|
||||||
}
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
{
|
|
||||||
page === 'kyc' ? (
|
|
||||||
<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 && page === 'kyc' ? (
|
|
||||||
<Button onClick={onReject} color="warning" variant="contained">Reject</Button>
|
|
||||||
) : ('')
|
|
||||||
}
|
|
||||||
<Button onClick={onSubmit} color="primary" variant="contained">
|
|
||||||
{ formData.id ? (formData.isneedapproval == 1 && page === 'kyc' ? (`Edit & Approve`) : (`Edit`)) : ("Create") }
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CustomerDialog;
|
|
||||||
|
|
||||||
function fileTextFile(label: string, value: any, name: string, handleChange: any) {
|
|
||||||
return (
|
|
||||||
<TextField
|
|
||||||
margin="dense"
|
|
||||||
label={label}
|
|
||||||
variant="outlined"
|
|
||||||
fullWidth
|
|
||||||
value={value}
|
|
||||||
placeholder="Choose a file..."
|
|
||||||
InputProps={{
|
|
||||||
readOnly: true,
|
|
||||||
endAdornment: (
|
|
||||||
<InputAdornment position="end">
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="file-upload"
|
|
||||||
// style={{ display: "none" }}
|
|
||||||
onChange={handleChange}
|
|
||||||
name={name}
|
|
||||||
/>
|
|
||||||
{/* <label htmlFor="file-upload">
|
|
||||||
<Button
|
|
||||||
component="span"
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
startIcon={<UploadFileIcon />}
|
|
||||||
>
|
|
||||||
Browse
|
|
||||||
</Button>
|
|
||||||
</label> */}
|
|
||||||
</InputAdornment>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
// ACCESS ADM
|
|
||||||
function getAdmAccess(page: string, data: any, handleClose: any, fetchCustomers: any, viewOnly: any, setViewOnly: any) {
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false);
|
|
||||||
const [dialogType, setDialogType] = useState('');
|
|
||||||
const [changeGroup, setChangeGroup] = useState('');
|
|
||||||
const [changeGroupD, setChangeGroupD] = useState(false);
|
|
||||||
const [groups, setGroups] = useState([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchGroups()
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const fetchGroups = async () =>{
|
|
||||||
try {
|
|
||||||
let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
|
|
||||||
params: {
|
|
||||||
limit: 50,
|
|
||||||
page: 1,
|
|
||||||
with_deleted: false,
|
|
||||||
order_field: 'name',
|
|
||||||
order_direction: 'ASC',
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setGroups(getGroups.data.data.list);
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error(error.message);
|
|
||||||
toast.error(error.message)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleYes = async () => {
|
|
||||||
try {
|
|
||||||
if (dialogType === "update status") {
|
|
||||||
let statusNext = getPinStatus(data.status).res;
|
|
||||||
if (statusNext) await axios.put(`${BASE_URL_CUSTOMER}/customer/statuspin`, { customerid: data.id, status: statusNext })
|
|
||||||
else toast.error("Handle Active/Suspend only")
|
|
||||||
toast.success("Success Update Status")
|
|
||||||
}
|
|
||||||
if (dialogType === "reset pin") {
|
|
||||||
if (data.id) await axios.post(`${BASE_URL_CUSTOMER}/customer/resetpin`, { customerid: data.id })
|
|
||||||
else throw({ message: 'data.id not found' })
|
|
||||||
toast.success("Pin will send to customer MSISDN")
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
toast.error(error.message)
|
|
||||||
} finally {
|
|
||||||
setDialogOpen(false)
|
|
||||||
handleClose()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function buttonStatus() {
|
|
||||||
setDialogType('update status')
|
|
||||||
setDialogOpen(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
function buttonResetPin() {
|
|
||||||
setDialogType('reset pin')
|
|
||||||
setDialogOpen(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
async function buttonChangeGroup() {
|
|
||||||
try {
|
|
||||||
let dataObj = {
|
|
||||||
customerid: data.id,
|
|
||||||
destination_group: changeGroup
|
|
||||||
}
|
|
||||||
if (data.group_id === changeGroup) return toast.warning(`You update same group as the exist customer group`)
|
|
||||||
if (dataObj.customerid && dataObj.destination_group) {
|
|
||||||
await axios.post(`${BASE_URL_CUSTOMER}/customer/change-group`, dataObj)
|
|
||||||
}
|
|
||||||
await fetchCustomers()
|
|
||||||
toast.success('Success Change group')
|
|
||||||
} catch (error: any) {
|
|
||||||
console.log(error);
|
|
||||||
toast.error(error.message)
|
|
||||||
} finally {
|
|
||||||
await fetchCustomers()
|
|
||||||
setChangeGroupD(false)
|
|
||||||
handleClose()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function openChangeGroupDialog() {
|
|
||||||
setChangeGroup(data.group_id);
|
|
||||||
setChangeGroupD(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (page !== "kyc") {
|
|
||||||
return (
|
|
||||||
<Box p={3} boxShadow={3} borderRadius={2} bgcolor="white">
|
|
||||||
<Typography variant="h6" gutterBottom>Access Administration</Typography>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid item xs={6} container direction="column" spacing={2}>
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="body2">Pin Status : {getPinStatus(data.status).msg}</Typography>
|
|
||||||
<Button onClick={() => buttonStatus()} variant="contained" color="primary">{getPinStatus(data.status).btn}</Button>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="body2">Reset PIN</Typography>
|
|
||||||
<Button onClick={() => buttonResetPin()} variant="contained" color="primary">Reset PIN</Button>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6} container direction="column" spacing={2}>
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="body2">Change Group</Typography>
|
|
||||||
<Button onClick={() => openChangeGroupDialog()} variant="contained" color="primary">Change Group</Button>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="body2">Edit Member</Typography>
|
|
||||||
{/* <Button variant="contained" color="primary">Edit Member</Button> */}
|
|
||||||
<Button onClick={() => viewOnly ? setViewOnly(false) : setViewOnly(true)} variant="contained">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
<Dialog open={changeGroupD} onClose={() => setChangeGroupD(false)} fullWidth>
|
|
||||||
<Grid container padding={3}>
|
|
||||||
<Typography variant="h6" gutterBottom color="orange">Are you sure to change customer Group?</Typography>
|
|
||||||
<FormControl fullWidth margin="dense">
|
|
||||||
<Typography gutterBottom>Destination Group</Typography>
|
|
||||||
<Select name="groups" value={changeGroup} onChange={(e: any) => setChangeGroup(e.target.value)}>
|
|
||||||
{
|
|
||||||
groups ? groups.map((el: any) => (
|
|
||||||
<MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
|
|
||||||
)) : ""
|
|
||||||
}
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
</Grid>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={() => setChangeGroupD(false)} color="secondary">
|
|
||||||
No
|
|
||||||
</Button>
|
|
||||||
<Button onClick={buttonChangeGroup} color="primary">
|
|
||||||
Yes
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
<ConfirmDialog
|
|
||||||
open={dialogOpen}
|
|
||||||
onClose={() => setDialogOpen(false)}
|
|
||||||
title="Confirm Action"
|
|
||||||
content={`Are you sure you want to ${dialogType}?`}
|
|
||||||
onYes={handleYes}
|
|
||||||
onNo={() => setDialogOpen(false)}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
return ('')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getPinStatus(status: string) {
|
|
||||||
if (status === "Y") return {
|
|
||||||
msg: 'Active',
|
|
||||||
btn: 'Block PIN',
|
|
||||||
res: 'Block'
|
|
||||||
};
|
|
||||||
if (status === "N") return {
|
|
||||||
msg: 'Not Active',
|
|
||||||
btn: 'Activate PIN',
|
|
||||||
res: null
|
|
||||||
};
|
|
||||||
if (status === "P") return {
|
|
||||||
msg: 'Suspend PIN',
|
|
||||||
btn: 'Unblock PIN',
|
|
||||||
res: 'UnBlock'
|
|
||||||
};
|
|
||||||
if (status === "O") return {
|
|
||||||
msg: 'Suspend OTP',
|
|
||||||
btn: 'Unblock OTP',
|
|
||||||
res: null
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
msg: "None",
|
|
||||||
btn: 'No status found',
|
|
||||||
res: null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// CUSTOMER WALLET
|
|
||||||
function showCustomerWallet(customerid: any) {
|
|
||||||
const [customerWallet, setCustomerWallet] = useState([]);
|
|
||||||
if (!customerid) return ''
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchCustomerWallet()
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
async function fetchCustomerWallet() {
|
|
||||||
try {
|
|
||||||
let getCustWallet = await axios.get(`${BASE_URL_CUSTOMER}/customer/wallet`, { params: { customerid: customerid }});
|
|
||||||
setCustomerWallet(getCustWallet.data.data.wallets)
|
|
||||||
} catch (error: any) {
|
|
||||||
toast.error(error.message)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box p={3} boxShadow={3} borderRadius={2} bgcolor="white">
|
|
||||||
<Typography variant="h6" gutterBottom>Wallet Member</Typography>
|
|
||||||
<Grid>
|
|
||||||
<List>
|
|
||||||
{customerWallet.length ? (customerWallet.map((item:any, index:any) => (
|
|
||||||
<React.Fragment key={item.id}>
|
|
||||||
<ListItem
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
px: 2,
|
|
||||||
py: 1.5,
|
|
||||||
bgcolor: index % 2 === 0 ? 'grey.50' : 'background.paper',
|
|
||||||
borderRadius: 2,
|
|
||||||
'&:hover': {
|
|
||||||
bgcolor: 'grey.100',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box>
|
|
||||||
<Typography variant="subtitle2" color="text.secondary">Name</Typography>
|
|
||||||
<Typography variant="body1" fontWeight={500}>
|
|
||||||
{item.wallet.name}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box>
|
|
||||||
<Typography variant="subtitle2" color="text.secondary">Description</Typography>
|
|
||||||
<Typography variant="body1">{item.wallet.description}</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box>
|
|
||||||
<Typography variant="subtitle2" color="text.secondary">Balance</Typography>
|
|
||||||
<Typography variant="body1">{item.amount}</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box>
|
|
||||||
<Typography variant="subtitle2" color="text.secondary">Transaction Today</Typography>
|
|
||||||
<Typography variant="body1">{item.transaction_number_today}</Typography>
|
|
||||||
</Box>
|
|
||||||
</ListItem>
|
|
||||||
{index < customerWallet.length - 1 && <Divider sx={{ my: 1 }} />}
|
|
||||||
</React.Fragment>
|
|
||||||
))): "No wallet"}
|
|
||||||
</List>
|
|
||||||
</Grid>
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -40,6 +40,11 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
|||||||
const [postoAdm, setPostoAdm] = useState([]);
|
const [postoAdm, setPostoAdm] = useState([]);
|
||||||
const [sucos, setSucos] = useState<any>([]);
|
const [sucos, setSucos] = useState<any>([]);
|
||||||
const [groups, setGroups] = useState([]);
|
const [groups, setGroups] = useState([]);
|
||||||
|
const [identity_type] = useState([
|
||||||
|
{ id: 'eleitoral_id', name: 'Eleitoral ID' },
|
||||||
|
{ id: 'bihete_de_identidade', name: 'Bihete de Identidade' },
|
||||||
|
{ id: 'passport', name: 'Passport' },
|
||||||
|
]);
|
||||||
const [genders] = useState([ { name: 'Male',id: 'M' }, { name: 'Female',id: 'F' }])
|
const [genders] = useState([ { name: 'Male',id: 'M' }, { name: 'Female',id: 'F' }])
|
||||||
const [previewImg, setPreviewImg] = useState({
|
const [previewImg, setPreviewImg] = useState({
|
||||||
status: false,
|
status: false,
|
||||||
@ -215,7 +220,9 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
|||||||
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
|
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
|
||||||
{/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */}
|
{/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */}
|
||||||
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', true, viewOnly): ''}
|
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', true, viewOnly): ''}
|
||||||
|
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, identity_type, 'identity_type', 'Identity Type', false, false): ''}
|
||||||
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Identity Number', 'identity_number', 'text', false, viewOnly): ''}
|
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Identity Number', 'identity_number', 'text', false, viewOnly): ''}
|
||||||
|
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Address', 'address', 'text', true, viewOnly): ''}
|
||||||
<div className="bg-white space-y-6">
|
<div className="bg-white space-y-6">
|
||||||
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, profession, 'profession', 'Profession', false, false): ''}
|
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, profession, 'profession', 'Profession', false, false): ''}
|
||||||
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, municipios, 'municipio_id', 'Municipio', false, false): ''}
|
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, municipios, 'municipio_id', 'Municipio', false, false): ''}
|
||||||
@ -238,7 +245,6 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
|||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Address', 'address', 'text', true, viewOnly): ''}
|
|
||||||
<div className="bg-white p-6 rounded-md shadow-md space-y-6">
|
<div className="bg-white p-6 rounded-md shadow-md space-y-6">
|
||||||
<h2 className="text-lg font-semibold">Bank Information</h2>
|
<h2 className="text-lg font-semibold">Bank Information</h2>
|
||||||
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, banks, 'bank_name', 'Bank Name', false, false): ''}
|
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, banks, 'bank_name', 'Bank Name', false, false): ''}
|
||||||
|
|||||||
Reference in New Issue
Block a user