Portfolio / '26Sara Moussa

Workforce & Time Platform

Timeer

Work-time rule management for a live workforce platform.

I implemented frontend workflows for configuring compensation and flex-time rules in a login-protected product used by real teams. I then connected those company settings to employee contract creation and contract details.

Live productLogin required
View live site

Role

Frontend implementation

Focus

Rules, flex, guided setup

Stack

Next.jsReactTypeScriptTailwind CSSMUIAxiosTanStack

01 / Compensation rules

Compensation rules

A settings workflow for configuring how overtime, extra hours, and compensatory time should be calculated.

What I implemented

  • Rule list and detail experience for creating, editing, activating, and setting default compensation rules.
  • Compensation form for overtime factors, qualified overtime threshold, extra-hours factor, rounding, and minimum overtime.
  • Comp-time controls for enabling comp time, balance limits, expiry behavior, validation, and save/reset states.

Compensation rule editor

Rule list and detail settings for overtime factors, comp time, thresholds, rounding, and save states.

Product value

Admins can configure complex compensation policies in one place instead of relying on scattered settings or manual contract edits.

02 / Flex settings

Flex settings

A separate rule-management flow for flex-time boundaries, alerts, balance limits, and reconciliation behavior.

What I implemented

  • Flex rule sidebar and detail editor with create, update, active/default state, delete, and replace flows.
  • Fields for flex balance limits, flex window, core-time alerts, daily flex cap, and monthly or yearly reconciliation.
  • Typed form mapping to API requests for creating, updating, replacing, deleting, and setting default flex rules.

Flex rule editor

Rule management for flex balance limits, work windows, alerts, reconciliation, and default behavior.

Product value

Companies can define flex-time policies with clear boundaries before those policies are applied to employee contracts.

03 / Technical foundation

What kept the settings flows reliable

Behind the two settings screens, I also built the parts users don't see.

Typed API layer

TypeScript models and API methods for every rule action, from creating and editing a rule to choosing the default one.

No lost changes

Admins get a warning before leaving a tab or the page with unsaved edits, and can choose to save or discard.

Rules on contracts

The same compensation and flex rules can be picked when creating or editing an employee contract.

Guided setup

Step by step tours walk admins through each settings page, with translated text.

Outcome

Made complex work-time policies safer to configure and easier to apply to employee contracts.