Vanlynk | Staff Simplification

Overview

A ground-up rebuild of the staff management module for vanlynk - field service platform , the screens an administrator uses to find an employee, add a new one, and edit everything about them: pay, payroll, banking, access control, work schedule, background checks, documents, and ratings. It consolidates employee record into one modern, consistent workspace, and replaces a set of legacy screens that had grown out of dated.

The Problem

The old staff screens weren’t broken so much as unpleasant. The UI was visibly aged, and the experience of editing an employee was clunky and slow to move through. For the admins and managers , that friction is a real cost. Rather than keep patching the legacy implementation, the decision was to rebuild the module with a modern, friendly UI and a consistent interaction model, so every staff record looks and behaves the same way.

Technical Approach

The list screen is built around a reactive filter pipeline: form changes flow through debounceTime and distinctUntilChanged into a switchMap that cancels stale requests and hits a single unified search endpoint — so typing into a filter never floods the server or races itself.

Creation is a four-step wizard governed by an explicit state machine (idle → loading → success → failed) with per-step validation gating.

The profile editor uses a smart-container / presentational-children pattern. One container component hosts tab components. Each child owns its own Angular reactive FormGroup and emits it upward to the container whenever it changes. The container never reaches into the children; it simply collects their forms, watches their combined state to show or hide the Save bar.