New module pages: POS (shift/receipt), Reviews (moderation+QR link), Room Service (live orders+menu), Rental (object CRUD+bookings)
- PosPage: shift timer, product catalog with categories, cart/receipt, cash/terminal payment, shift revenue summary - ReviewsPage: review moderation (approve/reject/reply), public review link + redirect config, NPS/avg rating stats - RoomServicePage: live orders with status pipeline (new→preparing→ready→delivered), menu tab with stop-list support - RentalPage: rental object management (create/edit/delete with icon+color picker), bookings table per object - BookingsPage: "Новая аренда" button in rental tab → 2-step flow (pick object+date → booking form) - App.tsx: routes for /pos, /reviews, /room-service, /rental Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
452
src/pages/RentalPage.tsx
Normal file
452
src/pages/RentalPage.tsx
Normal file
@@ -0,0 +1,452 @@
|
||||
import { useState } from 'react'
|
||||
import { Plus, Pencil, Trash2, Clock, CalendarDays, X, Save } from 'lucide-react'
|
||||
import { format } from 'date-fns'
|
||||
import { ru } from 'date-fns/locale'
|
||||
import { cn, formatCurrency } from '../lib/utils'
|
||||
import { Badge } from '../components/ui/Badge'
|
||||
import { RENTAL_OBJECTS, MOCK_RENTAL_BOOKINGS } from '../data/rentalData'
|
||||
import type { RentalObject, RentalBooking } from '../data/rentalData'
|
||||
import { RentalBookingModal } from '../components/rental/RentalBookingModal'
|
||||
|
||||
// ── Object form ───────────────────────────────────────────────────────────────
|
||||
|
||||
const ICON_OPTIONS = ['🎾', '🛁', '🏛️', '⛳', '🏊', '🎱', '🎮', '🏋️', '🎤', '🏕️', '🚲', '🛶']
|
||||
const COLOR_OPTIONS = [
|
||||
{ value: 'bg-green-500', label: 'Зелёный' },
|
||||
{ value: 'bg-orange-500', label: 'Оранжевый' },
|
||||
{ value: 'bg-violet-500', label: 'Фиолетовый' },
|
||||
{ value: 'bg-blue-500', label: 'Синий' },
|
||||
{ value: 'bg-red-500', label: 'Красный' },
|
||||
{ value: 'bg-teal-500', label: 'Бирюзовый' },
|
||||
{ value: 'bg-amber-500', label: 'Жёлтый' },
|
||||
{ value: 'bg-pink-500', label: 'Розовый' },
|
||||
]
|
||||
const TEXT_COLORS: Record<string, string> = {
|
||||
'bg-green-500': 'text-green-700 dark:text-green-400',
|
||||
'bg-orange-500': 'text-orange-700 dark:text-orange-400',
|
||||
'bg-violet-500': 'text-violet-700 dark:text-violet-400',
|
||||
'bg-blue-500': 'text-blue-700 dark:text-blue-400',
|
||||
'bg-red-500': 'text-red-700 dark:text-red-400',
|
||||
'bg-teal-500': 'text-teal-700 dark:text-teal-400',
|
||||
'bg-amber-500': 'text-amber-700 dark:text-amber-400',
|
||||
'bg-pink-500': 'text-pink-700 dark:text-pink-400',
|
||||
}
|
||||
|
||||
interface ObjectFormData {
|
||||
name: string
|
||||
icon: string
|
||||
color: string
|
||||
pricePerHour: number
|
||||
pricePerDay: number
|
||||
openHour: number
|
||||
closeHour: number
|
||||
maxHoursPerSlot: number | ''
|
||||
description: string
|
||||
}
|
||||
|
||||
const EMPTY_FORM: ObjectFormData = {
|
||||
name: '', icon: '🎾', color: 'bg-green-500',
|
||||
pricePerHour: 1000, pricePerDay: 5000,
|
||||
openHour: 9, closeHour: 21, maxHoursPerSlot: '',
|
||||
description: '',
|
||||
}
|
||||
|
||||
function ObjectFormModal({
|
||||
initial, onSave, onClose,
|
||||
}: {
|
||||
initial?: RentalObject
|
||||
onSave: (obj: RentalObject) => void
|
||||
onClose: () => void
|
||||
}) {
|
||||
const [form, setForm] = useState<ObjectFormData>(
|
||||
initial
|
||||
? {
|
||||
name: initial.name, icon: initial.icon, color: initial.color,
|
||||
pricePerHour: initial.pricePerHour, pricePerDay: initial.pricePerDay,
|
||||
openHour: initial.openHour, closeHour: initial.closeHour,
|
||||
maxHoursPerSlot: initial.maxHoursPerSlot ?? '',
|
||||
description: '',
|
||||
}
|
||||
: EMPTY_FORM,
|
||||
)
|
||||
|
||||
const set = <K extends keyof ObjectFormData>(k: K, v: ObjectFormData[K]) =>
|
||||
setForm(prev => ({ ...prev, [k]: v }))
|
||||
|
||||
const handleSave = () => {
|
||||
if (!form.name.trim()) return
|
||||
onSave({
|
||||
id: initial?.id ?? `obj-${Date.now()}`,
|
||||
name: form.name.trim(),
|
||||
icon: form.icon,
|
||||
color: form.color,
|
||||
textColor: TEXT_COLORS[form.color] ?? 'text-slate-700',
|
||||
pricePerHour: form.pricePerHour,
|
||||
pricePerDay: form.pricePerDay,
|
||||
openHour: form.openHour,
|
||||
closeHour: form.closeHour,
|
||||
maxHoursPerSlot: form.maxHoursPerSlot !== '' ? Number(form.maxHoursPerSlot) : undefined,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-lg flex flex-col">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-slate-700">
|
||||
<h2 className="font-semibold text-slate-900 dark:text-slate-100">
|
||||
{initial ? 'Редактировать объект' : 'Новый объект аренды'}
|
||||
</h2>
|
||||
<button onClick={onClose} className="btn-ghost p-1.5"><X size={16} /></button>
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-4 overflow-y-auto">
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Название *</label>
|
||||
<input
|
||||
className="input"
|
||||
placeholder="Теннисный корт"
|
||||
value={form.name}
|
||||
onChange={e => set('name', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Icon + Color */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Иконка</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{ICON_OPTIONS.map(ico => (
|
||||
<button
|
||||
key={ico}
|
||||
type="button"
|
||||
onClick={() => set('icon', ico)}
|
||||
className={cn(
|
||||
'w-9 h-9 rounded-lg text-lg flex items-center justify-center border-2 transition-all',
|
||||
form.icon === ico ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20' : 'border-transparent bg-slate-100 dark:bg-slate-700 hover:border-slate-300',
|
||||
)}
|
||||
>
|
||||
{ico}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Цвет</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{COLOR_OPTIONS.map(c => (
|
||||
<button
|
||||
key={c.value}
|
||||
type="button"
|
||||
onClick={() => set('color', c.value)}
|
||||
className={cn(
|
||||
'w-7 h-7 rounded-full border-2 transition-all',
|
||||
c.value,
|
||||
form.color === c.value ? 'border-slate-900 dark:border-white scale-125' : 'border-transparent',
|
||||
)}
|
||||
title={c.label}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Prices */}
|
||||
<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.pricePerHour}
|
||||
onChange={e => set('pricePerHour', 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>
|
||||
<input
|
||||
type="number" min={0} className="input"
|
||||
value={form.pricePerDay}
|
||||
onChange={e => set('pricePerDay', parseInt(e.target.value) || 0)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hours */}
|
||||
<div className="grid grid-cols-3 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.openHour} onChange={e => set('openHour', parseInt(e.target.value))}>
|
||||
{Array.from({ length: 24 }, (_, i) => i).map(h => (
|
||||
<option key={h} value={h}>{String(h).padStart(2, '0')}:00</option>
|
||||
))}
|
||||
</select>
|
||||
</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.closeHour} onChange={e => set('closeHour', parseInt(e.target.value))}>
|
||||
{Array.from({ length: 24 }, (_, i) => i).map(h => (
|
||||
<option key={h} value={h}>{String(h).padStart(2, '0')}:00</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={24} className="input"
|
||||
placeholder="Без лимита"
|
||||
value={form.maxHoursPerSlot}
|
||||
onChange={e => set('maxHoursPerSlot', e.target.value === '' ? '' : parseInt(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
<div className="rounded-xl bg-slate-50 dark:bg-slate-700/50 p-3 flex items-center gap-3">
|
||||
<div className={cn('w-10 h-10 rounded-xl flex items-center justify-center text-xl text-white', form.color)}>
|
||||
{form.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-slate-900 dark:text-slate-100">{form.name || 'Название объекта'}</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
{formatCurrency(form.pricePerHour)}/ч · {formatCurrency(form.pricePerDay)}/день · {String(form.openHour).padStart(2, '0')}:00–{String(form.closeHour).padStart(2, '0')}:00
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 px-5 py-4 border-t border-slate-200 dark:border-slate-700">
|
||||
<button onClick={onClose} className="btn-secondary">Отмена</button>
|
||||
<button onClick={handleSave} disabled={!form.name.trim()} className="btn-primary gap-1.5 disabled:opacity-50">
|
||||
<Save size={14} />
|
||||
{initial ? 'Сохранить' : 'Создать объект'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Main page ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export function RentalPage() {
|
||||
const [objects, setObjects] = useState<RentalObject[]>(RENTAL_OBJECTS)
|
||||
const [bookings, setBookings] = useState<RentalBooking[]>(MOCK_RENTAL_BOOKINGS)
|
||||
const [editObj, setEditObj] = useState<RentalObject | null>(null)
|
||||
const [createModal, setCreateModal] = useState(false)
|
||||
const [selectedObj, setSelectedObj] = useState<RentalObject | null>(null)
|
||||
const [rentalModal, setRentalModal] = useState<{ obj: RentalObject; date: string } | null>(null)
|
||||
|
||||
const today = format(new Date(), 'yyyy-MM-dd')
|
||||
|
||||
const handleSaveObject = (obj: RentalObject) => {
|
||||
setObjects(prev => {
|
||||
const exists = prev.find(o => o.id === obj.id)
|
||||
return exists ? prev.map(o => o.id === obj.id ? obj : o) : [...prev, obj]
|
||||
})
|
||||
setEditObj(null)
|
||||
setCreateModal(false)
|
||||
}
|
||||
|
||||
const handleDeleteObject = (id: string) => {
|
||||
setObjects(prev => prev.filter(o => o.id !== id))
|
||||
if (selectedObj?.id === id) setSelectedObj(null)
|
||||
}
|
||||
|
||||
const handleBookingCreate = (b: RentalBooking) => {
|
||||
setBookings(prev => [...prev, b])
|
||||
setRentalModal(null)
|
||||
}
|
||||
|
||||
const totalRevenue = bookings
|
||||
.filter(b => b.status === 'confirmed')
|
||||
.reduce((s, b) => s + b.totalAmount, 0)
|
||||
|
||||
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">{objects.length} объектов · управление и расписание</p>
|
||||
</div>
|
||||
<button onClick={() => setCreateModal(true)} className="btn-primary">
|
||||
<Plus size={15} />
|
||||
Новый объект
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ label: 'Объектов', value: objects.length, color: 'text-slate-900 dark:text-slate-100' },
|
||||
{ label: 'Броней сегодня', value: bookings.filter(b => b.date === today).length, color: 'text-brand-600 dark:text-brand-400' },
|
||||
{ label: 'Всего броней', value: bookings.filter(b => b.status === 'confirmed').length, color: 'text-emerald-600 dark:text-emerald-400' },
|
||||
{ label: 'Общая выручка', value: formatCurrency(totalRevenue), color: 'text-emerald-600 dark:text-emerald-400' },
|
||||
].map(s => (
|
||||
<div key={s.label} className="card p-4">
|
||||
<p className={cn('text-xl font-bold', s.color)}>{s.value}</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-5">
|
||||
{/* Objects list */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Объекты аренды</p>
|
||||
{objects.map(obj => {
|
||||
const objBookings = bookings.filter(b => b.objectId === obj.id && b.status === 'confirmed')
|
||||
const todayB = objBookings.filter(b => b.date === today)
|
||||
const isSelected = selectedObj?.id === obj.id
|
||||
return (
|
||||
<div
|
||||
key={obj.id}
|
||||
onClick={() => setSelectedObj(isSelected ? null : obj)}
|
||||
className={cn(
|
||||
'card p-4 cursor-pointer transition-all',
|
||||
isSelected ? 'ring-2 ring-brand-500' : 'hover:shadow-md',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={cn('w-10 h-10 rounded-xl flex items-center justify-center text-xl shrink-0 text-white', obj.color)}>
|
||||
{obj.icon}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-semibold text-slate-900 dark:text-slate-100 truncate">{obj.name}</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{formatCurrency(obj.pricePerHour)}/ч · {String(obj.openHour).padStart(2, '0')}:00–{String(obj.closeHour).padStart(2, '0')}:00
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); setEditObj(obj) }}
|
||||
className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-400 hover:text-slate-700 transition-colors"
|
||||
>
|
||||
<Pencil size={13} />
|
||||
</button>
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); handleDeleteObject(obj.id) }}
|
||||
className="p-1.5 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 text-slate-400 hover:text-red-600 transition-colors"
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-2.5 flex gap-2">
|
||||
{todayB.length > 0 && (
|
||||
<Badge className="bg-brand-100 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300 text-[10px]">
|
||||
{todayB.length} сегодня
|
||||
</Badge>
|
||||
)}
|
||||
<Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 text-[10px]">
|
||||
{objBookings.length} всего
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{objects.length === 0 && (
|
||||
<div className="card p-8 text-center text-slate-400">
|
||||
<p className="text-sm">Нет объектов аренды</p>
|
||||
<button onClick={() => setCreateModal(true)} className="btn-secondary text-xs mt-3">
|
||||
Добавить первый
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: bookings for selected object */}
|
||||
<div className="md:col-span-2">
|
||||
{selectedObj ? (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
|
||||
Бронирования — {selectedObj.name}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setRentalModal({ obj: selectedObj, date: today })}
|
||||
className="btn-primary text-xs py-1.5"
|
||||
>
|
||||
<Plus size={13} />
|
||||
Добавить бронь
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="card overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-700/40">
|
||||
{['Дата', 'Время', 'Гость', 'Телефон', 'Сумма', 'Статус'].map(h => (
|
||||
<th key={h} className="text-left px-4 py-2.5 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{bookings.filter(b => b.objectId === selectedObj.id)
|
||||
.sort((a, b) => b.date.localeCompare(a.date))
|
||||
.map(b => (
|
||||
<tr key={b.id} className="border-b border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-700/30">
|
||||
<td className="px-4 py-2.5 text-slate-700 dark:text-slate-300">
|
||||
{format(new Date(b.date), 'd MMM', { locale: ru })}
|
||||
{b.date === today && <span className="ml-1 text-[10px] bg-brand-100 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300 px-1 rounded">сегодня</span>}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-slate-700 dark:text-slate-300">
|
||||
{b.isFullDay ? (
|
||||
<Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">Весь день</Badge>
|
||||
) : `${b.startHour}:00 – ${b.endHour}:00`}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 font-medium text-slate-900 dark:text-slate-100">{b.guestName}</td>
|
||||
<td className="px-4 py-2.5 text-slate-500 dark:text-slate-400">{b.guestPhone || '—'}</td>
|
||||
<td className="px-4 py-2.5 font-semibold text-slate-900 dark:text-slate-100">{formatCurrency(b.totalAmount)}</td>
|
||||
<td className="px-4 py-2.5">
|
||||
<Badge className={b.status === 'confirmed'
|
||||
? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300'
|
||||
: 'bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400'
|
||||
}>
|
||||
{b.status === 'confirmed' ? 'Подтверждено' : 'Отменено'}
|
||||
</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{bookings.filter(b => b.objectId === selectedObj.id).length === 0 && (
|
||||
<div className="text-center py-10 text-slate-500 dark:text-slate-400 text-sm">
|
||||
Нет бронирований для этого объекта
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="card p-12 text-center text-slate-400 flex flex-col items-center gap-3">
|
||||
<CalendarDays size={40} className="opacity-20" />
|
||||
<p>Выберите объект слева для просмотра бронирований</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Object form modals */}
|
||||
{(createModal || editObj) && (
|
||||
<ObjectFormModal
|
||||
initial={editObj ?? undefined}
|
||||
onSave={handleSaveObject}
|
||||
onClose={() => { setCreateModal(false); setEditObj(null) }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Rental booking modal */}
|
||||
{rentalModal && (
|
||||
<RentalBookingModal
|
||||
obj={rentalModal.obj}
|
||||
date={rentalModal.date}
|
||||
existingBookings={bookings.filter(b => b.objectId === rentalModal.obj.id && b.date === rentalModal.date)}
|
||||
onClose={() => setRentalModal(null)}
|
||||
onSave={handleBookingCreate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user