Refactor POS/Reviews/RoomService/BookingWidget/BookingModal

- POS: complete rewrite — shift management + room payments (not products); ATOL placeholder; room balance sidebar; receipts log
- BookingModal: remove "Источник" field; restructure layout (notes+summary as bottom full-width row, eliminating scroll)
- Reviews: negative (<2 stars = <4/10) → moderation with private manager reply; positive → redirect to external platforms (Booking.com, Яндекс, Google); new tabs: "Требуют ответа" / "Перенаправить"
- RoomService: add orderType (room delivery / restaurant table); service charge % for room delivery; scheduledTime for restaurant; paymentStatus (online_paid / pending); settings tab
- BookingWidget: complete redesign — live widget constructor with color picker, language, rooms+rental tabs, payment provider selector; live preview; install code tab

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

src/components/bookings/BookingModal.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react'
 import { format } from 'date-fns'
 import { Star, Banknote, CreditCard, AlertCircle, Map } from 'lucide-react'
 import { Modal } from '../ui/Modal'
-import { cn, BOOKING_STATUS_LABELS, SOURCE_LABELS } from '../../lib/utils'
+import { cn, BOOKING_STATUS_LABELS } from '../../lib/utils'
-import type { Booking, DraftBooking, Room, BookingStatus, BookingSource } from '../../types'
+import type { Booking, DraftBooking, Room, BookingStatus } from '../../types'
 import { FloorMapModal } from '../floormap/FloorMapModal'
 
 const GUEST_TAGS = ['VIP', 'Постоянный гость', 'Корпоративный', 'Медовый месяц', 'День рождения', 'Особые пожелания']
@@ -28,7 +28,6 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
     checkOut:  existing?.checkOut   ?? draft.checkOut,
     adults:    existing?.adults     ?? 2,
     children:  existing?.children   ?? 0,
-    source:        (existing?.source    ?? 'direct') as BookingSource,
     status:    (existing?.status    ?? 'confirmed') as BookingStatus,
     notes:     existing?.notes      ?? '',
   })
@@ -79,6 +78,7 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
 
     onSave({
       ...form,
+      source: 'direct',
       checkIn,
       checkOut,
       notes: hourlyPrefix + form.notes,
@@ -109,9 +109,10 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
           </>
         }
       >
+        <div className="space-y-4">
         <div className="flex gap-6">
           {/* ── LEFT COLUMN ── */}
-          <div className="flex-1 space-y-4 min-w-0">
+          <div className="flex-1 space-y-3 min-w-0">
             {/* Room */}
             <div>
               <div className="flex items-center justify-between mb-1.5">
@@ -271,9 +272,9 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
             )}
 
             {/* Adults + Children + Status */}
-            <div className="grid grid-cols-3 gap-3">
+            <div className="grid grid-cols-3 gap-2">
               <div>
-                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                   Взрослых
                 </label>
                 <input
@@ -312,7 +313,7 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
           </div>
 
           {/* ── RIGHT COLUMN ── */}
-          <div className="flex-1 space-y-4 min-w-0">
+          <div className="flex-1 space-y-3 min-w-0">
             {/* Guest tags */}
             <div>
               <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
@@ -344,30 +345,6 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
               </div>
             </div>
 
-            {/* Source */}
-            <div>
-              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
-                Источник
-              </label>
-              <div className="flex flex-wrap gap-2">
-                {(Object.entries(SOURCE_LABELS) as [BookingSource, string][]).map(([k, v]) => (
-                  <button
-                    key={k}
-                    type="button"
-                    onClick={() => set('source', k)}
-                    className={cn(
-                      'px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
-                      form.source === k
-                        ? 'bg-brand-600 text-white border-brand-600'
-                        : 'bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600 hover:border-brand-400',
-                    )}
-                  >
-                    {v}
-                  </button>
-                ))}
-              </div>
-            </div>
-
             {/* Payment */}
             {total > 0 && (
               <div className="rounded-xl border border-slate-200 dark:border-slate-600 overflow-hidden">
@@ -423,8 +400,12 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
               </div>
             )}
 
-            {/* Notes */}
+          </div>
-            <div>
+        </div>
+
+        {/* ── BOTTOM ROW: Notes + Summary ── */}
+        <div className="flex gap-6">
+          <div className="flex-1">
             <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
               Примечания
             </label>
@@ -436,16 +417,14 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
               onChange={e => set('notes', e.target.value)}
             />
           </div>
-
-            {/* Summary */}
           {total > 0 && room && (
-              <div className="rounded-xl bg-slate-50 dark:bg-slate-700/50 px-4 py-3 space-y-1.5">
+            <div className="flex-1 rounded-xl bg-slate-50 dark:bg-slate-700/50 px-4 py-3 space-y-1.5 self-end">
               {isHourly && room.allowHourly ? (
                 <div className="flex items-center justify-between">
                   <span className="text-sm text-slate-600 dark:text-slate-300">
                     {hourlyHours} {hourlyHours === 1 ? 'час' : hourlyHours < 5 ? 'часа' : 'часов'} × {(room.hourlyRate ?? 0).toLocaleString('ru-RU')} ₽
                   </span>
-                    <span className="text-lg font-bold text-slate-900 dark:text-slate-100">
+                  <span className="text-xl font-bold text-slate-900 dark:text-slate-100">
                     {total.toLocaleString('ru-RU')} ₽
                   </span>
                 </div>
@@ -454,7 +433,7 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
                   <span className="text-sm text-slate-600 dark:text-slate-300">
                     {nights} {nights === 1 ? 'ночь' : nights < 5 ? 'ночи' : 'ночей'} × {room.baseRate.toLocaleString('ru-RU')} ₽
                   </span>
-                    <span className="text-lg font-bold text-slate-900 dark:text-slate-100">
+                  <span className="text-xl font-bold text-slate-900 dark:text-slate-100">
                     {total.toLocaleString('ru-RU')} ₽
                   </span>
                 </div>

src/pages/BookingWidgetPage.tsx

@@ -1,57 +1,544 @@
-import { CalendarCheck2, Code2, CreditCard, Globe } from 'lucide-react'
+import { useState } from 'react'
+import {
+  Code2, CreditCard, Globe, Palette, CalendarCheck2, Copy, CheckCheck,
+  ChevronLeft, ChevronRight, Star, Users, Dumbbell, Waves,
+  Eye, Settings2, ArrowRight,
+} from 'lucide-react'
+import { cn } from '../lib/utils'
+import { useModules } from '../contexts/ModulesContext'
 
-export function BookingWidgetPage() {
+// ── Widget settings type ───────────────────────────────────────────────────────
-  const snippet = `<script src="https://widget.hotelsync.ru/v1/embed.js"
+
-  data-hotel="grand-palace"
+interface WidgetSettings {
-  data-lang="ru">
+  hotelName: string
-</script>`
+  primaryColor: string
+  language: 'ru' | 'en'
+  showRooms: boolean
+  showRental: boolean
+  minNights: number
+  paymentProvider: 'yukassa' | 'tinkoff' | 'cloudpayments' | 'none'
+  showPromo: boolean
+}
+
+const COLORS = [
+  { label: 'Индиго',    value: '#4F46E5' },
+  { label: 'Изумруд',   value: '#059669' },
+  { label: 'Синий',     value: '#2563EB' },
+  { label: 'Фиолетовый',value: '#7C3AED' },
+  { label: 'Красный',   value: '#DC2626' },
+  { label: 'Янтарный',  value: '#D97706' },
+  { label: 'Розовый',   value: '#DB2777' },
+  { label: 'Серый',     value: '#475569' },
+]
+
+const PAYMENT_PROVIDERS = [
+  { value: 'yukassa',      label: 'ЮKassa' },
+  { value: 'tinkoff',      label: 'Тинькофф Pay' },
+  { value: 'cloudpayments',label: 'CloudPayments' },
+  { value: 'none',         label: 'Без оплаты' },
+]
+
+const MOCK_ROOMS = [
+  { id: 'r1', name: 'Стандарт',   beds: 1, guests: 2, price: 4500,  img: '🛏️' },
+  { id: 'r2', name: 'Комфорт',    beds: 1, guests: 2, price: 6500,  img: '🛏️' },
+  { id: 'r3', name: 'Делюкс',     beds: 2, guests: 3, price: 8900,  img: '🛏️' },
+  { id: 'r4', name: 'Пентхаус',   beds: 2, guests: 4, price: 15000, img: '🌇' },
+]
+
+const MOCK_RENTAL = [
+  { id: 'o1', name: 'Теннисный корт', icon: '🎾', price: 1200, unit: 'ч' },
+  { id: 'o2', name: 'Сауна',          icon: '🧖', price: 2500, unit: 'ч' },
+  { id: 'o3', name: 'Банкетный зал',  icon: '🎪', price: 15000, unit: 'день' },
+]
+
+// ── Widget Preview Component ───────────────────────────────────────────────────
+
+function WidgetPreview({ settings }: { settings: WidgetSettings }) {
+  const [previewTab, setPreviewTab] = useState<'rooms' | 'rental'>('rooms')
+  const [checkIn,  setCheckIn]  = useState('2026-03-20')
+  const [checkOut, setCheckOut] = useState('2026-03-22')
+  const [guests,   setGuests]   = useState(2)
+  const [selected, setSelected] = useState<string | null>(null)
+
+  const nights = checkIn && checkOut
+    ? Math.max(0, (new Date(checkOut).getTime() - new Date(checkIn).getTime()) / 86400000)
+    : 0
 
   return (
-    <div className="p-6 max-w-4xl mx-auto space-y-6">
+    <div className="bg-white rounded-2xl shadow-2xl overflow-hidden border border-slate-200" style={{ fontFamily: 'Inter, sans-serif' }}>
+      {/* Widget header */}
+      <div className="px-6 py-4 text-white" style={{ background: settings.primaryColor }}>
+        <p className="font-bold text-lg">{settings.hotelName || 'Название отеля'}</p>
+        <p className="text-sm opacity-80">
+          {settings.language === 'ru' ? 'Бронирование онлайн · Без комиссии' : 'Book directly · No fees'}
+        </p>
+      </div>
+
+      {/* Tabs */}
+      {settings.showRooms && settings.showRental && (
+        <div className="flex border-b border-slate-200">
+          {[
+            ['rooms',  settings.language === 'ru' ? 'Номера'   : 'Rooms'],
+            ['rental', settings.language === 'ru' ? 'Аренда'   : 'Rental'],
+          ].map(([key, label]) => (
+            <button
+              key={key}
+              onClick={() => setPreviewTab(key as any)}
+              className={cn(
+                'flex-1 py-3 text-sm font-medium border-b-2 transition-colors',
+                previewTab === key
+                  ? 'border-b-2 text-slate-900'
+                  : 'border-transparent text-slate-500 hover:text-slate-700',
+              )}
+              style={previewTab === key ? { borderColor: settings.primaryColor, color: settings.primaryColor } : {}}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Search bar */}
+      {previewTab === 'rooms' && (
+        <div className="px-5 py-4 bg-slate-50 border-b border-slate-200">
+          <div className="grid grid-cols-3 gap-3">
+            <div>
+              <label className="block text-xs text-slate-500 mb-1">
+                {settings.language === 'ru' ? 'Заезд' : 'Check-in'}
+              </label>
+              <input
+                type="date"
+                value={checkIn}
+                onChange={e => setCheckIn(e.target.value)}
+                className="w-full text-sm border border-slate-200 rounded-lg px-2.5 py-1.5 bg-white focus:outline-none"
+                style={{ '--focus-color': settings.primaryColor } as any}
+              />
+            </div>
+            <div>
+              <label className="block text-xs text-slate-500 mb-1">
+                {settings.language === 'ru' ? 'Выезд' : 'Check-out'}
+              </label>
+              <input
+                type="date"
+                value={checkOut}
+                onChange={e => setCheckOut(e.target.value)}
+                className="w-full text-sm border border-slate-200 rounded-lg px-2.5 py-1.5 bg-white focus:outline-none"
+              />
+            </div>
+            <div>
+              <label className="block text-xs text-slate-500 mb-1">
+                {settings.language === 'ru' ? 'Гостей' : 'Guests'}
+              </label>
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => setGuests(g => Math.max(1, g - 1))}
+                  className="w-7 h-7 rounded-lg border border-slate-200 flex items-center justify-center hover:bg-slate-100 text-slate-700"
+                >
+                  <ChevronLeft size={14} />
+                </button>
+                <span className="flex-1 text-center text-sm font-medium">{guests}</span>
+                <button
+                  onClick={() => setGuests(g => Math.min(8, g + 1))}
+                  className="w-7 h-7 rounded-lg border border-slate-200 flex items-center justify-center hover:bg-slate-100 text-slate-700"
+                >
+                  <ChevronRight size={14} />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Rooms list */}
+      {previewTab === 'rooms' && (
+        <div className="p-4 space-y-3 max-h-80 overflow-y-auto">
+          {nights > 0 && (
+            <p className="text-xs text-slate-500">
+              {nights} {nights === 1 ? 'ночь' : nights < 5 ? 'ночи' : 'ночей'} · {guests} {settings.language === 'ru' ? 'гостя' : 'guests'}
+            </p>
+          )}
+          {MOCK_ROOMS.map(room => (
+            <div
+              key={room.id}
+              onClick={() => setSelected(room.id)}
+              className={cn(
+                'flex items-center gap-4 p-3 rounded-xl border-2 cursor-pointer transition-all',
+                selected === room.id ? 'border-2' : 'border-slate-200 hover:border-slate-300',
+              )}
+              style={selected === room.id ? { borderColor: settings.primaryColor, background: settings.primaryColor + '08' } : {}}
+            >
+              <div className="w-14 h-14 rounded-xl bg-slate-100 flex items-center justify-center text-2xl shrink-0">
+                {room.img}
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="font-semibold text-slate-900">{room.name}</p>
+                <div className="flex items-center gap-2 mt-0.5">
+                  <span className="text-xs text-slate-500 flex items-center gap-0.5">
+                    <Users size={10} />{room.guests}
+                  </span>
+                  <span className="text-xs text-slate-500 flex items-center gap-0.5">
+                    <Star size={10} className="fill-amber-400 text-amber-400" />4.8
+                  </span>
+                </div>
+              </div>
+              <div className="text-right shrink-0">
+                <p className="font-bold text-slate-900">
+                  {nights > 0
+                    ? (room.price * nights).toLocaleString('ru-RU')
+                    : room.price.toLocaleString('ru-RU')
+                  } ₽
+                </p>
+                <p className="text-xs text-slate-400">
+                  {nights > 0 ? `за ${nights} ноч.` : 'за ночь'}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Rental list */}
+      {previewTab === 'rental' && (
+        <div className="p-4 space-y-3">
+          <p className="text-xs text-slate-500">Выберите объект и удобное время</p>
+          {MOCK_RENTAL.map(obj => (
+            <div
+              key={obj.id}
+              onClick={() => setSelected(obj.id)}
+              className={cn(
+                'flex items-center gap-4 p-3 rounded-xl border-2 cursor-pointer transition-all',
+                selected === obj.id ? '' : 'border-slate-200 hover:border-slate-300',
+              )}
+              style={selected === obj.id ? { borderColor: settings.primaryColor, background: settings.primaryColor + '08' } : {}}
+            >
+              <div className="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center text-2xl shrink-0">
+                {obj.icon}
+              </div>
+              <div className="flex-1">
+                <p className="font-semibold text-slate-900">{obj.name}</p>
+              </div>
+              <div className="text-right">
+                <p className="font-bold text-slate-900">{obj.price.toLocaleString('ru-RU')} ₽</p>
+                <p className="text-xs text-slate-400">/{obj.unit}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* CTA */}
+      <div className="px-5 pb-5">
+        <button
+          className="w-full py-3 rounded-xl text-white font-semibold text-sm transition-opacity hover:opacity-90"
+          style={{ background: settings.primaryColor }}
+        >
+          {settings.language === 'ru' ? 'Забронировать' : 'Book now'}
+          {selected && nights > 0 && previewTab === 'rooms' && (() => {
+            const r = MOCK_ROOMS.find(r => r.id === selected)
+            return r ? ` · ${(r.price * nights).toLocaleString('ru-RU')} ₽` : ''
+          })()}
+        </button>
+        {settings.showPromo && (
+          <p className="text-center text-xs text-slate-400 mt-2">
+            {settings.language === 'ru' ? 'Лучшая цена гарантирована' : 'Best rate guaranteed'}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ── Main Page ──────────────────────────────────────────────────────────────────
+
+export function BookingWidgetPage() {
+  const { statuses } = useModules()
+  const rentalActive = statuses['rental'] === 'active' || statuses['rental'] === 'trial'
+
+  const [settings, setSettings] = useState<WidgetSettings>({
+    hotelName:       'Grand Palace Hotel',
+    primaryColor:    '#4F46E5',
+    language:        'ru',
+    showRooms:       true,
+    showRental:      rentalActive,
+    minNights:       1,
+    paymentProvider: 'yukassa',
+    showPromo:       true,
+  })
+  const [copied, setCopied] = useState(false)
+  const [pageTab, setPageTab] = useState<'constructor' | 'code' | 'stats'>('constructor')
+
+  const set = <K extends keyof WidgetSettings>(k: K, v: WidgetSettings[K]) =>
+    setSettings(prev => ({ ...prev, [k]: v }))
+
+  const snippet = `<script src="https://widget.hotelsync.ru/v1/embed.js"
+  data-hotel="grand-palace"
+  data-color="${settings.primaryColor}"
+  data-lang="${settings.language}"
+  data-rental="${settings.showRental}"
+  data-min-nights="${settings.minNights}"
+  data-payment="${settings.paymentProvider}">
+</script>`
+
+  const copyCode = () => {
+    navigator.clipboard.writeText(snippet).catch(() => {})
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="p-4 md:p-6 space-y-5">
+      {/* Header */}
       <div className="flex items-center gap-3">
         <div className="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center shrink-0">
           <CalendarCheck2 size={20} className="text-white" />
         </div>
         <div>
-          <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Онлайн-бронирование</h1>
+          <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Виджет онлайн-бронирования</h1>
-          <p className="text-sm text-slate-500 dark:text-slate-400">Виджет прямых продаж для сайта отеля</p>
+          <p className="text-sm text-slate-500 dark:text-slate-400">Конструктор виджета для размещения на сайте отеля</p>
         </div>
       </div>
 
-      {/* Stats */}
+      {/* Tabs */}
-      <div className="grid grid-cols-3 gap-3">
+      <div className="flex gap-1 p-1 bg-slate-100 dark:bg-slate-700/50 rounded-xl w-fit">
-        {[
+        {([
-          { label: 'Бронирований через виджет', value: '—', sub: 'нет данных' },
+          ['constructor', <Settings2 size={13} />, 'Конструктор'],
-          { label: 'Конверсия',                  value: '—', sub: 'нет данных' },
+          ['code',        <Code2 size={13} />,     'Код установки'],
-          { label: 'Прямая выручка',             value: '—', sub: 'нет данных' },
+          ['stats',       <Eye size={13} />,        'Статистика'],
-        ].map(s => (
+        ] as const).map(([key, icon, label]) => (
-          <div key={s.label} className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 text-center">
+          <button
-            <p className="text-2xl font-bold text-slate-400">{s.value}</p>
+            key={key}
-            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 leading-tight">{s.label}</p>
+            onClick={() => setPageTab(key)}
-          </div>
+            className={cn(
+              'flex items-center gap-1.5 px-4 py-1.5 rounded-lg text-sm font-medium transition-colors',
+              pageTab === key
+                ? 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-sm'
+                : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200',
+            )}
+          >
+            {icon}{label}
+          </button>
         ))}
       </div>
 
-      {/* Embed code */}
+      {/* ── Constructor ── */}
-      <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-5 space-y-3">
+      {pageTab === 'constructor' && (
+        <div className="grid lg:grid-cols-2 gap-6">
+          {/* Settings panel */}
+          <div className="space-y-4">
+            <div className="card p-5 space-y-4">
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100">Внешний вид</h3>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+                  Название отеля в виджете
+                </label>
+                <input
+                  type="text"
+                  className="input"
+                  value={settings.hotelName}
+                  onChange={e => set('hotelName', e.target.value)}
+                  placeholder="Grand Palace Hotel"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                  Основной цвет
+                </label>
+                <div className="flex flex-wrap gap-2">
+                  {COLORS.map(c => (
+                    <button
+                      key={c.value}
+                      onClick={() => set('primaryColor', c.value)}
+                      title={c.label}
+                      className={cn(
+                        'w-8 h-8 rounded-full border-2 transition-transform',
+                        settings.primaryColor === c.value ? 'border-slate-900 dark:border-slate-100 scale-110' : 'border-transparent',
+                      )}
+                      style={{ background: c.value }}
+                    />
+                  ))}
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="color"
+                      value={settings.primaryColor}
+                      onChange={e => set('primaryColor', e.target.value)}
+                      className="w-8 h-8 rounded-full cursor-pointer border-0 p-0 bg-transparent"
+                    />
+                    <span className="text-xs text-slate-500 font-mono">{settings.primaryColor}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Язык</label>
+                <div className="flex gap-2">
+                  {([['ru', '🇷🇺 Русский'], ['en', '🇬🇧 English']] as const).map(([k, l]) => (
+                    <button
+                      key={k}
+                      onClick={() => set('language', k)}
+                      className={cn(
+                        'px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
+                        settings.language === k
+                          ? 'bg-brand-600 text-white border-brand-600'
+                          : 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300',
+                      )}
+                    >
+                      {l}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="card p-5 space-y-4">
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100">Что показывать</h3>
+
+              <div className="space-y-2.5">
+                <label className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+                    <CalendarCheck2 size={15} className="text-indigo-500" />
+                    Бронирование номеров
+                  </div>
+                  <input
+                    type="checkbox"
+                    checked={settings.showRooms}
+                    onChange={e => set('showRooms', e.target.checked)}
+                    className="rounded"
+                  />
+                </label>
+
+                {rentalActive && (
+                  <label className="flex items-center justify-between">
+                    <div className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+                      <Dumbbell size={15} className="text-emerald-500" />
+                      Аренда объектов (корт, сауна и т.д.)
+                    </div>
+                    <input
+                      type="checkbox"
+                      checked={settings.showRental}
+                      onChange={e => set('showRental', e.target.checked)}
+                      className="rounded"
+                    />
+                  </label>
+                )}
+
+                <label className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+                    <Star size={15} className="text-amber-500" />
+                    Плашка "Лучшая цена гарантирована"
+                  </div>
+                  <input
+                    type="checkbox"
+                    checked={settings.showPromo}
+                    onChange={e => set('showPromo', e.target.checked)}
+                    className="rounded"
+                  />
+                </label>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+                  Минимальное кол-во ночей
+                </label>
+                <input
+                  type="number"
+                  min={1}
+                  max={30}
+                  className="input w-24"
+                  value={settings.minNights}
+                  onChange={e => set('minNights', Math.max(1, parseInt(e.target.value) || 1))}
+                />
+              </div>
+            </div>
+
+            <div className="card p-5 space-y-3">
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
+                <CreditCard size={16} className="text-emerald-600" />
+                Онлайн-оплата
+              </h3>
+              <div className="grid grid-cols-2 gap-2">
+                {PAYMENT_PROVIDERS.map(p => (
+                  <button
+                    key={p.value}
+                    onClick={() => set('paymentProvider', p.value as any)}
+                    className={cn(
+                      'px-3 py-2 rounded-xl text-sm font-medium border transition-colors text-left',
+                      settings.paymentProvider === p.value
+                        ? 'bg-brand-600 text-white border-brand-600'
+                        : 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:border-brand-400',
+                    )}
+                  >
+                    {p.label}
+                  </button>
+                ))}
+              </div>
+              {settings.paymentProvider !== 'none' && (
+                <p className="text-xs text-slate-500 dark:text-slate-400">
+                  Настройте ключи API в разделе Настройки → Оплата
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* Live preview */}
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <Eye size={14} className="text-slate-400" />
+              <p className="text-sm font-medium text-slate-700 dark:text-slate-300">Предпросмотр виджета</p>
+            </div>
+            <div className="p-6 rounded-2xl bg-slate-100 dark:bg-slate-700/50">
+              <WidgetPreview settings={settings} />
+            </div>
+            <p className="text-xs text-slate-400 mt-2 text-center">Так виджет будет выглядеть на сайте отеля</p>
+          </div>
+        </div>
+      )}
+
+      {/* ── Code ── */}
+      {pageTab === 'code' && (
+        <div className="max-w-2xl space-y-5">
+          <div className="card p-5 space-y-3">
+            <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <Code2 size={16} className="text-indigo-500" />
                 <h3 className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Код для вставки на сайт</h3>
               </div>
-        <pre className="bg-slate-900 text-emerald-400 text-xs rounded-lg p-4 overflow-x-auto font-mono leading-relaxed">
+              <button
+                onClick={copyCode}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-600 text-xs font-medium text-slate-700 dark:text-slate-300 hover:border-brand-400 transition-colors"
+              >
+                {copied ? <CheckCheck size={12} className="text-emerald-600" /> : <Copy size={12} />}
+                {copied ? 'Скопировано' : 'Копировать'}
+              </button>
+            </div>
+            <pre className="bg-slate-900 text-emerald-400 text-xs rounded-xl p-4 overflow-x-auto font-mono leading-relaxed">
               {snippet}
             </pre>
-        <button className="btn-secondary text-sm">Скопировать код</button>
           </div>
 
-      {/* Features */}
+          <div className="card p-5 space-y-3">
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+            <h3 className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Инструкция по установке</h3>
+            {[
+              { step: '1', text: 'Скопируйте код выше' },
+              { step: '2', text: 'Вставьте перед закрывающим тегом </body> на страницах, где хотите показать виджет' },
+              { step: '3', text: 'Виджет автоматически добавит кнопку "Забронировать" или встроится в нужный блок' },
+              { step: '4', text: 'Настройте цвета и параметры в конструкторе — изменения применяются сразу' },
+            ].map(s => (
+              <div key={s.step} className="flex items-start gap-3">
+                <span className="w-6 h-6 rounded-full bg-indigo-600 text-white text-xs font-bold flex items-center justify-center shrink-0">{s.step}</span>
+                <p className="text-sm text-slate-600 dark:text-slate-400 pt-0.5">{s.text}</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-3 gap-3">
             {[
               { icon: CalendarCheck2, title: 'Мгновенное подтверждение', desc: 'Email + SMS гостю' },
-          { icon: CreditCard,     title: 'Онлайн-оплата',            desc: 'Тинькофф, СБП, ЮKassa' },
+              { icon: CreditCard,     title: 'Онлайн-оплата',            desc: 'ЮKassa, Тинькофф, СБП' },
-          { icon: Globe,          title: 'Без комиссии OTA',          desc: 'Только платёжная комиссия' },
+              { icon: Globe,          title: 'Без комиссии OTA',          desc: 'Только платёжная комиссия ~1.5%' },
             ].map(f => (
-          <div key={f.title} className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 text-center">
+              <div key={f.title} className="card p-4 text-center">
                 <f.icon size={22} className="text-indigo-500 mx-auto mb-2" />
                 <p className="font-medium text-slate-900 dark:text-slate-100 text-sm">{f.title}</p>
                 <p className="text-xs text-slate-400 mt-0.5">{f.desc}</p>
@@ -59,5 +546,39 @@ export function BookingWidgetPage() {
             ))}
           </div>
         </div>
+      )}
+
+      {/* ── Stats ── */}
+      {pageTab === 'stats' && (
+        <div className="max-w-2xl">
+          <div className="grid grid-cols-3 gap-3 mb-5">
+            {[
+              { label: 'Бронирований через виджет', value: '—', sub: 'нет данных' },
+              { label: 'Конверсия посетителей',      value: '—', sub: 'нет данных' },
+              { label: 'Прямая выручка',             value: '—', sub: 'нет данных' },
+            ].map(s => (
+              <div key={s.label} className="card p-4 text-center">
+                <p className="text-2xl font-bold text-slate-400">{s.value}</p>
+                <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 leading-tight">{s.label}</p>
+              </div>
+            ))}
+          </div>
+          <div className="card p-6 text-center">
+            <Waves size={40} className="mx-auto mb-3 text-slate-300" />
+            <p className="font-semibold text-slate-700 dark:text-slate-300">Статистика появится после установки виджета</p>
+            <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
+              Разместите виджет на сайте и подключите к нему первые бронирования
+            </p>
+            <button
+              onClick={() => setPageTab('code')}
+              className="btn-primary mt-4"
+            >
+              <ArrowRight size={14} />
+              Получить код установки
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
   )
 }

src/pages/PosPage.tsx

@@ -1,7 +1,8 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect } from 'react'
 import {
-  ShoppingCart, Plus, Minus, Trash2, CreditCard, Banknote, X,
+  CreditCard, Banknote, Clock, LogIn, LogOut, CheckCircle2,
-  Clock, TrendingUp, Receipt, LogIn, LogOut, ChevronRight, CheckCircle2,
+  Receipt, Zap, Building2, Coffee, Car, Package, ChevronRight,
+  User, AlertCircle, Printer,
 } from 'lucide-react'
 import { format } from 'date-fns'
 import { ru } from 'date-fns/locale'
@@ -9,88 +10,61 @@ import { cn, formatCurrency } from '../lib/utils'
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
-interface PosProduct {
+interface RoomBalance {
-  id: string
+  roomId: string
-  name: string
+  roomNumber: string
-  price: number
+  guestName: string
-  category: string
+  checkIn: string
-  emoji: string
+  checkOut: string
+  totalAmount: number
+  paidAmount: number
+  nights: number
 }
 
-interface CartItem {
+type PaymentMethod = 'cash' | 'terminal' | 'atol'
-  product: PosProduct
+type ChargePurpose = 'stay' | 'breakfast' | 'transfer' | 'parking' | 'extra'
-  qty: number
-}
 
-interface PosReceipt {
+interface ReceiptRecord {
   id: string
-  items: CartItem[]
+  roomNumber: string
-  total: number
+  guestName: string
-  method: 'cash' | 'terminal'
+  purposeLabel: string
+  amount: number
+  method: PaymentMethod
   createdAt: Date
   shiftId: string
 }
 
-// ── Mock data ─────────────────────────────────────────────────────────────────
+// ── Mock data ──────────────────────────────────────────────────────────────────
 
-const CATEGORIES = ['Еда', 'Напитки', 'Услуги', 'Прочее']
+const MOCK_BALANCES: RoomBalance[] = [
-
+  { roomId: 'r1', roomNumber: '101', guestName: 'Дмитрий Волков',      checkIn: '2026-03-10', checkOut: '2026-03-12', totalAmount: 9000,  paidAmount: 4500,  nights: 2 },
-const PRODUCTS: PosProduct[] = [
+  { roomId: 'r2', roomNumber: '201', guestName: 'Игорь Соколов',       checkIn: '2026-03-09', checkOut: '2026-03-11', totalAmount: 14000, paidAmount: 14000, nights: 2 },
-  // Еда
+  { roomId: 'r3', roomNumber: '301', guestName: 'Наталья Александрова',checkIn: '2026-03-11', checkOut: '2026-03-15', totalAmount: 48000, paidAmount: 24000, nights: 4 },
-  { id: 'p1',  name: 'Завтрак',         price: 650,  category: 'Еда',     emoji: '🍳' },
+  { roomId: 'r4', roomNumber: '401', guestName: 'Михаил Орлов',        checkIn: '2026-03-10', checkOut: '2026-03-13', totalAmount: 36000, paidAmount: 0,     nights: 3 },
-  { id: 'p2',  name: 'Обед',            price: 950,  category: 'Еда',     emoji: '🍽️' },
-  { id: 'p3',  name: 'Ужин',            price: 1100, category: 'Еда',     emoji: '🍷' },
-  { id: 'p4',  name: 'Бизнес-ланч',     price: 750,  category: 'Еда',     emoji: '🥗' },
-  // Напитки
-  { id: 'p5',  name: 'Вода 0.5л',       price: 120,  category: 'Напитки', emoji: '💧' },
-  { id: 'p6',  name: 'Кофе эспрессо',   price: 180,  category: 'Напитки', emoji: '☕' },
-  { id: 'p7',  name: 'Чай',             price: 150,  category: 'Напитки', emoji: '🍵' },
-  { id: 'p8',  name: 'Сок апельсиновый',price: 250,  category: 'Напитки', emoji: '🍊' },
-  { id: 'p9',  name: 'Мини-бар пиво',   price: 350,  category: 'Напитки', emoji: '🍺' },
-  // Услуги
-  { id: 'p10', name: 'Трансфер в/из аэропорта', price: 2500, category: 'Услуги', emoji: '🚖' },
-  { id: 'p11', name: 'Прачечная',        price: 800,  category: 'Услуги', emoji: '👕' },
-  { id: 'p12', name: 'Экскурсия',        price: 3500, category: 'Услуги', emoji: '🗺️' },
-  { id: 'p13', name: 'Парковка/день',    price: 500,  category: 'Услуги', emoji: '🅿️' },
-  { id: 'p14', name: 'Аренда велосипеда',price: 400,  category: 'Услуги', emoji: '🚲' },
-  // Прочее
-  { id: 'p15', name: 'Зубная щётка',    price: 80,   category: 'Прочее', emoji: '🪥' },
-  { id: 'p16', name: 'Тапочки',         price: 150,  category: 'Прочее', emoji: '🩴' },
-  { id: 'p17', name: 'Зарядное USB',    price: 200,  category: 'Прочее', emoji: '🔌' },
-  { id: 'p18', name: 'Сувенир',         price: 450,  category: 'Прочее', emoji: '🎁' },
 ]
 
-const SEED_RECEIPTS: PosReceipt[] = [
+const PURPOSE_LABELS: Record<ChargePurpose, string> = {
-  {
+  stay:      'Проживание',
-    id: 'rc1',
+  breakfast: 'Завтрак',
-    items: [
+  transfer:  'Трансфер',
-      { product: PRODUCTS[0], qty: 2 },
+  parking:   'Парковка',
-      { product: PRODUCTS[5], qty: 2 },
+  extra:     'Доп. услуга',
-    ],
+}
-    total: 1660,
+
-    method: 'terminal',
+const QUICK_CHARGES: { purpose: ChargePurpose; label: string; amount: number | null; Icon: any }[] = [
-    createdAt: new Date(Date.now() - 3600000 * 2),
+  { purpose: 'stay',      label: 'Проживание',  amount: null,  Icon: Building2 },
-    shiftId: 'shift-today',
+  { purpose: 'breakfast', label: 'Завтрак',     amount: 650,   Icon: Coffee },
-  },
+  { purpose: 'transfer',  label: 'Трансфер',    amount: 2500,  Icon: Car },
-  {
+  { purpose: 'parking',   label: 'Парковка',    amount: 500,   Icon: Package },
-    id: 'rc2',
+  { purpose: 'extra',     label: 'Доп. услуга', amount: null,  Icon: Zap },
-    items: [{ product: PRODUCTS[9], qty: 1 }],
+]
-    total: 2500,
+
-    method: 'cash',
+const SEED_RECEIPTS: ReceiptRecord[] = [
-    createdAt: new Date(Date.now() - 3600000),
+  { id: 'rc1', roomNumber: '201', guestName: 'Игорь Соколов',         purposeLabel: 'Проживание', amount: 14000, method: 'terminal', createdAt: new Date(Date.now() - 3600000 * 3), shiftId: 'shift-today' },
-    shiftId: 'shift-today',
+  { id: 'rc2', roomNumber: '101', guestName: 'Дмитрий Волков',        purposeLabel: 'Проживание', amount: 4500,  method: 'cash',     createdAt: new Date(Date.now() - 3600000 * 2), shiftId: 'shift-today' },
-  },
+  { id: 'rc3', roomNumber: '301', guestName: 'Наталья Александрова',  purposeLabel: 'Проживание', amount: 24000, method: 'terminal', createdAt: new Date(Date.now() - 3600000),     shiftId: 'shift-today' },
-  {
+  { id: 'rc4', roomNumber: '101', guestName: 'Дмитрий Волков',        purposeLabel: 'Завтрак',    amount: 1300,  method: 'cash',     createdAt: new Date(Date.now() - 1800000),     shiftId: 'shift-today' },
-    id: 'rc3',
-    items: [
-      { product: PRODUCTS[1], qty: 1 },
-      { product: PRODUCTS[4], qty: 2 },
-    ],
-    total: 1190,
-    method: 'terminal',
-    createdAt: new Date(Date.now() - 1800000),
-    shiftId: 'shift-today',
-  },
 ]
 
 // ── Component ─────────────────────────────────────────────────────────────────
@@ -99,13 +73,26 @@ export function PosPage() {
   const [shiftOpen, setShiftOpen] = useState(true)
   const [shiftStartTime] = useState<Date>(new Date(Date.now() - 3600000 * 3))
   const [shiftTimer, setShiftTimer] = useState('')
-  const [category, setCategory] = useState('Еда')
+  const [receipts, setReceipts] = useState<ReceiptRecord[]>(SEED_RECEIPTS)
-  const [cart, setCart] = useState<CartItem[]>([])
+  const [selectedRoom, setSelectedRoom] = useState<RoomBalance | null>(MOCK_BALANCES[0])
-  const [receipts, setReceipts] = useState<PosReceipt[]>(SEED_RECEIPTS)
+  const [purpose, setPurpose] = useState<ChargePurpose>('stay')
-  const [payMethod, setPayMethod] = useState<'cash' | 'terminal'>('terminal')
+  const [amount, setAmount] = useState<number>(0)
-  const [lastReceipt, setLastReceipt] = useState<PosReceipt | null>(null)
+  const [method, setMethod] = useState<PaymentMethod>('terminal')
+  const [notes, setNotes] = useState('')
+  const [lastReceipt, setLastReceipt] = useState<ReceiptRecord | null>(null)
   const shiftId = 'shift-today'
 
+  // Update amount when room or purpose changes
+  useEffect(() => {
+    if (!selectedRoom) { setAmount(0); return }
+    if (purpose === 'stay') {
+      setAmount(Math.max(0, selectedRoom.totalAmount - selectedRoom.paidAmount))
+    } else {
+      const qc = QUICK_CHARGES.find(q => q.purpose === purpose)
+      setAmount(qc?.amount ?? 0)
+    }
+  }, [selectedRoom, purpose])
+
   // Shift timer
   useEffect(() => {
     if (!shiftOpen) return
@@ -121,48 +108,34 @@ export function PosPage() {
     return () => clearInterval(id)
   }, [shiftOpen, shiftStartTime])
 
-  const cartTotal = cart.reduce((s, i) => s + i.product.price * i.qty, 0)
   const shiftReceipts = receipts.filter(r => r.shiftId === shiftId)
-  const shiftRevenue = shiftReceipts.reduce((s, r) => s + r.total, 0)
+  const shiftRevenue  = shiftReceipts.reduce((s, r) => s + r.amount, 0)
-  const cashRevenue  = shiftReceipts.filter(r => r.method === 'cash').reduce((s, r) => s + r.total, 0)
+  const cashRevenue   = shiftReceipts.filter(r => r.method === 'cash').reduce((s, r) => s + r.amount, 0)
-  const termRevenue  = shiftReceipts.filter(r => r.method === 'terminal').reduce((s, r) => s + r.total, 0)
+  const termRevenue   = shiftReceipts.filter(r => r.method === 'terminal').reduce((s, r) => s + r.amount, 0)
-
-  const addToCart = (p: PosProduct) => {
-    setCart(prev => {
-      const ex = prev.find(i => i.product.id === p.id)
-      if (ex) return prev.map(i => i.product.id === p.id ? { ...i, qty: i.qty + 1 } : i)
-      return [...prev, { product: p, qty: 1 }]
-    })
-  }
-
-  const changeQty = (id: string, delta: number) => {
-    setCart(prev =>
-      prev.map(i => i.product.id === id ? { ...i, qty: Math.max(1, i.qty + delta) } : i),
-    )
-  }
-
-  const removeItem = (id: string) => setCart(prev => prev.filter(i => i.product.id !== id))
 
   const handlePay = () => {
-    if (cart.length === 0 || !shiftOpen) return
+    if (!selectedRoom || amount <= 0 || !shiftOpen) return
-    const receipt: PosReceipt = {
+    const rec: ReceiptRecord = {
       id: `rc-${Date.now()}`,
-      items: cart,
+      roomNumber:   selectedRoom.roomNumber,
-      total: cartTotal,
+      guestName:    selectedRoom.guestName,
-      method: payMethod,
+      purposeLabel: PURPOSE_LABELS[purpose],
+      amount,
+      method,
       createdAt: new Date(),
       shiftId,
     }
-    setReceipts(prev => [receipt, ...prev])
+    setReceipts(prev => [rec, ...prev])
-    setLastReceipt(receipt)
+    setLastReceipt(rec)
-    setCart([])
+    setNotes('')
   }
 
-  const filteredProducts = PRODUCTS.filter(p => p.category === category)
+  const balance = selectedRoom ? Math.max(0, selectedRoom.totalAmount - selectedRoom.paidAmount) : 0
+  const isPaid  = selectedRoom ? selectedRoom.paidAmount >= selectedRoom.totalAmount : false
 
   return (
     <div className="flex h-full flex-col">
-      {/* Top bar */}
+      {/* ── Top bar ── */}
       <div className="shrink-0 px-4 py-3 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800">
         <div className="flex items-center justify-between flex-wrap gap-2">
           <div>
@@ -171,15 +144,11 @@ export function PosPage() {
               {format(new Date(), 'd MMMM yyyy', { locale: ru })} · Елена Смирнова
             </p>
           </div>
-
           <div className="flex items-center gap-3">
-            {/* Shift timer */}
             {shiftOpen && (
               <div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-700">
                 <Clock size={13} className="text-emerald-600" />
-                <span className="text-xs font-mono font-semibold text-emerald-700 dark:text-emerald-300">
+                <span className="text-xs font-mono font-semibold text-emerald-700 dark:text-emerald-300">{shiftTimer}</span>
-                  {shiftTimer}
-                </span>
               </div>
             )}
             <button
@@ -202,7 +171,7 @@ export function PosPage() {
             {[
               { label: 'Выручка за смену',   value: formatCurrency(shiftRevenue), color: 'text-slate-900 dark:text-slate-100' },
               { label: 'Наличные',            value: formatCurrency(cashRevenue),  color: 'text-emerald-600 dark:text-emerald-400' },
-              { label: 'Терминал',          value: formatCurrency(termRevenue),  color: 'text-blue-600 dark:text-blue-400' },
+              { label: 'Терминал / АТОЛ',     value: formatCurrency(termRevenue),  color: 'text-blue-600 dark:text-blue-400' },
               { label: 'Чеков',               value: shiftReceipts.length,         color: 'text-slate-900 dark:text-slate-100' },
             ].map(s => (
               <div key={s.label} className="rounded-xl bg-slate-50 dark:bg-slate-700/50 px-3 py-2">
@@ -214,194 +183,267 @@ export function PosPage() {
         )}
       </div>
 
+      {/* ── Shift closed ── */}
       {!shiftOpen ? (
         <div className="flex-1 flex items-center justify-center flex-col gap-4 text-slate-400">
-          <ShoppingCart size={56} className="opacity-20" />
+          <Receipt size={56} className="opacity-20" />
           <div className="text-center">
             <p className="text-lg font-semibold text-slate-600 dark:text-slate-300">Смена закрыта</p>
             <p className="text-sm">Откройте смену для начала работы</p>
           </div>
-          <button
+          <button onClick={() => setShiftOpen(true)} className="btn-primary">
-            onClick={() => setShiftOpen(true)}
+            <LogIn size={15} />Открыть смену
-            className="btn-primary"
-          >
-            <LogIn size={15} />
-            Открыть смену
           </button>
         </div>
       ) : (
         <div className="flex flex-1 overflow-hidden">
-          {/* Left — product catalog */}
-          <div className="flex flex-col flex-1 overflow-hidden border-r border-slate-200 dark:border-slate-700">
-            {/* Category tabs */}
-            <div className="shrink-0 flex gap-1 px-4 py-2.5 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800">
-              {CATEGORIES.map(cat => (
-                <button
-                  key={cat}
-                  onClick={() => setCategory(cat)}
-                  className={cn(
-                    'px-3 py-1.5 rounded-lg text-sm font-medium transition-colors',
-                    category === cat
-                      ? 'bg-brand-600 text-white'
-                      : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700',
-                  )}
-                >
-                  {cat}
-                </button>
-              ))}
-            </div>
 
-            {/* Products grid */}
+          {/* ── Left: active bookings ── */}
-            <div className="flex-1 overflow-y-auto p-4">
+          <div className="w-64 flex flex-col border-r border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 shrink-0 overflow-y-auto">
-              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+            <div className="px-3 py-2.5 border-b border-slate-200 dark:border-slate-700">
-                {filteredProducts.map(p => (
+              <p className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">
-                  <button
+                Активные заезды
-                    key={p.id}
-                    onClick={() => addToCart(p)}
-                    className="card p-3 text-left hover:shadow-md hover:border-brand-300 dark:hover:border-brand-600 transition-all active:scale-95 group"
-                  >
-                    <span className="text-2xl block mb-1.5">{p.emoji}</span>
-                    <p className="text-sm font-medium text-slate-800 dark:text-slate-200 leading-tight">{p.name}</p>
-                    <p className="text-sm font-bold text-brand-600 dark:text-brand-400 mt-1">{formatCurrency(p.price)}</p>
-                    <div className="mt-1.5 w-full h-7 rounded-lg bg-brand-50 dark:bg-brand-900/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-                      <Plus size={14} className="text-brand-600" />
-                    </div>
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Recent receipts */}
-            <div className="shrink-0 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
-              <div className="px-4 py-2 flex items-center justify-between">
-                <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Последние чеки</p>
-                <span className="text-xs text-slate-400">{shiftReceipts.length} за смену</span>
-              </div>
-              <div className="overflow-x-auto">
-                <div className="flex gap-2 px-4 pb-3" style={{ minWidth: 'max-content' }}>
-                  {shiftReceipts.slice(0, 6).map(r => (
-                    <div key={r.id} className="flex-shrink-0 w-40 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-2.5">
-                      <div className="flex items-center justify-between mb-1">
-                        <span className="text-[10px] text-slate-400">{format(r.createdAt, 'HH:mm')}</span>
-                        {r.method === 'cash' ? <Banknote size={11} className="text-emerald-600" /> : <CreditCard size={11} className="text-blue-600" />}
-                      </div>
-                      <p className="text-sm font-bold text-slate-900 dark:text-slate-100">{formatCurrency(r.total)}</p>
-                      <p className="text-[10px] text-slate-400">{r.items.length} поз.</p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Right — cart */}
-          <div className="w-80 flex flex-col bg-white dark:bg-slate-800 shrink-0">
-            <div className="px-4 py-3 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between">
-              <p className="font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
-                <Receipt size={16} />
-                Текущий чек
               </p>
-              {cart.length > 0 && (
+            </div>
-                <button onClick={() => setCart([])} className="text-xs text-red-500 hover:text-red-700">
+            <div className="flex-1 p-2 space-y-1.5">
-                  Очистить
+              {MOCK_BALANCES.map(rb => {
+                const debt = Math.max(0, rb.totalAmount - rb.paidAmount)
+                const paid = debt === 0
+                const sel  = selectedRoom?.roomId === rb.roomId
+                return (
+                  <button
+                    key={rb.roomId}
+                    onClick={() => setSelectedRoom(rb)}
+                    className={cn(
+                      'w-full text-left rounded-xl p-3 border transition-all',
+                      sel
+                        ? 'border-brand-400 bg-brand-50 dark:bg-brand-900/20 dark:border-brand-600'
+                        : 'border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 hover:border-brand-300',
+                    )}
+                  >
+                    <div className="flex items-center justify-between mb-1">
+                      <span className="text-sm font-bold text-slate-900 dark:text-slate-100">№{rb.roomNumber}</span>
+                      {paid
+                        ? <span className="text-[10px] bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 px-1.5 py-0.5 rounded-full font-medium">Оплачен</span>
+                        : <span className="text-[10px] bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 px-1.5 py-0.5 rounded-full font-medium">Долг</span>
+                      }
+                    </div>
+                    <p className="text-xs text-slate-600 dark:text-slate-400 truncate">{rb.guestName}</p>
+                    <p className="text-xs text-slate-400 mt-0.5">
+                      {rb.checkIn} → {rb.checkOut}
+                    </p>
+                    {!paid && (
+                      <p className="text-xs font-semibold text-red-600 dark:text-red-400 mt-1.5">
+                        Остаток: {formatCurrency(debt)}
+                      </p>
+                    )}
                   </button>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* ── Center: payment form ── */}
+          <div className="flex-1 flex flex-col overflow-y-auto p-5 gap-5">
+            {selectedRoom ? (
+              <>
+                {/* Guest info */}
+                <div className="card p-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center shrink-0">
+                      <User size={18} className="text-brand-600 dark:text-brand-400" />
+                    </div>
+                    <div className="flex-1">
+                      <p className="font-semibold text-slate-900 dark:text-slate-100">{selectedRoom.guestName}</p>
+                      <p className="text-xs text-slate-500 dark:text-slate-400">
+                        Номер {selectedRoom.roomNumber} · {selectedRoom.nights} {selectedRoom.nights === 1 ? 'ночь' : selectedRoom.nights < 5 ? 'ночи' : 'ночей'}
+                      </p>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-xs text-slate-500 dark:text-slate-400">К оплате</p>
+                      <p className={cn(
+                        'text-lg font-bold',
+                        isPaid ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400',
+                      )}>
+                        {formatCurrency(balance)}
+                      </p>
+                    </div>
+                  </div>
+                  {/* Balance bar */}
+                  <div className="mt-3">
+                    <div className="flex items-center justify-between text-xs text-slate-500 mb-1">
+                      <span>Оплачено {formatCurrency(selectedRoom.paidAmount)}</span>
+                      <span>Всего {formatCurrency(selectedRoom.totalAmount)}</span>
+                    </div>
+                    <div className="h-2 rounded-full bg-slate-200 dark:bg-slate-600 overflow-hidden">
+                      <div
+                        className="h-full rounded-full bg-emerald-500 transition-all"
+                        style={{ width: `${Math.min(100, (selectedRoom.paidAmount / selectedRoom.totalAmount) * 100)}%` }}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Quick charge buttons */}
+                <div>
+                  <p className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-2">Назначение платежа</p>
+                  <div className="grid grid-cols-5 gap-2">
+                    {QUICK_CHARGES.map(qc => (
+                      <button
+                        key={qc.purpose}
+                        onClick={() => setPurpose(qc.purpose)}
+                        className={cn(
+                          'flex flex-col items-center gap-1.5 p-3 rounded-xl border-2 text-xs font-medium transition-all',
+                          purpose === qc.purpose
+                            ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
+                            : 'border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:border-brand-300',
+                        )}
+                      >
+                        <qc.Icon size={18} />
+                        {qc.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Amount */}
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Сумма (₽)</label>
+                  <input
+                    type="number"
+                    min={0}
+                    className="input text-2xl font-bold h-14 w-full"
+                    value={amount || ''}
+                    onChange={e => setAmount(Math.max(0, parseInt(e.target.value) || 0))}
+                    placeholder="0"
+                  />
+                </div>
+
+                {/* Payment method */}
+                <div>
+                  <p className="text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Способ оплаты</p>
+                  <div className="grid grid-cols-3 gap-2">
+                    {([
+                      { key: 'cash',     label: 'Наличные',     Icon: Banknote,    cls: 'emerald' },
+                      { key: 'terminal', label: 'Терминал',     Icon: CreditCard,  cls: 'blue' },
+                      { key: 'atol',     label: 'АТОЛ',         Icon: Printer,     cls: 'violet' },
+                    ] as const).map(m => (
+                      <button
+                        key={m.key}
+                        onClick={() => setMethod(m.key)}
+                        className={cn(
+                          'flex flex-col items-center gap-2 py-3 rounded-xl border-2 text-sm font-medium transition-colors',
+                          method === m.key
+                            ? m.cls === 'emerald' ? 'bg-emerald-600 border-emerald-600 text-white'
+                            : m.cls === 'blue'    ? 'bg-blue-600 border-blue-600 text-white'
+                            :                       'bg-violet-600 border-violet-600 text-white'
+                            : 'border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:border-slate-300',
+                        )}
+                      >
+                        <m.Icon size={18} />
+                        {m.label}
+                        {m.key === 'atol' && <span className="text-[10px] opacity-70">интеграция</span>}
+                      </button>
+                    ))}
+                  </div>
+                  {method === 'atol' && (
+                    <div className="mt-2 flex items-center gap-2 p-2.5 rounded-lg bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-700">
+                      <AlertCircle size={13} className="text-violet-600 shrink-0" />
+                      <p className="text-xs text-violet-700 dark:text-violet-300">АТОЛ: интеграция будет настроена в разделе Настройки → Оборудование</p>
+                    </div>
                   )}
                 </div>
 
-            {/* Cart items */}
+                {/* Notes */}
-            <div className="flex-1 overflow-y-auto px-4 py-3 space-y-2">
+                <div>
-              {cart.length === 0 ? (
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Примечание</label>
-                <div className="flex flex-col items-center justify-center h-40 text-slate-400 gap-2">
+                  <input
-                  <ShoppingCart size={32} className="opacity-20" />
+                    type="text"
-                  <p className="text-sm">Добавьте товары из каталога</p>
+                    className="input"
-                </div>
+                    placeholder="Необязательно"
-              ) : (
+                    value={notes}
-                cart.map(item => (
+                    onChange={e => setNotes(e.target.value)}
-                  <div key={item.product.id} className="flex items-center gap-2 p-2 rounded-xl bg-slate-50 dark:bg-slate-700/50">
+                  />
-                    <span className="text-lg shrink-0">{item.product.emoji}</span>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-xs font-medium text-slate-800 dark:text-slate-200 truncate">{item.product.name}</p>
-                      <p className="text-xs text-slate-500">{formatCurrency(item.product.price * item.qty)}</p>
-                    </div>
-                    <div className="flex items-center gap-1 shrink-0">
-                      <button onClick={() => changeQty(item.product.id, -1)} className="w-5 h-5 rounded-full bg-slate-200 dark:bg-slate-600 flex items-center justify-center hover:bg-slate-300">
-                        <Minus size={10} />
-                      </button>
-                      <span className="w-5 text-center text-xs font-semibold">{item.qty}</span>
-                      <button onClick={() => changeQty(item.product.id, 1)} className="w-5 h-5 rounded-full bg-slate-200 dark:bg-slate-600 flex items-center justify-center hover:bg-slate-300">
-                        <Plus size={10} />
-                      </button>
-                      <button onClick={() => removeItem(item.product.id)} className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center hover:bg-red-200 ml-1">
-                        <Trash2 size={10} className="text-red-600" />
-                      </button>
-                    </div>
-                  </div>
-                ))
-              )}
                 </div>
 
-            {/* Payment */}
+                {/* Pay button */}
-            {cart.length > 0 && (
-              <div className="shrink-0 border-t border-slate-200 dark:border-slate-700 p-4 space-y-3">
-                <div className="flex items-center justify-between">
-                  <span className="text-sm text-slate-600 dark:text-slate-400">Итого</span>
-                  <span className="text-xl font-bold text-slate-900 dark:text-slate-100">{formatCurrency(cartTotal)}</span>
-                </div>
-                <div className="flex gap-2">
                 <button
-                    onClick={() => setPayMethod('cash')}
+                  onClick={handlePay}
-                    className={cn(
+                  disabled={amount <= 0}
-                      'flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-sm font-medium border-2 transition-colors',
+                  className="btn-primary w-full justify-center py-4 text-base disabled:opacity-40 disabled:cursor-not-allowed"
-                      payMethod === 'cash'
-                        ? 'bg-emerald-600 border-emerald-600 text-white'
-                        : 'border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300',
-                    )}
                 >
-                    <Banknote size={14} />
-                    Наличные
-                  </button>
-                  <button
-                    onClick={() => setPayMethod('terminal')}
-                    className={cn(
-                      'flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-sm font-medium border-2 transition-colors',
-                      payMethod === 'terminal'
-                        ? 'bg-blue-600 border-blue-600 text-white'
-                        : 'border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300',
-                    )}
-                  >
-                    <CreditCard size={14} />
-                    Терминал
-                  </button>
-                </div>
-                <button onClick={handlePay} className="btn-primary w-full justify-center py-3 text-base">
                   <ChevronRight size={18} />
-                  Провести оплату
+                  Провести оплату {amount > 0 ? formatCurrency(amount) : ''}
                 </button>
+              </>
+            ) : (
+              <div className="flex-1 flex items-center justify-center text-slate-400">
+                <p className="text-sm">Выберите гостя из списка слева</p>
               </div>
             )}
           </div>
+
+          {/* ── Right: receipts ── */}
+          <div className="w-72 flex flex-col border-l border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shrink-0 overflow-hidden">
+            <div className="px-4 py-2.5 border-b border-slate-200 dark:border-slate-700 flex items-center gap-2">
+              <Receipt size={14} className="text-slate-400" />
+              <p className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">Чеки за смену</p>
+              <span className="ml-auto text-xs bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 px-2 py-0.5 rounded-full">
+                {shiftReceipts.length}
+              </span>
+            </div>
+            <div className="flex-1 overflow-y-auto p-2 space-y-1.5">
+              {shiftReceipts.map(r => (
+                <div key={r.id} className="rounded-xl border border-slate-100 dark:border-slate-700 bg-slate-50 dark:bg-slate-700/50 p-3">
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-xs font-semibold text-slate-700 dark:text-slate-300">№{r.roomNumber}</span>
+                    <div className="flex items-center gap-1">
+                      {r.method === 'cash'
+                        ? <Banknote size={11} className="text-emerald-600" />
+                        : r.method === 'terminal'
+                        ? <CreditCard size={11} className="text-blue-600" />
+                        : <Printer size={11} className="text-violet-600" />
+                      }
+                      <span className="text-[10px] text-slate-400">{format(r.createdAt, 'HH:mm')}</span>
+                    </div>
+                  </div>
+                  <p className="text-xs text-slate-500 dark:text-slate-400 truncate mb-1">{r.guestName}</p>
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px] text-slate-400">{r.purposeLabel}</span>
+                    <span className="text-sm font-bold text-slate-900 dark:text-slate-100">{formatCurrency(r.amount)}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       )}
 
-      {/* Receipt success overlay */}
+      {/* ── Receipt success overlay ── */}
       {lastReceipt && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
           <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl p-8 w-80 text-center space-y-4">
             <CheckCircle2 size={56} className="text-emerald-500 mx-auto" />
             <div>
               <p className="text-xl font-bold text-slate-900 dark:text-slate-100">Оплата принята</p>
-              <p className="text-3xl font-bold text-emerald-600 mt-1">{formatCurrency(lastReceipt.total)}</p>
+              <p className="text-3xl font-bold text-emerald-600 mt-1">{formatCurrency(lastReceipt.amount)}</p>
               <p className="text-sm text-slate-500 mt-1">
-                {lastReceipt.method === 'cash' ? 'Наличными' : 'Терминал'} · {format(lastReceipt.createdAt, 'HH:mm')}
+                {lastReceipt.method === 'cash' ? 'Наличными' : lastReceipt.method === 'terminal' ? 'Терминал' : 'АТОЛ'} · {format(lastReceipt.createdAt, 'HH:mm')}
               </p>
             </div>
             <div className="text-left bg-slate-50 dark:bg-slate-700/50 rounded-xl p-3 space-y-1">
-              {lastReceipt.items.map(i => (
+              <div className="flex justify-between text-sm">
-                <div key={i.product.id} className="flex justify-between text-sm">
+                <span className="text-slate-500">Гость</span>
-                  <span className="text-slate-600 dark:text-slate-400">{i.product.emoji} {i.product.name} ×{i.qty}</span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">{lastReceipt.guestName}</span>
-                  <span className="font-medium">{formatCurrency(i.product.price * i.qty)}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-slate-500">Номер</span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">№{lastReceipt.roomNumber}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-slate-500">Назначение</span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">{lastReceipt.purposeLabel}</span>
               </div>
-              ))}
             </div>
             <button onClick={() => setLastReceipt(null)} className="btn-primary w-full justify-center">
               Готово

src/pages/ReviewsPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import {
   Star, ThumbsUp, ThumbsDown, ExternalLink, Copy, CheckCheck,
-  MessageSquare, TrendingUp, QrCode, Filter,
+  MessageSquare, QrCode, ArrowUpRight,
 } from 'lucide-react'
 import { format, subDays } from 'date-fns'
 import { ru } from 'date-fns/locale'
@@ -10,7 +10,9 @@ import { Badge } from '../components/ui/Badge'
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
-type ReviewStatus = 'pending' | 'published' | 'rejected'
+// negative (< 2 stars) → 'pending'  (need manager reply)
+// positive (≥ 2 stars) → 'redirect_pending' (send to external platforms)
+type ReviewStatus = 'pending' | 'redirect_pending' | 'published' | 'rejected'
 
 interface Review {
   id: string
@@ -23,10 +25,14 @@ interface Review {
   source: 'qr' | 'email' | 'sms'
   createdAt: Date
   reply?: string
+  redirectedTo?: string[]
 }
 
 // ── Mock data ─────────────────────────────────────────────────────────────────
 
+// NEGATIVE_THRESHOLD: rating < 4 (= < 2 stars out of 5) → moderation
+const NEGATIVE_THRESHOLD = 4
+
 const MOCK_REVIEWS: Review[] = [
   {
     id: 'rv1',
@@ -35,7 +41,7 @@ const MOCK_REVIEWS: Review[] = [
     checkOut: format(subDays(new Date(), 1), 'yyyy-MM-dd'),
     rating: 9,
     text: 'Замечательный отель! Персонал очень вежливый и отзывчивый. Номер чистый, завтрак вкусный. Обязательно вернёмся.',
-    status: 'pending',
+    status: 'redirect_pending',
     source: 'email',
     createdAt: new Date(Date.now() - 3600000 * 5),
   },
@@ -44,7 +50,7 @@ const MOCK_REVIEWS: Review[] = [
     guestName: 'Анна Козлова',
     roomNumber: '202',
     checkOut: format(subDays(new Date(), 2), 'yyyy-MM-dd'),
-    rating: 4,
+    rating: 2,
     text: 'Шум из соседнего номера мешал спать. Кондиционер плохо работал. Персонал помог, но проблему до конца не решили.',
     status: 'pending',
     source: 'qr',
@@ -56,11 +62,11 @@ const MOCK_REVIEWS: Review[] = [
     roomNumber: '301',
     checkOut: format(subDays(new Date(), 3), 'yyyy-MM-dd'),
     rating: 10,
-    text: 'Лучший отель в котором я останавливалась! Вид из окна потрясающий, кровать удобная, всё очень стильно. Пентхаус — это что-то особенное.',
+    text: 'Лучший отель в котором я останавливалась! Вид из окна потрясающий, кровать удобная, всё очень стильно.',
     status: 'published',
     source: 'sms',
     createdAt: new Date(Date.now() - 3600000 * 36),
-    reply: 'Наталья, большое спасибо за такой тёплый отзыв! Будем рады видеть вас снова!',
+    redirectedTo: ['Google', 'Яндекс'],
   },
   {
     id: 'rv4',
@@ -69,20 +75,20 @@ const MOCK_REVIEWS: Review[] = [
     checkOut: format(subDays(new Date(), 5), 'yyyy-MM-dd'),
     rating: 7,
     text: 'В целом хорошо. Немного дорого для такого номера. Но расположение отличное, добираться удобно.',
-    status: 'published',
+    status: 'redirect_pending',
     source: 'email',
-    createdAt: new Date(Date.now() - 3600000 * 60),
+    createdAt: new Date(Date.now() - 3600000 * 48),
   },
   {
     id: 'rv5',
-    guestName: 'Тест Тестов',
+    guestName: 'Виктор Громов',
-    roomNumber: '102',
+    roomNumber: '402',
-    checkOut: format(subDays(new Date(), 7), 'yyyy-MM-dd'),
+    checkOut: format(subDays(new Date(), 6), 'yyyy-MM-dd'),
-    rating: 2,
+    rating: 3,
-    text: 'asdfghjkl qwerty',
+    text: 'Долго ждали заселения. Номер был убран с опозданием. Разочарованы.',
-    status: 'rejected',
+    status: 'pending',
     source: 'qr',
-    createdAt: new Date(Date.now() - 3600000 * 90),
+    createdAt: new Date(Date.now() - 3600000 * 60),
   },
   {
     id: 'rv6',
@@ -90,15 +96,18 @@ const MOCK_REVIEWS: Review[] = [
     roomNumber: '401',
     checkOut: format(subDays(new Date(), 8), 'yyyy-MM-dd'),
     rating: 8,
-    text: 'Очень доволен пребыванием. Всё было организованно на высшем уровне. Спасибо персоналу за внимание к деталям.',
+    text: 'Очень доволен пребыванием. Всё было организованно на высшем уровне. Спасибо персоналу.',
     status: 'published',
     source: 'email',
     createdAt: new Date(Date.now() - 3600000 * 100),
+    redirectedTo: ['Booking.com'],
   },
 ]
 
 const REVIEW_LINK = 'https://app.hotelsync.ru/review/grand-palace'
 
+const PLATFORMS = ['Booking.com', 'Яндекс Путешествия', 'Google', '2ГИС']
+
 function StarRating({ rating, max = 10, size = 14 }: { rating: number; max?: number; size?: number }) {
   const stars = Math.round((rating / max) * 5)
   return (
@@ -118,17 +127,15 @@ function StarRating({ rating, max = 10, size = 14 }: { rating: number; max?: num
 function ratingColor(r: number): string {
   if (r >= 9) return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300'
   if (r >= 7) return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
-  if (r >= 5) return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
+  if (r >= NEGATIVE_THRESHOLD) return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
   return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
 }
 
 const SOURCE_LABEL: Record<Review['source'], string> = {
-  qr: 'QR-код',
+  qr: 'QR-код', email: 'Email', sms: 'SMS',
-  email: 'Email',
-  sms: 'SMS',
 }
 
-type Tab = 'pending' | 'published' | 'rejected' | 'all'
+type Tab = 'pending' | 'redirect_pending' | 'published' | 'all'
 
 export function ReviewsPage() {
   const [reviews, setReviews] = useState<Review[]>(MOCK_REVIEWS)
@@ -137,8 +144,9 @@ export function ReviewsPage() {
   const [replyText, setReplyText] = useState('')
   const [copied, setCopied] = useState(false)
 
-  const published = reviews.filter(r => r.status === 'published')
   const pending         = reviews.filter(r => r.status === 'pending')
+  const redirectPending = reviews.filter(r => r.status === 'redirect_pending')
+  const published       = reviews.filter(r => r.status === 'published')
 
   const avgRating = published.length
     ? (published.reduce((s, r) => s + r.rating, 0) / published.length).toFixed(1)
@@ -153,27 +161,42 @@ export function ReviewsPage() {
 
   const filtered = tab === 'all' ? reviews : reviews.filter(r => r.status === tab)
 
-  const approve = (id: string) =>
-    setReviews(prev => prev.map(r => r.id === id ? { ...r, status: 'published' } : r))
-  const reject = (id: string) =>
-    setReviews(prev => prev.map(r => r.id === id ? { ...r, status: 'rejected' } : r))
   const sendReply = (id: string) => {
     if (!replyText.trim()) return
-    setReviews(prev => prev.map(r => r.id === id ? { ...r, reply: replyText.trim(), status: 'published' } : r))
+    setReviews(prev => prev.map(r =>
+      r.id === id ? { ...r, reply: replyText.trim(), status: 'published' } : r,
+    ))
     setReplyId(null)
     setReplyText('')
   }
 
+  const reject = (id: string) =>
+    setReviews(prev => prev.map(r => r.id === id ? { ...r, status: 'rejected' } : r))
+
+  const sendToPlatform = (id: string, platform: string) => {
+    setReviews(prev => prev.map(r => {
+      if (r.id !== id) return r
+      const already = r.redirectedTo ?? []
+      if (already.includes(platform)) return r
+      const redirectedTo = [...already, platform]
+      return {
+        ...r,
+        redirectedTo,
+        status: 'published' as ReviewStatus,
+      }
+    }))
+  }
+
   const copyLink = () => {
     navigator.clipboard.writeText(REVIEW_LINK).catch(() => {})
     setCopied(true)
     setTimeout(() => setCopied(false), 2000)
   }
 
-  const tabs: { key: Tab; label: string; count?: number }[] = [
+  const tabs: { key: Tab; label: string; count?: number; color?: string }[] = [
-    { key: 'pending',   label: 'На модерации', count: pending.length },
+    { key: 'pending',          label: 'Требуют ответа',   count: pending.length,          color: 'red' },
+    { key: 'redirect_pending', label: 'Перенаправить',    count: redirectPending.length,  color: 'blue' },
     { key: 'published',        label: 'Опубликованы',     count: published.length },
-    { key: 'rejected',  label: 'Отклонены' },
     { key: 'all',              label: 'Все' },
   ]
 
@@ -182,16 +205,18 @@ export function ReviewsPage() {
       {/* Header */}
       <div>
         <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Отзывы гостей</h1>
-        <p className="text-sm text-slate-500 dark:text-slate-400">Сбор и модерация обратной связи</p>
+        <p className="text-sm text-slate-500 dark:text-slate-400">
+          Отрицательные отзывы (&lt;2 звёзд) — модерация и личный ответ. Положительные — перенаправление на площадки.
+        </p>
       </div>
 
       {/* Stats */}
       <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
         {[
           { label: 'Средняя оценка', value: avgRating,          sub: 'из 10',            color: 'text-amber-600 dark:text-amber-400' },
-          { label: 'NPS',            value: `+${nps}`, sub: 'индекс лояльности', color: 'text-emerald-600 dark:text-emerald-400' },
+          { label: 'NPS',            value: nps >= 0 ? `+${nps}` : `${nps}`, sub: 'индекс лояльности', color: 'text-emerald-600 dark:text-emerald-400' },
           { label: 'Опубликовано',   value: published.length,   sub: 'отзывов',          color: 'text-brand-600 dark:text-brand-400' },
-          { label: 'Ожидают',        value: pending.length, sub: 'на модерации', color: pending.length > 0 ? 'text-red-600 dark:text-red-400' : 'text-slate-500' },
+          { label: 'Ждут ответа',    value: pending.length,     sub: 'негативных',       color: pending.length > 0 ? 'text-red-600 dark:text-red-400' : 'text-slate-500' },
         ].map(s => (
           <div key={s.label} className="card p-4">
             <p className={cn('text-2xl font-bold', s.color)}>{s.value}</p>
@@ -201,16 +226,47 @@ export function ReviewsPage() {
         ))}
       </div>
 
+      {/* Logic explanation banner */}
+      <div className="grid md:grid-cols-2 gap-3">
+        <div className="card p-4 border-red-200 dark:border-red-700/50 bg-red-50/50 dark:bg-red-900/10">
+          <div className="flex items-start gap-3">
+            <div className="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center shrink-0">
+              <ThumbsDown size={14} className="text-red-600" />
+            </div>
+            <div>
+              <p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Отрицательные (&lt; 2 звёзд)</p>
+              <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
+                Попадают на модерацию. Менеджер пишет личный ответ — гость получает его по email/SMS.
+                На публичные площадки не публикуется.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="card p-4 border-blue-200 dark:border-blue-700/50 bg-blue-50/50 dark:bg-blue-900/10">
+          <div className="flex items-start gap-3">
+            <div className="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
+              <ArrowUpRight size={14} className="text-blue-600" />
+            </div>
+            <div>
+              <p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Положительные (≥ 2 звёзд)</p>
+              <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
+                Предлагаем гостю оставить отзыв на внешней площадке: Booking.com, Google, Яндекс и т.д.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       {/* Public review link */}
       <div className="card p-4">
         <div className="flex items-start gap-4 flex-wrap">
-          <div className="w-14 h-14 rounded-xl bg-slate-100 dark:bg-slate-700 flex items-center justify-center shrink-0">
+          <div className="w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-700 flex items-center justify-center shrink-0">
-            <QrCode size={28} className="text-slate-600 dark:text-slate-400" />
+            <QrCode size={24} className="text-slate-600 dark:text-slate-400" />
           </div>
           <div className="flex-1 min-w-0">
-            <p className="font-semibold text-slate-900 dark:text-slate-100 mb-1">Ссылка для сбора отзывов</p>
+            <p className="font-semibold text-slate-900 dark:text-slate-100 mb-0.5">Ссылка для сбора отзывов</p>
             <p className="text-xs text-slate-500 dark:text-slate-400 mb-2">
-              Отправьте гостю при выезде или разместите QR-код в номере и на стойке
+              Отправьте гостю при выезде или разместите QR-код в номере
             </p>
             <div className="flex items-center gap-2 p-2.5 rounded-xl bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600">
               <span className="text-sm font-mono text-slate-700 dark:text-slate-300 flex-1 truncate">{REVIEW_LINK}</span>
@@ -221,37 +277,19 @@ export function ReviewsPage() {
                 {copied ? <CheckCheck size={12} className="text-emerald-600" /> : <Copy size={12} />}
                 {copied ? 'Скопировано' : 'Копировать'}
               </button>
-              <a
-                href={REVIEW_LINK}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="shrink-0 flex items-center gap-1 px-2.5 py-1 rounded-lg bg-brand-600 text-white text-xs font-medium hover:bg-brand-700 transition-colors"
-              >
-                <ExternalLink size={12} />
-                Открыть
-              </a>
             </div>
           </div>
-          <div className="shrink-0 flex flex-col gap-1.5">
-            <p className="text-xs text-slate-500 dark:text-slate-400">Перенаправление довольных (≥8) на:</p>
-            {['Booking.com', 'Яндекс', 'Google'].map(s => (
-              <label key={s} className="flex items-center gap-2 text-xs text-slate-700 dark:text-slate-300 cursor-pointer">
-                <input type="checkbox" defaultChecked className="rounded" />
-                {s}
-              </label>
-            ))}
-          </div>
         </div>
       </div>
 
       {/* Tabs */}
-      <div className="flex gap-1 border-b border-slate-200 dark:border-slate-700">
+      <div className="flex gap-1 border-b border-slate-200 dark:border-slate-700 overflow-x-auto">
         {tabs.map(t => (
           <button
             key={t.key}
             onClick={() => setTab(t.key)}
             className={cn(
-              'px-4 py-2.5 text-sm font-medium border-b-2 transition-colors flex items-center gap-1.5',
+              'px-4 py-2.5 text-sm font-medium border-b-2 transition-colors flex items-center gap-1.5 shrink-0',
               tab === t.key
                 ? 'border-brand-600 text-brand-600 dark:text-brand-400'
                 : 'border-transparent text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200',
@@ -261,7 +299,9 @@ export function ReviewsPage() {
             {t.count !== undefined && t.count > 0 && (
               <span className={cn(
                 'text-[10px] px-1.5 py-0.5 rounded-full font-semibold',
-                t.key === 'pending' ? 'bg-red-500 text-white' : 'bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-300',
+                t.color === 'red'  ? 'bg-red-500 text-white' :
+                t.color === 'blue' ? 'bg-blue-500 text-white' :
+                'bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-300',
               )}>
                 {t.count}
               </span>
@@ -278,67 +318,105 @@ export function ReviewsPage() {
             <p>Отзывов нет</p>
           </div>
         )}
-        {filtered.map(review => (
+        {filtered.map(review => {
-          <div key={review.id} className={cn('card p-4', review.status === 'pending' && 'border-amber-300 dark:border-amber-700/60 bg-amber-50/50 dark:bg-amber-900/10')}>
+          const isNegative = review.rating < NEGATIVE_THRESHOLD
+          return (
+            <div
+              key={review.id}
+              className={cn(
+                'card p-4',
+                review.status === 'pending'          && 'border-red-300 dark:border-red-700/60 bg-red-50/50 dark:bg-red-900/10',
+                review.status === 'redirect_pending' && 'border-blue-300 dark:border-blue-700/60 bg-blue-50/50 dark:bg-blue-900/10',
+              )}
+            >
               <div className="flex items-start gap-3 flex-wrap">
                 {/* Rating circle */}
                 <div className={cn('w-10 h-10 rounded-full flex items-center justify-center text-base font-bold shrink-0', ratingColor(review.rating))}>
                   {review.rating}
                 </div>
+
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center justify-between gap-2 flex-wrap mb-1">
                     <div className="flex items-center gap-2 flex-wrap">
                       <p className="font-semibold text-slate-900 dark:text-slate-100">{review.guestName}</p>
-                    <Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">
+                      <Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">№{review.roomNumber}</Badge>
-                      №{review.roomNumber}
+                      <Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">{SOURCE_LABEL[review.source]}</Badge>
-                    </Badge>
+                      {isNegative && <Badge className="bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">Негативный</Badge>}
-                    <Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">
+                      {!isNegative && review.redirectedTo && review.redirectedTo.length > 0 && (
-                      {SOURCE_LABEL[review.source]}
+                        <Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300">
+                          → {review.redirectedTo.join(', ')}
                         </Badge>
+                      )}
                     </div>
-                  <span className="text-xs text-slate-400">
+                    <span className="text-xs text-slate-400">{format(review.createdAt, 'd MMM, HH:mm', { locale: ru })}</span>
-                    {format(review.createdAt, 'd MMM, HH:mm', { locale: ru })}
-                  </span>
                   </div>
                   <StarRating rating={review.rating} />
                   <p className="text-sm text-slate-700 dark:text-slate-300 mt-2 leading-relaxed">{review.text}</p>
 
-                {/* Reply */}
+                  {/* Manager reply */}
                   {review.reply && (
                     <div className="mt-3 p-3 rounded-xl bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-400">
-                    <p className="text-xs text-blue-600 dark:text-blue-400 font-semibold mb-1">Ответ отеля:</p>
+                      <p className="text-xs text-blue-600 dark:text-blue-400 font-semibold mb-1">Личный ответ менеджера (отправлен гостю):</p>
                       <p className="text-sm text-slate-700 dark:text-slate-300">{review.reply}</p>
                     </div>
                   )}
 
-                {/* Reply input */}
+                  {/* Reply input (for negative) */}
                   {replyId === review.id && (
                     <div className="mt-3 space-y-2">
                       <textarea
                         className="input resize-none text-sm w-full"
                         rows={2}
-                      placeholder="Напишите ответ гостю..."
+                        placeholder="Личный ответ гостю (отправится по email/SMS)..."
                         value={replyText}
                         onChange={e => setReplyText(e.target.value)}
                       />
                       <div className="flex gap-2">
-                      <button onClick={() => sendReply(review.id)} className="btn-primary text-xs py-1.5">Отправить ответ</button>
+                        <button onClick={() => sendReply(review.id)} className="btn-primary text-xs py-1.5">Отправить гостю</button>
                         <button onClick={() => setReplyId(null)} className="btn-secondary text-xs py-1.5">Отмена</button>
                       </div>
                     </div>
                   )}
+
+                  {/* Redirect buttons (for positive) */}
+                  {review.status === 'redirect_pending' && (
+                    <div className="mt-3">
+                      <p className="text-xs text-slate-500 dark:text-slate-400 mb-1.5">Перенаправить гостя на площадку:</p>
+                      <div className="flex flex-wrap gap-2">
+                        {PLATFORMS.map(p => {
+                          const sent = review.redirectedTo?.includes(p)
+                          return (
+                            <button
+                              key={p}
+                              onClick={() => sendToPlatform(review.id, p)}
+                              disabled={!!sent}
+                              className={cn(
+                                'flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
+                                sent
+                                  ? 'bg-emerald-100 border-emerald-300 text-emerald-700 dark:bg-emerald-900/30 dark:border-emerald-700 dark:text-emerald-300 cursor-default'
+                                  : 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:border-blue-400',
+                              )}
+                            >
+                              {sent ? <CheckCheck size={11} /> : <ExternalLink size={11} />}
+                              {p}
+                            </button>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  )}
                 </div>
 
                 {/* Actions */}
                 <div className="flex gap-2 shrink-0 flex-wrap">
-                {review.status === 'pending' && (
+                  {review.status === 'pending' && !review.reply && replyId !== review.id && (
                     <>
                       <button
-                      onClick={() => approve(review.id)}
+                        onClick={() => { setReplyId(review.id); setReplyText('') }}
-                      className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-emerald-600 text-white text-xs font-medium hover:bg-emerald-700 transition-colors"
+                        className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-brand-600 text-white text-xs font-medium hover:bg-brand-700 transition-colors"
                       >
-                      <ThumbsUp size={12} />
+                        <MessageSquare size={12} />
-                      Одобрить
+                        Ответить гостю
                       </button>
                       <button
                         onClick={() => reject(review.id)}
@@ -349,7 +427,7 @@ export function ReviewsPage() {
                       </button>
                     </>
                   )}
-                {review.status === 'published' && !review.reply && replyId !== review.id && (
+                  {review.status === 'published' && !review.reply && replyId !== review.id && isNegative && (
                     <button
                       onClick={() => { setReplyId(review.id); setReplyText('') }}
                       className="flex items-center gap-1 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300 text-xs font-medium hover:border-brand-400 transition-colors"
@@ -360,7 +438,7 @@ export function ReviewsPage() {
                   )}
                   {review.status === 'rejected' && (
                     <button
-                    onClick={() => approve(review.id)}
+                      onClick={() => setReviews(prev => prev.map(r => r.id === review.id ? { ...r, status: isNegative ? 'pending' : 'redirect_pending' } : r))}
                       className="flex items-center gap-1 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-600 text-xs font-medium text-slate-600 dark:text-slate-400 hover:border-brand-400"
                     >
                       Восстановить
@@ -369,7 +447,8 @@ export function ReviewsPage() {
                 </div>
               </div>
             </div>
-        ))}
+          )
+        })}
       </div>
     </div>
   )

src/pages/RoomServicePage.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import {
   UtensilsCrossed, Clock, CheckCircle2, ChefHat, Bell, Plus,
-  XCircle, RefreshCw, Eye, Flame,
+  XCircle, Flame, CreditCard, Percent, Home, Store,
 } from 'lucide-react'
 import { format } from 'date-fns'
 import { cn, formatCurrency } from '../lib/utils'
@@ -10,6 +10,8 @@ import { Badge } from '../components/ui/Badge'
 // ── Types ─────────────────────────────────────────────────────────────────────
 
 type OrderStatus = 'new' | 'preparing' | 'ready' | 'delivered' | 'cancelled'
+type OrderType   = 'room' | 'restaurant'
+type PaymentStatus = 'pending' | 'online_paid' | 'on_delivery'
 
 interface MenuItem {
   id: string
@@ -17,7 +19,7 @@ interface MenuItem {
   category: string
   price: number
   emoji: string
-  time: number // minutes to prepare
+  time: number
   popular?: boolean
   stopList?: boolean
 }
@@ -29,36 +31,36 @@ interface RoomOrder {
   roomNumber: string
   guestName: string
   items: OrderItem[]
+  subtotal: number
+  serviceCharge: number
   total: number
   status: OrderStatus
+  orderType: OrderType
+  scheduledTime?: string   // restaurant only
+  paymentStatus: PaymentStatus
   notes?: string
   createdAt: Date
   updatedAt: Date
 }
 
-// ── Mock menu data ─────────────────────────────────────────────────────────────
+// ── Mock menu ─────────────────────────────────────────────────────────────────
 
 const MENU_ITEMS: MenuItem[] = [
-  // Завтраки
   { id: 'm1',  name: 'Яичница с беконом',  category: 'Завтраки', price: 450,  emoji: '🍳', time: 15, popular: true },
   { id: 'm2',  name: 'Омлет с овощами',    category: 'Завтраки', price: 380,  emoji: '🥚', time: 12 },
   { id: 'm3',  name: 'Сырники',            category: 'Завтраки', price: 320,  emoji: '🧀', time: 10 },
   { id: 'm4',  name: 'Овсяная каша',       category: 'Завтраки', price: 250,  emoji: '🥣', time: 8 },
-  // Основные блюда
   { id: 'm5',  name: 'Стейк рибай',        category: 'Основные', price: 1800, emoji: '🥩', time: 25, popular: true },
   { id: 'm6',  name: 'Куриная грудка',     category: 'Основные', price: 750,  emoji: '🍗', time: 20 },
   { id: 'm7',  name: 'Паста карбонара',    category: 'Основные', price: 650,  emoji: '🍝', time: 18 },
   { id: 'm8',  name: 'Лосось на гриле',    category: 'Основные', price: 1200, emoji: '🐟', time: 22 },
-  // Закуски
   { id: 'm9',  name: 'Цезарь с курицей',   category: 'Закуски',  price: 550,  emoji: '🥗', time: 10, popular: true },
   { id: 'm10', name: 'Сэндвич клуб',       category: 'Закуски',  price: 420,  emoji: '🥪', time: 8 },
   { id: 'm11', name: 'Сырная тарелка',     category: 'Закуски',  price: 680,  emoji: '🧀', time: 5 },
-  // Напитки
   { id: 'm12', name: 'Кофе американо',     category: 'Напитки',  price: 180,  emoji: '☕', time: 5, popular: true },
   { id: 'm13', name: 'Капучино',           category: 'Напитки',  price: 220,  emoji: '☕', time: 6 },
   { id: 'm14', name: 'Свежевыжатый сок',   category: 'Напитки',  price: 280,  emoji: '🍊', time: 5 },
   { id: 'm15', name: 'Вино красное бокал', category: 'Напитки',  price: 450,  emoji: '🍷', time: 3 },
-  // Десерты
   { id: 'm16', name: 'Тирамису',           category: 'Десерты',  price: 380,  emoji: '🍮', time: 3 },
   { id: 'm17', name: 'Чизкейк',            category: 'Десерты',  price: 350,  emoji: '🍰', time: 3 },
   { id: 'm18', name: 'Мороженое 3 шара',   category: 'Десерты',  price: 280,  emoji: '🍨', time: 2, stopList: true },
@@ -68,49 +70,32 @@ const CATEGORIES = [...new Set(MENU_ITEMS.map(i => i.category))]
 
 const d = (ms: number) => new Date(Date.now() - ms)
 
-const MOCK_ORDERS: RoomOrder[] = [
+function makeOrder(
-  {
+  id: string,
-    id: 'o1',
+  roomNumber: string,
-    roomNumber: '301',
+  guestName: string,
-    guestName: 'Наталья Александрова',
+  items: OrderItem[],
-    items: [{ item: MENU_ITEMS[4], qty: 1 }, { item: MENU_ITEMS[11], qty: 2 }],
+  status: OrderStatus,
-    total: 2160,
+  orderType: OrderType,
-    status: 'new',
+  serviceChargePct: number,
-    notes: 'Без лука',
+  extra?: Partial<RoomOrder>,
+): RoomOrder {
+  const subtotal = items.reduce((s, oi) => s + oi.item.price * oi.qty, 0)
+  const serviceCharge = orderType === 'room' ? Math.round(subtotal * serviceChargePct / 100) : 0
+  return {
+    id, roomNumber, guestName, items, subtotal,
+    serviceCharge,
+    total: subtotal + serviceCharge,
+    status,
+    orderType,
+    paymentStatus: orderType === 'room' ? 'pending' : 'on_delivery',
     createdAt: d(300000),
     updatedAt: d(300000),
-  },
+    ...extra,
-  {
+  }
-    id: 'o2',
+}
-    roomNumber: '101',
+
-    guestName: 'Дмитрий Волков',
+const DEFAULT_SERVICE_CHARGE_PCT = 15
-    items: [{ item: MENU_ITEMS[0], qty: 1 }, { item: MENU_ITEMS[12], qty: 1 }],
-    total: 670,
-    status: 'preparing',
-    createdAt: d(900000),
-    updatedAt: d(600000),
-  },
-  {
-    id: 'o3',
-    roomNumber: '201',
-    guestName: 'Игорь Соколов',
-    items: [{ item: MENU_ITEMS[8], qty: 2 }, { item: MENU_ITEMS[13], qty: 2 }],
-    total: 1660,
-    status: 'ready',
-    createdAt: d(1800000),
-    updatedAt: d(300000),
-  },
-  {
-    id: 'o4',
-    roomNumber: '402',
-    guestName: 'Виктор Громов',
-    items: [{ item: MENU_ITEMS[6], qty: 2 }, { item: MENU_ITEMS[14], qty: 2 }],
-    total: 2200,
-    status: 'delivered',
-    createdAt: d(3600000),
-    updatedAt: d(1800000),
-  },
-]
 
 // ── Status config ─────────────────────────────────────────────────────────────
 
@@ -131,14 +116,33 @@ function elapsed(from: Date): string {
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
-type PageTab = 'orders' | 'menu'
+type PageTab = 'orders' | 'menu' | 'settings'
 
 export function RoomServicePage() {
   const [tab, setTab]                       = useState<PageTab>('orders')
-  const [orders, setOrders] = useState<RoomOrder[]>(MOCK_ORDERS)
+  const [serviceChargePct, setServiceChargePct] = useState(DEFAULT_SERVICE_CHARGE_PCT)
   const [menuCat, setMenuCat]               = useState(CATEGORIES[0])
   const [, setTick]                         = useState(0)
 
+  const [orders, setOrders] = useState<RoomOrder[]>(() => [
+    makeOrder('o1', '301', 'Наталья Александрова',
+      [{ item: MENU_ITEMS[4], qty: 1 }, { item: MENU_ITEMS[11], qty: 2 }],
+      'new', 'room', DEFAULT_SERVICE_CHARGE_PCT,
+      { notes: 'Без лука', createdAt: d(300000), updatedAt: d(300000) }),
+    makeOrder('o2', '101', 'Дмитрий Волков',
+      [{ item: MENU_ITEMS[0], qty: 1 }, { item: MENU_ITEMS[12], qty: 1 }],
+      'preparing', 'room', DEFAULT_SERVICE_CHARGE_PCT,
+      { createdAt: d(900000), updatedAt: d(600000), paymentStatus: 'online_paid' }),
+    makeOrder('o3', '201', 'Игорь Соколов',
+      [{ item: MENU_ITEMS[8], qty: 2 }, { item: MENU_ITEMS[13], qty: 2 }],
+      'ready', 'restaurant', DEFAULT_SERVICE_CHARGE_PCT,
+      { scheduledTime: '19:30', createdAt: d(1800000), updatedAt: d(300000), paymentStatus: 'on_delivery' }),
+    makeOrder('o4', '402', 'Виктор Громов',
+      [{ item: MENU_ITEMS[6], qty: 2 }, { item: MENU_ITEMS[14], qty: 2 }],
+      'delivered', 'room', DEFAULT_SERVICE_CHARGE_PCT,
+      { createdAt: d(3600000), updatedAt: d(1800000), paymentStatus: 'online_paid' }),
+  ])
+
   // Live timer
   useEffect(() => {
     const id = setInterval(() => setTick(t => t + 1), 10000)
@@ -170,7 +174,7 @@ export function RoomServicePage() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Room Service</h1>
-          <p className="text-sm text-slate-500 dark:text-slate-400">Заказы из номеров</p>
+          <p className="text-sm text-slate-500 dark:text-slate-400">Заказы из номеров и ресторана</p>
         </div>
         {activeOrders.filter(o => o.status === 'new').length > 0 && (
           <div className="flex items-center gap-2 px-3 py-2 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-300 dark:border-red-700 animate-pulse">
@@ -187,7 +191,7 @@ export function RoomServicePage() {
         {[
           { label: 'Активных заказов',  value: activeOrders.length,                                     color: 'text-brand-600 dark:text-brand-400' },
           { label: 'Новые',             value: activeOrders.filter(o => o.status === 'new').length,      color: 'text-red-600 dark:text-red-400' },
-          { label: 'Готовятся',        value: activeOrders.filter(o => o.status === 'preparing').length, color: 'text-amber-600 dark:text-amber-400' },
+          { label: 'Доставка в номер',  value: activeOrders.filter(o => o.orderType === 'room').length,  color: 'text-amber-600 dark:text-amber-400' },
           { label: 'Выручка сегодня',   value: formatCurrency(todayRevenue),                             color: 'text-emerald-600 dark:text-emerald-400' },
         ].map(s => (
           <div key={s.label} className="card p-4">
@@ -199,7 +203,7 @@ export function RoomServicePage() {
 
       {/* Tabs */}
       <div className="flex gap-1 p-1 bg-slate-100 dark:bg-slate-700/50 rounded-xl w-fit">
-        {([['orders', 'Заказы'], ['menu', 'Меню']] as const).map(([key, label]) => (
+        {([['orders', 'Заказы'], ['menu', 'Меню'], ['settings', 'Настройки']] as const).map(([key, label]) => (
           <button
             key={key}
             onClick={() => setTab(key)}
@@ -220,10 +224,9 @@ export function RoomServicePage() {
         ))}
       </div>
 
-      {/* Orders tab */}
+      {/* ── Orders tab ── */}
       {tab === 'orders' && (
         <div className="space-y-4">
-          {/* Active orders */}
           {activeOrders.length > 0 && (
             <div>
               <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Активные</p>
@@ -238,18 +241,32 @@ export function RoomServicePage() {
                           <div className="flex items-center gap-2 mb-0.5">
                             <span className="text-lg font-bold text-slate-900 dark:text-slate-100">№{order.roomNumber}</span>
                             {isNew && <Flame size={14} className="text-red-500 animate-bounce" />}
+                            {/* Order type badge */}
+                            <span className={cn(
+                              'flex items-center gap-0.5 text-[10px] px-1.5 py-0.5 rounded-full font-medium',
+                              order.orderType === 'room'
+                                ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
+                                : 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+                            )}>
+                              {order.orderType === 'room' ? <><Home size={9} />В номер</> : <><Store size={9} />Ресторан</>}
+                            </span>
                           </div>
                           <p className="text-xs text-slate-500 dark:text-slate-400">{order.guestName}</p>
+                          {order.scheduledTime && (
+                            <p className="text-xs text-orange-600 dark:text-orange-400 mt-0.5 flex items-center gap-1">
+                              <Clock size={10} />К столику в {order.scheduledTime}
+                            </p>
+                          )}
                         </div>
                         <div className="text-right">
                           <Badge className={cfg.cls}>{cfg.label}</Badge>
                           <p className="text-[10px] text-slate-400 mt-1 flex items-center gap-0.5 justify-end">
-                            <Clock size={9} />
+                            <Clock size={9} />{elapsed(order.createdAt)} назад
-                            {elapsed(order.createdAt)} назад
                           </p>
                         </div>
                       </div>
 
+                      {/* Items */}
                       <div className="space-y-1 mb-3">
                         {order.items.map(oi => (
                           <div key={oi.item.id} className="flex items-center justify-between text-sm">
@@ -266,8 +283,29 @@ export function RoomServicePage() {
                         )}
                       </div>
 
-                      <div className="flex items-center justify-between border-t border-slate-100 dark:border-slate-700 pt-2.5">
+                      {/* Totals */}
+                      <div className="border-t border-slate-100 dark:border-slate-700 pt-2.5 space-y-1">
+                        {order.serviceCharge > 0 && (
+                          <div className="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
+                            <span className="flex items-center gap-1"><Percent size={10} />Обслуживание {serviceChargePct}%</span>
+                            <span>+{formatCurrency(order.serviceCharge)}</span>
+                          </div>
+                        )}
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
                             <span className="font-bold text-slate-900 dark:text-slate-100">{formatCurrency(order.total)}</span>
+                            {/* Payment status */}
+                            {order.paymentStatus === 'online_paid' && (
+                              <span className="flex items-center gap-1 text-[10px] bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 px-1.5 py-0.5 rounded-full font-medium">
+                                <CreditCard size={9} />Оплачен онлайн
+                              </span>
+                            )}
+                            {order.paymentStatus === 'pending' && order.orderType === 'room' && (
+                              <span className="text-[10px] bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300 px-1.5 py-0.5 rounded-full font-medium">
+                                Эквайринг
+                              </span>
+                            )}
+                          </div>
                           <div className="flex gap-1.5">
                             {order.status !== 'cancelled' && (
                               <button
@@ -292,13 +330,13 @@ export function RoomServicePage() {
                           </div>
                         </div>
                       </div>
+                    </div>
                   )
                 })}
               </div>
             </div>
           )}
 
-          {/* Done orders */}
           {doneOrders.length > 0 && (
             <div>
               <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Завершённые</p>
@@ -306,7 +344,7 @@ export function RoomServicePage() {
                 <table className="w-full text-sm">
                   <thead>
                     <tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-700/40">
-                      {['Номер', 'Гость', 'Заказ', 'Сумма', 'Статус', 'Время'].map(h => (
+                      {['Номер', 'Гость', 'Тип', 'Заказ', 'Сумма', 'Оплата', 'Время'].map(h => (
                         <th key={h} className="text-left px-4 py-2.5 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">{h}</th>
                       ))}
                     </tr>
@@ -316,9 +354,25 @@ export function RoomServicePage() {
                       <tr key={order.id} className="border-b border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-700/30">
                         <td className="px-4 py-2.5 font-medium text-slate-900 dark:text-slate-100">№{order.roomNumber}</td>
                         <td className="px-4 py-2.5 text-slate-600 dark:text-slate-400">{order.guestName}</td>
+                        <td className="px-4 py-2.5">
+                          <span className={cn(
+                            'text-[10px] px-1.5 py-0.5 rounded-full font-medium',
+                            order.orderType === 'room'
+                              ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
+                              : 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+                          )}>
+                            {order.orderType === 'room' ? 'В номер' : 'Ресторан'}
+                          </span>
+                        </td>
                         <td className="px-4 py-2.5 text-slate-600 dark:text-slate-400">{order.items.map(i => `${i.item.emoji}×${i.qty}`).join(' ')}</td>
                         <td className="px-4 py-2.5 font-semibold text-slate-900 dark:text-slate-100">{formatCurrency(order.total)}</td>
-                        <td className="px-4 py-2.5"><Badge className={STATUS_CFG[order.status].cls}>{STATUS_CFG[order.status].label}</Badge></td>
+                        <td className="px-4 py-2.5">
+                          <Badge className={order.paymentStatus === 'online_paid'
+                            ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300'
+                            : 'bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400'}>
+                            {order.paymentStatus === 'online_paid' ? 'Онлайн' : 'При получении'}
+                          </Badge>
+                        </td>
                         <td className="px-4 py-2.5 text-slate-400 text-xs">{format(order.updatedAt, 'HH:mm')}</td>
                       </tr>
                     ))}
@@ -330,7 +384,7 @@ export function RoomServicePage() {
         </div>
       )}
 
-      {/* Menu tab */}
+      {/* ── Menu tab ── */}
       {tab === 'menu' && (
         <div className="space-y-4">
           <div className="flex gap-1 flex-wrap">
@@ -355,22 +409,13 @@ export function RoomServicePage() {
                 <div className="flex items-start justify-between mb-2">
                   <span className="text-2xl">{item.emoji}</span>
                   <div className="flex items-center gap-1">
-                    {item.popular && (
+                    {item.popular && <Badge className="bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">Хит</Badge>}
-                      <Badge className="bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
+                    {item.stopList && <Badge className="bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">Стоп</Badge>}
-                        Хит
-                      </Badge>
-                    )}
-                    {item.stopList && (
-                      <Badge className="bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">
-                        Стоп
-                      </Badge>
-                    )}
                   </div>
                 </div>
                 <p className="font-semibold text-slate-900 dark:text-slate-100">{item.name}</p>
                 <p className="text-xs text-slate-400 mt-0.5 flex items-center gap-1">
-                  <Clock size={10} />
+                  <Clock size={10} />{item.time} мин
-                  {item.time} мин
                 </p>
                 <div className="flex items-center justify-between mt-3">
                   <span className="text-base font-bold text-brand-600 dark:text-brand-400">{formatCurrency(item.price)}</span>
@@ -380,6 +425,88 @@ export function RoomServicePage() {
           </div>
         </div>
       )}
+
+      {/* ── Settings tab ── */}
+      {tab === 'settings' && (
+        <div className="max-w-lg space-y-5">
+          <div className="card p-5 space-y-4">
+            <h3 className="font-semibold text-slate-900 dark:text-slate-100">Настройки обслуживания</h3>
+
+            {/* Service charge */}
+            <div>
+              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+                Процент за обслуживание (доставка в номер)
+              </label>
+              <div className="flex items-center gap-3">
+                <input
+                  type="number"
+                  min={0}
+                  max={50}
+                  className="input w-24"
+                  value={serviceChargePct}
+                  onChange={e => setServiceChargePct(Math.max(0, Math.min(50, parseInt(e.target.value) || 0)))}
+                />
+                <span className="text-sm text-slate-500 dark:text-slate-400">%</span>
+                <span className="text-xs text-slate-400">
+                  (0 = без доплаты, начисляется только для доставки в номер)
+                </span>
+              </div>
+            </div>
+
+            {/* Payment types */}
+            <div>
+              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+                Оплата доставки в номер
+              </label>
+              <div className="space-y-2">
+                <label className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+                  <input type="checkbox" defaultChecked className="rounded" />
+                  <CreditCard size={14} className="text-emerald-600" />
+                  Онлайн-эквайринг (через сайт room service)
+                </label>
+                <label className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+                  <input type="checkbox" defaultChecked className="rounded" />
+                  <UtensilsCrossed size={14} className="text-slate-500" />
+                  Включить в счёт при выезде
+                </label>
+              </div>
+            </div>
+
+            {/* Restaurant scheduling */}
+            <div>
+              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+                Ресторан
+              </label>
+              <div className="space-y-2">
+                <label className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+                  <input type="checkbox" defaultChecked className="rounded" />
+                  Принимать заказы к определённому времени
+                </label>
+                <label className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+                  <input type="checkbox" defaultChecked className="rounded" />
+                  Разрешить предзаказ за сутки
+                </label>
+              </div>
+            </div>
+
+            <button className="btn-primary">Сохранить настройки</button>
+          </div>
+
+          <div className="card p-5 border-blue-200 dark:border-blue-700/50 bg-blue-50/50 dark:bg-blue-900/10">
+            <div className="flex items-start gap-3">
+              <Plus size={16} className="text-blue-600 mt-0.5 shrink-0" />
+              <div>
+                <p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Сайт Room Service</p>
+                <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                  В будущем гости смогут самостоятельно делать заказы через сайт
+                  <strong> roomservice.hotelsync.ru/grand-palace</strong> с оплатой онлайн через эквайринг.
+                  Заказ автоматически появится в этом интерфейсе.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }