member kyc

src/pages/members/kyc/Kyc.tsx

@@ -1,7 +1,14 @@
 import { DataGridInner, TDataGridProps } from '@/components';
+import { DataTable } from '@/components/ui/DataTable';
 import { Table } from '@tanstack/react-table';
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useState, useEffect } from 'react';
 import { ManageKycContextProvider } from './hooks';
+import { columns, initialMember } from '../manage-members/Columns';
+import { useAuthContext } from '@/auth';
+import { apiConfig } from '@/config/api.config';
+import axios from 'axios';
+const BASE_URL = apiConfig.service_customer;
+import CustomerDialog from '../manage-members/CustomerDetailModal';
 
 export interface IDataGridContextProps<TData extends object> {
   props: TDataGridProps<TData>;
@@ -24,16 +31,100 @@ export const useDataGrid = () => {
 
 const Kyc = () => {
   const [loading, setLoading] = useState(false);
+  const [members, setMembers] = useState([]);
+  const [member, setMember] = useState(initialMember);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogType, setDialogType] = useState('');
+  const closeDialog = () => setIsDialogOpen(false);
+  const { getUser } = useAuthContext();
+
+  useEffect(() => {
+    fetchGroups()
+  }, []);
+
+  async function fetchGroups() {
+    try {
+      let groups = await axios.get(`${BASE_URL}/customer/list`, {
+        params: {
+          limit: 10,
+          page: 1,
+          with_deleted: false,
+          order_field: 'fullname',
+          order_direction: 'ASC',
+          // type: "Reguler"
+        }
+      });
+      let temp = 1
+      let resMembers = groups.data.data.list.map((el: any) => {
+        el.no = temp++
+        el.name = el.fullname
+        return el
+      })
+      setMembers(resMembers)
+    } catch (error: any) {
+      alert(error.message)
+      console.log(error);
+    }
+  }
+  
+  const handleUpdate = (data: any) => {
+    setMember(data)
+    setIsDialogOpen(true)
+  }
+
+  async function handleSubmit(data: any) {
+    setDialogType('update')
+    setMember(data)
+    setDialogOpen(true)
+  }
+
+  const handleYes = async () => {
+    let userLogin: any = await getUser();
+    let updateData: any = member;
+    let customerId = member.id;
+    updateData.updated_by = userLogin.data ? userLogin.data.id : ''
+    let today = new Date();
+    updateData.updated_at = today.toString();
+    delete updateData.id;
+    delete updateData.pin;
+    delete updateData.name;
+    delete updateData.longitude;
+    delete updateData.latitude;
+    delete updateData.created_at;
+    delete updateData.no;
+    delete updateData.group_id;
+    delete updateData.group_name;
+    delete updateData.group_description;
+    delete updateData.group_status;
+    delete updateData.group_created_by;
+    delete updateData.group_created_at;
+    delete updateData.group_updated_by;
+    delete updateData.group_updated_at;
+    delete updateData.group_deleted_by;
+    delete updateData.group_deleted_at;
+    try {
+      await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
+      await fetchGroups();
+      setIsDialogOpen(false)
+    } catch (error: any) {
+      alert(error.message)
+      setIsDialogOpen(false)
+    }
+  }
 
   return (
     <div>
       <div className="container mx-auto py-5">
+        <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>
-        <ManageKycContextProvider>
+        <DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
+        
+        {/* <ManageKycContextProvider>
           <div className="grid gap-5 lg:gap-7.5">
             <DataGridInner />
           </div>
-        </ManageKycContextProvider>
+        </ManageKycContextProvider> */}
       </div>
     </div>
   );