Sedia POS — Sistem Kasir & Point of Sale Multi-Kanal Modern

Sebuah aplikasi Point of Sale (POS) dan kasir modern berkecepatan tinggi yang dirancang untuk toko ritel, antrean transaksi cepat, dan operasional bisnis multi-kanal. Dibangun secara menyeluruh (end-to-end) sebagai Full-Stack Engineer (Flutter & Laravel) — terhubung langsung dengan sistem inventaris pusat untuk pencarian produk real-time, pengelolaan keranjang belanja split-screen, pemrosesan multi-pembayaran (Tunai, QRIS, Kartu), antrean tahan pesanan (hold/draft order), dan cetak struk digital dengan barcode.

---

Ringkasan Proyek

• Kategori: Proyek Enterprise / Portofolio Showcase
• Peran: Full-Stack Engineer (Frontend Flutter & Backend Laravel)
• Teknologi Frontend: Flutter 3.x, Dart (Sound Null Safety), BLoC Pattern (flutter_bloc), Freezed, Dio / HTTP Client, Syncfusion Flutter Barcodes, Flutter TypeAhead, CachedNetworkImage, SvgPicture
• Teknologi Backend: Laravel 11, PHP 8.2+, MySQL / MariaDB, Laravel Sanctum, Eloquent ORM, Database Transactions, RESTful API Architecture

---

Latar Belakang & Motivasi

Dalam operasional toko ritel yang sibuk, kecepatan proses kasir, akurasi perhitungan, dan fleksibilitas transaksi adalah kunci kepuasan pelanggan. Sistem kasir tradisional sering kali memiliki antarmuka yang kaku, lambat dalam pencarian produk, dan tidak memiliki fitur untuk menunda transaksi saat pelanggan ingin mengambil barang tambahan. Selain itu, sistem POS yang terpisah sering menyebabkan selisih data stok dengan gudang pusat.

Sedia POS dikembangkan untuk menjawab kebutuhan operasional tersebut dengan menghadirkan terminal kasir yang cepat, responsif, dan mudah digunakan:

• Alur Transaksi Kasir Berkecepatan Tinggi: Pencarian produk instan berdasarkan nama, kategori, maupun kode barcode.
• Fleksibilitas Antrean Pesanan (Hold & Resume): Kemampuan menahan (hold) keranjang belanja pelanggan ke dalam daftar draft order dan memanggilnya kembali kapan saja tanpa mengulang input barang.
• Dukungan Beragam Metode Pembayaran: Memproses pembayaran Tunai dengan hitungan kembalian otomatis, QRIS, Dompet Digital, hingga Kartu Debit/Kredit.
• Sinkronisasi Stok Otomatis & Cetak Struk: Pengurangan stok otomatis di database gudang pusat saat transaksi selesai, disertai struk belanja digital yang memuat barcode transaksi.

---

Kontribusi Full-Stack Saya

Perancangan Alur & Antarmuka Kasir Ergonomis

• Merancang dan membangun aplikasi POS dari awal dengan tata letak split-screen modern yang menempatkan katalog produk dan panel keranjang belanja secara berdampingan.
• Membangun kalkulator keranjang dinamis yang menghitung kuantitas barang, diskon persentase/nominal, pajak, subtotal, dan total akhir dalam format Rupiah secara real-time.
• Mengintegrasikan fitur pendaftaran pelanggan langsung dari halaman kasir tanpa mengganggu transaksi yang sedang berjalan.

Manajemen State Modular & Terprediksi dengan BLoC

• Menyusun arsitektur state aplikasi ke dalam modul BLoC terpisah (CheckoutBloc, OrderBloc, DraftOrderBloc, ProductBloc, CustomerBloc) untuk alur data yang bersih dan terstruktur.
• Memanfaatkan state immutable Freezed untuk memberikan respon antarmuka instan saat menambah barang, mengubah jumlah pesanan, atau mengosongkan keranjang.
• Mengelola penyimpanan lokal menggunakan SharedPreferences agar antrean pesanan yang ditahan (draft order) tetap aman meskipun aplikasi ditutup atau perangkat mati mendadak.

Sistem Pembayaran Multi-Metode & Pembuatan Struk Digital

• Membangun dialog pembayaran lengkap yang mendukung Tunai, QRIS, dan Transfer Kartu disertai tombol nominal uang pas dan perhitungan kembalian otomatis.
• Mengintegrasikan library syncfusion_flutter_barcodes untuk mencetak barcode dan QR code unik pada setiap transaksi struk belanja.
• Merancang tampilan pratinjau faktur (PrintInvoicePreviewDialog) yang disesuaikan untuk standar printer thermal kasir.

Integrasi API Backend & Konsistensi Stok Transaksional

• Menghubungkan aplikasi Flutter dengan API Laravel untuk pengiriman data pesanan, sinkronisasi katalog produk, dan data pelanggan.
• Menerapkan transaksi basis data (DB::transaction) di backend untuk memastikan pencatatan penjualan dan pemotongan stok gudang berjalan secara atomik dan aman.
• Melakukan standardisasi format mata uang Rupiah (toRupiah()) dan waktu lokal pada seluruh tampilan struk dan riwayat transaksi.

---

Fitur Produk Inti

1. Terminal Kasir Interaktif & Keranjang Belanja

• Tampilan dua panel dengan katalog produk di sisi kiri dan keranjang belanja aktif di sisi kanan.
• Tab filter kategori untuk navigasi cepat (Elektronik, Aksesoris, Audio Gear, dll.).
• Pengaturan jumlah item instan (+ / -), hapus baris item, dan tombol hapus keranjang sekali klik.

2. Antrean Tahan Pesanan (Hold / Draft Order)

• Fitur menunda keranjang belanja saat pelanggan masih memilih barang, menyimpannya ke daftar antrean draft.
• Panggilan kembali (restore) pesanan dari daftar draft ke keranjang kasir dalam satu klik.

3. Pemrosesan Multi-Metode Pembayaran

• Pembayaran tunai dengan tombol pecahan cepat (Rp 50.000, Rp 100.000, Uang Pas) dan hitungan kembalian otomatis.
• Pembayaran non-tunai (QRIS, E-Wallet, Kartu) dengan pencatatan nomor referensi pembayaran.

4. Struk Penjualan Digital & Pratinjau Cetak

• Pratinjau struk belanja lengkap dengan kop toko, nama kasir, data pelanggan, rincian barang, pajak, dan total bayar.
• Barcode transaksi tercetak otomatis untuk kebutuhan verifikasi retur atau garansi.

5. Riwayat Transaksi & Audit Penjualan

• Daftar lengkap riwayat penjualan dengan filter kalender dan pemilih bulan (mat_month_picker_dialog).
• Fitur pemeriksaan ulang rincian pesanan dan cetak ulang struk transaksi lama.

6. Pendaftaran Cepat Data Pelanggan

• Form modal ringkas untuk menambahkan nama, nomor telepon, dan alamat pelanggan langsung dari layar checkout.

---

Teknologi & Arsitektur (Tech Stack)

• Frontend: Flutter SDK (Dart), arsitektur BLoC (flutter_bloc), flutter_typeahead untuk pencarian prediktif cepat, syncfusion_flutter_barcodes untuk rendering barcode, cached_network_image untuk performa mulus grid produk.
• Backend: Laravel 11 dengan Eloquent ORM, database MySQL, keamanan token Laravel Sanctum, dan pemrosesan transaksi basis data atomik.
• Standar API: Respon JSON RESTful terstandarisasi (status, message, data) dengan kode status HTTP semantik (200, 201, 400, 401, 422, 500).

---

Tantangan Teknis & Solusi

1. Memastikan Pencarian Produk Berjalan Cepat Tanpa Lag

• Tantangan: Pada toko dengan banyak produk, pencarian data di antarmuka kasir dapat menyebabkan penurunan performa (UI jank) jika proses filtering membebani main thread.
• Solusi: Mengimplementasikan flutter_typeahead dengan teknik debounce input dan pencarian terindeks di memori, menghasilkan saran produk dan pencocokan barcode secara instan tanpa jeda.

2. Menangani Penundaan Transaksi Tanpa Kehilangan Data (Fitur Hold Order)

• Tantangan: Saat pelanggan meninggalkan kasir sementara, kasir harus melayani pelanggan berikutnya tanpa menghapus atau menginput ulang keranjang sebelumnya.
• Solusi: Membangun modul DraftOrderBloc yang terintegrasi dengan penyimpanan lokal perangkat. Pesanan keranjang belanja dapat disimpan ke antrean draft dan dipanggil kembali lengkap dengan diskon dan data pelanggan yang telah dipilih.

3. Mencegah Selisih Stok Antara Penjualan Kasir dan Gudang Pusat

• Tantangan: Transaksi kasir yang berlangsung cepat dapat menyebabkan catatan stok tidak sinkron dengan gudang pusat jika proses request tidak ditangani secara transaksional.
• Solusi: Membungkus proses checkout di backend dalam transaksi basis data (DB::transaction). Ketika transaksi berhasil, sistem secara bersamaan mencatat penjualan dan mengurangi saldo stok gudang terkait, menjaga data stok selalu akurat.

4. Merancang Tata Letak Ergonomis untuk Berbagai Ukuran Layar POS

• Tantangan: Perangkat kasir sangat bervariasi, mulai dari tablet Android 10 inci hingga layar monitor sentuh desktop yang lebar. Tata letak yang kaku dapat membuat tombol terlalu kecil atau menyisakan ruang kosong yang tidak proporsional.
• Solusi: Mengembangkan sistem grid adaptif yang secara dinamis menyesuaikan jumlah kolom produk (2 hingga 5 kolom) dan proporsi panel keranjang belanja sesuai resolusi layar yang tersedia, menjaga kenyamanan operasional kasir.

---

Pembelajaran Teknis & Poin Kunci

• Pengembangan UI Kecepatan Tinggi (High-Velocity UI): Memahami cara mengoptimalkan performa antarmuka Flutter untuk lingkungan kasir yang membutuhkan respon sentuhan instan dan bebas jeda.
• Pemisahan State pada Alur Transaksional: Menguasai pengelolaan berbagai alur data interdependen (keranjang aktif, antrean draft, modal pelanggan, dan dialog pembayaran) secara rapi menggunakan pola BLoC.
• Integrasi Komersial Menyeluruh: Memperoleh pengalaman langsung dalam menghubungkan terminal POS dengan backend inventaris dan akuntansi pusat, menciptakan ekosistem operasional ritel yang terintegrasi.