Skip to main content

LAB-04 · Self-initiated rebuild study

Cargo desk

A legacy cargo-office admin panel — the software genre that still runs parcel desks on the UK ↔ Bulgaria corridor — rebuilt as one markup tree wearing two skins. Flip between the faithful classic UI and the modern rework; the data underneath never changes.

Demo data: every name, email and phone number below is invented — reserved example.com addresses, phone numbers counting up from 0888 000 001. No real person, parcel or company appears here.
Демонстрационни данни: всички имена, имейли и телефони са измислени.
Филтриращ панел:
Намерени: 10 поръчки
№ДатаТоварителницаКлиент / ПолучателИмейлТелефонТегло / СумаТакса / КодСтатус
112.05.202620101Георги Георгиевg.georgiev@example.com0888 000 0013.60 кг / лв0.20 лвВ НАЛИЧНОСТ
212.05.202620102Ана Петроваa.petrova@example.com0888 000 0022.50 кг / лв1.50 лвВ ОФИС
312.05.202620103Тодор Илиевt.iliev@example.com0888 000 0034.00 кг / лв1.50 лвОТКАЗАНА
412.05.202620104Виолета Ангеловаv.angelova@example.com0888 000 0044.00 кг / лв1.50 лвДОСТАВЕНА
512.05.202620105Красимир Стоиловk.stoilov@example.com0888 000 0053.00 кг / лв1.50 лвВ НАЛИЧНОСТ
612.05.202620106Десислава Митеваd.miteva@example.com0888 000 0062.50 кг / лв1.50 лвВ ОФИС
712.05.202620107Борис Николовb.nikolov@example.com0888 000 0073.00 кг / лв1.50 лвОТКАЗАНА
812.05.202620108Ралица Ивановаr.ivanova@example.com0888 000 0083.00 кг / лв1.50 лвДОСТАВЕНА
912.05.202620109Христо Христовh.hristov@example.com0888 000 0093.00 кг / лв1.50 лвДОСТАВЕНА
1012.05.202620110Милена Атанасоваm.atanasova@example.com0888 000 0104.00 кг / лв1.50 лвДОСТАВЕНА

Why rebuild a legacy panel

Panels like this run real freight: waybill-first search, dense single-screen tables, status chips, and flat per-kilo surcharges to each regional office — София 1.50 / Пловдив 1.50 in the surcharge column, the kind of pricing rule that classically lives on a sticky note beside the monitor. Rebuilding the genre forces you to learn its operational grammar before you earn an opinion about redesigning it.

One tree, two skins

  • Same markup, two grammars: the toggle swaps class sets only — powder-blue chrome, hairline borders and system-font density on one side; dark surfaces, a spacing scale and a status colour system on the other.
  • What the rework keeps: the density. An operator scans the whole desk at a glance, so the modern skin spends its budget on contrast and state, not whitespace.
  • What it adds: row hover states, focus affordances on the filter inputs, and status chips that read at a glance in both themes.