agent
This commit is contained in:
unknown
@ -49,23 +49,35 @@ steps:
|
||||
commands:
|
||||
- npm i typescript -g
|
||||
- npm run build:production
|
||||
- echo '✅ success compile typescript and ready to deploy'
|
||||
- echo '✅ success compile typescript'
|
||||
when:
|
||||
branch:
|
||||
- master
|
||||
depends_on: [setup]
|
||||
|
||||
- name: deploy
|
||||
- name: build-image
|
||||
image: docker
|
||||
commands:
|
||||
- docker builder prune -f
|
||||
- docker container prune -f
|
||||
- docker-compose build
|
||||
- docker-compose up -d --no-deps --build --remove-orphans
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
when:
|
||||
branch:
|
||||
- master
|
||||
depends_on: [setup, build-src]
|
||||
|
||||
- name: deploy
|
||||
image: docker
|
||||
commands:
|
||||
- docker-compose up -d --no-deps --remove-orphans
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
when:
|
||||
branch:
|
||||
- master
|
||||
depends_on: [setup, build-src, build-image]
|
||||
|
||||
- name: telegram failed notify
|
||||
image: appleboy/drone-telegram
|
||||
@ -119,3 +131,4 @@ steps:
|
||||
- success
|
||||
branch:
|
||||
- master
|
||||
depends_on: [setup, build-src, build-image, deploy]
|
||||
|
||||
BIN
public/media/images/fixed-card.png
Normal file
BIN
public/media/images/fixed-card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
@ -104,7 +104,7 @@ const AgentBalance = () => {
|
||||
|
||||
const handleUpdate = async (data: any) => {
|
||||
await getQrCode(data.id);
|
||||
setFormData(data)
|
||||
setFormData(data);
|
||||
setDialogType('update');
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
@ -116,14 +116,14 @@ const AgentBalance = () => {
|
||||
// fetchAgentBalance();
|
||||
};
|
||||
|
||||
async function getQrCode(customerId:any): Promise<void> {
|
||||
async function getQrCode(customerId: any): Promise<void> {
|
||||
try {
|
||||
setBarcode(``)
|
||||
let getToken = await axios.get(`${BASE_URL}/token/get`, { params: { id: customerId }});
|
||||
setBarcode(``);
|
||||
let getToken = await axios.get(`${BASE_URL}/token/get`, { params: { id: customerId } });
|
||||
console.log(getToken.data.data);
|
||||
setBarcode(getToken.data.data.qrCode);
|
||||
} catch (error: any) {
|
||||
toast.warning(error.message)
|
||||
toast.warning(error.message);
|
||||
console.log(error);
|
||||
} finally {
|
||||
// setBarcode(`https://miro.medium.com/v2/resize:fit:250/1*DcceOyLkzU--EzP4PYKd_g.png`)
|
||||
@ -193,7 +193,11 @@ const AgentBalance = () => {
|
||||
<Dialog open={isDialogOpen} onClose={closeDialog}>
|
||||
<DialogContent className="w-full flex justify-center items-center">
|
||||
<div className="relative">
|
||||
<PaymentCard barcode={barcode} customerId={formData.id} agent_name={formData.agent_name}/>
|
||||
<PaymentCard
|
||||
barcode={barcode}
|
||||
customerId={formData.id}
|
||||
agent_name={formData.agent_name}
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
@ -203,20 +207,20 @@ const AgentBalance = () => {
|
||||
};
|
||||
|
||||
// ====================
|
||||
const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
|
||||
const PaymentCard = ({ barcode, agent_name, customerId }: any) => {
|
||||
const [token_legacy, setToken_legacy] = useState('');
|
||||
const cardRef:any = useRef(null);
|
||||
const cardRef: any = useRef(null);
|
||||
|
||||
const waitForImageLoad = (img: HTMLImageElement): Promise<void> => {
|
||||
return new Promise((resolve) => {
|
||||
if (img.complete && img.naturalHeight !== 0) {
|
||||
resolve();
|
||||
} else {
|
||||
toast.warning(`No QR Code`)
|
||||
toast.warning(`No QR Code`);
|
||||
img.onload = () => resolve();
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (!cardRef.current) return;
|
||||
@ -225,14 +229,14 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
|
||||
if (img) {
|
||||
await waitForImageLoad(img);
|
||||
} else {
|
||||
return toast.warning(`No QR Code`)
|
||||
return toast.warning(`No QR Code`);
|
||||
}
|
||||
|
||||
const canvas = await html2canvas(cardRef.current, {
|
||||
useCORS: true,
|
||||
allowTaint: false,
|
||||
backgroundColor: 'white',
|
||||
scale: 2,
|
||||
scale: 2
|
||||
});
|
||||
|
||||
const dataUrl = canvas.toDataURL('image/png');
|
||||
@ -244,32 +248,49 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
|
||||
|
||||
const updateTokenLegacy = async () => {
|
||||
try {
|
||||
if (!token_legacy) toast.warning(`Token Legacy can not be empty`)
|
||||
await axios.post(`${BASE_URL}/token/insert-token-legacy`, { customerid: customerId, token_legacy });
|
||||
toast.success(`Success Update Token Legacy`)
|
||||
} catch (error:any) {
|
||||
toast.error(error.message)
|
||||
if (!token_legacy) toast.warning(`Token Legacy can not be empty`);
|
||||
await axios.post(`${BASE_URL}/token/insert-token-legacy`, {
|
||||
customerid: customerId,
|
||||
token_legacy
|
||||
});
|
||||
toast.success(`Success Update Token Legacy`);
|
||||
} catch (error: any) {
|
||||
toast.error(error.message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
{/* Card content to render */}
|
||||
<div ref={cardRef} className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white mt-20">
|
||||
<div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-[100px] px-4 text-center">
|
||||
<p className="text-[24px] font-semibold text-[#5b0066] mb-5">
|
||||
{agent_name}
|
||||
</p>
|
||||
<div
|
||||
ref={cardRef}
|
||||
className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white mt-20"
|
||||
>
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/images/fixed-card.png')}
|
||||
alt="Card Frame"
|
||||
className="absolute inset-0 w-full h-full object-cover z-0"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 z-10 flex flex-col items-center pt-28 px-4 text-center">
|
||||
<p className="text-[18px] font-semibold text-[#5b0066] mb-4">{agent_name}</p>
|
||||
|
||||
{barcode && (
|
||||
<img
|
||||
src={barcode}
|
||||
alt="Barcode"
|
||||
className="w-80 h-80 object-contain mb-2"
|
||||
/>
|
||||
<div className="mb-8">
|
||||
<img src={barcode} alt="Barcode" className="w-60 h-60 object-contain" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-grow"></div>
|
||||
|
||||
<div className="absolute bottom-16">
|
||||
<div className="text-[13px] text-[#47173a] text-left font-medium leading-tight">
|
||||
<p>Imprime husi : Telin Digital Solution</p>
|
||||
<p>Imprime : 01–06–2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="w-full pt-[20px]">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap">
|
||||
<label className="form-label flex items-center">
|
||||
@ -279,17 +300,22 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
|
||||
className="input"
|
||||
name="token_legacy"
|
||||
value={token_legacy}
|
||||
onChange={(e:any) => setToken_legacy(e.target.value)}
|
||||
onChange={(e: any) => setToken_legacy(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Download Button */}
|
||||
<div className="flex justify-between w-full mt-4 px-4">
|
||||
<button onClick={handleDownload} className="border border-red-400 text-red-500 px-4 py-1 rounded hover:bg-red-50 text-sm">
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="border border-red-400 text-red-500 px-4 py-1 rounded hover:bg-red-50 text-sm"
|
||||
>
|
||||
Print QR
|
||||
</button>
|
||||
<button onClick={updateTokenLegacy} className="border border-blue-400 text-blue-500 px-4 py-1 rounded hover:bg-blue-50 text-sm">
|
||||
<button
|
||||
onClick={updateTokenLegacy}
|
||||
className="border border-blue-400 text-blue-500 px-4 py-1 rounded hover:bg-blue-50 text-sm"
|
||||
>
|
||||
Update to Token Legacy
|
||||
</button>
|
||||
</div>
|
||||
|
||||
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;
|
||||
390
src/pages/members/search-member/blocks/DetailMember.tsx
Normal file
390
src/pages/members/search-member/blocks/DetailMember.tsx
Normal file
@ -0,0 +1,390 @@
|
||||
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,
|
||||
canUnblock: false,
|
||||
variant: 'destructive' as const,
|
||||
showField: false
|
||||
};
|
||||
if (status === 'N')
|
||||
return {
|
||||
msg: 'Not Active',
|
||||
btn: 'PIN Not Active',
|
||||
canBlock: false,
|
||||
canUnblock: false,
|
||||
variant: 'secondary' as const,
|
||||
showField: true
|
||||
};
|
||||
if (status === 'P')
|
||||
return {
|
||||
msg: 'Suspend PIN',
|
||||
btn: 'Unblock PIN',
|
||||
canBlock: false,
|
||||
canUnblock: true,
|
||||
variant: 'default' as const,
|
||||
showField: true
|
||||
};
|
||||
if (status === 'O')
|
||||
return {
|
||||
msg: 'Suspend OTP',
|
||||
btn: 'Unblock OTP',
|
||||
canBlock: false,
|
||||
canUnblock: true,
|
||||
variant: 'default' as const,
|
||||
showField: true
|
||||
};
|
||||
return {
|
||||
msg: 'Unknown Status',
|
||||
btn: 'Unknown',
|
||||
canBlock: false,
|
||||
canUnblock: false,
|
||||
variant: 'secondary' as const,
|
||||
showField: true
|
||||
};
|
||||
};
|
||||
|
||||
const handleUnblockPin = 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: 'UnBlock'
|
||||
});
|
||||
|
||||
toast.success('PIN successfully unblocked');
|
||||
|
||||
handleEditDialog(false, null);
|
||||
|
||||
setTimeout(() => {
|
||||
refreshTable();
|
||||
}, 500);
|
||||
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Failed to unblock 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);
|
||||
|
||||
if (!pinStatus.showField) {
|
||||
return null;
|
||||
}
|
||||
|
||||
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.canUnblock && (
|
||||
<Button
|
||||
variant={pinStatus.variant}
|
||||
size="sm"
|
||||
onClick={() => setConfirmDialog(true)}
|
||||
disabled={isUpdating}
|
||||
>
|
||||
{isUpdating ? 'Unblocking...' : pinStatus.btn}
|
||||
</Button>
|
||||
)}
|
||||
{!pinStatus.canUnblock && !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 unblock this customer's PIN?"
|
||||
onYes={handleUnblockPin}
|
||||
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;
|
||||
103
src/pages/members/search-member/blocks/FilterCard.tsx
Normal file
103
src/pages/members/search-member/blocks/FilterCard.tsx
Normal file
@ -0,0 +1,103 @@
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { useState } from 'react';
|
||||
|
||||
const CustomerFilterForm = ({
|
||||
onFilter,
|
||||
onReset
|
||||
}: {
|
||||
onFilter: (filters: { username?: string; msisdn?: string }) => void;
|
||||
onReset?: () => void;
|
||||
}) => {
|
||||
const [searchType, setSearchType] = useState<'username' | 'msisdn'>('username');
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!searchValue.trim()) {
|
||||
alert('Please fill the search field');
|
||||
return;
|
||||
}
|
||||
|
||||
const filters = searchType === 'username'
|
||||
? { username: searchValue, msisdn: '' }
|
||||
: { username: '', msisdn: searchValue };
|
||||
|
||||
onFilter(filters);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setSearchType('username');
|
||||
setSearchValue('');
|
||||
if (onReset) {
|
||||
onReset();
|
||||
}
|
||||
};
|
||||
|
||||
const getPlaceholder = () => {
|
||||
return searchType === 'username' ? 'Enter username' : 'Enter phone number';
|
||||
};
|
||||
|
||||
const getLabel = () => {
|
||||
return searchType === 'username' ? 'Username' : 'Phone Number';
|
||||
};
|
||||
|
||||
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="searchType" className="block text-base font-medium text-gray-700 mb-2">
|
||||
Type Search
|
||||
</label>
|
||||
<Select value={searchType} onValueChange={(value: 'username' | 'msisdn') => setSearchType(value)}>
|
||||
<SelectTrigger className="w-full h-12 text-base">
|
||||
<SelectValue placeholder="Select search type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="username">Username</SelectItem>
|
||||
<SelectItem value="msisdn">Phone Number</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="searchValue" className="block text-base font-medium text-gray-700 mb-2">
|
||||
Search
|
||||
</label>
|
||||
<Input
|
||||
id="searchValue"
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
placeholder={getPlaceholder()}
|
||||
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;
|
||||
};
|
||||
@ -237,7 +237,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
|
||||
filter = filter.length === 0 ? {} : { name: { like: `%${filter[0].value?.toLowerCase()}%` } };
|
||||
|
||||
const query: any = {
|
||||
limit,
|
||||
limit:100,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: sorting[0].id,
|
||||
|
||||
@ -14,13 +14,11 @@ import {
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
|
||||
// State untuk filter
|
||||
const [trxDate, settrxDate] = useState({ from: '', to: '' });
|
||||
const [statusApproval, setStatusApproval] = useState<string>('');
|
||||
const [searchValue, setSearchValue] = useState<string>('');
|
||||
const [typeSearchValue, setSearchTypeValue] = useState<string>('');
|
||||
|
||||
// Set tanggal default saat pertama mount
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
const formatDate = (date: Date) => date.toISOString().split('T')[0];
|
||||
@ -30,28 +28,21 @@ const ListToolbar = () => {
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Fungsi untuk apply semua filter sekaligus saat tombol Filter ditekan
|
||||
const handleFilterData = useCallback(() => {
|
||||
try {
|
||||
if (!trxDate.from || !trxDate.to) {
|
||||
toast.error('Please select From and To dates');
|
||||
return;
|
||||
}
|
||||
// if (!trxDate.from || !trxDate.to) {
|
||||
// toast.error('Please select From and To dates');
|
||||
// return;
|
||||
// }
|
||||
|
||||
// Set filter tanggal
|
||||
table.getColumn('transaction_date')?.setFilterValue(trxDate);
|
||||
|
||||
// Set filter status approval
|
||||
table.getColumn('status_approve')?.setFilterValue(statusApproval || '');
|
||||
|
||||
// Set filter search type sebagai column filter id 'searchtype'
|
||||
table.setColumnFilters((prevFilters) => {
|
||||
// Hapus dulu filter dengan id 'searchtype' dan 'code' agar gak duplikat
|
||||
const filtered = prevFilters.filter(
|
||||
(f) => f.id !== 'searchtype' && f.id !== 'code'
|
||||
);
|
||||
|
||||
// Tambahkan filter baru jika ada
|
||||
if (typeSearchValue) {
|
||||
filtered.push({ id: 'searchtype', value: typeSearchValue });
|
||||
}
|
||||
@ -62,7 +53,6 @@ const ListToolbar = () => {
|
||||
return filtered;
|
||||
});
|
||||
|
||||
// Reset ke halaman pertama
|
||||
table.setPageIndex(0);
|
||||
} catch (error) {
|
||||
toast.error('Error applying filter');
|
||||
@ -79,7 +69,9 @@ const ListToolbar = () => {
|
||||
<input
|
||||
type="date"
|
||||
value={trxDate.from}
|
||||
onChange={(e) => settrxDate({ ...trxDate, from: e.target.value })}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, from: event.target.value })
|
||||
}
|
||||
name="from"
|
||||
/>
|
||||
</label>
|
||||
@ -89,7 +81,9 @@ const ListToolbar = () => {
|
||||
<input
|
||||
type="date"
|
||||
value={trxDate.to}
|
||||
onChange={(e) => settrxDate({ ...trxDate, to: e.target.value })}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, to: event.target.value })
|
||||
}
|
||||
name="to"
|
||||
/>
|
||||
</label>
|
||||
@ -110,7 +104,10 @@ const ListToolbar = () => {
|
||||
|
||||
<Select
|
||||
value={typeSearchValue}
|
||||
onValueChange={setSearchTypeValue}
|
||||
onValueChange={(value) => {
|
||||
setSearchTypeValue(value);
|
||||
settrxDate({ from: '', to: '' }); // clear tanggal saat search type dipilih
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
|
||||
<SelectValue placeholder="Select Search Type" />
|
||||
@ -132,7 +129,6 @@ const ListToolbar = () => {
|
||||
/>
|
||||
</label>
|
||||
|
||||
{/* Tombol Filter */}
|
||||
<Button onClick={handleFilterData}>
|
||||
Filter
|
||||
</Button>
|
||||
@ -147,13 +143,11 @@ const ListToolbar = () => {
|
||||
const today = new Date();
|
||||
const formatDate = (date: Date) => date.toISOString().split('T')[0];
|
||||
|
||||
// Reset semua filter dan tanggal ke hari ini
|
||||
setSearchValue('');
|
||||
setStatusApproval('');
|
||||
settrxDate({ from: formatDate(today), to: formatDate(today) });
|
||||
setSearchTypeValue('');
|
||||
|
||||
// Reset filter di tabel
|
||||
table.getColumn('code')?.setFilterValue('');
|
||||
table.getColumn('status_approve')?.setFilterValue('');
|
||||
table.getColumn('transaction_date')?.setFilterValue('');
|
||||
|
||||
@ -159,12 +159,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => {
|
||||
|
||||
|
||||
switch (row.status) {
|
||||
case 'C': return 'COMPLETE';
|
||||
case 'F': return 'FAILED';
|
||||
case 'O': return 'ON PROCESS';
|
||||
case "P" : return 'PENDING';
|
||||
case "P": return 'PENDING';
|
||||
case 'R': return 'ROLLBACK';
|
||||
case 'S': return 'REVERSAL';
|
||||
default: return 'UNKNOWN';
|
||||
@ -276,40 +276,16 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
let enddate = today.toISOString().split('T')[0];
|
||||
let transactioncode = '';
|
||||
let approvalstatus = '';
|
||||
let searchType = '';
|
||||
let codeValue = '';
|
||||
|
||||
if (Array.isArray(filter)) {
|
||||
filter.forEach((f: any) => {
|
||||
// console.log(f.id);
|
||||
if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
|
||||
startdate = f.value.from;
|
||||
enddate = f.value.to;
|
||||
}
|
||||
|
||||
if (f.id === 'code' && f.value) {
|
||||
transactioncode = f.value;
|
||||
}
|
||||
|
||||
if (f.id === 'status_approve' && f.value) {
|
||||
approvalstatus = f.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ✅ Declare formattedFilter early
|
||||
const formattedFilter: any = {
|
||||
"Transactions.transaction_date": {
|
||||
from: `${startdate} 00:00:00`,
|
||||
to: `${enddate} 23:59:59`
|
||||
}
|
||||
};
|
||||
|
||||
if (Array.isArray(filter)) {
|
||||
let searchType = '';
|
||||
let codeValue = '';
|
||||
|
||||
// Ambil code dan searchtype dulu
|
||||
filter.forEach((f: any) => {
|
||||
if (f.id === 'code' && f.value) {
|
||||
codeValue = f.value;
|
||||
}
|
||||
@ -318,29 +294,35 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
searchType = f.value;
|
||||
}
|
||||
|
||||
if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
|
||||
startdate = f.value.from;
|
||||
enddate = f.value.to;
|
||||
formattedFilter["Transactions.transaction_date"] = {
|
||||
from: `${startdate} 00:00:00`,
|
||||
to: `${enddate} 23:59:59`
|
||||
};
|
||||
if (f.id === 'status_approve' && f.value) {
|
||||
approvalstatus = f.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Terapkan berdasarkan searchtype + code
|
||||
if (searchType && codeValue) {
|
||||
if (searchType === "msisdn") {
|
||||
formattedFilter["Transactions.origin_msisdn"] = { like: `%${codeValue}%` };
|
||||
} else if (searchType === "fullname") {
|
||||
formattedFilter["Transactions.origin_name"] = { like: `%${codeValue}%` };
|
||||
} else if (searchType === "trxid") {
|
||||
formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
|
||||
}
|
||||
// 💡 Build formattedFilter only after values are finalized
|
||||
const formattedFilter: any = {};
|
||||
|
||||
// ✅ Only add transaction_date filter if searchType is NOT filled
|
||||
if (!searchType) {
|
||||
formattedFilter["Transactions.transaction_date"] = {
|
||||
from: `${startdate} 00:00:00`,
|
||||
to: `${enddate} 23:59:59`
|
||||
};
|
||||
}
|
||||
|
||||
// ✅ Apply searchType filters if both searchType and codeValue exist
|
||||
if (searchType && codeValue) {
|
||||
if (searchType === "msisdn") {
|
||||
formattedFilter["Transactions.origin_msisdn"] = { like: `%${codeValue}%` };
|
||||
} else if (searchType === "fullname") {
|
||||
formattedFilter["Transactions.origin_name"] = { like: `%${codeValue}%` };
|
||||
} else if (searchType === "trxid") {
|
||||
formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
|
||||
}
|
||||
}
|
||||
|
||||
// Handle approval status filter
|
||||
// ✅ Handle approval status
|
||||
formattedFilter["Transactions.status_approve"] = approvalstatus
|
||||
? approvalstatus
|
||||
: { in: ["W", "Y", "N"] };
|
||||
@ -365,7 +347,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
return { data: [], totalCount: 0 }; // Fail-safe fallback
|
||||
return { data: [], totalCount: 0 };
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -28,31 +28,29 @@ const ListToolbar = () => {
|
||||
|
||||
const formatDate = (date: Date): string => date.toISOString().split('T')[0];
|
||||
|
||||
// Set tanggal default hari ini saat mount
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
const formatted = formatDate(today);
|
||||
settrxDate({ from: formatted, to: formatted });
|
||||
}, []);
|
||||
|
||||
// **Hilangkan semua useEffect yang auto apply filter saat input berubah**
|
||||
// Karena kamu mau filter apply hanya lewat tombol Filter
|
||||
|
||||
// Fungsi untuk apply SEMUA filter sekaligus saat tombol Filter diklik
|
||||
const handleFilterData = useCallback(() => {
|
||||
if (!trxDate.from || !trxDate.to) {
|
||||
toast.error('Please select both From and To dates');
|
||||
return;
|
||||
// ✅ Reset tanggal jika typeSearchValue dipilih
|
||||
useEffect(() => {
|
||||
if (typeSearchValue) {
|
||||
settrxDate({ from: '', to: '' });
|
||||
}
|
||||
}, [typeSearchValue]);
|
||||
|
||||
const handleFilterData = useCallback(() => {
|
||||
// if (!trxDate.from || !trxDate.to) {
|
||||
// toast.error('Please select both From and To dates');
|
||||
// return;
|
||||
// }
|
||||
|
||||
// Terapkan filter tanggal
|
||||
table.getColumn('transaction_date')?.setFilterValue(trxDate);
|
||||
|
||||
// Terapkan filter jenis transaksi (kind)
|
||||
table.setColumnFilters((prev) => {
|
||||
// Hapus filter 'kind' dan 'searchtype' agar bisa set ulang
|
||||
const others = prev.filter(f => f.id !== 'kind' && f.id !== 'searchtype' && f.id !== 'code');
|
||||
// Bangun array baru dengan filter yang diinginkan
|
||||
const filters: any[] = [...others];
|
||||
|
||||
if (typeValue) filters.push({ id: 'kind', value: typeValue });
|
||||
@ -146,6 +144,7 @@ const ListToolbar = () => {
|
||||
name="to"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<Select value={typeValue} onValueChange={(value) => setTypeValue(value)}>
|
||||
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
|
||||
<SelectValue placeholder="Select Transaction Type" />
|
||||
@ -197,7 +196,6 @@ const ListToolbar = () => {
|
||||
<Button className="h-7.5" onClick={handleFilterData}>
|
||||
Filter
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ml-auto flex gap-2">
|
||||
|
||||
@ -9,6 +9,7 @@ import { useNavigate } from 'react-router';
|
||||
import DetailTransaction from '../blocks/DetailTransaction';
|
||||
import ResendTransaction from '../blocks/ResendTransaction';
|
||||
import RollbackTransaction from '../blocks/RollbackTransaction';
|
||||
import { start } from 'repl';
|
||||
|
||||
interface TransactionProps {
|
||||
id: number;
|
||||
@ -299,24 +300,15 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const today = new Date();
|
||||
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
|
||||
let startdate = firstDayOfMonth.toISOString().split('T')[0];
|
||||
let enddate = today.toISOString().split('T')[0];
|
||||
let startdate: string | undefined;
|
||||
let enddate: string | undefined;
|
||||
let transactioncode = '';
|
||||
let type = '';
|
||||
|
||||
// ✅ Declare formattedFilter early
|
||||
const formattedFilter: any = {
|
||||
"Transactions.transaction_date": {
|
||||
from: `${startdate} 00:00:00`,
|
||||
to: `${enddate} 23:59:59`
|
||||
}
|
||||
};
|
||||
let searchType = '';
|
||||
let codeValue = '';
|
||||
|
||||
if (Array.isArray(filter)) {
|
||||
let searchType = '';
|
||||
let codeValue = '';
|
||||
|
||||
// Ambil code dan searchtype dulu
|
||||
// Ambil semua value dari filter terlebih dahulu
|
||||
filter.forEach((f: any) => {
|
||||
if (f.id === 'code' && f.value) {
|
||||
codeValue = f.value;
|
||||
@ -329,10 +321,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
|
||||
startdate = f.value.from;
|
||||
enddate = f.value.to;
|
||||
formattedFilter["Transactions.transaction_date"] = {
|
||||
from: `${startdate} 00:00:00`,
|
||||
to: `${enddate} 23:59:59`
|
||||
};
|
||||
}
|
||||
|
||||
if (f.id === 'kind' && f.value) {
|
||||
@ -340,7 +328,30 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
}
|
||||
});
|
||||
|
||||
// Terapkan berdasarkan searchtype + code
|
||||
// Kalau tidak ada searchType, baru pakai tanggal
|
||||
if (!searchType) {
|
||||
if (!startdate || !enddate) {
|
||||
startdate = firstDayOfMonth.toISOString().split('T')[0];
|
||||
enddate = today.toISOString().split('T')[0];
|
||||
}
|
||||
} else {
|
||||
// Kosongkan supaya tidak digunakan di bawah
|
||||
startdate = undefined;
|
||||
enddate = undefined;
|
||||
}
|
||||
|
||||
// Build formattedFilter setelah semua nilai diketahui
|
||||
const formattedFilter: any = {};
|
||||
|
||||
// Tambahkan filter tanggal HANYA jika tidak ada searchType
|
||||
if (startdate && enddate) {
|
||||
formattedFilter["Transactions.transaction_date"] = {
|
||||
from: `${startdate} 00:00:00`,
|
||||
to: `${enddate} 23:59:59`
|
||||
};
|
||||
}
|
||||
|
||||
// Tambahkan filter berdasarkan searchType
|
||||
if (searchType && codeValue) {
|
||||
if (searchType === "msisdn") {
|
||||
formattedFilter["origin_customer.msisdn"] = { like: `%${codeValue}%` };
|
||||
@ -350,29 +361,31 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
|
||||
}
|
||||
}
|
||||
|
||||
// Tambahkan filter jenis transaksi jika ada
|
||||
if (type) {
|
||||
formattedFilter["Transactions.kind"] = type;
|
||||
}
|
||||
|
||||
const response = await GetData(`${API_URL}/transaction/history`, {
|
||||
limit,
|
||||
page: page + 1,
|
||||
with_deleted: false,
|
||||
order_field: "Transactions.created_at",
|
||||
order_direction: 'DESC',
|
||||
filter: JSON.stringify(formattedFilter)
|
||||
});
|
||||
|
||||
if (!response || !response.data) {
|
||||
console.warn('No data received:', response);
|
||||
return { data: [], totalCount: 0 };
|
||||
}
|
||||
|
||||
setTransaction(response.data.list);
|
||||
return { data: response.data.list, totalCount: response.data.total_count };
|
||||
}
|
||||
|
||||
|
||||
if (type) {
|
||||
formattedFilter["Transactions.kind"] = type;
|
||||
}
|
||||
|
||||
const response = await GetData(`${API_URL}/transaction/history`, {
|
||||
limit,
|
||||
page: page + 1,
|
||||
with_deleted: false,
|
||||
order_field: "Transactions.created_at",
|
||||
order_direction: 'DESC',
|
||||
filter: JSON.stringify(formattedFilter)
|
||||
});
|
||||
|
||||
if (!response || !response.data) {
|
||||
console.warn('No data received:', response);
|
||||
return { data: [], totalCount: 0 };
|
||||
}
|
||||
|
||||
setTransaction(response.data.list);
|
||||
return { data: response.data.list, totalCount: response.data.total_count };
|
||||
return { data: [], totalCount: 0 };
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
@ -381,6 +394,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<ManageTransactionContext.Provider
|
||||
value={{
|
||||
|
||||
@ -72,7 +72,6 @@ const WithdrawInput = () => {
|
||||
|
||||
try {
|
||||
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
|
||||
console.log(response?.data);
|
||||
setCustomerMsisdn(
|
||||
response?.data.list.map((item: any) => ({
|
||||
value: item.id,
|
||||
@ -145,10 +144,10 @@ const WithdrawInput = () => {
|
||||
return () => clearTimeout(timer);
|
||||
};
|
||||
|
||||
const handleMsisdnSelect = (msisdn: string) => {
|
||||
setForm({ ...form, id_customer: msisdn });
|
||||
const handleMsisdnSelect = (item: { value: string; label: string }) => {
|
||||
setForm({ ...form, id_customer: item.value });
|
||||
setDropdownOpen(false);
|
||||
setSearchTerm(msisdn);
|
||||
setSearchTerm(item.label);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -201,7 +200,7 @@ const WithdrawInput = () => {
|
||||
<div
|
||||
key={index}
|
||||
className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
|
||||
onClick={() => handleMsisdnSelect(item.value)}
|
||||
onClick={() => handleMsisdnSelect(item)}
|
||||
>
|
||||
{item.label}
|
||||
</div>
|
||||
|
||||
@ -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