[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
|
// DISBURSEMENT
|
||||||
import HistoryTransactionDisbursement from '@/pages/disbursement/history-transaction/HistoryTransaction';
|
import HistoryTransactionDisbursement from '@/pages/disbursement/history-transaction/HistoryTransaction';
|
||||||
|
import SearchMember from '@/pages/members/search-member/SearchMember';
|
||||||
import WithdrawalEmoney from '@/pages/transaction/withdrawl-emoney/WithdrawalEmoney';
|
import WithdrawalEmoney from '@/pages/transaction/withdrawl-emoney/WithdrawalEmoney';
|
||||||
|
|
||||||
// DISBURSEMENT
|
// DISBURSEMENT
|
||||||
@ -94,6 +95,8 @@ const AppRoutingSetup = (): ReactElement => {
|
|||||||
<Route path="/members/create-member-credential" element={<MemberCredential />} />
|
<Route path="/members/create-member-credential" element={<MemberCredential />} />
|
||||||
<Route path="/members/feedback-member" element={<FeedbackMemberMaster />} />
|
<Route path="/members/feedback-member" element={<FeedbackMemberMaster />} />
|
||||||
<Route path="/members/agent-balance" element={<AgentBalance />} />
|
<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 />} />
|
<Route path="/access/access-type-management" element={<AccessType />} />
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user