Storefront — Toko Digital F&B

Terakhir diperbarui / Last updated: 2026-07-28
Versi / Version: 2.2
Modul / Module: /storefront (merchant dashboard) · firstjournal.id/toko/[slug] (halaman publik)

---

1. Overview & Status

Storefront adalah seperangkat alat untuk seller F&B — restoran, kafe, kedai, food court — agar bisa menerima pesanan online, reservasi meja, program loyalty, dan ulasan pelanggan. Semua terhubung langsung ke pembukuan FirstJournal: 0% komisi, setiap order yang terbayar otomatis menghasilkan invoice dan jurnal double-entry tanpa input manual.

URL toko publik: https://firstjournal.id/toko/[slug-tokomu]

Keunggulan utama:

• 0% komisi — tidak ada biaya per transaksi dari platform
• Auto-jurnal — setiap order PAID langsung menghasilkan invoice + double-entry journal
• Auto-stok — persediaan berkurang otomatis bersamaan dengan order
• Pelanggan tidak perlu install aplikasi — scan QR, langsung pesan dari browser

Saat pertama kali buka Storefront dari sidebar, kamu akan melihat halaman pemilihan mode. Pilih F&B Online → klik "Mulai Setup" → masuk wizard 3 langkah.

Langkah 1 — Info Toko

Langkah 2 — Pengiriman

Informasi alamat ini dibutuhkan untuk mode E-Commerce (Coming Soon). Untuk F&B, bisa dilewati.

Langkah 3 — Pembayaran

Klik Buka Toko — wizard selesai, toko langsung aktif. Lanjutkan ke Pengaturan F&B untuk mengaktifkan mode F&B.

Profil toko menentukan kesan pertama pelanggan yang membuka firstjournal.id/toko/[slug]. Profil yang lengkap meningkatkan kepercayaan dan konversi.

Live Preview: Halaman ini menampilkan preview toko di frame ponsel (panel kanan) yang berubah langsung saat kamu ganti foto/nama/tema — cek di preview sebelum simpan, tanpa perlu buka tab lain.

Upload Media:

Logo toko (badge kecil di pojok kiri-atas hero — pindah dari kiri-bawah per redesign 2026-09-17) BUKAN diatur di halaman ini — logo pakai aset yang sama dengan logo di Faktur/PDF, diatur di Pengaturan → Invoice Branding. Halaman Profil Toko menampilkan preview logo tersebut (read-only) dengan link langsung ke halaman pengaturannya, plus toggle "Tampilkan Logo di Banner" (default ON) — matikan kalau Foto Cover/Hero Toko kamu sudah didesain lengkap sendiri (branding sudah menyatu di dalam foto, seperti banner kampanye) dan tidak perlu badge logo tambahan.

Informasi Toko:

Kontak & Sosial Media:

Fasilitas (pilih yang tersedia di tempat kamu):

• AC (Air Conditioning)
• WiFi
• Parkir
• Smoking Area
• Live Music
• Pet Friendly
• Toilet
• Area Outdoor

Tip: Pelanggan sering filter toko berdasarkan fasilitas di direktori firstjournal.id/toko. Centang semua fasilitas yang benar-benar tersedia.

Multi-outlet? Nama toko, tema, dan banner di halaman ini adalah default toko yang berlaku ke semua outlet. Kalau outlet tertentu (misal cabang atau gerobak) perlu nama/tema/banner QR menu yang BEDA dari toko lain, atur khusus di POS → Outlets → [Outlet] → "Pesan Online (QR Menu)" — lihat artikel POS bagian Branding QR Menu per Outlet. Outlet yang tidak diatur khusus otomatis mengikuti default toko di sini.

Jam operasional mengontrol badge "Buka/Tutup" di direktori firstjournal.id/toko — dan juga benar-benar memblokir pelanggan memesan saat toko tertutup (di luar jam buka, atau hari yang ditandai Tutup), bukan sekadar tampilan. Di halaman toko itu sendiri (redesign 2026-09-17): saat tutup, pelanggan tidak lagi melihat badge di banner — seluruh halaman menu diganti dengan halaman khusus "Toko Sedang Tutup" yang menjelaskan alasannya (dan tombol WhatsApp kalau nomor outlet sudah diisi).

Grid 7 Hari:

• Setiap hari (Senin–Minggu) punya toggle Buka / Tutup
• Jika Buka: isi jam buka dan jam tutup dalam format HH:MM (24 jam)
• Contoh: Senin Buka 09:00 — Tutup 22:00

Hari Libur Khusus:

• Tambahkan tanggal spesifik (misalnya Lebaran, Tahun Baru) dengan label keterangan
• Pada tanggal tersebut, halaman toko menampilkan "Toko Sedang Tutup — [label]" meski jadwal normal mengatakan buka, dan pelanggan tidak bisa checkout di tanggal tersebut

Preview Status Hari Ini:

• Halaman pengaturan menampilkan preview toko di frame ponsel (panel kanan), termasuk status buka/tutup hari ini berdasarkan setting saat ini
• Gunakan ini untuk memverifikasi jam sebelum simpan

Pilih mode aktif untuk storefront kamu. Mode bisa dikombinasikan:

Pengaturan inti untuk mode F&B Online. Wajib dikonfigurasi agar pelanggan bisa memesan.

Pastikan Outlet POS dipilih sebelum mengaktifkan Mode F&B. Stok, menu, dan meja mengikuti outlet yang dipilih.

Delivery (baru, 2026-09-17): Pelanggan pesan online lalu diantar ke alamatnya — WAJIB login (bukan pesanan tamu) karena butuh alamat pengiriman tersimpan. Untuk saat ini pengantaran gratis ongkir — belum ada fitur tarif ongkir untuk F&B.

Live Preview: Panel kanan menampilkan kartu "Cara Makan" persis seperti yang dilihat pelanggan — centang/hilangkan Dine-in/Takeaway/Delivery dan lihat kartunya langsung muncul/hilang, tanpa perlu simpan dulu.

Fitur reservasi memungkinkan pelanggan memesan meja secara online sebelum datang, langsung dari halaman toko publik.

Setup Sesi Waktu:

• Tambahkan sesi (contoh: "Makan Siang", "Makan Malam")
• Setiap sesi punya: Label, Jam Mulai, Jam Selesai
• Contoh: Makan Siang 11:00–14:00 | Makan Malam 17:00–21:00

Aturan Kapasitas:

Mode Konfirmasi:

Catatan untuk Customer:

• Teks yang tampil di halaman reservasi publik
• Gunakan untuk jelaskan kebijakan (deposit, dress code, dll)

Live Preview: Halaman pengaturan menampilkan contoh langsung ("Sesi Makan Siang, kapasitas X orang, min/maks Y-Z tamu") yang dihitung dari input sesi/kapasitas saat ini — cek contohnya sebelum simpan.

Program poin yang membuat pelanggan kembali lagi. Poin diperoleh saat checkout dan bisa ditukar diskon di transaksi berikutnya.

Konfigurasi Earn:

Simulasi Live:

• Halaman pengaturan menampilkan simulasi "Pelanggan belanja Rp X → dapat Y poin → setara diskon Rp Z"
• Gunakan simulasi sebelum simpan untuk pastikan setting masuk akal dari sisi bisnis

Tips setting yang bagus: Earn rate Rp 1.000 = 1 poin dengan nilai 100 poin = Rp 1.000 berarti pelanggan dapat 1% cashback dalam bentuk poin — angka yang terasa bermakna tapi tidak menggerus margin.

Selain poin, setiap pelanggan (baik member yang di-daftarkan lewat POS maupun shopper yang login di storefront) otomatis naik tier berdasarkan total belanja kumulatif (totalSpent) — tanpa pengaturan tambahan dari kamu:

Tier ini dipakai bersama antara transaksi kasir POS dan order storefront — satu pelanggan, satu tier, di manapun dia belanja. Badge tier tampil di struk kasir, kartu pelanggan (Kontak), dan di halaman Poin Saya milik pelanggan (lihat §7).

Pelanggan yang login bisa membagikan kode referral pribadi (tombol "Ajak Teman" di halaman utama toko). Begitu teman yang diajak checkout PERTAMA KALI di toko kamu, kalian berdua langsung dapat Koin otomatis — atur besarannya di dua field baru di halaman ini: Bonus untuk yang mengajak dan Bonus untuk yang diajak. Default Rp0 (program tidak aktif sampai kamu isi).

Beberapa hal penting:

• Kode referral bersifat GLOBAL — 1 kode per pelanggan, bisa dipakai di toko manapun yang pakai FirstJournal. Reward-nya tetap khusus toko tempat teman itu checkout.
• Butuh login (bukan tamu) — supaya sistem bisa cegah orang mengajak dirinya sendiri dengan akun kedua.
• Ada batas maksimal 20 referral berhasil per bulan per pelanggan (lintas semua toko) untuk cegah penyalahgunaan.
• Reward TIDAK bisa dibatalkan otomatis kalau pesanan yang memicu reward itu di-void/refund — sama seperti bonus member baru, ini keterbatasan yang sudah ada dan belum ada perbaikannya.

Katalog menentukan produk apa yang tampil di menu pelanggan. Ini terpisah dari daftar produk internal kasir POS.

Operasi Dasar:

Status Produk di Menu:

Sinkronisasi POS ↔ Storefront (/storefront/settings/sync):

Merchant bisa memilih hubungan antara toggle "Aktif di POS" (isPosEnabled) dan "Tampil di Storefront" (storefrontEnabled) lewat 3 mode di Storefront → Pengaturan → Sinkronisasi:

Produk yang pernah di-toggle manual dari tabel Katalog (satu-satu atau bulk) otomatis dikecualikan permanen dari kedua mode otomatis (ditandai badge "Diatur manual") — sampai merchant klik "Ikuti POS lagi" untuk menyambungkannya kembali.

Tombol "Terapkan ke produk lama" di halaman Sinkronisasi adalah aksi terpisah, sekali-jalan, untuk menerapkan logika ke SEMUA produk yang sudah ada — mengganti mode radio button saja TIDAK otomatis menyentuh produk lama.

Produk dengan isCustomMTO (Pesanan Custom) sengaja dikecualikan dari sinkronisasi otomatis — tidak akan pernah otomatis tampil di storefront lewat mode auto_follow/new_products_only, karena produk custom-order tidak cocok dijual langsung ke pelanggan storefront. Merchant tetap bisa mengaktifkannya manual lewat toggle Katalog kalau memang mau.

Atur visibilitas toko di direktori publik firstjournal.id/toko dan sesuaikan tampilan visual toko.

Visibilitas Direktori:

• Toggle Tampilkan di firstjournal.id/toko — default OFF (opt-in)
• Saat ON, toko muncul di halaman direktori dan bisa ditemukan via search atau filter kategori

Kategori Toko: Pilih kategori yang paling sesuai:

• Kafe / Kedai Kopi
• Restoran
• Kedai Makanan
• Bakery & Dessert
• Minuman & Boba
• Food Court
• Katering
• Lainnya

Tema Warna: 8 preset tema warna untuk tampilan toko pelanggan:

Kamu juga bisa masukkan custom hex color (misal #1a73e8) untuk warna yang persis sesuai brand.

Live Preview:

• Halaman direktori menampilkan preview tampilan toko di frame ponsel
• Preview berubah real-time saat kamu ganti tema
• Cek di preview sebelum simpan

Share Link:

• Tombol Salin Link — copy firstjournal.id/toko/[slug] ke clipboard
• Tombol Bagikan ke WA — buka WA dengan pesan siap kirim berisi link toko

Secara default, jika stok sebuah menu habis, order QR/storefront untuk item itu ditolak. Toggle "Izinkan Order QR Meski Stok Habis" (di Pengaturan > Pengaturan Persediaan, terpisah dari toggle stok minus POS) membalik perilaku ini: pelanggan tetap bisa memesan item yang stoknya 0 sebagai pre-order.

• Item manual di-86 (ditandai habis oleh kasir) tetap selalu diblokir, walau toggle ini ON.
• Saat aktif, pelanggan yang menambah item stok-habis ke keranjang melihat konfirmasi: "Stok terbatas — pesanan ini mungkin butuh waktu lebih lama atau perlu konfirmasi dari resto." Item tersebut ditandai "Pre-order · stok terbatas" di ringkasan checkout.
• Karena pembayaran online (Midtrans) sudah ditagih sebelum dapur konfirmasi, jika ternyata bahan benar-benar tidak tersedia, kamu harus void/retur transaksinya secara manual lewat POS — tidak ada auto-refund.

Pelanggan yang login bisa mengajukan permintaan katering lewat tombol "Katering" di halaman utama toko — isi tanggal acara, jumlah tamu, jenis acara (opsional), catatan, dan kontak. Permintaan ini MASUK KE ANTREAN, belum jadi pesanan/transaksi.

Cara kerjanya:

• Lihat & proses permintaan di Storefront > Permintaan Katering (ada badge notifikasi di menu sidebar kalau ada yang menunggu).
• Setujui atau Tolak setiap permintaan — kalau ditolak, kamu bisa kasih alasan singkat yang akan terlihat oleh pelanggan.
• Setelah disetujui, tidak ada apa pun yang terjadi otomatis — kamu hubungi pelanggan via WhatsApp (kontaknya sudah ada di permintaan) untuk nego menu & harga, lalu buat invoice/DP seperti biasa lewat menu Penjualan. Kalau mau, kamu bisa tempel nomor invoice itu ke permintaan katering hanya sebagai catatan pribadi — sistem tidak menghubungkan keduanya secara otomatis dan tidak memvalidasinya.
• Butuh login (bukan tamu) supaya kamu punya kontak yang bisa dihubungi.

Pelanggan yang login bisa membeli satu produk/menu untuk dikirim sebagai hadiah lewat tombol "Kirim Hadiah" di halaman utama toko — pilih produk, isi nama & nomor WhatsApp penerima, tulis pesan (opsional), lalu bayar online sekarang lewat Midtrans. Setelah bayar, sistem membuat link klaim unik (firstjournal.id/gift/KODEKLAIM) yang bisa dibagikan sendiri oleh pengirim ke penerima via WhatsApp.

Cara kerjanya:

• Penerima membuka link klaim — halaman ini publik (tidak perlu login), menampilkan pesan dari pengirim, nama produk, dan kode klaim untuk ditunjukkan di kasir.
• Kasir membuka menu "Redeem Kirim Hadiah" di layar kasir POS, masukkan kode klaim 8 karakter, sistem menampilkan produk & nama pengirim untuk konfirmasi, lalu proses sebagai transaksi baru (item senilai Rp0 karena sudah dibayar di muka — stok tetap berkurang normal).
• Hadiah punya masa berlaku (default beberapa minggu sejak pembelian). Kalau tidak diklaim sampai kadaluarsa, sistem otomatis menutup kewajiban itu sebagai pendapatan lain-lain lewat proses harian — uang yang sudah dibayar TIDAK dikembalikan otomatis, hubungi pelanggan kalau ada permintaan khusus.
• Riwayat pengiriman hadiah pelanggan sendiri (termasuk link untuk dibagikan ulang) ada di tab "Riwayat" pada halaman Kirim Hadiah.
• Butuh login (bukan tamu) untuk mengirim — supaya ada kontak & riwayat yang jelas.

Alur Status Pesanan:

CANCELLABLE (60 dtk) → PAID → PROCESSING → READY → COMPLETED

Fitur Kelola Pesanan:

• Filter per status — lihat hanya pesanan dengan status tertentu
• Detail order — klik baris untuk lihat: item yang dipesan, modifier, total, info pembeli (nama, WA)
• Link invoice — setiap order PAID punya link ke invoice di Penjualan > Faktur

Tab Utama:

• Menunggu Konfirmasi — reservasi baru yang perlu disetujui (mode Manual)
• Terkonfirmasi — reservasi yang sudah disetujui, tampil per tanggal
• Selesai / Dibatalkan — arsip reservasi lalu

Operasi:

Reservasi yang ditolak mengirim notifikasi ke pelanggan dengan catatan alasan yang kamu isi.

Hanya pelanggan yang memiliki order COMPLETED di toko kamu yang bisa menulis ulasan — mencegah ulasan dari orang yang belum pernah beli.

Tab Ulasan:

• Semua — seluruh ulasan, diurutkan terbaru dulu
• Belum Dibalas — ulasan yang menunggu respons
• Perlu Perhatian — ulasan bintang 1 atau 2 (perlu tindak lanjut cepat)

Statistik:

• Rating rata-rata (dengan desimal, misal 4.3)
• Distribusi bintang (berapa % bintang 5, 4, 3, 2, 1)

Balas Ulasan:

1. Klik ulasan untuk buka detail
2. Ketik balasan (max 500 karakter)
3. Kirim — balasan tampil publik di bawah ulasan pelanggan

Sembunyikan Ulasan:

• Tombol "Sembunyikan" untuk ulasan spam, tidak relevan, atau melanggar ketentuan
• Ulasan tersembunyi tidak tampil di halaman publik tapi tetap tercatat di dashboard

Halaman utama Storefront (setelah wizard selesai) menampilkan analitik penjualan dari orders online.

Periode yang tersedia: 7 Hari | 30 Hari | 90 Hari

Metrik yang ditampilkan:

Setiap meja di outlet POS yang terhubung mendapatkan QR code uniknya. Saat pelanggan scan, menu langsung terbuka dengan meja sudah otomatis terpilih (Dine-in).

Cara Akses:

1. Buka Storefront > QR Meja (/storefront/qr-tables)
2. Halaman ini hanya muncul jika Mode F&B aktif
3. Pilih outlet dari dropdown (jika punya banyak outlet)

Download & Cetak:

Cara Pasang di Meja:

1. Print QR di kertas tebal (art paper 120gsm+)
2. Laminating agar tahan air dan cipratan makanan — direkomendasikan
3. Stand akrilik — taruh di atas meja agar mudah terlihat; beli di Tokopedia (search "stand QR akrilik")
4. Pasang di posisi yang mudah dijangkau — tidak terhalang menu fisik atau tempat bumbu

Catatan: Jika kamu menambah atau mengubah meja di POS Floor Plan, generate ulang QR untuk meja baru di halaman ini.

Ini adalah halaman yang dilihat pelanggan. Berikut apa yang tampil dan cara kerjanya:

Konten yang Tampil:

• Hero image (cover photo) full-bleed dengan badge logo toko kecil di pojok kiri-atas (kalau sudah diatur di Pengaturan → Invoice Branding dan tidak dimatikan di toggle "Tampilkan Logo di Banner") — tanpa overlay teks (redesign 2026-09-17). Nama toko tampil sebagai judul tepat di bawah hero.
• Kalau toko sedang tutup (jam operasional atau Hari Libur Khusus), seluruh halaman ini diganti dengan halaman khusus "Toko Sedang Tutup" — bukan sekadar badge
• Rating bintang dan jumlah ulasan
• Kategori dan fasilitas (ikon)
• Menu produk dengan foto, harga, dan deskripsi
• Tombol reservasi (jika aktif)
• Ulasan pelanggan terbaru
• Jam operasional lengkap
• Kontak WA, Instagram, Google Maps
• Saldo poin loyalty pelanggan (jika login sebagai shopper)
• Footer "Powered by FirstJournal" (muted, tidak mencolok)

Bagaimana Reservasi dari Sisi Pelanggan (3 Langkah):

1. Pelanggan klik tombol "Reservasi Meja" → pilih tanggal dan sesi waktu → lihat kapasitas tersisa
2. Isi form: nama, nomor WhatsApp, jumlah tamu, dan catatan opsional
3. Submit → tunggu konfirmasi (mode Manual) atau langsung terkonfirmasi (mode Auto)

Bagaimana Ulasan Bisa Ditulis:

• Hanya pelanggan dengan order COMPLETED bisa tulis ulasan
• Pelanggan login sebagai shopper → buka riwayat pesanan → klik "Tulis Ulasan" di order yang sudah selesai
• Rating bintang 1–5 + teks ulasan + opsional upload foto

Loyalty di Halaman Publik:

• Pelanggan yang login sebagai shopper melihat saldo poin mereka di toko kamu
• Ada tombol "Tukarkan Poin" saat checkout (jika saldo cukup untuk redeem)
• Halaman "Favorit" — tombol ♡ Favorit di hero toko, klik untuk simpan toko (toast "Ditambahkan ke Favorit ♥"). Toko favorit tampil sebagai strip khusus di homepage /toko

Fitur Tambahan untuk Pelanggan yang Login (/me):

• Poin Saya (/me/rewards) — halaman ringkasan poin lintas semua toko FirstJournal yang pernah dikunjungi. Tiap toko tampil sebagai kartu terpisah: badge tier (🥉 Bronze / 🥈 Silver / 🥇 Gold / 💎 Platinum), saldo poin, progress bar menuju tier berikutnya, dan kode member.
• Pesan Lagi ("🔁 Pernah Beli di Sini") — strip di homepage /toko dan di riwayat pesanan (/me/orders) menampilkan order COMPLETED terakhir pelanggan per toko, dengan link "Pesan Lagi →" yang membuka toko tersebut untuk pesan ulang (bukan re-add otomatis ke keranjang — pelanggan pilih ulang dari menu).
• Lacak Status Pesanan — setelah checkout, pelanggan bisa buka halaman status pesanan tanpa perlu login lewat link "🔔 Lacak Status Pesanan" (dikirim via token, berlaku 7 hari). Status: Pesanan Diterima → Sedang Disiapkan → Siap Diambil! → Pesanan Selesai — update live tanpa refresh manual.
• Notifikasi Push "Pesanan siap!" — di halaman /me, pelanggan bisa klik "Aktifkan" pada banner "Aktifkan Notifikasi Pesanan" untuk dapat notifikasi browser saat pesanan mereka siap diambil, bahkan saat browser tertutup. Di iPhone/iPad, perlu tambahkan situs ke Home Screen dulu (banner memberi instruksi). Fitur ini opt-in per pelanggan, tidak perlu diaktifkan dari sisi seller.

Setiap order yang berhasil dibayar (PAID) secara otomatis membuat dokumen akuntansi — tidak perlu input manual apapun.

Kapan jurnal terbuat: Tepat saat status order berubah ke PAID (setelah payment webhook diterima dari Midtrans, atau saat kasir konfirmasi bayar di kasir).

Struktur Jurnal Penjualan:

Struktur Jurnal HPP:

Stok berkurang otomatis dalam atomic transaction yang sama. Jika stok berkurang gagal (misalnya stok tidak cukup), seluruh proses PAID dibatalkan — kecuali kamu mengaktifkan toggle "Izinkan Order QR Meski Stok Habis" (lihat §4.9), yang mengizinkan order tetap masuk sebagai pre-order.

Di mana lihat invoice:

1. Penjualan > Faktur Penjualan — cari berdasarkan nomor invoice atau nama pelanggan
2. Storefront > Pesanan Online → klik detail order → klik link Invoice ID