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:
Raja Oktafrianto
2025-04-15 22:53:35 +07:00
parent 8be216a89d 09d6bb87a5
commit b747f659cc
23 changed files with 1127 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import { KeenIcon } from '@/components';
import { ColumnDef } from '@tanstack/react-table';
export type Group = {
@ -8,7 +9,7 @@ export type Group = {
description: string;
};
export const columns: ColumnDef<Group>[] = [
export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Group>[] => [
{
accessorKey: 'no',
header: 'ID'
@ -30,8 +31,19 @@ export const columns: ColumnDef<Group>[] = [
accessorKey: 'description',
header: 'Description'
},
// {
// id: 'actions',
// header: 'Actions'
// }
{
id: '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 };

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

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

25
src/pages/master/postoadms/blocks/ListToolbar.tsx
View File

@ -2,10 +2,23 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';
import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
import { useState } from 'react';
const ListToolbar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog, handleSearchDialog } = useManagePostoAdmsContext();
const [searchPosto, setSearchPosto] = useState('');
const [searchMunicipio, setSearchMunicipio] = useState('');
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
handleSearch();
}
};
const handleSearch = () => {
table.getColumn('name')?.setFilterValue(searchPosto);
};
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
@ -16,11 +29,17 @@ const ListToolbar = () => {
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Postu Administrativo"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
placeholder="Search"
value={searchPosto}
onChange={(event) => setSearchPosto(event.target.value)}
onKeyDown={handleKeyDown}
/>
</label>
<DefaultTooltip title={'Search'} placement={'top'}>
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
<KeenIcon icon="magnifier" />
</Button>
</DefaultTooltip>
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
<Button
variant="outline"

19
src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx
View File

@ -97,7 +97,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
}
},
{
accessorFn: (row) => row.municipios_name,
accessorFn: (row) => row.Municipios_name,
id: 'municipios_name',
header: ({ column }) => <DataGridColumnHeader title="Municipio Name" column={column} />,
enableSorting: false,
@ -139,17 +139,28 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
[handleEditDialog, handleDeleteDialog]
);
const getPostoAdmsLists = async (page: number, limit: number, sorting: any, filter: any) => {
const getPostoAdmsLists = async (
page: number,
limit: number,
sorting: any,
filters: any[] = []
) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
// filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
let filter = '';
if (filters.length > 0 && filters[0].value) {
filter = filters[0].value.toLowerCase();
}
const response = await GetData(`${API_URL}/postoadms/list`, {
limit,
page: page + 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc ? 'DESC' : 'ASC',
filter: JSON.stringify(filter)
filter
});
// console.log(response?.data);
// const sortedList = response.data.data.list.sort((a: PostoAdmsProps, b: PostoAdmsProps) => {

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

197
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 { Table } from '@tanstack/react-table';
import React, { createContext, useContext, useState, useEffect } from 'react';
import { ManageKycContextProvider } from './hooks';
import { columns, initialMember } from './Columns';
import { getColumns, initialMember } from './Columns';
import { useAuthContext } from '@/auth';
import { LoaderTransparant } from '@/components';
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 { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
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;
};
import { ListToolBar } from './blocks/ListToolBar';
const Kyc = () => {
const [loading, setLoading] = useState(false);
@ -58,8 +40,8 @@ const Kyc = () => {
limit: 10,
page: 1,
with_deleted: false,
order_field: 'fullname',
order_direction: 'ASC',
order_field: 'created_at',
order_direction: 'DESC',
type: 'kyc'
}
});
@ -72,14 +54,14 @@ const Kyc = () => {
setMembers(resMembers);
let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC'
}
});
setProfession(getProfession.data.data.list)
setProfession(getProfession.data.data.list);
} catch (error: any) {
toast.error(error.message);
console.log(error);
@ -103,8 +85,12 @@ const Kyc = () => {
setDialogOpen(true);
}
const resetForm = () => {
setMember(initialMember);
};
const handleYes = async () => {
setLoading(true)
setLoading(true);
const userLogin: any = await getUser();
const updateData: any = member;
const customerId = member.id;
@ -151,100 +137,123 @@ const Kyc = () => {
if (updateData[property]) form.append(property, updateData[property]);
}
if (dialogType === 'reject') {
if (destinationGroup === "Premium") 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 (destinationGroup === 'Premium')
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') {
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 === "Agent") await axios.post(`${BASE_URL}/customer/approve`, { customerid: customerId, description: updateData.approval_description_agent});
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 === 'Agent')
await axios.post(`${BASE_URL}/customer/approve`, {
customerid: customerId,
description: updateData.approval_description_agent
});
}
setDialogOpen(false);
setIsDialogOpen(false);
toast.success(`Success Update & ${dialogType} Kyc Member`);
} catch (error: any) {
if (error?.response?.data?.error) error.message = error?.response?.data?.error
if (error?.response?.data?.error) error.message = error?.response?.data?.error;
setDialogOpen(false);
setIsDialogOpen(false);
toast.error(error.message);
} finally {
await fetchCustomers();
setLoading(false)
setLoading(false);
}
};
function setShowAddDialog(el: any) {
setIsDialogOpen(el)
setIsDialogOpen(el);
}
if (loading) return <LoaderTransparant />;
useEffect(() => {
if (!isDialogOpen) resetForm();
}, [isDialogOpen]);
return (
<>
<Helmet>
<title>TPAY | KYC</title>
</Helmet>
<div>
<div className="container mx-auto w-full">
<ConfirmDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={`Are you sure you want to ${dialogType}?`}
onYes={handleYes}
onNo={() => setDialogOpen(false)}
<Container>
<ConfirmDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={`Are you sure you want to ${dialogType}?`}
onYes={handleYes}
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}
// 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'}
/>
): ""}
<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>
) : (
''
)}
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">KYC Upgrade Members</h1>
<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">
<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">Members</span>
</Link>
<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> */}
</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 { table, reload } = useDataGrid();
const { handleDetailDialog, handleAddDialog } = useKycContext();
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">

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

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

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

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

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

@ -65,13 +65,13 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
setNationality(getNationality.data.data)
setFormData({ ...formData, [name]: value });
} else {
if (name === 'municipio_id' || name === 'posto_adms_id' || name === 'suco_id') await getMasterAfter(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) {
if (name === 'municipio') {
if (name === 'municipio_id') {
let getMunicipiosPosto = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/postoadms/${id}`, {
params: {
limit: 50,
@ -83,7 +83,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
});
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}`, {
params: {
limit: 50,
@ -95,7 +95,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
});
setSucos(getPostoSuco.data.data)
}
if (name === 'suco') {
if (name === 'suco_id') {
let getSucoAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/aldeias/${id}`, {
params: {
limit: 50,
@ -130,46 +130,21 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
}
});
setGroups(getGroups.data.data.list);
// let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
// params: {
// limit: 50,
// page: 1,
// with_deleted: false,
// order_field: 'name',
// order_direction: 'ASC',
// }
// });
// setMunicipios(getMunicipios.data.data.list)
// let getPostoAdms = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/list`, {
// params: {
// limit: 50,
// page: 1,
// with_deleted: false,
// 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)
let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
params: {
limit: 70,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setMunicipios(getMunicipios.data.data.list)
if (formData.municipio_id) await handleChange({target: { name: "municipio_id",value: formData.municipio_id }});
if (formData.posto_adms_id) await handleChange({target: { name: "posto_adms_id",value: formData.posto_adms_id }});
if (formData.suco_id) await handleChange({target: { name: "suco_id",value: formData.suco_id }});
if (formData.aldeia_id) await handleChange({target: { name: "aldeia_id",value: formData.aldeia_id }});
} catch (error:any) {
console.log(error);
toast.error(error.message)
@ -234,10 +209,10 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
{/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, profession, 'profession', 'Profession', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, municipios, 'municipio', 'Municipio', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, postoAdm, 'posto_adms', 'Posto', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, sucos, 'suco', 'Suco', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, aldeias, 'aldeia', 'Aldeia', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, municipios, 'municipio_id', 'Municipio', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, postoAdm, 'posto_adms_id', 'Posto', false, false): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, sucos, 'suco_id', 'Suco', false, 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): ''}
<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>

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;

2
src/pages/transaction/history-transaction/Transaction.tsx
View File

@ -2,6 +2,7 @@ import { Container, DataGridInner } from '@/components';
import { TransactionProvider } from './hooks/TransactionContext';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
import ResendTransaction from './blocks/ResendTransaction';
const Transaction = () => {
return (
@ -28,6 +29,7 @@ const Transaction = () => {
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<ResendTransaction />
</Container>
</TransactionProvider>
</>

205
src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx Normal file
View File

@ -0,0 +1,205 @@
import { useTransactionContext } from '../hooks/useTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useCallback, useEffect, useState } from 'react';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Alert, useDataGrid } from '@/components';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { toast } from 'sonner';
import { Input } from '@/components/ui/input';
const API_URL = apiConfig.transaction;
const ResendTransaction = () => {
const { showResendDialog, handleResendDialog, selectedTransactionForResend } = useTransactionContext();
const { GetData, PostData } = useCallApi();
const { reload } = useDataGrid();
const [transactionDetails, setTransactionDetails] = useState<any>(null);
const [alert, setAlert] = useState({
show: false,
message: ''
});
const initialStatePin = {
pin: ''
};
const [formField, setFormField] = useState(initialStatePin);
useEffect(() => {
if (showResendDialog) {
// Reset form fields when dialog opens
setFormField({
pin: ''
});
setAlert({ show: false, message: '' });
setTransactionDetails(null); // Optional reset
}
}, [showResendDialog]);
useEffect(() => {
const fetchTransactionDetails = async () => {
if (selectedTransactionForResend) {
try {
const response = await GetData(
`${API_URL}/transaction/history/detail/${selectedTransactionForResend}`,
{
id: selectedTransactionForResend,
}
);
setTransactionDetails(response?.data);
} catch (error) {
console.error('Error fetching transaction', error);
}
}
};
if (showResendDialog && selectedTransactionForResend) {
fetchTransactionDetails();
}
}, [showResendDialog, selectedTransactionForResend, GetData]);
const doResendTransaction = useCallback(async (data: any | null, pintransactiion: string) => {
if (pintransactiion.trim() === '') {
setAlert({ show: true, message: 'Please fill pin.' });
return;
}
if (pintransactiion.length < 6) {
setAlert({ show: true, message: 'Pin length must be 6 characters long.' });
return;
}
if (!data) {
toast.error('No Transaction selected');
return;
}
if (!data.type) {
toast.error('No Transaction Type selected');
return;
}
let apiEndpoint: string | null | undefined = null;
let apiJsonData: any | null | undefined = null;
switch (data.kind) {
case 'T':
apiEndpoint = `${API_URL}/transaction/transfer`;
apiJsonData = {
id_origin_customer: data.origin_customer.id,
msisdn_destination: data.transfer.destination_customer.msisdn,
id_transaction_type: data.type.id,
amount: String(data.transfer.amount),
pin: pintransactiion,
type: data.transfer.type
}
break;
case 'U':
apiEndpoint = `${API_URL}/transaction/topup`;
apiJsonData = {
id_origin_customer: data.origin_customer.id,
id_transaction_type: data.type.id,
pin_p24: data.transfer.pin_p24,
amount: String(data.transfer.amount),
pin: pintransactiion
}
break;
case 'W':
apiEndpoint = `${API_URL}/transaction/withdraw`;
apiJsonData = {
id_origin_customer: data.origin_customer.id,
id_transaction_type: data.type.id,
destination_iban: data.transfer.destination_iban,
amount: String(data.transfer.amount),
pin: pintransactiion
}
break;
case 'P':
apiEndpoint = `${API_URL}/transaction/purchase`;
apiJsonData = {
id_origin_customer: data.origin_customer.id,
code_product: "object purchase : masih null",
wallet: "emoney or point",
destination_number: "parameter number",
destination_amount: "parameter amount",
pin: pintransactiion
}
break;
}
if (!apiEndpoint || !apiJsonData) {
toast.error('Invalid transaction');
return;
}
const response = await PostData(apiEndpoint, apiJsonData);
if (response?.status) {
setAlert({ show: false, message: '' });
handleResendDialog(false, null);
toast.success('Success Retry Transaction');
reload();
const createActivity = {
module: 'History Transaction',
description: `Retry Transaction => ${selectedTransactionForResend}`,
action: 'U'
};
doSaveLogActivity(createActivity);
} else {
setAlert({ show: true, message: response?.message });
toast.error('Failed Retry Transaction');
}
}, [selectedTransactionForResend, PostData, handleResendDialog, reload]);
return (
<Dialog open={showResendDialog} onOpenChange={(open) => handleResendDialog(open, null)}>
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
<DialogHeader className="p-0 border-0 block">
<DialogTitle></DialogTitle>
<DialogDescription></DialogDescription>
<Alert variant="warning">
<h3 className="text-lg">Are you sure?</h3>
<span className="text-sm">You will retry this transaction!</span>
</Alert>
{alert.show && (
<Alert variant="danger">
<h3>{alert.message}</h3>
</Alert>
)}
</DialogHeader>
<DialogBody>
<label className="form-label flex items-center gap-1 max-w-56">
Pin<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="password"
value={formField.pin}
onChange={(e) => setFormField({ ...formField, pin: e.target.value })}
/></DialogBody>
<DialogFooter className="flex justify-end items-center gap-4 mt-3">
<Button variant="outline" onClick={() => handleResendDialog(false, null)}>
Cancel
</Button>
<Button variant="default" onClick={() => doResendTransaction(transactionDetails, formField.pin)}>
Retry
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};
export default ResendTransaction;

41
src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
View File

@ -9,6 +9,9 @@ import ListToolbar from '../blocks/ListToolbar';
import { Button } from '@/components/ui/button';
import { useNavigate } from 'react-router';
import DetailTransaction from '../blocks/DetailTransaction';
import { log } from 'console';
import ResendTransaction from '../blocks/ResendTransaction';
import { comment } from 'stylis';
interface TransactionProps {
id: number;
@ -28,6 +31,9 @@ interface ContextProps {
setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
selectedTransactionId: number | null;
setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
showResendDialog: boolean;
handleResendDialog: (show: boolean, selected_transaction: string | null) => void;
selectedTransactionForResend: string | null;
}
const initialProps: ContextProps = {
@ -35,7 +41,10 @@ const initialProps: ContextProps = {
showDetailDialog: false,
setShowDetailDialog: () => { },
selectedTransactionId: null,
setSelectedTransactionId: () => { }
setSelectedTransactionId: () => { },
showResendDialog: false,
handleResendDialog: (show: boolean, selected_transaction: string | null) => { },
selectedTransactionForResend: null
};
const ManageTransactionContext = createContext<ContextProps>(initialProps);
@ -50,6 +59,14 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const handleNavigate = (path: string) => {
const url = navigate(`${API_URL}/transaction/history/${path}`);
};
const [showResendDialog, setShowResendDialog] = useState(false);
const [selectedTransactionForResend, setSelectedTransactionForResend] = useState<string | null>(null);
const handleResendDialog = useCallback((show: boolean, selected_transaction: string | null) => {
setSelectedTransactionForResend(show ? selected_transaction : null);
setShowResendDialog(show);
}, []);
const columns = useMemo<ColumnDef<any>[]>(
() => [
@ -162,7 +179,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
</span>
);
},
},
},
{
accessorKey: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
@ -188,6 +205,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableHiding: false,
cell: (data) => {
const row = data.row.original;
const isVisible = row.status === 'F' ? true : false || row.status === 'P' ? true : false;
return (
<div key={`actions-${row.id}`}>
<button
@ -199,6 +217,18 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
>
<KeenIcon icon="eye" />
</button>
{/* add new button for resend transaction failed */}
{isVisible &&
<button
className="btn btn-sm btn-icon btn-clear btn-light"
title="Retry Transaction"
onClick={() => {
handleResendDialog(true, row.id);
}}
>
<KeenIcon icon="abstract-37" />
</button>
}
</div>
);
},
@ -208,7 +238,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
}
}
],
[]);
[handleResendDialog]);
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
@ -259,7 +289,10 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
showDetailDialog,
setShowDetailDialog,
selectedTransactionId,
setSelectedTransactionId
setSelectedTransactionId,
showResendDialog,
handleResendDialog,
selectedTransactionForResend
}}
>
<Toaster expand visibleToasts={9} duration={3000} />

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="AE">Return Agent Emoney </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>
</Select>
</div>

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

@ -589,7 +589,7 @@ const EditDialog = () => {
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="D">Disbursement </SelectItem>
<SelectItem value="D">Disbursement </SelectItem>
<SelectItem value="O">Other </SelectItem>
<SelectItem value="CA">Change Group Emoney Customer to Agent </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="AE">Return Agent Emoney </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>
</Select>
</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',
AM: 'Return Agent Merchant',
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';