Internal Workflow Dashboard

Client: Major Commercial Bank (Anonymized)

Role: Front-End Engineer
Tech: React, TypeScript, Compound Components
Outcome: Robust state isolation & reusable grid

1. The Challenge

Internal workflow screens lacked clear separation between draft edits and committed state. Editing a record could inadvertently pollute the task list before the user confirmed changes, leading to data inconsistency and user confusion across the banking workflow.

2. My Solution

Designed a compound DataGrid component pattern with a contextual slide-over edit form. The form maintains strictly local draft state, completely decoupled from the shared task list. Changes only synchronize to the global state upon successful API submission, ensuring data integrity across all views.

3. The Outcome

Eliminated accidental state leakage in the workflow UI; established a reusable compound component architecture adopted across multiple squads; measurably reduced bugs related to premature state synchronization.