From 7ceaf883aec9a73b548b14f5f762b89bbe8dc0fa Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 26 Jun 2026 19:29:09 +0700
Subject: [PATCH] refactor: improve notification permission handling and
 enhance test notification logic in Permissions.vue

---
 .../js/pages/admin/account/Permissions.vue    | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/resources/js/pages/admin/account/Permissions.vue b/resources/js/pages/admin/account/Permissions.vue
index 2fdb7b3..55ecc26 100644
--- a/resources/js/pages/admin/account/Permissions.vue
+++ b/resources/js/pages/admin/account/Permissions.vue
@@ -12,8 +12,8 @@ import { onMounted, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import AccountLayout from '@/layouts/AccountLayout.vue';
 import { usePushNotification } from '@/composables/usePushNotification';
+import AccountLayout from '@/layouts/AccountLayout.vue';
 
 type PermissionState = 'granted' | 'denied' | 'prompt' | 'unsupported';
 
@@ -32,7 +32,10 @@ const { isSupported, isSubscribed, isLoading, subscribe, unsubscribe } =
 
 watch(isSubscribed, (subscribed) => {
     const notif = permissions.value.find((p) => p.key === 'notification');
-    if (!notif) return;
+
+    if (!notif) {
+return;
+}
 
     if (subscribed) {
         notif.state = 'granted';
@@ -117,14 +120,16 @@ async function requestPermission(perm: PermissionItem) {
         perm.requesting ||
         perm.state === 'denied' ||
         perm.state === 'unsupported'
-    )
-        return;
+    ) {
+return;
+}
 
     perm.requesting = true;
 
     try {
         if (perm.key === 'notification') {
             const result = await Notification.requestPermission();
+
             if (result === 'denied') {
                 perm.state = 'denied';
             } else if (result === 'granted') {
@@ -155,6 +160,7 @@ async function requestPermission(perm: PermissionItem) {
 
 async function handleUnsubscribeNotification(perm: PermissionItem) {
     perm.requesting = true;
+
     try {
         await unsubscribe();
         perm.state = 'prompt';
@@ -167,12 +173,22 @@ async function handleUnsubscribeNotification(perm: PermissionItem) {
 
 async function testPermission(perm: PermissionItem) {
     perm.testing = true;
+
     try {
         if (perm.key === 'notification') {
-            new Notification('Tes Notifikasi', {
-                body: 'Notifikasi berhasil diterima oleh perangkat Anda.',
-                icon: '/favicon.ico',
-            });
+            if ('serviceWorker' in navigator) {
+                const registration = await navigator.serviceWorker.ready;
+                await registration.showNotification('Tes Notifikasi', {
+                    body: 'Notifikasi berhasil diterima oleh perangkat Anda.',
+                    icon: '/favicon.ico',
+                });
+            } else {
+                new Notification('Tes Notifikasi', {
+                    body: 'Notifikasi berhasil diterima oleh perangkat Anda.',
+                    icon: '/favicon.ico',
+                });
+            }
+
             toast.success('Notifikasi tes berhasil dikirim.');
         } else if (perm.key === 'camera') {
             const stream = await navigator.mediaDevices.getUserMedia({