Payments/ Deductions Tab:

Past Design

New Tab View: correct visual design; wireframes should follow this convention

General Overview of the Design

Component Guidelines

Compensation and Deduction Tables:

Controls for Adding and Removing Tables:

Use of Horizontal Rules

Adding and Removing Components effects on the Tab Layout:

Typical Interaction Flow:

Step 1. Adding An Hourly Compensation Type (Default Tab View)

Step 2. Defining Hourly Compensation Specifics, Adding Salary Compensation Type

Step 3. Defining Salary Compensation Specifics, Adding Other Compensation, Removing Hourly Compensation

Step 4. Defining Other Compensation Specifics, Adding Other Additions and Deductions

Step 5. Removing Other Compensations, Re-adding Hourly Compensations, Defining Other Additions and Deductions Specifics.