{"ast":null,"code":"import React,{useState,useEffect}from'react';import{FiActivity,FiBattery,FiWifi,FiMapPin,FiServer,FiAlertTriangle,FiRefreshCw,FiClock,FiSun,FiDroplet,FiZap}from'react-icons/fi';import{Link}from'react-router-dom';import{useAuth}from'../contexts/AuthContext';// Fallback dummy data for demonstration when API fails\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";const fallbackDevices=[{id:'device-001',name:'LILYGO-001',model:'LILYGO T-A7670G',status:'online',battery:{level:85,status:'good',voltage:3.8},signal:{strength:-65,status:'good'},location:{latitude:47.3769,longitude:8.5417,altitude:408},sensors:{temperature:24.5,humidity:65.2,solar_voltage:12.8},gps_fixed:true,last_seen:new Date().toISOString()},{id:'device-002',name:'LILYGO-002',model:'LILYGO T-A7670G',status:'idle',battery:{level:42,status:'low',voltage:3.4},signal:{strength:-85,status:'fair'},location:{latitude:47.3780,longitude:8.5390,altitude:410},sensors:{temperature:22.1,humidity:58.9,solar_voltage:8.2},gps_fixed:false,last_seen:new Date(Date.now()-3600000).toISOString()// 1 hour ago\n}];const Dashboard=()=>{var _stats$devices,_stats$devices2,_stats$telemetry,_stats$telemetry2,_stats$telemetry3,_stats$alerts,_stats$devices3,_stats$devices4;const[devices,setDevices]=useState([]);const[stats,setStats]=useState({});const[loading,setLoading]=useState(true);const[refreshing,setRefreshing]=useState(false);const[error,setError]=useState('');const[lastUpdated,setLastUpdated]=useState(null);const{user}=useAuth();useEffect(()=>{fetchDashboardData();},[]);const fetchDashboardData=async()=>{try{setLoading(true);setError('');const token=localStorage.getItem('token');// Fetch devices from API\nconst devicesResponse=await fetch('/api/devices/',{headers:{'Authorization':`Bearer ${token}`}});if(devicesResponse.ok){const devicesData=await devicesResponse.json();// Transform backend data to include frontend display properties\nconst transformedDevices=devicesData.map(device=>({...device,status:getDeviceStatus(device),battery:getBatteryInfo(device),signal:getSignalInfo(device),sensors:{temperature:device.temperature||null,humidity:device.humidity||null,solar_voltage:device.solar_voltage||null},location:{latitude:device.latitude||47.3769,// Default location if none set\nlongitude:device.longitude||8.5417,altitude:device.altitude||408},gps_fixed:device.gps_fixed||false}));setDevices(transformedDevices);// Calculate statistics from real data\nconst calculatedStats=calculateStats(transformedDevices);setStats(calculatedStats);setLastUpdated(new Date());}else{throw new Error('Failed to fetch devices');}}catch(error){console.error('Error fetching dashboard data:',error);setError('Failed to load dashboard data');// Fall back to sample data for demo purposes\nconst transformedFallback=fallbackDevices.map(device=>({...device// Add any additional transformation needed\n}));setDevices(transformedFallback);setStats(calculateStats(transformedFallback));setLastUpdated(new Date());}finally{setLoading(false);}};// Handle refresh\nconst handleRefresh=async()=>{setRefreshing(true);await fetchDashboardData();setRefreshing(false);};// Helper functions to transform backend data\nconst getDeviceStatus=device=>{if(!device.is_active)return'offline';if(!device.last_seen)return'offline';const lastSeen=new Date(device.last_seen);const now=new Date();const diffMinutes=(now-lastSeen)/(1000*60);if(diffMinutes<5)return'online';if(diffMinutes<30)return'idle';return'offline';};const getBatteryInfo=device=>{const level=device.battery_level||0;const voltage=device.battery_voltage||null;let status='good';if(level<20)status='critical';else if(level<50)status='low';return{level,status,voltage};};const getSignalInfo=device=>{const strength=device.signal_strength||-100;let status='poor';if(strength>-70)status='good';else if(strength>-85)status='fair';return{strength,status};};// Calculate statistics from device data\nconst calculateStats=deviceList=>{const now=new Date();const activeDevices=deviceList.filter(device=>device.is_active!==false).length;const onlineDevices=deviceList.filter(device=>device.status==='online').length;const criticalBatteryDevices=deviceList.filter(device=>device.battery.level<20).length;const lowBatteryDevices=deviceList.filter(device=>device.battery.level<50&&device.battery.level>=20).length;const gpsFixedDevices=deviceList.filter(device=>device.gps_fixed).length;// Calculate average values\nconst avgBattery=deviceList.length>0?Math.round(deviceList.reduce((sum,device)=>sum+device.battery.level,0)/deviceList.length):0;const avgTemperature=deviceList.length>0?Math.round(deviceList.filter(d=>{var _d$sensors;return(_d$sensors=d.sensors)===null||_d$sensors===void 0?void 0:_d$sensors.temperature;}).reduce((sum,device)=>sum+(device.sensors.temperature||0),0)/deviceList.filter(d=>{var _d$sensors2;return(_d$sensors2=d.sensors)===null||_d$sensors2===void 0?void 0:_d$sensors2.temperature;}).length*10)/10:0;const avgSolarVoltage=deviceList.length>0?Math.round(deviceList.filter(d=>{var _d$sensors3;return(_d$sensors3=d.sensors)===null||_d$sensors3===void 0?void 0:_d$sensors3.solar_voltage;}).reduce((sum,device)=>sum+(device.sensors.solar_voltage||0),0)/deviceList.filter(d=>{var _d$sensors4;return(_d$sensors4=d.sensors)===null||_d$sensors4===void 0?void 0:_d$sensors4.solar_voltage;}).length*10)/10:0;// Find latest telemetry (simulate based on last_seen)\nconst latestTelemetry=deviceList.reduce((latest,device)=>{if(!device.last_seen)return latest;const deviceTime=new Date(device.last_seen);return deviceTime>latest?deviceTime:latest;},new Date(0));return{devices:{total:deviceList.length,active:activeDevices,online:onlineDevices,offline:deviceList.length-onlineDevices,gps_fixed:gpsFixedDevices},telemetry:{total:deviceList.length*24,// Simulate: ~24 data points per device\nlatest:latestTelemetry.toISOString(),avgBattery:avgBattery,avgTemperature:avgTemperature,avgSolarVoltage:avgSolarVoltage},alerts:{critical:criticalBatteryDevices,warning:lowBatteryDevices,total:criticalBatteryDevices+lowBatteryDevices},system_time:now.toISOString()};};// Helper function to format date\nconst formatDate=dateString=>{const date=new Date(dateString);return date.toLocaleString();};// Helper function to get status color\nconst getStatusColor=status=>{switch(status){case'online':return'text-success-500';case'idle':return'text-warning-500';case'offline':return'text-danger-500';default:return'text-gray-500';}};// Helper function to get battery color\nconst getBatteryColor=status=>{switch(status){case'good':return'text-success-500';case'low':return'text-warning-500';case'critical':return'text-danger-500';default:return'text-gray-500';}};// Helper function to get signal color\nconst getSignalColor=status=>{switch(status){case'good':return'text-success-500';case'fair':return'text-warning-500';case'poor':return'text-danger-500';default:return'text-gray-500';}};if(loading){return/*#__PURE__*/_jsx(\"div\",{className:\"flex items-center justify-center h-full\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"text-center\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"w-16 h-16 border-4 border-primary-500 border-t-transparent rounded-full animate-spin mx-auto\"}),/*#__PURE__*/_jsx(\"p\",{className:\"mt-4 text-gray-600\",children:\"Loading dashboard data...\"})]})});}return/*#__PURE__*/_jsxs(\"div\",{className:\"space-y-6\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"flex justify-between items-start\",children:[/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(\"h1\",{className:\"text-2xl font-semibold text-gray-800\",children:\"Dashboard\"}),/*#__PURE__*/_jsxs(\"p\",{className:\"text-sm text-gray-500 mt-1\",children:[\"Welcome back, \",(user===null||user===void 0?void 0:user.username)||'User',\"! Here's your LILYGO IoT overview.\"]})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center gap-4\",children:[lastUpdated&&/*#__PURE__*/_jsxs(\"div\",{className:\"text-right\",children:[/*#__PURE__*/_jsxs(\"p\",{className:\"text-sm text-gray-500 flex items-center gap-1\",children:[/*#__PURE__*/_jsx(FiClock,{size:14}),\"Last updated: \",formatDate(lastUpdated.toISOString())]}),error&&/*#__PURE__*/_jsx(\"p\",{className:\"text-xs text-red-500 mt-1\",children:error})]}),/*#__PURE__*/_jsxs(\"button\",{onClick:handleRefresh,disabled:refreshing,className:`flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors ${refreshing?'opacity-50 cursor-not-allowed':''}`,children:[/*#__PURE__*/_jsx(FiRefreshCw,{className:refreshing?'animate-spin':'',size:16}),/*#__PURE__*/_jsx(\"span\",{children:refreshing?'Refreshing...':'Refresh'})]})]})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"dashboard-card\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"p-3 rounded-full bg-primary-100 text-primary-600\",children:/*#__PURE__*/_jsx(FiServer,{className:\"w-6 h-6\"})}),/*#__PURE__*/_jsxs(\"div\",{className:\"ml-4\",children:[/*#__PURE__*/_jsx(\"p\",{className:\"text-sm font-medium text-gray-500\",children:\"Total Devices\"}),/*#__PURE__*/_jsx(\"p\",{className:\"text-lg font-semibold text-gray-800\",children:((_stats$devices=stats.devices)===null||_stats$devices===void 0?void 0:_stats$devices.total)||0})]})]}),/*#__PURE__*/_jsx(\"div\",{className:\"mt-4\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"flex justify-between items-center\",children:[/*#__PURE__*/_jsx(\"p\",{className:\"text-sm text-gray-500\",children:\"GPS Fixed\"}),/*#__PURE__*/_jsx(\"p\",{className:\"text-sm font-medium text-success-500\",children:((_stats$devices2=stats.devices)===null||_stats$devices2===void 0?void 0:_stats$devices2.gps_fixed)||0})]})})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"dashboard-card\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"p-3 rounded-full bg-secondary-100 text-secondary-600\",children:/*#__PURE__*/_jsx(FiActivity,{className:\"w-6 h-6\"})}),/*#__PURE__*/_jsxs(\"div\",{className:\"ml-4\",children:[/*#__PURE__*/_jsx(\"p\",{className:\"text-sm font-medium text-gray-500\",children:\"Avg Temperature\"}),/*#__PURE__*/_jsxs(\"p\",{className:\"text-lg font-semibold text-gray-800\",children:[((_stats$telemetry=stats.telemetry)===null||_stats$telemetry===void 0?void 0:_stats$telemetry.avgTemperature)||0,\"\\xB0C\"]})]})]}),/*#__PURE__*/_jsx(\"div\",{className:\"mt-4\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"flex justify-between items-center\",children:[/*#__PURE__*/_jsx(\"p\",{className:\"text-sm text-gray-500\",children:\"Avg Battery\"}),/*#__PURE__*/_jsxs(\"p\",{className:\"text-sm font-medium text-gray-600\",children:[((_stats$telemetry2=stats.telemetry)===null||_stats$telemetry2===void 0?void 0:_stats$telemetry2.avgBattery)||0,\"%\"]})]})})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"dashboard-card\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"p-3 rounded-full bg-warning-100 text-warning-600\",children:/*#__PURE__*/_jsx(FiSun,{className:\"w-6 h-6\"})}),/*#__PURE__*/_jsxs(\"div\",{className:\"ml-4\",children:[/*#__PURE__*/_jsx(\"p\",{className:\"text-sm font-medium text-gray-500\",children:\"Avg Solar\"}),/*#__PURE__*/_jsxs(\"p\",{className:\"text-lg font-semibold text-gray-800\",children:[((_stats$telemetry3=stats.telemetry)===null||_stats$telemetry3===void 0?void 0:_stats$telemetry3.avgSolarVoltage)||0,\"V\"]})]})]}),/*#__PURE__*/_jsx(\"div\",{className:\"mt-4\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"flex justify-between items-center\",children:[/*#__PURE__*/_jsx(\"p\",{className:\"text-sm text-gray-500\",children:\"Battery Alerts\"}),/*#__PURE__*/_jsx(\"p\",{className:\"text-sm font-medium text-danger-500\",children:((_stats$alerts=stats.alerts)===null||_stats$alerts===void 0?void 0:_stats$alerts.total)||0})]})})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"dashboard-card\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"p-3 rounded-full bg-success-100 text-success-600\",children:/*#__PURE__*/_jsx(FiWifi,{className:\"w-6 h-6\"})}),/*#__PURE__*/_jsxs(\"div\",{className:\"ml-4\",children:[/*#__PURE__*/_jsx(\"p\",{className:\"text-sm font-medium text-gray-500\",children:\"Online Devices\"}),/*#__PURE__*/_jsx(\"p\",{className:\"text-lg font-semibold text-gray-800\",children:((_stats$devices3=stats.devices)===null||_stats$devices3===void 0?void 0:_stats$devices3.online)||0})]})]}),/*#__PURE__*/_jsx(\"div\",{className:\"mt-4\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"flex justify-between items-center\",children:[/*#__PURE__*/_jsx(\"p\",{className:\"text-sm text-gray-500\",children:\"Offline Devices\"}),/*#__PURE__*/_jsx(\"p\",{className:\"text-sm font-medium text-danger-500\",children:((_stats$devices4=stats.devices)===null||_stats$devices4===void 0?void 0:_stats$devices4.offline)||0})]})})]})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"dashboard-card\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"flex justify-between items-center mb-4\",children:[/*#__PURE__*/_jsx(\"h2\",{className:\"text-lg font-semibold text-gray-800\",children:\"Device Status\"}),/*#__PURE__*/_jsx(Link,{to:\"/devices\",className:\"text-sm text-primary-600 hover:text-primary-700\",children:\"View All\"})]}),/*#__PURE__*/_jsx(\"div\",{className:\"overflow-x-auto\",children:/*#__PURE__*/_jsxs(\"table\",{className:\"min-w-full divide-y divide-gray-200\",children:[/*#__PURE__*/_jsx(\"thead\",{className:\"bg-gray-50\",children:/*#__PURE__*/_jsxs(\"tr\",{children:[/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Device\"}),/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Status\"}),/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Battery\"}),/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Signal\"}),/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Sensors\"}),/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Location\"}),/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Last Seen\"})]})}),/*#__PURE__*/_jsx(\"tbody\",{className:\"bg-white divide-y divide-gray-200\",children:devices.map(device=>{var _device$sensors,_device$sensors2,_device$sensors3;return/*#__PURE__*/_jsxs(\"tr\",{className:\"hover:bg-gray-50\",children:[/*#__PURE__*/_jsxs(\"td\",{className:\"px-6 py-4 whitespace-nowrap\",children:[/*#__PURE__*/_jsx(Link,{to:`/devices/${device.id}`,className:\"text-primary-600 hover:text-primary-700\",children:device.name}),/*#__PURE__*/_jsx(\"p\",{className:\"text-xs text-gray-500\",children:device.model||'LILYGO T-A7670G'})]}),/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(\"div\",{className:`h-2.5 w-2.5 rounded-full mr-2 ${getStatusColor(device.status).replace('text-','bg-')}`}),/*#__PURE__*/_jsx(\"span\",{className:`capitalize ${getStatusColor(device.status)}`,children:device.status})]})}),/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(FiBattery,{className:`mr-2 ${getBatteryColor(device.battery.status)}`}),/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsxs(\"span\",{className:getBatteryColor(device.battery.status),children:[device.battery.level,\"%\"]}),device.battery.voltage&&/*#__PURE__*/_jsxs(\"p\",{className:\"text-xs text-gray-500\",children:[device.battery.voltage,\"V\"]})]})]})}),/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(FiWifi,{className:`mr-2 ${getSignalColor(device.signal.status)}`}),/*#__PURE__*/_jsxs(\"span\",{className:getSignalColor(device.signal.status),children:[device.signal.strength,\" dBm\"]})]})}),/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"text-sm\",children:[((_device$sensors=device.sensors)===null||_device$sensors===void 0?void 0:_device$sensors.temperature)&&/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center text-gray-500\",children:[/*#__PURE__*/_jsx(FiActivity,{className:\"mr-1\",size:12}),/*#__PURE__*/_jsxs(\"span\",{children:[device.sensors.temperature,\"\\xB0C\"]})]}),((_device$sensors2=device.sensors)===null||_device$sensors2===void 0?void 0:_device$sensors2.humidity)&&/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center text-blue-500\",children:[/*#__PURE__*/_jsx(FiDroplet,{className:\"mr-1\",size:12}),/*#__PURE__*/_jsxs(\"span\",{children:[device.sensors.humidity,\"%\"]})]}),((_device$sensors3=device.sensors)===null||_device$sensors3===void 0?void 0:_device$sensors3.solar_voltage)&&/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center text-yellow-500\",children:[/*#__PURE__*/_jsx(FiZap,{className:\"mr-1\",size:12}),/*#__PURE__*/_jsxs(\"span\",{children:[device.sensors.solar_voltage,\"V\"]})]})]})}),/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(FiMapPin,{className:`mr-2 ${device.gps_fixed?'text-success-500':'text-gray-400'}`}),/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsxs(\"span\",{className:\"text-gray-500\",children:[device.location.latitude.toFixed(4),\", \",device.location.longitude.toFixed(4)]}),/*#__PURE__*/_jsx(\"p\",{className:\"text-xs text-gray-400\",children:device.gps_fixed?'GPS Fixed':'No GPS'})]})]})}),/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap text-gray-500\",children:formatDate(device.last_seen)})]},device.id);})})]})})]})]});};export default Dashboard;","map":{"version":3,"names":["React","useState","useEffect","FiActivity","FiBattery","FiWifi","FiMapPin","FiServer","FiAlertTriangle","FiRefreshCw","FiClock","FiSun","FiDroplet","FiZap","Link","useAuth","jsx","_jsx","jsxs","_jsxs","fallbackDevices","id","name","model","status","battery","level","voltage","signal","strength","location","latitude","longitude","altitude","sensors","temperature","humidity","solar_voltage","gps_fixed","last_seen","Date","toISOString","now","Dashboard","_stats$devices","_stats$devices2","_stats$telemetry","_stats$telemetry2","_stats$telemetry3","_stats$alerts","_stats$devices3","_stats$devices4","devices","setDevices","stats","setStats","loading","setLoading","refreshing","setRefreshing","error","setError","lastUpdated","setLastUpdated","user","fetchDashboardData","token","localStorage","getItem","devicesResponse","fetch","headers","ok","devicesData","json","transformedDevices","map","device","getDeviceStatus","getBatteryInfo","getSignalInfo","calculatedStats","calculateStats","Error","console","transformedFallback","handleRefresh","is_active","lastSeen","diffMinutes","battery_level","battery_voltage","signal_strength","deviceList","activeDevices","filter","length","onlineDevices","criticalBatteryDevices","lowBatteryDevices","gpsFixedDevices","avgBattery","Math","round","reduce","sum","avgTemperature","d","_d$sensors","_d$sensors2","avgSolarVoltage","_d$sensors3","_d$sensors4","latestTelemetry","latest","deviceTime","total","active","online","offline","telemetry","alerts","critical","warning","system_time","formatDate","dateString","date","toLocaleString","getStatusColor","getBatteryColor","getSignalColor","className","children","username","size","onClick","disabled","to","_device$sensors","_device$sensors2","_device$sensors3","replace","toFixed"],"sources":["/home/m3mo/Desktop/temparea/solarbank/frontend/src/pages/Dashboard.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { FiActivity, FiBattery, FiWifi, FiMapPin, FiServer, FiAlertTriangle, FiRefreshCw, FiClock, FiSun, FiDroplet, FiZap } from 'react-icons/fi';\nimport { Link } from 'react-router-dom';\nimport { useAuth } from '../contexts/AuthContext';\n\n// Fallback dummy data for demonstration when API fails\nconst fallbackDevices = [\n {\n id: 'device-001',\n name: 'LILYGO-001',\n model: 'LILYGO T-A7670G',\n status: 'online',\n battery: { level: 85, status: 'good', voltage: 3.8 },\n signal: { strength: -65, status: 'good' },\n location: { latitude: 47.3769, longitude: 8.5417, altitude: 408 },\n sensors: { temperature: 24.5, humidity: 65.2, solar_voltage: 12.8 },\n gps_fixed: true,\n last_seen: new Date().toISOString()\n },\n {\n id: 'device-002',\n name: 'LILYGO-002',\n model: 'LILYGO T-A7670G',\n status: 'idle',\n battery: { level: 42, status: 'low', voltage: 3.4 },\n signal: { strength: -85, status: 'fair' },\n location: { latitude: 47.3780, longitude: 8.5390, altitude: 410 },\n sensors: { temperature: 22.1, humidity: 58.9, solar_voltage: 8.2 },\n gps_fixed: false,\n last_seen: new Date(Date.now() - 3600000).toISOString() // 1 hour ago\n }\n];\n\nconst Dashboard = () => {\n const [devices, setDevices] = useState([]);\n const [stats, setStats] = useState({});\n const [loading, setLoading] = useState(true);\n const [refreshing, setRefreshing] = useState(false);\n const [error, setError] = useState('');\n const [lastUpdated, setLastUpdated] = useState(null);\n const { user } = useAuth();\n\n useEffect(() => {\n fetchDashboardData();\n }, []);\n\n const fetchDashboardData = async () => {\n try {\n setLoading(true);\n setError('');\n const token = localStorage.getItem('token');\n \n // Fetch devices from API\n const devicesResponse = await fetch('/api/devices/', {\n headers: {\n 'Authorization': `Bearer ${token}`,\n },\n });\n\n if (devicesResponse.ok) {\n const devicesData = await devicesResponse.json();\n \n // Transform backend data to include frontend display properties\n const transformedDevices = devicesData.map(device => ({\n ...device,\n status: getDeviceStatus(device),\n battery: getBatteryInfo(device),\n signal: getSignalInfo(device),\n sensors: {\n temperature: device.temperature || null,\n humidity: device.humidity || null,\n solar_voltage: device.solar_voltage || null\n },\n location: {\n latitude: device.latitude || 47.3769, // Default location if none set\n longitude: device.longitude || 8.5417,\n altitude: device.altitude || 408\n },\n gps_fixed: device.gps_fixed || false\n }));\n \n setDevices(transformedDevices);\n \n // Calculate statistics from real data\n const calculatedStats = calculateStats(transformedDevices);\n setStats(calculatedStats);\n setLastUpdated(new Date());\n } else {\n throw new Error('Failed to fetch devices');\n }\n } catch (error) {\n console.error('Error fetching dashboard data:', error);\n setError('Failed to load dashboard data');\n \n // Fall back to sample data for demo purposes\n const transformedFallback = fallbackDevices.map(device => ({\n ...device,\n // Add any additional transformation needed\n }));\n setDevices(transformedFallback);\n setStats(calculateStats(transformedFallback));\n setLastUpdated(new Date());\n } finally {\n setLoading(false);\n }\n };\n\n // Handle refresh\n const handleRefresh = async () => {\n setRefreshing(true);\n await fetchDashboardData();\n setRefreshing(false);\n };\n\n // Helper functions to transform backend data\n const getDeviceStatus = (device) => {\n if (!device.is_active) return 'offline';\n if (!device.last_seen) return 'offline';\n \n const lastSeen = new Date(device.last_seen);\n const now = new Date();\n const diffMinutes = (now - lastSeen) / (1000 * 60);\n \n if (diffMinutes < 5) return 'online';\n if (diffMinutes < 30) return 'idle';\n return 'offline';\n };\n\n const getBatteryInfo = (device) => {\n const level = device.battery_level || 0;\n const voltage = device.battery_voltage || null;\n let status = 'good';\n if (level < 20) status = 'critical';\n else if (level < 50) status = 'low';\n \n return { level, status, voltage };\n };\n\n const getSignalInfo = (device) => {\n const strength = device.signal_strength || -100;\n let status = 'poor';\n if (strength > -70) status = 'good';\n else if (strength > -85) status = 'fair';\n \n return { strength, status };\n };\n\n // Calculate statistics from device data\n const calculateStats = (deviceList) => {\n const now = new Date();\n const activeDevices = deviceList.filter(device => device.is_active !== false).length;\n const onlineDevices = deviceList.filter(device => device.status === 'online').length;\n const criticalBatteryDevices = deviceList.filter(device => device.battery.level < 20).length;\n const lowBatteryDevices = deviceList.filter(device => device.battery.level < 50 && device.battery.level >= 20).length;\n const gpsFixedDevices = deviceList.filter(device => device.gps_fixed).length;\n \n // Calculate average values\n const avgBattery = deviceList.length > 0 \n ? Math.round(deviceList.reduce((sum, device) => sum + device.battery.level, 0) / deviceList.length)\n : 0;\n \n const avgTemperature = deviceList.length > 0 \n ? Math.round(deviceList.filter(d => d.sensors?.temperature).reduce((sum, device) => sum + (device.sensors.temperature || 0), 0) / deviceList.filter(d => d.sensors?.temperature).length * 10) / 10\n : 0;\n \n const avgSolarVoltage = deviceList.length > 0 \n ? Math.round(deviceList.filter(d => d.sensors?.solar_voltage).reduce((sum, device) => sum + (device.sensors.solar_voltage || 0), 0) / deviceList.filter(d => d.sensors?.solar_voltage).length * 10) / 10\n : 0;\n \n // Find latest telemetry (simulate based on last_seen)\n const latestTelemetry = deviceList.reduce((latest, device) => {\n if (!device.last_seen) return latest;\n const deviceTime = new Date(device.last_seen);\n return deviceTime > latest ? deviceTime : latest;\n }, new Date(0));\n\n return {\n devices: { \n total: deviceList.length, \n active: activeDevices,\n online: onlineDevices,\n offline: deviceList.length - onlineDevices,\n gps_fixed: gpsFixedDevices\n },\n telemetry: { \n total: deviceList.length * 24, // Simulate: ~24 data points per device\n latest: latestTelemetry.toISOString(),\n avgBattery: avgBattery,\n avgTemperature: avgTemperature,\n avgSolarVoltage: avgSolarVoltage\n },\n alerts: {\n critical: criticalBatteryDevices,\n warning: lowBatteryDevices,\n total: criticalBatteryDevices + lowBatteryDevices\n },\n system_time: now.toISOString()\n };\n };\n\n // Helper function to format date\n const formatDate = (dateString) => {\n const date = new Date(dateString);\n return date.toLocaleString();\n };\n\n // Helper function to get status color\n const getStatusColor = (status) => {\n switch (status) {\n case 'online':\n return 'text-success-500';\n case 'idle':\n return 'text-warning-500';\n case 'offline':\n return 'text-danger-500';\n default:\n return 'text-gray-500';\n }\n };\n\n // Helper function to get battery color\n const getBatteryColor = (status) => {\n switch (status) {\n case 'good':\n return 'text-success-500';\n case 'low':\n return 'text-warning-500';\n case 'critical':\n return 'text-danger-500';\n default:\n return 'text-gray-500';\n }\n };\n\n // Helper function to get signal color\n const getSignalColor = (status) => {\n switch (status) {\n case 'good':\n return 'text-success-500';\n case 'fair':\n return 'text-warning-500';\n case 'poor':\n return 'text-danger-500';\n default:\n return 'text-gray-500';\n }\n };\n\n if (loading) {\n return (\n
Loading dashboard data...
\n\n Welcome back, {user?.username || 'User'}! Here's your LILYGO IoT overview.\n
\n\n
{error}
\n )}\nTotal Devices
\n{stats.devices?.total || 0}
\nGPS Fixed
\n{stats.devices?.gps_fixed || 0}
\nAvg Temperature
\n{stats.telemetry?.avgTemperature || 0}°C
\nAvg Battery
\n{stats.telemetry?.avgBattery || 0}%
\nAvg Solar
\n{stats.telemetry?.avgSolarVoltage || 0}V
\nBattery Alerts
\n{stats.alerts?.total || 0}
\nOnline Devices
\n\n {stats.devices?.online || 0}\n
\nOffline Devices
\n\n {stats.devices?.offline || 0}\n
\n| Device | \nStatus | \nBattery | \nSignal | \nSensors | \nLocation | \nLast Seen | \n
|---|---|---|---|---|---|---|
| \n \n {device.name}\n \n {device.model || 'LILYGO T-A7670G'} \n | \n \n \n \n {device.status}\n \n | \n \n \n \n \n {device.battery.level}%\n {device.battery.voltage && (\n \n {device.battery.voltage}V \n )}\n | \n \n \n \n | \n \n \n {device.sensors?.temperature && (\n \n \n \n )}\n {device.sensors?.humidity && (\n \n \n )}\n {device.sensors?.solar_voltage && (\n \n \n )}\n | \n \n \n \n \n {device.location.latitude.toFixed(4)}, {device.location.longitude.toFixed(4)}\n \n {device.gps_fixed ? 'GPS Fixed' : 'No GPS'} \n | \n \n {formatDate(device.last_seen)}\n | \n