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:
@@ -19,6 +19,10 @@ import { AvailabilityPage } from './pages/AvailabilityPage'
|
|||||||
import { FloorMapPage } from './pages/FloorMapPage'
|
import { FloorMapPage } from './pages/FloorMapPage'
|
||||||
import { AdminDashboard } from './pages/AdminDashboard'
|
import { AdminDashboard } from './pages/AdminDashboard'
|
||||||
import { MigrationPage } from './pages/MigrationPage'
|
import { MigrationPage } from './pages/MigrationPage'
|
||||||
|
import { PosPage } from './pages/PosPage'
|
||||||
|
import { ReviewsPage } from './pages/ReviewsPage'
|
||||||
|
import { RoomServicePage } from './pages/RoomServicePage'
|
||||||
|
import { RentalPage } from './pages/RentalPage'
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
@@ -47,6 +51,10 @@ export default function App() {
|
|||||||
<Route path="/availability" element={<AvailabilityPage />} />
|
<Route path="/availability" element={<AvailabilityPage />} />
|
||||||
<Route path="/floor-map" element={<FloorMapPage />} />
|
<Route path="/floor-map" element={<FloorMapPage />} />
|
||||||
<Route path="/migration" element={<MigrationPage />} />
|
<Route path="/migration" element={<MigrationPage />} />
|
||||||
|
<Route path="/pos" element={<PosPage />} />
|
||||||
|
<Route path="/reviews" element={<ReviewsPage />} />
|
||||||
|
<Route path="/room-service" element={<RoomServicePage />} />
|
||||||
|
<Route path="/rental" element={<RentalPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
{/* Admin routes */}
|
{/* Admin routes */}
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { RENTAL_OBJECTS, MOCK_RENTAL_BOOKINGS } from '../data/rentalData'
|
|||||||
import { useModules } from '../contexts/ModulesContext'
|
import { useModules } from '../contexts/ModulesContext'
|
||||||
import type { Booking, BookingStatus } from '../types'
|
import type { Booking, BookingStatus } from '../types'
|
||||||
import type { RentalBooking } from '../data/rentalData'
|
import type { RentalBooking } from '../data/rentalData'
|
||||||
|
import { RentalBookingModal } from '../components/rental/RentalBookingModal'
|
||||||
import { cn, BOOKING_STATUS_BADGE, BOOKING_STATUS_LABELS, SOURCE_COLORS, SOURCE_LABELS, formatCurrency, nightsCount } from '../lib/utils'
|
import { cn, BOOKING_STATUS_BADGE, BOOKING_STATUS_LABELS, SOURCE_COLORS, SOURCE_LABELS, formatCurrency, nightsCount } from '../lib/utils'
|
||||||
import { Badge } from '../components/ui/Badge'
|
import { Badge } from '../components/ui/Badge'
|
||||||
import { BookingModal } from '../components/bookings/BookingModal'
|
import { BookingModal } from '../components/bookings/BookingModal'
|
||||||
@@ -41,7 +42,11 @@ export function BookingsPage() {
|
|||||||
|
|
||||||
const [tab, setTab] = useState<Tab>('rooms')
|
const [tab, setTab] = useState<Tab>('rooms')
|
||||||
const [bookings, setBookings] = useState<Booking[]>(MOCK_BOOKINGS)
|
const [bookings, setBookings] = useState<Booking[]>(MOCK_BOOKINGS)
|
||||||
const [rentalBookings] = useState<RentalBooking[]>(MOCK_RENTAL_BOOKINGS)
|
const [rentalBookings, setRentalBookings] = useState<RentalBooking[]>(MOCK_RENTAL_BOOKINGS)
|
||||||
|
const [newRentalStep, setNewRentalStep] = useState<'idle' | 'pick'>('idle')
|
||||||
|
const [rentalPickObj, setRentalPickObj] = useState(RENTAL_OBJECTS[0]?.id ?? '')
|
||||||
|
const [rentalPickDate, setRentalPickDate] = useState(format(new Date(), 'yyyy-MM-dd'))
|
||||||
|
const [showRentalModal, setShowRentalModal] = useState<{ obj: typeof RENTAL_OBJECTS[0]; date: string } | null>(null)
|
||||||
const [search, setSearch] = useState('')
|
const [search, setSearch] = useState('')
|
||||||
const [statusFilter, setStatusFilter] = useState<BookingStatus | 'all'>('all')
|
const [statusFilter, setStatusFilter] = useState<BookingStatus | 'all'>('all')
|
||||||
const [selected, setSelected] = useState<Booking | null>(null)
|
const [selected, setSelected] = useState<Booking | null>(null)
|
||||||
@@ -103,6 +108,12 @@ export function BookingsPage() {
|
|||||||
<span className="hidden sm:inline">Новое</span>
|
<span className="hidden sm:inline">Новое</span>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
{tab === 'rental' && (
|
||||||
|
<button onClick={() => setNewRentalStep('pick')} className="btn-primary">
|
||||||
|
<Plus size={15} />
|
||||||
|
<span className="hidden sm:inline">Новая аренда</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tabs */}
|
{/* Tabs */}
|
||||||
@@ -359,6 +370,57 @@ export function BookingsPage() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* New rental — step 1: pick object + date */}
|
||||||
|
{newRentalStep === 'pick' && (
|
||||||
|
<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-sm p-6 space-y-4">
|
||||||
|
<h2 className="font-semibold text-slate-900 dark:text-slate-100 text-lg">Новая аренда</h2>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Объект</label>
|
||||||
|
<select className="input" value={rentalPickObj} onChange={e => setRentalPickObj(e.target.value)}>
|
||||||
|
{RENTAL_OBJECTS.map(o => (
|
||||||
|
<option key={o.id} value={o.id}>{o.icon} {o.name}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Дата</label>
|
||||||
|
<input
|
||||||
|
type="date" className="input"
|
||||||
|
value={rentalPickDate}
|
||||||
|
onChange={e => setRentalPickDate(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 justify-end">
|
||||||
|
<button onClick={() => setNewRentalStep('idle')} className="btn-secondary">Отмена</button>
|
||||||
|
<button
|
||||||
|
className="btn-primary"
|
||||||
|
onClick={() => {
|
||||||
|
const obj = RENTAL_OBJECTS.find(o => o.id === rentalPickObj)
|
||||||
|
if (obj) { setShowRentalModal({ obj, date: rentalPickDate }); setNewRentalStep('idle') }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Далее →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* New rental — step 2: booking form */}
|
||||||
|
{showRentalModal && (
|
||||||
|
<RentalBookingModal
|
||||||
|
obj={showRentalModal.obj}
|
||||||
|
date={showRentalModal.date}
|
||||||
|
existingBookings={rentalBookings.filter(b => b.objectId === showRentalModal.obj.id && b.date === showRentalModal.date)}
|
||||||
|
onClose={() => setShowRentalModal(null)}
|
||||||
|
onSave={(b) => {
|
||||||
|
setRentalBookings(prev => [...prev, b])
|
||||||
|
setShowRentalModal(null)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
414
src/pages/PosPage.tsx
Normal file
414
src/pages/PosPage.tsx
Normal file
@@ -0,0 +1,414 @@
|
|||||||
|
import { useState, useEffect, useRef } from 'react'
|
||||||
|
import {
|
||||||
|
ShoppingCart, Plus, Minus, Trash2, CreditCard, Banknote, X,
|
||||||
|
Clock, TrendingUp, Receipt, LogIn, LogOut, ChevronRight, CheckCircle2,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { format } from 'date-fns'
|
||||||
|
import { ru } from 'date-fns/locale'
|
||||||
|
import { cn, formatCurrency } from '../lib/utils'
|
||||||
|
|
||||||
|
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface PosProduct {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
price: number
|
||||||
|
category: string
|
||||||
|
emoji: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CartItem {
|
||||||
|
product: PosProduct
|
||||||
|
qty: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PosReceipt {
|
||||||
|
id: string
|
||||||
|
items: CartItem[]
|
||||||
|
total: number
|
||||||
|
method: 'cash' | 'terminal'
|
||||||
|
createdAt: Date
|
||||||
|
shiftId: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Mock data ─────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const CATEGORIES = ['Еда', 'Напитки', 'Услуги', 'Прочее']
|
||||||
|
|
||||||
|
const PRODUCTS: PosProduct[] = [
|
||||||
|
// Еда
|
||||||
|
{ id: 'p1', name: 'Завтрак', price: 650, category: 'Еда', emoji: '🍳' },
|
||||||
|
{ id: 'p2', name: 'Обед', price: 950, category: 'Еда', emoji: '🍽️' },
|
||||||
|
{ id: 'p3', name: 'Ужин', price: 1100, category: 'Еда', emoji: '🍷' },
|
||||||
|
{ id: 'p4', name: 'Бизнес-ланч', price: 750, category: 'Еда', emoji: '🥗' },
|
||||||
|
// Напитки
|
||||||
|
{ id: 'p5', name: 'Вода 0.5л', price: 120, category: 'Напитки', emoji: '💧' },
|
||||||
|
{ id: 'p6', name: 'Кофе эспрессо', price: 180, category: 'Напитки', emoji: '☕' },
|
||||||
|
{ id: 'p7', name: 'Чай', price: 150, category: 'Напитки', emoji: '🍵' },
|
||||||
|
{ id: 'p8', name: 'Сок апельсиновый',price: 250, category: 'Напитки', emoji: '🍊' },
|
||||||
|
{ id: 'p9', name: 'Мини-бар пиво', price: 350, category: 'Напитки', emoji: '🍺' },
|
||||||
|
// Услуги
|
||||||
|
{ id: 'p10', name: 'Трансфер в/из аэропорта', price: 2500, category: 'Услуги', emoji: '🚖' },
|
||||||
|
{ id: 'p11', name: 'Прачечная', price: 800, category: 'Услуги', emoji: '👕' },
|
||||||
|
{ id: 'p12', name: 'Экскурсия', price: 3500, category: 'Услуги', emoji: '🗺️' },
|
||||||
|
{ id: 'p13', name: 'Парковка/день', price: 500, category: 'Услуги', emoji: '🅿️' },
|
||||||
|
{ id: 'p14', name: 'Аренда велосипеда',price: 400, category: 'Услуги', emoji: '🚲' },
|
||||||
|
// Прочее
|
||||||
|
{ id: 'p15', name: 'Зубная щётка', price: 80, category: 'Прочее', emoji: '🪥' },
|
||||||
|
{ id: 'p16', name: 'Тапочки', price: 150, category: 'Прочее', emoji: '🩴' },
|
||||||
|
{ id: 'p17', name: 'Зарядное USB', price: 200, category: 'Прочее', emoji: '🔌' },
|
||||||
|
{ id: 'p18', name: 'Сувенир', price: 450, category: 'Прочее', emoji: '🎁' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const SEED_RECEIPTS: PosReceipt[] = [
|
||||||
|
{
|
||||||
|
id: 'rc1',
|
||||||
|
items: [
|
||||||
|
{ product: PRODUCTS[0], qty: 2 },
|
||||||
|
{ product: PRODUCTS[5], qty: 2 },
|
||||||
|
],
|
||||||
|
total: 1660,
|
||||||
|
method: 'terminal',
|
||||||
|
createdAt: new Date(Date.now() - 3600000 * 2),
|
||||||
|
shiftId: 'shift-today',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rc2',
|
||||||
|
items: [{ product: PRODUCTS[9], qty: 1 }],
|
||||||
|
total: 2500,
|
||||||
|
method: 'cash',
|
||||||
|
createdAt: new Date(Date.now() - 3600000),
|
||||||
|
shiftId: 'shift-today',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rc3',
|
||||||
|
items: [
|
||||||
|
{ product: PRODUCTS[1], qty: 1 },
|
||||||
|
{ product: PRODUCTS[4], qty: 2 },
|
||||||
|
],
|
||||||
|
total: 1190,
|
||||||
|
method: 'terminal',
|
||||||
|
createdAt: new Date(Date.now() - 1800000),
|
||||||
|
shiftId: 'shift-today',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
// ── Component ─────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function PosPage() {
|
||||||
|
const [shiftOpen, setShiftOpen] = useState(true)
|
||||||
|
const [shiftStartTime] = useState<Date>(new Date(Date.now() - 3600000 * 3))
|
||||||
|
const [shiftTimer, setShiftTimer] = useState('')
|
||||||
|
const [category, setCategory] = useState('Еда')
|
||||||
|
const [cart, setCart] = useState<CartItem[]>([])
|
||||||
|
const [receipts, setReceipts] = useState<PosReceipt[]>(SEED_RECEIPTS)
|
||||||
|
const [payMethod, setPayMethod] = useState<'cash' | 'terminal'>('terminal')
|
||||||
|
const [lastReceipt, setLastReceipt] = useState<PosReceipt | null>(null)
|
||||||
|
const shiftId = 'shift-today'
|
||||||
|
|
||||||
|
// Shift timer
|
||||||
|
useEffect(() => {
|
||||||
|
if (!shiftOpen) return
|
||||||
|
const tick = () => {
|
||||||
|
const diff = Math.floor((Date.now() - shiftStartTime.getTime()) / 1000)
|
||||||
|
const h = Math.floor(diff / 3600)
|
||||||
|
const m = Math.floor((diff % 3600) / 60)
|
||||||
|
const s = diff % 60
|
||||||
|
setShiftTimer(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`)
|
||||||
|
}
|
||||||
|
tick()
|
||||||
|
const id = setInterval(tick, 1000)
|
||||||
|
return () => clearInterval(id)
|
||||||
|
}, [shiftOpen, shiftStartTime])
|
||||||
|
|
||||||
|
const cartTotal = cart.reduce((s, i) => s + i.product.price * i.qty, 0)
|
||||||
|
const shiftReceipts = receipts.filter(r => r.shiftId === shiftId)
|
||||||
|
const shiftRevenue = shiftReceipts.reduce((s, r) => s + r.total, 0)
|
||||||
|
const cashRevenue = shiftReceipts.filter(r => r.method === 'cash').reduce((s, r) => s + r.total, 0)
|
||||||
|
const termRevenue = shiftReceipts.filter(r => r.method === 'terminal').reduce((s, r) => s + r.total, 0)
|
||||||
|
|
||||||
|
const addToCart = (p: PosProduct) => {
|
||||||
|
setCart(prev => {
|
||||||
|
const ex = prev.find(i => i.product.id === p.id)
|
||||||
|
if (ex) return prev.map(i => i.product.id === p.id ? { ...i, qty: i.qty + 1 } : i)
|
||||||
|
return [...prev, { product: p, qty: 1 }]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeQty = (id: string, delta: number) => {
|
||||||
|
setCart(prev =>
|
||||||
|
prev.map(i => i.product.id === id ? { ...i, qty: Math.max(1, i.qty + delta) } : i),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeItem = (id: string) => setCart(prev => prev.filter(i => i.product.id !== id))
|
||||||
|
|
||||||
|
const handlePay = () => {
|
||||||
|
if (cart.length === 0 || !shiftOpen) return
|
||||||
|
const receipt: PosReceipt = {
|
||||||
|
id: `rc-${Date.now()}`,
|
||||||
|
items: cart,
|
||||||
|
total: cartTotal,
|
||||||
|
method: payMethod,
|
||||||
|
createdAt: new Date(),
|
||||||
|
shiftId,
|
||||||
|
}
|
||||||
|
setReceipts(prev => [receipt, ...prev])
|
||||||
|
setLastReceipt(receipt)
|
||||||
|
setCart([])
|
||||||
|
}
|
||||||
|
|
||||||
|
const filteredProducts = PRODUCTS.filter(p => p.category === category)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-full flex-col">
|
||||||
|
{/* Top bar */}
|
||||||
|
<div className="shrink-0 px-4 py-3 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800">
|
||||||
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-bold text-slate-900 dark:text-slate-100">Касса</h1>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||||
|
{format(new Date(), 'd MMMM yyyy', { locale: ru })} · Елена Смирнова
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{/* Shift timer */}
|
||||||
|
{shiftOpen && (
|
||||||
|
<div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-700">
|
||||||
|
<Clock size={13} className="text-emerald-600" />
|
||||||
|
<span className="text-xs font-mono font-semibold text-emerald-700 dark:text-emerald-300">
|
||||||
|
{shiftTimer}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={() => setShiftOpen(v => !v)}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-sm font-medium border-2 transition-colors',
|
||||||
|
shiftOpen
|
||||||
|
? 'bg-red-50 border-red-300 text-red-700 dark:bg-red-900/20 dark:border-red-700 dark:text-red-300'
|
||||||
|
: 'bg-emerald-50 border-emerald-300 text-emerald-700 dark:bg-emerald-900/20 dark:border-emerald-700 dark:text-emerald-300',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{shiftOpen ? <><LogOut size={14} />Закрыть смену</> : <><LogIn size={14} />Открыть смену</>}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Shift stats */}
|
||||||
|
{shiftOpen && (
|
||||||
|
<div className="grid grid-cols-4 gap-2 mt-3">
|
||||||
|
{[
|
||||||
|
{ label: 'Выручка за смену', value: formatCurrency(shiftRevenue), color: 'text-slate-900 dark:text-slate-100' },
|
||||||
|
{ label: 'Наличные', value: formatCurrency(cashRevenue), color: 'text-emerald-600 dark:text-emerald-400' },
|
||||||
|
{ label: 'Терминал', value: formatCurrency(termRevenue), color: 'text-blue-600 dark:text-blue-400' },
|
||||||
|
{ label: 'Чеков', value: shiftReceipts.length, color: 'text-slate-900 dark:text-slate-100' },
|
||||||
|
].map(s => (
|
||||||
|
<div key={s.label} className="rounded-xl bg-slate-50 dark:bg-slate-700/50 px-3 py-2">
|
||||||
|
<p className={cn('text-base font-bold', s.color)}>{s.value}</p>
|
||||||
|
<p className="text-[10px] text-slate-500 dark:text-slate-400">{s.label}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!shiftOpen ? (
|
||||||
|
<div className="flex-1 flex items-center justify-center flex-col gap-4 text-slate-400">
|
||||||
|
<ShoppingCart size={56} className="opacity-20" />
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-lg font-semibold text-slate-600 dark:text-slate-300">Смена закрыта</p>
|
||||||
|
<p className="text-sm">Откройте смену для начала работы</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShiftOpen(true)}
|
||||||
|
className="btn-primary"
|
||||||
|
>
|
||||||
|
<LogIn size={15} />
|
||||||
|
Открыть смену
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-1 overflow-hidden">
|
||||||
|
{/* Left — product catalog */}
|
||||||
|
<div className="flex flex-col flex-1 overflow-hidden border-r border-slate-200 dark:border-slate-700">
|
||||||
|
{/* Category tabs */}
|
||||||
|
<div className="shrink-0 flex gap-1 px-4 py-2.5 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800">
|
||||||
|
{CATEGORIES.map(cat => (
|
||||||
|
<button
|
||||||
|
key={cat}
|
||||||
|
onClick={() => setCategory(cat)}
|
||||||
|
className={cn(
|
||||||
|
'px-3 py-1.5 rounded-lg text-sm font-medium transition-colors',
|
||||||
|
category === cat
|
||||||
|
? 'bg-brand-600 text-white'
|
||||||
|
: 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Products grid */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-4">
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||||
|
{filteredProducts.map(p => (
|
||||||
|
<button
|
||||||
|
key={p.id}
|
||||||
|
onClick={() => addToCart(p)}
|
||||||
|
className="card p-3 text-left hover:shadow-md hover:border-brand-300 dark:hover:border-brand-600 transition-all active:scale-95 group"
|
||||||
|
>
|
||||||
|
<span className="text-2xl block mb-1.5">{p.emoji}</span>
|
||||||
|
<p className="text-sm font-medium text-slate-800 dark:text-slate-200 leading-tight">{p.name}</p>
|
||||||
|
<p className="text-sm font-bold text-brand-600 dark:text-brand-400 mt-1">{formatCurrency(p.price)}</p>
|
||||||
|
<div className="mt-1.5 w-full h-7 rounded-lg bg-brand-50 dark:bg-brand-900/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<Plus size={14} className="text-brand-600" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Recent receipts */}
|
||||||
|
<div className="shrink-0 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
|
||||||
|
<div className="px-4 py-2 flex items-center justify-between">
|
||||||
|
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Последние чеки</p>
|
||||||
|
<span className="text-xs text-slate-400">{shiftReceipts.length} за смену</span>
|
||||||
|
</div>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<div className="flex gap-2 px-4 pb-3" style={{ minWidth: 'max-content' }}>
|
||||||
|
{shiftReceipts.slice(0, 6).map(r => (
|
||||||
|
<div key={r.id} className="flex-shrink-0 w-40 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-2.5">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<span className="text-[10px] text-slate-400">{format(r.createdAt, 'HH:mm')}</span>
|
||||||
|
{r.method === 'cash' ? <Banknote size={11} className="text-emerald-600" /> : <CreditCard size={11} className="text-blue-600" />}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-bold text-slate-900 dark:text-slate-100">{formatCurrency(r.total)}</p>
|
||||||
|
<p className="text-[10px] text-slate-400">{r.items.length} поз.</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right — cart */}
|
||||||
|
<div className="w-80 flex flex-col bg-white dark:bg-slate-800 shrink-0">
|
||||||
|
<div className="px-4 py-3 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between">
|
||||||
|
<p className="font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
|
||||||
|
<Receipt size={16} />
|
||||||
|
Текущий чек
|
||||||
|
</p>
|
||||||
|
{cart.length > 0 && (
|
||||||
|
<button onClick={() => setCart([])} className="text-xs text-red-500 hover:text-red-700">
|
||||||
|
Очистить
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cart items */}
|
||||||
|
<div className="flex-1 overflow-y-auto px-4 py-3 space-y-2">
|
||||||
|
{cart.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-40 text-slate-400 gap-2">
|
||||||
|
<ShoppingCart size={32} className="opacity-20" />
|
||||||
|
<p className="text-sm">Добавьте товары из каталога</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
cart.map(item => (
|
||||||
|
<div key={item.product.id} className="flex items-center gap-2 p-2 rounded-xl bg-slate-50 dark:bg-slate-700/50">
|
||||||
|
<span className="text-lg shrink-0">{item.product.emoji}</span>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-xs font-medium text-slate-800 dark:text-slate-200 truncate">{item.product.name}</p>
|
||||||
|
<p className="text-xs text-slate-500">{formatCurrency(item.product.price * item.qty)}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1 shrink-0">
|
||||||
|
<button onClick={() => changeQty(item.product.id, -1)} className="w-5 h-5 rounded-full bg-slate-200 dark:bg-slate-600 flex items-center justify-center hover:bg-slate-300">
|
||||||
|
<Minus size={10} />
|
||||||
|
</button>
|
||||||
|
<span className="w-5 text-center text-xs font-semibold">{item.qty}</span>
|
||||||
|
<button onClick={() => changeQty(item.product.id, 1)} className="w-5 h-5 rounded-full bg-slate-200 dark:bg-slate-600 flex items-center justify-center hover:bg-slate-300">
|
||||||
|
<Plus size={10} />
|
||||||
|
</button>
|
||||||
|
<button onClick={() => removeItem(item.product.id)} className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center hover:bg-red-200 ml-1">
|
||||||
|
<Trash2 size={10} className="text-red-600" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Payment */}
|
||||||
|
{cart.length > 0 && (
|
||||||
|
<div className="shrink-0 border-t border-slate-200 dark:border-slate-700 p-4 space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm text-slate-600 dark:text-slate-400">Итого</span>
|
||||||
|
<span className="text-xl font-bold text-slate-900 dark:text-slate-100">{formatCurrency(cartTotal)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setPayMethod('cash')}
|
||||||
|
className={cn(
|
||||||
|
'flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-sm font-medium border-2 transition-colors',
|
||||||
|
payMethod === 'cash'
|
||||||
|
? 'bg-emerald-600 border-emerald-600 text-white'
|
||||||
|
: 'border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Banknote size={14} />
|
||||||
|
Наличные
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setPayMethod('terminal')}
|
||||||
|
className={cn(
|
||||||
|
'flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-sm font-medium border-2 transition-colors',
|
||||||
|
payMethod === 'terminal'
|
||||||
|
? 'bg-blue-600 border-blue-600 text-white'
|
||||||
|
: 'border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CreditCard size={14} />
|
||||||
|
Терминал
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button onClick={handlePay} className="btn-primary w-full justify-center py-3 text-base">
|
||||||
|
<ChevronRight size={18} />
|
||||||
|
Провести оплату
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Receipt success overlay */}
|
||||||
|
{lastReceipt && (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
|
<div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl p-8 w-80 text-center space-y-4">
|
||||||
|
<CheckCircle2 size={56} className="text-emerald-500 mx-auto" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xl font-bold text-slate-900 dark:text-slate-100">Оплата принята</p>
|
||||||
|
<p className="text-3xl font-bold text-emerald-600 mt-1">{formatCurrency(lastReceipt.total)}</p>
|
||||||
|
<p className="text-sm text-slate-500 mt-1">
|
||||||
|
{lastReceipt.method === 'cash' ? 'Наличными' : 'Терминал'} · {format(lastReceipt.createdAt, 'HH:mm')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-left bg-slate-50 dark:bg-slate-700/50 rounded-xl p-3 space-y-1">
|
||||||
|
{lastReceipt.items.map(i => (
|
||||||
|
<div key={i.product.id} className="flex justify-between text-sm">
|
||||||
|
<span className="text-slate-600 dark:text-slate-400">{i.product.emoji} {i.product.name} ×{i.qty}</span>
|
||||||
|
<span className="font-medium">{formatCurrency(i.product.price * i.qty)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button onClick={() => setLastReceipt(null)} className="btn-primary w-full justify-center">
|
||||||
|
Готово
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
376
src/pages/ReviewsPage.tsx
Normal file
376
src/pages/ReviewsPage.tsx
Normal file
@@ -0,0 +1,376 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import {
|
||||||
|
Star, ThumbsUp, ThumbsDown, ExternalLink, Copy, CheckCheck,
|
||||||
|
MessageSquare, TrendingUp, QrCode, Filter,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { format, subDays } from 'date-fns'
|
||||||
|
import { ru } from 'date-fns/locale'
|
||||||
|
import { cn } from '../lib/utils'
|
||||||
|
import { Badge } from '../components/ui/Badge'
|
||||||
|
|
||||||
|
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
type ReviewStatus = 'pending' | 'published' | 'rejected'
|
||||||
|
|
||||||
|
interface Review {
|
||||||
|
id: string
|
||||||
|
guestName: string
|
||||||
|
roomNumber: string
|
||||||
|
checkOut: string
|
||||||
|
rating: number // 1–10
|
||||||
|
text: string
|
||||||
|
status: ReviewStatus
|
||||||
|
source: 'qr' | 'email' | 'sms'
|
||||||
|
createdAt: Date
|
||||||
|
reply?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Mock data ─────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const MOCK_REVIEWS: Review[] = [
|
||||||
|
{
|
||||||
|
id: 'rv1',
|
||||||
|
guestName: 'Дмитрий Волков',
|
||||||
|
roomNumber: '101',
|
||||||
|
checkOut: format(subDays(new Date(), 1), 'yyyy-MM-dd'),
|
||||||
|
rating: 9,
|
||||||
|
text: 'Замечательный отель! Персонал очень вежливый и отзывчивый. Номер чистый, завтрак вкусный. Обязательно вернёмся.',
|
||||||
|
status: 'pending',
|
||||||
|
source: 'email',
|
||||||
|
createdAt: new Date(Date.now() - 3600000 * 5),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rv2',
|
||||||
|
guestName: 'Анна Козлова',
|
||||||
|
roomNumber: '202',
|
||||||
|
checkOut: format(subDays(new Date(), 2), 'yyyy-MM-dd'),
|
||||||
|
rating: 4,
|
||||||
|
text: 'Шум из соседнего номера мешал спать. Кондиционер плохо работал. Персонал помог, но проблему до конца не решили.',
|
||||||
|
status: 'pending',
|
||||||
|
source: 'qr',
|
||||||
|
createdAt: new Date(Date.now() - 3600000 * 12),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rv3',
|
||||||
|
guestName: 'Наталья Александрова',
|
||||||
|
roomNumber: '301',
|
||||||
|
checkOut: format(subDays(new Date(), 3), 'yyyy-MM-dd'),
|
||||||
|
rating: 10,
|
||||||
|
text: 'Лучший отель в котором я останавливалась! Вид из окна потрясающий, кровать удобная, всё очень стильно. Пентхаус — это что-то особенное.',
|
||||||
|
status: 'published',
|
||||||
|
source: 'sms',
|
||||||
|
createdAt: new Date(Date.now() - 3600000 * 36),
|
||||||
|
reply: 'Наталья, большое спасибо за такой тёплый отзыв! Будем рады видеть вас снова!',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rv4',
|
||||||
|
guestName: 'Игорь Соколов',
|
||||||
|
roomNumber: '201',
|
||||||
|
checkOut: format(subDays(new Date(), 5), 'yyyy-MM-dd'),
|
||||||
|
rating: 7,
|
||||||
|
text: 'В целом хорошо. Немного дорого для такого номера. Но расположение отличное, добираться удобно.',
|
||||||
|
status: 'published',
|
||||||
|
source: 'email',
|
||||||
|
createdAt: new Date(Date.now() - 3600000 * 60),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rv5',
|
||||||
|
guestName: 'Тест Тестов',
|
||||||
|
roomNumber: '102',
|
||||||
|
checkOut: format(subDays(new Date(), 7), 'yyyy-MM-dd'),
|
||||||
|
rating: 2,
|
||||||
|
text: 'asdfghjkl qwerty',
|
||||||
|
status: 'rejected',
|
||||||
|
source: 'qr',
|
||||||
|
createdAt: new Date(Date.now() - 3600000 * 90),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rv6',
|
||||||
|
guestName: 'Михаил Орлов',
|
||||||
|
roomNumber: '401',
|
||||||
|
checkOut: format(subDays(new Date(), 8), 'yyyy-MM-dd'),
|
||||||
|
rating: 8,
|
||||||
|
text: 'Очень доволен пребыванием. Всё было организованно на высшем уровне. Спасибо персоналу за внимание к деталям.',
|
||||||
|
status: 'published',
|
||||||
|
source: 'email',
|
||||||
|
createdAt: new Date(Date.now() - 3600000 * 100),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const REVIEW_LINK = 'https://app.hotelsync.ru/review/grand-palace'
|
||||||
|
|
||||||
|
function StarRating({ rating, max = 10, size = 14 }: { rating: number; max?: number; size?: number }) {
|
||||||
|
const stars = Math.round((rating / max) * 5)
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-0.5">
|
||||||
|
{Array.from({ length: 5 }, (_, i) => (
|
||||||
|
<Star
|
||||||
|
key={i}
|
||||||
|
size={size}
|
||||||
|
className={i < stars ? 'text-amber-400 fill-amber-400' : 'text-slate-300 dark:text-slate-600'}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<span className="ml-1.5 text-sm font-semibold text-slate-700 dark:text-slate-300">{rating}/10</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ratingColor(r: number): string {
|
||||||
|
if (r >= 9) return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300'
|
||||||
|
if (r >= 7) return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
|
||||||
|
if (r >= 5) return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
|
||||||
|
return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
|
||||||
|
}
|
||||||
|
|
||||||
|
const SOURCE_LABEL: Record<Review['source'], string> = {
|
||||||
|
qr: 'QR-код',
|
||||||
|
email: 'Email',
|
||||||
|
sms: 'SMS',
|
||||||
|
}
|
||||||
|
|
||||||
|
type Tab = 'pending' | 'published' | 'rejected' | 'all'
|
||||||
|
|
||||||
|
export function ReviewsPage() {
|
||||||
|
const [reviews, setReviews] = useState<Review[]>(MOCK_REVIEWS)
|
||||||
|
const [tab, setTab] = useState<Tab>('pending')
|
||||||
|
const [replyId, setReplyId] = useState<string | null>(null)
|
||||||
|
const [replyText, setReplyText] = useState('')
|
||||||
|
const [copied, setCopied] = useState(false)
|
||||||
|
|
||||||
|
const published = reviews.filter(r => r.status === 'published')
|
||||||
|
const pending = reviews.filter(r => r.status === 'pending')
|
||||||
|
|
||||||
|
const avgRating = published.length
|
||||||
|
? (published.reduce((s, r) => s + r.rating, 0) / published.length).toFixed(1)
|
||||||
|
: '—'
|
||||||
|
|
||||||
|
const nps = published.length
|
||||||
|
? Math.round(
|
||||||
|
(published.filter(r => r.rating >= 9).length / published.length * 100) -
|
||||||
|
(published.filter(r => r.rating <= 6).length / published.length * 100),
|
||||||
|
)
|
||||||
|
: 0
|
||||||
|
|
||||||
|
const filtered = tab === 'all' ? reviews : reviews.filter(r => r.status === tab)
|
||||||
|
|
||||||
|
const approve = (id: string) =>
|
||||||
|
setReviews(prev => prev.map(r => r.id === id ? { ...r, status: 'published' } : r))
|
||||||
|
const reject = (id: string) =>
|
||||||
|
setReviews(prev => prev.map(r => r.id === id ? { ...r, status: 'rejected' } : r))
|
||||||
|
const sendReply = (id: string) => {
|
||||||
|
if (!replyText.trim()) return
|
||||||
|
setReviews(prev => prev.map(r => r.id === id ? { ...r, reply: replyText.trim(), status: 'published' } : r))
|
||||||
|
setReplyId(null)
|
||||||
|
setReplyText('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyLink = () => {
|
||||||
|
navigator.clipboard.writeText(REVIEW_LINK).catch(() => {})
|
||||||
|
setCopied(true)
|
||||||
|
setTimeout(() => setCopied(false), 2000)
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabs: { key: Tab; label: string; count?: number }[] = [
|
||||||
|
{ key: 'pending', label: 'На модерации', count: pending.length },
|
||||||
|
{ key: 'published', label: 'Опубликованы', count: published.length },
|
||||||
|
{ key: 'rejected', label: 'Отклонены' },
|
||||||
|
{ key: 'all', label: 'Все' },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-4 md:p-6 space-y-5">
|
||||||
|
{/* Header */}
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Отзывы гостей</h1>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-400">Сбор и модерация обратной связи</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||||
|
{[
|
||||||
|
{ label: 'Средняя оценка', value: avgRating, sub: 'из 10', color: 'text-amber-600 dark:text-amber-400' },
|
||||||
|
{ label: 'NPS', value: `+${nps}`, sub: 'индекс лояльности', color: 'text-emerald-600 dark:text-emerald-400' },
|
||||||
|
{ label: 'Опубликовано', value: published.length, sub: 'отзывов', color: 'text-brand-600 dark:text-brand-400' },
|
||||||
|
{ label: 'Ожидают', value: pending.length, sub: 'на модерации', color: pending.length > 0 ? 'text-red-600 dark:text-red-400' : 'text-slate-500' },
|
||||||
|
].map(s => (
|
||||||
|
<div key={s.label} className="card p-4">
|
||||||
|
<p className={cn('text-2xl font-bold', s.color)}>{s.value}</p>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400">{s.label}</p>
|
||||||
|
<p className="text-[10px] text-slate-400">{s.sub}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Public review link */}
|
||||||
|
<div className="card p-4">
|
||||||
|
<div className="flex items-start gap-4 flex-wrap">
|
||||||
|
<div className="w-14 h-14 rounded-xl bg-slate-100 dark:bg-slate-700 flex items-center justify-center shrink-0">
|
||||||
|
<QrCode size={28} className="text-slate-600 dark:text-slate-400" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="font-semibold text-slate-900 dark:text-slate-100 mb-1">Ссылка для сбора отзывов</p>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400 mb-2">
|
||||||
|
Отправьте гостю при выезде или разместите QR-код в номере и на стойке
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2 p-2.5 rounded-xl bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600">
|
||||||
|
<span className="text-sm font-mono text-slate-700 dark:text-slate-300 flex-1 truncate">{REVIEW_LINK}</span>
|
||||||
|
<button
|
||||||
|
onClick={copyLink}
|
||||||
|
className="shrink-0 flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 text-xs font-medium text-slate-700 dark:text-slate-300 hover:border-brand-400 transition-colors"
|
||||||
|
>
|
||||||
|
{copied ? <CheckCheck size={12} className="text-emerald-600" /> : <Copy size={12} />}
|
||||||
|
{copied ? 'Скопировано' : 'Копировать'}
|
||||||
|
</button>
|
||||||
|
<a
|
||||||
|
href={REVIEW_LINK}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="shrink-0 flex items-center gap-1 px-2.5 py-1 rounded-lg bg-brand-600 text-white text-xs font-medium hover:bg-brand-700 transition-colors"
|
||||||
|
>
|
||||||
|
<ExternalLink size={12} />
|
||||||
|
Открыть
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="shrink-0 flex flex-col gap-1.5">
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400">Перенаправление довольных (≥8) на:</p>
|
||||||
|
{['Booking.com', 'Яндекс', 'Google'].map(s => (
|
||||||
|
<label key={s} className="flex items-center gap-2 text-xs text-slate-700 dark:text-slate-300 cursor-pointer">
|
||||||
|
<input type="checkbox" defaultChecked className="rounded" />
|
||||||
|
{s}
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex gap-1 border-b border-slate-200 dark:border-slate-700">
|
||||||
|
{tabs.map(t => (
|
||||||
|
<button
|
||||||
|
key={t.key}
|
||||||
|
onClick={() => setTab(t.key)}
|
||||||
|
className={cn(
|
||||||
|
'px-4 py-2.5 text-sm font-medium border-b-2 transition-colors flex items-center gap-1.5',
|
||||||
|
tab === t.key
|
||||||
|
? 'border-brand-600 text-brand-600 dark:text-brand-400'
|
||||||
|
: 'border-transparent text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t.label}
|
||||||
|
{t.count !== undefined && t.count > 0 && (
|
||||||
|
<span className={cn(
|
||||||
|
'text-[10px] px-1.5 py-0.5 rounded-full font-semibold',
|
||||||
|
t.key === 'pending' ? 'bg-red-500 text-white' : 'bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-300',
|
||||||
|
)}>
|
||||||
|
{t.count}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reviews list */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
{filtered.length === 0 && (
|
||||||
|
<div className="card p-8 text-center text-slate-500 dark:text-slate-400">
|
||||||
|
<MessageSquare size={32} className="mx-auto mb-2 opacity-30" />
|
||||||
|
<p>Отзывов нет</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{filtered.map(review => (
|
||||||
|
<div key={review.id} className={cn('card p-4', review.status === 'pending' && 'border-amber-300 dark:border-amber-700/60 bg-amber-50/50 dark:bg-amber-900/10')}>
|
||||||
|
<div className="flex items-start gap-3 flex-wrap">
|
||||||
|
{/* Rating circle */}
|
||||||
|
<div className={cn('w-10 h-10 rounded-full flex items-center justify-center text-base font-bold shrink-0', ratingColor(review.rating))}>
|
||||||
|
{review.rating}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center justify-between gap-2 flex-wrap mb-1">
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
<p className="font-semibold text-slate-900 dark:text-slate-100">{review.guestName}</p>
|
||||||
|
<Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">
|
||||||
|
№{review.roomNumber}
|
||||||
|
</Badge>
|
||||||
|
<Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">
|
||||||
|
{SOURCE_LABEL[review.source]}
|
||||||
|
</Badge>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* 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 */}
|
||||||
|
{replyId === review.id && (
|
||||||
|
<div className="mt-3 space-y-2">
|
||||||
|
<textarea
|
||||||
|
className="input resize-none text-sm w-full"
|
||||||
|
rows={2}
|
||||||
|
placeholder="Напишите ответ гостю..."
|
||||||
|
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>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-2 shrink-0 flex-wrap">
|
||||||
|
{review.status === 'pending' && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => approve(review.id)}
|
||||||
|
className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-emerald-600 text-white text-xs font-medium hover:bg-emerald-700 transition-colors"
|
||||||
|
>
|
||||||
|
<ThumbsUp 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 && (
|
||||||
|
<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={() => approve(review.id)}
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
385
src/pages/RoomServicePage.tsx
Normal file
385
src/pages/RoomServicePage.tsx
Normal file
@@ -0,0 +1,385 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import {
|
||||||
|
UtensilsCrossed, Clock, CheckCircle2, ChefHat, Bell, Plus,
|
||||||
|
XCircle, RefreshCw, Eye, Flame,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { format } from 'date-fns'
|
||||||
|
import { cn, formatCurrency } from '../lib/utils'
|
||||||
|
import { Badge } from '../components/ui/Badge'
|
||||||
|
|
||||||
|
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
type OrderStatus = 'new' | 'preparing' | 'ready' | 'delivered' | 'cancelled'
|
||||||
|
|
||||||
|
interface MenuItem {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
category: string
|
||||||
|
price: number
|
||||||
|
emoji: string
|
||||||
|
time: number // minutes to prepare
|
||||||
|
popular?: boolean
|
||||||
|
stopList?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface OrderItem { item: MenuItem; qty: number }
|
||||||
|
|
||||||
|
interface RoomOrder {
|
||||||
|
id: string
|
||||||
|
roomNumber: string
|
||||||
|
guestName: string
|
||||||
|
items: OrderItem[]
|
||||||
|
total: number
|
||||||
|
status: OrderStatus
|
||||||
|
notes?: string
|
||||||
|
createdAt: Date
|
||||||
|
updatedAt: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Mock menu data ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const MENU_ITEMS: MenuItem[] = [
|
||||||
|
// Завтраки
|
||||||
|
{ id: 'm1', name: 'Яичница с беконом', category: 'Завтраки', price: 450, emoji: '🍳', time: 15, popular: true },
|
||||||
|
{ id: 'm2', name: 'Омлет с овощами', category: 'Завтраки', price: 380, emoji: '🥚', time: 12 },
|
||||||
|
{ id: 'm3', name: 'Сырники', category: 'Завтраки', price: 320, emoji: '🧀', time: 10 },
|
||||||
|
{ id: 'm4', name: 'Овсяная каша', category: 'Завтраки', price: 250, emoji: '🥣', time: 8 },
|
||||||
|
// Основные блюда
|
||||||
|
{ id: 'm5', name: 'Стейк рибай', category: 'Основные', price: 1800, emoji: '🥩', time: 25, popular: true },
|
||||||
|
{ id: 'm6', name: 'Куриная грудка', category: 'Основные', price: 750, emoji: '🍗', time: 20 },
|
||||||
|
{ id: 'm7', name: 'Паста карбонара', category: 'Основные', price: 650, emoji: '🍝', time: 18 },
|
||||||
|
{ id: 'm8', name: 'Лосось на гриле', category: 'Основные', price: 1200, emoji: '🐟', time: 22 },
|
||||||
|
// Закуски
|
||||||
|
{ id: 'm9', name: 'Цезарь с курицей', category: 'Закуски', price: 550, emoji: '🥗', time: 10, popular: true },
|
||||||
|
{ id: 'm10', name: 'Сэндвич клуб', category: 'Закуски', price: 420, emoji: '🥪', time: 8 },
|
||||||
|
{ id: 'm11', name: 'Сырная тарелка', category: 'Закуски', price: 680, emoji: '🧀', time: 5 },
|
||||||
|
// Напитки
|
||||||
|
{ id: 'm12', name: 'Кофе американо', category: 'Напитки', price: 180, emoji: '☕', time: 5, popular: true },
|
||||||
|
{ id: 'm13', name: 'Капучино', category: 'Напитки', price: 220, emoji: '☕', time: 6 },
|
||||||
|
{ id: 'm14', name: 'Свежевыжатый сок', category: 'Напитки', price: 280, emoji: '🍊', time: 5 },
|
||||||
|
{ id: 'm15', name: 'Вино красное бокал',category: 'Напитки', price: 450, emoji: '🍷', time: 3 },
|
||||||
|
// Десерты
|
||||||
|
{ id: 'm16', name: 'Тирамису', category: 'Десерты', price: 380, emoji: '🍮', time: 3 },
|
||||||
|
{ id: 'm17', name: 'Чизкейк', category: 'Десерты', price: 350, emoji: '🍰', time: 3 },
|
||||||
|
{ id: 'm18', name: 'Мороженое 3 шара', category: 'Десерты', price: 280, emoji: '🍨', time: 2, stopList: true },
|
||||||
|
]
|
||||||
|
|
||||||
|
const CATEGORIES = [...new Set(MENU_ITEMS.map(i => i.category))]
|
||||||
|
|
||||||
|
const d = (ms: number) => new Date(Date.now() - ms)
|
||||||
|
|
||||||
|
const MOCK_ORDERS: RoomOrder[] = [
|
||||||
|
{
|
||||||
|
id: 'o1',
|
||||||
|
roomNumber: '301',
|
||||||
|
guestName: 'Наталья Александрова',
|
||||||
|
items: [{ item: MENU_ITEMS[4], qty: 1 }, { item: MENU_ITEMS[11], qty: 2 }],
|
||||||
|
total: 2160,
|
||||||
|
status: 'new',
|
||||||
|
notes: 'Без лука',
|
||||||
|
createdAt: d(300000),
|
||||||
|
updatedAt: d(300000),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'o2',
|
||||||
|
roomNumber: '101',
|
||||||
|
guestName: 'Дмитрий Волков',
|
||||||
|
items: [{ item: MENU_ITEMS[0], qty: 1 }, { item: MENU_ITEMS[12], qty: 1 }],
|
||||||
|
total: 670,
|
||||||
|
status: 'preparing',
|
||||||
|
createdAt: d(900000),
|
||||||
|
updatedAt: d(600000),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'o3',
|
||||||
|
roomNumber: '201',
|
||||||
|
guestName: 'Игорь Соколов',
|
||||||
|
items: [{ item: MENU_ITEMS[8], qty: 2 }, { item: MENU_ITEMS[13], qty: 2 }],
|
||||||
|
total: 1660,
|
||||||
|
status: 'ready',
|
||||||
|
createdAt: d(1800000),
|
||||||
|
updatedAt: d(300000),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'o4',
|
||||||
|
roomNumber: '402',
|
||||||
|
guestName: 'Виктор Громов',
|
||||||
|
items: [{ item: MENU_ITEMS[6], qty: 2 }, { item: MENU_ITEMS[14], qty: 2 }],
|
||||||
|
total: 2200,
|
||||||
|
status: 'delivered',
|
||||||
|
createdAt: d(3600000),
|
||||||
|
updatedAt: d(1800000),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
// ── Status config ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const STATUS_CFG: Record<OrderStatus, { label: string; cls: string; next?: OrderStatus; nextLabel?: string }> = {
|
||||||
|
new: { label: 'Новый', cls: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300', next: 'preparing', nextLabel: 'Принять в работу' },
|
||||||
|
preparing: { label: 'Готовится', cls: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300', next: 'ready', nextLabel: 'Готово' },
|
||||||
|
ready: { label: 'Готово', cls: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300', next: 'delivered', nextLabel: 'Доставлен' },
|
||||||
|
delivered: { label: 'Доставлен', cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300' },
|
||||||
|
cancelled: { label: 'Отменён', cls: 'bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400' },
|
||||||
|
}
|
||||||
|
|
||||||
|
function elapsed(from: Date): string {
|
||||||
|
const s = Math.floor((Date.now() - from.getTime()) / 1000)
|
||||||
|
if (s < 60) return `${s} сек`
|
||||||
|
if (s < 3600) return `${Math.floor(s / 60)} мин`
|
||||||
|
return `${Math.floor(s / 3600)} ч`
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Component ─────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
type PageTab = 'orders' | 'menu'
|
||||||
|
|
||||||
|
export function RoomServicePage() {
|
||||||
|
const [tab, setTab] = useState<PageTab>('orders')
|
||||||
|
const [orders, setOrders] = useState<RoomOrder[]>(MOCK_ORDERS)
|
||||||
|
const [menuCat, setMenuCat] = useState(CATEGORIES[0])
|
||||||
|
const [, setTick] = useState(0)
|
||||||
|
|
||||||
|
// Live timer
|
||||||
|
useEffect(() => {
|
||||||
|
const id = setInterval(() => setTick(t => t + 1), 10000)
|
||||||
|
return () => clearInterval(id)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const activeOrders = orders.filter(o => o.status !== 'delivered' && o.status !== 'cancelled')
|
||||||
|
const doneOrders = orders.filter(o => o.status === 'delivered' || o.status === 'cancelled')
|
||||||
|
|
||||||
|
const advance = (id: string) => {
|
||||||
|
setOrders(prev => prev.map(o => {
|
||||||
|
if (o.id !== id) return o
|
||||||
|
const cfg = STATUS_CFG[o.status]
|
||||||
|
if (!cfg.next) return o
|
||||||
|
return { ...o, status: cfg.next, updatedAt: new Date() }
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancel = (id: string) =>
|
||||||
|
setOrders(prev => prev.map(o => o.id === id ? { ...o, status: 'cancelled', updatedAt: new Date() } : o))
|
||||||
|
|
||||||
|
const todayRevenue = doneOrders
|
||||||
|
.filter(o => o.status === 'delivered')
|
||||||
|
.reduce((s, o) => s + o.total, 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">Room Service</h1>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-400">Заказы из номеров</p>
|
||||||
|
</div>
|
||||||
|
{activeOrders.filter(o => o.status === 'new').length > 0 && (
|
||||||
|
<div className="flex items-center gap-2 px-3 py-2 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-300 dark:border-red-700 animate-pulse">
|
||||||
|
<Bell size={16} className="text-red-600" />
|
||||||
|
<span className="text-sm font-semibold text-red-700 dark:text-red-300">
|
||||||
|
{activeOrders.filter(o => o.status === 'new').length} новых заказа
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||||
|
{[
|
||||||
|
{ label: 'Активных заказов', value: activeOrders.length, color: 'text-brand-600 dark:text-brand-400' },
|
||||||
|
{ label: 'Новые', value: activeOrders.filter(o => o.status === 'new').length, color: 'text-red-600 dark:text-red-400' },
|
||||||
|
{ label: 'Готовятся', value: activeOrders.filter(o => o.status === 'preparing').length, color: 'text-amber-600 dark:text-amber-400' },
|
||||||
|
{ label: 'Выручка сегодня', value: formatCurrency(todayRevenue), 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>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex gap-1 p-1 bg-slate-100 dark:bg-slate-700/50 rounded-xl w-fit">
|
||||||
|
{([['orders', 'Заказы'], ['menu', 'Меню']] as const).map(([key, label]) => (
|
||||||
|
<button
|
||||||
|
key={key}
|
||||||
|
onClick={() => setTab(key)}
|
||||||
|
className={cn(
|
||||||
|
'px-4 py-1.5 rounded-lg text-sm font-medium transition-colors',
|
||||||
|
tab === key
|
||||||
|
? 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-sm'
|
||||||
|
: 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
{key === 'orders' && activeOrders.length > 0 && (
|
||||||
|
<span className="ml-1.5 text-[10px] bg-red-500 text-white px-1.5 py-0.5 rounded-full">
|
||||||
|
{activeOrders.length}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Orders tab */}
|
||||||
|
{tab === 'orders' && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Active orders */}
|
||||||
|
{activeOrders.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Активные</p>
|
||||||
|
<div className="grid md:grid-cols-2 xl:grid-cols-3 gap-3">
|
||||||
|
{activeOrders.map(order => {
|
||||||
|
const cfg = STATUS_CFG[order.status]
|
||||||
|
const isNew = order.status === 'new'
|
||||||
|
return (
|
||||||
|
<div key={order.id} className={cn('card p-4', isNew && 'border-red-300 dark:border-red-700/60 bg-red-50/50 dark:bg-red-900/10')}>
|
||||||
|
<div className="flex items-start justify-between mb-3">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-0.5">
|
||||||
|
<span className="text-lg font-bold text-slate-900 dark:text-slate-100">№{order.roomNumber}</span>
|
||||||
|
{isNew && <Flame size={14} className="text-red-500 animate-bounce" />}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400">{order.guestName}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<Badge className={cfg.cls}>{cfg.label}</Badge>
|
||||||
|
<p className="text-[10px] text-slate-400 mt-1 flex items-center gap-0.5 justify-end">
|
||||||
|
<Clock size={9} />
|
||||||
|
{elapsed(order.createdAt)} назад
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1 mb-3">
|
||||||
|
{order.items.map(oi => (
|
||||||
|
<div key={oi.item.id} className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-slate-700 dark:text-slate-300">
|
||||||
|
{oi.item.emoji} {oi.item.name} ×{oi.qty}
|
||||||
|
</span>
|
||||||
|
<span className="text-slate-500 dark:text-slate-400">{formatCurrency(oi.item.price * oi.qty)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{order.notes && (
|
||||||
|
<p className="text-xs text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2 py-1 rounded-lg mt-1">
|
||||||
|
💬 {order.notes}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between border-t border-slate-100 dark:border-slate-700 pt-2.5">
|
||||||
|
<span className="font-bold text-slate-900 dark:text-slate-100">{formatCurrency(order.total)}</span>
|
||||||
|
<div className="flex gap-1.5">
|
||||||
|
{order.status !== 'cancelled' && (
|
||||||
|
<button
|
||||||
|
onClick={() => cancel(order.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"
|
||||||
|
title="Отменить"
|
||||||
|
>
|
||||||
|
<XCircle size={15} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{cfg.next && (
|
||||||
|
<button
|
||||||
|
onClick={() => advance(order.id)}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
{cfg.next === 'preparing' && <ChefHat size={12} />}
|
||||||
|
{cfg.next === 'ready' && <CheckCircle2 size={12} />}
|
||||||
|
{cfg.next === 'delivered' && <CheckCircle2 size={12} />}
|
||||||
|
{cfg.nextLabel}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Done orders */}
|
||||||
|
{doneOrders.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Завершённые</p>
|
||||||
|
<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>
|
||||||
|
{doneOrders.map(order => (
|
||||||
|
<tr key={order.id} className="border-b border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-700/30">
|
||||||
|
<td className="px-4 py-2.5 font-medium text-slate-900 dark:text-slate-100">№{order.roomNumber}</td>
|
||||||
|
<td className="px-4 py-2.5 text-slate-600 dark:text-slate-400">{order.guestName}</td>
|
||||||
|
<td className="px-4 py-2.5 text-slate-600 dark:text-slate-400">{order.items.map(i => `${i.item.emoji}×${i.qty}`).join(' ')}</td>
|
||||||
|
<td className="px-4 py-2.5 font-semibold text-slate-900 dark:text-slate-100">{formatCurrency(order.total)}</td>
|
||||||
|
<td className="px-4 py-2.5"><Badge className={STATUS_CFG[order.status].cls}>{STATUS_CFG[order.status].label}</Badge></td>
|
||||||
|
<td className="px-4 py-2.5 text-slate-400 text-xs">{format(order.updatedAt, 'HH:mm')}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Menu tab */}
|
||||||
|
{tab === 'menu' && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex gap-1 flex-wrap">
|
||||||
|
{CATEGORIES.map(cat => (
|
||||||
|
<button
|
||||||
|
key={cat}
|
||||||
|
onClick={() => setMenuCat(cat)}
|
||||||
|
className={cn(
|
||||||
|
'px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
|
||||||
|
menuCat === cat
|
||||||
|
? 'bg-brand-600 text-white border-brand-600'
|
||||||
|
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600 hover:border-brand-400',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||||
|
{MENU_ITEMS.filter(i => i.category === menuCat).map(item => (
|
||||||
|
<div key={item.id} className={cn('card p-4', item.stopList && 'opacity-50')}>
|
||||||
|
<div className="flex items-start justify-between mb-2">
|
||||||
|
<span className="text-2xl">{item.emoji}</span>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{item.popular && (
|
||||||
|
<Badge className="bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
|
||||||
|
Хит
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{item.stopList && (
|
||||||
|
<Badge className="bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">
|
||||||
|
Стоп
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="font-semibold text-slate-900 dark:text-slate-100">{item.name}</p>
|
||||||
|
<p className="text-xs text-slate-400 mt-0.5 flex items-center gap-1">
|
||||||
|
<Clock size={10} />
|
||||||
|
{item.time} мин
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center justify-between mt-3">
|
||||||
|
<span className="text-base font-bold text-brand-600 dark:text-brand-400">{formatCurrency(item.price)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user