Tutorial Penggunaan KokotHub

Buka beranda KokotHub. Halaman utama menampilkan daftar semua usaha dan organisasi (tenant) di Kota Kotamobagu.

Gunakan kolom pencarian di atas untuk mencari usaha berdasarkan nama atau jenis (toko, resto, kafe, organisasi).

Filter berdasarkan jenis usaha menggunakan tombol filter (Semua, Toko, Resto, Kafe, Organisasi).

Klik kartu tenant untuk mengunjungi profil publik mereka.

Scroll ke bawah ke section "Peta Sebaran Usaha & Organisasi". Peta menampilkan marker semua tenant berkoordinat.

Pin indigo = usaha (toko/resto/kafe), pin amber = organisasi.

Klik marker untuk melihat popup berisi nama, jenis, alamat, dan link ke profil tenant.

Di beranda, klik ikon chat di pojok kanan bawah untuk membuka chatbot.

Chatbot hanya menjawab berdasarkan data nyata KokotHub (tenant, menu, jam buka, status pesanan) — tidak mengarang.

Contoh pertanyaan: "Rekomendasi tempat makan di Kotamobagu?", "Jam buka Warung Bu Ati?", "Cek pesanan MKT-XXXXX".

Jika pertanyaan di luar data aplikasi, chatbot akan jujur mengatakan tidak tahu.

Buka katalog produk untuk melihat semua produk dari tenant dengan marketplace aktif.

Filter berdasarkan jenis (barang/makanan) dan gunakan pencarian untuk mencari produk.

Klik kartu produk untuk melihat detail lengkap (galeri, deskripsi, produk terkait).

Tombol + Keranjang langsung menambahkan produk ke keranjang tenant terkait.

Halaman detail produk menampilkan carousel galeri (gambar utama + foto tambahan).

Deskripsi produk, info tenant pemilik, dan produk terkait dari tenant yang sama.

Tombol Tambah ke Keranjang menambahkan produk ke keranjang tenant ini.

Setiap tenant memiliki halaman profil publik di /t/{slug} (mis. /t/warung-bu-ati).

Profil menampilkan: banner, logo, nama, jenis usaha, deskripsi, alamat, telepon, peta lokasi.

Tab navigasi: Market (produk), Berita, Event, Support.

Klik Market untuk berbelanja produk dari tenant ini.

Buka marketplace tenant (mis. /t/warung-bu-ati/market). Produk ditampilkan dalam kartu dengan foto, nama, harga, dan stok.

Klik tombol + Keranjang pada produk untuk menambahkannya ke keranjang.

Catatan: Keranjang hanya bisa berisi produk dari satu tenant pada satu waktu. Jika Anda sudah punya keranjang dari tenant lain, akan muncul peringatan.

Klik ikon keranjang atau buka halaman keranjang untuk melihat item yang sudah ditambahkan.

Atur jumlah tiap item, atau klik Kosongkan untuk menghapus semua.

Klik Checkout untuk melanjutkan ke pembayaran.

Isi nama dan nomor HP pemesan.

Pilih metode pengambilan: Pickup (ambil di tempat) atau Delivery (diantar).

Pilih metode pembayaran: Tunai, Transfer Bank, atau QRIS (sesuai yang diaktifkan tenant).

Jika Transfer: nomor rekening tenant akan tampil. Upload bukti transfer.

Jika QRIS: gambar QRIS tenant akan tampil. Scan & bayar, lalu upload bukti.

Klik Checkout. Anda akan diarahkan ke halaman sukses dengan nomor pesanan.

Buka halaman cek pesanan.

Masukkan nomor pesanan (mis. MKT-XXXXXX-XXXXX) yang Anda dapat di halaman sukses.

Klik Cek. Status pesanan akan tampil: Diterima → Dikonfirmasi → Diproses → Selesai Diproses → Selesai.

Untuk pesanan delivery, status "Siap diambil/diantar" muncul saat pesanan sudah selesai diproses.

Isi nama, kontak (HP), dan jumlah tiket.

Pilih metode pembayaran: Tunai, Transfer Bank, atau QRIS.

Jika ada kolom pendaftaran kustom (mis. Ukuran Kaos, Catatan Alergi), isi sesuai kebutuhan.

Buka halaman cek tiket.

Masukkan kode pendaftaran (mis. TKT-XXXXXXX) yang Anda dapat di halaman sukses.

Anda juga dapat scan QR code dari halaman sukses untuk langsung ke halaman cek status.

Status yang tampil: Menunggu Konfirmasi (pending), Sudah Dibayar (confirmed), atau Dibatalkan (cancelled).

Detail event, penyelenggara, jumlah tiket, total, dan metode bayar juga ditampilkan.

Buka halaman support tenant (mis. /t/warung-bu-ati/support).

Isi nama, kontak, dan pesan/keluhan Anda.

Klik Kirim. Tiket support akan diterima oleh tenant untuk ditindaklanjuti.

Login sebagai user umum, lalu buuka menu Keuangan di sidebar dashboard.

Halaman menampilkan ringkasan: total pemasukan, pengeluaran, dan selisih untuk bulan ini.

Grafik Dana Masuk & Keluar menampilkan bar chart harian (Chart.js) — hijau untuk masuk, merah untuk keluar.

Rekap per Kategori menampilkan komposisi pengeluaran (doughnut chart) dan daftar pemasukan/pengeluaran per kategori dengan persentase.

Gunakan selector pencatatan di atas untuk memilih dompet (mis. "Pribadi") atau lihat gabungan semua dompet.

Di halaman Keuangan, scroll ke section "Catat Manual" di sisi kiri.

Pilih Pencatatan (dompet) — mis. "Pribadi".

Pilih Jenis: Keluar (Pengeluaran) atau Masuk (Pemasukan).

Masukkan Nominal (wajib), pilih Kategori (mis. Makanan & Minuman, Gaji, dll), dan Tanggal.

Isi Keterangan opsional (mis. "Belanja bulanan").

Opsional: tambah Rincian Item (nama, qty, harga) dengan klik "Tambah Item" — berguna untuk mencatat belanja per item.

Opsional: unggah foto struk/bukti di field "Struk/Foto".

Klik Simpan. Transaksi langsung muncul di daftar dan grafik diperbarui.

Di sisi kanan halaman Keuangan, terdapat Daftar Transaksi dengan ikon panah hijau (masuk) atau merah (keluar).

Filter berdasarkan Bulan (default) atau Range tanggal dengan toggle di header tabel.

Filter juga berdasarkan jenis: Semua, Masuk, atau Keluar.

Klik ikon di samping transaksi untuk melihat rincian item (jika ada).

Klik ikon untuk edit transaksi, atau ikon untuk hapus.

Jika transaksi punya foto struk, thumbnail kecil tampil di baris — klik untuk melihat perbesar.

Klik tombol "Scan Struk" di halaman Keuangan untuk membuka halaman scan.

Unggah foto struk belanja dengan klik "Browse" atau ambil foto langsung dari kamera HP (jika dibuka di mobile).

Klik "Ekstrak Teks dari Struk" — sistem akan menjalankan OCR (Tesseract.js) di browser Anda untuk membaca teks struk.

Tunggu beberapa detik — progress bar menunjukkan proses pembacaan teks.

Hasil ekstraksi otomatis mengisi: Nominal (total), Tanggal, Catatan (nama toko), dan Rincian Item belanja.

Periksa hasil — OCR bisa meleset. Edit nominal, tanggal, dan item jika perlu. Centang "Sinkronkan total item ke Nominal Pengeluaran" untuk otomatis isi nominal dari total item.

Klik "Simpan Pengeluaran". Transaksi tersimpan dengan foto struk dan rincian item lengkap.

OCR berjalan sepenuhnya di browser Anda — tidak ada data struk yang dikirim ke server untuk diproses. Hanya hasil teks yang disimpan.

Login dengan akun owner/manager. Anda akan diarahkan ke dashboard tenant.

Dashboard menampilkan ringkasan: jumlah produk, pesanan, berita, event, dan grafik aktivitas.

Sidebar kiri berisi menu modul: Gudang, POS, Resto/Kafe, Dapur, Pesanan, Berita, Event, Ticketing, Laporan, Pengaturan, Staf.

Jika Anda punya multiple tenant, gunakan dropdown tenant switcher di sidebar atas.

Buka Pengaturan di sidebar. Isi nama usaha, jenis, deskripsi, alamat, telepon.

Upload logo dan banner tenant (gambar akan otomatis di-encode ke webp).

Aktifkan/nonaktifkan marketplace dan isi catatan toko (mis. jam buka).

Set PPN (%) — nilai PPN akan otomatis dihitung di POS resto dan laporan.

Klik Simpan untuk menyimpan perubahan.

Di Pengaturan, scroll ke section "Lokasi di Peta".

Klik peta untuk menandai lokasi usaha Anda.

Atau klik "Gunakan Lokasi Saya (GPS)" untuk menggunakan lokasi GPS perangkat.

Pin dapat di-drag untuk menyesuaikan posisi secara manual.

Klik "Hapus Lokasi" untuk menghapus pin. Simpan pengaturan untuk menyimpan koordinat.

Di Pengaturan, section "Metode Pengambilan & Pembayaran".

Aktifkan metode pengambilan: Pickup (ambil di tempat) dan/atau Delivery (diantar).

Aktifkan metode pembayaran: Tunai, Transfer Bank, QRIS.

Jika Transfer aktif: isi nama bank dan nomor rekening.

Jika QRIS aktif: upload gambar QRIS Anda.

Pengaturan ini berlaku untuk marketplace dan pembayaran tiket event.

Buka Staf di sidebar. Halaman menampilkan daftar staf tenant.

Klik + Tambah Staf untuk menambah anggota tim.

Pilih role: Owner, Manager, Kasir, Gudang, Dapur, Editor.

Setiap role memiliki akses modul yang berbeda (mis. Kasir bisa akses POS tapi tidak Gudang).

Owner ditandai dengan badge Owner dan tidak bisa dihapus.

Buka Gudang di sidebar. Halaman menampilkan daftar item stok dengan jumlah per gudang.

Tambah item baru: isi nama, kategori, satuan, harga, dan stok awal per gudang.

Mutasi stok: receive (terima barang masuk), issue (keluarkan), adjust (penyesuaian).

Klik item untuk melihat kartu stok (riwayat masuk/keluar).

Stok terhubung otomatis dengan POS dan marketplace — penjualan akan memotong stok.

Buka POS di sidebar. Pilih item dari daftar produk untuk ditambahkan ke keranjang kasir.

Atur jumlah item, lihat subtotal di panel kanan.

Klik Bayar → pilih metode (cash/qris/debit/transfer) → masukkan jumlah bayar.

Struk pencatatan akan tampil. Stok gudang otomatis berkurang sesuai item terjual.

Riwayat transaksi tersimpan dan dapat dilihat kembali.

Buka Resto/Kafe di sidebar. Halaman menampilkan daftar pesanan aktif.

Buat pesanan baru: pilih meja, jenis (dine-in/takeaway), tambah menu, catatan per item.

Pesanan dibuat dengan status pending (belum dibayar) → otomatis muncul di layar dapur.

Di Kasir Resto, buat pesanan baru dengan memilih meja dan menambahkan menu.

Pesanan akan langsung terkirim ke layar dapur untuk diproses.

Buka Dapur di sidebar (atau akses langsung di monitor dapur).

Layar menampilkan semua pesanan aktif dengan status: Preparing → Ready → Served.

Klik tombol untuk mengubah status pesanan. Warna kartu berubah sesuai status.

Setiap item pesanan menampilkan nama, jumlah, dan catatan dari kasir.

Pesanan dari marketplace juga muncul di sini (source: marketplace).

Buka Pembayaran Resto di sidebar. Halaman menampilkan tagihan yang belum dibayar.

Klik Bayar pada tagihan. Modal pembayaran muncul.

Pilih metode (cash/qris/debit/transfer), masukkan diskon (Rp) jika ada.

Sistem otomatis menghitung PPN (%) dari subtotal setelah diskon.

Masukkan jumlah bayar → lihat kembalian (untuk cash) → konfirmasi.

Status pesanan otomatis berubah menjadi completed (lunas).

Buka Pesanan di sidebar Resto untuk melihat riwayat semua pesanan.

Kolom Pembayaran menampilkan: Lunas (metode + waktu) / Belum Bayar / Dibatalkan.

Buka Pesanan di sidebar. Halaman menampilkan semua pesanan marketplace masuk.

Status pesanan: Baru → Dikonfirmasi → Diproses → Selesai Diproses → Selesai.

Klik Konfirmasi untuk menerima pesanan. Stok item stock_item otomatis berkurang; item fnb_item dibuatkan pesanan FNB ke dapur.

Untuk pesanan transfer/QRIS, bukti bayar tampil sebagai thumbnail — klik untuk perbesar.

Update status pesanan melalui tombol aksi yang tersedia.

Buka Berita di sidebar. Halaman menampilkan daftar berita tenant.

Klik + Tulis Berita untuk membuat berita baru.

Isi judul, isi berita, upload gambar (bisa multiple), set tanggal publikasi.

Setelah publish, berita tampil di profil publik tenant dan di katalog berita utama.

Edit/hapus berita kapan saja melalui tombol aksi.

Buka Event di sidebar. Halaman menampilkan daftar event tenant dengan jumlah tiket terjual.

Klik + Event Baru untuk membuat event.

Isi judul, slug (URL), deskripsi, gambar, lokasi, tanggal mulai/selesai.

Aktifkan "Event berbayar?" untuk menjual tiket. Isi harga tiket dan kuota.

Klik Simpan. Event tersimpan dengan status draft.

Klik tombol publish/unpublish di daftar event untuk mengubah status.

Edit event untuk mengubah detail atau menambah kolom pendaftaran kustom.

Buka Edit Event. Scroll ke section "Kolom Pendaftaran Kustom".

Isi Nama Kolom (mis. "Ukuran Kaos"), pilih Tipe: Teks Pendek, Teks Panjang, Angka, atau Pilihan (dropdown).

Untuk tipe Pilihan, isi opsi dipisah koma (mis. S, M, L, XL).

Centang Wajib jika kolom harus diisi peserta.

Klik + Tambah Kolom. Kolom akan muncul di form beli tiket.

Hapus kolom dengan klik tombol trash. Jawaban yang sudah terisi juga akan terhapus.

Klik "Lihat Data Pendaftar" untuk melihat semua jawaban pendaftar.

Buka Ticketing di sidebar. Halaman menampilkan semua pesanan tiket event.

Kolom Bayar menampilkan: badge Tunai, thumbnail bukti bayar (klik untuk perbesar), atau badge warning jika bukti belum diupload.

Review bukti bayar dengan klik thumbnail gambar.

Setelah verifikasi: klik Konfirmasi untuk mengubah status menjadi confirmed (sudah dibayar).

Klik Batalkan jika pesanan perlu dibatalkan (status menjadi cancelled).

Buka Edit Event → klik "Lihat Data Pendaftar", atau akses /dashboard/event/{id}/pendaftar.

Tabel menampilkan semua pendaftar dengan: kode pesanan, nama, kontak, jumlah, total, status, tanggal.

Jika ada kolom kustom, kolom tambahan muncul di tabel (mis. "Ukuran Kaos", "Catatan Alergi").

Klik Ekspor CSV untuk mengunduh data semua pendaftar dalam format CSV (untuk Excel/Google Sheets).

Buka Laporan di sidebar. Halaman menampilkan ringkasan transaksi tenant.

KPI: total transaksi lunas, total PPN terkumpul, total diskon, jumlah pesanan.

Grafik tren transaksi per periode.

Tabel detail transaksi dengan kolom PPN dan diskon.

Klik Ekspor CSV untuk mengunduh laporan dalam format CSV.

Login sebagai superadmin (admin@kotahub.test). Buka Dashboard Kota.

KPI utama: jumlah tenant aktif, PPN terkumpul, distribusi jenis usaha.

Grafik tren transaksi dan pertumbuhan tenant (Chart.js).

Tabel rekap PPN per tenant dengan detail PPN terkumpul.

Klik Ekspor CSV untuk mengunduh rekap PPN semua tenant.

Hanya superadmin/tenant pemerintah yang dapat mengakses dashboard ini (tenant lain mendapat 403).