fix detail member

2025-04-17 17:40:17 +07:00
parent 58e60ebaae d550a9c5f1
commit f2ab346a74
31 changed files with 320 additions and 363 deletions
--- a/src/pages/members/kyc/Kyc.tsx
+++ b/src/pages/members/kyc/Kyc.tsx
@ -1,8 +1,13 @@
-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';
-import { ManageKycContextProvider } from './hooks';
 import { getColumns, initialMember } from './Columns';
 import { useAuthContext } from '@/auth';
 import { LoaderTransparant } from '@/components';
@ -17,6 +22,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 +32,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 +72,9 @@ const Kyc = () => {
    } catch (error: any) {
      toast.error(error.message);
      console.log(error);
+    } finally {
+      setLoading(false);
+      setIsReloading(false);
    }
  }

@ -85,6 +95,15 @@ const Kyc = () => {
    setDialogOpen(true);
  }

+  const resetForm = () => {
+    setMember(initialMember);
+  };
+
+  const handleReload = () => {
+    setIsReloading(true);
+    fetchCustomers();
+  };
+
  const handleYes = async () => {
    setLoading(true);
    const userLogin: any = await getUser();
@ -165,6 +184,7 @@ const Kyc = () => {
      setIsDialogOpen(false);
      await fetchCustomers();
      setLoading(false);
+      setIsReloading(false);
    }
  };

@ -227,12 +247,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,44 @@
 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/kyc/hooks/ManageKycContext.tsx
+++ b/src/pages/members/kyc/hooks/ManageKycContext.tsx
@ -1,145 +0,0 @@
-import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
-import { Toaster } from '@/components/ui/sonner';
-import { apiConfig } from '@/config/api.config';
-import { ColumnDef } from '@tanstack/react-table';
-import { createContext, useCallback, useMemo, useState } from 'react';
-import { ListToolBar } from '../blocks/ListToolBar';
-
-interface SelectedUser {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  description: string;
-  created_date: Date;
-}
-
-interface ContextProps {
-  showDetailDialog: boolean;
-  handleDetailDialog: (show: boolean, selected_user: SelectedUser | null) => void;
-  showAddDialog: boolean;
-  handleAddDialog: (show: boolean) => void;
-  selectedUser: SelectedUser | null;
-}
-
-const initialProps: ContextProps = {
-  showDetailDialog: false,
-  handleDetailDialog: () => {},
-  showAddDialog: false,
-  handleAddDialog: () => {},
-  selectedUser: null
-};
-
-const ManageKycContext = createContext<ContextProps>(initialProps);
-const API_URL = apiConfig.service_dashboard;
-
-const ManageKycContextProvider = ({ children }: { children: React.ReactNode }) => {
-  const [showDetailDialog, setShowDetailDialog] = useState(false);
-  const [showAddDialog, setShowAddDialog] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<SelectedUser | null>(null);
-
-  const handleDetailDialog = useCallback((show: boolean, selected_user: SelectedUser | null) => {
-    setSelectedUser(show ? selected_user : null);
-    setShowDetailDialog(show);
-  }, []);
-
-  const handleAddDialog = useCallback((show: boolean) => {
-    setShowAddDialog(show);
-  }, []);
-
-  const columns = useMemo<ColumnDef<any>[]>(
-    () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.created_date,
-        id: 'created_date',
-        header: ({ column }) => <DataGridColumnHeader title="Created Date" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.name,
-        id: 'name',
-        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[350px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.description,
-        id: 'description',
-        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
-        enableSorting: true,
-        meta: {
-          headerClassName: 'w-[350px]'
-        }
-      },
-      {
-        id: 'actions',
-        enableSorting: false,
-        header: ({ column }) => <DataGridColumnHeader title="Action" column={column} />,
-        cell: (data: any) => {
-          const row = data.row.original;
-
-          return (
-            <>
-              <button
-                className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleDetailDialog(true, row.id)}
-              >
-                <KeenIcon icon="notepad-edit" />
-              </button>
-            </>
-          );
-        },
-        meta: {
-          headerClassName: 'w-[100px]',
-          cellClassName: 'text-center'
-        }
-      }
-    ],
-    [handleDetailDialog]
-  );
-
-  return (
-    <ManageKycContext.Provider
-      value={{
-        showDetailDialog,
-        handleDetailDialog,
-        showAddDialog,
-        handleAddDialog,
-        selectedUser
-      }}
-    >
-      <Toaster expand visibleToasts={9} duration={3000} />
-
-      <DataGridProvider
-        columns={columns}
-        pagination={{ size: 10 }}
-        toolbar={<ListToolBar />}
-        layout={{ card: true }}
-        sorting={[{ id: 'name', desc: false }]}
-        serverSide={true}
-      >
-        {children}
-      </DataGridProvider>
-    </ManageKycContext.Provider>
-  );
-};
-
-export { ManageKycContextProvider, ManageKycContext };
-export type { SelectedUser };
--- a/src/pages/members/kyc/hooks/index.ts
+++ b/src/pages/members/kyc/hooks/index.ts
@ -1,2 +0,0 @@
-export * from './ManageKycContext';
-export * from './useKycContext';
--- a/src/pages/members/kyc/hooks/useKycContext.tsx
+++ b/src/pages/members/kyc/hooks/useKycContext.tsx
@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { ManageKycContext } from './ManageKycContext';
-
-const useKycContext = () => {
-  const context = useContext(ManageKycContext);
-
-  if (!context) throw new Error('useKycContext must be used within AuthProvider');
-
-  return context;
-};
-
-export { useKycContext };
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@ -3,7 +3,6 @@ import { apiConfig } from '@/config/api.config';
 import { getColumns, Members, initialMember } from './Columns';
 import { useState, useEffect } from 'react';
 import axios from 'axios';
-// import CustomerDialog from './CustomerDetailModal';
 import DetailMember from './blocks/DetailMember';
 import ConfirmDialog from '@/components/confirm';
 import { useAuthContext } from '@/auth';
@ -15,7 +14,7 @@ const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 const BASE_URL = apiConfig.service_customer;
 import { Helmet } from 'react-helmet';
 import ListToolbar from './blocks/ListToolBar';
-
+import { RefreshCw } from 'lucide-react';
 const ManageMembers = () => {
  const [loading, setLoading] = useState(false);
  const [members, setMembers] = useState([]);
@ -25,6 +24,7 @@ const ManageMembers = () => {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [dialogType, setDialogType] = useState('');
+  const [isReloading, setIsReloading] = useState(false);
  const closeDialog = () => {
    setIsDialogOpen(false);
    setMember(initialMember);
@ -37,7 +37,7 @@ const ManageMembers = () => {
    setLoading(false);
  }, []);

-  async function fetchCustomers() {
+  async function fetchCustomers(): Promise<void> {
    try {
      let customers = await axios.get(`${BASE_URL}/customer/list`, {
        params: {
@ -72,6 +72,9 @@ const ManageMembers = () => {
    } catch (error: any) {
      toast.error(error.message);
      console.log(error);
+    } finally {
+      setLoading(false);
+      setIsReloading(false);
    }
  }

@ -93,7 +96,10 @@ const ManageMembers = () => {
    setMember(data);
    setDialogOpen(true);
  }
-
+  const handleReload = () => {
+    setIsReloading(true);
+    fetchCustomers();
+  };
  const handleYes = async () => {
    setLoading(true);
    const userLogin: any = await getUser();
@ -226,14 +232,29 @@ const ManageMembers = () => {
          </Link>
        </Breadcrumbs>
        {/* <div className="w-full overflow-x-auto px-4"> */}
-        <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}
            pagination={{ size: 25 }}
            columns={getColumns(handleUpdate)}
            layout={{ card: true }}
            serverSide={false}
-            toolbar={<ListToolbar createMember={createMember} />}
+            toolbar={
+              <ListToolbar
+                createMember={createMember}
+                onReload={handleReload}
+                isReloading={isReloading}
+              />
+            }
            onRowSelectionChange={(selected, table: any) => {
              const selectedRow = table.getSelectedRowModel().rows[0];
              if (selectedRow) handleUpdate(selectedRow.original);
--- a/src/pages/members/manage-members/blocks/ListToolBar.tsx
+++ b/src/pages/members/manage-members/blocks/ListToolBar.tsx
@ -1,12 +1,20 @@
-import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
+import { UserPlus } from 'lucide-react';
+import { KeenIcon, useDataGrid } from '@/components';
+import { DefaultTooltip } from '@/components';
 import { useState } from 'react';

-const ListToolbar = ({ createMember }: { createMember: () => void }) => {
-  const { table, reload } = useDataGrid();
-  const [   usernameFilter, setUsernameFilter] = useState('');
-  const [emailFilter, setEmailFilter] = useState('');
+interface ListToolbarProps {
+  createMember: () => void;
+  onReload: () => void;
+  isReloading: boolean;
+}

+const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps) => {
+
+  const [emailFilter, setEmailFilter] = useState('');
+  const [usernameFilter, setUsernameFilter] = useState('');
+  const {table}=useDataGrid();
  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUsernameFilter(e.target.value);
    table.getColumn('username')?.setFilterValue(e.target.value);
@ -31,16 +39,23 @@ const ListToolbar = ({ createMember }: { createMember: () => void }) => {
            />
          </div>
          <div className="flex gap-3 items-center">
-            <Button
-              variant="outline"
-              className="h-7.5 text-[0.8rem]"
-              onClick={createMember}
-            >
+            <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>
              Add Data
            </Button>
-            <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>
@ -50,4 +65,4 @@ const ListToolbar = ({ createMember }: { createMember: () => void }) => {
  );
 };

-export default ListToolbar;
+export default ListToolbar;