TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
unknown
2025-04-21 00:29:33 +07:00
parent ed9d094dd8 ac75b7ec04
commit caa6ece087
8 changed files with 370 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/config/api.config.ts
View File

@ -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`,

40
src/pages/members/feedback-member/FeedbackMember.tsx Normal file
View File

@ -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;

205
src/pages/members/feedback-member/hooks/ManageFeedbackMemberContext.tsx Normal file
View File

@ -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 };

12
src/pages/members/feedback-member/hooks/useManageFeedbackMemberContext.tsx Normal file
View File

@ -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 };

49
src/pages/notification/blocks/AddDialog.tsx
View File

@ -26,7 +26,7 @@ import { Button } from '@/components/ui/button';
import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { CustomerProps } from '@/pages/master/provider/blocks/AddDialog';
import { ChevronDown } from 'lucide-react';
import { Check, ChevronDown } from 'lucide-react';
const API_URL_CUSTOMER = apiConfig.service_customer;
const API_URL_NOTIFICATION = apiConfig.service_notification;
@ -225,26 +225,33 @@ const AddDialog = () => {
>
<CommandEmpty>No Customer found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
const customerId = customer.id;
setFormField((prev) => {
const isSelected = prev.customers.includes(customerId);
return {
...prev,
customers: isSelected
? prev.customers.filter((id) => id !== customerId)
: [...prev.customers, customerId]
};
});
}}
>
{customer.username}
</CommandItem>
))}
{customers.map((customer) => {
const isSelected = formField.customers.includes(customer.id);
return (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
const customerId = customer.id;
setFormField((prev) => {
const isSelected = prev.customers.includes(customerId);
return {
...prev,
customers: isSelected
? prev.customers.filter((id) => id !== customerId)
: [...prev.customers, customerId]
};
});
}}
className={isSelected ? 'bg-accent font-semibold' : ''}
>
<span className="flex items-center gap-2">
{isSelected && <Check className="w-4 h-4 text-green-600" />}
{customer.username}
</span>
</CommandItem>
);
})}
</CommandGroup>
</CommandList>
</Command>

37
src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx
View File

@ -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">

40
src/pages/transaction/topup/TransactionTopup.tsx
View File

@ -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">

14
src/routing/AppRoutingSetup.tsx
View File

@ -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/disbursement-saldo" element={<TransactionDisbursement/>} />
<Route path="/transaction/topup" element={<TransactionTopup />} />
<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 />} />