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

src/components/data-grid/DataGridContext.tsx

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

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

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

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

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

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

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

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

@@ -89,7 +89,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
       },
       {
         accessorFn: (row) => row.sucos.name,
-        id: 'sucos',
+        id: 'sucos_name',
         header: ({ column }) => <DataGridColumnHeader title="Sucos" column={column} />,
         enableSorting: true,
         enableHiding: false,

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

@@ -33,6 +33,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { useManageConversionContext } from '../hooks/useManageConversionContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 interface CurrencyProps {
   ID: string;
   name: string;
@@ -80,6 +81,13 @@ const AddDialog = () => {
         resetForm();
         handleAddDialog(false);
         toast.success('Success Create Conversion');
+              const createActivity = {
+                module: 'Manage Conversion',
+                description: `Create Conversion => ${selectedConversion}`,
+                action: 'C'
+              };
+        
+              doSaveLogActivity(createActivity);
         reload();
       } else {
         toast.error('Error Create Conversion');
@@ -121,7 +129,7 @@ const AddDialog = () => {
     }
 
     doCreateConversion(e);
-    console.log(formField);
+    // console.log(formField);
     setAlert({ show: false, message: '' });
   };
 

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

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

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

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

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

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

src/pages/master/currency/CurrencyMaster.tsx

@@ -0,0 +1,44 @@
+import { Container, DataGridInner } from '@/components';
+import { ManageCurrencyContextProvider } from './hooks/ManageCurrencyContext';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Delete } from 'lucide-react';
+import AddDialog from './blocks/AddDialog';
+import DeleteDialog from './blocks/DeleteDialog';
+import EditDialog from './blocks/EditDialog';
+
+// import EditDialog from './blocks/EditDialog';
+
+const CurrencyMaster = () => {
+  return (
+    <ManageCurrencyContextProvider>
+      <Container>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Currency</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">Manage Currency</span>
+          </Link>
+        </Breadcrumbs>
+
+        <div className="grid gap-5 lg:gap-7.5">
+          <DataGridInner />
+        </div>
+
+        <AddDialog />
+        <DeleteDialog />
+        <EditDialog />
+        {/* <EditDialog/>
+        <DeleteDialog/> */}
+      </Container>
+    </ManageCurrencyContextProvider>
+  );
+};
+
+export default CurrencyMaster;

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

@@ -0,0 +1,234 @@
+import { apiConfig } from '@/config/api.config';
+import { Alert, useDataGrid } from '@/components';
+import { useCallApi } from '@/hooks';
+import { getAuth } from '@/auth';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { NumericFormat } from 'react-number-format';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { set } from 'date-fns';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
+import { prefix } from 'stylis';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+interface CurrencyProps {
+  ID: string;
+  name: string;
+}
+
+const API_URL = apiConfig.service_wallet;
+
+const AddDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showAddDialog, handleAddDialog, selectedCurrency } = useManageCurrencyContext();
+  const { reload } = useDataGrid();
+  const { PostData, GetData } = useCallApi();
+  const parsedUser = getAuth()?.user;
+  const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
+  const [open, setOpen] = useState(false);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const initialState = {
+    code: '',
+    name: '',
+    prefix: '',
+    status: '',
+    created_by: '',
+    created_at: ''
+  };
+  const [formField, setFormField] = useState(initialState);
+  const created_time = new Date();
+  const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
+  const doCreateCurrency = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      const response = await PostData(`${API_URL}/dashboard/currency/`, formField);
+
+      if (response?.status) {
+        resetForm();
+        handleAddDialog(false);
+        toast.success('Success Create Currency');
+        const createActivity = {
+                      module: 'Manage Currency',
+                      description: `Create Currency=> ${selectedCurrency}`,
+                      action: 'C'
+                    };
+              
+                    doSaveLogActivity(createActivity);
+        reload();
+      } else {
+        toast.error('Error Create Currency');
+        setAlert({ show: true, message: 'Failed to create Currency. Please try again.' });
+      }
+    },
+    [formField]
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (
+      formField.code === '' ||
+      formField.name === '' ||
+      formField.prefix === '' ||
+      formField.status === ''
+    ) {
+      setAlert({ show: true, message: 'Please fill in all required fields.' });
+      return;
+    }
+
+    doCreateCurrency(e);
+    // console.log(formField);
+    setAlert({ show: false, message: '' });
+  };
+
+  useEffect(() => {
+    if (showAddDialog) {
+      setFormField({
+        ...formField,
+        created_by: parsedUser.username,
+        created_at: formattedTime
+      });
+    }
+  }, [formattedTime]);
+
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
+  return (
+    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Cuurency - Create</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <DialogBody ref={parentRef}>
+          <div className="flex flex-col">
+            {alert.show && (
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+
+            <form onSubmit={handleSubmit}>
+              <div className="card-body grid gap-5">
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Code<span className="text-red-500">*</span>
+                  </label>
+
+                  <Input
+                    className="input col-span-6"
+                    type="text"
+                    autoComplete="off"
+                    value={formField.code}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, code: target.value }))
+                    }
+                  />
+                </div>
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Name<span className="text-red-500">*</span>
+                  </label>
+
+                  <Input
+                    className="input col-span-6"
+                    type="text"
+                    autoComplete="off"
+                    value={formField.name}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, name: target.value }))
+                    }
+                  />
+                </div>
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Prefix<span className="text-red-500">*</span>
+                  </label>
+
+                  <Input
+                    className="input col-span-6"
+                    type="text"
+                    autoComplete="off"
+                    value={formField.prefix}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, prefix: target.value }))
+                    }
+                  />
+                </div>
+
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Status<span className="text-red-500">*</span>
+                  </label>
+
+                  <div className="col-span-6">
+                    <Select
+                      value={formField.status}
+                      onValueChange={(value) =>
+                        setFormField((prev) => ({ ...prev, status: value }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-5">
+                  <Button type="button" variant="outline" onClick={resetForm}>
+                    Reset
+                  </Button>
+                  <Button variant="default">Save Changes</Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddDialog;

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

@@ -1,54 +1,62 @@
-import { useCallApi } from '@/hooks';
-import { useManageWalletContext } from '../hooks/useManageWalletContext';
 import { Alert, useDataGrid } from '@/components';
+import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
 import { useCallback, useState } from 'react';
-import { toast } from 'sonner';
 import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { toast } from 'sonner';
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { DialogDescription } from '@radix-ui/react-dialog';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
-const API_URL = apiConfig.service_master_data;
+const API_URL = apiConfig.service_wallet;
 
 const DeleteDialog = () => {
-  const { showDeleteDialog, handleDeleteDialog, selectedWallet } = useManageWalletContext();
+  const { showDeleteDialog, handleDeleteDialog, selectedCurrency } = useManageCurrencyContext();
-  const { DeleteData } = useCallApi();
   const { reload } = useDataGrid();
-  const [alert, setAlert] = useState({ show: false, message: '' });
+  const { DeleteData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
 
-  const doDeleteWallet = useCallback(async () => {
+  const doDeleteCurrency = useCallback(async () => {
-    if (!selectedWallet) {
+    if (!selectedCurrency) {
-      toast.error('No wallet selected');
+      toast.error('No Currency selected');
       return;
     }
-
+    // console.log(selectedCurrency);
-    const response = await DeleteData(
+    const response = await DeleteData(`${API_URL}/dashboard/currency/${selectedCurrency}`, {
-      `${API_URL}/wallet/delete/${selectedWallet.Wallet_id}/false`,
+      id: selectedCurrency
-      {
+    });
-        id: selectedWallet.Wallet_id
-      }
-    );
 
     if (response?.status) {
       setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
-      toast.success('Success Delete Wallet');
+      toast.success('Success Delete Currency');
+              const createActivity = {
+                            module: 'Manage Currency',
+                            description: `Delete Currency=> ${selectedCurrency}`,
+                            action: 'D'
+                          };
+                    
+                          doSaveLogActivity(createActivity);
       reload();
     } else {
       setAlert({ show: true, message: response?.message });
-      toast.error('Failed Delete Wallet');
+      toast.error('Failed Delete Currency');
     }
-  }, [selectedWallet, handleDeleteDialog, DeleteData, reload]);
+  }, [selectedCurrency, DeleteData, handleDeleteDialog, reload]);
-
+  // console.log(selectedCurrency);
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
-      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden">
+      <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>
@@ -66,7 +74,7 @@ const DeleteDialog = () => {
           <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant="destructive" onClick={doDeleteWallet}>
+          <Button variant="destructive" onClick={doDeleteCurrency}>
             Delete
           </Button>
         </DialogFooter>

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

@@ -0,0 +1,228 @@
+import { apiConfig } from '@/config/api.config';
+import { Alert, useDataGrid } from '@/components';
+import { useCallApi } from '@/hooks';
+import { getAuth } from '@/auth';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { NumericFormat } from 'react-number-format';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { set } from 'date-fns';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+interface CurrencyProps {
+  ID: string;
+  name: string;
+}
+
+const API_URL = apiConfig.service_wallet;
+
+const EditDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showEditDialog, handleEditDialog, selectedCurrency } = useManageCurrencyContext();
+  const { reload } = useDataGrid();
+  const { PostData, GetData, PutData } = useCallApi();
+  const parsedUser = getAuth()?.user;
+  const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
+  const [open, setOpen] = useState(false);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const initialState = {
+    code: '',
+    name: '',
+    prefix: '',
+    status: '',
+    created_by: '',
+    created_at: ''
+  };
+  const [formField, setFormField] = useState(initialState);
+  const updated_time = new Date();
+  const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
+
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
+  const doUpdateCurrency = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      if (!showEditDialog) return;
+      const response = await PutData(`${API_URL}/dashboard/currency/${selectedCurrency}`, {
+        ...formField
+      });
+
+      if (response?.status) {
+        resetForm();
+        handleEditDialog(false, null);
+        toast.success('Success Update Currency');
+        const createActivity = {
+          module: 'Manage Currency',
+          description: `Update Currency=> ${selectedCurrency}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
+        reload();
+      } else {
+        toast.error('Error Create Currency');
+        setAlert({ show: true, message: 'Failed to Update Currency. Please try again.' });
+      }
+    },
+    [formField]
+  );
+
+  const doGetCurrencyById = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/dashboard/currency/${id}`, { id });
+    // console.log('Transaction Type: ', response?.data);
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        status: response.data.status,
+        code: response.data.code,
+        name: response.data.name,
+        prefix: response.data.prefix
+      }));
+    }
+    // console.log('form fieldd Transaction Type: ', formField);
+  }, []);
+
+  useEffect(() => {
+    if (selectedCurrency) {
+      doGetCurrencyById(selectedCurrency);
+    }
+  }, [selectedCurrency]);
+
+  useEffect(() => {
+    if (showEditDialog) {
+      setFormField({
+        ...formField,
+        created_by: parsedUser.username,
+        created_at: formattedTime
+      });
+    }
+  }, [formattedTime]);
+
+  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">
+        <DialogHeader>
+          <DialogTitle>Currency - Update</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <DialogBody ref={parentRef}>
+          <div className="flex flex-col">
+            {alert.show && (
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+
+            <form onSubmit={doUpdateCurrency}>
+              <div className="card-body grid gap-5">
+                <div className="w-full">
+                  <label className="form-label">
+                    Code
+                    <span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    type="text"
+                    placeholder="Code"
+                    value={formField.code}
+                    onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">
+                    Name
+                    <span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    type="text"
+                    placeholder="Code"
+                    value={formField.name}
+                    onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
+                  />
+                </div>
+
+                <div className="w-full">
+                  <label className="form-label">
+                    Prefix
+                    <span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    type="text"
+                    placeholder="Code"
+                    value={formField.prefix}
+                    onChange={(e) => setFormField((prev) => ({ ...prev, prefix: e.target.value }))}
+                  />
+                </div>
+
+                <div className="w-full">
+                  <label className="form-label">
+                    Status
+                    <span className="text-red-500">*</span>
+                  </label>
+
+                  <Select
+                    value={formField.status}
+                    onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select" defaultValue={formField.status} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">Active</SelectItem>
+                      <SelectItem value="N">Inactive</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="flex justify-end gap-5">
+                  <Button type="button" variant="outline" onClick={resetForm}>
+                    Reset
+                  </Button>
+                  <Button variant="default">Save Changes</Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditDialog;

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

@@ -0,0 +1,55 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog } = useManageCurrencyContext();
+
+  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 Conversion"
+                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+              />
+            </label> */}
+            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                disabled={isLoading}
+                onClick={handleFilterData}
+              >
+                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
+                <KeenIcon icon="filter" />
+              </Button>
+            </DefaultTooltip> */}
+          </div>
+          <div className="flex gap-3 items-center">
+            <Button
+              variant="outline"
+              className="h-7.5 text-[0.8rem]"
+              onClick={() => handleAddDialog(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/master/currency/hooks/ManageCurrencyContext.tsx

@@ -0,0 +1,199 @@
+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';
+
+interface Currency {
+  id: string;
+  code: string;
+  name: string;
+  prefix: string;
+  status: string;
+}
+
+interface ContextProps {
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_currency: string | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  showDeleteDialog: boolean;
+  handleDeleteDialog: (show: boolean, selected_currency: string | null) => void;
+  selectedCurrency: string | null;
+  currency: string | null;
+}
+
+const initialProps: ContextProps = {
+  showEditDialog: false,
+  handleEditDialog: () => {},
+  showAddDialog: false,
+  handleAddDialog: () => {},
+  showDeleteDialog: false,
+  handleDeleteDialog: () => {},
+  selectedCurrency: null,
+  currency: null
+};
+
+const ManageCurrencyContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_wallet;
+
+const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const { GetData } = useCallApi();
+  const [selectedCurrency, setSelectedCurrency] = useState<string | null>(null);
+  const [currency, setCurrency] = useState<string | null>(null);
+
+  const handleEditDialog = useCallback((show: boolean, selected_currency: string | null) => {
+    setSelectedCurrency(show ? selected_currency : null);
+    setShowEditDialog(show);
+  }, []);
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
+
+  const handleDeleteDialog = useCallback((show: boolean, selected_currency: string | null) => {
+    setShowDeleteDialog(show);
+    setSelectedCurrency(show ? selected_currency : null);
+  }, []);
+
+  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-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.code,
+        id: 'code',
+        header: ({ column }) => <DataGridColumnHeader title="Code" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.prefix,
+        id: 'prefix',
+        header: ({ column }) => <DataGridColumnHeader title="Prefix" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.status,
+        id: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' },
+        cell: ({ row }) => {
+          const isActive = row.original.status === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Active' : 'Inactive'}
+            </span>
+          );
+        }
+      },
+      {
+        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 doGetCurrency = async (
+    page: number,
+    limit: number,
+    sorting: any
+    // filter: any
+  ) => {
+    // sorting = sorting.length == 0 ? [{ id: 'name', desc: true }] : sorting;
+    // filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+    // console.log(sorting);
+    const response = await GetData(`${API_URL}/dashboard/currency/`, {
+      limit,
+      page: page + 1,
+      with_deleted: false,
+      order_field: sorting[0].id,
+      order_direction: sorting[0].desc ? 'ASC' : 'DESC'
+      // filter: JSON.stringify(filter)
+    });
+    // console.log(response?.data);
+    return { data: response?.data.list, totalCount: response?.data.total_count };
+  };
+
+  return (
+    <div className="min-h-screen">
+      <ManageCurrencyContext.Provider
+        value={{
+          showEditDialog,
+          handleEditDialog,
+          showAddDialog,
+          handleAddDialog,
+          showDeleteDialog,
+          handleDeleteDialog,
+          selectedCurrency,
+          currency
+        }}
+      >
+        <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 }) =>
+              doGetCurrency(pageIndex, pageSize, sorting)
+            }
+          >
+            {children}
+          </DataGridProvider>
+        </div>
+      </ManageCurrencyContext.Provider>
+    </div>
+  );
+};
+
+export { ManageCurrencyContext, ManageCurrencyContextProvider };
+export type { Currency };

src/pages/master/currency/hooks/useManageCurrencyContext.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -31,6 +31,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 export interface CustomerProps {
   id: string;
@@ -50,7 +51,7 @@ const API_URL_MASTERDATA = apiConfig.service_master_data;
 const API_URL_TRANSACTION = apiConfig.service_transaction;
 
 const AddDialog = () => {
-  const { showAddDialog, handleAddDialog } = useManageProviderContext();
+  const { showAddDialog, handleAddDialog, selectedProvider } = useManageProviderContext();
   const { reload } = useDataGrid();
   const { PostData, GetData } = useCallApi();
   const parentRef = useRef<any | null>(null);
@@ -91,6 +92,13 @@ const AddDialog = () => {
         resetForm();
         handleAddDialog(false);
         toast.success('Success Create Provider');
+                const createActivity = {
+                  module: 'Manage Provider',
+                  description: `Create Provider => ${selectedProvider}`,
+                  action: 'C'
+                };
+        
+                doSaveLogActivity(createActivity);
         reload();
       } else {
         toast.error('Failed Create Provider');
@@ -293,7 +301,11 @@ const AddDialog = () => {
                     </label>
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
-                        <button type="button" className="input col-span-5 text-left">
+                      <button
+                            type="button"
+                            className="input col-span-5 text-left"
+                            style={{ color: 'inherit' }}
+                          >
                           {customers.find((customer) => customer.id === formField.agent)
                             ?.username || 'Select Agent'}
                         </button>
@@ -301,13 +313,19 @@ const AddDialog = () => {
                       <PopoverContent className="w-[400px] p-0">
                         <Command>
                           <CommandInput placeholder="Search Agent..." />
-                          <CommandList>
+                          <CommandList
+                            className="max-h-[300px] overflow-y-auto"
+                            style={{ touchAction: 'pan-y' }}
+                            onWheel={(e) => {
+                              e.currentTarget.scrollTop += e.deltaY;
+                            }}
+                          >
                             <CommandEmpty>No Agent found.</CommandEmpty>
                             <CommandGroup>
                               {customers.map((customer) => (
                                 <CommandItem
                                   key={customer.id}
-                                  value={customer.id}
+                                  value={customer.username}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,

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

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

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

@@ -32,6 +32,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL_MASTERDATA = apiConfig.service_master_data;
@@ -82,6 +83,13 @@ const EditDialog = () => {
         resetForm();
         handleEditDialog(false, null);
         toast.success('Provider updated successfully.');
+        const createActivity = {
+          module: 'Manage Provider',
+          description: `Update Provider => ${selectedProvider}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
         reload();
       } else {
         toast.error('Failed to update provider.');
@@ -308,7 +316,11 @@ const EditDialog = () => {
                     </label>
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
-                        <button type="button" className="input col-span-5 text-left">
+                        <button
+                          type="button"
+                          className="input col-span-5 text-left"
+                          style={{ color: 'inherit' }}
+                        >
                           {customers.find((customer) => customer.id === formField.agent)
                             ?.fullname || 'Select Agent'}
                         </button>
@@ -316,13 +328,19 @@ const EditDialog = () => {
                       <PopoverContent className="w-[400px] p-0">
                         <Command>
                           <CommandInput placeholder="Search Agent..." />
-                          <CommandList>
+                          <CommandList
+                            className="max-h-[300px] overflow-y-auto"
+                            style={{ touchAction: 'pan-y' }}
+                            onWheel={(e) => {
+                              e.currentTarget.scrollTop += e.deltaY;
+                            }}
+                          >
                             <CommandEmpty>No Agent found.</CommandEmpty>
                             <CommandGroup>
                               {customers.map((customer) => (
                                 <CommandItem
                                   key={customer.id}
-                                  value={customer.id}
+                                  value={customer.username}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,

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

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

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

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

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

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

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

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

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

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

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

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

src/pages/master/wallet/WalletMaster.tsx

@@ -3,7 +3,6 @@ import { ManageWalletContextProvider } from './hooks/ManageWalletContext';
 import { Breadcrumbs, Link } from '@mui/material';
 import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
-import DeleteDialog from './blocks/DeleteDialog';
 
 const WalletMaster = () => {
   return (
@@ -28,7 +27,6 @@ const WalletMaster = () => {
         </div>
         <AddDialog />
         <EditDialog />
-        <DeleteDialog />
       </Container>
     </ManageWalletContextProvider>
   );

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

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

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

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

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

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

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

@@ -131,12 +131,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
               >
                 <KeenIcon icon="notepad-edit" />
               </button>
-              <button
-                className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleDeleteDialog(true, row)}
-              >
-                <KeenIcon icon="trash" />
-              </button>
             </>
           );
         },
@@ -152,7 +146,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
   const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+      filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() };
       const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, {
         limit,
         page: page + 1,
@@ -189,7 +183,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         pagination={{ size: 25 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'id', desc: false }]}
+        sorting={[{ id: 'name', desc: false }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getWalletLists(pageIndex, pageSize, sorting, columnFilters)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,82 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
+import { Button } from '@/components/ui/button';
+import { useCallback, useState, useEffect } from 'react';
+import { toast } from 'sonner';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+
+  // Set the initial state for trxDate
+  const [trxDate, settrxDate] = useState({ from: '', to: '' });
+
+  // Function to format date to YYYY-MM-DD
+  const formatDate = (date: Date): string => {
+    return date.toISOString().split('T')[0];
+  };
+
+  // useEffect to set the default date values
+  useEffect(() => {
+    const today = new Date();
+    const nextWeek = new Date(today);
+    nextWeek.setDate(today.getDate() + 7);
+
+    settrxDate({
+      from: formatDate(today),   // Set 'from' to today
+      to: formatDate(nextWeek),  // Set 'to' to 7 days later
+    });
+  }, []);
+
+  const handleFilterData = useCallback(() => {
+    try {
+      table.getColumn('transaction_date')?.setFilterValue(trxDate);
+    } catch (error) {
+      toast.error('Error applying filter');
+      console.error('Error applying filter:', error);
+    }
+  }, [trxDate, table]);
+
+  useEffect(() => {
+    if (trxDate.from && trxDate.to) {
+      handleFilterData();
+    }
+  }, [trxDate]);
+
+  return (
+    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
+      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+        <div className="flex justify-between w-full items-center">
+          <div className="flex w-[50%] gap-3 items-center">
+            <label className="input input-sm w-1/3">
+              From
+              <input
+                type="date"
+                placeholder="From"
+                value={trxDate.from}
+                onChange={(event) =>
+                  settrxDate({ ...trxDate, from: event.target.value })
+                }
+                name="from"
+              />
+            </label>
+
+            <label className="input input-sm w-1/3">
+              To
+              <input
+                type="date"
+                placeholder="To"
+                value={trxDate.to}
+                onChange={(event) =>
+                  settrxDate({ ...trxDate, to: event.target.value })
+                }
+                name="to"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { apiConfig } from '@/config/api.config';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
 import {
   Alert,
@@ -30,6 +30,15 @@ import {
 import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 import { getAuth } from '@/auth';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
 
 interface WalletProps {
   Wallet_id: string;
@@ -48,6 +57,7 @@ const API_URL3_CUSTOMER = apiConfig.service_customer;
 
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
+  const [open, setOpen] = useState(false);
   const { GetData } = useCallApi();
   const { showAddDialog, handleAddDialog, selectedTransferType } = useManageTransferTypeContext();
   const [wallets, setWallets] = useState<WalletProps[]>([]);
@@ -70,37 +80,102 @@ const AddDialog = () => {
     maximum_amount: 0,
     max_transaction_per_day: 0,
     status: '',
+    type: '',
     status_approval: '',
     created_by: '',
     created_at: ''
   };
 
   const [formField, setFormField] = useState(initialState);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
   };
-  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const parsedUser = getAuth()?.user;
 
+  // Updated validation function to make only certain fields required
+  const validateForm = () => {
+    const requiredFields = [
+      'name',
+      'description',
+      'wallet_origin',
+      'wallet_destination',
+      'wallet_fee_destination',
+      'customer_fee_destination',
+      'status',
+      'status_approval'
+    ];
+
+    const missingFields = requiredFields.filter(
+      (field) =>
+        formField[field as keyof typeof formField] === '' ||
+        formField[field as keyof typeof formField] === null ||
+        formField[field as keyof typeof formField] === undefined
+    );
+
+    if (missingFields.length > 0) {
+      setAlert({
+        show: true,
+        message: `Please fill out all required fields: ${missingFields.join(', ')}`
+      });
+      return false;
+    }
+
+    setAlert({ show: false, message: '' });
+    return true;
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    // setIsSubmitting(true);
+    setIsSubmitting(true);
-    const payload = {
+
-      name: formField.name,
+    if (!validateForm()) {
-      description: formField.description,
+      setIsSubmitting(false);
-      wallet_origin: formField.wallet_origin,
+      return;
-      wallet_destination: formField.wallet_destination,
+    }
-      minimum_amount: formField.minimum_amount,
+
-      maximum_amount: formField.maximum_amount,
+    doCreateTransferType(formField)
-      max_transaction_per_day: formField.max_transaction_per_day,
+      .then((success) => {
-      wallet_fee_destination: formField.wallet_fee_destination,
+        if (success) {
-      customer_fee_destination: formField.customer_fee_destination,
+          handleAddDialog(false);
-      status_approval: formField.status_approval,
+          toast.success('Success Create Transfer Type');
-      status: formField.status
+          reload();
-    };
+          resetForm();
+        }
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+      });
   };
+
+  const doCreateTransferType = useCallback(
+    async (data: typeof formField) => {
+      try {
+        const response = await PostData(`${API_URL}/transactiontype/create`, data);
+
+        if (response?.status) {
+          setAlert({ show: false, message: '' });
+          return true;
+        } else {
+          setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
+          return false;
+        }
+      } catch (error) {
+        setAlert({
+          show: true,
+          message:
+            error instanceof Error
+              ? error.message
+              : 'An error occurred while creating transfer type'
+        });
+        return false;
+      }
+    },
+    [PostData]
+  );
+
   useEffect(() => {
     const created_time = new Date();
     const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@@ -128,7 +203,6 @@ const AddDialog = () => {
           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);
       }
@@ -161,34 +235,6 @@ const AddDialog = () => {
     fetchWallets();
   }, [showAddDialog]);
 
-  const doCreateTransferType = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      for (const key in formField) {
-        if (formField[key as keyof typeof formField] === '') {
-          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">
@@ -198,7 +244,7 @@ const AddDialog = () => {
           <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
+                Add Transaction Type
               </h1>
               <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
             </div>
@@ -220,7 +266,7 @@ const AddDialog = () => {
                 <h3>{alert.message}</h3>
               </Alert>
             )}
-            <form action="" onSubmit={doCreateTransferType}>
+            <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">
@@ -228,15 +274,17 @@ const AddDialog = () => {
                       Transfer Type Name
                       <span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <div className="grow">
-                      className="input"
+                      <Input
-                      type="text"
+                        className="input"
-                      autoComplete="off"
+                        type="text"
-                      value={formField.name}
+                        autoComplete="off"
-                      onChange={({ target }) =>
+                        value={formField.name}
-                        setFormField((prev) => ({ ...prev, name: target.value }))
+                        onChange={({ target }) =>
-                      }
+                          setFormField((prev) => ({ ...prev, name: target.value }))
-                    />
+                        }
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -246,15 +294,17 @@ const AddDialog = () => {
                       Description
                       <span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <div className="grow">
-                      className="input"
+                      <Input
-                      type="text"
+                        className="input"
-                      autoComplete="off"
+                        type="text"
-                      value={formField.description}
+                        autoComplete="off"
-                      onChange={({ target }) =>
+                        value={formField.description}
-                        setFormField((prev) => ({ ...prev, description: target.value }))
+                        onChange={({ target }) =>
-                      }
+                          setFormField((prev) => ({ ...prev, description: target.value }))
-                    />
+                        }
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -263,20 +313,22 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Minimum Amount
                     </label>
-                    <NumericFormat
+                    <div className="grow">
-                      className="input"
+                      <NumericFormat
-                      value={formField.minimum_amount}
+                        className="input"
-                      thousandSeparator="."
+                        value={formField.minimum_amount}
-                      decimalSeparator=","
+                        thousandSeparator="."
-                      allowNegative={false}
+                        decimalSeparator=","
-                      onValueChange={(values) => {
+                        allowNegative={false}
-                        setFormField((prev) => ({
+                        onValueChange={(values) => {
-                          ...prev,
+                          setFormField((prev) => ({
-                          minimum_amount: values.floatValue || 0
+                            ...prev,
-                        }));
+                            minimum_amount: values.floatValue || 0
-                      }}
+                          }));
-                      placeholder="Enter Minimum Amount"
+                        }}
-                    />
+                        placeholder="Enter Minimum Amount"
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -285,20 +337,22 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Maximum Amount
                     </label>
-                    <NumericFormat
+                    <div className="grow">
-                      className="input"
+                      <NumericFormat
-                      value={formField.maximum_amount}
+                        className="input"
-                      thousandSeparator="."
+                        value={formField.maximum_amount}
-                      decimalSeparator=","
+                        thousandSeparator="."
-                      allowNegative={false}
+                        decimalSeparator=","
-                      onValueChange={(values) => {
+                        allowNegative={false}
-                        setFormField((prev) => ({
+                        onValueChange={(values) => {
-                          ...prev,
+                          setFormField((prev) => ({
-                          maximum_amount: values.floatValue || 0
+                            ...prev,
-                        }));
+                            maximum_amount: values.floatValue || 0
-                      }}
+                          }));
-                      placeholder="Enter Maximum Amount"
+                        }}
-                    />
+                        placeholder="Enter Maximum Amount"
+                      />
+                    </div>
                   </div>
                 </div>
                 <div className="w-full">
@@ -306,24 +360,26 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Max Transaction per day
                     </label>
-                    <NumericFormat
+                    <div className="grow">
-                      className="input"
+                      <NumericFormat
-                      value={formField.max_transaction_per_day}
+                        className="input"
-                      thousandSeparator="."
+                        value={formField.max_transaction_per_day}
-                      decimalSeparator=","
+                        thousandSeparator="."
-                      allowNegative={false}
+                        decimalSeparator=","
-                      onValueChange={(values) => {
+                        allowNegative={false}
-                        setFormField((prev) => ({
+                        onValueChange={(values) => {
-                          ...prev,
+                          setFormField((prev) => ({
-                          max_transaction_per_day: values.floatValue || 0
+                            ...prev,
-                        }));
+                            max_transaction_per_day: values.floatValue || 0
-                      }}
+                          }));
-                      placeholder="Enter Max Transaction Per Day"
+                        }}
-                    />
+                        placeholder="Enter Max Transaction Per Day"
+                      />
+                    </div>
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       From Account
                       <span className="text-red-500">*</span>
@@ -351,7 +407,7 @@ const AddDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       To Account
                       <span className="text-red-500">*</span>
@@ -378,7 +434,7 @@ const AddDialog = () => {
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       Wallet Destination Fee
                       <span className="text-red-500">*</span>
@@ -405,35 +461,91 @@ const AddDialog = () => {
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
-                      Customer Fee Destination
+                      Customer Fee Destination<span className="text-red-500">*</span>
-                      <span className="text-red-500">*</span>
                     </label>
+                    <div className="grow">
+                      <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                          <button
+                            type="button"
+                            className="input col-span-5 text-left"
+                            style={{ color: 'inherit' }}
+                          >
+                            {customers.find(
+                              (customer) => customer.id === formField.customer_fee_destination
+                            )?.username || 'Select Customer'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[400px] p-0">
+                          <Command>
+                            <CommandInput placeholder="Search Customer..." />
+                            <CommandList
+                              className="max-h-[300px] overflow-y-auto"
+                              style={{ touchAction: 'pan-y' }}
+                              onWheel={(e) => {
+                                e.currentTarget.scrollTop += e.deltaY;
+                              }}
+                            >
+                              <CommandEmpty>No Customer found.</CommandEmpty>
+                              <CommandGroup>
+                                {customers.map((customer) => (
+                                  <CommandItem
+                                    key={customer.id}
+                                    value={customer.username}
+                                    onSelect={() => {
+                                      setFormField({
+                                        ...formField,
+                                        customer_fee_destination: customer.id
+                                      });
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {customer.username}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </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">
+                      TransactionType Status
+                      <span className="text-red-500"> *</span>
+                    </label>
+
                     <div className="grow">
                       <Select
-                        value={formField.customer_fee_destination}
+                        value={formField.type}
-                        onValueChange={(customer_fee_destination) =>
+                        onValueChange={(value) =>
-                          setFormField((prev) => ({ ...prev, customer_fee_destination }))
+                          setFormField((prev) => ({ ...prev, type: value }))
                         }
                       >
                         <SelectTrigger>
-                          <SelectValue placeholder="Select Customer" />
+                          <SelectValue placeholder="Select" />
                         </SelectTrigger>
                         <SelectContent>
-                          {customers.map((customer, idx) => (
+                          <SelectItem value="D">Disbursement </SelectItem>
-                            <SelectItem value={customer.id} key={customer.id}>
+                          <SelectItem value="O">Other </SelectItem>
-                              {customer.username} - {customer.msisdn}
+                          <SelectItem value="CA">Change Customer to Agent </SelectItem>
-                            </SelectItem>
+                          <SelectItem value="AC">Change Agent to Customer </SelectItem>
-                          ))}
+                          <SelectItem value="CE">Return Customer Emoney </SelectItem>
+                          <SelectItem value="AD">Return Agent Deposit </SelectItem>
+                          <SelectItem value="AM">Return Agent Merchant </SelectItem>
+                          <SelectItem value="AE">Return Agent Emoney </SelectItem>
                         </SelectContent>
                       </Select>
                     </div>
                   </div>
                 </div>
-
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       Status Approval
                       <span className="text-red-500">*</span>
@@ -459,7 +571,7 @@ const AddDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       Status
                       <span className="text-red-500"> *</span>

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

@@ -22,10 +22,18 @@ 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';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
 
 const API_URL = apiConfig.service_transaction;
 const API_URL_MASTERDATA = apiConfig.service_master_data;
@@ -50,6 +58,7 @@ interface TranssactionTypeProps {
   max_transaction_per_day: number;
   status_approval: string;
   status: string;
+  type: string;
   wallet_origin: WalletProps;
   wallet_destination: WalletProps;
   wallet_fee_destination: WalletProps;
@@ -58,7 +67,7 @@ interface TranssactionTypeProps {
 
 const EditDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showEditDialog, handleEditDialog, selectedTransferType, accounts } =
+  const { showEditDialog, handleEditDialog, selectedTransferType } =
     useManageTransferTypeContext();
   const { reload } = useDataGrid();
   const [wallets, setWallets] = useState<WalletProps[]>([]);
@@ -66,29 +75,13 @@ const EditDialog = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const parsedUser = getAuth()?.user;
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
-  const [transactiontypes, setTransactionTypes] = useState<TranssactionTypeProps[]>([]);
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
-  const resetForm = () => {
+  
-    setFormField({
+  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_approval: '',
-      status: '',
-      updated_by: '',
-      updated_at: ''
-    });
-  };
-  const [formField, setFormField] = useState({
     name: '',
     description: '',
     wallet_origin: '',
@@ -99,40 +92,113 @@ const EditDialog = () => {
     maximum_amount: 0,
     max_transaction_per_day: 0,
     status_approval: '',
+    type: '',
     status: '',
     updated_by: '',
     updated_at: ''
-  });
+  };
+  
+  const [formField, setFormField] = useState(initialState);
+  
+  const resetForm = () => {
+    setFormField(initialState);
+  };
+
+  // Validation function to make certain fields required
+  const validateForm = () => {
+    const requiredFields = [
+      'name',
+      'description',
+      'wallet_origin',
+      'wallet_destination',
+      'wallet_fee_destination',
+      'customer_fee_destination',
+      'status',
+      'status_approval',
+      'type'
+    ];
+
+    const missingFields = requiredFields.filter(
+      (field) =>
+        formField[field as keyof typeof formField] === '' ||
+        formField[field as keyof typeof formField] === null ||
+        formField[field as keyof typeof formField] === undefined
+    );
+
+    if (missingFields.length > 0) {
+      setAlert({
+        show: true,
+        message: `Please fill out all required fields: ${missingFields.join(', ')}`
+      });
+      return false;
+    }
+
+    setAlert({ show: false, message: '' });
+    return true;
+  };
+
   useEffect(() => {
     const updated_time = new Date();
     const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
 
     if (showEditDialog) {
-      setFormField({
+      setFormField((prev) => ({
-        ...formField,
+        ...prev,
         updated_by: parsedUser?.username,
         updated_at: formattedTime
-      });
+      }));
     }
   }, [showEditDialog]);
-  /* actions */
+  
-  const doUpdateTransferType = useCallback(
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
-      e.preventDefault();
+    setIsSubmitting(true);
+
+    if (!validateForm()) {
+      setIsSubmitting(false);
+      return;
+    }
+
+    doUpdateTransferType()
+      .then((success) => {
+        if (success) {
+          handleEditDialog(false, null);
+          toast.success('Success Update Transfer Type');
+          reload();
+        }
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+      });
+  };
+  
+  const doUpdateTransferType = useCallback(async () => {
+    try {
       const response = await PutData(`${API_URL}/transactiontype/update/${selectedTransferType}`, {
         ...formField
       });
+      
       if (response?.status) {
-        handleEditDialog(false, null);
+        setAlert({ show: false, message: '' });
-        toast.success('Success Update Transfer Type');
+        return true;
-        reload();
       } else {
-        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+        setAlert({ show: true, message: response?.message || 'Failed to update transfer type' });
+        return false;
       }
-    },
+    } catch (error) {
-    [formField, selectedTransferType]
+      setAlert({
-  );
+        show: true,
+        message:
+          error instanceof Error
+            ? error.message
+            : 'An error occurred while updating transfer type'
+      });
+      return false;
+    }
+  }, [formField, selectedTransferType, PutData]);
+
   useEffect(() => {
+    if (!showEditDialog) return;
     const getCustomerList = async (sorting: any) => {
       try {
         sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
@@ -143,7 +209,6 @@ const EditDialog = () => {
           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);
@@ -151,7 +216,8 @@ const EditDialog = () => {
     };
 
     getCustomerList([{ id: 'id', desc: false }]);
-  }, []);
+  }, [showEditDialog, GetData]);
+  
   const fetchWallets = useCallback(async () => {
     const params = {
       limit: 100,
@@ -169,39 +235,48 @@ const EditDialog = () => {
     } else {
       setWallets([]);
     }
-  }, []);
+  }, [GetData]);
 
   useEffect(() => {
+    if (!showEditDialog) return;
     fetchWallets();
-  }, [fetchWallets]);
+  }, [showEditDialog, fetchWallets]);
 
   const fetchTransactionType = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
+    try {
-    // console.log('Transaction Type: ', response?.data);
+      const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
-    if (response?.status) {
+      if (response?.status) {
-      setFormField((prev) => ({
+        setFormField((prev) => ({
-        ...prev,
+          ...prev,
-        name: response.data.name,
+          name: response.data.name,
-        description: response.data.description,
+          description: response.data.description,
-        wallet_origin: response.data.wallet_origin.id,
+          wallet_origin: response.data.wallet_origin.id,
-        wallet_destination: response.data.wallet_destination.id,
+          wallet_destination: response.data.wallet_destination.id,
-        wallet_fee_destination: response.data.wallet_fee_destination.id,
+          wallet_fee_destination: response.data.wallet_fee_destination.id,
-        customer_fee_destination: response.data.customer_fee_destination.id,
+          customer_fee_destination: response.data.customer_fee_destination.id,
-        minimum_amount: response.data.minimum_amount,
+          minimum_amount: response.data.minimum_amount,
-        maximum_amount: response.data.maximum_amount,
+          maximum_amount: response.data.maximum_amount,
-        max_transaction_per_day: response.data.max_transaction_per_day,
+          max_transaction_per_day: response.data.max_transaction_per_day,
-        status_approval: response.data.status_approval,
+          status_approval: response.data.status_approval,
-        status: response.data.status
+          type: response.data.type || '',
-      }));
+          status: response.data.status
+        }));
+      }
+      // console.log(response);
+    } catch (error) {
+      console.error('Error fetching transaction type', error);
+      setAlert({
+        show: true,
+        message: 'Failed to load transaction type data'
+      });
     }
-    // console.log('form fieldd Transaction Type: ', formField);
+  }, [GetData]);
-  }, []);
 
   useEffect(() => {
     if (selectedTransferType) {
       fetchTransactionType(selectedTransferType);
     }
-  }, [selectedTransferType]);
+  }, [selectedTransferType, fetchTransactionType]);
 
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@@ -230,11 +305,11 @@ const EditDialog = () => {
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
           <div className="flex flex-col px-0">
             {alert.show && (
-              <Alert variant="danger">
+              <Alert variant="danger" className="mb-3">
                 <h3>{alert.message}</h3>
               </Alert>
             )}
-            <form action="" onSubmit={doUpdateTransferType}>
+            <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">
@@ -242,15 +317,17 @@ const EditDialog = () => {
                       Transfer Type Name
                       <span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <div className="grow">
-                      className="input"
+                      <Input
-                      type="text"
+                        className="input"
-                      autoComplete="off"
+                        type="text"
-                      value={formField.name}
+                        autoComplete="off"
-                      onChange={({ target }) =>
+                        value={formField.name}
-                        setFormField((prev) => ({ ...prev, name: target.value }))
+                        onChange={({ target }) =>
-                      }
+                          setFormField((prev) => ({ ...prev, name: target.value }))
-                    />
+                        }
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -260,15 +337,17 @@ const EditDialog = () => {
                       Description
                       <span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <div className="grow">
-                      className="input"
+                      <Input
-                      type="text"
+                        className="input"
-                      autoComplete="off"
+                        type="text"
-                      value={formField.description}
+                        autoComplete="off"
-                      onChange={({ target }) =>
+                        value={formField.description}
-                        setFormField((prev) => ({ ...prev, description: target.value }))
+                        onChange={({ target }) =>
-                      }
+                          setFormField((prev) => ({ ...prev, description: target.value }))
-                    />
+                        }
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -277,20 +356,22 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Minimum Amount
                     </label>
-                    <NumericFormat
+                    <div className="grow">
-                      className="input"
+                      <NumericFormat
-                      value={formField.minimum_amount}
+                        className="input"
-                      thousandSeparator="."
+                        value={formField.minimum_amount}
-                      decimalSeparator=","
+                        thousandSeparator="."
-                      allowNegative={false}
+                        decimalSeparator=","
-                      onValueChange={(values) => {
+                        allowNegative={false}
-                        setFormField((prev) => ({
+                        onValueChange={(values) => {
-                          ...prev,
+                          setFormField((prev) => ({
-                          minimum_amount: values.floatValue || 0
+                            ...prev,
-                        }));
+                            minimum_amount: values.floatValue || 0
-                      }}
+                          }));
-                      placeholder="Enter Minimum Amount"
+                        }}
-                    />
+                        placeholder="Enter Minimum Amount"
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -299,20 +380,22 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Maximum Amount
                     </label>
-                    <NumericFormat
+                    <div className="grow">
-                      className="input"
+                      <NumericFormat
-                      value={formField.maximum_amount}
+                        className="input"
-                      thousandSeparator="."
+                        value={formField.maximum_amount}
-                      decimalSeparator=","
+                        thousandSeparator="."
-                      allowNegative={false}
+                        decimalSeparator=","
-                      onValueChange={(values) => {
+                        allowNegative={false}
-                        setFormField((prev) => ({
+                        onValueChange={(values) => {
-                          ...prev,
+                          setFormField((prev) => ({
-                          maximum_amount: values.floatValue || 0
+                            ...prev,
-                        }));
+                            maximum_amount: values.floatValue || 0
-                      }}
+                          }));
-                      placeholder="Enter Maximum Amount"
+                        }}
-                    />
+                        placeholder="Enter Maximum Amount"
+                      />
+                    </div>
                   </div>
                 </div>
                 <div className="w-full">
@@ -320,24 +403,26 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Max Transaction per day
                     </label>
-                    <NumericFormat
+                    <div className="grow">
-                      className="input"
+                      <NumericFormat
-                      value={formField.max_transaction_per_day}
+                        className="input"
-                      thousandSeparator="."
+                        value={formField.max_transaction_per_day}
-                      decimalSeparator=","
+                        thousandSeparator="."
-                      allowNegative={false}
+                        decimalSeparator=","
-                      onValueChange={(values) => {
+                        allowNegative={false}
-                        setFormField((prev) => ({
+                        onValueChange={(values) => {
-                          ...prev,
+                          setFormField((prev) => ({
-                          max_transaction_per_day: values.floatValue || 0
+                            ...prev,
-                        }));
+                            max_transaction_per_day: values.floatValue || 0
-                      }}
+                          }));
-                      placeholder="Enter Max Transaction Per Day"
+                        }}
-                    />
+                        placeholder="Enter Max Transaction Per Day"
+                      />
+                    </div>
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       From Account
                       <span className="text-red-500">*</span>
@@ -353,8 +438,8 @@ const EditDialog = () => {
                           <SelectValue placeholder="Select Wallet" />
                         </SelectTrigger>
                         <SelectContent>
-                          {wallets.map((wallet, idx) => (
+                          {wallets.map((wallet) => (
-                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
                               {wallet.Wallet_name}
                             </SelectItem>
                           ))}
@@ -365,7 +450,7 @@ const EditDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       To Account
                       <span className="text-red-500">*</span>
@@ -381,7 +466,7 @@ const EditDialog = () => {
                           <SelectValue placeholder="Select Wallet" />
                         </SelectTrigger>
                         <SelectContent>
-                          {wallets.map((wallet, idx) => (
+                          {wallets.map((wallet) => (
                             <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
                               {wallet.Wallet_name}
                             </SelectItem>
@@ -392,7 +477,7 @@ const EditDialog = () => {
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       Wallet Destination Fee
                       <span className="text-red-500">*</span>
@@ -408,7 +493,7 @@ const EditDialog = () => {
                           <SelectValue placeholder="Select Wallet" />
                         </SelectTrigger>
                         <SelectContent>
-                          {wallets.map((wallet, idx) => (
+                          {wallets.map((wallet) => (
                             <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
                               {wallet.Wallet_name}
                             </SelectItem>
@@ -419,27 +504,84 @@ const EditDialog = () => {
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
-                      Customer Fee Destination
+                      Customer Fee Destination<span className="text-red-500">*</span>
-                      <span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow">
+                      <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                          <button
+                            type="button"
+                            className="input col-span-5 text-left"
+                            style={{ color: 'inherit' }}
+                          >
+                            {customers.find(
+                              (customer) => customer.id === formField.customer_fee_destination
+                            )?.username || 'Select Customer'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[400px] p-0">
+                          <Command>
+                            <CommandInput placeholder="Search Customer..." />
+                            <CommandList
+                              className="max-h-[300px] overflow-y-auto"
+                              style={{ touchAction: 'pan-y' }}
+                              onWheel={(e) => {
+                                e.currentTarget.scrollTop += e.deltaY;
+                              }}
+                            >
+                              <CommandEmpty>No Customer found.</CommandEmpty>
+                              <CommandGroup>
+                                {customers.map((customer) => (
+                                  <CommandItem
+                                    key={customer.id}
+                                    value={customer.username}
+                                    onSelect={() => {
+                                      setFormField({
+                                        ...formField,
+                                        customer_fee_destination: customer.id
+                                      });
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {customer.username} - {customer.msisdn}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </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">
+                      Type
+                      <span className="text-red-500"> *</span>
                     </label>
                     <div className="grow">
                       <Select
-                        value={formField.customer_fee_destination}
+                        value={formField.type}
-                        onValueChange={(customer_fee_destination) =>
+                        onValueChange={(value) =>
-                          setFormField((prev) => ({ ...prev, customer_fee_destination }))
+                          setFormField((prev) => ({ ...prev, type: value }))
                         }
                       >
                         <SelectTrigger>
-                          <SelectValue placeholder="Select Customer" />
+                          <SelectValue placeholder="Select" />
                         </SelectTrigger>
                         <SelectContent>
-                          {customers.map((customer, idx) => (
+                          <SelectItem value="D">Disbursement </SelectItem>
-                            <SelectItem value={customer.id} key={customer.id}>
+                          <SelectItem value="O">Other </SelectItem>
-                              {customer.username} - {customer.msisdn}
+                          <SelectItem value="CA">Change Customer to Agent </SelectItem>
-                            </SelectItem>
+                          <SelectItem value="AC">Change Agent to Customer </SelectItem>
-                          ))}
+                          <SelectItem value="CE">Return Customer Emoney </SelectItem>
+                          <SelectItem value="AD">Return Agent Deposit </SelectItem>
+                          <SelectItem value="AM">Return Agent Merchant </SelectItem>
+                          <SelectItem value="AE">Return Agent Emoney </SelectItem>
                         </SelectContent>
                       </Select>
                     </div>
@@ -447,12 +589,11 @@ const EditDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       Status Approval
                       <span className="text-red-500">*</span>
                     </label>
-
                     <div className="grow">
                       <Select
                         value={formField.status_approval}
@@ -473,12 +614,11 @@ const EditDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       Status
                       <span className="text-red-500"> *</span>
                     </label>
-
                     <div className="grow">
                       <Select
                         value={formField.status}
@@ -514,10 +654,11 @@ const EditDialog = () => {
                 </div>
               </div>
             </form>
-            {/* Bagian Transaction Fee */}
+            
+            {/* Transaction Fee Section */}
             <ManageTransferFeeContextProvider>
               <Container>
-                <div className="grid gap-5 lg:gap-7.5">
+                <div className="grid gap-5 lg:gap-7.5 mt-5">
                   <DataGridInner />
                 </div>
                 <AddFeeDialog />

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

@@ -20,6 +20,7 @@ interface TransferType {
   walletOriginId: string;
   walletDestinationId: string;
   status: string;
+  type: string;
 }
 
 interface ContextProps {
@@ -155,6 +156,16 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
+      {
+        accessorFn: (row) => row.type,
+        id: 'type',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="TransactionType Status" column={column} />
+        ),
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
       {
         accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
         id: 'status',

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

@@ -11,15 +11,15 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            {/* <label className="input input-sm w-1/3">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
                 placeholder="Search Wallet"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={(table.getColumn('msisdn')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                onChange={(event) => table.getColumn('msisdn')?.setFilterValue(event.target.value)}
               />
-            </label>
+            </label> */}
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"

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

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

src/routing/AppRoutingSetup.tsx

@@ -8,7 +8,8 @@ import { ErrorsRouting } from '@/errors';
 
 import DashboardHomePage from '@/pages/dashboards/home/DashboardHomePage';
 import ManageUserPage from '@/pages/settings/user/manage-user/ManageUserPage';
-import Transaction from '@/pages/transaction/Transaction';
+import Transaction from '@/pages/transaction/history-transaction/Transaction';
+import ApprovalTransaction from '@/pages/transaction/approval-transaction/ApprovalTransaction';
 import LogActivityPage from '@/pages/settings/user/log-activity/LogActivityPage';
 import ManagePositionPage from '@/pages/settings/user/manage-position/ManagePositionPage';
 import ManageAccount from '@/pages/account/manage-account/ManageAccount';
@@ -36,6 +37,7 @@ import ConversionMaster from '@/pages/master/conversion/ConversionMaster';
 import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster';
 import WalletHistory from '@/pages/wallet/wallet-history/WalletHistory';
 import WalletMaster from '@/pages/master/wallet/WalletMaster';
+import CurrencyMaster from '@/pages/master/currency/CurrencyMaster';
 
 const AppRoutingSetup = (): ReactElement => {
   return (
@@ -58,6 +60,8 @@ const AppRoutingSetup = (): ReactElement => {
           />
           <Route path="/master-data/conversion" element={<ConversionMaster />} />
 
+          <Route path="/master-data/currency/" element={<CurrencyMaster />} />
+
           <Route path="/master-data/wallet" element={<WalletMaster />} />
 
           <Route path="/master-data/wallet-rule" element={<WalletRuleMaster />} />
@@ -82,6 +86,7 @@ const AppRoutingSetup = (): ReactElement => {
           <Route path="/notification/notification-management" element={<ManageNotification />} />
 
           <Route path="/transaction" element={<Transaction />} />
+          <Route path="/approval-transaction" element={<ApprovalTransaction />} />
           <Route path="/menu/menu-management" element={<ManageMenu />} />
           <Route path="/menu/welcome" element={<Welcome />} />
           <Route path="/message/inbox" element={<Inbox />} />