Redesign device config modal with toggle switches

- Replace all checkboxes with modern toggle switches (48x26px)
- Remove SSH/Dashboard tunnel config sections (auto-managed by server)
- Add BLE/WiFi upload_endpoint fields for custom data pipelines
- Split WiFi into separate sections: Scanner and Client (mutually exclusive)
- Reorder sections: WiFi Scanner first, then BLE, then WiFi Client
- Add NTP servers configuration
- Improve layout compactness and spacing
- Add toggle-content sections with proper dividers
- Update i18n translations (EN/RU)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/i18n/index.js

@@ -67,7 +67,23 @@ const messages = {
       manageAction: 'Manage Devices',
       manageDesc: 'View and assign devices',
       online: 'Online',
-      offline: 'Offline'
+      offline: 'Offline',
+      config: {
+        wifiScannerEnabled: 'WiFi Scanner enabled',
+        bleScannerEnabled: 'BLE Scanner enabled',
+        bleBatchInterval: 'Batch Interval',
+        wifiClientEnabled: 'WiFi Client enabled',
+        wifiSsid: 'SSID',
+        wifiPassword: 'Password',
+        wifiBatchInterval: 'Batch Interval',
+        uploadEndpoint: 'Upload Endpoint',
+        uploadEndpointHint: 'Custom upload URL (optional, leave empty for default)',
+        ntpServers: 'NTP Servers',
+        ntpHint: 'Comma-separated list of NTP servers',
+        forceCloud: 'Force Cloud Mode',
+        debug: 'Debug Mode',
+        dashboardEnabled: 'Dashboard Enabled'
+      }
     },
     users: {
       title: 'Users',
@@ -162,7 +178,23 @@ const messages = {
       manageAction: 'Управление устройствами',
       manageDesc: 'Просмотр и назначение устройств',
       online: 'Онлайн',
-      offline: 'Оффлайн'
+      offline: 'Оффлайн',
+      config: {
+        wifiScannerEnabled: 'WiFi сканер включен',
+        bleScannerEnabled: 'BLE сканер включен',
+        bleBatchInterval: 'Интервал пакетов',
+        wifiClientEnabled: 'WiFi клиент включен',
+        wifiSsid: 'SSID',
+        wifiPassword: 'Пароль',
+        wifiBatchInterval: 'Интервал пакетов',
+        uploadEndpoint: 'Эндпоинт загрузки',
+        uploadEndpointHint: 'Кастомный URL загрузки (необязательно, оставьте пустым для дефолтного)',
+        ntpServers: 'NTP серверы',
+        ntpHint: 'Список NTP серверов через запятую',
+        forceCloud: 'Принудительный облачный режим',
+        debug: 'Режим отладки',
+        dashboardEnabled: 'Dashboard включен'
+      }
     },
     users: {
       title: 'Пользователи',

frontend/src/views/superadmin/DevicesView.vue

@@ -61,6 +61,22 @@
             <td>{{ formatDate(device.last_seen_at) }}</td>
             <td>
               <button @click="showEditModal(device)" class="btn-icon" title="Edit">✏️</button>
+              <button
+                @click="openSSH(device)"
+                class="btn-icon"
+                :class="{ disabled: !isTunnelAvailable(device, 'ssh') }"
+                :disabled="!isTunnelAvailable(device, 'ssh')"
+                title="SSH Terminal">
+                🖥️
+              </button>
+              <button
+                @click="openDashboard(device)"
+                class="btn-icon"
+                :class="{ disabled: !isTunnelAvailable(device, 'dashboard') }"
+                :disabled="!isTunnelAvailable(device, 'dashboard')"
+                title="Dashboard">
+                📊
+              </button>
             </td>
           </tr>
         </tbody>
@@ -71,36 +87,116 @@
 
     <!-- Edit Modal -->
     <div v-if="modalVisible" class="modal-overlay" @click="closeModal">
-      <div class="modal" @click.stop>
+      <div class="modal modal-wide" @click.stop>
         <div class="modal-header">
-          <h2>{{ $t('common.edit') }} Device #{{ editingDevice?.simple_id }}</h2>
+          <h2>Device #{{ editingDevice?.simple_id }} - {{ editingDevice?.mac_address }}</h2>
           <button @click="closeModal" class="btn-close">×</button>
         </div>
         <form @submit.prevent="saveDevice" class="modal-body">
-          <div class="form-group">
-            <label>{{ $t('devices.simpleId') }}</label>
-            <input :value="`#${editingDevice?.simple_id}`" type="text" disabled />
+          <!-- WiFi Scanner Section -->
+          <div class="config-section">
+            <h3>WiFi Scanner</h3>
+            <div class="toggle-row">
+              <span>{{ $t('devices.config.wifiScannerEnabled') }}</span>
+              <label class="toggle-switch">
+                <input type="checkbox" v-model="config.wifi.monitor_enabled" @change="onWifiMonitorChange" />
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div v-if="config.wifi.monitor_enabled" class="toggle-content">
+              <div class="form-group">
+                <label>{{ $t('devices.config.wifiBatchInterval') }} (ms)</label>
+                <input v-model.number="config.wifi.batch_interval_ms" type="number" min="1000" step="1000" />
+              </div>
+              <div class="form-group">
+                <label>{{ $t('devices.config.uploadEndpoint') }}</label>
+                <input v-model="config.wifi.upload_endpoint" type="text" placeholder="http://custom.example.com:8080/wifi" />
+                <div class="form-hint">{{ $t('devices.config.uploadEndpointHint') }}</div>
+              </div>
+            </div>
           </div>
 
-          <div class="form-group">
-            <label>{{ $t('devices.macAddress') }}</label>
-            <input :value="editingDevice?.mac_address" type="text" disabled />
+          <!-- BLE Section -->
+          <div class="config-section">
+            <h3>BLE Scanner</h3>
+            <div class="toggle-row">
+              <span>{{ $t('devices.config.bleScannerEnabled') }}</span>
+              <label class="toggle-switch">
+                <input type="checkbox" v-model="config.ble.enabled" />
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div v-if="config.ble.enabled" class="toggle-content">
+              <div class="form-group">
+                <label>{{ $t('devices.config.bleBatchInterval') }} (ms)</label>
+                <input v-model.number="config.ble.batch_interval_ms" type="number" min="100" step="100" />
+              </div>
+              <div class="form-group">
+                <label>{{ $t('devices.config.uploadEndpoint') }}</label>
+                <input v-model="config.ble.upload_endpoint" type="text" placeholder="http://custom.example.com:8080/ble" />
+                <div class="form-hint">{{ $t('devices.config.uploadEndpointHint') }}</div>
+              </div>
+            </div>
           </div>
 
-          <div class="form-group">
-            <label>{{ $t('devices.organization') }}</label>
-            <select v-model="form.organization_id">
-              <option :value="null">Unassigned</option>
-              <option v-for="org in organizations" :key="org.id" :value="org.id">
-                {{ org.name }}
-              </option>
-            </select>
+          <!-- WiFi Client Section -->
+          <div class="config-section">
+            <h3>WiFi Client</h3>
+            <div class="toggle-row">
+              <span>{{ $t('devices.config.wifiClientEnabled') }}</span>
+              <label class="toggle-switch">
+                <input type="checkbox" v-model="config.wifi.client_enabled" @change="onWifiClientChange" />
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div v-if="config.wifi.client_enabled" class="toggle-content">
+              <div class="form-row">
+                <div class="form-group">
+                  <label>{{ $t('devices.config.wifiSsid') }}</label>
+                  <input v-model="config.wifi.ssid" type="text" />
+                </div>
+                <div class="form-group">
+                  <label>{{ $t('devices.config.wifiPassword') }}</label>
+                  <input v-model="config.wifi.psk" type="password" />
+                </div>
+              </div>
+            </div>
           </div>
 
-          <div class="form-group">
-            <label>{{ $t('common.status') }} (auto)</label>
-            <input :value="$t(`devices.${editingDevice?.status}`)" type="text" disabled />
-            <p class="form-hint">{{ $t('devices.statusHint') }}</p>
+          <!-- NTP Section -->
+          <div class="config-section">
+            <h3>NTP Servers</h3>
+            <div class="form-group">
+              <label>{{ $t('devices.config.ntpServers') }}</label>
+              <input v-model="ntpServersText" type="text" placeholder="pool.ntp.org, time.google.com" />
+              <div class="form-hint">{{ $t('devices.config.ntpHint') }}</div>
+            </div>
+          </div>
+
+          <!-- Other Settings -->
+          <div class="config-section">
+            <h3>Other</h3>
+            <div class="toggle-row">
+              <span>{{ $t('devices.config.forceCloud') }}</span>
+              <label class="toggle-switch">
+                <input type="checkbox" v-model="config.force_cloud" />
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div class="toggle-row">
+              <span>{{ $t('devices.config.debug') }}</span>
+              <label class="toggle-switch">
+                <input type="checkbox" v-model="config.debug" />
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div class="toggle-row">
+              <span>{{ $t('devices.config.dashboardEnabled') }}</span>
+              <label class="toggle-switch">
+                <input type="checkbox" v-model="config.dashboard.enabled" />
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
           </div>
 
           <div class="modal-footer">
@@ -132,11 +228,34 @@ const searchQuery = ref('')
 const onlineOnly = ref(false)
 const sortColumn = ref('simple_id')
 const sortDirection = ref('desc')
+const ntpServersText = ref('')
 let searchDebounceTimer = null
 let pollingInterval = null
 
-const form = ref({
-  organization_id: null
+const config = ref({
+  force_cloud: false,
+  ble: {
+    enabled: true,
+    batch_interval_ms: 2500,
+    upload_endpoint: ''
+  },
+  wifi: {
+    client_enabled: false,
+    ssid: '',
+    psk: '',
+    monitor_enabled: true,
+    batch_interval_ms: 10000,
+    upload_endpoint: ''
+  },
+  dashboard: {
+    enabled: true
+  },
+  net: {
+    ntp: {
+      servers: ['pool.ntp.org', 'time.google.com']
+    }
+  },
+  debug: false
 })
 
 const sortedDevices = computed(() => {
@@ -222,9 +341,36 @@ function formatDate(dateStr) {
 
 function showEditModal(device) {
   editingDevice.value = device
-  form.value = {
-    organization_id: device.organization_id
+  // Deep copy device config with defaults
+  config.value = {
+    force_cloud: device.config?.force_cloud ?? false,
+    ble: {
+      enabled: device.config?.ble?.enabled ?? true,
+      batch_interval_ms: device.config?.ble?.batch_interval_ms ?? 2500,
+      upload_endpoint: device.config?.ble?.upload_endpoint ?? ''
+    },
+    wifi: {
+      client_enabled: device.config?.wifi?.client_enabled ?? false,
+      ssid: device.config?.wifi?.ssid ?? '',
+      psk: device.config?.wifi?.psk ?? '',
+      monitor_enabled: device.config?.wifi?.monitor_enabled ?? true,
+      batch_interval_ms: device.config?.wifi?.batch_interval_ms ?? 10000,
+      upload_endpoint: device.config?.wifi?.upload_endpoint ?? ''
+    },
+    dashboard: {
+      enabled: device.config?.dashboard?.enabled ?? true
+    },
+    net: {
+      ntp: {
+        servers: device.config?.net?.ntp?.servers ?? ['pool.ntp.org', 'time.google.com']
+      }
+    },
+    debug: device.config?.debug ?? false
   }
+
+  // Convert NTP servers array to comma-separated string
+  ntpServersText.value = config.value.net.ntp.servers.join(', ')
+
   modalVisible.value = true
 }
 
@@ -233,10 +379,30 @@ function closeModal() {
   editingDevice.value = null
 }
 
+function onWifiClientChange() {
+  // WiFi client и monitor взаимоисключающие (AIC8800 ограничение)
+  if (config.value.wifi.client_enabled) {
+    config.value.wifi.monitor_enabled = false
+  }
+}
+
+function onWifiMonitorChange() {
+  // WiFi client и monitor взаимоисключающие (AIC8800 ограничение)
+  if (config.value.wifi.monitor_enabled) {
+    config.value.wifi.client_enabled = false
+  }
+}
+
 async function saveDevice() {
   saving.value = true
   try {
-    await devicesApi.updateSuperadmin(editingDevice.value.id, form.value)
+    // Parse NTP servers from comma-separated string to array
+    config.value.net.ntp.servers = ntpServersText.value
+      .split(',')
+      .map(s => s.trim())
+      .filter(s => s.length > 0)
+
+    await devicesApi.updateSuperadmin(editingDevice.value.id, { config: config.value })
     await loadDevices()
     closeModal()
   } catch (err) {
@@ -246,6 +412,35 @@ async function saveDevice() {
   }
 }
 
+function isTunnelAvailable(device, type) {
+  if (!device.config) return false
+
+  if (type === 'ssh') {
+    return device.config.ssh_tunnel?.enabled && device.config.ssh_tunnel?.remote_port > 0
+  } else if (type === 'dashboard') {
+    return device.config.dashboard_tunnel?.enabled && device.config.dashboard_tunnel?.remote_port > 0
+  }
+  return false
+}
+
+function openSSH(device) {
+  if (!isTunnelAvailable(device, 'ssh')) return
+
+  const server = device.config.ssh_tunnel.server
+  const port = device.config.ssh_tunnel.remote_port
+  const url = `http://${server}:${port}`
+  window.open(url, '_blank')
+}
+
+function openDashboard(device) {
+  if (!isTunnelAvailable(device, 'dashboard')) return
+
+  const server = device.config.dashboard_tunnel.server
+  const port = device.config.dashboard_tunnel.remote_port
+  const url = `http://${server}:${port}`
+  window.open(url, '_blank')
+}
+
 onMounted(() => {
   loadDevices()
   loadOrganizations()
@@ -300,6 +495,10 @@ code { background: #f7fafc; padding: 4px 8px; border-radius: 4px; font-family: m
 .badge.status-error { background: #fed7d7; color: #742a2a; }
 .btn-icon { padding: 6px 10px; background: none; border: none; cursor: pointer; font-size: 16px; opacity: 0.7; transition: opacity 0.2s; }
 .btn-icon:hover { opacity: 1; background: #f7fafc; border-radius: 4px; }
+.btn-icon:disabled,
+.btn-icon.disabled { opacity: 0.3; cursor: not-allowed; }
+.btn-icon:disabled:hover,
+.btn-icon.disabled:hover { background: none; }
 .btn-primary { padding: 12px 24px; background: #667eea; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
 .btn-primary:hover { background: #5568d3; }
 .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
@@ -310,16 +509,40 @@ code { background: #f7fafc; padding: 4px 8px; border-radius: 4px; font-family: m
 .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
 .modal { background: white; border-radius: 12px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; }
 .modal-sm { max-width: 400px; }
+.modal-wide { max-width: 800px; }
 .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid #e2e8f0; }
 .modal-header h2 { font-size: 24px; font-weight: 700; color: #1a202c; }
 .btn-close { width: 32px; height: 32px; border: none; background: none; font-size: 32px; color: #718096; cursor: pointer; line-height: 1; }
 .btn-close:hover { color: #1a202c; }
-.modal-body { padding: 24px; }
-.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 24px; border-top: 1px solid #e2e8f0; }
-.form-group { margin-bottom: 20px; }
-.form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #4a5568; font-size: 14px; }
-.form-group input, .form-group select { width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; }
+.modal-body { padding: 16px; }
+.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px; border-top: 1px solid #e2e8f0; }
+.form-group { margin-bottom: 12px; }
+.form-group label { display: block; margin-bottom: 4px; font-weight: 500; color: #4a5568; font-size: 13px; }
+.form-group input, .form-group select { width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; transition: border-color 0.2s; }
 .form-group input:focus, .form-group select:focus { outline: none; border-color: #667eea; }
 .form-group input:disabled { background: #f7fafc; color: #718096; }
-.form-hint { margin-top: 6px; font-size: 12px; color: #718096; }
+.form-hint { margin-top: 4px; font-size: 11px; color: #718096; }
+
+/* Config sections */
+.config-section { border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px; margin-bottom: 12px; background: #fafafa; }
+.config-section h3 { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: #2d3748; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; }
+.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
+
+/* Toggle row */
+.toggle-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 8px 0; }
+.toggle-row:last-child { margin-bottom: 0; }
+.toggle-row span { font-size: 13px; font-weight: 500; color: #4a5568; }
+
+/* Toggle switch */
+.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; }
+.toggle-switch input { opacity: 0; width: 0; height: 0; }
+.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e0; border-radius: 26px; transition: 0.3s; }
+.toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.3s; }
+.toggle-switch input:checked + .toggle-slider { background-color: #667eea; }
+.toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }
+.toggle-switch input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }
+
+/* Toggle content (expanded section) */
+.toggle-content { padding-left: 0; margin-top: 8px; border-top: 1px solid #e2e8f0; padding-top: 12px; }
+.toggle-content .form-group:last-child { margin-bottom: 0; }
 </style>