Ibonie - Aplikasi POS & Manajemen Bisnis

Selamat datang di aplikasi Point of Sale (POS) dan manajemen bisnis Anda. Aplikasi ini dirancang untuk membantu mengelola operasional harian kafe atau restoran kecil Anda, mulai dari pencatatan penjualan hingga manajemen inventaris dan laporan keuangan.

✨ Fitur Utama

Aplikasi ini dilengkapi dengan serangkaian fitur canggih untuk menyederhanakan manajemen bisnis Anda.

Kasir & Penjualan (Point of Sale)

• Antarmuka Kasir (POS): Antarmuka yang cepat dan intuitif untuk mencatat pesanan, dengan dukungan untuk kategori menu, add-on, dan catatan per item.
• Tampilan Dapur (Kitchen Display System): Layar terpisah yang menampilkan pesanan masuk secara real-time untuk tim dapur, dengan kemampuan untuk menandai pesanan sebagai selesai.
• Menu Publik & Pesan Mandiri: Halaman menu yang dapat diakses pelanggan melalui QR code untuk melihat menu dan membuat pesanan sendiri, yang kemudian muncul di kasir untuk diproses.
• Manajemen Diskon & Biaya Tambahan: Terapkan diskon (persentase atau nominal) dan biaya tambahan (seperti service charge) secara dinamis saat transaksi.

Manajemen Inventaris

• Pelacakan Stok Real-time: Stok bahan baku berkurang secara otomatis sesuai resep saat produk terjual.
• Peringatan Stok Rendah: Dapatkan notifikasi di dashboard ketika stok item mencapai ambang batas minimum.
• Pesanan Pembelian (Purchase Order): Buat dan kelola PO ke supplier, lacak item yang dipesan, dan catat penerimaan barang yang otomatis memperbarui stok.
• Stok Opname: Lakukan penyesuaian stok secara massal dengan mudah dan lacak setiap perubahannya.
• Pencatatan Limbah: Catat bahan baku atau produk jadi yang rusak/terbuang, yang juga akan tercatat sebagai kerugian.
• Retur ke Supplier: Proses pengembalian barang ke supplier yang akan mengurangi stok dan mencatat transaksi pemasukan.

Manajemen Keuangan

• Buku Besar Digital: Catat semua transaksi pemasukan dan pengeluaran di satu tempat.
• Lacak Hutang & Piutang: Tandai transaksi sebagai "Belum Lunas" untuk melacak hutang ke supplier atau piutang dari pelanggan.
• Manajemen Kategori: Kelola kategori transaksi kustom untuk pemasukan dan pengeluaran.

Laporan & Analitik

• Dashboard Utama: Tampilan ringkas performa harian, termasuk omzet, jumlah transaksi, penjualan mingguan, dan aktivitas terbaru.
• Analisis Penjualan: Lihat produk terlaris, total pendapatan per item, dan tren penjualan dalam rentang waktu tertentu.
• Analisis Laba per Produk: Hitung laba kotor untuk setiap item menu berdasarkan harga jual dan biaya modal (HPP) dari resep.
• Laporan HPP (COGS): Dapatkan rincian lengkap tentang biaya pokok penjualan untuk setiap produk yang terjual.
• Laporan Arus Kas (Cash Flow): Lacak pergerakan uang masuk dan keluar secara detail dengan saldo awal dan akhir.
• Analisis Pelanggan: Identifikasi pelanggan teratas berdasarkan total belanja dan frekuensi kunjungan.
• Laporan Konsinyasi: Lacak penjualan produk titipan (konsinyasi) dan hitung komisi serta jumlah yang harus disetor ke supplier.
• Laporan Pergerakan Stok: Lihat item mana yang paling cepat dan paling lambat terjual (fast/slow-moving).
• Kartu Stok: Lacak riwayat pergerakan masuk dan keluar untuk setiap item inventaris secara detail.
• Laporan Lanjutan (Admin): Analisis performa kasir, jam sibuk (peak hours), dan ringkasan metode pembayaran.
• Ekspor ke CSV: Ekspor data keuangan dan laporan penjualan ke format CSV untuk analisis lebih lanjut.

Manajemen Pelanggan & Supplier

• Database Kontak (CRM): Simpan data pelanggan dan supplier di satu tempat.
• Sistem Poin Loyalitas: Berikan poin kepada pelanggan setia untuk setiap pembelian dan izinkan mereka menukarkannya sebagai diskon.
• Riwayat Pembelian Pelanggan: Lihat riwayat transaksi dari setiap pelanggan.

Manajemen Menu & Produk

• Manajemen Menu Fleksibel: Tambah dan edit item menu, atur harga, unggah gambar, dan kelola kategori.
• Manajemen Resep (HPP): Tentukan resep untuk setiap item menu untuk pengurangan stok otomatis dan perhitungan HPP.
• Manajemen Add-on: Buat opsi tambahan (add-on) yang dapat dipilih pelanggan, lengkap dengan penyesuaian harga dan pengurangan stok.
• Dukungan Produk Konsinyasi: Kelola produk titipan dari supplier, lengkap dengan pengaturan komisi.

Manajemen Pengguna & Toko

• Sistem Multi-User dengan Peran: Dukungan untuk peran Admin, User, dan Kasir dengan hak akses yang berbeda.
• Profil Toko: Kustomisasi nama, alamat, logo, dan detail kontak toko Anda yang akan muncul di struk.

Manajemen Sesi Kasir

• Sesi Kasir (Buka/Tutup Toko): Fitur untuk memulai dan mengakhiri sesi kasir dengan pencatatan modal awal dan kas akhir.
• Laporan Akhir Hari: Lihat rekapitulasi setiap sesi, termasuk total penjualan, rincian pembayaran, dan selisih kas.

🛠️ Teknologi yang Digunakan

• Frontend: React, TypeScript, Vite
• Styling: Tailwind CSS, shadcn/ui
• Backend & Database: Supabase (Authentication, Postgres DB, Edge Functions)
• Data Fetching: React Query (@tanstack/react-query)
• Routing: React Router
• Manajemen Form: React Hook Form & Zod untuk validasi

⚙️ Instalasi & Konfigurasi Lokal

Ikuti langkah-langkah berikut untuk menjalankan proyek ini di lingkungan pengembangan lokal Anda.

Prasyarat

• Node.js (v18.x atau lebih baru)
• npm (biasanya terinstal bersama Node.js)
• Akun Supabase (paket gratis sudah cukup)

1. Konfigurasi Supabase

1. Buat Proyek Supabase:

   • Kunjungi supabase.com dan buat proyek baru.
   • Simpan Project URL dan anon public key Anda dari Project Settings > API.

2. Terapkan Skema Database:

   • Buka file supabase/schema.sql di proyek ini.
   • Salin seluruh isinya.
   • Buka SQL Editor di dashboard Supabase Anda, tempelkan skrip tersebut, dan jalankan. Ini akan membuat semua tabel, fungsi, dan kebijakan keamanan yang diperlukan.

3. Konfigurasi Supabase Storage (Untuk Gambar Menu):

   • Di dashboard Supabase Anda, navigasi ke bagian Storage.
   • Klik "Create a new bucket".
   • Isi nama bucket dengan menu_images.
   • Centang opsi "Public bucket".
   • Klik "Create bucket".
   • Setelah bucket dibuat, kembali ke SQL Editor dan jalankan skrip berikut untuk mengatur kebijakan keamanan (Policies) agar hanya pengguna yang login yang bisa mengunggah gambar:

     -- 1. Kebijakan untuk mengizinkan semua orang melihat gambar
     CREATE POLICY "Public read access for menu images"
     ON storage.objects FOR SELECT
     USING ( bucket_id = 'menu_images' );
     
     -- 2. Kebijakan untuk mengizinkan pengguna yang terautentikasi mengunggah gambar
     CREATE POLICY "Authenticated users can upload menu images"
     ON storage.objects FOR INSERT
     WITH CHECK ( bucket_id = 'menu_images' AND auth.role() = 'authenticated' );
     
     -- 3. Kebijakan untuk mengizinkan pengguna memperbarui gambar mereka sendiri
     CREATE POLICY "Authenticated users can update their own images"
     ON storage.objects FOR UPDATE
     USING ( bucket_id = 'menu_images' AND auth.uid() = owner );
     
     -- 4. Kebijakan untuk mengizinkan pengguna menghapus gambar mereka sendiri
     CREATE POLICY "Authenticated users can delete their own images"
     ON storage.objects FOR DELETE
     USING ( bucket_id = 'menu_images' AND auth.uid() = owner );

2. Instalasi Lokal

1. Clone Repositori:

   git clone https://github.com/NAMA_ANDA/NAMA_REPO_ANDA.git
   cd NAMA_REPO_ANDA

2. Instal Dependensi:

   npm install

3. Buat File Environment Variable:

   • Salin file .env.example menjadi .env.
   • Buka file .env yang baru Anda buat.
   • Isi VITE_SUPABASE_URL dengan Project URL Anda.
   • Isi VITE_SUPABASE_ANON_KEY dengan anon public key Anda.

3. Jalankan Aplikasi

# Jalankan server pengembangan Vite
npm run dev

# Aplikasi akan tersedia di http://localhost:5173 (atau port lain yang tersedia)

🚀 Panduan Deployment

Anda dapat mendeploy aplikasi ini ke platform hosting seperti Vercel atau Netlify. Berikut adalah contoh panduan menggunakan Vercel.

Prasyarat

• Akun Vercel.
• Proyek Anda sudah di-push ke repositori Git (GitHub, GitLab, Bitbucket).

Langkah-langkah Deployment

1. Impor Proyek di Vercel:

   • Login ke akun Vercel Anda.
   • Klik "Add New... > Project".
   • Pilih repositori Git Anda dan klik "Import".

2. Konfigurasi Proyek:

   • Vercel akan secara otomatis mendeteksi bahwa ini adalah proyek Vite. Pengaturan Build and Output Settings biasanya tidak perlu diubah.
   • Buka bagian Environment Variables.

3. Setel Environment Variables:

   • Tambahkan dua variabel berikut, sama seperti di file .env lokal Anda:
     • VITE_SUPABASE_URL: Isi dengan Project URL Supabase Anda.
     • VITE_SUPABASE_ANON_KEY: Isi dengan anon public key Supabase Anda.

4. Deploy:

   • Klik tombol "Deploy". Vercel akan memulai proses build dan deployment.

5. Konfigurasi URL di Supabase (Penting!):

   • Setelah deployment berhasil, Vercel akan memberikan Anda URL produksi (misal: https://ibonie.vercel.app).
   • Buka dashboard Supabase Anda.
   • Navigasi ke Authentication > URL Configuration.
   • Tambahkan URL Vercel Anda ke dalam Site URL. Ini penting agar redirect setelah login/logout berfungsi dengan benar.

Aplikasi Anda sekarang sudah live!

📖 Cara Menggunakan

1. Daftar Akun Pertama: Setelah aplikasi berjalan, daftar akun baru. Akun pertama ini secara default akan menjadi user. Anda perlu mengubah perannya menjadi admin secara manual melalui tabel profiles di Supabase untuk mendapatkan akses penuh.
2. Atur Profil Toko: Buka halaman "Profil Toko" dan isi detail bisnis Anda.
3. Buat Kategori: Buka "Kategori Transaksi" dan "Kategori Menu" untuk membuat kategori dasar.
4. Isi Inventaris: Tambahkan bahan baku Anda di halaman "Inventaris".
5. Buat Menu: Buka "Kelola Menu" untuk menambahkan produk yang Anda jual. Tautkan resep ke item inventaris jika perlu.
6. Mulai Sesi Kasir: Buka halaman "Kasir (POS)" dan mulai sesi baru dengan memasukkan modal awal.
7. Mulai Berjualan!

🙏 Acknowledgements & Dukungan

Pengembangan Awal

Aplikasi ini pada awalnya dikembangkan menggunakan Dyad, sebuah platform berbasis AI untuk membangun dan memodifikasi aplikasi web. Struktur awal, komponen UI, fitur-fitur inti, dan logika backend-nya dihasilkan dengan bantuan editor AI dari Dyad. Proses pengembangan interaktif ini memungkinkan pembuatan aplikasi yang kompleks ini dalam waktu yang jauh lebih singkat.

Kami berterima kasih kepada tim Dyad atas alat inovatif yang mereka sediakan.

Dukung Proyek Ini

Jika Anda merasa aplikasi ini bermanfaat dan ingin mendukung pengembangan lebih lanjut, termasuk untuk membantu menutupi biaya API AI seperti Gemini, Anda dapat memberikan donasi melalui Ko-fi.

Setiap dukungan sangat kami hargai!