[skip ci] adding sub module SearchMember on Members Module
This commit is contained in:
bagusajisaputroo
47
src/pages/members/search-member/SearchMember.tsx
Normal file
47
src/pages/members/search-member/SearchMember.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import { Container, DataGridInner } from '@/components';
|
||||
// import {
|
||||
// ManageTransferTypeContext,
|
||||
// ManageTransferTypeContextProvider
|
||||
// } from './hooks/ManageTransferTypeContext';
|
||||
// import AddDialog from './blocks/AddDialog';
|
||||
// import { Breadcrumbs, Link } from '@mui/material';
|
||||
// import DeleteDialog from './blocks/DeleteDialog';
|
||||
// import { EditDialog } from './blocks/EditDialog';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { ManageSearchMemberContextProvider } from './hooks/ManageSearchMember';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
|
||||
const SearchMember = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>TPAY | Manage Search Member</title>
|
||||
</Helmet>
|
||||
<ManageSearchMemberContextProvider>
|
||||
<Container>
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Search Member</h1>
|
||||
<Breadcrumbs sx={{ mb: 2 }}>
|
||||
<Link underline="none" color="inherit" href="/">
|
||||
<span className="text-sm hover:underline">Dashboard</span>
|
||||
</Link>
|
||||
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Members</span>
|
||||
</Link>
|
||||
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Manage Search Member</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
<div className="grid gap-5 lg:gap-7.5">
|
||||
<DataGridInner />
|
||||
</div>
|
||||
|
||||
</Container>
|
||||
</ManageSearchMemberContextProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchMember;
|
||||
377
src/pages/members/search-member/blocks/DetailMember.tsx
Normal file
377
src/pages/members/search-member/blocks/DetailMember.tsx
Normal file
@ -0,0 +1,377 @@
|
||||
import { useState, useContext, useRef } from 'react';
|
||||
import axios from 'axios';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogBody
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@/components/ui/select';
|
||||
import ConfirmDialog from '@/components/confirm';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useManageSearchMemberContext } from '../hooks/useManageSearchMemberContext';
|
||||
|
||||
const BASE_URL_CUSTOMER = apiConfig.service_customer;
|
||||
|
||||
const DetailMember = () => {
|
||||
const {
|
||||
showEditDialog,
|
||||
handleEditDialog,
|
||||
selectedCustomerData,
|
||||
doGetSearchMemberListData,
|
||||
refreshTable
|
||||
} = useManageSearchMemberContext();
|
||||
|
||||
const [confirmDialog, setConfirmDialog] = useState(false);
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
const [previewImg, setPreviewImg] = useState({
|
||||
status: false,
|
||||
img: ''
|
||||
});
|
||||
const parentRef = useRef<any | null>(null);
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
if (!dateString) return 'No Data';
|
||||
try {
|
||||
return new Date(dateString).toLocaleDateString('en-GB');
|
||||
} catch {
|
||||
return 'Invalid Date';
|
||||
}
|
||||
};
|
||||
|
||||
const getPinStatus = (status: string) => {
|
||||
if (status === 'Y')
|
||||
return {
|
||||
msg: 'Active',
|
||||
btn: 'Block PIN',
|
||||
canBlock: true,
|
||||
variant: 'destructive' as const
|
||||
};
|
||||
if (status === 'N')
|
||||
return {
|
||||
msg: 'Not Active',
|
||||
btn: 'PIN Not Active',
|
||||
canBlock: false,
|
||||
variant: 'secondary' as const
|
||||
};
|
||||
if (status === 'P')
|
||||
return {
|
||||
msg: 'Suspend PIN',
|
||||
btn: 'PIN Blocked',
|
||||
canBlock: false,
|
||||
variant: 'secondary' as const
|
||||
};
|
||||
if (status === 'O')
|
||||
return {
|
||||
msg: 'Suspend OTP',
|
||||
btn: 'OTP Blocked',
|
||||
canBlock: false,
|
||||
variant: 'secondary' as const
|
||||
};
|
||||
return {
|
||||
msg: 'Unknown Status',
|
||||
btn: 'Unknown',
|
||||
canBlock: false,
|
||||
variant: 'secondary' as const
|
||||
};
|
||||
};
|
||||
|
||||
const handleBlockPin = async () => {
|
||||
if (!selectedCustomerData?.id) {
|
||||
toast.error('Customer data not available');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsUpdating(true);
|
||||
await axios.put(`${BASE_URL_CUSTOMER}/customer/statuspin`, {
|
||||
customerid: selectedCustomerData.id,
|
||||
status: 'Block'
|
||||
});
|
||||
|
||||
toast.success('PIN successfully blocked');
|
||||
|
||||
handleEditDialog(false, null);
|
||||
|
||||
setTimeout(() => {
|
||||
refreshTable();
|
||||
}, 500);
|
||||
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Failed to block PIN');
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
setConfirmDialog(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddDialog = (show: boolean) => {
|
||||
handleEditDialog(show, show ? selectedCustomerData : null);
|
||||
};
|
||||
|
||||
const imagePreview = (file: any) => {
|
||||
if (file && typeof file === 'object' && file.type && file.type.startsWith('image/')) {
|
||||
const previewURL = URL.createObjectURL(file);
|
||||
return previewURL;
|
||||
}
|
||||
return file;
|
||||
};
|
||||
|
||||
const handlePrevImg = (par: boolean) => {
|
||||
if (par) setPreviewImg({ status: true, img: '' });
|
||||
if (!par) setPreviewImg({ status: false, img: '' });
|
||||
};
|
||||
|
||||
const onClickImg = (img: any) => {
|
||||
setPreviewImg({ status: true, img });
|
||||
};
|
||||
|
||||
const generateInput = (label: string, name: string, value: any, type: string = 'text', required: boolean = false, disabled: boolean = true) => {
|
||||
const displayValue = value || '';
|
||||
|
||||
function generateDate(isoString: string) {
|
||||
return isoString.slice(0, 10);
|
||||
}
|
||||
|
||||
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-500">{required ? "*" : ""}</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
readOnly={disabled}
|
||||
required={required}
|
||||
type={type}
|
||||
name={name}
|
||||
value={displayValue ? (type === 'date' ? generateDate(displayValue) : displayValue) : ""}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const generateImage = (label: string, name: string, photoUrl: any) => {
|
||||
return (
|
||||
<>
|
||||
{previewImg.status && (
|
||||
<PreviewImage
|
||||
previewImgDialog={previewImg.status}
|
||||
handlePreviewImgDialog={handlePrevImg}
|
||||
modalImage={previewImg.img}
|
||||
/>
|
||||
)}
|
||||
<div className="flex items-center justify-between w-full max-w-xl">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
{label}<span className="text-red-500"></span>
|
||||
</label>
|
||||
<div className="flex items-center space-x-4 w-3/4 justify-end">
|
||||
{photoUrl ? (
|
||||
<div className="border-2 border-dashed border-red-300 rounded-md p-2">
|
||||
<img
|
||||
width={300}
|
||||
height={250}
|
||||
srcSet={imagePreview(photoUrl)}
|
||||
src={imagePreview(photoUrl)}
|
||||
alt={name}
|
||||
style={{borderRadius: 10, cursor: 'pointer'}}
|
||||
onClick={() => onClickImg(imagePreview(photoUrl))}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<span>No Data</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const generatePinStatusField = (label: string, status: string) => {
|
||||
const pinStatus = getPinStatus(status);
|
||||
|
||||
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}
|
||||
</label>
|
||||
<div className="flex-1 flex items-center gap-3 p-3 border border-gray-300 rounded-md bg-gray-50">
|
||||
<span className="text-gray-900 flex-1">{pinStatus.msg}</span>
|
||||
{pinStatus.canBlock && (
|
||||
<Button
|
||||
variant={pinStatus.variant}
|
||||
size="sm"
|
||||
onClick={() => setConfirmDialog(true)}
|
||||
disabled={isUpdating}
|
||||
>
|
||||
{isUpdating ? 'Blocking...' : pinStatus.btn}
|
||||
</Button>
|
||||
)}
|
||||
{!pinStatus.canBlock && (
|
||||
<Button
|
||||
variant={pinStatus.variant}
|
||||
size="sm"
|
||||
disabled
|
||||
>
|
||||
{pinStatus.btn}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (!selectedCustomerData) {
|
||||
return (
|
||||
<Dialog open={showEditDialog} onOpenChange={(open) => handleAddDialog(open)}>
|
||||
<DialogContent className="container-fixed max-w-[85%] flex flex-col p-2">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Member - Detail</DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogBody>
|
||||
<div className="p-4 text-gray-500 text-center">No data available</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={showEditDialog} onOpenChange={(open) => handleAddDialog(open)}>
|
||||
<DialogContent className="container-fixed max-w-[85%] flex flex-col p-2">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Member - Detail</DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogBody ref={parentRef}>
|
||||
<div className="flex flex-col">
|
||||
<div className="card-body grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
|
||||
{/* Basic Information */}
|
||||
{generateInput('Group', 'group_name', selectedCustomerData.group_name || selectedCustomerData.destinationGroup, 'text', true)}
|
||||
{generateInput('Username', 'username', selectedCustomerData.username, 'text', true)}
|
||||
{generateInput('Full Name', 'fullname', selectedCustomerData.fullname, 'text', true)}
|
||||
{generateInput('Gender', 'gender', selectedCustomerData.gender, 'text', true)}
|
||||
{generateInput('Date of Birth', 'date_birth', selectedCustomerData.date_birth, 'date', true)}
|
||||
{generateInput('Phone Number', 'msisdn', selectedCustomerData.msisdn, 'text', true)}
|
||||
{generateInput('Email', 'email', selectedCustomerData.email, 'text', true)}
|
||||
{generateInput('Mother Fullname', 'mother_fullname', selectedCustomerData.mother_fullname, 'text', true)}
|
||||
{generateInput('Identity Type', 'identity_type', selectedCustomerData.identity_type)}
|
||||
{generateInput('Identity Number', 'identity_number', selectedCustomerData.identity_number)}
|
||||
{generateInput('Address', 'address', selectedCustomerData.address, 'text', true)}
|
||||
|
||||
{/* Location Information */}
|
||||
{generateInput('Profession', 'profession', selectedCustomerData.profession)}
|
||||
{generateInput('Municipio', 'municipio_name', selectedCustomerData.municipio_name)}
|
||||
{generateInput('Posto', 'posto_adms_name', selectedCustomerData.posto_adms_name)}
|
||||
{generateInput('Suco', 'suco_name', selectedCustomerData.suco_name)}
|
||||
{generateInput('Aldeia', 'aldeia_name', selectedCustomerData.aldeia_name)}
|
||||
{generateInput('Nationality', 'nationality', selectedCustomerData.nationality, 'text', true)}
|
||||
{generateImage('Photo', 'photouser', selectedCustomerData.photouser)}
|
||||
<div className="bg-white space-y-6 col-span-1 md:col-span-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bank Information Section */}
|
||||
<div className="bg-white p-6 rounded-md shadow-md space-y-6 col-span-1 md:col-span-2">
|
||||
<h2 className="text-lg font-semibold">Bank Information</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{generateInput('Bank Name', 'bank_name', selectedCustomerData.bank_name)}
|
||||
{generateInput('Bank Account', 'bank_account', selectedCustomerData.bank_account)}
|
||||
{generateInput('IBank Number', 'ibank_number', selectedCustomerData.ibank_number)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Agent Information Section */}
|
||||
<div className="bg-white p-6 rounded-md shadow-md space-y-6 col-span-1 md:col-span-2">
|
||||
<h2 className="text-lg font-semibold">Agent Information</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{generateInput('License Number', 'license_number', selectedCustomerData.license_number)}
|
||||
{generateInput('Merchant Name', 'agent_name', selectedCustomerData.agent_name)}
|
||||
{generateInput('Merchant Address', 'merchantaddress', selectedCustomerData.merchantaddress)}
|
||||
{generateInput('Longitude Merchant', 'longitudemerchant', selectedCustomerData.longitudemerchant)}
|
||||
{generateInput('Latitude Merchant', 'latitudemerchant', selectedCustomerData.latitudemerchant)}
|
||||
{generateImage('Photo Merchant', 'photomerchant', selectedCustomerData.photomerchant)}
|
||||
{generateImage('File Selfie', 'file_selfie', selectedCustomerData.file_selfie)}
|
||||
{generateImage('File Document', 'file_document_id', selectedCustomerData.file_document_id)}
|
||||
{generateImage('File Document & Selfie', 'file_document_id_selfie', selectedCustomerData.file_document_id_selfie)}
|
||||
{generateImage('File Commercial License', 'file_commercial_license', selectedCustomerData.file_commercial_license)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Information Section */}
|
||||
<div className="bg-white p-6 rounded-md shadow-md space-y-6 col-span-1 md:col-span-2">
|
||||
<h2 className="text-lg font-semibold">Status Information</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{generatePinStatusField('PIN Status', selectedCustomerData.status || '')}
|
||||
{generateInput('Created Date', 'created_at', formatDate(selectedCustomerData.created_at))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="col-span-1 md:col-span-2 flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={() => handleAddDialog(false)}>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<ConfirmDialog
|
||||
open={confirmDialog}
|
||||
onOpenChange={setConfirmDialog}
|
||||
content="Are you sure you want to block this customer's PIN? This action cannot be undone from this interface."
|
||||
onYes={handleBlockPin}
|
||||
onNo={() => setConfirmDialog(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function PreviewImage({previewImgDialog, handlePreviewImgDialog, modalImage}: any) {
|
||||
return (
|
||||
<Dialog open={previewImgDialog} onOpenChange={(open) => handlePreviewImgDialog(open)}>
|
||||
<DialogContent className="">
|
||||
<DialogTitle aria-describedby={''}></DialogTitle>
|
||||
<DialogBody>
|
||||
<button
|
||||
onClick={() => handlePreviewImgDialog(false)}
|
||||
className="absolute top-2 right-2 text-white bg-red-600 hover:bg-red-800 rounded-full px-3 py-1 text-xl font-bold"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<img
|
||||
src={modalImage}
|
||||
alt="Preview"
|
||||
className="max-w-full max-h-[80vh] rounded-lg"
|
||||
/>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailMember;
|
||||
88
src/pages/members/search-member/blocks/FilterCard.tsx
Normal file
88
src/pages/members/search-member/blocks/FilterCard.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useState } from 'react';
|
||||
|
||||
const CustomerFilterForm = ({
|
||||
onFilter,
|
||||
onReset
|
||||
}: {
|
||||
onFilter: (filters: { username?: string; msisdn?: string }) => void;
|
||||
onReset?: () => void;
|
||||
}) => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [msisdn, setMsisdn] = useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!username.trim() && !msisdn.trim()) {
|
||||
alert('Please fill at least one search field');
|
||||
return;
|
||||
}
|
||||
|
||||
onFilter({ username, msisdn });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setUsername('');
|
||||
setMsisdn('');
|
||||
if (onReset) {
|
||||
onReset();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="card max-w-[1200px] w-full">
|
||||
<div className="card-body p-16">
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
<div>
|
||||
<label htmlFor="username" className="block text-base font-medium text-gray-700 mb-2">
|
||||
Username
|
||||
</label>
|
||||
<Input
|
||||
id="username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Search Username"
|
||||
className="w-full h-12 text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="msisdn" className="block text-base font-medium text-gray-700 mb-2">
|
||||
MSISDN (Phone Number) <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
id="msisdn"
|
||||
value={msisdn}
|
||||
onChange={(e) => setMsisdn(e.target.value)}
|
||||
placeholder="Search MSISDN"
|
||||
className="w-full h-12 text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
type="submit"
|
||||
className="bg-red-600 text-white px-8 py-3 text-base"
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleReset}
|
||||
className="border-gray-300 hover:bg-gray-50 px-8 py-3 text-base"
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomerFilterForm;
|
||||
338
src/pages/members/search-member/hooks/ManageSearchMember.tsx
Normal file
338
src/pages/members/search-member/hooks/ManageSearchMember.tsx
Normal file
@ -0,0 +1,338 @@
|
||||
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { createContext, useCallback, useMemo, useState } from 'react';
|
||||
import CustomerDetailDialog from '../blocks/DetailMember';
|
||||
import CustomerFilterForm from '../blocks/FilterCard';
|
||||
|
||||
interface AccountProps {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface CustomerData {
|
||||
group_id: string;
|
||||
group_name: string;
|
||||
municipio_id: string;
|
||||
municipio_name: string;
|
||||
posto_adms_id: string;
|
||||
posto_adms_name: string;
|
||||
suco_id: string;
|
||||
suco_name: string;
|
||||
aldeia_id: string;
|
||||
aldeia_name: string;
|
||||
id: string;
|
||||
msisdn: string;
|
||||
email: string;
|
||||
fullname: string;
|
||||
username: string;
|
||||
mother_fullname: string;
|
||||
agent_name: string;
|
||||
bank_name: string;
|
||||
bank_account: string;
|
||||
ibank_number: string;
|
||||
address: string;
|
||||
longitude: string;
|
||||
latitude: string;
|
||||
nationality: string;
|
||||
file_selfie: string;
|
||||
file_document_id: string;
|
||||
file_document_id_selfie: string;
|
||||
file_commercial_license: string;
|
||||
identity_number: string;
|
||||
merchantaddress: string;
|
||||
license_number: string;
|
||||
date_birth: string;
|
||||
gender: string;
|
||||
status: string;
|
||||
created_at: string;
|
||||
isneedapproval: string;
|
||||
identity_type: string;
|
||||
longitudemerchant: string;
|
||||
latitudemerchant: string;
|
||||
profession: string;
|
||||
created_by: string;
|
||||
approval_description_premium: string;
|
||||
approval_description_agent: string;
|
||||
photouser: string;
|
||||
photomerchant: string;
|
||||
destinationGroup: string;
|
||||
statusApproval: string;
|
||||
}
|
||||
|
||||
interface ContextProps {
|
||||
showEditDialog: boolean;
|
||||
handleEditDialog: (show: boolean, selectedData: CustomerData | null) => void;
|
||||
showAddDialog: boolean;
|
||||
handleAddDialog: (show: boolean) => void;
|
||||
selectedCustomerData: CustomerData | null;
|
||||
doGetSearchMemberListData: (
|
||||
page: number,
|
||||
limit: number,
|
||||
sorting: any,
|
||||
filter: any
|
||||
) => Promise<{ data: any[]; totalCount: number }>;
|
||||
showTable: boolean;
|
||||
showFilterCard: boolean;
|
||||
currentFilters: any;
|
||||
handleCustomFilter: (filters: { username?: string; msisdn?: string }) => void;
|
||||
handleResetFilter: () => void;
|
||||
handleShowSearchAgain: () => void;
|
||||
refreshTable: () => void;
|
||||
}
|
||||
|
||||
const initialProps: ContextProps = {
|
||||
showEditDialog: false,
|
||||
handleEditDialog: () => {},
|
||||
showAddDialog: false,
|
||||
handleAddDialog: () => {},
|
||||
selectedCustomerData: null,
|
||||
doGetSearchMemberListData: async () => ({ data: [], totalCount: 0 }),
|
||||
showTable: false,
|
||||
showFilterCard: true,
|
||||
currentFilters: {},
|
||||
handleCustomFilter: () => {},
|
||||
handleResetFilter: () => {},
|
||||
handleShowSearchAgain: () => {},
|
||||
refreshTable: () => {}
|
||||
};
|
||||
|
||||
const ManageSearchMemberContext = createContext<ContextProps>(initialProps);
|
||||
const API_URL = apiConfig.service_customer;
|
||||
|
||||
const ManageSearchMemberContextProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [showEditDialog, setShowEditDialog] = useState(false);
|
||||
const [showAddDialog, setShowAddDialog] = useState(false);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [selectedCustomerData, setSelectedCustomerData] = useState<CustomerData | null>(null);
|
||||
const { GetData } = useCallApi();
|
||||
|
||||
const [showTable, setShowTable] = useState(false);
|
||||
const [showFilterCard, setShowFilterCard] = useState(true);
|
||||
const [currentFilters, setCurrentFilters] = useState({});
|
||||
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
||||
|
||||
const handleCustomFilter = useCallback((filters: { username?: string; msisdn?: string }) => {
|
||||
const formattedFilters: any[] = [];
|
||||
|
||||
if (filters.username?.trim()) {
|
||||
formattedFilters.push({ id: "username", value: filters.username.trim() });
|
||||
}
|
||||
|
||||
if (filters.msisdn?.trim()) {
|
||||
formattedFilters.push({ id: "msisdn", value: filters.msisdn.trim() });
|
||||
}
|
||||
|
||||
setCurrentFilters(formattedFilters);
|
||||
setShowTable(true);
|
||||
setShowFilterCard(false);
|
||||
}, []);
|
||||
|
||||
const handleResetFilter = useCallback(() => {
|
||||
setCurrentFilters({});
|
||||
setShowTable(false);
|
||||
setShowFilterCard(true);
|
||||
}, []);
|
||||
|
||||
const handleShowSearchAgain = useCallback(() => {
|
||||
setShowFilterCard(true);
|
||||
setShowTable(false);
|
||||
}, []);
|
||||
|
||||
const refreshTable = useCallback(() => {
|
||||
setRefreshTrigger(prev => prev + 1);
|
||||
}, []);
|
||||
|
||||
const handleEditDialog = useCallback((show: boolean, selectedData: CustomerData | null) => {
|
||||
setSelectedCustomerData(show ? selectedData : null);
|
||||
setShowEditDialog(show);
|
||||
}, []);
|
||||
|
||||
const handleAddDialog = useCallback((show: boolean) => {
|
||||
setShowAddDialog(show);
|
||||
}, []);
|
||||
|
||||
const doGetSearchMemberListData = useCallback(
|
||||
async (page: any, limit: any, sorting: any, filter: any) => {
|
||||
try {
|
||||
const finalSorting = sorting.length === 0 ? [{ id: 'name', desc: true }] : sorting;
|
||||
|
||||
const filterToUse = Object.keys(currentFilters).length > 0 ? currentFilters : (filter.length ? filter : []);
|
||||
|
||||
const response = await GetData(`${API_URL}/customer/list`, {
|
||||
limit: limit,
|
||||
page: page + 1,
|
||||
with_deleted: false,
|
||||
order_field: 'username',
|
||||
order_direction: 'DESC',
|
||||
filter: JSON.stringify(filterToUse),
|
||||
specialFilter: true
|
||||
});
|
||||
|
||||
return {
|
||||
data: response?.data?.list || [],
|
||||
totalCount: response?.data?.total_count || 0
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Fetch error:', error);
|
||||
return { data: [], totalCount: 0 };
|
||||
}
|
||||
},
|
||||
[GetData, currentFilters]
|
||||
);
|
||||
|
||||
const columns = useMemo<ColumnDef<any>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.username,
|
||||
id: 'username',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Username" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.fullname,
|
||||
id: 'fullname',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Fullname" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.msisdn,
|
||||
id: 'phone_number',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Phone Number" column={column} />,
|
||||
enableSorting: true
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.destinationGroup,
|
||||
id: 'group',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Group" column={column} />,
|
||||
enableSorting: true
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.email,
|
||||
id: 'email',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Email" column={column} />,
|
||||
enableSorting: true
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => new Date(row.created_at).toLocaleString(),
|
||||
id: 'created_at',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Created Date" column={column} />,
|
||||
enableSorting: true
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
cell: (data) => {
|
||||
const row = data.row.original;
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleEditDialog(true, row)}
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
},
|
||||
meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
|
||||
}
|
||||
],
|
||||
[handleEditDialog]
|
||||
);
|
||||
|
||||
const defaultSorting = useMemo(() => [{ id: 'name', desc: true }], []);
|
||||
|
||||
const contextValue = useMemo(
|
||||
() => ({
|
||||
showEditDialog,
|
||||
handleEditDialog,
|
||||
showAddDialog,
|
||||
handleAddDialog,
|
||||
selectedCustomerData,
|
||||
doGetSearchMemberListData,
|
||||
showTable,
|
||||
showFilterCard,
|
||||
currentFilters,
|
||||
handleCustomFilter,
|
||||
handleResetFilter,
|
||||
handleShowSearchAgain,
|
||||
refreshTable
|
||||
}),
|
||||
[
|
||||
showEditDialog,
|
||||
handleEditDialog,
|
||||
showAddDialog,
|
||||
handleAddDialog,
|
||||
selectedCustomerData,
|
||||
doGetSearchMemberListData,
|
||||
showTable,
|
||||
showFilterCard,
|
||||
currentFilters,
|
||||
handleCustomFilter,
|
||||
handleResetFilter,
|
||||
handleShowSearchAgain,
|
||||
refreshTable
|
||||
]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<ManageSearchMemberContext.Provider value={contextValue}>
|
||||
<div className="px-4 py-6">
|
||||
{showFilterCard && (
|
||||
<div className="mb-6 mx-auto max-w-lg">
|
||||
<div className="p-4 bg-white rounded-lg shadow-sm border border-gray-200">
|
||||
<h3 className="text-lg font-semibold mb-4 text-gray-800 text-center">Search Members</h3>
|
||||
<CustomerFilterForm onFilter={handleCustomFilter} onReset={handleResetFilter} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Table with Reset Button - Only visible after filter is applied */}
|
||||
{showTable && (
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200">
|
||||
{/* Reset Button above table */}
|
||||
<div className="p-4 border-b border-gray-200 flex justify-between items-center">
|
||||
<h3 className="text-lg font-semibold text-gray-800">Search Results</h3>
|
||||
<Button
|
||||
onClick={handleShowSearchAgain}
|
||||
variant="outline"
|
||||
className="border-blue-600 text-blue-600 hover:bg-blue-50"
|
||||
>
|
||||
Search Again
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
<DataGridProvider
|
||||
columns={columns}
|
||||
pagination={{ size: 10 }}
|
||||
layout={{ card: true }}
|
||||
sorting={defaultSorting}
|
||||
serverSide={true}
|
||||
key={refreshTrigger}
|
||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||
doGetSearchMemberListData(pageIndex, pageSize, sorting, columnFilters)
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</DataGridProvider>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<CustomerDetailDialog />
|
||||
</ManageSearchMemberContext.Provider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export {ManageSearchMemberContext, ManageSearchMemberContextProvider };
|
||||
@ -0,0 +1,11 @@
|
||||
import { useContext } from 'react';
|
||||
// import { ManageSearchMemberContext } from '../ManageSearchMember';
|
||||
import {ManageSearchMemberContext } from './ManageSearchMember';
|
||||
|
||||
export const useManageSearchMemberContext = () => {
|
||||
const context = useContext(ManageSearchMemberContext);
|
||||
if (!context) {
|
||||
throw new Error('useManageSearchMemberContext must be used within ManageSearchMemberContextProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
@ -49,6 +49,7 @@ import AgentBalance from '@/pages/members/agent-balance/AgentBalance';
|
||||
|
||||
// DISBURSEMENT
|
||||
import HistoryTransactionDisbursement from '@/pages/disbursement/history-transaction/HistoryTransaction';
|
||||
import SearchMember from '@/pages/members/search-member/SearchMember';
|
||||
import WithdrawalEmoney from '@/pages/transaction/withdrawl-emoney/WithdrawalEmoney';
|
||||
|
||||
// DISBURSEMENT
|
||||
@ -94,6 +95,8 @@ const AppRoutingSetup = (): ReactElement => {
|
||||
<Route path="/members/create-member-credential" element={<MemberCredential />} />
|
||||
<Route path="/members/feedback-member" element={<FeedbackMemberMaster />} />
|
||||
<Route path="/members/agent-balance" element={<AgentBalance />} />
|
||||
<Route path="/members/search-member" element={<SearchMember />} />
|
||||
<Route path="/members/search-member" element={<SearchMember />} />
|
||||
|
||||
<Route path="/access/access-type-management" element={<AccessType />} />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user