reject member

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: "",
+}

src/pages/members/kyc/Kyc.tsx

@@ -3,7 +3,7 @@ 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';
@@ -80,6 +80,12 @@ 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;
@@ -105,12 +111,19 @@ const Kyc = () => {
     delete updateData.group_deleted_by;
     delete updateData.group_deleted_at;
     try {
+      if (dialogType === 'reject') {
+        await axios.put(`${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)
     }
   }
@@ -122,19 +135,14 @@ const Kyc = () => {
           open={dialogOpen}
           onClose={() => setDialogOpen(false)}
           title="Confirm Action"
-          content={`Are you sure you want to `+( dialogType === 'create' ? "create?" : ( dialogType === 'update' ? "update?" : "delete?"))}
+          content={`Are you sure you want to ${dialogType}?`}
           onYes={handleYes}
           onNo={() => setDialogOpen(false)}
         />
-        <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleSubmit={handleSubmit} initialData={member} viewStats={true}/>
+        <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>
   );

src/pages/members/manage-members/CustomerDetailModal.tsx

@@ -12,11 +12,10 @@ import {
   FormControl,
   Typography
 } from "@mui/material";
-import axios from 'axios';
 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);
 
@@ -35,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);
@@ -44,7 +48,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
 
   return (
     <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
-      <DialogTitle>Customer Form ({viewStats ? 'View' : 'Edit'})</DialogTitle>
+      <DialogTitle>Customer Form ({viewOnly ? 'View' : 'Edit'})</DialogTitle>
       <DialogContent>
         <div className="flex justify-between pb-5">
           <Typography sx={{color:'grey'}}>Customer Data</Typography>
@@ -138,7 +142,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <Button onClick={handleClose} color="secondary">Cancel</Button>
         {
           formData.isneedapproval == 1 ? (
-            <Button onClick={onSubmit} color="warning" variant="contained">Reject</Button>
+            <Button onClick={onReject} color="warning" variant="contained">Reject</Button>
           ) : ('')
         }
         <Button onClick={onSubmit} color="primary" variant="contained">