golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add room categories, documents module, guest settings, and booking improvements

Browse Source 
- New pages: RoomCategoriesPage (category CRUD with photos, color, amenities) and DocumentsPage (template constructor with variable substitution, print packages)
- Sidebar: added "Категории номеров" link under rooms, Documents module via modulesData
- App.tsx: routes for /room-categories and /documents
- RoomModal: now accepts categories prop for categoryId select
- BookingModal: added additional services dropdown (breakfast, transfer, parking etc.) accumulating into booking total; summary shows services breakdown
- SettingsPage: new "Гости" section with guest tag CRUD (add/edit/remove, color picker, live preview); booking section toggle "Показывать поле Источник бронирования"
- modulesData: added Documents module entry (free tier, sidebar item)
- RoomsPage: passes MOCK_CATEGORIES to RoomModal
- ReviewsPage: rewritten with auto-redirect logic, threshold slider, platform settings tab

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HotelSync
2026-03-11 22:17:54 +03:00
parent 56df6711e4
commit 96dfd755ed
11 changed files with 1816 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

490
src/pages/DocumentsPage.tsx Normal file
View File

@@ -0,0 +1,490 @@
import { useState } from 'react'
import {
FileText, Plus, Pencil, Trash2, Printer, Copy, CheckCheck,
ChevronDown, X as XIcon, Eye,
} from 'lucide-react'
import { cn } from '../lib/utils'
import type { DocumentTemplate } from '../types'
// ── Mock templates ─────────────────────────────────────────────────────────────
const TEMPLATE_TYPES: { value: DocumentTemplate['type']; label: string; icon: string }[] = [
{ value: 'registration', label: 'Регистрационная карта', icon: '📋' },
{ value: 'invoice', label: 'Счёт / Квитанция', icon: '🧾' },
{ value: 'contract', label: 'Договор', icon: '📄' },
{ value: 'info', label: 'Информационный лист', icon: '📑' },
]
const VARIABLES = [
{ var: '{hotel_name}', desc: 'Название отеля' },
{ var: '{hotel_address}', desc: 'Адрес отеля' },
{ var: '{guest_name}', desc: 'Имя гостя' },
{ var: '{guest_email}', desc: 'Email гостя' },
{ var: '{room_number}', desc: 'Номер комнаты' },
{ var: '{room_type}', desc: 'Тип номера' },
{ var: '{check_in}', desc: 'Дата заезда' },
{ var: '{check_out}', desc: 'Дата выезда' },
{ var: '{nights}', desc: 'Количество ночей' },
{ var: '{adults}', desc: 'Кол-во взрослых' },
{ var: '{children}', desc: 'Кол-во детей' },
{ var: '{total_amount}', desc: 'Итоговая сумма' },
{ var: '{paid_amount}', desc: 'Оплачено' },
{ var: '{balance}', desc: 'Остаток к оплате' },
{ var: '{today}', desc: 'Сегодняшняя дата' },
]
const MOCK_TEMPLATES: DocumentTemplate[] = [
{
id: 'tpl1',
hotelId: 'hotel-1',
name: 'Регистрационная карта',
type: 'registration',
forCheckIn: true,
printOrder: 1,
content: `РЕГИСТРАЦИОННАЯ КАРТА ГОСТЯ
{hotel_name}
{hotel_address}
Дата: {today}
Гость: {guest_name}
Email: {guest_email}
Номер: {room_number} ({room_type})
Заезд: {check_in}
Выезд: {check_out}
Ночей: {nights}
Гостей: {adults} взр. + {children} дет.
Итого: {total_amount} ₽
Оплачено: {paid_amount} ₽
К доплате: {balance} ₽
Подпись гостя: _____________________
Дата: _______________________________`,
},
{
id: 'tpl2',
hotelId: 'hotel-1',
name: 'Счёт за проживание',
type: 'invoice',
forCheckIn: false,
printOrder: 2,
content: `СЧЁТ ЗА ПРОЖИВАНИЕ
{hotel_name}
Гость: {guest_name}
Номер: {room_number}
Период: {check_in} — {check_out} ({nights} ночей)
ИТОГО К ОПЛАТЕ: {total_amount} ₽
Оплачено: {paid_amount} ₽
Остаток: {balance} ₽
Спасибо за выбор нашего отеля!`,
},
{
id: 'tpl3',
hotelId: 'hotel-1',
name: 'Правила проживания',
type: 'info',
forCheckIn: true,
printOrder: 3,
content: `ПРАВИЛА ПРОЖИВАНИЯ
{hotel_name}
Уважаемый гость, {guest_name}!
Добро пожаловать в наш отель.
Время заезда: 14:00
Время выезда: 12:00
Основные правила:
• Тишина с 22:00 до 08:00
• Курение запрещено в номерах
• Домашние животные по согласованию
• Бассейн и спортзал — с 07:00 до 22:00
Ресепшн работает круглосуточно.
Звоните: 0 (внутренний номер)
Приятного отдыха!`,
},
]
// ── Document preview with variable substitution ────────────────────────────────
function previewContent(content: string): string {
return content
.replace(/\{hotel_name\}/g, 'Grand Palace Hotel')
.replace(/\{hotel_address\}/g, 'г. Москва, ул. Тверская, 1')
.replace(/\{guest_name\}/g, 'Иванов Иван Иванович')
.replace(/\{guest_email\}/g, 'ivanov@example.com')
.replace(/\{room_number\}/g, '301')
.replace(/\{room_type\}/g, 'Пентхаус')
.replace(/\{check_in\}/g, '15.03.2026')
.replace(/\{check_out\}/g, '18.03.2026')
.replace(/\{nights\}/g, '3')
.replace(/\{adults\}/g, '2')
.replace(/\{children\}/g, '0')
.replace(/\{total_amount\}/g, '45 000')
.replace(/\{paid_amount\}/g, '22 500')
.replace(/\{balance\}/g, '22 500')
.replace(/\{today\}/g, '15.03.2026')
}
// ── Template editor ────────────────────────────────────────────────────────────
interface EditorProps {
template?: DocumentTemplate
onClose: () => void
onSave: (tpl: DocumentTemplate) => void
}
function TemplateEditor({ template, onClose, onSave }: EditorProps) {
const isEdit = !!template
const [name, setName] = useState(template?.name ?? '')
const [type, setType] = useState<DocumentTemplate['type']>(template?.type ?? 'registration')
const [content, setContent] = useState(template?.content ?? '')
const [forCheckIn, setForCheckIn] = useState(template?.forCheckIn ?? false)
const [preview, setPreview] = useState(false)
const [copiedVar, setCopiedVar] = useState<string | null>(null)
const insertVar = (v: string) => {
const el = document.getElementById('tpl-content') as HTMLTextAreaElement
if (!el) { setContent(c => c + v); return }
const start = el.selectionStart ?? content.length
const end = el.selectionEnd ?? content.length
const next = content.slice(0, start) + v + content.slice(end)
setContent(next)
setTimeout(() => { el.focus(); el.setSelectionRange(start + v.length, start + v.length) }, 10)
}
const handleSave = () => {
if (!name.trim()) return
onSave({
id: template?.id ?? `tpl-${Date.now()}`,
hotelId: template?.hotelId ?? 'hotel-1',
name: name.trim(),
type,
content,
forCheckIn,
printOrder: template?.printOrder ?? 99,
})
}
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
<div className="relative w-full max-w-4xl bg-white dark:bg-slate-800 rounded-2xl shadow-2xl flex flex-col" style={{ maxHeight: '94vh' }}>
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 dark:border-slate-700 shrink-0">
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
{isEdit ? `Редактировать: ${template.name}` : 'Новый шаблон документа'}
</h2>
<div className="flex items-center gap-2">
<button
onClick={() => setPreview(p => !p)}
className={cn('flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
preview ? 'bg-brand-600 text-white border-brand-600' : 'border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300',
)}
>
<Eye size={14} />{preview ? 'Редактор' : 'Предпросмотр'}
</button>
<button onClick={onClose} className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-500">
<XIcon size={18} />
</button>
</div>
</div>
<div className="flex-1 overflow-hidden flex">
{/* Left: editor */}
<div className="flex-1 flex flex-col overflow-hidden">
{/* Meta */}
<div className="px-6 py-3 border-b border-slate-200 dark:border-slate-700 shrink-0 space-y-3">
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">Название</label>
<input type="text" className="input" placeholder="Регистрационная карта" value={name} onChange={e => setName(e.target.value)} />
</div>
<div>
<label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">Тип документа</label>
<select className="input" value={type} onChange={e => setType(e.target.value as DocumentTemplate['type'])}>
{TEMPLATE_TYPES.map(t => <option key={t.value} value={t.value}>{t.icon} {t.label}</option>)}
</select>
</div>
</div>
<label className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300 cursor-pointer">
<input type="checkbox" checked={forCheckIn} onChange={e => setForCheckIn(e.target.checked)} className="rounded" />
Печатать при заселении (добавить в пакет документов)
</label>
</div>
{/* Content area */}
<div className="flex-1 overflow-hidden px-6 py-3">
{preview ? (
<div className="h-full overflow-y-auto">
<div className="bg-white border border-slate-200 rounded-xl p-6 font-mono text-sm text-slate-800 whitespace-pre-wrap leading-relaxed shadow-inner min-h-full">
{previewContent(content)}
</div>
</div>
) : (
<textarea
id="tpl-content"
className="w-full h-full border border-slate-200 dark:border-slate-600 rounded-xl p-4 font-mono text-sm bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-200 resize-none focus:outline-none focus:border-brand-400 focus:ring-1 focus:ring-brand-400"
placeholder="Введите содержимое документа. Используйте переменные из панели справа..."
value={content}
onChange={e => setContent(e.target.value)}
/>
)}
</div>
</div>
{/* Right: variables panel */}
<div className="w-56 border-l border-slate-200 dark:border-slate-700 flex flex-col shrink-0">
<div className="px-4 py-3 border-b border-slate-200 dark:border-slate-700 shrink-0">
<p className="text-xs font-semibold text-slate-600 dark:text-slate-400 uppercase tracking-wide">Переменные</p>
<p className="text-[10px] text-slate-400 mt-0.5">Нажмите для вставки</p>
</div>
<div className="flex-1 overflow-y-auto p-2 space-y-1">
{VARIABLES.map(v => (
<button
key={v.var}
onClick={() => {
insertVar(v.var)
setCopiedVar(v.var)
setTimeout(() => setCopiedVar(null), 1500)
}}
className="w-full text-left p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors group"
>
<p className="text-xs font-mono text-brand-600 dark:text-brand-400 flex items-center gap-1">
{copiedVar === v.var ? <CheckCheck size={10} className="text-emerald-500" /> : <Copy size={10} className="opacity-0 group-hover:opacity-100" />}
{v.var}
</p>
<p className="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">{v.desc}</p>
</button>
))}
</div>
</div>
</div>
{/* Footer */}
<div className="shrink-0 px-6 py-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3">
<button onClick={onClose} className="btn-secondary">Отмена</button>
<button onClick={handleSave} className="btn-primary" disabled={!name.trim()}>
{isEdit ? 'Сохранить' : 'Создать шаблон'}
</button>
</div>
</div>
</div>
)
}
// ── Print package selector (used at check-in) ────────────────────────────────
export function PrintPackageDropdown({
templates,
onPrint,
}: {
templates: DocumentTemplate[]
onPrint: (ids: string[]) => void
}) {
const [open, setOpen] = useState(false)
const [selected, setSelected] = useState<string[]>(
templates.filter(t => t.forCheckIn).map(t => t.id),
)
const toggle = (id: string) =>
setSelected(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
return (
<div className="relative">
<button
onClick={() => setOpen(v => !v)}
className="flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600 text-sm font-medium text-slate-700 dark:text-slate-300 hover:border-brand-400 transition-colors"
>
<Printer size={14} />
Печать документов
<ChevronDown size={13} className={cn('transition-transform', open && 'rotate-180')} />
</button>
{open && (
<>
<div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
<div className="absolute right-0 top-full mt-2 w-72 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 overflow-hidden">
<div className="px-4 py-3 border-b border-slate-200 dark:border-slate-700">
<p className="text-sm font-semibold text-slate-900 dark:text-slate-100">Выберите документы для печати</p>
</div>
<div className="p-2 space-y-1">
{templates.map(t => {
const tplType = TEMPLATE_TYPES.find(x => x.value === t.type)
return (
<label key={t.id} className="flex items-center gap-3 p-2.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer">
<input
type="checkbox"
checked={selected.includes(t.id)}
onChange={() => toggle(t.id)}
className="rounded"
/>
<span className="text-lg">{tplType?.icon ?? '📄'}</span>
<div>
<p className="text-sm font-medium text-slate-800 dark:text-slate-200">{t.name}</p>
{t.forCheckIn && (
<p className="text-[10px] text-brand-600 dark:text-brand-400">При заселении</p>
)}
</div>
</label>
)
})}
</div>
<div className="p-3 border-t border-slate-200 dark:border-slate-700 flex gap-2">
<button
onClick={() => { onPrint(selected); setOpen(false) }}
disabled={selected.length === 0}
className="btn-primary flex-1 justify-center disabled:opacity-40"
>
<Printer size={14} />
Печать ({selected.length})
</button>
<button
onClick={() => { onPrint(templates.map(t => t.id)); setOpen(false) }}
className="btn-secondary text-xs"
>
Все
</button>
</div>
</div>
</>
)}
</div>
)
}
// ── Main page ─────────────────────────────────────────────────────────────────
export function DocumentsPage() {
const [templates, setTemplates] = useState<DocumentTemplate[]>(MOCK_TEMPLATES)
const [editingTpl, setEditingTpl] = useState<DocumentTemplate | undefined>()
const [editorOpen, setEditorOpen] = useState(false)
const [printedId, setPrintedId] = useState<string | null>(null)
const openCreate = () => { setEditingTpl(undefined); setEditorOpen(true) }
const openEdit = (tpl: DocumentTemplate) => { setEditingTpl(tpl); setEditorOpen(true) }
const handleSave = (tpl: DocumentTemplate) => {
setTemplates(prev => {
const idx = prev.findIndex(t => t.id === tpl.id)
if (idx >= 0) { const next = [...prev]; next[idx] = tpl; return next }
return [...prev, tpl]
})
setEditorOpen(false)
}
const handleDelete = (id: string) => setTemplates(prev => prev.filter(t => t.id !== id))
const handlePrint = (ids: string[]) => {
// In production: trigger print dialog with generated PDF
alert(`Печать документов: ${ids.map(id => templates.find(t => t.id === id)?.name).join(', ')}`)
}
const checkInTemplates = templates.filter(t => t.forCheckIn)
return (
<div className="p-4 md:p-6 space-y-5">
{/* Header */}
<div className="flex items-center justify-between">
<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>
</div>
<div className="flex items-center gap-2">
<PrintPackageDropdown templates={templates} onPrint={handlePrint} />
<button className="btn-primary" onClick={openCreate}>
<Plus size={15} />Новый шаблон
</button>
</div>
</div>
{/* Check-in package info */}
{checkInTemplates.length > 0 && (
<div className="card p-4 border-emerald-200 dark:border-emerald-700/50 bg-emerald-50/50 dark:bg-emerald-900/10">
<div className="flex items-center justify-between">
<div className="flex items-start gap-3">
<Printer size={16} className="text-emerald-600 mt-0.5 shrink-0" />
<div>
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Пакет документов при заселении</p>
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
{checkInTemplates.map(t => t.name).join(' · ')}
</p>
</div>
</div>
<button
onClick={() => handlePrint(checkInTemplates.map(t => t.id))}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 transition-colors"
>
<Printer size={13} />
Напечатать все
</button>
</div>
</div>
)}
{/* Templates list */}
<div className="space-y-3">
{templates.map(tpl => {
const tplType = TEMPLATE_TYPES.find(t => t.value === tpl.type)
return (
<div key={tpl.id} className="card p-4">
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-2xl shrink-0">
{tplType?.icon ?? '📄'}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-slate-900 dark:text-slate-100">{tpl.name}</h3>
{tpl.forCheckIn && (
<span className="text-[10px] bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 px-1.5 py-0.5 rounded-full font-medium">
При заселении
</span>
)}
</div>
<p className="text-xs text-slate-500 dark:text-slate-400">{tplType?.label}</p>
<p className="text-xs text-slate-400 mt-1 truncate font-mono">{tpl.content.slice(0, 80)}…</p>
</div>
<div className="flex items-center gap-2 shrink-0">
<button
onClick={() => { setPrintedId(tpl.id); handlePrint([tpl.id]); setTimeout(() => setPrintedId(null), 2000) }}
className="p-2 rounded-lg border border-slate-200 dark:border-slate-600 hover:border-brand-400 text-slate-500 hover:text-brand-600 transition-colors"
title="Напечатать"
>
{printedId === tpl.id ? <CheckCheck size={14} className="text-emerald-600" /> : <Printer size={14} />}
</button>
<button
onClick={() => openEdit(tpl)}
className="p-2 rounded-lg border border-slate-200 dark:border-slate-600 hover:border-brand-400 text-slate-500 hover:text-brand-600 transition-colors"
>
<Pencil size={14} />
</button>
<button
onClick={() => handleDelete(tpl.id)}
className="p-2 rounded-lg border border-slate-200 dark:border-slate-600 hover:border-red-400 text-slate-500 hover:text-red-500 transition-colors"
>
<Trash2 size={14} />
</button>
</div>
</div>
</div>
)
})}
</div>
{editorOpen && (
<TemplateEditor
template={editingTpl}
onClose={() => setEditorOpen(false)}
onSave={handleSave}
/>
)}
</div>
)
}

635
src/pages/ReviewsPage.tsx
View File

@@ -1,7 +1,7 @@
import { useState } from 'react'
import {
Star, ThumbsUp, ThumbsDown, ExternalLink, Copy, CheckCheck,
MessageSquare, QrCode, ArrowUpRight,
Star, ThumbsDown, Copy, CheckCheck, MessageSquare, QrCode,
ArrowUpRight, Plus, Trash2, ExternalLink, Settings2,
} from 'lucide-react'
import { format, subDays } from 'date-fns'
import { ru } from 'date-fns/locale'
@@ -10,139 +10,124 @@ import { Badge } from '../components/ui/Badge'
// ── Types ─────────────────────────────────────────────────────────────────────
// negative (< 2 stars) → 'pending' (need manager reply)
// positive (≥ 2 stars) → 'redirect_pending' (send to external platforms)
// pending = negative review (< threshold), awaiting manager reply
// redirect_pending = positive review, will be auto-redirected to platforms
// published = manager replied / redirected
// rejected = spam
type ReviewStatus = 'pending' | 'redirect_pending' | 'published' | 'rejected'
interface Review {
id: string
guestName: string
roomNumber: string
checkOut: string
rating: number // 1–10
text: string
status: ReviewStatus
source: 'qr' | 'email' | 'sms'
createdAt: Date
reply?: string
redirectedTo?: string[]
autoRedirectedTo?: string[]
}
interface ReviewPlatform {
id: string
name: string
url: string
enabled: boolean
}
// ── Default settings ──────────────────────────────────────────────────────────
const DEFAULT_PLATFORMS: ReviewPlatform[] = [
{ id: 'p1', name: 'Booking.com', url: 'https://www.booking.com/hotel/ru/', enabled: true },
{ id: 'p2', name: 'Яндекс Путешествия', url: 'https://travel.yandex.ru/hotels/', enabled: true },
{ id: 'p3', name: 'Google', url: 'https://g.page/r/', enabled: true },
{ id: 'p4', name: '2ГИС', url: 'https://2gis.ru/moscow/firm/', enabled: false },
]
// ── Mock data ─────────────────────────────────────────────────────────────────
// NEGATIVE_THRESHOLD: rating < 4 (= < 2 stars out of 5) → moderation
const NEGATIVE_THRESHOLD = 4
const MOCK_REVIEWS: Review[] = [
{
id: 'rv1',
guestName: 'Дмитрий Волков',
roomNumber: '101',
checkOut: format(subDays(new Date(), 1), 'yyyy-MM-dd'),
rating: 9,
text: 'Замечательный отель! Персонал очень вежливый и отзывчивый. Номер чистый, завтрак вкусный. Обязательно вернёмся.',
id: 'rv1', guestName: 'Дмитрий Волков', roomNumber: '101',
rating: 9, source: 'email', createdAt: new Date(Date.now() - 3600000 * 5),
text: 'Замечательный отель! Персонал очень вежливый. Номер чистый, завтрак вкусный. Обязательно вернёмся.',
status: 'redirect_pending',
source: 'email',
createdAt: new Date(Date.now() - 3600000 * 5),
},
{
id: 'rv2',
guestName: 'Анна Козлова',
roomNumber: '202',
checkOut: format(subDays(new Date(), 2), 'yyyy-MM-dd'),
rating: 2,
text: 'Шум из соседнего номера мешал спать. Кондиционер плохо работал. Персонал помог, но проблему до конца не решили.',
id: 'rv2', guestName: 'Анна Козлова', roomNumber: '202',
rating: 2, source: 'qr', createdAt: new Date(Date.now() - 3600000 * 12),
text: 'Шум из соседнего номера мешал спать. Кондиционер плохо работал. Разочарована.',
status: 'pending',
source: 'qr',
createdAt: new Date(Date.now() - 3600000 * 12),
},
{
id: 'rv3',
guestName: 'Наталья Александрова',
roomNumber: '301',
checkOut: format(subDays(new Date(), 3), 'yyyy-MM-dd'),
rating: 10,
text: 'Лучший отель в котором я останавливалась! Вид из окна потрясающий, кровать удобная, всё очень стильно.',
id: 'rv3', guestName: 'Наталья Александрова', roomNumber: '301',
rating: 10, source: 'sms', createdAt: new Date(Date.now() - 3600000 * 36),
text: 'Лучший отель! Вид из окна потрясающий, кровать удобная, всё стильно.',
status: 'published',
source: 'sms',
createdAt: new Date(Date.now() - 3600000 * 36),
redirectedTo: ['Google', 'Яндекс'],
autoRedirectedTo: ['Google', 'Яндекс Путешествия'],
},
{
id: 'rv4',
guestName: 'Игорь Соколов',
roomNumber: '201',
checkOut: format(subDays(new Date(), 5), 'yyyy-MM-dd'),
rating: 7,
text: 'В целом хорошо. Немного дорого для такого номера. Но расположение отличное, добираться удобно.',
id: 'rv4', guestName: 'Игорь Соколов', roomNumber: '201',
rating: 7, source: 'email', createdAt: new Date(Date.now() - 3600000 * 48),
text: 'В целом хорошо. Немного дорого для такого номера. Расположение отличное.',
status: 'redirect_pending',
source: 'email',
createdAt: new Date(Date.now() - 3600000 * 48),
},
{
id: 'rv5',
guestName: 'Виктор Громов',
roomNumber: '402',
checkOut: format(subDays(new Date(), 6), 'yyyy-MM-dd'),
rating: 3,
text: 'Долго ждали заселения. Номер был убран с опозданием. Разочарованы.',
id: 'rv5', guestName: 'Виктор Громов', roomNumber: '402',
rating: 3, source: 'qr', createdAt: new Date(Date.now() - 3600000 * 60),
text: 'Долго ждали заселения. Номер убран с опозданием. Разочарованы.',
status: 'pending',
source: 'qr',
createdAt: new Date(Date.now() - 3600000 * 60),
},
{
id: 'rv6',
guestName: 'Михаил Орлов',
roomNumber: '401',
checkOut: format(subDays(new Date(), 8), 'yyyy-MM-dd'),
rating: 8,
text: 'Очень доволен пребыванием. Всё было организованно на высшем уровне. Спасибо персоналу.',
id: 'rv6', guestName: 'Михаил Орлов', roomNumber: '401',
rating: 8, source: 'email', createdAt: new Date(Date.now() - 3600000 * 100),
text: 'Очень доволен. Персонал внимательный, номер чистый.',
status: 'published',
source: 'email',
createdAt: new Date(Date.now() - 3600000 * 100),
redirectedTo: ['Booking.com'],
reply: 'Михаил, спасибо за тёплые слова! Ждём вас снова.',
},
]
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 (
<div className="flex items-center gap-0.5">
{Array.from({ length: 5 }, (_, i) => (
<Star
key={i}
size={size}
className={i < stars ? 'text-amber-400 fill-amber-400' : 'text-slate-300 dark:text-slate-600'}
/>
<Star key={i} size={size} className={i < stars ? 'text-amber-400 fill-amber-400' : 'text-slate-300 dark:text-slate-600'} />
))}
<span className="ml-1.5 text-sm font-semibold text-slate-700 dark:text-slate-300">{rating}/10</span>
</div>
)
}
function ratingColor(r: number): string {
function ratingColor(r: number, threshold: 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 >= NEGATIVE_THRESHOLD) return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
if (r >= 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',
}
const SOURCE_LABEL: Record<Review['source'], string> = { qr: 'QR-код', email: 'Email', sms: 'SMS' }
type Tab = 'pending' | 'redirect_pending' | 'published' | 'all'
type Tab = 'pending' | 'redirect_pending' | 'published' | 'all' | 'settings'
// ── Component ─────────────────────────────────────────────────────────────────
export function ReviewsPage() {
const [reviews, setReviews] = useState<Review[]>(MOCK_REVIEWS)
const [tab, setTab] = useState<Tab>('pending')
const [replyId, setReplyId] = useState<string | null>(null)
const [replyText, setReplyText] = useState('')
const [copied, setCopied] = useState(false)
const [reviews, setReviews] = useState<Review[]>(MOCK_REVIEWS)
const [tab, setTab] = useState<Tab>('pending')
const [replyId, setReplyId] = useState<string | null>(null)
const [replyText, setReplyText] = useState('')
const [copied, setCopied] = useState(false)
// Settings state
// Threshold: rating OUT OF 10. Default = 6 (=3 stars out of 5)
const [threshold, setThreshold] = useState(6)
const [platforms, setPlatforms] = useState<ReviewPlatform[]>(DEFAULT_PLATFORMS)
const [newPlatformName, setNewPlatformName] = useState('')
const [newPlatformUrl, setNewPlatformUrl] = useState('')
const pending = reviews.filter(r => r.status === 'pending')
const redirectPending = reviews.filter(r => r.status === 'redirect_pending')
@@ -151,7 +136,6 @@ export function ReviewsPage() {
const avgRating = published.length
? (published.reduce((s, r) => s + r.rating, 0) / published.length).toFixed(1)
: '—'
const nps = published.length
? Math.round(
(published.filter(r => r.rating >= 9).length / published.length * 100) -
@@ -159,7 +143,9 @@ export function ReviewsPage() {
)
: 0
const filtered = tab === 'all' ? reviews : reviews.filter(r => r.status === tab)
const filtered = tab === 'all' ? reviews
: tab === 'settings' ? []
: reviews.filter(r => r.status === tab)
const sendReply = (id: string) => {
if (!replyText.trim()) return
@@ -173,18 +159,16 @@ export function ReviewsPage() {
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 addPlatform = () => {
if (!newPlatformName.trim()) return
setPlatforms(prev => [...prev, {
id: `p-${Date.now()}`,
name: newPlatformName.trim(),
url: newPlatformUrl.trim(),
enabled: true,
}])
setNewPlatformName('')
setNewPlatformUrl('')
}
const copyLink = () => {
@@ -193,11 +177,16 @@ export function ReviewsPage() {
setTimeout(() => setCopied(false), 2000)
}
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 },
const enabledPlatforms = platforms.filter(p => p.enabled)
const thresholdStars = Math.round((threshold / 10) * 5)
const tabs: { key: Tab; label: string; count?: number; colorCls?: string }[] = [
{ key: 'pending', label: 'Требуют ответа', count: pending.length, colorCls: 'bg-red-500 text-white' },
{ key: 'redirect_pending', label: 'Ожидают редирект', count: redirectPending.length, colorCls: 'bg-blue-500 text-white' },
{ key: 'published', label: 'Архив', count: published.length },
{ key: 'all', label: 'Все' },
{ key: 'settings', label: 'Настройки' },
]
return (
@@ -206,17 +195,18 @@ export function ReviewsPage() {
<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">
Отрицательные отзывы (&lt;2 звёзд) — модерация и личный ответ. Положительные — перенаправление на площадки.
Отрицательные (&lt; {thresholdStars} звёзд) → модерация с личным ответом.
Положительные → автоматическое перенаправление на площадки.
</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: 'Средняя оценка', value: avgRating, sub: 'из 10', color: 'text-amber-600 dark:text-amber-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: 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' },
].map(s => (
<div key={s.label} className="card p-4">
<p className={cn('text-2xl font-bold', s.color)}>{s.value}</p>
@@ -226,55 +216,38 @@ export function ReviewsPage() {
))}
</div>
{/* Logic explanation banner */}
{/* Logic banners */}
<div className="grid md:grid-cols-2 gap-3">
<div className="card p-4 border-red-200 dark:border-red-700/50 bg-red-50/50 dark:bg-red-900/10">
<div className="flex items-start gap-3">
<div className="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center shrink-0">
<ThumbsDown size={14} className="text-red-600" />
</div>
<div>
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Отрицательные (&lt; 2 звёзд)</p>
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
Попадают на модерацию. Менеджер пишет личный ответ — гость получает его по email/SMS.
На публичные площадки не публикуется.
</p>
</div>
<div className="card p-3 border-red-200 dark:border-red-700/50 bg-red-50/50 dark:bg-red-900/10 flex items-start gap-3">
<ThumbsDown size={14} className="text-red-600 mt-0.5 shrink-0" />
<div>
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Отрицательные (&lt; {thresholdStars} звёзд)</p>
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
Попадают на модерацию. Менеджер пишет личный ответ, который отправляется гостю по email/SMS. Публично не публикуется.
</p>
</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 className="card p-3 border-blue-200 dark:border-blue-700/50 bg-blue-50/50 dark:bg-blue-900/10 flex items-start gap-3">
<ArrowUpRight size={14} className="text-blue-600 mt-0.5 shrink-0" />
<div>
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Положительные (≥ {thresholdStars} звёзд)</p>
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
Система автоматически предлагает гостю оставить отзыв на: {enabledPlatforms.map(p => p.name).join(', ') || '(настройте площадки)'}
</p>
</div>
</div>
</div>
{/* Public review link */}
{/* Review link */}
<div className="card p-4">
<div className="flex items-start gap-4 flex-wrap">
<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 items-center gap-4 flex-wrap">
<QrCode size={24} className="text-slate-500 shrink-0" />
<div className="flex-1 min-w-0">
<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-код в номере
</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>
<button
onClick={copyLink}
className="shrink-0 flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white dark:bg-slate-700 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} />}
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm mb-1">Ссылка для сбора отзывов</p>
<div className="flex items-center gap-2 p-2 rounded-xl bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600">
<span className="text-xs font-mono text-slate-700 dark:text-slate-300 flex-1 truncate">{REVIEW_LINK}</span>
<button onClick={copyLink} className="shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 text-xs font-medium hover:border-brand-400">
{copied ? <CheckCheck size={11} className="text-emerald-600" /> : <Copy size={11} />}
{copied ? 'Скопировано' : 'Копировать'}
</button>
</div>
@@ -289,20 +262,16 @@ export function ReviewsPage() {
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 shrink-0',
'px-4 py-2.5 text-sm font-medium border-b-2 transition-colors flex items-center gap-1.5 shrink-0 whitespace-nowrap',
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',
)}
>
{t.key === 'settings' && <Settings2 size={13} />}
{t.label}
{t.count !== undefined && t.count > 0 && (
<span className={cn(
'text-[10px] px-1.5 py-0.5 rounded-full font-semibold',
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',
)}>
<span className={cn('text-[10px] px-1.5 py-0.5 rounded-full font-semibold', t.colorCls ?? 'bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-300')}>
{t.count}
</span>
)}
@@ -310,146 +279,246 @@ export function ReviewsPage() {
))}
</div>
{/* Reviews list */}
<div className="space-y-3">
{filtered.length === 0 && (
<div className="card p-8 text-center text-slate-500 dark:text-slate-400">
<MessageSquare size={32} className="mx-auto mb-2 opacity-30" />
<p>Отзывов нет</p>
</div>
)}
{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>
{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>
</div>
<StarRating rating={review.rating} />
<p className="text-sm text-slate-700 dark:text-slate-300 mt-2 leading-relaxed">{review.text}</p>
{/* 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-sm text-slate-700 dark:text-slate-300">{review.reply}</p>
</div>
)}
{/* 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="Личный ответ гостю (отправится по 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={() => 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.reply && replyId !== review.id && (
<>
<button
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"
>
<MessageSquare size={12} />
Ответить гостю
</button>
<button
onClick={() => reject(review.id)}
className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-xs font-medium hover:bg-red-200 transition-colors"
>
<ThumbsDown size={12} />
Отклонить
</button>
</>
)}
{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"
>
<MessageSquare size={12} />
Ответить
</button>
)}
{review.status === 'rejected' && (
<button
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"
>
Восстановить
</button>
)}
{/* ── Settings tab ── */}
{tab === 'settings' && (
<div className="max-w-2xl space-y-5">
{/* Threshold */}
<div className="card p-5 space-y-4">
<h3 className="font-semibold text-slate-900 dark:text-slate-100">Порог перенаправления</h3>
<p className="text-sm text-slate-500 dark:text-slate-400">
Отзывы с оценкой ниже этого порога уходят на модерацию (личный ответ менеджера).
Выше — гость получает ссылку на внешние площадки.
</p>
<div className="flex items-center gap-4">
<div>
<p className="text-xs text-slate-500 mb-2">Порог (из 10 баллов)</p>
<input
type="range"
min={2}
max={9}
value={threshold}
onChange={e => setThreshold(parseInt(e.target.value))}
className="w-48"
/>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-brand-600 dark:text-brand-400">{threshold}</div>
<div className="flex gap-0.5 mt-1">
{Array.from({ length: 5 }, (_, i) => (
<Star key={i} size={14} className={i < thresholdStars ? 'text-amber-400 fill-amber-400' : 'text-slate-300'} />
))}
</div>
<p className="text-xs text-slate-400 mt-0.5">{thresholdStars} из 5 звёзд</p>
</div>
</div>
)
})}
</div>
<div className="flex gap-3 text-xs">
<div className="flex-1 p-2.5 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700">
<p className="font-medium text-red-700 dark:text-red-300">Рейтинг &lt; {threshold}/10</p>
<p className="text-slate-500 mt-0.5">→ Модерация + личный ответ</p>
</div>
<div className="flex-1 p-2.5 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700">
<p className="font-medium text-blue-700 dark:text-blue-300">Рейтинг ≥ {threshold}/10</p>
<p className="text-slate-500 mt-0.5">→ Авторедирект на площадки</p>
</div>
</div>
</div>
{/* Platforms */}
<div className="card p-5 space-y-4">
<h3 className="font-semibold text-slate-900 dark:text-slate-100">Площадки для перенаправления</h3>
<p className="text-sm text-slate-500 dark:text-slate-400">
Гость с положительным отзывом получит ссылки на эти площадки для публикации.
</p>
<div className="space-y-2">
{platforms.map(p => (
<div key={p.id} className="flex items-center gap-3 p-3 rounded-xl border border-slate-200 dark:border-slate-600">
<button
onClick={() => setPlatforms(prev => prev.map(x => x.id === p.id ? { ...x, enabled: !x.enabled } : x))}
className={cn('relative w-9 h-5 rounded-full transition-colors shrink-0', p.enabled ? 'bg-brand-600' : 'bg-slate-300 dark:bg-slate-600')}
>
<div className={cn('absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform', p.enabled ? 'left-[18px]' : 'left-0.5')} />
</button>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-slate-800 dark:text-slate-200">{p.name}</p>
<p className="text-xs text-slate-400 truncate">{p.url || 'URL не указан'}</p>
</div>
{p.url && (
<a href={p.url} target="_blank" rel="noopener noreferrer" className="p-1.5 text-slate-400 hover:text-brand-600">
<ExternalLink size={13} />
</a>
)}
<button
onClick={() => setPlatforms(prev => prev.filter(x => x.id !== p.id))}
className="p-1.5 text-slate-400 hover:text-red-500 transition-colors"
>
<Trash2 size={13} />
</button>
</div>
))}
</div>
{/* Add platform */}
<div className="pt-2 border-t border-slate-200 dark:border-slate-600">
<p className="text-xs font-medium text-slate-600 dark:text-slate-400 mb-2">Добавить площадку</p>
<div className="flex gap-2">
<input
type="text"
className="input flex-1"
placeholder="Название (например: Tripadvisor)"
value={newPlatformName}
onChange={e => setNewPlatformName(e.target.value)}
/>
<input
type="text"
className="input flex-1"
placeholder="Ссылка на страницу отеля"
value={newPlatformUrl}
onChange={e => setNewPlatformUrl(e.target.value)}
/>
<button onClick={addPlatform} className="btn-primary shrink-0">
<Plus size={14} />
Добавить
</button>
</div>
</div>
</div>
</div>
)}
{/* ── Review list ── */}
{tab !== 'settings' && (
<div className="space-y-3">
{filtered.length === 0 && (
<div className="card p-8 text-center text-slate-500 dark:text-slate-400">
<MessageSquare size={32} className="mx-auto mb-2 opacity-30" />
<p>Отзывов нет</p>
</div>
)}
{filtered.map(review => {
const isNegative = review.rating < 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">
<div className={cn(
'w-10 h-10 rounded-full flex items-center justify-center text-base font-bold shrink-0',
ratingColor(review.rating, threshold),
)}>
{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>
{isNegative && <Badge className="bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">Негативный</Badge>}
{!isNegative && review.status === 'redirect_pending' && (
<Badge className="bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 flex items-center gap-1">
<ArrowUpRight size={10} />Авторедирект
</Badge>
)}
{review.autoRedirectedTo && review.autoRedirectedTo.length > 0 && (
<Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300">
→ {review.autoRedirectedTo.join(', ')}
</Badge>
)}
</div>
<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>
{/* Auto-redirect notice */}
{review.status === 'redirect_pending' && (
<div className="mt-2 p-2.5 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700">
<p className="text-xs text-blue-700 dark:text-blue-300">
Гость получит ссылки для публикации на: {enabledPlatforms.map(p => p.name).join(', ')}
</p>
</div>
)}
{/* 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-sm text-slate-700 dark:text-slate-300">{review.reply}</p>
</div>
)}
{replyId === review.id && (
<div className="mt-3 space-y-2">
<textarea
className="input resize-none text-sm w-full"
rows={2}
placeholder="Личный ответ гостю (отправится по email/SMS)..."
value={replyText}
onChange={e => setReplyText(e.target.value)}
autoFocus
/>
<div className="flex gap-2">
<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>
)}
</div>
{/* Actions */}
<div className="flex gap-2 shrink-0 flex-wrap">
{review.status === 'pending' && !review.reply && replyId !== review.id && (
<>
<button
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"
>
<MessageSquare size={12} />Ответить гостю
</button>
<button
onClick={() => reject(review.id)}
className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-xs font-medium hover:bg-red-200 transition-colors"
>
<ThumbsDown size={12} />Отклонить
</button>
</>
)}
{review.status === 'redirect_pending' && (
<button
onClick={() => setReviews(prev => prev.map(r => r.id === review.id
? { ...r, status: 'published', autoRedirectedTo: enabledPlatforms.map(p => p.name) }
: r,
))}
className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-blue-600 text-white text-xs font-medium hover:bg-blue-700 transition-colors"
>
<ArrowUpRight size={12} />Отправить ссылки гостю
</button>
)}
{review.status === 'rejected' && (
<button
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"
>
Восстановить
</button>
)}
</div>
</div>
</div>
)
})}
</div>
)}
</div>
)
}

405
src/pages/RoomCategoriesPage.tsx Normal file
View File

@@ -0,0 +1,405 @@
import { useState, useRef } from 'react'
import { Plus, Pencil, Trash2, ImagePlus, X as XIcon, Tag, ChevronRight } from 'lucide-react'
import { cn } from '../lib/utils'
import type { RoomCategory } from '../types'
// ── Mock data ─────────────────────────────────────────────────────────────────
const CATEGORY_COLORS = [
'#4F46E5', '#059669', '#2563EB', '#7C3AED',
'#DC2626', '#D97706', '#DB2777', '#475569',
]
const AMENITY_LIST = [
'Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe', 'Jacuzzi',
'Panoramic view', 'Kitchen', 'Terrace', 'Butler',
]
export const MOCK_CATEGORIES: RoomCategory[] = [
{
id: 'cat1',
hotelId: 'hotel-1',
name: 'Стандарт',
description: 'Уютные номера с базовым набором удобств. Идеально для деловых поездок и короткого отдыха.',
photos: [],
color: '#4F46E5',
amenities: ['Wi-Fi', 'TV', 'AC'],
},
{
id: 'cat2',
hotelId: 'hotel-1',
name: 'Делюкс',
description: 'Просторные номера с улучшенным интерьером, панорамными окнами и расширенным набором услуг.',
photos: [],
color: '#059669',
amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe'],
},
{
id: 'cat3',
hotelId: 'hotel-1',
name: 'Люкс & Пентхаус',
description: 'Роскошные апартаменты на верхних этажах с потрясающими видами, джакузи и персональным дворецким.',
photos: [],
color: '#7C3AED',
amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe', 'Jacuzzi', 'Panoramic view', 'Butler', 'Terrace'],
},
]
// Mock room counts per category
const MOCK_ROOM_COUNTS: Record<string, number> = {
cat1: 8,
cat2: 5,
cat3: 2,
}
// ── Category Form Modal ────────────────────────────────────────────────────────
interface CategoryFormProps {
category?: RoomCategory
onClose: () => void
onSave: (cat: RoomCategory) => void
}
function CategoryForm({ category, onClose, onSave }: CategoryFormProps) {
const isEdit = !!category
const [tab, setTab] = useState<'main' | 'photos'>('main')
const [name, setName] = useState(category?.name ?? '')
const [description, setDescription] = useState(category?.description ?? '')
const [color, setColor] = useState(category?.color ?? '#4F46E5')
const [amenities, setAmenities] = useState<string[]>(category?.amenities ?? [])
const [photos, setPhotos] = useState<string[]>(category?.photos ?? [])
const [photoIdx, setPhotoIdx] = useState(0)
const fileRef = useRef<HTMLInputElement>(null)
const toggleAmenity = (a: string) =>
setAmenities(prev => prev.includes(a) ? prev.filter(x => x !== a) : [...prev, a])
const handlePhotoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
Array.from(e.target.files ?? []).forEach(file => {
const reader = new FileReader()
reader.onload = ev => {
const url = ev.target?.result as string
setPhotos(prev => { const next = [...prev, url]; setPhotoIdx(next.length - 1); return next })
}
reader.readAsDataURL(file)
})
e.target.value = ''
}
const removePhoto = (i: number) => {
setPhotos(prev => prev.filter((_, idx) => idx !== i))
setPhotoIdx(p => Math.max(0, p - 1))
}
const handleSave = () => {
if (!name.trim()) return
onSave({
id: category?.id ?? `cat-${Date.now()}`,
hotelId: category?.hotelId ?? 'hotel-1',
name: name.trim(),
description,
color,
amenities,
photos,
})
}
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
<div className="relative w-full max-w-2xl bg-white dark:bg-slate-800 rounded-2xl shadow-2xl flex flex-col max-h-[90vh]">
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 dark:border-slate-700 shrink-0">
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
{isEdit ? `Редактировать: ${category.name}` : 'Новая категория'}
</h2>
<button onClick={onClose} className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-500">
<XIcon size={18} />
</button>
</div>
{/* Tab bar */}
<div className="px-6 pt-3 flex gap-1 p-1 shrink-0">
<div className="flex gap-1 p-1 bg-slate-100 dark:bg-slate-700/50 rounded-xl w-full">
{(['main', 'photos'] as const).map(t => (
<button
key={t}
onClick={() => setTab(t)}
className={cn(
'flex-1 py-1.5 rounded-lg text-sm font-medium transition-colors',
tab === t
? 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-sm'
: 'text-slate-600 dark:text-slate-400',
)}
>
{t === 'main' ? 'Основное' : `Фото${photos.length > 0 ? ` (${photos.length})` : ''}`}
</button>
))}
</div>
</div>
{/* Body */}
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
{tab === 'main' && (
<>
<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={name} onChange={e => setName(e.target.value)} />
</div>
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Цвет категории</label>
<div className="flex items-center gap-2 flex-wrap">
{CATEGORY_COLORS.map(c => (
<button
key={c}
onClick={() => setColor(c)}
className={cn(
'w-8 h-8 rounded-full border-2 transition-transform',
color === c ? 'border-slate-900 dark:border-slate-100 scale-110' : 'border-transparent',
)}
style={{ background: c }}
/>
))}
<input type="color" value={color} onChange={e => setColor(e.target.value)} className="w-8 h-8 rounded-full cursor-pointer" />
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Описание</label>
<p className="text-xs text-slate-500 mb-1">Отображается в виджете бронирования как описание категории</p>
<textarea
className="input resize-none w-full"
rows={4}
placeholder="Опишите категорию для гостей..."
value={description}
onChange={e => setDescription(e.target.value)}
/>
</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">
{AMENITY_LIST.map(a => {
const sel = amenities.includes(a)
return (
<button
key={a}
type="button"
onClick={() => toggleAmenity(a)}
className={cn(
'px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
sel
? 'bg-brand-600 text-white border-brand-600'
: 'bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-600 hover:border-brand-400',
)}
>
{a}
</button>
)
})}
</div>
</div>
</>
)}
{tab === 'photos' && (
<>
{photos.length > 0 ? (
<div className="space-y-3">
<div className="relative rounded-xl overflow-hidden bg-slate-100 dark:bg-slate-700" style={{ height: 220 }}>
<img src={photos[photoIdx]} alt="" className="w-full h-full object-cover" />
<button
onClick={() => removePhoto(photoIdx)}
className="absolute top-2 right-2 w-7 h-7 rounded-full bg-red-600 text-white flex items-center justify-center"
>
<XIcon size={13} />
</button>
<div className="absolute bottom-2 right-2 bg-black/50 text-white text-xs px-2 py-0.5 rounded-full">
{photoIdx + 1} / {photos.length}
</div>
</div>
<div className="flex gap-2 overflow-x-auto pb-1">
{photos.map((p, i) => (
<button key={i} onClick={() => setPhotoIdx(i)}
className={cn('w-14 h-14 rounded-lg overflow-hidden border-2 shrink-0', i === photoIdx ? 'border-brand-500' : 'border-transparent')}>
<img src={p} alt="" className="w-full h-full object-cover" />
</button>
))}
</div>
</div>
) : (
<div className="flex flex-col items-center justify-center h-40 rounded-xl border-2 border-dashed border-slate-300 dark:border-slate-600 text-slate-400">
<ImagePlus size={28} className="mb-2 opacity-40" />
<p className="text-sm">Фото категории не загружены</p>
</div>
)}
<input ref={fileRef} type="file" accept="image/*" multiple className="hidden" onChange={handlePhotoUpload} />
<button onClick={() => fileRef.current?.click()} className="btn-secondary w-full justify-center">
<ImagePlus size={14} />
Загрузить фото
</button>
</>
)}
</div>
{/* Footer */}
<div className="shrink-0 px-6 py-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3">
<button onClick={onClose} className="btn-secondary">Отмена</button>
<button onClick={handleSave} className="btn-primary" disabled={!name.trim()}>
{isEdit ? 'Сохранить' : 'Создать категорию'}
</button>
</div>
</div>
</div>
)
}
// ── Main page ─────────────────────────────────────────────────────────────────
export function RoomCategoriesPage() {
const [categories, setCategories] = useState<RoomCategory[]>(MOCK_CATEGORIES)
const [editingCat, setEditingCat] = useState<RoomCategory | undefined>(undefined)
const [formOpen, setFormOpen] = useState(false)
const openCreate = () => { setEditingCat(undefined); setFormOpen(true) }
const openEdit = (cat: RoomCategory) => { setEditingCat(cat); setFormOpen(true) }
const handleSave = (cat: RoomCategory) => {
setCategories(prev => {
const idx = prev.findIndex(c => c.id === cat.id)
if (idx >= 0) { const next = [...prev]; next[idx] = cat; return next }
return [...prev, cat]
})
setFormOpen(false)
}
const handleDelete = (id: string) =>
setCategories(prev => prev.filter(c => c.id !== id))
return (
<div className="p-4 md:p-6 space-y-5">
{/* Header */}
<div className="flex items-center justify-between">
<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>
</div>
<button className="btn-primary" onClick={openCreate}>
<Plus size={15} />Добавить категорию
</button>
</div>
{/* Explanation */}
<div className="card p-4 border-indigo-200 dark:border-indigo-700/50 bg-indigo-50/50 dark:bg-indigo-900/10">
<div className="flex items-start gap-3">
<Tag size={16} className="text-indigo-600 mt-0.5 shrink-0" />
<div>
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Как работают категории</p>
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
Категории позволяют объединять номера в группы (Стандарт, Делюкс, Люкс).
В виджете бронирования гость выбирает категорию, а не конкретный номер.
Категория содержит описание и фотогалерею, которые видят гости на сайте.
</p>
</div>
</div>
</div>
{/* Categories list */}
<div className="space-y-4">
{categories.map(cat => {
const roomCount = MOCK_ROOM_COUNTS[cat.id] ?? 0
return (
<div key={cat.id} className="card p-5">
<div className="flex items-start gap-4">
{/* Color indicator + photo */}
<div
className="w-16 h-16 rounded-xl shrink-0 flex items-center justify-center overflow-hidden"
style={{ background: cat.photos.length > 0 ? undefined : cat.color + '20', borderColor: cat.color, borderWidth: 2 }}
>
{cat.photos.length > 0
? <img src={cat.photos[0]} alt="" className="w-full h-full object-cover" />
: <Tag size={24} style={{ color: cat.color }} />
}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-1">
<h3 className="text-lg font-bold text-slate-900 dark:text-slate-100">{cat.name}</h3>
<span
className="text-xs px-2 py-0.5 rounded-full font-medium"
style={{ background: cat.color + '20', color: cat.color }}
>
{roomCount} {roomCount === 1 ? 'номер' : roomCount < 5 ? 'номера' : 'номеров'}
</span>
</div>
{cat.description && (
<p className="text-sm text-slate-600 dark:text-slate-400 mb-2 line-clamp-2">{cat.description}</p>
)}
{/* Amenities */}
{cat.amenities.length > 0 && (
<div className="flex flex-wrap gap-1">
{cat.amenities.map(a => (
<span key={a} className="text-[10px] bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 px-1.5 py-0.5 rounded">
{a}
</span>
))}
</div>
)}
</div>
{/* Actions */}
<div className="flex items-center gap-2 shrink-0">
{cat.photos.length > 0 && (
<span className="text-xs text-slate-400">{cat.photos.length} фото</span>
)}
<button
onClick={() => openEdit(cat)}
className="p-2 rounded-lg border border-slate-200 dark:border-slate-600 hover:border-brand-400 text-slate-500 hover:text-brand-600 transition-colors"
>
<Pencil size={14} />
</button>
<button
onClick={() => handleDelete(cat.id)}
className="p-2 rounded-lg border border-slate-200 dark:border-slate-600 hover:border-red-400 text-slate-500 hover:text-red-500 transition-colors"
>
<Trash2 size={14} />
</button>
<button
onClick={() => openEdit(cat)}
className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 text-xs font-medium hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors"
>
Номера <ChevronRight size={12} />
</button>
</div>
</div>
</div>
)
})}
{categories.length === 0 && (
<div className="card p-10 text-center">
<Tag size={36} className="mx-auto mb-3 text-slate-300" />
<p className="font-medium text-slate-600 dark:text-slate-400">Категории не созданы</p>
<p className="text-sm text-slate-400 mt-1">Создайте первую категорию для группировки номеров</p>
<button className="btn-primary mt-4" onClick={openCreate}>
<Plus size={14} />Создать категорию
</button>
</div>
)}
</div>
{formOpen && (
<CategoryForm
category={editingCat}
onClose={() => setFormOpen(false)}
onSave={handleSave}
/>
)}
</div>
)
}

2
src/pages/RoomsPage.tsx
View File

@@ -1,6 +1,7 @@
import { useState } from 'react'
import { BedDouble, Users, Wifi, Plus, Search, Pencil } from 'lucide-react'
import { MOCK_ROOMS } from '../data/mockData'
import { MOCK_CATEGORIES } from './RoomCategoriesPage'
import type { Room } from '../types'
import { cn, ROOM_STATUS_COLORS, ROOM_STATUS_LABELS, HK_STATUS_COLORS, HK_STATUS_LABELS, formatCurrency } from '../lib/utils'
import { Badge } from '../components/ui/Badge'
@@ -135,6 +136,7 @@ export function RoomsPage() {
room={editingRoom}
onClose={() => setModalOpen(false)}
onSave={handleSave}
categories={MOCK_CATEGORIES}
/>
</div>
)

114
src/pages/SettingsPage.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react'
import { Save, Building2, Bell, Shield, Globe, CreditCard, BedDouble, Mail, MessageSquare } from 'lucide-react'
import { Save, Building2, Bell, Shield, Globe, CreditCard, BedDouble, Mail, MessageSquare, Users, Plus, X as XIcon } from 'lucide-react'
import { MOCK_HOTELS } from '../data/mockData'
import { cn, PLAN_COLORS, PLAN_LABELS } from '../lib/utils'
import { Badge } from '../components/ui/Badge'
@@ -8,6 +8,7 @@ import { useTheme } from '../contexts/ThemeContext'
const SECTIONS = [
{ id: 'general', label: 'Основные', icon: Building2 },
{ id: 'booking', label: 'Бронирование', icon: BedDouble },
{ id: 'guests', label: 'Гости', icon: Users },
{ id: 'theme', label: 'Внешний вид', icon: Globe },
{ id: 'notify', label: 'Уведомления', icon: Bell },
{ id: 'security', label: 'Безопасность', icon: Shield },
@@ -42,6 +43,19 @@ export function SettingsPage() {
// Booking / assignment settings
const [assignmentStrategy, setAssignmentStrategy] = useState<'spread' | 'together' | 'sequential' | 'manual'>('spread')
const [showBookingSource, setShowBookingSource] = useState(false)
// Guest settings
const [guestTags, setGuestTags] = useState([
{ id: 'vip', label: 'VIP', color: '#F59E0B' },
{ id: 'regular', label: 'Постоянный гость', color: '#3B82F6' },
{ id: 'corp', label: 'Корпоративный', color: '#8B5CF6' },
{ id: 'honey', label: 'Медовый месяц', color: '#EC4899' },
{ id: 'bday', label: 'День рождения', color: '#10B981' },
{ id: 'special', label: 'Особые пожелания', color: '#64748B' },
])
const [newTagLabel, setNewTagLabel] = useState('')
const [newTagColor, setNewTagColor] = useState('#4F46E5')
// Notification toggles
const [notifyToggles, setNotifyToggles] = useState({
@@ -161,6 +175,15 @@ export function SettingsPage() {
<>
<h2 className="font-semibold text-slate-900 dark:text-slate-100">Настройки бронирования</h2>
{/* Source toggle */}
<div className="flex items-center justify-between p-3 rounded-lg bg-slate-50 dark:bg-slate-700/40">
<div>
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">Показывать поле «Источник бронирования»</p>
<p className="text-xs text-slate-500 dark:text-slate-400">В форме создания/редактирования бронирования</p>
</div>
<Toggle on={showBookingSource} onChange={() => setShowBookingSource(p => !p)} />
</div>
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Стратегия автоматического расселения
@@ -224,6 +247,95 @@ export function SettingsPage() {
</>
)}
{/* ── GUESTS ── */}
{section === 'guests' && (
<>
<h2 className="font-semibold text-slate-900 dark:text-slate-100">Статусы гостей</h2>
<p className="text-sm text-slate-500 dark:text-slate-400">
Теги отображаются при создании и редактировании бронирования
</p>
{/* Tag list */}
<div className="space-y-2">
{guestTags.map(tag => (
<div
key={tag.id}
className="flex items-center gap-3 p-3 rounded-lg bg-slate-50 dark:bg-slate-700/40"
>
<input
type="color"
value={tag.color}
onChange={e => setGuestTags(prev => prev.map(t => t.id === tag.id ? { ...t, color: e.target.value } : t))}
className="w-7 h-7 rounded cursor-pointer border-0 bg-transparent"
/>
<input
type="text"
className="input flex-1"
value={tag.label}
onChange={e => setGuestTags(prev => prev.map(t => t.id === tag.id ? { ...t, label: e.target.value } : t))}
/>
<button
onClick={() => setGuestTags(prev => prev.filter(t => t.id !== tag.id))}
className="p-1.5 rounded-lg text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
>
<XIcon size={14} />
</button>
</div>
))}
</div>
{/* Add new tag */}
<div className="flex items-center gap-2 pt-1">
<input
type="color"
value={newTagColor}
onChange={e => setNewTagColor(e.target.value)}
className="w-7 h-7 rounded cursor-pointer border-0 bg-transparent shrink-0"
/>
<input
type="text"
className="input flex-1"
placeholder="Название нового статуса..."
value={newTagLabel}
onChange={e => setNewTagLabel(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter' && newTagLabel.trim()) {
setGuestTags(prev => [...prev, { id: `tag-${Date.now()}`, label: newTagLabel.trim(), color: newTagColor }])
setNewTagLabel('')
}
}}
/>
<button
onClick={() => {
if (!newTagLabel.trim()) return
setGuestTags(prev => [...prev, { id: `tag-${Date.now()}`, label: newTagLabel.trim(), color: newTagColor }])
setNewTagLabel('')
}}
className="btn-primary"
>
<Plus size={14} />
Добавить
</button>
</div>
{/* Preview */}
<div className="pt-2 border-t border-slate-100 dark:border-slate-700">
<p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-2">Предпросмотр тегов</p>
<div className="flex flex-wrap gap-1.5">
{guestTags.map(tag => (
<span
key={tag.id}
className="px-2.5 py-1 rounded-lg text-xs font-medium text-white"
style={{ backgroundColor: tag.color }}
>
{tag.label}
</span>
))}
</div>
</div>
</>
)}
{/* ── THEME ── */}
{section === 'theme' && (
<>