\n {/* Header */}\n

\n 🌐 ONU Fiber Router Authorization\n

\n Automated device registration and IP assignment system\n

\n Total Devices: {devices.length}\n

\n Authorized: \n {devices.filter(d => d.status === 'authorized').length}\n \n

\n\n {/* Navigation Tabs */}\n

\n setActiveTab('register')}\n className={`py-2 px-1 border-b-2 font-medium text-sm ${\n activeTab === 'register'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n 📝 Register Device\n \n setActiveTab('manage')}\n className={`py-2 px-1 border-b-2 font-medium text-sm ${\n activeTab === 'manage'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n 🔧 Manage Devices\n {devices.filter(d => d.status === 'pending').length > 0 && (\n \n {devices.filter(d => d.status === 'pending').length}\n \n )}\n \n

\n\n {/* Main Content */}\n

\n {activeTab === 'register' && (\n \n )}\n \n {activeTab === 'manage' && (\n \n )}\n

\n\n {/* Footer */}\n \n

\n );\n}",[],[230,237,244],{"_102":251,"_95":252,"_151":253,"_153":238,"_154":136,"_155":254,"_157":158,"_104":255,"_99":32,"_160":178,"_162":256,"_163":22,"_164":-5,"_165":257,"_98":258},"23747ac2-3a40-11f0-aa4c-9e149126039e","DeviceForm.tsx","23747b80-3a40-11f0-aa4c-9e149126039e",11,["D",1748270759560],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Device, MAINBOARD_CONFIGS, validateMacAddress, validateGeoLocation } from \"../../shared/types.ts\";\n\ninterface DeviceFormProps {\n onDeviceRegistered: (device: Device) => void;\n}\n\nexport default function DeviceForm({ onDeviceRegistered }: DeviceFormProps) {\n const [formData, setFormData] = useState({\n macAddress: '',\n latitude: '',\n longitude: '',\n mainboard: 'huawei'\n });\n const [errors, setErrors] = useState>({});\n const [loading, setLoading] = useState(false);\n const [success, setSuccess] = useState(false);\n const [geoLoading, setGeoLoading] = useState(false);\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({ ...prev, [name]: value }));\n \n // Clear error when user starts typing\n if (errors[name]) {\n setErrors(prev => ({ ...prev, [name]: '' }));\n }\n };\n\n const getCurrentLocation = () => {\n setGeoLoading(true);\n \n if (!navigator.geolocation) {\n setErrors(prev => ({ ...prev, location: 'Geolocation is not supported by this browser' }));\n setGeoLoading(false);\n return;\n }\n\n navigator.geolocation.getCurrentPosition(\n (position) => {\n setFormData(prev => ({\n ...prev,\n latitude: position.coords.latitude.toFixed(6),\n longitude: position.coords.longitude.toFixed(6)\n }));\n setGeoLoading(false);\n setErrors(prev => ({ ...prev, location: '' }));\n },\n (error) => {\n let errorMessage = 'Unable to retrieve location';\n switch (error.code) {\n case error.PERMISSION_DENIED:\n errorMessage = 'Location access denied by user';\n break;\n case error.POSITION_UNAVAILABLE:\n errorMessage = 'Location information unavailable';\n break;\n case error.TIMEOUT:\n errorMessage = 'Location request timed out';\n break;\n }\n setErrors(prev => ({ ...prev, location: errorMessage }));\n setGeoLoading(false);\n },\n { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }\n );\n };\n\n const validateForm = () => {\n const newErrors: Record = {};\n\n if (!formData.macAddress) {\n newErrors.macAddress = 'MAC address is required';\n } else if (!validateMacAddress(formData.macAddress)) {\n newErrors.macAddress = 'Invalid MAC address format (use XX:XX:XX:XX:XX:XX or XX-XX-XX-XX-XX-XX)';\n }\n\n if (!formData.latitude || !formData.longitude) {\n newErrors.location = 'Location coordinates are required';\n } else {\n const lat = parseFloat(formData.latitude);\n const lng = parseFloat(formData.longitude);\n if (isNaN(lat) || isNaN(lng) || !validateGeoLocation(lat, lng)) {\n newErrors.location = 'Invalid coordinates (latitude: -90 to 90, longitude: -180 to 180)';\n }\n }\n\n if (!formData.mainboard) {\n newErrors.mainboard = 'Mainboard type is required';\n }\n\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!validateForm()) {\n return;\n }\n\n setLoading(true);\n setSuccess(false);\n\n try {\n const response = await fetch('/api/devices', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n macAddress: formData.macAddress,\n latitude: parseFloat(formData.latitude),\n longitude: parseFloat(formData.longitude),\n mainboard: formData.mainboard\n })\n });\n\n const result = await response.json();\n\n if (result.success) {\n setSuccess(true);\n onDeviceRegistered(result.data);\n \n // Reset form\n setFormData({\n macAddress: '',\n latitude: '',\n longitude: '',\n mainboard: 'huawei'\n });\n \n // Clear success message after 3 seconds\n setTimeout(() => setSuccess(false), 3000);\n } else {\n setErrors({ submit: result.error || 'Registration failed' });\n }\n } catch (error) {\n setErrors({ submit: 'Network error. Please try again.' });\n } finally {\n setLoading(false);\n }\n };\n\n const selectedConfig = MAINBOARD_CONFIGS[formData.mainboard];\n\n return (\n

Register New ONU Device

\n Enter device information to automatically assign an IP address and register with the billing system.\n

\n\n {success && (\n

✅

\n Device registered successfully!\n

\n The device has been authorized and uploaded to the billing system.\n

\n )}\n\n

\n {/* MAC Address */}\n

\n \n MAC Address *\n \n \n {errors.macAddress && (\n

{errors.macAddress}

\n )}\n

\n\n {/* Location */}\n

\n \n Location Coordinates *\n \n \n {geoLoading ? '📍 Getting location...' : '📍 Use current location'}\n \n

\n \n

\n {errors.location && (\n

{errors.location}

\n )}\n

\n\n {/* Mainboard */}\n

\n \n Mainboard Type *\n \n \n {Object.entries(MAINBOARD_CONFIGS).map(([key, config]) => (\n \n ))}\n \n {errors.mainboard && (\n

{errors.mainboard}

\n )}\n

\n\n {/* IP Assignment Preview */}\n {selectedConfig && (\n

IP Assignment Preview

Mainboard: {selectedConfig.name}

IP Range: {selectedConfig.ipRange}.{selectedConfig.startIP}-{selectedConfig.endIP}

\n The next available IP in this range will be automatically assigned\n

\n )}\n\n {/* Submit Error */}\n {errors.submit && (\n

{errors.submit}

\n )}\n\n {/* Submit Button */}\n

\n \n {loading ? '⏳ Registering...' : '🚀 Register Device'}\n \n

\n );\n}",[],[230,237,252],{"_102":260,"_95":261,"_151":262,"_153":238,"_154":136,"_155":263,"_157":158,"_104":264,"_99":32,"_160":178,"_162":265,"_163":22,"_164":-5,"_165":266,"_98":267},"4022fc7a-3a40-11f0-800f-9e149126039e","DeviceList.tsx","4022fd42-3a40-11f0-800f-9e149126039e",12,["D",1748270807679],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Device, MAINBOARD_CONFIGS } from \"../../shared/types.ts\";\n\ninterface DeviceListProps {\n devices: Device[];\n loading: boolean;\n onRefresh: () => void;\n onDeviceUpdated: (device: Device) => void;\n onDeviceDeleted: (deviceId: number) => void;\n}\n\nexport default function DeviceList({ \n devices, \n loading, \n onRefresh, \n onDeviceUpdated, \n onDeviceDeleted \n}: DeviceListProps) {\n const [filter, setFilter] = useState<'all' | 'pending' | 'authorized' | 'rejected'>('all');\n const [sortBy, setSortBy] = useState<'created' | 'ip' | 'mainboard'>('created');\n const [actionLoading, setActionLoading] = useState>({});\n\n const filteredDevices = devices.filter(device => {\n if (filter === 'all') return true;\n return device.status === filter;\n });\n\n const sortedDevices = [...filteredDevices].sort((a, b) => {\n switch (sortBy) {\n case 'created':\n return new Date(b.createdAt || '').getTime() - new Date(a.createdAt || '').getTime();\n case 'ip':\n return a.assignedIP.localeCompare(b.assignedIP);\n case 'mainboard':\n return a.mainboard.localeCompare(b.mainboard);\n default:\n return 0;\n }\n });\n\n const updateDeviceStatus = async (deviceId: number, status: Device['status']) => {\n setActionLoading(prev => ({ ...prev, [deviceId]: 'updating' }));\n \n try {\n const response = await fetch(`/api/devices/${deviceId}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ status })\n });\n\n const result = await response.json();\n if (result.success) {\n onDeviceUpdated(result.data);\n } else {\n alert(`Error: ${result.error}`);\n }\n } catch (error) {\n alert('Network error. Please try again.');\n } finally {\n setActionLoading(prev => ({ ...prev, [deviceId]: '' }));\n }\n };\n\n const retryBilling = async (deviceId: number) => {\n setActionLoading(prev => ({ ...prev, [deviceId]: 'billing' }));\n \n try {\n const response = await fetch(`/api/devices/${deviceId}/retry-billing`, {\n method: 'POST'\n });\n\n const result = await response.json();\n if (result.success) {\n onDeviceUpdated(result.data);\n } else {\n alert(`Billing retry failed: ${result.error}`);\n }\n } catch (error) {\n alert('Network error. Please try again.');\n } finally {\n setActionLoading(prev => ({ ...prev, [deviceId]: '' }));\n }\n };\n\n const deleteDevice = async (deviceId: number) => {\n if (!confirm('Are you sure you want to delete this device? This action cannot be undone.')) {\n return;\n }\n\n setActionLoading(prev => ({ ...prev, [deviceId]: 'deleting' }));\n \n try {\n const response = await fetch(`/api/devices/${deviceId}`, {\n method: 'DELETE'\n });\n\n const result = await response.json();\n if (result.success) {\n onDeviceDeleted(deviceId);\n } else {\n alert(`Error: ${result.error}`);\n }\n } catch (error) {\n alert('Network error. Please try again.');\n } finally {\n setActionLoading(prev => ({ ...prev, [deviceId]: '' }));\n }\n };\n\n const getStatusBadge = (status: Device['status']) => {\n const baseClasses = \"px-2 py-1 text-xs font-medium rounded-full\";\n switch (status) {\n case 'pending':\n return `${baseClasses} bg-yellow-100 text-yellow-800`;\n case 'authorized':\n return `${baseClasses} bg-green-100 text-green-800`;\n case 'rejected':\n return `${baseClasses} bg-red-100 text-red-800`;\n default:\n return `${baseClasses} bg-gray-100 text-gray-800`;\n }\n };\n\n const getMainboardBadge = (mainboard: string) => {\n const config = MAINBOARD_CONFIGS[mainboard];\n const baseClasses = \"px-2 py-1 text-xs font-medium rounded border\";\n return `${baseClasses} mainboard-${mainboard}`;\n };\n\n return (\n

\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}",[],[230,237,261],[230,237],{"_102":270,"_95":271,"_151":272,"_153":231,"_154":136,"_155":232,"_157":158,"_104":273,"_99":32,"_160":274,"_162":275,"_163":22,"_164":-5,"_165":276,"_98":277},"f66d55da-3a3f-11f0-8689-9e149126039e","index.html","f66d568e-3a3f-11f0-8689-9e149126039e",["D",1748270684015],"file","\n\n\n \n \n ONU Fiber Router Authorization\n \n \n \n\n\n

\n \n \n\n",[],[230,271],{"_102":279,"_95":280,"_151":281,"_153":231,"_154":136,"_155":282,"_157":158,"_104":283,"_99":32,"_160":178,"_162":284,"_163":22,"_164":-5,"_165":285,"_98":286},"faac6dd4-3a3f-11f0-9460-9e149126039e","index.tsx","faac6e6a-3a3f-11f0-9460-9e149126039e",9,["D",1748270691140],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[230,280],[230],{"_102":289,"_95":290,"_151":291,"_153":-5,"_154":136,"_155":187,"_157":158,"_104":292,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":293,"_98":302},"c0767fec-3a3f-11f0-9769-9e149126039e","shared","e486ccf1-1b42-4616-a08e-be09f24ebae1",["D",1748270593477],[294],{"_102":295,"_95":296,"_151":297,"_153":291,"_154":136,"_155":187,"_157":158,"_104":298,"_99":32,"_160":178,"_162":299,"_163":22,"_164":-5,"_165":300,"_98":301},"c07664f8-3a3f-11f0-9769-9e149126039e","types.ts","c07665ac-3a3f-11f0-9769-9e149126039e",["D",1748270593477],"// Shared types for ONU authorization system\n\nexport interface Device {\n id?: number;\n macAddress: string;\n latitude: number;\n longitude: number;\n mainboard: string;\n assignedIP: string;\n status: 'pending' | 'authorized' | 'rejected';\n createdAt?: string;\n updatedAt?: string;\n}\n\nexport interface GeoLocation {\n latitude: number;\n longitude: number;\n accuracy?: number;\n}\n\nexport interface BillingData {\n deviceId: string;\n macAddress: string;\n location: GeoLocation;\n mainboard: string;\n assignedIP: string;\n customerInfo?: {\n name?: string;\n email?: string;\n phone?: string;\n };\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n message?: string;\n}\n\nexport interface MainboardConfig {\n name: string;\n ipRange: string;\n startIP: number;\n endIP: number;\n}\n\nexport const MAINBOARD_CONFIGS: Record = {\n 'huawei': {\n name: 'Huawei',\n ipRange: '192.168.1',\n startIP: 10,\n endIP: 254\n },\n 'zte': {\n name: 'ZTE',\n ipRange: '192.168.2',\n startIP: 10,\n endIP: 254\n },\n 'nokia': {\n name: 'Nokia',\n ipRange: '192.168.3',\n startIP: 10,\n endIP: 254\n },\n 'alcatel': {\n name: 'Alcatel',\n ipRange: '192.168.4',\n startIP: 10,\n endIP: 254\n },\n 'default': {\n name: 'Other',\n ipRange: '192.168.100',\n startIP: 10,\n endIP: 254\n }\n};\n\nexport function validateMacAddress(mac: string): boolean {\n const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;\n return macRegex.test(mac);\n}\n\nexport function validateGeoLocation(lat: number, lng: number): boolean {\n return lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;\n}\n\nexport function normalizeMainboard(mainboard: string): string {\n const normalized = mainboard.toLowerCase().trim();\n return Object.keys(MAINBOARD_CONFIGS).includes(normalized) ? normalized : 'default';\n}",[],[290,296],[290],{"_102":304,"_95":305,"_151":306,"_153":-5,"_154":136,"_155":307,"_157":158,"_104":308,"_99":32,"_160":274,"_162":309,"_163":22,"_164":-5,"_165":310,"_98":311},"b8620bbe-3a3f-11f0-aa41-9e149126039e","README.md","b8620c7c-3a3f-11f0-aa41-9e149126039e",1,["D",1748270579922],"# ONU Fiber Router Authorization System\n\nAn automated system for authorizing new ONU (Optical Network Unit) fiber routers. The system validates device information, assigns IP addresses based on mainboard types, and integrates with billing systems.\n\n## Features\n\n- **Device Registration**: Collect MAC address, geo data, and mainboard information\n- **Automatic IP Assignment**: Assign IP addresses based on mainboard type\n- **Billing Integration**: Upload device data to external billing systems\n- **Validation**: Verify MAC address format and geo coordinates\n- **Admin Dashboard**: View and manage registered devices\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database operations\n│ ├── routes/\n│ │ ├── devices.ts # Device management API\n│ │ └── static.ts # Static file serving\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application\n│ │ ├── DeviceForm.tsx # Device registration form\n│ │ └── DeviceList.tsx # Device management dashboard\n│ ├── index.html # Main HTML template\n│ └── index.tsx # Frontend entry point\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Environment Variables\n\nSet these in your Val Town environment:\n\n- `BILLING_API_URL`: URL of the external billing system\n- `BILLING_API_KEY`: API key for billing system authentication\n\n## API Endpoints\n\n- `POST /api/devices` - Register new device\n- `GET /api/devices` - List all devices\n- `PUT /api/devices/:id` - Update device\n- `DELETE /api/devices/:id` - Delete device\n\n## IP Assignment Rules\n\n- **Huawei**: 192.168.1.x range\n- **ZTE**: 192.168.2.x range \n- **Nokia**: 192.168.3.x range\n- **Alcatel**: 192.168.4.x range\n- **Default**: 192.168.100.x range",[],[305],"files",[148,167,173,182,192,199,207,217,228,235,242,250,259,269,278,288,294,303],"counts",{"_316":32,"_317":307,"_318":32,"_319":320},"pulls","branches","forks","envVars",{"_321":32,"_322":32},"count","emptyCount","contents",[325,328,331,334],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":326,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":327},["D",1748270601143],[150],{"_102":229,"_95":230,"_151":231,"_153":-5,"_154":136,"_155":232,"_157":158,"_104":329,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":330},["D",1748270684015],[230],{"_102":289,"_95":290,"_151":291,"_153":-5,"_154":136,"_155":187,"_157":158,"_104":332,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":333},["D",1748270593477],[290],{"_102":304,"_95":305,"_151":306,"_153":-5,"_154":136,"_155":307,"_157":158,"_104":335,"_99":32,"_160":274,"_162":309,"_163":22,"_164":-5,"_98":336},["D",1748270579922],[305],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":345,"_319":350},{"_102":103,"_95":96,"_104":346,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":347,"_130":348,"_133":349,"_145":22},["D",1748270382819],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[],"actionData","errors"]

Rashid1473

rashid

Environment variables