Show real-time room metrics and improve sensor cards

Add a summary of real-time metrics per room, including energy, CO2,
sensor count, and occupancy. Sensor cards now display live readings from
the store instead of mock data. Refactor card logic for reactivity and
update navigation colors for clarity.

src/components/cards/DetailedSensorCard.vue

@@ -71,7 +71,7 @@
       <div>
         <div class="text-sm font-medium text-gray-700 mb-2">Current Values</div>
         <div class="grid grid-cols-2 gap-2 text-xs">
-          <div v-for="metric in getSensorValues(sensor)" :key="metric.type" 
+          <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">
@@ -161,6 +161,9 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useEnergyStore } from '@/stores/energy'
+
 const props = defineProps<{
   sensor: any
   availableRooms: string[]
@@ -172,34 +175,44 @@ const emit = defineEmits<{
   executeAction: [sensor: any, action: any]
 }>()
 
+const energyStore = useEnergyStore()
+
 const getSensorValues = (sensor: any) => {
-  // Mock sensor values based on sensor type and capabilities
   const values = []
   
+  // Get real-time sensor reading from store
+  const latestReading = energyStore.latestReadings.get(sensor.id)
+  
   if (sensor.capabilities.monitoring.includes('energy')) {
+    const energyValue = latestReading?.energy?.value?.toFixed(2) || 
+                       energyStore.latestMessage?.value?.toFixed(2) || 
+                       '0.00'
     values.push({
       type: 'energy',
       label: 'Energy Consumption',
-      value: (Math.random() * 5 + 0.5).toFixed(2),
-      unit: 'kWh'
+      value: energyValue,
+      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 Level',
-      value: Math.floor(Math.random() * 800 + 350),
-      unit: 'ppm'
+      value: co2Value,
+      unit: latestReading?.co2?.unit || 'ppm'
     })
   }
   
   if (sensor.capabilities.monitoring.includes('temperature')) {
+    const tempValue = latestReading?.temperature?.value?.toFixed(1) || 
+                     (Math.random() * 8 + 18).toFixed(1)
     values.push({
       type: 'temperature',
       label: 'Temperature',
-      value: (Math.random() * 8 + 18).toFixed(1),
-      unit: '°C'
+      value: tempValue,
+      unit: latestReading?.temperature?.unit || '°C'
     })
   }
   
@@ -232,6 +245,9 @@ const getSensorValues = (sensor: any) => {
   return values
 }
 
+// Reactive sensor values that update automatically
+const sensorValues = computed(() => getSensorValues(props.sensor))
+
 const getDefaultTags = (sensor: any) => {
   const tags = [sensor.type]
   

src/components/cards/SimpleSensorCard.vue

@@ -25,7 +25,7 @@
     <!-- Sensor Values -->
     <div class="mb-3">
       <div class="grid grid-cols-2 gap-2 text-xs">
-        <div v-for="metric in getSensorValues(sensor)" :key="metric.type" 
+        <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">
@@ -71,6 +71,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useEnergyStore } from '@/stores/energy'
 
 const props = defineProps<{
   sensor: any
@@ -82,38 +83,49 @@ const emit = defineEmits<{
   showMore: [sensor: any]
 }>()
 
+const energyStore = useEnergyStore()
+
 const getSensorValues = (sensor: any) => {
-  // Mock sensor values based on sensor type and capabilities
   const values = []
   
+  // Get real-time sensor reading from store
+  const latestReading = energyStore.latestReadings.get(sensor.id)
+  
   if (sensor.capabilities.monitoring.includes('energy')) {
+    const energyValue = latestReading?.energy?.value?.toFixed(2) || 
+                       energyStore.latestMessage?.value?.toFixed(2) || 
+                       '0.00'
     values.push({
       type: 'energy',
       label: 'Energy',
-      value: (Math.random() * 5 + 0.5).toFixed(2),
-      unit: 'kWh'
+      value: energyValue,
+      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: Math.floor(Math.random() * 800 + 350),
-      unit: 'ppm'
+      value: co2Value,
+      unit: latestReading?.co2?.unit || 'ppm'
     })
   }
   
   if (sensor.capabilities.monitoring.includes('temperature')) {
+    const tempValue = latestReading?.temperature?.value?.toFixed(1) || 
+                     (Math.random() * 8 + 18).toFixed(1)
     values.push({
       type: 'temperature',
       label: 'Temperature',
-      value: (Math.random() * 8 + 18).toFixed(1),
-      unit: '°C'
+      value: tempValue,
+      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',
@@ -144,6 +156,9 @@ const getSensorValues = (sensor: any) => {
   return values
 }
 
+// Reactive sensor values that update automatically
+const sensorValues = computed(() => getSensorValues(props.sensor))
+
 const getSensorTypeIcon = (type: string) => {
   const icons = {
     energy: '⚡',