Add room categories, documents module, guest settings, and booking improvements
- 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:
@@ -23,6 +23,8 @@ import { PosPage } from './pages/PosPage'
|
||||
import { ReviewsPage } from './pages/ReviewsPage'
|
||||
import { RoomServicePage } from './pages/RoomServicePage'
|
||||
import { RentalPage } from './pages/RentalPage'
|
||||
import { RoomCategoriesPage } from './pages/RoomCategoriesPage'
|
||||
import { DocumentsPage } from './pages/DocumentsPage'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
@@ -55,6 +57,8 @@ export default function App() {
|
||||
<Route path="/reviews" element={<ReviewsPage />} />
|
||||
<Route path="/room-service" element={<RoomServicePage />} />
|
||||
<Route path="/rental" element={<RentalPage />} />
|
||||
<Route path="/room-categories" element={<RoomCategoriesPage />} />
|
||||
<Route path="/documents" element={<DocumentsPage />} />
|
||||
</Route>
|
||||
|
||||
{/* Admin routes */}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
import { format } from 'date-fns'
|
||||
import { Star, Banknote, CreditCard, AlertCircle, Map } from 'lucide-react'
|
||||
import { Star, Banknote, CreditCard, AlertCircle, Map, Plus, Trash2 } from 'lucide-react'
|
||||
import { Modal } from '../ui/Modal'
|
||||
import { cn, BOOKING_STATUS_LABELS } from '../../lib/utils'
|
||||
import type { Booking, DraftBooking, Room, BookingStatus } from '../../types'
|
||||
@@ -8,6 +8,17 @@ import { FloorMapModal } from '../floormap/FloorMapModal'
|
||||
|
||||
const GUEST_TAGS = ['VIP', 'Постоянный гость', 'Корпоративный', 'Медовый месяц', 'День рождения', 'Особые пожелания']
|
||||
|
||||
const ADDITIONAL_SERVICES = [
|
||||
{ id: 'breakfast', label: 'Завтрак', price: 800 },
|
||||
{ id: 'transfer', label: 'Трансфер', price: 2500 },
|
||||
{ id: 'parking', label: 'Парковка', price: 500 },
|
||||
{ id: 'laundry', label: 'Стирка', price: 600 },
|
||||
{ id: 'minibar', label: 'Мини-бар', price: 1500 },
|
||||
{ id: 'excursion', label: 'Экскурсия', price: 3000 },
|
||||
]
|
||||
|
||||
interface AddedService { id: string; label: string; price: number; qty: number }
|
||||
|
||||
const HOURS = Array.from({ length: 24 }, (_, i) => i)
|
||||
|
||||
interface BookingModalProps {
|
||||
@@ -35,6 +46,8 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
|
||||
const [paymentMethod, setPaymentMethod] = useState<'cash' | 'terminal' | null>(null)
|
||||
const [paidAmount, setPaidAmount] = useState(existing?.paidAmount ?? 0)
|
||||
const [showFloorMap, setShowFloorMap] = useState(false)
|
||||
const [addedServices, setAddedServices] = useState<AddedService[]>([])
|
||||
const [selectedServiceId, setSelectedServiceId] = useState(ADDITIONAL_SERVICES[0].id)
|
||||
|
||||
// Hourly booking state
|
||||
const [isHourly, setIsHourly] = useState(false)
|
||||
@@ -48,11 +61,26 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
|
||||
: 0
|
||||
|
||||
const hourlyHours = Math.max(0, endHour - startHour)
|
||||
const total = isHourly && room?.allowHourly
|
||||
const roomTotal = isHourly && room?.allowHourly
|
||||
? (room.hourlyRate ?? 0) * hourlyHours
|
||||
: (room?.baseRate ?? 0) * nights
|
||||
const servicesTotal = addedServices.reduce((s, sv) => s + sv.price * sv.qty, 0)
|
||||
const total = roomTotal + servicesTotal
|
||||
|
||||
const debt = Math.max(0, total - paidAmount)
|
||||
|
||||
const addService = () => {
|
||||
const svc = ADDITIONAL_SERVICES.find(s => s.id === selectedServiceId)
|
||||
if (!svc) return
|
||||
setAddedServices(prev => {
|
||||
const ex = prev.find(s => s.id === svc.id)
|
||||
if (ex) return prev.map(s => s.id === svc.id ? { ...s, qty: s.qty + 1 } : s)
|
||||
return [...prev, { ...svc, qty: 1 }]
|
||||
})
|
||||
}
|
||||
|
||||
const removeService = (id: string) =>
|
||||
setAddedServices(prev => prev.filter(s => s.id !== id))
|
||||
const isFutureBooking = form.checkIn > format(new Date(), 'yyyy-MM-dd')
|
||||
|
||||
const set = <K extends keyof typeof form>(k: K, v: typeof form[K]) =>
|
||||
@@ -383,6 +411,40 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Additional services */}
|
||||
<div>
|
||||
<label className="block text-xs text-slate-500 dark:text-slate-400 mb-1.5">Дополнительные услуги</label>
|
||||
<div className="flex gap-2 mb-2">
|
||||
<select
|
||||
className="input flex-1 text-sm"
|
||||
value={selectedServiceId}
|
||||
onChange={e => setSelectedServiceId(e.target.value)}
|
||||
>
|
||||
{ADDITIONAL_SERVICES.map(s => (
|
||||
<option key={s.id} value={s.id}>{s.label} — {s.price.toLocaleString('ru-RU')} ₽</option>
|
||||
))}
|
||||
</select>
|
||||
<button type="button" onClick={addService} className="btn-secondary px-2">
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
</div>
|
||||
{addedServices.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
{addedServices.map(s => (
|
||||
<div key={s.id} className="flex items-center justify-between text-xs px-2 py-1 rounded bg-slate-100 dark:bg-slate-700">
|
||||
<span className="text-slate-700 dark:text-slate-300">{s.label} × {s.qty}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-slate-900 dark:text-slate-100">{(s.price * s.qty).toLocaleString('ru-RU')} ₽</span>
|
||||
<button type="button" onClick={() => removeService(s.id)} className="text-slate-400 hover:text-red-500">
|
||||
<Trash2 size={11} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs text-slate-500 dark:text-slate-400 mb-1.5">
|
||||
Оплачено (₽)
|
||||
@@ -424,8 +486,8 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
|
||||
<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-xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{total.toLocaleString('ru-RU')} ₽
|
||||
<span className="font-semibold text-slate-900 dark:text-slate-100">
|
||||
{roomTotal.toLocaleString('ru-RU')} ₽
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
@@ -433,11 +495,26 @@ 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-xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{total.toLocaleString('ru-RU')} ₽
|
||||
<span className="font-semibold text-slate-900 dark:text-slate-100">
|
||||
{roomTotal.toLocaleString('ru-RU')} ₽
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{servicesTotal > 0 && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-600 dark:text-slate-300">Доп. услуги</span>
|
||||
<span className="font-semibold text-slate-900 dark:text-slate-100">{servicesTotal.toLocaleString('ru-RU')} ₽</span>
|
||||
</div>
|
||||
)}
|
||||
{servicesTotal > 0 && (
|
||||
<div className="flex items-center justify-between border-t border-slate-200 dark:border-slate-600 pt-1.5">
|
||||
<span className="text-sm font-medium text-slate-700 dark:text-slate-200">Итого</span>
|
||||
<span className="text-xl font-bold text-slate-900 dark:text-slate-100">{total.toLocaleString('ru-RU')} ₽</span>
|
||||
</div>
|
||||
)}
|
||||
{servicesTotal === 0 && (
|
||||
<div className="text-xl font-bold text-slate-900 dark:text-slate-100 text-right">{total.toLocaleString('ru-RU')} ₽</div>
|
||||
)}
|
||||
{paidAmount > 0 && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-emerald-600 dark:text-emerald-400">Оплачено</span>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { NavLink, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
CalendarDays, BookOpen, BedDouble, Globe, Settings,
|
||||
FileText, LayoutDashboard, Building2, Users, X, Hotel, Puzzle, CalendarRange, Map,
|
||||
FileText, LayoutDashboard, Building2, Users, X, Hotel, Puzzle, CalendarRange, Map, LayoutGrid,
|
||||
} from 'lucide-react'
|
||||
import { useAuth } from '../../contexts/AuthContext'
|
||||
import { useModules } from '../../contexts/ModulesContext'
|
||||
@@ -135,6 +135,7 @@ export function Sidebar({ open, onClose }: SidebarProps) {
|
||||
Управление
|
||||
</p>
|
||||
<NavItem to="/rooms" icon={BedDouble} label="Номера" onClick={onClose} />
|
||||
<NavItem to="/room-categories" icon={LayoutGrid} label="Категории номеров" onClick={onClose} />
|
||||
<NavItem to="/floor-map" icon={Map} label="План этажей" onClick={onClose} />
|
||||
<NavItem to="/availability" icon={CalendarRange} label="Доступность" onClick={onClose} />
|
||||
{isModuleActive('channel-manager') && (
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useState } from 'react'
|
||||
import { useState, useRef } from 'react'
|
||||
import { Modal } from '../ui/Modal'
|
||||
import { cn } from '../../lib/utils'
|
||||
import type { Room, RoomStatus, HousekeepingStatus, BedType } from '../../types'
|
||||
import { ImagePlus, X as XIcon, ChevronLeft, ChevronRight } from 'lucide-react'
|
||||
|
||||
const AMENITY_LIST = [
|
||||
'Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe', 'Jacuzzi',
|
||||
@@ -32,15 +33,20 @@ const HK_STATUSES: { value: HousekeepingStatus; label: string }[] = [
|
||||
{ value: 'inspect', label: 'Проверка' },
|
||||
]
|
||||
|
||||
// ── Tab type ───────────────────────────────────────────────────────────────────
|
||||
type ModalTab = 'main' | 'description' | 'photos'
|
||||
|
||||
interface RoomModalProps {
|
||||
open: boolean
|
||||
room?: Room
|
||||
categories?: { id: string; name: string }[]
|
||||
onClose: () => void
|
||||
onSave: (room: Room) => void
|
||||
}
|
||||
|
||||
export function RoomModal({ open, room, onClose, onSave }: RoomModalProps) {
|
||||
export function RoomModal({ open, room, categories = [], onClose, onSave }: RoomModalProps) {
|
||||
const isEdit = !!room
|
||||
const [tab, setTab] = useState<ModalTab>('main')
|
||||
|
||||
const [form, setForm] = useState({
|
||||
number: room?.number ?? '',
|
||||
@@ -55,9 +61,14 @@ export function RoomModal({ open, room, onClose, onSave }: RoomModalProps) {
|
||||
sortOrder: room?.sortOrder ?? 99,
|
||||
allowHourly: room?.allowHourly ?? false,
|
||||
hourlyRate: room?.hourlyRate ?? 1000,
|
||||
categoryId: room?.categoryId ?? '',
|
||||
description: room?.description ?? '',
|
||||
})
|
||||
|
||||
const [amenities, setAmenities] = useState<string[]>(room?.amenities ?? ['Wi-Fi', 'TV', 'AC'])
|
||||
const [photos, setPhotos] = useState<string[]>(room?.photos ?? [])
|
||||
const [photoIdx, setPhotoIdx] = useState(0)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const set = <K extends keyof typeof form>(k: K, v: typeof form[K]) =>
|
||||
setForm(prev => ({ ...prev, [k]: v }))
|
||||
@@ -65,9 +76,31 @@ export function RoomModal({ open, room, onClose, onSave }: RoomModalProps) {
|
||||
const toggleAmenity = (a: string) =>
|
||||
setAmenities(prev => prev.includes(a) ? prev.filter(x => x !== a) : [...prev, a])
|
||||
|
||||
const handlePhotoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(e.target.files ?? [])
|
||||
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 = (idx: number) => {
|
||||
setPhotos(prev => prev.filter((_, i) => i !== idx))
|
||||
setPhotoIdx(p => Math.max(0, p - 1))
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
if (!form.number) return
|
||||
const saved: Room = {
|
||||
onSave({
|
||||
id: room?.id ?? `r-${Date.now()}`,
|
||||
hotelId: room?.hotelId ?? 'hotel-1',
|
||||
number: form.number,
|
||||
@@ -83,9 +116,17 @@ export function RoomModal({ open, room, onClose, onSave }: RoomModalProps) {
|
||||
sortOrder: form.sortOrder,
|
||||
allowHourly: form.allowHourly || undefined,
|
||||
hourlyRate: form.allowHourly ? form.hourlyRate : undefined,
|
||||
categoryId: form.categoryId || undefined,
|
||||
description: form.description || undefined,
|
||||
photos: photos.length > 0 ? photos : undefined,
|
||||
})
|
||||
}
|
||||
onSave(saved)
|
||||
}
|
||||
|
||||
const TABS: { key: ModalTab; label: string }[] = [
|
||||
{ key: 'main', label: 'Основное' },
|
||||
{ key: 'description', label: 'Описание' },
|
||||
{ key: 'photos', label: `Фото${photos.length > 0 ? ` (${photos.length})` : ''}` },
|
||||
]
|
||||
|
||||
return (
|
||||
<Modal
|
||||
@@ -102,154 +143,97 @@ export function RoomModal({ open, room, onClose, onSave }: RoomModalProps) {
|
||||
</>
|
||||
}
|
||||
>
|
||||
{/* Tab bar */}
|
||||
<div className="flex gap-1 p-1 bg-slate-100 dark:bg-slate-700/50 rounded-xl mb-4">
|
||||
{TABS.map(t => (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => setTab(t.key)}
|
||||
className={cn(
|
||||
'flex-1 py-1.5 rounded-lg text-sm font-medium transition-colors',
|
||||
tab === t.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',
|
||||
)}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── Main tab ── */}
|
||||
{tab === 'main' && (
|
||||
<div className="space-y-4">
|
||||
{/* Row 1: Number | Name */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<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="101"
|
||||
value={form.number}
|
||||
onChange={e => set('number', e.target.value)}
|
||||
/>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Номер *</label>
|
||||
<input type="text" className="input" placeholder="101" value={form.number} onChange={e => set('number', e.target.value)} />
|
||||
</div>
|
||||
<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={form.name}
|
||||
onChange={e => set('name', e.target.value)}
|
||||
/>
|
||||
<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={form.name} onChange={e => set('name', e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2: Floor | Type */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<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={20}
|
||||
className="input"
|
||||
value={form.floor}
|
||||
onChange={e => set('floor', parseInt(e.target.value) || 1)}
|
||||
/>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Этаж</label>
|
||||
<input type="number" min={1} max={20} className="input" value={form.floor} onChange={e => set('floor', parseInt(e.target.value) || 1)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Тип номера
|
||||
</label>
|
||||
<select
|
||||
className="input"
|
||||
value={form.type}
|
||||
onChange={e => set('type', e.target.value)}
|
||||
>
|
||||
{ROOM_TYPES.map(t => (
|
||||
<option key={t} value={t}>{t}</option>
|
||||
))}
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Тип номера</label>
|
||||
<select className="input" value={form.type} onChange={e => set('type', e.target.value)}>
|
||||
{ROOM_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3: Bed type | Max guests */}
|
||||
{categories.length > 0 && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Категория</label>
|
||||
<select className="input" value={form.categoryId} onChange={e => set('categoryId', e.target.value)}>
|
||||
<option value="">— Без категории —</option>
|
||||
{categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Тип кровати
|
||||
</label>
|
||||
<select
|
||||
className="input"
|
||||
value={form.bedType}
|
||||
onChange={e => set('bedType', e.target.value as BedType)}
|
||||
>
|
||||
{BED_TYPES.map(b => (
|
||||
<option key={b.value} value={b.value}>{b.label}</option>
|
||||
))}
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Тип кровати</label>
|
||||
<select className="input" value={form.bedType} onChange={e => set('bedType', e.target.value as BedType)}>
|
||||
{BED_TYPES.map(b => <option key={b.value} value={b.value}>{b.label}</option>)}
|
||||
</select>
|
||||
</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={10}
|
||||
className="input"
|
||||
value={form.maxGuests}
|
||||
onChange={e => set('maxGuests', parseInt(e.target.value) || 1)}
|
||||
/>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Макс. гостей</label>
|
||||
<input type="number" min={1} max={10} className="input" value={form.maxGuests} onChange={e => set('maxGuests', parseInt(e.target.value) || 1)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 4: Base rate | Status */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<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"
|
||||
value={form.baseRate}
|
||||
onChange={e => set('baseRate', parseInt(e.target.value) || 0)}
|
||||
/>
|
||||
<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" value={form.baseRate} onChange={e => set('baseRate', parseInt(e.target.value) || 0)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Статус номера
|
||||
</label>
|
||||
<select
|
||||
className="input"
|
||||
value={form.status}
|
||||
onChange={e => set('status', e.target.value as RoomStatus)}
|
||||
>
|
||||
{ROOM_STATUSES.map(s => (
|
||||
<option key={s.value} value={s.value}>{s.label}</option>
|
||||
))}
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Статус номера</label>
|
||||
<select className="input" value={form.status} onChange={e => set('status', e.target.value as RoomStatus)}>
|
||||
{ROOM_STATUSES.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 5: Housekeeping | Sort order */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Статус уборки
|
||||
</label>
|
||||
<select
|
||||
className="input"
|
||||
value={form.housekeepingStatus}
|
||||
onChange={e => set('housekeepingStatus', e.target.value as HousekeepingStatus)}
|
||||
>
|
||||
{HK_STATUSES.map(s => (
|
||||
<option key={s.value} value={s.value}>{s.label}</option>
|
||||
))}
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Статус уборки</label>
|
||||
<select className="input" value={form.housekeepingStatus} onChange={e => set('housekeepingStatus', e.target.value as HousekeepingStatus)}>
|
||||
{HK_STATUSES.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
|
||||
</select>
|
||||
</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}
|
||||
className="input"
|
||||
value={form.sortOrder}
|
||||
onChange={e => set('sortOrder', parseInt(e.target.value) || 1)}
|
||||
/>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Порядок сортировки</label>
|
||||
<input type="number" min={1} className="input" value={form.sortOrder} onChange={e => set('sortOrder', parseInt(e.target.value) || 1)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -260,45 +244,26 @@ export function RoomModal({ open, room, onClose, onSave }: RoomModalProps) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => set('allowHourly', !form.allowHourly)}
|
||||
className={cn(
|
||||
'relative w-11 h-6 rounded-full transition-colors',
|
||||
form.allowHourly ? 'bg-brand-600' : 'bg-slate-300 dark:bg-slate-600',
|
||||
)}
|
||||
className={cn('relative w-11 h-6 rounded-full transition-colors', form.allowHourly ? 'bg-brand-600' : 'bg-slate-300 dark:bg-slate-600')}
|
||||
>
|
||||
<div className={cn(
|
||||
'absolute top-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform',
|
||||
form.allowHourly ? 'left-[22px]' : 'left-0.5',
|
||||
)} />
|
||||
<div className={cn('absolute top-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform', form.allowHourly ? 'left-[22px]' : 'left-0.5')} />
|
||||
</button>
|
||||
</div>
|
||||
{form.allowHourly && (
|
||||
{form.allowHourly ? (
|
||||
<div className="p-4">
|
||||
<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 w-40"
|
||||
value={form.hourlyRate}
|
||||
onChange={e => set('hourlyRate', parseInt(e.target.value) || 0)}
|
||||
/>
|
||||
<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 w-40" value={form.hourlyRate} onChange={e => set('hourlyRate', parseInt(e.target.value) || 0)} />
|
||||
</div>
|
||||
)}
|
||||
{!form.allowHourly && (
|
||||
) : (
|
||||
<div className="px-4 py-3">
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Разрешить бронирование номера на несколько часов
|
||||
</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Разрешить бронирование номера на несколько часов</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Amenities */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
Удобства
|
||||
</label>
|
||||
<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 selected = amenities.includes(a)
|
||||
@@ -321,6 +286,120 @@ export function RoomModal({ open, room, onClose, onSave }: RoomModalProps) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Description tab ── */}
|
||||
{tab === 'description' && (
|
||||
<div className="space-y-4">
|
||||
<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 dark:text-slate-400 mb-2">
|
||||
Будет отображаться в виджете онлайн-бронирования для гостей.
|
||||
</p>
|
||||
<textarea
|
||||
className="input resize-none w-full"
|
||||
rows={8}
|
||||
placeholder="Опишите номер: интерьер, вид из окна, особенности, что включено..."
|
||||
value={form.description}
|
||||
onChange={e => set('description', e.target.value)}
|
||||
/>
|
||||
<p className="text-xs text-slate-400 mt-1 text-right">{form.description.length} символов</p>
|
||||
</div>
|
||||
|
||||
{form.description && (
|
||||
<div className="rounded-xl border border-slate-200 dark:border-slate-600 p-4">
|
||||
<p className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-2">Предпросмотр</p>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300 leading-relaxed whitespace-pre-wrap">{form.description}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Photos tab ── */}
|
||||
{tab === 'photos' && (
|
||||
<div className="space-y-4">
|
||||
{/* Main photo viewer */}
|
||||
{photos.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
<div className="relative rounded-xl overflow-hidden bg-slate-100 dark:bg-slate-700" style={{ height: 240 }}>
|
||||
<img
|
||||
src={photos[photoIdx]}
|
||||
alt={`Фото ${photoIdx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{photos.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setPhotoIdx(p => (p - 1 + photos.length) % photos.length)}
|
||||
className="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPhotoIdx(p => (p + 1) % photos.length)}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70"
|
||||
>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<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 hover:bg-red-700"
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* Thumbnails */}
|
||||
<div className="flex gap-2 overflow-x-auto pb-1">
|
||||
{photos.map((p, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setPhotoIdx(i)}
|
||||
className={cn(
|
||||
'w-16 h-16 rounded-lg overflow-hidden border-2 shrink-0 transition-colors',
|
||||
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-48 rounded-xl border-2 border-dashed border-slate-300 dark:border-slate-600 text-slate-400">
|
||||
<ImagePlus size={32} className="mb-2 opacity-40" />
|
||||
<p className="text-sm">Фотографий пока нет</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upload button */}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={handlePhotoUpload}
|
||||
/>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="btn-secondary w-full justify-center"
|
||||
>
|
||||
<ImagePlus size={15} />
|
||||
{photos.length > 0 ? 'Добавить ещё фото' : 'Загрузить фотографии'}
|
||||
</button>
|
||||
<p className="text-xs text-slate-400 text-center">
|
||||
Поддерживаются JPG, PNG, WEBP. Первое фото — обложка в виджете.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {
|
||||
Wifi, CreditCard, Tv2, KeyRound,
|
||||
BarChart3, Globe, CalendarCheck2, Sparkles, Network,
|
||||
ShoppingCart, Star, UtensilsCrossed, CalendarClock, ArrowLeftRight,
|
||||
ShoppingCart, Star, UtensilsCrossed, CalendarClock, ArrowLeftRight, FileText,
|
||||
} from 'lucide-react'
|
||||
import type { ElementType } from 'react'
|
||||
|
||||
@@ -367,6 +367,31 @@ export const MODULES_DATA: ModuleDef[] = [
|
||||
icon: CalendarClock,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'documents',
|
||||
name: 'Конструктор документов',
|
||||
tagline: 'Печатные документы для гостей',
|
||||
description:
|
||||
'Создайте шаблоны регистрационных карт, счетов и договоров с переменными-подстановками. При заселении распечатайте весь пакет или выбранные документы одним кликом.',
|
||||
icon: FileText,
|
||||
iconBg: 'bg-slate-100 dark:bg-slate-900/40',
|
||||
iconColor: 'text-slate-600 dark:text-slate-400',
|
||||
accentColor: 'bg-slate-500',
|
||||
price: 0,
|
||||
badge: 'Входит в тариф',
|
||||
features: [
|
||||
'Редактор шаблонов с переменными ({guest_name}, {room_number} и др.)',
|
||||
'Типы: регистрационная карта, счёт, договор, информация',
|
||||
'Пакет документов при заселении',
|
||||
'Выборочная и групповая печать',
|
||||
'Предпросмотр с подстановкой данных гостя',
|
||||
],
|
||||
sidebarItem: {
|
||||
path: '/documents',
|
||||
label: 'Документы',
|
||||
icon: FileText,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'migration',
|
||||
name: 'Миграция данных',
|
||||
|
||||
490
src/pages/DocumentsPage.tsx
Normal file
490
src/pages/DocumentsPage.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@@ -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,132 +10,110 @@ 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)
|
||||
@@ -144,6 +122,13 @@ export function ReviewsPage() {
|
||||
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')
|
||||
const published = reviews.filter(r => r.status === 'published')
|
||||
@@ -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,7 +195,8 @@ 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">
|
||||
Отрицательные отзывы (<2 звёзд) — модерация и личный ответ. Положительные — перенаправление на площадки.
|
||||
Отрицательные (< {thresholdStars} звёзд) → модерация с личным ответом.
|
||||
Положительные → автоматическое перенаправление на площадки.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -215,7 +205,7 @@ export function ReviewsPage() {
|
||||
{[
|
||||
{ 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: 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">
|
||||
@@ -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 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">Отрицательные (< 2 звёзд)</p>
|
||||
<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">
|
||||
Попадают на модерацию. Менеджер пишет личный ответ — гость получает его по email/SMS.
|
||||
На публичные площадки не публикуется.
|
||||
Попадают на модерацию. Менеджер пишет личный ответ, который отправляется гостю по 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 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">Положительные (≥ 2 звёзд)</p>
|
||||
<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">
|
||||
Предлагаем гостю оставить отзыв на внешней площадке: Booking.com, Google, Яндекс и т.д.
|
||||
Система автоматически предлагает гостю оставить отзыв на: {enabledPlatforms.map(p => p.name).join(', ') || '(настройте площадки)'}
|
||||
</p>
|
||||
</div>
|
||||
</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,7 +279,114 @@ export function ReviewsPage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Reviews list */}
|
||||
{/* ── 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 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">Рейтинг < {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">
|
||||
@@ -319,7 +395,7 @@ export function ReviewsPage() {
|
||||
</div>
|
||||
)}
|
||||
{filtered.map(review => {
|
||||
const isNegative = review.rating < NEGATIVE_THRESHOLD
|
||||
const isNegative = review.rating < threshold
|
||||
return (
|
||||
<div
|
||||
key={review.id}
|
||||
@@ -330,8 +406,10 @@ export function ReviewsPage() {
|
||||
)}
|
||||
>
|
||||
<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))}>
|
||||
<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>
|
||||
|
||||
@@ -342,26 +420,40 @@ export function ReviewsPage() {
|
||||
<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 && (
|
||||
{!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.redirectedTo.join(', ')}
|
||||
→ {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-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
|
||||
@@ -370,6 +462,7 @@ export function ReviewsPage() {
|
||||
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>
|
||||
@@ -377,34 +470,6 @@ export function ReviewsPage() {
|
||||
</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 */}
|
||||
@@ -415,30 +480,33 @@ export function ReviewsPage() {
|
||||
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} />
|
||||
Ответить гостю
|
||||
<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} />
|
||||
Отклонить
|
||||
<ThumbsDown size={12} />Отклонить
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{review.status === 'published' && !review.reply && replyId !== review.id && isNegative && (
|
||||
{review.status === 'redirect_pending' && (
|
||||
<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"
|
||||
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"
|
||||
>
|
||||
<MessageSquare size={12} />
|
||||
Ответить
|
||||
<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))}
|
||||
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"
|
||||
>
|
||||
Восстановить
|
||||
@@ -450,6 +518,7 @@ export function ReviewsPage() {
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
405
src/pages/RoomCategoriesPage.tsx
Normal file
405
src/pages/RoomCategoriesPage.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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' && (
|
||||
<>
|
||||
|
||||
@@ -42,6 +42,16 @@ export type RoomStatus = 'available' | 'occupied' | 'maintenance' | 'blocked'
|
||||
export type HousekeepingStatus = 'clean' | 'dirty' | 'cleaning' | 'inspect'
|
||||
export type BedType = 'single' | 'double' | 'queen' | 'king' | 'twin'
|
||||
|
||||
export interface RoomCategory {
|
||||
id: string
|
||||
hotelId: string
|
||||
name: string
|
||||
description: string
|
||||
photos: string[]
|
||||
color: string
|
||||
amenities: string[]
|
||||
}
|
||||
|
||||
export interface Room {
|
||||
id: string
|
||||
hotelId: string
|
||||
@@ -58,6 +68,19 @@ export interface Room {
|
||||
sortOrder: number
|
||||
allowHourly?: boolean
|
||||
hourlyRate?: number
|
||||
description?: string
|
||||
photos?: string[]
|
||||
categoryId?: string
|
||||
}
|
||||
|
||||
export interface DocumentTemplate {
|
||||
id: string
|
||||
hotelId: string
|
||||
name: string
|
||||
type: 'registration' | 'invoice' | 'contract' | 'info'
|
||||
content: string
|
||||
forCheckIn: boolean
|
||||
printOrder: number
|
||||
}
|
||||
|
||||
// ─── Guest ───────────────────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user