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

src/pages/master/walletRule/WalletRuleMaster.tsx

@@ -1,6 +1,9 @@
 import { Container, DataGridInner } from '@/components';
 import { ManageWalletRuleContextProvider } from './hooks/ManageWalletRuleContext';
 import { Breadcrumbs, Link } from '@mui/material';
+import AddDialog from './blocks/AddDialog';
+import EditDialog from './blocks/EditDialog';
+import DeleteDialog from './blocks/DeleteDialog';
 
 const WalletRuleMaster = () => {
   return (
@@ -24,6 +27,10 @@ const WalletRuleMaster = () => {
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>
+
+        <AddDialog />
+        <EditDialog />
+        <DeleteDialog />
       </Container>
     </ManageWalletRuleContextProvider>
   );

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

@@ -0,0 +1,380 @@
+import { apiConfig } from '@/config/api.config';
+import { useManageWalletRuleContext } from '../hooks/useManageWalletRuleContext';
+import { Alert, useDataGrid } from '@/components';
+import { useCallApi } from '@/hooks';
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { NumericFormat } from 'react-number-format';
+
+interface GroupProps {
+  ID: string;
+  is_bank: string;
+  name: string;
+  status: string;
+}
+
+interface WalletProps {
+  ID: string;
+  name: string;
+  id_currency: string;
+  status: string;
+}
+
+const API_URL_WALLET = apiConfig.service_wallet;
+const AddDialog = () => {
+  const { showAddDialog, handleAddDialog } = useManageWalletRuleContext();
+  const { reload } = useDataGrid();
+  const { PostData, GetData } = useCallApi();
+  const [open, setOpen] = useState(false);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const initialState: {
+    id_wallet: string;
+    id_group: string;
+    max_transaction_per_day: string | number | null;
+    balance_minimum: string | number | null;
+    balance_maximum: string | number | null;
+    credit_limit: string | number | null;
+    monthly_limit: string | number | null;
+    status: string;
+  } = {
+    id_wallet: '',
+    id_group: '',
+    max_transaction_per_day: null,
+    balance_minimum: null,
+    balance_maximum: null,
+    credit_limit: null,
+    monthly_limit: null,
+    status: ''
+  };
+  const [formField, setFormField] = useState(initialState);
+  const [groups, setGroups] = useState<GroupProps[]>([]);
+  const [wallets, setWallets] = useState<WalletProps[]>([]);
+
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
+  const doCreateWalletRule = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      const response = await PostData(`${API_URL_WALLET}/dashboard/wallet_rule`, formField);
+
+      if (response?.status) {
+        handleAddDialog(false);
+        toast.success('Success Create Wallet Rule');
+        reload();
+      } else {
+        toast.error('Failed Create Wallet Rule');
+        setAlert({ show: true, message: 'Failed Create Wallet Rule' });
+      }
+    },
+    [formField]
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (
+      formField.id_group.trim() === '' ||
+      formField.max_transaction_per_day === 0 ||
+      formField.balance_minimum === 0 ||
+      formField.balance_maximum === 0 ||
+      formField.credit_limit === 0 ||
+      formField.monthly_limit === 0 ||
+      formField.status.trim() === ''
+    ) {
+      setAlert({ show: true, message: 'Please fill in all required fields.' });
+      return;
+    }
+
+    console.log(formField);
+    doCreateWalletRule(e);
+    setAlert({ show: false, message: '' });
+  };
+
+  const getGroupLists = async (sorting: any) => {
+    try {
+      const response = await GetData(`${API_URL_WALLET}/dashboard/group`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('GROUPS: ', response?.data);
+      setGroups(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching groups', error);
+    }
+  };
+
+  const getWalletLists = async (sorting: any) => {
+    try {
+      const response = await GetData(`${API_URL_WALLET}/dashboard/wallet`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('WALLET: ', response?.data);
+      setWallets(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching wallet', error);
+    }
+  };
+
+  useEffect(() => {
+    getWalletLists([{ id: 'name', desc: false }]);
+    getGroupLists([{ id: 'name', desc: false }]);
+  }, []);
+
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
+  return (
+    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Wallet Rule - Create</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <DialogBody className="scrollable">
+          <div className="flex flex-col">
+            {alert.show && (
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+
+            <form onSubmit={handleSubmit}>
+              <div className="card-body grid gap-5">
+                <div className="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">
+                      Wallet<span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formField.id_wallet}
+                      onValueChange={(value) => setFormField({ ...formField, id_wallet: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Wallet Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {wallets.map((wallet) => (
+                          <SelectItem key={wallet.ID} value={wallet.ID}>
+                            {wallet.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </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">
+                      Group<span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formField.id_group}
+                      onValueChange={(value) => setFormField({ ...formField, id_group: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Group Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {groups.map((group) => (
+                          <SelectItem key={group.ID} value={group.ID}>
+                            {group.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </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<span className="text-red-500">*</span>
+                    </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 !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Max Transaction Per Day"
+                    />
+                  </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">
+                      Balance Minimum<span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.balance_minimum ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          balance_minimum: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Balance Minimum"
+                    />
+                  </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">
+                      Balance Maximum<span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.balance_maximum ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          balance_maximum: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Balance Maximum"
+                    />
+                  </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">
+                      Credit Limit<span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.credit_limit ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          credit_limit: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Credit Limit"
+                    />
+                  </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">
+                      Monthly Limit<span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.monthly_limit ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          monthly_limit: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Monthly Limit"
+                    />
+                  </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">
+                      Status<span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formField.status}
+                      onValueChange={(value) => setFormField({ ...formField, status: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="flex justify-end gap-5">
+                  <Button type="button" variant="outline" onClick={resetForm}>
+                    Reset
+                  </Button>
+                  <Button variant="default">Create</Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddDialog;

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

@@ -0,0 +1,76 @@
+import { useCallApi } from '@/hooks';
+import { useManageWalletRuleContext } from '../hooks/useManageWalletRuleContext';
+import { Alert, useDataGrid } from '@/components';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { apiConfig } from '@/config/api.config';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+const API_URL_WALLET = apiConfig.service_wallet;
+
+const DeleteDialog = () => {
+  const { showDeleteDialog, handleDeleteDialog, selectedWalletRule } = useManageWalletRuleContext();
+  const { DeleteData } = useCallApi();
+  const { reload } = useDataGrid();
+  const [alert, setAlert] = useState({ show: false, message: '' });
+
+  const doDeleteWalletRule = useCallback(async () => {
+    if (!selectedWalletRule) {
+      toast.error('No wallet rule selected');
+      return;
+    }
+
+    const response = await DeleteData(
+      `${API_URL_WALLET}/dashboard/wallet_rule/${selectedWalletRule.ID}`,
+      { id: selectedWalletRule.ID }
+    );
+
+    if (response?.status) {
+      toast.success('Wallet rule deleted successfully');
+      handleDeleteDialog(false, null);
+      reload();
+      setAlert({ show: false, message: '' });
+    } else {
+      toast.error('Failed to delete wallet rule');
+      setAlert({ show: true, message: response?.message });
+    }
+  }, [selectedWalletRule]);
+
+  return (
+    <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
+      <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>
+          </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={doDeleteWalletRule}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDialog;

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

@@ -0,0 +1,418 @@
+import { useCallApi } from '@/hooks';
+import { useManageWalletRuleContext } from '../hooks/useManageWalletRuleContext';
+import { Alert, useDataGrid } from '@/components';
+import React, { useCallback, useEffect, useState } from 'react';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { NumericFormat } from 'react-number-format';
+
+interface GroupProps {
+  ID: string;
+  is_bank: string;
+  name: string;
+  status: string;
+}
+
+interface WalletProps {
+  ID: string;
+  name: string;
+  id_currency: string;
+  status: string;
+}
+
+const API_URL_WALLET = apiConfig.service_wallet;
+
+const EditDialog = () => {
+  const { showEditDialog, handleEditDialog, selectedWalletRule } = useManageWalletRuleContext();
+  const { GetData, PutData } = useCallApi();
+  const { reload } = useDataGrid();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const initialState: {
+    id_wallet: string;
+    id_group: string;
+    max_transaction_per_day: string | number | null;
+    balance_minimum: string | number | null;
+    balance_maximum: string | number | null;
+    credit_limit: string | number | null;
+    monthly_limit: string | number | null;
+    status: string;
+  } = {
+    id_wallet: '',
+    id_group: '',
+    max_transaction_per_day: null,
+    balance_minimum: null,
+    balance_maximum: null,
+    credit_limit: null,
+    monthly_limit: null,
+    status: ''
+  };
+  const [formField, setFormField] = useState(initialState);
+  const [groups, setGroups] = useState<GroupProps[]>([]);
+  const [wallets, setWallets] = useState<WalletProps[]>([]);
+
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
+  const doUpdateWalletRule = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      const response = await PutData(
+        `${API_URL_WALLET}/dashboard/wallet_rule/${selectedWalletRule?.ID}`,
+        formField
+      );
+
+      if (response?.status) {
+        handleEditDialog(false, null);
+        toast.success('Success Update Wallet Rule');
+        reload();
+      } else {
+        toast.error('Failed Update Wallet Rule');
+        setAlert({ show: true, message: 'Failed Update Wallet Rule' });
+      }
+    },
+    [formField]
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (
+      formField.id_group.trim() === '' ||
+      formField.max_transaction_per_day === 0 ||
+      formField.balance_minimum === 0 ||
+      formField.balance_maximum === 0 ||
+      formField.credit_limit === 0 ||
+      formField.monthly_limit === 0 ||
+      formField.status.trim() === ''
+    ) {
+      setAlert({ show: true, message: 'Please fill in all required fields.' });
+      return;
+    }
+
+    // console.log(formField);
+    doUpdateWalletRule(e);
+    setAlert({ show: false, message: '' });
+  };
+
+  const getGroupLists = async (sorting: any) => {
+    try {
+      const response = await GetData(`${API_URL_WALLET}/dashboard/group`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('GROUPS: ', response?.data);
+      setGroups(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching groups', error);
+    }
+  };
+
+  const getWalletLists = async (sorting: any) => {
+    try {
+      const response = await GetData(`${API_URL_WALLET}/dashboard/wallet`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('WALLET: ', response?.data);
+      setWallets(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching wallet', error);
+    }
+  };
+
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL_WALLET}/dashboard/wallet_rule/${id}`, { id });
+
+    console.log(response);
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        id_wallet: response?.data.id_wallet,
+        id_group: response?.data.id_group,
+        max_transaction_per_day: response?.data.max_transaction_per_day,
+        balance_minimum: response?.data.balance_minimum,
+        balance_maximum: response?.data.balance_maximum,
+        credit_limit: response?.data.credit_limit,
+        monthly_limit: response?.data.monthly_limit,
+        status: response?.data.status
+      }));
+    }
+  }, []);
+
+  useEffect(() => {
+    getWalletLists([{ id: 'name', desc: false }]);
+    getGroupLists([{ id: 'name', desc: false }]);
+  }, []);
+
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
+  useEffect(() => {
+    if (selectedWalletRule) {
+      setFormField((prev) => ({
+        ...prev,
+        id_wallet: selectedWalletRule?.id_wallet,
+        id_group: selectedWalletRule?.id_group,
+        max_transaction_per_day: selectedWalletRule?.max_transaction_per_day,
+        balance_minimum: selectedWalletRule?.balance_minimum,
+        balance_maximum: selectedWalletRule?.balance_maximum,
+        credit_limit: selectedWalletRule?.credit_limit,
+        monthly_limit: selectedWalletRule?.monthly_limit,
+        status: selectedWalletRule?.status
+      }));
+    }
+  }, [selectedWalletRule]);
+  // console.log(selectedWalletRule);
+  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>Wallet Rule - Create</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <DialogBody className="scrollable">
+          <div className="flex flex-col">
+            {alert.show && (
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+
+            <form onSubmit={handleSubmit}>
+              <div className="card-body grid gap-5">
+                <div className="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">
+                      Wallet<span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formField.id_wallet}
+                      onValueChange={(value) => setFormField({ ...formField, id_wallet: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Wallet Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {wallets.map((wallet) => (
+                          <SelectItem key={wallet.ID} value={wallet.ID}>
+                            {wallet.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </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">
+                      Group<span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formField.id_group}
+                      onValueChange={(value) => setFormField({ ...formField, id_group: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Group Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {groups.map((group) => (
+                          <SelectItem key={group.ID} value={group.ID}>
+                            {group.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </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<span className="text-red-500">*</span>
+                    </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 !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Max Transaction Per Day"
+                    />
+                  </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">
+                      Balance Minimum<span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.balance_minimum ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          balance_minimum: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Balance Minimum"
+                    />
+                  </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">
+                      Balance Maximum<span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.balance_maximum ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          balance_maximum: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Balance Maximum"
+                    />
+                  </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">
+                      Credit Limit<span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.credit_limit ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          credit_limit: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Credit Limit"
+                    />
+                  </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">
+                      Monthly Limit<span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.monthly_limit ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          monthly_limit: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Monthly Limit"
+                    />
+                  </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">
+                      Status<span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formField.status}
+                      onValueChange={(value) => setFormField({ ...formField, status: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="flex justify-end gap-5">
+                  <Button type="button" variant="outline" onClick={resetForm}>
+                    Reset
+                  </Button>
+                  <Button variant="default">Update</Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditDialog;

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

@@ -1,17 +1,17 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
-import { useManageProductsContext } from '../../products/hooks/useManageProductsContext';
+import { useManageWalletRuleContext } from '../hooks/useManageWalletRuleContext';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
-  const { handleAddDialog } = useManageProductsContext();
+  const { handleAddDialog } = useManageWalletRuleContext();
 
   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">
+            {/* <label className="input input-sm w-1/3">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
@@ -19,7 +19,7 @@ const ListToolbar = () => {
                 value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />
-            </label>
+            </label> */}
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"

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

@@ -7,8 +7,14 @@ import React, { createContext, useCallback, useMemo, useState } from 'react';
 import ListToolbar from '../blocks/ListToolbar';
 
 interface WalletRuleProps {
-  name: string;
+  ID: string;
-  id_currency: string;
+  id_wallet: string;
+  id_group: string;
+  max_transaction_per_day: number | null;
+  balance_minimum: number | null;
+  balance_maximum: number | null;
+  credit_limit: number | null;
+  monthly_limit: number | null;
   status: string;
 }
 
@@ -17,10 +23,10 @@ interface ContextProps {
   showAddDialog: boolean;
   handleAddDialog: (show: boolean) => void;
   showEditDialog: boolean;
-  handleEditDialog: (show: boolean, selected_walletRule: string | null) => void;
+  handleEditDialog: (show: boolean, selected_walletRule: WalletRuleProps | null) => void;
   showDeleteDialog: boolean;
-  handleDeleteDialog: (show: boolean, selected_walletRule: string | null) => void;
+  handleDeleteDialog: (show: boolean, selected_walletRule: WalletRuleProps | null) => void;
-  selectedWalletRule: string | null;
+  selectedWalletRule: WalletRuleProps | null;
   getWalletRuleLists: (
     limit: number,
     page: number,
@@ -35,9 +41,9 @@ const initialProps: ContextProps = {
   showAddDialog: false,
   handleAddDialog: (show: boolean) => {},
   showEditDialog: false,
-  handleEditDialog: (show: boolean, selected_walletRule: string | null) => {},
+  handleEditDialog: (show: boolean, selected_walletRule: object | null) => {},
   showDeleteDialog: false,
-  handleDeleteDialog: (show: boolean, selected_walletRule: string | null) => {},
+  handleDeleteDialog: (show: boolean, selected_walletRule: object | null) => {},
   selectedWalletRule: null,
   getWalletRuleLists: async () => undefined
 };
@@ -50,22 +56,28 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [selectedWalletRule, setSelectedWalletRule] = useState<string | null>(null);
+  const [selectedWalletRule, setSelectedWalletRule] = useState<WalletRuleProps | null>(null);
   const { GetData } = useCallApi();
 
   const handleAddDialog = useCallback((show: boolean) => {
     setShowAddDialog(show);
   }, []);
 
-  const handleEditDialog = useCallback((show: boolean, selected_walletRule: string | null) => {
+  const handleEditDialog = useCallback(
-    setShowEditDialog(show);
+    (show: boolean, selected_walletRule: WalletRuleProps | null) => {
-    setSelectedWalletRule(show ? selected_walletRule : null);
+      setShowEditDialog(show);
-  }, []);
+      setSelectedWalletRule(show ? selected_walletRule : null);
+    },
+    []
+  );
 
-  const handleDeleteDialog = useCallback((show: boolean, selected_walletRule: string | null) => {
+  const handleDeleteDialog = useCallback(
-    setShowDeleteDialog(show);
+    (show: boolean, selected_walletRule: WalletRuleProps | null) => {
-    setSelectedWalletRule(show ? selected_walletRule : null);
+      setShowDeleteDialog(show);
-  }, []);
+      setSelectedWalletRule(show ? selected_walletRule : null);
+    },
+    []
+  );
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
@@ -142,13 +154,13 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
             <>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleEditDialog(true, row.id)}
+                onClick={() => handleEditDialog(true, row)}
               >
                 <KeenIcon icon="notepad-edit" />
               </button>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleDeleteDialog(true, row.id)}
+                onClick={() => handleDeleteDialog(true, row)}
               >
                 <KeenIcon icon="trash" />
               </button>
@@ -176,7 +188,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      console.log(response?.data);
+      // console.log(response?.data);
       setWalletRules(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
@@ -194,7 +206,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
         handleEditDialog,
         showDeleteDialog,
         handleDeleteDialog,
-        selectedWalletRule,
+        selectedWalletRule: selectedWalletRule,
         getWalletRuleLists
       }}
     >

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

@@ -75,7 +75,7 @@ const AddFeeDialog = () => {
     period_end: '',
     deduct_amount: 0,
     deduct_percentage: 0,
-    priority: false,
+    priority: '',
     status: '',
     status_include: '',
     created_by: '',
@@ -107,7 +107,7 @@ const AddFeeDialog = () => {
       transaction_type: formField.transaction_type,
       status: formField.status,
       status_include: formField.status_include,
-      priority: formField.priority ? 'Y' : 'N'
+      priority: formField.priority
     };
   };
   useEffect(() => {
@@ -162,7 +162,6 @@ const AddFeeDialog = () => {
       const response = await PostData(`${API_URL}/transactionfees/create`, {
         ...formField
       });
-      console.log(response);
       if (response?.status) {
         toast.success('Success Create Transfer Fee');
         reload();
@@ -202,7 +201,7 @@ const AddFeeDialog = () => {
             <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>
+                  <label className="form-label">Transfer Free Name <span className="text-red-500">*</span></label>
                   <Input
                     className="input"
                     type="text"
@@ -214,7 +213,7 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Description</label>
+                  <label className="form-label">Description <span className="text-red-500">*</span></label>
                   <Input
                     className="input"
                     type="text"
@@ -226,7 +225,7 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Minimum Amount</label>
+                  <label className="form-label">Minimum Amount <span className="text-red-500">*</span></label>
                   <NumericFormat
                     className="input"
                     value={formField.minimum_amount}
@@ -243,7 +242,7 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Maximum Amount</label>
+                  <label className="form-label">Maximum Amount <span className="text-red-500">*</span></label>
                   <NumericFormat
                     className="input"
                     value={formField.maximum_amount}
@@ -260,7 +259,7 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Period Start</label>
+                  <label className="form-label">Period Start <span className="text-red-500">*</span></label>
                   <Input
                     className="input"
                     type="date"
@@ -272,7 +271,7 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Period End</label>
+                  <label className="form-label">Period End <span className="text-red-500">*</span></label>
                   <Input
                     className="input"
                     type="date"
@@ -284,7 +283,7 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Deduct Amount</label>
+                  <label className="form-label">Deduct Amount <span className="text-red-500">*</span></label>
                   <NumericFormat
                     className="input"
                     value={formField.deduct_amount}
@@ -301,7 +300,7 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Deduct Percentage</label>
+                  <label className="form-label">Deduct Percentage  <span className="text-red-500">*</span></label>
                   <NumericFormat
                     className="input"
                     value={formField.deduct_percentage}
@@ -318,7 +317,7 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Transacsion Type ID</label>
+                  <label className="form-label">Transacsion Type ID <span className="text-red-500">*</span></label>
                   <Select
                     value={formField.transaction_type}
                     onValueChange={(transaction_type) =>
@@ -338,7 +337,7 @@ const AddFeeDialog = () => {
                   </Select>
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Status</label>
+                  <label className="form-label">Status <span className="text-red-500">*</span></label>
                   <Select
                     value={formField.status}
                     onValueChange={(value) => setFormField({ ...formField, status: value })}
@@ -353,7 +352,7 @@ const AddFeeDialog = () => {
                   </Select>
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Status Include</label>
+                  <label className="form-label">Status Include <span className="text-red-500">*</span></label>
                   <Select
                     value={formField.status_include}
                     onValueChange={(value) => setFormField({ ...formField, status_include: value })}
@@ -368,12 +367,10 @@ const AddFeeDialog = () => {
                   </Select>
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Priority</label>
+                  <label className="form-label">Priority <span className="text-red-500">*</span></label>
                   <Select
-                    value={formField.priority ? 'Y' : 'N'}
+                    value={formField.priority}
-                    onValueChange={(value) =>
+                    onValueChange={(value) => setFormField({ ...formField, priority: value })}
-                      setFormField((prev) => ({ ...prev, priority: value === 'Y' }))
-                    }
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select Priority" />

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

@@ -20,7 +20,6 @@ const DeleteDialog = () => {
   });
 
   const doDeleteTransferFee = useCallback(async () => {
-    // Kirim enforce=false untuk memastikan soft delete
     const response = await DeleteData(`${API_URL}/transactionfees/delete/${selectedTransferFee}/false`, {
       id: selectedTransferFee
     });

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

@@ -72,7 +72,7 @@ const EditFeeDialog = () => {
     period_end: '',
     deduct_amount: 0,
     deduct_percentage: 0,
-    priority: false,
+    priority: '',
     status: '',
     status_include: '',
     transaction_type: '',
@@ -96,9 +96,7 @@ 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);
         toast.success('Success Update User');
@@ -190,7 +188,7 @@ const EditFeeDialog = () => {
         period_end: response.data.period_end,
         deduct_amount: response.data.deduct_amount,
         deduct_percentage: response.data.deduct_percentage,
-        priority: response.data.priority === 'Y',
+        priority: response.data.priority,
         status: response.data.status,
         status_include: response.data.status_include,
         transaction_type: response.data.transaction_type.id
@@ -213,7 +211,7 @@ const EditFeeDialog = () => {
       period_end: '',
       deduct_amount: 0,
       deduct_percentage: 0,
-      priority: false,
+      priority: '',
       status: '',
       status_include: '',
       transaction_type: '',
@@ -254,7 +252,7 @@ const EditFeeDialog = () => {
               <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>
+                    <label className="form-label">Transfer Free Name <span className="text-red-500">*</span></label>
                     <Input
                       className="input"
                       type="text"
@@ -266,7 +264,7 @@ const EditFeeDialog = () => {
                     />
                   </div>
                   <div className="w-full">
-                    <label className="form-label">Description</label>
+                    <label className="form-label">Description <span className="text-red-500">*</span></label>
                     <Input
                       className="input"
                       type="text"
@@ -278,7 +276,7 @@ const EditFeeDialog = () => {
                     />
                   </div>
                   <div className="w-full">
-                    <label className="form-label">Minimum Amount</label>
+                    <label className="form-label">Minimum Amount <span className="text-red-500">*</span></label>
                     <NumericFormat
                       className="input"
                       value={formField.minimum_amount}
@@ -295,7 +293,7 @@ const EditFeeDialog = () => {
                     />
                   </div>
                   <div className="w-full">
-                    <label className="form-label">Maximum Amount</label>
+                    <label className="form-label">Maximum Amount <span className="text-red-500">*</span></label>
                     <NumericFormat
                       className="input"
                       value={formField.maximum_amount}
@@ -312,7 +310,7 @@ const EditFeeDialog = () => {
                     />
                   </div>
                   <div className="w-full">
-                    <label className="form-label">Period Start</label>
+                    <label className="form-label">Period Start <span className="text-red-500">*</span></label>
                     <Input
                       className="input"
                       type="date"
@@ -324,7 +322,7 @@ const EditFeeDialog = () => {
                     />
                   </div>
                   <div className="w-full">
-                    <label className="form-label">Period End</label>
+                    <label className="form-label">Period End <span className="text-red-500">*</span></label>
                     <Input
                       className="input"
                       type="date"
@@ -336,7 +334,7 @@ const EditFeeDialog = () => {
                     />
                   </div>
                   <div className="w-full">
-                    <label className="form-label">Deduct Amount</label>
+                    <label className="form-label">Deduct Amount <span className="text-red-500">*</span></label>
                     <NumericFormat
                       className="input"
                       value={formField.deduct_amount}
@@ -353,7 +351,7 @@ const EditFeeDialog = () => {
                     />
                   </div>
                   <div className="w-full">
-                    <label className="form-label">Deduct Percentage</label>
+                    <label className="form-label">Deduct Percentage <span className="text-red-500">*</span></label>
                     <NumericFormat
                       className="input"
                       value={formField.deduct_percentage}
@@ -370,7 +368,7 @@ const EditFeeDialog = () => {
                     />
                   </div>
                   <div className="w-full">
-                    <label className="form-label">Transacsion Type ID</label>
+                    <label className="form-label">Transacsion Type ID <span className="text-red-500">*</span></label>
                     <Select
                       value={formField.transaction_type}
                       onValueChange={(transaction_type) =>
@@ -390,7 +388,7 @@ const EditFeeDialog = () => {
                     </Select>
                   </div>
                   <div className="w-full">
-                    <label className="form-label">Status</label>
+                    <label className="form-label">Status <span className="text-red-500">*</span></label>
                     <Select
                       value={formField.status}
                       onValueChange={(value) => setFormField({ ...formField, status: value })}
@@ -405,7 +403,7 @@ const EditFeeDialog = () => {
                     </Select>
                   </div>
                   <div className="w-full">
-                    <label className="form-label">Status Included</label>
+                    <label className="form-label">Status Included <span className="text-red-500">*</span></label>
                     <Select
                       value={formField.status_include}
                       onValueChange={(value) =>
@@ -422,25 +420,23 @@ const EditFeeDialog = () => {
                     </Select>
                   </div>
                   <div className="w-full">
-                    <label className="form-label">Priority</label>
+                  <label className="form-label">Priority <span className="text-red-500">*</span></label>
-                    <Select
+                  <Select
-                      value={formField.priority ? 'Y' : 'N'} // Menyesuaikan nilai
+                    value={formField.priority}
-                      onValueChange={(value) =>
+                    onValueChange={(value) => setFormField({ ...formField, priority: value })}
-                        setFormField((prev) => ({ ...prev, priority: value === 'Y' }))
+                  >
-                      }
+                    <SelectTrigger>
-                    >
+                      <SelectValue placeholder="Select Priority" />
-                      <SelectTrigger>
+                    </SelectTrigger>
-                        <SelectValue placeholder="Select Priority" />
+                    <SelectContent>
-                      </SelectTrigger>
+                      <SelectItem value="Y">Yes</SelectItem>
-                      <SelectContent>
+                      <SelectItem value="N">No</SelectItem>
-                        <SelectItem value="Y">Yes</SelectItem>
+                    </SelectContent>
-                        <SelectItem value="N">No</SelectItem>
+                  </Select>
-                      </SelectContent>
+                </div>
-                    </Select>
-                  </div>
 
                   {/* <div className="w-full">
-                  <label className="form-label">Priotity</label>
+                  <label className="form-label">Priotity <span className="text-red-500">*</span></label>
                   <Select
                     value={formField.priority}
                     onValueChange={(value) => setFormField({ ...formField, priority: value })}
@@ -456,7 +452,7 @@ const EditFeeDialog = () => {
                 </div> */}
 
                   {/* <div className="w-full">
-  <label className="form-label">Priority</label>
+  <label className="form-label">Priority <span className="text-red-500">*</span></label>
   <Select
     value={formField.priority ? 'Y' : 'N'}
     onValueChange={(value) =>

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

@@ -153,7 +153,7 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
         meta: { headerClassName: 'w-[100px]' }
       },
       {
-        accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactieve'),
+        accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
         id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: true,

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

@@ -128,7 +128,7 @@ const AddDialog = () => {
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
         setCustomers(response?.data.list);
-        console.log('CUSTOMER: ', response?.data.list);
+        // console.log('CUSTOMER: ', response?.data.list);
       } catch (error) {
         console.error('Error fetching customer', error);
       }

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

@@ -143,7 +143,7 @@ const EditDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-        console.log('CUSTOMER: ', response?.data.list);
+        // console.log('CUSTOMER: ', response?.data.list);
         setCustomers(response?.data.list);
       } catch (error) {
         console.error('Error fetching customer', error);
@@ -177,7 +177,7 @@ const EditDialog = () => {
 
   const fetchTransactionType = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
-    console.log('Transaction Type: ', response?.data);
+    // console.log('Transaction Type: ', response?.data);
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
@@ -192,11 +192,9 @@ const EditDialog = () => {
         max_transaction_per_day: response.data.max_transaction_per_day,
         status_approval: response.data.status_approval,
         status: response.data.status
-        // updated_by: parsedUser?.username ,
-        // updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
       }));
-      console.log('Transaction Type: ', formField);
     }
+    // console.log('form fieldd Transaction Type: ', formField);
   }, []);
 
   useEffect(() => {
@@ -242,6 +240,7 @@ const EditDialog = () => {
                   <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
+                    <span className="text-red-500">*</span>
                     </label>
                     <Input
                       className="input"
@@ -259,6 +258,7 @@ const EditDialog = () => {
                   <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
+                    <span className="text-red-500">*</span>
                     </label>
                     <Input
                       className="input"
@@ -276,6 +276,7 @@ const EditDialog = () => {
                   <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
+                    <span className="text-red-500">*</span>
                     </label>
                     <NumericFormat
                       className="input"
@@ -298,6 +299,7 @@ const EditDialog = () => {
                   <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
+                    <span className="text-red-500">*</span>
                     </label>
                     <NumericFormat
                       className="input"
@@ -319,6 +321,7 @@ const EditDialog = () => {
                   <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
+                    <span className="text-red-500">*</span>
                     </label>
                     <NumericFormat
                       className="input"
@@ -338,7 +341,8 @@ const EditDialog = () => {
                 </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>
+                    <label className="form-label max-w-56">From Account<span className="text-red-500">*</span>
+                    </label>
                     <div className="grow">
                       <Select
                         value={formField.wallet_origin}
@@ -363,7 +367,8 @@ const EditDialog = () => {
 
                 <div className="w-full">
                   <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">To Account</label>
+                    <label className="form-label max-w-56">To Account<span className="text-red-500">*</span>
+                    </label>
                     <div className="grow">
                       <Select
                         value={formField.wallet_destination}
@@ -387,7 +392,8 @@ const EditDialog = () => {
                 </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>
+                    <label className="form-label max-w-56">Wallet Fee Destination<span className="text-red-500">*</span>
+                    </label>
                     <div className="grow">
                       <Select
                         value={formField.wallet_fee_destination}
@@ -411,7 +417,8 @@ const EditDialog = () => {
                 </div>
                 <div className="w-full">
                   <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">Select Customer</label>
+                    <label className="form-label max-w-56">Select Customer<span className="text-red-500">*</span>
+                    </label>
                     <div className="grow">
                       <Select
                         value={formField.customer_fee_destination}
@@ -435,7 +442,8 @@ const EditDialog = () => {
                 </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>
+                    <label className="form-label max-w-56">Status Approval<span className="text-red-500">*</span>
+                    </label>
 
                     <div className="grow">
                       <Select
@@ -458,7 +466,8 @@ const EditDialog = () => {
 
                 <div className="w-full">
                   <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">Status</label>
+                    <label className="form-label max-w-56">Status<span className="text-red-500">*</span>
+                    </label>
 
                     <div className="grow">
                       <Select