feat: TTLock integration + fix agent offline status

- Add TTLock electronic lock module: settings page, room-lock mapping,
  card issuance via agent command (ttlock:write_card)
- Fix agent offline: EquipmentPage now polls every 30s + reacts to
  workstation:online/offline WebSocket events instantly
- Backend broadcasts workstation online/offline events to hotel clients
  via existing WebSocket (agent-ws.ts)
- New DB migration 048_ttlock.sql: hotel_ttlock_config, room_lock_mappings,
  card_issuances tables
- New backend routes: GET/PATCH ttlock/config, POST ttlock/token,
  GET ttlock/locks, POST/DELETE ttlock/room-locks, POST issue-card
- "Выдать ключ (TTLock)" button in BookingDetailPanel for confirmed/checked_in
- TTLock page added to sidebar under Настройки

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

src/App.tsx

@@ -43,6 +43,7 @@ import { SchedulePage } from './pages/SchedulePage'
 import { BillingPage } from './pages/BillingPage'
 import { EquipmentPage } from './pages/EquipmentPage'
 import { WiFiPage } from './pages/WiFiPage'
+import { TTLockPage } from './pages/TTLockPage'
 import { ModuleGuard } from './components/ModuleGuard'
 
 export default function App() {
@@ -96,6 +97,7 @@ export default function App() {
                 <Route path="/billing"        element={<BillingPage />} />
                 <Route path="/equipment"      element={<EquipmentPage />} />
                 <Route path="/wifi"           element={<WiFiPage />} />
+                <Route path="/ttlock"         element={<TTLockPage />} />
               </Route>
 
               <Route path="/" element={<Navigate to="/login" replace />} />

src/components/bookings/BookingDetailPanel.tsx

@@ -4,7 +4,7 @@ import {
   X, Mail, Calendar, Users, CreditCard, Tag, CheckCircle, XCircle,
   Printer, ScanLine, Banknote, Building2, Plus, Pencil,
   FileText, FileCheck, Receipt, IdCard, AlertTriangle,
-  Trash2, Loader2, UserCheck, Baby, Search, LogIn,
+  Trash2, Loader2, UserCheck, Baby, Search, LogIn, KeyRound,
 } from 'lucide-react'
 import {
   cn, BOOKING_STATUS_BADGE, BOOKING_STATUS_LABELS,
@@ -302,6 +302,8 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
   const [earlyOutMethod, setEarlyOutMethod]     = useState<'cash' | 'card' | 'transfer'>('cash')
   const [earlyOutSaving, setEarlyOutSaving]     = useState(false)
 
+  const [cardIssuing, setCardIssuing]           = useState(false)
+
   const freeRoomsForRelocate = (rooms ?? []).filter(r =>
     r.id !== booking.roomId &&
     !(allBookings ?? []).some(b =>
@@ -392,6 +394,20 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
     ])
   }
 
+  const handleIssueCard = async () => {
+    if (!slug || cardIssuing) return
+    setCardIssuing(true)
+    try {
+      const r = await api.ttlock.issueCard(slug, booking.id)
+      showToast(`✓ Ключ выдан (${r.roomName})`)
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : 'Ошибка выдачи ключа'
+      showToast(`✗ ${msg}`)
+    } finally {
+      setCardIssuing(false)
+    }
+  }
+
   // Passport data
   const nameParts = booking.guestName.split(' ')
   const [passport, setPassport] = useState<PassportData>({
@@ -1323,6 +1339,17 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
                 >
                   <CheckCircle size={15} /> {isEarlyArrival ? `Заселить (+ ${formatCurrency(room!.earlyCheckinFee!)})` : 'Заселить'}
                 </button>
+                {slug && (
+                  <button
+                    onClick={handleIssueCard}
+                    disabled={cardIssuing}
+                    className="w-full btn-secondary justify-center flex items-center gap-2"
+                    title="Записать карту-ключ для гостя"
+                  >
+                    {cardIssuing ? <Loader2 size={15} className="animate-spin" /> : <KeyRound size={15} />}
+                    Выдать ключ (TTLock)
+                  </button>
+                )}
               </>
             )
           })()}
@@ -1357,6 +1384,17 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
                 >
                   <CheckCircle size={15} /> {isLateCheckout ? `Выселить (+ ${formatCurrency(room!.lateCheckoutFee!)})` : 'Выселить'}
                 </button>
+                {slug && (
+                  <button
+                    onClick={handleIssueCard}
+                    disabled={cardIssuing}
+                    className="w-full btn-secondary justify-center flex items-center gap-2"
+                    title="Выдать дубликат карты-ключа"
+                  >
+                    {cardIssuing ? <Loader2 size={15} className="animate-spin" /> : <KeyRound size={15} />}
+                    Выдать ключ (TTLock)
+                  </button>
+                )}
               </>
             )
           })()}

src/components/layout/Sidebar.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react'
 import {
   CalendarDays, BookOpen, BedDouble, Globe, Settings,
   FileText, LayoutDashboard, Building2, Users, X, Hotel, Puzzle, CalendarRange, Map, LayoutGrid, UserCog, UsersRound,
-  TrendingUp, Tag, Award, Wrench, Utensils, CalendarClock, Zap, ChevronRight, Star, CreditCard, Monitor, Wifi,
+  TrendingUp, Tag, Award, Wrench, Utensils, CalendarClock, Zap, ChevronRight, Star, CreditCard, Monitor, Wifi, KeyRound,
 } from 'lucide-react'
 import { useAuth } from '../../contexts/AuthContext'
 import { useModules } from '../../contexts/ModulesContext'
@@ -185,7 +185,7 @@ export function Sidebar({ open, onClose }: SidebarProps) {
       prices:       ['/tariffs', '/dynamic-pricing', '/discounts', '/rental'],
       service:      ['/housekeeping', '/technical', ...activeModuleItems.map(m => m.sidebarItem!.path)],
       management:   ['/users', '/schedule', '/loyalty', '/maintenance', '/floor-map', '/channels'],
-      settingsGroup:['/modules', '/settings', '/billing', '/equipment', '/wifi'],
+      settingsGroup:['/modules', '/settings', '/billing', '/equipment', '/wifi', '/ttlock'],
       devGroup:     ['/api-docs'],
     }
 
@@ -234,6 +234,7 @@ export function Sidebar({ open, onClose }: SidebarProps) {
     { to: '/settings',        icon: Settings,       label: 'Настройки' },
     { to: '/equipment',       icon: Monitor,        label: 'Оборудование' },
     { to: '/wifi',            icon: Wifi,           label: 'WiFi авторизация' },
+    { to: '/ttlock',          icon: KeyRound,       label: 'Электронные замки' },
     // dev
     { to: '/api-docs',        icon: FileText,       label: 'API & Документация' },
   ]
@@ -417,6 +418,7 @@ export function Sidebar({ open, onClose }: SidebarProps) {
                       <NavItem to="/billing"   icon={CreditCard}  label="Тарифы и оплата" {...navItemProps} />
                       <NavItem to="/equipment" icon={Monitor}     label="Оборудование"    {...navItemProps} />
                       <NavItem to="/wifi"      icon={Wifi}        label="WiFi авторизация" {...navItemProps} />
+                      <NavItem to="/ttlock"    icon={KeyRound}    label="Эл. замки TTLock" {...navItemProps} />
                     </div>
                   )}
                 </>

src/hooks/useHotelSocket.ts

@@ -11,6 +11,8 @@ export type WsMessage =
   | { type: 'housekeeping_updated';      task: Record<string, unknown> }
   | { type: 'housekeeping_done';         taskId: string; roomId: string; roomStatus: string }
   | { type: 'notification:new'; notification: Record<string, unknown> }
+  | { type: 'workstation:online';  workstationId: string }
+  | { type: 'workstation:offline'; workstationId: string }
 
 interface Options {
   slug: string

src/lib/api.ts

@@ -601,6 +601,36 @@ export const api = {
     regenerateToken: (slug: string) =>
       req<{ apiToken: string }>('POST', `/api/hotels/${slug}/wifi-settings/regenerate-token`),
   },
+
+  // ── TTLock ─────────────────────────────────────────────────────────────────
+  ttlock: {
+    getConfig: (slug: string) =>
+      req<TTLockConfig>('GET', `/api/hotels/${slug}/ttlock/config`),
+
+    updateConfig: (slug: string, data: TTLockConfigUpdate) =>
+      req<{ ok: boolean }>('PATCH', `/api/hotels/${slug}/ttlock/config`, data),
+
+    testToken: (slug: string) =>
+      req<{ ok: boolean; expiresAt: string }>('POST', `/api/hotels/${slug}/ttlock/token`),
+
+    getLocks: (slug: string) =>
+      req<TTLockDevice[]>('GET', `/api/hotels/${slug}/ttlock/locks`),
+
+    getRoomLocks: (slug: string) =>
+      req<RoomLockMapping[]>('GET', `/api/hotels/${slug}/ttlock/room-locks`),
+
+    mapRoom: (slug: string, data: { roomId: string; lockId: number; lockName?: string }) =>
+      req<{ ok: boolean }>('POST', `/api/hotels/${slug}/ttlock/room-locks`, data),
+
+    unmapRoom: (slug: string, roomId: string) =>
+      req<{ ok: boolean }>('DELETE', `/api/hotels/${slug}/ttlock/room-locks/${roomId}`),
+
+    issueCard: (slug: string, bookingId: string) =>
+      req<CardIssuanceResult>('POST', `/api/hotels/${slug}/bookings/${bookingId}/issue-card`),
+
+    getCards: (slug: string, bookingId: string) =>
+      req<CardIssuance[]>('GET', `/api/hotels/${slug}/bookings/${bookingId}/cards`),
+  },
 }
 
 // ── Schedule ─────────────────────────────────────────────────────────────────
@@ -1051,6 +1081,58 @@ export interface Workstation {
   devices: WorkstationDevice[] | null
 }
 
+export interface TTLockConfig {
+  isEnabled: boolean
+  clientId: string
+  ttlockUsername: string
+  workstationId: string | null
+  hasToken: boolean
+  tokenExpiresAt: string | null
+}
+
+export interface TTLockConfigUpdate {
+  isEnabled?: boolean
+  clientId?: string
+  clientSecret?: string
+  ttlockUsername?: string
+  ttlockPassword?: string
+  workstationId?: string | null
+}
+
+export interface TTLockDevice {
+  lockId: number
+  name: string
+}
+
+export interface RoomLockMapping {
+  roomId: string
+  roomName: string
+  roomNumber: string
+  lockId: number
+  lockName: string | null
+}
+
+export interface CardIssuanceResult {
+  ok: boolean
+  issuanceId: string
+  issuedAt: string
+  lockName: string | null
+  roomName: string
+  checkIn: string
+  checkOut: string
+}
+
+export interface CardIssuance {
+  id: string
+  lockId: number
+  issuedAt: string
+  issuedBy: string | null
+  checkIn: string
+  checkOut: string
+  isRevoked: boolean
+  revokedAt: string | null
+}
+
 export interface WifiSettings {
   id: string
   hotelId: string

src/pages/EquipmentPage.tsx

@@ -8,6 +8,7 @@ import {
 import { cn } from '../lib/utils'
 import { api, type Workstation, type WorkstationDevice } from '../lib/api'
 import { useAuth } from '../contexts/AuthContext'
+import { useHotelSocket } from '../hooks/useHotelSocket'
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -1024,7 +1025,7 @@ function WorkstationCard({
 // ─── Main Page ────────────────────────────────────────────────────────────────
 
 export function EquipmentPage() {
-  const { user } = useAuth()
+  const { user, session } = useAuth()
   const slug = user?.hotelSlug ?? ''
 
   const [workstations, setWorkstations] = useState<Workstation[]>([])
@@ -1051,6 +1052,23 @@ export function EquipmentPage() {
 
   useEffect(() => { load() }, [load])
 
+  // Auto-refresh every 30 s so online/offline status stays current
+  useEffect(() => {
+    const timer = setInterval(load, 30_000)
+    return () => clearInterval(timer)
+  }, [load])
+
+  // Instant update when agent connects or disconnects
+  useHotelSocket({
+    slug,
+    token: session?.token ?? null,
+    onMessage: (msg) => {
+      if (msg.type === 'workstation:online' || msg.type === 'workstation:offline') {
+        load()
+      }
+    },
+  })
+
   useEffect(() => {
     api.agents.getLatestRelease().then(setLatestRelease).catch(() => {})
   }, [])

src/pages/TTLockPage.tsx

@@ -0,0 +1,491 @@
+import { useState, useEffect, useCallback } from 'react'
+import {
+  KeyRound, Save, RefreshCw, Check, X, AlertCircle, ChevronDown, ChevronRight,
+  Trash2, Plus, Eye, EyeOff, Monitor, Wifi, WifiOff, Lock, Unlock,
+} from 'lucide-react'
+import { api, type TTLockConfig, type TTLockDevice, type RoomLockMapping, type Workstation } from '../lib/api'
+import { useAuth } from '../contexts/AuthContext'
+import { cn } from '../lib/utils'
+import type { Room } from '../types'
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function Section({ title, children, defaultOpen = true }: {
+  title: string
+  children: React.ReactNode
+  defaultOpen?: boolean
+}) {
+  const [open, setOpen] = useState(defaultOpen)
+  return (
+    <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+      <button
+        onClick={() => setOpen(o => !o)}
+        className="w-full flex items-center justify-between px-6 py-4 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors text-left"
+      >
+        <span className="font-semibold text-slate-800 dark:text-slate-200">{title}</span>
+        {open ? <ChevronDown size={16} className="text-slate-500" /> : <ChevronRight size={16} className="text-slate-500" />}
+      </button>
+      {open && <div className="p-6 bg-white dark:bg-slate-900">{children}</div>}
+    </div>
+  )
+}
+
+function PasswordInput({ value, onChange, placeholder }: {
+  value: string
+  onChange: (v: string) => void
+  placeholder?: string
+}) {
+  const [show, setShow] = useState(false)
+  return (
+    <div className="relative">
+      <input
+        type={show ? 'text' : 'password'}
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="input pr-10 w-full"
+      />
+      <button
+        type="button"
+        onClick={() => setShow(s => !s)}
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+      >
+        {show ? <EyeOff size={15} /> : <Eye size={15} />}
+      </button>
+    </div>
+  )
+}
+
+// ── Main Page ─────────────────────────────────────────────────────────────────
+
+export function TTLockPage() {
+  const { user } = useAuth()
+  const slug = user?.hotelSlug ?? ''
+
+  const [config, setConfig]           = useState<TTLockConfig | null>(null)
+  const [locks, setLocks]             = useState<TTLockDevice[]>([])
+  const [mappings, setMappings]       = useState<RoomLockMapping[]>([])
+  const [rooms, setRooms]             = useState<Room[]>([])
+  const [workstations, setWorkstations] = useState<Workstation[]>([])
+  const [loading, setLoading]         = useState(true)
+  const [saving, setSaving]           = useState(false)
+  const [tokenLoading, setTokenLoading] = useState(false)
+  const [locksLoading, setLocksLoading] = useState(false)
+  const [error, setError]             = useState<string | null>(null)
+  const [success, setSuccess]         = useState<string | null>(null)
+
+  // Form state
+  const [isEnabled, setIsEnabled]     = useState(false)
+  const [clientId, setClientId]       = useState('')
+  const [clientSecret, setClientSecret] = useState('')
+  const [username, setUsername]       = useState('')
+  const [password, setPassword]       = useState('')
+  const [workstationId, setWorkstationId] = useState<string>('')
+
+  // Room mapping
+  const [selectedRoom, setSelectedRoom]   = useState('')
+  const [selectedLock, setSelectedLock]   = useState<number | ''>('')
+  const [mappingLoading, setMappingLoading] = useState(false)
+
+  const showSuccess = (msg: string) => {
+    setSuccess(msg)
+    setTimeout(() => setSuccess(null), 3000)
+  }
+
+  const load = useCallback(async () => {
+    if (!slug) return
+    setLoading(true)
+    try {
+      const [cfg, maps, roomList, wsList] = await Promise.all([
+        api.ttlock.getConfig(slug),
+        api.ttlock.getRoomLocks(slug),
+        api.rooms.list(slug),
+        api.workstations.list(slug),
+      ])
+      setConfig(cfg)
+      setIsEnabled(cfg.isEnabled)
+      setClientId(cfg.clientId)
+      setUsername(cfg.ttlockUsername)
+      setWorkstationId(cfg.workstationId ?? '')
+      setMappings(maps)
+      setRooms(roomList)
+      setWorkstations(wsList)
+    } catch {
+      setError('Не удалось загрузить настройки')
+    } finally {
+      setLoading(false)
+    }
+  }, [slug])
+
+  useEffect(() => { load() }, [load])
+
+  const handleSave = async () => {
+    setSaving(true)
+    setError(null)
+    try {
+      await api.ttlock.updateConfig(slug, {
+        isEnabled,
+        clientId:       clientId.trim(),
+        clientSecret:   clientSecret.trim() || undefined,
+        ttlockUsername: username.trim(),
+        ttlockPassword: password.trim() || undefined,
+        workstationId:  workstationId || null,
+      })
+      showSuccess('Настройки сохранены')
+      await load()
+    } catch {
+      setError('Ошибка сохранения')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleTestToken = async () => {
+    setTokenLoading(true)
+    setError(null)
+    try {
+      const r = await api.ttlock.testToken(slug)
+      showSuccess(`Авторизация успешна, токен действителен до ${new Date(r.expiresAt).toLocaleString('ru')}`)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Ошибка авторизации в TTLock')
+    } finally {
+      setTokenLoading(false)
+    }
+  }
+
+  const handleLoadLocks = async () => {
+    setLocksLoading(true)
+    setError(null)
+    try {
+      const list = await api.ttlock.getLocks(slug)
+      setLocks(list)
+      if (list.length === 0) setError('Замки не найдены. Убедитесь, что замки добавлены в аккаунт TTLock.')
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Ошибка загрузки замков')
+    } finally {
+      setLocksLoading(false)
+    }
+  }
+
+  const handleMapRoom = async () => {
+    if (!selectedRoom || !selectedLock) return
+    setMappingLoading(true)
+    try {
+      const lock = locks.find(l => l.lockId === selectedLock)
+      await api.ttlock.mapRoom(slug, {
+        roomId:   selectedRoom,
+        lockId:   selectedLock as number,
+        lockName: lock?.name,
+      })
+      setSelectedRoom('')
+      setSelectedLock('')
+      await load()
+      showSuccess('Замок привязан к номеру')
+    } catch {
+      setError('Ошибка привязки')
+    } finally {
+      setMappingLoading(false)
+    }
+  }
+
+  const handleUnmap = async (roomId: string) => {
+    try {
+      await api.ttlock.unmapRoom(slug, roomId)
+      await load()
+      showSuccess('Привязка удалена')
+    } catch {
+      setError('Ошибка удаления привязки')
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <RefreshCw size={24} className="animate-spin text-brand-600" />
+      </div>
+    )
+  }
+
+  const unmappedRooms = rooms.filter(r => !mappings.some(m => m.roomId === r.id))
+  const onlineWorkstations = workstations.filter(w => w.isOnline)
+
+  return (
+    <div className="max-w-3xl mx-auto p-6 space-y-6">
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
+          <KeyRound size={20} className="text-brand-600 dark:text-brand-400" />
+        </div>
+        <div>
+          <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Электронные замки TTLock</h1>
+          <p className="text-sm text-slate-500">Автоматическая выдача карт-ключей гостям при заезде</p>
+        </div>
+      </div>
+
+      {/* Status messages */}
+      {error && (
+        <div className="flex items-start gap-2 p-4 rounded-xl bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 text-sm">
+          <AlertCircle size={16} className="mt-0.5 shrink-0" />
+          <span>{error}</span>
+          <button className="ml-auto" onClick={() => setError(null)}><X size={14} /></button>
+        </div>
+      )}
+      {success && (
+        <div className="flex items-center gap-2 p-4 rounded-xl bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 text-sm">
+          <Check size={16} />
+          <span>{success}</span>
+        </div>
+      )}
+
+      {/* ── API Credentials ── */}
+      <Section title="Подключение к TTLock Open Platform">
+        <div className="space-y-5">
+          {/* Enable toggle */}
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-slate-800 dark:text-slate-200">Активировать модуль</p>
+              <p className="text-xs text-slate-500 mt-0.5">Включает кнопку «Выдать ключ» в карточке бронирования</p>
+            </div>
+            <button
+              onClick={() => setIsEnabled(e => !e)}
+              className={cn(
+                'relative w-11 h-6 rounded-full transition-colors',
+                isEnabled ? 'bg-brand-500' : 'bg-slate-300 dark:bg-slate-600',
+              )}
+            >
+              <span className={cn(
+                'absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform',
+                isEnabled && 'translate-x-5',
+              )} />
+            </button>
+          </div>
+
+          <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 text-sm text-blue-700 dark:text-blue-300">
+            <p className="font-medium mb-1">Как получить Client ID и Secret</p>
+            <ol className="list-decimal ml-4 space-y-1 text-xs">
+              <li>Зарегистрируйтесь на <strong>euopen.ttlock.com</strong> (EU) или <strong>open.ttlock.com</strong></li>
+              <li>Создайте приложение в разделе «My App»</li>
+              <li>Скопируйте Client ID и Client Secret из настроек приложения</li>
+              <li>Логин/пароль — это ваш аккаунт TTLock (мобильное приложение)</li>
+            </ol>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="form-label">Client ID</label>
+              <input
+                type="text"
+                value={clientId}
+                onChange={e => setClientId(e.target.value)}
+                placeholder="Из TTLock Open Platform"
+                className="input w-full"
+              />
+            </div>
+            <div>
+              <label className="form-label">Client Secret</label>
+              <PasswordInput value={clientSecret} onChange={setClientSecret} placeholder="Оставьте пустым — не изменится" />
+            </div>
+            <div>
+              <label className="form-label">Логин TTLock (email)</label>
+              <input
+                type="email"
+                value={username}
+                onChange={e => setUsername(e.target.value)}
+                placeholder="admin@hotel.ru"
+                className="input w-full"
+              />
+            </div>
+            <div>
+              <label className="form-label">Пароль TTLock</label>
+              <PasswordInput value={password} onChange={setPassword} placeholder="Оставьте пустым — не изменится" />
+            </div>
+          </div>
+
+          {/* Workstation selection */}
+          <div>
+            <label className="form-label">Рабочее место с картридером</label>
+            <select
+              value={workstationId}
+              onChange={e => setWorkstationId(e.target.value)}
+              className="input w-full"
+            >
+              <option value="">— Выберите рабочее место —</option>
+              {workstations.map(w => (
+                <option key={w.id} value={w.id}>
+                  {w.name}
+                  {w.isOnline ? ' ✓ онлайн' : ' ✗ офлайн'}
+                </option>
+              ))}
+            </select>
+            {workstationId && !workstations.find(w => w.id === workstationId)?.isOnline && (
+              <p className="text-xs text-amber-600 mt-1 flex items-center gap-1">
+                <AlertCircle size={12} />
+                Это рабочее место сейчас офлайн. Убедитесь, что агент запущен перед выдачей карт.
+              </p>
+            )}
+            {onlineWorkstations.length === 0 && (
+              <p className="text-xs text-red-500 mt-1">
+                Нет онлайн-рабочих мест. Сначала подключите агент на Windows-компьютере с картридером.
+              </p>
+            )}
+          </div>
+
+          <div className="flex items-center gap-3 pt-2">
+            <button onClick={handleSave} disabled={saving} className="btn-primary flex items-center gap-2">
+              {saving ? <RefreshCw size={15} className="animate-spin" /> : <Save size={15} />}
+              Сохранить
+            </button>
+            <button onClick={handleTestToken} disabled={tokenLoading || !clientId} className="btn-secondary flex items-center gap-2">
+              {tokenLoading ? <RefreshCw size={15} className="animate-spin" /> : <Wifi size={15} />}
+              Проверить подключение
+            </button>
+            {config?.hasToken && (
+              <span className="text-xs text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
+                <Check size={12} /> Токен активен
+              </span>
+            )}
+          </div>
+        </div>
+      </Section>
+
+      {/* ── Room → Lock mapping ── */}
+      <Section title="Привязка номеров к замкам">
+        <div className="space-y-5">
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            Каждому номеру отеля назначается конкретный замок TTLock. При выдаче карты гостю
+            система автоматически определит нужный замок по номеру бронирования.
+          </p>
+
+          {/* Load locks button */}
+          <div className="flex items-center gap-3">
+            <button onClick={handleLoadLocks} disabled={locksLoading || !config?.hasToken} className="btn-secondary flex items-center gap-2">
+              {locksLoading ? <RefreshCw size={15} className="animate-spin" /> : <RefreshCw size={15} />}
+              Загрузить замки из TTLock
+            </button>
+            {locks.length > 0 && (
+              <span className="text-xs text-slate-500">Найдено: {locks.length} замков</span>
+            )}
+            {!config?.hasToken && (
+              <span className="text-xs text-amber-600">Сначала проверьте подключение к TTLock</span>
+            )}
+          </div>
+
+          {/* Add mapping */}
+          {locks.length > 0 && unmappedRooms.length > 0 && (
+            <div className="flex items-end gap-3 p-4 bg-slate-50 dark:bg-slate-800/50 rounded-xl">
+              <div className="flex-1">
+                <label className="form-label">Номер</label>
+                <select value={selectedRoom} onChange={e => setSelectedRoom(e.target.value)} className="input w-full">
+                  <option value="">— Выберите номер —</option>
+                  {unmappedRooms.map(r => (
+                    <option key={r.id} value={r.id}>{r.number} {r.name && `— ${r.name}`}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="flex-1">
+                <label className="form-label">Замок TTLock</label>
+                <select
+                  value={selectedLock}
+                  onChange={e => setSelectedLock(e.target.value ? Number(e.target.value) : '')}
+                  className="input w-full"
+                >
+                  <option value="">— Выберите замок —</option>
+                  {locks.map(l => (
+                    <option key={l.lockId} value={l.lockId}>{l.name} (#{l.lockId})</option>
+                  ))}
+                </select>
+              </div>
+              <button
+                onClick={handleMapRoom}
+                disabled={!selectedRoom || !selectedLock || mappingLoading}
+                className="btn-primary flex items-center gap-2 shrink-0"
+              >
+                {mappingLoading ? <RefreshCw size={15} className="animate-spin" /> : <Plus size={15} />}
+                Привязать
+              </button>
+            </div>
+          )}
+
+          {/* Current mappings */}
+          {mappings.length > 0 ? (
+            <div className="space-y-2">
+              {mappings.map(m => (
+                <div key={m.roomId} className="flex items-center justify-between p-3 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-lg bg-brand-50 dark:bg-brand-900/20 flex items-center justify-center">
+                      <Lock size={14} className="text-brand-600 dark:text-brand-400" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-slate-800 dark:text-slate-200">
+                        Номер {m.roomNumber}{m.roomName ? ` — ${m.roomName}` : ''}
+                      </p>
+                      <p className="text-xs text-slate-500">
+                        {m.lockName ?? `Замок #${m.lockId}`}
+                        <span className="text-slate-400 ml-1">(ID: {m.lockId})</span>
+                      </p>
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => handleUnmap(m.roomId)}
+                    className="btn-ghost p-2 text-red-500 hover:text-red-700"
+                    title="Удалить привязку"
+                  >
+                    <Trash2 size={15} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-slate-400 dark:text-slate-600">
+              <Unlock size={32} className="mx-auto mb-2 opacity-50" />
+              <p className="text-sm">Нет привязанных замков</p>
+              <p className="text-xs mt-1">Загрузите замки из TTLock и привяжите их к номерам</p>
+            </div>
+          )}
+        </div>
+      </Section>
+
+      {/* ── Agent instructions ── */}
+      <Section title="Как работает интеграция (без шлюза)" defaultOpen={false}>
+        <div className="space-y-4 text-sm text-slate-600 dark:text-slate-400">
+          <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 text-blue-800 dark:text-blue-300">
+            <p className="font-medium mb-2">Архитектура для замков без шлюза</p>
+            <p className="text-xs mb-2">
+              USB-программатор E3/E4 от TTLock требует подключения к интернету через шлюз G2/G3.
+              Для автономных замков без шлюза карты программируются через <strong>Bluetooth</strong>:
+              замок запоминает UID карты при непосредственном контакте.
+            </p>
+            <ol className="list-decimal ml-4 space-y-1 text-xs">
+              <li>Менеджер прикладывает карту к считывателю на ресепшен</li>
+              <li>Нажимает «Выдать ключ» в PMS → команда идёт агенту</li>
+              <li>Агент через Bluetooth (адаптер в ПК) подключается к замку</li>
+              <li>Замок считывает UID карты и записывает в свою память с датами доступа</li>
+              <li>Карта работает у двери номера автономно, без интернета</li>
+            </ol>
+          </div>
+
+          <div className="bg-slate-50 dark:bg-slate-800 rounded-lg p-4">
+            <p className="font-medium text-slate-700 dark:text-slate-300 mb-2">Требования к компьютеру ресепшена:</p>
+            <ul className="space-y-1 text-xs list-disc ml-4">
+              <li>Windows 10 или 11</li>
+              <li>Bluetooth-адаптер (для BLE-соединения с замками, радиус ~10м)</li>
+              <li>USB RFID/IC считыватель карт (для чтения UID карты гостя)</li>
+              <li>Агент HotelSync версии 1.1.0 и выше с поддержкой BLE</li>
+              <li>Замки синхронизированы с TTLock-аккаунтом через мобильное приложение</li>
+            </ul>
+          </div>
+
+          <div className="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4 text-amber-700 dark:text-amber-400">
+            <p className="font-medium mb-1">Альтернатива: шлюз G2/G3</p>
+            <p className="text-xs">
+              Если установить шлюз TTLock, карты можно программировать через USB-программатор E3/E4
+              удалённо через облако — без Bluetooth и без физического доступа к замку.
+              Это более надёжный вариант для большого отеля.
+            </p>
+          </div>
+        </div>
+      </Section>
+    </div>
+  )
+}
+
+export default TTLockPage