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>
This commit is contained in:
@@ -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 type { Booking, DraftBooking, Room, BookingStatus, BookingSource } from '../../types'
|
||||
import { cn, BOOKING_STATUS_LABELS } from '../../lib/utils'
|
||||
import type { Booking, DraftBooking, Room, BookingStatus } from '../../types'
|
||||
import { FloorMapModal } from '../floormap/FloorMapModal'
|
||||
|
||||
const GUEST_TAGS = ['VIP', 'Постоянный гость', 'Корпоративный', 'Медовый месяц', 'День рождения', 'Особые пожелания']
|
||||
@@ -23,12 +23,11 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
|
||||
const [form, setForm] = useState({
|
||||
roomId: existing?.roomId ?? draft.roomId,
|
||||
guestName: existing?.guestName ?? '',
|
||||
guestEmail: existing?.guestEmail ?? '',
|
||||
guestEmail:existing?.guestEmail ?? '',
|
||||
checkIn: existing?.checkIn ?? draft.checkIn,
|
||||
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>
|
||||
|
||||
@@ -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() {
|
||||
const snippet = `<script src="https://widget.hotelsync.ru/v1/embed.js"
|
||||
data-hotel="grand-palace"
|
||||
data-lang="ru">
|
||||
</script>`
|
||||
// ── Widget settings type ───────────────────────────────────────────────────────
|
||||
|
||||
interface WidgetSettings {
|
||||
hotelName: string
|
||||
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>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Виджет прямых продаж для сайта отеля</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{[
|
||||
{ label: 'Бронирований через виджет', value: '—', sub: 'нет данных' },
|
||||
{ label: 'Конверсия', value: '—', sub: 'нет данных' },
|
||||
{ label: 'Прямая выручка', value: '—', sub: 'нет данных' },
|
||||
].map(s => (
|
||||
<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">
|
||||
<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>
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 p-1 bg-slate-100 dark:bg-slate-700/50 rounded-xl w-fit">
|
||||
{([
|
||||
['constructor', <Settings2 size={13} />, 'Конструктор'],
|
||||
['code', <Code2 size={13} />, 'Код установки'],
|
||||
['stats', <Eye size={13} />, 'Статистика'],
|
||||
] as const).map(([key, icon, label]) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setPageTab(key)}
|
||||
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 */}
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-5 space-y-3">
|
||||
{/* ── Constructor ── */}
|
||||
{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="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div className="card p-5 space-y-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: Globe, title: 'Без комиссии OTA', desc: 'Только платёжная комиссия' },
|
||||
{ icon: CreditCard, title: 'Онлайн-оплата', desc: 'ЮKassa, Тинькофф, СБП' },
|
||||
{ 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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import {
|
||||
ShoppingCart, Plus, Minus, Trash2, CreditCard, Banknote, X,
|
||||
Clock, TrendingUp, Receipt, LogIn, LogOut, ChevronRight, CheckCircle2,
|
||||
CreditCard, Banknote, Clock, LogIn, LogOut, 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 {
|
||||
id: string
|
||||
name: string
|
||||
price: number
|
||||
category: string
|
||||
emoji: string
|
||||
interface RoomBalance {
|
||||
roomId: string
|
||||
roomNumber: string
|
||||
guestName: string
|
||||
checkIn: string
|
||||
checkOut: string
|
||||
totalAmount: number
|
||||
paidAmount: number
|
||||
nights: number
|
||||
}
|
||||
|
||||
interface CartItem {
|
||||
product: PosProduct
|
||||
qty: number
|
||||
}
|
||||
type PaymentMethod = 'cash' | 'terminal' | 'atol'
|
||||
type ChargePurpose = 'stay' | 'breakfast' | 'transfer' | 'parking' | 'extra'
|
||||
|
||||
interface PosReceipt {
|
||||
interface ReceiptRecord {
|
||||
id: string
|
||||
items: CartItem[]
|
||||
total: number
|
||||
method: 'cash' | 'terminal'
|
||||
roomNumber: string
|
||||
guestName: string
|
||||
purposeLabel: string
|
||||
amount: number
|
||||
method: PaymentMethod
|
||||
createdAt: Date
|
||||
shiftId: string
|
||||
}
|
||||
|
||||
// ── Mock data ─────────────────────────────────────────────────────────────────
|
||||
// ── Mock data ──────────────────────────────────────────────────────────────────
|
||||
|
||||
const CATEGORIES = ['Еда', 'Напитки', 'Услуги', 'Прочее']
|
||||
|
||||
const PRODUCTS: PosProduct[] = [
|
||||
// Еда
|
||||
{ id: 'p1', name: 'Завтрак', price: 650, category: 'Еда', emoji: '🍳' },
|
||||
{ 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 MOCK_BALANCES: RoomBalance[] = [
|
||||
{ roomId: 'r1', roomNumber: '101', guestName: 'Дмитрий Волков', checkIn: '2026-03-10', checkOut: '2026-03-12', totalAmount: 9000, paidAmount: 4500, nights: 2 },
|
||||
{ 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 },
|
||||
{ roomId: 'r4', roomNumber: '401', guestName: 'Михаил Орлов', checkIn: '2026-03-10', checkOut: '2026-03-13', totalAmount: 36000, paidAmount: 0, nights: 3 },
|
||||
]
|
||||
|
||||
const SEED_RECEIPTS: PosReceipt[] = [
|
||||
{
|
||||
id: 'rc1',
|
||||
items: [
|
||||
{ product: PRODUCTS[0], qty: 2 },
|
||||
{ product: PRODUCTS[5], qty: 2 },
|
||||
],
|
||||
total: 1660,
|
||||
method: 'terminal',
|
||||
createdAt: new Date(Date.now() - 3600000 * 2),
|
||||
shiftId: 'shift-today',
|
||||
},
|
||||
{
|
||||
id: 'rc2',
|
||||
items: [{ product: PRODUCTS[9], qty: 1 }],
|
||||
total: 2500,
|
||||
method: 'cash',
|
||||
createdAt: new Date(Date.now() - 3600000),
|
||||
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',
|
||||
},
|
||||
const PURPOSE_LABELS: Record<ChargePurpose, string> = {
|
||||
stay: 'Проживание',
|
||||
breakfast: 'Завтрак',
|
||||
transfer: 'Трансфер',
|
||||
parking: 'Парковка',
|
||||
extra: 'Доп. услуга',
|
||||
}
|
||||
|
||||
const QUICK_CHARGES: { purpose: ChargePurpose; label: string; amount: number | null; Icon: any }[] = [
|
||||
{ purpose: 'stay', label: 'Проживание', amount: null, Icon: Building2 },
|
||||
{ purpose: 'breakfast', label: 'Завтрак', amount: 650, Icon: Coffee },
|
||||
{ purpose: 'transfer', label: 'Трансфер', amount: 2500, Icon: Car },
|
||||
{ purpose: 'parking', label: 'Парковка', amount: 500, Icon: Package },
|
||||
{ purpose: 'extra', label: 'Доп. услуга', amount: null, Icon: Zap },
|
||||
]
|
||||
|
||||
const SEED_RECEIPTS: ReceiptRecord[] = [
|
||||
{ id: 'rc1', roomNumber: '201', guestName: 'Игорь Соколов', purposeLabel: 'Проживание', amount: 14000, method: 'terminal', createdAt: new Date(Date.now() - 3600000 * 3), 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' },
|
||||
]
|
||||
|
||||
// ── 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 [cart, setCart] = useState<CartItem[]>([])
|
||||
const [receipts, setReceipts] = useState<PosReceipt[]>(SEED_RECEIPTS)
|
||||
const [payMethod, setPayMethod] = useState<'cash' | 'terminal'>('terminal')
|
||||
const [lastReceipt, setLastReceipt] = useState<PosReceipt | null>(null)
|
||||
const [receipts, setReceipts] = useState<ReceiptRecord[]>(SEED_RECEIPTS)
|
||||
const [selectedRoom, setSelectedRoom] = useState<RoomBalance | null>(MOCK_BALANCES[0])
|
||||
const [purpose, setPurpose] = useState<ChargePurpose>('stay')
|
||||
const [amount, setAmount] = useState<number>(0)
|
||||
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 cashRevenue = shiftReceipts.filter(r => r.method === 'cash').reduce((s, r) => s + r.total, 0)
|
||||
const termRevenue = shiftReceipts.filter(r => r.method === 'terminal').reduce((s, r) => s + r.total, 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 shiftRevenue = shiftReceipts.reduce((s, r) => s + r.amount, 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.amount, 0)
|
||||
|
||||
const handlePay = () => {
|
||||
if (cart.length === 0 || !shiftOpen) return
|
||||
const receipt: PosReceipt = {
|
||||
if (!selectedRoom || amount <= 0 || !shiftOpen) return
|
||||
const rec: ReceiptRecord = {
|
||||
id: `rc-${Date.now()}`,
|
||||
items: cart,
|
||||
total: cartTotal,
|
||||
method: payMethod,
|
||||
roomNumber: selectedRoom.roomNumber,
|
||||
guestName: selectedRoom.guestName,
|
||||
purposeLabel: PURPOSE_LABELS[purpose],
|
||||
amount,
|
||||
method,
|
||||
createdAt: new Date(),
|
||||
shiftId,
|
||||
}
|
||||
setReceipts(prev => [receipt, ...prev])
|
||||
setLastReceipt(receipt)
|
||||
setCart([])
|
||||
setReceipts(prev => [rec, ...prev])
|
||||
setLastReceipt(rec)
|
||||
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">
|
||||
{shiftTimer}
|
||||
</span>
|
||||
<span className="text-xs font-mono font-semibold text-emerald-700 dark:text-emerald-300">{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
|
||||
onClick={() => setShiftOpen(true)}
|
||||
className="btn-primary"
|
||||
>
|
||||
<LogIn size={15} />
|
||||
Открыть смену
|
||||
<button onClick={() => setShiftOpen(true)} 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 */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{filteredProducts.map(p => (
|
||||
<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} />
|
||||
Текущий чек
|
||||
{/* ── Left: active bookings ── */}
|
||||
<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="px-3 py-2.5 border-b border-slate-200 dark:border-slate-700">
|
||||
<p className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">
|
||||
Активные заезды
|
||||
</p>
|
||||
{cart.length > 0 && (
|
||||
<button onClick={() => setCart([])} className="text-xs text-red-500 hover:text-red-700">
|
||||
Очистить
|
||||
</div>
|
||||
<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 */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-3 space-y-2">
|
||||
{cart.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-40 text-slate-400 gap-2">
|
||||
<ShoppingCart size={32} className="opacity-20" />
|
||||
<p className="text-sm">Добавьте товары из каталога</p>
|
||||
</div>
|
||||
) : (
|
||||
cart.map(item => (
|
||||
<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>
|
||||
))
|
||||
)}
|
||||
{/* Notes */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Примечание</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
placeholder="Необязательно"
|
||||
value={notes}
|
||||
onChange={e => setNotes(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Payment */}
|
||||
{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">
|
||||
{/* Pay button */}
|
||||
<button
|
||||
onClick={() => setPayMethod('cash')}
|
||||
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 === 'cash'
|
||||
? 'bg-emerald-600 border-emerald-600 text-white'
|
||||
: 'border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300',
|
||||
)}
|
||||
onClick={handlePay}
|
||||
disabled={amount <= 0}
|
||||
className="btn-primary w-full justify-center py-4 text-base disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
<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 key={i.product.id} className="flex justify-between text-sm">
|
||||
<span className="text-slate-600 dark:text-slate-400">{i.product.emoji} {i.product.name} ×{i.qty}</span>
|
||||
<span className="font-medium">{formatCurrency(i.product.price * i.qty)}</span>
|
||||
<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.guestName}</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">
|
||||
Готово
|
||||
|
||||
@@ -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: 'Тест Тестов',
|
||||
roomNumber: '102',
|
||||
checkOut: format(subDays(new Date(), 7), 'yyyy-MM-dd'),
|
||||
rating: 2,
|
||||
text: 'asdfghjkl qwerty',
|
||||
status: 'rejected',
|
||||
guestName: 'Виктор Громов',
|
||||
roomNumber: '402',
|
||||
checkOut: format(subDays(new Date(), 6), 'yyyy-MM-dd'),
|
||||
rating: 3,
|
||||
text: 'Долго ждали заселения. Номер был убран с опозданием. Разочарованы.',
|
||||
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-код',
|
||||
email: 'Email',
|
||||
sms: 'SMS',
|
||||
qr: 'QR-код', 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 }[] = [
|
||||
{ key: 'pending', label: 'На модерации', count: pending.length },
|
||||
const tabs: { key: Tab; label: string; count?: number; color?: string }[] = [
|
||||
{ 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">
|
||||
Отрицательные отзывы (<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">Отрицательные (< 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">
|
||||
<QrCode size={28} className="text-slate-600 dark:text-slate-400" />
|
||||
<div className="w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-700 flex items-center justify-center shrink-0">
|
||||
<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 => (
|
||||
<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')}>
|
||||
{filtered.map(review => {
|
||||
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">
|
||||
№{review.roomNumber}
|
||||
</Badge>
|
||||
<Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">
|
||||
{SOURCE_LABEL[review.source]}
|
||||
<Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">№{review.roomNumber}</Badge>
|
||||
<Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">{SOURCE_LABEL[review.source]}</Badge>
|
||||
{isNegative && <Badge className="bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">Негативный</Badge>}
|
||||
{!isNegative && review.redirectedTo && review.redirectedTo.length > 0 && (
|
||||
<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">
|
||||
{format(review.createdAt, 'd MMM, HH:mm', { locale: ru })}
|
||||
</span>
|
||||
<span className="text-xs text-slate-400">{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)}
|
||||
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"
|
||||
onClick={() => { setReplyId(review.id); setReplyText('') }}
|
||||
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>
|
||||
)
|
||||
|
||||
@@ -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: '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[] = [
|
||||
{
|
||||
id: 'o1',
|
||||
roomNumber: '301',
|
||||
guestName: 'Наталья Александрова',
|
||||
items: [{ item: MENU_ITEMS[4], qty: 1 }, { item: MENU_ITEMS[11], qty: 2 }],
|
||||
total: 2160,
|
||||
status: 'new',
|
||||
notes: 'Без лука',
|
||||
function makeOrder(
|
||||
id: string,
|
||||
roomNumber: string,
|
||||
guestName: string,
|
||||
items: OrderItem[],
|
||||
status: OrderStatus,
|
||||
orderType: OrderType,
|
||||
serviceChargePct: number,
|
||||
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),
|
||||
},
|
||||
{
|
||||
id: 'o2',
|
||||
roomNumber: '101',
|
||||
guestName: 'Дмитрий Волков',
|
||||
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),
|
||||
},
|
||||
]
|
||||
...extra,
|
||||
}
|
||||
}
|
||||
|
||||
const DEFAULT_SERVICE_CHARGE_PCT = 15
|
||||
|
||||
// ── 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} />
|
||||
{elapsed(order.createdAt)} назад
|
||||
<Clock size={9} />{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 && (
|
||||
<Badge className="bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
|
||||
Хит
|
||||
</Badge>
|
||||
)}
|
||||
{item.stopList && (
|
||||
<Badge className="bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">
|
||||
Стоп
|
||||
</Badge>
|
||||
)}
|
||||
{item.popular && <Badge className="bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">Хит</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} />
|
||||
{item.time} мин
|
||||
<Clock size={10} />{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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user