Update tampilan

package-lock.json

@@ -45,6 +45,7 @@
         "cmdk": "^1.0.4",
         "date-fns": "^3.0.0",
         "formik": "^2.4.6",
+        "helmet": "^8.1.0",
         "https": "^1.0.0",
         "leaflet": "^1.9.4",
         "lucide-react": "^0.456.0",
@@ -6055,6 +6056,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/helmet": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
+      "integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",

package.json

@@ -51,6 +51,7 @@
     "cmdk": "^1.0.4",
     "date-fns": "^3.0.0",
     "formik": "^2.4.6",
+    "helmet": "^8.1.0",
     "https": "^1.0.0",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.456.0",

src/layouts/demo2/footer/Footer.tsx

@@ -15,7 +15,7 @@ const Footer = () => {
               className="text-gray-600 hover:text-primary"
               rel="noopener noreferrer"
             >
-              Brillian Dev.
+              TPAY Dev.
             </a>
           </div>
         </div>

src/pages/account/manage-currency/ManageCurrency.tsx

@@ -2,9 +2,12 @@ import { Container, DataGridInner } from '@/components';
 import { ManageCurrencyContextProvider } from './hooks/ManageCurrencyContext';
 import AddDialog from './blocks/AddDialog';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const ManageCurrency = () => {
   return (
+    <>
+    <Helmet><title>TPAY | Manage Currency</title></Helmet>
       <ManageCurrencyContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Currency</h1>
@@ -27,6 +30,7 @@ const ManageCurrency = () => {
           <AddDialog />
         </Container>
       </ManageCurrencyContextProvider>
+    </>
   );
 };
 

src/pages/dashboards/home/DashboardHomePage.tsx

@@ -15,6 +15,7 @@ import { Button } from '@/components/ui/button';
 import { useFetchYear } from './hooks/useFetchYear';
 import { get5LastYear } from '@/utils/Date';
 import { staticChartData } from './staticChart';
+import { Helmet } from 'react-helmet';
 
 // sum -> nominal, count-> total
 type CountType = 'sum' | 'count';
@@ -138,6 +139,10 @@ const DashboardHomePage = () => {
   );
 
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Dashboard</title>
+      </Helmet>
       <Container>
         <div className="flex gap-3 items-center mb-6">
           <YearPicker selectedYear={selectedYear} setSelectedYear={handleYearChange} />
@@ -196,6 +201,7 @@ const DashboardHomePage = () => {
           </div>
         </div>
       </Container>
+    </>
   );
 };
 

src/pages/groups/ManageGroups.tsx

@@ -2,6 +2,7 @@ import { DataTable } from '@/components/ui/DataTable';
 import { columns, Group } from './Column';
 import { apiConfig } from '@/config/api.config';
 import axios, { AxiosResponse } from 'axios';
+import { Helmet } from 'react-helmet';
 import {
   DialogContent,
   MenuItem,
@@ -153,8 +154,10 @@ const ManageGroups = () => {
   };
 
   return (
-    <div>
+    <>
-      <div className="container mx-auto">
+      <Helmet>
+        <title>TPAY | Manage Group</title>
+      </Helmet>
       <ConfirmDialog
         open={dialogOpen}
         onClose={() => setDialogOpen(false)}
@@ -166,7 +169,8 @@ const ManageGroups = () => {
         onYes={handleYes}
         onNo={() => setDialogOpen(false)}
       />
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Groups</h1>
+      <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Groups</h1>
+      <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
         <Breadcrumbs>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>
@@ -180,6 +184,8 @@ const ManageGroups = () => {
             <span className="text-sm">Manage Groups</span>
           </Link>
         </Breadcrumbs>
+      </div>
+      <div className="w-full overflow-x-auto px-4">
         <DataTable
           data={dataGroup}
           columns={columns}
@@ -187,6 +193,8 @@ const ManageGroups = () => {
           onUpdate={handleUpdate}
           onDelete={null}
         />
+      </div>
+
       <Dialog open={isDialogOpen} onClose={closeDialog}>
         <DialogContent className="w-full">
           <div className="flex justify-between">
@@ -254,8 +262,7 @@ const ManageGroups = () => {
           </div>
         </DialogContent>
       </Dialog>
-      </div>
+    </>
-    </div>
   );
 };
 

src/pages/master/aldeias/AldeiasMaster.tsx

@@ -4,9 +4,13 @@ import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
 import { Breadcrumbs, Link } from '@mui/material';
-
+import { Helmet } from 'react-helmet';
 const AldeiasMaster = () => {
   return (
+    <>
+    <Helmet>
+      <title>TPAY | Manage Aldeias</title>
+    </Helmet>
       <ManageAldeiasContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Aldeias</h1>
@@ -32,6 +36,7 @@ const AldeiasMaster = () => {
           <DeleteDialog />
         </Container>
       </ManageAldeiasContextProvider>
+    </>
   );
 };
 

src/pages/master/conversion/ConversionMaster.tsx

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

src/pages/master/municipios/Municipios.tsx

@@ -5,9 +5,14 @@ import SearchDialog from './blocks/SearchDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const Municipios = () => {
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Municipios</title>
+      </Helmet>
       <ManageMunicipiosProvider>
         <Container className="mb-7">
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">MUNICIPIOS</h1>
@@ -33,6 +38,7 @@ const Municipios = () => {
           <SearchDialog />
         </Container>
       </ManageMunicipiosProvider>
+    </>
   );
 };
 

src/pages/master/postoadms/PostoAdmsMaster.tsx

@@ -5,9 +5,14 @@ import SearchDialog from './blocks/SearchDialog';
 import { ManagePostoAdmsContextProvider } from './hooks/ManagePostoAdmsContext';
 import { Container, DataGridInner } from '@/components';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const PostoAdmsMaster = () => {
   return (
+    <>
+    <Helmet>
+        <title>TPAY | Manage Postu Administrativo</title>
+      </Helmet>
       <ManagePostoAdmsContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">
@@ -35,6 +40,7 @@ const PostoAdmsMaster = () => {
           <SearchDialog />
         </Container>
       </ManagePostoAdmsContextProvider>
+    </>
   );
 };
 

src/pages/master/products/ProductsMaster.tsx

@@ -4,9 +4,12 @@ import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const ProductsMaster = () => {
   return (
+    <>
+      <Helmet><title>TPAY | Manage Products</title></Helmet>
       <ManageProductsContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Products</h1>
@@ -31,6 +34,7 @@ const ProductsMaster = () => {
           <DeleteDialog />
         </Container>
       </ManageProductsContextProvider>
+    </>
   );
 };
 

src/pages/master/profession/ProfessionMaster.tsx

@@ -4,9 +4,12 @@ import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const ProfessionMaster = () => {
   return (
+    <>
+    <Helmet><title>TPAY | Manage Profession</title></Helmet>
       <ManageProfessionContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Profession</h1>
@@ -31,6 +34,7 @@ const ProfessionMaster = () => {
           <DeleteDialog />
         </Container>
       </ManageProfessionContextProvider>
+    </>
   );
 };
 

src/pages/master/provider/ProviderMaster.tsx

@@ -4,9 +4,12 @@ import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const ProviderMaster = () => {
   return (
+    <>
+    <Helmet><title>TPAY | Manage Provider</title></Helmet>
       <ManageProviderContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Provider</h1>
@@ -31,6 +34,7 @@ const ProviderMaster = () => {
           <DeleteDialog />
         </Container>
       </ManageProviderContextProvider>
+    </>
   );
 };
 

src/pages/master/sucos/SucosMaster.tsx

@@ -5,9 +5,14 @@ import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
 import SearchDialog from './blocks/SearchDialog';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const SucosMaster = () => {
   return (
+    <>
+    <Helmet>
+      <title>TPAY | Manage Sucos</title>
+    </Helmet>
       <ManageSucosContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Sucos</h1>
@@ -35,6 +40,7 @@ const SucosMaster = () => {
           <SearchDialog />
         </Container>
       </ManageSucosContextProvider>
+    </>
   );
 };
 

src/pages/master/wallet/WalletMaster.tsx

@@ -3,9 +3,12 @@ import { ManageWalletContextProvider } from './hooks/ManageWalletContext';
 import { Breadcrumbs, Link } from '@mui/material';
 import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
+import { Helmet } from 'react-helmet';
 
 const WalletMaster = () => {
   return (
+    <>
+    <Helmet><title>TPAY | Manage Wallet</title></Helmet>
       <ManageWalletContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Wallet</h1>
@@ -29,6 +32,7 @@ const WalletMaster = () => {
           <EditDialog />
         </Container>
       </ManageWalletContextProvider>
+    </>
   );
 };
 

src/pages/master/walletRule/WalletRuleMaster.tsx

@@ -4,9 +4,12 @@ import { Breadcrumbs, Link } from '@mui/material';
 import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
+import { Helmet } from 'react-helmet';
 
 const WalletRuleMaster = () => {
   return (
+    <>
+    <Helmet><title>TPAY | Manage Wallet Rule</title></Helmet>
       <ManageWalletRuleContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Wallet Rule</h1>
@@ -33,6 +36,7 @@ const WalletRuleMaster = () => {
           <DeleteDialog />
         </Container>
       </ManageWalletRuleContextProvider>
+    </>
   );
 };
 

src/pages/members/kyc/Kyc.tsx

@@ -12,6 +12,7 @@ import { toast } from 'sonner';
 const BASE_URL = apiConfig.service_customer;
 import CustomerDialog from '../manage-members/CustomerDetailModal';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 export interface IDataGridContextProps<TData extends object> {
   props: TDataGridProps<TData>;
@@ -141,6 +142,10 @@ const Kyc = () => {
   };
 
   return (
+    <>
+      <Helmet>
+        <title>TPAY | KYC</title>
+      </Helmet>
       <div>
         <div className="container mx-auto w-full">
           <ConfirmDialog
@@ -160,7 +165,8 @@ const Kyc = () => {
             viewStats={true}
             page={'kyc'}
           />
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Member KYC</h1>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Member KYC</h1>
+          <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
             <Breadcrumbs>
               <Link underline="none" color="inherit" href="/">
                 <span className="text-sm hover:underline">Dashboard</span>
@@ -174,9 +180,21 @@ const Kyc = () => {
                 <span className="text-sm">Manage Member KYC</span>
               </Link>
             </Breadcrumbs>
-        <DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null} />
+          </div>
+          <div className="w-full overflow-x-auto px-4">
+            <div className="min-w-[800px]">
+              <DataTable
+                data={members}
+                columns={columns}
+                onUpdate={handleUpdate}
+                onDelete={null}
+              />
             </div>
           </div>
+
+        </div>
+      </div>
+    </>
   );
 };
 

src/pages/members/manage-members/ManageMembers.tsx

@@ -10,6 +10,7 @@ import { ScreenLoader } from '@/components';
 import { toast } from 'sonner';
 import { Breadcrumbs, Link } from '@mui/material';
 const BASE_URL = apiConfig.service_customer;
+import { Helmet } from 'react-helmet';
 
 const ManageMembers = () => {
   const [loading, setLoading] = useState(false);
@@ -115,6 +116,7 @@ const ManageMembers = () => {
   if (loading) return <ScreenLoader />;
 
   return (
+<<<<<<< Updated upstream
     <div>
       <div className="container mx-auto w-full">
         <ConfirmDialog
@@ -137,6 +139,34 @@ const ManageMembers = () => {
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>
           </Link>
+=======
+    <>
+      <Helmet>
+        <title>TPAY | Manage Members</title>
+      </Helmet>
+      <div>
+        <div className="container mx-auto w-full">
+          <ConfirmDialog
+            open={dialogOpen}
+            onClose={() => setDialogOpen(false)}
+            title="Confirm Action"
+            content={`Are you sure you want to ${dialogType}?`}
+            onYes={handleYes}
+            onNo={() => setDialogOpen(false)}
+          />
+          <CustomerDialog
+            open={isDialogOpen}
+            handleClose={closeDialog}
+            handleSubmit={handleSubmit}
+            initialData={member}
+          />
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Members</h1>
+          <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
+            <Breadcrumbs>
+              <Link underline="none" color="inherit" href="/">
+                <span className="text-sm hover:underline">Dashboard</span>
+              </Link>
+>>>>>>> Stashed changes
 
               <Link underline="none" color="inherit">
                 <span className="text-sm">Members</span>
@@ -146,6 +176,9 @@ const ManageMembers = () => {
                 <span className="text-sm">Manage Members</span>
               </Link>
             </Breadcrumbs>
+          </div>
+          <div className="w-full overflow-x-auto px-4">
+            <div className="min-w-[800px]">
               <DataTable
                 data={members}
                 createData={createMember}
@@ -155,6 +188,9 @@ const ManageMembers = () => {
               />
             </div>
           </div>
+        </div>
+      </div>
+    </>
   );
 };
 

src/pages/menu/manage-menu/ManageMenu.tsx

@@ -4,9 +4,12 @@ import AddDialog from './blocks/AddDIalog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const ManageMenu = () => {
   return (
+    <>
+    <Helmet><title>TPAY | Manage Menu</title></Helmet>
       <ManageMenusContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Menu</h1>
@@ -31,6 +34,7 @@ const ManageMenu = () => {
           <DeleteDialog />
         </Container>
       </ManageMenusContextProvider>
+    </>
   );
 };
 

src/pages/notification/ManageNotification.tsx

@@ -2,9 +2,14 @@ import { Container, DataGridInner } from '@/components';
 import { ManageNotifContextProvider } from './hooks/ManageNotificationContext';
 import AddDialog from './blocks/AddDialog';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const ManageNotification = () => {
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Manage Notification</title>
+      </Helmet>
       <ManageNotifContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">
@@ -29,6 +34,7 @@ const ManageNotification = () => {
           <AddDialog />
         </Container>
       </ManageNotifContextProvider>
+    </>
   );
 };
 

src/pages/settings/user/manage-position/ManagePositionPage.tsx

@@ -4,9 +4,14 @@ import { ManagePositionContextProvider } 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 ManagePositionPage() {
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Manage Position</title>
+      </Helmet>
       <ManagePositionContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Positions</h1>
@@ -35,5 +40,6 @@ export default function ManagePositionPage() {
           <DeleteDialog />
         </Container>
       </ManagePositionContextProvider>
+    </>
   );
 }

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

@@ -1,9 +1,14 @@
 import { Container, DataGridInner } from '@/components';
 import { ApprovalTransactionProvider } from './hooks/ApprovalTransactionContext';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const ApprovalTransaction = () => {
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Approval Transaction</title>
+      </Helmet>
       <ApprovalTransactionProvider>
         <Container className="mb-7">
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
@@ -25,6 +30,7 @@ const ApprovalTransaction = () => {
           </div>
         </Container>
       </ApprovalTransactionProvider>
+    </>
   );
 };
 

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

@@ -0,0 +1,152 @@
+import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from '@/components/ui/select';
+import { Alert, KeenIcon, useDataGrid } from '@/components';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { toast } from 'sonner';
+import { Input } from '@/components/ui/input';
+
+const API_URL = apiConfig.transaction;
+
+const ApprovalDialog = () => {
+    const { GetData, PostData } = useCallApi();
+    // const { reload } = useDataGrid();
+    const {
+        showApprovalDialog,
+        setShowApprovalDialog,
+        selectedTransactionIdForApproval
+    } = useTransactionContext();
+
+    const [transactionDetails, setTransactionDetails] = useState<any>(null);
+
+    const [formField, setFormField] = useState({
+        transaction_code: '',
+        status: ''
+    });
+
+    const [alert, setAlert] = useState({
+        show: false,
+        message: ''
+    });
+
+    const doApproval = useCallback(
+        async (e: React.FormEvent<HTMLFormElement>) => {
+            e.preventDefault();
+
+            if (!transactionDetails || !transactionDetails.code) {
+                toast.error('Transaction data not loaded yet.');
+                return;
+            }
+
+            if (!formField.status) {
+                toast.error('Please select a status.');
+                return;
+            }
+
+            const response = await PostData(`${API_URL}/transaction/set-approval`, {
+                transaction_code: transactionDetails.code,
+                status: formField.status,
+            });
+
+            if (response?.status) {
+                setAlert((prev) => ({ ...prev, show: false, message: '' }));
+                toast.success('Success Update Position');
+                const createActivity = {
+                    module: 'Approval Transaction',
+                    description: `Change status approve for transaction => ${transactionDetails.code}`,
+                    action: 'U'
+                };
+                doSaveLogActivity(createActivity);
+                setShowApprovalDialog(false); // optionally close dialog
+            } else {
+                setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+            }
+        },
+        [formField, transactionDetails]
+    );
+
+    useEffect(() => {
+        const fetchTransactionDetails = async () => {
+            if (selectedTransactionIdForApproval) {
+                try {
+                    const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`, {
+                        id: selectedTransactionIdForApproval
+                    });
+                    // console.log(response?.data.code);
+                    // console.log(selectedTransactionIdForApproval);
+                    setTransactionDetails(response?.data);
+                } catch (error) {
+                    console.error('Error fetching transaction', error);
+                }
+            }
+        };
+
+        if (showApprovalDialog && selectedTransactionIdForApproval) {
+            fetchTransactionDetails();
+        }
+    }, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
+
+
+    return (
+        <Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}>
+            <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
+                <DialogHeader>
+                    <DialogTitle>Approval Transaction</DialogTitle>
+                </DialogHeader>
+                <DialogBody>
+                    <form action="" 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">
+                                    <label className="form-label max-w-56">Status</label>
+
+                                    <div className="grow">
+                                        <Select
+                                        value={formField.status}
+                                        onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
+                                        >
+                                            <SelectTrigger>
+                                                <SelectValue placeholder="Select" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectItem value="Y">APPROVE</SelectItem>
+                                                <SelectItem value="N">REJECTED</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                    </div>
+                                </div>
+                            </div>
+
+
+                            <hr />
+                            <div className="flex justify-end">
+                                <Button className="btn btn-primary" type="submit">
+                                    Save Changes
+                                </Button>
+                            </div>
+                        </div>
+                    </form>
+                </DialogBody>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ApprovalDialog;

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

@@ -1,14 +1,18 @@
+import React, { createContext, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom'; // FIXED HERE
+import { ColumnDef } from '@tanstack/react-table';
+import axios from 'axios';
+
 import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
 import { Toaster } from '@/components/ui/sonner';
 import { apiConfig } from '@/config/api.config';
-import { ColumnDef } from '@tanstack/react-table';
-import axios from 'axios';
-import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
 import { useCallApi } from '@/hooks';
+
 import ListToolbar from '../blocks/ListToolbar';
-import { Button } from '@/components/ui/button';
-import { useNavigate } from 'react-router';
 import DetailApprovalTransaction from '../blocks/DetailApprovalTransaction';
+import ApprovalDialog from '../blocks/ApprovalDialog';
+
+import { Button } from '@/components/ui/button';
 
 interface ApprovalTransactionProps {
   id: number;
@@ -17,25 +21,31 @@ interface ApprovalTransactionProps {
 
 interface ContextProps {
   getTransactionLists: (
-    limit: number,
     page: number,
-    with_deleted: boolean,
+    limit: number,
-    order_field: any,
+    sorting: any,
-    order_direction: any,
     filter: any
   ) => Promise<{ data: ApprovalTransactionProps[]; totalCount: number } | undefined>;
   showDetailDialog: boolean;
   setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  showApprovalDialog: boolean;
+  setShowApprovalDialog: React.Dispatch<React.SetStateAction<boolean>>;
   selectedTransactionId: number | null;
   setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
+  selectedTransactionIdForApproval: number | null;
+  setSelectedTransactionIdForApproval: React.Dispatch<React.SetStateAction<number | null>>;
 }
 
 const initialProps: ContextProps = {
   getTransactionLists: async () => ({ data: [], totalCount: 0 }),
   showDetailDialog: false,
   setShowDetailDialog: () => { },
+  showApprovalDialog: false,
+  setShowApprovalDialog: () => { },
   selectedTransactionId: null,
-  setSelectedTransactionId: () => { }
+  setSelectedTransactionId: () => { },
+  selectedTransactionIdForApproval: null,
+  setSelectedTransactionIdForApproval: () => { },
 };
 
 const ManageApprovalTransactionContext = createContext<ContextProps>(initialProps);
@@ -43,47 +53,36 @@ const API_URL = apiConfig.transaction;
 
 const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }) => {
   const [showDetailDialog, setShowDetailDialog] = useState(false);
+  const [showApprovalDialog, setShowApprovalDialog] = useState(false);
   const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
+  const [selectedTransactionIdForApproval, setSelectedTransactionIdForApproval] = useState<number | null>(null);
   const [transaction, setTransaction] = useState<ApprovalTransactionProps[]>([]);
+
   const { GetData } = useCallApi();
   const navigate = useNavigate();
-  const handleNavigate = (path: string) => {
-    const url = navigate(`${API_URL}/transaction/history/${path}`);
-  };
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      // {
-      //   accessorKey: 'transaction_date',
-      //   header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
-      //   enableSorting: false,
-      //   enableHiding: false,
-      //   meta: {
-      //     headerClassName: 'w-[250px]'
-      //   }
-      // },
       {
         accessorKey: 'transaction_date',
         header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[250px]'
+          headerClassName: 'w-[250px]',
         },
         cell: ({ row }) => {
-          // Memformat tanggal dan waktu dari ISO ke format biasa (DD-MM-YYYY HH:MM:SS)
           const transactionDate = new Date(row.original.transaction_date);
-          const formattedDateTime = transactionDate.toLocaleString('en-GB', {
+          return transactionDate.toLocaleString('en-GB', {
             day: '2-digit',
             month: '2-digit',
             year: 'numeric',
             hour: '2-digit',
             minute: '2-digit',
             second: '2-digit',
-            hour12: false // Gunakan format 24 jam
+            hour12: false,
           });
-          return formattedDateTime; // Format DD-MM-YYYY HH:MM:SS (menggunakan waktu yang sudah ada)
+        },
-        }
       },
       {
         accessorKey: 'origin_customer.fullname',
@@ -91,15 +90,17 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         enableSorting: false,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[250px]'
+          headerClassName: 'w-[250px]',
-        }
+        },
       },
       {
         accessorFn: (row) => {
           const purchaseAmount = row?.purchase?.amount;
           const transferAmount = row?.transfer?.amount;
-
+          return new Intl.NumberFormat('en-US', {
-          return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
+            style: 'currency',
+            currency: 'USD',
+          }).format(purchaseAmount ?? transferAmount ?? 0);
         },
         id: 'amount',
         header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
@@ -111,10 +112,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorFn: (row) => {
-          const purchaseAmount = row?.purchase?.fee_amount;
+          const purchaseFee = row?.purchase?.fee_amount;
-          const transferAmount = row?.transfer?.fee_amount;
+          const transferFee = row?.transfer?.fee_amount;
-
+          return new Intl.NumberFormat('en-US', {
-          return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
+            style: 'currency',
+            currency: 'USD',
+          }).format(purchaseFee ?? transferFee ?? 0);
         },
         id: 'feeamount',
         header: ({ column }) => <DataGridColumnHeader title="Fee Amount" column={column} />,
@@ -126,19 +129,14 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorFn: (row) => {
-          let status;
+          switch (row.status) {
-          if (row.status === 'C') {
+            case 'C': return 'COMPLETE';
-            status = 'COMPLETE';
+            case 'F': return 'FAILED';
-          } else if (row.status === 'F') {
+            case 'O': return 'ON PROCESS';
-            status = 'FAILED';
+            default: return 'PENDING';
-          } else if (row.status === 'O') {
-            status = 'ON PROCESS';
-          } else {
-            status = 'PENDING';
           }
-          return status;
         },
-        accessorKey: 'status',
+        id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: false,
         enableHiding: false,
@@ -152,8 +150,8 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         enableSorting: false,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[250px]'
+          headerClassName: 'w-[250px]',
-        }
+        },
       },
       {
         accessorKey: 'type.name',
@@ -161,9 +159,26 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         enableSorting: false,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[250px]'
+          headerClassName: 'w-[250px]',
+        },
+      },
+      {
+        accessorFn: (row) => {
+          switch (row.status_approve) {
+            case 'W': return 'WAITING APPROVAL';
+            case 'Y': return 'APPROVED';
+            case 'N': return 'REJECTED';
+            default: return 'PENDING';
           }
         },
+        id: 'status_approve',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]',
+        },
+      },
       {
         id: 'actions',
         header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
@@ -172,7 +187,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         cell: (data) => {
           const row = data.row.original;
           return (
-            <div key={`actions-${row.id}`}>
+            <div key={`actions-${row.id}`} className="flex gap-2 justify-center">
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
                 onClick={() => {
@@ -182,40 +197,48 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
               >
                 <KeenIcon icon="eye" />
               </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => {
+                  setSelectedTransactionIdForApproval(row.id);
+                  setShowApprovalDialog(true);
+                }}
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
             </div>
           );
         },
         meta: {
           headerClassName: 'w-[100px]',
-          cellClassName: 'text-center'
+          cellClassName: 'text-center',
-        }
+        },
-      }
+      },
     ],
-    []);
+    []
+  );
 
   const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
-      let startdate;
+      let startdate, enddate;
-      let enddate;
-      let formattedFilter;
 
-      if (filter == undefined || filter.length == 0) {
+      if (!filter || filter.length === 0) {
         const today = new Date();
         const nextWeek = new Date();
         nextWeek.setDate(today.getDate() + 7);
-
         startdate = today.toISOString().split('T')[0];
         enddate = nextWeek.toISOString().split('T')[0];
-      } else if (filter != undefined || filter.length != 0) {
+      } else {
-        startdate = filter[0].value.from;
+        startdate = filter[0]?.value?.from;
-        enddate = filter[0].value.to;
+        enddate = filter[0]?.value?.to;
       }
 
-      formattedFilter = {
+      const formattedFilter = {
         "Transactions.transaction_date": {
-          from: startdate + " 00:00:00",
+          from: `${startdate} 00:00:00`,
-          to: enddate + " 23:59:59"
+          to: `${enddate} 23:59:59`,
-        }
+        },
+        "Transactions.status_approve": { in: ["W", "Y", "N"] },
       };
 
       const response = await GetData(`${API_URL}/transaction/history`, {
@@ -224,11 +247,14 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         with_deleted: false,
         order_field: "Transactions.created_at",
         order_direction: 'DESC',
-        filter: JSON.stringify(formattedFilter)
+        filter: JSON.stringify(formattedFilter),
       });
 
-      setTransaction(response?.data.list);
+      setTransaction(response?.data?.list || []);
-      return { data: response?.data.list, totalCount: response?.data.total_count };
+      return {
+        data: response?.data?.list || [],
+        totalCount: response?.data?.total_count || 0,
+      };
     } catch (error) {
       console.error('Error fetching transaction', error);
     }
@@ -240,12 +266,17 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         getTransactionLists,
         showDetailDialog,
         setShowDetailDialog,
+        showApprovalDialog,
+        setShowApprovalDialog,
         selectedTransactionId,
-        setSelectedTransactionId
+        setSelectedTransactionId,
+        selectedTransactionIdForApproval,
+        setSelectedTransactionIdForApproval,
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />
       <DetailApprovalTransaction />
+      <ApprovalDialog />
 
       <DataGridProvider
         columns={columns}

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

@@ -1,9 +1,14 @@
 import { Container, DataGridInner } from '@/components';
 import { TransactionProvider } from './hooks/TransactionContext';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const Transaction = () => {
   return (
+    <>
+      <Helmet>
+        <title>TPAY | History Transaction</title>
+      </Helmet>
       <TransactionProvider>
         <Container className="mb-7">
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
@@ -25,6 +30,7 @@ const Transaction = () => {
           </div>
         </Container>
       </TransactionProvider>
+    </>
   );
 };
 

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

@@ -227,7 +227,7 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Price Point</p>
-                                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_point)}
+                                        <p className="font-medium">{transactionDetails?.purchase.product.price_point}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Product Type</p>
@@ -239,7 +239,17 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Provider Type</p>
-                                        <p className="font-medium">{transactionDetails?.purchase.product.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>

src/pages/transfer/transfertype/TransferType.tsx

@@ -7,10 +7,15 @@ import AddDialog from './blocks/AddDialog';
 import { Breadcrumbs, Link } from '@mui/material';
 import { DeleteDialog } from './blocks/DeleteDialog';
 import { EditDialog } from './blocks/EditDialog';
+import { Helmet } from 'react-helmet';
 
 const TransferType = () => {
 
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Manage Transaction Type</title>
+      </Helmet>
       <ManageTransferTypeContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Transaction Type</h1>
@@ -36,6 +41,7 @@ const TransferType = () => {
 
         </Container>
       </ManageTransferTypeContextProvider>
+    </>
   );
 };
 

src/pages/wallet/wallet-history/WalletHistory.tsx

@@ -1,9 +1,14 @@
 import { Container, DataGridInner } from '@/components';
 import { ManageWalletContextProvider } from './hooks/ManageWalletHistoryContext';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 const WalletHistory = () => {
   return (
+    <>
+      <Helmet>
+        <title>TPAY | Wallet History</title>
+      </Helmet>
       <ManageWalletContextProvider>
         <Container>
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Wallet History</h1>
@@ -26,6 +31,7 @@ const WalletHistory = () => {
           </div>
         </Container>
       </ManageWalletContextProvider>
+    </>
   );
 };
 

yarn.lock

@@ -2762,6 +2762,11 @@ hasown@^2.0.0, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+helmet@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz"
+  integrity sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==
+
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@3:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"