Improve sensor ID mapping and error handling for real-time data

- Add robust mapping from WebSocket sensor IDs to API sensor IDs -
Enhance error handling for backend connection issues - Remove legacy
room metrics summary from SensorManagementView - Add loading and error
states to sensor grid - Track recently updated sensors for UI feedback -
Normalize incoming sensor data for compatibility

src/components/cards/DetailedSensorCard.vue

@@ -179,9 +179,11 @@ const energyStore = useEnergyStore()
 
 const getSensorValues = (sensor: any) => {
   const values = []
-  
+
   // Get real-time sensor reading from store
   const latestReading = energyStore.latestReadings.get(sensor.id)
+  console.log(`[Detailed] Getting values for sensor ${sensor.id}, found reading:`, latestReading)
+  console.log('[Detailed] Available readings:', Array.from(energyStore.latestReadings.keys()))
   
   if (sensor.capabilities.monitoring.includes('energy')) {
     const energyValue = latestReading?.energy?.value?.toFixed(2) || 

src/components/cards/SimpleSensorCard.vue

@@ -11,13 +11,9 @@
           <p class="text-xs text-gray-500">{{ sensor.room || 'Unassigned' }}</p>
         </div>
       </div>
-      
       <!-- Status Indicator -->
       <div class="flex items-center gap-1">
-        <div 
-          class="w-2 h-2 rounded-full"
-          :class="getSensorStatusColor(sensor.status)"
-        ></div>
+        <div class="w-2 h-2 rounded-full" :class="getSensorStatusColor(sensor.status)"></div>
         <span class="text-xs text-gray-500 capitalize">{{ sensor.status }}</span>
       </div>
     </div>
@@ -25,8 +21,7 @@
     <!-- Sensor Values -->
     <div class="mb-3">
       <div class="grid grid-cols-2 gap-2 text-xs">
-        <div v-for="metric in sensorValues" :key="metric.type" 
-             class="bg-gray-50 rounded p-2">
+        <div v-for="metric in sensorValues" :key="metric.type" class="bg-gray-50 rounded p-2">
           <div class="text-gray-600 mb-1">{{ metric.label }}</div>
           <div class="font-medium text-gray-900">
             {{ metric.value }} <span class="text-gray-500">{{ metric.unit }}</span>
@@ -50,7 +45,7 @@
           <span class="text-xs">{{ action.icon }}</span>
           <span class="truncate">{{ action.name }}</span>
         </button>
-        
+
         <!-- Show more actions if there are more than 3 -->
         <button
           v-if="sensor.capabilities.actions.length > 3"
@@ -63,15 +58,14 @@
     </div>
 
     <!-- No Actions State -->
-    <div v-else class="text-xs text-gray-500 text-center py-2 bg-gray-50 rounded">
-      Monitor Only
-    </div>
+    <div v-else class="text-xs text-gray-500 text-center py-2 bg-gray-50 rounded">Monitor Only</div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useEnergyStore } from '@/stores/energy'
+import { useSensorStore } from '@/stores/sensor'
 
 const props = defineProps<{
   sensor: any
@@ -84,81 +78,89 @@ const emit = defineEmits<{
 }>()
 
 const energyStore = useEnergyStore()
+const sensorStore = useSensorStore()
 
 const getSensorValues = (sensor: any) => {
   const values = []
-  
-  // Get real-time sensor reading from store
-  const latestReading = energyStore.latestReadings.get(sensor.id)
-  
+
+  const latestReading = energyStore.latestReadings.get(sensor.sensor_id)
+  console.log(`Getting values for sensor ${sensor.sensor_id}, found reading:`, latestReading)
+
   if (sensor.capabilities.monitoring.includes('energy')) {
-    const energyValue = latestReading?.energy?.value?.toFixed(2) || 
-                       energyStore.latestMessage?.value?.toFixed(2) || 
-                       '0.00'
+    const energyValue =
+      latestReading?.energy?.value?.toFixed(2) ||
+      energyStore.latestMessage?.value?.toFixed(2) ||
+      '0.00'
     values.push({
       type: 'energy',
       label: 'Energy',
       value: energyValue,
-      unit: latestReading?.energy?.unit || energyStore.latestMessage?.unit || 'kWh'
+      unit: latestReading?.energy?.unit || energyStore.latestMessage?.unit || 'kWh',
     })
   }
-  
+
   if (sensor.capabilities.monitoring.includes('co2')) {
     const co2Value = latestReading?.co2?.value || Math.floor(Math.random() * 800 + 350)
     values.push({
       type: 'co2',
       label: 'CO2',
       value: co2Value,
-      unit: latestReading?.co2?.unit || 'ppm'
+      unit: latestReading?.co2?.unit || 'ppm',
     })
   }
-  
+
   if (sensor.capabilities.monitoring.includes('temperature')) {
-    const tempValue = latestReading?.temperature?.value?.toFixed(1) || 
-                     (Math.random() * 8 + 18).toFixed(1)
+    const tempValue =
+      latestReading?.temperature?.value?.toFixed(1) || (Math.random() * 8 + 18).toFixed(1)
     values.push({
       type: 'temperature',
       label: 'Temperature',
       value: tempValue,
-      unit: latestReading?.temperature?.unit || '°C'
+      unit: latestReading?.temperature?.unit || '°C',
     })
   }
-  
+
   if (sensor.capabilities.monitoring.includes('humidity')) {
     // Fallback to mock data for humidity as it's not in current data model
     values.push({
       type: 'humidity',
       label: 'Humidity',
       value: Math.floor(Math.random() * 40 + 30),
-      unit: '%'
+      unit: '%',
     })
   }
-  
+
   if (sensor.capabilities.monitoring.includes('motion')) {
     values.push({
       type: 'motion',
       label: 'Motion',
       value: Math.random() > 0.7 ? 'Detected' : 'Clear',
-      unit: ''
+      unit: '',
     })
   }
-  
+
   // If no monitoring capabilities, show generic status
   if (values.length === 0) {
     values.push({
       type: 'status',
       label: 'Status',
       value: sensor.status === 'online' ? 'Active' : 'Inactive',
-      unit: ''
+      unit: '',
     })
   }
-  
+
   return values
 }
 
 // Reactive sensor values that update automatically
 const sensorValues = computed(() => getSensorValues(props.sensor))
 
+// Check if sensor was recently updated for pulsing animation
+const isRecentlyUpdated = computed(() => {
+  return sensorStore.recentlyUpdatedSensors.has(props.sensor.id) ||
+         sensorStore.recentlyUpdatedSensors.has(props.sensor.sensor_id)
+})
+
 const getSensorTypeIcon = (type: string) => {
   const icons = {
     energy: '⚡',
@@ -167,7 +169,7 @@ const getSensorTypeIcon = (type: string) => {
     humidity: '💧',
     hvac: '❄️',
     lighting: '💡',
-    security: '🔒'
+    security: '🔒',
   }
   return icons[type as keyof typeof icons] || '📱'
 }
@@ -180,17 +182,21 @@ const getSensorTypeStyle = (type: string) => {
     humidity: { bg: 'bg-blue-100', text: 'text-blue-700' },
     hvac: { bg: 'bg-cyan-100', text: 'text-cyan-700' },
     lighting: { bg: 'bg-amber-100', text: 'text-amber-700' },
-    security: { bg: 'bg-purple-100', text: 'text-purple-700' }
+    security: { bg: 'bg-purple-100', text: 'text-purple-700' },
   }
   return styles[type as keyof typeof styles] || { bg: 'bg-gray-100', text: 'text-gray-700' }
 }
 
 const getSensorStatusColor = (status: string) => {
   switch (status) {
-    case 'online': return 'bg-green-500'
-    case 'offline': return 'bg-gray-400'
-    case 'error': return 'bg-red-500'
-    default: return 'bg-gray-400'
+    case 'online':
+      return 'bg-green-500'
+    case 'offline':
+      return 'bg-gray-400'
+    case 'error':
+      return 'bg-red-500'
+    default:
+      return 'bg-gray-400'
   }
 }
-</script>
+</script>