RESTOFLOW — Мейрамханаларға арналған QR-меню және тапсырыс жүйесі

Қазақстандағы мейрамханалар мен кафелерге арналған заманауи SaaS платформасы

📖 Мазмұны

Жоба туралы
Демо
Мүмкіндіктер
Технологиялық стек
Орнату
Жоба құрылымы
API құжаттамасы
Дерекқор схемасы
Деплой
Үлес қосу
Лицензия

🎯 Жоба туралы

RESTOFLOW — мейрамханалар, кафелер және қоғамдық тамақтану орындарына арналған толық функционалды SaaS платформасы.

Қандай мәселелерді шешеді?

Мәселе	RESTOFLOW шешімі
Қағаз меню ескіреді, баспа шығындары	QR код арқылы цифрлық мәзір
Даяшылар күтуі, тапсырыс қабылдау қателіктері	Клиенттердің өзі тапсырыс береді
Тапсырыстарды қадағалау қиындығы	Real-time тапсырыс панелі
Сатылым аналитикасының жетіспеуі	Күнделікті статистика дашбордта
Қымбат POS жүйелері	Бұлтқа негізделген SaaS шешім

Қолдану сценарийлері

👨‍🍳 Мейрамхана иесі → Admin панелі → Мәзірді басқару, тапсырыстарды қабылдау
👨‍💼 Менеджер → Dashboard → Күнделікті сатылымды бақылау
🍽️ Клиент → QR код сканерлеу → Мәзірді көру → Тапсырыс беру

🌐 Демо

Интерфейс	Сілтеме	Сипаттама
Admin панелі	restoflow-saas.vercel.app/admin	Google арқылы кіру
Қоғамдық мәзір	restoflow-saas.vercel.app/menu/{slug}	QR код арқылы ашылады

Тест аккаунты

Google OAuth арқылы кез келген Google аккаунтпен кіруге болады. Бірінші кіргенде onboarding wizard арқылы мейрамхана құрылады.

✨ Мүмкіндіктер

🏢 Admin панелі

Мүмкіндік	Сипаттама
Dashboard	Бүгінгі табыс, белсенді тапсырыстар, қонақтар саны, орташа чек
Сағаттық график	Сатылымның сағат бойынша динамикасы (Recharts)
Санат бойынша сатылым	Қай санаттағы тағамдар көп сатылады
Тапсырыстар	Real-time тапсырыс тізімі (күтуде → дайындалуда → дайын → берілді)
Мәзір басқару	Тағамдарды қосу/өзгерту/жою, суреттерді жүктеу
Санаттар	Мәзір санаттарын құру және реттеу
QR код генераторы	Үстелдерге арналған QR кодтар (1-20 үстел)
Баптаулар	Мейрамхана аты, сервис ақысы (0-25%)
Onboarding	Бірінші кірген пайдаланушыларға интерактивті тур

📱 Қоғамдық мәзір (клиенттерге)

Мүмкіндік	Сипаттама
QR код арқылы кіру	Қосымша жүктеудің қажеті жоқ
Адаптивті дизайн	Mobile-first, барлық құрылғыларда жұмыс істейді
Санаттар бойынша сүзу	Тағамдарды жылдам табу
Іздеу	Тағам атауы бойынша іздеу
Себет	Тағамдарды қосу, санын өзгерту
Сервис ақысы	Автоматты есептеу (мейрамхана баптауына сәйкес)
Тапсырыс беру	Бір батырмамен асханаға жіберу
Lazy loading	Суреттер жүктелу кезінде оптимизацияланған

🔐 Аутентификация

Мүмкіндік	Сипаттама
Google OAuth	Бірінші ретті таңдау
Account chooser	Әрқашан аккаунт таңдау терезесі көрінеді
Email/Password	Қосымша опция (admin үшін)
RLS политикасы	Supabase Row Level Security

🛠️ Технологиялық стек

Frontend

Технология	Нұсқа	Мақсаты
React	19.2.3	UI компоненттері
TypeScript	5.8.2	Типтік қауіпсіздік
Vite	6.2.0	Build құралы, HMR
Tailwind CSS	4.1.18	Стильдер
Lucide React	0.562.0	Иконкалар
Recharts	3.6.0	Графиктер
QRCode	1.5.4	QR код генерациясы

Backend & Database

Технология	Мақсаты
Supabase	PostgreSQL дерекқоры + Auth + Realtime
Supabase Auth	Google OAuth, Email/Password
Supabase Realtime	Тапсырыстардың live жаңаруы
ImgBB API	Сурет хостинг

DevOps

Құрал	Мақсаты
Vercel	Хостинг және CI/CD
GitHub Actions	Автоматтандырылған тексерулер

🚀 Орнату

Қажетті құралдар

Node.js 18+
npm немесе yarn
Supabase жобасы
Google Cloud Console (OAuth үшін)
ImgBB API кілті

1. Репозиторийді клондау

git clone https://github.com/Azamaperdeev05/restoflow-saas.git
cd restoflow-saas

2. Тәуелділіктерді орнату

npm install

3. Environment variables

.env файлын құрыңыз:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

4. Supabase дерекқорын баптау

database.sql файлындағы SQL скриптін Supabase SQL Editor-да іске қосыңыз.

5. Google OAuth баптау

GOOGLE_AUTH_SETUP.md нұсқаулығын қараңыз.

6. Іске қосу

# Development режимі
npm run dev

# Production build
npm run build

# Preview
npm run preview

📁 Жоба құрылымы

restoflow-saas/
├── public/                    # Статикалық файлдар
│   ├── logo.png              # Логотип
│   ├── R.png                 # Favicon
│   ├── terms.html            # Қызмет көрсету ережелері
│   └── privacy.html          # Құпиялық саясаты
│
├── components/
│   ├── admin/                # Admin панелі компоненттері
│   │   ├── Dashboard.tsx     # Бақылау тақтасы
│   │   ├── Orders.tsx        # Тапсырыстар (responsive table/cards)
│   │   ├── MenuManager.tsx   # Мәзір басқару
│   │   ├── Categories.tsx    # Санаттар
│   │   ├── Settings.tsx      # Баптаулар
│   │   ├── LoginPage.tsx     # Кіру беті (Google + Email)
│   │   └── OnboardingWizard.tsx  # Onboarding wizard
│   │
│   ├── public/               # Қоғамдық мәзір
│   │   ├── MenuPage.tsx      # Мәзір (responsive grid)
│   │   └── CartDrawer.tsx    # Себет drawer
│   │
│   ├── layout/               # Layout компоненттері
│   │   ├── AdminLayout.tsx   # Admin sidebar + onboarding tour
│   │   └── PublicLayout.tsx  # Public мәзір layout
│   │
│   └── ui/                   # Қайта қолданылатын UI
│       ├── Button.tsx
│       ├── Input.tsx
│       ├── Modal.tsx
│       ├── Toast.tsx
│       ├── MenuQRCode.tsx
│       ├── OnboardingIntroModal.tsx
│       └── OnboardingTour.tsx
│
├── hooks/                    # Custom React hooks
│   ├── useAuth.ts           # (deprecated, see contexts)
│   ├── useDashboard.ts      # Dashboard статистикасы
│   ├── useMenu.ts           # Мәзір деректері
│   ├── useOrders.ts         # Тапсырыстар
│   ├── useRestaurant.ts     # Мейрамхана деректері
│   └── useOnboarding.tsx    # Onboarding state management
│
├── contexts/
│   └── AuthContext.tsx      # Аутентификация контексті
│
├── lib/
│   ├── supabase.ts          # Supabase клиенті
│   └── storage.ts           # ImgBB сурет жүктеу
│
├── App.tsx                   # Негізгі routing
├── types.ts                  # TypeScript типтері
├── index.tsx                 # Entry point
├── index.css                 # Global стильдер
│
├── database.sql              # PostgreSQL схемасы
├── vercel.json               # Vercel конфигурациясы
└── package.json

📡 API құжаттамасы

RESTOFLOW Supabase клиентін тікелей қолданады. Негізгі операциялар:

Restaurants

// Мейрамхана алу
const { data } = await supabase
  .from('restaurants')
  .select('*')
  .eq('owner_id', userId)
  .single();

// Мейрамхана құру
const { data } = await supabase
  .from('restaurants')
  .insert({ owner_id: userId, name: 'Мейрамхана аты' })
  .select('id, slug')
  .single();

Products (Мәзір)

// Барлық тағамдар
const { data } = await supabase
  .from('products')
  .select('*, categories(name)')
  .eq('restaurant_id', restaurantId)
  .eq('is_available', true);

// Тағам қосу
const { data } = await supabase
  .from('products')
  .insert({
    restaurant_id,
    category_id,
    name: 'Бургер',
    price: 2500,
    image_url: 'https://...'
  });

Orders (Тапсырыстар)

// Тапсырыстар тізімі (realtime)
supabase
  .channel('orders')
  .on('postgres_changes', 
    { event: '*', schema: 'public', table: 'orders' },
    (payload) => handleOrderChange(payload)
  )
  .subscribe();

// Тапсырыс құру
const { data } = await supabase
  .from('orders')
  .insert({
    restaurant_id,
    table_number: '5',
    items: [{ product_id, quantity, price }],
    total: 7500,
    status: 'pending'
  });

// Статусты жаңарту
await supabase
  .from('orders')
  .update({ status: 'preparing' })
  .eq('id', orderId);

🗄️ Дерекқор схемасы

ER диаграммасы

┌─────────────────┐       ┌─────────────────┐
│   restaurants   │       │     users       │
├─────────────────┤       ├─────────────────┤
│ id (PK)         │       │ id (PK)         │
│ owner_id (FK)───┼───────│                 │
│ name            │       │ email           │
│ slug (unique)   │       └─────────────────┘
│ service_fee     │
│ created_at      │
└────────┬────────┘
         │
         │ 1:N
         ▼
┌─────────────────┐       ┌─────────────────┐
│   categories    │       │    products     │
├─────────────────┤       ├─────────────────┤
│ id (PK)         │◄──────│ category_id(FK) │
│ restaurant_id   │       │ restaurant_id   │
│ name            │       │ name            │
│ sort_order      │       │ description     │
└─────────────────┘       │ price           │
                          │ image_url       │
                          │ is_available    │
                          └─────────────────┘
         │
         │ 1:N
         ▼
┌─────────────────┐
│     orders      │
├─────────────────┤
│ id (PK)         │
│ restaurant_id   │
│ table_number    │
│ items (JSONB)   │
│ total           │
│ status          │
│ created_at      │
└─────────────────┘

Негізгі кестелер

Толық схема үшін database.sql қараңыз.

🌍 Деплой

Vercel (ұсынылады)

Vercel-ге GitHub арқылы кіріңіз
Репозиторийді импорттаңыз
Environment variables қосыңыз:
- VITE_SUPABASE_URL
- VITE_SUPABASE_ANON_KEY
Deploy батырмасын басыңыз

Қолмен деплой

npm run build
# dist/ папкасын хостингке жүктеңіз

🤝 Үлес қосу

Үлес қосқыңыз келсе:

Репозиторийді Fork жасаңыз
Feature branch құрыңыз: git checkout -b feature/amazing-feature
Өзгерістерді commit жасаңыз: git commit -m 'Add amazing feature'
Push жасаңыз: git push origin feature/amazing-feature
Pull Request ашыңыз

Толығырақ CONTRIBUTING.md қараңыз.

📞 Байланыс

Email: azamaperdeev05@gmail.com
GitHub: @Azamaperdeev05

📄 Лицензия

MIT лицензиясы бойынша таратылады. Толығырақ LICENSE файлын қараңыз.

RESTOFLOW — Мейрамханаңызды цифрландырыңыз

Жасаған: Азамат Пердеев ❤️

Name		Name	Last commit message	Last commit date
.github		.github
components		components
contexts		contexts
docs		docs
font		font
hooks		hooks
lib		lib
public		public
supabase/functions		supabase/functions
.firebaserc		.firebaserc
.gitattributes		.gitattributes
.gitignore		.gitignore
AUDIT_REPORT.md		AUDIT_REPORT.md
AUDIT_REPORT_BILLING.md		AUDIT_REPORT_BILLING.md
App.tsx		App.tsx
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
DOCS_ALERTING.md		DOCS_ALERTING.md
DOCS_MONITORING.md		DOCS_MONITORING.md
GOOGLE_AUTH_SETUP.md		GOOGLE_AUTH_SETUP.md
LICENSE		LICENSE
README.md		README.md
ROADMAP.md		ROADMAP.md
SECURITY.md		SECURITY.md
database.sql		database.sql
firebase.json		firebase.json
firestore.rules		firestore.rules
index.css		index.css
index.html		index.html
index.tsx		index.tsx
metadata.json		metadata.json
package-lock.json		package-lock.json
package.json		package.json
postcss.config.cjs		postcss.config.cjs
tailwind.config.cjs		tailwind.config.cjs
tsconfig.json		tsconfig.json
types.ts		types.ts
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation