diff --git a/src/components/confirm.tsx b/src/components/confirm.tsx index b3a5596..67e18e9 100644 --- a/src/components/confirm.tsx +++ b/src/components/confirm.tsx @@ -1,23 +1,21 @@ -import React from "react"; -import Dialog from "@mui/material/Dialog"; -import DialogActions from "@mui/material/DialogActions"; -import DialogContent from "@mui/material/DialogContent"; -import DialogTitle from "@mui/material/DialogTitle"; import Button from "@mui/material/Button"; +import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogDescription, DialogBody } from '@/components/ui/dialog'; -const ConfirmDialog = ({ open, onClose, title, content, onYes, onNo }: any) => { +const ConfirmDialog = ({ open, onClose, title, content, onYes, onNo, onOpenChange }: any) => { return ( - - {title && {title}} - {content && {content}} - - - - + + + + {title && {title}} + + {content && {content}} + + + + + + + ); }; diff --git a/src/components/loaders/LoaderTransparant.tsx b/src/components/loaders/LoaderTransparant.tsx new file mode 100644 index 0000000..b1eb099 --- /dev/null +++ b/src/components/loaders/LoaderTransparant.tsx @@ -0,0 +1,16 @@ +import { toAbsoluteUrl } from '@/utils'; + +const LoaderTransparant = () => { + return ( +
+ logo +
Loading...
+
+ ); +}; + +export { LoaderTransparant }; diff --git a/src/components/loaders/index.ts b/src/components/loaders/index.ts index 1d1dad1..1b8a61e 100644 --- a/src/components/loaders/index.ts +++ b/src/components/loaders/index.ts @@ -1,3 +1,4 @@ export * from './ContentLoader'; export * from './ProgressBarLoader'; export * from './ScreenLoader'; +export * from './LoaderTransparant'; diff --git a/src/config/api.config.ts b/src/config/api.config.ts index 535dc2a..2c6cef5 100644 --- a/src/config/api.config.ts +++ b/src/config/api.config.ts @@ -4,7 +4,8 @@ interface apiConfigProps { service_master_data: string; service_transaction: string; service_wallet: string; - transaction: string + transaction: string; + nationality: string; } const API_URL = import.meta.env.VITE_APP_API_URL; @@ -16,7 +17,9 @@ const apiConfig: apiConfigProps = { service_master_data: `${API_URL}/t`, service_transaction: `${API_URL}/tt`, service_wallet: `${API_URL}/w`, - transaction: `${API_URL}/x` + transaction: `${API_URL}/x`, + nationality: `https://tpay.shiblysolution.id/cms/api/mobile/list-country/ +` }; export { apiConfig }; diff --git a/src/pages/members/kyc/Kyc.tsx b/src/pages/members/kyc/Kyc.tsx index 3aa6c6b..452b632 100644 --- a/src/pages/members/kyc/Kyc.tsx +++ b/src/pages/members/kyc/Kyc.tsx @@ -5,12 +5,15 @@ import React, { createContext, useContext, useState, useEffect } from 'react'; import { ManageKycContextProvider } from './hooks'; import { columns, 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'; const BASE_URL = apiConfig.service_customer; -import CustomerDialog from '../manage-members/CustomerDetailModal'; +const BASE_URL_MASTER_DATA = apiConfig.service_master_data; +// import CustomerDialog from '../manage-members/CustomerDetailModal'; +import DetailMember from '../manage-members/blocks/DetailMember'; import { Breadcrumbs, Link } from '@mui/material'; import { Helmet } from 'react-helmet'; @@ -37,6 +40,7 @@ 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(''); @@ -44,12 +48,12 @@ const Kyc = () => { const { getUser } = useAuthContext(); useEffect(() => { - fetchGroups(); + fetchCustomers(); }, []); - async function fetchGroups() { + async function fetchCustomers() { try { - let groups = await axios.get(`${BASE_URL}/customer/list`, { + let customers = await axios.get(`${BASE_URL}/customer/list`, { params: { limit: 10, page: 1, @@ -60,12 +64,22 @@ const Kyc = () => { } }); let temp = 1; - let resMembers = groups.data.data.list.map((el: any) => { + 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: 50, + 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); @@ -90,6 +104,7 @@ const Kyc = () => { } const handleYes = async () => { + setLoading(true) const userLogin: any = await getUser(); const updateData: any = member; const customerId = member.id; @@ -134,17 +149,24 @@ const Kyc = () => { description: description }); } - await fetchGroups(); + await fetchCustomers(); setDialogOpen(false); setIsDialogOpen(false); - toast.success('Success Update Kyc Member'); + toast.success(`Success Update & ${dialogType} Kyc Member`); } catch (error: any) { setDialogOpen(false); setIsDialogOpen(false); toast.error(error.message); + setLoading(false) } }; + function setShowAddDialog(el: any) { + setIsDialogOpen(el) + } + + if (loading) return ; + return ( <> @@ -161,12 +183,23 @@ const Kyc = () => { onNo={() => setDialogOpen(false)} /> { member.id ? ( - + ): ""} diff --git a/src/pages/members/manage-members/CustomerDetailModal.tsx b/src/pages/members/manage-members/CustomerDetailModal.tsx index 152e749..e7c2110 100644 --- a/src/pages/members/manage-members/CustomerDetailModal.tsx +++ b/src/pages/members/manage-members/CustomerDetailModal.tsx @@ -295,8 +295,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat {/* {getAdmAccess(page, formData, handleClose, fetchCustomers)} */} - { - page === 'kyc' ? ( + { page === 'kyc' ? ( <> Approval @@ -589,23 +588,21 @@ function showCustomerWallet(customerid: any) { }} > - - Name - + Name {item.wallet.name} - - Description - + Description {item.wallet.description} - - Transaction Today - + Balance + {item.amount} + + + Transaction Today {item.transaction_number_today} diff --git a/src/pages/members/manage-members/ManageMembers.tsx b/src/pages/members/manage-members/ManageMembers.tsx index dc82642..b4ebdc7 100644 --- a/src/pages/members/manage-members/ManageMembers.tsx +++ b/src/pages/members/manage-members/ManageMembers.tsx @@ -3,20 +3,22 @@ import { apiConfig } from '@/config/api.config'; import { columns, Members, initialMember } from './Columns'; import { useState, useEffect } from 'react'; import axios from 'axios'; -import CustomerDialog from './CustomerDetailModal'; +// import CustomerDialog from './CustomerDetailModal'; +import DetailMember from './blocks/DetailMember'; import ConfirmDialog from '@/components/confirm'; import { useAuthContext } from '@/auth'; -import { ScreenLoader } from '@/components'; +import { LoaderTransparant } from '@/components'; import { toast } from 'sonner'; import { Breadcrumbs, Link } from '@mui/material'; +const BASE_URL_MASTER_DATA = apiConfig.service_master_data; const BASE_URL = apiConfig.service_customer; import { Helmet } from 'react-helmet'; - const ManageMembers = () => { const [loading, setLoading] = useState(false); const [members, setMembers] = useState([]); const [selectedMember, setSelectedMember] = useState(''); const [member, setMember] = useState(initialMember); + const [profession, setProfession] = useState([]); const [isDialogOpen, setIsDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false); const [dialogType, setDialogType] = useState(''); @@ -34,7 +36,7 @@ const ManageMembers = () => { async function fetchCustomers() { try { - let groups = await axios.get(`${BASE_URL}/customer/list`, { + let customers = await axios.get(`${BASE_URL}/customer/list`, { params: { limit: 20, page: 1, @@ -44,12 +46,22 @@ const ManageMembers = () => { } }); let temp = 1; - let resMembers = groups.data.data.list.map((el: any) => { + 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: 50, + 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); @@ -75,6 +87,7 @@ const ManageMembers = () => { } const handleYes = async () => { + setLoading(true) const userLogin: any = await getUser(); const updateData: any = member; updateData.updated_by = userLogin.data ? userLogin.data.id : ''; @@ -113,18 +126,22 @@ const ManageMembers = () => { } }); // if (dialogType === 'create') await axios.post(`${BASE_URL}/customers/create`, member) - await fetchCustomers(); - setDialogOpen(false); - setIsDialogOpen(false); toast.success('Success Update Member'); } catch (error: any) { - setDialogOpen(false); - setIsDialogOpen(false); toast.error(error.message); + } finally { + setDialogOpen(false); + closeDialog(); + await fetchCustomers(); + setLoading(false) } }; - if (loading) return ; + function setShowAddDialog(el: any) { + setIsDialogOpen(el) + } + + if (loading) return ; return ( <> @@ -141,14 +158,23 @@ const ManageMembers = () => { onYes={handleYes} onNo={() => setDialogOpen(false)} /> - { member.id ? ( - + { member.id !== '' ? ( + // + ): ""}

Manage Members

diff --git a/src/pages/members/manage-members/blocks/AdmAccess.tsx b/src/pages/members/manage-members/blocks/AdmAccess.tsx new file mode 100644 index 0000000..735e832 --- /dev/null +++ b/src/pages/members/manage-members/blocks/AdmAccess.tsx @@ -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 ( +
+

Access Administration

+ +
+ {/* Left Side */} +
+
+

Pin Status: {getPinStatus(data.status).msg}

+ +
+
+

Reset PIN

+ +
+
+ + {/* Right Side */} +
+
+

Change Group

+ +
+
+

Edit Member

+ +
+
+
+ + {/* Change Group Dialog */} + + + + + Are you sure to change customer Group? + + + +
+

Destination Group

+ +
+ + + + + + + + btnConfirmDialog(false)} + onOpenChange={() => setDialogOpen(false)} + title="Confirm Action" + content={`Are you sure you want to ${dialogType}?`} + onYes={handleYes} + onNo={() => btnConfirmDialog(false)} + /> +
+ ); + } 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 + }; +} diff --git a/src/pages/members/manage-members/blocks/CustomerWallet.tsx b/src/pages/members/manage-members/blocks/CustomerWallet.tsx new file mode 100644 index 0000000..11d4bbc --- /dev/null +++ b/src/pages/members/manage-members/blocks/CustomerWallet.tsx @@ -0,0 +1,69 @@ +import React, { useState, useEffect } from 'react'; +import axios from 'axios'; +import { Card } from '@/components/ui/card'; +import { Separator } from '@/components/ui/separator'; +import { apiConfig } from '@/config/api.config'; +import { toast } from 'sonner'; +const BASE_URL_CUSTOMER = apiConfig.service_customer; + +export default function CustomerWallet(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.data); + } catch (error: any) { + // toast.error(error.message); + toast.error(`Wallet Not Found`); + } + } + + return ( +
+

Wallet Member

+ + {customerWallet.length ? ( +
+ + + + + + + + + + + + {customerWallet.map((item:any, index) => ( + + + + + + + + ))} + +
NoNameBalanceMonth LimitCredit Limit
{index+1}{item.wallet}{item.amount}{item.monthly_limit}{item.credit_limit}
+
+ ) : ( +

No wallet

+ )} + +
+ ); +} diff --git a/src/pages/members/manage-members/blocks/DetailMember.tsx b/src/pages/members/manage-members/blocks/DetailMember.tsx new file mode 100644 index 0000000..2cb1950 --- /dev/null +++ b/src/pages/members/manage-members/blocks/DetailMember.tsx @@ -0,0 +1,364 @@ +import { apiConfig } from '@/config/api.config'; +import { Alert, useDataGrid } from '@/components'; +import { useCallApi } from '@/hooks'; +import { getAuth } from '@/auth'; +import axios from 'axios'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { toast } from 'sonner'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; +const BASE_URL_MASTER_DATA = apiConfig.service_master_data; +const URL_NATIONALITY = apiConfig.nationality; +import { initialMember } from "../Columns"; +import AdmAccess from './AdmAccess'; +import CustomerWallet from './CustomerWallet'; + +const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialData, handleReject, page, fetchCustomers, + handleClose, profession + }: any) => { + const [formData, setFormData] = useState(initialData || initialMember); + const [viewOnly, setViewOnly] = useState(false); + const [nationality, setNationality] = useState([]); + const [municipios, setMunicipios] = useState([]); + const [aldeias, setAldeias] = useState([]); + const [postoAdm, setPostoAdm] = useState([]); + const [sucos, setSucos] = useState([]); + const [genders] = useState([ { name: 'Male',id: 'M' }, { name: 'Female',id: 'F' }]) + const [status] = useState([ + { name: 'Active',id: 'Y' }, { name: 'Inactive',id: 'N' }, { name: 'Suspend PIN',id: 'P' }, { name: 'Suspend OTP',id: 'O' } + ]) + const [banks] = useState([ + { name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'Mandiri',id: 'Mandiri' } + ]) + const parentRef = useRef(null); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + + useEffect(() => { + setFormData(initialData || {}); + // fetchMasterData() + }, [initialData]); + + const handleChange = async (e: any) => { + const { name, value } = e.target; + 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 if(name === "nationality") { + let getNationality = await axios.get(`${URL_NATIONALITY}/${value}`); + setNationality(getNationality.data.data) + setFormData({ ...formData, [name]: value }); + } else { + setFormData({ ...formData, [name]: value }); + if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(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 handleAddDialog = (show:boolean) => { + if (show) { + setShowAddDialog(show) + } else { + handleClose() + setShowAddDialog(show) + } + } + + 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); + } + } + + function buttonOnSubmit(e:any) { + e.preventDefault(); + if (page === 'kyc' && !formData.description) return toast.warning(`Description for approval needed!`) + handleSubmit(formData); + } + + function btnPrevDef(e:any) { + e.preventDefault(); + viewOnly ? setViewOnly(false) : setViewOnly(true) + } + + const onReject = () => { + handleReject(formData); + handleClose(); + } + + return ( + handleAddDialog(open)}> + + + Member - View/Edit + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + + {/*
*/} + {/* onSubmit={(e) => buttonOnSubmit(e, formData)} */} +
+ + {formData.id ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''} + {formData.id ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, true): ''} + {formData.id ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''} + {formData.id ? generateImage(formData, handleChange, 'Photo', 'photouser'): ''} + {formData.id ? generateList(formData, handleChange, genders, 'gender', 'Gender', null, true): ''} + {formData.id ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''} + {formData.id ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, viewOnly): ''} + {formData.id ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''} + {/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */} + {formData.id ? generateList(formData, handleChange, profession, 'profession', 'Profession', null, false): ''} + {formData.id ? generateList(formData, handleChange, municipios, 'municipio', 'Municipio', null, false): ''} + {formData.id ? generateList(formData, handleChange, postoAdm, 'posto_adms', 'Posto', 'posto_adms_id', false): ''} + {formData.id ? generateList(formData, handleChange, sucos, 'suco', 'Suco', 'sucos_id', false): ''} + {formData.id ? generateList(formData, handleChange, aldeias, 'aldeia', 'Aldeia', null, false): ''} + {formData.id ? generateInput(formData, handleChange, 'Nationality', 'nationality', 'text', true, viewOnly): ''} +
+ +
    + {nationality.map((item: any, index) => ( +
  • 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} +
    • + ))} + {formData.nationality && nationality.length === 0 && ( +
  • No results found.
    • + )} +
+
+ {formData.id ? generateInput(formData, handleChange, 'Address', 'address', 'text', true, viewOnly): ''} + {formData.id ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', true, viewOnly): ''} + {formData.id ? generateInput(formData, handleChange, 'Identity Number', 'identity_number', 'text', false, viewOnly): ''} + + {formData.id ? generateInput(formData, handleChange, 'License Number', 'license_number', 'text', false, viewOnly): ''} + {formData.id ? generateInput(formData, handleChange, 'Merchant Name', 'agent_name', 'text', false, viewOnly): ''} + {formData.id ? generateInput(formData, handleChange, 'Merchant Address', 'merchantaddress', 'text', false, viewOnly): ''} + {formData.id ? generateInput(formData, handleChange, 'Longitude Merchant', 'longitudemerchant', 'text', false, viewOnly): ''} + {formData.id ? generateInput(formData, handleChange, 'Latitude Merchant', 'latitudemerchant', 'text', false, viewOnly): ''} + {formData.id ? generateImage(formData, handleChange, 'File Selfie', 'file_selfie'): ''} + {formData.id ? generateImage(formData, handleChange, 'File Document', 'file_document_id'): ''} + {formData.id ? generateImage(formData, handleChange, 'File Document & Selfie', 'file_document_id_selfie'): ''} + {formData.id ? generateImage(formData, handleChange, 'File Commercial License', 'file_commercial_license'): ''} + + {formData.id ? generateList(formData, handleChange, banks, 'bank_name', 'Bank Name', null, false): ''} + {formData.id ? generateInput(formData, handleChange, 'Bank Account', 'bank_account', 'text', false, viewOnly): ''} + {formData.id ? generateInput(formData, handleChange, 'iBank Number', 'ibank_number', 'text', false, viewOnly): ''} + + {formData.id ? generateInput(formData, handleChange, 'Approval Description', 'description', 'text', false, viewOnly): ''} + + {(formData.id && page!=='kyc') ? AdmAccess(page, formData, handleClose,fetchCustomers, viewOnly, setViewOnly): ""} + {(formData.id && page!=='kyc') ? CustomerWallet(formData.id) : ""} + +
+ + + {/* */} + { + formData.isneedapproval == 1 && page === 'kyc' ? ( + + ) : ('') + } + +
+
+ {/*
*/} +
+ + + + ); +}; + +export default DetailMember; +{/* (agent) */} + +function generateInput(formData:any, handleChange:any, label:string, name:string, type: string, required: boolean, disabled: boolean) { + function generateDate(isoString: string) { + const date = new Date(isoString); + return date.toISOString().slice(0, 10); // "2000-01-18" + } + return ( + <> +
+
+ + +
+
+ + ) +} + +// ON DEV (DI SELECT MASI HILANG) +function generateList(formData:any, handleChange: any, list:any, name:string, label: string, difId: any, required: boolean) { + return ( + <> +
+
+ + +
+
+ + ) +} + +// ON DEV (UPDATENYA) +function generateImage(formData:any, handleChange:any, label:string, name:string) { + const imagePreview = (file:any) => { + if (file && file.type && file.type.startsWith('image/')) { + const previewURL = URL.createObjectURL(file); + return previewURL + } + return file + }; + + return ( + <> +
+ +
+ { formData[name] ? ( +
+ {name} + {/* {name} */} +
+ ) : (No Data)} + +
+
+ + ) +}