Kaze Point of Sale (POS) System (PT Data Andalan Utama)
Aplikasi Point of Sale (POS) berbasis React 19 dan Frappe Framework dengan alur kasir cepat, integrasi payment gateway Midtrans otomatis, dan manajemen master data harga produk.
Antarmuka kasir Kaze POS dengan katalog menu visual, keranjang belanja real-time, dan dialog pembayaran multi-metode
Gambaran & Masalah
Sistem kasir ritel tradisional sering kali memiliki antarmuka yang kaku, lambat dalam memproses transaksi pada jam sibuk, serta memerlukan pencatatan manual yang terpisah untuk pembayaran non-tunai. Kebutuhan utamanya adalah menghadirkan aplikasi kasir modern (Single Page Application) yang ringan dan responsif, sekaligus terintegrasi langsung dengan ekosistem enterprise ERPNext/Frappe untuk sinkronisasi inventori dan harga secara terpusat.
Tantangan rekayasa pada proyek ini adalah membangun antarmuka kasir berlatensi rendah dengan type safety menyeluruh di sisi frontend, menghubungkan alur checkout dengan gateway pembayaran digital Midtrans (QRIS, VA, E-Wallet) dengan verifikasi webhook otomatis, serta merancang modul back-office untuk manajemen katalog harga barang dan hak akses staf.
Fitur & Implementasi Teknis
- POS Terminal Interaktif & Cepat: Membangun antarmuka kasir berbasis React 19, Vite, dan Tailwind CSS dengan katalog produk visual, pencarian instan, dan keranjang belanja terhitung otomatis (subtotal, diskon, dan pajak) secara real-time.
- Integrasi Payment Gateway Midtrans Otomatis: Mengintegrasikan Midtrans Snap API untuk pembayaran non-tunai multi-metode (QRIS, Transfer Bank, dan E-Wallet). Membangun webhook listener yang memverifikasi signature transaksi, mencatat mutasi ke DocType Payment Transaction, dan otomatis mengubah status serta men-submit POS Invoice menjadi lunas.
- Manajemen Harga Barang (Item Prices) End-to-End: Mengembangkan modul pengelolaan harga produk menggunakan TanStack Table dengan fitur paginasi, filter pencarian, form validasi skema berbasis Zod, serta notifikasi toast interaktif.
- Integrasi Upload Berkas Frappe File API: Merancang custom hook
useUploadFileuntuk berkomunikasi dengan File Manager API Frappe, memungkinkan staf mengunggah foto produk langsung dari formulir pembuatan barang. - Kontrol Akses Berbasis Peran (RBAC) & Custom Hooks: Membangun antarmuka CRUD untuk manajemen peran pengguna dan pembatasan hak akses (Admin, Kasir, Manajer Outlet), didukung arsitektur custom hooks TypeScript bertipe data ketat untuk komunikasi modular ke RESTful API Frappe.
Hasil & Status Proyek
Aplikasi Kaze POS berhasil dikembangkan dan diuji dalam lingkungan operasional PT Data Andalan Utama, membuktikan integrasi yang stabil antara frontend React modern dan backend Frappe ERPNext untuk mempercepat transaksi kasir serta mengotomatisasi rekonsiliasi pembayaran digital.