RANGGAEGHAPERMANA
ID
Back to projects
  • Operations · Inventory & Sales
  • 2026

Case study · 06 / 08

OpsHub

From incoming stock to profit and loss in one workspace.

OpsHub — screenshot

An SME operations dashboard for products, stock, sales, invoices, customers, purchasing, expenses, reporting, and activity audits.

My role
Full-stack Engineer · Product UI
Status
Public showcase

Key achievement

Brought SME stock, sales, purchasing, and profit-and-loss into one workflow with an audit trail.

View repository
OpsHub — screenshot

01 · Context

The problem this project solves.

Primary users

  • SME owners
  • Operations administrators
  • Warehouse and cashier staff

The problem

Many SMEs record inventory, sales, suppliers, and expenses in different places. Revenue may be visible while the real stock position and profit remain difficult to trace.

The approach

OpsHub connects sales with stock reduction, purchasing with stock replenishment, expenses with profit-and-loss reporting, and every sensitive change with an audit log.

Key numbers

  • 18documented feature screens
  • 3operational roles
  • 100%critical flows audited

02 · My role

What I worked on.

Full-stack Engineer · Product UI

Technology used

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

    Built stock-in, stock-out, adjustment, and low-stock alert flows.

  2. 02

    Built sales transactions with discounts, tax, refunds, and PDF invoices.

  3. 03

    Built sales and profit-and-loss reports from transaction and expense data.

  4. 04

    Recorded an audit log of who changed what and when.

  5. 05

    Implemented multi-role sign-in for admins, staff, and owners.

03 · Highlights

A few selected screens.

Click an image to view it larger.

Swipe through them all, tap an image to enlarge it.

Web

Operations dashboard

Sales, stock, and recent activity KPIs in one summary.

Web

Sales

Transactions with customer, value, and payment status.

Web

Profit and loss

Revenue, costs, and net result presented together.

Web

Activity audit

A history of user actions for tracing every data change.

01 / 04

04 · Challenges & decisions

Technical problems and how I solved them.

01 · Challenge

Revenue was visible, but stock and profit were not

Approach

Sales reduce stock, purchases replenish it, and expenses feed the profit-and-loss report.

Result

Owners read the state of the business from one source of data.

02 · Challenge

Data changes were hard to trace

Approach

Every important change is recorded in a human-readable audit log.

Result

Stock or price differences can be traced back to who made them.

01 / 02

05 · Outcome

What the solution delivers.

Owners gain one operational source of truth while admins and staff continue to work within their roles without unnecessary access to sensitive data.

User flow

  1. 01Sign in by role
  2. 02Manage master data
  3. 03Record stock or purchases
  4. 04Process sales
  5. 05Generate invoice
  6. 06Reconcile reports
  7. 07Audit activity

Architecture

Frontend

React + TypeScript + Vite · responsive operations UI

API

Laravel REST API · Sanctum bearer token · RBAC middleware

Domain

Inventory · Sales · Purchasing · Expenses · Reporting · Audit

Persistence

MySQL production · SQLite smoke tests / CI

Data model

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
Next projectSoundNusantaraOne media experience from discovery to HiFi playback.