Problem

Barbershop tanpa sistem booking mengandalkan antre datang langsung. Di jam ramai pelanggan menunggu lama lalu kabur, sedangkan di jam sepi kapster menganggur. Pemilik tidak punya data jam ramai maupun performa tiap kapster.

Goals

• Pelanggan bisa booking slot < 30 detik tanpa install aplikasi
• Pelanggan tahu estimasi giliran secara real-time
• Kurangi walkout (pelanggan kabur karena antre) minimal 40% dalam 2 bulan
• Pemilik dapat laporan jam ramai & jumlah layanan per kapster

Non-Goals

• Pembayaran online (fase 1 tetap bayar di kasir)
• Aplikasi native iOS/Android (cukup web mobile dulu)
• Program membership/poin loyalitas

Target Users

• Pelanggan — Booking cepat dari HP & tahu kapan gilirannya tanpa menunggu di tempat
• Kapster — Lihat jadwal hari ini & tandai layanan selesai
• Kasir/Pemilik — Kelola slot, kapster, dan lihat laporan harian

User Stories

• must-have
  Sebagai pelanggan, saya ingin memilih layanan, kapster, dan jam kosong dari HP, agar saya tidak perlu antre di tempat.
• must-have
  Sebagai pelanggan, saya ingin melihat nomor antrean & estimasi giliran, agar saya bisa datang tepat waktu.
• must-have
  Sebagai kapster, saya ingin melihat daftar booking hari ini di layar, agar saya tahu pelanggan berikutnya.
• should-have
  Sebagai kasir, saya ingin menambah/menonaktifkan slot & kapster, agar jadwal sesuai kondisi hari itu.
• should-have
  Sebagai pemilik, saya ingin melihat laporan jam ramai & layanan per kapster, agar saya bisa atur shift & promo.

User Flow

1. Pelanggan membuka halaman booking cabang dari HP.
2. Pilih layanan, lalu kapster (atau 'siapa saja').
3. Pilih slot jam yang masih kosong.
4. Isi nama & nomor HP, lalu konfirmasi booking.
5. Terima nomor antrean + link halaman status.
6. Datang sesuai estimasi; kapster menandai 'Mulai' lalu 'Selesai'.

Features

Tech Stack

Real-time via Supabase Realtime channel per cabang. Notifikasi WhatsApp opsional lewat API pihak ketiga di fase berikutnya.

Architecture

Aplikasi web full-stack di atas Next.js. Frontend & API menyatu (Route Handlers + Server Actions), data di PostgreSQL (Supabase), dan status antrean real-time lewat Supabase Realtime per cabang.

Database Schema

Ini struktur data aplikasimu. Kamu tidak perlu paham semuanya — AI yang akan membuatnya. Kolom created_at/updated_at ditambahkan otomatis tiap tabel.

Struktur Folder

Struktur ini dikunci agar AI agent membangun dengan susunan file yang sama.

• src/app/ — halaman Next.js (booking publik, status, dashboard)
• src/app/api/ — route handlers (booking, slot, auth, laporan)
• src/lib/db/ — skema Drizzle & koneksi
• src/lib/services/ — logika bisnis (ketersediaan slot, antrean)
• src/components/ — komponen UI reusable

API Endpoints

Peran (RBAC)

Enum

Environment Variables

Library Inti

Tasks (siap kirim ke AI agent)

Buat proyek Next.js (App Router, TypeScript, Tailwind). Tambahkan Drizzle ORM dengan PostgreSQL (Supabase). Definisikan skema untuk tabel: branches(id, name), services(id, branch_id, name, duration_min, price), barbers(id, branch_id, name, active), bookings(id, branch_id, service_id, barber_id nullable, customer_name, customer_phone, slot_start, queue_no, status enum['booked','in_progress','done','no_show'], created_at). Sertakan migration dan file koneksi db.

Bangun halaman publik /book/[branch] dengan alur: (1) pilih layanan, (2) pilih kapster atau 'siapa saja', (3) pilih slot jam berdasarkan durasi layanan & slot yang belum penuh, (4) isi nama + no HP, (5) konfirmasi. Simpan booking via server action, generate queue_no harian berurutan, redirect ke /status/[bookingId]. Nonaktifkan slot penuh.

Tulis fungsi getAvailableSlots(branchId, serviceId, date) yang menghasilkan daftar slot mulai berdasarkan jam operasional cabang, durasi layanan, dan booking yang sudah ada per kapster. Kembalikan slot yang masih punya kapster tersedia. Sertakan unit test untuk kasus penuh & sebagian.

Buat halaman /status/[bookingId] yang menampilkan nomor antrean, posisi saat ini (berapa orang di depan pada kapster yang sama/hari yang sama), dan estimasi menit = jumlah di depan × durasi rata-rata. Tampilkan status booking. Siapkan agar mudah di-upgrade ke real-time di task berikutnya.

Tambahkan autentikasi staf (email+password) dengan peran 'barber' dan 'cashier' memakai Supabase Auth atau Better Auth. Lindungi route /dashboard sehingga hanya staf yang bisa akses. Kasir dapat akses penuh; kapster hanya melihat booking miliknya.

Bangun /dashboard: daftar booking hari ini dikelompokkan per kapster, dengan tombol 'Mulai' (status→in_progress) dan 'Selesai' (status→done, majukan antrean). Sediakan form 'Tambah walk-in' yang membuat booking langsung ke antrean. Kasir bisa menonaktifkan kapster/slot untuk hari itu.

Integrasikan Supabase Realtime: subscribe perubahan tabel bookings per branch_id. Perbarui halaman /status/[bookingId] dan /dashboard tanpa refresh saat ada perubahan status. Pastikan unsubscribe saat unmount.

Buat halaman /dashboard/laporan dengan filter rentang tanggal & kapster. Tampilkan total layanan selesai, grafik batang jumlah layanan per jam (jam ramai), dan tabel layanan per kapster. Query agregasi di sisi server.

Risks

• Pelanggan booking lalu tidak datang (no-show) — perlu aturan & penanda no-show
• Estimasi giliran meleset saat layanan lebih lama dari durasi standar
• Koneksi internet di lokasi lemah — dashboard harus tetap berfungsi saat sinkron ulang

Open Questions

• Apakah perlu batasan booking maksimal per no. HP per hari untuk cegah spam?
• Apakah kapster boleh menolak/menukar booking yang masuk ke dirinya?
• Notifikasi WhatsApp: fase 1 atau fase 2?