kyc upgrade member

src/pages/members/kyc/Kyc.tsx

@@ -23,7 +23,7 @@ const BASE_URL = apiConfig.service_customer;
 const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 
 const Kyc = () => {
-  const [loading, setLoading] = useState(false);
+  // const [loading, setLoading] = useState(false);
   const [members, setMembers] = useState([]);
   const [member, setMember] = useState(initialMember);
   const [profession, setProfession] = useState([]);
@@ -31,6 +31,8 @@ const Kyc = () => {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
   const [isReloading, setIsReloading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
   const closeDialog = () => {
     setIsDialogOpen(false);
     setMember(initialMember);
@@ -38,29 +40,43 @@ const Kyc = () => {
   const { getUser } = useAuthContext();
 
   useEffect(() => {
-    fetchCustomers();
+    // fetchCustomers();
+    fetchMasters();
   }, [member]);
 
-  async function fetchCustomers() {
+  const fetchCustomers = async (
+    page: number,
+    limit: number,
+    sorting: any,
+    filter: any
+  ) => {
+    sorting = sorting.length == 0 ? [{ id: 'name', desc: true }] : sorting;
+    filter = filter.length ? filter : {};
+
+    const res = await axios.get(`${BASE_URL}/customer/list`, {
+      params: {
+        limit: limit,
+        page: page + 1, // +1 because your API uses 1-based pages
+        with_deleted: false,
+        order_field: 'created_at',
+        order_direction: 'DESC',
+        filter: JSON.stringify(filter),
+        specialFilter: true,
+        type: 'kyc'
+      },
+    });
+
+    const customers = res.data.data.list.map((el: any, index: number) => ({
+      ...el,
+      no: (page) * limit + index + 1,
+      name: el.fullname,
+    }));
+    return { data: customers, totalCount: res?.data.data.total_count };
+  };
+
+  async function fetchMasters(): Promise<void> {
     setIsReloading(true);
     try {
-      let customers = await axios.get(`${BASE_URL}/customer/list`, {
-        params: {
-          limit: 10,
-          page: 1,
-          with_deleted: false,
-          order_field: 'created_at',
-          order_direction: 'DESC',
-          type: 'kyc'
-        }
-      });
-      let temp = 1;
-      let resMembers = customers.data.data.list.map((el: any) => {
-        el.no = temp++;
-        el.name = el.fullname;
-        return el;
-      });
-      setMembers(resMembers);
       let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
         params: {
           limit: 75,
@@ -75,7 +91,6 @@ const Kyc = () => {
       toast.error(error.message);
       console.log(error);
     } finally {
-      // setLoading(false);
       setIsReloading(false);
     }
   }
@@ -97,9 +112,10 @@ const Kyc = () => {
     setDialogOpen(true);
   }
 
-  const handleReload = () => {
+  const handleReload = async () => {
     setIsReloading(true);
-    fetchCustomers();
+    await fetchCustomers(currentPage, pageSize, '','');
+    setIsReloading(false);
   };
 
   const handleYes = async () => {
@@ -180,7 +196,7 @@ const Kyc = () => {
     } finally {
       setDialogOpen(false);
       setIsDialogOpen(false);
-      await fetchCustomers();
+      handleReload()
       setIsReloading(false);
     }
   };
@@ -212,7 +228,7 @@ const Kyc = () => {
             handleReject={handleReject}
             handleSubmit={handleSubmit}
             initialData={member}
-            fetchCustomers={fetchCustomers}
+            fetchCustomers={handleReload}
             profession={profession}
             dialogType={dialogType}
             page={'kyc'}
@@ -247,12 +263,15 @@ const Kyc = () => {
           )}
           <DataGridProvider
             data={members}
-            pagination={{ size: 10 }}
+            pagination={{ size: pageSize }}
             columns={getColumns(handleUpdate)}
             layout={{ card: true }}
             sorting={[{ id: 'created_at', desc: true }]}
             toolbar={<ListToolBar onReload={handleReload} isReloading={isReloading} />}
-            serverSide={false}
+            serverSide={true}
+            onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+              fetchCustomers(pageIndex, pageSize, sorting, columnFilters)
+            }
             onRowSelectionChange={(selected, table: any) => {
               const selectedRow = table.getSelectedRowModel().rows[0];
               if (selectedRow) handleUpdate(selectedRow.original);