RANGGAEGHAPERMANA
EN
Kembali ke daftar proyek
  • Operations · Inventory & Sales
  • 2026

Studi kasus · 06 / 08

OpsHub

Dari stok masuk sampai laba rugi dalam satu workspace.

OpsHub — tangkapan layar

Dashboard operasional UMKM untuk produk, stok, transaksi, pelanggan, pembelian, invoice, laporan, dan audit log dalam satu alur kerja.

Peran saya
Full-stack Engineer · Product UI
Status
Public showcase

Pencapaian utama

Menyatukan stok, penjualan, pembelian, dan laba rugi UMKM dalam satu alur yang punya jejak audit.

Lihat repository
OpsHub — tangkapan layar

01 · Konteks

Masalah yang ingin diselesaikan.

Pengguna utama

  • Pemilik UMKM
  • Admin operasional
  • Kasir dan staf gudang

Masalahnya

OpsHub dibuat karena banyak UMKM masih memisahkan stok, penjualan, pembelian, pelanggan, dan pengeluaran di tempat yang berbeda. Omzet bisa terlihat, tetapi posisi stok dan laba sebenarnya sulit ditelusuri.

Pendekatannya

Aplikasi menghubungkan master data dengan transaksi: penjualan mengurangi stok, pembelian menambah stok, pengeluaran masuk ke laporan laba rugi, dan perubahan penting dicatat di audit log.

Angka kunci

  • 3role operasional
  • 18feature screens
  • 100%critical flows audited

02 · Peran saya

Bagian yang saya kerjakan.

Full-stack Engineer · Product UI

Teknologi yang digunakan

  • Laravel 13
  • PHP 8.3
  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • MySQL
  • SQLite
  • Sanctum
  • DomPDF
  • Recharts
  1. 01

    Membangun alur stok masuk, stok keluar, penyesuaian, dan peringatan stok menipis.

  2. 02

    Membuat transaksi penjualan dengan diskon, pajak, refund, dan faktur PDF.

  3. 03

    Menyusun laporan penjualan dan laba rugi dari data transaksi dan pengeluaran.

  4. 04

    Mencatat audit log berisi siapa mengubah apa dan kapan.

  5. 05

    Menerapkan login multi-role untuk admin, staff, dan owner.

03 · Sorotan

Beberapa tampilan pilihan.

Klik gambar untuk melihatnya lebih besar.

Geser untuk melihat semua, ketuk gambar untuk memperbesar.

Web

Dashboard operasional

KPI penjualan, stok, dan aktivitas terbaru dalam satu ringkasan.

Web

Penjualan

Transaksi dengan pelanggan, nilai, dan status pembayaran.

Web

Laba rugi

Pendapatan, biaya, dan hasil bersih disajikan bersama.

Web

Audit aktivitas

Riwayat aksi pengguna untuk menelusuri setiap perubahan data.

01 / 04

04 · Tantangan & keputusan

Masalah teknis dan cara saya menyelesaikannya.

01 · Tantangan

Omzet terlihat, tapi posisi stok dan laba tidak

Pendekatan

Penjualan mengurangi stok, pembelian menambah stok, dan pengeluaran masuk ke laporan laba rugi.

Hasil

Pemilik membaca kondisi usaha dari satu sumber data.

02 · Tantangan

Perubahan data sulit dilacak

Pendekatan

Setiap perubahan penting dicatat di audit log yang mudah dibaca.

Hasil

Selisih stok atau harga bisa ditelusuri ke pelakunya.

01 / 02

05 · Hasil

Apa yang dihadirkan solusi ini.

Pemilik usaha mendapatkan satu sumber data operasional untuk membaca penjualan, persediaan, pelanggan, pengeluaran, dan performa bisnis tanpa kehilangan jejak perubahan.

Alur penggunaan

  1. 01Login sesuai role
  2. 02Kelola master data
  3. 03Catat pembelian atau stok
  4. 04Proses penjualan
  5. 05Terbitkan invoice
  6. 06Baca laporan
  7. 07Audit aktivitas

Arsitektur

Frontend

React · TypeScript · Vite · Tailwind CSS · Recharts

API

Laravel REST API · Sanctum bearer token · RBAC middleware

Domain

Inventory · Sales · Purchasing · Expenses · Reporting · Audit

Persistence

MySQL production · SQLite smoke tests · PDF invoice

Model data

User & Role

role

status

permissions

Product

sku

category_id

price

stock

Stock Movement

product_id

type

before

after

Sale

customer_id

payment_status

total

Audit Log

actor_id

action

record

created_at

  • User 1—N Audit Log
  • Product 1—N Stock Movement
  • Customer 1—N Sale
  • Sale 1—N Sale Item
Proyek berikutnyaSoundNusantaraSatu pengalaman media dari discovery sampai pemutaran HiFi.