RANGGAEGHAPERMANA
ID
Back to projects
  • Vertical SaaS · Service Operations
  • 2026

Case study · 02 / 08

Tritama Barber

Bookings, queues, transactions, and commissions in one service flow.

Tritama Barber — screenshot

A barbershop management system connecting the customer journey with internal operations—from appointments to barber payroll slips.

My role
Full-stack Engineer
Status
Public repository

Key achievement

Connected booking, queues, checkout, and barber commissions in one traceable service lifecycle.

View repository
Tritama Barber — screenshot

01 · Context

The problem this project solves.

Primary users

  • Barbershop owners
  • Front-desk staff
  • Barbers

The problem

Bookings, walk-in queues, payments, barber performance, and payroll are often recorded separately, creating schedule conflicts and difficult commission reconciliation.

The approach

The system creates one service lifecycle: appointments or walk-ins select a barber and service, transactions complete payment, and commissions feed payroll calculations.

Key numbers

  • 5connected operational flows
  • 4payment methods
  • 10%automatic commission

02 · My role

What I worked on.

Full-stack Engineer

Technology used

  • Laravel 12
  • Sanctum
  • React 19
  • Vite
  • Tailwind CSS
  • Zustand
  • MySQL
  • DomPDF
  1. 01

    Built booking with time slots and a chosen barber to prevent schedule conflicts.

  2. 02

    Built a queue board with waiting, in-progress, and done statuses.

  3. 03

    Built checkout supporting cash, debit, QRIS, transfer, discounts, and promos.

  4. 04

    Calculated commissions automatically and generated PDF salary slips for barbers.

03 · Highlights

A few selected screens.

Click an image to view it larger.

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

Web

Business dashboard

Sales KPIs, payment methods, top services, and barber performance.

Web

Queue board

Waiting, in-progress, and done queues updated live.

Web

Checkout transactions

Daily transactions with their value and cashier.

Web

Barber salary slips

Monthly payroll combining base pay and commissions.

01 / 04

04 · Challenges & decisions

Technical problems and how I solved them.

01 · Challenge

Barber schedules kept clashing

Approach

Bookings store the time slot and chosen barber, while walk-in queues follow the service status.

Result

The owner and front desk know who serves whom, and when.

02 · Challenge

Commissions were hard to reconcile

Approach

Every transaction item records the barber and service, then flows into salary-slip calculations.

Result

Barbers get salary slips that trace back to the transactions.

01 / 02

05 · Outcome

What the solution delivers.

Owners can read revenue and barber performance, front-desk staff can manage daily queues, and barbers receive traceable commission calculations.

User flow

  1. 01Booking or walk-in
  2. 02Select barber and service
  3. 03Join queue
  4. 04Service in progress
  5. 05POS and payment
  6. 06Record commission
  7. 07Payroll slip and reports

Architecture

Experience

React SPA · queue board · booking · POS · dashboard

API

Laravel REST API · Sanctum · notification and PDF services

Business rules

booking slots · queue status · transactions · commissions

Data

MySQL relational model · scheduled jobs · email delivery

Data model

Customer

name

phone

visit_count

Barber

user_id

specialization

commission

Service

name

duration

price

Appointment

customer_id

barber_id

scheduled_at

Queue

appointment_id

number

status

Transaction

customer_id

payment_method

total

Transaction Item

transaction_id

service_id

barber_id

Salary Slip

barber_id

period

base

commission

  • Customer 1—N Appointment / Transaction
  • Barber 1—N Appointment / Transaction Item
  • Appointment 0—1 Queue
  • Transaction 1—N Transaction Item
  • Barber 1—N Salary Slip
Next projectTCF SuperappsOne place for employee leave, overtime, attendance, permits, and meeting rooms.