{"ast":null,"code":"import React,{useState,useEffect}from'react';import{Link}from'react-router-dom';import{FiSearch,FiFilter,FiRefreshCw,FiPlusCircle,FiBattery,FiWifi,FiMapPin,FiEdit,FiTrash2}from'react-icons/fi';import AddDeviceModal from'../components/AddDeviceModal';import EditDeviceModal from'../components/EditDeviceModal';import{deviceApi}from'../services/api';// Dummy data for demonstration\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";const dummyDevices=[{id:'device-001',name:'SIM7000E-001',description:'Solar panel monitoring device',model:'SIM7000E',firmware_version:'1.2.3',status:'online',battery:{level:85,status:'good'},signal:{strength:-65,status:'good'},location:{latitude:47.3769,longitude:8.5417,altitude:408},last_seen:new Date().toISOString()},{id:'device-002',name:'SIM7000E-002',description:'Wind turbine monitoring device',model:'SIM7000E',firmware_version:'1.2.3',status:'idle',battery:{level:42,status:'low'},signal:{strength:-85,status:'fair'},location:{latitude:47.3780,longitude:8.5390,altitude:410},last_seen:new Date(Date.now()-3600000).toISOString()// 1 hour ago\n},{id:'device-003',name:'SIM7000E-003',description:'Battery storage monitoring device',model:'SIM7000E',firmware_version:'1.2.2',status:'offline',battery:{level:12,status:'critical'},signal:{strength:-105,status:'poor'},location:{latitude:47.3750,longitude:8.5430,altitude:405},last_seen:new Date(Date.now()-86400000).toISOString()// 1 day ago\n},{id:'device-004',name:'SIM7000E-004',description:'Weather station device',model:'SIM7000E',firmware_version:'1.2.3',status:'online',battery:{level:78,status:'good'},signal:{strength:-72,status:'good'},location:{latitude:47.3790,longitude:8.5450,altitude:412},last_seen:new Date().toISOString()},{id:'device-005',name:'SIM7000E-005',description:'Inverter monitoring device',model:'SIM7000E',firmware_version:'1.2.1',status:'idle',battery:{level:35,status:'low'},signal:{strength:-90,status:'fair'},location:{latitude:47.3730,longitude:8.5380,altitude:407},last_seen:new Date(Date.now()-7200000).toISOString()// 2 hours ago\n}];const Devices=()=>{const[devices,setDevices]=useState([]);const[loading,setLoading]=useState(true);const[searchTerm,setSearchTerm]=useState('');const[statusFilter,setStatusFilter]=useState('all');const[refreshing,setRefreshing]=useState(false);const[showAddModal,setShowAddModal]=useState(false);const[showEditModal,setShowEditModal]=useState(false);const[selectedDevice,setSelectedDevice]=useState(null);const[deleteConfirm,setDeleteConfirm]=useState(null);useEffect(()=>{fetchDevices();},[]);const fetchDevices=async()=>{try{setLoading(true);const token=localStorage.getItem('token');const response=await fetch('/api/devices/',{headers:{'Authorization':`Bearer ${token}`}});if(response.ok){const data=await response.json();// Transform backend data to include frontend display properties\nconst transformedDevices=data.map(device=>({...device,status:getDeviceStatus(device),battery:getBatteryInfo(device),signal:getSignalInfo(device),location:{latitude:device.latitude||0,longitude:device.longitude||0,altitude:device.altitude||0}}));setDevices(transformedDevices);}else{console.error('Failed to fetch devices');// Fall back to dummy data for demo purposes\nsetDevices(dummyDevices);}}catch(error){console.error('Error fetching devices:',error);// Fall back to dummy data for demo purposes\nsetDevices(dummyDevices);}finally{setLoading(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;let status='good';if(level<20)status='critical';else if(level<50)status='low';return{level,status};};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};};// 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';}};// Handle refresh\nconst handleRefresh=async()=>{setRefreshing(true);await fetchDevices();setRefreshing(false);};// Handle modal functions\nconst handleAddDevice=()=>{setShowAddModal(true);};const handleCloseModal=()=>{setShowAddModal(false);};const handleDeviceAdded=newDevice=>{// Transform the new device data\nconst transformedDevice={...newDevice,status:getDeviceStatus(newDevice),battery:getBatteryInfo(newDevice),signal:getSignalInfo(newDevice),location:{latitude:newDevice.latitude||0,longitude:newDevice.longitude||0,altitude:newDevice.altitude||0}};setDevices(prev=>[...prev,transformedDevice]);};// Handle edit device\nconst handleEditDevice=device=>{setSelectedDevice(device);setShowEditModal(true);};const handleCloseEditModal=()=>{setShowEditModal(false);setSelectedDevice(null);};const handleDeviceUpdated=updatedDevice=>{// Transform the updated device data\nconst transformedDevice={...updatedDevice,status:getDeviceStatus(updatedDevice),battery:getBatteryInfo(updatedDevice),signal:getSignalInfo(updatedDevice),location:{latitude:updatedDevice.latitude||0,longitude:updatedDevice.longitude||0,altitude:updatedDevice.altitude||0}};setDevices(prev=>prev.map(device=>device.id===updatedDevice.id?transformedDevice:device));};// Handle delete device\nconst handleDeleteDevice=device=>{setDeleteConfirm(device);};const confirmDeleteDevice=async()=>{if(!deleteConfirm)return;try{await deviceApi.deleteDevice(deleteConfirm.id);setDevices(prev=>prev.filter(device=>device.id!==deleteConfirm.id));setDeleteConfirm(null);}catch(error){console.error('Error deleting device:',error);alert('Failed to delete device. Please try again.');}};const cancelDeleteDevice=()=>{setDeleteConfirm(null);};// Filter devices based on search term and status filter\nconst filteredDevices=devices.filter(device=>{const matchesSearch=device.name.toLowerCase().includes(searchTerm.toLowerCase())||device.id.toLowerCase().includes(searchTerm.toLowerCase())||device.description&&device.description.toLowerCase().includes(searchTerm.toLowerCase());const matchesStatus=statusFilter==='all'||device.status===statusFilter;return matchesSearch&&matchesStatus;});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 devices...\"})]})});}return/*#__PURE__*/_jsxs(\"div\",{className:\"space-y-6\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"flex justify-between items-center\",children:[/*#__PURE__*/_jsx(\"h1\",{className:\"text-2xl font-semibold text-gray-800\",children:\"Devices\"}),/*#__PURE__*/_jsxs(\"button\",{onClick:handleAddDevice,className:\"flex items-center gap-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors\",children:[/*#__PURE__*/_jsx(FiPlusCircle,{}),/*#__PURE__*/_jsx(\"span\",{children:\"Add Device\"})]})]}),/*#__PURE__*/_jsx(\"div\",{className:\"dashboard-card\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"flex flex-col md:flex-row md:items-center md:justify-between gap-4\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"relative flex-1\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\",children:/*#__PURE__*/_jsx(FiSearch,{className:\"text-gray-400\"})}),/*#__PURE__*/_jsx(\"input\",{type:\"text\",placeholder:\"Search devices by name or ID...\",className:\"block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm\",value:searchTerm,onChange:e=>setSearchTerm(e.target.value)})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center gap-4\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"relative\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\",children:/*#__PURE__*/_jsx(FiFilter,{className:\"text-gray-400\"})}),/*#__PURE__*/_jsxs(\"select\",{className:\"block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm\",value:statusFilter,onChange:e=>setStatusFilter(e.target.value),children:[/*#__PURE__*/_jsx(\"option\",{value:\"all\",children:\"All Status\"}),/*#__PURE__*/_jsx(\"option\",{value:\"online\",children:\"Online\"}),/*#__PURE__*/_jsx(\"option\",{value:\"idle\",children:\"Idle\"}),/*#__PURE__*/_jsx(\"option\",{value:\"offline\",children:\"Offline\"})]})]}),/*#__PURE__*/_jsxs(\"button\",{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':''}`,onClick:handleRefresh,disabled:refreshing,children:[/*#__PURE__*/_jsx(FiRefreshCw,{className:refreshing?'animate-spin':''}),/*#__PURE__*/_jsx(\"span\",{children:\"Refresh\"})]})]})]})}),/*#__PURE__*/_jsx(\"div\",{className:\"dashboard-card\",children:filteredDevices.length===0?/*#__PURE__*/_jsx(\"div\",{className:\"text-center py-8\",children:/*#__PURE__*/_jsx(\"p\",{className:\"text-gray-500\",children:\"No devices found matching your criteria.\"})}):/*#__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:\"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(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Firmware\"}),/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Actions\"})]})}),/*#__PURE__*/_jsx(\"tbody\",{className:\"bg-white divide-y divide-gray-200\",children:filteredDevices.map(device=>/*#__PURE__*/_jsxs(\"tr\",{className:\"hover:bg-gray-50\",children:[/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap\",children:/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(Link,{to:`/devices/${device.id}`,className:\"text-primary-600 hover:text-primary-700 font-medium\",children:device.name}),/*#__PURE__*/_jsx(\"p\",{className:\"text-sm text-gray-500\",children:device.description})]})}),/*#__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 ${device.status==='online'?'bg-success-500':device.status==='idle'?'bg-warning-500':'bg-danger-500'}`}),/*#__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(\"span\",{className:getBatteryColor(device.battery.status),children:[device.battery.level,\"%\"]})]})}),/*#__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:\"flex items-center\",children:[/*#__PURE__*/_jsx(FiMapPin,{className:\"mr-2 text-gray-500\"}),/*#__PURE__*/_jsxs(\"span\",{className:\"text-gray-500\",children:[device.location.latitude.toFixed(4),\", \",device.location.longitude.toFixed(4)]})]})}),/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap text-gray-500\",children:formatDate(device.last_seen)}),/*#__PURE__*/_jsxs(\"td\",{className:\"px-6 py-4 whitespace-nowrap text-gray-500\",children:[\"v\",device.firmware_version]}),/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center gap-2\",children:[/*#__PURE__*/_jsx(\"button\",{onClick:()=>handleEditDevice(device),className:\"flex items-center gap-1 px-2 py-1 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded transition-colors\",title:\"Edit device\",children:/*#__PURE__*/_jsx(FiEdit,{className:\"w-4 h-4\"})}),/*#__PURE__*/_jsx(\"button\",{onClick:()=>handleDeleteDevice(device),className:\"flex items-center gap-1 px-2 py-1 text-red-600 hover:text-red-800 hover:bg-red-50 rounded transition-colors\",title:\"Delete device\",children:/*#__PURE__*/_jsx(FiTrash2,{className:\"w-4 h-4\"})})]})})]},device.id))})]})})}),/*#__PURE__*/_jsx(AddDeviceModal,{isOpen:showAddModal,onClose:handleCloseModal,onDeviceAdded:handleDeviceAdded}),/*#__PURE__*/_jsx(EditDeviceModal,{isOpen:showEditModal,onClose:handleCloseEditModal,device:selectedDevice,onDeviceUpdated:handleDeviceUpdated}),deleteConfirm&&/*#__PURE__*/_jsx(\"div\",{className:\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\",children:/*#__PURE__*/_jsx(\"div\",{className:\"bg-white rounded-lg shadow-xl max-w-md w-full mx-4\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"p-6\",children:[/*#__PURE__*/_jsx(\"h3\",{className:\"text-lg font-semibold text-gray-800 mb-4\",children:\"Delete Device\"}),/*#__PURE__*/_jsxs(\"p\",{className:\"text-gray-600 mb-6\",children:[\"Are you sure you want to delete \\\"\",deleteConfirm.name,\"\\\"? This action cannot be undone.\"]}),/*#__PURE__*/_jsxs(\"div\",{className:\"flex justify-end gap-3\",children:[/*#__PURE__*/_jsx(\"button\",{onClick:cancelDeleteDevice,className:\"px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors\",children:\"Cancel\"}),/*#__PURE__*/_jsx(\"button\",{onClick:confirmDeleteDevice,className:\"px-4 py-2 bg-red-500 text-white rounded-md text-sm font-medium hover:bg-red-600 transition-colors\",children:\"Delete\"})]})]})})})]});};export default Devices;","map":{"version":3,"names":["React","useState","useEffect","Link","FiSearch","FiFilter","FiRefreshCw","FiPlusCircle","FiBattery","FiWifi","FiMapPin","FiEdit","FiTrash2","AddDeviceModal","EditDeviceModal","deviceApi","jsx","_jsx","jsxs","_jsxs","dummyDevices","id","name","description","model","firmware_version","status","battery","level","signal","strength","location","latitude","longitude","altitude","last_seen","Date","toISOString","now","Devices","devices","setDevices","loading","setLoading","searchTerm","setSearchTerm","statusFilter","setStatusFilter","refreshing","setRefreshing","showAddModal","setShowAddModal","showEditModal","setShowEditModal","selectedDevice","setSelectedDevice","deleteConfirm","setDeleteConfirm","fetchDevices","token","localStorage","getItem","response","fetch","headers","ok","data","json","transformedDevices","map","device","getDeviceStatus","getBatteryInfo","getSignalInfo","console","error","is_active","lastSeen","diffMinutes","battery_level","signal_strength","formatDate","dateString","date","toLocaleString","getStatusColor","getBatteryColor","getSignalColor","handleRefresh","handleAddDevice","handleCloseModal","handleDeviceAdded","newDevice","transformedDevice","prev","handleEditDevice","handleCloseEditModal","handleDeviceUpdated","updatedDevice","handleDeleteDevice","confirmDeleteDevice","deleteDevice","filter","alert","cancelDeleteDevice","filteredDevices","matchesSearch","toLowerCase","includes","matchesStatus","className","children","onClick","type","placeholder","value","onChange","e","target","disabled","length","to","toFixed","title","isOpen","onClose","onDeviceAdded","onDeviceUpdated"],"sources":["/home/m3mo/Desktop/temparea/solarbank/frontend/src/pages/Devices.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { Link } from 'react-router-dom';\nimport { FiSearch, FiFilter, FiRefreshCw, FiPlusCircle, FiBattery, FiWifi, FiMapPin, FiEdit, FiTrash2 } from 'react-icons/fi';\nimport AddDeviceModal from '../components/AddDeviceModal';\nimport EditDeviceModal from '../components/EditDeviceModal';\nimport { deviceApi } from '../services/api';\n\n// Dummy data for demonstration\nconst dummyDevices = [\n {\n id: 'device-001',\n name: 'SIM7000E-001',\n description: 'Solar panel monitoring device',\n model: 'SIM7000E',\n firmware_version: '1.2.3',\n status: 'online',\n battery: { level: 85, status: 'good' },\n signal: { strength: -65, status: 'good' },\n location: { latitude: 47.3769, longitude: 8.5417, altitude: 408 },\n last_seen: new Date().toISOString()\n },\n {\n id: 'device-002',\n name: 'SIM7000E-002',\n description: 'Wind turbine monitoring device',\n model: 'SIM7000E',\n firmware_version: '1.2.3',\n status: 'idle',\n battery: { level: 42, status: 'low' },\n signal: { strength: -85, status: 'fair' },\n location: { latitude: 47.3780, longitude: 8.5390, altitude: 410 },\n last_seen: new Date(Date.now() - 3600000).toISOString() // 1 hour ago\n },\n {\n id: 'device-003',\n name: 'SIM7000E-003',\n description: 'Battery storage monitoring device',\n model: 'SIM7000E',\n firmware_version: '1.2.2',\n status: 'offline',\n battery: { level: 12, status: 'critical' },\n signal: { strength: -105, status: 'poor' },\n location: { latitude: 47.3750, longitude: 8.5430, altitude: 405 },\n last_seen: new Date(Date.now() - 86400000).toISOString() // 1 day ago\n },\n {\n id: 'device-004',\n name: 'SIM7000E-004',\n description: 'Weather station device',\n model: 'SIM7000E',\n firmware_version: '1.2.3',\n status: 'online',\n battery: { level: 78, status: 'good' },\n signal: { strength: -72, status: 'good' },\n location: { latitude: 47.3790, longitude: 8.5450, altitude: 412 },\n last_seen: new Date().toISOString()\n },\n {\n id: 'device-005',\n name: 'SIM7000E-005',\n description: 'Inverter monitoring device',\n model: 'SIM7000E',\n firmware_version: '1.2.1',\n status: 'idle',\n battery: { level: 35, status: 'low' },\n signal: { strength: -90, status: 'fair' },\n location: { latitude: 47.3730, longitude: 8.5380, altitude: 407 },\n last_seen: new Date(Date.now() - 7200000).toISOString() // 2 hours ago\n }\n];\n\nconst Devices = () => {\n const [devices, setDevices] = useState([]);\n const [loading, setLoading] = useState(true);\n const [searchTerm, setSearchTerm] = useState('');\n const [statusFilter, setStatusFilter] = useState('all');\n const [refreshing, setRefreshing] = useState(false);\n const [showAddModal, setShowAddModal] = useState(false);\n const [showEditModal, setShowEditModal] = useState(false);\n const [selectedDevice, setSelectedDevice] = useState(null);\n const [deleteConfirm, setDeleteConfirm] = useState(null);\n\n useEffect(() => {\n fetchDevices();\n }, []);\n\n const fetchDevices = async () => {\n try {\n setLoading(true);\n const token = localStorage.getItem('token');\n const response = await fetch('/api/devices/', {\n headers: {\n 'Authorization': `Bearer ${token}`,\n },\n });\n\n if (response.ok) {\n const data = await response.json();\n // Transform backend data to include frontend display properties\n const transformedDevices = data.map(device => ({\n ...device,\n status: getDeviceStatus(device),\n battery: getBatteryInfo(device),\n signal: getSignalInfo(device),\n location: {\n latitude: device.latitude || 0,\n longitude: device.longitude || 0,\n altitude: device.altitude || 0\n }\n }));\n setDevices(transformedDevices);\n } else {\n console.error('Failed to fetch devices');\n // Fall back to dummy data for demo purposes\n setDevices(dummyDevices);\n }\n } catch (error) {\n console.error('Error fetching devices:', error);\n // Fall back to dummy data for demo purposes\n setDevices(dummyDevices);\n } finally {\n setLoading(false);\n }\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 let status = 'good';\n if (level < 20) status = 'critical';\n else if (level < 50) status = 'low';\n \n return { level, status };\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 // 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 // Handle refresh\n const handleRefresh = async () => {\n setRefreshing(true);\n await fetchDevices();\n setRefreshing(false);\n };\n\n // Handle modal functions\n const handleAddDevice = () => {\n setShowAddModal(true);\n };\n\n const handleCloseModal = () => {\n setShowAddModal(false);\n };\n\n const handleDeviceAdded = (newDevice) => {\n // Transform the new device data\n const transformedDevice = {\n ...newDevice,\n status: getDeviceStatus(newDevice),\n battery: getBatteryInfo(newDevice),\n signal: getSignalInfo(newDevice),\n location: {\n latitude: newDevice.latitude || 0,\n longitude: newDevice.longitude || 0,\n altitude: newDevice.altitude || 0\n }\n };\n setDevices(prev => [...prev, transformedDevice]);\n };\n\n // Handle edit device\n const handleEditDevice = (device) => {\n setSelectedDevice(device);\n setShowEditModal(true);\n };\n\n const handleCloseEditModal = () => {\n setShowEditModal(false);\n setSelectedDevice(null);\n };\n\n const handleDeviceUpdated = (updatedDevice) => {\n // Transform the updated device data\n const transformedDevice = {\n ...updatedDevice,\n status: getDeviceStatus(updatedDevice),\n battery: getBatteryInfo(updatedDevice),\n signal: getSignalInfo(updatedDevice),\n location: {\n latitude: updatedDevice.latitude || 0,\n longitude: updatedDevice.longitude || 0,\n altitude: updatedDevice.altitude || 0\n }\n };\n \n setDevices(prev => \n prev.map(device => \n device.id === updatedDevice.id ? transformedDevice : device\n )\n );\n };\n\n // Handle delete device\n const handleDeleteDevice = (device) => {\n setDeleteConfirm(device);\n };\n\n const confirmDeleteDevice = async () => {\n if (!deleteConfirm) return;\n\n try {\n await deviceApi.deleteDevice(deleteConfirm.id);\n setDevices(prev => prev.filter(device => device.id !== deleteConfirm.id));\n setDeleteConfirm(null);\n } catch (error) {\n console.error('Error deleting device:', error);\n alert('Failed to delete device. Please try again.');\n }\n };\n\n const cancelDeleteDevice = () => {\n setDeleteConfirm(null);\n };\n\n // Filter devices based on search term and status filter\n const filteredDevices = devices.filter(device => {\n const matchesSearch = device.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n device.id.toLowerCase().includes(searchTerm.toLowerCase()) ||\n (device.description && device.description.toLowerCase().includes(searchTerm.toLowerCase()));\n \n const matchesStatus = statusFilter === 'all' || device.status === statusFilter;\n \n return matchesSearch && matchesStatus;\n });\n\n if (loading) {\n return (\n
Loading devices...
\nNo devices found matching your criteria.
\n| Device | \nStatus | \nBattery | \nSignal | \nLocation | \nLast Seen | \nFirmware | \nActions | \n
|---|---|---|---|---|---|---|---|
| \n \n \n {device.name}\n \n \n {device.description} \n | \n \n \n \n {device.status}\n \n | \n \n \n \n | \n \n \n \n | \n \n \n \n | \n \n {formatDate(device.last_seen)}\n | \n\n v{device.firmware_version}\n | \n\n \n \n \n \n | \n
\n Are you sure you want to delete \"{deleteConfirm.name}\"? This action cannot be undone.\n
\n