[skip ci] give frame in agent balance on qr section
This commit is contained in:
bagusajisaputroo
@ -52,7 +52,7 @@ const AgentBalance = () => {
|
||||
// const [selectedMember, setSelectedMember] = useState(initBalance);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAgentBalance();
|
||||
fetchAgentBalance();
|
||||
}, []);
|
||||
|
||||
async function fetchAgentBalance(): Promise<void> {
|
||||
@ -70,7 +70,7 @@ const AgentBalance = () => {
|
||||
let temp = 1;
|
||||
let resBalance = balances.data.data.list.map((el: any) => {
|
||||
el.no = temp++;
|
||||
if (!el.agent_name) el.agent_name = ''
|
||||
if (!el.agent_name) el.agent_name = '';
|
||||
return el;
|
||||
});
|
||||
setDataBalance(resBalance);
|
||||
@ -95,7 +95,7 @@ const AgentBalance = () => {
|
||||
|
||||
const handleUpdate = async (data: any) => {
|
||||
await getQrCode(data.id);
|
||||
setFormData(data)
|
||||
setFormData(data);
|
||||
setDialogType('update');
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
@ -105,14 +105,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`)
|
||||
@ -151,9 +151,7 @@ const AgentBalance = () => {
|
||||
</Breadcrumbs>
|
||||
|
||||
<div className="grid gap-5 lg:gap-7.5 mt-5 relative">
|
||||
{isReloading && (
|
||||
<DataGridLoader />
|
||||
)}
|
||||
{isReloading && <DataGridLoader />}
|
||||
<DataGridProvider
|
||||
data={dataBalance}
|
||||
columns={getColumns(handleUpdate)}
|
||||
@ -178,7 +176,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>
|
||||
@ -188,16 +190,16 @@ 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();
|
||||
}
|
||||
});
|
||||
@ -210,14 +212,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');
|
||||
@ -229,32 +231,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="/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">
|
||||
@ -264,17 +283,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>
|
||||
|
||||
Reference in New Issue
Block a user