From 03e670ef096c266bb511de4928dd68a393dbd773 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Tue, 4 Mar 2025 16:16:10 +0700
Subject: [PATCH 01/53] Form transfertype + transactionFee

---
 .gitignore                                    |   2 +
 src/pages/transfer/blocks/AddDialog.tsx       | 120 +++++++-
 .../transfer/blocks/TransactionFeeDialog.tsx  | 281 ++++++++++++++++++
 3 files changed, 395 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/transfer/blocks/TransactionFeeDialog.tsx

diff --git a/.gitignore b/.gitignore
index 4e80c27..5a3db31 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,8 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+yarn.lock
+
 
 node_modules
 dist
diff --git a/src/pages/transfer/blocks/AddDialog.tsx b/src/pages/transfer/blocks/AddDialog.tsx
index 300425e..a7abdf1 100644
--- a/src/pages/transfer/blocks/AddDialog.tsx
+++ b/src/pages/transfer/blocks/AddDialog.tsx
@@ -1,5 +1,5 @@
 import { apiConfig } from '@/config/api.config';
-import { useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
 import { Alert, KeenIcon, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
@@ -20,6 +20,10 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
+import TransactionFeeDialog from './TransactionFeeDialog';
+import { toast } from 'sonner';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { getAuth } from '@/auth';
 
 interface CreateTransferTypeParams {
   transfer_type_name: string;
@@ -30,6 +34,9 @@ interface CreateTransferTypeParams {
   maximum_amount: number;
   otp_threshold: number;
   maximum_transaction_perDay: number;
+  status: string;
+  created_by: string;
+  created_at: string;
 }
 
 const API_URL = apiConfig.service_dashboard;
@@ -52,14 +59,21 @@ const AddDialog = () => {
     minimal_amount: 0,
     maximum_amount: 0,
     otp_threshold: 0,
-    maximum_transaction_perDay: 0
+    maximum_transaction_perDay: 0,
+    status: '',
+    created_by: '',
+    created_at: ''
   };
 
   const [formField, setFormField] = useState(initialState);
+
   const resetForm = () => {
     setFormField(initialState);
   };
+
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false);
+  const parsedUser = getAuth()?.user;
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -76,16 +90,72 @@ const AddDialog = () => {
     };
     console.log(payload);
   };
+  useEffect(() => {
+    const created_time = new Date();
+    const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+
+    if (showAddDialog) {
+      setFormField({
+        ...formField,
+        created_by: parsedUser?.username,
+        created_at: formattedTime
+      });
+    }
+  }, [showAddDialog]);
+  const doCreateTransferType = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      console.log(formField);
+
+      for (const key in formField) {
+        if (
+          formField[key as keyof typeof formField] === '' ||
+          formField[key as keyof typeof formField] === 0
+        ) {
+          setAlert({ show: true, message: 'All fields must be filled out' });
+          return;
+        }
+      }
+
+      setAlert({ show: false, message: '' });
+      const response = await PostData(`${API_URL}/transactiontype/create`, formField);
+
+      if (response?.status) {
+        setAlert({ show: false, message: '' });
+        handleAddDialog(false);
+        toast.success('Success Create Transfer Type');
+        reload();
+        resetForm();
+
+        const createActivity = {
+          module: 'Manage Transfer Type',
+          description: `Create New Transfer Type => ${formField.transfer_type_name}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
+      } else {
+        setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
+      }
+
+      handleAddDialog(false);
+    },
+    [formField]
+  );
+  const handleTransactionFeeSubmit = (data: any) => {
+    // console.log('Transaction Fee Data Submitted:', data);
+    setShowTransactionFeeDialog(false);
+  };
 
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogHeader className="p-5 border-0">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
           <div className="flex items-center justify-between flex-wrap grow">
             <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">
-                Create Transfer Type
-              </h1>
+              <h1 className="text-xl font-semibold leading-none text-gray-900">Transfer Type</h1>
               <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
             </div>
             <div
@@ -106,7 +176,7 @@ const AddDialog = () => {
                 <h3>{alert.message}</h3>
               </Alert>
             )}
-            <form action="" onSubmit={handleSubmit}>
+            <form action="" onSubmit={doCreateTransferType}>
               <div className="card-body grid gap-5 p-0">
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@@ -273,17 +343,51 @@ const AddDialog = () => {
                     />
                   </div>
                 </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Status</label>
+
+                    <div className="grow">
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Y</SelectItem>
+                          <SelectItem value="N">N</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
 
                 <div className="flex justify-end pt-2.5 gap-5">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => setShowTransactionFeeDialog(true)}
+                  >
+                    Transaction Fee Form
+                  </Button>
                   <Button variant={'outline'} type="reset">
                     Reset
                   </Button>
-                  <Button variant={'default'} type="submit">
-                    Save Changes
+                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? 'Saving...' : 'Save Changes'}
                   </Button>
                 </div>
               </div>
             </form>
+            <TransactionFeeDialog
+              open={showTransactionFeeDialog}
+              onClose={() => setShowTransactionFeeDialog(false)}
+              onSubmit={handleTransactionFeeSubmit}
+            />
           </div>
         </DialogBody>
       </DialogContent>
diff --git a/src/pages/transfer/blocks/TransactionFeeDialog.tsx b/src/pages/transfer/blocks/TransactionFeeDialog.tsx
new file mode 100644
index 0000000..cccf165
--- /dev/null
+++ b/src/pages/transfer/blocks/TransactionFeeDialog.tsx
@@ -0,0 +1,281 @@
+import { useState, useCallback, useEffect } from 'react';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import Typography from '@mui/material/Typography';
+import { toast } from 'sonner';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
+import { get } from 'http';
+import { getAuth } from '@/auth';
+import { useDataGrid } from '@/components';
+import { set } from 'date-fns';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem
+} from '@/components/ui/select';
+
+interface TransactionFeeDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: TransactionFeeForm) => void;
+}
+
+interface TransactionFeeForm {
+  name: string;
+  description: string;
+  minimum_amount: number;
+  maximum_amount: number;
+  period_start: string;
+  period_end: string;
+  deduct_amount: number;
+  deduct_percentage: number;
+  priority: string;
+  status: string;
+  transactionTypeId: string;
+  created_by: string;
+  created_at: string;
+}
+
+const API_URL = apiConfig.service_dashboard;
+
+const TransactionFeeDialog: React.FC<TransactionFeeDialogProps> = ({ open, onClose, onSubmit }) => {
+  const { showAddDialog, handleAddDialog } = useManageTransferTypeContext();
+  const parsedUser = getAuth()?.user;
+  const [formField, setFormField] = useState<TransactionFeeForm>({
+    name: '',
+    description: '',
+    minimum_amount: 0,
+    maximum_amount: 0,
+    period_start: '',
+    period_end: '',
+    deduct_amount: 0,
+    deduct_percentage: 0,
+    priority: '',
+    status: '',
+    transactionTypeId: '',
+    created_by: '',
+    created_at: ''
+  });
+  const { PostData, PutData } = useCallApi();
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormField((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { reload } = useDataGrid();
+  const resetForm = () => {
+    setFormField(formField);
+  };
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  useEffect(() => {
+    const created_time = new Date();
+    const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+
+    if (showAddDialog) {
+      setFormField({
+        ...formField,
+        created_by: parsedUser?.username,
+        created_at: formattedTime
+      });
+    }
+  }, [showAddDialog]);
+  const doCreateTransactionFee = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      console.log(formField);
+      const response = await PostData(`${API_URL}/transactionfees/create`, formField);
+
+      if (response?.status) {
+        setAlert({ show: false, message: '' });
+        handleAddDialog(false);
+        toast.success('Success Create Transfer Type');
+        reload();
+        resetForm();
+
+        const createActivity = {
+          module: 'Manage Transfer Fee',
+          description: `Create New Transfer Fee => ${formField.name}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
+      } else {
+        setAlert({ show: true, message: response?.message || 'Failed to create transfer fee' });
+      }
+
+      onSubmit(formField);
+    },
+    [formField]
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-lg p-5">
+        <DialogHeader>
+          <DialogTitle>Transaction Fee</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <form onSubmit={doCreateTransactionFee}>
+            <div className="grid gap-4">
+              <div className="w-full flex flex-col gap-2">
+                <label className="text-sm font-medium text-gray-700">Name</label>
+                <Input name="name" value={formField.name} onChange={handleChange} required />
+              </div>
+
+              <div className="w-full flex flex-col gap-2">
+                <label className="text-sm font-medium text-gray-700">Description</label>
+                <Input
+                  name="description"
+                  value={formField.description}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+
+              <div className="w-full flex flex-col gap-2">
+                <label className="text-sm font-medium text-gray-700">Minimum Amount</label>
+                <Input
+                  name="minimum_amount"
+                  type="number"
+                  value={formField.minimum_amount}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+
+              <div className="w-full flex flex-col gap-2">
+                <label className="text-sm font-medium text-gray-700">Maximum Amount</label>
+                <Input
+                  name="maximum_amount"
+                  type="number"
+                  value={formField.maximum_amount}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+
+              <div className="w-full flex flex-col gap-2">
+                <label className="text-sm font-medium text-gray-700">Start</label>
+                <Input
+                  name="period_start"
+                  type="date"
+                  value={formField.period_start}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+
+              <div className="w-full flex flex-col gap-2">
+                <label className="text-sm font-medium text-gray-700">End</label>
+                <Input
+                  name="period_end"
+                  type="date"
+                  value={formField.period_end}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+
+              <div className="w-full flex flex-col gap-2">
+                <label className="text-sm font-medium text-gray-700">Deduct Amount</label>
+                <Input
+                  name="deduct_amount"
+                  type="number"
+                  value={formField.deduct_amount}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+
+              <div className="w-full flex flex-col gap-2">
+                <label className="text-sm font-medium text-gray-700">Deduct Percentage</label>
+                <Input
+                  name="deduct_percentage"
+                  type="number"
+                  value={formField.deduct_percentage}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+
+              <div className="w-full flex flex-col gap-2">
+                <label className="text-sm font-medium text-gray-700">Status</label>
+                <Select
+                  value={formField.status}
+                  onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
+                  required
+                >
+                  <SelectTrigger className="border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <SelectValue placeholder="Select" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="w-full flex flex-col gap-2">
+                <label className="text-sm font-medium text-gray-700">Priority</label>
+                <Input
+                  name="priority"
+                  value={formField.priority}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    if (/^\d*$/.test(value)) {
+                      handleChange(e);
+                    }
+                  }}
+                  required
+                  type="text"
+                  inputMode="numeric"
+                  placeholder="Masukkan angka"
+                />
+              </div>
+              <div className="w-full flex flex-col gap-2">
+                <label className="text-sm font-medium text-gray-700">Transaction Type ID</label>
+                <Input
+                  name="transactionTypeId"
+                  value={formField.transactionTypeId}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+
+              <div className="flex justify-end mt-4 gap-3">
+                <Button variant="outline" type="button" onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button variant="default" type="submit">
+                  Submit
+                </Button>
+              </div>
+            </div>
+          </form>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TransactionFeeDialog;

From e1ff9d03ecfdfa6b614d3e1fbd015336e86327fd Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Sat, 22 Mar 2025 11:29:03 +0700
Subject: [PATCH 02/53] fix remove display id on table

---
 .../aldeias/hooks/ManageAldeiasContext.tsx    | 10 ----------
 .../hooks/ManageConversionContext.tsx         | 10 ----------
 .../hooks/ManageMunicipiosContext.tsx         | 10 ----------
 .../hooks/ManagePostoAdmsContext.tsx          | 11 ----------
 .../products/hooks/ManageProductsContext.tsx  | 10 ----------
 .../hooks/ManageProfessionContext.tsx         | 10 ----------
 .../provider/hooks/ManageProviderContext.tsx  | 10 ----------
 .../master/sucos/hooks/ManageSucosContext.tsx | 10 ----------
 .../hooks/ManageWalletRuleContext.tsx         | 20 -------------------
 9 files changed, 101 deletions(-)

diff --git a/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx b/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx
index f0b9aff..6dcce41 100644
--- a/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx
+++ b/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx
@@ -77,16 +77,6 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.name,
         id: 'name',
diff --git a/src/pages/master/conversion/hooks/ManageConversionContext.tsx b/src/pages/master/conversion/hooks/ManageConversionContext.tsx
index fe96cb0..21f8c78 100644
--- a/src/pages/master/conversion/hooks/ManageConversionContext.tsx
+++ b/src/pages/master/conversion/hooks/ManageConversionContext.tsx
@@ -68,16 +68,6 @@ const ManageConversionContextProvider = ({ children }: { children: React.ReactNo
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.name,
         id: 'name',
diff --git a/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx b/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx
index 80c208a..5a95477 100644
--- a/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx
+++ b/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx
@@ -102,16 +102,6 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         // accessorFn: (row) => row.name,
         // id: 'name',
diff --git a/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx
index 5c2f500..ec68ee0 100644
--- a/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx
+++ b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx
@@ -83,17 +83,6 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.PostoAdms_id,
-        id: 'id',
-        // accessorKey: 'PostoAdms_id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.PostoAdms_name,
         id: 'name',
diff --git a/src/pages/master/products/hooks/ManageProductsContext.tsx b/src/pages/master/products/hooks/ManageProductsContext.tsx
index 8987177..0bc11bc 100644
--- a/src/pages/master/products/hooks/ManageProductsContext.tsx
+++ b/src/pages/master/products/hooks/ManageProductsContext.tsx
@@ -72,16 +72,6 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.products_id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.products_name,
         id: 'name',
diff --git a/src/pages/master/profession/hooks/ManageProfessionContext.tsx b/src/pages/master/profession/hooks/ManageProfessionContext.tsx
index a9a0fc8..63d003c 100644
--- a/src/pages/master/profession/hooks/ManageProfessionContext.tsx
+++ b/src/pages/master/profession/hooks/ManageProfessionContext.tsx
@@ -67,16 +67,6 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.name,
         id: 'name',
diff --git a/src/pages/master/provider/hooks/ManageProviderContext.tsx b/src/pages/master/provider/hooks/ManageProviderContext.tsx
index ba92dda..b065f8b 100644
--- a/src/pages/master/provider/hooks/ManageProviderContext.tsx
+++ b/src/pages/master/provider/hooks/ManageProviderContext.tsx
@@ -73,16 +73,6 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.provider_id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.provider_name,
         id: 'name',
diff --git a/src/pages/master/sucos/hooks/ManageSucosContext.tsx b/src/pages/master/sucos/hooks/ManageSucosContext.tsx
index ddcd6c6..8c53953 100644
--- a/src/pages/master/sucos/hooks/ManageSucosContext.tsx
+++ b/src/pages/master/sucos/hooks/ManageSucosContext.tsx
@@ -85,16 +85,6 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorKey: 'sucos_id',
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
       {
         accessorFn: (row) => row.sucos_name,
         id: 'sucos_name',
diff --git a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
index e196eaa..819785c 100644
--- a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
+++ b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
@@ -69,26 +69,6 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      {
-        accessorFn: (row) => row.ID,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.IDWallet,
-        id: 'name',
-        header: ({ column }) => <DataGridColumnHeader title="ID Wallet" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
       {
         accessorFn: (row) => row.balance_minimum,
         id: 'balance_minimum',

From 41f96416b3c7930f3c360940678923311a5a6560 Mon Sep 17 00:00:00 2001
From: Raja Oktafrianto <rajaoktafrianto3.com>
Date: Sat, 22 Mar 2025 14:19:48 +0700
Subject: [PATCH 03/53] update list sucos

---
 src/components/data-grid/DataGridContext.tsx    |  7 ++++++-
 src/layouts/demo2/footer/Footer.tsx             |  7 ++++++-
 src/pages/master/sucos/blocks/AddDialog.tsx     |  8 ++++----
 src/pages/master/sucos/blocks/DeleteDialog.tsx  | 11 ++++++++++-
 src/pages/master/sucos/blocks/EditDialog.tsx    | 11 ++++++-----
 src/pages/master/sucos/blocks/ListToolbar.tsx   | 10 +++++++++-
 .../master/sucos/hooks/ManageSucosContext.tsx   | 17 +++++++++++++++--
 7 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/src/components/data-grid/DataGridContext.tsx b/src/components/data-grid/DataGridContext.tsx
index a684184..d68006b 100644
--- a/src/components/data-grid/DataGridContext.tsx
+++ b/src/components/data-grid/DataGridContext.tsx
@@ -151,7 +151,10 @@ export const DataGridProvider = <TData extends object>(props: TDataGridProps<TDa
     enableRowSelection: mergedProps.rowSelection,
     onRowSelectionChange: handleRowSelectionChange,
     onSortingChange: (newSorting) => !loading && setSorting(newSorting),
-    onColumnFiltersChange: (newFilters) => !loading && setColumnFilters(newFilters),
+    onColumnFiltersChange: (newFilters) => {
+      console.log('New Filters:', newFilters); // Debugging
+      !loading && setColumnFilters(newFilters);
+    },
     onColumnVisibilityChange: setColumnVisibility,
     onPaginationChange: (newPagination) => !loading && setPagination(newPagination),
     getCoreRowModel: getCoreRowModel(),
@@ -165,6 +168,8 @@ export const DataGridProvider = <TData extends object>(props: TDataGridProps<TDa
     manualFiltering: mergedProps.serverSide
   });
 
+  console.log('Filtered Rows:', table.getFilteredRowModel().rows);
+
   return (
     <DataGridContext.Provider
       value={{
diff --git a/src/layouts/demo2/footer/Footer.tsx b/src/layouts/demo2/footer/Footer.tsx
index f34efdc..3e4d98c 100644
--- a/src/layouts/demo2/footer/Footer.tsx
+++ b/src/layouts/demo2/footer/Footer.tsx
@@ -9,7 +9,12 @@ const Footer = () => {
         <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
           <div className="flex order-2 md:order-1  gap-2 font-normal text-2sm">
             <span className="text-gray-500">{currentYear}&copy;</span>
-            <a href="https://" target="_blank" className="text-gray-600 hover:text-primary">
+            <a
+              href="https://t-pay.tl/"
+              target="_blank"
+              className="text-gray-600 hover:text-primary"
+              rel="noopener noreferrer"
+            >
               Brillian Dev.
             </a>
           </div>
diff --git a/src/pages/master/sucos/blocks/AddDialog.tsx b/src/pages/master/sucos/blocks/AddDialog.tsx
index dd5ab57..ea31fe8 100644
--- a/src/pages/master/sucos/blocks/AddDialog.tsx
+++ b/src/pages/master/sucos/blocks/AddDialog.tsx
@@ -45,7 +45,7 @@ const AddDialog = () => {
   });
   const initialState = {
     name: '',
-    posto_adm_id: 0,
+    postoId: 0,
     created_by: '',
     created_at: ''
   };
@@ -80,7 +80,7 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name.trim() === '' || formField.posto_adm_id === 0) {
+    if (formField.name.trim() === '' || formField.postoId === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -166,7 +166,7 @@ const AddDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {posto_adms.find((posto) => posto.PostoAdms_id === formField.posto_adm_id)
+                          {posto_adms.find((posto) => posto.PostoAdms_id === formField.postoId)
                             ?.PostoAdms_name || 'Select Posto Administrativo'}
                         </button>
                       </PopoverTrigger>
@@ -183,7 +183,7 @@ const AddDialog = () => {
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      posto_adm_id: posto.PostoAdms_id
+                                      postoId: posto.PostoAdms_id
                                     });
                                     setOpen(false);
                                   }}
diff --git a/src/pages/master/sucos/blocks/DeleteDialog.tsx b/src/pages/master/sucos/blocks/DeleteDialog.tsx
index d5aa4ce..f1235f9 100644
--- a/src/pages/master/sucos/blocks/DeleteDialog.tsx
+++ b/src/pages/master/sucos/blocks/DeleteDialog.tsx
@@ -4,7 +4,14 @@ import { ChangeEvent, useCallback, useState } from 'react';
 import { useCallApi } from '@/hooks';
 import { Alert, useDataGrid } from '@/components';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
 
@@ -39,6 +46,8 @@ const DeleteDialog = () => {
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogHeader className="p-0 border-0 block">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
             <span className="text-sm">you will delete this data!</span>
diff --git a/src/pages/master/sucos/blocks/EditDialog.tsx b/src/pages/master/sucos/blocks/EditDialog.tsx
index 0e08201..0bd2c9e 100644
--- a/src/pages/master/sucos/blocks/EditDialog.tsx
+++ b/src/pages/master/sucos/blocks/EditDialog.tsx
@@ -48,7 +48,7 @@ const EditDialog = () => {
 
   const initialState = {
     name: '',
-    posto_adm_id: 0, // Pastikan ini sesuai dengan PostoAdms_id
+    postoId: 0, // Pastikan ini sesuai dengan PostoAdms_id
     updated_by: '',
     updated_at: ''
   };
@@ -110,7 +110,8 @@ const EditDialog = () => {
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
-        posto_adm_id: response.data.posto.id // Pastikan ini sesuai dengan PostoAdms_id
+        postoId: response.data.posto?.id || ''
+        // Pastikan ini sesuai dengan PostoAdms_id
       }));
     } else {
       setFormField((prev) => ({
@@ -123,7 +124,7 @@ const EditDialog = () => {
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name.trim() === '' || formField.posto_adm_id === 0) {
+    if (formField.name.trim() === '' || formField.postoId === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -203,7 +204,7 @@ const EditDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {postoadms.find((posto) => posto.PostoAdms_id === formField.posto_adm_id)
+                          {postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
                             ?.PostoAdms_name || 'Select Posto Adms'}
                         </button>
                       </PopoverTrigger>
@@ -220,7 +221,7 @@ const EditDialog = () => {
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      posto_adm_id: posto.PostoAdms_id // Gunakan PostoAdms_id
+                                      postoId: posto.PostoAdms_id // Gunakan PostoAdms_id
                                     });
                                     setOpen(false);
                                   }}
diff --git a/src/pages/master/sucos/blocks/ListToolbar.tsx b/src/pages/master/sucos/blocks/ListToolbar.tsx
index 313188e..7336ae2 100644
--- a/src/pages/master/sucos/blocks/ListToolbar.tsx
+++ b/src/pages/master/sucos/blocks/ListToolbar.tsx
@@ -16,11 +16,19 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Sucos"
-                value={table.getColumn(`id`)?.getFilterValue() as string}
+                value={String(table.getColumn(`sucos_name`)?.getFilterValue() ?? '')}
                 onChange={(event) =>
                   table.getColumn('sucos_name')?.setFilterValue(event.target.value)
                 }
               />
+              <input
+                type="text"
+                placeholder="Search Posto Administrativo"
+                value={String(table.getColumn(`posto_name`)?.getFilterValue() ?? '')}
+                onChange={(event) =>
+                  table.getColumn('posto_name')?.setFilterValue(event.target.value)
+                }
+              />
             </label>
             <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
diff --git a/src/pages/master/sucos/hooks/ManageSucosContext.tsx b/src/pages/master/sucos/hooks/ManageSucosContext.tsx
index ddcd6c6..abf29a9 100644
--- a/src/pages/master/sucos/hooks/ManageSucosContext.tsx
+++ b/src/pages/master/sucos/hooks/ManageSucosContext.tsx
@@ -87,7 +87,12 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
     () => [
       {
         accessorKey: 'sucos_id',
-        id: 'id',
+        id: 'sucos_id',
+        filterFn: (row, columnId, filterValue) => {
+          const value = row.getValue<number>(columnId);
+          console.log('Filtering:', { value, filterValue });
+          return String(value).includes(String(filterValue));
+        },
         header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
         enableSorting: true,
         enableHiding: false,
@@ -98,6 +103,10 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
       {
         accessorFn: (row) => row.sucos_name,
         id: 'sucos_name',
+        filterFn: (row, columnId, filterValue) => {
+          const value = row.getValue<string>(columnId);
+          return String(value).includes(String(filterValue));
+        },
         header: ({ column }) => <DataGridColumnHeader title="Sucos Name" column={column} />,
         enableSorting: true,
         enableHiding: false,
@@ -106,8 +115,12 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
         }
       },
       {
-        accessorFn: (row) => row.posto_name,
+        accessorKey: 'posto_name',
         id: 'posto_name',
+        filterFn: (row, columnId, filterValue) => {
+          const value = row.getValue<string>(columnId);
+          return String(value).includes(String(filterValue));
+        },
         header: ({ column }) => <DataGridColumnHeader title="Posto Name" column={column} />,
         enableSorting: true,
         enableHiding: false,

From 5422ce938172ef70350f02548a0af307f3830652 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 24 Mar 2025 09:55:20 +0700
Subject: [PATCH 04/53] butuh install packagee react number format

---
 .../transfer/transferfee/blocks/AddDialog.tsx | 411 ++++++++++++++
 .../transferfee/blocks/DeleteDialog.tsx       |  87 +++
 .../transferfee/blocks/EditDialog.tsx         | 499 +++++++++++++++++
 .../transferfee/blocks/ListToolBar.tsx        |  44 ++
 .../hooks/ManageTransferFeeContext.tsx        | 236 ++++++++
 .../hooks/useManageTransferFeeContext.tsx     |  12 +
 .../transfer/transfertype/TransferType.tsx    |  27 +
 .../transfertype/blocks/AddDialog.tsx         | 490 ++++++++++++++++
 .../transfertype/blocks/DeleteDialog.tsx      |  92 +++
 .../transfertype/blocks/EditDialog.tsx        | 525 ++++++++++++++++++
 .../transfertype/blocks/ListToolBar.tsx       |  44 ++
 .../hooks/ManageTransferTypeContext.tsx       | 254 +++++++++
 .../hooks/useManageTransferTypeContext.tsx    |  12 +
 13 files changed, 2733 insertions(+)
 create mode 100644 src/pages/transfer/transferfee/blocks/AddDialog.tsx
 create mode 100644 src/pages/transfer/transferfee/blocks/DeleteDialog.tsx
 create mode 100644 src/pages/transfer/transferfee/blocks/EditDialog.tsx
 create mode 100644 src/pages/transfer/transferfee/blocks/ListToolBar.tsx
 create mode 100644 src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
 create mode 100644 src/pages/transfer/transferfee/hooks/useManageTransferFeeContext.tsx
 create mode 100644 src/pages/transfer/transfertype/TransferType.tsx
 create mode 100644 src/pages/transfer/transfertype/blocks/AddDialog.tsx
 create mode 100644 src/pages/transfer/transfertype/blocks/DeleteDialog.tsx
 create mode 100644 src/pages/transfer/transfertype/blocks/EditDialog.tsx
 create mode 100644 src/pages/transfer/transfertype/blocks/ListToolBar.tsx
 create mode 100644 src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
 create mode 100644 src/pages/transfer/transfertype/hooks/useManageTransferTypeContext.tsx

diff --git a/src/pages/transfer/transferfee/blocks/AddDialog.tsx b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
new file mode 100644
index 0000000..dc7ecd7
--- /dev/null
+++ b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
@@ -0,0 +1,411 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
+import { NumericFormat } from 'react-number-format';
+import {
+  Alert,
+  Container,
+  DataGridColumnHeader,
+  DataGridInner,
+  KeenIcon,
+  useDataGrid
+} from '@/components';
+import { useCallApi } from '@/hooks';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { getAuth } from '@/auth';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table';
+import { ManageTransferFeeContext } from '../hooks/ManageTransferFeeContext';
+import { ColumnDef } from '@tanstack/react-table';
+import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
+import { apiConfig } from '@/config/api.config';
+import { get } from 'http';
+
+interface TransactionTypeProps {
+  id: string;
+  name: string;
+}
+
+const API_URL = apiConfig.service_transaction;
+
+const AddFeeDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { reload } = useDataGrid();
+  const { PostData, PutData, GetData } = useCallApi();
+  const { showAddFeeDialog, handleAddFeeDialog, handleEditFeeDialog, selectedTransferFee } =
+    useManageTransferFeeContext();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
+
+  const initialState = {
+    name: '',
+    description: '',
+    transaction_type: '',
+    minimum_amount: 0,
+    maximum_amount: 0,
+    period_start: '',
+    period_end: '',
+    deduct_amount: 0,
+    deduct_percentage: 0,
+    priority: false,
+    status: '',
+    status_include: '',
+    created_by: '',
+    created_at: ''
+  };
+
+  const [formField, setFormField] = useState(initialState);
+
+  const resetForm = () => {
+    setFormField(initialState);
+  };
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false);
+  const parsedUser = getAuth()?.user;
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // setIsSubmitting(true);
+    const payload = {
+      name: formField.name,
+      description: formField.description,
+      period_start: formField.period_start,
+      period_end: formField.period_end,
+      minimum_amount: formField.minimum_amount,
+      maximum_amount: formField.maximum_amount,
+      deduct_amount: formField.deduct_amount,
+      deduct_percentage: formField.deduct_percentage,
+      priority: formField.priority,
+      transaction_type: formField.transaction_type,
+      status: formField.status,
+      status_include: formField.status_include
+    };
+    console.log(payload);
+  };
+  useEffect(() => {
+    const created_time = new Date();
+    const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+
+    if (showAddFeeDialog) {
+      setFormField({
+        ...formField,
+        created_by: parsedUser?.username,
+        created_at: formattedTime
+      });
+    }
+  }, [showAddFeeDialog]);
+
+  useEffect(() => {
+    if (!showAddFeeDialog) return;
+
+    const getTransactionTypeList = async (sorting: any) => {
+      try {
+        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/transactiontype/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        });
+        console.log('TRANSACTION TYPE LIST: ', response?.data?.list);
+
+        setTransactionTypes(response?.data.list || []);
+      } catch (error) {
+        console.error('Error fetching customer', error);
+      }
+    };
+
+    getTransactionTypeList([{ id: 'id', desc: false }]);
+  }, [showAddFeeDialog]);
+
+  const doCreateTransferType = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      console.log(formField);
+      for (const key in formField) {
+        if (
+          formField[key as keyof typeof formField] === '' ||
+          formField[key as keyof typeof formField] === 0
+        ) {
+          setAlert({ show: true, message: 'All fields must be filled out' });
+          return;
+        }
+      }
+
+      setAlert({ show: false, message: '' });
+      const response = await PostData(`${API_URL}/transactionfees/create`, {
+        ...formField,
+        priority: formField.priority ? 'Y' : 'N'
+      });
+      // console.log("coba coba:",response);
+
+      if (response?.status) {
+        toast.success('Success Create Transfer Fee');
+        reload();
+        resetForm();
+        handleAddFeeDialog(false);
+      } else {
+        setAlert({ show: true, message: response?.message || 'Failed to create transfer fee' });
+      }
+      console.log(response);
+    },
+    [formField]
+  );
+
+  return (
+    <Dialog open={showAddFeeDialog} onOpenChange={(open) => handleAddFeeDialog(open)}>
+      <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogTitle></DialogTitle>
+        <DialogDescription></DialogDescription>
+        <DialogHeader className="p-5 border-0">
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">AddTransfer Fee</h1>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => {
+                handleAddFeeDialog(false);
+                resetForm();
+              }}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="max-h-[1080px] overflow-y-auto">
+          {alert.show && <Alert variant="danger">{alert.message}</Alert>}
+          <form action="" onSubmit={doCreateTransferType}>
+            <div className="card flex flex-col gap-5">
+              <div className="card-body grid gap-5 p-0">
+                <div className="w-full">
+                  <label className="form-label">Transfer Free Name</label>
+                  <Input
+                    className="input"
+                    type="text"
+                    autoComplete="off"
+                    value={formField.name}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, name: target.value }))
+                    }
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Description</label>
+                  <Input
+                    className="input"
+                    type="text"
+                    autoComplete="off"
+                    value={formField.description}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, description: target.value }))
+                    }
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Minimum Amount</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.minimum_amount}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        minimum_amount: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Max Transaction Per Day"
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Maximum Amount</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.maximum_amount}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        maximum_amount: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Max Transaction Per Day"
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Period Start</label>
+                  <Input
+                    className="input"
+                    type="date"
+                    autoComplete="off"
+                    value={formField.period_start ? formField.period_start.split('T')[0] : ''}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, period_start: target.value }))
+                    }
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Period End</label>
+                  <Input
+                    className="input"
+                    type="date"
+                    autoComplete="off"
+                    value={formField.period_end ? formField.period_end.split('T')[0] : ''}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, period_end: target.value }))
+                    }
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Deduct Amount</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.deduct_amount}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        deduct_amount: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Max Transaction Per Day"
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Deduct Percentage</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.deduct_percentage}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        deduct_percentage: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Max Transaction Per Day"
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Transacsion Type ID</label>
+                  <Select
+                    value={formField.transaction_type}
+                    onValueChange={(transaction_type) =>
+                      setFormField((prev) => ({ ...prev, transaction_type }))
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Wallet" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {transactionTypes.map((transactiontype, idx) => (
+                        <SelectItem value={transactiontype.id} key={transactiontype.id}>
+                          {transactiontype.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Status</label>
+                  <Select
+                    value={formField.status}
+                    onValueChange={(value) => setFormField({ ...formField, status: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">Y</SelectItem>
+                      <SelectItem value="N">N</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Status Include</label>
+                  <Select
+                    value={formField.status_include}
+                    onValueChange={(value) => setFormField({ ...formField, status_include: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">Y</SelectItem>
+                      <SelectItem value="N">N</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Priority</label>
+                  <Select
+                    value={formField.priority ? 'Y' : 'N'}
+                    onValueChange={(value) =>
+                      setFormField({ ...formField, priority: value === 'Y' })
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Priority" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">Y</SelectItem>
+                      <SelectItem value="N">N</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex justify-end pt-2.5 gap-5">
+                  <Button variant={'outline'} type="reset">
+                    Reset
+                  </Button>
+                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? 'Saving...' : 'Save Changes'}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </form>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddFeeDialog;
diff --git a/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx b/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx
new file mode 100644
index 0000000..bf61c83
--- /dev/null
+++ b/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx
@@ -0,0 +1,87 @@
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Alert, useDataGrid } from '@/components';
+import { ChangeEvent, useCallback, useState } from 'react';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+import { useCallApi } from '@/hooks';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { EnforceSwitch } from '@/components/switch';
+import { useContext } from 'react';
+import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
+import { ManageTransferFeeContext } from '../hooks/ManageTransferFeeContext';
+import { DialogDescription } from '@radix-ui/react-dialog';
+import { useManageAccessTypeContext } from '@/pages/access/access-type/hooks/useManageAccessTypeContext';
+
+const API_URL = apiConfig.service_transaction;
+
+const DeleteDialog = () => {
+  const { showDeleteFeeDialog, handleDeleteFeeDialog, selectedTransferFee } = useManageTransferFeeContext();
+  const { reload } = useDataGrid();
+  const { DeleteData } = useCallApi();
+  const [enforce, setEnforce] = useState(false);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const doDeleteTransferFee = useCallback(async () => {
+    console.log("Selected Transfer Fee:", selectedTransferFee, "Type:", typeof selectedTransferFee);
+    const response = await DeleteData(`${API_URL}/transactionfees/delete/${selectedTransferFee}/${enforce}`, {
+      id: selectedTransferFee
+    });
+
+    if (response?.status) {
+      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      handleDeleteFeeDialog(false, null);
+      toast.success('Success Delete Product');
+      reload();
+    } else {
+      toast.error('Failed Delete Product');
+      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+    }
+  }, [selectedTransferFee, enforce]);
+
+  // console.log(selectedTransferFee);
+
+  return (
+    <Dialog open={showDeleteFeeDialog} onOpenChange={(open) => handleDeleteFeeDialog(open, null)}>
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-0 border-0 block">
+          <DialogTitle className="text-lg">Delete Transfer Type</DialogTitle>
+          <DialogDescription className="text-sm">Delete Transfer Type</DialogDescription>
+          <Alert variant="warning">
+            <h3 className="text-lg">Are you sure?</h3>
+            <span className="text-sm">you will delete this data!</span>
+            <div className="mt-2 flex items-center gap-x-2">
+              <label className="form-label max-w-56">Hard Delete</label>
+              <EnforceSwitch
+                enforce={enforce}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                  setEnforce(e.target.checked);
+                }}
+              />
+            </div>
+          </Alert>
+          {alert.show && (
+            <Alert variant="danger">
+              <h3>{alert.message}</h3>
+            </Alert>
+          )}
+        </DialogHeader>
+        <DialogFooter className="flex justify-end items-center gap-4 mt-3">
+          <Button variant={'outline'} onClick={() => handleDeleteFeeDialog(false, null)}>
+            Cancel
+          </Button>
+          <Button variant={'destructive'} onClick={() => doDeleteTransferFee()}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDialog;
+
+export { DeleteDialog };
diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
new file mode 100644
index 0000000..89ee86c
--- /dev/null
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -0,0 +1,499 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { NumericFormat } from 'react-number-format';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { apiConfig } from '@/config/api.config';
+import { Alert, Container, DataGridInner, KeenIcon, useDataGrid } from '@/components';
+import { toast } from 'sonner';
+import { useCallApi } from '@/hooks';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { getAuth } from '@/auth';
+import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
+import AddFeeDialog from '../../transferfee/blocks/AddDialog';
+
+const API_URL = apiConfig.service_transaction;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+const API_URL_CUSTOMER = apiConfig.service_customer;
+
+interface WalletProps {
+  Wallet_id: string;
+  Wallet_name: string;
+}
+
+interface CustomerProps {
+  id: string;
+  username: string;
+  msisdn: string;
+}
+
+interface TransactionTypeProps {
+  id: string;
+  name: string;
+}
+
+const EditFeeDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showEditFeeDialog, handleEditFeeDialog, selectedTransferFee } =
+    useManageTransferFeeContext();
+  const { reload } = useDataGrid();
+  const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const { GetData, PutData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
+  const parsedUser = getAuth()?.user;
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const [formField, setFormField] = useState({
+    name: '',
+    description: '',
+    minimum_amount: 0,
+    maximum_amount: 0,
+    period_start: '',
+    period_end: '',
+    deduct_amount: 0,
+    deduct_percentage: 0,
+    priority: '',
+    status: '',
+    status_include: '',
+    transaction_type: '',
+    updated_by: '',
+    updated_at: ''
+  });
+  useEffect(() => {
+    const updated_time = new Date();
+    const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
+
+    if (showEditFeeDialog) {
+      setFormField({
+        ...formField,
+        updated_by: parsedUser?.username,
+        updated_at: formattedTime
+      });
+    }
+  }, [showEditFeeDialog]);
+  /* actions */
+  const doUpdateTransferFee = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const response = await PutData(`${API_URL}/transactionfees/update/${selectedTransferFee}`, {
+        ...formField
+      });
+      if (response?.status) {
+        handleEditFeeDialog(false, null);
+        toast.success('Success Update User');
+        reload();
+      } else {
+        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      }
+      console.log(formField);
+    },
+    [formField, selectedTransferFee]
+  );
+  const fetchWallets = useCallback(async () => {
+    const params = {
+      limit: 100,
+      page: 1,
+      with_deleted: false,
+      order_field: 'name',
+      order_direction: 'ASC',
+      filter: JSON.stringify({
+        status: 'Y'
+      })
+    };
+    const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
+    if (response?.status && response?.data) {
+      setWallets(response.data.list);
+    } else {
+      setWallets([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchWallets();
+  }, [fetchWallets]);
+
+  useEffect(() => {
+    if (!showEditFeeDialog) return;
+
+    const getCustomerList = async (sorting: any) => {
+      try {
+        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        });
+
+        // 🟡 Log daftar pelanggan saja (kalau respons pakai struktur {data: {list: [...]}})
+        console.log('CUSTOMER LIST: ', response?.data?.list);
+
+        setCustomers(response?.data.list || []);
+      } catch (error) {
+        console.error('Error fetching customer', error);
+      }
+    };
+
+    getCustomerList([{ id: 'msisdn', desc: false }]);
+  }, []);
+  useEffect(() => {
+    if (!showEditFeeDialog) return;
+
+    const getTransactionTypeList = async (sorting: any) => {
+      try {
+        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/transactiontype/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        });
+
+        // 🟡 Log daftar pelanggan saja (kalau respons pakai struktur {data: {list: [...]}})
+        console.log('TRANSACTION TYPE LIST: ', response?.data?.list);
+
+        setTransactionTypes(response?.data.list || []);
+      } catch (error) {
+        console.error('Error fetching customer', error);
+      }
+    };
+
+    getTransactionTypeList([{ id: 'id', desc: false }]);
+  }, [showEditFeeDialog]);
+
+  const fetchTransactionFee = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, { id });
+    // console.log("API Response:", response);
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name,
+        description: response.data.description,
+        minimum_amount: response.data.minimum_amount,
+        maximum_amount: response.data.maximum_amount,
+        period_start: response.data.period_start,
+        period_end: response.data.period_end,
+        deduct_amount: response.data.deduct_amount,
+        deduct_percentage: response.data.deduct_percentage,
+        priority: response.data.priority,
+        status: response.data.status,
+        status_include: response.data.status_include,
+        transaction_type: response.data.transaction_type.id
+
+        // updated_by: parsedUser?.username ,
+        // updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
+      }));
+    } else {
+      setFormField((prev) => ({
+        ...prev,
+        name: '',
+        description: '',
+        minimum_amount: 0,
+        maximum_amount: 0,
+        period_start: '',
+        period_end: '',
+        deduct_amount: 0,
+        deduct_percentage: 0,
+        priority: '',
+        status: '',
+        status_include: '',
+        transaction_type: ''
+      }));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (selectedTransferFee) {
+      fetchTransactionFee(selectedTransferFee);
+    }
+  }, [selectedTransferFee]);
+
+  return (
+    <Dialog open={showEditFeeDialog} onOpenChange={(open) => handleEditFeeDialog(open, null)}>
+      <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-5 border-0">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">
+                Update Transaction Fee
+              </h1>
+              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => handleEditFeeDialog(false, null)}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
+          <div className="flex flex-col px-0">
+            {alert.show && (
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+            <form action="" onSubmit={doUpdateTransferFee}>
+              <div className="card flex flex-col gap-5">
+                <div className="card-body grid gap-5 p-0">
+                  <div className="w-full">
+                    <label className="form-label">Transfer Free Name</label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.name}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, name: target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Description</label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.description}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, description: target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Minimum Amount</label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.minimum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          minimum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Maximum Amount</label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.maximum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          maximum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Period Start</label>
+                    <Input
+                      className="input"
+                      type="date"
+                      autoComplete="off"
+                      value={formField.period_start ? formField.period_start.split('T')[0] : ''}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, period_start: target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Period End</label>
+                    <Input
+                      className="input"
+                      type="date"
+                      autoComplete="off"
+                      value={formField.period_end ? formField.period_end.split('T')[0] : ''}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, period_end: target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Deduct Amount</label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.deduct_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          deduct_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Deduct Percentage</label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.deduct_percentage}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          deduct_percentage: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Transacsion Type ID</label>
+                    <Select
+                      value={formField.transaction_type}
+                      onValueChange={(transaction_type) =>
+                        setFormField((prev) => ({ ...prev, transaction_type }))
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Wallet" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {transactionTypes.map((transactiontype, idx) => (
+                          <SelectItem value={transactiontype.id} key={transactiontype.id}>
+                            {transactiontype.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Status</label>
+                    <Select
+                      value={formField.status}
+                      onValueChange={(value) => setFormField({ ...formField, status: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Y</SelectItem>
+                        <SelectItem value="N">N</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Status Included</label>
+                    <Select
+                      value={formField.status_include}
+                      onValueChange={(value) =>
+                        setFormField({ ...formField, status_include: value })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Y</SelectItem>
+                        <SelectItem value="N">N</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">Priority</label>
+                    <Select
+                      value={formField.priority}
+                      onValueChange={(value) => setFormField({ ...formField, priority: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Y</SelectItem>
+                        <SelectItem value="N">N</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  {/* <div className="w-full">
+                  <label className="form-label">Priotity</label>
+                  <Select
+                    value={formField.priority}
+                    onValueChange={(value) => setFormField({ ...formField, priority: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">Y</SelectItem>
+                      <SelectItem value="N">N</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div> */}
+
+                  {/* <div className="w-full">
+  <label className="form-label">Priority</label>
+  <Select
+    value={formField.priority ? 'Y' : 'N'}
+    onValueChange={(value) =>
+      setFormField({ ...formField, priority: value === 'Y' })
+    }
+  >
+    <SelectTrigger>
+      <SelectValue placeholder="Select Priority" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="Y">Y</SelectItem>
+      <SelectItem value="N">N</SelectItem>
+    </SelectContent>
+  </Select>
+</div> */}
+                  <div className="flex justify-end pt-2.5 gap-5">
+                    <Button variant={'outline'} type="reset">
+                      Reset
+                    </Button>
+                    <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? 'Saving...' : 'Save Changes'}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { EditFeeDialog };
diff --git a/src/pages/transfer/transferfee/blocks/ListToolBar.tsx b/src/pages/transfer/transferfee/blocks/ListToolBar.tsx
new file mode 100644
index 0000000..9acdc39
--- /dev/null
+++ b/src/pages/transfer/transferfee/blocks/ListToolBar.tsx
@@ -0,0 +1,44 @@
+  import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+  import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
+  import { Button } from '@/components/ui/button';
+
+  const ListToolbar = () => {
+    const { table, reload } = useDataGrid();
+    const { handleAddFeeDialog, handleEditFeeDialog, selectedTransferFee} = useManageTransferFeeContext();
+
+    return (
+      <div className="card-header flex-wrap gap-2 border-b-0 px-5">
+        <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+          <div className="flex justify-between w-full items-center">
+            <div className="flex w-[50%] gap-3 items-center">
+              <label className="input input-sm w-1/3">
+                <KeenIcon icon="magnifier" />
+                <input
+                  type="text"
+                  placeholder="Search Access Type"
+                  value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                  onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                />
+              </label>
+            </div>
+            <div className="flex gap-3 items-center">
+              <Button
+                variant="outline"
+                className="h-7.5 text-[0.8rem]"
+                onClick={() => handleAddFeeDialog(true)}
+              >
+                Add Data
+              </Button>
+              <DefaultTooltip title={'Refresh'} placement={'top'}>
+                <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                  <KeenIcon icon="arrows-circle" />
+                </Button>
+              </DefaultTooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  export default ListToolbar;
diff --git a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
new file mode 100644
index 0000000..67d08ba
--- /dev/null
+++ b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
@@ -0,0 +1,236 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import ListToolbar from '../blocks/ListToolBar';
+import DeleteDialog from '../blocks/DeleteDialog';
+import { EditFeeDialog } from '../blocks/EditDialog';
+
+interface ContextProps {
+  showEditFeeDialog: boolean;
+  handleEditFeeDialog: (show: boolean, selectedTransferFee: string | null) => void;
+  showAddFeeDialog: boolean;
+  handleAddFeeDialog: (show: boolean) => void;
+  handleDeleteFeeDialog: (show: boolean, selectedTransferFee: string | null) => void;
+  showDeleteFeeDialog: boolean;
+  selectedTransferFee: string | null;
+}
+
+const initialProps: ContextProps = {
+  showEditFeeDialog: false,
+  handleEditFeeDialog: () => {},
+  showAddFeeDialog: false,
+  handleAddFeeDialog: () => {},
+  showDeleteFeeDialog: false,
+  handleDeleteFeeDialog: () => {},
+  selectedTransferFee: null
+};
+
+const ManageTransferFeeContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_transaction;
+
+const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showEditFeeDialog, setShowEditFeeDialog] = useState(false);
+  const [showAddFeeDialog, setShowAddFeeDialog] = useState(false);
+  const [showDeleteFeeDialog, setShowDeleteFeeDialog] = useState(false);
+
+  const [selectedTransferFee, setSelectedTransferFee] = useState<string | null>(null);
+  const { GetData } = useCallApi();
+
+  const handleEditFeeDialog = useCallback((show: boolean, selectedTransferFee: string | null) => {
+    setSelectedTransferFee(show ? selectedTransferFee : null);
+    setShowEditFeeDialog(show);
+  }, []);
+
+  const handleAddFeeDialog = useCallback((show: boolean) => {
+    setShowAddFeeDialog(show);
+  }, []);
+
+  const handleDeleteFeeDialog = useCallback((show: boolean, selectedTransferFee: string | null) => {
+    setSelectedTransferFee(show ? selectedTransferFee : null);
+    setShowDeleteFeeDialog(show);
+  }, []);
+  const doGetTransferFeeListData = async (
+    page: number,
+    limit: number,
+    sorting: any,
+    filter: any
+  ) => {
+    sorting = sorting.length == 0 ? [{ id: 'id', desc: false }] : sorting;
+    filter = filter.length == 0 ? {} : { any: filter[0].value.toLowerCase() };
+    const response = await GetData(`${API_URL}/transactionfees/list`, {
+      limit: limit,
+      page: 1,
+      with_deleted: false,
+      order_field: sorting[0].id,
+      order_direction: sorting[0].desc ? 'ASC' : 'DESC',
+      filter: JSON.stringify(filter)
+    });
+    console.log('hasilnya', response?.data.list);
+    console.log('transactiontype', response?.data);
+
+    return { data: response?.data.list, totalCount: response?.data.total_count };
+  };
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorFn: (row) => row.name,
+        id: 'name',
+        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[200px]' }
+      },
+      {
+        accessorFn: (row) => row.description,
+        id: 'description',
+        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.minimum_amount,
+        id: 'minimum_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Min Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.maximum_amount,
+        id: 'maximum_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Max Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.period_start?.split('T')[0],
+        id: 'period_start',
+        header: ({ column }) => <DataGridColumnHeader title="Period Start" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[200px]' }
+      },
+      {
+        accessorFn: (row) => row.period_end?.split('T')[0],
+        id: 'period_end',
+        header: ({ column }) => <DataGridColumnHeader title="Period End" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[200px]' }
+      },
+      {
+        accessorFn: (row) => row.deduct_amount,
+        id: 'deduct_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Deduct Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.deduct_percentage,
+        id: 'deduct_percentage',
+        header: ({ column }) => <DataGridColumnHeader title="Deduct %" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.priority,
+        id: 'priority',
+        header: ({ column }) => <DataGridColumnHeader title="Priority" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[100px]' }
+      },
+      {
+        accessorFn: (row) => row.transaction_type?.name,
+        id: 'transactionTypeId',
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.status_include,
+        id: 'status_include',
+        header: ({ column }) => <DataGridColumnHeader title="Status Include" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleEditFeeDialog(true, row.id)}
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDeleteFeeDialog(true, row.id)}
+              >
+                <KeenIcon icon="trash" />
+              </button>
+            </>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    [handleEditFeeDialog, handleDeleteFeeDialog]
+  );
+
+  return (
+    <div className="container mx-auto py-5">
+      <div className="flex justify-between items-center mb-4">
+        <h1 className="text-2xl font-semibold">Manage Transaction Fee</h1>
+      </div>
+      <ManageTransferFeeContext.Provider
+        value={{
+          showEditFeeDialog,
+          handleEditFeeDialog,
+          showAddFeeDialog,
+          handleAddFeeDialog,
+          selectedTransferFee,
+          showDeleteFeeDialog,
+          handleDeleteFeeDialog
+        }}
+      >
+        <Toaster expand visibleToasts={9} duration={3000} />
+        <DataGridProvider
+          columns={columns}
+          pagination={{ size: 10 }}
+          layout={{ card: true }}
+          toolbar={<ListToolbar />}
+          sorting={[{ id: 'id', desc: true }]}
+          serverSide={true}
+          onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+            doGetTransferFeeListData(pageIndex, pageSize, sorting, columnFilters)
+          }
+        >
+          {children}
+          <DeleteDialog />
+          <EditFeeDialog />
+        </DataGridProvider>
+      </ManageTransferFeeContext.Provider>
+    </div>
+  );
+};
+
+export { ManageTransferFeeContext, ManageTransferFeeContextProvider };
diff --git a/src/pages/transfer/transferfee/hooks/useManageTransferFeeContext.tsx b/src/pages/transfer/transferfee/hooks/useManageTransferFeeContext.tsx
new file mode 100644
index 0000000..11873ba
--- /dev/null
+++ b/src/pages/transfer/transferfee/hooks/useManageTransferFeeContext.tsx
@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ManageTransferFeeContext } from './ManageTransferFeeContext';
+
+const useManageTransferFeeContext = () => {
+  const context = useContext(ManageTransferFeeContext);
+
+  if (!context) throw new Error('useManageAccessTypeContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useManageTransferFeeContext };
diff --git a/src/pages/transfer/transfertype/TransferType.tsx b/src/pages/transfer/transfertype/TransferType.tsx
new file mode 100644
index 0000000..de8effe
--- /dev/null
+++ b/src/pages/transfer/transfertype/TransferType.tsx
@@ -0,0 +1,27 @@
+import { Container, DataGridInner } from '@/components';
+import {
+  ManageTransferTypeContext,
+  ManageTransferTypeContextProvider
+} from './hooks/ManageTransferTypeContext';
+import AddDialog from './blocks/AddDialog';
+import { DeleteDialog } from './blocks/DeleteDialog';
+import { EditDialog } from './blocks/EditDialog';
+
+const TransferType = () => {
+  
+  return (
+    <ManageTransferTypeContextProvider>
+      <Container>
+        <div className="grid gap-5 lg:gap-7.5">
+          <DataGridInner />
+        </div>
+        <AddDialog />
+        <DeleteDialog />
+        <EditDialog />
+        
+      </Container>
+    </ManageTransferTypeContextProvider>
+  );
+};
+
+export default TransferType;
diff --git a/src/pages/transfer/transfertype/blocks/AddDialog.tsx b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
new file mode 100644
index 0000000..d0afb04
--- /dev/null
+++ b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
@@ -0,0 +1,490 @@
+import { apiConfig } from '@/config/api.config';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
+import {
+  Alert,
+  Container,
+  DataGridColumnHeader,
+  DataGridInner,
+  KeenIcon,
+  useDataGrid
+} from '@/components';
+import { useCallApi } from '@/hooks';
+import { NumericFormat } from 'react-number-format';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import { getAuth } from '@/auth';
+
+interface WalletProps {
+  Wallet_id: string;
+  Wallet_name: string;
+}
+
+interface CustomerProps {
+  id: string;
+  username: string;
+  msisdn: string;
+}
+
+const API_URL = apiConfig.service_transaction;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+const API_URL3_CUSTOMER = apiConfig.service_customer;
+
+const AddDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { GetData } = useCallApi();
+  const { showAddDialog, handleAddDialog, selectedTransferType } = useManageTransferTypeContext();
+  const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const { reload } = useDataGrid();
+  const { PostData, PutData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const initialState = {
+    name: '',
+    description: '',
+    wallet_origin: '',
+    wallet_destination: '',
+    wallet_fee_destination: '',
+    customer_fee_destination: '',
+    minimum_amount: 0,
+    maximum_amount: 0,
+    max_transaction_per_day: 0,
+    status: '',
+    status_approval: '',
+    created_by: '',
+    created_at: ''
+  };
+
+  const [formField, setFormField] = useState(initialState);
+
+  const resetForm = () => {
+    setFormField(initialState);
+  };
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const parsedUser = getAuth()?.user;
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // setIsSubmitting(true);
+    const payload = {
+      name: formField.name,
+      description: formField.description,
+      wallet_origin: formField.wallet_origin,
+      wallet_destination: formField.wallet_destination,
+      minimum_amount: formField.minimum_amount,
+      maximum_amount: formField.maximum_amount,
+      max_transaction_per_day: formField.max_transaction_per_day,
+      wallet_fee_destination: formField.wallet_fee_destination,
+      customer_fee_destination: formField.customer_fee_destination,
+      status_approval: formField.status_approval,
+      status: formField.status
+    };
+  };
+  useEffect(() => {
+    const created_time = new Date();
+    const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+
+    if (showAddDialog) {
+      setFormField({
+        ...formField,
+        created_by: parsedUser?.username,
+        created_at: formattedTime
+      });
+    }
+  }, [showAddDialog]);
+
+  useEffect(() => {
+    if (!showAddDialog) return;
+    const getCustomerList = async (sorting: any) => {
+      try {
+        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+
+        const response = await GetData(`${API_URL3_CUSTOMER}/customer/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        });
+        console.log('CUSTOMER LIST: ', response?.data?.list);
+
+        setCustomers(response?.data.list || []);
+      } catch (error) {
+        console.error('Error fetching customer', error);
+      }
+    };
+
+    getCustomerList([{ id: 'msisdn', desc: false }]);
+  }, [showAddDialog]);
+
+  const fetchWallets = useCallback(async () => {
+    const params = {
+      limit: 100,
+      page: 1,
+      with_deleted: false,
+      order_field: 'name',
+      order_direction: 'ASC',
+      filter: JSON.stringify({
+        status: 'Y'
+      })
+    };
+    const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
+    if (response?.status && response?.data) {
+      setWallets(response.data.list);
+    } else {
+      setWallets([]);
+    }
+    console.log('WALLET LIST: ', response?.data?.list);
+  }, []);
+
+  useEffect(() => {
+    if (!showAddDialog) return;
+    fetchWallets();
+  }, [showAddDialog]);
+
+  const doCreateTransferType = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      console.log(formField);
+      for (const key in formField) {
+        if (
+          formField[key as keyof typeof formField] === '' ||
+          formField[key as keyof typeof formField] === 0
+        ) {
+          setAlert({ show: true, message: 'All fields must be filled out' });
+          return;
+        }
+      }
+
+      setAlert({ show: false, message: '' });
+
+      const response = await PostData(`${API_URL}/transactiontype/create`, formField);
+
+      if (response?.status) {
+        setAlert({ show: false, message: '' });
+        handleAddDialog(false);
+        toast.success('Success Create Transfer Type');
+        reload();
+        resetForm();
+
+        console.log('Berhasil nih, isinya gini:', formField);
+      } else {
+        setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
+      }
+      handleAddDialog(false);
+    },
+    [formField]
+  );
+
+  return (
+    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
+      <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-5 border-0">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">Transaction Type</h1>
+              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => {
+                handleAddDialog(false);
+                resetForm();
+              }}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
+          <div className="flex flex-col px-0">
+            {alert.show && (
+              <Alert variant="danger" className="mb-3">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+            <form action="" onSubmit={doCreateTransferType}>
+              <div className="card-body grid gap-5 p-0">
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Transfer Type Name
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.name}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, name: target.value }))
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Description
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.description}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, description: target.value }))
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Minimum Amount
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.minimum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          minimum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Maximum Amount
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.maximum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          maximum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Maximum Amount"
+                    />
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Max Transaction per day
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.max_transaction_per_day}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          max_transaction_per_day: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Max Transaction Per Day"
+                    />
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">From Account</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_origin}
+                        onValueChange={(wallet_origin) =>
+                          setFormField((prev) => ({ ...prev, wallet_origin }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet, idx) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">To Account</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_destination}
+                        onValueChange={(wallet_destination) =>
+                          setFormField((prev) => ({ ...prev, wallet_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet, idx) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Wallet Destination Fee</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_fee_destination}
+                        onValueChange={(wallet_fee_destination) =>
+                          setFormField((prev) => ({ ...prev, wallet_fee_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet, idx) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Customer Fee Destination</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.customer_fee_destination}
+                        onValueChange={(customer_fee_destination) =>
+                          setFormField((prev) => ({ ...prev, customer_fee_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {customers.map((customer, idx) => (
+                            <SelectItem value={customer.id} key={customer.id}>
+                              {customer.username} - {customer.msisdn}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Status Approval</label>
+
+                    <div className="grow">
+                      <Select
+                        value={formField.status_approval}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status_approval: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Yes</SelectItem>
+                          <SelectItem value="N">No</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Status</label>
+
+                    <div className="grow">
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex justify-end pt-2.5 gap-5">
+                  <Button variant={'outline'} type="reset">
+                    Reset
+                  </Button>
+                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? 'Saving...' : 'Save Changes'}
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddDialog;
diff --git a/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx b/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx
new file mode 100644
index 0000000..52f9e25
--- /dev/null
+++ b/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx
@@ -0,0 +1,92 @@
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Alert, useDataGrid } from '@/components';
+import { ChangeEvent, useCallback, useState } from 'react';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+import { useCallApi } from '@/hooks';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { EnforceSwitch } from '@/components/switch';
+import { useContext } from 'react';
+import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
+import { ManageTransferTypeContext } from '../hooks/ManageTransferTypeContext';
+import TransferType from '../TransferType';
+import { DialogDescription } from '@radix-ui/react-dialog';
+import { useManageAccessTypeContext } from '@/pages/access/access-type/hooks/useManageAccessTypeContext';
+
+const API_URL = apiConfig.service_transaction;
+
+const DeleteDialog = () => {
+  const { showDeleteDialog, handleDeleteDialog, selectedTransferType } = useManageTransferTypeContext();
+  const { reload } = useDataGrid();
+  const { DeleteData } = useCallApi();
+  const [enforce, setEnforce] = useState(false);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const doDeleteTransferType = useCallback(async () => {
+    if (!selectedTransferType) {
+      toast.error('No Transfer Type selected');
+      return;
+    }
+  
+    const response = await DeleteData(`${API_URL}/transactiontype/delete/${selectedTransferType}/${enforce}`, {
+      id: selectedTransferType
+    });
+  
+    if (response?.status) {
+      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      handleDeleteDialog(false, null);
+      reload();
+      setTimeout(() => toast.success('Success Delete Product'), 0);
+    } else {
+      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      setTimeout(() => toast.error('Failed Delete Product'), 0);
+    }
+  }, [selectedTransferType, enforce, DeleteData, handleDeleteDialog, reload]);
+  
+  // console.log(selectedTransferType);
+
+  return (
+    <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-0 border-0 block">
+          <DialogTitle className="text-lg">Delete Transfer Type</DialogTitle>
+          <DialogDescription className="text-sm">Delete Transfer Type</DialogDescription>
+          <Alert variant="warning">
+            <h3 className="text-lg">Are you sure?</h3>
+            <span className="text-sm">you will delete this data!</span>
+            <div className="mt-2 flex items-center gap-x-2">
+              <label className="form-label max-w-56">Hard Delete</label>
+              <EnforceSwitch
+                enforce={enforce}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                  setEnforce(e.target.checked);
+                }}
+              />
+            </div>
+          </Alert>
+          {alert.show && (
+            <Alert variant="danger">
+              <h3>{alert.message}</h3>
+            </Alert>
+          )}
+        </DialogHeader>
+        <DialogFooter className="flex justify-end items-center gap-4 mt-3">
+          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+            Cancel
+          </Button>
+          <Button variant={'destructive'} onClick={() => doDeleteTransferType()}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDialog;
+
+export { DeleteDialog };
diff --git a/src/pages/transfer/transfertype/blocks/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
new file mode 100644
index 0000000..7a27df0
--- /dev/null
+++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
@@ -0,0 +1,525 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { NumericFormat } from 'react-number-format';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { apiConfig } from '@/config/api.config';
+import { Alert, Container, DataGridInner, KeenIcon, useDataGrid } from '@/components';
+import { toast } from 'sonner';
+import { useCallApi } from '@/hooks';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { getAuth } from '@/auth';
+import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
+import AddFeeDialog from '../../transferfee/blocks/AddDialog';
+
+const API_URL = apiConfig.service_transaction;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+const API_URL_CUSTOMER = apiConfig.service_customer;
+
+interface WalletProps {
+  Wallet_id: string;
+  Wallet_name: string;
+}
+
+interface CustomerProps {
+  id: string;
+  username: string;
+  msisdn: string;
+}
+
+interface TranssactionTypeProps {
+  name: string;
+  description: string;
+  minimum_amount: number;
+  maximum_amount: number;
+  max_transaction_per_day: number;
+  status_approval: string;
+  status: string;
+  wallet_origin: WalletProps;
+  wallet_destination: WalletProps;
+  wallet_fee_destination: WalletProps;
+  customer_fee_destination: CustomerProps;
+}
+
+const EditDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showEditDialog, handleEditDialog, selectedTransferType, accounts } =
+    useManageTransferTypeContext();
+  const { reload } = useDataGrid();
+  const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const { GetData, PutData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const parsedUser = getAuth()?.user;
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [transactiontypes, setTransactionTypes] = useState<TranssactionTypeProps[]>([]);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const resetForm = () => {
+    setFormField(formField);
+  };
+  const [formField, setFormField] = useState({
+    name: '',
+    description: '',
+    wallet_origin: '',
+    wallet_destination: '',
+    wallet_fee_destination: '',
+    customer_fee_destination: '',
+    minimum_amount: 0,
+    maximum_amount: 0,
+    max_transaction_per_day: 0,
+    status_approval: '',
+    status: '',
+    updated_by: '',
+    updated_at: ''
+  });
+  useEffect(() => {
+    const updated_time = new Date();
+    const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
+
+    if (showEditDialog) {
+      setFormField({
+        ...formField,
+        updated_by: parsedUser?.username,
+        updated_at: formattedTime
+      });
+    }
+  }, [showEditDialog]);
+  /* actions */
+  const doUpdateTransferType = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const response = await PutData(`${API_URL}/transactiontype/update/${selectedTransferType}`, {
+        ...formField
+      });
+      if (response?.status) {
+        handleEditDialog(false, null);
+        toast.success('Success Update User');
+        reload();
+      } else {
+        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      }
+      // console.log(formField);
+    },
+    [formField, selectedTransferType]
+  );
+  useEffect(() => {
+    const getCustomerList = async (sorting: any) => {
+      try {
+        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        });
+        // console.log('CUSTOMER LIST: ', response?.data?.list);
+
+        setCustomers(response?.data.list || []);
+      } catch (error) {
+        console.error('Error fetching customer', error);
+      }
+    };
+
+    getCustomerList([{ id: 'id', desc: false }]);
+  }, [showEditDialog]);
+  const fetchWallets = useCallback(async () => {
+    const params = {
+      limit: 100,
+      page: 1,
+      with_deleted: false,
+      order_field: 'name',
+      order_direction: 'ASC',
+      filter: JSON.stringify({
+        status: 'Y'
+      })
+    };
+    const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
+    if (response?.status && response?.data) {
+      setWallets(response.data.list);
+    } else {
+      setWallets([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchWallets();
+  }, [fetchWallets]);
+
+  const fetchTransactionType = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
+    // console.log("API Response:", response);
+
+    if (response?.status) {
+      const data = response.data;
+      console.log('Fetched customer_fee_destination:', response.data);
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name,
+        description: response.data.description,
+        wallet_origin: response.data.wallet_origin.id,
+        wallet_destination: response.data.wallet_destination.id,
+        wallet_fee_destination: response.data.wallet_fee_destination.id,
+        customer_fee_destination: response.data.customer_fee_destination.id,
+        minimum_amount: response.data.minimum_amount,
+        maximum_amount: response.data.maximum_amount,
+        max_transaction_per_day: response.data.max_transaction_per_day,
+        status_approval: response.data.status_approval,
+        status: response.data.status
+        // updated_by: parsedUser?.username ,
+        // updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
+      }));
+    } else {
+      setFormField((prev) => ({
+        ...prev,
+        name: '',
+        description: '',
+        wallet_origin: '',
+        wallet_destination: '',
+        wallet_fee_destination: '',
+        customer_fee_destination: '',
+        maximum_amount: 0,
+        minimum_amount: 0,
+        max_transaction_per_day: 0,
+        status_approval: '',
+        status: ''
+      }));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (selectedTransferType) {
+      fetchTransactionType(selectedTransferType);
+    }
+  }, [selectedTransferType]);
+  // console.log('Form Field Data: ', formField);
+  // console.log('customer list:', customers);
+  return (
+    <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
+      <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-5 border-0">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">
+                Update Transaction Type
+              </h1>
+              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => {
+                handleEditDialog(false, null);
+                resetForm();
+              }}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
+          <div className="flex flex-col px-0">
+            {alert.show && (
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+            <form action="" onSubmit={doUpdateTransferType}>
+              <div className="card-body grid gap-5 p-0">
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Transfer Type Name
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.name}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, name: target.value }))
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Description
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.description}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, description: target.value }))
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Minimum Amount
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.minimum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          maximum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Minimum Amount"
+                    />
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Maximum Amount
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.maximum_amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          maximum_amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Maximum Amount"
+                    />
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Maximum Transaction per day
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.max_transaction_per_day}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          max_transaction_per_day: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Max Transaction Per Day"
+                    />
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">From Account</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_origin}
+                        onValueChange={(wallet_origin) =>
+                          setFormField((prev) => ({ ...prev, wallet_origin }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">To Account</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_destination}
+                        onValueChange={(wallet_destination) =>
+                          setFormField((prev) => ({ ...prev, wallet_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet, idx) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Wallet Fee Destination</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.wallet_fee_destination}
+                        onValueChange={(wallet_fee_destination) =>
+                          setFormField((prev) => ({ ...prev, wallet_fee_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wallets.map((wallet, idx) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
+                              {wallet.Wallet_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Customer Fee Destination</label>
+                    <div className="grow">
+                      <Select
+                        value={formField.customer_fee_destination}
+                        onValueChange={(customer_fee_destination) =>
+                          setFormField((prev) => ({ ...prev, customer_fee_destination }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {customers.map((customer, idx) => (
+                            <SelectItem value={customer.id} key={customer.id}>
+                              {customer.username} - {customer.msisdn}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Status Approval</label>
+
+                    <div className="grow">
+                      <Select
+                        value={formField.status_approval}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status_approval: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Yes</SelectItem>
+                          <SelectItem value="N">No</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Status</label>
+
+                    <div className="grow">
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                {/* <div className="grid gap-5 lg:gap-7.5">
+              <DataGridInner />
+            </div> */}
+                <div className="flex justify-end pt-2.5 gap-5">
+                  {/* <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => setShowTransactionFeeDialog(true)}
+                  >
+                    Transaction Fee Form
+                  </Button> */}
+
+                  <Button variant={'outline'} type="reset">
+                    Reset
+                  </Button>
+                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? 'Saving...' : 'Save Changes'}
+                  </Button>
+                </div>
+              </div>
+            </form>
+            {/* Bagian Transaction Fee */}
+            <ManageTransferFeeContextProvider>
+              <Container>
+                <div className="grid gap-5 lg:gap-7.5">
+                  <DataGridInner />
+                </div>
+                <AddFeeDialog />
+              </Container>
+            </ManageTransferFeeContextProvider>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { EditDialog };
diff --git a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
new file mode 100644
index 0000000..7325816
--- /dev/null
+++ b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
@@ -0,0 +1,44 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
+import { Button } from '@/components/ui/button';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog, handleEditDialog } = useManageTransferTypeContext();
+
+  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 Transaction Type"
+                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+              />
+            </label>
+          </div>
+          <div className="flex gap-3 items-center">
+            <Button
+              variant="outline"
+              className="h-7.5 text-[0.8rem]"
+              onClick={() => 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;
diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
new file mode 100644
index 0000000..5759d29
--- /dev/null
+++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
@@ -0,0 +1,254 @@
+  import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+  import { Toaster } from '@/components/ui/sonner';
+  import { apiConfig } from '@/config/api.config';
+  import { useCallApi } from '@/hooks';
+  import { ColumnDef } from '@tanstack/react-table';
+  import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+  import ListToolbar from '../blocks/ListToolBar';
+
+
+  interface AccountProps {
+    id: string;
+    name: string;
+  }
+
+  interface TransferType {
+    id: string;
+    name: string;
+    minimum_amount: number;
+    maximum_amount: number;
+    max_transaction_per_day: number;
+    walletOriginId: string;
+    walletDestinationId: string;
+    status: string;
+  }
+
+  interface ContextProps {
+    showEditDialog: boolean;
+    handleEditDialog: (show: boolean, selected_user: string | null) => void;
+    showAddDialog: boolean;
+    handleAddDialog: (show: boolean) => void;
+    showDeleteDialog: boolean;
+    handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
+    selectedTransferType: string | null;
+    transferType: string|null;
+    accounts: AccountProps[];
+  }
+
+  const initialProps: ContextProps = {
+    showEditDialog: false,
+    handleEditDialog: () => {},
+    showAddDialog: false,
+    handleAddDialog: () => {},
+    showDeleteDialog: false,
+    handleDeleteDialog: () => {},
+    selectedTransferType: null,
+    accounts: [],
+    transferType: null
+  };
+
+  const ManageTransferTypeContext = createContext<ContextProps>(initialProps);
+  const API_URL = apiConfig.service_transaction;
+
+  const ManageTransferTypeContextProvider = ({ children }: { children: React.ReactNode }) => {
+    const [showEditDialog, setShowEditDialog] = useState(false);
+    const [showAddDialog, setShowAddDialog] = useState(false);
+    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+    const [selectedUser, setSelectedUser] = useState<string | null>(null);
+    const [accounts, setAccount] = useState<AccountProps[]>([]);
+    const { GetData } = useCallApi();
+    const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
+    const [transferType, setTransferType] = useState<string | null>(null);
+
+
+    const handleEditDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
+      setSelectedTransferType(show ? selected_transfertype : null);
+      setShowEditDialog(show);
+    }, []);
+    
+    const handleAddDialog = useCallback((show: boolean) => {
+      setShowAddDialog(show);
+    }, []);
+
+    const handleDeleteDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
+      setShowDeleteDialog(show);
+      setSelectedTransferType(show ? selected_transfertype : null);
+    }, []);
+
+ const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+
+      {
+        accessorFn: (row) => row.name,
+        id: 'name',
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Type Name" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.wallet_origin?.name || 'N/A',
+        id: 'wallet_origin',
+        header: ({ column }) => <DataGridColumnHeader title="From Account" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.wallet_destination.name || 'N/A',
+        id: 'wallet_destination',
+        header: ({ column }) => <DataGridColumnHeader title="To Account" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.maximum_amount,
+        id: 'maximum_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Maximum Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.minimum_amount,
+        id: 'minimum_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Minimum Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.max_transaction_per_day,
+        id: 'max_transaction_per_day',
+        header: ({ column }) => <DataGridColumnHeader title="Max Transaction Per Day" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.description,
+        id: 'description',
+        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.wallet_fee_destination.name ,
+        id: 'wallet_fee_destination',
+        header: ({ column }) => <DataGridColumnHeader title="Wallet Fee Destination" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.customer_fee_destination?.username || 'N/A',
+        id: 'customer_fee_destination',
+        header: ({ column }) => <DataGridColumnHeader title="Customer Fee Destination" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.status_approval,
+        id: 'status_approval',
+        header: ({ column }) => <DataGridColumnHeader title="Approval Status" 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]' }
+      }
+,      
+      {
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <>
+              <button className="btn btn-sm btn-icon btn-clear btn-light" onClick={() => handleEditDialog(true, row.id)}>
+                <KeenIcon icon="notepad-edit" />
+              </button>
+              <button className="btn btn-sm btn-icon btn-clear btn-light" onClick={() => handleDeleteDialog(true, row.id)}>
+                <KeenIcon icon="trash" />
+              </button>
+            </>
+          );
+        },
+        meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
+      }
+    ],
+    [handleEditDialog, handleDeleteDialog]
+  );
+    const doGetTransferTypeListData = async (page: number, limit: number, sorting: any, filter: any) => {
+    
+        sorting = sorting.length == 0 ? [{ id: 'id', desc: false }] : sorting;
+        filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+        const response = await GetData(`${API_URL}/transactiontype/list`, {
+          limit: limit,
+          page: page + 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'ASC' : 'DESC',
+          filter: JSON.stringify(filter)
+        });
+        console.log("bismillah:",response?.data.list)
+        // setTransferType(response?.data.list);
+        return { data: response?.data.list, totalCount: response?.data.total_count };
+        // console.log("test:",response)
+    };
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <div className="container mx-auto py-6">
+        <h1 className="text-2xl font-semibold text-gray-900 ml-5 mb-4">Manage Transaction Type</h1>
+      </div>
+  
+      <ManageTransferTypeContext.Provider
+        value={{
+          showEditDialog,
+          handleEditDialog,
+          showAddDialog,
+          handleAddDialog,
+          showDeleteDialog,
+          handleDeleteDialog,
+          selectedTransferType,
+          accounts,
+          transferType,
+        }}
+      >
+        <Toaster expand visibleToasts={9} duration={3000} />
+  
+        <div className="px-4">
+          <DataGridProvider
+            columns={columns}
+            pagination={{ size: 10 }}
+            layout={{ card: true }}
+            toolbar={<ListToolbar />}
+            sorting={[{ id: 'id', desc: true }]}
+            serverSide={true}
+            onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+              doGetTransferTypeListData(pageIndex, pageSize, sorting, columnFilters)
+            }
+          >
+            {children}
+          </DataGridProvider>
+        </div>
+      </ManageTransferTypeContext.Provider>
+    </div>
+  );
+  
+  };
+
+  export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
+  export type { TransferType };
diff --git a/src/pages/transfer/transfertype/hooks/useManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/useManageTransferTypeContext.tsx
new file mode 100644
index 0000000..b726a7c
--- /dev/null
+++ b/src/pages/transfer/transfertype/hooks/useManageTransferTypeContext.tsx
@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ManageTransferTypeContext } from './ManageTransferTypeContext';
+
+const useManageTransferTypeContext = () => {
+  const context = useContext(ManageTransferTypeContext);
+
+  if (!context) throw new Error('useManageAccessTypeContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useManageTransferTypeContext };

From d9843d78487d522e189130c65a4163a7fa90f70b Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 24 Mar 2025 10:22:43 +0700
Subject: [PATCH 05/53] tambahan

---
 src/config/api.config.ts                      |   6 +-
 src/pages/transfer/TransferType.tsx           |  21 -
 src/pages/transfer/blocks/AddDialog.tsx       | 398 ------------------
 src/pages/transfer/blocks/ListToolBar.tsx     |  49 ---
 .../transfer/blocks/TransactionFeeDialog.tsx  | 281 -------------
 .../hooks/ManageTransferTypeContext.tsx       | 178 --------
 .../hooks/useManageTransferTypeContext.tsx    |  12 -
 src/routing/AppRoutingSetup.tsx               |   2 +-
 8 files changed, 6 insertions(+), 941 deletions(-)
 delete mode 100644 src/pages/transfer/TransferType.tsx
 delete mode 100644 src/pages/transfer/blocks/AddDialog.tsx
 delete mode 100644 src/pages/transfer/blocks/ListToolBar.tsx
 delete mode 100644 src/pages/transfer/blocks/TransactionFeeDialog.tsx
 delete mode 100644 src/pages/transfer/hooks/ManageTransferTypeContext.tsx
 delete mode 100644 src/pages/transfer/hooks/useManageTransferTypeContext.tsx

diff --git a/src/config/api.config.ts b/src/config/api.config.ts
index 3087034..8896461 100644
--- a/src/config/api.config.ts
+++ b/src/config/api.config.ts
@@ -1,6 +1,8 @@
 interface apiConfigProps {
   service_dashboard: string;
   service_master_data: string;
+  service_transaction: string;
+  service_customer: string;
 }
 
 const API_URL = import.meta.env.VITE_APP_API_URL;
@@ -8,7 +10,9 @@ const apiConfig: apiConfigProps = {
   // service_dashboard: `${API_URL}${import.meta.env.VITE_ENV != 'development' ? '/d' : ''}`,
   service_dashboard: `${API_URL}/d`,
   // service_master_data: `${API_URL}/m`
-  service_master_data: `${API_URL}/t`
+  service_master_data: `${API_URL}/t`,
+  service_transaction: `${API_URL}/tt`,
+  service_customer: `${API_URL}/c`,
 };
 
 export { apiConfig };
diff --git a/src/pages/transfer/TransferType.tsx b/src/pages/transfer/TransferType.tsx
deleted file mode 100644
index 2e5d03e..0000000
--- a/src/pages/transfer/TransferType.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Container, DataGridInner } from '@/components';
-import {
-  ManageTransferTypeContext,
-  ManageTransferTypeContextProvider
-} from './hooks/ManageTransferTypeContext';
-import AddDialog from './blocks/AddDialog';
-
-const TransferType = () => {
-  return (
-    <ManageTransferTypeContextProvider>
-      <Container>
-        <div className="grid gap-5 lg:gap-7.5">
-          <DataGridInner />
-        </div>
-        <AddDialog />
-      </Container>
-    </ManageTransferTypeContextProvider>
-  );
-};
-
-export default TransferType;
diff --git a/src/pages/transfer/blocks/AddDialog.tsx b/src/pages/transfer/blocks/AddDialog.tsx
deleted file mode 100644
index a7abdf1..0000000
--- a/src/pages/transfer/blocks/AddDialog.tsx
+++ /dev/null
@@ -1,398 +0,0 @@
-import { apiConfig } from '@/config/api.config';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
-import { Alert, KeenIcon, useDataGrid } from '@/components';
-import { useCallApi } from '@/hooks';
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select';
-import { Button } from '@/components/ui/button';
-import TransactionFeeDialog from './TransactionFeeDialog';
-import { toast } from 'sonner';
-import { doSaveLogActivity } from '@/actions/GlobalActions';
-import { getAuth } from '@/auth';
-
-interface CreateTransferTypeParams {
-  transfer_type_name: string;
-  description: string;
-  from_account: string;
-  to_account: string;
-  minimal_amount: number;
-  maximum_amount: number;
-  otp_threshold: number;
-  maximum_transaction_perDay: number;
-  status: string;
-  created_by: string;
-  created_at: string;
-}
-
-const API_URL = apiConfig.service_dashboard;
-
-const AddDialog = () => {
-  const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog, accounts } = useManageTransferTypeContext();
-  const { reload } = useDataGrid();
-  const { PostData, PutData } = useCallApi();
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-
-  const initialState = {
-    transfer_type_name: '',
-    description: '',
-    from_account: '',
-    to_account: '',
-    minimal_amount: 0,
-    maximum_amount: 0,
-    otp_threshold: 0,
-    maximum_transaction_perDay: 0,
-    status: '',
-    created_by: '',
-    created_at: ''
-  };
-
-  const [formField, setFormField] = useState(initialState);
-
-  const resetForm = () => {
-    setFormField(initialState);
-  };
-
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false);
-  const parsedUser = getAuth()?.user;
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    // setIsSubmitting(true);
-    const payload = {
-      transfer_type_name: formField.transfer_type_name,
-      description: formField.description,
-      from_account: formField.from_account,
-      to_account: formField.to_account,
-      minimal_amount: formField.minimal_amount,
-      maximum_amount: formField.maximum_amount,
-      otp_threshold: formField.otp_threshold,
-      maximum_transaction_perDay: formField.maximum_transaction_perDay
-    };
-    console.log(payload);
-  };
-  useEffect(() => {
-    const created_time = new Date();
-    const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
-
-    if (showAddDialog) {
-      setFormField({
-        ...formField,
-        created_by: parsedUser?.username,
-        created_at: formattedTime
-      });
-    }
-  }, [showAddDialog]);
-  const doCreateTransferType = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      console.log(formField);
-
-      for (const key in formField) {
-        if (
-          formField[key as keyof typeof formField] === '' ||
-          formField[key as keyof typeof formField] === 0
-        ) {
-          setAlert({ show: true, message: 'All fields must be filled out' });
-          return;
-        }
-      }
-
-      setAlert({ show: false, message: '' });
-      const response = await PostData(`${API_URL}/transactiontype/create`, formField);
-
-      if (response?.status) {
-        setAlert({ show: false, message: '' });
-        handleAddDialog(false);
-        toast.success('Success Create Transfer Type');
-        reload();
-        resetForm();
-
-        const createActivity = {
-          module: 'Manage Transfer Type',
-          description: `Create New Transfer Type => ${formField.transfer_type_name}`,
-          action: 'C'
-        };
-
-        doSaveLogActivity(createActivity);
-      } else {
-        setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
-      }
-
-      handleAddDialog(false);
-    },
-    [formField]
-  );
-  const handleTransactionFeeSubmit = (data: any) => {
-    // console.log('Transaction Fee Data Submitted:', data);
-    setShowTransactionFeeDialog(false);
-  };
-
-  return (
-    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
-      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
-        <DialogHeader className="p-5 border-0">
-          <DialogTitle></DialogTitle>
-          <DialogDescription></DialogDescription>
-          <div className="flex items-center justify-between flex-wrap grow">
-            <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">Transfer Type</h1>
-              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
-            </div>
-            <div
-              className="cursor-pointer hover:opacity-100 opacity-50"
-              onClick={() => {
-                handleAddDialog(false);
-                resetForm();
-              }}
-            >
-              <KeenIcon icon="cross" className="text-1.5xl" />
-            </div>
-          </div>
-        </DialogHeader>
-        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
-          <div className="flex flex-col px-0">
-            {alert.show && (
-              <Alert variant="danger" className="mb-3">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-            <form action="" onSubmit={doCreateTransferType}>
-              <div className="card-body grid gap-5 p-0">
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">
-                      Transfer Type Name
-                    </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      autoComplete="off"
-                      value={formField.transfer_type_name}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, transfer_type_name: target.value }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">
-                      Description
-                    </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      autoComplete="off"
-                      value={formField.description}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, description: target.value }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">From Account</label>
-
-                    <div className="grow">
-                      <Select
-                        value={formField.from_account}
-                        onValueChange={(target) =>
-                          setFormField((prev) => ({ ...prev, from_account: target }))
-                        }
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {accounts.map((account, idx) => (
-                            <SelectItem value={account.name} key={account.id}>
-                              {account.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">To Account</label>
-
-                    <div className="grow">
-                      <Select
-                        value={formField.to_account}
-                        onValueChange={(target) =>
-                          setFormField((prev) => ({ ...prev, to_account: target }))
-                        }
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {accounts.map((account, idx) => (
-                            <SelectItem value={account.name} key={account.id}>
-                              {account.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">
-                      Minimal Amount
-                    </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      autoComplete="off"
-                      value={formField.minimal_amount}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          minimal_amount: Number(target.value)
-                        }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">
-                      Maximum Amount
-                    </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      autoComplete="off"
-                      value={formField.maximum_amount}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          maximum_amount: Number(target.value)
-                        }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">
-                      OTP Threshold
-                    </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      autoComplete="off"
-                      value={formField.otp_threshold}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          otp_threshold: Number(target.value)
-                        }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">
-                      Maximum Transaction / day
-                    </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      autoComplete="off"
-                      value={formField.maximum_transaction_perDay}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          maximum_transaction_perDay: Number(target.value)
-                        }))
-                      }
-                    />
-                  </div>
-                </div>
-                <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">Status</label>
-
-                    <div className="grow">
-                      <Select
-                        value={formField.status}
-                        onValueChange={(value) =>
-                          setFormField((prev) => ({ ...prev, status: value }))
-                        }
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="Y">Y</SelectItem>
-                          <SelectItem value="N">N</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex justify-end pt-2.5 gap-5">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => setShowTransactionFeeDialog(true)}
-                  >
-                    Transaction Fee Form
-                  </Button>
-                  <Button variant={'outline'} type="reset">
-                    Reset
-                  </Button>
-                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
-                    {isSubmitting ? 'Saving...' : 'Save Changes'}
-                  </Button>
-                </div>
-              </div>
-            </form>
-            <TransactionFeeDialog
-              open={showTransactionFeeDialog}
-              onClose={() => setShowTransactionFeeDialog(false)}
-              onSubmit={handleTransactionFeeSubmit}
-            />
-          </div>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default AddDialog;
diff --git a/src/pages/transfer/blocks/ListToolBar.tsx b/src/pages/transfer/blocks/ListToolBar.tsx
deleted file mode 100644
index a3af2c3..0000000
--- a/src/pages/transfer/blocks/ListToolBar.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
-import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
-import { Button } from '@/components/ui/button';
-
-const ListToolbar = () => {
-  const { table, reload } = useDataGrid();
-  const { handleAddDialog, handleEditDialog } = useManageTransferTypeContext();
-
-  return (
-    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
-      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
-        <div className="flex justify-between w-full items-center">
-          <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
-              <KeenIcon icon="magnifier" />
-              <input
-                type="text"
-                placeholder="Search Access Type"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
-              />
-            </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button variant={'outline'} className="h-7.5 disabled:bg-gray-400">
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip>
-          </div>
-          <div className="flex gap-3 items-center">
-            <Button
-              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;
diff --git a/src/pages/transfer/blocks/TransactionFeeDialog.tsx b/src/pages/transfer/blocks/TransactionFeeDialog.tsx
deleted file mode 100644
index cccf165..0000000
--- a/src/pages/transfer/blocks/TransactionFeeDialog.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import Typography from '@mui/material/Typography';
-import { toast } from 'sonner';
-import { apiConfig } from '@/config/api.config';
-import { useCallApi } from '@/hooks';
-import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
-import { get } from 'http';
-import { getAuth } from '@/auth';
-import { useDataGrid } from '@/components';
-import { set } from 'date-fns';
-import { doSaveLogActivity } from '@/actions/GlobalActions';
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem
-} from '@/components/ui/select';
-
-interface TransactionFeeDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onSubmit: (data: TransactionFeeForm) => void;
-}
-
-interface TransactionFeeForm {
-  name: string;
-  description: string;
-  minimum_amount: number;
-  maximum_amount: number;
-  period_start: string;
-  period_end: string;
-  deduct_amount: number;
-  deduct_percentage: number;
-  priority: string;
-  status: string;
-  transactionTypeId: string;
-  created_by: string;
-  created_at: string;
-}
-
-const API_URL = apiConfig.service_dashboard;
-
-const TransactionFeeDialog: React.FC<TransactionFeeDialogProps> = ({ open, onClose, onSubmit }) => {
-  const { showAddDialog, handleAddDialog } = useManageTransferTypeContext();
-  const parsedUser = getAuth()?.user;
-  const [formField, setFormField] = useState<TransactionFeeForm>({
-    name: '',
-    description: '',
-    minimum_amount: 0,
-    maximum_amount: 0,
-    period_start: '',
-    period_end: '',
-    deduct_amount: 0,
-    deduct_percentage: 0,
-    priority: '',
-    status: '',
-    transactionTypeId: '',
-    created_by: '',
-    created_at: ''
-  });
-  const { PostData, PutData } = useCallApi();
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormField((prev) => ({
-      ...prev,
-      [name]: value
-    }));
-  };
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const { reload } = useDataGrid();
-  const resetForm = () => {
-    setFormField(formField);
-  };
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-  useEffect(() => {
-    const created_time = new Date();
-    const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
-
-    if (showAddDialog) {
-      setFormField({
-        ...formField,
-        created_by: parsedUser?.username,
-        created_at: formattedTime
-      });
-    }
-  }, [showAddDialog]);
-  const doCreateTransactionFee = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      console.log(formField);
-      const response = await PostData(`${API_URL}/transactionfees/create`, formField);
-
-      if (response?.status) {
-        setAlert({ show: false, message: '' });
-        handleAddDialog(false);
-        toast.success('Success Create Transfer Type');
-        reload();
-        resetForm();
-
-        const createActivity = {
-          module: 'Manage Transfer Fee',
-          description: `Create New Transfer Fee => ${formField.name}`,
-          action: 'C'
-        };
-
-        doSaveLogActivity(createActivity);
-      } else {
-        setAlert({ show: true, message: response?.message || 'Failed to create transfer fee' });
-      }
-
-      onSubmit(formField);
-    },
-    [formField]
-  );
-
-  return (
-    <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="max-w-lg p-5">
-        <DialogHeader>
-          <DialogTitle>Transaction Fee</DialogTitle>
-          <DialogDescription></DialogDescription>
-        </DialogHeader>
-        <DialogBody>
-          <form onSubmit={doCreateTransactionFee}>
-            <div className="grid gap-4">
-              <div className="w-full flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-700">Name</label>
-                <Input name="name" value={formField.name} onChange={handleChange} required />
-              </div>
-
-              <div className="w-full flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-700">Description</label>
-                <Input
-                  name="description"
-                  value={formField.description}
-                  onChange={handleChange}
-                  required
-                />
-              </div>
-
-              <div className="w-full flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-700">Minimum Amount</label>
-                <Input
-                  name="minimum_amount"
-                  type="number"
-                  value={formField.minimum_amount}
-                  onChange={handleChange}
-                  required
-                />
-              </div>
-
-              <div className="w-full flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-700">Maximum Amount</label>
-                <Input
-                  name="maximum_amount"
-                  type="number"
-                  value={formField.maximum_amount}
-                  onChange={handleChange}
-                  required
-                />
-              </div>
-
-              <div className="w-full flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-700">Start</label>
-                <Input
-                  name="period_start"
-                  type="date"
-                  value={formField.period_start}
-                  onChange={handleChange}
-                  required
-                />
-              </div>
-
-              <div className="w-full flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-700">End</label>
-                <Input
-                  name="period_end"
-                  type="date"
-                  value={formField.period_end}
-                  onChange={handleChange}
-                  required
-                />
-              </div>
-
-              <div className="w-full flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-700">Deduct Amount</label>
-                <Input
-                  name="deduct_amount"
-                  type="number"
-                  value={formField.deduct_amount}
-                  onChange={handleChange}
-                  required
-                />
-              </div>
-
-              <div className="w-full flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-700">Deduct Percentage</label>
-                <Input
-                  name="deduct_percentage"
-                  type="number"
-                  value={formField.deduct_percentage}
-                  onChange={handleChange}
-                  required
-                />
-              </div>
-
-              <div className="w-full flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-700">Status</label>
-                <Select
-                  value={formField.status}
-                  onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
-                  required
-                >
-                  <SelectTrigger className="border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                    <SelectValue placeholder="Select" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="Y">Y</SelectItem>
-                    <SelectItem value="N">N</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="w-full flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-700">Priority</label>
-                <Input
-                  name="priority"
-                  value={formField.priority}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    if (/^\d*$/.test(value)) {
-                      handleChange(e);
-                    }
-                  }}
-                  required
-                  type="text"
-                  inputMode="numeric"
-                  placeholder="Masukkan angka"
-                />
-              </div>
-              <div className="w-full flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-700">Transaction Type ID</label>
-                <Input
-                  name="transactionTypeId"
-                  value={formField.transactionTypeId}
-                  onChange={handleChange}
-                  required
-                />
-              </div>
-
-              <div className="flex justify-end mt-4 gap-3">
-                <Button variant="outline" type="button" onClick={onClose}>
-                  Cancel
-                </Button>
-                <Button variant="default" type="submit">
-                  Submit
-                </Button>
-              </div>
-            </div>
-          </form>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default TransactionFeeDialog;
diff --git a/src/pages/transfer/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/hooks/ManageTransferTypeContext.tsx
deleted file mode 100644
index 5a3d5d3..0000000
--- a/src/pages/transfer/hooks/ManageTransferTypeContext.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import { DataGridColumnHeader, DataGridProvider } from '@/components';
-import { Toaster } from '@/components/ui/sonner';
-import { apiConfig } from '@/config/api.config';
-import { useCallApi } from '@/hooks';
-import { ColumnDef } from '@tanstack/react-table';
-import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
-import ListToolbar from '../blocks/ListToolBar';
-
-interface SelectedUser {
-  id: string;
-  name: string;
-  internal_name: string;
-  description: string;
-}
-
-interface AccountProps {
-  id: string;
-  name: string;
-}
-
-const accounts: string[] = [
-  'eMoney Account',
-  'Topup Account',
-  'Merchant Account',
-  'Deposit Account',
-  'Cash out/in'
-];
-
-interface ContextProps {
-  showEditDialog: boolean;
-  handleEditDialog: (show: boolean, selected_user: string | null) => void;
-  showAddDialog: boolean;
-  handleAddDialog: (show: boolean) => void;
-  selectedUser: string | null;
-  accounts: AccountProps[];
-}
-
-const initialProps: ContextProps = {
-  showEditDialog: false,
-  handleEditDialog: () => {},
-  showAddDialog: false,
-  handleAddDialog: () => {},
-  selectedUser: null,
-  accounts: []
-};
-
-const ManageTransferTypeContext = createContext<ContextProps>(initialProps);
-const API_URL = apiConfig.service_dashboard;
-
-const ManageTransferTypeContextProvider = ({ children }: { children: React.ReactNode }) => {
-  const [showEditDialog, setShowEditDialog] = useState(false);
-  const [showAddDialog, setShowAddDialog] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<string | null>(null);
-  const [accounts, setAccount] = useState<AccountProps[]>([]);
-  const { GetData } = useCallApi();
-
-  useEffect(() => {
-    setAccount([
-      { id: '1', name: 'eMoney Account' },
-      { id: '2', name: 'Topup Account' },
-      { id: '3', name: 'Merchant Account' },
-      { id: '4', name: 'Deposit Account' },
-      { id: '5', name: 'Cash in/out Account' }
-    ]);
-  }, []);
-
-  const handleEditDialog = useCallback((show: boolean, selected_user: string | null) => {
-    setSelectedUser(show ? selected_user : null);
-    setShowEditDialog(show);
-  }, []);
-
-  const handleAddDialog = useCallback((show: boolean) => {
-    setShowAddDialog(show);
-  }, []);
-
-  const columns = useMemo<ColumnDef<any>[]>(
-    () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.name,
-        id: 'name',
-        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.internal_name,
-        id: 'internal_name',
-        header: ({ column }) => <DataGridColumnHeader title="Internal Name" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.description,
-        id: 'description',
-        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
-      {
-        id: 'actions',
-        enableSorting: false,
-        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
-        cell: ({ row }) => {
-          return (
-            <>
-              <button
-                className="btn btn-sm btn-primary mr-2"
-                onClick={() => handleEditDialog(true, row.original.id)}
-              >
-                Edit
-              </button>
-              <button className="btn btn-sm btn-primary" onClick={() => handleAddDialog(true)}>
-                Add
-              </button>
-            </>
-          );
-        },
-        meta: {
-          headerClassName: 'w-[100px]',
-          cellClassName: 'text-center'
-        }
-      }
-    ],
-    [handleAddDialog, handleEditDialog]
-  );
-
-  return (
-    <div>
-      <div className="container mx-auto py-5">
-        <h1>Manage Access Type</h1>
-      </div>
-      <ManageTransferTypeContext.Provider
-        value={{
-          showEditDialog,
-          handleEditDialog,
-          showAddDialog,
-          handleAddDialog,
-          selectedUser,
-          accounts
-        }}
-      >
-        <Toaster expand visibleToasts={9} duration={3000} />
-        <DataGridProvider
-          columns={columns}
-          pagination={{ size: 10 }}
-          layout={{ card: true }}
-          toolbar={<ListToolbar />}
-          sorting={[{ id: 'id', desc: true }]}
-          serverSide={true}
-        >
-          {children}
-        </DataGridProvider>
-      </ManageTransferTypeContext.Provider>
-    </div>
-  );
-};
-
-export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
-export type { SelectedUser };
diff --git a/src/pages/transfer/hooks/useManageTransferTypeContext.tsx b/src/pages/transfer/hooks/useManageTransferTypeContext.tsx
deleted file mode 100644
index b726a7c..0000000
--- a/src/pages/transfer/hooks/useManageTransferTypeContext.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { ManageTransferTypeContext } from './ManageTransferTypeContext';
-
-const useManageTransferTypeContext = () => {
-  const context = useContext(ManageTransferTypeContext);
-
-  if (!context) throw new Error('useManageAccessTypeContext must be used within AuthProvider');
-
-  return context;
-};
-
-export { useManageTransferTypeContext };
diff --git a/src/routing/AppRoutingSetup.tsx b/src/routing/AppRoutingSetup.tsx
index 971fbaa..1cf83ae 100644
--- a/src/routing/AppRoutingSetup.tsx
+++ b/src/routing/AppRoutingSetup.tsx
@@ -24,7 +24,7 @@ import ManageMenu from '@/pages/menu/manage-menu/ManageMenu';
 import Welcome from '@/pages/menu/welcome/Welcome';
 import Inbox from '@/pages/message/Inbox';
 import ManageWebServices from '@/pages/webservice/ManageWebServices';
-import TransferType from '@/pages/transfer/TransferType';
+import TransferType from '@/pages/transfer/transfertype/TransferType';
 import MasterData from '@/pages/master/MasterData';
 import PostoAdmsMaster from '@/pages/master/postoadms/PostoAdmsMaster';
 import SucosMaster from '@/pages/master/sucos/SucosMaster';

From 7a62945fd67a495d3e0b2b6fe18d4eb04d45146c Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 24 Mar 2025 10:46:46 +0700
Subject: [PATCH 06/53] +package.json

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 29c3f8b..41cfe62 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "react-inlinesvg": "^4.1.4",
     "react-intl": "^6.8.7",
     "react-leaflet": "^4.2.1",
+    "react-number-format": "^5.4.3",
     "react-query": "^3.39.3",
     "react-router": "^6.28.0",
     "react-router-dom": "^6.28.0",

From 6fc67b0b2da959e9ce597dc1c977d153bed1d3d2 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 24 Mar 2025 11:37:38 +0700
Subject: [PATCH 07/53] delete wrna background + h1 manage transfer type

---
 src/pages/transfer/transfertype/TransferType.tsx          | 4 ++--
 .../transfertype/hooks/ManageTransferTypeContext.tsx      | 8 +-------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/pages/transfer/transfertype/TransferType.tsx b/src/pages/transfer/transfertype/TransferType.tsx
index 01a6da5..daa87c6 100644
--- a/src/pages/transfer/transfertype/TransferType.tsx
+++ b/src/pages/transfer/transfertype/TransferType.tsx
@@ -13,7 +13,7 @@ const TransferType = () => {
   return (
     <ManageTransferTypeContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Access Type</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Transaction Type</h1>
         <Breadcrumbs sx={{ mb: 2 }}>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>
@@ -24,7 +24,7 @@ const TransferType = () => {
           </Link>
 
           <Link underline="none" color="inherit">
-            <span className="text-sm">Manage Access Type</span>
+            <span className="text-sm">Manage Transfer Type</span>
           </Link>
         </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
index 5759d29..569d2a2 100644
--- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
+++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
@@ -202,17 +202,11 @@
           order_direction: sorting[0].desc ? 'ASC' : 'DESC',
           filter: JSON.stringify(filter)
         });
-        console.log("bismillah:",response?.data.list)
-        // setTransferType(response?.data.list);
         return { data: response?.data.list, totalCount: response?.data.total_count };
-        // console.log("test:",response)
     };
 
   return (
-    <div className="min-h-screen bg-gray-100">
-      <div className="container mx-auto py-6">
-        <h1 className="text-2xl font-semibold text-gray-900 ml-5 mb-4">Manage Transaction Type</h1>
-      </div>
+    <div className="min-h-screen">
   
       <ManageTransferTypeContext.Provider
         value={{

From 3f995cfa38bdf91fed8621f63ca4814c254b0e59 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 24 Mar 2025 11:45:22 +0700
Subject: [PATCH 08/53] fix search filter

---
 src/pages/menu/manage-menu/blocks/ListToolbar.tsx       | 4 ++--
 src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
index 784c705..b0364d8 100644
--- a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
+++ b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
@@ -16,8 +16,8 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Menu"
-                value={(table.getColumn('subMenu')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('subMenu')?.setFilterValue(event.target.value)}
+                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />
             </label>
             <DefaultTooltip title={'Filter'} placement={'top'}>
diff --git a/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
index ab46533..fcdf17c 100644
--- a/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
+++ b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
@@ -118,7 +118,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       },
       {
         accessorFn: (row) => row.name,
-        id: 'subMenu',
+        id: 'name',
         header: ({ column }) => <DataGridColumnHeader title="Sub Menu" column={column} />,
         enableSorting: false,
         enableHiding: false,
@@ -210,7 +210,8 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
         page: page + 1,
         with_deleted: false,
         order_field: sorting[0].id,
-        order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        order_direction: sorting[0].desc ? 'DESC' : 'ASC',
+        filter: JSON.stringify(filter)
       });
 
       if (!response?.data.list) return { data: [], totalCount: 0 };
@@ -223,7 +224,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
 
       console.log(response.data);
       setMenus(transformedData);
-      return { data: transformedData, totalCount: response.data.total_count };
+      return { data: transformedData, totalCount: total_count };
     } catch (error) {
       console.error('Error fetching Menus', error);
       return { data: [], totalCount: 0 };
@@ -250,7 +251,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
 
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 30 }}
+        pagination={{ size: 50, page: 0, more: false }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

From c96ab19450d285c9f6d0ca88b7fe1f19691f0fe5 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 24 Mar 2025 15:12:36 +0700
Subject: [PATCH 09/53] fix edit form fetch transaction type id

---
 src/pages/master/provider/blocks/EditDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/master/provider/blocks/EditDialog.tsx b/src/pages/master/provider/blocks/EditDialog.tsx
index 93b487e..186698f 100644
--- a/src/pages/master/provider/blocks/EditDialog.tsx
+++ b/src/pages/master/provider/blocks/EditDialog.tsx
@@ -136,7 +136,7 @@ const EditDialog = () => {
         description: response?.data.description,
         type: response?.data.type,
         status: response?.data.status,
-        transactionTypeId: response?.data.transactionTypeId,
+        transactionTypeId: response?.data.transaction_type.id,
         agent: response?.data.agent
       }));
     }

From 2960ed2b8ec90cd7add221d13f332cce6bd1c40e Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 24 Mar 2025 15:27:02 +0700
Subject: [PATCH 10/53] add resetform + change customer title

---
 .../transfer/transferfee/blocks/AddDialog.tsx | 16 ++++-----
 .../transferfee/blocks/DeleteDialog.tsx       |  2 --
 .../transferfee/blocks/EditDialog.tsx         | 33 ++++++++++++-------
 .../hooks/ManageTransferFeeContext.tsx        |  3 --
 .../transfertype/blocks/AddDialog.tsx         | 20 +++++------
 .../transfertype/blocks/DeleteDialog.tsx      |  1 -
 .../transfertype/blocks/EditDialog.tsx        | 32 ++++++++++++------
 7 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/src/pages/transfer/transferfee/blocks/AddDialog.tsx b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
index dc7ecd7..da039ee 100644
--- a/src/pages/transfer/transferfee/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
@@ -109,7 +109,6 @@ const AddFeeDialog = () => {
       status: formField.status,
       status_include: formField.status_include
     };
-    console.log(payload);
   };
   useEffect(() => {
     const created_time = new Date();
@@ -137,8 +136,6 @@ const AddFeeDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-        console.log('TRANSACTION TYPE LIST: ', response?.data?.list);
-
         setTransactionTypes(response?.data.list || []);
       } catch (error) {
         console.error('Error fetching customer', error);
@@ -151,7 +148,6 @@ const AddFeeDialog = () => {
   const doCreateTransferType = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      console.log(formField);
       for (const key in formField) {
         if (
           formField[key as keyof typeof formField] === '' ||
@@ -167,7 +163,6 @@ const AddFeeDialog = () => {
         ...formField,
         priority: formField.priority ? 'Y' : 'N'
       });
-      // console.log("coba coba:",response);
 
       if (response?.status) {
         toast.success('Success Create Transfer Fee');
@@ -177,7 +172,6 @@ const AddFeeDialog = () => {
       } else {
         setAlert({ show: true, message: response?.message || 'Failed to create transfer fee' });
       }
-      console.log(response);
     },
     [formField]
   );
@@ -190,7 +184,7 @@ const AddFeeDialog = () => {
         <DialogHeader className="p-5 border-0">
           <div className="flex items-center justify-between flex-wrap grow">
             <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">AddTransfer Fee</h1>
+              <h1 className="text-xl font-semibold leading-none text-gray-900">Add Transfer Fee</h1>
             </div>
             <div
               className="cursor-pointer hover:opacity-100 opacity-50"
@@ -392,7 +386,13 @@ const AddFeeDialog = () => {
                   </Select>
                 </div>
                 <div className="flex justify-end pt-2.5 gap-5">
-                  <Button variant={'outline'} type="reset">
+                  <Button
+                    variant={'outline'}
+                    type="reset"
+                    onClick={() => {
+                      resetForm();
+                    }}
+                  >
                     Reset
                   </Button>
                   <Button variant={'default'} type="submit" disabled={isSubmitting}>
diff --git a/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx b/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx
index bf61c83..02faee8 100644
--- a/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx
@@ -26,7 +26,6 @@ const DeleteDialog = () => {
   });
 
   const doDeleteTransferFee = useCallback(async () => {
-    console.log("Selected Transfer Fee:", selectedTransferFee, "Type:", typeof selectedTransferFee);
     const response = await DeleteData(`${API_URL}/transactionfees/delete/${selectedTransferFee}/${enforce}`, {
       id: selectedTransferFee
     });
@@ -42,7 +41,6 @@ const DeleteDialog = () => {
     }
   }, [selectedTransferFee, enforce]);
 
-  // console.log(selectedTransferFee);
 
   return (
     <Dialog open={showDeleteFeeDialog} onOpenChange={(open) => handleDeleteFeeDialog(open, null)}>
diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
index 89ee86c..98b522b 100644
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -105,7 +105,6 @@ const EditFeeDialog = () => {
       } else {
         setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
       }
-      console.log(formField);
     },
     [formField, selectedTransferFee]
   );
@@ -145,10 +144,6 @@ const EditFeeDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-
-        // 🟡 Log daftar pelanggan saja (kalau respons pakai struktur {data: {list: [...]}})
-        console.log('CUSTOMER LIST: ', response?.data?.list);
-
         setCustomers(response?.data.list || []);
       } catch (error) {
         console.error('Error fetching customer', error);
@@ -170,10 +165,6 @@ const EditFeeDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-
-        // 🟡 Log daftar pelanggan saja (kalau respons pakai struktur {data: {list: [...]}})
-        console.log('TRANSACTION TYPE LIST: ', response?.data?.list);
-
         setTransactionTypes(response?.data.list || []);
       } catch (error) {
         console.error('Error fetching customer', error);
@@ -185,7 +176,6 @@ const EditFeeDialog = () => {
 
   const fetchTransactionFee = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, { id });
-    // console.log("API Response:", response);
 
     if (response?.status) {
       setFormField((prev) => ({
@@ -230,6 +220,24 @@ const EditFeeDialog = () => {
       fetchTransactionFee(selectedTransferFee);
     }
   }, [selectedTransferFee]);
+  const resetForm = () => {
+    setFormField({
+      name: '',
+      description: '',
+      minimum_amount: 0,
+      maximum_amount: 0,
+      period_start: '',
+      period_end: '',
+      deduct_amount: 0,
+      deduct_percentage: 0,
+      priority: '',
+      status: '',
+      status_include: '',
+      transaction_type: '',
+      updated_by: '',
+      updated_at: ''
+    });
+  };
 
   return (
     <Dialog open={showEditFeeDialog} onOpenChange={(open) => handleEditFeeDialog(open, null)}>
@@ -479,7 +487,10 @@ const EditFeeDialog = () => {
   </Select>
 </div> */}
                   <div className="flex justify-end pt-2.5 gap-5">
-                    <Button variant={'outline'} type="reset">
+                    <Button variant={'outline'} type="reset" 
+                                        onClick={() => {
+                                          resetForm();
+                                        }}>
                       Reset
                     </Button>
                     <Button variant={'default'} type="submit" disabled={isSubmitting}>
diff --git a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
index 67d08ba..bea23af 100644
--- a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
+++ b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
@@ -68,9 +68,6 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
       order_direction: sorting[0].desc ? 'ASC' : 'DESC',
       filter: JSON.stringify(filter)
     });
-    console.log('hasilnya', response?.data.list);
-    console.log('transactiontype', response?.data);
-
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
   const columns = useMemo<ColumnDef<any>[]>(
diff --git a/src/pages/transfer/transfertype/blocks/AddDialog.tsx b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
index d0afb04..44aac3a 100644
--- a/src/pages/transfer/transfertype/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
@@ -127,8 +127,6 @@ const AddDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-        console.log('CUSTOMER LIST: ', response?.data?.list);
-
         setCustomers(response?.data.list || []);
       } catch (error) {
         console.error('Error fetching customer', error);
@@ -155,7 +153,6 @@ const AddDialog = () => {
     } else {
       setWallets([]);
     }
-    console.log('WALLET LIST: ', response?.data?.list);
   }, []);
 
   useEffect(() => {
@@ -166,7 +163,6 @@ const AddDialog = () => {
   const doCreateTransferType = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      console.log(formField);
       for (const key in formField) {
         if (
           formField[key as keyof typeof formField] === '' ||
@@ -187,8 +183,6 @@ const AddDialog = () => {
         toast.success('Success Create Transfer Type');
         reload();
         resetForm();
-
-        console.log('Berhasil nih, isinya gini:', formField);
       } else {
         setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
       }
@@ -205,7 +199,7 @@ const AddDialog = () => {
           <DialogDescription></DialogDescription>
           <div className="flex items-center justify-between flex-wrap grow">
             <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">Transaction Type</h1>
+              <h1 className="text-xl font-semibold leading-none text-gray-900">Addd Transaction Type</h1>
               <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
             </div>
             <div
@@ -401,7 +395,7 @@ const AddDialog = () => {
                 </div>
                 <div className="w-full">
                   <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">Customer Fee Destination</label>
+                    <label className="form-label max-w-56">Customer</label>
                     <div className="grow">
                       <Select
                         value={formField.customer_fee_destination}
@@ -410,7 +404,7 @@ const AddDialog = () => {
                         }
                       >
                         <SelectTrigger>
-                          <SelectValue placeholder="Select Wallet" />
+                          <SelectValue placeholder="Select Customer" />
                         </SelectTrigger>
                         <SelectContent>
                           {customers.map((customer, idx) => (
@@ -471,7 +465,13 @@ const AddDialog = () => {
                 </div>
 
                 <div className="flex justify-end pt-2.5 gap-5">
-                  <Button variant={'outline'} type="reset">
+                  <Button
+                    variant={'outline'}
+                    type="reset"
+                    onClick={() => {
+                      resetForm();
+                    }}
+                  >
                     Reset
                   </Button>
                   <Button variant={'default'} type="submit" disabled={isSubmitting}>
diff --git a/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx b/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx
index 52f9e25..4adfdc8 100644
--- a/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx
@@ -47,7 +47,6 @@ const DeleteDialog = () => {
     }
   }, [selectedTransferType, enforce, DeleteData, handleDeleteDialog, reload]);
   
-  // console.log(selectedTransferType);
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
diff --git a/src/pages/transfer/transfertype/blocks/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
index 7a27df0..3d5f025 100644
--- a/src/pages/transfer/transfertype/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
@@ -72,7 +72,21 @@ const EditDialog = () => {
     message: ''
   });
   const resetForm = () => {
-    setFormField(formField);
+    setFormField({
+      name: '',
+      description: '',
+      wallet_origin: '',
+      wallet_destination: '',
+      wallet_fee_destination: '',
+      customer_fee_destination: '',
+      minimum_amount: 0,
+      maximum_amount: 0,
+      max_transaction_per_day: 0,
+      status_approval: '',
+      status: '',
+      updated_by: '',
+      updated_at: ''
+    });
   };
   const [formField, setFormField] = useState({
     name: '',
@@ -115,7 +129,6 @@ const EditDialog = () => {
       } else {
         setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
       }
-      // console.log(formField);
     },
     [formField, selectedTransferType]
   );
@@ -130,7 +143,6 @@ const EditDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-        // console.log('CUSTOMER LIST: ', response?.data?.list);
 
         setCustomers(response?.data.list || []);
       } catch (error) {
@@ -165,11 +177,9 @@ const EditDialog = () => {
 
   const fetchTransactionType = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
-    // console.log("API Response:", response);
 
     if (response?.status) {
       const data = response.data;
-      console.log('Fetched customer_fee_destination:', response.data);
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
@@ -209,8 +219,7 @@ const EditDialog = () => {
       fetchTransactionType(selectedTransferType);
     }
   }, [selectedTransferType]);
-  // console.log('Form Field Data: ', formField);
-  // console.log('customer list:', customers);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@@ -417,7 +426,7 @@ const EditDialog = () => {
                 </div>
                 <div className="w-full">
                   <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">Customer Fee Destination</label>
+                    <label className="form-label max-w-56">Select Customer</label>
                     <div className="grow">
                       <Select
                         value={formField.customer_fee_destination}
@@ -426,7 +435,7 @@ const EditDialog = () => {
                         }
                       >
                         <SelectTrigger>
-                          <SelectValue placeholder="Select Wallet" />
+                          <SelectValue placeholder="Select" />
                         </SelectTrigger>
                         <SelectContent>
                           {customers.map((customer, idx) => (
@@ -497,7 +506,10 @@ const EditDialog = () => {
                     Transaction Fee Form
                   </Button> */}
 
-                  <Button variant={'outline'} type="reset">
+                  <Button variant={'outline'} type="reset" 
+                   onClick={() => {
+                    resetForm();
+                  }}>
                     Reset
                   </Button>
                   <Button variant={'default'} type="submit" disabled={isSubmitting}>

From 8160529dcb238c71da517bfc91e9b24b86a9fd69 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 24 Mar 2025 15:33:01 +0700
Subject: [PATCH 11/53] fix customer

---
 .../transferfee/blocks/EditDialog.tsx         |  11 +-
 .../transfertype/blocks/AddDialog.tsx         |   4 +-
 .../transfertype/blocks/EditDialog.tsx        |  11 +-
 .../hooks/ManageTransferTypeContext.tsx       | 210 +++++++++---------
 4 files changed, 128 insertions(+), 108 deletions(-)

diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
index 98b522b..87ee112 100644
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -487,10 +487,13 @@ const EditFeeDialog = () => {
   </Select>
 </div> */}
                   <div className="flex justify-end pt-2.5 gap-5">
-                    <Button variant={'outline'} type="reset" 
-                                        onClick={() => {
-                                          resetForm();
-                                        }}>
+                    <Button
+                      variant={'outline'}
+                      type="reset"
+                      onClick={() => {
+                        resetForm();
+                      }}
+                    >
                       Reset
                     </Button>
                     <Button variant={'default'} type="submit" disabled={isSubmitting}>
diff --git a/src/pages/transfer/transfertype/blocks/AddDialog.tsx b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
index 44aac3a..95b448d 100644
--- a/src/pages/transfer/transfertype/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
@@ -199,7 +199,9 @@ const AddDialog = () => {
           <DialogDescription></DialogDescription>
           <div className="flex items-center justify-between flex-wrap grow">
             <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">Addd Transaction Type</h1>
+              <h1 className="text-xl font-semibold leading-none text-gray-900">
+                Addd Transaction Type
+              </h1>
               <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
             </div>
             <div
diff --git a/src/pages/transfer/transfertype/blocks/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
index 3d5f025..a4d94d4 100644
--- a/src/pages/transfer/transfertype/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
@@ -506,10 +506,13 @@ const EditDialog = () => {
                     Transaction Fee Form
                   </Button> */}
 
-                  <Button variant={'outline'} type="reset" 
-                   onClick={() => {
-                    resetForm();
-                  }}>
+                  <Button
+                    variant={'outline'}
+                    type="reset"
+                    onClick={() => {
+                      resetForm();
+                    }}
+                  >
                     Reset
                   </Button>
                   <Button variant={'default'} type="submit" disabled={isSubmitting}>
diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
index 569d2a2..3e5c0a7 100644
--- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
+++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
@@ -1,87 +1,86 @@
-  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 { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import ListToolbar from '../blocks/ListToolBar';
 
+interface AccountProps {
+  id: string;
+  name: string;
+}
 
-  interface AccountProps {
-    id: string;
-    name: string;
-  }
+interface TransferType {
+  id: string;
+  name: string;
+  minimum_amount: number;
+  maximum_amount: number;
+  max_transaction_per_day: number;
+  walletOriginId: string;
+  walletDestinationId: string;
+  status: string;
+}
 
-  interface TransferType {
-    id: string;
-    name: string;
-    minimum_amount: number;
-    maximum_amount: number;
-    max_transaction_per_day: number;
-    walletOriginId: string;
-    walletDestinationId: string;
-    status: string;
-  }
+interface ContextProps {
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_user: string | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  showDeleteDialog: boolean;
+  handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
+  selectedTransferType: string | null;
+  transferType: string | null;
+  accounts: AccountProps[];
+}
 
-  interface ContextProps {
-    showEditDialog: boolean;
-    handleEditDialog: (show: boolean, selected_user: string | null) => void;
-    showAddDialog: boolean;
-    handleAddDialog: (show: boolean) => void;
-    showDeleteDialog: boolean;
-    handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
-    selectedTransferType: string | null;
-    transferType: string|null;
-    accounts: AccountProps[];
-  }
+const initialProps: ContextProps = {
+  showEditDialog: false,
+  handleEditDialog: () => {},
+  showAddDialog: false,
+  handleAddDialog: () => {},
+  showDeleteDialog: false,
+  handleDeleteDialog: () => {},
+  selectedTransferType: null,
+  accounts: [],
+  transferType: null
+};
 
-  const initialProps: ContextProps = {
-    showEditDialog: false,
-    handleEditDialog: () => {},
-    showAddDialog: false,
-    handleAddDialog: () => {},
-    showDeleteDialog: false,
-    handleDeleteDialog: () => {},
-    selectedTransferType: null,
-    accounts: [],
-    transferType: null
-  };
+const ManageTransferTypeContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_transaction;
 
-  const ManageTransferTypeContext = createContext<ContextProps>(initialProps);
-  const API_URL = apiConfig.service_transaction;
+const ManageTransferTypeContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
+  const [accounts, setAccount] = useState<AccountProps[]>([]);
+  const { GetData } = useCallApi();
+  const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
+  const [transferType, setTransferType] = useState<string | null>(null);
 
-  const ManageTransferTypeContextProvider = ({ children }: { children: React.ReactNode }) => {
-    const [showEditDialog, setShowEditDialog] = useState(false);
-    const [showAddDialog, setShowAddDialog] = useState(false);
-    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-    const [selectedUser, setSelectedUser] = useState<string | null>(null);
-    const [accounts, setAccount] = useState<AccountProps[]>([]);
-    const { GetData } = useCallApi();
-    const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
-    const [transferType, setTransferType] = useState<string | null>(null);
+  const handleEditDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
+    setSelectedTransferType(show ? selected_transfertype : null);
+    setShowEditDialog(show);
+  }, []);
 
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
 
-    const handleEditDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
-      setSelectedTransferType(show ? selected_transfertype : null);
-      setShowEditDialog(show);
-    }, []);
-    
-    const handleAddDialog = useCallback((show: boolean) => {
-      setShowAddDialog(show);
-    }, []);
+  const handleDeleteDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
+    setShowDeleteDialog(show);
+    setSelectedTransferType(show ? selected_transfertype : null);
+  }, []);
 
-    const handleDeleteDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
-      setShowDeleteDialog(show);
-      setSelectedTransferType(show ? selected_transfertype : null);
-    }, []);
-
- const columns = useMemo<ColumnDef<any>[]>(
+  const columns = useMemo<ColumnDef<any>[]>(
     () => [
-
       {
         accessorFn: (row) => row.name,
         id: 'name',
-        header: ({ column }) => <DataGridColumnHeader title="Transaction Type Name" column={column} />,
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Transaction Type Name" column={column} />
+        ),
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
@@ -121,7 +120,9 @@
       {
         accessorFn: (row) => row.max_transaction_per_day,
         id: 'max_transaction_per_day',
-        header: ({ column }) => <DataGridColumnHeader title="Max Transaction Per Day" column={column} />,
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Max Transaction Per Day" column={column} />
+        ),
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
@@ -135,9 +136,11 @@
         meta: { headerClassName: 'w-[250px]' }
       },
       {
-        accessorFn: (row) => row.wallet_fee_destination.name ,
+        accessorFn: (row) => row.wallet_fee_destination.name,
         id: 'wallet_fee_destination',
-        header: ({ column }) => <DataGridColumnHeader title="Wallet Fee Destination" column={column} />,
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Wallet Fee Destination" column={column} />
+        ),
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
@@ -145,7 +148,9 @@
       {
         accessorFn: (row) => row.customer_fee_destination?.username || 'N/A',
         id: 'customer_fee_destination',
-        header: ({ column }) => <DataGridColumnHeader title="Customer Fee Destination" column={column} />,
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Customer Fee Destination" column={column} />
+        ),
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
@@ -165,8 +170,7 @@
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[150px]' }
-      }
-,      
+      },
       {
         id: 'actions',
         header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
@@ -176,10 +180,16 @@
           const row = data.row.original;
           return (
             <>
-              <button className="btn btn-sm btn-icon btn-clear btn-light" onClick={() => handleEditDialog(true, row.id)}>
+              <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)}>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDeleteDialog(true, row.id)}
+              >
                 <KeenIcon icon="trash" />
               </button>
             </>
@@ -190,24 +200,27 @@
     ],
     [handleEditDialog, handleDeleteDialog]
   );
-    const doGetTransferTypeListData = async (page: number, limit: number, sorting: any, filter: any) => {
-    
-        sorting = sorting.length == 0 ? [{ id: 'id', desc: false }] : sorting;
-        filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
-        const response = await GetData(`${API_URL}/transactiontype/list`, {
-          limit: limit,
-          page: page + 1,
-          with_deleted: false,
-          order_field: sorting[0].id,
-          order_direction: sorting[0].desc ? 'ASC' : 'DESC',
-          filter: JSON.stringify(filter)
-        });
-        return { data: response?.data.list, totalCount: response?.data.total_count };
-    };
+  const doGetTransferTypeListData = async (
+    page: number,
+    limit: number,
+    sorting: any,
+    filter: any
+  ) => {
+    sorting = sorting.length == 0 ? [{ id: 'id', desc: false }] : sorting;
+    filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+    const response = await GetData(`${API_URL}/transactiontype/list`, {
+      limit: limit,
+      page: page + 1,
+      with_deleted: false,
+      order_field: sorting[0].id,
+      order_direction: sorting[0].desc ? 'ASC' : 'DESC',
+      filter: JSON.stringify(filter)
+    });
+    return { data: response?.data.list, totalCount: response?.data.total_count };
+  };
 
   return (
     <div className="min-h-screen">
-  
       <ManageTransferTypeContext.Provider
         value={{
           showEditDialog,
@@ -218,11 +231,11 @@
           handleDeleteDialog,
           selectedTransferType,
           accounts,
-          transferType,
+          transferType
         }}
       >
         <Toaster expand visibleToasts={9} duration={3000} />
-  
+
         <div className="px-4">
           <DataGridProvider
             columns={columns}
@@ -241,8 +254,7 @@
       </ManageTransferTypeContext.Provider>
     </div>
   );
-  
-  };
+};
 
-  export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
-  export type { TransferType };
+export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
+export type { TransferType };

From 2c9c11edf6d48e2f7b23b0551ec26d7baa99d99b Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 24 Mar 2025 15:34:24 +0700
Subject: [PATCH 12/53] fix clear history and hide filter icon

---
 .../menu/manage-menu/blocks/ListToolbar.tsx      |  6 +++---
 .../user/manage-user/blocks/EditDialog.tsx       | 16 ++++++++++++++--
 .../user/manage-user/blocks/ListToolBar.tsx      |  6 +++---
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
index b0364d8..0e36ca9 100644
--- a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
+++ b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
@@ -20,17 +20,17 @@ const ListToolbar = () => {
                 onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />
             </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
+            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
                 // disabled={isLoading}
                 // onClick={handleFilterData}
               >
-                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
+                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
                 <KeenIcon icon="filter" />
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button
diff --git a/src/pages/settings/user/manage-user/blocks/EditDialog.tsx b/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
index 1ae9df1..c5e550c 100644
--- a/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
+++ b/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
@@ -35,16 +35,22 @@ const EditDialog = () => {
     show: false,
     message: ''
   });
-  const [formField, setFormField] = useState({
+  const initialState = {
     name: '',
     username: '',
     email: '',
     id_role: '',
     id_role_old: '',
     status: ''
-  });
+  };
+  const [formField, setFormField] = useState(initialState);
 
   /* actions */
+  const doResetForm = () => {
+    setAlert({ show: false, message: '' });
+    setFormField(initialState);
+  };
+
   const doUpdateUser = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -103,6 +109,12 @@ const EditDialog = () => {
     }
   }, [selectedUser]);
 
+  useEffect(() => {
+    if (showEditDialog === false) {
+      doResetForm();
+    }
+  }, [showEditDialog]);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
diff --git a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
index 2528400..64293a0 100644
--- a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
+++ b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
@@ -22,17 +22,17 @@ const ListToolBar = () => {
                 }
               />
             </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
+            {/* <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" />} */}
+                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
                 <KeenIcon icon="filter" />
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

From 9720aa70b454a1f65b6cbe628acf0d5fa5f85246 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 24 Mar 2025 15:34:41 +0700
Subject: [PATCH 13/53] fix table rows per page

---
 .../manage-menu/hooks/ManageMenusContext.tsx  | 34 +++++++++++++++----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
index fcdf17c..6978302 100644
--- a/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
+++ b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
@@ -174,15 +174,31 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
   );
 
   const flattenChildren = (parent: any, parentIdx: number, depth = 0, parentName = '') => {
+    let result: any[] = [];
+
     if (parent.link === '/') {
       if (!parents.find((el: any) => el.id === parent.id))
         setParents((el: any) => [...el, { id: parent.id, name: parent.name }]); // GET PARENTS
-    }
-    if (!parent.children || parent.children.length === 0) {
-      return []; // Jika tidak ada children, kembalikan array kosong
+
+      // Menambahkan parent ke dalam result meskipun tidak memiliki children
+      result.push({
+        id: parent.id,
+        module: parent.module,
+        parentName: parentName || parent.name,
+        name: parent.name,
+        link: parent.link,
+        id_parent: parent.id_parent,
+        status: parent.status,
+        order_number: parent.order_number
+      });
     }
 
-    return parent.children.flatMap((child: any, childIdx: number) => {
+    // Jika parent tidak memiliki children, langsung return hasil yang sudah ada
+    if (!parent.children || parent.children.length === 0) {
+      return result;
+    }
+
+    const childrenFlattened = parent.children.flatMap((child: any, childIdx: number) => {
       if (child.children && child.children.length > 0) {
         return flattenChildren(child, parentIdx * 100 + childIdx, depth + 1, child.name);
       }
@@ -198,6 +214,9 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
         order_number: parent.order_number
       };
     });
+
+    // Gabungkan parent dengan children yang sudah diflatten
+    return [...result, ...childrenFlattened];
   };
 
   const getMenusLists = async (page: number, limit: number, sorting: any, filter: any) => {
@@ -221,10 +240,11 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       );
 
       const total_count = transformedData.length;
+      const paginatedData = transformedData.slice(page * limit, (page + 1) * limit);
 
       console.log(response.data);
-      setMenus(transformedData);
-      return { data: transformedData, totalCount: total_count };
+      // setMenus(transformedData);
+      return { data: paginatedData, totalCount: total_count };
     } catch (error) {
       console.error('Error fetching Menus', error);
       return { data: [], totalCount: 0 };
@@ -251,7 +271,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
 
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 50, page: 0, more: false }}
+        pagination={{ size: 25 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

From 835e0d9b4f8c5d612385e2ae8b1e0252b86d3789 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Wed, 19 Mar 2025 10:44:33 +0700
Subject: [PATCH 14/53] env jangan di push ke git

---
 .env.development | 3 +--
 .gitignore       | 3 ++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.env.development b/.env.development
index 58a088c..3b2ba8f 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,5 @@ VITE_APP_NAME=tpay-dashboard-tl
 VITE_APP_VERSION=1=9.1.1
 GENERATE_SOURCEMAP=false
 
-VITE_APP_API_URL=https://tpay.shiblysolution.id/api
-# VITE_APP_API_URL=http://127.0.0.1:4003/api
+VITE_APP_API_URL=http://localhost:8080
 VITE_ENV=development
diff --git a/.gitignore b/.gitignore
index 3b98911..8d6f61e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,4 +26,5 @@ yarn.lock
 *.njsproj
 *.sln
 *.sw?
-**/src/*.js
\ No newline at end of file
+**/src/*.js
+.env
\ No newline at end of file

From c2788d6f2bc341b5b9c6eae2f2fb610d9b97234f Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Mon, 24 Mar 2025 15:48:39 +0700
Subject: [PATCH 15/53] update

---
 .env.development | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.env.development b/.env.development
index 3b2ba8f..6620010 100644
--- a/.env.development
+++ b/.env.development
@@ -2,5 +2,10 @@ VITE_APP_NAME=tpay-dashboard-tl
 VITE_APP_VERSION=1=9.1.1
 GENERATE_SOURCEMAP=false
 
+<<<<<<< HEAD
 VITE_APP_API_URL=http://localhost:8080
+=======
+# VITE_APP_API_URL=
+VITE_APP_API_URL=http://127.0.0.1:4003/api
+>>>>>>> 85530a1 (update)
 VITE_ENV=development

From cf1e069ac5639a39a93a158da17b6175ceeb9e03 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Mon, 24 Mar 2025 15:49:18 +0700
Subject: [PATCH 16/53] update

---
 .env.development | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.env.development b/.env.development
index 6620010..1900901 100644
--- a/.env.development
+++ b/.env.development
@@ -2,10 +2,10 @@ VITE_APP_NAME=tpay-dashboard-tl
 VITE_APP_VERSION=1=9.1.1
 GENERATE_SOURCEMAP=false
 
-<<<<<<< HEAD
+
 VITE_APP_API_URL=http://localhost:8080
-=======
-# VITE_APP_API_URL=
+
 VITE_APP_API_URL=http://127.0.0.1:4003/api
->>>>>>> 85530a1 (update)
+
+VITE_APP_API_URL=http://127.0.0.1:4003/apitest
 VITE_ENV=development

From cc4f40af5bb7644a12369182cc6687669d51b0f1 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Wed, 19 Mar 2025 10:49:15 +0700
Subject: [PATCH 17/53] update

---
 .env.development | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/.env.development b/.env.development
index 1900901..360d9ec 100644
--- a/.env.development
+++ b/.env.development
@@ -2,10 +2,6 @@ VITE_APP_NAME=tpay-dashboard-tl
 VITE_APP_VERSION=1=9.1.1
 GENERATE_SOURCEMAP=false
 
-
-VITE_APP_API_URL=http://localhost:8080
-
-VITE_APP_API_URL=http://127.0.0.1:4003/api
-
+# VITE_APP_API_URL=
 VITE_APP_API_URL=http://127.0.0.1:4003/apitest
 VITE_ENV=development

From edd9be28e9e7fd5675cc307f5a8017cae7431c35 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Mon, 24 Mar 2025 15:51:05 +0700
Subject: [PATCH 18/53] update

---
 .env.development                              |   3 +
 package-lock.json                             | 272 ++++++------------
 package.json                                  |   6 +-
 src/config/api.config.ts                      |   4 +-
 src/pages/menu/menu-category/MenuCategory.tsx |  11 -
 src/pages/transaction/Transaction.tsx         |  39 +++
 src/pages/transaction/blocks/AddDialog.tsx    | 172 +++++++++++
 src/pages/transaction/blocks/DeleteDialog.tsx |  87 ++++++
 src/pages/transaction/blocks/EditDialog.tsx   | 173 +++++++++++
 src/pages/transaction/blocks/ListToolbar.tsx  |  90 ++++++
 src/pages/transaction/blocks/SearchDialog.tsx | 178 ++++++++++++
 .../transaction/hooks/TransactionContext.tsx  | 258 +++++++++++++++++
 .../hooks/useTransactionContext.tsx           |  12 +
 src/pages/transaction/transaction.tsx         |  47 ++-
 src/routing/AppRoutingSetup.tsx               |   4 +-
 yarn.lock                                     | 148 +++++-----
 16 files changed, 1233 insertions(+), 271 deletions(-)
 delete mode 100644 src/pages/menu/menu-category/MenuCategory.tsx
 create mode 100644 src/pages/transaction/Transaction.tsx
 create mode 100644 src/pages/transaction/blocks/AddDialog.tsx
 create mode 100644 src/pages/transaction/blocks/DeleteDialog.tsx
 create mode 100644 src/pages/transaction/blocks/EditDialog.tsx
 create mode 100644 src/pages/transaction/blocks/ListToolbar.tsx
 create mode 100644 src/pages/transaction/blocks/SearchDialog.tsx
 create mode 100644 src/pages/transaction/hooks/TransactionContext.tsx
 create mode 100644 src/pages/transaction/hooks/useTransactionContext.tsx

diff --git a/.env.development b/.env.development
index 360d9ec..5845f2e 100644
--- a/.env.development
+++ b/.env.development
@@ -4,4 +4,7 @@ GENERATE_SOURCEMAP=false
 
 # VITE_APP_API_URL=
 VITE_APP_API_URL=http://127.0.0.1:4003/apitest
+VITE_APP_API_URL=https://tpay.shiblysolution.id/api
+# VITE_APP_URL_TRANSACTION=https://tpay.shiblysolution.id/test/x/api
+# VITE_APP_API_URL=http://127.0.0.1:4003/apitesting
 VITE_ENV=development
diff --git a/package-lock.json b/package-lock.json
index 95dac4a..afeabe7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "metronic-tailwind-react",
       "version": "9.1.2",
+      "license": "ISC",
       "dependencies": {
         "@auth0/auth0-spa-js": "^2.1.3",
         "@emotion/cache": "^11.13.1",
@@ -104,7 +105,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -1462,13 +1462,14 @@
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "node_modules/@emotion/cache": {
-      "version": "11.13.1",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
-      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "^0.9.0",
         "@emotion/sheet": "^1.4.0",
-        "@emotion/utils": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
         "@emotion/weak-memoize": "^0.4.0",
         "stylis": "4.2.0"
       }
@@ -1520,14 +1521,15 @@
       }
     },
     "node_modules/@emotion/serialize": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
-      "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
       "dependencies": {
         "@emotion/hash": "^0.9.2",
         "@emotion/memoize": "^0.9.0",
         "@emotion/unitless": "^0.10.0",
-        "@emotion/utils": "^1.4.1",
+        "@emotion/utils": "^1.4.2",
         "csstype": "^3.0.2"
       }
     },
@@ -1572,9 +1574,10 @@
       }
     },
     "node_modules/@emotion/utils": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
-      "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA=="
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
     },
     "node_modules/@emotion/weak-memoize": {
       "version": "0.4.0",
@@ -1588,7 +1591,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -1604,7 +1606,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1620,7 +1621,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1636,7 +1636,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1652,7 +1651,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1668,7 +1666,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1684,7 +1681,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1700,7 +1696,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1716,7 +1711,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1732,7 +1726,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1748,7 +1741,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1764,7 +1756,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1780,7 +1771,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1796,7 +1786,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1812,7 +1801,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1828,7 +1816,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1844,7 +1831,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1860,7 +1846,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -1876,7 +1861,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -1892,7 +1876,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -1908,7 +1891,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1924,7 +1906,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1940,7 +1921,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2443,7 +2423,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -2460,7 +2439,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -2472,7 +2450,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -2483,14 +2460,12 @@
     "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
     "node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -2507,7 +2482,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -2522,7 +2496,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -2639,9 +2612,10 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
-      "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
+      "version": "6.4.8",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.8.tgz",
+      "integrity": "sha512-vjP4+A1ybyCRhDZC7r5EPWu/gLseFZxaGyPdDl94vzVvk6Yj6gahdaqcjbhkaCrJjdZj90m3VioltWPAnWF/zw==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
@@ -2673,21 +2647,22 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
-      "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
+      "version": "6.4.8",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.8.tgz",
+      "integrity": "sha512-5S9UTjKZZBd9GfbcYh/nYfD9cv6OXmj5Y7NgKYfk7JcSoshp8/pW5zP4wecRiroBSZX8wcrywSgogpVNO+5W0Q==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/core-downloads-tracker": "^6.1.6",
-        "@mui/system": "^6.1.6",
-        "@mui/types": "^7.2.19",
-        "@mui/utils": "^6.1.6",
+        "@mui/core-downloads-tracker": "^6.4.8",
+        "@mui/system": "^6.4.8",
+        "@mui/types": "~7.2.24",
+        "@mui/utils": "^6.4.8",
         "@popperjs/core": "^2.11.8",
-        "@types/react-transition-group": "^4.4.11",
+        "@types/react-transition-group": "^4.4.12",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1",
-        "react-is": "^18.3.1",
+        "react-is": "^19.0.0",
         "react-transition-group": "^4.4.5"
       },
       "engines": {
@@ -2700,7 +2675,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.1.6",
+        "@mui/material-pigment-css": "^6.4.8",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -2720,13 +2695,20 @@
         }
       }
     },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
+      "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==",
+      "license": "MIT"
+    },
     "node_modules/@mui/private-theming": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
-      "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
+      "version": "6.4.8",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.8.tgz",
+      "integrity": "sha512-sWwQoNSn6elsPTAtSqCf+w5aaGoh7AASURNmpy+QTTD/zwJ0Jgwt0ZaaP6mXq2IcgHxYnYloM/+vJgHPMkRKTQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/utils": "^6.1.6",
+        "@mui/utils": "^6.4.8",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -2747,13 +2729,14 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
-      "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
+      "version": "6.4.8",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.4.8.tgz",
+      "integrity": "sha512-oyjx1b1FvUCI85ZMO4trrjNxGm90eLN3Ohy0AP/SqK5gWvRQg1677UjNf7t6iETOKAleHctJjuq0B3aXO2gtmw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@emotion/cache": "^11.13.1",
-        "@emotion/serialize": "^1.3.2",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
         "@emotion/sheet": "^1.4.0",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -2780,15 +2763,16 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
-      "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
+      "version": "6.4.8",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.4.8.tgz",
+      "integrity": "sha512-gV7iBHoqlsIenU2BP0wq14BefRoZcASZ/4LeyuQglayBl+DfLX5rEd3EYR3J409V2EZpR0NOM1LATAGlNk2cyA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/private-theming": "^6.1.6",
-        "@mui/styled-engine": "^6.1.6",
-        "@mui/types": "^7.2.19",
-        "@mui/utils": "^6.1.6",
+        "@mui/private-theming": "^6.4.8",
+        "@mui/styled-engine": "^6.4.8",
+        "@mui/types": "~7.2.24",
+        "@mui/utils": "^6.4.8",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -2819,9 +2803,10 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.19",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz",
-      "integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==",
+      "version": "7.2.24",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
+      "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==",
+      "license": "MIT",
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -2832,16 +2817,17 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
-      "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
+      "version": "6.4.8",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.4.8.tgz",
+      "integrity": "sha512-C86gfiZ5BfZ51KqzqoHi1WuuM2QdSKoFhbkZeAfQRB+jCc4YNhhj11UXFVMMsqBgZ+Zy8IHNJW3M9Wj/LOwRXQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/types": "^7.2.19",
-        "@types/prop-types": "^15.7.13",
+        "@mui/types": "~7.2.24",
+        "@types/prop-types": "^15.7.14",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
-        "react-is": "^18.3.1"
+        "react-is": "^19.0.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2860,6 +2846,12 @@
         }
       }
     },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
+      "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==",
+      "license": "MIT"
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2896,7 +2888,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=14"
@@ -3915,7 +3906,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -3928,7 +3918,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -3941,7 +3930,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -3954,7 +3942,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -3967,7 +3954,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -3980,7 +3966,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -3993,7 +3978,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -4006,7 +3990,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -4019,7 +4002,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -4032,7 +4014,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -4045,7 +4026,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -4058,7 +4038,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -4071,7 +4050,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -4084,7 +4062,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -4097,7 +4074,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -4110,7 +4086,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -4123,7 +4098,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -4136,7 +4110,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -4241,8 +4214,7 @@
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
     },
     "node_modules/@types/geojson": {
       "version": "7946.0.14",
@@ -4288,9 +4260,10 @@
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.13",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
-      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.12",
@@ -4305,7 +4278,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -4320,10 +4293,11 @@
       }
     },
     "node_modules/@types/react-transition-group": {
-      "version": "4.4.11",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
-      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
-      "dependencies": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
         "@types/react": "*"
       }
     },
@@ -4642,14 +4616,12 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -4675,8 +4647,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -4777,7 +4748,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -4789,7 +4759,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -4881,7 +4850,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -4933,7 +4901,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -4957,7 +4924,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -5051,7 +5017,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -5085,7 +5050,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -5300,14 +5264,12 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
@@ -5321,8 +5283,7 @@
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
       "version": "1.5.48",
@@ -5365,7 +5326,6 @@
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
       "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -5827,7 +5787,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
       "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
-      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -5897,7 +5856,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -5982,7 +5940,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -6195,7 +6152,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -6255,14 +6211,12 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
       "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -6385,7 +6339,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -6537,7 +6490,6 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -6552,7 +6504,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -6575,7 +6526,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -6632,7 +6582,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6686,7 +6635,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -6765,8 +6713,7 @@
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="
     },
     "node_modules/parent-module": {
       "version": "1.0.1",
@@ -6817,7 +6764,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6831,7 +6777,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -6846,8 +6791,7 @@
     "node_modules/path-scurry/node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -6877,7 +6821,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6886,7 +6829,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -6895,7 +6837,6 @@
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
       "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7273,7 +7214,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -7290,7 +7230,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -7337,7 +7276,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7372,7 +7310,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
       "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -7384,7 +7321,6 @@
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
       "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
-      "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -7420,7 +7356,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7445,7 +7380,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -8153,7 +8087,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -8162,7 +8095,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -8240,7 +8172,6 @@
       "version": "4.24.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.2.tgz",
       "integrity": "sha512-do/DFGq5g6rdDhdpPq5qb2ecoczeK6y+2UAjdJ5trjQJj5f1AiVdLRWRc9A9/fFukfvJRgM0UXzxBIYMovm5ww==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "1.0.6"
       },
@@ -8340,7 +8271,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -8352,7 +8282,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8378,7 +8307,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -8429,7 +8357,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -8455,7 +8382,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -8582,7 +8508,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -8604,7 +8529,6 @@
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
       "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^3.1.2",
@@ -8755,7 +8679,6 @@
       "version": "3.4.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
       "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
-      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -8800,7 +8723,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -8819,7 +8741,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -8828,7 +8749,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -8877,8 +8797,7 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tslib": {
       "version": "2.8.0",
@@ -8912,7 +8831,7 @@
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9054,7 +8973,6 @@
       "version": "5.4.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
       "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
-      "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -9130,7 +9048,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -9182,7 +9099,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
diff --git a/package.json b/package.json
index c42aad9..8121a93 100644
--- a/package.json
+++ b/package.json
@@ -106,5 +106,9 @@
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.14.0",
     "vite": "^5.4.11"
-  }
+  },
+  "description": "## Quick Setup",
+  "main": "postcss.config.js",
+  "author": "",
+  "license": "ISC"
 }
diff --git a/src/config/api.config.ts b/src/config/api.config.ts
index 9f8af61..535dc2a 100644
--- a/src/config/api.config.ts
+++ b/src/config/api.config.ts
@@ -4,6 +4,7 @@ interface apiConfigProps {
   service_master_data: string;
   service_transaction: string;
   service_wallet: string;
+  transaction: string
 }
 
 const API_URL = import.meta.env.VITE_APP_API_URL;
@@ -14,7 +15,8 @@ const apiConfig: apiConfigProps = {
   // service_master_data: `${API_URL}/m`
   service_master_data: `${API_URL}/t`,
   service_transaction: `${API_URL}/tt`,
-  service_wallet: `${API_URL}/w`
+  service_wallet: `${API_URL}/w`,
+  transaction: `${API_URL}/x`
 };
 
 export { apiConfig };
diff --git a/src/pages/menu/menu-category/MenuCategory.tsx b/src/pages/menu/menu-category/MenuCategory.tsx
deleted file mode 100644
index a43e69f..0000000
--- a/src/pages/menu/menu-category/MenuCategory.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-const MenuCategory = () => {
-  return (
-    <div>
-      <div className="container mx-auto p-5">
-        <h1 className="text-xl font-medium leading-none text-gray-900">Menu Category</h1>
-      </div>
-    </div>
-  );
-};
-
-export default MenuCategory;
diff --git a/src/pages/transaction/Transaction.tsx b/src/pages/transaction/Transaction.tsx
new file mode 100644
index 0000000..dda8418
--- /dev/null
+++ b/src/pages/transaction/Transaction.tsx
@@ -0,0 +1,39 @@
+import { Container, DataGridInner } from '@/components';
+import { TransactionProvider } from './hooks/TransactionContext';
+import AddDialog from './blocks/AddDialog';
+import SearchDialog from './blocks/SearchDialog';
+import EditDialog from './blocks/EditDialog';
+import DeleteDialog from './blocks/DeleteDialog';
+import { Breadcrumbs, Link } from '@mui/material';
+
+const Transaction = () => {
+  return (
+    <TransactionProvider>
+      <Container className="mb-7">
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
+        <Breadcrumbs sx={{ mb: 2 }}>
+          <Link underline="none" color="inherit" href="/">
+            <span className="text-sm hover:underline">Dashboard</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Transaction</span>
+          </Link>
+        </Breadcrumbs>
+        <div className="grid gap-5 lg:gap-7.5">
+          <DataGridInner />
+        </div>
+        <AddDialog />
+        <EditDialog />
+        <DeleteDialog />
+        <SearchDialog />
+      </Container>
+    </TransactionProvider>
+  );
+};
+
+export default Transaction;
diff --git a/src/pages/transaction/blocks/AddDialog.tsx b/src/pages/transaction/blocks/AddDialog.tsx
new file mode 100644
index 0000000..22cee5a
--- /dev/null
+++ b/src/pages/transaction/blocks/AddDialog.tsx
@@ -0,0 +1,172 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTransactionContext } from '../hooks/useTransactionContext';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Alert, KeenIcon, useDataGrid } from '@/components';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import axios from 'axios';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+import { getAuth, useAuthContext } from '@/auth';
+import { useCallApi } from '@/hooks';
+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 parsedUser = getAuth()?.user;
+  const { showAddDialog, handleAddDialog, selectedMunicipios } = useTransactionContext();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const initialState = {
+    name: '',
+    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 doCreateMunicipio = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const response = await PostData(`${API_URL}/municipios/create`, formField);
+
+      if (response?.status) {
+        handleAddDialog(false);
+        resetForm();
+        reload();
+        toast.success('Municipio created successfully!');
+        // const createActivity = {
+        //   module: 'Manage Municipio',
+        //   description: `Create Municipio => ${selectedMunicipios}`,
+        //   action: 'C'
+        // };
+
+        // doSaveLogActivity(createActivity);
+      } else {
+        toast.error('Failed to create municipio.');
+        setAlert({ show: true, message: 'Failed to create municipio. Please try again.' });
+      }
+    },
+    [formField]
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (formField.name.trim() === '') {
+      setAlert({ show: true, message: 'Please fill name field.' });
+      return;
+    }
+
+    doCreateMunicipio(e);
+    console.log(parsedUser.email);
+    console.log(formField);
+    setAlert({ show: false, message: '' });
+  };
+
+  const handleReset = () => {
+    resetForm();
+    setAlert({ show: false, message: '' });
+  };
+
+  useEffect(() => {
+    if (showAddDialog) {
+      setFormField({
+        name: formField.name,
+        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-96 flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogTitle></DialogTitle>
+        <DialogDescription></DialogDescription>
+        <DialogHeader className="p-2 border-0">
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">Add Municipios</h1>
+              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => {
+                handleAddDialog(false);
+                resetForm();
+              }}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
+          <div className="flex flex-col px-0">
+            {alert.show && (
+              <Alert variant="danger" className="mb-5">
+                {alert.message}
+              </Alert>
+            )}
+            <form action="" onSubmit={handleSubmit}>
+              <div className="card-body grid-cols-6 gap-5 p-0">
+                <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="flex justify-end pt-2.5 gap-5 col-span-6">
+                  <Button variant={'outline'} type="reset" onClick={handleReset}>
+                    Reset
+                  </Button>
+                  <Button variant={'default'} type="submit">
+                    Create
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddDialog;
diff --git a/src/pages/transaction/blocks/DeleteDialog.tsx b/src/pages/transaction/blocks/DeleteDialog.tsx
new file mode 100644
index 0000000..2e8f25d
--- /dev/null
+++ b/src/pages/transaction/blocks/DeleteDialog.tsx
@@ -0,0 +1,87 @@
+import { Alert, useDataGrid } from '@/components';
+import { useTransactionContext } from '../hooks/useTransactionContext';
+import { ChangeEvent, useCallback, useState } from 'react';
+import axios from 'axios';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
+import { EnforceSwitch } from '@/components/switch';
+import { Button } from '@/components/ui/button';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+
+const API_URL = apiConfig.service_master_data;
+
+const DeleteDialog = () => {
+  const { showDeleteDialog, handleDeleteDialog, selectedMunicipios, municipios } =
+    useTransactionContext();
+  const { reload } = useDataGrid();
+  const { DeleteData } = useCallApi();
+  const [enforce, setEnforce] = useState(false);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const doDeleteMunicipio = useCallback(async () => {
+    const response = await DeleteData(
+      `${API_URL}/municipios/delete/${selectedMunicipios}/${enforce}`,
+      {
+        id: selectedMunicipios
+      }
+    );
+
+    if (response?.status) {
+      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      handleDeleteDialog(false, null);
+      toast.success('Success Delete Municipio');
+      reload();
+      // const createActivity = {
+      //   module: 'Manage Municipio',
+      //   description: `Delete Municipio => ${selectedMunicipios}`,
+      //   action: 'D'
+      // };
+
+      // doSaveLogActivity(createActivity);
+    } else {
+      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+    }
+  }, [selectedMunicipios, enforce]);
+
+  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">
+          <Alert variant="warning">
+            <h3 className="text-lg">Are you sure?</h3>
+            <span className="text-sm">you will delete this data!</span>
+            <div className="mt-2 flex items-center gap-x-2">
+              <label className="form-label max-w-56">Hard Delete</label>
+              <EnforceSwitch
+                enforce={enforce}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                  setEnforce(e.target.checked);
+                }}
+              />
+            </div>
+          </Alert>
+          {alert.show && (
+            <Alert variant="danger">
+              <h3>{alert.message}</h3>
+            </Alert>
+          )}
+        </DialogHeader>
+        <DialogFooter className="flex justify-end items-center gap-4 mt-3">
+          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+            Cancel
+          </Button>
+          <Button variant={'destructive'} onClick={() => doDeleteMunicipio()}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDialog;
diff --git a/src/pages/transaction/blocks/EditDialog.tsx b/src/pages/transaction/blocks/EditDialog.tsx
new file mode 100644
index 0000000..0ab2a46
--- /dev/null
+++ b/src/pages/transaction/blocks/EditDialog.tsx
@@ -0,0 +1,173 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTransactionContext } from '../hooks/useTransactionContext';
+import { Alert, useDataGrid } from '@/components';
+import axios from 'axios';
+import { apiConfig } from '@/config/api.config';
+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 { getAuth, useAuthContext } from '@/auth';
+import { useCallApi } from '@/hooks';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+
+const API_URL = apiConfig.service_master_data;
+
+const EditDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showEditDialog, handleEditDialog, selectedMunicipios, municipios } =
+    useTransactionContext();
+  const { reload } = useDataGrid();
+  const { PutData, GetData } = useCallApi();
+  const parsedUser = getAuth()?.user;
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const initialState = {
+    name: '',
+    updated_by: '',
+    updated_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 doUpdateMunicipios = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const response = await PutData(
+        `${API_URL}/municipios/update/${selectedMunicipios}`,
+        formField
+      );
+
+      if (response?.status) {
+        handleEditDialog(false, null);
+        resetForm();
+        toast.success('Success update municipio');
+        reload();
+        // const createActivity = {
+        //   module: 'Manage Municipio',
+        //   description: `Edit Municipio => ${selectedMunicipios}`,
+        //   action: 'U'
+        // };
+
+        // doSaveLogActivity(createActivity);
+      } else {
+        toast.error('Failed update user');
+        setAlert({ show: true, message: 'Failed to update municipio. Please try again.' });
+      }
+    },
+    [selectedMunicipios, formField]
+  );
+
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id });
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name
+      }));
+    } else {
+      setFormField((prev) => ({
+        ...prev,
+        name: ''
+      }));
+    }
+  }, []);
+
+  const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (formField.name.trim() === '') {
+      setAlert({ show: true, message: 'Please fill name field.' });
+      return;
+    }
+
+    doUpdateMunicipios(e);
+    console.log(formField);
+    setAlert({ show: false, message: '' });
+  };
+
+  useEffect(() => {
+    if (selectedMunicipios) {
+      doFetchData(selectedMunicipios);
+    }
+  }, [selectedMunicipios]);
+
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
+  useEffect(() => {
+    if (selectedMunicipios) {
+      setFormField({
+        name: formField.name,
+        updated_by: parsedUser.email,
+        updated_at: formattedTime
+      });
+    }
+  }, [formattedTime]);
+
+  // console.log(selectedMunicipios);
+  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>Municipios - Update</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <div className="flex flex-col">
+            {alert.show && (
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+
+            <form onSubmit={handleUpdate}>
+              <div className="card-body grid gap-5">
+                <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">
+                      Name<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      value={formField.name}
+                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                    />
+                  </div>
+                </div>
+
+                <div className="flex justify-end">
+                  <Button className="btn btn-primary">Save Changes</Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditDialog;
diff --git a/src/pages/transaction/blocks/ListToolbar.tsx b/src/pages/transaction/blocks/ListToolbar.tsx
new file mode 100644
index 0000000..cb71f6d
--- /dev/null
+++ b/src/pages/transaction/blocks/ListToolbar.tsx
@@ -0,0 +1,90 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { useTransactionContext } from '../hooks/useTransactionContext';
+import { Button } from '@/components/ui/button';
+import { useCallback, useState, useEffect } from 'react';
+import { toast } from 'sonner';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog, handleSearchDialog } = useTransactionContext();
+
+  // 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 className="flex gap-3 items-center">
+            <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;
diff --git a/src/pages/transaction/blocks/SearchDialog.tsx b/src/pages/transaction/blocks/SearchDialog.tsx
new file mode 100644
index 0000000..a5d84f7
--- /dev/null
+++ b/src/pages/transaction/blocks/SearchDialog.tsx
@@ -0,0 +1,178 @@
+import { useRef, useState } from 'react';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Alert, KeenIcon } from '@/components';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useTransactionContext } from '../hooks/useTransactionContext';
+import { apiConfig } from '@/config/api.config';
+import axios from 'axios';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+interface trxDate {
+  from: string;
+  to: string;
+}
+
+const API_URL = apiConfig.service_master_data;
+
+const SearchDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showSearchDialog, handleSearchDialog, municipios } = useTransactionContext();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const initialState = {
+    from: '',
+    to: ''
+  };
+
+  const [formField, setFormField] = useState(initialState);
+  const resetForm = () => {
+    setFormField(initialState);
+  };
+  const [trxDate, settrxDate] = useState<trxDate[]>([]);
+  const [isFound, setIsFound] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const from = String(formField.from);
+    const to = String(formField.to);
+
+    // if (formField.id === 0) {
+    //   setAlert({ show: true, message: 'Please fill name field.' });
+    //   return;
+    // }
+
+    try {
+      // const response = await axios.get(`${API_URL}/municipios/postoadms/${id}`);
+
+      // if (response.data.status) {
+      //   setPostoadms(response.data.data);
+      //   setIsFound(true);
+      //   // console.log('Found postoadms: ', response.data.data);
+      // } else {
+      //   setPostoadms([]);
+      //   setIsFound(false);
+      //   setAlert({ show: true, message: 'No postoadms found.' });
+      // }
+    } catch (error) {
+      console.error('Error fetching postoadms', error);
+      setAlert({ show: true, message: 'Failed to fetch postoadms. Please try again.' });
+    }
+    setAlert({ show: false, message: '' });
+  };
+
+  const handleReset = () => {
+    setFormField(initialState);
+    setIsFound(false);
+    settrxDate([]);
+  };
+  // console.log(municipios);
+  return (
+    <Dialog open={showSearchDialog} onOpenChange={(open) => handleSearchDialog(open)}>
+      <DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogTitle></DialogTitle>
+        <DialogDescription></DialogDescription>
+        <DialogHeader className="p-2 border-0">
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">
+                Search Postoadms
+              </h1>
+              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => {
+                handleSearchDialog(false);
+                resetForm();
+              }}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
+          <div className="flex flex-col px-0">
+            {alert.show && (
+              <Alert variant="danger" className="mb-5">
+                {alert.message}
+              </Alert>
+            )}
+            <form action="" onSubmit={handleSubmit}>
+              <div className="card-body grid-cols-6 gap-5 p-0">
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Municipio Name<span className="text-red-500">*</span>
+                  </label>
+
+                  {/* <Select
+                    value={formField.id.toString()}
+                    onValueChange={(target) => {
+                      const selectedMunicipio = municipios.find((m) => m.id.toString() === target);
+                      if (selectedMunicipio) {
+                        setFormField({
+                          ...formField,
+                          id: selectedMunicipio.id,
+                          name: selectedMunicipio.name
+                        });
+                      }
+                    }}
+                  > */}
+                    {/* <SelectTrigger className="col-span-6">
+                      <SelectValue placeholder="Select Municipios" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {municipios.map((municipio) => (
+                        <SelectItem key={municipio.id} value={municipio.id.toString()}>
+                          {municipio.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select> */}
+                </div>
+
+                {/* {isFound && postoadms.length > 0 && (
+                  <div className="mt-4 border-t pt-4">
+                    <h2 className="text-md font-semibold">Postu Administravo: </h2>
+                    <br />
+                    <div className="flex flex-col">
+                      <span className="text-sm form-hint">
+                        {postoadms.map((posto) => posto.name).join(', ')}
+                      </span>
+                    </div>
+                  </div>
+                )} */}
+
+                <div className="flex justify-end pt-2.5 gap-5 col-span-6">
+                  <Button variant={'outline'} type="reset" onClick={handleReset}>
+                    Reset
+                  </Button>
+                  <Button variant={'default'} type="submit">
+                    Search
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default SearchDialog;
diff --git a/src/pages/transaction/hooks/TransactionContext.tsx b/src/pages/transaction/hooks/TransactionContext.tsx
new file mode 100644
index 0000000..61a70d8
--- /dev/null
+++ b/src/pages/transaction/hooks/TransactionContext.tsx
@@ -0,0 +1,258 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { apiConfig } from '@/config/api.config';
+import { ColumnDef } from '@tanstack/react-table';
+import axios from 'axios';
+import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallApi } from '@/hooks';
+import ListToolbar from '../blocks/ListToolbar';
+import { Button } from '@/components/ui/button';
+import { useNavigate } from 'react-router';
+
+interface TransactionProps {
+  id: number;
+  name: string;
+}
+
+interface ContextProps {
+  municipios: TransactionProps[];
+  showSearchDialog: boolean;
+  handleSearchDialog: (show: boolean) => void;
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_user: string | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  showDeleteDialog: boolean;
+  handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
+  selectedMunicipios: string | null;
+  getTransactionLists: (
+    limit: number,
+    page: number,
+    with_deleted: boolean,
+    order_field: any,
+    order_direction: any,
+    filter: any
+  ) => Promise<{ data: TransactionProps[]; totalCount: number } | undefined>;
+}
+
+const initialProps: ContextProps = {
+  municipios: [],
+  showSearchDialog: false,
+  handleSearchDialog: (show: boolean) => { },
+  showEditDialog: false,
+  handleEditDialog: (show: boolean, selected_user: string | null) => { },
+  showAddDialog: false,
+  handleAddDialog: (show: boolean) => { },
+  showDeleteDialog: false,
+  handleDeleteDialog: (show: boolean, selected_user: string | null) => { },
+  selectedMunicipios: null,
+  getTransactionLists: async () => ({ data: [], totalCount: 0 })
+};
+
+const ManageTransactionContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.transaction;
+
+const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showSearchDialog, setShowSearchDialog] = useState(false);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedMunicipios, setSelectedMunicipios] = useState<string | null>(null);
+  const [municipios, setTransaction] = useState<TransactionProps[]>([]);
+  const { GetData } = useCallApi();
+  const navigate = useNavigate();
+
+  const handleSearchDialog = useCallback((show: boolean) => {
+    setShowSearchDialog(show);
+  }, []);
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
+
+  const handleEditDialog = useCallback((show: boolean, selected_municipios: string | null) => {
+    setSelectedMunicipios(show ? selected_municipios : null);
+    setShowEditDialog(show);
+  }, []);
+
+  const handleDeleteDialog = useCallback((show: boolean, selected_municipios: string | null) => {
+    setSelectedMunicipios(show ? selected_municipios : null);
+    setShowDeleteDialog(show);
+  }, []);
+
+  const handleNavigate = (path: string) => {
+    const url = navigate(`${API_URL}/transaction/history/${path}`);
+  };
+
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorKey: 'transaction_date',
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorKey: 'origin_customer.fullname',
+        header: ({ column }) => <DataGridColumnHeader title="Full Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) =>
+          new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(row.purchase.amount),
+        id: 'amount',
+        header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]',
+        },
+      },
+      {
+        accessorFn: (row) => {
+          let fee;
+          if (row.kind === 'P') {
+            fee = row.purchase.fee_amount;
+          } else {
+            fee = row.transfer.fee_amount;
+          }
+          return fee.toLocaleString('en-US', {
+            style: 'currency',
+            currency: 'USD',
+          });
+        },
+        accessorKey: 'fee',
+        header: ({ column }) => <DataGridColumnHeader title="Fee" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]',
+        },
+      },
+      {
+        accessorKey: 'description',
+        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorKey: 'type.name',
+        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original.id;
+          return (
+            <>
+              <button className="btn btn-sm btn-icon btn-clear btn-light">
+                <KeenIcon icon="eye" />
+              </button>
+            </>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    [handleEditDialog, handleDeleteDialog]
+  );
+
+  const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
+    try {
+      let startdate;
+      let enddate;
+      let formattedFilter;
+
+      if (filter == undefined || filter.length==0) {
+        const today = new Date();
+        const nextWeek = new Date();
+        nextWeek.setDate(today.getDate() + 7);
+      
+        startdate = today.toISOString().split('T')[0]; 
+        enddate = nextWeek.toISOString().split('T')[0];
+      }else if (filter != undefined || filter.length!=0) {
+        startdate = filter[0].value.from;
+        enddate = filter[0].value.to;
+      }
+
+      formattedFilter = {
+        "Transactions.transaction_date": {
+          from: startdate+" 00:00:00",
+          to: enddate+" 23:59:59"
+        }
+      };
+      
+      const response = await GetData(`${API_URL}/transaction/history`, {
+        limit,
+        page: page + 1,
+        with_deleted: false,
+        order_field: "Transactions.created_at",
+        order_direction: 'DESC',
+        filter: JSON.stringify(formattedFilter)
+      });
+
+      setTransaction(response?.data.list);
+      return { data: response?.data.list, totalCount: response?.data.total_count };
+    } catch (error) {
+      console.error('Error fetching transaction', error);
+    }
+  };
+
+  return (
+    <ManageTransactionContext.Provider
+      value={{
+        municipios,
+        showSearchDialog,
+        handleSearchDialog,
+        showAddDialog,
+        handleAddDialog,
+        showDeleteDialog,
+        handleDeleteDialog,
+        showEditDialog,
+        handleEditDialog,
+        selectedMunicipios,
+        getTransactionLists
+      }}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+
+      <DataGridProvider
+        columns={columns}
+        pagination={{ size: 10 }}
+        toolbar={<ListToolbar />}
+        layout={{ card: true }}
+        sorting={[{ id: 'id', desc: false }]}
+        serverSide={true}
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+          getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
+        }
+      >
+        {children}
+      </DataGridProvider>
+    </ManageTransactionContext.Provider>
+  );
+};
+
+export { TransactionProvider, ManageTransactionContext };
+export type { TransactionProps };
diff --git a/src/pages/transaction/hooks/useTransactionContext.tsx b/src/pages/transaction/hooks/useTransactionContext.tsx
new file mode 100644
index 0000000..4af7036
--- /dev/null
+++ b/src/pages/transaction/hooks/useTransactionContext.tsx
@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ManageTransactionContext } from './TransactionContext';
+
+const useTransactionContext = () => {
+  const context = useContext(ManageTransactionContext);
+
+  if (!context) throw new Error('useTransactionContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useTransactionContext };
diff --git a/src/pages/transaction/transaction.tsx b/src/pages/transaction/transaction.tsx
index 4fcba47..dda8418 100644
--- a/src/pages/transaction/transaction.tsx
+++ b/src/pages/transaction/transaction.tsx
@@ -1,12 +1,39 @@
+import { Container, DataGridInner } from '@/components';
+import { TransactionProvider } from './hooks/TransactionContext';
+import AddDialog from './blocks/AddDialog';
+import SearchDialog from './blocks/SearchDialog';
+import EditDialog from './blocks/EditDialog';
+import DeleteDialog from './blocks/DeleteDialog';
+import { Breadcrumbs, Link } from '@mui/material';
+
 const Transaction = () => {
-    return (
-      <div>
-        <div className="container mx-auto p-5">
-          <h1 className="text-xl font-medium leading-none text-gray-900">Transaction</h1>
+  return (
+    <TransactionProvider>
+      <Container className="mb-7">
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
+        <Breadcrumbs sx={{ mb: 2 }}>
+          <Link underline="none" color="inherit" href="/">
+            <span className="text-sm hover:underline">Dashboard</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Transaction</span>
+          </Link>
+        </Breadcrumbs>
+        <div className="grid gap-5 lg:gap-7.5">
+          <DataGridInner />
         </div>
-      </div>
-    );
-  };
-  
-  export default Transaction;
-  
\ No newline at end of file
+        <AddDialog />
+        <EditDialog />
+        <DeleteDialog />
+        <SearchDialog />
+      </Container>
+    </TransactionProvider>
+  );
+};
+
+export default Transaction;
diff --git a/src/routing/AppRoutingSetup.tsx b/src/routing/AppRoutingSetup.tsx
index c3a165c..3c9ee50 100644
--- a/src/routing/AppRoutingSetup.tsx
+++ b/src/routing/AppRoutingSetup.tsx
@@ -19,7 +19,7 @@ import AccessType from '@/pages/access/access-type/AccessType';
 import MemberCredential from '@/pages/access/member-credentials/MemberCredentials';
 import ManageCurrency from '@/pages/account/manage-currency/ManageCurrency';
 import ManageNotification from '@/pages/notification/ManageNotification';
-import MenuCategory from '@/pages/menu/menu-category/MenuCategory';
+import Transaction from '@/pages/transaction/Transaction';
 import ManageMenu from '@/pages/menu/manage-menu/ManageMenu';
 import Welcome from '@/pages/menu/welcome/Welcome';
 import Inbox from '@/pages/message/Inbox';
@@ -76,7 +76,7 @@ const AppRoutingSetup = (): ReactElement => {
 
           <Route path="/notification/notification-management" element={<ManageNotification />} />
 
-          <Route path="/menu/menu-category" element={<MenuCategory />} />
+          <Route path="/transaction" element={<Transaction />} />
           <Route path="/menu/menu-management" element={<ManageMenu />} />
           <Route path="/menu/welcome" element={<Welcome />} />
           <Route path="/transaction" element={<Transaction />} />
diff --git a/yarn.lock b/yarn.lock
index 644ce57..48c270d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -524,14 +524,14 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
-"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1":
-  version "11.13.1"
-  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz"
-  integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
+"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1", "@emotion/cache@^11.13.5":
+  version "11.14.0"
+  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz"
+  integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==
   dependencies:
     "@emotion/memoize" "^0.9.0"
     "@emotion/sheet" "^1.4.0"
-    "@emotion/utils" "^1.4.0"
+    "@emotion/utils" "^1.4.2"
     "@emotion/weak-memoize" "^0.4.0"
     stylis "4.2.0"
 
@@ -578,15 +578,15 @@
     "@emotion/weak-memoize" "^0.4.0"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0", "@emotion/serialize@^1.3.1", "@emotion/serialize@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz"
-  integrity sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==
+"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0", "@emotion/serialize@^1.3.1", "@emotion/serialize@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz"
+  integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==
   dependencies:
     "@emotion/hash" "^0.9.2"
     "@emotion/memoize" "^0.9.0"
     "@emotion/unitless" "^0.10.0"
-    "@emotion/utils" "^1.4.1"
+    "@emotion/utils" "^1.4.2"
     csstype "^3.0.2"
 
 "@emotion/sheet@^1.4.0":
@@ -621,10 +621,10 @@
   resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz"
   integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
 
-"@emotion/utils@^1.4.0", "@emotion/utils@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz"
-  integrity sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==
+"@emotion/utils@^1.4.0", "@emotion/utils@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz"
+  integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==
 
 "@emotion/weak-memoize@^0.4.0":
   version "0.4.0"
@@ -979,68 +979,75 @@
     clsx "^2.1.0"
     prop-types "^15.8.1"
 
-"@mui/core-downloads-tracker@^6.1.6":
-  version "6.1.6"
-  resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz"
-  integrity sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==
+"@mui/core-downloads-tracker@^6.4.8":
+  version "6.4.8"
+  resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.8.tgz"
+  integrity sha512-vjP4+A1ybyCRhDZC7r5EPWu/gLseFZxaGyPdDl94vzVvk6Yj6gahdaqcjbhkaCrJjdZj90m3VioltWPAnWF/zw==
 
-"@mui/material@^6.1.6":
-  version "6.1.6"
-  resolved "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz"
-  integrity sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==
+"@mui/icons-material@^6.4.6":
+  version "6.4.6"
+  resolved "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.6.tgz"
+  integrity sha512-rGJBvIQQbQAlyKYljHQ8wAQS/K2/uYwvemcpygnAmCizmCI4zSF9HQPuiG8Ql4YLZ6V/uKjA3WHIYmF/8sV+pQ==
   dependencies:
     "@babel/runtime" "^7.26.0"
-    "@mui/core-downloads-tracker" "^6.1.6"
-    "@mui/system" "^6.1.6"
-    "@mui/types" "^7.2.19"
-    "@mui/utils" "^6.1.6"
+
+"@mui/material@^6.1.6", "@mui/material@^6.4.6":
+  version "6.4.8"
+  resolved "https://registry.npmjs.org/@mui/material/-/material-6.4.8.tgz"
+  integrity sha512-5S9UTjKZZBd9GfbcYh/nYfD9cv6OXmj5Y7NgKYfk7JcSoshp8/pW5zP4wecRiroBSZX8wcrywSgogpVNO+5W0Q==
+  dependencies:
+    "@babel/runtime" "^7.26.0"
+    "@mui/core-downloads-tracker" "^6.4.8"
+    "@mui/system" "^6.4.8"
+    "@mui/types" "~7.2.24"
+    "@mui/utils" "^6.4.8"
     "@popperjs/core" "^2.11.8"
-    "@types/react-transition-group" "^4.4.11"
+    "@types/react-transition-group" "^4.4.12"
     clsx "^2.1.1"
     csstype "^3.1.3"
     prop-types "^15.8.1"
-    react-is "^18.3.1"
+    react-is "^19.0.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^6.1.6":
-  version "6.1.6"
-  resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz"
-  integrity sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==
+"@mui/private-theming@^6.4.8":
+  version "6.4.8"
+  resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.8.tgz"
+  integrity sha512-sWwQoNSn6elsPTAtSqCf+w5aaGoh7AASURNmpy+QTTD/zwJ0Jgwt0ZaaP6mXq2IcgHxYnYloM/+vJgHPMkRKTQ==
   dependencies:
     "@babel/runtime" "^7.26.0"
-    "@mui/utils" "^6.1.6"
+    "@mui/utils" "^6.4.8"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^6.1.6":
-  version "6.1.6"
-  resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz"
-  integrity sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==
+"@mui/styled-engine@^6.4.8":
+  version "6.4.8"
+  resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.4.8.tgz"
+  integrity sha512-oyjx1b1FvUCI85ZMO4trrjNxGm90eLN3Ohy0AP/SqK5gWvRQg1677UjNf7t6iETOKAleHctJjuq0B3aXO2gtmw==
   dependencies:
     "@babel/runtime" "^7.26.0"
-    "@emotion/cache" "^11.13.1"
-    "@emotion/serialize" "^1.3.2"
+    "@emotion/cache" "^11.13.5"
+    "@emotion/serialize" "^1.3.3"
     "@emotion/sheet" "^1.4.0"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/system@^6.1.6":
-  version "6.1.6"
-  resolved "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz"
-  integrity sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==
+"@mui/system@^6.4.8":
+  version "6.4.8"
+  resolved "https://registry.npmjs.org/@mui/system/-/system-6.4.8.tgz"
+  integrity sha512-gV7iBHoqlsIenU2BP0wq14BefRoZcASZ/4LeyuQglayBl+DfLX5rEd3EYR3J409V2EZpR0NOM1LATAGlNk2cyA==
   dependencies:
     "@babel/runtime" "^7.26.0"
-    "@mui/private-theming" "^6.1.6"
-    "@mui/styled-engine" "^6.1.6"
-    "@mui/types" "^7.2.19"
-    "@mui/utils" "^6.1.6"
+    "@mui/private-theming" "^6.4.8"
+    "@mui/styled-engine" "^6.4.8"
+    "@mui/types" "~7.2.24"
+    "@mui/utils" "^6.4.8"
     clsx "^2.1.1"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/types@^7.2.14", "@mui/types@^7.2.15", "@mui/types@^7.2.19":
-  version "7.2.19"
-  resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz"
-  integrity sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==
+"@mui/types@^7.2.14", "@mui/types@^7.2.15", "@mui/types@~7.2.24":
+  version "7.2.24"
+  resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz"
+  integrity sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==
 
 "@mui/utils@^5.15.14":
   version "5.16.6"
@@ -1054,17 +1061,17 @@
     prop-types "^15.8.1"
     react-is "^18.3.1"
 
-"@mui/utils@^6.1.6":
-  version "6.1.6"
-  resolved "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz"
-  integrity sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==
+"@mui/utils@^6.1.6", "@mui/utils@^6.4.8":
+  version "6.4.8"
+  resolved "https://registry.npmjs.org/@mui/utils/-/utils-6.4.8.tgz"
+  integrity sha512-C86gfiZ5BfZ51KqzqoHi1WuuM2QdSKoFhbkZeAfQRB+jCc4YNhhj11UXFVMMsqBgZ+Zy8IHNJW3M9Wj/LOwRXQ==
   dependencies:
     "@babel/runtime" "^7.26.0"
-    "@mui/types" "^7.2.19"
-    "@types/prop-types" "^15.7.13"
+    "@mui/types" "~7.2.24"
+    "@types/prop-types" "^15.7.14"
     clsx "^2.1.1"
     prop-types "^15.8.1"
-    react-is "^18.3.1"
+    react-is "^19.0.0"
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -1677,10 +1684,10 @@
   resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
-"@types/prop-types@*", "@types/prop-types@^15.7.12", "@types/prop-types@^15.7.13":
-  version "15.7.13"
-  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz"
-  integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
+"@types/prop-types@*", "@types/prop-types@^15.7.12", "@types/prop-types@^15.7.14":
+  version "15.7.14"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz"
+  integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
 
 "@types/react-dom@*", "@types/react-dom@^18.3.1":
   version "18.3.1"
@@ -1696,12 +1703,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.11":
-  version "4.4.11"
-  resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz"
-  integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==
-  dependencies:
-    "@types/react" "*"
+"@types/react-transition-group@^4.4.12":
+  version "4.4.12"
+  resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz"
+  integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
 
 "@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react@^17.0.0 || ^18.0.0", "@types/react@^17.0.0 || ^18.0.0 || ^19.0.0", "@types/react@^18.3.12", "@types/react@16 || 17 || 18":
   version "18.3.12"
@@ -2624,6 +2629,8 @@ fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
@@ -3796,6 +3803,11 @@ react-is@^18.3.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-is@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz"
+  integrity sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==
+
 react-leaflet@^4.2.1:
   version "4.2.1"
   resolved "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz"

From f3b41ff3360a151aa782bd3ccc6f04855f6f845d Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Mon, 24 Mar 2025 15:52:01 +0700
Subject: [PATCH 19/53] update

---
 src/routing/AppRoutingSetup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routing/AppRoutingSetup.tsx b/src/routing/AppRoutingSetup.tsx
index 3c9ee50..9b076f5 100644
--- a/src/routing/AppRoutingSetup.tsx
+++ b/src/routing/AppRoutingSetup.tsx
@@ -33,7 +33,7 @@ import Municipios from '@/pages/master/municipios/Municipios';
 import ProfessionMaster from '@/pages/master/profession/ProfessionMaster';
 import ProductsMaster from '@/pages/master/products/ProductsMaster';
 import ProviderMaster from '@/pages/master/provider/ProviderMaster';
-import Transaction from '@/pages/transaction/transaction';
+// import Transaction from '@/pages/transaction/transaction';
 import ConversionMaster from '@/pages/master/conversion/ConversionMaster';
 import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster';
 

From 884617ac3c8c7492b5f6d6cd9d5ef5338b5efebc Mon Sep 17 00:00:00 2001
From: Raja Oktafrianto <rajaoktafrianto3.com>
Date: Mon, 24 Mar 2025 16:04:52 +0700
Subject: [PATCH 20/53] scroll bar add data postu, sucos, aldeias active. hide
 icon filter manage user & menu. message error in manage user done

---
 src/pages/master/aldeias/AldeiasMaster.tsx                | 2 +-
 src/pages/master/aldeias/blocks/AddDialog.tsx             | 5 ++++-
 src/pages/master/postoadms/blocks/AddDialog.tsx           | 7 +++++--
 src/pages/master/postoadms/blocks/ListToolbar.tsx         | 4 +---
 .../master/postoadms/hooks/ManagePostoAdmsContext.tsx     | 2 +-
 src/pages/master/products/blocks/AddDialog.tsx            | 8 +++++---
 src/pages/master/sucos/SucosMaster.tsx                    | 2 +-
 src/pages/master/sucos/blocks/AddDialog.tsx               | 5 ++++-
 src/pages/master/sucos/blocks/ListToolbar.tsx             | 8 --------
 src/pages/menu/manage-menu/blocks/ListToolbar.tsx         | 6 +++---
 .../settings/user/manage-user/blocks/ListToolBar.tsx      | 6 +++---
 src/partials/dropdowns/user/DropdownUser.tsx              | 6 +++++-
 12 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/pages/master/aldeias/AldeiasMaster.tsx b/src/pages/master/aldeias/AldeiasMaster.tsx
index a3d0ad7..3ebb197 100644
--- a/src/pages/master/aldeias/AldeiasMaster.tsx
+++ b/src/pages/master/aldeias/AldeiasMaster.tsx
@@ -9,7 +9,7 @@ const AldeiasMaster = () => {
   return (
     <ManageAldeiasContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Aldeias</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Aldeias</h1>
         <Breadcrumbs sx={{ mb: 2 }}>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>
diff --git a/src/pages/master/aldeias/blocks/AddDialog.tsx b/src/pages/master/aldeias/blocks/AddDialog.tsx
index af089ef..731ceba 100644
--- a/src/pages/master/aldeias/blocks/AddDialog.tsx
+++ b/src/pages/master/aldeias/blocks/AddDialog.tsx
@@ -172,7 +172,10 @@ const AddDialog = () => {
                             'Select Sucos'}
                         </button>
                       </PopoverTrigger>
-                      <PopoverContent className="w-[400px] p-0">
+                      <PopoverContent
+                        className="w-[400px] p-0"
+                        onWheel={(e) => e.stopPropagation()}
+                      >
                         <Command>
                           <CommandInput placeholder="Search Sucos..." />
                           <CommandList>
diff --git a/src/pages/master/postoadms/blocks/AddDialog.tsx b/src/pages/master/postoadms/blocks/AddDialog.tsx
index fa7c7dd..eaa8b1e 100644
--- a/src/pages/master/postoadms/blocks/AddDialog.tsx
+++ b/src/pages/master/postoadms/blocks/AddDialog.tsx
@@ -174,10 +174,13 @@ const AddDialog = () => {
                             ?.name || 'Select Municipios'}
                         </button>
                       </PopoverTrigger>
-                      <PopoverContent className="w-[400px] p-0">
+                      <PopoverContent
+                        className="w-[400px] p-0"
+                        onWheel={(e) => e.stopPropagation()}
+                      >
                         <Command>
                           <CommandInput placeholder="Search Municipios..." />
-                          <CommandList>
+                          <CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
                             <CommandEmpty>No Municipio found.</CommandEmpty>
                             <CommandGroup>
                               {municipios.map((municipio) => (
diff --git a/src/pages/master/postoadms/blocks/ListToolbar.tsx b/src/pages/master/postoadms/blocks/ListToolbar.tsx
index 60ab7d2..04742a3 100644
--- a/src/pages/master/postoadms/blocks/ListToolbar.tsx
+++ b/src/pages/master/postoadms/blocks/ListToolbar.tsx
@@ -18,9 +18,7 @@ const ListToolbar = () => {
                 type="text"
                 placeholder="Search Postu"
                 value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) =>
-                  table.getColumn('name')?.setFilterValue(event.target.value)
-                }
+                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />
             </label>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
diff --git a/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx
index ec68ee0..ef6f7b5 100644
--- a/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx
+++ b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx
@@ -99,7 +99,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
       {
         accessorFn: (row) => row.municipios_name,
         id: 'municipios_name',
-        header: ({ column }) => <DataGridColumnHeader title="Municipio Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Municipios Name" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {
diff --git a/src/pages/master/products/blocks/AddDialog.tsx b/src/pages/master/products/blocks/AddDialog.tsx
index 343e076..dc53b39 100644
--- a/src/pages/master/products/blocks/AddDialog.tsx
+++ b/src/pages/master/products/blocks/AddDialog.tsx
@@ -155,9 +155,11 @@ const AddDialog = () => {
         <DialogBody ref={parentRef} className="overflow-y-auto">
           <div className="flex flex-col">
             {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
+              <div className="fixed top-[70px] left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
+                <Alert variant="danger">
+                  <h3>{alert.message}</h3>
+                </Alert>
+              </div>
             )}
 
             <form onSubmit={handleSubmit}>
diff --git a/src/pages/master/sucos/SucosMaster.tsx b/src/pages/master/sucos/SucosMaster.tsx
index c698cfa..ac7b7e5 100644
--- a/src/pages/master/sucos/SucosMaster.tsx
+++ b/src/pages/master/sucos/SucosMaster.tsx
@@ -10,7 +10,7 @@ const SucosMaster = () => {
   return (
     <ManageSucosContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Sucos</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Sucos</h1>
         <Breadcrumbs sx={{ mb: 2 }}>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>
diff --git a/src/pages/master/sucos/blocks/AddDialog.tsx b/src/pages/master/sucos/blocks/AddDialog.tsx
index ea31fe8..822fe24 100644
--- a/src/pages/master/sucos/blocks/AddDialog.tsx
+++ b/src/pages/master/sucos/blocks/AddDialog.tsx
@@ -170,7 +170,10 @@ const AddDialog = () => {
                             ?.PostoAdms_name || 'Select Posto Administrativo'}
                         </button>
                       </PopoverTrigger>
-                      <PopoverContent className="w-[400px] p-0">
+                      <PopoverContent
+                        className="w-[400px] p-0"
+                        onWheel={(e) => e.stopPropagation()}
+                      >
                         <Command>
                           <CommandInput placeholder="Search Posto Adms..." />
                           <CommandList>
diff --git a/src/pages/master/sucos/blocks/ListToolbar.tsx b/src/pages/master/sucos/blocks/ListToolbar.tsx
index 9e822bb..dcdf109 100644
--- a/src/pages/master/sucos/blocks/ListToolbar.tsx
+++ b/src/pages/master/sucos/blocks/ListToolbar.tsx
@@ -21,14 +21,6 @@ const ListToolbar = () => {
                   table.getColumn('sucos_name')?.setFilterValue(event.target.value)
                 }
               />
-              <input
-                type="text"
-                placeholder="Search Posto Administrativo"
-                value={String(table.getColumn(`posto_name`)?.getFilterValue() ?? '')}
-                onChange={(event) =>
-                  table.getColumn('posto_name')?.setFilterValue(event.target.value)
-                }
-              />
             </label>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
diff --git a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
index 784c705..c6993af 100644
--- a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
+++ b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
@@ -20,7 +20,7 @@ const ListToolbar = () => {
                 onChange={(event) => table.getColumn('subMenu')?.setFilterValue(event.target.value)}
               />
             </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
+            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -28,9 +28,9 @@ const ListToolbar = () => {
                 // onClick={handleFilterData}
               >
                 {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-                <KeenIcon icon="filter" />
+            {/* <KeenIcon icon="filter" />
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button
diff --git a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
index 2528400..70eb5be 100644
--- a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
+++ b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
@@ -22,7 +22,7 @@ const ListToolBar = () => {
                 }
               />
             </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
+            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -30,9 +30,9 @@ const ListToolBar = () => {
                 // onClick={handleFilterData}
               >
                 {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-                <KeenIcon icon="filter" />
+            {/* <KeenIcon icon="filter" />
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button
diff --git a/src/partials/dropdowns/user/DropdownUser.tsx b/src/partials/dropdowns/user/DropdownUser.tsx
index 0ccf0eb..c272635 100644
--- a/src/partials/dropdowns/user/DropdownUser.tsx
+++ b/src/partials/dropdowns/user/DropdownUser.tsx
@@ -110,7 +110,11 @@ const DropdownUser = ({ menuItemRef }: IDropdownUserProps) => {
             </Alert>
           </DialogHeader>
           <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-            <Button variant={'outlined'} onClick={() => setShowLogoutDialog(false)}>
+            <Button
+              variant={'outlined'}
+              onClick={() => setShowLogoutDialog(false)}
+              style={{ color: 'grey', borderColor: 'grey' }}
+            >
               Cancel
             </Button>
             <Button variant="outlined" color="error" onClick={handleLogout}>

From c8ad02c8e1c98fbe0082a17c13621d5cf5e37a6c Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Mon, 24 Mar 2025 16:05:32 +0700
Subject: [PATCH 21/53] update

---
 src/routing/AppRoutingSetup.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routing/AppRoutingSetup.tsx b/src/routing/AppRoutingSetup.tsx
index 9b076f5..59003b1 100644
--- a/src/routing/AppRoutingSetup.tsx
+++ b/src/routing/AppRoutingSetup.tsx
@@ -19,7 +19,8 @@ import AccessType from '@/pages/access/access-type/AccessType';
 import MemberCredential from '@/pages/access/member-credentials/MemberCredentials';
 import ManageCurrency from '@/pages/account/manage-currency/ManageCurrency';
 import ManageNotification from '@/pages/notification/ManageNotification';
-import Transaction from '@/pages/transaction/Transaction';
+// import Transaction from '@/pages/transaction/Transaction';
+import Transaction from '@/pages/transaction/transaction';
 import ManageMenu from '@/pages/menu/manage-menu/ManageMenu';
 import Welcome from '@/pages/menu/welcome/Welcome';
 import Inbox from '@/pages/message/Inbox';

From c660fe2d8f03027d5c901a2412b6a212d88de474 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Mon, 24 Mar 2025 16:06:53 +0700
Subject: [PATCH 22/53] update

---
 src/routing/AppRoutingSetup.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/routing/AppRoutingSetup.tsx b/src/routing/AppRoutingSetup.tsx
index 59003b1..c7a50c6 100644
--- a/src/routing/AppRoutingSetup.tsx
+++ b/src/routing/AppRoutingSetup.tsx
@@ -19,7 +19,6 @@ import AccessType from '@/pages/access/access-type/AccessType';
 import MemberCredential from '@/pages/access/member-credentials/MemberCredentials';
 import ManageCurrency from '@/pages/account/manage-currency/ManageCurrency';
 import ManageNotification from '@/pages/notification/ManageNotification';
-// import Transaction from '@/pages/transaction/Transaction';
 import Transaction from '@/pages/transaction/transaction';
 import ManageMenu from '@/pages/menu/manage-menu/ManageMenu';
 import Welcome from '@/pages/menu/welcome/Welcome';
@@ -34,7 +33,6 @@ import Municipios from '@/pages/master/municipios/Municipios';
 import ProfessionMaster from '@/pages/master/profession/ProfessionMaster';
 import ProductsMaster from '@/pages/master/products/ProductsMaster';
 import ProviderMaster from '@/pages/master/provider/ProviderMaster';
-// import Transaction from '@/pages/transaction/transaction';
 import ConversionMaster from '@/pages/master/conversion/ConversionMaster';
 import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster';
 
@@ -80,7 +78,6 @@ const AppRoutingSetup = (): ReactElement => {
           <Route path="/transaction" element={<Transaction />} />
           <Route path="/menu/menu-management" element={<ManageMenu />} />
           <Route path="/menu/welcome" element={<Welcome />} />
-          <Route path="/transaction" element={<Transaction />} />
           <Route path="/message/inbox" element={<Inbox />} />
           <Route path="/webservice/webservice-management" element={<ManageWebServices />} />
           <Route path="/settings/user-management/manage-user" element={<ManageUserPage />} />

From 986723d03a5d135ebf5bf20334f9a3df7f69a063 Mon Sep 17 00:00:00 2001
From: Raja Oktafrianto <rajaoktafrianto3.com>
Date: Mon, 24 Mar 2025 16:13:05 +0700
Subject: [PATCH 23/53] test

---
 yarn.lock | 402 ++++++++++++++++--------------------------------------
 1 file changed, 115 insertions(+), 287 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index f128329..644ce57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -39,7 +39,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.0.tgz"
   integrity sha512-qETICbZSLe7uXv9VE8T/RWOdIE5qqyTucOt4zLYMafj2MRO271VGgLd4RACJMeBO37UPWhXiKMBk7YlJ0fOzQA==
 
-"@babel/core@^7.25.2":
+"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.25.2":
   version "7.26.0"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz"
   integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
@@ -540,13 +540,6 @@
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz"
   integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
 
-"@emotion/is-prop-valid@1.2.2":
-  version "1.2.2"
-  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz"
-  integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==
-  dependencies:
-    "@emotion/memoize" "^0.8.1"
-
 "@emotion/is-prop-valid@^1.3.0":
   version "1.3.1"
   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz"
@@ -554,6 +547,13 @@
   dependencies:
     "@emotion/memoize" "^0.9.0"
 
+"@emotion/is-prop-valid@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz"
+  integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+
 "@emotion/memoize@^0.8.1":
   version "0.8.1"
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz"
@@ -564,7 +564,7 @@
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz"
   integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
 
-"@emotion/react@^11.13.3":
+"@emotion/react@^11.0.0-rc.0", "@emotion/react@^11.13.3", "@emotion/react@^11.4.1", "@emotion/react@^11.5.0":
   version "11.13.3"
   resolved "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz"
   integrity sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==
@@ -594,7 +594,7 @@
   resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz"
   integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
 
-"@emotion/styled@^11.13.0":
+"@emotion/styled@^11.13.0", "@emotion/styled@^11.3.0":
   version "11.13.0"
   resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz"
   integrity sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==
@@ -606,16 +606,16 @@
     "@emotion/use-insertion-effect-with-fallbacks" "^1.1.0"
     "@emotion/utils" "^1.4.0"
 
-"@emotion/unitless@0.8.1":
-  version "0.8.1"
-  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz"
-  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
-
 "@emotion/unitless@^0.10.0":
   version "0.10.0"
   resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz"
   integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
 
+"@emotion/unitless@0.8.1":
+  version "0.8.1"
+  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
+
 "@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz"
@@ -631,121 +631,11 @@
   resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz"
   integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
 
-"@esbuild/aix-ppc64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
-  integrity sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==
-
-"@esbuild/android-arm64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz#09d9b4357780da9ea3a7dfb833a1f1ff439b4052"
-  integrity sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==
-
-"@esbuild/android-arm@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz#9b04384fb771926dfa6d7ad04324ecb2ab9b2e28"
-  integrity sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==
-
-"@esbuild/android-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz#29918ec2db754cedcb6c1b04de8cd6547af6461e"
-  integrity sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==
-
 "@esbuild/darwin-arm64@0.21.5":
   version "0.21.5"
   resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz"
   integrity sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==
 
-"@esbuild/darwin-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz#c13838fa57372839abdddc91d71542ceea2e1e22"
-  integrity sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==
-
-"@esbuild/freebsd-arm64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz#646b989aa20bf89fd071dd5dbfad69a3542e550e"
-  integrity sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==
-
-"@esbuild/freebsd-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz#aa615cfc80af954d3458906e38ca22c18cf5c261"
-  integrity sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==
-
-"@esbuild/linux-arm64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz#70ac6fa14f5cb7e1f7f887bcffb680ad09922b5b"
-  integrity sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==
-
-"@esbuild/linux-arm@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz#fc6fd11a8aca56c1f6f3894f2bea0479f8f626b9"
-  integrity sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==
-
-"@esbuild/linux-ia32@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz#3271f53b3f93e3d093d518d1649d6d68d346ede2"
-  integrity sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==
-
-"@esbuild/linux-loong64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz#ed62e04238c57026aea831c5a130b73c0f9f26df"
-  integrity sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==
-
-"@esbuild/linux-mips64el@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz#e79b8eb48bf3b106fadec1ac8240fb97b4e64cbe"
-  integrity sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==
-
-"@esbuild/linux-ppc64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz#5f2203860a143b9919d383ef7573521fb154c3e4"
-  integrity sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==
-
-"@esbuild/linux-riscv64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz#07bcafd99322d5af62f618cb9e6a9b7f4bb825dc"
-  integrity sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==
-
-"@esbuild/linux-s390x@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz#b7ccf686751d6a3e44b8627ababc8be3ef62d8de"
-  integrity sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==
-
-"@esbuild/linux-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz#6d8f0c768e070e64309af8004bb94e68ab2bb3b0"
-  integrity sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==
-
-"@esbuild/netbsd-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz#bbe430f60d378ecb88decb219c602667387a6047"
-  integrity sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==
-
-"@esbuild/openbsd-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz#99d1cf2937279560d2104821f5ccce220cb2af70"
-  integrity sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==
-
-"@esbuild/sunos-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz#08741512c10d529566baba837b4fe052c8f3487b"
-  integrity sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==
-
-"@esbuild/win32-arm64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz#675b7385398411240735016144ab2e99a60fc75d"
-  integrity sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==
-
-"@esbuild/win32-ia32@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz#1bfc3ce98aa6ca9a0969e4d2af72144c59c1193b"
-  integrity sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==
-
-"@esbuild/win32-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c"
-  integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
-
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.1"
   resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz"
@@ -787,16 +677,16 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@9.13.0":
-  version "9.13.0"
-  resolved "https://registry.npmjs.org/@eslint/js/-/js-9.13.0.tgz"
-  integrity sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==
-
 "@eslint/js@^9.14.0":
   version "9.14.0"
   resolved "https://registry.npmjs.org/@eslint/js/-/js-9.14.0.tgz"
   integrity sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==
 
+"@eslint/js@9.13.0":
+  version "9.13.0"
+  resolved "https://registry.npmjs.org/@eslint/js/-/js-9.13.0.tgz"
+  integrity sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==
+
 "@eslint/object-schema@^2.1.4":
   version "2.1.4"
   resolved "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz"
@@ -814,7 +704,7 @@
   resolved "https://registry.npmjs.org/@faker-js/faker/-/faker-9.1.0.tgz"
   integrity sha512-GJvX9iM9PBtKScJVlXQ0tWpihK3i0pha/XAhzQa1hPK/ILLa1Wq3I63Ij7lRtqTwmdTxRCyrUhLC5Sly9SLbug==
 
-"@firebase/app@^0.10.15":
+"@firebase/app@^0.10.15", "@firebase/app@0.x":
   version "0.10.15"
   resolved "https://registry.npmjs.org/@firebase/app/-/app-0.10.15.tgz"
   integrity sha512-he6qlG3pmwL+LHdG/BrSMBQeJzzutciq4fpXN3lGa1uSwYSijJ24VtakS/bP2X9SiDf8jGywJ4u+OgXAenJsNg==
@@ -1094,13 +984,6 @@
   resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz"
   integrity sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==
 
-"@mui/icons-material@^6.4.6":
-  version "6.4.7"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-6.4.7.tgz#078406b61c7d17230b8633643dbb458f89e02059"
-  integrity sha512-Rk8cs9ufQoLBw582Rdqq7fnSXXZTqhYRbpe1Y5SAz9lJKZP3CIdrj0PfG8HJLGw1hrsHFN/rkkm70IDzhJsG1g==
-  dependencies:
-    "@babel/runtime" "^7.26.0"
-
 "@mui/material@^6.1.6":
   version "6.1.6"
   resolved "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz"
@@ -1191,7 +1074,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -1415,7 +1298,7 @@
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
-"@radix-ui/react-id@1.1.0", "@radix-ui/react-id@^1.1.0":
+"@radix-ui/react-id@^1.1.0", "@radix-ui/react-id@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz"
   integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
@@ -1499,7 +1382,7 @@
     "@radix-ui/react-compose-refs" "1.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-primitive@2.0.0", "@radix-ui/react-primitive@^2.0.0":
+"@radix-ui/react-primitive@^2.0.0", "@radix-ui/react-primitive@2.0.0":
   version "2.0.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz"
   integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==
@@ -1587,7 +1470,7 @@
     "@radix-ui/react-use-previous" "1.1.0"
     "@radix-ui/react-use-size" "1.1.0"
 
-"@radix-ui/react-slot@1.1.0", "@radix-ui/react-slot@^1.1.0":
+"@radix-ui/react-slot@^1.1.0", "@radix-ui/react-slot@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz"
   integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
@@ -1690,96 +1573,11 @@
   resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz"
   integrity sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==
 
-"@rollup/rollup-android-arm-eabi@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.2.tgz#07db37fcd9d401aae165f662c0069efd61d4ffcc"
-  integrity sha512-ufoveNTKDg9t/b7nqI3lwbCG/9IJMhADBNjjz/Jn6LxIZxD7T5L8l2uO/wD99945F1Oo8FvgbbZJRguyk/BdzA==
-
-"@rollup/rollup-android-arm64@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.2.tgz#160975402adf85ecd58a0721ad60ae1779a68147"
-  integrity sha512-iZoYCiJz3Uek4NI0J06/ZxUgwAfNzqltK0MptPDO4OR0a88R4h0DSELMsflS6ibMCJ4PnLvq8f7O1d7WexUvIA==
-
 "@rollup/rollup-darwin-arm64@4.24.2":
   version "4.24.2"
   resolved "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.2.tgz"
   integrity sha512-/UhrIxobHYCBfhi5paTkUDQ0w+jckjRZDZ1kcBL132WeHZQ6+S5v9jQPVGLVrLbNUebdIRpIt00lQ+4Z7ys4Rg==
 
-"@rollup/rollup-darwin-x64@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.2.tgz#3f4987eff6195532037c50b8db92736e326b5bb2"
-  integrity sha512-1F/jrfhxJtWILusgx63WeTvGTwE4vmsT9+e/z7cZLKU8sBMddwqw3UV5ERfOV+H1FuRK3YREZ46J4Gy0aP3qDA==
-
-"@rollup/rollup-freebsd-arm64@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.2.tgz#15fe184ecfafc635879500f6985c954e57697c44"
-  integrity sha512-1YWOpFcGuC6iGAS4EI+o3BV2/6S0H+m9kFOIlyFtp4xIX5rjSnL3AwbTBxROX0c8yWtiWM7ZI6mEPTI7VkSpZw==
-
-"@rollup/rollup-freebsd-x64@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.2.tgz#c72d37315d36b6e0763b7aabb6ae53c361b45e05"
-  integrity sha512-3qAqTewYrCdnOD9Gl9yvPoAoFAVmPJsBvleabvx4bnu1Kt6DrB2OALeRVag7BdWGWLhP1yooeMLEi6r2nYSOjg==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.2.tgz#f274f81abf845dcca5f1f40d434a09a79a3a73a0"
-  integrity sha512-ArdGtPHjLqWkqQuoVQ6a5UC5ebdX8INPuJuJNWRe0RGa/YNhVvxeWmCTFQ7LdmNCSUzVZzxAvUznKaYx645Rig==
-
-"@rollup/rollup-linux-arm-musleabihf@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.2.tgz#9edaeb1a9fa7d4469917cb0614f665f1cf050625"
-  integrity sha512-B6UHHeNnnih8xH6wRKB0mOcJGvjZTww1FV59HqJoTJ5da9LCG6R4SEBt6uPqzlawv1LoEXSS0d4fBlHNWl6iYw==
-
-"@rollup/rollup-linux-arm64-gnu@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.2.tgz#6eb6851f594336bfa00f074f58a00a61e9751493"
-  integrity sha512-kr3gqzczJjSAncwOS6i7fpb4dlqcvLidqrX5hpGBIM1wtt0QEVtf4wFaAwVv8QygFU8iWUMYEoJZWuWxyua4GQ==
-
-"@rollup/rollup-linux-arm64-musl@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.2.tgz#9d8dc8e80df8f156d2888ecb8d6c96d653580731"
-  integrity sha512-TDdHLKCWgPuq9vQcmyLrhg/bgbOvIQ8rtWQK7MRxJ9nvaxKx38NvY7/Lo6cYuEnNHqf6rMqnivOIPIQt6H2AoA==
-
-"@rollup/rollup-linux-powerpc64le-gnu@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.2.tgz#358e3e7dda2d60c46ff7c74f7075045736df5b50"
-  integrity sha512-xv9vS648T3X4AxFFZGWeB5Dou8ilsv4VVqJ0+loOIgDO20zIhYfDLkk5xoQiej2RiSQkld9ijF/fhLeonrz2mw==
-
-"@rollup/rollup-linux-riscv64-gnu@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.2.tgz#b08461ace599c3f0b5f27051f1756b6cf1c78259"
-  integrity sha512-tbtXwnofRoTt223WUZYiUnbxhGAOVul/3StZ947U4A5NNjnQJV5irKMm76G0LGItWs6y+SCjUn/Q0WaMLkEskg==
-
-"@rollup/rollup-linux-s390x-gnu@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.2.tgz#daab36c9b5c8ac4bfe5a9c4c39ad711464b7dfee"
-  integrity sha512-gc97UebApwdsSNT3q79glOSPdfwgwj5ELuiyuiMY3pEWMxeVqLGKfpDFoum4ujivzxn6veUPzkGuSYoh5deQ2Q==
-
-"@rollup/rollup-linux-x64-gnu@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.2.tgz#4cc3a4f31920bdb028dbfd7ce0e972a17424a63c"
-  integrity sha512-jOG/0nXb3z+EM6SioY8RofqqmZ+9NKYvJ6QQaa9Mvd3RQxlH68/jcB/lpyVt4lCiqr04IyaC34NzhUqcXbB5FQ==
-
-"@rollup/rollup-linux-x64-musl@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.2.tgz#59800e26c538517ee05f4645315d9e1aded93200"
-  integrity sha512-XAo7cJec80NWx9LlZFEJQxqKOMz/lX3geWs2iNT5CHIERLFfd90f3RYLLjiCBm1IMaQ4VOX/lTC9lWfzzQm14Q==
-
-"@rollup/rollup-win32-arm64-msvc@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.2.tgz#c80e2c33c952b6b171fa6ad9a97dfbb2e4ebee44"
-  integrity sha512-A+JAs4+EhsTjnPQvo9XY/DC0ztaws3vfqzrMNMKlwQXuniBKOIIvAAI8M0fBYiTCxQnElYu7mLk7JrhlQ+HeOw==
-
-"@rollup/rollup-win32-ia32-msvc@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.2.tgz#a1e9d275cb16f6d5feb9c20aee7e897b1e193359"
-  integrity sha512-ZhcrakbqA1SCiJRMKSU64AZcYzlZ/9M5LaYil9QWxx9vLnkQ9Vnkve17Qn4SjlipqIIBFKjBES6Zxhnvh0EAEw==
-
-"@rollup/rollup-win32-x64-msvc@4.24.2":
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.2.tgz#0610af0fb8fec52be779d5b163bbbd6930150467"
-  integrity sha512-2mLH46K1u3r6uwc95hU+OR9q/ggYMpnS7pSp83Ece1HUQgF9Nh/QwTK5rcgbFnV9j+08yBrU5sA/P0RK2MSBNA==
-
 "@tanstack/query-core@5.59.20":
   version "5.59.20"
   resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.20.tgz"
@@ -1837,7 +1635,7 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
-"@types/estree@1.0.6", "@types/estree@^1.0.6":
+"@types/estree@^1.0.6", "@types/estree@1.0.6":
   version "1.0.6"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz"
   integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
@@ -1847,7 +1645,7 @@
   resolved "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz"
   integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
 
-"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@3", "@types/hoist-non-react-statics@^3.3.1":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1", "@types/hoist-non-react-statics@3":
   version "3.3.5"
   resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz"
   integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
@@ -1867,7 +1665,7 @@
   dependencies:
     "@types/geojson" "*"
 
-"@types/node@>=12.12.47", "@types/node@>=13.7.0", "@types/node@^22.9.0":
+"@types/node@^18.0.0 || >=20.0.0", "@types/node@^22.9.0", "@types/node@>=12.12.47", "@types/node@>=13.7.0":
   version "22.9.0"
   resolved "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz"
   integrity sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==
@@ -1884,7 +1682,7 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz"
   integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
 
-"@types/react-dom@^18.3.1":
+"@types/react-dom@*", "@types/react-dom@^18.3.1":
   version "18.3.1"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==
@@ -1905,7 +1703,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@^18.3.12":
+"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react@^17.0.0 || ^18.0.0", "@types/react@^17.0.0 || ^18.0.0 || ^19.0.0", "@types/react@^18.3.12", "@types/react@16 || 17 || 18":
   version "18.3.12"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz"
   integrity sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==
@@ -1922,17 +1720,17 @@
     "@types/react" "*"
     csstype "^3.0.2"
 
-"@types/stylis@4.2.5":
-  version "4.2.5"
-  resolved "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz"
-  integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==
-
 "@types/stylis@^4.2.6":
   version "4.2.6"
   resolved "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.6.tgz"
   integrity sha512-4nebF2ZJGzQk0ka0O6+FZUWceyFv4vWq/0dXBMmrSeAwzOuOd/GxE5Pa64d/ndeNLG73dXoBsRzvtsVsYUv6Uw==
 
-"@typescript-eslint/eslint-plugin@8.14.0", "@typescript-eslint/eslint-plugin@^8.14.0":
+"@types/stylis@4.2.5":
+  version "4.2.5"
+  resolved "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz"
+  integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==
+
+"@typescript-eslint/eslint-plugin@^8.14.0", "@typescript-eslint/eslint-plugin@8.14.0":
   version "8.14.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.14.0.tgz"
   integrity sha512-tqp8H7UWFaZj0yNO6bycd5YjMwxa6wIHOLZvWPkidwbgLCsBMetQoGj7DPuAlWa2yGO3H48xmPwjhsSPPCGU5w==
@@ -1947,7 +1745,7 @@
     natural-compare "^1.4.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/parser@8.14.0", "@typescript-eslint/parser@^8.14.0":
+"@typescript-eslint/parser@^8.0.0 || ^8.0.0-alpha.0", "@typescript-eslint/parser@^8.14.0", "@typescript-eslint/parser@8.14.0":
   version "8.14.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.14.0.tgz"
   integrity sha512-2p82Yn9juUJq0XynBXtFCyrBDb6/dJombnz6vbo6mgQEtWHfvHbQuEa9kAOVIt1c9YFwi7H6WxtPj1kg+80+RA==
@@ -2056,7 +1854,7 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.12.0:
+"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.12.0:
   version "8.14.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz"
   integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
@@ -2106,7 +1904,7 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-apexcharts@3.52.0:
+apexcharts@^3.41.0, apexcharts@3.52.0:
   version "3.52.0"
   resolved "https://registry.npmjs.org/apexcharts/-/apexcharts-3.52.0.tgz"
   integrity sha512-7dg0ADKs8AA89iYMZMe2sFDG0XK5PfqllKV9N+i3hKHm3vEtdhwz8AlXGm+/b0nJ6jKiaXsqci5LfVxNhtB+dA==
@@ -2222,7 +2020,7 @@ broadcast-channel@^3.4.1:
     rimraf "3.0.2"
     unload "2.2.0"
 
-browserslist@^4.23.1, browserslist@^4.23.3, browserslist@^4.24.0:
+browserslist@^4.23.1, browserslist@^4.23.3, browserslist@^4.24.0, "browserslist@>= 4.21.0":
   version "4.24.2"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz"
   integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==
@@ -2302,11 +2100,6 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
-clsx@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
-  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
-
 clsx@^1.1.0:
   version "1.2.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
@@ -2317,6 +2110,11 @@ clsx@^2.1.0, clsx@^2.1.1:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
+clsx@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 cmdk@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/cmdk/-/cmdk-1.0.4.tgz"
@@ -2436,12 +2234,12 @@ cssjanus@^2.0.1:
   resolved "https://registry.npmjs.org/cssjanus/-/cssjanus-2.3.0.tgz"
   integrity sha512-ZZXXn51SnxRxAZ6fdY7mBDPmA4OZd83q/J9Gdqz3YmE9TUq+9tZl+tdOnCi7PpNygI6PEkehj9rgifv5+W8a5A==
 
-csstype@3.1.3, csstype@^3.0.2, csstype@^3.1.3:
+csstype@^3.0.10, csstype@^3.0.2, csstype@^3.1.3, csstype@3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-date-fns@^3.0.0:
+"date-fns@^2.28.0 || ^3.0.0", date-fns@^3.0.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz"
   integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
@@ -2583,7 +2381,7 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
-eslint-config-prettier@^9.1.0:
+eslint-config-prettier@*, eslint-config-prettier@^9.1.0:
   version "9.1.0"
   resolved "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz"
   integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
@@ -2624,7 +2422,7 @@ eslint-visitor-keys@^4.1.0:
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.1.0.tgz"
   integrity sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==
 
-eslint@^9.13.0:
+"eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^8.57.0 || ^9.0.0", eslint@^9.13.0, eslint@>=7, eslint@>=7.0.0, eslint@>=8.0.0:
   version "9.13.0"
   resolved "https://registry.npmjs.org/eslint/-/eslint-9.13.0.tgz"
   integrity sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==
@@ -2824,12 +2622,10 @@ fs.realpath@^1.0.0:
 
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
-function-bind@^1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
 gensync@^1.0.0-beta.2:
@@ -2858,7 +2654,7 @@ get-nonce@^1.0.0:
   resolved "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz"
   integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
 
-glob-parent@^5.1.2, glob-parent@~5.1.2:
+glob-parent@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -2872,6 +2668,13 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob@^10.3.10:
   version "10.4.5"
   resolved "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz"
@@ -2952,7 +2755,7 @@ hasown@^2.0.0, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-hoist-non-react-statics@3, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@3:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -3072,7 +2875,7 @@ jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jiti@^1.18.2, jiti@^1.21.0:
+jiti@*, jiti@^1.18.2, jiti@^1.21.0:
   version "1.21.6"
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
@@ -3136,7 +2939,7 @@ kolorist@^1.8.0:
   resolved "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz"
   integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
 
-leaflet@^1.9.4:
+leaflet@^1.9.0, leaflet@^1.9.4:
   version "1.9.4"
   resolved "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz"
   integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
@@ -3270,7 +3073,14 @@ mini-svg-data-uri@^1.4.4:
   resolved "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz"
   integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
 
-minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -3771,7 +3581,15 @@ postcss-selector-not@^8.0.1:
   dependencies:
     postcss-selector-parser "^7.0.0"
 
-postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.1.1:
+postcss-selector-parser@^6.0.11:
+  version "6.1.2"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@^6.1.1:
   version "6.1.2"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz"
   integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
@@ -3792,6 +3610,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@^8, postcss@^8.0.0, postcss@^8.0.3, postcss@^8.1.0, postcss@^8.2.14, postcss@^8.4, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.43, postcss@^8.4.49, postcss@^8.4.6, postcss@>=8.0.9:
+  version "8.4.49"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 postcss@8.4.38:
   version "8.4.38"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz"
@@ -3801,15 +3628,6 @@ postcss@8.4.38:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
-postcss@^8.4.23, postcss@^8.4.43, postcss@^8.4.49:
-  version "8.4.49"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz"
-  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.1.1"
-    source-map-js "^1.2.1"
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -3822,7 +3640,7 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^3.3.3:
+prettier@^3.3.3, prettier@>=3.0.0:
   version "3.3.3"
   resolved "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz"
   integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
@@ -3893,7 +3711,7 @@ react-day-picker@^8.10.1:
   resolved "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz"
   integrity sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==
 
-react-dom@^18.3.1:
+"react-dom@^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^18 || ^19 || ^19.0.0-rc", react-dom@^18.0.0, "react-dom@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react-dom@^18.3.1, "react-dom@>= 16.8.0", react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -3906,7 +3724,12 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-fast-compare@^3.1.1, react-fast-compare@^3.2.2:
+react-fast-compare@^3.1.1:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
+react-fast-compare@^3.2.2:
   version "3.2.2"
   resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
@@ -3958,7 +3781,12 @@ react-intl@^6.8.7:
     intl-messageformat "10.7.6"
     tslib "2"
 
-react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -4016,7 +3844,7 @@ react-router-dom@^6.28.0:
     "@remix-run/router" "1.21.0"
     react-router "6.28.0"
 
-react-router@6.28.0, react-router@^6.28.0:
+react-router@^6.28.0, react-router@6.28.0:
   version "6.28.0"
   resolved "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz"
   integrity sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==
@@ -4047,7 +3875,7 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^18.3.1:
+"react@^16.3.0 || ^17.0.0 || ^18.0.0", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc", "react@^16.6.0 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || 17 || 18", "react@^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", "react@^18 || ^19", "react@^18 || ^19 || ^19.0.0-rc", react@^18.0.0, "react@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react@^18.3.1, "react@>= 16.8.0", react@>=0.13, react@>=16.3.0, react@>=16.6.0, react@>=16.8, react@>=16.8.0, "react@16.8 - 18":
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -4172,7 +4000,7 @@ set-function-length@^1.2.1:
     gopd "^1.0.1"
     has-property-descriptors "^1.0.2"
 
-shallowequal@1.1.0, shallowequal@^1.1.0:
+shallowequal@^1.1.0, shallowequal@1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -4294,6 +4122,11 @@ stylis-plugin-rtl@^2.1.1:
   dependencies:
     cssjanus "^2.0.1"
 
+stylis@^4.3.4, stylis@4.x:
+  version "4.3.4"
+  resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz"
+  integrity sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==
+
 stylis@4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz"
@@ -4304,11 +4137,6 @@ stylis@4.3.2:
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz"
   integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==
 
-stylis@^4.3.4:
-  version "4.3.4"
-  resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz"
-  integrity sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==
-
 sucrase@^3.32.0:
   version "3.35.0"
   resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz"
@@ -4355,7 +4183,7 @@ svg.filter.js@^2.0.2:
   dependencies:
     svg.js "^2.2.5"
 
-svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
+svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5, svg.js@>=2.3.x:
   version "2.7.1"
   resolved "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz"
   integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
@@ -4407,7 +4235,7 @@ tailwindcss-animate@^1.0.7:
   resolved "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz"
   integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
 
-tailwindcss@^3.4.14:
+tailwindcss@^3.4.14, "tailwindcss@>=3.0.0 || insiders":
   version "3.4.14"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz"
   integrity sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==
@@ -4486,7 +4314,7 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tslib@2, tslib@^2.0.0, tslib@^2.1.0, tslib@^2.6.2:
+tslib@^2.0.0, tslib@^2.1.0, tslib@^2.6.2, tslib@2:
   version "2.8.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz"
   integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==
@@ -4517,7 +4345,7 @@ typescript-eslint@^8.14.0:
     "@typescript-eslint/parser" "8.14.0"
     "@typescript-eslint/utils" "8.14.0"
 
-typescript@^5.6.3:
+"typescript@^4.7 || 5", typescript@^5.6.3, typescript@>=4.2.0:
   version "5.6.3"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz"
   integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
@@ -4585,7 +4413,7 @@ vite-plugin-windicss@^1.9.3:
     kolorist "^1.8.0"
     windicss "^3.5.6"
 
-vite@^5.4.11:
+"vite@^2.0.1 || ^3.0.0 || ^4.0.0 || ^5.0.0", "vite@^4.2.0 || ^5.0.0", vite@^5.4.11:
   version "5.4.11"
   resolved "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz"
   integrity sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==

From 66c8654bcc728b638dcc2097136fb895c4b457cd Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 24 Mar 2025 16:22:29 +0700
Subject: [PATCH 24/53] fix create products

---
 .../master/products/blocks/AddDialog.tsx      | 84 +++++++++----------
 .../products/hooks/ManageProductsContext.tsx  |  2 +-
 2 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/src/pages/master/products/blocks/AddDialog.tsx b/src/pages/master/products/blocks/AddDialog.tsx
index 343e076..d22de31 100644
--- a/src/pages/master/products/blocks/AddDialog.tsx
+++ b/src/pages/master/products/blocks/AddDialog.tsx
@@ -40,17 +40,17 @@ const AddDialog = () => {
     message: ''
   });
   const initialState = {
-    products_name: '',
-    products_code: '',
-    products_type: '',
-    products_description: '',
-    products_price_point: 0,
-    products_price_cash: 0,
-    products_cashback_point: 0,
-    products_cashback_cash: 0,
-    products_status: '',
-    products_provider: '',
-    products_process_on_third_party: '',
+    name: '',
+    code: '',
+    type: '',
+    description: '',
+    price_point: 0,
+    price_cash: 0,
+    cashback_point: 0,
+    cashback_cash: 0,
+    status: '',
+    provider: '',
+    process_on_third_party: '',
     created_by: '',
     created_at: ''
   };
@@ -104,15 +104,15 @@ const AddDialog = () => {
     e.preventDefault();
 
     if (
-      formField.products_name.trim() === '' ||
-      formField.products_type.trim() === '' ||
-      formField.products_code.trim() === '' ||
-      formField.products_description.trim() === '' ||
-      formField.products_price_point === 0 ||
-      formField.products_price_cash === 0 ||
-      formField.products_cashback_point === 0 ||
-      formField.products_cashback_cash === 0 ||
-      formField.products_status.trim() === '' ||
+      formField.name.trim() === '' ||
+      formField.type.trim() === '' ||
+      formField.code.trim() === '' ||
+      formField.description.trim() === '' ||
+      formField.price_point === 0 ||
+      formField.price_cash === 0 ||
+      formField.cashback_point === 0 ||
+      formField.cashback_cash === 0 ||
+      formField.status.trim() === '' ||
       formField.created_by.trim() === '' ||
       formField.created_at.trim() === ''
     ) {
@@ -170,9 +170,9 @@ const AddDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.products_name}
+                      value={formField.name}
                       onChange={(e) =>
-                        setFormField({ ...formField, products_name: e.target.value })
+                        setFormField({ ...formField, name: e.target.value })
                       }
                     />
                   </div>
@@ -186,9 +186,9 @@ const AddDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.products_type}
+                      value={formField.type}
                       onChange={(e) =>
-                        setFormField({ ...formField, products_type: e.target.value })
+                        setFormField({ ...formField, type: e.target.value })
                       }
                     />
                   </div>
@@ -202,9 +202,9 @@ const AddDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.products_code}
+                      value={formField.code}
                       onChange={(e) =>
-                        setFormField({ ...formField, products_code: e.target.value })
+                        setFormField({ ...formField, code: e.target.value })
                       }
                     />
                   </div>
@@ -218,9 +218,9 @@ const AddDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.products_description}
+                      value={formField.description}
                       onChange={(e) =>
-                        setFormField({ ...formField, products_description: e.target.value })
+                        setFormField({ ...formField, description: e.target.value })
                       }
                     />
                   </div>
@@ -236,12 +236,12 @@ const AddDialog = () => {
                       type="number"
                       min={0}
                       step={0.01}
-                      value={formField.products_price_point}
+                      value={formField.price_point}
                       onChange={(e) => {
                         const value = parseFloat(e.target.value);
                         setFormField({
                           ...formField,
-                          products_price_point: isNaN(value) ? 0 : value
+                          price_point: isNaN(value) ? 0 : value
                         });
                       }}
                     />
@@ -258,12 +258,12 @@ const AddDialog = () => {
                       type="number"
                       min={0}
                       step={0.01}
-                      value={formField.products_price_cash}
+                      value={formField.price_cash}
                       onChange={(e) => {
                         const value = parseFloat(e.target.value);
                         setFormField({
                           ...formField,
-                          products_price_cash: isNaN(value) ? 0 : value
+                          price_cash: isNaN(value) ? 0 : value
                         });
                       }}
                     />
@@ -280,12 +280,12 @@ const AddDialog = () => {
                       type="number"
                       min={0}
                       step={0.01}
-                      value={formField.products_cashback_point}
+                      value={formField.cashback_point}
                       onChange={(e) => {
                         const value = parseFloat(e.target.value);
                         setFormField({
                           ...formField,
-                          products_cashback_point: isNaN(value) ? 0 : value
+                          cashback_point: isNaN(value) ? 0 : value
                         });
                       }}
                     />
@@ -302,12 +302,12 @@ const AddDialog = () => {
                       type="number"
                       min={0}
                       step={0.01}
-                      value={formField.products_cashback_cash}
+                      value={formField.cashback_cash}
                       onChange={(e) => {
                         const value = parseFloat(e.target.value);
                         setFormField({
                           ...formField,
-                          products_cashback_cash: isNaN(value) ? 0 : value
+                          cashback_cash: isNaN(value) ? 0 : value
                         });
                       }}
                     />
@@ -320,9 +320,9 @@ const AddDialog = () => {
                       Status<span className="text-red-500">*</span>
                     </label>
                     <Select
-                      value={formField.products_status}
+                      value={formField.status}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, products_status: value })
+                        setFormField({ ...formField, status: value })
                       }
                     >
                       <SelectTrigger>
@@ -342,9 +342,9 @@ const AddDialog = () => {
                       Provider ID
                     </label>
                     <Select
-                      value={formField.products_provider}
+                      value={formField.provider}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, products_provider: value.toString() })
+                        setFormField({ ...formField, provider: value.toString() })
                       }
                     >
                       <SelectTrigger>
@@ -370,9 +370,9 @@ const AddDialog = () => {
                       Process on Third Party<span className="text-red-500">*</span>
                     </label>
                     <Select
-                      value={formField.products_process_on_third_party}
+                      value={formField.process_on_third_party}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, products_process_on_third_party: value })
+                        setFormField({ ...formField, process_on_third_party: value })
                       }
                     >
                       <SelectTrigger>
diff --git a/src/pages/master/products/hooks/ManageProductsContext.tsx b/src/pages/master/products/hooks/ManageProductsContext.tsx
index 0bc11bc..2de1f75 100644
--- a/src/pages/master/products/hooks/ManageProductsContext.tsx
+++ b/src/pages/master/products/hooks/ManageProductsContext.tsx
@@ -152,7 +152,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
       const response = await GetData(`${API_URL}/product/list`, {
         limit,
         page: page + 1,
-        with_deleted: true,
+        with_deleted: false,
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)

From 0f7cd80e803880333a539879580f10bfbc36f5aa Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 24 Mar 2025 16:25:29 +0700
Subject: [PATCH 25/53] fix field name

---
 src/pages/master/provider/blocks/AddDialog.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/master/provider/blocks/AddDialog.tsx b/src/pages/master/provider/blocks/AddDialog.tsx
index 636ba54..3f5fe6e 100644
--- a/src/pages/master/provider/blocks/AddDialog.tsx
+++ b/src/pages/master/provider/blocks/AddDialog.tsx
@@ -64,8 +64,8 @@ const AddDialog = () => {
     description: '',
     type: '',
     status: '',
-    transactionTypeId: '',
-    agentId: '',
+    transaction_type: '',
+    agent: '',
     created_by: '',
     created_at: ''
   };
@@ -104,15 +104,15 @@ const AddDialog = () => {
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.transactionTypeId.trim() === '' ||
-      formField.agentId.trim() === ''
+      formField.transaction_type === '' ||
+      formField.agent.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
     doCreateProvider(e);
-    // console.log(formField);
+    console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
@@ -263,9 +263,9 @@ const AddDialog = () => {
                       Transaction Type Id<span className="text-red-500">*</span>
                     </label>
                     <Select
-                      value={formField.transactionTypeId}
+                      value={formField.transaction_type}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, transactionTypeId: value })
+                        setFormField({ ...formField, transaction_type: value })
                       }
                     >
                       <SelectTrigger>
@@ -290,7 +290,7 @@ const AddDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {customers.find((customer) => customer.msisdn === formField.agentId)
+                          {customers.find((customer) => customer.msisdn === formField.agent)
                             ?.fullname || 'Select Agent'}
                         </button>
                       </PopoverTrigger>
@@ -307,7 +307,7 @@ const AddDialog = () => {
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      agentId: customer.msisdn
+                                      agent: customer.msisdn
                                     });
                                     setOpen(false);
                                   }}

From c559fa5d5d9475c3fae86c40261eb113347663d1 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 09:21:49 +0700
Subject: [PATCH 26/53] fix post profession

---
 src/pages/master/profession/blocks/AddDialog.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/master/profession/blocks/AddDialog.tsx b/src/pages/master/profession/blocks/AddDialog.tsx
index f87c9f9..f3f0f34 100644
--- a/src/pages/master/profession/blocks/AddDialog.tsx
+++ b/src/pages/master/profession/blocks/AddDialog.tsx
@@ -48,7 +48,6 @@ const AddDialog = () => {
     const response = await PostData(`${API_URL}/profession/create`, formField);
 
     if (response?.status) {
-      resetForm();
       handleAddDialog(false);
       toast.success('Success Create Profession');
       reload();

From 3a0c01ca6529da6f0fb2afc5a3c6795a723a23f2 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 09:22:31 +0700
Subject: [PATCH 27/53] fix post profession

---
 src/pages/master/profession/hooks/ManageProfessionContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/master/profession/hooks/ManageProfessionContext.tsx b/src/pages/master/profession/hooks/ManageProfessionContext.tsx
index 63d003c..1ec9abb 100644
--- a/src/pages/master/profession/hooks/ManageProfessionContext.tsx
+++ b/src/pages/master/profession/hooks/ManageProfessionContext.tsx
@@ -117,7 +117,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
       const response = await GetData(`${API_URL}/profession/list`, {
         limit,
         page: page + 1,
-        with_deleted: true,
+        with_deleted: false,
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)

From 50bd7980b23c7c2047f9706b92486b6482601eac Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 10:05:07 +0700
Subject: [PATCH 28/53] fix create and update - change posto_adm_id to postoId

---
 src/pages/master/sucos/blocks/AddDialog.tsx   | 10 +++++-----
 src/pages/master/sucos/blocks/EditDialog.tsx  | 16 ++++++++--------
 src/pages/master/sucos/blocks/ListToolbar.tsx |  2 +-
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/pages/master/sucos/blocks/AddDialog.tsx b/src/pages/master/sucos/blocks/AddDialog.tsx
index dd5ab57..67e9844 100644
--- a/src/pages/master/sucos/blocks/AddDialog.tsx
+++ b/src/pages/master/sucos/blocks/AddDialog.tsx
@@ -45,7 +45,7 @@ const AddDialog = () => {
   });
   const initialState = {
     name: '',
-    posto_adm_id: 0,
+    postoId: 0,
     created_by: '',
     created_at: ''
   };
@@ -80,7 +80,7 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name.trim() === '' || formField.posto_adm_id === 0) {
+    if (formField.name.trim() === '' || formField.postoId === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -117,7 +117,7 @@ const AddDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
         });
-        console.log('ini data posto :', response?.data);
+        // console.log('ini data posto :', response?.data);
         setPostoadms(response?.data.list || []);
       } catch (error) {
         console.log('Error fetching posto', error);
@@ -166,7 +166,7 @@ const AddDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {posto_adms.find((posto) => posto.PostoAdms_id === formField.posto_adm_id)
+                          {posto_adms.find((posto) => posto.PostoAdms_id === formField.postoId)
                             ?.PostoAdms_name || 'Select Posto Administrativo'}
                         </button>
                       </PopoverTrigger>
@@ -183,7 +183,7 @@ const AddDialog = () => {
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      posto_adm_id: posto.PostoAdms_id
+                                      postoId: posto.PostoAdms_id
                                     });
                                     setOpen(false);
                                   }}
diff --git a/src/pages/master/sucos/blocks/EditDialog.tsx b/src/pages/master/sucos/blocks/EditDialog.tsx
index 0e08201..68b7bcd 100644
--- a/src/pages/master/sucos/blocks/EditDialog.tsx
+++ b/src/pages/master/sucos/blocks/EditDialog.tsx
@@ -48,7 +48,7 @@ const EditDialog = () => {
 
   const initialState = {
     name: '',
-    posto_adm_id: 0, // Pastikan ini sesuai dengan PostoAdms_id
+    postoId: 0,
     updated_by: '',
     updated_at: ''
   };
@@ -96,7 +96,7 @@ const EditDialog = () => {
       });
 
       setPostoadms(response?.data.list);
-      console.log('Data Posto Adms:', response?.data.list); // Log data postoadms
+      // console.log('Data Posto Adms:', response?.data.list);
     } catch (error) {
       console.log('Error fetching postoadms', error);
     }
@@ -104,13 +104,13 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id });
-    console.log('Data Sucos:', response?.data); // Log data sucos
+    // console.log('Data Sucos:', response?.data);
 
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
-        posto_adm_id: response.data.posto.id // Pastikan ini sesuai dengan PostoAdms_id
+        postoId: response.data.posto.id // Pastikan ini sesuai dengan PostoAdms_id
       }));
     } else {
       setFormField((prev) => ({
@@ -123,7 +123,7 @@ const EditDialog = () => {
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name.trim() === '' || formField.posto_adm_id === 0) {
+    if (formField.name.trim() === '' || formField.postoId === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -162,7 +162,7 @@ const EditDialog = () => {
     doFetchPostoAdms([{ id: 'name', desc: false }]);
   }, []);
 
-  console.log(selectedSucos);
+  // console.log(selectedSucos);
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -203,7 +203,7 @@ const EditDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {postoadms.find((posto) => posto.PostoAdms_id === formField.posto_adm_id)
+                          {postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
                             ?.PostoAdms_name || 'Select Posto Adms'}
                         </button>
                       </PopoverTrigger>
@@ -220,7 +220,7 @@ const EditDialog = () => {
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      posto_adm_id: posto.PostoAdms_id // Gunakan PostoAdms_id
+                                      postoId: posto.PostoAdms_id // Gunakan PostoAdms_id
                                     });
                                     setOpen(false);
                                   }}
diff --git a/src/pages/master/sucos/blocks/ListToolbar.tsx b/src/pages/master/sucos/blocks/ListToolbar.tsx
index 63cf889..334c9d1 100644
--- a/src/pages/master/sucos/blocks/ListToolbar.tsx
+++ b/src/pages/master/sucos/blocks/ListToolbar.tsx
@@ -16,7 +16,7 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Sucos"
-                value={table.getColumn(`id`)?.getFilterValue() as string}
+                value={table.getColumn(`sucos_name`)?.getFilterValue() as string}
                 onChange={(event) =>
                   table.getColumn('sucos_name')?.setFilterValue(event.target.value)
                 }

From f7d0c77692ac521b912bdca152e8747b279368d3 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Tue, 25 Mar 2025 12:56:13 +0700
Subject: [PATCH 29/53] update transaction issue

---
 src/routing/AppRoutingSetup.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routing/AppRoutingSetup.tsx b/src/routing/AppRoutingSetup.tsx
index c7a50c6..b46c8a4 100644
--- a/src/routing/AppRoutingSetup.tsx
+++ b/src/routing/AppRoutingSetup.tsx
@@ -8,7 +8,7 @@ import { ErrorsRouting } from '@/errors';
 
 import DashboardHomePage from '@/pages/dashboards/home/DashboardHomePage';
 import ManageUserPage from '@/pages/settings/user/manage-user/ManageUserPage';
-
+import Transaction from '@/pages/transaction/Transaction';
 import LogActivityPage from '@/pages/settings/user/log-activity/LogActivityPage';
 import ManagePositionPage from '@/pages/settings/user/manage-position/ManagePositionPage';
 import ManageAccount from '@/pages/account/manage-account/ManageAccount';
@@ -19,7 +19,6 @@ import AccessType from '@/pages/access/access-type/AccessType';
 import MemberCredential from '@/pages/access/member-credentials/MemberCredentials';
 import ManageCurrency from '@/pages/account/manage-currency/ManageCurrency';
 import ManageNotification from '@/pages/notification/ManageNotification';
-import Transaction from '@/pages/transaction/transaction';
 import ManageMenu from '@/pages/menu/manage-menu/ManageMenu';
 import Welcome from '@/pages/menu/welcome/Welcome';
 import Inbox from '@/pages/message/Inbox';

From f11ace54c40be5270b39b3fca029e0b71a44124e Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Tue, 25 Mar 2025 13:23:47 +0700
Subject: [PATCH 30/53] cleaning code

---
 src/pages/transaction/blocks/AddDialog.tsx    | 172 -----------------
 src/pages/transaction/blocks/DeleteDialog.tsx |  87 ---------
 src/pages/transaction/blocks/EditDialog.tsx   | 173 -----------------
 src/pages/transaction/blocks/ListToolbar.tsx  |   8 -
 src/pages/transaction/blocks/SearchDialog.tsx | 178 ------------------
 .../transaction/hooks/TransactionContext.tsx  |  81 +++-----
 src/pages/transaction/transaction.tsx         |  50 +++--
 7 files changed, 45 insertions(+), 704 deletions(-)
 delete mode 100644 src/pages/transaction/blocks/AddDialog.tsx
 delete mode 100644 src/pages/transaction/blocks/DeleteDialog.tsx
 delete mode 100644 src/pages/transaction/blocks/EditDialog.tsx
 delete mode 100644 src/pages/transaction/blocks/SearchDialog.tsx

diff --git a/src/pages/transaction/blocks/AddDialog.tsx b/src/pages/transaction/blocks/AddDialog.tsx
deleted file mode 100644
index 22cee5a..0000000
--- a/src/pages/transaction/blocks/AddDialog.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useTransactionContext } from '../hooks/useTransactionContext';
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { Alert, KeenIcon, useDataGrid } from '@/components';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import axios from 'axios';
-import { apiConfig } from '@/config/api.config';
-import { toast } from 'sonner';
-import { getAuth, useAuthContext } from '@/auth';
-import { useCallApi } from '@/hooks';
-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 parsedUser = getAuth()?.user;
-  const { showAddDialog, handleAddDialog, selectedMunicipios } = useTransactionContext();
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-  const initialState = {
-    name: '',
-    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 doCreateMunicipio = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      const response = await PostData(`${API_URL}/municipios/create`, formField);
-
-      if (response?.status) {
-        handleAddDialog(false);
-        resetForm();
-        reload();
-        toast.success('Municipio created successfully!');
-        // const createActivity = {
-        //   module: 'Manage Municipio',
-        //   description: `Create Municipio => ${selectedMunicipios}`,
-        //   action: 'C'
-        // };
-
-        // doSaveLogActivity(createActivity);
-      } else {
-        toast.error('Failed to create municipio.');
-        setAlert({ show: true, message: 'Failed to create municipio. Please try again.' });
-      }
-    },
-    [formField]
-  );
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    if (formField.name.trim() === '') {
-      setAlert({ show: true, message: 'Please fill name field.' });
-      return;
-    }
-
-    doCreateMunicipio(e);
-    console.log(parsedUser.email);
-    console.log(formField);
-    setAlert({ show: false, message: '' });
-  };
-
-  const handleReset = () => {
-    resetForm();
-    setAlert({ show: false, message: '' });
-  };
-
-  useEffect(() => {
-    if (showAddDialog) {
-      setFormField({
-        name: formField.name,
-        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-96 flex flex-col p-5 overflow-hidden [&>button]:hidden">
-        <DialogTitle></DialogTitle>
-        <DialogDescription></DialogDescription>
-        <DialogHeader className="p-2 border-0">
-          <div className="flex items-center justify-between flex-wrap grow">
-            <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">Add Municipios</h1>
-              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
-            </div>
-            <div
-              className="cursor-pointer hover:opacity-100 opacity-50"
-              onClick={() => {
-                handleAddDialog(false);
-                resetForm();
-              }}
-            >
-              <KeenIcon icon="cross" className="text-1.5xl" />
-            </div>
-          </div>
-        </DialogHeader>
-        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
-          <div className="flex flex-col px-0">
-            {alert.show && (
-              <Alert variant="danger" className="mb-5">
-                {alert.message}
-              </Alert>
-            )}
-            <form action="" onSubmit={handleSubmit}>
-              <div className="card-body grid-cols-6 gap-5 p-0">
-                <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="flex justify-end pt-2.5 gap-5 col-span-6">
-                  <Button variant={'outline'} type="reset" onClick={handleReset}>
-                    Reset
-                  </Button>
-                  <Button variant={'default'} type="submit">
-                    Create
-                  </Button>
-                </div>
-              </div>
-            </form>
-          </div>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default AddDialog;
diff --git a/src/pages/transaction/blocks/DeleteDialog.tsx b/src/pages/transaction/blocks/DeleteDialog.tsx
deleted file mode 100644
index 2e8f25d..0000000
--- a/src/pages/transaction/blocks/DeleteDialog.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Alert, useDataGrid } from '@/components';
-import { useTransactionContext } from '../hooks/useTransactionContext';
-import { ChangeEvent, useCallback, useState } from 'react';
-import axios from 'axios';
-import { apiConfig } from '@/config/api.config';
-import { useCallApi } from '@/hooks';
-import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
-import { Button } from '@/components/ui/button';
-import { doSaveLogActivity } from '@/actions/GlobalActions';
-
-const API_URL = apiConfig.service_master_data;
-
-const DeleteDialog = () => {
-  const { showDeleteDialog, handleDeleteDialog, selectedMunicipios, municipios } =
-    useTransactionContext();
-  const { reload } = useDataGrid();
-  const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-
-  const doDeleteMunicipio = useCallback(async () => {
-    const response = await DeleteData(
-      `${API_URL}/municipios/delete/${selectedMunicipios}/${enforce}`,
-      {
-        id: selectedMunicipios
-      }
-    );
-
-    if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
-      handleDeleteDialog(false, null);
-      toast.success('Success Delete Municipio');
-      reload();
-      // const createActivity = {
-      //   module: 'Manage Municipio',
-      //   description: `Delete Municipio => ${selectedMunicipios}`,
-      //   action: 'D'
-      // };
-
-      // doSaveLogActivity(createActivity);
-    } else {
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
-    }
-  }, [selectedMunicipios, enforce]);
-
-  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">
-          <Alert variant="warning">
-            <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
-          </Alert>
-          {alert.show && (
-            <Alert variant="danger">
-              <h3>{alert.message}</h3>
-            </Alert>
-          )}
-        </DialogHeader>
-        <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
-            Cancel
-          </Button>
-          <Button variant={'destructive'} onClick={() => doDeleteMunicipio()}>
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default DeleteDialog;
diff --git a/src/pages/transaction/blocks/EditDialog.tsx b/src/pages/transaction/blocks/EditDialog.tsx
deleted file mode 100644
index 0ab2a46..0000000
--- a/src/pages/transaction/blocks/EditDialog.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useTransactionContext } from '../hooks/useTransactionContext';
-import { Alert, useDataGrid } from '@/components';
-import axios from 'axios';
-import { apiConfig } from '@/config/api.config';
-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 { getAuth, useAuthContext } from '@/auth';
-import { useCallApi } from '@/hooks';
-import { doSaveLogActivity } from '@/actions/GlobalActions';
-
-const API_URL = apiConfig.service_master_data;
-
-const EditDialog = () => {
-  const parentRef = useRef<any | null>(null);
-  const { showEditDialog, handleEditDialog, selectedMunicipios, municipios } =
-    useTransactionContext();
-  const { reload } = useDataGrid();
-  const { PutData, GetData } = useCallApi();
-  const parsedUser = getAuth()?.user;
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-
-  const initialState = {
-    name: '',
-    updated_by: '',
-    updated_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 doUpdateMunicipios = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      const response = await PutData(
-        `${API_URL}/municipios/update/${selectedMunicipios}`,
-        formField
-      );
-
-      if (response?.status) {
-        handleEditDialog(false, null);
-        resetForm();
-        toast.success('Success update municipio');
-        reload();
-        // const createActivity = {
-        //   module: 'Manage Municipio',
-        //   description: `Edit Municipio => ${selectedMunicipios}`,
-        //   action: 'U'
-        // };
-
-        // doSaveLogActivity(createActivity);
-      } else {
-        toast.error('Failed update user');
-        setAlert({ show: true, message: 'Failed to update municipio. Please try again.' });
-      }
-    },
-    [selectedMunicipios, formField]
-  );
-
-  const doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id });
-
-    if (response?.status) {
-      setFormField((prev) => ({
-        ...prev,
-        name: response.data.name
-      }));
-    } else {
-      setFormField((prev) => ({
-        ...prev,
-        name: ''
-      }));
-    }
-  }, []);
-
-  const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    if (formField.name.trim() === '') {
-      setAlert({ show: true, message: 'Please fill name field.' });
-      return;
-    }
-
-    doUpdateMunicipios(e);
-    console.log(formField);
-    setAlert({ show: false, message: '' });
-  };
-
-  useEffect(() => {
-    if (selectedMunicipios) {
-      doFetchData(selectedMunicipios);
-    }
-  }, [selectedMunicipios]);
-
-  useEffect(() => {
-    if (showEditDialog === false) {
-      resetForm();
-    }
-  }, [showEditDialog]);
-
-  useEffect(() => {
-    if (selectedMunicipios) {
-      setFormField({
-        name: formField.name,
-        updated_by: parsedUser.email,
-        updated_at: formattedTime
-      });
-    }
-  }, [formattedTime]);
-
-  // console.log(selectedMunicipios);
-  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>Municipios - Update</DialogTitle>
-          <DialogDescription></DialogDescription>
-        </DialogHeader>
-        <DialogBody>
-          <div className="flex flex-col">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-
-            <form onSubmit={handleUpdate}>
-              <div className="card-body grid gap-5">
-                <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">
-                      Name<span className="text-red-500">*</span>
-                    </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                    />
-                  </div>
-                </div>
-
-                <div className="flex justify-end">
-                  <Button className="btn btn-primary">Save Changes</Button>
-                </div>
-              </div>
-            </form>
-          </div>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default EditDialog;
diff --git a/src/pages/transaction/blocks/ListToolbar.tsx b/src/pages/transaction/blocks/ListToolbar.tsx
index cb71f6d..afc8ac5 100644
--- a/src/pages/transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/blocks/ListToolbar.tsx
@@ -6,7 +6,6 @@ import { toast } from 'sonner';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
-  const { handleAddDialog, handleSearchDialog } = useTransactionContext();
 
   // Set the initial state for trxDate
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
@@ -74,13 +73,6 @@ const ListToolbar = () => {
               />
             </label>
           </div>
-          <div className="flex gap-3 items-center">
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
-                <KeenIcon icon="arrows-circle" />
-              </Button>
-            </DefaultTooltip>
-          </div>
         </div>
       </div>
     </div>
diff --git a/src/pages/transaction/blocks/SearchDialog.tsx b/src/pages/transaction/blocks/SearchDialog.tsx
deleted file mode 100644
index a5d84f7..0000000
--- a/src/pages/transaction/blocks/SearchDialog.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import { useRef, useState } from 'react';
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { Alert, KeenIcon } from '@/components';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { useTransactionContext } from '../hooks/useTransactionContext';
-import { apiConfig } from '@/config/api.config';
-import axios from 'axios';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select';
-
-interface trxDate {
-  from: string;
-  to: string;
-}
-
-const API_URL = apiConfig.service_master_data;
-
-const SearchDialog = () => {
-  const parentRef = useRef<any | null>(null);
-  const { showSearchDialog, handleSearchDialog, municipios } = useTransactionContext();
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-  const initialState = {
-    from: '',
-    to: ''
-  };
-
-  const [formField, setFormField] = useState(initialState);
-  const resetForm = () => {
-    setFormField(initialState);
-  };
-  const [trxDate, settrxDate] = useState<trxDate[]>([]);
-  const [isFound, setIsFound] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const from = String(formField.from);
-    const to = String(formField.to);
-
-    // if (formField.id === 0) {
-    //   setAlert({ show: true, message: 'Please fill name field.' });
-    //   return;
-    // }
-
-    try {
-      // const response = await axios.get(`${API_URL}/municipios/postoadms/${id}`);
-
-      // if (response.data.status) {
-      //   setPostoadms(response.data.data);
-      //   setIsFound(true);
-      //   // console.log('Found postoadms: ', response.data.data);
-      // } else {
-      //   setPostoadms([]);
-      //   setIsFound(false);
-      //   setAlert({ show: true, message: 'No postoadms found.' });
-      // }
-    } catch (error) {
-      console.error('Error fetching postoadms', error);
-      setAlert({ show: true, message: 'Failed to fetch postoadms. Please try again.' });
-    }
-    setAlert({ show: false, message: '' });
-  };
-
-  const handleReset = () => {
-    setFormField(initialState);
-    setIsFound(false);
-    settrxDate([]);
-  };
-  // console.log(municipios);
-  return (
-    <Dialog open={showSearchDialog} onOpenChange={(open) => handleSearchDialog(open)}>
-      <DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
-        <DialogTitle></DialogTitle>
-        <DialogDescription></DialogDescription>
-        <DialogHeader className="p-2 border-0">
-          <div className="flex items-center justify-between flex-wrap grow">
-            <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">
-                Search Postoadms
-              </h1>
-              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
-            </div>
-            <div
-              className="cursor-pointer hover:opacity-100 opacity-50"
-              onClick={() => {
-                handleSearchDialog(false);
-                resetForm();
-              }}
-            >
-              <KeenIcon icon="cross" className="text-1.5xl" />
-            </div>
-          </div>
-        </DialogHeader>
-        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
-          <div className="flex flex-col px-0">
-            {alert.show && (
-              <Alert variant="danger" className="mb-5">
-                {alert.message}
-              </Alert>
-            )}
-            <form action="" onSubmit={handleSubmit}>
-              <div className="card-body grid-cols-6 gap-5 p-0">
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
-                  <label className="form-label flex items-center gap-1 col-span-2">
-                    Municipio Name<span className="text-red-500">*</span>
-                  </label>
-
-                  {/* <Select
-                    value={formField.id.toString()}
-                    onValueChange={(target) => {
-                      const selectedMunicipio = municipios.find((m) => m.id.toString() === target);
-                      if (selectedMunicipio) {
-                        setFormField({
-                          ...formField,
-                          id: selectedMunicipio.id,
-                          name: selectedMunicipio.name
-                        });
-                      }
-                    }}
-                  > */}
-                    {/* <SelectTrigger className="col-span-6">
-                      <SelectValue placeholder="Select Municipios" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {municipios.map((municipio) => (
-                        <SelectItem key={municipio.id} value={municipio.id.toString()}>
-                          {municipio.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select> */}
-                </div>
-
-                {/* {isFound && postoadms.length > 0 && (
-                  <div className="mt-4 border-t pt-4">
-                    <h2 className="text-md font-semibold">Postu Administravo: </h2>
-                    <br />
-                    <div className="flex flex-col">
-                      <span className="text-sm form-hint">
-                        {postoadms.map((posto) => posto.name).join(', ')}
-                      </span>
-                    </div>
-                  </div>
-                )} */}
-
-                <div className="flex justify-end pt-2.5 gap-5 col-span-6">
-                  <Button variant={'outline'} type="reset" onClick={handleReset}>
-                    Reset
-                  </Button>
-                  <Button variant={'default'} type="submit">
-                    Search
-                  </Button>
-                </div>
-              </div>
-            </form>
-          </div>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default SearchDialog;
diff --git a/src/pages/transaction/hooks/TransactionContext.tsx b/src/pages/transaction/hooks/TransactionContext.tsx
index 61a70d8..c8b4943 100644
--- a/src/pages/transaction/hooks/TransactionContext.tsx
+++ b/src/pages/transaction/hooks/TransactionContext.tsx
@@ -15,16 +15,6 @@ interface TransactionProps {
 }
 
 interface ContextProps {
-  municipios: TransactionProps[];
-  showSearchDialog: boolean;
-  handleSearchDialog: (show: boolean) => void;
-  showEditDialog: boolean;
-  handleEditDialog: (show: boolean, selected_user: string | null) => void;
-  showAddDialog: boolean;
-  handleAddDialog: (show: boolean) => void;
-  showDeleteDialog: boolean;
-  handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
-  selectedMunicipios: string | null;
   getTransactionLists: (
     limit: number,
     page: number,
@@ -36,16 +26,6 @@ interface ContextProps {
 }
 
 const initialProps: ContextProps = {
-  municipios: [],
-  showSearchDialog: false,
-  handleSearchDialog: (show: boolean) => { },
-  showEditDialog: false,
-  handleEditDialog: (show: boolean, selected_user: string | null) => { },
-  showAddDialog: false,
-  handleAddDialog: (show: boolean) => { },
-  showDeleteDialog: false,
-  handleDeleteDialog: (show: boolean, selected_user: string | null) => { },
-  selectedMunicipios: null,
   getTransactionLists: async () => ({ data: [], totalCount: 0 })
 };
 
@@ -53,33 +33,9 @@ const ManageTransactionContext = createContext<ContextProps>(initialProps);
 const API_URL = apiConfig.transaction;
 
 const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
-  const [showSearchDialog, setShowSearchDialog] = useState(false);
-  const [showEditDialog, setShowEditDialog] = useState(false);
-  const [showAddDialog, setShowAddDialog] = useState(false);
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [selectedMunicipios, setSelectedMunicipios] = useState<string | null>(null);
-  const [municipios, setTransaction] = useState<TransactionProps[]>([]);
+  const [transaction, setTransaction] = useState<TransactionProps[]>([]);
   const { GetData } = useCallApi();
   const navigate = useNavigate();
-
-  const handleSearchDialog = useCallback((show: boolean) => {
-    setShowSearchDialog(show);
-  }, []);
-
-  const handleAddDialog = useCallback((show: boolean) => {
-    setShowAddDialog(show);
-  }, []);
-
-  const handleEditDialog = useCallback((show: boolean, selected_municipios: string | null) => {
-    setSelectedMunicipios(show ? selected_municipios : null);
-    setShowEditDialog(show);
-  }, []);
-
-  const handleDeleteDialog = useCallback((show: boolean, selected_municipios: string | null) => {
-    setSelectedMunicipios(show ? selected_municipios : null);
-    setShowDeleteDialog(show);
-  }, []);
-
   const handleNavigate = (path: string) => {
     const url = navigate(`${API_URL}/transaction/history/${path}`);
   };
@@ -136,6 +92,28 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
           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} />,
@@ -175,8 +153,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         }
       }
     ],
-    [handleEditDialog, handleDeleteDialog]
-  );
+    []);
 
   const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
@@ -222,16 +199,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ManageTransactionContext.Provider
       value={{
-        municipios,
-        showSearchDialog,
-        handleSearchDialog,
-        showAddDialog,
-        handleAddDialog,
-        showDeleteDialog,
-        handleDeleteDialog,
-        showEditDialog,
-        handleEditDialog,
-        selectedMunicipios,
         getTransactionLists
       }}
     >
diff --git a/src/pages/transaction/transaction.tsx b/src/pages/transaction/transaction.tsx
index dda8418..7466c60 100644
--- a/src/pages/transaction/transaction.tsx
+++ b/src/pages/transaction/transaction.tsx
@@ -1,39 +1,31 @@
 import { Container, DataGridInner } from '@/components';
 import { TransactionProvider } from './hooks/TransactionContext';
-import AddDialog from './blocks/AddDialog';
-import SearchDialog from './blocks/SearchDialog';
-import EditDialog from './blocks/EditDialog';
-import DeleteDialog from './blocks/DeleteDialog';
 import { Breadcrumbs, Link } from '@mui/material';
 
 const Transaction = () => {
-  return (
-    <TransactionProvider>
-      <Container className="mb-7">
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
-        <Breadcrumbs sx={{ mb: 2 }}>
-          <Link underline="none" color="inherit" href="/">
-            <span className="text-sm hover:underline">Dashboard</span>
-          </Link>
+    return (
+        <TransactionProvider>
+            <Container className="mb-7">
+                <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
+                <Breadcrumbs sx={{ mb: 2 }}>
+                    <Link underline="none" color="inherit" href="/">
+                        <span className="text-sm hover:underline">Dashboard</span>
+                    </Link>
 
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Master Data</span>
-          </Link>
+                    <Link underline="none" color="inherit">
+                        <span className="text-sm">Master Data</span>
+                    </Link>
 
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Transaction</span>
-          </Link>
-        </Breadcrumbs>
-        <div className="grid gap-5 lg:gap-7.5">
-          <DataGridInner />
-        </div>
-        <AddDialog />
-        <EditDialog />
-        <DeleteDialog />
-        <SearchDialog />
-      </Container>
-    </TransactionProvider>
-  );
+                    <Link underline="none" color="inherit">
+                        <span className="text-sm">Transaction</span>
+                    </Link>
+                </Breadcrumbs>
+                <div className="grid gap-5 lg:gap-7.5">
+                    <DataGridInner />
+                </div>
+            </Container>
+        </TransactionProvider>
+    );
 };
 
 export default Transaction;

From 9a36cbf4649e4850ae44ea203a95de0f72c04453 Mon Sep 17 00:00:00 2001
From: wayanrivan <wayan.rivan@shiblysolution.id>
Date: Tue, 25 Mar 2025 14:26:49 +0800
Subject: [PATCH 31/53] Delete src/pages/transaction/transaction.tsx

---
 src/pages/transaction/transaction.tsx | 31 ---------------------------
 1 file changed, 31 deletions(-)
 delete mode 100644 src/pages/transaction/transaction.tsx

diff --git a/src/pages/transaction/transaction.tsx b/src/pages/transaction/transaction.tsx
deleted file mode 100644
index 7466c60..0000000
--- a/src/pages/transaction/transaction.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Container, DataGridInner } from '@/components';
-import { TransactionProvider } from './hooks/TransactionContext';
-import { Breadcrumbs, Link } from '@mui/material';
-
-const Transaction = () => {
-    return (
-        <TransactionProvider>
-            <Container className="mb-7">
-                <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
-                <Breadcrumbs sx={{ mb: 2 }}>
-                    <Link underline="none" color="inherit" href="/">
-                        <span className="text-sm hover:underline">Dashboard</span>
-                    </Link>
-
-                    <Link underline="none" color="inherit">
-                        <span className="text-sm">Master Data</span>
-                    </Link>
-
-                    <Link underline="none" color="inherit">
-                        <span className="text-sm">Transaction</span>
-                    </Link>
-                </Breadcrumbs>
-                <div className="grid gap-5 lg:gap-7.5">
-                    <DataGridInner />
-                </div>
-            </Container>
-        </TransactionProvider>
-    );
-};
-
-export default Transaction;

From 0518cf66bed24481e1e0d322a5115a813366e453 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Tue, 25 Mar 2025 13:27:29 +0700
Subject: [PATCH 32/53] update

---
 src/pages/transaction/transaction.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/transaction/transaction.tsx b/src/pages/transaction/transaction.tsx
index 7466c60..7889919 100644
--- a/src/pages/transaction/transaction.tsx
+++ b/src/pages/transaction/transaction.tsx
@@ -23,6 +23,7 @@ const Transaction = () => {
                 <div className="grid gap-5 lg:gap-7.5">
                     <DataGridInner />
                 </div>
+
             </Container>
         </TransactionProvider>
     );

From 9e36ae96d101662cb751ccba9484fd72d15940ea Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Tue, 25 Mar 2025 13:33:09 +0700
Subject: [PATCH 33/53] update

---
 src/pages/transaction/transaction.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/transaction/transaction.tsx b/src/pages/transaction/transaction.tsx
index 7889919..0aacee6 100644
--- a/src/pages/transaction/transaction.tsx
+++ b/src/pages/transaction/transaction.tsx
@@ -1,5 +1,6 @@
 import { Container, DataGridInner } from '@/components';
 import { TransactionProvider } from './hooks/TransactionContext';
+
 import { Breadcrumbs, Link } from '@mui/material';
 
 const Transaction = () => {

From b415220c5f635625d68cdecc9b7597a993ab7d62 Mon Sep 17 00:00:00 2001
From: wayanrivan <wayan.rivan@shiblysolution.id>
Date: Tue, 25 Mar 2025 14:34:14 +0800
Subject: [PATCH 34/53] revert 9a36cbf4649e4850ae44ea203a95de0f72c04453

revert Delete src/pages/transaction/transaction.tsx
---
 src/pages/transaction/transaction.tsx | 31 +++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/pages/transaction/transaction.tsx

diff --git a/src/pages/transaction/transaction.tsx b/src/pages/transaction/transaction.tsx
new file mode 100644
index 0000000..7466c60
--- /dev/null
+++ b/src/pages/transaction/transaction.tsx
@@ -0,0 +1,31 @@
+import { Container, DataGridInner } from '@/components';
+import { TransactionProvider } from './hooks/TransactionContext';
+import { Breadcrumbs, Link } from '@mui/material';
+
+const Transaction = () => {
+    return (
+        <TransactionProvider>
+            <Container className="mb-7">
+                <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
+                <Breadcrumbs sx={{ mb: 2 }}>
+                    <Link underline="none" color="inherit" href="/">
+                        <span className="text-sm hover:underline">Dashboard</span>
+                    </Link>
+
+                    <Link underline="none" color="inherit">
+                        <span className="text-sm">Master Data</span>
+                    </Link>
+
+                    <Link underline="none" color="inherit">
+                        <span className="text-sm">Transaction</span>
+                    </Link>
+                </Breadcrumbs>
+                <div className="grid gap-5 lg:gap-7.5">
+                    <DataGridInner />
+                </div>
+            </Container>
+        </TransactionProvider>
+    );
+};
+
+export default Transaction;

From 9bfeb6992c73452093ba534f0e3a7492f0d1de39 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Tue, 25 Mar 2025 13:35:19 +0700
Subject: [PATCH 35/53] update

---
 src/pages/transaction/transaction.tsx | 44 +++++++++++++--------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/pages/transaction/transaction.tsx b/src/pages/transaction/transaction.tsx
index 0aacee6..cacee7f 100644
--- a/src/pages/transaction/transaction.tsx
+++ b/src/pages/transaction/transaction.tsx
@@ -1,33 +1,31 @@
 import { Container, DataGridInner } from '@/components';
 import { TransactionProvider } from './hooks/TransactionContext';
-
 import { Breadcrumbs, Link } from '@mui/material';
 
 const Transaction = () => {
-    return (
-        <TransactionProvider>
-            <Container className="mb-7">
-                <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
-                <Breadcrumbs sx={{ mb: 2 }}>
-                    <Link underline="none" color="inherit" href="/">
-                        <span className="text-sm hover:underline">Dashboard</span>
-                    </Link>
+  return (
+    <TransactionProvider>
+      <Container className="mb-7">
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
+        <Breadcrumbs sx={{ mb: 2 }}>
+          <Link underline="none" color="inherit" href="/">
+            <span className="text-sm hover:underline">Dashboard</span>
+          </Link>
 
-                    <Link underline="none" color="inherit">
-                        <span className="text-sm">Master Data</span>
-                    </Link>
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Master Data</span>
+          </Link>
 
-                    <Link underline="none" color="inherit">
-                        <span className="text-sm">Transaction</span>
-                    </Link>
-                </Breadcrumbs>
-                <div className="grid gap-5 lg:gap-7.5">
-                    <DataGridInner />
-                </div>
-
-            </Container>
-        </TransactionProvider>
-    );
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Transaction</span>
+          </Link>
+        </Breadcrumbs>
+        <div className="grid gap-5 lg:gap-7.5">
+          <DataGridInner />
+        </div>
+      </Container>
+    </TransactionProvider>
+  );
 };
 
 export default Transaction;

From 24a8bf30545a18d421bf3369bb082e2227e95bcb Mon Sep 17 00:00:00 2001
From: wayanrivan <wayan.rivan@shiblysolution.id>
Date: Tue, 25 Mar 2025 14:42:17 +0800
Subject: [PATCH 36/53] Update src/pages/transaction/Transaction.tsx

---
 src/pages/transaction/Transaction.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/pages/transaction/Transaction.tsx b/src/pages/transaction/Transaction.tsx
index dda8418..cacee7f 100644
--- a/src/pages/transaction/Transaction.tsx
+++ b/src/pages/transaction/Transaction.tsx
@@ -1,9 +1,5 @@
 import { Container, DataGridInner } from '@/components';
 import { TransactionProvider } from './hooks/TransactionContext';
-import AddDialog from './blocks/AddDialog';
-import SearchDialog from './blocks/SearchDialog';
-import EditDialog from './blocks/EditDialog';
-import DeleteDialog from './blocks/DeleteDialog';
 import { Breadcrumbs, Link } from '@mui/material';
 
 const Transaction = () => {
@@ -27,10 +23,6 @@ const Transaction = () => {
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>
-        <AddDialog />
-        <EditDialog />
-        <DeleteDialog />
-        <SearchDialog />
       </Container>
     </TransactionProvider>
   );

From bc9db45d86dd92a99ae2e16a981bc363153c5dd4 Mon Sep 17 00:00:00 2001
From: wayanrivan <wayan.rivan@shiblysolution.id>
Date: Tue, 25 Mar 2025 14:42:38 +0800
Subject: [PATCH 37/53] Delete src/pages/transaction/transaction.tsx

---
 src/pages/transaction/transaction.tsx | 31 ---------------------------
 1 file changed, 31 deletions(-)
 delete mode 100644 src/pages/transaction/transaction.tsx

diff --git a/src/pages/transaction/transaction.tsx b/src/pages/transaction/transaction.tsx
deleted file mode 100644
index cacee7f..0000000
--- a/src/pages/transaction/transaction.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Container, DataGridInner } from '@/components';
-import { TransactionProvider } from './hooks/TransactionContext';
-import { Breadcrumbs, Link } from '@mui/material';
-
-const Transaction = () => {
-  return (
-    <TransactionProvider>
-      <Container className="mb-7">
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
-        <Breadcrumbs sx={{ mb: 2 }}>
-          <Link underline="none" color="inherit" href="/">
-            <span className="text-sm hover:underline">Dashboard</span>
-          </Link>
-
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Master Data</span>
-          </Link>
-
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Transaction</span>
-          </Link>
-        </Breadcrumbs>
-        <div className="grid gap-5 lg:gap-7.5">
-          <DataGridInner />
-        </div>
-      </Container>
-    </TransactionProvider>
-  );
-};
-
-export default Transaction;

From 20421f2d0080f13d55e75a505b0053164a8e6f8a Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 13:58:05 +0700
Subject: [PATCH 38/53] update provider

---
 src/components/ui/dialog.tsx                  |  2 +-
 .../master/provider/blocks/AddDialog.tsx      | 83 ++++++++++---------
 .../master/provider/blocks/EditDialog.tsx     |  4 +-
 3 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index db2f34c..dcafbd0 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/40  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
diff --git a/src/pages/master/provider/blocks/AddDialog.tsx b/src/pages/master/provider/blocks/AddDialog.tsx
index 3f5fe6e..89b6655 100644
--- a/src/pages/master/provider/blocks/AddDialog.tsx
+++ b/src/pages/master/provider/blocks/AddDialog.tsx
@@ -33,6 +33,7 @@ import {
 } from '@/components/ui/command';
 
 export interface CustomerProps {
+  id: string;
   msisdn: string;
   email: string;
   fullname: string;
@@ -86,7 +87,7 @@ const AddDialog = () => {
     const response = await PostData(`${API_URL_MASTERDATA}/provider/create`, formField);
 
     if (response?.status) {
-      resetForm();
+      // resetForm();
       handleAddDialog(false);
       toast.success('Success Create Provider');
       reload();
@@ -116,6 +117,41 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  const getTransactionTypeList = async (sorting: any) => {
+    try {
+      const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('TRANSACTION TYPE: ', response?.data);
+      setTransactions(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching transaction type', error);
+    }
+  };
+
+  const getCustomerList = async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('CUSTOMER: ', response?.data);
+      setCustomers(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching customer', error);
+    }
+  };
+
   useEffect(() => {
     if (showAddDialog) {
       setFormField({
@@ -127,42 +163,7 @@ const AddDialog = () => {
   }, [formattedTime]);
 
   useEffect(() => {
-    const getCustomerList = async (sorting: any) => {
-      try {
-        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
-          limit: 100,
-          page: 1,
-          with_deleted: false,
-          order_field: sorting[0].id,
-          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-        });
-
-        // console.log('CUSTOMER: ', response?.data);
-        setCustomers(response?.data.list);
-      } catch (error) {
-        console.error('Error fetching customer', error);
-      }
-    };
-
-    const getTransactionTypeList = async (sorting: any) => {
-      try {
-        const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
-          limit: 100,
-          page: 1,
-          with_deleted: false,
-          order_field: sorting[0].id,
-          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-        });
-
-        // console.log('TRANSACTION TYPE: ', response?.data);
-        setTransactions(response?.data.list);
-      } catch (error) {
-        console.error('Error fetching transaction type', error);
-      }
-    };
-
-    getCustomerList([{ id: 'msisdn', desc: false }]);
+    getCustomerList([{ id: 'id', desc: false }]);
     getTransactionTypeList([{ id: 'name', desc: false }]);
   }, []);
 
@@ -290,7 +291,7 @@ const AddDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {customers.find((customer) => customer.msisdn === formField.agent)
+                          {customers.find((customer) => customer.id === formField.agent)
                             ?.fullname || 'Select Agent'}
                         </button>
                       </PopoverTrigger>
@@ -302,12 +303,12 @@ const AddDialog = () => {
                             <CommandGroup>
                               {customers.map((customer) => (
                                 <CommandItem
-                                  key={customer.msisdn}
-                                  value={customer.fullname}
+                                  key={customer.id}
+                                  value={customer.id}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      agent: customer.msisdn
+                                      agent: customer.id
                                     });
                                     setOpen(false);
                                   }}
diff --git a/src/pages/master/provider/blocks/EditDialog.tsx b/src/pages/master/provider/blocks/EditDialog.tsx
index 186698f..574b827 100644
--- a/src/pages/master/provider/blocks/EditDialog.tsx
+++ b/src/pages/master/provider/blocks/EditDialog.tsx
@@ -128,7 +128,7 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
-    console.log(response);
+    // console.log(response);
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
@@ -185,7 +185,7 @@ const EditDialog = () => {
   }, [formattedTime]);
 
   useEffect(() => {
-    getCustomerList([{ id: 'msisdn', desc: false }]);
+    getCustomerList([{ id: 'id', desc: false }]);
     getTransactionTypeList([{ id: 'name', desc: false }]);
   }, []);
 

From f1a7a839e8ff533ca17697b5b856f6f2843e0d76 Mon Sep 17 00:00:00 2001
From: Raja Oktafrianto <rajaoktafrianto3.com>
Date: Tue, 25 Mar 2025 14:53:54 +0700
Subject: [PATCH 39/53] fixing add dialog manage user & manage position and
 edit dialog manage user

---
 .../user/manage-position/blocks/AddDialog.tsx | 24 +++++++++++---
 .../user/manage-user/blocks/AddDialog.tsx     | 10 ++++--
 .../user/manage-user/blocks/EditDialog.tsx    | 32 +++++++++++++------
 3 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/src/pages/settings/user/manage-position/blocks/AddDialog.tsx b/src/pages/settings/user/manage-position/blocks/AddDialog.tsx
index 6c32480..b24a4b3 100644
--- a/src/pages/settings/user/manage-position/blocks/AddDialog.tsx
+++ b/src/pages/settings/user/manage-position/blocks/AddDialog.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import {
   Dialog,
@@ -59,6 +59,10 @@ const MenuItemComponent: React.FC<{
   );
 };
 
+const initialState = {
+  name: ''
+};
+
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showAddDialog, handleAddDialog, menus } = useManagePositionContext();
@@ -69,9 +73,7 @@ const AddDialog = () => {
     message: ''
   });
   const [selectMenus, setSelectMenus] = useState<string[]>([]);
-  const [formField, setFormField] = useState({
-    name: ''
-  });
+  const [formField, setFormField] = useState(initialState);
 
   /* actions */
   const handleCheckboxChange = useCallback((key: string) => {
@@ -80,6 +82,12 @@ const AddDialog = () => {
     );
   }, []);
 
+  const resetForm = () => {
+    setFormField(() => ({ name: '' }));
+    setAlert({ show: false, message: '' });
+    setSelectMenus([]);
+  };
+
   const doCreatePosition = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -96,7 +104,7 @@ const AddDialog = () => {
       });
 
       if (response?.status) {
-        setAlert((prev) => ({ ...prev, show: false, message: '' }));
+        resetForm();
         handleAddDialog(false);
         toast.success('Success Create Position');
         reload();
@@ -114,6 +122,12 @@ const AddDialog = () => {
     [formField, selectMenus]
   );
 
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-screen-lg flex flex-col p-10 overflow-hidden [&>button]:hidden">
diff --git a/src/pages/settings/user/manage-user/blocks/AddDialog.tsx b/src/pages/settings/user/manage-user/blocks/AddDialog.tsx
index a7647cc..ac69750 100644
--- a/src/pages/settings/user/manage-user/blocks/AddDialog.tsx
+++ b/src/pages/settings/user/manage-user/blocks/AddDialog.tsx
@@ -59,6 +59,7 @@ const AddDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const resetForm = () => {
     setFormField(initialState);
+    setAlert({ show: false, message: '' });
   };
   const [showPassword, setShowPassword] = useState({
     password: false,
@@ -104,6 +105,12 @@ const AddDialog = () => {
 
   const isButtonDisabled = !messagePassword || isSubmitting || passwordErrors.length > 0;
 
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
   /* actions */
   const doCreateUser = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
@@ -118,7 +125,7 @@ const AddDialog = () => {
           `${API_URL}/user/add_role/${response?.message?.id}/${formField.id_role}`,
           {}
         );
-        setAlert((prev) => ({ ...prev, show: false, message: '' }));
+        resetForm();
         handleAddDialog(false);
         toast.success('Success Create User');
         reload();
@@ -336,7 +343,6 @@ const AddDialog = () => {
                     </div>
                   </div>
                 </div>
-                
 
                 <div className="flex justify-end pt-2.5">
                   <Button className="btn btn-primary" type="submit" disabled={isButtonDisabled}>
diff --git a/src/pages/settings/user/manage-user/blocks/EditDialog.tsx b/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
index c5e550c..e0110d3 100644
--- a/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
+++ b/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
@@ -26,6 +26,15 @@ import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_dashboard;
 
+const initialState = {
+  name: '',
+  username: '',
+  email: '',
+  id_role: '',
+  id_role_old: '',
+  status: ''
+};
+
 const EditDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showEditDialog, selectedUser, handleEditDialog, roles } = useUserContext();
@@ -35,16 +44,14 @@ const EditDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
-    name: '',
-    username: '',
-    email: '',
-    id_role: '',
-    id_role_old: '',
-    status: ''
-  };
+
   const [formField, setFormField] = useState(initialState);
 
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
   /* actions */
   const doResetForm = () => {
     setAlert({ show: false, message: '' });
@@ -58,7 +65,14 @@ const EditDialog = () => {
         ...formField,
         id_role_old: undefined
       });
+
+      if (formField.name.trim() === '') {
+        setAlert({ show: true, message: 'Please fill all required field' });
+        return;
+      }
+
       if (response?.status) {
+        resetForm();
         handleEditDialog(false, null);
         toast.success('Success Update User');
         reload();
@@ -111,7 +125,7 @@ const EditDialog = () => {
 
   useEffect(() => {
     if (showEditDialog === false) {
-      doResetForm();
+      resetForm();
     }
   }, [showEditDialog]);
 

From d8400c49d23b57e0a9a90b39a31db0b21484a582 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 15:02:28 +0700
Subject: [PATCH 40/53] cleaning code

---
 src/components/data-grid/DataGridContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/data-grid/DataGridContext.tsx b/src/components/data-grid/DataGridContext.tsx
index d68006b..9e95494 100644
--- a/src/components/data-grid/DataGridContext.tsx
+++ b/src/components/data-grid/DataGridContext.tsx
@@ -168,7 +168,7 @@ export const DataGridProvider = <TData extends object>(props: TDataGridProps<TDa
     manualFiltering: mergedProps.serverSide
   });
 
-  console.log('Filtered Rows:', table.getFilteredRowModel().rows);
+  // console.log('Filtered Rows:', table.getFilteredRowModel().rows);
 
   return (
     <DataGridContext.Provider

From 72825d737b04803493ba0c55d277a4a2bc238b42 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 16:48:23 +0700
Subject: [PATCH 41/53] fix create and edit provider

---
 .../master/provider/blocks/AddDialog.tsx      |  4 ++--
 .../master/provider/blocks/EditDialog.tsx     | 24 +++++++++----------
 .../provider/hooks/ManageProviderContext.tsx  |  4 ++--
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/pages/master/provider/blocks/AddDialog.tsx b/src/pages/master/provider/blocks/AddDialog.tsx
index 89b6655..e57ddef 100644
--- a/src/pages/master/provider/blocks/AddDialog.tsx
+++ b/src/pages/master/provider/blocks/AddDialog.tsx
@@ -292,7 +292,7 @@ const AddDialog = () => {
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
                           {customers.find((customer) => customer.id === formField.agent)
-                            ?.fullname || 'Select Agent'}
+                            ?.username || 'Select Agent'}
                         </button>
                       </PopoverTrigger>
                       <PopoverContent className="w-[400px] p-0">
@@ -313,7 +313,7 @@ const AddDialog = () => {
                                     setOpen(false);
                                   }}
                                 >
-                                  {customer.fullname}
+                                  {customer.username}
                                 </CommandItem>
                               ))}
                             </CommandGroup>
diff --git a/src/pages/master/provider/blocks/EditDialog.tsx b/src/pages/master/provider/blocks/EditDialog.tsx
index 574b827..d60d4c2 100644
--- a/src/pages/master/provider/blocks/EditDialog.tsx
+++ b/src/pages/master/provider/blocks/EditDialog.tsx
@@ -55,7 +55,7 @@ const EditDialog = () => {
     description: '',
     type: '',
     status: '',
-    transactionTypeId: '',
+    transaction_type: '',
     agent: '',
     updated_by: '',
     updated_at: ''
@@ -128,7 +128,7 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
-    // console.log(response);
+    console.log(response);
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
@@ -136,8 +136,8 @@ const EditDialog = () => {
         description: response?.data.description,
         type: response?.data.type,
         status: response?.data.status,
-        transactionTypeId: response?.data.transaction_type.id,
-        agent: response?.data.agent
+        transaction_type: response?.data.transaction_type.id,
+        agent: response?.data.agent.id
       }));
     }
   }, []);
@@ -150,7 +150,7 @@ const EditDialog = () => {
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.transactionTypeId.trim() === '' ||
+      formField.transaction_type.trim() === '' ||
       formField.agent.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
@@ -188,7 +188,7 @@ const EditDialog = () => {
     getCustomerList([{ id: 'id', desc: false }]);
     getTransactionTypeList([{ id: 'name', desc: false }]);
   }, []);
-
+  // console.log(selectedProvider);
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -282,9 +282,9 @@ const EditDialog = () => {
                       Transaction Type Id<span className="text-red-500">*</span>
                     </label>
                     <Select
-                      value={formField.transactionTypeId}
+                      value={formField.transaction_type}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, transactionTypeId: value })
+                        setFormField({ ...formField, transaction_type: value })
                       }
                     >
                       <SelectTrigger>
@@ -309,7 +309,7 @@ const EditDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {customers.find((customer) => customer.msisdn === formField.agent)
+                          {customers.find((customer) => customer.id === formField.agent)
                             ?.fullname || 'Select Agent'}
                         </button>
                       </PopoverTrigger>
@@ -321,12 +321,12 @@ const EditDialog = () => {
                             <CommandGroup>
                               {customers.map((customer) => (
                                 <CommandItem
-                                  key={customer.msisdn}
-                                  value={customer.fullname}
+                                  key={customer.id}
+                                  value={customer.id}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      agent: customer.msisdn
+                                      agent: customer.id
                                     });
                                     setOpen(false);
                                   }}
diff --git a/src/pages/master/provider/hooks/ManageProviderContext.tsx b/src/pages/master/provider/hooks/ManageProviderContext.tsx
index b065f8b..f68d8bc 100644
--- a/src/pages/master/provider/hooks/ManageProviderContext.tsx
+++ b/src/pages/master/provider/hooks/ManageProviderContext.tsx
@@ -153,12 +153,12 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
       const response = await GetData(`${API_URL}/provider/list`, {
         limit,
         page: page + 1,
-        with_deleted: true,
+        with_deleted: false,
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      console.log(response?.data);
+      // console.log(response?.data);
       setProvider(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {

From 9a0fe302716583ddecbac23356d3ef9ffbddb6e3 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 16:48:50 +0700
Subject: [PATCH 42/53] update row wallet rule

---
 src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
index 819785c..b71f086 100644
--- a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
+++ b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
@@ -201,7 +201,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
       <Toaster expand visibleToasts={9} duration={3000} />
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 10 }}
+        pagination={{ size: 5 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

From bf8e1a90f6e35b30dae5f49925a30cfbf0a02e14 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 16:53:37 +0700
Subject: [PATCH 43/53] update delete posto - remove hard delete

---
 src/pages/master/postoadms/blocks/DeleteDialog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/master/postoadms/blocks/DeleteDialog.tsx b/src/pages/master/postoadms/blocks/DeleteDialog.tsx
index f969485..bc597ae 100644
--- a/src/pages/master/postoadms/blocks/DeleteDialog.tsx
+++ b/src/pages/master/postoadms/blocks/DeleteDialog.tsx
@@ -45,7 +45,7 @@ const DeleteDialog = () => {
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
             <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
+            {/* <div className="mt-2 flex items-center gap-x-2">
               <label className="form-label max-w-56">Hard Delete</label>
               <EnforceSwitch
                 enforce={enforce}
@@ -53,7 +53,7 @@ const DeleteDialog = () => {
                   setEnforce(e.target.checked);
                 }}
               />
-            </div>
+            </div> */}
           </Alert>
           {alert.show && (
             <Alert variant="danger">

From 6435911b3c25aedcc3d1c631f9f9fac451b02b1b Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Tue, 25 Mar 2025 17:04:25 +0700
Subject: [PATCH 44/53] fix crud transation type

---
 .../transfer/transferfee/blocks/AddDialog.tsx | 23 ++++----
 .../transferfee/blocks/EditDialog.tsx         | 54 +++++++------------
 .../hooks/ManageTransferFeeContext.tsx        | 26 +++++----
 .../transfertype/blocks/AddDialog.tsx         |  7 +--
 .../transfertype/blocks/EditDialog.tsx        | 37 ++-----------
 .../hooks/ManageTransferTypeContext.tsx       | 12 ++---
 6 files changed, 63 insertions(+), 96 deletions(-)

diff --git a/src/pages/transfer/transferfee/blocks/AddDialog.tsx b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
index da039ee..73bdcfd 100644
--- a/src/pages/transfer/transferfee/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
@@ -104,10 +104,10 @@ const AddFeeDialog = () => {
       maximum_amount: formField.maximum_amount,
       deduct_amount: formField.deduct_amount,
       deduct_percentage: formField.deduct_percentage,
-      priority: formField.priority,
       transaction_type: formField.transaction_type,
       status: formField.status,
-      status_include: formField.status_include
+      status_include: formField.status_include,
+      priority: formField.priority ? 'Y' : 'N'
     };
   };
   useEffect(() => {
@@ -160,10 +160,9 @@ const AddFeeDialog = () => {
 
       setAlert({ show: false, message: '' });
       const response = await PostData(`${API_URL}/transactionfees/create`, {
-        ...formField,
-        priority: formField.priority ? 'Y' : 'N'
+        ...formField
       });
-
+      console.log(response);
       if (response?.status) {
         toast.success('Success Create Transfer Fee');
         reload();
@@ -348,8 +347,8 @@ const AddFeeDialog = () => {
                       <SelectValue placeholder="Select Status" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="Y">Y</SelectItem>
-                      <SelectItem value="N">N</SelectItem>
+                      <SelectItem value="Y">Active</SelectItem>
+                      <SelectItem value="N">Inactive</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
@@ -363,8 +362,8 @@ const AddFeeDialog = () => {
                       <SelectValue placeholder="Select Status" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="Y">Y</SelectItem>
-                      <SelectItem value="N">N</SelectItem>
+                      <SelectItem value="Y">Yes</SelectItem>
+                      <SelectItem value="N">No</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
@@ -373,15 +372,15 @@ const AddFeeDialog = () => {
                   <Select
                     value={formField.priority ? 'Y' : 'N'}
                     onValueChange={(value) =>
-                      setFormField({ ...formField, priority: value === 'Y' })
+                      setFormField((prev) => ({ ...prev, priority: value === 'Y' }))
                     }
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select Priority" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="Y">Y</SelectItem>
-                      <SelectItem value="N">N</SelectItem>
+                      <SelectItem value="Y">Yes</SelectItem>
+                      <SelectItem value="N">No</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
index 87ee112..34e990e 100644
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -72,7 +72,7 @@ const EditFeeDialog = () => {
     period_end: '',
     deduct_amount: 0,
     deduct_percentage: 0,
-    priority: '',
+    priority: false,
     status: '',
     status_include: '',
     transaction_type: '',
@@ -96,7 +96,8 @@ const EditFeeDialog = () => {
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       const response = await PutData(`${API_URL}/transactionfees/update/${selectedTransferFee}`, {
-        ...formField
+        ...formField,
+        priority: formField.priority ? 'Y' : 'N' // Ubah ke "Y" atau "N"
       });
       if (response?.status) {
         handleEditFeeDialog(false, null);
@@ -165,9 +166,10 @@ const EditFeeDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-        setTransactionTypes(response?.data.list || []);
+        // console.log('Transaction Type: ', response?.data.list);
+        setTransactionTypes(response?.data.list);
       } catch (error) {
-        console.error('Error fetching customer', error);
+        console.error('Error fetching Transaction Type', error);
       }
     };
 
@@ -188,29 +190,10 @@ const EditFeeDialog = () => {
         period_end: response.data.period_end,
         deduct_amount: response.data.deduct_amount,
         deduct_percentage: response.data.deduct_percentage,
-        priority: response.data.priority,
+        priority: response.data.priority === 'Y',
         status: response.data.status,
         status_include: response.data.status_include,
         transaction_type: response.data.transaction_type.id
-
-        // updated_by: parsedUser?.username ,
-        // updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
-      }));
-    } else {
-      setFormField((prev) => ({
-        ...prev,
-        name: '',
-        description: '',
-        minimum_amount: 0,
-        maximum_amount: 0,
-        period_start: '',
-        period_end: '',
-        deduct_amount: 0,
-        deduct_percentage: 0,
-        priority: '',
-        status: '',
-        status_include: '',
-        transaction_type: ''
       }));
     }
   }, []);
@@ -230,7 +213,7 @@ const EditFeeDialog = () => {
       period_end: '',
       deduct_amount: 0,
       deduct_percentage: 0,
-      priority: '',
+      priority: false,
       status: '',
       status_include: '',
       transaction_type: '',
@@ -416,8 +399,8 @@ const EditFeeDialog = () => {
                         <SelectValue placeholder="Select Status" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="Y">Y</SelectItem>
-                        <SelectItem value="N">N</SelectItem>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
                       </SelectContent>
                     </Select>
                   </div>
@@ -433,26 +416,29 @@ const EditFeeDialog = () => {
                         <SelectValue placeholder="Select Status" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="Y">Y</SelectItem>
-                        <SelectItem value="N">N</SelectItem>
+                        <SelectItem value="Y">Yes</SelectItem>
+                        <SelectItem value="N">No</SelectItem>
                       </SelectContent>
                     </Select>
                   </div>
                   <div className="w-full">
                     <label className="form-label">Priority</label>
                     <Select
-                      value={formField.priority}
-                      onValueChange={(value) => setFormField({ ...formField, priority: value })}
+                      value={formField.priority ? 'Y' : 'N'} // Menyesuaikan nilai
+                      onValueChange={(value) =>
+                        setFormField((prev) => ({ ...prev, priority: value === 'Y' }))
+                      }
                     >
                       <SelectTrigger>
-                        <SelectValue placeholder="Select Status" />
+                        <SelectValue placeholder="Select Priority" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="Y">Y</SelectItem>
-                        <SelectItem value="N">N</SelectItem>
+                        <SelectItem value="Y">Yes</SelectItem>
+                        <SelectItem value="N">No</SelectItem>
                       </SelectContent>
                     </Select>
                   </div>
+
                   {/* <div className="w-full">
                   <label className="form-label">Priotity</label>
                   <Select
diff --git a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
index bea23af..8188d4d 100644
--- a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
+++ b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
@@ -136,14 +136,6 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
         enableHiding: false,
         meta: { headerClassName: 'w-[150px]' }
       },
-      {
-        accessorFn: (row) => row.priority,
-        id: 'priority',
-        header: ({ column }) => <DataGridColumnHeader title="Priority" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: { headerClassName: 'w-[100px]' }
-      },
       {
         accessorFn: (row) => row.transaction_type?.name,
         id: 'transactionTypeId',
@@ -153,7 +145,23 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
         meta: { headerClassName: 'w-[250px]' }
       },
       {
-        accessorFn: (row) => row.status_include,
+        accessorFn: (row) => (row.priority === 'Y' ? 'Yes' : 'No'),
+        id: 'priority',
+        header: ({ column }) => <DataGridColumnHeader title="Priority" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[100px]' }
+      },
+      {
+        accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactieve'),
+        id: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => (row.status_include === 'Y' ? 'Yes' : 'No'),
         id: 'status_include',
         header: ({ column }) => <DataGridColumnHeader title="Status Include" column={column} />,
         enableSorting: true,
diff --git a/src/pages/transfer/transfertype/blocks/AddDialog.tsx b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
index 95b448d..453fdcf 100644
--- a/src/pages/transfer/transfertype/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
@@ -127,13 +127,14 @@ const AddDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-        setCustomers(response?.data.list || []);
+        setCustomers(response?.data.list);
+        console.log('CUSTOMER: ', response?.data.list);
       } catch (error) {
         console.error('Error fetching customer', error);
       }
     };
 
-    getCustomerList([{ id: 'msisdn', desc: false }]);
+    getCustomerList([{ id: 'id', desc: false }]);
   }, [showAddDialog]);
 
   const fetchWallets = useCallback(async () => {
@@ -397,7 +398,7 @@ const AddDialog = () => {
                 </div>
                 <div className="w-full">
                   <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">Customer</label>
+                    <label className="form-label max-w-56">Customer Fee Destination</label>
                     <div className="grow">
                       <Select
                         value={formField.customer_fee_destination}
diff --git a/src/pages/transfer/transfertype/blocks/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
index a4d94d4..15f56e0 100644
--- a/src/pages/transfer/transfertype/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
@@ -143,15 +143,15 @@ const EditDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-
-        setCustomers(response?.data.list || []);
+        console.log('CUSTOMER: ', response?.data.list);
+        setCustomers(response?.data.list);
       } catch (error) {
         console.error('Error fetching customer', error);
       }
     };
 
     getCustomerList([{ id: 'id', desc: false }]);
-  }, [showEditDialog]);
+  }, []);
   const fetchWallets = useCallback(async () => {
     const params = {
       limit: 100,
@@ -177,9 +177,8 @@ const EditDialog = () => {
 
   const fetchTransactionType = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
-
+    console.log('Transaction Type: ', response?.data);
     if (response?.status) {
-      const data = response.data;
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
@@ -196,21 +195,7 @@ const EditDialog = () => {
         // updated_by: parsedUser?.username ,
         // updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
       }));
-    } else {
-      setFormField((prev) => ({
-        ...prev,
-        name: '',
-        description: '',
-        wallet_origin: '',
-        wallet_destination: '',
-        wallet_fee_destination: '',
-        customer_fee_destination: '',
-        maximum_amount: 0,
-        minimum_amount: 0,
-        max_transaction_per_day: 0,
-        status_approval: '',
-        status: ''
-      }));
+      console.log('Transaction Type: ', formField);
     }
   }, []);
 
@@ -493,19 +478,7 @@ const EditDialog = () => {
                     </div>
                   </div>
                 </div>
-
-                {/* <div className="grid gap-5 lg:gap-7.5">
-              <DataGridInner />
-            </div> */}
                 <div className="flex justify-end pt-2.5 gap-5">
-                  {/* <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => setShowTransactionFeeDialog(true)}
-                  >
-                    Transaction Fee Form
-                  </Button> */}
-
                   <Button
                     variant={'outline'}
                     type="reset"
diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
index 3e5c0a7..33595fd 100644
--- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
+++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
@@ -156,17 +156,17 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         meta: { headerClassName: 'w-[250px]' }
       },
       {
-        accessorFn: (row) => row.status_approval,
-        id: 'status_approval',
-        header: ({ column }) => <DataGridColumnHeader title="Approval Status" column={column} />,
+        accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
+        id: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[150px]' }
       },
       {
-        accessorFn: (row) => row.status,
-        id: 'status',
-        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        accessorFn: (row) => (row.status_approval === 'Y' ? 'Yes' : 'No'),
+        id: 'status_approval',
+        header: ({ column }) => <DataGridColumnHeader title="Approval Status" column={column} />,
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[150px]' }

From ad8d683023d7975fc7b5da645284bbaf35357d81 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 18:46:04 +0700
Subject: [PATCH 45/53] fix create profession

---
 src/pages/master/profession/blocks/AddDialog.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/master/profession/blocks/AddDialog.tsx b/src/pages/master/profession/blocks/AddDialog.tsx
index f3f0f34..f87c9f9 100644
--- a/src/pages/master/profession/blocks/AddDialog.tsx
+++ b/src/pages/master/profession/blocks/AddDialog.tsx
@@ -48,6 +48,7 @@ const AddDialog = () => {
     const response = await PostData(`${API_URL}/profession/create`, formField);
 
     if (response?.status) {
+      resetForm();
       handleAddDialog(false);
       toast.success('Success Create Profession');
       reload();

From f499530a6f7b146b10468684a471b3c54d94ddd2 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 18:51:15 +0700
Subject: [PATCH 46/53] fix create provider

---
 src/pages/master/provider/blocks/AddDialog.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/master/provider/blocks/AddDialog.tsx b/src/pages/master/provider/blocks/AddDialog.tsx
index e57ddef..87908cb 100644
--- a/src/pages/master/provider/blocks/AddDialog.tsx
+++ b/src/pages/master/provider/blocks/AddDialog.tsx
@@ -87,7 +87,7 @@ const AddDialog = () => {
     const response = await PostData(`${API_URL_MASTERDATA}/provider/create`, formField);
 
     if (response?.status) {
-      // resetForm();
+      resetForm();
       handleAddDialog(false);
       toast.success('Success Create Provider');
       reload();
@@ -101,7 +101,7 @@ const AddDialog = () => {
     e.preventDefault();
 
     if (
-      formField.name.trim() === '' ||
+      formField.name === '' ||
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
@@ -112,8 +112,8 @@ const AddDialog = () => {
       return;
     }
 
-    doCreateProvider(e);
     console.log(formField);
+    doCreateProvider(e);
     setAlert({ show: false, message: '' });
   };
 

From 7c0c6318863f36b9cad53b5a3bf2ea75bc4df9e7 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 19:12:18 +0700
Subject: [PATCH 47/53] fix create profession

---
 src/pages/master/profession/blocks/AddDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/master/profession/blocks/AddDialog.tsx b/src/pages/master/profession/blocks/AddDialog.tsx
index f87c9f9..247ff73 100644
--- a/src/pages/master/profession/blocks/AddDialog.tsx
+++ b/src/pages/master/profession/blocks/AddDialog.tsx
@@ -61,7 +61,7 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name.trim() === '') {
+    if (formField.name === '') {
       setAlert({ show: true, message: 'Please fill name field.' });
       return;
     }

From 252e32f06b3c9d738fea06762246e652d8e745b6 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 19:17:36 +0700
Subject: [PATCH 48/53] fix create profession

---
 .../master/profession/blocks/AddDialog.tsx    | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

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

From 2600e3072f5594b980dbc9b53133e3922f61eaad Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Tue, 25 Mar 2025 19:38:17 +0700
Subject: [PATCH 49/53] Changing hard delete to soft delete on transactiontype
 and transactionfee

---
 .../transferfee/blocks/DeleteDialog.tsx       | 34 +++++-----------
 .../transfertype/blocks/DeleteDialog.tsx      | 39 ++++++-------------
 2 files changed, 20 insertions(+), 53 deletions(-)

diff --git a/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx b/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx
index 02faee8..e3d2f88 100644
--- a/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx
@@ -1,17 +1,12 @@
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Alert, useDataGrid } from '@/components';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
-import { doSaveLogActivity } from '@/actions/GlobalActions';
-import { EnforceSwitch } from '@/components/switch';
-import { useContext } from 'react';
 import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
-import { ManageTransferFeeContext } from '../hooks/ManageTransferFeeContext';
 import { DialogDescription } from '@radix-ui/react-dialog';
-import { useManageAccessTypeContext } from '@/pages/access/access-type/hooks/useManageAccessTypeContext';
 
 const API_URL = apiConfig.service_transaction;
 
@@ -19,47 +14,37 @@ const DeleteDialog = () => {
   const { showDeleteFeeDialog, handleDeleteFeeDialog, selectedTransferFee } = useManageTransferFeeContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
 
   const doDeleteTransferFee = useCallback(async () => {
-    const response = await DeleteData(`${API_URL}/transactionfees/delete/${selectedTransferFee}/${enforce}`, {
+    // Kirim enforce=false untuk memastikan soft delete
+    const response = await DeleteData(`${API_URL}/transactionfees/delete/${selectedTransferFee}/false`, {
       id: selectedTransferFee
     });
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteFeeDialog(false, null);
       toast.success('Success Delete Product');
       reload();
     } else {
       toast.error('Failed Delete Product');
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      setAlert({ show: true, message: response?.message });
     }
-  }, [selectedTransferFee, enforce]);
-
+  }, [selectedTransferFee]);
 
   return (
     <Dialog open={showDeleteFeeDialog} onOpenChange={(open) => handleDeleteFeeDialog(open, null)}>
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogHeader className="p-0 border-0 block">
           <DialogTitle className="text-lg">Delete Transfer Type</DialogTitle>
-          <DialogDescription className="text-sm">Delete Transfer Type</DialogDescription>
+          <DialogDescription className="text-sm">Are you sure you want to delete this data?</DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
+            <span className="text-sm">You will delete this data!</span>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -80,6 +65,5 @@ const DeleteDialog = () => {
   );
 };
 
-export default DeleteDialog;
-
+export default DeleteDialog;
 export { DeleteDialog };
diff --git a/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx b/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx
index 4adfdc8..0f610e3 100644
--- a/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx
@@ -1,18 +1,12 @@
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Alert, useDataGrid } from '@/components';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
-import { doSaveLogActivity } from '@/actions/GlobalActions';
-import { EnforceSwitch } from '@/components/switch';
-import { useContext } from 'react';
 import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
-import { ManageTransferTypeContext } from '../hooks/ManageTransferTypeContext';
-import TransferType from '../TransferType';
 import { DialogDescription } from '@radix-ui/react-dialog';
-import { useManageAccessTypeContext } from '@/pages/access/access-type/hooks/useManageAccessTypeContext';
 
 const API_URL = apiConfig.service_transaction;
 
@@ -20,7 +14,6 @@ const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedTransferType } = useManageTransferTypeContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -31,41 +24,32 @@ const DeleteDialog = () => {
       toast.error('No Transfer Type selected');
       return;
     }
-  
-    const response = await DeleteData(`${API_URL}/transactiontype/delete/${selectedTransferType}/${enforce}`, {
+
+    // Kirim enforce=false untuk memastikan soft delete
+    const response = await DeleteData(`${API_URL}/transactiontype/delete/${selectedTransferType}/false`, {
       id: selectedTransferType
     });
-  
+
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       reload();
       setTimeout(() => toast.success('Success Delete Product'), 0);
     } else {
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      setAlert({ show: true, message: response?.message });
       setTimeout(() => toast.error('Failed Delete Product'), 0);
     }
-  }, [selectedTransferType, enforce, DeleteData, handleDeleteDialog, reload]);
-  
+  }, [selectedTransferType, DeleteData, handleDeleteDialog, reload]);
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogHeader className="p-0 border-0 block">
           <DialogTitle className="text-lg">Delete Transfer Type</DialogTitle>
-          <DialogDescription className="text-sm">Delete Transfer Type</DialogDescription>
+          <DialogDescription className="text-sm">Are you sure you want to delete this data?</DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
+            <span className="text-sm">You will delete this data!</span>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -86,6 +70,5 @@ const DeleteDialog = () => {
   );
 };
 
-export default DeleteDialog;
-
+export default DeleteDialog;
 export { DeleteDialog };

From 949a8679a93901c914f1ca4f717c4c89203678ab Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 21:02:08 +0700
Subject: [PATCH 50/53] fix create provider

---
 .../master/provider/blocks/AddDialog.tsx      | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/pages/master/provider/blocks/AddDialog.tsx b/src/pages/master/provider/blocks/AddDialog.tsx
index 87908cb..f590e86 100644
--- a/src/pages/master/provider/blocks/AddDialog.tsx
+++ b/src/pages/master/provider/blocks/AddDialog.tsx
@@ -81,27 +81,30 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
-  const doCreateProvider = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const doCreateProvider = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
 
-    const response = await PostData(`${API_URL_MASTERDATA}/provider/create`, formField);
+      const response = await PostData(`${API_URL_MASTERDATA}/provider/create`, formField);
 
-    if (response?.status) {
-      resetForm();
-      handleAddDialog(false);
-      toast.success('Success Create Provider');
-      reload();
-    } else {
-      toast.error('Failed Create Provider');
-      setAlert({ show: true, message: 'Failed Create Provider' });
-    }
-  }, []);
+      if (response?.status) {
+        resetForm();
+        handleAddDialog(false);
+        toast.success('Success Create Provider');
+        reload();
+      } else {
+        toast.error('Failed Create Provider');
+        setAlert({ show: true, message: 'Failed Create Provider' });
+      }
+    },
+    [formField]
+  );
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (
-      formField.name === '' ||
+      formField.name.trim() === '' ||
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
@@ -160,7 +163,7 @@ const AddDialog = () => {
         created_at: formattedTime
       });
     }
-  }, [formattedTime]);
+  }, [formattedTime, parsedUser.username, showAddDialog]);
 
   useEffect(() => {
     getCustomerList([{ id: 'id', desc: false }]);

From 9ab0e7838f552be611c5004e57b0427cf7629e0c Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 22:08:53 +0700
Subject: [PATCH 51/53] fix create and update aldeias

---
 src/pages/master/aldeias/blocks/AddDialog.tsx  | 10 +++++-----
 src/pages/master/aldeias/blocks/EditDialog.tsx | 12 ++++++------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/pages/master/aldeias/blocks/AddDialog.tsx b/src/pages/master/aldeias/blocks/AddDialog.tsx
index 731ceba..f678f33 100644
--- a/src/pages/master/aldeias/blocks/AddDialog.tsx
+++ b/src/pages/master/aldeias/blocks/AddDialog.tsx
@@ -46,7 +46,7 @@ const AddDialog = () => {
   });
   const initialState = {
     name: '',
-    sucos_id: 0,
+    sucosId: 0,
     created_by: '',
     created_at: ''
   };
@@ -99,7 +99,7 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name === '' || formField.sucos_id === 0) {
+    if (formField.name === '' || formField.sucosId === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -168,7 +168,7 @@ const AddDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {sucos.find((suco) => suco.sucos_id === formField.sucos_id)?.sucos_name ||
+                          {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
                             'Select Sucos'}
                         </button>
                       </PopoverTrigger>
@@ -184,11 +184,11 @@ const AddDialog = () => {
                               {sucos.map((suco) => (
                                 <CommandItem
                                   key={suco.sucos_id}
-                                  value={suco.sucos_name}
+                                  value={suco.sucos_id.toString()}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      sucos_id: suco.sucos_id
+                                      sucosId: suco.sucos_id
                                     });
                                     setOpen(false);
                                   }}
diff --git a/src/pages/master/aldeias/blocks/EditDialog.tsx b/src/pages/master/aldeias/blocks/EditDialog.tsx
index d69981e..449197d 100644
--- a/src/pages/master/aldeias/blocks/EditDialog.tsx
+++ b/src/pages/master/aldeias/blocks/EditDialog.tsx
@@ -45,7 +45,7 @@ const EditDialog = () => {
   });
   const initialState = {
     name: '',
-    sucos_id: 0,
+    sucosId: 0,
     updated_by: '',
     updated_at: ''
   };
@@ -102,13 +102,13 @@ const EditDialog = () => {
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
-        sucos_id: response.data.sucos.id
+        sucosId: response.data.sucos.id
       }));
     } else {
       setFormField((prev) => ({
         ...prev,
         name: '',
-        sucos_id: 0
+        sucosId: 0
       }));
     }
   }, []);
@@ -116,7 +116,7 @@ const EditDialog = () => {
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name === '' || formField.sucos_id === 0) {
+    if (formField.name === '' || formField.sucosId === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -191,7 +191,7 @@ const EditDialog = () => {
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
-                          {sucos.find((suco) => suco.sucos_id === formField.sucos_id)?.sucos_name ||
+                          {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
                             'Select Sucos'}
                         </button>
                       </PopoverTrigger>
@@ -208,7 +208,7 @@ const EditDialog = () => {
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      sucos_id: suco.sucos_id
+                                      sucosId: suco.sucos_id
                                     });
                                     setOpen(false);
                                   }}

From 8a956ea9508c8c3f67e56e29776d52660632192a Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Mar 2025 22:39:57 +0700
Subject: [PATCH 52/53] update

---
 src/pages/master/walletRule/blocks/ListToolbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/master/walletRule/blocks/ListToolbar.tsx b/src/pages/master/walletRule/blocks/ListToolbar.tsx
index fb78c55..2a2df4f 100644
--- a/src/pages/master/walletRule/blocks/ListToolbar.tsx
+++ b/src/pages/master/walletRule/blocks/ListToolbar.tsx
@@ -15,7 +15,7 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Products"
+                placeholder="Search Wallet Rule"
                 value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />

From 89dc164891ff2e2a8ecbab1517d6da18c78e6444 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Tue, 25 Mar 2025 23:10:41 +0700
Subject: [PATCH 53/53] applying soft delete on masterdata, except walletrule
 and conversion

---
 .../master/aldeias/blocks/DeleteDialog.tsx    | 31 +++++------
 .../master/municipios/blocks/DeleteDialog.tsx | 55 +++++++------------
 .../master/postoadms/blocks/DeleteDialog.tsx  | 41 ++++++--------
 .../master/products/blocks/DeleteDialog.tsx   | 44 ++++++---------
 .../master/profession/blocks/DeleteDialog.tsx | 55 ++++++-------------
 .../master/provider/blocks/DeleteDialog.tsx   | 49 ++++++-----------
 .../master/sucos/blocks/DeleteDialog.tsx      | 50 ++++++-----------
 7 files changed, 123 insertions(+), 202 deletions(-)

diff --git a/src/pages/master/aldeias/blocks/DeleteDialog.tsx b/src/pages/master/aldeias/blocks/DeleteDialog.tsx
index 44fc4c1..17c4954 100644
--- a/src/pages/master/aldeias/blocks/DeleteDialog.tsx
+++ b/src/pages/master/aldeias/blocks/DeleteDialog.tsx
@@ -2,38 +2,42 @@ import { apiConfig } from '@/config/api.config';
 import { useManageAldeiasContext } from '../hooks/useManageAldeiasContext';
 import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
+
 const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedAldeias } = useManageAldeiasContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
-  })
+  });
 
   const doDeleteAldeias = useCallback(async () => {
-    const response = await DeleteData(`${API_URL}/aldeias/delete/${selectedAldeias}/${enforce}`, {
+    if (!selectedAldeias) {
+      toast.error('No Aldeias selected');
+      return;
+    }
+
+    const response = await DeleteData(`${API_URL}/aldeias/delete/${selectedAldeias}/false`, {
       id: selectedAldeias
     });
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Aldeias');
       reload();
     } else {
+      setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Aldeias');
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
     }
-  }, [selectedAldeias, enforce]);
+  }, [selectedAldeias, DeleteData, handleDeleteDialog, reload]);
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
@@ -41,16 +45,7 @@ const DeleteDialog = () => {
         <DialogHeader className="p-0 border-0 block">
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
+            <span className="text-sm">You will delete this data!</span>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
diff --git a/src/pages/master/municipios/blocks/DeleteDialog.tsx b/src/pages/master/municipios/blocks/DeleteDialog.tsx
index 0605ab5..f7e6f5d 100644
--- a/src/pages/master/municipios/blocks/DeleteDialog.tsx
+++ b/src/pages/master/municipios/blocks/DeleteDialog.tsx
@@ -1,69 +1,56 @@
 import { Alert, useDataGrid } from '@/components';
 import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
-import { ChangeEvent, useCallback, useState } from 'react';
-import axios from 'axios';
+import { useCallback, useState } from 'react';
 import { apiConfig } from '@/config/api.config';
 import { useCallApi } from '@/hooks';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { DialogDescription } from '@radix-ui/react-dialog';
 
 const API_URL = apiConfig.service_master_data;
 
 const DeleteDialog = () => {
-  const { showDeleteDialog, handleDeleteDialog, selectedMunicipios, municipios } =
-    useManageMunicipiosContext();
+  const { showDeleteDialog, handleDeleteDialog, selectedMunicipios } = useManageMunicipiosContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
 
   const doDeleteMunicipio = useCallback(async () => {
+    if (!selectedMunicipios) {
+      toast.error('No Municipio selected');
+      return;
+    }
+
     const response = await DeleteData(
-      `${API_URL}/municipios/delete/${selectedMunicipios}/${enforce}`,
-      {
-        id: selectedMunicipios
-      }
+      `${API_URL}/municipios/delete/${selectedMunicipios}/false`,
+      { id: selectedMunicipios }
     );
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Municipio');
       reload();
-      // const createActivity = {
-      //   module: 'Manage Municipio',
-      //   description: `Delete Municipio => ${selectedMunicipios}`,
-      //   action: 'D'
-      // };
-
-      // doSaveLogActivity(createActivity);
     } else {
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      setAlert({ show: true, message: response?.message });
+      toast.error('Failed Delete Municipio');
     }
-  }, [selectedMunicipios, enforce]);
+  }, [selectedMunicipios, DeleteData, handleDeleteDialog, reload]);
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
+      
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogHeader className="p-0 border-0 block">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
+            <span className="text-sm">You will delete this data!</span>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -72,10 +59,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeleteMunicipio()}>
+          <Button variant="destructive" onClick={doDeleteMunicipio}>
             Delete
           </Button>
         </DialogFooter>
diff --git a/src/pages/master/postoadms/blocks/DeleteDialog.tsx b/src/pages/master/postoadms/blocks/DeleteDialog.tsx
index bc597ae..fca5448 100644
--- a/src/pages/master/postoadms/blocks/DeleteDialog.tsx
+++ b/src/pages/master/postoadms/blocks/DeleteDialog.tsx
@@ -1,11 +1,10 @@
 import { Alert, useDataGrid } from '@/components';
 import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
 import { useCallApi } from '@/hooks';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
@@ -14,46 +13,42 @@ const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedPostoAdms } = useManagePostoAdmsContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
 
   const doDeletePostoAdm = useCallback(async () => {
+    if (!selectedPostoAdms) {
+      toast.error('No Posto Adm selected');
+      return;
+    }
+
     const response = await DeleteData(
-      `${API_URL}/postoadms/delete/${selectedPostoAdms}/${enforce}`,
-      {
-        id: selectedPostoAdms
-      }
+      `${API_URL}/postoadms/delete/${selectedPostoAdms}/false`,
+      { id: selectedPostoAdms }
     );
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Posto Adm');
       reload();
     } else {
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      setAlert({ show: true, message: response?.message });
+      toast.error('Failed Delete Posto Adm');
     }
-  }, [selectedPostoAdms, enforce]);
+  }, [selectedPostoAdms, DeleteData, handleDeleteDialog, reload]);
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogTitle></DialogTitle>
+        <DialogDescription></DialogDescription>
         <DialogHeader className="p-0 border-0 block">
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
-            {/* <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div> */}
+            <span className="text-sm">You will delete this data!</span>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -62,10 +57,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeletePostoAdm()}>
+          <Button variant="destructive" onClick={doDeletePostoAdm}>
             Delete
           </Button>
         </DialogFooter>
diff --git a/src/pages/master/products/blocks/DeleteDialog.tsx b/src/pages/master/products/blocks/DeleteDialog.tsx
index 39c3cb1..652f56b 100644
--- a/src/pages/master/products/blocks/DeleteDialog.tsx
+++ b/src/pages/master/products/blocks/DeleteDialog.tsx
@@ -2,57 +2,49 @@ import { apiConfig } from '@/config/api.config';
 import { useManageProductsContext } from '../hooks/useManageProductsContext';
 import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
+
 const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedProducts } = useManageProductsContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
+  const [alert, setAlert] = useState({ show: false, message: '' });
 
   const doDeleteProduct = useCallback(async () => {
-    const response = await DeleteData(`${API_URL}/product/delete/${selectedProducts}/${enforce}`, {
+    if (!selectedProducts) {
+      toast.error('No product selected');
+      return;
+    }
+
+    const response = await DeleteData(`${API_URL}/product/delete/${selectedProducts}/false`, {
       id: selectedProducts
     });
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Product');
       reload();
     } else {
+      setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Product');
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
     }
-  }, [selectedProducts, enforce]);
+  }, [selectedProducts, DeleteData, handleDeleteDialog, reload]);
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
-      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden">
+        <DialogTitle></DialogTitle>
+        <DialogDescription></DialogDescription>
         <DialogHeader className="p-0 border-0 block">
-          <DialogTitle></DialogTitle>
-          <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
+            <span className="text-sm">You will delete this data!</span>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -61,10 +53,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeleteProduct()}>
+          <Button variant="destructive" onClick={doDeleteProduct}>
             Delete
           </Button>
         </DialogFooter>
diff --git a/src/pages/master/profession/blocks/DeleteDialog.tsx b/src/pages/master/profession/blocks/DeleteDialog.tsx
index 0a74fc7..1f5f0f8 100644
--- a/src/pages/master/profession/blocks/DeleteDialog.tsx
+++ b/src/pages/master/profession/blocks/DeleteDialog.tsx
@@ -2,67 +2,48 @@ import { apiConfig } from '@/config/api.config';
 import { useManageProfessionContext } from '../hooks/useManageProfessionContext';
 import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
+
 const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedProfession } = useManageProfessionContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
+  const [alert, setAlert] = useState({ show: false, message: '' });
 
   const doDeleteProfession = useCallback(async () => {
-    const response = await DeleteData(
-      `${API_URL}/profession/delete/${selectedProfession}/${enforce}`,
-      {
-        id: selectedProfession
-      }
-    );
+    if (!selectedProfession) {
+      toast.error('No profession selected');
+      return;
+    }
+    const response = await DeleteData(`${API_URL}/profession/delete/${selectedProfession}/false`, {
+      id: selectedProfession
+    });
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Profession');
       reload();
     } else {
+      setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Profession');
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
     }
-  }, [selectedProfession, enforce]);
+  }, [selectedProfession, DeleteData, handleDeleteDialog, reload]);
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
-      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden">
         <DialogHeader className="p-0 border-0 block">
           <DialogTitle></DialogTitle>
           <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
+            <span className="text-sm">You will delete this data!</span>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -71,10 +52,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeleteProfession()}>
+          <Button variant="destructive" onClick={doDeleteProfession}>
             Delete
           </Button>
         </DialogFooter>
diff --git a/src/pages/master/provider/blocks/DeleteDialog.tsx b/src/pages/master/provider/blocks/DeleteDialog.tsx
index 9be7895..41e0bef 100644
--- a/src/pages/master/provider/blocks/DeleteDialog.tsx
+++ b/src/pages/master/provider/blocks/DeleteDialog.tsx
@@ -2,64 +2,49 @@ import { apiConfig } from '@/config/api.config';
 import { useManageProviderContext } from '../hooks/useManageProviderContext';
 import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
+
 const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedProvider } = useManageProviderContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
+  const [alert, setAlert] = useState({ show: false, message: '' });
 
   const doDeleteProvider = useCallback(async () => {
-    const response = await DeleteData(`${API_URL}/provider/delete/${selectedProvider}/${enforce}`, {
+    if (!selectedProvider) {
+      toast.error('No provider selected');
+      return;
+    }
+
+    const response = await DeleteData(`${API_URL}/provider/delete/${selectedProvider}/false`, {
       id: selectedProvider
     });
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Provider');
       reload();
     } else {
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Provider');
     }
-  }, [selectedProvider, enforce]);
+  }, [selectedProvider, DeleteData, handleDeleteDialog, reload]);
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
-      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden">
         <DialogHeader className="p-0 border-0 block">
           <DialogTitle></DialogTitle>
           <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
+            <span className="text-sm">You will delete this data!</span>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -68,10 +53,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeleteProvider()}>
+          <Button variant="destructive" onClick={doDeleteProvider}>
             Delete
           </Button>
         </DialogFooter>
diff --git a/src/pages/master/sucos/blocks/DeleteDialog.tsx b/src/pages/master/sucos/blocks/DeleteDialog.tsx
index f1235f9..440ee6a 100644
--- a/src/pages/master/sucos/blocks/DeleteDialog.tsx
+++ b/src/pages/master/sucos/blocks/DeleteDialog.tsx
@@ -1,18 +1,10 @@
 import { apiConfig } from '@/config/api.config';
 import { useManageSucosContext } from '../hooks/useManageSucosContext';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useCallApi } from '@/hooks';
 import { Alert, useDataGrid } from '@/components';
 import { toast } from 'sonner';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { EnforceSwitch } from '@/components/switch';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_master_data;
@@ -21,45 +13,39 @@ const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedSucos } = useManageSucosContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
+  const [alert, setAlert] = useState({ show: false, message: '' });
 
   const doDeleteSucos = useCallback(async () => {
-    const response = await DeleteData(`${API_URL}/sucos/delete/${selectedSucos}/${enforce}`, {
+    if (!selectedSucos) {
+      toast.error('No sucos selected');
+      return;
+    }
+
+    // Hanya soft delete (tanpa enforce)
+    const response = await DeleteData(`${API_URL}/sucos/delete/${selectedSucos}/false`, {
       id: selectedSucos
     });
 
     if (response?.status) {
-      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Sucos');
       reload();
     } else {
-      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      setAlert({ show: true, message: response?.message });
+      toast.error('Failed Delete Sucos');
     }
-  }, [selectedSucos, enforce]);
+  }, [selectedSucos, DeleteData, handleDeleteDialog, reload]);
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
-      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden">
         <DialogHeader className="p-0 border-0 block">
           <DialogTitle></DialogTitle>
           <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
-            <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
+            <span className="text-sm">You will delete this data!</span>
           </Alert>
           {alert.show && (
             <Alert variant="danger">
@@ -68,10 +54,10 @@ const DeleteDialog = () => {
           )}
         </DialogHeader>
         <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-          <Button variant={'outline'} onClick={() => handleDeleteDialog(false, null)}>
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
             Cancel
           </Button>
-          <Button variant={'destructive'} onClick={() => doDeleteSucos()}>
+          <Button variant="destructive" onClick={doDeleteSucos}>
             Delete
           </Button>
         </DialogFooter>