Refactor dashboard layout and update sensor table columns

- Make metric cards and charts more compact and consistent - Change
SensorConsumptionTable columns: show Room and Value, remove
Current/Total/Average - Update headings and layout for AnalyticsView and
HomeView - Improve responsiveness and spacing for cards and sections

src/components/cards/MetricCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white rounded-2xl shadow-sm flex flex-col justify-between h-full w-full p-4">
+  <div class="bg-white rounded-2xl shadow-sm flex flex-col justify-between aspect-square p-4">
     <h6 class="text-sm font-bold text-gray-500">{{ title }}</h6>
     <div class="flex-grow flex items-center justify-start">
       <p class="text-gray-900 font-bold text-2xl">

src/components/cards/RealtimeEnergyChartCard.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="bg-white rounded-2xl shadow-sm flex flex-col h-full min-h-[300px]">
+  <div class="bg-white rounded-2xl shadow-sm flex flex-col p-4">
-    <div class="p-4 h-full">
     <h6 class="text-sm font-bold text-gray-500 mb-2">{{ title }}</h6>
-      <v-chart class="h-64 w-full" :option="option" autoresize />
+    <div class="w-full h-[400px]">
+      <v-chart class="w-full h-full" :option="option" autoresize />
     </div>
   </div>
 </template>

src/components/cards/SensorConsumptionTable.vue

@@ -1,7 +1,6 @@
 <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>
+    <h6 class="text-sm font-bold text-gray-500 mb-4">Sensor Readings</h6>
-
     <div class="overflow-x-auto">
       <table class="min-w-full">
         <thead>
@@ -10,13 +9,10 @@
               Sensor ID
             </th>
             <th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
-              Current
+              Room
             </th>
             <th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
-              Total
+              Value
-            </th>
-            <th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
-              Average
             </th>
             <th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
               Last Updated
@@ -55,9 +51,6 @@
                 sensor.humidity?.unit
               }}
             </td>
-            <td class="py-3 text-sm text-gray-600 text-right">
-              {{ sensor.room }}
-            </td>
             <td class="py-3 text-sm text-gray-500 text-right">
               {{ formatTime(sensor.timestamp) }}
             </td>
@@ -66,7 +59,6 @@
       </table>
     </div>
 
-    <!-- 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

src/views/AnalyticsView.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
+  <div class="space-y-6">
-    <div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900">Analytics</h1>
+        <p class="text-gray-600">Manage sensors, assign rooms, and control device actions</p>
+      </div>
+    </div>
     <div class="mb-8">
       <h1 class="text-3xl font-bold text-gray-900">API Dashboard</h1>
       <p class="text-gray-600 mt-2">Real-time data from backend APIs</p>
     </div>
-
-      <!-- API Status Section -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
       <div class="bg-white rounded-lg shadow p-6">
         <div class="flex items-center">
@@ -301,7 +304,6 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">

src/views/HomeView.vue

@@ -1,29 +1,13 @@
 <template>
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 pb-20">
     <div class="space-y-6">
-    <!-- Filter Controls Row -->
+      <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
-    <!--div class="flex flex-col sm:flex-row gap-4 mb-6">
-      <select class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
-        <option>Timeframe: All-time</option>
-      </select>
-      <select class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
-        <option>People: All</option>
-      </select>
-      <select class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
-        <option>Topic: All</option>
-      </select>
-    </div-->
-
-    <!-- Top Metric Cards Row -->
-    <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="Average Usage" :content="averageEnergyUsage" details="kWh" />
         <MetricCard
           title="Connection Status"
           :content="websocketStore.isConnected ? 'Connected' : 'Disconnected'"
         />
-        <MetricCard title="Average Usage" :content="averageEnergyUsage" details="kWh" />
-        <MetricCard title="Average CO2" :content="averageCO2" details="ppm" />
-        <MetricCard title="Max CO2" :content="maxCO2" details="ppm" />
         <GraphMetricCard
           title="Real-time Energy"
           :content="currentEnergyValue"
@@ -31,21 +15,18 @@
           :trend-data="energyStore.energyHistory.slice(-8)"
           trend-direction="neutral"
         />
+        <GraphMetricCard title="Average CO2" :content="averageCO2" details="ppm" />
+        <GraphMetricCard title="Max CO2" :content="maxCO2" details="ppm" />
       </div>
-      <div>
+      <SensorConsumptionTable />
-        <RealtimeEnergyChartCard title="Month" />
-      </div>
     </div>
 
-    <!-- Charts and Knowledge Cards Row -->
+    <div class="space-y-6">
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      <RealtimeEnergyChartCard title="Month" />
-      <SensorConsumptionTable />
-      <div class="grid grid-cols-1 gap-4">
       <RoomMetricsCard />
       <AirQualityCard />
     </div>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -66,7 +47,6 @@ const sensorStore = useSensorStore()
 const websocketStore = useWebSocketStore()
 const settingsStore = useSettingsStore()
 
-// Use energy store for aggregated values across all sensors
 const currentEnergyValue = computed(() => {
   return energyStore.currentEnergyValue.toFixed(2)
 })