Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

src/components/data-grid/DataGridContext.tsx

@@ -152,7 +152,7 @@ export const DataGridProvider = <TData extends object>(props: TDataGridProps<TDa
     onRowSelectionChange: handleRowSelectionChange,
     onSortingChange: (newSorting) => !loading && setSorting(newSorting),
     onColumnFiltersChange: (newFilters) => {
-      console.log('New Filters:', newFilters); // Debugging
+      // console.log('New Filters:', newFilters); // Debugging
       !loading && setColumnFilters(newFilters);
     },
     onColumnVisibilityChange: setColumnVisibility,

src/pages/groups/ManageGroups.tsx

@@ -22,6 +22,7 @@ import { useState, useEffect } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import Divider from '@mui/material/Divider';
 import ConfirmDialog from '@/components/confirm';
+import { toast } from 'sonner';
 // import { DialogHeader } from '@/components/ui/dialog';
 // import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 const BASE_URL = apiConfig.service_customer;
@@ -125,24 +126,29 @@ const ManageGroups = () => {
         await axios.post(`${BASE_URL}/groups/create`, {
           name: formData.groupName,
           status: formData.status,
+          description: formData.description,
           created_at: new Date()
         });
+        toast.success(`Success create group`)
       } else if (dialogType === 'update') {
         await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
           name: formData.groupName,
           status: formData.status,
+          description: formData.description,
           updated_at: new Date()
         });
+        toast.success(`Success update group`)
       } else if (dialogType === 'delete') {
         await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`);
+        toast.success(`Success delete group`)
       }
-      await fetchGroups();
+    } catch (error: any) {
-      closeDialog();
-      setDialogOpen(false);
-    } catch (error) {
       console.log(error);
-      closeDialog();
+      toast.error(error.message)
+    } finally {
+      await fetchGroups();
       setDialogOpen(false);
+      closeDialog();
     }
   };
 
@@ -179,7 +185,7 @@ const ManageGroups = () => {
           columns={columns}
           createData={createGroup}
           onUpdate={handleUpdate}
-          onDelete={handleDelete}
+          onDelete={null}
         />
         <Dialog open={isDialogOpen} onClose={closeDialog}>
           <DialogContent className="w-full">

src/pages/master/aldeias/blocks/AddDialog.tsx

@@ -24,6 +24,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface SucosProps {
   sucos_id: number;
@@ -34,7 +35,7 @@ const API_URL = apiConfig.service_master_data;
 
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog } = useManageAldeiasContext();
+  const { showAddDialog, handleAddDialog, selectedAldeias } = useManageAldeiasContext();
   const { reload } = useDataGrid();
   const { PostData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
@@ -70,6 +71,13 @@ const AddDialog = () => {
         handleAddDialog(false);
         toast.success('Success Create Aldeias');
         reload();
+        const createActivity = {
+          module: 'Manage Aldeias',
+          description: `Create Aldeia => ${formField.name}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Error Create Aldeias');
         setAlert({ show: true, message: 'Failed to create Aldeias. Please try again.' });

src/pages/master/aldeias/blocks/DeleteDialog.tsx

@@ -6,6 +6,7 @@ import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -33,6 +34,14 @@ const DeleteDialog = () => {
       handleDeleteDialog(false, null);
       toast.success('Success Delete Aldeias');
       reload();
+
+      const createActivity = {
+        module: 'Manage Aldeias',
+        description: `Delete Aldeia => ${selectedAldeias}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
     } else {
       setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Aldeias');

src/pages/master/aldeias/blocks/EditDialog.tsx

@@ -24,6 +24,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface SucosProps {
   sucos_id: number;
@@ -69,6 +70,13 @@ const EditDialog = () => {
         handleEditDialog(false, null);
         toast.success('Success Update Aldeias');
         reload();
+        const createActivity = {
+          module: 'Manage Aldeias',
+          description: `Edit Aldeia => ${selectedAldeias}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Error Update Aldeias');
         setAlert({ show: true, message: 'Error Update Aldeias' });

src/pages/master/conversion/blocks/AddDialog.tsx

@@ -33,6 +33,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { useManageConversionContext } from '../hooks/useManageConversionContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 interface CurrencyProps {
   ID: string;
   name: string;
@@ -80,6 +81,13 @@ const AddDialog = () => {
         resetForm();
         handleAddDialog(false);
         toast.success('Success Create Conversion');
+        const createActivity = {
+          module: 'Manage Conversion',
+          description: `Create Conversion => ${formField.id_currency_origin} => ${formField.id_currency_destination}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
         reload();
       } else {
         toast.error('Error Create Conversion');
@@ -267,7 +275,6 @@ const AddDialog = () => {
                       </SelectContent>
                     </Select>
                   </div>
-
                 </div>
                 <div className="flex justify-end gap-5">
                   <Button type="button" variant="outline" onClick={resetForm}>

src/pages/master/conversion/blocks/DeleteDialog.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { DialogDescription } from '@radix-ui/react-dialog';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_wallet;
 
@@ -30,23 +31,29 @@ const DeleteDialog = () => {
       toast.error('No Conversion selected');
       return;
     }
-    console.log(selectedConversion);
+    // console.log(selectedConversion);
-    const response = await DeleteData(
+    const response = await DeleteData(`${API_URL}/dashboard/conversion/${selectedConversion}`, {
-      `${API_URL}/dashboard/conversion/${selectedConversion}`,
+      id: selectedConversion
-      { id: selectedConversion }
+    });
-    );
 
     if (response?.status) {
       setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Conversion');
+      const createActivity = {
+        module: 'Manage Conversion',
+        description: `Delete Conversion => ${selectedConversion}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
       reload();
     } else {
       setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Conversion');
     }
   }, [selectedConversion, DeleteData, handleDeleteDialog, reload]);
-  console.log(selectedConversion);
+  // console.log(selectedConversion);
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">

src/pages/master/conversion/blocks/EditDialog.tsx

@@ -33,6 +33,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { useManageConversionContext } from '../hooks/useManageConversionContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 interface CurrencyProps {
   ID: string;
   name: string;
@@ -82,6 +83,13 @@ const EditDialog = () => {
         resetForm();
         handleEditDialog(false, null);
         toast.success('Success Update Conversion');
+              const createActivity = {
+                module: 'Manage Conversion',
+                description: `Update Conversion => ${selectedConversion}`,
+                action: 'U'
+              };
+        
+              doSaveLogActivity(createActivity);
         reload();
       } else {
         toast.error('Error Create Conversion');

src/pages/master/conversion/hooks/ManageConversionContext.tsx

@@ -159,7 +159,7 @@ const ManageConversionContextProvider = ({ children }: { children: React.ReactNo
   ) => {
     sorting = sorting.length == 0 ? [{ id: 'name', desc: true }] : sorting;
     filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
-    console.log(sorting);
+    // console.log(sorting);
     const response = await GetData(`${API_URL}/dashboard/conversion/`, {
       limit: limit,
       page: page + 1,
@@ -168,7 +168,7 @@ const ManageConversionContextProvider = ({ children }: { children: React.ReactNo
       order_direction: sorting[0].desc ? 'ASC' : 'DESC',
       filter: JSON.stringify(filter)
     });
-    console.log(response?.data);
+    // console.log(response?.data);
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
 

src/pages/master/currency/blocks/AddDialog.tsx

@@ -34,6 +34,7 @@ import {
 } from '@/components/ui/select';
 import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
 import { prefix } from 'stylis';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 interface CurrencyProps {
   ID: string;
   name: string;
@@ -80,6 +81,13 @@ const AddDialog = () => {
         resetForm();
         handleAddDialog(false);
         toast.success('Success Create Currency');
+        const createActivity = {
+          module: 'Manage Currency',
+          description: `Create Currency=> ${formField.name}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
         reload();
       } else {
         toast.error('Error Create Currency');

src/pages/master/currency/blocks/DeleteDialog.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { DialogDescription } from '@radix-ui/react-dialog';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_wallet;
 
@@ -39,6 +40,13 @@ const DeleteDialog = () => {
       setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Currency');
+      const createActivity = {
+        module: 'Manage Currency',
+        description: `Delete Currency=> ${selectedCurrency}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
       reload();
     } else {
       setAlert({ show: true, message: response?.message });

src/pages/master/currency/blocks/EditDialog.tsx

@@ -33,6 +33,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 interface CurrencyProps {
   ID: string;
   name: string;
@@ -81,6 +82,13 @@ const EditDialog = () => {
         resetForm();
         handleEditDialog(false, null);
         toast.success('Success Update Currency');
+        const createActivity = {
+          module: 'Manage Currency',
+          description: `Update Currency=> ${selectedCurrency}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
         reload();
       } else {
         toast.error('Error Create Currency');

src/pages/master/municipios/blocks/AddDialog.tsx

@@ -55,13 +55,13 @@ const AddDialog = () => {
         resetForm();
         reload();
         toast.success('Municipio created successfully!');
-        // const createActivity = {
+        const createActivity = {
-        //   module: 'Manage Municipio',
+          module: 'Manage Municipios',
-        //   description: `Create Municipio => ${selectedMunicipios}`,
+          description: `Create Municipio => ${formField.name}`,
-        //   action: 'C'
+          action: 'C'
-        // };
+        };
 
-        // doSaveLogActivity(createActivity);
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed to create municipio.');
         setAlert({ show: true, message: 'Failed to create municipio. Please try again.' });

src/pages/master/municipios/blocks/DeleteDialog.tsx

@@ -4,9 +4,16 @@ import { useCallback, useState } from 'react';
 import { apiConfig } from '@/config/api.config';
 import { useCallApi } from '@/hooks';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { DialogDescription } from '@radix-ui/react-dialog';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -25,16 +32,23 @@ const DeleteDialog = () => {
       return;
     }
 
-    const response = await DeleteData(
+    const response = await DeleteData(`${API_URL}/municipios/delete/${selectedMunicipios}/false`, {
-      `${API_URL}/municipios/delete/${selectedMunicipios}/false`,
+      id: selectedMunicipios
-      { id: selectedMunicipios }
+    });
-    );
 
     if (response?.status) {
       setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Municipio');
       reload();
+
+      const createActivity = {
+        module: 'Manage Municipios',
+        description: `Delete Municipio => ${selectedMunicipios}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
     } else {
       setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Municipio');
@@ -43,7 +57,6 @@ const DeleteDialog = () => {
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
-      
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogHeader className="p-0 border-0 block">
           <DialogTitle></DialogTitle>

src/pages/master/municipios/blocks/EditDialog.tsx

@@ -60,13 +60,13 @@ const EditDialog = () => {
         resetForm();
         toast.success('Success update municipio');
         reload();
-        // const createActivity = {
+        const createActivity = {
-        //   module: 'Manage Municipio',
+          module: 'Manage Municipios',
-        //   description: `Edit Municipio => ${selectedMunicipios}`,
+          description: `Edit Municipio => ${selectedMunicipios}`,
-        //   action: 'U'
+          action: 'U'
-        // };
+        };
 
-        // doSaveLogActivity(createActivity);
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed update user');
         setAlert({ show: true, message: 'Failed to update municipio. Please try again.' });

src/pages/master/postoadms/blocks/AddDialog.tsx

@@ -24,6 +24,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface MunicipioProps {
   id: number;
@@ -34,7 +35,7 @@ const API_URL = apiConfig.service_master_data;
 
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog } = useManagePostoAdmsContext();
+  const { showAddDialog, handleAddDialog, selectedPostoAdms } = useManagePostoAdmsContext();
   const { reload } = useDataGrid();
   const { PostData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
@@ -72,6 +73,13 @@ const AddDialog = () => {
         resetForm();
         reload();
         toast.success('Posto Adm created successfully!');
+        const createActivity = {
+          module: 'Manage Posto Administrativo',
+          description: `Create PostoAdms => ${formField.name}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed to create Posto Adm. Please try again.');
         setAlert({ show: true, message: 'Failed to create Posto Adm. Please try again.' });

src/pages/master/postoadms/blocks/DeleteDialog.tsx

@@ -4,8 +4,16 @@ import { useCallApi } from '@/hooks';
 import { useCallback, useState } from 'react';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -24,16 +32,22 @@ const DeleteDialog = () => {
       return;
     }
 
-    const response = await DeleteData(
+    const response = await DeleteData(`${API_URL}/postoadms/delete/${selectedPostoAdms}/false`, {
-      `${API_URL}/postoadms/delete/${selectedPostoAdms}/false`,
+      id: selectedPostoAdms
-      { id: selectedPostoAdms }
+    });
-    );
 
     if (response?.status) {
       setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Posto Adm');
       reload();
+      const createActivity = {
+        module: 'Manage Posto Administrativo',
+        description: `Delete PostoAdms => ${selectedPostoAdms}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
     } else {
       setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Posto Adm');

src/pages/master/postoadms/blocks/EditDialog.tsx

@@ -24,6 +24,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface MunicipioProps {
   id: number;
@@ -72,6 +73,14 @@ const EditDialog = () => {
         resetForm();
         toast.success('Success Update Posto Adm');
         reload();
+
+        const createActivity = {
+          module: 'Manage Posto Administrativo',
+          description: `Edit PostoAdms => ${selectedPostoAdms}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Error Update Posto Adm');
         setAlert({ show: true, message: 'Failed to update posto adm. Please try again.' });

src/pages/master/products/blocks/AddDialog.tsx

@@ -22,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface ProviderProps {
   provider_id: number;
@@ -32,7 +33,7 @@ const API_URL = apiConfig.service_master_data;
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const parsedUser = getAuth()?.user;
-  const { showAddDialog, handleAddDialog } = useManageProductsContext();
+  const { showAddDialog, handleAddDialog, selectedProducts } = useManageProductsContext();
   const { PostData, GetData } = useCallApi();
   const { reload } = useDataGrid();
   const [alert, setAlert] = useState({
@@ -75,6 +76,14 @@ const AddDialog = () => {
         handleAddDialog(false);
         toast.success('Success Create Product');
         reload();
+
+        const createActivity = {
+          module: 'Manage Products',
+          description: `Create Product => ${formField.name}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed Create Product');
         setAlert({ show: true, message: response?.message });
@@ -173,9 +182,7 @@ const AddDialog = () => {
                       className="input"
                       type="text"
                       value={formField.name}
-                      onChange={(e) =>
+                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                        setFormField({ ...formField, name: e.target.value })
-                      }
                     />
                   </div>
                 </div>
@@ -189,9 +196,7 @@ const AddDialog = () => {
                       className="input"
                       type="text"
                       value={formField.type}
-                      onChange={(e) =>
+                      onChange={(e) => setFormField({ ...formField, type: e.target.value })}
-                        setFormField({ ...formField, type: e.target.value })
-                      }
                     />
                   </div>
                 </div>
@@ -205,9 +210,7 @@ const AddDialog = () => {
                       className="input"
                       type="text"
                       value={formField.code}
-                      onChange={(e) =>
+                      onChange={(e) => setFormField({ ...formField, code: e.target.value })}
-                        setFormField({ ...formField, code: e.target.value })
-                      }
                     />
                   </div>
                 </div>
@@ -221,9 +224,7 @@ const AddDialog = () => {
                       className="input"
                       type="text"
                       value={formField.description}
-                      onChange={(e) =>
+                      onChange={(e) => setFormField({ ...formField, description: e.target.value })}
-                        setFormField({ ...formField, description: e.target.value })
-                      }
                     />
                   </div>
                 </div>
@@ -323,9 +324,7 @@ const AddDialog = () => {
                     </label>
                     <Select
                       value={formField.status}
-                      onValueChange={(value) =>
+                      onValueChange={(value) => setFormField({ ...formField, status: value })}
-                        setFormField({ ...formField, status: value })
-                      }
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select Status" />

src/pages/master/products/blocks/DeleteDialog.tsx

@@ -4,8 +4,16 @@ import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -30,6 +38,13 @@ const DeleteDialog = () => {
       handleDeleteDialog(false, null);
       toast.success('Success Delete Product');
       reload();
+      const createActivity = {
+        module: 'Manage Product',
+        description: `Delete Product',', => ${selectedProducts}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
     } else {
       setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Product');

src/pages/master/products/blocks/EditDialog.tsx

@@ -22,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface ProviderProps {
   provider_id: string;
@@ -74,6 +75,14 @@ const EditDialog = () => {
         handleEditDialog(false, null);
         toast.success('Product updated successfully.');
         reload();
+
+        const createActivity = {
+          module: 'Manage Products',
+          description: `Edit Product => ${selectedProducts}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed to update Product. Please try again.');
         setAlert({ show: true, message: 'Failed to update Product. Please try again.' });

src/pages/master/products/hooks/ManageProductsContext.tsx

@@ -73,7 +73,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        accessorFn: (row) => row.products_name,
+        accessorFn: (row) => row.name,
         id: 'name',
         header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
         enableSorting: true,
@@ -86,7 +86,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         }
       },
       {
-        accessorFn: (row) => row.products_description,
+        accessorFn: (row) => row.description,
         id: 'description',
         header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
         enableSorting: true,
@@ -96,7 +96,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         }
       },
       {
-        accessorFn: (row) => row.products_price_point,
+        accessorFn: (row) => row.price_point,
         id: 'price_point',
         header: ({ column }) => <DataGridColumnHeader title="Price Point" column={column} />,
         enableSorting: true,
@@ -106,7 +106,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         }
       },
       {
-        accessorFn: (row) => row.products_price_cash,
+        accessorFn: (row) => row.price_cash,
         id: 'price_cash',
         header: ({ column }) => <DataGridColumnHeader title="Price Cash" column={column} />,
         enableSorting: true,
@@ -189,7 +189,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'id', desc: false }]}
+        sorting={[{ id: 'Product.id', desc: false }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getProductsLists(pageIndex, pageSize, sorting, columnFilters)

src/pages/master/profession/blocks/AddDialog.tsx

@@ -15,13 +15,14 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { reload } = useDataGrid();
   const { PostData } = useCallApi();
-  const { showAddDialog, handleAddDialog } = useManageProfessionContext();
+  const { showAddDialog, handleAddDialog, selectedProfession } = useManageProfessionContext();
   const parsedUser = getAuth()?.user;
   const [alert, setAlert] = useState({
     show: false,
@@ -53,6 +54,14 @@ const AddDialog = () => {
         handleAddDialog(false);
         toast.success('Success Create Profession');
         reload();
+
+        const createActivity = {
+          module: 'Manage Profession',
+          description: `Create Profession => ${formField.name}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed Create Profession');
         setAlert({ show: true, message: response?.message });

src/pages/master/profession/blocks/DeleteDialog.tsx

@@ -4,8 +4,16 @@ import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -29,6 +37,13 @@ const DeleteDialog = () => {
       handleDeleteDialog(false, null);
       toast.success('Success Delete Profession');
       reload();
+      const createActivity = {
+        module: 'Manage Profession',
+        description: `Delete Profession', => ${selectedProfession}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
     } else {
       setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Profession');

src/pages/master/profession/blocks/EditDialog.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 const EditDialog = () => {
@@ -54,6 +55,14 @@ const EditDialog = () => {
         handleEditDialog(false, null);
         toast.success('Success Update Profession');
         reload();
+
+        const createActivity = {
+          module: 'Manage Profession',
+          description: `Edit Profession => ${selectedProfession}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed Update Profession');
         setAlert({ show: true, message: 'Failed Update Profession' });

src/pages/master/provider/blocks/AddDialog.tsx

@@ -31,6 +31,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 export interface CustomerProps {
   id: string;
@@ -50,7 +51,7 @@ const API_URL_MASTERDATA = apiConfig.service_master_data;
 const API_URL_TRANSACTION = apiConfig.service_transaction;
 
 const AddDialog = () => {
-  const { showAddDialog, handleAddDialog } = useManageProviderContext();
+  const { showAddDialog, handleAddDialog, selectedProvider } = useManageProviderContext();
   const { reload } = useDataGrid();
   const { PostData, GetData } = useCallApi();
   const parentRef = useRef<any | null>(null);
@@ -91,6 +92,13 @@ const AddDialog = () => {
         resetForm();
         handleAddDialog(false);
         toast.success('Success Create Provider');
+        const createActivity = {
+          module: 'Manage Provider',
+          description: `Create Provider => ${formField.name}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
         reload();
       } else {
         toast.error('Failed Create Provider');

src/pages/master/provider/blocks/DeleteDialog.tsx

@@ -4,8 +4,16 @@ import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -29,6 +37,13 @@ const DeleteDialog = () => {
       setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Provider');
+      const createActivity = {
+        module: 'Manage Provider',
+        description: `Delete Provider => ${selectedProvider}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
       reload();
     } else {
       setAlert({ show: true, message: response?.message });

src/pages/master/provider/blocks/EditDialog.tsx

@@ -32,6 +32,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL_MASTERDATA = apiConfig.service_master_data;
@@ -82,6 +83,13 @@ const EditDialog = () => {
         resetForm();
         handleEditDialog(false, null);
         toast.success('Provider updated successfully.');
+        const createActivity = {
+          module: 'Manage Provider',
+          description: `Update Provider => ${selectedProvider}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
         reload();
       } else {
         toast.error('Failed to update provider.');

src/pages/master/provider/blocks/ListToolbar.tsx

@@ -16,8 +16,10 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Provider"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={(table.getColumn('provider_name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                onChange={(event) =>
+                  table.getColumn('provider_name')?.setFilterValue(event.target.value)
+                }
               />
             </label>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>

src/pages/master/provider/hooks/ManageProviderContext.tsx

@@ -75,7 +75,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
     () => [
       {
         accessorFn: (row) => row.provider_name,
-        id: 'name',
+        id: 'provider_name',
         header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
         enableSorting: true,
         enableHiding: false,
@@ -162,8 +162,9 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
 
   const getProviderLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
+      const field = 'Provider.name';
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+      filter = filter.length == 0 ? {} : { [field]: filter[0].value?.toLowerCase() };
       const response = await GetData(`${API_URL}/provider/list`, {
         limit,
         page: page + 1,
@@ -172,7 +173,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      console.log(response?.data);
+      // console.log(response?.data);
       setProvider(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {

src/pages/master/sucos/blocks/AddDialog.tsx

@@ -24,6 +24,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface PostoAdmsProps {
   PostoAdms_id: number;
@@ -33,7 +34,7 @@ const API_URL = apiConfig.service_master_data;
 
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog } = useManageSucosContext();
+  const { showAddDialog, handleAddDialog, selectedSucos } = useManageSucosContext();
   const { reload } = useDataGrid();
   const { PostData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
@@ -69,6 +70,13 @@ const AddDialog = () => {
         handleAddDialog(false);
         reload();
         toast.success('Sucos created successfully!');
+        const createActivity = {
+          module: 'Manage Sucos',
+          description: `Create Suco => ${formField.name}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed to create Sucos Please try again.');
         setAlert({ show: true, message: 'Failed to create Sucos Please try again.' });

src/pages/master/sucos/blocks/DeleteDialog.tsx

@@ -4,8 +4,16 @@ import { useCallback, useState } from 'react';
 import { useCallApi } from '@/hooks';
 import { Alert, useDataGrid } from '@/components';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -31,6 +39,13 @@ const DeleteDialog = () => {
       handleDeleteDialog(false, null);
       toast.success('Success Delete Sucos');
       reload();
+      const createActivity = {
+        module: 'Manage Sucos',
+        description: `Delete Suco => ${selectedSucos}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
     } else {
       setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Sucos');

src/pages/master/sucos/blocks/EditDialog.tsx

@@ -24,6 +24,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface PostoAdmsProps {
   PostoAdms_id: number; // Ubah ke PostoAdms_id
@@ -76,6 +77,13 @@ const EditDialog = () => {
         handleEditDialog(false, null);
         toast.success('Success Update Sucos');
         reload();
+        const createActivity = {
+          module: 'Manage Sucos',
+          description: `Edit Suco => ${selectedSucos}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed Update Sucos');
         setAlert({ show: true, message: 'Failed Update Sucos. Please try again' });

src/pages/master/sucos/hooks/ManageSucosContext.tsx

@@ -153,7 +153,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
       const response = await GetData(`${API_URL}/sucos/list`, {
         limit: limit,
         page: page + 1,
-        with_deleted: true,
+        with_deleted: false,
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)

src/pages/master/wallet/blocks/AddDialog.tsx

@@ -22,6 +22,7 @@ import {
 } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface CurrencyProps {
   ID: string;
@@ -42,7 +43,7 @@ const API_URL_WALLET = apiConfig.service_wallet;
 const API_URL_MASTER_DATA = apiConfig.service_master_data;
 
 const AddDialog = () => {
-  const { showAddDialog, handleAddDialog } = useManageWalletContext();
+  const { showAddDialog, handleAddDialog, selectedWallet } = useManageWalletContext();
   const { GetData, PostData } = useCallApi();
   const { reload } = useDataGrid();
   const [alert, setAlert] = useState({
@@ -101,6 +102,14 @@ const AddDialog = () => {
         handleAddDialog(false);
         toast.success('Success Create Wallet');
         reload();
+
+        const createActivity = {
+          module: 'Manage Wallet',
+          description: `Create Wallet => ${selectedWallet?.Wallet_id} - ${selectedWallet?.Wallet_name}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed Create Wallet');
         setAlert({ show: true, message: 'Failed Create Wallet' });

src/pages/master/wallet/blocks/EditDialog.tsx

@@ -21,6 +21,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface CurrencyProps {
   ID: string;
@@ -53,13 +54,11 @@ const EditDialog = () => {
     description: string;
     status: string;
     group: string[];
-    currency_id: string;
   } = {
     name: '',
     description: '',
     status: '',
-    group: [],
+    group: []
-    currency_id: ''
   };
   const [formField, setFormField] = useState(initialState);
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
@@ -71,18 +70,26 @@ const EditDialog = () => {
   };
 
   const doUpdateWallet = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
+    async (payload: { name: string; description: string; status: string }) => {
-      e.preventDefault();
+      // e.preventDefault();
 
       const response = await PutData(
         `${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.Wallet_id}`,
-        formField
+        payload
       );
 
       if (response?.status) {
         handleEditDialog(false, null);
         toast.success('Success Update Wallet');
         reload();
+
+        const createActivity = {
+          module: 'Manage Wallet',
+          description: `Edit Wallet => ${selectedWallet?.Wallet_id} - ${selectedWallet?.Wallet_name}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed Update Wallet');
         setAlert({ show: true, message: 'Failed Update Wallet' });
@@ -94,8 +101,14 @@ const EditDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    console.log(formField);
+    // const { name, description, status } = formField;
-    doUpdateWallet(e);
+    const payload = {
+      name: formField.name,
+      description: formField.description,
+      status: formField.status
+    };
+    // console.log(payload);
+    doUpdateWallet(payload);
     setAlert({ show: false, message: '' });
   };
 
@@ -156,8 +169,6 @@ const EditDialog = () => {
     .map((g) => g.name)
     .join(', ');
 
-  const selectedCurrency = currencies.find((currency) => currency.ID === formField.currency_id);
-
   useEffect(() => {
     getCurrencyLists([{ id: 'name', desc: false }]);
     getGroupLists([{ id: 'name', desc: false }]);
@@ -182,7 +193,7 @@ const EditDialog = () => {
       resetForm();
     }
   }, [showEditDialog]);
-  // console.log(selectedWallet);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -246,25 +257,25 @@ const EditDialog = () => {
                   </div>
                 </div>
 
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">Currency</label>
-                    <Input type="text" placeholder='Empty' value={selectedCurrency?.name || ''} readOnly />
-                  </div>
-                </div>
-
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">Groups</label>
-                    <Input type="text" placeholder='Empty' value={selectedGroupNames} readOnly />
+                    <div className="relative w-full">
+                      <Input
+                        type="text"
+                        placeholder="Empty"
+                        value={selectedGroupNames}
+                        readOnly
+                        className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
+                      />
+                    </div>
                   </div>
                 </div>
 
                 <div className="flex justify-end gap-5">
-                  <Button type="button" variant="outline" onClick={resetForm}>
+                  <Button variant="default" type="submit">
-                    Reset
+                    Update
                   </Button>
-                  <Button variant="default">Update</Button>
                 </div>
               </div>
             </form>

src/pages/master/wallet/blocks/ListToolbar.tsx

@@ -15,7 +15,7 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Provider"
+                placeholder="Search Wallet"
                 value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />

src/pages/master/wallet/hooks/ManageWalletContext.tsx

@@ -146,7 +146,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
   const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+      filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() };
       const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, {
         limit,
         page: page + 1,
@@ -183,7 +183,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         pagination={{ size: 25 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'id', desc: false }]}
+        sorting={[{ id: 'created_at', desc: true }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getWalletLists(pageIndex, pageSize, sorting, columnFilters)

src/pages/master/walletRule/blocks/AddDialog.tsx

@@ -31,6 +31,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { NumericFormat } from 'react-number-format';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface GroupProps {
   ID: string;
@@ -48,7 +49,7 @@ interface WalletProps {
 
 const API_URL_WALLET = apiConfig.service_wallet;
 const AddDialog = () => {
-  const { showAddDialog, handleAddDialog } = useManageWalletRuleContext();
+  const { showAddDialog, handleAddDialog, selectedWalletRule } = useManageWalletRuleContext();
   const { reload } = useDataGrid();
   const { PostData, GetData } = useCallApi();
   const [open, setOpen] = useState(false);
@@ -94,6 +95,14 @@ const AddDialog = () => {
         handleAddDialog(false);
         toast.success('Success Create Wallet Rule');
         reload();
+
+        const createActivity = {
+          module: 'Manage Wallet Rule',
+          description: `Create Wallet Rule => ${selectedWalletRule?.ID}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed Create Wallet Rule');
         setAlert({ show: true, message: 'Failed Create Wallet Rule' });

src/pages/master/walletRule/blocks/DeleteDialog.tsx

@@ -13,6 +13,7 @@ import {
   DialogTitle
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL_WALLET = apiConfig.service_wallet;
 
@@ -37,6 +38,13 @@ const DeleteDialog = () => {
       toast.success('Wallet rule deleted successfully');
       handleDeleteDialog(false, null);
       reload();
+      const createActivity = {
+        module: 'Manage Wallet Rule',
+        description: `Delete Wallet Rule', => ${selectedWalletRule.ID}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
       setAlert({ show: false, message: '' });
     } else {
       toast.error('Failed to delete wallet rule');

src/pages/master/walletRule/blocks/EditDialog.tsx

@@ -31,6 +31,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { NumericFormat } from 'react-number-format';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface GroupProps {
   ID: string;
@@ -97,6 +98,14 @@ const EditDialog = () => {
         handleEditDialog(false, null);
         toast.success('Success Update Wallet Rule');
         reload();
+
+        const createActivity = {
+          module: 'Manage Wallet Rule',
+          description: `Edit Wallet Rule => ${selectedWalletRule?.ID}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed Update Wallet Rule');
         setAlert({ show: true, message: 'Failed Update Wallet Rule' });

src/pages/members/manage-members/CustomerDetailModal.tsx

@@ -12,13 +12,18 @@ import { toast } from 'sonner';
 const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 const BASE_URL_CUSTOMER = apiConfig.service_customer;
 
-const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject, page }: any) => {
+const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject, page, fetchCustomers }: any) => {
   const [formData, setFormData] = useState(initialData || initialMember);
   const [viewOnly, setViewOnly] = useState(viewStats || false);
   const [municipios, setMunicipios] = useState([]);
   const [aldeias, setAldeias] = useState([]);
   const [postoAdm, setPostoAdm] = useState([]);
   const [sucos, setSucos] = useState([]);
+  const [groupData] = useState({
+    reguler: `This fill can not be empty!`,
+    premium: `This field required only for Premium or Agent`,
+    agent: `This field required only for Agent`
+  })
   
   useEffect(() => {
     setFormData(initialData || {}); // Sync formData when initialData changes
@@ -154,18 +159,20 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
           ) : ('')
         }
 
-        <TextField disabled={viewOnly} fullWidth margin="dense" label="Full Name" name="fullname" value={formData.fullname} onChange={handleChange} />
+        <TextField disabled={viewOnly} required multiline fullWidth margin="dense" label="Full Name" name="fullname" value={formData.fullname} onChange={handleChange} />
-        <TextField disabled={viewOnly} fullWidth margin="dense" label="Email" name="email" value={formData.email} onChange={handleChange} />
+        {/* <Typography fontSize={13} paddingLeft={2} marginTop={-2.5} color="red">{groupData.reguler}</Typography> */}
-        <TextField disabled fullWidth margin="dense" label="Group" name="group" value={formData.group_name} onChange={handleChange} />
+        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Email" name="email" value={formData.email} onChange={handleChange} />
+        <TextField disabled fullWidth required margin="dense" label="Group" name="group" value={formData.group_name} onChange={handleChange} />
         {fileTextFile("Photo", formData.photouser, "photouser", handleChange)}
-        <TextField disabled={viewOnly} fullWidth margin="dense" label="Username" name="username" value={formData.username} onChange={handleChange} />
+        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Username" name="username" value={formData.username} onChange={handleChange} />
-        <TextField disabled={viewOnly} fullWidth margin="dense" label="MSISDN" name="msisdn" value={formData.msisdn} onChange={handleChange} />
+        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Mother Fullname" name="mother_fullname" value={formData.mother_fullname} onChange={handleChange} />
-        <TextField disabled={viewOnly} fullWidth margin="dense" label="Address" name="address" value={formData.address} onChange={handleChange} />
+        <TextField disabled={viewOnly} required fullWidth margin="dense" label="MSISDN" name="msisdn" value={formData.msisdn} onChange={handleChange} />
-        <TextField disabled={viewOnly} fullWidth margin="dense" label="Nationality" name="nationality" value={formData.nationality} onChange={handleChange} />
+        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Address" name="address" value={formData.address} onChange={handleChange} />
-        <TextField disabled={viewOnly} fullWidth margin="dense" label="Date of Birth" name="date_birth" type="date" value={generateDate(formData.date_birth, null)} onChange={handleChange} InputLabelProps={{ shrink: true }} />
+        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Nationality" name="nationality" value={formData.nationality} onChange={handleChange} />
-        <FormControl fullWidth margin="dense">
+        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Date of Birth" name="date_birth" type="date" value={generateDate(formData.date_birth, null)} onChange={handleChange} InputLabelProps={{ shrink: true }} />
+        <FormControl required fullWidth margin="dense">
           <InputLabel>Gender</InputLabel>
-          <Select disabled={viewOnly} name="gender" value={formData.gender} onChange={handleChange}>
+          <Select required disabled={viewOnly} name="gender" value={formData.gender} onChange={handleChange}>
             <MenuItem key={1} value="M">Male</MenuItem>
             <MenuItem key={2} value="F">Female</MenuItem>
           </Select>
@@ -181,7 +188,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         
         {/* AGENT & PREMIUM DATA */}
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
-        <TextField disabled={viewOnly} type="number" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
+        <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
         <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Merchant Address" name="merchantaddress" value={formData.merchantaddress} onChange={handleChange} />
         {fileTextFile("File Selfie", formData.file_selfie, "file_selfie", handleChange)}
         <img width={300} height={250} srcSet={formData.file_selfie} src={formData.file_selfie} alt={"file_selfie"} style={{borderRadius: 10}}/>
@@ -262,18 +269,22 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Account" name="bank_account" value={formData.bank_account} onChange={handleChange} />
         <TextField disabled={viewOnly} fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} />
         <Divider className="pt-7"/>
-        {getAdmAccess(page, formData)}
+        {/* {getAdmAccess(page, formData, handleClose, fetchCustomers)} */}
         {
           page === 'kyc' ? (
             <>
               <Typography sx={{color:'grey'}}>Approval</Typography>
               <TextField fullWidth margin="dense" label="Approval Description" name="description" value={formData.description} onChange={handleChange} />
             </>
-          ) : ('')
+          ) : (<>{getAdmAccess(page, formData, handleClose, fetchCustomers, viewOnly, setViewOnly)}</>)
         }
       </DialogContent>
       <DialogActions>
+        {
+          page === 'kyc' ? (
             <Button onClick={() => viewOnly ? setViewOnly(false) : setViewOnly(true)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
+          ) : ('')
+        }
         <Button onClick={handleClose} color="secondary">Cancel</Button>
         {
           formData.isneedapproval == 1 && page === 'kyc' ? (
@@ -327,9 +338,35 @@ function fileTextFile(label: string, value: any, name: string, handleChange: any
   )
 }
 
-function getAdmAccess(page: string, data: any) {
+function getAdmAccess(page: string, data: any, handleClose: any, fetchCustomers: any, viewOnly: any, setViewOnly: any) {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
+  const [changeGroup, setChangeGroup] = useState('');
+  const [changeGroupD, setChangeGroupD] = useState(false);
+  const [groups, setGroups] = useState([]);
+  
+  useEffect(() => {
+    fetchGroups()
+  }, []);
+
+  const fetchGroups = async () =>{
+    try {
+      let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC',
+        }
+      });
+      setGroups(getGroups.data.data.list);
+    } catch (error: any) {
+      console.error(error.message);
+      toast.error(error.message)
+    }
+  }
+
   const handleYes = async () => {
     try {
       if (dialogType === "update status") {
@@ -347,6 +384,7 @@ function getAdmAccess(page: string, data: any) {
       toast.error(error.message)
     } finally {
       setDialogOpen(false)
+      handleClose()
     }
   }
 
@@ -360,6 +398,31 @@ function getAdmAccess(page: string, data: any) {
     setDialogOpen(true)
   }
   
+  async function buttonChangeGroup() {
+    try {
+      let dataObj = {
+        customerid: data.id,
+        destination_group: changeGroup
+      }
+      if (data.group_id === changeGroup) return toast.warning(`You update same group as the exist customer group`)
+      if (dataObj.customerid && dataObj.destination_group) {
+        await axios.post(`${BASE_URL_CUSTOMER}/customer/change-group`, dataObj)
+      }
+      await fetchCustomers()
+      toast.success('Success Change group')
+    } catch (error: any) {
+      toast.error(error.message)
+    } finally {
+      setChangeGroupD(false)
+      handleClose()
+    }
+  }
+
+  function openChangeGroupDialog() {
+    setChangeGroup(data.group_id);
+    setChangeGroupD(true)
+  }
+
   if (page !== "kyc") {
     return (
       <Box p={3} boxShadow={3} borderRadius={2} bgcolor="white">
@@ -378,14 +441,40 @@ function getAdmAccess(page: string, data: any) {
           <Grid item xs={6} container direction="column" spacing={2}>
             <Grid item>
               <Typography variant="body2">Change Group</Typography>
-              <Button variant="contained" color="primary">Change Group</Button>
+              <Button onClick={() => openChangeGroupDialog()} variant="contained" color="primary">Change Group</Button>
             </Grid>
             <Grid item>
               <Typography variant="body2">Edit Member</Typography>
-              <Button variant="contained" color="primary">Edit Member</Button>
+              {/* <Button variant="contained" color="primary">Edit Member</Button> */}
+              <Button onClick={() => viewOnly ? setViewOnly(false) : setViewOnly(true)} variant="contained">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
             </Grid>
           </Grid>
         </Grid>
+
+        <Dialog open={changeGroupD} onClose={() => setChangeGroupD(false)} fullWidth>
+          <Grid container padding={3}>
+            <Typography variant="h6" gutterBottom color="orange">Are you sure to change customer Group?</Typography>
+            <FormControl fullWidth margin="dense">
+            <Typography gutterBottom>Destination Group</Typography>
+              <Select name="groups" value={changeGroup} onChange={(e: any) => setChangeGroup(e.target.value)}>
+                {
+                  groups ? groups.map((el: any) => (
+                    <MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
+                  )) : ""
+                }
+              </Select>
+            </FormControl>
+          </Grid>
+          <DialogActions>
+            <Button onClick={() => setChangeGroupD(false)} color="secondary">
+              No
+            </Button>
+            <Button onClick={buttonChangeGroup} color="primary">
+              Yes
+            </Button>
+          </DialogActions>
+        </Dialog>
+        
         <ConfirmDialog
           open={dialogOpen}
           onClose={() => setDialogOpen(false)}
@@ -428,3 +517,7 @@ function getPinStatus(status: string) {
     res: null
   }
 }
+
+function showCustomerWallet() {
+
+}

src/pages/members/manage-members/ManageMembers.tsx

@@ -24,15 +24,15 @@ const ManageMembers = () => {
 
   useEffect(() => {
     setLoading(true);
-    fetchGroups();
+    fetchCustomers();
     setLoading(false);
   }, []);
 
-  async function fetchGroups() {
+  async function fetchCustomers() {
     try {
       let groups = await axios.get(`${BASE_URL}/customer/list`, {
         params: {
-          limit: 10,
+          limit: 20,
           page: 1,
           with_deleted: false,
           order_field: 'fullname',
@@ -96,16 +96,16 @@ const ManageMembers = () => {
     delete updateData.group_updated_at;
     delete updateData.group_deleted_by;
     delete updateData.group_deleted_at;
+    delete updateData.updated_at;
     try {
       if (dialogType === 'update')
         await axios.put(`${BASE_URL}/customer/update/${selectedMember}`, updateData);
       // if (dialogType === 'create') await axios.post(`${BASE_URL}/customers/create`, member)
-      await fetchGroups();
+      await fetchCustomers();
       setDialogOpen(false);
       setIsDialogOpen(false);
       toast.success('Success Update Member');
     } catch (error: any) {
-      alert(error.message);
       setDialogOpen(false);
       setIsDialogOpen(false);
       toast.error(error.message);
@@ -130,6 +130,7 @@ const ManageMembers = () => {
           handleClose={closeDialog}
           handleSubmit={handleSubmit}
           initialData={member}
+          fetchCustomers={fetchCustomers}
         />
         <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Members</h1>
         <Breadcrumbs>

src/pages/menu/manage-menu/blocks/AddDIalog.tsx

@@ -21,10 +21,11 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_dashboard;
 const AddDialog = () => {
-  const { showAddDialog, handleAddDialog, parents } = useManageMenusContext();
+  const { showAddDialog, handleAddDialog, parents, selectedMenu } = useManageMenusContext();
   const { reload } = useDataGrid();
   const { PostData } = useCallApi();
   const [open, setOpen] = useState(false);
@@ -57,21 +58,28 @@ const AddDialog = () => {
       return;
     }
 
-    console.log('Data dikirim ke API:', formField);
+    // console.log('Data dikirim ke API:', formField);
     const response = await PostData(`${API_URL}/menus/create`, formField);
 
-    console.log('Response from API:', response);
+    // console.log('Response from API:', response);
 
     if (response?.status) {
       handleAddDialog(false);
       resetForm();
       toast.success('Success Create Menu');
+            const createActivity = {
+              module: 'Manage Menu',
+              description: `Create Menu => ${selectedMenu}`,
+              action: 'C'
+            };
+      
+            doSaveLogActivity(createActivity);
       reload();
     } else {
       toast.error('Failed Create Menu');
       setAlert({ show: true, message: 'Failed Create Menu' });
     }
-    console.log(formField);
+    // console.log(formField);
     setAlert({ show: false, message: '' });
   };
 

src/pages/menu/manage-menu/blocks/DeleteDialog.tsx

@@ -14,6 +14,7 @@ import {
 } from '@/components/ui/dialog';
 import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_dashboard;
 const DeleteDialog = () => {
@@ -34,6 +35,13 @@ const DeleteDialog = () => {
       setAlert((prev) => ({ ...prev, show: false, message: '' }));
       handleDeleteDialog(false, null);
       toast.success('Success Delete Menu');
+      const createActivity = {
+                    module: 'Manage Menu',
+                    description: `DeleteMenu => ${selectedMenu}`,
+                    action: 'D'
+                  };
+            
+                  doSaveLogActivity(createActivity);
       reload();
     } else {
       toast.error('Failed Delete Menu');

src/pages/menu/manage-menu/blocks/EditDialog.tsx

@@ -22,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_dashboard;
 
@@ -69,6 +70,13 @@ const EditDialog = () => {
       handleEditDialog(false, null);
       resetForm();
       toast.success('Success Update Menu');
+      const createActivity = {
+        module: 'Manage Menu',
+        description: `Update Menu => ${selectedMenu.name}`,
+        action: 'U'
+      };
+
+      doSaveLogActivity(createActivity);
       reload();
     } else {
       toast.error('Failed Update Menu');

src/pages/transaction/approval-transaction/ApprovalTransaction.tsx

@@ -0,0 +1,31 @@
+import { Container, DataGridInner } from '@/components';
+import { ApprovalTransactionProvider } from './hooks/ApprovalTransactionContext';
+import { Breadcrumbs, Link } from '@mui/material';
+
+const ApprovalTransaction = () => {
+  return (
+    <ApprovalTransactionProvider>
+      <Container className="mb-7">
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</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">Transaction</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Approval Transaction</span>
+          </Link>
+        </Breadcrumbs>
+        <div className="grid gap-5 lg:gap-7.5">
+          <DataGridInner />
+        </div>
+      </Container>
+    </ApprovalTransactionProvider>
+  );
+};
+
+export default ApprovalTransaction;

src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx

@@ -0,0 +1,538 @@
+import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { useEffect, useState } from 'react';
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle
+} from '@/components/ui/dialog';
+
+const API_URL = apiConfig.transaction;
+
+const DetailApprovalTransaction = () => {
+    const { GetData } = useCallApi();
+    const {
+        showDetailDialog,
+        setShowDetailDialog,
+        selectedTransactionId
+    } = useTransactionContext();
+
+    const [transactionDetails, setTransactionDetails] = useState<any>(null);
+
+    useEffect(() => {
+        const fetchTransactionDetails = async () => {
+            if (selectedTransactionId) {
+                try {
+                    const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
+                        id: selectedTransactionId
+                    });
+                    // console.log(response?.data);
+                    setTransactionDetails(response?.data);
+                } catch (error) {
+                    console.error('Error fetching transaction', error);
+                }
+            }
+        };
+
+        if (showDetailDialog && selectedTransactionId) {
+            fetchTransactionDetails();
+        }
+    }, [showDetailDialog, selectedTransactionId, GetData]);
+
+    const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
+
+    return (
+        <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
+            <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
+                <DialogHeader>
+                    <DialogTitle>Transaction Details</DialogTitle>
+                </DialogHeader>
+                <DialogBody>
+                    {/* Tabs Navigation */}
+                    <div className="flex border-b border-gray-200">
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'detail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('detail')}
+                        >
+                            Detail Transaction
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'origincustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('origincustomer')}
+                        >
+                            Origin Customer
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('log')}
+                        >
+                            Transaction Log
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'approve' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('approve')}
+                        >
+                            Approval Log
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'p24' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('p24')}
+                        >
+                            Log P24
+                        </button>
+                    </div>
+
+                    {/* Tab Content */}
+                    <div className="py-4 overflow-y-auto max-h-[400px]">
+                        {activeTab === 'detail' && transactionDetails?.kind === 'P' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold flex items-center">
+                                    Transaction Information
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Info
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Transaction Date</p>
+                                        <p className="font-medium">{transactionDetails?.transaction_date}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Full Name</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Amount</p>
+                                        <p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.amount)}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Fee</p>
+                                        <p className="font-medium">
+                                            {transactionDetails?.kind === 'P'
+                                                ? transactionDetails?.purchase.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
+                                                : transactionDetails?.transfer.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Status</p>
+                                        <p className="font-medium">
+                                            {(() => {
+                                                let status;
+                                                if (transactionDetails?.status === 'C') {
+                                                    status = 'COMPLETE';
+                                                } else if (transactionDetails?.status === 'F') {
+                                                    status = 'FAILED';
+                                                } else if (transactionDetails?.status === 'O') {
+                                                    status = 'ON PROCESS';
+                                                } else {
+                                                    status = 'PENDING';
+                                                }
+                                                return status;
+                                            })()}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Transaction Type</p>
+                                        <p className="font-medium">
+                                            {(() => {
+                                                let kind;
+                                                if (transactionDetails?.kind === 'T') {
+                                                    kind = 'TRANSFER';
+                                                } else if (transactionDetails?.kind === 'P') {
+                                                    kind = 'PURCHASE';
+                                                } else if (transactionDetails?.kind === 'W') {
+                                                    kind = 'WITHDRAW';
+                                                } else if (transactionDetails?.kind === 'U') {
+                                                    kind = 'TOP UP';
+                                                } else if (transactionDetails?.kind === 'R') {
+                                                    kind = 'RETURN';
+                                                }
+                                                return kind;
+                                            })()}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Description</p>
+                                        <p className="font-medium">{transactionDetails?.description}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.type.name}</p>
+                                    </div>
+                                </div>
+
+                                <h3 className="font-semibold flex items-center">
+                                    Origin Wallet
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Wallet
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Description</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
+                                    </div>
+                                </div>
+
+                                <h3 className="font-semibold flex items-center">
+                                    Purchase
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Purchase
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Amount</p>
+                                        <p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.amount)}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Cashback</p>
+                                        <p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.cashback)}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Cashback Point</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.cashback_point}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Fee Amount</p>
+                                        <p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.fee_amount)}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer!=null && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold flex items-center">
+                                    Transaction Information
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Info
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Transaction Date</p>
+                                        <p className="font-medium">{transactionDetails?.transaction_date}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Full Name</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Amount</p>
+                                        <p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.transfer.amount)}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Fee</p>
+                                        <p className="font-medium">
+                                            {transactionDetails?.transfer.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Status</p>
+                                        <p className="font-medium">
+                                            {(() => {
+                                                let status;
+                                                if (transactionDetails?.status === 'C') {
+                                                    status = 'COMPLETE';
+                                                } else if (transactionDetails?.status === 'F') {
+                                                    status = 'FAILED';
+                                                } else if (transactionDetails?.status === 'O') {
+                                                    status = 'ON PROCESS';
+                                                } else {
+                                                    status = 'PENDING';
+                                                }
+                                                return status;
+                                            })()}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Transaction Type</p>
+                                        <p className="font-medium">
+                                            {(() => {
+                                                let kind;
+                                                if (transactionDetails?.kind === 'T') {
+                                                    kind = 'TRANSFER';
+                                                } else if (transactionDetails?.kind === 'P') {
+                                                    kind = 'PURCHASE';
+                                                } else if (transactionDetails?.kind === 'W') {
+                                                    kind = 'WITHDRAW';
+                                                } else if (transactionDetails?.kind === 'U') {
+                                                    kind = 'TOP UP';
+                                                } else if (transactionDetails?.kind === 'R') {
+                                                    kind = 'RETURN';
+                                                }
+                                                return kind;
+                                            })()}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Description</p>
+                                        <p className="font-medium">{transactionDetails?.description}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.type.name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Reference</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.reference}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Destination Iban</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
+                                    </div>
+                                </div>
+
+                                <h3 className="font-semibold flex items-center">
+                                    Destination Wallet
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Wallet
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_wallet.name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Description</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
+                                    </div>
+                                </div>
+
+                                <h3 className="font-semibold flex items-center">
+                                    Destination Customer
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Destination Customer
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">MSISDN</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Email</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">MSISDN</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
+                                    </div>
+                                </div>
+
+                                <h3 className="font-semibold flex items-center">
+                                    Origin Wallet
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Wallet
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Description</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+
+                        {activeTab === 'origincustomer' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Origin Customer</h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Full Name</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Phone Number</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer.msisdn}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Email</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer.email}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Username</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer.username}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'log' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Transaction Logs</h3>
+                                <div className="border rounded-lg overflow-x-auto">
+                                    <table className="min-w-full table-auto">
+                                        <thead>
+                                            <tr className="bg-gray-100">
+                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
+                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
+                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th>
+                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
+                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
+                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Request End Point</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
+                                                transactionDetails.log.map((log: { request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
+                                                    <tr key={index} className="border-t">
+                                                        <td className="px-4 py-2 font-medium">
+                                                            {(() => {
+                                                                let status;
+                                                                if (log.status === 'P') {
+                                                                    status = 'PENDING';
+                                                                } else if (log.status === 'O') {
+                                                                    status = 'ON PROCESS';
+                                                                } else if (log.status === 'F') {
+                                                                    status = 'FAILED';
+                                                                } else if (log.status === 'C') {
+                                                                    status = 'COMPLETE';
+                                                                }
+                                                                return status;
+                                                            })()}
+                                                        </td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_date ?? '-'}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.response_date ?? '-'}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_body ?? '-'}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.response_body ?? '-'}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td>
+                                                    </tr>
+                                                ))
+                                            ) : (
+                                                <tr>
+                                                    <td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
+                                                        No logs available
+                                                    </td>
+                                                </tr>
+                                            )}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'approve' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Approval Logs</h3>
+                                {transactionDetails?.log_approve.length === 0 ? (
+                                    <p className="text-sm text-gray-500">No data available</p>
+                                ) : (
+                                    <div className="border rounded-lg overflow-x-auto">
+                                        <table className="min-w-full table-auto">
+                                            <thead>
+                                                <tr className="bg-gray-100">
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Created At</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
+                                                    transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
+                                                        <tr key={index} className="border-t">
+                                                            <td className="px-4 py-2 font-medium">
+                                                                {(() => {
+                                                                    let status;
+                                                                    if (log.status === 'W') {
+                                                                        status = 'WAITING';
+                                                                    } else if (log.status === 'Y') {
+                                                                        status = 'APPROVE';
+                                                                    } else if (log.status === 'N') {
+                                                                        status = 'REJECT';
+                                                                    } else if (log.status === 'T') {
+                                                                        status = 'NO NEED';
+                                                                    }
+                                                                    return status;
+                                                                })()}
+                                                            </td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td>
+                                                        </tr>
+                                                    ))
+                                                ) : (
+                                                    <tr>
+                                                        <td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
+                                                            No logs available
+                                                        </td>
+                                                    </tr>
+                                                )}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+                        {activeTab === 'p24' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">P24 Logs</h3>
+                                {transactionDetails?.p24.length === 0 ? (
+                                    <p className="text-sm text-gray-500">No data available</p>
+                                ) : (
+                                    <div className="border rounded-lg overflow-x-auto">
+                                        <table className="min-w-full table-auto">
+                                            <thead>
+                                                <tr className="bg-gray-100">
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Type</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {transactionDetails?.p24 && transactionDetails?.p24.length > 0 ? (
+                                                    transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
+                                                        <tr key={index} className="border-t">
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.type}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_date}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.response_date}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td>
+                                                        </tr>
+                                                    ))
+                                                ) : (
+                                                    <tr>
+                                                        <td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
+                                                            No logs available
+                                                        </td>
+                                                    </tr>
+                                                )}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+                    </div>
+                </DialogBody>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default DetailApprovalTransaction;

src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx

@@ -0,0 +1,82 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
+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 w-[50%] gap-3 items-center">
+            <label className="input input-sm w-1/3">
+              From
+              <input
+                type="date"
+                placeholder="From"
+                value={trxDate.from}
+                onChange={(event) =>
+                  settrxDate({ ...trxDate, from: event.target.value })
+                }
+                name="from"
+              />
+            </label>
+
+            <label className="input input-sm w-1/3">
+              To
+              <input
+                type="date"
+                placeholder="To"
+                value={trxDate.to}
+                onChange={(event) =>
+                  settrxDate({ ...trxDate, to: event.target.value })
+                }
+                name="to"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;

src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx

@@ -0,0 +1,268 @@
+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 axios from 'axios';
+import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallApi } from '@/hooks';
+import ListToolbar from '../blocks/ListToolbar';
+import { Button } from '@/components/ui/button';
+import { useNavigate } from 'react-router';
+import DetailApprovalTransaction from '../blocks/DetailApprovalTransaction';
+
+interface ApprovalTransactionProps {
+  id: number;
+  name: string;
+}
+
+interface ContextProps {
+  getTransactionLists: (
+    limit: number,
+    page: number,
+    with_deleted: boolean,
+    order_field: any,
+    order_direction: any,
+    filter: any
+  ) => Promise<{ data: ApprovalTransactionProps[]; totalCount: number } | undefined>;
+  showDetailDialog: boolean;
+  setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedTransactionId: number | null;
+  setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
+}
+
+const initialProps: ContextProps = {
+  getTransactionLists: async () => ({ data: [], totalCount: 0 }),
+  showDetailDialog: false,
+  setShowDetailDialog: () => { },
+  selectedTransactionId: null,
+  setSelectedTransactionId: () => { }
+};
+
+const ManageApprovalTransactionContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.transaction;
+
+const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
+  const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
+  const [transaction, setTransaction] = useState<ApprovalTransactionProps[]>([]);
+  const { GetData } = useCallApi();
+  const navigate = useNavigate();
+  const handleNavigate = (path: string) => {
+    const url = navigate(`${API_URL}/transaction/history/${path}`);
+  };
+
+  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: 'transaction_date',
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        },
+        cell: ({ row }) => {
+          // Memformat tanggal dan waktu dari ISO ke format biasa (DD-MM-YYYY HH:MM:SS)
+          const transactionDate = new Date(row.original.transaction_date);
+          const formattedDateTime = transactionDate.toLocaleString('en-GB', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false // Gunakan format 24 jam
+          });
+          return formattedDateTime; // Format DD-MM-YYYY HH:MM:SS (menggunakan waktu yang sudah ada)
+        }
+      },      
+      {
+        accessorKey: 'origin_customer.fullname',
+        header: ({ column }) => <DataGridColumnHeader title="Full Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => {
+          const purchaseAmount = row?.purchase?.amount;
+          const transferAmount = row?.transfer?.amount;
+
+          return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
+        },
+        id: 'amount',
+        header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]',
+        },
+      },
+      {
+        accessorFn: (row) => {
+          const purchaseAmount = row?.purchase?.fee_amount;
+          const transferAmount = row?.transfer?.fee_amount;
+
+          return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
+        },
+        id: 'feeamount',
+        header: ({ column }) => <DataGridColumnHeader title="Fee Amount" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]',
+        },
+      },
+      {
+        accessorFn: (row) => {
+          let status;
+          if (row.status === 'C') {
+            status = 'COMPLETE';
+          } else if (row.status === 'F') {
+            status = 'FAILED';
+          } else if (row.status === 'O') {
+            status = 'ON PROCESS';
+          } else {
+            status = 'PENDING';
+          }
+          return status;
+        },
+        accessorKey: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]',
+        },
+      },
+      {
+        accessorKey: 'description',
+        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorKey: 'type.name',
+        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <div key={`actions-${row.id}`}>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => {
+                  setSelectedTransactionId(row.id);
+                  setShowDetailDialog(true);
+                }}
+              >
+                <KeenIcon icon="eye" />
+              </button>
+            </div>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    []);
+
+  const getTransactionLists = 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 = {
+        "Transactions.transaction_date": {
+          from: startdate + " 00:00:00",
+          to: enddate + " 23:59:59"
+        }
+      };
+
+      const response = await GetData(`${API_URL}/transaction/history`, {
+        limit,
+        page: page + 1,
+        with_deleted: false,
+        order_field: "Transactions.created_at",
+        order_direction: 'DESC',
+        filter: JSON.stringify(formattedFilter)
+      });
+
+      setTransaction(response?.data.list);
+      return { data: response?.data.list, totalCount: response?.data.total_count };
+    } catch (error) {
+      console.error('Error fetching transaction', error);
+    }
+  };
+
+  return (
+    <ManageApprovalTransactionContext.Provider
+      value={{
+        getTransactionLists,
+        showDetailDialog,
+        setShowDetailDialog,
+        selectedTransactionId,
+        setSelectedTransactionId
+      }}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+      <DetailApprovalTransaction />
+
+      <DataGridProvider
+        columns={columns}
+        pagination={{ size: 10 }}
+        toolbar={<ListToolbar />}
+        layout={{ card: true }}
+        sorting={[{ id: 'id', desc: false }]}
+        serverSide={true}
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+          getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
+        }
+      >
+        {children}
+      </DataGridProvider>
+    </ManageApprovalTransactionContext.Provider>
+  );
+};
+
+export { ApprovalTransactionProvider, ManageApprovalTransactionContext };
+export type { ApprovalTransactionProps };

src/pages/transaction/approval-transaction/hooks/useApprovalTransactionContext.tsx

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

src/pages/transaction/history-transaction/Transaction.tsx

@@ -17,7 +17,7 @@ const Transaction = () => {
           </Link>
 
           <Link underline="none" color="inherit">
-            <span className="text-sm">Transaction</span>
+            <span className="text-sm">History Transaction</span>
           </Link>
         </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">

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

@@ -208,8 +208,44 @@ const DetailTransaction = () => {
                                 </div>
                             </div>
                         )}
+                        {activeTab === 'detail' && transactionDetails?.kind === 'P' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold flex items-center">
+                                    Product Information
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Product Info
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Product Name</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Price Cash</p>
+                                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_cash)}
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Price Point</p>
+                                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_point)}
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Product Type</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.type}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Provider Name</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.provider.description}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Provider Type</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.provider.type}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
 
-                        {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer!=null && (
+                        {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold flex items-center">
                                     Transaction Information

src/pages/wallet/wallet-history/blocks/ListToolbar.tsx

@@ -11,15 +11,15 @@ const ListToolbar = () => {
       <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">
+            {/* <label className="input input-sm w-1/3">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
                 placeholder="Search Wallet"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={(table.getColumn('msisdn')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                onChange={(event) => table.getColumn('msisdn')?.setFilterValue(event.target.value)}
               />
-            </label>
+            </label> */}
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"

src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx

@@ -71,9 +71,8 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        accessorFn: (row) => row.name,
+        accessorKey: 'msisdn',
-        id: 'name',
+        header: ({ column }) => <DataGridColumnHeader title="MSISDN" column={column} />,
-        header: ({ column }) => <DataGridColumnHeader title="Wallet Name" column={column} />,
         enableSorting: true,
         enableHiding: false,
         meta: {
@@ -82,9 +81,63 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorFn: (row) => row.currency.name,
+        accessorKey: 'amount' ,
+        header: ({ column }) => <DataGridColumnHeader title="Ammount" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[200px]'
+        }
+      },
+      {
+        accessorKey: 'trx_count_today' ,
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Count Today" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[200px]'
+        }
+      },
+      {
+        accessorKey: 'amount_this_month' ,
+        header: ({ column }) => <DataGridColumnHeader title="Ammount This Month" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[200px]'
+        }
+      },
+      {
+        accessorKey: 'CreatedAt' ,
+        header: ({ column }) => <DataGridColumnHeader title="Created At" column={column} />,
+        cell: ({ row }) => 
+          new Date(row.original.CreatedAt).toLocaleString('id-ID', {
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+          }),
+                enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[200px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.balance_type.name,
+        id: 'balance_type_name',
+        header: ({ column }) => <DataGridColumnHeader title="Balance Type Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[200px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.balance_type.currency.name,
         id: 'currency_name',
-        header: ({ column }) => <DataGridColumnHeader title="Currency" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Currency Name" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -92,9 +145,9 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorFn: (row) => row.currency.prefix,
+        accessorFn: (row) => row.balance_type.currency.code,
-        id: 'currency_prefix',
+        id: 'currency_code',
-        header: ({ column }) => <DataGridColumnHeader title="Prefix" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Currency Code" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -102,64 +155,37 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorFn: (row) => row.status,
+        accessorFn: (row) => row.group.name,
-        id: 'status',
+        id: 'group_name',
-        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Group Name" column={column} />,
         enableSorting: false,
         enableHiding: false,
-        cell: ({ row }) => {
+        meta: {
-          const isActive = row.original.status === 'Y';
+          headerClassName: 'w-[200px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.group.is_bank,
+        id: 'is_bank',
+        header: ({ column }) => <DataGridColumnHeader title="Is Bank" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[200px]'
+        }
+      }
 
-          return (
-            <span
-              className={`px-2 py-1 text-xs font-semibold rounded-full ${
-                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
-              }`}
-            >
-              {isActive ? 'Active' : 'Inactive'}
-            </span>
-          );
-        },
-        meta: {
-          headerClassName: 'w-[100px]',
-          cellClassName: 'text-center'
-        }
-      }
-      // {
-      //   id: 'actions',
-      //   header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
-      //   cell: (data) => {
-      //     const row = data.row.original;
-      //     return (
-      //       <>
-      //         <button
-      //           className="btn btn-sm btn-icon btn-clear btn-light"
-      //           onClick={() => handleEditDialog(true, row)}
-      //         >
-      //           <KeenIcon icon="notepad-edit" />
-      //         </button>
-      //         <button
-      //           className="btn btn-sm btn-icon btn-clear btn-light"
-      //           onClick={() => handleDeleteDialog(true, row)}
-      //         >
-      //           <KeenIcon icon="trash" />
-      //         </button>
-      //       </>
-      //     );
-      //   },
-      //   meta: {
-      //     headerClassName: 'w-[150px]'
-      //   }
-      // }
     ],
     []
   );
 
+  
+
   const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
       filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() };
-      const response = await GetData(`${API_URL_WALLET}/dashboard/wallet`, {
+      const response = await GetData(`${API_URL_WALLET}/dashboard/balance/`, {
         limit,
         page: page + 1,
         with_deleted: false,
@@ -167,7 +193,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         // filter: JSON.stringify(filter)
       });
-      console.log(response?.data);
+      // console.log(response?.data);
       setWallets(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
@@ -192,7 +218,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
       <Toaster expand visibleToasts={9} duration={3000} />
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 5 }}
+        pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

src/routing/AppRoutingSetup.tsx

@@ -8,7 +8,8 @@ import { ErrorsRouting } from '@/errors';
 
 import DashboardHomePage from '@/pages/dashboards/home/DashboardHomePage';
 import ManageUserPage from '@/pages/settings/user/manage-user/ManageUserPage';
-import Transaction from '@/pages/transaction/Transaction';
+import Transaction from '@/pages/transaction/history-transaction/Transaction';
+import ApprovalTransaction from '@/pages/transaction/approval-transaction/ApprovalTransaction';
 import LogActivityPage from '@/pages/settings/user/log-activity/LogActivityPage';
 import ManagePositionPage from '@/pages/settings/user/manage-position/ManagePositionPage';
 import ManageAccount from '@/pages/account/manage-account/ManageAccount';
@@ -88,6 +89,7 @@ const AppRoutingSetup = (): ReactElement => {
           <Route path="/notification/notification-management" element={<ManageNotification />} />
 
           <Route path="/transaction" element={<Transaction />} />
+          <Route path="/approval-transaction" element={<ApprovalTransaction />} />
           <Route path="/menu/menu-management" element={<ManageMenu />} />
           <Route path="/menu/welcome" element={<Welcome />} />
           <Route path="/message/inbox" element={<Inbox />} />