fix(test-app): resolve StatusCard reactivity and improve plugin status detection

- Fix StatusCard component to properly react to prop changes by using computed() instead of ref()
- Improve plugin detection in HomeView using proper ES6 import instead of window object access
- Add comprehensive status mapping from plugin response to app store format
- Add detailed logging for plugin status, permissions, and exact alarm status
- Add separate Permissions status line in system status display
- Enhance error handling and debugging information for plugin operations

This resolves the issue where StatusCard was not updating when plugin status changed,
and improves the overall reliability of plugin detection and status reporting.

test-apps/daily-notification-test/src/components/cards/StatusCard.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 interface StatusItem {
   label: string
@@ -67,8 +67,8 @@ const refreshStatus = async (): Promise<void> => {
   }
 }
 
-// Use the status from props or default to empty
+// Use the status from props or default to empty - make it reactive
-const statusItems = ref<StatusItem[]>(props.status || [])
+const statusItems = computed(() => props.status || [])
 </script>
 
 <style scoped>

test-apps/daily-notification-test/src/views/HomeView.vue

@@ -145,8 +145,9 @@ const systemStatus = computed(() => {
   return [
     { label: 'Platform', value: platformName.value, status: 'info' },
     { label: 'Plugin', value: 'Available', status: 'success' },
+    { label: 'Permissions', value: status.postNotificationsGranted ? 'Granted' : 'Not Granted', status: status.postNotificationsGranted ? 'success' : 'warning' },
     { label: 'Can Schedule', value: status.canScheduleNow ? 'Yes' : 'No', status: status.canScheduleNow ? 'success' : 'warning' },
-           { label: 'Next Scheduled', value: status.nextScheduledAt ? new Date(status.nextScheduledAt).toLocaleTimeString() : 'None', status: 'info' }
+    { label: 'Next Scheduled', value: status.nextScheduledAt ? new Date(status.nextScheduledAt).toLocaleTimeString() : 'None', status: 'info' }
   ]
 })
 
@@ -191,18 +192,54 @@ const checkSystemStatus = async (): Promise<void> => {
       console.log('🔧 Native platform detected, checking plugin availability...')
       
       // Check if DailyNotification plugin is available
-      const plugin = (window as any).Capacitor?.Plugins?.DailyNotification
+      const { DailyNotification } = await import('@timesafari/daily-notification-plugin')
-      console.log('🔧 DailyNotification plugin check:', plugin ? 'Available' : 'Not Available')
+      const plugin = DailyNotification
+      const isPluginAvailable = plugin && typeof plugin.getNotificationStatus === 'function'
+      console.log('🔧 DailyNotification plugin check:', isPluginAvailable ? 'Available' : 'Not Available')
+      console.log('🔧 Plugin object:', plugin)
       
       if (plugin) {
         console.log('✅ Plugin available, checking status...')
         try {
-          const status = await plugin.checkStatus()
+          const status = await plugin.getNotificationStatus()
-          console.log('📊 Plugin status:', status)
+          const permissions = await plugin.checkPermissions()
+          const exactAlarmStatus = await plugin.getExactAlarmStatus()
           
-          // Update the app store status
+          console.log('📊 Plugin status object:', status)
-          appStore.setNotificationStatus(status)
+          console.log('📊 Status values:')
+          console.log('  - isEnabled:', status.isEnabled)
+          console.log('  - isScheduled:', status.isScheduled)
+          console.log('  - lastNotificationTime:', status.lastNotificationTime)
+          console.log('  - nextNotificationTime:', status.nextNotificationTime)
+          console.log('  - pending:', status.pending)
+          console.log('  - error:', status.error)
+          
+          console.log('📊 Plugin permissions:', permissions)
+          console.log('📊 Exact alarm status:', exactAlarmStatus)
+          
+          // Map plugin response to app store format
+          const mappedStatus = {
+            canScheduleNow: status.isEnabled ?? false,
+            postNotificationsGranted: permissions.notifications === 'granted',
+            channelEnabled: true, // Default for now
+            channelImportance: 3, // Default for now
+            channelId: 'daily-notifications',
+            exactAlarmsGranted: exactAlarmStatus.enabled,
+            exactAlarmsSupported: exactAlarmStatus.supported,
+            androidVersion: 33, // Default for now
+            nextScheduledAt: typeof status.nextNotificationTime === 'number' 
+              ? status.nextNotificationTime 
+              : await status.nextNotificationTime
+          }
+          
+          // Update the app store status - even if permissions aren't granted
+          appStore.setNotificationStatus(mappedStatus)
           console.log('✅ System status updated successfully')
+          
+          // Log permission status for debugging
+          if (!mappedStatus.postNotificationsGranted) {
+            console.warn('⚠️ Notification permissions not granted - user needs to enable in settings')
+          }
         } catch (error) {
           console.error('❌ Plugin status check failed:', error)
           // Keep existing status or set error state
@@ -246,15 +283,14 @@ const runPluginDiagnostics = async (): Promise<void> => {
     console.log('🔧 Native Platform:', isNative)
     
     if (isNative) {
-      // Try multiple ways to access the plugin
+      // Use proper plugin import
-      const plugin = (window as any).DailyNotification ||
+      const { DailyNotification } = await import('@timesafari/daily-notification-plugin')
-                    (window as any).Capacitor?.Plugins?.DailyNotification ||
+      const plugin = DailyNotification
-                    (window as any).Capacitor?.Plugins?.['DailyNotification']
+      const isPluginAvailable = plugin && typeof plugin.getNotificationStatus === 'function'
 
       console.log('🔍 Plugin detection debug:')
-      console.log('  - window.DailyNotification:', (window as any).DailyNotification)
+      console.log('  - DailyNotification plugin:', isPluginAvailable ? 'Available' : 'Not Available')
-      console.log('  - Capacitor.Plugins:', (window as any).Capacitor?.Plugins)
+      console.log('  - Plugin object:', plugin)
-      console.log('  - Available plugins:', Object.keys((window as any).Capacitor?.Plugins || {}))
 
       if (plugin) {
         console.log('✅ DailyNotification plugin available')
@@ -265,7 +301,7 @@ const runPluginDiagnostics = async (): Promise<void> => {
         
         // Test the checkStatus method
         try {
-          const status = await plugin.checkStatus()
+          const status = await plugin.getNotificationStatus()
           console.log('📊 Plugin status check result:', status)
           
           // Create detailed plugin report