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

src/auth/pages/jwt/Login.tsx

@@ -9,6 +9,7 @@ import { useAuthContext } from '@/auth';
 import { useLayout } from '@/providers';
 import { Alert } from '@/components';
 import moment from 'moment';
+import { Helmet } from 'react-helmet';
 
 const loginSchema = Yup.object().shape({
   username: Yup.string().required('Username is required'),
@@ -76,6 +77,10 @@ const Login = () => {
   };
 
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Sign In</title>
+      </Helmet>
       <div className="card max-w-[390px] w-full">
         <form
           className="card-body flex flex-col gap-5 p-10"
@@ -171,6 +176,7 @@ const Login = () => {
           </div>
         </form>
       </div>
+    </>
   );
 };
 

src/auth/pages/jwt/reset-password/ResetPassword.tsx

@@ -9,6 +9,7 @@ import { useAuthContext } from '@/auth/useAuthContext';
 import { Alert, KeenIcon } from '@/components';
 import { useLayout } from '@/providers';
 import { AxiosError } from 'axios';
+import { Helmet } from 'react-helmet';
 
 const initialValues = {
   email: ''
@@ -64,6 +65,10 @@ const ResetPassword = () => {
     }
   });
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Reset Password</title>
+      </Helmet>
       <div className="card max-w-[370px] w-full">
         <form
           className="card-body flex flex-col gap-5 p-10"
@@ -128,6 +133,7 @@ const ResetPassword = () => {
           </div>
         </form>
       </div>
+    </>
   );
 };
 

src/pages/master/currency/CurrencyMaster.tsx

@@ -5,11 +5,14 @@ import { Delete } from 'lucide-react';
 import AddDialog from './blocks/AddDialog';
 import DeleteDialog from './blocks/DeleteDialog';
 import EditDialog from './blocks/EditDialog';
-
+import { Helmet } from 'react-helmet';
-// import EditDialog from './blocks/EditDialog';
 
 const CurrencyMaster = () => {
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Manage Currency</title>
+      </Helmet>
       <ManageCurrencyContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Currency</h1>
@@ -38,6 +41,7 @@ const CurrencyMaster = () => {
         <DeleteDialog/> */}
         </Container>
       </ManageCurrencyContextProvider>
+    </>
   );
 };
 

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

@@ -23,6 +23,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { NumericFormat } from 'react-number-format';
 
 interface ProviderProps {
   provider_id: number;
@@ -40,15 +41,29 @@ const AddDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
+  const initialState: {
+    name: string;
+    code: string;
+    type: string;
+    description: string;
+    price_point: string | number | null;
+    price_cash: string | number | null;
+    cashback_point: string | number | null;
+    cashback_cash: string | number | null;
+    status: string;
+    provider: string;
+    process_on_third_party: string;
+    created_by: string;
+    created_at: string;
+  } = {
     name: '',
     code: '',
     type: '',
     description: '',
-    price_point: 0,
+    price_point: null,
-    price_cash: 0,
+    price_cash: null,
-    cashback_point: 0,
+    cashback_point: null,
-    cashback_cash: 0,
+    cashback_cash: null,
     status: '',
     provider: '',
     process_on_third_party: '',
@@ -117,11 +132,13 @@ const AddDialog = () => {
       formField.type.trim() === '' ||
       formField.code.trim() === '' ||
       formField.description.trim() === '' ||
-      formField.price_point === 0 ||
+      formField.price_point === null ||
-      formField.price_cash === 0 ||
+      formField.price_cash === null ||
-      formField.cashback_point === 0 ||
+      formField.cashback_point === null ||
-      formField.cashback_cash === 0 ||
+      formField.cashback_cash === null ||
       formField.status.trim() === '' ||
+      formField.provider.trim() === '' ||
+      formField.process_on_third_party.trim() === '' ||
       formField.created_by.trim() === '' ||
       formField.created_at.trim() === ''
     ) {
@@ -234,19 +251,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Price Point<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
+                      value={formField.price_point ?? ''}
-                      min={0}
+                      thousandSeparator="."
-                      step={0.01}
+                      decimalSeparator=","
-                      value={formField.price_point}
+                      allowNegative={false}
-                      onChange={(e) => {
+                      onValueChange={(values) => {
-                        const value = parseFloat(e.target.value);
+                        setFormField((prev) => ({
-                        setFormField({
+                          ...prev,
-                          ...formField,
+                          price_point: values.floatValue !== undefined ? values.floatValue : ''
-                          price_point: isNaN(value) ? 0 : value
+                        }));
-                        });
                       }}
+                      placeholder="Enter Price Point"
                     />
                   </div>
                 </div>
@@ -256,19 +273,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Price Cash<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
+                      value={formField.price_cash ?? ''}
-                      min={0}
+                      thousandSeparator="."
-                      step={0.01}
+                      decimalSeparator=","
-                      value={formField.price_cash}
+                      allowNegative={false}
-                      onChange={(e) => {
+                      onValueChange={(values) => {
-                        const value = parseFloat(e.target.value);
+                        setFormField((prev) => ({
-                        setFormField({
+                          ...prev,
-                          ...formField,
+                          price_cash: values.floatValue !== undefined ? values.floatValue : ''
-                          price_cash: isNaN(value) ? 0 : value
+                        }));
-                        });
                       }}
+                      placeholder="Enter Price Cash"
                     />
                   </div>
                 </div>
@@ -278,19 +295,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Cashback Point<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
+                      value={formField.cashback_point ?? ''}
-                      min={0}
+                      thousandSeparator="."
-                      step={0.01}
+                      decimalSeparator=","
-                      value={formField.cashback_point}
+                      allowNegative={false}
-                      onChange={(e) => {
+                      onValueChange={(values) => {
-                        const value = parseFloat(e.target.value);
+                        setFormField((prev) => ({
-                        setFormField({
+                          ...prev,
-                          ...formField,
+                          cashback_point: values.floatValue !== undefined ? values.floatValue : ''
-                          cashback_point: isNaN(value) ? 0 : value
+                        }));
-                        });
                       }}
+                      placeholder="Enter Cashback Point"
                     />
                   </div>
                 </div>
@@ -300,19 +317,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Cashback Cash<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
+                      value={formField.cashback_cash ?? ''}
-                      min={0}
+                      thousandSeparator="."
-                      step={0.01}
+                      decimalSeparator=","
-                      value={formField.cashback_cash}
+                      allowNegative={false}
-                      onChange={(e) => {
+                      onValueChange={(values) => {
-                        const value = parseFloat(e.target.value);
+                        setFormField((prev) => ({
-                        setFormField({
+                          ...prev,
-                          ...formField,
+                          cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
-                          cashback_cash: isNaN(value) ? 0 : value
+                        }));
-                        });
                       }}
+                      placeholder="Enter Cashback Cash"
                     />
                   </div>
                 </div>

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

@@ -61,16 +61,27 @@ const AddDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
+
+  const initialState: {
+    name: string;
+    description: string;
+    type: string;
+    status: string;
+    transaction_type: string;
+    agent: string | null;
+    created_by: string;
+    created_at: string;
+  } = {
     name: '',
     description: '',
     type: '',
     status: '',
     transaction_type: '',
-    agent: '',
+    agent: null,
     created_by: '',
     created_at: ''
   };
+
   const [formField, setFormField] = useState(initialState);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const [transactions, setTransactions] = useState<TransactionProps[]>([]);
@@ -116,14 +127,13 @@ const AddDialog = () => {
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.transaction_type === '' ||
+      formField.transaction_type === ''
-      formField.agent.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
-    console.log(formField);
+    // console.log(formField);
     doCreateProvider(e);
     setAlert({ show: false, message: '' });
   };
@@ -242,7 +252,7 @@ const AddDialog = () => {
                         <SelectValue placeholder="Select Type" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="h2h">H2H</SelectItem>
+                        <SelectItem value="h2h">Host to Host</SelectItem>
                         <SelectItem value="agent">Agent</SelectItem>
                       </SelectContent>
                     </Select>
@@ -294,6 +304,7 @@ const AddDialog = () => {
                   </div>
                 </div>
 
+                {formField.type === 'agent' ? (
                   <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">
@@ -344,6 +355,16 @@ const AddDialog = () => {
                       </Popover>
                     </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">
+                        Agent Name
+                      </label>
+                      <Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
+                    </div>
+                  </div>
+                )}
 
                 <div className="flex justify-end gap-5">
                   <Button type="button" variant="outline" onClick={resetForm}>

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

@@ -51,16 +51,27 @@ const EditDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
+
+  const initialState: {
+    name: string;
+    description: string;
+    type: string;
+    status: string;
+    transaction_type: string;
+    agent: string | null;
+    updated_by: string;
+    updated_at: string;
+  } = {
     name: '',
     description: '',
     type: '',
     status: '',
     transaction_type: '',
-    agent: '',
+    agent: null,
     updated_by: '',
     updated_at: ''
   };
+
   const [formField, setFormField] = useState(initialState);
   const [transactions, setTransactions] = useState<TransactionProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
@@ -145,7 +156,7 @@ const EditDialog = () => {
         type: response?.data.type,
         status: response?.data.status,
         transaction_type: response?.data.transaction_type.id,
-        agent: response?.data.agent?.id || ''
+        agent: response?.data.agent?.id || null
       }));
     }
   }, []);
@@ -158,8 +169,7 @@ const EditDialog = () => {
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.transaction_type.trim() === '' ||
+      formField.transaction_type.trim() === ''
-      formField.agent.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
@@ -257,7 +267,7 @@ const EditDialog = () => {
                         <SelectValue placeholder="Select Type" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="h2h">H2H</SelectItem>
+                        <SelectItem value="h2h">Host to Host</SelectItem>
                         <SelectItem value="agent">Agent</SelectItem>
                       </SelectContent>
                     </Select>
@@ -309,6 +319,7 @@ const EditDialog = () => {
                   </div>
                 </div>
 
+                {formField.type === 'agent' ? (
                   <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">
@@ -322,7 +333,7 @@ const EditDialog = () => {
                             style={{ color: 'inherit' }}
                           >
                             {customers.find((customer) => customer.id === formField.agent)
-                            ?.fullname || 'Select Agent'}
+                              ?.username || 'Select Agent'}
                           </button>
                         </PopoverTrigger>
                         <PopoverContent className="w-[400px] p-0">
@@ -349,7 +360,7 @@ const EditDialog = () => {
                                       setOpen(false);
                                     }}
                                   >
-                                  {customer.fullname}
+                                    {customer.username}
                                   </CommandItem>
                                 ))}
                               </CommandGroup>
@@ -359,6 +370,16 @@ const EditDialog = () => {
                       </Popover>
                     </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">
+                        Agent Name
+                      </label>
+                      <Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
+                    </div>
+                  </div>
+                )}
 
                 <div className="flex justify-end">
                   <Button variant="default">Save Changes</Button>

src/pages/master/reward/Reward.tsx

@@ -1,37 +0,0 @@
-import AddDialog from './blocks/AddDialog';
-import EditDialog from './blocks/EditDialog';
-import DeleteDialog from './blocks/DeleteDialog';
-import { ManageRewardContextProvider } from './hooks/ManageRewardContext';
-import { Container, DataGridInner } from '@/components';
-import { Breadcrumbs, Link } from '@mui/material';
-
-const RewardMaster = () => {
-  return (
-    <ManageRewardContextProvider>
-      <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Reward</h1>
-        <Breadcrumbs sx={{ mb: 2 }}>
-          <Link underline="none" color="inherit" href="/">
-            <span className="text-sm hover:underline">Dashboard</span>
-          </Link>
-
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Master Data</span>
-          </Link>
-
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Manage Reward</span>
-          </Link>
-        </Breadcrumbs>
-        <div className="grid gap-5 lg:gap-7.5">
-          <DataGridInner />
-        </div>
-        <AddDialog />
-        <EditDialog />
-        <DeleteDialog />
-      </Container>
-    </ManageRewardContextProvider>
-  );
-};
-
-export default RewardMaster;

src/pages/master/reward/RewardMaster.tsx

@@ -0,0 +1,43 @@
+import AddDialog from './blocks/AddDialog';
+import EditDialog from './blocks/EditDialog';
+import DeleteDialog from './blocks/DeleteDialog';
+import { ManageRewardContextProvider } from './hooks/ManageRewardContext';
+import { Container, DataGridInner } from '@/components';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
+
+const RewardMaster = () => {
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | Manage Reward</title>
+      </Helmet>
+      <ManageRewardContextProvider>
+        <Container>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Reward</h1>
+          <Breadcrumbs sx={{ mb: 2 }}>
+            <Link underline="none" color="inherit" href="/">
+              <span className="text-sm hover:underline">Dashboard</span>
+            </Link>
+
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Master Data</span>
+            </Link>
+
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Manage Reward</span>
+            </Link>
+          </Breadcrumbs>
+          <div className="grid gap-5 lg:gap-7.5">
+            <DataGridInner />
+          </div>
+          <AddDialog />
+          <EditDialog />
+          <DeleteDialog />
+        </Container>
+      </ManageRewardContextProvider>
+    </>
+  );
+};
+
+export default RewardMaster;

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

@@ -55,6 +55,15 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  const RewardType = {
+    'Daily Check in': 'D',
+    Referal: 'R',
+    'Level Pro': 'P',
+    'Level Prioritas': 'L'
+  } as const;
+
+  type RewardTypeValue = (typeof RewardType)[keyof typeof RewardType];
+
   const doCreateReward = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -140,15 +149,25 @@ const AddDialog = () => {
                     Type<span className="text-red-500">*</span>
                   </label>
 
-                  <Input
+                  <div className="col-span-6">
-                    className="input col-span-6"
+                    <Select
-                    type="text"
-                    autoComplete="off"
                       value={formField.type}
-                    onChange={({ target }) =>
+                      onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
-                      setFormField((prev) => ({ ...prev, type: target.value }))
+                    >
-                    }
+                      <SelectTrigger className="w-full">
-                  />
+                        <SelectValue placeholder="Select Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {Object.entries(RewardType).map(
+                          ([label, value]: [string, RewardTypeValue]) => (
+                            <SelectItem key={value} value={value}>
+                              {label}
+                            </SelectItem>
+                          )
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
                 <div className="grid grid-cols-8 gap-2 w-full items-center">
                   <label className="form-label flex items-center gap-1 col-span-2">

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

@@ -55,6 +55,13 @@ const EditDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  const RewardType = {
+    'Daily Check in': 'D',
+    Referal: 'R'
+  } as const;
+
+  type RewardTypeValue = (typeof RewardType)[keyof typeof RewardType];
+
   const doUpdateReward = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -161,12 +168,25 @@ const EditDialog = () => {
                     Type<span className="text-red-500">*</span>
                   </label>
 
-                  <Input
+                  <div className="col-span-6">
-                    className="input col-span-6"
+                    <Select
-                    type="text"
                       value={formField.type}
-                    onChange={(e) => setFormField({ ...formField, type: e.target.value })}
+                      onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
-                  />
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {Object.entries(RewardType).map(
+                          ([label, value]: [string, RewardTypeValue]) => (
+                            <SelectItem key={value} value={value}>
+                              {label}
+                            </SelectItem>
+                          )
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
                 <div className="grid grid-cols-8 gap-2 w-full items-center">
                   <label className="form-label flex items-center gap-1 col-span-2">

src/pages/master/reward/hooks/ManageRewardContext.tsx

@@ -169,7 +169,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      // console.log('API Response:', response?.data.list); // Cek data dari API
+      // console.log('API Response:', response?.data.list);
       // console.log('reward list :', response);
       setRewards(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };

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

@@ -55,13 +55,13 @@ const AddDialog = () => {
     description: string;
     status: string;
     group: string[];
-    currency_id: string;
+    id_currency: string;
   } = {
     name: '',
     description: '',
     status: '',
     group: [],
-    currency_id: ''
+    id_currency: ''
   };
   const [formField, setFormField] = useState(initialState);
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
@@ -126,13 +126,13 @@ const AddDialog = () => {
       formField.description.trim() === '' ||
       formField.status.trim() === '' ||
       formField.group.length === 0 ||
-      formField.currency_id.trim() === ''
+      formField.id_currency.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
-    console.log(formField);
+    // console.log(formField);
     doCreateWallet(e);
     setAlert({ show: false, message: '' });
   };
@@ -251,8 +251,8 @@ const AddDialog = () => {
                       Currency<span className="text-red-500">*</span>
                     </label>
                     <Select
-                      value={formField.currency_id}
+                      value={formField.id_currency}
-                      onValueChange={(value) => setFormField({ ...formField, currency_id: value })}
+                      onValueChange={(value) => setFormField({ ...formField, id_currency: value })}
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select Currency Type" />

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

@@ -53,11 +53,13 @@ const EditDialog = () => {
     name: string;
     description: string;
     status: string;
+    currency_id: string;
     group: string[];
   } = {
     name: '',
     description: '',
     status: '',
+    currency_id: '',
     group: []
   };
   const [formField, setFormField] = useState(initialState);
@@ -74,7 +76,7 @@ const EditDialog = () => {
       // e.preventDefault();
 
       const response = await PutData(
-        `${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.Wallet_id}`,
+        `${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.id}`,
         payload
       );
 
@@ -85,7 +87,7 @@ const EditDialog = () => {
 
         const createActivity = {
           module: 'Manage Wallet',
-          description: `Edit Wallet => ${selectedWallet?.Wallet_id} - ${selectedWallet?.Wallet_name}`,
+          description: `Edit Wallet => ${selectedWallet?.id} - ${selectedWallet?.name}`,
           action: 'U'
         };
 
@@ -164,6 +166,8 @@ const EditDialog = () => {
     }
   };
 
+  const selectedCurrency = currencies.find((currency) => currency.ID === formField.currency_id);
+
   const selectedGroupNames = groups
     .filter((g) => formField.group.includes(g.id))
     .map((g) => g.name)
@@ -184,7 +188,7 @@ const EditDialog = () => {
       //   currency_id: selectedWallet?.Wallet_currency_id,
       //   group: selectedWallet?.Wallet_group
       // }));
-      doFetchData(selectedWallet?.Wallet_id);
+      doFetchData(selectedWallet?.id);
     }
   }, [selectedWallet]);
 
@@ -257,6 +261,21 @@ const EditDialog = () => {
                   </div>
                 </div>
 
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">Currency</label>
+                    <div className="relative w-full">
+                      <Input
+                        type="text"
+                        placeholder="Empty"
+                        value={selectedCurrency?.name}
+                        readOnly
+                        className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
+                      />
+                    </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">Groups</label>

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

@@ -7,12 +7,12 @@ import { Toaster } from 'sonner';
 import ListToolbar from '../blocks/ListToolbar';
 
 interface WalletProps {
-  Wallet_id: string;
+  id: string;
-  Wallet_name: string;
+  name: string;
-  Wallet_status: string;
+  status: string;
-  Wallet_description: string;
+  description: string;
-  Wallet_group: string[];
+  group: string[];
-  Wallet_currency_id: string;
+  currency_id: string;
 }
 
 interface ContextProps {
@@ -73,7 +73,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        accessorFn: (row) => row.Wallet_name,
+        accessorFn: (row) => row.name,
         id: 'name',
         header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
         enableSorting: true,
@@ -83,7 +83,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorFn: (row) => row.Wallet_description,
+        accessorFn: (row) => row.description,
         id: 'description',
         header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
         enableSorting: true,
@@ -93,13 +93,13 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorFn: (row) => row.Wallet_status,
+        accessorFn: (row) => row.status,
         id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: true,
         enableHiding: false,
         cell: ({ row }) => {
-          const isActive = row.original.Wallet_status === 'Y';
+          const isActive = row.original.status === 'Y';
 
           return (
             <span
@@ -183,7 +183,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         pagination={{ size: 25 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'created_at', desc: true }]}
+        sorting={[{ id: 'wallets.created_at', desc: true }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getWalletLists(pageIndex, pageSize, sorting, columnFilters)

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

@@ -40,14 +40,24 @@ interface GroupProps {
   status: string;
 }
 
-interface WalletProps {
+interface WalletGroupProps {
-  ID: string;
+  id: string;
   name: string;
-  id_currency: string;
+  description: string;
   status: string;
 }
 
+interface WalletProps {
+  id: string;
+  name: string;
+  id_currency: string;
+  status: string;
+  group: WalletGroupProps[];
+}
+
 const API_URL_WALLET = apiConfig.service_wallet;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+
 const AddDialog = () => {
   const { showAddDialog, handleAddDialog, selectedWalletRule } = useManageWalletRuleContext();
   const { reload } = useDataGrid();
@@ -77,7 +87,6 @@ const AddDialog = () => {
     status: ''
   };
   const [formField, setFormField] = useState(initialState);
-  const [groups, setGroups] = useState<GroupProps[]>([]);
   const [wallets, setWallets] = useState<WalletProps[]>([]);
 
   const resetForm = () => {
@@ -114,7 +123,16 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.id_group.trim() === '' || formField.status.trim() === '') {
+    if (
+      formField.id_group.trim() === '' ||
+      formField.status.trim() === '' ||
+      formField.id_wallet.trim() === '' ||
+      formField.max_transaction_per_day === null ||
+      formField.balance_minimum === null ||
+      formField.balance_maximum === null ||
+      formField.credit_limit === null ||
+      formField.monthly_limit === null
+    ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -124,26 +142,9 @@ const AddDialog = () => {
     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`, {
+      const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, {
         limit: 100,
         page: 1,
         with_deleted: false,
@@ -158,9 +159,11 @@ const AddDialog = () => {
     }
   };
 
+  const selectedWallet = wallets.find((wallet) => wallet.id === formField.id_wallet);
+  const filteredGroups = selectedWallet ? selectedWallet.group : [];
+
   useEffect(() => {
-    getWalletLists([{ id: 'name', desc: false }]);
+    getWalletLists([{ id: 'wallets.name', desc: false }]);
-    getGroupLists([{ id: 'name', desc: false }]);
   }, []);
 
   useEffect(() => {
@@ -193,14 +196,16 @@ const AddDialog = () => {
                     </label>
                     <Select
                       value={formField.id_wallet}
-                      onValueChange={(value) => setFormField({ ...formField, id_wallet: value })}
+                      onValueChange={(value) =>
+                        setFormField({ ...formField, id_wallet: value, id_group: '' })
+                      }
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select Wallet Type" />
                       </SelectTrigger>
                       <SelectContent>
                         {wallets.map((wallet) => (
-                          <SelectItem key={wallet.ID} value={wallet.ID}>
+                          <SelectItem key={wallet.id} value={wallet.id}>
                             {wallet.name}
                           </SelectItem>
                         ))}
@@ -217,16 +222,21 @@ const AddDialog = () => {
                     <Select
                       value={formField.id_group}
                       onValueChange={(value) => setFormField({ ...formField, id_group: value })}
+                      disabled={filteredGroups.length === 0}
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select Group Type" />
                       </SelectTrigger>
                       <SelectContent>
-                        {groups.map((group) => (
+                        {filteredGroups.length > 0 ? (
-                          <SelectItem key={group.ID} value={group.ID}>
+                          filteredGroups.map((group) => (
+                            <SelectItem key={group.id} value={group.id}>
                               {group.name}
                             </SelectItem>
-                        ))}
+                          ))
+                        ) : (
+                          <SelectItem value="empty">No groups available</SelectItem>
+                        )}
                       </SelectContent>
                     </Select>
                   </div>

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

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

src/pages/settings/user/log-activity/LogActivityPage.tsx

@@ -1,9 +1,14 @@
 import { Container, DataGridInner } from '@/components';
 import { LogActivityContextProvider } from './hooks';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 export default function LogActivityPage() {
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Log Activity</title>
+      </Helmet>
       <LogActivityContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Log Activity</h1>
@@ -29,5 +34,6 @@ export default function LogActivityPage() {
           </div>
         </Container>
       </LogActivityContextProvider>
+    </>
   );
 }

src/pages/settings/user/manage-user/ManageUserPage.tsx

@@ -4,9 +4,14 @@ import { ManageUserContextProvider } from './hooks';
 import { AddDialog } from './blocks/AddDialog';
 import { DeleteDialog } from './blocks/DeleteDialog';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 export default function ManageUserPage() {
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Manage User</title>
+      </Helmet>
       <ManageUserContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage User</h1>
@@ -35,5 +40,6 @@ export default function ManageUserPage() {
           <DeleteDialog />
         </Container>
       </ManageUserContextProvider>
+    </>
   );
 }

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

@@ -25,6 +25,13 @@ import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import clsx from 'clsx';
 
+interface RoleListProps {
+  id: string;
+  name: string;
+  roles: string;
+  status: string;
+}
+
 interface CreateUserParams {
   email: string;
   username: string;
@@ -40,9 +47,10 @@ type PasswordType = 'password' | 'retype_password';
 
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog, roles } = useUserContext();
+  const { showAddDialog, handleAddDialog } = useUserContext();
   const { reload } = useDataGrid();
-  const { PostData, PutData } = useCallApi();
+  const { PostData, GetData } = useCallApi();
+  const [roles, setRoles] = useState<RoleListProps[]>([]);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -57,10 +65,6 @@ const AddDialog = () => {
     status: ''
   };
   const [formField, setFormField] = useState(initialState);
-  const resetForm = () => {
-    setFormField(initialState);
-    setAlert({ show: false, message: '' });
-  };
   const [showPassword, setShowPassword] = useState({
     password: false,
     retype_password: false
@@ -97,6 +101,87 @@ const AddDialog = () => {
     };
   };
 
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
+  /* actions */
+  const doCreateUser = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      const response = await PostData(`${API_URL}/user/create`, formField);
+
+      if (response?.status) {
+        handleAddDialog(false);
+        resetForm();
+        reload();
+        const createActivity = {
+          module: 'Manage User',
+          description: `Create New User => ${formField.username}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
+        toast.success('Success Create User');
+      } else {
+        toast.error('Failed to create user');
+        setAlert({ show: true, message: 'Failed to create user. Please try again.' });
+      }
+    },
+    [formField]
+  );
+
+  const fetchRoles = 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}/user_role/list`, params);
+    // console.log('ini data:', response);
+    if (response?.status) {
+      const roleList = response.data?.list || [];
+      setRoles(roleList);
+    } else {
+      setRoles(() => []);
+    }
+    // console.log('ini data user_role:', response?.data);
+  }, []);
+
+  useEffect(() => {
+    fetchRoles();
+  }, [fetchRoles]);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    console.log('Form data before submit:', formField);
+
+    if (
+      formField.email.trim() === '' ||
+      formField.username.trim() === '' ||
+      formField.password.trim() === '' ||
+      formField.retype_password.trim() === '' ||
+      formField.name.trim() === '' ||
+      formField.id_role.trim() === '' ||
+      formField.status.trim() === ''
+    ) {
+      setAlert({ show: true, message: 'Please fill name field.' });
+      return;
+    }
+
+    doCreateUser(e);
+    // console.log(formField);
+    setAlert({ show: false, message: '' });
+  };
+
   useEffect(() => {
     const validation = validatePassword(formField.password, formField.retype_password);
     setMessagePassword(validation.isValid);
@@ -111,38 +196,6 @@ const AddDialog = () => {
     }
   }, [showAddDialog]);
 
-  /* actions */
-  const doCreateUser = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-
-      const response = await PostData(`${API_URL}/user/create`, {
-        ...formField,
-        id_role: undefined
-      });
-      if (response?.status) {
-        const responseUserAddRole = await PutData(
-          `${API_URL}/user/add_role/${response?.message?.id}/${formField.id_role}`,
-          {}
-        );
-        resetForm();
-        handleAddDialog(false);
-        toast.success('Success Create User');
-        reload();
-        const createActivity = {
-          module: 'Manage User',
-          description: `Create New User => ${formField.username}`,
-          action: 'C'
-        };
-
-        doSaveLogActivity(createActivity);
-      } else {
-        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
-      }
-    },
-    [formField]
-  );
-
   const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
     event.preventDefault();
     setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
@@ -177,7 +230,7 @@ const AddDialog = () => {
                 <h3>{alert.message}</h3>
               </Alert>
             )}
-            <form action="" onSubmit={doCreateUser}>
+            <form action="" onSubmit={handleSubmit}>
               <div className="card-body grid gap-5 p-0">
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@@ -231,7 +284,12 @@ const AddDialog = () => {
                     <div className="grow">
                       <Select
                         value={formField.id_role}
-                        onValueChange={(id_role) => setFormField((prev) => ({ ...prev, id_role }))}
+                        onValueChange={(id_role) => {
+                          setTimeout(() => {
+                            setFormField((prev) => ({ ...prev, id_role }));
+                          }, 0);
+                          // console.log('Role selected:', value);`
+                        }}
                       >
                         <SelectTrigger>
                           <SelectValue placeholder="Select" />
@@ -254,7 +312,11 @@ const AddDialog = () => {
                   <div className="grow">
                     <Select
                       value={formField.status}
-                      onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
+                      onValueChange={(status) => {
+                        setTimeout(() => {
+                          setFormField((prev) => ({ ...prev, status }));
+                        }, 0);
+                      }}
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select" />

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

@@ -1,4 +1,11 @@
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from '@/components/ui/dialog';
 import { useUserContext } from '../hooks';
 import { Button } from '@/components/ui/button';
 import { Alert, useDataGrid } from '@/components';
@@ -42,12 +49,14 @@ const DeleteDialog = () => {
     } else {
       setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
     }
-  }, [selectedUser, enforce]);
+  }, [selectedUser, DeleteData, handleDeleteDialog, reload, 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">
+          <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>

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

@@ -24,6 +24,12 @@ import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 
+interface RoleListProps {
+  id: string;
+  name: string;
+  status: string;
+}
+
 const API_URL = apiConfig.service_dashboard;
 
 const initialState = {
@@ -31,15 +37,15 @@ const initialState = {
   username: '',
   email: '',
   id_role: '',
-  id_role_old: '',
   status: ''
 };
 
 const EditDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showEditDialog, selectedUser, handleEditDialog, roles } = useUserContext();
+  const { showEditDialog, selectedUser, handleEditDialog } = useUserContext();
   const { reload } = useDataGrid();
   const { GetData, PutData } = useCallApi();
+  const [roles, setRoles] = useState<RoleListProps[]>([]);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -53,17 +59,11 @@ const EditDialog = () => {
   };
 
   /* actions */
-  const doResetForm = () => {
-    setAlert({ show: false, message: '' });
-    setFormField(initialState);
-  };
-
   const doUpdateUser = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       const response = await PutData(`${API_URL}/user/update/${selectedUser}`, {
-        ...formField,
+        ...formField
-        id_role_old: undefined
       });
 
       if (formField.name.trim() === '') {
@@ -90,18 +90,36 @@ const EditDialog = () => {
     [selectedUser, formField]
   );
 
+  const doFetchUserRole = useCallback(async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL}/user_role/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('User ID_ROLE:', response?.data.id_role);
+      // console.log('Role: ', response?.data.list);
+      setRoles(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching role', error);
+    }
+  }, []);
+
   const doFetchUserData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/user/detail/${id}`, { id });
-    if (response?.status) {
+    // console.log('User detail response:', response);
-      let id_role = response.data.role.id || '';
 
+    if (response?.status) {
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
         username: response.data.username,
         email: response.data.email,
-        id_role: id_role,
+        id_role: response.data.idRole,
-        id_role_old: id_role,
         status: response.data.status
       }));
     } else {
@@ -111,10 +129,10 @@ const EditDialog = () => {
         username: '',
         email: '',
         id_role: '0',
-        id_role_old: '',
         status: ''
       }));
     }
+    // console.log('Fetched ID Role:', response?.data.id_role);
   }, []);
 
   useEffect(() => {
@@ -129,6 +147,23 @@ const EditDialog = () => {
     }
   }, [showEditDialog]);
 
+  useEffect(() => {
+    const fetchAllData = async () => {
+      await doFetchUserRole([{ id: 'name', desc: false }]);
+      if (selectedUser) {
+        await doFetchUserData(selectedUser);
+      }
+    };
+
+    fetchAllData();
+  }, [selectedUser]);
+
+  // console.log('ini role: ', roles);
+  // useEffect(() => {
+  //   console.log('Selected User ID Role:', formField.id_role);
+  //   // console.log('Available Roles:', roles);
+  // }, [formField.id_role, roles]);
+
   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">
@@ -206,7 +241,10 @@ const EditDialog = () => {
                     <div className="grow">
                       <Select
                         value={formField.id_role}
-                        onValueChange={(id_role) => setFormField((prev) => ({ ...prev, id_role }))}
+                        onValueChange={(id_role) => {
+                          // console.log('Role changed to:', id_role);
+                          setFormField((prev) => ({ ...prev, id_role }));
+                        }}
                       >
                         <SelectTrigger>
                           <SelectValue placeholder="Select" />

src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx

@@ -17,7 +17,6 @@ interface ContextProps {
   showDeleteDialog: boolean;
   handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
   selectedUser: string | null;
-  roles: RoleListProps[];
 }
 
 interface SelectedUser {
@@ -30,12 +29,6 @@ interface SelectedUser {
   check_new_password: string;
 }
 
-interface RoleListProps {
-  id: string;
-  name: string;
-  status: string;
-}
-
 const initialProps: ContextProps = {
   showSearchDialog: false,
   handleSearchDialog: (show: boolean) => {},
@@ -45,8 +38,7 @@ const initialProps: ContextProps = {
   handleAddDialog: () => {},
   showDeleteDialog: false,
   handleDeleteDialog: () => {},
-  selectedUser: null,
+  selectedUser: null
-  roles: []
 };
 
 const ManageUserContext = createContext<ContextProps>(initialProps);
@@ -60,7 +52,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [selectedUser, setSelectedUser] = useState<string | null>(null);
-  const [roles, setRoles] = useState<RoleListProps[]>([]);
   const { GetData } = useCallApi();
 
   /* action */
@@ -193,7 +184,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
     const response = await GetData(`${API_URL}/user/list`, {
       limit: limit,
       page: page + 1,
-      with_deleted: true,
+      with_deleted: false,
       order_field: sorting[0].id,
       order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
       filter: JSON.stringify(filter)
@@ -203,29 +194,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
 
-  const fetchRoles = 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}/user_role/list`, params);
-    if (response?.status) {
-      setRoles(() => [...response.data.list]);
-    } else {
-      setRoles(() => []);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchRoles();
-  }, [fetchRoles]);
-
   return (
     <ManageUserContext.Provider
       value={{
@@ -236,7 +204,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         selectedUser,
         showAddDialog,
         handleAddDialog,
-        roles,
         showDeleteDialog,
         handleDeleteDialog
       }}

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

@@ -1,14 +1,13 @@
 import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
     Dialog,
     DialogBody,
     DialogContent,
-    DialogDescription,
     DialogHeader,
-    DialogTitle
+    DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import {
@@ -16,9 +15,9 @@ import {
     SelectContent,
     SelectItem,
     SelectTrigger,
-    SelectValue
+    SelectValue,
 } from '@/components/ui/select';
-import { Alert, KeenIcon, useDataGrid } from '@/components';
+import { Alert, useDataGrid } from '@/components';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { toast } from 'sonner';
 import { Input } from '@/components/ui/input';
@@ -27,11 +26,11 @@ const API_URL = apiConfig.transaction;
 
 const ApprovalDialog = () => {
     const { GetData, PostData } = useCallApi();
-    // const { reload } = useDataGrid();
+
     const {
         showApprovalDialog,
         setShowApprovalDialog,
-        selectedTransactionIdForApproval
+        selectedTransactionIdForApproval,
     } = useTransactionContext();
 
     const [transactionDetails, setTransactionDetails] = useState<any>(null);
@@ -39,12 +38,12 @@ const ApprovalDialog = () => {
     const [formField, setFormField] = useState({
         transaction_code: '',
         status: '',
-        notes: ''
+        notes: '',
     });
 
     const [alert, setAlert] = useState({
         show: false,
-        message: ''
+        message: '',
     });
 
     const doApproval = useCallback(
@@ -60,39 +59,51 @@ const ApprovalDialog = () => {
                 toast.error('Please select a status.');
                 return;
             }
-
             const response = await PostData(`${API_URL}/transaction/set-approval`, {
-                transaction_code: transactionDetails.id,
+                id_transaction: transactionDetails.id,
                 status: formField.status,
-                notes: formField.notes
+                notes: formField.notes,
             });
 
             if (response?.status) {
-                setAlert((prev) => ({ ...prev, show: false, message: '' }));
+                setAlert({ show: false, message: '' });
                 toast.success('Success Update Position');
                 const createActivity = {
                     module: 'Approval Transaction',
                     description: `Change status approve for transaction => ${transactionDetails.code}`,
-                    action: 'U'
+                    action: 'U',
                 };
                 doSaveLogActivity(createActivity);
-                setShowApprovalDialog(false); // optionally close dialog
+                setShowApprovalDialog(false);
             } else {
-                setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+                setAlert({ show: true, message: response?.message });
             }
         },
         [formField, transactionDetails]
     );
 
+    useEffect(() => {
+        if (showApprovalDialog) {
+            // Reset form fields when dialog opens
+            setFormField({
+                transaction_code: '',
+                status: '',
+                notes: '',
+            });
+            setTransactionDetails(null); // Optional reset
+        }
+    }, [showApprovalDialog]);
+
     useEffect(() => {
         const fetchTransactionDetails = async () => {
             if (selectedTransactionIdForApproval) {
                 try {
-                    const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`, {
+                    const response = await GetData(
-                        id: selectedTransactionIdForApproval
+                        `${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`,
-                    });
+                        {
-                    // console.log(response?.data.code);
+                            id: selectedTransactionIdForApproval,
-                    // console.log(selectedTransactionIdForApproval);
+                        }
+                    );
                     setTransactionDetails(response?.data);
                 } catch (error) {
                     console.error('Error fetching transaction', error);
@@ -105,6 +116,15 @@ const ApprovalDialog = () => {
         }
     }, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
 
+    // Set formField.transaction_code once details are fetched
+    useEffect(() => {
+        if (transactionDetails) {
+            setFormField((prev) => ({
+                ...prev,
+                transaction_code: transactionDetails.id ?? '',
+            }));
+        }
+    }, [transactionDetails]);
 
     return (
         <Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}>
@@ -113,7 +133,7 @@ const ApprovalDialog = () => {
                     <DialogTitle>Approval Transaction</DialogTitle>
                 </DialogHeader>
                 <DialogBody>
-                    <form action="" onSubmit={doApproval}>
+                    <form onSubmit={doApproval}>
                         <div className="card-body grid gap-5 p-0">
                             <div className="w-full">
                                 <div className="flex items-center flex-wrap gap-2.5">
@@ -122,7 +142,9 @@ const ApprovalDialog = () => {
                                     <div className="grow">
                                         <Select
                                             value={formField.status}
-                                            onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
+                                            onValueChange={(status) =>
+                                                setFormField((prev) => ({ ...prev, status }))
+                                            }
                                         >
                                             <SelectTrigger>
                                                 <SelectValue placeholder="Select" />
@@ -138,13 +160,20 @@ const ApprovalDialog = () => {
                                 {formField.status === 'N' && (
                                     <div className="flex items-center flex-wrap gap-2.5 mt-4">
                                         <label className="form-label max-w-56">Notes</label>
-
                                         <div className="grow">
-                                            <textarea
+                                            <Input
+                                                type="text"
+                                                placeholder="Notes"
                                                 name="notes"
                                                 id="notes"
                                                 value={formField.notes}
-                                            ></textarea>
+                                                onChange={(e) =>
+                                                    setFormField((prev) => ({
+                                                        ...prev,
+                                                        notes: e.target.value,
+                                                    }))
+                                                }
+                                            />
                                         </div>
                                     </div>
                                 )}

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

@@ -66,6 +66,24 @@ const DetailApprovalTransaction = () => {
                         >
                             Origin Customer
                         </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('destinationcustomer')}
+                        >
+                            Destination Customer
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('originwallet')}
+                        >
+                            Origin Wallet
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('destinationwallet')}
+                        >
+                            Destination Wallet
+                        </button>
                         <button
                             className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                             onClick={() => setActiveTab('log')}
@@ -119,21 +137,32 @@ const DetailApprovalTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Status</p>
-                                        <p className="font-medium">
+                                        <div>
                                             {(() => {
                                                 let status;
+                                                let badgeClass;
                                                 if (transactionDetails?.status === 'C') {
                                                     status = 'COMPLETE';
+                                                    badgeClass = 'bg-green-100 text-green-800';
                                                 } else if (transactionDetails?.status === 'F') {
                                                     status = 'FAILED';
+                                                    badgeClass = 'bg-red-100 text-red-800';
                                                 } else if (transactionDetails?.status === 'O') {
                                                     status = 'ON PROCESS';
+                                                    badgeClass = 'bg-blue-100 text-blue-800';
                                                 } else {
                                                     status = 'PENDING';
+                                                    badgeClass = 'bg-gray-100 text-gray-800';
                                                 }
-                                                return status;
+
+                                                return (
+                                                    <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+                                                        {status}
+                                                    </span>
+                                                );
                                             })()}
-                                        </p>
+                                        </div>
+
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Transaction Type</p>
@@ -172,14 +201,7 @@ const DetailApprovalTransaction = () => {
                                     </span>
                                 </h3>
                                 <div className="grid grid-cols-2 gap-4">
-                                    <div>
+
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
-                                    </div>
                                 </div>
 
                                 <h3 className="font-semibold flex items-center">
@@ -208,6 +230,52 @@ const DetailApprovalTransaction = () => {
                                 </div>
                             </div>
                         )}
+                        {activeTab === 'detail' && transactionDetails?.kind === 'P' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold flex items-center">
+                                    Product Information
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Product Info
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Product Name</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Price Cash</p>
+                                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_cash)}
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Price Point</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.price_point}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Product Type</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.type}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Provider Name</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.provider.description}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Provider Type</p>
+                                        <p className="font-medium">
+                                            {(() => {
+                                                let providertype;
+                                                if (transactionDetails?.purchase.product.provider.type === 'h2h') {
+                                                    providertype = 'HOST TO HOST';
+                                                } else if (transactionDetails?.purchase.product.provider.type === 'agent') {
+                                                    providertype = 'AGENT';
+                                                }
+                                                return providertype;
+                                            })()}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
 
                         {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
                             <div className="space-y-4">
@@ -291,69 +359,9 @@ const DetailApprovalTransaction = () => {
                                         <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
                                     </div>
                                 </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Destination Wallet
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Wallet
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
-                                    </div>
-                                </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Destination Customer
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Destination Customer
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">MSISDN</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Email</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">MSISDN</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
-                                    </div>
-                                </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Origin Wallet
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Wallet
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
-                                    </div>
-                                </div>
                             </div>
                         )}
 
-
                         {activeTab === 'origincustomer' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Origin Customer</h3>
@@ -378,6 +386,68 @@ const DetailApprovalTransaction = () => {
                             </div>
                         )}
 
+                        {activeTab === 'destinationcustomer' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Destination Customer</h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">MSISDN</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Email</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Username</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'originwallet' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Origin Wallet</h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Description</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'destinationwallet' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Destination Wallet</h3>
+
+                                {!transactionDetails?.transfer ? (
+                                    <div className="text-center text-sm text-gray-500">No Data available</div>
+                                ) : (
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <div>
+                                            <p className="text-sm text-gray-500">Name</p>
+                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-sm text-gray-500">Description</p>
+                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+
                         {activeTab === 'log' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Transaction Logs</h3>
@@ -443,8 +513,8 @@ const DetailApprovalTransaction = () => {
                                             <thead>
                                                 <tr className="bg-gray-100">
                                                     <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
-                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Created At</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
-                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th>
+                                                    {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
                                                 </tr>
                                             </thead>
                                             <tbody>
@@ -466,8 +536,19 @@ const DetailApprovalTransaction = () => {
                                                                     return status;
                                                                 })()}
                                                             </td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td>
+                                                                {new Date(log.created_at).toLocaleString('sv-SE', {
+                                                                    timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
+                                                                    year: 'numeric',
+                                                                    month: '2-digit',
+                                                                    day: '2-digit',
+                                                                    hour: '2-digit',
+                                                                    minute: '2-digit',
+                                                                    second: '2-digit',
+                                                                    hour12: false,
+                                                                }).replace(' ', ' ')}
+                                                            </td>
+                                                            {/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
                                                         </tr>
                                                     ))
                                                 ) : (

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

@@ -18,12 +18,10 @@ const ListToolbar = () => {
   // useEffect to set the default date values
   useEffect(() => {
     const today = new Date();
-    const nextWeek = new Date(today);
+    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-    nextWeek.setDate(today.getDate() + 7);
-
     settrxDate({
-      from: formatDate(today),   // Set 'from' to today
+      from: formatDate(firstDayOfMonth),
-      to: formatDate(nextWeek),  // Set 'to' to 7 days later
+      to: formatDate(today),
     });
   }, []);
 

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

@@ -155,7 +155,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorKey: 'type.name',
-        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -163,20 +163,33 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         },
       },
       {
-        accessorFn: (row) => {
+        accessorKey: 'status_approve',
-          switch (row.status_approve) {
+        header: 'Status',
-            case 'W': return 'WAITING APPROVAL';
+        cell: ({ row }) => {
-            case 'Y': return 'APPROVED';
+          const statusCode = row.original.status_approve;
-            case 'N': return 'REJECTED';
+          let label = '';
-            default: return 'PENDING';
+          let badgeClass = '';
+      
+          switch (statusCode) {
+            case 'Y':
+              label = 'APPROVED';
+              badgeClass = 'bg-green-100 text-green-800';
+              break;
+            case 'N':
+              label = 'REJECTED';
+              badgeClass = 'bg-red-100 text-red-800';
+              break;
+            case 'W':
+              label = 'WAITING APPROVAL';
+              badgeClass = 'bg-gray-100 text-gray-800';
+              break;
           }
-        },
+      
-        id: 'status_approve',
+          return (
-        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+            <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
-        enableSorting: false,
+              {label}
-        enableHiding: false,
+            </span>
-        meta: {
+          );
-          headerClassName: 'w-[250px]',
         },
       },      
       {

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

@@ -30,7 +30,6 @@ const DetailTransaction = () => {
                     const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
                         id: selectedTransactionId
                     });
-                    // console.log(response?.data);
                     setTransactionDetails(response?.data);
                 } catch (error) {
                     console.error('Error fetching transaction', error);
@@ -66,6 +65,24 @@ const DetailTransaction = () => {
                         >
                             Origin Customer
                         </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('destinationcustomer')}
+                        >
+                            Destination Customer
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('originwallet')}
+                        >
+                            Origin Wallet
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('destinationwallet')}
+                        >
+                            Destination Wallet
+                        </button>
                         <button
                             className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                             onClick={() => setActiveTab('log')}
@@ -119,21 +136,32 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Status</p>
-                                        <p className="font-medium">
+                                        <div>
                                             {(() => {
                                                 let status;
+                                                let badgeClass;
                                                 if (transactionDetails?.status === 'C') {
                                                     status = 'COMPLETE';
+                                                    badgeClass = 'bg-green-100 text-green-800';
                                                 } else if (transactionDetails?.status === 'F') {
                                                     status = 'FAILED';
+                                                    badgeClass = 'bg-red-100 text-red-800';
                                                 } else if (transactionDetails?.status === 'O') {
                                                     status = 'ON PROCESS';
+                                                    badgeClass = 'bg-blue-100 text-blue-800';
                                                 } else {
                                                     status = 'PENDING';
+                                                    badgeClass = 'bg-gray-100 text-gray-800';
                                                 }
-                                                return status;
+
+                                                return (
+                                                    <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+                                                        {status}
+                                                    </span>
+                                                );
                                             })()}
-                                        </p>
+                                        </div>
+
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Transaction Type</p>
@@ -172,14 +200,7 @@ const DetailTransaction = () => {
                                     </span>
                                 </h3>
                                 <div className="grid grid-cols-2 gap-4">
-                                    <div>
+
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
-                                    </div>
                                 </div>
 
                                 <h3 className="font-semibold flex items-center">
@@ -337,69 +358,9 @@ const DetailTransaction = () => {
                                         <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
                                     </div>
                                 </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Destination Wallet
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Wallet
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
-                                    </div>
-                                </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Destination Customer
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Destination Customer
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">MSISDN</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Email</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">MSISDN</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
-                                    </div>
-                                </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Origin Wallet
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Wallet
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
-                                    </div>
-                                </div>
                             </div>
                         )}
 
-
                         {activeTab === 'origincustomer' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Origin Customer</h3>
@@ -424,6 +385,68 @@ const DetailTransaction = () => {
                             </div>
                         )}
 
+                        {activeTab === 'destinationcustomer' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Destination Customer</h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">MSISDN</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Email</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Username</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'originwallet' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Origin Wallet</h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Description</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'destinationwallet' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Destination Wallet</h3>
+
+                                {!transactionDetails?.transfer ? (
+                                    <div className="text-center text-sm text-gray-500">No Data available</div>
+                                ) : (
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <div>
+                                            <p className="text-sm text-gray-500">Name</p>
+                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-sm text-gray-500">Description</p>
+                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+
                         {activeTab === 'log' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Transaction Logs</h3>
@@ -489,8 +512,8 @@ const DetailTransaction = () => {
                                             <thead>
                                                 <tr className="bg-gray-100">
                                                     <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
-                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Created At</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
-                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th>
+                                                    {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
                                                 </tr>
                                             </thead>
                                             <tbody>
@@ -512,8 +535,19 @@ const DetailTransaction = () => {
                                                                     return status;
                                                                 })()}
                                                             </td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td>
+                                                                {new Date(log.created_at).toLocaleString('sv-SE', {
+                                                                    timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
+                                                                    year: 'numeric',
+                                                                    month: '2-digit',
+                                                                    day: '2-digit',
+                                                                    hour: '2-digit',
+                                                                    minute: '2-digit',
+                                                                    second: '2-digit',
+                                                                    hour12: false,
+                                                                }).replace(' ', ' ')}
+                                                            </td>
+                                                            {/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
                                                         </tr>
                                                     ))
                                                 ) : (

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

@@ -18,12 +18,10 @@ const ListToolbar = () => {
   // useEffect to set the default date values
   useEffect(() => {
     const today = new Date();
-    const nextWeek = new Date(today);
+    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-    nextWeek.setDate(today.getDate() + 7);
-
     settrxDate({
-      from: formatDate(today),   // Set 'from' to today
+      from: formatDate(firstDayOfMonth),
-      to: formatDate(nextWeek),  // Set 'to' to 7 days later
+      to: formatDate(today),
     });
   }, []);
 

src/pages/transaction/history-transaction/hooks/TransactionContext.tsx

@@ -125,19 +125,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         },
       },
       {
-        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,
@@ -145,6 +132,36 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         meta: {
           headerClassName: 'w-[250px]',
         },
+        cell: ({ row }) => {
+          const statusCode = row.original.status;
+          let label = '';
+          let badgeClass = '';
+
+          switch (statusCode) {
+            case 'C':
+              label = 'COMPLETE';
+              badgeClass = 'bg-green-100 text-green-800';
+              break;
+            case 'F':
+              label = 'FAILED';
+              badgeClass = 'bg-red-100 text-red-800';
+              break;
+            case 'O':
+              label = 'ON PROCESS';
+              badgeClass = 'bg-blue-100 text-blue-800';
+              break;
+            default:
+              label = 'PENDING';
+              badgeClass = 'bg-gray-100 text-gray-800';
+              break;
+          }
+
+          return (
+            <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+              {label}
+            </span>
+          );
+        },
       },      
       {
         accessorKey: 'description',
@@ -157,7 +174,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
       },
       {
         accessorKey: 'type.name',
-        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -201,11 +218,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
 
       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];
+        // Tanggal 1 di bulan sekarang
-        enddate = nextWeek.toISOString().split('T')[0];
+        const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+        startdate = firstDayOfMonth.toISOString().split('T')[0];
+        enddate = today.toISOString().split('T')[0];
       } else if (filter != undefined || filter.length != 0) {
         startdate = filter[0].value.from;
         enddate = filter[0].value.to;

src/pages/transfer/transfertype/TransferType.tsx

@@ -5,7 +5,7 @@ import {
 } from './hooks/ManageTransferTypeContext';
 import AddDialog from './blocks/AddDialog';
 import { Breadcrumbs, Link } from '@mui/material';
-import { DeleteDialog } from './blocks/DeleteDialog';
+import DeleteDialog from './blocks/DeleteDialog';
 import { EditDialog } from './blocks/EditDialog';
 import { Helmet } from 'react-helmet';
 
@@ -37,7 +37,7 @@ const TransferType = () => {
           </div>
           <AddDialog />
           <DeleteDialog />
-          <EditDialog />
+          {/* <EditDialog /> */}
 
         </Container>
       </ManageTransferTypeContextProvider>

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

@@ -41,8 +41,8 @@ import {
 } from '@/components/ui/command';
 
 interface WalletProps {
-  Wallet_id: string;
+  id: string;
-  Wallet_name: string;
+  name: string;
 }
 
 interface CustomerProps {
@@ -74,8 +74,8 @@ const AddDialog = () => {
     description: '',
     wallet_origin: '',
     wallet_destination: '',
-    wallet_fee_destination: '',
+
-    customer_fee_destination: '',
+
     minimum_amount: 0,
     maximum_amount: 0,
     max_transaction_per_day: 0,
@@ -102,8 +102,6 @@ const AddDialog = () => {
       'description',
       'wallet_origin',
       'wallet_destination',
-      'wallet_fee_destination',
-      'customer_fee_destination',
       'status',
       'status_approval'
     ];
@@ -216,13 +214,11 @@ const AddDialog = () => {
       limit: 100,
       page: 1,
       with_deleted: false,
-      order_field: 'name',
+      order_field: 'wallets.name',
       order_direction: 'ASC',
-      filter: JSON.stringify({
-        status: 'Y'
-      })
     };
     const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
+    // console.log(response)
     if (response?.status && response?.data) {
       setWallets(response.data.list);
     } else {
@@ -234,7 +230,7 @@ const AddDialog = () => {
     if (!showAddDialog) return;
     fetchWallets();
   }, [showAddDialog]);
-
+  // console.log(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">
@@ -262,9 +258,11 @@ const AddDialog = () => {
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
           <div className="flex flex-col px-0">
             {alert.show && (
+        <div className="sticky top-0 z-10 bg-white p-3">
         <Alert variant="danger" className="mb-3">
           <h3>{alert.message}</h3>
         </Alert>
+      </div>
             )}
             <form action="" onSubmit={handleSubmit}>
               <div className="card-body grid gap-5 p-0">
@@ -396,8 +394,8 @@ const AddDialog = () => {
                         </SelectTrigger>
                         <SelectContent>
                           {wallets.map((wallet, idx) => (
-                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
+                            <SelectItem value={wallet.id} key={wallet.name}>
-                              {wallet.Wallet_name}
+                              {wallet.name}
                             </SelectItem>
                           ))}
                         </SelectContent>
@@ -424,8 +422,8 @@ const AddDialog = () => {
                         </SelectTrigger>
                         <SelectContent>
                           {wallets.map((wallet, idx) => (
-                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
+                            <SelectItem value={wallet.id} key={wallet.id}>
-                              {wallet.Wallet_name}
+                              {wallet.name}
                             </SelectItem>
                           ))}
                         </SelectContent>
@@ -433,86 +431,8 @@ const AddDialog = () => {
                     </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">
-                      Wallet Destination Fee
-                      <span className="text-red-500">*</span>
-                    </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-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">
-                      Customer Fee Destination<span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow">
-                      <Popover open={open} onOpenChange={setOpen}>
-                        <PopoverTrigger asChild>
-                          <button
-                            type="button"
-                            className="input col-span-5 text-left"
-                            style={{ color: 'inherit' }}
-                          >
-                            {customers.find(
-                              (customer) => customer.id === formField.customer_fee_destination
-                            )?.username || 'Select Customer'}
-                          </button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-[400px] p-0">
-                          <Command>
-                            <CommandInput placeholder="Search Customer..." />
-                            <CommandList
-                              className="max-h-[300px] overflow-y-auto"
-                              style={{ touchAction: 'pan-y' }}
-                              onWheel={(e) => {
-                                e.currentTarget.scrollTop += e.deltaY;
-                              }}
-                            >
-                              <CommandEmpty>No Customer found.</CommandEmpty>
-                              <CommandGroup>
-                                {customers.map((customer) => (
-                                  <CommandItem
-                                    key={customer.id}
-                                    value={customer.username}
-                                    onSelect={() => {
-                                      setFormField({
-                                        ...formField,
-                                        customer_fee_destination: customer.id
-                                      });
-                                      setOpen(false);
-                                    }}
-                                  >
-                                    {customer.username}
-                                  </CommandItem>
-                                ))}
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                  </div>
-                </div>
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">

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

@@ -25,7 +25,6 @@ const DeleteDialog = () => {
       return;
     }
 
-    // Kirim enforce=false untuk memastikan soft delete
     const response = await DeleteData(`${API_URL}/transactiontype/delete/${selectedTransferType}/false`, {
       id: selectedTransferType
     });
@@ -34,13 +33,12 @@ const DeleteDialog = () => {
       setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       reload();
-      setTimeout(() => toast.success('Success Delete Transaction Type'), 0);
+      // setTimeout(() => toast.success('Success Delete Transaction Type'), 0);
     } else {
       setAlert({ show: true, message: response?.message });
-      setTimeout(() => toast.error('Failed Delete Product'), 0);
+      // setTimeout(() => toast.error('Failed Delete Product'), 0);
     }
-  }, [selectedTransferType, DeleteData, handleDeleteDialog, reload]);
+  }, [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">
@@ -71,4 +69,3 @@ const DeleteDialog = () => {
 };
 
 export default DeleteDialog;
-export { DeleteDialog };

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

@@ -70,8 +70,8 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
   }, []);
 
   const handleDeleteDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
-    setShowDeleteDialog(show);
     setSelectedTransferType(show ? selected_transfertype : null);
+    setShowDeleteDialog(show);
   }, []);
 
   const columns = useMemo<ColumnDef<any>[]>(
@@ -136,26 +136,6 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         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: false,
-        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: false,
-        enableHiding: false,
-        meta: { headerClassName: 'w-[250px]' }
-      },
       {
         accessorFn: (row) => row.type,
         id: 'type',

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

@@ -82,7 +82,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorKey: 'amount' ,
-        header: ({ column }) => <DataGridColumnHeader title="Ammount" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -109,7 +109,9 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorKey: 'CreatedAt',
-        header: ({ column }) => <DataGridColumnHeader title="Created At" column={column} />,
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Created At" column={column} />
+        ),
         cell: ({ row }) => 
           new Date(row.original.CreatedAt).toLocaleString('id-ID', {
             day: '2-digit',
@@ -174,26 +176,24 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
           headerClassName: 'w-[200px]'
         }
       }
-
     ],
     []
   );
 
-  
-
   const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
-      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const sortField = 'CreatedAt';
+      const sortDirection = 'ASC';
+      
       filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() };
       const response = await GetData(`${API_URL_WALLET}/dashboard/balance/`, {
         limit,
         page: page + 1,
         with_deleted: false,
-        order_field: sorting[0].id,
+        order_field: sortField,
-        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
+        order_direction: sortDirection,
         // filter: JSON.stringify(filter)
       });
-      // console.log(response?.data);
       setWallets(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
@@ -221,7 +221,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'id', desc: false }]}
+        // sorting={[{ id: 'created_at', desc: true }]} 
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getWalletLists(pageIndex, pageSize, sorting, columnFilters)

src/routing/AppRoutingSetup.tsx

@@ -34,7 +34,7 @@ import ProfessionMaster from '@/pages/master/profession/ProfessionMaster';
 import ProductsMaster from '@/pages/master/products/ProductsMaster';
 import ProviderMaster from '@/pages/master/provider/ProviderMaster';
 import ConversionMaster from '@/pages/master/conversion/ConversionMaster';
-import RewardMaster from '@/pages/master/reward/Reward';
+import RewardMaster from '@/pages/master/reward/RewardMaster';
 import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster';
 import WalletHistory from '@/pages/wallet/wallet-history/WalletHistory';
 import WalletMaster from '@/pages/master/wallet/WalletMaster';