Hisabi Ledger

From paper rolls to the books.

A browser workspace for a corrugated-box factory: materials, production, dispatch, billing and finance in one place.

Product designFull-stack development2025 – 2026
Overview

One system for the work behind every box.

Hisabi Ledger connects purchasing, raw-material stock, production, delivery challans, invoicing and finance for Boxilla Packages, a corrugated-packaging manufacturer in Pakistan. I designed it and built it.

PRODUCTHisabi LedgerBrowser-based web application
CLIENTBoxilla PackagesCorrugated boxes & cartons
MY ROLEProduct design + developmentSolo, end to end
TIMELINESep 2025 – Feb 2026In daily use since March 2026
The starting point

The factory ran on three tools.
None of them spoke corrugation.

Paper registers

Purchases, dispatch and payments were written by hand, so every question meant finding the right book and adding it up.

Spreadsheets

Stock lived in Excel. Nothing linked it to what was bought, produced or sent to a customer.

Generic software

General accounting tools had no idea what a reel, GSM, ply or glue ratio was, so production was not in the system at all.

The brief

Build one system around how a corrugation unit actually works and keep it simple enough for everyone who uses it.

AChallenge

Materials, production and money were tracked in separate places. Nobody could see stock, job cost or cash without assembling it by hand.

BApproach

Model the factory's real objects (reels, rolls, glue, boxes, challans) and let each record update the next one automatically.

CConstraint

Mixed digital literacy. Managers and department heads range from very comfortable to rarely at a computer, so every screen has to be obvious.

Design

  • Client interviews
  • Workflow mapping
  • Logo & product mark
  • Design system
  • Desktop UI

Build

  • Next.js + React
  • Prisma + PostgreSQL
  • Stock & cost services
  • Roles & plans
  • Light / dark mode

Delivery

  • Data setup
  • Handover & training
  • Ongoing support
Listening first

What did the factory actually need?

Before designing anything, I sat with the owner to understand how work moved from a paper reel to a paid invoice, and where it got lost.

B
Babar AkbarCEO, Boxilla Packages
01 · Before HisabiPain point
“Reels, GSM, ply, glue: those words didn't exist in the software we tried.”
02 · VisibilityPain point
“If I wanted to know what a job really cost us, someone had to put it together by hand.”
03 · The askRequirement
“Keep it simple. If a screen confuses them, they will go back to the register.”
04 · Most valuedPriority
“A few clicks and it’s done. I even ran operations from my phone while I was on Umrah.”
MethodsOwner interviewsWorkflow walkthroughsPaper-register reviewHandover sessions

The insight that shaped everything: the system has to speak the factory's language.

Who uses it

Three jobs,
one shared workspace.

Owner · Management

See where the business stands.

Sales, purchases, income, expense and cash on one dashboard, without asking anyone.

Store · Production

Know what is on the floor.

Reels, rolls, glue and finished boxes in one table with unit, quantity, cost and status.

Dispatch · Accounts

Ship it, then bill it.

Record a challan against stock, then turn what was delivered into an invoice.

Design principles

Four rules I
designed against.

01

Speak the factory's language.

GSM, ply, reels and challans appear as first-class fields, not free text.

02

One entry, every effect.

A purchase raises stock; a delivery lowers it; an invoice reads what shipped.

03

Obvious over clever.

Plain labels, one primary action per screen, and units printed beside every number.

04

Cost travels with the box.

Material cost follows the product into stock, dispatch and margin.

Timeline

Six months to build.
Seven months in daily use.

2025Sep
2025Oct
2025Nov
2025Dec
2026Jan
2026Feb
2026Mar
2026Apr
2026May
2026Jun
2026Jul
2026Aug
2026Sep
Design & buildIn daily use
SEP 2025Discovery & design

Interviews, workflow mapping, the design system and first screens.

LATE FEB 2026Handover

Data set up and the team trained on the live system.

MAR 2026Full use

Purchases, stock, dispatch and billing move into Hisabi.

APR 2026The only system

Registers and spreadsheets retired for this work.

System map

From paper reel
to paid invoice.

01Purchase

Supplier bills bring reels, rolls and glue in.

02Inventory

Typed materials with units and average cost.

03Production

Box specs turn into material demand.

04Delivery

Challans move finished boxes out.

05Invoice

Billing from what was delivered.

06Reports

Profit, margin and receivables.

The workspace

The whole business,
one screen in.

Hisabi · Financial overview
Hisabi dashboard with sales, purchases, income, expense and petty cash cards, quick actions and recent transactions
Product structure

Eight modules,
one connected record.

PEOPLE
Customers

Balances and ledgers

PEOPLE
Suppliers

Bills and payables

INPUT
Purchases

Stock in, with cost

STOCK
Inventory

Reels, rolls, glue, boxes

MAKE
Production

Specs to material demand

SEND
Deliveries

Challans against stock

BILL
Invoices

From delivered lines

LEARN
Reports

Profit, margin, receivables

Plus cash, bank, expenses, HR and users

Design system · Foundations

A quiet system
for dense records.

Colour · with an operational job
PRIMARY#16A34A
HOVER#15803D
TINT#DCFCE7
CANVAS#F3F4F6
DARK#0F172A
Warning
Danger
Info
Dark accent
Hisabi logo
Hisabi product markTwo stacked ledger bars inside a folded diamond
Type · Inter, tabular figures
Aa 12,500
Regular · Medium · Semibold · Bold
32Corrugated raw materialsPage title
20Recent transactionsSection
14Current stock · Min stock · Avg costTable label
1412,500.00 kg · Rs. 85.50 · 2,399 pcsFigures

Tokens from the active theme · Green leads in light mode, amber in dark

Design system · Components

Small patterns keep
big workflows legible.

Actions
+ Add materialView ledgerCancelDelete
Fields
Material name *
Kraft Liner 150 GSM 48"
Unit *
kg
Opening stock
12,500
Navigation
8px controls12px cards16px panels
Status
● In stock● Low stockPostedOverdue
Table
MATERIAL
UNIT
STOCK
Kraft Liner 150 GSM
kg
12,500
Fluting Medium 112
m²
5,200
Corn Starch Glue
kg
850
⚠ Available quantity must cover the dispatch.
Chapter 01

MATERIALS
BY THE
KILO.

A corrugated factory buys paper by weight, board by area and boxes by count. The stock model had to hold all three.

Inventory model

Every material
knows its unit.

01 · INPUT

Reel paper

Kraft, test and white-top liners by GSM and deckle width.

kg
02 · INPUT

Corrugated roll

Fluting medium measured by the board area it makes.

m²
03 · INPUT

Chemicals

Starch glue, silicate and adhesives, consumed by ratio.

kg
04 · OUTPUT

Finished box

RSC and die-cut boxes, carrying their production cost.

pcs
Stock

Stock in plain sight.

Every reel, roll and chemical in one table, with the unit, current stock, average cost and status on the same line.

01Units printed beside every quantity
02Average cost updated by purchases
03Stock rises only through purchase bills
Inventory · Corrugated raw materials
Corrugated raw materials table with unit, current stock, minimum stock, average cost and status
Purchases

A purchase is a stock event.

A supplier bill records the company, the items, quantity, unit and price, and raises inventory at the same time.

01Existing suppliers and items autocomplete
02Amount and subtotal calculate as you type
03Cash or credit terms per bill
Purchases · New bill
Create new purchase form filled with a Punjab Paper Mills bill
Chapter 02

DIMENSIONS
BECOME
MATERIAL.

A job starts with a physical spec: ply, liner, flute, box size, quantity and expected wastage.

Production

Specify the box. The system does the rest.

Choose the ply, then the outer paper and the rolls it needs. Enter the box size and quantity; consumption and cost are calculated from stock.

01Ply decides how many rolls are asked for
02Material search shows live stock
03Wastage defaults to 5%, editable per job
Inventory · Production
Production form for a 5-ply RSC box
Under the hood

Turn a box spec into material demand.

The production service works out every kilo and square metre a job needs from its geometry, ply layout, paper weight, wastage and glue ratio.

Box dimensions + flap allowances mm
Ply distribution 3 / 5 / 7
Sheet area + wastage m²
Paper weight from GSM kg
Glue from material ratio kg
= Calculated material demand
Posting

One posting moves both
sides of stock, and the cost.

Materials outLiner, flute and glue

Consumed quantities and their costs recorded as movements.

QuantityBoxes produced

The output count for the job.

Finished goods inUnit cost per box

Stored on the stock so dispatch and margin use it later.

Stock guardPosting stops if any material would go negative.
One transactionConsumption and output commit together or not at all.
Movement trailEvery change links back to the job that caused it.
Chapter 03

OUT THE
DOOR,
ONTO THE
BOOKS.

Delivery, invoicing and reporting share one chain of records.

Delivery

A challan moves boxes out
and remembers what they cost.

Deliveries · New challan
New delivery challan form

Customer, challan, vehicle and line items, with available stock beside each line

Deliveries · BX-DC-013
Posted delivery with cost at dispatch per line

Posted: cost at dispatch is captured per line

How a dispatch posts

One dispatch touches
more than one record.

01 · INPUTChallan

Customer, date, finished item and dispatch quantity.

02 · GUARDAvailable stock

The service checks the quantity exists before posting.

03 · POSTStock movement

Finished goods decrease; the cost at dispatch is recorded.

04 · NEXTInvoice source

Posted lines become available for billing.

Motion study · Material to record

Plays as you scroll

01 / INPUTS

Materials

Kraft Liner150 GSM 48″
Fluting Medium112 GSM 48″
White Top Liner90 GSM 36″
ROLLS IN STOCK
02 / MAKE

Production

BoxRSC 16×12×10″
Ply · size5-ply · 406×305×254 mm
Qty · wastage1,200 · 5%
FORM · BOX SPEC
03 / SEND

Delivery

ChallanBX-DC-013
RSC 12×10×8″1,500 pcs
Cost at dispatch32.50 / pc
POSTED
04 / BILL

Invoice

Revenue38,400
Cost (snapshot)26,000
Margin32.3%
INV-26-002 · POSTED

04 /Invoice and margin

Records from the demo database
Invoicing

Invoice what was delivered.
See the margin before you send it.

Invoices · INV-26-002
Invoice detail with revenue, cost snapshot, gross profit and margin
SOURCEPosted delivery lines

Only what shipped, and hasn't been billed, can be invoiced.

GUARDRemaining quantity

The service blocks over-billing a line.

RESULTRevenue beside cost

Gross profit and margin per line, at a glance.

The books

Operations become
the financial view.

01Sales

Invoiced revenue rolls into the dashboard.

02Purchases

Supplier bills and payables per supplier.

03Cash & bank

Petty cash and bank ledgers with transfers.

04Reports

Profit, customer margin and receivables.

Reporting

Margin sits
beside the line item.

Reports · Profit & margin
Profit and margin report with revenue, COGS, gross profit and margin per invoice line
REVENUEFrom invoice lines

Recognised when billed.

COSTSnapshot at dispatch

What the box cost when it left.

VIEWProfit and margin %

Per line, filterable by date and customer.

Reporting

A second lens:
profit by customer.

Reports · Customer profitability
Customer profitability report
GROUP BYCustomer

Invoices rolled up per account.

COMPARERevenue vs COGS

Which customers carry the margin.

SORTRevenue, profit, margin

Answer "who matters most" in one click.

Visual continuity

One structure.
Two modes.

Light · green accent
Light mode dashboard
Dark · amber accent
Dark mode dashboard
Built as software

From the interface
to the data model.

01 · EXPERIENCEReact

Screens, forms and tables

02 · APPLICATIONNext.js

Routes, API handlers, auth

03 · DATA ACCESSPrisma

Typed relational models

04 · STORAGEPostgreSQL

The business record

TypeScriptTailwind CSSDesign tokens → CSSRole- and plan-based accessOTP device verificationPlaywright end-to-end tests
Engineering decisions

Protect the
stock ledger.

01Check before postingProduction and delivery services validate available quantity before any stock changes.
02Record every movementTyped stock movements link each change to its business record and its cost.
03Keep it atomicMaterial consumption and finished-goods entry commit in one database transaction.
04Snapshot the costCost is frozen at dispatch, so later price changes never rewrite past margins.
In their words
He built it around how our business actually runs, not the other way round.
B
Babar AkbarCEO, Boxilla Packages
Outcome & reflection

From handover
to the only system.

7 mo

In daily use since the March 2026 rollout.

3 → 1

Registers, spreadsheets and generic software replaced by April.

8

Connected modules, from purchase to profit report.

What I learned

Simple is a data-model problem.

  • Screens got simpler once the schema used the factory's own words.
  • Designing and building the product myself meant no detail was lost at handoff.
What's next

Cost the job before it starts.

  • Cost estimation for new jobs, the client’s first request.
  • A full draft → calculate → post production-order screen.
  • Payment tracking inside receivables.
Hisabi Ledger

BUILT FOR THE WORK BEHIND THE BOX.

Product design and development by Umar Bin Akbar Ali.