fixing manage account, kyc delete member

src/pages/account/manage-account/ManageAccount.tsx

@@ -93,6 +93,7 @@ const ManageAccount = () => {
         <DataTable
           columns={columns}
           data={dataAccount}
+          createData={()=>{}}
           onUpdate={() => console.log('Callback update')}
           onDelete={() => console.log('Callback delete')}
         />

src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx

@@ -33,19 +33,19 @@ const statusMap: Record<StatusCode, StatusInfo> = {
 };
 
 export const renderStatusBadge = (statusRaw: string | null | undefined) => {
-    const status = statusRaw as StatusCode;
+	const status = statusRaw as StatusCode;
-    const { label, bg, text } = statusMap[status] ?? {
+	const { label, bg, text } = statusMap[status] ?? {
-      label: 'Unknown',
+		label: 'Unknown',
-      bg: 'bg-gray-100',
+		bg: 'bg-gray-100',
-      text: 'text-gray-600',
+		text: 'text-gray-600',
-    };
+	};
-  
+
-    return (
+	return (
-      <span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
+		<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
-        {label}
+			{label}
-      </span>
+		</span>
-    );
+	);
-  };
+};
 
 const DetailTransaction = () => {
     const { GetData } = useCallApi();
@@ -114,7 +114,7 @@ const DetailTransaction = () => {
                                                     <td className="px-4 py-2 text-sm text-gray-500">{log.customer.fullname ?? '-'}</td>
                                                     <td className="px-4 py-2 text-sm text-gray-500">{log.amount ?? '-'}</td>
                                                     <td className="px-4 py-2 text-sm text-gray-500">{renderStatusBadge(log.status) ?? '-'}</td>
-                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.request_date && moment(log.request_date).isValid() ? moment(log.request_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
+                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.request_date && moment(log.request_date).isValid() ? moment(log.request_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
                                                     <td className="px-4 py-2 text-sm text-gray-500">{log.reference ?? '-'}</td>
                                                     <td className="px-4 py-2 text-sm text-gray-500">
                                                     <div key={`actions-${log.id}`}>

src/pages/disbursement/history-transaction/blocks/DetailTransactionLog.tsx

@@ -106,11 +106,11 @@ const TransactionLogViewer = () => {
 													</tr>
 													<tr className='border-t'>
 														<td className="px-4 py-2 text-sm text-gray-500">Prosess Date</td>
-														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.request_date && moment(detailLogData.request_date).isValid() ? moment(detailLogData.request_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.request_date && moment(detailLogData.request_date).isValid() ? moment(detailLogData.request_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
 													</tr>
 													<tr className='border-t'>
 														<td className="px-4 py-2 text-sm text-gray-500">Response Date</td>
-														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.response_date && moment(detailLogData.response_date).isValid() ? moment(detailLogData.response_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.response_date && moment(detailLogData.response_date).isValid() ? moment(detailLogData.response_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
 													</tr>
 													<tr className='border-t'>
 														<td className="px-4 py-2 text-sm text-gray-500">Reference Number</td>

src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx

@@ -93,15 +93,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      // {
-      //   accessorKey: 'transaction_date',
-      //   header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
-      //   enableSorting: false,
-      //   enableHiding: false,
-      //   meta: {
-      //     headerClassName: 'w-[250px]'
-      //   }
-      // },
       {
         accessorKey: 'file_name',
         header: ({ column }) => <DataGridColumnHeader title="File Name" column={column} />,
@@ -192,7 +183,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         header: ({ column }) => <DataGridColumnHeader title="Execution Date" column={column} />,
         enableSorting: true,
         enableHiding: false,
-        cell: ({ row }) => moment(row.original.execution_date).format('YYYY-MM-DD HH:mm:ss')
+        cell: ({ row }) => moment(row.original.execution_date).format('DD/MM/YYYY HH:mm:ss')
       },
       {
         accessorFn: (row) => row.done_date,
@@ -200,7 +191,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         header: ({ column }) => <DataGridColumnHeader title="Done Date" column={column} />,
         enableSorting: true,
         enableHiding: false,
-        cell: ({ row }) => row.original.done_date ? moment(row.original.done_date).format('YYYY-MM-DD HH:mm:ss') : ''
+        cell: ({ row }) => row.original.done_date ? moment(row.original.done_date).format('DD/MM/YYYY HH:mm:ss') : ''
       },
       {
         id: 'actions',

src/pages/members/kyc-delete-member/ManageKycDeletion.tsx

@@ -0,0 +1,37 @@
+import { Container, DataGridInner } from '@/components';
+import { ManageKycDeletionContextProvider } from './hooks/ManageKycDeletionContext';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
+
+const ManageKycDeletion = () => {
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | List Deletion</title>
+      </Helmet>
+      <ManageKycDeletionContextProvider>
+        <Container className="mb-7">
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE KYC DELETION</h1>
+          <Breadcrumbs sx={{ mb: 2 }}>
+            <Link underline="none" color="inherit" href="/">
+              <span className="text-sm hover:underline">Dashboard</span>
+            </Link>
+
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Member</span>
+            </Link>
+
+            <Link underline="none" color="inherit">
+              <span className="text-sm">History Disbursement</span>
+            </Link>
+          </Breadcrumbs>
+          <div className="grid gap-5 lg:gap-7.5">
+            <DataGridInner />
+          </div>
+        </Container>
+      </ManageKycDeletionContextProvider>
+    </>
+  );
+};
+
+export default ManageKycDeletion;

src/pages/members/kyc-delete-member/blocks/ListToolbar.tsx

@@ -0,0 +1,61 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useCallback, useState, useEffect } from 'react';
+import { toast } from 'sonner';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+
+  // Set the initial state for trxDate
+  const [trxDate, settrxDate] = useState({ from: '', to: '' });
+
+  // Function to format date to YYYY-MM-DD
+  const formatDate = (date: Date): string => {
+    return date.toISOString().split('T')[0];
+  };
+
+  // useEffect to set the default date values
+  useEffect(() => {
+    const today = new Date();
+    const nextWeek = new Date(today);
+    nextWeek.setDate(today.getDate() + 7);
+
+    settrxDate({
+      from: formatDate(today),   // Set 'from' to today
+      to: formatDate(nextWeek),  // Set 'to' to 7 days later
+    });
+  }, []);
+
+  const handleFilterData = useCallback(() => {
+    try {
+      table.getColumn('transaction_date')?.setFilterValue(trxDate);
+    } catch (error) {
+      toast.error('Error applying filter');
+      console.error('Error applying filter:', error);
+    }
+  }, [trxDate, table]);
+
+  useEffect(() => {
+    if (trxDate.from && trxDate.to) {
+      handleFilterData();
+    }
+  }, [trxDate]);
+
+  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 gap-3 items-center ml-auto">
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;

src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx

@@ -0,0 +1,252 @@
+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';
+import { useCallApi } from '@/hooks';
+import moment from 'moment';
+
+interface ManageKycDeletionProps {
+  id: string;
+  customers_id: string;
+  group_id: string;
+  username: string;
+  fullname: string;
+  email: string;
+  status: string;
+  created_at: Date;
+}
+
+interface ContextProps {
+  getKycDeletionList: (
+    limit: number,
+    page: number,
+    with_deleted: boolean,
+    order_field: any,
+    order_direction: any,
+    filter: any
+  ) => Promise<{ data: ManageKycDeletionProps[]; totalCount: number } | undefined>;
+  showDetailDialog: boolean;
+  handleDetailDialog: (show: boolean, selected_user: ManageKycDeletionProps | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  selectedUser: ManageKycDeletionProps | null;
+}
+
+const initialProps: ContextProps = {
+  getKycDeletionList: async () => ({ data: [], totalCount: 0 }),
+  showDetailDialog: false,
+  handleDetailDialog: () => {},
+  showAddDialog: false,
+  handleAddDialog: () => {},
+  selectedUser: null
+};
+
+const ManageKycDeletionContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_customer;
+
+type StatusCode = 'W' | 'Y' | 'N' | 'T';
+
+interface StatusInfo {
+  label: string;
+  bg: string;
+  text: string;
+}
+
+const statusMap: Record<StatusCode, StatusInfo> = {
+  W: { label: 'Waiting Approval', bg: 'bg-yellow-100', text: 'text-yellow-600' },
+  T: { label: 'No Need', bg: 'bg-blue-100', text: 'text-blue-600' },
+  N: { label: 'Reject', bg: 'bg-red-100', text: 'text-red-600' },
+  Y: { label: 'Approve', bg: 'bg-green-100', text: 'text-green-600' },
+};
+
+export const renderStatusBadge = (statusRaw: string | null | undefined) => {
+	const status = statusRaw as StatusCode;
+	const { label, bg, text } = statusMap[status] ?? {
+		label: 'Unknown',
+		bg: 'bg-gray-100',
+		text: 'text-gray-600',
+	};
+
+	return (
+		<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
+			{label}
+		</span>
+	);
+};
+
+const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<ManageKycDeletionProps | null>(null);
+  const [manageKyc, setManageKyc] = useState<ManageKycDeletionProps[]>([]);
+  const { GetData } = useCallApi();
+
+  const getKycDeletionList = async (page: number, limit: number, sorting: any, filter: any) => {
+    try {
+      let startdate;
+      let enddate;
+      let formattedFilter;
+  
+      if (filter == undefined || filter.length == 0) {
+        const today = new Date();
+        const nextWeek = new Date();
+        nextWeek.setDate(today.getDate() + 7);
+  
+        startdate = today.toISOString().split('T')[0];
+        enddate = nextWeek.toISOString().split('T')[0];
+      } else if (filter != undefined || filter.length != 0) {
+        startdate = filter[0].value.from;
+        enddate = filter[0].value.to;
+      }
+  
+      formattedFilter = {
+        
+      };
+  
+      const response = await GetData(`${API_URL}/customer_deletion/list`, {
+        limit,
+        page: page + 1,
+        with_deleted: false,
+        order_field: "id",
+        order_direction: 'DESC',
+        filter: JSON.stringify(formattedFilter)
+      });
+  
+      setManageKyc(response?.data.list);
+      return { data: response?.data.list, totalCount: response?.data.total_count };
+    } catch (error) {
+      console.error('Error fetching transaction', error);
+    }
+  };
+
+  const handleDetailDialog = useCallback((show: boolean, selected_user: ManageKycDeletionProps | 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_at,
+        id: 'created_at',
+        header: ({ column }) => <DataGridColumnHeader title="Created Date" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        },
+        cell: ({ row }) => moment(row.original.created_at).format('DD/MM/YYYY HH:mm:ss')
+      },
+      {
+        accessorFn: (row) => row.username,
+        id: 'username',
+        header: ({ column }) => <DataGridColumnHeader title="Username" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.fullname,
+        id: 'fullname',
+        header: ({ column }) => <DataGridColumnHeader title="Fullname" column={column} />,
+        enableSorting: true,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.registered_email,
+        id: 'email',
+        header: ({ column }) => <DataGridColumnHeader title="Email" column={column} />,
+        enableSorting: true,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.status_approve,
+        id: 'status_approve',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: true,
+        meta: {
+          headerClassName: 'w-[350px]'
+        },
+        cell: ({row}) => renderStatusBadge(row.original.status_approve)
+      },
+      {
+        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 (
+    <ManageKycDeletionContext.Provider
+      value={{
+        getKycDeletionList,
+        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}
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+          getKycDeletionList(pageIndex, pageSize, sorting, columnFilters)
+        }
+      >
+        {children}
+      </DataGridProvider>
+    </ManageKycDeletionContext.Provider>
+  );
+};
+
+export { ManageKycDeletionContextProvider, ManageKycDeletionContext };
+export type { ManageKycDeletionProps };

src/pages/members/kyc-delete-member/hooks/index.tsx

@@ -0,0 +1,2 @@
+export * from './ManageKycDeletionContext';
+export * from './useManageKycDeletionContext';

src/pages/members/kyc-delete-member/hooks/useManageKycDeletionContext.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ManageKycDeletionContext } from './ManageKycDeletionContext';
+
+const useManageKycDeletionContext = () => {
+  const context = useContext(ManageKycDeletionContext);
+
+  if (!context) throw new Error('useManageKycDeletionContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useManageKycDeletionContext };

src/routing/AppRoutingSetup.tsx

@@ -15,6 +15,7 @@ import ManagePositionPage from '@/pages/settings/user/manage-position/ManagePosi
 import ManageAccount from '@/pages/account/manage-account/ManageAccount';
 import ManageGroups from '@/pages/groups/ManageGroups';
 import ManageMembers from '@/pages/members/manage-members/ManageMembers';
+import ManageKycDeletion from '@/pages/members/kyc-delete-member/ManageKycDeletion';
 import Kyc from '@/pages/members/kyc/Kyc';
 import AccessType from '@/pages/access/access-type/AccessType';
 import MemberCredential from '@/pages/access/member-credentials/MemberCredentials';
@@ -79,6 +80,7 @@ const AppRoutingSetup = (): ReactElement => {
 
           <Route path="/members/kyc" element={<Kyc />} />
           <Route path="/members/member-management" element={<ManageMembers />} />
+          <Route path="/members/kyc-delete-member" element={<ManageKycDeletion />} />
           <Route path="/members/create-member-credential" element={<MemberCredential />} />
 
           <Route path="/access/access-type-management" element={<AccessType />} />