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/views/HomeView.vue

@@ -17,7 +17,10 @@
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-96">
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-3">
         <MetricCard title="Current Energy" :content="currentEnergyValue" details="kWh" />
-        <MetricCard title="Connection Status" :content="connectionStatus" />
+        <MetricCard
+          title="Connection Status"
+          :content="energyStore.isConnected ? 'Connected' : 'Disconnected'"
+        />
         <MetricCard title="Average Usage" :content="averageEnergyUsage" details="kWh" />
         <GraphMetricCard
           title="Real-time Energy"
@@ -71,10 +74,6 @@ const currentEnergyValue = computed(() => {
   return energyStore.latestMessage?.value?.toFixed(2) || '0.00'
 })
 
-const connectionStatus = computed(() => {
-  return energyStore.isConnected ? 'Connected' : 'Disconnected'
-})
-
 const averageEnergyUsage = computed(() => {
   const data = energyStore.timeSeriesData.datasets[0].data
   if (data.length === 0) return '0.00'