agent

src/pages/members/agent-balance/AgentBalance.tsx

@@ -44,6 +44,7 @@ const AgentBalance = () => {
   const [dataBalance, setDataBalance] = useState([]);
   const [formData, setFormData] = useState(initBalance);
   const [pageIndex, setPageIndex] = useState(1);
+  const [currentPage, setCurrentPage] = useState(0);
   const [pageSize, setPageSize] = useState(10);
   const [dialogType, setDialogType] = useState('');
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -52,19 +53,24 @@ const AgentBalance = () => {
   // const [selectedMember, setSelectedMember] = useState(initBalance);
 
   useEffect(() => {
-   fetchAgentBalance();
+  //  fetchAgentBalance();
   }, []);
 
-  async function fetchAgentBalance(): Promise<void> {
+  const fetchAgentBalance = async (
-    setIsReloading(true);
+    page: number,
-    try {
+    limit: number,
+    sorting: any,
+    filter: any
+  ) => {
+    filter = filter.length ? filter : {};
     let balances = await axios.get(`${BASE_URL}/customer/agent-balance`, {
       params: {
-          limit: 20,
+        limit: limit,
-          page: 1,
+        page: page + 1, // +1 because your API uses 1-based pages
         with_deleted: false,
         order_field: 'created_at',
-          order_direction: 'DESC'
+        order_direction: 'DESC',
+        filter: JSON.stringify(filter),
       }
     });
     let temp = 1;
@@ -73,13 +79,16 @@ const AgentBalance = () => {
       if (!el.agent_name) el.agent_name = ''
       return el;
     });
-      setDataBalance(resBalance);
+    return { data: resBalance, totalCount: balances?.data.data.total_count }
-    } catch (error: any) {
+    // setIsReloading(true);
-      alert(error.message);
+    // try {
-      console.log(error);
+    //   // setDataBalance(resBalance);
-    } finally {
+    // } catch (error: any) {
-      setIsReloading(false);
+    //   alert(error.message);
-    }
+    //   console.log(error);
+    // } finally {
+    //   setIsReloading(false);
+    // }
   }
 
   const openDialog = () => setIsDialogOpen(true);
@@ -100,9 +109,11 @@ const AgentBalance = () => {
     setIsDialogOpen(true);
   };
 
-  const handleReload = () => {
+  const handleReload = async () => {
     setIsReloading(true);
-    fetchAgentBalance();
+    await fetchAgentBalance(currentPage, pageSize, '','');
+    setIsReloading(false);
+    // fetchAgentBalance();
   };
 
   async function getQrCode(customerId:any): Promise<void> {
@@ -154,10 +165,15 @@ const AgentBalance = () => {
           {isReloading && (
             <DataGridLoader />
           )}
-          <DataGridProvider
+          {!isReloading && (<DataGridProvider
-            data={dataBalance}
+              // data={dataBalance}
+              pagination={{ size: pageSize }}
               columns={getColumns(handleUpdate)}
-            pagination={{ size: 10 }}
+              layout={{ card: true }}
+              serverSide={true}
+              onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+                fetchAgentBalance(pageIndex, pageSize, sorting, columnFilters)
+              }
               toolbar={
                 <ListToolBar
                   createGroup={createGroup}
@@ -165,13 +181,12 @@ const AgentBalance = () => {
                   isReloading={isReloading}
                 />
               }
-            layout={{ card: true }}
-            serverSide={false}
               onRowSelectionChange={(selected, table: any) => {
                 const selectedRow = table.getSelectedRowModel().rows[0];
                 if (selectedRow) handleUpdate(selectedRow.original);
               }}
             />
+          )}
         </div>
         {/* </div> */}