Fix device list display on Dashboard and Analytics pages

- Update deviceService.ts to use correct MQTT endpoint (/devices instead of /devices/list)
- Fix Dashboard page to fetch device data directly for accurate device counts
- Fix Analytics page to augment analytics data with correct device counts
- Both pages now show 5 devices instead of 0 for Total/Online/Active devices
- Device counts now update in real-time based on actual device status

Author: alirizaadiyahsi

frontend/src/pages/Analytics.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useQuery } from 'react-query';
 import TimeIntervalSelector, { TimeIntervalOption, timeIntervals } from '../components/TimeIntervalSelector';
 import AnalyticsSummaryCards from '../components/analytics/AnalyticsSummaryCards';
 import ConsumptionTrendsChart from '../components/analytics/ConsumptionTrendsChart';
@@ -10,6 +11,7 @@ import ComparativeAnalysis from '../components/analytics/ComparativeAnalysis';
 import DevicePerformanceTable from '../components/analytics/DevicePerformanceTable';
 import EnergyReportsGenerator from '../components/analytics/EnergyReportsGenerator';
 import { useAnalyticsSummary } from '../hooks/useAnalyticsData';
+import deviceService from '../services/deviceService';
 import { ChartParams } from '../types/analytics';
 
 const Analytics: React.FC = () => {
@@ -25,6 +27,21 @@ const Analytics: React.FC = () => {
   // Fetch analytics summary data
   const { data: summaryData, isLoading: summaryLoading, error: summaryError } = useAnalyticsSummary();
 
+  // Fetch device data to get accurate device counts for analytics
+  const { data: devices } = useQuery(
+    'analytics-devices',
+    () => deviceService.getDevices(),
+    {
+      refetchInterval: 5 * 60 * 1000, // Refresh every 5 minutes
+    }
+  );
+
+  // Augment analytics summary with correct device count
+  const augmentedSummaryData = summaryData && devices ? {
+    ...summaryData,
+    active_devices: devices.filter(device => device.status === 'online').length
+  } : summaryData;
+
   if (summaryLoading && !summaryData) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -69,7 +86,7 @@ const Analytics: React.FC = () => {
           </div>
         ) : (
           <AnalyticsSummaryCards
-            data={summaryData}
+            data={augmentedSummaryData}
             isLoading={summaryLoading}
             onCardClick={handleCardClick}
           />

frontend/src/pages/Dashboard.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useQuery } from 'react-query';
 import { Activity, Zap, TrendingUp, AlertTriangle } from 'lucide-react';
 import dashboardService from '../services/dashboardService';
+import deviceService from '../services/deviceService';
 import { formatPower, formatEnergy } from '../utils';
 import PowerChart from '../components/charts/PowerChart';
 import EnergyChart from '../components/charts/EnergyChart';
@@ -19,6 +20,15 @@ const Dashboard: React.FC = () => {
     }
   );
 
+  // Fetch device data to get accurate device counts
+  const { data: devices } = useQuery(
+    'dashboard-devices',
+    () => deviceService.getDevices(),
+    {
+      refetchInterval: 5000, // Refresh every 5 seconds for real-time updates
+    }
+  );
+
   const { data: powerChartData, isLoading: powerLoading } = useQuery(
     ['powerChart', selectedInterval.interval, selectedInterval.timeRange],
     () => {
@@ -66,14 +76,14 @@ const Dashboard: React.FC = () => {
   const stats = [
     {
       name: 'Total Devices',
-      value: dashboardData?.totalDevices || 0,
+      value: devices?.length || 0,
       icon: Activity,
       color: 'text-blue-600',
       bgColor: 'bg-blue-100',
     },
     {
       name: 'Online Devices',
-      value: dashboardData?.onlineDevices || 0,
+      value: devices?.filter(device => device.status === 'online').length || 0,
       icon: Zap,
       color: 'text-green-600',
       bgColor: 'bg-green-100',

frontend/src/services/deviceService.ts

@@ -3,8 +3,8 @@ import { Device, DeviceCreate, DeviceUpdate, EnergyReading, ApiResponse } from '
 
 class DeviceService {
   async getDevices(): Promise<Device[]> {
-    // Use the new data-ingestion endpoint
-    const response = await api.get<ApiResponse<Device[]>>('/api/v1/data-ingestion/devices/list');
+    // Use the MQTT data-ingestion endpoint with real-time device data
+    const response = await api.get<ApiResponse<Device[]>>('/api/v1/data-ingestion/devices');
     if (response.data.success && response.data.data) {
       return response.data.data;
     }