Initial commit: HotelSync PMS v0.1.0

- React 18 + TypeScript + Vite + Tailwind CSS - Шахматка бронирований (drag-to-book) - Страницы: Calendar, Bookings, Rooms, Housekeeping, Channels, API Docs, Settings - Роли: super_admin, hotel_manager, housekeeper - Светлая/тёмная тема - Docker + Nginx конфигурация - Лендинг hotelsync.ru
2026-03-10 20:38:32 +03:00
commit 420d55d57e
45 changed files with 7274 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,15 @@
+# PostgreSQL
+POSTGRES_DB=hotelsync
+POSTGRES_USER=hotelsync
+POSTGRES_PASSWORD=CHANGE_ME_STRONG_PASSWORD
+
+# Redis
+REDIS_PASSWORD=CHANGE_ME_REDIS_PASSWORD
+
+# API
+JWT_SECRET=CHANGE_ME_JWT_SECRET_MIN_32_CHARS
+NODE_ENV=production
+PORT=3000
+
+# Frontend
+VITE_API_URL=https://api.hotelsync.ru/v1
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+dist/
+.env
+.env.local
+.env.production
+*.log
+.DS_Store
+.vite/
--- a/14
+++ b/14
@@ -0,0 +1,14 @@
+# ── Stage 1: Build ──────────────────────────────────────────────────────────
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# ── Stage 2: Serve ──────────────────────────────────────────────────────────
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.app.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/README.md
@@ -0,0 +1,63 @@
+# HotelSync — SaaS PMS System
+
+Современная система управления отелем (PMS) с шахматкой бронирований, менеджером каналов и API.
+
+## Быстрый старт
+
+```bash
+npm install
+npm run dev
+```
+
+Откройте [http://localhost:5173](http://localhost:5173)
+
+## Демо-аккаунты
+
+| Роль                  | Email                           | Пароль |
+|-----------------------|---------------------------------|--------|
+| Менеджер отеля        | manager@grand-palace.ru         | demo   |
+| Горничная             | cleaner@grand-palace.ru         | demo   |
+| Супер-администратор   | admin@hotelsync.io              | demo   |
+
+## Функциональность
+
+- **Шахматка** — drag-to-book интерфейс, цветовое кодирование по статусам
+- **Бронирования** — список с фильтрами, создание, детальная панель
+- **Номерной фонд** — карточки номеров, статусы, уборка
+- **Уборка** — Kanban-доска: ожидание / в процессе / готово
+- **Менеджер каналов** — Booking.com, Airbnb, Expedia, VRBO
+- **API-документация** — встроенная документация REST API
+- **Светлая / тёмная тема** — переключатель в шапке
+- **Мультиарендность** — архитектура SaaS с изоляцией по отелям
+
+## Структура проекта
+
+```
+src/
+├── components/
+│   ├── calendar/       # Шахматка бронирований
+│   ├── bookings/       # Модалки бронирований
+│   ├── layout/         # Sidebar, Topbar
+│   └── ui/             # Badge, Modal
+├── contexts/           # AuthContext, ThemeContext
+├── data/               # Мок-данные
+├── layouts/            # AppLayout
+├── lib/                # Утилиты, константы
+├── pages/              # Страницы приложения
+└── types/              # TypeScript типы
+```
+
+## API
+
+Base URL: `https://api.hotelsync.io/v1`
+
+Документация доступна в приложении: `/grand-palace/api-docs`
+
+## Стек технологий
+
+- React 18 + TypeScript
+- Vite 5
+- Tailwind CSS 3 (dark mode)
+- React Router 6
+- date-fns
+- Lucide React
--- a/deploy/landing/index.html
+++ b/deploy/landing/index.html
@@ -0,0 +1,449 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="HotelSync — современная SaaS PMS система для управления отелем. Шахматка бронирований, менеджер каналов, уборка." />
+  <title>HotelSync — PMS система для отелей</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --brand: #4f46e5;
+      --brand-light: #6366f1;
+      --brand-dark: #3730a3;
+      --text: #0f172a;
+      --text-muted: #64748b;
+      --bg: #f8fafc;
+      --white: #ffffff;
+      --border: #e2e8f0;
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Inter', system-ui, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    /* ── Nav ─────────────────────────────────────── */
+    nav {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+      background: rgba(255,255,255,0.85);
+      backdrop-filter: blur(12px);
+      border-bottom: 1px solid var(--border);
+      padding: 0 1.5rem;
+      height: 64px;
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .logo {
+      display: flex; align-items: center; gap: 10px;
+      font-size: 1.25rem; font-weight: 700; color: var(--text); text-decoration: none;
+    }
+    .logo-icon {
+      width: 36px; height: 36px; border-radius: 10px;
+      background: var(--brand); color: white;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.1rem; font-weight: 800;
+    }
+    .logo span { color: var(--brand); }
+    .nav-cta {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: var(--brand); color: white;
+      padding: 0.5rem 1.25rem; border-radius: 8px;
+      font-size: 0.875rem; font-weight: 600; text-decoration: none;
+      transition: background 0.15s, transform 0.15s;
+    }
+    .nav-cta:hover { background: var(--brand-dark); transform: translateY(-1px); }
+
+    /* ── Hero ────────────────────────────────────── */
+    .hero {
+      min-height: 100vh;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      padding: 6rem 1.5rem 4rem;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+    .hero::before {
+      content: '';
+      position: absolute; inset: 0;
+      background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,0.12) 0%, transparent 70%);
+      pointer-events: none;
+    }
+
+    .badge {
+      display: inline-flex; align-items: center; gap: 6px;
+      background: rgba(99,102,241,0.1); color: var(--brand);
+      border: 1px solid rgba(99,102,241,0.25);
+      padding: 0.35rem 0.9rem; border-radius: 999px;
+      font-size: 0.8rem; font-weight: 600; margin-bottom: 1.5rem;
+    }
+    .badge-dot {
+      width: 6px; height: 6px; border-radius: 50%;
+      background: var(--brand); animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(0.8); }
+    }
+
+    h1 {
+      font-size: clamp(2.5rem, 7vw, 4.5rem);
+      font-weight: 800; line-height: 1.1;
+      letter-spacing: -0.03em;
+      max-width: 900px;
+      margin-bottom: 1.25rem;
+    }
+    h1 em { font-style: normal; color: var(--brand); }
+
+    .hero-sub {
+      font-size: clamp(1rem, 2.5vw, 1.25rem);
+      color: var(--text-muted); line-height: 1.7;
+      max-width: 600px; margin-bottom: 2.5rem;
+    }
+
+    .hero-actions {
+      display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center;
+      margin-bottom: 4rem;
+    }
+    .btn-primary {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: var(--brand); color: white;
+      padding: 0.875rem 2rem; border-radius: 12px;
+      font-size: 1rem; font-weight: 600; text-decoration: none;
+      transition: all 0.15s; box-shadow: 0 4px 16px rgba(99,102,241,0.35);
+    }
+    .btn-primary:hover {
+      background: var(--brand-dark); transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(99,102,241,0.4);
+    }
+    .btn-secondary {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: white; color: var(--text);
+      border: 1px solid var(--border);
+      padding: 0.875rem 2rem; border-radius: 12px;
+      font-size: 1rem; font-weight: 600; text-decoration: none;
+      transition: all 0.15s;
+    }
+    .btn-secondary:hover { background: var(--bg); transform: translateY(-2px); }
+
+    /* ── App preview card ─────────────────────────── */
+    .preview-card {
+      width: min(860px, 90vw);
+      background: white; border-radius: 20px;
+      box-shadow: 0 32px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
+      overflow: hidden; position: relative;
+    }
+    .preview-topbar {
+      background: white; border-bottom: 1px solid var(--border);
+      padding: 0.75rem 1rem;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .preview-dot { width: 10px; height: 10px; border-radius: 50%; }
+    .preview-inner {
+      display: grid; grid-template-columns: 180px 1fr;
+      height: 320px;
+    }
+    .preview-sidebar {
+      background: #f8fafc; border-right: 1px solid var(--border);
+      padding: 1rem 0.75rem;
+    }
+    .preview-sidebar-item {
+      display: flex; align-items: center; gap: 8px;
+      padding: 0.5rem 0.75rem; border-radius: 8px;
+      font-size: 0.75rem; font-weight: 500; color: #64748b;
+      margin-bottom: 2px;
+    }
+    .preview-sidebar-item.active {
+      background: rgba(99,102,241,0.1); color: var(--brand);
+    }
+    .preview-sidebar-icon {
+      width: 16px; height: 16px; border-radius: 4px;
+      background: currentColor; opacity: 0.4;
+    }
+    .preview-content { padding: 1rem; overflow: hidden; }
+    .preview-row {
+      display: flex; gap: 6px; margin-bottom: 6px; align-items: center;
+    }
+    .preview-label {
+      width: 60px; font-size: 0.65rem; font-weight: 600;
+      color: #94a3b8; shrink: 0;
+    }
+    .preview-block {
+      height: 28px; border-radius: 6px;
+      display: flex; align-items: center; padding: 0 8px;
+      font-size: 0.6rem; font-weight: 600; color: white; white-space: nowrap; overflow: hidden;
+    }
+
+    /* ── Features ────────────────────────────────── */
+    section { padding: 5rem 1.5rem; }
+    .section-title {
+      text-align: center; margin-bottom: 3rem;
+    }
+    .section-title h2 {
+      font-size: clamp(1.75rem, 4vw, 2.5rem);
+      font-weight: 800; margin-bottom: 0.75rem; letter-spacing: -0.02em;
+    }
+    .section-title p { color: var(--text-muted); font-size: 1.1rem; }
+
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1.5rem; max-width: 1100px; margin: 0 auto;
+    }
+    .feature-card {
+      background: white; border: 1px solid var(--border);
+      border-radius: 16px; padding: 1.75rem;
+      transition: all 0.2s;
+    }
+    .feature-card:hover {
+      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
+      transform: translateY(-4px);
+    }
+    .feature-icon {
+      width: 48px; height: 48px; border-radius: 12px;
+      background: rgba(99,102,241,0.1);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.5rem; margin-bottom: 1rem;
+    }
+    .feature-card h3 {
+      font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem;
+    }
+    .feature-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }
+
+    /* ── Coming soon ─────────────────────────────── */
+    .coming-soon {
+      background: linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
+      border-radius: 24px; max-width: 800px; margin: 0 auto;
+      padding: 4rem 2rem; text-align: center; color: white;
+    }
+    .coming-soon h2 { font-size: 2rem; font-weight: 800; margin-bottom: 0.75rem; }
+    .coming-soon p { opacity: 0.85; font-size: 1rem; margin-bottom: 2rem; }
+
+    .notify-form {
+      display: flex; gap: 8px; max-width: 420px; margin: 0 auto; flex-wrap: wrap; justify-content: center;
+    }
+    .notify-form input {
+      flex: 1; min-width: 220px;
+      padding: 0.75rem 1rem; border-radius: 10px; border: none;
+      font-size: 0.9rem; font-family: inherit;
+      background: rgba(255,255,255,0.15); color: white;
+    }
+    .notify-form input::placeholder { color: rgba(255,255,255,0.6); }
+    .notify-form input:focus { outline: 2px solid rgba(255,255,255,0.5); }
+    .notify-form button {
+      padding: 0.75rem 1.5rem; border-radius: 10px; border: none;
+      background: white; color: var(--brand);
+      font-size: 0.9rem; font-weight: 700; cursor: pointer;
+      font-family: inherit; transition: all 0.15s;
+    }
+    .notify-form button:hover { background: #f1f5f9; transform: scale(1.02); }
+
+    /* ── Footer ──────────────────────────────────── */
+    footer {
+      text-align: center; padding: 2rem 1.5rem;
+      border-top: 1px solid var(--border);
+      color: var(--text-muted); font-size: 0.85rem;
+    }
+
+    @media (max-width: 640px) {
+      .preview-inner { grid-template-columns: 1fr; height: auto; }
+      .preview-sidebar { display: none; }
+      .hero-actions { flex-direction: column; }
+    }
+  </style>
+</head>
+<body>
+
+<!-- Nav -->
+<nav>
+  <a href="/" class="logo">
+    <div class="logo-icon">H</div>
+    Hotel<span>Sync</span>
+  </a>
+  <a href="https://app.hotelsync.ru" class="nav-cta">
+    Войти в систему →
+  </a>
+</nav>
+
+<!-- Hero -->
+<section class="hero">
+  <div class="badge">
+    <div class="badge-dot"></div>
+    Скоро запуск · Уже в разработке
+  </div>
+
+  <h1>
+    Управляйте отелем<br/>
+    как <em>профессионал</em>
+  </h1>
+
+  <p class="hero-sub">
+    HotelSync — современная PMS система с шахматкой бронирований,
+    синхронизацией с Booking.com и Airbnb, управлением уборкой
+    и полным API для интеграций.
+  </p>
+
+  <div class="hero-actions">
+    <a href="https://app.hotelsync.ru" class="btn-primary">
+      ✦ Открыть систему
+    </a>
+    <a href="#features" class="btn-secondary">
+      Узнать больше
+    </a>
+  </div>
+
+  <!-- App preview -->
+  <div class="preview-card">
+    <div class="preview-topbar">
+      <div class="preview-dot" style="background:#ff5f57"></div>
+      <div class="preview-dot" style="background:#febc2e"></div>
+      <div class="preview-dot" style="background:#28c840"></div>
+      <div style="flex:1;height:22px;background:#f1f5f9;border-radius:6px;margin-left:8px"></div>
+    </div>
+    <div class="preview-inner">
+      <div class="preview-sidebar">
+        <div style="display:flex;align-items:center;gap:8px;padding:0.5rem 0.75rem;margin-bottom:12px">
+          <div style="width:24px;height:24px;border-radius:6px;background:#4f46e5"></div>
+          <span style="font-size:0.75rem;font-weight:700;color:#0f172a">HotelSync</span>
+        </div>
+        <div class="preview-sidebar-item active">
+          <div class="preview-sidebar-icon"></div> Шахматка
+        </div>
+        <div class="preview-sidebar-item">
+          <div class="preview-sidebar-icon"></div> Бронирования
+        </div>
+        <div class="preview-sidebar-item">
+          <div class="preview-sidebar-icon"></div> Номера
+        </div>
+        <div class="preview-sidebar-item">
+          <div class="preview-sidebar-icon"></div> Уборка
+        </div>
+        <div class="preview-sidebar-item">
+          <div class="preview-sidebar-icon"></div> Каналы
+        </div>
+      </div>
+      <div class="preview-content">
+        <div style="display:flex;gap:6px;margin-bottom:12px">
+          <div style="height:6px;flex:1;background:#e2e8f0;border-radius:3px"></div>
+          <div style="height:6px;flex:1;background:#e2e8f0;border-radius:3px"></div>
+          <div style="height:6px;flex:1;background:#e2e8f0;border-radius:3px"></div>
+          <div style="height:6px;flex:1;background:#e2e8f0;border-radius:3px"></div>
+          <div style="height:6px;flex:1;background:#e2e8f0;border-radius:3px"></div>
+          <div style="height:6px;flex:1;background:#e2e8f0;border-radius:3px"></div>
+          <div style="height:6px;flex:1;background:#e2e8f0;border-radius:3px"></div>
+        </div>
+        <div class="preview-row">
+          <div class="preview-label">101</div>
+          <div class="preview-block" style="background:#4f46e5;width:22%">Волков Д.</div>
+          <div style="flex:1"></div>
+        </div>
+        <div class="preview-row">
+          <div class="preview-label">102</div>
+          <div style="flex:0.3"></div>
+          <div class="preview-block" style="background:#4f46e5;width:28%">Козлова А.</div>
+          <div style="flex:1"></div>
+        </div>
+        <div class="preview-row">
+          <div class="preview-label">201 ★</div>
+          <div class="preview-block" style="background:#10b981;width:18%">Соколов</div>
+          <div style="flex:0.2"></div>
+          <div class="preview-block" style="background:#4f46e5;width:25%">Белова Т.</div>
+        </div>
+        <div class="preview-row">
+          <div class="preview-label">301</div>
+          <div class="preview-block" style="background:#10b981;width:35%">Александрова Н.</div>
+        </div>
+        <div class="preview-row">
+          <div class="preview-label">401</div>
+          <div style="flex:0.4"></div>
+          <div class="preview-block" style="background:#4f46e5;width:30%">Орлов М.</div>
+        </div>
+        <div class="preview-row">
+          <div class="preview-label">Пентхаус</div>
+          <div style="flex:0.5"></div>
+          <div class="preview-block" style="background:#f59e0b;width:38%">Громов В.</div>
+        </div>
+        <div class="preview-row">
+          <div class="preview-label">102A</div>
+          <div class="preview-block" style="background:#10b981;width:42%">Лебедева Е.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Features -->
+<section id="features" style="background:white">
+  <div class="section-title">
+    <h2>Всё что нужно отелю</h2>
+    <p>Один инструмент вместо десяти</p>
+  </div>
+  <div class="features-grid">
+    <div class="feature-card">
+      <div class="feature-icon">📅</div>
+      <h3>Шахматка бронирований</h3>
+      <p>Наглядный календарь с номерами и датами. Перетаскивайте блоки, создавайте брони в один клик.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">🌐</div>
+      <h3>Менеджер каналов</h3>
+      <p>Автоматическая синхронизация с Booking.com, Airbnb, Expedia и другими OTA-платформами.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">✨</div>
+      <h3>Управление уборкой</h3>
+      <p>Канбан-доска для горничных. Задачи, статусы, приоритеты — всё в одном месте.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">📊</div>
+      <h3>Аналитика и отчёты</h3>
+      <p>Загрузка отеля, RevPAR, ADR и другие ключевые метрики в реальном времени.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">🔌</div>
+      <h3>REST API</h3>
+      <p>Полное API для интеграций с вашими системами. Webhooks, документация, SDK.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">🏨</div>
+      <h3>Мультиотельность</h3>
+      <p>Управляйте сетью отелей из одного аккаунта. Разные роли для каждого объекта.</p>
+    </div>
+  </div>
+</section>
+
+<!-- Coming soon / notify -->
+<section>
+  <div class="coming-soon">
+    <h2>🚀 Скоро полноценный запуск</h2>
+    <p>Оставьте email — сообщим первыми о старте и дадим скидку 30% на первый год</p>
+    <form class="notify-form" onsubmit="handleSubmit(event)">
+      <input type="email" placeholder="ваш@email.ru" required id="emailInput" />
+      <button type="submit">Уведомить меня</button>
+    </form>
+    <p id="formSuccess" style="display:none;margin-top:1rem;font-weight:600;">✓ Отлично! Мы свяжемся с вами при запуске.</p>
+  </div>
+</section>
+
+<!-- Footer -->
+<footer>
+  <p>© 2026 HotelSync · SaaS PMS Platform · <a href="https://app.hotelsync.ru" style="color:var(--brand)">Войти в систему</a></p>
+</footer>
+
+<script>
+function handleSubmit(e) {
+  e.preventDefault();
+  document.getElementById('emailInput').style.display = 'none';
+  e.target.querySelector('button').style.display = 'none';
+  document.getElementById('formSuccess').style.display = 'block';
+}
+</script>
+</body>
+</html>
--- a/deploy/nginx/conf.d/hotelsync.conf
+++ b/deploy/nginx/conf.d/hotelsync.conf
@@ -0,0 +1,67 @@
+# ── Редирект HTTP → HTTPS ─────────────────────────────────────────────────
+server {
+    listen 80;
+    server_name hotelsync.ru www.hotelsync.ru app.hotelsync.ru api.hotelsync.ru;
+
+    # Certbot challenge
+    location /.well-known/acme-challenge/ {
+        root /var/www/certbot;
+    }
+
+    location / {
+        return 301 https://$host$request_uri;
+    }
+}
+
+# ── app.hotelsync.ru — Панель управления (React SPA) ─────────────────────
+server {
+    listen 443 ssl;
+    server_name app.hotelsync.ru;
+
+    ssl_certificate     /etc/letsencrypt/live/app.hotelsync.ru/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/app.hotelsync.ru/privkey.pem;
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers HIGH:!aNULL:!MD5;
+
+    location / {
+        proxy_pass         http://frontend:80;
+        proxy_set_header   Host $host;
+        proxy_set_header   X-Real-IP $remote_addr;
+        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header   X-Forwarded-Proto $scheme;
+    }
+}
+
+# ── hotelsync.ru — Лендинг (редирект на app пока нет лендинга) ───────────
+server {
+    listen 443 ssl;
+    server_name hotelsync.ru www.hotelsync.ru;
+
+    ssl_certificate     /etc/letsencrypt/live/hotelsync.ru/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/hotelsync.ru/privkey.pem;
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers HIGH:!aNULL:!MD5;
+
+    location / {
+        return 302 https://app.hotelsync.ru;
+    }
+}
+
+# ── api.hotelsync.ru — API Backend ────────────────────────────────────────
+server {
+    listen 443 ssl;
+    server_name api.hotelsync.ru;
+
+    ssl_certificate     /etc/letsencrypt/live/api.hotelsync.ru/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/api.hotelsync.ru/privkey.pem;
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers HIGH:!aNULL:!MD5;
+
+    location / {
+        proxy_pass         http://api:3000;
+        proxy_set_header   Host $host;
+        proxy_set_header   X-Real-IP $remote_addr;
+        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header   X-Forwarded-Proto $scheme;
+    }
+}
--- a/deploy/nginx/nginx.conf
+++ b/deploy/nginx/nginx.conf
@@ -0,0 +1,32 @@
+user nginx;
+worker_processes auto;
+error_log /var/log/nginx/error.log warn;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+    sendfile        on;
+    keepalive_timeout 65;
+    client_max_body_size 20M;
+
+    # Логи
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent"';
+    access_log /var/log/nginx/access.log main;
+
+    # Gzip
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types text/plain text/css application/json application/javascript
+               text/xml application/xml text/javascript image/svg+xml;
+
+    include /etc/nginx/conf.d/*.conf;
+}
--- a/deploy/setup.sh
+++ b/deploy/setup.sh
@@ -0,0 +1,86 @@
+#!/bin/bash
+# HotelSync — первоначальная настройка сервера
+set -e
+
+echo "🚀 HotelSync Server Setup"
+echo "========================="
+
+# ── 1. Обновление системы ─────────────────────────────────────────────────
+echo "→ Обновление пакетов..."
+apt-get update -qq && apt-get upgrade -y -qq
+
+# ── 2. Установка Docker ───────────────────────────────────────────────────
+echo "→ Установка Docker..."
+curl -fsSL https://get.docker.com | sh
+systemctl enable docker
+systemctl start docker
+
+# Docker Compose plugin
+apt-get install -y docker-compose-plugin
+
+echo "Docker версия: $(docker --version)"
+echo "Docker Compose: $(docker compose version)"
+
+# ── 3. Установка Git ──────────────────────────────────────────────────────
+echo "→ Установка Git..."
+apt-get install -y git
+
+# ── 4. Настройка проекта ──────────────────────────────────────────────────
+echo "→ Создание директории проекта..."
+mkdir -p /opt/hotelsync
+cd /opt/hotelsync
+
+# ── 5. Настройка Gitea (self-hosted Git) ──────────────────────────────────
+echo "→ Настройка Gitea..."
+mkdir -p /opt/gitea/data
+
+cat > /opt/gitea/docker-compose.yml << 'EOF'
+version: '3'
+services:
+  gitea:
+    image: gitea/gitea:latest
+    container_name: hotelsync-gitea
+    restart: unless-stopped
+    environment:
+      - USER_UID=1000
+      - USER_GID=1000
+      - GITEA__database__DB_TYPE=sqlite3
+      - GITEA__server__DOMAIN=git.hotelsync.ru
+      - GITEA__server__ROOT_URL=https://git.hotelsync.ru
+      - GITEA__server__HTTP_PORT=3000
+    ports:
+      - "3001:3000"
+      - "222:22"
+    volumes:
+      - /opt/gitea/data:/data
+EOF
+
+docker compose -f /opt/gitea/docker-compose.yml up -d
+echo "✓ Gitea запущен на порту 3001"
+
+# ── 6. Настройка bare git репозитория для деплоя ──────────────────────────
+echo "→ Настройка git deploy hook..."
+mkdir -p /opt/hotelsync/repo.git
+git init --bare /opt/hotelsync/repo.git
+
+cat > /opt/hotelsync/repo.git/hooks/post-receive << 'HOOK'
+#!/bin/bash
+echo "→ Получен push, запускаем деплой..."
+cd /opt/hotelsync/app
+git --work-tree=/opt/hotelsync/app --git-dir=/opt/hotelsync/repo.git checkout -f main
+docker compose build frontend
+docker compose up -d --no-deps frontend
+echo "✓ Деплой завершён!"
+HOOK
+
+chmod +x /opt/hotelsync/repo.git/hooks/post-receive
+mkdir -p /opt/hotelsync/app
+git init /opt/hotelsync/app
+echo "✓ Git deploy hook настроен"
+
+echo ""
+echo "=============================="
+echo "✅ Базовая настройка завершена"
+echo "=============================="
+echo ""
+echo "Следующий шаг: запустить deploy/ssl.sh для SSL сертификатов"
--- a/deploy/ssl.sh
+++ b/deploy/ssl.sh
@@ -0,0 +1,31 @@
+#!/bin/bash
+# Получение SSL сертификатов Let's Encrypt
+set -e
+
+EMAIL="admin@hotelsync.ru"
+DOMAINS="hotelsync.ru,www.hotelsync.ru,app.hotelsync.ru,api.hotelsync.ru,git.hotelsync.ru"
+
+echo "→ Получение SSL сертификатов..."
+
+# Временный nginx для certbot challenge
+docker run --rm -p 80:80 -v /opt/hotelsync/certbot/www:/var/www/certbot nginx:alpine &
+NGINX_PID=$!
+sleep 2
+
+for domain in hotelsync.ru app.hotelsync.ru api.hotelsync.ru git.hotelsync.ru; do
+    docker run --rm \
+        -v /opt/hotelsync/certbot/certs:/etc/letsencrypt \
+        -v /opt/hotelsync/certbot/www:/var/www/certbot \
+        certbot/certbot certonly \
+        --webroot \
+        --webroot-path=/var/www/certbot \
+        --email "$EMAIL" \
+        --agree-tos \
+        --no-eff-email \
+        -d "$domain" \
+        $([ "$domain" = "hotelsync.ru" ] && echo "-d www.hotelsync.ru" || echo "")
+    echo "✓ SSL для $domain получен"
+done
+
+kill $NGINX_PID 2>/dev/null || true
+echo "✅ Все SSL сертификаты получены"
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,84 @@
+version: '3.9'
+
+services:
+
+  # ── Frontend (React) ───────────────────────────────────────────────────────
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: hotelsync-frontend
+    restart: unless-stopped
+    networks:
+      - hotelsync-net
+
+  # ── API (Node.js — placeholder, будет добавлен позже) ─────────────────────
+  # api:
+  #   build: ./api
+  #   container_name: hotelsync-api
+  #   env_file: .env
+  #   depends_on: [postgres, redis]
+  #   networks: [hotelsync-net]
+
+  # ── PostgreSQL ─────────────────────────────────────────────────────────────
+  postgres:
+    image: postgres:16-alpine
+    container_name: hotelsync-postgres
+    restart: unless-stopped
+    env_file: .env
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB:-hotelsync}
+      POSTGRES_USER: ${POSTGRES_USER:-hotelsync}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    networks:
+      - hotelsync-net
+
+  # ── Redis ──────────────────────────────────────────────────────────────────
+  redis:
+    image: redis:7-alpine
+    container_name: hotelsync-redis
+    restart: unless-stopped
+    command: redis-server --requirepass ${REDIS_PASSWORD}
+    volumes:
+      - redis_data:/data
+    networks:
+      - hotelsync-net
+
+  # ── Nginx (reverse proxy + SSL) ────────────────────────────────────────────
+  nginx:
+    image: nginx:alpine
+    container_name: hotelsync-nginx
+    restart: unless-stopped
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./deploy/nginx/nginx.conf:/etc/nginx/nginx.conf:ro
+      - ./deploy/nginx/conf.d:/etc/nginx/conf.d:ro
+      - certbot_www:/var/www/certbot:ro
+      - certbot_certs:/etc/letsencrypt:ro
+    depends_on:
+      - frontend
+    networks:
+      - hotelsync-net
+
+  # ── Certbot (SSL Let's Encrypt) ────────────────────────────────────────────
+  certbot:
+    image: certbot/certbot
+    container_name: hotelsync-certbot
+    volumes:
+      - certbot_www:/var/www/certbot
+      - certbot_certs:/etc/letsencrypt
+    entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"
+
+volumes:
+  postgres_data:
+  redis_data:
+  certbot_www:
+  certbot_certs:
+
+networks:
+  hotelsync-net:
+    driver: bridge
--- a/index.html
+++ b/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="HotelSync — современная PMS система для отелей" />
+    <title>HotelSync</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/nginx.app.conf
+++ b/nginx.app.conf
@@ -0,0 +1,19 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # React SPA — все пути отдают index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Кэшировать статику
+    location ~* \.(js|css|png|svg|ico|woff2?)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "hotelsync",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0",
+    "date-fns": "^3.6.0",
+    "lucide-react": "^0.446.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.45",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#4f46e5"/>
+  <text x="6" y="24" font-size="20" font-family="Inter,sans-serif" font-weight="700" fill="white">H</text>
+</svg>
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,66 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { ThemeProvider } from './contexts/ThemeContext'
+import { AuthProvider } from './contexts/AuthContext'
+import { AppLayout } from './layouts/AppLayout'
+import { LoginPage } from './pages/LoginPage'
+import { CalendarPage } from './pages/CalendarPage'
+import { BookingsPage } from './pages/BookingsPage'
+import { RoomsPage } from './pages/RoomsPage'
+import { HousekeepingPage } from './pages/HousekeepingPage'
+import { ChannelsPage } from './pages/ChannelsPage'
+import { ApiDocsPage } from './pages/ApiDocsPage'
+import { SettingsPage } from './pages/SettingsPage'
+import { AdminDashboard } from './pages/AdminDashboard'
+import { useAuth } from './contexts/AuthContext'
+
+function RoleGuard({
+  children,
+  allow,
+}: {
+  children: React.ReactNode
+  allow: string[]
+}) {
+  const { user } = useAuth()
+  if (!user || !allow.includes(user.role)) {
+    return <Navigate to="/login" replace />
+  }
+  return <>{children}</>
+}
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <AuthProvider>
+        <BrowserRouter>
+          <Routes>
+            {/* Public */}
+            <Route path="/login" element={<LoginPage />} />
+
+            {/* Hotel routes */}
+            <Route path="/:hotelSlug" element={<AppLayout />}>
+              <Route index element={<Navigate to="calendar" replace />} />
+              <Route path="calendar" element={<CalendarPage />} />
+              <Route path="bookings" element={<BookingsPage />} />
+              <Route path="rooms" element={<RoomsPage />} />
+              <Route path="housekeeping" element={<HousekeepingPage />} />
+              <Route path="channels" element={<ChannelsPage />} />
+              <Route path="api-docs" element={<ApiDocsPage />} />
+              <Route path="settings" element={<SettingsPage />} />
+            </Route>
+
+            {/* Admin routes */}
+            <Route path="/admin" element={<AppLayout />}>
+              <Route index element={<AdminDashboard />} />
+              <Route path="hotels" element={<AdminDashboard />} />
+              <Route path="users" element={<AdminDashboard />} />
+            </Route>
+
+            {/* Default */}
+            <Route path="/" element={<Navigate to="/login" replace />} />
+            <Route path="*" element={<Navigate to="/login" replace />} />
+          </Routes>
+        </BrowserRouter>
+      </AuthProvider>
+    </ThemeProvider>
+  )
+}
--- a/src/components/bookings/BookingDetailPanel.tsx
+++ b/src/components/bookings/BookingDetailPanel.tsx
@@ -0,0 +1,190 @@
+import { X, Mail, Phone, Calendar, Users, CreditCard, Tag, Edit2, CheckCircle, XCircle } from 'lucide-react'
+import { cn, BOOKING_STATUS_BADGE, BOOKING_STATUS_LABELS, SOURCE_COLORS, SOURCE_LABELS, formatCurrency, nightsCount } from '../../lib/utils'
+import type { Booking, Room } from '../../types'
+import { Badge } from '../ui/Badge'
+
+interface BookingDetailPanelProps {
+  booking: Booking
+  room?: Room
+  onClose: () => void
+  onUpdate: (id: string, data: Partial<Booking>) => void
+}
+
+export function BookingDetailPanel({ booking, room, onClose, onUpdate }: BookingDetailPanelProps) {
+  const nights = nightsCount(booking.checkIn, booking.checkOut)
+  const balance = booking.totalAmount - booking.paidAmount
+
+  const setStatus = (status: typeof booking.status) => onUpdate(booking.id, { status })
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div className="fixed inset-0 z-40" onClick={onClose} />
+
+      {/* Panel */}
+      <div className="fixed right-0 top-0 bottom-0 z-50 w-96 bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700 shadow-2xl flex flex-col animate-slide-in">
+        {/* Header */}
+        <div className={cn(
+          'px-5 py-4 border-b border-slate-200 dark:border-slate-700',
+          'flex items-center justify-between shrink-0',
+        )}>
+          <div>
+            <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">
+              {booking.guestName}
+            </h3>
+            <div className="flex items-center gap-2 mt-1">
+              <Badge className={BOOKING_STATUS_BADGE[booking.status]}>
+                {BOOKING_STATUS_LABELS[booking.status]}
+              </Badge>
+              <Badge className={SOURCE_COLORS[booking.source]}>
+                {SOURCE_LABELS[booking.source]}
+              </Badge>
+            </div>
+          </div>
+          <button onClick={onClose} className="btn-ghost p-1.5">
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-5 py-4 space-y-5">
+          {/* Room */}
+          {room && (
+            <div className="rounded-xl bg-slate-50 dark:bg-slate-700/40 p-3">
+              <p className="text-xs text-slate-500 dark:text-slate-400 font-medium mb-1">Номер</p>
+              <p className="font-semibold text-slate-900 dark:text-slate-100">
+                №{room.number} — {room.type}
+              </p>
+              <p className="text-sm text-slate-500 dark:text-slate-400">Этаж {room.floor} · {room.bedType} bed</p>
+            </div>
+          )}
+
+          {/* Dates */}
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <p className="text-xs text-slate-500 dark:text-slate-400 font-medium flex items-center gap-1 mb-1">
+                <Calendar size={12} /> Заезд
+              </p>
+              <p className="text-sm font-semibold text-slate-900 dark:text-slate-100">
+                {new Intl.DateTimeFormat('ru-RU', { day: 'numeric', month: 'long' }).format(new Date(booking.checkIn))}
+              </p>
+            </div>
+            <div>
+              <p className="text-xs text-slate-500 dark:text-slate-400 font-medium flex items-center gap-1 mb-1">
+                <Calendar size={12} /> Выезд
+              </p>
+              <p className="text-sm font-semibold text-slate-900 dark:text-slate-100">
+                {new Intl.DateTimeFormat('ru-RU', { day: 'numeric', month: 'long' }).format(new Date(booking.checkOut))}
+              </p>
+            </div>
+          </div>
+          <p className="text-xs text-slate-500 dark:text-slate-400 -mt-3">
+            {nights} {nights === 1 ? 'ночь' : nights < 5 ? 'ночи' : 'ночей'}
+          </p>
+
+          {/* Guests */}
+          <div>
+            <p className="text-xs text-slate-500 dark:text-slate-400 font-medium flex items-center gap-1 mb-1">
+              <Users size={12} /> Гости
+            </p>
+            <p className="text-sm text-slate-900 dark:text-slate-100">
+              {booking.adults} взр.{booking.children > 0 ? ` · ${booking.children} дет.` : ''}
+            </p>
+          </div>
+
+          {/* Contact */}
+          <div className="space-y-1.5">
+            <p className="text-xs text-slate-500 dark:text-slate-400 font-medium">Контакты</p>
+            <div className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+              <Mail size={13} className="text-slate-400" />
+              {booking.guestEmail || '—'}
+            </div>
+          </div>
+
+          {/* Payment */}
+          <div className="rounded-xl border border-slate-200 dark:border-slate-600 p-3 space-y-2">
+            <p className="text-xs text-slate-500 dark:text-slate-400 font-medium flex items-center gap-1">
+              <CreditCard size={12} /> Оплата
+            </p>
+            <div className="flex justify-between text-sm">
+              <span className="text-slate-600 dark:text-slate-400">Стоимость</span>
+              <span className="font-semibold text-slate-900 dark:text-slate-100">
+                {formatCurrency(booking.totalAmount)}
+              </span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-slate-600 dark:text-slate-400">Оплачено</span>
+              <span className="font-semibold text-emerald-600 dark:text-emerald-400">
+                {formatCurrency(booking.paidAmount)}
+              </span>
+            </div>
+            {balance > 0 && (
+              <div className="flex justify-between text-sm border-t border-slate-200 dark:border-slate-600 pt-2">
+                <span className="text-slate-600 dark:text-slate-400">Остаток</span>
+                <span className="font-bold text-red-600 dark:text-red-400">
+                  {formatCurrency(balance)}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Notes */}
+          {booking.notes && (
+            <div>
+              <p className="text-xs text-slate-500 dark:text-slate-400 font-medium mb-1 flex items-center gap-1">
+                <Tag size={12} /> Примечания
+              </p>
+              <p className="text-sm text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-700/40 rounded-lg p-2.5">
+                {booking.notes}
+              </p>
+            </div>
+          )}
+
+          {/* Channel ID */}
+          {booking.channelBookingId && (
+            <div>
+              <p className="text-xs text-slate-500 mb-0.5">ID канала</p>
+              <code className="text-xs text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-900/20 px-2 py-1 rounded">
+                {booking.channelBookingId}
+              </code>
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="shrink-0 px-5 py-4 border-t border-slate-200 dark:border-slate-700 space-y-2">
+          {booking.status === 'confirmed' && (
+            <button
+              onClick={() => setStatus('checked_in')}
+              className="w-full btn-primary justify-center"
+            >
+              <CheckCircle size={15} />
+              Заселить
+            </button>
+          )}
+          {booking.status === 'checked_in' && (
+            <button
+              onClick={() => setStatus('checked_out')}
+              className="w-full btn-primary justify-center bg-emerald-600 hover:bg-emerald-700"
+            >
+              <CheckCircle size={15} />
+              Выселить
+            </button>
+          )}
+          {(booking.status === 'confirmed' || booking.status === 'inquiry') && (
+            <button
+              onClick={() => setStatus('cancelled')}
+              className="w-full btn-secondary justify-center text-red-600 dark:text-red-400 border-red-200 dark:border-red-800 hover:bg-red-50 dark:hover:bg-red-900/20"
+            >
+              <XCircle size={15} />
+              Отменить
+            </button>
+          )}
+          <p className="text-xs text-center text-slate-400 dark:text-slate-500">
+            ID: {booking.id} · Создано: {booking.createdAt}
+          </p>
+        </div>
+      </div>
+    </>
+  )
+}
--- a/src/components/bookings/BookingModal.tsx
+++ b/src/components/bookings/BookingModal.tsx
@@ -0,0 +1,232 @@
+import { useState } from 'react'
+import { format } from 'date-fns'
+import { Modal } from '../ui/Modal'
+import { cn, BOOKING_STATUS_LABELS, SOURCE_LABELS } from '../../lib/utils'
+import type { Booking, DraftBooking, Room, BookingStatus, BookingSource } from '../../types'
+
+interface BookingModalProps {
+  open: boolean
+  draft: DraftBooking
+  rooms: Room[]
+  onClose: () => void
+  onSave: (data: Partial<Booking>) => void
+  existing?: Booking
+}
+
+export function BookingModal({ open, draft, rooms, onClose, onSave, existing }: BookingModalProps) {
+  const [form, setForm] = useState({
+    roomId:      existing?.roomId     ?? draft.roomId,
+    guestName:   existing?.guestName  ?? '',
+    guestEmail:  existing?.guestEmail ?? '',
+    checkIn:     existing?.checkIn    ?? draft.checkIn,
+    checkOut:    existing?.checkOut   ?? draft.checkOut,
+    adults:      existing?.adults     ?? 2,
+    children:    existing?.children   ?? 0,
+    source:      (existing?.source    ?? 'direct') as BookingSource,
+    status:      (existing?.status    ?? 'confirmed') as BookingStatus,
+    notes:       existing?.notes      ?? '',
+  })
+
+  const room = rooms.find(r => r.id === form.roomId)
+  const nights = form.checkIn && form.checkOut
+    ? Math.max(0, (new Date(form.checkOut).getTime() - new Date(form.checkIn).getTime()) / 86400000)
+    : 0
+  const total = (room?.baseRate ?? 0) * nights
+
+  const set = <K extends keyof typeof form>(k: K, v: typeof form[K]) =>
+    setForm(prev => ({ ...prev, [k]: v }))
+
+  const handleSave = () => {
+    if (!form.guestName || !form.checkIn || !form.checkOut) return
+    onSave({
+      ...form,
+      totalAmount: total,
+      paidAmount: existing?.paidAmount ?? 0,
+      id: existing?.id ?? `b-${Date.now()}`,
+      hotelId: 'hotel-1',
+      guestId: existing?.guestId ?? `g-${Date.now()}`,
+      createdAt: existing?.createdAt ?? format(new Date(), 'yyyy-MM-dd'),
+    })
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={existing ? 'Редактировать бронирование' : 'Новое бронирование'}
+      size="lg"
+      footer={
+        <>
+          <button onClick={onClose} className="btn-secondary">Отмена</button>
+          <button onClick={handleSave} className="btn-primary" disabled={!form.guestName}>
+            {existing ? 'Сохранить' : 'Создать бронирование'}
+          </button>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        {/* Room */}
+        <div>
+          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+            Номер
+          </label>
+          <select
+            value={form.roomId}
+            onChange={e => set('roomId', e.target.value)}
+            className="input"
+          >
+            {rooms.map(r => (
+              <option key={r.id} value={r.id}>
+                {r.number} — {r.type} ({r.baseRate.toLocaleString('ru-RU')} ₽/ночь)
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Guest */}
+        <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="text"
+              className="input"
+              placeholder="Иван Иванов"
+              value={form.guestName}
+              onChange={e => set('guestName', e.target.value)}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+              Email
+            </label>
+            <input
+              type="email"
+              className="input"
+              placeholder="guest@example.com"
+              value={form.guestEmail}
+              onChange={e => set('guestEmail', e.target.value)}
+            />
+          </div>
+        </div>
+
+        {/* Dates */}
+        <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.checkIn}
+              onChange={e => set('checkIn', 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.checkOut}
+              onChange={e => set('checkOut', e.target.value)}
+            />
+          </div>
+        </div>
+
+        {/* Guests count */}
+        <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>
+            <input
+              type="number" min={1} max={room?.maxGuests ?? 6}
+              className="input"
+              value={form.adults}
+              onChange={e => set('adults', parseInt(e.target.value) || 1)}
+            />
+          </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={4}
+              className="input"
+              value={form.children}
+              onChange={e => set('children', 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>
+            <select
+              className="input"
+              value={form.status}
+              onChange={e => set('status', e.target.value as BookingStatus)}
+            >
+              {(Object.entries(BOOKING_STATUS_LABELS) as [BookingStatus, string][]).map(([k, v]) => (
+                <option key={k} value={k}>{v}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        {/* Source */}
+        <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">
+            {(Object.entries(SOURCE_LABELS) as [BookingSource, string][]).map(([k, v]) => (
+              <button
+                key={k}
+                type="button"
+                onClick={() => set('source', k)}
+                className={cn(
+                  'px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
+                  form.source === k
+                    ? 'bg-brand-600 text-white border-brand-600'
+                    : 'bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600 hover:border-brand-400',
+                )}
+              >
+                {v}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Notes */}
+        <div>
+          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+            Примечания
+          </label>
+          <textarea
+            className="input resize-none"
+            rows={2}
+            placeholder="Дополнительные пожелания..."
+            value={form.notes}
+            onChange={e => set('notes', e.target.value)}
+          />
+        </div>
+
+        {/* Summary */}
+        {nights > 0 && room && (
+          <div className="rounded-xl bg-slate-50 dark:bg-slate-700/50 px-4 py-3 flex items-center justify-between">
+            <span className="text-sm text-slate-600 dark:text-slate-300">
+              {nights} {nights === 1 ? 'ночь' : nights < 5 ? 'ночи' : 'ночей'} × {room.baseRate.toLocaleString('ru-RU')} ₽
+            </span>
+            <span className="text-lg font-bold text-slate-900 dark:text-slate-100">
+              {total.toLocaleString('ru-RU')} ₽
+            </span>
+          </div>
+        )}
+      </div>
+    </Modal>
+  )
+}
--- a/src/components/calendar/BookingCalendar.tsx
+++ b/src/components/calendar/BookingCalendar.tsx
@@ -0,0 +1,332 @@
+import { useState, useRef, useCallback } from 'react'
+import { addDays, format, startOfDay, differenceInDays, parseISO, isToday } from 'date-fns'
+import { ru } from 'date-fns/locale'
+import { ChevronLeft, ChevronRight, Plus } from 'lucide-react'
+import { cn, BOOKING_STATUS_COLORS, BOOKING_STATUS_LABELS, SOURCE_LABELS } from '../../lib/utils'
+import type { Room, Booking, DraftBooking } from '../../types'
+import { BookingModal } from '../bookings/BookingModal'
+import { BookingDetailPanel } from '../bookings/BookingDetailPanel'
+
+const CELL_WIDTH = 52   // px per day column
+const ROW_HEIGHT = 56   // px per room row
+const LABEL_WIDTH = 160 // px for room label column
+const DAYS_VISIBLE = 30 // default window
+
+interface BookingCalendarProps {
+  rooms: Room[]
+  bookings: Booking[]
+  onBookingCreate: (b: Partial<Booking>) => void
+  onBookingUpdate: (id: string, b: Partial<Booking>) => void
+}
+
+function getRoomTypeColor(type: string): string {
+  const map: Record<string, string> = {
+    'Стандарт':     'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300',
+    'Делюкс':       'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
+    'Полулюкс':     'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
+    'Люкс':         'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300',
+    'Пентхаус':     'bg-rose-100 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300',
+    'Апартаменты':  'bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300',
+  }
+  return map[type] ?? 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'
+}
+
+export function BookingCalendar({ rooms, bookings, onBookingCreate, onBookingUpdate }: BookingCalendarProps) {
+  const [startDate, setStartDate] = useState(() => startOfDay(new Date()))
+  const [days] = useState(DAYS_VISIBLE)
+
+  // Drag-to-book state
+  const [draft, setDraft] = useState<DraftBooking | null>(null)
+  const [dragStart, setDragStart] = useState<{ roomId: string; dayIdx: number } | null>(null)
+  const [dragEnd, setDragEnd] = useState<number | null>(null)
+
+  // Modals
+  const [bookingModalDraft, setBookingModalDraft] = useState<DraftBooking | null>(null)
+  const [selectedBooking, setSelectedBooking] = useState<Booking | null>(null)
+
+  const gridRef = useRef<HTMLDivElement>(null)
+
+  // Generate date array
+  const dates = Array.from({ length: days }, (_, i) => addDays(startDate, i))
+
+  // Navigate
+  const shiftDays = (n: number) => setStartDate(d => addDays(d, n))
+
+  const jumpToToday = () => setStartDate(startOfDay(new Date()))
+
+  // Compute booking block position
+  const getBlockStyle = (booking: Booking) => {
+    const start = parseISO(booking.checkIn)
+    const end = parseISO(booking.checkOut)
+    const windowEnd = addDays(startDate, days)
+
+    const colStart = Math.max(0, differenceInDays(start, startDate))
+    const colEnd = Math.min(days, differenceInDays(end, startDate))
+    if (colStart >= days || colEnd <= 0) return null
+
+    return {
+      left: colStart * CELL_WIDTH,
+      width: (colEnd - colStart) * CELL_WIDTH - 4,
+    }
+  }
+
+  // Mouse handlers for drag-to-book
+  const handleCellMouseDown = useCallback((roomId: string, dayIdx: number, e: React.MouseEvent) => {
+    if (e.button !== 0) return
+    e.preventDefault()
+    setDragStart({ roomId, dayIdx })
+    setDragEnd(dayIdx)
+  }, [])
+
+  const handleCellMouseEnter = useCallback((dayIdx: number) => {
+    if (!dragStart) return
+    setDragEnd(dayIdx)
+  }, [dragStart])
+
+  const handleMouseUp = useCallback(() => {
+    if (!dragStart || dragEnd === null) return
+    const minDay = Math.min(dragStart.dayIdx, dragEnd)
+    const maxDay = Math.max(dragStart.dayIdx, dragEnd)
+    const checkIn = format(addDays(startDate, minDay), 'yyyy-MM-dd')
+    const checkOut = format(addDays(startDate, maxDay + 1), 'yyyy-MM-dd')
+    setBookingModalDraft({ roomId: dragStart.roomId, checkIn, checkOut })
+    setDragStart(null)
+    setDragEnd(null)
+    setDraft(null)
+  }, [dragStart, dragEnd, startDate])
+
+  // Draft overlay bounds
+  const getDraftStyle = (roomId: string) => {
+    if (!dragStart || dragEnd === null || dragStart.roomId !== roomId) return null
+    const minDay = Math.min(dragStart.dayIdx, dragEnd)
+    const maxDay = Math.max(dragStart.dayIdx, dragEnd)
+    return {
+      left: minDay * CELL_WIDTH,
+      width: (maxDay - minDay + 1) * CELL_WIDTH - 2,
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full" onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp}>
+      {/* Toolbar */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shrink-0 flex-wrap gap-y-2">
+        <div className="flex items-center gap-1.5">
+          <button onClick={() => shiftDays(-7)} className="btn-ghost p-2"><ChevronLeft size={16} /></button>
+          <button onClick={jumpToToday} className="btn-secondary px-3 py-1.5 text-xs">Сегодня</button>
+          <button onClick={() => shiftDays(7)} className="btn-ghost p-2"><ChevronRight size={16} /></button>
+        </div>
+        <span className="text-sm font-medium text-slate-700 dark:text-slate-300 capitalize">
+          {format(startDate, 'LLLL yyyy', { locale: ru })}
+        </span>
+
+        <div className="flex-1" />
+
+        {/* Legend */}
+        <div className="hidden lg:flex items-center gap-3 text-xs text-slate-500">
+          {(['confirmed', 'checked_in', 'checked_out', 'inquiry', 'cancelled'] as const).map(s => (
+            <div key={s} className="flex items-center gap-1.5">
+              <div className={cn('w-3 h-3 rounded-sm', BOOKING_STATUS_COLORS[s].split(' ')[0])} />
+              <span>{BOOKING_STATUS_LABELS[s]}</span>
+            </div>
+          ))}
+        </div>
+
+        <button
+          onClick={() => {
+            const today = format(new Date(), 'yyyy-MM-dd')
+            const tomorrow = format(addDays(new Date(), 1), 'yyyy-MM-dd')
+            setBookingModalDraft({ roomId: rooms[0]?.id ?? '', checkIn: today, checkOut: tomorrow })
+          }}
+          className="btn-primary"
+        >
+          <Plus size={15} />
+          <span className="hidden sm:inline">Новое бронирование</span>
+        </button>
+      </div>
+
+      {/* Grid */}
+      <div className="flex-1 overflow-auto" ref={gridRef}>
+        <div style={{ minWidth: LABEL_WIDTH + days * CELL_WIDTH }}>
+
+          {/* Date header row */}
+          <div
+            className="flex sticky top-0 z-20 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 shadow-sm"
+            style={{ height: 48 }}
+          >
+            {/* Room label header */}
+            <div
+              className="shrink-0 sticky left-0 z-30 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex items-center px-3"
+              style={{ width: LABEL_WIDTH }}
+            >
+              <span className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Номер</span>
+            </div>
+            {/* Date cells */}
+            {dates.map((date, i) => {
+              const isWe = date.getDay() === 0 || date.getDay() === 6
+              const isTod = isToday(date)
+              return (
+                <div
+                  key={i}
+                  className={cn(
+                    'shrink-0 flex flex-col items-center justify-center border-r border-slate-200 dark:border-slate-700 select-none',
+                    isWe && 'bg-slate-50 dark:bg-slate-800/60',
+                    isTod && 'bg-brand-50 dark:bg-brand-900/20',
+                  )}
+                  style={{ width: CELL_WIDTH }}
+                >
+                  <span className={cn(
+                    'text-xs font-medium',
+                    isTod ? 'text-brand-600 dark:text-brand-400' : isWe ? 'text-slate-400' : 'text-slate-500 dark:text-slate-400',
+                  )}>
+                    {format(date, 'EEE', { locale: ru }).slice(0, 2)}
+                  </span>
+                  <span className={cn(
+                    'text-sm font-bold',
+                    isTod
+                      ? 'text-brand-600 dark:text-brand-400'
+                      : 'text-slate-700 dark:text-slate-200',
+                  )}>
+                    {format(date, 'd')}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+
+          {/* Room rows */}
+          {rooms.map(room => {
+            const roomBookings = bookings.filter(b => b.roomId === room.id)
+            const draftStyle = getDraftStyle(room.id)
+
+            return (
+              <div
+                key={room.id}
+                className="flex border-b border-slate-200 dark:border-slate-700 group hover:bg-slate-50/50 dark:hover:bg-slate-800/30"
+                style={{ height: ROW_HEIGHT }}
+              >
+                {/* Room label */}
+                <div
+                  className="shrink-0 sticky left-0 z-10 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex items-center gap-2 px-3 group-hover:bg-slate-50 dark:group-hover:bg-slate-750"
+                  style={{ width: LABEL_WIDTH }}
+                >
+                  <div>
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-sm font-bold text-slate-900 dark:text-slate-100">
+                        {room.number}
+                      </span>
+                      {room.name && (
+                        <span className="text-xs text-slate-500 dark:text-slate-400">{room.name}</span>
+                      )}
+                    </div>
+                    <span className={cn(
+                      'text-xs px-1.5 py-0.5 rounded-md font-medium',
+                      getRoomTypeColor(room.type),
+                    )}>
+                      {room.type}
+                    </span>
+                  </div>
+                  <div className="ml-auto text-xs text-slate-400 dark:text-slate-500">
+                    {room.baseRate.toLocaleString('ru-RU')} ₽
+                  </div>
+                </div>
+
+                {/* Day cells + booking blocks */}
+                <div className="relative flex-1">
+                  {/* Grid cells */}
+                  <div className="flex h-full">
+                    {dates.map((date, i) => {
+                      const isWe = date.getDay() === 0 || date.getDay() === 6
+                      const isTod = isToday(date)
+                      return (
+                        <div
+                          key={i}
+                          className={cn(
+                            'shrink-0 h-full border-r border-slate-200 dark:border-slate-700 cursor-crosshair',
+                            isWe && 'bg-slate-50 dark:bg-slate-800/60',
+                            isTod && 'bg-brand-50/50 dark:bg-brand-900/10',
+                          )}
+                          style={{ width: CELL_WIDTH }}
+                          onMouseDown={(e) => handleCellMouseDown(room.id, i, e)}
+                          onMouseEnter={() => handleCellMouseEnter(i)}
+                        />
+                      )
+                    })}
+                  </div>
+
+                  {/* Booking blocks */}
+                  {roomBookings.map(booking => {
+                    const style = getBlockStyle(booking)
+                    if (!style) return null
+                    const nights = differenceInDays(parseISO(booking.checkOut), parseISO(booking.checkIn))
+                    return (
+                      <div
+                        key={booking.id}
+                        className={cn(
+                          'booking-block border-l-4',
+                          BOOKING_STATUS_COLORS[booking.status],
+                        )}
+                        style={{
+                          left: style.left + 2,
+                          width: style.width,
+                          top: 4,
+                          bottom: 4,
+                          position: 'absolute',
+                        }}
+                        onClick={(e) => { e.stopPropagation(); setSelectedBooking(booking) }}
+                        title={`${booking.guestName} • ${booking.checkIn} – ${booking.checkOut}`}
+                      >
+                        <span className="truncate text-xs font-semibold opacity-95 drop-shadow-sm">
+                          {booking.guestName}
+                        </span>
+                        {style.width > 80 && (
+                          <span className="ml-2 opacity-75 text-[10px] shrink-0">
+                            {nights}н • {SOURCE_LABELS[booking.source]}
+                          </span>
+                        )}
+                      </div>
+                    )
+                  })}
+
+                  {/* Draft overlay */}
+                  {draftStyle && (
+                    <div
+                      className="absolute top-2 bottom-2 bg-brand-400/40 border-2 border-brand-500 border-dashed rounded-md pointer-events-none"
+                      style={{ left: draftStyle.left + 2, width: draftStyle.width }}
+                    />
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Booking create modal */}
+      {bookingModalDraft && (
+        <BookingModal
+          open={true}
+          draft={bookingModalDraft}
+          rooms={rooms}
+          onClose={() => setBookingModalDraft(null)}
+          onSave={(data) => {
+            onBookingCreate(data)
+            setBookingModalDraft(null)
+          }}
+        />
+      )}
+
+      {/* Booking detail panel */}
+      {selectedBooking && (
+        <BookingDetailPanel
+          booking={selectedBooking}
+          room={rooms.find(r => r.id === selectedBooking.roomId)}
+          onClose={() => setSelectedBooking(null)}
+          onUpdate={(id, data) => {
+            onBookingUpdate(id, data)
+            setSelectedBooking(null)
+          }}
+        />
+      )}
+    </div>
+  )
+}
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -0,0 +1,140 @@
+import { NavLink, useNavigate } from 'react-router-dom'
+import {
+  CalendarDays, BookOpen, BedDouble, Sparkles, Globe, Settings,
+  FileText, LayoutDashboard, Building2, Users, X, Hotel,
+} from 'lucide-react'
+import { useAuth } from '../../contexts/AuthContext'
+import { cn } from '../../lib/utils'
+import { MOCK_HOTELS } from '../../data/mockData'
+
+interface SidebarProps {
+  open: boolean
+  onClose: () => void
+}
+
+function NavItem({
+  to, icon: Icon, label, onClick,
+}: {
+  to: string
+  icon: React.ElementType
+  label: string
+  onClick?: () => void
+}) {
+  return (
+    <NavLink
+      to={to}
+      onClick={onClick}
+      className={({ isActive }) => cn('sidebar-link', isActive && 'active')}
+    >
+      <Icon size={18} />
+      <span>{label}</span>
+    </NavLink>
+  )
+}
+
+export function Sidebar({ open, onClose }: SidebarProps) {
+  const { user } = useAuth()
+  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'
+
+  return (
+    <>
+      {/* Mobile backdrop */}
+      {open && (
+        <div
+          className="fixed inset-0 bg-black/40 z-40 lg:hidden"
+          onClick={onClose}
+        />
+      )}
+
+      <aside className={cn(
+        'fixed left-0 top-0 bottom-0 z-50 w-64 flex flex-col',
+        'bg-white dark:bg-slate-800',
+        'border-r border-slate-200 dark:border-slate-700',
+        'transition-transform duration-200 ease-out',
+        'lg:translate-x-0 lg:static lg:z-auto',
+        open ? 'translate-x-0' : '-translate-x-full',
+      )}>
+        {/* Logo */}
+        <div className="h-16 flex items-center justify-between px-4 border-b border-slate-200 dark:border-slate-700 shrink-0">
+          <div className="flex items-center gap-2.5 cursor-pointer" onClick={() => navigate('/')}>
+            <div className="w-8 h-8 rounded-lg bg-brand-600 flex items-center justify-center shrink-0">
+              <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>
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="lg:hidden btn-ghost p-1.5"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Hotel selector (non-admin) */}
+        {hotel && (
+          <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}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* Nav */}
+        <nav className="flex-1 overflow-y-auto px-3 py-3 space-y-0.5">
+          {isAdmin ? (
+            <>
+              <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} />
+            </>
+          ) : (
+            <>
+              <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} />
+              {!isHousekeeper && (
+                <NavItem to={`/${slug}/bookings`}    icon={BookOpen}     label="Бронирования"   onClick={onClose} />
+              )}
+              <NavItem to={`/${slug}/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} />
+                  <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} />
+                </>
+              )}
+            </>
+          )}
+        </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>
+      </aside>
+    </>
+  )
+}
--- a/src/components/layout/Topbar.tsx
+++ b/src/components/layout/Topbar.tsx
@@ -0,0 +1,95 @@
+import { Sun, Moon, Bell, LogOut, ChevronDown, Menu } from 'lucide-react'
+import { useTheme } from '../../contexts/ThemeContext'
+import { useAuth } from '../../contexts/AuthContext'
+import { ROLE_LABELS } from '../../lib/utils'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+interface TopbarProps {
+  onMenuToggle?: () => void
+  title?: string
+}
+
+export function Topbar({ onMenuToggle, title }: TopbarProps) {
+  const { theme, toggle } = useTheme()
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+  const [userMenuOpen, setUserMenuOpen] = useState(false)
+
+  const handleLogout = () => {
+    logout()
+    navigate('/login')
+  }
+
+  return (
+    <header className="h-16 shrink-0 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 flex items-center px-4 gap-3 z-30">
+      {/* Mobile menu button */}
+      <button
+        onClick={onMenuToggle}
+        className="lg:hidden btn-ghost p-2"
+      >
+        <Menu size={20} />
+      </button>
+
+      {/* Page title (mobile) */}
+      {title && (
+        <span className="lg:hidden font-semibold text-slate-900 dark:text-slate-100 truncate">
+          {title}
+        </span>
+      )}
+
+      <div className="flex-1" />
+
+      {/* Notification bell */}
+      <button className="btn-ghost p-2 relative">
+        <Bell size={18} />
+        <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-red-500" />
+      </button>
+
+      {/* Theme toggle */}
+      <button onClick={toggle} className="btn-ghost p-2">
+        {theme === 'light' ? <Moon size={18} /> : <Sun size={18} />}
+      </button>
+
+      {/* User menu */}
+      <div className="relative">
+        <button
+          onClick={() => setUserMenuOpen(v => !v)}
+          className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
+        >
+          <div className="w-8 h-8 rounded-full bg-brand-600 flex items-center justify-center text-white text-sm font-semibold shrink-0">
+            {user?.name.charAt(0) ?? 'U'}
+          </div>
+          <div className="hidden sm:block text-left">
+            <p className="text-sm font-medium text-slate-900 dark:text-slate-100 leading-tight">
+              {user?.name}
+            </p>
+            <p className="text-xs text-slate-500 dark:text-slate-400">
+              {user ? ROLE_LABELS[user.role] : ''}
+            </p>
+          </div>
+          <ChevronDown size={14} className="text-slate-400 hidden sm:block" />
+        </button>
+
+        {userMenuOpen && (
+          <>
+            <div className="fixed inset-0 z-10" onClick={() => setUserMenuOpen(false)} />
+            <div className="absolute right-0 top-full mt-1 w-52 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl z-20 py-1 animate-fade-in">
+              <div className="px-3 py-2 border-b border-slate-100 dark:border-slate-700">
+                <p className="text-sm font-medium text-slate-900 dark:text-slate-100">{user?.name}</p>
+                <p className="text-xs text-slate-500 dark:text-slate-400">{user?.email}</p>
+              </div>
+              <button
+                onClick={handleLogout}
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+              >
+                <LogOut size={14} />
+                Выйти
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </header>
+  )
+}
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -0,0 +1,14 @@
+import { cn } from '../../lib/utils'
+
+interface BadgeProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function Badge({ children, className }: BadgeProps) {
+  return (
+    <span className={cn('badge', className)}>
+      {children}
+    </span>
+  )
+}
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -0,0 +1,75 @@
+import { useEffect } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+interface ModalProps {
+  open: boolean
+  onClose: () => void
+  title: string
+  children: React.ReactNode
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  footer?: React.ReactNode
+}
+
+const SIZES = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-2xl',
+}
+
+export function Modal({ open, onClose, title, children, size = 'md', footer }: ModalProps) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    if (open) document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [open, onClose])
+
+  useEffect(() => {
+    document.body.style.overflow = open ? 'hidden' : ''
+    return () => { document.body.style.overflow = '' }
+  }, [open])
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm animate-fade-in"
+        onClick={onClose}
+      />
+      {/* Panel */}
+      <div className={cn(
+        'relative w-full bg-white dark:bg-slate-800 rounded-2xl shadow-2xl',
+        'flex flex-col max-h-[90vh] animate-fade-in',
+        SIZES[size],
+      )}>
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 dark:border-slate-700 shrink-0">
+          <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-500 transition-colors"
+          >
+            <X size={18} />
+          </button>
+        </div>
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          {children}
+        </div>
+        {/* Footer */}
+        {footer && (
+          <div className="shrink-0 px-6 py-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/src/contexts/AuthContext.tsx
+++ b/src/contexts/AuthContext.tsx
@@ -0,0 +1,47 @@
+import { createContext, useContext, useState } from 'react'
+import type { User, AuthSession } from '../types'
+import { MOCK_USERS } from '../data/mockData'
+
+interface AuthContextValue {
+  session: AuthSession | null
+  user: User | null
+  login: (email: string, password: string) => Promise<boolean>
+  logout: () => void
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null)
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [session, setSession] = useState<AuthSession | null>(() => {
+    const stored = sessionStorage.getItem('hotelsync-session')
+    return stored ? JSON.parse(stored) : null
+  })
+
+  const login = async (email: string, _password: string): Promise<boolean> => {
+    // Mock authentication — in production, call POST /auth/login
+    await new Promise(r => setTimeout(r, 800))
+    const user = MOCK_USERS.find(u => u.email.toLowerCase() === email.toLowerCase())
+    if (!user) return false
+    const s: AuthSession = { user, token: 'mock-jwt-token-' + user.id }
+    setSession(s)
+    sessionStorage.setItem('hotelsync-session', JSON.stringify(s))
+    return true
+  }
+
+  const logout = () => {
+    setSession(null)
+    sessionStorage.removeItem('hotelsync-session')
+  }
+
+  return (
+    <AuthContext.Provider value={{ session, user: session?.user ?? null, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext)
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider')
+  return ctx
+}
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -0,0 +1,42 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type Theme = 'light' | 'dark'
+
+interface ThemeContextValue {
+  theme: Theme
+  toggle: () => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null)
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const stored = localStorage.getItem('hotelsync-theme') as Theme | null
+    if (stored) return stored
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  })
+
+  useEffect(() => {
+    const root = document.documentElement
+    if (theme === 'dark') {
+      root.classList.add('dark')
+    } else {
+      root.classList.remove('dark')
+    }
+    localStorage.setItem('hotelsync-theme', theme)
+  }, [theme])
+
+  const toggle = () => setTheme(t => t === 'light' ? 'dark' : 'light')
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggle }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext)
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider')
+  return ctx
+}
--- a/src/data/mockData.ts
+++ b/src/data/mockData.ts
@@ -0,0 +1,190 @@
+import { addDays, format, subDays } from 'date-fns'
+import type { Hotel, Room, Booking, Channel, HousekeepingTask, User } from '../types'
+
+
+const TODAY = format(new Date(), 'yyyy-MM-dd')
+const d = (offset: number) => format(addDays(new Date(), offset), 'yyyy-MM-dd')
+const p = (offset: number) => format(subDays(new Date(), offset), 'yyyy-MM-dd')
+
+// ─── Hotels ──────────────────────────────────────────────────────────────────
+
+export const MOCK_HOTELS: Hotel[] = [
+  {
+    id: 'hotel-1',
+    name: 'Grand Palace Hotel',
+    slug: 'grand-palace',
+    address: 'ул. Тверская 1, Москва',
+    timezone: 'Europe/Moscow',
+    currency: 'RUB',
+    plan: 'pro',
+    isActive: true,
+    roomCount: 12,
+    createdAt: '2024-01-15',
+  },
+  {
+    id: 'hotel-2',
+    name: 'Sea Breeze Resort',
+    slug: 'sea-breeze',
+    address: 'ул. Набережная 12, Сочи',
+    timezone: 'Europe/Moscow',
+    currency: 'RUB',
+    plan: 'enterprise',
+    isActive: true,
+    roomCount: 48,
+    createdAt: '2024-03-22',
+  },
+  {
+    id: 'hotel-3',
+    name: 'City Inn Express',
+    slug: 'city-inn',
+    address: 'пр. Невский 88, Санкт-Петербург',
+    timezone: 'Europe/Moscow',
+    currency: 'RUB',
+    plan: 'starter',
+    isActive: false,
+    roomCount: 20,
+    createdAt: '2024-06-01',
+  },
+]
+
+// ─── Users ───────────────────────────────────────────────────────────────────
+
+export const MOCK_USERS: User[] = [
+  {
+    id: 'user-admin',
+    email: 'admin@hotelsync.io',
+    name: 'Александр Петров',
+    role: 'super_admin',
+    hotelId: null,
+  },
+  {
+    id: 'user-manager-1',
+    email: 'manager@grand-palace.ru',
+    name: 'Елена Смирнова',
+    role: 'hotel_manager',
+    hotelId: 'hotel-1',
+  },
+  {
+    id: 'user-housekeeper-1',
+    email: 'cleaner@grand-palace.ru',
+    name: 'Мария Иванова',
+    role: 'housekeeper',
+    hotelId: 'hotel-1',
+  },
+]
+
+// ─── Rooms ───────────────────────────────────────────────────────────────────
+
+export const MOCK_ROOMS: Room[] = [
+  { id: 'r1',  hotelId: 'hotel-1', number: '101', floor: 1, type: 'Стандарт',    bedType: 'double', maxGuests: 2, baseRate: 4500,  status: 'occupied',     housekeepingStatus: 'dirty',    amenities: ['Wi-Fi', 'TV', 'AC'], sortOrder: 1 },
+  { id: 'r2',  hotelId: 'hotel-1', number: '102', floor: 1, type: 'Стандарт',    bedType: 'twin',   maxGuests: 2, baseRate: 4500,  status: 'available',    housekeepingStatus: 'clean',    amenities: ['Wi-Fi', 'TV', 'AC'], sortOrder: 2 },
+  { id: 'r3',  hotelId: 'hotel-1', number: '103', floor: 1, type: 'Стандарт',    bedType: 'single', maxGuests: 1, baseRate: 3200,  status: 'available',    housekeepingStatus: 'clean',    amenities: ['Wi-Fi', 'TV'], sortOrder: 3 },
+  { id: 'r4',  hotelId: 'hotel-1', number: '201', floor: 2, type: 'Делюкс',      bedType: 'king',   maxGuests: 2, baseRate: 7800,  status: 'occupied',     housekeepingStatus: 'cleaning', amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe'], sortOrder: 4 },
+  { id: 'r5',  hotelId: 'hotel-1', number: '202', floor: 2, type: 'Делюкс',      bedType: 'queen',  maxGuests: 2, baseRate: 7200,  status: 'available',    housekeepingStatus: 'inspect',  amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar'], sortOrder: 5 },
+  { id: 'r6',  hotelId: 'hotel-1', number: '203', floor: 2, type: 'Делюкс',      bedType: 'twin',   maxGuests: 3, baseRate: 7500,  status: 'maintenance',  housekeepingStatus: 'clean',    amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar'], sortOrder: 6 },
+  { id: 'r7',  hotelId: 'hotel-1', number: '301', floor: 3, type: 'Полулюкс',    bedType: 'king',   maxGuests: 2, baseRate: 11000, status: 'occupied',     housekeepingStatus: 'dirty',    amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe', 'Jacuzzi'], sortOrder: 7 },
+  { id: 'r8',  hotelId: 'hotel-1', number: '302', floor: 3, type: 'Полулюкс',    bedType: 'king',   maxGuests: 2, baseRate: 11000, status: 'available',    housekeepingStatus: 'clean',    amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe', 'Jacuzzi'], sortOrder: 8 },
+  { id: 'r9',  hotelId: 'hotel-1', number: '401', floor: 4, type: 'Люкс',        bedType: 'king',   maxGuests: 3, baseRate: 18500, status: 'available',    housekeepingStatus: 'clean',    amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe', 'Jacuzzi', 'Panoramic view'], sortOrder: 9 },
+  { id: 'r10', hotelId: 'hotel-1', number: '402', floor: 4, type: 'Люкс',        bedType: 'king',   maxGuests: 4, baseRate: 22000, status: 'blocked',      housekeepingStatus: 'clean',    amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe', 'Jacuzzi', 'Panoramic view', 'Butler'], sortOrder: 10 },
+  { id: 'r11', hotelId: 'hotel-1', number: '501', name: 'Пентхаус', floor: 5, type: 'Пентхаус',  bedType: 'king',   maxGuests: 6, baseRate: 45000, status: 'available',    housekeepingStatus: 'clean',    amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe', 'Jacuzzi', 'Terrace', 'Butler', 'Panoramic view'], sortOrder: 11 },
+  { id: 'r12', hotelId: 'hotel-1', number: '102A', floor: 1, type: 'Апартаменты', bedType: 'double', maxGuests: 4, baseRate: 9500, status: 'occupied',     housekeepingStatus: 'dirty',    amenities: ['Wi-Fi', 'TV', 'AC', 'Kitchen', 'Washing machine'], sortOrder: 12 },
+]
+
+// ─── Bookings ─────────────────────────────────────────────────────────────────
+
+export const MOCK_BOOKINGS: Booking[] = [
+  // r1 — ongoing
+  { id: 'b1',  hotelId: 'hotel-1', roomId: 'r1',  guestId: 'g1',  guestName: 'Дмитрий Волков',     guestEmail: 'volkov@mail.ru',      checkIn: p(2),  checkOut: d(3),  status: 'checked_in', source: 'direct',      totalAmount: 22500, paidAmount: 22500, adults: 2, children: 0, createdAt: p(10) },
+  // r2
+  { id: 'b2',  hotelId: 'hotel-1', roomId: 'r2',  guestId: 'g2',  guestName: 'Анна Козлова',        guestEmail: 'kozlova@gmail.com',   checkIn: d(2),  checkOut: d(5),  status: 'confirmed',  source: 'booking_com', totalAmount: 13500, paidAmount: 0,     adults: 2, children: 1, createdAt: p(5) },
+  { id: 'b3',  hotelId: 'hotel-1', roomId: 'r2',  guestId: 'g3',  guestName: 'Сергей Новиков',      guestEmail: 'novikov@yandex.ru',   checkIn: d(8),  checkOut: d(12), status: 'confirmed',  source: 'airbnb',      totalAmount: 18000, paidAmount: 9000,  adults: 2, children: 0, createdAt: p(3) },
+  // r3
+  { id: 'b4',  hotelId: 'hotel-1', roomId: 'r3',  guestId: 'g4',  guestName: 'Ольга Морозова',      guestEmail: 'morozova@mail.ru',    checkIn: d(1),  checkOut: d(4),  status: 'confirmed',  source: 'direct',      totalAmount: 9600,  paidAmount: 9600,  adults: 1, children: 0, createdAt: p(7) },
+  // r4 — ongoing
+  { id: 'b5',  hotelId: 'hotel-1', roomId: 'r4',  guestId: 'g5',  guestName: 'Игорь Соколов',       guestEmail: 'sokolov@corp.ru',     checkIn: p(1),  checkOut: d(2),  status: 'checked_in', source: 'direct',      totalAmount: 23400, paidAmount: 23400, adults: 2, children: 0, createdAt: p(14) },
+  { id: 'b6',  hotelId: 'hotel-1', roomId: 'r4',  guestId: 'g6',  guestName: 'Татьяна Белова',      guestEmail: 'belova@gmail.com',    checkIn: d(4),  checkOut: d(9),  status: 'confirmed',  source: 'expedia',     totalAmount: 39000, paidAmount: 0,     adults: 2, children: 2, createdAt: p(2) },
+  // r5
+  { id: 'b7',  hotelId: 'hotel-1', roomId: 'r5',  guestId: 'g7',  guestName: 'Владимир Федоров',    guestEmail: 'fedorov@biz.ru',      checkIn: d(3),  checkOut: d(7),  status: 'confirmed',  source: 'booking_com', totalAmount: 28800, paidAmount: 14400, adults: 2, children: 0, createdAt: p(6) },
+  // r7 — ongoing
+  { id: 'b8',  hotelId: 'hotel-1', roomId: 'r7',  guestId: 'g8',  guestName: 'Наталья Александрова', guestEmail: 'alex@premium.ru',    checkIn: p(3),  checkOut: d(4),  status: 'checked_in', source: 'direct',      totalAmount: 77000, paidAmount: 77000, adults: 2, children: 0, createdAt: p(20) },
+  // r9
+  { id: 'b9',  hotelId: 'hotel-1', roomId: 'r9',  guestId: 'g9',  guestName: 'Михаил Орлов',        guestEmail: 'orlov@vip.ru',        checkIn: d(5),  checkOut: d(10), status: 'confirmed',  source: 'direct',      totalAmount: 92500, paidAmount: 46250, adults: 3, children: 0, createdAt: p(1) },
+  // r12 — ongoing
+  { id: 'b10', hotelId: 'hotel-1', roomId: 'r12', guestId: 'g10', guestName: 'Екатерина Лебедева',  guestEmail: 'lebed@family.ru',     checkIn: p(1),  checkOut: d(6),  status: 'checked_in', source: 'airbnb',      totalAmount: 66500, paidAmount: 66500, adults: 2, children: 2, createdAt: p(15) },
+  // past bookings
+  { id: 'b11', hotelId: 'hotel-1', roomId: 'r1',  guestId: 'g11', guestName: 'Павел Тихонов',       guestEmail: 'tihonov@mail.ru',     checkIn: p(10), checkOut: p(7),  status: 'checked_out', source: 'direct',     totalAmount: 13500, paidAmount: 13500, adults: 1, children: 0, createdAt: p(20) },
+  { id: 'b12', hotelId: 'hotel-1', roomId: 'r8',  guestId: 'g12', guestName: 'Людмила Захарова',    guestEmail: 'zahar@corp.ru',       checkIn: d(6),  checkOut: d(11), status: 'confirmed',  source: 'booking_com', totalAmount: 55000, paidAmount: 27500, adults: 2, children: 1, createdAt: TODAY },
+  { id: 'b13', hotelId: 'hotel-1', roomId: 'r3',  guestId: 'g13', guestName: 'Роман Степанов',      guestEmail: 'stepanov@biz.ru',     checkIn: d(6),  checkOut: d(9),  status: 'inquiry',    source: 'direct',      totalAmount: 9600,  paidAmount: 0,     adults: 1, children: 0, createdAt: TODAY },
+  { id: 'b14', hotelId: 'hotel-1', roomId: 'r11', guestId: 'g14', guestName: 'Виктор Громов',       guestEmail: 'gromov@vip.ru',       checkIn: d(7),  checkOut: d(14), status: 'confirmed',  source: 'direct',      totalAmount: 315000, paidAmount: 157500, adults: 4, children: 2, createdAt: p(3) },
+]
+
+// ─── Channels ─────────────────────────────────────────────────────────────────
+
+export const MOCK_CHANNELS: Channel[] = [
+  {
+    id: 'ch1',
+    hotelId: 'hotel-1',
+    name: 'booking_com',
+    displayName: 'Booking.com',
+    isEnabled: true,
+    lastSyncAt: format(subDays(new Date(), 0), "yyyy-MM-dd'T'HH:mm:ss"),
+    lastSyncStatus: 'success',
+    bookingsImported: 47,
+    mappings: [
+      { localRoomId: 'r1', channelRoomId: 'bcom-101', channelRoomName: 'Standard Double Room' },
+      { localRoomId: 'r4', channelRoomId: 'bcom-201', channelRoomName: 'Deluxe King Room' },
+      { localRoomId: 'r7', channelRoomId: 'bcom-301', channelRoomName: 'Junior Suite' },
+    ],
+  },
+  {
+    id: 'ch2',
+    hotelId: 'hotel-1',
+    name: 'airbnb',
+    displayName: 'Airbnb',
+    isEnabled: true,
+    lastSyncAt: format(subDays(new Date(), 1), "yyyy-MM-dd'T'HH:mm:ss"),
+    lastSyncStatus: 'success',
+    bookingsImported: 23,
+    mappings: [
+      { localRoomId: 'r11', channelRoomId: 'airbnb-penthouse', channelRoomName: 'Penthouse with Terrace' },
+      { localRoomId: 'r12', channelRoomId: 'airbnb-apt', channelRoomName: 'Cozy Apartment' },
+    ],
+  },
+  {
+    id: 'ch3',
+    hotelId: 'hotel-1',
+    name: 'expedia',
+    displayName: 'Expedia',
+    isEnabled: false,
+    lastSyncAt: null,
+    lastSyncStatus: 'idle',
+    bookingsImported: 0,
+    mappings: [],
+  },
+  {
+    id: 'ch4',
+    hotelId: 'hotel-1',
+    name: 'vrbo',
+    displayName: 'VRBO',
+    isEnabled: false,
+    lastSyncAt: null,
+    lastSyncStatus: 'idle',
+    bookingsImported: 0,
+    mappings: [],
+  },
+]
+
+// ─── Housekeeping ──────────────────────────────────────────────────────────────
+
+export const MOCK_HK_TASKS: HousekeepingTask[] = [
+  { id: 'hk1',  hotelId: 'hotel-1', roomId: 'r1',  roomNumber: '101',  assignedToId: 'user-housekeeper-1', assignedToName: 'Мария Иванова',  priority: 'high',   status: 'in_progress', type: 'cleaning',    dueDate: TODAY, notes: 'Выезд гостя в 12:00, срочная уборка' },
+  { id: 'hk2',  hotelId: 'hotel-1', roomId: 'r4',  roomNumber: '201',  assignedToId: 'user-housekeeper-1', assignedToName: 'Мария Иванова',  priority: 'high',   status: 'pending',     type: 'cleaning',    dueDate: TODAY },
+  { id: 'hk3',  hotelId: 'hotel-1', roomId: 'r7',  roomNumber: '301',  assignedToId: 'user-housekeeper-1', assignedToName: 'Мария Иванова',  priority: 'normal', status: 'pending',     type: 'cleaning',    dueDate: TODAY },
+  { id: 'hk4',  hotelId: 'hotel-1', roomId: 'r12', roomNumber: '102A', assignedToId: 'user-housekeeper-1', assignedToName: 'Мария Иванова',  priority: 'normal', status: 'pending',     type: 'cleaning',    dueDate: TODAY },
+  { id: 'hk5',  hotelId: 'hotel-1', roomId: 'r5',  roomNumber: '202',  priority: 'normal', status: 'pending', type: 'inspection',  dueDate: TODAY, notes: 'Проверка после ремонта кондиционера' },
+  { id: 'hk6',  hotelId: 'hotel-1', roomId: 'r6',  roomNumber: '203',  priority: 'high',   status: 'pending', type: 'maintenance', dueDate: TODAY, notes: 'Замена сантехники, номер закрыт' },
+  { id: 'hk7',  hotelId: 'hotel-1', roomId: 'r2',  roomNumber: '102',  priority: 'low',    status: 'done',    type: 'cleaning',    dueDate: TODAY, completedAt: `${TODAY}T09:30:00` },
+  { id: 'hk8',  hotelId: 'hotel-1', roomId: 'r3',  roomNumber: '103',  priority: 'low',    status: 'done',    type: 'cleaning',    dueDate: TODAY, completedAt: `${TODAY}T10:15:00` },
+  { id: 'hk9',  hotelId: 'hotel-1', roomId: 'r8',  roomNumber: '302',  priority: 'normal', status: 'done',    type: 'cleaning',    dueDate: TODAY, completedAt: `${TODAY}T08:45:00` },
+  { id: 'hk10', hotelId: 'hotel-1', roomId: 'r9',  roomNumber: '401',  priority: 'normal', status: 'done',    type: 'inspection',  dueDate: TODAY, completedAt: `${TODAY}T11:00:00`, notes: 'Готов к заселению' },
+]
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,117 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    @apply bg-slate-50 text-slate-900 font-sans;
+    @apply dark:bg-slate-900 dark:text-slate-100;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-slate-300 dark:bg-slate-600 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-slate-400 dark:bg-slate-500;
+  }
+}
+
+@layer components {
+  .booking-block {
+    @apply absolute inset-y-1 rounded-md text-white text-xs font-medium
+           flex items-center px-2 overflow-hidden cursor-pointer
+           select-none transition-all duration-100 hover:brightness-110;
+  }
+
+  .cal-cell {
+    @apply relative border-r border-b border-slate-200 dark:border-slate-700
+           min-w-[52px] h-14;
+  }
+
+  .cal-cell.today {
+    @apply bg-brand-50 dark:bg-brand-900/20;
+  }
+
+  .cal-cell.weekend {
+    @apply bg-slate-100/60 dark:bg-slate-800/60;
+  }
+
+  .sidebar-link {
+    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
+           text-slate-600 dark:text-slate-400
+           hover:bg-slate-100 dark:hover:bg-slate-800
+           hover:text-slate-900 dark:hover:text-slate-100
+           transition-all duration-150;
+  }
+
+  .sidebar-link.active {
+    @apply bg-brand-50 dark:bg-brand-900/30
+           text-brand-700 dark:text-brand-300;
+  }
+
+  .card {
+    @apply bg-white dark:bg-slate-800
+           border border-slate-200 dark:border-slate-700
+           rounded-xl shadow-card;
+  }
+
+  .btn-primary {
+    @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg
+           bg-brand-600 hover:bg-brand-700
+           text-white text-sm font-medium
+           transition-colors duration-150
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg
+           bg-white dark:bg-slate-800
+           border border-slate-200 dark:border-slate-700
+           text-slate-700 dark:text-slate-300
+           text-sm font-medium
+           hover:bg-slate-50 dark:hover:bg-slate-700
+           transition-colors duration-150;
+  }
+
+  .btn-ghost {
+    @apply inline-flex items-center gap-2 px-3 py-2 rounded-lg
+           text-slate-600 dark:text-slate-400
+           text-sm font-medium
+           hover:bg-slate-100 dark:hover:bg-slate-800
+           transition-colors duration-150;
+  }
+
+  .input {
+    @apply w-full px-3 py-2 rounded-lg text-sm
+           bg-white dark:bg-slate-800
+           border border-slate-300 dark:border-slate-600
+           text-slate-900 dark:text-slate-100
+           placeholder-slate-400 dark:placeholder-slate-500
+           focus:outline-none focus:ring-2 focus:ring-brand-500/40
+           focus:border-brand-500 dark:focus:border-brand-400
+           transition-colors duration-150;
+  }
+
+  .badge {
+    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
+  }
+}
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -0,0 +1,25 @@
+import { Outlet, Navigate } from 'react-router-dom'
+import { useState } from 'react'
+import { Sidebar } from '../components/layout/Sidebar'
+import { Topbar } from '../components/layout/Topbar'
+import { useAuth } from '../contexts/AuthContext'
+
+export function AppLayout() {
+  const { user } = useAuth()
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  if (!user) return <Navigate to="/login" replace />
+
+  return (
+    <div className="flex h-screen bg-slate-50 dark:bg-slate-900 overflow-hidden">
+      <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      <div className="flex-1 flex flex-col min-w-0">
+        <Topbar onMenuToggle={() => setSidebarOpen(v => !v)} />
+        <main className="flex-1 overflow-auto">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,128 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import type { BookingStatus, BookingSource, HousekeepingStatus, RoomStatus, Role, HotelPlan } from '../types'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatCurrency(amount: number, currency = 'RUB') {
+  return new Intl.NumberFormat('ru-RU', {
+    style: 'currency',
+    currency,
+    maximumFractionDigits: 0,
+  }).format(amount)
+}
+
+export function formatDate(date: string, opts?: Intl.DateTimeFormatOptions) {
+  return new Intl.DateTimeFormat('ru-RU', opts ?? { day: 'numeric', month: 'short' }).format(new Date(date))
+}
+
+// ─── Booking status ───────────────────────────────────────────────────────────
+
+export const BOOKING_STATUS_LABELS: Record<BookingStatus, string> = {
+  inquiry:     'Запрос',
+  confirmed:   'Подтверждён',
+  checked_in:  'Заселён',
+  checked_out: 'Выехал',
+  cancelled:   'Отменён',
+  no_show:     'Неявка',
+}
+
+export const BOOKING_STATUS_COLORS: Record<BookingStatus, string> = {
+  inquiry:     'bg-amber-400 border-amber-600',
+  confirmed:   'bg-brand-500 border-brand-700',
+  checked_in:  'bg-emerald-500 border-emerald-700',
+  checked_out: 'bg-slate-400 border-slate-600',
+  cancelled:   'bg-red-400 border-red-600',
+  no_show:     'bg-orange-400 border-orange-600',
+}
+
+export const BOOKING_STATUS_BADGE: Record<BookingStatus, string> = {
+  inquiry:     'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
+  confirmed:   'bg-brand-100 text-brand-800 dark:bg-brand-900/30 dark:text-brand-300',
+  checked_in:  'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300',
+  checked_out: 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300',
+  cancelled:   'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
+  no_show:     'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',
+}
+
+// ─── Source ───────────────────────────────────────────────────────────────────
+
+export const SOURCE_LABELS: Record<BookingSource, string> = {
+  direct:      'Прямое',
+  booking_com: 'Booking.com',
+  airbnb:      'Airbnb',
+  expedia:     'Expedia',
+  other:       'Другое',
+}
+
+export const SOURCE_COLORS: Record<BookingSource, string> = {
+  direct:      'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-200',
+  booking_com: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+  airbnb:      'bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300',
+  expedia:     'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
+  other:       'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-200',
+}
+
+// ─── Housekeeping ─────────────────────────────────────────────────────────────
+
+export const HK_STATUS_LABELS: Record<HousekeepingStatus, string> = {
+  clean:    'Чистый',
+  dirty:    'Грязный',
+  cleaning: 'Убирается',
+  inspect:  'Проверка',
+}
+
+export const HK_STATUS_COLORS: Record<HousekeepingStatus, string> = {
+  clean:    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
+  dirty:    'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+  cleaning: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+  inspect:  'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+}
+
+// ─── Room status ──────────────────────────────────────────────────────────────
+
+export const ROOM_STATUS_LABELS: Record<RoomStatus, string> = {
+  available:   'Свободен',
+  occupied:    'Занят',
+  maintenance: 'Ремонт',
+  blocked:     'Заблокирован',
+}
+
+export const ROOM_STATUS_COLORS: Record<RoomStatus, string> = {
+  available:   'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
+  occupied:    'bg-brand-100 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300',
+  maintenance: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+  blocked:     'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400',
+}
+
+// ─── Role ─────────────────────────────────────────────────────────────────────
+
+export const ROLE_LABELS: Record<Role, string> = {
+  super_admin:   'Супер-администратор',
+  hotel_manager: 'Менеджер отеля',
+  housekeeper:   'Горничная',
+}
+
+// ─── Plan ─────────────────────────────────────────────────────────────────────
+
+export const PLAN_LABELS: Record<HotelPlan, string> = {
+  starter:    'Starter',
+  pro:        'Pro',
+  enterprise: 'Enterprise',
+}
+
+export const PLAN_COLORS: Record<HotelPlan, string> = {
+  starter:    'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300',
+  pro:        'bg-brand-100 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300',
+  enterprise: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+}
+
+// ─── Nights calc ─────────────────────────────────────────────────────────────
+
+export function nightsCount(checkIn: string, checkOut: string): number {
+  const a = new Date(checkIn)
+  const b = new Date(checkOut)
+  return Math.round((b.getTime() - a.getTime()) / 86400000)
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/src/pages/AdminDashboard.tsx
+++ b/src/pages/AdminDashboard.tsx
@@ -0,0 +1,119 @@
+import { Building2, Users, TrendingUp, DollarSign, CheckCircle2, AlertCircle, Plus } from 'lucide-react'
+import { MOCK_HOTELS, MOCK_USERS } from '../data/mockData'
+import { cn, PLAN_COLORS, PLAN_LABELS } from '../lib/utils'
+import { Badge } from '../components/ui/Badge'
+
+export function AdminDashboard() {
+  const activeHotels = MOCK_HOTELS.filter(h => h.isActive).length
+  const totalRooms = MOCK_HOTELS.reduce((s, h) => s + h.roomCount, 0)
+
+  return (
+    <div className="p-4 md:p-6 space-y-6">
+      {/* 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">HotelSync SaaS · Обзор платформы</p>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        {[
+          { label: 'Всего отелей', value: MOCK_HOTELS.length, icon: Building2, color: 'text-brand-600 dark:text-brand-400', bg: 'bg-brand-50 dark:bg-brand-900/20' },
+          { label: 'Активных',     value: activeHotels,        icon: CheckCircle2, color: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-900/20' },
+          { label: 'Всего номеров', value: totalRooms,          icon: TrendingUp, color: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-900/20' },
+          { label: 'Пользователей', value: MOCK_USERS.length,   icon: Users, color: 'text-violet-600 dark:text-violet-400', bg: 'bg-violet-50 dark:bg-violet-900/20' },
+        ].map(s => {
+          const Icon = s.icon
+          return (
+            <div key={s.label} className={cn('card p-4 border-0', s.bg)}>
+              <div className="flex items-center justify-between mb-2">
+                <Icon size={18} className={s.color} />
+              </div>
+              <p className={cn('text-2xl font-bold', s.color)}>{s.value}</p>
+              <p className="text-sm text-slate-600 dark:text-slate-400">{s.label}</p>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Revenue by plan */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div className="card p-5">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="font-semibold text-slate-900 dark:text-slate-100">Отели</h3>
+            <button className="btn-primary py-1.5 text-xs">
+              <Plus size={13} />
+              Добавить
+            </button>
+          </div>
+          <div className="space-y-3">
+            {MOCK_HOTELS.map(hotel => (
+              <div key={hotel.id} className="flex items-center gap-3 p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/40 transition-colors cursor-pointer">
+                <div className={cn(
+                  'w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold',
+                  hotel.isActive
+                    ? 'bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300'
+                    : 'bg-slate-100 dark:bg-slate-700 text-slate-500',
+                )}>
+                  {hotel.name.charAt(0)}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">{hotel.name}</p>
+                  <p className="text-xs text-slate-500 dark:text-slate-400">{hotel.address} · {hotel.roomCount} номеров</p>
+                </div>
+                <div className="flex items-center gap-2 shrink-0">
+                  <Badge className={PLAN_COLORS[hotel.plan]}>{PLAN_LABELS[hotel.plan]}</Badge>
+                  <div className={cn('w-2 h-2 rounded-full', hotel.isActive ? 'bg-emerald-500' : 'bg-slate-400')} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="card p-5">
+          <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-4">Статистика по тарифам</h3>
+          <div className="space-y-3">
+            {(['starter', 'pro', 'enterprise'] as const).map(plan => {
+              const count = MOCK_HOTELS.filter(h => h.plan === plan).length
+              const pct = Math.round((count / MOCK_HOTELS.length) * 100)
+              return (
+                <div key={plan}>
+                  <div className="flex items-center justify-between mb-1">
+                    <Badge className={PLAN_COLORS[plan]}>{PLAN_LABELS[plan]}</Badge>
+                    <span className="text-sm font-medium text-slate-700 dark:text-slate-300">{count} отелей ({pct}%)</span>
+                  </div>
+                  <div className="h-2 rounded-full bg-slate-200 dark:bg-slate-700">
+                    <div
+                      className="h-2 rounded-full bg-brand-500 transition-all"
+                      style={{ width: `${pct}%` }}
+                    />
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+
+          <div className="mt-6 pt-5 border-t border-slate-200 dark:border-slate-700">
+            <h4 className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">Пользователи</h4>
+            <div className="space-y-2">
+              {MOCK_USERS.map(u => (
+                <div key={u.id} className="flex items-center gap-3">
+                  <div className="w-8 h-8 rounded-full bg-brand-600 flex items-center justify-center text-white text-sm font-semibold shrink-0">
+                    {u.name.charAt(0)}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-slate-900 dark:text-slate-100">{u.name}</p>
+                    <p className="text-xs text-slate-500 dark:text-slate-400">{u.email}</p>
+                  </div>
+                  <Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300 text-[10px]">
+                    {u.role}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/ApiDocsPage.tsx
+++ b/src/pages/ApiDocsPage.tsx
@@ -0,0 +1,254 @@
+import { useState } from 'react'
+import { Copy, CheckCheck, ChevronDown, ChevronRight, Lock, Globe } from 'lucide-react'
+import { cn } from '../lib/utils'
+import type { ApiEndpoint } from '../types'
+
+const METHOD_COLORS: Record<string, string> = {
+  GET:    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
+  POST:   'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+  PATCH:  'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+  PUT:    'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+  DELETE: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+}
+
+const API_ENDPOINTS: ApiEndpoint[] = [
+  // Auth
+  { method: 'POST', path: '/auth/login',    summary: 'Авторизация',         tags: ['Auth'],     auth: false, requestBody: '{ "email": "string", "password": "string" }', response: '{ "token": "string", "user": {...} }' },
+  { method: 'POST', path: '/auth/refresh',  summary: 'Обновить токен',      tags: ['Auth'],     auth: true },
+  { method: 'POST', path: '/auth/logout',   summary: 'Выход',               tags: ['Auth'],     auth: true },
+
+  // Hotels
+  { method: 'GET',    path: '/hotels',                    summary: 'Список отелей',           tags: ['Hotels'],   auth: true, roles: ['super_admin'], response: '{ "data": Hotel[], "total": number }' },
+  { method: 'POST',   path: '/hotels',                    summary: 'Создать отель',            tags: ['Hotels'],   auth: true, roles: ['super_admin'] },
+  { method: 'GET',    path: '/hotels/:hotelId',           summary: 'Получить отель',           tags: ['Hotels'],   auth: true },
+  { method: 'PATCH',  path: '/hotels/:hotelId',           summary: 'Обновить отель',           tags: ['Hotels'],   auth: true, roles: ['super_admin', 'hotel_manager'] },
+  { method: 'DELETE', path: '/hotels/:hotelId',           summary: 'Удалить отель',            tags: ['Hotels'],   auth: true, roles: ['super_admin'] },
+
+  // Rooms
+  { method: 'GET',    path: '/hotels/:hotelId/rooms',              summary: 'Список номеров',     tags: ['Rooms'],    auth: true },
+  { method: 'POST',   path: '/hotels/:hotelId/rooms',              summary: 'Создать номер',      tags: ['Rooms'],    auth: true, roles: ['hotel_manager'] },
+  { method: 'PATCH',  path: '/hotels/:hotelId/rooms/:roomId',      summary: 'Обновить номер',     tags: ['Rooms'],    auth: true, roles: ['hotel_manager'] },
+  { method: 'DELETE', path: '/hotels/:hotelId/rooms/:roomId',      summary: 'Удалить номер',      tags: ['Rooms'],    auth: true, roles: ['hotel_manager'] },
+
+  // Bookings
+  { method: 'GET',    path: '/hotels/:hotelId/bookings',              summary: 'Список бронирований (с фильтрацией по датам)', tags: ['Bookings'], auth: true, response: '{ "data": Booking[], "total": number }' },
+  { method: 'POST',   path: '/hotels/:hotelId/bookings',              summary: 'Создать бронирование',                         tags: ['Bookings'], auth: true, requestBody: '{ "roomId": "string", "guestName": "string", "checkIn": "YYYY-MM-DD", "checkOut": "YYYY-MM-DD" }' },
+  { method: 'GET',    path: '/hotels/:hotelId/bookings/:bookingId',   summary: 'Получить бронирование',                        tags: ['Bookings'], auth: true },
+  { method: 'PATCH',  path: '/hotels/:hotelId/bookings/:bookingId',   summary: 'Обновить бронирование',                        tags: ['Bookings'], auth: true },
+  { method: 'DELETE', path: '/hotels/:hotelId/bookings/:bookingId',   summary: 'Отменить бронирование',                        tags: ['Bookings'], auth: true },
+
+  // Channels
+  { method: 'GET',   path: '/hotels/:hotelId/channels',                    summary: 'Список каналов',           tags: ['Channels'], auth: true },
+  { method: 'PATCH', path: '/hotels/:hotelId/channels/:channelId',         summary: 'Настроить канал',          tags: ['Channels'], auth: true, roles: ['hotel_manager'] },
+  { method: 'POST',  path: '/hotels/:hotelId/channels/:channelId/sync',    summary: 'Запустить синхронизацию',  tags: ['Channels'], auth: true, roles: ['hotel_manager'] },
+
+  // Housekeeping
+  { method: 'GET',   path: '/hotels/:hotelId/housekeeping/tasks',           summary: 'Список задач',      tags: ['Housekeeping'], auth: true },
+  { method: 'POST',  path: '/hotels/:hotelId/housekeeping/tasks',           summary: 'Создать задачу',    tags: ['Housekeeping'], auth: true },
+  { method: 'PATCH', path: '/hotels/:hotelId/housekeeping/tasks/:taskId',   summary: 'Обновить задачу',   tags: ['Housekeeping'], auth: true },
+
+  // Webhooks
+  { method: 'POST', path: '/webhooks/booking-com', summary: 'Webhook Booking.com', tags: ['Webhooks'], auth: false, description: 'Endpoint для получения событий от Booking.com' },
+  { method: 'POST', path: '/webhooks/airbnb',      summary: 'Webhook Airbnb',      tags: ['Webhooks'], auth: false },
+]
+
+const ALL_TAGS = [...new Set(API_ENDPOINTS.flatMap(e => e.tags))]
+
+export function ApiDocsPage() {
+  const [activeTag, setActiveTag] = useState<string>('Bookings')
+  const [expandedEndpoint, setExpandedEndpoint] = useState<string | null>(null)
+  const [copied, setCopied] = useState<string | null>(null)
+
+  const filtered = API_ENDPOINTS.filter(e => e.tags.includes(activeTag))
+
+  const copy = (text: string, key: string) => {
+    navigator.clipboard.writeText(text)
+    setCopied(key)
+    setTimeout(() => setCopied(null), 1500)
+  }
+
+  return (
+    <div className="p-4 md:p-6 max-w-5xl mx-auto space-y-5">
+      {/* Header */}
+      <div>
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-10 h-10 rounded-xl bg-brand-600 flex items-center justify-center">
+            <Globe size={18} className="text-white" />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">HotelSync API</h1>
+            <p className="text-sm text-slate-500 dark:text-slate-400">REST API v1.0 · Base URL: <code className="text-brand-600 dark:text-brand-400">https://api.hotelsync.io/v1</code></p>
+          </div>
+        </div>
+      </div>
+
+      {/* Auth info */}
+      <div className="card p-4 border-brand-200 dark:border-brand-800/50 bg-brand-50/50 dark:bg-brand-900/10">
+        <div className="flex gap-3">
+          <Lock size={16} className="text-brand-600 dark:text-brand-400 shrink-0 mt-0.5" />
+          <div className="space-y-1">
+            <p className="font-medium text-brand-800 dark:text-brand-300 text-sm">Аутентификация</p>
+            <p className="text-sm text-brand-700 dark:text-brand-400">
+              Все запросы (кроме <code>/auth/login</code> и webhooks) требуют заголовка:
+            </p>
+            <div className="flex items-center gap-2 mt-2">
+              <code className="text-xs bg-white dark:bg-slate-800 border border-brand-200 dark:border-brand-700 text-brand-700 dark:text-brand-300 px-3 py-1.5 rounded-lg flex-1">
+                Authorization: Bearer &lt;access_token&gt;
+              </code>
+              <button
+                onClick={() => copy('Authorization: Bearer <access_token>', 'auth')}
+                className="btn-ghost p-1.5 text-brand-600"
+              >
+                {copied === 'auth' ? <CheckCheck size={14} /> : <Copy size={14} />}
+              </button>
+            </div>
+            <p className="text-xs text-brand-600 dark:text-brand-400 mt-1">
+              Также требуется: <code>X-Hotel-Id: &lt;hotelId&gt;</code> для отельных запросов
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Tag nav */}
+      <div className="flex flex-wrap gap-1.5">
+        {ALL_TAGS.map(tag => (
+          <button
+            key={tag}
+            onClick={() => setActiveTag(tag)}
+            className={cn(
+              'px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
+              activeTag === tag
+                ? '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',
+            )}
+          >
+            {tag}
+            <span className="ml-1.5 text-xs opacity-60">
+              {API_ENDPOINTS.filter(e => e.tags.includes(tag)).length}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* Endpoints */}
+      <div className="space-y-2">
+        {filtered.map((endpoint, i) => {
+          const key = `${endpoint.method}-${endpoint.path}`
+          const isOpen = expandedEndpoint === key
+          return (
+            <div key={key} className="card overflow-hidden">
+              <button
+                onClick={() => setExpandedEndpoint(isOpen ? null : key)}
+                className="w-full flex items-center gap-3 px-4 py-3.5 text-left hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors"
+              >
+                <span className={cn('badge font-mono font-bold w-16 justify-center shrink-0', METHOD_COLORS[endpoint.method])}>
+                  {endpoint.method}
+                </span>
+                <code className="text-sm text-slate-700 dark:text-slate-300 flex-1">
+                  {endpoint.path}
+                </code>
+                <span className="text-sm text-slate-500 dark:text-slate-400 hidden sm:block">
+                  {endpoint.summary}
+                </span>
+                {!endpoint.auth && (
+                  <span className="badge bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400 text-[10px]">
+                    Public
+                  </span>
+                )}
+                {isOpen ? <ChevronDown size={14} className="text-slate-400 shrink-0" /> : <ChevronRight size={14} className="text-slate-400 shrink-0" />}
+              </button>
+
+              {isOpen && (
+                <div className="px-4 pb-4 pt-0 border-t border-slate-100 dark:border-slate-700 space-y-3 animate-fade-in">
+                  <p className="text-sm text-slate-600 dark:text-slate-400 pt-3">
+                    {endpoint.description ?? endpoint.summary}
+                  </p>
+
+                  {endpoint.roles && (
+                    <div>
+                      <p className="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-1.5">Доступные роли</p>
+                      <div className="flex gap-1.5">
+                        {endpoint.roles.map(r => (
+                          <span key={r} className="badge bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300">
+                            {r}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {endpoint.requestBody && (
+                    <div>
+                      <div className="flex items-center justify-between mb-1.5">
+                        <p className="text-xs font-semibold text-slate-500 dark:text-slate-400">Request Body</p>
+                        <button onClick={() => copy(endpoint.requestBody!, key + '-req')} className="btn-ghost p-1 text-xs gap-1">
+                          {copied === key + '-req' ? <CheckCheck size={11} /> : <Copy size={11} />}
+                          Копировать
+                        </button>
+                      </div>
+                      <pre className="text-xs bg-slate-900 dark:bg-slate-950 text-emerald-400 rounded-lg p-3 overflow-x-auto">
+                        {endpoint.requestBody}
+                      </pre>
+                    </div>
+                  )}
+
+                  {endpoint.response && (
+                    <div>
+                      <div className="flex items-center justify-between mb-1.5">
+                        <p className="text-xs font-semibold text-slate-500 dark:text-slate-400">Response 200</p>
+                        <button onClick={() => copy(endpoint.response!, key + '-res')} className="btn-ghost p-1 text-xs gap-1">
+                          {copied === key + '-res' ? <CheckCheck size={11} /> : <Copy size={11} />}
+                          Копировать
+                        </button>
+                      </div>
+                      <pre className="text-xs bg-slate-900 dark:bg-slate-950 text-blue-400 rounded-lg p-3 overflow-x-auto">
+                        {endpoint.response}
+                      </pre>
+                    </div>
+                  )}
+
+                  {/* Try it */}
+                  <div>
+                    <p className="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-1.5">cURL пример</p>
+                    <div className="flex items-start gap-2">
+                      <pre className="text-xs bg-slate-900 dark:bg-slate-950 text-slate-300 rounded-lg p-3 overflow-x-auto flex-1 whitespace-pre-wrap">
+{`curl -X ${endpoint.method} \\
+  https://api.hotelsync.io/v1${endpoint.path} \\${endpoint.auth ? `
+  -H "Authorization: Bearer <token>" \\
+  -H "X-Hotel-Id: <hotelId>" \\` : ''}
+  -H "Content-Type: application/json"`}
+                      </pre>
+                      <button
+                        onClick={() => copy(`curl -X ${endpoint.method} https://api.hotelsync.io/v1${endpoint.path}`, key + '-curl')}
+                        className="btn-ghost p-1.5 shrink-0"
+                      >
+                        {copied === key + '-curl' ? <CheckCheck size={13} /> : <Copy size={13} />}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Rate limits */}
+      <div className="card p-5">
+        <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-3">Лимиты запросов</h3>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
+          {[
+            { plan: 'Starter', limit: '1 000 / час', color: 'text-slate-600 dark:text-slate-400' },
+            { plan: 'Pro', limit: '10 000 / час', color: 'text-brand-600 dark:text-brand-400' },
+            { plan: 'Enterprise', limit: 'Неограничено', color: 'text-amber-600 dark:text-amber-400' },
+          ].map(r => (
+            <div key={r.plan} className="text-center p-3 rounded-lg bg-slate-50 dark:bg-slate-700/40">
+              <p className="font-bold text-slate-900 dark:text-slate-100">{r.plan}</p>
+              <p className={cn('font-semibold', r.color)}>{r.limit}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/BookingsPage.tsx
+++ b/src/pages/BookingsPage.tsx
@@ -0,0 +1,195 @@
+import { useState } from 'react'
+import { Search, Filter, Plus, ArrowUpDown } from 'lucide-react'
+import { MOCK_BOOKINGS, MOCK_ROOMS } from '../data/mockData'
+import type { Booking, BookingStatus } from '../types'
+import { cn, BOOKING_STATUS_BADGE, BOOKING_STATUS_LABELS, SOURCE_COLORS, SOURCE_LABELS, formatCurrency, nightsCount } from '../lib/utils'
+import { Badge } from '../components/ui/Badge'
+import { BookingModal } from '../components/bookings/BookingModal'
+import { BookingDetailPanel } from '../components/bookings/BookingDetailPanel'
+import { format, addDays } from 'date-fns'
+
+const STATUS_FILTERS: { label: string; value: BookingStatus | 'all' }[] = [
+  { label: 'Все', value: 'all' },
+  { label: 'Подтверждённые', value: 'confirmed' },
+  { label: 'Заселены', value: 'checked_in' },
+  { label: 'Запросы', value: 'inquiry' },
+  { label: 'Выехали', value: 'checked_out' },
+  { label: 'Отменены', value: 'cancelled' },
+]
+
+export function BookingsPage() {
+  const [bookings, setBookings] = useState<Booking[]>(MOCK_BOOKINGS)
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<BookingStatus | 'all'>('all')
+  const [selected, setSelected] = useState<Booking | null>(null)
+  const [showCreateModal, setShowCreateModal] = useState(false)
+
+  const filtered = bookings.filter(b => {
+    const matchSearch = search === '' ||
+      b.guestName.toLowerCase().includes(search.toLowerCase()) ||
+      b.guestEmail.toLowerCase().includes(search.toLowerCase()) ||
+      b.id.includes(search)
+    const matchStatus = statusFilter === 'all' || b.status === statusFilter
+    return matchSearch && matchStatus
+  })
+
+  const room = (id: string) => MOCK_ROOMS.find(r => r.id === id)
+
+  return (
+    <div className="p-4 md:p-6 space-y-4">
+      {/* 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">{filtered.length} из {bookings.length}</p>
+        </div>
+        <button
+          onClick={() => setShowCreateModal(true)}
+          className="btn-primary"
+        >
+          <Plus size={15} />
+          <span className="hidden sm:inline">Новое</span>
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-col sm:flex-row gap-3">
+        <div className="relative flex-1">
+          <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+          <input
+            type="text"
+            className="input pl-9"
+            placeholder="Поиск по гостю, email, ID..."
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+          />
+        </div>
+        <div className="flex gap-1.5 flex-wrap">
+          {STATUS_FILTERS.map(f => (
+            <button
+              key={f.value}
+              onClick={() => setStatusFilter(f.value)}
+              className={cn(
+                'px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
+                statusFilter === f.value
+                  ? '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',
+              )}
+            >
+              {f.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="card overflow-hidden">
+        <div className="overflow-x-auto">
+          <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-3 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map(b => {
+                const r = room(b.roomId)
+                const nights = nightsCount(b.checkIn, b.checkOut)
+                return (
+                  <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 cursor-pointer transition-colors"
+                    onClick={() => setSelected(b)}
+                  >
+                    <td className="px-4 py-3">
+                      <p className="font-medium text-slate-900 dark:text-slate-100">{b.guestName}</p>
+                      <p className="text-xs text-slate-500 dark:text-slate-400">{b.guestEmail}</p>
+                    </td>
+                    <td className="px-4 py-3">
+                      <p className="font-medium text-slate-900 dark:text-slate-100">
+                        {r ? `№${r.number}` : '—'}
+                      </p>
+                      <p className="text-xs text-slate-500 dark:text-slate-400">{r?.type}</p>
+                    </td>
+                    <td className="px-4 py-3 text-slate-700 dark:text-slate-300">
+                      {new Intl.DateTimeFormat('ru-RU', { day: 'numeric', month: 'short' }).format(new Date(b.checkIn))}
+                    </td>
+                    <td className="px-4 py-3 text-slate-700 dark:text-slate-300">
+                      <span>{new Intl.DateTimeFormat('ru-RU', { day: 'numeric', month: 'short' }).format(new Date(b.checkOut))}</span>
+                      <span className="ml-1.5 text-xs text-slate-400">{nights}н</span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <Badge className={BOOKING_STATUS_BADGE[b.status]}>
+                        {BOOKING_STATUS_LABELS[b.status]}
+                      </Badge>
+                    </td>
+                    <td className="px-4 py-3">
+                      <Badge className={SOURCE_COLORS[b.source]}>
+                        {SOURCE_LABELS[b.source]}
+                      </Badge>
+                    </td>
+                    <td className="px-4 py-3">
+                      <p className="font-semibold text-slate-900 dark:text-slate-100">
+                        {formatCurrency(b.totalAmount)}
+                      </p>
+                      {b.paidAmount < b.totalAmount && (
+                        <p className="text-xs text-red-500">
+                          -{formatCurrency(b.totalAmount - b.paidAmount)}
+                        </p>
+                      )}
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className="text-brand-600 dark:text-brand-400 text-xs font-medium">
+                        Открыть →
+                      </span>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+          {filtered.length === 0 && (
+            <div className="text-center py-12 text-slate-500 dark:text-slate-400">
+              Бронирования не найдены
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Create modal */}
+      {showCreateModal && (
+        <BookingModal
+          open
+          draft={{
+            roomId: MOCK_ROOMS[0].id,
+            checkIn: format(new Date(), 'yyyy-MM-dd'),
+            checkOut: format(addDays(new Date(), 1), 'yyyy-MM-dd'),
+          }}
+          rooms={MOCK_ROOMS}
+          onClose={() => setShowCreateModal(false)}
+          onSave={(data) => {
+            setBookings(prev => [...prev, data as Booking])
+            setShowCreateModal(false)
+          }}
+        />
+      )}
+
+      {/* Detail panel */}
+      {selected && (
+        <BookingDetailPanel
+          booking={selected}
+          room={room(selected.roomId)}
+          onClose={() => setSelected(null)}
+          onUpdate={(id, data) => {
+            setBookings(prev => prev.map(b => b.id === id ? { ...b, ...data } : b))
+            setSelected(null)
+          }}
+        />
+      )}
+    </div>
+  )
+}
--- a/src/pages/CalendarPage.tsx
+++ b/src/pages/CalendarPage.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react'
+import { BookingCalendar } from '../components/calendar/BookingCalendar'
+import { MOCK_ROOMS, MOCK_BOOKINGS } from '../data/mockData'
+import type { Booking } from '../types'
+
+export function CalendarPage() {
+  const [bookings, setBookings] = useState<Booking[]>(MOCK_BOOKINGS)
+
+  const handleCreate = (data: Partial<Booking>) => {
+    setBookings(prev => [...prev, data as Booking])
+  }
+
+  const handleUpdate = (id: string, data: Partial<Booking>) => {
+    setBookings(prev => prev.map(b => b.id === id ? { ...b, ...data } : b))
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-4 py-3 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shrink-0">
+        <h1 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
+          Шахматка бронирований
+        </h1>
+        <p className="text-sm text-slate-500 dark:text-slate-400">
+          Нажмите и потяните по ячейкам для создания бронирования
+        </p>
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <BookingCalendar
+          rooms={MOCK_ROOMS}
+          bookings={bookings}
+          onBookingCreate={handleCreate}
+          onBookingUpdate={handleUpdate}
+        />
+      </div>
+    </div>
+  )
+}
--- a/src/pages/ChannelsPage.tsx
+++ b/src/pages/ChannelsPage.tsx
@@ -0,0 +1,202 @@
+import { useState } from 'react'
+import { RefreshCw, CheckCircle2, XCircle, Clock, Globe, AlertTriangle } from 'lucide-react'
+import { MOCK_CHANNELS } from '../data/mockData'
+import type { Channel, SyncStatus } from '../types'
+import { cn } from '../lib/utils'
+import { Badge } from '../components/ui/Badge'
+
+const CHANNEL_ICONS: Record<string, string> = {
+  booking_com: '🔵',
+  airbnb:      '🔴',
+  expedia:     '🟡',
+  vrbo:        '🟢',
+}
+
+function SyncStatusBadge({ status }: { status: SyncStatus }) {
+  const map: Record<SyncStatus, { icon: React.ElementType; label: string; cls: string }> = {
+    idle:    { icon: Clock,         label: 'Не настроен', cls: 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300' },
+    syncing: { icon: RefreshCw,     label: 'Синхронизация', cls: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300' },
+    success: { icon: CheckCircle2,  label: 'Синхронизирован', cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300' },
+    error:   { icon: XCircle,       label: 'Ошибка', cls: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300' },
+  }
+  const { icon: Icon, label, cls } = map[status]
+  return (
+    <Badge className={cn(cls, 'gap-1')}>
+      <Icon size={10} className={status === 'syncing' ? 'animate-spin' : ''} />
+      {label}
+    </Badge>
+  )
+}
+
+export function ChannelsPage() {
+  const [channels, setChannels] = useState<Channel[]>(MOCK_CHANNELS)
+
+  const triggerSync = (id: string) => {
+    setChannels(prev => prev.map(c =>
+      c.id === id ? { ...c, lastSyncStatus: 'syncing' } : c,
+    ))
+    setTimeout(() => {
+      setChannels(prev => prev.map(c =>
+        c.id === id
+          ? { ...c, lastSyncStatus: 'success', lastSyncAt: new Date().toISOString(), bookingsImported: c.bookingsImported + Math.floor(Math.random() * 3) }
+          : c,
+      ))
+    }, 2000)
+  }
+
+  const toggleChannel = (id: string) => {
+    setChannels(prev => prev.map(c =>
+      c.id === id ? { ...c, isEnabled: !c.isEnabled } : c,
+    ))
+  }
+
+  const totalImported = channels.reduce((s, c) => s + c.bookingsImported, 0)
+  const activeCount = channels.filter(c => c.isEnabled).length
+
+  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">
+          Синхронизация с OTA площадками
+        </p>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        {[
+          { label: 'Активных каналов', value: activeCount, icon: Globe },
+          { label: 'Всего каналов', value: channels.length, icon: Globe },
+          { label: 'Импортировано броней', value: totalImported, icon: CheckCircle2 },
+          { label: 'Последняя синхронизация', value: 'Сегодня', icon: RefreshCw },
+        ].map(s => (
+          <div key={s.label} className="card p-4">
+            <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{s.value}</p>
+            <p className="text-sm text-slate-500 dark:text-slate-400">{s.label}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Channels */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {channels.map(channel => (
+          <ChannelCard
+            key={channel.id}
+            channel={channel}
+            onSync={() => triggerSync(channel.id)}
+            onToggle={() => toggleChannel(channel.id)}
+          />
+        ))}
+      </div>
+
+      {/* Info */}
+      <div className="card p-4 border-amber-200 dark:border-amber-800/50 bg-amber-50 dark:bg-amber-900/10">
+        <div className="flex gap-3">
+          <AlertTriangle size={18} className="text-amber-600 dark:text-amber-400 shrink-0 mt-0.5" />
+          <div>
+            <p className="font-medium text-amber-800 dark:text-amber-300">Демо-режим</p>
+            <p className="text-sm text-amber-700 dark:text-amber-400 mt-0.5">
+              В демо-режиме синхронизация имитируется. В продакшн-версии используется webhook-интеграция
+              с реальными API каналов через менеджер каналов (Staah, SiteMinder, HotelRunner и др.)
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ChannelCard({ channel, onSync, onToggle }: {
+  channel: Channel
+  onSync: () => void
+  onToggle: () => void
+}) {
+  const isSyncing = channel.lastSyncStatus === 'syncing'
+
+  return (
+    <div className={cn('card p-5 transition-all', !channel.isEnabled && 'opacity-60')}>
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className="w-11 h-11 rounded-xl bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-2xl">
+            {CHANNEL_ICONS[channel.name]}
+          </div>
+          <div>
+            <p className="font-semibold text-slate-900 dark:text-slate-100">{channel.displayName}</p>
+            <SyncStatusBadge status={channel.lastSyncStatus} />
+          </div>
+        </div>
+
+        {/* Toggle */}
+        <button
+          onClick={onToggle}
+          className={cn(
+            'relative w-11 h-6 rounded-full transition-colors',
+            channel.isEnabled ? 'bg-brand-600' : 'bg-slate-300 dark:bg-slate-600',
+          )}
+        >
+          <div className={cn(
+            'absolute top-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform',
+            channel.isEnabled ? 'left-[22px]' : 'left-0.5',
+          )} />
+        </button>
+      </div>
+
+      {channel.isEnabled && (
+        <div className="space-y-2.5">
+          <div className="grid grid-cols-2 gap-3 text-sm">
+            <div>
+              <p className="text-xs text-slate-500 dark:text-slate-400">Импортировано броней</p>
+              <p className="font-semibold text-slate-900 dark:text-slate-100">{channel.bookingsImported}</p>
+            </div>
+            <div>
+              <p className="text-xs text-slate-500 dark:text-slate-400">Последняя синхронизация</p>
+              <p className="font-semibold text-slate-900 dark:text-slate-100">
+                {channel.lastSyncAt
+                  ? new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit' }).format(new Date(channel.lastSyncAt))
+                  : '—'
+                }
+              </p>
+            </div>
+          </div>
+
+          {channel.mappings.length > 0 && (
+            <div>
+              <p className="text-xs text-slate-500 dark:text-slate-400 mb-1.5">Маппинг номеров ({channel.mappings.length})</p>
+              <div className="space-y-1">
+                {channel.mappings.slice(0, 2).map(m => (
+                  <div key={m.localRoomId} className="flex items-center justify-between text-xs">
+                    <span className="text-slate-600 dark:text-slate-400">№{
+                      // get room number from localRoomId
+                      m.localRoomId.replace('r', '')
+                    }</span>
+                    <span className="text-slate-400">→</span>
+                    <span className="text-slate-600 dark:text-slate-400 truncate max-w-32">{m.channelRoomName}</span>
+                  </div>
+                ))}
+                {channel.mappings.length > 2 && (
+                  <p className="text-xs text-slate-400">+{channel.mappings.length - 2} ещё</p>
+                )}
+              </div>
+            </div>
+          )}
+
+          <button
+            onClick={onSync}
+            disabled={isSyncing}
+            className="w-full btn-secondary text-xs py-2 justify-center gap-2"
+          >
+            <RefreshCw size={13} className={isSyncing ? 'animate-spin' : ''} />
+            {isSyncing ? 'Синхронизация...' : 'Синхронизировать сейчас'}
+          </button>
+        </div>
+      )}
+
+      {!channel.isEnabled && (
+        <p className="text-sm text-slate-500 dark:text-slate-400 text-center py-2">
+          Канал отключён. Включите для настройки интеграции.
+        </p>
+      )}
+    </div>
+  )
+}
--- a/src/pages/HousekeepingPage.tsx
+++ b/src/pages/HousekeepingPage.tsx
@@ -0,0 +1,181 @@
+import { useState } from 'react'
+import { CheckCircle2, Clock, AlertCircle, Sparkles, User } from 'lucide-react'
+import { MOCK_HK_TASKS } from '../data/mockData'
+import type { HousekeepingTask } from '../types'
+import { cn } from '../lib/utils'
+import { Badge } from '../components/ui/Badge'
+
+type Column = 'pending' | 'in_progress' | 'done'
+
+const COLUMNS: { id: Column; label: string; icon: React.ElementType; color: string }[] = [
+  { id: 'pending',     label: 'Ожидают',      icon: Clock,         color: 'text-amber-600 dark:text-amber-400' },
+  { id: 'in_progress', label: 'В процессе',   icon: Sparkles,      color: 'text-blue-600 dark:text-blue-400' },
+  { id: 'done',        label: 'Готово',        icon: CheckCircle2,  color: 'text-emerald-600 dark:text-emerald-400' },
+]
+
+const PRIORITY_COLORS = {
+  high:   'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+  normal: 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
+  low:    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+}
+
+const PRIORITY_LABELS = { high: 'Срочно', normal: 'Обычный', low: 'Низкий' }
+
+const TYPE_COLORS = {
+  cleaning:    'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+  inspection:  'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+  maintenance: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+}
+
+const TYPE_LABELS = {
+  cleaning: 'Уборка',
+  inspection: 'Проверка',
+  maintenance: 'Ремонт',
+}
+
+export function HousekeepingPage() {
+  const [tasks, setTasks] = useState<HousekeepingTask[]>(MOCK_HK_TASKS)
+
+  const updateStatus = (id: string, status: HousekeepingTask['status']) => {
+    setTasks(prev => prev.map(t =>
+      t.id === id
+        ? { ...t, status, completedAt: status === 'done' ? new Date().toISOString() : undefined }
+        : t,
+    ))
+  }
+
+  const total = tasks.length
+  const done = tasks.filter(t => t.status === 'done').length
+
+  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>
+        <div className="flex items-center gap-3 mt-1.5">
+          <div className="flex-1 bg-slate-200 dark:bg-slate-700 rounded-full h-2">
+            <div
+              className="h-2 rounded-full bg-emerald-500 transition-all duration-500"
+              style={{ width: `${(done / total) * 100}%` }}
+            />
+          </div>
+          <span className="text-sm text-slate-600 dark:text-slate-400 shrink-0">
+            {done} / {total} завершено
+          </span>
+        </div>
+      </div>
+
+      {/* Kanban columns */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {COLUMNS.map(col => {
+          const colTasks = tasks.filter(t => t.status === col.id)
+          const Icon = col.icon
+          return (
+            <div key={col.id} className="space-y-3">
+              {/* Column header */}
+              <div className="flex items-center gap-2">
+                <Icon size={16} className={col.color} />
+                <h3 className="font-semibold text-slate-700 dark:text-slate-300">
+                  {col.label}
+                </h3>
+                <span className="ml-auto text-xs font-bold px-2 py-0.5 rounded-full bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400">
+                  {colTasks.length}
+                </span>
+              </div>
+
+              {/* Cards */}
+              <div className="space-y-2.5">
+                {colTasks.map(task => (
+                  <TaskCard
+                    key={task.id}
+                    task={task}
+                    onStatusChange={updateStatus}
+                  />
+                ))}
+                {colTasks.length === 0 && (
+                  <div className="rounded-xl border-2 border-dashed border-slate-200 dark:border-slate-700 py-8 text-center">
+                    <p className="text-sm text-slate-400 dark:text-slate-500">Пусто</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function TaskCard({ task, onStatusChange }: {
+  task: HousekeepingTask
+  onStatusChange: (id: string, status: HousekeepingTask['status']) => void
+}) {
+  return (
+    <div className={cn(
+      'card p-3.5 space-y-2.5 transition-all',
+      task.status === 'done' && 'opacity-70',
+    )}>
+      <div className="flex items-center justify-between">
+        <span className="text-xl font-bold text-slate-900 dark:text-slate-100">
+          №{task.roomNumber}
+        </span>
+        <Badge className={PRIORITY_COLORS[task.priority]}>
+          {PRIORITY_LABELS[task.priority]}
+        </Badge>
+      </div>
+
+      <div className="flex gap-1.5 flex-wrap">
+        <Badge className={TYPE_COLORS[task.type]}>
+          {TYPE_LABELS[task.type]}
+        </Badge>
+      </div>
+
+      {task.notes && (
+        <p className="text-xs text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-700/40 rounded-lg p-2">
+          {task.notes}
+        </p>
+      )}
+
+      {task.assignedToName && (
+        <div className="flex items-center gap-1.5 text-xs text-slate-500 dark:text-slate-400">
+          <User size={11} />
+          {task.assignedToName}
+        </div>
+      )}
+
+      {task.completedAt && (
+        <p className="text-xs text-emerald-600 dark:text-emerald-400">
+          Завершено в {new Date(task.completedAt).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
+        </p>
+      )}
+
+      {/* Actions */}
+      <div className="flex gap-1.5 pt-1">
+        {task.status === 'pending' && (
+          <button
+            onClick={() => onStatusChange(task.id, 'in_progress')}
+            className="flex-1 text-xs py-1.5 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 font-medium hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors"
+          >
+            Начать
+          </button>
+        )}
+        {task.status === 'in_progress' && (
+          <button
+            onClick={() => onStatusChange(task.id, 'done')}
+            className="flex-1 text-xs py-1.5 rounded-lg bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300 font-medium hover:bg-emerald-100 dark:hover:bg-emerald-900/30 transition-colors"
+          >
+            Завершить
+          </button>
+        )}
+        {task.status === 'done' && (
+          <button
+            onClick={() => onStatusChange(task.id, 'pending')}
+            className="flex-1 text-xs py-1.5 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-400 font-medium hover:bg-slate-100 dark:hover:bg-slate-600 transition-colors"
+          >
+            Вернуть
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,207 @@
+import { useState } from 'react'
+import { Navigate, useNavigate } from 'react-router-dom'
+import { Hotel, Eye, EyeOff, Sun, Moon, AlertCircle } from 'lucide-react'
+import { useAuth } from '../contexts/AuthContext'
+import { useTheme } from '../contexts/ThemeContext'
+import { cn } from '../lib/utils'
+
+const DEMO_ACCOUNTS = [
+  { label: 'Менеджер отеля', email: 'manager@grand-palace.ru', role: 'hotel_manager' },
+  { label: 'Горничная', email: 'cleaner@grand-palace.ru', role: 'housekeeper' },
+  { label: 'Супер-администратор', email: 'admin@hotelsync.io', role: 'super_admin' },
+]
+
+export function LoginPage() {
+  const { user, login } = useAuth()
+  const { theme, toggle } = useTheme()
+  const navigate = useNavigate()
+
+  const [email, setEmail] = useState('manager@grand-palace.ru')
+  const [password, setPassword] = useState('demo')
+  const [showPass, setShowPass] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  if (user) {
+    if (user.role === 'super_admin') return <Navigate to="/admin" replace />
+    return <Navigate to="/grand-palace/calendar" replace />
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    const ok = await login(email, password)
+    setLoading(false)
+    if (!ok) {
+      setError('Неверный email или пароль')
+      return
+    }
+    // Redirect based on role
+    const user = DEMO_ACCOUNTS.find(a => a.email === email)
+    if (user?.role === 'super_admin') navigate('/admin')
+    else navigate('/grand-palace/calendar')
+  }
+
+  const fillDemo = (acc: typeof DEMO_ACCOUNTS[number]) => {
+    setEmail(acc.email)
+    setPassword('demo')
+    setError('')
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-brand-50 via-white to-slate-100 dark:from-slate-900 dark:via-slate-900 dark:to-brand-950 flex">
+      {/* Left panel — branding */}
+      <div className="hidden lg:flex flex-col justify-between w-1/2 bg-brand-600 dark:bg-brand-800 p-12">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
+            <Hotel size={22} className="text-white" />
+          </div>
+          <span className="text-2xl font-bold text-white">HotelSync</span>
+        </div>
+
+        <div>
+          <h1 className="text-4xl font-bold text-white leading-tight mb-4">
+            Современная PMS система<br />для вашего отеля
+          </h1>
+          <p className="text-brand-200 text-lg leading-relaxed">
+            Управляйте бронированиями, номерным фондом и уборкой в одном месте.
+            Синхронизация с Booking.com, Airbnb и другими каналами.
+          </p>
+
+          <div className="mt-10 grid grid-cols-3 gap-6">
+            {[
+              { value: '500+', label: 'Отелей' },
+              { value: '1M+', label: 'Бронирований' },
+              { value: '99.9%', label: 'Аптайм' },
+            ].map(s => (
+              <div key={s.label}>
+                <p className="text-3xl font-bold text-white">{s.value}</p>
+                <p className="text-brand-200 text-sm">{s.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <p className="text-brand-200 text-sm">
+          © 2026 HotelSync · SaaS PMS Platform
+        </p>
+      </div>
+
+      {/* Right panel — login form */}
+      <div className="flex-1 flex flex-col">
+        {/* Theme toggle */}
+        <div className="flex justify-end p-4">
+          <button onClick={toggle} className="btn-ghost p-2">
+            {theme === 'light' ? <Moon size={18} /> : <Sun size={18} />}
+          </button>
+        </div>
+
+        <div className="flex-1 flex items-center justify-center px-6">
+          <div className="w-full max-w-md">
+            {/* Mobile logo */}
+            <div className="lg:hidden flex items-center gap-2.5 mb-8">
+              <div className="w-9 h-9 rounded-xl bg-brand-600 flex items-center justify-center">
+                <Hotel size={18} className="text-white" />
+              </div>
+              <span className="text-xl font-bold text-slate-900 dark:text-slate-100">
+                Hotel<span className="text-brand-600">Next</span>
+              </span>
+            </div>
+
+            <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-1">
+              Добро пожаловать
+            </h2>
+            <p className="text-slate-500 dark:text-slate-400 mb-8">
+              Войдите в свой аккаунт для доступа к панели управления
+            </p>
+
+            {/* Demo account chips */}
+            <div className="mb-5">
+              <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-2">
+                Демо-аккаунты:
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {DEMO_ACCOUNTS.map(acc => (
+                  <button
+                    key={acc.email}
+                    onClick={() => fillDemo(acc)}
+                    className={cn(
+                      'px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
+                      email === acc.email
+                        ? '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',
+                    )}
+                  >
+                    {acc.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Form */}
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  className="input"
+                  placeholder="email@example.com"
+                  value={email}
+                  onChange={e => setEmail(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+                  Пароль
+                </label>
+                <div className="relative">
+                  <input
+                    type={showPass ? 'text' : 'password'}
+                    className="input pr-10"
+                    placeholder="••••••••"
+                    value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    required
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPass(v => !v)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                  >
+                    {showPass ? <EyeOff size={16} /> : <Eye size={16} />}
+                  </button>
+                </div>
+              </div>
+
+              {error && (
+                <div className="flex items-center gap-2 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm">
+                  <AlertCircle size={15} />
+                  {error}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="btn-primary w-full justify-center py-2.5"
+              >
+                {loading ? (
+                  <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                ) : 'Войти'}
+              </button>
+            </form>
+
+            <p className="text-center text-xs text-slate-400 dark:text-slate-500 mt-6">
+              Пароль для демо: <code className="bg-slate-100 dark:bg-slate-700 px-1.5 py-0.5 rounded">demo</code>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/RoomsPage.tsx
+++ b/src/pages/RoomsPage.tsx
@@ -0,0 +1,180 @@
+import { useState } from 'react'
+import { BedDouble, Users, Wifi, Plus, Search } from 'lucide-react'
+import { MOCK_ROOMS } from '../data/mockData'
+import type { Room } from '../types'
+import { cn, ROOM_STATUS_COLORS, ROOM_STATUS_LABELS, HK_STATUS_COLORS, HK_STATUS_LABELS, formatCurrency } from '../lib/utils'
+import { Badge } from '../components/ui/Badge'
+
+export function RoomsPage() {
+  const [search, setSearch] = useState('')
+  const [floorFilter, setFloorFilter] = useState<number | 'all'>('all')
+
+  const floors = [...new Set(MOCK_ROOMS.map(r => r.floor))].sort()
+
+  const filtered = MOCK_ROOMS.filter(r => {
+    const matchSearch = search === '' ||
+      r.number.includes(search) ||
+      r.type.toLowerCase().includes(search.toLowerCase()) ||
+      (r.name ?? '').toLowerCase().includes(search.toLowerCase())
+    const matchFloor = floorFilter === 'all' || r.floor === floorFilter
+    return matchSearch && matchFloor
+  })
+
+  const stats = {
+    available: MOCK_ROOMS.filter(r => r.status === 'available').length,
+    occupied: MOCK_ROOMS.filter(r => r.status === 'occupied').length,
+    maintenance: MOCK_ROOMS.filter(r => r.status === 'maintenance').length,
+    dirty: MOCK_ROOMS.filter(r => r.housekeepingStatus === 'dirty' || r.housekeepingStatus === 'cleaning').length,
+  }
+
+  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">{MOCK_ROOMS.length} номеров</p>
+        </div>
+        <button className="btn-primary">
+          <Plus size={15} />
+          <span className="hidden sm:inline">Добавить номер</span>
+        </button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        {[
+          { label: 'Свободных', value: stats.available, color: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-900/20' },
+          { label: 'Занятых', value: stats.occupied, color: 'text-brand-600 dark:text-brand-400', bg: 'bg-brand-50 dark:bg-brand-900/20' },
+          { label: 'На ремонте', value: stats.maintenance, color: 'text-orange-600 dark:text-orange-400', bg: 'bg-orange-50 dark:bg-orange-900/20' },
+          { label: 'Нужна уборка', value: stats.dirty, color: 'text-red-600 dark:text-red-400', bg: 'bg-red-50 dark:bg-red-900/20' },
+        ].map(s => (
+          <div key={s.label} className={cn('card p-4', s.bg, 'border-0')}>
+            <p className={cn('text-2xl font-bold', s.color)}>{s.value}</p>
+            <p className="text-sm text-slate-600 dark:text-slate-400">{s.label}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-3 flex-wrap">
+        <div className="relative flex-1 min-w-48">
+          <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+          <input
+            type="text"
+            className="input pl-9"
+            placeholder="Поиск номера..."
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+          />
+        </div>
+        <div className="flex gap-1.5">
+          <button
+            onClick={() => setFloorFilter('all')}
+            className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
+              floorFilter === 'all'
+                ? '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',
+            )}
+          >
+            Все этажи
+          </button>
+          {floors.map(f => (
+            <button
+              key={f}
+              onClick={() => setFloorFilter(f)}
+              className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
+                floorFilter === f
+                  ? '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',
+              )}
+            >
+              {f} эт.
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Room grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {filtered.map(room => (
+          <RoomCard key={room.id} room={room} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function RoomCard({ room }: { room: Room }) {
+  return (
+    <div className="card p-4 hover:shadow-card-hover transition-shadow cursor-pointer group">
+      <div className="flex items-start justify-between mb-3">
+        <div>
+          <div className="flex items-center gap-2">
+            <span className="text-xl font-bold text-slate-900 dark:text-slate-100">
+              {room.number}
+            </span>
+            {room.name && (
+              <span className="text-sm text-slate-500 dark:text-slate-400">{room.name}</span>
+            )}
+          </div>
+          <span className="text-sm text-slate-500 dark:text-slate-400">{room.type} · Этаж {room.floor}</span>
+        </div>
+        <div className={cn('w-3 h-3 rounded-full mt-1', {
+          'bg-emerald-500': room.status === 'available',
+          'bg-brand-500': room.status === 'occupied',
+          'bg-orange-500': room.status === 'maintenance',
+          'bg-slate-400': room.status === 'blocked',
+        })} />
+      </div>
+
+      <div className="flex flex-wrap gap-1.5 mb-3">
+        <Badge className={ROOM_STATUS_COLORS[room.status]}>
+          {ROOM_STATUS_LABELS[room.status]}
+        </Badge>
+        <Badge className={HK_STATUS_COLORS[room.housekeepingStatus]}>
+          {HK_STATUS_LABELS[room.housekeepingStatus]}
+        </Badge>
+      </div>
+
+      <div className="flex items-center gap-3 text-xs text-slate-500 dark:text-slate-400 mb-3">
+        <div className="flex items-center gap-1">
+          <BedDouble size={12} />
+          {room.bedType}
+        </div>
+        <div className="flex items-center gap-1">
+          <Users size={12} />
+          до {room.maxGuests}
+        </div>
+        {room.amenities.includes('Wi-Fi') && (
+          <div className="flex items-center gap-1">
+            <Wifi size={12} />
+            Wi-Fi
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between">
+        <span className="text-base font-bold text-slate-900 dark:text-slate-100">
+          {formatCurrency(room.baseRate)}
+        </span>
+        <span className="text-xs text-slate-400 dark:text-slate-500">/ночь</span>
+      </div>
+
+      {room.amenities.length > 0 && (
+        <div className="mt-2.5 pt-2.5 border-t border-slate-100 dark:border-slate-700">
+          <div className="flex flex-wrap gap-1">
+            {room.amenities.slice(0, 3).map(a => (
+              <span key={a} className="text-[10px] bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 px-1.5 py-0.5 rounded">
+                {a}
+              </span>
+            ))}
+            {room.amenities.length > 3 && (
+              <span className="text-[10px] text-slate-400 px-1">+{room.amenities.length - 3}</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -0,0 +1,257 @@
+import { useState } from 'react'
+import { Save, Building2, Bell, Shield, Globe, CreditCard } from 'lucide-react'
+import { MOCK_HOTELS } from '../data/mockData'
+import { cn, PLAN_COLORS, PLAN_LABELS } from '../lib/utils'
+import { Badge } from '../components/ui/Badge'
+import { useTheme } from '../contexts/ThemeContext'
+
+const SECTIONS = [
+  { id: 'general',    label: 'Основные',       icon: Building2 },
+  { id: 'theme',      label: 'Внешний вид',     icon: Globe },
+  { id: 'notify',     label: 'Уведомления',     icon: Bell },
+  { id: 'security',   label: 'Безопасность',    icon: Shield },
+  { id: 'billing',    label: 'Тарифный план',   icon: CreditCard },
+]
+
+export function SettingsPage() {
+  const [section, setSection] = useState('general')
+  const [saved, setSaved] = useState(false)
+  const hotel = MOCK_HOTELS[0]
+  const { theme, toggle } = useTheme()
+
+  const [form, setForm] = useState({
+    name: hotel.name,
+    address: hotel.address,
+    timezone: hotel.timezone,
+    currency: hotel.currency,
+    checkInTime: '14:00',
+    checkOutTime: '12:00',
+  })
+
+  const handleSave = () => {
+    setSaved(true)
+    setTimeout(() => setSaved(false), 2000)
+  }
+
+  return (
+    <div className="p-4 md:p-6 max-w-4xl mx-auto">
+      <div className="mb-5">
+        <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">{hotel.name}</p>
+      </div>
+
+      <div className="flex gap-5">
+        {/* Sidebar nav */}
+        <nav className="hidden md:flex flex-col gap-0.5 w-44 shrink-0">
+          {SECTIONS.map(s => {
+            const Icon = s.icon
+            return (
+              <button
+                key={s.id}
+                onClick={() => setSection(s.id)}
+                className={cn(
+                  'flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium text-left transition-colors',
+                  section === s.id
+                    ? 'bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300'
+                    : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800',
+                )}
+              >
+                <Icon size={15} />
+                {s.label}
+              </button>
+            )
+          })}
+        </nav>
+
+        {/* Mobile nav */}
+        <div className="md:hidden w-full mb-4">
+          <select
+            value={section}
+            onChange={e => setSection(e.target.value)}
+            className="input"
+          >
+            {SECTIONS.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
+          </select>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 card p-5 space-y-5">
+          {section === 'general' && (
+            <>
+              <h2 className="font-semibold text-slate-900 dark:text-slate-100">Основная информация</h2>
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Название отеля</label>
+                  <input type="text" className="input" value={form.name} onChange={e => setForm(p => ({ ...p, name: 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="text" className="input" value={form.address} onChange={e => setForm(p => ({ ...p, address: e.target.value }))} />
+                </div>
+                <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>
+                    <select className="input" value={form.timezone} onChange={e => setForm(p => ({ ...p, timezone: e.target.value }))}>
+                      <option value="Europe/Moscow">Москва (UTC+3)</option>
+                      <option value="Asia/Yekaterinburg">Екатеринбург (UTC+5)</option>
+                      <option value="Asia/Novosibirsk">Новосибирск (UTC+7)</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.currency} onChange={e => setForm(p => ({ ...p, currency: e.target.value }))}>
+                      <option value="RUB">₽ RUB</option>
+                      <option value="USD">$ USD</option>
+                      <option value="EUR">€ EUR</option>
+                    </select>
+                  </div>
+                </div>
+                <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="time" className="input" value={form.checkInTime} onChange={e => setForm(p => ({ ...p, checkInTime: 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="time" className="input" value={form.checkOutTime} onChange={e => setForm(p => ({ ...p, checkOutTime: e.target.value }))} />
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+
+          {section === 'theme' && (
+            <>
+              <h2 className="font-semibold text-slate-900 dark:text-slate-100">Внешний вид</h2>
+              <div className="space-y-4">
+                <div>
+                  <p className="text-sm font-medium text-slate-700 dark:text-slate-300 mb-3">Тема интерфейса</p>
+                  <div className="grid grid-cols-2 gap-3">
+                    {([
+                      { id: 'light', label: 'Светлая', preview: 'bg-white border-2' },
+                      { id: 'dark',  label: 'Тёмная',  preview: 'bg-slate-900 border-2' },
+                    ] as const).map(t => (
+                      <button
+                        key={t.id}
+                        onClick={() => { if (theme !== t.id) toggle() }}
+                        className={cn(
+                          'p-4 rounded-xl border-2 transition-all text-left',
+                          theme === t.id
+                            ? 'border-brand-500'
+                            : 'border-slate-200 dark:border-slate-600 hover:border-slate-300',
+                        )}
+                      >
+                        <div className={cn('w-full h-14 rounded-lg mb-2', t.id === 'light' ? 'bg-white border border-slate-200' : 'bg-slate-800')}>
+                          <div className={cn('h-3 w-3/4 rounded mx-2 mt-2', t.id === 'light' ? 'bg-slate-200' : 'bg-slate-600')} />
+                          <div className={cn('h-2 w-1/2 rounded mx-2 mt-1', t.id === 'light' ? 'bg-slate-100' : 'bg-slate-700')} />
+                        </div>
+                        <p className="text-sm font-medium text-slate-900 dark:text-slate-100">{t.label}</p>
+                        {theme === t.id && (
+                          <p className="text-xs text-brand-600 dark:text-brand-400">Активна</p>
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+
+          {section === 'notify' && (
+            <>
+              <h2 className="font-semibold text-slate-900 dark:text-slate-100">Уведомления</h2>
+              <div className="space-y-3">
+                {[
+                  { label: 'Новые бронирования', sub: 'Email при создании нового бронирования' },
+                  { label: 'Отмены', sub: 'Email при отмене бронирования' },
+                  { label: 'Ошибки синхронизации каналов', sub: 'Уведомление при сбое синхронизации' },
+                  { label: 'Ежедневный отчёт', sub: 'Сводка загрузки на день в 8:00' },
+                ].map((n, i) => (
+                  <div key={i} className="flex items-center justify-between p-3 rounded-lg bg-slate-50 dark:bg-slate-700/40">
+                    <div>
+                      <p className="text-sm font-medium text-slate-900 dark:text-slate-100">{n.label}</p>
+                      <p className="text-xs text-slate-500 dark:text-slate-400">{n.sub}</p>
+                    </div>
+                    <button className="relative w-11 h-6 rounded-full bg-brand-600">
+                      <div className="absolute top-0.5 left-[22px] w-5 h-5 rounded-full bg-white shadow-sm" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+
+          {section === 'security' && (
+            <>
+              <h2 className="font-semibold text-slate-900 dark:text-slate-100">Безопасность</h2>
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Текущий пароль</label>
+                  <input type="password" className="input" placeholder="••••••••" />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Новый пароль</label>
+                  <input type="password" className="input" placeholder="••••••••" />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Подтверждение</label>
+                  <input type="password" className="input" placeholder="••••••••" />
+                </div>
+              </div>
+            </>
+          )}
+
+          {section === 'billing' && (
+            <>
+              <h2 className="font-semibold text-slate-900 dark:text-slate-100">Тарифный план</h2>
+              <div className="p-4 rounded-xl bg-slate-50 dark:bg-slate-700/40 flex items-center justify-between mb-4">
+                <div>
+                  <p className="text-sm text-slate-500 dark:text-slate-400">Текущий план</p>
+                  <div className="flex items-center gap-2 mt-1">
+                    <Badge className={PLAN_COLORS[hotel.plan]}>
+                      {PLAN_LABELS[hotel.plan]}
+                    </Badge>
+                  </div>
+                </div>
+                <button className="btn-primary">Улучшить план</button>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                {([
+                  { plan: 'starter', price: '990 ₽/мес', rooms: '10 номеров', channels: '1 канал', support: 'Email' },
+                  { plan: 'pro',     price: '3 490 ₽/мес', rooms: 'До 50 номеров', channels: '5 каналов', support: 'Чат + Email' },
+                  { plan: 'enterprise', price: 'Договорная', rooms: 'Неограничено', channels: 'Все каналы', support: 'Выделенный менеджер' },
+                ] as const).map(p => (
+                  <div key={p.plan} className={cn(
+                    'p-4 rounded-xl border-2 transition-all',
+                    hotel.plan === p.plan ? 'border-brand-500 bg-brand-50/50 dark:bg-brand-900/10' : 'border-slate-200 dark:border-slate-600',
+                  )}>
+                    <div className="flex items-center justify-between mb-2">
+                      <Badge className={PLAN_COLORS[p.plan]}>{PLAN_LABELS[p.plan]}</Badge>
+                      {hotel.plan === p.plan && <span className="text-xs text-brand-600 dark:text-brand-400 font-medium">Текущий</span>}
+                    </div>
+                    <p className="text-lg font-bold text-slate-900 dark:text-slate-100 mb-3">{p.price}</p>
+                    <ul className="space-y-1 text-xs text-slate-600 dark:text-slate-400">
+                      <li>✓ {p.rooms}</li>
+                      <li>✓ {p.channels}</li>
+                      <li>✓ {p.support}</li>
+                    </ul>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+
+          {/* Save button */}
+          {section !== 'billing' && section !== 'theme' && (
+            <div className="pt-2 flex justify-end">
+              <button onClick={handleSave} className="btn-primary">
+                <Save size={14} />
+                {saved ? 'Сохранено!' : 'Сохранить'}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -0,0 +1,167 @@
+// ─── Auth ────────────────────────────────────────────────────────────────────
+
+export type Role = 'super_admin' | 'hotel_manager' | 'housekeeper'
+
+export interface User {
+  id: string
+  email: string
+  name: string
+  role: Role
+  hotelId: string | null
+  avatarUrl?: string
+}
+
+export interface AuthSession {
+  user: User
+  token: string
+}
+
+// ─── Hotel ───────────────────────────────────────────────────────────────────
+
+export type HotelPlan = 'starter' | 'pro' | 'enterprise'
+
+export interface Hotel {
+  id: string
+  name: string
+  slug: string
+  address: string
+  timezone: string
+  currency: string
+  logoUrl?: string
+  plan: HotelPlan
+  isActive: boolean
+  roomCount: number
+  createdAt: string
+}
+
+// ─── Room ────────────────────────────────────────────────────────────────────
+
+export type RoomStatus = 'available' | 'occupied' | 'maintenance' | 'blocked'
+export type HousekeepingStatus = 'clean' | 'dirty' | 'cleaning' | 'inspect'
+export type BedType = 'single' | 'double' | 'queen' | 'king' | 'twin'
+
+export interface Room {
+  id: string
+  hotelId: string
+  number: string
+  name?: string
+  floor: number
+  type: string
+  bedType: BedType
+  maxGuests: number
+  baseRate: number
+  status: RoomStatus
+  housekeepingStatus: HousekeepingStatus
+  amenities: string[]
+  sortOrder: number
+}
+
+// ─── Guest ───────────────────────────────────────────────────────────────────
+
+export interface Guest {
+  id: string
+  hotelId: string
+  firstName: string
+  lastName: string
+  email: string
+  phone?: string
+  nationality?: string
+}
+
+// ─── Booking ─────────────────────────────────────────────────────────────────
+
+export type BookingStatus =
+  | 'inquiry'
+  | 'confirmed'
+  | 'checked_in'
+  | 'checked_out'
+  | 'cancelled'
+  | 'no_show'
+
+export type BookingSource =
+  | 'direct'
+  | 'booking_com'
+  | 'airbnb'
+  | 'expedia'
+  | 'other'
+
+export interface Booking {
+  id: string
+  hotelId: string
+  roomId: string
+  guestId: string
+  guestName: string
+  guestEmail: string
+  checkIn: string   // ISO date YYYY-MM-DD
+  checkOut: string  // ISO date YYYY-MM-DD
+  status: BookingStatus
+  source: BookingSource
+  channelBookingId?: string
+  totalAmount: number
+  paidAmount: number
+  adults: number
+  children: number
+  notes?: string
+  createdAt: string
+}
+
+export interface DraftBooking {
+  roomId: string
+  checkIn: string
+  checkOut: string
+}
+
+// ─── Channel ─────────────────────────────────────────────────────────────────
+
+export type ChannelName = 'booking_com' | 'airbnb' | 'expedia' | 'vrbo'
+export type SyncStatus = 'idle' | 'syncing' | 'success' | 'error'
+
+export interface ChannelMapping {
+  localRoomId: string
+  channelRoomId: string
+  channelRoomName: string
+}
+
+export interface Channel {
+  id: string
+  hotelId: string
+  name: ChannelName
+  displayName: string
+  isEnabled: boolean
+  lastSyncAt: string | null
+  lastSyncStatus: SyncStatus
+  lastSyncError?: string
+  bookingsImported: number
+  mappings: ChannelMapping[]
+}
+
+// ─── Housekeeping ─────────────────────────────────────────────────────────────
+
+export interface HousekeepingTask {
+  id: string
+  hotelId: string
+  roomId: string
+  roomNumber: string
+  assignedToId?: string
+  assignedToName?: string
+  priority: 'low' | 'normal' | 'high'
+  status: 'pending' | 'in_progress' | 'done'
+  notes?: string
+  dueDate: string
+  completedAt?: string
+  type: 'cleaning' | 'inspection' | 'maintenance'
+}
+
+// ─── API Docs ─────────────────────────────────────────────────────────────────
+
+export interface ApiEndpoint {
+  method: 'GET' | 'POST' | 'PATCH' | 'DELETE' | 'PUT'
+  path: string
+  summary: string
+  description?: string
+  tags: string[]
+  auth: boolean
+  roles?: Role[]
+  requestBody?: string
+  response?: string
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,50 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  darkMode: 'class',
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50:  '#eef2ff',
+          100: '#e0e7ff',
+          200: '#c7d2fe',
+          300: '#a5b4fc',
+          400: '#818cf8',
+          500: '#6366f1',
+          600: '#4f46e5',
+          700: '#4338ca',
+          800: '#3730a3',
+          900: '#312e81',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      boxShadow: {
+        'card': '0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07)',
+        'card-hover': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      },
+      animation: {
+        'slide-in': 'slideIn 0.2s ease-out',
+        'fade-in': 'fadeIn 0.15s ease-out',
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      },
+      keyframes: {
+        slideIn: {
+          from: { transform: 'translateX(-100%)' },
+          to:   { transform: 'translateX(0)' },
+        },
+        fadeIn: {
+          from: { opacity: '0', transform: 'translateY(4px)' },
+          to:   { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
+})