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

fix member

Browse Source
This commit is contained in:
unknown
2025-04-17 22:44:22 +07:00
parent f2ab346a74
commit 47db6b8a4d
2 changed files with 84 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -175,7 +175,8 @@ const ManageMembers = () => {
toast.success('Success Create Member. PIN sent to email'); toast.success('Success Create Member. PIN sent to email');
} }
} catch (error: any) { } catch (error: any) {
toast.error(error.message); if (error?.response?.data?.message) toast.error(error?.response?.data?.message)
else toast.error(error.message);
} finally { } finally {
setDialogOpen(false); setDialogOpen(false);
closeDialog(); closeDialog();

117
src/pages/members/manage-members/blocks/DetailMember.tsx
View File

@ -41,6 +41,10 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
const [sucos, setSucos] = useState<any>([]); const [sucos, setSucos] = useState<any>([]);
const [groups, setGroups] = useState([]); const [groups, setGroups] = useState([]);
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({
status: false,
img: ''
});
const [banks] = useState([ const [banks] = useState([
{ name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'Mandiri',id: 'Mandiri' } { name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'Mandiri',id: 'Mandiri' }
]) ])
@ -203,36 +207,44 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
{/* {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''} */} {/* {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''} */}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, dialogType==='create'?false:true): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, dialogType==='create'?false:true): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'Photo', 'photouser'): ''} {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'Photo', 'photouser', previewImg, setPreviewImg): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, genders, 'gender', 'Gender', true, false): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, genders, 'gender', 'Gender', true, false): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, dialogType === "update"||false): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, dialogType === "update"||false): ''}
{(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") ? 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, postoAdm, 'posto_adms_id', 'Posto', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, sucos, 'suco_id', 'Suco', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, aldeias, 'aldeia_id', 'Aldeia', false, false): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Nationality', 'nationality', 'text', true, viewOnly): ''}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"></label>
<ul className="">
{nationality.map((item: any, index) => (
<li key={index} value={item.name}
onClick={() => handleChange({target:{name: 'nationality', value: item.name }})}
className="bg-gray-100 px-4 py-2 rounded hover:bg-gray-200 cursor-default transition">
{item.name}
</li>
))}
{formData.nationality && nationality.length === 0 && (
<li className="text-gray-500">No results found.</li>
)}
</ul>
</div>
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Address', 'address', 'text', true, viewOnly): ''}
{(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") ? generateInput(formData, handleChange, 'Identity Number', 'identity_number', 'text', false, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Identity Number', 'identity_number', 'text', false, viewOnly): ''}
<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, municipios, 'municipio_id', 'Municipio', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, postoAdm, 'posto_adms_id', 'Posto', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, sucos, 'suco_id', 'Suco', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, aldeias, 'aldeia_id', 'Aldeia', false, false): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Nationality', 'nationality', 'text', true, viewOnly): ''}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"></label>
<ul className="">
{nationality.map((item: any, index) => (
<li key={index} value={item.name}
onClick={() => handleChange({target:{name: 'nationality', value: item.name }})}
className="bg-gray-100 px-4 py-2 rounded hover:bg-gray-200 cursor-default transition">
{item.name}
</li>
))}
{formData.nationality && nationality.length === 0 && (
<li className="text-gray-500">No results found.</li>
)}
</ul>
</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">
<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") ? generateInput(formData, handleChange, 'Bank Account', 'bank_account', 'text', false, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'iBank Number', 'ibank_number', 'text', false, viewOnly): ''}
</div>
</div>
<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">Agent Information</h2> <h2 className="text-lg font-semibold">Agent Information</h2>
@ -241,18 +253,13 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Merchant Address', 'merchantaddress', 'text', false, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Merchant Address', 'merchantaddress', 'text', false, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Longitude Merchant', 'longitudemerchant', 'text', false, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Longitude Merchant', 'longitudemerchant', 'text', false, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Latitude Merchant', 'latitudemerchant', 'text', false, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Latitude Merchant', 'latitudemerchant', 'text', false, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Selfie', 'file_selfie'): ''} {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Selfie', 'file_selfie', previewImg, setPreviewImg): ''}
{(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document', 'file_document_id'): ''} {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document', 'file_document_id', previewImg, setPreviewImg): ''}
{(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document & Selfie', 'file_document_id_selfie'): ''} {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document & Selfie', 'file_document_id_selfie', previewImg, setPreviewImg): ''}
{(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Commercial License', 'file_commercial_license'): ''} {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Commercial License', 'file_commercial_license', previewImg, setPreviewImg): ''}
</div> </div>
<div className="bg-white p-6 rounded-md shadow-md space-y-6">
<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") ? generateInput(formData, handleChange, 'Bank Account', 'bank_account', 'text', false, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'iBank Number', 'ibank_number', 'text', false, viewOnly): ''}
</div>
{(formData.id&&(!page||formData.destinationGroup === "Premium")) ? generateInput(formData, handleChange, 'Approval Premium Description', 'approval_description_premium', 'text', false, viewOnly): ''} {(formData.id&&(!page||formData.destinationGroup === "Premium")) ? generateInput(formData, handleChange, 'Approval Premium Description', 'approval_description_premium', 'text', false, viewOnly): ''}
{(formData.id&&(!page||formData.destinationGroup === "Agent")) ? generateInput(formData, handleChange, 'Approval Agent Description', 'approval_description_agent', 'text', false, viewOnly): ''} {(formData.id&&(!page||formData.destinationGroup === "Agent")) ? generateInput(formData, handleChange, 'Approval Agent Description', 'approval_description_agent', 'text', false, viewOnly): ''}
@ -340,7 +347,7 @@ function generateList(formData:any, handleChange: any, list:any, name:string, la
} }
// ON DEV (UPDATENYA) // ON DEV (UPDATENYA)
function generateImage(formData:any, handleChange:any, label:string, name:string) { function generateImage(formData:any, handleChange:any, label:string, name:string, previewImg: any, setPreviewImg:any) {
const imagePreview = (file:any) => { const imagePreview = (file:any) => {
if (file && file.type && file.type.startsWith('image/')) { if (file && file.type && file.type.startsWith('image/')) {
const previewURL = URL.createObjectURL(file); const previewURL = URL.createObjectURL(file);
@ -349,8 +356,21 @@ function generateImage(formData:any, handleChange:any, label:string, name:string
return file return file
}; };
function handlePrevImg(par: boolean) {
if (par) setPreviewImg({ status: true, img: ''})
if (!par) setPreviewImg({ status: false, img: '' })
}
function onClickImg(img: any) {
setPreviewImg({ status: true, img })
}
return ( return (
<> <>
{previewImg.status ? (
<PreviewImage previewImgDialog={previewImg.status} handlePreviewImgDialog={handlePrevImg}
modalImage={previewImg.img}/>
):''}
<div className="flex items-center justify-between w-full max-w-xl"> <div className="flex items-center justify-between w-full max-w-xl">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
{label}<span className="text-red-500"></span> {label}<span className="text-red-500"></span>
@ -358,7 +378,8 @@ function generateImage(formData:any, handleChange:any, label:string, name:string
<div className="flex items-center space-x-4 w-3/4 justify-end"> <div className="flex items-center space-x-4 w-3/4 justify-end">
{ formData[name] ? ( { formData[name] ? (
<div className="border-2 border-dashed border-red-300 rounded-md p-2"> <div className="border-2 border-dashed border-red-300 rounded-md p-2">
<img width={300} height={250} srcSet={imagePreview(formData[name])} src={imagePreview(formData[name])} alt={name} style={{borderRadius: 10}}/> <img width={300} height={250} srcSet={imagePreview(formData[name])} src={imagePreview(formData[name])}
alt={name} style={{borderRadius: 10, cursor: 'pointer' }} onClick={() => onClickImg(imagePreview(formData[name]))}/>
{/* <img width={300} height={250} srcSet={formData[name]} src={formData[name]} alt={name} style={{borderRadius: 10}}/> */} {/* <img width={300} height={250} srcSet={formData[name]} src={formData[name]} alt={name} style={{borderRadius: 10}}/> */}
</div> </div>
) : (<span>No Data</span>)} ) : (<span>No Data</span>)}
@ -371,3 +392,29 @@ function generateImage(formData:any, handleChange:any, label:string, name:string
</> </>
) )
} }
function PreviewImage({previewImgDialog, handlePreviewImgDialog, modalImage}:any) {
return (
<>
<Dialog open={previewImgDialog} onOpenChange={(open) => handlePreviewImgDialog(open)}>
<DialogContent className="">
<DialogTitle aria-describedby={''}></DialogTitle>
<DialogBody>
<button
onClick={() => handlePreviewImgDialog(false)}
className="absolute top-2 right-2 text-white bg-red-600 hover:bg-red-800 rounded-full px-3 py-1 text-xl font-bold"
>
&times;
</button>
<img
src={modalImage}
alt="Preview"
className="max-w-full max-h-[80vh] rounded-lg"
/>
</DialogBody>
</DialogContent>
</Dialog>
</>
)
}