From 484f89e2ee58be82702fbe20b5c8780d9c913845 Mon Sep 17 00:00:00 2001
From: Wian Drs <wian274@gmail.com>
Date: Sat, 1 Aug 2026 11:41:31 +0700
Subject: [PATCH] Giant Update regsiter

---
 package-lock.json                             |  268 +++-
 package.json                                  |    1 +
 src/assets/icons/index.js                     |    4 +
 src/components/AppHeader.vue                  |   87 +-
 src/components/AppHeaderDropdownAccnt.vue     |    7 +
 src/components/AppSidebar.vue                 |   18 +-
 src/components/WalletHeaderWidget.vue         |    6 +-
 .../materials/AssignMaterialModal.vue         |    2 +-
 src/router/index.js                           |   81 +-
 src/services/notificationService.js           |   29 +
 src/services/roleApplicationService.js        |   15 +
 src/services/voucherService.js                |   12 +
 src/services/walletService.js                 |    1 -
 src/stores/auth.js                            |   21 +
 src/stores/menu.js                            |   22 +
 .../ApplicationReviews.vue                    |  227 ++++
 .../access-applications/MyApplications.vue    |  303 +++++
 .../NotificationChannelDashboard.vue          | 1126 +++++++++++++++--
 src/views/pages/Page403.vue                   |   31 +
 src/views/pages/VerifyCode.vue                |   43 +
 src/views/tickets/TicketIncident.vue          |    4 +-
 src/views/tickets/TicketType.vue              |    4 +-
 src/views/users/Users.vue                     |    4 +
 src/views/voucher-hotspot/VoucherAgents.vue   |   21 +
 .../voucher-hotspot/VoucherLoginPage.vue      |  139 ++
 src/views/voucher-hotspot/VoucherSales.vue    |   27 +
 src/views/wallet/WalletDashboard.vue          |  209 +--
 src/views/website/LandingPage.vue             |   47 +
 28 files changed, 2439 insertions(+), 320 deletions(-)
 create mode 100644 src/services/roleApplicationService.js
 create mode 100644 src/services/voucherService.js
 create mode 100644 src/views/access-applications/ApplicationReviews.vue
 create mode 100644 src/views/access-applications/MyApplications.vue
 create mode 100644 src/views/pages/Page403.vue
 create mode 100644 src/views/voucher-hotspot/VoucherAgents.vue
 create mode 100644 src/views/voucher-hotspot/VoucherLoginPage.vue
 create mode 100644 src/views/voucher-hotspot/VoucherSales.vue
 create mode 100644 src/views/website/LandingPage.vue

diff --git a/package-lock.json b/package-lock.json
index 9e6cd287..07000bd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "chart.js": "^4.5.1",
         "maplibre-gl": "^3.6.2",
         "pinia": "^3.0.4",
+        "qrcode": "^1.5.4",
         "simplebar-vue": "^2.4.2",
         "sweetalert2": "^11.26.25",
         "vue": "^3.5.31",
@@ -1520,11 +1521,19 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -1807,6 +1816,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001799",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
@@ -1872,11 +1890,21 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -1889,7 +1917,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/combined-stream": {
@@ -1983,6 +2010,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2009,6 +2045,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2036,6 +2078,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/entities": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
@@ -2494,6 +2542,15 @@
       "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==",
       "license": "ISC"
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -2795,6 +2852,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3548,6 +3614,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3565,7 +3640,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3656,6 +3730,15 @@
         "pathe": "^2.0.3"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
@@ -3746,6 +3829,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/quansync": {
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
@@ -3781,6 +3881,21 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3886,6 +4001,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -4063,6 +4184,32 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -4515,6 +4662,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -4525,6 +4678,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -4535,6 +4702,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
     "node_modules/yaml": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
@@ -4550,6 +4723,93 @@
         "url": "https://github.com/sponsors/eemeli"
       }
     },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index ef459777..4b267e08 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "chart.js": "^4.5.1",
     "maplibre-gl": "^3.6.2",
     "pinia": "^3.0.4",
+    "qrcode": "^1.5.4",
     "simplebar-vue": "^2.4.2",
     "sweetalert2": "^11.26.25",
     "vue": "^3.5.31",
diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js
index 4e444635..201b36f2 100644
--- a/src/assets/icons/index.js
+++ b/src/assets/icons/index.js
@@ -43,6 +43,7 @@ import {
   cilCode,
   cilCommentSquare,
   cilContrast,
+  cilCopy,
   cilCreditCard,
   cilCursor,
   cilDataTransferDown,
@@ -55,6 +56,7 @@ import {
   cilExternalLink,
   cilGlobeAlt,
   cilGrid,
+  cilInfo,
   cilFile,
   cilJustifyCenter,
   cilLaptop,
@@ -114,6 +116,7 @@ export const iconsSet = Object.assign(
     cilCode,
     cilCommentSquare,
     cilContrast,
+    cilCopy,
     cilCreditCard,
     cilCursor,
     cilDataTransferDown,
@@ -126,6 +129,7 @@ export const iconsSet = Object.assign(
     cilExternalLink,
     cilGlobeAlt,
     cilGrid,
+    cilInfo,
     cilFile,
     cilJustifyCenter,
     cilLaptop,
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index d78f8e4d..70ab2c4e 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -2,6 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { cilList, cilViewModule } from '@coreui/icons'
 import { useColorModes } from '@coreui/vue'
+import { useRouter } from 'vue-router'
 
 import AppBreadcrumb from '@/components/AppBreadcrumb.vue'
 import AppHeaderDropdownAccnt from '@/components/AppHeaderDropdownAccnt.vue'
@@ -16,6 +17,7 @@ import { getMyNotifications, markNotificationRead } from '@/services/notificatio
 const headerClassNames = ref('mb-2 p-0')
 const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
 const sidebar = useSidebarStore()
+const router = useRouter()
 const viewMode = ref(getResponsiveViewMode())
 const appNotifications = ref([])
 const unreadCount = computed(() => appNotifications.value.filter((item) => !item.read_at).length)
@@ -51,7 +53,10 @@ const openNotification = async (item) => {
     await markNotificationRead(item.uuid)
     item.read_at = new Date().toISOString()
   }
-  if (item.action_url) window.location.assign(item.action_url)
+  if (item.action_url) {
+    if (item.action_url.startsWith('/')) await router.push(item.action_url)
+    else window.location.assign(item.action_url)
+  }
 }
 
 onMounted(() => {
@@ -74,27 +79,40 @@ onBeforeUnmount(() => {
       </CHeaderToggler>
       <CHeaderNav class="d-none d-md-flex">
         <CNavItem>
-          <CNavLink href="/dashboard"> Dashboard </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink href="#">Users</CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink href="#">Settings</CNavLink>
+          <CNavLink href="#/dashboard"> Dashboard </CNavLink>
         </CNavItem>
       </CHeaderNav>
       <CHeaderNav class="ms-auto">
         <CDropdown variant="nav-item" placement="bottom-end">
           <CDropdownToggle :caret="false" class="position-relative">
             <CIcon icon="cil-bell" size="lg" />
-            <CBadge v-if="unreadCount" color="danger" shape="rounded-pill" class="header-notification-badge">{{ unreadCount > 9 ? '9+' : unreadCount }}</CBadge>
+            <CBadge
+              v-if="unreadCount"
+              color="danger"
+              shape="rounded-pill"
+              class="header-notification-badge"
+              >{{ unreadCount > 9 ? '9+' : unreadCount }}</CBadge
+            >
           </CDropdownToggle>
           <CDropdownMenu class="header-notification-menu">
-            <div class="px-3 py-2 border-bottom"><strong>Notifikasi</strong><small class="d-block text-body-secondary">{{ unreadCount }} belum dibaca</small></div>
-            <button v-for="item in appNotifications" :key="item.uuid" type="button" class="header-notification-item" :class="{ unread: !item.read_at }" @click="openNotification(item)">
-              <strong>{{ item.title }}</strong><span>{{ item.body }}</span>
+            <div class="px-3 py-2 border-bottom">
+              <strong>Notifikasi</strong
+              ><small class="d-block text-body-secondary">{{ unreadCount }} belum dibaca</small>
+            </div>
+            <button
+              v-for="item in appNotifications"
+              :key="item.uuid"
+              type="button"
+              class="header-notification-item"
+              :class="{ unread: !item.read_at }"
+              @click="openNotification(item)"
+            >
+              <strong>{{ item.title }}</strong
+              ><span>{{ item.body }}</span>
             </button>
-            <div v-if="!appNotifications.length" class="px-3 py-3 text-body-secondary text-center">Belum ada notifikasi</div>
+            <div v-if="!appNotifications.length" class="px-3 py-3 text-body-secondary text-center">
+              Belum ada notifikasi
+            </div>
           </CDropdownMenu>
         </CDropdown>
         <CNavItem>
@@ -167,10 +185,41 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.header-notification-badge { position: absolute; top: .15rem; right: .05rem; font-size: .6rem; }
-.header-notification-menu { width: min(22rem, calc(100vw - 1.5rem)); max-height: 28rem; overflow-y: auto; }
-.header-notification-item { display: flex; width: 100%; flex-direction: column; gap: .2rem; padding: .7rem 1rem; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--cui-border-color); }
-.header-notification-item:hover { background: var(--cui-tertiary-bg); }
-.header-notification-item.unread { border-left: 3px solid var(--cui-primary); background: rgba(var(--cui-primary-rgb), .08); }
-.header-notification-item span { display: -webkit-box; overflow: hidden; color: var(--cui-secondary-color); font-size: .78rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+.header-notification-badge {
+  position: absolute;
+  top: 0.15rem;
+  right: 0.05rem;
+  font-size: 0.6rem;
+}
+.header-notification-menu {
+  width: min(22rem, calc(100vw - 1.5rem));
+  max-height: 28rem;
+  overflow-y: auto;
+}
+.header-notification-item {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 0.7rem 1rem;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--cui-border-color);
+}
+.header-notification-item:hover {
+  background: var(--cui-tertiary-bg);
+}
+.header-notification-item.unread {
+  border-left: 3px solid var(--cui-primary);
+  background: rgba(var(--cui-primary-rgb), 0.08);
+}
+.header-notification-item span {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--cui-secondary-color);
+  font-size: 0.78rem;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 </style>
diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index a4938f75..dc3e26dd 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/src/components/AppHeaderDropdownAccnt.vue
@@ -43,6 +43,10 @@ function openProfile() {
   router.push('/profile')
 }
 
+function openMyApplications() {
+  router.push('/my-applications')
+}
+
 function onLogout() {
   authStore.logout()
   router.push('/pages/login')
@@ -97,6 +101,9 @@ function onLogout() {
         Settings
       </CDropdownHeader>
       <CDropdownItem @click="openProfile"> <CIcon icon="cil-user" /> Profile </CDropdownItem>
+      <CDropdownItem @click="openMyApplications">
+        <CIcon icon="cil-user-follow" /> Pengajuan Saya
+      </CDropdownItem>
       <CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
       <CDropdownItem>
         <CIcon icon="cil-dollar" /> Payments
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 7145fad7..940a1dd2 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
 
 // import { logo } from '@/assets/brand/logo'
@@ -6,9 +7,24 @@ import logo from '@/assets/images/Logo_big.png'
 import { sygnet } from '@/assets/brand/sygnet'
 import { AppSidebarNav } from '@/components/AppSidebarNav.js'
 import WalletHeaderWidget from '@/components/WalletHeaderWidget.vue'
+import { useMenuStore } from '@/stores/menu.js'
 import { useSidebarStore } from '@/stores/sidebar.js'
 
 const sidebar = useSidebarStore()
+const menuStore = useMenuStore()
+
+function containsWalletMenu(items = []) {
+  return items.some(
+    (item) =>
+      item?.slug === 'wallet' ||
+      item?.url === '/deposit-balance' ||
+      containsWalletMenu(Array.isArray(item?.children) ? item.children : []),
+  )
+}
+
+const canViewWallet = computed(
+  () => menuStore.initialized && containsWalletMenu(menuStore.dynamicMenus),
+)
 </script>
 
 <template>
@@ -47,7 +63,7 @@ const sidebar = useSidebarStore()
       </RouterLink>
       <CCloseButton class="d-lg-none" dark @click="sidebar.toggleVisible()" />
     </CSidebarHeader>
-    <div class="sidebar-wallet-slot">
+    <div v-if="canViewWallet" class="sidebar-wallet-slot">
       <WalletHeaderWidget />
     </div>
     <AppSidebarNav />
diff --git a/src/components/WalletHeaderWidget.vue b/src/components/WalletHeaderWidget.vue
index 588dbb70..a9ce84f5 100644
--- a/src/components/WalletHeaderWidget.vue
+++ b/src/components/WalletHeaderWidget.vue
@@ -20,10 +20,10 @@ onBeforeUnmount(() => window.clearInterval(timer))
 </script>
 
 <template>
-  <button type="button" class="wallet-header" title="Buka dompet" @click="router.push('/wallet')">
+  <button type="button" class="wallet-header" title="Buka saldo" @click="router.push('/deposit-balance')">
     <CIcon icon="cil-wallet" size="lg" />
-    <span v-if="active"><small>{{ active.wallet_type === 'tenant' ? 'Dompet Tenant' : 'Dompet Saya' }}</small><strong>{{ money(active.available_balance) }}</strong></span>
-    <span v-else><small>Dompet</small><strong>Rp 0</strong></span>
+    <span v-if="active"><small>{{ active.label || 'Saldo Deposit' }}</small><strong>{{ money(active.available_balance) }}</strong></span>
+    <span v-else><small>Saldo Deposit</small><strong>Rp 0</strong></span>
     <i v-if="wallets.length > 1">{{ activeIndex + 1 }}/{{ wallets.length }}</i>
   </button>
 </template>
diff --git a/src/components/materials/AssignMaterialModal.vue b/src/components/materials/AssignMaterialModal.vue
index 4e5bcef8..ced6a8c6 100644
--- a/src/components/materials/AssignMaterialModal.vue
+++ b/src/components/materials/AssignMaterialModal.vue
@@ -82,7 +82,7 @@
 <script setup>
 import { ref, nextTick, watch, onMounted, onBeforeUnmount } from 'vue'
 import Swal from 'sweetalert2'
-import { showSuccessr, showError } from '@/utils/swal'
+import { showError } from '@/utils/swal'
 
 const props = defineProps({ visible: Boolean, form: Object, saving: Boolean })
 const emit = defineEmits(['close', 'save'])
diff --git a/src/router/index.js b/src/router/index.js
index 73598b8c..f1030922 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -37,7 +37,13 @@ import { hasToken } from '@/utils/session'
 const routes = [
   {
     path: '/',
-    name: 'Home',
+    name: 'Website',
+    component: () => import('@/views/website/LandingPage.vue'),
+    meta: { guestLanding: true },
+  },
+  {
+    path: '/app',
+    name: 'Application',
     component: DefaultLayout,
     redirect: '/dashboard',
     meta: {
@@ -58,6 +64,18 @@ const routes = [
         name: 'Profile',
         component: () => import('@/views/profile/Profile.vue'),
       },
+      {
+        path: '/forbidden',
+        name: 'Forbidden',
+        component: () => import('@/views/pages/Page403.vue'),
+        meta: { publicWithinApp: true },
+      },
+      {
+        path: '/my-applications',
+        name: 'Pengajuan Saya',
+        component: () => import('@/views/access-applications/MyApplications.vue'),
+        meta: { publicWithinApp: true },
+      },
       {
         path: '/tickets',
         name: 'Tickets',
@@ -539,9 +557,44 @@ const routes = [
         component: () => import('@/views/payment-gateway/PaymentLogs.vue'),
       },
       {
-        path: '/wallet',
-        name: 'Dompet',
+        path: '/deposit-balance',
+        alias: '/wallet',
+        name: 'Saldo Deposit',
         component: () => import('@/views/wallet/WalletDashboard.vue'),
+        meta: { activeMenu: '/deposit-balance' },
+      },
+      {
+        path: '/voucher-hotspot/sales',
+        name: 'Jual Voucher Hotspot',
+        component: () => import('@/views/voucher-hotspot/VoucherSales.vue'),
+      },
+      {
+        path: '/voucher-hotspot/agents',
+        name: 'Agen Voucher',
+        component: () => import('@/views/voucher-hotspot/VoucherAgents.vue'),
+      },
+      {
+        path: '/voucher-hotspot/login-page',
+        name: 'Voucher LoginPage',
+        component: () => import('@/views/voucher-hotspot/VoucherLoginPage.vue'),
+      },
+      {
+        path: '/access-applications/tenants',
+        name: 'Pengajuan Tenant',
+        component: () => import('@/views/access-applications/ApplicationReviews.vue'),
+        meta: { applicationType: 'tenant' },
+      },
+      {
+        path: '/access-applications/agents',
+        name: 'Pengajuan Agen',
+        component: () => import('@/views/access-applications/ApplicationReviews.vue'),
+        meta: { applicationType: 'agent' },
+      },
+      {
+        path: '/access-applications/staff',
+        name: 'Pengajuan Staff',
+        component: () => import('@/views/access-applications/ApplicationReviews.vue'),
+        meta: { applicationType: 'staff' },
       },
       {
         path: '/users',
@@ -661,7 +714,27 @@ router.beforeEach(async (to) => {
 
   if (requiresAuth) {
     try {
-      await useMenuStore().fetchMenus()
+      const menuStore = useMenuStore()
+      await menuStore.fetchMenus()
+
+      const publicWithinApp = to.matched.some((record) => record.meta.publicWithinApp)
+      const alwaysAllowed = ['/dashboard', '/profile', '/forbidden', '/my-applications']
+
+      if (!publicWithinApp && !alwaysAllowed.includes(to.path)) {
+        let accessUrl = to.meta.activeMenu || to.path
+
+        if (to.meta.activeMenuBase && to.params.scope) {
+          accessUrl = `${to.meta.activeMenuBase}/${to.params.scope}`
+        }
+
+        if (!menuStore.canAccessUrl(accessUrl)) {
+          return {
+            name: 'Forbidden',
+            query: { from: to.fullPath },
+            replace: true,
+          }
+        }
+      }
     } catch {
       useAuthStore().logout()
 
diff --git a/src/services/notificationService.js b/src/services/notificationService.js
index 741cc927..3352ce9e 100644
--- a/src/services/notificationService.js
+++ b/src/services/notificationService.js
@@ -25,6 +25,35 @@ export async function updateNotificationChannel(channel, id, payload) {
 export async function testNotificationChannel(channel, id) {
   return (await api.post(`${channelBase(channel)}/settings/${id}/test`)).data
 }
+export async function deleteNotificationChannel(channel, id) {
+  return (await api.delete(`${channelBase(channel)}/settings/${id}`)).data
+}
+export async function getSystemNotificationCampaigns(params = {}) {
+  return (await api.get('/notifications/system/campaigns', { params })).data
+}
+export async function createSystemNotificationCampaign(payload) {
+  return (await api.post('/notifications/system/campaigns', payload)).data
+}
+export async function getSystemAudienceOptions(params = {}) {
+  return (await api.get('/notifications/system/audience-options', { params })).data
+}
+export async function getWhapiState(id) {
+  return (await api.get(`/notifications/channels/whatsapp-unofficial/settings/${id}/state`)).data
+}
+export async function startWhapi(id) {
+  return (await api.post(`/notifications/channels/whatsapp-unofficial/settings/${id}/start`)).data
+}
+export async function getWhapiQr(id) {
+  return (await api.get(`/notifications/channels/whatsapp-unofficial/settings/${id}/qr`)).data
+}
+export async function sendWhapiTestMessage(id, payload) {
+  return (
+    await api.post(
+      `/notifications/channels/whatsapp-unofficial/settings/${id}/test-message`,
+      payload,
+    )
+  ).data
+}
 export async function getNotificationTemplates(channel) {
   return (await api.get(`${channelBase(channel)}/templates`)).data
 }
diff --git a/src/services/roleApplicationService.js b/src/services/roleApplicationService.js
new file mode 100644
index 00000000..17d00248
--- /dev/null
+++ b/src/services/roleApplicationService.js
@@ -0,0 +1,15 @@
+import api from '@/api/axios'
+
+export const getMyRoleApplications = async () => (await api.get('/me/role-applications')).data
+export const createRoleApplication = async (payload) =>
+  (await api.post('/me/role-applications', payload)).data
+export const getRoleApplications = async (type, params = {}) =>
+  (await api.get(`/role-applications/${type}`, { params })).data
+export const getTenantMenuGroupOptions = async () =>
+  (await api.get('/role-applications/tenant/menu-group-options')).data
+export const getStaffMenuGroupOptions = async () =>
+  (await api.get('/role-applications/staff/menu-group-options')).data
+export const reviewRoleApplication = async (id, payload) =>
+  (await api.put(`/role-applications/${id}/review`, payload)).data
+export const linkUserCustomer = async (payload) =>
+  (await api.post('/customer-user-links', payload)).data
diff --git a/src/services/voucherService.js b/src/services/voucherService.js
new file mode 100644
index 00000000..ab0b844f
--- /dev/null
+++ b/src/services/voucherService.js
@@ -0,0 +1,12 @@
+import api from '@/api/axios'
+
+export const getVoucherOptions = async (scope = 'sales') => (await api.get(`/voucher-hotspot/${scope === 'agents' ? 'agent-options' : scope === 'login-page' ? 'login-page-options' : 'sales-options'}`)).data
+export const getVoucherSales = async (params = {}) => (await api.get('/voucher-hotspot/sales', { params })).data
+export const getVoucherSale = async (id) => (await api.get(`/voucher-hotspot/sales/${id}`)).data
+export const createVoucherSale = async (payload) => (await api.post('/voucher-hotspot/sales', payload)).data
+export const getVoucherAgents = async (params = {}) => (await api.get('/voucher-hotspot/agents', { params })).data
+export const createVoucherAgent = async (payload) => (await api.post('/voucher-hotspot/agents', payload)).data
+export const updateVoucherAgent = async (id, payload) => (await api.put(`/voucher-hotspot/agents/${id}`, payload)).data
+export const deleteVoucherAgent = async (id) => (await api.delete(`/voucher-hotspot/agents/${id}`)).data
+export const getVoucherLoginPage = async () => (await api.get('/voucher-hotspot/login-page')).data
+export const saveVoucherLoginPage = async (payload) => (await api.put('/voucher-hotspot/login-page', payload)).data
diff --git a/src/services/walletService.js b/src/services/walletService.js
index 2573de06..836b433a 100644
--- a/src/services/walletService.js
+++ b/src/services/walletService.js
@@ -2,5 +2,4 @@ import api from '@/api/axios'
 
 export const getMyWallets = async () => (await api.get('/wallets')).data
 export const getWalletLedger = async (id, params = {}) => (await api.get(`/wallets/${id}/ledger`, { params })).data
-export const transferWallet = async (id, payload) => (await api.post(`/wallets/${id}/transfer`, payload)).data
 export const withdrawWallet = async (id, payload) => (await api.post(`/wallets/${id}/withdraw`, payload)).data
diff --git a/src/stores/auth.js b/src/stores/auth.js
index 32beb7c7..afb54c70 100644
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -46,6 +46,8 @@ export const useAuthStore = defineStore('auth', {
       pendingVerificationEmail: savedVerification.verification_target || '',
       verificationChannel: savedVerification.verification_channel || 'email',
       verificationTarget: savedVerification.verification_target || '',
+      verificationCode: savedVerification.verification_code || '',
+      verificationCodeExpiresAt: savedVerification.expires_at || null,
     }
   },
 
@@ -110,10 +112,15 @@ export const useAuthStore = defineStore('auth', {
         this.verificationChannel = payload?.verification_channel || 'email'
         this.verificationTarget = payload?.verification_target || payload?.email || ''
         this.pendingVerificationEmail = this.verificationTarget
+        const verification = data?.data?.verification || data?.verification || {}
+        this.verificationCode = verification?.code || ''
+        this.verificationCodeExpiresAt = verification?.expires_at || null
 
         setVerificationContext({
           verification_channel: this.verificationChannel,
           verification_target: this.verificationTarget,
+          verification_code: this.verificationCode,
+          expires_at: this.verificationCodeExpiresAt,
         })
 
         return data
@@ -141,6 +148,8 @@ export const useAuthStore = defineStore('auth', {
         this.pendingVerificationEmail = ''
         this.verificationChannel = 'email'
         this.verificationTarget = ''
+        this.verificationCode = ''
+        this.verificationCodeExpiresAt = null
         clearVerificationContext()
 
         return data
@@ -158,6 +167,16 @@ export const useAuthStore = defineStore('auth', {
 
       try {
         const data = await resendVerificationCodeApi(payload)
+        const verification = data?.data?.verification || data?.verification || {}
+        this.verificationCode = verification?.code || ''
+        this.verificationCodeExpiresAt = verification?.expires_at || null
+
+        setVerificationContext({
+          verification_channel: payload?.verification_channel || this.verificationChannel,
+          verification_target: payload?.verification_target || this.verificationTarget,
+          verification_code: this.verificationCode,
+          expires_at: this.verificationCodeExpiresAt,
+        })
         return data
       } catch (error) {
         this.error = extractErrorMessage(error)
@@ -176,6 +195,8 @@ export const useAuthStore = defineStore('auth', {
       this.pendingVerificationEmail = ''
       this.verificationChannel = 'email'
       this.verificationTarget = ''
+      this.verificationCode = ''
+      this.verificationCodeExpiresAt = null
       clearVerificationContext()
     },
   },
diff --git a/src/stores/menu.js b/src/stores/menu.js
index 69cf8b57..16b2ab76 100644
--- a/src/stores/menu.js
+++ b/src/stores/menu.js
@@ -36,6 +36,13 @@ function mapMenuItem(item, isChild = false) {
   }
 }
 
+function flattenMenus(items = []) {
+  return items.flatMap((item) => [
+    item,
+    ...flattenMenus(Array.isArray(item?.children) ? item.children : []),
+  ])
+}
+
 export const useMenuStore = defineStore('menu', {
   state: () => ({
     isMaster: false,
@@ -49,9 +56,24 @@ export const useMenuStore = defineStore('menu', {
     mappedMenus(state) {
       return state.dynamicMenus.map((item) => mapMenuItem(item))
     },
+    accessibleMenus(state) {
+      return flattenMenus(state.dynamicMenus)
+    },
+    accessibleUrls() {
+      return this.accessibleMenus
+        .filter((item) => item?.permissions?.can_view !== false && item?.url && item.url !== '#')
+        .map((item) => item.url)
+    },
   },
 
   actions: {
+    canAccessUrl(url) {
+      if (!url) return false
+
+      return this.accessibleUrls.some(
+        (menuUrl) => url === menuUrl || url.startsWith(`${menuUrl}/`),
+      )
+    },
     async fetchMenus({ force = false } = {}) {
       if (this.initialized && !force) {
         return this.dynamicMenus
diff --git a/src/views/access-applications/ApplicationReviews.vue b/src/views/access-applications/ApplicationReviews.vue
new file mode 100644
index 00000000..f9235cc6
--- /dev/null
+++ b/src/views/access-applications/ApplicationReviews.vue
@@ -0,0 +1,227 @@
+<script setup>
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import BaseResponsiveDataView from '@/components/base/BaseResponsiveDataView.vue'
+import {
+  getRoleApplications,
+  getStaffMenuGroupOptions,
+  getTenantMenuGroupOptions,
+  reviewRoleApplication,
+} from '@/services/roleApplicationService'
+import { showError, showSuccess } from '@/utils/swal'
+
+const route = useRoute(),
+  type = computed(() => route.meta.applicationType),
+  loading = ref(true),
+  loaded = ref(false),
+  saving = ref(false),
+  menuGroupsLoading = ref(false),
+  menuGroups = ref([]),
+  items = ref([]),
+  modal = ref(false),
+  selected = ref(null)
+const query = ref({ page: 1, per_page: 10, status: 'pending' }),
+  pagination = ref({ current_page: 1, last_page: 1, per_page: 10, total: 0 })
+const form = reactive({
+  decision: 'approved',
+  review_notes: '',
+  menu_group_id: '',
+  payment_type: 'prepaid',
+  price_mode: 'discount',
+  discount_percent: 0,
+  commission_percent: 0,
+  credit_limit: 0,
+})
+const config = computed(
+  () =>
+    ({
+      tenant: ['Pengajuan Tenant', 'Persetujuan tenant baru oleh platform'],
+      agent: ['Pengajuan Agen Voucher', 'Persetujuan agen pada tenant aktif'],
+      staff: ['Pengajuan Staff', 'Persetujuan calon karyawan pada tenant aktif'],
+    })[type.value],
+)
+const columns = [
+  { key: 'applicant_label', label: 'Pemohon' },
+  { key: 'target_label', label: 'Pengajuan' },
+  { key: 'reason', label: 'Alasan' },
+  { key: 'status_label', label: 'Status' },
+  { key: 'submitted_label', label: 'Diajukan' },
+]
+const actions = [{ key: 'review', label: 'Tinjau', color: 'primary' }]
+async function fetchData(params = query.value) {
+  query.value = { ...query.value, ...params }
+  loading.value = true
+  try {
+    const r = await getRoleApplications(type.value, query.value),
+      rows = r?.data?.data || []
+    items.value = rows.map((x) => ({
+      ...x,
+      applicant_label: `${x.applicant?.name || '-'} · ${x.applicant?.email || ''}`,
+      target_label: type.value === 'tenant' ? x.payload?.tenant_name : x.tenant?.tenant_name,
+      reason: x.payload?.reason,
+      status_label: { pending: 'Menunggu', approved: 'Disetujui', rejected: 'Ditolak' }[x.status],
+      submitted_label: new Date(x.submitted_at).toLocaleString('id-ID'),
+    }))
+    pagination.value = {
+      current_page: r?.data?.current_page || 1,
+      last_page: r?.data?.last_page || 1,
+      per_page: r?.data?.per_page || 10,
+      total: r?.data?.total || 0,
+    }
+  } catch (e) {
+    showError(e?.response?.data?.message || 'Gagal memuat pengajuan.')
+  } finally {
+    loading.value = false
+    loaded.value = true
+  }
+}
+async function loadMenuGroups() {
+  if (!['tenant', 'staff'].includes(type.value)) return
+  menuGroupsLoading.value = true
+  try {
+    const r =
+      type.value === 'tenant' ? await getTenantMenuGroupOptions() : await getStaffMenuGroupOptions()
+    menuGroups.value = r?.data || []
+  } catch (e) {
+    showError(e?.response?.data?.message || 'Gagal memuat pilihan Group Menu.')
+  } finally {
+    menuGroupsLoading.value = false
+  }
+}
+async function open({ item }) {
+  selected.value = item
+  Object.assign(form, {
+    decision: 'approved',
+    review_notes: '',
+    menu_group_id: '',
+    payment_type: 'prepaid',
+    price_mode: 'discount',
+    discount_percent: 0,
+    commission_percent: 0,
+    credit_limit: 0,
+  })
+  modal.value = true
+  await loadMenuGroups()
+}
+async function submit() {
+  if (
+    ['tenant', 'staff'].includes(type.value) &&
+    form.decision === 'approved' &&
+    !form.menu_group_id
+  ) {
+    showError('Group Menu wajib dipilih sebelum menyetujui pengajuan.')
+    return
+  }
+  saving.value = true
+  try {
+    await reviewRoleApplication(selected.value.id, {
+      ...form,
+      menu_group_id: form.menu_group_id || null,
+    })
+    modal.value = false
+    showSuccess(`Pengajuan berhasil ${form.decision === 'approved' ? 'disetujui' : 'ditolak'}.`)
+    await fetchData()
+  } catch (e) {
+    const errors = e?.response?.data?.errors
+    showError(
+      errors?.menu_group_id?.[0] || e?.response?.data?.message || 'Pengajuan gagal ditinjau.',
+    )
+  } finally {
+    saving.value = false
+  }
+}
+watch(type, () => {
+  loaded.value = false
+  menuGroups.value = []
+  fetchData()
+})
+onMounted(fetchData)
+</script>
+<template>
+  <div class="brdvx-page-container">
+    <div class="brdvx-page-header">
+      <h5 class="mb-0 fw-semibold">{{ config[0] }}</h5>
+      <small class="text-body-secondary">{{ config[1] }}</small>
+    </div>
+    <div v-if="loading && !loaded" class="brdvx-loading-state">
+      <CSpinner color="primary" />
+      <p class="brdvx-loading-text">Memuat data...</p>
+    </div>
+    <BaseResponsiveDataView
+      v-else
+      :columns="columns"
+      :items="items"
+      :actions="actions"
+      server-side
+      :pagination="pagination"
+      :loading="loading"
+      @query-change="fetchData"
+      @action-click="open"
+    />
+  </div>
+  <CModal :visible="modal" @close="modal = false"
+    ><CModalHeader><CModalTitle>Tinjau Pengajuan</CModalTitle></CModalHeader
+    ><CModalBody
+      ><CAlert color="info"
+        ><strong>{{ selected?.applicant?.name }}</strong>
+        <div>{{ selected?.reason }}</div></CAlert
+      ><CFormLabel>Keputusan</CFormLabel
+      ><CFormSelect v-model="form.decision" class="mb-3"
+        ><option value="approved">Setujui</option>
+        <option value="rejected">Tolak</option></CFormSelect
+      ><template v-if="['tenant', 'staff'].includes(type) && form.decision === 'approved'"
+        ><CFormLabel>Group Menu <span class="text-danger">*</span></CFormLabel
+        ><CFormSelect
+          v-model="form.menu_group_id"
+          class="mb-2"
+          :disabled="menuGroupsLoading"
+          required
+          ><option value="">
+            {{ menuGroupsLoading ? 'Memuat Group Menu...' : `Pilih Group Menu ${type}` }}
+          </option>
+          <option v-for="group in menuGroups" :key="group.id" :value="group.id">
+            {{ group.name }} ({{ group.menus_count }} menu)
+          </option></CFormSelect
+        ><small v-if="form.menu_group_id" class="d-block text-body-secondary mb-3">{{
+          menuGroups.find((group) => group.id === Number(form.menu_group_id))?.description
+        }}</small
+        ><CAlert v-if="!menuGroupsLoading && !menuGroups.length" color="warning"
+          >Belum ada Group Menu yang dapat diberikan.</CAlert
+        ></template
+      ><template v-if="type === 'agent' && form.decision === 'approved'"
+        ><CFormLabel>Kategori Agen</CFormLabel
+        ><CFormSelect v-model="form.payment_type" class="mb-3"
+          ><option value="prepaid">Deposit dahulu</option>
+          <option value="postpaid">Jual dahulu, bayar kemudian</option></CFormSelect
+        ><CFormLabel>Skema Harga</CFormLabel
+        ><CFormSelect v-model="form.price_mode" class="mb-3"
+          ><option value="discount">Diskon</option>
+          <option value="commission">Komisi</option></CFormSelect
+        ><CRow class="g-2"
+          ><CCol :md="6"
+            ><CFormLabel>Diskon (%)</CFormLabel
+            ><CFormInput v-model.number="form.discount_percent" type="number" /></CCol
+          ><CCol :md="6"
+            ><CFormLabel>Komisi (%)</CFormLabel
+            ><CFormInput v-model.number="form.commission_percent" type="number" /></CCol
+          ><CCol v-if="form.payment_type === 'postpaid'" :xs="12"
+            ><CFormLabel>Limit Kredit</CFormLabel
+            ><CFormInput v-model.number="form.credit_limit" type="number" /></CCol></CRow></template
+      ><CFormLabel class="mt-3">Catatan Reviewer</CFormLabel
+      ><CFormTextarea v-model="form.review_notes" rows="3" /></CModalBody
+    ><CModalFooter
+      ><CButton color="secondary" @click="modal = false">Batal</CButton
+      ><CButton
+        :color="form.decision === 'approved' ? 'success' : 'danger'"
+        :disabled="
+          saving ||
+          (['tenant', 'staff'].includes(type) &&
+            form.decision === 'approved' &&
+            (!form.menu_group_id || menuGroupsLoading))
+        "
+        @click="submit"
+        >Simpan Keputusan</CButton
+      ></CModalFooter
+    ></CModal
+  >
+</template>
diff --git a/src/views/access-applications/MyApplications.vue b/src/views/access-applications/MyApplications.vue
new file mode 100644
index 00000000..f5cd4e4a
--- /dev/null
+++ b/src/views/access-applications/MyApplications.vue
@@ -0,0 +1,303 @@
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { createRoleApplication, getMyRoleApplications } from '@/services/roleApplicationService'
+import { showError, showSuccess } from '@/utils/swal'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const loading = ref(true),
+  saving = ref(false),
+  items = ref([]),
+  modal = ref('')
+const form = reactive({})
+const statusColor = { pending: 'warning', approved: 'success', rejected: 'danger' }
+const accessLevel = computed(() => authStore.user?.access_level || 'customer')
+const pendingTypes = computed(
+  () =>
+    new Set(
+      items.value.filter((item) => item.status === 'pending').map((item) => item.application_type),
+    ),
+)
+const approvedTypes = computed(
+  () =>
+    new Set(
+      items.value.filter((item) => item.status === 'approved').map((item) => item.application_type),
+    ),
+)
+const isTenantOwner = computed(
+  () => accessLevel.value === 'tenant_owner' || approvedTypes.value.has('tenant'),
+)
+const isStaff = computed(() => accessLevel.value === 'staff' || approvedTypes.value.has('staff'))
+const hasPendingTenant = computed(() => pendingTypes.value.has('tenant'))
+const hasPendingStaff = computed(() => pendingTypes.value.has('staff'))
+const hasPendingAgent = computed(() => pendingTypes.value.has('agent'))
+const showTenantAction = computed(
+  () => !isTenantOwner.value && !isStaff.value && !hasPendingTenant.value && !hasPendingStaff.value,
+)
+const showStaffAction = computed(
+  () => !isTenantOwner.value && !hasPendingTenant.value && !hasPendingStaff.value,
+)
+const showAgentAction = computed(
+  () => !isTenantOwner.value && !hasPendingTenant.value && !hasPendingAgent.value,
+)
+const contextMessage = computed(() => {
+  if (isTenantOwner.value)
+    return 'Akun Anda sudah menjadi Tenant Owner. Pengajuan Staff dan Agen tidak tersedia.'
+  if (hasPendingTenant.value)
+    return 'Pengajuan Tenant Owner sedang ditinjau. Pengajuan lain ditutup sementara sampai proses selesai.'
+  if (isStaff.value)
+    return 'Sebagai staff, Anda dapat mengajukan perubahan akses staff pada tenant atau menjadi agen.'
+  if (hasPendingStaff.value)
+    return 'Pengajuan Staff sedang ditinjau. Anda tetap dapat mengajukan diri sebagai agen.'
+  return 'Pilih jenis akses yang ingin Anda ajukan.'
+})
+const defaults = (type) =>
+  type === 'tenant'
+    ? {
+        application_type: 'tenant',
+        tenant_name: '',
+        tenant_code: '',
+        phone: '',
+        email: '',
+        address: '',
+        reason: '',
+      }
+    : { application_type: type, tenant_id: '', reason: '' }
+async function load() {
+  loading.value = true
+  try {
+    items.value = (await getMyRoleApplications())?.data || []
+  } catch (e) {
+    showError(e?.response?.data?.message || 'Gagal memuat pengajuan.')
+  } finally {
+    loading.value = false
+  }
+}
+function open(type) {
+  Object.keys(form).forEach((key) => delete form[key])
+  Object.assign(form, defaults(type))
+  modal.value = type
+}
+async function submit() {
+  saving.value = true
+  try {
+    await createRoleApplication(form)
+    modal.value = ''
+    showSuccess('Pengajuan berhasil dikirim dan menunggu persetujuan.')
+    await load()
+  } catch (e) {
+    showError(e?.response?.data?.message || 'Pengajuan gagal dikirim.')
+  } finally {
+    saving.value = false
+  }
+}
+onMounted(load)
+</script>
+<template>
+  <div class="brdvx-page-container">
+    <div class="brdvx-page-header">
+      <h5 class="mb-0 fw-semibold">Pengajuan Saya</h5>
+      <small class="text-body-secondary"
+        >Akun baru selalu berstatus customer. Ajukan akses tenant, staff, atau agen sesuai
+        kebutuhan.</small
+      >
+    </div>
+    <CAlert v-if="!loading" color="info" class="application-context">
+      <CIcon icon="cil-info" />
+      <span>{{ contextMessage }}</span>
+    </CAlert>
+    <div v-if="!loading" class="application-actions">
+      <button v-if="showTenantAction" @click="open('tenant')">
+        <span><CIcon icon="cil-building" size="xl" /></span>
+        <div>
+          <strong>Menjadi Pemilik Tenant</strong
+          ><small>Buat dan kelola layanan jaringan Anda sendiri</small>
+        </div></button
+      ><button v-if="showAgentAction" @click="open('agent')">
+        <span><CIcon icon="cil-user-follow" size="xl" /></span>
+        <div>
+          <strong>Menjadi Agen Voucher</strong
+          ><small>Bergabung sebagai agen pada tenant tertentu</small>
+        </div>
+      </button>
+      <button v-if="showStaffAction" @click="open('staff')">
+        <span><CIcon icon="cil-people" size="xl" /></span>
+        <div>
+          <strong>Menjadi Staff Tenant</strong
+          ><small>Bergabung sebagai karyawan pada tenant tertentu</small>
+        </div>
+      </button>
+      <div
+        v-if="!showTenantAction && !showStaffAction && !showAgentAction"
+        class="application-actions-empty"
+      >
+        <CIcon :icon="hasPendingTenant ? 'cil-task' : 'cil-check-circle'" size="xl" />
+        <strong>{{ hasPendingTenant ? 'Menunggu persetujuan' : 'Akses sudah aktif' }}</strong>
+        <small>{{ contextMessage }}</small>
+      </div>
+    </div>
+    <div v-if="loading" class="brdvx-loading-state">
+      <CSpinner color="primary" />
+      <p class="brdvx-loading-text">Memuat data...</p>
+    </div>
+    <div v-else class="history">
+      <h6>Riwayat Pengajuan</h6>
+      <div v-if="!items.length" class="empty">Belum ada pengajuan.</div>
+      <article v-for="item in items" :key="item.id">
+        <span class="type-icon"
+          ><CIcon
+            :icon="
+              item.application_type === 'tenant'
+                ? 'cil-building'
+                : item.application_type === 'staff'
+                  ? 'cil-people'
+                  : 'cil-user-follow'
+            "
+        /></span>
+        <div>
+          <strong>{{
+            item.application_type === 'tenant'
+              ? item.payload?.tenant_name
+              : `${item.application_type === 'staff' ? 'Staff' : 'Agen'} ${item.tenant?.tenant_name || `Tenant #${item.tenant_id}`}`
+          }}</strong
+          ><small>Diajukan {{ new Date(item.submitted_at).toLocaleString('id-ID') }}</small>
+          <p v-if="item.review_notes">Catatan: {{ item.review_notes }}</p>
+        </div>
+        <CBadge :color="statusColor[item.status]">{{
+          { pending: 'Menunggu', approved: 'Disetujui', rejected: 'Ditolak' }[item.status]
+        }}</CBadge>
+      </article>
+    </div>
+  </div>
+  <CModal :visible="Boolean(modal)" @close="modal = ''"
+    ><CModalHeader
+      ><CModalTitle>{{
+        modal === 'tenant'
+          ? 'Pengajuan Tenant'
+          : modal === 'staff'
+            ? 'Pengajuan Staff Tenant'
+            : 'Pengajuan Agen Voucher'
+      }}</CModalTitle></CModalHeader
+    ><CModalBody
+      ><template v-if="modal === 'tenant'"
+        ><CFormLabel>Nama Tenant/Usaha</CFormLabel
+        ><CFormInput v-model="form.tenant_name" class="mb-3" /><CFormLabel
+          >Kode Tenant yang Diinginkan</CFormLabel
+        ><CFormInput v-model="form.tenant_code" placeholder="Opsional" class="mb-3" /><CFormLabel
+          >Telepon/WhatsApp Usaha</CFormLabel
+        ><CFormInput v-model="form.phone" class="mb-3" /><CFormLabel>Email Usaha</CFormLabel
+        ><CFormInput v-model="form.email" type="email" class="mb-3" /><CFormLabel
+          >Alamat Usaha</CFormLabel
+        ><CFormTextarea v-model="form.address" rows="2" class="mb-3" /></template
+      ><template v-else
+        ><CAlert color="info">Masukkan ID tenant yang diberikan oleh pemilik tenant.</CAlert
+        ><CFormLabel>ID Tenant</CFormLabel
+        ><CFormInput v-model.number="form.tenant_id" type="number" min="1" class="mb-3" /></template
+      ><CFormLabel>Alasan Pengajuan</CFormLabel
+      ><CFormTextarea v-model="form.reason" rows="3" /></CModalBody
+    ><CModalFooter
+      ><CButton color="secondary" @click="modal = ''">Batal</CButton
+      ><CButton color="primary" :disabled="saving" @click="submit"
+        >Kirim Pengajuan</CButton
+      ></CModalFooter
+    ></CModal
+  >
+</template>
+<style scoped>
+.application-context {
+  display: flex;
+  max-width: 850px;
+  align-items: center;
+  gap: 0.65rem;
+  margin: 1rem auto 0;
+}
+.application-actions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 340px));
+  justify-content: center;
+  gap: 1rem;
+  margin: 1rem 0 2rem;
+}
+.application-actions-empty {
+  display: flex;
+  width: min(100%, 420px);
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 1.4rem;
+  color: var(--cui-secondary-color);
+  text-align: center;
+  background: var(--cui-tertiary-bg);
+  border: 1px dashed var(--cui-border-color);
+  border-radius: 1rem;
+}
+.application-actions-empty strong {
+  color: var(--cui-body-color);
+}
+.application-actions button {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 1rem;
+  color: var(--cui-body-color);
+  text-align: left;
+  background: var(--cui-body-bg);
+  border: 1px solid var(--cui-border-color);
+  border-radius: 1rem;
+  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.06);
+}
+.application-actions button:hover {
+  border-color: #ff8c00;
+  transform: translateY(-2px);
+}
+.application-actions span,
+.type-icon {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  flex: 0 0 48px;
+  place-items: center;
+  color: #fff;
+  background: linear-gradient(135deg, #f97316, #ff8c00);
+  border-radius: 0.8rem;
+}
+.application-actions div {
+  display: flex;
+  flex-direction: column;
+}
+.application-actions small,
+.history article small {
+  color: var(--cui-secondary-color);
+  font-size: 0.72rem;
+}
+.history {
+  max-width: 850px;
+  margin: auto;
+}
+.history > h6 {
+  margin-bottom: 0.8rem;
+}
+.history article {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.8rem 0;
+  border-bottom: 1px solid var(--cui-border-color);
+}
+.history article > div {
+  min-width: 0;
+  flex: 1;
+}
+.history article p {
+  margin: 0.25rem 0 0;
+  color: var(--cui-secondary-color);
+  font-size: 0.72rem;
+}
+.empty {
+  padding: 2rem;
+  color: var(--cui-secondary-color);
+  text-align: center;
+  border: 1px dashed var(--cui-border-color);
+  border-radius: 1rem;
+}
+</style>
diff --git a/src/views/notifications-service/NotificationChannelDashboard.vue b/src/views/notifications-service/NotificationChannelDashboard.vue
index 12faf2f1..01fe2ea5 100644
--- a/src/views/notifications-service/NotificationChannelDashboard.vue
+++ b/src/views/notifications-service/NotificationChannelDashboard.vue
@@ -1,72 +1,177 @@
 <script setup>
 import { computed, onMounted, reactive, ref, watch } from 'vue'
+import QRCode from 'qrcode'
 import { useRoute } from 'vue-router'
 import BaseResponsiveDataView from '@/components/base/BaseResponsiveDataView.vue'
 import { useAuthStore } from '@/stores/auth'
 import { getTenants } from '@/services/tenantService'
 import {
-  createNotificationChannel, createNotificationTemplate, getNotificationChannels,
-  getNotificationLogs, getNotificationPreferences, getNotificationTemplates,
-  saveNotificationPreferences, testNotificationChannel, updateNotificationChannel,
+  createNotificationChannel,
+  createNotificationTemplate,
+  createSystemNotificationCampaign,
+  deleteNotificationChannel,
+  getNotificationChannels,
+  getNotificationLogs,
+  getNotificationPreferences,
+  getNotificationTemplates,
+  getSystemAudienceOptions,
+  getSystemNotificationCampaigns,
+  getWhapiQr,
+  getWhapiState,
+  saveNotificationPreferences,
+  sendWhapiTestMessage,
+  testNotificationChannel,
+  updateNotificationChannel,
   updateNotificationTemplate,
+  startWhapi,
 } from '@/services/notificationService'
-import { showError, showSuccess } from '@/utils/swal.js'
+import { showConfirm, showError, showSuccess } from '@/utils/swal.js'
 
-const route = useRoute(), authStore = useAuthStore()
+const route = useRoute(),
+  authStore = useAuthStore()
 const channel = computed(() => route.meta.notificationChannel)
-const isMaster = computed(() => authStore.user?.is_master || authStore.user?.access_level === 'master_admin')
+const isMaster = computed(
+  () => authStore.user?.is_master || authStore.user?.access_level === 'master_admin',
+)
 const configs = {
   system: {
-    title: 'Notifikasi Aplikasi', provider: 'internal',
-    settings: [['retention_days', 'Retensi Notifikasi (hari)', 'number'], ['maximum_notifications_per_user', 'Maksimal per User', 'number']],
+    title: 'Notifikasi Aplikasi',
+    provider: 'internal',
+    settings: [
+      ['retention_days', 'Retensi Notifikasi (hari)', 'number'],
+      ['maximum_notifications_per_user', 'Maksimal per User', 'number'],
+    ],
     credentials: [],
   },
   whatsapp_official: {
-    title: 'WhatsApp Official', provider: 'meta_cloud_api',
-    settings: [['base_url', 'Graph API Base URL'], ['default_country_code', 'Kode Negara Default']],
-    credentials: [['phone_number_id', 'Phone Number ID'], ['business_account_id', 'Business Account ID'], ['access_token', 'Access Token', 'password'], ['webhook_verify_token', 'Webhook Verify Token', 'password'], ['app_secret', 'App Secret', 'password']],
+    title: 'WhatsApp Official',
+    provider: 'meta_cloud_api',
+    settings: [
+      ['base_url', 'Graph API Base URL'],
+      ['default_country_code', 'Kode Negara Default'],
+    ],
+    credentials: [
+      ['phone_number_id', 'Phone Number ID'],
+      ['business_account_id', 'Business Account ID'],
+      ['access_token', 'Access Token', 'password'],
+      ['webhook_verify_token', 'Webhook Verify Token', 'password'],
+      ['app_secret', 'App Secret', 'password'],
+    ],
   },
   whatsapp_unofficial: {
-    title: 'WhatsApp Unofficial', provider: 'generic_gateway',
-    settings: [['send_url', 'URL Kirim Pesan'], ['health_url', 'URL Health/Session'], ['api_key_header', 'Nama Header API Key'], ['destination_field', 'Field Nomor Tujuan'], ['message_field', 'Field Isi Pesan'], ['message_id_path', 'Path ID Pesan']],
-    credentials: [['instance_id', 'Instance ID'], ['api_key', 'API Key', 'password'], ['webhook_secret', 'Webhook Secret', 'password']],
+    title: 'WhatsApp Unofficial',
+    provider: 'whapi_id',
+    settings: [['base_url', 'Base URL WHAPI (HTTP/HTTPS)']],
+    credentials: [['api_key', 'API Key Perangkat', 'password']],
   },
   email: {
-    title: 'Email', provider: 'smtp',
-    settings: [['host', 'SMTP Host'], ['port', 'SMTP Port', 'number'], ['encryption', 'Enkripsi'], ['from_address', 'Alamat Pengirim', 'email'], ['from_name', 'Nama Pengirim'], ['reply_to', 'Reply To', 'email']],
-    credentials: [['username', 'SMTP Username'], ['password', 'SMTP Password', 'password']],
+    title: 'Email',
+    provider: 'smtp',
+    settings: [
+      ['host', 'SMTP Host'],
+      ['port', 'SMTP Port', 'number'],
+      ['encryption', 'Enkripsi'],
+      ['from_address', 'Alamat Pengirim', 'email'],
+      ['from_name', 'Nama Pengirim'],
+      ['reply_to', 'Reply To', 'email'],
+    ],
+    credentials: [
+      ['username', 'SMTP Username'],
+      ['password', 'SMTP Password', 'password'],
+    ],
   },
   telegram: {
-    title: 'Telegram', provider: 'telegram_bot',
-    settings: [['parse_mode', 'Parse Mode'], ['default_chat_id', 'Default Chat ID']],
-    credentials: [['bot_token', 'Bot Token', 'password'], ['webhook_secret', 'Webhook Secret', 'password']],
+    title: 'Telegram',
+    provider: 'telegram_bot',
+    settings: [
+      ['parse_mode', 'Parse Mode'],
+      ['default_chat_id', 'Default Chat ID'],
+    ],
+    credentials: [
+      ['bot_token', 'Bot Token', 'password'],
+      ['webhook_secret', 'Webhook Secret', 'password'],
+    ],
   },
 }
 const config = computed(() => configs[channel.value])
 const activeTab = ref('settings')
-const loading = ref(true), saving = ref(false), modal = ref(false), editingId = ref(null)
-const channels = ref([]), templates = ref([]), logs = ref([]), tenants = ref([])
-const events = ref([]), preferences = ref([]), selectedTenantId = ref('')
+const loading = ref(true),
+  saving = ref(false),
+  modal = ref(false),
+  editingId = ref(null)
+const channels = ref([]),
+  templates = ref([]),
+  logs = ref([]),
+  tenants = ref([])
+const campaigns = ref([]),
+  audienceUsers = ref([]),
+  qrImage = ref(''),
+  whapiState = ref(''),
+  activeWhapiId = ref(null),
+  whapiConnecting = ref(false),
+  testMessageModal = ref(false),
+  testMessageChannel = ref(null)
+const events = ref([]),
+  preferences = ref([]),
+  selectedTenantId = ref('')
 const pagination = ref({ current_page: 1, last_page: 1, per_page: 10, total: 0 })
 const query = ref({ page: 1, per_page: 10 })
-const form = reactive({}), templateForm = reactive({})
-const tabs = computed(() => [
-  ['settings', 'Setting'],
-  ['templates', 'Template Pesan'],
-  ...(channel.value === 'system' ? [['automation', 'Otomasi Event']] : []),
-  ['logs', 'Log Pesan'],
-])
+const form = reactive({}),
+  templateForm = reactive({})
+const campaignForm = reactive({
+  title: '',
+  body: '',
+  action_url: '',
+  target_scope: 'all_users',
+  tenant_id: '',
+  statuses: [],
+  access_levels: [],
+  user_ids: [],
+})
+const tabs = computed(() =>
+  [
+    ['settings', 'Setting'],
+    ...(channel.value === 'whatsapp_unofficial' && !isMaster.value
+      ? []
+      : [['templates', 'Template Pesan']]),
+    ...(channel.value === 'system' ? [['automation', 'Otomasi Event']] : []),
+    ...(channel.value === 'system' ? [['campaigns', 'Kirim Notifikasi']] : []),
+    ['logs', 'Log Pesan'],
+  ].filter(
+    ([key]) => channel.value !== 'whatsapp_unofficial' || isMaster.value || key === 'settings',
+  ),
+)
 const logColumns = [
-  { key: 'created_at', label: 'Waktu' }, { key: 'destination', label: 'Tujuan' },
-  { key: 'message_label', label: 'Pesan', sortable: false }, { key: 'status_label', label: 'Status' },
+  { key: 'created_at', label: 'Waktu' },
+  { key: 'destination', label: 'Tujuan' },
+  { key: 'message_label', label: 'Pesan', sortable: false },
+  { key: 'status_label', label: 'Status' },
   { key: 'attempt_count', label: 'Percobaan' },
 ]
-const defaultChannelConfig = computed(() => channels.value.find((item) => item.is_default) || channels.value[0])
+const defaultChannelConfig = computed(
+  () => channels.value.find((item) => item.is_default) || channels.value[0],
+)
+const globalWhapiChannel = computed(() =>
+  channels.value.find((item) => item.channel === 'whatsapp_unofficial' && item.tenant_id === null),
+)
+const tenantChannels = computed(() =>
+  channel.value === 'whatsapp_unofficial' && isMaster.value
+    ? channels.value.filter((item) => item.tenant_id !== null)
+    : channels.value,
+)
+const globalWhapiForm = reactive({ base_url: '', api_key: '' })
+const testMessageForm = reactive({ phone: '', message: '' })
 
 function emptyChannelForm() {
   return {
-    tenant_id: selectedTenantId.value, channel: channel.value, provider: config.value.provider,
-    name: config.value.title, enabled: true, is_default: true, settings: {}, credentials: {},
+    tenant_id: selectedTenantId.value,
+    channel: channel.value,
+    provider: config.value.provider,
+    name: config.value.title,
+    enabled: true,
+    is_default: true,
+    settings: {},
+    credentials: {},
   }
 }
 function openSetting(item = null) {
@@ -81,43 +186,83 @@ function openTemplate(item) {
   editingId.value = item.id
   Object.keys(templateForm).forEach((key) => delete templateForm[key])
   Object.assign(templateForm, {
-    tenant_id: selectedTenantId.value, notification_event_id: item.notification_event_id,
+    tenant_id: selectedTenantId.value,
+    notification_event_id: item.notification_event_id,
     notification_channel_id: item.notification_channel_id || defaultChannelConfig.value?.id || null,
-    channel: channel.value, name: item.name, subject: item.subject || '', body: item.body,
-    provider_template_name: item.provider_template_name || '', provider_template_id: item.provider_template_id || '',
-    language: item.language || 'id', approval_status: item.approval_status || 'not_required', enabled: item.enabled,
+    channel: channel.value,
+    name: item.name,
+    subject: item.subject || '',
+    body: item.body,
+    provider_template_name: item.provider_template_name || '',
+    provider_template_id: item.provider_template_id || '',
+    language: item.language || 'id',
+    approval_status: item.approval_status || 'not_required',
+    enabled: item.enabled,
   })
   modal.value = true
 }
 async function loadBase() {
   if (isMaster.value && !tenants.value.length) {
-    tenants.value = (await getTenants({ per_page: 100, sort_by: 'tenant_name', sort_direction: 'asc' }))?.data?.data || []
+    tenants.value =
+      (await getTenants({ per_page: 100, sort_by: 'tenant_name', sort_direction: 'asc' }))?.data
+        ?.data || []
   }
 }
 async function loadTab(params = query.value) {
   loading.value = true
   try {
     await loadBase()
-    if (activeTab.value === 'settings') channels.value = (await getNotificationChannels(channel.value))?.data || []
+    if (activeTab.value === 'settings') {
+      channels.value = (await getNotificationChannels(channel.value))?.data || []
+      if (channel.value === 'whatsapp_unofficial' && isMaster.value) {
+        globalWhapiForm.base_url = globalWhapiChannel.value?.settings?.base_url || ''
+        globalWhapiForm.api_key = ''
+      }
+    }
     if (activeTab.value === 'templates') {
-      const [channelResponse, templateResponse] = await Promise.all([getNotificationChannels(channel.value), getNotificationTemplates(channel.value)])
-      channels.value = channelResponse?.data || []; templates.value = templateResponse?.data || []
+      const [channelResponse, templateResponse] = await Promise.all([
+        getNotificationChannels(channel.value),
+        getNotificationTemplates(channel.value),
+      ])
+      channels.value = channelResponse?.data || []
+      templates.value = templateResponse?.data || []
     }
     if (activeTab.value === 'automation') {
-      const response = await getNotificationPreferences({ tenant_id: selectedTenantId.value || undefined })
-      events.value = response?.data?.events || []; preferences.value = response?.data?.preferences || []
+      const response = await getNotificationPreferences({
+        tenant_id: selectedTenantId.value || undefined,
+      })
+      events.value = response?.data?.events || []
+      preferences.value = response?.data?.preferences || []
     }
     if (activeTab.value === 'logs') {
       query.value = { ...query.value, ...params }
       const response = await getNotificationLogs(channel.value, query.value)
       const rows = response?.data?.data || []
       logs.value = rows.map((item) => ({
-        ...item, message_label: item.rendered_body?.slice(0, 90), status_label: item.status,
+        ...item,
+        message_label: item.rendered_body?.slice(0, 90),
+        status_label: item.status,
       }))
-      pagination.value = { current_page: response?.data?.current_page || 1, last_page: response?.data?.last_page || 1, per_page: response?.data?.per_page || 10, total: response?.data?.total || rows.length }
+      pagination.value = {
+        current_page: response?.data?.current_page || 1,
+        last_page: response?.data?.last_page || 1,
+        per_page: response?.data?.per_page || 10,
+        total: response?.data?.total || rows.length,
+      }
     }
-  } catch (error) { showError(error?.response?.data?.message || 'Gagal memuat modul notifikasi.') }
-  finally { loading.value = false }
+    if (activeTab.value === 'campaigns') {
+      const [campaignResponse, audienceResponse] = await Promise.all([
+        getSystemNotificationCampaigns(query.value),
+        getSystemAudienceOptions({ tenant_id: campaignForm.tenant_id || undefined }),
+      ])
+      campaigns.value = campaignResponse?.data?.data || []
+      audienceUsers.value = audienceResponse?.data || []
+    }
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal memuat modul notifikasi.')
+  } finally {
+    loading.value = false
+  }
 }
 async function saveSetting() {
   if (isMaster.value && !form.tenant_id) return showError('Tenant wajib dipilih.')
@@ -125,27 +270,197 @@ async function saveSetting() {
   try {
     if (editingId.value) await updateNotificationChannel(channel.value, editingId.value, form)
     else await createNotificationChannel(channel.value, form)
-    modal.value = false; showSuccess('Konfigurasi berhasil disimpan.'); await loadTab()
-  } catch (error) { showError(error?.response?.data?.message || 'Gagal menyimpan konfigurasi.') }
-  finally { saving.value = false }
+    modal.value = false
+    showSuccess('Konfigurasi berhasil disimpan.')
+    await loadTab()
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal menyimpan konfigurasi.')
+  } finally {
+    saving.value = false
+  }
+}
+async function saveGlobalWhapi() {
+  if (!globalWhapiForm.base_url) return showError('Base URL WHAPI wajib diisi.')
+  if (!globalWhapiChannel.value && !globalWhapiForm.api_key)
+    return showError('API Key WHAPI wajib diisi.')
+
+  saving.value = true
+  const payload = {
+    tenant_id: null,
+    channel: 'whatsapp_unofficial',
+    provider: 'whapi_id',
+    name: 'WHAPI Global Master Admin',
+    enabled: true,
+    is_default: true,
+    settings: { base_url: globalWhapiForm.base_url },
+    credentials: { api_key: globalWhapiForm.api_key },
+  }
+  try {
+    if (globalWhapiChannel.value)
+      await updateNotificationChannel('whatsapp_unofficial', globalWhapiChannel.value.id, payload)
+    else await createNotificationChannel('whatsapp_unofficial', payload)
+    showSuccess('Konfigurasi WHAPI Master Admin berhasil disimpan.')
+    await loadTab()
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal menyimpan konfigurasi WHAPI global.')
+  } finally {
+    saving.value = false
+  }
 }
 async function saveTemplate() {
-  if (isMaster.value && !templateForm.tenant_id) return showError('Tenant untuk override template wajib dipilih.')
+  if (isMaster.value && !templateForm.tenant_id)
+    return showError('Tenant untuk override template wajib dipilih.')
   saving.value = true
   try {
     await updateNotificationTemplate(channel.value, editingId.value, templateForm)
-    modal.value = false; showSuccess('Template tenant berhasil disimpan.'); await loadTab()
-  } catch (error) { showError(error?.response?.data?.message || 'Gagal menyimpan template.') }
-  finally { saving.value = false }
+    modal.value = false
+    showSuccess('Template tenant berhasil disimpan.')
+    await loadTab()
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal menyimpan template.')
+  } finally {
+    saving.value = false
+  }
 }
 async function test(item) {
   try {
     const response = await testNotificationChannel(channel.value, item.id)
-    showSuccess(response?.data?.last_health_message || 'Pengujian selesai.'); await loadTab()
-  } catch (error) { showError(error?.response?.data?.message || 'Pengujian koneksi gagal.') }
+    showSuccess(response?.data?.last_health_message || 'Pengujian selesai.')
+    await loadTab()
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Pengujian koneksi gagal.')
+  }
+}
+async function removeChannel(item) {
+  const confirmation = await showConfirm(
+    'Hapus konfigurasi?',
+    'Konfigurasi yang sudah memiliki log akan dinonaktifkan agar histori tetap tersimpan.',
+  )
+  if (!confirmation.isConfirmed) return
+  try {
+    await deleteNotificationChannel(channel.value, item.id)
+    showSuccess('Konfigurasi berhasil dinonaktifkan atau dihapus.')
+    await loadTab()
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal menghapus konfigurasi.')
+  }
+}
+async function refreshWhapi(item) {
+  activeWhapiId.value = item.id
+  qrImage.value = ''
+  try {
+    const response = await getWhapiState(item.id)
+    whapiState.value = response?.data?.results?.state || 'UNKNOWN'
+  } catch (error) {
+    whapiState.value = 'ERROR'
+    showError(error?.response?.data?.message || 'Gagal mengambil status WHAPI.')
+  }
+}
+async function connectWhapi(item) {
+  activeWhapiId.value = item.id
+  qrImage.value = ''
+  whapiConnecting.value = true
+  try {
+    const stateResponse = await getWhapiState(item.id)
+    const currentState = stateResponse?.data?.results?.state
+    if (currentState === 'CONNECTED') {
+      whapiState.value = currentState
+      showSuccess('Perangkat WhatsApp sudah terhubung.')
+      return
+    }
+
+    await startWhapi(item.id)
+
+    let result = null
+    for (let attempt = 0; attempt < 15; attempt += 1) {
+      await new Promise((resolve) => window.setTimeout(resolve, attempt === 0 ? 500 : 1000))
+
+      const pollingResponse = await getWhapiState(item.id)
+      whapiState.value = pollingResponse?.data?.results?.state || 'UNKNOWN'
+
+      if (whapiState.value === 'CONNECTED') {
+        showSuccess('Perangkat WhatsApp sudah terhubung.')
+        return
+      }
+
+      if (whapiState.value === 'SERVICE_SCAN') {
+        const qrResponse = await getWhapiQr(item.id)
+        result = qrResponse?.data?.results || {}
+        break
+      }
+    }
+
+    if (!result) {
+      showError(
+        whapiState.value === 'PAIRING'
+          ? 'WHAPI masih menyiapkan sesi pairing. Silakan coba kembali beberapa saat lagi.'
+          : `QR belum siap. Status perangkat: ${whapiState.value || 'UNKNOWN'}.`,
+      )
+      return
+    }
+
+    whapiState.value = result.state || 'SERVICE_SCAN'
+    const value = result.qrString || ''
+    qrImage.value = value.startsWith('data:image/')
+      ? value
+      : value
+        ? await QRCode.toDataURL(value, { width: 320, margin: 2 })
+        : ''
+    if (!qrImage.value && whapiState.value === 'CONNECTED')
+      showSuccess('Perangkat WhatsApp sudah terhubung.')
+  } catch (error) {
+    showError(error?.response?.data?.message || 'QR belum tersedia. Pastikan service WHAPI aktif.')
+  } finally {
+    whapiConnecting.value = false
+  }
+}
+function openTestMessage(item) {
+  testMessageChannel.value = item
+  testMessageForm.phone = ''
+  testMessageForm.message = 'Halo, ini adalah pesan pengujian WhatsApp dari ManjaPro.'
+  testMessageModal.value = true
+}
+async function submitTestMessage() {
+  if (!testMessageForm.phone || !testMessageForm.message)
+    return showError('Nomor WhatsApp dan isi pesan wajib diisi.')
+
+  saving.value = true
+  try {
+    await sendWhapiTestMessage(testMessageChannel.value.id, { ...testMessageForm })
+    testMessageModal.value = false
+    showSuccess('Pesan pengujian berhasil dikirim.')
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Pesan pengujian gagal dikirim.')
+  } finally {
+    saving.value = false
+  }
+}
+async function sendSystemCampaign() {
+  saving.value = true
+  try {
+    await createSystemNotificationCampaign({ ...campaignForm })
+    Object.assign(campaignForm, {
+      title: '',
+      body: '',
+      action_url: '',
+      target_scope: isMaster.value ? 'all_users' : 'tenant',
+      tenant_id: '',
+      statuses: [],
+      access_levels: [],
+      user_ids: [],
+    })
+    showSuccess('Notifikasi System masuk antrean.')
+    await loadTab()
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal mengirim notifikasi System.')
+  } finally {
+    saving.value = false
+  }
 }
 function preference(event, targetChannel) {
-  return preferences.value.find((item) => item.notification_event_id === event.id && item.channel === targetChannel)
+  return preferences.value.find(
+    (item) => item.notification_event_id === event.id && item.channel === targetChannel,
+  )
 }
 function preferenceEnabled(event, targetChannel) {
   return preference(event, targetChannel)?.enabled || false
@@ -154,91 +469,638 @@ async function setPreference(event, targetChannel, enabled) {
   if (isMaster.value && !selectedTenantId.value) return showError('Pilih tenant terlebih dahulu.')
   const existing = preference(event, targetChannel)
   const row = {
-    tenant_id: selectedTenantId.value || undefined, notification_event_id: event.id,
-    notification_channel_id: existing?.notification_channel_id || (targetChannel === channel.value ? defaultChannelConfig.value?.id : null),
-    channel: targetChannel, enabled, priority: existing?.priority || 1, send_delay_minutes: existing?.send_delay_minutes || 0,
+    tenant_id: selectedTenantId.value || undefined,
+    notification_event_id: event.id,
+    notification_channel_id:
+      existing?.notification_channel_id ||
+      (targetChannel === channel.value ? defaultChannelConfig.value?.id : null),
+    channel: targetChannel,
+    enabled,
+    priority: existing?.priority || 1,
+    send_delay_minutes: existing?.send_delay_minutes || 0,
+  }
+  try {
+    await saveNotificationPreferences([row])
+    await loadTab()
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal menyimpan otomasi.')
   }
-  try { await saveNotificationPreferences([row]); await loadTab() }
-  catch (error) { showError(error?.response?.data?.message || 'Gagal menyimpan otomasi.') }
 }
 watch([channel, activeTab], () => {
-  editingId.value = null; modal.value = false; loadTab()
+  editingId.value = null
+  modal.value = false
+  loadTab()
+})
+watch(selectedTenantId, () => {
+  if (activeTab.value === 'automation') loadTab()
+})
+watch(
+  () => campaignForm.tenant_id,
+  () => {
+    campaignForm.user_ids = []
+    if (activeTab.value === 'campaigns') loadTab()
+  },
+)
+onMounted(() => {
+  if (!isMaster.value) campaignForm.target_scope = 'tenant'
+  loadTab()
 })
-watch(selectedTenantId, () => { if (activeTab.value === 'automation') loadTab() })
-onMounted(loadTab)
 </script>
 
 <template>
-  <CRow class="brdvx-page-row g-0 m-0"><CCol :xs="12" class="brdvx-page-column p-0"><div class="brdvx-page-container">
-    <div class="brdvx-page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
-      <div><h5 class="mb-0 fw-semibold">{{ config.title }}</h5><small class="text-body-secondary">Konfigurasi, template, otomasi dan monitoring pengiriman</small></div>
-      <CButton v-if="activeTab === 'settings'" color="primary" size="sm" @click="openSetting()">+ Tambah Setting</CButton>
-    </div>
-    <div class="notification-tabs">
-      <button v-for="[key, label] in tabs" :key="key" type="button" :class="{ active: activeTab === key }" @click="activeTab = key">{{ label }}</button>
-    </div>
-    <div v-if="loading" class="brdvx-loading-state"><CSpinner color="primary" /><p class="brdvx-loading-text">Memuat data...</p></div>
-
-    <div v-else-if="activeTab === 'settings'" class="setting-grid">
-      <CAlert v-if="!channels.length" color="info">Belum ada konfigurasi {{ config.title }} untuk tenant ini.</CAlert>
-      <CCard v-for="item in channels" :key="item.id" class="setting-card"><CCardBody>
-        <div class="d-flex justify-content-between gap-2"><div><h6>{{ item.name }}</h6><small>{{ item.tenant?.tenant_name || 'Tenant aktif' }}</small></div><CBadge :color="item.enabled ? 'success' : 'secondary'">{{ item.enabled ? 'Aktif' : 'Nonaktif' }}</CBadge></div>
-        <div class="health-line"><span>Kredensial</span><strong>{{ item.credentials_configured ? 'Tersimpan' : 'Belum lengkap' }}</strong></div>
-        <div class="health-line"><span>Status koneksi</span><strong>{{ item.last_health_status || 'Belum diuji' }}</strong></div>
-        <div class="d-flex gap-2 mt-3"><CButton size="sm" color="success" variant="outline" @click="openSetting(item)">Edit</CButton><CButton size="sm" color="info" variant="outline" @click="test(item)">Tes Koneksi</CButton></div>
-      </CCardBody></CCard>
-    </div>
-
-    <div v-else-if="activeTab === 'templates'" class="template-grid">
-      <CCard v-for="item in templates" :key="item.id" class="template-card"><CCardBody>
-        <div class="d-flex justify-content-between gap-2"><div><CBadge color="primary">{{ item.event?.category }}</CBadge><h6 class="mt-2 mb-1">{{ item.event?.name }}</h6></div><CBadge :color="item.enabled ? 'success' : 'secondary'">{{ item.enabled ? 'Enable' : 'Disable' }}</CBadge></div>
-        <p>{{ item.body }}</p><small>{{ item.tenant_id ? 'Override tenant' : 'Template bawaan' }} · Versi {{ item.version }}</small>
-        <div class="mt-3"><CButton size="sm" color="primary" variant="outline" @click="openTemplate(item)">Atur Template</CButton></div>
-      </CCardBody></CCard>
-    </div>
-
-    <div v-else-if="activeTab === 'automation'">
-      <div v-if="isMaster" class="mb-3"><CFormLabel>Tenant</CFormLabel><CFormSelect v-model="selectedTenantId" class="tenant-select"><option value="">Pilih tenant</option><option v-for="tenant in tenants" :key="tenant.id" :value="tenant.id">{{ tenant.tenant_name }}</option></CFormSelect></div>
-      <CCard><CCardBody class="p-0"><div class="automation-table">
-        <div class="automation-row automation-head"><strong>Jenis Pesan</strong><span>Aplikasi</span><span>WA Official</span><span>WA Unofficial</span><span>Email</span><span>Telegram</span></div>
-        <div v-for="event in events" :key="event.id" class="automation-row"><div><strong>{{ event.name }}</strong><small>{{ event.code }}</small></div>
-          <CFormSwitch v-for="target in ['system','whatsapp_official','whatsapp_unofficial','email','telegram']" :key="target" :model-value="preferenceEnabled(event, target)" @change="setPreference(event, target, $event.target.checked)" />
+  <CRow class="brdvx-page-row g-0 m-0"
+    ><CCol :xs="12" class="brdvx-page-column p-0"
+      ><div class="brdvx-page-container">
+        <div
+          class="brdvx-page-header d-flex justify-content-between align-items-center flex-wrap gap-2"
+        >
+          <div>
+            <h5 class="mb-0 fw-semibold">{{ config.title }}</h5>
+            <small class="text-body-secondary"
+              >Konfigurasi, template, otomasi dan monitoring pengiriman</small
+            >
+          </div>
+          <CButton
+            v-if="activeTab === 'settings' && (channel !== 'whatsapp_unofficial' || isMaster)"
+            color="primary"
+            size="sm"
+            @click="openSetting()"
+            >+ Tambah Setting</CButton
+          >
+        </div>
+        <div class="notification-tabs">
+          <button
+            v-for="[key, label] in tabs"
+            :key="key"
+            type="button"
+            :class="{ active: activeTab === key }"
+            @click="activeTab = key"
+          >
+            {{ label }}
+          </button>
+        </div>
+        <div v-if="loading" class="brdvx-loading-state">
+          <CSpinner color="primary" />
+          <p class="brdvx-loading-text">Memuat data...</p>
         </div>
-      </div></CCardBody></CCard>
-    </div>
 
-    <BaseResponsiveDataView v-else :columns="logColumns" :items="logs" server-side :pagination="pagination" :loading="loading" :actions="[]" hide-default-actions @query-change="loadTab" />
-  </div></CCol></CRow>
+        <div v-else-if="activeTab === 'settings'" class="setting-list">
+          <CCard
+            v-if="channel === 'whatsapp_unofficial' && isMaster"
+            class="setting-card global-whapi-card mb-4"
+          >
+            <CCardBody>
+              <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
+                <div>
+                  <h6 class="mb-1">WHAPI Master Admin</h6>
+                  <small class="text-body-secondary"
+                    >Konfigurasi global aplikasi, terpisah dari perangkat milik tenant.</small
+                  >
+                </div>
+                <CBadge :color="globalWhapiChannel ? 'success' : 'secondary'">{{
+                  globalWhapiChannel ? 'Tersimpan' : 'Belum diatur'
+                }}</CBadge>
+              </div>
+              <CRow class="g-3">
+                <CCol :md="6">
+                  <CFormLabel>Base URL WHAPI</CFormLabel>
+                  <CFormInput
+                    v-model="globalWhapiForm.base_url"
+                    placeholder="http://host:port atau https://domain"
+                  />
+                </CCol>
+                <CCol :md="6">
+                  <CFormLabel>API Key</CFormLabel>
+                  <CFormInput
+                    v-model="globalWhapiForm.api_key"
+                    type="password"
+                    :placeholder="
+                      globalWhapiChannel ? 'Kosongkan jika tidak diubah' : 'Masukkan API Key'
+                    "
+                  />
+                </CCol>
+              </CRow>
+              <div class="d-flex flex-wrap gap-2 mt-3">
+                <CButton color="primary" size="sm" :disabled="saving" @click="saveGlobalWhapi">
+                  {{ saving ? 'Menyimpan...' : 'Simpan Setting Global' }}
+                </CButton>
+                <CButton
+                  v-if="globalWhapiChannel"
+                  color="info"
+                  variant="outline"
+                  size="sm"
+                  @click="test(globalWhapiChannel)"
+                  >Tes Koneksi</CButton
+                >
+                <CButton
+                  v-if="globalWhapiChannel"
+                  color="success"
+                  variant="outline"
+                  size="sm"
+                  @click="openTestMessage(globalWhapiChannel)"
+                  >Kirim Pesan Uji</CButton
+                >
+              </div>
+            </CCardBody>
+          </CCard>
 
-  <CModal :visible="modal && activeTab === 'settings'" @close="modal = false" size="lg"><CModalHeader dismiss @close="modal = false"><CModalTitle>Setting {{ config.title }}</CModalTitle></CModalHeader><CModalBody><CRow class="g-3">
-    <CCol v-if="isMaster" :md="6"><CFormLabel>Tenant</CFormLabel><CFormSelect v-model="form.tenant_id"><option value="">Pilih tenant</option><option v-for="tenant in tenants" :key="tenant.id" :value="tenant.id">{{ tenant.tenant_name }}</option></CFormSelect></CCol>
-    <CCol :md="6"><CFormLabel>Nama Konfigurasi</CFormLabel><CFormInput v-model="form.name" /></CCol>
-    <CCol v-for="[key, label, type] in config.settings" :key="key" :md="6"><CFormLabel>{{ label }}</CFormLabel><CFormInput v-model="form.settings[key]" :type="type || 'text'" /></CCol>
-    <CCol v-for="[key, label, type] in config.credentials" :key="key" :md="6"><CFormLabel>{{ label }}</CFormLabel><CFormInput v-model="form.credentials[key]" :type="type || 'text'" :placeholder="editingId ? 'Kosongkan jika tidak diubah' : ''" /></CCol>
-    <CCol :md="6"><CFormCheck v-model="form.enabled" label="Channel aktif" /></CCol><CCol :md="6"><CFormCheck v-model="form.is_default" label="Jadikan default" /></CCol>
-  </CRow></CModalBody><CModalFooter><CButton color="secondary" @click="modal = false">Batal</CButton><CButton color="primary" :disabled="saving" @click="saveSetting">Simpan</CButton></CModalFooter></CModal>
+          <div v-if="channel === 'whatsapp_unofficial' && isMaster" class="setting-list-heading">
+            <h6 class="mb-1">Setting WHAPI Tenant</h6>
+            <small class="text-body-secondary">Daftar perangkat yang dialokasikan ke tenant.</small>
+          </div>
+          <CAlert v-if="!tenantChannels.length" color="info"
+            >Belum ada konfigurasi {{ config.title }} untuk tenant ini.</CAlert
+          >
+          <CCard v-for="item in tenantChannels" :key="item.id" class="setting-card"
+            ><CCardBody>
+              <div class="d-flex justify-content-between gap-2">
+                <div>
+                  <h6>{{ item.name }}</h6>
+                  <small>{{ item.tenant?.tenant_name || 'Tenant aktif' }}</small>
+                </div>
+                <CBadge :color="item.enabled ? 'success' : 'secondary'">{{
+                  item.enabled ? 'Aktif' : 'Nonaktif'
+                }}</CBadge>
+              </div>
+              <div class="health-line">
+                <span>Kredensial</span
+                ><strong>{{ item.credentials_configured ? 'Tersimpan' : 'Belum lengkap' }}</strong>
+              </div>
+              <div class="health-line">
+                <span>Status koneksi</span
+                ><strong>{{ item.last_health_status || 'Belum diuji' }}</strong>
+              </div>
+              <div v-if="channel !== 'whatsapp_unofficial' || isMaster" class="d-flex gap-2 mt-3">
+                <CButton size="sm" color="success" variant="outline" @click="openSetting(item)"
+                  >Edit</CButton
+                ><CButton size="sm" color="info" variant="outline" @click="test(item)"
+                  >Tes Koneksi</CButton
+                >
+                <CButton
+                  v-if="channel === 'whatsapp_unofficial' && item.enabled"
+                  size="sm"
+                  color="success"
+                  variant="outline"
+                  @click="openTestMessage(item)"
+                  >Kirim Pesan Uji</CButton
+                >
+                <CButton
+                  v-if="isMaster"
+                  size="sm"
+                  color="danger"
+                  variant="outline"
+                  @click="removeChannel(item)"
+                  >Hapus</CButton
+                >
+              </div>
+              <div v-else class="d-flex flex-wrap gap-2 mt-3">
+                <CButton size="sm" color="info" variant="outline" @click="refreshWhapi(item)"
+                  >Periksa Status</CButton
+                >
+                <CButton
+                  v-if="item.enabled"
+                  size="sm"
+                  color="success"
+                  :disabled="whapiConnecting && activeWhapiId === item.id"
+                  @click="connectWhapi(item)"
+                  >{{
+                    whapiConnecting && activeWhapiId === item.id
+                      ? 'Menyiapkan QR...'
+                      : 'Tautkan WhatsApp'
+                  }}</CButton
+                >
+                <CButton
+                  v-if="item.enabled"
+                  size="sm"
+                  color="success"
+                  variant="outline"
+                  @click="openTestMessage(item)"
+                  >Kirim Pesan Uji</CButton
+                >
+              </div>
+              <div v-if="activeWhapiId === item.id && whapiState" class="whapi-state mt-3">
+                <span>Status perangkat</span><CBadge color="info">{{ whapiState }}</CBadge>
+              </div>
+              <div v-if="activeWhapiId === item.id && qrImage" class="whapi-qr">
+                <img :src="qrImage" alt="QR untuk menautkan WhatsApp" />
+                <strong>Scan melalui WhatsApp → Perangkat tertaut</strong>
+                <small>QR berlaku singkat. Ambil ulang jika kedaluwarsa.</small>
+              </div>
+            </CCardBody></CCard
+          >
+        </div>
 
-  <CModal :visible="modal && activeTab === 'templates'" @close="modal = false" size="lg"><CModalHeader dismiss @close="modal = false"><CModalTitle>Template Pesan</CModalTitle></CModalHeader><CModalBody><CRow class="g-3">
-    <CCol v-if="isMaster" :md="6"><CFormLabel>Tenant Override</CFormLabel><CFormSelect v-model="templateForm.tenant_id"><option value="">Pilih tenant</option><option v-for="tenant in tenants" :key="tenant.id" :value="tenant.id">{{ tenant.tenant_name }}</option></CFormSelect></CCol>
-    <CCol :md="6"><CFormLabel>Nama Template</CFormLabel><CFormInput v-model="templateForm.name" /></CCol>
-    <CCol v-if="channel === 'email' || channel === 'system'" :xs="12"><CFormLabel>Subject/Judul</CFormLabel><CFormInput v-model="templateForm.subject" /></CCol>
-    <CCol :xs="12"><CFormLabel>Isi Pesan</CFormLabel><CFormTextarea v-model="templateForm.body" rows="7" /><CFormText>Gunakan variabel seperti &#123;&#123;customer.name&#125;&#125; atau &#123;&#123;invoice.total&#125;&#125;.</CFormText></CCol>
-    <template v-if="channel === 'whatsapp_official'"><CCol :md="6"><CFormLabel>Nama Template Meta</CFormLabel><CFormInput v-model="templateForm.provider_template_name" /></CCol><CCol :md="3"><CFormLabel>Bahasa</CFormLabel><CFormInput v-model="templateForm.language" /></CCol><CCol :md="3"><CFormLabel>Approval</CFormLabel><CFormSelect v-model="templateForm.approval_status"><option value="pending">Pending</option><option value="approved">Approved</option><option value="rejected">Rejected</option></CFormSelect></CCol></template>
-    <CCol :xs="12"><CFormCheck v-model="templateForm.enabled" label="Template aktif" /></CCol>
-  </CRow></CModalBody><CModalFooter><CButton color="secondary" @click="modal = false">Batal</CButton><CButton color="primary" :disabled="saving" @click="saveTemplate">Simpan Override</CButton></CModalFooter></CModal>
+        <div v-else-if="activeTab === 'templates'" class="template-grid">
+          <CCard v-for="item in templates" :key="item.id" class="template-card"
+            ><CCardBody>
+              <div class="d-flex justify-content-between gap-2">
+                <div>
+                  <CBadge color="primary">{{ item.event?.category }}</CBadge>
+                  <h6 class="mt-2 mb-1">{{ item.event?.name }}</h6>
+                </div>
+                <CBadge :color="item.enabled ? 'success' : 'secondary'">{{
+                  item.enabled ? 'Enable' : 'Disable'
+                }}</CBadge>
+              </div>
+              <p>{{ item.body }}</p>
+              <small
+                >{{ item.tenant_id ? 'Override tenant' : 'Template bawaan' }} · Versi
+                {{ item.version }}</small
+              >
+              <div class="mt-3">
+                <CButton size="sm" color="primary" variant="outline" @click="openTemplate(item)"
+                  >Atur Template</CButton
+                >
+              </div>
+            </CCardBody></CCard
+          >
+        </div>
+
+        <div v-else-if="activeTab === 'automation'">
+          <div v-if="isMaster" class="mb-3">
+            <CFormLabel>Tenant</CFormLabel
+            ><CFormSelect v-model="selectedTenantId" class="tenant-select"
+              ><option value="">Pilih tenant</option>
+              <option v-for="tenant in tenants" :key="tenant.id" :value="tenant.id">
+                {{ tenant.tenant_name }}
+              </option></CFormSelect
+            >
+          </div>
+          <CCard
+            ><CCardBody class="p-0"
+              ><div class="automation-table">
+                <div class="automation-row automation-head">
+                  <strong>Jenis Pesan</strong><span>Aplikasi</span><span>WA Official</span
+                  ><span>WA Unofficial</span><span>Email</span><span>Telegram</span>
+                </div>
+                <div v-for="event in events" :key="event.id" class="automation-row">
+                  <div>
+                    <strong>{{ event.name }}</strong
+                    ><small>{{ event.code }}</small>
+                  </div>
+                  <CFormSwitch
+                    v-for="target in [
+                      'system',
+                      'whatsapp_official',
+                      'whatsapp_unofficial',
+                      'email',
+                      'telegram',
+                    ]"
+                    :key="target"
+                    :model-value="preferenceEnabled(event, target)"
+                    @change="setPreference(event, target, $event.target.checked)"
+                  />
+                </div></div></CCardBody
+          ></CCard>
+        </div>
+
+        <div v-else-if="activeTab === 'campaigns'" class="system-campaign-layout">
+          <CCard class="campaign-compose"
+            ><CCardBody>
+              <h6>Kirim Notifikasi System</h6>
+              <p class="text-body-secondary small">
+                Kirim melalui aplikasi ke penerima yang dipilih. Proses besar dijalankan melalui
+                antrean.
+              </p>
+              <CFormLabel>Judul</CFormLabel><CFormInput v-model="campaignForm.title" class="mb-3" />
+              <CFormLabel>Isi notifikasi</CFormLabel
+              ><CFormTextarea v-model="campaignForm.body" rows="5" class="mb-3" />
+              <CRow class="g-3">
+                <CCol :md="6"
+                  ><CFormLabel>Target</CFormLabel
+                  ><CFormSelect v-model="campaignForm.target_scope">
+                    <option v-if="isMaster" value="all_users">Semua user</option>
+                    <option value="tenant">User dalam tenant</option>
+                    <option value="access_level">Berdasarkan level akses</option>
+                    <option value="selected_users">User tertentu</option>
+                  </CFormSelect></CCol
+                >
+                <CCol v-if="isMaster" :md="6"
+                  ><CFormLabel>Batasi Tenant</CFormLabel
+                  ><CFormSelect v-model="campaignForm.tenant_id"
+                    ><option value="">Semua tenant/platform</option>
+                    <option v-for="tenant in tenants" :key="tenant.id" :value="tenant.id">
+                      {{ tenant.tenant_name }}
+                    </option></CFormSelect
+                  ></CCol
+                >
+                <CCol :md="6"
+                  ><CFormLabel>Status User</CFormLabel
+                  ><CFormSelect v-model="campaignForm.statuses" multiple
+                    ><option value="active">Aktif</option>
+                    <option value="inactive">Tidak aktif</option>
+                    <option value="suspended">Ditangguhkan</option></CFormSelect
+                  ></CCol
+                >
+                <CCol :md="6"
+                  ><CFormLabel>Level Akses</CFormLabel
+                  ><CFormSelect v-model="campaignForm.access_levels" multiple
+                    ><option value="customer">Customer</option>
+                    <option value="staff">Staff</option>
+                    <option value="tenant_owner">Tenant Owner</option>
+                    <option v-if="isMaster" value="master_admin">Master Admin</option></CFormSelect
+                  ></CCol
+                >
+                <CCol v-if="campaignForm.target_scope === 'selected_users'" :xs="12"
+                  ><CFormLabel>Pilih User</CFormLabel
+                  ><CFormSelect v-model="campaignForm.user_ids" multiple :html-size="8"
+                    ><option v-for="user in audienceUsers" :key="user.id" :value="user.id">
+                      {{ user.name }} · {{ user.tenant_role || user.access_level }} ·
+                      {{ user.status }}
+                    </option></CFormSelect
+                  ><CFormText>Maksimal 50 user ditampilkan sesuai tenant.</CFormText></CCol
+                >
+                <CCol :xs="12"
+                  ><CFormLabel>URL Tujuan ketika diklik</CFormLabel
+                  ><CFormInput
+                    v-model="campaignForm.action_url"
+                    placeholder="Opsional, contoh: /customers/orders"
+                /></CCol>
+              </CRow>
+              <div class="d-flex justify-content-end mt-3">
+                <CButton
+                  color="primary"
+                  :disabled="saving || !campaignForm.title || !campaignForm.body"
+                  @click="sendSystemCampaign"
+                  >{{ saving ? 'Mengantrekan...' : 'Kirim Notifikasi' }}</CButton
+                >
+              </div>
+            </CCardBody></CCard
+          >
+          <div class="campaign-history">
+            <h6>Riwayat Pengiriman</h6>
+            <CAlert v-if="!campaigns.length" color="info"
+              >Belum ada pengiriman notifikasi System.</CAlert
+            ><CCard v-for="item in campaigns" :key="item.id" class="mb-2"
+              ><CCardBody
+                ><div class="d-flex justify-content-between gap-2">
+                  <strong>{{ item.title }}</strong
+                  ><CBadge :color="item.status === 'completed' ? 'success' : 'warning'">{{
+                    item.status
+                  }}</CBadge>
+                </div>
+                <p class="small text-body-secondary my-2">{{ item.body }}</p>
+                <small
+                  >{{ item.processed_recipients }} / {{ item.estimated_recipients }} penerima ·
+                  {{ item.creator?.name || '-' }}</small
+                ></CCardBody
+              ></CCard
+            >
+          </div>
+        </div>
+
+        <BaseResponsiveDataView
+          v-else
+          :columns="logColumns"
+          :items="logs"
+          server-side
+          :pagination="pagination"
+          :loading="loading"
+          :actions="[]"
+          hide-default-actions
+          @query-change="loadTab"
+        /></div></CCol
+  ></CRow>
+
+  <CModal :visible="modal && activeTab === 'settings'" @close="modal = false" size="lg"
+    ><CModalHeader dismiss @close="modal = false"
+      ><CModalTitle>Setting {{ config.title }}</CModalTitle></CModalHeader
+    ><CModalBody
+      ><CRow class="g-3">
+        <CCol v-if="isMaster" :md="6"
+          ><CFormLabel>Tenant</CFormLabel
+          ><CFormSelect v-model="form.tenant_id"
+            ><option value="">Pilih tenant</option>
+            <option v-for="tenant in tenants" :key="tenant.id" :value="tenant.id">
+              {{ tenant.tenant_name }}
+            </option></CFormSelect
+          ></CCol
+        >
+        <CCol :md="6"
+          ><CFormLabel>Nama Konfigurasi</CFormLabel><CFormInput v-model="form.name"
+        /></CCol>
+        <CCol v-for="[key, label, type] in config.settings" :key="key" :md="6"
+          ><CFormLabel>{{ label }}</CFormLabel
+          ><CFormInput v-model="form.settings[key]" :type="type || 'text'"
+        /></CCol>
+        <CCol v-for="[key, label, type] in config.credentials" :key="key" :md="6"
+          ><CFormLabel>{{ label }}</CFormLabel
+          ><CFormInput
+            v-model="form.credentials[key]"
+            :type="type || 'text'"
+            :placeholder="editingId ? 'Kosongkan jika tidak diubah' : ''"
+        /></CCol>
+        <CCol :md="6"><CFormCheck v-model="form.enabled" label="Channel aktif" /></CCol
+        ><CCol :md="6"
+          ><CFormCheck v-model="form.is_default" label="Jadikan default"
+        /></CCol> </CRow></CModalBody
+    ><CModalFooter
+      ><CButton color="secondary" @click="modal = false">Batal</CButton
+      ><CButton color="primary" :disabled="saving" @click="saveSetting"
+        >Simpan</CButton
+      ></CModalFooter
+    ></CModal
+  >
+
+  <CModal :visible="modal && activeTab === 'templates'" @close="modal = false" size="lg"
+    ><CModalHeader dismiss @close="modal = false"
+      ><CModalTitle>Template Pesan</CModalTitle></CModalHeader
+    ><CModalBody
+      ><CRow class="g-3">
+        <CCol v-if="isMaster" :md="6"
+          ><CFormLabel>Tenant Override</CFormLabel
+          ><CFormSelect v-model="templateForm.tenant_id"
+            ><option value="">Pilih tenant</option>
+            <option v-for="tenant in tenants" :key="tenant.id" :value="tenant.id">
+              {{ tenant.tenant_name }}
+            </option></CFormSelect
+          ></CCol
+        >
+        <CCol :md="6"
+          ><CFormLabel>Nama Template</CFormLabel><CFormInput v-model="templateForm.name"
+        /></CCol>
+        <CCol v-if="channel === 'email' || channel === 'system'" :xs="12"
+          ><CFormLabel>Subject/Judul</CFormLabel><CFormInput v-model="templateForm.subject"
+        /></CCol>
+        <CCol :xs="12"
+          ><CFormLabel>Isi Pesan</CFormLabel
+          ><CFormTextarea v-model="templateForm.body" rows="7" /><CFormText
+            >Gunakan variabel seperti &#123;&#123;customer.name&#125;&#125; atau
+            &#123;&#123;invoice.total&#125;&#125;.</CFormText
+          ></CCol
+        >
+        <template v-if="channel === 'whatsapp_official'"
+          ><CCol :md="6"
+            ><CFormLabel>Nama Template Meta</CFormLabel
+            ><CFormInput v-model="templateForm.provider_template_name" /></CCol
+          ><CCol :md="3"
+            ><CFormLabel>Bahasa</CFormLabel><CFormInput v-model="templateForm.language" /></CCol
+          ><CCol :md="3"
+            ><CFormLabel>Approval</CFormLabel
+            ><CFormSelect v-model="templateForm.approval_status"
+              ><option value="pending">Pending</option>
+              <option value="approved">Approved</option>
+              <option value="rejected">Rejected</option></CFormSelect
+            ></CCol
+          ></template
+        >
+        <CCol :xs="12"
+          ><CFormCheck v-model="templateForm.enabled" label="Template aktif"
+        /></CCol> </CRow></CModalBody
+    ><CModalFooter
+      ><CButton color="secondary" @click="modal = false">Batal</CButton
+      ><CButton color="primary" :disabled="saving" @click="saveTemplate"
+        >Simpan Override</CButton
+      ></CModalFooter
+    ></CModal
+  >
+
+  <CModal :visible="testMessageModal" @close="testMessageModal = false">
+    <CModalHeader dismiss @close="testMessageModal = false">
+      <CModalTitle>Uji Kirim Pesan WhatsApp</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <CAlert color="info">
+        Perangkat: <strong>{{ testMessageChannel?.name }}</strong>
+      </CAlert>
+      <div class="mb-3">
+        <CFormLabel>Nomor WhatsApp</CFormLabel>
+        <CFormInput
+          v-model="testMessageForm.phone"
+          type="tel"
+          placeholder="Contoh: 081234567890 atau 6281234567890"
+        />
+        <CFormText>Nomor awalan 0 otomatis dikonversi menjadi kode negara 62.</CFormText>
+      </div>
+      <div>
+        <CFormLabel>Pesan</CFormLabel>
+        <CFormTextarea
+          v-model="testMessageForm.message"
+          rows="5"
+          maxlength="4000"
+          placeholder="Masukkan isi pesan pengujian"
+        />
+        <CFormText>{{ testMessageForm.message.length }} / 4000 karakter</CFormText>
+      </div>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" @click="testMessageModal = false">Batal</CButton>
+      <CButton
+        color="success"
+        :disabled="saving || !testMessageForm.phone || !testMessageForm.message"
+        @click="submitTestMessage"
+      >
+        {{ saving ? 'Mengirim...' : 'Kirim Pesan Uji' }}
+      </CButton>
+    </CModalFooter>
+  </CModal>
 </template>
 
 <style scoped>
-.notification-tabs { display: flex; gap: .35rem; overflow-x: auto; margin-bottom: 1rem; padding-bottom: .25rem; }
-.notification-tabs button { padding: .5rem .8rem; color: var(--cui-secondary-color); white-space: nowrap; background: transparent; border: 0; border-bottom: 2px solid transparent; }
-.notification-tabs button.active { color: var(--cui-primary); border-bottom-color: var(--cui-primary); }
-.setting-grid, .template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .8rem; }
-.setting-card, .template-card { height: 100%; }
-.health-line { display: flex; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--cui-border-color); }
-.template-card p { min-height: 3.5rem; margin: .75rem 0; white-space: pre-wrap; }
-.tenant-select { max-width: 25rem; }
-.automation-table { overflow-x: auto; }
-.automation-row { display: grid; grid-template-columns: minmax(15rem, 2fr) repeat(5, minmax(7rem, 1fr)); align-items: center; min-width: 52rem; padding: .75rem; border-bottom: 1px solid var(--cui-border-color); }
-.automation-row > div { display: flex; flex-direction: column; }
-.automation-head { background: var(--cui-tertiary-bg); }
+.notification-tabs {
+  display: flex;
+  gap: 0.35rem;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+  padding-bottom: 0.25rem;
+}
+.notification-tabs button {
+  padding: 0.5rem 0.8rem;
+  color: var(--cui-secondary-color);
+  white-space: nowrap;
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+}
+.notification-tabs button.active {
+  color: var(--cui-primary);
+  border-bottom-color: var(--cui-primary);
+}
+.setting-grid,
+.template-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
+  gap: 0.8rem;
+}
+.setting-card,
+.template-card {
+  height: 100%;
+}
+.health-line {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--cui-border-color);
+}
+.template-card p {
+  min-height: 3.5rem;
+  margin: 0.75rem 0;
+  white-space: pre-wrap;
+}
+.tenant-select {
+  max-width: 25rem;
+}
+.automation-table {
+  overflow-x: auto;
+}
+.automation-row {
+  display: grid;
+  grid-template-columns: minmax(15rem, 2fr) repeat(5, minmax(7rem, 1fr));
+  align-items: center;
+  min-width: 52rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--cui-border-color);
+}
+.automation-row > div {
+  display: flex;
+  flex-direction: column;
+}
+.automation-head {
+  background: var(--cui-tertiary-bg);
+}
+.whapi-state {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.65rem;
+  background: var(--cui-tertiary-bg);
+  border-radius: 0.6rem;
+}
+.whapi-qr {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 0.45rem;
+  margin-top: 1rem;
+  padding: 1rem;
+  text-align: center;
+  background: #fff;
+  border-radius: 0.8rem;
+}
+.whapi-qr img {
+  width: min(100%, 280px);
+  aspect-ratio: 1;
+  object-fit: contain;
+}
+.whapi-qr strong {
+  color: #1f2937;
+}
+.whapi-qr small {
+  color: #6b7280;
+}
+.system-campaign-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
+  gap: 1rem;
+}
+.campaign-compose {
+  height: fit-content;
+}
+@media (max-width: 991.98px) {
+  .system-campaign-layout {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/src/views/pages/Page403.vue b/src/views/pages/Page403.vue
new file mode 100644
index 00000000..560a0bb2
--- /dev/null
+++ b/src/views/pages/Page403.vue
@@ -0,0 +1,31 @@
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+</script>
+
+<template>
+  <div class="permission-page">
+    <div class="permission-card">
+      <span class="permission-icon"><CIcon icon="cil-shield-alt" size="3xl" /></span>
+      <div>
+        <p class="permission-code">403</p>
+        <h1>Tidak Memiliki Akses</h1>
+        <p>Menu atau halaman ini tidak tersedia untuk akun yang sedang digunakan.</p>
+      </div>
+      <div class="d-flex flex-wrap justify-content-center gap-2">
+        <CButton color="secondary" variant="outline" @click="router.back()">Kembali</CButton>
+        <CButton color="primary" @click="router.push('/dashboard')">Ke Dashboard</CButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.permission-page { display: grid; min-height: calc(100vh - 9rem); place-items: center; padding: 1rem; }
+.permission-card { width: min(100%, 32rem); padding: 2rem; text-align: center; background: var(--cui-body-bg); border: 1px solid var(--cui-border-color); border-radius: 1rem; box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .08); }
+.permission-icon { display: inline-flex; width: 5rem; height: 5rem; align-items: center; justify-content: center; margin-bottom: 1rem; color: #fff; background: linear-gradient(135deg, #f97316, #ff8c00); border-radius: 50%; }
+.permission-code { margin: 0; color: #ff8c00; font-size: .8rem; font-weight: 700; letter-spacing: .18em; }
+.permission-card h1 { margin: .25rem 0 .65rem; font-size: clamp(1.4rem, 4vw, 2rem); }
+.permission-card > div > p:last-child { color: var(--cui-secondary-color); }
+</style>
diff --git a/src/views/pages/VerifyCode.vue b/src/views/pages/VerifyCode.vue
index 97c35c51..86d5795c 100644
--- a/src/views/pages/VerifyCode.vue
+++ b/src/views/pages/VerifyCode.vue
@@ -14,6 +14,11 @@ const form = reactive({
 
 const isLoading = computed(() => authStore.loading)
 const errorMessage = computed(() => authStore.error)
+const temporaryVerificationCode = computed(() => authStore.verificationCode)
+
+function useTemporaryCode() {
+  form.verification_code = temporaryVerificationCode.value
+}
 
 async function onSubmit() {
   authStore.clearError()
@@ -98,6 +103,23 @@ function goToLogin() {
                   />
                 </CInputGroup>
 
+                <CAlert
+                  v-if="temporaryVerificationCode"
+                  color="warning"
+                  class="temporary-code-box mb-4"
+                >
+                  <div>
+                    <small class="d-block text-body-secondary">Kode verifikasi sementara</small>
+                    <strong class="temporary-code-value">{{ temporaryVerificationCode }}</strong>
+                    <small class="d-block mt-1">
+                      Kode ditampilkan di sini karena channel pengiriman belum aktif.
+                    </small>
+                  </div>
+                  <CButton color="warning" size="sm" type="button" @click="useTemporaryCode">
+                    Gunakan kode
+                  </CButton>
+                </CAlert>
+
                 <div class="d-grid gap-2">
                   <CButton color="primary" type="submit" :disabled="isLoading">
                     {{ isLoading ? 'Memverifikasi...' : 'Verifikasi' }}
@@ -119,3 +141,24 @@ function goToLogin() {
     </CContainer>
   </div>
 </template>
+
+<style scoped>
+.temporary-code-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.temporary-code-value {
+  font-size: 1.45rem;
+  letter-spacing: 0.32rem;
+}
+
+@media (max-width: 575.98px) {
+  .temporary-code-box {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/src/views/tickets/TicketIncident.vue b/src/views/tickets/TicketIncident.vue
index aac1192f..3d25b9be 100644
--- a/src/views/tickets/TicketIncident.vue
+++ b/src/views/tickets/TicketIncident.vue
@@ -2,7 +2,7 @@
 import { ref, reactive, computed, onMounted } from 'vue'
 import { useTicketIncidentStore } from '@/stores/ticketIncident.js'
 import { formatTanggal } from '@/utils/tglindo.js'
-import { showConfirm, showSuccess, showSuccessr, showError } from '@/utils/swal.js'
+import { showConfirm, showSuccess, showError } from '@/utils/swal.js'
 import { CButton } from '@coreui/vue'
 import api from '@/api/axios'
 
@@ -136,7 +136,7 @@ async function updateTicketIncidentType(id) {
     const response = await api.put(`/ticket-incident-types/${id}`, body)
     store.updateItem(editingIndex.value, response.data.data)
     modal.value = false
-    showSuccessr('Data Berhasil Di Simpan')
+    showSuccess('Data Berhasil Di Simpan')
     fetchTicketIncidentTypes()
   } catch (err) {
     showError(err.response?.data?.message || 'Gagal mengupdate data: ' + err.message)
diff --git a/src/views/tickets/TicketType.vue b/src/views/tickets/TicketType.vue
index fe72e148..3dc0e367 100644
--- a/src/views/tickets/TicketType.vue
+++ b/src/views/tickets/TicketType.vue
@@ -2,7 +2,7 @@
 import { ref, reactive, computed, onMounted } from 'vue'
 import { useTicketTypeStore } from '@/stores/ticketType.js'
 import { formatTanggal } from '@/utils/tglindo.js'
-import { showConfirm, showSuccess, showSuccessr, showError } from '@/utils/swal.js'
+import { showConfirm, showSuccess, showError } from '@/utils/swal.js'
 import { CButton } from '@coreui/vue'
 import { CBadge } from '@coreui/vue'
 import api from '@/api/axios'
@@ -169,7 +169,7 @@ async function updateTicketType(id) {
     await api.put(`/ticket-types/${id}`, body)
     store.updateTicketType(editingIndex.value, { ...body })
     modal.value = false
-    showSuccessr('Data berhasil diupdate')
+    showSuccess('Data berhasil diupdate')
     fetchAllData()
   } catch (err) {
     showError(err.response?.data?.message || 'Gagal mengupdate data: ' + err.message)
diff --git a/src/views/users/Users.vue b/src/views/users/Users.vue
index c46161f0..24a756ce 100644
--- a/src/views/users/Users.vue
+++ b/src/views/users/Users.vue
@@ -68,6 +68,7 @@ function emptyForm() {
     whatsapp_number: '',
     password: '',
     access_level: 'staff',
+    is_platform_staff: false,
     status: 'active',
     nik: '',
     address: '',
@@ -263,6 +264,7 @@ async function hydrateForm(user) {
     email: user?.email || '',
     whatsapp_number: user?.whatsapp_number || '',
     access_level: user?.access_level || 'staff',
+    is_platform_staff: Boolean(user?.is_platform_staff),
     status: user?.status || 'active',
     nik: profile.nik || '',
     address: profile.address || '',
@@ -320,6 +322,7 @@ function buildPayload() {
     whatsapp_number: form.whatsapp_number.trim() || null,
     access_level: form.access_level,
     is_master: form.access_level === 'master_admin',
+    is_platform_staff: isMasterActor.value ? Boolean(form.is_platform_staff) : false,
     status: form.status,
     user_profile: {
       nik: form.nik.trim() || null,
@@ -482,6 +485,7 @@ onMounted(fetchUsers)
                   <option value="active">Aktif</option><option value="inactive">Nonaktif</option><option value="suspended">Ditangguhkan</option>
                 </CFormSelect>
               </CCol>
+              <CCol v-if="isMasterActor" :md="4" class="d-flex align-items-end pb-2"><CFormCheck v-model="form.is_platform_staff" label="Staff Platform (dapat review pengajuan tenant)" /></CCol>
               <CCol :md="4"><CFormLabel>Password {{ isEdit ? '(opsional)' : '' }}</CFormLabel><CFormInput v-model="form.password" type="password" /></CCol>
             </CRow>
           </CCardBody>
diff --git a/src/views/voucher-hotspot/VoucherAgents.vue b/src/views/voucher-hotspot/VoucherAgents.vue
new file mode 100644
index 00000000..646dc22e
--- /dev/null
+++ b/src/views/voucher-hotspot/VoucherAgents.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import BaseResponsiveDataView from '@/components/base/BaseResponsiveDataView.vue'
+import { createVoucherAgent, deleteVoucherAgent, getVoucherAgents, getVoucherOptions, updateVoucherAgent } from '@/services/voucherService'
+import { showConfirm, showError, showSuccess } from '@/utils/swal'
+
+const loading = ref(true), loaded = ref(false), saving = ref(false), modal = ref(false), editing = ref(null), items = ref([]), users = ref([])
+const query = ref({ page: 1, per_page: 10 }), pagination = ref({ current_page: 1, last_page: 1, per_page: 10, total: 0 }), form = reactive({})
+const columns = [{ key: 'agent_code', label: 'Kode Agen' }, { key: 'user_label', label: 'User' }, { key: 'type_label', label: 'Kategori' }, { key: 'pricing_label', label: 'Parameter Harga' }, { key: 'limit_label', label: 'Limit/Piutang' }, { key: 'status', label: 'Status' }]
+const actions = [{ key: 'edit', label: 'Edit', color: 'success' }, { key: 'delete', label: 'Nonaktifkan', color: 'danger' }]
+const money = (v) => `Rp ${Number(v || 0).toLocaleString('id-ID')}`
+const defaults = () => ({ user_id: '', agent_code: '', payment_type: 'prepaid', price_mode: 'discount', discount_percent: 0, commission_percent: 0, credit_limit: 0, status: 'active', notes: '' })
+function normalize(x) { return { ...x, user_label: x.user?.name || '-', type_label: x.payment_type === 'prepaid' ? 'Deposit Dahulu' : 'Jual Dulu, Bayar Kemudian', pricing_label: x.price_mode === 'discount' ? `Diskon ${x.discount_percent}%` : `Komisi ${x.commission_percent}%`, limit_label: x.payment_type === 'postpaid' ? `${money(x.outstanding_balance)} / ${money(x.credit_limit)}` : 'Menggunakan saldo dompet' } }
+async function fetchData(params = query.value) { query.value = { ...query.value, ...params }; loading.value = true; try { const r = await getVoucherAgents(query.value), rows = r?.data?.data || []; items.value = rows.map(normalize); pagination.value = { current_page: r?.data?.current_page || 1, last_page: r?.data?.last_page || 1, per_page: r?.data?.per_page || 10, total: r?.data?.total || 0 } } catch (e) { showError(e?.response?.data?.message || 'Gagal memuat agen voucher.') } finally { loading.value = false; loaded.value = true } }
+async function open(item = null) { editing.value = item; Object.keys(form).forEach((key) => delete form[key]); Object.assign(form, defaults(), item || {}); try { users.value = (await getVoucherOptions('agents'))?.data?.users || []; modal.value = true } catch (e) { showError(e?.response?.data?.message || 'Gagal memuat user tenant.') } }
+async function save() { if (!form.user_id) return showError('User agen wajib dipilih.'); saving.value = true; try { if (editing.value) await updateVoucherAgent(editing.value.id, form); else await createVoucherAgent(form); modal.value = false; showSuccess('Agen voucher berhasil disimpan.'); await fetchData() } catch (e) { showError(e?.response?.data?.message || 'Agen voucher gagal disimpan.') } finally { saving.value = false } }
+async function action({ action, item }) { if (action === 'edit') return open(item); const result = await showConfirm('Nonaktifkan Agen', `Nonaktifkan agen ${item.user_label}?`); if (!result.isConfirmed) return; try { await deleteVoucherAgent(item.id); showSuccess('Agen berhasil dinonaktifkan.'); await fetchData() } catch (e) { showError(e?.response?.data?.message || 'Agen gagal dinonaktifkan.') } }
+onMounted(fetchData)
+</script>
+<template><div class="brdvx-page-container"><div class="brdvx-page-header d-flex justify-content-between align-items-center"><div><h5 class="mb-0 fw-semibold">Agen Voucher</h5><small class="text-body-secondary">Atur agen deposit dan agen dengan fasilitas kredit</small></div><CButton color="primary" size="sm" @click="open()">+ Tambah Agen</CButton></div><div v-if="loading && !loaded" class="brdvx-loading-state"><CSpinner color="primary" /><p class="brdvx-loading-text">Memuat data...</p></div><BaseResponsiveDataView v-else :columns="columns" :items="items" :actions="actions" server-side :pagination="pagination" :loading="loading" @query-change="fetchData" @action-click="action" /></div>
+<CModal :visible="modal" @close="modal = false"><CModalHeader><CModalTitle>{{ editing ? 'Edit' : 'Tambah' }} Agen Voucher</CModalTitle></CModalHeader><CModalBody><CFormLabel>User Tenant</CFormLabel><CFormSelect v-model="form.user_id" :disabled="Boolean(editing)" class="mb-3"><option value="">Pilih user</option><option v-for="user in users" :key="user.id" :value="user.id">{{ user.name }} · {{ user.username }}</option></CFormSelect><CFormLabel>Kode Agen</CFormLabel><CFormInput v-model="form.agent_code" placeholder="Otomatis jika dikosongkan" class="mb-3" /><CFormLabel>Kategori Pembayaran</CFormLabel><CFormSelect v-model="form.payment_type" class="mb-3"><option value="prepaid">Deposit dahulu, lalu beli voucher</option><option value="postpaid">Jual voucher dahulu, bayar kemudian</option></CFormSelect><CFormLabel>Skema Harga</CFormLabel><CFormSelect v-model="form.price_mode" class="mb-3"><option value="discount">Diskon harga beli</option><option value="commission">Komisi penjualan</option></CFormSelect><CRow class="g-3"><CCol :md="6"><CFormLabel>Diskon (%)</CFormLabel><CFormInput v-model.number="form.discount_percent" type="number" min="0" max="100" /></CCol><CCol :md="6"><CFormLabel>Komisi (%)</CFormLabel><CFormInput v-model.number="form.commission_percent" type="number" min="0" max="100" /></CCol><CCol v-if="form.payment_type === 'postpaid'" :xs="12"><CFormLabel>Limit Kredit</CFormLabel><CFormInput v-model.number="form.credit_limit" type="number" min="0" /></CCol></CRow><CFormLabel class="mt-3">Status</CFormLabel><CFormSelect v-model="form.status" class="mb-3"><option value="active">Aktif</option><option value="inactive">Nonaktif</option><option value="suspended">Ditangguhkan</option></CFormSelect><CFormLabel>Catatan</CFormLabel><CFormTextarea v-model="form.notes" rows="2" /></CModalBody><CModalFooter><CButton color="secondary" @click="modal = false">Batal</CButton><CButton color="primary" :disabled="saving" @click="save">Simpan</CButton></CModalFooter></CModal></template>
diff --git a/src/views/voucher-hotspot/VoucherLoginPage.vue b/src/views/voucher-hotspot/VoucherLoginPage.vue
new file mode 100644
index 00000000..4c6adc5b
--- /dev/null
+++ b/src/views/voucher-hotspot/VoucherLoginPage.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { getVoucherLoginPage, getVoucherOptions, saveVoucherLoginPage } from '@/services/voucherService'
+import { showError, showSuccess } from '@/utils/swal'
+
+const loading = ref(true), saving = ref(false), data = ref(null), packages = ref([]), form = reactive({ enabled: false, title: 'Beli Voucher Hotspot', theme_color: '#ff8c00', allowed_package_profile_ids: [], settings: {} })
+const setting = computed(() => data.value?.setting || {}), dummySales = computed(() => data.value?.dummy_sales || [])
+const money = (v) => `Rp ${Number(v || 0).toLocaleString('id-ID')}`
+async function load() { loading.value = true; try { const [page, options] = await Promise.all([getVoucherLoginPage(), getVoucherOptions('login-page')]); data.value = page?.data; packages.value = options?.data?.packages || []; Object.assign(form, { enabled: false, title: 'Beli Voucher Hotspot', theme_color: '#ff8c00', allowed_package_profile_ids: [], settings: {}, ...(data.value?.setting || {}) }) } catch (e) { showError(e?.response?.data?.message || 'Gagal memuat setting LoginPage.') } finally { loading.value = false } }
+async function save() { saving.value = true; try { data.value = (await saveVoucherLoginPage(form))?.data; Object.assign(form, data.value?.setting || {}); showSuccess(form.enabled ? 'Voucher LoginPage berhasil diaktifkan.' : 'Voucher LoginPage dinonaktifkan.') } catch (e) { form.enabled = Boolean(setting.value.enabled); showError(e?.response?.data?.message || 'Setting LoginPage gagal disimpan.') } finally { saving.value = false } }
+async function copyScript() { try { await navigator.clipboard.writeText(data.value?.embed_script || ''); showSuccess('Script berhasil disalin.') } catch { showError('Browser tidak mengizinkan menyalin script.') } }
+onMounted(load)
+
+</script>
+
+<template>
+<div class="brdvx-page-container">
+<div class="brdvx-page-header">
+<h5 class="mb-0 fw-semibold">Voucher LoginPage
+</h5>
+<small class="text-body-secondary">Tampilkan pembelian voucher langsung pada halaman login hotspot
+</small>
+</div>
+<div v-if="loading" class="brdvx-loading-state">
+<CSpinner color="primary" />
+<p class="brdvx-loading-text">Memuat data...
+</p>
+</div>
+<CRow v-else class="g-3 justify-content-center">
+<CCol :lg="5">
+<CCard class="setting-card">
+<CCardBody>
+<div class="toggle-head">
+<span class="feature-icon">
+<CIcon icon="cil-barcode" size="xl" />
+</span>
+<div>
+<h6 class="mb-1">Penjualan di LoginPage
+</h6>
+<small class="text-body-secondary">Membutuhkan payment gateway tenant yang aktif
+</small>
+</div>
+<CFormSwitch v-model="form.enabled" size="xl" />
+</div>
+<hr />
+<CFormLabel>Judul Widget
+</CFormLabel>
+<CFormInput v-model="form.title" class="mb-3" />
+<CFormLabel>Warna Tema
+</CFormLabel>
+<CFormInput v-model="form.theme_color" type="color" class="mb-3 color-input" />
+<CFormLabel>Paket yang Ditampilkan
+</CFormLabel>
+<CFormSelect v-model="form.allowed_package_profile_ids" multiple class="mb-3">
+<option v-for="item in packages" :key="item.id" :value="item.id">{{ item.name }} · {{ money(item.price) }}
+</option>
+</CFormSelect>
+<CButton color="primary" class="w-100" :disabled="saving" @click="save">Simpan Pengaturan
+</CButton>
+</CCardBody>
+</CCard>
+<CCard v-if="form.enabled" class="mt-3 setting-card">
+<CCardHeader class="d-flex justify-content-between align-items-center">
+<strong>Script LoginPage
+</strong>
+<CButton color="secondary" variant="ghost" size="sm" title="Salin script" @click="copyScript">
+<CIcon icon="cil-copy" /> Salin
+</CButton>
+</CCardHeader>
+<CCardBody>
+<pre>
+<code>{{ data?.embed_script }}
+</code>
+</pre>
+<CAlert color="warning" class="mb-0">
+<strong>Petunjuk pemasangan
+</strong>
+<div>Masukkan script ini ke file login page MikroTik pada posisi tempat daftar voucher ingin ditampilkan. Pastikan elemen dan script tetap berurutan.
+</div>
+</CAlert>
+</CCardBody>
+</CCard>
+</CCol>
+<CCol v-if="form.enabled" :xs="7">
+<CCard>
+<CCardHeader>
+<strong>Riwayat Penjualan LoginPage
+</strong> 
+<CBadge color="secondary">Data Dummy
+</CBadge>
+</CCardHeader>
+<CCardBody class="p-0">
+<div class="table-responsive">
+<CTable hover class="mb-0">
+<CTableHead>
+<CTableRow>
+<CTableHeaderCell>Referensi
+</CTableHeaderCell>
+<CTableHeaderCell>Pembeli
+</CTableHeaderCell>
+<CTableHeaderCell>Paket
+</CTableHeaderCell>
+<CTableHeaderCell>Nominal
+</CTableHeaderCell>
+<CTableHeaderCell>Status
+</CTableHeaderCell>
+<CTableHeaderCell>Waktu
+</CTableHeaderCell>
+</CTableRow>
+</CTableHead>
+<CTableBody>
+<CTableRow v-for="item in dummySales" :key="item.id">
+<CTableDataCell>{{ item.reference }}
+</CTableDataCell>
+<CTableDataCell>{{ item.buyer }}
+</CTableDataCell>
+<CTableDataCell>{{ item.package }}
+</CTableDataCell>
+<CTableDataCell>{{ money(item.amount) }}
+</CTableDataCell>
+<CTableDataCell>
+<CBadge :color="item.status === 'paid' ? 'success' : 'warning'">{{ item.status === 'paid' ? 'Lunas' : 'Menunggu' }}
+</CBadge>
+</CTableDataCell>
+<CTableDataCell>{{ new Date(item.created_at).toLocaleString('id-ID') }}
+</CTableDataCell>
+</CTableRow>
+</CTableBody>
+</CTable>
+</div>
+</CCardBody>
+</CCard>
+</CCol>
+</CRow>
+</div>
+</template>
+
+<style scoped>.setting-card{border-top:3px solid #ff8c00}.toggle-head{display:flex;align-items:center;gap:.75rem}.toggle-head>div{min-width:0;flex:1}.feature-icon{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#f97316,#ff8c00);border-radius:.75rem}.color-input{width:100%;height:42px}pre{max-height:16rem;padding:1rem;overflow:auto;color:#e8e8e8;background:#1e1e2d;border-radius:.75rem;white-space:pre-wrap;word-break:break-all}
+</style>
diff --git a/src/views/voucher-hotspot/VoucherSales.vue b/src/views/voucher-hotspot/VoucherSales.vue
new file mode 100644
index 00000000..0d96faaa
--- /dev/null
+++ b/src/views/voucher-hotspot/VoucherSales.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import BaseResponsiveDataView from '@/components/base/BaseResponsiveDataView.vue'
+import { createVoucherSale, getVoucherOptions, getVoucherSale, getVoucherSales } from '@/services/voucherService'
+import { showError, showSuccess } from '@/utils/swal'
+
+const loading = ref(true), loaded = ref(false), saving = ref(false), modal = ref(false), detailModal = ref(false)
+const items = ref([]), packages = ref([]), mikrotiks = ref([]), detail = ref(null)
+const query = ref({ page: 1, per_page: 10 }), pagination = ref({ current_page: 1, last_page: 1, per_page: 10, total: 0 })
+const form = reactive({ nas_package_profile_id: '', nas_mikrotik_id: '', quantity: 1, notes: '' })
+const selectedPackage = computed(() => packages.value.find((x) => Number(x.id) === Number(form.nas_package_profile_id)))
+const estimatedTotal = computed(() => Number(selectedPackage.value?.price || 0) * Number(form.quantity || 0))
+const columns = [{ key: 'sale_number', label: 'Nomor Penjualan' }, { key: 'package_label', label: 'Paket' }, { key: 'quantity', label: 'Jumlah' }, { key: 'agent_label', label: 'Penjual/Agen' }, { key: 'total_label', label: 'Total' }, { key: 'payment_label', label: 'Pembayaran' }, { key: 'created_label', label: 'Tanggal' }]
+const actions = [{ key: 'detail', label: 'Lihat Voucher', color: 'primary' }]
+const money = (value) => `Rp ${Number(value || 0).toLocaleString('id-ID')}`
+
+function normalize(x) { return { ...x, package_label: x.package_profile?.name || '-', agent_label: x.agent?.user?.name || x.creator?.name || 'Tenant', total_label: money(x.total_amount), payment_label: x.payment_status === 'credit' ? 'Kredit/Belum Dibayar' : 'Lunas', created_label: new Date(x.created_at).toLocaleString('id-ID') } }
+async function fetchData(params = query.value) { query.value = { ...query.value, ...params }; loading.value = true; try { const r = await getVoucherSales(query.value), rows = r?.data?.data || []; items.value = rows.map(normalize); pagination.value = { current_page: r?.data?.current_page || 1, last_page: r?.data?.last_page || 1, per_page: r?.data?.per_page || 10, total: r?.data?.total || 0 } } catch (e) { showError(e?.response?.data?.message || 'Gagal memuat penjualan voucher.') } finally { loading.value = false; loaded.value = true } }
+async function openCreate() { try { const r = await getVoucherOptions(); packages.value = r?.data?.packages || []; mikrotiks.value = r?.data?.mikrotiks || []; Object.assign(form, { nas_package_profile_id: packages.value[0]?.id || '', nas_mikrotik_id: '', quantity: 1, notes: '' }); modal.value = true } catch (e) { showError(e?.response?.data?.message || 'Gagal memuat pilihan voucher.') } }
+async function submit() { if (!form.nas_package_profile_id) return showError('Profile paket hotspot wajib dipilih.'); saving.value = true; try { const r = await createVoucherSale(form); modal.value = false; detail.value = r?.data; detailModal.value = true; showSuccess('Voucher berhasil dibuat dan menunggu sinkronisasi MikroTik.'); await fetchData() } catch (e) { showError(e?.response?.data?.message || 'Voucher gagal dibuat.') } finally { saving.value = false } }
+async function showDetail(item) { try { detail.value = (await getVoucherSale(item.id))?.data; detailModal.value = true } catch (e) { showError(e?.response?.data?.message || 'Detail voucher gagal dimuat.') } }
+onMounted(fetchData)
+</script>
+<template><div class="brdvx-page-container"><div class="brdvx-page-header d-flex justify-content-between align-items-center gap-2"><div><h5 class="mb-0 fw-semibold">Jual Voucher</h5><small class="text-body-secondary">Generate voucher hotspot; sinkronisasi MikroTik akan ditambahkan pada tahap integrasi</small></div><CButton color="primary" size="sm" @click="openCreate">+ Buat Voucher</CButton></div><div v-if="loading && !loaded" class="brdvx-loading-state"><CSpinner color="primary" /><p class="brdvx-loading-text">Memuat data...</p></div><BaseResponsiveDataView v-else :columns="columns" :items="items" :actions="actions" server-side :pagination="pagination" :loading="loading" @query-change="fetchData" @action-click="({ item }) => showDetail(item)" /></div>
+<CModal :visible="modal" @close="modal = false"><CModalHeader><CModalTitle>Buat Voucher Hotspot</CModalTitle></CModalHeader><CModalBody><CFormLabel>Profile Paket Hotspot</CFormLabel><CFormSelect v-model="form.nas_package_profile_id" class="mb-3"><option v-for="item in packages" :key="item.id" :value="item.id">{{ item.name }} · {{ money(item.price) }}</option></CFormSelect><CFormLabel>Target MikroTik</CFormLabel><CFormSelect v-model="form.nas_mikrotik_id" class="mb-3"><option value="">Belum ditentukan</option><option v-for="item in mikrotiks" :key="item.id" :value="item.id">{{ item.name }}</option></CFormSelect><CFormLabel>Jumlah Voucher</CFormLabel><CFormInput v-model.number="form.quantity" type="number" min="1" max="100" class="mb-3" /><div class="price-summary"><span>Estimasi harga normal</span><strong>{{ money(estimatedTotal) }}</strong><small>Harga akhir agen mengikuti diskon, saldo deposit, atau limit kredit yang ditetapkan tenant.</small></div><CFormLabel class="mt-3">Catatan</CFormLabel><CFormTextarea v-model="form.notes" rows="2" /></CModalBody><CModalFooter><CButton color="secondary" @click="modal = false">Batal</CButton><CButton color="primary" :disabled="saving" @click="submit">Generate Voucher</CButton></CModalFooter></CModal>
+<CModal :visible="detailModal" size="lg" @close="detailModal = false"><CModalHeader><CModalTitle>{{ detail?.sale_number || 'Detail Voucher' }}</CModalTitle></CModalHeader><CModalBody><div class="voucher-list"><div v-for="voucher in detail?.vouchers || []" :key="voucher.id" class="voucher-code"><span><small>USERNAME</small><strong>{{ voucher.username }}</strong></span><span><small>PASSWORD</small><strong>{{ voucher.password }}</strong></span><CBadge color="warning">{{ voucher.sync_status }}</CBadge></div></div></CModalBody></CModal></template>
+<style scoped>.price-summary{display:flex;flex-direction:column;padding:.8rem;color:#fff;background:linear-gradient(135deg,#f97316,#ff8c00);border-radius:.8rem}.price-summary strong{font-size:1.35rem}.price-summary small{opacity:.8}.voucher-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.75rem}.voucher-code{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:.6rem;padding:.8rem;border:1px dashed #ff8c00;border-radius:.75rem}.voucher-code span{display:flex;min-width:0;flex-direction:column}.voucher-code small{color:var(--cui-secondary-color);font-size:.62rem}.voucher-code strong{overflow:hidden;text-overflow:ellipsis}</style>
diff --git a/src/views/wallet/WalletDashboard.vue b/src/views/wallet/WalletDashboard.vue
index e3bb4979..eaaf7d68 100644
--- a/src/views/wallet/WalletDashboard.vue
+++ b/src/views/wallet/WalletDashboard.vue
@@ -1,171 +1,78 @@
 <script setup>
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import BaseResponsiveDataView from '@/components/base/BaseResponsiveDataView.vue'
-import { getMyWallets, getWalletLedger, transferWallet, withdrawWallet } from '@/services/walletService'
+import { getMyWallets, getWalletLedger, withdrawWallet } from '@/services/walletService'
 import { showError, showSuccess } from '@/utils/swal'
 
-const loading = ref(true), wallets = ref([]), activeId = ref(null), ledger = ref([]), modal = ref(''), saving = ref(false)
+const loading = ref(true), wallets = ref([]), activeId = ref(null), ledger = ref([]), modal = ref(false), saving = ref(false)
 const pagination = ref({ current_page: 1, last_page: 1, per_page: 10, total: 0 }), query = ref({ page: 1, per_page: 10 })
-const form = reactive({ amount: '', destination_wallet_id: '', bank_code: '', account_number: '', account_name: '' })
-const active = computed(() => wallets.value.find((x) => x.id === activeId.value) || wallets.value[0])
-const otherWallets = computed(() => wallets.value.filter((x) => x.id !== active.value?.id))
+const form = reactive({ amount: '', bank_code: '', account_number: '', account_name: '' })
+const active = computed(() => wallets.value.find((item) => item.id === activeId.value) || wallets.value[0])
 const columns = [{ key: 'date', label: 'Tanggal' }, { key: 'number', label: 'Referensi' }, { key: 'type', label: 'Jenis' }, { key: 'debit', label: 'Debit' }, { key: 'credit', label: 'Kredit' }, { key: 'balance', label: 'Saldo' }]
 const money = (value) => `Rp ${Number(value || 0).toLocaleString('id-ID')}`
-async function loadWallets() { loading.value = true; try { wallets.value = (await getMyWallets())?.data || []; activeId.value ||= wallets.value[0]?.id; await loadLedger() } catch (e) { showError(e?.response?.data?.message || 'Gagal memuat dompet.') } finally { loading.value = false } }
+
+async function loadBalances() {
+  loading.value = true
+  try {
+    wallets.value = (await getMyWallets())?.data || []
+    if (!wallets.value.some((item) => item.id === activeId.value)) activeId.value = wallets.value[0]?.id
+    await loadLedger()
+  } catch (error) { showError(error?.response?.data?.message || 'Gagal memuat saldo.') }
+  finally { loading.value = false }
+}
 async function loadLedger(params = query.value) {
-  if (!active.value) return
+  if (!active.value?.ledger_available) {
+    ledger.value = []; pagination.value = { current_page: 1, last_page: 1, per_page: 10, total: 0 }; return
+  }
   query.value = { ...query.value, ...params }
   const response = await getWalletLedger(active.value.id, query.value), rows = response?.data?.data || []
-  ledger.value = rows.map((x) => ({ ...x, date: new Date(x.created_at).toLocaleString('id-ID'), number: x.transaction?.transaction_number, type: x.transaction?.type, debit: x.entry_type === 'debit' ? money(x.amount) : '-', credit: x.entry_type === 'credit' ? money(x.amount) : '-', balance: money(x.balance_after) }))
+  ledger.value = rows.map((item) => ({ ...item, date: new Date(item.created_at).toLocaleString('id-ID'), number: item.transaction?.transaction_number, type: item.transaction?.type, debit: item.entry_type === 'debit' ? money(item.amount) : '-', credit: item.entry_type === 'credit' ? money(item.amount) : '-', balance: money(item.balance_after) }))
   pagination.value = { current_page: response?.data?.current_page || 1, last_page: response?.data?.last_page || 1, per_page: response?.data?.per_page || 10, total: response?.data?.total || 0 }
 }
-function open(type) { Object.assign(form, { amount: '', destination_wallet_id: otherWallets.value[0]?.id || '', bank_code: '', account_number: '', account_name: '' }); modal.value = type }
-async function submit() {
+function openWithdrawal() { Object.assign(form, { amount: '', bank_code: '', account_number: '', account_name: '' }); modal.value = true }
+async function submitWithdrawal() {
   saving.value = true
-  try {
-    if (modal.value === 'transfer') await transferWallet(active.value.id, { destination_wallet_id: form.destination_wallet_id, amount: form.amount })
-    if (modal.value === 'withdraw') await withdrawWallet(active.value.id, { amount: form.amount, bank_code: form.bank_code, account_number: form.account_number, account_name: form.account_name })
-    modal.value = ''; showSuccess('Permintaan berhasil diproses.'); await loadWallets()
-  } catch (e) { showError(e?.response?.data?.message || 'Transaksi dompet gagal.') } finally { saving.value = false }
+  try { await withdrawWallet(active.value.id, form); modal.value = false; showSuccess('Permintaan penarikan settlement berhasil dibuat.'); await loadBalances() }
+  catch (error) { showError(error?.response?.data?.message || 'Penarikan saldo settlement gagal.') }
+  finally { saving.value = false }
 }
 watch(activeId, loadLedger)
-onMounted(loadWallets)
+onMounted(loadBalances)
 </script>
-<template><div class="brdvx-page-container"><div class="brdvx-page-header"><h5 class="mb-0 fw-semibold">Dompet</h5><small class="text-body-secondary">Saldo user dan tenant dengan pencatatan ledger</small></div><div v-if="loading" class="brdvx-loading-state"><CSpinner color="primary" /><p class="brdvx-loading-text">Memuat data...</p></div><template v-else>
-  <div class="wallet-grid"><button v-for="wallet in wallets" :key="wallet.id" class="wallet-card" :class="{ active: active?.id === wallet.id }" @click="activeId = wallet.id"><span>{{ wallet.wallet_type === 'tenant' ? 'DOMPET TENANT' : 'DOMPET USER' }}</span><strong>{{ money(wallet.available_balance) }}</strong><small>Pending {{ money(wallet.pending_balance) }} · IDR</small></button></div>
-  <div class="wallet-actions">
-    <button type="button" class="wallet-action" disabled>
-      <span class="wallet-action-icon topup"><CIcon icon="cil-data-transfer-down" size="xl" /></span>
-      <span><strong>Isi Saldo</strong><small>Tambahkan saldo melalui payment gateway</small></span>
-    </button>
-    <button type="button" class="wallet-action" :disabled="!active" @click="open('withdraw')">
-      <span class="wallet-action-icon withdraw"><CIcon icon="cil-data-transfer-up" size="xl" /></span>
-      <span><strong>Tarik Saldo</strong><small>Kirim saldo ke rekening bank</small></span>
-    </button>
-    <button type="button" class="wallet-action" :disabled="!otherWallets.length" @click="open('transfer')">
-      <span class="wallet-action-icon transfer"><CIcon icon="cil-transfer" size="xl" /></span>
-      <span><strong>Pindah Saldo</strong><small>Transfer antara dompet user dan tenant</small></span>
-    </button>
+
+<template>
+  <div class="brdvx-page-container">
+    <div class="brdvx-page-header"><h5 class="mb-0 fw-semibold">Saldo Deposit</h5><small class="text-body-secondary">Saldo layanan user, settlement tenant, dan fasilitas kredit voucher pada tenant aktif</small></div>
+    <div v-if="loading" class="brdvx-loading-state"><CSpinner color="primary" /><p class="brdvx-loading-text">Memuat data...</p></div>
+    <template v-else>
+      <div class="wallet-grid">
+        <button v-for="balance in wallets" :key="balance.id" type="button" class="wallet-card" :class="{ active: active?.id === balance.id, credit: balance.balance_kind === 'credit' }" @click="activeId = balance.id">
+          <span>{{ (balance.label || 'Saldo Deposit').toUpperCase() }}</span><strong>{{ money(balance.available_balance) }}</strong>
+          <template v-if="balance.balance_kind === 'credit'"><small>Limit {{ money(balance.credit_limit) }} · Terpakai {{ money(balance.used_credit) }}</small><small class="usage-note">Khusus pembelian voucher hotspot</small></template>
+          <template v-else><small>Pending {{ money(balance.pending_balance) }} · IDR</small><small class="usage-note">{{ balance.usage_note }}</small></template>
+        </button>
+      </div>
+      <div class="wallet-actions">
+        <button v-if="active?.balance_kind === 'deposit'" type="button" class="wallet-action" disabled><span class="wallet-action-icon topup"><CIcon icon="cil-data-transfer-down" size="xl" /></span><span><strong>Isi Saldo Deposit</strong><small>Tambahkan saldo untuk transaksi layanan tenant</small></span></button>
+        <button v-if="active?.can_withdraw" type="button" class="wallet-action" @click="openWithdrawal"><span class="wallet-action-icon withdraw"><CIcon icon="cil-data-transfer-up" size="xl" /></span><span><strong>Tarik Settlement</strong><small>Kirim saldo settlement tenant ke rekening bank</small></span></button>
+        <div v-if="active?.balance_kind === 'credit'" class="credit-information"><CIcon icon="cil-info" size="xl" /><span><strong>Fasilitas Kredit Voucher</strong><small>Sisa kredit berkurang saat membeli voucher dan bertambah kembali setelah tagihan agen dibayar.</small></span></div>
+      </div>
+      <template v-if="active?.ledger_available"><h6 class="mt-4">Mutasi {{ active?.label }}</h6><BaseResponsiveDataView :columns="columns" :items="ledger" server-side :pagination="pagination" @query-change="loadLedger" /></template>
+      <CAlert v-else-if="active?.balance_kind === 'credit'" color="info" class="mt-4 mb-0">Riwayat pemakaian saldo kredit tersedia pada transaksi penjualan Voucher Hotspot.</CAlert>
+    </template>
   </div>
-  <h6 class="mt-4">Mutasi {{ active?.wallet_type === 'tenant' ? 'Dompet Tenant' : 'Dompet User' }}</h6><BaseResponsiveDataView :columns="columns" :items="ledger" server-side :pagination="pagination" @query-change="loadLedger" />
-</template></div>
-<CModal :visible="Boolean(modal)" @close="modal = ''"><CModalHeader><CModalTitle>{{ modal === 'transfer' ? 'Pindah Dompet' : 'Tarik Saldo' }}</CModalTitle></CModalHeader><CModalBody><CFormLabel>Nominal</CFormLabel><CFormInput v-model.number="form.amount" type="number" min="1" class="mb-3" /><template v-if="modal === 'transfer'"><CFormLabel>Dompet Tujuan</CFormLabel><CFormSelect v-model="form.destination_wallet_id"><option v-for="item in otherWallets" :key="item.id" :value="item.id">{{ item.wallet_type === 'tenant' ? 'Dompet Tenant' : 'Dompet User' }}</option></CFormSelect></template><template v-else><CFormLabel>Bank</CFormLabel><CFormInput v-model="form.bank_code" class="mb-2" /><CFormLabel>Nomor Rekening</CFormLabel><CFormInput v-model="form.account_number" class="mb-2" /><CFormLabel>Nama Pemilik</CFormLabel><CFormInput v-model="form.account_name" /></template></CModalBody><CModalFooter><CButton color="secondary" @click="modal = ''">Batal</CButton><CButton color="primary" :disabled="saving" @click="submit">Proses</CButton></CModalFooter></CModal></template>
+  <CModal :visible="modal" @close="modal = false"><CModalHeader><CModalTitle>Tarik Saldo Settlement</CModalTitle></CModalHeader><CModalBody><CFormLabel>Nominal</CFormLabel><CFormInput v-model.number="form.amount" type="number" min="1" class="mb-3" /><CFormLabel>Bank</CFormLabel><CFormInput v-model="form.bank_code" class="mb-2" /><CFormLabel>Nomor Rekening</CFormLabel><CFormInput v-model="form.account_number" class="mb-2" /><CFormLabel>Nama Pemilik</CFormLabel><CFormInput v-model="form.account_name" /></CModalBody><CModalFooter><CButton color="secondary" @click="modal = false">Batal</CButton><CButton color="primary" :disabled="saving" @click="submitWithdrawal">Proses</CButton></CModalFooter></CModal>
+</template>
+
 <style scoped>
-.wallet-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 400px));
-  gap: 1rem;
-  justify-content: center;
-}
-
-.wallet-card {
-  display: flex;
-  width: 100%;
-  max-width: 400px;
-  min-height: 130px;
-  flex-direction: column;
-  justify-content: center;
-  padding: 1.25rem;
-  color: white;
-  text-align: left;
-  background: linear-gradient(135deg, #f97316, #ff8c00 58%, #f9b115);
-  border: 3px solid transparent;
-  border-radius: 1rem;
-  box-shadow: 0 0.5rem 1rem rgba(249, 115, 22, 0.22);
-}
-
-.wallet-card.active {
-  border-color: rgba(255, 255, 255, 0.85);
-}
-
-.wallet-card span,
-.wallet-card small {
-  opacity: 0.82;
-}
-
-.wallet-card strong {
-  margin: 0.4rem 0;
-  font-size: 1.5rem;
-}
-
-.wallet-actions {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 250px));
-  justify-content: center;
-  gap: 0.75rem;
-  max-width: 800px;
-  margin: 1.25rem auto 0;
-}
-
-.wallet-action {
-  display: flex;
-  min-height: 78px;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  color: var(--cui-body-color);
-  text-align: left;
-  background: var(--cui-body-bg);
-  border: 1px solid var(--cui-border-color);
-  border-radius: 0.85rem;
-  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
-  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
-}
-
-.wallet-action:not(:disabled):hover {
-  border-color: #ff8c00;
-  box-shadow: 0 0.4rem 1rem rgba(249, 115, 22, 0.14);
-  transform: translateY(-2px);
-}
-
-.wallet-action:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.wallet-action > span:last-child {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-}
-
-.wallet-action strong {
-  font-size: 0.9rem;
-}
-
-.wallet-action small {
-  margin-top: 0.15rem;
-  color: var(--cui-secondary-color);
-  font-size: 0.7rem;
-  line-height: 1.25;
-}
-
-.wallet-action-icon {
-  display: inline-flex;
-  width: 44px;
-  height: 44px;
-  flex: 0 0 44px;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  border-radius: 0.75rem;
-}
-
-.wallet-action-icon.topup {
-  background: linear-gradient(135deg, #f97316, #f9b115);
-}
-
-.wallet-action-icon.withdraw {
-  background: linear-gradient(135deg, #2eb85c, #1f9d55);
-}
-
-.wallet-action-icon.transfer {
-  background: linear-gradient(135deg, #3399ff, #5856d6);
-}
-
-@media (max-width: 575.98px) {
-  .wallet-action {
-    width: 100%;
-  }
-}
+.wallet-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),400px)); justify-content:center; gap:1rem; }
+.wallet-card { display:flex; width:100%; max-width:400px; min-height:150px; flex-direction:column; justify-content:center; padding:1.25rem; color:white; text-align:left; background:linear-gradient(135deg,#f97316,#ff8c00 58%,#f9b115); border:3px solid transparent; border-radius:1rem; box-shadow:0 .5rem 1rem rgba(249,115,22,.22); }
+.wallet-card.active { border-color:rgba(255,255,255,.88); }.wallet-card.credit { background:linear-gradient(135deg,#5856d6,#3399ff); box-shadow:0 .5rem 1rem rgba(51,153,255,.2); }
+.wallet-card span,.wallet-card small { opacity:.84; }.wallet-card strong { margin:.4rem 0; font-size:1.5rem; }.usage-note { margin-top:.4rem; font-size:.68rem; }
+.wallet-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),300px)); justify-content:center; gap:.75rem; max-width:800px; margin:1.25rem auto 0; }
+.wallet-action,.credit-information { display:flex; min-height:78px; align-items:center; gap:.75rem; padding:.75rem; text-align:left; border-radius:.85rem; }
+.wallet-action { color:var(--cui-body-color); background:var(--cui-body-bg); border:1px solid var(--cui-border-color); box-shadow:0 .25rem .75rem rgba(0,0,0,.06); }.wallet-action:disabled { cursor:not-allowed; opacity:.55; }
+.wallet-action>span:last-child,.credit-information span { display:flex; min-width:0; flex-direction:column; }.wallet-action small,.credit-information small { margin-top:.15rem; font-size:.7rem; line-height:1.25; }
+.wallet-action-icon { display:inline-flex; width:44px; height:44px; flex:0 0 44px; align-items:center; justify-content:center; color:white; border-radius:.75rem; }.wallet-action-icon.topup { background:linear-gradient(135deg,#f97316,#f9b115); }.wallet-action-icon.withdraw { background:linear-gradient(135deg,#2eb85c,#1f9d55); }
+.credit-information { color:var(--cui-info-text-emphasis); background:var(--cui-info-bg-subtle); border:1px solid var(--cui-info-border-subtle); }
 </style>
diff --git a/src/views/website/LandingPage.vue b/src/views/website/LandingPage.vue
new file mode 100644
index 00000000..26c6fa8e
--- /dev/null
+++ b/src/views/website/LandingPage.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import logo from '@/assets/images/Logo_big.png'
+import { hasToken } from '@/utils/session'
+
+const router = useRouter(), mobileOpen = ref(false), scrolled = ref(false)
+const authenticated = computed(() => hasToken())
+const features = [
+  ['cil-people', 'PPPoE & Hotspot', 'Kelola pelanggan, profile, voucher, dan koneksi dari satu ruang kerja.'],
+  ['cil-calculator', 'Billing Otomatis', 'Buat tagihan, kirim pengingat, dan jalankan isolasi sesuai jadwal tenant.'],
+  ['cil-comment-square', 'Notifikasi Terpadu', 'Aplikasi, WhatsApp, email, dan Telegram dengan template serta log terpusat.'],
+  ['cil-location-pin', 'Maps & Topologi', 'Visualisasi POP sampai ODP, perangkat, jalur kabel, dan lokasi pelanggan.'],
+  ['cil-shield-alt', 'Multi-level Access', 'Hak akses customer, staff, tenant owner, dan master dengan audit yang jelas.'],
+  ['cil-settings', 'Multi NAS & OLT', 'Fondasi integrasi MikroTik, RADIUS, OLT, SNMP, dan Webfig dalam satu platform.'],
+]
+const plans = [
+  ['Basic', '200.000', 'PPPoE hingga 200', '10 Agen Hotspot'], ['Intermediate', '300.000', 'PPPoE hingga 500', '20 Agen Hotspot'],
+  ['Advanced', '450.000', 'PPPoE hingga 800', '50 Agen Hotspot'], ['Expert', '750.000', 'PPPoE hingga 1.200', '70 Agen Hotspot'],
+  ['Master', '1.000.000', 'PPPoE hingga 1.600', '100 Agen Hotspot'], ['Custom', null, 'PPPoE & Hotspot unlimited', 'Agen unlimited'],
+]
+function go(path) { mobileOpen.value = false; router.push(path) }
+function onScroll() { scrolled.value = window.scrollY > 20 }
+onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }))
+onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))
+</script>
+
+<template>
+  <div class="site-shell">
+    <header class="site-nav" :class="{ scrolled }"><a href="#hero" class="brand"><img :src="logo" alt="MANJAPRO" /><span><strong>MANJAPRO</strong><small>PT Radhika Data Nusantara</small></span></a><nav :class="{ open: mobileOpen }"><a href="#hero">Home</a><a href="#features">Fitur</a><a href="#plans">Paket</a><a href="#contact">Kontak</a><button class="nav-login" @click="go(authenticated ? '/dashboard' : '/pages/login')">{{ authenticated ? 'Dashboard' : 'Login' }}</button><button v-if="!authenticated" class="nav-register" @click="go('/pages/register')">Registrasi</button></nav><button class="nav-toggle" aria-label="Buka navigasi" @click="mobileOpen = !mobileOpen"><CIcon icon="cil-menu" size="xl" /></button></header>
+    <main>
+      <section id="hero" class="hero"><div class="hero-glow one"></div><div class="hero-glow two"></div><div class="hero-copy"><span class="eyebrow"><i></i> Solusi Manajemen Jaringan Terpadu</span><h1>Satu tampilan untuk <em>mengontrol semua</em> kebutuhan jaringan.</h1><p>MANJAPRO membantu ISP dan pengelola jaringan bekerja lebih cepat melalui pelanggan, billing, hotspot, topologi, notifikasi, perangkat, dan operasional yang terhubung.</p><div class="hero-actions"><button class="primary-action" @click="go(authenticated ? '/dashboard' : '/pages/register')">{{ authenticated ? 'Buka Dashboard' : 'Mulai Registrasi' }} <CIcon icon="cil-arrow-right" /></button><a href="#features" class="secondary-action">Jelajahi Fitur</a></div><div class="trust-row"><span><CIcon icon="cil-check-circle" /> Multi-tenant</span><span><CIcon icon="cil-check-circle" /> Role-based</span><span><CIcon icon="cil-check-circle" /> Siap berkembang</span></div></div><div class="hero-visual"><div class="dashboard-preview"><div class="preview-top"><span><i></i> Dashboard Live</span><small>MANJAPRO 2.0</small></div><div class="metric-grid"><article><small>Customer Aktif</small><strong>1.248</strong><b>+8.4%</b></article><article><small>PPPoE Online</small><strong>520</strong><b>65%</b></article><article><small>Hotspot</small><strong>1.100</strong><b>Live</b></article></div><div class="network-card"><div><small>Topologi Jaringan</small><strong>POP · ODC · ODP</strong></div><div class="network-line"><i></i><i></i><i></i><i></i></div></div><div class="activity-card"><span class="activity-icon"><CIcon icon="cil-bell" /></span><div><strong>Billing otomatis berjalan</strong><small>248 tagihan berhasil diproses</small></div><time>Baru saja</time></div></div></div>
+      </section>
+      <section class="proof"><span>Operasional lebih ringkas</span><strong>PPPoE</strong><strong>Hotspot</strong><strong>Billing</strong><strong>WhatsApp</strong><strong>Topologi</strong><strong>OLT</strong></section>
+      <section id="features" class="section"><div class="section-heading"><span>FITUR UNGGULAN</span><h2>Semua alat yang dibutuhkan tim Anda</h2><p>Dibangun sebagai platform modular agar usaha kecil hingga jaringan multi-tenant dapat berkembang tanpa mengganti sistem.</p></div><div class="feature-grid"><article v-for="feature in features" :key="feature[1]"><span><CIcon :icon="feature[0]" size="xl" /></span><h3>{{ feature[1] }}</h3><p>{{ feature[2] }}</p><a href="#contact">Pelajari lebih lanjut <CIcon icon="cil-arrow-right" /></a></article></div></section>
+      <section id="plans" class="section plans-section"><div class="section-heading"><span>PAKET LAYANAN</span><h2>Pilih kapasitas sesuai pertumbuhan</h2><p>Seluruh paket mencakup Hotspot unlimited dan akses bertingkat. Hubungi tim kami untuk penyesuaian kebutuhan.</p></div><div class="plan-grid"><article v-for="(plan, index) in plans" :key="plan[0]" :class="{ featured: index === 2 }"><b v-if="index === 2" class="popular">PALING POPULER</b><h3>{{ plan[0] }}</h3><div class="price"><template v-if="plan[1]"><small>Rp</small><strong>{{ plan[1] }}</strong><span>/bulan</span></template><strong v-else>Hubungi Sales</strong></div><ul><li><CIcon icon="cil-check" /> {{ plan[2] }}</li><li><CIcon icon="cil-check" /> Hotspot unlimited</li><li><CIcon icon="cil-check" /> {{ plan[3] }}</li><li><CIcon icon="cil-check" /> Multi-level akses</li></ul><button @click="go('/pages/register')">Pilih Paket</button></article></div></section>
+      <section class="cta"><div><span>SIAP MEMULAI?</span><h2>Bangun operasional jaringan yang lebih modern.</h2><p>Registrasi sebagai customer terlebih dahulu. Pengajuan tenant atau agen dapat dilakukan setelah akun aktif.</p></div><button @click="go('/pages/register')">Daftar Sekarang <CIcon icon="cil-arrow-right" /></button></section>
+    </main>
+    <footer id="contact"><div class="footer-brand"><img :src="logo" alt="MANJAPRO" /><div><strong>MANJAPRO</strong><span>PT Radhika Data Nusantara</span></div><p>Jl. Cirengkol - Cikembar, Sukabumi, Jawa Barat</p></div><div><strong>Platform</strong><a href="#features">Fitur</a><a href="#plans">Paket</a><button @click="go('/pages/register')">Registrasi</button></div><div><strong>Hubungi Support</strong><a href="https://wa.me/6281242659178" target="_blank" rel="noopener">0812-4265-9178</a><a href="https://wa.me/6285603935233" target="_blank" rel="noopener">0856-0393-5233</a></div><small>© 2026 PT Radhika Data Nusantara. All rights reserved.</small></footer>
+  </div>
+</template>
+
+<style scoped>
+.site-shell{--orange:#ff7a00;--ink:#111827;min-height:100vh;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#fff;scroll-behavior:smooth}.site-nav{position:fixed;z-index:50;top:0;right:0;left:0;display:flex;height:76px;align-items:center;justify-content:space-between;padding:0 clamp(1rem,5vw,5rem);transition:.25s}.site-nav.scrolled{background:rgba(255,255,255,.92);box-shadow:0 8px 30px rgba(15,23,42,.08);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;color:inherit;text-decoration:none}.brand img{width:46px;height:46px;object-fit:contain}.brand span{display:flex;flex-direction:column}.brand strong{color:var(--orange);font-size:1.2rem}.brand small{font-size:.62rem;font-weight:600}.site-nav nav{display:flex;align-items:center;gap:1.7rem}.site-nav nav a{color:#334155;font-size:.85rem;font-weight:600;text-decoration:none}.site-nav button{border:0}.nav-login,.nav-register{padding:.65rem 1rem;border-radius:.65rem;font-size:.8rem;font-weight:700}.nav-login{color:var(--orange);background:#fff1e6}.nav-register{color:#fff;background:var(--orange)}.nav-toggle{display:none;background:none}.hero{position:relative;display:grid;min-height:720px;grid-template-columns:1.05fr .95fr;align-items:center;gap:4rem;padding:130px clamp(1rem,7vw,7rem) 70px;overflow:hidden;background:linear-gradient(145deg,#fff 35%,#fff8f2)}.hero-copy,.hero-visual{position:relative;z-index:2}.eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .7rem;color:#c25400;font-size:.7rem;font-weight:800;letter-spacing:.08em;background:#fff0e2;border:1px solid #ffd8b5;border-radius:999px}.eyebrow i{width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 4px rgba(255,122,0,.15)}h1{max-width:750px;margin:1.2rem 0;font-size:clamp(2.7rem,5.3vw,5rem);line-height:1.02;letter-spacing:-.055em}h1 em{color:var(--orange);font-style:normal}.hero-copy>p{max-width:640px;color:#64748b;font-size:1.03rem;line-height:1.75}.hero-actions{display:flex;gap:.75rem;margin:1.8rem 0}.primary-action,.secondary-action{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-radius:.75rem;font-size:.85rem;font-weight:800;text-decoration:none}.primary-action{color:#fff;background:linear-gradient(135deg,#ff6b00,#ff9500);border:0;box-shadow:0 12px 25px rgba(255,122,0,.25)}.secondary-action{color:#334155;background:#fff;border:1px solid #e2e8f0}.trust-row{display:flex;flex-wrap:wrap;gap:1rem;color:#64748b;font-size:.75rem}.trust-row svg{color:#22c55e}.dashboard-preview{padding:1rem;background:rgba(15,23,42,.96);border:1px solid rgba(255,255,255,.12);border-radius:1.4rem;box-shadow:0 30px 70px rgba(15,23,42,.25);transform:perspective(1000px) rotateY(-3deg) rotateX(2deg)}.preview-top{display:flex;align-items:center;justify-content:space-between;padding:.35rem;color:#cbd5e1;font-size:.72rem}.preview-top span{display:flex;align-items:center;gap:.4rem}.preview-top i{width:7px;height:7px;background:#22c55e;border-radius:50%}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:.8rem 0}.metric-grid article,.network-card,.activity-card{padding:.85rem;color:#f8fafc;background:#1e293b;border:1px solid #334155;border-radius:.8rem}.metric-grid small,.network-card small,.activity-card small{display:block;color:#94a3b8;font-size:.65rem}.metric-grid strong{display:block;margin:.3rem 0;font-size:1.4rem}.metric-grid b{color:#4ade80;font-size:.62rem}.network-card{display:flex;align-items:center;justify-content:space-between;min-height:110px}.network-card strong{display:block;margin-top:.35rem}.network-line{display:flex;align-items:center}.network-line i{position:relative;width:18px;height:18px;margin-left:25px;background:var(--orange);border:4px solid #fed7aa;border-radius:50%}.network-line i:not(:first-child)::before{position:absolute;top:3px;right:14px;width:29px;height:2px;background:#fb923c;content:""}.activity-card{display:flex;align-items:center;gap:.7rem;margin-top:.7rem}.activity-icon{display:grid;width:38px;height:38px;place-items:center;color:#fff;background:var(--orange);border-radius:.6rem}.activity-card div{flex:1}.activity-card strong{font-size:.75rem}.activity-card time{color:#94a3b8;font-size:.6rem}.hero-glow{position:absolute;border-radius:50%;filter:blur(2px)}.hero-glow.one{top:10%;right:-8%;width:400px;height:400px;background:rgba(255,122,0,.1)}.hero-glow.two{bottom:-25%;left:30%;width:300px;height:300px;background:rgba(251,191,36,.09)}.proof{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.5rem,5vw,4.5rem);padding:1.4rem;color:#64748b;background:#f8fafc;border-block:1px solid #e2e8f0}.proof span{font-size:.7rem}.proof strong{font-size:.82rem}.section{padding:90px clamp(1rem,7vw,7rem)}.section-heading{max-width:680px;margin:0 auto 2.8rem;text-align:center}.section-heading>span,.cta>div>span{color:var(--orange);font-size:.68rem;font-weight:900;letter-spacing:.16em}.section-heading h2,.cta h2{margin:.65rem 0;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.04em}.section-heading p,.feature-grid p,.cta p{color:#64748b;line-height:1.65}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.feature-grid article{padding:1.45rem;background:#fff;border:1px solid #e8edf3;border-radius:1rem;transition:.2s}.feature-grid article:hover{border-color:#ffc58f;box-shadow:0 18px 40px rgba(15,23,42,.08);transform:translateY(-4px)}.feature-grid article>span{display:grid;width:46px;height:46px;place-items:center;color:#fff;background:linear-gradient(135deg,#ff6b00,#ff9f1a);border-radius:.8rem}.feature-grid h3{margin:1rem 0 .5rem;font-size:1rem}.feature-grid p{min-height:70px;font-size:.8rem}.feature-grid a{color:var(--orange);font-size:.73rem;font-weight:800;text-decoration:none}.plans-section{background:#f8fafc}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.plan-grid article{position:relative;padding:1.5rem;background:#fff;border:1px solid #e2e8f0;border-radius:1rem}.plan-grid article.featured{border:2px solid var(--orange);box-shadow:0 18px 40px rgba(255,122,0,.12)}.popular{position:absolute;top:-11px;right:18px;padding:.3rem .6rem;color:#fff;font-size:.58rem;background:var(--orange);border-radius:999px}.plan-grid h3{font-size:1rem}.price{display:flex;min-height:54px;align-items:baseline;gap:.3rem;margin:.7rem 0}.price strong{font-size:1.65rem}.price span,.price small{color:#64748b;font-size:.68rem}.plan-grid ul{display:grid;gap:.55rem;padding:0;list-style:none}.plan-grid li{display:flex;align-items:center;gap:.45rem;color:#475569;font-size:.75rem}.plan-grid li svg{color:#22c55e}.plan-grid button{width:100%;margin-top:.7rem;padding:.7rem;color:var(--orange);font-weight:800;background:#fff7ed;border:1px solid #fed7aa;border-radius:.65rem}.cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin:70px clamp(1rem,7vw,7rem);padding:clamp(2rem,5vw,4rem);color:#fff;background:linear-gradient(135deg,#111827,#1e293b);border-radius:1.4rem}.cta div{max-width:720px}.cta p{color:#cbd5e1}.cta button{flex:0 0 auto;padding:.9rem 1.2rem;color:#fff;font-weight:800;background:var(--orange);border:0;border-radius:.75rem}footer{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;padding:60px clamp(1rem,7vw,7rem) 25px;color:#cbd5e1;background:#0f172a}footer>div{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}footer a,footer button{color:#94a3b8;font-size:.75rem;text-decoration:none;background:none;border:0;padding:0}.footer-brand img{width:50px}.footer-brand div{display:flex;flex-direction:column}.footer-brand div strong{color:var(--orange)}.footer-brand p{max-width:350px;color:#94a3b8;font-size:.75rem}footer>small{grid-column:1/-1;padding-top:1.5rem;color:#64748b;border-top:1px solid #1e293b}
+@media(max-width:900px){.site-nav nav{position:absolute;top:68px;right:1rem;left:1rem;display:none;flex-direction:column;align-items:stretch;padding:1rem;background:#fff;border:1px solid #e2e8f0;border-radius:1rem;box-shadow:0 20px 50px rgba(15,23,42,.15)}.site-nav nav.open{display:flex}.nav-toggle{display:block}.hero{grid-template-columns:1fr;padding-top:120px}.hero-copy{text-align:center}.hero-copy>p{margin-inline:auto}.hero-actions,.trust-row{justify-content:center}.hero-visual{max-width:650px;margin:auto}.feature-grid,.plan-grid{grid-template-columns:repeat(2,1fr)}.cta{flex-direction:column;align-items:flex-start}footer{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
+@media(max-width:575px){.site-nav{height:68px}.brand small{display:none}.hero{gap:2.5rem;min-height:auto;padding-bottom:50px}h1{font-size:2.55rem}.hero-actions{flex-direction:column}.primary-action,.secondary-action{justify-content:center}.dashboard-preview{transform:none}.metric-grid{grid-template-columns:1fr 1fr}.metric-grid article:last-child{grid-column:1/-1}.network-line{display:none}.feature-grid,.plan-grid{grid-template-columns:1fr}.section{padding-block:65px}.cta{margin-block:40px}footer{grid-template-columns:1fr}}
+</style>