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

.env.development

@@ -2,6 +2,9 @@ VITE_APP_NAME=tpay-dashboard-tl
 VITE_APP_VERSION=1=9.1.1
 GENERATE_SOURCEMAP=false
 
+# VITE_APP_API_URL=
+VITE_APP_API_URL=http://127.0.0.1:4003/apitest
 VITE_APP_API_URL=https://tpay.shiblysolution.id/api
-# VITE_APP_API_URL=http://127.0.0.1:4003/api
+# VITE_APP_URL_TRANSACTION=https://tpay.shiblysolution.id/test/x/api
+# VITE_APP_API_URL=http://127.0.0.1:4003/apitesting
 VITE_ENV=development

.gitignore

@@ -6,6 +6,8 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+yarn.lock
+
 
 .env
 node_modules
@@ -24,4 +26,5 @@ yarn.lock
 *.njsproj
 *.sln
 *.sw?
-**/src/*.js
+**/src/*.js
+.env

package.json

@@ -69,6 +69,7 @@
     "react-inlinesvg": "^4.1.4",
     "react-intl": "^6.8.7",
     "react-leaflet": "^4.2.1",
+    "react-number-format": "^5.4.3",
     "react-query": "^3.39.3",
     "react-router": "^6.28.0",
     "react-router-dom": "^6.28.0",
@@ -105,5 +106,9 @@
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.14.0",
     "vite": "^5.4.11"
-  }
+  },
+  "description": "## Quick Setup",
+  "main": "postcss.config.js",
+  "author": "",
+  "license": "ISC"
 }

src/components/data-grid/DataGridContext.tsx

@@ -151,7 +151,10 @@ export const DataGridProvider = <TData extends object>(props: TDataGridProps<TDa
     enableRowSelection: mergedProps.rowSelection,
     onRowSelectionChange: handleRowSelectionChange,
     onSortingChange: (newSorting) => !loading && setSorting(newSorting),
-    onColumnFiltersChange: (newFilters) => !loading && setColumnFilters(newFilters),
+    onColumnFiltersChange: (newFilters) => {
+      console.log('New Filters:', newFilters); // Debugging
+      !loading && setColumnFilters(newFilters);
+    },
     onColumnVisibilityChange: setColumnVisibility,
     onPaginationChange: (newPagination) => !loading && setPagination(newPagination),
     getCoreRowModel: getCoreRowModel(),
@@ -165,6 +168,8 @@ export const DataGridProvider = <TData extends object>(props: TDataGridProps<TDa
     manualFiltering: mergedProps.serverSide
   });
 
+  // console.log('Filtered Rows:', table.getFilteredRowModel().rows);
+
   return (
     <DataGridContext.Provider
       value={{

src/components/ui/dialog.tsx

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/40  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}

src/config/api.config.ts

@@ -4,6 +4,7 @@ interface apiConfigProps {
   service_master_data: string;
   service_transaction: string;
   service_wallet: string;
+  transaction: string
 }
 
 const API_URL = import.meta.env.VITE_APP_API_URL;
@@ -14,7 +15,8 @@ const apiConfig: apiConfigProps = {
   // service_master_data: `${API_URL}/m`
   service_master_data: `${API_URL}/t`,
   service_transaction: `${API_URL}/tt`,
-  service_wallet: `${API_URL}/w`
+  service_wallet: `${API_URL}/w`,
+  transaction: `${API_URL}/x`
 };
 
 export { apiConfig };

src/layouts/demo2/footer/Footer.tsx

@@ -9,7 +9,12 @@ const Footer = () => {
         <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
           <div className="flex order-2 md:order-1  gap-2 font-normal text-2sm">
             <span className="text-gray-500">{currentYear}&copy;</span>
-            <a href="https://" target="_blank" className="text-gray-600 hover:text-primary">
+            <a
+              href="https://t-pay.tl/"
+              target="_blank"
+              className="text-gray-600 hover:text-primary"
+              rel="noopener noreferrer"
+            >
               Brillian Dev.
             </a>
           </div>

src/pages/master/aldeias/AldeiasMaster.tsx

@@ -9,7 +9,7 @@ const AldeiasMaster = () => {
   return (
     <ManageAldeiasContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Aldeias</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Aldeias</h1>
         <Breadcrumbs sx={{ mb: 2 }}>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>

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

@@ -46,7 +46,7 @@ const AddDialog = () => {
   });
   const initialState = {
     name: '',
-    sucos_id: 0,
+    sucosId: 0,
     created_by: '',
     created_at: ''
   };
@@ -99,7 +99,7 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name === '' || formField.sucos_id === 0) {
+    if (formField.name === '' || formField.sucosId === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -168,11 +168,14 @@ const AddDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {sucos.find((suco) => suco.sucos_id === formField.sucos_id)?.sucos_name ||
+                          {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
                             'Select Sucos'}
                         </button>
                       </PopoverTrigger>
-                      <PopoverContent className="w-[400px] p-0">
+                      <PopoverContent
+                        className="w-[400px] p-0"
+                        onWheel={(e) => e.stopPropagation()}
+                      >
                         <Command>
                           <CommandInput placeholder="Search Sucos..." />
                           <CommandList>
@@ -181,11 +184,11 @@ const AddDialog = () => {
                               {sucos.map((suco) => (
                                 <CommandItem
                                   key={suco.sucos_id}
-                                  value={suco.sucos_name}
+                                  value={suco.sucos_id.toString()}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      sucos_id: suco.sucos_id
+                                      sucosId: suco.sucos_id
                                     });
                                     setOpen(false);
                                   }}

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

@@ -2,38 +2,42 @@ import { apiConfig } from '@/config/api.config';
 import { useManageAldeiasContext } from '../hooks/useManageAldeiasContext';
 import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
+
 const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedAldeias } = useManageAldeiasContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
-  })
+  });
 
   const doDeleteAldeias = useCallback(async () => {
-    const response = await DeleteData(`${API_URL}/aldeias/delete/${selectedAldeias}/${enforce}`, {
+    if (!selectedAldeias) {
+      toast.error('No Aldeias selected');
+      return;
+    }
+
+    const response = await DeleteData(`${API_URL}/aldeias/delete/${selectedAldeias}/false`, {
       id: selectedAldeias
     });
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Aldeias');
       reload();
     } else {
+      setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Aldeias');
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
     }
-  }, [selectedAldeias, enforce]);
+  }, [selectedAldeias, DeleteData, handleDeleteDialog, reload]);
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
@@ -41,16 +45,7 @@ const DeleteDialog = () => {
         <DialogHeader className="p-0 border-0 block">
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
+            <span className="text-sm">You will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
           </Alert>
           {alert.show && (
             <Alert variant="danger">

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

@@ -45,7 +45,7 @@ const EditDialog = () => {
   });
   const initialState = {
     name: '',
-    sucos_id: 0,
+    sucosId: 0,
     updated_by: '',
     updated_at: ''
   };
@@ -102,13 +102,13 @@ const EditDialog = () => {
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
-        sucos_id: response.data.sucos.id
+        sucosId: response.data.sucos.id
       }));
     } else {
       setFormField((prev) => ({
         ...prev,
         name: '',
-        sucos_id: 0
+        sucosId: 0
       }));
     }
   }, []);
@@ -116,7 +116,7 @@ const EditDialog = () => {
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name === '' || formField.sucos_id === 0) {
+    if (formField.name === '' || formField.sucosId === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -191,7 +191,7 @@ const EditDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {sucos.find((suco) => suco.sucos_id === formField.sucos_id)?.sucos_name ||
+                          {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
                             'Select Sucos'}
                         </button>
                       </PopoverTrigger>
@@ -208,7 +208,7 @@ const EditDialog = () => {
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      sucos_id: suco.sucos_id
+                                      sucosId: suco.sucos_id
                                     });
                                     setOpen(false);
                                   }}

src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx

@@ -77,16 +77,6 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.name,
         id: 'name',

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

@@ -68,16 +68,6 @@ const ManageConversionContextProvider = ({ children }: { children: React.ReactNo
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.name,
         id: 'name',

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

@@ -1,69 +1,56 @@
 import { Alert, useDataGrid } from '@/components';
 import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
-import axios from 'axios';
 import { apiConfig } from '@/config/api.config';
 import { useCallApi } from '@/hooks';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
-import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { DialogDescription } from '@radix-ui/react-dialog';
 
 const API_URL = apiConfig.service_master_data;
 
 const DeleteDialog = () => {
-  const { showDeleteDialog, handleDeleteDialog, selectedMunicipios, municipios } =
+  const { showDeleteDialog, handleDeleteDialog, selectedMunicipios } = useManageMunicipiosContext();
-    useManageMunicipiosContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
 
   const doDeleteMunicipio = useCallback(async () => {
+    if (!selectedMunicipios) {
+      toast.error('No Municipio selected');
+      return;
+    }
+
     const response = await DeleteData(
-      `${API_URL}/municipios/delete/${selectedMunicipios}/${enforce}`,
+      `${API_URL}/municipios/delete/${selectedMunicipios}/false`,
-      {
+      { id: selectedMunicipios }
-        id: selectedMunicipios
-      }
     );
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Municipio');
       reload();
-      // const createActivity = {
-      //   module: 'Manage Municipio',
-      //   description: `Delete Municipio => ${selectedMunicipios}`,
-      //   action: 'D'
-      // };
-
-      // doSaveLogActivity(createActivity);
     } else {
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      setAlert({ show: true, message: response?.message });
+      toast.error('Failed Delete Municipio');
     }
-  }, [selectedMunicipios, enforce]);
+  }, [selectedMunicipios, DeleteData, handleDeleteDialog, reload]);
 
   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>
+          <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
+            <span className="text-sm">You will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -72,10 +59,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeleteMunicipio()}>
+          <Button variant="destructive" onClick={doDeleteMunicipio}>
             Delete
           </Button>
         </DialogFooter>

src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx

@@ -102,16 +102,6 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         // accessorFn: (row) => row.name,
         // id: 'name',

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

@@ -174,10 +174,13 @@ const AddDialog = () => {
                             ?.name || 'Select Municipios'}
                         </button>
                       </PopoverTrigger>
-                      <PopoverContent className="w-[400px] p-0">
+                      <PopoverContent
+                        className="w-[400px] p-0"
+                        onWheel={(e) => e.stopPropagation()}
+                      >
                         <Command>
                           <CommandInput placeholder="Search Municipios..." />
-                          <CommandList>
+                          <CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
                             <CommandEmpty>No Municipio found.</CommandEmpty>
                             <CommandGroup>
                               {municipios.map((municipio) => (

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

@@ -1,11 +1,10 @@
 import { Alert, useDataGrid } from '@/components';
 import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
 import { useCallApi } from '@/hooks';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
@@ -14,46 +13,42 @@ const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedPostoAdms } = useManagePostoAdmsContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
 
   const doDeletePostoAdm = useCallback(async () => {
+    if (!selectedPostoAdms) {
+      toast.error('No Posto Adm selected');
+      return;
+    }
+
     const response = await DeleteData(
-      `${API_URL}/postoadms/delete/${selectedPostoAdms}/${enforce}`,
+      `${API_URL}/postoadms/delete/${selectedPostoAdms}/false`,
-      {
+      { id: selectedPostoAdms }
-        id: selectedPostoAdms
-      }
     );
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Posto Adm');
       reload();
     } else {
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      setAlert({ show: true, message: response?.message });
+      toast.error('Failed Delete Posto Adm');
     }
-  }, [selectedPostoAdms, enforce]);
+  }, [selectedPostoAdms, DeleteData, handleDeleteDialog, reload]);
 
   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">
+        <DialogTitle></DialogTitle>
+        <DialogDescription></DialogDescription>
         <DialogHeader className="p-0 border-0 block">
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
+            <span className="text-sm">You will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -62,10 +57,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeletePostoAdm()}>
+          <Button variant="destructive" onClick={doDeletePostoAdm}>
             Delete
           </Button>
         </DialogFooter>

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

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

src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx

@@ -83,17 +83,6 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.PostoAdms_id,
-        id: 'id',
-        // accessorKey: 'PostoAdms_id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.PostoAdms_name,
         id: 'name',
@@ -110,7 +99,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
       {
         accessorFn: (row) => row.municipios_name,
         id: 'municipios_name',
-        header: ({ column }) => <DataGridColumnHeader title="Municipio Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Municipios Name" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {

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

@@ -40,17 +40,17 @@ const AddDialog = () => {
     message: ''
   });
   const initialState = {
-    products_name: '',
+    name: '',
-    products_code: '',
+    code: '',
-    products_type: '',
+    type: '',
-    products_description: '',
+    description: '',
-    products_price_point: 0,
+    price_point: 0,
-    products_price_cash: 0,
+    price_cash: 0,
-    products_cashback_point: 0,
+    cashback_point: 0,
-    products_cashback_cash: 0,
+    cashback_cash: 0,
-    products_status: '',
+    status: '',
-    products_provider: '',
+    provider: '',
-    products_process_on_third_party: '',
+    process_on_third_party: '',
     created_by: '',
     created_at: ''
   };
@@ -104,15 +104,15 @@ const AddDialog = () => {
     e.preventDefault();
 
     if (
-      formField.products_name.trim() === '' ||
+      formField.name.trim() === '' ||
-      formField.products_type.trim() === '' ||
+      formField.type.trim() === '' ||
-      formField.products_code.trim() === '' ||
+      formField.code.trim() === '' ||
-      formField.products_description.trim() === '' ||
+      formField.description.trim() === '' ||
-      formField.products_price_point === 0 ||
+      formField.price_point === 0 ||
-      formField.products_price_cash === 0 ||
+      formField.price_cash === 0 ||
-      formField.products_cashback_point === 0 ||
+      formField.cashback_point === 0 ||
-      formField.products_cashback_cash === 0 ||
+      formField.cashback_cash === 0 ||
-      formField.products_status.trim() === '' ||
+      formField.status.trim() === '' ||
       formField.created_by.trim() === '' ||
       formField.created_at.trim() === ''
     ) {
@@ -155,9 +155,11 @@ const AddDialog = () => {
         <DialogBody ref={parentRef} className="overflow-y-auto">
           <div className="flex flex-col">
             {alert.show && (
-              <Alert variant="danger">
+              <div className="fixed top-[70px] left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
-                <h3>{alert.message}</h3>
+                <Alert variant="danger">
-              </Alert>
+                  <h3>{alert.message}</h3>
+                </Alert>
+              </div>
             )}
 
             <form onSubmit={handleSubmit}>
@@ -170,9 +172,9 @@ const AddDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.products_name}
+                      value={formField.name}
                       onChange={(e) =>
-                        setFormField({ ...formField, products_name: e.target.value })
+                        setFormField({ ...formField, name: e.target.value })
                       }
                     />
                   </div>
@@ -186,9 +188,9 @@ const AddDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.products_type}
+                      value={formField.type}
                       onChange={(e) =>
-                        setFormField({ ...formField, products_type: e.target.value })
+                        setFormField({ ...formField, type: e.target.value })
                       }
                     />
                   </div>
@@ -202,9 +204,9 @@ const AddDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.products_code}
+                      value={formField.code}
                       onChange={(e) =>
-                        setFormField({ ...formField, products_code: e.target.value })
+                        setFormField({ ...formField, code: e.target.value })
                       }
                     />
                   </div>
@@ -218,9 +220,9 @@ const AddDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.products_description}
+                      value={formField.description}
                       onChange={(e) =>
-                        setFormField({ ...formField, products_description: e.target.value })
+                        setFormField({ ...formField, description: e.target.value })
                       }
                     />
                   </div>
@@ -236,12 +238,12 @@ const AddDialog = () => {
                       type="number"
                       min={0}
                       step={0.01}
-                      value={formField.products_price_point}
+                      value={formField.price_point}
                       onChange={(e) => {
                         const value = parseFloat(e.target.value);
                         setFormField({
                           ...formField,
-                          products_price_point: isNaN(value) ? 0 : value
+                          price_point: isNaN(value) ? 0 : value
                         });
                       }}
                     />
@@ -258,12 +260,12 @@ const AddDialog = () => {
                       type="number"
                       min={0}
                       step={0.01}
-                      value={formField.products_price_cash}
+                      value={formField.price_cash}
                       onChange={(e) => {
                         const value = parseFloat(e.target.value);
                         setFormField({
                           ...formField,
-                          products_price_cash: isNaN(value) ? 0 : value
+                          price_cash: isNaN(value) ? 0 : value
                         });
                       }}
                     />
@@ -280,12 +282,12 @@ const AddDialog = () => {
                       type="number"
                       min={0}
                       step={0.01}
-                      value={formField.products_cashback_point}
+                      value={formField.cashback_point}
                       onChange={(e) => {
                         const value = parseFloat(e.target.value);
                         setFormField({
                           ...formField,
-                          products_cashback_point: isNaN(value) ? 0 : value
+                          cashback_point: isNaN(value) ? 0 : value
                         });
                       }}
                     />
@@ -302,12 +304,12 @@ const AddDialog = () => {
                       type="number"
                       min={0}
                       step={0.01}
-                      value={formField.products_cashback_cash}
+                      value={formField.cashback_cash}
                       onChange={(e) => {
                         const value = parseFloat(e.target.value);
                         setFormField({
                           ...formField,
-                          products_cashback_cash: isNaN(value) ? 0 : value
+                          cashback_cash: isNaN(value) ? 0 : value
                         });
                       }}
                     />
@@ -320,9 +322,9 @@ const AddDialog = () => {
                       Status<span className="text-red-500">*</span>
                     </label>
                     <Select
-                      value={formField.products_status}
+                      value={formField.status}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, products_status: value })
+                        setFormField({ ...formField, status: value })
                       }
                     >
                       <SelectTrigger>
@@ -342,9 +344,9 @@ const AddDialog = () => {
                       Provider ID
                     </label>
                     <Select
-                      value={formField.products_provider}
+                      value={formField.provider}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, products_provider: value.toString() })
+                        setFormField({ ...formField, provider: value.toString() })
                       }
                     >
                       <SelectTrigger>
@@ -370,9 +372,9 @@ const AddDialog = () => {
                       Process on Third Party<span className="text-red-500">*</span>
                     </label>
                     <Select
-                      value={formField.products_process_on_third_party}
+                      value={formField.process_on_third_party}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, products_process_on_third_party: value })
+                        setFormField({ ...formField, process_on_third_party: value })
                       }
                     >
                       <SelectTrigger>

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

@@ -2,57 +2,49 @@ import { apiConfig } from '@/config/api.config';
 import { useManageProductsContext } from '../hooks/useManageProductsContext';
 import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
+
 const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedProducts } = useManageProductsContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
+  const [alert, setAlert] = useState({ show: false, message: '' });
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
 
   const doDeleteProduct = useCallback(async () => {
-    const response = await DeleteData(`${API_URL}/product/delete/${selectedProducts}/${enforce}`, {
+    if (!selectedProducts) {
+      toast.error('No product selected');
+      return;
+    }
+
+    const response = await DeleteData(`${API_URL}/product/delete/${selectedProducts}/false`, {
       id: selectedProducts
     });
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Product');
       reload();
     } else {
+      setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Product');
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
     }
-  }, [selectedProducts, enforce]);
+  }, [selectedProducts, DeleteData, handleDeleteDialog, reload]);
 
   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">
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden">
+        <DialogTitle></DialogTitle>
+        <DialogDescription></DialogDescription>
         <DialogHeader className="p-0 border-0 block">
-          <DialogTitle></DialogTitle>
-          <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
+            <span className="text-sm">You will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -61,10 +53,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeleteProduct()}>
+          <Button variant="destructive" onClick={doDeleteProduct}>
             Delete
           </Button>
         </DialogFooter>

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

@@ -72,16 +72,6 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.products_id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.products_name,
         id: 'name',
@@ -162,7 +152,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
       const response = await GetData(`${API_URL}/product/list`, {
         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/profession/blocks/AddDialog.tsx

@@ -42,26 +42,29 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
-  const doCreateProfession = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
+  const doCreateProfession = useCallback(
-    e.preventDefault();
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
 
-    const response = await PostData(`${API_URL}/profession/create`, formField);
+      const response = await PostData(`${API_URL}/profession/create`, formField);
 
-    if (response?.status) {
+      if (response?.status) {
-      resetForm();
+        resetForm();
-      handleAddDialog(false);
+        handleAddDialog(false);
-      toast.success('Success Create Profession');
+        toast.success('Success Create Profession');
-      reload();
+        reload();
-    } else {
+      } else {
-      toast.error('Failed Create Profession');
+        toast.error('Failed Create Profession');
-      setAlert({ show: true, message: response?.message });
+        setAlert({ show: true, message: response?.message });
-    }
+      }
-  }, []);
+    },
+    [formField]
+  );
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name.trim() === '') {
+    if (!formField.name.trim()) {
       setAlert({ show: true, message: 'Please fill name field.' });
       return;
     }
@@ -79,7 +82,7 @@ const AddDialog = () => {
         created_at: formattedTime
       });
     }
-  }, [formattedTime]);
+  }, [formattedTime, parsedUser.username, showAddDialog]);
 
   useEffect(() => {
     if (showAddDialog === false) {

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

@@ -2,67 +2,48 @@ import { apiConfig } from '@/config/api.config';
 import { useManageProfessionContext } from '../hooks/useManageProfessionContext';
 import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import {
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
+
 const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedProfession } = useManageProfessionContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
+  const [alert, setAlert] = useState({ show: false, message: '' });
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
 
   const doDeleteProfession = useCallback(async () => {
-    const response = await DeleteData(
+    if (!selectedProfession) {
-      `${API_URL}/profession/delete/${selectedProfession}/${enforce}`,
+      toast.error('No profession selected');
-      {
+      return;
-        id: selectedProfession
+    }
-      }
+    const response = await DeleteData(`${API_URL}/profession/delete/${selectedProfession}/false`, {
-    );
+      id: selectedProfession
+    });
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Profession');
       reload();
     } else {
+      setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Profession');
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
     }
-  }, [selectedProfession, enforce]);
+  }, [selectedProfession, DeleteData, handleDeleteDialog, reload]);
 
   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">
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden">
         <DialogHeader className="p-0 border-0 block">
           <DialogTitle></DialogTitle>
           <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
+            <span className="text-sm">You will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -71,10 +52,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeleteProfession()}>
+          <Button variant="destructive" onClick={doDeleteProfession}>
             Delete
           </Button>
         </DialogFooter>

src/pages/master/profession/hooks/ManageProfessionContext.tsx

@@ -67,16 +67,6 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.name,
         id: 'name',
@@ -127,7 +117,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
       const response = await GetData(`${API_URL}/profession/list`, {
         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/provider/blocks/AddDialog.tsx

@@ -33,6 +33,7 @@ import {
 } from '@/components/ui/command';
 
 export interface CustomerProps {
+  id: string;
   msisdn: string;
   email: string;
   fullname: string;
@@ -64,8 +65,8 @@ const AddDialog = () => {
     description: '',
     type: '',
     status: '',
-    transactionTypeId: '',
+    transaction_type: '',
-    agentId: '',
+    agent: '',
     created_by: '',
     created_at: ''
   };
@@ -80,21 +81,24 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
-  const doCreateProvider = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
+  const doCreateProvider = useCallback(
-    e.preventDefault();
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
 
-    const response = await PostData(`${API_URL_MASTERDATA}/provider/create`, formField);
+      const response = await PostData(`${API_URL_MASTERDATA}/provider/create`, formField);
 
-    if (response?.status) {
+      if (response?.status) {
-      resetForm();
+        resetForm();
-      handleAddDialog(false);
+        handleAddDialog(false);
-      toast.success('Success Create Provider');
+        toast.success('Success Create Provider');
-      reload();
+        reload();
-    } else {
+      } else {
-      toast.error('Failed Create Provider');
+        toast.error('Failed Create Provider');
-      setAlert({ show: true, message: 'Failed Create Provider' });
+        setAlert({ show: true, message: 'Failed Create Provider' });
-    }
+      }
-  }, []);
+    },
+    [formField]
+  );
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -104,18 +108,53 @@ const AddDialog = () => {
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.transactionTypeId.trim() === '' ||
+      formField.transaction_type === '' ||
-      formField.agentId.trim() === ''
+      formField.agent.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
+    console.log(formField);
     doCreateProvider(e);
-    // console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
+  const getTransactionTypeList = async (sorting: any) => {
+    try {
+      const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('TRANSACTION TYPE: ', response?.data);
+      setTransactions(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching transaction type', error);
+    }
+  };
+
+  const getCustomerList = async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('CUSTOMER: ', response?.data);
+      setCustomers(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching customer', error);
+    }
+  };
+
   useEffect(() => {
     if (showAddDialog) {
       setFormField({
@@ -124,45 +163,10 @@ const AddDialog = () => {
         created_at: formattedTime
       });
     }
-  }, [formattedTime]);
+  }, [formattedTime, parsedUser.username, showAddDialog]);
 
   useEffect(() => {
-    const getCustomerList = async (sorting: any) => {
+    getCustomerList([{ id: 'id', desc: false }]);
-      try {
-        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
-          limit: 100,
-          page: 1,
-          with_deleted: false,
-          order_field: sorting[0].id,
-          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-        });
-
-        // console.log('CUSTOMER: ', response?.data);
-        setCustomers(response?.data.list);
-      } catch (error) {
-        console.error('Error fetching customer', error);
-      }
-    };
-
-    const getTransactionTypeList = async (sorting: any) => {
-      try {
-        const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
-          limit: 100,
-          page: 1,
-          with_deleted: false,
-          order_field: sorting[0].id,
-          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-        });
-
-        // console.log('TRANSACTION TYPE: ', response?.data);
-        setTransactions(response?.data.list);
-      } catch (error) {
-        console.error('Error fetching transaction type', error);
-      }
-    };
-
-    getCustomerList([{ id: 'msisdn', desc: false }]);
     getTransactionTypeList([{ id: 'name', desc: false }]);
   }, []);
 
@@ -263,9 +267,9 @@ const AddDialog = () => {
                       Transaction Type Id<span className="text-red-500">*</span>
                     </label>
                     <Select
-                      value={formField.transactionTypeId}
+                      value={formField.transaction_type}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, transactionTypeId: value })
+                        setFormField({ ...formField, transaction_type: value })
                       }
                     >
                       <SelectTrigger>
@@ -290,8 +294,8 @@ const AddDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {customers.find((customer) => customer.msisdn === formField.agentId)
+                          {customers.find((customer) => customer.id === formField.agent)
-                            ?.fullname || 'Select Agent'}
+                            ?.username || 'Select Agent'}
                         </button>
                       </PopoverTrigger>
                       <PopoverContent className="w-[400px] p-0">
@@ -302,17 +306,17 @@ const AddDialog = () => {
                             <CommandGroup>
                               {customers.map((customer) => (
                                 <CommandItem
-                                  key={customer.msisdn}
+                                  key={customer.id}
-                                  value={customer.fullname}
+                                  value={customer.id}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      agentId: customer.msisdn
+                                      agent: customer.id
                                     });
                                     setOpen(false);
                                   }}
                                 >
-                                  {customer.fullname}
+                                  {customer.username}
                                 </CommandItem>
                               ))}
                             </CommandGroup>

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

@@ -2,64 +2,49 @@ import { apiConfig } from '@/config/api.config';
 import { useManageProviderContext } from '../hooks/useManageProviderContext';
 import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import {
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
+
 const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedProvider } = useManageProviderContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
+  const [alert, setAlert] = useState({ show: false, message: '' });
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
 
   const doDeleteProvider = useCallback(async () => {
-    const response = await DeleteData(`${API_URL}/provider/delete/${selectedProvider}/${enforce}`, {
+    if (!selectedProvider) {
+      toast.error('No provider selected');
+      return;
+    }
+
+    const response = await DeleteData(`${API_URL}/provider/delete/${selectedProvider}/false`, {
       id: selectedProvider
     });
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Provider');
       reload();
     } else {
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Provider');
     }
-  }, [selectedProvider, enforce]);
+  }, [selectedProvider, DeleteData, handleDeleteDialog, reload]);
 
   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">
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden">
         <DialogHeader className="p-0 border-0 block">
           <DialogTitle></DialogTitle>
           <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
+            <span className="text-sm">You will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -68,10 +53,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeleteProvider()}>
+          <Button variant="destructive" onClick={doDeleteProvider}>
             Delete
           </Button>
         </DialogFooter>

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

@@ -55,7 +55,7 @@ const EditDialog = () => {
     description: '',
     type: '',
     status: '',
-    transactionTypeId: '',
+    transaction_type: '',
     agent: '',
     updated_by: '',
     updated_at: ''
@@ -136,8 +136,8 @@ const EditDialog = () => {
         description: response?.data.description,
         type: response?.data.type,
         status: response?.data.status,
-        transactionTypeId: response?.data.transactionTypeId,
+        transaction_type: response?.data.transaction_type.id,
-        agent: response?.data.agent
+        agent: response?.data.agent.id
       }));
     }
   }, []);
@@ -150,7 +150,7 @@ const EditDialog = () => {
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.transactionTypeId.trim() === '' ||
+      formField.transaction_type.trim() === '' ||
       formField.agent.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
@@ -185,10 +185,10 @@ const EditDialog = () => {
   }, [formattedTime]);
 
   useEffect(() => {
-    getCustomerList([{ id: 'msisdn', desc: false }]);
+    getCustomerList([{ id: 'id', desc: false }]);
     getTransactionTypeList([{ id: 'name', desc: false }]);
   }, []);
-
+  // console.log(selectedProvider);
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -282,9 +282,9 @@ const EditDialog = () => {
                       Transaction Type Id<span className="text-red-500">*</span>
                     </label>
                     <Select
-                      value={formField.transactionTypeId}
+                      value={formField.transaction_type}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, transactionTypeId: value })
+                        setFormField({ ...formField, transaction_type: value })
                       }
                     >
                       <SelectTrigger>
@@ -309,7 +309,7 @@ const EditDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {customers.find((customer) => customer.msisdn === formField.agent)
+                          {customers.find((customer) => customer.id === formField.agent)
                             ?.fullname || 'Select Agent'}
                         </button>
                       </PopoverTrigger>
@@ -321,12 +321,12 @@ const EditDialog = () => {
                             <CommandGroup>
                               {customers.map((customer) => (
                                 <CommandItem
-                                  key={customer.msisdn}
+                                  key={customer.id}
-                                  value={customer.fullname}
+                                  value={customer.id}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      agent: customer.msisdn
+                                      agent: customer.id
                                     });
                                     setOpen(false);
                                   }}

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

@@ -73,16 +73,6 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.provider_id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.provider_name,
         id: 'name',
@@ -163,12 +153,12 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
       const response = await GetData(`${API_URL}/provider/list`, {
         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)
       });
-      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/SucosMaster.tsx

@@ -10,7 +10,7 @@ const SucosMaster = () => {
   return (
     <ManageSucosContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Sucos</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Sucos</h1>
         <Breadcrumbs sx={{ mb: 2 }}>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>

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

@@ -45,7 +45,7 @@ const AddDialog = () => {
   });
   const initialState = {
     name: '',
-    posto_adm_id: 0,
+    postoId: 0,
     created_by: '',
     created_at: ''
   };
@@ -80,7 +80,7 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name.trim() === '' || formField.posto_adm_id === 0) {
+    if (formField.name.trim() === '' || formField.postoId === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -117,7 +117,7 @@ const AddDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
         });
-        console.log('ini data posto :', response?.data);
+        // console.log('ini data posto :', response?.data);
         setPostoadms(response?.data.list || []);
       } catch (error) {
         console.log('Error fetching posto', error);
@@ -166,11 +166,14 @@ const AddDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {posto_adms.find((posto) => posto.PostoAdms_id === formField.posto_adm_id)
+                          {posto_adms.find((posto) => posto.PostoAdms_id === formField.postoId)
                             ?.PostoAdms_name || 'Select Posto Administrativo'}
                         </button>
                       </PopoverTrigger>
-                      <PopoverContent className="w-[400px] p-0">
+                      <PopoverContent
+                        className="w-[400px] p-0"
+                        onWheel={(e) => e.stopPropagation()}
+                      >
                         <Command>
                           <CommandInput placeholder="Search Posto Adms..." />
                           <CommandList>
@@ -183,7 +186,7 @@ const AddDialog = () => {
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      posto_adm_id: posto.PostoAdms_id
+                                      postoId: posto.PostoAdms_id
                                     });
                                     setOpen(false);
                                   }}

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

@@ -1,11 +1,10 @@
 import { apiConfig } from '@/config/api.config';
 import { useManageSucosContext } from '../hooks/useManageSucosContext';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useCallApi } from '@/hooks';
 import { Alert, useDataGrid } from '@/components';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
@@ -14,43 +13,39 @@ const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedSucos } = useManageSucosContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
+  const [alert, setAlert] = useState({ show: false, message: '' });
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
 
   const doDeleteSucos = useCallback(async () => {
-    const response = await DeleteData(`${API_URL}/sucos/delete/${selectedSucos}/${enforce}`, {
+    if (!selectedSucos) {
+      toast.error('No sucos selected');
+      return;
+    }
+
+    // Hanya soft delete (tanpa enforce)
+    const response = await DeleteData(`${API_URL}/sucos/delete/${selectedSucos}/false`, {
       id: selectedSucos
     });
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Sucos');
       reload();
     } else {
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      setAlert({ show: true, message: response?.message });
+      toast.error('Failed Delete Sucos');
     }
-  }, [selectedSucos, enforce]);
+  }, [selectedSucos, DeleteData, handleDeleteDialog, reload]);
 
   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">
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden">
         <DialogHeader className="p-0 border-0 block">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
+            <span className="text-sm">You will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -59,10 +54,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeleteSucos()}>
+          <Button variant="destructive" onClick={doDeleteSucos}>
             Delete
           </Button>
         </DialogFooter>

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

@@ -48,7 +48,7 @@ const EditDialog = () => {
 
   const initialState = {
     name: '',
-    posto_adm_id: 0, // Pastikan ini sesuai dengan PostoAdms_id
+    postoId: 0,
     updated_by: '',
     updated_at: ''
   };
@@ -96,7 +96,7 @@ const EditDialog = () => {
       });
 
       setPostoadms(response?.data.list);
-      console.log('Data Posto Adms:', response?.data.list); // Log data postoadms
+      // console.log('Data Posto Adms:', response?.data.list);
     } catch (error) {
       console.log('Error fetching postoadms', error);
     }
@@ -104,13 +104,13 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id });
-    console.log('Data Sucos:', response?.data); // Log data sucos
+    // console.log('Data Sucos:', response?.data);
 
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
-        posto_adm_id: response.data.posto.id // Pastikan ini sesuai dengan PostoAdms_id
+        postoId: response.data.posto.id // Pastikan ini sesuai dengan PostoAdms_id
       }));
     } else {
       setFormField((prev) => ({
@@ -123,7 +123,7 @@ const EditDialog = () => {
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name.trim() === '' || formField.posto_adm_id === 0) {
+    if (formField.name.trim() === '' || formField.postoId === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -162,7 +162,7 @@ const EditDialog = () => {
     doFetchPostoAdms([{ id: 'name', desc: false }]);
   }, []);
 
-  console.log(selectedSucos);
+  // console.log(selectedSucos);
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -203,7 +203,7 @@ const EditDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {postoadms.find((posto) => posto.PostoAdms_id === formField.posto_adm_id)
+                          {postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
                             ?.PostoAdms_name || 'Select Posto Adms'}
                         </button>
                       </PopoverTrigger>
@@ -220,7 +220,7 @@ const EditDialog = () => {
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      posto_adm_id: posto.PostoAdms_id // Gunakan PostoAdms_id
+                                      postoId: posto.PostoAdms_id // Gunakan PostoAdms_id
                                     });
                                     setOpen(false);
                                   }}

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

@@ -16,7 +16,7 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Sucos"
-                value={table.getColumn(`id`)?.getFilterValue() as string}
+                value={String(table.getColumn(`sucos_name`)?.getFilterValue() ?? '')}
                 onChange={(event) =>
                   table.getColumn('sucos_name')?.setFilterValue(event.target.value)
                 }

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

@@ -85,19 +85,13 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorKey: 'sucos_id',
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.sucos_name,
         id: 'sucos_name',
+        filterFn: (row, columnId, filterValue) => {
+          const value = row.getValue<string>(columnId);
+          return String(value).includes(String(filterValue));
+        },
         header: ({ column }) => <DataGridColumnHeader title="Sucos Name" column={column} />,
         enableSorting: true,
         enableHiding: false,
@@ -106,8 +100,12 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
         }
       },
       {
-        accessorFn: (row) => row.posto_name,
+        accessorKey: 'posto_name',
         id: 'posto_name',
+        filterFn: (row, columnId, filterValue) => {
+          const value = row.getValue<string>(columnId);
+          return String(value).includes(String(filterValue));
+        },
         header: ({ column }) => <DataGridColumnHeader title="Posto Name" column={column} />,
         enableSorting: true,
         enableHiding: false,

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

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

src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx

@@ -69,26 +69,6 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.ID,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.IDWallet,
-        id: 'name',
-        header: ({ column }) => <DataGridColumnHeader title="ID Wallet" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
       {
         accessorFn: (row) => row.balance_minimum,
         id: 'balance_minimum',
@@ -221,7 +201,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
       <Toaster expand visibleToasts={9} duration={3000} />
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 10 }}
+        pagination={{ size: 5 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

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

@@ -16,11 +16,11 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Menu"
-                value={(table.getColumn('subMenu')?.getFilterValue() as string) ?? ''}
+                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('subMenu')?.setFilterValue(event.target.value)}
+                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />
             </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
+            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -28,9 +28,10 @@ const ListToolbar = () => {
                 // onClick={handleFilterData}
               >
                 {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-                <KeenIcon icon="filter" />
+            {/* <KeenIcon icon="filter" />
+>>>>>>> raja
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx

@@ -118,7 +118,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       },
       {
         accessorFn: (row) => row.name,
-        id: 'subMenu',
+        id: 'name',
         header: ({ column }) => <DataGridColumnHeader title="Sub Menu" column={column} />,
         enableSorting: false,
         enableHiding: false,
@@ -174,15 +174,31 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
   );
 
   const flattenChildren = (parent: any, parentIdx: number, depth = 0, parentName = '') => {
+    let result: any[] = [];
+
     if (parent.link === '/') {
       if (!parents.find((el: any) => el.id === parent.id))
         setParents((el: any) => [...el, { id: parent.id, name: parent.name }]); // GET PARENTS
-    }
+
-    if (!parent.children || parent.children.length === 0) {
+      // Menambahkan parent ke dalam result meskipun tidak memiliki children
-      return []; // Jika tidak ada children, kembalikan array kosong
+      result.push({
+        id: parent.id,
+        module: parent.module,
+        parentName: parentName || parent.name,
+        name: parent.name,
+        link: parent.link,
+        id_parent: parent.id_parent,
+        status: parent.status,
+        order_number: parent.order_number
+      });
     }
 
-    return parent.children.flatMap((child: any, childIdx: number) => {
+    // Jika parent tidak memiliki children, langsung return hasil yang sudah ada
+    if (!parent.children || parent.children.length === 0) {
+      return result;
+    }
+
+    const childrenFlattened = parent.children.flatMap((child: any, childIdx: number) => {
       if (child.children && child.children.length > 0) {
         return flattenChildren(child, parentIdx * 100 + childIdx, depth + 1, child.name);
       }
@@ -198,6 +214,9 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
         order_number: parent.order_number
       };
     });
+
+    // Gabungkan parent dengan children yang sudah diflatten
+    return [...result, ...childrenFlattened];
   };
 
   const getMenusLists = async (page: number, limit: number, sorting: any, filter: any) => {
@@ -210,7 +229,8 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
         page: page + 1,
         with_deleted: false,
         order_field: sorting[0].id,
-        order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        order_direction: sorting[0].desc ? 'DESC' : 'ASC',
+        filter: JSON.stringify(filter)
       });
 
       if (!response?.data.list) return { data: [], totalCount: 0 };
@@ -220,10 +240,11 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       );
 
       const total_count = transformedData.length;
+      const paginatedData = transformedData.slice(page * limit, (page + 1) * limit);
 
       console.log(response.data);
-      setMenus(transformedData);
+      // setMenus(transformedData);
-      return { data: transformedData, totalCount: response.data.total_count };
+      return { data: paginatedData, totalCount: total_count };
     } catch (error) {
       console.error('Error fetching Menus', error);
       return { data: [], totalCount: 0 };
@@ -250,7 +271,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
 
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 30 }}
+        pagination={{ size: 25 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

src/pages/menu/menu-category/MenuCategory.tsx

@@ -1,11 +0,0 @@
-const MenuCategory = () => {
-  return (
-    <div>
-      <div className="container mx-auto p-5">
-        <h1 className="text-xl font-medium leading-none text-gray-900">Menu Category</h1>
-      </div>
-    </div>
-  );
-};
-
-export default MenuCategory;

src/pages/settings/user/manage-position/blocks/AddDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import {
   Dialog,
@@ -59,6 +59,10 @@ const MenuItemComponent: React.FC<{
   );
 };
 
+const initialState = {
+  name: ''
+};
+
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showAddDialog, handleAddDialog, menus } = useManagePositionContext();
@@ -69,9 +73,7 @@ const AddDialog = () => {
     message: ''
   });
   const [selectMenus, setSelectMenus] = useState<string[]>([]);
-  const [formField, setFormField] = useState({
+  const [formField, setFormField] = useState(initialState);
-    name: ''
-  });
 
   /* actions */
   const handleCheckboxChange = useCallback((key: string) => {
@@ -80,6 +82,12 @@ const AddDialog = () => {
     );
   }, []);
 
+  const resetForm = () => {
+    setFormField(() => ({ name: '' }));
+    setAlert({ show: false, message: '' });
+    setSelectMenus([]);
+  };
+
   const doCreatePosition = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -96,7 +104,7 @@ const AddDialog = () => {
       });
 
       if (response?.status) {
-        setAlert((prev) => ({ ...prev, show: false, message: '' }));
+        resetForm();
         handleAddDialog(false);
         toast.success('Success Create Position');
         reload();
@@ -114,6 +122,12 @@ const AddDialog = () => {
     [formField, selectMenus]
   );
 
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-screen-lg flex flex-col p-10 overflow-hidden [&>button]:hidden">

src/pages/settings/user/manage-user/blocks/AddDialog.tsx

@@ -59,6 +59,7 @@ const AddDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const resetForm = () => {
     setFormField(initialState);
+    setAlert({ show: false, message: '' });
   };
   const [showPassword, setShowPassword] = useState({
     password: false,
@@ -104,6 +105,12 @@ const AddDialog = () => {
 
   const isButtonDisabled = !messagePassword || isSubmitting || passwordErrors.length > 0;
 
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
   /* actions */
   const doCreateUser = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
@@ -118,7 +125,7 @@ const AddDialog = () => {
           `${API_URL}/user/add_role/${response?.message?.id}/${formField.id_role}`,
           {}
         );
-        setAlert((prev) => ({ ...prev, show: false, message: '' }));
+        resetForm();
         handleAddDialog(false);
         toast.success('Success Create User');
         reload();
@@ -336,7 +343,6 @@ const AddDialog = () => {
                     </div>
                   </div>
                 </div>
-                
 
                 <div className="flex justify-end pt-2.5">
                   <Button className="btn btn-primary" type="submit" disabled={isButtonDisabled}>

src/pages/settings/user/manage-user/blocks/EditDialog.tsx

@@ -26,6 +26,15 @@ import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_dashboard;
 
+const initialState = {
+  name: '',
+  username: '',
+  email: '',
+  id_role: '',
+  id_role_old: '',
+  status: ''
+};
+
 const EditDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showEditDialog, selectedUser, handleEditDialog, roles } = useUserContext();
@@ -35,16 +44,20 @@ const EditDialog = () => {
     show: false,
     message: ''
   });
-  const [formField, setFormField] = useState({
+
-    name: '',
+  const [formField, setFormField] = useState(initialState);
-    username: '',
+
-    email: '',
+  const resetForm = () => {
-    id_role: '',
+    setFormField(initialState);
-    id_role_old: '',
+    setAlert({ show: false, message: '' });
-    status: ''
+  };
-  });
 
   /* actions */
+  const doResetForm = () => {
+    setAlert({ show: false, message: '' });
+    setFormField(initialState);
+  };
+
   const doUpdateUser = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -52,7 +65,14 @@ const EditDialog = () => {
         ...formField,
         id_role_old: undefined
       });
+
+      if (formField.name.trim() === '') {
+        setAlert({ show: true, message: 'Please fill all required field' });
+        return;
+      }
+
       if (response?.status) {
+        resetForm();
         handleEditDialog(false, null);
         toast.success('Success Update User');
         reload();
@@ -103,6 +123,12 @@ const EditDialog = () => {
     }
   }, [selectedUser]);
 
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">

src/pages/settings/user/manage-user/blocks/ListToolBar.tsx

@@ -22,7 +22,7 @@ const ListToolBar = () => {
                 }
               />
             </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
+            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -30,9 +30,9 @@ const ListToolBar = () => {
                 // onClick={handleFilterData}
               >
                 {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-                <KeenIcon icon="filter" />
+            {/* <KeenIcon icon="filter" />
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

src/pages/transaction/Transaction.tsx

@@ -0,0 +1,31 @@
+import { Container, DataGridInner } from '@/components';
+import { TransactionProvider } from './hooks/TransactionContext';
+import { Breadcrumbs, Link } from '@mui/material';
+
+const Transaction = () => {
+  return (
+    <TransactionProvider>
+      <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">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Transaction</span>
+          </Link>
+        </Breadcrumbs>
+        <div className="grid gap-5 lg:gap-7.5">
+          <DataGridInner />
+        </div>
+      </Container>
+    </TransactionProvider>
+  );
+};
+
+export default Transaction;

src/pages/transaction/blocks/ListToolbar.tsx

@@ -0,0 +1,82 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { useTransactionContext } from '../hooks/useTransactionContext';
+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/hooks/TransactionContext.tsx

@@ -0,0 +1,225 @@
+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';
+
+interface TransactionProps {
+  id: number;
+  name: string;
+}
+
+interface ContextProps {
+  getTransactionLists: (
+    limit: number,
+    page: number,
+    with_deleted: boolean,
+    order_field: any,
+    order_direction: any,
+    filter: any
+  ) => Promise<{ data: TransactionProps[]; totalCount: number } | undefined>;
+}
+
+const initialProps: ContextProps = {
+  getTransactionLists: async () => ({ data: [], totalCount: 0 })
+};
+
+const ManageTransactionContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.transaction;
+
+const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
+  const [transaction, setTransaction] = useState<TransactionProps[]>([]);
+  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: 'origin_customer.fullname',
+        header: ({ column }) => <DataGridColumnHeader title="Full Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) =>
+          new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(row.purchase.amount),
+        id: 'amount',
+        header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]',
+        },
+      },
+      {
+        accessorFn: (row) => {
+          let fee;
+          if (row.kind === 'P') {
+            fee = row.purchase.fee_amount;
+          } else {
+            fee = row.transfer.fee_amount;
+          }
+          return fee.toLocaleString('en-US', {
+            style: 'currency',
+            currency: 'USD',
+          });
+        },
+        accessorKey: 'fee',
+        header: ({ column }) => <DataGridColumnHeader title="Fee" 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.id;
+          return (
+            <>
+              <button className="btn btn-sm btn-icon btn-clear btn-light">
+                <KeenIcon icon="eye" />
+              </button>
+            </>
+          );
+        },
+        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 (
+    <ManageTransactionContext.Provider
+      value={{
+        getTransactionLists
+      }}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+
+      <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>
+    </ManageTransactionContext.Provider>
+  );
+};
+
+export { TransactionProvider, ManageTransactionContext };
+export type { TransactionProps };

src/pages/transaction/hooks/useTransactionContext.tsx

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

src/pages/transaction/transaction.tsx

@@ -1,12 +0,0 @@
-const Transaction = () => {
-    return (
-      <div>
-        <div className="container mx-auto p-5">
-          <h1 className="text-xl font-medium leading-none text-gray-900">Transaction</h1>
-        </div>
-      </div>
-    );
-  };
-  
-  export default Transaction;
-  

src/pages/transfer/blocks/AddDialog.tsx

@@ -1,294 +0,0 @@
-import { apiConfig } from '@/config/api.config';
-import { useRef, useState } from 'react';
-import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
-import { Alert, KeenIcon, useDataGrid } from '@/components';
-import { useCallApi } from '@/hooks';
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select';
-import { Button } from '@/components/ui/button';
-
-interface CreateTransferTypeParams {
-  transfer_type_name: string;
-  description: string;
-  from_account: string;
-  to_account: string;
-  minimal_amount: number;
-  maximum_amount: number;
-  otp_threshold: number;
-  maximum_transaction_perDay: number;
-}
-
-const API_URL = apiConfig.service_dashboard;
-
-const AddDialog = () => {
-  const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog, accounts } = useManageTransferTypeContext();
-  const { reload } = useDataGrid();
-  const { PostData, PutData } = useCallApi();
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-
-  const initialState = {
-    transfer_type_name: '',
-    description: '',
-    from_account: '',
-    to_account: '',
-    minimal_amount: 0,
-    maximum_amount: 0,
-    otp_threshold: 0,
-    maximum_transaction_perDay: 0
-  };
-
-  const [formField, setFormField] = useState(initialState);
-  const resetForm = () => {
-    setFormField(initialState);
-  };
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    // setIsSubmitting(true);
-    const payload = {
-      transfer_type_name: formField.transfer_type_name,
-      description: formField.description,
-      from_account: formField.from_account,
-      to_account: formField.to_account,
-      minimal_amount: formField.minimal_amount,
-      maximum_amount: formField.maximum_amount,
-      otp_threshold: formField.otp_threshold,
-      maximum_transaction_perDay: formField.maximum_transaction_perDay
-    };
-    console.log(payload);
-  };
-
-  return (
-    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
-      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
-        <DialogHeader className="p-5 border-0">
-          <div className="flex items-center justify-between flex-wrap grow">
-            <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">
-                Create Transfer Type
-              </h1>
-              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
-            </div>
-            <div
-              className="cursor-pointer hover:opacity-100 opacity-50"
-              onClick={() => {
-                handleAddDialog(false);
-                resetForm();
-              }}
-            >
-              <KeenIcon icon="cross" className="text-1.5xl" />
-            </div>
-          </div>
-        </DialogHeader>
-        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
-          <div className="flex flex-col px-0">
-            {alert.show && (
-              <Alert variant="danger" className="mb-3">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-            <form action="" onSubmit={handleSubmit}>
-              <div className="card-body grid gap-5 p-0">
-                <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">
-                      Transfer Type Name
-                    </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      autoComplete="off"
-                      value={formField.transfer_type_name}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, transfer_type_name: target.value }))
-                      }
-                    />
-                  </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">
-                      Description
-                    </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      autoComplete="off"
-                      value={formField.description}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, description: target.value }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">From Account</label>
-
-                    <div className="grow">
-                      <Select
-                        value={formField.from_account}
-                        onValueChange={(target) =>
-                          setFormField((prev) => ({ ...prev, from_account: target }))
-                        }
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {accounts.map((account, idx) => (
-                            <SelectItem value={account.name} key={account.id}>
-                              {account.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">To Account</label>
-
-                    <div className="grow">
-                      <Select
-                        value={formField.to_account}
-                        onValueChange={(target) =>
-                          setFormField((prev) => ({ ...prev, to_account: target }))
-                        }
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {accounts.map((account, idx) => (
-                            <SelectItem value={account.name} key={account.id}>
-                              {account.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </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">
-                      Minimal Amount
-                    </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      autoComplete="off"
-                      value={formField.minimal_amount}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          minimal_amount: Number(target.value)
-                        }))
-                      }
-                    />
-                  </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">
-                      Maximum Amount
-                    </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      autoComplete="off"
-                      value={formField.maximum_amount}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          maximum_amount: Number(target.value)
-                        }))
-                      }
-                    />
-                  </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">
-                      OTP Threshold
-                    </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      autoComplete="off"
-                      value={formField.otp_threshold}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          otp_threshold: Number(target.value)
-                        }))
-                      }
-                    />
-                  </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">
-                      Maximum Transaction / day
-                    </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      autoComplete="off"
-                      value={formField.maximum_transaction_perDay}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          maximum_transaction_perDay: Number(target.value)
-                        }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="flex justify-end pt-2.5 gap-5">
-                  <Button variant={'outline'} type="reset">
-                    Reset
-                  </Button>
-                  <Button variant={'default'} type="submit">
-                    Save Changes
-                  </Button>
-                </div>
-              </div>
-            </form>
-          </div>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default AddDialog;

src/pages/transfer/hooks/ManageTransferTypeContext.tsx

@@ -1,175 +0,0 @@
-import { DataGridColumnHeader, DataGridProvider } from '@/components';
-import { Toaster } from '@/components/ui/sonner';
-import { apiConfig } from '@/config/api.config';
-import { useCallApi } from '@/hooks';
-import { ColumnDef } from '@tanstack/react-table';
-import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
-import ListToolbar from '../blocks/ListToolBar';
-
-interface SelectedUser {
-  id: string;
-  name: string;
-  internal_name: string;
-  description: string;
-}
-
-interface AccountProps {
-  id: string;
-  name: string;
-}
-
-const accounts: string[] = [
-  'eMoney Account',
-  'Topup Account',
-  'Merchant Account',
-  'Deposit Account',
-  'Cash out/in'
-];
-
-interface ContextProps {
-  showEditDialog: boolean;
-  handleEditDialog: (show: boolean, selected_user: string | null) => void;
-  showAddDialog: boolean;
-  handleAddDialog: (show: boolean) => void;
-  selectedUser: string | null;
-  accounts: AccountProps[];
-}
-
-const initialProps: ContextProps = {
-  showEditDialog: false,
-  handleEditDialog: () => {},
-  showAddDialog: false,
-  handleAddDialog: () => {},
-  selectedUser: null,
-  accounts: []
-};
-
-const ManageTransferTypeContext = createContext<ContextProps>(initialProps);
-const API_URL = apiConfig.service_dashboard;
-
-const ManageTransferTypeContextProvider = ({ children }: { children: React.ReactNode }) => {
-  const [showEditDialog, setShowEditDialog] = useState(false);
-  const [showAddDialog, setShowAddDialog] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<string | null>(null);
-  const [accounts, setAccount] = useState<AccountProps[]>([]);
-  const { GetData } = useCallApi();
-
-  useEffect(() => {
-    setAccount([
-      { id: '1', name: 'eMoney Account' },
-      { id: '2', name: 'Topup Account' },
-      { id: '3', name: 'Merchant Account' },
-      { id: '4', name: 'Deposit Account' },
-      { id: '5', name: 'Cash in/out Account' }
-    ]);
-  }, []);
-
-  const handleEditDialog = useCallback((show: boolean, selected_user: string | null) => {
-    setSelectedUser(show ? selected_user : null);
-    setShowEditDialog(show);
-  }, []);
-
-  const handleAddDialog = useCallback((show: boolean) => {
-    setShowAddDialog(show);
-  }, []);
-
-  const columns = useMemo<ColumnDef<any>[]>(
-    () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.name,
-        id: 'name',
-        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.internal_name,
-        id: 'internal_name',
-        header: ({ column }) => <DataGridColumnHeader title="Internal Name" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.description,
-        id: 'description',
-        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
-      {
-        id: 'actions',
-        enableSorting: false,
-        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
-        cell: ({ row }) => {
-          return (
-            <>
-              <button
-                className="btn btn-sm btn-primary mr-2"
-                onClick={() => handleEditDialog(true, row.original.id)}
-              >
-                Edit
-              </button>
-              <button className="btn btn-sm btn-primary" onClick={() => handleAddDialog(true)}>
-                Add
-              </button>
-            </>
-          );
-        },
-        meta: {
-          headerClassName: 'w-[100px]',
-          cellClassName: 'text-center'
-        }
-      }
-    ],
-    [handleAddDialog, handleEditDialog]
-  );
-
-  return (
-    <div>
-      <ManageTransferTypeContext.Provider
-        value={{
-          showEditDialog,
-          handleEditDialog,
-          showAddDialog,
-          handleAddDialog,
-          selectedUser,
-          accounts
-        }}
-      >
-        <Toaster expand visibleToasts={9} duration={3000} />
-        <DataGridProvider
-          columns={columns}
-          pagination={{ size: 10 }}
-          layout={{ card: true }}
-          toolbar={<ListToolbar />}
-          sorting={[{ id: 'id', desc: true }]}
-          serverSide={true}
-        >
-          {children}
-        </DataGridProvider>
-      </ManageTransferTypeContext.Provider>
-    </div>
-  );
-};
-
-export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
-export type { SelectedUser };

src/pages/transfer/transferfee/blocks/AddDialog.tsx

@@ -0,0 +1,410 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
+import { NumericFormat } from 'react-number-format';
+import {
+  Alert,
+  Container,
+  DataGridColumnHeader,
+  DataGridInner,
+  KeenIcon,
+  useDataGrid
+} from '@/components';
+import { useCallApi } from '@/hooks';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { getAuth } from '@/auth';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table';
+import { ManageTransferFeeContext } from '../hooks/ManageTransferFeeContext';
+import { ColumnDef } from '@tanstack/react-table';
+import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
+import { apiConfig } from '@/config/api.config';
+import { get } from 'http';
+
+interface TransactionTypeProps {
+  id: string;
+  name: string;
+}
+
+const API_URL = apiConfig.service_transaction;
+
+const AddFeeDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { reload } = useDataGrid();
+  const { PostData, PutData, GetData } = useCallApi();
+  const { showAddFeeDialog, handleAddFeeDialog, handleEditFeeDialog, selectedTransferFee } =
+    useManageTransferFeeContext();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
+
+  const initialState = {
+    name: '',
+    description: '',
+    transaction_type: '',
+    minimum_amount: 0,
+    maximum_amount: 0,
+    period_start: '',
+    period_end: '',
+    deduct_amount: 0,
+    deduct_percentage: 0,
+    priority: false,
+    status: '',
+    status_include: '',
+    created_by: '',
+    created_at: ''
+  };
+
+  const [formField, setFormField] = useState(initialState);
+
+  const resetForm = () => {
+    setFormField(initialState);
+  };
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false);
+  const parsedUser = getAuth()?.user;
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // setIsSubmitting(true);
+    const payload = {
+      name: formField.name,
+      description: formField.description,
+      period_start: formField.period_start,
+      period_end: formField.period_end,
+      minimum_amount: formField.minimum_amount,
+      maximum_amount: formField.maximum_amount,
+      deduct_amount: formField.deduct_amount,
+      deduct_percentage: formField.deduct_percentage,
+      transaction_type: formField.transaction_type,
+      status: formField.status,
+      status_include: formField.status_include,
+      priority: formField.priority ? 'Y' : 'N'
+    };
+  };
+  useEffect(() => {
+    const created_time = new Date();
+    const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+
+    if (showAddFeeDialog) {
+      setFormField({
+        ...formField,
+        created_by: parsedUser?.username,
+        created_at: formattedTime
+      });
+    }
+  }, [showAddFeeDialog]);
+
+  useEffect(() => {
+    if (!showAddFeeDialog) return;
+
+    const getTransactionTypeList = async (sorting: any) => {
+      try {
+        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/transactiontype/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        });
+        setTransactionTypes(response?.data.list || []);
+      } catch (error) {
+        console.error('Error fetching customer', error);
+      }
+    };
+
+    getTransactionTypeList([{ id: 'id', desc: false }]);
+  }, [showAddFeeDialog]);
+
+  const doCreateTransferType = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      for (const key in formField) {
+        if (
+          formField[key as keyof typeof formField] === '' ||
+          formField[key as keyof typeof formField] === 0
+        ) {
+          setAlert({ show: true, message: 'All fields must be filled out' });
+          return;
+        }
+      }
+
+      setAlert({ show: false, message: '' });
+      const response = await PostData(`${API_URL}/transactionfees/create`, {
+        ...formField
+      });
+      console.log(response);
+      if (response?.status) {
+        toast.success('Success Create Transfer Fee');
+        reload();
+        resetForm();
+        handleAddFeeDialog(false);
+      } else {
+        setAlert({ show: true, message: response?.message || 'Failed to create transfer fee' });
+      }
+    },
+    [formField]
+  );
+
+  return (
+    <Dialog open={showAddFeeDialog} onOpenChange={(open) => handleAddFeeDialog(open)}>
+      <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogTitle></DialogTitle>
+        <DialogDescription></DialogDescription>
+        <DialogHeader className="p-5 border-0">
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">Add Transfer Fee</h1>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => {
+                handleAddFeeDialog(false);
+                resetForm();
+              }}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="max-h-[1080px] overflow-y-auto">
+          {alert.show && <Alert variant="danger">{alert.message}</Alert>}
+          <form action="" onSubmit={doCreateTransferType}>
+            <div className="card flex flex-col gap-5">
+              <div className="card-body grid gap-5 p-0">
+                <div className="w-full">
+                  <label className="form-label">Transfer Free Name</label>
+                  <Input
+                    className="input"
+                    type="text"
+                    autoComplete="off"
+                    value={formField.name}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, name: target.value }))
+                    }
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Description</label>
+                  <Input
+                    className="input"
+                    type="text"
+                    autoComplete="off"
+                    value={formField.description}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, description: target.value }))
+                    }
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Minimum Amount</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.minimum_amount}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        minimum_amount: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Max Transaction Per Day"
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Maximum Amount</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.maximum_amount}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        maximum_amount: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Max Transaction Per Day"
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Period Start</label>
+                  <Input
+                    className="input"
+                    type="date"
+                    autoComplete="off"
+                    value={formField.period_start ? formField.period_start.split('T')[0] : ''}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, period_start: target.value }))
+                    }
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Period End</label>
+                  <Input
+                    className="input"
+                    type="date"
+                    autoComplete="off"
+                    value={formField.period_end ? formField.period_end.split('T')[0] : ''}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, period_end: target.value }))
+                    }
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Deduct Amount</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.deduct_amount}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        deduct_amount: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Max Transaction Per Day"
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Deduct Percentage</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.deduct_percentage}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        deduct_percentage: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Max Transaction Per Day"
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Transacsion Type ID</label>
+                  <Select
+                    value={formField.transaction_type}
+                    onValueChange={(transaction_type) =>
+                      setFormField((prev) => ({ ...prev, transaction_type }))
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Wallet" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {transactionTypes.map((transactiontype, idx) => (
+                        <SelectItem value={transactiontype.id} key={transactiontype.id}>
+                          {transactiontype.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Status</label>
+                  <Select
+                    value={formField.status}
+                    onValueChange={(value) => setFormField({ ...formField, status: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">Active</SelectItem>
+                      <SelectItem value="N">Inactive</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Status Include</label>
+                  <Select
+                    value={formField.status_include}
+                    onValueChange={(value) => setFormField({ ...formField, status_include: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">Yes</SelectItem>
+                      <SelectItem value="N">No</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Priority</label>
+                  <Select
+                    value={formField.priority ? 'Y' : 'N'}
+                    onValueChange={(value) =>
+                      setFormField((prev) => ({ ...prev, priority: value === 'Y' }))
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Priority" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">Yes</SelectItem>
+                      <SelectItem value="N">No</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex justify-end pt-2.5 gap-5">
+                  <Button
+                    variant={'outline'}
+                    type="reset"
+                    onClick={() => {
+                      resetForm();
+                    }}
+                  >
+                    Reset
+                  </Button>
+                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? 'Saving...' : 'Save Changes'}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </form>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddFeeDialog;

src/pages/transfer/transferfee/blocks/DeleteDialog.tsx

@@ -0,0 +1,69 @@
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Alert, useDataGrid } from '@/components';
+import { useCallback, useState } from 'react';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+import { useCallApi } from '@/hooks';
+import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
+import { DialogDescription } from '@radix-ui/react-dialog';
+
+const API_URL = apiConfig.service_transaction;
+
+const DeleteDialog = () => {
+  const { showDeleteFeeDialog, handleDeleteFeeDialog, selectedTransferFee } = useManageTransferFeeContext();
+  const { reload } = useDataGrid();
+  const { DeleteData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const doDeleteTransferFee = useCallback(async () => {
+    // Kirim enforce=false untuk memastikan soft delete
+    const response = await DeleteData(`${API_URL}/transactionfees/delete/${selectedTransferFee}/false`, {
+      id: selectedTransferFee
+    });
+
+    if (response?.status) {
+      setAlert({ show: false, message: '' });
+      handleDeleteFeeDialog(false, null);
+      toast.success('Success Delete Product');
+      reload();
+    } else {
+      toast.error('Failed Delete Product');
+      setAlert({ show: true, message: response?.message });
+    }
+  }, [selectedTransferFee]);
+
+  return (
+    <Dialog open={showDeleteFeeDialog} onOpenChange={(open) => handleDeleteFeeDialog(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 className="text-lg">Delete Transfer Type</DialogTitle>
+          <DialogDescription className="text-sm">Are you sure you want to delete this data?</DialogDescription>
+          <Alert variant="warning">
+            <h3 className="text-lg">Are you sure?</h3>
+            <span className="text-sm">You will delete this data!</span>
+          </Alert>
+          {alert.show && (
+            <Alert variant="danger">
+              <h3>{alert.message}</h3>
+            </Alert>
+          )}
+        </DialogHeader>
+        <DialogFooter className="flex justify-end items-center gap-4 mt-3">
+          <Button variant={'outline'} onClick={() => handleDeleteFeeDialog(false, null)}>
+            Cancel
+          </Button>
+          <Button variant={'destructive'} onClick={() => doDeleteTransferFee()}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDialog;
+export { DeleteDialog };

src/pages/transfer/transferfee/blocks/EditDialog.tsx

@@ -0,0 +1,499 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { NumericFormat } from 'react-number-format';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { apiConfig } from '@/config/api.config';
+import { Alert, Container, DataGridInner, KeenIcon, useDataGrid } from '@/components';
+import { toast } from 'sonner';
+import { useCallApi } from '@/hooks';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { getAuth } from '@/auth';
+import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
+import AddFeeDialog from '../../transferfee/blocks/AddDialog';
+
+const API_URL = apiConfig.service_transaction;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+const API_URL_CUSTOMER = apiConfig.service_customer;
+
+interface WalletProps {
+  Wallet_id: string;
+  Wallet_name: string;
+}
+
+interface CustomerProps {
+  id: string;
+  username: string;
+  msisdn: string;
+}
+
+interface TransactionTypeProps {
+  id: string;
+  name: string;
+}
+
+const EditFeeDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showEditFeeDialog, handleEditFeeDialog, selectedTransferFee } =
+    useManageTransferFeeContext();
+  const { reload } = useDataGrid();
+  const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const { GetData, PutData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
+  const parsedUser = getAuth()?.user;
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const [formField, setFormField] = useState({
+    name: '',
+    description: '',
+    minimum_amount: 0,
+    maximum_amount: 0,
+    period_start: '',
+    period_end: '',
+    deduct_amount: 0,
+    deduct_percentage: 0,
+    priority: false,
+    status: '',
+    status_include: '',
+    transaction_type: '',
+    updated_by: '',
+    updated_at: ''
+  });
+  useEffect(() => {
+    const updated_time = new Date();
+    const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
+
+    if (showEditFeeDialog) {
+      setFormField({
+        ...formField,
+        updated_by: parsedUser?.username,
+        updated_at: formattedTime
+      });
+    }
+  }, [showEditFeeDialog]);
+  /* actions */
+  const doUpdateTransferFee = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const response = await PutData(`${API_URL}/transactionfees/update/${selectedTransferFee}`, {
+        ...formField,
+        priority: formField.priority ? 'Y' : 'N' // Ubah ke "Y" atau "N"
+      });
+      if (response?.status) {
+        handleEditFeeDialog(false, null);
+        toast.success('Success Update User');
+        reload();
+      } else {
+        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      }
+    },
+    [formField, selectedTransferFee]
+  );
+  const fetchWallets = useCallback(async () => {
+    const params = {
+      limit: 100,
+      page: 1,
+      with_deleted: false,
+      order_field: 'name',
+      order_direction: 'ASC',
+      filter: JSON.stringify({
+        status: 'Y'
+      })
+    };
+    const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
+    if (response?.status && response?.data) {
+      setWallets(response.data.list);
+    } else {
+      setWallets([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchWallets();
+  }, [fetchWallets]);
+
+  useEffect(() => {
+    if (!showEditFeeDialog) return;
+
+    const getCustomerList = async (sorting: any) => {
+      try {
+        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        });
+        setCustomers(response?.data.list || []);
+      } catch (error) {
+        console.error('Error fetching customer', error);
+      }
+    };
+
+    getCustomerList([{ id: 'msisdn', desc: false }]);
+  }, []);
+  useEffect(() => {
+    if (!showEditFeeDialog) return;
+
+    const getTransactionTypeList = async (sorting: any) => {
+      try {
+        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/transactiontype/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        });
+        // console.log('Transaction Type: ', response?.data.list);
+        setTransactionTypes(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching Transaction Type', error);
+      }
+    };
+
+    getTransactionTypeList([{ id: 'id', desc: false }]);
+  }, [showEditFeeDialog]);
+
+  const fetchTransactionFee = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, { id });
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name,
+        description: response.data.description,
+        minimum_amount: response.data.minimum_amount,
+        maximum_amount: response.data.maximum_amount,
+        period_start: response.data.period_start,
+        period_end: response.data.period_end,
+        deduct_amount: response.data.deduct_amount,
+        deduct_percentage: response.data.deduct_percentage,
+        priority: response.data.priority === 'Y',
+        status: response.data.status,
+        status_include: response.data.status_include,
+        transaction_type: response.data.transaction_type.id
+      }));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (selectedTransferFee) {
+      fetchTransactionFee(selectedTransferFee);
+    }
+  }, [selectedTransferFee]);
+  const resetForm = () => {
+    setFormField({
+      name: '',
+      description: '',
+      minimum_amount: 0,
+      maximum_amount: 0,
+      period_start: '',
+      period_end: '',
+      deduct_amount: 0,
+      deduct_percentage: 0,
+      priority: false,
+      status: '',
+      status_include: '',
+      transaction_type: '',
+      updated_by: '',
+      updated_at: ''
+    });
+  };
+
+  return (
+    <Dialog open={showEditFeeDialog} onOpenChange={(open) => handleEditFeeDialog(open, null)}>
+      <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-5 border-0">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">
+                Update Transaction Fee
+              </h1>
+              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => handleEditFeeDialog(false, null)}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
+          <div className="flex flex-col px-0">
+            {alert.show && (
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+            <form action="" onSubmit={doUpdateTransferFee}>
+              <div className="card flex flex-col gap-5">
+                <div className="card-body grid gap-5 p-0">
+                  <div className="w-full">
+                    <label className="form-label">Transfer Free Name</label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.name}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, name: target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Description</label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.description}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, description: target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Minimum Amount</label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.minimum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          minimum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Maximum Amount</label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.maximum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          maximum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Period Start</label>
+                    <Input
+                      className="input"
+                      type="date"
+                      autoComplete="off"
+                      value={formField.period_start ? formField.period_start.split('T')[0] : ''}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, period_start: target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Period End</label>
+                    <Input
+                      className="input"
+                      type="date"
+                      autoComplete="off"
+                      value={formField.period_end ? formField.period_end.split('T')[0] : ''}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, period_end: target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Deduct Amount</label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.deduct_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          deduct_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Deduct Percentage</label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.deduct_percentage}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          deduct_percentage: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Transacsion Type ID</label>
+                    <Select
+                      value={formField.transaction_type}
+                      onValueChange={(transaction_type) =>
+                        setFormField((prev) => ({ ...prev, transaction_type }))
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Wallet" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {transactionTypes.map((transactiontype, idx) => (
+                          <SelectItem value={transactiontype.id} key={transactiontype.id}>
+                            {transactiontype.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Status</label>
+                    <Select
+                      value={formField.status}
+                      onValueChange={(value) => setFormField({ ...formField, status: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Status Included</label>
+                    <Select
+                      value={formField.status_include}
+                      onValueChange={(value) =>
+                        setFormField({ ...formField, status_include: value })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Yes</SelectItem>
+                        <SelectItem value="N">No</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Priority</label>
+                    <Select
+                      value={formField.priority ? 'Y' : 'N'} // Menyesuaikan nilai
+                      onValueChange={(value) =>
+                        setFormField((prev) => ({ ...prev, priority: value === 'Y' }))
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Priority" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Yes</SelectItem>
+                        <SelectItem value="N">No</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* <div className="w-full">
+                  <label className="form-label">Priotity</label>
+                  <Select
+                    value={formField.priority}
+                    onValueChange={(value) => setFormField({ ...formField, priority: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">Y</SelectItem>
+                      <SelectItem value="N">N</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div> */}
+
+                  {/* <div className="w-full">
+  <label className="form-label">Priority</label>
+  <Select
+    value={formField.priority ? 'Y' : 'N'}
+    onValueChange={(value) =>
+      setFormField({ ...formField, priority: value === 'Y' })
+    }
+  >
+    <SelectTrigger>
+      <SelectValue placeholder="Select Priority" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="Y">Y</SelectItem>
+      <SelectItem value="N">N</SelectItem>
+    </SelectContent>
+  </Select>
+</div> */}
+                  <div className="flex justify-end pt-2.5 gap-5">
+                    <Button
+                      variant={'outline'}
+                      type="reset"
+                      onClick={() => {
+                        resetForm();
+                      }}
+                    >
+                      Reset
+                    </Button>
+                    <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? 'Saving...' : 'Save Changes'}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { EditFeeDialog };

src/pages/transfer/transferfee/blocks/ListToolBar.tsx

@@ -0,0 +1,44 @@
+  import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+  import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
+  import { Button } from '@/components/ui/button';
+
+  const ListToolbar = () => {
+    const { table, reload } = useDataGrid();
+    const { handleAddFeeDialog, handleEditFeeDialog, selectedTransferFee} = useManageTransferFeeContext();
+
+    return (
+      <div className="card-header flex-wrap gap-2 border-b-0 px-5">
+        <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+          <div className="flex justify-between w-full items-center">
+            <div className="flex w-[50%] gap-3 items-center">
+              <label className="input input-sm w-1/3">
+                <KeenIcon icon="magnifier" />
+                <input
+                  type="text"
+                  placeholder="Search Access Type"
+                  value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                  onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                />
+              </label>
+            </div>
+            <div className="flex gap-3 items-center">
+              <Button
+                variant="outline"
+                className="h-7.5 text-[0.8rem]"
+                onClick={() => handleAddFeeDialog(true)}
+              >
+                Add Data
+              </Button>
+              <DefaultTooltip title={'Refresh'} placement={'top'}>
+                <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                  <KeenIcon icon="arrows-circle" />
+                </Button>
+              </DefaultTooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  export default ListToolbar;

src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx

@@ -0,0 +1,241 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import ListToolbar from '../blocks/ListToolBar';
+import DeleteDialog from '../blocks/DeleteDialog';
+import { EditFeeDialog } from '../blocks/EditDialog';
+
+interface ContextProps {
+  showEditFeeDialog: boolean;
+  handleEditFeeDialog: (show: boolean, selectedTransferFee: string | null) => void;
+  showAddFeeDialog: boolean;
+  handleAddFeeDialog: (show: boolean) => void;
+  handleDeleteFeeDialog: (show: boolean, selectedTransferFee: string | null) => void;
+  showDeleteFeeDialog: boolean;
+  selectedTransferFee: string | null;
+}
+
+const initialProps: ContextProps = {
+  showEditFeeDialog: false,
+  handleEditFeeDialog: () => {},
+  showAddFeeDialog: false,
+  handleAddFeeDialog: () => {},
+  showDeleteFeeDialog: false,
+  handleDeleteFeeDialog: () => {},
+  selectedTransferFee: null
+};
+
+const ManageTransferFeeContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_transaction;
+
+const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showEditFeeDialog, setShowEditFeeDialog] = useState(false);
+  const [showAddFeeDialog, setShowAddFeeDialog] = useState(false);
+  const [showDeleteFeeDialog, setShowDeleteFeeDialog] = useState(false);
+
+  const [selectedTransferFee, setSelectedTransferFee] = useState<string | null>(null);
+  const { GetData } = useCallApi();
+
+  const handleEditFeeDialog = useCallback((show: boolean, selectedTransferFee: string | null) => {
+    setSelectedTransferFee(show ? selectedTransferFee : null);
+    setShowEditFeeDialog(show);
+  }, []);
+
+  const handleAddFeeDialog = useCallback((show: boolean) => {
+    setShowAddFeeDialog(show);
+  }, []);
+
+  const handleDeleteFeeDialog = useCallback((show: boolean, selectedTransferFee: string | null) => {
+    setSelectedTransferFee(show ? selectedTransferFee : null);
+    setShowDeleteFeeDialog(show);
+  }, []);
+  const doGetTransferFeeListData = async (
+    page: number,
+    limit: number,
+    sorting: any,
+    filter: any
+  ) => {
+    sorting = sorting.length == 0 ? [{ id: 'id', desc: false }] : sorting;
+    filter = filter.length == 0 ? {} : { any: filter[0].value.toLowerCase() };
+    const response = await GetData(`${API_URL}/transactionfees/list`, {
+      limit: limit,
+      page: 1,
+      with_deleted: false,
+      order_field: sorting[0].id,
+      order_direction: sorting[0].desc ? 'ASC' : 'DESC',
+      filter: JSON.stringify(filter)
+    });
+    return { data: response?.data.list, totalCount: response?.data.total_count };
+  };
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorFn: (row) => row.name,
+        id: 'name',
+        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[200px]' }
+      },
+      {
+        accessorFn: (row) => row.description,
+        id: 'description',
+        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.minimum_amount,
+        id: 'minimum_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Min Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.maximum_amount,
+        id: 'maximum_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Max Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.period_start?.split('T')[0],
+        id: 'period_start',
+        header: ({ column }) => <DataGridColumnHeader title="Period Start" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[200px]' }
+      },
+      {
+        accessorFn: (row) => row.period_end?.split('T')[0],
+        id: 'period_end',
+        header: ({ column }) => <DataGridColumnHeader title="Period End" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[200px]' }
+      },
+      {
+        accessorFn: (row) => row.deduct_amount,
+        id: 'deduct_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Deduct Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.deduct_percentage,
+        id: 'deduct_percentage',
+        header: ({ column }) => <DataGridColumnHeader title="Deduct %" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.transaction_type?.name,
+        id: 'transactionTypeId',
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => (row.priority === 'Y' ? 'Yes' : 'No'),
+        id: 'priority',
+        header: ({ column }) => <DataGridColumnHeader title="Priority" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[100px]' }
+      },
+      {
+        accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactieve'),
+        id: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => (row.status_include === 'Y' ? 'Yes' : 'No'),
+        id: 'status_include',
+        header: ({ column }) => <DataGridColumnHeader title="Status Include" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleEditFeeDialog(true, row.id)}
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDeleteFeeDialog(true, row.id)}
+              >
+                <KeenIcon icon="trash" />
+              </button>
+            </>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    [handleEditFeeDialog, handleDeleteFeeDialog]
+  );
+
+  return (
+    <div className="container mx-auto py-5">
+      <div className="flex justify-between items-center mb-4">
+        <h1 className="text-2xl font-semibold">Manage Transaction Fee</h1>
+      </div>
+      <ManageTransferFeeContext.Provider
+        value={{
+          showEditFeeDialog,
+          handleEditFeeDialog,
+          showAddFeeDialog,
+          handleAddFeeDialog,
+          selectedTransferFee,
+          showDeleteFeeDialog,
+          handleDeleteFeeDialog
+        }}
+      >
+        <Toaster expand visibleToasts={9} duration={3000} />
+        <DataGridProvider
+          columns={columns}
+          pagination={{ size: 10 }}
+          layout={{ card: true }}
+          toolbar={<ListToolbar />}
+          sorting={[{ id: 'id', desc: true }]}
+          serverSide={true}
+          onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+            doGetTransferFeeListData(pageIndex, pageSize, sorting, columnFilters)
+          }
+        >
+          {children}
+          <DeleteDialog />
+          <EditFeeDialog />
+        </DataGridProvider>
+      </ManageTransferFeeContext.Provider>
+    </div>
+  );
+};
+
+export { ManageTransferFeeContext, ManageTransferFeeContextProvider };

src/pages/transfer/transferfee/hooks/useManageTransferFeeContext.tsx

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

src/pages/transfer/transfertype/TransferType.tsx

@@ -5,12 +5,15 @@ import {
 } from './hooks/ManageTransferTypeContext';
 import AddDialog from './blocks/AddDialog';
 import { Breadcrumbs, Link } from '@mui/material';
+import { DeleteDialog } from './blocks/DeleteDialog';
+import { EditDialog } from './blocks/EditDialog';
 
 const TransferType = () => {
+  
   return (
     <ManageTransferTypeContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Access Type</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Transaction Type</h1>
         <Breadcrumbs sx={{ mb: 2 }}>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>
@@ -21,13 +24,16 @@ const TransferType = () => {
           </Link>
 
           <Link underline="none" color="inherit">
-            <span className="text-sm">Manage Access Type</span>
+            <span className="text-sm">Manage Transfer Type</span>
           </Link>
         </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>
         <AddDialog />
+        <DeleteDialog />
+        <EditDialog />
+        
       </Container>
     </ManageTransferTypeContextProvider>
   );

src/pages/transfer/transfertype/blocks/AddDialog.tsx

@@ -0,0 +1,493 @@
+import { apiConfig } from '@/config/api.config';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
+import {
+  Alert,
+  Container,
+  DataGridColumnHeader,
+  DataGridInner,
+  KeenIcon,
+  useDataGrid
+} from '@/components';
+import { useCallApi } from '@/hooks';
+import { NumericFormat } from 'react-number-format';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import { getAuth } from '@/auth';
+
+interface WalletProps {
+  Wallet_id: string;
+  Wallet_name: string;
+}
+
+interface CustomerProps {
+  id: string;
+  username: string;
+  msisdn: string;
+}
+
+const API_URL = apiConfig.service_transaction;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+const API_URL3_CUSTOMER = apiConfig.service_customer;
+
+const AddDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { GetData } = useCallApi();
+  const { showAddDialog, handleAddDialog, selectedTransferType } = useManageTransferTypeContext();
+  const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const { reload } = useDataGrid();
+  const { PostData, PutData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const initialState = {
+    name: '',
+    description: '',
+    wallet_origin: '',
+    wallet_destination: '',
+    wallet_fee_destination: '',
+    customer_fee_destination: '',
+    minimum_amount: 0,
+    maximum_amount: 0,
+    max_transaction_per_day: 0,
+    status: '',
+    status_approval: '',
+    created_by: '',
+    created_at: ''
+  };
+
+  const [formField, setFormField] = useState(initialState);
+
+  const resetForm = () => {
+    setFormField(initialState);
+  };
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const parsedUser = getAuth()?.user;
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // setIsSubmitting(true);
+    const payload = {
+      name: formField.name,
+      description: formField.description,
+      wallet_origin: formField.wallet_origin,
+      wallet_destination: formField.wallet_destination,
+      minimum_amount: formField.minimum_amount,
+      maximum_amount: formField.maximum_amount,
+      max_transaction_per_day: formField.max_transaction_per_day,
+      wallet_fee_destination: formField.wallet_fee_destination,
+      customer_fee_destination: formField.customer_fee_destination,
+      status_approval: formField.status_approval,
+      status: formField.status
+    };
+  };
+  useEffect(() => {
+    const created_time = new Date();
+    const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+
+    if (showAddDialog) {
+      setFormField({
+        ...formField,
+        created_by: parsedUser?.username,
+        created_at: formattedTime
+      });
+    }
+  }, [showAddDialog]);
+
+  useEffect(() => {
+    if (!showAddDialog) return;
+    const getCustomerList = async (sorting: any) => {
+      try {
+        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+
+        const response = await GetData(`${API_URL3_CUSTOMER}/customer/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        });
+        setCustomers(response?.data.list);
+        console.log('CUSTOMER: ', response?.data.list);
+      } catch (error) {
+        console.error('Error fetching customer', error);
+      }
+    };
+
+    getCustomerList([{ id: 'id', desc: false }]);
+  }, [showAddDialog]);
+
+  const fetchWallets = useCallback(async () => {
+    const params = {
+      limit: 100,
+      page: 1,
+      with_deleted: false,
+      order_field: 'name',
+      order_direction: 'ASC',
+      filter: JSON.stringify({
+        status: 'Y'
+      })
+    };
+    const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
+    if (response?.status && response?.data) {
+      setWallets(response.data.list);
+    } else {
+      setWallets([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!showAddDialog) return;
+    fetchWallets();
+  }, [showAddDialog]);
+
+  const doCreateTransferType = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      for (const key in formField) {
+        if (
+          formField[key as keyof typeof formField] === '' ||
+          formField[key as keyof typeof formField] === 0
+        ) {
+          setAlert({ show: true, message: 'All fields must be filled out' });
+          return;
+        }
+      }
+
+      setAlert({ show: false, message: '' });
+
+      const response = await PostData(`${API_URL}/transactiontype/create`, formField);
+
+      if (response?.status) {
+        setAlert({ show: false, message: '' });
+        handleAddDialog(false);
+        toast.success('Success Create Transfer Type');
+        reload();
+        resetForm();
+      } else {
+        setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
+      }
+      handleAddDialog(false);
+    },
+    [formField]
+  );
+
+  return (
+    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
+      <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-5 border-0">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">
+                Addd Transaction Type
+              </h1>
+              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => {
+                handleAddDialog(false);
+                resetForm();
+              }}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
+          <div className="flex flex-col px-0">
+            {alert.show && (
+              <Alert variant="danger" className="mb-3">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+            <form action="" onSubmit={doCreateTransferType}>
+              <div className="card-body grid gap-5 p-0">
+                <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">
+                      Transfer Type Name
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.name}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, name: target.value }))
+                      }
+                    />
+                  </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">
+                      Description
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.description}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, description: target.value }))
+                      }
+                    />
+                  </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">
+                      Minimum Amount
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.minimum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          minimum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </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">
+                      Maximum Amount
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.maximum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          maximum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Maximum Amount"
+                    />
+                  </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">
+                      Max Transaction per day
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.max_transaction_per_day}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          max_transaction_per_day: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Max Transaction Per Day"
+                    />
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">From Account</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_origin}
+                        onValueChange={(wallet_origin) =>
+                          setFormField((prev) => ({ ...prev, wallet_origin }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet, idx) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">To Account</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_destination}
+                        onValueChange={(wallet_destination) =>
+                          setFormField((prev) => ({ ...prev, wallet_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet, idx) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Wallet Destination Fee</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_fee_destination}
+                        onValueChange={(wallet_fee_destination) =>
+                          setFormField((prev) => ({ ...prev, wallet_fee_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet, idx) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Customer Fee Destination</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.customer_fee_destination}
+                        onValueChange={(customer_fee_destination) =>
+                          setFormField((prev) => ({ ...prev, customer_fee_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Customer" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {customers.map((customer, idx) => (
+                            <SelectItem value={customer.id} key={customer.id}>
+                              {customer.username} - {customer.msisdn}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Status Approval</label>
+
+                    <div className="grow">
+                      <Select
+                        value={formField.status_approval}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status_approval: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Yes</SelectItem>
+                          <SelectItem value="N">No</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Status</label>
+
+                    <div className="grow">
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex justify-end pt-2.5 gap-5">
+                  <Button
+                    variant={'outline'}
+                    type="reset"
+                    onClick={() => {
+                      resetForm();
+                    }}
+                  >
+                    Reset
+                  </Button>
+                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? 'Saving...' : 'Save Changes'}
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddDialog;

src/pages/transfer/transfertype/blocks/DeleteDialog.tsx

@@ -0,0 +1,74 @@
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Alert, useDataGrid } from '@/components';
+import { useCallback, useState } from 'react';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+import { useCallApi } from '@/hooks';
+import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
+import { DialogDescription } from '@radix-ui/react-dialog';
+
+const API_URL = apiConfig.service_transaction;
+
+const DeleteDialog = () => {
+  const { showDeleteDialog, handleDeleteDialog, selectedTransferType } = useManageTransferTypeContext();
+  const { reload } = useDataGrid();
+  const { DeleteData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const doDeleteTransferType = useCallback(async () => {
+    if (!selectedTransferType) {
+      toast.error('No Transfer Type selected');
+      return;
+    }
+
+    // Kirim enforce=false untuk memastikan soft delete
+    const response = await DeleteData(`${API_URL}/transactiontype/delete/${selectedTransferType}/false`, {
+      id: selectedTransferType
+    });
+
+    if (response?.status) {
+      setAlert({ show: false, message: '' });
+      handleDeleteDialog(false, null);
+      reload();
+      setTimeout(() => toast.success('Success Delete Product'), 0);
+    } else {
+      setAlert({ show: true, message: response?.message });
+      setTimeout(() => toast.error('Failed Delete Product'), 0);
+    }
+  }, [selectedTransferType, DeleteData, handleDeleteDialog, reload]);
+
+  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 className="text-lg">Delete Transfer Type</DialogTitle>
+          <DialogDescription className="text-sm">Are you sure you want to delete this data?</DialogDescription>
+          <Alert variant="warning">
+            <h3 className="text-lg">Are you sure?</h3>
+            <span className="text-sm">You will delete this data!</span>
+          </Alert>
+          {alert.show && (
+            <Alert variant="danger">
+              <h3>{alert.message}</h3>
+            </Alert>
+          )}
+        </DialogHeader>
+        <DialogFooter className="flex justify-end items-center gap-4 mt-3">
+          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+            Cancel
+          </Button>
+          <Button variant={'destructive'} onClick={() => doDeleteTransferType()}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDialog;
+export { DeleteDialog };

src/pages/transfer/transfertype/blocks/EditDialog.tsx

@@ -0,0 +1,513 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { NumericFormat } from 'react-number-format';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { apiConfig } from '@/config/api.config';
+import { Alert, Container, DataGridInner, KeenIcon, useDataGrid } from '@/components';
+import { toast } from 'sonner';
+import { useCallApi } from '@/hooks';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { getAuth } from '@/auth';
+import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
+import AddFeeDialog from '../../transferfee/blocks/AddDialog';
+
+const API_URL = apiConfig.service_transaction;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+const API_URL_CUSTOMER = apiConfig.service_customer;
+
+interface WalletProps {
+  Wallet_id: string;
+  Wallet_name: string;
+}
+
+interface CustomerProps {
+  id: string;
+  username: string;
+  msisdn: string;
+}
+
+interface TranssactionTypeProps {
+  name: string;
+  description: string;
+  minimum_amount: number;
+  maximum_amount: number;
+  max_transaction_per_day: number;
+  status_approval: string;
+  status: string;
+  wallet_origin: WalletProps;
+  wallet_destination: WalletProps;
+  wallet_fee_destination: WalletProps;
+  customer_fee_destination: CustomerProps;
+}
+
+const EditDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showEditDialog, handleEditDialog, selectedTransferType, accounts } =
+    useManageTransferTypeContext();
+  const { reload } = useDataGrid();
+  const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const { GetData, PutData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const parsedUser = getAuth()?.user;
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [transactiontypes, setTransactionTypes] = useState<TranssactionTypeProps[]>([]);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const resetForm = () => {
+    setFormField({
+      name: '',
+      description: '',
+      wallet_origin: '',
+      wallet_destination: '',
+      wallet_fee_destination: '',
+      customer_fee_destination: '',
+      minimum_amount: 0,
+      maximum_amount: 0,
+      max_transaction_per_day: 0,
+      status_approval: '',
+      status: '',
+      updated_by: '',
+      updated_at: ''
+    });
+  };
+  const [formField, setFormField] = useState({
+    name: '',
+    description: '',
+    wallet_origin: '',
+    wallet_destination: '',
+    wallet_fee_destination: '',
+    customer_fee_destination: '',
+    minimum_amount: 0,
+    maximum_amount: 0,
+    max_transaction_per_day: 0,
+    status_approval: '',
+    status: '',
+    updated_by: '',
+    updated_at: ''
+  });
+  useEffect(() => {
+    const updated_time = new Date();
+    const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
+
+    if (showEditDialog) {
+      setFormField({
+        ...formField,
+        updated_by: parsedUser?.username,
+        updated_at: formattedTime
+      });
+    }
+  }, [showEditDialog]);
+  /* actions */
+  const doUpdateTransferType = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const response = await PutData(`${API_URL}/transactiontype/update/${selectedTransferType}`, {
+        ...formField
+      });
+      if (response?.status) {
+        handleEditDialog(false, null);
+        toast.success('Success Update User');
+        reload();
+      } else {
+        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      }
+    },
+    [formField, selectedTransferType]
+  );
+  useEffect(() => {
+    const getCustomerList = async (sorting: any) => {
+      try {
+        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        });
+        console.log('CUSTOMER: ', response?.data.list);
+        setCustomers(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching customer', error);
+      }
+    };
+
+    getCustomerList([{ id: 'id', desc: false }]);
+  }, []);
+  const fetchWallets = useCallback(async () => {
+    const params = {
+      limit: 100,
+      page: 1,
+      with_deleted: false,
+      order_field: 'name',
+      order_direction: 'ASC',
+      filter: JSON.stringify({
+        status: 'Y'
+      })
+    };
+    const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
+    if (response?.status && response?.data) {
+      setWallets(response.data.list);
+    } else {
+      setWallets([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchWallets();
+  }, [fetchWallets]);
+
+  const fetchTransactionType = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
+    console.log('Transaction Type: ', response?.data);
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name,
+        description: response.data.description,
+        wallet_origin: response.data.wallet_origin.id,
+        wallet_destination: response.data.wallet_destination.id,
+        wallet_fee_destination: response.data.wallet_fee_destination.id,
+        customer_fee_destination: response.data.customer_fee_destination.id,
+        minimum_amount: response.data.minimum_amount,
+        maximum_amount: response.data.maximum_amount,
+        max_transaction_per_day: response.data.max_transaction_per_day,
+        status_approval: response.data.status_approval,
+        status: response.data.status
+        // updated_by: parsedUser?.username ,
+        // updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
+      }));
+      console.log('Transaction Type: ', formField);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (selectedTransferType) {
+      fetchTransactionType(selectedTransferType);
+    }
+  }, [selectedTransferType]);
+
+  return (
+    <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
+      <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-5 border-0">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">
+                Update Transaction Type
+              </h1>
+              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => {
+                handleEditDialog(false, null);
+                resetForm();
+              }}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
+          <div className="flex flex-col px-0">
+            {alert.show && (
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+            <form action="" onSubmit={doUpdateTransferType}>
+              <div className="card-body grid gap-5 p-0">
+                <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">
+                      Transfer Type Name
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.name}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, name: target.value }))
+                      }
+                    />
+                  </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">
+                      Description
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.description}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, description: target.value }))
+                      }
+                    />
+                  </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">
+                      Minimum Amount
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.minimum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          maximum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </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">
+                      Maximum Amount
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.maximum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          maximum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Maximum Amount"
+                    />
+                  </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">
+                      Maximum Transaction per day
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.max_transaction_per_day}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          max_transaction_per_day: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Max Transaction Per Day"
+                    />
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">From Account</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_origin}
+                        onValueChange={(wallet_origin) =>
+                          setFormField((prev) => ({ ...prev, wallet_origin }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">To Account</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_destination}
+                        onValueChange={(wallet_destination) =>
+                          setFormField((prev) => ({ ...prev, wallet_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet, idx) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Wallet Fee Destination</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_fee_destination}
+                        onValueChange={(wallet_fee_destination) =>
+                          setFormField((prev) => ({ ...prev, wallet_fee_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet, idx) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Select Customer</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.customer_fee_destination}
+                        onValueChange={(customer_fee_destination) =>
+                          setFormField((prev) => ({ ...prev, customer_fee_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {customers.map((customer, idx) => (
+                            <SelectItem value={customer.id} key={customer.id}>
+                              {customer.username} - {customer.msisdn}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Status Approval</label>
+
+                    <div className="grow">
+                      <Select
+                        value={formField.status_approval}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status_approval: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Yes</SelectItem>
+                          <SelectItem value="N">No</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Status</label>
+
+                    <div className="grow">
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end pt-2.5 gap-5">
+                  <Button
+                    variant={'outline'}
+                    type="reset"
+                    onClick={() => {
+                      resetForm();
+                    }}
+                  >
+                    Reset
+                  </Button>
+                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? 'Saving...' : 'Save Changes'}
+                  </Button>
+                </div>
+              </div>
+            </form>
+            {/* Bagian Transaction Fee */}
+            <ManageTransferFeeContextProvider>
+              <Container>
+                <div className="grid gap-5 lg:gap-7.5">
+                  <DataGridInner />
+                </div>
+                <AddFeeDialog />
+              </Container>
+            </ManageTransferFeeContextProvider>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { EditDialog };

src/pages/transfer/transfertype/blocks/ListToolBar.tsx

@@ -15,16 +15,11 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Access Type"
+                placeholder="Search Transaction Type"
                 value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />
             </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button variant={'outline'} className="h-7.5 disabled:bg-gray-400">
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip>
           </div>
           <div className="flex gap-3 items-center">
             <Button

src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx

@@ -0,0 +1,260 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import ListToolbar from '../blocks/ListToolBar';
+
+interface AccountProps {
+  id: string;
+  name: string;
+}
+
+interface TransferType {
+  id: string;
+  name: string;
+  minimum_amount: number;
+  maximum_amount: number;
+  max_transaction_per_day: number;
+  walletOriginId: string;
+  walletDestinationId: string;
+  status: string;
+}
+
+interface ContextProps {
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_user: string | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  showDeleteDialog: boolean;
+  handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
+  selectedTransferType: string | null;
+  transferType: string | null;
+  accounts: AccountProps[];
+}
+
+const initialProps: ContextProps = {
+  showEditDialog: false,
+  handleEditDialog: () => {},
+  showAddDialog: false,
+  handleAddDialog: () => {},
+  showDeleteDialog: false,
+  handleDeleteDialog: () => {},
+  selectedTransferType: null,
+  accounts: [],
+  transferType: null
+};
+
+const ManageTransferTypeContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_transaction;
+
+const ManageTransferTypeContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
+  const [accounts, setAccount] = useState<AccountProps[]>([]);
+  const { GetData } = useCallApi();
+  const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
+  const [transferType, setTransferType] = useState<string | null>(null);
+
+  const handleEditDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
+    setSelectedTransferType(show ? selected_transfertype : null);
+    setShowEditDialog(show);
+  }, []);
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
+
+  const handleDeleteDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
+    setShowDeleteDialog(show);
+    setSelectedTransferType(show ? selected_transfertype : null);
+  }, []);
+
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorFn: (row) => row.name,
+        id: 'name',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Transaction Type Name" column={column} />
+        ),
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.wallet_origin?.name || 'N/A',
+        id: 'wallet_origin',
+        header: ({ column }) => <DataGridColumnHeader title="From Account" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.wallet_destination.name || 'N/A',
+        id: 'wallet_destination',
+        header: ({ column }) => <DataGridColumnHeader title="To Account" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.maximum_amount,
+        id: 'maximum_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Maximum Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.minimum_amount,
+        id: 'minimum_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Minimum Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.max_transaction_per_day,
+        id: 'max_transaction_per_day',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Max Transaction Per Day" column={column} />
+        ),
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.description,
+        id: 'description',
+        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.wallet_fee_destination.name,
+        id: 'wallet_fee_destination',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Wallet Fee Destination" column={column} />
+        ),
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.customer_fee_destination?.username || 'N/A',
+        id: 'customer_fee_destination',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Customer Fee Destination" column={column} />
+        ),
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
+        id: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => (row.status_approval === 'Y' ? 'Yes' : 'No'),
+        id: 'status_approval',
+        header: ({ column }) => <DataGridColumnHeader title="Approval Status" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleEditDialog(true, row.id)}
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDeleteDialog(true, row.id)}
+              >
+                <KeenIcon icon="trash" />
+              </button>
+            </>
+          );
+        },
+        meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
+      }
+    ],
+    [handleEditDialog, handleDeleteDialog]
+  );
+  const doGetTransferTypeListData = async (
+    page: number,
+    limit: number,
+    sorting: any,
+    filter: any
+  ) => {
+    sorting = sorting.length == 0 ? [{ id: 'id', desc: false }] : sorting;
+    filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+    const response = await GetData(`${API_URL}/transactiontype/list`, {
+      limit: limit,
+      page: page + 1,
+      with_deleted: false,
+      order_field: sorting[0].id,
+      order_direction: sorting[0].desc ? 'ASC' : 'DESC',
+      filter: JSON.stringify(filter)
+    });
+    return { data: response?.data.list, totalCount: response?.data.total_count };
+  };
+
+  return (
+    <div className="min-h-screen">
+      <ManageTransferTypeContext.Provider
+        value={{
+          showEditDialog,
+          handleEditDialog,
+          showAddDialog,
+          handleAddDialog,
+          showDeleteDialog,
+          handleDeleteDialog,
+          selectedTransferType,
+          accounts,
+          transferType
+        }}
+      >
+        <Toaster expand visibleToasts={9} duration={3000} />
+
+        <div className="px-4">
+          <DataGridProvider
+            columns={columns}
+            pagination={{ size: 10 }}
+            layout={{ card: true }}
+            toolbar={<ListToolbar />}
+            sorting={[{ id: 'id', desc: true }]}
+            serverSide={true}
+            onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+              doGetTransferTypeListData(pageIndex, pageSize, sorting, columnFilters)
+            }
+          >
+            {children}
+          </DataGridProvider>
+        </div>
+      </ManageTransferTypeContext.Provider>
+    </div>
+  );
+};
+
+export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
+export type { TransferType };

src/partials/dropdowns/user/DropdownUser.tsx

@@ -110,7 +110,11 @@ const DropdownUser = ({ menuItemRef }: IDropdownUserProps) => {
             </Alert>
           </DialogHeader>
           <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-            <Button variant={'outlined'} onClick={() => setShowLogoutDialog(false)}>
+            <Button
+              variant={'outlined'}
+              onClick={() => setShowLogoutDialog(false)}
+              style={{ color: 'grey', borderColor: 'grey' }}
+            >
               Cancel
             </Button>
             <Button variant="outlined" color="error" onClick={handleLogout}>

src/routing/AppRoutingSetup.tsx

@@ -8,7 +8,7 @@ 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 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';
@@ -19,12 +19,11 @@ import AccessType from '@/pages/access/access-type/AccessType';
 import MemberCredential from '@/pages/access/member-credentials/MemberCredentials';
 import ManageCurrency from '@/pages/account/manage-currency/ManageCurrency';
 import ManageNotification from '@/pages/notification/ManageNotification';
-import MenuCategory from '@/pages/menu/menu-category/MenuCategory';
 import ManageMenu from '@/pages/menu/manage-menu/ManageMenu';
 import Welcome from '@/pages/menu/welcome/Welcome';
 import Inbox from '@/pages/message/Inbox';
 import ManageWebServices from '@/pages/webservice/ManageWebServices';
-import TransferType from '@/pages/transfer/TransferType';
+import TransferType from '@/pages/transfer/transfertype/TransferType';
 import MasterData from '@/pages/master/MasterData';
 import PostoAdmsMaster from '@/pages/master/postoadms/PostoAdmsMaster';
 import SucosMaster from '@/pages/master/sucos/SucosMaster';
@@ -33,7 +32,6 @@ import Municipios from '@/pages/master/municipios/Municipios';
 import ProfessionMaster from '@/pages/master/profession/ProfessionMaster';
 import ProductsMaster from '@/pages/master/products/ProductsMaster';
 import ProviderMaster from '@/pages/master/provider/ProviderMaster';
-import Transaction from '@/pages/transaction/transaction';
 import ConversionMaster from '@/pages/master/conversion/ConversionMaster';
 import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster';
 
@@ -76,10 +74,9 @@ const AppRoutingSetup = (): ReactElement => {
 
           <Route path="/notification/notification-management" element={<ManageNotification />} />
 
-          <Route path="/menu/menu-category" element={<MenuCategory />} />
+          <Route path="/transaction" element={<Transaction />} />
           <Route path="/menu/menu-management" element={<ManageMenu />} />
           <Route path="/menu/welcome" element={<Welcome />} />
-          <Route path="/transaction" element={<Transaction />} />
           <Route path="/message/inbox" element={<Inbox />} />
           <Route path="/webservice/webservice-management" element={<ManageWebServices />} />
           <Route path="/settings/user-management/manage-user" element={<ManageUserPage />} />

yarn.lock

@@ -524,14 +524,14 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
-"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1":
+"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1", "@emotion/cache@^11.13.5":
-  version "11.13.1"
+  version "11.14.0"
-  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz"
+  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz"
-  integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
+  integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==
   dependencies:
     "@emotion/memoize" "^0.9.0"
     "@emotion/sheet" "^1.4.0"
-    "@emotion/utils" "^1.4.0"
+    "@emotion/utils" "^1.4.2"
     "@emotion/weak-memoize" "^0.4.0"
     stylis "4.2.0"
 
@@ -578,15 +578,15 @@
     "@emotion/weak-memoize" "^0.4.0"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0", "@emotion/serialize@^1.3.1", "@emotion/serialize@^1.3.2":
+"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0", "@emotion/serialize@^1.3.1", "@emotion/serialize@^1.3.3":
-  version "1.3.2"
+  version "1.3.3"
-  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz"
+  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz"
-  integrity sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==
+  integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==
   dependencies:
     "@emotion/hash" "^0.9.2"
     "@emotion/memoize" "^0.9.0"
     "@emotion/unitless" "^0.10.0"
-    "@emotion/utils" "^1.4.1"
+    "@emotion/utils" "^1.4.2"
     csstype "^3.0.2"
 
 "@emotion/sheet@^1.4.0":
@@ -621,10 +621,10 @@
   resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz"
   integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
 
-"@emotion/utils@^1.4.0", "@emotion/utils@^1.4.1":
+"@emotion/utils@^1.4.0", "@emotion/utils@^1.4.2":
-  version "1.4.1"
+  version "1.4.2"
-  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz"
+  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz"
-  integrity sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==
+  integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==
 
 "@emotion/weak-memoize@^0.4.0":
   version "0.4.0"
@@ -979,68 +979,75 @@
     clsx "^2.1.0"
     prop-types "^15.8.1"
 
-"@mui/core-downloads-tracker@^6.1.6":
+"@mui/core-downloads-tracker@^6.4.8":
-  version "6.1.6"
+  version "6.4.8"
-  resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz"
+  resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.8.tgz"
-  integrity sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==
+  integrity sha512-vjP4+A1ybyCRhDZC7r5EPWu/gLseFZxaGyPdDl94vzVvk6Yj6gahdaqcjbhkaCrJjdZj90m3VioltWPAnWF/zw==
 
-"@mui/material@^6.1.6":
+"@mui/icons-material@^6.4.6":
-  version "6.1.6"
+  version "6.4.6"
-  resolved "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz"
+  resolved "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.6.tgz"
-  integrity sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==
+  integrity sha512-rGJBvIQQbQAlyKYljHQ8wAQS/K2/uYwvemcpygnAmCizmCI4zSF9HQPuiG8Ql4YLZ6V/uKjA3WHIYmF/8sV+pQ==
   dependencies:
     "@babel/runtime" "^7.26.0"
-    "@mui/core-downloads-tracker" "^6.1.6"
+
-    "@mui/system" "^6.1.6"
+"@mui/material@^6.1.6", "@mui/material@^6.4.6":
-    "@mui/types" "^7.2.19"
+  version "6.4.8"
-    "@mui/utils" "^6.1.6"
+  resolved "https://registry.npmjs.org/@mui/material/-/material-6.4.8.tgz"
+  integrity sha512-5S9UTjKZZBd9GfbcYh/nYfD9cv6OXmj5Y7NgKYfk7JcSoshp8/pW5zP4wecRiroBSZX8wcrywSgogpVNO+5W0Q==
+  dependencies:
+    "@babel/runtime" "^7.26.0"
+    "@mui/core-downloads-tracker" "^6.4.8"
+    "@mui/system" "^6.4.8"
+    "@mui/types" "~7.2.24"
+    "@mui/utils" "^6.4.8"
     "@popperjs/core" "^2.11.8"
-    "@types/react-transition-group" "^4.4.11"
+    "@types/react-transition-group" "^4.4.12"
     clsx "^2.1.1"
     csstype "^3.1.3"
     prop-types "^15.8.1"
-    react-is "^18.3.1"
+    react-is "^19.0.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^6.1.6":
+"@mui/private-theming@^6.4.8":
-  version "6.1.6"
+  version "6.4.8"
-  resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz"
+  resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.8.tgz"
-  integrity sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==
+  integrity sha512-sWwQoNSn6elsPTAtSqCf+w5aaGoh7AASURNmpy+QTTD/zwJ0Jgwt0ZaaP6mXq2IcgHxYnYloM/+vJgHPMkRKTQ==
   dependencies:
     "@babel/runtime" "^7.26.0"
-    "@mui/utils" "^6.1.6"
+    "@mui/utils" "^6.4.8"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^6.1.6":
+"@mui/styled-engine@^6.4.8":
-  version "6.1.6"
+  version "6.4.8"
-  resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz"
+  resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.4.8.tgz"
-  integrity sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==
+  integrity sha512-oyjx1b1FvUCI85ZMO4trrjNxGm90eLN3Ohy0AP/SqK5gWvRQg1677UjNf7t6iETOKAleHctJjuq0B3aXO2gtmw==
   dependencies:
     "@babel/runtime" "^7.26.0"
-    "@emotion/cache" "^11.13.1"
+    "@emotion/cache" "^11.13.5"
-    "@emotion/serialize" "^1.3.2"
+    "@emotion/serialize" "^1.3.3"
     "@emotion/sheet" "^1.4.0"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/system@^6.1.6":
+"@mui/system@^6.4.8":
-  version "6.1.6"
+  version "6.4.8"
-  resolved "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz"
+  resolved "https://registry.npmjs.org/@mui/system/-/system-6.4.8.tgz"
-  integrity sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==
+  integrity sha512-gV7iBHoqlsIenU2BP0wq14BefRoZcASZ/4LeyuQglayBl+DfLX5rEd3EYR3J409V2EZpR0NOM1LATAGlNk2cyA==
   dependencies:
     "@babel/runtime" "^7.26.0"
-    "@mui/private-theming" "^6.1.6"
+    "@mui/private-theming" "^6.4.8"
-    "@mui/styled-engine" "^6.1.6"
+    "@mui/styled-engine" "^6.4.8"
-    "@mui/types" "^7.2.19"
+    "@mui/types" "~7.2.24"
-    "@mui/utils" "^6.1.6"
+    "@mui/utils" "^6.4.8"
     clsx "^2.1.1"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/types@^7.2.14", "@mui/types@^7.2.15", "@mui/types@^7.2.19":
+"@mui/types@^7.2.14", "@mui/types@^7.2.15", "@mui/types@~7.2.24":
-  version "7.2.19"
+  version "7.2.24"
-  resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz"
+  resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz"
-  integrity sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==
+  integrity sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==
 
 "@mui/utils@^5.15.14":
   version "5.16.6"
@@ -1054,17 +1061,17 @@
     prop-types "^15.8.1"
     react-is "^18.3.1"
 
-"@mui/utils@^6.1.6":
+"@mui/utils@^6.1.6", "@mui/utils@^6.4.8":
-  version "6.1.6"
+  version "6.4.8"
-  resolved "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz"
+  resolved "https://registry.npmjs.org/@mui/utils/-/utils-6.4.8.tgz"
-  integrity sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==
+  integrity sha512-C86gfiZ5BfZ51KqzqoHi1WuuM2QdSKoFhbkZeAfQRB+jCc4YNhhj11UXFVMMsqBgZ+Zy8IHNJW3M9Wj/LOwRXQ==
   dependencies:
     "@babel/runtime" "^7.26.0"
-    "@mui/types" "^7.2.19"
+    "@mui/types" "~7.2.24"
-    "@types/prop-types" "^15.7.13"
+    "@types/prop-types" "^15.7.14"
     clsx "^2.1.1"
     prop-types "^15.8.1"
-    react-is "^18.3.1"
+    react-is "^19.0.0"
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -1677,10 +1684,10 @@
   resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
-"@types/prop-types@*", "@types/prop-types@^15.7.12", "@types/prop-types@^15.7.13":
+"@types/prop-types@*", "@types/prop-types@^15.7.12", "@types/prop-types@^15.7.14":
-  version "15.7.13"
+  version "15.7.14"
-  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz"
-  integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
+  integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
 
 "@types/react-dom@*", "@types/react-dom@^18.3.1":
   version "18.3.1"
@@ -1696,12 +1703,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.11":
+"@types/react-transition-group@^4.4.12":
-  version "4.4.11"
+  version "4.4.12"
-  resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz"
+  resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz"
-  integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==
+  integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
-  dependencies:
-    "@types/react" "*"
 
 "@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react@^17.0.0 || ^18.0.0", "@types/react@^17.0.0 || ^18.0.0 || ^19.0.0", "@types/react@^18.3.12", "@types/react@16 || 17 || 18":
   version "18.3.12"
@@ -2624,6 +2629,8 @@ fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
@@ -3796,6 +3803,11 @@ react-is@^18.3.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-is@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz"
+  integrity sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==
+
 react-leaflet@^4.2.1:
   version "4.2.1"
   resolved "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz"