update table on upgrade member kyc

src/pages/members/kyc/Columns.tsx

@@ -1,3 +1,4 @@
+import { DataGridColumnHeader, KeenIcon } from '@/components';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -18,7 +19,7 @@ export type Members = {
   created_at: Date;
 };
 
-export const columns: ColumnDef<Members>[] = [
+export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Members>[] => [
   {
     accessorKey: 'no',
     header: ({ column }) => {
@@ -31,6 +32,14 @@ export const columns: ColumnDef<Members>[] = [
           <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       );
+    },
+    cell: ({ row, table }) => {
+      const pageIndex = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      const rowIndex = row.index;
+
+      const number = pageIndex * pageSize + rowIndex + 1;
+      return number;
     }
   },
   {
@@ -136,61 +145,117 @@ export const columns: ColumnDef<Members>[] = [
     id: 'actions',
     cell: ({ row }) => {
       const dataMembers = row.original;
+
       return (
-        <DropdownMenu>
+        <button
-        </DropdownMenu>
+          className="btn btn-sm btn-icon btn-clear btn-light"
+          onClick={() => handleUpdate(dataMembers)}
+        >
+          <KeenIcon icon="notepad-edit" />
+        </button>
       );
     }
   }
 ];
 
-export const initialMember = {
+export type MembersProps = {
-  id: "",
+  id: string;
-  fullname: "",
+  fullname: string;
-  email: "",
+  email: string;
-  username: "",
+  username: string;
-  msisdn: "",
+  msisdn: string;
-  password: "",
+  password: string;
-  pin: "",
+  pin: string;
-  try_pin: "",
+  try_pin: string;
-  mother_fullname: "",
+  mother_fullname: string;
-  agent_name: "",
+  agent_name: string;
-  bank_name: "",
+  bank_name: string;
-  bank_account: "",
+  bank_account: string;
-  ibank_number: "",
+  ibank_number: string;
-  address: "",
+  address: string;
-  longitude: "",
+  longitude: string;
-  latitude: "",
+  latitude: string;
-  nationality: "",
+  nationality: string;
-  photouser: "",
+  photouser: string;
-  photomerchant: "",
+  photomerchant: string;
-  file_selfie: "",
+  file_selfie: string;
-  file_document_id: "",
+  file_document_id: string;
-  file_document_id_selfie: "",
+  file_document_id_selfie: string;
-  file_commercial_license: "",
+  file_commercial_license: string;
-  identity_type: "",
+  identity_type: string;
-  identity_number: "",
+  identity_number: string;
-  license_number: "",
+  license_number: string;
-  date_birth: "",
+  date_birth: string;
-  gender: "",
+  gender: string;
-  status: "N",
+  status: string;
-  isneedapproval: "",
+  isneedapproval: string;
-  isapproved: "",
+  isapproved: string;
-  approveddate: "",
+  approveddate: string;
-  approvedby: "",
+  approvedby: string;
-  created_by: "",
+  created_by: string;
-  created_at: "",
+  created_at: string;
-  updated_by: "",
+  updated_by: string;
-  updated_at: "",
+  updated_at: string;
-  deleted_by: "",
+  deleted_by: string;
-  deleted_at: "",
+  deleted_at: string;
-  group: "",
+  group: string;
-  point_tier: "",
+  point_tier: string;
-  language: "",
+  language: string;
-  municipio: "",
+  municipio: string;
-  posto_adms: "",
+  posto_adms: string;
-  suco: "",
+  suco: string;
-  aldeia: "",
+  aldeia: string;
-  profession: "",
+  profession: string;
-  description: ""
+  description: string;
-}
+};
+
+export const initialMember: MembersProps = {
+  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: '',
+  description: ''
+};

src/pages/members/kyc/Kyc.tsx

@@ -1,9 +1,9 @@
-import { DataGridInner, TDataGridProps } from '@/components';
+import { Container, DataGridInner, DataGridProvider, TDataGridProps } from '@/components';
 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 './Columns';
+import { getColumns, initialMember } from './Columns';
 import { useAuthContext } from '@/auth';
 import { LoaderTransparant } from '@/components';
 import { apiConfig } from '@/config/api.config';
@@ -16,25 +16,7 @@ const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 import DetailMember from '../manage-members/blocks/DetailMember';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
-
+import { ListToolBar } from './blocks/ListToolBar';
-export interface IDataGridContextProps<TData extends object> {
-  props: TDataGridProps<TData>;
-  table: Table<TData>;
-  totalRows: number;
-  loading: (state: boolean) => void;
-  reload: () => void;
-  children?: React.ReactNode;
-}
-
-const DataGridContext = createContext<IDataGridContextProps<any> | undefined>(undefined);
-
-export const useDataGrid = () => {
-  const context = useContext(DataGridContext);
-  if (!context) {
-    throw new Error('useDataGrid must be used within a DataGridProvider');
-  }
-  return context;
-};
 
 const Kyc = () => {
   const [loading, setLoading] = useState(false);
@@ -58,8 +40,8 @@ const Kyc = () => {
           limit: 10,
           page: 1,
           with_deleted: false,
-          order_field: 'fullname',
+          order_field: 'created_at',
-          order_direction: 'ASC',
+          order_direction: 'DESC',
           type: 'kyc'
         }
       });
@@ -76,10 +58,10 @@ const Kyc = () => {
           page: 1,
           with_deleted: false,
           order_field: 'name',
-            order_direction: 'ASC',
+          order_direction: 'ASC'
         }
       });
-      setProfession(getProfession.data.data.list)
+      setProfession(getProfession.data.data.list);
     } catch (error: any) {
       toast.error(error.message);
       console.log(error);
@@ -103,8 +85,12 @@ const Kyc = () => {
     setDialogOpen(true);
   }
 
+  const resetForm = () => {
+    setMember(initialMember);
+  };
+
   const handleYes = async () => {
-    setLoading(true)
+    setLoading(true);
     const userLogin: any = await getUser();
     const updateData: any = member;
     const customerId = member.id;
@@ -151,41 +137,60 @@ const Kyc = () => {
         if (updateData[property]) form.append(property, updateData[property]);
       }
       if (dialogType === 'reject') {
-        if (destinationGroup === "Premium") await axios.post(`${BASE_URL}/customer/reject`, { customerid: customerId, description: updateData.approval_description_premium });
+        if (destinationGroup === 'Premium')
-        if (destinationGroup === "Agent") await axios.post(`${BASE_URL}/customer/reject`, { customerid: customerId, description: updateData.approval_description_agent });
+          await axios.post(`${BASE_URL}/customer/reject`, {
+            customerid: customerId,
+            description: updateData.approval_description_premium
+          });
+        if (destinationGroup === 'Agent')
+          await axios.post(`${BASE_URL}/customer/reject`, {
+            customerid: customerId,
+            description: updateData.approval_description_agent
+          });
       }
       if (dialogType === 'update') {
         await axios.put(`${BASE_URL}/customer/update/${customerId}`, form);
-        if (updateData.isneedapproval == 1&&destinationGroup === "Premium") await axios.post(`${BASE_URL}/customer/approve`, { customerid: customerId, description: updateData.approval_description_premium});
+        if (updateData.isneedapproval == 1 && destinationGroup === 'Premium')
-        if (updateData.isneedapproval == 1&&destinationGroup === "Agent") await axios.post(`${BASE_URL}/customer/approve`, { customerid: customerId, description: updateData.approval_description_agent});
+          await axios.post(`${BASE_URL}/customer/approve`, {
+            customerid: customerId,
+            description: updateData.approval_description_premium
+          });
+        if (updateData.isneedapproval == 1 && destinationGroup === 'Agent')
+          await axios.post(`${BASE_URL}/customer/approve`, {
+            customerid: customerId,
+            description: updateData.approval_description_agent
+          });
       }
       setDialogOpen(false);
       setIsDialogOpen(false);
       toast.success(`Success Update & ${dialogType} Kyc Member`);
     } catch (error: any) {
-      if (error?.response?.data?.error) error.message = error?.response?.data?.error
+      if (error?.response?.data?.error) error.message = error?.response?.data?.error;
       setDialogOpen(false);
       setIsDialogOpen(false);
       toast.error(error.message);
     } finally {
       await fetchCustomers();
-      setLoading(false)
+      setLoading(false);
     }
   };
 
   function setShowAddDialog(el: any) {
-    setIsDialogOpen(el)
+    setIsDialogOpen(el);
   }
 
   if (loading) return <LoaderTransparant />;
 
+  useEffect(() => {
+    if (!isDialogOpen) resetForm();
+  }, [isDialogOpen]);
+
   return (
     <>
       <Helmet>
         <title>TPAY | KYC</title>
       </Helmet>
-      <div>
+      <Container>
-        <div className="container mx-auto w-full">
         <ConfirmDialog
           open={dialogOpen}
           onClose={() => setDialogOpen(false)}
@@ -214,9 +219,13 @@ const Kyc = () => {
             profession={profession}
             page={'kyc'}
           />
-          ): ""}
+        ) : (
-          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Member KYC</h1>
+          ''
-          <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
+        )}
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">
+          KYC Upgrade Members
+        </h1>
+        <div className="grid gap-5 lg:gap-7.5 mx-8 w-auto">
           <Breadcrumbs>
             <Link underline="none" color="inherit" href="/">
               <span className="text-sm hover:underline">Dashboard</span>
@@ -227,24 +236,28 @@ const Kyc = () => {
             </Link>
 
             <Link underline="none" color="inherit">
-                <span className="text-sm">Manage Member KYC</span>
+              <span className="text-sm">KYC Upgrade Members</span>
             </Link>
           </Breadcrumbs>
         </div>
         <div className="w-full overflow-x-auto px-4">
           <div className="min-w-[800px]">
-              <DataTable
+            <DataGridProvider
-                createData={null}
               data={members}
-                columns={columns}
+              columns={getColumns(handleUpdate)}
-                onUpdate={handleUpdate}
+              pagination={{ size: 25 }}
-                onDelete={null}
+              toolbar={<ListToolBar />}
-              />
+              layout={{ card: true }}
-            </div>
+              sorting={[{ id: 'created_at', desc: true }]}
-          </div>
+              serverSide={false}
-
+              onRowSelectionChange={(selected, table: any) => {
+                const selectedRow = table.getSelectedRowModel().rows[0];
+                if (selectedRow) handleUpdate(selectedRow.original);
+              }}
+            ></DataGridProvider>
           </div>
         </div>
+      </Container>
     </>
   );
 };

src/pages/members/kyc/blocks/AddDialog.tsx

@@ -1,14 +0,0 @@
-import { Dialog } from '@/components/ui/dialog';
-import { useRef } from 'react';
-import { useKycContext } from '../hooks';
-import { useDataGrid } from '@/components';
-
-const AddDialog = () => {
-  const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog } = useKycContext();
-  const { reload } = useDataGrid();
-
-  return <Dialog></Dialog>;
-};
-
-export default AddDialog;

src/pages/members/kyc/blocks/ListToolBar.tsx

@@ -4,7 +4,6 @@ import { useKycContext } from '../hooks';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
-  const { handleDetailDialog, handleAddDialog } = useKycContext();
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">