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/account/manage-account/ManageAccount.tsx b/src/pages/account/manage-account/ManageAccount.tsx
index 7663276..6fd1190 100644
--- a/src/pages/account/manage-account/ManageAccount.tsx
+++ b/src/pages/account/manage-account/ManageAccount.tsx
@@ -1,10 +1,10 @@
 import { apiConfig } from '@/config/api.config';
 import { Account, columns } from './Columns';
-import { DataTable } from '@/components/ui/DataTable';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { getData } from '@/utils';
 import { useCallApi } from '@/hooks';
+import { DataTable } from '@/components/ui/DataTable';
 
 const API_URL = apiConfig.service_dashboard;
 
@@ -79,8 +79,8 @@ const ManageAccount = () => {
         <DataTable
           columns={columns}
           data={dataAccount}
-          onUpdate={() => console.log('update')}
-          onDelete={() => console.log('delete')}
+          onUpdate={() => console.log('Callback update')}
+          onDelete={() => console.log('Callback delete')}
         />
       </div>
     </div>
diff --git a/src/pages/members/kyc/Columns.tsx b/src/pages/members/kyc/Columns.tsx
new file mode 100644
index 0000000..195f62a
--- /dev/null
+++ b/src/pages/members/kyc/Columns.tsx
@@ -0,0 +1,195 @@
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import { ColumnDef } from '@tanstack/react-table';
+import { ArrowUpDown, MoreHorizontal } from 'lucide-react';
+
+export type Members = {
+  // id: number;
+  username: number;
+  fullname: string;
+  group: string;
+  email: string;
+  created_at: Date;
+};
+
+export const columns: ColumnDef<Members>[] = [
+  {
+    accessorKey: 'no',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          No
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
+  {
+    accessorKey: 'username',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Username
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Fullname
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
+  {
+    accessorKey: 'group_name',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Group
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
+  {
+    accessorKey: 'destinationGroup',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Destination Group
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
+  {
+    accessorKey: 'email',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Email
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
+  {
+    accessorKey: 'created_at',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Created Date
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => new Date(row.original.created_at).toLocaleDateString()
+  },
+  {
+    accessorKey: 'statusApproval',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Status Approval
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const dataMembers = row.original;
+      return (
+        <DropdownMenu>
+        </DropdownMenu>
+      );
+    }
+  }
+];
+
+export const initialMember = {
+  id: "",
+  fullname: "",
+  email: "",
+  username: "",
+  msisdn: "",
+  password: "",
+  pin: "",
+  try_pin: "",
+  mother_fullname: "",
+  agent_name: "",
+  bank_name: "",
+  bank_account: "",
+  ibank_number: "",
+  address: "",
+  longitude: "",
+  latitude: "",
+  nationality: "",
+  photouser: "",
+  photomerchant: "",
+  file_selfie: "",
+  file_document_id: "",
+  file_document_id_selfie: "",
+  file_commercial_license: "",
+  identity_type: "",
+  identity_number: "",
+  license_number: "",
+  date_birth: "",
+  gender: "",
+  status: "N",
+  isneedapproval: "",
+  isapproved: "",
+  approveddate: "",
+  approvedby: "",
+  created_by: "",
+  created_at: "",
+  updated_by: "",
+  updated_at: "",
+  deleted_by: "",
+  deleted_at: "",
+  group: "",
+  point_tier: "",
+  language: "",
+  municipio: "",
+  posto_adms: "",
+  suco: "",
+  aldeia: "",
+  profession: "",
+}
diff --git a/src/pages/members/kyc/Kyc.tsx b/src/pages/members/kyc/Kyc.tsx
index 77f4074..ab4d62a 100644
--- a/src/pages/members/kyc/Kyc.tsx
+++ b/src/pages/members/kyc/Kyc.tsx
@@ -3,9 +3,10 @@ import { DataTable } from '@/components/ui/DataTable';
 import { Table } from '@tanstack/react-table';
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import { ManageKycContextProvider } from './hooks';
-import { columns, initialMember } from '../manage-members/Columns';
+import { columns, initialMember } from './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
@@ -79,10 +80,16 @@ const Kyc = () => {
     setDialogOpen(true)
   }
 
+  function handleReject(data: any) {
+    setDialogType('reject')
+    setMember(data)
+    setDialogOpen(true)
+  }
+
   const handleYes = async () => {
     let userLogin: any = await getUser();
     let updateData: any = member;
-    let customerId = member.id;
+    const customerId = member.id;
     updateData.updated_by = userLogin.data ? userLogin.data.id : ''
     let today = new Date();
     updateData.updated_at = today.toString();
@@ -104,11 +111,19 @@ const Kyc = () => {
     delete updateData.group_deleted_by;
     delete updateData.group_deleted_at;
     try {
-      await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
+      if (dialogType === 'reject') {
+        await axios.post(`${BASE_URL}/customer/reject`, {customerid: customerId})
+      }
+      if (dialogType === 'update') {
+        await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
+        if (updateData.isneedapproval == 1) await axios.post(`${BASE_URL}/customer/approve`, {customerid: customerId})
+      }
       await fetchGroups();
+      setDialogOpen(false)
       setIsDialogOpen(false)
     } catch (error: any) {
       alert(error.message)
+      setDialogOpen(false)
       setIsDialogOpen(false)
     }
   }
@@ -116,15 +131,18 @@ const Kyc = () => {
   return (
     <div>
       <div className="container mx-auto py-5">
-        <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleSubmit={handleSubmit} initialData={member} viewStats={true}/>
+        <ConfirmDialog
+          open={dialogOpen}
+          onClose={() => setDialogOpen(false)}
+          title="Confirm Action"
+          content={`Are you sure you want to ${dialogType}?`}
+          onYes={handleYes}
+          onNo={() => setDialogOpen(false)}
+        />
+        <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleReject={handleReject}
+        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}/>
-        
-        {/* <ManageKycContextProvider>
-          <div className="grid gap-5 lg:gap-7.5">
-            <DataGridInner />
-          </div>
-        </ManageKycContextProvider> */}
       </div>
     </div>
   );
diff --git a/src/pages/members/manage-members/CustomerDetailModal.tsx b/src/pages/members/manage-members/CustomerDetailModal.tsx
index 1da456f..8bf051b 100644
--- a/src/pages/members/manage-members/CustomerDetailModal.tsx
+++ b/src/pages/members/manage-members/CustomerDetailModal.tsx
@@ -15,7 +15,7 @@ import {
 import Divider from '@mui/material/Divider';
 import { initialMember } from "./Columns";
 
-const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats }: any) => {
+const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject }: any) => {
   const [formData, setFormData] = useState(initialData || initialMember);
   const [viewOnly, setViewOnly] = useState(viewStats || false);
 
@@ -34,6 +34,11 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
     handleClose();
   };
 
+  const onReject = () => {
+    handleReject(formData);
+    handleClose();
+  }
+
   function generateDate(date: any, type: any) {
     if (!date) return ''
     const today = new Date(date);
@@ -43,85 +48,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 ({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>
+          ) : ('')
+        }
 
-      <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={onReject} 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