Roof Lounge — Telegram Mini App
Рабочий скелет продукта из roof-lounge-app-architecture.md (лежит в проекте Roof Lounge): операционка персонала (смены, поломки, задачи), QR-сценарии гостя за столом и модуль вкусового профиля/миксов — то, что не покрывает Quick Resto.
Что уже готово
apps/miniapp — Telegram Mini App (React + Vite + TS). Все экраны работают на моковых данных в памяти (src/data/seed.ts) — приложение можно открыть и пройти все сценарии прямо сейчас, без единой настройки.apps/bot — скелет Telegram-бота (grammY): команда /start открывает мини-апп, плюс подписка на новые QR-вызовы через Supabase Realtime с уведомлением персоналу в чат.supabase/migrations/0001_init.sql — SQL-схема БД: гости, справочник вкусов, миксы, состав миксов, оценки, столы, QR-вызовы, лист ожидания, потерянные вещи, смены, поломки, задачи.
Что показывает прототип
В приложении две роли — Сотрудник (единый кабинет для любого сотрудника: мастер и официант — это один человек) и Руководитель. Переключатель наверху экрана переключает их вручную (демо-заглушка на одном устройстве), в реальной эксплуатации сотрудник будет видеть только свой кабинет автоматически, по Telegram-аккаунту, без выбора.
Сотрудник:
- Зарплата (домашний экран): карточка «К выплате» (= зарплата + премии − штрафы − выплачено) + плитки Зарплата/Выплачено/Штрафы/Премии, ниже разбивка по сменам сгруппированная по месяцу с итогом за месяц (выплаты идут не по сменам, а за период, не по каждой смене отдельно).
- Гости: поиск гостя → карточка (вкусовой профиль: шкалы предпочтений, средняя крепость, любимые миксы) → история миксов → «Собрать микс →» (бренд → вкус → доли в % → оформление).
- Смена: чек-лист открытия/закрытия, передача смены заметкой.
- Вызовы: лента QR-вызовов со столов, реакция и время закрытия — та же лента, что видит руководитель.
- Ещё → хаб со ссылками:
- Профиль — фото (меняется тапом); телефон (придёт из Telegram, когда подключим шаринг контакта — сейчас заглушка), почта и медкнижка (номер + дата «действует до», с предупреждением при истечении) — заполняет руководитель, сотрудник не редактирует; стаж считается автоматически; модель ЗП — у каждого своя: либо фиксированная ставка за смену, либо процент от выручки.
- График смен — переключатель Календарь/Список: календарь текущего месяца с отметками смен, и обычный список.
- Штрафы и премии — лента начислений + форма добавления (в проде — доступ только руководителю, см. комментарий в коде).
- Проблемы — фиксация поломки, статус, сколько дней открыта.
- Задачи — постановка и отметка выполнения.
- База знаний — по категориям: чек-листы, касса, где что лежит, тех карты, меню и цены, штрафная сетка, свет и вода, вентиляция, ЧС, охрана, важные номера, генеральная уборка. Сейчас статьи — заглушки, наполняются реальным контентом отдельно.
Руководитель:
- Сводка: счётчики + автоматические предупреждения (пропущенный чек-лист, зависшая проблема, вызов без реакции).
- Вызовы: лента QR-вызовов со столов, время реакции.
Гостевой QR-экран (/table/:token, отдельный маршрут без нижней навигации): «позвать сотрудника» / «попросить счёт» / «нужна помощь» / «оставил вещь».
Личный кабинет сотрудника (зарплата, профиль, график, штрафы/премии, база знаний) пока работает только на моках — под эти сущности ещё нет таблиц в Supabase, это следующий шаг после того, как определимся с точной моделью ЗП и наполнением базы знаний.
Как запустить локально
cd apps/miniapp
npm install
npm run dev
Откроется на http://localhost:5173. Вне Telegram (обычный браузер) SDK деградирует в заглушку — вёрстка и все сценарии работают, просто без реальных Telegram-данных пользователя.
Гостевой экран: http://localhost:5173/table/table-7 (номер стола зашит в токен для демо).
Подключение к Supabase — уже сделано в коде
apps/miniapp/src/data/repo.ts умеет работать в двух режимах:
- без Supabase (переменные окружения не заданы) — как и раньше, всё крутится на моках из
seed.ts, ничего настраивать не нужно;
- с Supabase — при старте (
initData() в main.tsx) сторы заполняются реальными данными, все действия (создать микс, оценить, вызвать официанта, открыть/закрыть смену, завести задачу и т.д.) синхронно обновляют экран и в фоне пишут то же самое в базу; изменения от других устройств прилетают через Supabase Realtime.
Ограничение текущей версии: авторизации персонала через Telegram ещё нет, поэтому все действия "от сотрудника" в базе записываются на один служебный профиль (см. DEMO_STAFF_ID в repo.ts) — это техдолг, который снимется вместе с реальной авторизацией.
Что нужно от тебя, чтобы включить это
- Проект в Supabase (supabase.com, есть бесплатный тариф) — после создания:
- выполнить
supabase/migrations/0001_init.sql, затем 0002_shift_photos.sql (через SQL Editor в дашборде или Supabase CLI) — второй файл создаёт Storage-бакет shift-photos и служебную таблицу shift_photo_uploads для пересылки фото открытия/закрытия смены (см. ниже);
- взять
Project URL и anon public key → в apps/miniapp/.env (см. .env.example) — как только они заданы, приложение само переключится в режим реальных данных;
- взять
service_role key → в apps/bot/.env (см. apps/bot/.env.example) — этот ключ не должен попасть в мини-апп/фронтенд.
- Важно про RLS: миграция
0001 включает Row Level Security на ключевых таблицах, но политик пока нет (см. комментарий в конце файла) — с анонимным ключом без политик Supabase будет отклонять запросы. Для пилота на одном заведении проще всего временно отключить RLS на этих таблицах (alter table ... disable row level security; в SQL Editor) и вернуться к нормальным политикам перед тем, как в приложении появится настоящая авторизация гостей/персонала.
- Токен Telegram-бота от @BotFather (
/newbot, если бота ещё нет) → BOT_TOKEN в apps/bot/.env.
- Публичный URL мини-аппа после деплоя (см. ниже) →
MINI_APP_URL в apps/bot/.env, и туда же указать этот URL в настройках бота через @BotFather (/mybots → Bot Settings → Menu Button или Mini App).
- ID чата персонала (группа в Telegram, куда должны падать уведомления о QR-вызовах) →
STAFF_CHAT_ID. Опционально: отдельный SHIFT_PHOTOS_CHAT_ID, если фото открытия/закрытия смены должны падать не в общий чат персонала, а руководителю лично или в отдельный чат — без него используется STAFF_CHAT_ID.
- Статус смены из Quick Resto (
apps/bot/src/quickresto.ts) — вместо ручной кнопки "Открыть/закрыть смену" статус берётся из того, что сотрудник вошёл по ПИН-коду на терминале в заведении. В apps/bot/.env задать QR_LOGIN/QR_PASSWORD (логин/пароль от бэк-офиса hu554.quickresto.ru, тот же, под которым заходишь в веб-панель); без них интеграция просто не запускается, всё остальное продолжает работать как раньше. Опционально: QR_HOST (по умолчанию hu554.quickresto.ru), / (часы работы, в которые вообще имеет смысл опрашивать — по умолчанию 10..8, диапазон через полночь, с запасом на продления вечера до 6-7 утра), (по умолчанию 90 секунд). Подробности механики (какие эндпоинты, как определяется "смена открыта", почему это опрос, а не вебхук) — в в проекте Roof Lounge.
Фото смены никогда не хранится: миниапп загружает снимок в Storage-бакет shift-photos, бот (apps/bot) подхватывает его через Supabase Realtime, пересылает в Telegram и сразу удаляет и файл, и служебную запись — без запущенного бота фото просто зависнет в бакете до следующего запуска (не страшно, но лучше не оставлять бота выключенным надолго).
Деплой (ориентир, см. раздел 3 архитектурного документа)
- apps/miniapp → Vercel (или Netlify):
npm run build, раздать dist/. Важно: настроить SPA-фолбэк (все пути → index.html), иначе прямые ссылки вида /table/table-7 из QR-кодов будут отдавать 404 — на Vercel это rewrites в vercel.json, на Netlify — _redirects.
- apps/bot → Railway (или любой сервис с постоянным процессом — боту нужен long-polling или webhook, статический хостинг не подойдёт).
- QR-коды на столах — каждый ведёт на
https://t.me/<bot_username>/<app_name>?startapp=table_<N>, где <N> — номер стола (генерация самих QR-картинок — отдельный маленький скрипт, не входит в этот скелет).
Структура репозитория
apps/
miniapp/ — Telegram Mini App (гость, персонал, руководитель)
bot/ — Telegram-бот (grammY) + уведомления персоналу
supabase/
migrations/ — SQL-схема БД
