From d69a23bf77727e1277e35888b9b5ce00dc6319a0 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Tue, 13 Dec 2022 17:49:46 +0800
Subject: [PATCH] Update result view

---
 package-lock.json                         | 326 ++++++++++++++++++++-
 package.json                              |   2 +
 src/components/cart/CartListNew.vue       |   5 +-
 src/components/home/LelongTodayDetail.vue |   2 +-
 src/components/list/ListItem.vue          |   2 +-
 src/components/result/ResultDetail.vue    | 330 +++++++++++-----------
 src/components/result/ResultMain.vue      |   2 +-
 src/main.js                               |   4 +
 src/router/index.js                       |   2 +-
 9 files changed, 494 insertions(+), 181 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eb7213f..6aadbb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,8 @@
         "bootstrap": "^5.1.3",
         "bootstrap-icons": "^1.8.1",
         "core-js": "^3.8.3",
+        "jspdf": "^2.5.1",
+        "jspdf-autotable": "^3.5.28",
         "libphonenumber-js": "^1.10.14",
         "maz-ui": "^3.0.7",
         "postcss": "^8",
@@ -1614,7 +1616,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
       "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -2059,6 +2060,12 @@
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
       "dev": true
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
     "node_modules/@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
@@ -3288,6 +3295,17 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.4",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.4.tgz",
@@ -3415,6 +3433,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -3609,6 +3636,17 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -3719,6 +3757,25 @@
         }
       ]
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -4296,6 +4353,15 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
@@ -4879,6 +4945,12 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.1.tgz",
+      "integrity": "sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==",
+      "optional": true
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -5653,6 +5725,11 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/figures": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -6132,6 +6209,19 @@
         "webpack": "^5.20.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -6625,6 +6715,31 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.4.8"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf-autotable": {
+      "version": "3.5.28",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.5.28.tgz",
+      "integrity": "sha512-eNYt5mUxCGa1Y0bmOhGXU+Va/P2jNkgOgUPGIpZp2rbZUauU34s0q3S59Jps5zi2u90nQy7DmD/D+sdesJLIEA==",
+      "peerDependencies": {
+        "jspdf": "^2.5.1"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -7890,6 +8005,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -8524,7 +8645,7 @@
       "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.17.0.tgz",
       "integrity": "sha512-z7ZCHk4kgkHJ29hg0izN1M8Xst2MOObimq62waE2TDE8ztH9mp2sAdGGsQu1shMa4/23dZ+fcN4t+KpYNICRyQ==",
       "peerDependencies": {
-        "primeicons": "^5.0.0",
+        "primeicons": "^6.0.1",
         "vue": "^3.0.0"
       }
     },
@@ -8630,6 +8751,15 @@
         }
       ]
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -8760,8 +8890,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.0",
@@ -8919,6 +9048,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -9364,6 +9502,15 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
       "dev": true
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stackframe": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.1.tgz",
@@ -9491,6 +9638,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -9639,6 +9795,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -9882,6 +10047,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -11846,7 +12020,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
       "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -12226,6 +12399,12 @@
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
       "dev": true
     },
+    "@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
     "@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
@@ -13202,6 +13381,11 @@
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
       "dev": true
     },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    },
     "autoprefixer": {
       "version": "10.4.4",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.4.tgz",
@@ -13293,6 +13477,12 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -13435,6 +13625,11 @@
         "picocolors": "^1.0.0"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
     "buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -13506,6 +13701,22 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001328.tgz",
       "integrity": "sha512-Ue55jHkR/s4r00FLNiX+hGMMuwml/QGqqzVeMQ5thUewznU2EdULFvI3JR7JJid6OrjJNfFvHY2G2dIjmRaDDQ=="
     },
+    "canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      }
+    },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -13940,6 +14151,15 @@
       "dev": true,
       "requires": {}
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-loader": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
@@ -14346,6 +14566,12 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dompurify": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.1.tgz",
+      "integrity": "sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==",
+      "optional": true
+    },
     "domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -14859,6 +15085,11 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "figures": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -15211,6 +15442,16 @@
         "tapable": "^2.0.0"
       }
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -15562,6 +15803,27 @@
         "universalify": "^2.0.0"
       }
     },
+    "jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "jspdf-autotable": {
+      "version": "3.5.28",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.5.28.tgz",
+      "integrity": "sha512-eNYt5mUxCGa1Y0bmOhGXU+Va/P2jNkgOgUPGIpZp2rbZUauU34s0q3S59Jps5zi2u90nQy7DmD/D+sdesJLIEA==",
+      "requires": {}
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -16509,6 +16771,12 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -16986,6 +17254,15 @@
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -17090,8 +17367,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "regenerator-transform": {
       "version": "0.15.0",
@@ -17214,6 +17490,12 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -17586,6 +17868,12 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
       "dev": true
     },
+    "stackblur-canvas": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true
+    },
     "stackframe": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.1.tgz",
@@ -17671,6 +17959,12 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
+    "svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true
+    },
     "svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -17769,6 +18063,15 @@
         }
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -17952,6 +18255,15 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
diff --git a/package.json b/package.json
index 1e940b7..e9767cd 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "bootstrap": "^5.1.3",
     "bootstrap-icons": "^1.8.1",
     "core-js": "^3.8.3",
+    "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.5.28",
     "libphonenumber-js": "^1.10.14",
     "maz-ui": "^3.0.7",
     "postcss": "^8",
diff --git a/src/components/cart/CartListNew.vue b/src/components/cart/CartListNew.vue
index 2fec14b..5c97064 100644
--- a/src/components/cart/CartListNew.vue
+++ b/src/components/cart/CartListNew.vue
@@ -823,10 +823,10 @@ export default {
             },
           })
           .then((response) => {
+            // console.log("updateItem", response);
             this.isLoadingUbah = false;
             // this.isLoading = true;
             this.$refs.editClose.click();
-            console.log(response);
             this.$swal.fire({
               icon: "success",
               title: "Bidaan Berjaya Diubah",
@@ -869,7 +869,7 @@ export default {
               },
             })
             .then((response) => {
-              console.log(response);
+              // console.log("bidderSelectBidItem", response);
               if (response.data.success == "success") {
                 this.isLoadingDaftar = false;
                 this.$refs.daftarBidaanClose.click();
@@ -883,7 +883,6 @@ export default {
                   allowEscapeKey: false,
                 });
                 // this.loading = false;
-                console.log(response);
                 this.$emit("reloadComponent");
               } else {
                 this.isLoadingDaftar = false;
diff --git a/src/components/home/LelongTodayDetail.vue b/src/components/home/LelongTodayDetail.vue
index 351f2dd..083b87f 100644
--- a/src/components/home/LelongTodayDetail.vue
+++ b/src/components/home/LelongTodayDetail.vue
@@ -26,7 +26,7 @@
           </tbody>
         </table>
       </div>
-      <Button label="Lihat Senarai" class="p-button-sm" v-on:click="toList()" />
+      <Button label="Lihat Senarai" v-if="response[0].masatamat_lelong == null" class="p-button-sm" v-on:click="toList()" />
     </div>
     <div v-else>
       <table class="table table-sm table-bordered table-hover">
diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index f3fc204..eb01078 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -563,7 +563,7 @@ export default {
           },
         })
         .then((response) => {
-          console.log(response);
+          // console.log("liveData", response);
           if (response.data.success == true) {
             // let readImage = response.data.message.lelongbid[7].filemarhun[0].filename;
             // this.image = readImage;
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index 612f0ad..44bc621 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -1,6 +1,5 @@
 <template>
   <the-template>
-    <!-- <base-card> -->
     <div
       v-if="loading"
       style="min-height: 70vh; display: grid; place-items: center"
@@ -28,17 +27,17 @@
                 class="font-normal"
                 style="font-size: 1.5rem; font-weight: 700"
               >
-                Keputusan Tarikh Lelong: {{ tarikhLelong }}
+                Keputusan Tarikh Lelongan: {{ tarikhLelong }}
               </div>
             </template>
 
             <template #end>
-              <Button
+              <!-- <Button
                 label="Resit Bayaran"
                 icon="pi pi-list"
                 iconPos="right"
                 class="p-button-sm p-button-outlined mr-2"
-              />
+              /> -->
               <Button
                 label="Pembayaran"
                 icon="pi pi-money-bill"
@@ -56,11 +55,33 @@
               <Accordion :multiple="true">
                 <AccordionTab v-for="list in lists" v-bind:key="list">
                   <template #header>
-                    <span>{{ list.cawangan }}</span>
-                    <!-- <span class="ml-2">Jumlah:RMXXXX</span> -->
+                    <div class="flex justify-content-between w-100">
+                      <div class="align-self-center" style="margin: 5px">
+                        {{ list.cawangan }}
+                      </div>
+                      <div class="style-info">
+                        Jumlah RM{{
+                          list.total_hargabida
+                            ?.toString()
+                            .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                        }}
+                      </div>
+                    </div>
                   </template>
+                  <Button
+                    label="Surat Hak Kepemilikan Barang"
+                    icon="pi pi-verified"
+                    iconPos="right"
+                    class="p-button-sm mb-3"
+                    v-on:click="downloadPdf(lists, list)"
+                    v-if="list.status_payment_cawangan == 1"
+                    v-tooltip="'Muat Turun'"
+                  />
                   <div class="overflow-x-auto">
-                    <table class="table text-center table-bordered">
+                    <table
+                      class="table text-center table-bordered"
+                      id="hello-test"
+                    >
                       <tbody>
                         <tr class="table-light">
                           <td>Bil</td>
@@ -118,124 +139,22 @@
                             ></Tag>
                           </td>
                         </tr>
+                        <tr style="text-transform: uppercase">
+                          <td colspan="2">Jumlah</td>
+                          <td>
+                            RM{{
+                              list.total_hargabida
+                                ?.toString()
+                                .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                            }}
+                          </td>
+                          <td class="table-light"></td>
+                        </tr>
                       </tbody>
                     </table>
                   </div>
                 </AccordionTab>
               </Accordion>
-              <!-- <div class="">
-            <div class="row">
-              <div class="col">
-                <div class="d-flex justify-content-between">
-                  <router-link
-                    v-bind:to="{ name: 'result' }"
-                    class="btn btn-secondary m-3 ms-0"
-                    >Kembali</router-link
-                  >
-                  <h5 class="m-3">
-                    Keputusan Tarikh Lelong: {{ tarikhLelong }}
-                  </h5>
-                  <button
-                    v-if="!statusPayment"
-                    v-on:click="clickPayButton(lelongId)"
-                    class="btn btn-primary m-3 me-0"
-                  >
-                    Bayar
-                  </button>
-                </div>
-                <div class="d-flex justify-content-end">
-                  <router-link
-                    v-bind:to="{ name: 'receipt' }"
-                    class="btn btn-outline-primary m-2 me-0"
-                    >Resit Bayaran</router-link
-                  >
-                </div>
-                <div>
-                  <div class="accordion" id="accordionExample">
-                    <div
-                      v-for="list in lists"
-                      v-bind:key="list"
-                      class="accordion-item"
-                    >
-                      <h2 class="accordion-header" id="headingOne">
-                        <button
-                          class="accordion-button"
-                          type="button"
-                          data-bs-toggle="collapse"
-                          data-bs-target="#collapseOne"
-                          aria-expanded="true"
-                          aria-controls="collapseOne"
-                        >
-                          {{ list.cawangan }}
-                        </button>
-                      </h2>
-                      <div
-                        id="collapseOne"
-                        class="accordion-collapse collapse show"
-                        aria-labelledby="headingOne"
-                        data-bs-parent="#accordionExample"
-                      >
-                        <div class="accordion-body">
-                          <table class="table table-bordered">
-                            <thead>
-                              <tr>
-                                <th scope="col">Bil</th>
-                                <th scope="col">No Rujukan</th>
-                                <th scope="col">Harga Bidaan</th>
-                                <th scope="col">Status Bayaran</th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              <tr
-                                v-for="(data, index) in list.sag"
-                                v-bind:key="data"
-                              >
-                                <td>{{ index + 1 }}</td>
-                                <td>
-                                  <a
-                                    href="#"
-                                    data-bs-toggle="modal"
-                                    data-bs-target="#marhunModal"
-                                    v-on:click="marhunModal(data)"
-                                    >{{ data.norujukan }}
-                                  </a>
-                                </td>
-                                <td>RM {{ data.total_payment }}</td>
-                                <td
-                                  class="m-1 badge rounded-pill bg-danger"
-                                  v-if="
-                                    data.status_payment === null ||
-                                    data.status_payment == 0
-                                  "
-                                >
-                                  Belum Bayar
-                                </td>
-                                <td
-                                  class="m-1 badge rounded-pill bg-warning"
-                                  v-if="data.status_payment === 2"
-                                >
-                                  Tunggu Pengesahan
-                                </td>
-                                <td
-                                  class="m-1 badge rounded-pill bg-success"
-                                  v-if="data.status_payment === 1"
-                                >
-                                  Selesai
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                          <h5 class="mt-4 mb-5">
-                            Jumlah Harga Bida: RM{{ list.total_hargabida }}
-                          </h5>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div> -->
             </template>
           </Card>
           <div
@@ -246,12 +165,9 @@
             aria-hidden="true"
             data-bs-backdrop="static"
           >
-            <div class="modal-dialog modal-lg modal-dialog-centered">
+            <div class="modal-dialog modal-xl modal-dialog-centered">
               <div class="modal-content">
                 <div class="modal-header">
-                  <!-- <h5 class="modal-title" id="marhunModalLabel">
-                  {{ theData.norujukan }}
-                </h5> -->
                   <button
                     type="button"
                     class="btn-close"
@@ -260,35 +176,92 @@
                   ></button>
                 </div>
                 <div class="modal-body">
-                  <table class="table table-bordered">
-                    <thead>
-                      <tr>
-                        <th scope="col">Bil</th>
-                        <th scope="col">Jenis</th>
-                        <th scope="col">Karat</th>
-                        <th scope="col">Berat</th>
-                        <th scope="col">Nota</th>
-                        <th scope="col">Harga Asas</th>
-                      </tr>
-                    </thead>
-                    <!-- <tbody>
-                    <tr
-                      v-for="(marhun, index) in theData.lelongbidmarhun"
-                      v-bind:key="marhun"
+                  <div class="grid">
+                    <div
+                      class="col-12 lg:col-6"
+                      style="
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        min-height: 300px;
+                        min-width: 300px;
+                        max-height: 600px;
+                        max-width: 600px;
+                      "
                     >
-                      <td>{{ index + 1 }}</td>
-                      <td>{{ marhun.marhun }}</td>
-                      <td>{{ marhun.karat }}</td>
-                      <td>{{ marhun.berat }}g</td>
-                      <td>{{ marhun.nota }}</td>
-                      <td>RM{{ marhun.hargaasas }}</td>
-                    </tr>
-                    <tr style="text-transform: uppercase">
-                      <th colspan="5">Jumlah</th>
-                      <th>RM{{ theData.hargaasas }}</th>
-                    </tr>
-                  </tbody> -->
-                  </table>
+                      <item-master-image-modal
+                        v-if="theData.filemarhun"
+                        v-bind:key="reloadImageComponent"
+                        v-bind:norujukan="theData.norujukan"
+                        v-bind:filemarhun_id="theData.filemarhun[0].id"
+                      ></item-master-image-modal>
+                      <p v-else style="text-align: center; width: 100%">
+                        Image Unavailable
+                      </p>
+                    </div>
+                    <div class="col-12 text-center lg:col-6">
+                      <div class="overflow-x-auto">
+                        <table class="table table-bordered">
+                          <tbody>
+                            <tr class="table-light">
+                              <td>Bil</td>
+                              <td style="min-width: 115px">Jenis Marhun</td>
+                              <td style="min-width: 42px">Karat</td>
+                              <td style="min-width: 42px">Berat</td>
+                              <td style="min-width: 102px">Harga Asas</td>
+                            </tr>
+                            <tr
+                              v-for="(data, index) in theData.lelongbidmarhun"
+                              v-bind:key="data"
+                            >
+                              <td>{{ index + 1 }}</td>
+                              <td>{{ data.marhun }}</td>
+                              <td>{{ data.karat }}</td>
+                              <td>{{ data.berat }}g</td>
+                              <td>
+                                RM{{
+                                  data.hargaasas
+                                    ?.toString()
+                                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                                }}
+                              </td>
+                            </tr>
+                            <tr style="text-transform: uppercase">
+                              <td colspan="3">Jumlah</td>
+                              <td>{{ theData.berat }}g</td>
+                              <td>
+                                RM{{
+                                  theData.hargaasas
+                                    ?.toString()
+                                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                                }}
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                      <div class="row justify-content-center">
+                        <div class="col-6">
+                          <label class="col-form-label"
+                            >Jumlah Harga Bida</label
+                          >
+                        </div>
+                        <div class="col-6">
+                          <div class="input-group mb-3">
+                            <span class="input-group-text">RM</span>
+                            <span
+                              class="form-control font-bold input-group-text"
+                              >{{
+                                theData.hargabida
+                                  ?.toString()
+                                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                              }}</span
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
                 <div class="modal-footer">
                   <button
@@ -333,14 +306,19 @@
         </div>
       </div>
     </div>
-    <!-- </base-card> -->
   </the-template>
 </template>
 
 <script>
+import jsPDF from "jspdf";
+import autoTable from "jspdf-autotable";
 import axios from "axios";
+import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
 
 export default {
+  components: {
+    "item-master-image-modal": ItemMasterImageModal,
+  },
   data() {
     return {
       lists: [],
@@ -350,10 +328,11 @@ export default {
       statusPayment: "",
       disabled: 0,
       isSuccess: false,
+      theData: "",
+      reloadImageComponent: "",
     };
   },
   created() {
-    console.log(this.$route.params.lelongId);
     this.lelongId = this.$route.params.lelongId;
     this.statusPayment = this.$route.params.statusPayment;
   },
@@ -372,23 +351,16 @@ export default {
     liveData() {
       this.loading = true;
       axios
-        .get(
-          "/bayar/" +
-            localStorage.getItem("id") +
-            // "/1",
-            "/" +
-            this.lelongId,
-          {
-            headers: {
-              Authorization: "Bearer " + localStorage.getItem("token"),
-            },
-          }
-        )
+        .get("/bayar/" + localStorage.getItem("id") + "/" + this.lelongId, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
         .then((response) => {
+          // console.log("liveData", response);
           if (response.data.success == true) {
             this.isSuccess = true;
             this.loading = false;
-            console.log(response);
             this.lists = response.data.data;
             this.tarikhLelong = response.data.tarikh_lelong;
           } else {
@@ -408,6 +380,16 @@ export default {
     },
     marhunModal(value) {
       console.log(value);
+      this.theData = value;
+      this.reloadImageComponent += 1;
+    },
+    downloadPdf(valueMaster, value) {
+      console.log(valueMaster, value);
+
+      // var pdf = new jsPDF();
+
+      // autoTable(pdf, { html: "#hello-test" });
+      // pdf.save("test.pdf");
     },
   },
 };
@@ -426,4 +408,18 @@ export default {
 .container-height {
   min-height: 70vh;
 }
+
+.style-info {
+  background: #e4f8f0;
+  border: solid #1ea97c;
+  border-width: 0px;
+  color: #1ea97c;
+  font-size: 1rem;
+  align-items: center;
+  display: flex;
+  padding: 0.4rem 0.9rem;
+  margin: 0;
+  border-radius: 6px;
+  font-weight: 400;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/result/ResultMain.vue b/src/components/result/ResultMain.vue
index 6124223..fb5bf2f 100644
--- a/src/components/result/ResultMain.vue
+++ b/src/components/result/ResultMain.vue
@@ -127,7 +127,7 @@ export default {
 
         .then((response) => {
           this.loading = false;
-          console.log(response);
+          // console.log("getLelong", response);
           if (response.data.success === true) {
             this.isSuccess = true;
             this.lelong = response.data.lelong;
diff --git a/src/main.js b/src/main.js
index 8dea3ca..f9485de 100644
--- a/src/main.js
+++ b/src/main.js
@@ -45,6 +45,8 @@ import Image from 'primevue/image';
 import Galleria from 'primevue/galleria';
 import BadgeDirective from 'primevue/badgedirective';
 import Textarea from 'primevue/textarea';
+import Tooltip from 'primevue/tooltip';
+
 
 import 'maz-ui/css/main.css'
 import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput'
@@ -88,6 +90,8 @@ app.component('Image', Image);
 app.component('Galleria', Galleria);
 app.directive('badge', BadgeDirective);
 app.component('Textarea', Textarea);
+app.directive('tooltip', Tooltip);
+
 
 app.component('MazPhoneNumberInput', MazPhoneNumberInput)
 
diff --git a/src/router/index.js b/src/router/index.js
index a6f0fe1..541a9fc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -197,7 +197,7 @@ const routes = [
     // meta: { requiresAuth: true }
   },
   {
-    path: "/result/detail",
+    path: "/result-detail",
     name: "detail",
     component: ResultDetail,
     // meta: { requiresAuth: true }