From 1b4ac298b81e6c563fbc5b170a5cb5838e9549a2 Mon Sep 17 00:00:00 2001
From: unknown <benhurchrinstoper@gmail.com>
Date: Wed, 23 Apr 2025 18:41:51 +0700
Subject: [PATCH] fix detail member

---
 .../manage-members/CustomerDetailModal.tsx    | 616 ------------------
 .../manage-members/blocks/DetailMember.tsx    |   8 +-
 2 files changed, 7 insertions(+), 617 deletions(-)
 delete mode 100644 src/pages/members/manage-members/CustomerDetailModal.tsx

diff --git a/src/pages/members/manage-members/CustomerDetailModal.tsx b/src/pages/members/manage-members/CustomerDetailModal.tsx
deleted file mode 100644
index e7c2110..0000000
--- a/src/pages/members/manage-members/CustomerDetailModal.tsx
+++ /dev/null
@@ -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>
-  )
-}
\ No newline at end of file
diff --git a/src/pages/members/manage-members/blocks/DetailMember.tsx b/src/pages/members/manage-members/blocks/DetailMember.tsx
index aa0a951..05c3cb0 100644
--- a/src/pages/members/manage-members/blocks/DetailMember.tsx
+++ b/src/pages/members/manage-members/blocks/DetailMember.tsx
@@ -40,6 +40,11 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
     const [postoAdm, setPostoAdm] = useState([]);
     const [sucos, setSucos] = useState<any>([]);
     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 [previewImg, setPreviewImg] = useState({
         status: false,
@@ -215,7 +220,9 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
                             {/* {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") ? 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, 'Address', 'address', 'text', true, 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): ''}
@@ -238,7 +245,6 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                                         )}
                                     </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): ''}