fix detail member
This commit is contained in:
unknown
248
src/pages/members/manage-members/blocks/AdmAccess.tsx
Normal file
248
src/pages/members/manage-members/blocks/AdmAccess.tsx
Normal file
@ -0,0 +1,248 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Select,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectValue
|
||||
} from '@/components/ui/select';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import ConfirmDialog from '@/components/confirm';
|
||||
const BASE_URL_CUSTOMER = apiConfig.service_customer;
|
||||
|
||||
// ACCESS ADM
|
||||
export default function AdmAccess(
|
||||
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) {
|
||||
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');
|
||||
await fetchCustomers();
|
||||
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' };
|
||||
await fetchCustomers();
|
||||
toast.success('Pin will send to customer MSISDN');
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error(error.message);
|
||||
} finally {
|
||||
setDialogOpen(false);
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
|
||||
function buttonStatus(e: any) {
|
||||
e.preventDefault();
|
||||
setDialogType('update status');
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
function buttonResetPin(e: any) {
|
||||
e.preventDefault();
|
||||
setDialogType('reset pin');
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
async function buttonChangeGroup() {
|
||||
try {
|
||||
let dataObj = {
|
||||
customerid: data.id,
|
||||
destination_group: changeGroup
|
||||
};
|
||||
if (data.group_id === changeGroup)
|
||||
throw { message: `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);
|
||||
}
|
||||
toast.success('Success Change group');
|
||||
await fetchCustomers();
|
||||
setChangeGroupD(false);
|
||||
handleClose();
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
toast.error(error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function openChangeGroupDialog(e: any) {
|
||||
e.preventDefault();
|
||||
setChangeGroup(data.group_id);
|
||||
setChangeGroupD(true);
|
||||
}
|
||||
|
||||
function btnConfirmDialog(status: boolean) {
|
||||
setDialogOpen(status);
|
||||
}
|
||||
|
||||
if (page !== 'kyc') {
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-md shadow-md space-y-6">
|
||||
<h2 className="text-lg font-semibold">Access Administration</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Left Side */}
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm">Pin Status: {getPinStatus(data.status).msg}</p>
|
||||
<Button variant="default" onClick={(e) => buttonStatus(e)}>
|
||||
{getPinStatus(data.status).btn}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm">Reset PIN</p>
|
||||
<Button variant="default" onClick={(e) => buttonResetPin(e)}>
|
||||
Reset PIN
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side */}
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm">Change Group</p>
|
||||
<Button variant="default" onClick={(e) => openChangeGroupDialog(e)}>
|
||||
Change Group
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm">Edit Member</p>
|
||||
<Button variant="default" onClick={() => setViewOnly(!viewOnly)}>
|
||||
{viewOnly ? 'Open Edit' : 'Close Edit'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Change Group Dialog */}
|
||||
<Dialog open={changeGroupD} onOpenChange={setChangeGroupD}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-orange-500">
|
||||
Are you sure to change customer Group?
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-3 p-5">
|
||||
<p className="text-sm font-medium">Destination Group</p>
|
||||
<Select value={changeGroup} onValueChange={setChangeGroup}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select group" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{groups?.map((el: any) => (
|
||||
<SelectItem key={el.id} value={el.id}>
|
||||
{el.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setChangeGroupD(false)}>
|
||||
No
|
||||
</Button>
|
||||
<Button onClick={buttonChangeGroup}>Yes</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<ConfirmDialog
|
||||
open={dialogOpen}
|
||||
// onClose={() => btnConfirmDialog(false)}
|
||||
onOpenChange={() => setDialogOpen(false)}
|
||||
title="Confirm Action"
|
||||
content={`Are you sure you want to ${dialogType}?`}
|
||||
onYes={handleYes}
|
||||
onNo={() => btnConfirmDialog(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} 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
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user