yarn

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

@@ -1,5 +1,9 @@
 import { DataTable } from '@/components/ui/DataTable';
+import { apiConfig } from '@/config/api.config';
 import { columns, Members } from './Columns';
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+const BASE_URL = apiConfig.service_customer;
 
 const dataMembers: Members[] = [
   {
@@ -29,11 +33,44 @@ const dataMembers: Members[] = [
 ];
 
 const ManageMembers = () => {
+  const [members, setMembers] = useState([]);
+
+  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: 'name',
+          order_direction: 'ASC'
+        }
+      });
+      setMembers(groups.data.data.list)
+    } catch (error: any) {
+      alert(error.message)
+      console.log(error);
+    }
+  }
+
+  const handleUpdate = (member: any) => {
+    console.log(members);
+    
+  }
+
+  const handleDelete = (member: any) => {
+    
+  }
+
   return (
     <div>
       <div className="container mx-auto p-5">
         <h1 className="text-xl font-medium leading-none text-gray-900">Manage Members</h1>
-        <DataTable data={dataMembers} columns={columns} />
+        <DataTable data={dataMembers} columns={columns} onUpdate={handleUpdate} onDelete={handleDelete}/>
       </div>
     </div>
   );