diff --git a/.env b/.env
new file mode 100644
index 0000000..6ae8764
--- /dev/null
+++ b/.env
@@ -0,0 +1,5 @@
+# API Configuration
+VITE_API_BASE_URL=http://localhost:8000
+
+# WebSocket Configuration
+VITE_WS_URL=ws://localhost:8000/ws
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..a40485d
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,22 @@
+FROM node:lts-alpine AS node
+
+# install simple http server for serving static content
+RUN npm install -g http-server
+
+# make the 'app' folder the current working directory
+WORKDIR /app
+
+# copy both 'package.json' and 'package-lock.json' (if available)
+COPY package*.json ./
+
+# install project dependencies
+RUN npm install
+
+# copy project files and folders to the current working directory (i.e. 'app' folder)
+COPY . .
+
+# build app for production with minification
+RUN npm run build
+
+EXPOSE 8080
+CMD [ "http-server", "dist" ]
diff --git a/README.md b/README.md
index d58bf8c..9534482 100644
--- a/README.md
+++ b/README.md
@@ -169,3 +169,412 @@ The frontend will be available at `http://localhost:5173`
 ---
 
 ⚡ by gecad for smarter, more efficient buildings.
+
+Backend Endpoints
+
+# Complete Energy Management System Overview
+
+## 🏆 **Successfully Integrated: Original Dashboard + tiocps + Microservices**
+
+This implementation successfully combines:
+- **Original Dashboard**: Sensor management, room creation, real-time data, analytics
+- **tiocps/iot-building-monitoring**: Advanced energy features, IoT control, demand response
+- **Modern Architecture**: Microservices, containerization, scalability
+
+## 🏗️ **Complete Architecture (8 Services)**
+
+```
+                    🌐 Frontend Applications
+                           │
+                    ┌──────▼──────┐
+                    │ API Gateway │ ← Single Entry Point
+                    │   (8000)    │   Authentication & Routing
+                    └──────┬──────┘
+                           │
+          ┌────────────────┼────────────────┐
+          │                │                │
+    ┌─────▼─────┐   ┌─────▼─────┐   ┌─────▼─────┐
+    │  Token    │   │  Sensor   │   │  Battery  │
+    │ Service   │   │ Service   │   │ Service   │
+    │  (8001)   │   │  (8007)   │   │  (8002)   │
+    │           │   │           │   │           │
+    │• JWT Auth │   │• Sensors  │   │• Charging │
+    │• Permissions│ │• Rooms    │   │• Health   │
+    │• Resources│   │• Analytics│   │• Control  │
+    └───────────┘   │• WebSocket│   └───────────┘
+                    │• Export   │
+                    └───────────┘
+          │                │                │
+    ┌─────▼─────┐   ┌─────▼─────┐   ┌─────▼─────┐
+    │ Demand    │   │    P2P    │   │ Forecast  │
+    │ Response  │   │  Trading  │   │ Service   │
+    │  (8003)   │   │  (8004)   │   │  (8005)   │
+    │           │   │           │   │           │
+    │• Grid     │   │• Market   │   │• ML Models│
+    │• Events   │   │• Trading  │   │• Predict  │
+    │• Load Mgmt│   │• P2P Trans│   │• Analysis │
+    └───────────┘   └───────────┘   └───────────┘
+                           │
+                    ┌─────▼─────┐
+                    │    IoT    │
+                    │ Control   │
+                    │  (8006)   │
+                    │           │
+                    │• Devices  │
+                    │• Automation│
+                    │• Instructions│
+                    └───────────┘
+                           │
+          ┌────────────────┼────────────────┐
+          │                │                │
+    ┌─────▼─────┐   ┌─────▼─────┐   ┌─────▼─────┐
+    │ MongoDB   │   │   Redis   │   │  WebSocket │
+    │ Database  │   │  Cache &  │   │ Real-time  │
+    │   (27017) │   │  Events   │   │ Streaming  │
+    └───────────┘   │  (6379)   │   └───────────┘
+                    └───────────┘
+```
+
+## 📋 **Service Inventory & Capabilities**
+
+### **🚪 API Gateway (Port 8000)**
+**Role**: Central entry point and orchestration
+**Key Features**:
+- Request routing to all services
+- JWT token validation
+- Load balancing and health checks
+- Rate limiting and monitoring
+- WebSocket proxy for real-time data
+
+**Endpoints**:
+```
+GET  /health                    # System health
+GET  /services/status          # All services status
+GET  /stats                    # Gateway statistics
+GET  /api/v1/overview          # Complete system overview
+WS   /ws                       # WebSocket proxy
+```
+
+### **🔐 Token Service (Port 8001)**
+**Role**: Authentication and authorization
+**Key Features**:
+- JWT token generation and validation
+- Resource-based permissions
+- Token lifecycle management
+- Auto-expiration and cleanup
+
+**Endpoints**:
+```
+POST /tokens/generate          # Create JWT token
+POST /tokens/validate          # Verify token
+POST /tokens/save             # Store token
+POST /tokens/revoke           # Revoke token
+GET  /tokens                  # List tokens
+```
+
+### **📊 Sensor Service (Port 8007) - 🎯 CORE DASHBOARD**
+**Role**: Complete original dashboard functionality + enhancements
+**Key Features**:
+- **Sensor Management**: CRUD operations, metadata, status
+- **Room Management**: Room creation, metrics, occupancy
+- **Real-time Data**: WebSocket streaming, live updates
+- **Analytics**: Energy consumption, environmental metrics
+- **Data Export**: Historical data, multiple formats
+- **Event Management**: System alerts, notifications
+
+**Endpoints**:
+```
+# Original Dashboard APIs (Enhanced)
+GET/POST/PUT/DELETE /sensors/*     # Sensor management
+GET/POST /rooms/*                  # Room management
+WS  /ws                           # Real-time WebSocket
+POST /data/query                  # Advanced analytics
+GET  /analytics/summary           # System analytics
+GET  /export                      # Data export
+GET  /events                      # System events
+
+# Enhanced Features
+POST /data/ingest                 # Real-time data ingestion
+GET  /analytics/energy            # Energy-specific analytics
+GET  /rooms/{name}/data          # Room historical data
+```
+
+### **🔋 Battery Service (Port 8002)**
+**Role**: Energy storage management
+**Key Features**:
+- Battery monitoring and control
+- Charging/discharging optimization
+- Health monitoring and alerts
+- Performance analytics
+
+**Endpoints**:
+```
+GET  /batteries                  # All batteries
+POST /batteries/{id}/charge      # Charge battery
+POST /batteries/{id}/discharge   # Discharge battery
+POST /batteries/{id}/optimize    # Smart optimization
+GET  /batteries/analytics/summary # System analytics
+```
+
+### **⚡ Demand Response Service (Port 8003)**
+**Role**: Grid interaction and load management
+**Key Features**:
+- Demand response event management
+- Load reduction coordination
+- Flexibility forecasting
+- Auto-response configuration
+
+**Endpoints**:
+```
+POST /invitations/send           # Send DR invitation
+GET  /invitations/unanswered     # Pending invitations
+POST /invitations/answer         # Respond to invitation
+GET  /flexibility/current        # Available flexibility
+POST /load-reduction/execute     # Execute load reduction
+```
+
+### **🤝 P2P Trading Service (Port 8004)**
+**Role**: Peer-to-peer energy marketplace
+**Key Features**:
+- Energy trading marketplace
+- Bid/ask management
+- Transaction processing
+- Market analytics
+
+### **📈 Forecasting Service (Port 8005)**
+**Role**: ML-based predictions
+**Key Features**:
+- Consumption/generation forecasting
+- Historical data analysis
+- Model training and optimization
+- Predictive analytics
+
+### **🏠 IoT Control Service (Port 8006)**
+**Role**: Device management and automation
+**Key Features**:
+- Device registration and control
+- Automation rules and scheduling
+- Remote device instructions
+- Integration with other services
+
+## 🔄 **Complete API Reference**
+
+### **Original Dashboard APIs (Preserved & Enhanced)**
+All original dashboard functionality is preserved and enhanced:
+
+```typescript
+// Sensor Management - Now with tiocps enhancements
+GET    /api/v1/sensors
+POST   /api/v1/sensors
+PUT    /api/v1/sensors/{id}
+DELETE /api/v1/sensors/{id}
+GET    /api/v1/sensors/{id}/data
+
+// Room Management - Now with energy flexibility
+GET    /api/v1/rooms
+POST   /api/v1/rooms
+GET    /api/v1/rooms/{name}
+GET    /api/v1/rooms/{name}/data
+
+// Real-time Data - Enhanced with multi-metrics
+WebSocket /ws
+
+// Analytics - Enhanced with energy management
+GET    /api/v1/analytics/summary
+GET    /api/v1/analytics/energy
+POST   /api/v1/data/query
+
+// Data Export - Enhanced with all sensor types
+GET    /api/v1/export
+
+// System Events - Integrated with all services
+GET    /api/v1/events
+```
+
+### **New tiocps-based APIs**
+Complete energy management capabilities:
+
+```typescript
+// Authentication (New)
+POST   /api/v1/tokens/generate
+POST   /api/v1/tokens/validate
+
+// Battery Management (New)
+GET    /api/v1/batteries
+POST   /api/v1/batteries/{id}/charge
+GET    /api/v1/batteries/analytics/summary
+
+// Demand Response (New)
+POST   /api/v1/demand-response/invitations/send
+GET    /api/v1/demand-response/flexibility/current
+
+// P2P Trading (New)
+POST   /api/v1/p2p/transactions
+GET    /api/v1/p2p/market/status
+
+// Forecasting (New)
+GET    /api/v1/forecast/consumption
+GET    /api/v1/forecast/generation
+
+// IoT Control (New)
+POST   /api/v1/iot/devices/{id}/instructions
+GET    /api/v1/iot/devices/summary
+```
+
+## 🚀 **Deployment & Usage**
+
+### **Quick Start**
+```bash
+# Clone and navigate
+cd microservices/
+
+# Deploy complete system
+./deploy.sh deploy
+
+# Check system status
+./deploy.sh status
+
+# View logs
+./deploy.sh logs
+```
+
+### **Service Access Points**
+```
+🌐 API Gateway:      http://localhost:8000
+🔐 Authentication:   http://localhost:8001
+📊 Sensors/Rooms:    http://localhost:8007
+🔋 Batteries:        http://localhost:8002
+⚡ Demand Response:  http://localhost:8003
+🤝 P2P Trading:     http://localhost:8004
+📈 Forecasting:     http://localhost:8005
+🏠 IoT Control:     http://localhost:8006
+
+📡 WebSocket:        ws://localhost:8007/ws
+📈 System Health:    http://localhost:8000/health
+📊 System Overview:  http://localhost:8000/api/v1/overview
+```
+
+### **Example Usage**
+
+**1. Complete Dashboard Workflow (Original + Enhanced)**
+```bash
+# 1. Get authentication token
+TOKEN=$(curl -s -X POST "http://localhost:8000/api/v1/tokens/generate" \
+  -H "Content-Type: application/json" \
+  -d '{"name": "dashboard_user", "list_of_resources": ["sensors", "rooms", "analytics"]}' \
+  | jq -r '.token')
+
+# 2. Create a room
+curl -X POST "http://localhost:8000/api/v1/rooms" \
+  -H "Authorization: Bearer $TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{"name": "Conference Room A", "floor": "2nd", "capacity": 20}'
+
+# 3. Register sensors
+curl -X POST "http://localhost:8000/api/v1/sensors" \
+  -H "Authorization: Bearer $TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "sensor_id": "TEMP_001",
+    "name": "Conference Room Temperature",
+    "sensor_type": "temperature",
+    "room": "Conference Room A"
+  }'
+
+# 4. Get real-time analytics
+curl "http://localhost:8000/api/v1/analytics/summary" \
+  -H "Authorization: Bearer $TOKEN"
+
+# 5. Export data
+curl "http://localhost:8000/api/v1/export?start_time=1704067200&end_time=1704153600" \
+  -H "Authorization: Bearer $TOKEN"
+```
+
+**2. Advanced Energy Management (New tiocps Features)**
+```bash
+# Battery management
+curl -X POST "http://localhost:8000/api/v1/batteries/BATT001/charge" \
+  -H "Authorization: Bearer $TOKEN" \
+  -d '{"power_kw": 50, "duration_minutes": 120}'
+
+# Demand response event
+curl -X POST "http://localhost:8000/api/v1/demand-response/invitations/send" \
+  -H "Authorization: Bearer $TOKEN" \
+  -d '{
+    "event_time": "2024-01-10T14:00:00Z",
+    "load_kwh": 100,
+    "duration_minutes": 60,
+    "iots": ["DEVICE_001", "DEVICE_002"]
+  }'
+
+# Get system flexibility
+curl "http://localhost:8000/api/v1/demand-response/flexibility/current" \
+  -H "Authorization: Bearer $TOKEN"
+```
+
+## 📊 **System Monitoring**
+
+### **Health Monitoring**
+```bash
+# Overall system health
+curl http://localhost:8000/health
+
+# Individual service health
+curl http://localhost:8001/health  # Token Service
+curl http://localhost:8007/health  # Sensor Service
+curl http://localhost:8002/health  # Battery Service
+# ... etc for all services
+```
+
+### **Performance Monitoring**
+```bash
+# API Gateway statistics
+curl http://localhost:8000/stats
+
+# Service status overview
+curl http://localhost:8000/services/status
+
+# Complete system overview
+curl http://localhost:8000/api/v1/overview
+```
+
+## 🎯 **Key Integration Success Factors**
+
+### **✅ Backward Compatibility**
+- All original dashboard APIs preserved
+- Existing frontend applications work unchanged
+- Gradual migration path available
+
+### **✅ Enhanced Functionality**
+- Original sensors enhanced with tiocps capabilities
+- Room metrics include energy and flexibility data
+- Analytics enhanced with energy management insights
+
+### **✅ Scalability & Reliability**
+- Independent service scaling
+- Fault isolation between services
+- Health checks and automatic recovery
+- Load balancing and connection pooling
+
+### **✅ Developer Experience**
+- Single-command deployment
+- Unified API documentation
+- Consistent error handling
+- Comprehensive logging
+
+### **✅ Production Readiness**
+- Docker containerization
+- Service discovery and health checks
+- Authentication and authorization
+- Monitoring and alerting capabilities
+
+## 🔮 **Future Enhancements**
+
+The integrated system provides a solid foundation for:
+- **Kubernetes deployment** for cloud-native scaling
+- **Advanced ML models** for energy optimization
+- **Mobile applications** using the unified API
+- **Third-party integrations** via standardized APIs
+- **Multi-tenant support** with enhanced authentication
+
+This complete integration successfully delivers a production-ready energy management platform that combines the best of dashboard usability with advanced energy management capabilities, all built on a modern, scalable microservices architecture.
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 52b9b93..14e1784 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -1,4 +1,4 @@
-@use 'tailwindcss';
+/* @use 'tailwindcss';
 @import 'abstracts/variables';
 @import 'abstracts/mixins';
 
@@ -20,4 +20,4 @@
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities; */
diff --git a/src/components/cards/MetricCard.vue b/src/components/cards/MetricCard.vue
index b096014..1ad2fb5 100644
--- a/src/components/cards/MetricCard.vue
+++ b/src/components/cards/MetricCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white rounded-2xl shadow-sm flex flex-col justify-between aspect-square p-4">
+  <div class="bg-white rounded-2xl shadow-sm flex flex-col justify-between h-full w-full 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">
diff --git a/src/components/common/BottomNav.vue b/src/components/common/BottomNav.vue
index f5f88b8..4a34063 100644
--- a/src/components/common/BottomNav.vue
+++ b/src/components/common/BottomNav.vue
@@ -73,6 +73,27 @@
               <span class="text-xs">AI Optimize</span>
             </router-link>
           </li>
+          <li>
+            <router-link
+              to="/analytics"
+              class="flex flex-col items-center font-medium"
+              :class="
+                $route.name === 'analytics'
+                  ? 'text-indigo-600'
+                  : 'text-gray-600 hover:text-indigo-600'
+              "
+            >
+              <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z"
+                />
+              </svg>
+              <span class="text-xs">Analytics</span>
+            </router-link>
+          </li>
           <li>
             <router-link
               to="/settings"
diff --git a/src/main.ts b/src/main.ts
index 98e4b3a..beaad6d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,9 +8,33 @@ import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
+const pinia = createPinia()
 
-app.use(createPinia())
+app.use(pinia)
 app.use(router)
 
+// Initialize auth store and make it globally available for API client
+import { useAuthStore } from './stores/auth'
 app.component('v-chart', ECharts)
-app.mount('#app')
+
+// Mount the app
+const mountedApp = app.mount('#app')
+
+// Make auth store globally available after app is mounted
+setTimeout(() => {
+  try {
+    const authStore = useAuthStore()
+    ;(window as any).__AUTH_STORE__ = authStore
+
+    // Ensure authentication on app start
+    authStore.ensureAuthenticated().then((success) => {
+      if (success) {
+        console.log('Authentication initialized successfully')
+      } else {
+        console.warn('Failed to initialize authentication')
+      }
+    })
+  } catch (error) {
+    console.error('Failed to initialize auth store:', error)
+  }
+}, 100)
diff --git a/src/router/index.ts b/src/router/index.ts
index f972e8e..6747d95 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,7 @@ import HomeView from '../views/HomeView.vue'
 import SensorManagementView from '../views/SensorManagementView.vue'
 import AIOptimizationView from '../views/AIOptimizationView.vue'
 import SettingsView from '../views/SettingsView.vue'
+import AnalyticsView from '../views/AnalyticsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -27,6 +28,11 @@ const router = createRouter({
       name: 'settings',
       component: SettingsView,
     },
+    {
+      path: '/analytics',
+      name: 'analytics',
+      component: AnalyticsView,
+    },
   ],
 })
 
diff --git a/src/views/AnalyticsView.vue b/src/views/AnalyticsView.vue
new file mode 100644
index 0000000..d17a242
--- /dev/null
+++ b/src/views/AnalyticsView.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="min-h-screen bg-gray-50">
+    <div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
+      <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">
+            <div class="p-2 bg-blue-100 rounded-lg">
+              <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+            </div>
+            <div class="ml-4">
+              <p class="text-sm font-medium text-gray-600">System Status</p>
+              <p class="text-lg font-semibold" :class="healthStatus?.status === 'healthy' ? 'text-green-600' : 'text-red-600'">
+                {{ healthStatus?.status || 'Unknown' }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-white rounded-lg shadow p-6">
+          <div class="flex items-center">
+            <div class="p-2 bg-green-100 rounded-lg">
+              <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+              </svg>
+            </div>
+            <div class="ml-4">
+              <p class="text-sm font-medium text-gray-600">Total Sensors</p>
+              <p class="text-lg font-semibold text-gray-900">{{ healthStatus?.total_sensors || 0 }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-white rounded-lg shadow p-6">
+          <div class="flex items-center">
+            <div class="p-2 bg-yellow-100 rounded-lg">
+              <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+            </div>
+            <div class="ml-4">
+              <p class="text-sm font-medium text-gray-600">Active Sensors</p>
+              <p class="text-lg font-semibold text-gray-900">{{ healthStatus?.active_sensors || 0 }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-white rounded-lg shadow p-6">
+          <div class="flex items-center">
+            <div class="p-2 bg-purple-100 rounded-lg">
+              <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+              </svg>
+            </div>
+            <div class="ml-4">
+              <p class="text-sm font-medium text-gray-600">Total Readings</p>
+              <p class="text-lg font-semibold text-gray-900">{{ formatNumber(healthStatus?.total_readings || 0) }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Loading States -->
+      <div v-if="energyStore.apiLoading" class="bg-white rounded-lg shadow p-6 mb-8">
+        <div class="flex items-center justify-center">
+          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+          <p class="ml-3 text-gray-600">Loading API data...</p>
+        </div>
+      </div>
+
+      <!-- Error States -->
+      <div v-if="energyStore.apiError" class="bg-red-50 border border-red-200 rounded-lg p-4 mb-8">
+        <div class="flex">
+          <div class="flex-shrink-0">
+            <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+            </svg>
+          </div>
+          <div class="ml-3">
+            <h3 class="text-sm font-medium text-red-800">API Error</h3>
+            <p class="mt-1 text-sm text-red-700">{{ energyStore.apiError }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Analytics Summary -->
+      <div v-if="analyticsData.summary" class="bg-white rounded-lg shadow p-6 mb-8">
+        <h2 class="text-xl font-semibold text-gray-900 mb-4">Analytics Summary (Last 24 Hours)</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div>
+            <p class="text-sm font-medium text-gray-600 mb-2">Total Energy Consumption</p>
+            <p class="text-2xl font-bold text-blue-600">
+              {{ analyticsData.summary.total_energy_consumption.value.toFixed(2) }} 
+              {{ analyticsData.summary.total_energy_consumption.unit }}
+            </p>
+          </div>
+          <div>
+            <p class="text-sm font-medium text-gray-600 mb-2">Average Power</p>
+            <p class="text-2xl font-bold text-green-600">
+              {{ analyticsData.summary.average_power.value.toFixed(2) }} 
+              {{ analyticsData.summary.average_power.unit }}
+            </p>
+          </div>
+          <div>
+            <p class="text-sm font-medium text-gray-600 mb-2">Peak Power</p>
+            <p class="text-2xl font-bold text-red-600">
+              {{ analyticsData.summary.peak_power.value.toFixed(2) }} 
+              {{ analyticsData.summary.peak_power.unit }}
+            </p>
+            <p class="text-xs text-gray-500 mt-1">
+              at {{ new Date(analyticsData.summary.peak_power.timestamp * 1000).toLocaleString() }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sensors Section -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+        <div class="bg-white rounded-lg shadow">
+          <div class="px-6 py-4 border-b border-gray-200">
+            <h2 class="text-lg font-semibold text-gray-900">API Sensors</h2>
+          </div>
+          <div class="p-6">
+            <div v-if="apiSensors.length === 0" class="text-center text-gray-500 py-8">
+              No sensors found from API
+            </div>
+            <div v-else class="space-y-3">
+              <div v-for="sensor in apiSensors" :key="sensor.sensor_id" 
+                   class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                <div>
+                  <p class="font-medium text-gray-900">{{ sensor.sensor_id }}</p>
+                  <p class="text-sm text-gray-500">{{ sensor.room || 'No room assigned' }}</p>
+                  <p class="text-xs text-gray-400">{{ sensor.sensor_type }} • {{ sensor.total_readings }} readings</p>
+                </div>
+                <div class="flex items-center">
+                  <span :class="[
+                    'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
+                    sensor.status === 'online' ? 'bg-green-100 text-green-800' : 
+                    sensor.status === 'offline' ? 'bg-red-100 text-red-800' : 
+                    'bg-yellow-100 text-yellow-800'
+                  ]">
+                    {{ sensor.status }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Rooms Section -->
+        <div class="bg-white rounded-lg shadow">
+          <div class="px-6 py-4 border-b border-gray-200">
+            <h2 class="text-lg font-semibold text-gray-900">API Rooms</h2>
+          </div>
+          <div class="p-6">
+            <div v-if="apiRooms.length === 0" class="text-center text-gray-500 py-8">
+              No rooms found from API
+            </div>
+            <div v-else class="space-y-3">
+              <div v-for="room in apiRooms" :key="room.room" 
+                   class="p-3 bg-gray-50 rounded-lg">
+                <div class="flex items-center justify-between mb-2">
+                  <p class="font-medium text-gray-900">{{ room.room }}</p>
+                  <span class="text-sm text-gray-500">{{ room.sensor_count }} sensors</span>
+                </div>
+                <div class="text-xs text-gray-600 space-y-1">
+                  <p>Types: {{ room.sensor_types.join(', ') }}</p>
+                  <div v-if="room.latest_metrics">
+                    <span v-if="room.latest_metrics.energy" class="mr-4">
+                      Energy: {{ room.latest_metrics.energy.current }} {{ room.latest_metrics.energy.unit }}
+                    </span>
+                    <span v-if="room.latest_metrics.co2">
+                      CO2: {{ room.latest_metrics.co2.current }} {{ room.latest_metrics.co2.unit }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="bg-white rounded-lg shadow p-6">
+        <h2 class="text-lg font-semibold text-gray-900 mb-4">API Actions</h2>
+        <div class="flex flex-wrap gap-3">
+          <button @click="refreshAllData" 
+                  class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  :disabled="energyStore.apiLoading">
+            <svg v-if="!energyStore.apiLoading" class="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+            </svg>
+            <div v-else class="animate-spin -ml-1 mr-2 h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
+            Refresh All Data
+          </button>
+          
+          <button @click="fetchSensorsOnly" 
+                  class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  :disabled="energyStore.apiLoading">
+            Fetch Sensors
+          </button>
+          
+          <button @click="fetchRoomsOnly" 
+                  class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  :disabled="energyStore.apiLoading">
+            Fetch Rooms
+          </button>
+          
+          <button @click="fetchAnalyticsOnly" 
+                  class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  :disabled="energyStore.apiLoading">
+            Fetch Analytics
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useEnergyStore } from '@/stores/energy'
+
+const energyStore = useEnergyStore()
+
+// Computed properties
+const apiSensors = computed(() => energyStore.apiSensors)
+const apiRooms = computed(() => energyStore.apiRooms)
+const analyticsData = computed(() => energyStore.analyticsData)
+const healthStatus = computed(() => energyStore.healthStatus)
+
+// Helper functions
+const formatNumber = (num: number): string => {
+  if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'
+  if (num >= 1000) return (num / 1000).toFixed(1) + 'K'
+  return num.toString()
+}
+
+// Action functions
+const refreshAllData = async () => {
+  await energyStore.initializeFromApi()
+}
+
+const fetchSensorsOnly = async () => {
+  await energyStore.fetchApiSensors()
+}
+
+const fetchRoomsOnly = async () => {
+  await energyStore.fetchApiRooms()
+}
+
+const fetchAnalyticsOnly = async () => {
+  await energyStore.fetchAnalyticsSummary()
+}
+
+// Initialize data on mount
+onMounted(async () => {
+  await energyStore.initializeFromApi()
+})
+</script>
\ No newline at end of file