Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard
This commit is contained in:
ardiola
@ -61,7 +61,6 @@ const DetailTransaction = () => {
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTransactionDetails = async () => {
|
||||
console.log(selectedTransactionId)
|
||||
if (selectedTransactionId) {
|
||||
try {
|
||||
const response = await GetData(`${API_URL}/transaction/history/${selectedTransactionId}`, {
|
||||
|
||||
@ -54,10 +54,6 @@ const TransactionLogViewer = () => {
|
||||
detailLogData
|
||||
} = useTransactionContext();
|
||||
|
||||
console.log('detailLogData: ', detailLogData)
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Dialog open={showDetailLogDialog} onOpenChange={setShowDetailLogDialog}>
|
||||
<DialogContent className="container-fixed max-w-[1280px] w-full h-[90vh] flex flex-col p-6 overflow-hidden">
|
||||
|
||||
@ -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
49
src/pages/groups/ListToolbar.tsx
Normal 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 };
|
||||
@ -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;
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
Dialog,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@ -13,11 +13,11 @@ import axios from 'axios';
|
||||
|
||||
const API_URL = apiConfig.service_customer;
|
||||
const DetailDialog = () => {
|
||||
const { showDetailDialog, setShowDetailDialog, detailKyc } = useManageKycDeletionContext();
|
||||
|
||||
return (
|
||||
const { showDetailDialog, setShowDetailDialog, detailKyc, handleApproveReject } = useManageKycDeletionContext();
|
||||
|
||||
return (
|
||||
<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>
|
||||
<DialogTitle>Customer Deletion Details </DialogTitle>
|
||||
</DialogHeader>
|
||||
@ -38,9 +38,9 @@ const DetailDialog = () => {
|
||||
|
||||
<div className="flex justify-end gap-2 mt-3">
|
||||
<Button type="button" variant="outline" onClick={() => setShowDetailDialog(false)}>Cancel</Button>
|
||||
<Button onClick={()=>{}} variant="destructive" color="warning">Reject</Button>
|
||||
<Button onClick={()=>{}} variant="default" color="primary">Approve</Button>
|
||||
</div>
|
||||
<Button onClick={() => handleApproveReject(detailKyc.id, 'N')} variant="destructive" color="warning">Reject</Button>
|
||||
<Button onClick={() => handleApproveReject(detailKyc.id, 'Y')} variant="default" color="primary">Approve</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (<div></div>)}
|
||||
</DialogBody>
|
||||
@ -51,28 +51,28 @@ const 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) {
|
||||
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';
|
||||
interface Reason {
|
||||
label: string;
|
||||
}
|
||||
|
||||
|
||||
const statusMap: Record<Code, Reason> = {
|
||||
W: {label: 'Waiting Approval'},
|
||||
Y: {label: 'Approve'},
|
||||
N: {label: 'Reject'},
|
||||
T: {label: 'Tidak lagi menggunakan layanan'},
|
||||
P: {label: 'Privasi dan keamanan'},
|
||||
D: {label: 'Akun ganda'},
|
||||
L: {label: 'Lainnya'}
|
||||
W: { label: 'Waiting Approval' },
|
||||
Y: { label: 'Approve' },
|
||||
N: { label: 'Reject' },
|
||||
T: { label: 'Tidak lagi menggunakan layanan' },
|
||||
P: { label: 'Privasi dan keamanan' },
|
||||
D: { label: 'Akun ganda' },
|
||||
L: { label: 'Lainnya' }
|
||||
};
|
||||
if (name == 'reason_deletion' || name == 'status_approve') {
|
||||
const status = formData[name] as Code
|
||||
const fixStatus = statusMap[status] ?? {label: formData[name]}
|
||||
const fixStatus = statusMap[status] ?? { label: formData[name] }
|
||||
formData[name] = fixStatus.label
|
||||
}
|
||||
return (
|
||||
@ -80,15 +80,15 @@ function generateInput(formData:any, handleChange:any, label:string, name:string
|
||||
<div className="w-full mt-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}<span className="text-red-500">{required?"*":""}</span>
|
||||
</label>
|
||||
<Input
|
||||
{label}<span className="text-red-500">{required ? "*" : ""}</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
readOnly={disabled}
|
||||
required={required}
|
||||
type={type}
|
||||
name={name}
|
||||
value={formData[name]?(type === 'date' ? generateDate(formData[name]) : formData[name]):""}
|
||||
value={formData[name] ? (type === 'date' ? generateDate(formData[name]) : formData[name]) : ""}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
import { toast } from 'sonner';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { createContext, useCallback, useMemo, useState } from 'react';
|
||||
@ -36,6 +37,7 @@ interface ContextProps {
|
||||
selectedIdCustomer: string | null;
|
||||
detailKyc: any | null;
|
||||
setDetailKyc: React.Dispatch<React.SetStateAction<any>>;
|
||||
handleApproveReject: (customerDeletionId: string, status_approve: string) => {};
|
||||
}
|
||||
|
||||
const initialProps: ContextProps = {
|
||||
@ -48,6 +50,7 @@ const initialProps: ContextProps = {
|
||||
setShowDetailDialog: () => { },
|
||||
detailKyc: async () => {},
|
||||
setDetailKyc: () => { },
|
||||
handleApproveReject: () => ({customerDeletionId: '0', status_approve: 'Y'}),
|
||||
};
|
||||
|
||||
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 [showDetailDialog, setShowDetailDialog] = useState(false);
|
||||
const [showAddDialog, setShowAddDialog] = useState(false);
|
||||
const [selectedIdCustomer, setSelectedIdCustomer] = useState<string | null>(null);
|
||||
const [detailKyc, setDetailKyc] = useState<any>();
|
||||
const [manageKyc, setManageKyc] = useState<ManageKycDeletionProps[]>([]);
|
||||
const { GetData } = useCallApi();
|
||||
const { GetData, PostData } = useCallApi();
|
||||
|
||||
const getKycDeletionList = async (page: number, limit: number, sorting: any, filter: any) => {
|
||||
try {
|
||||
@ -130,12 +135,11 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
|
||||
};
|
||||
|
||||
const handleDetailDialog = useCallback(async (show: boolean, selected_id_customer: string | null) => {
|
||||
setSelectedIdCustomer(show ? selected_id_customer : null);
|
||||
let detailCustomer = await GetData(`${API_URL}/customer_deletion/detail/${selected_id_customer}`, {})
|
||||
setDetailKyc(detailCustomer?.data)
|
||||
console.log('detailCustomer: ',detailCustomer)
|
||||
console.log('detailCustomer2: ',detailCustomer?.data)
|
||||
console.log('detailKyc: ', detailKyc)
|
||||
if (show == true) {
|
||||
setSelectedIdCustomer(show ? selected_id_customer : null);
|
||||
let detailCustomer = await GetData(`${API_URL}/customer_deletion/detail/${selected_id_customer}`, {})
|
||||
setDetailKyc(detailCustomer?.data)
|
||||
}
|
||||
setShowDetailDialog(show);
|
||||
}, []);
|
||||
|
||||
@ -143,6 +147,26 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
|
||||
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>[]>(
|
||||
() => [
|
||||
{
|
||||
@ -242,7 +266,8 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
|
||||
selectedIdCustomer,
|
||||
setShowDetailDialog,
|
||||
setDetailKyc,
|
||||
detailKyc
|
||||
detailKyc,
|
||||
handleApproveReject,
|
||||
}}
|
||||
>
|
||||
<Toaster expand visibleToasts={9} duration={3000} />
|
||||
|
||||
@ -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: ''
|
||||
};
|
||||
|
||||
@ -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;
|
||||
@ -135,7 +121,6 @@ const Kyc = () => {
|
||||
delete updateData.suco_name;
|
||||
delete updateData.aldeia_id;
|
||||
delete updateData.aldeia_name;
|
||||
delete updateData.group_id;
|
||||
delete updateData.group_name;
|
||||
delete updateData.group_description;
|
||||
delete updateData.group_status;
|
||||
@ -152,99 +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
|
||||
});
|
||||
}
|
||||
await fetchCustomers();
|
||||
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;
|
||||
setDialogOpen(false);
|
||||
setIsDialogOpen(false);
|
||||
toast.error(error.message);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
await fetchCustomers();
|
||||
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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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;
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -180,5 +171,6 @@ export const initialMember = {
|
||||
aldeia: '',
|
||||
profession: '',
|
||||
approval_description_premium: '',
|
||||
approval_description_agent: ''
|
||||
approval_description_agent: '',
|
||||
group_id: ''
|
||||
};
|
||||
|
||||
@ -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 : '';
|
||||
@ -120,7 +122,6 @@ const ManageMembers = () => {
|
||||
delete updateData.suco_name;
|
||||
delete updateData.aldeia_id;
|
||||
delete updateData.aldeia_name;
|
||||
delete updateData.group_id;
|
||||
delete updateData.group_name;
|
||||
delete updateData.group_description;
|
||||
delete updateData.group_status;
|
||||
@ -136,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: {
|
||||
@ -146,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;
|
||||
@ -163,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) {
|
||||
@ -172,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 />;
|
||||
@ -187,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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -21,33 +21,33 @@ import ConfirmDialog from '@/components/confirm';
|
||||
const BASE_URL_CUSTOMER = apiConfig.service_customer;
|
||||
|
||||
// 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 [dialogType, setDialogType] = useState('');
|
||||
const [changeGroup, setChangeGroup] = useState('');
|
||||
const [changeGroupD, setChangeGroupD] = useState(false);
|
||||
const [groups, setGroups] = useState([]);
|
||||
// const [groups, setGroups] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchGroups();
|
||||
// fetchGroups();
|
||||
}, []);
|
||||
|
||||
const fetchGroups = async () => {
|
||||
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);
|
||||
} catch (error: any) {
|
||||
toast.error(error.message);
|
||||
}
|
||||
};
|
||||
// const fetchGroups = async () => {
|
||||
// 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);
|
||||
// } catch (error: any) {
|
||||
// toast.error(error.message);
|
||||
// }
|
||||
// };
|
||||
|
||||
const handleYes = async () => {
|
||||
try {
|
||||
@ -119,6 +119,7 @@ export default function AdmAccess({page,formData,handleClose,fetchCustomers,view
|
||||
function btnConfirmDialog(status: boolean) {
|
||||
setDialogOpen(status);
|
||||
}
|
||||
|
||||
if (!formData.id) return '';
|
||||
if (page !== 'kyc') {
|
||||
return (
|
||||
|
||||
@ -24,6 +24,7 @@ import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
|
||||
const URL_NATIONALITY = apiConfig.nationality;
|
||||
const BASE_URL_CUSTOMER = apiConfig.service_customer;
|
||||
import { initialMember } from "../Columns";
|
||||
import AdmAccess from './AdmAccess';
|
||||
import CustomerWallet from './CustomerWallet';
|
||||
@ -38,10 +39,8 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
const [aldeias, setAldeias] = useState([]);
|
||||
const [postoAdm, setPostoAdm] = useState([]);
|
||||
const [sucos, setSucos] = useState<any>([]);
|
||||
const [groups, setGroups] = useState([]);
|
||||
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([
|
||||
{ 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(() => {
|
||||
setFormData(initialData || {});
|
||||
// fetchMasterData()
|
||||
fetchMasterData()
|
||||
}, [initialData]);
|
||||
|
||||
const handleChange = async (e: any) => {
|
||||
@ -66,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,
|
||||
@ -84,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,
|
||||
@ -96,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,
|
||||
@ -121,9 +120,20 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
|
||||
async function fetchMasterData() {
|
||||
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`, {
|
||||
params: {
|
||||
limit: 50,
|
||||
limit: 70,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'name',
|
||||
@ -131,38 +141,13 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
}
|
||||
});
|
||||
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)
|
||||
} catch (error) {
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -213,20 +198,21 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
|
||||
<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, 'Full Name', 'fullname', 'text', true, viewOnly): ''}
|
||||
{(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, '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): ''}
|
||||
{/* {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, municipios, 'municipio', 'Municipio', null, false): ''}
|
||||
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, postoAdm, 'posto_adms', 'Posto', 'posto_adms_id', false): ''}
|
||||
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, sucos, 'suco', 'Suco', 'sucos_id', false): ''}
|
||||
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, aldeias, 'aldeia', 'Aldeia', null, false): ''}
|
||||
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, profession, 'profession', 'Profession', 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>
|
||||
@ -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 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, '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!=='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') ? (
|
||||
<CustomerWallet customerid={formData.id}/>
|
||||
@ -323,14 +309,14 @@ function generateInput(formData:any, handleChange:any, label:string, name:string
|
||||
}
|
||||
|
||||
// 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 (
|
||||
<>
|
||||
<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">{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>
|
||||
<SelectValue placeholder={`Select ${label}`} />
|
||||
</SelectTrigger>
|
||||
|
||||
53
src/pages/members/manage-members/blocks/ListToolBar.tsx
Normal file
53
src/pages/members/manage-members/blocks/ListToolBar.tsx
Normal 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;
|
||||
@ -1,6 +1,6 @@
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useRef, useState } from 'react';
|
||||
import { Alert, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useRef, useState, useCallback, useEffect } from 'react';
|
||||
import { Alert, useDataGrid } from '@/components';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import {
|
||||
Dialog,
|
||||
@ -10,134 +10,322 @@ import {
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} 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 { Textarea } from '@/components/ui/textarea';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
|
||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
import { CustomerProps } from '@/pages/master/provider/blocks/AddDialog';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
|
||||
const API_URL = apiConfig.service_dashboard;
|
||||
const API_URL_CUSTOMER = apiConfig.service_customer;
|
||||
const API_URL_NOTIFICATION = apiConfig.service_notification;
|
||||
|
||||
const AddDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const {
|
||||
handleAddDialog,
|
||||
handleEditDialog,
|
||||
showAddDialog,
|
||||
showEditDialog,
|
||||
selectedNotification,
|
||||
notifications
|
||||
} = useManageNotificationContext();
|
||||
|
||||
const { handleAddDialog, showAddDialog } = useManageNotificationContext();
|
||||
const { reload } = useDataGrid();
|
||||
const { PostData, PutData } = useCallApi();
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const { GetData, PostData } = useCallApi();
|
||||
const [alert, setAlert] = useState({ show: false, message: '' });
|
||||
|
||||
const initialState = {
|
||||
name: '',
|
||||
destination_module: ''
|
||||
customers: [],
|
||||
type: '',
|
||||
via: '',
|
||||
subject: '',
|
||||
content: ''
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [customers, setCustomers] = useState<CustomerProps[]>([]);
|
||||
const resetForm = () => {
|
||||
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>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (formField.name === '' || formField.destination_module === '') {
|
||||
setAlert({ show: true, message: 'Please fill in all required fields.' });
|
||||
if (
|
||||
formField.type.trim() === '' ||
|
||||
formField.via.trim() === '' ||
|
||||
formField.subject.trim() === '' ||
|
||||
formField.content.trim() === ''
|
||||
) {
|
||||
setAlert({ show: true, message: 'Please fill all required fields.' });
|
||||
return;
|
||||
}
|
||||
console.log(formField);
|
||||
|
||||
doCreateNotification(e);
|
||||
// console.log(formField);
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFormField(initialState);
|
||||
};
|
||||
// useEffect(() => {
|
||||
// getCustomerList([{ id: 'id', desc: false }]);
|
||||
// }, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (showAddDialog === false) {
|
||||
resetForm();
|
||||
}
|
||||
}, [showAddDialog]);
|
||||
|
||||
return (
|
||||
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
|
||||
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
<DialogHeader className="p-5 border-0">
|
||||
<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>
|
||||
<Dialog open={showAddDialog} onOpenChange={handleAddDialog}>
|
||||
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Notification - Create</DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
|
||||
<div className="flex flex-col px-0">
|
||||
<DialogBody className="scrollable">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{alert.show && (
|
||||
<Alert variant="danger" className="mb-5">
|
||||
{alert.message}
|
||||
<Alert variant="danger">
|
||||
<h3>{alert.message}</h3>
|
||||
</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="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Destination Module<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
value={formField.destination_module}
|
||||
onChange={({ target }) =>
|
||||
setFormField((prev) => ({ ...prev, destination_module: target.value }))
|
||||
}
|
||||
{/* <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 To<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="sendTo"
|
||||
value="all"
|
||||
checked={formField.sendTo === 'all'}
|
||||
onChange={handleChange}
|
||||
className="accent-blue-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-2.5 gap-5">
|
||||
<Button variant={'outline'} type="reset" onClick={handleReset}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant={'default'} type="submit">
|
||||
Save Changes
|
||||
</Button>
|
||||
<span>All Users</span>
|
||||
</label>
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="sendTo"
|
||||
value="selected"
|
||||
checked={formField.sendTo === 'selected'}
|
||||
onChange={handleChange}
|
||||
className="accent-blue-600"
|
||||
/>
|
||||
<span>Selected Customers</span>
|
||||
</label>
|
||||
</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>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@ -16,13 +16,11 @@ const ListToolBar = () => {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search users"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) =>
|
||||
table.getColumn('name')?.setFilterValue(event.target.value)
|
||||
}
|
||||
value={(table.getColumn('content')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('content')?.setFilterValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
@ -30,9 +28,9 @@ const ListToolBar = () => {
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
{/* <KeenIcon icon="filter" /> */}
|
||||
{/* </Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -1,48 +1,50 @@
|
||||
import { DataGridColumnHeader, DataGridProvider } from '@/components';
|
||||
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import React, { createContext, useCallback, useMemo, useState } from 'react';
|
||||
import { ListToolBar } from '../blocks/ListToolbar';
|
||||
|
||||
interface ContextProps {
|
||||
showEditDialog: boolean;
|
||||
handleEditDialog: (show: boolean, selected_user: string | null) => void;
|
||||
showAddDialog: boolean;
|
||||
handleAddDialog: (show: boolean) => void;
|
||||
selectedNotification: string | null;
|
||||
notifications: NotificationProps[];
|
||||
}
|
||||
import { useCallApi } from '@/hooks';
|
||||
import moment from 'moment';
|
||||
|
||||
interface SelectedNotification {
|
||||
id: string;
|
||||
name: string;
|
||||
destination_module: string;
|
||||
content: string;
|
||||
subject: string;
|
||||
type: string;
|
||||
via: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface NotificationProps {
|
||||
id: string;
|
||||
name: string;
|
||||
destination_module: string;
|
||||
interface ContextProps {
|
||||
showAddDialog: boolean;
|
||||
handleAddDialog: (show: boolean) => void;
|
||||
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 = {
|
||||
showEditDialog: false,
|
||||
showAddDialog: false,
|
||||
handleAddDialog: (show: boolean) => {},
|
||||
showEditDialog: false,
|
||||
handleEditDialog: () => {},
|
||||
handleAddDialog: () => {},
|
||||
selectedNotification: null,
|
||||
notifications: []
|
||||
showDeleteDialog: false,
|
||||
handleDeleteDialog: () => {},
|
||||
selectedNotification: null
|
||||
};
|
||||
|
||||
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 [showEditDialog, setShowEditDialog] = useState(false);
|
||||
const [showAddDialog, setShowAddDialog] = useState(false);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [selectedNotification, setSelectedNotification] = useState<string | null>(null);
|
||||
const [notifications, setNotifications] = useState<NotificationProps[]>([]);
|
||||
const { GetData } = useCallApi();
|
||||
|
||||
const handleAddDialog = useCallback((show: boolean) => {
|
||||
setShowAddDialog(show);
|
||||
@ -53,59 +55,104 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
|
||||
setShowEditDialog(show);
|
||||
}, []);
|
||||
|
||||
const handleDeleteDialog = useCallback((show: boolean, selected_notification: string | null) => {
|
||||
setSelectedNotification(show ? selected_notification : null);
|
||||
setShowDeleteDialog(show);
|
||||
}, []);
|
||||
|
||||
const columns = useMemo<ColumnDef<any>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: 'id',
|
||||
header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
|
||||
accessorFn: (row) => row.content,
|
||||
id: 'content',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Content" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]'
|
||||
headerClassName: 'w-[300px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: 'name',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
|
||||
accessorFn: (row) => row.subject,
|
||||
id: 'subject',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Subject" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.destination_module,
|
||||
id: 'destination_module',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Destination Module" column={column} />,
|
||||
accessorFn: (row) => row.type,
|
||||
id: 'type',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Type" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false
|
||||
},
|
||||
{
|
||||
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 (
|
||||
<div className="flex justify-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
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>
|
||||
);
|
||||
}
|
||||
accessorFn: (row) => row.via,
|
||||
id: 'via',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Via" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.created_at,
|
||||
id: 'created_at',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Date Create" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
// {
|
||||
// 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 (
|
||||
<div>
|
||||
<ManageNotifContext.Provider
|
||||
@ -114,8 +161,9 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
|
||||
showAddDialog,
|
||||
handleEditDialog,
|
||||
showEditDialog,
|
||||
selectedNotification,
|
||||
notifications
|
||||
handleDeleteDialog,
|
||||
showDeleteDialog,
|
||||
selectedNotification
|
||||
}}
|
||||
>
|
||||
<Toaster expand visibleToasts={9} duration={3000} />
|
||||
@ -125,8 +173,11 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
|
||||
pagination={{ size: 10 }}
|
||||
toolbar={<ListToolBar />}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'username', desc: false }]}
|
||||
sorting={[{ id: 'content', desc: false }]}
|
||||
serverSide={true}
|
||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||
getNotificationList(pageIndex, pageSize, sorting, columnFilters)
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</DataGridProvider>
|
||||
|
||||
@ -153,7 +153,7 @@ const EditDialog = () => {
|
||||
email: response.data.email,
|
||||
id_role: response.data.idRole,
|
||||
status: response.data.status,
|
||||
customerid: response.data.customer.id
|
||||
customerid: response.data.customerid?.id || ''
|
||||
}));
|
||||
// console.log('Customer ID from API:', response?.data.customerid);
|
||||
} else {
|
||||
|
||||
@ -30,7 +30,7 @@ const DetailApprovalTransaction = () => {
|
||||
const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
|
||||
id: selectedTransactionId
|
||||
});
|
||||
// console.log(response?.data);
|
||||
console.log(response?.data);
|
||||
setTransactionDetails(response?.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
@ -190,7 +190,7 @@ const DetailApprovalTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
|
||||
@ -346,9 +346,11 @@ const DetailApprovalTransaction = () => {
|
||||
<p className="text-sm text-gray-500">Description</p>
|
||||
<p className="font-medium">{transactionDetails?.description}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<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>
|
||||
<p className="text-sm text-gray-500">Reference</p>
|
||||
|
||||
@ -42,39 +42,58 @@ const ListToolbar = () => {
|
||||
|
||||
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">
|
||||
From
|
||||
<input
|
||||
type="date"
|
||||
placeholder="From"
|
||||
value={trxDate.from}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, from: event.target.value })
|
||||
}
|
||||
name="from"
|
||||
/>
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full justify-between items-center">
|
||||
<div className="flex gap-3 items-center w-full md:w-auto">
|
||||
<label className="input input-sm w-[160px]">
|
||||
From
|
||||
<input
|
||||
type="date"
|
||||
placeholder="From"
|
||||
value={trxDate.from}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, from: event.target.value })
|
||||
}
|
||||
name="from"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="input input-sm w-1/3">
|
||||
To
|
||||
<input
|
||||
type="date"
|
||||
placeholder="To"
|
||||
value={trxDate.to}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, to: event.target.value })
|
||||
}
|
||||
name="to"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label className="input input-sm w-[160px]">
|
||||
To
|
||||
<input
|
||||
type="date"
|
||||
placeholder="To"
|
||||
value={trxDate.to}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, to: event.target.value })
|
||||
}
|
||||
name="to"
|
||||
/>
|
||||
</label>
|
||||
</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>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default ListToolbar;
|
||||
|
||||
@ -189,7 +189,7 @@ const DetailTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
|
||||
@ -347,7 +347,7 @@ const DetailTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<p className="text-sm text-gray-500">Reference</p>
|
||||
|
||||
@ -42,35 +42,53 @@ const ListToolbar = () => {
|
||||
|
||||
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">
|
||||
From
|
||||
<input
|
||||
type="date"
|
||||
placeholder="From"
|
||||
value={trxDate.from}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, from: event.target.value })
|
||||
}
|
||||
name="from"
|
||||
/>
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full justify-between items-center">
|
||||
<div className="flex gap-3 items-center w-full md:w-auto">
|
||||
<label className="input input-sm w-[160px]">
|
||||
From
|
||||
<input
|
||||
type="date"
|
||||
placeholder="From"
|
||||
value={trxDate.from}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, from: event.target.value })
|
||||
}
|
||||
name="from"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="input input-sm w-1/3">
|
||||
To
|
||||
<input
|
||||
type="date"
|
||||
placeholder="To"
|
||||
value={trxDate.to}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, to: event.target.value })
|
||||
}
|
||||
name="to"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label className="input input-sm w-[160px]">
|
||||
To
|
||||
<input
|
||||
type="date"
|
||||
placeholder="To"
|
||||
value={trxDate.to}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, to: event.target.value })
|
||||
}
|
||||
name="to"
|
||||
/>
|
||||
</label>
|
||||
</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>
|
||||
|
||||
@ -70,6 +70,8 @@ const AddFeeDialog = () => {
|
||||
selectedTransferFee,
|
||||
transactionTypeId
|
||||
} = useManageTransferFeeContext();
|
||||
const [customerSearchTerm, setCustomerSearchTerm] = useState('');
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
@ -111,6 +113,7 @@ const AddFeeDialog = () => {
|
||||
credit_destination_account: ''
|
||||
};
|
||||
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
|
||||
const resetForm = () => {
|
||||
@ -151,6 +154,13 @@ const AddFeeDialog = () => {
|
||||
}
|
||||
}, [showAddFeeDialog, transactionTypeId, GetData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showAddFeeDialog) {
|
||||
setCustomerSearchTerm('');
|
||||
setOpen(false);
|
||||
}
|
||||
}, [showAddFeeDialog]);
|
||||
|
||||
useEffect(() => {
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
@ -619,13 +629,72 @@ const AddFeeDialog = () => {
|
||||
<label className="form-label">
|
||||
Credit Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
{renderSelectWithLoading(
|
||||
formField.credit_destination,
|
||||
(value) => setFormField({ ...formField, credit_destination: value }),
|
||||
customersWithNames,
|
||||
'Select Customer',
|
||||
isLoadingCustomers
|
||||
)}
|
||||
<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>
|
||||
))}
|
||||
{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">
|
||||
|
||||
@ -7,15 +7,6 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@/components/ui/select';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList
|
||||
} from '@/components/ui/command';
|
||||
import {
|
||||
Dialog,
|
||||
DialogBody,
|
||||
@ -33,6 +24,8 @@ import { toast } from 'sonner';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
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_MASTER_DATA = apiConfig.service_master_data;
|
||||
@ -41,14 +34,12 @@ const API_URL_CUSTOMER = apiConfig.service_customer;
|
||||
interface WalletProps {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface CustomerProps {
|
||||
id: string;
|
||||
username: string;
|
||||
msisdn: string;
|
||||
fullname?: string;
|
||||
}
|
||||
|
||||
interface TransactionTypeProps {
|
||||
@ -61,18 +52,31 @@ const EditFeeDialog = () => {
|
||||
const { showEditFeeDialog, handleEditFeeDialog, selectedTransferFee } =
|
||||
useManageTransferFeeContext();
|
||||
const { reload } = useDataGrid();
|
||||
const [wallets, setWallets] = useState<WalletProps[]>([]);
|
||||
const { GetData, PutData } = useCallApi();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
|
||||
const parsedUser = getAuth()?.user;
|
||||
|
||||
const [wallets, setWallets] = useState<WalletProps[]>([]);
|
||||
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 [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
|
||||
const [isLoadingTransferFee, setIsLoadingTransferFee] = useState(false);
|
||||
const [isLoadingTransactionType, setIsLoadingTransactionType] = useState(false);
|
||||
const [isLoadingWallets, setIsLoadingWallets] = useState(false);
|
||||
const [isLoadingCustomers, setIsLoadingCustomers] = useState(false);
|
||||
|
||||
const initialState = {
|
||||
name: '',
|
||||
description: '',
|
||||
@ -109,7 +113,7 @@ const EditFeeDialog = () => {
|
||||
updated_at: formattedTime
|
||||
}));
|
||||
}
|
||||
}, [showEditFeeDialog]);
|
||||
}, [showEditFeeDialog, parsedUser?.username]);
|
||||
|
||||
const resetForm = () => {
|
||||
if (selectedTransferFee) {
|
||||
@ -178,10 +182,11 @@ const EditFeeDialog = () => {
|
||||
reload();
|
||||
handleEditFeeDialog(false, null);
|
||||
const createActivity = {
|
||||
module: 'Manage Transfer Type',
|
||||
description: `Edit Transfer Type => ${selectedTransferFee}`,
|
||||
module: 'Manage Transfer Fee',
|
||||
description: `Edit Transfer Fee => ${formField.name}`,
|
||||
action: 'U'
|
||||
};
|
||||
doSaveLogActivity(createActivity);
|
||||
} else {
|
||||
setAlert({ show: true, message: response?.message || 'Failed to update transfer fee' });
|
||||
}
|
||||
@ -196,6 +201,7 @@ const EditFeeDialog = () => {
|
||||
);
|
||||
|
||||
const fetchWallets = useCallback(async () => {
|
||||
setIsLoadingWallets(true);
|
||||
const params = {
|
||||
limit: 100,
|
||||
page: 1,
|
||||
@ -213,6 +219,8 @@ const EditFeeDialog = () => {
|
||||
} catch (error) {
|
||||
console.error('Error fetching wallets', error);
|
||||
setWallets([]);
|
||||
} finally {
|
||||
setIsLoadingWallets(false);
|
||||
}
|
||||
}, [GetData]);
|
||||
|
||||
@ -225,6 +233,7 @@ const EditFeeDialog = () => {
|
||||
if (!showEditFeeDialog) return;
|
||||
|
||||
const getCustomerList = async (sorting: any) => {
|
||||
setIsLoadingCustomers(true);
|
||||
try {
|
||||
sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
|
||||
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
|
||||
@ -237,16 +246,19 @@ const EditFeeDialog = () => {
|
||||
setCustomers(response?.data.list || []);
|
||||
} catch (error) {
|
||||
console.error('Error fetching customers', error);
|
||||
} finally {
|
||||
setIsLoadingCustomers(false);
|
||||
}
|
||||
};
|
||||
|
||||
getCustomerList([{ id: 'msisdn', desc: false }]);
|
||||
getCustomerList([{ id: 'id', desc: false }]);
|
||||
}, [showEditFeeDialog, GetData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showEditFeeDialog) return;
|
||||
|
||||
const getTransactionTypeList = async (sorting: any) => {
|
||||
setIsLoadingTransactionType(true);
|
||||
try {
|
||||
sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
|
||||
const response = await GetData(`${API_URL}/transactiontype/list`, {
|
||||
@ -259,6 +271,8 @@ const EditFeeDialog = () => {
|
||||
setTransactionTypes(response?.data.list || []);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction types', error);
|
||||
} finally {
|
||||
setIsLoadingTransactionType(false);
|
||||
}
|
||||
};
|
||||
|
||||
@ -272,6 +286,7 @@ const EditFeeDialog = () => {
|
||||
|
||||
const fetchTransactionFee = useCallback(
|
||||
async (id: string) => {
|
||||
setIsLoadingTransferFee(true);
|
||||
try {
|
||||
const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, {});
|
||||
|
||||
@ -300,10 +315,16 @@ const EditFeeDialog = () => {
|
||||
updated_by: parsedUser?.username,
|
||||
updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
|
||||
});
|
||||
|
||||
if (response.data.transaction_type?.name) {
|
||||
setTransactionTypeName(response.data.transaction_type.name);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction fee details', error);
|
||||
setAlert({ show: true, message: 'Failed to fetch transaction fee details' });
|
||||
} finally {
|
||||
setIsLoadingTransferFee(false);
|
||||
}
|
||||
},
|
||||
[GetData, parsedUser?.username]
|
||||
@ -321,12 +342,49 @@ const EditFeeDialog = () => {
|
||||
hasFetchedRef.current = false;
|
||||
}
|
||||
}, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setFormField(initialState);
|
||||
setAlert({ show: false, message: '' });
|
||||
setCustomerSearchTerm('');
|
||||
setOpen(false);
|
||||
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 (
|
||||
<Dialog
|
||||
@ -363,364 +421,422 @@ const EditFeeDialog = () => {
|
||||
</Alert>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form action="" onSubmit={doUpdateTransferFee}>
|
||||
<div className="card flex flex-col gap-5">
|
||||
<div className="card-body grid gap-5 p-0">
|
||||
<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 }))
|
||||
}
|
||||
/>
|
||||
|
||||
{isLoadingTransferFee ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
<p className="mt-4 text-gray-500">Loading transfer fee details...</p>
|
||||
</div>
|
||||
) : (
|
||||
<form action="" onSubmit={doUpdateTransferFee}>
|
||||
<div className="card flex flex-col gap-5">
|
||||
<div className="card-body grid gap-5 p-0">
|
||||
<div className="w-full">
|
||||
<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>
|
||||
<Select
|
||||
value={formField.credit_destination}
|
||||
onValueChange={(value) =>
|
||||
setFormField({ ...formField, credit_destination: value })
|
||||
}
|
||||
value={formField.deduct_from}
|
||||
onValueChange={(value) => setFormField({ ...formField, deduct_from: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Customer" />
|
||||
<SelectValue placeholder="Select Deduct From" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{customers.map((customer) => (
|
||||
<SelectItem value={customer.id} key={customer.id}>
|
||||
{customer.fullname || `${customer.username} - ${customer.msisdn}`}
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectItem value="D">Destination Member</SelectItem>
|
||||
<SelectItem value="S">Source Member</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Credit Destination Account <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.credit_destination_account}
|
||||
onValueChange={(value) =>
|
||||
setFormField({ ...formField, credit_destination_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 className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct From Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
{renderSelectWithLoading(
|
||||
formField.deduct_from_account,
|
||||
(value) => setFormField({ ...formField, deduct_from_account: value }),
|
||||
wallets,
|
||||
'Select Wallet',
|
||||
isLoadingWallets
|
||||
)}
|
||||
</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">
|
||||
<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>
|
||||
))}
|
||||
{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">
|
||||
<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={'default'} type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Credit Destination Account <span className="text-red-500">*</span>
|
||||
</label>
|
||||
{renderSelectWithLoading(
|
||||
formField.credit_destination_account,
|
||||
(value) => setFormField({ ...formField, credit_destination_account: value }),
|
||||
wallets,
|
||||
'Select Wallet',
|
||||
isLoadingWallets
|
||||
)}
|
||||
</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">
|
||||
<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>
|
||||
</form>
|
||||
</form>
|
||||
)}
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export { EditFeeDialog };
|
||||
export {EditFeeDialog};
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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';
|
||||
|
||||
Reference in New Issue
Block a user