diff --git a/.env b/.env
index 053bf82..04d3402 100644
--- a/.env
+++ b/.env
@@ -3,4 +3,5 @@ VITE_APP_VERSION=1=9.1.1
 GENERATE_SOURCEMAP=false
 
 VITE_APP_API_URL=https://tpay.shiblysolution.id/api
+# VITE_APP_API_URL=http://0.0.0.0:4001/api
 VITE_ENV=default
\ No newline at end of file
diff --git a/src/pages/members/kyc/Kyc.tsx b/src/pages/members/kyc/Kyc.tsx
index 77f4074..fa1a7e2 100644
--- a/src/pages/members/kyc/Kyc.tsx
+++ b/src/pages/members/kyc/Kyc.tsx
@@ -6,6 +6,7 @@ import { ManageKycContextProvider } from './hooks';
 import { columns, initialMember } from '../manage-members/Columns';
 import { useAuthContext } from '@/auth';
 import { apiConfig } from '@/config/api.config';
+import ConfirmDialog from '@/components/confirm';
 import axios from 'axios';
 const BASE_URL = apiConfig.service_customer;
 import CustomerDialog from '../manage-members/CustomerDetailModal';
@@ -52,7 +53,7 @@ const Kyc = () => {
           with_deleted: false,
           order_field: 'fullname',
           order_direction: 'ASC',
-          // type: "Reguler"
+          type: "kyc"
         }
       });
       let temp = 1
@@ -105,6 +106,7 @@ const Kyc = () => {
     delete updateData.group_deleted_at;
     try {
       await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
+      if (updateData.isneedapproval == 1) await axios.post(`${BASE_URL}/customer/approve`, {customerid: customerId})
       await fetchGroups();
       setIsDialogOpen(false)
     } catch (error: any) {
@@ -116,6 +118,14 @@ const Kyc = () => {
   return (
     <div>
       <div className="container mx-auto py-5">
+        <ConfirmDialog
+          open={dialogOpen}
+          onClose={() => setDialogOpen(false)}
+          title="Confirm Action"
+          content={`Are you sure you want to `+( dialogType === 'create' ? "create?" : ( dialogType === 'update' ? "update?" : "delete?"))}
+          onYes={handleYes}
+          onNo={() => setDialogOpen(false)}
+        />
         <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleSubmit={handleSubmit} initialData={member} viewStats={true}/>
         <h1 className="text-xl font-medium leading-none text-gray-900 mb-7">Manage Member KYC</h1>
         <DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
diff --git a/src/pages/members/manage-members/CustomerDetailModal.tsx b/src/pages/members/manage-members/CustomerDetailModal.tsx
index 1da456f..c227191 100644
--- a/src/pages/members/manage-members/CustomerDetailModal.tsx
+++ b/src/pages/members/manage-members/CustomerDetailModal.tsx
@@ -12,6 +12,7 @@ import {
   FormControl,
   Typography
 } from "@mui/material";
+import axios from 'axios';
 import Divider from '@mui/material/Divider';
 import { initialMember } from "./Columns";
 
@@ -43,85 +44,108 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
 
   return (
     <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
-    <DialogTitle>Customer Form ({viewStats ? 'View' : 'Edit'})</DialogTitle>
-    <DialogContent>
-    <div className="flex justify-between">
-      <Typography sx={{color:'grey'}}>Customer Data</Typography>
-      <Typography sx={{color:'grey'}} display="flex" justifyContent="flex-end">Created: {generateDate(formData.created_at, 'datetime')}</Typography>
-    </div>
-      <TextField disabled={viewOnly} fullWidth margin="dense" label="Full Name" name="fullname" value={formData.fullname} onChange={handleChange} />
-      <TextField disabled={viewOnly} fullWidth margin="dense" label="Email" name="email" value={formData.email} onChange={handleChange} />
-      <TextField disabled fullWidth margin="dense" label="Group" name="group" value={formData.group_name} onChange={handleChange} />
-      <TextField disabled={viewOnly} type="file" fullWidth margin="dense" label="Photo" name="photouser" value={formData.photouser} onChange={handleChange} />
-      <TextField disabled={viewOnly} fullWidth margin="dense" label="Username" name="username" value={formData.username} onChange={handleChange} />
-      <TextField disabled={viewOnly} fullWidth margin="dense" label="MSISDN" name="msisdn" value={formData.msisdn} onChange={handleChange} />
-      <TextField disabled={viewOnly} fullWidth margin="dense" label="Address" name="address" value={formData.address} onChange={handleChange} />
-      <TextField disabled={viewOnly} fullWidth margin="dense" label="Nationality" name="nationality" value={formData.nationality} onChange={handleChange} />
-      <TextField disabled={viewOnly} fullWidth margin="dense" label="Date of Birth" name="date_birth" type="date" value={generateDate(formData.date_birth, null)} onChange={handleChange} InputLabelProps={{ shrink: true }} />
-      <FormControl fullWidth margin="dense">
-        <InputLabel>Gender</InputLabel>
-        <Select disabled={viewOnly} name="gender" value={formData.gender} onChange={handleChange}>
-          <MenuItem value="M">Male</MenuItem>
-          <MenuItem value="F">Female</MenuItem>
-        </Select>
-      </FormControl>
-      <TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Type" name="identity_type" value={formData.identity_type} onChange={handleChange} />
-      <TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
-      <TextField disabled={viewOnly} type="number" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
-      <TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} />
-      {/* <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 value="Y">Active</MenuItem>
-          <MenuItem value="N">Inactive</MenuItem>
-        </Select>
-      </FormControl>
-      
-      <FormControl fullWidth margin="dense">
-        <InputLabel>Municipio</InputLabel>
-        <Select disabled={viewOnly} name="municipio" value={formData.municipio} onChange={handleChange}>
-          <MenuItem value="municipio1">Municipio 1</MenuItem>
-          <MenuItem value="municipio2">Municipio 2</MenuItem>
-        </Select>
-      </FormControl>
-      
-      <FormControl fullWidth margin="dense">
-        <InputLabel>Posto</InputLabel>
-        <Select disabled={viewOnly} name="posto_adms" value={formData.posto_adms} onChange={handleChange}>
-          <MenuItem value="posto1">Posto 1</MenuItem>
-          <MenuItem value="posto2">Posto 2</MenuItem>
-        </Select>
-      </FormControl>
+      <DialogTitle>Customer Form ({viewStats ? '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>
+          ) : ('')
+        }
 
-      <FormControl fullWidth margin="dense">
-        <InputLabel>Suco</InputLabel>
-        <Select disabled={viewOnly} name="suco" value={formData.suco} onChange={handleChange}>
-          <MenuItem value="posto1">suco 1</MenuItem>
-          <MenuItem value="posto2">suco 2</MenuItem>
-        </Select>
-      </FormControl>
+        <TextField disabled={viewOnly} fullWidth margin="dense" label="Full Name" name="fullname" value={formData.fullname} onChange={handleChange} />
+        <TextField disabled={viewOnly} fullWidth margin="dense" label="Email" name="email" value={formData.email} onChange={handleChange} />
+        <TextField disabled fullWidth margin="dense" label="Group" name="group" value={formData.group_name} onChange={handleChange} />
+        <TextField disabled={viewOnly} type="file" fullWidth margin="dense" label="Photo" name="photouser" value={formData.photouser} onChange={handleChange} />
+        <TextField disabled={viewOnly} fullWidth margin="dense" label="Username" name="username" value={formData.username} onChange={handleChange} />
+        <TextField disabled={viewOnly} fullWidth margin="dense" label="MSISDN" name="msisdn" value={formData.msisdn} onChange={handleChange} />
+        <TextField disabled={viewOnly} fullWidth margin="dense" label="Address" name="address" value={formData.address} onChange={handleChange} />
+        <TextField disabled={viewOnly} fullWidth margin="dense" label="Nationality" name="nationality" value={formData.nationality} onChange={handleChange} />
+        <TextField disabled={viewOnly} fullWidth margin="dense" label="Date of Birth" name="date_birth" type="date" value={generateDate(formData.date_birth, null)} onChange={handleChange} InputLabelProps={{ shrink: true }} />
+        <FormControl fullWidth margin="dense">
+          <InputLabel>Gender</InputLabel>
+          <Select disabled={viewOnly} name="gender" value={formData.gender} onChange={handleChange}>
+            <MenuItem value="M">Male</MenuItem>
+            <MenuItem 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 value="eleitoral_id">Eleitoral ID</MenuItem>
+            <MenuItem value="bihete_de_identidade">Bihete de Identidade</MenuItem>
+            <MenuItem value="passport">Passport</MenuItem>
+          </Select>
+        </FormControl>
+        <TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
+        <TextField disabled={viewOnly} type="number" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
+        <TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} />
+        {/* <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 value="Y">Active</MenuItem>
+            <MenuItem value="N">Inactive</MenuItem>
+          </Select>
+        </FormControl>
+        
+        <FormControl fullWidth margin="dense">
+          <InputLabel>Municipio</InputLabel>
+          <Select disabled={viewOnly} name="municipio" value={formData.municipio} onChange={handleChange}>
+            <MenuItem value="municipio1">Municipio 1</MenuItem>
+            <MenuItem value="municipio2">Municipio 2</MenuItem>
+          </Select>
+        </FormControl>
+        
+        <FormControl fullWidth margin="dense">
+          <InputLabel>Posto</InputLabel>
+          <Select disabled={viewOnly} name="posto_adms" value={formData.posto_adms} onChange={handleChange}>
+            <MenuItem value="posto1">Posto 1</MenuItem>
+            <MenuItem value="posto2">Posto 2</MenuItem>
+          </Select>
+        </FormControl>
 
-      <FormControl fullWidth margin="dense">
-        <InputLabel>Aldeia</InputLabel>
-        <Select disabled={viewOnly} name="aldeia" value={formData.aldeia} onChange={handleChange}>
-          <MenuItem value="posto1">aldeia 1</MenuItem>
-          <MenuItem value="posto2">aldeia 2</MenuItem>
-        </Select>
-      </FormControl>
-      
-      <Divider className="pt-7"/>
-      <Typography sx={{color:'grey'}}>Bank</Typography>
-      <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Name" name="bank_name" value={formData.bank_name} onChange={handleChange} />
-      <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} />
-    </DialogContent>
-    <DialogActions>
-      <Button onClick={handleClose} color="secondary">Cancel</Button>
-      <Button onClick={onSubmit} color="primary" variant="contained">Submit</Button>
-    </DialogActions>
-  </Dialog>
+        <FormControl fullWidth margin="dense">
+          <InputLabel>Suco</InputLabel>
+          <Select disabled={viewOnly} name="suco" value={formData.suco} onChange={handleChange}>
+            <MenuItem value="posto1">suco 1</MenuItem>
+            <MenuItem value="posto2">suco 2</MenuItem>
+          </Select>
+        </FormControl>
+
+        <FormControl fullWidth margin="dense">
+          <InputLabel>Aldeia</InputLabel>
+          <Select disabled={viewOnly} name="aldeia" value={formData.aldeia} onChange={handleChange}>
+            <MenuItem value="posto1">aldeia 1</MenuItem>
+            <MenuItem value="posto2">aldeia 2</MenuItem>
+          </Select>
+        </FormControl>
+
+        <Divider className="pt-7"/>
+        <Typography sx={{color:'grey'}}>Bank</Typography>
+        <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Name" name="bank_name" value={formData.bank_name} onChange={handleChange} />
+        <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} />
+      </DialogContent>
+      <DialogActions>
+        <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 ? (
+            <Button onClick={onSubmit} color="warning" variant="contained">Reject</Button>
+          ) : ('')
+        }
+        <Button onClick={onSubmit} color="primary" variant="contained">
+          { formData.isneedapproval == 1 ? (`Edit & Approve`) : (`Edit`) }
+        </Button>
+      </DialogActions>
+    </Dialog>
   );
 };
 
diff --git a/src/pages/members/manage-members/ManageMembers.tsx b/src/pages/members/manage-members/ManageMembers.tsx
index 74c061f..d81ed20 100644
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@@ -30,7 +30,6 @@ const ManageMembers = () => {
           with_deleted: false,
           order_field: 'fullname',
           order_direction: 'ASC',
-          type: "Reguler"
         }
       });
       let temp = 1