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:
ardiola
2025-04-15 21:45:26 +07:00
parent 74d19c1328 de9702b1b4
commit bb37f9711b
30 changed files with 1713 additions and 1045 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ interface apiConfigProps {
transaction: string; transaction: string;
nationality: string; nationality: string;
service_disbursement: string; service_disbursement: string;
service_notification: string;
} }
const API_URL = import.meta.env.VITE_APP_API_URL; const API_URL = import.meta.env.VITE_APP_API_URL;
@ -20,6 +21,7 @@ const apiConfig: apiConfigProps = {
service_wallet: `${API_URL}/w`, service_wallet: `${API_URL}/w`,
transaction: `${API_URL}/x`, transaction: `${API_URL}/x`,
service_disbursement: `${API_URL}/s`, 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/
` `
}; };

1
src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx
View File

@ -61,7 +61,6 @@ const DetailTransaction = () => {
useEffect(() => { useEffect(() => {
const fetchTransactionDetails = async () => { const fetchTransactionDetails = async () => {
console.log(selectedTransactionId)
if (selectedTransactionId) { if (selectedTransactionId) {
try { try {
const response = await GetData(`${API_URL}/transaction/history/${selectedTransactionId}`, { const response = await GetData(`${API_URL}/transaction/history/${selectedTransactionId}`, {

4
src/pages/disbursement/history-transaction/blocks/DetailTransactionLog.tsx
View File

@ -54,10 +54,6 @@ const TransactionLogViewer = () => {
detailLogData detailLogData
} = useTransactionContext(); } = useTransactionContext();
console.log('detailLogData: ', detailLogData)
return ( return (
<Dialog open={showDetailLogDialog} onOpenChange={setShowDetailLogDialog}> <Dialog open={showDetailLogDialog} onOpenChange={setShowDetailLogDialog}>
<DialogContent className="container-fixed max-w-[1280px] w-full h-[90vh] flex flex-col p-6 overflow-hidden"> <DialogContent className="container-fixed max-w-[1280px] w-full h-[90vh] flex flex-col p-6 overflow-hidden">

22
src/pages/groups/Column.tsx
View File

@ -1,3 +1,4 @@
import { KeenIcon } from '@/components';
import { ColumnDef } from '@tanstack/react-table'; import { ColumnDef } from '@tanstack/react-table';
export type Group = { export type Group = {
@ -8,7 +9,7 @@ export type Group = {
description: string; description: string;
}; };
export const columns: ColumnDef<Group>[] = [ export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Group>[] => [
{ {
accessorKey: 'no', accessorKey: 'no',
header: 'ID' header: 'ID'
@ -30,8 +31,19 @@ export const columns: ColumnDef<Group>[] = [
accessorKey: 'description', accessorKey: 'description',
header: 'Description' header: 'Description'
}, },
// { {
// id: 'actions', id: 'actions',
// header: 'Actions' cell: ({ row }) => {
// } const dataMembers = row.original;
return (
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleUpdate(dataMembers)}
>
<KeenIcon icon="notepad-edit" />
</button>
);
}
}
]; ];

49
src/pages/groups/ListToolbar.tsx Normal file
View File

@ -0,0 +1,49 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';
const ListToolBar = ({ createGroup }: { createGroup: () => void }) => {
const { table, reload } = useDataGrid();
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
<div className="flex justify-between w-full items-center">
<div className="flex w-[50%] gap-3 items-center">
<label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search users"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
/>
</label>
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
// disabled={isLoading}
// onClick={handleFilterData}
>
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
<KeenIcon icon="filter" />
</Button>
</DefaultTooltip> */}
</div>
<div className="flex gap-3 items-center">
<Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createGroup}>
Add Data
</Button>
<DefaultTooltip title={'Refresh'} placement={'top'}>
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
<KeenIcon icon="arrows-circle" />
</Button>
</DefaultTooltip>
</div>
</div>
</div>
</div>
);
};
export { ListToolBar };

205
src/pages/groups/ManageGroups.tsx
View File

@ -1,5 +1,5 @@
import { DataTable } from '@/components/ui/DataTable'; import { DataTable } from '@/components/ui/DataTable';
import { columns, Group } from './Column'; import { getColumns, Group } from './Column';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import axios, { AxiosResponse } from 'axios'; import axios, { AxiosResponse } from 'axios';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
@ -24,6 +24,8 @@ import CloseIcon from '@mui/icons-material/Close';
import Divider from '@mui/material/Divider'; import Divider from '@mui/material/Divider';
import ConfirmDialog from '@/components/confirm'; import ConfirmDialog from '@/components/confirm';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Container, DataGridProvider } from '@/components';
import { ListToolBar } from './ListToolbar';
// import { DialogHeader } from '@/components/ui/dialog'; // import { DialogHeader } from '@/components/ui/dialog';
// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; // import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
const BASE_URL = apiConfig.service_customer; const BASE_URL = apiConfig.service_customer;
@ -89,9 +91,9 @@ const ManageGroups = () => {
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
if (!formData.groupName) return toast.warning(`Group name can not be empty!`) if (!formData.groupName) return toast.warning(`Group name can not be empty!`);
if (!formData.status) return toast.warning(`Status can not be empty!`) if (!formData.status) return toast.warning(`Status can not be empty!`);
if (!formData.description) return toast.warning(`Description can not be empty!`) if (!formData.description) return toast.warning(`Description can not be empty!`);
setIsDialogOpen(false); setIsDialogOpen(false);
setDialogOpen(true); setDialogOpen(true);
}; };
@ -134,7 +136,7 @@ const ManageGroups = () => {
description: formData.description, description: formData.description,
created_at: new Date() created_at: new Date()
}); });
toast.success(`Success create group`) toast.success(`Success create group`);
} else if (dialogType === 'update') { } else if (dialogType === 'update') {
await axios.put(`${BASE_URL}/groups/update/${formData.id}`, { await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
name: formData.groupName, name: formData.groupName,
@ -142,14 +144,14 @@ const ManageGroups = () => {
description: formData.description, description: formData.description,
updated_at: new Date() updated_at: new Date()
}); });
toast.success(`Success update group`) toast.success(`Success update group`);
} else if (dialogType === 'delete') { } else if (dialogType === 'delete') {
await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`); await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`);
toast.success(`Success delete group`) toast.success(`Success delete group`);
} }
} catch (error: any) { } catch (error: any) {
console.log(error); console.log(error);
toast.error(error.message) toast.error(error.message);
} finally { } finally {
await fetchGroups(); await fetchGroups();
setDialogOpen(false); setDialogOpen(false);
@ -162,19 +164,19 @@ const ManageGroups = () => {
<Helmet> <Helmet>
<title>TPAY | Manage Group</title> <title>TPAY | Manage Group</title>
</Helmet> </Helmet>
<ConfirmDialog <Container>
open={dialogOpen} <ConfirmDialog
onClose={() => setDialogOpen(false)} open={dialogOpen}
title="Confirm Action" onClose={() => setDialogOpen(false)}
content={ title="Confirm Action"
`Are you sure you want to ` + content={
(dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?') `Are you sure you want to ` +
} (dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
onYes={handleYes} }
onNo={() => setDialogOpen(false)} onYes={handleYes}
/> onNo={() => setDialogOpen(false)}
<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'> <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Groups</h1>
<Breadcrumbs> <Breadcrumbs>
<Link underline="none" color="inherit" href="/"> <Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span> <span className="text-sm hover:underline">Dashboard</span>
@ -188,84 +190,101 @@ const ManageGroups = () => {
<span className="text-sm">Manage Groups</span> <span className="text-sm">Manage Groups</span>
</Link> </Link>
</Breadcrumbs> </Breadcrumbs>
</div> {/* <div className="w-full overflow-x-auto px-4"> */}
<div className="w-full overflow-x-auto px-4"> <div className="grid gap-5 lg:gap-7.5 mt-5">
<DataTable {/* <DataTable
data={dataGroup} data={dataGroup}
columns={columns} columns={columns}
createData={createGroup} createData={createGroup}
onUpdate={handleUpdate} onUpdate={handleUpdate}
onDelete={null} onDelete={null}
/> /> */}
</div> <DataGridProvider
data={dataGroup}
columns={getColumns(handleUpdate)}
pagination={{ size: 25 }}
toolbar={<ListToolBar createGroup={createGroup} />}
layout={{ card: true }}
sorting={[{ id: 'created_at', desc: true }]}
serverSide={false}
onRowSelectionChange={(selected, table: any) => {
const selectedRow = table.getSelectedRowModel().rows[0];
if (selectedRow) handleUpdate(selectedRow.original);
}}
/>
</div>
{/* </div> */}
<Dialog open={isDialogOpen} onClose={closeDialog}> <Dialog open={isDialogOpen} onClose={closeDialog}>
<DialogContent className="w-full"> <DialogContent className="w-full">
<div className="flex justify-between"> <div className="flex justify-between">
<DialogTitle>{dialogType==='create'?"Create New Group":"Update Group"}</DialogTitle> <DialogTitle>
<Box display="flex" justifyContent="flex-end"> {dialogType === 'create' ? 'Create New Group' : 'Update Group'}
<Button </DialogTitle>
variant="outlined" <Box display="flex" justifyContent="flex-end">
sx={{ borderColor: 'white', color: 'grey' }} <Button
onClick={closeDialog} variant="outlined"
> sx={{ borderColor: 'white', color: 'grey' }}
<CloseIcon /> onClick={closeDialog}
</Button> >
</Box> <CloseIcon />
</div> </Button>
<Divider /> </Box>
<div className="p-5 mt-5"> </div>
<form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full"> <Divider />
<div className="grid grid-cols-4 items-center gap-4 w-full"> <div className="p-5 mt-5">
<label className="form-label text-sm"> <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
<span className="text-red-500">*</span>Group Name: <div className="grid grid-cols-4 items-center gap-4 w-full">
</label> <label className="form-label text-sm">
<input <span className="text-red-500">*</span>Group Name:
type="text" </label>
name="groupName" <input
className="input w-full col-span-3" type="text"
value={formData.groupName} name="groupName"
onChange={handleChange} className="input w-full col-span-3"
/> value={formData.groupName}
</div> onChange={handleChange}
<div className="grid grid-cols-4 items-center gap-4 w-full"> />
<label className="form-label text-sm"> </div>
<span className="text-red-500">*</span>Active Status: <div className="grid grid-cols-4 items-center gap-4 w-full">
</label> <label className="form-label text-sm">
<FormControl> <span className="text-red-500">*</span>Active Status:
<RadioGroup name="status" row value={formData.status} onChange={handleChange}> </label>
<FormControlLabel <FormControl>
value="Y" <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
checked={formData.status === 'Y'} <FormControlLabel
control={<Radio />} value="Y"
label="Yes" checked={formData.status === 'Y'}
/> control={<Radio />}
<FormControlLabel label="Yes"
value="N" />
checked={formData.status === 'N'} <FormControlLabel
control={<Radio />} value="N"
label="No" checked={formData.status === 'N'}
/> control={<Radio />}
</RadioGroup> label="No"
</FormControl> />
</div> </RadioGroup>
<div className="grid grid-cols-4 items-center gap-4 w-full"> </FormControl>
<label className="form-label text-sm"> </div>
<span className="text-red-500">*</span>Description: <div className="grid grid-cols-4 items-center gap-4 w-full">
</label> <label className="form-label text-sm">
<input <span className="text-red-500">*</span>Description:
type="text" </label>
name="description" <input
className="input w-full col-span-3" type="text"
value={formData.description} name="description"
onChange={handleChange} className="input w-full col-span-3"
/> value={formData.description}
</div> onChange={handleChange}
<Button type="submit">Submit</Button> />
</form> </div>
</div> <Button type="submit">Submit</Button>
</DialogContent> </form>
</Dialog> </div>
</DialogContent>
</Dialog>
</Container>
</> </>
); );
}; };

50
src/pages/members/kyc-delete-member/blocks/DetailDialog.tsx
View File

@ -1,9 +1,9 @@
import { import {
Dialog, Dialog,
DialogBody, DialogBody,
DialogContent, DialogContent,
DialogHeader, DialogHeader,
DialogTitle DialogTitle
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -13,11 +13,11 @@ import axios from 'axios';
const API_URL = apiConfig.service_customer; const API_URL = apiConfig.service_customer;
const DetailDialog = () => { const DetailDialog = () => {
const { showDetailDialog, setShowDetailDialog, detailKyc } = useManageKycDeletionContext(); const { showDetailDialog, setShowDetailDialog, detailKyc, handleApproveReject } = useManageKycDeletionContext();
return ( return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}> <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden max-h-[90vh] overflow-y-auto">
<DialogHeader> <DialogHeader>
<DialogTitle>Customer Deletion Details </DialogTitle> <DialogTitle>Customer Deletion Details </DialogTitle>
</DialogHeader> </DialogHeader>
@ -38,9 +38,9 @@ const DetailDialog = () => {
<div className="flex justify-end gap-2 mt-3"> <div className="flex justify-end gap-2 mt-3">
<Button type="button" variant="outline" onClick={() => setShowDetailDialog(false)}>Cancel</Button> <Button type="button" variant="outline" onClick={() => setShowDetailDialog(false)}>Cancel</Button>
<Button onClick={()=>{}} variant="destructive" color="warning">Reject</Button> <Button onClick={() => handleApproveReject(detailKyc.id, 'N')} variant="destructive" color="warning">Reject</Button>
<Button onClick={()=>{}} variant="default" color="primary">Approve</Button> <Button onClick={() => handleApproveReject(detailKyc.id, 'Y')} variant="default" color="primary">Approve</Button>
</div> </div>
</div> </div>
) : (<div></div>)} ) : (<div></div>)}
</DialogBody> </DialogBody>
@ -51,9 +51,9 @@ const DetailDialog = () => {
export default DetailDialog; export default DetailDialog;
function generateInput(formData:any, handleChange:any, label:string, name:string, type: string, required: boolean, disabled: boolean) { function generateInput(formData: any, handleChange: any, label: string, name: string, type: string, required: boolean, disabled: boolean) {
function generateDate(isoString: string) { function generateDate(isoString: string) {
return isoString.slice(0, 10); // "2000-01-18" return isoString.slice(0, 10); // "2000-01-18"
} }
type Code = 'W' | 'Y' | 'N' | 'T' | 'P' | 'D' | 'L'; type Code = 'W' | 'Y' | 'N' | 'T' | 'P' | 'D' | 'L';
@ -62,17 +62,17 @@ function generateInput(formData:any, handleChange:any, label:string, name:string
} }
const statusMap: Record<Code, Reason> = { const statusMap: Record<Code, Reason> = {
W: {label: 'Waiting Approval'}, W: { label: 'Waiting Approval' },
Y: {label: 'Approve'}, Y: { label: 'Approve' },
N: {label: 'Reject'}, N: { label: 'Reject' },
T: {label: 'Tidak lagi menggunakan layanan'}, T: { label: 'Tidak lagi menggunakan layanan' },
P: {label: 'Privasi dan keamanan'}, P: { label: 'Privasi dan keamanan' },
D: {label: 'Akun ganda'}, D: { label: 'Akun ganda' },
L: {label: 'Lainnya'} L: { label: 'Lainnya' }
}; };
if (name == 'reason_deletion' || name == 'status_approve') { if (name == 'reason_deletion' || name == 'status_approve') {
const status = formData[name] as Code const status = formData[name] as Code
const fixStatus = statusMap[status] ?? {label: formData[name]} const fixStatus = statusMap[status] ?? { label: formData[name] }
formData[name] = fixStatus.label formData[name] = fixStatus.label
} }
return ( return (
@ -80,15 +80,15 @@ function generateInput(formData:any, handleChange:any, label:string, name:string
<div className="w-full mt-5"> <div className="w-full mt-5">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
{label}<span className="text-red-500">{required?"*":""}</span> {label}<span className="text-red-500">{required ? "*" : ""}</span>
</label> </label>
<Input <Input
className="input" className="input"
readOnly={disabled} readOnly={disabled}
required={required} required={required}
type={type} type={type}
name={name} name={name}
value={formData[name]?(type === 'date' ? generateDate(formData[name]) : formData[name]):""} value={formData[name] ? (type === 'date' ? generateDate(formData[name]) : formData[name]) : ""}
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>

41
src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx
View File

@ -1,5 +1,6 @@
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components'; import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner'; import { Toaster } from '@/components/ui/sonner';
import { toast } from 'sonner';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table'; import { ColumnDef } from '@tanstack/react-table';
import { createContext, useCallback, useMemo, useState } from 'react'; import { createContext, useCallback, useMemo, useState } from 'react';
@ -36,6 +37,7 @@ interface ContextProps {
selectedIdCustomer: string | null; selectedIdCustomer: string | null;
detailKyc: any | null; detailKyc: any | null;
setDetailKyc: React.Dispatch<React.SetStateAction<any>>; setDetailKyc: React.Dispatch<React.SetStateAction<any>>;
handleApproveReject: (customerDeletionId: string, status_approve: string) => {};
} }
const initialProps: ContextProps = { const initialProps: ContextProps = {
@ -48,6 +50,7 @@ const initialProps: ContextProps = {
setShowDetailDialog: () => { }, setShowDetailDialog: () => { },
detailKyc: async () => {}, detailKyc: async () => {},
setDetailKyc: () => { }, setDetailKyc: () => { },
handleApproveReject: () => ({customerDeletionId: '0', status_approve: 'Y'}),
}; };
const ManageKycDeletionContext = createContext<ContextProps>(initialProps); const ManageKycDeletionContext = createContext<ContextProps>(initialProps);
@ -83,13 +86,15 @@ export const renderStatusBadge = (statusRaw: string | null | undefined) => {
); );
}; };
// const { reload } = useDataGrid();
const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactNode }) => { const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactNode }) => {
const [showDetailDialog, setShowDetailDialog] = useState(false); const [showDetailDialog, setShowDetailDialog] = useState(false);
const [showAddDialog, setShowAddDialog] = useState(false); const [showAddDialog, setShowAddDialog] = useState(false);
const [selectedIdCustomer, setSelectedIdCustomer] = useState<string | null>(null); const [selectedIdCustomer, setSelectedIdCustomer] = useState<string | null>(null);
const [detailKyc, setDetailKyc] = useState<any>(); const [detailKyc, setDetailKyc] = useState<any>();
const [manageKyc, setManageKyc] = useState<ManageKycDeletionProps[]>([]); const [manageKyc, setManageKyc] = useState<ManageKycDeletionProps[]>([]);
const { GetData } = useCallApi(); const { GetData, PostData } = useCallApi();
const getKycDeletionList = async (page: number, limit: number, sorting: any, filter: any) => { const getKycDeletionList = async (page: number, limit: number, sorting: any, filter: any) => {
try { try {
@ -130,12 +135,11 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
}; };
const handleDetailDialog = useCallback(async (show: boolean, selected_id_customer: string | null) => { const handleDetailDialog = useCallback(async (show: boolean, selected_id_customer: string | null) => {
setSelectedIdCustomer(show ? selected_id_customer : null); if (show == true) {
let detailCustomer = await GetData(`${API_URL}/customer_deletion/detail/${selected_id_customer}`, {}) setSelectedIdCustomer(show ? selected_id_customer : null);
setDetailKyc(detailCustomer?.data) let detailCustomer = await GetData(`${API_URL}/customer_deletion/detail/${selected_id_customer}`, {})
console.log('detailCustomer: ',detailCustomer) setDetailKyc(detailCustomer?.data)
console.log('detailCustomer2: ',detailCustomer?.data) }
console.log('detailKyc: ', detailKyc)
setShowDetailDialog(show); setShowDetailDialog(show);
}, []); }, []);
@ -143,6 +147,26 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
setShowAddDialog(show); setShowAddDialog(show);
}, []); }, []);
const handleApproveReject = useCallback(async (customerDeletionId: string, status_approve: string) => {
console.log(customerDeletionId, status_approve)
try {
let approveReject = await PostData(`${API_URL}/customer_deletion/update_status/${customerDeletionId}`, {
status_approve
})
if (approveReject?.status == true) {
toast.success('Success update status approval')
handleDetailDialog(false, null)
} else {
toast.warning(`${approveReject?.message}`)
handleDetailDialog(false, null)
}
} catch (error) {
toast.warning('Failed to approve/reject')
handleDetailDialog(false, null)
}
}, [])
const columns = useMemo<ColumnDef<any>[]>( const columns = useMemo<ColumnDef<any>[]>(
() => [ () => [
{ {
@ -242,7 +266,8 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
selectedIdCustomer, selectedIdCustomer,
setShowDetailDialog, setShowDetailDialog,
setDetailKyc, setDetailKyc,
detailKyc detailKyc,
handleApproveReject,
}} }}
> >
<Toaster expand visibleToasts={9} duration={3000} /> <Toaster expand visibleToasts={9} duration={3000} />

171
src/pages/members/kyc/Columns.tsx
View File

@ -1,3 +1,4 @@
import { DataGridColumnHeader, KeenIcon } from '@/components';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { import {
DropdownMenu, DropdownMenu,
@ -18,7 +19,7 @@ export type Members = {
created_at: Date; created_at: Date;
}; };
export const columns: ColumnDef<Members>[] = [ export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Members>[] => [
{ {
accessorKey: 'no', accessorKey: 'no',
header: ({ column }) => { header: ({ column }) => {
@ -31,6 +32,14 @@ export const columns: ColumnDef<Members>[] = [
<ArrowUpDown className="ml-2 h-4 w-4" /> <ArrowUpDown className="ml-2 h-4 w-4" />
</Button> </Button>
); );
},
cell: ({ row, table }) => {
const pageIndex = table.getState().pagination.pageIndex;
const pageSize = table.getState().pagination.pageSize;
const rowIndex = row.index;
const number = pageIndex * pageSize + rowIndex + 1;
return number;
} }
}, },
{ {
@ -136,61 +145,117 @@ export const columns: ColumnDef<Members>[] = [
id: 'actions', id: 'actions',
cell: ({ row }) => { cell: ({ row }) => {
const dataMembers = row.original; const dataMembers = row.original;
return ( return (
<DropdownMenu> <button
</DropdownMenu> className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleUpdate(dataMembers)}
>
<KeenIcon icon="notepad-edit" />
</button>
); );
} }
} }
]; ];
export const initialMember = { export type MembersProps = {
id: "", id: string;
fullname: "", fullname: string;
email: "", email: string;
username: "", username: string;
msisdn: "", msisdn: string;
password: "", password: string;
pin: "", pin: string;
try_pin: "", try_pin: string;
mother_fullname: "", mother_fullname: string;
agent_name: "", agent_name: string;
bank_name: "", bank_name: string;
bank_account: "", bank_account: string;
ibank_number: "", ibank_number: string;
address: "", address: string;
longitude: "", longitude: string;
latitude: "", latitude: string;
nationality: "", nationality: string;
photouser: "", photouser: string;
photomerchant: "", photomerchant: string;
file_selfie: "", file_selfie: string;
file_document_id: "", file_document_id: string;
file_document_id_selfie: "", file_document_id_selfie: string;
file_commercial_license: "", file_commercial_license: string;
identity_type: "", identity_type: string;
identity_number: "", identity_number: string;
license_number: "", license_number: string;
date_birth: "", date_birth: string;
gender: "", gender: string;
status: "N", status: string;
isneedapproval: "", isneedapproval: string;
isapproved: "", isapproved: string;
approveddate: "", approveddate: string;
approvedby: "", approvedby: string;
created_by: "", created_by: string;
created_at: "", created_at: string;
updated_by: "", updated_by: string;
updated_at: "", updated_at: string;
deleted_by: "", deleted_by: string;
deleted_at: "", deleted_at: string;
group: "", group: string;
point_tier: "", point_tier: string;
language: "", language: string;
municipio: "", municipio: string;
posto_adms: "", posto_adms: string;
suco: "", suco: string;
aldeia: "", aldeia: string;
profession: "", profession: string;
description: "" description: string;
} };
export const initialMember: MembersProps = {
id: '',
fullname: '',
email: '',
username: '',
msisdn: '',
password: '',
pin: '',
try_pin: '',
mother_fullname: '',
agent_name: '',
bank_name: '',
bank_account: '',
ibank_number: '',
address: '',
longitude: '',
latitude: '',
nationality: '',
photouser: '',
photomerchant: '',
file_selfie: '',
file_document_id: '',
file_document_id_selfie: '',
file_commercial_license: '',
identity_type: '',
identity_number: '',
license_number: '',
date_birth: '',
gender: '',
status: 'N',
isneedapproval: '',
isapproved: '',
approveddate: '',
approvedby: '',
created_by: '',
created_at: '',
updated_by: '',
updated_at: '',
deleted_by: '',
deleted_at: '',
group: '',
point_tier: '',
language: '',
municipio: '',
posto_adms: '',
suco: '',
aldeia: '',
profession: '',
description: ''
};

199
src/pages/members/kyc/Kyc.tsx
View File

@ -1,9 +1,9 @@
import { DataGridInner, TDataGridProps } from '@/components'; import { Container, DataGridInner, DataGridProvider, TDataGridProps } from '@/components';
import { DataTable } from '@/components/ui/DataTable'; import { DataTable } from '@/components/ui/DataTable';
import { Table } from '@tanstack/react-table'; import { Table } from '@tanstack/react-table';
import React, { createContext, useContext, useState, useEffect } from 'react'; import React, { createContext, useContext, useState, useEffect } from 'react';
import { ManageKycContextProvider } from './hooks'; import { ManageKycContextProvider } from './hooks';
import { columns, initialMember } from './Columns'; import { getColumns, initialMember } from './Columns';
import { useAuthContext } from '@/auth'; import { useAuthContext } from '@/auth';
import { LoaderTransparant } from '@/components'; import { LoaderTransparant } from '@/components';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
@ -16,25 +16,7 @@ const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
import DetailMember from '../manage-members/blocks/DetailMember'; import DetailMember from '../manage-members/blocks/DetailMember';
import { Breadcrumbs, Link } from '@mui/material'; import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import { ListToolBar } from './blocks/ListToolBar';
export interface IDataGridContextProps<TData extends object> {
props: TDataGridProps<TData>;
table: Table<TData>;
totalRows: number;
loading: (state: boolean) => void;
reload: () => void;
children?: React.ReactNode;
}
const DataGridContext = createContext<IDataGridContextProps<any> | undefined>(undefined);
export const useDataGrid = () => {
const context = useContext(DataGridContext);
if (!context) {
throw new Error('useDataGrid must be used within a DataGridProvider');
}
return context;
};
const Kyc = () => { const Kyc = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -58,8 +40,8 @@ const Kyc = () => {
limit: 10, limit: 10,
page: 1, page: 1,
with_deleted: false, with_deleted: false,
order_field: 'fullname', order_field: 'created_at',
order_direction: 'ASC', order_direction: 'DESC',
type: 'kyc' type: 'kyc'
} }
}); });
@ -72,14 +54,14 @@ const Kyc = () => {
setMembers(resMembers); setMembers(resMembers);
let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, { let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
params: { params: {
limit: 50, limit: 50,
page: 1, page: 1,
with_deleted: false, with_deleted: false,
order_field: 'name', order_field: 'name',
order_direction: 'ASC', order_direction: 'ASC'
} }
}); });
setProfession(getProfession.data.data.list) setProfession(getProfession.data.data.list);
} catch (error: any) { } catch (error: any) {
toast.error(error.message); toast.error(error.message);
console.log(error); console.log(error);
@ -103,8 +85,12 @@ const Kyc = () => {
setDialogOpen(true); setDialogOpen(true);
} }
const resetForm = () => {
setMember(initialMember);
};
const handleYes = async () => { const handleYes = async () => {
setLoading(true) setLoading(true);
const userLogin: any = await getUser(); const userLogin: any = await getUser();
const updateData: any = member; const updateData: any = member;
const customerId = member.id; const customerId = member.id;
@ -135,7 +121,6 @@ const Kyc = () => {
delete updateData.suco_name; delete updateData.suco_name;
delete updateData.aldeia_id; delete updateData.aldeia_id;
delete updateData.aldeia_name; delete updateData.aldeia_name;
delete updateData.group_id;
delete updateData.group_name; delete updateData.group_name;
delete updateData.group_description; delete updateData.group_description;
delete updateData.group_status; delete updateData.group_status;
@ -152,99 +137,123 @@ const Kyc = () => {
if (updateData[property]) form.append(property, updateData[property]); if (updateData[property]) form.append(property, updateData[property]);
} }
if (dialogType === 'reject') { if (dialogType === 'reject') {
if (destinationGroup === "Premium") await axios.post(`${BASE_URL}/customer/reject`, { customerid: customerId, description: updateData.approval_description_premium }); if (destinationGroup === 'Premium')
if (destinationGroup === "Agent") await axios.post(`${BASE_URL}/customer/reject`, { customerid: customerId, description: updateData.approval_description_agent }); await axios.post(`${BASE_URL}/customer/reject`, {
customerid: customerId,
description: updateData.approval_description_premium
});
if (destinationGroup === 'Agent')
await axios.post(`${BASE_URL}/customer/reject`, {
customerid: customerId,
description: updateData.approval_description_agent
});
} }
if (dialogType === 'update') { if (dialogType === 'update') {
await axios.put(`${BASE_URL}/customer/update/${customerId}`, form); await axios.put(`${BASE_URL}/customer/update/${customerId}`, form);
if (updateData.isneedapproval == 1&&destinationGroup === "Premium") await axios.post(`${BASE_URL}/customer/approve`, { customerid: customerId, description: updateData.approval_description_premium}); if (updateData.isneedapproval == 1 && destinationGroup === 'Premium')
if (updateData.isneedapproval == 1&&destinationGroup === "Agent") await axios.post(`${BASE_URL}/customer/approve`, { customerid: customerId, description: updateData.approval_description_agent}); await axios.post(`${BASE_URL}/customer/approve`, {
customerid: customerId,
description: updateData.approval_description_premium
});
if (updateData.isneedapproval == 1 && destinationGroup === 'Agent')
await axios.post(`${BASE_URL}/customer/approve`, {
customerid: customerId,
description: updateData.approval_description_agent
});
} }
await fetchCustomers();
setDialogOpen(false); setDialogOpen(false);
setIsDialogOpen(false); setIsDialogOpen(false);
toast.success(`Success Update & ${dialogType} Kyc Member`); toast.success(`Success Update & ${dialogType} Kyc Member`);
} catch (error: any) { } catch (error: any) {
if (error?.response?.data?.error) error.message = error?.response?.data?.error;
setDialogOpen(false); setDialogOpen(false);
setIsDialogOpen(false); setIsDialogOpen(false);
toast.error(error.message); toast.error(error.message);
} finally { } finally {
setLoading(false) await fetchCustomers();
setLoading(false);
} }
}; };
function setShowAddDialog(el: any) { function setShowAddDialog(el: any) {
setIsDialogOpen(el) setIsDialogOpen(el);
} }
if (loading) return <LoaderTransparant />; if (loading) return <LoaderTransparant />;
useEffect(() => {
if (!isDialogOpen) resetForm();
}, [isDialogOpen]);
return ( return (
<> <>
<Helmet> <Helmet>
<title>TPAY | KYC</title> <title>TPAY | KYC</title>
</Helmet> </Helmet>
<div> <Container>
<div className="container mx-auto w-full"> <ConfirmDialog
<ConfirmDialog open={dialogOpen}
open={dialogOpen} onClose={() => setDialogOpen(false)}
onClose={() => setDialogOpen(false)} title="Confirm Action"
title="Confirm Action" content={`Are you sure you want to ${dialogType}?`}
content={`Are you sure you want to ${dialogType}?`} onYes={handleYes}
onYes={handleYes} onNo={() => setDialogOpen(false)}
onNo={() => setDialogOpen(false)} />
{member.id ? (
// <CustomerDialog
// open={isDialogOpen}
// handleClose={closeDialog}
// handleSubmit={handleSubmit}
// initialData={member}
// viewStats={true}
// page={'kyc'}
// />
<DetailMember
showAddDialog={isDialogOpen}
setShowAddDialog={setShowAddDialog}
handleClose={closeDialog}
handleReject={handleReject}
handleSubmit={handleSubmit}
initialData={member}
fetchCustomers={fetchCustomers}
profession={profession}
page={'kyc'}
/> />
{ member.id ? ( ) : (
// <CustomerDialog ''
// open={isDialogOpen} )}
// handleClose={closeDialog} <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">KYC Upgrade Members</h1>
// handleSubmit={handleSubmit} <Breadcrumbs>
// initialData={member} <Link underline="none" color="inherit" href="/">
// viewStats={true} <span className="text-sm hover:underline">Dashboard</span>
// page={'kyc'} </Link>
// />
<DetailMember
showAddDialog={isDialogOpen}
setShowAddDialog={setShowAddDialog}
handleClose={closeDialog}
handleReject={handleReject}
handleSubmit={handleSubmit}
initialData={member}
fetchCustomers={fetchCustomers}
profession={profession}
page={'kyc'}
/>
): ""}
<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>
</Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">Members</span> <span className="text-sm">Members</span>
</Link> </Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Member KYC</span>
</Link>
</Breadcrumbs>
</div>
<div className="w-full overflow-x-auto px-4">
<div className="min-w-[800px]">
<DataTable
createData={null}
data={members}
columns={columns}
onUpdate={handleUpdate}
onDelete={null}
/>
</div>
</div>
<Link underline="none" color="inherit">
<span className="text-sm">KYC Upgrade Members</span>
</Link>
</Breadcrumbs>
{/* <div className="w-full overflow-x-auto"> */}
<div className="grid gap-5 lg:gap-7.5 mt-5">
<DataGridProvider
data={members}
columns={getColumns(handleUpdate)}
pagination={{ size: 25 }}
toolbar={<ListToolBar />}
layout={{ card: true }}
sorting={[{ id: 'created_at', desc: true }]}
serverSide={false}
onRowSelectionChange={(selected, table: any) => {
const selectedRow = table.getSelectedRowModel().rows[0];
if (selectedRow) handleUpdate(selectedRow.original);
}}
></DataGridProvider>
</div> </div>
</div> {/* </div> */}
</Container>
</> </>
); );
}; };

14
src/pages/members/kyc/blocks/AddDialog.tsx
View File

@ -1,14 +0,0 @@
import { Dialog } from '@/components/ui/dialog';
import { useRef } from 'react';
import { useKycContext } from '../hooks';
import { useDataGrid } from '@/components';
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { showAddDialog, handleAddDialog } = useKycContext();
const { reload } = useDataGrid();
return <Dialog></Dialog>;
};
export default AddDialog;

1
src/pages/members/kyc/blocks/ListToolBar.tsx
View File

@ -4,7 +4,6 @@ import { useKycContext } from '../hooks';
const ListToolBar = () => { const ListToolBar = () => {
const { table, reload } = useDataGrid(); const { table, reload } = useDataGrid();
const { handleDetailDialog, handleAddDialog } = useKycContext();
return ( return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5"> <div className="card-header flex-wrap gap-2 border-b-0 px-5">

28
src/pages/members/manage-members/Columns.tsx
View File

@ -1,3 +1,4 @@
import { KeenIcon } from '@/components';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { import {
DropdownMenu, DropdownMenu,
@ -18,7 +19,7 @@ export type Members = {
created_at: Date; created_at: Date;
}; };
export const columns: ColumnDef<Members>[] = [ export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Members>[] => [
{ {
accessorKey: 'no', accessorKey: 'no',
header: ({ column }) => { header: ({ column }) => {
@ -110,22 +111,12 @@ export const columns: ColumnDef<Members>[] = [
const dataMembers = row.original; const dataMembers = row.original;
return ( return (
<DropdownMenu> <button
{/* <DropdownMenuTrigger asChild> className="btn btn-sm btn-icon btn-clear btn-light"
<Button variant="ghost" className="h-8 w-8 p-0"> onClick={() => handleUpdate(dataMembers)}
<span className="sr-only">Open menu</span> >
<MoreHorizontal className="h-4 w-4" /> <KeenIcon icon="notepad-edit" />
</Button> </button>
</DropdownMenuTrigger> */}
{/* <DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem
onClick={() => navigator.clipboard.writeText(dataMembers.id.toString())}
>
Copy account ID
</DropdownMenuItem>
</DropdownMenuContent> */}
</DropdownMenu>
); );
} }
} }
@ -180,5 +171,6 @@ export const initialMember = {
aldeia: '', aldeia: '',
profession: '', profession: '',
approval_description_premium: '', approval_description_premium: '',
approval_description_agent: '' approval_description_agent: '',
group_id: ''
}; };

138
src/pages/members/manage-members/ManageMembers.tsx
View File

@ -1,18 +1,20 @@
import { DataTable } from '@/components/ui/DataTable'; import { DataTable } from '@/components/ui/DataTable';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import { columns, Members, initialMember } from './Columns'; import { getColumns, Members, initialMember } from './Columns';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
// import CustomerDialog from './CustomerDetailModal'; // import CustomerDialog from './CustomerDetailModal';
import DetailMember from './blocks/DetailMember'; import DetailMember from './blocks/DetailMember';
import ConfirmDialog from '@/components/confirm'; import ConfirmDialog from '@/components/confirm';
import { useAuthContext } from '@/auth'; import { useAuthContext } from '@/auth';
import { LoaderTransparant } from '@/components'; import { Container, DataGridInner, LoaderTransparant } from '@/components';
import { DataGridProvider } from '@/components';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Breadcrumbs, Link } from '@mui/material'; import { Breadcrumbs, Link } from '@mui/material';
const BASE_URL_MASTER_DATA = apiConfig.service_master_data; const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
const BASE_URL = apiConfig.service_customer; const BASE_URL = apiConfig.service_customer;
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import ListToolbar from './blocks/ListToolBar';
const ManageMembers = () => { const ManageMembers = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [members, setMembers] = useState([]); const [members, setMembers] = useState([]);
@ -23,8 +25,8 @@ const ManageMembers = () => {
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
const [dialogType, setDialogType] = useState(''); const [dialogType, setDialogType] = useState('');
const closeDialog = () => { const closeDialog = () => {
setIsDialogOpen(false) setIsDialogOpen(false);
setMember(initialMember) setMember(initialMember);
}; };
const { getUser } = useAuthContext(); const { getUser } = useAuthContext();
@ -50,7 +52,7 @@ const ManageMembers = () => {
el.no = temp++; el.no = temp++;
if (el.date_birth) { if (el.date_birth) {
const d = new Date(el.date_birth); const d = new Date(el.date_birth);
el.date_birth = d.toLocaleString("sv-SE"); el.date_birth = d.toLocaleString('sv-SE');
} }
el.name = el.fullname; el.name = el.fullname;
return el; return el;
@ -58,14 +60,14 @@ const ManageMembers = () => {
setMembers(resMembers); setMembers(resMembers);
let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, { let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
params: { params: {
limit: 50, limit: 50,
page: 1, page: 1,
with_deleted: false, with_deleted: false,
order_field: 'name', order_field: 'name',
order_direction: 'ASC', order_direction: 'ASC'
} }
}); });
setProfession(getProfession.data.data.list) setProfession(getProfession.data.data.list);
} catch (error: any) { } catch (error: any) {
toast.error(error.message); toast.error(error.message);
console.log(error); console.log(error);
@ -74,14 +76,14 @@ const ManageMembers = () => {
const handleUpdate = (data: any) => { const handleUpdate = (data: any) => {
setDialogType('update'); setDialogType('update');
setSelectedMember(data.id) setSelectedMember(data.id);
setMember(data); setMember(data);
setIsDialogOpen(true); setIsDialogOpen(true);
}; };
function createMember() { function createMember() {
setDialogType('create'); setDialogType('create');
setSelectedMember('') setSelectedMember('');
setMember(initialMember); setMember(initialMember);
setIsDialogOpen(true); setIsDialogOpen(true);
} }
@ -92,7 +94,7 @@ const ManageMembers = () => {
} }
const handleYes = async () => { const handleYes = async () => {
setLoading(true) setLoading(true);
const userLogin: any = await getUser(); const userLogin: any = await getUser();
const updateData: any = member; const updateData: any = member;
updateData.updated_by = userLogin.data ? userLogin.data.id : ''; updateData.updated_by = userLogin.data ? userLogin.data.id : '';
@ -120,7 +122,6 @@ const ManageMembers = () => {
delete updateData.suco_name; delete updateData.suco_name;
delete updateData.aldeia_id; delete updateData.aldeia_id;
delete updateData.aldeia_name; delete updateData.aldeia_name;
delete updateData.group_id;
delete updateData.group_name; delete updateData.group_name;
delete updateData.group_description; delete updateData.group_description;
delete updateData.group_status; delete updateData.group_status;
@ -146,8 +147,8 @@ const ManageMembers = () => {
toast.success('Success Edit Member'); toast.success('Success Edit Member');
} }
if (dialogType === 'create') { if (dialogType === 'create') {
const createMember:any = member const createMember: any = member;
createMember.pin = "admin" createMember.pin = 'admin';
delete createMember.password; delete createMember.password;
delete createMember.try_pin; delete createMember.try_pin;
delete createMember.license_number; delete createMember.license_number;
@ -163,7 +164,7 @@ const ManageMembers = () => {
delete createMember.approval_description_premium; delete createMember.approval_description_premium;
delete createMember.approval_description_agent; delete createMember.approval_description_agent;
delete createMember.language; delete createMember.language;
await axios.post(`${BASE_URL}/customers/create`, member) await axios.post(`${BASE_URL}/customers/create`, member);
toast.success('Success Create Member. PIN sent to email'); toast.success('Success Create Member. PIN sent to email');
} }
} catch (error: any) { } catch (error: any) {
@ -172,12 +173,12 @@ const ManageMembers = () => {
setDialogOpen(false); setDialogOpen(false);
closeDialog(); closeDialog();
await fetchCustomers(); await fetchCustomers();
setLoading(false) setLoading(false);
} }
}; };
function setShowAddDialog(el: any) { function setShowAddDialog(el: any) {
setIsDialogOpen(el) setIsDialogOpen(el);
} }
if (loading) return <LoaderTransparant />; if (loading) return <LoaderTransparant />;
@ -187,56 +188,59 @@ const ManageMembers = () => {
<Helmet> <Helmet>
<title>TPAY | Manage Members</title> <title>TPAY | Manage Members</title>
</Helmet> </Helmet>
<div> <Container>
<div className="container mx-auto w-full"> <ConfirmDialog
<ConfirmDialog open={dialogOpen}
open={dialogOpen} onClose={() => setDialogOpen(false)}
onClose={() => setDialogOpen(false)} title="Confirm Action"
title="Confirm Action" content={`Are you sure you want to ${dialogType}?`}
content={`Are you sure you want to ${dialogType}?`} onYes={handleYes}
onYes={handleYes} onNo={() => setDialogOpen(false)}
onNo={() => setDialogOpen(false)} />
{member.id !== '' || dialogType === 'create' ? (
<DetailMember
showAddDialog={isDialogOpen}
setShowAddDialog={setShowAddDialog}
handleClose={closeDialog}
handleSubmit={handleSubmit}
initialData={member}
fetchCustomers={fetchCustomers}
profession={profession}
dialogType={dialogType}
/> />
{ (member.id!=='' || dialogType==='create') ? ( ) : (
<DetailMember ''
showAddDialog={isDialogOpen} )}
setShowAddDialog={setShowAddDialog} <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Manage Members</h1>
handleClose={closeDialog} <Breadcrumbs>
handleSubmit={handleSubmit} <Link underline="none" color="inherit" href="/">
initialData={member} <span className="text-sm hover:underline">Dashboard</span>
fetchCustomers={fetchCustomers} </Link>
profession={profession} <Link underline="none" color="inherit">
dialogType={dialogType} <span className="text-sm">Members</span>
/> </Link>
): ""}
<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>
<Link underline="none" color="inherit">
<span className="text-sm">Members</span>
</Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">Manage Members</span> <span className="text-sm">Manage Members</span>
</Link> </Link>
</Breadcrumbs> </Breadcrumbs>
</div> {/* <div className="w-full overflow-x-auto px-4"> */}
<div className="w-full overflow-x-auto px-4"> <div className="grid gap-5 lg:gap-7.5 mt-5">
<div className="min-w-[800px]"> <DataGridProvider
<DataTable data={members}
data={members} pagination={{ size: 25 }}
createData={createMember} columns={getColumns(handleUpdate)}
columns={columns} layout={{ card: true }}
onUpdate={handleUpdate} serverSide={false}
onDelete={null} toolbar={<ListToolbar createMember={createMember} />}
/> onRowSelectionChange={(selected, table: any) => {
</div> const selectedRow = table.getSelectedRowModel().rows[0];
</div> if (selectedRow) handleUpdate(selectedRow.original);
}}
></DataGridProvider>
</div> </div>
</div> {/* </div> */}
</Container>
</> </>
); );
}; };

39
src/pages/members/manage-members/blocks/AdmAccess.tsx
View File

@ -21,33 +21,33 @@ import ConfirmDialog from '@/components/confirm';
const BASE_URL_CUSTOMER = apiConfig.service_customer; const BASE_URL_CUSTOMER = apiConfig.service_customer;
// ACCESS ADM // ACCESS ADM
export default function AdmAccess({page,formData,handleClose,fetchCustomers,viewOnly,setViewOnly}: any) { export default function AdmAccess({page,groups,formData,handleClose,fetchCustomers,viewOnly,setViewOnly}: any) {
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
const [dialogType, setDialogType] = useState(''); const [dialogType, setDialogType] = useState('');
const [changeGroup, setChangeGroup] = useState(''); const [changeGroup, setChangeGroup] = useState('');
const [changeGroupD, setChangeGroupD] = useState(false); const [changeGroupD, setChangeGroupD] = useState(false);
const [groups, setGroups] = useState([]); // const [groups, setGroups] = useState([]);
useEffect(() => { useEffect(() => {
fetchGroups(); // fetchGroups();
}, []); }, []);
const fetchGroups = async () => { // const fetchGroups = async () => {
try { // try {
let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, { // let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
params: { // params: {
limit: 50, // limit: 50,
page: 1, // page: 1,
with_deleted: false, // with_deleted: false,
order_field: 'name', // order_field: 'name',
order_direction: 'ASC' // order_direction: 'ASC'
} // }
}); // });
setGroups(getGroups.data.data.list); // setGroups(getGroups.data.data.list);
} catch (error: any) { // } catch (error: any) {
toast.error(error.message); // toast.error(error.message);
} // }
}; // };
const handleYes = async () => { const handleYes = async () => {
try { try {
@ -119,6 +119,7 @@ export default function AdmAccess({page,formData,handleClose,fetchCustomers,view
function btnConfirmDialog(status: boolean) { function btnConfirmDialog(status: boolean) {
setDialogOpen(status); setDialogOpen(status);
} }
if (!formData.id) return ''; if (!formData.id) return '';
if (page !== 'kyc') { if (page !== 'kyc') {
return ( return (

90
src/pages/members/manage-members/blocks/DetailMember.tsx
View File

@ -24,6 +24,7 @@ import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
const BASE_URL_MASTER_DATA = apiConfig.service_master_data; const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
const URL_NATIONALITY = apiConfig.nationality; const URL_NATIONALITY = apiConfig.nationality;
const BASE_URL_CUSTOMER = apiConfig.service_customer;
import { initialMember } from "../Columns"; import { initialMember } from "../Columns";
import AdmAccess from './AdmAccess'; import AdmAccess from './AdmAccess';
import CustomerWallet from './CustomerWallet'; import CustomerWallet from './CustomerWallet';
@ -38,10 +39,8 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
const [aldeias, setAldeias] = useState([]); const [aldeias, setAldeias] = useState([]);
const [postoAdm, setPostoAdm] = useState([]); const [postoAdm, setPostoAdm] = useState([]);
const [sucos, setSucos] = useState<any>([]); const [sucos, setSucos] = useState<any>([]);
const [groups, setGroups] = useState([]);
const [genders] = useState([ { name: 'Male',id: 'M' }, { name: 'Female',id: 'F' }]) const [genders] = useState([ { name: 'Male',id: 'M' }, { name: 'Female',id: 'F' }])
const [status] = useState([
{ name: 'Active',id: 'Y' }, { name: 'Inactive',id: 'N' }, { name: 'Suspend PIN',id: 'P' }, { name: 'Suspend OTP',id: 'O' }
])
const [banks] = useState([ const [banks] = useState([
{ name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'Mandiri',id: 'Mandiri' } { name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'Mandiri',id: 'Mandiri' }
]) ])
@ -53,7 +52,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
useEffect(() => { useEffect(() => {
setFormData(initialData || {}); setFormData(initialData || {});
// fetchMasterData() fetchMasterData()
}, [initialData]); }, [initialData]);
const handleChange = async (e: any) => { const handleChange = async (e: any) => {
@ -66,13 +65,13 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
setNationality(getNationality.data.data) setNationality(getNationality.data.data)
setFormData({ ...formData, [name]: value }); setFormData({ ...formData, [name]: value });
} else { } else {
if (name === 'municipio_id' || name === 'posto_adms_id' || name === 'suco_id') await getMasterAfter(name, value);
setFormData({ ...formData, [name]: value }); setFormData({ ...formData, [name]: value });
if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(name, value);
} }
}; };
async function getMasterAfter(name: string, id: any) { async function getMasterAfter(name: string, id: any) {
if (name === 'municipio') { if (name === 'municipio_id') {
let getMunicipiosPosto = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/postoadms/${id}`, { let getMunicipiosPosto = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/postoadms/${id}`, {
params: { params: {
limit: 50, limit: 50,
@ -84,7 +83,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
}); });
setPostoAdm(getMunicipiosPosto.data.data) setPostoAdm(getMunicipiosPosto.data.data)
} }
if (name === 'posto_adms') { if (name === 'posto_adms_id') {
let getPostoSuco = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/sucos/${id}`, { let getPostoSuco = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/sucos/${id}`, {
params: { params: {
limit: 50, limit: 50,
@ -96,7 +95,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
}); });
setSucos(getPostoSuco.data.data) setSucos(getPostoSuco.data.data)
} }
if (name === 'suco') { if (name === 'suco_id') {
let getSucoAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/aldeias/${id}`, { let getSucoAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/aldeias/${id}`, {
params: { params: {
limit: 50, limit: 50,
@ -121,9 +120,20 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
async function fetchMasterData() { async function fetchMasterData() {
try { try {
let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC'
}
});
setGroups(getGroups.data.data.list);
let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, { let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
params: { params: {
limit: 50, limit: 70,
page: 1, page: 1,
with_deleted: false, with_deleted: false,
order_field: 'name', order_field: 'name',
@ -131,38 +141,13 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
} }
}); });
setMunicipios(getMunicipios.data.data.list) setMunicipios(getMunicipios.data.data.list)
let getPostoAdms = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/list`, { if (formData.municipio_id) await handleChange({target: { name: "municipio_id",value: formData.municipio_id }});
params: { if (formData.posto_adms_id) await handleChange({target: { name: "posto_adms_id",value: formData.posto_adms_id }});
limit: 50, if (formData.suco_id) await handleChange({target: { name: "suco_id",value: formData.suco_id }});
page: 1, if (formData.aldeia_id) await handleChange({target: { name: "aldeia_id",value: formData.aldeia_id }});
with_deleted: false, } catch (error:any) {
order_field: 'name',
order_direction: 'ASC',
}
});
setPostoAdm(getPostoAdms.data.data.list)
let getSucos = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setSucos(getSucos.data.data.list)
let getAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/aldeias/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setAldeias(getAldeias.data.data.list)
} catch (error) {
console.log(error); console.log(error);
toast.error(error.message)
} }
} }
@ -213,20 +198,21 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, groups, 'group_id', 'Group', true, dialogType === "update"||false): ''}
{/* {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''} */}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, dialogType==='create'?false:true): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, dialogType==='create'?false:true): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'Photo', 'photouser'): ''} {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'Photo', 'photouser'): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, genders, 'gender', 'Gender', null, true): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, genders, 'gender', 'Gender', true, false): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, dialogType === "update"||false): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
{/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */} {/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, profession, 'profession', 'Profession', null, false): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, profession, 'profession', 'Profession', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, municipios, 'municipio', 'Municipio', null, false): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, municipios, 'municipio_id', 'Municipio', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, postoAdm, 'posto_adms', 'Posto', 'posto_adms_id', false): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, postoAdm, 'posto_adms_id', 'Posto', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, sucos, 'suco', 'Suco', 'sucos_id', false): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, sucos, 'suco_id', 'Suco', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, aldeias, 'aldeia', 'Aldeia', null, false): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, aldeias, 'aldeia_id', 'Aldeia', false, false): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Nationality', 'nationality', 'text', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Nationality', 'nationality', 'text', true, viewOnly): ''}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"></label> <label className="form-label flex items-center gap-1 max-w-56"></label>
@ -257,7 +243,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
{(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document & Selfie', 'file_document_id_selfie'): ''} {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document & Selfie', 'file_document_id_selfie'): ''}
{(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Commercial License', 'file_commercial_license'): ''} {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Commercial License', 'file_commercial_license'): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, banks, 'bank_name', 'Bank Name', null, false): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, banks, 'bank_name', 'Bank Name', false, false): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Bank Account', 'bank_account', 'text', false, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Bank Account', 'bank_account', 'text', false, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'iBank Number', 'ibank_number', 'text', false, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'iBank Number', 'ibank_number', 'text', false, viewOnly): ''}
@ -265,7 +251,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
{(formData.id&&(!page||formData.destinationGroup === "Agent")) ? generateInput(formData, handleChange, 'Approval Agent Description', 'approval_description_agent', 'text', false, viewOnly): ''} {(formData.id&&(!page||formData.destinationGroup === "Agent")) ? generateInput(formData, handleChange, 'Approval Agent Description', 'approval_description_agent', 'text', false, viewOnly): ''}
{(formData.id && page!=='kyc') ? ( {(formData.id && page!=='kyc') ? (
<AdmAccess page={page}formData={formData}fetchCustomers={fetchCustomers}handleClose={handleClose}viewOnly={viewOnly}setViewOnly={setViewOnly}/> <AdmAccess page={page}groups={groups}formData={formData}fetchCustomers={fetchCustomers}handleClose={handleClose}viewOnly={viewOnly}setViewOnly={setViewOnly}/>
): ""} ): ""}
{(formData.id && page!=='kyc') ? ( {(formData.id && page!=='kyc') ? (
<CustomerWallet customerid={formData.id}/> <CustomerWallet customerid={formData.id}/>
@ -323,14 +309,14 @@ function generateInput(formData:any, handleChange:any, label:string, name:string
} }
// ON DEV (DI SELECT MASI HILANG) // ON DEV (DI SELECT MASI HILANG)
function generateList(formData:any, handleChange: any, list:any, name:string, label: string, difId: any, required: boolean) { function generateList(formData:any, handleChange: any, list:any, name:string, label: string, required: boolean, disabled: boolean) {
return ( return (
<> <>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">{label} <label className="form-label flex items-center gap-1 max-w-56">{label}
<span className="text-red-600">{required?"*":""}</span></label> <span className="text-red-600">{required?"*":""}</span></label>
<Select required={required} value={formData[name]} onValueChange={(e) => (handleChange({ target : { name, value: e }}))}> <Select disabled={disabled} required={required} value={formData[name]} onValueChange={(e) => (handleChange({ target : { name, value: e }}))}>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder={`Select ${label}`} /> <SelectValue placeholder={`Select ${label}`} />
</SelectTrigger> </SelectTrigger>

53
src/pages/members/manage-members/blocks/ListToolBar.tsx Normal file
View File

@ -0,0 +1,53 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
const ListToolbar = ({ createMember }: { createMember: () => void }) => {
const { table, reload } = useDataGrid();
const [ usernameFilter, setUsernameFilter] = useState('');
const [emailFilter, setEmailFilter] = useState('');
const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setUsernameFilter(e.target.value);
table.getColumn('username')?.setFilterValue(e.target.value);
};
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setEmailFilter(e.target.value);
table.getColumn('email')?.setFilterValue(e.target.value);
};
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
<div className="flex justify-between w-full items-center">
<div className="flex gap-3 items-center">
<input
type="text"
placeholder="Search Username"
value={usernameFilter}
onChange={handleUsernameChange}
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}
>
Add Data
</Button>
<DefaultTooltip title={'Refresh'} placement={'top'}>
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
<KeenIcon icon="arrows-circle" />
</Button>
</DefaultTooltip>
</div>
</div>
</div>
</div>
);
};
export default ListToolbar;

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

@ -1,6 +1,6 @@
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import { useRef, useState } from 'react'; import { useRef, useState, useCallback, useEffect } from 'react';
import { Alert, KeenIcon, useDataGrid } from '@/components'; import { Alert, useDataGrid } from '@/components';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { import {
Dialog, Dialog,
@ -10,134 +10,322 @@ import {
DialogHeader, DialogHeader,
DialogTitle DialogTitle
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@/components/ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { toast } from 'sonner';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { useManageNotificationContext } from '../hooks/useManageNotificationContext'; import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { CustomerProps } from '@/pages/master/provider/blocks/AddDialog';
import { ChevronDown } from 'lucide-react';
const API_URL = apiConfig.service_dashboard; const API_URL_CUSTOMER = apiConfig.service_customer;
const API_URL_NOTIFICATION = apiConfig.service_notification;
const AddDialog = () => { const AddDialog = () => {
const parentRef = useRef<any | null>(null); const parentRef = useRef<any | null>(null);
const { const { handleAddDialog, showAddDialog } = useManageNotificationContext();
handleAddDialog,
handleEditDialog,
showAddDialog,
showEditDialog,
selectedNotification,
notifications
} = useManageNotificationContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { PostData, PutData } = useCallApi(); const { GetData, PostData } = useCallApi();
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({ show: false, message: '' });
show: false,
message: ''
});
const initialState = { const initialState = {
name: '', customers: [],
destination_module: '' type: '',
via: '',
subject: '',
content: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [open, setOpen] = useState(false);
const [customers, setCustomers] = useState<CustomerProps[]>([]);
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' });
}; };
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFormField({ ...formField, [e.target.name]: e.target.value });
};
const doCreateNotification = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PostData(`${API_URL_NOTIFICATION}/send`, formField);
console.log('API Response :', response);
if (response?.status) {
handleAddDialog(false);
resetForm();
reload();
toast.success('Notification Send Successfully!');
const createActivity = {
module: 'Manage Notification',
description: `Send New Notification => ${formField.via}`,
action: 'C'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed to create notification');
setAlert({ show: true, message: 'Failed to create notification. Please Try Again.' });
}
};
// const getCustomerList = async (sorting: any) => {
// try {
// sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
// const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
// limit: 100,
// page: 1,
// with_deleted: false,
// order_field: sorting[0].id,
// order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
// });
// setCustomers(response?.data.list);
// } catch (error) {
// console.error('Error fetching customer', error);
// }
// };
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (formField.name === '' || formField.destination_module === '') { if (
setAlert({ show: true, message: 'Please fill in all required fields.' }); formField.type.trim() === '' ||
formField.via.trim() === '' ||
formField.subject.trim() === '' ||
formField.content.trim() === ''
) {
setAlert({ show: true, message: 'Please fill all required fields.' });
return; return;
} }
console.log(formField);
doCreateNotification(e);
// console.log(formField);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
const handleReset = () => { // useEffect(() => {
setFormField(initialState); // getCustomerList([{ id: 'id', desc: false }]);
}; // }, []);
useEffect(() => {
if (showAddDialog === false) {
resetForm();
}
}, [showAddDialog]);
return ( return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}> <Dialog open={showAddDialog} onOpenChange={handleAddDialog}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden"> <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
<DialogTitle></DialogTitle> <DialogHeader>
<DialogDescription></DialogDescription> <DialogTitle>Notification - Create</DialogTitle>
<DialogHeader className="p-5 border-0"> <DialogDescription></DialogDescription>
<div className="flex items-center justify-between flex-wrap grow">
<div className="flex flex-col justify-center">
<h1 className="text-xl font-semibold leading-none text-gray-900">
Create Notification
</h1>
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
</div>
<div
className="cursor-pointer hover:opacity-100 opacity-50"
onClick={() => {
handleAddDialog(false);
resetForm();
}}
>
<KeenIcon icon="cross" className="text-1.5xl" />
</div>
</div>
</DialogHeader> </DialogHeader>
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}> <DialogBody className="scrollable">
<div className="flex flex-col px-0"> <form onSubmit={handleSubmit} className="space-y-6">
{alert.show && ( {alert.show && (
<Alert variant="danger" className="mb-5"> <Alert variant="danger">
{alert.message} <h3>{alert.message}</h3>
</Alert> </Alert>
)} )}
<form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
</div>
</div>
<div className="w-full"> {/* <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Destination Module<span className="text-red-500">*</span> Send To<span className="text-red-500">*</span>
</label> </label>
<Input <div className="flex gap-6 items-center">
className="input" <label className="flex items-center space-x-2">
type="text" <input
autoComplete="off" type="radio"
value={formField.destination_module} name="sendTo"
onChange={({ target }) => value="all"
setFormField((prev) => ({ ...prev, destination_module: target.value })) checked={formField.sendTo === 'all'}
} onChange={handleChange}
className="accent-blue-600"
/> />
</div> <span>All Users</span>
</div> </label>
<label className="flex items-center space-x-2">
<div className="flex justify-end pt-2.5 gap-5"> <input
<Button variant={'outline'} type="reset" onClick={handleReset}> type="radio"
Reset name="sendTo"
</Button> value="selected"
<Button variant={'default'} type="submit"> checked={formField.sendTo === 'selected'}
Save Changes onChange={handleChange}
</Button> className="accent-blue-600"
/>
<span>Selected Customers</span>
</label>
</div> </div>
</div> </div>
</form> </div> */}
</div>
{/* <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Customer</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left flex justify-between"
style={{ color: 'inherit' }}
>
<span>
{customers.find((customer) => customer.id === formField.customers)
?.username || 'Select Customer'}
</span>
<ChevronDown className="w-4 h-4 opacity-70" />
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Customer..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Customer found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
customers: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div> */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span>
</label>
<div className="flex gap-6 items-center">
{['info', 'promo'].map((type) => (
<label key={type} className="flex items-center space-x-2">
<input
type="radio"
name="type"
value={type}
checked={formField.type === type}
onChange={handleChange}
className="accent-blue-600"
/>
<span>{type.charAt(0).toUpperCase() + type.slice(1)}</span>
</label>
))}
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Send Via<span className="text-red-500">*</span>
</label>
<div className="flex gap-6 items-center">
<label className="flex items-center space-x-2">
<input
type="radio"
name="via"
value="fcm"
checked={formField.via === 'fcm'}
onChange={handleChange}
className="accent-blue-600"
/>
<span>FCM</span>
</label>
<label className="flex items-center space-x-2">
<input
type="radio"
name="via"
value="sms"
checked={formField.via === 'sms'}
onChange={handleChange}
className="accent-blue-600"
/>
<span>SMS</span>
</label>
<label className="flex items-center space-x-2">
<input
type="radio"
name="via"
value="email"
checked={formField.via === 'email'}
onChange={handleChange}
className="accent-blue-600"
/>
<span>E-Mail</span>
</label>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Subject</label>
<Input
className="input col-span-6"
name="subject"
placeholder="Enter Subject"
value={formField.subject}
onChange={handleChange}
disabled={formField.via !== 'email'}
/>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Content<span className="text-red-500">*</span>
</label>
<Textarea
className="input col-span-6"
name="content"
placeholder="Enter Content Notification"
value={formField.content}
onChange={handleChange}
/>
</div>
</div>
<div className="flex justify-end gap-4">
<Button type="reset" variant="outline" onClick={() => setFormField(initialState)}>
Reset
</Button>
<Button type="submit">Create Notification</Button>
</div>
</form>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

14
src/pages/notification/blocks/ListToolbar.tsx
View File

@ -16,13 +16,11 @@ const ListToolBar = () => {
<input <input
type="text" type="text"
placeholder="Search users" placeholder="Search users"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''} value={(table.getColumn('content')?.getFilterValue() as string) ?? ''}
onChange={(event) => onChange={(event) => table.getColumn('content')?.setFilterValue(event.target.value)}
table.getColumn('name')?.setFilterValue(event.target.value)
}
/> />
</label> </label>
<DefaultTooltip title={'Filter'} placement={'top'}> {/* <DefaultTooltip title={'Filter'} placement={'top'}>
<Button <Button
variant="outline" variant="outline"
className="h-7.5 disabled:bg-gray-400" className="h-7.5 disabled:bg-gray-400"
@ -30,9 +28,9 @@ const ListToolBar = () => {
// onClick={handleFilterData} // onClick={handleFilterData}
> >
{/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */} {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
<KeenIcon icon="filter" /> {/* <KeenIcon icon="filter" /> */}
</Button> {/* </Button>
</DefaultTooltip> </DefaultTooltip> */}
</div> </div>
<div className="flex gap-3 items-center"> <div className="flex gap-3 items-center">
<Button <Button

165
src/pages/notification/hooks/ManageNotificationContext.tsx
View File

@ -1,48 +1,50 @@
import { DataGridColumnHeader, DataGridProvider } from '@/components'; import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner'; import { Toaster } from '@/components/ui/sonner';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table'; import { ColumnDef } from '@tanstack/react-table';
import React, { createContext, useCallback, useMemo, useState } from 'react'; import React, { createContext, useCallback, useMemo, useState } from 'react';
import { ListToolBar } from '../blocks/ListToolbar'; import { ListToolBar } from '../blocks/ListToolbar';
import { useCallApi } from '@/hooks';
interface ContextProps { import moment from 'moment';
showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_user: string | null) => void;
showAddDialog: boolean;
handleAddDialog: (show: boolean) => void;
selectedNotification: string | null;
notifications: NotificationProps[];
}
interface SelectedNotification { interface SelectedNotification {
id: string; id: string;
name: string; content: string;
destination_module: string; subject: string;
type: string;
via: string;
created_at: string;
} }
interface NotificationProps { interface ContextProps {
id: string; showAddDialog: boolean;
name: string; handleAddDialog: (show: boolean) => void;
destination_module: string; showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_notification: string | null) => void;
showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_notification: string | null) => void;
selectedNotification: string | null;
} }
const initialProps: ContextProps = { const initialProps: ContextProps = {
showEditDialog: false,
showAddDialog: false, showAddDialog: false,
handleAddDialog: (show: boolean) => {},
showEditDialog: false,
handleEditDialog: () => {}, handleEditDialog: () => {},
handleAddDialog: () => {}, showDeleteDialog: false,
selectedNotification: null, handleDeleteDialog: () => {},
notifications: [] selectedNotification: null
}; };
const ManageNotifContext = createContext<ContextProps>(initialProps); const ManageNotifContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.service_dashboard; const API_URL_NOTIFICATION = apiConfig.service_notification;
const ManageNotifContextProvider = ({ children }: { children: React.ReactNode }) => { const ManageNotifContextProvider = ({ children }: { children: React.ReactNode }) => {
const [showEditDialog, setShowEditDialog] = useState(false); const [showEditDialog, setShowEditDialog] = useState(false);
const [showAddDialog, setShowAddDialog] = useState(false); const [showAddDialog, setShowAddDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [selectedNotification, setSelectedNotification] = useState<string | null>(null); const [selectedNotification, setSelectedNotification] = useState<string | null>(null);
const [notifications, setNotifications] = useState<NotificationProps[]>([]); const { GetData } = useCallApi();
const handleAddDialog = useCallback((show: boolean) => { const handleAddDialog = useCallback((show: boolean) => {
setShowAddDialog(show); setShowAddDialog(show);
@ -53,59 +55,104 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
setShowEditDialog(show); setShowEditDialog(show);
}, []); }, []);
const handleDeleteDialog = useCallback((show: boolean, selected_notification: string | null) => {
setSelectedNotification(show ? selected_notification : null);
setShowDeleteDialog(show);
}, []);
const columns = useMemo<ColumnDef<any>[]>( const columns = useMemo<ColumnDef<any>[]>(
() => [ () => [
{ {
accessorFn: (row) => row.id, accessorFn: (row) => row.content,
id: 'id', id: 'content',
header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Content" column={column} />,
enableSorting: true, enableSorting: true,
enableHiding: false, enableHiding: false,
meta: { meta: {
headerClassName: 'w-[100px]' headerClassName: 'w-[300px]'
} }
}, },
{ {
accessorFn: (row) => row.name, accessorFn: (row) => row.subject,
id: 'name', id: 'subject',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Subject" column={column} />,
enableSorting: true, enableSorting: true,
enableHiding: false enableHiding: false
}, },
{ {
accessorFn: (row) => row.destination_module, accessorFn: (row) => row.type,
id: 'destination_module', id: 'type',
header: ({ column }) => <DataGridColumnHeader title="Destination Module" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Type" column={column} />,
enableSorting: true, enableSorting: true,
enableHiding: false enableHiding: false
}, },
{ {
id: 'actions', accessorFn: (row) => row.via,
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />, id: 'via',
meta: { header: ({ column }) => <DataGridColumnHeader title="Via" column={column} />,
headerClassName: 'w-[100px]', enableSorting: true,
cellClassName: 'text-center' enableHiding: false
}, },
cell: (data: any) => { {
const row = data.row.original; accessorFn: (row) => row.created_at,
id: 'created_at',
return ( header: ({ column }) => <DataGridColumnHeader title="Date Create" column={column} />,
<div className="flex justify-center gap-2"> enableSorting: true,
<button enableHiding: false,
type="button" cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
className="flex items-center justify-center gap-2 text-sm font-medium leading-6 text-primary"
onClick={() => handleEditDialog(true, row.id)}
>
<span>Edit</span>
</button>
</div>
);
}
} }
// {
// id: 'actions',
// header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
// meta: {
// headerClassName: 'w-[100px]',
// cellClassName: 'text-center'
// },
// cell: (data: any) => {
// const row = data.row.original;
// return (
// <>
// <button
// className="btn btn-sm btn-icon btn-clear btn-light"
// onClick={() => handleEditDialog(true, row.id)}
// >
// <KeenIcon icon="notepad-edit" />
// </button>
// <button
// className="btn btn-sm btn-icon btn-clear btn-light"
// onClick={() => handleDeleteDialog(true, row.id)}
// >
// <KeenIcon icon="trash" />
// </button>
// </>
// );
// }
// }
], ],
[handleEditDialog, handleAddDialog] [handleEditDialog, handleDeleteDialog]
); );
const getNotificationList = async (page: number, limit: number, sorting: any, filter: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'content', desc: false }] : sorting;
filter =
filter.length == 0 ? {} : { content: { like: `%${filter[0].value?.toLowerCase()}%` } };
const response = await GetData(`${API_URL_NOTIFICATION}/list`, {
limit: 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('API Response notif: ', response);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {
console.error('Error fetching notification', error);
}
};
return ( return (
<div> <div>
<ManageNotifContext.Provider <ManageNotifContext.Provider
@ -114,8 +161,9 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
showAddDialog, showAddDialog,
handleEditDialog, handleEditDialog,
showEditDialog, showEditDialog,
selectedNotification, handleDeleteDialog,
notifications showDeleteDialog,
selectedNotification
}} }}
> >
<Toaster expand visibleToasts={9} duration={3000} /> <Toaster expand visibleToasts={9} duration={3000} />
@ -125,8 +173,11 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
pagination={{ size: 10 }} pagination={{ size: 10 }}
toolbar={<ListToolBar />} toolbar={<ListToolBar />}
layout={{ card: true }} layout={{ card: true }}
sorting={[{ id: 'username', desc: false }]} sorting={[{ id: 'content', desc: false }]}
serverSide={true} serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getNotificationList(pageIndex, pageSize, sorting, columnFilters)
}
> >
{children} {children}
</DataGridProvider> </DataGridProvider>

2
src/pages/settings/user/manage-user/blocks/EditDialog.tsx
View File

@ -153,7 +153,7 @@ const EditDialog = () => {
email: response.data.email, email: response.data.email,
id_role: response.data.idRole, id_role: response.data.idRole,
status: response.data.status, status: response.data.status,
customerid: response.data.customer.id customerid: response.data.customerid?.id || ''
})); }));
// console.log('Customer ID from API:', response?.data.customerid); // console.log('Customer ID from API:', response?.data.customerid);
} else { } else {

8
src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
View File

@ -30,7 +30,7 @@ const DetailApprovalTransaction = () => {
const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, { const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
id: selectedTransactionId id: selectedTransactionId
}); });
// console.log(response?.data); console.log(response?.data);
setTransactionDetails(response?.data); setTransactionDetails(response?.data);
} catch (error) { } catch (error) {
console.error('Error fetching transaction', error); console.error('Error fetching transaction', error);
@ -190,7 +190,7 @@ const DetailApprovalTransaction = () => {
</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>
@ -346,9 +346,11 @@ const DetailApprovalTransaction = () => {
<p className="text-sm text-gray-500">Description</p> <p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.description}</p> <p className="font-medium">{transactionDetails?.description}</p>
</div> </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> <div>
<p className="text-sm text-gray-500">Reference</p> <p className="text-sm text-gray-500">Reference</p>

75
src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
View File

@ -42,39 +42,58 @@ const ListToolbar = () => {
return ( return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5"> <div className="card-header flex-wrap gap-2 border-b-0 px-5">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full"> <div className="flex flex-wrap gap-2 lg:gap-5 w-full justify-between items-center">
<div className="flex justify-between w-full items-center"> <div className="flex gap-3 items-center w-full md:w-auto">
<div className="flex w-[50%] gap-3 items-center"> <label className="input input-sm w-[160px]">
<label className="input input-sm w-1/3"> From
From <input
<input type="date"
type="date" placeholder="From"
placeholder="From" value={trxDate.from}
value={trxDate.from} onChange={(event) =>
onChange={(event) => settrxDate({ ...trxDate, from: event.target.value })
settrxDate({ ...trxDate, from: event.target.value }) }
} name="from"
name="from" />
/> </label>
</label>
<label className="input input-sm w-1/3"> <label className="input input-sm w-[160px]">
To To
<input <input
type="date" type="date"
placeholder="To" placeholder="To"
value={trxDate.to} value={trxDate.to}
onChange={(event) => onChange={(event) =>
settrxDate({ ...trxDate, to: event.target.value }) settrxDate({ ...trxDate, to: event.target.value })
} }
name="to" name="to"
/> />
</label> </label>
</div> </div>
<div className="ml-auto">
<DefaultTooltip title={'Refresh'} placement={'top'}>
<Button
variant="outline"
className="h-7.5"
onClick={() => {
const today = new Date();
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
settrxDate({
from: formatDate(firstDayOfMonth),
to: formatDate(today),
});
reload();
}}
>
<KeenIcon icon="arrows-circle" />
</Button>
</DefaultTooltip>
</div> </div>
</div> </div>
</div> </div>
); );
}; };
export default ListToolbar; export default ListToolbar;

4
src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
View File

@ -189,7 +189,7 @@ const DetailTransaction = () => {
</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>
@ -347,7 +347,7 @@ const DetailTransaction = () => {
</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> <p className="text-sm text-gray-500">Reference</p>

74
src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
View File

@ -42,35 +42,53 @@ const ListToolbar = () => {
return ( return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5"> <div className="card-header flex-wrap gap-2 border-b-0 px-5">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full"> <div className="flex flex-wrap gap-2 lg:gap-5 w-full justify-between items-center">
<div className="flex justify-between w-full items-center"> <div className="flex gap-3 items-center w-full md:w-auto">
<div className="flex w-[50%] gap-3 items-center"> <label className="input input-sm w-[160px]">
<label className="input input-sm w-1/3"> From
From <input
<input type="date"
type="date" placeholder="From"
placeholder="From" value={trxDate.from}
value={trxDate.from} onChange={(event) =>
onChange={(event) => settrxDate({ ...trxDate, from: event.target.value })
settrxDate({ ...trxDate, from: event.target.value }) }
} name="from"
name="from" />
/> </label>
</label>
<label className="input input-sm w-1/3"> <label className="input input-sm w-[160px]">
To To
<input <input
type="date" type="date"
placeholder="To" placeholder="To"
value={trxDate.to} value={trxDate.to}
onChange={(event) => onChange={(event) =>
settrxDate({ ...trxDate, to: event.target.value }) settrxDate({ ...trxDate, to: event.target.value })
} }
name="to" name="to"
/> />
</label> </label>
</div> </div>
<div className="ml-auto">
<DefaultTooltip title={'Refresh'} placement={'top'}>
<Button
variant="outline"
className="h-7.5"
onClick={() => {
const today = new Date();
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
settrxDate({
from: formatDate(firstDayOfMonth),
to: formatDate(today),
});
reload();
}}
>
<KeenIcon icon="arrows-circle" />
</Button>
</DefaultTooltip>
</div> </div>
</div> </div>
</div> </div>

83
src/pages/transfer/transferfee/blocks/AddDialog.tsx
View File

@ -70,6 +70,8 @@ const AddFeeDialog = () => {
selectedTransferFee, selectedTransferFee,
transactionTypeId transactionTypeId
} = useManageTransferFeeContext(); } = useManageTransferFeeContext();
const [customerSearchTerm, setCustomerSearchTerm] = useState('');
const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
@ -111,6 +113,7 @@ const AddFeeDialog = () => {
credit_destination_account: '' credit_destination_account: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const resetForm = () => { const resetForm = () => {
@ -151,6 +154,13 @@ const AddFeeDialog = () => {
} }
}, [showAddFeeDialog, transactionTypeId, GetData]); }, [showAddFeeDialog, transactionTypeId, GetData]);
useEffect(() => {
if (!showAddFeeDialog) {
setCustomerSearchTerm('');
setOpen(false);
}
}, [showAddFeeDialog]);
useEffect(() => { useEffect(() => {
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@ -619,13 +629,72 @@ const AddFeeDialog = () => {
<label className="form-label"> <label className="form-label">
Credit Destination <span className="text-red-500">*</span> Credit Destination <span className="text-red-500">*</span>
</label> </label>
{renderSelectWithLoading( <div className="relative">
formField.credit_destination, <div
(value) => setFormField({ ...formField, credit_destination: value }), className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
customersWithNames, onClick={() => setOpen(!open)}
'Select Customer', >
isLoadingCustomers <span className="truncate">
)} {customers.find(
(customer) => customer.id === formField.credit_destination
)?.username || 'Search customer...'}
</span>
<path d="m6 9 6 6 6-6"></path>
</div>
{open && (
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
<div className="sticky top-0 bg-white p-2 border-b">
<Input
className="h-8 text-sm"
type="text"
placeholder="Search customer..."
value={customerSearchTerm}
onChange={(e) => setCustomerSearchTerm(e.target.value)}
autoComplete="off"
onClick={(e) => e.stopPropagation()}
autoFocus
/>
</div>
<div>
{customers
.filter(
(customer) =>
customer.username
.toLowerCase()
.includes(customerSearchTerm.toLowerCase()) ||
customer.msisdn.includes(customerSearchTerm)
)
.map((customer) => (
<div
key={customer.id}
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
onClick={() => {
setFormField({
...formField,
credit_destination: customer.id
});
setOpen(false);
}}
>
{customer.username}
</div>
))}
{customers.filter(
(customer) =>
customer.username
.toLowerCase()
.includes(customerSearchTerm.toLowerCase()) ||
customer.msisdn.includes(customerSearchTerm)
).length === 0 && (
<div className="px-3 py-2 text-sm text-gray-500">
No customer found
</div>
)}
</div>
</div>
)}
</div>
</div> </div>
)} )}
<div className="w-full"> <div className="w-full">

820
src/pages/transfer/transferfee/blocks/EditDialog.tsx
View File

@ -7,15 +7,6 @@ import {
SelectTrigger, SelectTrigger,
SelectValue SelectValue
} from '@/components/ui/select'; } from '@/components/ui/select';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@/components/ui/command';
import { import {
Dialog, Dialog,
DialogBody, DialogBody,
@ -33,6 +24,8 @@ import { toast } from 'sonner';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import { getAuth } from '@/auth'; import { getAuth } from '@/auth';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
const API_URL = apiConfig.service_transaction; const API_URL = apiConfig.service_transaction;
const API_URL_MASTER_DATA = apiConfig.service_master_data; const API_URL_MASTER_DATA = apiConfig.service_master_data;
@ -41,14 +34,12 @@ const API_URL_CUSTOMER = apiConfig.service_customer;
interface WalletProps { interface WalletProps {
id: string; id: string;
name: string; name: string;
description?: string;
} }
interface CustomerProps { interface CustomerProps {
id: string; id: string;
username: string; username: string;
msisdn: string; msisdn: string;
fullname?: string;
} }
interface TransactionTypeProps { interface TransactionTypeProps {
@ -61,18 +52,31 @@ const EditFeeDialog = () => {
const { showEditFeeDialog, handleEditFeeDialog, selectedTransferFee } = const { showEditFeeDialog, handleEditFeeDialog, selectedTransferFee } =
useManageTransferFeeContext(); useManageTransferFeeContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const [wallets, setWallets] = useState<WalletProps[]>([]);
const { GetData, PutData } = useCallApi(); const { GetData, PutData } = useCallApi();
const [isSubmitting, setIsSubmitting] = useState(false);
const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [wallets, setWallets] = useState<WalletProps[]>([]);
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
const [transactionTypeName, setTransactionTypeName] = useState('');
const customersWithNames = customers.map((customer) => ({
id: customer.id,
name: customer.username
}));
const [customerSearchTerm, setCustomerSearchTerm] = useState('');
const [showCustomerSearch, setShowCustomerSearch] = useState(false);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
}); });
const [isLoadingTransferFee, setIsLoadingTransferFee] = useState(false);
const [isLoadingTransactionType, setIsLoadingTransactionType] = useState(false);
const [isLoadingWallets, setIsLoadingWallets] = useState(false);
const [isLoadingCustomers, setIsLoadingCustomers] = useState(false);
const initialState = { const initialState = {
name: '', name: '',
description: '', description: '',
@ -109,7 +113,7 @@ const EditFeeDialog = () => {
updated_at: formattedTime updated_at: formattedTime
})); }));
} }
}, [showEditFeeDialog]); }, [showEditFeeDialog, parsedUser?.username]);
const resetForm = () => { const resetForm = () => {
if (selectedTransferFee) { if (selectedTransferFee) {
@ -178,10 +182,11 @@ const EditFeeDialog = () => {
reload(); reload();
handleEditFeeDialog(false, null); handleEditFeeDialog(false, null);
const createActivity = { const createActivity = {
module: 'Manage Transfer Type', module: 'Manage Transfer Fee',
description: `Edit Transfer Type => ${selectedTransferFee}`, description: `Edit Transfer Fee => ${formField.name}`,
action: 'U' action: 'U'
}; };
doSaveLogActivity(createActivity);
} else { } else {
setAlert({ show: true, message: response?.message || 'Failed to update transfer fee' }); setAlert({ show: true, message: response?.message || 'Failed to update transfer fee' });
} }
@ -196,6 +201,7 @@ const EditFeeDialog = () => {
); );
const fetchWallets = useCallback(async () => { const fetchWallets = useCallback(async () => {
setIsLoadingWallets(true);
const params = { const params = {
limit: 100, limit: 100,
page: 1, page: 1,
@ -213,6 +219,8 @@ const EditFeeDialog = () => {
} catch (error) { } catch (error) {
console.error('Error fetching wallets', error); console.error('Error fetching wallets', error);
setWallets([]); setWallets([]);
} finally {
setIsLoadingWallets(false);
} }
}, [GetData]); }, [GetData]);
@ -225,6 +233,7 @@ const EditFeeDialog = () => {
if (!showEditFeeDialog) return; if (!showEditFeeDialog) return;
const getCustomerList = async (sorting: any) => { const getCustomerList = async (sorting: any) => {
setIsLoadingCustomers(true);
try { try {
sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting; sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, { const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
@ -237,16 +246,19 @@ const EditFeeDialog = () => {
setCustomers(response?.data.list || []); setCustomers(response?.data.list || []);
} catch (error) { } catch (error) {
console.error('Error fetching customers', error); console.error('Error fetching customers', error);
} finally {
setIsLoadingCustomers(false);
} }
}; };
getCustomerList([{ id: 'msisdn', desc: false }]); getCustomerList([{ id: 'id', desc: false }]);
}, [showEditFeeDialog, GetData]); }, [showEditFeeDialog, GetData]);
useEffect(() => { useEffect(() => {
if (!showEditFeeDialog) return; if (!showEditFeeDialog) return;
const getTransactionTypeList = async (sorting: any) => { const getTransactionTypeList = async (sorting: any) => {
setIsLoadingTransactionType(true);
try { try {
sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting; sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL}/transactiontype/list`, { const response = await GetData(`${API_URL}/transactiontype/list`, {
@ -259,6 +271,8 @@ const EditFeeDialog = () => {
setTransactionTypes(response?.data.list || []); setTransactionTypes(response?.data.list || []);
} catch (error) { } catch (error) {
console.error('Error fetching transaction types', error); console.error('Error fetching transaction types', error);
} finally {
setIsLoadingTransactionType(false);
} }
}; };
@ -272,6 +286,7 @@ const EditFeeDialog = () => {
const fetchTransactionFee = useCallback( const fetchTransactionFee = useCallback(
async (id: string) => { async (id: string) => {
setIsLoadingTransferFee(true);
try { try {
const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, {}); const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, {});
@ -300,10 +315,16 @@ const EditFeeDialog = () => {
updated_by: parsedUser?.username, updated_by: parsedUser?.username,
updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ') updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
}); });
if (response.data.transaction_type?.name) {
setTransactionTypeName(response.data.transaction_type.name);
}
} }
} catch (error) { } catch (error) {
console.error('Error fetching transaction fee details', error); console.error('Error fetching transaction fee details', error);
setAlert({ show: true, message: 'Failed to fetch transaction fee details' }); setAlert({ show: true, message: 'Failed to fetch transaction fee details' });
} finally {
setIsLoadingTransferFee(false);
} }
}, },
[GetData, parsedUser?.username] [GetData, parsedUser?.username]
@ -321,12 +342,49 @@ const EditFeeDialog = () => {
hasFetchedRef.current = false; hasFetchedRef.current = false;
} }
}, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]); }, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
const handleCloseDialog = () => { const handleCloseDialog = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
setCustomerSearchTerm('');
setOpen(false);
handleEditFeeDialog(false, null); handleEditFeeDialog(false, null);
}; };
useEffect(() => {
if (!showEditFeeDialog) {
setCustomerSearchTerm('');
setOpen(false);
}
}, [showEditFeeDialog]);
const renderSelectWithLoading = (
value: string,
onChangeHandler: (value: string) => void,
options: { id: string; name: string }[] | null,
placeholder: string,
isLoading: boolean
) => {
return (
<Select value={value} onValueChange={onChangeHandler} disabled={isLoading}>
<SelectTrigger>
{isLoading ? (
<div className="flex items-center">
<div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div>
<span className="ml-2">Loading...</span>
</div>
) : (
<SelectValue placeholder={placeholder} />
)}
</SelectTrigger>
<SelectContent>
{options &&
options.map((option) => (
<SelectItem value={option.id} key={option.id}>
{option.name}
</SelectItem>
))}
</SelectContent>
</Select>
);
};
return ( return (
<Dialog <Dialog
@ -364,363 +422,421 @@ const EditFeeDialog = () => {
</div> </div>
)} )}
<form action="" onSubmit={doUpdateTransferFee}> {isLoadingTransferFee ? (
<div className="card flex flex-col gap-5"> <div className="flex flex-col items-center justify-center p-8">
<div className="card-body grid gap-5 p-0"> <div className="animate-pulse flex space-x-4 w-full">
<div className="w-full"> <div className="flex-1 space-y-4 py-1">
<label className="form-label"> <div className="h-4 bg-gray-200 rounded w-3/4"></div>
Transfer Fee Name <span className="text-red-500">*</span> <div className="space-y-2">
</label> <div className="h-4 bg-gray-200 rounded"></div>
<Input <div className="h-4 bg-gray-200 rounded w-5/6"></div>
className="input" </div>
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
</div> </div>
</div>
<div className="w-full"> <p className="mt-4 text-gray-500">Loading transfer fee details...</p>
<label className="form-label"> </div>
Description <span className="text-red-500">*</span> ) : (
</label> <form action="" onSubmit={doUpdateTransferFee}>
<Input <div className="card flex flex-col gap-5">
className="input" <div className="card-body grid gap-5 p-0">
type="text"
autoComplete="off"
value={formField.description}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, description: target.value }))
}
/>
</div>
<div className="w-full">
<label className="form-label">Minimum Amount</label>
<NumericFormat
className="input"
value={formField.minimum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
minimum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Minimum Amount"
/>
</div>
<div className="w-full">
<label className="form-label">Maximum Amount</label>
<NumericFormat
className="input"
value={formField.maximum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
maximum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Maximum Amount"
/>
</div>
<div className="w-full">
<label className="form-label">
Period Start <span className="text-red-500">*</span>
</label>
<Input
className="input"
type="date"
autoComplete="off"
value={formField.period_start}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, period_start: target.value }))
}
/>
</div>
<div className="w-full">
<label className="form-label">
Period End <span className="text-red-500">*</span>
</label>
<Input
className="input"
type="date"
autoComplete="off"
value={formField.period_end}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, period_end: target.value }))
}
/>
</div>
<div className="w-full">
<label className="form-label">Deduct Amount</label>
<NumericFormat
className="input"
value={formField.deduct_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
deduct_amount: values.floatValue || 0
}));
}}
placeholder="Enter Deduct Amount"
/>
</div>
<div className="w-full">
<label className="form-label">Deduct Percentage</label>
<NumericFormat
className="input"
value={formField.deduct_percentage}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
deduct_percentage: values.floatValue || 0
}));
}}
placeholder="Enter Deduct Percentage"
/>
</div>
<div className="w-full">
<label className="form-label">Fee Amount</label>
<NumericFormat
className="input"
value={formField.fee_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
fee_amount: values.floatValue || 0
}));
}}
placeholder="Enter Fee Amount"
/>
</div>
<div className="w-full">
<label className="form-label">
Deduct From <span className="text-red-500">*</span>
</label>
<Select
value={formField.deduct_from}
onValueChange={(value) => setFormField({ ...formField, deduct_from: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Deduct From" />
</SelectTrigger>
<SelectContent>
<SelectItem value="D">Destination Member</SelectItem>
<SelectItem value="S">Source Member</SelectItem>
</SelectContent>
</Select>
</div>
<div className="w-full">
<label className="form-label">
Deduct From Destination <span className="text-red-500">*</span>
</label>
<Select
value={formField.deduct_from_account}
onValueChange={(value) =>
setFormField({ ...formField, deduct_from_account: value })
}
>
<SelectTrigger>
<SelectValue placeholder="Select Wallet" />
</SelectTrigger>
<SelectContent>
{wallets.map((wallet) => (
<SelectItem value={wallet.id} key={wallet.id}>
{wallet.name || wallet.description}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="w-full">
<label className="form-label">
Credit To <span className="text-red-500">*</span>
</label>
<Select
value={formField.credit_to}
onValueChange={(value) =>
setFormField({
...formField,
credit_to: value,
credit_destination:
value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
})
}
>
<SelectTrigger>
<SelectValue placeholder="Select Credit To" />
</SelectTrigger>
<SelectContent>
<SelectItem value="D">Destination Member</SelectItem>
<SelectItem value="S">Source Member</SelectItem>
<SelectItem value="I">Input Customer</SelectItem>
</SelectContent>
</Select>
</div>
{formField.credit_to === 'I' && (
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Credit Destination <span className="text-red-500">*</span> Transaction Type ID <span className="text-red-500">*</span>
</label>
<div className="relative">
<Input
className="input bg-gray-100"
type="text"
value={isLoadingTransactionType ? '' : transactionTypeName}
readOnly
/>
{isLoadingTransactionType && (
<div className="absolute inset-0 flex items-center justify-start bg-gray-100 px-3">
<div className="flex items-center">
<div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div>
<span className="ml-2 text-gray-500">Loading transaction type...</span>
</div>
</div>
)}
<input
type="hidden"
name="transaction_type"
value={formField.transaction_type}
/>
</div>
</div>
<div className="w-full">
<label className="form-label">
Transfer Fee Name <span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
</div>
<div className="w-full">
<label className="form-label">
Description <span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
autoComplete="off"
value={formField.description}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, description: target.value }))
}
/>
</div>
<div className="w-full">
<label className="form-label">Minimum Amount</label>
<NumericFormat
className="input"
value={formField.minimum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
minimum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Minimum Amount"
/>
</div>
<div className="w-full">
<label className="form-label">Maximum Amount</label>
<NumericFormat
className="input"
value={formField.maximum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
maximum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Maximum Amount"
/>
</div>
<div className="w-full">
<label className="form-label">
Period Start <span className="text-red-500">*</span>
</label>
<Input
className="input"
type="date"
autoComplete="off"
value={formField.period_start}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, period_start: target.value }))
}
/>
</div>
<div className="w-full">
<label className="form-label">
Period End <span className="text-red-500">*</span>
</label>
<Input
className="input"
type="date"
autoComplete="off"
value={formField.period_end}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, period_end: target.value }))
}
/>
</div>
<div className="w-full">
<label className="form-label">Deduct Amount</label>
<NumericFormat
className="input"
value={formField.deduct_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
deduct_amount: values.floatValue || 0
}));
}}
placeholder="Enter Deduct Amount"
/>
</div>
<div className="w-full">
<label className="form-label">Deduct Percentage</label>
<NumericFormat
className="input"
value={formField.deduct_percentage}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
deduct_percentage: values.floatValue || 0
}));
}}
placeholder="Enter Deduct Percentage"
/>
</div>
<div className="w-full">
<label className="form-label">Fee Amount</label>
<NumericFormat
className="input"
value={formField.fee_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
fee_amount: values.floatValue || 0
}));
}}
placeholder="Enter Fee Amount"
/>
</div>
<div className="w-full">
<label className="form-label">
Deduct From <span className="text-red-500">*</span>
</label> </label>
<Select <Select
value={formField.credit_destination} value={formField.deduct_from}
onValueChange={(value) => onValueChange={(value) => setFormField({ ...formField, deduct_from: value })}
setFormField({ ...formField, credit_destination: value })
}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select Customer" /> <SelectValue placeholder="Select Deduct From" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{customers.map((customer) => ( <SelectItem value="D">Destination Member</SelectItem>
<SelectItem value={customer.id} key={customer.id}> <SelectItem value="S">Source Member</SelectItem>
{customer.fullname || `${customer.username} - ${customer.msisdn}`}
</SelectItem>
))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
)}
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Credit Destination Account <span className="text-red-500">*</span> Deduct From Destination <span className="text-red-500">*</span>
</label> </label>
<Select {renderSelectWithLoading(
value={formField.credit_destination_account} formField.deduct_from_account,
onValueChange={(value) => (value) => setFormField({ ...formField, deduct_from_account: value }),
setFormField({ ...formField, credit_destination_account: value }) wallets,
} 'Select Wallet',
> isLoadingWallets
<SelectTrigger> )}
<SelectValue placeholder="Select Wallet" /> </div>
</SelectTrigger>
<SelectContent> <div className="w-full">
{wallets.map((wallet) => ( <label className="form-label">
<SelectItem value={wallet.id} key={wallet.id}> Credit To <span className="text-red-500">*</span>
{wallet.name || wallet.description} </label>
</SelectItem> <Select
))} value={formField.credit_to}
</SelectContent> onValueChange={(value) =>
</Select> setFormField({
...formField,
credit_to: value,
credit_destination:
value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
})
}
>
<SelectTrigger>
<SelectValue placeholder="Select Credit To" />
</SelectTrigger>
<SelectContent>
<SelectItem value="D">Destination Member</SelectItem>
<SelectItem value="S">Source Member</SelectItem>
<SelectItem value="I">Input Customer</SelectItem>
</SelectContent>
</Select>
</div>
{formField.credit_to === 'I' && (
<div className="w-full">
<label className="form-label">
Credit Destination <span className="text-red-500">*</span>
</label>
<div className="relative">
<div
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
onClick={() => setOpen(!open)}
>
<span className="truncate">
{customers.find(customer => customer.id === formField.credit_destination)?.username || 'Search customer...'}
</span>
<path d="m6 9 6 6 6-6"></path>
</div>
{open && (
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
<div className="sticky top-0 bg-white p-2 border-b">
<Input
className="h-8 text-sm"
type="text"
placeholder="Search customer..."
value={customerSearchTerm}
onChange={(e) => setCustomerSearchTerm(e.target.value)}
autoComplete="off"
onClick={(e) => e.stopPropagation()}
autoFocus
/>
</div>
<div>
{customers
.filter(customer =>
customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
customer.msisdn.includes(customerSearchTerm)
)
.map(customer => (
<div
key={customer.id}
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
onClick={() => {
setFormField({
...formField,
credit_destination: customer.id
});
setOpen(false);
}}
>
{customer.username}
</div> </div>
))}
{customers.filter(customer =>
customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
customer.msisdn.includes(customerSearchTerm)
).length === 0 && (
<div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
)}
</div>
</div>
)}
</div>
</div>
)}
<div className="w-full">
<label className="form-label">
Transaction Type ID <span className="text-red-500">*</span>
</label>
<Select
value={formField.transaction_type}
onValueChange={(transaction_type) =>
setFormField((prev) => ({ ...prev, transaction_type }))
}
>
<SelectTrigger>
<SelectValue placeholder="Select Transaction Type" />
</SelectTrigger>
<SelectContent>
{transactionTypes.map((transactiontype) => (
<SelectItem value={transactiontype.id} key={transactiontype.id}>
{transactiontype.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="w-full">
<label className="form-label">
Status <span className="text-red-500">*</span>
</label>
<Select
value={formField.status}
onValueChange={(value) => setFormField({ ...formField, status: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
</div>
<div className="w-full">
<label className="form-label">
Status Include <span className="text-red-500">*</span>
</label>
<Select
value={formField.status_include}
onValueChange={(value) => setFormField({ ...formField, status_include: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
</div>
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Priority <span className="text-red-500">*</span> Credit Destination Account <span className="text-red-500">*</span>
</label> </label>
<Select {renderSelectWithLoading(
value={formField.priority} formField.credit_destination_account,
onValueChange={(value) => setFormField({ ...formField, priority: value })} (value) => setFormField({ ...formField, credit_destination_account: value }),
> wallets,
<SelectTrigger> 'Select Wallet',
<SelectValue placeholder="Select Priority" /> isLoadingWallets
</SelectTrigger> )}
<SelectContent> </div>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex justify-end pt-2.5 gap-5"> <div className="w-full">
<Button variant={'default'} type="submit" disabled={isSubmitting}> <label className="form-label">
{isSubmitting ? 'Saving...' : 'Save Changes'} Status <span className="text-red-500">*</span>
</Button> </label>
<Select
value={formField.status}
onValueChange={(value) => setFormField({ ...formField, status: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
</div>
<div className="w-full">
<label className="form-label">
Status Include <span className="text-red-500">*</span>
</label>
<Select
value={formField.status_include}
onValueChange={(value) => setFormField({ ...formField, status_include: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
</div>
<div className="w-full">
<label className="form-label">
Priority <span className="text-red-500">*</span>
</label>
<Select
value={formField.priority}
onValueChange={(value) => setFormField({ ...formField, priority: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Priority" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex justify-end pt-2.5 gap-5">
<Button
variant={'outline'}
type="button"
onClick={resetForm}
>
Reset
</Button>
<Button
variant={'default'}
type="submit"
disabled={
isSubmitting ||
isLoadingTransferFee ||
isLoadingTransactionType ||
isLoadingWallets ||
isLoadingCustomers
}
>
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
</div>
</div> </div>
</div> </div>
</div> </form>
</form> )}
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
}; };
export { EditFeeDialog }; export {EditFeeDialog};

4
src/pages/transfer/transfertype/blocks/AddDialog.tsx
View File

@ -467,6 +467,10 @@ const AddDialog = () => {
<SelectItem value="AM">Return Agent Merchant </SelectItem> <SelectItem value="AM">Return Agent Merchant </SelectItem>
<SelectItem value="AE">Return Agent Emoney </SelectItem> <SelectItem value="AE">Return Agent Emoney </SelectItem>
<SelectItem value="R">Reward Point </SelectItem> <SelectItem value="R">Reward Point </SelectItem>
<SelectItem value="TE">Top Up Escrow </SelectItem>
<SelectItem value="TM">Top Up Master Agent </SelectItem>
<SelectItem value="TA">Top Up Agent </SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>

5
src/pages/transfer/transfertype/blocks/EditDialog.tsx
View File

@ -589,7 +589,7 @@ const EditDialog = () => {
<SelectValue placeholder="Select" /> <SelectValue placeholder="Select" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="D">Disbursement </SelectItem> <SelectItem value="D">Disbursement </SelectItem>
<SelectItem value="O">Other </SelectItem> <SelectItem value="O">Other </SelectItem>
<SelectItem value="CA">Change Group Emoney Customer to Agent </SelectItem> <SelectItem value="CA">Change Group Emoney Customer to Agent </SelectItem>
<SelectItem value="AC">Change Group Emoney Agent to Customer </SelectItem> <SelectItem value="AC">Change Group Emoney Agent to Customer </SelectItem>
@ -600,6 +600,9 @@ const EditDialog = () => {
<SelectItem value="AM">Return Agent Merchant </SelectItem> <SelectItem value="AM">Return Agent Merchant </SelectItem>
<SelectItem value="AE">Return Agent Emoney </SelectItem> <SelectItem value="AE">Return Agent Emoney </SelectItem>
<SelectItem value="R">Reward Point </SelectItem> <SelectItem value="R">Reward Point </SelectItem>
<SelectItem value="TE">Top Up Escrow </SelectItem>
<SelectItem value="TM">Top Up Master Agent </SelectItem>
<SelectItem value="TA">Top Up Agent </SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>

5
src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
View File

@ -159,7 +159,10 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
AD: 'Return Agent Deposit', AD: 'Return Agent Deposit',
AM: 'Return Agent Merchant', AM: 'Return Agent Merchant',
AE: 'Return Agent Emoney', AE: 'Return Agent Emoney',
R: 'Reward Point' R: 'Reward Point',
TE:'Top Up Escrow',
TM:'Top Up Master Agent',
TA:'Top Up Agent'
}; };
return mapping[row.type] || 'Unknown'; return mapping[row.type] || 'Unknown';