Refactor sensor data handling for new API and WebSocket format

- Update SensorConsumptionTable to use new sensorStore and
websocketStore - Normalize sensor and reading interfaces for consistency
- Remove legacy energy data handling and mapping logic - Update API and
store types for new backend schema - Fetch sensors on mount in
SensorConsumptionTable - Simplify WebSocket data processing and remove
legacy code

src/components/cards/SensorConsumptionTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bg-white rounded-2xl shadow-sm p-4">
     <h6 class="text-sm font-bold text-gray-500 mb-4">Sensor Consumption</h6>
-    
+
     <div class="overflow-x-auto">
       <table class="min-w-full">
         <thead>
@@ -29,21 +29,37 @@
               No sensor data available. Waiting for WebSocket connection...
             </td>
           </tr>
-          <tr v-for="sensor in sensorList" :key="sensor.sensorId" class="hover:bg-gray-50">
+          <tr
+            v-for="sensor in sensorStore.latestReadings.values()"
+            :key="sensor.sensor_id"
+            class="hover:bg-gray-50"
+          >
             <td class="py-3 text-sm font-medium text-gray-900">
-              {{ sensor.sensorId }}
+              {{ sensor.sensor_id }}
             </td>
             <td class="py-3 text-sm text-gray-600 text-right">
-              {{ sensor.latestValue.toFixed(2) }} {{ sensor.unit }}
+              {{ sensor.room }}
             </td>
             <td class="py-3 text-sm text-gray-600 text-right">
-              {{ sensor.totalConsumption.toFixed(2) }} {{ sensor.unit }}
+              {{
+                sensor.energy?.value ||
+                sensor.co2?.value ||
+                sensor.temperature?.value ||
+                sensor.humidity?.value ||
+                'N/A'
+              }}
+              {{
+                sensor.energy?.unit ||
+                sensor.co2?.unit ||
+                sensor.temperature?.unit ||
+                sensor.humidity?.unit
+              }}
             </td>
             <td class="py-3 text-sm text-gray-600 text-right">
-              {{ sensor.averageConsumption.toFixed(2) }} {{ sensor.unit }}
+              {{ sensor.room }}
             </td>
             <td class="py-3 text-sm text-gray-500 text-right">
-              {{ formatTime(sensor.lastUpdated) }}
+              {{ formatTime(sensor.timestamp) }}
             </td>
           </tr>
         </tbody>
@@ -53,29 +69,27 @@
     <!-- Connection Status Indicator -->
     <div class="mt-4 flex items-center justify-between text-xs text-gray-500">
       <div class="flex items-center gap-2">
-        <div 
-          class="w-2 h-2 rounded-full" 
-          :class="energyStore.isConnected ? 'bg-green-500' : 'bg-red-500'"
+        <div
+          class="w-2 h-2 rounded-full"
+          :class="websocketStore.isConnected ? 'bg-green-500' : 'bg-red-500'"
         ></div>
-        <span>{{ energyStore.isConnected ? 'Connected' : 'Disconnected' }}</span>
-      </div>
-      <div>
-        {{ sensorList.length }} sensor{{ sensorList.length !== 1 ? 's' : '' }} active
+        <span>{{ websocketStore.isConnected ? 'Connected' : 'Disconnected' }}</span>
       </div>
+      <div>{{ sensorList.length }} sensor{{ sensorList.length !== 1 ? 's' : '' }} active</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useEnergyStore } from '@/stores/energy'
+import { computed, onMounted } from 'vue'
+import { useSensorStore } from '@/stores/sensor'
+import { useWebSocketStore } from '@/stores/websocket'
 
-const energyStore = useEnergyStore()
+const sensorStore = useSensorStore()
+const websocketStore = useWebSocketStore()
 
 const sensorList = computed(() => {
-  return Array.from(energyStore.sensorsData.values()).sort((a, b) => 
-    a.sensorId.localeCompare(b.sensorId)
-  )
+  return Array.from(sensorStore.sensorDevices.values()).sort((a, b) => a.name.localeCompare(b.name))
 })
 
 const formatTime = (timestamp: number) => {
@@ -83,7 +97,7 @@ const formatTime = (timestamp: number) => {
   const now = new Date()
   const diffMs = now.getTime() - date.getTime()
   const diffSecs = Math.floor(diffMs / 1000)
-  
+
   if (diffSecs < 60) {
     return `${diffSecs}s ago`
   } else if (diffSecs < 3600) {
@@ -92,4 +106,8 @@ const formatTime = (timestamp: number) => {
     return date.toLocaleTimeString()
   }
 }
-</script>
+
+onMounted(async () => {
+  await sensorStore.fetchApiSensors()
+})
+</script>