🍽️ Orderin — Smart Restaurant Self-Order, POS & Kitchen Display System (KDS)

📌 Tentang Orderin

Orderin adalah platform manajemen restoran dan kafe generasi baru yang mengintegrasikan ekosistem Self-Order berbasis Meja QR Code, Kasir POS (Point of Sale), Display Dapur Interaktif (Kitchen Display System / KDS), serta Laporan Keuangan & Inventori Bahan Baku dalam satu aplikasi web modern yang cepat, aman, dan responsif.

Dibangun dengan arsitektur Next.js 14 App Router, TypeScript, dan Drizzle ORM, Orderin dirancang untuk meningkatkan kecepatan operasional restoran, mengeliminasi kesalahan pencatatan pesanan, mempercepat perputaran meja (table turnover rate), dan menyajikan visualisasi data bisnis secara real-time.

✨ Fitur Unggulan (Core Features)

1. 📱 Customer Self-Order (Menu Digital & Meja QR)

Pemesanan Mandiri Instan: Pelanggan cukup memindai QR Code di meja mereka untuk langsung membuka katalog menu tanpa perlu mengunduh aplikasi native.
Kustomisasi Varian & Catatan Khusus: Pemilihan varian (cth: ukuran, level pedas, topping ekstra) dengan penyesuaian harga real-time dan input instruksi khusus (misal: kurangi es, tanpa bawang).
Tag Peringatan Alergen: Indikator alergen jelas pada setiap menu (kacang, susu/dairy, gluten, seafood, telur).
Keranjang Pintar & Sinkronisasi Meja: Keranjang belanja interaktif dengan persistent storage aman dari hydration mismatch.

2. 💳 Pembayaran Fleksibel (QRIS & Tunai)

Midtrans QRIS Integration: Generate QRIS dinamis untuk pembayaran digital instan dengan pengecekan status otomatis via polling.
Verifikasi Kriptografis Webhook: Validasi signature SHA-512 anti-pemalsuan callback pembayaran sesuai standar keamanan perbankan.
Opsi Tunai di Kasir: Memungkinkan pelanggan memilih pembayaran tunai langsung di meja kasir.

3. 🍳 Kitchen Display System (KDS)

Antarmuka Dark Mode High-Contrast: Dirancang khusus untuk tablet dan display monitor dapur tahan banting (bg-slate-950).
Kanban Alur Masak 3 Kolom:
1. Antrean Baru (pending & confirmed)
2. Sedang Dimasak (preparing)
3. Siap Saji (ready)
Elapsed Cooking Timer: Menghitung menit memasak per tiket dengan peringatan visual berkedip merah jika order melebihi batas waktu (15 menit).
Checklist Menu Interaktif: Koki dapat mencentang setiap item makanan yang sudah matang (strikethrough).
Web Audio API Chime: Bell nada ganda (D5 & A5 dual frequency chime) yang otomatis berbunyi ketika ada pesanan baru tiba di dapur.
Mode Layar Penuh (Fullscreen): Dukungan satu klik untuk menyembunyikan browser chrome di layar tablet dapur.

4. 💼 Portal Admin & Kasir POS

Dashboard Operasional: Metrik omset harian, jumlah pesanan, pesanan aktif dapur, dan persentase okupansi meja live.
Manajemen Pesanan & Pelunasan: Filter alur status lengkap, pencarian cepat, konfirmasi alur pesanan, dan pencetakan struk nota (Receipt Printing).
Katalog & Ketersediaan Menu: Tambah/edit menu baru dengan varian dinamis, serta sakelar toggle instan ketersediaan stok (isAvailable).
Peta Meja & Standee QR Code: Visualisasi denah meja restoran (kosong vs terisi) dan generator standee QR Code siap cetak per meja.
Inventori Bahan Baku: Peringatan stok menipis/habis dan penyesuaian stok instan (+10, +1, -1, -10).
Laporan Penjualan & Analytics: Filter periode harian/mingguan/bulanan, rasio perbandingan pembayaran (QRIS vs Tunai), breakdown kategori, dan ranking 10 menu terlaris (Top Performers).

5. 🛡️ Keamanan & Keandalan Tingkat Enterprise

Sanitasi Data & Proteksi XSS: Pembersihan tag HTML, script, iframe, dan event handler pada seluruh input pengguna.
Rate Limiting Anti-Abuse: In-memory sliding window rate limiter membatasi 100 req/menit per client IP dengan HTTP 429 Too Many Requests.
OWASP Security Headers: Dilengkapi CSP, Strict-Transport-Security, X-Frame-Options (anti-clickjacking), dan X-Content-Type-Options (anti-sniffing).
Audit Kredensial Lingkungan: Pencegahan kebocoran environment variable privat ke browser client.

📸 Tangkapan Layar (Screenshots Preview)

🍳 Kitchen Display System (KDS)	📱 Customer Self-Order (Menu Meja)

📊 Admin Operational Dashboard	🪑 Manajemen Meja & QR Code

🛍️ Manajemen Pesanan & Kasir POS	📈 Laporan Penjualan & Analytics

🛠️ Arsitektur & Teknologi (Tech Stack)

┌─────────────────────────────────────────────────────────────┐
│                       ORDERIN ECOSYSTEM                     │
└─────────────────────────────────────────────────────────────┘
          │                                        │
          ▼                                        ▼
┌──────────────────┐                      ┌──────────────────┐
│   Customer UI    │                      │  Admin & POS UI  │
│ (Mobile First)   │                      │  & Kitchen (KDS) │
└──────────────────┘                      └──────────────────┘
          │                                        │
          └─────────────────┬──────────────────────┘
                            ▼
              ┌───────────────────────────┐
              │  Next.js 14 (App Router)  │
              │  TypeScript + Tailwind    │
              └───────────────────────────┘
                            │
            ┌───────────────┴───────────────┐
            ▼                               ▼
┌───────────────────────┐       ┌───────────────────────┐
│  Drizzle ORM Engine   │       │ Midtrans Payment API  │
│  SQLite / PostgreSQL  │       │ SHA-512 Signature     │
└───────────────────────┘       └───────────────────────┘

Core Framework: Next.js 14 (App Router, Server Actions, Route Handlers)
Bahasa: TypeScript (Strict Mode Enabled)
Styling & UI: Tailwind CSS v3, Lucide React, tailwind-merge, clsx
Database & ORM: Drizzle ORM, better-sqlite3 (Development WAL mode, PostgreSQL schema compatible)
Validasi Skema: Zod
Audio Alerts: Web Audio API (Native browser synthesizer)
Payment Gateway: Midtrans Core API (QRIS & Webhook verification)

🚀 Panduan Memulai (Quick Start Guide)

1. Prasyarat Sistem

Node.js v18.17.0 atau versi yang lebih baru (Disarankan Node v20 LTS atau v24)
npm, pnpm, atau yarn

2. Kloning Repositori

git clone https://github.com/dapaaa07/Orderin.git
cd Orderin

3. Instalasi Dependensi

npm install

4. Konfigurasi Variabel Lingkungan

Salin berkas .env.example ke .env.local:

cp .env.example .env.local

Sesuaikan konfigurasi kredensial (termasuk Server Key Midtrans jika ingin menggunakan payment gateway):

NEXT_PUBLIC_APP_URL="http://localhost:3000"
DATABASE_URL="sqlite.db"
MIDTRANS_SERVER_KEY="your-midtrans-server-key"
MIDTRANS_CLIENT_KEY="your-midtrans-client-key"
MIDTRANS_IS_PRODUCTION=false

5. Inisialisasi Database & Demo Data

Jalankan migrasi database dan skrip pembuat data demo (menu makanan, kategori, meja, inventori, dan pesanan aktif):

# Jalankan migrasi tabel database
npm run db:migrate

# Isi database dengan data demo restoran lengkap
npx tsx scripts/seed-demo.ts

6. Jalankan Server Pengembangan

npm run dev

Buka browser dan akses:

Customer Self-Order (Meja T-01): http://localhost:3000/order/T-01
Portal Admin & POS: http://localhost:3000/dashboard
Display Dapur (KDS): http://localhost:3000/kitchen

🧪 Skrip Pengujian & Verifikasi (Automated Tests)

Orderin dilengkapi dengan suite pengujian otomatis menyeluruh:

# Uji coba seluruh endpoint API & validasi input Zod
npm run test:api

# Uji coba skema database, relasi Drizzle ORM, dan integritas data
npm run test:db

# Uji coba keamanan (XSS sanitization, Midtrans SHA-512, Rate limiter, Credential audit)
npm run test:security

# Pengecekan tipe data TypeScript komprehensif
npm run type-check

# Kompilasi build produksi Next.js
npm run build

📂 Struktur Direktori Proyek

orderin/
├── app/                        # Next.js 14 App Router
│   ├── (admin)/                # Rute Portal Admin & Kasir POS
│   │   ├── dashboard/          # Dashboard ringkasan KPI & omset
│   │   ├── orders/             # Manajemen pesanan masuk & kasir
│   │   ├── menu/               # Katalog menu & form tambah/edit
│   │   ├── tables/             # Denah meja & standee QR Code
│   │   ├── inventory/          # Manajemen stok bahan baku
│   │   └── reports/            # Laporan analitik penjualan
│   ├── (customer)/             # Rute Pemesanan Pelanggan (Self-Order)
│   │   ├── order/[table]/      # Katalog menu berbasis meja QR
│   │   ├── order/cart/         # Keranjang pesanan & checkout
│   │   └── payment/            # Pembayaran QRIS & nota sukses
│   ├── (kitchen)/              # Rute Kitchen Display System (KDS)
│   │   └── kitchen/            # Display kanban alur dapur koki
│   └── api/                    # RESTful Backend API Endpoints
│       ├── categories/
│       ├── menu/
│       ├── orders/
│       ├── tables/
│       ├── inventory/
│       ├── reports/
│       └── payment/
├── components/                 # Pustaka Komponen UI Reusable
│   ├── admin/                  # Sidebar, Header, Admin layout
│   ├── kitchen/                # Header KDS, Tiket pesanan dapur
│   ├── menu/                   # Kartu menu, modal varian, tabs
│   ├── cart/                   # Bar keranjang floating, checkout
│   └── ui/                     # Button, Badge, Modal, Input, Card
├── context/                    # React Context (Cart State Management)
├── docs/                       # Dokumentasi & aset tangkapan layar
│   └── screenshots/
├── lib/                        # Logika Bisnis & Utilitas Backend
│   ├── db/                     # Skema tabel Drizzle ORM & migrasi
│   ├── validations/            # Skema validasi Zod
│   ├── security.ts             # Sanitasi XSS & signature SHA-512
│   ├── rate-limiter.ts         # In-memory sliding window rate limiter
│   └── api-response.ts         # Formatter respons error/sukses API
└── scripts/                    # Skrip pengujian otomatis & data seeder

🏷️ GitHub Topics & SEO Tags

Tambahkan tags berikut pada pengaturan repositori GitHub Anda untuk memaksimalkan traffic pencarian:

nextjs, react, typescript, tailwindcss, pos-system, point-of-sale, restaurant-pos, restaurant-management, kitchen-display-system, kds, qr-code, self-order, digital-menu, midtrans, qris, drizzle-orm, sqlite, fullstack, indonesian-tech, open-source

📄 Lisensi (License)

Proyek ini dilisensikan di bawah lisensi MIT License. Bebas digunakan, dimodifikasi, dan didistribusikan untuk keperluan personal maupun komersial.

Dibuat dengan ❤️ oleh Dapa untuk mendigitalisasi operasional restoran & kafe di Indonesia.

Name		Name	Last commit message	Last commit date
app		app
components		components
context		context
docs		docs
drizzle/migrations		drizzle/migrations
lib		lib
public/uploads		public/uploads
scripts		scripts
types		types
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
drizzle.config.ts		drizzle.config.ts
middleware.ts		middleware.ts
next.config.js		next.config.js
orderin-PRD.md		orderin-PRD.md
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
thumbnail.png		thumbnail.png
tsconfig.json		tsconfig.json

Navigation Menu

Repository files navigation

🍽️ Orderin — Smart Restaurant Self-Order, POS & Kitchen Display System (KDS)

📌 Tentang Orderin

✨ Fitur Unggulan (Core Features)

1. 📱 Customer Self-Order (Menu Digital & Meja QR)

2. 💳 Pembayaran Fleksibel (QRIS & Tunai)

3. 🍳 Kitchen Display System (KDS)

4. 💼 Portal Admin & Kasir POS

5. 🛡️ Keamanan & Keandalan Tingkat Enterprise

📸 Tangkapan Layar (Screenshots Preview)

🛠️ Arsitektur & Teknologi (Tech Stack)

🚀 Panduan Memulai (Quick Start Guide)

1. Prasyarat Sistem

2. Kloning Repositori

3. Instalasi Dependensi

4. Konfigurasi Variabel Lingkungan

5. Inisialisasi Database & Demo Data

6. Jalankan Server Pengembangan

🧪 Skrip Pengujian & Verifikasi (Automated Tests)

📂 Struktur Direktori Proyek

🏷️ GitHub Topics & SEO Tags

📄 Lisensi (License)

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

🍽️ Orderin — Smart Restaurant Self-Order, POS & Kitchen Display System (KDS)

📌 Tentang Orderin

✨ Fitur Unggulan (Core Features)

1. 📱 Customer Self-Order (Menu Digital & Meja QR)

2. 💳 Pembayaran Fleksibel (QRIS & Tunai)

3. 🍳 Kitchen Display System (KDS)

4. 💼 Portal Admin & Kasir POS

5. 🛡️ Keamanan & Keandalan Tingkat Enterprise

📸 Tangkapan Layar (Screenshots Preview)

🛠️ Arsitektur & Teknologi (Tech Stack)

🚀 Panduan Memulai (Quick Start Guide)

1. Prasyarat Sistem

2. Kloning Repositori

3. Instalasi Dependensi

4. Konfigurasi Variabel Lingkungan

5. Inisialisasi Database & Demo Data

6. Jalankan Server Pengembangan

🧪 Skrip Pengujian & Verifikasi (Automated Tests)

📂 Struktur Direktori Proyek

🏷️ GitHub Topics & SEO Tags

📄 Lisensi (License)

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages