Техническая архитектура

Этот раздел для технических специалистов — разработчиков и DevOps. Если вы администратор отеля, вам это не потребуется.

Стек технологий

Компонент	Технология
Фронтенд	Next.js 16, React 19, TypeScript
Стилизация	Tailwind CSS 4, shadcn/ui, Radix UI
Серверное состояние	React Query 5 (TanStack Query)
Формы	React Hook Form + Zod
Графики	Recharts
Реальное время	Socket.IO
Темы	next-themes

Паттерн Table Page

Каждая страница-список следует единому паттерну:

PageComponent (state: search, filters, pagination, columnVisibility)
├── Toolbar (SearchInput + фильтры + столбцы + кнопка создания)
├── DataTable (строки с условными столбцами, skeleton/empty)
└── Pagination (страницы, размер, навигация)

Управление состоянием

• Поиск с debounce 300мс
• Фильтры с бейджами количества активных (FilterBadge)
• Видимость столбцов через выпадающее меню
• Серверная пагинация с keepPreviousData

Паттерн Sheet Form

Все формы создания/редактирования — выдвижные панели:

Sheet
├── SheetHeader (заголовок)
├── ScrollArea (форма)
│   ├── FormField (React Hook Form + Zod)
│   └── ...
└── Footer (Создать / Отмена)

Паттерн ClickableSection

Детальные страницы используют кликабельные секции для компактного отображения информации:

ClickableSection (hover:bg-muted/50, ChevronRight)
├── InfoItem (label + value + optional hint)
└── ...

Секция разворачивается при клике, показывая форму редактирования.

Паттерн LastModifiedInfo

Компонент отображает информацию о последнем изменении — кто и когда внёс правки (используется updatedByUserId).

Архитектура состояния

Серверное (React Query)

• Фабрика queryKeys в lib/api.ts
• Хуки: useBookings(), useUnits(), useGuests()
• Stale time: 30с, GC: 5 мин

Клиентское (React Context)

Контекст	Назначение
AuthContext	Сессия, вход/выход
ProjectContext	Активный проект
SocketContext	WebSocket

API-интеграция

• Bearer-токен добавляется автоматически
• Автообновление при 401
• Типизированные ошибки: ApiRequestError

Реальное время

WebSocket через Socket.IO:

• Новые бронирования
• Изменения статусов
• Платежи
• Отзывы

Командная палитра

Cmd+K — нечёткий поиск по всем страницам через cmdk. Навигация определена в lib/navigation.ts — единый источник для сайдбара и палитры.

Мультиязычность

Контентные поля: русский, английский, казахский. Компонент MultiLangInput с вкладками.

RBAC

Роли (SUPER_ADMIN, ADMIN, OPERATOR, VIEWER) проверяются на уровне компонентов через хук usePermissions(). Действия и элементы скрываются или блокируются в зависимости от роли.