fix refresh on kyc

2025-04-17 16:54:03 +07:00
parent 45b2bccbde
commit d4239820f4
3 changed files with 88 additions and 53 deletions
--- a/src/pages/members/kyc/Kyc.tsx
+++ b/src/pages/members/kyc/Kyc.tsx
@ -1,4 +1,10 @@
-import { Container, DataGridInner, DataGridProvider, TDataGridProps } from '@/components';
+import {
+  Container,
+  DataGridInner,
+  DataGridProvider,
+  TDataGridProps,
+  useDataGrid
+} from '@/components';
 import { DataTable } from '@/components/ui/DataTable';
 import { Table } from '@tanstack/react-table';
 import React, { createContext, useContext, useState, useEffect } from 'react';
@ -17,6 +23,7 @@ import DetailMember from '../manage-members/blocks/DetailMember';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { ListToolBar } from './blocks/ListToolBar';
+import { RefreshCw } from 'lucide-react';

 const Kyc = () => {
  const [loading, setLoading] = useState(false);
@ -26,6 +33,7 @@ const Kyc = () => {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [dialogType, setDialogType] = useState('');
+  const [isReloading, setIsReloading] = useState(false);
  const closeDialog = () => setIsDialogOpen(false);
  const { getUser } = useAuthContext();

@ -65,6 +73,9 @@ const Kyc = () => {
    } catch (error: any) {
      toast.error(error.message);
      console.log(error);
+    } finally {
+      setLoading(false);
+      setIsReloading(false);
    }
  }

@ -89,6 +100,11 @@ const Kyc = () => {
    setMember(initialMember);
  };

+  const handleReload = () => {
+    setIsReloading(true);
+    fetchCustomers();
+  };
+
  const handleYes = async () => {
    setLoading(true);
    const userLogin: any = await getUser();
@ -172,6 +188,7 @@ const Kyc = () => {
    } finally {
      await fetchCustomers();
      setLoading(false);
+      setIsReloading(false);
    }
  };

@ -237,12 +254,20 @@ const Kyc = () => {
          </Link>
        </Breadcrumbs>
        {/* <div className="w-full overflow-x-auto"> */}
-        <div className="grid gap-5 lg:gap-7.5 mt-5">
+        <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
+          {isReloading && (
+            <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
+              <div className="flex flex-col items-center">
+                <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
+                <span className="text-slate-500 font-medium">Refreshing data...</span>
+              </div>
+            </div>
+          )}
          <DataGridProvider
            data={members}
            columns={getColumns(handleUpdate)}
            pagination={{ size: 25 }}
-            toolbar={<ListToolBar />}
+            toolbar={<ListToolBar onReload={handleReload} isReloading={isReloading} />}
            layout={{ card: true }}
            sorting={[{ id: 'created_at', desc: true }]}
            serverSide={false}
--- a/src/pages/members/kyc/blocks/ListToolBar.tsx
+++ b/src/pages/members/kyc/blocks/ListToolBar.tsx
@ -1,40 +1,45 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useKycContext } from '../hooks';
+import { useState } from 'react';

-const ListToolBar = () => {
+interface ListToolbarProps {
+  onReload: () => void;
+  isReloading: boolean;
+}
+
+const ListToolBar = ({ onReload, isReloading }: ListToolbarProps) => {
  const { table, reload } = useDataGrid();
+  const [usernameFilter, setUsernameFilter] = useState('');
+
+  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUsernameFilter(e.target.value);
+    table.getColumn('username')?.setFilterValue(e.target.value);
+  };

  return (
    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
        <div className="flex justify-between w-full items-center">
-          <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
-              <KeenIcon icon="magnifier" />
-              <input
-                type="text"
-                placeholder="Search users"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
-              />
-            </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip>
+          <div className="flex gap-3 items-center">
+            <input
+              type="text"
+              placeholder="Search Username"
+              value={usernameFilter}
+              onChange={handleUsernameChange}
+              className="input input-sm w-40"
+            />
          </div>
          <div className="flex gap-3 items-center">
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
-                <KeenIcon icon="arrows-circle" />
+            <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={onReload} disabled={isReloading}>
+                {isReloading ? (
+                  <div className="animate-spin">
+                    <KeenIcon icon="arrows-circle" />
+                  </div>
+                ) : (
+                  <KeenIcon icon="arrows-circle" />
+                )}
              </Button>
            </DefaultTooltip>
          </div>
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@ -47,7 +47,7 @@ const ManageMembers = () => {
          order_field: 'created_at',
          order_direction: 'DESC'
        }
-      }); 
+      });
      let temp = 1;
      let resMembers = customers.data.data.list.map((el: any) => {
        el.no = temp++;
@ -73,11 +73,10 @@ const ManageMembers = () => {
      toast.error(error.message);
      console.log(error);
    } finally {
-      setLoading(false)
+      setLoading(false);
      setIsReloading(false);
    }
  }
-  

  const handleUpdate = (data: any) => {
    setDialogType('update');
@ -233,29 +232,35 @@ const ManageMembers = () => {
          </Link>
        </Breadcrumbs>
        {/* <div className="w-full overflow-x-auto px-4"> */}
-        
+
        <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
-  {isReloading && (
-    <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
-      <div className="flex flex-col items-center">
-        <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
-        <span className="text-slate-500 font-medium">Refreshing data...</span>
-      </div>
-    </div>
-  )}
-  <DataGridProvider
-    data={members}
-    pagination={{ size: 20 }}
-    columns={getColumns(handleUpdate)}
-    layout={{ card: true }}
-    serverSide={false}
-    toolbar={<ListToolbar createMember={createMember} onReload={handleReload} isReloading={isReloading} />}
-    onRowSelectionChange={(selected, table: any) => {
-      const selectedRow = table.getSelectedRowModel().rows[0];
-      if (selectedRow) handleUpdate(selectedRow.original);
-    }}
-  ></DataGridProvider>
-</div>
+          {isReloading && (
+            <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
+              <div className="flex flex-col items-center">
+                <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
+                <span className="text-slate-500 font-medium">Refreshing data...</span>
+              </div>
+            </div>
+          )}
+          <DataGridProvider
+            data={members}
+            pagination={{ size: 25 }}
+            columns={getColumns(handleUpdate)}
+            layout={{ card: true }}
+            serverSide={false}
+            toolbar={
+              <ListToolbar
+                createMember={createMember}
+                onReload={handleReload}
+                isReloading={isReloading}
+              />
+            }
+            onRowSelectionChange={(selected, table: any) => {
+              const selectedRow = table.getSelectedRowModel().rows[0];
+              if (selectedRow) handleUpdate(selectedRow.original);
+            }}
+          ></DataGridProvider>
+        </div>
        {/* </div> */}
      </Container>
    </>