SALON OS

A salon queue calendar designed twice — a stylist grid you drag bookings across on desktop, inverted on a phone into the one question the counter actually gets asked

ph-akin.dev/SalonOS.html
SALON OS live page screenshot.
SALON OS on desktop, showing the dialog that redistributes bookings after a stylist calls in sick
A stylist goes home sick mid-shift. Three of her four bookings get a slot; the page says plainly that the fourth has nobody and needs a phone call.
SALON OS at 375 pixels wide on a phone
At 375px the grid inverts into a single question — who is free this afternoon — with all five stylists' open windows on one screen.

Project overview

Almost every salon tool shrinks its desktop grid onto a phone, and what arrives is a grid you have to pinch to read. This page refuses that, because the owner is doing two different jobs on the two devices. In the morning she is at a desk planning the whole day, so she needs everything at once as a two-dimensional grid: five stylists as columns, time running down, a booking's length showing as the height of its block, and drag to move one across. By the afternoon she is at the counter with a phone against her shoulder and a customer asking one question — is anyone free this afternoon. So at 375px the view inverts: gaps become the subject and bookings the background, and all five stylists with the windows they can still take fit on one screen without scrolling.

Dashboard Booking Design System Light UI Thai

The 30-second version

  • Five stylist columns across half-hour rows from 10:00 to 20:00. Drag a booking onto another stylist's gap; slots it cannot legally land in never light up in the first place.
  • Drag alone is not enough, so every booking is also a button that opens a two-step move — pick the booking, pick the destination — which is the same path the keyboard and the phone use, because dragging on a small screen has to fight the scroll gesture.
  • Only destinations where the skill matches and nothing collides are offered, and never a slot more than half an hour earlier than the original: a customer booked for six in the evening cannot arrive at two.
  • When a stylist goes home sick mid-shift, four bookings move at once — three find a slot, and the page states plainly that the fourth has nobody free and needs a phone call, rather than pretending to place them all.
  • Every figure on the page is computed from the same data, not typed in. Move one booking and the count of things to handle, each stylist's gaps, and who is free right now all change with it — and an undo button puts it back.
  • Each status is carried by three layers at once — icon, Thai word, and colour — so the board still says which bookings are in trouble with every colour removed.

Who this is for

For shops that take bookings by phone or chat and write them in a notebook — hair and nail salons, spas, clinics, garages — where the real work is not reading a schedule all day but answering whether there is room, and moving bookings when something breaks.

Want something like this?

Adapted to your own business

Tell me what your business does, what you want the site to help with, and roughly what your budget is — I will design and build something that fits it.

Pricing starts at ฿3,900, depending on scope — see all three packages

Start a project on Fastwork Email me

View live site All projects