[skip ci] give frame in agent balance on qr section

src/pages/members/agent-balance/AgentBalance.tsx

@@ -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(``)
+      setBarcode(``);
-      let getToken = await axios.get(`${BASE_URL}/token/get`, { params: { id: customerId }});
+      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 && (
+          {isReloading && <DataGridLoader />}
-            <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,29 +231,46 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
 
   const updateTokenLegacy = async () => {
     try {
-      if (!token_legacy) toast.warning(`Token Legacy can not be empty`)
+      if (!token_legacy) toast.warning(`Token Legacy can not be empty`);
-      await axios.post(`${BASE_URL}/token/insert-token-legacy`, { customerid: customerId, token_legacy });
+      await axios.post(`${BASE_URL}/token/insert-token-legacy`, {
-      toast.success(`Success Update Token Legacy`)
+        customerid: customerId,
-    } catch (error:any) {
+        token_legacy
-      toast.error(error.message)
+      });
+      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
-      <div ref={cardRef} className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white mt-20">
+        ref={cardRef}
-        <div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-[100px] px-4 text-center">
+        className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white mt-20"
-          <p className="text-[24px] font-semibold text-[#5b0066] mb-5">
+      >
-            {agent_name}
+        <img
-          </p>
+          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
+            <div className="mb-8">
-              src={barcode}
+              <img src={barcode} alt="Barcode" className="w-60 h-60 object-contain" />
-              alt="Barcode"
+            </div>
-              className="w-80 h-80 object-contain mb-2"
-            />
           )}
+
+          <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>
 
@@ -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>