Add pricing, tariffs, loyalty, maintenance, discounts features
- TariffsPage (/tariffs): rate plan builder — meal plans (RO/BB/HB/FB/AI), inclusions picker, price modifier (% or ₽), min nights, cancellation policy - DynamicPricingPage (/dynamic-pricing): rule engine for weekends, holidays, seasons, custom date ranges, weather; interactive price calendar preview with colour-coded effective rates per day - LoyaltyPage (/loyalty): program settings (points/₽, point value, expiry), 4-level structure (Bronze/Silver/Gold/Platinum) with editable perks, guest portal preview mockup, top-guests leaderboard - MaintenancePage (/maintenance): scheduled room & service downtime records; status flow (scheduled → in_progress → done); time range support for services - DiscountsPage (/discounts): discount catalogue — % or ₽, category (all / loyalty / corporate / promo), min nights, validity dates, active toggle - BookingModal: discount now selected from dropdown of active discounts only (replaces free-form input); summary shows discount name + saved amount - Sidebar: new "Цены и тарифы" section (Тарифы, Динамические цены, Скидки); Управление extended with Лояльность and Тех. перерывы Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
637
src/pages/DynamicPricingPage.tsx
Normal file
637
src/pages/DynamicPricingPage.tsx
Normal file
@@ -0,0 +1,637 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Plus, Edit2, Trash2, ToggleLeft, ToggleRight, Sun, Cloud, CloudRain,
|
||||
Snowflake, CalendarDays, Calendar, TrendingUp, TrendingDown, Info,
|
||||
ChevronLeft, ChevronRight, Flame,
|
||||
} from 'lucide-react'
|
||||
import { Modal } from '../components/ui/Modal'
|
||||
import { cn } from '../lib/utils'
|
||||
import { format, addDays, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, getDay, isWeekend } from 'date-fns'
|
||||
import { ru } from 'date-fns/locale'
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
type RuleType = 'weekend' | 'holiday' | 'season' | 'custom' | 'weather'
|
||||
type WeatherType = 'sunny' | 'cloudy' | 'rain' | 'snow'
|
||||
|
||||
interface PricingRule {
|
||||
id: string
|
||||
name: string
|
||||
type: RuleType
|
||||
isActive: boolean
|
||||
modifierType: 'percent' | 'fixed'
|
||||
modifierValue: number // positive = markup, negative = discount
|
||||
priority: number // higher = applied last (wins)
|
||||
// type-specific
|
||||
weekdays?: number[] // 0=Sun, 1=Mon ... 6=Sat
|
||||
dateFrom?: string
|
||||
dateTo?: string
|
||||
weatherTypes?: WeatherType[]
|
||||
}
|
||||
|
||||
// ─── Mock Rules ───────────────────────────────────────────────────────────────
|
||||
|
||||
const MOCK_RULES: PricingRule[] = [
|
||||
{
|
||||
id: 'r-1',
|
||||
name: 'Надбавка за выходные',
|
||||
type: 'weekend',
|
||||
isActive: true,
|
||||
modifierType: 'percent',
|
||||
modifierValue: 20,
|
||||
priority: 1,
|
||||
weekdays: [5, 6], // Fri, Sat
|
||||
},
|
||||
{
|
||||
id: 'r-2',
|
||||
name: 'Новогодние праздники',
|
||||
type: 'holiday',
|
||||
isActive: true,
|
||||
modifierType: 'percent',
|
||||
modifierValue: 60,
|
||||
priority: 3,
|
||||
dateFrom: '2026-12-30',
|
||||
dateTo: '2027-01-08',
|
||||
},
|
||||
{
|
||||
id: 'r-3',
|
||||
name: '8 Марта',
|
||||
type: 'holiday',
|
||||
isActive: true,
|
||||
modifierType: 'percent',
|
||||
modifierValue: 30,
|
||||
priority: 3,
|
||||
dateFrom: '2026-03-06',
|
||||
dateTo: '2026-03-09',
|
||||
},
|
||||
{
|
||||
id: 'r-4',
|
||||
name: 'Майские праздники',
|
||||
type: 'holiday',
|
||||
isActive: true,
|
||||
modifierType: 'percent',
|
||||
modifierValue: 40,
|
||||
priority: 3,
|
||||
dateFrom: '2026-04-30',
|
||||
dateTo: '2026-05-10',
|
||||
},
|
||||
{
|
||||
id: 'r-5',
|
||||
name: 'Низкий сезон (январь–февраль)',
|
||||
type: 'season',
|
||||
isActive: true,
|
||||
modifierType: 'percent',
|
||||
modifierValue: -20,
|
||||
priority: 0,
|
||||
dateFrom: '2026-01-09',
|
||||
dateTo: '2026-02-28',
|
||||
},
|
||||
{
|
||||
id: 'r-6',
|
||||
name: 'Высокий сезон (июнь–август)',
|
||||
type: 'season',
|
||||
isActive: true,
|
||||
modifierType: 'percent',
|
||||
modifierValue: 35,
|
||||
priority: 0,
|
||||
dateFrom: '2026-06-01',
|
||||
dateTo: '2026-08-31',
|
||||
},
|
||||
{
|
||||
id: 'r-7',
|
||||
name: 'Солнечная погода +10%',
|
||||
type: 'weather',
|
||||
isActive: false,
|
||||
modifierType: 'percent',
|
||||
modifierValue: 10,
|
||||
priority: 1,
|
||||
weatherTypes: ['sunny'],
|
||||
},
|
||||
{
|
||||
id: 'r-8',
|
||||
name: 'Дождь — скидка 10%',
|
||||
type: 'weather',
|
||||
isActive: true,
|
||||
modifierType: 'percent',
|
||||
modifierValue: -10,
|
||||
priority: 1,
|
||||
weatherTypes: ['rain', 'snow'],
|
||||
},
|
||||
]
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
const RULE_TYPE_META: Record<RuleType, { label: string; color: string; bg: string }> = {
|
||||
weekend: { label: 'Выходные', color: 'text-blue-700 dark:text-blue-400', bg: 'bg-blue-50 dark:bg-blue-900/20' },
|
||||
holiday: { label: 'Праздник', color: 'text-amber-700 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-900/20' },
|
||||
season: { label: 'Сезон', color: 'text-green-700 dark:text-green-400', bg: 'bg-green-50 dark:bg-green-900/20' },
|
||||
custom: { label: 'Свой период', color: 'text-violet-700 dark:text-violet-400', bg: 'bg-violet-50 dark:bg-violet-900/20' },
|
||||
weather: { label: 'Погода', color: 'text-cyan-700 dark:text-cyan-400', bg: 'bg-cyan-50 dark:bg-cyan-900/20' },
|
||||
}
|
||||
|
||||
const WEATHER_META: Record<WeatherType, { icon: React.ElementType; label: string }> = {
|
||||
sunny: { icon: Sun, label: 'Ясно' },
|
||||
cloudy: { icon: Cloud, label: 'Облачно' },
|
||||
rain: { icon: CloudRain, label: 'Дождь' },
|
||||
snow: { icon: Snowflake, label: 'Снег' },
|
||||
}
|
||||
|
||||
const WEEKDAY_LABELS = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']
|
||||
|
||||
// Compute effective multiplier for a date from active rules
|
||||
function getEffectiveModifier(date: Date, rules: PricingRule[]): number {
|
||||
const dateStr = format(date, 'yyyy-MM-dd')
|
||||
const dayOfWeek = getDay(date) // 0=Sun
|
||||
const weekend = dayOfWeek === 0 || dayOfWeek === 6
|
||||
|
||||
const activeRules = rules
|
||||
.filter(r => r.isActive)
|
||||
.sort((a, b) => a.priority - b.priority)
|
||||
|
||||
let totalMod = 0
|
||||
for (const rule of activeRules) {
|
||||
let applies = false
|
||||
if (rule.type === 'weekend') {
|
||||
applies = (rule.weekdays ?? [5, 6]).some(d => {
|
||||
// map our "Fri=5, Sat=6" to getDay (Fri=5, Sat=6)
|
||||
return d === dayOfWeek
|
||||
}) || weekend && !rule.weekdays
|
||||
}
|
||||
if (rule.type === 'holiday' || rule.type === 'season' || rule.type === 'custom') {
|
||||
if (rule.dateFrom && rule.dateTo) {
|
||||
applies = dateStr >= rule.dateFrom && dateStr <= rule.dateTo
|
||||
}
|
||||
}
|
||||
// weather rules don't apply to static calendar preview
|
||||
if (applies) {
|
||||
totalMod += rule.modifierType === 'percent' ? rule.modifierValue : 0
|
||||
}
|
||||
}
|
||||
return totalMod
|
||||
}
|
||||
|
||||
// ─── Rule Modal ───────────────────────────────────────────────────────────────
|
||||
|
||||
const EMPTY_RULE: Omit<PricingRule, 'id'> = {
|
||||
name: '', type: 'weekend', isActive: true,
|
||||
modifierType: 'percent', modifierValue: 20, priority: 1,
|
||||
weekdays: [5, 6],
|
||||
}
|
||||
|
||||
function RuleModal({
|
||||
rule, onSave, onClose,
|
||||
}: {
|
||||
rule?: PricingRule
|
||||
onSave: (r: Omit<PricingRule, 'id'>) => void
|
||||
onClose: () => void
|
||||
}) {
|
||||
const [form, setForm] = useState<Omit<PricingRule, 'id'>>(rule ? { ...rule } : { ...EMPTY_RULE })
|
||||
const set = <K extends keyof typeof form>(k: K, v: typeof form[K]) =>
|
||||
setForm(prev => ({ ...prev, [k]: v }))
|
||||
|
||||
const toggleWeekday = (d: number) =>
|
||||
setForm(prev => ({
|
||||
...prev,
|
||||
weekdays: prev.weekdays?.includes(d)
|
||||
? prev.weekdays.filter(x => x !== d)
|
||||
: [...(prev.weekdays ?? []), d],
|
||||
}))
|
||||
|
||||
const toggleWeatherType = (w: WeatherType) =>
|
||||
setForm(prev => ({
|
||||
...prev,
|
||||
weatherTypes: prev.weatherTypes?.includes(w)
|
||||
? prev.weatherTypes.filter(x => x !== w)
|
||||
: [...(prev.weatherTypes ?? []), w],
|
||||
}))
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open
|
||||
onClose={onClose}
|
||||
title={rule ? 'Редактировать правило' : 'Новое правило цены'}
|
||||
size="lg"
|
||||
footer={
|
||||
<>
|
||||
<button onClick={onClose} className="btn-secondary">Отмена</button>
|
||||
<button
|
||||
onClick={() => { if (form.name) onSave(form) }}
|
||||
className="btn-primary"
|
||||
disabled={!form.name}
|
||||
>
|
||||
{rule ? 'Сохранить' : 'Добавить правило'}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Название *</label>
|
||||
<input type="text" className="input" placeholder="Надбавка за выходные"
|
||||
value={form.name} onChange={e => set('name', e.target.value)} />
|
||||
</div>
|
||||
|
||||
{/* Type */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Тип правила</label>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{(Object.entries(RULE_TYPE_META) as [RuleType, typeof RULE_TYPE_META[RuleType]][]).map(([k, v]) => (
|
||||
<button
|
||||
key={k}
|
||||
type="button"
|
||||
onClick={() => set('type', k)}
|
||||
className={cn(
|
||||
'py-2 rounded-xl border text-xs font-medium transition-colors',
|
||||
form.type === k
|
||||
? 'bg-brand-600 border-brand-600 text-white'
|
||||
: 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:border-brand-400',
|
||||
)}
|
||||
>
|
||||
{v.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Type-specific params */}
|
||||
{form.type === 'weekend' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Дни недели</label>
|
||||
<div className="flex gap-2">
|
||||
{WEEKDAY_LABELS.map((label, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
type="button"
|
||||
onClick={() => toggleWeekday(idx)}
|
||||
className={cn(
|
||||
'w-10 h-10 rounded-xl text-sm font-medium border transition-colors',
|
||||
form.weekdays?.includes(idx)
|
||||
? 'bg-brand-600 border-brand-600 text-white'
|
||||
: 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300',
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{['holiday', 'season', 'custom'].includes(form.type) && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Дата начала</label>
|
||||
<input type="date" className="input"
|
||||
value={form.dateFrom ?? ''} onChange={e => set('dateFrom', e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Дата конца</label>
|
||||
<input type="date" className="input"
|
||||
value={form.dateTo ?? ''} onChange={e => set('dateTo', e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{form.type === 'weather' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Условие погоды</label>
|
||||
<div className="flex gap-2">
|
||||
{(Object.entries(WEATHER_META) as [WeatherType, typeof WEATHER_META[WeatherType]][]).map(([k, v]) => (
|
||||
<button
|
||||
key={k}
|
||||
type="button"
|
||||
onClick={() => toggleWeatherType(k)}
|
||||
className={cn(
|
||||
'flex-1 flex flex-col items-center gap-1 py-2.5 rounded-xl border text-xs font-medium transition-colors',
|
||||
form.weatherTypes?.includes(k)
|
||||
? 'bg-brand-600 border-brand-600 text-white'
|
||||
: 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300',
|
||||
)}
|
||||
>
|
||||
<v.icon size={18} />
|
||||
{v.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mt-2">
|
||||
Погодные правила применяются автоматически при подключении к API прогноза погоды (OpenWeather)
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modifier */}
|
||||
<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>
|
||||
<div className="flex gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => set('modifierType', 'percent')}
|
||||
className={cn('px-2.5 py-1.5 rounded-lg text-xs font-medium border transition-colors',
|
||||
form.modifierType === 'percent'
|
||||
? 'bg-brand-600 text-white border-brand-600'
|
||||
: 'bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-600'
|
||||
)}
|
||||
>%</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => set('modifierType', 'fixed')}
|
||||
className={cn('px-2.5 py-1.5 rounded-lg text-xs font-medium border transition-colors',
|
||||
form.modifierType === 'fixed'
|
||||
? 'bg-brand-600 text-white border-brand-600'
|
||||
: 'bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-600'
|
||||
)}
|
||||
>₽</button>
|
||||
<input
|
||||
type="number"
|
||||
className="input flex-1 text-sm"
|
||||
placeholder="+20 или -10"
|
||||
value={form.modifierValue || ''}
|
||||
onChange={e => set('modifierValue', parseInt(e.target.value) || 0)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mt-1">
|
||||
Пример: база 5 000 ₽ → +{form.modifierValue}%
|
||||
= {Math.round(5000 * (1 + form.modifierValue / 100)).toLocaleString('ru-RU')} ₽
|
||||
</p>
|
||||
</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} max={10} className="input"
|
||||
value={form.priority}
|
||||
onChange={e => set('priority', Math.max(0, parseInt(e.target.value) || 0))}
|
||||
/>
|
||||
<p className="text-xs text-slate-400 mt-1">При конфликте — выше приоритет побеждает</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Price Calendar ───────────────────────────────────────────────────────────
|
||||
|
||||
function PriceCalendar({ rules, baseRate }: { rules: PricingRule[]; baseRate: number }) {
|
||||
const [month, setMonth] = useState(new Date(2026, 2)) // March 2026
|
||||
|
||||
const start = startOfMonth(month)
|
||||
const end = endOfMonth(month)
|
||||
const days = eachDayOfInterval({ start, end })
|
||||
const offset = (getDay(start) + 6) % 7 // Mon=0
|
||||
|
||||
function modColor(mod: number) {
|
||||
if (mod > 40) return 'bg-red-200 dark:bg-red-900/50 text-red-900 dark:text-red-200'
|
||||
if (mod > 15) return 'bg-orange-100 dark:bg-orange-900/40 text-orange-900 dark:text-orange-200'
|
||||
if (mod > 0) return 'bg-amber-50 dark:bg-amber-900/20 text-amber-900 dark:text-amber-200'
|
||||
if (mod < -10) return 'bg-blue-100 dark:bg-blue-900/40 text-blue-900 dark:text-blue-200'
|
||||
if (mod < 0) return 'bg-sky-50 dark:bg-sky-900/20 text-sky-900 dark:text-sky-200'
|
||||
return 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300">
|
||||
Предпросмотр цен — база {baseRate.toLocaleString('ru-RU')} ₽/ночь
|
||||
</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={() => setMonth(m => new Date(m.getFullYear(), m.getMonth() - 1))} className="btn-ghost p-1">
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<span className="text-sm font-medium text-slate-700 dark:text-slate-300 w-32 text-center">
|
||||
{format(month, 'LLLL yyyy', { locale: ru })}
|
||||
</span>
|
||||
<button onClick={() => setMonth(m => new Date(m.getFullYear(), m.getMonth() + 1))} className="btn-ghost p-1">
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 gap-1 mb-1">
|
||||
{['Пн','Вт','Ср','Чт','Пт','Сб','Вс'].map(d => (
|
||||
<div key={d} className="text-center text-xs font-medium text-slate-400 py-1">{d}</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{Array.from({ length: offset }).map((_, i) => <div key={`e-${i}`} />)}
|
||||
{days.map(day => {
|
||||
const mod = getEffectiveModifier(day, rules)
|
||||
const price = Math.round(baseRate * (1 + mod / 100))
|
||||
const sameM = isSameMonth(day, month)
|
||||
return (
|
||||
<div
|
||||
key={day.toISOString()}
|
||||
className={cn(
|
||||
'rounded-lg p-1.5 text-center transition-colors',
|
||||
sameM ? modColor(mod) : 'opacity-0',
|
||||
)}
|
||||
>
|
||||
<p className="text-xs font-medium">{format(day, 'd')}</p>
|
||||
<p className="text-[10px] font-bold leading-tight">
|
||||
{price.toLocaleString('ru-RU')}
|
||||
</p>
|
||||
{mod !== 0 && (
|
||||
<p className={cn('text-[9px] leading-tight font-semibold',
|
||||
mod > 0 ? 'text-red-600 dark:text-red-400' : 'text-blue-600 dark:text-blue-400'
|
||||
)}>
|
||||
{mod > 0 ? `+${mod}` : mod}%
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex flex-wrap gap-3 mt-3 pt-3 border-t border-slate-200 dark:border-slate-700">
|
||||
{[
|
||||
{ cls: 'bg-white dark:bg-slate-700', label: 'Базовая цена' },
|
||||
{ cls: 'bg-amber-50 dark:bg-amber-900/20', label: '+1–15%' },
|
||||
{ cls: 'bg-orange-100 dark:bg-orange-900/40', label: '+16–40%' },
|
||||
{ cls: 'bg-red-200 dark:bg-red-900/50', label: '+40%+' },
|
||||
{ cls: 'bg-blue-100 dark:bg-blue-900/40', label: 'Скидка' },
|
||||
].map(l => (
|
||||
<div key={l.label} className="flex items-center gap-1.5">
|
||||
<div className={cn('w-3 h-3 rounded border border-slate-200 dark:border-slate-600', l.cls)} />
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">{l.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main Page ────────────────────────────────────────────────────────────────
|
||||
|
||||
export function DynamicPricingPage() {
|
||||
const [rules, setRules] = useState<PricingRule[]>(MOCK_RULES)
|
||||
const [modal, setModal] = useState<'create' | PricingRule | null>(null)
|
||||
const [delTarget, setDel] = useState<PricingRule | null>(null)
|
||||
const BASE_RATE = 5600
|
||||
|
||||
const save = (data: Omit<PricingRule, 'id'>) => {
|
||||
if (typeof modal === 'object' && modal !== null) {
|
||||
setRules(prev => prev.map(r => r.id === modal.id ? { ...data, id: modal.id } : r))
|
||||
} else {
|
||||
setRules(prev => [...prev, { ...data, id: `r-${Date.now()}` }])
|
||||
}
|
||||
setModal(null)
|
||||
}
|
||||
|
||||
const toggleActive = (id: string) =>
|
||||
setRules(prev => prev.map(r => r.id === id ? { ...r, isActive: !r.isActive } : r))
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Динамические цены</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
|
||||
Правила автоматического изменения цен по дням, сезонам и погоде
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={() => setModal('create')} className="btn-primary flex items-center gap-2">
|
||||
<Plus size={16} />
|
||||
Новое правило
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex items-start gap-3 p-4 rounded-xl bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800">
|
||||
<Flame size={16} className="text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
|
||||
<p className="text-sm text-amber-700 dark:text-amber-400">
|
||||
Правила применяются к базовой цене номера. При нескольких совпадающих правилах суммируются все надбавки/скидки.
|
||||
Правило с более высоким приоритетом перекрывает остальные при конфликте.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
||||
{/* Rules list */}
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-sm font-semibold text-slate-600 dark:text-slate-400 uppercase tracking-wide">
|
||||
Правила ({rules.filter(r => r.isActive).length} активных)
|
||||
</h2>
|
||||
{rules.map(rule => {
|
||||
const meta = RULE_TYPE_META[rule.type]
|
||||
return (
|
||||
<div
|
||||
key={rule.id}
|
||||
className={cn(
|
||||
'card p-4 flex items-center gap-3 transition-opacity',
|
||||
!rule.isActive && 'opacity-50',
|
||||
)}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap mb-0.5">
|
||||
<span className="text-sm font-semibold text-slate-900 dark:text-slate-100">{rule.name}</span>
|
||||
<span className={cn('px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase', meta.bg, meta.color)}>
|
||||
{meta.label}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{rule.type === 'weekend' && rule.weekdays && (
|
||||
`Дни: ${rule.weekdays.map(d => WEEKDAY_LABELS[d]).join(', ')}`
|
||||
)}
|
||||
{['holiday','season','custom'].includes(rule.type) && rule.dateFrom && (
|
||||
`${rule.dateFrom} — ${rule.dateTo}`
|
||||
)}
|
||||
{rule.type === 'weather' && rule.weatherTypes && (
|
||||
`Погода: ${rule.weatherTypes.join(', ')}`
|
||||
)}
|
||||
{' · '} Приоритет: {rule.priority}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{rule.modifierValue > 0
|
||||
? <TrendingUp size={14} className="text-red-500" />
|
||||
: <TrendingDown size={14} className="text-blue-500" />
|
||||
}
|
||||
<span className={cn('text-sm font-bold',
|
||||
rule.modifierValue > 0 ? 'text-red-600 dark:text-red-400' : 'text-blue-600 dark:text-blue-400'
|
||||
)}>
|
||||
{rule.modifierValue > 0 ? '+' : ''}{rule.modifierValue}
|
||||
{rule.modifierType === 'percent' ? '%' : ' ₽'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<button
|
||||
onClick={() => toggleActive(rule.id)}
|
||||
className={cn('p-1.5 rounded-lg transition-colors',
|
||||
rule.isActive ? 'text-brand-600' : 'text-slate-400'
|
||||
)}
|
||||
>
|
||||
{rule.isActive ? <ToggleRight size={20} /> : <ToggleLeft size={20} />}
|
||||
</button>
|
||||
<button onClick={() => setModal(rule)}
|
||||
className="p-1.5 rounded-lg text-slate-400 hover:text-brand-600 hover:bg-brand-50 dark:hover:bg-brand-900/20 transition-colors"
|
||||
>
|
||||
<Edit2 size={15} />
|
||||
</button>
|
||||
<button onClick={() => setDel(rule)}
|
||||
className="p-1.5 rounded-lg text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Weather integration note */}
|
||||
<div className="card p-4 border-dashed">
|
||||
<div className="flex items-start gap-3">
|
||||
<Sun size={16} className="text-amber-500 mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-700 dark:text-slate-300">Интеграция с погодой</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
|
||||
Правила типа «Погода» применяются автоматически при подключении OpenWeather API в настройках.
|
||||
Прогноз загружается на 7 дней вперёд и обновляется каждые 6 часов.
|
||||
</p>
|
||||
<button className="mt-2 text-xs text-brand-600 dark:text-brand-400 hover:underline">
|
||||
Подключить API погоды →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price calendar */}
|
||||
<PriceCalendar rules={rules} baseRate={BASE_RATE} />
|
||||
</div>
|
||||
|
||||
{modal && (
|
||||
<RuleModal
|
||||
rule={typeof modal === 'object' ? modal : undefined}
|
||||
onSave={save}
|
||||
onClose={() => setModal(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{delTarget && (
|
||||
<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-xl p-6 w-full max-w-sm">
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Удалить правило?</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mb-4">«{delTarget.name}» будет удалён.</p>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button onClick={() => setDel(null)} className="btn-secondary">Отмена</button>
|
||||
<button
|
||||
onClick={() => { setRules(prev => prev.filter(r => r.id !== delTarget.id)); setDel(null) }}
|
||||
className="px-4 py-2 rounded-xl bg-red-600 text-white text-sm font-medium hover:bg-red-700"
|
||||
>Удалить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user