feat: страница Оборудование — рабочие места, агенты, ККТ и принтеры

- EquipmentPage: CRUD рабочих мест, генерация кода сопряжения с таймером,
  добавление устройств (ККТ/принтер, USB/сеть), онлайн-статус агентов
- api.ts: интерфейсы Workstation, WorkstationDevice + api.workstations.*
- Sidebar: пункт «Оборудование» в группе Настройки

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

src/App.tsx

@@ -41,6 +41,7 @@ import { TvWelcomePage } from './pages/TvWelcomePage'
 import { TechnicalPage } from './pages/TechnicalPage'
 import { SchedulePage } from './pages/SchedulePage'
 import { BillingPage } from './pages/BillingPage'
+import { EquipmentPage } from './pages/EquipmentPage'
 import { ModuleGuard } from './components/ModuleGuard'
 
 export default function App() {
@@ -92,6 +93,7 @@ export default function App() {
                 <Route path="/tv-welcome"     element={<TvWelcomePage />} />
                 <Route path="/technical"      element={<TechnicalPage />} />
                 <Route path="/billing"        element={<BillingPage />} />
+                <Route path="/equipment"      element={<EquipmentPage />} />
               </Route>
 
               <Route path="/" element={<Navigate to="/login" replace />} />

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,
+  TrendingUp, Tag, Award, Wrench, Utensils, CalendarClock, Zap, ChevronRight, Star, CreditCard, Monitor,
 } 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'],
+      settingsGroup:['/modules', '/settings', '/billing', '/equipment'],
       devGroup:     ['/api-docs'],
     }
 
@@ -232,6 +232,7 @@ export function Sidebar({ open, onClose }: SidebarProps) {
     // settings
     { to: '/modules',         icon: Puzzle,         label: 'Модули' },
     { to: '/settings',        icon: Settings,       label: 'Настройки' },
+    { to: '/equipment',       icon: Monitor,        label: 'Оборудование' },
     // dev
     { to: '/api-docs',        icon: FileText,       label: 'API & Документация' },
   ]
@@ -413,6 +414,7 @@ export function Sidebar({ open, onClose }: SidebarProps) {
                       <NavItem to="/modules"    icon={Puzzle}      label="Модули"          {...navItemProps} />
                       <NavItem to="/settings"  icon={Settings}    label="Настройки"       {...navItemProps} />
                       <NavItem to="/billing"   icon={CreditCard}  label="Тарифы и оплата" {...navItemProps} />
+                      <NavItem to="/equipment" icon={Monitor}     label="Оборудование"    {...navItemProps} />
                     </div>
                   )}
                 </>

src/lib/api.ts

@@ -315,6 +315,28 @@ export const api = {
       req<{ room_id: string }>('POST', `/api/hotels/${slug}/chat/direct/${otherUserId}`),
   },
 
+  // ── Workstations ──────────────────────────────────────────────────────────
+  workstations: {
+    list: (slug: string) =>
+      req<Workstation[]>('GET', `/api/hotels/${slug}/workstations`),
+    create: (slug: string, name: string) =>
+      req<Workstation>('POST', `/api/hotels/${slug}/workstations`, { name }),
+    update: (slug: string, id: string, name: string) =>
+      req<Workstation>('PATCH', `/api/hotels/${slug}/workstations/${id}`, { name }),
+    remove: (slug: string, id: string) =>
+      req<void>('DELETE', `/api/hotels/${slug}/workstations/${id}`),
+    pairCode: (slug: string, id: string) =>
+      req<{ code: string; expires_at: string }>('POST', `/api/hotels/${slug}/workstations/${id}/pair-code`),
+    listDevices: (slug: string, id: string) =>
+      req<WorkstationDevice[]>('GET', `/api/hotels/${slug}/workstations/${id}/devices`),
+    addDevice: (slug: string, id: string, data: Partial<WorkstationDevice>) =>
+      req<WorkstationDevice>('POST', `/api/hotels/${slug}/workstations/${id}/devices`, data),
+    updateDevice: (slug: string, id: string, deviceId: string, data: Partial<WorkstationDevice>) =>
+      req<WorkstationDevice>('PATCH', `/api/hotels/${slug}/workstations/${id}/devices/${deviceId}`, data),
+    removeDevice: (slug: string, id: string, deviceId: string) =>
+      req<void>('DELETE', `/api/hotels/${slug}/workstations/${id}/devices/${deviceId}`),
+  },
+
   // ── Hotels ────────────────────────────────────────────────────────────────
   hotels: {
     get: (slug: string) =>
@@ -945,6 +967,31 @@ export interface ChatMessage {
   createdAt: string
 }
 
+export interface WorkstationDevice {
+  id: string
+  workstationId: string
+  type: 'kkt' | 'printer'
+  name: string
+  connection: 'usb' | 'network'
+  networkHost?: string
+  networkPort?: number
+  purpose: 'fiscal' | 'kitchen' | 'bar' | 'receipt' | 'other'
+  config: Record<string, unknown>
+}
+
+export interface Workstation {
+  id: string
+  hotelId: string
+  agentId: string | null
+  name: string
+  hostname: string | null
+  ipAddress: string | null
+  isOnline: boolean
+  lastSeen: string | null
+  createdAt: string
+  devices: WorkstationDevice[] | null
+}
+
 function toHotelPayload(h: HotelPayload): Record<string, unknown> {
   const out: Record<string, unknown> = {}
   if (h.name         !== undefined) out.name           = h.name

src/pages/EquipmentPage.tsx

@@ -0,0 +1,630 @@
+import { useState, useEffect, useCallback } from 'react'
+import {
+  Monitor, Plus, Trash2, Pencil, Check, X, RefreshCw,
+  Wifi, WifiOff, Printer, CreditCard, Usb, Network,
+  ChevronDown, ChevronRight, Copy, Clock, AlertCircle,
+} from 'lucide-react'
+import { cn } from '../lib/utils'
+import { api, type Workstation, type WorkstationDevice } from '../lib/api'
+import { useAuth } from '../contexts/AuthContext'
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const PURPOSE_LABELS: Record<string, string> = {
+  fiscal:  'Фискальный чек',
+  kitchen: 'Принтер кухни',
+  bar:     'Принтер бара',
+  receipt: 'Чек / квитанция',
+  other:   'Другое',
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  kkt:     'ККТ (касса)',
+  printer: 'Принтер',
+}
+
+function OnlineBadge({ online, lastSeen }: { online: boolean; lastSeen: string | null }) {
+  if (online) {
+    return (
+      <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
+        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+        Онлайн
+      </span>
+    )
+  }
+  const ago = lastSeen
+    ? (() => {
+        const diff = Date.now() - new Date(lastSeen).getTime()
+        const m = Math.floor(diff / 60000)
+        if (m < 60)  return `${m} мин назад`
+        const h = Math.floor(m / 60)
+        if (h < 24)  return `${h} ч назад`
+        return `${Math.floor(h / 24)} дн назад`
+      })()
+    : null
+
+  return (
+    <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400">
+      <span className="w-1.5 h-1.5 rounded-full bg-slate-400" />
+      {ago ? `Был ${ago}` : 'Нет связи'}
+    </span>
+  )
+}
+
+// ─── Pair Code Modal ──────────────────────────────────────────────────────────
+
+function PairCodeModal({
+  workstation,
+  slug,
+  onClose,
+}: {
+  workstation: Workstation
+  slug: string
+  onClose: () => void
+}) {
+  const [code, setCode] = useState<string | null>(null)
+  const [expiresAt, setExpiresAt] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [copied, setCopied] = useState(false)
+  const [timeLeft, setTimeLeft] = useState(600)
+
+  useEffect(() => {
+    api.workstations.pairCode(slug, workstation.id).then(r => {
+      setCode(r.code)
+      setExpiresAt(r.expires_at)
+      setLoading(false)
+    })
+  }, [slug, workstation.id])
+
+  useEffect(() => {
+    if (!expiresAt) return
+    const tick = setInterval(() => {
+      const left = Math.max(0, Math.floor((new Date(expiresAt).getTime() - Date.now()) / 1000))
+      setTimeLeft(left)
+      if (left === 0) clearInterval(tick)
+    }, 1000)
+    return () => clearInterval(tick)
+  }, [expiresAt])
+
+  const copy = () => {
+    if (!code) return
+    navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const mm = String(Math.floor(timeLeft / 60)).padStart(2, '0')
+  const ss = String(timeLeft % 60).padStart(2, '0')
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md p-8">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
+            Подключить агента
+          </h2>
+          <button onClick={onClose} className="btn-ghost p-1.5"><X size={16} /></button>
+        </div>
+
+        <p className="text-sm text-slate-600 dark:text-slate-400 mb-6">
+          Рабочее место: <span className="font-semibold text-slate-900 dark:text-slate-100">{workstation.name}</span>
+        </p>
+
+        {loading ? (
+          <div className="flex justify-center py-8">
+            <RefreshCw size={24} className="animate-spin text-brand-600" />
+          </div>
+        ) : (
+          <>
+            <div className="bg-slate-50 dark:bg-slate-900 rounded-xl p-6 text-center mb-4">
+              <p className="text-xs text-slate-500 mb-3 uppercase tracking-wide font-medium">Код подключения</p>
+              <div className="flex items-center justify-center gap-3">
+                <span className="text-5xl font-mono font-bold tracking-[0.3em] text-slate-900 dark:text-slate-100">
+                  {code?.slice(0, 3)}&thinsp;{code?.slice(3)}
+                </span>
+                <button onClick={copy} className="btn-ghost p-2 text-slate-400">
+                  {copied ? <Check size={16} className="text-emerald-500" /> : <Copy size={16} />}
+                </button>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-center gap-2 text-sm mb-6">
+              <Clock size={14} className={cn('text-slate-400', timeLeft < 60 && 'text-red-500')} />
+              <span className={cn('font-mono font-medium', timeLeft < 60 ? 'text-red-500' : 'text-slate-600 dark:text-slate-400')}>
+                {mm}:{ss}
+              </span>
+              <span className="text-slate-500">до истечения</span>
+            </div>
+
+            <ol className="text-sm text-slate-600 dark:text-slate-400 space-y-2 list-decimal list-inside">
+              <li>Установите <strong>HotelSync Agent</strong> на компьютер</li>
+              <li>Запустите — появится форма ввода кода</li>
+              <li>Введите код выше и нажмите «Подключить»</li>
+            </ol>
+          </>
+        )}
+
+        <button onClick={onClose} className="mt-6 w-full btn-secondary py-2.5">
+          Закрыть
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// ─── Device Form ──────────────────────────────────────────────────────────────
+
+function DeviceForm({
+  initial,
+  onSave,
+  onCancel,
+}: {
+  initial?: Partial<WorkstationDevice>
+  onSave: (data: Partial<WorkstationDevice>) => Promise<void>
+  onCancel: () => void
+}) {
+  const [type, setType]               = useState<'kkt' | 'printer'>(initial?.type ?? 'printer')
+  const [name, setName]               = useState(initial?.name ?? '')
+  const [connection, setConnection]   = useState<'usb' | 'network'>(initial?.connection ?? 'network')
+  const [networkHost, setNetworkHost] = useState(initial?.networkHost ?? '')
+  const [networkPort, setNetworkPort] = useState(String(initial?.networkPort ?? 9100))
+  const [purpose, setPurpose]         = useState(initial?.purpose ?? 'receipt')
+  const [saving, setSaving]           = useState(false)
+
+  const handleSave = async () => {
+    if (!name.trim()) return
+    setSaving(true)
+    await onSave({
+      type,
+      name: name.trim(),
+      connection,
+      networkHost:  connection === 'network' ? networkHost.trim() : undefined,
+      networkPort:  connection === 'network' ? Number(networkPort) : undefined,
+      purpose: purpose as WorkstationDevice['purpose'],
+    })
+    setSaving(false)
+  }
+
+  return (
+    <div className="border border-brand-200 dark:border-brand-800 rounded-xl p-4 bg-brand-50/30 dark:bg-brand-900/10 space-y-3">
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-xs font-medium text-slate-500 mb-1">Тип устройства</label>
+          <select
+            value={type}
+            onChange={e => setType(e.target.value as 'kkt' | 'printer')}
+            className="w-full input-field text-sm"
+          >
+            <option value="kkt">ККТ (касса)</option>
+            <option value="printer">Принтер</option>
+          </select>
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-slate-500 mb-1">Назначение</label>
+          <select
+            value={purpose}
+            onChange={e => setPurpose(e.target.value)}
+            className="w-full input-field text-sm"
+          >
+            {Object.entries(PURPOSE_LABELS).map(([k, v]) => (
+              <option key={k} value={k}>{v}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-xs font-medium text-slate-500 mb-1">Название</label>
+        <input
+          value={name}
+          onChange={e => setName(e.target.value)}
+          className="w-full input-field text-sm"
+          placeholder="Касса №1 / Принтер кухни"
+        />
+      </div>
+
+      <div>
+        <label className="block text-xs font-medium text-slate-500 mb-1">Подключение</label>
+        <div className="flex gap-2">
+          {(['usb', 'network'] as const).map(c => (
+            <button
+              key={c}
+              onClick={() => setConnection(c)}
+              className={cn(
+                'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
+                connection === c
+                  ? 'bg-brand-600 border-brand-600 text-white'
+                  : 'border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:border-brand-400',
+              )}
+            >
+              {c === 'usb' ? <Usb size={14} /> : <Network size={14} />}
+              {c === 'usb' ? 'USB' : 'Сеть (TCP)'}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {connection === 'network' && (
+        <div className="grid grid-cols-3 gap-3">
+          <div className="col-span-2">
+            <label className="block text-xs font-medium text-slate-500 mb-1">IP адрес / хост</label>
+            <input
+              value={networkHost}
+              onChange={e => setNetworkHost(e.target.value)}
+              className="w-full input-field text-sm font-mono"
+              placeholder="192.168.1.50"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-slate-500 mb-1">Порт</label>
+            <input
+              value={networkPort}
+              onChange={e => setNetworkPort(e.target.value)}
+              className="w-full input-field text-sm font-mono"
+              placeholder="9100"
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="flex gap-2 pt-1">
+        <button
+          onClick={handleSave}
+          disabled={saving || !name.trim()}
+          className="btn-primary py-1.5 px-4 text-sm"
+        >
+          {saving ? 'Сохранение...' : 'Сохранить'}
+        </button>
+        <button onClick={onCancel} className="btn-secondary py-1.5 px-4 text-sm">
+          Отмена
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// ─── Workstation Card ─────────────────────────────────────────────────────────
+
+function WorkstationCard({
+  ws,
+  slug,
+  onRefresh,
+}: {
+  ws: Workstation
+  slug: string
+  onRefresh: () => void
+}) {
+  const [expanded, setExpanded]           = useState(true)
+  const [editing, setEditing]             = useState(false)
+  const [name, setName]                   = useState(ws.name)
+  const [showPairModal, setShowPairModal] = useState(false)
+  const [showAddDevice, setShowAddDevice] = useState(false)
+  const [editDeviceId, setEditDeviceId]   = useState<string | null>(null)
+
+  const saveName = async () => {
+    if (!name.trim() || name === ws.name) { setEditing(false); return }
+    await api.workstations.update(slug, ws.id, name.trim())
+    setEditing(false)
+    onRefresh()
+  }
+
+  const deleteWs = async () => {
+    if (!confirm(`Удалить рабочее место «${ws.name}»?`)) return
+    await api.workstations.remove(slug, ws.id)
+    onRefresh()
+  }
+
+  const addDevice = async (data: Partial<WorkstationDevice>) => {
+    await api.workstations.addDevice(slug, ws.id, data)
+    setShowAddDevice(false)
+    onRefresh()
+  }
+
+  const updateDevice = async (deviceId: string, data: Partial<WorkstationDevice>) => {
+    await api.workstations.updateDevice(slug, ws.id, deviceId, data)
+    setEditDeviceId(null)
+    onRefresh()
+  }
+
+  const deleteDevice = async (deviceId: string) => {
+    if (!confirm('Удалить устройство?')) return
+    await api.workstations.removeDevice(slug, ws.id, deviceId)
+    onRefresh()
+  }
+
+  const devices = ws.devices ?? []
+
+  return (
+    <>
+      <div className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center gap-3 px-5 py-4">
+          <button onClick={() => setExpanded(v => !v)} className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
+            {expanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+          </button>
+
+          <div className="w-9 h-9 rounded-xl bg-slate-100 dark:bg-slate-700 flex items-center justify-center shrink-0">
+            <Monitor size={18} className="text-slate-600 dark:text-slate-300" />
+          </div>
+
+          <div className="flex-1 min-w-0">
+            {editing ? (
+              <div className="flex items-center gap-2">
+                <input
+                  value={name}
+                  onChange={e => setName(e.target.value)}
+                  onKeyDown={e => { if (e.key === 'Enter') saveName(); if (e.key === 'Escape') setEditing(false) }}
+                  className="input-field py-1 text-sm w-48"
+                  autoFocus
+                />
+                <button onClick={saveName} className="btn-ghost p-1 text-emerald-600"><Check size={14} /></button>
+                <button onClick={() => { setEditing(false); setName(ws.name) }} className="btn-ghost p-1"><X size={14} /></button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <span className="font-semibold text-slate-900 dark:text-slate-100 truncate">{ws.name}</span>
+                <button onClick={() => setEditing(true)} className="btn-ghost p-1 opacity-0 group-hover:opacity-100 text-slate-400">
+                  <Pencil size={12} />
+                </button>
+              </div>
+            )}
+            {ws.hostname && (
+              <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{ws.hostname} {ws.ipAddress ? `· ${ws.ipAddress}` : ''}</p>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2 shrink-0">
+            <OnlineBadge online={ws.isOnline} lastSeen={ws.lastSeen} />
+
+            {!ws.agentId ? (
+              <button
+                onClick={() => setShowPairModal(true)}
+                className="btn-primary py-1.5 px-3 text-xs flex items-center gap-1.5"
+              >
+                <Wifi size={13} />
+                Подключить агента
+              </button>
+            ) : (
+              <button
+                onClick={() => setShowPairModal(true)}
+                className="btn-ghost p-1.5 text-slate-400"
+                title="Переподключить агента"
+              >
+                <RefreshCw size={14} />
+              </button>
+            )}
+
+            <button onClick={deleteWs} className="btn-ghost p-1.5 text-slate-400 hover:text-red-500">
+              <Trash2 size={14} />
+            </button>
+          </div>
+        </div>
+
+        {/* Devices */}
+        {expanded && (
+          <div className="border-t border-slate-100 dark:border-slate-700 px-5 py-4 space-y-2">
+            {devices.length === 0 && !showAddDevice && (
+              <p className="text-sm text-slate-400 dark:text-slate-500 text-center py-2">
+                Устройства не добавлены
+              </p>
+            )}
+
+            {devices.map(device => (
+              <div key={device.id}>
+                {editDeviceId === device.id ? (
+                  <DeviceForm
+                    initial={device}
+                    onSave={data => updateDevice(device.id, data)}
+                    onCancel={() => setEditDeviceId(null)}
+                  />
+                ) : (
+                  <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-slate-50 dark:bg-slate-700/50 group">
+                    <div className={cn(
+                      'w-7 h-7 rounded-lg flex items-center justify-center shrink-0',
+                      device.type === 'kkt' ? 'bg-violet-100 dark:bg-violet-900/40' : 'bg-blue-100 dark:bg-blue-900/40',
+                    )}>
+                      {device.type === 'kkt'
+                        ? <CreditCard size={13} className="text-violet-600 dark:text-violet-400" />
+                        : <Printer size={13} className="text-blue-600 dark:text-blue-400" />
+                      }
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-slate-900 dark:text-slate-100">{device.name}</p>
+                      <div className="flex items-center gap-2 mt-0.5">
+                        <span className="text-xs text-slate-500">{PURPOSE_LABELS[device.purpose]}</span>
+                        <span className="text-slate-300 dark:text-slate-600">·</span>
+                        <span className="inline-flex items-center gap-1 text-xs text-slate-500">
+                          {device.connection === 'usb' ? <Usb size={10} /> : <Network size={10} />}
+                          {device.connection === 'usb' ? 'USB' : `${device.networkHost}:${device.networkPort}`}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <button onClick={() => setEditDeviceId(device.id)} className="btn-ghost p-1.5 text-slate-400">
+                        <Pencil size={12} />
+                      </button>
+                      <button onClick={() => deleteDevice(device.id)} className="btn-ghost p-1.5 text-slate-400 hover:text-red-500">
+                        <Trash2 size={12} />
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+
+            {showAddDevice ? (
+              <DeviceForm
+                onSave={addDevice}
+                onCancel={() => setShowAddDevice(false)}
+              />
+            ) : (
+              <button
+                onClick={() => setShowAddDevice(true)}
+                className="w-full flex items-center justify-center gap-1.5 py-2 text-sm text-brand-600 hover:text-brand-700 hover:bg-brand-50 dark:hover:bg-brand-900/20 rounded-xl transition-colors"
+              >
+                <Plus size={14} />
+                Добавить устройство
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {showPairModal && (
+        <PairCodeModal
+          workstation={ws}
+          slug={slug}
+          onClose={() => { setShowPairModal(false); onRefresh() }}
+        />
+      )}
+    </>
+  )
+}
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+export function EquipmentPage() {
+  const { user } = useAuth()
+  const slug = user?.hotelSlug ?? ''
+
+  const [workstations, setWorkstations] = useState<Workstation[]>([])
+  const [loading, setLoading]           = useState(true)
+  const [error, setError]               = useState<string | null>(null)
+  const [addingName, setAddingName]     = useState('')
+  const [showAdd, setShowAdd]           = useState(false)
+  const [adding, setAdding]             = useState(false)
+
+  const load = useCallback(async () => {
+    if (!slug) return
+    try {
+      const data = await api.workstations.list(slug)
+      setWorkstations(data)
+      setError(null)
+    } catch {
+      setError('Не удалось загрузить данные')
+    } finally {
+      setLoading(false)
+    }
+  }, [slug])
+
+  useEffect(() => { load() }, [load])
+
+  const handleAdd = async () => {
+    if (!addingName.trim()) return
+    setAdding(true)
+    await api.workstations.create(slug, addingName.trim())
+    setAddingName('')
+    setShowAdd(false)
+    setAdding(false)
+    load()
+  }
+
+  const online  = workstations.filter(w => w.isOnline).length
+  const total   = workstations.length
+  const noPairs = workstations.filter(w => !w.agentId).length
+
+  return (
+    <div className="p-6 max-w-3xl mx-auto space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Оборудование</h1>
+          <p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
+            Рабочие места, кассы и принтеры
+          </p>
+        </div>
+        <button
+          onClick={() => setShowAdd(true)}
+          className="btn-primary flex items-center gap-2 py-2 px-4"
+        >
+          <Plus size={16} />
+          Новое рабочее место
+        </button>
+      </div>
+
+      {/* Stats */}
+      {total > 0 && (
+        <div className="grid grid-cols-3 gap-4">
+          {[
+            { label: 'Рабочих мест', value: total, icon: Monitor, color: 'text-slate-600 dark:text-slate-400' },
+            { label: 'Онлайн',       value: online, icon: Wifi,    color: 'text-emerald-600' },
+            { label: 'Не настроено', value: noPairs, icon: WifiOff, color: noPairs > 0 ? 'text-amber-600' : 'text-slate-400' },
+          ].map(s => (
+            <div key={s.label} className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 px-4 py-3 flex items-center gap-3">
+              <s.icon size={20} className={s.color} />
+              <div>
+                <p className="text-xl font-bold text-slate-900 dark:text-slate-100">{s.value}</p>
+                <p className="text-xs text-slate-500">{s.label}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Add form */}
+      {showAdd && (
+        <div className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 p-5">
+          <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-3">Новое рабочее место</h3>
+          <div className="flex gap-3">
+            <input
+              value={addingName}
+              onChange={e => setAddingName(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') handleAdd(); if (e.key === 'Escape') setShowAdd(false) }}
+              className="flex-1 input-field"
+              placeholder="Ресепшн 1 / Бар / Касса SPA"
+              autoFocus
+            />
+            <button onClick={handleAdd} disabled={adding || !addingName.trim()} className="btn-primary px-5">
+              {adding ? 'Создание...' : 'Создать'}
+            </button>
+            <button onClick={() => setShowAdd(false)} className="btn-secondary px-4">Отмена</button>
+          </div>
+        </div>
+      )}
+
+      {/* Content */}
+      {loading ? (
+        <div className="space-y-4">
+          {[1,2].map(i => (
+            <div key={i} className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 h-24 animate-pulse" />
+          ))}
+        </div>
+      ) : error ? (
+        <div className="flex items-center gap-3 p-4 bg-red-50 dark:bg-red-900/20 rounded-xl text-red-600 dark:text-red-400">
+          <AlertCircle size={16} />
+          <span className="text-sm">{error}</span>
+        </div>
+      ) : workstations.length === 0 ? (
+        <div className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 p-12 text-center">
+          <Monitor size={40} className="mx-auto text-slate-300 dark:text-slate-600 mb-3" />
+          <p className="font-medium text-slate-600 dark:text-slate-400 mb-1">Рабочих мест пока нет</p>
+          <p className="text-sm text-slate-400 dark:text-slate-500">
+            Создайте рабочее место и подключите к нему агент Windows
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4 group">
+          {workstations.map(ws => (
+            <WorkstationCard key={ws.id} ws={ws} slug={slug} onRefresh={load} />
+          ))}
+        </div>
+      )}
+
+      {/* Info block */}
+      <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4 flex gap-3">
+        <AlertCircle size={16} className="text-blue-500 shrink-0 mt-0.5" />
+        <div className="text-sm text-blue-700 dark:text-blue-300">
+          <p className="font-medium mb-1">Как подключить агента</p>
+          <ol className="space-y-0.5 text-blue-600 dark:text-blue-400 list-decimal list-inside">
+            <li>Создайте рабочее место и нажмите «Подключить агента»</li>
+            <li>Получите 6-значный код (действует 10 минут)</li>
+            <li>Установите HotelSync Agent на компьютер и введите код</li>
+            <li>Добавьте кассы и принтеры к рабочему месту</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  )
+}