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

src/config/api.config.ts

@@ -8,10 +8,12 @@ interface apiConfigProps {
   nationality: string;
   service_disbursement: string;
   service_notification: string;
+  service_feedback: string;
 }
 
 const API_URL = import.meta.env.VITE_APP_API_URL;
 const apiConfig: apiConfigProps = {
+  service_feedback: `${API_URL}/k`,
   // service_dashboard: `${API_URL}${import.meta.env.VITE_ENV != 'development' ? '/d' : ''}`,
   service_dashboard: `${API_URL}/d`,
   service_customer: `${API_URL}/c`,
@@ -22,8 +24,7 @@ const apiConfig: apiConfigProps = {
   transaction: `${API_URL}/x`,
   service_disbursement: `${API_URL}/s`,
   service_notification: `${API_URL}/n`,
-  nationality: `https://tpay.shiblysolution.id/cms/api/mobile/list-country/
+  nationality: `https://tpay.shiblysolution.id/cms/api/mobile/list-country/`
-`
 };
 
 export { apiConfig };

src/pages/members/feedback-member/FeedbackMember.tsx

@@ -0,0 +1,40 @@
+import { Container, DataGridInner } from '@/components';
+import { ManageFeedbackMemberProvider } from './hooks/ManageFeedbackMemberContext'; 
+// import EditDialog from './blocks/EditDialog';
+// import DeleteDialog from './blocks/DeleteDialog';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
+
+const FeedbackMemberMaster = () => {
+  return (
+    <>
+    <Helmet><title>TPAY | Manage Provider</title></Helmet>
+      <ManageFeedbackMemberProvider>
+        <Container>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Feedback Member</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">Member</span>
+            </Link>
+
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Manage Feedback Member</span>
+            </Link>
+          </Breadcrumbs>
+          <div className="grid gap-5 lg:gap-7.5">
+            <DataGridInner />
+          </div>
+          {/* <AddDialog />
+          <EditDialog />
+          <DeleteDialog /> */}
+        </Container>
+      </ManageFeedbackMemberProvider>
+    </>
+  );
+};
+
+export default FeedbackMemberMaster;

src/pages/members/feedback-member/hooks/ManageFeedbackMemberContext.tsx

@@ -0,0 +1,205 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import React, { createContext, useCallback, useMemo, useState } from 'react';
+import { Toaster } from 'sonner';
+// import ListToolbar from '../blocks/ListToolbar';
+
+interface feedbackProps {
+  id: string;
+  name: string;
+  description: string;
+  type: string;
+  status: string;
+  transactionTypeId: string;
+  agentId: string;
+}
+
+interface ContextProps {
+  feedback: feedbackProps[];
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_sucos: string | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  showDeleteDialog: boolean;
+  handleDeleteDialog: (show: boolean, selected_sucos: string | null) => void;
+  selectedfeedback: string | null;
+  getfeedbackLists: (
+    limit: number,
+    page: number,
+    with_deleted: boolean,
+    order_field: any,
+    order_direction: any
+  ) => Promise<{ data: feedbackProps[]; totalCount: number } | undefined>;
+}
+
+const initialProps: ContextProps = {
+  feedback: [],
+  showEditDialog: false,
+  handleEditDialog: () => {},
+  showAddDialog: false,
+  handleAddDialog: () => {},
+  showDeleteDialog: false,
+  handleDeleteDialog: () => {},
+  selectedfeedback: null,
+  getfeedbackLists: async () => undefined
+};
+
+const ManageFeedbackMemberContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_feedback;
+
+const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode }) => {
+  const [feedback, setFeedback] = useState([]);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedfeedback, setSelectedfeedback] = useState<string | null>(null);
+  const { GetData } = useCallApi();
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
+
+  const handleEditDialog = useCallback((show: boolean, selected_feedback: string | null) => {
+    setShowEditDialog(show);
+    setSelectedfeedback(show ? selected_feedback : null);
+  }, []);
+
+  const handleDeleteDialog = useCallback((show: boolean, selected_feedback: string | null) => {
+    setShowDeleteDialog(show);
+    setSelectedfeedback(show ? selected_feedback : null);
+  }, []);
+
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorFn: (row) => row.feedback_notes,
+        id: 'feedback_notes',
+        header: ({ column }) => <DataGridColumnHeader title="Feedback Notes" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.feedback_screenshot,
+        id: 'feedback_screenshot',
+        header: ({ column }) => <DataGridColumnHeader title="Feedback Screenshot" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.review_notes,
+        id: 'review_notes',
+        header: ({ column }) => <DataGridColumnHeader title="Review Notes" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.review_screenshot,
+        id: 'review_screenshot',
+        header: ({ column }) => <DataGridColumnHeader title="Review Screenshot" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      }
+      // ,
+      // {
+      //   id: 'actions',
+      //   header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+      //   enableSorting: false,
+      //   enableHiding: false,
+      //   cell: (data) => {
+      //     const row = data.row.original;
+      //     return (
+      //       <>
+      //         <button
+      //           className="btn btn-sm btn-icon btn-clear btn-light"
+      //           onClick={() => handleEditDialog(true, row.feedback_id)}
+      //         >
+      //           <KeenIcon icon="notepad-edit" />
+      //         </button>
+      //         <button
+      //           className="btn btn-sm btn-icon btn-clear btn-light"
+      //           onClick={() => handleDeleteDialog(true, row.feedback_id)}
+      //         >
+      //           <KeenIcon icon="trash" />
+      //         </button>
+      //       </>
+      //     );
+      //   },
+      //   meta: {
+      //     headerClassName: 'w-[100px] text-center',
+      //     cellClassName: 'text-center'
+      //   }
+      // }
+    ],
+    [handleEditDialog, handleDeleteDialog]
+  );
+
+  const getfeedbackLists = async (page: number, limit: number, sorting: any, filter: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+      const response = await GetData(`${API_URL}/feedback/list`, {
+        limit,
+        page: page + 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
+        // filter: JSON.stringify(filter)
+      });
+      // console.log(response?.data);
+      setFeedback(response?.data.list);
+      return { data: response?.data.list, totalCount: response?.data.total_count };
+    } catch (error) {
+      console.error('Error fetching Feedback Member', error);
+    }
+  };
+
+
+  return (
+    <ManageFeedbackMemberContext.Provider
+      value={{
+        feedback,
+        showEditDialog,
+        handleEditDialog,
+        showAddDialog,
+        handleAddDialog,
+        showDeleteDialog,
+        handleDeleteDialog,
+        selectedfeedback,
+        getfeedbackLists
+      }}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+
+      <DataGridProvider
+        columns={columns}
+        pagination={{ size: 10 }}
+        // toolbar={<ListToolbar />}
+        layout={{ card: true }}
+        sorting={[{ id: 'created_at', desc: true }]}
+        serverSide={true}
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+          getfeedbackLists(pageIndex, pageSize, sorting, columnFilters)
+        }
+      >
+        {children}
+      </DataGridProvider>
+    </ManageFeedbackMemberContext.Provider>
+  );
+};
+
+export { ManageFeedbackMemberContext, ManageFeedbackMemberProvider};
+export type { feedbackProps };

src/pages/members/feedback-member/hooks/useManageFeedbackMemberContext.tsx

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

src/pages/members/manage-members/blocks/ListToolBar.tsx

@@ -12,7 +12,7 @@ interface ListToolbarProps {
 
 const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps) => {
 
-  const [emailFilter, setEmailFilter] = useState('');
+  const [groupFilter, setGroupFilter] = useState('');
   const [usernameFilter, setUsernameFilter] = useState('');
   const {table}=useDataGrid();
   const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -20,9 +20,9 @@ const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps)
     table.getColumn('username')?.setFilterValue(e.target.value);
   };
 
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleGroupChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setEmailFilter(e.target.value);
+    setGroupFilter(e.target.value);
-    table.getColumn('email')?.setFilterValue(e.target.value);
+    table.getColumn('group_name')?.setFilterValue(e.target.value);
   };
 
   return (
@@ -37,6 +37,13 @@ const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps)
               onChange={handleUsernameChange}
               className="input input-sm w-40"
             />
+            <input
+              type="text"
+              placeholder="Search Group"
+              value={groupFilter}
+              onChange={handleGroupChange}
+              className="input input-sm w-40"
+            />
           </div>
           <div className="flex gap-3 items-center">
             <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>

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

@@ -30,7 +30,6 @@ const DetailApprovalTransaction = () => {
                     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);
@@ -121,11 +120,14 @@ const DetailApprovalTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
+                                        <p className="font-medium">
+                                            {transactionDetails?.origin_customer?.fullname ?? "-"}
+                                        </p>
                                     </div>
+
                                     <div>
                                         <p className="text-sm text-gray-500">Amount</p>
-                                        <p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.amount)}</p>
+                                        <p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase?.amount) ?? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.transfer.amount)}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Fee</p>
@@ -292,7 +294,9 @@ const DetailApprovalTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
+                                        <p className="font-medium">
+                                            {transactionDetails?.origin_customer?.fullname ?? "-"}
+                                        </p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Amount</p>
@@ -347,10 +351,10 @@ const DetailApprovalTransaction = () => {
                                         <p className="font-medium">{transactionDetails?.description}</p>
                                     </div>
                                     <div>
-                                    <div>
+                                        <div>
-                                        <p className="text-sm text-gray-500">Name</p>
+                                            <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
+                                            <p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
-                                    </div>
+                                        </div>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Reference</p>
@@ -370,19 +374,21 @@ const DetailApprovalTransaction = () => {
                                 <div className="grid grid-cols-2 gap-4">
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
+                                        <p className="font-medium">
+                                            {transactionDetails?.origin_customer?.fullname ?? "-"}
+                                        </p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Phone Number</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.msisdn}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? "-"}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Email</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.email}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.email ?? "-"}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Username</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.username}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.username ?? "-"}</p>
                                     </div>
                                 </div>
                             </div>
@@ -391,24 +397,37 @@ const DetailApprovalTransaction = () => {
                         {activeTab === 'destinationcustomer' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Destination Customer</h3>
-                                <div className="grid grid-cols-2 gap-4">
+
-                                    <div>
+                                {transactionDetails?.transfer?.destination_customer ? (
-                                        <p className="text-sm text-gray-500">Name</p>
+                                    <div className="grid grid-cols-2 gap-4">
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
+                                        <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>
+                                ) : (
-                                        <p className="text-sm text-gray-500">MSISDN</p>
+                                    <p className="text-gray-500">No data available</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>
                         )}
 

src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx

@@ -4,10 +4,11 @@ import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useState ,useEffect } from 'react';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
+import { getAuth } from '@/auth';
 
 const TransactionDisbursement = () => {
   const [form, setForm] = useState({
@@ -15,8 +16,28 @@ const TransactionDisbursement = () => {
     amount: '',
     pin: ''
   });
+  const [wallets, setWallets] = useState([]);
   const { GetData, PostData } = useCallApi();
+  const parsedUser = getAuth()?.user;
   const API_URL = apiConfig.transaction;
+  const API_URL_WALLET = apiConfig.service_wallet
+
+  useEffect(() => {
+    const fetchWallets = async () => {
+      try {
+        const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`, {});
+        if (response?.status === true) {
+          setWallets(response.data || []);
+        } else {
+          toast.warning(response?.message || 'Failed to fetch wallet data');
+        }
+      } catch (error) {
+        toast.warning('Failed to fetch wallet data');
+      }
+    };
+
+    fetchWallets();
+  }, []);
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
@@ -61,6 +82,20 @@ const TransactionDisbursement = () => {
               <span className="text-sm">Disbursement Saldo</span>
             </Link>
           </Breadcrumbs>
+          {/* Wallet Section */}
+          <div className="mb-6">
+            <h2 className="text-md font-semibold text-gray-700 mb-3">Your Wallets</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+              {wallets.map((wallet: any) => (
+                <div key={wallet.id_wallet} className="border rounded-lg p-4 bg-white">
+                  <p className="text-sm text-gray-500">{wallet.wallet}</p>
+                  <p className="text-lg font-semibold text-green-600">
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(wallet.amount)}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
           <Container className="flex items-center justify-center">
             <div className="card max-w-[750px] w-full">
               <div className="card-body p-10">

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

@@ -120,11 +120,11 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? "-"}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Amount</p>
-                                        <p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.amount)}</p>
+                                        <p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase?.amount) ?? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.transfer.amount)}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Fee</p>
@@ -291,7 +291,7 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? "-"}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Amount</p>
@@ -367,19 +367,19 @@ const DetailTransaction = () => {
                                 <div className="grid grid-cols-2 gap-4">
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? "-"}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Phone Number</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.msisdn}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? "-"}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Email</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.email}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.email ?? "-"}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Username</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer.username}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.username ?? "-"}</p>
                                     </div>
                                 </div>
                             </div>
@@ -388,24 +388,37 @@ const DetailTransaction = () => {
                         {activeTab === 'destinationcustomer' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Destination Customer</h3>
-                                <div className="grid grid-cols-2 gap-4">
+
-                                    <div>
+                                {transactionDetails?.transfer?.destination_customer ? (
-                                        <p className="text-sm text-gray-500">Name</p>
+                                    <div className="grid grid-cols-2 gap-4">
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
+                                        <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>
+                                ) : (
-                                        <p className="text-sm text-gray-500">MSISDN</p>
+                                    <p className="text-gray-500">No data available</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>
                         )}
 
@@ -430,7 +443,7 @@ const DetailTransaction = () => {
                                 <h3 className="font-semibold">Destination Wallet</h3>
 
                                 {!transactionDetails?.transfer ? (
-                                    <div className="text-center text-sm text-gray-500">No Data available</div>
+                                    <div className="text-sm text-gray-500">No Data available</div>
                                 ) : (
                                     <div className="grid grid-cols-2 gap-4">
                                         <div>

src/pages/transaction/topup/TransactionTopup.tsx

@@ -4,24 +4,46 @@ import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
+import { getAuth } from '@/auth';
 
 const TransactionTopup = () => {
   const [form, setForm] = useState({
     topupAmount: '',
     pin: ''
   });
+
+  const [wallets, setWallets] = useState([]);
   const { GetData, PostData } = useCallApi();
+  const parsedUser = getAuth()?.user;
   const API_URL = apiConfig.transaction;
+  const API_URL_WALLET = apiConfig.service_wallet
+
+  useEffect(() => {
+    const fetchWallets = async () => {
+      try {
+        const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`, {});
+        if (response?.status === true) {
+          setWallets(response.data || []);
+        } else {
+          toast.warning(response?.message || 'Failed to fetch wallet data');
+        }
+      } catch (error) {
+        toast.warning('Failed to fetch wallet data');
+      }
+    };
+
+    fetchWallets();
+  }, []);
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
     console.log('Submitted Data:', form);
 
-    if (form.pin == '' || form.topupAmount) {
+    if (form.pin == '' || form.topupAmount == '') {
       toast.warning('Please fill in all required fields.')
       return
     }
@@ -60,6 +82,20 @@ const TransactionTopup = () => {
               <span className="text-sm">Topup</span>
             </Link>
           </Breadcrumbs>
+          {/* Wallet Section */}
+          <div className="mb-6">
+            <h2 className="text-md font-semibold text-gray-700 mb-3">Your Wallets</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+              {wallets.map((wallet: any) => (
+                <div key={wallet.id_wallet} className="border rounded-lg p-4 bg-white">
+                  <p className="text-sm text-gray-500">{wallet.wallet}</p>
+                  <p className="text-lg font-semibold text-green-600">
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(wallet.amount)}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
           <Container className="flex items-center justify-center">
             <div className="card max-w-[750px] w-full">
               <div className="card-body p-10">

src/routing/AppRoutingSetup.tsx

@@ -42,9 +42,10 @@ import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster';
 import WalletHistory from '@/pages/wallet/wallet-history/WalletHistory';
 import WalletMaster from '@/pages/master/wallet/WalletMaster';
 import CurrencyMaster from '@/pages/master/currency/CurrencyMaster';
+import FeedbackMemberMaster from '@/pages/members/feedback-member/FeedbackMember';
 
 // DISBURSEMENT
-import HistoryTransactionDisbursement from '@/pages/disbursement/history-transaction/HistoryTransaction'
+import HistoryTransactionDisbursement from '@/pages/disbursement/history-transaction/HistoryTransaction';
 // DISBURSEMENT
 
 const AppRoutingSetup = (): ReactElement => {
@@ -84,6 +85,7 @@ const AppRoutingSetup = (): ReactElement => {
           <Route path="/members/member-management" element={<ManageMembers />} />
           <Route path="/members/kyc-delete-member" element={<ManageKycDeletion />} />
           <Route path="/members/create-member-credential" element={<MemberCredential />} />
+          <Route path="/members/feedback-member" element={<FeedbackMemberMaster />} />
 
           <Route path="/access/access-type-management" element={<AccessType />} />
 
@@ -98,8 +100,8 @@ const AppRoutingSetup = (): ReactElement => {
 
           <Route path="/transaction" element={<Transaction />} />
           <Route path="/approval-transaction" element={<ApprovalTransaction />} />
-          <Route path="/transaction/topup" element={<TransactionTopup/>} />
+          <Route path="/transaction/topup" element={<TransactionTopup />} />
-          <Route path="/transaction/disbursement-saldo" element={<TransactionDisbursement/>} />
+          <Route path="/transaction/disbursement-saldo" element={<TransactionDisbursement />} />
           <Route path="/menu/menu-management" element={<ManageMenu />} />
           <Route path="/menu/welcome" element={<Welcome />} />
           <Route path="/message/inbox" element={<Inbox />} />
@@ -112,9 +114,11 @@ const AppRoutingSetup = (): ReactElement => {
           />
 
           {/* DISBURSEMENT  */}
-          <Route path="/disbursement/transaction-history" element={<HistoryTransactionDisbursement />} />
+          <Route
+            path="/disbursement/transaction-history"
+            element={<HistoryTransactionDisbursement />}
+          />
           {/* DISBURSEMENT */}
-
         </Route>
       </Route>
       <Route path="error/*" element={<ErrorsRouting />} />