WorkforceHub Punch Categories

Full-stack configuration UI for categorizing hours sent to payroll
Project overview

WorkforceHub Punch Categories is a configuration page in Swipeclock's WorkforceHub product where company admins and payroll providers set up the punch categories on a client's account — how worked hours are categorized before they are sent to payroll.

Previously, this lived in a legacy experience that popped out to a new tab, breaking the flow and looking inconsistent with the rest of the product. The new page is modern, matches WorkforceHub's UI/UX, and lives directly in the product so users never leave the system. The same experience was also backported to TimeWorksPlus so those customers get the improved flow as well.

Product capabilities described here are public-facing. Implementation details stay high-level to respect employer confidentiality and proprietary information.
Placeholder screenshot of Punch Categories list view

Screenshot placeholder

My role

I built both sides of this feature: the React frontend and the C# / .NET Framework API backend. That meant owning the configuration experience end-to-end - from how admins and providers interact with the page, to how category data is persisted and enforced in a role-aware way. I designed the layout of this UI and matched our existing product design system to create a consistent experience.

React C# / .NET Framework REST API Role-based UI
What this project delivered

High-level outcomes of the full-stack work - framed around product value, not internal design docs.

In-product experience

Replaced the legacy pop-out tab with a page that lives inside WorkforceHub and matches the rest of the system.

React frontend

Built a modern configuration UI for listing, adding, editing, and removing punch categories in a clear workflow.

.NET Framework API

Backend services power create/update/delete and the data the page needs to configure categories safely.

Role-based functionality

Features are gated by role - company admins and providers see what they are allowed to use; not every action is available to every user.

Payroll-ready categories

Punch categories define how hours are classified for payroll - regular, sick, vacation, holiday, and custom types.

TimeWorksPlus backport

Brought the improved page to TimeWorksPlus as well, so legacy-platform customers get the same modern experience.

Product features at a glance

  • Add categories - create new punch / pay types for the account
  • Edit categories - update names, overtime eligibility, collection options, and more
  • Remove categories - delete unused types (or inactivate when history exists)
  • Admin & provider access - available to company admins and providers
  • Default set - Regular/OT, Sick, Vacation, Holiday out of the box
  • Payroll-aware settings - options that affect how hours and amounts flow to payroll

Screenshot Placeholders

Resources

Check out the official documentation for configuring punch categories in WorkforceHub.