\n {/* Header and Controls */}\n

Device Management

Monitor and manage registered ONU devices

\n \n \n {loading ? '🔄 Loading...' : '🔄 Refresh'}\n \n

\n\n {/* Filters and Sorting */}\n

\n Filter by Status\n setFilter(e.target.value as any)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n \n

\n \n

\n Sort by\n setSortBy(e.target.value as any)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n

\n\n {/* Device List */}\n {sortedDevices.length === 0 ? (\n

📱

No devices found

\n {filter === 'all' \n ? \"No devices have been registered yet.\" \n : `No devices with status \"${filter}\" found.`}\n

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n {sortedDevices.map((device) => (\n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n

\n Device Info\n	\n Location\n	\n Network\n	\n Status\n	\n Actions\n
\n \n \n {device.macAddress}\n \n \n ID: {device.id}\n \n \n {new Date(device.createdAt \|\| '').toLocaleDateString()}\n \n \n	\n \n 📍 {device.latitude.toFixed(4)}, {device.longitude.toFixed(4)}\n \n \n View on map\n \n	\n \n 🌐 {device.assignedIP}\n \n \n {MAINBOARD_CONFIGS[device.mainboard]?.name \|\| device.mainboard}\n \n	\n \n {device.status}\n \n	\n {device.status === 'pending' && (\n <>\n updateDeviceStatus(device.id!, 'authorized')}\n disabled={!!actionLoading[device.id!]}\n className=\"text-green-600 hover:text-green-900 disabled:opacity-50\"\n >\n {actionLoading[device.id!] === 'updating' ? '⏳' : '✅'} Authorize\n \n updateDeviceStatus(device.id!, 'rejected')}\n disabled={!!actionLoading[device.id!]}\n className=\"text-red-600 hover:text-red-900 disabled:opacity-50\"\n >\n {actionLoading[device.id!] === 'updating' ? '⏳' : '❌'} Reject\n \n \n )}\n \n {device.status === 'pending' && (\n retryBilling(device.id!)}\n disabled={!!actionLoading[device.id!]}\n className=\"text-blue-600 hover:text-blue-900 disabled:opacity-50\"\n >\n {actionLoading[device.id!] === 'billing' ? '⏳' : '🔄'} Retry Billing\n \n )}\n \n deleteDevice(device.id!)}\n disabled={!!actionLoading[device.id!]}\n className=\"text-red-600 hover:text-red-900 disabled:opacity-50\"\n >\n {actionLoading[device.id!] === 'deleting' ? '⏳' : '🗑️'} Delete\n \n

\n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/Rashid1473/rashid/code/frontend/components/DeviceList.tsx","extension","actionData","errors"]