Add Availability Calendar, Modules system, and route refactoring

- Add AvailabilityPage with price grid (categories × dates), drag-select,
  channel prices, EditPanel, PeriodModal, and rate periods tab
- Add ModulesContext with localStorage persistence and dynamic sidebar items
- Add ModulesPage with WiFi Auth, Payments, TV Welcome, Smart Locks,
  OLAP Reports, Website Builder, Booking Widget modules
- Add ReportsPage (OLAP analytics with KPI cards, charts, tables)
- Add WebsitePage and BookingWidgetPage placeholders
- Remove hotel slug from URL routing; hotel context from JWT
- Add Доступность nav item in Sidebar under Управление
- Fix LoginPage redirects and HotelSync branding

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-11 14:43:18 +03:00
parent 63c9ae574f
commit b277e3e38d
14 changed files with 1869 additions and 78 deletions

View File

@@ -1,11 +1,12 @@
import { NavLink, useNavigate } from 'react-router-dom'
import {
CalendarDays, BookOpen, BedDouble, Sparkles, Globe, Settings,
FileText, LayoutDashboard, Building2, Users, X, Hotel,
FileText, LayoutDashboard, Building2, Users, X, Hotel, Puzzle, CalendarRange,
} from 'lucide-react'
import { useAuth } from '../../contexts/AuthContext'
import { useModules } from '../../contexts/ModulesContext'
import { MODULES_DATA } from '../../data/modulesData'
import { cn } from '../../lib/utils'
import { MOCK_HOTELS } from '../../data/mockData'
interface SidebarProps {
open: boolean
@@ -34,17 +35,19 @@ function NavItem({
export function Sidebar({ open, onClose }: SidebarProps) {
const { user } = useAuth()
const { statuses } = useModules()
const navigate = useNavigate()
const hotel = user?.hotelId ? MOCK_HOTELS.find(h => h.id === user.hotelId) : null
const slug = hotel?.slug ?? 'grand-palace'
const isAdmin = user?.role === 'super_admin'
const isHousekeeper = user?.role === 'housekeeper'
// Активные модули у которых есть sidebarItem
const activeModuleItems = MODULES_DATA.filter(
m => m.sidebarItem && (statuses[m.id] === 'active' || statuses[m.id] === 'trial'),
)
return (
<>
{/* Mobile backdrop */}
{open && (
<div
className="fixed inset-0 bg-black/40 z-40 lg:hidden"
@@ -67,25 +70,22 @@ export function Sidebar({ open, onClose }: SidebarProps) {
<Hotel size={16} className="text-white" />
</div>
<span className="text-lg font-bold text-slate-900 dark:text-slate-100">
Hotel<span className="text-brand-600">Next</span>
Hotel<span className="text-brand-600">Sync</span>
</span>
</div>
<button
onClick={onClose}
className="lg:hidden btn-ghost p-1.5"
>
<button onClick={onClose} className="lg:hidden btn-ghost p-1.5">
<X size={16} />
</button>
</div>
{/* Hotel selector (non-admin) */}
{hotel && (
{/* Hotel name */}
{!isAdmin && user?.hotelName && (
<div className="mx-3 mt-3 px-3 py-2.5 rounded-lg bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600">
<p className="text-xs text-slate-500 dark:text-slate-400 font-medium mb-0.5">Текущий отель</p>
<div className="flex items-center gap-1.5">
<Building2 size={14} className="text-brand-600 shrink-0" />
<span className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
{hotel.name}
{user.hotelName}
</span>
</div>
</div>
@@ -98,39 +98,60 @@ export function Sidebar({ open, onClose }: SidebarProps) {
<p className="px-3 pt-2 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">
Администрирование
</p>
<NavItem to="/admin" icon={LayoutDashboard} label="Дашборд" onClick={onClose} />
<NavItem to="/admin/hotels" icon={Building2} label="Отели" onClick={onClose} />
<NavItem to="/admin/users" icon={Users} label="Пользователи" onClick={onClose} />
<NavItem to="/admin" icon={LayoutDashboard} label="Дашборд" onClick={onClose} />
<NavItem to="/admin/hotels" icon={Building2} label="Отели" onClick={onClose} />
<NavItem to="/admin/users" icon={Users} label="Пользователи" onClick={onClose} />
</>
) : (
<>
<p className="px-3 pt-2 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">
Основное
</p>
<NavItem to={`/${slug}/calendar`} icon={CalendarDays} label="Шахматка" onClick={onClose} />
<NavItem to="/calendar" icon={CalendarDays} label="Шахматка" onClick={onClose} />
{!isHousekeeper && (
<NavItem to={`/${slug}/bookings`} icon={BookOpen} label="Бронирования" onClick={onClose} />
<NavItem to="/bookings" icon={BookOpen} label="Бронирования" onClick={onClose} />
)}
<NavItem to={`/${slug}/housekeeping`} icon={Sparkles} label="Уборка" onClick={onClose} />
<NavItem to="/housekeeping" icon={Sparkles} label="Уборка" onClick={onClose} />
{!isHousekeeper && (
<>
<p className="px-3 pt-3 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">
Управление
</p>
<NavItem to={`/${slug}/rooms`} icon={BedDouble} label="Номера" onClick={onClose} />
<NavItem to={`/${slug}/channels`} icon={Globe} label="Каналы" onClick={onClose} />
<NavItem to={`/${slug}/settings`} icon={Settings} label="Настройки" onClick={onClose} />
<NavItem to="/rooms" icon={BedDouble} label="Номера" onClick={onClose} />
<NavItem to="/availability" icon={CalendarRange} label="Доступность" onClick={onClose} />
<NavItem to="/channels" icon={Globe} label="Каналы" onClick={onClose} />
<NavItem to="/modules" icon={Puzzle} label="Модули" onClick={onClose} />
<NavItem to="/settings" icon={Settings} label="Настройки" onClick={onClose} />
{/* Активные модули с разделами */}
{activeModuleItems.length > 0 && (
<>
<p className="px-3 pt-3 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">
Модули
</p>
{activeModuleItems.map(m => (
<NavItem
key={m.id}
to={m.sidebarItem!.path}
icon={m.sidebarItem!.icon}
label={m.sidebarItem!.label}
onClick={onClose}
/>
))}
</>
)}
<p className="px-3 pt-3 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">
Разработчикам
</p>
<NavItem to={`/${slug}/api-docs`} icon={FileText} label="API & Документация" onClick={onClose} />
<NavItem to="/api-docs" icon={FileText} label="API & Документация" onClick={onClose} />
</>
)}
</>
)}
</nav>
{/* Version */}
<div className="px-4 py-3 border-t border-slate-200 dark:border-slate-700 shrink-0">
<p className="text-xs text-slate-400 dark:text-slate-500">HotelSync v0.1.0 SaaS PMS</p>
</div>