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

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

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

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

6
src/App.tsx
View File

@@ -23,6 +23,8 @@ import { PosPage } from './pages/PosPage'
import { ReviewsPage } from './pages/ReviewsPage' import { ReviewsPage } from './pages/ReviewsPage'
import { RoomServicePage } from './pages/RoomServicePage' import { RoomServicePage } from './pages/RoomServicePage'
import { RentalPage } from './pages/RentalPage' import { RentalPage } from './pages/RentalPage'
import { RoomCategoriesPage } from './pages/RoomCategoriesPage'
import { DocumentsPage } from './pages/DocumentsPage'
export default function App() { export default function App() {
return ( return (
@@ -54,7 +56,9 @@ export default function App() {
<Route path="/pos" element={<PosPage />} /> <Route path="/pos" element={<PosPage />} />
<Route path="/reviews" element={<ReviewsPage />} /> <Route path="/reviews" element={<ReviewsPage />} />
<Route path="/room-service" element={<RoomServicePage />} /> <Route path="/room-service" element={<RoomServicePage />} />
<Route path="/rental" element={<RentalPage />} /> <Route path="/rental" element={<RentalPage />} />
<Route path="/room-categories" element={<RoomCategoriesPage />} />
<Route path="/documents" element={<DocumentsPage />} />
</Route> </Route>
{/* Admin routes */} {/* Admin routes */}

89
src/components/bookings/BookingModal.tsx
View File

@@ -1,6 +1,6 @@
import { useState } from 'react' import { useState } from 'react'
import { format } from 'date-fns' 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 { Modal } from '../ui/Modal'
import { cn, BOOKING_STATUS_LABELS } from '../../lib/utils' import { cn, BOOKING_STATUS_LABELS } from '../../lib/utils'
import type { Booking, DraftBooking, Room, BookingStatus } from '../../types' import type { Booking, DraftBooking, Room, BookingStatus } from '../../types'
@@ -8,6 +8,17 @@ import { FloorMapModal } from '../floormap/FloorMapModal'
const GUEST_TAGS = ['VIP', 'Постоянный гость', 'Корпоративный', 'Медовый месяц', 'День рождения', 'Особые пожелания'] 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) const HOURS = Array.from({ length: 24 }, (_, i) => i)
interface BookingModalProps { interface BookingModalProps {
@@ -35,6 +46,8 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
const [paymentMethod, setPaymentMethod] = useState<'cash' | 'terminal' | null>(null) const [paymentMethod, setPaymentMethod] = useState<'cash' | 'terminal' | null>(null)
const [paidAmount, setPaidAmount] = useState(existing?.paidAmount ?? 0) const [paidAmount, setPaidAmount] = useState(existing?.paidAmount ?? 0)
const [showFloorMap, setShowFloorMap] = useState(false) const [showFloorMap, setShowFloorMap] = useState(false)
const [addedServices, setAddedServices] = useState<AddedService[]>([])
const [selectedServiceId, setSelectedServiceId] = useState(ADDITIONAL_SERVICES[0].id)
// Hourly booking state // Hourly booking state
const [isHourly, setIsHourly] = useState(false) const [isHourly, setIsHourly] = useState(false)
@@ -48,11 +61,26 @@ export function BookingModal({ open, draft, rooms, onClose, onSave, existing }:
: 0 : 0
const hourlyHours = Math.max(0, endHour - startHour) const hourlyHours = Math.max(0, endHour - startHour)
const total = isHourly && room?.allowHourly const roomTotal = isHourly && room?.allowHourly
? (room.hourlyRate ?? 0) * hourlyHours ? (room.hourlyRate ?? 0) * hourlyHours
: (room?.baseRate ?? 0) * nights : (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 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 isFutureBooking = form.checkIn > format(new Date(), 'yyyy-MM-dd')
const set = <K extends keyof typeof form>(k: K, v: typeof form[K]) => 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> </button>
</div> </div>
</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> <div>
<label className="block text-xs text-slate-500 dark:text-slate-400 mb-1.5"> <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"> <span className="text-sm text-slate-600 dark:text-slate-300">
{hourlyHours} {hourlyHours === 1 ? 'час' : hourlyHours < 5 ? 'часа' : 'часов'} × {(room.hourlyRate ?? 0).toLocaleString('ru-RU')} ₽ {hourlyHours} {hourlyHours === 1 ? 'час' : hourlyHours < 5 ? 'часа' : 'часов'} × {(room.hourlyRate ?? 0).toLocaleString('ru-RU')} ₽
</span> </span>
<span className="text-xl font-bold text-slate-900 dark:text-slate-100"> <span className="font-semibold text-slate-900 dark:text-slate-100">
{total.toLocaleString('ru-RU')} ₽ {roomTotal.toLocaleString('ru-RU')} ₽
</span> </span>
</div> </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"> <span className="text-sm text-slate-600 dark:text-slate-300">
{nights} {nights === 1 ? 'ночь' : nights < 5 ? 'ночи' : 'ночей'} × {room.baseRate.toLocaleString('ru-RU')} ₽ {nights} {nights === 1 ? 'ночь' : nights < 5 ? 'ночи' : 'ночей'} × {room.baseRate.toLocaleString('ru-RU')} ₽
</span> </span>
<span className="text-xl font-bold text-slate-900 dark:text-slate-100"> <span className="font-semibold text-slate-900 dark:text-slate-100">
{total.toLocaleString('ru-RU')} ₽ {roomTotal.toLocaleString('ru-RU')} ₽
</span> </span>
</div> </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 && ( {paidAmount > 0 && (
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm">
<span className="text-emerald-600 dark:text-emerald-400">Оплачено</span> <span className="text-emerald-600 dark:text-emerald-400">Оплачено</span>

7
src/components/layout/Sidebar.tsx
View File

@@ -1,7 +1,7 @@
import { NavLink, useNavigate } from 'react-router-dom' import { NavLink, useNavigate } from 'react-router-dom'
import { import {
CalendarDays, BookOpen, BedDouble, Globe, Settings, 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' } from 'lucide-react'
import { useAuth } from '../../contexts/AuthContext' import { useAuth } from '../../contexts/AuthContext'
import { useModules } from '../../contexts/ModulesContext' import { useModules } from '../../contexts/ModulesContext'
@@ -134,8 +134,9 @@ export function Sidebar({ open, onClose }: SidebarProps) {
<p className="px-3 pt-3 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider"> <p className="px-3 pt-3 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">
Управление Управление
</p> </p>
<NavItem to="/rooms" icon={BedDouble} label="Номера" onClick={onClose} /> <NavItem to="/rooms" icon={BedDouble} label="Номера" onClick={onClose} />
<NavItem to="/floor-map" icon={Map} 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} /> <NavItem to="/availability" icon={CalendarRange} label="Доступность" onClick={onClose} />
{isModuleActive('channel-manager') && ( {isModuleActive('channel-manager') && (
<NavItem <NavItem

547
src/components/rooms/RoomModal.tsx
View File

@@ -1,7 +1,8 @@
import { useState } from 'react' import { useState, useRef } from 'react'
import { Modal } from '../ui/Modal' import { Modal } from '../ui/Modal'
import { cn } from '../../lib/utils' import { cn } from '../../lib/utils'
import type { Room, RoomStatus, HousekeepingStatus, BedType } from '../../types' import type { Room, RoomStatus, HousekeepingStatus, BedType } from '../../types'
import { ImagePlus, X as XIcon, ChevronLeft, ChevronRight } from 'lucide-react'
const AMENITY_LIST = [ const AMENITY_LIST = [
'Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe', 'Jacuzzi', 'Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe', 'Jacuzzi',
@@ -32,32 +33,42 @@ const HK_STATUSES: { value: HousekeepingStatus; label: string }[] = [
{ value: 'inspect', label: 'Проверка' }, { value: 'inspect', label: 'Проверка' },
] ]
// ── Tab type ───────────────────────────────────────────────────────────────────
type ModalTab = 'main' | 'description' | 'photos'
interface RoomModalProps { interface RoomModalProps {
open: boolean open: boolean
room?: Room room?: Room
categories?: { id: string; name: string }[]
onClose: () => void onClose: () => void
onSave: (room: Room) => 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 isEdit = !!room
const [tab, setTab] = useState<ModalTab>('main')
const [form, setForm] = useState({ const [form, setForm] = useState({
number: room?.number ?? '', number: room?.number ?? '',
name: room?.name ?? '', name: room?.name ?? '',
floor: room?.floor ?? 1, floor: room?.floor ?? 1,
type: room?.type ?? 'Стандарт', type: room?.type ?? 'Стандарт',
bedType: (room?.bedType ?? 'double') as BedType, bedType: (room?.bedType ?? 'double') as BedType,
maxGuests: room?.maxGuests ?? 2, maxGuests: room?.maxGuests ?? 2,
baseRate: room?.baseRate ?? 5000, baseRate: room?.baseRate ?? 5000,
status: (room?.status ?? 'available') as RoomStatus, status: (room?.status ?? 'available') as RoomStatus,
housekeepingStatus: (room?.housekeepingStatus ?? 'clean') as HousekeepingStatus, housekeepingStatus: (room?.housekeepingStatus ?? 'clean') as HousekeepingStatus,
sortOrder: room?.sortOrder ?? 99, sortOrder: room?.sortOrder ?? 99,
allowHourly: room?.allowHourly ?? false, allowHourly: room?.allowHourly ?? false,
hourlyRate: room?.hourlyRate ?? 1000, hourlyRate: room?.hourlyRate ?? 1000,
categoryId: room?.categoryId ?? '',
description: room?.description ?? '',
}) })
const [amenities, setAmenities] = useState<string[]>(room?.amenities ?? ['Wi-Fi', 'TV', 'AC']) 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]) => const set = <K extends keyof typeof form>(k: K, v: typeof form[K]) =>
setForm(prev => ({ ...prev, [k]: v })) setForm(prev => ({ ...prev, [k]: v }))
@@ -65,9 +76,31 @@ export function RoomModal({ open, room, onClose, onSave }: RoomModalProps) {
const toggleAmenity = (a: string) => const toggleAmenity = (a: string) =>
setAmenities(prev => prev.includes(a) ? prev.filter(x => x !== a) : [...prev, a]) 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 = () => { const handleSave = () => {
if (!form.number) return if (!form.number) return
const saved: Room = { onSave({
id: room?.id ?? `r-${Date.now()}`, id: room?.id ?? `r-${Date.now()}`,
hotelId: room?.hotelId ?? 'hotel-1', hotelId: room?.hotelId ?? 'hotel-1',
number: form.number, number: form.number,
@@ -83,10 +116,18 @@ export function RoomModal({ open, room, onClose, onSave }: RoomModalProps) {
sortOrder: form.sortOrder, sortOrder: form.sortOrder,
allowHourly: form.allowHourly || undefined, allowHourly: form.allowHourly || undefined,
hourlyRate: form.allowHourly ? form.hourlyRate : undefined, hourlyRate: form.allowHourly ? form.hourlyRate : undefined,
} categoryId: form.categoryId || undefined,
onSave(saved) description: form.description || undefined,
photos: photos.length > 0 ? photos : undefined,
})
} }
const TABS: { key: ModalTab; label: string }[] = [
{ key: 'main', label: 'Основное' },
{ key: 'description', label: 'Описание' },
{ key: 'photos', label: `Фото${photos.length > 0 ? ` (${photos.length})` : ''}` },
]
return ( return (
<Modal <Modal
open={open} open={open}
@@ -102,225 +143,263 @@ export function RoomModal({ open, room, onClose, onSave }: RoomModalProps) {
</> </>
} }
> >
<div className="space-y-4"> {/* Tab bar */}
{/* Row 1: Number | Name */} <div className="flex gap-1 p-1 bg-slate-100 dark:bg-slate-700/50 rounded-xl mb-4">
<div className="grid grid-cols-2 gap-3"> {TABS.map(t => (
<div> <button
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5"> key={t.key}
Номер * onClick={() => setTab(t.key)}
</label> className={cn(
<input 'flex-1 py-1.5 rounded-lg text-sm font-medium transition-colors',
type="text" tab === t.key
className="input" ? 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-sm'
placeholder="101" : 'text-slate-600 dark:text-slate-400 hover:text-slate-900',
value={form.number} )}
onChange={e => set('number', e.target.value)} >
/> {t.label}
</div> </button>
<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)}
/>
</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)}
/>
</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>
))}
</select>
</div>
</div>
{/* Row 3: Bed type | Max guests */}
<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>
))}
</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)}
/>
</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)}
/>
</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>
))}
</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>
))}
</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)}
/>
</div>
</div>
{/* Hourly section */}
<div className="rounded-xl border border-slate-200 dark:border-slate-600 overflow-hidden">
<div className="px-4 py-3 bg-slate-50 dark:bg-slate-700/40 border-b border-slate-200 dark:border-slate-600 flex items-center justify-between">
<p className="text-sm font-semibold text-slate-700 dark:text-slate-300">Почасовая аренда</p>
<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',
)}
>
<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 && (
<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)}
/>
</div>
)}
{!form.allowHourly && (
<div className="px-4 py-3">
<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>
<div className="flex flex-wrap gap-2">
{AMENITY_LIST.map(a => {
const selected = 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',
selected
? '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>
</div> </div>
{/* ── Main tab ── */}
{tab === 'main' && (
<div className="space-y-4">
<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)} />
</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)} />
</div>
</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>
<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>)}
</select>
</div>
</div>
{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>)}
</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)} />
</div>
</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>
<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>)}
</select>
</div>
</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.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)} />
</div>
</div>
{/* Hourly section */}
<div className="rounded-xl border border-slate-200 dark:border-slate-600 overflow-hidden">
<div className="px-4 py-3 bg-slate-50 dark:bg-slate-700/40 border-b border-slate-200 dark:border-slate-600 flex items-center justify-between">
<p className="text-sm font-semibold text-slate-700 dark:text-slate-300">Почасовая аренда</p>
<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')}
>
<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 ? (
<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)} />
</div>
) : (
<div className="px-4 py-3">
<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>
<div className="flex flex-wrap gap-2">
{AMENITY_LIST.map(a => {
const selected = 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',
selected
? '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>
</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> </Modal>
) )
} }

27
src/data/modulesData.ts
View File

@@ -1,7 +1,7 @@
import { import {
Wifi, CreditCard, Tv2, KeyRound, Wifi, CreditCard, Tv2, KeyRound,
BarChart3, Globe, CalendarCheck2, Sparkles, Network, BarChart3, Globe, CalendarCheck2, Sparkles, Network,
ShoppingCart, Star, UtensilsCrossed, CalendarClock, ArrowLeftRight, ShoppingCart, Star, UtensilsCrossed, CalendarClock, ArrowLeftRight, FileText,
} from 'lucide-react' } from 'lucide-react'
import type { ElementType } from 'react' import type { ElementType } from 'react'
@@ -367,6 +367,31 @@ export const MODULES_DATA: ModuleDef[] = [
icon: CalendarClock, 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', id: 'migration',
name: 'Миграция данных', name: 'Миграция данных',

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

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

635
src/pages/ReviewsPage.tsx
View File

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

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

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

2
src/pages/RoomsPage.tsx
View File

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

114
src/pages/SettingsPage.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react' 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 { MOCK_HOTELS } from '../data/mockData'
import { cn, PLAN_COLORS, PLAN_LABELS } from '../lib/utils' import { cn, PLAN_COLORS, PLAN_LABELS } from '../lib/utils'
import { Badge } from '../components/ui/Badge' import { Badge } from '../components/ui/Badge'
@@ -8,6 +8,7 @@ import { useTheme } from '../contexts/ThemeContext'
const SECTIONS = [ const SECTIONS = [
{ id: 'general', label: 'Основные', icon: Building2 }, { id: 'general', label: 'Основные', icon: Building2 },
{ id: 'booking', label: 'Бронирование', icon: BedDouble }, { id: 'booking', label: 'Бронирование', icon: BedDouble },
{ id: 'guests', label: 'Гости', icon: Users },
{ id: 'theme', label: 'Внешний вид', icon: Globe }, { id: 'theme', label: 'Внешний вид', icon: Globe },
{ id: 'notify', label: 'Уведомления', icon: Bell }, { id: 'notify', label: 'Уведомления', icon: Bell },
{ id: 'security', label: 'Безопасность', icon: Shield }, { id: 'security', label: 'Безопасность', icon: Shield },
@@ -42,6 +43,19 @@ export function SettingsPage() {
// Booking / assignment settings // Booking / assignment settings
const [assignmentStrategy, setAssignmentStrategy] = useState<'spread' | 'together' | 'sequential' | 'manual'>('spread') 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 // Notification toggles
const [notifyToggles, setNotifyToggles] = useState({ const [notifyToggles, setNotifyToggles] = useState({
@@ -161,6 +175,15 @@ export function SettingsPage() {
<> <>
<h2 className="font-semibold text-slate-900 dark:text-slate-100">Настройки бронирования</h2> <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> <div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"> <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 ── */} {/* ── THEME ── */}
{section === 'theme' && ( {section === 'theme' && (
<> <>

23
src/types/index.ts
View File

@@ -42,6 +42,16 @@ export type RoomStatus = 'available' | 'occupied' | 'maintenance' | 'blocked'
export type HousekeepingStatus = 'clean' | 'dirty' | 'cleaning' | 'inspect' export type HousekeepingStatus = 'clean' | 'dirty' | 'cleaning' | 'inspect'
export type BedType = 'single' | 'double' | 'queen' | 'king' | 'twin' 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 { export interface Room {
id: string id: string
hotelId: string hotelId: string
@@ -58,6 +68,19 @@ export interface Room {
sortOrder: number sortOrder: number
allowHourly?: boolean allowHourly?: boolean
hourlyRate?: number 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 ─────────────────────────────────────────────────────────────────── // ─── Guest ───────────────────────────────────────────────────────────────────