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
-const statusItems = ref<StatusItem[]>(props.status || [])
+// Use the status from props or default to empty - make it reactive
+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
-      console.log('🔧 DailyNotification plugin check:', plugin ? 'Available' : 'Not Available')
+      const { DailyNotification } = await import('@timesafari/daily-notification-plugin')
+      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()
-          console.log('📊 Plugin status:', status)
+          const status = await plugin.getNotificationStatus()
+          const permissions = await plugin.checkPermissions()
+          const exactAlarmStatus = await plugin.getExactAlarmStatus()
           
-          // Update the app store status
-          appStore.setNotificationStatus(status)
+          console.log('📊 Plugin status object:', 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
-      const plugin = (window as any).DailyNotification ||
-                    (window as any).Capacitor?.Plugins?.DailyNotification ||
-                    (window as any).Capacitor?.Plugins?.['DailyNotification']
+      // Use proper plugin import
+      const { DailyNotification } = await import('@timesafari/daily-notification-plugin')
+      const plugin = DailyNotification
+      const isPluginAvailable = plugin && typeof plugin.getNotificationStatus === 'function'
 
       console.log('🔍 Plugin detection debug:')
-      console.log('  - window.DailyNotification:', (window as any).DailyNotification)
-      console.log('  - Capacitor.Plugins:', (window as any).Capacitor?.Plugins)
-      console.log('  - Available plugins:', Object.keys((window as any).Capacitor?.Plugins || {}))
+      console.log('  - DailyNotification plugin:', isPluginAvailable ? 'Available' : 'Not Available')
+      console.log('  - Plugin object:', plugin)
 
       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